/* ===== Wrapper (Light, with subtle tint) ===== */
.naam-sgl-wrap{
  --accent: var(--naam-accent, #ffa245);
  --bg1:#ffffff; --bg2:#fbfbfd; --txt:#0f1220; --muted:#5b6474;
  --radius:26px; --gap:28px;
  --btn-radius: var(--naam-button-radius, 16px);

  color:var(--txt);
  /* کمی رنگ به بک‌گراند بدیم که تخت نباشه */
  background:
    radial-gradient(1200px 560px at 85% -10%, rgba(122,92,255,.06), transparent 60%),
    radial-gradient(1000px 520px at -10% 110%, rgba(15,18,32,.04), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  border-radius:30px; padding:clamp(34px,6vw,78px) 18px;
  position:relative; overflow:hidden;
}
.naam-sgl-container{ max-width:1320px; margin:0 auto; position:relative; z-index:2; }

/* ===== Shapes (softer) ===== */
.naam-sgl-decos{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.deco{ position:absolute; filter: blur(58px); opacity:.30; }
.deco.blob-a{ width:520px; height:520px; right:-120px; top:20px;
  background: radial-gradient(closest-side, rgba(122,92,255,.15), transparent 70%); }
.deco.blob-b{ width:480px; height:480px; left:-140px; bottom:-60px;
  background: radial-gradient(closest-side, rgba(32,227,178,.10), transparent 70%); }
.deco.ring{ width:560px; height:560px; left:40%; top:-120px; filter: blur(28px);
  background:
    radial-gradient(closest-side, transparent 64%, rgba(15,18,32,.06) 66%, transparent 72%),
    radial-gradient(closest-side, rgba(122,92,255,.08), transparent 70%); opacity:.22; }
.deco.dots{ width:680px; height:320px; right:-80px; bottom:-40px; filter:none;
  background-image: radial-gradient(rgba(15,18,32,.05) 1px, transparent 1.5px);
  background-size:18px 18px; opacity:.22; }

/* ===== Header ===== */
.naam-sgl-hero{ text-align:center; margin-bottom:32px; }
.naam-sgl-title{
  margin:0 0 10px; font-weight:900; font-size:clamp(28px,3.8vw,48px); color:#0f1220;
  text-shadow:none; animation:none;
}
.naam-sgl-subtitle{ max-width:960px; margin:0 auto; color:var(--muted); font-size:clamp(13px,1.5vw,16px); }

/* ===== Grid ===== */
.naam-sgl-cards{
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(2, minmax(460px, 1fr));
  align-items:stretch; justify-content:center;
}

/* ===== Card (Light Glass) ===== */
.naam-sgl-card{
  position:relative; overflow:visible; border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
  border:1px solid rgba(15,18,32,.08);
  box-shadow: 0 6px 24px rgba(17,24,39,.06);
  transition: box-shadow .22s ease, border-color .22s ease, transform .12s ease;
}
.naam-sgl-card:hover{
  border-color: rgba(15,18,32,.14);
  box-shadow: 0 10px 32px rgba(17,24,39,.08);
  transform: translateY(-1px);
}
.naam-sgl-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(120% 60% at 12% -10%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(80% 40%  at 110% 120%, rgba(255,255,255,.30), transparent 60%);
  mix-blend-mode:screen;
}
.naam-sgl-inner{ position:relative; z-index:2; }

/* ===== Badge (solid accent, no rainbow) ===== */
.badge-float{
  position:absolute; top:0; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; font-size:12px; font-weight:800; color:#fff;
  background: var(--accent); border:1px solid rgba(0,0,0,.06); border-radius:999px;
  box-shadow: 0 10px 24px rgba(17,24,39,.10), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index:3;
}
.badge-right{ right:34px; } .badge-left { left:34px; }
.naam-sgl-icon{ width:16px; height:16px; display:inline-block; }

/* ===== Titles inside cards (accent-only) ===== */
.naam-sgl-card h3{ margin:0; padding:0 30px; font-size:clamp(20px,2.3vw,24px); font-weight:1000; line-height:1.25; }
.card-lesson h3,
.card-exercise h3{
  background: linear-gradient(90deg, var(--accent), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.naam-sgl-card p{ margin:10px 30px 18px; color:var(--muted); font-size:14px; line-height:1.85; }

.naam-sgl-cta{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:0 30px 26px; }
.naam-sgl-cta .hint{ font-size:12px; color:#6b7280; }

/* ===== Button (solid accent) ===== */
.naam-sgl-btn{
  --x:50%; --y:50%;
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 18px; border-radius:var(--btn-radius);
  font-weight:900; font-size:14px;
  color:#fff; background: var(--accent);
  border:1px solid rgba(0,0,0,.04);
  text-decoration:none; cursor:pointer;
  box-shadow: 0 10px 22px rgba(17,24,39,.10);
  overflow:hidden; transition: transform .12s ease, box-shadow .18s ease, filter .12s ease;
}
.naam-sgl-btn:hover{ transform: translateY(-1px); box-shadow:0 14px 28px rgba(17,24,39,.12); filter: brightness(.96); }
.naam-sgl-btn::before{
  content:""; position:absolute; width:220%; height:220%;
  top:var(--y); left:var(--x); transform: translate(-50%,-50%) scale(0);
  background: radial-gradient(circle at center, rgba(255,255,255,.28), transparent 60%);
  transition: transform .55s ease; pointer-events:none;
}
.naam-sgl-btn:hover::before{ transform: translate(-50%,-50%) scale(1); }
.naam-sgl-btn::after{ content:none; }
.naam-sgl-btn svg{ transition: transform .22s ease; }
.naam-sgl-btn:hover svg{ transform: translateX(4px); }

/* ===== Video circle ===== */
.naam-sgl-card .meta{ padding:22px 30px 6px; display:flex; justify-content:flex-start; }
.naam-sgl-wrap.rtl .naam-sgl-card .meta{ direction:ltr; }
.naam-vm-area{ display:flex; align-items:center; gap:12px; padding-bottom:8px; margin:0; }
.naam-vm-caption{ font-size:12px; color:#6b7280; }

.naam-vm{
  position:relative; width:84px; aspect-ratio:1/1; border-radius:999px; overflow:hidden; cursor:pointer;
  clip-path:circle(50% at 50% 50%);
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border:1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(17,24,39,.10), inset 0 1px 0 rgba(255,255,255,.80);
}
.naam-vm video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; pointer-events:none; }

/* Progress ring */
.naam-vm .ring{ position:absolute; inset:-3px; width:calc(100% + 6px); height:calc(100% + 6px); transform: rotate(-90deg); z-index:2; }
.naam-vm .ring circle{ fill:none; stroke-width:4; }
.naam-vm .ring .bg{ stroke:rgba(15,18,32,.12); }
.naam-vm .ring .fg{ stroke:var(--accent); stroke-linecap:round; filter: drop-shadow(0 0 4px rgba(122,92,255,.35)); }

.naam-vm .play{ position:absolute; inset:0; display:grid; place-items:center; z-index:3; }
.naam-vm .play::before{
  content:""; border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #ffffff;
  opacity:.95; filter: drop-shadow(0 1px 4px rgba(0,0,0,.2)); transform: translateX(2px);
}

/* ===== Lightbox ===== */
.naam-vm-lightbox{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999;
  background: rgba(15,18,32,.55); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.naam-vm-lightbox.active{ display:flex; }
.naam-vm-dialog{
  position:relative; width:min(92vw, 440px); height:min(92vw, 440px);
  border-radius:999px; background:#ffffff;
  border:1px solid #e5e7eb; box-shadow: 0 40px 120px rgba(17,24,39,.25);
  overflow:hidden;
}
.naam-vm-circle{ position:relative; width:100%; height:100%; border-radius:inherit; overflow:hidden; }
.naam-vm-dialog video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; background:#000; z-index:2; }

/* Lightbox ring */
.lb-ring{ position:absolute; inset:0; transform: rotate(-90deg); pointer-events:none; z-index:3; }
.lb-ring circle{ fill:none; stroke-width:6; }
.lb-ring .bg{ stroke:rgba(15,18,32,.16); }
.lb-ring .fg{ stroke: var(--accent); stroke-linecap:round; filter: drop-shadow(0 0 6px rgba(122,92,255,.35)); }

/* Close */
.naam-vm-close{
  position:absolute; top:8px; inset-inline-start:8px; width:34px; height:34px; border-radius:999px;
  background:#ffffff; color:#0f1220; border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow: 0 6px 16px rgba(17,24,39,.12);
}

/* Clean native controls */
.naam-vm-dialog video::-webkit-media-controls{ display:none !important; }

/* Circular scrubber knob that sits on the track */
.lb-knob{
  position:absolute; width:22px; height:22px;
  appearance:none; -webkit-appearance:none;
  border-radius:999px !important; /* اگر قالب دکمه‌ها را مربع می‌کند، این تضمینی است */
  background:#fff; border:3px solid var(--accent, #ff3e70);
  box-shadow:0 4px 10px rgba(17,24,39,.25);
  pointer-events:auto; z-index:4; display:none;
  transform: translate(-50%, -50%); padding:0; line-height:0; outline:none;
}
.lb-knob.show{ display:block; }
.lb-knob::after{
  content:""; position:absolute; inset:4px;
  border-radius:inherit; background:var(--accent, #ff3e70); opacity:.18;
}
/* === Speed control (روی لایه‌ی blur، بیرون از دایره) === */
.naam-vm-speed{
  position:absolute; top:50px; right:20px; left:auto; z-index:100;
  display:flex; gap:6px; background:rgba(255,255,255,.92);
  border:1px solid #e5e7eb; border-radius:999px; padding:4px 4px;
  box-shadow:0 6px 16px rgba(17,24,39,.12); backdrop-filter: blur(6px);
}
.naam-vm-speed button{
  appearance:none; border:none; background:transparent;
  padding:6px 10px; font-weight:800; font-size:12px; color:#0f1220;
  border-radius:999px; cursor:pointer;
}
.naam-vm-speed button.active{ background:var(--accent, #ff3e70); color:#fff; }
@media (max-width:480px){
  .naam-vm-speed{ top:38px; right:12px; }
}