/* ====== Theme Vars (Glass/Neo) ====== */
:root{
  --bg:#0f1326;
  --layer:#12183a;
  --glass:rgba(255,255,255,.06);
  --ink:#e9edff;
  --muted:#b6c2df;
  --border:rgba(255,255,255,.12);
  --brand:#6aa8ff;
  --brand-2:#40e0c6;
  --accent:linear-gradient(135deg,var(--brand),var(--brand-2));
  --radius:18px; --radius-lg:24px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
}
html[data-theme="light"]{
  --bg:#f6f8ff; --layer:#ffffff; --glass:rgba(20,35,85,.06);
  --ink:#0b1020; --muted:#5c6a8a; --border:#dbe1ff;
  --brand:#2d6cdf; --brand-2:#00c2a8;
  --shadow:0 16px 40px rgba(17,28,56,.12);
}

body{ background:var(--bg) }
.container{ width:min(1200px,94%); margin-inline:auto }
.container-narrow{ width:min(900px,94%); margin-inline:auto }
.card{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden }
.glass{ background:var(--glass); backdrop-filter:saturate(1.2) blur(10px) }
.muted{ color:var(--muted) }
.ellip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ====== Background artistry ====== */
.hv2-root{ position:relative; isolation:isolate; overflow:hidden }
.hv2-bg .blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.45; z-index:-1 }
.hv2-bg .b1{ width:420px; height:420px; top:-120px; left:-120px; background:radial-gradient(closest-side, var(--brand), transparent 70%) }
.hv2-bg .b2{ width:420px; height:420px; bottom:-140px; right:-120px; background:radial-gradient(closest-side, var(--brand-2), transparent 70%) }
.hv2-bg .grid{ position:absolute; inset:-5% -5% -5% -5%; z-index:-1;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(transparent 99%, rgba(255,255,255,.06) 1%),
    linear-gradient(90deg, transparent 99%, rgba(255,255,255,.06) 1%);
  background-size: auto, 40px 40px, 40px 40px;
  mask: radial-gradient(600px 400px at 50% 0%, #000 40%, transparent 80%);
}

/* ====== HERO ====== */
.hv2-hero{ display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:stretch; padding:28px 0 10px }
@media (max-width:980px){ .hv2-hero{ grid-template-columns:1fr } }
.hero-title{ margin:0 0 8px; font-weight:900; font-size:clamp(28px,4vw,44px); line-height:1.1 }
.hero-title span{ opacity:.85 }
.hero-title b{ background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero-sub{ margin:0 0 14px; color:var(--muted); font-size:clamp(14px,1.2vw,16px) }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap }
.btn{ display:inline-flex; gap:8px; align-items:center; padding:12px 16px; border-radius:14px; border:1px solid var(--border); color:var(--ink); background:var(--layer); font-weight:800 }
.btn-primary{ background:var(--accent); color:#0b1020; border-color:transparent; box-shadow:0 12px 32px rgba(64,224,198,.28) }
.btn-plain{ background:transparent }

/* ====== Slider ====== */
.hero-widget{ position:relative }
.slider{ position:relative; border-radius:var(--radius-lg); overflow:hidden }
.slider__viewport{ overflow:hidden }
.slider__track{ display:flex; transition:transform .6s ease }
.slide{ position:relative; flex:0 0 100%; min-width:100%; aspect-ratio:16/8; background:linear-gradient(135deg,#0b162f,#1a2750) }
@media (max-width:760px){ .slide{ aspect-ratio:16/10 } }
.slide__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.02) saturate(1.05) brightness(.92) }
.slide__overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 55%, transparent) }
.slide__content{ color:#fff; padding:1.2rem; max-width:min(720px,92%) }
.slide__content .eyebrow{ font-weight:800; opacity:.95; margin-bottom:.35rem }
.slide__content .title{ margin:0 0 .35rem; font-weight:900; font-size:clamp(18px,2.2vw,26px) }
.slide__content .desc{ margin:0; opacity:.95; font-size:clamp(13px,1.2vw,16px) }
.slide__action{ position:absolute; top:10px; right:10px; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-weight:900 }

.slider__dots{ position:absolute; inset:auto 0 10px 0; display:flex; justify-content:center; gap:6px; z-index:2 }
.dot{ width:10px; height:10px; border-radius:50%; border:1px solid #fff; background:transparent; opacity:.85; cursor:pointer }
.dot[aria-selected="true"]{ background:#fff }
.slider__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,.06); backdrop-filter: blur(6px); display:grid; place-items:center; cursor:pointer }
.slider__nav.prev{ left:8px } .slider__nav.next{ right:8px }

/* ====== Ticker ====== */
.hv2-ticker{ margin-top:16px; border-radius:999px; padding:10px 0 }
.hv2-ticker__inner{ display:flex; gap:32px }
.hv2-ticker__track{ display:flex; gap:26px; min-width:100%; white-space:nowrap; animation:ticker 32s linear infinite }
.hv2-ticker:hover .hv2-ticker__track{ animation-play-state:paused }
@keyframes ticker{ from{ transform:translateX(0) } to{ transform:translateX(-100%) } }
.hv2-ticker__item{ display:inline-flex; gap:8px; align-items:center; padding-inline:10px; color:#fff; font-weight:800 }
.hv2-ticker__item .thumb{ width:36px; height:24px; object-fit:cover; border-radius:4px; border:1px solid var(--border) }

/* ====== Sections ====== */
.hv2-section{ margin:32px 0 }
.hv2-section__head{ text-align:center; margin-bottom:16px }
.hv2-section__head h2{ margin:0; font-size:26px; font-weight:900; background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.hv2-section__head p{ margin:6px 0 0 }

/* ====== Grids ====== */
.hv2-grid{ display:grid; gap:18px }
.hv2-grid--subjects{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
.hv2-grid--classes{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }

/* ====== Subject Card ====== */
.subject-card{ display:block; border-radius:20px; overflow:hidden; transform:translateY(0); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease }
.subject-card:hover{ transform:translateY(-6px); box-shadow:0 24px 56px rgba(0,0,0,.32) }
.subject-card .media{ position:relative }
.subject-card .banner{ width:100%; height:140px; object-fit:cover; filter:saturate(1.1) }
.subject-card .banner.ph{ background:linear-gradient(135deg,#1a2750,#0f183a) }
.subject-card .avatar-wrap{ position:absolute; inset:auto 14px -26px auto }
.subject-card .avatar, .subject-card .avatar.ph{
  width:60px; height:60px; border-radius:50%; border:2px solid rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.85); color:#0b1020; font-size:22px;
}
html[data-theme="light"] .subject-card .avatar,
html[data-theme="light"] .subject-card .avatar.ph{ background:#fff; }
.subject-card .body{ padding:32px 14px 16px }
.subject-card .title{ font-weight:900; letter-spacing:.1px; color:var(--ink) }
.subject-card .title .code{ color:var(--muted); font-weight:700; margin-inline-start:6px }
.subject-card .meta{ color:var(--muted); margin-top:4px; font-size:14px }
.subject-card .snip{ color:color-mix(in oklab, var(--ink) 78%, var(--muted) 22%); margin:10px 0 0; line-height:1.9 }

/* ====== Class Card ====== */
.class-card{ position:relative; display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:22px; transition:transform .25s ease, box-shadow .25s ease }
.class-card:hover{ transform:translateY(-4px); box-shadow:0 24px 56px rgba(0,0,0,.32) }
.class-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(120deg,var(--accent1),var(--accent2)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.45 }
.class-card .head{ display:flex; align-items:center; justify-content:space-between }
.class-card .stage{ font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid var(--border); font-weight:800 }
.class-card .code{ font-weight:900; font-size:24px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.class-card .title{ display:flex; align-items:center; gap:8px; font-weight:900; color:var(--ink) }
.class-card .stats{ list-style:none; margin:2px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px }
.class-card .stats li{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:14px; padding:10px; min-width:0 }
.class-card .stats li span{ color:var(--muted); font-size:12px }
.class-card .stats li.last{ grid-column:span 3; display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:8px }

/* ====== Inputs ====== */
.hv2-input{ width:100%; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.06); color:var(--ink); border:1px solid var(--border) }
.hv2-input--lg{ padding:14px 16px; font-size:16px }

/* ====== Reveal ====== */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease }
[data-reveal].is-visible{ opacity:1; transform:translateY(0) }

/* ===== Notice: نص فقط بدون لون/بطاقة ===== */
.notice-top{
  position: static;          /* ألغِ التثبيت إن كان مزعجًا */
  margin: 12px 0 8px;
  backdrop-filter: none;
}
.notice-top__inner{
  /* اجعلها شفافة تمامًا */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0 !important;

  display: block;            /* نعيدها كتدفق نصّي عادي */
  color: var(--ink);
}

/* نستخدم نفس لغة الـHero للنص والزر */
.notice-top .hero-copy{ display: grid; gap: 8px; }
.notice-top .hero-sub{
  margin: 0;
  color: var(--ink);         /* وضوح عالٍ */
  font-size: clamp(14px,1.2vw,16px);
  line-height: 1.9;
}
.notice-top .hero-sub i{ opacity: .9; margin-inline-start:.2em }
.notice-top .hero-sub b{
  font-weight: 900;
  color: color-mix(in oklab, var(--ink) 85%, var(--brand-2) 15%); /* إبراز خفيف بدون تلوين الخلفية */
}
.notice-top .hero-sub u{ text-underline-offset: 2px; }

/* أزرار بنفس ستايلك (شفافة) */
.notice-top .hero-cta{ gap: 8px; }
.notice-top .hero-cta .btn.btn-plain{
  /* نفس زرّك، فقط تأكيد الحدود للوضوح في الداكن والفاتح */
  border-color: var(--border);
}

/* مسافة صغيرة تفصلها عن الـHERO التالي */
.hv2-hero{ margin-top: 6px; }