/* =====================================================================
   UzTube — yagona dizayn tizimi (neon gradient + glassmorphism)
   public/css/ut-site.css
   Bu fayl butun saytning "mavzu qatlami": menyu, tugmalar, kartochkalar,
   hero, kino sahifasi, kategoriyalar, player. Ranglarni faqat :root da
   o'zgartiring — hammasi o'zi yangilanadi.
   ===================================================================== */

:root{
    --ut-nav-h: 68px;

    /* Fon */
    --ut-bg:   #06070c;
    --ut-bg-2: #0b0d16;

    /* Brend gradienti: moviy → ko'k → binafsha */
    --ut-c1: #22d3ee;
    --ut-c2: #4f7cff;
    --ut-c3: #a855f7;
    --ut-grad:      linear-gradient(120deg, var(--ut-c1) 0%, var(--ut-c2) 45%, var(--ut-c3) 100%);
    --ut-grad-wide: linear-gradient(120deg, var(--ut-c1) 0%, var(--ut-c2) 30%, var(--ut-c3) 60%, var(--ut-c2) 80%, var(--ut-c1) 100%);
    --ut-grad-soft: linear-gradient(120deg, rgba(34,211,238,.16), rgba(79,124,255,.16), rgba(168,85,247,.16));

    /* Neon nur */
    --ut-glow:    0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 28px -8px rgba(79,124,255,.75), 0 0 36px rgba(79,124,255,.45), 0 0 22px 3px rgba(255,255,255,.07);
    --ut-glow-lg: 0 0 0 1px rgba(255,255,255,.2) inset, 0 14px 36px -8px rgba(124,92,255,.85), 0 0 56px rgba(124,92,255,.6), 0 0 28px 6px rgba(255,255,255,.1);
    --ut-glow-sm: 0 0 18px rgba(79,124,255,.45);

    /* Shisha (glassmorphism) */
    --ut-glass:        rgba(255,255,255,.06);
    --ut-glass-2:      rgba(255,255,255,.1);
    --ut-glass-strong: rgba(14,16,26,.72);
    --ut-glass-line:   rgba(255,255,255,.12);
    --ut-glass-line-2: rgba(255,255,255,.2);
    --ut-blur:         blur(18px) saturate(160%);
    --ut-hi:           inset 0 1px 0 rgba(255,255,255,.12);

    /* Matn */
    --ut-text:  #f5f7fb;
    --ut-muted: #98a0b3;
    --ut-dim:   #6b7386;

    --ut-gutter: clamp(16px, 3vw, 48px);
    --ut-ease:   cubic-bezier(.2,.8,.2,1);
}

/* ===================================================================
   ASOS
   =================================================================== */
html{ scroll-behavior:smooth; }
body.ut-site{
    margin:0; background:var(--ut-bg); color:var(--ut-text);
    font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing:antialiased;
}
/* Orqa fondagi xira rangli nur dog'lari */
body.ut-site::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
        radial-gradient(900px 600px at -10% -10%, rgba(34,211,238,.09), transparent 60%),
        radial-gradient(900px 700px at 110% 0%, rgba(168,85,247,.10), transparent 60%),
        radial-gradient(800px 600px at 50% 110%, rgba(79,124,255,.07), transparent 60%);
}
body.ut-site a{ color:inherit; }
body.ut-site ::selection{ background:rgba(79,124,255,.45); color:#fff; }
body.ut-site :focus-visible{ outline:2px solid var(--ut-c2); outline-offset:3px; border-radius:10px; }
body.ut-site{ scrollbar-color:rgba(124,92,255,.5) transparent; }
body.ut-site ::-webkit-scrollbar{ width:10px; height:10px; }
body.ut-site ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--ut-c2), var(--ut-c3)); border-radius:10px; border:3px solid var(--ut-bg); }
body.ut-site ::-webkit-scrollbar-track{ background:transparent; }

/* Eski shablon qoldiqlari */
.ut-legacy, body.ut-site .sidebar, body.ut-site .botbar, body.ut-site .right-social-menu{ display:none !important; }

/* ===================================================================
   UMUMIY TUGMALAR
   .ut-btn-neon  — asosiy (gradient + neon nur + yaltiroq)
   .ut-btn-glass — ikkinchi darajali (shisha)
   =================================================================== */
.ut-btn-neon,
body.ut-site .ut-hero__btn--play,
body.ut-site .ut-btn--primary,
body.ut-site .ut-playbig,
body.ut-site .ut-strip__cta{
    position:relative; overflow:hidden; isolation:isolate;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    border:0 !important; border-radius:999px;
    background:var(--ut-grad-wide) !important; background-size:220% 100% !important; background-position:0% 50% !important;
    color:#fff !important; font-weight:800; letter-spacing:.2px; text-decoration:none;
    box-shadow:var(--ut-glow);
    transition:background-position .6s var(--ut-ease), box-shadow .35s var(--ut-ease), transform .25s var(--ut-ease);
}
/* yaltiroq chiziq */
.ut-btn-neon::before,
body.ut-site .ut-hero__btn--play::before,
body.ut-site .ut-btn--primary::before,
body.ut-site .ut-playbig::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.5) 50%, transparent 75%);
    transform:translateX(-130%); transition:transform .8s var(--ut-ease);
}
.ut-btn-neon:hover,
body.ut-site .ut-hero__btn--play:hover,
body.ut-site .ut-btn--primary:hover,
body.ut-site .ut-playbig:hover,
body.ut-site .ut-strip__cta:hover{
    background-position:100% 50% !important; box-shadow:var(--ut-glow-lg); transform:translateY(-2px);
}
.ut-btn-neon:hover::before,
body.ut-site .ut-hero__btn--play:hover::before,
body.ut-site .ut-btn--primary:hover::before,
body.ut-site .ut-playbig:hover::before{ transform:translateX(130%); }
.ut-btn-neon:active,
body.ut-site .ut-hero__btn--play:active,
body.ut-site .ut-btn--primary:active,
body.ut-site .ut-playbig:active{ transform:translateY(0) scale(.97); }

.ut-btn-glass,
body.ut-site .ut-hero__btn--ghost,
body.ut-site .ut-btn:not(.ut-btn--primary){
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:999px; color:#e9ecf3 !important; font-weight:700; text-decoration:none;
    background:var(--ut-glass) !important; border:1px solid var(--ut-glass-line) !important;
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur);
    box-shadow:var(--ut-hi);
    transition:background .25s, border-color .25s, box-shadow .3s, transform .25s var(--ut-ease), color .25s;
}
.ut-btn-glass:hover,
body.ut-site .ut-hero__btn--ghost:hover,
body.ut-site .ut-btn:not(.ut-btn--primary):hover{
    background:var(--ut-glass-2) !important; border-color:rgba(130,160,255,.55) !important; color:#fff !important;
    box-shadow:var(--ut-hi), 0 0 22px rgba(79,124,255,.35); transform:translateY(-2px);
}
body.ut-site .ut-btn:not(.ut-btn--primary):active{ transform:scale(.97); }
body.ut-site .ut-btn[aria-disabled="true"]{ opacity:.35; box-shadow:none; transform:none; }

/* ===================================================================
   TEPADAGI MENYU
   =================================================================== */
.ut-topbar{
    position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--ut-nav-h);
    background:linear-gradient(180deg, rgba(6,7,12,.88) 0%, rgba(6,7,12,0) 100%);
    transition:background .35s, backdrop-filter .35s;
}
.ut-topbar::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px; opacity:0; transition:opacity .35s;
    background:linear-gradient(90deg, transparent, rgba(79,124,255,.55) 30%, rgba(168,85,247,.55) 70%, transparent);
}
.ut-topbar.is-solid{
    background:rgba(8,9,15,.72);
    backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%);
}
.ut-topbar.is-solid::after{ opacity:1; }
.ut-topbar__inner{
    height:100%; max-width:1680px; margin:0 auto; padding:0 var(--ut-gutter);
    display:flex; align-items:center; gap:28px;
}
.ut-logo{ display:flex; align-items:center; flex-shrink:0; transition:filter .3s; }
.ut-logo:hover{ filter:drop-shadow(0 0 12px rgba(79,124,255,.6)); }
.ut-logo img{ height:34px; width:auto; display:block; }

.ut-links{ display:flex; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }
.ut-links a{
    position:relative; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 12px;
    color:#b9c0cf !important; font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap;
    transition:color .25s;
}
.ut-links a svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; transition:stroke .25s, filter .25s, transform .25s var(--ut-ease); }
.ut-links a:hover{ color:#fff !important; }
.ut-links a:hover svg{ transform:translateY(-1px); }
/* Pastki chiziq: ikki chetiga so'nib boradigan gradient + ostida nur */
.ut-links a::after,
.ut-links a::before{
    content:""; position:absolute; left:6px; right:6px; bottom:-2px; height:3px; border-radius:3px;
    background:linear-gradient(90deg, transparent 0%, var(--ut-c1) 22%, var(--ut-c2) 50%, var(--ut-c3) 78%, transparent 100%);
    transform:scaleX(0); opacity:0; transition:transform .35s var(--ut-ease), opacity .35s;
}
.ut-links a::before{ filter:blur(6px); height:6px; bottom:-4px; }
.ut-links a:hover::after{ transform:scaleX(.55); opacity:.6; }
.ut-links a.is-active{ color:#fff !important; }
.ut-links a.is-active::after{ transform:scaleX(1); opacity:1; }
.ut-links a.is-active::before{ transform:scaleX(1); opacity:.9; }
.ut-links a.is-active svg{ stroke:url(#utGrad); filter:drop-shadow(0 0 6px rgba(79,124,255,.8)); }

.ut-topbar__right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* Janrlar / Yillar / Davlatlar tugmalari */
body.ut-site .ut-nav{ margin:0; gap:4px; }
body.ut-site .ut-nav__btn{
    height:40px; border-radius:999px; color:#b9c0cf; border:1px solid transparent; background:transparent;
    transition:background .25s, border-color .25s, color .25s, box-shadow .3s;
}
body.ut-site .ut-nav__btn:hover,
body.ut-site .ut-nav__item.is-open .ut-nav__btn{
    color:#fff; background:var(--ut-glass); border-color:var(--ut-glass-line);
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur);
    box-shadow:var(--ut-hi), 0 0 18px rgba(79,124,255,.25);
}
body.ut-site .ut-nav__item.is-open .ut-nav__chev{ color:var(--ut-c1); }
body.ut-site .ut-nav__panel{
    background:var(--ut-glass-strong); border:1px solid var(--ut-glass-line);
    backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%);
    box-shadow:0 30px 80px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 40px rgba(79,124,255,.12);
}
body.ut-site .ut-nav__title{ background:var(--ut-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.ut-site .ut-nav__all{ color:#8fb2ff !important; }
body.ut-site .ut-nav__link{ border:1px solid transparent; transition:background .2s, border-color .2s, color .2s, transform .2s; }
body.ut-site .ut-nav__link:hover{ background:var(--ut-grad-soft); border-color:rgba(130,160,255,.35); transform:translateX(2px); }
body.ut-site .ut-nav__year{ background:var(--ut-glass); border-color:var(--ut-glass-line); transition:.25s var(--ut-ease); }
body.ut-site .ut-nav__year:hover{ background:var(--ut-grad-soft); border-color:rgba(130,160,255,.55); box-shadow:0 0 18px rgba(79,124,255,.3); transform:translateY(-2px); }

/* Qidiruv tugmasi */
.ut-search-btn{
    display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 14px 0 12px; border-radius:999px; cursor:pointer;
    background:var(--ut-glass); border:1px solid var(--ut-glass-line); color:#c3c9d6;
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); box-shadow:var(--ut-hi);
    font:600 14px/1 'Manrope', sans-serif; transition:background .25s, border-color .25s, box-shadow .3s, color .25s;
}
.ut-search-btn:hover{ background:var(--ut-glass-2); border-color:rgba(130,160,255,.55); color:#fff; box-shadow:var(--ut-hi), 0 0 22px rgba(79,124,255,.35); }
.ut-search-btn svg{ width:18px; height:18px; }
.ut-search-btn kbd{
    font:700 11px/1 'Manrope', sans-serif; color:#aab3c5; padding:3px 7px; border-radius:6px;
    background:rgba(255,255,255,.06); border:1px solid var(--ut-glass-line);
}

/* Til tanlash */
.ut-lang .dropdown-toggle{
    display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:999px;
    background:var(--ut-glass); border:1px solid var(--ut-glass-line); color:#c3c9d6 !important;
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); box-shadow:var(--ut-hi);
    font:700 13px/1 'Manrope', sans-serif; text-decoration:none; transition:.25s;
}
.ut-lang .dropdown-toggle:hover, .ut-lang .dropdown-toggle.show{ border-color:rgba(130,160,255,.55); color:#fff !important; box-shadow:var(--ut-hi), 0 0 18px rgba(79,124,255,.3); }
.ut-lang .dropdown-toggle::after{ display:none; }
.ut-lang .dropdown-toggle img{ width:20px; height:14px; border-radius:3px; object-fit:cover; }
.ut-lang .dropdown-menu{
    background:var(--ut-glass-strong); border:1px solid var(--ut-glass-line); border-radius:16px; padding:6px; min-width:180px;
    backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); box-shadow:0 24px 60px -10px rgba(0,0,0,.8);
}
.ut-lang .dropdown-menu a{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px;
    color:#e6e9f0 !important; font-size:14px; font-weight:600; text-decoration:none; transition:background .2s;
}
.ut-lang .dropdown-menu a:hover{ background:var(--ut-grad-soft); }
.ut-lang .dropdown-menu img{ width:20px; height:14px; border-radius:3px; }

/* Mobil "Katalog" tugmasi va pastki panel */
body.ut-site .ut-catbtn{
    border-radius:999px; background:var(--ut-glass); border:1px solid var(--ut-glass-line);
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); box-shadow:var(--ut-hi);
}
body.ut-site .ut-sheet__box{
    background:var(--ut-glass-strong); border-top:1px solid var(--ut-glass-line);
    backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%);
}
body.ut-site .ut-sheet__tab{ border-radius:999px; border-color:var(--ut-glass-line); background:var(--ut-glass); }
body.ut-site .ut-sheet__tab.is-active{ background:var(--ut-grad); border-color:transparent; box-shadow:var(--ut-glow-sm); }

/* ===================================================================
   QIDIRUV OYNASI
   =================================================================== */
body.ut-site .multisearch{
    z-index:1100; background:rgba(4,5,9,.66) !important;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
body.ut-site .multisearch__form{
    background:var(--ut-glass-strong) !important; border:1px solid var(--ut-glass-line) !important; border-radius:18px !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 20px 60px -10px rgba(0,0,0,.8), 0 0 40px rgba(79,124,255,.18) !important;
}
body.ut-site .multisearch__form:focus-within{ border-color:rgba(130,160,255,.6) !important; }
body.ut-site .multisearch__select{
    -webkit-appearance:none; appearance:none; cursor:pointer;
    height:42px; padding:0 34px 0 14px; border-radius:12px !important; color:#e9ecf3 !important; font-weight:700; font-size:14px;
    background:var(--ut-glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px !important;
    border:1px solid var(--ut-glass-line) !important; outline:0; transition:border-color .2s, box-shadow .2s;
}
body.ut-site .multisearch__select:hover, body.ut-site .multisearch__select:focus{ border-color:rgba(130,160,255,.55) !important; box-shadow:0 0 18px rgba(79,124,255,.3); }
body.ut-site .multisearch__select option{ background:#0e101a; color:#e9ecf3; }
body.ut-site .multisearch__input{ background:transparent !important; color:#fff !important; font-weight:600; border:0 !important; outline:0 !important; }
body.ut-site .multisearch__input::placeholder{ color:#7d8496; }
body.ut-site .multisearch__close{ border-radius:50%; transition:background .2s, box-shadow .2s, transform .2s; }
body.ut-site .multisearch__close svg{ stroke:#cfd5e6; }
body.ut-site .multisearch__close:hover{ background:var(--ut-grad) !important; box-shadow:var(--ut-glow-sm); transform:rotate(90deg); }
body.ut-site .multisearch__close:hover svg{ stroke:#fff; }

/* ===================================================================
   KONTENT
   =================================================================== */
.ut-main{ padding-top:var(--ut-nav-h); min-height:70vh; display:flex; flex-direction:column; }

/* ===================================================================
   KINO KARTOCHKASI (v3 — neon + glass + 3D)
   =================================================================== */
@property --ut-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.ut-card{ position:relative; width:100%; min-width:0; perspective:900px; } /* min-width:0 — to'rda ustunlar teng bo'lsin */
.ut-card__link{ display:block; text-decoration:none; color:inherit; outline:0; }

/* Ramka: 3D egilish shu yerda */
.ut-card__frame{
    --rx:0deg; --ry:0deg; --mx:50%; --my:30%;
    position:relative; border-radius:18px; padding:1.5px;
    background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 40%, rgba(255,255,255,.08));
    transform:rotateX(var(--rx)) rotateY(var(--ry));
    transform-style:preserve-3d;
    transition:transform .5s var(--ut-ease), box-shadow .45s var(--ut-ease);
    box-shadow:0 12px 30px -14px rgba(0,0,0,.9);
}
/* Aylanuvchi neon ramka */
.ut-card__frame::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; z-index:4;
    background:conic-gradient(from var(--ut-ang), var(--ut-c1), var(--ut-c2), var(--ut-c3), #ec4899, var(--ut-c1));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity:0; transition:opacity .35s;
}
/* Ostidagi rangli nur (bloom) */
.ut-card__frame::after{
    content:""; position:absolute; inset:14% 8% -6%; z-index:-1; border-radius:24px; pointer-events:none;
    background:conic-gradient(from var(--ut-ang), var(--ut-c1), var(--ut-c2), var(--ut-c3), #ec4899, var(--ut-c1));
    filter:blur(26px); opacity:0; transition:opacity .45s;
}

.ut-card__poster{
    position:relative; aspect-ratio:2/3; border-radius:16.5px; overflow:hidden; background:#0f1220;
    transform:translateZ(0);
}
.ut-card__poster img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .8s var(--ut-ease), filter .5s;
}
.ut-card__shade{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(0deg, rgba(6,7,12,.9) 0%, rgba(6,7,12,.45) 32%, rgba(6,7,12,0) 58%),
               linear-gradient(180deg, rgba(6,7,12,.45) 0%, rgba(6,7,12,0) 22%);
    transition:background .4s;
}
/* Sichqoncha ortidan yuruvchi yorug'lik */
.ut-card__glare{
    position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:soft-light;
    background:radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
    opacity:0; transition:opacity .35s;
}

/* Belgilar */
.ut-card__top{
    position:absolute; z-index:3; top:9px; left:9px; right:9px;
    display:flex; align-items:center; justify-content:space-between; pointer-events:none;
}
.ut-card__badge{
    display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:999px;
    font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#fff;
    background:rgba(10,12,22,.5); border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.ut-card__badge svg{ width:12px; height:12px; }
.ut-card__badge--new{
    background:var(--ut-grad-wide); background-size:200% 100%; border-color:rgba(255,255,255,.22);
    box-shadow:0 0 14px rgba(79,124,255,.75), inset 0 1px 0 rgba(255,255,255,.3);
    animation:utBadgeFlow 4s linear infinite;
}
@keyframes utBadgeFlow{ to{ background-position:200% 0; } }
.ut-card__year{
    height:24px; padding:0 9px; display:inline-grid; place-items:center; border-radius:999px;
    font-size:11px; font-weight:800; letter-spacing:.3px; color:#fff;
    background:rgba(10,12,22,.5); border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

/* Neon play */
.ut-card__play{
    position:absolute; z-index:3; left:50%; top:44%; width:58px; height:58px; margin:-29px 0 0 -29px;
    display:grid; place-items:center; border-radius:50%; color:#fff;
    background:var(--ut-grad);
    box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 8px 26px -4px rgba(79,124,255,.9), 0 0 34px rgba(168,85,247,.55);
    opacity:0; transform:scale(.5) translateZ(30px);
    transition:opacity .3s, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.ut-card__play svg{ position:relative; width:22px; height:22px; margin-left:3px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.ut-card__ripple, .ut-card__ripple::after{
    position:absolute; inset:0; border-radius:50%; border:2px solid rgba(130,170,255,.7); opacity:0;
}
.ut-card__ripple::after{ content:""; inset:-2px; }

/* Pastki qism: rasmga singib ketadigan shisha (chegarasiz, progressiv blur) */
.ut-card__panel{
    position:absolute; z-index:3; left:0; right:0; bottom:0;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:46px 12px 14px; text-align:center;
    background:linear-gradient(0deg, rgba(6,7,12,.88) 0%, rgba(6,7,12,.55) 45%, rgba(6,7,12,0) 100%);
    backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
    -webkit-mask-image:linear-gradient(0deg, #000 58%, transparent 100%);
            mask-image:linear-gradient(0deg, #000 58%, transparent 100%);
    pointer-events:none;
}
.ut-card__title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    max-width:100%; margin:0; font-size:14px; font-weight:800; line-height:1.28; letter-spacing:-.005em;
    color:#fff; word-break:break-word;
    text-shadow:0 2px 12px rgba(0,0,0,.85), 0 0 1px rgba(0,0,0,.6);
    transition:transform .4s var(--ut-ease);
}
.ut-card__sub{
    display:inline-flex; align-items:center; gap:5px;
    font-size:11.5px; font-weight:700; letter-spacing:.3px; color:rgba(220,228,255,.72);
    text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.ut-card__sub svg{ width:12px; height:12px; color:var(--ut-c1); filter:drop-shadow(0 0 4px rgba(34,211,238,.7)); }
.ut-card__sub::before, .ut-card__sub::after{ /* yon tomondagi nozik chiziqlar */
    content:""; width:14px; height:1px; background:linear-gradient(90deg, transparent, rgba(165,180,255,.6));
}
.ut-card__sub::after{ transform:scaleX(-1); }

/* ===== HOVER ===== */
@media (hover: hover){
    .ut-card__link:hover .ut-card__frame{
        box-shadow:0 26px 50px -18px rgba(79,124,255,.6), 0 0 0 1px rgba(255,255,255,.06);
    }
    .ut-card__link:hover .ut-card__frame::before{ opacity:1; animation:utSpin 3.5s linear infinite; }
    .ut-card__link:hover .ut-card__frame::after{ opacity:.55; animation:utSpin 3.5s linear infinite; }
    .ut-card__link:hover .ut-card__poster img{ transform:scale(1.09); filter:saturate(1.15) brightness(.78); }
    .ut-card__link:hover .ut-card__shade{
        background:linear-gradient(0deg, rgba(6,7,12,.95) 0%, rgba(6,7,12,.45) 40%, rgba(6,7,12,.05) 70%),
                   radial-gradient(80% 60% at 50% 100%, rgba(79,124,255,.35), transparent 70%);
    }
    .ut-card__link:hover .ut-card__glare{ opacity:1; }
    .ut-card__link:hover .ut-card__play{ opacity:1; transform:scale(1) translateZ(30px); }
    .ut-card__link:hover .ut-card__ripple{ animation:utRipple 1.8s ease-out infinite; }
    .ut-card__link:hover .ut-card__ripple::after{ animation:utRipple 1.8s ease-out .6s infinite; }
    .ut-card__link:hover .ut-card__title{ transform:translateY(-2px); text-shadow:0 2px 12px rgba(0,0,0,.85), 0 0 18px rgba(99,140,255,.9); }
}
.ut-card__link:focus-visible .ut-card__frame::before{ opacity:1; }
.ut-card__link:active .ut-card__frame{ transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(.97); }

@keyframes utSpin{ to{ --ut-ang:360deg; } }
@keyframes utRipple{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.9); opacity:0; } }

/* Kichik ekran */
@media (max-width: 520px){
    .ut-card__frame{ border-radius:15px; }
    .ut-card__poster{ border-radius:14px; }
    .ut-card__title{ font-size:12.5px; }
    .ut-card__panel{ padding:38px 8px 10px; gap:4px; }
    .ut-card__sub{ font-size:10.5px; }
    .ut-card__year, .ut-card__badge{ height:21px; padding:0 7px; font-size:10px; }
}

/* Ro'yxat sahifalari: teng ustunlar */
body.ut-site .grid--catalog{ align-items:start; }
body.ut-site .grid--catalog > *{ min-width:0; }
body.ut-site .ut-browse__grid{ grid-template-columns:repeat(auto-fill, minmax(min(180px, 100%), 1fr)) !important; gap:20px 16px !important; }
@media (max-width: 576px){
    body.ut-site .ut-browse__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:14px 10px !important; }
}

/* ===================================================================
   QATORLAR (bosh sahifa)
   =================================================================== */
.ut-home{ width:100%; flex-shrink:0; align-self:stretch; padding-bottom:40px; }
.ut-row{ position:relative; margin-top:46px; }
.ut-row__head{
    max-width:1680px; margin:0 auto 16px; padding:0 var(--ut-gutter);
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ut-row__title{ margin:0; display:flex; align-items:center; gap:12px; font-size:clamp(1.15rem, 1.6vw, 1.45rem); font-weight:800; letter-spacing:-.01em; }
.ut-row__title::before{ content:""; width:4px; height:22px; border-radius:4px; background:linear-gradient(var(--ut-c1), var(--ut-c3)); box-shadow:0 0 12px rgba(79,124,255,.8); }
.ut-row__title a{ text-decoration:none; color:#fff !important; display:inline-flex; align-items:center; gap:6px; transition:color .25s; }
.ut-row__title a svg{ width:20px; height:20px; opacity:.55; transition:transform .25s var(--ut-ease), opacity .25s, color .25s; }
.ut-row__title a:hover svg{ transform:translateX(4px); opacity:1; color:var(--ut-c1); }
.ut-row__tools{ display:flex; align-items:center; gap:8px; }
.ut-row__more{
    display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:999px;
    font-size:13px; font-weight:700; color:#c3c9d6 !important; text-decoration:none; white-space:nowrap;
    background:var(--ut-glass); border:1px solid var(--ut-glass-line); box-shadow:var(--ut-hi);
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); transition:.25s;
}
.ut-row__more:hover{ color:#fff !important; border-color:rgba(130,160,255,.55); box-shadow:var(--ut-hi), 0 0 18px rgba(79,124,255,.3); }
.ut-row .splide__track{ padding:14px var(--ut-gutter) 26px !important; }
.ut-row .splide__arrows{ display:flex; gap:6px; }
.ut-row .splide__arrow,
body.ut-site .ut-arrows .splide__arrow{
    position:static; transform:none; opacity:1; width:36px; height:36px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer;
    background:var(--ut-glass); border:1px solid var(--ut-glass-line); box-shadow:var(--ut-hi);
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); transition:.25s;
}
.ut-row .splide__arrow:hover,
body.ut-site .ut-arrows .splide__arrow:hover{ background:var(--ut-grad); border-color:transparent; box-shadow:var(--ut-glow-sm); }
.ut-row .splide__arrow:disabled,
body.ut-site .ut-arrows .splide__arrow:disabled{ opacity:.3; background:var(--ut-glass); box-shadow:none; }
.ut-row .splide__arrow svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2.2; transform:none; }

/* TV kanallar */
.ut-tv{
    position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
    border-radius:16px; overflow:hidden; background:var(--ut-glass); border:1px solid var(--ut-glass-line);
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); box-shadow:var(--ut-hi);
    transition:transform .35s var(--ut-ease), border-color .3s, box-shadow .35s;
}
.ut-tv:hover{ transform:translateY(-4px); border-color:rgba(130,160,255,.6); box-shadow:var(--ut-hi), 0 16px 36px -12px rgba(79,124,255,.5), 0 0 28px rgba(124,92,255,.3); }
.ut-tv__logo{ aspect-ratio:16/10; display:grid; place-items:center; padding:18px; background:radial-gradient(circle at 50% 40%, rgba(79,124,255,.12), rgba(10,12,20,.9) 70%); }
.ut-tv__logo img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .4s var(--ut-ease); }
.ut-tv:hover .ut-tv__logo img{ transform:scale(1.06); }
.ut-tv__name{ padding:10px 12px; font-size:13.5px; font-weight:700; color:#e6e9f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ut-tv__q{ position:absolute; top:9px; right:9px; padding:3px 8px; border-radius:999px; font-size:10px; font-weight:800; color:#04130a; background:#4ade80; box-shadow:0 0 12px rgba(74,222,128,.6); }
.ut-tv__live{
    position:absolute; top:9px; left:9px; display:inline-flex; align-items:center; gap:5px; z-index:1;
    padding:3px 9px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.6px; color:#fff;
    background:linear-gradient(90deg, #ff3d6e, #ff6a3d); box-shadow:0 0 14px rgba(255,61,110,.7);
}
.ut-tv__live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:utLive 1.4s infinite; }
@keyframes utLive{ 50%{ opacity:.25; } }

/* ===================================================================
   HERO (bosh sahifa slayderi) — qayta bo'yash
   =================================================================== */
body.ut-site .ut-hero{ --h-accent:var(--ut-c2); --h-accent-2:var(--ut-c3); background:var(--ut-bg); }
body.ut-site .ut-hero__shade{
    background:
        linear-gradient(90deg, rgba(6,7,12,.97) 0%, rgba(6,7,12,.78) 30%, rgba(6,7,12,.2) 62%, rgba(6,7,12,0) 80%),
        linear-gradient(0deg, rgba(6,7,12,.98) 0%, rgba(6,7,12,.35) 32%, rgba(6,7,12,0) 55%),
        radial-gradient(80% 70% at 0% 100%, rgba(79,124,255,.22), transparent 60%),
        radial-gradient(60% 60% at 30% 100%, rgba(168,85,247,.14), transparent 60%);
}
body.ut-site .ut-hero__tag{
    background:var(--ut-glass); border:1px solid var(--ut-glass-line); color:#e6e9f0;
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); box-shadow:var(--ut-hi);
}
body.ut-site .ut-hero__tag--new{ background:var(--ut-grad); border-color:transparent; box-shadow:0 0 16px rgba(79,124,255,.7); }
body.ut-site .ut-hero__tag--uz{ background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.35); color:#a5f3fc; }
body.ut-site .ut-hero__btn{ height:54px; padding:0 30px; font-size:15.5px; }
body.ut-site .ut-hero__btn--play{ animation:utPulse 3.2s ease-in-out infinite; }
body.ut-site .ut-hero__btn--play:hover{ animation:none; }
@keyframes utPulse{ 50%{ box-shadow:var(--ut-glow-lg); } }
body.ut-site .ut-hero__progress span{ background:var(--ut-grad); box-shadow:0 0 10px rgba(79,124,255,.8); }
body.ut-site .ut-hero__arrow{
    border-radius:50%; background:var(--ut-glass); border:1px solid var(--ut-glass-line);
    box-shadow:var(--ut-hi); transition:.25s;
}
body.ut-site .ut-hero__arrow:hover{ background:var(--ut-grad); border-color:transparent; box-shadow:var(--ut-glow-sm); }
body.ut-site .ut-hero__thumb{ border-radius:12px; }
body.ut-site .ut-hero__thumb.is-active{ border-color:var(--ut-c2) !important; box-shadow:0 0 0 1px var(--ut-c1), 0 10px 26px -6px rgba(79,124,255,.8), 0 0 22px rgba(168,85,247,.45); }

/* ===================================================================
   KINO / QISM SAHIFASI — qayta bo'yash
   =================================================================== */
body.ut-site .ut-watch{ --ut-accent:var(--ut-c2); --ut-accent-2:var(--ut-c3); }
body.ut-site .ut-player{ box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px -10px rgba(79,124,255,.25); }
body.ut-site .art-video-player{ --art-theme:#5b7cff !important; }
body.ut-site .ut-title{ letter-spacing:-.02em; }
body.ut-site .ut-chip{
    border-radius:999px; background:var(--ut-glass); border:1px solid var(--ut-glass-line); color:#dde2ec;
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); box-shadow:var(--ut-hi);
}
body.ut-site a.ut-chip:hover{ border-color:rgba(130,160,255,.55); color:#fff; box-shadow:var(--ut-hi), 0 0 16px rgba(79,124,255,.3); }
body.ut-site .ut-chip--accent{ background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.35); color:#a5f3fc; }
body.ut-site .ut-chip--hd{ background:rgba(250,204,21,.1); border-color:rgba(250,204,21,.35); color:#fde68a; }
body.ut-site .ut-info{
    background:var(--ut-glass); border:1px solid var(--ut-glass-line);
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); box-shadow:var(--ut-hi);
}
body.ut-site .ut-more, body.ut-site .ut-meta dd a{ color:#8fb2ff; }
body.ut-site .ut-section__title::before{ background:linear-gradient(var(--ut-c1), var(--ut-c3)); box-shadow:0 0 12px rgba(79,124,255,.8); }
body.ut-site .ut-ep{
    border-radius:16px; background:var(--ut-glass); border:1px solid var(--ut-glass-line);
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); box-shadow:var(--ut-hi);
    transition:transform .25s var(--ut-ease), border-color .25s, box-shadow .3s, background .25s;
}
body.ut-site .ut-ep:hover{ background:var(--ut-grad-soft); border-color:rgba(130,160,255,.55); box-shadow:var(--ut-hi), 0 0 20px rgba(79,124,255,.3); transform:translateY(-3px); }
body.ut-site .ut-ep__num{ border-radius:11px; background:rgba(255,255,255,.08); }
body.ut-site .ut-ep.is-active{ background:var(--ut-grad) !important; border-color:transparent; box-shadow:var(--ut-glow); }
body.ut-site .ut-ep.is-active .ut-ep__num{ background:rgba(255,255,255,.25); }
body.ut-site .ut-next{ background:var(--ut-glass-strong); border-color:var(--ut-glass-line); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
body.ut-site .ut-ad__skip.ready{ background:var(--ut-grad); border-color:transparent; box-shadow:var(--ut-glow-sm); }
body.ut-site .ut-crumbs a:hover{ color:#fff; }

/* ===================================================================
   KATEGORIYA / YIL / DAVLAT SAHIFALARI — qayta bo'yash
   =================================================================== */
body.ut-site .ut-browse__glow{
    background:radial-gradient(60% 100% at 15% 0%, rgba(34,211,238,.14), transparent 70%),
               radial-gradient(50% 90% at 90% 0%, rgba(168,85,247,.14), transparent 70%);
}
body.ut-site .ut-browse__chip{
    border-radius:999px; background:var(--ut-glass); border:1px solid var(--ut-glass-line); color:#d6dbe6 !important;
    box-shadow:var(--ut-hi); transition:.25s;
}
body.ut-site .ut-browse__chip:hover{ border-color:rgba(130,160,255,.55); color:#fff !important; box-shadow:var(--ut-hi), 0 0 16px rgba(79,124,255,.3); }
body.ut-site .ut-browse__chip.is-active{ background:var(--ut-grad); border-color:transparent; box-shadow:var(--ut-glow-sm); color:#fff !important; }
body.ut-site .ut-browse__about{ background:var(--ut-glass); border-color:var(--ut-glass-line); backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur); }
body.ut-site .ut-browse__about button{ color:#8fb2ff; }

/* Sahifalash (Bootstrap va custom) */
body.ut-site .pagination{ gap:6px; flex-wrap:wrap; justify-content:center; }
body.ut-site .page-link{
    min-width:42px; height:42px; display:grid; place-items:center; border-radius:50% !important;
    background:var(--ut-glass); border:1px solid var(--ut-glass-line); color:#d6dbe6; font-weight:700; box-shadow:var(--ut-hi); transition:.25s;
}
body.ut-site .page-link:hover{ color:#fff; border-color:rgba(130,160,255,.55); background:var(--ut-glass-2); box-shadow:var(--ut-hi), 0 0 16px rgba(79,124,255,.3); }
body.ut-site .page-item.active .page-link{ background:var(--ut-grad); border-color:transparent; color:#fff; box-shadow:var(--ut-glow-sm); }
body.ut-site .page-item.disabled .page-link{ opacity:.35; box-shadow:none; }

/* ===================================================================
   FOOTER
   =================================================================== */
.ut-footer{ position:relative; margin-top:auto; background:linear-gradient(180deg, rgba(11,13,22,.4), rgba(11,13,22,.95)); }
.ut-footer::before{
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(34,211,238,.5) 25%, rgba(79,124,255,.6) 50%, rgba(168,85,247,.5) 75%, transparent);
}
.ut-footer__inner{
    max-width:1680px; margin:0 auto; padding:52px var(--ut-gutter) 28px;
    display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px;
}
.ut-footer__brand img{ height:32px; width:auto; }
.ut-footer__brand p{ margin:14px 0 0; max-width:340px; color:var(--ut-muted); font-size:14px; line-height:1.7; }
.ut-footer h3{ margin:0 0 14px; font-size:12.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; background:var(--ut-grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.ut-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ut-footer ul a{ position:relative; color:var(--ut-muted) !important; font-size:14px; font-weight:600; text-decoration:none; transition:color .2s, padding .25s var(--ut-ease); }
.ut-footer ul a:hover{ color:#fff !important; padding-left:6px; }
.ut-social{ display:flex; flex-wrap:wrap; gap:8px; }
.ut-social a{
    width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
    background:var(--ut-glass); border:1px solid var(--ut-glass-line); color:#e6e9f0 !important; box-shadow:var(--ut-hi);
    backdrop-filter:var(--ut-blur); -webkit-backdrop-filter:var(--ut-blur);
    transition:background .25s, border-color .25s, box-shadow .3s, transform .25s var(--ut-ease);
}
.ut-social a:hover{ background:var(--ut-grad); border-color:transparent; color:#fff !important; box-shadow:var(--ut-glow-sm); transform:translateY(-3px); }
.ut-social svg{ width:19px; height:19px; }
.ut-footer__bottom{
    max-width:1680px; margin:0 auto; padding:18px var(--ut-gutter) 24px; border-top:1px solid rgba(255,255,255,.06);
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--ut-dim); font-size:13px;
}

/* ===================================================================
   MOBIL PASTKI MENYU
   =================================================================== */
.ut-tabbar{
    position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:1000; display:none;
    height:64px; border-radius:22px;
    background:rgba(12,14,24,.72); border:1px solid var(--ut-glass-line);
    backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
    box-shadow:0 18px 40px -10px rgba(0,0,0,.8), var(--ut-hi);
}
.ut-tabbar a, .ut-tabbar button{
    position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    background:none; border:0; cursor:pointer; text-decoration:none;
    color:#8a93a6 !important; font:700 10.5px/1 'Manrope', sans-serif; transition:color .25s;
}
.ut-tabbar svg{ width:22px; height:22px; transition:transform .25s var(--ut-ease), filter .25s; }
.ut-tabbar a:active svg, .ut-tabbar button:active svg{ transform:scale(.88); }
.ut-tabbar .is-active{ color:#fff !important; }
.ut-tabbar .is-active svg{ stroke:url(#utGrad); filter:drop-shadow(0 0 6px rgba(79,124,255,.9)); }
.ut-tabbar .is-active::after{
    content:""; position:absolute; top:6px; width:22px; height:3px; border-radius:3px;
    background:var(--ut-grad); box-shadow:0 0 10px rgba(79,124,255,.9);
}

/* ===================================================================
   MOSLASHUVCHAN
   =================================================================== */
@media (max-width: 1199px){
    .ut-search-btn span, .ut-search-btn kbd{ display:none; }
    .ut-search-btn{ padding:0 11px; }
}
@media (max-width: 991px){
    :root{ --ut-nav-h: 58px; }
    .ut-links{ display:none; }
    .ut-tabbar{ display:flex; }
    body.ut-site{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
    .ut-logo img{ height:28px; }
    .ut-topbar__inner{ gap:12px; }
    .ut-lang .dropdown-toggle span{ display:none; }
    .ut-footer__inner{ grid-template-columns:1fr 1fr; }
    .ut-footer__brand{ grid-column:1 / -1; }
    body.ut-site .ut-hero__btn{ height:50px; padding:0 20px; }
}
@media (max-width: 520px){
    .ut-row{ margin-top:34px; }
    .ut-row .splide__arrows{ display:none; }
}
@media (prefers-reduced-motion: reduce){
    body.ut-site *, body.ut-site *::before, body.ut-site *::after{ animation:none !important; transition:none !important; }
}
/* === PERF: kartalar yengil (telefonlar uchun) === */
.ut-card__badge, .ut-card__year, .ut-card__panel{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.ut-card__badge, .ut-card__year{ background:rgba(10,12,22,.78); }
.ut-card__badge--new{ background:var(--ut-grad-wide); background-size:200% 100%; animation:none; }
.ut-card__link:hover .ut-card__badge--new{ animation:utBadgeFlow 4s linear infinite; }
.ut-card__panel{ background:linear-gradient(0deg, rgba(6,7,12,.96) 0%, rgba(6,7,12,.72) 45%, rgba(6,7,12,0) 100%); }
.ut-row{ content-visibility:auto; contain-intrinsic-size:auto 420px; }