*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

body{
  background:#0d0d0d;
  color:white;
  overflow:hidden;
}

#app{
  display:flex;
  height:100vh;
}

/* SIDEBAR */

.sidebar{
  width:185px;
  background:#090909;
  border-right:1px solid #1f1f1f;
  padding:20px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:9999;
}

.main-logo{
  width:145px;
  max-height:145px;
  object-fit:contain;
  margin-bottom:34px;
}

nav{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

.nav-item{
  width:100%;
  min-height:102px;
  background:none;
  border:none;
  color:#f28a32;
  padding:12px 8px;
  border-radius:22px;
  cursor:pointer;
  transition:0.25s;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  outline:none;
}

.nav-item:hover,
.nav-item.active,
.nav-item:focus{
  background:linear-gradient(135deg,#ff5e00,#ff9500);
  color:white;
  box-shadow:0 0 25px rgba(255,120,0,0.35);
}

.nav-item.disabled{
  pointer-events:none;
  opacity:0.4;
}

.nav-item.active .nav-icon,
.nav-item:focus .nav-icon{
  filter:brightness(0) invert(1);
}

.nav-icon{
  width:62px;
  height:62px;
  object-fit:contain;
  transition:0.25s;
}

.nav-item:nth-child(1) .nav-icon{
  width:58px;
  height:58px;
}

.nav-item:nth-child(2) .nav-icon{
  width:64px;
  height:64px;
}

.nav-item:nth-child(3) .nav-icon{
  width:74px;
  height:74px;
}

.nav-item:nth-child(4) .nav-icon{
  width:82px;
  height:82px;
}

.nav-item:nth-child(5) .nav-icon{
  width:50px;
  height:50px;
}

.nav-item span:last-child{
  font-size:19px;
  font-weight:bold;
}

/* MAIN */

.main-content{
  flex:1;
  overflow-y:auto;
}

/* HERO */

.hero{
  position:relative;
  height:75vh;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
  padding:70px;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,#0d0d0d 5%,transparent 60%),
    linear-gradient(to right,rgba(0,0,0,0.92),transparent 70%);
}

.hero-content{
  position:relative;
  z-index:5;
  max-width:700px;
}

.hero-title{
  font-size:76px;
  font-weight:bold;
  margin-bottom:20px;
}

.hero-description{
  font-size:26px;
  color:#ddd;
  line-height:1.5;
  margin-bottom:30px;
}

.hero-buttons{
  display:flex;
  gap:16px;
}

/* BUTTONS */

.hero-btn{
  padding:18px 34px;
  border:none;
  border-radius:12px;
  font-size:24px;
  cursor:pointer;
  transition:0.2s;
  outline:none;
}

.hero-btn:focus{
  box-shadow:0 0 0 4px white;
}

.play-btn{
  background:linear-gradient(135deg,#ff5e00,#ff9500);
  color:white;
}

.play-btn:hover,
.play-btn:focus{
  transform:scale(1.05);
  box-shadow:0 0 25px rgba(255,120,0,0.45);
}

.info-btn{
  background:rgba(255,255,255,0.15);
  color:white;
}

/* SEARCH */

.search-bar{
  padding:30px 40px;
}

.search-input{
  width:100%;
  background:#1a1a1a;
  border:none;
  border-radius:18px;
  padding:24px;
  color:white;
  font-size:28px;
  outline:none;
}

.search-input:focus{
  box-shadow:0 0 0 3px #ff7b00;
}

/* CATEGORY */

.categories{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:0 40px 20px;
}

.category-btn{
  background:#1b1b1b;
  color:white;
  border:none;
  border-radius:40px;
  padding:15px 28px;
  cursor:pointer;
  white-space:nowrap;
  transition:0.2s;
  font-size:20px;
  outline:none;
}

.category-btn:hover,
.category-btn.active,
.category-btn:focus{
  background:linear-gradient(135deg,#ff5e00,#ff9500);
  box-shadow:0 0 20px rgba(255,120,0,0.35);
}

/* SECTIONS */

.section{
  padding:20px 40px;
}

.section-title{
  font-size:40px;
  font-weight:bold;
  margin-bottom:24px;
}

/* ROW */

.row{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:15px;
  scroll-behavior:smooth;
}

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

/* CARDS */

.card{
  min-width:285px;
  height:420px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transition:0.25s;
  flex-shrink:0;
  background:#222;
  outline:none;
}

.card:hover,
.card:focus{
  transform:scale(1.08);
  z-index:50;
  box-shadow:0 0 0 4px #ff7b00, 0 0 35px rgba(255,120,0,0.35);
}

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

.card-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.96),transparent 60%);
  display:flex;
  align-items:flex-end;
  padding:20px;
}

.card-title{
  font-size:26px;
  font-weight:bold;
  text-shadow:0 0 12px black;
}

/* EPISODES */

.episode-list{
  padding:40px;
}

.episode{
  display:flex;
  gap:20px;
  margin-bottom:20px;
  background:#181818;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  transition:0.2s;
  outline:none;
}

.episode:hover,
.episode:focus{
  background:#242424;
  transform:scale(1.01);
  box-shadow:0 0 0 4px #ff7b00;
}

.episode img{
  width:320px;
  height:180px;
  object-fit:cover;
}

.episode-info{
  padding:24px;
  flex:1;
}

.episode-title{
  font-size:30px;
  font-weight:bold;
  margin-bottom:10px;
}

/* PLAYER */

.player-screen{
  width:100vw;
  height:100vh;
  background:black;
  position:relative;
}

.player-screen video{
  width:100%;
  height:100%;
}

.back-button{
  position:absolute;
  top:30px;
  left:30px;
  z-index:99999;
  background:linear-gradient(135deg,#ff5e00,#ff9500);
  border:none;
  color:white;
  padding:18px 28px;
  border-radius:12px;
  cursor:pointer;
  font-size:22px;
  outline:none;
}

.back-button:focus{
  box-shadow:0 0 0 4px white;
}

/* LOADING */

.loading-screen{
  position:fixed;
  inset:0;
  background:#0d0d0d;
  z-index:999999;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.loader{
  width:95px;
  height:95px;
  border:8px solid #2a2a2a;
  border-top:8px solid #ff7b00;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-bottom:25px;
}

.loading-text{
  font-size:34px;
  color:white;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}

/* SCROLL */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-thumb{
  background:#444;
  border-radius:10px;
}