/*
 * materi.css — Kontrak CSS konten materi Ponpes Online V3
 *
 * JANGAN DIUBAH atau DIGANTI class-nya.
 * File ini adalah kontrak antara admin (yang paste HTML) dan tampilan pelanggan.
 * Dimuat oleh:
 *   - template lesson pelanggan  (templates/lesson/view.html)
 *   - preview panel operasional  (templates/panel/courses/lesson_preview.html)
 *
 * Design tokens wajib dari index.html:
 *   --deep-navy:#003354; --light-sky:#CBEFFF; --teal-green:#148F87;
 *   --warm-yellow:#FFB606; --charcoal-gray:#4A5568; --bg-light:#F8FAFC;
 *   --border-grey:#E2E8F0; --text-muted:#64748B;
 *   --font-main:'Plus Jakarta Sans', sans-serif;
 */

/* ── Paragraf biasa ───────────────────────────────────────────── */
.materi-paragraph {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal-gray, #4A5568);
    margin-bottom: 12px;
}

/* ── Sub-judul seksi ──────────────────────────────────────────── */
.materi-subheading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--deep-navy, #003354);
    margin: 20px 0 10px 0;
    border-left: 4px solid var(--teal-green, #148F87);
    padding-left: 10px;
}

/* ── Judul kecil di dalam seksi ──────────────────────────────── */
.materi-title-small {
    font-size: 1rem;
    font-weight: 700;
    color: var(--deep-navy, #003354);
    margin: 14px 0 6px 0;
}

/* ── Kotak kutipan / ayat / hadits ───────────────────────────── */
.materi-card-box {
    background: #F8FAFC;
    border: 1px solid var(--border-grey, #E2E8F0);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 14px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

/* ── Teks Arab ───────────────────────────────────────────────── */
.materi-arabic {
    font-size: 1.65rem;
    font-weight: 600;
    color: var(--deep-navy, #003354);
    margin-bottom: 6px;
    direction: rtl;
    line-height: 2.2;
    font-family: 'Times New Roman', serif;
}

/* ── Terjemahan teks Arab ────────────────────────────────────── */
.materi-translation {
    font-size: 0.85rem;
    color: var(--text-muted, #64748B);
    line-height: 1.5;
    font-style: italic;
}

/* ── Kotak highlight / formula ───────────────────────────────── */
.materi-highlight-box {
    background: #FFFDF5;
    border-left: 4px solid var(--warm-yellow, #FFB606);
    padding: 12px 16px;
    border-radius: 4px 12px 12px 4px;
    font-size: 0.9rem;
    color: var(--charcoal-gray, #4A5568);
    line-height: 1.6;
    margin: 16px 0;
}