html {
            --scrollbarBG: #910101;
            --thumbBG: #00FFFF; /* Neon blue */
        }

        body {
            font-family: Lexend Deca, sans-serif;
            overflow-x: hidden; /* Hides the horizontal scrollbar */
            scroll-behavior: smooth; /* Smooth scrolling */
        }

        /* Customize scrollbar for WebKit browsers (Chrome, Safari) */
        body::-webkit-scrollbar {
            width: 5px; /* Width of the vertical scrollbar */
        }

        body::-webkit-scrollbar-track {
            background: var(--scrollbarBG); /* Background color for the scrollbar track */
        }

        body::-webkit-scrollbar-thumb {
            background-color: var(--thumbBG); /* Neon blue color for the scrollbar thumb */
            border-radius: 6px; /* Rounded corners for the scrollbar thumb */
            border: 2px solid var(--scrollbarBG); /* Border around the scrollbar thumb */
        }

        /* Customize scrollbar for Firefox */
        body {
            scrollbar-width: thin; /* Thin scrollbar */
            scrollbar-color: var(--thumbBG) var(--scrollbarBG); /* Neon blue thumb and track background */
        }
.nav-bar {
  background:#313131!important;
  border-top:4px solid #393975
}
.nav-li {
}
.nav-li ul {
  float:right;
  display:block;
  height:45px
}
.nav-li ul li {
  display:inline-block;
  padding:20px;
  font-weight:700;
  list-style-type:none
}
.nav-li ul li a {
  color:#ffff!important;
  padding:10px
}
.nav-li ul li a:hover {
  background:#393975;
  color:#fff;
  border-radius:5px;
  padding:10px;
  text-decoration:none
}
.bars {
  background: #393975;
  color:#fff;
  border-radius:5px;
  padding:10px
}
.giris {
  background:url(https://www.teahub.io/photos/full/198-1986760_cool-hd-music-wallpaper-desktop-equaliser-dj-backgrounds.jpg)!important
}
.giris .container {
  padding:20px
}
.sohbetbar {
  margin-top:20px!important;
  text-align:center!important;
  background:#494949!important;
  padding:10px!important;
  border-radius:8px!important;
  box-shadow:0 1px 5px 4px #ffffff!important
}
.sohbetbar h2 {
  font-size:25px;
  font-weight:700;
  border-bottom:2px solid #393975;
  padding-bottom:10px;
  color:#393975
}
.sohbetbar input {
  margin:5px;
  border:none;
  border-bottom:1px solid #777;
  padding:10px;
  color:#000;
  outline:0;
  width:65%
}
.sohbetbar i {
  color: #ffc107 !important;
  font-size:20px
}
.sohbetbar button {
  border:none!important;
  padding:11px!important;
  width:70%!important;
  font-weight:700!important;
  border-radius:15px!important;
  margin-top:10px!important;
  background: #11012d !important;
  border: 2px solid #FFC107 !important;
  color: #ffffff !important;
}
.sohbetbar button:hover {
  background:#fff!important;
  color:#000!important
}
.sohbetbar .farkli {
  background:#ff9b50;
  color:#000
}
.headerbar {
  margin:0 auto
}
.headerbar .item {
  padding:10px;
  background:#414141!important;
  color:#fff;
  text-align:center;
  border-radius:5px;
  margin-top:10px
}
.headerbar .item i {
  font-size:60px
}
.headerbar .item a {
  color: #ffffff !important;
}
.headerbar .ust {
  font-size:20px
}
.headerbar .alt {
  font-size:13px
}
.headerbar .item:hover {
  background:#939393!important;
  cursor:pointer
}
.headerbar .item:hover a {
  text-decoration:none;
  color:#fff!important;
  cursor:pointer
}
.headerbar label:hover {
  cursor:pointer
}
.hizlibaglan {
  margin:0 auto;
  background:#fff;
  margin-top:40px;
  margin-bottom:-100px;
  padding:20px;
  border-radius:10px;
  text-align:center
}
.hizlibaglan h2 {
  font-size:30px;
  color:#393975;
  font-weight:700;
  padding:5px
}
.hizlibaglan input {
  width:80%;
  padding:5px;
  border-radius:5px;
  margin:10px;
  font-size:20px;
  text-align:left;
  border:1px solid #e5e5fa;
  background:#e5e5fa
}
.hizlibaglan button {
  width:80%;
  padding:10px;
  border:none;
  background:#393975;
  color:#fff;
  border-radius:5px;
  font-size:20px
}
.hizlibaglan h3 {
  font-size:15px;
  padding:5px;
  margin-top:10px;
  color:#9292a2
}
.altbar {
  padding:10px;
  background:#000!important
}
.altbar>h2 {
  text-align:center;
  padding:5px;
  font-weight:700;
  font-size:25px;
  background:url(https://w0.peakpx.com/wallpaper/1008/687/HD-wallpaper-dark-blue-hexagons-hexagons-3d-texture-honeycomb-hexagons-patterns-hexagons-textures-3d-textures-dark-blue-backgrounds.jpg)!important;
  border-radius:5px;
  color: #ffffff !important;
  box-shadow: 0 0 5px 1px #ffffff !important;
}
.altbar .container-fluet {
  margin:20px 70px
}
.altbar .col-alt i {
  font-size:40px;
  padding:10px;
  color:#5977ff
}
.altbar .col-alt h2 {
  font-size:20px;
  color:#fff;
  font-weight:700
}
.altbar .col-alt h3 {
  font-size:15px;
  color:#e7e7e7
}
.col-alt {
  -ms-flex:0 0 33.333333%;
  flex:0 0 31.333333%;
  max-width:33.333333%;
  padding:10px;
  background:#313131!important;
  margin:0 auto;
  margin-top:10px;
  border-radius:10px;
  text-align:center
}
.bilgi {
  padding:10px;
  background:#fff;
  margin-top:20px;
  border-radius:10px!important;
  background:#272727!important;
  color:#fff!important;
  box-shadow: 0 0 5px 3px #ffffff !important;
}
.bilgi h1 {
  color: var(--white) !important;
  font-size:20px;
  border:none;
  text-align:center;
  font-weight:700
}
.h1,
h1 {
  color: var(--white);
  font-size:2.5rem
}
.bilgi p {
  color:#e3e3e3!important;
  font-size:20px!important
}
.devam {
  display:none
}
.devambtn {
  border:none;
  padding:5px;
  font-weight:700;
  border-radius:5px;
  background:#3f2af7;
  color:#fff;
  font-size:15px;
  margin-bottom:10px
}
.yukari {
  display:none;
  position:fixed;
  bottom:0;
  right:0;
  border:none;
  padding:10px;
  margin-bottom:10px;
  margin-right:10px;
  background:#393975;
  border-radius:5px;
  color:#fff;
  font-size:20px
}
.sosyalmedya {
  background:#fff;
  padding:10px;
  border-radius:5px;
  scrollbarbg:#fff;
  thumbbg:#393975
}
body::-webkit-scrollbar {
  width:15px
}
body {
  scrollbar-width:thin;
  scrollbar-color: #00ffff var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background:var(--scrollbarBG)
}
body::-webkit-scrollbar-thumb {
  background-color:var(--thumbBG);
  border-radius:6px;
  border:3px solid var(--scrollbarBG)
}
body {
  font-family:Lexend Deca,sans-serif
}
.nav-bar {
  background:#2d2d2d;
  border-top:4px solid #393975
}
.nav-li {
}
.nav-li ul {
  float:right;
  display:block;
  height:45px
}
.nav-li ul li {
  display:inline-block;
  padding:20px;
  font-weight:700;
  list-style-type:none
}
.nav-li ul li a {
  color:#737373;
  padding:10px
}
.nav-li ul li a:hover {
  background:#393975;
  color:#fff;
  border-radius:5px;
  padding:10px;
  text-decoration:none
}
.bars {
  background: #ffc107c7;
  color:#fff;
  border-radius:5px;
  padding:10px
}
.giris {
  background:url(https://media.istockphoto.com/id/1456628273/photo/musical-notes-abstract-3d-background.webp?b=1&s=170667a&w=0&k=20&c=Ycv51e15f0XNcD1-eBmDNxbvnCOl4v22Yyb-893qVoU=)!important
}
.giris .container {
  padding:20px
}
.sohbetbar {
  margin-top:20px;
  text-align:center;
  background:#fff;
  padding:10px;
  border-radius:5px;
  box-shadow:0 0 5px 1px #000
}
.sohbetbar h2 {
  font-size:25px;
  font-weight:700;
  border-bottom:2px solid #393975;
  padding-bottom:10px;
  color:#393975
}
.sohbetbar input {
  margin:5px;
  border:none;
  border-bottom:1px solid #777;
  padding:10px;
  color:#000;
  outline:0;
  width:65%
}
.sohbetbar i {
  color:#fff;
  font-size:20px
}
.sohbetbar button {
  border:none;
  padding:11px;
  width:70%;
  font-weight:700;
  border-radius:5px;
  margin-top:10px;
  background:#180000;
  border: 2px solid #393975;
  color:#fff
}
.sohbetbar button:hover {
  background:#fff;
  color:#393975
}
.sohbetbar .farkli {
  background:#5350ff;
  color:#000
}
.headerbar {
  margin:0 auto
}
.headerbar .item {
  padding:10px;
  background:#2d2d2d;
  color:#fff;
  text-align:center;
  border-radius:5px;
  margin-top:10px
}
.headerbar .item i {
  font-size:60px
}
.headerbar .item a {
  color:#0e00d4,23,23
}
.headerbar .ust {
  font-size:20px
}
.headerbar .alt {
  font-size:13px
}
.headerbar .item:hover {
  background:#fff;
  cursor:pointer
}
.headerbar .item:hover a {
  text-decoration:none;
  color:#2d00aa;
  cursor:pointer
}
.headerbar label:hover {
  cursor:pointer
}
.hizlibaglan {
  margin:0 auto;
  background:#fff;
  margin-top:40px;
  margin-bottom:-100px;
  padding:20px;
  border-radius:10px;
  text-align:center
}
.hizlibaglan h2 {
  font-size:30px;
  color:#0000b4;
  font-weight:700;
  padding:5px
}
.hizlibaglan input {
  width:80%;
  padding:5px;
  border-radius:5px;
  margin:10px;
  font-size:20px;
  text-align:left;
  border:1px solid #e5e5fa;
  background:#e5e5fa
}
.hizlibaglan button {
  width:80%;
  padding:10px;
  border:none;
  background:#393975;
  color:#fff;
  border-radius:5px;
  font-size:20px
}
.hizlibaglan h3 {
  font-size:15px;
  padding:5px;
  margin-top:10px;
  color:#9292a2
}
.altbar {
  padding:7px;
  background:#000
}
.altbar>h2 {
  text-align:center;
  padding:5px;
  font-weight:700;
  font-size:25px;
  background:url(https://img.freepik.com/free-vector/gradient-karaoke-background_52683-146071.jpg)!important;
  border-radius:5px;
  color:#000;
  box-shadow:0 0 5px 1px #72706f
}
.altbar .container-fluet {
  margin:20px 70px
}
.altbar .col-alt i {
  font-size:40px;
  padding:10px;
  color:#0011ff!important
}
.altbar .col-alt h2 {
  font-size:20px;
  color:#fff;
  font-weight:700
}
.altbar .col-alt h3 {
  font-size:15px;
  color:#e7e7e7
}
.col-alt {
  -ms-flex:0 0 33.333333%;
  flex:0 0 31.333333%;
  max-width:33.333333%;
  padding:10px;
  background:#414141;
  margin:0 auto;
  margin-top:10px;
  border-radius:10px;
  text-align:center
}
.bilgi {
  padding:10px;
  background:#fff;
  margin-top:20px;
  border-radius:5px;
  background:#fff;
  color: #2639a5;
}
.bilgi h1 {
  color:#393975;
  font-size:20px;
  border:none;
  text-align:center;
  font-weight:700
}
.bilgi p {
  font-size:25px
}
.devam {
  display:none
}
.devambtn {
  border:none;
  padding:5px;
  font-weight:700;
  border-radius:5px;
  background:#0003c3!important;
  color:#fff;
  font-size:15px;
  margin-bottom:10px
}
.yukari {
  display:none;
  position:fixed;
  bottom:0;
  right:0;
  border:none;
  padding:10px;
  margin-bottom:10px;
  margin-right:10px;
  background:#393975;
  border-radius:5px;
  color:#fff;
  font-size:20px
}
.sosyalmedya {
  background:#fff;
  padding:10px;
  border-radius:5px
}
.sosyalmedya a {
  text-decoration:none
}
.soz {
  font-size:15px;
  text-align:center;
  padding:16px;
  background:#181818!important;
  color:#0026ff!important
}
body {
  background:url(https://media.istockphoto.com/id/1367739711/vector/sound-wave-heart-shape-music-equalizer-abstract-vector-illustration.jpg?s=612x612&w=0&k=20&c=S6xb1YMAk69fp-8A7hzYFa_ZJi9asnB3St6ucr6Gb-s=)!important;
  margin:0
}
.footer {
  padding:50px;
  margin:0 10px;
  margin-top:0
}
.footer img {
  background:0 0!important;
  padding:10px;
  border-radius:10px;
  width:100%
}
.footer label {
  font-size:13px;
  color:#393975;
  font-weight:700
}
.footer h2 {
  text-align:center;
  font-size:20px;
  font-weight:700;
  color:#000fda!important
}
.footer ul li {
  list-style-type:none;
  text-align:center;
  margin-left:0!important
}
.footer ul li a {
  color:#8c8c8c
}
.footer ul li a:hover {
  text-decoration:none;
  background:#393975;
  padding:2px;
  color:#fff;
  border-radius:5px
}
a {
  color:#2a2eff!important;
  text-decoration:none!important;
  background-color:transparent!important
}
.medya {
  background:#121212!important;
  border-radius:5px;
  padding:10px
}
.medya h2 {
  color:#ff1313!important
}
.medya ul li a {
  color:#0044ff!important
}
.medya ul li a:hover {
  background:#ff6450;
  color:#754f39
}
.medya i {
  color:#0f00e1!important;
  font-size:16px
}
.bilgi {
  margin-top:10px;
  margin-bottom:20px;
  box-shadow:0 0 5px 3px #72706f
}
.hakkimizda h2 {
  color:#fff!important;
  font-size:17px;
  border:none
}
.hakkimizda h3 {
  color:#777;
  font-size:15px
}
@media screen and (max-width:1044px) {
  .nav-li ul {
    display:none;
    float:none;
    height:100%
  }
  .nav-li ul li {
    display:block;
    margin-right:10px;
    border:none;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:700;
    color:#777;
    list-style-type:none;
    text-align:center;
    width:100%;
    margin-left:-20px
  }
  .col-alt {
    -ms-flex:0 0 99%;
    flex:0 0 99%;
    max-width:100%
  }
  .altbar .container-fluet {
    margin:20px 10px
  }
}
@keyframes right {
  0% {
    transform:translateX(0)
  }
  40% {
    transform:translateX(10px)
  }
  60% {
    transform:translateX(5px)
  }
  100% {
    transform:translateX(0)
  }
}
#intro_top {
  width:100%;
  z-index:1;
  position:relative;
  height:auto;
  padding:80px 0;
  background:linear-gradient(7deg,rgb(48 48 48),rgb(38 38 38) 40%,rgb(82 82 82));
  background-repeat:no-repeat;
  background-size:auto auto;
  background-position:center 50px;
  background-attachment:fixed
}
#login_wrap {
  width:100%;
  height:100%
}
#login_all {
  width:800px;
  max-width:94%;
  border-radius:20px;
  display:block;
  margin:0 auto;
  color:#fff
}
.intro_social_container {
  width:100%;
  height:auto;
  text-align:center;
  padding-top:20px
}
.intro_social_btn {
  display:inline-block;
  width:40px;
  height:40px;
  margin:0 3px;
  border-radius:50%
}
.login_not_member {
  text-align:center;
  padding-top:5px
}
#intro_section_user {
  padding:72px 0
}
.active_user {
  height:110px;
  text-align:center;
  float:left;
  overflow:hidden
}
#last_active {
  width:100%;
  height:110px;
  margin:0 auto
}
.active_avatar {
  width:110px;
  height:110px;
  border-radius:50%
}
#last_active .left-arrow,
#last_active .right-arrow {
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  margin-top:5px;
  cursor:pointer;
  margin-top:40px
}
#last_active .left-arrow {
  float:left;
  border-right:10px solid #ccc;
  display:none
}
#last_active .left-arrow:hover {
  border-right:10px solid #000
}
#last_active .right-arrow {
  float:right;
  border-left:10px solid #ccc;
  display:none
}
#last_active .right-arrow:hover {
  border-left:10px solid #000
}
#last_active .last-clip {
  margin:0 20px;
  overflow:hidden;
  position:relative
}
#last_active .last_10 {
  height:110px;
  width:10000%;
  overflow:hidden;
  position:relative
}
.section {
  width:100%;
  height:auto;
  margin:0 auto
}
.section_content {
  width:100%;
  max-width:1100px;
  margin:0 auto
}
.section_inside {
  margin:0 auto
}
@media screen and (max-width:1120px) {
  .section_inside {
    width:96%
  }
}
@media screen and (min-width:1121px) {
  #intro_top {
    background-attachment:fixed
  }
}
@media screen and (max-width:1100px) {
  #intro_top {
    background-size:auto 100%;
    background-position:center 0;
    padding:80px 0
  }
}
@media screen and (max-width:768px) {
  #intro_top {
    background-size:auto 100%;
    background-position:center 0
  }
}
.sosyalmedya a {
  text-decoration:none
}
.soz {
  font-size:15px;
  text-align:center;
  padding:16px;
  background:#393975;
  color:#fff
}
.footer {
  padding:50px;
  margin:0 10px;
  margin-top:0
}
.footer img {
  background:#e5e5fa;
  padding:10px;
  border-radius:10px;
  width:100%
}
.footer label {
  font-size:13px;
  color:#fff!important;
  font-weight:700
}
.footer h2 {
  text-align:center;
  font-size:20px;
  font-weight:700;
  color:#393975
}
.footer ul li {
  list-style-type:none;
  text-align:center;
  margin-left:-40px
}
.footer ul li a {
  color:#8c8c8c
}
.footer ul li a:hover {
  text-decoration:none;
  background:#393975;
  padding:2px;
  color:#fff;
  border-radius:5px
}
.medya {
  background:#393975;
  border-radius:5px;
  padding:10px
}
.medya h2 {
  color:#ff9b50
}
.medya ul li a {
  color:#e5e5fa
}
.medya ul li a:hover {
  background:#ff9b50;
  color:#393975
}
.medya i {
  color:#ff9b50;
  font-size:16px
}
.bilgi {
  margin-top:10px;
  margin-bottom:20px;
  box-shadow:0 0 5px 3px #72706f
}
.hakkimizda h2 {
  color:#777;
  font-size:17px;
  border:none
}
.hakkimizda h3 {
  color:#777;
  font-size:15px
}
.modal_in {
  border:1px solid #2f00ff!important;
}
.back_modal {
  background: #55543afc !important;
}
input {
  background: #ffffff !important;
  border: 1px solid #0011ff !important;
  color:#181818!important
}
.theme_btn {
  background: linear-gradient(#48e311, #1c00bb1a) !important;
}
.modal_title {
  color: #ffffff !important;
  padding-bottom:15px!important;
  font-size:19px!important;
  font-weight:700!important
}
.bcell_mid {
  color:azure!important;
  display:table-cell!important;
  vertical-align:middle!important
}
@media screen and (max-width:1044px) {
  .nav-li ul {
    display:none;
    float:none;
    height:100%
  }
  .nav-li ul li {
    display:block;
    margin-right:10px;
    border:none;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:700;
    color:#777;
    list-style-type:none;
    text-align:center;
    width:100%;
    margin-left:-20px
  }
  .col-alt {
    -ms-flex:0 0 99%;
    flex:0 0 99%;
    max-width:100%
  }
  .altbar .container-fluet {
    margin:20px 10px
  }
}
@keyframes right {
  0% {
    transform:translateX(0)
  }
  40% {
    transform:translateX(10px)
  }
  60% {
    transform:translateX(5px)
  }
  100% {
    transform:translateX(0)
  }
}
#intro_top {
  width:100%;
  z-index:1;
  position:relative;
  height:auto;
  padding:80px 0;
  background:linear-gradient(7deg,rgb(48 48 48),rgb(38 38 38) 40%,rgb(82 82 82));
  background-repeat:no-repeat;
  background-size:auto auto;
  background-position:center 50px;
  background-attachment:fixed
}
#login_wrap {
  width:100%;
  height:100%
}
#login_all {
  width:800px;
  max-width:94%;
  border-radius:20px;
  display:block;
  margin:0 auto;
  color:#fff
}
.intro_social_container {
  width:100%;
  height:auto;
  text-align:center;
  padding-top:20px
}
.intro_social_btn {
  display:inline-block;
  width:40px;
  height:40px;
  margin:0 3px;
  border-radius:50%
}
.login_not_member {
  text-align:center;
  padding-top:5px
}
#intro_section_user {
  padding:72px 0
}
.active_user {
  height:110px;
  text-align:center;
  float:left;
  overflow:hidden
}
#last_active {
  width:100%;
  height:110px;
  margin:0 auto
}
.active_avatar {
  width:110px;
  height:110px;
  border-radius:50%
}
#last_active .left-arrow,
#last_active .right-arrow {
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  margin-top:5px;
  cursor:pointer;
  margin-top:40px
}
#last_active .left-arrow {
  float:left;
  border-right:10px solid #ccc;
  display:none
}
#last_active .left-arrow:hover {
  border-right:10px solid #000
}
#last_active .right-arrow {
  float:right;
  border-left:10px solid #ccc;
  display:none
}
#last_active .right-arrow:hover {
  border-left:10px solid #000
}
#last_active .last-clip {
  margin:0 20px;
  overflow:hidden;
  position:relative
}
#last_active .last_10 {
  height:110px;
  width:10000%;
  overflow:hidden;
  position:relative
}
.section {
  width:100%;
  height:auto;
  margin:0 auto
}
.section_content {
  width:100%;
  max-width:1100px;
  margin:0 auto
}
.section_inside {
  margin:0 auto
}
@media screen and (max-width:1120px) {
  .section_inside {
    width:96%
  }
}
@media screen and (min-width:1121px) {
  #intro_top {
    background-attachment:fixed
  }
}
@media screen and (max-width:1100px) {
  #intro_top {
    background-size:auto 100%;
    background-position:center 0;
    padding:80px 0
  }
}
@media screen and (max-width:768px) {
  #intro_top {
    background-size:auto 100%;
    background-position:center 0
  }
}