feat(product-page): add AI-powered badge and informative subtitle to scientific media section

frontend/application/components/ProductPage.tsx

@@ -781,13 +781,21 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
             {/* Multimedia & Scientific Documentation (Video, Podcast & PDF Catalog) */}
             {(product.videoUrl || product.podcastUrl || product.pdfUrl) && (
               <section className="bg-white border border-medical-gray-200 rounded-[2.5rem] p-8 md:p-10 shadow-md space-y-8 font-vazir" dir="rtl">
-                <div className="flex items-center gap-2.5 sm:gap-4 border-b border-medical-gray-100 pb-4 sm:pb-6">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-medical-gray-100 pb-4 sm:pb-6">
+                  <div className="flex items-center gap-2.5 sm:gap-4">
                     <div className="w-9 h-9 sm:w-12 sm:h-12 bg-canina-blue text-white rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg shrink-0">
                       <Sparkles className="w-4 h-4 sm:w-6 sm:h-6" />
                     </div>
                     <div>
+                      <div className="flex items-center gap-2 flex-wrap">
                         <h3 className="text-lg sm:text-2xl md:text-3xl font-black text-medical-gray-900 italic">رسانه و مستندات تخصصی محصول</h3>
-                    <p className="text-xs text-medical-gray-400 font-bold mt-0.5 sm:mt-1">ویدیو آموزشی، پادکست تحلیل علمی و دفترچه کاتالوگ کارخانه Canina</p>
+                        <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] sm:text-xs font-black bg-purple-100 border border-purple-200 text-purple-700 shadow-2xs">
+                          <Sparkles className="w-3 h-3 text-purple-600 animate-pulse" />
+                          <span>تحلیل هوشمند (AI-Powered)</span>
+                        </span>
+                      </div>
+                      <p className="text-xs text-medical-gray-400 font-bold mt-0.5 sm:mt-1">ویدیو آموزشی، پادکست تحلیل علمی تولیدشده با هوش مصنوعی و دفترچه کاتالوگ کارخانه Canina</p>
+                    </div>
                   </div>
                 </div>
 

frontend/application/components/VideoModalPlayer.tsx

@@ -354,8 +354,7 @@ export default function VideoModalPlayer({ isOpen, onClose, video }: VideoModalP
 
                 {/* Top Header Overlay */}
                 <div
-                  className={`absolute top-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-b from-black/80 via-black/40 to-transparent transition-opacity duration-300 z-20 flex items-center justify-between ${
+                  className={`absolute top-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-b from-black/80 via-black/40 to-transparent transition-opacity duration-300 z-20 flex items-center justify-between ${showControls ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
-                    showControls ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
                     }`}
                 >
                   <div className="flex items-center gap-3 text-right">
@@ -407,8 +406,7 @@ export default function VideoModalPlayer({ isOpen, onClose, video }: VideoModalP
 
                 {/* Bottom Custom Controls Bar */}
                 <div
-                  className={`absolute bottom-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-t from-black/90 via-black/60 to-transparent transition-opacity duration-300 z-20 space-y-3 ${
+                  className={`absolute bottom-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-t from-black/90 via-black/60 to-transparent transition-opacity duration-300 z-20 space-y-3 ${showControls ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
-                    showControls ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
                     }`}
                   onClick={(e) => e.stopPropagation()}
                 >
@@ -453,9 +451,9 @@ export default function VideoModalPlayer({ isOpen, onClose, video }: VideoModalP
                   </div>
 
                   {/* Action Buttons Row */}
-                <div className="flex items-center justify-between">
+                  <div className="flex items-center justify-between" dir="ltr">
                     {/* Left Controls (Playback & Jumps with - on Left and + on Right in RTL) */}
-                  <div className="flex items-center gap-2 sm:gap-3" dir="rtl">
+                    <div className="flex items-center gap-2 sm:gap-3" dir="ltr">
                       {/* Play/Pause */}
                       <button
                         type="button"
@@ -542,8 +540,7 @@ export default function VideoModalPlayer({ isOpen, onClose, video }: VideoModalP
                                 key={rate}
                                 type="button"
                                 onClick={() => handleRateChange(rate)}
-                              className={`px-3 py-1.5 text-xs font-mono font-bold rounded-xl text-center transition-colors cursor-pointer ${
+                                className={`px-3 py-1.5 text-xs font-mono font-bold rounded-xl text-center transition-colors cursor-pointer ${playbackRate === rate
-                                playbackRate === rate
                                     ? "bg-canina-blue text-white"
                                     : "text-white/70 hover:bg-white/10 hover:text-white"
                                   }`}