/* =========================================
   ملف ستايل السيرة النبوية - V7 (تعديل الخط وإضافة الأحداث)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Reem+Kufi:wght@400;700&display=swap');

:root {
    --gold-primary: #FFD700;
    --gold-dim: #c5a000;
    --desert-sand: #d4b483;
    --night-blue: #0f172a;
    --glass-panel: rgba(15, 23, 42, 0.9);
}

body {
    margin: 0; padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    font-family: 'Amiri', serif;
    background-color: #000;
    padding-bottom: 100px;
}

/* --- الخلفية (الصحراء والليل) --- */
.desert-sky { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #020111 0%, #0f172a 40%, #2d1b36 75%, #683618 100%); z-index: -10; }
/* ... (الأكواد السابقة كما هي) ... */

/* --- النجوم المتساقطة ببطء (Falling Stars) --- */
.desert-stars {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; /* تغطي كامل الشاشة */
    
    /* رسم نجوم بأحجام مختلفة باستخدام التدرجات */
    background-image: 
        radial-gradient(2px 2px at 50px 100px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 150px 250px, #fff, transparent),
        radial-gradient(2.5px 2.5px at 300px 50px, #fff, transparent),
        radial-gradient(1px 1px at 450px 350px, #fff, transparent),
        radial-gradient(2px 2px at 600px 150px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 750px 400px, #fff, transparent),
        radial-gradient(2px 2px at 900px 80px, #fff, transparent);
        
    background-size: 600px 600px; /* حجم الوحدة المتكررة */
    opacity: 0.8;
    z-index: -9;
    
    /* حركة السقوط: 100 ثانية (بطيء جداً) */
    animation: starsFall 100s linear infinite; 
}

/* تعريف حركة السقوط */
@keyframes starsFall {
    from { 
        background-position: 0 0; 
    }
    to { 
        /* نحرك الخلفية للأسفل بمقدار حجمها لضمان التكرار السلس */
        background-position: 0 600px; 
    }
}

/* ... (باقي الأكواد كما هي) ... */
@keyframes starTwinkle { from { opacity: 0.5; } to { opacity: 1; } }
.full-moon { position: fixed; top: 12%; left: 10%; width: 110px; height: 110px; background: radial-gradient(circle at 40% 40%, #fff, #fdf4dc 60%, #e2d2a4 100%); border-radius: 50%; box-shadow: 0 0 70px rgba(255, 255, 255, 0.25); z-index: -8; opacity: 0.9; }
.mecca-silhouette { position: fixed; bottom: 80px; left: 0; width: 100%; height: 220px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'%3E%3Cpath fill='%230a0500' fill-opacity='0.7' d='M0,320h1200V260c-20,0-30-20-40-40v-50h-30v50h-20v-80h-40v80h-50v-40c-10-20-30-20-40,0v40h-60v-100h-20v100h-30v-30h-20v30h-80v-90h-30v90h-100v-60h-20v60h-50v-110h-20v110h-40v-50h-20v50h-70v-80h-30v80h-60v-40h-20v40H0z'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 1200px 100%; z-index: -6; }
.dunes-back { position: fixed; bottom: 0; left: 0; width: 100%; height: 300px; background: linear-gradient(to top, #2c1810 0%, #4e2c1d 100%); clip-path: ellipse(70% 50% at 30% 100%); z-index: -5; opacity: 0.9; }
.dunes-foreground { position: fixed; bottom: -20px; left: 0; width: 100%; height: 220px; background: linear-gradient(to top, #1a0f0a 0%, #3e2014 100%); clip-path: ellipse(80% 70% at 70% 100%); z-index: -4; }

/* --- القائمة العلوية (تعديل الخط ليتطابق مع الاندكس) --- */
.nav-glass {
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(10px);
}

/* إجبار استخدام الخط الكوفي في الروابط والعناوين */
.nav-glass a, .nav-glass span, .nav-glass div {
    font-family: 'Reem Kufi', sans-serif !important;
    font-weight: 700; /* خط عريض */
}

/* --- المحاكي --- */
.ai-section { position: relative; max-width: 900px; margin: 50px auto; padding: 0 20px; z-index: 10; }
.ai-terminal { background: rgba(13, 17, 23, 0.95); border: 1px solid var(--gold-primary); border-radius: 12px; box-shadow: 0 0 50px rgba(212, 175, 55, 0.15); overflow: hidden; backdrop-filter: blur(10px); }
.terminal-header { background: #161b22; padding: 12px 20px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #30363d; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.terminal-title { color: #8b949e; font-family: monospace; font-size: 0.8rem; margin-right: auto; letter-spacing: 1px; }
.terminal-body { padding: 30px; min-height: 200px; font-family: 'Amiri', serif; color: #e2e8f0; font-size: 1.3rem; line-height: 2; text-align: justify; border-bottom: 1px solid #30363d; }
.cursor { display: inline-block; width: 3px; height: 1.2em; background-color: var(--gold-primary); animation: blink 1s infinite; vertical-align: sub; margin-right: 5px; }
@keyframes blink { 50% { opacity: 0; } }
.ai-controls { padding: 15px; background: #0d1117; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.topic-btn { background: rgba(56, 139, 253, 0.1); border: 1px solid #30363d; color: #c9d1d9; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-family: 'Reem Kufi', sans-serif; transition: all 0.2s; font-size: 0.9rem; }
.topic-btn:hover { background: var(--gold-primary); color: #000; border-color: var(--gold-primary); transform: translateY(-2px); }

/* --- طريق السيرة --- */
.seerah-container { max-width: 950px; margin: 80px auto; position: relative; padding-bottom: 100px; z-index: 5; }
.path-line { position: absolute; top: 0; bottom: 0; right: 50%; width: 4px; background: linear-gradient(to bottom, var(--gold-primary), rgba(255,215,0,0.2)); transform: translateX(50%); z-index: 0; box-shadow: 0 0 20px rgba(255,215,0,0.4); }
.event-card { position: relative; width: 45%; margin-bottom: 100px; background: rgba(20, 20, 30, 0.85); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 16px; padding: 25px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); backdrop-filter: blur(10px); transition: transform 0.4s ease; }
.event-card:hover { transform: translateY(-10px); border-color: var(--gold-primary); box-shadow: 0 20px 60px rgba(212, 175, 55, 0.2); }
.event-card.right { margin-right: auto; margin-left: 55%; }
.event-card.left { margin-left: auto; margin-right: 55%; text-align: left; }
.connector { position: absolute; top: 30px; width: 24px; height: 24px; background: #000; border: 5px solid var(--gold-primary); border-radius: 50%; z-index: 10; box-shadow: 0 0 20px var(--gold-primary); }
.event-card.right .connector { left: -11.5%; }
.event-card.left .connector { right: -11.5%; }
.event-year { display: inline-block; background: rgba(255,215,0,0.15); color: var(--gold-primary); padding: 4px 12px; border-radius: 20px; font-size: 0.9rem; margin-bottom: 12px; font-family: 'Reem Kufi', sans-serif; border: 1px solid rgba(255,215,0,0.3); }
.event-title { color: #fff; font-size: 2rem; margin-bottom: 15px; font-family: 'Reem Kufi', sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.event-text { color: #cbd5e1; font-size: 1.15rem; line-height: 1.8; text-align: justify; }
.video-frame { margin-top: 20px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); position: relative; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); height: 250px; }
.video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; animation: slowZoom 25s linear infinite alternate; }
@keyframes slowZoom { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }

@media (max-width: 768px) {
    .path-line { right: 20px; }
    .event-card { width: 90%; margin-right: 45px !important; margin-left: 0 !important; }
    .event-card.left, .event-card.right { text-align: right; }
    .event-card .connector { right: -36px; left: auto; }
}