*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Inter,sans-serif;
}

/* DARK / LIGHT */

body.dark{background:#0b0d10;color:#fff}
body.light{background:#f5f5f5;color:#111}

/* CONTAINER */

.container{
  max-width:1400px;
  margin:auto;
  padding:0 0px;
}

/* HEADER */

/* ================= HEADER FULL PRO ================= */


/* ======================================================
   🔥 HEADER FULL PRO (DARK + LIGHT + MOBILE)
   ====================================================== */

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:70px;

  background:#111;

  z-index:999;

  display:flex;
  align-items:center;

  box-shadow:0 6px 20px rgba(0,0,0,.45);
}


/* ================= INNER ================= */

.header-inner{
  width:100%;
  max-width:1400px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 22px;
}


/* ================= LOGO ================= */

.logo{
  color:#ff2d2d;
  font-weight:900;
  font-size:26px;
  text-decoration:none;
  letter-spacing:1px;
  transition:.2s;
}

.logo:hover{
  transform:scale(1.05);
}


/* ================= NAV DESKTOP ================= */

.nav{
  display:flex;
  gap:28px;
  align-items:center;
}

.nav a{
  color:#bbb;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:.2s;
}

.nav a:hover{
  color:#fff;
}


/* ================= RIGHT SIDE ================= */

.header-right{
  display:flex;
  align-items:center;
  gap:12px;
}


/* ================= SEARCH ================= */

.search-box{
  position:relative;
  display:flex;
  align-items:center;
}

.search-icon{
  position:absolute;
  left:12px;
  font-size:14px;
  opacity:.6;
  pointer-events:none;
}

.search{
  background:#222;
  border:none;

  padding:9px 14px 9px 34px;

  border-radius:10px;
  color:#fff;

  width:180px;

  transition:.25s;
}

.search:focus{
  outline:none;
  width:240px;
  background:#2a2f38;
}


/* ================= BUTTONS ================= */

.theme,
.admin{
  border:none;
  padding:8px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}

.theme{
  background:#2a2a2a;
  color:#fff;
}

.admin{
  background:#ff2d2d;
  color:#fff;
}


/* ======================================================
   📱 MOBILE MENU
   ====================================================== */

.menu-btn{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:22px;
}


/* SLIDE MENU */

.mobile-menu{
  position:fixed;
  top:0;
  left:-260px;

  width:240px;
  height:100vh;

  background:#141821;

  padding:90px 20px;

  display:flex;
  flex-direction:column;
  gap:20px;

  transition:.3s;
  z-index:998;
}

.mobile-menu a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
}

.mobile-menu.show{
  left:0;
}
/* ===== DARK MODE ===== */

body.dark .menu-btn{
  background:#1e2228;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}

body.dark .menu-btn:hover{
  background:#2a2f38;
  transform:scale(1.08);
}

body.dark .menu-btn:active{
  transform:scale(.95);
}


/* ===== LIGHT MODE ===== */

body.light .menu-btn{
  background:#ececec;
  color:#111;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}

body.light .menu-btn:hover{
  background:#ddd;
}


/* ======================================================
   📱 RESPONSIVE
   ====================================================== */

@media(max-width:900px){

  .nav{
    display:none;
  }

  .menu-btn{
    display:block;
  }

  .search{
    width:120px;
  }

  .search:focus{
    width:150px;
  }

  .admin{
    display:none;
  }

}
/* ================= LIGHT ================= */

body.light .header{
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}

body.light .nav a{
  color:#333;
}

body.light .nav a:hover{
  color:#000;
}

body.light .search{
  background:#eee;
  color:#111;
}

body.light .theme{
  background:#ddd;
  color:#111;
}

body.light .mobile-menu{
  background:#fff;
}

body.light .mobile-menu a{
  color:#111;
}
/* CLOSE BTN */

.menu-close{
  position:absolute;
  top:18px;
  right:18px;

  background:#1e2228;
  color:#fff;

  width:36px;
  height:36px;

  border-radius:10px;
  border:none;

  font-size:18px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.2s;
}

.menu-close:hover{
  background:#ff2d2d;
  transform:scale(1.1);
}
.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);

  opacity:0;
  pointer-events:none;
  transition:.3s;

  z-index:997;
}

.mobile-menu.show ~ .menu-overlay{
  opacity:1;
  pointer-events:auto;
}


/* ================= HERO OFFSET ================= */








/* =====================================================
   HERO PRO FINAL (ARROWS ALWAYS VISIBLE)
   ===================================================== */

.hero{
  height:40vh;
  min-height:320px;

  border-radius:20px;
  overflow:hidden;

  position:relative;
  margin-bottom:40px;
}



/* ================= SLIDE ================= */

.slide{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  opacity:0;
  transition:.6s;

  display:flex;
  align-items:center;
  justify-content:center;
}

.slide.active{
  opacity:1;
}



/* ================= INNER ================= */

.hero-inner{
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);

  padding:28px 46px;
  border-radius:18px;

  text-align:center;

  max-width:90%;
  z-index:2;
}



/* ================= TITLE ================= */

.hero h1{
  font-size:56px;
  font-weight:900;
  margin-bottom:18px;
}



/* ================= BUTTON ================= */

.btn{
  background:#ff2d2d;
  padding:12px 26px;
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  font-weight:700;

  transition:.2s;
}

.btn:hover{
  transform:scale(1.05);
}



/* =====================================================
   🔥 ARROWS — ALWAYS VISIBLE
   ===================================================== */

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
  font-weight:700;

  background:rgba(0,0,0,.75);
  color:#fff;

  border-radius:12px;

  cursor:pointer;
  z-index:5;

  transition:.2s;
}

.arrow:hover{
  background:#ff2d2d;
  transform:translateY(-50%) scale(1.1);
}

.left{ left:14px; }
.right{ right:14px; }



/* =====================================================
   📱 TABLET
   ===================================================== */

@media(max-width:1000px){

  .hero{
    height:36vh;
  }

  .hero h1{
    font-size:38px;
  }

}



/* =====================================================
   📱 MOBILE
   ===================================================== */

@media(max-width:700px){

  .hero{
    height:28vh;
    border-radius:14px;
  }

  .hero-inner{
    padding:16px 18px;
  }

  .hero h1{
    font-size:22px;
  }

  .btn{
    padding:8px 14px;
    font-size:12px;
  }

  /* 🔥 arrows kichikroq lekin ko‘rinadi */
  .arrow{
    width:34px;
    height:34px;
    font-size:16px;
    border-radius:8px;
  }

  .left{ left:8px; }
  .right{ right:8px; }

}



/* =====================================================
   📱 VERY SMALL
   ===================================================== */

@media(max-width:420px){

  .hero{
    height:24vh;
  }

  .hero h1{
    font-size:18px;
  }

}





/* ================= WRAP ================= */

.movie-wrap{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:24px auto;
  padding:0 8px;
}



/* ================= SLIDER ================= */

.movie-slider{
  overflow:hidden;
}



/* ================= ROW ================= */

.movie-row{
  display:flex;
  gap:16px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;

  -webkit-overflow-scrolling:touch; /* iPhone smooth */

  padding:8px 4px;
}

/* hide scrollbar */
.movie-row::-webkit-scrollbar{
  display:none;
}
.movie-row{
  scrollbar-width:none;
}



/* ================= CARD BASE ================= */

/* desktop 6ta */
.movie-row .card{
  flex:0 0 calc((100% - 16px*5)/6);
  scroll-snap-align:start;
}



/* ================= TABLET ================= */

@media(max-width:1100px){

  .movie-row .card{
    flex:0 0 calc((100% - 16px*3)/4);
  }

}



/* ================= MOBILE ================= */

@media(max-width:700px){

  .movie-row{
    gap:12px;
    padding:8px;
  }

  /* 2ta */
  .movie-row .card{
    flex:0 0 48%;
  }

}



/* ================= SMALL MOBILE ================= */

@media(max-width:480px){

  /* Netflix feel */
  .movie-row .card{
    flex:0 0 75%;
  }

}



/* ================= ARROWS ================= */

.row-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:42px;
  height:84px;

  border:none;
  border-radius:14px;

  background:rgba(0,0,0,.65);
  color:#fff;

  font-size:26px;
  cursor:pointer;

  z-index:5;

  transition:.2s;
}

.row-arrow:hover{
  background:#ff2d2d;
}

/* 1400dan tashqariga chiqmaydi */
.row-arrow.left{ left:-50px; }
.row-arrow.right{ right:-50px; }



/* ================= MOBILE → ARROW OFF ================= */

@media(max-width:900px){
  .row-arrow{
    display:none;
  }
}


/* ================= CARD ================= */

/* ================= CARD BASE ================= */

.card{
  flex:0 0 calc((100% - 16px*5)/6); /* desktop 6ta */
  height:320px;

  border-radius:18px;
  overflow:hidden;
  position:relative;

  background:#111;
  scroll-snap-align:start;
}

.card img{
  width:100%;
  height:100%;
  object-fit:cover;
}



/* ================= TABLET ================= */
/* 4ta */

@media(max-width:1100px){

  .card{
    flex:0 0 calc((100% - 16px*3)/4);
    height:300px;
  }

}



/* ================= MOBILE ================= */
/* 2ta */

@media(max-width:700px){

  .card{
    flex:0 0 48%;
    height:260px;
  }

}



/* ================= SMALL MOBILE ================= */
/* 1.5ta Netflix style */

@media(max-width:480px){

  .card{
    flex:0 0 72%;
    height:240px;
  }

}



/* ================= TOP BADGES (16+ style) ================= */

.card-top{
  position:absolute;
  top:8px;
  left:8px;
  right:8px;

  display:flex;
  justify-content:space-between;

  z-index:5;
}

.badge-pill{
  background:#000;
  color:#fff;
  font-size:12px;
  padding:4px 9px;
  border-radius:10px;
}


/* ================= CENTER WATCH ================= */

.card-center{
  position:absolute;
  inset:0;

  display:flex;
  justify-content:center;
  align-items:flex-start; /* 🔥 center emas */
  padding-top:55px;       /* 🔥 yuqoriga */
  
  z-index:30;
 pointer-events:auto;
}



/* ================= CENTER PLAY BUTTON ================= */

.watch-btn{
  position:absolute;

  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(.8);

  width:64px;
  height:64px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#ff2d2d;
  color:#fff;

  border-radius:50%;
  text-decoration:none;

  opacity:0;
  transition:.25s;
}

/* svg icon */
.watch-btn svg{
  width:28px;
  height:28px;
  fill:#fff;
}


/* ===== DESKTOP hover ===== */
.card:hover .watch-btn{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}


/* ===== MOBILE tap ===== */
@media(max-width:700px){

  .card:active .watch-btn,
  .card:focus-within .watch-btn{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }

}


/* hover efekt */
.watch-btn:hover{
  background:#ff4444;
  transform:translate(-50%, -50%) scale(1.08);
}


/* light mode */
body.light .watch-btn{
  background:#111;
}




/* ================= BOTTOM ================= */
.card-info{
  position:absolute;
  top:50%;                 /* 🔥 SMOTRET tagiga chiqdi */
  left:50%;
  transform:translateX(-50%);

  width:90%;
  text-align:center;

  background:none;
  padding:0;

  z-index:25;
}



/* ================= TITLE FULL CLEAN ================= */

.card-title{
  font-size:13px;
  font-weight:700;
 border-radius:12px;
   background:#111;

 color:#fff;
  
}
body.light .card-title{
  background:linear-gradient(
    to top,
    rgba(255,255,255,.95),
    rgba(255,255,255,.75)
  );
 border-radius:12px;
  color:#111;

  text-shadow:none;
}

.card-bottom{
  position:absolute;
  bottom:12px;
  width:100%;
  padding:0 14px;
  text-align:center;
}

/* ================= TRAILER BUTTON PRO ================= */




/* SKELETON */

.skeleton{
  background:linear-gradient(90deg,#222,#333,#222);
  animation:load 1.2s infinite;
}

@keyframes load{
  0%{background-position:-200px}
  100%{background-position:200px}
}

/* MODAL */

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  justify-content:center;
  align-items:center;
}

.modal-box{
  background:#111;
  padding:30px;
  border-radius:16px;
}
body.light .header{
  background:#fff;
  color:#111;
  border-bottom:1px solid #ddd;
}

body.light .nav a{
  color:#333;
}

body.light .search{
  background:#eee;
  color:#111;
}
.movie-row{
  scroll-snap-type:x mandatory;
}

.card{
  scroll-snap-align:start;
}




/* ================= META POSITIONS FINAL PERFECT ================= */

.card-meta{
  position:absolute;
  top:52%;
  left:0;

  width:100%;

  display:grid;
  grid-template-columns:1fr 1fr;

  /* ❌ padding olib tashlandi */
  padding:0;

  row-gap:10px;

  z-index:30;
}


/* 🔥 ENG MUHIM */
.badge{
  display:inline-block;

  background:#000;
  color:#fff;

  padding:6px 12px;
  border-radius:999px;

  font-size:11px;
  font-weight:600;

  width:max-content;

  justify-self:start; /* chapga yopishadi */
}


/* o‘ngga yopishadi */
.badge:nth-child(2n){
  justify-self:end;
}


/* light mode */
body.light .badge{
  background:#e9e9e9;
  color:#000;
}



body.light .badge-pill{
  background:rgba(255,255,255,.85);
  color:#000;
}







/* ================= STACK FOOTER PRO ================= */

.footer{
  margin-top:120px;
  padding:90px 0 40px;

  background:#0b0d10;
  border-top:1px solid rgba(255,255,255,.06);

  transition:.25s;
}

.footer-stack{
  max-width:900px;
  margin:auto;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:24px;
}


/* LOGO */

.footer-logo{
  font-size:28px;
  font-weight:900;
  color:#ff2d2d;
}


/* DESC */

.footer-desc{
  color:#8b949e;
  font-size:14px;
  max-width:520px;
}


/* BADGES */

.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.f-badge{
  background:#161b22;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  color:#fff;
  text-decoration:none;
  transition:.2s;
}

.f-badge:hover{
  background:#ff2d2d;
}


/* SOCIAL */

.footer-social{
  display:flex;
  gap:14px;
}

.soc{
  width:42px;
  height:42px;

  border-radius:50%;
  background:#161b22;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  text-decoration:none;

  transition:.25s;
}

.soc:hover{
  background:#ff2d2d;
  transform:translateY(-4px);
}


/* COPY */

.footer-copy{
  margin-top:10px;
  font-size:13px;
  color:#6e7681;
}



/* =====================================================
   🔥 LIGHT MODE
   ===================================================== */

body.light .footer{
  background:#f6f7f9;
  border-top:1px solid #ddd;
}

body.light .footer-desc{
  color:#555;
}

body.light .f-badge{
  background:#e9ecef;
  color:#111;
}

body.light .f-badge:hover{
  background:#ff2d2d;
  color:#fff;
}

body.light .soc{
  background:#e9ecef;
  color:#111;
  box-shadow:none;
}

body.light .soc:hover{
  background:#ff2d2d;
  color:#fff;
}

body.light .footer-copy{
  color:#777;
}







/* ===== TYPE COLORS (optional pro look) ===== */

.card.serial .badge-pill{
  background:#2962ff;
}

.card.episode .badge-pill{
  background:#2e7d32;
}

.card.movie .badge-pill{
  background:#ff2d2d;
}




/* ================= FINAL CLEAN MOVIE ================= */

.movie-page{
  max-width:1400px;
  margin:90px auto;
  padding:0 20px;
}

.movie-hero{
  display:flex;
  gap:40px;
  background:#141821;
  padding:40px;
  border-radius:20px;
}

.movie-poster{
  width:260px;
  height:380px;
  object-fit:cover;
  border-radius:16px;
}

/* title */
.movie-title{
  font-size:36px;
  font-weight:900;
  margin-bottom:25px;
}

/* rows */

.movie-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:25px;
}

.row{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
}

.row b{
  width:160px;
  color:#aaa;
}

/* badge */

.badge-filter{
  background:#1f242c;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  color:#fff;
  text-decoration:none;
}

.badge-filter:hover{
  background:#ff2d2d;
}

/* buttons */

.movie-actions{
  display:flex;
  gap:14px;
  margin-bottom:25px;
}

.btn-watch{
  background:#ff2d2d;
  color:#fff;
  padding:14px 28px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
}

.btn-download{
  background:#2b2f36;
  color:#fff;
  padding:14px 28px;
  border-radius:12px;
  text-decoration:none;
}

.btn-trailer{
  background:#1e2228;
  color:#fff;
  padding:14px 28px;
  border-radius:12px;
  border:none;
  cursor:pointer;
}

/* desc */

.movie-desc{
  color:#b9c1cd;
  line-height:1.6;
  max-width:900px;
}

/* ========================================
   🔥 SIMILAR / PAHOJE GRID FINAL PERFECT
   ======================================== */

.grid-cards{
  display:grid;
  gap:16px;

  /* desktop 6 */
  grid-template-columns:repeat(6, 1fr);
}


/* ===== LARGE LAPTOP ===== */
@media(max-width:1300px){
  .grid-cards{
    grid-template-columns:repeat(5, 1fr);
  }
}


/* ===== TABLET ===== */
@media(max-width:1000px){
  .grid-cards{
    grid-template-columns:repeat(4, 1fr);
  }
}


/* ===== SMALL TABLET ===== */
@media(max-width:800px){
  .grid-cards{
    grid-template-columns:repeat(3, 1fr);
  }
}


/* ===== MOBILE ===== */
@media(max-width:600px){
  .grid-cards{
    grid-template-columns:repeat(2, 1fr);
  }
}





/* ================= PRO DARK THEME ================= */

/* ===== PAGE BG ===== */

body{
  background:
  radial-gradient(circle at 20% 20%, #1a2230 0%, transparent 40%),
  radial-gradient(circle at 80% 0%, #161b26 0%, transparent 40%),
  linear-gradient(180deg,#0f1319,#0b0e13);

  color:#fff;
}


/* ===== HERO CARD ===== */

.movie-hero{
  background:linear-gradient(145deg,#141a24,#0f141c);
  box-shadow:
    0 20px 60px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.03);

  backdrop-filter: blur(8px);
}


/* ===== POSTER ===== */

.movie-poster{
  box-shadow:0 15px 40px rgba(0,0,0,.6);
  transition:.3s;
}

.movie-poster:hover{
  transform:scale(1.03);
}


/* ===== TITLE ===== */

.movie-title{
  color:#fff;
  letter-spacing:.5px;
  text-shadow:0 2px 12px rgba(255,255,255,.08);
}


/* ===== ROWS ===== */

.row b{
  color:#7f8a9a;
  font-weight:600;
}

.row{
  border-bottom:1px solid rgba(255,255,255,.03);
  padding:6px 0;
}


/* ===== BADGES ===== */

.badge-filter{
  background:linear-gradient(145deg,#202733,#161b23);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  transition:.2s;
}

.badge-filter:hover{
  background:#ff2d2d;
  box-shadow:0 0 12px #ff2d2d;
  transform:translateY(-2px);
}



/* ================= ACTION BUTTONS FINAL ================= */

.movie-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:14px 22px;
  border-radius:12px;

  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}


/* 🔥 UNIVERSAL SVG FIX */
.movie-actions .icon{
  width:18px;
  height:18px;

  fill:currentColor;
  stroke:currentColor;

  flex-shrink:0;
}


/* ================= MOBILE ================= */
@media(max-width:700px){

  .movie-actions a{
    padding:12px 14px;
    font-size:14px;
    gap:8px;
  }

  .movie-actions .icon{
    width:16px;
    height:16px;
  }
}




/* ===== WATCH ===== */
.btn-watch{
  background:#ff2d2d;
  color:#fff;
  box-shadow:0 10px 25px rgba(255,45,45,.45);
  transition:.2s;
}

.btn-watch:hover{
  transform:translateY(-2px);
  box-shadow:0 0 18px #ff2d2d;
}



/* ===== DOWNLOAD ===== */
.btn-download{
  background:#2b2f36;
  color:#fff;
  transition:.2s;
}

.btn-download:hover{
  background:#3a3f48;
}



/* ===== LIGHT MODE ===== */
body.light .btn-download{
  background:#e5e7ea;
  color:#111;
}




/* ===== DESCRIPTION ===== */

/* ===== DESCRIPTION PRO FIX ===== */

.movie-desc-box{
  width:100%;
  margin:40px 0;

  padding:28px 34px;

  border-radius:16px;

  background:#141a24;

  box-shadow:
    0 10px 35px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* title */
.desc-title{
  font-size:22px;
  font-weight:800;
  margin-bottom:14px;
}

/* text */
.movie-desc{
  color:#c5ccd6;
  line-height:1.8;

  max-height:120px;
  overflow:hidden;

  position:relative;
  transition:.3s;
}

/* fade */
.movie-desc::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:45px;

  background:linear-gradient(transparent,#141a24);
}

/* expanded */
.movie-desc.open{
  max-height:2000px;
}

.movie-desc.open::after{
  display:none;
}

/* toggle btn */
.desc-toggle{
  margin-top:14px;

  background:none;
  border:none;

  color:#ff2d2d;
  font-weight:700;
  font-size:14px;

  cursor:pointer;

  display:inline-block;
}
/* =====================================
   🌞 LIGHT MODE — DESCRIPTION
   ===================================== */

body.light .movie-desc-box{
  background:linear-gradient(145deg,#ffffff,#f2f4f7);

  box-shadow:
    0 10px 30px rgba(0,0,0,.08),
    inset 0 0 0 1px #e6e6e6;
}

/* title */
body.light .desc-title{
  color:#111;
}

/* text */
body.light .movie-desc{
  color:#333;
}

/* fade gradient light */
body.light .movie-desc:after{
  background:linear-gradient(transparent,#ffffff);
}

/* toggle btn */
body.light .desc-toggle{
  color:#ff2d2d;
}

/* hover */
body.light .desc-toggle:hover{
  opacity:.7;
}



/* ===== SIMILAR GRID ===== */

.grid-cards{
  margin-top:40px;
}

.sec-title{
  font-size:22px;
  font-weight:800;
  margin-bottom:14px;
  color:#fff;
}


/* ===== RESPONSIVE ===== */

@media(max-width:900px){

  .movie-hero{
    flex-direction:column;
    padding:25px;
  }

  .movie-poster{
    width:100%;
    height:420px;
  }

}

/* ======================================================
   🌞 LIGHT THEME PRO (FULL CLEAN)
   ====================================================== */

body.light{
  background:
  radial-gradient(circle at 20% 20%, #ffffff 0%, transparent 40%),
  linear-gradient(180deg,#fafafa,#f1f2f4);

  color:#111;
}


/* ===== HEADER ===== */

body.light .header{
  background:#ffffff;
  border-bottom:1px solid #e6e6e6;
}

body.light .nav a{
  color:#444;
}

body.light .nav a:hover{
  color:#000;
}

body.light .search{
  background:#efefef;
  color:#111;
}


/* ===== HERO CARD ===== */

body.light .movie-hero{
  background:linear-gradient(145deg,#ffffff,#f3f4f6);

  box-shadow:
    0 15px 40px rgba(0,0,0,.08),
    inset 0 0 0 1px #e6e6e6;

  backdrop-filter:none;
}


/* ===== TITLE ===== */

body.light .movie-title{
  color:#111;
  text-shadow:none;
}


/* ===== ROWS ===== */

body.light .row{
  border-bottom:1px solid #e6e6e6;
}

body.light .row b{
  color:#666;
}


/* ===== BADGES ===== */

body.light .badge-filter{
  background:#e9ecef;
  color:#111;
  border:1px solid #dcdcdc;
  box-shadow:none;
}

body.light .badge-filter:hover{
  background:#ff2d2d;
  color:#fff;
}


/* ===== BUTTONS ===== */

body.light .btn-watch{
  background:#ff2d2d;
  color:#fff;
  box-shadow:0 6px 18px rgba(255,45,45,.25);
}

body.light .btn-download{
  background:#e5e7ea;
  color:#111;
}

body.light .btn-download:hover{
  background:#d9dde2;
}

body.light .btn-trailer{
  background:#dfe3e8;
  color:#111;
}

body.light .btn-trailer:hover{
  background:#cfd5db;
}


/* ===== DESCRIPTION ===== */

body.light .movie-desc{
  background:#f6f7f9;
  color:#333;
  border:1px solid #e2e2e2;
}


/* ===== CARDS ===== */

body.light .card{
  background:#ffffff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}


/* ===== FOOTER ===== */

body.light .footer{
  background:#ffffff;
  border-top:1px solid #e6e6e6;
}

body.light .footer-desc{
  color:#555;
}

body.light .f-badge{
  background:#eceff3;
  color:#111;
}

body.light .soc{
  background:#eceff3;
  color:#111;
}







/* ===== EPISODES ===== */

.episodes-box{
  margin-top:40px;
}

.episodes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
}

.episode-card{
  background:#1e2228;
  padding:14px;
  border-radius:10px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  transition:.2s;
}

.episode-card:hover{
  background:#ff2d2d;
}






/* ================= SEARCH ================= */

.search-page{
  padding-top:80px; /* header(70) + ozgina space */
  margin-top:0;
}


.search-form{
  display:flex;
  gap:10px;
  margin-bottom:30px;
}

.search-input{
  flex:1;
  padding:14px 18px;
  border-radius:12px;
  border:none;
  background:#1b2028;
  color:#fff;
  font-size:15px;
}

.search-form button{
  background:#ff2d2d;
  border:none;
  padding:0 22px;
  border-radius:12px;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

body.light .search-input{
  background:#e9ecef;
  color:#000;
}


/* ======================================================
   🔥 MOBILE FULL FIX (NETFLIX STYLE CLEAN)
   ====================================================== */

@media(max-width:700px){

  /* ===== container ===== */
  .container{
    padding:0 10px;
  }

  /* ===== section title ===== */
  .sec-title{
    font-size:18px;
    padding-left:4px;
  }


  /* ===== ROW ===== */
  .movie-row{
    gap:12px;
    padding:10px 4px;
    scroll-snap-type:x mandatory;
  }


 

  /* ===== image ===== */
  .card img{
    border-radius:14px;
  }


  /* ===== badge ===== */
  .badge,
  .badge-pill{
    font-size:10px;
    padding:4px 8px;
  }


 


  /* ===== center btn pastroq ===== */
  .card-center{
    padding-top:35px;
  }


  /* ===== title kichrayadi ===== */
  .card-title{
    font-size:12px;
  }


  /* ===== trailer btn ===== */
  .trailer-btn{
    font-size:11px;
    padding:8px;
  }


  /* ===== HERO ===== */
  .hero{
    height:26vh;
    border-radius:12px;
  }

  .hero-inner{
    padding:14px 16px;
  }

  .hero h1{
    font-size:20px;
  }

  .btn{
    font-size:12px;
    padding:8px 12px;
  }


  /* ===== arrows small but visible ===== */
  .arrow{
    width:32px;
    height:32px;
    font-size:14px;
  }


  /* ===== arrows row OFF (touch scroll yetarli) ===== */
  .row-arrow{
    display:none;
  }

}




  /* =========================================
   🔥 FINAL MOBILE SLIDER — PERFECT 2 CARD
   ========================================= */

@media(max-width:700px){

  .movie-row{
    display:flex;
    gap:12px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

    padding:0 2px;
  }

  .movie-row::-webkit-scrollbar{
    display:none;
  }

  /* 💥 ENG MUHIM */
  .movie-row .card{
    flex:0 0 calc((100% - 12px) / 2); /* 🔥 ANIQ 2 TA */
    height:240px;

    scroll-snap-align:start;
  }

}

.episode-card.active{
  background:#ff2d2d;
  color:#fff;
  font-weight:700;
}

/* =========================================
   🔥 ROW ARROWS FINAL PRO
   ========================================= */

.movie-wrap{
  position:relative;
}

/* arrow tugma */
.row-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:40px;
  height:70px;

  border:none;
  border-radius:12px;

  background:rgba(0,0,0,.65);
  color:#fff;

  font-size:24px;
  cursor:pointer;

  z-index:20;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.2s;
}

/* hover */
.row-arrow:hover{
  background:#ff2d2d;
  transform:translateY(-50%) scale(1.08);
}

/* pozitsiya */
.row-arrow.left{
  left:-20px;   /* 1400 dan chiqmaydi */
}

.row-arrow.right{
  right:-20px;
}


/* 📱 mobile kichikroq */
@media(max-width:700px){

  .row-arrow{
    width:32px;
    height:50px;
    font-size:18px;
  }

  .row-arrow.left{ left:2px; }
  .row-arrow.right{ right:2px; }

}
.movie-page{
  margin-top:20px; /* faqat dizayn gap */
}
.header{
  height:70px;
}


/* ===== LIGHT FIXES (missing classes) ===== */

body.light .card-info{
  color:#111;
}

body.light .card-title{
  color:#111;
}

body.light .episode-card{
  background:#e9ecef;
  color:#111;
}

body.light .episode-card:hover{
  background:#ff2d2d;
  color:#fff;
}

body.light .search-form button{
  background:#ff2d2d;
  color:#fff;
}

body.light .arrow{
  background:#e0e0e0;
  color:#111;
}

body.light .arrow:hover{
  background:#ff2d2d;
  color:#fff;
}
body.light .sec-title{

  color:#111;
}


.sec-link{
  color:inherit;
  text-decoration:none;
  transition:.2s;
}

.sec-link:hover{
  color:#ff2d2d;
  transform:translateX(4px);
}
/* title har doim bosiladi */
.sec-title{
  position:relative;
  z-index:50;
}

.sec-link{
  display:inline-block;
  position:relative;
  z-index:50;
}

.nav a.active{
  color:#ff2d2d;
}


/* =====================================================
   🔥 FILTER SYSTEM — ULTRA STABLE FINAL (2026 PRO)
   ===================================================== */

/* ================= THEME COLORS ================= */

:root{
  --f-chip:#f1f3f5;
  --f-chip-hover:#e5e7eb;
  --f-text:#111;
  --f-border:rgba(0,0,0,.08);
  --f-dropdown:#ffffff;
}

body.dark{
  --f-chip:#151a22;
  --f-chip-hover:#202632;
  --f-text:#ffffff;
  --f-border:rgba(255,255,255,.06);
  --f-dropdown:#1b2028;
}


/* =====================================================
   WRAP (🔥 FLEX — GRID EMAS!)
   ===================================================== */

.filter{
  margin:10px 0 6px;
}

.filter-inner{
  max-width:1400px;
  margin:auto;

  padding:8px 14px;

  display:flex;              /* 🔥 GRID O‘RNIGA FLEX */
  gap:10px;

  flex-wrap:nowrap;          /* 🔥 ENG MUHIM */
  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;
}

.filter-inner::-webkit-scrollbar{
  display:none;
}


/* =====================================================
   CHIP
   ===================================================== */

.f-chip{
  flex:0 0 auto;             /* 🔥 shrink bo‘lmaydi */

  display:flex;
  align-items:center;
  justify-content:center;

  white-space:nowrap;

  padding:9px 16px;

  background:var(--f-chip);
  color:var(--f-text);

  border:1px solid var(--f-border);
  border-radius:14px;

  font-size:13px;
  font-weight:600;

  cursor:pointer;
  user-select:none;

  transition:.18s;
}


/* hover */
.f-chip:hover{
  background:var(--f-chip-hover);
  transform:translateY(-1px);
}


/* active */
.f-chip.active{
  background:#ff2d2d;
  color:#fff;
  border:none;
}


/* clear */
.f-chip.clear{
  background:#ff2d2d;
  color:#fff;
  border:none;
}


/* =====================================================
   DROPDOWN
   ===================================================== */



/* =====================================================
   MOBILE — PERFECT BEHAVIOUR
   ===================================================== */

@media(max-width:900px){

  .filter-inner{
    padding:10px 12px;
    gap:8px;
  }

  .f-chip{
    font-size:12px;
    padding:8px 12px;
  }

  /* bottom sheet */
  .f-dropdown{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;

    border-radius:18px 18px 0 0;
    max-height:70vh;

    animation:sheetUp .25s ease;
  }

  @keyframes sheetUp{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
  }
}
/* arrow icon */
.f-chip[data-open]::after{
  content:"▾";
  font-size:11px;
  margin-left:6px;
  opacity:.6;
}
.f-chip{
  gap:6px;
}

.f-arrow{
  width:12px;
  height:12px;
  opacity:.6;
  transition:.2s;
}

/* open holatda aylansin */
.f-chip.active .f-arrow{
  transform:rotate(180deg);
}
/* ====================================
   🔥 DROPDOWN FULL PRO FIX
   ==================================== */

.f-dropdown{
  position:fixed;

  background:var(--f-dropdown);

  border-radius:16px;

  min-width:240px;
  max-height:340px;

  overflow:auto;

  padding:6px;

  display:flex;
  flex-direction:column;

  gap:4px;

  box-shadow:
    0 20px 60px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.04);

  animation:fadeDown .15s ease;

  z-index:99999;
}


/* 🔥 ITEM */
.f-item{
  padding:10px 14px;

  border-radius:10px;

  font-size:14px;
  font-weight:600;

  color:var(--f-text);

  cursor:pointer;

  transition:.15s;

  user-select:none;
}


/* 🔥 HOVER (qizil effekt) */
.f-item:hover{
  background:#ff2d2d;
  color:#fff;
  transform:translateX(3px);
}


/* 🔥 ACTIVE */
.f-item.active{
  background:#ff2d2d;
  color:#fff;
}


/* scrollbar nice */
.f-dropdown::-webkit-scrollbar{
  width:6px;
}

.f-dropdown::-webkit-scrollbar-thumb{
  background:#333;
  border-radius:8px;
}
/* ================= SEARCH ICON SVG ================= */

.search-icon{
  position:absolute;
  left:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.search-svg{
  width:18px;
  height:18px;

  stroke:currentColor;
  stroke-width:2;
  fill:none;

  opacity:.6;
}
/* ================= SEARCH BUTTON ================= */

.search-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  background:#ff2d2d;
  color:#fff;

  border:none;
  padding:10px 18px;

  border-radius:10px;

  font-weight:700;
  cursor:pointer;

  transition:.2s;
}

/* icon */
.btn-icon{
  width:16px;
  height:16px;

  stroke:currentColor;
  stroke-width:2;
  fill:none;
}

/* hover */
.search-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(255,45,45,.45);
}

/* active */
.search-btn:active{
  transform:scale(.96);
}


/* light mode auto */
body.light .search-btn{
  background:#ff2d2d;
  color:#fff;
}
.row{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}

.badge-filter{
max-width:100%;
word-break:break-word;
white-space:normal;
}
@media(max-width:600px){

.movie-hero{
flex-direction:column;
}

.movie-info{
width:100%;
}

.row b{
width:100%;
margin-bottom:4px;
}

}
.seo-hidden{
position:absolute;
left:-9999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}



/* CATEGORY GRID */
.cat-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:18px;
margin:25px 0;
}

.cat-card{
position:relative;
height:140px;
border-radius:14px;
overflow:hidden;
display:block;
}

.cat-bg{
width:100%;
height:100%;
object-fit:cover;
}

.cat-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
}

.cat-bottom{
position:absolute;
bottom:12px;
left:12px;
right:12px;
}

.cat-title{
color:#fff;
font-weight:700;
font-size:16px;
}

/* POSTER */
.poster-card{
display:block;
position:relative;
border-radius:14px;
overflow:hidden;
background:#111;
}

.poster-card img{
width:100%;
height:260px;
object-fit:cover;
}

.poster-meta{
position:absolute;
top:10px;
left:10px;
right:10px;
display:flex;
gap:6px;
flex-wrap:wrap;
}

.badge{
background:#000;
color:#fff;
font-size:11px;
padding:4px 10px;
border-radius:20px;
font-weight:700;
}

.badge.year{background:#2563eb;}
.badge.type{background:#16a34a;}
.badge.season{background:#9333ea;}

.poster-title{
padding:10px;
font-size:14px;
font-weight:700;
color:#fff;
text-align:center;
}
/* HERO TITLE */
.hero-title{
color:#fff;
font-size:42px;
font-weight:900;
margin-bottom:18px;
text-shadow:
0 2px 10px rgba(0,0,0,.9),
0 0 20px rgba(0,0,0,.6);
}

/* LIGHT MODE */
body.light .hero-title{
color:#ffffff;
text-shadow:none;
}

/* BUTTON */
.hero-btn{
display:inline-flex;
align-items:center;
gap:10px;

background:#ff2d2d;
color:#fff;

padding:12px 26px;
border-radius:12px;

font-weight:800;
text-decoration:none;

transition:.2s;
}

.hero-btn:hover{
transform:scale(1.05);
box-shadow:0 0 20px #ff2d2d;
}

/* ICON */
.play-ic{
width:20px;
height:20px;
fill:#fff;
}

/* MOBILE */
@media(max-width:700px){

.hero-title{
font-size:22px;
}

.hero-btn{
padding:8px 14px;
font-size:12px;
}

.play-ic{
width:16px;
height:16px;
}

}
.cat-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin:25px 0;
}

@media(max-width:1000px){
.cat-grid{
grid-template-columns:repeat(3,1fr);
}
}

@media(max-width:700px){
.cat-grid{
grid-template-columns:repeat(2,1fr);
}
}




body{
padding-top:80px;
}


.footer-legal{
margin-top:20px;
display:flex;
flex-wrap:wrap;
gap:14px;
justify-content:center;
font-size:14px;
opacity:.8;
}

.footer-legal a{
color:#aaa;
text-decoration:none;
transition:.2s;
}

.footer-legal a:hover{
color:#fff;
}
.page{
max-width:900px;
margin:110px auto;
line-height:1.7;
font-size:17px;
opacity:.9;
}