@import 'tokens.css';

/* ==========================================================================
   SAUNG HADIS · HIGH-PRECISION TURATS DESIGN SYSTEM (v100)
   Clean-Slate Modular Stylesheet
   Obsidian Slate Dark (#0e1015) & Crisp Slate 50 Light (#f8fafc)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. RESET & BOX MODEL
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Aksesibilitas keyboard (WCAG 2.4.7): indikator fokus untuk semua elemen
   interaktif. Hanya muncul saat navigasi keyboard (focus-visible), sehingga
   tidak mengganggu pengalaman klik/tap. */
:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Anti-overflow global (Fase 8 v118): cegah teks panjang / kata Arab panjang
   meluber keluar frame. Semua elemen teks boleh membungkus kata panjang. */
.arabic,
[lang="ar"],
[dir="rtl"] {
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Kontainer flex/grid item tidak boleh memaksa lebar (penyebab #1 overflow) */
.orb-node,
.orb-info,
.kutub-card-main,
.card-body,
.rawi-card,
.book-titles-row {
  min-width: 0;
  margin-bottom: 8px;
}

/* Jaring pengaman (Fase 8 v118): semua judul & teks blok boleh membungkus
   kata panjang (nama kitab transliterasi, dll) agar tidak menembus frame. */
h1, h2, h3, h4, h5, h6,
.kutub-title,
.book-title,
.rawi-card-name,
.section-title,
.mushannif-card-title {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Jangan tampilkan outline ganda pada input yang sudah punya gaya fokus
   sendiri (border/ring pada container). */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bg-glow { display: none; }
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
  background-color: var(--studio-bg);
}

body {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  font-family: var(--font-sans);
  /* Background ditangani .bg-grid (fixed, z-index -2) agar animasi terlihat.
     Body dibuat transparan supaya lapisan grid tidak tertutup. */
  background-color: transparent;
  color: var(--studio-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   ANIMATED DOT GRID BACKGROUND (Fase 7 v117)
   Inspirasi: Aceternity "Dotted Glow Background". Implementasi vanilla, ringan
   (CSS-only gradient, tanpa canvas/JS loop). Fixed di belakang seluruh konten.
   -------------------------------------------------------------------------- */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--studio-bg);
  background-image: radial-gradient(
    var(--grid-dot-color) var(--grid-dot-size),
    transparent var(--grid-dot-size)
  );
  background-size: var(--grid-gap) var(--grid-gap);
  background-position: center center;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 75%);
}

/* --------------------------------------------------------------------------
   BACKGROUND: BUKU PARTIKEL (Fase 12 v123)
   Titik-titik dot bermorph membentuk siluet buku tertutup (tampak samping),
   lalu tetap sebagai buku (denyut halus). Canvas 2D native, tanpa library.
   Bila canvas tak tersedia / reduced-motion -> fallback ke dot CSS statis.
   -------------------------------------------------------------------------- */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.bg-canvas.is-ready { opacity: 1; }
/* Saat canvas aktif, sembunyikan dot CSS statis agar tidak dobel */
.bg-canvas.is-ready ~ .bg-grid { opacity: 0; transition: opacity 0.6s ease; }

/* Dua "glow" hangat yang melayang sangat halus di belakang hero */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-glow::before,
.bg-glow::after {
  content: "";
  position: absolute;
  width: 48vmax;
  height: 48vmax;
  border-radius: var(--radius-full);
  /* Optimasi (v125): blur dikurangi & di-`translateZ` agar di-composite GPU,
     jauh lebih ringan untuk mobile. */
  filter: blur(60px);
  opacity: 0.8;
  will-change: transform;
  transform: translateZ(0);
}
.bg-glow::before {
  top: -20vmax;
  inset-inline-start: -10vmax;
  background: radial-gradient(circle, var(--grid-glow-1), transparent 70%);
  animation: bgFloatA 26s ease-in-out infinite;
}
.bg-glow::after {
  bottom: -25vmax;
  inset-inline-end: -15vmax;
  background: radial-gradient(circle, var(--grid-glow-2), transparent 70%);
  animation: bgFloatB 34s ease-in-out infinite;
}

@keyframes bgFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); }
}
@keyframes bgFloatB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-4vmax, -3vmax, 0) scale(1.12); }
}

/* --------------------------------------------------------------------------
   02. DESIGN TOKENS
   All canonical design tokens are centralized in tokens.css (§4.2)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   03. THEME TOGGLE & ICON VISIBILITY
   -------------------------------------------------------------------------- */
.sun-icon { display: block; }
.moon-icon { display: none; }
html.light-theme .sun-icon { display: none; }
html.light-theme .moon-icon { display: block; }

/* --------------------------------------------------------------------------
   04. APP SHELL (HEADER, NAV, FOOTER)
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(14, 16, 21, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--studio-border);
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

/* Header "terangkat" saat halaman di-scroll (Fase 7 v117) — memberi kesan
   melayang/terpisah dari konten di bawahnya. */
.header.is-scrolled {
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--studio-border-hover);
  background: rgba(14, 16, 21, 0.95);
}

html.light-theme .header {
  background: rgba(248, 250, 252, 0.88);
}

html.light-theme .header.is-scrolled {
  background: rgba(248, 250, 252, 0.95);
}

/* Sorot navigasi dengan glow amber saat ditunjuk (Fase 7 v117) */
.nav a {
  position: relative;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--studio-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover::after,
.nav a.active::after {
  transform: scaleX(1);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--studio-primary);
}

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--studio-primary);
}

.logo-accent {
  color: var(--studio-accent);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  padding: 7px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--studio-muted);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nav a:hover {
  color: var(--studio-primary);
  background: var(--studio-hover);
}

.nav a.active {
  color: var(--studio-accent);
  background: var(--studio-accent-subtle);
  font-weight: 700;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-quick-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  color: var(--studio-muted);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.header-quick-search:hover {
  border-color: var(--studio-border-hover);
  color: var(--studio-primary);
}

.header-search-kbd {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-family: var(--font-mono);
}

.theme-toggle-btn {
  /* Aksesibilitas (WCAG 2.1 AA): touch target minimal 44x44px.
     Sebelumnya 36x36px. Ikon SVG di dalam tetap 18px sehingga tampilan
     header tidak membesar secara berlebihan. */
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--studio-border);
  background: var(--studio-surface);
  color: var(--studio-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.theme-toggle-btn:hover {
  background: var(--studio-hover);
  color: var(--studio-primary);
  border-color: var(--studio-accent);
}

/* Footer (v141) — disederhanakan atas permintaan pemilik proyek:
   tagline, navigasi, dan pembatas dibuang karena terasa ramai.
   Tersisa: wordmark kecil sebagai penanda ikonik + satu baris hak cipta. */
.footer {
  border-top: 1px solid var(--studio-border);
  background: var(--studio-surface);
  padding: var(--space-6) var(--space-5);
  margin-top: auto;
  text-align: center;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Wordmark kecil & redup — tetap ada sebagai tanda ikonik, tidak menonjol. */
.footer-brand-name {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--studio-muted);
  opacity: 0.75;
  user-select: none;
}

.footer-copy {
  font-size: 11px;
  color: var(--studio-muted);
  opacity: 0.8;
  margin: 0;
}

.footer-copy strong {
  color: var(--studio-secondary);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   05. PAGES & SECTION LAYOUTS
   -------------------------------------------------------------------------- */
.page {
  display: none;
  width: 100%;
  min-height: calc(100vh - 60px);
  opacity: 0;
  transition: opacity var(--dur-base) ease-in-out;
}

.page.active {
  display: block;
  opacity: 1;
}

.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

/* Beranda: rapatkan jarak Hero -> judul "Koleksi 9 Kitab Induk".
   Padding atas .main di sini murni pemisah dari Hero, sementara padding
   samping/bawah tetap dari aturan .main di atas. Halaman lain tidak terpengaruh
   karena masing-masing memakai inline padding sendiri (jelajah/perawi/favorit:
   padding: 0; cari: padding-top: 1rem). */
#pg-beranda .main {
  padding-top: var(--space-4, 16px);
}

.about-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.about-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.about-header h1 {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--studio-primary);
  margin-bottom: 12px;
}

.about-header p {
  font-size: 0.95rem;
  color: var(--studio-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

.about-section {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: 24px;
}

.about-section h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--studio-primary);
  margin-bottom: 16px;
}

.about-section p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--studio-secondary);
  margin-bottom: 12px;
}

.about-section p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   06. HERO & SEARCH BOX
   -------------------------------------------------------------------------- */
.hero {
  text-align: center;
  /* Jarak hero -> judul seksi dijaga rapat & sengaja dipegang di sini saja.
     Nilai ini bekerja bersama #pg-beranda .main (16px) agar total jarak dari
     tombol "Cari Hadis" ke judul sekitar 28px di desktop / 24px di mobile. */
  padding: 64px 20px 12px;
  max-width: 800px;
  margin: 0 auto;
}

/* Hero reveal bertahap (Fase 7 v117) — elemen muncul halus saat halaman dibuka */
.hero-title,
.hero-subtext,
.hero .search-wrap {
  opacity: 0;
  animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-title { animation-delay: 0.05s; }
.hero-subtext { animation-delay: 0.18s; }
.hero .search-wrap { animation-delay: var(--dur-slow); }

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--studio-primary);
  margin-bottom: 12px;
}

.hero-subtext {
  font-size: 1.05rem;
  color: var(--studio-muted);
  margin-bottom: 32px;
  line-height: 1.6;
}

.search-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Jarak ke judul seksi diatur oleh .hero (padding bawah) + #pg-beranda .main.
   Sebelumnya .search-wrap menambah 2rem (32px) sendiri, sehingga menumpuk
   dengan dua sumber lain (total ~88px di mobile). Sekarang beban jarak
   dipegang satu tempat saja agar mudah diatur. */

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--studio-surface);
  border: 2px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: 5px 6px 5px 16px;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

.search-box:focus-within {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 4px var(--studio-accent-subtle), var(--shadow-md);
}

.search-icon {
  color: var(--studio-muted);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--studio-primary);
  font-family: var(--font-sans);
}

.search-input::placeholder {
  color: var(--studio-muted);
}

.search-btn {
  background: var(--studio-accent-cta);
  color: var(--color-white);
  border: none;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover {
  background: var(--studio-accent-hover);
}

.clear-btn, .kb-trigger-btn {
  background: transparent;
  border: none;
  color: var(--studio-muted);
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.clear-btn:hover, .kb-trigger-btn:hover {
  color: var(--studio-primary);
  background: var(--studio-hover);
}

.sticky-search-container {
  position: sticky;
  top: 60px;
  z-index: 850;
  background: rgba(14, 16, 21, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--studio-border);
  padding: 12px 0;
}

html.light-theme .sticky-search-container {
  background: rgba(248, 250, 252, 0.92);
}

.section-header-wrap {
  margin-bottom: 20px;
  position: relative;
  padding-inline-start: 14px;
}
/* v128: aksen emas kecil di kiri judul seksi (menarik & konsisten dgn kartu) */
.section-header-wrap::before {
  content: "";
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to bottom,
    var(--studio-accent),
    transparent
  );
}

.section-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--studio-primary);
  margin-bottom: 8px;
}

.section-desc {
  font-size: 13px;
  color: var(--studio-muted);
}

/* --------------------------------------------------------------------------
   07. 9 KUTUB INDUK (KUTUBUT TIS'AH) GRID
   -------------------------------------------------------------------------- */
.kutub-grid {
  display: grid;
  /* v128: 3 kolom di desktop (lebih rapi & padat daripada auto-fill acak),
     2 kolom di tablet, 1 kolom di mobile. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .kutub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .kutub-grid { grid-template-columns: 1fr; }
}

.kutub-card {
  position: relative;
  /* Default nilai untuk custom props yang di-set JS (Fase 7 v117) */
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  padding-inline-start: var(--space-6);
  cursor: pointer;
  transition: transform var(--dur-base) ease, border-color var(--dur-base),
    box-shadow var(--dur-base);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}

/* v128: "punggung kitab" — aksen emas di tepi kiri, memberi kesan buku
   fisik; muncul penuh saat hover. */
.kutub-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(
    to bottom,
    var(--studio-accent),
    var(--studio-accent-border)
  );
  opacity: 0.35;
  transition: opacity var(--dur-base) ease, width var(--dur-base) ease;
  pointer-events: none;
  z-index: 2;
}
.kutub-card:hover::before {
  opacity: 1;
  width: 5px;
}

/* v128: nomor kitab besar & samar sebagai latar artistik (kanan bawah). */
.kutub-card > .kutub-watermark {
  position: absolute;
  inset-block-end: -8px;
  inset-inline-end: 8px;
  font-family: var(--font-mono);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: var(--studio-accent);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--dur-base) ease, transform var(--dur-base) ease;
  z-index: 0;
}
.kutub-card:hover > .kutub-watermark {
  opacity: 0.11;
  transform: translateY(-4px) scale(1.04);
}

/* Sorotan (spotlight) yang mengikuti kursor (Fase 7 v117) */
.kutub-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--dur-base) ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    var(--studio-accent-subtle),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.kutub-card:hover::before { opacity: 1; }
.kutub-card > * { position: relative; z-index: 1; }

.kutub-card:hover {
  border-color: var(--studio-accent);
  box-shadow: var(--shadow-md);
}

/* Aksesibilitas keyboard (WCAG 2.4.7 & 2.1.1): kartu kini `role="button"` +
   `tabindex="0"`, jadi perlu indikator fokus sejelas keadaan hover. Memakai
   `:focus-visible` agar tidak mengganggu pengalaman klik/tap. */
.kutub-card:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 2px;
  border-color: var(--studio-accent);
  box-shadow: var(--shadow-md);
}

/* 3D tilt hanya pada perangkat dengan kursor presisi (desktop) */
@media (hover: hover) and (pointer: fine) {
  .kutub-card:hover {
    transform: translateY(-4px) perspective(900px)
      rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
}

.kutub-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.kutub-num {
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--studio-accent);
  background: var(--studio-accent-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.kutub-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--studio-muted);
}

.kutub-titles {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.kutub-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--studio-primary);
}

.kutub-arabic-name {
  font-family: var(--font-arabic);
  font-size: 18px;
  color: var(--studio-accent);
  direction: rtl;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

.kutub-author {
  font-size: 13px;
  color: var(--studio-secondary);
  margin-bottom: 8px;
  font-weight: 500;
}

.kutub-wafat {
  color: var(--studio-muted);
  font-size: 11px;
}

.kutub-desc {
  font-size: 13px;
  color: var(--studio-muted);
  line-height: 1.55;
  margin-bottom: 16px;
}

.kutub-card-foot {
  border-top: 1px solid var(--studio-border);
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.kutub-action-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--studio-accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   08. HADITH CARDS (READING-FIRST & METADATA)
   -------------------------------------------------------------------------- */
.result-card {
  position: relative;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
  /* clip-path menggantikan overflow:hidden. Aturan repo melarang
     overflow:hidden pada pembungkus langsung teks Arab: teks Arab dipaksa
     patah kata sehingga baris terakhir matan sering tertinggal satu kata
     sendirian (mis. "ورسوله"). clip-path tetap memotong sudut mengikuti
     border-radius, tetapi tidak mengganggu lebar alami teks. */
  clip-path: inset(0 round var(--radius-lg));
  /* Optimasi v129: lewati render kartu yang jauh di luar layar (hemat kerja
     browser saat daftar panjang). contain-intrinsic-size menjaga tinggi
     agar scrollbar tidak melompat. */
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}

/* Border aksen bergerak saat hover (Fase 7 v117) — garis amber menyapu tepi atas */
.result-card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, var(--studio-accent), transparent);
  transition: transform var(--dur-slow) cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.result-card:hover::after { transform: scaleX(1); }

/* Reveal on-scroll (Fase 7 v117) — elemen muncul halus saat masuk viewport */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.result-card:hover {
  border-color: var(--studio-border-hover);
}

.card-header {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  /* Catatan: .card-header sengaja BUKAN flex-row. Kolom tombol (.card-actions)
     dikeluarkan dari aliran flex lalu ditempel di kanan-atas, supaya matan Arab
     mendapat lebar penuh kartu. Sebelumnya tombol berdampingan dengan teks dan
     memakan ~84px, sehingga matan terpaksa patah kata dan baris terakhir sering
     tertinggal satu kata sendirian (mis. "ورسوله"). */
  display: block;
  position: relative;
  user-select: none;
}

.card-body {
  min-width: 0;
}

.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  /* Beri ruang di kanan supaya label tidak tertimpa tombol aksi. */
  padding-inline-end: 40px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
}

.b-sahih, .badge-sahih {
  background: var(--grade-shahih-bg);
  color: var(--grade-shahih-text);
  border: 1px solid var(--grade-shahih-border);
}

.b-hasan-sahih, .b-hasan {
  background: var(--grade-hasan-bg);
  color: var(--grade-hasan-text);
  border: 1px solid var(--grade-hasan-border);
}

.b-dhaif {
  background: var(--grade-dhaif-bg);
  color: var(--grade-dhaif-text);
  border: 1px solid var(--grade-dhaif-border);
}

.b-maudu {
  background: var(--grade-maudu-bg);
  color: var(--grade-maudu-text);
  border: 1px solid var(--grade-maudu-border);
}

.b-src {
  background: var(--studio-deck);
  color: var(--studio-secondary);
  border: 1px solid var(--studio-border);
  font-weight: 600;
  font-size: 11px;
}

.hadis-text.arabic {
  font-family: var(--font-arabic);
  font-size: 22px;
  line-height: 2.25;
  color: var(--studio-primary);
  direction: rtl;
  text-align: right;
  margin-bottom: 12px;
  word-break: break-word;
  overflow-wrap: break-word;
  letter-spacing: 0;
  word-spacing: 0.05em;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  padding-block: 0.25em;
  hyphens: none;
  unicode-bidi: isolate;
}

.hadis-trans {
  font-size: 14px;
  line-height: 1.75;
  color: var(--studio-secondary);
  font-style: italic;
}

.card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex-shrink: 0;
  /* Ditempel di kanan-atas kartu, di luar aliran teks, agar matan Arab
     memakai lebar penuh. Diletakkan sejajar baris label derajat (bukan
     ditumpuk vertikal) supaya tidak mengambang di tengah kartu. */
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-3);
}


.bookmark-btn {
  /* Tombol ikon di kartu diperkecil tampilannya supaya matan Arab mendapat
     ruang lebih lega — ini permintaan pemilik. Namun AREA SENTUH tetap
     44x44px sesuai WCAG 2.1 AA (ukuran minimum target sentuh), jadi yang
     dikurangi hanya bentuk visualnya, bukan kemudahan menekannya.
     Caranya: wadah 44x44, isi visual 32x32 di tengahnya. */
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--studio-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
/* Bentuk visual tombol: kotak 32x32 dengan latar & tepi. */
.bookmark-btn > svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--studio-border);
  background: var(--studio-deck);
  box-sizing: border-box;
}

.bookmark-btn:hover {
  border-color: var(--studio-accent);
  color: var(--studio-accent);
}

.bookmark-btn.active {
  background: var(--studio-accent-subtle);
  border-color: var(--studio-accent);
  color: var(--studio-accent);
}

.card-toggle {
  color: var(--studio-muted);
  transition: transform var(--dur-base) ease;
}

.card-toggle.open {
  transform: rotate(180deg);
  color: var(--studio-accent);
}

/* --------------------------------------------------------------------------
   09. CARD DETAIL & TAHQIQ READING WELL
   -------------------------------------------------------------------------- */
.card-detail {
  border-top: 1px solid var(--studio-border);
  background: var(--studio-surface);
  padding: var(--space-5);
}

.tahqiq-hero-well {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: 20px;
}

.tahqiq-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--studio-border);
  padding-bottom: 12px;
}

.tahqiq-hero-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tahqiq-hero-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--studio-accent);
  background: var(--studio-accent-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--studio-accent-border);
}

.tahqiq-hero-rasm {
  font-size: 11px;
  color: var(--studio-muted);
  font-weight: 500;
}

.tahqiq-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.tahqiq-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-secondary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.tahqiq-btn-action:hover {
  border-color: var(--studio-accent);
  color: var(--studio-accent);
}

.tahqiq-matan-arabic.arabic {
  font-family: var(--font-arabic);
  font-size: 24px;
  line-height: 2.3;
  color: var(--studio-primary);
  direction: rtl;
  text-align: right;
  margin: 16px 0;
  word-break: break-word;
  overflow-wrap: break-word;
  letter-spacing: 0;
  word-spacing: 0.05em;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  padding-block: 0.25em;
  hyphens: none;
  unicode-bidi: isolate;
}

.tahqiq-trans-block {
  border-top: 1px dashed var(--studio-border);
  padding-top: 16px;
  margin-top: 16px;
}

.tahqiq-trans-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--studio-muted);
  margin-bottom: 8px;
}

.tahqiq-trans-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--studio-secondary);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   10. TABS CONTROLLER (SANAD, FAWAID, TAKHRIJ)
   -------------------------------------------------------------------------- */
.detail-toolbar {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--studio-border);
}

.tab-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.tab-row::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--studio-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.tab-btn:hover {
  color: var(--studio-primary);
  background: var(--studio-hover);
}

.tab-btn.active {
  color: var(--studio-accent);
  background: var(--studio-accent-subtle);
  border-color: var(--studio-accent-border);
}

.tab-count-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-secondary);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   11. SILSILAH SANAD & TIMELINE GRAPH
   -------------------------------------------------------------------------- */
.sanad-container {
  padding: 8px 0;
}

.sanad-spec-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
}

.sanad-spec-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.spec-label {
  color: var(--studio-muted);
  font-weight: 500;
}

.spec-val {
  color: var(--studio-primary);
  font-weight: 700;
}

.status-ittisal {
  color: var(--grade-shahih-text);
}

.spec-separator {
  color: var(--studio-border);
  font-weight: bold;
}

.direction-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--studio-primary);
  margin-bottom: 16px;
}


/* (Fase 9 v119) Blok CSS timeline kartu sanad lama dihapus - kini memakai .orb-chain */
@keyframes weakestPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--grade-dhaif-border); }
  50% { box-shadow: 0 0 0 5px transparent; }
}

.sanad-branches {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--studio-border);
}

.sanad-branch-chain {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
}

.sanad-branch-nodes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sanad-branch-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

/* Penunjuk ringkas di tab Silsilah Sanad: memberi tahu ada jalur penguat,
   lalu mengarahkan ke tab Takhrij & Tasyjir. Sengaja satu baris saja supaya
   tab Sanad tetap terasa bersih. */
.sanad-jalur-penunjuk {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--studio-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--studio-muted);
  line-height: 1.55;
}
.sanad-jalur-penunjuk strong { color: var(--studio-primary); }
.sanad-jalur-penunjuk button {
  background: transparent;
  border: 1px solid var(--studio-border);
  color: var(--studio-accent);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  min-height: 32px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.sanad-jalur-penunjuk button:hover { border-color: var(--studio-accent); }

/* Banner penunjuk pohon silsilah v2 — interaktif, berwibawa, touch-friendly (>=44px) */
.sanad-jalur-penunjuk-v2 {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-left: 4px solid var(--studio-accent);
  border-radius: var(--radius-md);
  background: var(--studio-surface);
  cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast);
}
.sanad-jalur-penunjuk-v2:hover {
  border-color: var(--studio-accent);
  background: var(--studio-deck);
  transform: translateY(-1px);
}
.sanad-jalur-penunjuk-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sanad-jalur-penunjuk-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--studio-accent-subtle);
  color: var(--studio-accent);
  flex-shrink: 0;
}
.sanad-jalur-penunjuk-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--studio-primary);
}
.sanad-jalur-penunjuk-sub {
  font-size: 11.5px;
  color: var(--studio-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.sanad-jalur-penunjuk-btn {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--studio-accent) !important;
  border-radius: var(--radius-sm);
  background: var(--studio-accent-subtle) !important;
  color: var(--studio-accent) !important;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.sanad-jalur-penunjuk-btn:hover {
  background: var(--studio-accent) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   TASYJĪR AL-ṬURUQ — pohon jalur riwayat (تَشْجِير الطُّرُق)
   Menggambar percabangan jalur sehingga titik temunya terlihat, bukan
   sekadar dibaca sebagai daftar. Warna seluruhnya memakai token agar ikut
   tema gelap/terang. Tidak memakai pustaka graf apa pun — SVG ditulis
   langsung dari app.js.
   -------------------------------------------------------------------------- */
.tasyjir-blok {
  margin-bottom: 18px;
  padding: 14px 12px 12px;
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  background: var(--studio-deck);
}

.tasyjir-judul {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--studio-primary);
  margin-bottom: 10px;
}
.tasyjir-judul .tasyjir-sub {
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: var(--studio-muted);
  margin-top: 2px;
}

.tasyjir-wrap {
  width: 100%;
}

/* Mode Layar Penuh (Fullscreen) Tasyjir al-Turuq */
.tasyjir-wrap.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: var(--studio-bg) !important;
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.tasyjir-wrap.is-fullscreen .tasyjir-zoom {
  margin-bottom: 12px;
  background: var(--studio-surface);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--studio-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  width: 100%;
  max-width: 600px;
}
.tasyjir-wrap.is-fullscreen .tasyjir-scroll {
  flex: 1 1 auto;
  height: calc(100vh - 86px) !important;
  overflow: auto;
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  background: var(--studio-deck);
  padding: 24px;
  box-sizing: border-box;
}

/* Baris kontrol zoom di atas pohon. */
.tasyjir-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.tasyjir-zoom-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-sm);
  background: var(--studio-surface);
  color: var(--studio-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tasyjir-zoom-btn:hover {
  border-color: var(--studio-accent);
  color: var(--studio-accent);
}
.tasyjir-zoom-btn:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 1px;
}
.tasyjir-zoom-reset { font-size: 14px; }
.tasyjir-fullscreen-btn {
  margin-left: 6px;
}
.tasyjir-zoom-val {
  min-width: 46px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--studio-muted);
  font-variant-numeric: tabular-nums;
}

/* Area gulir mendatar. Pohon sengaja TIDAK dikecilkan agar tulisan tetap
   terbaca; bila lebih lebar dari layar, pengguna menggeser. */
.tasyjir-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.tasyjir-scale {
  position: relative;
  will-change: transform;
}

.tasyjir-svg {
  display: block;
  /* SVG pohon sudah punya atribut width/height sendiri (lihat app.js), jadi ia
     TIDAK terkena aturan ikon `svg:not([width]):not([height])` yang memaksa 1em. */
  width: auto;
  max-width: none;
  height: auto;
  flex: 0 0 auto;
}

/* Simpul: saat disentuh/di-hover, seluruh kelompoknya ditebalkan supaya
   perawi yang sedang diperhatikan mudah dilacak. */
.tasyjir-node {
  cursor: pointer;
  outline: none;
  transition: opacity var(--dur-fast) ease;
}
.tasyjir-node:hover {
  opacity: 0.95;
}
.tasyjir-node:hover .tasyjir-shape,
.tasyjir-node:focus-visible .tasyjir-shape {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 6px var(--studio-gold-glow));
  stroke-width: 2.6px;
}
.tasyjir-node:hover text,
.tasyjir-node:focus-visible text {
  font-weight: 700 !important;
}


/* Nama perawi di dalam simpul tidak boleh ikut "diwarisi" atribut apa pun dari
   ikon lain di aplikasi — ia teks biasa, jadi dikunci tanpa seleksi agar tidak
   ter-highlight saat pengguna menggeser pohon. */
.tasyjir-node text {
  user-select: none;
  -webkit-user-select: none;
}

/* ------------------------------------------------
   Cahaya emas lembut pada simpul Rasulullah ﷺ.
   Dipakai untuk menandai satu simpul yang paling mulia dalam pohon. Sengaja
   PELAN (4,2 detik) dan tipis — cahaya yang berdenyut cepat akan mengalihkan
   mata dari pohonnya sendiri. Hanya simpul Rasulullah yang memakai kelas ini.
   ------------------------------------------------ */
@keyframes tasyjirGlowEmas {
  0%, 100% {
    filter: drop-shadow(0 0 2px var(--studio-gold-glow));
  }
  50% {
    filter: drop-shadow(0 0 11px var(--studio-gold-glow));
  }
}
.tasyjir-glow {
  animation: tasyjirGlowEmas 4.2s ease-in-out infinite;
}

/* Penghormatan pada pengguna yang mematikan animasi di sistemnya.
   Ini bukan pelengkap — aksesibilitas wajib: animasi denyut dapat memicu
   ketidaknyamanan/kelelahan bagi sebagian orang. Bila dimatikan, simpul tetap
   terlihat normal, hanya tanpa denyut. */
@media (prefers-reduced-motion: reduce) {
  .tasyjir-glow {
    animation: none;
    filter: drop-shadow(0 0 6px var(--studio-gold-glow));
  }
}

/* Simpul yang sedang ditunjuk kursor diberi cahaya emas juga, sebagai umpan
   balik bahwa ia bisa ditekan (hanya simpul titik temu yang punya aksi). */
.tasyjir-node[data-temu="1"]:hover .tasyjir-shape {
  filter: drop-shadow(0 0 6px var(--studio-gold-glow));
}

/* Keterangan jujur di bawah rantai sanad (v174). Menyatakan bahwa rantai ini
   adalah jalur sanad yang tersedia di korpus, BUKAN klaim "sanad Bukhari"
   atau "sanad Muslim" tertentu — karena dataset belum memetakan sanad per
   kitab. Tanpa keterangan ini, pembaca bisa menyangka rantai tunggal itu
   mewakili seluruh jalur periwayatan hadis. */
.sanad-catatan-jujur {
  font-size: 11px;
  color: var(--studio-muted);
  line-height: 1.65;
  margin-top: 14px;
  padding: 9px 11px;
  border: 1px dashed var(--studio-border);
  border-radius: var(--radius-sm);
  background: var(--studio-deck);
}

.tasyjir-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--studio-border);
}
/* Keterangan jujur di bawah pohon tasyjir: menyatakan bahwa pohon ini digambar
   dari jalur sanad yang tersedia di korpus, BUKAN seluruh jalur periwayatan
   hadis di semua kitab. Ditambahkan v174. */
.tasyjir-catatan-jujur {
  font-size: 11px;
  color: var(--studio-muted);
  line-height: 1.65;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px dashed var(--studio-border);
  border-radius: var(--radius-sm);
  background: var(--studio-deck);
}
.tasyjir-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--studio-muted);
}
.tasyjir-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tasyjir-dot-utama {
  background: var(--studio-accent);
  border: 2px solid var(--studio-accent);
}
.tasyjir-dot-cabang {
  background: var(--studio-deck);
  border: 2px solid var(--studio-accent);
}
.tasyjir-dot-biasa {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
}

.tasyjir-catatan {
  font-size: 10.5px;
  color: var(--studio-muted);
  line-height: 1.55;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   12. FAWAID HADIS
   -------------------------------------------------------------------------- */
.fawaid-card-container {
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--studio-surface);
  box-shadow: var(--shadow-xs);
}

.fawaid-structured-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fawaid-card-section {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.fawaid-sec-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--studio-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fawaid-sec-title {
  color: var(--studio-accent);
}

.fawaid-points-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fawaid-point-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fawaid-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--studio-accent-subtle);
  color: var(--studio-accent);
  border: 1px solid var(--studio-accent-border);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.fawaid-point-content {
  font-size: 13px;
  line-height: 1.65;
  color: var(--studio-secondary);
  flex: 1;
}

.fawaid-bold {
  font-weight: 700;
  color: var(--studio-primary);
}

/* --------------------------------------------------------------------------
   13. TAKHRIJ & PARALEL RIWAYAT
   -------------------------------------------------------------------------- */
.takhrij-row {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: block;
}
.takhrij-row:last-child {
  margin-bottom: 0;
}
/* v158: layout diubah dari dua kolom berdampingan menjadi SATU kolom berurutan.
   Alasannya: dua kolom itu isinya tidak sejenis (jalur riwayat di kiri, katalog
   kitab di kanan) sehingga sulit dipahami. Kini isinya tersusun bertahap:
   ringkasan -> titik temu -> daftar jalur -> katalog kitab. */
.takhrij-blok {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Katalog kitab pemuat hadis — pemisah jelas dari blok jalur di atasnya. */
.takhrij-katalog {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--studio-border);
}

.takhrij-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--studio-accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   PHASE 1-3 (v171) — SUMBER ASLI, TAKHRIJ, DAN KETERANGAN ASAL-USUL
   --------------------------------------------------------------------------
   Semua warna dari token tema (larangan #4 repo), tidak ada nilai keras.
   Semua properti arah memakai bentuk logis (larangan #6) supaya benar untuk
   teks Arab (RTL) maupun Latin (LTR).
   ========================================================================== */

/* --- Kartu sumber asli (أصول الحديث) --- */
.sumber-daftar {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.sumber-kartu {
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  background: var(--studio-surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sumber-kartu-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--studio-border);
}
.sumber-nomor {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--studio-accent-subtle);
  color: var(--studio-accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sumber-kitab {
  font-size: 14px;
  color: var(--studio-primary);
  line-height: 1.4;
}
.sumber-fakta {
  margin: 0;
  display: grid;
  gap: 6px;
}
.sumber-fakta > div {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px;
  align-items: baseline;
}
.sumber-fakta dt {
  font-size: 11px;
  color: var(--studio-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sumber-fakta dd {
  margin: 0;
  font-size: 13px;
  color: var(--studio-secondary);
  line-height: 1.5;
  word-break: break-word;
}
.sumber-kosong-teks {
  color: var(--studio-muted);
  font-style: italic;
}
/* Nama bab ditampilkan dalam tulisan Arab sebagai utama (korpus turats),
   dengan transliterasi Latin sebagai pendamping. line-height lega mengikuti
   aturan teks Arab repo (minimal 2.2). */
.bab-arab {
  display: block;
  font-family: var(--font-arabic, 'Amiri', serif);
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: 0;
  color: var(--studio-primary);
  unicode-bidi: isolate;
}
.bab-latin {
  display: block;
  font-size: 11px;
  color: var(--studio-muted);
  line-height: 1.5;
  margin-top: 2px;
}
.nomor-ket {
  font-size: 11px;
  color: var(--studio-muted);
}
.sumber-kartu-kaki {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--studio-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.sumber-aksi {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--studio-accent);
  background: none;
  border: none;
  padding: 6px 2px;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.sumber-aksi:hover { text-decoration: underline; }
.sumber-aksi:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.sumber-aksi-mati {
  font-size: 11px;
  color: var(--studio-muted);
  line-height: 1.5;
}
.sumber-kosong {
  font-size: 12.5px;
  color: var(--studio-muted);
  font-style: italic;
}
.sumber-catatan {
  font-size: 11px;
  color: var(--studio-muted);
  line-height: 1.6;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--studio-border);
}

/* --- Ringkasan takhrij ---
   CATATAN (v173): aturan .takhrij-ringkas / .takhrij-bab / .takhrij-catatan
   DIHAPUS karena fungsinya (buildRingkasTakhrijHtml) juga dihapus — isinya sama
   dengan kartu sumber. Menampilkan daftar kitab yang sama dua kali dengan dua
   judul berbeda itulah yang membuat tab Takhrij membingungkan. */

/* --- Lencana asal-usul & status kualitas --- */
.prov-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 9px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--studio-border);
  background: var(--studio-deck);
  color: var(--studio-muted);
  cursor: pointer;
  margin-inline-start: auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.prov-badge:hover { border-color: var(--studio-accent); color: var(--studio-accent); }
.prov-badge:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 2px;
}
.prov-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.prov-chip {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--studio-border);
  color: var(--studio-muted);
  white-space: nowrap;
}
.prov-verified { color: var(--grade-shahih-text); border-color: currentColor; }
.prov-unavailable, .prov-not_recorded { color: var(--studio-muted); }
.prov-needs_review, .prov-damaged { color: var(--grade-dhaif-text); border-color: currentColor; }
.prov-partially_verified, .prov-unverified { color: var(--studio-accent); border-color: currentColor; }

/* --- Lembar keterangan asal-usul --- */
.prov-sheet-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--studio-primary);
  margin-bottom: 8px;
}
.prov-sheet-status {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}
.prov-sheet-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--studio-border);
  font-size: 12.5px;
  color: var(--studio-secondary);
  line-height: 1.65;
}
.prov-sheet-k {
  color: var(--studio-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* --- Penilai yang tidak tercatat --- */
.penilai-tak-tercatat {
  color: var(--studio-muted);
  font-style: italic;
  font-weight: 500;
}

/* --- Daftar sumber lengkap (dilipat) --- */
.takhrij-detail[open] > summary { margin-bottom: 10px; }
.takhrij-detail > summary { list-style: none; }
.takhrij-detail > summary::-webkit-details-marker { display: none; }
.takhrij-detail > summary::after {
  content: '\25BE';
  margin-inline-start: 6px;
  color: var(--studio-muted);
}
.takhrij-detail[open] > summary::after { content: '\25B4'; }

.mukhrij-item {
  cursor: pointer;
  transition: border-color 0.15s;
}

.mukhrij-item:hover {
  border-color: var(--studio-accent);
}

.mukhrij-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mukhrij-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   14. JELAJAH KITAB & BAB EXPLORER
   -------------------------------------------------------------------------- */
.book-grid {
  display: grid;
  /* min() mencegah overflow di layar sempit (Fase 8 v118) */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  margin-top: 1.5rem;
}

.book-card {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  cursor: pointer;
  transition: background-color var(--dur-base) cubic-bezier(0.16,1,0.3,1), border-color var(--dur-base) cubic-bezier(0.16,1,0.3,1), transform var(--dur-base) cubic-bezier(0.16,1,0.3,1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-xs);
  min-height: 220px;
}

.book-card:hover {
  border-color: var(--studio-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--studio-hover);
}

.book-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.book-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--studio-accent-subtle);
  border: 1px solid var(--studio-accent-border);
  color: var(--studio-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.book-icon svg {
  width: 22px;
  height: 22px;
}

.book-meta {
  flex: 1;
  min-width: 0;
}

.book-titles-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.book-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--studio-primary);
  letter-spacing: -0.01em;
}

.book-arabic-title {
  font-family: var(--font-arabic);
  font-size: 18px;
  color: var(--studio-accent);
  direction: rtl;
  unicode-bidi: isolate;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

.book-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--studio-muted);
}

.book-grade-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 12px 0;
}

.book-grade-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.2px;
}

.book-grade-chip.sahih {
  background: var(--grade-shahih-bg);
  color: var(--grade-shahih-text);
  border: 1px solid var(--grade-shahih-border);
}

.book-grade-chip.hasan {
  background: var(--grade-hasan-bg);
  color: var(--grade-hasan-text);
  border: 1px solid var(--grade-hasan-border);
}

.book-grade-chip.dhaif {
  background: var(--grade-dhaif-bg);
  color: var(--grade-dhaif-text);
  border: 1px solid var(--grade-dhaif-border);
}

.book-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--studio-secondary);
  margin-bottom: 6px;
}

.book-wafat {
  font-size: 11px;
  font-weight: 500;
  color: var(--studio-muted);
}

.book-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--studio-muted);
  margin-bottom: 16px;
  flex: 1;
}

.book-card-action {
  border-top: 1px solid var(--studio-border);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--studio-accent);
  transition: color 0.15s;
}

.book-card:hover .book-card-action {
  color: var(--studio-accent-hover);
}

.bab-list-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.jelajah-book-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-primary);
  padding: 7px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.back-btn:hover {
  border-color: var(--studio-accent);
  color: var(--studio-accent);
}

.book-nav-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--studio-muted);
}

.breadcrumb-root {
  cursor: pointer;
  color: var(--studio-accent);
}

.breadcrumb-root:hover {
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--studio-primary);
  font-weight: 600;
}

.book-detail-hero {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: 20px;
}

.book-detail-hero-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.hero-badge-gold {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--studio-accent);
  background: var(--studio-accent-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--studio-accent-border);
}

.hero-badge-meta {
  font-size: 12px;
  color: var(--studio-muted);
}

.book-hero-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--studio-primary);
  margin-bottom: 8px;
}

.book-hero-author {
  font-size: 13px;
  color: var(--studio-secondary);
}

.hero-wafat-pill {
  color: var(--studio-muted);
  font-size: 12px;
}

.mushannif-card {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: 20px;
}

.mushannif-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.mushannif-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mushannif-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--studio-primary);
}

.mushannif-card-sub {
  font-size: 12px;
  color: var(--studio-muted);
}

.mushannif-toggle-btn {
  background: transparent;
  border: 1px solid var(--studio-border);
  color: var(--studio-accent);
  padding: 4px 10px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.jelajah-controls-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.book-view-toggle {
  display: flex;
  gap: 6px;
}

.book-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.book-toggle-btn.active {
  background: var(--studio-accent-subtle);
  border-color: var(--studio-accent-border);
  color: var(--studio-accent);
}

.book-search-container {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: 4px 12px;
  gap: 6px;
  flex: 1;
  max-width: 360px;
}
/* Penanda fokus keyboard (v138) — input di dalamnya mematikan outline,
   jadi container diberi sorot agar posisi Tab tetap terlihat.
   Pola sama dengan .search-box:focus-within. */
.book-search-container:focus-within {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 4px var(--studio-accent-subtle);
}

.book-search-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--studio-primary);
  width: 100%;
}

.book-search-clear {
  background: transparent;
  border: none;
  color: var(--studio-muted);
  cursor: pointer;
}

.bab-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.bab-toolbar-count {
  font-size: 13px;
  color: var(--studio-muted);
}

.bab-toolbar-actions {
  display: flex;
  gap: 8px;
}

.bab-action-btn {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-secondary);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bab-action-btn:hover {
  border-color: var(--studio-accent);
  color: var(--studio-accent);
}

.bab-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bab-kitab-card {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s;
}

.bab-kitab-card.expanded {
  border-color: var(--studio-accent-border);
}

.bab-kitab-header {
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 12px;
  user-select: none;
}

.bab-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.bab-number-badge {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--studio-accent-subtle);
  border: 1px solid var(--studio-accent-border);
  color: var(--studio-accent);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.bab-title-block {
  min-width: 0;
  flex: 1;
}

.bab-kitab-title-ar {
  font-family: var(--font-arabic);
  font-size: 18px;
  color: var(--studio-primary);
  direction: rtl;
  text-align: right;
  line-height: 2.2;
  word-break: break-word;
  overflow-wrap: break-word;
}

.bab-header-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.bab-hadith-range-badge {
  font-size: 11px;
  color: var(--studio-muted);
  background: var(--studio-deck);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--studio-border);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.bab-chevron-wrap {
  display: flex;
  align-items: center;
  color: var(--studio-muted);
}

.bab-chevron {
  transition: transform var(--dur-base) ease;
}

.bab-kitab-body {
  border-top: 1px solid var(--studio-border);
  padding: var(--space-4) var(--space-5);
  background: var(--studio-deck);
}

.bab-sub-item {
  margin-bottom: 12px;
}

.bab-sub-item:last-child {
  margin-bottom: 0;
}

.bab-sub-title {
  font-family: var(--font-arabic);
  font-size: 15px;
  color: var(--studio-accent);
  direction: rtl;
  text-align: right;
  margin-bottom: 8px;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

.bab-hadith-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bab-hadith-chip {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  padding: 5px 10px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--studio-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.bab-hadith-chip:hover {
  border-color: var(--studio-accent);
  color: var(--studio-accent);
  background: var(--studio-hover);
}

.hadith-num-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}

/* --------------------------------------------------------------------------
   15. PERAWI EXPLORER
   -------------------------------------------------------------------------- */
.rawi-search-box {
  margin-bottom: 1rem;
}

.rawi-search-input {
  width: 100%;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  color: var(--studio-primary);
  font-size: 14px;
  outline: none;
  transition: border-color var(--dur-base);
}

.rawi-search-input:focus {
  border-color: var(--studio-accent);
}

.rawi-filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 1.25rem;
  padding-bottom: 4px;
}

.rawi-filter-row::-webkit-scrollbar {
  display: none;
}

.rawi-filter-chip {
  padding: 6px 16px;
  min-height: 44px;
  border-radius: var(--radius-2xl);
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.rawi-filter-chip:hover {
  color: var(--studio-primary);
}

.rawi-filter-chip.active {
  background: var(--studio-accent-subtle);
  color: var(--studio-accent);
  border-color: var(--studio-accent-border);
}

.rawi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}

.rawi-card {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Optimasi v129: lewati render kartu perawi di luar layar */
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

.rawi-card:hover {
  border-color: var(--studio-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.rawi-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--studio-primary);
  margin-bottom: 4px;
}

.rawi-card-meta {
  font-size: 12px;
  color: var(--studio-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.rawi-tabaqah-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--studio-hover);
  color: var(--studio-secondary);
}

.rawi-tabaqah-badge.tabaqah-nabi { background: var(--studio-accent-subtle); color: var(--studio-accent); }
.rawi-tabaqah-badge.tabaqah-sahabat { background: var(--studio-hover); color: var(--studio-primary); }
.rawi-tabaqah-badge.tabaqah-tabiin, .rawi-tabaqah-badge.tabaqah-tabiuttabiin { background: var(--studio-deck); color: var(--studio-secondary); }

.rawi-books-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.rawi-book-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  color: var(--studio-muted);
}

.rawi-grades-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--studio-border);
}

.rawi-grade-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.rawi-grade-pill.sahih { background: var(--grade-shahih-bg); color: var(--grade-shahih-text); }
.rawi-grade-pill.hasan { background: var(--grade-hasan-bg); color: var(--grade-hasan-text); }
.rawi-grade-pill.dhaif { background: var(--grade-dhaif-bg); color: var(--grade-dhaif-text); }

/* --------------------------------------------------------------------------
   16. MODALS, BOTTOM SHEET & OVERLAYS
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none !important;
  pointer-events: none !important;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.modal-overlay.active,
.modal-overlay.open {
  display: flex !important;
  pointer-events: auto !important;
}

.modal-content {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-xl);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-6);
  position: relative;
  box-shadow: var(--shadow-lg);
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--studio-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

.modal-close-btn:hover {
  color: var(--studio-primary);
}

.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
}

/* Bug fix v141: aturan `.open` sebelumnya TIDAK ADA, padahal openBottomSheet()
   memberi kelas `.open`/`.active`. Akibatnya backdrop tak pernah muncul. */
.bottom-sheet-backdrop.open,
.bottom-sheet-backdrop.active {
  display: block;
}

.universal-bottom-sheet {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 2001;
  background: var(--studio-surface);
  border-top: 1px solid var(--studio-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 80vh;
  overflow-y: auto;
  /* Bug fix v129: saat tertutup (hanya di-translate), elemen MASIH menangkap
     sentuhan di area layar -> memblokir klik pada orb rantai sanad (khususnya
     di mobile). Nonaktifkan pointer saat tertutup, aktifkan saat .open. */
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}

/* Bug fix v141: `.active` ikut didukung karena JS lama memakai kelas itu. */
.universal-bottom-sheet.open,
.universal-bottom-sheet.active {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.bottom-sheet-handle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  cursor: pointer;
}

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-xs);
  background: var(--studio-border-hover);
}

.bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--studio-border);
  padding-bottom: 12px;
}

.bottom-sheet-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--studio-primary);
}

.bottom-sheet-close-btn {
  background: transparent;
  border: none;
  color: var(--studio-muted);
  cursor: pointer;
  padding: 4px;
}

/* --------------------------------------------------------------------------
   16b. EPIK 2.3 (MODUL F) — EKSPOR SITASI ILMIAH MULTI-FORMAT
   Aksen warm amber/gold (C-7). Tanpa merah/hijau. Basis spasi 4px.
   -------------------------------------------------------------------------- */
.citation-sheet {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.citation-seg {
  display: flex;
  gap: 4px;
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: 4px;
}

.citation-seg-btn {
  flex: 1;
  min-height: 44px;
  padding: 8px 8px;
  border: none;
  background: transparent;
  color: var(--studio-muted);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font-sans);
}

.citation-seg-btn:hover {
  color: var(--studio-secondary);
}

.citation-seg-btn.active {
  background: var(--studio-accent-subtle);
  color: var(--studio-accent);
  border: 1px solid var(--studio-accent-border);
}

.citation-preview-card {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-inline-start: 3px solid var(--studio-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.citation-preview-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--studio-accent);
  margin-bottom: 12px;
}

.citation-book-hint {
  color: var(--studio-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.citation-preview-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--studio-secondary);
  margin: 0;
  word-break: break-word;
  font-family: var(--font-sans);
}

.citation-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.citation-meta-chip {
  font-size: 12px;
  color: var(--studio-muted);
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-full);
  padding: 6px 12px;
}

.citation-meta-chip strong {
  color: var(--studio-secondary);
  font-weight: 700;
}

.citation-actions {
  display: flex;
}

.citation-copy-primary {
  flex: 1;
  min-height: 44px;
  justify-content: center;
  background: var(--studio-accent-subtle);
  border-color: var(--studio-accent-border);
  color: var(--studio-accent);
  font-size: 13px;
  font-weight: 700;
}

.citation-copy-primary:hover {
  background: var(--studio-accent);
  color: var(--studio-bg);
  border-color: var(--studio-accent);
}

.citation-tip {
  font-size: 11px;
  line-height: 1.6;
  color: var(--studio-muted);
  margin: 0;
  text-align: center;
}

.citation-tip strong {
  color: var(--studio-secondary);
  font-weight: 600;
}

/* Tombol sitasi di hero detail */
.cite-btn {
  color: var(--studio-accent);
  border-color: var(--studio-accent-border);
  background: var(--studio-accent-subtle);
}

.cite-btn:hover {
  background: var(--studio-accent);
  color: var(--studio-bg);
  border-color: var(--studio-accent);
}

/* --------------------------------------------------------------------------
   17. COMMAND PALETTE (CTRL+K)
   -------------------------------------------------------------------------- */
.palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.command-palette-card {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 600px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.palette-search-box {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--studio-border);
  gap: 12px;
}
/* Penanda fokus keyboard (v138) — sama alasannya dengan .book-search-container. */
.palette-search-box:focus-within {
  box-shadow: inset 0 -2px 0 var(--studio-accent);
}

#palette-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--studio-primary);
}

.palette-esc-badge {
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  color: var(--studio-muted);
  cursor: pointer;
  /* Aksesibilitas keyboard (v151): elemen ini <button>, jadi perlu reset gaya
     bawaan browser agar tampilannya tetap persis seperti lencana semula. */
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.palette-esc-badge:hover {
  border-color: var(--studio-accent);
  color: var(--studio-primary);
}

.palette-results-box {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
}

.palette-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}

.palette-item:hover, .palette-item.selected {
  background: var(--studio-hover);
}

.palette-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.palette-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--studio-primary);
}

.palette-item-meta {
  font-size: 11px;
  color: var(--studio-muted);
}

.palette-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--studio-border);
  background: var(--studio-deck);
  font-size: 11px;
  color: var(--studio-muted);
}

.palette-hints {
  display: flex;
  gap: 10px;
}

.palette-hints kbd {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   18. READING / FOCUS MODE OVERLAY
   -------------------------------------------------------------------------- */
.reading-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: var(--studio-bg);
  padding: var(--space-6);
  overflow-y: auto;
}

.focus-mode-header {
  max-width: 800px;
  margin: 0 auto 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--studio-border);
  padding-bottom: 16px;
}

.focus-mode-meta {
  font-size: 14px;
  font-weight: 700;
  color: var(--studio-accent);
}

.focus-mode-actions {
  display: flex;
  gap: 8px;
}

.focus-mode-btn {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-primary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.focus-mode-container {
  max-width: 800px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   19. EMPTY STATES, TOASTS & CORNER LOADER
   -------------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--studio-muted);
}

.empty-icon {
  margin-bottom: 1rem;
  color: var(--studio-muted);
}

.empty h2,
.empty h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--studio-primary);
  margin-bottom: 8px;
}
/* Tombol aksi pada empty state (v130) — beri jalan keluar ke pengunjung */
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.empty-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--studio-border);
  background: var(--studio-surface);
  color: var(--studio-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.empty-action:hover,
.empty-action:focus-visible {
  background: var(--studio-accent-subtle);
  border-color: var(--studio-accent-border);
  color: var(--studio-accent);
}

.empty p {
  font-size: 13px;
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Saran perbaikan ejaan (v148) — muncul saat hasil pencarian kosong.
   Informatif saja; memakai token yang ada, tanpa warna baru. */
.empty-suggest {
  margin-top: 14px !important;
  font-size: 13px;
  color: var(--studio-muted);
}

.empty-suggest-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  margin-inline: 2px;
  background: var(--studio-accent-subtle);
  border: 1px solid var(--studio-accent-border);
  border-radius: var(--radius-md);
  color: var(--studio-accent);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.empty-suggest-btn:hover,
.empty-suggest-btn:focus-visible {
  background: var(--studio-accent);
  border-color: var(--studio-accent);
  color: var(--on-accent);
}

#toast-container {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, 88vw);
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-primary);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
  animation: slideToast var(--dur-base) ease;
  pointer-events: auto;
}

@keyframes slideToast {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#db-loading-overlay {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;
  z-index: 950;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
  max-width: 320px;
  pointer-events: none;
}

@keyframes db-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE DESIGN (MOBILE-FIRST STANDARD)
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .header-container .nav {
    display: none;
  }
  
  .header-quick-search kbd {
    display: none;
  }
  
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 1000;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(14, 16, 21, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--studio-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  html.light-theme .mobile-bottom-nav {
    background: rgba(248, 250, 252, 0.95);
  }

  .mobile-bottom-nav a {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--studio-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    min-height: 48px;
  }

  .mobile-bottom-nav a.active {
    color: var(--studio-accent);
  }

  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .hero {
    padding: 2rem 1rem 0.5rem;
  }

  /* Beranda mobile: kunci padding atas tetap 16px. Aturan ini ditulis eksplisit
     (bukan mengandalkan aturan dasar) supaya jarak Hero -> judul tidak melebar
     oleh perubahan padding lain di media query ini. */
  #pg-beranda .main {
    padding-top: var(--space-4, 16px);
  }

  .hero-title {
    font-size: 1.85rem;
  }

  .card-header {
    /* Di layar sempit, padding samping dikecilkan agar matan Arab mendapat
       garis (lebar baris) yang lebih panjang — inilah yang membuat teks terasa
       "sesak" sebelumnya: 40px dari 360px habis untuk padding. Padding atas-bawah
       justru ditambah supaya ada ruang napas vertikal. */
    padding: var(--space-4) var(--space-3);
    gap: 8px;
  }

  .hadis-text.arabic {
    font-size: 21px;
    line-height: 2.35;
    padding-block: 0.4em;
    letter-spacing: 0;
    word-spacing: 0.05em;
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
    text-rendering: optimizeLegibility;
    hyphens: none;
    overflow-wrap: break-word;
  }

  .tahqiq-hero-well {
    padding: var(--space-4) var(--space-5);
  }

  .tahqiq-matan-arabic.arabic {
    font-size: 20px;
    line-height: 2.25;
    padding-block: 0.25em;
    letter-spacing: 0;
    word-spacing: 0.05em;
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
    text-rendering: optimizeLegibility;
    hyphens: none;
    overflow-wrap: break-word;
  }

  .tahqiq-btn-action {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 13px;
  }

  .font-step-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .desktop-only-action {
    display: none !important;
  }

  .desktop-only-text {
    display: none !important;
  }

  .bab-kitab-header {
    padding: var(--space-3) var(--space-4);
  }

  .bab-kitab-title-ar {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   20b. EXTREME MOBILE VIEWPORTS AUDIT (360px - 480px, §NFR-8 & Epik 1.2)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .main, .hero, .about-wrap {
    padding-inline: 16px;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .card-header {
    padding: var(--space-4);
    gap: 8px;
  }

  .card-actions {
    gap: 4px;
  }

  .bookmark-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  .search-box {
    padding: 6px 12px;
    gap: 8px;
  }

  .search-input {
    font-size: 13px;
  }

  /* Keyboard Arab: diperkecil lagi agar compact di mobile (v121).
     11 tombol harakat: 11x24 + 10x2 = 284px -> muat nyaman di 360px. */
  .arabic-keyboard-panel {
    padding: 8px;
    gap: 4px;
    border-radius: var(--radius-md);
  }
  /* Aksesibilitas (WCAG 2.1 AA): touch target minimal 44x44px. Sebelumnya
     dikecilkan jadi 24x30px di layar <=480px — justru di perangkat sentuh,
     tempat ukuran kecil paling berisiko salah pencet. Tombol keyboard Arab
     berdekatan, jadi ini koreksi penting. .kb-row memakai flex-wrap, sehingga
     baris yang tidak muat akan turun, bukan terpotong. */
  .kb-key {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0 6px;
    font-size: 15px;
    border-radius: var(--radius-sm);
  }
  .kb-key-space {
    min-width: 72px;
  }
  .kb-key-backspace,
  .kb-key-clear,
  .kb-key-close {
    min-width: 56px;
  }
  .kb-row {
    gap: 4px;
  }

  .tahqiq-hero-well {
    padding: var(--space-4);
  }

  .tahqiq-hero-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .tahqiq-hero-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Tombol aksi hadis dibuat compact agar tidak keluar batas di mobile.
     CATATAN (v138): touch target TETAP >= 44px sesuai docs/AGENTS.md.
     Yang dikecilkan hanya padding & lebar, BUKAN tinggi area sentuh. */
  .tahqiq-btn-action {
    padding: 6px 10px;
    font-size: 11px;
    gap: 4px;
  }
  .tahqiq-btn-action.font-step-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 0;
    justify-content: center;
  }
  .tahqiq-btn-action.quick-copy-btn span,
  .tahqiq-btn-action.cite-btn span {
    display: inline;
  }

  .hadis-text.arabic {
    font-size: 21px;
    line-height: 2.35;
    padding-block: 0.4em;
  }

  .tahqiq-matan-arabic.arabic {
    font-size: 21px;
    line-height: 2.35;
    padding-block: 0.4em;
  }

  .tab-row {
    gap: 6px;
  }

  .tab-btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .sanad-spec-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: var(--space-3) var(--space-4);
  }

  .spec-separator {
    display: none;
  }

  .fawaid-card-body {
    padding: var(--space-3) var(--space-4);
  }

  .fawaid-point-row {
    gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   21. CATATAN KAJIAN PRIBADI & TEXTAREA
   -------------------------------------------------------------------------- */
.notes-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--studio-border);
}

.trans-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--studio-accent);
}

.notes-textarea {
  width: 100%;
  min-height: 90px;
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--studio-primary);
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.15s;
}

.notes-textarea:focus {
  border-color: var(--studio-accent);
}

/* --------------------------------------------------------------------------
   22. VIRTUAL ARABIC KEYBOARD
   -------------------------------------------------------------------------- */
.arabic-keyboard-panel {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-top: 8px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}

.kb-row {
  display: flex;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
}

.kb-key {
  /* Aksesibilitas (WCAG 2.1 AA): touch target minimal 44x44px. Tombol keyboard
     Arab ini berdekatan, jadi ukuran yang terlalu kecil rawan salah pencet.
     Sebelumnya 32x38px. min-width dipakai (bukan width) agar tombol lebar
     seperti "Spasi"/"Clear" tetap bisa melebar sesuai isinya. */
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0 8px;
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-sm);
  color: var(--studio-primary);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}

.kb-key.arabic {
  font-family: var(--font-arabic);
  font-size: 18px;
}

.kb-key:hover {
  background: var(--studio-hover);
  border-color: var(--studio-accent);
  color: var(--studio-accent);
}

.kb-key-space {
  min-width: 120px;
  font-size: 12px;
}

.kb-key-backspace, .kb-key-clear, .kb-key-close {
  min-width: 50px;
  font-size: 12px;
}

.kb-key-harakat {
  color: var(--studio-accent);
}

/* --------------------------------------------------------------------------
   23. KOMPARASI TAKHRIJ RIWAYAT (MODAL & TABLE)
   -------------------------------------------------------------------------- */
.modal-header-clean {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--studio-border);
  padding-bottom: 12px;
}

/* C-7 Diff Matan Berdampingan (§4.4 C-7) */
.matan-diff-card {
  max-width: 900px;
  width: 100%;
}

.matan-diff-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
}

.matan-diff-mobile-nav {
  display: none;
  gap: 6px;
  margin-bottom: 12px;
}

.matan-diff-mobile-nav .diff-nav-btn {
  flex: 1;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--studio-border);
  background: var(--studio-surface);
  color: var(--studio-muted);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.matan-diff-mobile-nav .diff-nav-btn.active {
  background: var(--studio-accent);
  color: var(--color-white);
  border-color: var(--studio-accent);
}

.matan-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.matan-diff-pane {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.matan-diff-pane-header {
  padding: 10px 16px;
  background: var(--studio-deck);
  border-bottom: 1px solid var(--studio-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.matan-diff-pane-body {
  padding: var(--space-4);
  flex: 1;
  max-height: 380px;
  overflow-y: auto;
}

.matan-diff-arabic-text {
  font-family: var(--font-arabic);
  font-size: 24px;
  line-height: 2.25;
  direction: rtl;
  text-align: right;
  color: var(--studio-primary);
  unicode-bidi: isolate;
  padding-block: 0.2em;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

.matan-diff-added {
  background: var(--studio-accent-subtle);
  color: var(--studio-accent);
  border-bottom: 1px solid var(--studio-accent);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-weight: 700;
}

.matan-diff-omitted {
  color: var(--studio-muted);
  text-decoration: line-through;
  opacity: 0.7;
  padding: 0 2px;
}

.matan-diff-meta-box {
  padding: var(--space-3) var(--space-4);
  background: var(--studio-deck);
  border-top: 1px solid var(--studio-border);
  font-size: 12px;
  color: var(--studio-secondary);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .matan-diff-mobile-nav {
    display: flex;
  }
  
  .matan-diff-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .matan-diff-grid.view-a .matan-diff-pane.pane-b {
    display: none;
  }
  
  .matan-diff-grid.view-b .matan-diff-pane.pane-a {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   24. RAWI PROFILE MODAL & DETAILS
   -------------------------------------------------------------------------- */
.rawi-profile-modal {
  position: fixed;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: min(640px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--studio-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--studio-border);
}

.rawi-tabaqah-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--studio-accent-subtle);
  border: 1px solid var(--studio-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-arabic);
  font-size: 16px;
  color: var(--studio-accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   25. SHIMMER SCREEN (SKELETON LOADING)
   -------------------------------------------------------------------------- */
.loading-container {
  display: none;
  flex-direction: column;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   LOADING BERTEMA TURATS (Fase 11 v121)
   Indikator loading dengan kaligrafi berputar + progress bar, agar menunggu
   terasa hidup & sesuai nuansa hadis (bukan spinner generik).
   -------------------------------------------------------------------------- */
.loading-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
}
.loading-khat {
  width: 60px;
  height: 60px;
  position: relative;
}
.loading-khat svg { width: 100%; height: 100%; }
.khat-ring {
  stroke: var(--studio-border);
  stroke-width: 2;
  stroke-dasharray: 40 118;
  stroke-linecap: round;
  transform-origin: 30px 30px;
  animation: khatSpin 1.6s linear infinite;
}
@keyframes khatSpin { to { transform: rotate(360deg); } }
.khat-glyph {
  stroke: var(--studio-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: khatDraw 2.4s ease-in-out infinite;
}
@keyframes khatDraw {
  0%   { stroke-dashoffset: 90; opacity: 0.3; }
  50%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -90; opacity: 0.3; }
}
.loading-copy { display: flex; flex-direction: column; gap: 4px; }
.loading-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--studio-primary);
  letter-spacing: 0.01em;
}
.loading-sub {
  font-size: 12px;
  color: var(--studio-muted);
}
.loading-bar {
  width: min(240px, 70vw);
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--studio-border);
  overflow: hidden;
}
.loading-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--studio-accent), transparent);
  animation: loadingSweep 1.4s ease-in-out infinite;
}
@keyframes loadingSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.skeleton-card {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: skeletonIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Skeleton muncul berurutan agar terasa hidup (Fase 7 v117) */
.skeleton-card:nth-child(2) { animation-delay: 0.06s; }
.skeleton-card:nth-child(3) { animation-delay: var(--dur-fast); }
.skeleton-card:nth-child(4) { animation-delay: 0.18s; }

@keyframes skeletonIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shimmer dengan kilau aksen amber tipis (lebih hidup dari abu-abu polos) */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--studio-hover) 0%,
    var(--studio-hover) 35%,
    var(--studio-accent-subtle) 50%,
    var(--studio-hover) 65%,
    var(--studio-hover) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.sk-badge { width: 90px; height: 22px; }
.sk-text-1 { width: 100%; height: 26px; }
.sk-text-2 { width: 80%; height: 26px; }
.sk-trans-1 { width: 95%; height: 16px; }
.sk-trans-2 { width: 70%; height: 16px; }

/* --------------------------------------------------------------------------
   26. METODOLOGI & ISTILAH HADIS (HALAMAN TENTANG)
   -------------------------------------------------------------------------- */
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
  margin-top: 16px;
}

.method-card {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.method-card h3,
.method-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--studio-primary);
  margin-bottom: 8px;
}

.method-card p {
  font-size: 13px;
  color: var(--studio-muted);
  line-height: 1.55;
  margin: 0;
}

.istilah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-top: 16px;
}

.istilah-box {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.istilah-ar {
  font-size: 14px;
  font-weight: 700;
  color: var(--studio-accent);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.istilah-ar span {
  font-family: var(--font-arabic);
  font-size: 16px;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

.istilah-desc {
  font-size: 13px;
  color: var(--studio-muted);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   UTILITY CLASSES (dibersihkan Fase 14 v125)
   Hanya yang benar-benar dipakai. Yang tak terpakai dihapus agar stylesheet
   ringan. Nilai dari skala modular (font) & token warna (0-hex policy).
   -------------------------------------------------------------------------- */

/* Font-size utilities (yang dipakai saja) */
.fs-10 { font-size: 11px; }
.fs-12 { font-size: 12px; }

/* Warna teks semantik */
.t-accent  { color: var(--studio-accent); }

/* --------------------------------------------------------------------------
   FASE 5 (v115) — STYLING UNTUK "CLASS HANTU"
   Class yang dipakai di app.js tapi belum pernah didefinisikan di CSS,
   sehingga elemennya tampil polos/tanpa gaya. Semua nilai pakai token.
   -------------------------------------------------------------------------- */

/* --- Action Sheet (menu opsi & berbagi hadis) --- */
.action-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.action-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--studio-primary);
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
}

.action-sheet-item:hover,
.action-sheet-item:active {
  background: var(--studio-hover);
  border-color: var(--studio-border);
}

.action-sheet-item svg {
  flex-shrink: 0;
  color: var(--studio-muted);
}

.action-sheet-item:hover svg {
  color: var(--studio-accent);
}

.action-sheet-item-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--studio-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* --- Toast notifikasi --- */
/* Bug fix (v127): sebelumnya ikon SVG tanpa ukuran -> mengembang jadi kotak
   besar. Sekarang dibatasi tegas 16px. */
.toast-icon {
  flex-shrink: 0;
  color: var(--studio-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.toast-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.toast-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Mobile: toast full-width di atas bottom-nav, tidak menutupi konten */
@media (max-width: 480px) {
  #toast-container {
    bottom: 84px;
    inset-inline: 12px;
    align-items: stretch;
  }
  .toast {
    max-width: 100%;
    font-size: 13px;
    padding: var(--space-3) var(--space-4);
  }
}

/* --- Modal backdrop (dibuat dinamis) --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* --- Empty state pencarian --- */
.empty-search-state {
  text-align: center;
  color: var(--studio-muted);
  padding: 32px 16px;
}
.empty-search-icon {
  margin-bottom: 16px;
  color: var(--studio-muted);
  opacity: 0.7;
}

/* --- Chip & label kecil yang sering dipakai --- */
.chip-prefix {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--studio-muted);
}
.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--studio-muted);
  margin-bottom: 8px;
}

/* --- Grade chip & row penilaian --- */
.grade-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}
.grading-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Mushannif (penyusun) bio grid --- */
/* Biografi mushannif (Fase 16 v127): layout list vertikal (label kiri, nilai
   kanan) agar rapi untuk data campuran pendek/panjang. Sebelumnya grid 2 kolom
   membuat kolom timpang (Wafat pendek di samping Peran yang panjang). */
.mushannif-bio-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mushannif-bio-row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 4px 16px;
  min-width: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--studio-border);
}
.mushannif-bio-row:last-child {
  border-bottom: none;
}
.mushannif-bio-row.full {
  grid-template-columns: 1fr;
}
.mushannif-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--studio-muted);
  padding-top: 2px;
}
.mushannif-val {
  font-size: 14px;
  font-weight: 500;
  color: var(--studio-primary);
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.mushannif-bio-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--studio-border);
  font-size: 11px;
  color: var(--studio-muted);
  line-height: 1.6;
}
/* Mobile: label di atas nilai (tak cukup ruang untuk 2 kolom) */
@media (max-width: 560px) {
  .mushannif-bio-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
  }
  .mushannif-lbl { padding-top: 0; }
}

/* --- Kartu Faedah (fawaid) --- */
.fawaid-para {
  font-size: 15px;
  line-height: 1.85;
  color: var(--studio-secondary);
  margin: 0 0 14px;
  /* v129: batasi lebar baca (baris tidak terlalu panjang) & hindari mepet */
  max-width: 68ch;
  overflow-wrap: anywhere;
}
.fawaid-para:last-child {
  margin-bottom: 0;
}
.fawaid-para:last-child {
  margin-bottom: 0;
}
.fawaid-body-plain {
  display: flex;
  flex-direction: column;
}
.fawaid-sec-sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--studio-muted);
  margin-bottom: 8px;
}
.fawaid-card-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--studio-border);
}

/* --- Kartu status hukum (hukum-auth) --- */
.hukum-auth-card {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.hukum-auth-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--studio-border);
  margin-bottom: 16px;
}
.hukum-auth-rujukan {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: var(--studio-secondary);
  margin-bottom: 16px;
}
.hukum-auth-rujukan strong {
  color: var(--studio-primary);
  font-weight: 700;
}
.hukum-auth-kaidah {
  font-size: 13px;
  line-height: 1.8;
  color: var(--studio-secondary);
}

/* --- 5 Kaidah Keshahihan (grid) --- */
.kaidah-khamsah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.kaidah-khamsah-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
}
.kaidah-khamsah-check {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--grade-shahih-text);
}

/* --- Blok verifikasi hadis --- */
.verif-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--studio-deck);
  border: 1px dashed var(--studio-border);
  border-radius: var(--radius-md);
}
.verif-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--studio-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.verif-grades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.verif-grade {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--studio-hover);
  color: var(--studio-secondary);
}

/* --- Loading spinner generik --- */
.spinner,
.db-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--studio-accent-subtle);
  border-top-color: var(--studio-accent);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
  filter: drop-shadow(0 0 6px var(--studio-accent-subtle));
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* --- Kartu perawi (rawi) --- */
.rawi-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rawi-dot {
  color: var(--studio-muted);
  font-weight: 700;
}
.rawi-count {
  font-size: 12px;
  color: var(--studio-muted);
  font-weight: 500;
}
.rawi-cred {
  font-size: 11px;
  font-weight: 600;
  color: var(--studio-secondary);
}
.rawi-profile {
  padding: 0;
}

/* --- Riwayat pencarian --- */
.history-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.history-chip {
  padding: 6px 12px;
  min-height: 44px;
  background: var(--studio-hover);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-full);
  color: var(--studio-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.history-chip:hover {
  background: var(--studio-accent-subtle);
  color: var(--studio-accent);
}
.clear-history-btn {
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--studio-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.clear-history-btn:hover {
  color: var(--studio-primary);
}

/* --- Quick card (hasil cepat) --- */
.quick-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
  min-height: 44px;
}
.quick-card:hover {
  border-color: var(--studio-accent);
  transform: translateY(-2px);
}
.qc-icon {
  color: var(--studio-accent);
  margin-bottom: 8px;
  line-height: 0;
}
/* Fix (v127): batasi ukuran ikon SVG agar tidak mengembang besar */
.qc-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.qc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--studio-primary);
}
.qc-desc {
  line-height: 1.5;
}
.qc-arabic {
  font-family: var(--font-arabic);
  line-height: 2.2;
  direction: rtl;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* --- Breadcrumb separator --- */
.breadcrumb-sep {
  color: var(--studio-muted);
  margin-inline: 6px;
  user-select: none;
}

/* --- Panel tab konten (varian spesifik; dasar .tab-panel ada di atas) --- */
.tab-panel-matan,
.tab-panel-sanad,
.tab-panel-takhrij,
.tab-panel-syarah,
.tab-panel-faidah,
.tab-panel-hukum {
  padding-top: 4px;
}

/* --- Matan & syarah --- */
.matan-block {
  line-height: 2.2;
  margin: 12px 0;
}
.syarah-item {
  padding: 12px 0;
  border-bottom: 1px dashed var(--studio-border);
}
.syarah-item:last-child {
  border-bottom: none;
}
.fawaid-card-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--studio-border);
}
.kaidah-khamsah-card {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* --- Tombol-tombol ikon kecil --- */
.export-btn,
.hadith-num-btn,
.pg-btn,
.ui-btn-quiet,
.quick-copy-btn,
.nuqqad-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--studio-hover);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  color: var(--studio-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.export-btn:hover,
.hadith-num-btn:hover,
.pg-btn:hover,
.ui-btn-quiet:hover,
.quick-copy-btn:hover,
.nuqqad-expand-btn:hover {
  background: var(--studio-accent-subtle);
  color: var(--studio-accent);
  border-color: var(--studio-accent-border);
}

/* --- Kartu FAQ / QC --- */
.qc-title,
.qc-icon {
  flex-shrink: 0;
}
.mushannif-collapsible {
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mushannif-icon {
  flex-shrink: 0;
  color: var(--studio-accent);
}
.nuqqad-more-rows,
.parallel-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.takhrij-dorar {
  padding: 12px;
  background: var(--studio-deck);
  border-radius: var(--radius-md);
}
.quarantine-matan-notice {
  padding: 10px 14px;
  background: var(--grade-dhaif-bg);
  border: 1px solid var(--grade-dhaif-border);
  border-radius: var(--radius-md);
  color: var(--grade-dhaif-text);
  font-size: 12px;
  line-height: 1.6;
}
/* Ikon penanda naskah dalam antrian (v137) — ganti emoji agar ikon konsisten.
   Sejajarkan ke baris pertama teks, bukan ke tengah blok. */
.quarantine-icon {
  flex-shrink: 0;
  margin-block-start: 2px;
  opacity: 0.85;
}
.book-detail-hero-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.book-search-icon {
  color: var(--studio-muted);
  flex-shrink: 0;
}
.api-notice {
  padding: var(--space-3) var(--space-4);
  background: var(--studio-deck);
  border: 1px dashed var(--studio-border);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--studio-muted);
  line-height: 1.6;
}
.palette-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--studio-muted);
  padding: 8px 12px 4px;
}
.scholarly-translit {
  font-variant-ligatures: common-ligatures;
}
.translit-placeholder {
  color: var(--studio-muted);
  font-style: italic;
  opacity: 0.8;
}
.range-count {
  font-size: 11px;
  color: var(--studio-muted);
  font-weight: 500;
}
.range-dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--studio-muted);
  display: inline-block;
}
.bab-sub-bullet {
  color: var(--studio-accent);
  font-weight: 700;
  margin-inline-end: 4px;
}
.result-card-skeleton {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.action-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Aksesibilitas (WCAG 2.1 AA): touch target minimal 44x44px. Sebelumnya
     36x36px, di bawah standar sehingga rawan salah pencet di layar sentuh.
     Ikon di dalamnya tetap 20px, jadi tampilan visual tidak membesar. */
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--studio-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.action-menu-trigger:hover {
  background: var(--studio-hover);
  color: var(--studio-primary);
}
.focus-matan-arabic {
  font-family: var(--font-arabic);
  line-height: 2.2;
  direction: rtl;
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.focus-trans-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--studio-secondary);
  font-style: italic;
}
.clickable {
  cursor: pointer;
}
.clickable-mukhrij {
  cursor: pointer;
  transition: color var(--dur-fast);
}
.clickable-mukhrij:hover {
  color: var(--studio-accent);
}


/* --------------------------------------------------------------------------
   FASE 8 (v118) — ANTI-OVERFLOW LAYOUT
   Perbaikan layout yang menyebabkan teks keluar frame, terutama di mobile.
   -------------------------------------------------------------------------- */

/* Grid perbandingan matan (diff) — 2 kolom desktop, 1 kolom di mobile agar
   teks Arab/terjemah tidak meluber keluar frame. */
.matan-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.matan-diff-grid > div {
  min-width: 0;
  overflow-wrap: break-word;
}
@media (max-width: 640px) {
  .matan-diff-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   FASE 9 (v119) — ORB CHAIN SANAD (Rantai Sanad sebagai mata rantai/orb)
   Menggantikan kartu bertumpuk dengan visual graph orb.
   Semua orb ukuran SERAGAM; bentuk glyph & warna menandakan kedudukan (tabaqah).
   Prinsip ilmu hadis: alur Muballigh (Nabi ﷺ) -> Mushannif, ittiṣāl ditandai
   oleh garis penghubung kontinu. Data sanad tidak diubah.
   -------------------------------------------------------------------------- */
.sanad-graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--studio-border);
}
.sanad-graph-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--studio-accent);
}

/* Legenda orb */

/* Rantai orb */
.orb-chain {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 0;
  --orb-order: 0;
}

/* Baris = node + garis. Grid 3 kolom memusatkan node di layar, sehingga
   rantai tampil TENGAH pada desktop (tidak menempel kiri). */
.orb-row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px) 1fr;
  align-items: center;
  justify-items: center;
}
.orb-row > * {
  grid-column: 2;
}

/* Satu simpul (orb + label). Grid 3 kolom: nomor tingkat, orb, info. */
.orb-node {
  display: grid;
  grid-template-columns: 22px 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  transition: background var(--dur-fast) ease;
}
/* Kemunculan rantai sanad (Fase 21 v133):
   - Bila anim.js/anime.js aktif  -> JS yang menganimasikan (html.anim-js).
   - Bila JS gagal / tidak ada    -> CSS ini jadi cadangan agar tetap halus. */
.orb-node.orb-enter-css {
  animation: orbEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--orb-order, 0) * 90ms);
}
html.anim-js .orb-node.orb-enter-css {
  animation: none;
}
.orb-node:hover {
  background: var(--studio-hover);
}
@keyframes orbEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Orb (bulat) — semua ukuran seragam */
.orb {
  position: relative;
  width: 44px;
  height: 44px;
  justify-self: center;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--studio-border);
  background: var(--studio-deck);
  color: var(--studio-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur-fast) cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.orb:hover,
.orb:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px var(--studio-accent-subtle);
  border-color: var(--studio-accent);
}
.orb-glyph {
  font-size: 16px;
  font-weight: 700;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
/* Ikon manusia (Fase 18 v129) — ganti glyph geometris ●◆■ dengan SVG orang */
.orb-glyph .pg {
  width: 22px;
  height: 22px;
  display: block;
}
.orb-glyph .pg-nabi { width: 24px; height: 24px; }

/* Warna orb sesuai kedudukan (tabaqah) — TIDAK menghakimi derajat */
.orb-nabi {
  background: var(--grade-shahih-bg);
  border-color: var(--grade-shahih-border);
  color: var(--grade-shahih-text);
  font-family: var(--font-arabic);
}
.orb-nabi .orb-glyph { font-size: 18px; }
.orb-sahabat {
  background: var(--grade-hasan-bg);
  border-color: var(--grade-hasan-border);
  color: var(--grade-hasan-text);
}
.orb-tsiqah {
  background: var(--studio-surface);
  border-color: var(--grade-shahih-border);
  color: var(--grade-shahih-text);
}
.orb-shaduq {
  background: var(--grade-hasan-bg);
  border-color: var(--grade-hasan-border);
  color: var(--grade-hasan-text);
}
.orb-mushannif {
  background: var(--studio-deck);
  border-color: var(--studio-accent);
  color: var(--studio-accent);
}
.orb-weakest {
  background: var(--grade-dhaif-bg);
  border-color: var(--grade-dhaif-border);
  color: var(--grade-dhaif-text);
  border-width: 2px;
  animation: weakestPulse 2s ease-in-out infinite;
}

/* Nomor tingkat/urutan (tabaqah) */
.orb-level {
  width: 22px;
  height: 22px;
  justify-self: center;
  border-radius: var(--radius-full);
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  color: var(--studio-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Label nama & meta */
.orb-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.orb-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--studio-primary);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.orb-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--studio-muted);
}
.orb-role { font-weight: 600; }
.orb-cred {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--studio-hover);
  font-weight: 600;
}
.orb-cred.rc-mashum { color: var(--grade-shahih-text); }
.orb-cred.rc-tsiqah { color: var(--grade-shahih-text); }
.orb-cred.rc-shaduq { color: var(--grade-hasan-text); }
.orb-cred.rc-dhaif { color: var(--grade-dhaif-text); }
.orb-cred.rc-imam { color: var(--studio-accent); }

/* Garis penghubung antar orb — melambangkan ittiṣāl (ketersambungan).
   Berada di kolom tengah (.orb-row) dan di-geser 67px dari tepi kiri kolom
   agar tepat di sumbu orb: padding(12) + level(22) + gap(12) + orb/2(22) = 68.
   Tinggi 42px menutupi padding antar node -> garis tampak KONTINU. */
.orb-edge {
  width: 2px;
  height: 42px;
  justify-self: start;
  margin-inline-start: 67px;
  background: var(--studio-border);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-full);
}
.orb-edge-flow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--studio-accent),
    transparent
  );
  animation: orbFlow 1.8s linear infinite;
}
@keyframes orbFlow {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}

/* Cabang penguat tetap terpisah (bukan bagian rantai utama) */
.orb-chain-branch .orb-node { max-width: 100%; }

@media (max-width: 480px) {
  /* Mobile (Fase 17 v128): PERBAIKAN - sebelumnya .orb-row jadi 1 kolom
     padahal .orb-row > * dipaksa grid-column:2 -> grid membuat kolom implisit
     ke-2 -> orb (mulai orb ke-2) melenceng ke kiri, tidak di tengah.
     Solusi: TETAP 3 kolom (hanya kolom tengah yang mengecil) agar struktur
     konsisten dengan > * { grid-column: 2 } dan orb selalu terpusat. */
  .orb-chain { padding: 4px 0; }
  .orb-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
    justify-items: center;
  }
  .orb-node {
    grid-template-columns: 20px 34px minmax(0, 1fr);
    column-gap: 8px;
    padding: 7px 10px;
    width: 100%;
  }
  .orb { width: 34px; height: 34px; }
  /* Sumbu orb = padding(10) + level(20) + gap(8) + orb/2(17) = 55; -1 = 54 */
  .orb-edge {
    margin-inline-start: 54px;
    height: 30px;
    justify-self: start;
  }
  .orb-level { width: 20px; height: 20px; font-size: 11px; }
  .orb-name {
    font-size: 13px;
    line-height: 1.45;
    /* Nama panjang dibatasi 2 baris agar rantai tetap rapi */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .orb-meta { font-size: 11px; gap: 6px; }
  .orb-cred { padding: 1px 6px; }
  /* Info orb jangan mendorong orb keluar (min-width:0 sudah ada) */
  .orb-info { gap: 1px; }
}


/* --------------------------------------------------------------------------
   FASE 11 (v121) — KOMPAK UNTUK MOBILE
   Menyesuaikan elemen besar agar hemat ruang & nyaman di layar kecil.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Header & nav lebih rapat */
  .header-container { padding: 0 16px; height: 56px; }
  .nav { gap: 2px; }
  .nav a { padding: 6px 8px; font-size: 13px; }

  /* Kartu kutub: kurangi padding agar konten lebih luas */
  .kutub-card { padding: var(--space-4); padding-inline-start: var(--space-5); }
  .kutub-card-top { margin-bottom: 8px; }
  .kutub-titles { margin-bottom: 6px; }

  /* Kartu hadis lebih rapat */
  .result-card { margin-bottom: 12px; }

  /* Modal & sheet lebih hemat ruang */
  .rawi-profile-modal { padding: 16px; max-height: 88vh; }
  .universal-bottom-sheet { padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .command-palette-card { max-height: 84vh; }
  .modal-header-clean { padding: 12px 16px; }

  /* Command palette item lebih rapat */
  .palette-item { padding: 8px 12px; }
  .palette-footer { padding: 8px 12px; }

  /* Tab panel & section spacing */
  .tab-row { margin-bottom: 12px; }
  .section-header-wrap { margin-bottom: 16px; }

  /* Empty state */
  .empty { padding: 24px 16px; }
  .empty-search-state { padding: 24px 16px; }

  /* Judul & teks pas untuk layar kecil */
  .hero-subtext { font-size: 14px; }
  .section-title { font-size: 1.2rem; }
  .about-section h2 { font-size: 1.2rem; }

  /* Card meta lebih rapat */
  .card-meta { gap: 6px; }
  .rawi-card-meta { gap: 6px; }

  /* Bottom sheet action item lebih compact */
  .action-sheet-item { padding: 10px; min-height: 44px; }
}


/* --------------------------------------------------------------------------
   FASE 14 (v125) — OPTIMALISASI PERFORMA
   -------------------------------------------------------------------------- */

/* Mobile: matikan glow besar (GPU-friendly) - dot+buku sudah cukup menarik.
   Efek blur besar adalah penyumbang utama jank di perangkat mobile kelas bawah. */
@media (max-width: 768px) {
  .bg-glow { display: none; }
}

/* Kurangi beban animasi background bila perangkat lemah / low-power */
@media (prefers-reduced-motion: reduce) {
  .bg-glow::before,
  .bg-glow::after { animation: none; }
}

/* --------------------------------------------------------------------------
   FASE 16 (v127) — PENJAGA UKURAN IKON SVG
   Mencegah ikon SVG tanpa width/height mengembang jadi kotak besar
   (bug notif toast & ikon quick-card). Semua SVG dalam konteks ikon
   dibatasi; SVG yang sudah punya ukuran eksplisit tidak terpengaruh.
   -------------------------------------------------------------------------- */
.toast-icon svg,
.qc-icon svg,
.empty-icon svg,
.empty-search-icon svg,
.mushannif-icon svg,
.book-search-icon svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  display: block;
}
.empty-icon svg,
.empty-search-icon svg {
  width: 1.4em;
  height: 1.4em;
}

/* --------------------------------------------------------------------------
   FASE 19 (v130) — KONSISTENSI IKON
   Menyeragamkan tampilan ikon SVG tanpa mengubah tiap HTML:
   - semua ikon inline tidak boleh "melar" (menjaga rasio)
   - ketebalan garis & sudut seragam secara visual
   -------------------------------------------------------------------------- */
svg:not([width]):not([height]) {
  width: 1em;
  height: 1em;
}
/* Ikon di dalam tombol/aksi: ketebalan seragam */
.btn svg,
button svg,
.action-sheet-item svg,
.tahqiq-btn-action svg,
.empty-action svg {
  stroke-width: 2;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   FASE 20 (v132) — KONTROL PRESET FONT ARAB (MODE BACA)
   4 tingkat ukuran (Kecil/Sedang/Besar/Besar sekali) + penyetelan halus A−/A+.
   Bila CSS gagal dimuat, A−/A+ tetap berfungsi (JS menyimpan ukuran).
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.arab-font-ctl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-full);
  background: var(--studio-deck);
}

.arab-preset-seg {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--studio-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.arab-preset-seg:hover {
  color: var(--studio-primary);
  background: var(--studio-hover);
}

.arab-preset-seg.active {
  background: var(--studio-accent);
  color: var(--on-accent);
}

.arab-preset-seg:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 1px;
}

.arab-font-fine {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: 2px;
  padding-inline-start: 4px;
  border-inline-start: 1px solid var(--studio-border);
}

.arab-preset-fine {
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--studio-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.arab-preset-fine:hover {
  background: var(--studio-hover);
  color: var(--studio-primary);
}

.arab-preset-fine:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 1px;
}

/* Tombol harakat (tampilkan/sembunyikan syakal).
   Mengikuti pola .arab-preset-fine: area sentuh tetap 44x44px (WCAG AA),
   hanya tampilannya yang ramping. Keadaan aktif jelas terlihat. */
.arab-preset-harakat {
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--studio-muted);
  font-family: var(--font-arabic);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.arab-preset-harakat:hover {
  background: var(--studio-hover);
  color: var(--studio-primary);
}
.arab-preset-harakat.active {
  background: var(--studio-accent-subtle);
  border-color: var(--studio-accent);
  color: var(--studio-accent);
}
.arab-preset-harakat:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 1px;
}

/* Touch target nyaman di layar sentuh */
@media (pointer: coarse) {
  .arab-preset-seg,
  .arab-preset-fine {
    min-height: 44px;
  }
}

/* Layar sempit: sembunyikan penyetelan halus agar toolbar tidak berdesakan */
@media (max-width: 560px) {
  .arab-font-fine {
    display: none;
  }
}

/* --- Jarh wa Ta'dil & Profil Perawi Turats (Opsi B) --- */
.jarh-card {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.15s ease;
}
.jarh-card:hover {
  border-color: var(--studio-accent-border);
}
.jarh-critic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--studio-accent);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jarh-quote {
  font-family: var(--font-arabic, 'Amiri', serif);
  font-size: 16px;
  line-height: 1.8;
  color: var(--studio-primary);
  direction: rtl;
  text-align: right;
}
.guru-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.guru-card {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.guru-card .guru-name {
  font-family: var(--font-arabic, 'Amiri', serif);
  font-size: 15px;
  color: var(--studio-primary);
}
.guru-card .guru-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--studio-muted);
  background: var(--studio-deck);
  padding: 2px 8px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--studio-border);
  white-space: nowrap;
}
.rawi-bio-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.rawi-bio-meta-item {
  background: var(--studio-deck);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.rawi-bio-meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--studio-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.rawi-bio-meta-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--studio-primary);
}

/* --- Rawi Modal Tabs & Content Styling (Opsi B) --- */
.rawi-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--studio-border);
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.rawi-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--studio-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  min-height: 40px;
}
.rawi-tab-btn:hover {
  color: var(--studio-primary);
  background: var(--studio-hover);
}
.rawi-tab-btn.active {
  color: var(--studio-accent);
  border-bottom-color: var(--studio-accent);
  background: var(--studio-deck);
  font-weight: 700;
}
.rawi-tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  color: var(--studio-muted);
}
.rawi-tab-btn.active .rawi-tab-count {
  border-color: var(--studio-accent-border);
  color: var(--studio-accent);
  background: var(--studio-accent-subtle);
}
.rawi-tab-pane {
  display: block;
}
.martabah-box {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.martabah-box-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--studio-accent);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.martabah-box-content {
  font-family: var(--font-arabic, 'Amiri', serif);
  font-size: 16px;
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  color: var(--studio-primary);
}