/* =========================================================
   دليل خريجي أكاديمية أساب — النظام البصري (Design System)
   هوية أساب: الكحلي أساسًا. مستوى Apple/Linear/Stripe.
   ========================================================= */

:root {
  /* ---- ألوان أساب ---- */
  --asap-navy:        #0E2B27;   /* الكحلي الأساسي */
  --asap-navy-700:    #16463E;
  --asap-navy-600:    #1E5A4E;
  --asap-navy-ink:    #0A211D;   /* نص داكن */
  --asap-gold:        #BCD3B3;   /* LPP — ذهبي راقٍ */
  --asap-gold-soft:   #D7E6CF;
  --asap-silver:      #8A94A6;   /* LPA — فضي */
  --asap-silver-soft: #C7CEDA;
  --lpp-gold:         #C8A24B;   /* شارة LPP فقط */
  --lpp-gold-soft:    #E8D4A0;
  --verify-green:     #1E5A4E;   /* تحقق أساب = أخضر */
  --open-green:       #1FA971;   /* مفتوح لعمل */

  /* ---- محايدات ---- */
  --bg:          #FBFCFD;
  --surface:     #FFFFFF;
  --card:        #FFFFFF;
  --line:        #E6EAF0;
  --line-strong: #D4DAE4;
  --ink:         #0E1B2E;
  --ink-2:       #41506A;
  --ink-3:       #6B7A92;
  --ink-faint:   #97A3B6;

  /* ---- مقاسات ---- */
  --r-sm: 8px;  --r: 14px;  --r-lg: 20px;  --r-xl: 28px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --shadow-sm: 0 1px 2px rgba(14,43,39,.06), 0 1px 3px rgba(14,43,39,.05);
  --shadow:    0 4px 16px rgba(14,43,39,.08), 0 1px 4px rgba(14,43,39,.05);
  --shadow-lg: 0 12px 40px rgba(14,43,39,.12), 0 4px 12px rgba(14,43,39,.06);
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
  /* aliases للواجهة المستضافة */
  --green:#0E2B27; --green-700:#16463E; --green-600:#1E5A4E; --green-ink:#0A211D;
  --sage:#BCD3B3; --sage-soft:#D7E6CF; --sage-tint:#F2F7EF; --blue:#1E9BDC;
  --asap-navy:#0E2B27; --asap-navy-700:#16463E; --asap-navy-600:#1E5A4E; --asap-navy-ink:#0A211D;
  --asap-gold:#BCD3B3; --asap-gold-soft:#D7E6CF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--ink);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
[dir="rtl"] { direction: rtl; }
[lang="en"], [dir="ltr"] { font-family: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif; }

h1,h2,h3,h4 { line-height: 1.25; font-weight: 700; color: var(--asap-navy-ink); letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }

/* ---- أزرار ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: 11px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: all .18s var(--ease); white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--asap-navy); color: #fff; }
.btn-primary:hover { background: var(--asap-navy-600); box-shadow: var(--shadow); }
.btn-gold { background: var(--sage); color: var(--green-ink); font-weight:700; }
.btn-gold:hover { background:#A9C79E; }
.btn-ghost { background: var(--surface); color: var(--asap-navy); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--asap-navy); background: #F7F9FC; }
.btn-sm { padding: 8px 14px; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---- شارات الاعتماد / التحقق ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  border: 1px solid; letter-spacing: .01em;
}
.badge svg { width: 14px; height: 14px; }
/* LPP — ذهبي */
.badge-lpp { background: linear-gradient(135deg,#FBF3DE,#F3E3BC); color: #7A5B16; border-color: #E8D4A0; }
/* LPA — فضي */
.badge-lpa { background: linear-gradient(135deg,#F2F4F8,#E4E9F1); color: #4A5568; border-color: var(--asap-silver-soft); }
/* تحقق أساب — أخضر، شكل مختلف (ختم) */
.badge-asap { background: #EAF5EF; color: var(--verify-green); border-color: #BEE3CF; }
.badge-lg { font-size: .9rem; padding: 7px 14px; }

/* نقطة "مفتوح لعمل" */
.open-dot { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color: var(--open-green); }
.open-dot::before { content:""; width:9px; height:9px; border-radius:50%; background: var(--open-green); box-shadow: 0 0 0 3px rgba(31,169,113,.18); }

/* ---- بطاقة خريج ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: var(--sp-5); }
.gcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); transition: all .2s var(--ease); position: relative; overflow: hidden;
}
.gcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.gcard-top { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--sp-3); }
.gcard-photo {
  width: 84px; height: 84px; border-radius: 18px; object-fit: cover;
  background: linear-gradient(135deg,#EEF2F7,#E2E8F1); border: 1px solid var(--line);
}
.gcard-name { font-size: 1.08rem; font-weight: 700; margin-top: var(--sp-3); }
.gcard-name-en { font-size: .82rem; color: var(--ink-3); font-weight: 500; }
.gcard-role { font-size: .9rem; color: var(--ink-2); margin-top: 2px; }
.gcard-meta { display:flex; flex-direction:column; gap:7px; margin-top: var(--sp-4); font-size:.85rem; color: var(--ink-2); }
.gcard-meta .row { display:flex; align-items:center; gap:8px; }
.gcard-meta svg { width:15px; height:15px; color: var(--ink-faint); flex:none; }
.gcard-tags { margin-top: var(--sp-3); font-size:.8rem; color: var(--ink-3); line-height:1.5; }
.gcard-foot { display:flex; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.gcard-updated { font-size:.72rem; color: var(--ink-faint); margin-top: var(--sp-3); }

/* ---- شريط علوي ---- */
.nav { background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); position: sticky; top:0; z-index: 50; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height: 64px; }
.nav-logo { display:flex; align-items:center; gap: var(--sp-3); font-weight:800; color: var(--green-ink); font-size:1.05rem; }
.nav-logo .mark { width:34px; height:34px; }
.nav-links { display:flex; align-items:center; gap: var(--sp-5); font-size:.92rem; font-weight:500; color: var(--ink-2); }
.nav-links a:hover { color: var(--asap-navy); }

/* ---- هيرو ---- */
.hero { background: linear-gradient(165deg,var(--asap-navy) 0%, var(--asap-navy-700) 55%, var(--asap-navy-600) 100%); color:#fff; padding: var(--sp-8) 0 var(--sp-7); position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(188,211,179,.12), transparent 45%); }
.hero-inner { position:relative; z-index:1; max-width: 760px; }
.hero .eyebrow { color: var(--asap-gold-soft); font-weight:600; font-size:.9rem; letter-spacing:.04em; }
.hero h1 { color:#fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin: var(--sp-3) 0; }
.hero .sub { color:#D6DEEA; font-size:1.1rem; max-width: 620px; }
.hero-cta { display:flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap:wrap; }
.hero-stats { display:flex; gap: var(--sp-7); margin-top: var(--sp-7); flex-wrap:wrap; }
.hero-stat .n { font-size: 2rem; font-weight:800; color:#fff; }
.hero-stat .l { font-size:.85rem; color:#AEBBD0; }

/* ---- قسم الاعتمادات ---- */
.creds { display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-5); margin-top: calc(-1 * var(--sp-6)); position:relative; z-index:2; }
.cred-card { background:var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow); }
.cred-card.lpp { border-top: 3px solid var(--asap-gold); }
.cred-card.lpa { border-top: 3px solid var(--asap-silver); }
.cred-card h3 { display:flex; align-items:center; gap:10px; font-size:1.15rem; }
.cred-card p { color: var(--ink-2); font-size:.92rem; margin-top: var(--sp-2); }
.cred-card .lvl { font-size:.8rem; color: var(--ink-3); margin-top: var(--sp-3); }

/* ---- فلاتر ---- */
.filters { background:var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); margin: var(--sp-6) 0; display:flex; gap: var(--sp-4); flex-wrap:wrap; align-items:flex-end; box-shadow: var(--shadow-sm); }
.fgroup { display:flex; flex-direction:column; gap:6px; }
.fgroup label { font-size:.78rem; font-weight:600; color: var(--ink-3); }
.fgroup select, .fgroup input { font:inherit; font-size:.9rem; padding:9px 12px; border:1px solid var(--line-strong); border-radius: var(--r-sm); background:#fff; color:var(--ink); min-width:150px; }
.fgroup select:focus, .fgroup input:focus { outline:none; border-color: var(--asap-navy); box-shadow: 0 0 0 3px rgba(14,43,39,.08); }
.fgroup.search input { min-width: 240px; }
.fcount { margin-inline-start:auto; font-size:.88rem; color:var(--ink-3); font-weight:600; align-self:center; }

/* ---- أدوات مساعدة ---- */
.section-title { font-size:1.4rem; margin: var(--sp-6) 0 var(--sp-4); }
.muted { color: var(--ink-3); }
.pill { display:inline-block; background:#EEF2F7; color:var(--ink-2); font-size:.78rem; padding:3px 10px; border-radius:999px; margin:2px; }

/* ---- جوال ---- */
@media (max-width: 760px){
  .creds { grid-template-columns:1fr; }
  .nav-links { gap: var(--sp-3); font-size:.85rem; }
  .nav-links .hide-m { display:none; }
  .hero-stats { gap: var(--sp-5); }
  .filters { flex-direction:column; align-items:stretch; }
  .fgroup select, .fgroup input, .fgroup.search input { min-width:0; width:100%; }
  .grid { grid-template-columns:1fr; }
}


/* ---- الشعار الرسمي + دخول ---- */
.nav-logo .brandlogo{height:34px;width:auto;display:block}
.nav-login{color:var(--green);font-weight:600;border:1px solid var(--line-strong);padding:7px 15px;border-radius:var(--r-sm);transition:border-color .15s,background .15s}
.nav-login:hover{border-color:var(--green);background:var(--sage-tint)}
.lvl{font-size:.8rem;color:var(--ink-3);margin-top:12px}
.site-foot{padding:var(--sp-6) 0;border-top:1px solid var(--line);color:var(--ink-3);font-size:.82rem;text-align:center;margin-top:var(--sp-6)}
.link-action{color:var(--green);font-weight:600;font-size:.85rem}
.link-action:hover{text-decoration:underline;text-underline-offset:3px}
/* Pagination */
.pagination{display:flex;justify-content:center;gap:6px;margin:var(--sp-6) 0;flex-wrap:wrap;align-items:center}
.pg-btn{font:inherit;font-size:.86rem;font-weight:600;padding:8px 13px;border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);border-radius:var(--r-sm);cursor:pointer;min-width:40px}
.pg-btn:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-btn.pg-active{background:var(--green);color:#fff;border-color:var(--green)}
.pg-dots{color:var(--ink-faint);padding:0 4px}
/* صورة البطاقة: لا قطع رأس */
.gcard-photo{object-fit:contain;object-position:bottom center;background:var(--sage-tint)}

/* ============ هيرو مبدع (فسيفساء خريجين + توهج + عمق طباعي) ============ */
.hero{min-height:520px}
.hero-glow{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 50% at 15% 20%, rgba(188,211,179,.16), transparent 60%),
  radial-gradient(ellipse 50% 60% at 85% 85%, rgba(30,155,220,.08), transparent 55%);pointer-events:none}
.hero-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-6);align-items:center;position:relative;z-index:1}
.hero h1 .hl{color:var(--sage)}
/* فسيفساء وجوه الخريجين الحقيقية (برهان اجتماعي) */
.hero-faces{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;direction:ltr;padding:10px}
.hero-faces .f{aspect-ratio:1;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(2px);position:relative}
.hero-faces .f img{width:100%;height:100%;object-fit:contain;object-position:bottom center;display:block}
.hero-faces .f:nth-child(1){transform:translateY(22px)}
.hero-faces .f:nth-child(3){transform:translateY(-14px)}
.hero-faces .f:nth-child(4){transform:translateY(34px)}
.hero-faces .f:nth-child(6){transform:translateY(8px)}
.hero-faces .f.badge-tile{display:flex;align-items:center;justify-content:center;background:var(--sage);border:0}
.hero-faces .f.badge-tile span{color:var(--green-ink);font-weight:800;font-size:1rem;text-align:center;line-height:1.4}
@media(max-width:860px){.hero-wrap{grid-template-columns:1fr}.hero-faces{display:none}.hero{min-height:0}}
/* عدّادات: حركة ظهور هادئة */
.hero-stat .n{transition:opacity .4s var(--ease)}

/* ============ شعار الهيرو + نقاط ضوئية ============ */
.hero-brand{position:relative;height:360px;display:flex;align-items:center;justify-content:center}
.hb-logo{max-width:320px;max-height:260px;width:auto;height:auto;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 10px 30px rgba(0,0,0,.25))}
.hb-orbits{position:absolute;inset:0;z-index:1}
.hb-orbits .dot{position:absolute;border-radius:50%;background:var(--sage);box-shadow:0 0 12px 2px rgba(188,211,179,.55);will-change:transform,opacity}
/* نقاط متفاوتة الحجم والشفافية والمدار */
.dot.d1{width:8px;height:8px;top:18%;left:12%;opacity:.6;animation:orbA 11s ease-in-out infinite}
.dot.d2{width:5px;height:5px;top:72%;left:22%;opacity:.5;background:var(--blue);box-shadow:0 0 10px 2px rgba(30,155,220,.5);animation:orbB 14s ease-in-out infinite}
.dot.d3{width:10px;height:10px;top:32%;right:14%;opacity:.4;animation:orbC 16s ease-in-out infinite}
.dot.d4{width:4px;height:4px;top:86%;right:28%;opacity:.7;animation:orbD 9s ease-in-out infinite}
.dot.d5{width:6px;height:6px;top:8%;left:48%;opacity:.5;animation:orbE 13s ease-in-out infinite}
.dot.d6{width:3px;height:3px;top:60%;right:8%;opacity:.8;background:var(--blue);box-shadow:0 0 8px 2px rgba(30,155,220,.5);animation:orbF 12s ease-in-out infinite}
.dot.d7{width:7px;height:7px;top:46%;left:4%;opacity:.4;animation:orbG 17s ease-in-out infinite}
.dot.d8{width:5px;height:5px;top:90%;left:62%;opacity:.5;animation:orbH 10s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-18px)}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,20px) scale(1.3)}}
@keyframes orbC{0%,100%{transform:translate(0,0)}50%{transform:translate(-32px,22px)}}
@keyframes orbD{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-18px) scale(1.4)}}
@keyframes orbE{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,24px)}}
@keyframes orbF{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-16px,-22px) scale(1.5)}}
@keyframes orbG{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-14px)}}
@keyframes orbH{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,-18px)}}
@media(prefers-reduced-motion:reduce){.hb-orbits .dot{animation:none}}
@media(max-width:860px){.hero-brand{height:200px}.hb-logo{max-width:220px;max-height:160px}.dot{display:none}.dot.d1,.dot.d3,.dot.d5{display:block;opacity:.3}}

/* ============ مودال التواصل ============ */
.modal-bg{position:fixed;inset:0;background:rgba(14,43,39,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;opacity:0;transition:opacity .2s var(--ease)}
.modal-bg.open{display:flex;opacity:1}
.modal{background:#fff;border-radius:var(--r-lg);padding:var(--sp-6);max-width:520px;width:100%;max-height:90vh;overflow:auto;position:relative;box-shadow:var(--shadow-lg)}
.modal-close{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--sage-tint);color:var(--green);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.modal-close:hover{background:var(--sage)}
.modal-title{font-size:1.15rem;margin-bottom:4px;padding-inline-end:40px}
.modal-opps{margin-bottom:var(--sp-4)}
.mf{margin-bottom:var(--sp-3)}
.mf label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.mf input,.mf textarea,.mf select{width:100%;font:inherit;font-size:.92rem;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff}
.mf input:focus,.mf textarea:focus,.mf select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--sage-soft)}
.mf2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cm-ok{margin-top:12px;padding:10px 12px;border-radius:8px;background:#EAF5EF;color:var(--verify-green);font-size:.86rem}
.cm-err{margin-top:12px;padding:10px 12px;border-radius:8px;background:#FDECEC;color:#B4322B;font-size:.86rem}
@media(max-width:520px){.mf2{grid-template-columns:1fr}}

/* ============ مربعات الإحصاءات (ساطعة/واضحة) ============ */
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:var(--sp-6);max-width:520px}
.hero-stat{background:rgba(255,255,255,.08);border:1px solid rgba(188,211,179,.25);border-radius:14px;padding:16px 14px;text-align:center;backdrop-filter:blur(6px);transition:all .25s var(--ease);position:relative;overflow:hidden}
.hero-stat::before{content:"";position:absolute;inset-inline-start:0;top:0;width:3px;height:100%;background:linear-gradient(to bottom,var(--sage),var(--blue));opacity:.5}
.hero-stat:hover{background:rgba(255,255,255,.12);border-color:rgba(188,211,179,.5)}
.hero-stat .n{font-size:2.2rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.hero-stat .l{font-size:.78rem;color:var(--sage);margin-top:8px;font-weight:600;line-height:1.3}
.hero .sub{line-height:1.9}
@media(max-width:620px){.hero-stats{grid-template-columns:1fr 1fr;max-width:none}.hero-stat .n{font-size:1.8rem}}