/* آوای وحی — responsive media players */
:root {
  --mp-bg: #09110f;
  --mp-panel: rgba(18, 30, 26, .92);
  --mp-panel-soft: rgba(255,255,255,.045);
  --mp-border: rgba(231,200,121,.16);
  --mp-gold: #c9a04b;
  --mp-gold-light: #f0d895;
  --mp-text: #f6f3eb;
  --mp-muted: #a5b0a9;
  --mp-radius: 24px;
}
.lesson-page { position:relative; min-height:100vh; overflow:hidden; background:var(--mp-bg); color:var(--mp-text); padding-bottom:70px; }
.lesson-page .container { width:min(1120px, calc(100% - 36px)); margin-inline:auto; }
.lesson-glow { position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(100px); opacity:.16; pointer-events:none; }
.lesson-glow-one { inset-block-start:-230px; inset-inline-end:-130px; background:#c9a04b; }
.lesson-glow-two { inset-block-start:500px; inset-inline-start:-280px; background:#237e62; }
.lesson-hero { position:relative; padding:clamp(34px,7vw,76px) 0 40px; }
.lesson-breadcrumb { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--mp-muted); font-size:13px; margin-bottom:clamp(28px,5vw,52px); }
.lesson-breadcrumb a { color:#d7c18a; text-decoration:none; }
.lesson-header { max-width:850px; }
.lesson-kicker { display:inline-flex; align-items:center; gap:10px; color:var(--mp-gold-light); font-size:13px; margin-bottom:15px; }
.kicker-dot { width:7px; height:7px; border-radius:50%; background:var(--mp-gold); box-shadow:0 0 16px #c9a04b; }
.lesson-header h1 { font-size:clamp(29px,5vw,52px); line-height:1.35; margin:0; font-weight:850; overflow-wrap:anywhere; }
.lesson-description { color:#bdc6c0; margin-top:18px; line-height:2; font-size:15px; }
.media-player-list { display:grid; gap:24px; }
.secure-media-player { min-width:0; position:relative; padding:clamp(12px,2vw,20px); border:1px solid var(--mp-border); border-radius:var(--mp-radius); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),var(--mp-panel); box-shadow:0 24px 70px rgba(0,0,0,.23); backdrop-filter:blur(18px); overflow:hidden; }
.media-topline { display:flex; align-items:center; gap:12px; min-height:38px; padding:0 2px 15px; }
.media-brand { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.media-brand-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:rgba(201,160,75,.12); color:var(--mp-gold-light); font-size:18px; }
.media-kind { color:#d9c58f; font-size:12px; white-space:nowrap; }
.media-title { flex:1; min-width:0; color:var(--mp-text); font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-security { display:flex; align-items:center; gap:6px; color:#91b8a3; font-size:11px; white-space:nowrap; }
.media-security i { color:var(--mp-gold-light); }
.media-stage { position:relative; overflow:hidden; border-radius:18px; background:#030807; border:1px solid rgba(255,255,255,.07); isolation:isolate; }
.video-stage { aspect-ratio:16/9; }
.secure-media-element { display:block; width:100%; height:100%; }
.video-stage .secure-media-element { position:absolute; inset:0; object-fit:contain; background:#030807; }
.media-big-play { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; border:1px solid rgba(240,216,149,.6); color:var(--mp-gold-light); background:rgba(8,20,16,.82); box-shadow:0 0 45px rgba(201,160,75,.16); font-size:34px; cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(10px); }
.media-big-play:hover { background:rgba(28,66,48,.94); }
.secure-media-player.is-playing .media-big-play { opacity:0; pointer-events:none; }
.video-tap-hint { position:absolute; bottom:18px; inset-inline-start:18px; color:#fff; font-size:12px; opacity:.65; pointer-events:none; }
.audio-stage { min-height:230px; padding:clamp(20px,4vw,38px); display:flex; align-items:center; background:radial-gradient(ellipse at 18% 15%,rgba(201,160,75,.16),transparent 42%),radial-gradient(ellipse at 85% 100%,rgba(25,128,93,.18),transparent 45%),linear-gradient(135deg,#101e19,#08110e 75%); }
.audio-stage audio { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.audio-visual { width:100%; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px 22px; }
.audio-orb { position:relative; width:clamp(72px,12vw,110px); aspect-ratio:1; display:grid; place-items:center; border-radius:30%; color:#f0d895; font-size:clamp(28px,5vw,44px); background:linear-gradient(145deg,rgba(240,216,149,.18),rgba(201,160,75,.035)); border:1px solid rgba(240,216,149,.3); box-shadow:inset 0 0 30px rgba(201,160,75,.08),0 0 40px rgba(201,160,75,.08); }
.orb-ring { position:absolute; inset:-7px; border:1px solid rgba(240,216,149,.16); border-radius:34%; transform:rotate(12deg); }
.is-playing .audio-orb { animation:orbPulse 2.2s ease-in-out infinite; }
.audio-art-copy { min-width:0; display:flex; flex-direction:column; gap:7px; }
.audio-eyebrow { color:#d4b96f; letter-spacing:.12em; font-size:10px; direction:ltr; text-align:right; }
.audio-art-copy strong { font-size:clamp(17px,3vw,26px); line-height:1.5; overflow-wrap:anywhere; }
.audio-art-copy small { color:#9eada4; font-size:12px; line-height:1.8; }
.audio-equalizer { grid-column:1/-1; height:50px; display:flex; align-items:center; justify-content:center; gap:4px; overflow:hidden; opacity:.9; }
.audio-equalizer span { flex:1; max-width:8px; height:var(--bar-height,35%); min-height:4px; border-radius:10px; background:linear-gradient(to top,#8d6b2a,#f0d895); opacity:.62; transform-origin:center; }
.is-playing .audio-equalizer span { animation:equalize .85s ease-in-out infinite alternate; animation-delay:var(--bar-delay,0s); }
@keyframes equalize { from { transform:scaleY(.35); opacity:.4; } to { transform:scaleY(1); opacity:.95; } }
@keyframes orbPulse { 0%,100% { box-shadow:inset 0 0 30px rgba(201,160,75,.08),0 0 25px rgba(201,160,75,.08); } 50% { box-shadow:inset 0 0 40px rgba(201,160,75,.16),0 0 45px rgba(201,160,75,.19); } }
.media-controls { padding:15px 2px 0; }
.media-progress-area { display:flex; align-items:center; gap:11px; direction:ltr; }
.media-current,.media-duration { min-width:42px; color:#b9c2bc; font-size:11px; text-align:center; direction:ltr; font-variant-numeric:tabular-nums; }
.media-progress { --progress:0%; appearance:none; -webkit-appearance:none; height:5px; min-width:0; flex:1; border-radius:20px; cursor:pointer; background:linear-gradient(to right,var(--mp-gold) var(--progress),rgba(255,255,255,.15) var(--progress)); touch-action:pan-y; }
.media-progress::-webkit-slider-thumb { appearance:none; width:13px; height:13px; border-radius:50%; background:var(--mp-gold-light); border:2px solid #fff; box-shadow:0 0 0 4px rgba(201,160,75,.15); }
.media-progress::-moz-range-thumb { width:11px; height:11px; border-radius:50%; background:var(--mp-gold-light); border:2px solid #fff; }
.media-controls-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; }
.media-control-group { display:flex; align-items:center; gap:8px; min-width:0; }
.media-control-group button,.image-tools button { min-width:38px; height:38px; border:1px solid rgba(255,255,255,.1); border-radius:12px; display:inline-flex; justify-content:center; align-items:center; gap:4px; color:#e9eee9; background:rgba(255,255,255,.045); cursor:pointer; transition:background .18s,border-color .18s,transform .18s; }
.media-control-group button:hover,.image-tools button:hover { background:rgba(201,160,75,.13); border-color:rgba(240,216,149,.35); }
.media-control-group button:active,.image-tools button:active { transform:scale(.96); }
.media-control-group .media-play-btn { width:46px; height:46px; border-radius:15px; background:var(--mp-gold); border-color:var(--mp-gold); color:#11170f; font-size:23px; }
.media-back-btn,.media-forward-btn { font-size:15px; }
.media-back-btn span,.media-forward-btn span { font-size:10px; }
.media-ab-btn { min-width:54px!important; padding-inline:8px; flex-direction:column; gap:0!important; }
.ab-label { font-size:12px; font-weight:800; }
.ab-time { max-width:120px; color:#e5cb80; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ab-a-active .media-ab-btn,.ab-b-active .media-ab-btn { border-color:var(--mp-gold); background:rgba(201,160,75,.15); }
.pitch-control { display:flex; align-items:center; gap:5px; padding:3px; border:1px solid rgba(255,255,255,.1); border-radius:13px; background:rgba(255,255,255,.035); }
.pitch-control button { min-width:29px!important; width:29px; height:29px!important; border-radius:9px!important; font-size:17px; }
.pitch-value { min-width:25px; text-align:center; font-size:12px; color:var(--mp-gold-light); direction:ltr; font-variant-numeric:tabular-nums; }
.pitch-control small { color:#9ba79f; font-size:9px; white-space:nowrap; padding-inline:3px; }
.media-fullscreen-btn { min-width:38px!important; }
.pitch-note { color:#7f9086; font-size:10px; margin:10px 0 0; line-height:1.7; }
.media-error { color:#ffd3cb; background:rgba(150,45,35,.18); border:1px solid rgba(255,100,80,.22); border-radius:10px; padding:9px 12px; font-size:12px; }
.image-stage { position:relative; min-height:260px; height:min(65vh,680px); overflow:hidden; display:grid; place-items:center; border-radius:18px; background:radial-gradient(ellipse at center,#1a2822,#070d0b 72%); border:1px solid rgba(255,255,255,.08); touch-action:pan-y; }
.secure-image-element { position:relative; z-index:1; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transform-origin:center; user-select:none; -webkit-user-drag:none; cursor:zoom-in; }
.secure-image-element.is-zoomed { cursor:grab; touch-action:none; }
.secure-image-element.is-dragging { cursor:grabbing; }
.image-empty-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#a5b0a9; font-size:13px; }
.image-empty-state i { font-size:42px; color:#d4b96f; }
.image-stage.image-loaded .image-empty-state { display:none; }
.image-tools { position:absolute; z-index:3; inset-inline-start:12px; inset-block-end:12px; display:flex; gap:6px; padding:6px; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:rgba(5,12,9,.78); backdrop-filter:blur(12px); }
.image-tools button { min-width:34px; height:34px; border-radius:10px; }
.image-tools [data-zoom-reset] { padding-inline:10px; font-size:11px; }
.image-hint { position:absolute; inset-inline-end:14px; inset-block-end:19px; color:#a5b0a9; font-size:10px; pointer-events:none; }
.empty-media,.lesson-locked-card { text-align:center; padding:45px 20px; border:1px solid var(--mp-border); border-radius:22px; background:var(--mp-panel); color:#c1cbc4; }
.empty-media i { font-size:32px; color:var(--mp-gold-light); }
.lesson-locked-card h2 { color:#fff; }
.locked-icon { font-size:38px; color:var(--mp-gold-light); }
.locked-label { color:#d4b96f; font-size:12px; }
.locked-purchase-btn { display:inline-block; margin-top:10px; padding:11px 20px; border-radius:12px; color:#15180f; background:var(--mp-gold-light); text-decoration:none; }
.secure-media-player button:focus-visible,.media-progress:focus-visible,.image-stage:focus-visible { outline:2px solid var(--mp-gold-light); outline-offset:3px; }
@media (max-width:700px) {
  .lesson-page .container { width:calc(100% - 24px); }
  .lesson-hero { padding-top:28px; }
  .lesson-breadcrumb { font-size:11px; gap:7px; margin-bottom:28px; }
  .lesson-description { font-size:13px; }
  .secure-media-player { padding:11px; border-radius:19px; }
  .media-topline { display:grid; grid-template-columns:1fr auto; gap:9px; padding-bottom:11px; }
  .media-title { grid-row:2; grid-column:1/-1; white-space:normal; line-height:1.6; }
  .media-security { justify-self:end; font-size:10px; }
  .media-security span { display:none; }
  .media-stage { border-radius:14px; }
  .audio-stage { min-height:215px; padding:20px 15px; }
  .audio-visual { gap:13px; }
  .audio-orb { width:70px; border-radius:23px; }
  .audio-art-copy strong { font-size:16px; }
  .audio-art-copy small { font-size:10px; }
  .audio-equalizer { height:40px; gap:2px; }
  .media-controls-bottom { flex-wrap:wrap; align-items:flex-start; }
  .main-controls { flex:1; justify-content:flex-start; gap:5px; }
  .secondary-controls { margin-inline-start:auto; gap:6px; }
  .media-control-group button { min-width:34px; height:35px; border-radius:10px; }
  .media-control-group .media-play-btn { min-width:42px; width:42px; height:42px; }
  .media-ab-btn { min-width:48px!important; }
  .ab-time { max-width:72px; }
  .pitch-control { gap:2px; }
  .pitch-control small { font-size:8px; }
  .pitch-control button { min-width:27px!important; width:27px; height:28px!important; }
  .media-current,.media-duration { min-width:36px; font-size:10px; }
  .image-stage { height:55vh; min-height:240px; }
  .image-tools { inset-inline-start:8px; inset-block-end:8px; gap:4px; padding:5px; }
  .image-tools button { min-width:31px; height:32px; }
  .image-hint { inset-inline-end:9px; inset-block-end:51px; font-size:9px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}