/* =========================
   BASE RESPONSIVE RESET
========================= */
*{
  box-sizing:border-box;
}

html, body{
  width:100%;
  height:100%;
  overflow-x:hidden;
}

/* =========================
   LARGE TV / 4K SCREENS
========================= */
@media (min-width: 1600px){

  body{
    font-size:18px;
  }

  #app{
    max-width:1400px;
    margin:0 auto;
  }

  #player-box{
    height:75vh;
  }

  .sidebar{
    width:380px;
  }

  .channel-card{
    padding:16px;
  }

  button, input, select{
    font-size:15px;
    padding:12px 16px;
  }
}

/* =========================
   DESKTOP (DEFAULT LARGE)
========================= */
@media (max-width: 1599px){

  #player-box{
    height:70vh;
  }

  .sidebar{
    width:320px;
  }
}

/* =========================
   LAPTOP / SMALL DESKTOP
========================= */
@media (max-width: 1200px){

  .layout{
    gap:10px;
  }

  .sidebar{
    width:280px;
  }

  #player-box{
    height:65vh;
  }

  .channel-card{
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* =========================
   TABLET
========================= */
@media (max-width: 900px){

  .layout{
    flex-direction:column;
  }

  .sidebar{
    width:100%;
    order:2;

    max-height:300px;
  }

  .player-area{
    order:1;
  }

  #player-box{
    height:50vh;
  }

  #channelGrid{
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  }

  #brandTicker{
    font-size:11px;
    max-width:70%;
  }
}

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

  body{
    font-size:14px;
  }

  .topbar{
    flex-direction:column;
    gap:6px;
    text-align:center;
  }

  .logo{
    font-size:14px;
  }

  #player-box{
    height:40vh;
    border-radius:12px;
  }

  .sidebar{
    padding:10px;
  }

  input, button, select{
    font-size:13px;
    padding:10px;
  }

  #player-controls{
    justify-content:center;
  }

  #brandTicker{
    font-size:10px;
    max-width:90%;
  }
}

/* =========================
   SMALL MOBILE (iPhone SE etc)
========================= */
@media (max-width: 400px){

  #player-box{
    height:35vh;
  }

  .logo{
    font-size:12px;
  }

  #brandTicker{
    display:none; /* برای فضای بهتر */
  }

  .sidebar{
    font-size:12px;
  }
}

/* =========================
   TV MODE FIX (REMOTE CONTROL)
========================= */
@media (min-width: 1400px){

  body.focus-mode .channel-card{
    transform:scale(1.05);
  }

  body.focus-mode button{
    outline:2px solid #00e5ff;
  }
}

/* =========================
   SAFE ZOOM CONTROL
========================= */
@media (max-width: 300px){

  body{
    transform:scale(0.9);
    transform-origin:top;
  }
}