/* ============================================
   BROTUBE - YOUTUBE TARZI PC PLAYER FINAL
   ============================================ */

@media (min-width:900px){

  /* PLAYER */
  #nowPlaying{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    background:#0f0f0f !important;
    border:0 !important;
  }

  #nowPlaying .player-video{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:16/9 !important;
    background:#000 !important;
    overflow:hidden !important;
    border-radius:12px !important;
  }

  #nowPlaying .player-video > div,
  #nowPlaying .player-video iframe,
  #nowPlaying #player,
  #nowPlaying #player iframe,
  #nowPlaying #desktopYoutubePlayer{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    border:0 !important;
  }

  /* BAŞLIK */
  #nowPlaying .track-info{
    display:block !important;
    padding:12px 4px 6px !important;
    background:#0f0f0f !important;
  }

  #nowPlaying .track-info h2{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.35 !important;
    color:#fff !important;
  }

  #nowPlaying .track-info p{
    margin:5px 0 0 !important;
    font-size:13px !important;
    color:#aaa !important;
  }

  /* ==================================
     YOUTUBE TARZI KONTROLLER
     ================================== */

  #nowPlaying .player-controls{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;

    gap:4px !important;

    margin:0 !important;
    padding:3px 0 !important;

    background:#0f0f0f !important;

    overflow:visible !important;
  }

  #nowPlaying .player-controls button,
  #nowPlaying .player-controls .main-play{
    all:unset !important;

    box-sizing:border-box !important;

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

    position:relative !important;

    flex:0 0 42px !important;

    width:42px !important;
    height:42px !important;

    min-width:42px !important;
    min-height:42px !important;

    max-width:42px !important;
    max-height:42px !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:50% !important;

    color:#f1f1f1 !important;
    background:transparent !important;

    cursor:pointer !important;

    transition:background .15s ease,color .15s ease !important;
  }

  #nowPlaying .player-controls button:hover{
    background:#272727 !important;
  }

  #nowPlaying .player-controls button.active{
    color:#ff0033 !important;
    background:#272727 !important;
  }

  #nowPlaying .player-controls svg{
    display:block !important;

    width:22px !important;
    height:22px !important;

    min-width:22px !important;
    min-height:22px !important;

    margin:0 !important;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;

    pointer-events:none !important;

    position:static !important;
    transform:none !important;
  }

  /* Play/pause dolu ikon */
  #nowPlaying #playPauseBtn svg{
    width:25px !important;
    height:25px !important;
    fill:currentColor !important;
    stroke:none !important;
  }

  /* SES */
  #nowPlaying .volume-row{
    display:flex !important;
    align-items:center !important;

    width:100% !important;

    gap:10px !important;

    margin:0 !important;
    padding:2px 4px 10px !important;

    background:#0f0f0f !important;
  }

  /* Üstteki Güvenilir Siteler küçük kalsın */
  #topTrustedMini{
    position:absolute !important;
    top:50% !important;
    right:18px !important;
    transform:translateY(-50%) !important;

    width:140px !important;
    height:44px !important;

    overflow:hidden !important;
  }

  #topTrustedMini img{
    display:block !important;
    width:140px !important;
    height:44px !important;
    max-width:140px !important;
    max-height:44px !important;
    object-fit:contain !important;
  }

  .trusted-banner{
    display:none !important;
  }
}


/* =========================================================
   BROTUBE MOBILE HEADER OVERRIDE - FINAL
   EN SON CSS OLDUGU ICIN DIGER KURALLARI EZER
   ========================================================= */

@media (max-width:899px){

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* ---------- HEADER ---------- */

  body .topbar{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns:88px minmax(0,1fr) 78px !important;
    align-items:center !important;

    min-height:56px !important;
    height:56px !important;

    padding:5px 6px !important;
    gap:5px !important;

    overflow:hidden !important;
  }

  body .topbar .brand{
    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    overflow:hidden !important;
  }

  body .brotube-logo-link{
    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;
  }

  body .brotube-logo{
    width:88px !important;
    max-width:88px !important;
    height:46px !important;
    max-height:46px !important;

    object-fit:contain !important;

    margin:0 !important;
    padding:0 !important;
  }

  body .telegram-join{
    display:none !important;
  }

  /* ---------- CASINOBRO ---------- */

  body .top-casinobro{
    grid-column:2 !important;

    justify-self:center !important;
    align-self:center !important;

    width:auto !important;
    min-width:0 !important;
    max-width:120px !important;

    height:34px !important;
    min-height:34px !important;

    margin:0 !important;
    padding:0 8px !important;

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

    font-size:14px !important;
    line-height:1 !important;
    letter-spacing:-.6px !important;

    border-radius:9px !important;

    transform:none !important;
  }

  /* ---------- GUVENILIR SITELER ---------- */

  body #topTrustedMini{
    grid-column:3 !important;

    justify-self:end !important;

    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;

    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;

    margin:0 !important;
    padding:3px !important;

    box-sizing:border-box !important;

    border-radius:9px !important;

    overflow:hidden !important;
  }

  body #topTrustedMini img{
    display:block !important;

    width:70px !important;
    max-width:70px !important;

    height:30px !important;
    max-height:30px !important;

    object-fit:contain !important;

    margin:auto !important;
  }


  /* ---------- YUKLE ALANI ---------- */

  body .install-bar{
    width:calc(100% - 16px) !important;
    max-width:none !important;

    margin:8px !important;
    padding:8px 10px !important;

    box-sizing:border-box !important;

    min-height:54px !important;

    border-radius:16px !important;

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

    gap:8px !important;
  }

  body #installText{
    min-width:0 !important;
    flex:1 1 auto !important;

    font-size:13px !important;
    line-height:1.2 !important;

    white-space:normal !important;
  }

  body #installBtn{
    flex:0 0 76px !important;

    width:76px !important;
    min-width:76px !important;

    height:40px !important;

    padding:0 !important;

    font-size:14px !important;

    border-radius:12px !important;
  }


  /* ---------- TEMA ---------- */

  body .theme-bar{
    width:100% !important;
    max-width:100% !important;

    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;

    gap:5px !important;

    padding:5px 8px !important;
    margin:0 !important;

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

    white-space:nowrap !important;

    scrollbar-width:none !important;
  }

  body .theme-bar::-webkit-scrollbar{
    display:none !important;
  }

  body .theme-label{
    flex:0 0 auto !important;
    font-size:11px !important;
  }

  body .theme-btn{
    flex:0 0 auto !important;

    min-width:0 !important;
    width:auto !important;

    min-height:34px !important;

    padding:6px 9px !important;

    font-size:9px !important;
    line-height:1 !important;

    border-radius:10px !important;
  }


  /* ---------- ARA / FAVORILER / SON DINLENENLER ---------- */

  body nav.tabs{
    width:calc(100% - 12px) !important;
    max-width:none !important;

    margin:6px !important;
    padding:4px !important;

    box-sizing:border-box !important;

    display:flex !important;

    gap:5px !important;

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

    white-space:nowrap !important;

    scrollbar-width:none !important;
  }

  body nav.tabs::-webkit-scrollbar{
    display:none !important;
  }

  body nav.tabs .tab{
    flex:0 0 auto !important;

    width:auto !important;
    min-width:max-content !important;

    height:36px !important;
    min-height:36px !important;

    padding:0 11px !important;

    font-size:10px !important;
    line-height:36px !important;

    border-radius:9px !important;
  }


  /* ---------- ARAMA KUTUSU ---------- */

  body .search-form{
    width:calc(100% - 12px) !important;
    max-width:none !important;

    margin:7px 6px 9px !important;
    padding:5px !important;

    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) 70px !important;

    gap:5px !important;

    border-radius:14px !important;
  }

  body #searchInput{
    width:100% !important;
    min-width:0 !important;

    height:42px !important;

    padding:0 12px !important;

    font-size:13px !important;

    border-radius:10px !important;
  }

  body #searchBtn{
    width:70px !important;
    min-width:70px !important;

    height:42px !important;

    padding:0 !important;

    font-size:14px !important;

    border-radius:10px !important;
  }


  /* ---------- TUMU / MUZIK / FILM / CANLI / SHORTS ---------- */

  body .bro-home-chips{
    width:100% !important;
    max-width:100% !important;

    box-sizing:border-box !important;

    display:flex !important;

    gap:6px !important;

    padding:6px 7px 9px !important;
    margin:0 !important;

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

    white-space:nowrap !important;

    scrollbar-width:none !important;
  }

  body .bro-home-chips::-webkit-scrollbar{
    display:none !important;
  }

  body .bro-home-chips .bro-chip{
    flex:0 0 auto !important;

    width:auto !important;
    min-width:max-content !important;

    height:40px !important;
    min-height:40px !important;

    padding:0 12px !important;

    font-size:11px !important;
    line-height:40px !important;

    border-radius:12px !important;

    transform:none !important;
  }


  /* ---------- ANA ICERIK ---------- */

  body .container,
  body #broHomeSection,
  body .bro-home-layout,
  body .bro-home-main{
    width:100% !important;
    max-width:100% !important;

    box-sizing:border-box !important;

    overflow-x:hidden !important;
  }

}