:root {
    --bg-color: #030712;
    --glass-bg: rgba(255, 255, 255, 0.03);
    /* تم زيادة وضوح الحدود */
    --glass-border: rgba(255, 255, 255, 0.15); 
    --primary-color: #0ea5e9;
    --secondary-color: #6366f1;
    --accent-color: #f43f5e;
    --text-color: #ffffff;
    --text-secondary: #94a3b8;
    --gold-color: #fbbf24;
    --font-main: 'Tajawal', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); }

body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow-x: hidden; 
    position: relative; 
    padding: 20px; 
    transition: background-color 0.5s ease; 
}

/* الخلفية */
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.animated-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.shape { position: absolute; filter: blur(100px); opacity: 0.4; animation: float 8s ease-in-out infinite, rotate 20s linear infinite; }

.shape-1 { top: -10%; left: -10%; width: 300px; height: 300px; background: var(--primary-color); }
.shape-2 { bottom: -10%; right: -10%; width: 350px; height: 350px; background: var(--secondary-color); animation-delay: -2s; }
.shape-3 { top: 20%; right: 10%; width: 200px; height: 200px; background: var(--accent-color); filter: blur(120px); animation-delay: -4s; }
.shape-4 { bottom: 20%; left: 10%; width: 150px; height: 150px; background: var(--primary-color); filter: blur(90px); animation-delay: -6s; }

.glass-container { 
    background: var(--glass-bg); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    border: 1px solid var(--glass-border); 
    border-radius: 30px; 
    padding: 40px 30px; 
    width: 100%; 
    max-width: 480px; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); 
    text-align: center; 
    transition: 0.3s ease; 
}

/* =========================================
   تعديل الصورة الشخصية (Modern Orbit Design)
   ========================================= */
.img-wrapper { 
    position: relative; 
    width: 140px;  /* حجم مناسب */
    height: 140px; 
    margin: 0 auto 30px; 
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* هام: إلغاء overflow: hidden لكي يظهر التوهج والإشارة خارج الدائرة */
}

/* الحلقة الخلفية المتحركة (الدوران المستمر) */
.img-wrapper::before {
    content: '';
    position: absolute;
    /* حجم الحلقة أكبر من الصورة قليلاً */
    inset: -5px; 
    border-radius: 50%;
    /* تدرج لوني يعطي شكل الإضاءة */
    background: conic-gradient(from 0deg, transparent 0%, var(--primary-color) 25%, var(--gold-color) 50%, var(--secondary-color) 75%, transparent 100%);
    /* حركة الدوران المستمر */
    animation: spin-orbit 4s linear infinite;
    z-index: -1; /* خلف الصورة */
    filter: blur(1px); /* نعومة خفيفة للحواف */
}

/* طبقة ثانية للتوهج (Glow) */
.img-wrapper::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: inherit;
    animation: spin-orbit 4s linear infinite;
    z-index: -2;
    filter: blur(15px); /* توهج قوي */
    opacity: 0.6;
}

/* تعريف حركة الدوران */
@keyframes spin-orbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.profile-pic { 
    width: 94%; /* أصغر قليلاً لتظهر الحلقة خلفها */
    height: 94%; 
    border-radius: 50%; 
    object-fit: cover; 
    object-position: center top; 
    /* حدود داخلية تفصل الصورة عن الحلقة الدوارة */
    border: 4px solid var(--bg-color); 
    background-color: var(--bg-color);
    position: relative;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* عند وضع الماوس: تكبير الصورة وتوقف الدوران */
.img-wrapper:hover .profile-pic { 
    transform: scale(1.1); 
}
.img-wrapper:hover::before,
.img-wrapper:hover::after {
    animation-play-state: paused; /* إيقاف الدوران مؤقتاً عند التحويم */
}

/* مؤشر الحالة (تم إصلاح الموقع والظهور) */
.status-indicator { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    width: 22px; 
    height: 22px; 
    background-color: #22c55e; 
    border: 3px solid var(--bg-color); 
    border-radius: 50%; 
    z-index: 10; /* قيمة عالية لتظهر فوق كل شيء */
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green { 
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); transform: scale(1); } 
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); transform: scale(1.1); } 
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); } 
}

/* الشعار */
.logo-container { position: relative; width: fit-content; margin: 0 auto 15px; overflow: hidden; border-radius: 10px; }
.logo-img { height: 45px; display: block; position: relative; z-index: 2; }
.logo-container::after {
    content: ''; 
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); animation: shine 6s infinite; z-index: 3;
}
@keyframes shine { 
    0%, 80% { left: -100%; } 
    100% { left: 200%; } 
}

.name { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.job-title { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: 25px; padding: 0 5px; }

/* تأثيرات النصوص */
.typewriter {
    overflow: hidden; 
    border-left: 3px solid var(--primary-color);
    white-space: nowrap; 
    margin: 0 auto 10px; 
    animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite;
    max-width: fit-content;
}
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--primary-color) } }

.fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 400px) {
    .typewriter { white-space: normal; border-left: none; animation: fadeInUp 1s ease-out forwards; width: 100%; }
}

/* ===========================================
   إصلاح الصناديق لتظهر بشكل أفضل (High Contrast)
   =========================================== */
.section-box { 
    /* زيادة التباين للخلفية */
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 15px; 
    padding: 15px; 
    margin-bottom: 15px; 
    /* توضيح الحدود */
    border: 1px solid var(--glass-border); 
    text-align: right; 
    /* إضافة ظل خفيف للصناديق لتبرز */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.section-title { font-size: 0.95rem; color: var(--primary-color); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.bio-text { font-size: 0.85rem; color: var(--text-color); line-height: 1.6; opacity: 0.9; }


/* التلميحات (Tooltips) */
.locations-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-wrapper { position: relative; display: inline-block; cursor: pointer; }
.tag { display: block; background: rgba(255, 255, 255, 0.05); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; border: 1px solid var(--glass-border); transition: 0.3s; }
.tag-wrapper:hover .tag { background: var(--primary-color); color: #fff; transform: translateY(-2px); }

.tooltip {
    visibility: hidden; opacity: 0; width: max-content; min-width: 120px;
    background: var(--bg-color); color: var(--text-color); text-align: center;
    border-radius: 8px; padding: 8px 12px; position: absolute; z-index: 100;
    bottom: 135%; left: 50%; transform: translateX(-50%) translateY(10px);
    border: 1px solid var(--primary-color); box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-size: 0.8rem; font-weight: bold; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid; border-color: var(--primary-color) transparent transparent transparent;
}
.tag-wrapper:hover .tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }


/* الصندوق الذهبي */
.gold-box { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.08); }
.stats-container { display: flex; justify-content: space-around; text-align: center; margin-top: 10px; }
.stat-item .counter { font-size: 1.8rem; font-weight: bold; color: var(--gold-color); }
.stat-item p { font-size: 0.75rem; color: var(--text-secondary); margin-top: 5px; }


/* المساعدين */
.assistants-grid { display: flex; gap: 10px; justify-content: space-between; }
.assistant-card { 
    background: var(--glass-bg); backdrop-filter: blur(10px); padding: 15px 10px; 
    border-radius: 12px; width: 48%; text-align: center; border: 1px solid var(--glass-border); 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: transform 0.3s ease, border-color 0.3s ease;
}
.assistant-card:hover { transform: translateY(-3px); border-color: var(--primary-color); }
.assistant-card h4 { font-size: 0.85rem; margin-bottom: 10px; color: var(--text-color); font-weight: bold; }

.contact-icons { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.wa-btn, .tg-btn, .ph-btn { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; font-size: 0.9rem; transition: 0.3s; }
.wa-btn { background: #25D366; } .wa-btn:hover { background: #128C7E; transform: scale(1.1); }
.tg-btn { background: #229ED9; } .tg-btn:hover { background: #0088cc; transform: scale(1.1); }
.ph-btn { background: var(--primary-color); } .ph-btn:hover { background: var(--secondary-color); transform: scale(1.1); }


/* المعرض والروابط والفوتر */
.slideshow-container { position: relative; margin: 20px 0; border-radius: 15px; overflow: hidden; border: 1px solid var(--glass-border); height: 200px; }
.mySlides { display: none; height: 100%; } 
.mySlides img { width: 100%; height: 100%; object-fit: cover; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 10px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; user-select: none; background-color: rgba(0,0,0,0.3); }
.next { right: 0; border-radius: 3px 0 0 3px; } .prev { left: 0; border-radius: 0 3px 3px 0; }
.prev:hover, .next:hover { background-color: var(--primary-color); }
.fade { animation-name: fade; animation-duration: 1.5s; } 
@keyframes fade { from {opacity: .4} to {opacity: 1} }

.social-links { display: flex; flex-direction: column; gap: 12px; }
.link-card { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.02); padding: 14px 20px; border-radius: 16px; text-decoration: none; color: var(--text-color); border: 1px solid var(--glass-border); transition: 0.3s; position: relative; overflow: hidden; }
.link-card:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--primary-color); transform: translateY(-3px); }
.icon-box { font-size: 1.4rem; transition: 0.3s; }
.youtube:hover .icon-box { color: #ff0000; } .telegram:hover .icon-box { color: #229ED9; } .instagram:hover .icon-box { color: #E1306C; }
.arrow { opacity: 0.5; transition: 0.3s; } .link-card:hover .arrow { opacity: 1; transform: translateX(-5px); }

footer { margin-top: 30px; font-size: 0.8rem; color: var(--text-secondary); opacity: 0.6; }
.dev-credit { margin-top: 5px; font-size: 0.75rem; }
.dev-name { color: var(--primary-color); font-weight: bold; }

.top-bar { display: flex; justify-content: space-between; margin-bottom: 10px; }
.icon-btn, .lang-btn { background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); color: var(--text-color); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; }
.icon-btn:hover, .lang-btn:hover { background: var(--primary-color); transform: rotate(15deg); }