/* ===== الأساس ونظام الألوان ===== */
:root { --blue:#1552a4; --blue-dark:#0b376f; --blue-soft:#eaf2fc; --ink:#142033; --muted:#68758a; --line:#dfe5ee; --surface:#fff; --background:#f3f6fa; --radius:18px; --shadow:0 22px 60px rgba(30,58,95,.1); }
*{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:90px} body{margin:0;color:var(--ink);background:var(--background);font-family:"IBM Plex Sans Arabic",Arial,sans-serif;line-height:1.8} a{color:inherit;text-decoration:none} button{font:inherit}.skip-link{position:fixed;inset-block-start:-60px;inset-inline-start:20px;z-index:100;background:var(--ink);color:#fff;padding:8px 15px;border-radius:8px}.skip-link:focus{inset-block-start:10px}
/* الشريط العلوي */
.topbar{position:sticky;top:0;z-index:50;min-height:70px;padding:10px clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(243,246,250,.9);border-bottom:1px solid rgba(207,216,229,.75);backdrop-filter:blur(14px)}.brand{font-size:1.25rem;font-weight:700;letter-spacing:.03em;direction:ltr}.brand span{color:var(--blue)}.section-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);color:var(--muted);font-size:.9rem}.section-nav a{transition:color .2s}.section-nav a:hover,.section-nav a.active{color:var(--blue)}.language-switch{display:flex;gap:8px;align-items:center;color:#a3adba;direction:rtl}.lang-btn{border:0;padding:5px 2px;background:transparent;color:var(--muted);cursor:pointer}.lang-btn.active{color:var(--blue);font-weight:700}
/* الهيكل والبطاقة الشخصية */
.portfolio-shell{max-width:1320px;margin:34px auto 80px;padding:0 24px;display:grid;grid-template-columns:minmax(315px,.82fr) minmax(0,1.65fr);gap:26px;direction:ltr;align-items:start}.profile-card,.content-panel{direction:rtl}html[dir=ltr] .profile-card,html[dir=ltr] .content-panel{direction:ltr}.profile-card{position:sticky;top:104px;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.profile-main{padding:clamp(34px,5vw,58px) 34px 32px;text-align:center}.portrait-wrap{width:190px;height:190px;margin:0 auto 28px;position:relative;border-radius:50%;padding:6px;background:linear-gradient(145deg,var(--blue),#8fb7e8)}.portrait-wrap img,.portrait-fallback{width:100%;height:100%;border-radius:50%;border:5px solid #fff}.portrait-wrap img{position:relative;z-index:2;object-fit:cover;background:#dce7f4}.portrait-fallback{position:absolute;inset:6px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-size:3rem;font-weight:700}.availability-dot{position:absolute;z-index:3;inset-inline-end:18px;bottom:15px;width:19px;height:19px;border:4px solid #fff;border-radius:50%;background:#27a86f}.eyebrow,.section-kicker,.mini-label{margin:0 0 8px;color:var(--blue);font-weight:700;font-size:.78rem;letter-spacing:.07em}.profile-main h1{margin:0;color:var(--blue-dark);font-size:clamp(1.5rem,3vw,2rem);line-height:1.35}.role{max-width:330px;margin:12px auto 24px;color:var(--muted);font-size:.95rem}.profile-actions{display:grid;gap:10px}.button{padding:11px 20px;border:1px solid var(--blue);border-radius:10px;font-weight:600;transition:.2s}.button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(21,82,164,.16)}.button.primary{background:var(--blue);color:#fff}.button.primary:hover{background:var(--blue-dark)}.button.secondary{color:var(--blue)}.button.secondary:hover{background:var(--blue-soft)}.profile-contact{padding:24px 30px;display:grid;gap:4px;text-align:center;border-top:1px solid var(--line);background:#fbfcfe}.profile-contact a{color:var(--muted);font-size:.9rem}.profile-contact a:hover{color:var(--blue)}
/* أقسام المحتوى */
.content-panel{overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.content-section{padding:clamp(34px,6vw,72px);border-bottom:1px solid var(--line)}.hero{padding-block:clamp(55px,8vw,100px);background:linear-gradient(145deg,#fff 65%,#f2f7fd)}.hero h2,.contact-section h2{max-width:680px;margin:7px 0 18px;font-size:clamp(2rem,5vw,3.7rem);line-height:1.22;letter-spacing:-.03em;color:var(--blue-dark)}.lead{max-width:760px;margin:0;color:#526075;font-size:1.06rem}.text-link{display:inline-flex;align-items:center;gap:9px;margin-top:26px;color:var(--blue);font-weight:700}.text-link span:last-child{transition:transform .2s}.text-link:hover span:last-child{transform:translateX(-5px)}html[dir=ltr] .text-link span:last-child{transform:rotate(180deg)}.section-heading{display:flex;justify-content:space-between;align-items:start;gap:20px}.section-heading>span{color:var(--blue);font-size:1.2rem;font-weight:700;direction:ltr}.section-heading small{color:var(--muted);font-size:.68rem;font-weight:500}
/* الخط الزمني والبطاقات */
.timeline{margin-top:25px}.timeline-item{display:grid;grid-template-columns:150px 1fr;gap:30px;position:relative;padding:8px 28px 32px 0;border-inline-start:1px solid #cfd9e7}.timeline-item:last-child{padding-bottom:0}.timeline-item:before{content:"";position:absolute;top:13px;inset-inline-start:-6px;width:11px;height:11px;border-radius:50%;background:#fff;border:3px solid var(--blue)}.timeline-item time{color:var(--blue);font-size:.85rem;font-weight:600;direction:rtl}.timeline-item h3,.info-card h3{margin:0 0 3px;font-size:1.05rem}.timeline-item p,.info-card p{margin:0;color:var(--muted);font-size:.9rem}.cards-grid,.projects-grid{display:grid;gap:14px;margin-top:22px}.qualifications-grid{grid-template-columns:repeat(2,1fr)}.info-card{padding:23px;border:1px solid var(--line);border-radius:13px;transition:.2s}.info-card:first-child{grid-column:1/-1}.info-card:hover{transform:translateY(-3px);border-color:#9bbbe2}.info-card>span,.project-card>span{display:block;margin-bottom:9px;color:var(--blue);font-weight:700;font-size:.8rem}.feature-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}.feature-list li{position:relative;padding:14px 46px 14px 18px;border-radius:11px;background:#f7f9fc}.feature-list li:before{content:"✓";position:absolute;inset-inline-start:16px;top:14px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:.75rem}html[dir=ltr] .feature-list li{padding:14px 18px 14px 46px}.achievement-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:22px}.achievement{min-height:135px;padding:22px;border-radius:13px;background:#f7f9fc}.achievement.featured{background:var(--blue);color:#fff}.achievement strong{display:block;color:var(--blue);margin-bottom:16px;font-size:1.35rem;direction:ltr;text-align:start}.achievement.featured strong{color:#bcd7fb}.achievement h3,.achievement p{margin:0;line-height:1.65}.skill-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.skill-cloud span{padding:9px 16px;border:1px solid #cfdaea;border-radius:100px;color:#3c4b60;background:#fbfcfe;transition:.2s}.skill-cloud span:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-2px)}.projects-grid{grid-template-columns:repeat(2,1fr)}.project-card{min-height:170px;padding:25px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:13px;transition:.2s}.project-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:var(--blue-soft);inset-inline-end:-45px;bottom:-45px;transition:transform .3s}.project-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(28,64,108,.09)}.project-card:hover:after{transform:scale(1.25)}.project-card h3{margin:0 0 7px;color:var(--blue-dark);font-size:1.2rem;direction:ltr;text-align:start}.project-card p{margin:0;color:var(--muted)}
/* التواصل والتذييل */
.contact-section{padding:clamp(42px,7vw,78px);background:var(--blue-dark);color:#fff}.section-kicker.light{color:#a9cdf9}.contact-section h2{color:#fff;font-size:clamp(1.8rem,4vw,3rem)}.contact-section>p:not(.section-kicker){color:#cbd9eb}.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.contact-actions a{padding:10px 18px;border:1px solid rgba(255,255,255,.35);border-radius:9px}.contact-actions a:hover{background:rgba(255,255,255,.12)}footer{max-width:1320px;margin:0 auto;padding:0 24px 45px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:.85rem}footer a{color:var(--blue)}
/* الحركة تظهر فقط عند تفعيل JavaScript */
.js .fade-in{opacity:0;transform:translateY(18px);transition:opacity .65s,transform .65s}.js .fade-in.visible{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
/* الاستجابة للشاشات */
@media(max-width:980px){.section-nav{display:none}.portfolio-shell{grid-template-columns:1fr;max-width:820px}.profile-card{position:static}.profile-main{display:grid;grid-template-columns:150px 1fr;column-gap:26px;text-align:start}.portrait-wrap{grid-row:1/5;width:150px;height:150px;margin:0}.profile-main .eyebrow{align-self:end}.profile-main .role{margin-inline:0}.profile-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;margin-top:20px;text-align:center}}
@media(max-width:620px){.topbar{padding-inline:16px}.portfolio-shell{margin-top:16px;padding:0 12px;gap:14px}.profile-main{display:block;padding-inline:22px;text-align:center}.portrait-wrap{width:145px;height:145px;margin:0 auto 22px}.profile-main .role{margin-inline:auto}.profile-actions{grid-template-columns:1fr}.content-section,.contact-section{padding:34px 22px}.hero{padding-block:50px}.hero h2{font-size:2rem}.timeline-item{grid-template-columns:1fr;gap:4px;padding-inline-start:22px}.qualifications-grid,.achievement-grid,.projects-grid{grid-template-columns:1fr}.info-card:first-child{grid-column:auto}footer{flex-direction:column;align-items:center;text-align:center}}
/* أيقونات التواصل الاجتماعي */
.social-links{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 10px;direction:ltr}
.social-links a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--blue);transition:color .2s,background .2s,border-color .2s,transform .2s}
.social-links a:hover{color:#fff;background:var(--blue);border-color:var(--blue);transform:translateY(-3px)}
.social-links svg{width:17px;height:17px;fill:currentColor}
/* زر المظهر والوضع الداكن */
.theme-toggle{width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--blue);cursor:pointer;transition:color .2s,background .2s,border-color .2s,transform .2s}
.theme-toggle:hover{color:#fff;background:var(--blue);border-color:var(--blue);transform:rotate(-8deg)}
.theme-toggle svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s,transform .25s}
.theme-toggle .moon-icon{fill:currentColor;stroke:none}.theme-toggle .sun-icon{opacity:0;transform:scale(.65) rotate(-45deg)}
html[data-theme=dark]{--blue:#7eb0f4;--blue-dark:#dceaff;--blue-soft:#193554;--ink:#edf4fd;--muted:#a9b8ca;--line:#2b3c52;--surface:#111d2d;--background:#091321;--shadow:0 22px 60px rgba(0,0,0,.25);color-scheme:dark}
html[data-theme=dark] .moon-icon{opacity:0;transform:scale(.65) rotate(45deg)}
html[data-theme=dark] .theme-toggle .sun-icon{opacity:1;transform:scale(1) rotate(0)}
html[data-theme=dark] .topbar{background:rgba(9,19,33,.9);border-color:var(--line)}
html[data-theme=dark] .hero{background:linear-gradient(145deg,var(--surface) 65%,#142740)}
html[data-theme=dark] .profile-contact,html[data-theme=dark] .feature-list li,html[data-theme=dark] .achievement{background:#152235}
html[data-theme=dark] .info-card,html[data-theme=dark] .project-card{background:#121f31}
html[data-theme=dark] .social-links a,html[data-theme=dark] .skill-cloud span{background:#152235;border-color:var(--line);color:var(--blue)}
html[data-theme=dark] .social-links a:hover{background:var(--blue);color:#081321}
html[data-theme=dark] .skill-cloud span{color:var(--muted)}
html[data-theme=dark] .portrait-wrap img,html[data-theme=dark] .portrait-fallback,html[data-theme=dark] .availability-dot{border-color:var(--surface)}
html[data-theme=dark] .portrait-fallback{background:#1a3150}
html[data-theme=dark] .button.primary{color:#081321}
html[data-theme=dark] .achievement.featured{background:#1d5797;color:#fff}
html[data-theme=dark] .contact-section{background:#092d55}
html[data-theme=dark] .contact-section h2{color:#fff}
html[data-theme=dark] .lead{color:#b6c3d3}
.profile-actions .button:only-child{grid-column:1/-1}
.language-toggle{width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--blue);font-weight:700;font-size:1rem;line-height:1;cursor:pointer;transition:color .2s,background .2s,border-color .2s,transform .2s}
.language-toggle:hover{color:#fff;background:var(--blue);border-color:var(--blue);transform:rotate(8deg)}
.portfolio-shell.profile-only{grid-template-columns:minmax(315px,480px);justify-content:center}
/* الجزء السفلي المعكوس من البطاقة الشخصية */
.profile-contact{background:var(--blue);border-top-color:var(--blue);color:#fff}
.profile-contact .mini-label{color:#fff}
.profile-contact .social-links a{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.profile-contact .social-links a:hover{background:#fff;color:#1552a4;border-color:#fff}
html[data-theme=dark] .profile-contact{background:#0a2b52;border-top-color:#0a2b52}
html[data-theme=dark] .profile-contact .social-links a{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
html[data-theme=dark] .profile-contact .social-links a:hover{background:#fff;color:#1552a4;border-color:#fff}
/* خطوط ثمانية المحلية: Display للعناوين وText لبقية المحتوى */
@font-face{font-family:"Thmanyah Display";src:url("fonts/thmanyahserifdisplay-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Display";src:url("fonts/thmanyahserifdisplay-Medium.otf") format("opentype");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Display";src:url("fonts/thmanyahserifdisplay-Bold.otf") format("opentype");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Text";src:url("fonts/thmanyahseriftext-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Text";src:url("fonts/thmanyahseriftext-Medium.otf") format("opentype");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Text";src:url("fonts/thmanyahseriftext-Bold.otf") format("opentype");font-weight:700 900;font-style:normal;font-display:swap}
body,button{font-family:"Thmanyah Text",Arial,sans-serif}
h1,h2,h3,.section-kicker{font-family:"Thmanyah Display","Thmanyah Text",Arial,sans-serif}
/* الاسم الرئيسي بخط Display بارز */
.profile-main h1{font-family:"Thmanyah Display","Thmanyah Text",Arial,sans-serif;font-size:clamp(2.2rem,7vw,3.1rem);font-weight:700;line-height:1.2;letter-spacing:-.015em}