/* Upuk TV — Basbas شەكلىدىكى كۆرۈنۈش (تېلۋىزور + يانفۇن) */
/* ====== Ukij Tuz Tom — ئىشلەتكۈچى تەلىپى (2026-09-20) ======
ئىشلەتكۈچى: «بۇ يەرگىمۇ ukij tuz tom قوشۇلسۇن خەت نورمال چىقسۇن».
Ukij Tuz Tom — ئۇيغۇرچە ئەڭ كۆپ ئىشلىتىلىدىغان تۈز خەت نۇسخىسى.
ئەۋۋەل قىلىپ قويۇلىدۇ (font-family تىزىملىكىنىڭ بېشىدا) —
ئەگەر ئۈسكۈنىدە بولمىسا، ALKATIP قا چۈشىدۇ (زاپاس). */
@font-face{
font-family:'Ukij Tuz Tom';
src:url('fonts/UkijTuzTom.ttf') format('truetype');
font-weight:normal;font-style:normal;font-display:swap
}
/* ====== ئۇيغۇرچە خەت نۇسخىسى: ALKATIP Tor ====== */
@font-face{
font-family:'ALKATIP';
src:url('fonts/alkatip.ttf') format('truetype');
font-weight:normal;font-style:normal;font-display:swap
}
@font-face{
font-family:'ALKATIP';
src:url('fonts/alkatip-bold.ttf') format('truetype');
font-weight:bold;font-style:normal;font-display:swap
}
:root{
/* ئۈستى بالداق ئېگىزلىكى — بىرلا يەردە بەلگىلىنىپ، ھەممە يەردە ئىشلىتىلىدۇ
(.top / main / .player / .mobile-notice / .free-banner). ئىشلەتكۈچى:
«ئۈستى بالداقتىكىلەرنىڭ ئەتراپى بەك چوڭ» — شۇڭا 92px دىن 84px گە
كىچىكلىتىلدى (تار ئېكراندا 78 → 72). */
--toph:84px;
--bg:#0b0b0f;
--panel:#15151c;
--panel2:#1d1d27;
--yellow:#ffc107;
--yellow2:#ffd54f;
--txt:#ffffff;
--dim:#9ba0ad;
--line:#282833;
--focus:#ffc107;
--g1:#4caf50; --g2:#9c27b0; --g3:#f44336; --g4:#2196f3; --g5:#ff7043; --g6:#00bcd4;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);overflow:hidden}
body{
font-family:"Ukij Tuz Tom","ALKATIP","UKIJ Tuz","Alpida Unicode","Microsoft Uighur","Noto Naskh Arabic",Tahoma,system-ui,sans-serif;
font-size:18px;direction:rtl;
}
button,input,select,textarea{font-family:inherit}
.hidden{display:none!important}
/* ============ 顶栏 ============
⚠ ئىشلەتكۈچى: «ئېكران ئۆزگىرىپ ئۈستىدىكى بەلگە خەتلەر پاتماي ئېكراننى
ئۆزگەرتىۋېتىدىكەن». سەۋەبى: ئۇزۇن ئەزا كودى (U0CB66DE8) كونۇپكا ئىچىگە
يېزىلغاندا ئۈستى بالداقنىڭ ئىچىدىكىلەر سىغماي، flex ئۇلارنى قىسىپ ياكى
ئىككىنچى قۇرغا چۈشۈرۈپ، بالداق ئېگىزلىكى ئۆزگىرىپ، ئاستىدىكى مەزمۇن
سەكرەپ كېتەتتى. ھازىر:
• ھەر بىر رايون flex-shrink:0 — ھېچقايسىسى قىسىلمايدۇ
• .top شىددەتلىك overflow:hidden — ئارتۇقچە ھېچنەرسە چىقىپ كەتمەيدۇ
• white-space:nowrap — خەت ئىككى قۇرغا چۈشمەيدۇ */
.top{
position:fixed;top:0;right:0;left:0;height:var(--toph);z-index:40;
display:flex;align-items:center;gap:14px;padding:0 22px;
overflow:hidden;
background:linear-gradient(180deg,#0b0b0f 60%,rgba(11,11,15,0.85) 85%,transparent);
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand .mark{
width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:23px;
background:var(--yellow);color:#1a1500
}
.brand b{font-size:25px;color:var(--yellow);letter-spacing:.5px;font-weight:800}
.tools{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.tool{
display:flex;align-items:center;gap:8px;background:#22222d;border:1.5px solid transparent;
color:#dfe3ec;border-radius:30px;padding:11px 20px;font-size:18px;cursor:pointer;transition:.08s;
white-space:nowrap;flex:0 0 auto
}
/* ئەزا بولغاندا 👑 بەلگىسى ئالتۇن رەڭدە يېنىپ تۇرىدۇ (خەت ئۆزگەرمەيدۇ) */
.tool.vip{background:#2b2410;border-color:rgba(255,193,7,.55)}
.tool.vip .t-ic{color:var(--yellow)}
.tool.focus{background:var(--yellow);color:#1a1500;border-color:var(--yellow);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.top-right{margin-right:auto;flex:1 1 auto;min-width:0;display:flex;gap:10px;align-items:center;justify-content:flex-end;overflow:hidden;white-space:nowrap}
.date{color:#cfd3dd;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.2px}
.clock{color:#cfd3dd;font-size:17px;font-variant-numeric:tabular-nums;min-width:56px;text-align:center}
/* 🆕 2026-10-04: ۋاقىت رامكىسى — رامكا بىلەن خەت تەڭ مەركەزلەشتۈرۈلىدۇ */
.clockbox{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;background:rgba(18,18,27,.72);border:1px solid rgba(255,255,255,.14);border-radius:9px;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.clockbox .date{font-size:16px;line-height:1;color:#e7eaf2;white-space:nowrap}
.clockbox .clock{font-size:17px;line-height:1;min-width:54px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;color:#fff}
.weather{color:var(--yellow);font-size:17px;white-space:nowrap;display:flex;align-items:center;gap:6px}
/* ---- تور ھالىتى بەلگىسى ----
تور بار : يېشىل رەڭلىك 📶 + «تور بار»
تور يوق : قىزىل رەڭلىك 📵 + «ۋاي فاي ئۇلانمىدى» (پۇل-پۇل ئېتىپ كۆزگە چېلىقىدۇ) */
.wifi{color:#3ddc84;font-size:20px;display:flex;align-items:center;gap:6px;white-space:nowrap;
transition:color .15s;border-radius:20px;padding:2px 8px}
.wifi .wf-ic{font-size:20px;line-height:1}
.wifi .wf-tx{font-size:15px;letter-spacing:.2px}
.wifi.off{color:#ff5a5a;background:rgba(255,90,90,.13);animation:wifiBlink 1.6s ease-in-out infinite}
@keyframes wifiBlink{0%,100%{opacity:1}50%{opacity:.45}}
/* ============ 主区 ============ */
main{position:absolute;top:var(--toph);bottom:0;right:0;left:0;overflow:hidden}
.view{display:none;position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;padding:0 26px 80px}
.view.active{display:block}
.view::-webkit-scrollbar{width:8px}
.view::-webkit-scrollbar-thumb{background:#2a2a36;border-radius:8px}
/* ============ 分类页签 ============ */
/* ئوڭ تەرەپتىن باشلاپ سولغىچە بىر رەتتە (ئوتتۇرىغا مەركەزلەشمەيدۇ) */
.tabs{
display:flex;gap:40px;align-items:center;justify-content:flex-start;
padding:10px 34px 16px;overflow-x:auto;white-space:nowrap;scrollbar-width:none
}
.tabs::-webkit-scrollbar{display:none}
.tab{
background:none;border:0;color:#c9ced9;font-size:26px;padding:8px 2px 12px;cursor:pointer;
position:relative;transition:.1s;border-radius:8px;flex:0 0 auto
}
.tab.on{color:var(--yellow);font-weight:700}
.tab.on::after{
content:"";position:absolute;bottom:2px;right:0;left:0;height:4px;border-radius:3px;background:var(--yellow)
}
.tab.focus::after{content:"";position:absolute;bottom:2px;right:0;left:0;height:4px;border-radius:3px;background:var(--focus);opacity:.7}
.tab.focus{color:#fff;outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* دۆلەت (رايون) سۈزگۈچى — تۈر تاللىغۇچلىرى ئاستىدا.
فوكۇس ئۈستىدىكى تۈرلەرنىڭكىگە ئوخشاش ئېنىق كۆرۈنسۇن:
• تاللانغان (on) → سېرىق تولدۇرۇش
• فوكۇس (focus) → سېرىق رامكا + يېنىك سېرىق تولدۇرۇش + كۆتۈرۈلۈش
• ئىككىسى بىللە → قېلىن سېرىق ھالقا («توختايدىغان» ھالەت ئېنىق بىلىنسۇن) */
.area-chips{margin:10px 0 6px;flex-wrap:wrap;gap:10px}
.area-chips .tab{font-size:20px;padding:7px 16px;border:2px solid rgba(255,255,255,.16);
border-radius:18px;background:rgba(255,255,255,.05);transition:.12s}
.area-chips .tab.on{background:var(--yellow);color:#1a1500;border-color:var(--yellow);font-weight:700}
.area-chips .tab.focus{
border-color:var(--focus);background:rgba(255,193,7,.22);color:#fff;box-shadow:0 0 0 3px rgba(255,193,7,.45);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.area-chips .tab.on.focus{
background:var(--yellow);color:#1a1500;border-color:#fff;
box-shadow:0 0 0 3px rgba(255,193,7,.65)
}
/* ============ 大横幅轮播 ============ */
.banner{display:flex;gap:20px;overflow-x:auto;padding:6px 2px 20px;scroll-behavior:smooth;scrollbar-width:none}
.banner::-webkit-scrollbar{display:none}
.slide{
flex:0 0 min(58%,760px);height:330px;border-radius:20px;overflow:hidden;position:relative;
cursor:pointer;border:2.5px solid transparent;background:#171722;transition:.1s
}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide .cap{
position:absolute;bottom:0;right:0;left:0;padding:26px 24px 20px;font-size:26px;font-weight:700;
background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);text-shadow:0 3px 12px #000
}
.slide.focus{border-color:var(--focus);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ============ 自动轮播 ============ */
.carousel{position:relative;height:330px;border-radius:20px;overflow:hidden;margin:6px 2px 22px;background:#171722}
.cs{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;cursor:pointer}
/* ⚠ كارۇسېل ئۆتكۈنچىسى — ئىكران «لىڭشاش» كېسىلىنىڭ ئاساسلىق سەۋەبى.
كونا كود: transition:opacity .8s ease → 800ms داۋامىدا كونا ۋە يېڭى
رەسىم ئۈستى-ئۈستى چىقىپ «قوش كۆرۈنۈش» (ghost) ھاسىل قىلاتتى
(ئوتتۇرىدا 0.5/0.5 ئارىلاشما). ئۈستىگە 1498×328 لىك ئىككى چوڭ رەسىمنى
ھەر كادر blend قىلىش ئاجىز تېلېۋىزور GPU دا كادر چۈشۈرەتتى.
ھازىر: كونا رەسىم دەرھال يوشۇرۇلىدۇ (ئارىلاشما يوق)، يېڭى رەسىم
پەقەت 220ms لىك يۇمشاق كىرىش بىلەن چىقىدۇ — «سەكرەش» ھېس قىلىنمايدۇ
ھەم GPU غا يېنىك. */
/* ⚠ ئەمەلىي ئۆلچەم: چىقىۋاتقان رەسىم ئاستا يوشۇرۇلغاچقا، كىرىۋاتقان
رەسىم بىلەن ھەرگىز ئارىلاشماسلىقى ئۈچۈن ئۇنىڭ ئۆتكۈنچىسىنى
پۈتۈنلەي ئۆچۈرىمىز. پەقەت كىرىۋاتقان رەسىمگىلا يۇمشاق كىرىش بېرىمىز:
· .cs (چىقىۋاتقان) : transition يوق → شەفافلىق 0 غا دەرھال چۈشىدۇ
· .cs.on (كىرىۋاتقان): 0 → 1 نى 220ms دا يۇمشاق ئالىدۇ
شۇنىڭ بىلەن ئىككى رەسىم ھەرگىز ئۈستى-ئۈستى كۆرۈنمەيدۇ (ghost يوق),
ھەم GPU غا ئېغىرلىق يوق. */
.cs{transition:none}
.cs.on{opacity:1;transition:opacity .22s linear}
/* يېڭى رەسىم ئالدىنقى قاتلامدا چىقسۇن — كونا رەسىم ئۇنىڭ ئاستىدا
يوشۇرۇلغان ھالدا قالسۇن (شۇڭا ئارىلاشما ھەرگىز بولمايدۇ) */
.cs.on{z-index:2}
/* كونا WebView دا transition ئىشلىمىسە رەسىم يوشۇرۇن قالماسلىقى ئۈچۈن */
@supports not (transition:opacity .22s){.cs{transition:none}}
.cs img{width:100%;height:100%;object-fit:cover;display:block}
.cs .cs-cap{
position:absolute;bottom:0;right:0;left:0;padding:26px 24px 30px;font-size:27px;font-weight:700;
background:linear-gradient(0deg,rgba(0,0,0,.92),transparent);text-shadow:0 3px 12px #000
}
.cs .cs-sub{font-size:17px;color:#ffd54f;font-weight:500;margin-top:6px}
.carousel.focus{outline:3px solid var(--focus);outline-offset:2px}
.dots{position:absolute;bottom:14px;left:24px;display:flex;gap:8px;z-index:3}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:.18s}
.dots i.on{background:var(--yellow);width:26px;border-radius:5px}
/* ============ 彩色大按钮 ============
⚠ 2026-09-20 (ئىشلەتكۈچى تەلىپى): «توپلام» چىقىرىۋېتىلگەندىن كېيىن
كۇنۇپكا 5 → 4 بولدى. ئىلگىرى بۇ يەردە `repeat(5,1fr)` قاتتىق
يېزىلغان ئىدى — 4 كۇنۇپكا بولسا ئاخىرقىسى يالغۇز قۇرغا چۈشۈپ،
ئوڭ تەرەپتە بوش ئورۇن قالاتتى.
ھەل: ئىستون سانىنى كۇنۇپكا سانىغا قاراپ ئاپتوماتىك بەلگىلەيمىز
(`auto-fit` + `minmax`). شۇنداق قىلغاندا كېيىنچە كۇنۇپكا قوشساق
ياكى ئالساق CSS نى قايتا تەڭشەشنىڭ ھاجىتى يوق — ھەر قانداق
چوڭ-كىچىك ئېكرانغا ئۆزى ماسلىشىدۇ. */
.quick{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;padding:4px 2px 24px
}
/* يانفوندا ئىستونلار تار بولغاچقا چەكنى كىچىكلىتىمىز (تۆۋەندىكى
media قائىدىلىرىمۇ بار — بۇ يەردە پەقەت زاپاس) */
@media (max-width:900px),(pointer:coarse){
.quick{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
}
.qbtn{
border-radius:18px;padding:24px 14px;text-align:center;cursor:pointer;border:2.5px solid transparent;
transition:.1s;display:flex;flex-direction:column;align-items:center;gap:12px;
min-width:0
}
.qbtn .ic{font-size:40px;line-height:1}
.qbtn .tx{font-size:21px;font-weight:700;max-width:100%;overflow-wrap:break-word}
.qbtn.focus{border-color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.6);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.c1{background:var(--g1)}.c2{background:var(--g2)}.c3{background:var(--g3)}
.c4{background:var(--g4)}.c5{background:var(--g5)}.c6{background:var(--g6)}
/* ============ 区块标题 ============ */
.sec{
display:flex;align-items:center;gap:12px;font-size:25px;font-weight:800;color:#fff;
margin:12px 0 16px
}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.sec .more{font-size:16px;color:var(--yellow);font-weight:500;cursor:pointer}
/* «ھەقسىز» بېتىدىكى ئەسكەرتىش */
.freetip{
margin:6px 0 16px;padding:13px 20px;border-radius:12px;font-size:17px;color:#ffe9a8;
background:linear-gradient(90deg,rgba(255,193,7,.16),rgba(255,193,7,.04));
border:1.5px solid rgba(255,193,7,.38)
}
.freetip b{color:var(--yellow)}
/* ============ 海报网格（竖版卡片） ============ */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 18px;padding:2px 0 26px}
/* ھەممە كارتىنىڭ ئۆلچىمى بىردەك: كەڭلىك 1/1، ئېگىزلىك 2/3 نىسبەتتە
aspect-ratio كونا WebView دا ئىشلىمەيدۇ — padding-top ئۇسۇلىنى ئىشلىتىمىز */
.pcard{border-radius:16px;overflow:hidden;cursor:pointer;border:2.5px solid transparent;transition:.1s;background:#14141d}
.pcard .pwrap{position:relative;width:100%;height:0;padding-top:143%;overflow:hidden}
.pcard .pimg{
position:absolute;top:0;left:0;width:100%;height:100%;display:block;overflow:hidden;background:#12121b
}
/* ئىچىدىكى ھەقىقىي رەسىم — قانداق نىسبەتتە بولسىمۇ تولۇق تولدۇرۇپ قىرقىلىدۇ */
.pcard .pimg>.pimg-in{
position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;display:block
}
/* 图片占位（加载中 / 失败），避免出现空白或破图 */
.pcard .pimg.ph{display:grid;place-items:center;background:linear-gradient(150deg,#171722,#101018)}
.pcard .pimg.ph>span{font-size:44px;opacity:.25}
/* ⚠ ئىكران تىترەشىنى يوقىتىش ئۈچۈن قوشۇلدى.
ئىلگىرى JS رەسىم يۈكلەنگەندە 🎬 نى DOM دىن ئۆچۈرەتتى —
بۇ قوشۇمچە layout ۋە paint قوزغىلاتتى (12 كارتا × ئايرىم-ئايرىم كېلىش).
ھازىر span DOM دا قالىدۇ، پەقەت CSS بىلەن يوشۇرۇلىدۇ: .ph بولمىسا
span كۆرۈنمەيدۇ، ![]()
ئۇنىڭ ئۈستىدە (position:absolute) چىقىدۇ. */
.pcard .pimg:not(.ph)>span{display:none!important}
/* رەسىم قاتتىق «سەكرەپ» چىقماسلىقى ئۈچۈن يۇمشاق كۆرۈنمە چىقىرىش.
0.18s بىلەن ئەنە شۇ ئۆزگىرىش ھېس قىلىنمايدۇ. */
.pcard .pimg>.pimg-in{opacity:0;transition:opacity .18s ease-out}
.pcard .pimg:not(.ph)>.pimg-in{opacity:1}
/* كونا WebView لاردا transition ئىشلىمىسە رەسىم يوشۇرۇن قالماسلىقى ئۈچۈن */
@supports not (transition:opacity .18s){.pcard .pimg>.pimg-in{opacity:1}}
.pcard .ptx{
padding:10px 6px 12px;font-size:17px;line-height:1.4;height:56px;overflow:hidden;text-align:center
}
.pcard.focus{border-color:var(--focus);box-shadow:0 12px 32px rgba(0,0,0,.7);z-index:3;outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.pcard .badge{
position:absolute;top:8px;right:8px;z-index:3;background:linear-gradient(135deg,#ffd54f,#e8a317);color:#1a1500;
font-size:13px;font-weight:800;padding:3px 10px;border-radius:6px;
box-shadow:0 3px 10px rgba(0,0,0,.5);letter-spacing:.5px
}
.pcard .badge.free{background:linear-gradient(135deg,#4ade80,#16a34a);color:#04220f}
.pcard .eps{
position:absolute;top:8px;left:8px;background:rgba(0,0,0,.75);color:#fff;font-size:13px;padding:3px 9px;border-radius:6px
}
.pcard .pdate{
position:absolute;bottom:8px;right:8px;z-index:3;max-width:80%;
background:rgba(18,16,28,.82);border:1px solid rgba(120,200,255,.4);
color:#bfe6ff;font-size:11px;font-weight:700;line-height:1.3;
padding:2px 7px;border-radius:6px;white-space:nowrap;
box-shadow:0 1px 4px rgba(0,0,0,.35)
}
.pcat{
position:absolute;bottom:8px;left:8px;z-index:3;max-width:84%;
background:rgba(18,16,28,.82);border:1px solid rgba(255,197,49,.45);
color:#ffe08a;font-size:12px;font-weight:700;line-height:1.2;
padding:2px 9px;border-radius:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
box-shadow:0 2px 8px rgba(0,0,0,.45)
}
/* ============ 横版行（继续观看） ============ */
.hrow{display:flex;gap:18px;overflow-x:auto;padding:2px 2px 22px;scrollbar-width:none}
.hrow::-webkit-scrollbar{display:none}
.hcard{flex:0 0 300px;border-radius:14px;overflow:hidden;cursor:pointer;border:2.5px solid transparent;transition:.1s;background:#14141d}
.hcard{display:flex;flex-direction:column}
.hcard img{width:100%;height:170px;object-fit:cover;display:block;flex:0 0 170px;background:#101018}
.hcard .htx{padding:9px 6px;font-size:17px;text-align:center;height:56px;overflow:hidden;line-height:1.5}
.hcard.focus{border-color:var(--focus);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ============ 搜索 ============ */
.searchbar{display:flex;gap:12px;align-items:center;padding:6px 0 16px}
.sinput{
flex:1;background:#1b1b24;border:2px solid var(--line);border-radius:30px;padding:15px 24px;
color:#fff;font-size:21px;min-height:60px;display:flex;align-items:center
}
.sinput.focus,.sinput.on{border-color:var(--focus)}
.kb{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:9px;margin-top:14px}
.key{background:#1b1b24;border:2px solid var(--line);border-radius:12px;padding:13px 0;text-align:center;
font-size:21px;cursor:pointer;transition:.14s}
.key.focus{background:var(--yellow);color:#1a1500;border-color:var(--yellow);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ============ 详情 ============ */
.detail{display:flex;gap:32px;padding-top:16px}
.poster{width:290px;flex:0 0 290px;border-radius:18px;overflow:hidden;box-shadow:0 18px 46px rgba(0,0,0,.6)}
.poster img{width:100%;display:block}
.dinfo{flex:1;min-width:0}
.dinfo h1{font-size:40px;margin:0 0 14px;line-height:1.2}
.dmeta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.dmeta span{background:#1b1b24;border:1px solid var(--line);padding:6px 15px;border-radius:9px;font-size:17px;color:var(--dim)}
.desc{color:#c3c9d6;font-size:19px;line-height:1.85;margin:8px 0 22px;max-height:160px;overflow:auto}
/* ---- قىسىم تاللاش رايونى ----
مۇھىم: قىسىم كونۇپكىلىرى ئۈستىدىكى 5 كونۇپكىنى بېسىپ قويمايدۇ.
.pl-info ئىچىدە ھەر بىر بۆلەك ئۆز ئارىلىقىنى ساقلايدۇ، ئاستىدىن بوشلۇق
قالدۇرىمىز — بولمىسا تېلېۋىزوردا «بېسىلمايدۇ» دەپ ھېس قىلىنىدۇ. */
.pl-info > *{flex:0 0 auto}
/* ⚠ ئاستىغا زاپاس بوشلۇق (110px): تېلېۋىزوردا ↓ بىلەن قىسىم تورىنىڭ ئاستىنقى
قۇرىغا كەلگەندە، فوكۇس قىلىنغان قىسىم `.view` نىڭ ئاستىدىكى 80px padding
نىڭ ئاستىدا يوشۇرۇنۇپ قالاتتى — ئىشلەتكۈچى «قىسىم تاللىيالمايۋاتىمەن»
دەيتتى. بۇ بوشلۇق تورنىڭ ئاستىدا يېتەرلىك ئارىلىق يارىتىپ، ئاستىنقى
قۇرمۇ تولۇق سىيرىلىپ كۆرۈنۈشىگە شارائىت ھازىرلايدۇ. */
.ep-grid{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 110px}
.pl-sec + .ep-grid{margin-top:10px}
#plEps{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.ep{background:#1b1b24;border:2px solid var(--line);border-radius:10px;min-width:72px;padding:12px 15px;
text-align:center;font-size:18px;cursor:pointer;transition:.08s}
.ep.on{background:var(--yellow);color:#1a1500;border-color:var(--yellow);font-weight:700}
.ep.focus{border-color:var(--focus);position:relative;z-index:2;outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ============ 按钮 ============ */
.btn{
background:var(--yellow);color:#1a1500;border:0;font-size:20px;font-weight:700;
padding:14px 30px;border-radius:30px;cursor:pointer;transition:.16s
}
.btn.ghost{background:#22222d;color:#e7eaf2;border:2px solid var(--line)}
.btn.focus{box-shadow:0 0 0 3px rgba(255,193,7,.45);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ============ قويۇش بېتى (قويغۇچ + تەپسىلات بىرلەشتۈرۈلدى) ============ */
/* ئۈستى بالداق (92px/78px) ئاستىدا تۇرىدۇ — ئۇ شۇنىڭ ئۈستىدە قوزغىلىدۇ */
.player{
position:fixed;top:var(--toph);left:0;right:0;bottom:0;z-index:35;
background:#0a0c16;
/* ⚠ ئېكران سولغا يۆتكەلدى: RTL دە بىرىنچى ئىستون ئوڭدا — شۇڭا كەڭ ئىستون
(1.62fr، سىن) ئىككىنچى ئىستونغا (سول)، تار ئىستون (ئۇچۇر تاختىسى)
بىرىنچى ئىستونغا (ئوڭ). سىن چوڭلۇقى ئوخشاشلا چوڭ قالىدۇ. */
display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,1.62fr);
grid-template-rows:minmax(0,1fr) auto;gap:14px;padding:14px 20px 18px;overflow:hidden
}
/* قويۇش بېتى ئېچىق ۋاقىتتا: پۈتۈن ئارقا كۆرۈنۈش ۋە ئۈستى بالداق ماسلىشىدۇ */
body.watch-open{background:#0a0a14 url('watch-bg.jpg') center/cover no-repeat}
body.watch-open .top{background:#0a0c16}
body.watch-open .mobile-notice,body.watch-open .free-banner{display:none!important}
/* ---- سول: سىن مەيدانى ---- */
/* ⚠ ئىشلەتكۈچى: «قويۇش بېتىدىكى ئېكراننى سولغا يۆتكىۋەت».
RTL بەتتە grid نىڭ بىرىنچى ئىستونى ئوڭ تەرەپكە توغرا كېلىدۇ — شۇڭا سىن
مەيدانى ئىلگىرى ئوڭدا ئىدى. ئىككىنچى ئىستون (سول) غا يۆتكىۋاتىمىز:
سىن سولدا، ئۇچۇر/قىسىم تاختىسى ئوڭدا تۇرىدۇ. */
.pl-stage{
grid-column:2;grid-row:1;position:relative;min-height:0;overflow:hidden;
background:#000;border:1px solid rgba(255,255,255,.10);border-radius:16px
}
.pl-stage>video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1}
/* ⚠ object-fit نى app.js نىڭ __upukFitVideo() ى ئېكرانغا قاراپ بەلگىلەيدۇ */
/* يۈكلىنىۋاتقاندا كۆرۈنىدىغان پوستېر تامچىسى */
.pl-wall{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;display:grid;
grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:2px;overflow:hidden;background:#0c0c14}
.pl-wall img{width:100%;height:100%;object-fit:cover;opacity:.4;filter:saturate(.85)}
.pl-wall .wv{position:absolute;top:0;left:0;right:0;bottom:0;
background:radial-gradient(circle at 50% 45%,rgba(6,8,16,.35),rgba(4,5,12,.92))}
/* 水印 + تور سۈرئىتى */
.wm{
position:absolute;top:14px;right:18px;font-size:22px;font-weight:800;color:var(--yellow);
text-shadow:0 3px 14px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9);z-index:5;pointer-events:none;opacity:.95;
letter-spacing:.6px;text-align:right
}
.wm .wm-sp{display:block;font-size:13px;font-weight:600;color:#dfe6f5;letter-spacing:0;margin-top:2px;opacity:.9}
.wm.hidden{display:none}
.pl-loading{position:absolute;top:0;left:0;right:0;bottom:0;z-index:6;place-items:center;
grid-template-rows:auto auto;align-content:center;justify-items:center;gap:16px;
color:#fff;font-size:20px;background:rgba(4,6,14,.30)}
.pl-ring{width:64px;height:64px;border-radius:50%;border:5px solid rgba(255,255,255,.16);
border-top-color:#f44336;border-right-color:#f44336;animation:pl-spin 1s linear infinite}
@keyframes pl-spin{to{transform:rotate(360deg)}}
/* ⚙ 2026-09-25 (ئىشلەتكۈچى تەلىپى): «قويۇۋاتىدۇ…» خېتى ئەمدى ھەرگىز
كۆرۈنمەيدۇ — ئىشلەتكۈچى «بەزىدە ئۆچمەيدۇ» دەپ ئەرز قىلغان ئىدى.
بۇففېرلىنىش ئايلىنىشى (pl-ring) يەنىلا قالىدۇ، ئەمما خەت يوق. */
/* ★ 2026.10.21 — ئىشلەتكۈچى تەلىپى: «فيلم يۈكلىنىۋاتىدۇ… ساقلاپ تۇرۇڭ»
تېكىستى ئوڭدا كۆرۈنسۈن؛ فىلىم چىققاندا ئاپتوماتىك ئۆچسۈن (JS: __upukBindLoadAutoHide).
2026-09-25 دا «بەزىدە ئۆچمەيدۇ» دەپ يوشۇرۇلغان ئىدى — ھازىر ئاپتوماتىك
يوشۇرۇش قايتا يېزىلدى، شۇڭا تېكىستنى قايتارمىز. */
.pl-ltx{display:block!important;font-weight:700;text-shadow:0 2px 10px #000;
color:#fff;font-size:20px;text-align:center;line-height:1.4;max-width:80vw}
/* ئاستىدىكى كونترول بالداق */
.pl-bottom{
position:absolute;bottom:0;right:0;left:0;z-index:7;display:flex;align-items:center;justify-content:center;
gap:12px;padding:16px 22px;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);
opacity:0;transition:.3s;pointer-events:none;flex-wrap:wrap
}
.player.show-ui .pl-bottom{opacity:1;pointer-events:auto}
.pl-bottom .pl-btn{min-width:58px;text-align:center;font-size:19px}
.pl-btn{background:rgba(10,14,26,.72);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:18px;
padding:10px 19px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:.12s}
.pl-btn.focus{background:var(--yellow);color:#1a1500;border-color:var(--yellow);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.pl-btn.go{background:var(--yellow);color:#1a1500;border-color:var(--yellow);font-weight:700}
/* ---- سول: ئۇچۇر ۋە كونۇپكىلار ئەمدى ئوڭ تەرەپتە ----
⚠ ئىشلەتكۈچى «ئېكراننى سولغا يۆتكىۋەت» دىگەچكە، ئۇچۇر تاختىسى بىرىنچى
ئىستونغا (RTL دە = ئوڭ تەرەپ) يۆتكەلدى. ئىچىدىكى رايونلار ئۆز-ئارا
بېسىپ قالمايدۇ: ھەر بىرى flex ئېلېمېنت بولۇپ، قىسقارمايدۇ (flex-shrink:0). */
.pl-info{
grid-column:1;grid-row:1;min-height:0;overflow-y:auto;
display:flex;flex-direction:column;
background:rgba(9,13,24,.74);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:16px 18px
}
.pl-info > *{flex:0 0 auto}
.pl-info::-webkit-scrollbar,.cm-list::-webkit-scrollbar{width:7px}
.pl-info::-webkit-scrollbar-thumb,.cm-list::-webkit-scrollbar-thumb{background:#2a3550;border-radius:8px}
.pl-info-top{display:flex;gap:10px;margin-bottom:12px}
.pl-title{font-size:28px;margin:0 0 8px;line-height:1.35;color:#fff}
.pl-epnow{color:var(--yellow);font-size:17px;font-weight:600;margin-bottom:12px}
/* ===== 2026-09-17: «يىلى / رايون / تۈرى» بىر قاتاردا =====
ئىشلەتكۈچى: «يىلى، رايون، تۈرى دىگەندەك نەرسىلەر ئاستى-ئۈستى تۇرۇپ كۆپ
يەرنى ئىگەللەپ، ئاستىدىكى قىسىملارنى توسۇۋالدىكەن». ئىلگىرى ھەر بىرى
ئايرىم قۇر ئىدى (column) — 3-4 قۇر ئېگىزلىك ئالىتتى. ھازىر ئۇلارنى
بىر قاتارغا يانمۇ-يان تىزىمىز (inline, ئاپتوماتىك ئۆرۈلۈش بىلەن) —
شۇنىڭ بىلەن ئېگىزلىك 3-4 ھەسسە ئازىيىپ، قىسىم تىزىملىكىگە ئورۇن بوشايدۇ.
ھەر بىر پارچە «يىلى 2026» شەكلىدە ئىخچام كۆرۈنىدۇ. */
.pl-meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
gap:6px 18px;margin:6px 0 12px}
.pl-meta .mr{display:flex;align-items:baseline;gap:6px;font-size:16px;
color:var(--dim);white-space:nowrap}
.pl-meta .mr span{color:#8f96a8;font-size:15px}
.pl-meta .mr b{color:#fff;font-weight:600}
/* ئايرىغۇچ نۇقتا — قاتار ئىچىدە پارچىلارنى ئېنىق ئايرىپ بېرىدۇ */
.pl-meta .mr + .mr::before{content:"·";color:#5a6480;margin-inline-end:14px;
font-weight:700}
/* «ئارتىس» ئۇزۇن بولىدۇ (بىر نەچچە ئىسىم) — ئۇنىڭغا پۈتۈن قۇر بېرىمىز،
ئۇزۇن بولسا ئۆزى ئىچىدە ئۆرۈلىدۇ (white-space نى بوش قويىمىز). */
.pl-meta .mr-wide{flex:1 1 100%;white-space:normal;min-width:0}
.pl-meta .mr-wide b{overflow-wrap:anywhere}
/* 5 كونۇپكا: خەت ئوقۇشۇچان چوڭلۇقتا، تېلېۋىزوردىن بىر قاراشلا ئېنىق كۆرۈنىدۇ.
مۇھىم: grid ئىچىدە ئۆز ئورنىنى ئېنىق ساقلايدۇ (قىسىم تىزىملىكى بېسىپ قالمايدۇ) */
.pl-acts{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:6px 0 18px;position:relative;z-index:2}
.pl-act{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);border-radius:14px;
color:#e6ecf8;padding:14px 4px;display:flex;flex-direction:column;align-items:center;gap:8px;
cursor:pointer;transition:.12s;min-height:78px;height:auto;justify-content:center}
.pl-act .ic{font-size:28px;line-height:1}
.pl-act .tx{font-size:16px;font-weight:700;white-space:nowrap;letter-spacing:.2px}
.pl-act:hover{border-color:rgba(255,193,7,.5)}
.pl-act.focus{border-color:var(--focus);background:rgba(255,193,7,.2);
box-shadow:0 6px 18px rgba(255,193,7,.22);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.pl-act.on{background:rgba(255,193,7,.22);border-color:var(--yellow);color:var(--yellow)}
.pl-sec{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:#cfd6e6;margin:6px 0 10px}
.pl-sec>span:last-child{color:var(--dim);font-weight:500;font-size:15px}
/* ---- ئاستى: باھا رايونى ----
ئىشلەتكۈچى: «باھا يېزىش كۆزنىكى بەكلا چوڭ، قىسىملارنى توسۇۋېلىپ فوكۇس
يۆتكەلمىدى… باھا يازدىغان يەرنى كىچىكلىتەيلى، ئوڭ تەرەپتە بولسۇن».
ئىلگىرى بۇ رايون پۈتۈن كەڭلىكتە (grid-column:1/-1)، ئېگىزلىكى 38vh ئىدى —
1366x768 لىك تېلېۋىزوردا ئۇچۇر تاختىسى (قىسىم تىزىملىكى) ئاستىدىن چىقىپ
كېتىپ، باھا بالدىقى ئۇنىڭ ئۈستىنى يېپىۋېلىۋاتاتتى — شۇڭا قىسىم
تاللىغىلى بولمايتتى. ھازىر:
• ئوڭ تەرەپكە (سىن ئاستىغا، grid-column:1) يۆتكەلدى
• ئىخچام قىلىندى (كىچىكرەك خەت، ئازراق ئىچكى بوشلۇق)
• سول تەرەپتىكى ئۇچۇر تاختىسى پۈتۈن ئېگىزلىككە ئېرىشتى (grid-row:1/span 2) */
.pl-comments{
background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;overflow:hidden;
margin-bottom:6px;flex:0 0 auto
}
/* ===== 2026-09-17: باھا رايونىنى يىغىش/يېيىش =====
ئىشلەتكۈچى: «باھا ياكى ئىنكاس يازدىغان يېرى قىسىملارنى توسۇۋېلىپ، قىسىم
ئالماشتۇرۇشقا تەسىر يەتتى». ھازىر باھا رايونى ئەسلىدە يىغىلغان تۇرىدۇ:
پەقەت «💬 باھا · N ▾» دېگەن بىر قۇر كۆرۈنىدۇ — قىسىم تىزىملىكىگە پۈتۈن
ئورۇن قالدۇرىدۇ. بېسىلسا ئاندىن باھا يېزىش ۋە ئوقۇش رايونى ئېچىلىدۇ. */
.pl-comments.collapsed{padding:6px 10px}
.pl-comments.collapsed .cm-body{display:none}
.cm-head{cursor:pointer;margin:0 !important;padding:4px 2px;border-radius:9px;
transition:.12s;user-select:none}
.cm-head .cm-caret{margin-inline-start:auto;color:var(--dim);font-size:14px;
transition:transform .18s}
.pl-comments:not(.collapsed) .cm-head .cm-caret{transform:rotate(180deg)}
.cm-head.focus{background:rgba(255,193,7,.14);box-shadow:0 0 0 3px rgba(255,193,7,.42);
outline:2px solid rgba(255,224,126,.9);outline-offset:1px}
.cm-head:active{background:rgba(255,255,255,.08)}
.cm-body{display:flex;flex-direction:column;min-height:0}
/* ئۇچۇر تاختىسى ئىككى قۇرنى ئىگىلەيدۇ — قىسىم تىزىملىكىگە پۈتۈن ئېگىزلىك قالىدۇ
(ئېكران سولغا يۆتكەلگەچكە، ئۇچۇر تاختىسى بىرىنچى ئىستون = ئوڭ تەرەپ) */
.pl-info{grid-column:1;grid-row:1 / span 2}
.pl-comments .pl-sec{margin:0 0 6px;font-size:15px;gap:8px}
.pl-comments .pl-sec>span:last-child{font-size:13px}
.cm-form{display:flex;align-items:center;gap:8px;margin-bottom:7px;border-radius:22px;
padding:3px;transition:.12s}
/* پۈتۈن باھا رامكىسى بىرلا فوكۇس نۇقتىسى — تىزگىنەكتە OK بېسىلسا ئېكران
كۇنۇپكىسى ئېچىلىدۇ. فوكۇس ئېنىق كۆرۈنسۇن (ئۈستى تۈرلەرنىڭكىگە ئوخشاش). */
.cm-form.focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(255,193,7,.45);
background:rgba(255,193,7,.10);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.cm-form.focus .cm-input{border-color:var(--focus);background:rgba(255,193,7,.10)}
.cm-ava{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:linear-gradient(135deg,#ffd54f,#e8a317);
color:#1a1500;font-weight:800;display:grid;place-items:center;font-size:15px}
.cm-input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);
border-radius:18px;color:#fff;font-size:15px;padding:9px 14px;outline:none;font-family:inherit}
.cm-input:focus{border-color:var(--yellow)}
.cm-input::placeholder{color:#7d8598}
.pl-comments .pl-btn{padding:8px 14px;font-size:15px;border-radius:18px;min-width:0}
.cm-list{overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-top:4px;max-height:60px}
.cm-item{display:flex;gap:9px;align-items:flex-start}
.cm-item .cm-ava{width:28px;height:28px;flex:0 0 28px;font-size:14px;
background:linear-gradient(135deg,#4a6bd6,#2d3f8f);color:#fff}
.cm-body{flex:1;min-width:0;background:rgba(255,255,255,.05);border-radius:12px;padding:7px 11px}
.cm-h{display:flex;gap:10px;align-items:baseline;margin-bottom:3px}
.cm-h b{color:var(--yellow2);font-size:14px}
.cm-h span{color:#7d8598;font-size:12px}
.cm-tx{color:#e6eaf3;font-size:14px;line-height:1.6;word-break:break-word}
.cm-empty{color:var(--dim);font-size:14px;padding:7px;text-align:center}
/* بىۋاستە قانال: ئۇچۇر/باھا رايونى كۆرۈنمەيدۇ */
.player.live .pl-acts,.player.live .pl-comments,.player.live .pl-meta{display:none}
/* ---- ئىزدەش (seek) OSD — فىلىم ئالدىغا/كەينىگە ماڭدۇرغاندا مەركەزدە ۋاقىت كۆرسىتىدۇ ----
ئىشلەتكۈچى: «فىلىم قويۇلىۋاتقاندا يۈگۈرتىپ ئالدىغا ماڭدۇرغاندا قانچە مىنۇت
ماڭدى چىقىپ تۇردىغان بولۇش». ھازىر ئىزدەش قىلغاندا ئوتتۇرىدا چوڭ ۋاقىت OSD
چىقىدۇ: يۆنىلىش بەلگىسى + ئىلگىرىلەش بالدىقى + «نۆۋەتچان / جەمئىي» ۋاقىت. */
.pl-seek{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:9;
display:flex;flex-direction:column;align-items:center;gap:14px;
background:rgba(8,11,20,.74);border:1px solid rgba(255,255,255,.14);
border-radius:20px;padding:24px 46px;min-width:360px;max-width:80vw;
pointer-events:none;opacity:0;transition:opacity .14s;backdrop-filter:blur(4px)}
.pl-seek.show{opacity:1}
.pl-seek .ps-ico{font-size:48px;line-height:1;color:var(--yellow)}
.pl-seek .ps-bar{width:360px;max-width:64vw;height:11px;border-radius:7px;
background:rgba(255,255,255,.16);overflow:hidden}
.pl-seek .ps-fill{height:100%;width:0%;border-radius:7px;
background:linear-gradient(90deg,#ffd54f,#e8a317);transition:width .12s}
.pl-seek .ps-time{display:flex;gap:11px;align-items:baseline;font-variant-numeric:tabular-nums}
/* نۆۋەتچان ۋاقىت چوڭ ۋە ئېنىق، جەمئىي ۋاقىت كىچىك ۋە سۇس —
RTL بويىچە ئوڭدا نۆۋەتچان ۋاقىت تۇرىدۇ (بالداق ئوڭدىن تولىدۇ، بىردەك) */
.pl-seek .ps-time #psCur{font-size:38px;font-weight:800;color:#fff;line-height:1}
.pl-seek .ps-time .ps-sep{color:#6b7488;font-weight:500;font-size:24px}
.pl-seek .ps-time #psDur{font-size:24px;font-weight:600;color:#9aa3b5}
/* تار ئېكراندا ئازراق كىچىكلەتەيلى */
@media (max-width:900px),(pointer:coarse){
.pl-seek{padding:18px 34px;min-width:300px;gap:11px}
.pl-seek .ps-ico{font-size:38px}
.pl-seek .ps-bar{width:280px;height:9px}
.pl-seek .ps-time #psCur{font-size:30px}
.pl-seek .ps-time .ps-sep{font-size:20px}
.pl-seek .ps-time #psDur{font-size:20px}
}
/* ============ قويۇش بېتى — ئېكران ماسلىشىش ============ */
/* ⚠ پەقەت تار ئېكراندا (＜901px) قۇيما (block) قىياپەت. كەڭ ئېكرانلىق
تېلېۋىزورلاردا ھەرھالدا ئىككى ئىنتەك (grid) قىياپەت ساقلىنىدۇ — بۇنداقتا
سىن ئوڭدا، قىسىملار سولدا تولۇق كۆرۈنىدۇ ھەمدە چېكىلىدۇ. (بۇرۇن
(pointer:coarse) شەرتى تېلېۋىزورلارنى خاتا قۇيما ھالەتكە ئۆتكۈزۈپ،
قىسىملارنى ئېكران ئاستىغا ئىتتىرىپ قويغان ئىدى.) */
@media (max-width:900px){
.player{display:block;top:var(--toph);overflow-y:auto;padding:10px 12px 20px}
.pl-stage{position:relative;width:100%;height:0;padding-top:56.25%;border-radius:14px;margin-bottom:12px}
.pl-info,.pl-comments{max-height:none;overflow:visible;margin-bottom:12px;padding:14px}
.pl-info{overflow:visible}
.pl-title{font-size:21px}
.pl-epnow{font-size:15px}
.pl-meta{gap:5px 14px;margin:5px 0 9px}
.pl-meta .mr{font-size:14px}
.pl-meta .mr span{font-size:13px}
.pl-meta .mr + .mr::before{margin-inline-end:10px}
.pl-acts{grid-template-columns:repeat(5,1fr);gap:7px}
.pl-act{padding:12px 2px;border-radius:12px;min-height:66px}
.pl-act .ic{font-size:22px}
.pl-act .tx{font-size:13px}
.cm-list{max-height:50vh}
.wm{top:10px;right:12px;font-size:16px}
.wm .wm-sp{font-size:11px}
.pl-bottom{gap:8px;padding:10px 12px}
.pl-bottom .pl-btn{min-width:46px;font-size:16px;padding:9px 12px}
.pl-ring{width:48px;height:48px;border-width:4px}
.pl-loading{font-size:16px}
}
@media (max-width:560px){
/* خەت يوشۇرۇلمايدۇ — تېلېۋىزور/يانفۇندا قايسى كونۇپكا ئىكەنلىكى بىلىنىپ تۇرسۇن */
.pl-act{padding:12px 2px}
.pl-act .tx{font-size:11px}
.cm-ava{width:34px;height:34px;flex:0 0 34px;font-size:16px}
.cm-input{font-size:15px;padding:10px 14px}
}
/* ============ 直播 ============ */
.live-wrap{display:flex;gap:22px;height:calc(100vh - 210px);padding-top:8px}
.live-list{width:340px;flex:0 0 340px;overflow-y:auto;display:flex;flex-direction:column;gap:11px}
.live-item{display:flex;align-items:center;gap:12px;background:#1b1b24;border:2px solid var(--line);
border-radius:14px;padding:15px 18px;cursor:pointer;font-size:20px;transition:.1s}
.live-item .dot{width:11px;height:11px;border-radius:50%;background:var(--dim)}
.live-item .li-logo{width:34px;height:34px;border-radius:8px;object-fit:cover;background:#222;border:1px solid var(--line);flex:0 0 auto}
.live-item .li-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-item.on{border-color:var(--yellow);background:rgba(255,193,7,.13);color:var(--yellow)}
.live-item.focus{border-color:var(--focus);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.live-stage{flex:1;background:#000;border-radius:18px;overflow:hidden;border:1px solid var(--line);position:relative}
.live-stage video{width:100%;height:100%;object-fit:contain;background:#000}
.live-ph{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-items:center;color:var(--dim);font-size:21px}
/* ============ 我的 ============ */
.me-wrap{display:flex;gap:44px;padding-top:24px;align-items:flex-start}
.qr-box{background:#fff;border-radius:20px;padding:18px;width:320px;height:320px;display:grid;place-items:center;flex:0 0 auto}
.qr-box img,.qr-box svg{width:100%;height:100%}
/* ============ ئەزالىق: ئۈندىدار پۇل تاپشۇرۇش رامكىسى ============
⚠ بۇ ئۇسلۇبلار ئىلگىرى پەقەت يوق ئىدى — JS .wxpay-box / .wxqr / .okv نى
ئىشلىتىدۇ، ئەمما CSS دا ھېچقايسىسى يوق ئىدى. شۇڭا إككىلىك كود ئۆلچەمسىز
چىقىپ، ئېكراننىڭ يېرىمىدىن كېسىلىپ قالغان. ئىشلەتكۈچى: «ئىككىلىك كودنىڭ
يېرىمى كۆرۈنمىدى». ھازىر تولۇق ئۆلچەم بېرىلدى. */
.wxpay-box{
display:flex;flex-direction:column;align-items:center;gap:14px;
background:#101018;border:2px solid rgba(255,193,7,.3);border-radius:18px;
padding:26px 22px;box-sizing:border-box;max-width:100%;overflow:visible
}
.wxpay-h{font-size:21px;font-weight:700;color:#fff;text-align:center}
/* ئىككىلىك كود رامكىسى — ئۆلچىمى چوقۇم ئېنىق بولۇشى كېرەك، بولمىسا قىرقىلىپ كېتىدۇ.
box-sizing:border-box + padding نى ئۆلچەمگە قوشقاندا ئىچكى رايون كىچىكلىمەيدۇ. */
.wxqr{
width:300px;height:300px;flex:0 0 auto;
background:#fff;border-radius:18px;padding:14px;box-sizing:border-box;
display:grid;place-items:center;overflow:hidden
}
.wxqr img,.wxqr canvas,.wxqr svg{width:100%!important;height:100%!important;display:block;object-fit:contain}
/* QRCode.js ئۆزى inline width/height (px) بېرىدۇ — ئۇنى بىكار قىلىپ رامكا
ئىچىگە تولۇق سىغدۇرىمىز (بولمىسا 300px لىك كود 274px لىك ئىچكى رايونغا
سىغماي قىرقىلىپ قالىدۇ). */
.wxqr-in{width:100%;height:100%;display:grid;place-items:center}
.wxqr-in img,.wxqr-in canvas,.wxqr-in svg{width:100%!important;height:100%!important;max-width:100%;max-height:100%;display:block;object-fit:contain}
/* زاكاز ئۇچۇرى (پىلان / سومما) */
.wxpay-box .okv{font-size:19px;color:#d5d9e2;text-align:center;line-height:1.7}
.wxpay-box .okv b{color:#fff;font-size:21px}
.wxpay-box .gold{color:var(--yellow)!important;font-size:24px}
.wxpay-box .pay-tip{margin-top:4px;text-align:center;width:100%;box-sizing:border-box}
.pay-wait{
font-size:18px;font-weight:700;color:var(--yellow);text-align:center;
background:rgba(255,193,7,.10);border:1px solid rgba(255,193,7,.35);
border-radius:12px;padding:11px 18px;width:100%;box-sizing:border-box
}
/* كىچىك ئېكران / تېلېۋىزور overscan — ئىككىلىك كودنى كىچىكلىتىپ تولۇق كۆرسىتىمىز */
@media (max-width:900px),(pointer:coarse){
.wxpay-box{padding:20px 16px;gap:12px}
.wxqr{width:250px;height:250px;padding:12px}
.wxpay-h{font-size:18px}
.wxpay-box .okv{font-size:17px}
.wxpay-box .okv b{font-size:19px}
.wxpay-box .gold{font-size:21px}
.pay-wait{font-size:16px;padding:10px 14px}
}
/* ============ ئىككىلىك كود تولۇق ئېكران قاتلىمى (ئوتتۇرىدا) ============
ئىشلەتكۈچى: «كودنى ئېكراننىڭ ئوتتۇرىسىغا سەكرەپ چىقدىغانلا قىلىۋەت،
ھېچنىمە توسۇۋالمايدۇ».
نېمىشقا بەت ئىچىدە ئەمەس؟ تېلېۋىزورلاردا «overscan» بولىدۇ — ئېكراننىڭ
چېتىدىكى 3~6% رايون كۆرۈنمەيدۇ. بەت ئىچىگە قويۇلغان ئىككىلىك كود قانچە
چوڭ قىلىنسا شۇنچە چەتتىن كۆپ قىرقىلىدۇ (ئىشلەتكۈچى رەسىمىدە ئاستى
كېسىلىپ كەتكەن). بۇ قاتلام position:fixed + z-index ئەڭ يۇقىرى بولۇپ،
ئېكراننىڭ ھەقىقىي مەركىزىدە چىقىدۇ ۋە ھېچنەرسە ئۈستىنى توسالمايدۇ. */
.qr-modal{
position:fixed;top:0;left:0;right:0;bottom:0;z-index:120;
background:rgba(0,0,0,.86);backdrop-filter:none;
display:flex;align-items:center;justify-content:center;
padding:16px;box-sizing:border-box
}
.qr-modal.hidden{display:none}
.qr-card{
display:flex;flex-direction:column;align-items:center;gap:16px;
background:#15151c;border:2px solid rgba(255,193,7,.45);border-radius:24px;
padding:28px 34px;box-sizing:border-box;
max-width:96vw;max-height:94vh;overflow-y:auto;overflow-x:hidden;
box-shadow:0 20px 70px rgba(0,0,0,.7)
}
.qr-h{font-size:22px;font-weight:700;color:#fff;text-align:center;line-height:1.5}
.qr-info{font-size:19px;color:#d5d9e2;text-align:center;line-height:1.75}
.qr-info b{color:#fff;font-size:21px}
.qr-info .gold{color:var(--yellow)!important;font-size:24px}
.qr-tip{font-size:15px;color:#c9ced9;text-align:center;line-height:1.75;
background:rgba(255,193,7,.08);border-radius:12px;padding:11px 15px;
max-width:520px;box-sizing:border-box}
.qr-tip b{color:var(--yellow)}
#qrModalClose{min-width:180px}
/* كىچىك ئېكران / تېلېۋىزور overscan — كودنى كىچىكلىتىپ تولۇق كۆرسىتىمىز */
@media (max-width:900px),(pointer:coarse){
.qr-card{padding:22px 20px;gap:13px;border-radius:20px;max-height:96vh}
.qr-h{font-size:19px}
.wxqr{width:250px;height:250px;padding:12px}
.qr-info{font-size:17px}
.qr-info b{font-size:19px}
.qr-info .gold{font-size:21px}
.qr-tip{font-size:14px;padding:9px 13px}
.pay-wait{font-size:16px;padding:10px 14px}
#qrModalClose{min-width:150px}
}
/* ئىنتايىن پاكىز كىچىك ئېكران (يانفون تىك) */
@media (max-width:420px){
.qr-card{padding:18px 14px;gap:11px}
.wxqr{width:210px;height:210px;padding:10px}
.qr-h{font-size:17px}
/* بەك تار ئېكراندا تور بەلگىسىنىڭ يېزىقىنى يوشۇرۇپ پەقەت سىنبەلنى قالدۇرىمىز */
.wifi .wf-tx{display:none}
}
.me-info{flex:1;min-width:0}
.me-info h1{font-size:34px;margin:0 0 16px}
.code-big{
font-size:56px;font-weight:800;letter-spacing:9px;color:var(--yellow);
background:#1b1b24;display:inline-block;padding:12px 28px;border-radius:16px;margin:8px 0 16px
}
.tip{color:var(--dim);font-size:18px;line-height:1.9;max-width:720px}
.member-card{background:#1b1b24;border:2px solid var(--yellow);border-radius:18px;padding:24px 28px;max-width:600px}
.member-card h3{margin:0 0 12px;font-size:26px;color:var(--yellow)}
.member-card .kv{display:flex;gap:12px;font-size:19px;color:var(--dim);margin:6px 0}
.member-card .kv b{color:#fff}
.urow{display:flex;align-items:center;gap:12px;background:#1b1b24;border-radius:30px;padding:11px 18px}
.urow .av{width:38px;height:38px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;color:#1a1500;font-weight:800}
/* ============ 弹层 / toast ============ */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90;background:rgba(0,0,0,.75);display:grid;place-items:center}
.modal-box{background:#15151c;border:1px solid var(--line);border-radius:20px;width:min(700px,88vw);max-height:82vh;overflow:auto}
.modal-h{font-size:24px;padding:20px 28px;border-bottom:1px solid var(--line);color:var(--yellow);font-weight:700}
.modal-b{padding:22px 28px;font-size:19px;line-height:1.9}
.modal-f{padding:16px 28px 24px}
.src-item{display:flex;justify-content:space-between;gap:14px;background:#1b1b24;border:2px solid var(--line);
border-radius:13px;padding:15px 19px;margin-bottom:11px;cursor:pointer}
.src-item.focus{border-color:var(--focus);background:rgba(255,193,7,.14)}
.src-item.on{border-color:var(--yellow);color:var(--yellow);font-weight:700}
.srclist{min-width:340px;max-width:560px}
/* 顶栏「مەنبە」按钮 */
.tab.srcbtn{
background:rgba(255,193,7,.12);border:2px solid rgba(255,193,7,.42);color:var(--yellow);
font-size:17px;padding:7px 15px;border-radius:11px;font-weight:700;margin-right:6px
}
.tab.srcbtn.focus{border-color:var(--focus);background:rgba(255,193,7,.26);color:#fff}
.toast{
position:fixed;bottom:44px;left:50%;transform:translateX(-50%) translateY(30px);
background:rgba(20,20,27,.96);border:1px solid var(--line);color:#fff;padding:15px 28px;border-radius:14px;
font-size:19px;opacity:0;transition:.25s;z-index:120;pointer-events:none
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ============ 开屏广告 ============ */
.splash{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;background:#000;display:grid;place-items:center;overflow:hidden}
.ad-video{width:100%;height:100%;object-fit:cover}
/* 视频上方盖一层暗幕，保证大字清晰可读 */
.ad-veil{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.22) 40%,rgba(0,0,0,.8))}
.ad-fallback{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1d1d27,#0b0b0f 70%)}
.ad-fb-inner{text-align:center}
.ad-fb-logo{font-size:84px}
.ad-fb-title{font-size:52px;font-weight:800;color:var(--yellow)}
.ad-fb-sub{font-size:22px;color:var(--dim);margin-top:6px}
/* 全屏大字（开着视频时也显示在上层） */
.ad-big{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:0 52px;pointer-events:none;z-index:5}
.ad-big-title{font-size:118px;font-weight:900;letter-spacing:6px;color:var(--yellow);line-height:1.05;
text-shadow:0 8px 44px rgba(0,0,0,.95),0 0 60px rgba(255,193,7,.35)}
.ad-big-tip{margin-top:26px;font-size:30px;font-weight:600;color:#fff;text-shadow:0 4px 20px #000;opacity:.92}
.ad-top{position:absolute;top:28px;right:34px;display:flex;gap:12px;align-items:center;z-index:6}
.ad-badge{background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.3);padding:6px 15px;border-radius:9px;font-size:16px}
.ad-count{background:#f44336;color:#fff;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:21px;font-weight:700}
/* ⚠ 2026-09-17: VIP ئەسكەرتىش بالدىقى (سىناق ئەزىلەرگە).
ئېلان ئېكرانىنىڭ ئاستىدا، «ئۆتكۈزۈش» كۇنۇپكىسىنىڭ ئۈستىدە تۇرىدۇ.
ئالتۇن رەڭلىك يۇمشاق چېگرا + يېنىك سايە — ئېلان ئۈستىدە ئوقۇشلۇق. */
.ad-note{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);
display:flex;flex-direction:column;gap:9px;align-items:center;z-index:7;
max-width:min(860px,90vw);pointer-events:none}
.ad-note-row{display:flex;align-items:center;gap:11px;
background:linear-gradient(135deg,rgba(26,21,0,.9),rgba(40,32,0,.86));
border:1.5px solid rgba(255,193,7,.55);border-radius:48px;
padding:11px 25px;
box-shadow:0 6px 30px rgba(0,0,0,.6),0 0 22px rgba(255,193,7,.16);
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.ad-note-row.hidden{display:none}
.ad-note-ic{font-size:22px;line-height:1;flex:0 0 auto;
filter:drop-shadow(0 0 10px rgba(255,193,7,.65))}
.ad-note-tx{font-size:19px;font-weight:700;color:var(--yellow);
line-height:1.45;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.ad-note-cd{font-size:16px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);
border:1px solid rgba(255,255,255,.24);border-radius:22px;padding:3px 13px;
letter-spacing:.4px;flex:0 0 auto;min-width:70px;text-align:center}
.ad-note-cd b{color:var(--yellow);font-size:17px}
.ad-note-cd.ready{background:rgba(40,120,60,.55);border-color:rgba(120,230,150,.6)}
.ad-note-cd.ready b{color:#b6ffcd}
/* 倒计时没走完时隐藏，走完才出现 */
.ad-skip{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#1a1500;
border:0;font-size:22px;font-weight:700;padding:15px 44px;border-radius:30px;cursor:pointer;z-index:6}
.ad-skip.focus{box-shadow:0 0 0 4px rgba(255,193,7,.5);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ============ 播放前广告 ============ */
/* z-index قويغۇچ (70) دىن يۇقىرى بولۇشى كېرەك — بولمىسا ئېلان قويغۇچنىڭ ئاستىدا
قېلىپ كۆرۈنمەيدۇ ھەم «يۈكلىنىۋاتىدۇ…» تېكىستى ئۈستىدە چىقىپ قالىدۇ */
.pread{position:absolute;top:0;left:0;right:0;bottom:0;z-index:80;background:#000;overflow:hidden}
.pread-video{width:100%;height:100%;object-fit:cover}
.pread-fallback{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-items:center;
background:radial-gradient(circle at 50% 40%,#1d1d27,#0b0b0f 70%)}
.pread-logo{font-size:90px}
.pread-t{font-size:34px;font-weight:800;color:var(--yellow);margin-top:10px}
.pread-top{position:absolute;top:26px;right:32px;display:flex;gap:12px;align-items:center;z-index:2}
.pread-skip{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#1a1500;
border:0;font-size:22px;font-weight:700;padding:15px 44px;border-radius:30px;cursor:pointer;z-index:2}
.pread-skip.focus{box-shadow:0 0 0 4px rgba(255,193,7,.5);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ============ 📱 يانفون (تىك ئېكران) ئېلان ماسلىشىشى — 2026-09-20 ============
⚠ ئىشلەتكۈچى تەلىپى: «يانفۇندا ئاچقاندىكى ئېلانغا ئارقا بەتتىن تىك
شەكىلدىكى ئېلان قىستۇرغىنى بولدىغان ئېغىز قوشايلى — بولمىسا تېلېۋىزور
بىلەن يانفۇن ئىكرانى ئوخشىمىغاچقا ئېلان نورمالسىزلىقنى كەلتۈرۈپ
چىقىرىدۇ».
تېلېۋىزور يانتۇ (16:9) — چوڭ خەت 118px ماس كېلىدۇ.
يانفون تىك (9:16) — ئوخشاش چوڭلۇقتىكى خەت ئىكراننى بېسىپ، «نورمالسىز»
كۆرۈنىدۇ. شۇڭا تىك ئېكراندا خەت ۋە كۇنۇپكىلارنى كىچىكلىتىمىز. */
@media (orientation:portrait) and (max-width:900px){
/* ئېلان سىنى — تىك ئېكراندا تولۇق تولدۇرىدۇ (قارا چۆرە بولماسلىقى ئۈچۈن) */
.ad-video,.pread-video{object-fit:cover;object-position:center}
/* چوڭ خەت — تىك ئېكراندا بېسىپ كەتمەسلىكى ئۈچۈن كىچىكلىتىلدى */
.ad-big{padding:0 22px}
.ad-big-title{font-size:46px;letter-spacing:2px;line-height:1.15}
.ad-big-tip{margin-top:14px;font-size:17px;line-height:1.6}
/* ئۈستى بەلگە ۋە ساناق */
.ad-top{top:16px;right:16px;gap:8px}
.ad-badge{font-size:12.5px;padding:5px 11px}
.ad-count{width:36px;height:36px;font-size:16px}
/* VIP ئەسكەرتىش بالدىقى */
.ad-note{bottom:96px;gap:7px;max-width:92vw}
.ad-note-row{padding:8px 15px;gap:8px;border-radius:34px}
.ad-note-ic{font-size:17px}
.ad-note-tx{font-size:14px;line-height:1.4}
.ad-note-cd{font-size:13px;padding:2px 10px;min-width:56px}
.ad-note-cd b{font-size:14px}
/* «ئىچىگە كىرىش» كۇنۇپكىسى — بارماق بىلەن بېسىشقا قۇلاي بولسۇن */
.ad-skip{bottom:26px;font-size:17px;padding:13px 34px;border-radius:26px}
.pread-skip{bottom:26px;font-size:17px;padding:13px 34px;border-radius:26px}
.pread-top{top:16px;right:16px;gap:8px}
.pread-logo{font-size:56px}
.pread-t{font-size:22px;margin-top:6px}
.ad-fb-logo{font-size:56px}
.ad-fb-title{font-size:32px}
.ad-fb-sub{font-size:15px;margin-top:4px}
}
/* يانتۇ ئېكراندا (يانفوننى توغرىلىغاندا) چوڭ خەتنى ئوتتۇراھال قىلىمىز */
@media (orientation:landscape) and (max-height:560px){
.ad-big-title{font-size:72px;letter-spacing:3px}
.ad-big-tip{font-size:22px;margin-top:16px}
.ad-note{bottom:84px}
.ad-skip,.pread-skip{bottom:20px;font-size:18px;padding:11px 32px}
.ad-top,.pread-top{top:14px;right:16px}
}
/* ============ 手机适配 ============ */
/* 触屏设备一律走手机布局（不只看逻辑宽度，高分辨率手机宽度可能报得很大） */
@media (max-width:900px), (pointer:coarse){
body{font-size:16px}
:root{--toph:72px}
.top{height:var(--toph);padding:0 10px;gap:4px}
.brand b{font-size:18px}.brand .mark{width:34px;height:34px;font-size:17px}
.brand{gap:6px}
.tools{gap:5px;flex:0 0 auto}
/* 窄屏：工具按钮只留图标（文字由 JS 折叠） */
.tool{padding:9px 11px;gap:0;line-height:1}
.tool .t-ic{font-size:18px}
.tool .t-tx{display:none}
.top-right{gap:5px;flex:0 0 auto}
.wifi{font-size:16px;padding:2px 5px;gap:4px}
.wifi .wf-ic{font-size:16px}
.wifi .wf-tx{font-size:12px}
.weather{font-size:14px;gap:2px}
.weather .w-ic{font-size:14px}
.clock{display:none}
/* 🆕 2026-10-04: يانفون/تېلېۋىزور كىچىك ئېكراندا پەقەت چىسلا كۈنى كۆرسىتىلىدۇ،
ۋاقىت (.clockbox .clock) يوشۇرۇلىدۇ — ئەسلىدىكى قېلىپ ساقلىنىدۇ */
.clockbox .clock{display:none}
.date{font-size:14px}
main{top:var(--toph)}
.view{padding:0 14px 70px}
/* ⚠ 2026-09-20 (يانفون ئۇيغۇنلاشتۇرۇش): ئالدى بەتنىڭ ئۈستىدىكى
تۈرلەر (.tabs) بىلەن «ھەقسىز» ئەسكەرتمىسى (.free-banner،
position:fixed) ئىككىسى تەڭ y=72px دىن باشلىنىپ ئۈستى-ئۈستىگە
چۈشۈپ، تۈر خەتلىرى ئوقۇلمايدىغان بولۇپ قالغان ئىدى
(ئىشلەتكۈچى رەسىمىدە ئېنىق كۆرۈنىدۇ).
ھەل: ئالدى بەتنىڭ تۈرلەر قۇرىغا ئۈستىدىن ئەسكەرتمە ئېگىزلىكى
(≈56px) چەك قوشىمىز — ئەسكەرتمە 10 سېكۇنتتىن كېيىن ئۆزلۈكىدىن
يوقىغاندا قۇر سەكرەپ كەتمەسلىكى ئۈچۈن چەك ئۆزگەرمەيدۇ
(ئەسكەرتمە fixed بولغاچقا ئورۇن ئالمايدۇ). */
/* ⚙ 2026-09-25: ئىلگىرى بۇ يەرگە 56px قاتتىق يېزىلغان ئىدى —
«ھەقسىز» ئەسكەرتىمىسى (free-banner) كۆرۈنمىگەندە بۇ پۈتۈنلەي
بوش ئورۇن بولۇپ قالاتتى. ھازىر JS (syncTopLayout) --tabtop نى
بېكىتىدۇ: ئەسكەرتمە بار=56px، يوق=0px. */
#view-home > .tabs{padding-top:var(--tabtop,0px)}
.tabs{gap:24px;justify-content:flex-start;padding:4px 14px 12px}
.tab{font-size:20px;padding:6px 0 10px}
.banner{gap:12px}
.slide{flex:0 0 84%;height:200px}
.slide .cap{font-size:19px;padding:18px 16px 14px}
.carousel{height:auto;margin-bottom:16px}
.cs .cs-cap{font-size:19px;padding:16px 16px 26px}
.cs .cs-sub{font-size:14px}
.dots{bottom:10px;left:16px}
.quick{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.qbtn{padding:16px 8px;border-radius:15px}
.qbtn .ic{font-size:29px}.qbtn .tx{font-size:15px}
.sec{font-size:20px;margin:22px 0 16px}
.grid{grid-template-columns:repeat(6,1fr);gap:22px 16px}
.pcard .ptx{font-size:15px;height:52px;padding:10px 6px 12px;line-height:1.5}
.hcard{flex:0 0 200px}.hcard img{height:112px}.hcard .htx{font-size:14px}
.detail{flex-direction:column;gap:18px;padding-top:8px}
.poster{width:150px;flex:0 0 150px;margin:0 auto}
.dinfo h1{font-size:27px}
.desc{font-size:16px}
.me-wrap{flex-direction:column;gap:20px;align-items:center}
.qr-box{width:250px;height:250px}
.code-big{font-size:38px;letter-spacing:6px}
.me-info h1{font-size:25px;text-align:center}
.tip{font-size:15px;text-align:center}
.member-card{width:100%}
.live-wrap{flex-direction:column;height:auto}
.live-list{width:100%;flex:0 0 auto;max-height:220px}
.live-stage{height:230px}
.modal-box{width:92vw}
.ad-skip{left:20px;bottom:26px;font-size:18px}
}
/* 窄屏手机：卡片改为流式两/三列，间距继续放大 */
@media (max-width:560px){
.grid{grid-template-columns:repeat(6,1fr);gap:26px 14px}
.pcard .ptx{font-size:16px;height:58px;line-height:1.55}
.pcard{border-radius:16px}
.sec{font-size:21px;margin:26px 0 18px}
/* ⚠ 2026-09-20 (ئىشلەتكۈچى تەلىپى): «توپلام» چىقىرىۋېتىلگەندىن كېيىن
كۇنۇپكا 4 بولدى. 4 كۇنۇپكا ئۈچۈن ئەڭ تەبىئىي رەتلىنىش — 2×2
(يانفوندا بارماق بىلەن بېسىش ئاسان، ھەم يالغۇز قۇر قالمايدۇ).
`auto-fit` + `minmax(150px,1fr)` ئارقىلىق: كەڭ ئېكراندا 4 ى
بىر قۇردا، تار ئېكراندا 2×2 بولۇپ ئۆزى ماسلىشىدۇ. */
.quick{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.qbtn{padding:13px 6px;border-radius:14px;gap:8px}
.qbtn .ic{font-size:25px}
.qbtn .tx{font-size:13.5px;line-height:1.35}
.rowcard{flex-direction:column;align-items:stretch}
.rowcard .rc-title{font-size:19px}
.rowcard .rc-sub{font-size:15px}
}
@media (max-width:480px){
.grid{grid-template-columns:repeat(2,1fr);gap:26px 14px}
.pcard .ptx{font-size:16px;height:60px}
.quick{grid-template-columns:repeat(2,1fr);gap:9px}
.qbtn{padding:12px 5px}
.qbtn .ic{font-size:24px}
.qbtn .tx{font-size:13px}
}
/* 无播放线路提示 */
.noplay{
background:rgba(255,193,7,.10);border:2px solid rgba(255,193,7,.36);border-radius:13px;
padding:16px 20px;margin:16px 0 18px;color:var(--yellow);font-size:17px;line-height:1.7
}
.noplay small{color:#c9ced9;font-size:14px}
/* ============ VIP 标记与提示 ============ */
.vipmark{
display:inline-block;background:linear-gradient(135deg,#ffd54f,#e8a317);color:#1a1500;
font-size:14px;font-weight:800;padding:3px 10px;border-radius:7px;vertical-align:middle;
margin-right:8px;letter-spacing:.5px
}
.vipnote{
background:rgba(255,193,7,.10);border:2px solid rgba(255,193,7,.38);border-radius:13px;
padding:14px 18px;margin:12px 0 18px;color:var(--yellow);font-size:17px;line-height:1.75
}
.vipnote b{color:#ffd54f}
.vipnote small{display:block;margin-top:6px;color:#c9ced9;font-size:14px}
/* 详情页海报占位 */
.poster .poster-ph{width:100%;height:0;padding-top:135%;display:grid;place-items:center;
background:linear-gradient(150deg,#1a1a26,#101018);border-radius:18px}
.poster .poster-ph>span{font-size:52px;opacity:.3}
.poster .pimg{position:relative;display:block;width:100%;height:0;padding-top:135%;overflow:hidden;border-radius:18px;background:#101018}
.poster .pimg>.pimg-in{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;display:block}
/* ================= 强制升级遮罩 ================= */
.forceup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(6,6,10,.96);
display:grid;place-items:center;padding:24px;backdrop-filter:blur(6px)}
.fu-box{width:min(560px,92vw);background:linear-gradient(160deg,#1c1c28,#12121a);
border:2px solid rgba(255,193,7,.35);border-radius:22px;padding:34px 30px;text-align:center;
box-shadow:0 24px 70px rgba(0,0,0,.7)}
.fu-ic{font-size:56px;line-height:1;margin-bottom:10px;animation:fu-bounce 1.6s infinite}
@keyframes fu-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fu-box h2{font-size:28px;color:var(--yellow);margin:0 0 14px}
.fu-v{font-size:18px;color:#c9ced9;margin:0 0 12px}
.fu-v b{color:#fff}
.fu-note{background:rgba(255,193,7,.10);border-radius:12px;padding:12px 16px;
color:#e8ebf2;font-size:16px;line-height:1.8;margin:0 0 14px;text-align:right;direction:rtl}
.fu-tip{color:var(--dim);font-size:16px;line-height:1.8;margin:0 0 22px}
.fu-btn{display:block;width:100%;background:linear-gradient(135deg,#ffc107,#ff9800);color:#1a1a00;
font-weight:800;font-size:19px;padding:15px 22px;border-radius:14px;text-decoration:none;
border:3px solid transparent;margin-bottom:12px;transition:transform .15s;
cursor:pointer;font-family:inherit}
.fu-btn:hover,.fu-btn:focus{transform:scale(1.03);outline:3px solid #fff}
/* تىزگىنەك فوكۇسى — ئېنىق كۆرۈنسۇن */
.fu-btn.focus{border-color:#fff;
box-shadow:0 0 0 4px rgba(255,193,7,.55),0 8px 30px rgba(255,152,0,.45);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.fu-url{color:#6d7280;font-size:13px;word-break:break-all;direction:ltr}
.fu-msg{color:#ffd54f;font-size:15px;line-height:1.7;margin-top:10px;min-height:22px}
/* ================= ئىختىيارىي يېڭىلاش ئەسكەرتىشى ================= */
.softup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99998;
background:rgba(6,6,10,.82);display:grid;place-items:center;padding:24px}
.su-box{width:min(600px,92vw);background:linear-gradient(160deg,#1c1c28,#12121a);
border:2px solid rgba(120,180,255,.35);border-radius:22px;padding:30px 28px;
text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.7)}
.su-hd{display:flex;align-items:center;gap:16px;margin-bottom:16px;justify-content:center}
.su-ic{font-size:46px;line-height:1}
.su-hd h2{font-size:26px;color:#8ec5ff;margin:0 0 6px}
.su-v{font-size:17px;color:#c9ced9;margin:0}
.su-v b{color:#fff}
.su-note{background:rgba(120,180,255,.10);border-radius:12px;padding:12px 16px;
color:#e8ebf2;font-size:16px;line-height:1.8;margin:0 0 14px;text-align:right;direction:rtl}
.su-tip{color:var(--dim);font-size:16px;line-height:1.8;margin:0 0 20px}
.su-btns{display:flex;gap:12px;flex-wrap:wrap}
.su-btn{flex:1;min-width:150px;background:rgba(255,255,255,.08);color:#e8ebf2;
font-weight:800;font-size:18px;padding:14px 20px;border-radius:14px;border:3px solid transparent;
cursor:pointer;font-family:inherit;transition:transform .15s}
.su-btn.primary{background:linear-gradient(135deg,#4da3ff,#2b7de9);color:#fff}
.su-btn:hover,.su-btn:focus{transform:scale(1.03);outline:3px solid #fff}
.su-btn.focus{border-color:#fff;box-shadow:0 0 0 4px rgba(77,163,255,.5),0 8px 30px rgba(43,125,233,.45);}
.su-msg{color:#8ec5ff;font-size:15px;line-height:1.7;margin-top:10px;min-height:22px}
/* ================= 会员卡片 ================= */
.member-card.ok{border-color:rgba(255,193,7,.5)}
.member-card.no{opacity:.86}
.member-card .kv{margin:7px 0;font-size:16px}
/* ================= ئەزالىق بېتى ================= */
.vip-wrap{max-width:1040px;margin:0 auto;padding:6px 4px 40px}
.vip-hd h1{font-size:30px;color:var(--yellow);margin:0 0 10px}
.vip-hd .tip{color:var(--dim);font-size:16px;line-height:1.85;max-width:760px}
/* تۇنجى قېتىم VIP ئېچىش %50 ئەرزان ئۇچۇر تاختىسى */
.vip-promo{
background:linear-gradient(140deg,rgba(255,193,7,.16),rgba(255,193,7,.06));
border:2px solid rgba(255,193,7,.55);border-radius:16px;
padding:16px 22px;margin:18px 0;color:#ffe08a;font-size:19px;line-height:1.7;font-weight:600}
.vip-promo b{color:#ffd23f;font-size:22px}
/* قويۇش بېتىدىكى قىسقا كود ئۈستىدىكى چۈشەندۈرۈش */
.qr-code-cap{color:var(--dim);font-size:16px;margin-top:10px;letter-spacing:1px}
.vip-cur{background:rgba(76,175,80,.12);border:2px solid rgba(76,175,80,.4);border-radius:14px;
padding:14px 18px;margin:18px 0;color:#b7f0b9;font-size:17px}
.vip-cur b{color:#fff}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:18px;margin:22px 0}
.plan{background:var(--panel);border:2px solid var(--line);border-radius:18px;
padding:22px 18px;text-align:center;cursor:pointer;transition:.18s}
.plan:hover{border-color:rgba(255,193,7,.6)}
/* ⚠ فوكۇس ئۇسلۇبى چوقۇم .plan.on دىن ئۈستۈن تۇرۇشى كېرەك.
ئىشلەتكۈچى: «ئەزالىق پۇل تاپشۇرۇش بېتىدە فوكۇس يۆتكىگەندە ئۆزگىرىش يوق،
فوكۇس نەدىن مېڭىۋاتقانلىقىنى بىلگىلى بولمايدۇ». سەۋەبى: ئىلگىرى پەقەت
.plan:hover ۋە .plan.on بار ئىدى، .plan.focus يوق ئىدى — تېلېۋىزوردا
«hover» بولمايدۇ، شۇڭا فوكۇس يۆتكەندە كۆرۈنەرلىك ئۆزگىرىش بولمايتتى. */
.plan.focus{
border-color:var(--yellow);background:linear-gradient(160deg,#2b2408,#1b1b14);
box-shadow:0 0 0 4px rgba(255,193,7,.45);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.plan.focus .pn{color:var(--yellow)}
.plan.on{border-color:var(--yellow);background:linear-gradient(160deg,#241f0a,#171712);
box-shadow:0 0 0 3px rgba(255,193,7,.22)}
/* تاللانغان + فوكۇستىكى چاغدا تېخىمۇ ئېنىق كۆرۈنىدۇ (✓ بەلگىسى قوشۇلىدۇ) */
.plan.on.focus{box-shadow:0 0 0 4px rgba(255,193,7,.6);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.plan.on::after{
content:'✓ تاللاندى';display:block;margin-top:10px;font-size:14px;font-weight:700;
color:var(--yellow);background:rgba(255,193,7,.14);border-radius:10px;padding:5px 8px
}
.plan.on.processing::after{content:'⏳ تەييارلىنىۋاتىدۇ…'}
.plan.on.done::after{content:'✅ زاكاز قۇرۇلدى'}
.plan .pn{font-size:20px;color:#fff;font-weight:700;margin-bottom:10px}
.plan .pp{font-size:34px;color:var(--yellow);font-weight:800;line-height:1.1}
.plan .pp small{font-size:15px;color:var(--dim);font-weight:400}
.plan .pd{color:var(--dim);font-size:15px;margin-top:8px}
.plan .pnote{color:#ffd54f;font-size:14px;margin-top:8px;line-height:1.6}
.pay-box{margin-top:26px;background:var(--panel);border-radius:18px;padding:22px}
.pay-box h3{font-size:20px;color:#fff;margin:0 0 16px}
.pay-tip{color:#c9ced9;font-size:15px;line-height:1.85;background:rgba(255,193,7,.08);
border-radius:12px;padding:12px 16px;margin-top:14px}
.way-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.way{background:var(--panel2);border:2px solid var(--line);border-radius:14px;
padding:16px;text-align:center;cursor:pointer;transition:.18s}
.way:hover,.way:focus{border-color:var(--yellow)}
.way .wn{font-size:18px;color:#fff;font-weight:700}
.way .wt{color:var(--dim);font-size:14px;margin-top:6px;line-height:1.6}
.way-detail{margin-top:18px}
.order-box{background:#101018;border:2px solid rgba(255,193,7,.3);border-radius:16px;padding:20px}
.order-box .okv{margin:9px 0;font-size:16px;color:#d5d9e2}
.order-box .okv b{color:#fff}
.order-box .okv a{color:var(--yellow);word-break:break-all}
.gold{color:var(--yellow)!important;font-size:20px}
.qr-img{text-align:center;margin:16px 0}
.qr-img img{width:230px;height:230px;object-fit:contain;background:#fff;
border-radius:14px;padding:10px}
/* ================= 源选择器锁标 ================= */
.src-item{display:flex;align-items:center;justify-content:space-between;gap:12px}
.src-item.locked{opacity:.72}
.src-lock{color:var(--yellow);font-size:14px;white-space:nowrap}
/* ================= 手机端适配 ================= */
@media (max-width:900px),(pointer:coarse){
.vip-wrap{padding:4px 2px 32px}
.vip-hd h1{font-size:24px}
.plan-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.plan{padding:16px 12px;border-radius:15px}
.plan .pn{font-size:17px}
.plan .pp{font-size:27px}
.fu-box{padding:26px 20px}
.fu-ic{font-size:44px}
.fu-box h2{font-size:22px}
.qr-img img{width:200px;height:200px}
.pay-box{padding:16px}
}
/* 会员页未登录提示 */
.vip-login{background:rgba(255,152,0,.12);border:2px solid rgba(255,152,0,.45);border-radius:14px;
padding:18px 20px;margin:18px 0;color:#ffcc80;font-size:17px;line-height:1.8}
.vip-login .btn{background:linear-gradient(135deg,#ffc107,#ff9800);color:#1a1a00;
font-weight:800;border:none;padding:13px 22px;border-radius:12px;font-size:17px;cursor:pointer}
.vip-login .tip{color:#c9ced9;font-size:15px}
/* ============ 顶栏滚动公告 ============ */
.notice{
display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
background:rgba(255,193,7,.10);border:1.5px solid rgba(255,193,7,.30);
border-radius:22px;padding:6px 14px;overflow:hidden
}
.notice-ic{flex:0 0 auto;font-size:16px;animation:nt-blink 1.6s infinite}
.mobile-notice{display:none}
@keyframes nt-blink{0%,100%{opacity:1}50%{opacity:.45}}
.notice-track{flex:1 1 auto;overflow:hidden;position:relative;height:22px;min-width:0}
.notice-text{
position:absolute;white-space:nowrap;color:#ffd54f;font-size:16px;line-height:22px;
will-change:transform;animation:nt-scroll 26s linear infinite
}
@keyframes nt-scroll{
0%{transform:translateX(-100%)}
100%{transform:translateX(100%)}
}
/* 窄屏：公告从顶栏移到导航栏下方，单独占一行 */
@media (max-width:900px),(pointer:coarse){
.top .notice{display:none!important}
.mobile-notice{
display:flex;align-items:center;gap:8px;position:fixed;z-index:39;
left:12px;right:12px;top:var(--toph);
background:rgba(255,193,7,.12);border:1.5px solid rgba(255,193,7,.32);
border-radius:20px;padding:6px 12px;overflow:hidden
}
.mobile-notice .notice-track{flex:1 1 auto;overflow:hidden;position:relative;height:20px;min-width:0}
.mobile-notice .notice-text{position:absolute;white-space:nowrap;color:#ffd54f;
font-size:14px;line-height:20px;animation:nt-scroll 30s linear infinite}
}
/* ============ 会员墙弹窗 ============ */
.gate{text-align:center;padding:8px 4px 4px}
.gate-ic{font-size:48px;line-height:1;margin-bottom:8px}
.gate h3{font-size:23px;color:var(--yellow);margin:0 0 12px}
.gate p{font-size:17px;color:#dfe3ec;line-height:1.85;margin:0 0 12px}
.gate p b{color:#fff}
.gate-tip{background:rgba(255,193,7,.09);border-radius:12px;padding:12px 16px;
color:#c9ced9;font-size:15px;line-height:1.8;margin:0 0 20px}
.gate .btn{width:100%;display:block}
@media (max-width:900px),(pointer:coarse){
.gate-ic{font-size:38px}
.gate h3{font-size:20px}
.gate p{font-size:15px}
}
/* ============ 开屏 / 播放前广告 — 手机适配 ============ */
@media (max-width:900px),(pointer:coarse){
.ad-big{padding:0 26px}
.ad-big-title{font-size:52px;letter-spacing:3px}
.ad-big-tip{font-size:18px;margin-top:16px}
.ad-top{top:18px;right:18px;gap:9px}
.ad-badge{font-size:13px;padding:5px 11px}
.ad-count{width:38px;height:38px;font-size:17px}
.ad-skip{bottom:34px;font-size:18px;padding:13px 34px}
.pread-skip{bottom:34px;font-size:18px;padding:13px 34px}
/* VIP ئەسكەرتىش — كىچىك ئېكراندا كىچىكرەك */
.ad-note{bottom:88px;gap:7px}
.ad-note-row{padding:8px 16px;gap:8px;border-radius:36px}
.ad-note-ic{font-size:15px}
.ad-note-tx{font-size:14px}
.ad-note-cd{font-size:13px;padding:2px 10px;min-width:58px}
.ad-note-cd b{font-size:14px}
.pread-logo{font-size:62px}
.pread-t{font-size:24px}
.pread-top{top:18px;right:18px}
.wm{top:14px;right:16px;font-size:18px}
.freetip{font-size:15px;padding:11px 15px}
}
/* ============ ئارقىغا قايتىش بالدىقى ============ */
.backbar{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.backbtn{
background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.22);color:#e7eaf2;
font-size:19px;font-weight:600;padding:10px 24px;border-radius:24px;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;transition:.18s
}
.backbtn:hover{background:rgba(255,255,255,.14)}
.backbtn.focus{background:var(--yellow);color:#1a1500;border-color:var(--yellow);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.backtt{font-size:19px;color:var(--dim)}
@media (max-width:900px),(pointer:coarse){
.backbar{margin:2px 0 10px;gap:10px}
.backbtn{font-size:16px;padding:8px 18px}
.backtt{font-size:16px}
}
/* ============ ھەقسىز / سىناق مەزگىل ئەسكەرتمىسى ============ */
.free-banner{
position:fixed;top:var(--toph);right:16px;left:16px;z-index:35;
display:flex;align-items:center;justify-content:center;
padding:9px 18px;border-radius:12px;font-size:17px;
background:rgba(20,20,29,.92);border:1.5px solid var(--line);color:#dfe3ec;
transition:opacity .6s ease
}
.free-banner.out{opacity:0}
.free-banner b{color:var(--yellow2)}
.free-banner.gift{border-color:rgba(74,222,128,.45);color:#b7f5cd}
.free-banner.gift b{color:#4ade80}
.free-banner.trial{border-color:rgba(255,193,7,.45)}
.free-banner.lock{border-color:rgba(244,67,54,.45);color:#ffcdd2}
.free-banner.vip{border-color:rgba(255,213,79,.45);color:var(--yellow2)}
@media (max-width:900px),(pointer:coarse){
.free-banner{top:104px;font-size:14px;padding:7px 12px;right:10px;left:10px}
}
/* «ھەقسىز» بەلگىسى (تەپسىلات بېتىدە) */
.freemark{
display:inline-block;background:linear-gradient(135deg,#4ade80,#16a34a);color:#04220f;
font-size:14px;font-weight:800;padding:3px 10px;border-radius:7px;vertical-align:middle;
margin-right:8px;letter-spacing:.5px
}
.freenote{
background:rgba(74,222,128,.10);border:2px solid rgba(74,222,128,.38);border-radius:13px;
padding:14px 18px;margin:12px 0 18px;color:#8ff0b2;font-size:17px;line-height:1.75
}
.freenote b{color:#4ade80}
/* سىناق / ھەقسىز مەزگىل كارتىسى (مېنىڭ بېتىدە) */
.trial-box{
background:rgba(255,193,7,.10);border:2px solid rgba(255,193,7,.4);border-radius:13px;
padding:13px 17px;margin:0 0 14px;color:var(--yellow2);font-size:17px;line-height:1.7
}
.trial-box small{display:block;margin-top:5px;color:#c9ced9;font-size:14px}
.trial-box.gift{background:rgba(74,222,128,.10);border-color:rgba(74,222,128,.4);color:#8ff0b2}
.trial-box.gift b{color:#4ade80}
/* ============ ئاددىي ئەزا بولۇش فورمىسى ============ */
.btn.big{font-size:21px;padding:16px 30px;border-radius:30px;width:100%}
.reg-sep{
display:flex;align-items:center;gap:12px;color:var(--dim);font-size:15px;
margin:20px 0 12px
}
.reg-sep::before,.reg-sep::after{content:'';flex:1;height:1px;background:var(--line)}
.reg-form{display:flex;flex-direction:column;gap:10px}
.reg-form .inp{
background:#1a1a24;border:2px solid var(--line);border-radius:12px;color:var(--txt);
font-size:18px;padding:13px 16px;outline:none;width:100%
}
.reg-form .inp:focus{border-color:var(--yellow)}
.reg-form .inp::placeholder{color:#6b7280}
.reg-form .btn{width:100%}
.tip.err{color:#ff8a80;min-height:22px}
/* بىۋاستە تارقىتىش قانال تىزىملىكى (تولۇق ئېكران ئىچىدە) */
.pl-side-h{font-size:17px;color:var(--dim);padding:6px 10px}
/* ============ تەڭشەك بېتى ============ */
.set-wrap{max-width:900px;margin:0 auto;padding:10px 26px 60px}
.set-card{background:#171722;border:1px solid var(--line);border-radius:18px;padding:8px 26px;margin-bottom:22px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;
border-bottom:1px solid rgba(255,255,255,.06);font-size:20px}
.set-row:last-child{border-bottom:none}
.set-row b{color:var(--yellow);word-break:break-all;text-align:left;max-width:60%}
.set-actions{display:flex;gap:14px;flex-wrap:wrap}
.set-tip{color:var(--dim);font-size:16px;margin-top:18px;line-height:1.8}
.brand{cursor:pointer;user-select:none}
.brand:hover{opacity:.85}
/* ============ 多设备自适应增强 ============ */
/* 超大屏（电视 / 平板横屏）：加大两侧留白，轮播不铺满，避免元素贴边或被拉得过散 */
@media (min-width:1600px){
.view{padding-left:48px;padding-right:48px}
.slide{flex:0 0 min(50%,820px)}
.sec{font-size:27px}
}
/* 中等横屏（电视盒子 / 平板）：保证内容不至于过散 */
@media (min-width:1100px) and (max-width:1599px){
.view{padding-left:34px;padding-right:34px}
}
/* 超窄屏（小屏手机，如 360/375 逻辑宽）：进一步压缩，防止横向溢出与过大 */
@media (max-width:380px){
.view{padding-left:10px;padding-right:10px}
.grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}
.quick{grid-template-columns:repeat(2,1fr);gap:9px}
.qbtn{padding:13px 6px}
.qbtn .ic{font-size:25px}
.qbtn .tx{font-size:13px}
.sec{font-size:18px}
.tool{padding:8px 9px}
.tab{font-size:18px}
}
/* ============ ئالاقىلىشىش · تەكلىپ-پىكىر (كۆزنەك ئىچى) ============ */
.contact{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.contact .ct-tip{color:#c9ced9;font-size:17px;line-height:1.8;max-width:520px}
.contact .ct-qrwrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.contact .ct-qr{background:#fff;border-radius:16px;padding:10px;display:inline-block;line-height:0;
box-shadow:0 8px 28px rgba(0,0,0,.38)}
.contact .ct-qr img{width:216px;height:216px;object-fit:contain;display:block}
.contact .ct-qrfail{color:#b3261e;font-size:15px;padding:24px 10px;width:216px;line-height:1.5}
.contact .ct-cap{color:#c9ced9;font-size:15px;line-height:1.7;max-width:320px}
.contact .ct-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
background:#1b1b24;border:2px solid var(--line);border-radius:14px;padding:12px 18px;
width:100%;max-width:520px}
.contact .ct-row>span{color:var(--dim);font-size:16px}
.contact .ct-row>b{color:var(--yellow);font-size:20px;letter-spacing:1px;
word-break:break-all;flex:1;min-width:120px}
.contact .ct-copy{background:#22222d;color:#e7eaf2;border:2px solid var(--line);
font-size:16px;padding:9px 20px;border-radius:22px;flex:0 0 auto}
.contact .ct-go{display:block;width:100%;max-width:520px;text-align:center;
text-decoration:none;font-size:19px;padding:14px 22px;border-radius:14px}
.contact .ct-note{color:var(--dim);font-size:16px;line-height:1.8;max-width:520px}
@media (max-width:900px),(pointer:coarse){
.contact .ct-qr img,.contact .ct-qrfail{width:176px;height:176px}
.contact .ct-row>b{font-size:18px}
}
/* ================= ھاۋارايى بېتى (weather page) ================= */
.weather{cursor:pointer;border-radius:20px;padding:5px 12px;border:1.5px solid transparent;transition:.12s}
.weather.focus{background:rgba(255,193,7,.16);border-color:var(--yellow);color:var(--yellow);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
#view-weather{padding-bottom:90px}
.wx-loading{padding:60px 10px;text-align:center;color:#9aa2b1;font-size:20px}
/* --- ئۈستىدىكى چوڭ كارتوچكا --- */
.wx-hero{
display:flex;align-items:center;justify-content:flex-start;gap:20px;flex-wrap:wrap;
background:linear-gradient(135deg,rgba(255,193,7,.16),rgba(255,255,255,.04));
border:1.5px solid rgba(255,193,7,.35);border-radius:22px;padding:22px 28px;margin:8px 0 18px;
/* تېلېۋىزور overscan (قىرغاق كېسىلىشى) دىن ساقلىنىش ئۈچۈن يان بوشلۇق */
box-sizing:border-box;max-width:100%;
/* فوكۇس رامكىسى چېتىلىپ كەتمەسلىكى ئۈچۈن ئىچكى بوشلۇق (ئۈستى/تۆۋەن تەڭ) */
padding:22px 28px;
}
.wx-city{font-size:24px;font-weight:700;color:#fff;letter-spacing:.3px}
.wx-big{display:flex;align-items:center;gap:14px;margin-top:6px;font-size:52px;line-height:1.1;color:#fff}
.wx-big b{font-size:70px;font-weight:800;color:var(--yellow);font-variant-numeric:tabular-nums}
.wx-big .wx-tx{font-size:26px;color:#dfe3ec;font-weight:600}
.wx-feel{font-size:20px;color:#c9ced9;margin-top:6px}
.wx-feel b{color:#fff;font-size:24px}
.wx-upd{font-size:15px;color:#8d95a6;margin-top:8px}
.wx-refresh{width:auto;padding:14px 30px;font-size:20px}
/* --- ئىنچىكە مەلۇماتلار --- */
.wx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:20px}
.wx-f{
display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);
border:1.5px solid rgba(255,255,255,.12);border-radius:16px;padding:15px 18px;font-size:19px;color:#dfe3ec;
transition:.12s;
}
.wx-f .wx-f-i{font-size:24px}
.wx-f .wx-f-l{color:#9aa2b1;font-size:17px}
.wx-f b{margin-right:auto;color:var(--yellow);font-size:22px;font-variant-numeric:tabular-nums}
.wx-f.focus,.wx-f.big{border-color:var(--yellow);background:rgba(255,193,7,.16);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.wx-f.big{font-size:24px}
.wx-f.big b{font-size:30px}
/* --- بۆلەك ماۋزۇسى --- */
.wx-sec{
font-size:22px;font-weight:700;color:#fff;margin:22px 0 12px;
padding-right:12px;border-right:4px solid var(--yellow);line-height:1.3;
}
/* --- كېلەر 12 سائەت --- */
.wx-hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.wx-h{
background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:16px;
padding:14px 6px;text-align:center;transition:.12s;
}
.wx-h .wx-h-t{font-size:17px;color:#9aa2b1;font-variant-numeric:tabular-nums}
.wx-h .wx-h-i{font-size:32px;margin:6px 0}
.wx-h .wx-h-d{font-size:24px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.wx-h .wx-h-p{font-size:15px;color:#7fc4ff;margin-top:4px}
.wx-h.focus,.wx-h.big{border-color:var(--yellow);background:rgba(255,193,7,.16);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.wx-h.big .wx-h-d{font-size:30px}
/* --- 7 كۈنلۈك --- */
.wx-days{display:flex;flex-direction:column;gap:10px}
.wx-d{
display:grid;grid-template-columns:1.3fr 1.2fr .9fr .7fr 1.4fr;align-items:center;gap:14px;
background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:16px;
padding:15px 22px;font-size:20px;color:#dfe3ec;transition:.12s;
}
.wx-d.on{background:rgba(255,193,7,.13);border-color:rgba(255,193,7,.5)}
.wx-d.focus{border-color:var(--yellow);background:rgba(255,193,7,.18);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.wx-d .wx-d-d{font-weight:700;color:#fff}
.wx-d .wx-d-dt{display:block;font-size:15px;color:#8d95a6;font-weight:400;margin-top:2px}
.wx-d .wx-d-i{display:flex;align-items:center;gap:10px;font-size:26px}
.wx-d .wx-d-i span{font-size:18px;color:#c9ced9}
.wx-d .wx-d-t{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.wx-d .wx-d-t b{color:#ff8f6b}
.wx-d .wx-d-t span{color:#7fc4ff;font-size:22px;margin-right:8px}
.wx-d .wx-d-p{color:#7fc4ff;font-size:18px}
.wx-d .wx-d-s{color:#9aa2b1;font-size:16px;text-align:left;direction:ltr}
.wx-empty{color:#8d95a6;font-size:19px;padding:14px}
@media (max-width:900px),(pointer:coarse){
.wx-hero{padding:16px 18px}
.wx-big{font-size:38px}
.wx-big b{font-size:50px}
.wx-big .wx-tx{font-size:20px}
.wx-city{font-size:20px}
.wx-sec{font-size:19px}
.wx-d{grid-template-columns:1fr 1fr;gap:8px;font-size:17px;padding:12px 14px}
.wx-d .wx-d-s{display:none}
.wx-h{min-width:0}
#view-weather{padding-bottom:70px}
}
/* ============ ئۈستىدىكى تۈرلەرنىڭ خەت نۇسخىسىنى تەڭشەش ============
ئىشلەتكۈچى: «تەۋسىيەدىن باشقىسىنىڭ خەت نۇسخىسى تازا چىرايلىق ھەم ئوچۇق ئەمەس».
سەۋەبى: تاللانمىغان تۈر 26px ئىنچىكە خەت + كۈلرەڭ رەڭ ئىدى (ھەمدە .tool لار 18px
بولۇپ ئىككىسى پەرقلىق چوڭلۇقتا). ھازىر ئوخشاش ئۆلچەم، ئوچۇق رەڭ، ھەممىسى
بىردەك توم خەت — نۇرلۇق ئېكراندا ئوقۇشۇچان. */
.tool{
font-weight:700;font-size:19px;color:#f0f3fa;
background:#262734;border:1.5px solid rgba(255,255,255,.10)
}
.tool .t-ic{font-size:21px}
.tab{
color:#e8ecf5;font-size:27px;font-weight:600;padding:9px 4px 13px;
text-shadow:0 1px 2px rgba(0,0,0,.45)
}
.tab:hover{color:#fff}
.tab.on{color:var(--yellow);font-weight:800;text-shadow:none}
/* تاللانمىغان تۈرگە فوكۇس كەلگەندە ئېنىق كۆرۈنسۇن */
.tab.focus{color:#1a1500;background:var(--yellow);font-weight:700;text-shadow:none}
@media (max-width:900px),(pointer:coarse){
.tool{font-size:17px;padding:10px 14px}
.tab{font-size:22px}
}
/* قويۇش بېتىدىكى VIP / ھەقسىز ئەسكەرتىشىنى ئىخچاملاش —
ئىشلەتكۈچى: «بەزى قايىلىرى بېسىلمايدىكەن». ئۇزۇن ئەسكەرتىش 5 كونۇپكىنى
تۆۋەنگە ئىتتىرىپ، ئېكران ئاستىغا قاراپ كېتىشىگە سەۋەب بولۇپ، تېلېۋىزوردا
«كۆرۈنمەيدۇ = بېسىلمايدۇ» دەپ ھېس قىلىناتتى. ھازىر ئىخچام. */
#plNote{max-height:80px;overflow:hidden;flex:0 0 auto}
#plNote .vipnote,#plNote .freenote{padding:9px 14px;margin:6px 0 10px;font-size:15px;line-height:1.5;border-width:1.5px}
#plNote .vipnote small{font-size:13px;margin-top:2px}
#plNote .vipnote b,#plNote .freenote b{font-size:16px}
.pl-desc{font-size:16px;color:#b6bdcb;margin:0 0 4px;line-height:1.6;max-height:52px;overflow:hidden}
/* قىسىم تىزىملىكىنى مۇستەقىل، چەكلىك ئېگىزلىكتىكى تىزىملىك قىلىمىز —
ئۇزۇن تىزىملىك (76 قىسىم) ئۈستىدىكى 5 كونۇپكىنى بېسىپ قويماسلىقى ئۈچۈن */
#plEps{
max-height:210px;overflow-y:auto;padding:2px 2px 6px;margin:10px 0 0;
background:rgba(0,0,0,.16);border-radius:12px;
}
#plEps::-webkit-scrollbar{width:7px}
#plEps::-webkit-scrollbar-thumb{background:#2a3550;border-radius:8px}
.ep{min-width:64px;padding:10px 13px;font-size:17px}
@media (max-width:900px),(pointer:coarse){
#plEps{max-height:none;overflow:visible;background:transparent}
}
/* ================= «چوڭ ئېكران» — تەياتىر ھالىتى =================
ئىلگىرى Fullscreen API ئىشلىمىگەچكە «چوڭ ئېكران» چەكسىمۇ ھېچ ئۆزگىرىش
بولمايتتى. ھازىر CSS بىلەن: سىن مەيدانى پۈتۈن ئېكران، ئوڭ ئۇچۇر تاختىسى
ۋە باھا رايونى يوشۇرۇلىدۇ، كونترول بالدىقى (⏯ ⏪ ⏩ ⛶ …) ئىشلەپ تۇرىدۇ. */
.player.theater{top:0;padding:0;gap:0;
grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
.player.theater .pl-info,.player.theater .pl-comments{display:none!important}
.player.theater .pl-stage{grid-column:1;grid-row:1;border:0;border-radius:0}
/* تەياتىر ھالىتىدە ئۈستى بالداقنى يوشۇرىمىز — ئۇنداق بولمىسا سىن پۈتۈن
ئېكران بولماي، ئۈستىدىن بوشلۇق ئېلىپ قالىدۇ */
body.theater .top{display:none!important}
body.theater main{padding-top:0}
.pl-stage:fullscreen,.pl-stage:-webkit-full-screen{width:100vw;height:100vh;border-radius:0;border:0;background:#000}
/* ============ ئىزدەش كونۇپكا تاختىسىنىڭ قوشۇمچە قۇرلىرى ============ */
.kb-sm{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;margin-top:9px}
.kb-sm .key{padding:11px 0;font-size:19px}
.kb .key.wide{grid-column:span 4}
/* ============ ئۈستى بالداق: بەلگە يېنىدىكى ئىسىم ھەممە ئۈسكۈنىدە كۆرۈنسۇن ============
ئىلگىرى (pointer:coarse) ئۈسكۈنىلەردە (يانفۇن، تېلېۋىزور) .t-tx يوشۇرۇلاتتى —
شۇڭا تېلېۋىزوردا پەقەت سىنبول كۆرۈنۈپ، «تەڭشەك / مىنىڭ / ئىزدەش / خاتىرە /
ھاۋارايى» دېگەن ئىسىملار كۆرۈنمەيتتى. ھازىر ئوچۇق كۆرسىتىمىز. */
.tool .t-tx{display:inline}
@media (pointer:coarse){
.tool{padding:10px 14px;gap:8px}
.tool .t-ic{font-size:20px}
.tool .t-tx{display:inline;font-size:16px;font-weight:700}
}
/* پەقەت ناھايىتى تار ئېكراندا (يانفۇن تىك ھالەت) ئىسىمنى يوشۇرىمىز */
@media (max-width:700px){
.tool .t-tx{display:none}
}
/* ============ ھاۋارايى بېتى: شەھەر تاللىغۇچ ۋە مەنبە بەلگىسى ============ */
/* .wx-hero نىڭ ئىككى بالىسى (.wx-hero-l ۋە .wx-acts) نى ئېنىق ئورۇنلاشتۇرىمىز.
ئىلگىرى .wx-hero دا justify-content:space-between بار ئىدى — كۇنۇپكىلار
ئېكراننىڭ سول چېتىگە تارتىلىپ، بەزى تېلېۋىزورلاردا overscan تۈپەيلى
كۆرۈنمەيدىغان رايونغا چىقىپ كېتىپ، تىزگىنەك بىلەن فوكۇس يەتمەيتتى.
ئىشلەتكۈچى: «ھاۋارايىنى تەڭشەشكە فوكۇس ئىشلىمەيۋاتىدۇ». */
.wx-hero-l{flex:1 1 auto;min-width:240px}
/* كۇنۇپكىلارنى RTL بويىچە «ئاستىدا» كۆرسىتىمىز — ھەر ئىككىسى ئېنىق بىر قۇر،
فوكۇس رامكىسى كېسىلمەيدۇ، تېلېۋىزوردا يانغا تارتىلىپ كۆرۈنمەي قالماسلىقى
ئۈچۈن ئېنىق ئورۇن. ئىشلەتكۈچى: «ھاۋارايىنى تەڭشەشكە فوكۇس ئىشلىمەيۋاتىدۇ». */
.wx-hero{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:16px}
.wx-hero-l{width:100%}
.wx-acts{display:flex;flex-direction:row;gap:12px;align-items:stretch;flex:0 0 auto;width:100%}
.wx-hero .wx-refresh{
flex:1 1 0;min-width:0;width:auto;padding:16px 18px;font-size:22px;font-weight:700;
justify-content:center;text-align:center
}
.wx-src{
font-size:15px;font-weight:600;color:#8d95a6;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:3px 12px;
margin-right:10px;vertical-align:middle
}
.citypick{display:flex;flex-direction:column;gap:10px;max-height:62vh;overflow-y:auto;padding:4px}
/* شەھەر ئىزدەش رامكىسى — 150+ شەھەر ئىچىدىن تېز تېپىش ئۈچۈن */
.cp-search{
width:100%;box-sizing:border-box;background:rgba(255,255,255,.08);
border:2px solid rgba(255,255,255,.16);border-radius:14px;
padding:14px 18px;font-size:19px;color:#fff;font-family:inherit;direction:rtl;
position:sticky;top:0;z-index:2
}
.cp-search:focus{outline:none;border-color:var(--yellow);background:rgba(255,193,7,.10)}
.cp-search::placeholder{color:#8d95a6}
/* رايون ماۋزۇسى (شىنجاڭ / ئىچكىرى ئۆلكە) */
.cp-sec{
font-size:17px;font-weight:700;color:var(--yellow);
padding:10px 6px 6px;margin-top:6px;border-bottom:1px solid rgba(255,255,255,.10)
}
.cityrow{
background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.14);border-radius:14px;
padding:13px 20px;font-size:19px;color:#e6ecf8;cursor:pointer;transition:.12s
}
.cityrow.focus,.cityrow.on{border-color:var(--yellow);background:rgba(255,193,7,.18);color:var(--yellow)}
@media (max-width:900px),(pointer:coarse){
.cityrow{font-size:17px;padding:11px 16px}
.wx-hero{gap:14px;padding:20px}
.wx-acts{flex-direction:row;align-items:stretch}
.wx-hero .wx-refresh{width:auto;flex:1 1 0;font-size:20px;padding:15px 14px}
/* overscan: تېلېۋىزور چېتىنى كېسىپ قويۇشى مۇمكىن — چەتتىن قوشۇمچە بوشلۇق */
.wx-facts{padding:0 2px}
}
/* ================= تېلېۋىزور / ئاجىز ئۈسكۈنە ئۈچۈن ئۈنۈم يېنىكلىتىش =================
ئىشلەتكۈچى: «ئەپ شۇنچە يىنىك تۇرۇپ تېلۋۇزۇرغا قاچلىسا كىنو قويسا نىمىشقا قاتىدۇ».
سەۋەب: كۆرۈنمەيدىغان ئېلېمېنتلارنىڭمۇ ئانىماتسىيىسى + blur ئۈنۈمى ئارقا تەرەپتە
ئىجرا بولۇپ، كونا تېلېۋىزورنىڭ GPU/CPU سىنى ئىشغال قىلاتتى. */
.forceup{backdrop-filter:none} /* blur ئورنىغا قويۇق رەڭ (ئاستا GPU دا ئېغىر) */
.notice-track,.ad-track{
animation-play-state:paused; /* يوشۇرۇن ۋاقىتتا ئانىماتسىيا توختايدۇ */
}
.top:hover .notice-track,.top .notice-track{animation-play-state:running}
.notice-ic{animation:none} /* يېنىپ-ئۆچۈش ئانىماتسىيىسىنى ئۆچۈردۇق */
.fu-ic{animation:none} /* چۈشۈرۈش كۆزنىكىدىكى سەكرەش */
/* رەسىم/كارتا ئۆزگىرىشلىرىنى GPU قاتلىمىغا چىقىرىمىز — قايتا سىزىشنى ئازايتىدۇ */
.pcard,.hcard,.tab,.tool,.pl-btn,.key{will-change:auto}
.pcard,.hcard{contain:layout paint}
.pimg{contain:layout paint content}
/* ================= ئۈستى بالداق كونۇپكىلىرىنى ئىخچاملاش =================
ئىشلەتكۈچى: «ئاۋۇلارنىڭ ئەتراپى بەك چوڭيىپ كېتىپتۇ، خەتنىمۇ سەل
كىچىكلىتىپ شۇنىڭغا ماسلاشتۇرۇپ ئەتراپىنىمۇ كىچىكلىتەيلى، كۆركەم قىلىپ».
ئىلگىرى .tool نىڭ ئىچكى بوشلۇقى 11px 20px، خېتى 19px، سىنبولى 21px ئىدى —
1366x768 لىك تېلېۋىزوردا بۇ بالداقنىڭ ئىچىدىكى ھەر بىر كونۇپكا بەك
توم كۆرۈنەتتى. ھازىر: ئىچكى بوشلۇق 8px 15px، خەت 17px، سىنبول 18px،
يۇمىلاقلىقىمۇ سەل ئازايتىلىپ ئىخچام ۋە كۆركەم قىلىندى.
⚠ بۇ بۆلەك ھەممىدىن كېيىن تۇرىدۇ — شۇڭا ئۈستىدىكى ئوخشاش ئۇسلۇبلارنى
بىكار قىلىدۇ (ئۇلارنى ئۆزگەرتمەستىن بىرلا يەردىن تەڭشەش مۇمكىن بولىدۇ). */
.tools{gap:8px}
.tool{padding:8px 15px;gap:7px;font-size:17px;border-radius:24px}
.tool .t-ic{font-size:18px}
@media (max-width:900px),(pointer:coarse){
.top{gap:6px}
.tool{padding:8px 11px;font-size:15px}
.tool .t-ic{font-size:16px}
}
@media (pointer:coarse){
.tool{padding:8px 12px;gap:7px;font-size:16px}
.tool .t-ic{font-size:17px}
.tool .t-tx{font-size:14px}
}
@media (max-width:700px){
.tool{padding:7px 9px}
}
/* ============================================================
██████ NEXUS پرېمىيۇم كىنوخانا ئۇسلۇبى — v20260980 ██████
بۇ قاتلام ھۆججەتنىڭ ئەڭ ئاخىرىدا تۇرىدۇ — ئۈستىدىكى بارلىق
ئۇسلۇبلارنى قايتا رەڭلەيدۇ، ئورۇنلاشتۇرۇش (layout) قائىدىلىرىگە
چېقىلمايدۇ. لايىھە تىلى:
• چوڭقۇر كېچە ئاسمانى ئارقا كۆرۈنۈش + ئاۋرورا نۇرلىرى (تىنچ،
ئانىماتسىيەسىز — ئاجىز تېلېۋىزور GPU سىنى يۈكلىمەيدۇ)
• ئالتۇن گرادىئېنت (ماركا رەڭگى) + بىنەپشە/كۆك يانداشما نۇر
• ئەينەك (glass) تاختىلار، چوڭقۇر سايىلەر، يۇمىلاق گىرۋەكلەر
• فوكۇس = ئاق + ئالتۇن قوش ھالقا ۋە نۇر چېچىش — تىزگىنەكتە
قايسى كونۇپكا تۇرۇۋاتقىنى بىر قاراشتا بىلىنىدۇ
⚠ بۇ قاتلامدا backdrop-filter قوشۇلمىغان (تېلېۋىزور ئۈچۈن)،
يېڭى چەكسىز ئانىماتسىيە قوشۇلمىغان، ھېچقانداق display/position
قائىدىسى ئۆزگەرتىلمىگەن — ئىقتىدار 100% ساقلىنىدۇ.
============================================================ */
:root{
--bg:#06070d;
--gold1:#ffe08a;
--gold2:#f5a623;
--goldtxt:#ffd257;
--on-gold:#241a00;
--glass:rgba(255,255,255,.055);
--glassbd:rgba(255,255,255,.11);
}
html{background:#06070d}
/* ---------- بەت ئارقا كۆرۈنۈشى: ئاۋرورا نۇرلىرى (تىنچ) ---------- */
body{
background:
radial-gradient(1000px 560px at 88% -10%, rgba(124,92,255,.22), transparent 62%),
radial-gradient(900px 520px at 6% 112%, rgba(34,211,238,.15), transparent 60%),
radial-gradient(700px 420px at 50% 118%, rgba(245,166,35,.07), transparent 65%),
linear-gradient(180deg,#0a0b14 0%,#06070d 52%,#080912 100%);
}
/* قويۇش بېتىدە فىلىم ئارقا كۆرۈنۈشى ئۈستۈن قالىدۇ (specificity يۇقىرى) */
/* ---------- ئاستا سىيرىلغۇچ ---------- */
.view::-webkit-scrollbar{width:9px}
.view::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:9px}
.view::-webkit-scrollbar-thumb:hover{background:rgba(255,197,49,.45)}
#plEps::-webkit-scrollbar-thumb,.pl-info::-webkit-scrollbar-thumb,.cm-list::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.20);border-radius:8px
}
/* ---------- بەت ئالمىشىش: پەقەت opacity (ئورۇن ئۆلچىنىشكە تەسىرى يوق) ---------- */
.view.active{animation:nxViewIn .22s ease both}
@keyframes nxViewIn{from{opacity:0}to{opacity:1}}
/* ---------- ئۈستى بالداق ---------- */
.top{
background:linear-gradient(180deg,rgba(6,7,13,.97) 34%,rgba(6,7,13,.78) 74%,transparent);
}
.brand .mark{
background:linear-gradient(135deg,var(--gold1),var(--gold2));
box-shadow:0 4px 20px rgba(245,166,35,.45),inset 0 1px 0 rgba(255,255,255,.55);
}
.brand b{color:var(--goldtxt);text-shadow:0 2px 18px rgba(255,197,49,.35)}
.top .tool{
background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
border:1.5px solid rgba(255,255,255,.10);
box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.tool.vip{background:linear-gradient(135deg,rgba(255,197,49,.20),rgba(255,152,0,.10));border-color:rgba(255,197,49,.55)}
.top .tool.focus{
background:linear-gradient(135deg,var(--gold1),var(--gold2));
color:var(--on-gold);border-color:rgba(255,224,126,.95);
box-shadow:0 0 0 3px rgba(255,197,49,.30),0 8px 26px rgba(245,166,35,.40);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.weather{color:var(--goldtxt)}
.weather.focus{
background:rgba(255,197,49,.16);border-color:rgba(255,197,49,.65);
box-shadow:0 0 14px rgba(255,197,49,.28);
}
.notice{background:rgba(255,197,49,.10);border:1.5px solid rgba(255,197,49,.28);border-radius:24px}
.notice-text{color:#ffdf9e}
.free-banner{
border-radius:26px;background:rgba(8,10,18,.92);
box-shadow:0 12px 34px rgba(0,0,0,.5);
}
/* ---------- تۈر بالداقلىرى (tabs) ---------- */
.tab.on{color:var(--goldtxt)}
.tab.on::after{
background:linear-gradient(-90deg,var(--gold1),var(--gold2));
box-shadow:0 2px 14px rgba(255,197,49,.50);
}
.tab.focus{
background:linear-gradient(135deg,var(--gold1),var(--gold2));
color:var(--on-gold);font-weight:800;text-shadow:none;
border-radius:14px;
box-shadow:0 0 0 3px rgba(255,197,49,.30),0 8px 22px rgba(245,166,35,.35);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* رايون سۈزگۈچى چىپلىرى — ئەينەك */
.area-chips .tab{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.13)}
.area-chips .tab.on{
background:linear-gradient(135deg,var(--gold1),var(--gold2));
color:var(--on-gold);border-color:transparent;font-weight:800;
box-shadow:0 4px 16px rgba(245,166,35,.35);
}
.area-chips .tab.focus{
border-color:rgba(255,224,126,.9);background:rgba(255,197,49,.16);color:#fff;
box-shadow:0 0 0 3px rgba(255,197,49,.32);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.area-chips .tab.on.focus{
background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--on-gold);
border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 8px 22px rgba(245,166,35,.4);
}
/* ---------- چوڭ ئايلانما بانېر ---------- */
.carousel,.slide{border-radius:22px;border:1px solid rgba(255,255,255,.10);box-shadow:0 20px 55px rgba(0,0,0,.55)}
.carousel.focus{
outline:none;
box-shadow:0 0 0 3px rgba(255,255,255,.92),0 0 0 7px rgba(255,197,49,.55),0 20px 55px rgba(0,0,0,.6);
}
.slide.focus{
border-color:rgba(255,224,126,.95);
box-shadow:0 0 0 3px rgba(255,197,49,.35),0 18px 48px rgba(0,0,0,.6);
}
.cs .cs-cap{background:linear-gradient(0deg,rgba(4,5,11,.95) 10%,rgba(4,5,11,.46) 46%,transparent 80%)}
.cs .cs-sub{color:var(--goldtxt)}
.dots i{width:8px;height:8px;background:rgba(255,255,255,.34)}
.dots i.on{
background:linear-gradient(-90deg,var(--gold1),var(--gold2));width:30px;
box-shadow:0 0 12px rgba(255,197,49,.65);
}
/* ---------- باش بەت رەڭلىك چوڭ كۇنۇپكىلىرى ---------- */
.qbtn{
border-radius:20px;position:relative;
box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 14px 34px rgba(0,0,0,.45);
}
.c1{background:linear-gradient(140deg,#3ddc84,#0b8a4d)}
.c2{background:linear-gradient(140deg,#c07af5,#6d28d9)}
.c3{background:linear-gradient(140deg,#ff7a70,#c2182b)}
.c4{background:linear-gradient(140deg,#64a9ff,#1d4ed8)}
.c5{background:linear-gradient(140deg,#ffa268,#dd5410)}
.c6{background:linear-gradient(140deg,#4fd8ee,#0b7f96)}
.qbtn .ic{
font-size:33px;width:66px;height:66px;border-radius:50%;
display:grid;place-items:center;
background:rgba(255,255,255,.17);
box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42),0 8px 18px rgba(0,0,0,.28);
}
.qbtn .tx{letter-spacing:.3px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.qbtn.focus{border-color:rgba(255,255,255,.95);
box-shadow:0 0 0 4px rgba(255,197,49,.50),0 20px 48px rgba(0,0,0,.62);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ---------- بۆلەك ماۋزۇلىرى ---------- */
.sec{font-size:26px;letter-spacing:.2px}
.sec::before{
content:"";width:6px;height:26px;border-radius:4px;flex:0 0 auto;
background:linear-gradient(180deg,var(--gold1),#f97316);
box-shadow:0 0 14px rgba(255,168,47,.55);
}
.sec::after{height:1.5px;background:linear-gradient(-90deg,rgba(255,255,255,.16),transparent)}
/* ---------- پوستېر كارتىلىرى ---------- */
.pcard{
border-radius:18px;border:2px solid rgba(255,255,255,.07);
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
box-shadow:0 12px 30px rgba(0,0,0,.42);
}
.pcard:hover{border-color:rgba(255,255,255,.22)}
.pcard.focus{border-color:rgba(255,224,126,.95);
box-shadow:0 0 0 3px rgba(255,197,49,.32),0 0 36px rgba(255,197,49,.22),0 20px 48px rgba(0,0,0,.66);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.pcard .badge{
border-radius:9px;background:linear-gradient(135deg,#ffe28d,#f59e0b);
box-shadow:0 4px 14px rgba(245,158,11,.48),inset 0 1px 0 rgba(255,255,255,.5);
}
.pcard .badge.free{background:linear-gradient(135deg,#5eead4,#0d9463);box-shadow:0 4px 14px rgba(13,148,99,.45)}
.pcard .eps{background:rgba(4,5,11,.74);border:1px solid rgba(255,255,255,.15);border-radius:8px}
.pcard .ptx{color:#eef1f8;font-weight:600}
.hcard{
border-radius:18px;border:2px solid rgba(255,255,255,.07);
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
box-shadow:0 12px 30px rgba(0,0,0,.42);
}
.hcard.focus{
border-color:rgba(255,224,126,.95);
box-shadow:0 0 0 3px rgba(255,197,49,.32),0 0 36px rgba(255,197,49,.20),0 18px 44px rgba(0,0,0,.62);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.hcard .htx{color:#eef1f8;font-weight:600}
/* ---------- ئىزدەش ---------- */
.sinput{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.13);border-radius:32px}
.sinput.focus,.sinput.on{border-color:rgba(255,224,126,.92);box-shadow:0 0 0 3px rgba(255,197,49,.28)}
.key{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.11);border-radius:14px}
.key.focus{
background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--on-gold);
border-color:transparent;
box-shadow:0 0 20px rgba(255,197,49,.42);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ---------- تەپسىلات بېتى ---------- */
.detail .poster{border-radius:22px;box-shadow:0 26px 64px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.10)}
.dinfo h1{text-shadow:0 3px 20px rgba(0,0,0,.55)}
.dmeta span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:10px}
/* ---------- قىسىم كونۇپكىلىرى ---------- */
.ep{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:12px;color:#e9edf6}
.ep.on{
background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--on-gold);
border-color:transparent;font-weight:800;
box-shadow:0 4px 16px rgba(245,158,11,.42);
}
.ep.focus{
border-color:rgba(255,224,126,.95);background:rgba(255,197,49,.15);box-shadow:0 0 0 3px rgba(255,197,49,.38),0 6px 18px rgba(0,0,0,.5);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
/* ---------- ئومۇمىي كونۇپكىلار ---------- */
.btn{
background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--on-gold);
border-radius:32px;box-shadow:0 10px 26px rgba(245,158,11,.32);
}
.btn.ghost{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);color:#eef1f8;box-shadow:none}
.btn.focus{box-shadow:0 0 0 3px rgba(255,197,49,.42),0 12px 30px rgba(0,0,0,.5)}
.backbtn{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);border-radius:26px}
.backbtn.focus{
background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--on-gold);
border-color:transparent;box-shadow:0 0 0 3px rgba(255,197,49,.32),0 10px 26px rgba(245,166,35,.35);
}
/* ---------- قويۇش بېتى ---------- */
.player{background:#04050b}
.pl-stage{border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 22px 60px rgba(0,0,0,.58)}
.pl-info{
background:linear-gradient(180deg,rgba(14,17,30,.84),rgba(8,10,19,.80));
border:1px solid rgba(255,255,255,.10);border-radius:20px;
box-shadow:0 22px 60px rgba(0,0,0,.48);
}
.pl-btn{background:rgba(8,11,22,.70);border:1.5px solid rgba(255,255,255,.20);border-radius:24px}
.pl-btn.focus{
background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--on-gold);
border-color:transparent;
box-shadow:0 0 0 3px rgba(255,197,49,.36),0 10px 26px rgba(0,0,0,.52);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.pl-btn.go{background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--on-gold);border-color:transparent}
.pl-act{
background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
border:1.5px solid rgba(255,255,255,.13);border-radius:16px;
}
.pl-act .ic{filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.pl-act.focus{
background:linear-gradient(160deg,rgba(255,224,126,.26),rgba(245,166,35,.14));
border-color:rgba(255,224,126,.92);
box-shadow:0 0 0 3px rgba(255,197,49,.30),0 12px 28px rgba(0,0,0,.52);outline:3px solid rgba(255,224,126,.95);outline-offset:2px;}
.pl-act.on{
background:linear-gradient(135deg,var(--gold1),var(--gold2));color:var(--on-gold);
border-color:transparent;
}
.pl-comments{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:14px}
#plEps{background:rgba(2,3,8,.30);border:1px solid rgba(255,255,255,.07);border-radius:14px}
.pl-seek{border-radius:24px;background:rgba(5,7,14,.80)}
/* ---------- بىۋاستە كۆرسىتىش ---------- */
.live-item{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.10);border-radius:16px}
.live-item.on{
background:linear-gradient(135deg,rgba(255,224,126,.20),rgba(245,166,35,.10));
border-color:rgba(255,197,49,.58);color:var(--goldtxt);
}
.live-item.focus{border-color:rgba(255,224,126,.92);box-shadow:0 0 0 3px rgba(255,197,49,.30)}
.live-stage{border-radius:20px;border:1px solid rgba(255,255,255,.12)}
/* ---------- مېنىڭ / ئەزالىق / تەڭشەك ---------- */
.code-big{
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
border:1.5px solid rgba(255,197,49,.38);border-radius:18px;
color:var(--goldtxt);text-shadow:0 0 26px rgba(255,197,49,.30);
}
.member-card{
background:linear-gradient(160deg,rgba(255,197,49,.10),rgba(255,255,255,.03));
border:1.5px solid rgba(255,197,49,.48);border-radius:20px;
}
.plan{
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
border:1.5px solid rgba(255,255,255,.10);border-radius:20px;
}
.set-card{
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
border:1px solid rgba(255,255,255,.09);border-radius:20px;
}
.src-item{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.11);border-radius:15px}
.src-item.focus{
border-color:rgba(255,224,126,.92);background:rgba(255,197,49,.13);
box-shadow:0 0 0 3px rgba(255,197,49,.26);
}
.src-item.on{border-color:rgba(255,197,49,.62);color:var(--goldtxt)}
/* ---------- ھاۋارايى بېتى ---------- */
.wx-hero{
background:linear-gradient(135deg,rgba(255,197,49,.15),rgba(124,92,255,.11) 58%,rgba(34,211,238,.09));
border:1.5px solid rgba(255,197,49,.32);border-radius:24px;
box-shadow:0 18px 48px rgba(0,0,0,.42);
}
.wx-f,.wx-h,.wx-d{border-radius:18px}
.wx-f.focus,.wx-h.focus{box-shadow:0 0 0 3px rgba(255,197,49,.30),0 10px 26px rgba(0,0,0,.45)}
.wx-d.focus{box-shadow:0 0 0 3px rgba(255,197,49,.30)}
/* ---------- كۆزنەكلەر / toast ---------- */
.modal{background:rgba(3,4,9,.82)}
.modal-box{
background:linear-gradient(180deg,#151726,#0e101c);
border:1px solid rgba(255,255,255,.12);border-radius:24px;
box-shadow:0 36px 110px rgba(0,0,0,.78);
}
.modal-h{
border-bottom:1px solid rgba(255,255,255,.08);
background:linear-gradient(180deg,rgba(255,197,49,.09),transparent);
border-radius:24px 24px 0 0;
}
.toast{
background:rgba(10,12,22,.96);border:1px solid rgba(255,197,49,.35);
border-radius:16px;box-shadow:0 16px 44px rgba(0,0,0,.6);
}
.qr-card{
background:linear-gradient(180deg,#151726,#0e101c);border-radius:26px;
box-shadow:0 32px 96px rgba(0,0,0,.82);
}
/* ---------- كىچىك ئېكران ماسلىشىشى ---------- */
@media (max-width:900px),(pointer:coarse){
.qbtn{border-radius:16px}
.qbtn .ic{width:52px;height:52px;font-size:26px}
.pcard,.hcard{border-radius:15px}
.carousel,.slide{border-radius:18px}
.pl-stage,.pl-info{border-radius:16px}
.modal-box{border-radius:20px}
.sec::before{height:22px}
}
@media (max-width:480px){
.qbtn .ic{width:46px;height:46px;font-size:23px}
}
/* ==== NEXUS ئۇسلۇبىنىڭ ئاخىرى ==== */
/* ---------- NEXUS تۈزىتىش: ئۈستى رايونى تازىلىقى ----------
مەسىلە: (pointer:coarse) تېلېۋىزورلاردا ئېلان بالدىقى (.mobile-notice)
مۇقىم قۇردا تۈر بالداقلىرى بىلەن قاتارلىشىپ، بىر-بىرىنىڭ ئۈستىنى
بېسىپ تۇراتتى. ھەل قىلىش: كەڭ ئېكرانلىق تېلېۋىزوردا ئۈستى بالداق
كۆرۈنۈشى 72px دە قالىدۇ، ئېلان ئۇنىڭ ئاستىدىكى ئايرىم پاكىز قۇردا
(y=80) تۇرىدۇ، مەزمۇن --toph نى 114px غا كۆتۈرۈپ ئۇنىڭ ئاستىدىن
باشلىنىدۇ — ھېچنېمە بېسىلمايدۇ. قويغۇچ/مەزمۇن/ھەقسىز ئەسكەرتىش
ھەممىسى --toph نى ئىشلەتكەچكە بىردەك سىيرىلىدۇ.
تار ئېكران (يانفۇن) دا كونا ھالەت ساقلىنىدۇ. */
@media (pointer:coarse) and (min-width:901px){
:root{--toph:116px}
.top{height:72px}
.top .notice{display:none!important}
.mobile-notice{
top:80px!important;height:36px;
border-radius:22px;
background:rgba(255,197,49,.10);
border:1.5px solid rgba(255,197,49,.28);
}
.mobile-notice .notice-text{color:#ffdf9e}
}
/* ھەقسىز مەزگىل ئەسكەرتمىسى — كەڭ ئېكراندا مەركەزدە ئىخچام كۇنۇپكا شەكلىدە */
@media (min-width:901px){
.free-banner{
left:50%;right:auto;transform:translateX(-50%);
width:auto;min-width:420px;max-width:88vw;
padding:9px 30px;border-radius:28px;
}
}
/* ---- ھاۋارايى: IP ئاپتوماتىك تېپىلمىغاندا چىقىدىغان ئەسكەرتىش (v20260982) ---- */
.wx-src-warn{background:rgba(255,120,80,.16)!important;border-color:rgba(255,120,80,.45)!important;color:#ffb08a!important}
.wx-hint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin:10px 0 4px;padding:12px 16px;border-radius:16px;
background:linear-gradient(180deg,rgba(255,197,49,.10),rgba(255,197,49,.05));
border:1.5px solid rgba(255,197,49,.32);color:#ffdf9e;font-size:15px;line-height:1.5}
.wx-hint span{flex:1;min-width:180px}
.wx-hint .btn{padding:9px 16px;font-size:14px;white-space:nowrap}
@media (pointer:coarse) and (min-width:901px){
.wx-hint{font-size:14px;padding:10px 14px;margin:8px 0 4px}
.wx-hint .btn{padding:8px 14px;font-size:13px}
}
/* ================= ئاپتوماتىك كېيىنكى قىسىمغا ئۆتۈش (v20260985) ================= */
.autonext{position:absolute;right:28px;bottom:104px;z-index:46;
display:flex;align-items:center;justify-content:center;pointer-events:none}
.autonext.hidden{display:none}
.autonext .an-box{pointer-events:auto;min-width:280px;max-width:380px;
background:linear-gradient(160deg,rgba(20,24,40,.96),rgba(12,14,26,.98));
border:1px solid rgba(140,160,255,.34);border-radius:18px;
padding:18px 22px 16px;box-shadow:0 22px 56px rgba(0,0,0,.6);
text-align:center;color:#fff}
.autonext .an-t{font-size:.86rem;opacity:.78;margin-bottom:6px}
.autonext .an-n{font-size:1.16rem;font-weight:800;margin-bottom:8px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.autonext .an-c{font-size:.95rem;opacity:.9;margin-bottom:14px}
.autonext .an-c b{font-size:1.7rem;color:#ffd166;font-weight:900;
display:inline-block;min-width:1.4em;vertical-align:-3px}
.autonext .btn{margin:0 auto}
/* تېلېۋىزور — ساناق تاختىسى سول ئاستىغا، چوڭراق */
@media (pointer:coarse) and (min-width:901px){
.autonext{right:auto;left:44px;bottom:150px}
.autonext .an-box{min-width:340px;max-width:460px;padding:22px 26px 20px}
.autonext .an-t{font-size:1rem}
.autonext .an-n{font-size:1.4rem}
.autonext .an-c{font-size:1.1rem}
.autonext .an-c b{font-size:2.1rem}
}
@media (max-width:900px){
.autonext{right:10px;left:10px;bottom:92px}
.autonext .an-box{min-width:0;width:100%;max-width:none;padding:14px 16px 12px}
}
/* ================= v20260988 — قويۇش بېتى UI تەڭشەكلىرى =================
1) ماۋزۇ كىچىكلىتىلدى ھەم رامكىدىن چىقىپ كەتمەيدۇ
2) سىن مەيدانى كىچىكلىتىلدى (چوڭ ئېكرانلىق تېلېۋىزوردا)
3) باھا رايونى ئاستىغا يۆتكەلدى، بوش ئورۇنغا قىسىملار چىقىدۇ
4) تىزگىنەك يوللانمىسى (كۆرۈنەرلىك)
==================================================================== */
.pl-title{
font-size:21px!important;line-height:1.3;margin:0 0 6px;color:#fff;
overflow-wrap:anywhere;word-break:break-word;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
/* سىن كىچىك، ئۇچۇر/قىسىم تاختىسى كەڭ — پەقەت چوڭ ئېكراندا (تېلېۋىزور) */
@media (min-width:901px){
.player{grid-template-columns:minmax(320px,1.22fr) minmax(0,1.12fr)}
}
/* ===== 2026-09-17: باھا رايونى ئۈستىگە يۆتكەلدى =====
ئىشلەتكۈچى: «باھانى مەن سىزىپ قويغان يەرگە يۆتكەيلى» — يەنى تېما/قىسىم/
يىلى-رايون-تۈرى/چۈشەندۈرۈش ئاستى، «چوڭ ئېكران … ئەزالىق» كۇنۇپكا
قۇرىنىڭ ئۈستى. ئىلگىرى ئەڭ ئاستىدا (قىسىم تورىنىڭ ئاستىدا) ئىدى.
يىغىلغان ھالەتتە پەقەت بىر قۇر (💬 باھا ▾) — ئورۇن ئاز ئالىدۇ؛
ئېچىلغاندا ئىچىدىن سىيرىلىدۇ (max-height) شۇڭا قىسىم تورىنى
بېسىپ قالمايدۇ. */
.pl-comments{max-height:none;flex:0 0 auto;margin:2px 0 10px}
.pl-comments.collapsed{max-height:none}
.pl-comments:not(.collapsed) .cm-list{max-height:120px;overflow-y:auto}
.cm-list{max-height:100px;overflow-y:auto}
/* قىسىملار بوش ئورۇننى ئىگىلىسۇن */
#plEps{margin:10px 0 10px;flex:1 1 auto;align-content:flex-start}
.pl-info{scrollbar-width:thin}
/* ---- تىزگىنەك يوللانمىسى (ئەسلىدە يوشۇرۇن) ---- */
.pl-rtip.hidden{display:none!important}
.pl-rtip{
display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
background:linear-gradient(90deg,rgba(255,201,60,.14),rgba(255,201,60,.05));
border:1px solid rgba(255,201,60,.32);border-radius:12px;
padding:9px 12px;margin-bottom:12px;font-size:14px;color:#ffe9b0
}
.pl-rtip .rt-t{font-weight:800;color:var(--yellow);font-size:15px}
.pl-rtip span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pl-rtip i{
font-style:normal;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
border-radius:7px;padding:2px 8px;font-size:13px;color:#fff;font-weight:700
}
/* كىچىك ئېكراندا يوللانما ئىخچام */
@media (max-width:900px),(pointer:coarse){
.pl-rtip{font-size:13px;padding:8px 10px;gap:6px 10px}
}
/* ============ باش بەت: «كېيىنكى» كۇنۇپكىسى (قاتارلارنى تەدرىجىي ئېچىش) ============ */
.more-wrap {
display: flex;
justify-content: center;
padding: 20px 12px 34px;
}
.more-btn {
min-width: 240px;
padding: 15px 34px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: linear-gradient(140deg, rgba(62, 74, 128, .58), rgba(34, 41, 80, .78));
color: #eef1ff;
font-family: inherit;
font-size: 1.04rem;
font-weight: 800;
cursor: pointer;
letter-spacing: .2px;
transition: transform .15s ease, box-shadow .18s ease, background .18s ease;
box-shadow: 0 8px 24px rgba(0, 0, 0, .32);
}
.more-btn:hover {
background: linear-gradient(140deg, rgba(84, 99, 168, .72), rgba(50, 60, 118, .88));
box-shadow: 0 12px 30px rgba(0, 0, 0, .44);
}
.more-btn:active { transform: scale(.97); }
.more-btn.focusable:focus,
.more-btn:focus-visible {
outline: 3px solid #ffcf5c;
outline-offset: 4px;
}
/* 2026-10-01: تېلېۋىزور يىراقتىن فوكۇس كەلگەندە (.focus سىنىپى بىلەن)
رەڭ ئۆزگىسۇن. ئەسلىدە پەقەت :focus / :focus-visible پېئاب-سىنىپى ئىدى،
ئەمما ئەپ JS ئارقىلىق .focus سىنىپىنى قوشىدۇ، شۇڭا كۆرۈنمەيتتى. */
.more-btn.focus,
.more-btn.focusable.focus {
outline: 3px solid rgba(255, 224, 126, .95);
outline-offset: 4px;
background: linear-gradient(140deg, rgba(84, 99, 168, .95), rgba(50, 60, 118, 1));
color: #fff;
border-color: rgba(255, 224, 126, .9);
box-shadow: 0 0 0 3px rgba(255, 193, 7, .55), 0 12px 30px rgba(0, 0, 0, .5);
}
/* تېلېۋىزوردا يىراقتىن كۆرۈنۈشى ئۈچۈن چوڭايتىمىز */
@media (min-width: 1200px) {
.more-btn { min-width: 320px; font-size: 1.18rem; padding: 18px 40px; }
}
/* ===== 🐞 «چوڭ ئېكراندا قارا ئېكران» ئوڭشىلىشى =====
⚠ مەسەلە: .pl-wall (پوستېر تامچىسى) z-index:2 ئىدى — ۋىدىئو بولسا
z-index:1. تامچىنىڭ ئارقا رەڭگى rgb(12,12,20) = دېگۈدەك قارا. سىن
ئاستا باشلانغاندا (يالغۇز تېلېۋىزوردا ئەمەس، ئاستا توردا) تامچە
ئۈستىدە قېلىپ قالاتتى ۋە ئېكران قارا كۆرۈنەتتى. تامچىنىڭ رەسىملىرى
يۈكلەنمىسە (تېلېۋىزور بىراۋزېرى) ئۇ پۈتۈنلەي قارا بولۇپ قالاتتى.
ھەل: تامچە پەقەت ئارقا كۆرۈنۈش (z-index:0) — ۋىدىئونى ھەرگىز توسالمايدۇ. */
.pl-wall{z-index:0!important}
.pl-stage>video{z-index:1!important}
/* «قويۇۋاتىدۇ…» ئايلىنىشى ئۇزۇنغا سوزۇلغاندا كۆرۈنىدىغان ئەسكەرتىش */
.pl-slow{position:absolute;inset:0;z-index:9;display:none;place-items:center;
grid-template-rows:auto auto auto;align-content:center;justify-items:center;gap:14px;
color:#fff;font-size:19px;text-align:center;background:rgba(4,6,14,.86);padding:24px}
.pl-slow.on{display:grid}
.pl-slow .ps-ico{font-size:52px;line-height:1}
.pl-slow .ps-tx{font-weight:700;max-width:78%;line-height:1.6}
.pl-slow .ps-btn{margin-top:6px;background:var(--yellow);color:#1a1500;border:0;
padding:12px 28px;border-radius:24px;font-size:18px;font-weight:800;cursor:pointer;font-family:inherit}
.pl-slow .ps-btn.focus{outline:3px solid rgba(255,224,126,.95);outline-offset:3px}
/* ============================================================
«بۈگۈنكى يېڭى» بەلگىسى — ئاپتوماتىك ئېلان قىلىنغان كىنولار ئۈچۈن
(upuk_new_row)
============================================================ */
.badge.new {
background: linear-gradient(135deg, #31d158, #17a544) !important;
color: #ffffff !important;
box-shadow: 0 2px 10px rgba(49, 209, 88, .55);
font-weight: 800;
letter-spacing: .2px;
}
/* يېڭى كارتونىڭ چۆرىسىدە يۇمشاق يېشىل جىلۋە — تېلۋىزوردا ئېنىق كۆرۈنىدۇ */
.pcard:has(.badge.new) .pwrap {
box-shadow: 0 0 0 2px rgba(49, 209, 88, .55),
0 0 18px rgba(49, 209, 88, .28) !important;
}
/* :has() نى قوللىمايدىغان كونا Android WebView ئۈچۈن زاپاس يول */
.pcard.newcard .pwrap {
box-shadow: 0 0 0 2px rgba(49, 209, 88, .55),
0 0 18px rgba(49, 209, 88, .28) !important;
}
/* ============================================================
📺 تېلېۋىزىيە قانال كارتىسى — رەسىم رامكىنى تولۇق تولدۇرىدۇ
------------------------------------------------------------
ئىلگىرى رەسىم max-width/max-height 86% ئىدى: رەسىم رامكىنىڭ
ئوتتۇرىسىدا كىچىك قېلىپ، ئەتراپىدا قارا بوشلۇق قالاتتى.
تېلېۋىزوردا بۇ ناھايىتى سەت كۆرۈنەتتى.
ھازىر: cover — رامكا تولۇق تولىدۇ، قىرقىلغان قىسمى يوشۇرۇلىدۇ.
============================================================ */
.chcard .chimg {
position: relative;
width: 100%;
/* 🎯 16:9 نىسبىتى — قانال لوگولىرىنىڭ ئۆلچەملىك نىسبىتى.
ئىلگىرى مۇقىم 170px ئىدى: كەڭلىكى 296px بولغاندا نىسبەت 1.74:1
بولۇپ، 4:3 لوگولار قىرقىلىپ قالاتتى (CCTV بەلگىسىنىڭ چېتى كېسىلەتتى).
ھازىر ئېكران كەڭلىكىگە قاراپ ئۆزلۈكىدىن ماسلىشىدۇ. */
aspect-ratio: 16 / 9;
height: auto;
overflow: hidden;
border-radius: 0;
background: #0d1018;
}
.chcard .chimg .chthumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
/* 📐 contain + scale(1.18) — لوگو پۈتۈنلەي كۆرۈنىدۇ، ھەم رامكىنى
تولۇقراق تولدۇرىدۇ. scale بىلەن �امكا ئىچىدە چوڭايتىمىز،
شۇڭا ھېچقايسى چېتى قىرقىلمايدۇ (چېتى ئىچىگە قاراپ تارتىلغان). */
object-fit: contain;
object-position: center;
display: block;
border-radius: 0;
/* 🎯 1.06 — سىناپ تاللانغان ئەڭ ياخشى قىممەت.
1.00 = ئەتراپىدا بوشلۇق قالىدۇ
1.18 = لوگونىڭ چېتى قىرقىلىدۇ
1.06 = تولۇق تولىدۇ، چېتىمۇ قىرقىلمايدۇ ✅ */
transform: scale(1.06);
transform-origin: center;
}
/* 🎨 ئارقا قاتلام: ئوخشاش لوگونىڭ چوڭايتىلغان ۋە خىرەلەنگەن نۇسخىسى.
شۇنىڭ بىلەن contain دىن قالغان بوشلۇق لوگونىڭ ئۆز رەڭگى بولىدۇ —
قارا چاسا ئەمەس، چىرايلىق كۆرۈنىدۇ. */
.chcard .chimg .chblur {
position: absolute;
inset: -18%;
width: 136%;
height: 136%;
z-index: 1;
object-fit: cover;
object-position: center;
display: block;
filter: blur(16px) saturate(1.55) brightness(.68);
transform: scale(1.06);
}
/* خىرەلەنگەن قاتلام ئۈستىگە قارا پەردە — يېزىق ئوقۇشچان بولۇشى ئۈچۈن */
.chcard .chimg .chblur + .chthumb { background: transparent; }
.chcard .chimg.nologo .chblur { display: none; }
/* contain دىن قالغان بوشلۇقنى يۇمشاق قارا پەردە بىلەن قاپلايمىز */
.chcard .chimg::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: radial-gradient(ellipse at center,
rgba(0,0,0,0) 50%,
rgba(0,0,0,.34) 100%);
}
/* رەسىم ئېچىلمىسا — 📺 بەلگىسى ئوتتۇرىدا */
.chcard .chimg .chph {
display: none;
position: absolute;
inset: 0;
z-index: 5;
place-items: center;
font-size: 52px;
opacity: .55;
}
.chcard .chimg.nologo .chph,
.chcard .chimg:not(:has(.chthumb)) .chph {
display: grid;
}
/* نۇرلۇق يۇمشاق پەردە — رەسىم رامكا بىلەن قوشۇلۇپ كېتىدۇ */
.chcard .chimg::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: linear-gradient(180deg,
rgba(0,0,0,0) 76%,
rgba(0,0,0,.22) 100%);
border-radius: 0;
}
.chcard.focus .chimg::after { background: linear-gradient(180deg,
rgba(0,0,0,0) 72%,
rgba(255,197,49,.18) 100%); }
/* كارتا ئۆزى — رەسىم چېتىگە چاپلىشىشى ئۈچۈن padding يوق */
.chcard {
padding: 0 !important;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.chcard .htx {
padding: 10px 8px 11px !important;
margin: 0;
}
/* ئېگىزلىك ئەمدى aspect-ratio بىلەن ھېسابلىنىدۇ — مۇقىم ئېگىزلىك زۆرۈر ئەمەس */
@media (max-width: 640px) {
.chcard .chimg .chph { font-size: 40px; }
}
/* ============================================================
🖼🖼 قوش كارۇسېل — ئېكران ئىككى قىسىمغا بۆلۈنىدۇ
------------------------------------------------------------
ئىلگىرى بىرلا چوڭ رەسىم 4000x1084 (1.2-1.5 MB) تولۇق كەڭلىكتە
كۆرۈنەتتى: يۈكلىشى ئاستا، ئاجىز تېلېۋىزوردا كادر چۈشەتتى،
رەسىممۇ سىغىمغا سىغماي بۇزۇلۇپ كۆرۈنەتتى.
ھازىر: ئىككى يېرىم — ھەر بىرىدە كىچىكرەك رەسىم (79-103 KB،
93-96% كىچىك) → يۈكلەش تېز، ئېنىقلىق يۇقىرى.
============================================================ */
.carousel {
position: relative;
/* 🎯 2026-09-19 (3): ئىشلەتكۈچى تەلىپى — «رەسىم شۇ يەرگە چىققاندا
ئاپتوماتىك رامكىغا تەڭشەلسۇن». ئېگىزلىك مۇقىم ئەمەس: ھەر بىر
يېرىم رامكا 16:9 بولۇپ، رەسىم نىسبىتىگە تەڭ كېلىدۇ.
⚠ grid + aspect-ratio ئىشلەتمەيمىز: كونا ئەقلىي تېلېۋىزور
WebView لىرىدا grid نىڭ auto قۇرى aspect-ratio بىلەن توقۇنۇشۇپ،
ئېگىزلىك 0 بولۇپ رەسىم يوقاپ كېتىدۇ. flex بولسا ھەممە يەردە
ئىشلەيدۇ. */
height: auto;
border-radius: 20px;
overflow: hidden;
margin: 6px 2px 22px;
background: #12141c;
display: -webkit-box; /* كونا WebView زاپاس */
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;
align-items: stretch;
gap: 10px;
padding: 0;
}
/* dots — مۇطلق ئورۇنلاشتۇرۇش (ئورۇن ئىگىلىمەيدۇ) */
.carousel > .dots {
position: absolute;
left: 50%;
bottom: 12px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
z-index: 9;
margin: 0;
}
.cb-half {
position: relative;
overflow: hidden;
border-radius: 16px;
background: #1a1d28;
cursor: pointer;
/* 🎯 16:9 نىسبەت — ئۈچ خىل ئۇسۇل بىرگە:
① aspect-ratio (يېڭى WebView)
② .cb-ratio ئىچكى قاتلىمى ئارقىلىق padding-top:56.25% (كونا WebView)
③ ئەڭ ئاستىدا .carousel غا زاپاس ئېگىزلىك بېرىمىز
شۇنداق قىلغاندا ھەر قانداق تېلېۋىزوردا رەسىم كۆرۈنىدۇ. */
-webkit-box-flex: 1;
-webkit-flex: 1 1 0;
flex: 1 1 0;
min-width: 0;
min-height: 0;
width: 50%;
}
/* 16:9 نىسبەت ئىچكى قاتلام ئارقىلىق (كونا WebView ئۈچۈن ئەڭ ئىشەنچلىك) */
.cb-half::before {
content: "";
display: block;
padding-top: 56.25%; /* 9 / 16 */
}
/* هاۋانىڭ ئىچىدىكى مەزمۇن مۇطلق ئورۇنلاشتۇرۇلىدۇ */
/* 🐞 2026-09-19: inset:0 كونا WebView دا ئىشلىمەيدۇ — ئايرىم يازىمىز */
.cb-half > * {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
width: 100%;
height: 100%;
}
/* يەككە رەسىم ھەمىشە كۆرۈنىدۇ (js .cs2 نىڭ ئورنىغا قويىدۇ) */
.cb-half > img.cs2 {
opacity: 1 !important;
z-index: 2;
pointer-events: auto;
object-fit: cover;
object-position: center;
display: block;
border: 0;
}
.cb-left, .cb-right { min-width: 0; }
.cs2 {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0;
opacity: 0;
pointer-events: none;
}
.cs2.on {
opacity: 1;
pointer-events: auto;
z-index: 2;
/* 🐞 2026-09-19: ئىشلەتكۈچى تېلېۋىزورىدا «رىسىم لىك-لىك قىلىپ
ئالمىشىۋاتىدۇ» دېدى. سەۋەب: opacity ئۆتۈشى (.22s) ئاجىز WebView دا
ئاستا ھېسابلىنىپ، ئىككى رەسىم ئۇزۇن ئارىلىشىپ تۇرىدۇ.
ھەل: ئۆتۈشنى پۈتۈنلەي ئۆچۈردۇق — رەسىم دەرھال ئالمىشىدۇ. */
transition: none;
-webkit-transition: none;
}
.cs2 { transition: none; -webkit-transition: none; }
.cs2 img {
width: 100%;
height: 100%;
/* 🎯 cover + center: رەسىم رامكىنى پۈتۈنلەي تولدۇرىدۇ،
نىسبەت ماس بولغاچقا ھېچ چېتى قىرقىلمايدۇ. */
object-fit: cover;
object-position: center;
display: block;
}
.cs2 .cs-cap {
position: absolute;
bottom: 0;
right: 0;
left: 0;
padding: 16px 16px 15px;
font-size: 20px;
font-weight: 700;
background: linear-gradient(0deg, rgba(0,0,0,.90), transparent);
text-shadow: 0 3px 12px #000;
line-height: 1.4;
}
.cs2 .cs-sub {
font-size: 13px;
color: #ffd54f;
font-weight: 500;
margin-top: 3px;
}
/* فوكۇس — قايسى يېرىم تاللانغان بولسا شۇ يورۇيدۇ */
.cb-half.focus,
.cb-half:focus-within {
border-color: rgba(255,224,126,.95);
box-shadow: 0 0 0 3px rgba(255,197,49,.32),
0 0 34px rgba(255,197,49,.20);
}
.carousel .dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 7px;
z-index: 9;
}
.carousel .dots i {
width: 22px;
height: 5px;
border-radius: 3px;
background: rgba(255,255,255,.30);
transition: .2s;
}
.carousel .dots i.on { background: var(--yellow); }
/* ============================================================
2026-09-16: كارۇسېلنىڭ ئوڭ تەرىپى — تېلېۋىزىيە قاناللىرى
------------------------------------------------------------
ئىشلەتكۈچى تەلىپى: «ئىككى چوڭ رەسىمنىڭ بىرىنى يۇقتىپ ئورنىغا
تېلېۋىزور ئىكراننى قويايلى». سول تەرەپ رەسىم ئالمىشىپ تۇرىدۇ،
ئوڭ تەرەپتە قاناللار تىزىلىپ، بېسىش بىلەن دەرھال قويۇلىدۇ.
============================================================ */
.lv-half {
padding: 14px 16px;
background: linear-gradient(160deg, #1d2030 0%, #12141c 70%);
display: flex;
flex-direction: column;
}
.lv-head {
font-size: 17px;
font-weight: 700;
color: #ffd54f;
margin-bottom: 10px;
flex: 0 0 auto;
}
.lv-grid {
flex: 1 1 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 8px;
min-height: 0;
}
.lv-item {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
border-radius: 10px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .10);
font-size: 16px;
font-weight: 600;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
transition: .15s;
}
.lv-item.focus {
background: rgba(255, 224, 126, .18);
border-color: var(--yellow, #ffd54f);
box-shadow: 0 0 0 2px rgba(255, 197, 49, .35);
color: #ffe082;
}
.lv-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #ff4d4f; flex: 0 0 auto;
box-shadow: 0 0 8px rgba(255, 77, 79, .8);
}
.lv-nm { overflow: hidden; text-overflow: ellipsis; }
.lv-more {
flex: 0 0 auto;
margin-top: 10px;
text-align: center;
font-size: 15px;
color: var(--dim, #9aa0b0);
border-radius: 9px;
padding: 7px;
border: 1px dashed rgba(255, 255, 255, .16);
}
.lv-more.focus { color: #ffe082; border-color: var(--yellow, #ffd54f); }
/* ئېكران كىچىك بولغاندا ئاستى-ئۈستى تىزىلىدۇ */
@media (max-width: 760px) {
.carousel {
-webkit-flex-direction: column;
flex-direction: column; /* ئېكران كىچىك: ئاستى-ئۈستى */
height: auto;
gap: 8px;
}
/* ⚠ 2026-09-20 (يانفون ئۇيغۇنلاشتۇرۇش — ئېغىر خاتالىق):
.cb-half نىڭ ئاساسىي قائىدىسىدە `flex: 1 1 0` بار. ئۇ يانتۇ (row)
تىزىلىشتا توغرا ئىشلەيدۇ، ئەمما بۇ يەردە ئاستى-ئۈستى (column)
قىلىنغاندا `flex-basis: 0` بولۇپ، ئېگىزلىك 0 غا چۈشۈپ قالىدۇ —
نەتىجىدە كارۇسېل پۈتۈنلەي كۆرۈنمەيدۇ («ئالدى بەتتە رەسىم
چىقمىدى»). `flex: 0 0 auto` قىلىپ ئەسلىگە كەلتۈرىمىز —
ئېگىزلىكنى ::before نىڭ padding-top نىسبىتى بەلگىلەيدۇ. */
.carousel .cb-half {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%;
}
.cb-half { width: 100%; }
/* كىچىك ئېكراندا 16:9 بەك ئۇزۇن بولۇپ كېتىدۇ — 2.2:1 قىلىمىز */
.cb-half::before { padding-top: 45.45%; }
/* ئاستى-ئۈستى تىزىلغاندا dots ئىككى قۇرنى قاپلايدۇ */
.carousel > .dots { grid-area: 1 / 1 / 3 / 2; }
.cs2 .cs-cap { font-size: 16px; padding: 11px 12px 10px; }
.cs2 .cs-sub { font-size: 11.5px; }
}
/* ============================================================
📐 پوستېر ئېگىزلىكى 150% → 135%
------------------------------------------------------------
ئىلگىرى ئېگىزلىك كەڭلىكنىڭ 1.5 ھەسسىسى (2:3) ئىدى — تېلېۋىزور
ئېكرانىدا كارتىلار بەك ئۇزۇنچاق كۆرۈنۈپ، بىر ئېكرانغا ئاز كارتا
سىغاتتى. ھازىر 1.35 ھەسسە — كەڭلىك ئۆزگەرمىدى، پەقەت ئېگىزلىك
10% ئازايدى، شۇڭا رەسىم دىيارى كېسىلمەيدۇ.
*/
.pcard .pwrap{padding-top:143%!important}
.poster .pimg,.poster .poster-ph{padding-top:135%!important}
/* كىچىك ئېكرانلاردا (تىلفون/پلانشېت) يەنىمۇ قىسقا */
@media(max-width:760px){
.pcard .pwrap{padding-top:130%!important}
}
/* ── مىنى لىكو تېلېۋىزور (轮播右侧迷你直播画面) 2026-09-17 ── */
.mini-live{position:relative;flex:0 0 auto;height:42%;min-height:120px;border-radius:12px;overflow:hidden;background:#000;cursor:pointer;border:1px solid rgba(255,255,255,.10)}
.mini-live video{width:100%;height:100%;object-fit:cover;display:block}
.mini-live .ml-top{position:absolute;top:8px;right:8px;left:8px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}
.ml-live{background:#ff4d4f;color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.ml-name{background:rgba(0,0,0,.55);color:#ffe082;font-size:13px;font-weight:700;padding:2px 10px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-mute{position:absolute;bottom:8px;left:8px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.55);color:#fff;font-size:14px;cursor:pointer;line-height:1;padding:0}
.mini-live.focus{border-color:rgba(255,224,126,.95);box-shadow:0 0 0 3px rgba(255,197,49,.32)}
.lv-item.on{border-color:var(--yellow,#ffd54f);color:#ffe082;background:rgba(255,224,126,.12)}
/* مىنى تېلېۋىزور: رامكىنى تولۇق توشۇش (2026-09-17 ئىككىنچى تۈزىتىش) */
.mini-live{flex:1 1 auto;height:auto;min-height:150px;contain:layout paint}
.mini-live video{width:100%;height:100%;object-fit:contain;background:#000;transform:translateZ(0);will-change:transform;contain:layout paint}
/* 2026-09-17: ماۋزۇ ئۆچۈرۈلدى — ئېكران ياندىكى رەسىم بىلەن بىر دەرىجىدە */
.lv-half{padding:0}
.lv-half .mini-live{flex:1 1 auto;height:100%;min-height:0;border-radius:0;border:none}
.lv-half .mini-live video{object-fit:cover}
/* ====================================================================
يانفوننىڭ يانتۇ (تېلېۋىزور شەكلى) ھالىتى
--------------------------------------------------------------------
سەۋەبى: يانفوننى يانتۇ قىلغاندا ئېكران كەڭلىكى 1000px دىن ئاشىدۇ،
ئەمما (pointer:coarse) ئۆلچىمى ئىشلىنىپ موبايل ئۇسلۇبى (كىچىك
كارتۇچكا، 2-3 ئىستۇن) كۈچكە ئېلىنىپ، ئېكراننىڭ يېرىمى بوش قالاتتى.
ھەل: كەڭ + يانتۇ ئېكراندا تېلېۋىزور ئۇسلۇبىنى ئىشلىتىش.
==================================================================== */
/* 2026-09-20: ئېگىزلىك چەكلىمىسى (max-height:560px) ئۆچۈرۈلدى.
سەۋەبى: 1920x1080 (تېلېۋىزور) ۋە 1280x592 دە ئېگىزلىك 560 دىن ئېشىپ،
قائىلە قوزغالماي، قانال تىزىملىكى بىر ئىستۇن بولۇپ ئوڭ تەرەپكە
سىقىلىپ قالاتتى. ھازىر پەقەت «يانپاش + كەڭلىكى 901px دىن چوڭ»
بولسىلا قوزغىلىدۇ. */
@media (orientation:landscape) and (min-width:901px){
:root{--toph:74px}
/* كارتۇچكا تورى — تېلېۋىزوردەك چوڭ ۋە زىچ */
.grid{grid-template-columns:repeat(6,1fr);gap:20px 16px}
/* ⚠ 2026-09-20: كۇنۇپكا 5 → 4 بولغاچقا، `repeat(5,1fr)` دە 4 كۇنۇپكا
ئېكراننىڭ 4/5 ىنىلا ئىگىلەپ، ئوڭ تەرەپتە بوش ئورۇن قالاتتى.
`auto-fit` غا ئۆزگەرتتۇق — كۇنۇپكىلار ئېكران كەڭلىكىگە تەڭ
تارقىلىپ، ھەر قانداق تېلېۋىزور ئۆلچىمىدە مۇنتىزىم كۆرۈنىدۇ. */
.quick{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.qbtn .ic{font-size:30px}
.qbtn .tx{font-size:15px}
.sec{font-size:21px;margin:18px 0 14px}
/* ئۈستۈنكى بالداق — يانتۇ ئېكراندا تېخىمۇ تار */
.top{height:74px;padding:0 20px;gap:12px}
.brand .mark{width:42px;height:42px;font-size:22px}
.brand b{font-size:23px}
/* كارۇسېل ۋە رەسىم ئۆلچەملىرى */
.carousel{height:300px;margin-bottom:18px}
.cs .cs-cap{font-size:21px;padding:20px 22px 30px}
.hcard{flex:0 0 236px}
.hcard img{height:132px}
.hcard .htx{font-size:15px}
/* تەپسىلات بېتى — يانتۇ ئېكراندا يانمۇ-يان */
.detail{flex-direction:row;gap:24px;padding-top:10px}
.poster{width:198px;flex:0 0 198px;margin:0}
.dinfo h1{font-size:30px}
.desc{font-size:16.5px}
/* ئەزالىق / QR بېتى */
.me-wrap{flex-direction:row;gap:26px;align-items:flex-start}
.qr-box{width:270px;height:270px}
.member-card{width:auto}
/* بىۋاسىتە كۆرۈش (live) — قانال تىزىملىكى كۆپ ئىستۇنلۇق
مەسىلە: تىزىملىك بىر ئىستۇن بولغاندا ئۇيغۇرچە RTL تەرتىپدە ئوڭ
تەرەپكە سىقىلىپ، سول تەرەپ بوش قالاتتى. */
.live-wrap{flex-direction:column;height:auto;gap:16px}
/* 2026-09-20: چوڭ ئېكراندا كارتۇچكىلارنى ئېكران كەڭلىكىگە قاراپ
ئۇزۇرتۇپ، ئېكران تولۇق تولدۇرۇلىدۇ (ئاستىدا قارا بوشلۇق قالمايدۇ). */
.live-list{width:100%;flex:0 0 auto;max-height:none;
display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:14px;overflow:visible;align-content:start}
.live-item{min-height:64px;display:flex;align-items:center}
.live-item{font-size:17px;padding:14px 16px}
.live-stage{height:auto;aspect-ratio:16/9}
/* قويغۇچ — يانتۇ ئېكراندا تولۇق ئېگىزلىك */
.player,.pl-wrap{height:100vh}
/* ئۇچۇر كۆزنەكلىرى */
.modal-box{width:min(720px,86vw)}
.kb{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
.plan-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.way-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
/* ناھايىتى تار يانتۇ ئېكران (كىچىك يانفون يانتۇ) */
@media (orientation:landscape) and (max-height:420px) and (max-width:900px){
:root{--toph:64px}
.grid{grid-template-columns:repeat(6,1fr);gap:16px 14px}
.carousel{height:250px}
.live-stage{height:auto;aspect-ratio:16/9}
.live-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
}
/* ====================================================================
2026-09-20 (ئىشلەتكۈچى تەلىپى) — يانفوندا «پەقەت سىن» ھالىتى
--------------------------------------------------------------------
ئىشلەتكۈچى: «قويۇش بىتى ئېچىلغاندا يانفۇندا ئىكران كىچىك بولغاچقا
ئۈستى قوشۇلۇپ چىقسا بىرنەرسە ئېنىق كۆرۈنمەيدىكەن، شۇڭا يانفۇندا
قويۇش بىتى ئېچىلغاندا قويۇش ئىتىدىن باشقا نەرسە چىقمىسۇن».
ھەل: يانفون (pointer:coarse) ئۆلچىمىدە ئوڭ ئۇچۇر تاختىسى (.pl-info:
ماۋزۇ، قىسىم، باھا، چۈشەندۈرۈش) پۈتۈنلەي يوشۇرۇلىدۇ، سىن مەيدانى
پۈتۈن ئېكراننى ئالىدۇ. كونترول بالدىقى (⏸ ⏪ ⏩ ⛶ …) ساقلىنىدۇ —
ئۇ سىن ئۈستىدە لەيلەپ تۇرىدۇ ھەم 4.5 سېكۇنتتىن كېيىن ئۆزلۈكىدىن
يوشۇرۇنىدۇ (ئېكرانغا بېسىلسا قايتا چىقىدۇ).
تېلېۋىزور / كومپيۇتېر (pointer:fine) دا ئۆزگىرىش بولمايدۇ. */
/* ====================================================================
📐 2026-09-20 كەچ (يېڭى ئەرز): «يانفۇندا فىلىم قويغاندا ئاستى-ئۈستىگە
سۈرۈلۈۋاتىدۇ. ئۈستىگە چىقساق ئوڭ تەرەپتىكى ‹ئۇپۇق كىنوخانىسى› بەلگە
يوقىلىۋاتىدۇ، ئاستىغا سىيرىلساق فىلىمنىڭ بىر قىسمى يوشۇرۇن قالىدۇ».
--------------------------------------------------------------------
سەۋەب: سىن مەيدانىنىڭ ئېگىزلىكى ئېكران ئېگىزلىكىدىن ئېشىپ كەتكەن
(سىن ھەقىقىي نىسبىتى بويىچە يېيىلغاندا)، شۇڭا بەت ياكى ئۇنىڭ ئىچكى
قىسمى ئاستى-ئۈستىگە سۈرۈلۈشكە يول قويغان.
✅ ھەل: قويۇش بېتى ئېچىلغاندا (`body.watch-open`) پۈتۈن قاتلام
(player → pl-stage → video) ئېكراننىڭ ھەقىقىي ئېگىزلىكىگە (100dvh)
قاتتىق بېكىتىلىدۇ، ھەر قانداق سۈرۈلۈش (overflow / scroll) چەكلىنىدۇ.
سىننىڭ ئۆزى `contain` ياكى `cover` بولۇپ مەيدان ئىچىدە تۇرىدۇ —
مەيدان ھەر قاچان ئېكران بىلەن تەڭ بولغاچقا، سۈرۈلۈش پەيدا بولمايدۇ.
==================================================================== */
body.watch-open{
overflow:hidden!important;
height:100vh!important;
height:100dvh!important;
position:fixed!important;
top:0!important;left:0!important;right:0!important;bottom:0!important;
width:100%!important;
}
@supports (height:100dvh){
body.watch-open{height:100dvh!important}
}
body.watch-open #player.player,
body.watch-open #player.player.live{
position:fixed!important;
top:0!important;left:0!important;right:0!important;
bottom:0!important;
width:100%!important;
height:100vh!important;
height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
padding:0!important;
gap:0!important;
overflow:hidden!important;
display:block!important;
z-index:60!important;
}
body.watch-open .pl-stage{
position:absolute!important;
top:0!important;left:0!important;
width:100%!important;
height:100%!important;
max-height:100%!important;
margin:0!important;padding:0!important;
border:0!important;border-radius:0!important;
overflow:hidden!important;
background:#000!important;
}
body.watch-open .pl-stage>video{
position:absolute!important;
top:0!important;left:0!important;
width:100%!important;
height:100%!important;
max-height:100%!important;
margin:0!important;
background:#000;
/* object-fit نى JS بەلگىلەيدۇ (contain ياكى cover) */
}
/* قويۇش بېتى ئېچىلغاندا ئاساسىي بەت قاتلىمى پۈتۈنلەي يوشۇرۇلىدۇ —
ئۇنىڭ ئېگىزلىكى سۈرۈلۈش پەيدا قىلمايدۇ. */
body.watch-open main,
body.watch-open .view{
overflow:hidden!important;
max-height:100vh!important;
max-height:100dvh!important;
}
/* يانفوندا ھەر قانداق سۈرۈلۈشنى پۈتۈنلەي چەكلەش */
@media (pointer:coarse){
body.watch-open,
body.watch-open #player,
body.watch-open .pl-stage,
body.watch-open .pl-stage>video{
overflow:hidden!important;
overscroll-behavior:none!important;
touch-action:none;
}
/* كونترول بالدىقى بىلەن ئۆلچەم بالدىقىغا تېگىش رۇخسەت */
body.watch-open .pl-bottom,
body.watch-open .pl-seek,
body.watch-open .pl-center,
body.watch-open .pl-btn{touch-action:auto}
}
@media (pointer:coarse){
/* يانفوندا سىن پۈتۈن ئېكراننى ئالىدۇ ھەم مەركەزدە توختايدۇ
(تىك ھالەتتە 16:9 سىن ئۈستىگە يىغىلىپ قالماسلىقى ئۈچۈن). */
.player{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
gap:0;padding:0}
.pl-stage{grid-column:1;grid-row:1;border:0;border-radius:0;
width:100%;height:100%}
.pl-info{display:none!important}
/* ⚠ 2026-09-20: قويۇش بېتى ئېچىلغاندا ئۈستۈنكى بالداق (خەۋەر / تۈر
كۇنۇپكىلىرى) ۋە باشقا ھەر قانداق ئېلېمېنت يوشۇرۇلىدۇ — پەقەت سىن
قالىدۇ. بولمىسا يانفوننىڭ كىچىك ئېكرانىدا ئۈستى-ئاستى قوشۇلۇپ
سىن ئېنىق كۆرۈنمەيدۇ (ئىشلەتكۈچى ئەرزى). */
body.watch-open .top{display:none!important}
body.watch-open .player{top:0!important}
body.watch-open .backbar{display:none!important}
.pl-bottom{padding:14px 16px;gap:10px}
.pl-bottom .pl-btn{min-width:52px;font-size:17px;padding:9px 15px}
.wm{top:10px;right:12px;font-size:18px}
.wm .wm-sp{font-size:11px}
}
/* يانفوننىڭ يانپاش ھالىتىدە ئاستى كونترول نەپىس ئۇزۇن بولسۇن */
@media (pointer:coarse) and (orientation:landscape){
.pl-bottom{padding:10px 18px 12px}
.pl-btn{font-size:16px;padding:8px 14px;border-radius:20px}
}
/* ====================================================================
📐 سىن ئېكرانغا ئاپتوماتىك ماسلىشىش — ئىشلەتكۈچى تەلىپى (2026-09-20)
--------------------------------------------------------------------
ئىشلەتكۈچى (ئۈچ قېتىم ئەرز قىلدى):
«يانفۇندا فىلىم قويغاندا ئىكراننىڭ چوڭ كىچىكلىكىگە ئاپتۇماتىك
تەڭشەلسۇن» / «فىلىم قويغاندا ئىكراننىڭ چوڭ كىچىكلىكى شۇ ئۈسكۈنىگە
ئاپتۇماتىك تەڭشەلمىگەن» / «يەنە بىنورمال ... ئاپتۇماتىك ماسلاشمىغان».
⚠ ئەڭ ئاخىرقى ئەرزنىڭ ھەقىقىي سەۋەبى (2026-09-20 كەچ):
ئەپ `android:screenOrientation="landscape"` بىلەن قۇلۇپلانغان ئىدى.
ئىشلەتكۈچى تېلېفوننى تىك تۇتۇپ قويسا، Android سىستېمىسى پۈتۈن
كۆزنەكنى (WebView بىلەن) 90° ئايلاندۇرۇپ قوياتتى — شۇڭا سىنمۇ،
خەتمۇ، كونترول كۇنۇپكىلىرىمۇ يانتۇ كۆرۈنەتتى. بۇ `object-fit`
مەسىلىسى ئەمەس ئىدى — CSS بىلەن ھەل قىلغىلى بولمايدۇ.
✅ ھەل (ئەپ تەرەپتە):
1. `screenOrientation="landscape"` → `"sensor"` قىلىندى. ئەمدى
تېلېفون قانداق تۇتۇلسا ئەپ شۇ يۆنىلىشتە ئۆزىنى ئۆلچەملەيدۇ.
2. `MainActivity.onConfigurationChanged()` قوشۇلدى — يۆنىلىش
ئۆزگەرگەندە WebView غا JS ئارقىلىق خەۋەر بېرىپ، سىن ئۆلچىمى
قايتا ھېسابلىنىدۇ (`window.__upukRefit()`).
⚠ نېمە ئۈچۈن CSS نىڭ `(orientation:landscape)` ئۆلچىمى ئىشلىمەيدۇ:
ئۇ ئۈسكۈنىنىڭ ھەقىقىي يۆنىلىشىنى ئەمەس، كۆزنەك نىسبىتىنى
بىلدۈرىدۇ. شۇڭا قارار پەقەت JavaScript دىن كېلىدۇ
(`window.__upukFitVideo`، app.js ئىچىدە). ئۇ سىننىڭ ھەقىقىي
نىسبىتى (`videoWidth/videoHeight`) بىلەن ئېكران نىسبىتىنى
سېلىشتۇرۇپ ئەڭ ياخشى كۆرۈنۈشنى تاللايدۇ:
• تىك ئېكران → cover (ئېكراننى تولۇق تولدۇرسۇن)
• كەڭ ئېكران + كەڭ سىن → cover
• كەڭ ئېكران + تار سىن → contain
• قىرقىلىش 45% دىن ئاشسا → contain (رەھىمسىز قىرقىلىشتىن ساقلىنىش)
تېلېۋىزور / كومپيۇتېردا (pointer:fine) ئۆزگىرىش يوق — contain قالىدۇ.
⚠ CSS دا `!important` ئىشلىتىلمەيدۇ — بولمىسا JS نىڭ inline
بېكىتىشىنى يېڭەلەپ، ئاپتوماتىك ماسلىشىش ئىشلىمەيدۇ.
==================================================================== */
/* سىن مەيدانىنىڭ ئۆلچىمى — ھەر قانداق ئېكراندا پۈتۈن بوشلۇق */
.pl-stage>video,
.live-stage video,
.mini-live video{
width:100%;
height:100%;
object-position:center;
}
/* JS `data-fit` بەلگىلىگەن قىممەت ئاساس بولىدۇ (affinity ئۈچۈن ئاستىدا). */
@media (pointer:coarse){
/* ⚠ 2026-09-20 (ئىشلەتكۈچى تەلىپى): «مەيلى قانداقلا نەرسىگە قاچلانسا
چوڭ ئىكران تولۇق ماسلىشىشى، ئۇياق بۇياققا سۈرۈلمەسلىكى كېرەك».
ھەل: يانفوندا قويۇش بېتى ئېچىلغاندا `.player` نىڭ پۈتۈن بوشلۇقى
(padding/gap) ئۆچۈرۈلۈپ، سىن مەيدانى ئېكراننىڭ پۈتۈن يۈزىنى
ئالىدۇ — ھېچقانداق گىرۋەك، ھېچقانداق بوشلۇق قالمايدۇ. */
.player{
grid-template-columns:minmax(0,1fr);
grid-template-rows:minmax(0,1fr);
gap:0!important;padding:0!important;
top:0!important;left:0!important;right:0!important;bottom:0!important
}
.pl-stage{
grid-column:1;grid-row:1;
width:100%;height:100%;
border:0!important;border-radius:0!important;
overflow:hidden
}
.pl-stage>video{
object-position:center;
width:100%;height:100%
}
.live-stage video,
.mini-live video{object-position:center;width:100%;height:100%}
/* قويۇش بېتى ئېچىلغاندا يانفوندا ھېچقانداق قوشۇمچە ئېلېمېنت قالمايدۇ */
body.watch-open{overflow:hidden!important}
body.watch-open .top{display:none!important}
body.watch-open .backbar{display:none!important}
}
/* ⚠ 2026-09-20 كەچ: يانفوننىڭ تىك ھالىتى. ئەپ ئەمدى `sensor` بولغاچقا
كۆزنەك ھەقىقەتەن تىك بولىدۇ. ⚠ `object-fit` بۇ يەردە بەلگىلەنمەيدۇ —
ئۇنى پەقەت app.js نىڭ `__upukFitVideo()` ى سىن ۋە ئېكران نىسبىتىگە
قاراپ تاللايدۇ (contain ياكى cover). بولمىسا تىك ئېكراندا 16:9 سىن
Cover بولۇپ «ئېگىزلىكى چوڭ بولۇپ» كېتىدۇ (ئىشلەتكۈچى ئەرزى). */
@media (pointer:coarse) and (orientation:portrait){
#player.player,#player.player.live{
height:100%!important;width:100%!important;
top:0!important;left:0!important;right:0!important;bottom:0!important
}
.pl-stage{width:100%!important;height:100%!important;border:0!important;border-radius:0!important}
/* object-fit نى JS بەلگىلەيدۇ — بۇ يەردە پەقەت رازمېر ۋە مەركەزلەش */
.pl-stage>video{width:100%!important;height:100%!important;object-position:center;background:#000}
/* تىك ھالەتتە كونترول بالدىقى ئاستىدا، تولۇق كۆرۈنسۇن */
.pl-bottom{padding:12px 14px;gap:8px}
.pl-bottom .pl-btn{min-width:48px;font-size:16px;padding:8px 13px}
.wm{top:8px;right:10px;font-size:16px}
}
/* يانپاش ھالەتتە ئاستى كونترول نەپىس ئۇزۇن بولسۇن */
@media (pointer:coarse) and (orientation:landscape){
.pl-bottom{padding:10px 18px 12px}
.pl-btn{font-size:16px;padding:8px 14px;border-radius:20px}
/* ⚠ يانپاش ھالەتتىمۇ سىن پۈتۈن ئېكراننى ئالىدۇ — بوشلۇق قالمايدۇ */
.pl-stage{border:0!important;border-radius:0!important}
}
/* ⚠ زاپاس يول: ئەگەر `(pointer:coarse)` ئۆلچىمى بەزى ئەسكى WebView دا
ئىشلىمىسە (ئىلگىرى سىناقتا بايقالغان ئەھۋال), «UpukTV» User-Agent
بىلەن كىرگەن ھەر قانداق ئۈسكۈنىدە شۇنداقلا ماسلاشتۇرىمىز. */
@media (max-width:900px){
.pl-stage>video,
.live-stage video,
.mini-live video{width:100%;height:100%;object-position:center}
.player{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
gap:0!important;padding:0!important;top:0!important}
.pl-stage{grid-column:1;grid-row:1;border:0;border-radius:0;width:100%;height:100%}
}
/* ============================================================
🎛 2026-09-21: ئىلگىرىلەش بالدىقى + تەڭشەك كونۇپكىلىرى
(ئىشلەتكۈچى ئەرزى: «باشقا ئەپتىكىدەك قويغۇچ بالدىقى قوشۇڭ»)
============================================================ */
.psb-row{
width:100%;display:flex;align-items:center;gap:12px;
padding:0 10px 4px;direction:ltr; /* بالداق سولدىن ئوڭغا (سىن ئۆلچىمى) */
}
.psb-time{
color:#e8ebf2;font-size:16px;min-width:48px;text-align:center;
font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.8);
flex:0 0 auto;
}
.psb-track{
position:relative;flex:1 1 auto;height:28px;cursor:pointer;
display:flex;align-items:center;border-radius:14px;transition:.12s;
}
.psb-track::before{
content:'';position:absolute;left:8px;right:8px;height:6px;
background:rgba(255,255,255,.28);border-radius:3px;
}
.psb-fill{
position:absolute;left:8px;top:50%;transform:translateY(-50%);
height:6px;width:0%;background:var(--yellow,#ffd75e);
border-radius:3px;pointer-events:none;
}
.psb-knob{
position:absolute;left:8px;top:50%;transform:translate(-50%,-50%);
width:16px;height:16px;margin-left:0;background:#fff;border-radius:50%;
box-shadow:0 0 8px rgba(0,0,0,.65);pointer-events:none;
}
.psb-track.focus{
background:rgba(255,215,94,.18);
outline:3px solid rgba(255,224,126,.95);outline-offset:2px;
}
/* بىۋاستە كۆرسىتىش ھالىتى: بالداق قىزىل، سەكرەتكىلى بولمايدۇ */
.psb-row.live .psb-fill{background:#ff5a5a}
.psb-row.live .psb-track{opacity:.75}
.pl-bottom .pl-btn.hidden{display:none}
/* ================= ▶️ قىسىم تاللاش تاختىسى (2026-09-21) =================
ئىشلەتكۈچى ئەرزى: «قىسىمنى باسقاندا بىرلا قىسىم ئەمەس پۈتۈن قىسىملىرى
ئېكرانغا چىقىشى كېرەك — قايسىنى كۆرمەكچى بولسا تاللاپلا باسسا كۆرەلىشى كېرەك».
قويغۇچ ئۈستىگە چىقىدىغان تولۇق ئېكرانلىق تاختا — بارلىق قىسىم تور ھالەتتە،
ماوس بىلەن چەكسىمۇ، تىزگىنەك بىلەنمۇ تاللىغىلى بولىدۇ. */
#epsPanel{
position:absolute;top:0;left:0;right:0;bottom:0;z-index:50;
background:rgba(6,8,18,.88);backdrop-filter:blur(6px);
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:34px 44px;cursor:default;
}
#epsPanel.hidden{display:none}
.eps-head{
display:flex;align-items:center;justify-content:space-between;
width:100%;max-width:1020px;margin-bottom:16px;flex:0 0 auto;
}
.eps-head span{font-size:28px;font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7)}
#epsGrid{
width:100%;max-width:1020px;max-height:66vh;overflow-y:auto;
display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
gap:12px;margin:0;padding:8px 10px 28px;justify-items:stretch;
}
/* ئىچكى سىيرىلما تىزىملىك — focus سىيرىش ھېسابىغا زاپاس بوشلۇق */
#epsGrid::after{content:'';display:block;height:6px}
#epsGrid .ep{
width:100%;text-align:center;box-sizing:border-box;cursor:pointer;
min-width:0;padding:13px 10px;font-size:18px;
}
/* ================= 🔎 ئىزدەش — نەتىجە چىققاندا كۇنۇپكا تاختىسىنى يوشۇرۇش (2026-09-21) =================
ئىشلەتكۈچى ئەرزى: «ئىزدەشتە Monster بوغاندىكىن كىنو يۇقاپ كېتىۋاتىدۇ».
تۈزىتىش: ئىزدەشتە نەتىجە چىقسا كۇنۇپكا تاختىسى (.kb) يوشۇرۇلىدۇ —
نەتىجە دەرھال كۆرۈنىدۇ ھەم خاتا چېكىشتىن ساقلىنىدۇ. رامكىنى باسسىڭىز
تاختا قايتا چىقىدۇ. */
#view-search.search-done .kb,
#view-search.search-done .kb-sm { display: none; }
#view-search.search-done .searchbar { margin-bottom: 0; }
/* ====================================================================
♻️ ئەسلىگە قايتۇرۇلغان بۆلەكلەر (style.css.bak_pbar_20260921_140231 دىن ئېلىندى)
------------------------------------------------------------
سەۋەب: 2026-09-21 كۈنى style.css قايتا يېزىلغاندا تۆۋەندىكى
قائىدىلەر ئۆچۈپ كەتكەن ئىدى — يوقلىما (يوقلىما كارتىسى،
7 كۈنلۈك كالېندار، تەڭگە، دەرىجە)، ساقلاش كۇنۇپكىسى،
باھا رايونى، «كۆرگەنلىرىم» ئورنى ۋە تەۋسىيە قۇرى.
==================================================================== */
/* 🎯 «سىزگە تەۋسىيە» قاتارى (2026-09-21) — ئاساسىي تىزىملىكتىن كىچىكرەك
ۋە بىر قۇرغا كۆپرەك سىغىدۇ، شۇڭا ئاساسىي مەزمۇن يەنىلا ئالدىنقى
ئورۇندا تۇرىدۇ. */
.grid-rec{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px 12px;padding:0 0 18px}
.grid-rec .pcard{border-radius:12px}
.grid-rec .ptx{font-size:13px}
.grid-rec .fav-btn, .grid-rec .lat-btn{width:30px;height:30px;font-size:16px}
.grid-rec .fav-btn{bottom:6px;right:6px}
.grid-rec .lat-btn{bottom:6px;left:6px;font-size:15px}
@media (min-width:901px){
.grid-rec{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.grid-rec .fav-btn, .grid-rec .lat-btn{width:38px;height:38px;font-size:20px}
}
/* ====================================================================
⭐ كارتىدىكى تېز ساقلاش كۇنۇپكىسى (2026-09-21 يېڭىدىن قوشۇلدى)
--------------------------------------------------------------------
ئىشلەتكۈچى: «كىنونى ئاچماي تۇرۇپلا ساقلىۋالاي» — شۇڭا ھەر بىر كارتا
ۋە كەڭ كارتا (يېقىنقى كۆرگەنلەر) نىڭ ئۈستى ئوڭ بۇرجىكىدە ☆/★ بار.
⚠ بەلگە (badge) نىڭ ئورنى ئوڭ تەرەپتە بولغاچقا، ★ نى سول ئۈستىگە
قويدۇق — ئۇلار بىر-بىرىنى بېسىپ قالمايدۇ (RTL بەتتە «سول» = ئاخىرقى
تەرەپ، شۇڭا ئېكراننىڭ ئوڭ بۇرجىكىدە كۆرۈنىدۇ).
==================================================================== */
.fav-btn{
position:absolute;bottom:8px;right:8px;z-index:6;
width:38px;height:38px;display:grid;place-items:center;
font-size:21px;line-height:1;color:#fff;cursor:pointer;
background:rgba(0,0,0,.55);border:1.5px solid rgba(255,255,255,.22);
border-radius:50%;padding:0;
transition:transform .12s,background .12s,border-color .12s,color .12s;
backdrop-filter:blur(3px)
}
.fav-btn:hover{background:rgba(0,0,0,.75);transform:scale(1.08)}
.fav-btn.on{color:#ffd54f;border-color:rgba(255,213,79,.7);background:rgba(60,45,0,.75)}
.fav-btn:active{transform:scale(.94)}
/* تېلېۋىزور/چوڭ ئېكراندا چوڭراق قىلىمىز — يىراقتىن تىزگىنەك بىلەن
تاللاش ئۈچۈن (900px دىن كەڭ ئېكران = تېلېۋىزور ياكى كومپيۇتېر) */
@media (min-width:901px){
.fav-btn{width:46px;height:46px;font-size:26px;bottom:10px;right:10px}
.hcard .fav-btn{top:10px;right:10px}
}
.fav-btn.focus{outline:3px solid var(--focus);outline-offset:2px}
/* كەڭ كارتا (hcard) دە ئاستى ئوڭ بۇرجەككە قويىمىز */
.hcard{position:relative}
.hcard .fav-btn{top:8px;bottom:auto;right:8px}
/* ====================================================================
🕒 «كېيىن كۆرىمەن» كۇنۇپكىسى (2026-09-21)
------------------------------------------------------------
⭐ ساقلاش كۇنۇپكىسى (ئوڭ ئاستى) بىلەن بىر-بىرىنى بېسىپ قالماستىن،
مۇشۇ كۇنۇپكا سول ئاستى بۇرجەككە قويۇلىدۇ. ئىككىسى ئايرىم رەڭدە:
★ = ئالتۇن (ساقلانما) 🕒 = كۆك (كېيىن كۆرىمەن)
==================================================================== */
.lat-btn{
position:absolute;bottom:8px;left:8px;z-index:6;
width:38px;height:38px;display:grid;place-items:center;
font-size:19px;line-height:1;color:#fff;cursor:pointer;
background:rgba(0,0,0,.55);border:1.5px solid rgba(255,255,255,.22);
border-radius:50%;padding:0;
transition:transform .12s,background .12s,border-color .12s,color .12s;
backdrop-filter:blur(3px)
}
.lat-btn:hover{background:rgba(0,0,0,.75);transform:scale(1.08)}
.lat-btn.on{color:#7fd4ff;border-color:rgba(127,212,255,.75);background:rgba(0,45,60,.78)}
.lat-btn:active{transform:scale(.94)}
.lat-btn.focus{outline:3px solid var(--focus);outline-offset:2px}
@media (min-width:901px){
.lat-btn{width:46px;height:46px;font-size:23px;bottom:10px;left:10px}
}
.hcard .lat-btn{top:8px;bottom:auto;left:8px}
/* «ساقلانمىلىرىم» بېتىدىكى ئىككى بۆلەكنىڭ ئارىلىقى ۋە
«تازىلاش» كۇنۇپكىسىنىڭ بېسىلىش رايونى (يانفوندا بارماق ئۈچۈن
كەڭرەك قىلىمىز — ئىشلەتكۈچى «كىچىك، بېسىۋېلىش قىيىن» دېگەن) */
#view-fav .sec .more.clamp{padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.07)}
#view-fav .grid{margin-bottom:6px}
#view-fav .empty-tip{margin:4px 0 18px}
/* ⭐ «ساقلانمىلىرىم» بېتىدىكى بوش ھالەت ئەسكەرتىشى */
.empty-tip{
padding:56px 24px;text-align:center;color:var(--yellow,#ffd54f);
font-size:19px;font-weight:700;line-height:2;
}
.empty-tip::before{content:'⭐';display:block;font-size:52px;opacity:.35;margin-bottom:14px}
/* ====================================================================
📅 يوقلىما بېتى — تەڭگە كارتىسى ۋە كالېندار (2026-09-21)
------------------------------------------------------------
ئىشلەتكۈچى: «كۈندىلىك يوقلىما قىلىش ئارقىلىق تەڭگە تولۇقلاپ، تەڭگىنى
VIP غا ئايلاندۇرۇش ئىقتىدارى».
رەڭ ئۇسلۇبى: ئالتۇن (تەڭگە) + كۆك (VIP) — قارا ئارقا كۆرۈنۈشتە ئېنىق.
==================================================================== */
.coin-card{
margin:4px 0 22px;padding:18px 16px;border-radius:16px;
background:linear-gradient(150deg,#1d1a10,#15151d 60%);
border:1.5px solid rgba(255,213,79,.28);
box-shadow:0 4px 18px rgba(0,0,0,.35)
}
/* ---- 🪙 چوڭ بالانس قۇتىسى (ئىشلەتكۈچى: «يوقلىمغا مۇناسىۋەتلىك
ھېچنىمە يوقكەن» — بالانس بەك كىچىك كۆرۈنۈپ، بەت بوش ھېس قىلىناتتى).
ھازىر بالانس ئايرىم چوڭ قۇتىدا، سانى 54px — يىراقتىن كۆرۈنىدۇ. ---- */
.coin-hero{
display:flex;align-items:center;gap:18px;background:rgba(255,213,79,.07);
border:1.5px solid rgba(255,213,79,.25);border-radius:14px;
padding:14px 18px;margin-bottom:12px
}
.coin-hero .ch-ic{font-size:46px;line-height:1}
.coin-hero .ch-mid{flex:1;min-width:0}
.coin-hero .ch-lb{font-size:14px;color:#b9a878;margin-bottom:2px}
.coin-hero .ch-num{font-size:54px;font-weight:800;color:#ffd54f;line-height:1.05;
letter-spacing:1px;text-shadow:0 2px 12px rgba(255,213,79,.30)}
.coin-hero .ch-sub{font-size:13px;color:#8d95a3;margin-top:2px}
.coin-top{display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:10px;margin-bottom:14px}
.coin-bal{display:flex;align-items:baseline;gap:6px}
.coin-bal .cb-i{font-size:30px}
.coin-bal b{font-size:36px;color:#ffd54f;font-weight:800;letter-spacing:.5px}
.coin-bal .cb-t{font-size:15px;color:var(--dim,#9aa4b2)}
.coin-st{font-size:15px;color:#9aa4b2;background:rgba(255,255,255,.06);
padding:6px 12px;border-radius:999px}
.coin-st b{color:#ffb74d}
.coin-st .fire{font-size:17px}
/* ---- 🏅 دەرىجە بالداق ---- */
.lv-wrap{display:flex;align-items:center;gap:12px;background:rgba(127,212,255,.06);
border:1.5px solid rgba(127,212,255,.20);border-radius:12px;
padding:11px 14px;margin-bottom:12px}
.lv-wrap .lv-ic{font-size:32px;line-height:1}
.lv-wrap .lv-mid{flex:1;min-width:0}
.lv-wrap .lv-nm{font-size:16px;font-weight:800;color:#dbe9f5;margin-bottom:6px}
.lv-wrap .lv-nm small{font-weight:400;color:#8d95a3;font-size:12px;margin-right:6px}
.lv-bar{height:9px;border-radius:6px;background:rgba(255,255,255,.10);overflow:hidden}
.lv-bar i{display:block;height:100%;border-radius:6px;
background:linear-gradient(90deg,#7fd4ff,#4caf50);transition:width .35s}
.lv-wrap .lv-tip{font-size:12px;color:#8d95a3;margin-top:5px}
.lv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.lv-stat{background:rgba(255,255,255,.04);border-radius:10px;padding:9px 4px;
text-align:center}
.lv-stat b{display:block;font-size:20px;color:#ffd54f;font-weight:800}
.lv-stat span{font-size:12px;color:#8d95a3}
/* ---- ئاستى تەبەق (يوقلىما / VIP / ئەسكەرتىش) ---- */
.ck-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 14px}
.ck-tab{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
padding:10px 4px;border-radius:12px;font-family:inherit;font-size:13px;
background:rgba(255,255,255,.05);border:1.5px solid transparent;color:#a8b4c2;
transition:.15s}
.ck-tab .ic{font-size:22px;line-height:1}
.ck-tab.on{background:rgba(255,213,79,.16);border-color:rgba(255,213,79,.5);color:#ffd54f;
font-weight:700}
.ck-tab.focus{outline:3px solid var(--focus,#ffc107);outline-offset:2px}
/* ---- 🎯 ھەپتىلىك ۋەزىپىلەر ---- */
.ms-wrap{background:rgba(255,255,255,.035);border-radius:12px;padding:12px 14px;
margin-bottom:14px}
.ms-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ms-hd .ms-t{font-size:15px;font-weight:700;color:#cfd6e0}
.ms-hd .ms-c{font-size:13px;color:#8d95a3}
.ms-row{display:flex;align-items:center;gap:11px;padding:9px 0;
border-top:1px solid rgba(255,255,255,.06)}
.ms-row:first-of-type{border-top:0}
.ms-row .ms-ic{font-size:24px;flex:0 0 30px;text-align:center}
.ms-row .ms-mid{flex:1;min-width:0}
.ms-row .ms-nm{font-size:14px;color:#cfd6e0;margin-bottom:5px}
.ms-row .ms-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.10);overflow:hidden}
.ms-row .ms-bar i{display:block;height:100%;border-radius:5px;
background:linear-gradient(90deg,#ffb74d,#ffd54f)}
.ms-row .ms-n{font-size:12px;color:#8d95a3;margin-top:4px}
.ms-btn{flex:0 0 auto;font-size:13px;padding:8px 13px;border-radius:9px;cursor:pointer;
font-family:inherit;font-weight:700;color:#1a1500;background:var(--yellow);
border:0;transition:.14s;white-space:nowrap}
.ms-btn:active{transform:scale(.95)}
.ms-btn.done{background:rgba(76,175,80,.20);color:#a5d6a7;border:1.5px solid rgba(76,175,80,.4);
cursor:default}
.ms-btn.off{background:rgba(255,255,255,.07);color:#6f7784;cursor:default}
.ms-btn.focus{outline:3px solid var(--focus,#ffc107);outline-offset:2px}
/* ---- 🔔 ئەسكەرتىش ---- */
.nt-wrap{background:rgba(127,212,255,.05);border:1.5px solid rgba(127,212,255,.18);
border-radius:12px;padding:12px 14px;margin-bottom:14px}
.nt-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;
flex-wrap:wrap;margin-bottom:8px}
.nt-hd .nt-t{font-size:15px;font-weight:700;color:#cfd6e0}
.nt-sw{display:flex;align-items:center;gap:8px;font-size:13px;color:#a8b4c2;
background:rgba(255,255,255,.06);padding:7px 13px;border-radius:999px;cursor:pointer;
border:0;font-family:inherit}
.nt-sw.on{background:rgba(76,175,80,.18);color:#a5d6a7}
.nt-sw.focus{outline:3px solid var(--focus,#ffc107);outline-offset:2px}
.nt-row{display:flex;align-items:center;gap:11px;padding:9px 0;
border-top:1px solid rgba(255,255,255,.06)}
.nt-row .nt-ic{font-size:22px;flex:0 0 28px;text-align:center}
.nt-row .nt-mid{flex:1;min-width:0}
.nt-row .nt-nm{font-size:14px;color:#dbe9f5;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.nt-row .nt-tx{font-size:12px;color:#8d95a3;margin-top:3px}
.nt-go{flex:0 0 auto;font-size:13px;padding:7px 13px;border-radius:9px;cursor:pointer;
font-family:inherit;color:#7fd4ff;background:rgba(127,212,255,.12);
border:1.5px solid rgba(127,212,255,.35)}
.nt-go:active{transform:scale(.95)}
.nt-go.focus{outline:3px solid var(--focus,#ffc107);outline-offset:2px}
.nt-empty{font-size:13px;color:#8d95a3;line-height:2;padding:4px 2px}
/* ---- 🔔 ئۈستى بالداقتىكى قىزىل نۇقتا ---- */
.dot{position:absolute;top:2px;left:8px;min-width:17px;height:17px;line-height:17px;
border-radius:9px;background:#f44336;color:#fff;font-size:11px;font-weight:800;
text-align:center;padding:0 4px;direction:ltr}
/* ---- 7 كۈنلۈك كالېندار ---- */
.ck-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:12px}
.ck-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:9px 2px 7px;border-radius:11px;background:rgba(255,255,255,.055);
border:1.5px solid rgba(255,255,255,.07);transition:.15s}
.ck-cell .ck-d{font-size:12px;color:#8d95a3}
.ck-cell .ck-i{font-size:21px;line-height:1;opacity:.42}
.ck-cell .ck-n{font-size:10px;color:#7f8894;line-height:1}
.ck-cell.on{background:rgba(255,213,79,.14);border-color:rgba(255,213,79,.5)}
.ck-cell.on .ck-i{opacity:1}
.ck-cell.on .ck-n{color:#ffd54f}
.ck-cell.today{border-color:rgba(127,212,255,.7);box-shadow:0 0 0 2px rgba(127,212,255,.16)}
.ck-cell.today .ck-d{color:#7fd4ff;font-weight:700}
/* بۈگۈن يوقلىما قىلىنمىسا — قىزغىن چاقىرىق (پولس) */
.ck-cell.today:not(.on) .ck-i{animation:ckPulse 1.6s ease-in-out infinite;opacity:.95}
@keyframes ckPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
/* ---- 7 كۈن بويى داۋاملىشىش بالداق ---- */
.ck-sum{display:flex;justify-content:space-between;align-items:center;gap:10px;
font-size:13px;color:#9aa4b2;background:rgba(0,0,0,.20);border-radius:10px;
padding:9px 13px;margin-bottom:12px;flex-wrap:wrap}
.ck-sum b{color:#ffd54f}
.ck-sum .ck-streak{font-size:14px;color:#ffb74d;font-weight:700}
.ck-sum .ck-next{color:#7fd4ff}
/* ---- «يوقلىما قىلىش» كۇنۇپكىسى ---- */
.ck-go{width:100%;margin-bottom:16px}
.ck-go.done{background:rgba(76,175,80,.18);color:#a5d6a7;border-color:rgba(76,175,80,.4);
cursor:default}
.ck-go.done:active{transform:none}
/* ---- قائىدە تىزىملىكى ---- */
.ck-rules{background:rgba(255,255,255,.035);border-radius:12px;padding:12px 14px;
margin-bottom:14px}
.ck-rh{font-size:15px;font-weight:700;color:#cfd6e0;margin-bottom:8px}
.ck-rules ul{margin:0;padding:0 18px 0 0;list-style:none}
.ck-rules li{font-size:14px;color:#9aa4b2;line-height:2.1}
.ck-rules li b{color:#ffd54f}
/* ---- VIP غا ئايلاندۇرۇش ---- */
.rd-wrap{background:rgba(127,212,255,.05);border:1.5px solid rgba(127,212,255,.18);
border-radius:12px;padding:12px 14px;margin-bottom:14px}
.rd-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rd-btn{flex:1 1 110px;display:flex;flex-direction:column;align-items:center;gap:5px;
padding:12px 8px;border-radius:12px;cursor:pointer;font-family:inherit;
background:linear-gradient(150deg,rgba(127,212,255,.16),rgba(127,212,255,.05));
border:1.5px solid rgba(127,212,255,.35);color:#dbe9f5;transition:.14s}
.rd-btn:active{transform:scale(.96)}
.rd-btn .rd-c{font-size:18px;font-weight:800;color:#7fd4ff}
.rd-btn .rd-n{font-size:13px;color:#a8b4c2}
.rd-btn:disabled{opacity:.4;cursor:not-allowed}
.rd-btn.focus{outline:3px solid var(--focus,#7fd4ff);outline-offset:2px}
.rd-tip{font-size:13px;color:#7f8894;line-height:1.9}
/* ---- 👥 دوست تەكلىپ ---- */
.inv-wrap{background:rgba(255,255,255,.035);border-radius:12px;padding:12px 14px}
.inv-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.inv-code #invCode{font-size:22px;font-weight:800;letter-spacing:3px;color:#ffd54f;
background:rgba(255,213,79,.12);padding:8px 16px;border-radius:10px;
border:1.5px dashed rgba(255,213,79,.45)}
.btn.small{font-size:13px;padding:8px 14px}
/* يانفوندا تەڭگە كارتىسىنىڭ ئىچكى بوشلۇقىنى ئازايتىمىز */
@media (max-width:520px){
.coin-card{padding:14px 11px;border-radius:14px}
.coin-hero{gap:12px;padding:12px 13px}
.coin-hero .ch-ic{font-size:34px}
.coin-hero .ch-num{font-size:40px}
.coin-bal b{font-size:30px}
.ck-cell{padding:7px 1px 6px}
.ck-cell .ck-d{font-size:11px}
.ck-cell .ck-i{font-size:18px}
.ck-cell .ck-n{font-size:9px}
.lv-stats{grid-template-columns:repeat(2,1fr)}
.lv-stat b{font-size:18px}
.rd-btn{flex:1 1 92px;padding:10px 6px}
.ms-btn{font-size:12px;padding:7px 10px}
.ck-tab{font-size:12px;padding:9px 2px}
.ck-tab .ic{font-size:19px}
}
/* ====================================================================
▶️ «كۆرگەنلىرىم» بېتىدىكى قويۇش ئورنى ئەسكەرتىشى (2026-09-21 يېڭى)
--------------------------------------------------------------------
ئىشلەتكۈچى ئەرزى: «يېرىمىدا چىكىنىپ كەتسە، قايتا كىرسە بېشىدىن
باشلاپ ماڭدۇرۇش كېرەك بولۇۋاتىدۇ — ئاددىي ئادەم ئاستىدىكى ستوننى
تارتىپ ئۆزى ئىزدەيدۇ، بۇ قىيىن». ھازىر قويۇش ئورنى كۆرسىتىلىپ،
بىر بېسىش بىلەن شۇ يەردىن داۋاملىشىدۇ.
==================================================================== */
.hpos{
margin:0 6px 10px;padding:8px 12px;border-radius:10px;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:10px;
background:rgba(255,213,79,.10);border:1.5px solid rgba(255,213,79,.35);
font-size:14px;font-weight:700;color:#ffd54f;
transition:background .12s,transform .1s
}
.hpos:hover{background:rgba(255,213,79,.20);transform:translateY(-1px)}
.hpos.focus, .hpos:focus{outline:2.5px solid var(--focus);outline-offset:2px}
.hpos-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpos-go{
flex:0 0 auto;padding:3px 12px;border-radius:999px;font-size:13px;
background:rgba(255,213,79,.9);color:#1a1500
}
/* ⚠ 有待播放位置（.hpos）的卡片：文字区不再固定高度，改为自适应 */
.hcard:has(.hpos) .htx{height:auto;min-height:56px;padding-bottom:4px}
.hcard:has(.hpos){padding-bottom:2px}
/* 🔎 ئىزدەش خاتىرىسىدىكى سۆز تاللاش رامكىلىرى */
.shrow{display:flex;flex-wrap:wrap;gap:10px;padding:6px 2px 20px}
.shchip{
padding:9px 16px;border-radius:999px;cursor:pointer;
background:#1a1a26;border:1.5px solid rgba(255,255,255,.13);
font-size:16px;color:#d5d8e2;transition:.12s;white-space:nowrap
}
.shchip:hover{background:#242434;border-color:rgba(255,213,79,.45);color:#ffd54f}
.shchip.focus{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
/* ============ 💬 باھا ۋە ئىنكاسلار (2026-09-20) ============
تەپسىلات بېتىدە «قىسىملار» تىزىملىكىنىڭ ئۈستىدە تۇرىدۇ. */
.cmt-box{
margin:16px 0 8px;padding:16px 18px;border-radius:16px;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
border:1.5px solid var(--line)
}
.cmt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cmt-title{font-size:19px;font-weight:800;color:#fff}
.cmt-count{font-size:14px;color:var(--dim);white-space:nowrap}
.cmt-form{display:flex;gap:10px;align-items:stretch}
.cmt-input{
flex:1;min-width:0;resize:vertical;min-height:54px;max-height:180px;
background:#14141c;color:#e9edf6;border:1.5px solid var(--line);border-radius:12px;
padding:11px 14px;font-size:16px;line-height:1.6;font-family:inherit;
outline:none;transition:.12s
}
.cmt-input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,197,49,.16)}
.cmt-input::placeholder{color:#6b7280}
.cmt-send{flex:0 0 auto;align-self:flex-end;padding:12px 22px;font-size:16px}
.cmt-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.cmt-empty{color:var(--dim);font-size:15px;padding:8px 2px}
.cmt-item{
padding:11px 14px;border-radius:12px;background:rgba(0,0,0,.28);
border:1.5px solid rgba(255,255,255,.06);animation:cmtIn .28s ease
}
@keyframes cmtIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ⚠ 2026-09-20: تەستىق كۈتۈۋاتقان باھا — سېرىق چەگرا + بەلگە.
(ئىشلەتكۈچى: «تەستىقسىز چىقىپ كېتىدۇ» → ئەمدى ئارقا بەتتىن
تەستىقلىغاندىن كېيىن ئاندىن ھەممە ئادەمگە كۆرۈنىدۇ) */
.cmt-item.cmt-pend{border-color:rgba(255,179,0,.3);background:rgba(255,179,0,.05)}
.cmt-pill{
display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
font-size:12px;font-weight:700;color:#ffb300;
background:rgba(255,179,0,.13);border:1px solid rgba(255,179,0,.35)
}
.cmt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.cmt-name{font-size:15px;font-weight:700;color:var(--yellow2)}
.cmt-time{font-size:13px;color:var(--dim);white-space:nowrap}
.cmt-text{
font-size:16px;line-height:1.72;color:#dfe3ec;white-space:pre-wrap;
overflow-wrap:break-word;word-break:break-word
}
/* تېلېۋىزور / چوڭ ئېكران: كىرگۈزۈش كۆزنىكى ۋە خەتلەر سەل چوڭايتىلىدۇ
(يىراقتىن كۆرۈش ئۈچۈن)، ئەمما قۇر ئېگىزلىكى قىسقارتىلىپ ئورۇن
ئىسراپ قىلىنمايدۇ */
@media (min-width:901px){
.cmt-box{margin:18px 0 10px;padding:18px 22px}
.cmt-title{font-size:21px}
.cmt-input{min-height:60px;font-size:17px}
.cmt-text{font-size:17px}
.cmt-name{font-size:16px}
}
/* تار ئېكران (يانفون): «يوللاش» كۇنۇپكىسى ئاستىغا چۈشۈپ، كىرگۈزۈش
مەيدانى پۈتۈن كەڭلىكنى ئىگىلەيدۇ — بارماق بىلەن يېزىش ئاسان بولىدۇ */
@media (max-width:560px){
.cmt-box{margin:14px 0 6px;padding:13px 13px}
.cmt-form{flex-direction:column;gap:9px}
.cmt-title{font-size:17px}
.cmt-send{align-self:stretch;width:100%}
.cmt-text{font-size:15.5px}
}
/* ============================================================
🖱 2026-09-21 — كومپيوتېردا كونترول ئۆزلۈكىدىن يوشۇرۇلۇشى
------------------------------------------------------------
ئىشلەتكۈچى ئەرزى: «كومپيوتىردا كىنو قويۇلسا ئىكراندا ئاۋۇ
نەرسىلە تۇردۇ ئۆچمەي، ئەسلىدە بىر ئازدىن كېيىن ئۆچسە ياخشىتى».
ئىلگىرى پەقەت `.pl-bottom` (ئاستىدىكى ئوينىتىش بالدىقى) يوشۇرۇلاتتى.
ئوتتۇرىدىكى 5 كۇنۇپكا (`.pl-acts`) ۋە ئوڭ ئۇچۇر تاختىسى
(`.pl-info`, `.pl-comments`, `.pl-meta`) ھەر ۋاقىت كۆرۈنۈپ
تۇراتتى. ھازىر ئۇلارمۇ `.show-ui` بىلەن بىرگە ئاستا يوشۇرۇلىدۇ.
⚠ تېلېۋىزور (كۇنۇپكا بىلەن) ۋە سىناش تاختايلىرى بۇنىڭدىن
ئايرىم — ئۇلاردا مائۇس يوق، فوكۇس ئۇسۇلى ئىشلىتىلىدۇ. شۇڭا
بۇ قائىدە پەقەت «مائۇس بار (ھەقىقىي pointer)» ئۈسكۈنىدە كۈچكە
ئىگە — `@media (hover:hover) and (pointer:fine)`.
============================================================ */
@media (hover:hover) and (pointer:fine){
/* ئوينىتىش بالدىقى — ئاللىبۇرۇن بار، ئۆزگەرمەيدۇ */
.pl-acts,
.pl-info,
.pl-comments,
.pl-meta,
.pl-sec{
opacity:0;
transition:opacity .32s ease;
pointer-events:none;
}
/* كونترول كۆرۈنگەندە ھەممىسى قايتا چىقىدۇ */
.player.show-ui .pl-acts,
.player.show-ui .pl-info,
.player.show-ui .pl-comments,
.player.show-ui .pl-meta,
.player.show-ui .pl-sec{
opacity:1;
pointer-events:auto;
}
/* ⚠ قىسىم تىزىملىكى ئېچىلغاندا (فوكۇس ئۇنىڭدا بولسا) ئوڭ تاختا
يوشۇرۇلۇپ كەتمەسۇن — ئىشلەتكۈچى قىسىم تاللاۋاتقان بولسا كېرەك. */
body.watch-open .pl-info:focus-within,
.pl-info:focus-within,
.pl-comments:focus-within{
opacity:1!important;
pointer-events:auto!important;
}
/* بىۋاستە تارقىتىش (live) ھالىتىدە بۇ رايونلار ئاللىبۇرۇن يوشۇرۇلغان */
.player.live .pl-acts,
.player.live .pl-comments,
.player.live .pl-meta{opacity:0!important;pointer-events:none!important}
}
/* ئېلان سىنى ئوينىلىۋاتقاندا ۋە يۈكلىنىۋاتقاندا كونترولنى يوشۇرمايمىز
(ئىشلەتكۈچى «ئىشلىمەيدۇ» دەپ قالماسلىقى ئۈچۈن) */
.player.ads .pl-acts, .player.ads .pl-info, .player.ads .pl-comments, .player.ads .pl-meta{
opacity:1!important;pointer-events:auto!important;
}
/* ====================================================================
🧯 كونا WebView ماسلىشىش يامىقى (2026-09-22)
------------------------------------------------------------
سەۋەب: بەزى تېلېۋىزور قۇتىلىرىنىڭ WebView سى كونا بولۇپ
`display:grid` ۋە `gap` نى قوللىمايدۇ. نەتىجىدە يوقلىما بېتىدىكى
7 كۈنلۈك كالېندار، دەرىجە ئىستاتىستىكىسى ۋە ئاستى تەبەق
ئاستى-ئۈستى تىزىلىپ، بەت «بىنورمال» كۆرۈنەتتى.
ھەل: بۇ ئۈچ بۆلەكنى grid ئورنىغا flex بىلەن تىزىمىز — flex ھەممە
WebView دا ئىشلايدۇ؛ ئارىلىق ئۈچۈن gap ئەمەس margin ئىشلىتىمىز.
==================================================================== */
.ck-row{display:-webkit-flex;display:flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;margin:0 -3px 12px}
.ck-row>.ck-cell{-webkit-flex:1 1 0;flex:1 1 0;min-width:0;margin:0 3px}
.lv-stats{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -4px 14px}
.lv-stats>.lv-stat{-webkit-flex:1 1 120px;flex:1 1 120px;min-width:0;margin:0 4px 8px}
.ck-tabs{display:-webkit-flex;display:flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;margin:2px -4px 14px}
.ck-tabs>.ck-tab{-webkit-flex:1 1 0;flex:1 1 0;min-width:0;margin:0 4px}
.ck-cell>.ck-d,.ck-cell>.ck-i,.ck-cell>.ck-n{display:block;margin-left:auto;margin-right:auto}
.ck-cell>.ck-i{margin-top:3px}
.ck-cell>.ck-n{margin-top:2px}
/* ⚠ 2026-09-22 (2-تۈزىتىش): gap نى نۆل قىلىش شەرت!
ئەسلى قائىدىلەردە .ck-row{gap:6px}، .lv-stats/.ck-tabs{gap:8px} بار.
@supports نى «قوللايدۇ» دەپ بىلدۈرۈپ ئەمەلىيەتتە ئىشلىتمەيدىغان
WebView لاردا gap بىلەن margin قوش ھېسابلىنىپ (6+6=12px)، ئەڭ ئاخىرقى
قۇتا ئاتا ئېلېمېنتتىن ئېشىپ، overflow دا كېسىلىپ قالىدۇ — شۇڭا
7-كۈنلۈك كالېندارنىڭ ئەڭ ئاخىرقى كۈنى (بۈگۈن) كۆرۈنمەي قالاتتى.
ھەل: ھەم gap نى نۆل قىلىمىز، ھەم margin نى ئومۇميۈزلۈك (شەرتسىز)
بېرىمىز — شۇنداق قىلغاندا ھەم قوشنا ئارىلىق قوش ھېسابلانمايدۇ،
ھەم gap نى قوللىمىغان WebView دا margin ئىشلىنىپ ئارىلىق ساقلىنىدۇ. */
.ck-row,.lv-stats,.ck-tabs,.ck-cell,.ck-tab,
.coin-hero,.lv-wrap,.ck-sum,.ms-row,.nt-row,.rd-row,.inv-code{
gap:0!important;
}
/* margin ئارقىلىق ئارىلىق — شەرتسىز (ھەم gap قوللىغان، ھەم قوللىمىغان WebView دا) */
.coin-hero>.ch-mid{margin-right:18px}
.lv-wrap>.lv-mid{margin-right:12px}
.ck-sum>*+*{margin-right:10px}
.ms-row>.ms-mid{margin-right:11px;margin-left:11px}
.nt-row>.nt-mid{margin-right:11px;margin-left:11px}
.ck-tab>.ic{margin-bottom:4px}
.rd-btn>.rd-n{margin-top:5px}
.rd-row>.rd-btn{margin:0 5px 10px}
.inv-code>*+*{margin-left:10px}
@supports not (gap:1px){
.coin-hero>.ch-mid{margin-right:18px}
.lv-wrap>.lv-mid{margin-right:12px}
.ck-sum>*+*{margin-right:10px}
.ms-row>.ms-mid{margin-right:11px;margin-left:11px}
.nt-row>.nt-mid{margin-right:11px;margin-left:11px}
.ck-tab>.ic{margin-bottom:4px}
.rd-btn>.rd-n{margin-top:5px}
.rd-row>.rd-btn{margin:0 5px 10px}
}
/* ============================================================
⚙ 2026-09-25 (ئىشلەتكۈچى تەلىپى: «قويغۇچ ئىكراندىكى ئاۋۇ
نەرسىلەرنى — سىنبەلگە + رامكا + ھەممىسى بىلەن — پۈتۈنلەي
يوقىتىش») — ئوڭ تاختىدىكى 6 كۇنۇپكا قۇرى (.pl-acts):
⛶ چوڭ ئېكران · 🔍 تېز ئىزدەش · ⇅ تېزلىك
★ ساقلاش · 🕘 كېيىن كۆرۈش · 💎 ئەزالىق
پۈتۈنلەي يوشۇرۇلدى (كۆرۈنمەيدۇ، ئورۇنمۇ ئالمايدۇ).
============================================================ */
.pl-acts{display:none!important}
/* 2026-10-01: تاللانغان ھەم فوكۇسلانغان تۈر — سېرىق قۇتا ئىسىمنى توسۇۋالمايدۇ.
ئەسلىدە .tab.on (ئالتۇن تېكىست) بىلەن .tab.focus (ئالتۇن تولدۇرۇش) بىرلەشكەندە
تېكىست ئالتۇن رەڭدە قېلىپ، قۇتا ئىچىدە كۆرۈنمەيتتى. بۇ يەردە تېكىستنى
قاراڭغۇ (--on-gold) قىلىپ، ئالتۇن قۇتا ئۈستىدە ئېنىق كۆرسىتىمىز. */
.tabs .tab.on.focus,
.tab.on.focus{
color:var(--on-gold) !important;
-webkit-text-fill-color:var(--on-gold) !important;
background:linear-gradient(135deg,var(--gold1),var(--gold2)) !important;
text-shadow:none !important;
border-radius:14px;
box-shadow:0 0 0 3px rgba(255,197,49,.30),0 8px 22px rgba(245,166,35,.35);
outline:3px solid rgba(255,224,126,.95);outline-offset:2px;
}
/* ============================================================
🆕 2026-10-04 (c1) باننېر بۇلۇڭى: كارۇسېل رەسىمىنىڭ تۆت بۇلۇڭى يۇمىلاق
------------------------------------------------------------
مەسىلە: كونا تېلېۋىزور/يانفون WebView دا .cb-half نىڭ
border-radius + overflow:hidden ئىچىدىكى position:absolute بولغان
![]()
نى قىرقالماي، ئاستىدىكى ئىككى بۇلۇڭ تۈز (90°)
چىقىپ قالاتتى — پەقەت ئۈستىدىكى ئىككى بۇلۇڭلا يۇمىلاق كۆرۈنەتتى.
ھەل قىلىش: رەسىمنىڭ ئۆزىگە بىۋاسىتە border-radius بېرىمىز.
بۇ ئۇسۇل clipping غا تايانمايدۇ، شۇڭا ھەممە WebView دا ئىشلەيدۇ.
============================================================ */
.carousel{ border-radius:20px !important; overflow:hidden !important; }
.carousel .cb-half,
.carousel .cb-half > img,
.carousel .cb-half > img.cs2,
.carousel .cs2,
.carousel .cb-half .cs2,
.carousel .cb-half .cs2 img,
.carousel .cb-half .cs-cap{
-webkit-border-radius:18px !important;
border-radius:18px !important;
}
.carousel .cb-half{
overflow:hidden !important;
/* كونا WebKit دا clipping نى مەجبۇرلاش ئۈچۈن ئايرىم قاتلامغا كۆتۈرىمىز */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* چوڭ رەسىم بىلەن قوشنا بولغان «تېلېۋىزىيە» يېرىمىمۇ ئوخشاش يۇمىلاق */
.lv-half, .lv-half .mini-live{
-webkit-border-radius:18px !important;
border-radius:18px !important;
}
@media (max-width:760px){
.carousel .cb-half,
.carousel .cb-half > img,
.carousel .cb-half > img.cs2,
.carousel .cs2,
.carousel .cb-half .cs2,
.carousel .cb-half .cs2 img,
.carousel .cb-half .cs-cap{
-webkit-border-radius:16px !important;
border-radius:16px !important;
}
}
/* ====================================================================
🔒 2026-10-05 (مەنىڭ زورلاپ قويغان تۈزىتىشىم) — ئائىلە بېتى 6 كىنو بىر قۇردا
مەسىلە: يۇقىرىدىكى @media بلۇكلىرى TV ئېكران ئۆلچىمىدە .grid نى
repeat(2/4,1fr) قىلىپ قالىۋاتىدۇ → ئەپتىدا 4 ئىستون چىقىۋاتتى.
ھەل: ئاخىرىغا !important بىلەن يازىپ، ھەر قانداق @media دىن كېيىن
6 ئىستون ئۈستۈن تۇرىدۇ. */
@media (min-width:600px){
.grid{grid-template-columns:repeat(6,1fr)!important;gap:20px 16px!important}
.grid .pwrap{padding-top:143%!important}
.grid .pimg>.pimg-in{object-fit:contain!important}
}
/* ================================================================
🆕 2026-10-06 TV WebView ئۆزگەرتىشلىرى (شاگىرتىمنىڭ 4 نۇقتىسى)
1) ئۈستى بار/تۈرلەر ئېگىزلىكى — ۋاقىت چىقىپ كەتمەسۇن
2) ۋاقىت يېزىقى — ھەمەش ھېچىلىكتە ئۆز ئورنىدا
3) ۋاقىت ھېچىلىكىنى ئۆستەرەپ ۋاقىت يېزىقىنى ھېچىلىك قىلماسلىق
4) باننېر بۇلۇڭى يۇمىلاق
5) پەرقلىق (بەت بۆلۈشچى) كۇنۇپكىسى
================================================================ */
/* ---- 1) ۋاقىت يېزىقى ھەمەش ئۆز ئورنىدا تۇرسۇن ---- */
.clockbox{
display:inline-flex !important;align-items:center !important;justify-content:center !important;
height:auto !important;min-height:32px;line-height:1 !important;
flex:0 0 auto !important;align-self:center !important;
/* TV WebView دا .clock نى يوشۇرغان ھالەتتىمۇ يېزىق ئورنىدا تۇرسۇن */
padding:0 12px !important;
}
/* .clock باشتا يوشۇرۇلغان، TV دە ئۇنىڭ ئورنىنى باق قالدۇرىمىز (ھېچنېمە يۆتۈپ كەتمەيدۇ) */
.clockbox .clock{display:inline !important}
/* ---- 2) ئۈستى بارنى TV دا چوڭ ھېچىلىكتە تۇرغۇزۇش ---- */
/* TV WebView «كىچىك ئېكران» ھالەتكە چۈشسەمۇ ئۈستى بار يېقىن كەتمەيدۇ */
@media (max-width:900px), (pointer:coarse){
/* .top ۋە main نى ھەمەش بىر ھېچىلىكتە تۇرغۇزۇش — ھېچنېمە يېقىن چىقمۇيدۇ */
:root{--toph:84px !important}
.top{height:84px !important;overflow:visible !important}
.top-right{overflow:visible !important}
main{top:84px !important}
/* تۈرلەر يېقىنلىشىپ كەتمەسۇن — ئۈستى بار بىلەن ئوخشاش ئېگىزلىكتە */
.tabs{padding-top:14px !important;min-height:56px !important;align-items:flex-end !important}
/* ۋاقىت يېزىقى ھەر ھالەتتە ھېچىلىكتە تۇرسۇن */
.clockbox{min-height:32px !important;height:auto !important;padding:6px 12px !important}
.clockbox .clock{display:inline !important;font-size:17px !important;line-height:1 !important}
.clockbox .date{font-size:16px !important;line-height:1 !important}
.date{font-size:16px !important;line-height:1 !important}
}
/* ---- 3) باننېر بۇلۇڭى ھەمەش يۇمىلاق ---- */
.carousel,.slide,.slide img,.banner,.banner .slide{
border-radius:20px !important;
overflow:hidden !important;
}
.slide img{border-radius:20px !important}
/* ---- 4) پەرقلىق (بەت بۆلۈشچى) كۇنۇپكىلىرى ---- */
.pager{
display:flex !important;align-items:center !justify-content:center;
gap:14px !important;margin:24px 0 30px !important;padding:0 26px;
direction:rtl;
}
.pager .pg-btn{
display:inline-flex !important;align-items:center !justify-content:center;
min-width:120px !important;height:52px !important;padding:0 22px !important;
background:#22222d !important;border:2px solid rgba(255,255,255,.16) !important;
color:#e7eaf2 !important;font-size:19px !important;cursor:pointer;
border-radius:26px !important;white-space:nowrap !important;
transition:.1s;
}
.pager .pg-btn:hover{background:#2c2c3a !important}
.pager .pg-btn:disabled{opacity:.35 !important;cursor:not-allowed}
.pager .pg-btn.focus{background:var(--yellow) !important;color:#1a1500 !important;
border-color:var(--yellow) !important;outline:3px solid rgba(255,224,126,.95);outline-offset:2px}
.pager .pg-info{
font-size:19px !important;color:#e7eaf2 !important;
min-width:190px !important;text-align:center !important;
font-variant-numeric:tabular-nums !important;
}
.pager .pg-info b{color:var(--yellow);font-weight:700}
/* ================================================================
🆕 2026-10-06 (2-قېتىم) 6 ستون زورلاش تۈزەتىشى
سەۋەب: كونا TV WebView «@media (min-width:1px)» نى قوللىمايدۇ →
6 ستون ئۈچۈنلۈك @media ئىشلەپ، 4 ستون كۆرۈنەۋاتىتۇ.
ھەل: 600px قىلدىم (TV ۋە كومپيۇتېر ھەممىسىدە ئىشلەيدۇ)
================================================================ */
@media (min-width:600px){
.grid,.grid-rec{
grid-template-columns:repeat(6,1fr)!important;
gap:20px 16px!important;
}
.grid .pwrap,.grid-rec .pwrap{padding-top:143%!important}
.grid .pimg>.pimg-in,.grid-rec .pimg>.pimg-in{object-fit:contain!important}
/* ھەر بىرلاپ كىچىكلەپ 6 ستوننى سۈزۈپ ھەم ھەمۈشە يېغىن قىلماسلىق ئۈچۈن */
.pcard .ptx{font-size:15px!important;height:50px!important;padding:8px 5px 10px!important}
.pcard{border-radius:14px!important}
}
/* ================================================================
🆕 2026-10-06 (3-قېتىم) — 6 ستون + تىك پۇستى: ئېھتىيات ھەل
سەۋەب: TV WebView كېشىدا كونا CSS (4 ئىستون، landscape) ساقلاپ قىلىۋاتىدۇ.
بۇ بلوك ھېچقانداق @media شەرتىسىز، ھەرخىل ئېكران ھېچىلىكىدە ئىشلەيدۇ —
grid ئۆزى grid-template-columns نى inline style بىلەن ئۆزگەرتالسۇن.
================================================================ */
.grid, .grid-rec, [id="grid"], [id="recGrid"]{
grid-template-columns:repeat(6,1fr)!important;
display:grid!important;
gap:20px 16px!important;
}
.grid > *, .grid-rec > *{min-width:0!important}
.pcard .pwrap, .grid-rec .pcard .pwrap{padding-top:143%!important;height:0!important}
.pcard .pimg > .pimg-in, .grid-rec .pcard .pimg > .pimg-in{
object-fit:contain!important;
width:100%!important;height:100%!important;
}
.pcard .ptx, .grid-rec .pcard .ptx{font-size:15px!important;height:50px!important;padding:8px 5px 10px!important}
.pcard{border-radius:14px!important}
/* ====================================================================
2026-10-21 — TV بۆلىكى ئۆزگەرتىشى: ھەقىقىي تېلېۋىزۇر ئەپى
--------------------------------------------------------------------
ئىشلەتكۈچى تەلىپى:
«تېلۋۇزۇر دىگەننى باسقاندا بۇنداق چىقىدىغان ئەمەس» — بۇرۇنقى
ئەپتىكى TV بۆلىكى كىنو تىزىملىكى بىلەن ئوخشاش، پەقەت قانال
تىزىملىكىنى كۆرسىتەتتى.
ھەقىقىي تېلېۋىزۇر ئەپى (reference بويىچە):
① «تېلېۋۇزۇر» نى باسسا → ھەقىقىي TV ئەپى ئېچىلىدۇ:
پۈتۈن ئىكراندا سىن + چېپ تەرەپتە قانال تىزىملىكى (نومۇر بىلەن).
ئاخىرقى قېتىم كۆرۈلگەن قانال ئۆزلۈكىدىن قويۇلىدۇ.
② قانال تىزىملىكى ئادەتتە يوشۇرۇن:
- تىزگىنەكنىڭ OK / ئوڭ / سول ئۇكىنى بېسىلغanda ئېچىلىدۇ
- تېلفۇن/كومپىيوتىردا ئىكراننى باسقاندا ئېچىلىدۇ
③ تىزىملىكتىن قانال تاللىغاندا → سىن ئۆزگىرىدۇ، تىزىملىك تاقىلىدۇ.
==================================================================== */
/* ---------- 1) TV ئەپى پونكىتى (ئىكراننى تولدۇرىدۇ) ---------- */
body.tv-open{overflow:hidden!important}
body.tv-open main{filter:none!important}
/* TV بەتنىڭ ئۆزى — پۈتۈن ئىكراندا */
.view.tv-view{
position:fixed!important;inset:0!important;z-index:120!important;
background:#000!important;padding:0!important;margin:0!important;
overflow:hidden!important;display:none
}
.view.tv-view.active{display:block!important}
/* ---------- 2) TV سىن مەيدانى ---------- */
.tv-stage{
position:absolute;inset:0;background:#000;overflow:hidden
}
.tv-stage video{
width:100%;height:100%;object-fit:contain;background:#000;display:block
}
/* ---------- 3) چېپ تەرەپتىكى قانال تىزىملىكى (reference) ---------- */
.tv-list{
position:absolute;top:0;left:0;height:100%;width:min(30vw,420px);
min-width:260px;z-index:6;
background:linear-gradient(90deg,rgba(8,10,18,.94) 0%,rgba(8,10,18,.86) 62%,rgba(8,10,18,0) 100%);
padding:2.2vh 1.2vw 2.2vh 1.2vw;
display:flex;flex-direction:column;gap:.6vh;
overflow-y:auto;overscroll-behavior:contain;
transform:translateX(-102%);
transition:transform .28s cubic-bezier(.22,.9,.3,1);
scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent
}
.tv-list::-webkit-scrollbar{width:6px}
.tv-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:6px}
/* ئېچىلغان ھالەت */
.tv-open-ch .tv-list{transform:translateX(0)}
/* ئاخىرقى قانال — reference دىكىدەك قىزىل */
.tv-ch{
display:flex;align-items:center;gap:.75vw;
padding:.55vh .7vw;border-radius:12px;
cursor:pointer;flex:0 0 auto;outline:none;
transition:background .16s ease
}
.tv-ch:hover{background:rgba(255,255,255,.06)}
.tv-ch:focus,.tv-ch.focus{
background:rgba(255,224,126,.14);
box-shadow:0 0 0 2px rgba(255,224,126,.85) inset
}
.tv-num{
flex:0 0 auto;min-width:2.6vw;height:2.6vw;padding:0 .35vw;
display:flex;align-items:center;justify-content:center;
border:1.5px solid rgba(255,255,255,.55);border-radius:7px;
background:rgba(255,255,255,.05);
color:#fff;font-size:1.05vw;font-weight:700;line-height:1
}
.tv-ch.on .tv-num{
background:#e8384f;border-color:#ff6b7d;color:#fff
}
.tv-ch.on .tv-name{color:#ff5f73}
.tv-name{
flex:1;min-width:0;color:#f2f4fb;font-size:1.15vw;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.tv-logo{
flex:0 0 auto;width:2.6vw;height:2.6vw;object-fit:contain;
border-radius:6px;background:rgba(255,255,255,.08)
}
.tv-ch.on .tv-name{font-weight:800}
/* ---------- 4) ئوتتۇردا دەرھال تاللىش تۈگمىلىرى (reference) ---------- */
.tv-tools{
position:absolute;z-index:7;left:min(30vw,420px);
transform:translateX(-100%);
top:50%;margin-top:-8vh;
display:flex;flex-direction:column;gap:.8vh;
padding:1vh .6vw;border-radius:14px;
background:rgba(8,10,18,.78);
border:1px solid rgba(255,255,255,.12);
opacity:0;pointer-events:none;
transition:opacity .22s ease,transform .22s ease
}
.tv-open-ch .tv-tools{opacity:1;pointer-events:auto;transform:translateX(-100%)}
.tv-tool{
display:flex;align-items:center;gap:.45vw;
padding:.45vh .5vw;border-radius:9px;cursor:pointer;outline:none;
color:#e8ebf5;font-size:1vw;font-weight:600;white-space:nowrap
}
.tv-tool:hover,.tv-tool:focus{background:rgba(255,224,126,.16);color:#ffe07e}
.tv-tool .ic{font-size:1.15vw;line-height:1}
/* ---------- 5) ئۈستى ھالەت تاختىسى ---------- */
.tv-hud{
position:absolute;left:0;right:0;bottom:0;z-index:8;
padding:2.4vh 1.4vw 1.2vh;
background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.42) 58%,rgba(0,0,0,0) 100%);
display:flex;align-items:flex-end;justify-content:space-between;gap:1vw;
pointer-events:none;transition:opacity .25s ease
}
.tv-hud.hide{opacity:0}
.tv-now{display:flex;align-items:center;gap:.7vw;min-width:0}
.tv-now .tv-logo{width:3vw;height:3vw}
.tv-now .tt{font-size:1.6vw;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-now .ts{font-size:.95vw;color:#c9d0e2;margin-top:.25vh}
.tv-hint{
flex:0 0 auto;font-size:.95vw;color:#dfe4f0;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
padding:.5vh .7vw;border-radius:9px;white-space:nowrap
}
.tv-hint b{color:#ffe07e}
/* ---------- 6) يېڭى نەشر يۇقىرىدا (reference دىكى «يېڭى» بەلگىسى) ---------- */
.tv-live-badge{
position:absolute;top:1.6vh;right:1.4vw;z-index:9;
display:flex;align-items:center;gap:.45vw;
background:rgba(232,56,79,.92);color:#fff;
padding:.45vh .8vw;border-radius:8px;
font-size:1vw;font-weight:800;letter-spacing:.4px
}
.tv-live-badge .dot{
width:.55vw;height:.55vw;border-radius:50%;background:#fff;
animation:tvBlink 1.4s infinite
}
@keyframes tvBlink{0%,100%{opacity:1}50%{opacity:.25}}
/* ---------- 7) يېڭىلىنىش / خاتالىق ---------- */
.tv-loading{
position:absolute;inset:0;z-index:10;display:flex;
align-items:center;justify-content:center;flex-direction:column;gap:1vh;
background:rgba(0,0,0,.72);color:#fff;font-size:1.2vw
}
.tv-loading.hidden{display:none}
.tv-ring{
width:3.4vw;height:3.4vw;border-radius:50%;
border:3px solid rgba(255,255,255,.18);border-top-color:#ffe07e;
animation:tvSpin .9s linear infinite
}
@keyframes tvSpin{to{transform:rotate(360deg)}}
/* ---------- 8) يانفون (ئىكراننى باسقاندا قانال تىزىملىكى) ---------- */
@media (pointer:coarse){
.tv-list{
width:min(72vw,340px);min-width:0;
background:linear-gradient(90deg,rgba(8,10,18,.96) 0%,rgba(8,10,18,.90) 78%,rgba(8,10,18,.55) 100%)
}
.tv-tools{left:auto;right:.8vw;transform:none;top:auto;bottom:12vh;margin-top:0}
.tv-open-ch .tv-tools{transform:none}
.tv-num{min-width:2.9vh;height:2.9vh;font-size:1.1vh;border-radius:6px}
.tv-logo{width:2.9vh;height:2.9vh}
.tv-name{font-size:1.35vh}
.tv-now .tt{font-size:1.7vh}
.tv-now .ts{font-size:1.05vh}
.tv-hint{font-size:1.05vh}
.tv-live-badge{font-size:1.1vh}
.tv-tool{font-size:1.2vh}
.tv-tool .ic{font-size:1.4vh}
}
@media (max-width:820px){
.tv-list{width:min(74vw,320px);min-width:0}
.tv-tools{left:auto;right:.8vw;transform:none;top:auto;bottom:12vh;margin-top:0}
.tv-open-ch .tv-tools{transform:none}
.tv-num{min-width:3.2vh;height:3.2vh;font-size:1.2vh}
.tv-logo{width:3.2vh;height:3.2vh}
.tv-name{font-size:1.5vh}
.tv-now .tt{font-size:1.9vh}
.tv-now .ts{font-size:1.1vh}
.tv-hint{font-size:1.1vh}
.tv-live-badge{font-size:1.2vh}
.tv-tool{font-size:1.35vh}
.tv-tool .ic{font-size:1.5vh}
}