/* ==========================================================================
   Typography & Tajwid System for Quran Risalah
   - Font Al-Qur'an: LPMQ ISEP MISBAH INDONESIA (Standar Kemenag RI)
   - Font Latin & Terjemahan: Roboto (Google Fonts)
   - Pewarnaan Tajwid Berdasarkan Kaidah Ilmu Tajwid
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Outfit:wght@500;700;800&display=swap');

/* Font Resmi Standar Mushaf Kemenag RI & NU Online (Omar LPMQ Official) */
@font-face {
  font-family: 'LPMQ Isep Misbah';
  src: url('../fonts/LPMQ_NU_Omar.woff2') format('woff2'),
       url('../fonts/LPMQ-IsepMisbah.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LPMQ';
  src: url('../fonts/LPMQ_NU_Omar.woff2') format('woff2'),
       url('../fonts/LPMQ-IsepMisbah.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kemenag LPMQ';
  src: url('../fonts/LPMQ_NU_Omar.woff2') format('woff2'),
       url('../fonts/LPMQ-IsepMisbah.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NU Quran';
  src: url('../fonts/LPMQ_NU_Omar.woff2') format('woff2'),
       url('../fonts/LPMQ-IsepMisbah.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'Roboto', 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Outfit', 'Roboto', sans-serif;
  --font-arabic-lpmq: 'LPMQ Isep Misbah', 'LPMQ', 'Kemenag LPMQ', 'Amiri', 'Traditional Arabic', serif;
  --font-arabic-bismillah: 'LPMQ Isep Misbah', 'LPMQ', 'Kemenag LPMQ', 'Amiri', serif;
  --font-arabic-default: 'LPMQ Isep Misbah', 'LPMQ', 'Kemenag LPMQ', 'Amiri', serif;
  --font-latin: 'Roboto', sans-serif;
  --font-trans: 'Roboto', sans-serif;
  
  --arabic-size: 22px;
  --trans-size: 13px;
  --latin-size: 11.5px;
  --arabic-line-height: 1.8;
}

/* Tulisan Arab Al-Qur'an (LPMQ Isep Misbah Standar Kemenag RI) */
.arabic-text {
  font-family: var(--font-arabic-lpmq) !important;
  font-size: var(--arabic-size, 22px) !important;
  line-height: var(--arabic-line-height, 1.8);
  direction: rtl;
  text-align: right;
  font-weight: normal;
  color: var(--text-arabic) !important;
  letter-spacing: 0;
  word-spacing: 2px;
  user-select: text;
  margin-bottom: 0.25rem;
}

/* Lafadz Bismillah Khusus (Ditengah & Menggunakan Font Standar Kemenag LPMQ) */
.arabic-bismillah-wrapper {
  text-align: center;
  margin: 0.05rem 0 0.2rem 0 !important; /* Mepet ke atas, jarak ke ayat sangat dekat */
  padding: 0;
}

.arabic-bismillah {
  font-family: var(--font-arabic-bismillah) !important;
  font-size: 19px !important;              /* Lebih tipis & ramping proporsional */
  font-weight: 300 !important;
  text-align: center;
  color: var(--primary-gold);
  line-height: 1.25 !important;            /* Ramping, tidak gemuk */
  display: inline-block;
  letter-spacing: 0;
  text-shadow: 0 1px 3px rgba(179, 116, 56, 0.12);
}

/* Nomor Tanda Ayat Standar Mushaf Indonesia & NU Online (Format Tradisional ۝) */
.ayah-end-num {
  font-family: var(--font-arabic-lpmq) !important;
  color: var(--primary-gold);
  font-size: 1.05em;
  margin-right: 0.35rem;
  display: inline-block;
  vertical-align: middle;
  direction: rtl;
  user-select: none;
  letter-spacing: 0;
}

/* Badge Nomor Ayat Mini (Fallback / Opsional) */
.ayah-end-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--font-arabic-lpmq);
  font-size: 0.62em;
  color: var(--primary-gold);
  margin: 0 0.2rem;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L63 20 L80 15 L80 35 L95 45 L85 60 L95 75 L75 80 L65 95 L50 85 L35 95 L25 80 L5 75 L15 60 L5 45 L20 35 L20 15 L37 20 Z' fill='none' stroke='%23d97706' stroke-width='4' opacity='0.7'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='%2310b981' stroke-width='2' opacity='0.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  direction: ltr;
}

.ayah-end-badge span {
  font-weight: 700;
  font-size: 0.85em;
  color: var(--text-arabic);
}

/* Tulisan Latin Transliterasi (Font: Roboto Italic, Warna Khusus) */
.latin-text {
  font-family: var(--font-latin) !important;
  font-size: var(--latin-size, 11.5px) !important;
  line-height: 1.4;
  color: var(--text-latin) !important;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 0.2rem;
}

/* Tulisan Terjemahan Indonesia (Font: Roboto Regular, Warna Kontras) */
.translation-text {
  font-family: var(--font-trans) !important;
  font-size: var(--trans-size, 13px) !important;
  line-height: 1.5;
  color: var(--text-primary) !important;
  font-weight: 400;
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
}

/* ==========================================================================
   Pewarnaan Tajwid Berdasarkan Hukum Tajwid Standar
   ========================================================================== */
.tajwid-ghunnah {
  color: #f43f5e !important; /* Rose / Merah Muda */
  font-weight: bold;
}

.tajwid-ikhfa {
  color: #10b981 !important; /* Emerald / Hijau */
}

.tajwid-idgham {
  color: #38bdf8 !important; /* Sky Blue / Biru Langit */
}

.tajwid-iqlab {
  color: #f59e0b !important; /* Gold / Amber */
  font-weight: bold;
}

.tajwid-qalqalah {
  color: #06b6d4 !important; /* Cyan / Biru Laut */
  font-weight: bold;
}

.tajwid-mad {
  color: #fb923c !important; /* Orange / Jingga */
}