/* ═══════════════════════════════════════════════════════════════
   KdramaTV — Netflix Style v4
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/* ── Variables ─────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:         #0f0f0f;
  --bg2:        #181818;
  --bg3:        #222;
  --card:       #161616;
  --accent:     #e50914;
  --accent-h:   #ff1a25;
  --text:       #f0f0f0;
  --text2:      #b0b0b0;
  --text3:      #707070;
  --border:     #2a2a2a;
  --header-bg:  rgba(15,15,15,.97);
  --shadow:     0 8px 32px rgba(0,0,0,.8);
  --radius:     10px;
}

[data-theme="ocean"] {
  --bg:         #080d1a;
  --bg2:        #0e1525;
  --bg3:        #162030;
  --card:       #0e1525;
  --accent:     #4f91ff;
  --accent-h:   #70a8ff;
  --text:       #dce8ff;
  --text2:      #8aa4cc;
  --text3:      #4a6080;
  --border:     #1a2a40;
  --header-bg:  rgba(8,13,26,.97);
  --shadow:     0 4px 24px rgba(0,0,0,.8);
  --radius:     10px;
}

[data-theme="light"] {
  --bg:         #f2f2f2;
  --bg2:        #ffffff;
  --bg3:        #e8e8e8;
  --card:       #ffffff;
  --accent:     #e50914;
  --accent-h:   #f40612;
  --text:       #111;
  --text2:      #555;
  --text3:      #999;
  --border:     #ddd;
  --header-bg:  rgba(242,242,242,.97);
  --shadow:     0 4px 16px rgba(0,0,0,.1);
  --radius:     10px;
}

/* Tema o'tishi */
.theme-switching,
.theme-switching * {
  transition:
    background-color .25s ease,
    color .22s ease,
    border-color .22s ease !important;
}

/* ── Base ───────────────────────────────────────────────────────── */
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.6;
  overflow-x:hidden;
}
body>*{position:relative;z-index:1}
.container{max-width:1400px;margin:0 auto;padding:0 20px}

/* ═══════════════════════════════════════════════════════
   HEADER — Netflix style
   ═══════════════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--header-bg);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.header-inner{
  display:flex;align-items:center;gap:20px;
  height:68px;
}

/* Logo */
.site-logo{
  display:flex;align-items:center;
  font-size:24px;font-weight:900;
  letter-spacing:-1.5px;flex-shrink:0;
  transition:opacity .2s;
}
.site-logo:hover{opacity:.85}
.logo-k{
  color:#e50914;
  font-style:italic;
}
.logo-drama{color:#fff;font-weight:800}
.logo-tv{
  background:#e50914;
  color:#fff;
  padding:2px 5px;border-radius:3px;
  font-size:.5em;vertical-align:super;
  font-weight:900;letter-spacing:.8px;
  text-transform:uppercase;
  -webkit-text-fill-color:#fff;
}
[data-theme="light"] .logo-drama{color:#111}

/* Nav */
.main-nav{display:flex;align-items:center;gap:2px}
.main-nav>a{
  padding:6px 14px;border-radius:4px;
  color:rgba(255,255,255,.65);font-size:13.5px;
  font-weight:500;
  transition:color .18s,background .18s;
}
.main-nav>a:hover{color:#fff;background:rgba(255,255,255,.07)}
[data-theme="light"] .main-nav>a{color:var(--text2)}
[data-theme="light"] .main-nav>a:hover{color:var(--text);background:var(--bg3)}

/* Nav dropdown */
.nav-dropdown-wrap{position:relative}
.nav-dropdown-toggle{
  padding:6px 14px;border-radius:4px;
  color:rgba(255,255,255,.65);font-size:13.5px;
  font-weight:500;
  transition:color .18s,background .18s;
  cursor:pointer;
  display:flex;align-items:center;gap:5px;
  user-select:none;
}
.nav-dropdown-toggle:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:210px;
  background:#1f1f1f;
  border:1px solid #333;
  border-radius:8px;padding:6px;
  box-shadow:0 16px 48px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:300;
}
.nav-dropdown-wrap:hover .nav-dropdown{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:6px;
  color:var(--text2);font-size:13px;
  transition:.18s;
}
.nav-dropdown-item:hover{background:rgba(255,255,255,.08);color:#fff}
.ndi-icon{font-size:16px;flex-shrink:0}

/* Search */
.header-search{
  margin-left:auto;
  display:flex;align-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.header-search:focus-within{
  border-color:rgba(229,9,20,.5);
  box-shadow:0 0 0 2px rgba(229,9,20,.12);
}
.header-search input{
  background:none;border:none;
  padding:9px 16px;color:var(--text);
  font-size:13px;outline:none;
  width:220px;
}
.header-search input::placeholder{color:rgba(255,255,255,.3)}
.header-search button{
  background:none;border:none;
  padding:9px 14px;color:rgba(255,255,255,.45);
  font-size:16px;
  transition:color .2s;
}
.header-search button:hover{color:var(--accent)}
[data-theme="light"] .header-search{background:var(--bg3);border-color:var(--border)}
[data-theme="light"] .header-search input{color:var(--text)}
[data-theme="light"] .header-search input::placeholder{color:var(--text3)}
[data-theme="light"] .header-search button{color:var(--text3)}

/* Admin button */
.btn-admin{
  background:var(--accent);color:#fff;
  padding:7px 18px;border-radius:4px;
  font-size:13px;font-weight:700;
  border:none;
  transition:background .2s,transform .2s;
  flex-shrink:0;
}
.btn-admin:hover{background:var(--accent-h);transform:translateY(-1px)}

/* Theme switcher */
.theme-switcher{display:flex;gap:6px;align-items:center;flex-shrink:0}
.theme-btn{
  background:none;border:2px solid transparent;
  border-radius:50%;padding:2px;cursor:pointer;
  transition:border-color .2s,transform .2s;
  display:flex;align-items:center;justify-content:center;
}
.theme-btn:hover{transform:scale(1.15)}
.theme-btn.active{border-color:rgba(255,255,255,.6)}
[data-theme="light"] .theme-btn.active{border-color:#555}
.theme-dot{width:13px;height:13px;border-radius:50%;display:block}

/* Hamburger */
.hamburger{
  display:none;background:none;border:none;
  cursor:pointer;padding:8px;
  color:var(--text);font-size:22px;line-height:1;
  flex-shrink:0;
}

/* Mobile menu */
.mobile-menu{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.8);z-index:300;
  backdrop-filter:blur(4px);
}
.mobile-menu.open{display:block}
.mobile-menu-panel{
  position:absolute;top:0;left:0;
  width:290px;height:100%;
  background:#1a1a1a;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:6px 0 30px rgba(0,0,0,.6);
}
.mobile-menu.open .mobile-menu-panel{transform:translateX(0)}
.mobile-menu-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mobile-menu-close{
  background:none;border:none;
  color:var(--text2);font-size:20px;cursor:pointer;
  padding:4px 8px;border-radius:4px;
  transition:.2s;
}
.mobile-menu-close:hover{color:#fff;background:rgba(255,255,255,.08)}
.mobile-search{
  display:flex;margin:14px 18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;overflow:hidden;
}
.mobile-search input{
  flex:1;background:none;border:none;
  padding:10px 14px;color:var(--text);
  font-size:14px;outline:none;
}
.mobile-search button{
  background:none;border:none;
  padding:10px 14px;color:var(--text2);
  cursor:pointer;font-size:16px;
}
.mobile-nav{display:flex;flex-direction:column;padding:6px 0 24px}
.mobile-nav a{
  padding:13px 22px;color:var(--text2);font-size:15px;
  transition:.18s;border-left:3px solid transparent;
}
.mobile-nav a:hover{color:#fff;background:rgba(255,255,255,.05);border-left-color:var(--accent)}
.mobile-nav-section{
  padding:12px 22px 4px;
  font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.8px;
  color:var(--text3);
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:6px;
}
.mobile-nav-cat{
  padding:11px 20px 11px 30px !important;
  border-left:3px solid var(--cat-c,var(--accent)) !important;
  color:var(--cat-c,var(--text2)) !important;
}
.mobile-nav-cat:hover{background:rgba(255,255,255,.05) !important;color:#fff !important}

/* Main content */
.main-content{min-height:70vh;padding-bottom:40px}

/* ═══════════════════════════════════════════════════════
   HERO SLIDER — Netflix big banner
   ═══════════════════════════════════════════════════════ */
.hero-slider{
  position:relative;
  overflow:hidden;
  background:#000;
  margin-bottom:0;
}

.hero-slide{
  display:none;
  position:relative;
  min-height:620px;
  animation:none;
}
.hero-slide.active{
  display:block;
  animation:slideIn .6s ease;
}
@keyframes slideIn{
  from{opacity:0;transform:scale(1.03)}
  to{opacity:1;transform:scale(1)}
}

/* Background image */
.hero-slide-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 20%;
  filter:brightness(.4) saturate(1.1);
  transform:scale(1.05);
  transition:transform 10s ease;
}
.hero-slide.active .hero-slide-bg{transform:scale(1)}

/* Gradient overlay — Netflix style (sol+pastdan) */
.hero-slide-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(15,15,15,.98) 0%, rgba(15,15,15,.7) 40%, rgba(15,15,15,.2) 70%, transparent 100%),
    linear-gradient(to top, rgba(15,15,15,.98) 0%, rgba(15,15,15,.6) 20%, transparent 55%);
  z-index:1;
}

/* Inner content */
.hero-slide-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:50px;
  padding:90px 0 110px;
  min-height:620px;
}

/* Left: content */
.hero-slide-content{max-width:580px}

/* Badges */
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.hbadge{
  font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:3px;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.hbadge-type{background:var(--accent);color:#fff}
.hbadge-live{background:rgba(229,9,20,.18);color:#ff4757;border:1px solid rgba(229,9,20,.4)}
.hbadge-done{background:rgba(46,213,115,.15);color:#2ed573;border:1px solid rgba(46,213,115,.3)}
.hbadge-rating{background:rgba(245,197,24,.15);color:#f5c518;border:1px solid rgba(245,197,24,.3)}
.hbadge-year{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.15)}

/* Title */
.hero-title{
  font-size:clamp(30px,4.5vw,56px);
  font-weight:900;
  color:#fff;
  line-height:1.05;
  margin-bottom:8px;
  letter-spacing:-.8px;
  text-shadow:0 3px 16px rgba(0,0,0,.5);
}
.hero-title-kr{
  font-size:15px;color:rgba(255,255,255,.55);
  margin-bottom:14px;
}

/* Meta */
.hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-size:13px;color:rgba(255,255,255,.6);
  margin-bottom:16px;
}
.hero-meta span{display:flex;align-items:center;gap:5px}

/* Description */
.hero-desc{
  font-size:14px;
  color:rgba(255,255,255,.65);
  line-height:1.75;
  margin-bottom:28px;
  max-width:500px;
}

/* Buttons */
.hero-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

.hero-btn-play{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:#000;
  padding:16px 36px;
  border-radius:8px;
  font-size:16px;font-weight:800;
  border:none;cursor:pointer;
  transition:background .2s,transform .2s,box-shadow .2s;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(255,255,255,.15);
}
.hero-btn-play:hover{background:#e8e8e8;transform:scale(1.05);color:#000;box-shadow:0 8px 30px rgba(255,255,255,.2)}

.hero-btn-trailer{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(109,109,110,.7);color:#fff;
  padding:14px 26px;
  border-radius:4px;
  font-size:15px;font-weight:700;
  border:none;cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .2s;
}
.hero-btn-trailer:hover{background:rgba(109,109,110,.9)}

/* Hero da fav btn — inline (hero-btns ichida) */
.hero-btn-fav{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:rgba(109,109,110,.7);
  border:2px solid rgba(255,255,255,.35);
  color:#fff;font-size:16px;cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,transform .2s;
  flex-shrink:0;
}
.hero-btn-fav:hover{background:rgba(229,9,20,.4);border-color:rgba(229,9,20,.7);transform:scale(1.08)}
.hero-btn-fav.favorited{background:rgba(229,9,20,.35);border-color:var(--accent);color:var(--accent)}

/* Right: poster */
.hero-slide-poster-wrap{
  position:relative;
  flex-shrink:0;
  width:240px;
}
.hero-slide-poster-glow{
  position:absolute;inset:-30px;
  border-radius:50%;filter:blur(50px);opacity:.6;
}
.hero-slide-poster{
  width:100%;
  border-radius:12px;
  box-shadow:0 25px 70px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);
  display:block;
  position:relative;z-index:1;
  transition:transform .3s ease;
}
.hero-slide-poster:hover{transform:scale(1.03)}

/* Navigation arrows */
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:80px;
  background:rgba(20,20,20,.5);
  border:none;color:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:5;
  transition:background .2s,color .2s;
}
.hero-nav:hover{background:rgba(20,20,20,.8);color:#fff}
.hero-prev{left:0;border-radius:0 4px 4px 0}
.hero-next{right:0;border-radius:4px 0 0 4px}

/* Dots */
.hero-dots{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:5;
}
.hero-dot{
  width:10px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.3);border:none;cursor:pointer;
  transition:width .3s,background .3s;
}
.hero-dot.active{width:28px;background:#fff}

/* Progress bar */
.hero-progress{
  position:absolute;bottom:0;left:0;right:0;
  height:3px;background:rgba(255,255,255,.12);z-index:5;
}
.hero-progress-bar{
  height:100%;background:var(--accent);
  width:0;transition:width .1s linear;
}

/* Genre nav — sticky filter */
.genre-nav-wrap{
  position:sticky;top:68px;z-index:50;
  background:var(--bg);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.genre-nav-scroll{
  display:flex;gap:8px;
  overflow-x:auto;overflow-y:hidden;
  padding:12px 0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.genre-nav-scroll::-webkit-scrollbar{display:none}
.genre-pill{
  flex-shrink:0;
  padding:6px 18px;border-radius:20px;
  font-size:13px;font-weight:600;
  color:var(--text2);background:var(--bg3);
  border:1px solid transparent;
  white-space:nowrap;transition:.2s;
}
.genre-pill:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.genre-pill.active{background:var(--accent);color:#fff;border-color:transparent;font-weight:700}

/* ═══════════════════════════════════════════════════════
   HOMEPAGE SECTIONS
   ═══════════════════════════════════════════════════════ */

/* Animation on scroll */
.anim-hidden{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.anim-visible,.anim-show{opacity:1;transform:none}

.hp-section{padding:40px 0 0}
.hp-grid-section{padding:20px 0 40px}

/* Section header */
.hp-sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:22px;gap:16px;
}
.hp-sec-left{display:flex;flex-direction:column;gap:4px}
.hp-sec-badge{
  font-size:11px;font-weight:800;
  color:var(--accent);text-transform:uppercase;letter-spacing:1.2px;
}
.hp-sec-title{
  font-size:22px;font-weight:800;color:var(--text);
  letter-spacing:-.3px;
}
.hp-sec-sub{font-size:13px;color:var(--text3)}
.hp-sec-link{
  font-size:13px;color:var(--text2);font-weight:600;
  transition:.2s;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
}
.hp-sec-link:hover{color:var(--accent)}

/* Row section header */
.hp-row-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.hp-row-left{display:flex;align-items:center;gap:8px}
.hp-row-vbar{
  width:4px;height:22px;border-radius:2px;flex-shrink:0;
}
.hp-row-icon{font-size:18px;flex-shrink:0}
.hp-row-title{
  font-size:18px;font-weight:800;color:#fff;
  letter-spacing:-.2px;
}
.hp-row-count{
  font-size:12px;font-weight:600;
  padding:2px 10px;border-radius:12px;
  background:rgba(255,255,255,.07);
}
.hp-row-more{
  font-size:13px;font-weight:600;
  color:var(--text2);
  display:flex;align-items:center;gap:4px;
  transition:.2s;
  padding:6px 14px;border-radius:4px;
  border:1px solid rgba(255,255,255,.12);
}
.hp-row-more:hover{color:#fff;background:rgba(255,255,255,.07)}

/* Horizontal scroll row */
.hp-row-scroll{
  display:flex;gap:8px;
  overflow-x:auto;overflow-y:visible;
  padding-bottom:8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hp-row-scroll::-webkit-scrollbar{display:none}

/* HP Card */
.hp-card{
  flex-shrink:0;
  width:170px;
  scroll-snap-align:start;
  display:block;
  transition:transform .3s ease;
}
.hp-card:hover{transform:translateY(-4px)}
.hp-card-img{
  position:relative;
  aspect-ratio:2/3;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg2);
  transition:transform .3s cubic-bezier(.2,0,.2,1),box-shadow .3s;
}
.hp-card:hover .hp-card-img{transform:scale(1.04);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.hp-card-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Overlay on hover */
.hp-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,transparent 60%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:12px;
  opacity:0;transition:opacity .3s;
}
.hp-card:hover .hp-card-overlay{opacity:1}

.hco-top{display:flex;margin-bottom:auto;padding-top:2px}
.hco-badge{
  font-size:9px;font-weight:800;
  padding:2px 7px;border-radius:3px;
  text-transform:uppercase;letter-spacing:.4px;
}
.hco-badge.new{background:var(--accent);color:#fff}
.hco-badge.ongoing{background:rgba(255,165,2,.2);color:#ffa502;border:1px solid rgba(255,165,2,.4)}
.hco-badge.completed{background:rgba(46,213,115,.15);color:#2ed573}
.hco-bottom{display:flex;flex-direction:column;gap:5px}
.hco-meta{display:flex;gap:8px;font-size:10px;color:rgba(255,255,255,.65)}
.hco-play{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.88);color:#000;
  padding:5px 10px;border-radius:3px;
  font-size:10px;font-weight:800;
  width:fit-content;
}
.hco-next{font-size:9px;color:rgba(255,165,2,.9);font-weight:600}

/* Card badges */
.card-new-badge{
  position:absolute;top:6px;left:6px;
  background:var(--accent);color:#fff;
  font-size:9px;font-weight:800;
  padding:3px 8px;border-radius:3px;
  text-transform:uppercase;letter-spacing:.5px;
  z-index:3;
}
.card-eps{
  position:absolute;bottom:6px;right:6px;
  background:rgba(0,0,0,.75);color:rgba(255,255,255,.9);
  font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:3px;
  z-index:3;
}

/* Ongoing dot on poster */
.hp-ongoing-dot{
  position:absolute;top:8px;right:8px;
  width:9px;height:9px;border-radius:50%;
  background:#e50914;
  box-shadow:0 0 0 2px rgba(229,9,20,.4);
  animation:dot-pulse 1.5s infinite;
  z-index:3;
}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}

.hp-card-title{
  font-size:13px;font-weight:600;
  margin-top:8px;line-height:1.4;
  color:var(--text2);
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.hp-card:hover .hp-card-title{color:var(--text)}
.hp-card-year{font-size:11px;color:var(--text3);margin-top:3px}
.hp-card-next{font-size:10px;color:#ffa502;margin-top:2px;font-weight:600}

/* Top-10 */
.hp-top10-card{width:180px}
.hp-top10-rank{
  display:flex;align-items:center;margin-top:6px;
}
.top10-num{
  font-size:58px;font-weight:900;
  color:var(--bg3);line-height:1;
  -webkit-text-stroke:2px rgba(255,255,255,.15);
  letter-spacing:-3px;
}
.top10-num.top3{
  -webkit-text-stroke:2px rgba(229,9,20,.5);
  color:rgba(229,9,20,.1);
}

/* ── Catalog section ─────────────────────────────────────────── */
.hp-catalogs{padding-top:36px}
.cat-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}
.cat-big-card{
  position:relative;overflow:hidden;
  border-radius:12px;
  background:var(--bg2);
  border:1px solid rgba(255,255,255,.07);
  padding:26px 22px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  display:flex;flex-direction:column;gap:14px;
  min-height:150px;
}
.cat-big-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 50px rgba(0,0,0,.6);
  border-color:rgba(255,255,255,.18);
}
.cbc-glow{
  position:absolute;top:-40px;right:-40px;
  width:120px;height:120px;border-radius:50%;
  background:var(--cc,#e50914);opacity:.1;
  filter:blur(30px);
  transition:opacity .3s;
}
.cat-big-card:hover .cbc-glow{opacity:.2}
.cbc-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--cc,#e50914) 0%,transparent 70%);
  opacity:.05;
  transition:opacity .3s;
}
.cat-big-card:hover .cbc-bg{opacity:.1}
.cbc-icon-wrap{position:relative;z-index:1}
.cbc-icon{font-size:32px;line-height:1;display:block}
.cbc-body{position:relative;z-index:1;flex:1}
.cbc-name{
  font-size:16px;font-weight:800;color:#fff;
  margin-bottom:4px;
}
.cbc-desc{
  font-size:12px;color:var(--text3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.cbc-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;position:relative;z-index:1;
}
.cbc-count{font-size:12px;color:var(--cc,var(--accent));font-weight:700}
.cbc-arrow{
  font-size:12px;color:var(--text3);font-weight:600;
  display:flex;align-items:center;gap:4px;
  transition:color .2s;
}
.cat-big-card:hover .cbc-arrow{color:#fff}
.cbc-arr-icon{transition:transform .2s}
.cat-big-card:hover .cbc-arr-icon{transform:translateX(3px)}

/* Grid header */
.hp-grid-header{margin:0 0 20px}
.hp-grid-title{
  font-size:20px;font-weight:800;
  display:flex;align-items:center;gap:10px;
  color:var(--text);
}
.hgt-icon{font-size:20px}
.hgt-count{font-size:13px;font-weight:400;color:var(--text3)}

/* Genre wall */
.hp-genres-section{padding:40px 0 0}
.genre-wall{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
.gw-pill{
  padding:7px 20px;border-radius:20px;
  font-size:13px;font-weight:600;
  color:var(--text2);background:var(--bg2);
  border:1px solid var(--border);
  transition:.2s;
}
.gw-pill:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.gw-pill.active-all{background:var(--accent);color:#fff;border-color:transparent}

/* ═══════════════════════════════════════════════════════
   DRAMA GRID + CARD
   ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   DRAMA GRID + CARD
   ═══════════════════════════════════════════════════════ */
.drama-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:24px 16px;
}

.drama-card{
  display:block;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg2);
  transition:transform .3s cubic-bezier(.2,0,.2,1),box-shadow .3s;
  z-index:1;
}
.drama-card:hover{
  transform:translateY(-6px) scale(1.02);
  z-index:10;
  box-shadow:0 20px 50px rgba(0,0,0,.7),0 8px 20px rgba(0,0,0,.5);
}

/* ── Poster ── */
.card-poster{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--bg3);
  border-radius:var(--radius) var(--radius) 0 0;
}
.card-poster>img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,0,.2,1);
}
.drama-card:hover .card-poster>img{transform:scale(1.08)}

/* ── Poster ustidagi badge — faqat bitta (top-left) ── */
.card-type-badge{
  position:absolute;top:6px;left:6px;
  font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:3px;
  text-transform:uppercase;letter-spacing:.3px;
  z-index:3;line-height:1.4;
}
.ctb-serial {background:rgba(83,82,237,.9);color:#fff}
.ctb-film   {background:rgba(255,107,53,.9);color:#fff}
.ctb-anime  {background:rgba(255,71,87,.9);color:#fff}
.ctb-variety{background:rgba(46,213,115,.9);color:#fff}

/* YANGI badge — type badge o'rniga chiqadi */
.card-new-badge{
  position:absolute;top:6px;left:6px;
  background:var(--accent);color:#fff;
  font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:3px;
  text-transform:uppercase;letter-spacing:.4px;
  z-index:4;line-height:1.4;
}

/* Qismlar soni — faqat card-info da ko'rsatiladi (poster ustida yo'q) */
.card-eps{display:none}
.card-hd-badge{display:none}
.card-trailer-tag{display:none}
.card-status{display:none}

/* Fav btn — top right */
.card-poster .fav-btn,
.fav-btn{
  position:absolute !important;
  top:6px;right:6px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.55);
  border:1.5px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.8);
  font-size:13px;
  display:flex !important;align-items:center;justify-content:center;
  z-index:5;padding:0;line-height:1;
  transition:background .18s,border-color .18s,transform .18s;
  cursor:pointer;font-family:inherit;
  backdrop-filter:blur(4px);
  flex-shrink:0;
}
.card-poster .fav-btn:hover{
  color:#ff6b6b;
  background:rgba(229,9,20,.4);
  border-color:rgba(229,9,20,.7);
  transform:scale(1.1) !important;
}
.card-poster .fav-btn.favorited{
  color:var(--accent);
  background:rgba(229,9,20,.3);
  border-color:var(--accent);
}

/* ── Hover overlay — gradient + Ko'rish tugmasi ── */
.card-hover-overlay{
  position:absolute;
  bottom:0;left:0;right:0;
  height:60%;
  background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.6) 50%,transparent 100%);
  display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:12px;
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
  z-index:2;
}
.drama-card:hover .card-hover-overlay{
  opacity:1;
  pointer-events:auto;
}

/* Meta — reyting va yil */
.cho-top{display:none} /* overlap qilmaslik uchun olib tashlandi */
.cho-meta{
  display:flex;align-items:center;gap:6px;
  font-size:10px;color:rgba(255,255,255,.7);
  margin-bottom:5px;
}
.cho-star{color:#f5c518;font-weight:700}

/* Ko'rish + Treyler + Ulash tugmalari */
.cho-actions{
  display:flex;
  align-items:center;
  gap:5px;
}
.cho-play-btn{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:5px;
  background:#fff;color:#000;
  padding:8px 8px;border-radius:6px;
  font-size:12px;font-weight:800;
  cursor:pointer;
  transition:background .15s,transform .15s;
  white-space:nowrap;min-width:0;
  line-height:1;
}
.cho-play-btn:hover{background:#e8e8e8;transform:scale(1.02)}
.cho-trailer-btn,
.cho-share-btn{
  width:28px;height:28px;
  border-radius:4px;
  background:rgba(40,40,40,.85);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.85);
  cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s;
}
.cho-trailer-btn:hover{background:rgba(229,9,20,.7);color:#fff}
.cho-share-btn:hover{background:rgba(79,145,255,.5);color:#fff}

/* ── Card Info — poster ostida ── */
.card-info{
  padding:10px 12px 12px;
  background:var(--bg2);
}
.card-title{
  font-size:14px;font-weight:600;
  color:var(--text2);
  line-height:1.4;
  margin-bottom:5px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.drama-card:hover .card-title{color:#fff}
.card-meta{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text3);
  flex-wrap:wrap;
}
.cm-year{color:var(--text3)}
.cm-rating{color:#f5c518;font-weight:700}
.cm-views{color:var(--text3)}
.cm-trailer-dot{font-size:10px;color:var(--accent)}
.rating{color:#f5c518;font-weight:700}

/* Poster placeholder */
.poster-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:48px;
  background:linear-gradient(135deg,#1e1e2e,#16213e);
}
.poster-placeholder.large{aspect-ratio:2/3;font-size:80px}

/* Light tema */
[data-theme="light"] .card-info{background:var(--bg2)}
[data-theme="light"] .card-title{color:var(--text2)}
[data-theme="light"] .drama-card:hover .card-title{color:var(--text)}

/* Mobil */
@media(max-width:767px){
  .card-hover-overlay{display:none}
  .card-info{padding:7px 8px 8px}
  .card-title{font-size:12px}
  .card-meta{font-size:10px}
}

/* ═══ CARD PREVIEW POPUP — Netflix style ════════════════════ */

/* Trailer indicator dot on card (always visible) */
.drama-card[data-trailer] .card-poster::after{
  content:'';
  position:absolute;top:8px;left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  /* invisible — just placeholder for structure */
  pointer-events:none;
}

/* Small TREYLER badge — shows on hover */
.card-trailer-tag{
  position:absolute;bottom:36px;right:8px;
  background:rgba(229,9,20,.9);color:#fff;
  font-size:8px;font-weight:800;
  padding:2px 6px;border-radius:3px;
  letter-spacing:.5px;text-transform:uppercase;
  z-index:4;
  opacity:0;
  transition:opacity .2s;
}
.drama-card:hover .card-trailer-tag{opacity:1}

/* ── The popup ── */
.card-preview{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(10px) scale(.94);
  margin-top:6px;
  width:270px;
  background:#181818;
  border-radius:8px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    0 24px 64px rgba(0,0,0,.95),
    0 6px 24px rgba(0,0,0,.7);
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease,transform .28s cubic-bezier(.2,0,.2,1);
  /* always in DOM, controlled via opacity */
}

/* Active (JS adds .preview-active to .drama-card) */
.drama-card.preview-active{
  z-index:50;
  transform:none; /* popup ko'ringanida karta skalani olib tashlaydi */
}
.drama-card.preview-active .card-preview{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}

/* Edge detection: right edge → shift popup left */
.drama-card.popup-right .card-preview{
  left:auto;right:0;
  transform:translateX(0) translateY(10px) scale(.94);
}
.drama-card.popup-right.preview-active .card-preview{
  transform:translateX(0) translateY(0) scale(1);
}

/* Edge detection: left edge → shift popup right */
.drama-card.popup-left .card-preview{
  left:0;
  transform:translateX(0) translateY(10px) scale(.94);
}
.drama-card.popup-left.preview-active .card-preview{
  transform:translateX(0) translateY(0) scale(1);
}

/* Above card (near bottom of viewport) */
.drama-card.popup-above .card-preview{
  top:auto;
  bottom:100%;
  margin-top:0;
  margin-bottom:6px;
  transform:translateX(-50%) translateY(-10px) scale(.94);
}
.drama-card.popup-above.preview-active .card-preview{
  transform:translateX(-50%) translateY(0) scale(1);
}
.drama-card.popup-above.popup-right .card-preview{
  left:auto;right:0;
  transform:translateX(0) translateY(-10px) scale(.94);
}
.drama-card.popup-above.popup-right.preview-active .card-preview{
  transform:translateX(0) translateY(0) scale(1);
}

/* ── Video area ── */
.card-preview-video{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.cpv-frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:none;object-fit:cover;
  display:block;
}
.cpv-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:none;
}

/* Loading skeleton */
.cpv-skeleton{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#222 25%,#2a2a2a 50%,#222 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Play overlay on video */
.cpv-play-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .2s;
}
.card-preview-video:hover .cpv-play-overlay{opacity:1}
.cpv-play-icon{
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  color:#000;font-size:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  transform:scale(.9);
  transition:transform .2s;
}
.card-preview-video:hover .cpv-play-icon{transform:scale(1)}

/* Volume toggle */
.cpv-vol-btn{
  position:absolute;bottom:8px;right:8px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.65);
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .18s;
  z-index:5;
  line-height:1;
}
.cpv-vol-btn:hover{background:rgba(0,0,0,.85);transform:scale(1.12)}
.cpv-vol-off{display:none}/* hide old text indicator */

/* ── Info area ── */
.card-preview-info{padding:14px}

/* Content type + status row */
.cpi-toprow{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.cpi-type{
  font-size:9px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;padding:3px 8px;border-radius:3px;
}
.cpi-type-serial {background:rgba(83,82,237,.2);color:#7b7aff}
.cpi-type-film   {background:rgba(255,107,53,.2);color:#ff7f50}
.cpi-type-anime  {background:rgba(255,71,87,.2);color:#ff6b81}
.cpi-type-variety{background:rgba(46,213,115,.2);color:#2ed573}

.cpi-title{
  font-size:14px;font-weight:800;
  color:#fff;margin-bottom:7px;
  line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}

.cpi-meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:6px;font-size:11px;color:rgba(255,255,255,.5);
  margin-bottom:12px;
}
.cpi-star{color:#f5c518;font-weight:700}
.cpi-dot{color:rgba(255,255,255,.25)}

/* Status dot */
.cpi-status{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;
}
.cpi-status-dot{
  width:6px;height:6px;border-radius:50%;
  display:inline-block;flex-shrink:0;
}
.cpi-status-dot.ongoing{background:#ff6b6b;box-shadow:0 0 4px #ff6b6b;animation:dot-pulse 1.5s infinite}
.cpi-status-dot.completed{background:#2ed573}
.cpi-status-dot.upcoming{background:#5352ed}

/* ── Action buttons ── */
.cpi-actions{
  display:flex;align-items:center;gap:8px;
}

.cpi-btn-watch{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;color:#000;
  padding:9px 16px;border-radius:4px;
  font-size:13px;font-weight:800;
  text-decoration:none;
  transition:background .2s,transform .15s;
  white-space:nowrap;
}
.cpi-btn-watch:hover{background:#e8e8e8;color:#000;transform:scale(1.03)}

.cpi-btn-trailer{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(109,109,110,.55);color:#fff;
  padding:9px 14px;border-radius:4px;
  font-size:12px;font-weight:700;
  border:1.5px solid rgba(255,255,255,.22);
  cursor:pointer;
  transition:background .2s,border-color .2s;
  white-space:nowrap;font-family:inherit;
}
.cpi-btn-trailer:hover{background:rgba(109,109,110,.85);border-color:rgba(255,255,255,.45)}

.cpi-btn-fav,
.cpi-btn-share {
  width:36px;height:36px;border-radius:50%;
  background:rgba(109,109,110,.35);
  border:1.5px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.75);
  font-size:15px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
  line-height:1;font-family:inherit;
}
.cpi-btn-fav:hover{background:rgba(229,9,20,.3);border-color:rgba(229,9,20,.6);color:#ff6b6b}
.cpi-btn-fav.favorited{background:rgba(229,9,20,.25);border-color:var(--accent);color:var(--accent)}
.cpi-btn-share:hover{background:rgba(79,145,255,.3);border-color:rgba(79,145,255,.6);color:#4f91ff}
.cpi-btn-share.copied{background:rgba(46,213,115,.25);border-color:#2ed573;color:#2ed573}

/* ═══════════════════════════════════════════════════════
   BUTTON SYSTEM
   ═══════════════════════════════════════════════════════ */
.btn-primary,
.btn-secondary,
.btn-play,
.btn-trailer,
.btn-fav-detail,
.hp-hero-play,
.hp-hero-fav {
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;border:none;cursor:pointer;font-family:inherit;
  font-weight:700;text-decoration:none;user-select:none;
  transition:transform .18s,box-shadow .18s,background .2s;
  -webkit-tap-highlight-color:transparent;
}

/* Primary */
.btn-primary{
  background:var(--accent);color:#fff;
  padding:11px 24px;border-radius:4px;
  font-size:14px;
}
.btn-primary:hover{background:var(--accent-h);transform:translateY(-1px);box-shadow:0 6px 20px rgba(229,9,20,.4);color:#fff}

/* Secondary */
.btn-secondary{
  background:rgba(109,109,110,.7);color:#fff;
  padding:11px 22px;border-radius:4px;
  font-size:14px;backdrop-filter:blur(8px);
}
.btn-secondary:hover{background:rgba(109,109,110,.9);color:#fff;transform:translateY(-1px)}

/* Play (drama page) */
.btn-play{
  background:#fff;color:#000;
  padding:14px 32px;border-radius:4px;
  font-size:15px;font-weight:900;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  white-space:nowrap;
  flex-shrink:0;
}
.btn-play:hover{background:#e0e0e0;transform:scale(1.04);color:#000}
.btn-play-disabled{
  background:rgba(255,255,255,.07) !important;
  color:var(--text3) !important;cursor:not-allowed !important;
  box-shadow:none !important;
}
.btn-play-disabled:hover{transform:none !important}

/* Fav detail */
.btn-fav-detail{
  background:rgba(109,109,110,.6);color:#fff;
  padding:12px 22px;border-radius:4px;
  font-size:14px;
  border:none;backdrop-filter:blur(8px);
  white-space:nowrap;
  flex-shrink:0;
}
.btn-fav-detail:hover{background:rgba(109,109,110,.9);color:#fff}
.btn-fav-detail.favorited{background:rgba(229,9,20,.2);color:var(--accent);border:1px solid rgba(229,9,20,.4)}
.btn-fav-detail.favorited .fav-icon::before{content:'\2665'}

/* Trailer */
.btn-trailer{
  background:rgba(109,109,110,.6);color:#fff;
  padding:12px 22px;border-radius:4px;
  font-size:14px;border:none;backdrop-filter:blur(8px);
  white-space:nowrap;
  flex-shrink:0;
}
.btn-trailer:hover{background:rgba(109,109,110,.9);color:#fff;transform:translateY(-1px)}

/* HP hero buttons */
.hp-hero-play{
  background:#fff;color:#000;
  padding:14px 32px;border-radius:4px;
  font-size:16px;font-weight:900;
}
.hp-hero-play:hover{background:#e0e0e0;transform:scale(1.04);color:#000}
.hp-hero-fav{
  background:rgba(109,109,110,.7);color:#fff;
  padding:14px 20px;border-radius:4px;font-size:16px;
}
.hp-hero-fav:hover{background:rgba(109,109,110,.9);color:#fff}

/* ═══════════════════════════════════════════════════════════════
   DRAMA DETAIL PAGE — Netflix uslubida
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────── */
.drama-hero-v2{
  position:relative;
  overflow:hidden;
  min-height:580px;
  display:flex;align-items:flex-end;
  padding-bottom:0;
}

.drama-backdrop{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 15%;
  filter:blur(32px) brightness(.28) saturate(.65);
  transform:scale(1.1);
  z-index:0;
}

/* 3 qatlamli gradient: o'ng, pastdan, umumiy qorong'u */
.drama-backdrop-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to right,
      rgba(13,13,13,.98) 0%,
      rgba(13,13,13,.75) 38%,
      rgba(13,13,13,.25) 65%,
      transparent 100%),
    linear-gradient(to top,
      rgba(13,13,13,1)   0%,
      rgba(13,13,13,.5)  20%,
      transparent        50%);
}

.drama-hero-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:240px 1fr;
  gap:44px;
  align-items:flex-end;
  padding:60px 0 48px;
  width:100%;
}

/* Poster */
.drama-poster-col{flex-shrink:0}
.drama-poster-img{
  width:100%;
  border-radius:8px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.07);
  display:block;
  transition:transform .3s ease;
}
.drama-poster-img:hover{transform:scale(1.02)}

/* Info */
.drama-info-col{min-width:0;padding-bottom:4px}

.drama-badges{
  display:flex;flex-wrap:wrap;gap:7px;
  margin-bottom:16px;align-items:center;
}
.drama-year{
  font-size:13px;color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
  padding:3px 10px;border-radius:4px;
  font-weight:600;
}

.drama-title-v2{
  font-size:clamp(24px,3.5vw,46px);
  font-weight:900;line-height:1.1;
  margin-bottom:6px;
  color:#fff;
  letter-spacing:-.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.drama-title-kr{
  font-size:15px;color:rgba(255,255,255,.4);
  margin-bottom:16px;font-style:italic;
}

.drama-meta-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:6px;margin-bottom:14px;
  font-size:14px;color:rgba(255,255,255,.6);
}
.meta-star{color:#f5c518;font-weight:800;font-size:15px}
.meta-dot{color:rgba(255,255,255,.2);font-size:8px}

.drama-genres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}

.drama-desc-v2{
  color:rgba(229,229,229,.72);
  line-height:1.85;font-size:14px;
  margin-bottom:18px;
  max-width:560px;word-break:break-word;
}
.btn-text{
  background:none;border:none;
  color:var(--accent);cursor:pointer;
  font-size:13px;padding:0;
  font-family:inherit;font-weight:600;
}

.drama-actions{
  display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;
  margin-top:6px;
  max-width:100%;
  overflow:hidden;
}

/* Body */
.drama-body{padding-top:40px;max-width:100%;overflow-x:hidden}

/* ── Qismlar grid — yirik kartalar ─────────────────────────────── */
.episodes-section{margin-bottom:48px}

.section-title{
  font-size:20px;font-weight:800;
  margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
  color:#fff;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.section-title .count{color:var(--text3);font-size:14px;font-weight:400}

/* Episode karta — chiroyli, keng */
.episodes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:8px;
}

.episode-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.07);
  border-radius:8px;
  padding:16px 8px 12px;
  text-align:center;cursor:pointer;user-select:none;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
  min-height:80px;
  overflow:hidden;
}
.episode-card:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.2);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.episode-card.has-video:hover{
  background:rgba(229,9,20,.1);
  border-color:rgba(229,9,20,.45);
  box-shadow:0 6px 24px rgba(229,9,20,.2);
}
.episode-card.playing{
  background:linear-gradient(135deg,#e50914 0%,#c8000e 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 28px rgba(229,9,20,.5);
  transform:translateY(-2px);
}
.episode-card.playing .ep-title,
.episode-card.playing .ep-views{color:rgba(255,255,255,.75)}
.ep-play-overlay{
  position:absolute;top:6px;right:6px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(229,9,20,.85);
  display:flex;align-items:center;justify-content:center;
  font-size:7px;color:#fff;line-height:1;
}
.ep-number{font-size:22px;font-weight:900;line-height:1;margin-bottom:4px}
.ep-title{
  font-size:10px;color:var(--text2);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:3px;
}
.ep-views{font-size:9px;color:var(--text3)}

/* Inline player */
.inline-player-wrap{margin-bottom:32px}
.inline-player-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;flex-wrap:wrap;gap:8px;
  padding:14px 18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px 8px 0 0;
}
.inline-player-title{
  font-size:15px;font-weight:700;color:#fff;
}
.btn-ep-link{
  font-size:12px;color:var(--text2);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 14px;border-radius:4px;
  transition:.2s;
}
.btn-ep-link:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.inline-player-wrap .video-wrap{border-radius:0 0 8px 8px}

/* Light/Ocean tema */
[data-theme="light"] .drama-title-v2{color:var(--text);text-shadow:none}
[data-theme="light"] .drama-backdrop-overlay{
  background:
    linear-gradient(to right,rgba(244,244,244,.97) 0%,rgba(244,244,244,.7) 40%,rgba(244,244,244,.1) 70%,transparent 100%),
    linear-gradient(to top,rgba(244,244,244,1) 0%,rgba(244,244,244,.4) 20%,transparent 50%);
}
[data-theme="ocean"] .drama-backdrop{filter:blur(32px) brightness(.22) saturate(.6)}

/* Next episode info */
.next-ep-info{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,165,0,.1);
  border:1px solid rgba(255,165,0,.3);
  color:#ffa502;padding:7px 14px;border-radius:4px;
  font-size:13px;font-weight:600;margin-bottom:12px;
}

/* Status badges */
.status-badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:4px;display:inline-block}
.status-badge.completed{background:rgba(46,213,115,.12);color:#2ed573;border:1px solid rgba(46,213,115,.25)}
.status-badge.ongoing{background:rgba(255,165,2,.12);color:#ffa502;border:1px solid rgba(255,165,2,.25)}
.status-badge.upcoming{background:rgba(83,82,237,.12);color:#5352ed;border:1px solid rgba(83,82,237,.25)}

/* Content type badge */
.badge-type{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}
.badge-type-serial {background:rgba(83,82,237,.15);color:#5352ed}
.badge-type-film   {background:rgba(255,165,0,.15);color:#ffa502}
.badge-type-anime  {background:rgba(255,71,87,.15);color:#ff4757}
.badge-type-variety{background:rgba(46,213,115,.15);color:#2ed573}

/* Section heading */
.section-title{font-size:20px;font-weight:800;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.section-title .count{color:var(--text3);font-size:14px;font-weight:400}
.page-heading{font-size:28px;font-weight:900;margin-bottom:20px;letter-spacing:-.4px}

/* ── Inline player ─────────────────────────────────────────── */
.inline-player-wrap{margin-bottom:32px}
.inline-player-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.inline-player-title{font-size:16px;font-weight:700;color:#fff}
.btn-ep-link{font-size:12px;color:var(--text2);border:1px solid var(--border);padding:5px 12px;border-radius:4px;transition:.2s}
.btn-ep-link:hover{color:#fff;border-color:#555}

/* ── Episode cards ──────────────────────────────────────────── */
.episodes-section{margin-bottom:40px}
.episodes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.episode-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.07);
  border-radius:6px;padding:12px 8px;
  transition:.22s;text-align:center;cursor:pointer;user-select:none;
}
.episode-card:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.episode-card.has-video:hover{background:rgba(229,9,20,.12);border-color:rgba(229,9,20,.45);box-shadow:0 4px 16px rgba(229,9,20,.18)}
.episode-card.playing{background:linear-gradient(135deg,#e50914,#c8000e);border-color:transparent;color:#fff;box-shadow:0 6px 20px rgba(229,9,20,.4);transform:translateY(-2px)}
.episode-card.playing .ep-title,.episode-card.playing .ep-views{color:rgba(255,255,255,.7)}
.ep-play-overlay{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:rgba(229,9,20,.85);display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff}
.ep-number{font-size:20px;font-weight:800;line-height:1}
.ep-title{font-size:10px;color:var(--text2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep-views{font-size:10px;color:var(--text3);margin-top:3px}

/* Video player */
.video-wrap{
  position:relative;width:100%;
  aspect-ratio:16/9;
  background:#000;border-radius:8px;overflow:hidden;
  margin-bottom:20px;
  transform:translateZ(0);isolation:isolate;
}
@supports not (aspect-ratio:16/9){.video-wrap{padding-top:56.25%}}
.video-wrap iframe,.video-wrap video{
  position:absolute;top:0;left:0;
  width:100%;height:100%;border:0;display:block;background:#000;
}
.video-wrap video{object-fit:contain;accent-color:var(--accent)}
.video-placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;
  font-size:36px;color:var(--text3);background:var(--bg2);
}
/* Film player section */
.film-player-section{margin-bottom:40px;max-width:100%;overflow:hidden}

/* Season / source tabs */
.season-tabs-wrap{margin-bottom:22px}
.season-tabs{display:flex;gap:8px;flex-wrap:wrap}
.season-tab,.source-tab{
  display:inline-flex;align-items:center;
  padding:8px 20px;border-radius:20px;
  font-size:13px;font-weight:700;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:var(--text2);cursor:pointer;
  transition:.22s;
}
.season-tab:hover,.source-tab:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;transform:translateY(-1px)}
.season-tab.active,.source-tab.active{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(229,9,20,.35)}
/* Source tabs */
.source-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.source-tabs::-webkit-scrollbar{display:none}
.source-tab{
  flex-shrink:0;
  display:inline-flex;align-items:center;
  padding:8px 16px;border-radius:20px;
  font-size:13px;font-weight:700;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:var(--text2);cursor:pointer;
  transition:.22s;
  white-space:nowrap;
}
.source-tab:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.source-tab.active{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(229,9,20,.35)}

/* ═══════════════════════════════════════════════════════════════
   EPISODE SAHIFASI — zamonaviy dizayn
   ═══════════════════════════════════════════════════════════════ */
.episode-page{padding-top:0;max-width:100%;overflow-x:hidden}

.breadcrumb{
  font-size:12px;color:var(--text3);
  padding:10px 0 14px;
  display:flex;align-items:center;gap:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.breadcrumb a{color:var(--text2);transition:color .15s}
.breadcrumb a:hover{color:var(--accent)}

.episode-title{
  font-size:clamp(16px,2.5vw,24px);font-weight:800;
  margin-bottom:14px;word-break:break-word;
  color:#fff;line-height:1.3;
}
[data-theme="light"] .episode-title{color:var(--text)}

.episode-page .video-wrap{
  border-radius:10px;
  box-shadow:0 12px 48px rgba(0,0,0,.6);
  margin-bottom:16px;
}

.ep-nav{
  display:flex;gap:8px;margin-bottom:28px;
  align-items:stretch;flex-wrap:wrap;
}
.ep-nav a,.ep-nav button{
  min-width:0;border-radius:6px;
  font-size:13px;font-weight:700;
  padding:10px 20px;
  display:inline-flex;align-items:center;gap:6px;
  transition:.2s;
}

.episode-layout{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:28px;align-items:start;
}

.ep-sidebar{
  background:var(--bg2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;overflow:hidden;
  position:sticky;top:80px;
  max-height:calc(100vh - 100px);
  display:flex;flex-direction:column;
}
.ep-sidebar .widget-title{
  font-size:12px;font-weight:800;
  color:rgba(255,255,255,.4);
  text-transform:uppercase;letter-spacing:.8px;
  padding:14px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.ep-list{
  display:flex;flex-direction:column;
  overflow-y:auto;flex:1;padding:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
.ep-list::-webkit-scrollbar{width:4px}
.ep-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

.ep-list-item{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:6px;
  font-size:13px;color:var(--text2);
  transition:.18s;text-decoration:none;
  position:relative;flex-shrink:0;
}
.ep-list-item:hover{background:rgba(255,255,255,.07);color:#fff}
.ep-list-item.active{
  background:var(--accent);color:#fff;
  box-shadow:0 2px 12px rgba(229,9,20,.3);
}
.ep-list-item.active::before{content:'▶';font-size:8px;margin-right:2px;opacity:.8}
.ep-list-item small{color:rgba(255,255,255,.4);font-size:11px;font-style:italic}

/* Izohlar */
.comments-section{margin-bottom:36px}
.comment-form-wrap{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:20px;margin-bottom:20px;
}
.comment-form-wrap h3{font-size:15px;font-weight:700;margin-bottom:14px;color:#fff}
.form-row{margin-bottom:10px}
.form-row input,.form-row textarea,textarea{
  width:100%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;padding:10px 14px;
  color:var(--text);font-size:14px;
  outline:none;transition:border-color .2s;
  font-family:inherit;resize:vertical;
}
.form-row input:focus,.form-row textarea:focus{
  border-color:var(--accent);background:rgba(255,255,255,.07);
}
.form-row input::placeholder,.form-row textarea::placeholder{color:rgba(255,255,255,.25)}
.comments-list{display:flex;flex-direction:column;gap:10px}
.comment-item{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;padding:14px 16px;
  transition:border-color .15s;
}
.comment-item:hover{border-color:rgba(255,255,255,.12)}
.comment-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.comment-nick{color:var(--accent);font-size:13px;font-weight:700}
.comment-time{color:var(--text3);font-size:11px}
.comment-body{color:rgba(229,229,229,.72);font-size:13px;line-height:1.7}

[data-theme="light"] .ep-sidebar{background:var(--bg2);border-color:var(--border)}
[data-theme="light"] .form-row input,[data-theme="light"] .form-row textarea{background:var(--bg3);border-color:var(--border);color:var(--text)}
[data-theme="light"] .form-row input::placeholder,[data-theme="light"] .form-row textarea::placeholder{color:var(--text3)}

/* ── Ongoing cards ─────────────────────────────────────────── */
.ongoing-section{margin-bottom:28px}
.ongoing-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ongoing-scroll::-webkit-scrollbar{display:none}
.ongoing-card{display:flex;flex-direction:column;flex-shrink:0;width:118px;border-radius:6px;overflow:hidden;background:var(--card);border:1px solid var(--border);transition:.2s;scroll-snap-align:start;text-decoration:none}
.ongoing-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.ongoing-poster{position:relative;aspect-ratio:2/3;background:var(--bg2);overflow:hidden}
.ongoing-poster img{width:100%;height:100%;object-fit:cover}
.ongoing-badge{position:absolute;top:5px;right:5px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;padding:2px 5px;border-radius:3px;letter-spacing:.4px}
.ongoing-info{padding:8px}
.ongoing-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;font-weight:600;line-height:1.35;margin-bottom:4px;color:var(--text)}
.ongoing-date{display:block;font-size:10px;color:#ffa502;font-weight:600}

/* ── Row section (generic) ─────────────────────────────────── */
.row-section{margin-bottom:32px}
.row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.row-title{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.row-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.ongoing-dot{background:#e50914;box-shadow:0 0 6px #e50914;animation:dot-pulse 1.5s infinite}
.fire-dot{background:#ffa502}
.row-more{font-size:13px;color:var(--text2);transition:.2s}
.row-more:hover{color:var(--accent)}
.row-scroll{display:flex;gap:10px;overflow-x:auto;overflow-y:visible;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.row-scroll::-webkit-scrollbar{display:none}
.row-card{flex-shrink:0;width:130px;scroll-snap-align:start;text-decoration:none;display:block}
.row-card-img{position:relative;aspect-ratio:2/3;border-radius:4px;overflow:hidden;background:var(--bg2);transition:transform .2s}
.row-card:hover .row-card-img{transform:scale(1.05)}
.row-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.row-card-overlay{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.9) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:10px;opacity:0;transition:opacity .2s}
.row-card:hover .row-card-overlay{opacity:1}
.rco-meta{display:flex;gap:6px;font-size:10px;color:rgba(255,255,255,.7);margin-bottom:6px}
.rco-btn{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.88);color:#000;padding:5px 10px;border-radius:3px;font-size:10px;font-weight:800;width:fit-content}
.row-card-badge{position:absolute;bottom:6px;left:6px;background:rgba(229,9,20,.88);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px}
.row-card-title{font-size:11px;font-weight:600;margin-top:6px;line-height:1.35;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-card:hover .row-card-title{color:var(--text)}

/* Card next episode */
.card-next-ep{position:absolute;bottom:6px;left:6px;background:rgba(229,9,20,.88);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px;line-height:1.4;z-index:1}

/* ── Page layout (sidebar) ─────────────────────────────────── */
.page-layout{display:grid;grid-template-columns:1fr 280px;gap:28px;align-items:start}
.sidebar{display:flex;flex-direction:column;gap:20px}
.widget{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:18px}
.widget-title{font-size:15px;font-weight:700;margin-bottom:14px;color:#fff}
.popular-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.popular-list li a{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2);transition:.2s}
.popular-list li a:hover{color:#fff}
.popular-list li a img{width:44px;height:60px;object-fit:cover;border-radius:4px;flex-shrink:0}
.popular-list li .mini-poster{width:44px;height:60px;background:var(--bg2);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.genre-cloud{display:flex;flex-wrap:wrap;gap:7px}

/* ═══════════════════════════════════════════════════════════════
   SEARCH SAHIFASI
   ═══════════════════════════════════════════════════════════════ */

/* Hero */
.srch-hero{
  position:relative;
  padding:60px 0 52px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.srch-hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,rgba(229,9,20,.07) 0%,transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%,rgba(79,145,255,.04) 0%,transparent 60%);
  pointer-events:none;
}
.srch-hero-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:14px;
}
.srch-hero-title{
  font-size:clamp(22px,3.5vw,38px);font-weight:900;
  color:#fff;
  display:flex;align-items:center;gap:10px;
  letter-spacing:-.4px;
}
.srch-hero-sub{font-size:14px;color:var(--text3);margin-top:-4px}

/* Search form */
.srch-form{
  display:flex;gap:0;
  width:100%;max-width:640px;
  margin-top:8px;
}
.srch-input-wrap{
  flex:1;
  display:flex;align-items:center;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.12);
  border-right:none;
  border-radius:8px 0 0 8px;
  overflow:hidden;
  transition:border-color .2s,background .2s;
}
.srch-form:focus-within .srch-input-wrap{
  border-color:rgba(229,9,20,.5);
  background:rgba(255,255,255,.1);
}
.srch-icon{
  flex-shrink:0;margin-left:16px;
  color:rgba(255,255,255,.35);pointer-events:none;
}
.srch-input{
  flex:1;background:none;border:none;
  padding:14px 12px 14px 10px;
  color:var(--text);font-size:15px;
  outline:none;font-family:inherit;
}
.srch-input::placeholder{color:rgba(255,255,255,.3)}
.srch-clear{
  padding:0 14px;color:rgba(255,255,255,.35);
  display:flex;align-items:center;
  transition:color .15s;
}
.srch-clear:hover{color:rgba(255,255,255,.7)}
.srch-btn{
  padding:0 28px;
  background:var(--accent);color:#fff;
  border:none;cursor:pointer;
  font-size:14px;font-weight:800;
  border-radius:0 8px 8px 0;
  transition:background .2s;
  font-family:inherit;white-space:nowrap;
}
.srch-btn:hover{background:var(--accent-h)}

/* Hot searches */
.srch-hot{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:6px;
  margin-top:4px;
}
.srch-hot-label{
  font-size:12px;color:var(--text3);
  display:flex;align-items:center;gap:4px;
  font-weight:600;
}
.srch-hot-tag{
  padding:5px 14px;border-radius:20px;
  font-size:12px;font-weight:600;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text2);
  transition:.15s;
}
.srch-hot-tag:hover{background:rgba(229,9,20,.15);border-color:rgba(229,9,20,.3);color:#fff}

/* Results section */
.srch-results-wrap{padding-top:32px;padding-bottom:60px}

.srch-meta{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.srch-count{
  font-size:22px;font-weight:900;
  color:var(--accent);
}
.srch-count-label{font-size:14px;color:var(--text2);margin-left:6px}
.srch-no-res{font-size:16px;color:var(--text2)}

.srch-sort{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.srch-sort-label{font-size:12px;color:var(--text3);font-weight:600;margin-right:4px}
.srch-sort-btn{
  padding:5px 14px;border-radius:20px;
  font-size:12px;font-weight:600;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text2);transition:.15s;
}
.srch-sort-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.srch-sort-btn.active{background:var(--accent);border-color:transparent;color:#fff}

/* Empty state */
.srch-empty{
  text-align:center;padding:60px 20px 80px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.srch-empty-icon{font-size:64px;filter:grayscale(.4);margin-bottom:4px}
.srch-empty h3{font-size:22px;font-weight:800;color:#fff}
.srch-empty p{font-size:14px;color:var(--text2);max-width:360px}
.srch-empty-tips{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:16px 24px;
  text-align:left;margin-top:8px;
}
.srch-empty-tips span{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px}
.srch-empty-tips ul{margin-top:8px;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.srch-empty-tips li{font-size:13px;color:var(--text2)}
.srch-empty-hot{margin-top:20px}
.srch-empty-hot p{font-size:13px;color:var(--text3);margin-bottom:10px}

/* Browse genres (qidiruv kiritilmagan holat) */
.srch-browse{padding:16px 0 60px}
.srch-browse-title{
  font-size:20px;font-weight:800;color:#fff;
  margin-bottom:20px;
  display:flex;align-items:center;gap:8px;
}
.srch-browse-title::before{
  content:'';width:4px;height:22px;
  background:var(--accent);border-radius:2px;
}
.srch-genre-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
}
.srch-genre-card{
  position:relative;overflow:hidden;
  background:var(--bg2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;padding:20px 16px;
  display:flex;align-items:center;justify-content:space-between;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.srch-genre-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  border-color:var(--gc,#e50914);
}
.sgc-glow{
  position:absolute;top:-30px;right:-30px;
  width:90px;height:90px;border-radius:50%;
  background:var(--gc,#e50914);
  opacity:.08;filter:blur(20px);
  transition:opacity .25s;
}
.srch-genre-card:hover .sgc-glow{opacity:.18}
.sgc-name{
  font-size:14px;font-weight:700;
  color:#fff;position:relative;z-index:1;
}
.sgc-count{
  font-size:11px;font-weight:600;
  color:var(--gc,#e50914);
  position:relative;z-index:1;
  margin-top:3px;
  display:block;
}

/* Light tema */
[data-theme="light"] .srch-input{color:var(--text)}
[data-theme="light"] .srch-input::placeholder{color:var(--text3)}
[data-theme="light"] .srch-input-wrap{background:var(--bg3);border-color:var(--border)}

/* ═══════════════════════════════════════════════════════════════
   GENRE SAHIFASI
   ═══════════════════════════════════════════════════════════════ */

/* Janrlar ro'yxati hero */
.gnr-list-hero{
  padding:52px 0 40px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(229,9,20,.06) 0%,transparent 70%);
}
.gnr-list-title{
  font-size:clamp(22px,3vw,36px);font-weight:900;color:#fff;
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px;letter-spacing:-.3px;
}
.gnr-list-sub{font-size:14px;color:var(--text3)}
.gnr-grid-wrap{padding:32px 0 60px}

/* Janr kartalar grid */
.gnr-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}
.gnr-card{
  position:relative;overflow:hidden;
  background:var(--bg2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:22px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.gnr-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  border-color:var(--gc,#e50914);
}
.gnr-card-glow{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--gc,#e50914) 0%,transparent 60%);
  opacity:.06;
  transition:opacity .25s;pointer-events:none;
}
.gnr-card:hover .gnr-card-glow{opacity:.14}
.gnr-card-bar{
  position:absolute;left:0;top:0;bottom:0;
  width:4px;
  background:var(--gc,#e50914);
  border-radius:10px 0 0 10px;
  opacity:.7;
}
.gnr-card-body{display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}
.gnr-card-name{font-size:16px;font-weight:800;color:#fff}
.gnr-card-cnt{font-size:12px;color:var(--text3);font-weight:500}
.gnr-card-arrow{
  color:rgba(255,255,255,.25);flex-shrink:0;
  position:relative;z-index:1;
  transition:color .2s,transform .2s;
}
.gnr-card:hover .gnr-card-arrow{color:var(--gc,#e50914);transform:translateX(3px)}

/* Janr hero (bitta janr tanlanganda) */
.gnr-hero{
  position:relative;overflow:hidden;
  padding:52px 0 44px;
}
.gnr-hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg,var(--gc,#e50914) 0%,transparent 50%),
    radial-gradient(ellipse 80% 60% at 0% 50%,var(--gc,#e50914) 0%,transparent 60%);
  opacity:.1;
}
.gnr-hero-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:22px;
}
.gnr-hero-icon{
  width:64px;height:64px;border-radius:16px;
  background:var(--gc,#e50914);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.gnr-hero-icon svg{opacity:.9}
.gnr-hero-breadcrumb{
  font-size:12px;color:rgba(255,255,255,.4);
  display:flex;align-items:center;gap:6px;
  margin-bottom:8px;
}
.gnr-hero-breadcrumb a{color:rgba(255,255,255,.5);transition:.15s}
.gnr-hero-breadcrumb a:hover{color:#fff}
.gnr-hero-breadcrumb span{color:rgba(255,255,255,.25)}
.gnr-hero-title{
  font-size:clamp(22px,3.5vw,40px);font-weight:900;
  color:#fff;line-height:1.1;
  letter-spacing:-.4px;
}
.gnr-hero-meta{display:flex;gap:12px;align-items:center;margin-top:8px}
.gnr-hero-cnt{
  font-size:13px;font-weight:600;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  padding:4px 14px;border-radius:20px;
  color:rgba(255,255,255,.7);
}

/* Filter bar */
.gnr-filter-bar{
  background:var(--bg);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:68px;z-index:50;
}
.gnr-filter-inner{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;
  flex-wrap:nowrap;overflow:hidden;
}
.gnr-pills-scroll{
  display:flex;gap:6px;overflow-x:auto;
  flex:1;min-width:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0;
}
.gnr-pills-scroll::-webkit-scrollbar{display:none}
.gnr-pill{
  flex-shrink:0;
  padding:6px 16px;border-radius:20px;
  font-size:12px;font-weight:700;
  color:var(--text2);background:var(--bg3);
  border:1px solid transparent;
  white-space:nowrap;transition:.15s;
  display:inline-flex;align-items:center;gap:5px;
}
.gnr-pill:hover{color:#fff;border-color:rgba(255,255,255,.15)}
.gnr-pill.active{
  background:var(--pc,var(--accent));
  color:#fff;border-color:transparent;
  box-shadow:0 3px 12px rgba(0,0,0,.3);
}
.gnr-pill-cnt{
  font-size:10px;font-weight:500;
  background:rgba(255,255,255,.15);
  padding:1px 5px;border-radius:10px;
}
.gnr-sort{display:flex;gap:4px;flex-shrink:0}
.gnr-sort-btn{
  padding:5px 12px;border-radius:20px;
  font-size:11px;font-weight:700;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text2);transition:.15s;white-space:nowrap;
}
.gnr-sort-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.gnr-sort-btn.active{background:var(--accent);border-color:transparent;color:#fff}

/* Results */
.gnr-results{padding-top:28px;padding-bottom:60px}
.gnr-results-head{margin-bottom:18px}
.gnr-results-label{font-size:13px;color:var(--text3);font-weight:500}

/* Responsive */
@media(max-width:767px){
  .srch-hero{padding:40px 0 36px}
  .srch-hero-title{font-size:22px}
  .srch-form{flex-direction:column;gap:8px}
  .srch-input-wrap{border-right:1.5px solid rgba(255,255,255,.12);border-radius:8px}
  .srch-btn{border-radius:8px;padding:14px;width:100%}
  .srch-genre-grid{grid-template-columns:repeat(2,1fr)}
  .gnr-card-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .gnr-card{padding:16px 14px}
  .gnr-hero-inner{gap:14px}
  .gnr-hero-icon{width:50px;height:50px;border-radius:12px}
  .gnr-filter-inner{flex-wrap:wrap;gap:8px}
  .gnr-sort{width:100%;overflow-x:auto;scrollbar-width:none}
  .gnr-sort::-webkit-scrollbar{display:none}
}

/* Eski .search-hero uchun fallback */
.search-hero{text-align:center;padding:60px 0 36px}
.search-hero h1{font-size:32px;margin-bottom:20px;font-weight:900}
.search-form-big{display:flex;gap:0;max-width:560px;margin:0 auto;background:var(--bg2);border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.search-form-big:focus-within{border-color:rgba(229,9,20,.5);box-shadow:0 0 0 3px rgba(229,9,20,.1)}
.search-form-big input{flex:1;background:none;border:none;padding:15px 20px;color:var(--text);font-size:16px;outline:none}
.search-form-big button{padding:15px 24px;border:none;background:var(--accent);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s}
.search-form-big button:hover{background:var(--accent-h)}
.search-info{color:var(--text2);margin-bottom:20px;font-size:15px}

/* ── Comments ──────────────────────────────────────────────── */
.comments-section{margin-bottom:40px}
.comment-form-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:24px}
.comment-form-wrap h3{font-size:16px;margin-bottom:14px}
.form-row{margin-bottom:12px}
.form-row input,.form-row textarea,textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px 14px;color:var(--text);font-size:14px;outline:none;transition:border-color .2s;font-family:inherit;resize:vertical}
.form-row input:focus,.form-row textarea:focus{border-color:var(--accent)}
.comments-list{display:flex;flex-direction:column;gap:12px}
.comment-item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:16px}
.comment-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.comment-nick{color:var(--accent);font-size:14px;font-weight:600}
.comment-time{color:var(--text3);font-size:12px}
.comment-body{color:var(--text2);font-size:14px;line-height:1.7}

/* ── Alerts & utilities ────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:6px;margin-bottom:16px;font-size:14px}
.alert.success{background:rgba(46,213,115,.08);border:1px solid rgba(46,213,115,.3);color:#2ed573}
.alert.error{background:rgba(229,9,20,.08);border:1px solid rgba(229,9,20,.3);color:#ff6b6b}

.empty-state{text-align:center;padding:60px 20px;color:var(--text3);font-size:16px}

.genre-tag{background:var(--bg2);color:var(--text2);border:1px solid var(--border);padding:5px 14px;border-radius:20px;font-size:13px;cursor:pointer;transition:.2s;text-decoration:none;display:inline-block}
.genre-tag:hover,.genre-tag.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.genre-tag.small{font-size:12px;padding:4px 10px}
.genre-tag.big{font-size:15px;padding:8px 20px}
.genre-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}

/* Grid section title */
.grid-section-title{font-size:18px;font-weight:700;margin-bottom:16px}
.gradient-title{background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.65) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-title-accent{background:linear-gradient(135deg,#e50914 0%,#ff6b35 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Rating stars */
.rating-stars{color:#f5c518;font-size:16px;font-weight:700}
.drama-desc{color:var(--text2);line-height:1.8;font-size:14px;margin:16px 0;word-break:break-word}

/* ── Pagination ────────────────────────────────────────────── */
.pagination{display:flex;gap:6px;justify-content:center;margin:40px 0;flex-wrap:wrap}
.page-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 14px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:4px;color:var(--text2);font-size:14px;font-weight:600;
  transition:.2s;cursor:pointer;
}
.page-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;transform:translateY(-1px)}
.page-btn.active{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(229,9,20,.4)}

/* ═══════════════════════════════════════════════════════════════
   CATALOG SAHIFASI — cat2-* prefix
   ═══════════════════════════════════════════════════════════════ */
.cat2-hero{position:relative;overflow:hidden;padding:56px 0 48px;border-bottom:1px solid rgba(255,255,255,.06)}
.cat2-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at -10% 50%,var(--cc,#e50914) 0%,transparent 55%),radial-gradient(ellipse 50% 60% at 110% 30%,var(--cc,#e50914) 0%,transparent 50%);opacity:.1;pointer-events:none}
.cat2-hero-particles{position:absolute;inset:0;background:radial-gradient(circle 1px at 20% 30%,rgba(255,255,255,.15) 0%,transparent 1px),radial-gradient(circle 1px at 80% 70%,rgba(255,255,255,.1) 0%,transparent 1px);pointer-events:none}
.cat2-hero-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cat2-hero-left{display:flex;align-items:center;gap:24px;flex:1;min-width:0}
.cat2-icon-box{position:relative;flex-shrink:0;width:80px;height:80px}
.cat2-icon{width:80px;height:80px;border-radius:20px;background:var(--cc,#e50914);display:flex;align-items:center;justify-content:center;font-size:38px;line-height:1;box-shadow:0 10px 32px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1);position:relative;z-index:1}
.cat2-icon-glow{position:absolute;inset:-12px;background:var(--cc,#e50914);filter:blur(20px);opacity:.25;border-radius:50%}
.cat2-hero-info{min-width:0}
.cat2-breadcrumb{font-size:12px;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.cat2-breadcrumb a{color:rgba(255,255,255,.5);transition:.15s}
.cat2-breadcrumb a:hover{color:#fff}
.cat2-breadcrumb span{color:rgba(255,255,255,.25)}
.cat2-title{font-size:clamp(24px,3.5vw,42px);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.5px;margin-bottom:8px}
.cat2-desc{font-size:14px;color:rgba(255,255,255,.55);margin-bottom:12px;line-height:1.6;max-width:520px}
.cat2-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cat2-meta-item{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:5px 12px;border-radius:20px}
.cat2-stat-cards{display:flex;gap:10px;flex-shrink:0}
.cat2-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:14px 18px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:80px;position:relative;overflow:hidden;transition:.2s}
.cat2-stat:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15)}
.cat2-stat-dot{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%}
.cat2-stat-num{font-size:26px;font-weight:900;line-height:1}
.cat2-stat-lbl{font-size:10px;color:rgba(255,255,255,.4);font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.cat2-bar{background:var(--bg);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:68px;z-index:50}
.cat2-bar-inner{display:flex;align-items:center;gap:10px;padding:10px 0}
.cat2-pills-scroll{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
.cat2-pills-scroll::-webkit-scrollbar{display:none}
.cat2-pill{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;color:var(--text2);background:var(--bg3);border:1px solid transparent;white-space:nowrap;transition:.15s}
.cat2-pill:hover{color:#fff;border-color:rgba(255,255,255,.15)}
.cat2-pill.active{background:var(--pc,var(--accent));color:#fff;border-color:transparent;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.cat2-bar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cat2-search{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 12px;transition:border-color .2s;min-width:140px}
.cat2-search:focus-within{border-color:rgba(229,9,20,.4)}
.cat2-srch-icon{color:rgba(255,255,255,.35);flex-shrink:0}
.cat2-srch-clear{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;padding:0;flex-shrink:0;transition:color .15s}
.cat2-srch-clear:hover{color:#fff}
.cat2-search input{background:none;border:none;outline:none;color:var(--text);font-size:12px;font-family:inherit;width:100%}
.cat2-search input::placeholder{color:rgba(255,255,255,.3)}
.cat2-sort{display:flex;gap:4px}
.cat2-sort-btn{padding:5px 11px;border-radius:20px;font-size:11px;font-weight:700;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text2);transition:.15s;white-space:nowrap}
.cat2-sort-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.cat2-sort-btn.active{background:var(--cc,var(--accent));border-color:transparent;color:#fff}
.cat2-grid-wrap{padding-top:24px;padding-bottom:60px}
.cat2-grid-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.cat2-grid-info{font-size:13px;color:var(--text3)}
.cat2-grid-info strong{color:var(--text2)}
.cat2-clear-search{margin-left:10px;font-size:12px;color:var(--accent);font-weight:600;transition:.15s}
.cat2-clear-search:hover{color:var(--accent-h)}
.cat2-empty{text-align:center;padding:80px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.cat2-empty-icon{font-size:64px;filter:grayscale(.4);margin-bottom:4px}
.cat2-empty h3{font-size:22px;font-weight:800;color:#fff}
.cat2-empty p{font-size:14px;color:var(--text2);max-width:320px;line-height:1.6}
@media(max-width:900px){.cat2-stat-cards{display:none}}
@media(max-width:767px){
  .cat2-hero{padding:36px 0 30px}
  .cat2-hero-left{gap:14px}
  .cat2-icon,.cat2-icon-box{width:60px;height:60px;border-radius:14px;font-size:28px}
  .cat2-title{font-size:22px}
  .cat2-bar-inner{flex-wrap:wrap;gap:8px}
  .cat2-bar-right{width:100%;gap:6px}
  .cat2-search{flex:1}
  .cat2-sort{overflow-x:auto;scrollbar-width:none;flex-shrink:0}
  .cat2-sort::-webkit-scrollbar{display:none}
}

/* ── Catalog hero & system ─────────────────────────────────── */
.catalog-hero{position:relative;padding:52px 0 40px;overflow:hidden;margin-bottom:0}
.catalog-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--cat-color,#e50914) 15%,transparent) 0%,var(--bg) 70%);z-index:0}
.catalog-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,var(--bg) 100%)}
.catalog-hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:28px}
.catalog-icon-wrap{width:90px;height:90px;border-radius:20px;background:var(--cat-color,#e50914);display:flex;align-items:center;justify-content:center;font-size:44px;flex-shrink:0;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.catalog-hero-icon{line-height:1}
.catalog-hero-title{font-size:36px;font-weight:900;color:#fff;line-height:1.1;margin-bottom:6px}
.catalog-hero-desc{color:var(--text2);font-size:14px;margin-bottom:10px;max-width:480px}
.catalog-hero-count{display:inline-block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--text2);font-size:13px;padding:4px 14px;border-radius:20px}
.catalog-subbar{background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:68px;z-index:50}
.catalog-subbar-inner{display:flex;align-items:center;gap:12px;padding:10px 0;flex-wrap:nowrap;overflow:hidden}
.cat-pills-scroll{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
.cat-pills-scroll::-webkit-scrollbar{display:none}
.cat-pill{flex-shrink:0;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;color:var(--text2);background:var(--bg3);border:1px solid transparent;white-space:nowrap;transition:.2s;text-decoration:none}
.cat-pill:hover{color:#fff;border-color:rgba(255,255,255,.12)}
.cat-pill.active{background:var(--pill-color,var(--accent));color:#fff;border-color:transparent}
.catalog-search-form{display:flex;flex-shrink:0;background:var(--bg);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.catalog-search-form input{background:none;border:none;padding:7px 14px;color:var(--text);font-size:13px;outline:none;width:150px}
.catalog-search-form button{background:none;border:none;padding:7px 12px;color:var(--text2);cursor:pointer;font-size:14px;transition:.2s}
.catalog-search-form button:hover{color:var(--accent)}
.catalog-search-result{color:var(--text2);font-size:14px;margin-bottom:16px}
.catalog-row-title{color:#fff}
.catalog-row-title::before{content:'';display:inline-block;width:4px;height:18px;background:var(--cat-color,var(--accent));border-radius:2px;margin-right:10px;vertical-align:middle}
.catalog-row-icon{font-size:18px;margin-right:4px;vertical-align:middle}
.catalog-row-count{font-size:11px;color:var(--text3);font-weight:400;margin-left:6px}

/* ── Trailer modal ─────────────────────────────────────────── */
.trailer-modal{display:none;position:fixed;inset:0;z-index:500}
.trailer-modal.open{display:flex;align-items:center;justify-content:center}
.trailer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);cursor:pointer}
.trailer-box{position:relative;z-index:1;width:90%;max-width:900px}
.trailer-close{
  position:absolute;top:-40px;right:0;
  background:none;border:none;color:rgba(255,255,255,.7);
  font-size:22px;cursor:pointer;padding:8px;line-height:1;
  transition:color .2s;
}
.trailer-close:hover{color:#fff}

/* ── Bottom navigation ─────────────────────────────────────── */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:62px;
  background:rgba(15,15,15,.97);
  border-top:1px solid rgba(255,255,255,.08);
  z-index:200;
  backdrop-filter:blur(16px);
}
.bottom-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:rgba(255,255,255,.4);font-size:10px;font-weight:600;
  text-decoration:none;transition:color .2s;
  padding:6px 4px 4px;min-height:62px;letter-spacing:.3px;
}
.bottom-nav-item svg{width:22px;height:22px;stroke-width:1.8;transition:.2s}
.bottom-nav-item.active,.bottom-nav-item:active{color:var(--accent)}
.bottom-nav-item.active svg{transform:scale(1.15);stroke:var(--accent)}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer{
  background:#080808;
  margin-top:80px;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-top{padding:64px 0 44px;border-bottom:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
.footer-brand .site-logo{margin-bottom:18px;display:inline-flex}
.footer-brand p{font-size:14px;color:rgba(255,255,255,.4);line-height:1.8;max-width:280px}
.footer-stats{display:flex;gap:18px;margin-top:22px}
.fstat{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 18px;min-width:72px;transition:.2s}
.fstat:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.fstat-num{font-size:22px;font-weight:900;color:var(--accent)}
.fstat-lbl{font-size:10px;color:rgba(255,255,255,.3);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.footer-links h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.35);margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-links a{display:flex;align-items:center;gap:7px;font-size:14px;color:rgba(255,255,255,.5);margin-bottom:12px;transition:.2s}
.footer-links a:hover{color:#fff;padding-left:6px}
.footer-bottom{padding:20px 0}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.2)}
.footer-copy strong{color:rgba(255,255,255,.45)}
.footer-made{font-size:12px;color:rgba(255,255,255,.18);display:flex;align-items:center;gap:5px}
.footer-made span{color:var(--accent)}
[data-theme="light"] .site-footer{background:#1a1a1a}
[data-theme="ocean"] .site-footer{background:rgba(4,9,18,.98)}

/* ── Light theme overrides ─────────────────────────────────── */
[data-theme="light"] .main-nav>a{color:var(--text2)}
[data-theme="light"] .drama-title-v2{color:var(--text);text-shadow:none}
[data-theme="light"] .drama-backdrop-overlay{background:linear-gradient(to bottom,rgba(244,244,244,.3) 0%,rgba(244,244,244,.9) 70%,var(--bg) 100%)}
[data-theme="light"] .poster-placeholder{background:linear-gradient(135deg,#dde0f0,#c8ccde)}
[data-theme="light"] .mobile-menu-panel{background:var(--bg2)}
[data-theme="light"] .hero-slide-overlay{background:linear-gradient(to right,rgba(244,244,244,.92) 0%,rgba(244,244,244,.5) 45%,rgba(244,244,244,.1) 75%,transparent 100%),linear-gradient(to top,rgba(244,244,244,.98) 0%,rgba(244,244,244,.4) 25%,transparent 50%)}
[data-theme="light"] .hero-title{color:var(--text)}
[data-theme="light"] .hero-desc{color:var(--text2)}
[data-theme="light"] .hero-btn-play{background:#111;color:#fff}
[data-theme="light"] .hero-btn-play:hover{background:#333;color:#fff}
[data-theme="light"] .bottom-nav{background:rgba(255,255,255,.97);border-top-color:var(--border)}
[data-theme="light"] .bottom-nav-item{color:#999}
[data-theme="ocean"] .drama-backdrop{filter:blur(30px) brightness(.22) saturate(.6)}

/* ── Drag-drop area (admin) ──────────────────────────────────── */
.nav-dropdown-wrap{position:relative}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* Large desktop */
@media(min-width:1280px){
  .container{max-width:1500px}
  .drama-grid{grid-template-columns:repeat(6,1fr) !important}
  .hero-slide-inner{padding:100px 0 130px}
}

/* Tablet */
@media(min-width:900px) and (max-width:1279px){
  .drama-grid{grid-template-columns:repeat(4,1fr) !important}
}

/* Tablet (mid) */
@media(min-width:768px) and (max-width:1024px){
  .drama-hero-inner{grid-template-columns:180px 1fr;gap:28px}
  .drama-title-v2{font-size:26px}
  .episode-layout{grid-template-columns:1fr 240px}
  .ep-sidebar{position:sticky;max-height:60vh}
  .hero-slide-poster-wrap{width:170px}
}

/* Tablet layout */
@media(max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .episode-layout{grid-template-columns:1fr}
  .ep-sidebar{position:static;max-height:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}

/* Mobile */
@media(max-width:767px){
  .container{padding:0 16px}

  /* Header */
  .hamburger{display:flex}
  .main-nav{display:none}
  .header-search{display:none}
  .theme-switcher{gap:4px}
  .theme-dot{width:12px;height:12px}
  .genre-nav-wrap{top:56px}

  /* Bottom nav */
  .bottom-nav{display:flex}
  body{padding-bottom:70px}

  /* Hero */
  .hero-slide-inner{grid-template-columns:1fr;padding:60px 0 80px}
  .hero-slide-poster-wrap{display:none}
  .hero-title{font-size:clamp(24px,6vw,38px)}
  .hero-desc{font-size:13.5px;max-width:100%}
  .hero-btn-play,.hero-btn-trailer{padding:13px 24px;font-size:14px}

  /* Drama grid */
  .drama-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}

  /* HP rows */
  .hp-card{width:130px}
  .hp-top10-card{width:150px}
  .hp-row-title{font-size:16px}
  .cat-card-grid{grid-template-columns:repeat(2,1fr);gap:10px}

   /* Drama detail hero */
  .drama-hero-inner{grid-template-columns:1fr;gap:20px;padding:32px 0 36px}
  .drama-poster-col{max-width:160px;margin:0 auto}
  .drama-title-v2{font-size:22px;text-align:center}
  .drama-title-kr{text-align:center}
  .drama-badges,.drama-meta-row,.drama-genres{justify-content:center}
  .drama-actions{justify-content:center;gap:8px}
  .drama-desc-v2{font-size:13px;max-width:100%}
  .btn-play{width:100%;max-width:280px;justify-content:center}
  .btn-trailer{width:100%;max-width:280px;justify-content:center}
  .btn-fav-detail{width:100%;max-width:280px;justify-content:center}
  .episodes-grid{grid-template-columns:repeat(5,1fr);gap:6px}
  .ep-number{font-size:18px}

   /* Video */
  .video-wrap{border-radius:0 !important;margin-left:-16px;margin-right:-16px;width:calc(100% + 32px);max-width:calc(100% + 32px);margin-bottom:14px}
  .episode-page .video-wrap{border-radius:0 !important;box-shadow:none}
  .film-player-section{margin-left:-16px;margin-right:-16px;width:calc(100% + 32px)}

  /* Episode */
  .episode-title{font-size:15px;margin-bottom:10px}
  .breadcrumb{font-size:11px;padding:8px 0 10px}
  .ep-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-bottom:16px}
  .ep-nav a,.ep-nav button{display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:700;padding:12px 8px;border-radius:6px;min-height:48px;text-align:center}
  .episode-layout{grid-template-columns:1fr}
  .ep-sidebar{position:static;max-height:260px;border-radius:8px}
  .episodes-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .ep-number{font-size:16px}

  /* Source/season tabs scroll */
  .source-tabs,.season-tabs,.genre-nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .source-tabs::-webkit-scrollbar,.season-tabs::-webkit-scrollbar,.genre-nav::-webkit-scrollbar{display:none}
  .source-tab,.season-tab,.genre-tag{flex-shrink:0;white-space:nowrap}

  /* Film sahifasi — tugmalar markazda */
  .drama-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .drama-actions .btn-play,
  .drama-actions .btn-trailer,
  .drama-actions .btn-fav-detail{
    width:100%;
    justify-content:center;
  }

   /* Buttons */
  .btn-primary{font-size:13px !important;padding:10px 18px !important}
  .btn-secondary{font-size:13px !important;padding:10px 16px !important}
  .btn-fav-detail,.btn-trailer{padding:11px 16px !important;font-size:13px !important;width:100%;max-width:280px;justify-content:center}
  .btn-play{padding:12px 24px !important;font-size:14px !important}

   /* Film player — to'liq kenglik */
  .film-player-section{
    margin-bottom:24px;
  }
  .film-player-section .video-wrap{
    border-radius:0 !important;
    margin-left:-16px;
    margin-right:-16px;
    width:calc(100% + 32px);
    max-width:calc(100% + 32px);
  }

   /* Footer */
  .footer-grid{grid-template-columns:1fr}
  .footer-top{padding:36px 0 28px}
  .footer-stats{gap:10px}
  .footer-bottom-inner{flex-direction:column;text-align:center;gap:6px}

  /* Catalog hero */
  .catalog-hero-inner{flex-direction:column;text-align:center;align-items:center}
  .catalog-icon-wrap{width:72px;height:72px;font-size:34px;border-radius:16px}
  .catalog-hero-title{font-size:26px}
  .catalog-subbar-inner{flex-wrap:wrap;gap:8px}
  .catalog-search-form{width:100%}
  .catalog-search-form input{flex:1;width:auto}
  .nav-dropdown-wrap{display:none}
}

@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
}

/* ═══════════════════════════════════════════════════════════════
   KATTA YAXSHILASHLAR — vizual sifat
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. SKELETON LOADER — karta yuklanayotganda ────────────── */
@keyframes skeleton-pulse {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.card-poster,
.hp-card-img,
.fcc-poster {
  background: linear-gradient(
    90deg,
    var(--bg3) 25%,
    rgba(255,255,255,.06) 50%,
    var(--bg3) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.6s ease infinite;
}
/* Rasm yuklanganida animation to'xtatiladi */
.card-poster img,
.hp-card-img img,
.fcc-poster img {
  opacity: 0;
  transition: opacity .35s ease;
  position: relative;
  z-index: 1;
}
.card-poster img.img-loaded,
.hp-card-img img.img-loaded,
.fcc-poster img.img-loaded {
  opacity: 1;
}
/* Poster placeholder — animation ustida */
.poster-placeholder {
  animation: none !important;
  background: linear-gradient(135deg, #1e1e2e, #16213e) !important;
  position: relative; z-index: 1;
}

/* ── 2. KARTA SOYASI VA CHEGARASI — premium ko'rinish ─────── */
.drama-card {
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}
.drama-card:hover {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
}

/* ── 3. SECTION SARLAVHALAR — har biri ajralib tursin ─────── */

/* Bosh sahifa section uchun umumiy pattern */
.hp-section + .hp-section,
.hp-row-section + .hp-row-section {
  border-top: 1px solid rgba(255,255,255,.04);
  padding-top: 36px;
}

/* Row title chap rang chizig'i — ajoyib ko'rinish */
.hp-row-title {
  position: relative;
  padding-left: 14px;
}
.hp-row-title::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 3px;
  background: var(--hp-row-color, var(--accent));
  border-radius: 2px;
  box-shadow: 0 0 8px var(--hp-row-color, var(--accent));
}

/* Bosh sahifa section asosiy sarlavha */
.hp-sec-title {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 900;
  letter-spacing: -.4px;
}

/* ── 4. HORIZONTAL SCROLL — o'ng tomonda fade indikator ───── */
.hp-row-section {
  position: relative;
}
.hp-row-scroll-wrap {
  position: relative;
}
.hp-row-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 60px;
  background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}
/* Scroll tugmalari */
.hp-row-btn {
  position: absolute;
  top: 30%; /* poster o'rtasiga */
  right: 0;
  transform: translateY(-50%);
  width: 38px; height: 60px;
  border-radius: 4px 0 0 4px;
  background: rgba(20,20,20,.85);
  border: 1px solid rgba(255,255,255,.12);
  border-right: none;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(8px);
  transition: background .18s, width .18s;
}
.hp-row-btn:hover { background: rgba(40,40,40,.95); width: 44px; }
.hp-row-btn-l {
  right: auto;
  left: 0;
  border-radius: 0 4px 4px 0;
  border: 1px solid rgba(255,255,255,.12);
  border-left: none;
}
@media(min-width: 900px) {
  .hp-row-btn { display: flex; }
}

/* ── 5. MOBIL HERO — to'liq rangli fon ───────────────────── */
@media(max-width: 767px) {
  /* Hero minimal height */
  .hero-slide { min-height: 480px; }
  .hero-slide-inner { padding: 50px 0 70px; }

  /* Mobilda qoralik emas — gradient fon */
  .hero-slide-bg {
    filter: brightness(.38) saturate(.8);
  }
  .hero-slide-overlay {
    background:
      linear-gradient(to top, rgba(13,13,13,.98) 0%, rgba(13,13,13,.4) 40%, transparent 70%),
      linear-gradient(to right, rgba(13,13,13,.6) 0%, transparent 60%);
  }

  /* Sarlavha mobilda kattaroq */
  .hero-title { font-size: clamp(24px, 7vw, 38px); font-weight: 900; }
  .hero-desc { display: block; font-size: 13px; line-height: 1.6; opacity: .8; }
  .hero-badges { gap: 6px; }
  .hero-btns { gap: 8px; }
  .hero-btn-play { padding: 13px 28px; font-size: 14px; }
  .hero-btn-trailer { padding: 13px 18px; font-size: 14px; }

  /* Progress dots kattaroq */
  .hero-dot { width: 8px; height: 4px; }
  .hero-dot.active { width: 24px; }
}

/* ── 6. MOBIL KARTA GRID — kattaroq, nafosatli ─────────── */
@media(max-width: 767px) {
  /* Karta grid */
  .drama-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Karta info mobilda aniqroq */
  .card-info {
    padding: 8px 8px 10px;
  }
  .card-title {
    font-size: 12.5px;
    font-weight: 700;
    -webkit-line-clamp: 2;
  }
  .card-meta {
    font-size: 11px;
    gap: 4px;
  }

  /* HP horizontal kartalar kattaroq */
  .hp-card { width: 130px !important; }
  .hp-top10-card { width: 150px !important; }
  .hp-top10-rank .top10-num { font-size: 42px; }

  /* Row section title mobilda */
  .hp-row-title { font-size: 15px; }
  .hp-row-more { padding: 5px 10px; font-size: 12px; }

  /* Section oraliq */
  .hp-section { padding-top: 28px !important; }
  .hp-grid-section { padding-top: 16px !important; }
}

/* ── 7. SECTION ORALIG'I — vizual bo'linish ─────────────── */
.hp-section {
  padding-bottom: 8px;
}
/* Genre section alohida */
.hp-genres-section {
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 36px 0;
  margin: 8px 0;
}

/* ── 8. GENRE FILTER BAR — yanada chiroyli ──────────────── */
.genre-nav-wrap {
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.genre-pill {
  border-radius: 6px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}
.genre-pill.active {
  box-shadow: 0 2px 10px rgba(229,9,20,.35);
}

/* ── 9. TOP-10 KARTALAR — raqam effekti ─────────────────── */
.hp-top10-scroll {
  padding-bottom: 12px;
}
.hp-top10-card .hp-card-img {
  border-radius: 6px;
}

/* ── 10. EMPTY STATE — ma'lumot yo'q bo'lganda ─────────── */
.drama-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.drama-grid-empty-icon {
  font-size: 56px;
  filter: grayscale(.5);
  margin-bottom: 4px;
}
.drama-grid-empty h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text2);
}
.drama-grid-empty p {
  font-size: 13px;
  color: var(--text3);
}

/* ── 11. FOOTER TOP AJRATUVCHI CHIZIQ ───────────────────── */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(229,9,20,.4) 20%,
    rgba(255,165,2,.3) 50%,
    rgba(79,145,255,.3) 80%,
    transparent 100%);
}

/* ── 12. SCROLL INDICATOR — foydalanuvchi uchun ─────────── */
.scroll-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text3);
  margin-top: 6px;
  animation: scroll-hint-pulse 2s ease-in-out 3;
}
.scroll-hint svg {
  animation: bounce-x 1s ease-in-out infinite;
}
@keyframes bounce-x {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(4px); }
}
@keyframes scroll-hint-pulse {
  0%, 100% { opacity: .5; }
  50%       { opacity: 1; }
}

/* ── 13. HP KARTA TITLE — ikki qator, aniq ──────────────── */
.hp-card-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text2);
  margin-top: 6px;
}
.hp-card:hover .hp-card-title { color: var(--text); }

/* ── 14. SMOOTH SCROLL barcha qatorlarda ────────────────── */
.hp-row-scroll {
  scroll-behavior: smooth;
}
.hp-row-scroll:active {
  cursor: grabbing;
}

/* ── 15. HEADER scroll da qorayadi ──────────────────────── */
.site-header.scrolled {
  background: rgba(13,13,13,.99);
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* ── 16. QIZIL ACCENT CHIZIQ sahifa yuqorisida ──────────── */
#scrollProgress {
  background: linear-gradient(90deg, #e50914, #ff6b35, #ffa502);
  height: 3px;
  border-radius: 0;
  z-index: 9999;
}

/* ── 17. MOBIL BOTTOM NAV — kattaroq, aniqroq ───────────── */
@media(max-width: 767px) {
  .bottom-nav {
    height: 60px;
    background: rgba(10,10,10,.98);
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -4px 20px rgba(0,0,0,.4);
  }
  .bottom-nav-item {
    font-size: 9px;
    letter-spacing: .4px;
    min-height: 60px;
  }
  .bottom-nav-item svg {
    width: 21px; height: 21px;
  }
  .bottom-nav-item.active {
    color: var(--accent);
  }
  body { padding-bottom: 64px; }
}

/* ── 18. HEADER LOGO MOBILE ─────────────────────────────── */
@media(max-width: 767px) {
  .header-inner { height: 56px; }
  .genre-nav-wrap { top: 56px; }
  .site-logo { font-size: 20px; }
}

/* ── 19. PAGINATION — aniqroq ───────────────────────────── */
.pagination {
  gap: 5px;
  margin: 36px auto 24px;
  justify-content: center;
}
.page-btn {
  min-width: 38px;
  height: 38px;
  font-size: 13px;
}

/* ── 20. DRAMA GRID CONTAINER padding ───────────────────── */
.hp-grid-section {
  padding-top: 24px;
  padding-bottom: 48px;
}

/* ── ANIMATION: card girdi ───────────────────────────────── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.drama-card {
  animation: cardIn .3s ease both;
}
.drama-card:nth-child(1)  { animation-delay: .03s; }
.drama-card:nth-child(2)  { animation-delay: .06s; }
.drama-card:nth-child(3)  { animation-delay: .09s; }
.drama-card:nth-child(4)  { animation-delay: .12s; }
.drama-card:nth-child(5)  { animation-delay: .15s; }
.drama-card:nth-child(6)  { animation-delay: .18s; }
.drama-card:nth-child(n+7){ animation-delay: .2s; }

/* ═══════════════════════════════════════════════════════════════
   FAVORITES SAHIFASI
   ═══════════════════════════════════════════════════════════════ */

/* Hero */
.fav-hero{
  position:relative;overflow:hidden;
  padding:52px 0 44px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.fav-hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%,rgba(229,9,20,.09) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 100% 20%,rgba(229,9,20,.05) 0%,transparent 60%);
  pointer-events:none;
}
.fav-hero-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.fav-hero-left{display:flex;align-items:center;gap:20px}
.fav-hero-icon{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,#e50914,#c8000e);
  display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
  box-shadow:0 8px 28px rgba(229,9,20,.4);
}
.fav-hero-title{
  font-size:clamp(22px,3vw,36px);font-weight:900;
  color:#fff;margin-bottom:5px;letter-spacing:-.4px;
}
.fav-hero-sub{font-size:13px;color:var(--text3);font-weight:500}

/* "Barchasini o'chirish" tugmasi */
.fav-clear-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);
  color:var(--text2);
  padding:10px 18px;border-radius:8px;
  font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:.2s;
}
.fav-clear-btn:hover{background:rgba(229,9,20,.12);border-color:rgba(229,9,20,.4);color:#ff6b6b}

/* Toolbar */
.fav-toolbar{
  background:var(--bg);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:68px;z-index:50;
}
.fav-toolbar-inner{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;flex-wrap:wrap;
}

/* Qidiruv */
.fav-search-wrap{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:7px 14px;
  min-width:220px;flex:1;max-width:340px;
  transition:border-color .2s;
}
.fav-search-wrap:focus-within{border-color:rgba(229,9,20,.4)}
.fav-search-wrap svg{color:rgba(255,255,255,.35);flex-shrink:0}
#fav-search{
  background:none;border:none;outline:none;
  color:var(--text);font-size:13px;
  font-family:inherit;width:100%;
}
#fav-search::placeholder{color:rgba(255,255,255,.3)}

/* Sort */
.fav-sort{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fav-sort-label{font-size:12px;color:var(--text3);font-weight:600;margin-right:3px}
.fav-sort-btn{
  padding:5px 13px;border-radius:20px;
  font-size:12px;font-weight:700;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text2);cursor:pointer;
  transition:.15s;font-family:inherit;
}
.fav-sort-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.fav-sort-btn.active{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 3px 12px rgba(229,9,20,.3)}

/* Stats */
.fav-stats{
  margin-left:auto;font-size:12px;
  color:var(--text3);font-weight:500;white-space:nowrap;
}

/* Main */
.fav-main{padding-top:32px;padding-bottom:60px;display:flex;flex-direction:column;gap:40px}

/* Section header */
.fav-section-head{
  display:flex;align-items:center;gap:8px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.fav-section-icon{font-size:18px}
.fav-section-title{font-size:18px;font-weight:800;color:#fff}
.fav-section-badge{
  font-size:11px;font-weight:700;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  padding:2px 10px;border-radius:20px;
  color:var(--text2);
}

/* ── "Davom etish" kartalar ─────────────────────────────────── */
.fav-continue-list{
  display:flex;gap:12px;
  overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.fav-continue-list::-webkit-scrollbar{display:none}

.fav-cont-card{
  flex-shrink:0;width:200px;
  scroll-snap-align:start;
  background:var(--bg2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.fav-cont-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  border-color:rgba(229,9,20,.35);
}
.fcc-poster{
  position:relative;
  aspect-ratio:2/3;overflow:hidden;
  background:var(--bg3);
}
.fcc-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.fav-cont-card:hover .fcc-poster img{transform:scale(1.06)}
.fcc-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s;
}
.fav-cont-card:hover .fcc-overlay{opacity:1}
.fcc-info{padding:12px}
.fcc-title{
  font-size:13px;font-weight:700;color:#fff;
  margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:1;
  -webkit-box-orient:vertical;overflow:hidden;
}
.fcc-ep{font-size:11px;color:var(--accent);font-weight:600;margin-bottom:8px}
.fcc-prog-track{
  height:3px;background:rgba(255,255,255,.1);
  border-radius:2px;overflow:hidden;margin-bottom:5px;
}
.fcc-prog-fill{
  height:100%;background:var(--accent);
  border-radius:2px;transition:width .4s ease;
}
.fcc-pct{font-size:10px;color:var(--text3);font-weight:500}

/* ── Bo'sh holat ─────────────────────────────────────────────── */
.fav-empty-wrap{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:80px 20px;gap:14px;
}
.fav-empty-heart{
  color:rgba(229,9,20,.25);
  animation:heartbeat 2.4s ease-in-out infinite;
}
@keyframes heartbeat{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.12)}
  28%{transform:scale(1)}
  42%{transform:scale(1.08)}
  56%{transform:scale(1)}
}
.fav-empty-wrap h2{font-size:24px;font-weight:900;color:#fff}
.fav-empty-wrap p{font-size:14px;color:var(--text2);line-height:1.7;max-width:300px}
.fav-empty-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  padding:12px 28px;border-radius:8px;
  font-size:14px;font-weight:800;
  transition:background .2s,transform .15s;
  margin-top:6px;border:none;cursor:pointer;font-family:inherit;
}
.fav-empty-btn:hover{background:var(--accent-h);transform:scale(1.04);color:#fff}

/* ── Confirm dialog ──────────────────────────────────────────── */
.fav-confirm-dlg{
  position:fixed;inset:0;z-index:600;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s;
  pointer-events:none;
}
.fav-confirm-dlg.fcd-show{opacity:1;pointer-events:auto}
.fcd-box{
  background:#1c1c1c;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:32px 36px;
  text-align:center;
  max-width:340px;width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
  transform:scale(.95);
  transition:transform .25s;
}
.fav-confirm-dlg.fcd-show .fcd-box{transform:scale(1)}
.fcd-icon{font-size:40px;margin-bottom:12px}
.fcd-box h3{font-size:18px;font-weight:800;color:#fff;margin-bottom:8px}
.fcd-box p{font-size:13px;color:var(--text2);margin-bottom:22px;line-height:1.6}
.fcd-btns{display:flex;gap:10px;justify-content:center}
.fcd-cancel{
  flex:1;padding:10px;border-radius:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:.15s;
}
.fcd-cancel:hover{background:rgba(255,255,255,.13);color:#fff}
.fcd-confirm{
  flex:1;padding:10px;border-radius:8px;
  background:var(--accent);border:none;
  color:#fff;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;
  transition:.15s;
}
.fcd-confirm:hover{background:var(--accent-h)}

/* Responsive */
@media(max-width:767px){
  .fav-hero{padding:36px 0 30px}
  .fav-hero-icon{width:50px;height:50px;border-radius:14px}
  .fav-hero-title{font-size:22px}
  .fav-toolbar-inner{gap:8px}
  .fav-search-wrap{min-width:0;max-width:100%;flex:1}
  .fav-stats{display:none}
  .fav-cont-card{width:155px}
}

/* ═══════════════════════════════════════════════════════
   PROGRESS TRACKER UI
   ═══════════════════════════════════════════════════════ */

/* ── "Davom etish" banneri (drama sahifasi) ──────── */
#kd-continue-banner{
  display:none;
  background:linear-gradient(135deg,rgba(229,9,20,.12),rgba(229,9,20,.04));
  border:1px solid rgba(229,9,20,.25);
  border-radius:10px;
  padding:16px 20px;
  margin-bottom:28px;
  display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;
}
.cont-icon{font-size:28px;flex-shrink:0}
.cont-body{flex:1;min-width:0}
.cont-label{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.cont-ep-label{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont-pct-track{
  height:3px;background:rgba(255,255,255,.1);border-radius:2px;
  margin-top:8px;overflow:hidden;
}
.cont-pct-bar{
  height:100%;background:var(--accent);border-radius:2px;
  transition:width .4s ease;
}
.cont-ep-link{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:#fff;
  padding:10px 22px;border-radius:6px;
  font-size:14px;font-weight:800;
  white-space:nowrap;
  transition:background .2s,transform .15s;
  flex-shrink:0;
}
.cont-ep-link:hover{background:var(--accent-h);transform:scale(1.04);color:#fff}
.cont-ep-link svg{flex-shrink:0}

/* ── Episode kartalaridagi progress bar ───────────── */
.ep-prog-bar{
  position:absolute;bottom:0;left:0;right:0;
  height:3px;background:rgba(255,255,255,.12);
  border-radius:0 0 6px 6px;
  overflow:hidden;
}
.ep-prog-fill{
  height:100%;background:var(--accent);
  border-radius:inherit;
  transition:width .5s ease;
}

/* Ko'rilgan epizod */
.episode-card.ep-watched{
  border-color:rgba(46,213,115,.35) !important;
  background:rgba(46,213,115,.06) !important;
}
.episode-card.ep-watched .ep-number{
  color:#2ed573;
}
.episode-card.ep-watched::after{
  content:'✓';
  position:absolute;top:5px;right:5px;
  width:16px;height:16px;border-radius:50%;
  background:#2ed573;color:#000;
  font-size:9px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}

/* ── Yon panel epizod ro'yxatidagi progress ──────── */
.ep-item-watched{
  color:#2ed573 !important;
}
.ep-item-watched::after{
  content:'✓';
  margin-left:auto;font-size:10px;
  color:#2ed573;flex-shrink:0;
}
.ep-item-bar{
  position:absolute;bottom:0;left:0;right:0;
  height:2px;background:rgba(255,255,255,.08);
  overflow:hidden;
}
.ep-item-fill{
  height:100%;background:var(--accent);
  transition:width .4s ease;
}
.ep-list-item{position:relative}

/* ── Keyingi qism avtomatik o'tish (countdown) ───── */
.kd-next-countdown{
  position:fixed;bottom:20px;right:20px;
  z-index:500;
  transform:translateY(20px) scale(.95);
  opacity:0;
  transition:transform .3s,opacity .3s;
  pointer-events:none;
}
.kd-next-countdown.knc-show{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
.knc-inner{
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:18px 20px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.7);
  min-width:280px;
  max-width:320px;
}
.knc-ring{
  position:relative;flex-shrink:0;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
}
.knc-svg{
  position:absolute;inset:0;
  transform:rotate(-90deg);
}
.knc-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2.5}
.knc-fill{
  fill:none;stroke:var(--accent);stroke-width:2.5;
  stroke-linecap:round;
  transition:stroke-dashoffset .9s linear;
}
.knc-sec{
  font-size:18px;font-weight:900;color:#fff;
  position:relative;z-index:1;
}
.knc-info{flex:1;min-width:0}
.knc-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px}
.knc-ep{font-size:15px;font-weight:700;color:#fff}
.knc-btns{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.knc-btn-play{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--accent);color:#fff;
  padding:8px 14px;border-radius:6px;
  font-size:12px;font-weight:800;
  white-space:nowrap;
  transition:background .15s;
}
.knc-btn-play:hover{background:var(--accent-h);color:#fff}
.knc-btn-cancel{
  background:none;border:1px solid rgba(255,255,255,.15);
  color:var(--text3);padding:6px 10px;border-radius:6px;
  font-size:11px;cursor:pointer;font-family:inherit;
  transition:.15s;
}
.knc-btn-cancel:hover{border-color:rgba(255,255,255,.3);color:#fff}

/* ── Klaviatura yorliqlari toltip (episode) ─────── */
.kd-shortcut-hint{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.8);color:rgba(255,255,255,.7);
  padding:6px 14px;border-radius:20px;font-size:12px;
  opacity:0;transition:opacity .25s;pointer-events:none;
  z-index:400;white-space:nowrap;
}
.kd-shortcut-hint.show{opacity:1}

/* ═══════════════════════════════════════════════════════════════
   MAXSUS VIDEO PLAYER — KdPlayer
   ═══════════════════════════════════════════════════════════════ */

.kd-player{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;
  user-select:none;
  -webkit-user-select:none;
  box-shadow:0 12px 48px rgba(0,0,0,.6);
}
.kd-player:fullscreen{border-radius:0}
.kd-player:-webkit-full-screen{border-radius:0}

/* Video element */
.kd-player video{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
  background:#000;
}

/* Copy himoya — right-click menu o'chirish */
.kd-player video{pointer-events:none}
.kd-player{-webkit-touch-callout:none}

/* ── Loader ── */
.kd-loader{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);
  z-index:20;
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.kd-loader.show{opacity:1}
.kd-spinner{
  width:44px;height:44px;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:#e50914;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Play/Pause center animation ── */
.kd-center-anim{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0);
  width:72px;height:72px;border-radius:50%;
  background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;
  z-index:15;pointer-events:none;
  opacity:0;
  transition:opacity .15s,transform .15s;
}
.kd-center-anim.show{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}
.kd-center-anim svg{color:#fff}

/* ── Skip flash (5 sekund) ── */
.kd-skip-flash{
  position:absolute;top:0;bottom:0;
  width:30%;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:6px;
  background:rgba(255,255,255,.08);
  opacity:0;pointer-events:none;
  z-index:14;
  transition:opacity .18s;
}
.kd-skip-flash.show{opacity:1}
.kd-skip-left-flash{left:0;border-radius:0 50% 50% 0}
.kd-skip-right-flash{right:0;border-radius:50% 0 0 50%}
.kd-skip-flash svg{color:#fff}
.kd-skip-flash span{font-size:13px;font-weight:700;color:#fff}

/* ── Click zone (double tap skip) ── */
.kd-click-zone{
  position:absolute;inset:0;
  z-index:10;
  display:grid;
  grid-template-columns:30% 40% 30%;
}
.kd-zone{cursor:pointer}

/* ── Gradient overlay ── */
.kd-gradient-top{
  position:absolute;top:0;left:0;right:0;height:80px;
  background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent);
  z-index:11;pointer-events:none;
  opacity:0;transition:opacity .3s;
}
.kd-gradient-bot{
  position:absolute;bottom:0;left:0;right:0;height:100px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  z-index:11;pointer-events:none;
  opacity:0;transition:opacity .3s;
}
.kd-player.ctrl-show .kd-gradient-top,
.kd-player.ctrl-show .kd-gradient-bot{opacity:1}

/* ── Title bar (top) ── */
.kd-title-bar{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;gap:10px;
  padding:14px 16px 10px;
  z-index:12;
  opacity:0;transition:opacity .3s;
  pointer-events:none;
}
.kd-player.ctrl-show .kd-title-bar{opacity:1;pointer-events:auto}
.kd-title-text{
  font-size:13px;font-weight:600;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;
}

/* ── Controls bar (bottom) ── */
.kd-controls{
  position:absolute;bottom:0;left:0;right:0;
  z-index:12;
  padding:0 14px 12px;
  opacity:0;transition:opacity .3s;
}
.kd-player.ctrl-show .kd-controls{opacity:1}
.kd-player.paused .kd-controls{opacity:1}

/* Progress bar */
.kd-progress{
  position:relative;
  height:4px;
  background:rgba(255,255,255,.25);
  border-radius:2px;
  margin-bottom:10px;
  cursor:pointer;
  transition:height .15s;
}
.kd-progress:hover{height:6px}
.kd-buffer{
  position:absolute;top:0;left:0;height:100%;
  background:rgba(255,255,255,.35);
  border-radius:inherit;
  width:0;pointer-events:none;
}
.kd-played{
  position:absolute;top:0;left:0;height:100%;
  background:#e50914;
  border-radius:inherit;
  width:0;pointer-events:none;
}
.kd-thumb{
  position:absolute;top:50%;right:-6px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;
  transform:translateY(-50%) scale(0);
  transition:transform .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  pointer-events:none;
}
.kd-progress:hover .kd-thumb{transform:translateY(-50%) scale(1)}

/* Time tooltip on progress */
.kd-time-tip{
  position:absolute;bottom:16px;
  background:rgba(0,0,0,.8);
  color:#fff;font-size:11px;font-weight:600;
  padding:3px 7px;border-radius:4px;
  transform:translateX(-50%);
  white-space:nowrap;pointer-events:none;
  display:none;
}
.kd-progress:hover .kd-time-tip{display:block}

/* Controls row */
.kd-ctrl-row{
  display:flex;align-items:center;
  gap:4px;
}
.kd-ctrl-left{display:flex;align-items:center;gap:4px;flex:1}
.kd-ctrl-right{display:flex;align-items:center;gap:4px}

/* Control buttons */
.kd-btn{
  width:34px;height:34px;
  border-radius:6px;
  background:none;border:none;
  color:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s,color .15s;
  flex-shrink:0;
  font-family:inherit;
  font-size:11px;font-weight:700;
}
.kd-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.kd-btn:active{background:rgba(255,255,255,.18)}
.kd-btn svg{flex-shrink:0}

/* Skip labels */
.kd-skip-label{
  font-size:10px;font-weight:800;
  color:rgba(255,255,255,.8);
  letter-spacing:.3px;
}

/* Volume */
.kd-vol-wrap{
  display:flex;align-items:center;gap:4px;
}
.kd-vol-slider{
  width:0;overflow:hidden;
  transition:width .2s;
}
.kd-vol-wrap:hover .kd-vol-slider,
.kd-vol-wrap:focus-within .kd-vol-slider{width:64px}
.kd-vol-slider input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:64px;height:3px;
  background:rgba(255,255,255,.3);
  border-radius:2px;outline:none;cursor:pointer;
  accent-color:#e50914;
}
.kd-vol-slider input::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;height:12px;
  border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  cursor:pointer;
}

/* Time display */
.kd-time{
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,.8);
  white-space:nowrap;
  padding:0 6px;
  letter-spacing:.2px;
}

/* Speed selector */
.kd-speed{
  position:relative;
}
.kd-speed-btn{
  font-size:12px;font-weight:700;
  color:rgba(255,255,255,.8);
  padding:0 8px;
  white-space:nowrap;
}
.kd-speed-menu{
  position:absolute;bottom:calc(100% + 8px);right:0;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  overflow:hidden;
  min-width:90px;
  box-shadow:0 8px 28px rgba(0,0,0,.7);
  display:none;
  z-index:20;
}
.kd-speed.open .kd-speed-menu{display:block}
.kd-speed-item{
  display:block;width:100%;
  padding:9px 14px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.7);
  background:none;border:none;cursor:pointer;
  text-align:left;font-family:inherit;
  transition:.12s;
}
.kd-speed-item:hover{background:rgba(255,255,255,.08);color:#fff}
.kd-speed-item.active{color:#e50914;font-weight:700}

/* Quality menu (xuddi speed kabi) */
.kd-quality{position:relative}
.kd-quality-menu{
  position:absolute;bottom:calc(100% + 8px);right:0;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;overflow:hidden;
  min-width:90px;
  box-shadow:0 8px 28px rgba(0,0,0,.7);
  display:none;z-index:20;
}
.kd-quality.open .kd-quality-menu{display:block}
.kd-quality-item{
  display:block;width:100%;
  padding:9px 14px;font-size:13px;
  color:rgba(255,255,255,.7);background:none;
  border:none;cursor:pointer;text-align:left;
  font-family:inherit;transition:.12s;font-weight:500;
}
.kd-quality-item:hover{background:rgba(255,255,255,.08);color:#fff}
.kd-quality-item.active{color:#e50914;font-weight:700}

/* Settings panel */
.kd-settings-panel{
  position:absolute;bottom:70px;right:14px;
  background:#1a1a1a;border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:12px 0;
  min-width:200px;z-index:20;
  box-shadow:0 8px 32px rgba(0,0,0,.7);
  display:none;
}
.kd-settings-panel.open{display:block}
.kd-set-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;font-size:13px;color:rgba(255,255,255,.7);
}
.kd-set-row:hover{background:rgba(255,255,255,.05)}
.kd-set-label{font-weight:600}
.kd-set-val{
  color:#e50914;font-size:12px;font-weight:700;
}

/* Subtitle track info */
.kd-subtitle-display{
  position:absolute;bottom:80px;left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-size:16px;font-weight:600;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.8);
  pointer-events:none;z-index:13;
  max-width:80%;line-height:1.5;
  display:none;
}

/* Keyboard shortcut hint */
.kd-shortcut-toast{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.7);
  color:rgba(255,255,255,.85);
  padding:6px 14px;border-radius:20px;
  font-size:12px;font-weight:600;
  pointer-events:none;z-index:25;
  opacity:0;transition:opacity .2s;
  white-space:nowrap;
}
.kd-shortcut-toast.show{opacity:1}

/* Fullscreen */
.kd-player:fullscreen .kd-controls{padding-bottom:20px}
.kd-player:fullscreen .kd-progress{height:5px}

/* ── Iframe wrapper (YouTube/embed) ── */
.kd-iframe-wrap{
  position:relative;
  width:100%;aspect-ratio:16/9;
  background:#000;border-radius:10px;overflow:hidden;
  box-shadow:0 12px 48px rgba(0,0,0,.6);
}
.kd-iframe-wrap iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:none;display:block;
}

/* ═══════════════════════════════════════════════════════
   JS-GENERATED ELEMENTS
   ═══════════════════════════════════════════════════════ */

/* Scroll progress bar (top) */
#scrollProgress{
  position:fixed;top:0;left:0;height:3px;
  background:linear-gradient(90deg,#e50914,#ff6b35);
  width:0;z-index:9999;pointer-events:none;
  transition:width .1s linear;
}

/* Back to top button */
#backToTop{
  position:fixed;bottom:84px;right:20px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(30,30,30,.9);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s,transform .25s;
  backdrop-filter:blur(8px);
  z-index:150;
}
#backToTop.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
#backToTop:hover{background:rgba(229,9,20,.8);border-color:transparent}
@media(min-width:768px){#backToTop{bottom:24px}}

/* Toast notification */
.kd-toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);
  background:#1f1f1f;color:#e5e5e5;
  padding:12px 22px;border-radius:6px;
  font-size:14px;font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.1);
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;
  z-index:1000;white-space:nowrap;max-width:90vw;
  text-align:center;
}
.kd-toast.kd-toast-show{opacity:1;transform:translateX(-50%) translateY(0)}
.kd-toast.kd-toast-success{border-color:rgba(46,213,115,.3);color:#2ed573}
.kd-toast.kd-toast-info{border-color:rgba(255,255,255,.12)}
@media(min-width:768px){.kd-toast{bottom:24px}}

/* ═══════════════════════════════════════════════════════════════
   MUKAMMAL RESPONSIVE — Mobil + Planshet
   ═══════════════════════════════════════════════════════════════ */

/* ── Kichik mobil (320px-374px) ─────────────────────────────── */
@media(max-width:374px){
  .container{padding:0 10px}
  .hero-title{font-size:20px !important}
  .hero-desc{font-size:12px !important}
  .hero-btn-play{padding:10px 16px !important;font-size:13px !important}
  .hero-btn-trailer{padding:10px 14px !important;font-size:13px !important}
  .hero-btn-fav{width:36px;height:36px}
  .drama-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px !important}
  .card-title{font-size:11px !important}
  .card-meta{font-size:9px !important}
  .hp-card{width:100px !important}
  .hp-top10-card{width:115px !important}
  .hp-row-title{font-size:14px}
  .hp-row-more{padding:4px 8px;font-size:11px}
  .genre-pill{padding:5px 12px;font-size:11px}
  .cat-card-grid{gap:6px}
  .cat-big-card{padding:14px 12px;min-height:100px}
  .cbc-icon{font-size:24px}
  .cbc-name{font-size:13px}
  .footer-stats{gap:6px}
  .fstat{padding:8px 10px;min-width:55px}
  .fstat-num{font-size:16px}
  .fstat-lbl{font-size:8px}
  .footer-links a{font-size:12px}
  .page-btn{min-width:32px;height:32px;font-size:12px}
  .episodes-grid{grid-template-columns:repeat(4,1fr) !important;gap:4px}
  .ep-number{font-size:14px}
  .ep-title{font-size:9px}
}

/* ── Standart mobil (375px-767px) ──────────────────────────── */
@media(min-width:375px) and (max-width:767px){
  .container{padding:0 16px}
  .drama-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}
  .card-title{font-size:12px !important}
  .hp-card{width:125px !important}
  .hp-top10-card{width:140px !important}
  .episodes-grid{grid-template-columns:repeat(5,1fr) !important;gap:6px}
}

/* ── Katta mobil (500px-767px) ─────────────────────────────── */
@media(min-width:500px) and (max-width:767px){
  .drama-grid{grid-template-columns:repeat(3,1fr) !important;gap:12px !important}
  .hp-card{width:140px !important}
  .hp-top10-card{width:155px !important}
  .cat-card-grid{grid-template-columns:repeat(3,1fr)}
  .episodes-grid{grid-template-columns:repeat(6,1fr) !important}
}

/* ── Planshet (768px-1024px) ───────────────────────────────── */
@media(min-width:768px) and (max-width:1024px){
  .container{padding:0 20px}
  .drama-grid{grid-template-columns:repeat(3,1fr) !important;gap:14px !important}
  .hp-card{width:150px}
  .hp-top10-card{width:165px}
  .cat-card-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .episodes-grid{grid-template-columns:repeat(6,1fr) !important}
  .hero-slide-inner{padding:70px 0 90px}
  .hero-slide{min-height:500px}
  .hero-slide-poster-wrap{width:180px}
}

/* ── Katta planshet (1025px-1279px) ────────────────────────── */
@media(min-width:1025px) and (max-width:1279px){
  .drama-grid{grid-template-columns:repeat(4,1fr) !important}
  .hp-card{width:160px}
  .cat-card-grid{grid-template-columns:repeat(4,1fr)}
}

/* ═══════════════════════════════════════════════════════════════
   YANGI FUNKSIYALAR — Mukammal dizayn
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Scroll to top tugmasi ──────────────────────────────── */
.scroll-top-btn{
  position:fixed;
  bottom:80px;right:20px;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:150;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .3s,transform .3s,background .2s;
  box-shadow:0 4px 16px rgba(229,9,20,.4);
}
.scroll-top-btn.visible{
  opacity:1;
  transform:translateY(0);
}
.scroll-top-btn:hover{
  background:var(--accent-h);
  transform:translateY(-2px);
}
.scroll-top-btn svg{width:20px;height:20px}

@media(max-width:767px){
  .scroll-top-btn{
    bottom:76px;right:16px;
    width:40px;height:40px;
  }
}

/* ── 2. Loading progress bar ───────────────────────────────── */
.page-loading-bar{
  position:fixed;
  top:0;left:0;
  width:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#ff6b35,var(--accent));
  background-size:200% 100%;
  animation:loading-gradient 1.5s ease infinite;
  z-index:9999;
  transition:width .3s ease;
}
@keyframes loading-gradient{
  0%{background-position:0% 0}
  100%{background-position:200% 0}
}

/* ── 3. Image lazy load fade-in ────────────────────────────── */
img[loading="lazy"]{
  opacity:0;
  transition:opacity .4s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"].img-loaded{
  opacity:1;
}

/* ── 4. Smooth section reveal ──────────────────────────────── */
.section-reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease;
}
.section-reveal.revealed{
  opacity:1;
  transform:translateY(0);
}

/* ── 5. Card press effect (mobil) ──────────────────────────── */
@media(max-width:767px){
  .drama-card:active{
    transform:scale(0.97);
    transition:transform .1s;
  }
  .hp-card:active{
    transform:scale(0.95);
    transition:transform .1s;
  }
  .cat-big-card:active{
    transform:scale(0.97);
    transition:transform .1s;
  }
}

/* ── 6. Swipe indicator (horizontal scroll) ────────────────── */
.hp-row-scroll{
  position:relative;
}
.hp-row-scroll::after{
  content:'';
  position:absolute;
  top:0;right:0;bottom:0;
  width:40px;
  background:linear-gradient(to left,var(--bg) 0%,transparent 100%);
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .3s;
}
.hp-row-scroll.show-fade::after{
  opacity:1;
}

/* ── 7. Better genre pills scroll ──────────────────────────── */
.genre-nav-scroll{
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scroll-padding:0 16px;
}
.genre-nav-scroll::-webkit-scrollbar{
  display:none;
}

/* ── 8. Card skeleton animation ────────────────────────────── */
@keyframes card-skeleton{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.card-skeleton{
  background:linear-gradient(90deg,var(--bg3) 25%,rgba(255,255,255,.06) 50%,var(--bg3) 75%);
  background-size:200% 100%;
  animation:card-skeleton 1.6s ease infinite;
  border-radius:var(--radius);
}

/* ── 9. Hero slider dots kattaroq (mobil) ──────────────────── */
@media(max-width:767px){
  .hero-dot{
    width:12px;height:5px;
  }
  .hero-dot.active{
    width:32px;
  }
  .hero-nav{
    width:36px;height:60px;
  }
}

/* ── 10. Footer social icons ───────────────────────────────── */
.footer-social{
  display:flex;gap:10px;margin-top:16px;
}
.footer-social a{
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);
  transition:.2s;
}
.footer-social a:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:translateY(-2px);
}
.footer-social svg{width:16px;height:16px}

/* ── 11. Search suggestions dropdown ───────────────────────── */
.search-suggestions{
  position:absolute;
  top:100%;left:0;right:0;
  background:var(--bg2);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 8px 8px;
  max-height:300px;
  overflow-y:auto;
  z-index:100;
  display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.search-suggestions.active{display:block}
.search-suggestion-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  cursor:pointer;
  transition:.15s;
}
.search-suggestion-item:hover{background:rgba(255,255,255,.05)}
.search-suggestion-item img{
  width:32px;height:44px;
  object-fit:cover;border-radius:4px;
}
.search-suggestion-info{flex:1;min-width:0}
.search-suggestion-title{font-size:13px;font-weight:600;color:var(--text)}
.search-suggestion-meta{font-size:11px;color:var(--text3)}

/* ── 12. Toast notification ────────────────────────────────── */
.toast-container{
  position:fixed;
  top:80px;right:16px;
  z-index:9999;
  display:flex;flex-direction:column;gap:8px;
}
.toast{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 16px;
  min-width:250px;
  max-width:350px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  display:flex;align-items:center;gap:10px;
  animation:toast-in .3s ease;
}
.toast.toast-out{animation:toast-out .3s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}
.toast-icon{font-size:18px;flex-shrink:0}
.toast-message{font-size:13px;color:var(--text)}
.toast-success{border-left:3px solid #2ed573}
.toast-error{border-left:3px solid #ff6b6b}
.toast-info{border-left:3px solid #4f91ff}

@media(max-width:767px){
  .toast-container{top:70px;right:10px;left:10px}
  .toast{min-width:auto;max-width:none}
}

/* ── 13. Pull to refresh indicator ─────────────────────────── */
.pull-refresh{
  position:fixed;
  top:68px;left:50%;
  transform:translateX(-50%) translateY(-100%);
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:8px 16px;
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text2);
  z-index:100;
  transition:transform .3s;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.pull-refresh.active{transform:translateX(-50%) translateY(0)}
.pull-refresh-spinner{
  width:16px;height:16px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:767px){
  .pull-refresh{top:56px}
}

/* ── 14. Favorite animation ────────────────────────────────── */
@keyframes fav-pop{
  0%{transform:scale(1)}
  50%{transform:scale(1.3)}
  100%{transform:scale(1)}
}
.fav-btn.fav-animate{
  animation:fav-pop .3s ease;
}

/* ── 15. Rating stars display ──────────────────────────────── */
.rating-stars-display{
  display:inline-flex;gap:2px;
}
.rating-star{
  color:#f5c518;font-size:14px;
}
.rating-star.empty{color:var(--text3)}

/* ── 16. Content type badges (kattaroq) ────────────────────── */
@media(max-width:767px){
  .card-type-badge{
    font-size:8px;
    padding:2px 5px;
  }
  .card-new-badge{
    font-size:8px;
    padding:2px 5px;
  }
}

/* ── 17. Better pagination (mobil) ─────────────────────────── */
@media(max-width:767px){
  .pagination{
    gap:4px;
    margin:24px 0 16px;
  }
  .page-btn{
    min-width:34px;height:34px;
    font-size:12px;padding:0 8px;
  }
  .page-btn:first-child,
  .page-btn:last-child{
    min-width:auto;
    padding:0 10px;
  }
}

/* ── 18. Horizontal scroll momentum (iOS) ──────────────────── */
.hp-row-scroll,
.genre-nav-scroll,
.season-tabs,
.source-tabs{
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.hp-card{
  scroll-snap-align:start;
}

/* ── 19. Better touch targets (mobil) ──────────────────────── */
@media(max-width:767px){
  .main-nav>a,
  .genre-pill,
  .hp-row-more,
  .hp-card,
  .drama-card,
  .cat-big-card{
    -webkit-tap-highlight-color:transparent;
  }
  .fav-btn{
    width:32px;height:32px;
  }
}

/* ── 20. Safe area (iPhone notch) ──────────────────────────── */
@supports(padding:max(0px)){
  .site-header{
    padding-left:max(0px,env(safe-area-inset-left));
    padding-right:max(0px,env(safe-area-inset-right));
  }
  .bottom-nav{
    padding-left:max(0px,env(safe-area-inset-left));
    padding-right:max(0px,env(safe-area-inset-right));
    height:calc(62px + max(0px,env(safe-area-inset-bottom)));
    padding-bottom:max(0px,env(safe-area-inset-bottom));
  }
  .footer-bottom{
    padding-bottom:max(20px,env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════
   BOSH SAHIFA PREMIUM v5 — Mobile-first, O'ziga xos, Aniq
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO MOBIL: POSTER ORQ FONDA KO'RINADI ────────────── */
@media(max-width:767px){
  .hero-slide-poster-wrap{
    display:block !important;
    position:absolute !important;
    top:0;right:0;bottom:0;
    width:65%;
    pointer-events:none;
    z-index:0 !important;
    overflow:hidden;
    border-radius:0 !important;
  }
  .hero-slide-poster-glow{ display:none !important; }
  .hero-slide-poster{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:top center !important;
    border-radius:0 !important;
    box-shadow:none !important;
    opacity:0.18 !important;
    filter:saturate(.6) !important;
    transform:none !important;
    transition:none !important;
  }
  .hero-slide-inner{
    position:relative !important;
    z-index:2 !important;
    grid-template-columns:1fr !important;
    padding:52px 0 72px !important;
  }
  .hero-slide-overlay{
    background:
      linear-gradient(to right,
        rgba(13,13,13,1.0) 0%,
        rgba(13,13,13,1.0) 30%,
        rgba(13,13,13,.88) 55%,
        rgba(13,13,13,.22) 100%
      ),
      linear-gradient(to top,
        rgba(13,13,13,1.0) 0%,
        rgba(13,13,13,.52) 28%,
        transparent 64%
      ) !important;
    z-index:1 !important;
  }
  .hero-slide-bg{ filter:brightness(.15) saturate(.4) !important; }
  .hero-slide{ min-height:420px !important; }
  .hero-title{
    font-size:clamp(22px,7.2vw,32px) !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    text-shadow:0 2px 20px rgba(0,0,0,1) !important;
  }
  .hero-desc{
    font-size:13px !important;
    line-height:1.65 !important;
    color:rgba(255,255,255,.68) !important;
    max-width:90% !important;
    margin-bottom:22px !important;
  }
  .hero-badges{ gap:5px !important; margin-bottom:10px !important; }
  .hbadge{ font-size:10px !important; padding:3px 8px !important; }
  .hero-btns{ gap:8px !important; }
  .hero-btn-play{
    padding:12px 22px !important;
    font-size:13.5px !important;
    font-weight:900 !important;
    border-radius:7px !important;
  }
  .hero-btn-trailer{
    padding:11px 15px !important;
    font-size:13px !important;
    border-radius:7px !important;
  }
  .hero-btn-fav{ width:40px !important; height:40px !important; }
  .hero-dot{ width:10px !important; height:5px !important; }
  .hero-dot.active{ width:26px !important; }
}

/* Light tema: hero overlay */
@media(max-width:767px){
  [data-theme="light"] .hero-slide-overlay{
    background:
      linear-gradient(to right,
        rgba(244,244,244,1.0) 0%,
        rgba(244,244,244,1.0) 30%,
        rgba(244,244,244,.85) 55%,
        rgba(244,244,244,.2) 100%
      ),
      linear-gradient(to top,
        rgba(244,244,244,1.0) 0%,
        rgba(244,244,244,.5) 28%,
        transparent 64%
      ) !important;
  }
  [data-theme="light"] .hero-title{ text-shadow:0 2px 12px rgba(0,0,0,.2) !important; }
}

/* ── 2. DRAMA KARTALAR — DOIM KO'RINADIGAN MA'LUMOT ───────── */

/* Poster pastida doim gradient */
.card-poster::before{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:42%;
  background:linear-gradient(to top,rgba(0,0,0,.76) 0%,transparent 100%);
  z-index:2;
  pointer-events:none;
}
.drama-card:hover .card-poster::before{ opacity:.22; }

/* Qismlar soni — doim ko'rinsin */
.card-eps{ display:block !important; z-index:4 !important; }

/* Karta yuqorisida hover: aktsent chiziq */
.drama-card{
  border-top:2.5px solid transparent;
  transition:
    transform .3s cubic-bezier(.2,0,.2,1),
    box-shadow .3s,
    border-color .28s !important;
}
.drama-card:hover{ border-top-color:var(--accent) !important; }

/* Reyting — sariq badge */
.cm-rating{
  display:inline-flex !important;
  align-items:center !important;
  gap:2px !important;
  background:rgba(245,197,24,.1) !important;
  border:1px solid rgba(245,197,24,.2) !important;
  padding:1px 5px !important;
  border-radius:3px !important;
  font-size:11px !important;
  font-weight:800 !important;
  color:#f5c518 !important;
}

/* Karta title */
.card-title{ font-size:13.5px !important; font-weight:700 !important; }

@media(max-width:767px){
  .card-title{ font-size:12px !important; }
  .card-info{ padding:8px 8px 10px !important; }
  .card-meta{ gap:4px !important; margin-top:2px !important; }
}

/* ── 3. GORIZONTAL KARTALAR — KATTAROQ MOBILDA ────────────── */
@media(max-width:767px){
  .hp-card{ width:148px !important; }
  .hp-top10-card{ width:158px !important; }
  .hp-card-title{ font-size:12.5px !important; font-weight:700 !important; }
}
@media(max-width:374px){
  .hp-card{ width:130px !important; }
  .hp-top10-card{ width:140px !important; }
}

/* HP karta poster ostida gradient */
.hp-card-img::before{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:35%;
  background:linear-gradient(to top,rgba(0,0,0,.68) 0%,transparent 100%);
  z-index:2;
  pointer-events:none;
}
.hp-card-overlay{ z-index:3 !important; }

/* ── 4. SECTION SARLAVHALARI ──────────────────────────────── */
.hp-row-head{
  padding-bottom:14px !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  margin-bottom:18px !important;
}
.hp-row-more{
  background:rgba(255,255,255,.04) !important;
  border-radius:6px !important;
  font-weight:700 !important;
  transition:background .2s,color .2s,border-color .2s !important;
}
.hp-row-more:hover{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.hp-row-count{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
  font-size:11px !important;
}
@media(max-width:767px){
  .hp-row-head{ margin-bottom:14px !important; }
  .hp-section{ padding-top:22px !important; }
  .hp-row-section{ padding-top:22px !important; }
}

/* ── 5. JANR FILTRI — ZAMONAVIY ───────────────────────────── */
.genre-nav-wrap{
  background:rgba(12,12,12,.96) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
.genre-pill{
  border-radius:6px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.1px !important;
  padding:6px 16px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  transition:background .18s,color .18s,border-color .18s,transform .15s !important;
}
.genre-pill:hover{
  background:rgba(255,255,255,.11) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
  transform:translateY(-1px) !important;
}
.genre-pill.active{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 2px 12px rgba(229,9,20,.3) !important;
  transform:none !important;
}
[data-theme="light"] .genre-nav-wrap{
  background:rgba(248,248,248,.97) !important;
}
[data-theme="light"] .genre-pill{
  background:rgba(0,0,0,.05) !important;
  border-color:rgba(0,0,0,.1) !important;
  color:var(--text2) !important;
}
[data-theme="light"] .genre-pill:hover{
  background:rgba(0,0,0,.1) !important;
  color:var(--text) !important;
}

/* ── 6. JANRLAR WALL ──────────────────────────────────────── */
.gw-pill{
  border-radius:8px !important;
  padding:8px 18px !important;
  font-weight:600 !important;
  font-size:13px !important;
  border-color:rgba(255,255,255,.08) !important;
  transition:background .18s,color .18s,transform .15s,border-color .18s !important;
}
.gw-pill:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(255,255,255,.2) !important;
}
.gw-pill.active-all{
  background:linear-gradient(135deg,var(--accent),#c8000e) !important;
  box-shadow:0 4px 14px rgba(229,9,20,.28) !important;
  border-color:transparent !important;
}
@media(max-width:767px){
  .gw-pill{ padding:7px 14px !important; font-size:12px !important; }
}

/* ── 7. KATALOG KARTALAR MOBIL ────────────────────────────── */
@media(max-width:767px){
  .cat-card-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  .cat-big-card{
    padding:18px 14px !important;
    min-height:128px !important;
    border-radius:10px !important;
  }
  .cbc-icon{ font-size:26px !important; }
  .cbc-name{ font-size:14px !important; }
  .cbc-desc{ display:none !important; }
}

/* ── 8. HP GRID HEADER ────────────────────────────────────── */
.hp-grid-title{
  font-size:clamp(16px,2vw,20px) !important;
  font-weight:900 !important;
  letter-spacing:-.3px !important;
}
.hgt-count{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  padding:2px 10px !important;
  border-radius:10px !important;
  font-size:12px !important;
}

/* ── 9. ONGOING DOT — KO'ZGA KO'PROQ ─────────────────────── */
.hp-ongoing-dot{
  width:10px !important;
  height:10px !important;
  top:7px !important;
  right:7px !important;
  box-shadow:0 0 0 2px rgba(229,9,20,.2),0 0 8px rgba(229,9,20,.4) !important;
}

/* ── 10. LIGHT TEMA KARTA ─────────────────────────────────── */
[data-theme="light"] .drama-card{
  background:#fff !important;
  border-color:rgba(0,0,0,.08) !important;
}
[data-theme="light"] .drama-card:hover{
  box-shadow:0 12px 36px rgba(0,0,0,.14) !important;
}
[data-theme="light"] .card-info{ background:#fff !important; }
[data-theme="light"] .card-poster::before{
  background:linear-gradient(to top,rgba(0,0,0,.58) 0%,transparent 100%) !important;
}
[data-theme="light"] .cm-rating{
  background:rgba(200,140,0,.1) !important;
  border-color:rgba(200,140,0,.25) !important;
  color:#b8860b !important;
}

/* ── 11. HEADER — MOBIL TAKOMIL ───────────────────────────── */
@media(max-width:767px){
  .header-inner{ gap:10px !important; }
  .site-logo{ font-size:21px !important; }
  /* Tema tugmalari kichikroq */
  .theme-switcher{ gap:3px !important; }
  .theme-dot{ width:11px !important; height:11px !important; }
}

/* ── 12. SCROLL PERFORMANCE ───────────────────────────────── */
.drama-card,.hp-card,.cat-big-card{ will-change:transform; }
.hp-row-scroll,.genre-nav-scroll{ will-change:scroll-position; }

/* ═══════════════════════════════════════════════════════════════
   KARTA EFFEKTLAR — Toza, Ishonchli, Barcha Ekranda To'g'ri
   ═══════════════════════════════════════════════════════════════ */

/* ── C. DRAMA KARTA — YANGI GLOBAL DIZAYN ───────────────────── */
.drama-card{
  border-top:none !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:12px !important;
  overflow:hidden !important;
}
.card-poster{ border-radius:11px 11px 0 0 !important; }
.card-info{
  background:linear-gradient(to bottom,rgba(22,22,22,.98),var(--bg2)) !important;
  border-top:none !important;
}
[data-theme="light"] .card-info{
  background:linear-gradient(to bottom,rgba(252,252,252,.98),#fff) !important;
}

/* Hover: qizil glow border */
.drama-card:hover{
  border-color:rgba(229,9,20,.38) !important;
  box-shadow:
    0 22px 56px rgba(0,0,0,.72),
    0 0 0 1px rgba(229,9,20,.18),
    0 0 30px rgba(229,9,20,.09) !important;
}
[data-theme="ocean"] .drama-card:hover{
  border-color:rgba(79,145,255,.42) !important;
  box-shadow:
    0 22px 56px rgba(0,0,0,.72),
    0 0 0 1px rgba(79,145,255,.22),
    0 0 30px rgba(79,145,255,.1) !important;
}
[data-theme="light"] .drama-card:hover{
  border-color:rgba(229,9,20,.3) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.15),0 0 0 1px rgba(229,9,20,.2) !important;
}

/* ── D. SHINE SWEEP (card-poster::after da — to'g'ri clipping) ─ */
.drama-card .card-poster::after{
  content:'' !important;
  position:absolute !important;
  top:0 !important;left:-135% !important;
  bottom:auto !important;right:auto !important;
  width:55% !important;height:100% !important;
  background:linear-gradient(110deg,
    transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%) !important;
  transform:skewX(-18deg) !important;
  transition:left .75s ease !important;
  z-index:5 !important;
  pointer-events:none !important;
  border-radius:0 !important;
  filter:none !important;
  box-shadow:none !important;
}
.drama-card:hover .card-poster::after{ left:195% !important; }

/* ── E. SECTION SARLAVHALARI ────────────────────────────────── */
.hp-row-title{
  color:#fff;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.2px;
}

/* ── F. VBAR YASHILUVCHI GLOW ───────────────────────────────── */
@keyframes vbar-glow{
  0%,100%{box-shadow:0 0 5px currentColor;opacity:1}
  50%{box-shadow:0 0 16px currentColor,0 0 32px currentColor;opacity:.78}
}
.hp-row-vbar{animation:vbar-glow 2.6s ease-in-out infinite}

/* ── G. HERO SLIDER ─────────────────────────────────────────── */
.hero-slider{overflow:hidden}

/* ── H. KARTA KIRISH ANIMATSIYASI (faqat desktop) ───────────── */
@keyframes kd-card-in{
  from{transform:translateY(16px) scale(.97)}
  to  {transform:none}
}
@media(min-width:768px){
  .kd-entered{animation:kd-card-in .4s ease}
}

/* ── I. LOGO GRADIENT UNDERLINE ─────────────────────────────── */
.site-logo{position:relative}
.site-logo::after{
  content:'';
  position:absolute;
  bottom:-2px;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,#e50914,#8b3ed9,#4f91ff);
  border-radius:1px;
  opacity:0;
  transform:scaleX(.4);
  transform-origin:left;
  transition:opacity .3s,transform .35s;
}
.site-logo:hover::after{opacity:1;transform:scaleX(1)}

/* ── J. SCROLL PROGRESS — GRADIENT ─────────────────────────── */
#scrollProgress{
  background:linear-gradient(90deg,#e50914 0%,#8b3ed9 50%,#4f91ff 100%) !important;
}

/* ── K. GENRE SECTION — DIVIDER LINES ──────────────────────── */
.hp-genres-section{
  position:relative !important;
  border-top:none !important;
  border-bottom:none !important;
}
.hp-genres-section::before{
  content:'';
  position:absolute;top:0;left:5%;right:5%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,9,20,.38),rgba(139,62,219,.32),transparent);
}
.hp-genres-section::after{
  content:'';
  position:absolute;bottom:0;left:5%;right:5%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,9,20,.22),rgba(139,62,219,.18),transparent);
}

/* ── L. TOP-10 RAQAM ────────────────────────────────────────── */
.top10-num{
  color:var(--bg3);
  -webkit-text-stroke:2px rgba(255,255,255,.13);
}
.top10-num.top3{
  -webkit-text-stroke:2px rgba(229,9,20,.48);
  color:rgba(229,9,20,.08);
}

/* ── M. FOOTER — GRADIENT DIVIDER KUCHLI ───────────────────── */
.site-footer::before{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(229,9,20,.55) 20%,
    rgba(139,62,219,.45) 50%,
    rgba(79,145,255,.45) 80%,
    transparent 100%) !important;
  height:2px !important;
}

/* ── N. HP CARDS HOVER GLOW ─────────────────────────────────── */
.hp-card:hover .hp-card-img{
  box-shadow:0 12px 32px rgba(0,0,0,.55),0 0 0 1px rgba(229,9,20,.22) !important;
}

/* ── O. HEADER — SCROLL DA QORAYADI ────────────────────────── */
.site-header{
  transition:background .3s,box-shadow .3s;
}
.site-header.kd-scrolled{
  background:rgba(8,8,8,.99) !important;
  box-shadow:0 2px 24px rgba(0,0,0,.6) !important;
}

/* ── P. CATALOG KARTALAR — HOVER GLOW ──────────────────────── */
.cat-big-card:hover{
  box-shadow:
    0 18px 50px rgba(0,0,0,.6),
    0 0 0 1px var(--cc,rgba(229,9,20,.25)),
    0 0 24px rgba(229,9,20,.08) !important;
}

/* ── Q. PREFERS-REDUCED-MOTION ──────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hp-row-vbar,.hp-ongoing-dot{ animation:none !important; }
  .drama-card .card-poster::after{ transition:none !important; }
}

/* ── R. MOBILE HERO BG — QORAYTIRILGAN ─────────────────────── */
@media(max-width:767px){
  .hero-slide-bg{ filter:brightness(.12) saturate(.3) !important; }
}

/* ── S. PLANSHET (768px–1024px) — ANIQ GRID ────────────────── */
@media(min-width:768px) and (max-width:1024px){
  .drama-grid{
    grid-template-columns:repeat(3,1fr) !important;
    gap:16px !important;
  }
  .hp-card{ width:155px !important; }
  .hp-top10-card{ width:165px !important; }
  .cat-card-grid{
    grid-template-columns:repeat(3,1fr) !important;
    gap:12px !important;
  }
  .hero-slide-inner{ padding:70px 0 90px !important; }
  .hero-title{ font-size:clamp(28px,4vw,46px) !important; }
  .hero-slide-poster-wrap{ width:180px !important; }
  .hero-slide-poster-glow{ display:none; }
  /* HP sections */
  .hp-section{ padding-top:32px !important; }
  .hp-row-section{ padding-top:32px !important; }
}

/* ── T. OCEAN TEMA KARTALAR ─────────────────────────────────── */
[data-theme="ocean"] .drama-card:hover{
  border-color:rgba(79,145,255,.4) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.7),
    0 0 0 1px rgba(79,145,255,.2),
    0 0 28px rgba(79,145,255,.1) !important;
}
[data-theme="light"] .drama-card:hover{
  border-color:rgba(229,9,20,.25) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.14) !important;
}

/* ── U. HP ROW "BARCHASI" HOVER ─────────────────────────────── */
.hp-row-more:hover{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   3 TA MUAMMO TUZATISH
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO SLIDER — MOBILDA MARKAZDA ──────────────────────── */
@media(max-width:767px){
  .hero-slide-content{
    text-align:center;
  }
  .hero-badges{
    justify-content:center;
  }
  .hero-meta{
    justify-content:center;
  }
  .hero-btns{
    justify-content:center;
    flex-wrap:wrap;
  }
  .hero-title,.hero-title-kr,.hero-desc{
    text-align:center;
  }
}

/* ── 2. SEVIMLI TUGMA — DETAIL SAHIFADA ABSOLUTE EMAS ───────── */
/* .fav-btn global: position:absolute !important
   Bu drama detail sahifasidagi tugmaga ham tegib uni "ustiga" chiqaradi */
.btn-fav-detail{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
}
@media(max-width:767px){
  .drama-actions{
    flex-direction:column !important;
    align-items:center !important;
    gap:10px !important;
    width:100%;
  }
  .drama-actions .btn-play,
  .drama-actions .btn-trailer,
  .drama-actions .btn-fav-detail{
    width:100% !important;
    max-width:300px !important;
    justify-content:center !important;
  }
}

/* ── 3. PRE-PLAY OVERLAY — PLAYER BOSHLASH EKRANI ───────────── */
.kd-preplay{
  position:absolute;
  inset:0;
  z-index:25;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.92);
  overflow:hidden;
  transition:opacity .35s ease;
}
.kd-preplay.kd-pp-hiding{
  opacity:0;
  pointer-events:none;
}
.kd-pp-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center top;
  opacity:.3;
  filter:blur(14px) saturate(.6);
  transform:scale(1.06);
}
.kd-pp-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:24px;
  text-align:center;
}
.kd-pp-logo{
  font-size:32px;
  font-weight:900;
  font-style:italic;
  color:#fff;
  letter-spacing:-1.5px;
  text-shadow:0 2px 16px rgba(0,0,0,.8);
  line-height:1;
}
.kd-pp-logo em{
  color:#e50914;
  font-style:normal;
}
.kd-pp-logo span{
  background:#e50914;
  color:#fff;
  font-size:.42em;
  vertical-align:super;
  padding:2px 6px;
  border-radius:3px;
  font-style:normal;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.kd-pp-btn{
  width:90px;height:90px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#111;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:11px;
  font-weight:900;
  font-family:inherit;
  letter-spacing:.4px;
  text-transform:uppercase;
  box-shadow:0 8px 32px rgba(0,0,0,.55),0 0 0 4px rgba(255,255,255,.15);
  transition:transform .2s,background .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.kd-pp-btn:hover{
  background:#fff;
  transform:scale(1.1);
  box-shadow:0 12px 40px rgba(0,0,0,.65),0 0 0 6px rgba(255,255,255,.22);
}
.kd-pp-btn:active{ transform:scale(.96); }
.kd-pp-hint{
  font-size:12px;
  color:rgba(255,255,255,.45);
  font-weight:500;
  margin-top:-8px;
}
.kd-pp-title{
  font-size:13px;
  color:rgba(255,255,255,.55);
  font-weight:500;
  max-width:300px;
  line-height:1.5;
  margin-top:-8px;
}
@media(max-width:767px){
  .kd-pp-logo{ font-size:24px; }
  .kd-pp-btn{ width:74px; height:74px; gap:4px; }
  .kd-pp-btn svg{ width:26px; height:26px; }
  .kd-pp-hint,.kd-pp-title{ font-size:11px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL TO'G'RILASH — barcha zid qoidalar hal qilinadi
   ═══════════════════════════════════════════════════════════════ */

/* Drama karta: border-top ni bekor qilish (v5 blokdagi 2.5px) */
.drama-card{
  border-top:none !important;
}

/* Shine effekti — mobilda O'CHIRILGAN (skewX ko'rinishi muammo) */
@media(max-width:1024px){
  .drama-card .card-poster::after{
    display:none !important;
  }
}

/* ── MOBIL KARTA GRID — aniq, bo'sh joylar to'g'ri ─────────── */
@media(max-width:767px){
  /* 2 ustun, ekranga mos gap */
  .drama-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px 8px !important;
  }
  /* Container padding */
  .container{ padding:0 12px !important; }

  /* HP gorizontal kartalar */
  .hp-card{ width:140px !important; }
  .hp-top10-card{ width:148px !important; }

  /* Karta info: ixcham */
  .card-info{ padding:7px 8px 9px !important; }
  .card-title{
    font-size:11.5px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
  }
  .card-meta{ font-size:10px !important; gap:3px !important; }
  .cm-rating{ font-size:10px !important; padding:1px 4px !important; }

  /* Poster pastidagi gradient yengilroq */
  .card-poster::before{
    height:38% !important;
    background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 100%) !important;
  }

  /* Seksiya sarlavhalar */
  .hp-row-title{ font-size:15px !important; }
  .hp-row-head{ margin-bottom:12px !important; padding-bottom:10px !important; }
  .hp-section{ padding-top:20px !important; }
  .hp-row-section{ padding-top:20px !important; }

  /* Katalog kartalar — 2 ustun, ixcham */
  .cat-card-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
  }
  .cat-big-card{
    padding:16px 12px !important;
    min-height:120px !important;
  }
  .cbc-icon{ font-size:24px !important; }
  .cbc-name{ font-size:13px !important; }
  .cbc-desc{ display:none !important; }

  /* Hero minimal tuzatish */
  .hero-slide{ min-height:400px !important; }
  .hero-slide-inner{ padding:48px 0 68px !important; }
}

/* ── KICHIK EKRAN (320–374px) ───────────────────────────────── */
@media(max-width:374px){
  .container{ padding:0 10px !important; }
  .drama-grid{ gap:8px 6px !important; }
  .hp-card{ width:124px !important; }
  .card-title{ font-size:11px !important; }
  .hero-title{ font-size:20px !important; }
}

/* ── HP KARTA GORIZONTAL SCROLL KENGLIGI ────────────────────── */
@media(min-width:375px) and (max-width:767px){
  .hp-card{ width:140px !important; }
  .hp-top10-card{ width:150px !important; }
}
@media(min-width:500px) and (max-width:767px){
  .hp-card{ width:150px !important; }
  .hp-top10-card{ width:160px !important; }
  .drama-grid{ grid-template-columns:repeat(3,1fr) !important; gap:10px !important; }
}