/* ON AIR TV — SECTION 04 · The On Air App (معتمد مبدئياً 10/11) · الخط مؤقت IBM Plex Sans Arabic */
/* ===== ON AIR TV — SECTION 04 · The On Air App ===== */
.oaa{position:relative;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:#F4D6B0;padding:56px 0 64px;overflow:hidden}
.oaa *{box-sizing:border-box}
.oaa-wrap{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;gap:30px;align-items:center}
/* النص */
.oaa-copy{text-align:center}
.oaa-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.16em;direction:ltr;color:#5BC0DE;
  background:rgba(28,37,65,.55);border:1px solid rgba(91,192,222,.35)}
.oaa-badge i{width:6px;height:6px;border-radius:50%;background:#5BC0DE;box-shadow:0 0 8px #5BC0DE}
.oaa-h{margin:0;font-size:30px;line-height:1.3;font-weight:700;color:#F4D6B0}
.oaa-sub{margin:12px auto 0;max-width:30em;font-size:15px;line-height:1.8;color:rgba(244,214,176,.72)}

/* المسرح: الشاشة + قائمة المعلق */
.oaa-stage{position:relative;padding:2% 4% 36%;perspective:1800px}
.oaa-glow{position:absolute;left:8%;right:8%;bottom:4%;height:30%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(91,192,222,.22),rgba(58,80,107,.12) 45%,transparent 72%);filter:blur(14px);pointer-events:none}
.oaa-tv{position:relative;aspect-ratio:16/9;border-radius:12px;padding:1.1%;
  background:linear-gradient(180deg,#1C2541,#05070D 60%);
  box-shadow:0 0 0 1px rgba(58,80,107,.65),inset 0 1px 0 rgba(244,214,176,.12),0 40px 70px -30px rgba(0,0,0,.95),0 0 90px -10px rgba(91,192,222,.18);
  transform:rotateY(-6deg) rotateX(2deg);transform-style:preserve-3d}
html[dir=ltr] .oaa-tv{transform:rotateY(6deg) rotateX(2deg)}
.oaa-scr{position:relative;width:100%;height:100%;border-radius:7px;overflow:hidden;background:#05070D}
.oaa-scr img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.05)}
.oaa-scr::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%),linear-gradient(180deg,rgba(5,7,13,0) 55%,rgba(5,7,13,.55))}
/* ضوء على حافة الشاشة */
.oaa-tv::before{content:"";position:absolute;inset:-1px;border-radius:13px;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(91,192,222,.7),rgba(91,192,222,0) 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* قائمة المعلق — قالب مؤقت (يتبدل بصورة التطبيق الحقيقية) */
.oaa-panel{position:absolute;bottom:0;inset-inline-end:1%;width:58%;padding:12px 10px 10px;border-radius:16px;
  background:linear-gradient(180deg,rgba(28,37,65,.92),rgba(11,19,43,.94));border:1px solid rgba(91,192,222,.35);
  box-shadow:0 30px 50px -20px rgba(0,0,0,.95),0 0 40px rgba(91,192,222,.18);backdrop-filter:blur(8px)}
.oaa-panel::before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,transparent 8%,rgba(91,192,222,.8) 50%,transparent 92%)}
.op-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.op-head svg{width:18px;height:18px;color:#5BC0DE;flex:0 0 auto}
.sk{display:block;height:8px;border-radius:6px;background:rgba(244,214,176,.22)}
.op-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:11px;margin-top:6px;background:rgba(5,7,13,.35);border:1px solid transparent}
.op-row .av{width:22px;height:22px;border-radius:50%;background:rgba(58,80,107,.7);flex:0 0 auto}
.op-row .rd{width:14px;height:14px;border-radius:50%;border:2px solid rgba(244,214,176,.35);margin-inline-start:auto;flex:0 0 auto}
.op-row.on{background:rgba(91,192,222,.12);border-color:rgba(91,192,222,.5)}
.op-row.on .rd{border-color:#5BC0DE;background:radial-gradient(circle,#5BC0DE 0 3px,transparent 4px)}
.op-row.on .eq{display:flex;gap:2px;align-items:flex-end;height:12px}
.op-row .eq{display:none}
.op-row.on .eq i{width:2px;border-radius:2px;background:#5BC0DE}
.op-row.on .eq i:nth-child(1){height:6px}.op-row.on .eq i:nth-child(2){height:12px}.op-row.on .eq i:nth-child(3){height:8px}
.tmp{position:absolute;top:-11px;inset-inline-start:12px;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:500;color:rgba(244,214,176,.75);background:#0B132B;border:1px dashed rgba(244,214,176,.4)}
.tmp-scr{position:absolute;top:10px;inset-inline-start:10px;z-index:2;padding:2px 9px;border-radius:999px;font-size:10.5px;color:rgba(244,214,176,.8);background:rgba(5,7,13,.6);border:1px dashed rgba(244,214,176,.4)}

/* حركة دخول مرة وحدة */
/* الحالة الأساسية (بدون جافاسكربت) = نفس الشكل النهائي المعتمد */
.oaa .rv{opacity:1;transform:none}
/* الإخفاء قبل الحركة فقط لما تضيف الجافاسكربت كلاس anim */
.oaa.anim .rv{opacity:0;transform:translateY(18px)}
.oaa.anim.in .rv{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.oaa.anim.in .oaa-panel.rv{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){.oaa.anim .rv{opacity:1;transform:none}.oaa.anim.in .rv{transition:none}}

@media (min-width:1024px){
  .oaa{padding:90px 0 96px}
  .oaa-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:40px}
  .oaa-copy{text-align:start}
  .oaa-h{font-size:46px}
  .oaa-sub{margin-inline:0;font-size:18px}
  .oaa-badge{font-size:12.5px}
  .oaa-stage{padding:2% 2% 20%}
  .oaa-panel{width:38%;inset-inline-end:-3%;bottom:0;padding:18px 18px 14px}
  .op-row{padding:11px 12px}.op-row .av{width:30px;height:30px}
}

.op-t{font-size:13px;font-weight:700;color:#F4D6B0}
.op-n{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:500;color:rgba(244,214,176,.78)}
html[lang=en] .op-n{font-size:11.5px}
.op-row .rd{margin-inline-start:0!important}
.op-row.on .op-n{color:#F4D6B0;font-weight:700}
.op-row .av{display:grid;place-items:center;color:rgba(244,214,176,.7)}
.op-row .av svg{width:62%;height:62%}
.op-row.on .av{background:rgba(91,192,222,.25);color:#5BC0DE}
@media (min-width:1024px){.op-t{font-size:15px}.op-n{font-size:14px}}