/* Build 10.3 — PNU webfont + frontend cache normalization */ @font-face{font-family:"PNU";src:url("../fonts/PNU-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap} @font-face{font-family:"PNU";src:url("../fonts/PNU-Bold.ttf") format("truetype");font-style:normal;font-weight:700 900;font-display:swap} html,body,button,input,select,textarea{font-family:"PNU",Tahoma,Arial,sans-serif} b,strong,.watch-btn,.details-btn{font-family:"PNU",Tahoma,Arial,sans-serif;font-weight:700} *{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;background:var(--j-background,#0e1013);color:var(--j-text,#fff);font-family:"PNU",Arial,sans-serif}body{min-height:100vh;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.site-header{height:76px;position:fixed;inset:0 0 auto;z-index:80;transition:.3s;background:linear-gradient(180deg,rgba(7,9,12,.82),transparent);border-bottom:1px solid transparent}.site-header.scrolled{background:rgba(10,12,15,.92);backdrop-filter:blur(20px);border-bottom-color:rgba(255,255,255,.06)}.header-inner{height:100%;max-width:1600px;margin:auto;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;gap:34px}.site-brand{display:flex;align-items:center;gap:10px;flex:none}.site-brand img{width:46px;height:46px;object-fit:contain}.site-brand b{font-size:19px;color:var(--j-primary,#d8a62a)}.desktop-nav{display:flex;gap:30px;align-items:center}.desktop-nav a{font-size:14px;color:#bbc1c8;transition:.2s;position:relative;padding:28px 0}.desktop-nav a:hover,.desktop-nav a.active{color:#fff}.desktop-nav a.active:after{content:"";position:absolute;bottom:14px;left:25%;right:25%;height:2px;background:var(--j-primary);border-radius:10px}.header-actions{margin-inline-start:auto;display:flex;gap:8px;align-items:center}.header-icon{width:40px;height:40px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s}.header-icon:hover{border-color:rgba(216,166,42,.5);background:rgba(216,166,42,.12)}.language-menu{position:relative}.language-popover{position:absolute;top:48px;inset-inline-end:0;background:#171b20;border:1px solid #2b3138;border-radius:12px;padding:6px;min-width:140px;display:none;box-shadow:0 18px 50px #0009}.language-popover.open{display:block}.language-popover a{display:block;padding:9px 12px;border-radius:8px;color:#c5cbd1}.language-popover a:hover{background:#22272e;color:#fff}.mobile-menu-toggle{display:none}.mobile-nav{display:none}.global-search{position:fixed;inset:0;z-index:100;background:rgba(7,9,12,.88);backdrop-filter:blur(18px);padding:110px 18px 30px;opacity:0;visibility:hidden;transition:.22s}.global-search.open{opacity:1;visibility:visible}.global-search-box,.search-results{width:min(820px,100%);margin:auto}.global-search-box{height:62px;background:#171b20;border:1px solid #313840;border-radius:16px;display:flex;align-items:center;padding:0 16px;gap:12px}.global-search-box span{font-size:24px;color:var(--j-primary)}.global-search-box input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:18px}.global-search-box button{width:38px;height:38px;border:0;background:#252b32;color:#fff;border-radius:10px;cursor:pointer}.search-results{margin-top:12px;background:#15191e;border:1px solid #282e35;border-radius:16px;padding:8px;max-height:520px;overflow:auto}.search-empty{padding:28px;color:#8f99a3;text-align:center}.search-result-item{display:flex;gap:13px;align-items:center;padding:9px;border-radius:11px}.search-result-item:hover{background:#20252b}.search-result-item img{width:54px;height:74px;object-fit:cover;border-radius:8px;background:#222}.search-result-item b{display:block}.search-result-item span{font-size:12px;color:#7f8994}.search-all{display:block;text-align:center;padding:13px;color:var(--j-primary);border-top:1px solid #252b31;margin-top:6px}.home-main{padding-bottom:36px}.hero-slider{height:min(82vh,850px);min-height:620px;position:relative;background:#0a0c0f}.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:center;padding:100px clamp(22px,6vw,96px) 76px;opacity:0;visibility:hidden;transition:opacity .8s ease}.hero-slide.active{opacity:1;visibility:visible}.hero-copy{width:min(690px,70vw);position:relative;z-index:2}.hero-kicker{display:inline-flex;color:var(--j-primary);font-size:12px;letter-spacing:.18em;font-weight:800}.hero-copy h1{font-size:clamp(42px,5.5vw,78px);line-height:1.05;margin:14px 0 12px;text-wrap:balance}.hero-copy p{font-size:16px;line-height:1.9;color:#c4cbd2;max-width:620px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.hero-facts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#d2d6da;font-size:13px}.hero-facts span{padding:4px 0}.hero-facts .rating{color:#f0cc65}.age-box{border:1px solid #ffffff40;padding:2px 7px!important;border-radius:4px}.hero-actions,.watch-actions{display:flex;gap:12px;margin-top:25px;flex-wrap:wrap}.watch-btn,.details-btn{border:0;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;font-weight:800;cursor:pointer}.watch-btn{background:var(--j-primary);color:#16120b}.watch-btn:hover{filter:brightness(1.08)}.details-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(10px)}.details-btn:hover{background:rgba(255,255,255,.18)}.hero-dots{position:absolute;z-index:5;bottom:44px;inset-inline-end:6vw;display:flex;gap:7px}.hero-dots button{width:22px;height:4px;border:0;border-radius:10px;background:#ffffff4a;padding:0;cursor:pointer;transition:.3s}.hero-dots button.active{width:48px;background:var(--j-primary)}.home-sections{position:relative;margin-top:-24px;z-index:8}.home-row{padding:18px clamp(18px,4vw,64px) 10px}.row-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.row-heading>div{display:flex;align-items:center;gap:10px}.row-heading h2{font-size:22px;margin:0}.row-heading>a{color:#8e98a2;font-size:13px}.row-heading>a:hover{color:var(--j-primary)}.row-accent{width:4px;height:23px;background:var(--j-primary);border-radius:5px}.media-rail{position:relative}.media-track{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:4px 2px 16px}.media-track::-webkit-scrollbar{display:none}.media-card{flex:0 0 clamp(150px,14vw,218px);min-width:0;scroll-snap-align:start;transition:.25s}.media-card.layout-landscape,.media-card.layout-live{flex-basis:clamp(260px,27vw,430px)}.media-card.layout-episode{flex-basis:clamp(250px,24vw,380px)}.media-card-image{aspect-ratio:2/3;border-radius:13px;background:#171b20 center/cover no-repeat;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.07);transition:.25s}.layout-landscape .media-card-image,.layout-live .media-card-image,.layout-episode .media-card-image{aspect-ratio:16/9}.media-card:hover .media-card-image{transform:translateY(-5px) scale(1.015);border-color:rgba(216,166,42,.45);box-shadow:0 18px 42px rgba(0,0,0,.55)}.media-card-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,9,.78),transparent 58%);opacity:.7}.media-card-play{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;opacity:0;transform:scale(.7);transition:.2s;color:#fff;text-shadow:0 3px 18px #000}.media-card:hover .media-card-play{opacity:1;transform:scale(1)}.card-badges{position:absolute;inset:auto 9px 9px;display:flex;gap:5px}.card-badges span{font-size:10px;font-weight:800;padding:3px 6px;border-radius:5px;background:rgba(8,10,12,.82);border:1px solid rgba(216,166,42,.5);color:#f0ce72}.live-badge{position:absolute;top:9px;inset-inline-start:9px;background:#c92838;color:#fff;padding:5px 8px;border-radius:6px;font-size:10px;font-weight:900}.live-badge i{display:inline-block;width:6px;height:6px;background:#fff;border-radius:50%;margin-inline-end:4px;animation:pulse 1.4s infinite}.media-card-meta{padding:9px 2px}.media-card-meta b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-card-meta span{display:block;color:#77818c;font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rail-arrow{position:absolute;z-index:6;top:40%;transform:translateY(-50%);width:42px;height:62px;border:1px solid rgba(255,255,255,.08);background:rgba(8,10,12,.72);color:#fff;font-size:28px;border-radius:10px;backdrop-filter:blur(8px);cursor:pointer;opacity:0;transition:.2s}.media-rail:hover .rail-arrow{opacity:1}.rail-arrow.prev{inset-inline-start:-13px}.rail-arrow.next{inset-inline-end:-13px}.site-footer{margin-top:60px;border-top:1px solid #252b31;background:#0b0d10;padding:44px clamp(20px,5vw,72px) 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;max-width:1400px;margin:auto}.footer-brand img{width:70px;height:70px;object-fit:contain}.footer-brand p{max-width:420px;color:#7f8992;line-height:1.8}.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:10px}.footer-grid b{margin-bottom:6px}.footer-grid a{color:#858f99;font-size:13px}.footer-grid a:hover{color:#fff}.footer-bottom{max-width:1400px;margin:28px auto 0;padding-top:18px;border-top:1px solid #1f2429;display:flex;justify-content:space-between;color:#616b75;font-size:12px}.listing-shell{padding:90px clamp(18px,4vw,64px) 50px;min-height:80vh}.listing-hero{padding:48px 0 24px;border-bottom:1px solid #242a31;margin-bottom:22px}.listing-hero span{color:var(--j-primary);font-size:11px;letter-spacing:.18em}.listing-hero h1{font-size:42px;margin:8px 0}.listing-hero p{color:#89939d}.filter-bar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:0 0 22px;padding:13px;background:#15191e;border:1px solid #252b31;border-radius:14px}.filter-bar label{display:flex;flex-direction:column;gap:5px;color:#8f99a2;font-size:11px}.filter-bar select,.filter-bar input{height:38px;min-width:150px;border:1px solid #30363d;border-radius:9px;background:#0f1216;color:#fff;padding:0 10px}.listing-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 14px}.listing-grid .media-card{width:auto;flex:none}.pagination{display:flex;justify-content:center;gap:7px;margin-top:38px}.pagination a{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:#171b20;border:1px solid #282e35;color:#8d97a1}.pagination a.active,.pagination a:hover{background:var(--j-primary);color:#17120a;border-color:var(--j-primary)}.empty-state{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#78828c;gap:8px}.empty-state b{color:#d5dae0}.big-search{max-width:900px;height:62px;margin:20px auto 28px;background:#15191e;border:1px solid #30363e;border-radius:15px;display:flex;align-items:center;gap:10px;padding:0 10px 0 17px}.big-search span{font-size:24px;color:var(--j-primary)}.big-search input{flex:1;height:100%;border:0;background:transparent;outline:0;color:#fff;font-size:17px}.big-search button{height:42px;padding:0 24px;border:0;border-radius:10px;background:var(--j-primary);font-weight:800}.search-summary{margin-bottom:20px;color:#8c96a0}.watch-shell{padding:100px clamp(18px,4vw,64px) 40px}.panel{border:1px solid #252c33;border-radius:18px;background:#15191e}.watch-shell .watch-btn,.watch-shell .details-btn{display:inline-flex;align-items:center;justify-content:center}.media-badges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}.media-badges span{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid rgba(216,166,42,.55);border-radius:7px;background:rgba(10,12,15,.72);color:#f1d27a;font-size:.82rem;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(8px)}@keyframes pulse{50%{opacity:.35}}@media(max-width:1200px){.listing-grid{grid-template-columns:repeat(4,1fr)}.desktop-nav{gap:20px}.desktop-nav a{font-size:12px}.site-brand b{display:none}}@media(max-width:820px){.site-header{height:66px}.header-inner{padding:0 16px}.desktop-nav{display:none}.mobile-menu-toggle{display:grid}.mobile-nav{position:absolute;top:66px;inset-inline:12px;background:#14181d;border:1px solid #2b3138;border-radius:14px;padding:8px;display:none;box-shadow:0 20px 60px #000b}.mobile-nav.open{display:block}.mobile-nav a{display:block;padding:11px;border-radius:9px;color:#c5cbd1}.hero-slider{height:70vh;min-height:560px}.hero-slide{padding:100px 24px 70px;background-position:65% center}.hero-copy{width:90vw}.hero-copy h1{font-size:42px}.hero-copy p{font-size:14px;-webkit-line-clamp:2}.hero-dots{bottom:28px}.listing-grid{grid-template-columns:repeat(3,1fr)}.rail-arrow{display:none}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}@media(max-width:560px){.site-brand img{width:40px;height:40px}.language-menu{display:none}.hero-slider{height:66vh;min-height:500px}.hero-slide{padding:90px 18px 60px}.hero-copy{width:100%}.hero-copy h1{font-size:34px}.hero-facts{font-size:11px}.hero-actions .watch-btn,.hero-actions .details-btn{padding:10px 14px}.home-row{padding-inline:14px}.row-heading h2{font-size:18px}.media-card{flex-basis:138px}.media-card.layout-landscape,.media-card.layout-live,.media-card.layout-episode{flex-basis:250px}.listing-shell{padding-inline:14px}.listing-grid{grid-template-columns:repeat(2,1fr);gap:16px 10px}.listing-hero h1{font-size:34px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{flex-direction:column;gap:7px}.global-search{padding-top:82px}.global-search-box{height:54px}.search-result-item img{width:44px;height:62px}} /* Build 07 */ .header-login{padding:8px 13px;border:1px solid #ffffff18;border-radius:10px;color:#d9dee3;font-size:12px}.header-login:hover{border-color:#d8a62a;color:#fff}.header-user{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#d8a62a;color:#15120a;font-weight:900}.account-shell{min-height:100vh;padding:120px 18px 60px;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#2b2412 0,#111419 28%,#0e1013 60%)}.account-card{width:min(430px,100%);padding:30px;border:1px solid #2b3138;border-radius:20px;background:#15191ee8;box-shadow:0 30px 80px #0008}.account-card>img{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto 14px}.account-card h1{text-align:center;margin:0 0 22px}.account-card form{display:grid;gap:14px}.account-card label{display:grid;gap:7px;color:#a7b0b9;font-size:13px}.account-card input{height:46px;border:1px solid #323840;background:#0f1216;border-radius:10px;color:#fff;padding:0 12px;outline:0}.account-card input:focus{border-color:#d8a62a}.account-card .watch-btn{width:100%;justify-content:center}.account-card p{text-align:center;color:#7f8992}.account-card p a{color:#d8a62a}.form-error{padding:11px 13px;border:1px solid #71383f;background:#3a1d22;border-radius:10px;color:#ffb7bd;margin-bottom:13px}.content-detail{padding-bottom:40px}.detail-hero{min-height:690px;background-size:cover;background-position:center;display:grid;grid-template-columns:minmax(210px,280px) minmax(0,760px);gap:36px;align-items:end;padding:125px clamp(24px,6vw,94px) 70px}.detail-poster img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:18px;border:1px solid #ffffff16;box-shadow:0 22px 70px #000a}.detail-copy small{color:#d8a62a;letter-spacing:.14em}.detail-copy h1{font-size:clamp(40px,5vw,68px);margin:8px 0 12px;line-height:1.08}.detail-copy>p{color:#c0c7ce;line-height:1.9;max-width:760px}.detail-facts,.genre-chips{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.detail-facts{color:#b8c0c8;font-size:13px}.genre-chips span{padding:6px 10px;border-radius:999px;background:#ffffff0c;border:1px solid #ffffff15;color:#c8cfd6;font-size:12px}.favorite-btn.active{background:#4a251f;border-color:#a84a3d;color:#ffd0c9}.detail-section{padding:26px clamp(18px,4vw,64px)}.people-rail{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}.person-card{flex:0 0 125px;text-align:center}.person-card img{width:92px;height:92px;border-radius:50%;object-fit:cover;background:#222;border:2px solid #2f353c;display:block;margin:0 auto 8px}.person-card b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-card span{display:block;color:#7f8992;font-size:10px;margin-top:3px}.season-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:12px}.season-tabs button{border:1px solid #2c333b;background:#171b20;color:#aab3bc;padding:9px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}.season-tabs button.active{background:#d8a62a;color:#17120a;border-color:#d8a62a;font-weight:800}.season-panel{display:none;border-top:1px solid #252b31}.season-panel.active{display:block}.episode-row{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:18px;align-items:center;padding:15px 0;border-bottom:1px solid #23292f}.episode-thumb{aspect-ratio:16/9;background:#1b1f24 center/cover;border-radius:12px;display:grid;place-items:center;overflow:hidden}.episode-thumb span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#0009;border:1px solid #ffffff2c}.episode-copy b{font-size:15px}.episode-copy p{margin:5px 0 0;color:#7f8993;font-size:12px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.episode-row>small{color:#7f8993}.person-shell{padding-top:76px}.person-hero{min-height:520px;background-size:cover;background-position:center;display:flex;align-items:end;gap:30px;padding:70px clamp(20px,6vw,90px)}.person-hero>img{width:190px;height:190px;border-radius:50%;object-fit:cover;border:4px solid #ffffff18;box-shadow:0 25px 70px #0009}.person-hero h1{font-size:48px;margin:6px 0}.person-hero p{max-width:700px;color:#b9c1c8;line-height:1.8}.library-tabs{display:flex;gap:8px;margin-top:18px}.library-tabs a{padding:9px 14px;border-radius:9px;background:#171b20;border:1px solid #292f36;color:#89939c}.library-tabs a.active{background:#d8a62a;color:#17120a;border-color:#d8a62a;font-weight:800}.history-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:#ffffff2b}.history-progress i{display:block;height:100%;background:#d8a62a} @media(max-width:820px){.detail-hero{grid-template-columns:150px 1fr;min-height:600px;padding-inline:22px;gap:22px}.detail-copy h1{font-size:38px}.episode-row{grid-template-columns:150px 1fr}.episode-row>small{display:none}.person-hero{align-items:center;flex-direction:column;text-align:center}.person-hero>img{width:150px;height:150px}.person-hero h1{font-size:38px}} @media(max-width:560px){.detail-hero{display:block;padding-top:110px;min-height:680px}.detail-poster{display:none}.detail-copy{padding-top:230px}.detail-copy h1{font-size:34px}.episode-row{grid-template-columns:120px 1fr;gap:11px}.episode-copy p{display:none}.header-login{display:none}} /* Build 08 */ .static-page-content{max-width:980px;margin:0 auto;padding:28px;border:1px solid #252b31;border-radius:18px;background:#15191e;color:#c0c7ce;line-height:2;white-space:normal}.contact-layout{max-width:900px;margin:0 auto}.contact-form{display:grid;gap:14px}.contact-form label{display:grid;gap:7px;color:#9ba5ae;font-size:13px}.contact-form input,.contact-form textarea{width:100%;border:1px solid #30363d;border-radius:10px;background:#0f1216;color:#fff;padding:12px;outline:0}.contact-form input:focus,.contact-form textarea:focus{border-color:#d8a62a}.form-success{padding:12px 14px;border:1px solid #2e6e4a;background:#163725;border-radius:10px;color:#9cf0b9;margin-bottom:14px} /* Build 08.1 — static pages and contact layout repair */ .static-page-body{background:var(--j-background,#0e1013);color:var(--j-text,#fff);min-height:100vh}.static-page-shell{min-height:70vh;padding-top:112px;padding-bottom:70px}.static-page-hero{padding-top:28px;margin-bottom:24px;border-bottom:1px solid #242a31}.static-page-hero span{color:var(--j-primary,#d8a62a);font-size:11px;letter-spacing:.18em;font-weight:800}.static-page-hero h1{font-size:clamp(34px,4vw,54px);margin:8px 0 8px}.static-page-hero p{max-width:720px}.static-page-content{box-shadow:0 24px 70px rgba(0,0,0,.18)}.contact-panel{padding:26px}.contact-panel h2{margin:0 0 20px}.contact-form .two-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form textarea{resize:vertical;min-height:170px}.contact-form .watch-btn{border:0;cursor:pointer;width:max-content;min-width:140px}.site-footer .footer-brand img{width:64px!important;height:64px!important;max-width:64px!important;object-fit:contain}.site-header .site-brand img{width:46px!important;height:46px!important;max-width:46px!important;object-fit:contain}@media(max-width:560px){.static-page-shell{padding-top:92px}.static-page-content,.contact-panel{padding:18px}.contact-form .two-cols{grid-template-columns:1fr}.site-header .site-brand img{width:40px!important;height:40px!important;max-width:40px!important}} /* Build 09 plugins */ .plugin-comments,.plugin-rating{max-width:1180px;margin:34px auto;padding:0 24px}.comment-form,.rating-form{display:grid;gap:12px;background:var(--j-surface);border:1px solid var(--j-border);border-radius:16px;padding:16px;margin-bottom:18px}.comment-form textarea{min-height:100px;resize:vertical;background:var(--j-background);color:var(--j-text);border:1px solid var(--j-border);border-radius:12px;padding:12px}.comment-item{background:var(--j-surface);border:1px solid var(--j-border);border-radius:14px;padding:14px;margin:10px 0}.comment-item small{display:block;color:var(--j-muted);margin-top:3px}.comment-item p{margin:10px 0 0;line-height:1.8}.rating-form select{background:var(--j-background);color:var(--j-text);border:1px solid var(--j-border);border-radius:10px;padding:10px}.rating-badge small{opacity:.7} /* Build 10 — dropdown menus and maintenance */ .desktop-nav{display:flex;align-items:center;gap:4px}.nav-dropdown{position:relative}.nav-dropdown-toggle{display:flex!important;align-items:center;gap:6px}.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);inset-inline-start:0;min-width:210px;background:var(--surface,#16191e);border:1px solid var(--border,#30353d);border-radius:14px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:100}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:none}.nav-dropdown-menu a{display:block!important;padding:10px 12px!important;border-radius:9px;white-space:nowrap}.nav-dropdown-menu a:hover{background:rgba(216,166,42,.12)}.mobile-nav-child{padding-inline-start:28px!important;opacity:.8}.maintenance-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:radial-gradient(circle at 50% 30%,rgba(216,166,42,.11),transparent 32%),var(--background,#0e1013);color:var(--text-primary,#fff)}.maintenance-screen img{width:min(150px,35vw);max-height:90px;object-fit:contain;margin-bottom:28px}.maintenance-screen h1{font-size:clamp(30px,6vw,60px);margin:0 0 14px}.maintenance-screen p{max-width:650px;color:var(--text-secondary,#aeb4bc);font-size:18px;line-height:1.9}.maintenance-screen small{margin-top:35px;color:var(--primary,#d8a62a)} /* Build 10.4 - Desktop navigation spacing */ @media (min-width:821px){ .desktop-nav{column-gap:30px;row-gap:0;white-space:nowrap;} .desktop-nav>a,.desktop-nav>.nav-dropdown{flex:0 0 auto;} .nav-dropdown{position:relative;display:flex;align-items:center;} .nav-dropdown-toggle{display:inline-flex;align-items:center;gap:6px;} } @media (min-width:821px) and (max-width:1200px){ .desktop-nav{column-gap:20px;} } /* Build 11 — final public UI pass: desktop/tablet/mobile */ body.search-open{overflow:hidden}.site-header{will-change:background-color,backdrop-filter}.header-inner{max-width:1720px}.desktop-nav{min-width:0}.desktop-nav>a,.nav-dropdown-toggle{font-weight:700}.nav-caret{font-size:10px;opacity:.65;transition:transform .2s}.nav-dropdown:hover .nav-caret{transform:rotate(180deg)} .hero-controls{position:absolute;z-index:6;inset-inline-end:clamp(22px,6vw,96px);bottom:68px;display:flex;gap:8px}.hero-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(8,10,12,.56);backdrop-filter:blur(12px);color:#fff;font-size:23px;cursor:pointer;display:grid;place-items:center;transition:.2s}.hero-arrow:hover{background:var(--j-primary);border-color:var(--j-primary);color:#17120a}.hero-dots{bottom:46px}.hero-slide:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 55%),linear-gradient(0deg,var(--j-background,#0e1013),transparent 24%)}.hero-copy{filter:drop-shadow(0 10px 28px rgba(0,0,0,.28))}.hero-actions a{min-height:46px}.home-sections{margin-top:-34px}.home-row{max-width:1720px;margin-inline:auto}.row-heading h2{font-weight:800;letter-spacing:-.01em}.media-track{cursor:grab}.media-track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.media-card-image{background-color:#181c21}.media-card-meta b{line-height:1.5}.media-card:focus-visible .media-card-image{outline:2px solid var(--j-primary);outline-offset:3px}.listing-shell{max-width:1720px;margin-inline:auto;width:100%}.listing-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.listing-toolbar .filter-bar{margin:0;flex:1}.result-count{flex:0 0 auto;color:#c7cdd3;font-size:13px;text-align:end}.result-count small{display:block;color:#737e88;margin-top:3px}.filter-reset{height:38px;display:inline-flex;align-items:center;padding:0 12px;border-radius:9px;color:#aeb6be;border:1px solid #313840;background:#11151a;font-size:12px}.filter-reset:hover{color:#fff;border-color:#59636e}.listing-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:24px 16px}.listing-grid-live{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.listing-grid-live .media-card-image{aspect-ratio:16/9}.empty-icon{width:62px;height:62px;border:1px solid #2d343c;border-radius:18px;display:grid;place-items:center;font-size:30px;color:var(--j-primary);background:#15191e}.pagination{align-items:center}.pagination span{color:#6f7983;padding:0 4px}.pagination .page-nav{font-size:22px}.site-footer{margin-top:76px}.footer-grid{max-width:1720px}.footer-bottom{max-width:1720px} @media(min-width:1500px){.hero-slider{height:min(84vh,900px)}.hero-copy h1{font-size:clamp(54px,4.8vw,84px)}.hero-copy p{font-size:17px}.media-card{flex-basis:210px}.media-card.layout-landscape,.media-card.layout-live{flex-basis:390px}.home-row{padding-inline:54px}.listing-shell{padding-inline:54px}.listing-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}} @media(min-width:1001px) and (max-width:1320px){.header-inner{gap:22px;padding-inline:28px}.desktop-nav{column-gap:18px}.desktop-nav a{font-size:12px}.site-brand b{display:none}.hero-copy{width:min(620px,62vw)}.listing-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}} @media(max-width:820px){.desktop-nav{display:none}.mobile-menu-toggle{display:grid}.mobile-nav{position:absolute;top:66px;inset-inline:12px;background:rgba(20,24,29,.98);border:1px solid #2b3138;border-radius:14px;padding:8px;display:none;box-shadow:0 20px 60px #000b;max-height:calc(100vh - 82px);overflow:auto}.mobile-nav.open{display:block}.mobile-nav a{display:block;padding:11px;border-radius:9px;color:#c5cbd1}.site-header{height:66px}.header-inner{padding-inline:18px}.hero-slider{height:72vh;min-height:570px}.hero-slide{padding-top:94px}.hero-copy{width:min(620px,88vw)}.hero-copy h1{font-size:clamp(38px,6vw,58px)}.hero-controls{bottom:58px}.hero-dots{bottom:32px}.listing-toolbar{align-items:stretch;flex-direction:column}.result-count{text-align:start}.listing-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}} @media(max-width:700px){.site-brand b{display:none}.header-actions{gap:5px}.header-icon{width:38px;height:38px}.hero-slider{height:68vh;min-height:510px}.hero-slide{padding:86px 18px 64px;background-position:64% center}.hero-copy{width:100%}.hero-copy h1{font-size:34px}.hero-copy p{font-size:13px;-webkit-line-clamp:2}.hero-controls{inset-inline-end:18px;bottom:56px}.hero-arrow{width:36px;height:36px}.hero-dots{inset-inline-start:18px;inset-inline-end:auto;bottom:30px}.hero-dots button{width:16px}.hero-dots button.active{width:32px}.home-sections{margin-top:-18px}.home-row{padding-inline:14px}.media-track{gap:11px}.media-card{flex-basis:142px}.media-card.layout-landscape,.media-card.layout-live,.media-card.layout-episode{flex-basis:260px}.listing-shell{padding:78px 14px 44px}.listing-hero{padding-top:30px}.listing-hero h1{font-size:34px}.filter-bar{display:grid;grid-template-columns:1fr 1fr;align-items:end}.filter-bar label,.filter-bar select,.filter-bar input{min-width:0;width:100%}.filter-bar .details-btn,.filter-reset{justify-content:center}.listing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}.listing-grid-live{grid-template-columns:1fr}.result-count{font-size:12px}.site-footer{margin-top:48px}.footer-grid{gap:28px}.global-search{padding-top:80px}} @media(max-width:390px){.header-inner{padding-inline:10px}.site-brand img{width:38px!important;height:38px!important}.header-login{display:none}.hero-copy h1{font-size:30px}.hero-facts{gap:7px}.hero-actions{gap:8px}.watch-btn,.details-btn{padding:10px 13px}.filter-bar{grid-template-columns:1fr}.listing-grid{gap:16px 8px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* Build 11.1 — stable horizontal desktop/tablet navigation */ @media (min-width:821px){ .site-header .header-inner{display:flex;align-items:center;flex-wrap:nowrap} .site-header .desktop-nav{display:flex!important;align-items:center;flex-direction:row!important;flex-wrap:nowrap!important;white-space:nowrap;gap:30px;min-width:0} .site-header .desktop-nav>a, .site-header .desktop-nav>.nav-dropdown{display:flex;flex:0 0 auto;align-items:center} .site-header .desktop-nav>.nav-dropdown>.nav-dropdown-toggle{display:inline-flex!important;align-items:center} .site-header .mobile-menu-toggle{display:none!important} .site-header .mobile-nav{display:none!important} } @media (min-width:821px) and (max-width:1320px){ .site-header .header-inner{gap:18px;padding-inline:22px} .site-header .desktop-nav{gap:18px} .site-header .desktop-nav a{font-size:12px} .site-header .site-brand b{display:none} } @media (max-width:820px){ .site-header .desktop-nav{display:none!important} .site-header .mobile-menu-toggle{display:grid!important} .site-header .mobile-nav.open{display:block!important} } /* Build 11.2 — content, series and watch experience */ .content-detail{padding-bottom:20px}.detail-hero{min-height:min(78vh,760px);padding:120px clamp(20px,5vw,80px) 58px;display:flex;align-items:flex-end;gap:clamp(28px,4vw,64px);background-size:cover;background-position:center;position:relative}.detail-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--j-background,#0e1013) 0%,transparent 30%);pointer-events:none}.detail-poster,.detail-copy{position:relative;z-index:2}.detail-poster{flex:0 0 clamp(190px,18vw,280px)}.detail-poster img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 70px rgba(0,0,0,.5)}.detail-copy{width:min(820px,64vw)}.detail-copy>small{color:var(--j-primary);font-weight:800;letter-spacing:.12em}.detail-copy h1{font-size:clamp(38px,4.8vw,72px);line-height:1.08;margin:10px 0 14px}.detail-copy>p{max-width:760px;color:#c2c8cf;line-height:1.9;font-size:15px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.detail-facts,.genre-chips,.media-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.detail-facts{color:#c2c8cf;font-size:13px;margin-bottom:10px}.genre-chips{margin:12px 0}.genre-chips span,.media-badges span{border:1px solid rgba(255,255,255,.1);background:rgba(15,18,22,.65);backdrop-filter:blur(8px);border-radius:8px;padding:5px 8px;font-size:11px}.media-badges span{border-color:rgba(216,166,42,.35);color:#eed27d}.detail-section{max-width:1600px;margin:0 auto;padding:28px clamp(18px,4vw,64px)}.detail-overview{padding-top:10px}.detail-overview-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:48px;padding:26px;background:#13171c;border:1px solid #252c33;border-radius:18px}.detail-long-description{color:#aeb7c0;line-height:2;margin:0}.detail-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.detail-specs>div{background:#0e1115;border:1px solid #252b31;border-radius:12px;padding:12px}.detail-specs span{display:block;color:#727d87;font-size:11px;margin-bottom:4px}.detail-specs b{font-size:13px}.people-rail{display:flex;gap:14px;overflow-x:auto;padding:3px 2px 12px;scrollbar-width:none}.people-rail::-webkit-scrollbar{display:none}.person-card{flex:0 0 145px;text-align:center;background:#13171c;border:1px solid #242b32;border-radius:14px;padding:12px;transition:.2s}.person-card:hover{transform:translateY(-4px);border-color:rgba(216,166,42,.45)}.person-card img{width:82px;height:82px;object-fit:cover;border-radius:50%;background:#20252b}.person-card b{display:block;margin-top:8px;font-size:13px}.person-card span{display:block;color:#77828c;font-size:10px;margin-top:4px;line-height:1.5}.season-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}.season-tabs button{flex:none;border:1px solid #2b3239;background:#13171c;color:#9da7b0;border-radius:10px;padding:10px 15px;cursor:pointer}.season-tabs button small{opacity:.55;margin-inline-start:6px}.season-tabs button.active{background:var(--j-primary);border-color:var(--j-primary);color:#16120b;font-weight:800}.season-panel{display:none}.season-panel.active{display:block}.episode-row{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px;margin:8px 0;border-radius:14px;border:1px solid #232a31;background:#12161a;transition:.2s}.episode-row:hover{background:#171c21;border-color:rgba(216,166,42,.35);transform:translateX(-2px)}.episode-thumb{aspect-ratio:16/9;background:#20252b center/cover no-repeat;border-radius:10px;display:grid;place-items:center;position:relative;overflow:hidden}.episode-thumb:after{content:"";position:absolute;inset:0;background:#0004}.episode-thumb span{position:relative;z-index:2;width:38px;height:38px;border-radius:50%;background:#0009;display:grid;place-items:center}.episode-copy b{font-size:14px}.episode-number{color:var(--j-primary);margin-inline-end:5px}.episode-copy p{color:#7f8992;font-size:12px;margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.episode-meta{display:flex;gap:7px;color:#66717b;font-size:10px}.episode-meta span{border:1px solid #2a3036;border-radius:6px;padding:2px 5px}.episode-row>small{color:#8b959f;white-space:nowrap}.trailer-modal{position:fixed;inset:0;z-index:150;display:none}.trailer-modal.open{display:grid;place-items:center}.trailer-modal-backdrop{position:absolute;inset:0;background:#000d;backdrop-filter:blur(8px)}.trailer-modal-dialog{position:relative;z-index:2;width:min(1000px,92vw);background:#0e1115;border:1px solid #2a3037;border-radius:16px;overflow:hidden;box-shadow:0 30px 100px #000}.trailer-modal-head{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #252b31}.trailer-modal-head h3{font-size:14px}.trailer-modal-close{width:34px;height:34px;border:0;border-radius:9px;background:#252b31;color:#fff;font-size:22px;cursor:pointer}.watch-shell{max-width:1600px;margin:0 auto;padding:104px clamp(18px,4vw,64px) 50px}.watch-meta{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.watch-meta small{color:var(--j-primary);font-weight:800}.watch-meta h1{font-size:clamp(25px,3vw,42px);margin:5px 0 7px}.watch-season-label{color:#8f99a3;font-size:12px;margin-bottom:8px}.watch-shell>.jamal-player{border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);border:1px solid #252c33}.watch-episodes{margin-top:34px}.watch-episode-track{display:flex;gap:13px;overflow-x:auto;padding:3px 2px 14px;scrollbar-width:none}.watch-episode-track::-webkit-scrollbar{display:none}.watch-episode-card{flex:0 0 285px;background:#13171c;border:1px solid #252c33;border-radius:13px;overflow:hidden;transition:.2s}.watch-episode-card:hover,.watch-episode-card.active{border-color:rgba(216,166,42,.55);transform:translateY(-3px)}.watch-episode-thumb{aspect-ratio:16/9;background:#20252b center/cover no-repeat;position:relative;display:grid;place-items:center}.watch-episode-thumb:after{content:"";position:absolute;inset:0;background:#0003}.watch-episode-thumb>span{position:relative;z-index:2;width:36px;height:36px;border-radius:50%;background:#000b;display:grid;place-items:center}.watch-episode-thumb i{position:absolute;z-index:3;top:8px;inset-inline-start:8px;background:var(--j-primary);color:#17120a;border-radius:6px;padding:3px 6px;font-style:normal;font-size:9px;font-weight:900}.watch-episode-card>div:last-child{padding:10px}.watch-episode-card b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.watch-episode-card small{display:block;color:#707b85;font-size:10px;margin-top:5px} @media(max-width:900px){.detail-hero{min-height:720px;align-items:flex-end}.detail-poster{flex-basis:180px}.detail-copy{width:auto}.detail-overview-grid{grid-template-columns:1fr;gap:24px}.detail-specs{grid-template-columns:repeat(3,1fr)}.episode-row{grid-template-columns:150px minmax(0,1fr) auto}.watch-meta{align-items:flex-start;flex-direction:column}} @media(max-width:640px){.detail-hero{min-height:650px;padding:95px 16px 34px;display:block;background-position:65% center}.detail-poster{display:none}.detail-copy{position:absolute;inset:auto 16px 32px;width:auto}.detail-copy h1{font-size:34px}.detail-copy>p{font-size:12px;-webkit-line-clamp:3}.detail-section{padding:20px 14px}.detail-overview-grid{padding:17px}.detail-specs{grid-template-columns:1fr 1fr}.episode-row{grid-template-columns:112px minmax(0,1fr);gap:11px;padding:9px}.episode-row>small{display:none}.episode-copy p{-webkit-line-clamp:1}.person-card{flex-basis:125px}.watch-shell{padding:82px 10px 36px}.watch-meta .watch-actions{width:100%}.watch-meta .watch-actions a,.watch-meta .watch-actions button{flex:1;justify-content:center;padding-inline:8px;font-size:11px}.watch-episode-card{flex-basis:245px}} /* Build 11.3 — final public UX polish, search and error states */ .search-loading:after{content:"";display:inline-block;width:16px;height:16px;margin-inline-start:9px;border:2px solid #ffffff26;border-top-color:var(--j-primary);border-radius:50%;vertical-align:-3px;animation:jamalSpin .7s linear infinite}@keyframes jamalSpin{to{transform:rotate(360deg)}} .error-page{min-height:72vh;padding:150px 20px 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.error-code{font-size:clamp(84px,15vw,190px);line-height:.8;font-weight:900;color:transparent;-webkit-text-stroke:2px rgba(216,166,42,.55);opacity:.8}.error-page h1{font-size:clamp(28px,4vw,48px);margin:24px 0 8px}.error-page p{max-width:560px;color:#8e98a2;line-height:1.8}.error-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px} .listing-grid-live .media-card-meta span:before{content:"●";color:#e43849;margin-inline-end:6px;font-size:9px}.listing-grid-live .media-card-image{box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)} @media(max-width:640px){.error-page{padding-top:120px}.error-code{-webkit-text-stroke-width:1px}} /* Build 13 RC2.3 — accounts, flag locale picker, live broadcast overlay */ .header-register{display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;border:1px solid var(--j-primary);border-radius:999px;color:var(--j-primary);font-weight:700}.language-flag{font-size:22px;line-height:1}.language-popover a{display:flex!important;gap:9px;align-items:center}.account-menu{position:relative}.account-popover{position:absolute;top:calc(100% + 12px);inset-inline-end:0;min-width:180px;background:var(--j-surface);border:1px solid var(--j-border);border-radius:14px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:.18s;box-shadow:0 16px 40px #0008}.account-menu:hover .account-popover,.account-menu:focus-within .account-popover{opacity:1;visibility:visible;transform:none}.account-popover a{display:block;padding:10px 12px;border-radius:9px;color:var(--j-text)}.account-popover a:hover{background:var(--j-surface2)}.header-user{overflow:hidden}.header-user img{width:100%;height:100%;object-fit:cover;border-radius:50%}.footer-rights{direction:ltr}.footer-rights .rights-ar{direction:rtl}.footer-rights .rights-translation{direction:ltr}.form-success{background:rgba(49,166,106,.14);border:1px solid rgba(49,166,106,.38);padding:12px 14px;border-radius:12px;color:#b8f5d1}.profile-shell{max-width:1180px;margin:0 auto;padding:120px 24px 60px}.profile-hero{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:28px;background:linear-gradient(135deg,var(--j-surface2),var(--j-surface));border:1px solid var(--j-border);border-radius:22px}.profile-avatar{width:94px;height:94px;border-radius:50%;background:var(--j-primary);display:grid;place-items:center;font-size:36px;font-weight:800;overflow:hidden}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-hero h1{margin:4px 0}.profile-hero p,.profile-hero small{color:var(--j-muted)}.profile-stats{display:flex;gap:12px}.profile-stats a{min-width:100px;padding:14px;background:#0003;border:1px solid var(--j-border);border-radius:14px;text-align:center}.profile-stats b,.profile-stats span{display:block}.profile-stats b{font-size:24px;color:var(--j-primary)}.profile-stats span{color:var(--j-muted);font-size:13px}.profile-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;margin-top:18px}.profile-panel{padding:22px;background:var(--j-surface);border:1px solid var(--j-border);border-radius:18px}.profile-panel form{display:grid;gap:13px}.profile-panel label{display:grid;gap:7px}.profile-panel input,.profile-panel textarea{width:100%;box-sizing:border-box}.profile-message{margin-top:16px}.danger-btn{background:#8d2020;color:#fff;border:1px solid #c33;border-radius:10px;padding:11px 16px;cursor:pointer}.live-stage{position:relative}.live-channel-logo{position:absolute;z-index:8;pointer-events:none;filter:drop-shadow(0 4px 12px #000a)}.live-logo-top-right{top:22px;right:22px}.live-logo-top-left{top:22px;left:22px}.live-logo-bottom-right{bottom:64px;right:22px}.live-logo-bottom-left{bottom:64px;left:22px}.live-onair{position:absolute;z-index:9;top:22px;left:22px;background:#0a0a0acc;color:#fff;padding:8px 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em}.live-onair i{display:inline-block;width:8px;height:8px;background:#ff3131;border-radius:50%;margin-inline-end:6px;box-shadow:0 0 0 5px #ff313130;animation:livepulse 1.3s infinite}@keyframes livepulse{50%{box-shadow:0 0 0 10px #ff313100}}.live-ticker{position:absolute;z-index:10;left:0;right:0;bottom:0;height:44px;background:var(--ticker-bg);color:var(--ticker-color);display:flex;overflow:hidden;font-weight:700}.live-ticker>b{display:grid;place-items:center;padding:0 18px;background:#0004;white-space:nowrap;z-index:2}.live-ticker-window{overflow:hidden;flex:1;display:flex;align-items:center}.live-ticker-track{display:inline-block;white-space:nowrap;min-width:max-content;animation:tickerMove var(--ticker-duration) linear infinite;padding-inline-start:100%}@keyframes tickerMove{to{transform:translateX(-100%)}}html[dir=rtl] .live-ticker-track{animation-name:tickerMoveRtl}@keyframes tickerMoveRtl{to{transform:translateX(100%)}}@media(max-width:760px){.header-register{display:none}.profile-shell{padding:96px 14px 40px}.profile-hero{grid-template-columns:auto 1fr}.profile-stats{grid-column:1/-1}.profile-grid{grid-template-columns:1fr}.footer-rights{flex-direction:column!important;gap:7px!important}.live-channel-logo{max-width:85px!important}.live-onair{top:12px;left:12px}.live-ticker{height:38px;font-size:12px}.live-ticker>b{padding:0 10px}} /* RC2.4 footer social */ .footer-grid-social{grid-template-columns:2fr 1fr 1fr auto}.footer-social{min-width:150px}.social-icons{display:flex;gap:10px;align-items:center}.social-icons a{width:42px;height:42px;border:1px solid #30363d;border-radius:12px;display:grid!important;place-items:center;background:#15191e;color:#fff!important;font-size:20px;font-weight:800;transition:.2s}.social-icons a:hover{border-color:var(--j-primary);background:rgba(216,166,42,.12);transform:translateY(-2px)}@media(max-width:820px){.footer-grid-social{grid-template-columns:1fr 1fr}.footer-social{grid-column:1/-1}}@media(max-width:560px){.footer-grid-social{grid-template-columns:1fr}.footer-social{grid-column:auto}} /* RC2.4 social SVG icons */ .social-icons a img{width:26px;height:26px;display:block;object-fit:contain} .social-icons a:hover img{transform:scale(1.06)} /* RC2.4.1 UI reliability fix — social SVG, locale menu, search */ .language-menu{position:relative;z-index:130} .language-popover{z-index:140} .language-popover.open{display:flex!important;flex-direction:column} .global-search{pointer-events:none} .global-search.open{pointer-events:auto} #searchToggle,#languageToggle{position:relative;z-index:131} .footer-social .social-icons{display:flex;align-items:center;gap:12px;margin-top:12px} .footer-social .social-icons a{width:40px;height:40px;padding:8px;border-radius:50%;display:flex!important;align-items:center;justify-content:center;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10)} .footer-social .social-icons a img{display:block!important;width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;object-fit:contain!important} .footer-social .social-icons a:hover{border-color:var(--j-primary);background:rgba(216,166,42,.12);transform:translateY(-2px)} /* FINAL QA — editorial pages + robust 404 */ .error-body{background:radial-gradient(circle at 50% 28%,rgba(216,166,42,.13),transparent 34%),var(--j-background,#0e1013)!important;color:var(--j-text,#fff)!important}.error-page{min-height:100vh;padding:118px 20px 54px!important;display:grid!important;place-items:center!important}.error-card{position:relative;overflow:hidden;width:min(780px,100%);padding:clamp(34px,6vw,70px);border:1px solid rgba(255,255,255,.08);border-radius:28px;background:linear-gradient(145deg,rgba(27,31,36,.95),rgba(14,16,19,.98));box-shadow:0 35px 100px rgba(0,0,0,.45);text-align:center}.error-glow{position:absolute;width:360px;height:360px;border-radius:50%;background:rgba(216,166,42,.11);filter:blur(30px);top:-230px;left:50%;transform:translateX(-50%);pointer-events:none}.error-kicker,.editorial-kicker{position:relative;color:var(--j-primary,#d8a62a);font-size:11px;font-weight:800;letter-spacing:.22em}.error-card .error-code{position:relative;margin-top:20px;font-size:clamp(92px,18vw,180px);line-height:.8;font-weight:900;color:transparent;-webkit-text-stroke:2px rgba(216,166,42,.7);text-shadow:0 20px 70px rgba(216,166,42,.08)}.error-card h1{font-size:clamp(28px,4vw,46px);margin:28px 0 8px;color:#fff}.error-card p{max-width:600px;margin:0 auto;color:#9ca6af;line-height:1.9}.error-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px} .editorial-page-shell{min-height:75vh;padding:76px 0 70px;background:var(--j-background,#0e1013)}.editorial-hero{position:relative;overflow:hidden;min-height:390px;display:grid;align-items:end;border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 78% 25%,rgba(216,166,42,.20),transparent 34%),linear-gradient(135deg,#171b21,#0e1013 65%)}.editorial-hero:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,var(--j-background,#0e1013))}.privacy-hero{background:radial-gradient(circle at 24% 25%,rgba(61,159,161,.15),transparent 34%),linear-gradient(135deg,#171b21,#0e1013 65%)}.editorial-hero-content{position:relative;z-index:2;width:min(1180px,calc(100% - 36px));margin:0 auto;padding:70px 0 56px}.editorial-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:rgba(216,166,42,.13);border:1px solid rgba(216,166,42,.25);font-size:28px;margin-bottom:24px}.editorial-hero h1{font-size:clamp(42px,7vw,78px);margin:10px 0 12px;line-height:1.08}.editorial-hero p{max-width:740px;margin:0;color:#aab2ba;font-size:clamp(16px,2vw,20px);line-height:1.9}.privacy-update{display:inline-flex;margin-top:22px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:#c8ced4;font-size:12px}.editorial-content-wrap{width:min(1180px,calc(100% - 36px));margin:0 auto;padding-top:34px}.editorial-block,.editorial-card,.privacy-document,.privacy-toc{border:1px solid #272d34;background:#15191f;border-radius:20px}.editorial-block{padding:clamp(24px,4vw,44px);margin-bottom:34px}.section-tag{display:inline-flex;color:var(--j-primary,#d8a62a);font-size:12px;font-weight:800;margin-bottom:8px}.editorial-block h2,.section-heading h2,.editorial-card h2,.privacy-document h2{color:#fff;margin:8px 0 12px}.editorial-block p,.editorial-card p,.privacy-document p,.privacy-document li{color:#aeb6be;line-height:2}.editorial-section{margin:44px 0}.section-heading{margin-bottom:18px}.section-heading span{color:var(--j-primary,#d8a62a);font-size:12px;font-weight:800}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-grid article{padding:22px;border:1px solid #252b32;border-radius:18px;background:linear-gradient(145deg,#171b20,#12161b);min-height:185px}.feature-grid i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(216,166,42,.10);font-style:normal;font-size:22px}.feature-grid h3{margin:16px 0 7px;color:#fff}.feature-grid p{margin:0;color:#929ca5;line-height:1.8;font-size:13px}.editorial-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0}.editorial-card{padding:28px}.editorial-card>span{font-size:30px}.editorial-quote{text-align:center;padding:54px 18px;margin-top:42px;border-top:1px solid #242a31}.editorial-quote>span{color:var(--j-primary,#d8a62a);font-size:24px}.editorial-quote blockquote{max-width:780px;margin:14px auto 26px;color:#fff;font-size:clamp(21px,3vw,32px);line-height:1.7;font-weight:700}.privacy-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}.privacy-toc{position:sticky;top:96px;padding:14px;display:grid;gap:4px}.privacy-toc b{padding:10px;color:#fff}.privacy-toc a{padding:9px 10px;border-radius:9px;color:#8f99a3;font-size:13px}.privacy-toc a:hover{background:#20262d;color:#fff}.privacy-document{padding:clamp(22px,4vw,42px)}.privacy-document section{scroll-margin-top:100px;padding:5px 0 28px;margin-bottom:20px;border-bottom:1px solid #262c33}.privacy-document section:last-child{border-bottom:0;margin-bottom:0}.privacy-document ul{padding-inline-start:22px}.privacy-document .details-btn{display:inline-flex;margin-top:8px}@media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr)}.privacy-layout{grid-template-columns:1fr}.privacy-toc{position:static;grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.editorial-page-shell{padding-top:68px}.editorial-hero{min-height:330px}.editorial-hero-content{padding-bottom:42px}.feature-grid,.editorial-two{grid-template-columns:1fr}.privacy-toc{grid-template-columns:1fr}.error-card{border-radius:22px}.error-card .error-code{-webkit-text-stroke-width:1px}} /* FINAL QA — About Page Builder */ .about-pro-page{min-height:75vh;padding:78px 0 70px;background:radial-gradient(circle at 55% 0,rgba(216,166,42,.06),transparent 28%),var(--j-background,#0e1013)} .about-pro-hero,.about-pro-wrap{width:min(1180px,calc(100% - 36px));margin-inline:auto}.about-pro-hero{min-height:500px;border:1px solid #2a3036;border-radius:36px;background:radial-gradient(circle at 50% 20%,rgba(216,166,42,.16),transparent 35%),linear-gradient(145deg,#23231f,#151a20 58%,#11151a);display:grid;place-items:center;text-align:center;padding:54px 20px;overflow:hidden}.about-pro-hero-inner{max-width:760px}.about-pro-logo{width:min(150px,34vw);height:150px;object-fit:contain;margin:0 auto 18px}.about-pro-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(216,166,42,.28);background:rgba(216,166,42,.08);border-radius:999px;padding:9px 15px;color:#c8c2b5}.about-pro-badge img,.about-pro-icon img,.about-pro-info h2 img,.about-pro-quote img,.about-pro-actions img{width:24px;height:24px;object-fit:contain}.about-pro-hero h1{font-size:clamp(42px,7vw,76px);margin:30px 0 14px;color:#fff;line-height:1.05}.about-pro-hero p{margin:0;color:#aeb5bc;font-size:clamp(16px,2vw,20px);line-height:1.9}.about-pro-wrap{padding-top:30px}.about-pro-panel{border:1px solid #262d34;border-radius:28px;background:linear-gradient(145deg,rgba(22,27,33,.98),rgba(15,19,24,.98));padding:clamp(25px,4vw,44px);margin-bottom:24px;box-shadow:0 20px 60px rgba(0,0,0,.12)}.about-pro-panel>h2,.about-pro-heading h2{position:relative;margin:0 0 20px;color:#fff;font-size:clamp(24px,3vw,34px)}.about-pro-panel>h2:before,.about-pro-heading h2:before{content:"";display:inline-block;width:6px;height:24px;border-radius:5px;background:var(--j-primary,#d8a62a);margin-inline-end:12px;vertical-align:-2px}.about-pro-long{color:#b3bac1;line-height:2.15;font-size:16px}.about-pro-heading p{color:#a7afb7;line-height:1.9;margin:-8px 0 24px}.about-pro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.about-pro-feature{min-height:190px;padding:20px;border:1px solid #293039;border-radius:18px;background:linear-gradient(145deg,#1a1f25,#15191f)}.about-pro-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(216,166,42,.09);border:1px solid rgba(216,166,42,.18);font-size:24px}.about-pro-icon span{font-size:24px}.about-pro-feature h3{color:#fff;margin:18px 0 8px;font-size:18px}.about-pro-feature p{color:#9fa8b0;margin:0;line-height:1.85;font-size:13px}.about-pro-sections{display:grid;gap:16px}.about-pro-info{margin:0}.about-pro-info h2{display:flex;align-items:center;gap:10px}.about-pro-info h2:before{content:""}.about-pro-info h2>span:first-child:not(:last-child){font-size:26px}.about-pro-info p{color:#abb3bb;line-height:2;margin:0}.about-pro-quote{text-align:center;margin:24px 0;padding:54px 22px;border:1px solid #252c33;border-radius:26px;background:#12161c}.about-pro-quote>div{font-size:30px;color:#9ca4ab}.about-pro-quote strong{display:block;color:#fff;font-size:clamp(19px,2.6vw,29px);line-height:1.8;max-width:850px;margin:16px auto 0}.about-pro-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:12px 0 30px}.about-pro-actions .btn{display:inline-flex;align-items:center;gap:8px;min-width:145px;justify-content:center}.about-pro-actions .btn img{width:20px;height:20px}@media(max-width:900px){.about-pro-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.about-pro-page{padding-top:68px}.about-pro-hero{min-height:390px;border-radius:25px}.about-pro-logo{height:110px}.about-pro-grid{grid-template-columns:1fr}.about-pro-panel{border-radius:21px;padding:22px}.about-pro-actions .btn{flex:1;min-width:130px}} /* About hero layout fix — logo -> badge -> title -> subtitle */ .about-pro-hero-inner{ width:100%; max-width:760px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; } .about-pro-logo{ display:block; flex:0 0 auto; width:min(150px,34vw); height:150px; max-width:100%; object-fit:contain; margin:0 0 26px !important; position:static !important; transform:none !important; } .about-pro-badge{ position:static !important; transform:none !important; flex:0 0 auto; margin:0 0 28px !important; z-index:1; } .about-pro-hero h1{ position:static !important; transform:none !important; width:100%; margin:0 0 16px !important; } .about-pro-hero p{ width:100%; margin:0 !important; } @media(max-width:620px){ .about-pro-logo{height:110px;width:min(120px,32vw);margin-bottom:20px !important} .about-pro-badge{margin-bottom:22px !important} .about-pro-hero h1{margin-bottom:12px !important} } /* FINAL QA — Persian typography (IranYekan only when lang="fa") */ @font-face{ font-family:"IranYekan"; src:url("../fonts/persian/iranyekan-Regular.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; } @font-face{ font-family:"IranYekan"; src:url("../fonts/persian/iranyekan-Bold.ttf") format("truetype"); font-style:normal; font-weight:700 900; font-display:swap; } html[lang="fa"] body, html[lang="fa"] button, html[lang="fa"] input, html[lang="fa"] select, html[lang="fa"] textarea, html[lang="fa"] table{ font-family:"IranYekan","PNU",Tahoma,Arial,sans-serif!important; } html[lang="fa"] b, html[lang="fa"] strong, html[lang="fa"] .watch-btn, html[lang="fa"] .details-btn{ font-family:"IranYekan","PNU",Tahoma,Arial,sans-serif!important; font-weight:700; } /* Jamal PWA — Splash & Install UI */ .jamal-splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(216,166,42,.12),transparent 34%),#0b0e12;opacity:1;visibility:visible;transition:opacity .42s ease,visibility .42s ease}.jamal-splash.is-leaving{opacity:0;visibility:hidden}.jamal-splash-card{text-align:center;padding:30px 24px}.jamal-splash-logo{display:block;width:min(34vw,170px);height:min(34vw,170px);object-fit:contain;margin:0 auto 20px;filter:drop-shadow(0 12px 30px rgba(216,166,42,.15))}.jamal-splash-name{font-size:clamp(22px,4vw,34px);font-weight:700;color:#fff}.jamal-splash-loader{width:54px;height:3px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:18px auto 0}.jamal-splash-loader::after{content:"";display:block;width:45%;height:100%;border-radius:inherit;background:var(--j-primary,#d8a62a);animation:jamalSplashLoad 1s ease-in-out infinite alternate}@keyframes jamalSplashLoad{from{transform:translateX(-85%)}to{transform:translateX(180%)}} .jamal-install-overlay{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.66);backdrop-filter:blur(8px);display:none;align-items:flex-end;justify-content:center;padding:18px}.jamal-install-overlay.is-open{display:flex}.jamal-install-card{width:min(100%,520px);background:#11161d;border:1px solid rgba(216,166,42,.25);box-shadow:0 28px 70px rgba(0,0,0,.55);border-radius:24px;padding:22px;color:#fff;position:relative}.jamal-install-top{display:flex;gap:14px;align-items:center}.jamal-install-icon{width:58px;height:58px;border-radius:16px;background:#1a2028;border:1px solid rgba(216,166,42,.25);padding:8px;object-fit:contain}.jamal-install-copy{min-width:0;flex:1}.jamal-install-copy h3{margin:0 0 5px;font-size:20px}.jamal-install-copy p{margin:0;color:#aeb5bf;line-height:1.8;font-size:14px}.jamal-install-close{border:0;background:transparent;color:#aeb5bf;font-size:26px;cursor:pointer;padding:2px 8px;position:absolute;top:10px;inset-inline-end:10px}.jamal-install-steps{margin:18px 0 0;background:#1a2028;border-radius:16px;padding:14px;color:#d6d9df;line-height:1.9;font-size:14px}.jamal-install-actions{display:flex;gap:10px;margin-top:18px}.jamal-install-actions button{flex:1;border-radius:13px;padding:12px 14px;font:inherit;font-weight:700;cursor:pointer}.jamal-install-now{background:var(--j-primary,#d8a62a);border:1px solid var(--j-primary,#d8a62a);color:#111}.jamal-install-later{background:#1a2028;border:1px solid #303741;color:#fff}@media(min-width:720px){.jamal-install-overlay{align-items:center}.jamal-install-card{padding:26px}} /* === Jamal legacy Splash visual — imported from old platform === */ /* ===================================================== JAMAL SPLASH ===================================================== */ #jamalSplash { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483647; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #090909; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.9s ease, visibility 0.9s ease; } /* ===================================================== BACKGROUND ===================================================== */ #jamalSplashBg { position: absolute; inset: 0; background: radial-gradient( circle at 50% 45%, rgba(255, 193, 7, 0.13) 0%, rgba(255, 193, 7, 0.055) 25%, rgba(0, 0, 0, 0.65) 58%, #070707 100% ); } /* ===================================================== AMBIENT GOLDEN LIGHT ===================================================== */ #jamalSplashAmbient { position: absolute; left: 50%; top: 50%; width: min(75vw, 700px); height: min(75vw, 700px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(255, 215, 90, 0.075) 0%, rgba(255, 193, 7, 0.035) 28%, transparent 68% ); filter: blur(35px); opacity: 0.75; animation: jamalAmbientPulse 4.5s ease-in-out infinite; } /* ===================================================== CONTENT ===================================================== */ #jamalSplashContent { position: relative; z-index: 10; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; box-sizing: border-box; animation: jamalContentIn 1s ease-out forwards; } /* ===================================================== LOGO BOX ===================================================== */ #jamalSplashLogoBox { position: relative; width: min(75vw, 360px); min-height: 150px; display: flex; align-items: center; justify-content: center; } /* ===================================================== LOGO ===================================================== */ #jamalSplashLogo { position: relative; z-index: 5; display: block; width: auto; max-width: 100%; max-height: 190px; object-fit: contain; opacity: 0; filter: drop-shadow( 0 0 10px rgba(255, 193, 7, 0.08) ); animation: jamalLogoIn 1.1s 0.15s cubic-bezier( 0.22, 1, 0.36, 1 ) forwards; } /* ===================================================== GOLDEN GLOW BEHIND LOGO ===================================================== */ #jamalSplashGlow { position: absolute; z-index: 1; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient( circle, rgba(255, 215, 90, 0.20) 0%, rgba(255, 193, 7, 0.09) 32%, rgba(255, 193, 7, 0.025) 55%, transparent 74% ); filter: blur(18px); opacity: 0.75; animation: jamalLogoGlow 3.8s ease-in-out infinite; } /* ===================================================== SOFT GOLDEN LIGHT لا يوجد خط مائل ===================================================== */ #jamalSplashLight { position: absolute; z-index: 6; width: 125%; height: 125%; left: -12.5%; top: -12.5%; border-radius: 50%; pointer-events: none; background: radial-gradient( ellipse at center, transparent 38%, rgba(255, 215, 90, 0.025) 48%, rgba(255, 215, 90, 0.075) 55%, rgba(255, 193, 7, 0.025) 63%, transparent 75% ); filter: blur(7px); opacity: 0; animation: jamalGoldenBreath 3.8s 0.7s ease-in-out infinite; } /* ===================================================== TITLE ===================================================== */ #jamalSplashTitle { margin-top: 18px; font-family: inherit; font-size: clamp( 25px, 6vw, 38px ); font-weight: 700; line-height: 1.4; color: #ffffff; opacity: 0; animation: jamalTextIn 0.8s 0.55s ease-out forwards; } /* ===================================================== SUBTITLE ===================================================== */ #jamalSplashSubtitle { margin-top: 5px; font-family: inherit; font-size: clamp( 13px, 3vw, 17px ); font-weight: 400; color: rgba( 255, 255, 255, 0.62 ); letter-spacing: 0.2px; opacity: 0; animation: jamalTextIn 0.8s 0.75s ease-out forwards; } /* ===================================================== LOADER ===================================================== */ #jamalSplashLoader { position: relative; width: 115px; height: 2px; margin-top: 28px; overflow: hidden; border-radius: 20px; background: rgba( 255, 255, 255, 0.10 ); opacity: 0; animation: jamalTextIn 0.7s 0.95s ease-out forwards; } /* ===================================================== LOADER GOLD ===================================================== */ #jamalSplashLoader span { position: absolute; top: 0; right: 100%; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, transparent, rgba(218, 169, 0, 0.75), rgba(255, 225, 120, 1), rgba(218, 169, 0, 0.75), transparent ); animation: jamalLoader 2s 0.8s ease-out forwards; } /* ===================================================== HIDDEN STATE ===================================================== */ #jamalSplash.jamalSplashHidden { opacity: 0; visibility: hidden; pointer-events: none; } /* ===================================================== ANIMATION ===================================================== */ @keyframes jamalContentIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ===================================================== LOGO ENTRY ===================================================== */ @keyframes jamalLogoIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } } /* ===================================================== LOGO GLOW ===================================================== */ @keyframes jamalLogoGlow { 0%, 100% { transform: scale(0.92); opacity: 0.55; } 50% { transform: scale(1.08); opacity: 0.9; } } /* ===================================================== GOLDEN BREATH ===================================================== */ @keyframes jamalGoldenBreath { 0% { opacity: 0; transform: scale(0.88); } 25% { opacity: 0.25; } 50% { opacity: 0.55; transform: scale(1.02); } 75% { opacity: 0.25; } 100% { opacity: 0; transform: scale(1.08); } } /* ===================================================== TEXT ===================================================== */ @keyframes jamalTextIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================== AMBIENT PULSE ===================================================== */ @keyframes jamalAmbientPulse { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); } } /* ===================================================== LOADER ===================================================== */ @keyframes jamalLoader { from { right: 100%; } to { right: 0; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 600px) { #jamalSplashLogo { max-width: 75vw; max-height: 145px; } #jamalSplashLogoBox { min-height: 120px; } #jamalSplashGlow { width: 190px; height: 190px; } } /* ===================================================== REDUCE MOTION ===================================================== */ @media (prefers-reduced-motion: reduce) { #jamalSplash, #jamalSplash * { animation: none !important; transition: none !important; } } /* === Jamal legacy PWA install banner visual — imported from old platform === */ /* ========================================================= JAMAL PLATFORM PWA INSTALL BANNER install-banner.css ========================================================= */ #jamal-install-banner { --jamal-gold: #d8a62a; --jamal-gold-light: #f0c85a; --jamal-gold-dark: #9f7414; --jamal-bg: rgba(14, 17, 22, 0.97); --jamal-bg-light: rgba(27, 31, 39, 0.96); --jamal-text: #ffffff; --jamal-muted: #b9bec7; --jamal-border: rgba(216, 166, 42, 0.32); position: fixed; left: 20px; right: 20px; bottom: 20px; width: auto; max-width: 760px; margin: 0 auto; direction: rtl; display: block; z-index: 2147483000; color: var(--jamal-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif; opacity: 0; visibility: hidden; transform: translateY(35px) scale(.97); filter: blur(4px); transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1), filter .45s ease, visibility .45s ease; } /* ========================================================= ACTIVE ========================================================= */ #jamal-install-banner.jamal-install-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); filter: blur(0); } /* ========================================================= INNER CARD ========================================================= */ #jamal-install-banner .jamal-install-inner { position: relative; display: flex; align-items: center; gap: 20px; padding: 18px 22px; overflow: hidden; background: linear-gradient( 135deg, rgba(27, 31, 39, .98), rgba(12, 15, 20, .98) ); border: 1px solid var(--jamal-border); border-radius: 20px; box-shadow: 0 18px 55px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 0 35px rgba(216, 166, 42, .07); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* ========================================================= GOLD TOP LINE ========================================================= */ #jamal-install-banner .jamal-install-inner::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 2px; background: linear-gradient( 90deg, transparent, var(--jamal-gold), var(--jamal-gold-light), var(--jamal-gold), transparent ); opacity: .85; } /* ========================================================= PROGRESS ========================================================= */ #jamal-install-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; overflow: hidden; z-index: 10; pointer-events: none; } #jamal-install-progress span { display: block; width: 100%; height: 100%; transform-origin: right center; background: linear-gradient( 90deg, var(--jamal-gold-dark), var(--jamal-gold-light), var(--jamal-gold) ); box-shadow: 0 0 8px rgba(216, 166, 42, .75); transition: transform .1s linear, background 1s ease; } /* ========================================================= LAST 5 SECONDS ========================================================= */ #jamal-install-banner.jamal-install-ending .jamal-install-progress span { background: linear-gradient( 90deg, #a85d20, #d98b32, #b96b20 ); box-shadow: 0 0 10px rgba(217, 139, 50, .55); } /* ========================================================= CLOSE BUTTON ========================================================= */ #jamal-install-close { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .78); font-size: 21px; line-height: 1; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; z-index: 20; } #jamal-install-close:hover { transform: rotate(90deg); color: #ffffff; background: rgba(180, 45, 45, .8); border-color: rgba(255, 100, 100, .35); } #jamal-install-close:active { transform: rotate(90deg) scale(.92); } /* ========================================================= LOGO ========================================================= */ #jamal-install-banner .jamal-install-logo { flex: 0 0 auto; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: radial-gradient( circle at center, rgba(216, 166, 42, .18), rgba(216, 166, 42, .04) 65%, transparent 70% ); border: 1px solid rgba(216, 166, 42, .25); box-shadow: 0 0 25px rgba(216, 166, 42, .08); overflow: hidden; } #jamal-install-banner .jamal-install-logo img { width: 82%; height: 82%; object-fit: contain; display: block; filter: drop-shadow( 0 5px 12px rgba(0, 0, 0, .4) ); } /* ========================================================= CONTENT ========================================================= */ #jamal-install-banner .jamal-install-content { flex: 1; min-width: 0; padding-left: 18px; } /* ========================================================= TITLE ========================================================= */ #jamal-install-banner .jamal-install-title { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } #jamal-install-banner .jamal-install-title strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.5; color: #ffffff; } #jamal-install-banner .jamal-install-title small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--jamal-muted); } #jamal-install-banner .jamal-install-icon { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(216, 166, 42, .10); border: 1px solid rgba(216, 166, 42, .22); font-size: 19px; } /* ========================================================= IOS INSTRUCTIONS ========================================================= */ #jamal-install-banner .jamal-ios-instructions { margin-top: 12px; padding: 12px; border-radius: 13px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .055); animation: jamalIOSFade .35s ease both; } #jamal-install-banner .jamal-ios-title { margin-bottom: 8px; color: var(--jamal-gold-light); font-size: 13px; font-weight: 800; } #jamal-install-banner .jamal-ios-steps { display: flex; flex-wrap: wrap; gap: 8px 15px; } #jamal-install-banner .jamal-ios-step { display: flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.6; color: var(--jamal-muted); } #jamal-install-banner .jamal-ios-step strong { color: #ffffff; font-weight: 700; } #jamal-install-banner .jamal-step-number { width: 22px; height: 22px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(216, 166, 42, .12); border: 1px solid rgba(216, 166, 42, .25); color: var(--jamal-gold-light); font-size: 10px; font-weight: 800; } #jamal-install-banner .jamal-share-icon { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-right: 3px; border-radius: 5px; color: var(--jamal-gold-light); background: rgba(216, 166, 42, .1); font-weight: 800; } /* ========================================================= INSTALL BUTTON ========================================================= */ #jamal-install-button { position: relative; min-width: 185px; height: 46px; margin-top: 12px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; border: 1px solid rgba(255, 215, 100, .42); border-radius: 12px; background: linear-gradient( 135deg, #d8a62a, #b98316 ); color: #15110a; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 7px 22px rgba(216, 166, 42, .18), 0 1px 0 rgba(255, 255, 255, .25) inset; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } #jamal-install-button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 30px rgba(216, 166, 42, .28), 0 1px 0 rgba(255, 255, 255, .3) inset; } #jamal-install-button:active { transform: translateY(0) scale(.97); } #jamal-install-button:focus-visible { outline: 2px solid var(--jamal-gold-light); outline-offset: 3px; } /* ========================================================= BUTTON ICON ========================================================= */ #jamal-install-banner .jamal-button-icon { font-size: 17px; transition: transform .25s ease; } #jamal-install-button:hover .jamal-button-icon { transform: translateY(-2px); } /* ========================================================= GOLD SHINE ========================================================= */ #jamal-install-banner .jamal-button-shine { position: absolute; top: -50%; right: -100%; width: 45%; height: 200%; transform: rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .78), rgba(255, 240, 180, .95), transparent ); filter: blur(2px); opacity: 0; pointer-events: none; } /* هذه الكلاس سيضيفها JavaScript بعد ثانيتين من ظهور الشريط. */ #jamal-install-banner .jamal-button-shine.jamal-shine-active { animation: jamalGoldSweep 1.15s cubic-bezier(.4, 0, .2, 1) forwards; } /* ========================================================= OPTIONAL ATTENTION ========================================================= */ #jamal-install-banner .jamal-button-attention { animation: jamalButtonAttention .55s ease; } /* ========================================================= IOS BUTTON MODE ========================================================= */ #jamal-install-banner.jamal-ios-mode #jamal-install-button { background: linear-gradient( 135deg, #d8a62a, #b98316 ); } /* ========================================================= INSTALLED / HIDDEN ========================================================= */ #jamal-install-banner[hidden] { display: none !important; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes jamalGoldSweep { 0% { right: -100%; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { right: 150%; opacity: 0; } } @keyframes jamalButtonAttention { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 70% { transform: scale(.985); } 100% { transform: scale(1); } } @keyframes jamalIOSFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { #jamal-install-banner { left: 10px; right: 10px; bottom: 10px; max-width: none; } #jamal-install-banner .jamal-install-inner { gap: 12px; padding: 16px 14px 15px; border-radius: 18px; } #jamal-install-banner .jamal-install-logo { width: 52px; height: 52px; border-radius: 14px; } #jamal-install-banner .jamal-install-content { padding-left: 7px; } #jamal-install-banner .jamal-install-title { gap: 7px; } #jamal-install-banner .jamal-install-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; font-size: 16px; } #jamal-install-banner .jamal-install-title strong { font-size: 15px; } #jamal-install-banner .jamal-install-title small { font-size: 10px; } #jamal-install-button { width: 100%; min-width: 0; height: 43px; font-size: 13px; margin-top: 10px; } #jamal-install-close { top: 7px; left: 7px; width: 27px; height: 27px; font-size: 19px; } #jamal-install-banner .jamal-ios-steps { display: block; } #jamal-install-banner .jamal-ios-step { margin-bottom: 7px; font-size: 10px; } #jamal-install-banner .jamal-ios-step:last-child { margin-bottom: 0; } } /* ========================================================= SMALL PHONES ========================================================= */ @media (max-width: 390px) { #jamal-install-banner { left: 7px; right: 7px; bottom: 7px; } #jamal-install-banner .jamal-install-inner { padding: 14px 11px; } #jamal-install-banner .jamal-install-logo { width: 45px; height: 45px; border-radius: 12px; } #jamal-install-banner .jamal-install-title strong { font-size: 14px; } #jamal-install-banner .jamal-install-title small { font-size: 9px; } #jamal-install-button { height: 41px; font-size: 12px; } } /* ========================================================= LANDSCAPE MOBILE ========================================================= */ @media ( max-width: 900px ) and ( orientation: landscape ) { #jamal-install-banner { bottom: 7px; left: 15px; right: 15px; } #jamal-install-banner .jamal-install-inner { padding: 11px 18px; gap: 15px; } #jamal-install-banner .jamal-install-logo { width: 45px; height: 45px; } #jamal-install-button { margin-top: 6px; height: 39px; } } /* ========================================================= TABLET ========================================================= */ @media ( min-width: 701px ) and ( max-width: 1100px ) { #jamal-install-banner { max-width: 680px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #jamal-install-banner, #jamal-install-banner *, #jamal-install-banner::before, #jamal-install-banner::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================= SAFE AREA - iPHONE / iPAD ========================================================= */ @supports ( padding-bottom: env(safe-area-inset-bottom) ) { #jamal-install-banner { bottom: calc( 10px + env(safe-area-inset-bottom) ); } } /* ========================================================= DARK MODE ========================================================= */ @media (prefers-color-scheme: dark) { #jamal-install-banner .jamal-install-inner { background: linear-gradient( 135deg, rgba(24, 28, 36, .98), rgba(9, 12, 17, .99) ); } } /* ========================================================= HIGH CONTRAST ========================================================= */ @media (prefers-contrast: more) { #jamal-install-banner .jamal-install-inner { border-color: rgba(216, 166, 42, .65); } #jamal-install-banner .jamal-install-title strong { color: #ffffff; } #jamal-install-banner .jamal-install-title small { color: #d4d7dc; } }