BanTV Production \u2014 \u0412\u0438\u0434\u0435\u043e<\/title>\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/onest@5.2.5\/400.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/onest@5.2.5\/500.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/onest@5.2.5\/600.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/onest@5.2.5\/700.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/onest@5.2.5\/800.css\" rel=\"stylesheet\">\r\n<style>\r\n\/* =====================================================\r\n \u0421\u041e\u0412\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0419 \u041c\u0418\u041d\u0418\u041c\u0410\u041b\u0418\u0417\u041c (\u043a\u0430\u043a \u0433\u043b\u0430\u0432\u043d\u0430\u044f) + \u0426\u0412\u0415\u0422\u0410 \u0412\u0418\u0414\u0415\u041e-\u0421\u0422\u0420\u0410\u041d\u0418\u0426\u042b\r\n \u041f\u0430\u043b\u0438\u0442\u0440\u0430: #7b5eff \/ #a78bfa \/ #00d4ff \u043d\u0430 #0f0c29\u2013#24243e\r\n + \u043f\u043e\u043b\u043d\u0430\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f \u043f\u043e\u0434 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435\r\n + \u0417\u0410\u0429\u0418\u0422\u0410 \u0426\u0412\u0415\u0422\u041e\u0412 \u0422\u0415\u041a\u0421\u0422\u0410 \u041e\u0422 \u0422\u0415\u041c \u0418 \u0412\u041d\u0415\u0428\u041d\u0418\u0425 \u0424\u0410\u041a\u0422\u041e\u0420\u041e\u0412\r\n===================================================== *\/\r\n:root {\r\n --bg-deep: #0b0918;\r\n --bg-0: #0f0c29;\r\n --bg-1: #1a1740;\r\n --bg-2: #24243e;\r\n --accent: #7b5eff;\r\n --accent-soft: #a78bfa;\r\n --accent-bright: #c4b5fd;\r\n --cyan: #00d4ff;\r\n --text: #f0f0ff;\r\n --text-2: #c0c0ff;\r\n --text-3: #8a86b8;\r\n --border: rgba(123, 94, 255, 0.16);\r\n --border-hover: rgba(123, 94, 255, 0.55);\r\n --glow: 0 0 20px rgba(123, 94, 255, 0.25);\r\n --glow-strong: 0 0 32px rgba(123, 94, 255, 0.45);\r\n --radius: 18px;\r\n --radius-sm: 12px;\r\n --radius-xs: 8px;\r\n --container: 1240px;\r\n --ease: cubic-bezier(0.22, 1, 0.36, 1);\r\n --transition: 0.45s var(--ease);\r\n --safe-top: env(safe-area-inset-top, 0px);\r\n --safe-bottom: env(safe-area-inset-bottom, 0px);\r\n\r\n \/* \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0422\u041e\u041b\u042c\u041a\u041e \u0432 \u0442\u0451\u043c\u043d\u043e\u0439 \u0441\u0445\u0435\u043c\u0435 \u2014\r\n \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430 *\/\r\n color-scheme: dark;\r\n color-scheme: only dark;\r\n}\r\n\r\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\r\n\r\n\/* =====================================================\r\n \u0417\u0410\u0429\u0418\u0422\u0410 \u0426\u0412\u0415\u0422\u041e\u0412: \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0445\u0435\u043c\u044b \u041e\u0421 \/ \u0432\u044b\u0441\u043e\u043a\u0438\u0439\r\n \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442 \/ \u0430\u0432\u0442\u043e-\u0442\u0435\u043c\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0446\u0432\u0435\u0442\u0430\r\n===================================================== *\/\r\nhtml { color-scheme: dark; color-scheme: only dark; }\r\nbody, body *, body *::before, body *::after { forced-color-adjust: none; }\r\n\r\nhtml { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\r\n\r\nbody {\r\n font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;\r\n background: linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);\r\n background-attachment: fixed;\r\n color: #f0f0ff !important;\r\n min-height: 100dvh;\r\n overflow-x: hidden;\r\n line-height: 1.6;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n\/* === \u0421\u0422\u0410\u0422\u0418\u0427\u041d\u042b\u0415 \u0410\u041c\u0411\u0418\u0415\u041d\u0422\u041d\u042b\u0415 \u0413\u0420\u0410\u0414\u0418\u0415\u041d\u0422\u042b (\u0431\u0435\u0437 \u043b\u0435\u0442\u0430\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u0438\u0446) === *\/\r\n.ambient {\r\n position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;\r\n background:\r\n radial-gradient(ellipse 60% 45% at 15% 0%, rgba(123,94,255,0.10), transparent 65%),\r\n radial-gradient(ellipse 70% 50% at 85% 100%, rgba(0,212,255,0.07), transparent 65%);\r\n}\r\n\r\n\/* === NOISE OVERLAY ~3% === *\/\r\n.noise {\r\n position: fixed; inset: 0; pointer-events: none; z-index: 3000; opacity: 0.03;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n background-size: 200px 200px;\r\n}\r\n\r\n::-webkit-scrollbar { width: 6px; }\r\n::-webkit-scrollbar-track { background: var(--bg-deep); }\r\n::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--cyan)); border-radius: 10px; }\r\n\r\n*:focus-visible { outline: 2px solid rgba(123,94,255,.8); outline-offset: 3px; border-radius: 6px; }\r\n\r\n.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); position: relative; z-index: 2; }\r\n\r\n\/* === HERO === *\/\r\n.hero { padding: clamp(48px, 8vw, 100px) 0 clamp(32px, 5vw, 48px); text-align: center; position: relative; }\r\n\r\n.hero__kicker {\r\n display: inline-block; font-size: 0.8rem; font-weight: 700;\r\n color: #a78bfa !important;\r\n letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px;\r\n}\r\n\r\n.hero__title {\r\n font-size: clamp(2.1rem, 7.5vw, 4rem); font-weight: 800;\r\n letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 16px;\r\n text-wrap: balance;\r\n color: #f0f0ff !important;\r\n}\r\n.hero__title-accent {\r\n background: linear-gradient(90deg, #a78bfa, #7b5eff, #00d4ff) !important;\r\n -webkit-background-clip: text !important;\r\n background-clip: text !important;\r\n -webkit-text-fill-color: transparent !important;\r\n color: transparent !important;\r\n}\r\n\r\n.hero__subtitle {\r\n font-size: clamp(0.95rem, 2.4vw, 1.15rem);\r\n color: #c0c0ff !important;\r\n max-width: 620px; margin: 0 auto clamp(24px, 4vw, 36px); line-height: 1.65;\r\n padding: 0 4px;\r\n}\r\n\r\n.hero__hint { margin-top: 12px; font-size: 0.82rem; color: #8a86b8 !important; }\r\n.hero__hint kbd {\r\n padding: 2px 7px; border: 1px solid var(--border); border-radius: 6px;\r\n background: rgba(255,255,255,0.03); font-family: inherit; font-size: 0.75rem;\r\n color: #c0c0ff !important;\r\n}\r\n\r\n\/* === SEARCH === *\/\r\n.search-wrap { max-width: 560px; margin: 0 auto; position: relative; padding: 0 4px; }\r\n.search-wrap svg {\r\n position: absolute; left: 22px; top: 50%; transform: translateY(-50%);\r\n width: 18px; height: 18px; stroke: #8a86b8; pointer-events: none;\r\n transition: stroke 0.3s ease;\r\n}\r\n.search-wrap:focus-within svg { stroke: #a78bfa; }\r\n\r\n.search-input {\r\n width: 100%; padding: 15px 48px;\r\n background: rgba(255,255,255,0.03);\r\n border: 1px solid var(--border); border-radius: 14px;\r\n color: #f0f0ff !important;\r\n font-family: inherit; font-size: 16px; \/* 16px \u2014 iOS \u043d\u0435 \u0437\u0443\u043c\u0438\u0442 \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435 *\/\r\n transition: all var(--transition);\r\n color-scheme: dark;\r\n}\r\n.search-input::placeholder { color: #8a86b8 !important; -webkit-text-fill-color: #8a86b8 !important; }\r\n.search-input:focus {\r\n outline: none; border-color: var(--border-hover);\r\n box-shadow: var(--glow); background: rgba(123,94,255,0.06);\r\n}\r\n\r\n.search-clear {\r\n position: absolute; right: 14px; top: 50%; transform: translateY(-50%);\r\n width: 32px; height: 32px; border: none; border-radius: 8px;\r\n background: rgba(123,94,255,0.12); color: #a78bfa !important;\r\n cursor: pointer; font-size: 14px; display: none;\r\n align-items: center; justify-content: center; transition: all 0.3s ease;\r\n}\r\n.search-clear.visible { display: flex; }\r\n.search-clear:hover { background: var(--accent); color: #ffffff !important; }\r\n\r\n\/* === GRID === *\/\r\n.grid-section { padding: 20px 0 clamp(56px, 8vw, 80px); }\r\n\r\n.video-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));\r\n gap: 20px;\r\n}\r\n\r\n\/* === \u0415\u0414\u0418\u041d\u0410\u042f \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0410 === *\/\r\n.vcard {\r\n display: flex; flex-direction: column;\r\n background: rgba(255,255,255,0.02);\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n cursor: pointer;\r\n position: relative;\r\n transition: all var(--transition);\r\n}\r\n\r\n.vcard::before {\r\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\r\n background: linear-gradient(90deg, transparent, var(--accent-soft), var(--cyan), transparent);\r\n transform: scaleX(0); transform-origin: left;\r\n transition: transform 0.6s var(--ease); z-index: 3;\r\n}\r\n\r\n.vcard:hover {\r\n border-color: var(--border-hover);\r\n box-shadow: var(--glow);\r\n transform: translateY(-6px);\r\n}\r\n.vcard:hover::before { transform: scaleX(1); }\r\n.vcard:active { transform: translateY(-2px) scale(0.99); }\r\n\r\n.vcard.hidden { display: none; }\r\n\r\n\/* Thumbnail \u2014 \u0435\u0434\u0438\u043d\u044b\u0439 CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0432 \u043f\u0430\u043b\u0438\u0442\u0440\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b *\/\r\n.vcard__thumb {\r\n position: relative; aspect-ratio: 16 \/ 9; overflow: hidden;\r\n background:\r\n radial-gradient(circle at 72% 18%, rgba(123,94,255,0.22), transparent 55%),\r\n radial-gradient(circle at 18% 85%, rgba(0,212,255,0.12), transparent 55%),\r\n linear-gradient(135deg, var(--bg-1) 0%, var(--bg-0) 100%);\r\n}\r\n\r\n.vcard__thumb::before {\r\n content: ''; position: absolute; inset: 0;\r\n background: repeating-linear-gradient(115deg, rgba(167,139,250,0.03) 0 1px, transparent 1px 14px);\r\n transition: transform 0.6s var(--ease);\r\n}\r\n.vcard:hover .vcard__thumb::before { transform: translateX(10px); }\r\n\r\n.vcard__thumb::after {\r\n content: ''; position: absolute; inset: 0;\r\n background: linear-gradient(180deg, rgba(11,9,24,0.1), transparent 40%, rgba(11,9,24,0.65));\r\n pointer-events: none;\r\n}\r\n\r\n.vcard__play {\r\n position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n width: 56px; height: 56px; border-radius: 50%;\r\n background: rgba(15,12,41,0.55);\r\n border: 1px solid var(--border-hover);\r\n backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\r\n display: flex; align-items: center; justify-content: center;\r\n color: #a78bfa; z-index: 2;\r\n transition: all 0.4s var(--ease);\r\n}\r\n.vcard__play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }\r\n.vcard:hover .vcard__play {\r\n background: linear-gradient(135deg, var(--accent), var(--cyan));\r\n color: #fff;\r\n transform: translate(-50%, -50%) scale(1.1);\r\n box-shadow: var(--glow-strong);\r\n}\r\n\r\n.vcard__new {\r\n position: absolute; top: 12px; right: 12px; z-index: 2;\r\n padding: 4px 10px; background: linear-gradient(90deg, var(--accent), var(--cyan));\r\n color: #ffffff !important; font-size: 0.68rem; font-weight: 800; border-radius: 50px;\r\n text-transform: uppercase; letter-spacing: 0.08em;\r\n box-shadow: 0 4px 14px rgba(123,94,255,0.4);\r\n}\r\n\r\n\/* Body *\/\r\n.vcard__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }\r\n\r\n.vcard__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }\r\n.vcard__cat {\r\n padding: 4px 10px; background: rgba(123,94,255,0.1);\r\n border: 1px solid rgba(123,94,255,0.3); border-radius: 50px;\r\n font-size: 0.72rem; font-weight: 600;\r\n color: #a78bfa !important;\r\n white-space: nowrap;\r\n}\r\n.vcard__year { font-size: 0.78rem; color: #8a86b8 !important; }\r\n\r\n.vcard__title {\r\n font-size: 1.08rem; font-weight: 700; line-height: 1.35;\r\n letter-spacing: -0.01em; margin-bottom: 8px;\r\n color: #f0f0ff !important;\r\n display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\r\n}\r\n\r\n.vcard__desc {\r\n font-size: 0.88rem; line-height: 1.55;\r\n color: #c0c0ff !important;\r\n display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;\r\n}\r\n\r\n\/* === EMPTY STATE === *\/\r\n.empty {\r\n display: none; text-align: center; padding: clamp(48px, 8vw, 80px) 20px;\r\n border: 1px dashed var(--border); border-radius: var(--radius);\r\n}\r\n.empty.visible { display: block; }\r\n.empty__icon { font-size: 2.4rem; margin-bottom: 16px; opacity: 0.6; }\r\n.empty__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; color: #f0f0ff !important; }\r\n.empty__text { color: #8a86b8 !important; margin-bottom: 24px; }\r\n.empty__btn {\r\n display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;\r\n background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);\r\n color: #a78bfa !important; font-family: inherit; font-weight: 600; font-size: 0.9rem;\r\n cursor: pointer; transition: all var(--transition); min-height: 44px;\r\n}\r\n.empty__btn:hover { border-color: var(--border-hover); box-shadow: var(--glow); }\r\n\r\n\/* === TO TOP === *\/\r\n.to-top {\r\n position: fixed; right: 24px; bottom: calc(24px + var(--safe-bottom)); z-index: 900;\r\n width: 48px; height: 48px; border-radius: 50%;\r\n background: rgba(15,12,41,0.8);\r\n border: 1px solid var(--border);\r\n backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\r\n color: #a78bfa; cursor: pointer;\r\n display: flex; align-items: center; justify-content: center;\r\n opacity: 0; transform: translateY(16px); pointer-events: none;\r\n transition: all var(--transition);\r\n}\r\n.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }\r\n.to-top:hover { border-color: var(--border-hover); box-shadow: var(--glow); background: var(--accent); color: #fff; }\r\n.to-top svg { width: 18px; height: 18px; stroke: currentColor; }\r\n\r\n\/* === MODAL === *\/\r\n.modal {\r\n position: fixed; inset: 0; z-index: 2000;\r\n background: rgba(11,9,24,0.9);\r\n backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);\r\n display: flex; align-items: center; justify-content: center;\r\n padding: clamp(12px, 4vw, 32px);\r\n padding-top: calc(clamp(12px, 4vw, 32px) + var(--safe-top));\r\n padding-bottom: calc(clamp(12px, 4vw, 32px) + var(--safe-bottom));\r\n opacity: 0; visibility: hidden;\r\n transition: opacity 0.35s ease, visibility 0.35s ease;\r\n}\r\n.modal.active { opacity: 1; visibility: visible; }\r\n\r\n.modal-inner {\r\n width: 100%; max-width: min(1080px, 96vw);\r\n max-height: 100%;\r\n overflow-y: auto;\r\n background: var(--bg-1);\r\n border: 1px solid var(--border-hover);\r\n border-radius: var(--radius);\r\n box-shadow: 0 30px 80px rgba(0,0,0,0.65), var(--glow);\r\n transform: scale(0.92) translateY(24px); opacity: 0;\r\n transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);\r\n -webkit-overflow-scrolling: touch;\r\n}\r\n.modal.active .modal-inner { transform: scale(1) translateY(0); opacity: 1; }\r\n\r\n.modal-video { position: relative; padding-bottom: 56.25%; background: var(--bg-deep); }\r\n.modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }\r\n\r\n.modal-info { padding: 24px; border-top: 1px solid var(--border); }\r\n.modal-info__meta { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }\r\n.modal-info h3 {\r\n font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em;\r\n color: #f0f0ff !important;\r\n}\r\n.modal-info p { color: #c0c0ff !important; font-size: 0.95rem; line-height: 1.6; }\r\n\r\n.modal-close {\r\n position: absolute; top: 12px; right: 12px; z-index: 10;\r\n width: 40px; height: 40px; border-radius: 50%;\r\n background: rgba(15,12,41,0.8); border: 1px solid var(--border);\r\n backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\r\n color: #f0f0ff; font-size: 20px; cursor: pointer;\r\n display: flex; align-items: center; justify-content: center;\r\n transition: all 0.3s ease;\r\n}\r\n.modal-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: rotate(90deg); }\r\n\r\n\/* === FOOTER === *\/\r\n.footer {\r\n padding: 48px 0 calc(32px + var(--safe-bottom));\r\n border-top: 1px solid var(--border); text-align: center;\r\n position: relative; z-index: 2;\r\n}\r\n.footer__logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }\r\n.footer__logo-mark {\r\n width: 28px; height: 28px; border-radius: 8px;\r\n background: linear-gradient(135deg, var(--accent), var(--cyan));\r\n display: flex; align-items: center; justify-content: center;\r\n font-weight: 800; font-size: 0.75rem; color: #fff;\r\n}\r\n.footer__logo-text { font-weight: 700; color: #f0f0ff !important; }\r\n.footer__links { display: flex; justify-content: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; padding: 0 16px; }\r\n.footer__links a { color: #8a86b8 !important; text-decoration: none; font-size: 0.88rem; transition: color 0.3s ease; padding: 6px 2px; }\r\n.footer__links a:hover { color: #a78bfa !important; }\r\n.footer__copy { color: #8a86b8 !important; font-size: 0.78rem; opacity: 0.7; padding: 0 16px; }\r\n\r\n\/* =====================================================\r\n \u041c\u041e\u0411\u0418\u041b\u042c\u041d\u0410\u042f \u0410\u0414\u0410\u041f\u0422\u0410\u0426\u0418\u042f\r\n===================================================== *\/\r\n@media (max-width: 1023px) {\r\n .video-grid { gap: 16px; }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n .hero { padding-top: calc(40px + var(--safe-top)); }\r\n .video-grid { grid-template-columns: 1fr; gap: 14px; }\r\n .vcard__thumb { aspect-ratio: 4 \/ 3; }\r\n .vcard__play { width: 64px; height: 64px; }\r\n .vcard__play svg { width: 24px; height: 24px; }\r\n .vcard__body { padding: 16px; }\r\n .vcard__title { font-size: 1.02rem; }\r\n .vcard__desc { font-size: 0.85rem; -webkit-line-clamp: 2; }\r\n .search-input { padding: 14px 46px; border-radius: 12px; }\r\n .search-wrap svg { left: 18px; }\r\n .search-clear { right: 10px; width: 36px; height: 36px; }\r\n .modal-inner { border-radius: 16px; }\r\n .modal-info { padding: 16px 18px 20px; }\r\n .modal-info h3 { font-size: 1.08rem; }\r\n .modal-info p { font-size: 0.88rem; }\r\n .modal-close { top: 8px; right: 8px; width: 38px; height: 38px; font-size: 18px; }\r\n .to-top { right: 14px; bottom: calc(14px + var(--safe-bottom)); width: 46px; height: 46px; }\r\n .footer { padding-top: 36px; }\r\n .footer__links { gap: 14px; }\r\n}\r\n\r\n@media (max-width: 400px) {\r\n .hero__title { font-size: 2rem; }\r\n .hero__subtitle { font-size: 0.92rem; }\r\n .vcard__cat { font-size: 0.68rem; }\r\n .vcard__title { font-size: 0.98rem; }\r\n .empty { padding: 40px 14px; }\r\n .empty__title { font-size: 1.15rem; }\r\n}\r\n\r\n@media (max-height: 520px) and (orientation: landscape) {\r\n .hero { padding: calc(24px + var(--safe-top)) 0 16px; }\r\n .hero__subtitle { margin-bottom: 16px; }\r\n .hero__hint { display: none; }\r\n .video-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\r\n .vcard__thumb { aspect-ratio: 16 \/ 9; }\r\n .vcard__play { width: 48px; height: 48px; }\r\n .grid-section { padding-bottom: 40px; }\r\n .modal-video { padding-bottom: 56.25%; }\r\n}\r\n\r\n@media (hover: none) {\r\n .vcard:hover { transform: none; box-shadow: none; }\r\n .vcard:hover::before { transform: scaleX(0); }\r\n .vcard:hover .vcard__thumb::before { transform: none; }\r\n .vcard__play { background: rgba(123,94,255,0.25); }\r\n .vcard:hover .vcard__play { transform: translate(-50%, -50%); }\r\n .hero__hint { display: none; }\r\n .to-top:hover { background: rgba(15,12,41,0.8); color: #a78bfa; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after {\r\n animation-duration: 0.01ms !important;\r\n transition-duration: 0.01ms !important;\r\n }\r\n html { scroll-behavior: auto; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"ambient\"><\/div>\r\n<div class=\"noise\"><\/div>\r\n\r\n\r\n<header class=\"hero\">\r\n <div class=\"container\">\r\n <div class=\"hero__kicker\">BanTV Production<\/div>\r\n <h1 class=\"hero__title\">\u041d\u0430\u0448\u0438 <span class=\"hero__title-accent\">\u0432\u0438\u0434\u0435\u043e<\/span><\/h1>\r\n <p class=\"hero__subtitle\">\u0424\u0438\u043b\u044c\u043c\u044b, \u0448\u043e\u0443, \u043e\u0431\u0437\u043e\u0440\u044b \u0438 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f \u2014 \u0432\u0441\u0435 \u0440\u043e\u043b\u0438\u043a\u0438 \u0441\u0442\u0443\u0434\u0438\u0438 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435.<\/p>\r\n\r\n <div class=\"search-wrap\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <circle cx=\"11\" cy=\"11\" r=\"7\"><\/circle>\r\n <path d=\"M21 21l-4.35-4.35\"><\/path>\r\n <\/svg>\r\n <input type=\"search\" id=\"searchInput\" class=\"search-input\" placeholder=\"\u041f\u043e\u0438\u0441\u043a \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e\u2026\" autocomplete=\"off\" enterkeyhint=\"search\" aria-label=\"\u041f\u043e\u0438\u0441\u043a \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0432\u0438\u0434\u0435\u043e\">\r\n <button class=\"search-clear\" id=\"searchClear\" aria-label=\"\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u0438\u0441\u043a\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"hero__hint\" id=\"heroHint\">\u041d\u0430\u0436\u043c\u0438\u0442\u0435 <kbd>\/<\/kbd>, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a<\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<main class=\"grid-section\">\r\n <div class=\"container\">\r\n <div class=\"video-grid\" id=\"videoGrid\"><\/div>\r\n\r\n <div class=\"empty\" id=\"emptyState\">\r\n <div class=\"empty__icon\">\ud83d\udd0d<\/div>\r\n <div class=\"empty__title\">\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e<\/div>\r\n <p class=\"empty__text\">\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00ab\u0448\u043e\u0443\u00bb \u0438\u043b\u0438 \u00ab\u0444\u0438\u043b\u044c\u043c\u00bb.<\/p>\r\n <button class=\"empty__btn\" id=\"emptyReset\">\u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u0438\u0441\u043a<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/main>\r\n\r\n\r\n<footer class=\"footer\">\r\n <div class=\"container\">\r\n <div class=\"footer__logo\">\r\n <div class=\"footer__logo-mark\">B<\/div>\r\n <div class=\"footer__logo-text\">BanTV Production<\/div>\r\n <\/div>\r\n <div class=\"footer__links\">\r\n <a href=\"https:\/\/bantv.ru\/\">\u0413\u043b\u0430\u0432\u043d\u0430\u044f<\/a>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=1238\">\u041f\u0440\u043e\u0435\u043a\u0442\u044b<\/a>\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\" rel=\"noopener\">Telegram<\/a>\r\n <\/div>\r\n <p class=\"footer__copy\">\u00a9 2026 BanTV Production. \u0412\u0441\u0435 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b.<\/p>\r\n <\/div>\r\n<\/footer>\r\n\r\n\r\n<button class=\"to-top\" id=\"toTop\" aria-label=\"\u041d\u0430\u0432\u0435\u0440\u0445\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 19V5\"><\/path><path d=\"M5 12l7-7 7 7\"><\/path>\r\n <\/svg>\r\n<\/button>\r\n\r\n\r\n<div class=\"modal\" id=\"modal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0432\u0438\u0434\u0435\u043e\">\r\n <div class=\"modal-inner\">\r\n <button class=\"modal-close\" id=\"modalClose\" aria-label=\"\u0417\u0430\u043a\u0440\u044b\u0442\u044c\">\u00d7<\/button>\r\n <div class=\"modal-video\" id=\"modalVideo\"><\/div>\r\n <div class=\"modal-info\" id=\"modalInfo\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ============================================================\r\n \u041a\u0410\u041a \u0414\u041e\u0411\u0410\u0412\u0418\u0422\u042c \u0412\u0418\u0414\u0415\u041e: \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 VIDEOS.\r\n \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e \u0435\u0434\u0438\u043d\u043e\u043c\u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u0443.\r\n \u041f\u043e\u043b\u044f: title, desc, url, cat, year, isNew (\u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e)\r\n============================================================ *\/\r\nconst VIDEOS = [\r\n { title: '\u0428\u043e\u0443 \"\u041d\u0443 \u0447\u0438\u0441\u0442\u043e \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\" - \u0410 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u041b\u0443\u043d\u0430 \u0443\u043b\u0435\u0442\u0438\u0442 \u043e\u0442 \u043d\u0430\u0441?', desc: '\u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u0430 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u041b\u0443\u043d\u0430 \u0443\u043b\u0435\u0442\u0438\u0442 \u043e\u0442 \u043d\u0430\u0441? \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441 \u0417\u0435\u043c\u043b\u0435\u0439 \u0438 \u0432\u0441\u0435\u043c\u0438 \u043d\u0430\u043c\u0438?', url: 'https:\/\/vkvideo.ru\/video_ext.php?oid=-220276241&id=456239058&hash=b9d4c77a54a2568d&hd=4', cat: '\u0428\u043e\u0443', year: '2026', isNew: true },\r\n { title: '\u0428\u043e\u0443 \"\u041d\u0443 \u0447\u0438\u0441\u0442\u043e \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\" - \u0432\u044b\u043f\u0443\u0441\u043a \u043f\u0440\u043e \u0441\u043a\u0432\u043e\u0437\u043d\u043e\u0435 \u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u0435 \u0432 \u0417\u0435\u043c\u043b\u0435', desc: '\u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u0430 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043a\u0432\u043e\u0437\u043d\u043e\u0435 \u043e\u0442\u0432\u0435\u0440\u0441\u0442\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u044e \u0417\u0435\u043c\u043b\u044e \u0438 \u043f\u0440\u044b\u0433\u043d\u0443\u0442\u044c \u0442\u0443\u0434\u0430?', url: 'https:\/\/vkvideo.ru\/video_ext.php?oid=-220276241&id=456239056&hash=f373a6c7cb9935ab&hd=3', cat: '\u0428\u043e\u0443', year: '2026', isNew: true },\r\n { title: '\u0422\u0440\u0435\u0439\u043b\u0435\u0440 \u0448\u043e\u0443 \"\u0422\u0440\u044e\u043a\u0438!\" - \u0432\u044b\u043f\u0443\u0441\u043a 3', desc: '\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a \u043f\u0440\u043e \u043f\u0440\u0438\u0440\u043e\u0434\u0443 \u0411\u0443\u0442\u043e\u0432\u043e.', url: 'https:\/\/vkvideo.ru\/clip_ext.php?oid=-220276241&id=456239054&autoplay=1', cat: '\u0422\u0440\u0435\u0439\u043b\u0435\u0440', year: '2026' },\r\n { title: '\"\u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u044b \u043c\u0438\u0440\u0430\" - \u0432\u044b\u043f\u0443\u0441\u043a 4', desc: '\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a \u043f\u0440\u043e \u043f\u0440\u0438\u0440\u043e\u0434\u0443 \u0411\u0443\u0442\u043e\u0432\u043e.', url: 'https:\/\/vkvideo.ru\/video_ext.php?oid=-220276241&id=456239052&hash=dcb18a5b45872f7a&hd=4', cat: '\u041f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f', year: '2026' },\r\n { title: '\u0428\u043e\u0443 \"\u041f\u0440\u0438\u0440\u043e\u0434\u0430 \u0411\u0443\u0442\u043e\u0432\u043e\" \u0432\u044b\u043f\u0443\u0441\u043a 3', desc: '\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0448\u043e\u0443 \u0441 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c\u0438 \u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u0430\u0434\u0440\u0430\u043c\u0438 \u043f\u0440\u0438\u0440\u043e\u0434\u044b \u0411\u0443\u0442\u043e\u0432\u043e.', url: 'https:\/\/vkvideo.ru\/video_ext.php?oid=-220276241&id=456239053&hash=69288c73232b56ab&hd=4', cat: '\u041f\u0440\u0438\u0440\u043e\u0434\u0430', year: '2026' },\r\n { title: '\u0428\u043e\u0443 \"\u041f\u0440\u0438\u0440\u043e\u0434\u0430 \u0411\u0443\u0442\u043e\u0432\u043e\" \u0432\u044b\u043f\u0443\u0441\u043a 2', desc: '\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0441\u0430\u043c\u044b\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b \u043f\u0440\u0438\u0440\u043e\u0434\u044b \u0411\u0443\u0442\u043e\u0432\u043e.', url: 'https:\/\/vkvideo.ru\/video_ext.php?oid=-220276241&id=456239051&hash=6b1556befac22daf&hd=3', cat: '\u041f\u0440\u0438\u0440\u043e\u0434\u0430', year: '2026' },\r\n { title: '\u0424\u0438\u043b\u044c\u043c: \u0420\u0430\u0434\u0438\u0439 325', desc: '\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043c\u0435\u0441\u044c \u0434\u0435\u0442\u0435\u043a\u0442\u0438\u0432\u0430 \u0438 \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u043a\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435!', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239023&hd=2', cat: '\u0424\u0438\u043b\u044c\u043c', year: '2025' },\r\n { title: '\u0424\u0438\u043b\u044c\u043c \"\u041f\u043e\u0434 \u043f\u0440\u0438\u043a\u0440\u044b\u0442\u0438\u0435\u043c\"', desc: '\u041d\u0430\u043f\u0440\u044f\u0436\u0451\u043d\u043d\u044b\u0439 \u043a\u0440\u0438\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0440\u0438\u043b\u043b\u0435\u0440 \u043e \u0441\u0435\u0440\u0436\u0430\u043d\u0442\u0435 \u043f\u043e\u043b\u0438\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u044b\u043f\u0430\u0434\u0430\u0435\u0442 \u0448\u0430\u043d\u0441 \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435. \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0435\u043e\u043f\u044b\u0442\u043d\u044b\u043c \u043d\u0430\u043f\u0430\u0440\u043d\u0438\u043a\u043e\u043c \u043e\u043d \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435...', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239021&hd=2', cat: '\u0424\u0438\u043b\u044c\u043c', year: '2025' },\r\n { title: '\u0428\u043e\u0443 \"\u041d\u0443 \u0447\u0438\u0441\u0442\u043e \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\"', desc: '\u042e\u043c\u043e\u0440\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0448\u043e\u0443 \u0432 \u043b\u0451\u0433\u043a\u043e\u043c \u0438 \u0438\u0440\u043e\u043d\u0438\u0447\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239029&hd=2', cat: '\u0428\u043e\u0443', year: '2025' },\r\n { title: '\"\u041d\u0443 \u0447\u0438\u0441\u0442\u043e \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\" \u043f\u0440\u043e \u0437\u0432\u0443\u043a', desc: '\u0412\u044b\u043f\u0443\u0441\u043a \u0448\u043e\u0443, \u043f\u043e\u0441\u0432\u044f\u0449\u0451\u043d\u043d\u044b\u0439 \u0437\u0432\u0443\u043a\u0443 \u0438 \u0437\u0432\u0443\u043a\u043e\u0440\u0435\u0436\u0438\u0441\u0441\u0443\u0440\u0435', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239030&hd=2', cat: '\u0428\u043e\u0443', year: '2025' },\r\n { title: '\u0420\u043e\u043b\u0438\u043a \u043a 6-\u0442\u0438 \u043b\u0435\u0442\u0438\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b BanTV Production', desc: '\u041f\u0440\u0430\u0437\u0434\u043d\u0438\u0447\u043d\u044b\u0439 \u043c\u043e\u043d\u0442\u0430\u0436 \u0438 \u043f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442 \u0432\u0441\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239031&hd=2', cat: '\u0421\u043f\u0435\u0446\u043f\u0440\u043e\u0435\u043a\u0442', year: '2025' },\r\n { title: '\u0418\u043d\u0442\u0435\u0440\u0432\u044c\u044e \u0441 WCE Pictures', desc: '\u0420\u0430\u0437\u0433\u043e\u0432\u043e\u0440 \u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043b\u044f\u043c\u0438 WCE Pictures', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239020&hd=2', cat: '\u0418\u043d\u0442\u0435\u0440\u0432\u044c\u044e', year: '2025' },\r\n { title: 'Engine&Gear 1 \u0432\u044b\u043f\u0443\u0441\u043a \u2014 Li L9 Ultra', desc: '\u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043e\u0431\u0437\u043e\u0440 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044f Li L9 Ultra. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239032&hd=2', cat: '\u041e\u0431\u0437\u043e\u0440', year: '2025' },\r\n { title: 'Engine&Gear \u2014 \u0412\u044b\u043f\u0443\u0441\u043a 2 Li L9 Ultra', desc: '\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u043e\u0431\u0437\u043e\u0440 \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u043e\u0433\u043e Li L9 Ultra. \u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239035&hd=2', cat: '\u041e\u0431\u0437\u043e\u0440', year: '2025' },\r\n { title: '\"\u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u044b\" \u043c\u0438\u0440\u0430 \u2014 \u0432\u044b\u043f\u0443\u0441\u043a 3', desc: '\u0412 \u044d\u0442\u043e\u043c \u044d\u043f\u0438\u0437\u043e\u0434\u0435 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u044b\u0439 \u0422\u0430\u0438\u043b\u0430\u043d\u0434. \u0421\u0435\u0432\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0433\u0438\u043e\u043d\u044b, \u0440\u0430\u0441\u0441\u0432\u0435\u0442\u044b \u043d\u0430\u0434 \u043e\u0431\u043b\u0430\u043a\u0430\u043c\u0438, \u0433\u043e\u0440\u044b \u0438 \u0442\u0438\u0445\u0438\u0435 \u0434\u043e\u043b\u0438\u043d\u044b...', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239033&hd=2', cat: '\u041f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f', year: '2025' },\r\n { title: '\"\u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u044b \u043c\u0438\u0440\u0430\" \u2014 \u0432\u044b\u043f\u0443\u0441\u043a 2', desc: '\u0421\u044a\u0451\u043c\u043e\u0447\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0432 \u0440\u0430\u0439\u043e\u043d\u0435 Doi Inthanon. \u0413\u043e\u0440\u044b, \u0442\u0443\u043c\u0430\u043d\u044b, \u0432\u043e\u0434\u043e\u043f\u0430\u0434\u044b \u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u0438\u0440\u043e\u0434\u0430 \u0422\u0430\u0438\u043b\u0430\u043d\u0434\u0430', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239034&hd=2', cat: '\u041f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f', year: '2025' },\r\n { title: '\"\u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u044b \u043c\u0438\u0440\u0430\" \u2014 \u0432\u044b\u043f\u0443\u0441\u043a 1', desc: '\u0421\u0430\u043c\u0430\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0422\u0443\u043b\u044c\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u2764\ufe0f', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239036&hd=2', cat: '\u041f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f', year: '2025' },\r\n { title: '\u041f\u0440\u0438\u0440\u043e\u0434\u0430 \u0411\u0443\u0442\u043e\u0432\u043e \u2014 1 \u0432\u044b\u043f\u0443\u0441\u043a', desc: '\u041a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b \u043f\u0440\u0438\u0440\u043e\u0434\u044b \u0440\u0430\u0439\u043e\u043d\u0430 \u0411\u0443\u0442\u043e\u0432\u043e', url: 'https:\/\/vk.com\/video_ext.php?oid=-220276241&id=456239028&hd=2', cat: '\u041f\u0440\u0438\u0440\u043e\u0434\u0430', year: '2025' }\r\n];\r\n\r\n\/* === RENDER (\u0435\u0434\u0438\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438) === *\/\r\nconst grid = document.getElementById('videoGrid');\r\n\r\nVIDEOS.forEach((v, i) => {\r\n const card = document.createElement('article');\r\n card.className = 'vcard';\r\n card.setAttribute('role', 'button');\r\n card.setAttribute('tabindex', '0');\r\n card.setAttribute('aria-label', '\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c: ' + v.title);\r\n card.dataset.index = i;\r\n card.dataset.title = v.title.toLowerCase();\r\n card.innerHTML = `\r\n <div class=\"vcard__thumb\">\r\n ${v.isNew ? '<div class=\"vcard__new\">New<\/div>' : ''}\r\n <div class=\"vcard__play\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"vcard__body\">\r\n <div class=\"vcard__meta\">\r\n <span class=\"vcard__cat\">${v.cat}<\/span>\r\n <span class=\"vcard__year\">${v.year}<\/span>\r\n <\/div>\r\n <h3 class=\"vcard__title\">${v.title}<\/h3>\r\n <p class=\"vcard__desc\">${v.desc}<\/p>\r\n <\/div>`;\r\n card.addEventListener('click', () => openModal(v));\r\n card.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openModal(v); }\r\n });\r\n grid.appendChild(card);\r\n});\r\n\r\n\/* === SEARCH === *\/\r\nconst searchInput = document.getElementById('searchInput');\r\nconst searchClear = document.getElementById('searchClear');\r\nconst emptyState = document.getElementById('emptyState');\r\nconst cards = Array.from(grid.children);\r\n\r\nfunction applyFilter() {\r\n const q = searchInput.value.trim().toLowerCase();\r\n let shown = 0;\r\n cards.forEach(card => {\r\n const match = !q || card.dataset.title.includes(q);\r\n card.classList.toggle('hidden', !match);\r\n if (match) shown++;\r\n });\r\n searchClear.classList.toggle('visible', q.length > 0);\r\n emptyState.classList.toggle('visible', shown === 0);\r\n}\r\n\r\nsearchInput.addEventListener('input', applyFilter);\r\nsearchClear.addEventListener('click', () => { searchInput.value = ''; applyFilter(); searchInput.focus(); });\r\ndocument.getElementById('emptyReset').addEventListener('click', () => { searchInput.value = ''; applyFilter(); searchInput.focus(); });\r\napplyFilter();\r\n\r\n\/* hotkey \"\/\" \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439 *\/\r\nconst hasHover = window.matchMedia('(hover: hover) and (pointer: fine)').matches;\r\nif (hasHover) {\r\n document.addEventListener('keydown', e => {\r\n if (e.key === '\/' && document.activeElement !== searchInput) {\r\n e.preventDefault();\r\n searchInput.focus();\r\n }\r\n });\r\n} else {\r\n const hint = document.getElementById('heroHint');\r\n if (hint) hint.style.display = 'none';\r\n}\r\n\r\n\/* === MODAL === *\/\r\nconst modal = document.getElementById('modal');\r\nconst modalVideo = document.getElementById('modalVideo');\r\nconst modalInfo = document.getElementById('modalInfo');\r\n\r\nfunction openModal(v) {\r\n let url = v.url;\r\n if (!url.includes('autoplay=1')) url += (url.includes('?') ? '&' : '?') + 'autoplay=1';\r\n modalVideo.innerHTML = `<iframe src=\"${url}\" allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>`;\r\n modalInfo.innerHTML = `\r\n <div class=\"modal-info__meta\">\r\n <span class=\"vcard__cat\">${v.cat}<\/span>\r\n <span class=\"vcard__year\">${v.year}<\/span>\r\n <\/div>\r\n <h3>${v.title}<\/h3>\r\n <p>${v.desc}<\/p>`;\r\n modal.classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n}\r\n\r\nfunction closeModal() {\r\n modal.classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => { modalVideo.innerHTML = ''; }, 350);\r\n}\r\n\r\ndocument.getElementById('modalClose').addEventListener('click', closeModal);\r\nmodal.addEventListener('click', e => { if (e.target === modal) closeModal(); });\r\ndocument.addEventListener('keydown', e => { if (e.key === 'Escape' && modal.classList.contains('active')) closeModal(); });\r\n\r\n\/* === TO TOP === *\/\r\nconst toTop = document.getElementById('toTop');\r\n\r\nwindow.addEventListener('scroll', () => {\r\n toTop.classList.toggle('show', window.scrollY > 600);\r\n}, { passive: true });\r\n\r\ntoTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c9e2923 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c9e2923\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-47b959c\" data-id=\"47b959c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u041d\u0430\u0448\u0438 \u0440\u043e\u043b\u0438\u043a\u0438: BanTV Production \u2014 \u0412\u0438\u0434\u0435\u043e BanTV Production \u041d\u0430\u0448\u0438 \u0432\u0438\u0434\u0435\u043e \u0424\u0438\u043b\u044c\u043c\u044b, \u0448\u043e\u0443, \u043e\u0431\u0437\u043e\u0440\u044b \u0438 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f \u2014 \u0432\u0441\u0435 \u0440\u043e\u043b\u0438\u043a\u0438 \u0441\u0442\u0443\u0434\u0438\u0438 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435. \u2715 \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \/, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \ud83d\udd0d \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00ab\u0448\u043e\u0443\u00bb \u0438\u043b\u0438 \u00ab\u0444\u0438\u043b\u044c\u043c\u00bb. \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u0438\u0441\u043a B BanTV Production \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u041f\u0440\u043e\u0435\u043a\u0442\u044b Telegram \u00a9 2026 BanTV Production. \u0412\u0441\u0435 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b. … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/bantv.ru\/?page_id=119\" class=\"more-link\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435<span class=\"screen-reader-text\"> «\u041d\u0430\u0448\u0438 \u0440\u0430\u0431\u043e\u0442\u044b»<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inspiro_hide_title":false,"footnotes":""},"class_list":["post-119","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages\/119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bantv.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=119"}],"version-history":[{"count":95,"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages\/119\/revisions"}],"predecessor-version":[{"id":1680,"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages\/119\/revisions\/1680"}],"wp:attachment":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}