/* ═══════════════════════════════════════════════════════════
   realdemo — جاسازیِ **خودِ ابزارِ سایت** در صفحه‌های معرفی

   ── چرا ──────────────────────────────────────────────────────
   صفحه‌های معرفی هرکدام یک دموی دست‌نویس داشتند: بازسازیِ ساده‌ای
   از امکانات، نه خودِ آن‌ها. معلم درست گفت که «الکی‌اند».

   هرجا ابزارِ واقعی یک صفحهٔ مستقل دارد (آزمایشگاهِ علوم، استودیوی
   ریاضی، تختهٔ نووا، بازی‌ها) همان را در iframe می‌گذاریم — یعنی
   بازدیدکننده **دقیقاً همان چیزی** را می‌بیند که دانش‌آموز می‌بیند.

   ⚠️ ولی با **بارگذاری به‌خواست**: تا روی دکمه نزند، iframe ساخته
   نمی‌شود. آزمایشگاه ۵۸۷ کیلوبایت است و اگر هر بازدیدکننده‌ای
   خودبه‌خود دانلودش کند، سرعتِ صفحه (و رتبهٔ گوگل) خراب می‌شود.
   ═══════════════════════════════════════════════════════════ */

.rd {
  position: relative;
  border: 1px solid var(--line, #E7E3F6);
  border-radius: 22px;
  overflow: hidden;
  background: var(--ground, #FAF9FE);
  box-shadow: 0 20px 60px -34px rgba(40, 30, 90, .3);
}

/* ── پوستر: نمای واقعیِ همان ابزار ── */
.rd-poster {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: #0E1420 center/cover no-repeat;
  aspect-ratio: 16 / 10;
  min-height: 240px;
}
.rd-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 22, .18) 0%, rgba(8, 12, 22, .62) 100%);
}
.rd-poster > * { position: relative; z-index: 1 }

.rd-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 18px;
}
.rd-play b {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  color: #1B1340;
  font-size: 1.5rem;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .55);
  transition: transform .18s ease;
}
.rd-poster:hover .rd-play b { transform: scale(1.07) }
.rd-play span {
  color: #fff;
  font-weight: 800;
  font-size: clamp(.95rem, 2.2vw, 1.1rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.rd-play small {
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.8;
  max-width: 40ch;
}

/*  ⚠️ نشانِ «خودِ ابزارِ سایت» عمدی است: بازدیدکننده باید بداند این
    یک ویدئو یا ماکت نیست، همان برنامه‌ای است که در کلاس اجرا می‌شود. */
.rd-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .95);
  color: #0E9C77;
  font-size: .74rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 99px;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .4);
}
.rd-badge i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #0E9C77; display: block;
  animation: rdPulse 1.9s ease-in-out infinite;
}
@keyframes rdPulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ── قابِ زنده ── */
.rd-frame { display: block; width: 100%; border: 0; background: #fff }

.rd-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line, #E7E3F6);
  background: #fff;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted, #8B86AB);
}
.rd-bar a {
  color: var(--v, #5B4BE8);
  text-decoration: none;
  font-weight: 800;
}
.rd-bar a:hover { text-decoration: underline }
.rd-bar .rd-sp { margin-inline-start: auto }

@media (prefers-reduced-motion: reduce) {
  .rd * { animation: none !important; transition: none !important }
}