/* ===================== استایل سکشن ویدیوی تبلیغاتی و مودال پخش ===================== عمداً همین‌جا تو نگه داشته شده (نه فایل جدا، نه داخل dynamic-view) که هیچ‌وقت با عوض شدن محتوای صفحه (پنل ادمین، بانک سوال و...) پاک نشه */ /* ===== سکشن فیلم تبلیغاتی: پرتالِ فیزیک‌لند ===== */ .promo-portal-section { position: relative; overflow: hidden; max-width: 1200px; margin: 10px auto 70px auto; margin-top: -40px; padding: 40px 40px; border-radius: 28px; background: radial-gradient( circle at 80% 20%, rgba(0, 114, 255, 0.16), transparent 55% ), linear-gradient(135deg, #16213e 0%, #0f3460 55%, #241442 100%); border: 1px solid rgba(212, 175, 55, 0.28); box-shadow: 0 20px 50px rgba(10, 5, 18, 0.35); } .promo-portal-bg { position: absolute; inset: 0; pointer-events: none; } .promo-star { position: absolute; width: 3px; height: 3px; background: #ffe9a8; border-radius: 50%; opacity: 0.7; box-shadow: 0 0 6px 1px rgba(255, 233, 168, 0.8); animation: promoTwinkle 3.2s ease-in-out infinite; } .promo-star.s1 { top: 15%; left: 12%; animation-delay: 0s; } .promo-star.s2 { top: 65%; left: 8%; animation-delay: 0.6s; } .promo-star.s3 { top: 30%; left: 45%; animation-delay: 1.2s; } .promo-star.s4 { top: 80%; left: 60%; animation-delay: 1.8s; } .promo-star.s5 { top: 20%; left: 88%; animation-delay: 0.9s; } .promo-star.s6 { top: 55%; left: 92%; animation-delay: 1.5s; } @keyframes promoTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1.3); } } .promo-portal-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 50px; flex-wrap: wrap-reverse; } .promo-portal-text { flex: 1 1 380px; min-width: 300px; } .promo-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #ffb703; font-size: 12.5px; font-weight: bold; letter-spacing: 0.3px; background: rgba(255, 183, 3, 0.1); border: 1px solid rgba(255, 183, 3, 0.3); padding: 6px 14px; border-radius: 50px; margin-bottom: 18px; } .promo-portal-text h2 { font-family: "Vazirmatn", Tahoma, Arial, sans-serif; color: #fff; font-size: 30px; line-height: 1.5; margin: 0 0 16px 0; } .promo-portal-text p { color: #c7cbe0; font-size: 15px; line-height: 2; margin: 0 0 28px 0; max-width: 480px; } .promo-play-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: linear-gradient(135deg, #ffb703, #fb8500); color: #241442; border: none; border-radius: 50px; font-weight: bold; font-size: 15px; cursor: pointer; box-shadow: 0 8px 22px rgba(255, 183, 3, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: "Vazirmatn", Tahoma, Arial, sans-serif; } .promo-play-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 26px rgba(255, 183, 3, 0.5); } .promo-play-btn i { font-size: 13px; } .promo-portal-visual { flex: 0 0 auto; display: flex; justify-content: center; } .promo-orbit-frame { position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .promo-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(212, 175, 55, 0.35); } .promo-ring-outer { inset: -22px; animation: promoSpin 16s linear infinite; } .promo-ring-mid { inset: 6px; border-color: rgba(0, 198, 255, 0.28); animation: promoSpinReverse 11s linear infinite; } .promo-ring-inner { inset: 34px; border-style: solid; border-color: rgba(255, 255, 255, 0.08); } .promo-electron { position: absolute; width: 11px; height: 11px; border-radius: 50%; top: -5.5px; left: calc(50% - 5.5px); } .promo-electron-blue { background: #00c6ff; box-shadow: 0 0 12px 2px rgba(0, 198, 255, 0.85); } .promo-electron-gold { background: #ffb703; box-shadow: 0 0 12px 2px rgba(255, 183, 3, 0.85); } @keyframes promoSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes promoSpinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } .promo-core { position: relative; width: 190px; height: 190px; border-radius: 50%; overflow: hidden; border: 3px solid #ffb703; box-shadow: 0 0 0 6px rgba(255, 183, 3, 0.08), 0 0 35px rgba(255, 183, 3, 0.45); animation: promoCoreGlow 2.6s ease-in-out infinite; } .promo-core img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.65) saturate(1.1); } @keyframes promoCoreGlow { 0%, 100% { box-shadow: 0 0 0 6px rgba(255, 183, 3, 0.08), 0 0 30px rgba(255, 183, 3, 0.4); } 50% { box-shadow: 0 0 0 9px rgba(255, 183, 3, 0.14), 0 0 45px rgba(255, 183, 3, 0.6); } } .promo-core-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 5, 18, 0.2); transition: background 0.2s ease; } .promo-orbit-frame:hover .promo-core-overlay { background: rgba(10, 5, 18, 0.05); } .promo-play-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(4px); border: 1.5px solid rgba(255, 255, 255, 0.55); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; transition: transform 0.2s ease; } .promo-play-icon i { margin-right: -3px; /* تنظیم بصری مثلث پخش وسط دایره */ } .promo-orbit-frame:hover .promo-play-icon { transform: scale(1.1); background: rgba(255, 183, 3, 0.85); color: #241442; } @media (max-width: 640px) { .promo-portal-section { padding: 40px 20px; border-radius: 20px; } .promo-portal-inner { justify-content: center; text-align: center; gap: 35px; } .promo-portal-text p { margin-right: auto; margin-left: auto; } .promo-orbit-frame { width: 220px; height: 220px; } .promo-core { width: 140px; height: 140px; } } @media (prefers-reduced-motion: reduce) { .promo-ring, .promo-core, .promo-star { animation: none !important; } } /* دکمه‌ی «ویرایش این بخش» که فقط برای ادمین نمایش داده می‌شه */ .promo-admin-edit-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 183, 3, 0.45); color: #ffb703; border-radius: 50px; font-size: 12px; font-weight: bold; cursor: pointer; backdrop-filter: blur(4px); font-family: "Vazirmatn", Tahoma, Arial, sans-serif; transition: background 0.15s ease, color 0.15s ease; } .promo-admin-edit-btn:hover { background: #ffb703; color: #241442; } /* ===== مودال پخش ویدیوی تبلیغاتی ===== */ .promo-video-modal { display: none; position: fixed; inset: 0; z-index: 5000; align-items: center; justify-content: center; } .promo-video-modal.active { display: flex; } .promo-video-backdrop { position: absolute; inset: 0; background: rgba(5, 3, 10, 0.88); } .promo-video-box { position: relative; z-index: 1; width: min(920px, 92vw); background: #000; border-radius: 16px; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.4); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .promo-video-box video { width: 100%; max-height: 80vh; display: block; background: #000; } .promo-video-close { position: absolute; top: -42px; left: 0; color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); width: 34px; height: 34px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; }