/* =========================================================
   BROTUBE PREMIUM UI FINAL
   EN SON YÜKLENİR - DİĞER CSS'LERİ EZER
   ========================================================= */


/* =========================
   ÜST HEADER
   ========================= */

body .topbar{
  position:relative !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  gap:15px !important;

  width:100% !important;
  min-height:76px !important;
  box-sizing:border-box !important;

  padding:10px 20px !important;

  background:
    linear-gradient(
      180deg,
      #242428 0%,
      #121216 45%,
      #08080a 100%
    ) !important;

  border-bottom:1px solid rgba(255,255,255,.12) !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.8) !important;

  overflow:visible !important;
}


/* =========================
   SOL TARAF
   ========================= */

body .topbar .brand{
  grid-column:1 !important;
  justify-self:start !important;

  display:flex !important;
  align-items:center !important;
  gap:14px !important;

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

body .brotube-logo-link{
  display:flex !important;
  align-items:center !important;
}

body .brotube-logo{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:155px !important;

  filter:
    drop-shadow(0 4px 7px rgba(0,0,0,.7)) !important;
}


/* =========================
   CASINOBRO TAM ORTA
   ========================= */

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

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

  position:relative !important;

  padding:9px 22px !important;

  border-radius:15px !important;

  border:1px solid rgba(255,255,255,.14) !important;

  background:
    linear-gradient(
      180deg,
      #36363c 0%,
      #202024 42%,
      #101013 100%
    ) !important;

  box-shadow:
    0 8px 18px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.65),
    0 0 18px rgba(255,0,0,.08) !important;

  white-space:nowrap !important;

  font-family:
    "Arial Black",
    Impact,
    Arial,
    sans-serif !important;

  font-size:28px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-1px !important;

  text-shadow:
    0 2px 2px #000,
    0 4px 7px rgba(0,0,0,.8) !important;
}

body .top-casinobro::before{
  content:"" !important;

  position:absolute !important;
  left:10px !important;
  right:10px !important;
  top:5px !important;

  height:35% !important;

  border-radius:10px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,0)
    ) !important;

  pointer-events:none !important;
}

body .top-casinobro .casino-white{
  position:relative !important;
  z-index:2 !important;

  color:#fff !important;
}

body .top-casinobro .casino-red{
  position:relative !important;
  z-index:2 !important;

  color:#ff1717 !important;

  text-shadow:
    0 2px 2px #000,
    0 0 10px rgba(255,0,0,.35) !important;
}


/* =========================
   TELEGRAM 3D
   ========================= */

body .telegram-join{
  position:relative !important;

  display:flex !important;
  align-items:center !important;
  gap:8px !important;

  padding:6px 11px !important;

  border-radius:13px !important;
  border:1px solid rgba(255,255,255,.14) !important;

  background:
    linear-gradient(
      180deg,
      #34343a 0%,
      #1d1d22 50%,
      #101013 100%
    ) !important;

  box-shadow:
    0 7px 15px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -2px 0 rgba(0,0,0,.7) !important;

  transition:.18s ease !important;
}

body .telegram-join:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.12) !important;
}

body .telegram-join:active{
  transform:translateY(1px) scale(.98) !important;
}


/* =========================
   GÜVENİLİR SİTELER 3D
   ========================= */

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

  position:relative !important;

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

  width:auto !important;
  min-width:135px !important;
  min-height:48px !important;

  padding:6px 12px !important;

  border-radius:14px !important;

  border:1px solid rgba(255,255,255,.14) !important;

  background:
    linear-gradient(
      180deg,
      #38383e 0%,
      #202025 48%,
      #101013 100%
    ) !important;

  box-shadow:
    0 8px 18px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.7) !important;

  transition:.18s ease !important;
}

body #topTrustedMini:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.12) !important;
}

body #topTrustedMini:active{
  transform:translateY(1px) scale(.98) !important;
}

body #topTrustedMini img{
  display:block !important;

  width:auto !important;
  height:auto !important;

  max-width:125px !important;
  max-height:38px !important;

  filter:
    drop-shadow(0 3px 5px rgba(0,0,0,.7)) !important;
}


/* =========================================================
   ARA / FAVORİLER / SON DİNLENENLER / PLAYLIST / TOP10
   ========================================================= */

body .tabs{
  display:flex !important;
  align-items:center !important;

  gap:9px !important;

  padding:8px !important;

  margin-top:8px !important;

  border-radius:17px !important;

  border:1px solid rgba(255,255,255,.08) !important;

  background:
    linear-gradient(
      180deg,
      rgba(31,31,35,.96),
      rgba(12,12,15,.98)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 7px 20px rgba(0,0,0,.35) !important;
}

body .tabs .tab{
  position:relative !important;

  flex:1 1 0 !important;

  min-height:46px !important;

  border-radius:13px !important;

  border:1px solid rgba(255,255,255,.13) !important;

  background:
    linear-gradient(
      180deg,
      #3a3a40 0%,
      #25252a 42%,
      #141417 100%
    ) !important;

  color:#e7e7e9 !important;

  font-weight:900 !important;
  letter-spacing:.2px !important;

  text-shadow:
    0 2px 2px rgba(0,0,0,.9) !important;

  box-shadow:
    0 6px 12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.7) !important;

  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease !important;

  overflow:hidden !important;
}

body .tabs .tab::before{
  content:"" !important;

  position:absolute !important;

  left:7px !important;
  right:7px !important;
  top:4px !important;

  height:35% !important;

  border-radius:9px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,0)
    ) !important;

  pointer-events:none !important;
}

body .tabs .tab:hover{
  transform:translateY(-2px) !important;

  filter:brightness(1.13) !important;

  box-shadow:
    0 9px 17px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

body .tabs .tab:active{
  transform:translateY(2px) scale(.985) !important;

  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.65),
    0 2px 5px rgba(0,0,0,.4) !important;
}


/* AKTİF SEKME */

body .tabs .tab.active{
  color:#fff !important;

  border-color:
    rgba(255,65,65,.75) !important;

  background:
    linear-gradient(
      180deg,
      #ff3b3b 0%,
      #d91414 43%,
      #870606 100%
    ) !important;

  box-shadow:
    0 7px 16px rgba(0,0,0,.6),
    0 0 18px rgba(255,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -3px 0 rgba(80,0,0,.8) !important;
}


/* =========================
   ARAMA KUTUSU
   ========================= */

body .search-form{
  display:flex !important;

  gap:8px !important;

  padding:7px !important;

  border-radius:15px !important;

  border:1px solid rgba(255,255,255,.10) !important;

  background:
    linear-gradient(
      180deg,
      #242428,
      #101013
    ) !important;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.7),
    0 5px 15px rgba(0,0,0,.35) !important;
}

body #searchInput{
  border:1px solid rgba(255,255,255,.10) !important;

  border-radius:11px !important;

  background:
    linear-gradient(
      180deg,
      #0b0b0d,
      #151519
    ) !important;

  color:#fff !important;

  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

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

  border-radius:11px !important;

  border:1px solid rgba(255,80,80,.75) !important;

  background:
    linear-gradient(
      180deg,
      #ff4141 0%,
      #df1717 45%,
      #8d0707 100%
    ) !important;

  color:#fff !important;
  font-weight:900 !important;

  text-shadow:
    0 2px 2px rgba(0,0,0,.75) !important;

  box-shadow:
    0 6px 12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 0 rgba(80,0,0,.75) !important;

  transition:.15s ease !important;
}

body #searchBtn:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.12) !important;
}

body #searchBtn:active{
  transform:translateY(2px) !important;
}


/* =========================================================
   MOBİL
   ========================================================= */

@media(max-width:699px){

  body .topbar{
    grid-template-columns:auto 1fr auto !important;

    min-height:62px !important;

    padding:7px 7px !important;

    gap:5px !important;
  }

  body .topbar .brand{
    gap:0 !important;
  }

  body .brotube-logo{
    max-width:92px !important;
  }

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

  body .top-casinobro{
    font-size:15px !important;

    padding:7px 8px !important;

    border-radius:10px !important;

    letter-spacing:-.7px !important;
  }

  body #topTrustedMini{
    min-width:0 !important;
    min-height:39px !important;

    padding:4px 6px !important;

    border-radius:10px !important;
  }

  body #topTrustedMini img{
    max-width:70px !important;
    max-height:29px !important;
  }

  body .tabs{
    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:7px !important;

    padding:6px !important;

    scrollbar-width:none !important;
  }

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

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

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

    padding:9px 14px !important;

    font-size:11px !important;
  }

}