@import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300;1,400;1,500;1,600;1,700&display=swap";

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input, textarea, select, button {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 400;
}

body {
    background: var(--bg-darken-10);
    color: var(--text-lighten-50);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    overflow: hidden;
}

a {
    color: var(--ozeller-kanallar);
    transition: color .3s ease;
}

a:hover {
    color: var(--main-darken-10);
}

p {
    margin-bottom: 15px;
}

@media(max-width: 480px) {
    p {
        margin-bottom: 5px;
    }
}

@media(min-width: 481px) and (max-width: 768px) {
    p {
        margin-bottom: 5px;
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    p {
        margin-bottom: 5px;
    }
}

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

@media(max-width: 480px) {
    ::-webkit-scrollbar {
        width: 3px;
    }
}

@media(min-width: 481px) and (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 3px;
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    ::-webkit-scrollbar {
        width: 3px;
    }
}

::-webkit-scrollbar-track {
    background: var(--bg-darken-10);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-darken-20);
    border-radius: 8px;
    transition: all .3s ease;
}

@media(max-width: 480px) {
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }
}

@media(min-width: 481px) and (max-width: 768px) {
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }
}

::-webkit-scrollbar-thumb:hover {
    background: var(--main);
}

.login-body {
    display: grid;
    place-items: center;
    height: 100vh;
    padding: 20px 0;
}

.login {
    width: 100%;
    max-width: 400px;
}

@media(max-width: 480px) {
    .login {
        width: 100%;
        padding: 0 20px;
    }
}

@media(min-width: 481px) and (max-width: 768px) {
    .login {
        width: 100%;
        padding: 0 20px;
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    .login {
        width: 100%;
        padding: 0 20px;
    }
}

.login__container {
    width: 100%;
    background: #fff;
    border: 1px solid var(--bg-darken-20);
    border-radius: 10px;
    overflow: hidden;
}

.login__header {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.login__header-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.login__header-logo {
    position: relative;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px;
}

.login__header-logo img {
    height: 55px;
}

.login__form {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login__form-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.login__form-item label {
    font-size: 14px;
    font-weight: 300;
    opacity: .5;
}

.login__form h1 {
    font-size: 26px;
    font-weight: 600;
    color: var(--main);
    margin-bottom: 10px;
}

.login__form input {
    padding: 10px;
    border: 1px solid var(--bg-darken-20);
    border-radius: 5px;
}

.login__form small {
    font-size: 14px;
    color: var(--main);
}

.login__footer {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
    opacity: .5;
}

.login__footer span:first-child {
    font-size: 16px;
    font-weight: 600;
}

.login__footer span:last-child {
    font-size: 12px;
    font-weight: 300;
}

.logo {
    display: flex;
    align-items: center;
    height: 55px;
    padding-right: 10px;
    border-right: 1px solid var(--bg-darken-10);
}

.logo img {
    height: 45px;
    filter: var(--logo-filter);
}

.logo--about {
    height: auto;
}

.logo--about img {
    height: 35px;
    filter: var(--logo-filter);
    opacity: .5;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: max-content;
    gap: 5px;
    border-radius: 10px;
    border: none;
    transition: all .3s ease;
    cursor: pointer;
}

.button--quote {
    background-color: var(--bg-darken-10);
    padding: 5px 10px;
    color: var(--text-lighten-50);
    font-size: 12px;
}

.button--quote:hover {
    background-color: var(--bg-darken-20);
}

.button--add-file {
    width: 35px;
    height: 35px;
    background-color: var(--main);
    border-radius: 50%;
    color: var(--bg);
    font-size: 22px;
    transition: all .3s ease;
}

@media(max-width: 480px) {
    .button--add-file {
        width: 30px;
        height: 30px;
    }
}

@media(min-width: 481px) and (max-width: 768px) {
    .button--add-file {
        width: 30px;
        height: 30px;
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    .button--add-file {
        width: 30px;
        height: 30px;
    }
}

.button--add-file:hover {
    background-color: var(--main-darken-10);
    color: var(--bg);
}

.button--add-file.active {
    transform: rotate(45deg);
}

.button--emoji {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 36px;
}

@media(max-width: 480px) {
    .button--emoji {
        width: 25px;
        height: 25px;
        font-size: 22px;
    }
}

@media(min-width: 481px) and (max-width: 768px) {
    .button--emoji {
        width: 25px;
        height: 25px;
        font-size: 22px;
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    .button--emoji {
        width: 25px;
        height: 25px;
        font-size: 22px;
    }
}

.button--emoji.active {
    color: var(--main);
}

.button--send {
    height: 45px;
    padding: 0 20px;
    border-radius: 45px;
    color: var(--bg);
    background-color: var(--main);
}

@media(max-width: 480px) {
    .button--send {
        padding: 0px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
}

@media(min-width: 481px) and (max-width: 768px) {
    .button--send {
        padding: 0px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    .button--send {
        padding: 0px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
}

@media(max-width: 480px) {
    .button--send>span {
        display: none;
    }
}

@media(min-width: 481px) and (max-width: 768px) {
    .button--send>span {
        display: none;
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    .button--send>span {
        display: none;
    }
}

	
.button--send > span {
    display: none;
}

.button--send:hover {
    background-color: var(--main-darken-10);
    color: #fff;
}

.button--submit {
    width: 100%;
    padding: 15px 20px;
    background: var(--main);
    border-radius: 5px;
    font-weight: 600;
    color: var(--bg);
}

.button--submit:hover {
    background: var(--main-darken-10);
    color: var(--bg);
}

.button--cancel {
    width: 100%;
    padding: 15px 20px;
    border-radius: 5px;
    font-weight: 600;
    background: var(--bg-darken-10);
    color: var(--text-lighten-50);
}

.button--cancel:hover {
    background: var(--bg-darken-20);
}

.button--login {
    width: 100%;
    padding: 15px 20px;
    background-color: var(--buton-login);
    border-radius: 5px;
    font-weight: 600;
    color: #fff;
}

.button--login:hover {
    background: var(--main-darken-10);
}

.popup {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 30px;
    max-width: 400px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

@media (max-width: 480px) {
    .popup {
        padding: 15px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .popup {
        padding: 15px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .popup {
        padding: 15px;
    }
}

.popup .mfp-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: var(--bg-darken-10);
    color: var(--text-lighten-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all .3s ease;
    opacity: 1;
}

@media (max-width: 480px) {
    .popup .mfp-close {
        width: 25px;
        height: 25px;
        right: 5px;
        top: 5px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .popup .mfp-close {
        width: 25px;
        height: 25px;
        right: 5px;
        top: 5px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .popup .mfp-close {
        width: 25px;
        height: 25px;
        right: 5px;
        top: 5px;
    }
}

.popup .mfp-close:hover {
    background: var(--main);
    color: var(--bg);
}

.popup__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 480px) {
    .popup__container {
        gap: 5px;
        font-size: 14px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .popup__container {
        gap: 5px;
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .popup__container {
        gap: 5px;
        font-size: 14px;
    }
}

.popup__container > h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--main-darken-10);
}

@media (max-width: 480px) {
    .popup__container > h3 {
        font-size: 16px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .popup__container > h3 {
        font-size: 16px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .popup__container > h3 {
        font-size: 16px;
    }
}

.popup__wrapper {
    width: 100%;
    line-height: 1.5;
}

.popup__buttons {
    display: flex;
    width: 100%;
    gap: 5px;
}

.popup__buttons .button {
    width: max-content;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form > h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--main-darken-10);
}

@media (max-width: 480px) {
    .form > h3 {
        font-size: 16px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .form > h3 {
        font-size: 16px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .form > h3 {
        font-size: 16px;
    }
}

.form__container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.form__item label {
    font-size: 12px;
    opacity: .5;
}

.form__item input[type=text], .form__item input[type=email], .form__item input[type=password], .form__item select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--bg-darken-20);
    width: 100%;
    font-size: 14px;
    color: var(--text-lighten-30);
    background: var(--bg-darken-10);
    transition: all .3s ease;
}

.form__item input[type=text]:focus, .form__item input[type=email]:focus, .form__item input[type=password]:focus, .form__item select:focus {
    border-color: var(--main);
}

.form__item--setting {
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.form__item--setting label {
    font-size: 16px;
    font-weight: 400;
    opacity: 1;
}

#context-menu {
    position: absolute;
    z-index: 99;
    font-size: 14px;
	color: red;
}

#context-menu.hide {
    display: none;
}

#context-menu ul {
    background: var(--bg);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--bg-darken-20);
    width: 150px;
    padding: 5px;
	position: fixed;
	top: 35px;
	right: 230px;
}

#context-menu ul li {
    display: flex;
    width: 100%;
}

#context-menu ul li:last-child {
    border-bottom: none;
}

#context-menu ul a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    color: #1c6071;
    width: 100%;
    border-radius: 5px;
}

#context-menu ul a:hover {
    background: var(--main);
    color: var(--bg);
}

.header {
    background: var(--bg);
    border-bottom: 1px solid var(--bg-darken-10);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 99;
	background-color: var(--header-bg, white); /* ✅ Değişkeni burada kullan */
}


.header__container {
    padding: 0 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header2 {
    background: var(--bg);
    border-bottom: 1px solid var(--bg-darken-10);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 99;
}


.header__container2 {
    padding: 0 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__topic-display {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  white-space: nowrap; /* Kayan yazının tek satırda kalmasını sağlar */
}


#header2-topic {
  font-size: 18px;
  display: inline-block;
  white-space: nowrap;   /* Yazı tek satırda kalır */
  animation: marquee-desktop 3s linear infinite alternate; /* Bilgisayar için kayan yazı animasyonu */
  position: relative;   /* Animasyonu düzgün bir şekilde kontrol edebilmek için */
}

@keyframes marquee-desktop {
  0% {
    transform: translateX(100%); /* Başlangıç: Yazı ekranın sağında, tam sağdan başlıyor */
  }
  100% {
    transform: translateX(-100%); /* Bitiş: Yazı ekranın sol tarafına kayboluyor */
  }
}

/* Mobil uyum için ekstra stil */
@media (max-width: 768px) {
  #header2-topic {
    font-size: 12px;  /* Mobilde yazı boyutunu küçültme */
    animation: marquee-mobile 2s linear infinite alternate; /* Mobilde animasyonu biraz daha yavaş yapabiliriz */
    white-space: normal;  /* Mobilde yazının taşması durumunda satıra geçmesini sağlar */
    margin: 0 10px;  /* Yazının ekranın kenarlarına çok yakın olmasını engellemek için margin ekledik */
  }
}

@keyframes marquee-mobile {
  0% {
    transform: translateX(-4%); /* Başlangıç: Yazı ekranın sağında, tam sağdan başlıyor */
  }
  100% {
    transform: translateX(13%); /* Bitiş: Yazı ekranın sol tarafına kayboluyor */
  }
}

@media (max-width: 480px) {
    .header__container {
        padding: 0px;
    }
}

@media (max-width: 480px) {
    .header__container2 {
        padding: 0px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__container {
        padding: 0px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__container2 {
        padding: 0px;
    }
}	
		
		
.header__container {
    padding: 0px;
}

.header__container2 {
    padding: 0px;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__container {
        padding: 0px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__container2 {
        padding: 0px;
    }
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

@media (max-width: 480px) {
    .header__logo {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__logo {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__logo {
        display: none;
    }
}

.header__logo span {
    font-weight: 600;
    color: var(--header-logo);
}

.header__nav {
    display: flex;
}

@media (max-width: 480px) {
    .header__nav {
        width: 100%;
        justify-content: space-between;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav {
        width: 100%;
        justify-content: space-between;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav {
        width: 100%;
        justify-content: space-between;
    }
}

.header__nav-menu {
    display: flex;
}

.header__nav-main {
    display: flex;
}

.header__nav-main li {
    display: flex;
    border-right: 1px solid var(--bg-darken-10);
}

@media (max-width: 480px) {
    .header__nav-main li.video-chat {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-main li.video-chat {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-main li.video-chat {
        display: none;
    }
}

@media (max-width: 480px) {
    .header__nav-main li.voice-chat {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-main li.voice-chat {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-main li.voice-chat {
        display: none;
    }
}

.header__nav-main a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    padding: 0 20px;
    position: relative;
    height: 55px;
}

@media (max-width: 480px) {
    .header__nav-main a {
        font-size: 14px;
        height: 35px;
        padding: 0 10px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-main a {
        font-size: 14px;
        height: 35px;
        padding: 0 10px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-main a {
        font-size: 14px;
        height: 35px;
        padding: 0 10px;
    }
}

.header__nav-main a::after {
    position: absolute;
    bottom: 1px solid;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    border-radius: 2px;
    content: "";
    opacity: 0;
    background-color: var(--main);
    transition: all .3s ease;
}

.header__nav-main a:hover,
.header__nav-main a.active {
    color: var(--ozeller-kanallar);
}

.header__nav-main a:hover::after,
.header__nav-main a.active::after {
    width: 100%;
    opacity: 1;
}

.header__nav-main a:hover i,
.header__nav-main a.active i {
    color: var(--main);
}

.header__nav-main a i {
    font-size: 18px;
}

.header__nav-main a small {
    padding: 2px 5px;
    position: absolute;
    font-size: 9px;
    top: 10px;
    right: 15px;
    border-radius: 15px;
    background: var(--red);
    color: var(--text-lighten-100);
}

.header__nav-config {
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-right: 1px solid var(--bg-darken-10);
}

@media (max-width: 480px) {
    .header__nav-config {
        padding: 0 5px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-config {
        padding: 0 5px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-config {
        padding: 0 5px;
    }
}

.header__nav-config > li {
    display: flex;
    position: relative;
}

.header__nav-config > li:hover .sub-menu {
    display: flex;
}

.header__nav-config a {
    height: 55px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 28px;
    color: var(--header-renk, #b3b3b3);
}

@media (max-width: 480px) {
    .header__nav-config a {
        height: 35px;
        width: 35px;
        font-size: 22px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-config a {
        height: 35px;
        width: 35px;
        font-size: 22px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-config a {
        height: 35px;
        width: 35px;
        font-size: 22px;
    }
}

.header__nav-config a:hover {
    color: var(--header-renk);
}

.header__nav-config a small {
    position: absolute;
    top: 5px;
    left: 0px;
    font-size: 10px;
    color: var(--text-lighten-100);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .header__nav-config a small {
        width: 15px;
        height: 15px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-config a small {
        width: 15px;
        height: 15px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-config a small {
        width: 15px;
        height: 15px;
    }
}

.header__nav-config .sub-menu {
    position: absolute;
    top: 55px;
    right: -61px;
    display: none;
    width: 300px;
    font-size: 14px;
}

@media (max-width: 480px) {
    .header__nav-config .sub-menu {
        top: 35px;
        right: -41px;
        width: 200px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-config .sub-menu {
        top: 35px;
        right: -41px;
        width: 200px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-config .sub-menu {
        top: 35px;
        right: -41px;
        width: 200px;
    }
}

.header__nav-config .sub-menu ul {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    padding: 10px;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--bg-darken-10);
    gap: 1px;
    width: 100%;
}

.header__nav-config .sub-menu ul li {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    background: var(--bg-darken-5);
    padding: 5px;
}

.header__nav-config .sub-menu ul li i {
    color: var(--main);
    font-size: 16px;
}

.header__nav-config .sub-menu ul li span {
    font-weight: 300;
    opacity: .9;
}

.header__nav-user {
    display: flex;
    align-items: center;
}

.header__nav-user-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
    height: 55px;
    cursor: pointer;
}

@media (max-width: 480px) {
    .header__nav-user-item {
        padding: 0 5px;
        height: 35px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-user-item {
        padding: 0 5px;
        height: 35px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-user-item {
        padding: 0 5px;
        height: 35px;
    }
}

.header__nav-user-item i {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--bg-darken-10);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

@media (max-width: 480px) {
    .header__nav-user-item i {
        width: 25px;
        height: 25px;
        border: 1px solid var(--main);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-user-item i {
        width: 25px;
        height: 25px;
        border: 1px solid var(--main);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-user-item i {
        width: 25px;
        height: 25px;
        border: 1px solid var(--main);
    }
}

.header__nav-user-item > div {
    display: flex;
    flex-direction: column;
}

@media (max-width: 480px) {
    .header__nav-user-item > div {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-user-item > div {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-user-item > div {
        display: none;
    }
}

.header__nav-user-item > div span:first-child {
    font-size: 12px;
    color: var(--header-nick);
    font-weight: 300;
}

.header__nav-user-item > div span:last-child {
    font-size: 18px;
    color: var(--header-nick, #b3b3b3);
    font-weight: 600;
}

.header__nav-user .sub-menu {
    position: absolute;
    top: 55px;
    right: 20px;
    display: none;
}

@media (max-width: 480px) {
    .header__nav-user .sub-menu {
        top: 35px;
        right: 0px;
        font-size: 14px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-user .sub-menu {
        top: 35px;
        right: 0px;
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-user .sub-menu {
        top: 35px;
        right: 0px;
        font-size: 14px;
    }
}

.header__nav-user .sub-menu ul {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    padding: 10px;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--bg-darken-10);
}	
		
		
		
.header__nav-user .sub-menu ul li {
    display: flex;
    width: 100%;
}

.header__nav-user .sub-menu ul a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    width: 100%;
    color: var(--text-lighten-50);
    border-radius: 5px;
}

@media (max-width: 480px) {
    .header__nav-user .sub-menu ul a {
        padding: 5px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .header__nav-user .sub-menu ul a {
        padding: 5px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header__nav-user .sub-menu ul a {
        padding: 5px;
    }
}

.header__nav-user .sub-menu ul a:hover {
    color: var(--bg);
    background: var(--main);
}

.header__nav-user:hover .header__nav-user-item i {
    background: var(--main);
    color: var(--bg);
}

.header__nav-user:hover .sub-menu {
    display: flex;
}

.page {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page__container {
    width: 100%;
    display: flex;
}

.chat {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat__container {
    width: 200%;
    display: flex;
    background: var(--bg);
    overflow: hidden;
    transition: all .3s ease;
}

.chat__container.rooms {
    transform: translateX(0%);
}

.chat__container.personel {
    transform: translateX(-50%);
}

.chat__rooms {
    width: 100%;
    height: calc(100vh - 56px);
    display: flex;
    transition: all .3s ease;
}

@media (max-width: 480px) {
    .chat__rooms {
        height: calc(100vh - 36px);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__rooms {
        height: calc(100vh - 36px);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__rooms {
        height: calc(100vh - 36px);
    }
}

.chat__personel {
    width: 100%;
    height: calc(100vh - 56px);
    display: flex;
    transition: all .3s ease;
}

@media (max-width: 480px) {
    .chat__personel {
        height: calc(100vh - 36px);
        min-height: 300px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__personel {
        height: calc(100vh - 36px);
        min-height: 300px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__personel {
        height: calc(100vh - 36px);
        min-height: 300px;
    }
}

.chat__items {
    width: 250px;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    border-left: 1px solid var(--bg-darken-10);
	background-color: var(--kanallar-bg, white); /* ✅ Değişkeni burada kullan */
}

@media (max-width: 480px) {
    .chat__items {
        width: 100px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__items {
        width: 100px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__items {
        width: 100px;
    }
}

.chat__items-container {
    padding: 10px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}

@media (max-width: 480px) {
    .chat__items-container {
        padding: 5px 0;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__items-container {
        padding: 5px 0;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__items-container {
        padding: 5px 0;
    }
}

.chat__users {
    width: 250px;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    border-left: 1px solid var(--bg-darken-10);
    transition: all .3s ease;
    position: relative;
	background-color: var(--users-bg, white); /* ✅ Değişkeni burada kullan */
}

@media (max-width: 480px) {
    .chat__users {
        width: 100px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__users {
        width: 100px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__users {
        width: 100px;
    }
}

.chat__users.hidden {
    overflow: hidden;
    width: 0px;
}

.chat__users-container {
    overflow-x: auto;
    padding: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 480px) {
    .chat__users-container {
        padding: 5px 10px;
        gap: 0px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__users-container {
        padding: 5px 10px;
        gap: 0px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__users-container {
        padding: 5px 10px;
        gap: 0px;
    }
}

.chat__screen {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: url(../images/messages-bg.png) var(--bg);
}


.chat__screen-container {
    overflow-x: auto;
    width: 100%;
    padding: 20px;
    height: 100%;
    margin-bottom: 75px;
	background-color: var(--chat-bg, #b3b3b3);
}


@media (max-width: 480px) {
    .chat__screen-container {
        padding: 10px;
        margin-bottom: 80px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__screen-container {
        padding: 10px;
        margin-bottom: 80px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__screen-container {
        padding: 10px;
        margin-bottom: 80px;
    }
}

.chat__screen-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0px;
}

.chat__screen-close {
    z-index: 99;
    position: absolute;
    top: 276px;
    right: -1px;
    padding: 5px;
    border-radius: 10px 0 0 10px;
    background: #ff0000;
    color: var(--text-lighten-100);
    cursor: pointer;
    transition: all .3s ease;
    font-size: 14px;
}

@media (max-width: 480px) {
    .chat__screen-close {
        top: 276px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__screen-close {
        top: 276px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__screen-close {
        top: 276px;
    }
}

.chat__screen-close:hover {
    background: var(--bg-darken-50);
}

.chat__form {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    background-color: var(--chat-form);
    border-top: 1px solid var(--bg-darken-10);
    padding: 0 15px;
    z-index: 0;
}

.eklenti_form {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    color: white;
    border-top: 1px solid var(--bg-darken-10);
    padding: 0 15px;
    z-index: 0;
	top: -40px;
	
	background-color: var(--eklenti-bg, #452bd9); /* ✅ Değişkeni burada kullan */
	
}

@media (max-width: 480px) {
    .chat__form {
        height: 40px;
        padding: 0 5px;
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .eklenti_form {
        height: 40px;
        padding: 0 5px;
        gap: 8px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__form {
        height: 40px;
        padding: 0 5px;
        gap: 5px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .eklenti_form {
        height: 40px;
        padding: 0 5px;
        gap: 8px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__form {
        height: 40px;
        padding: 0 5px;
        gap: 5px;
    }
}	

@media (min-width: 769px) and (max-width: 1024px) {
    .eklenti_form {
        height: 40px;
        padding: 0 5px;
        gap: 8px;
    }
}	
			
			
			
.chat__form {
    height: 40px;
    padding: 0 5px;
    gap: 5px;
}

.eklenti_form {
    height: 40px;
    padding: 0 5px;
    gap: 8px;
}

.chat__form-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.eklenti_form-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.chat__form-container input {
    background: var(--bg-darken-10);
    color: var(--text);
    padding: 0 10px;
    height: 33px;
    border: none;
    width: 100%;
    border-radius: 40px;
}

.eklenti_form-container input {
    background: var(--bg-darken-10);
    color: var(--text);
    padding: 0 10px;
    height: 40px;
    border: none;
    width: 100%;
    border-radius: 40px;
}

@media (max-width: 480px) {
    .chat__form-container input {
        height: 30px;
        padding: 0px 3px;
        font-size: 12px;
        border-radius: 30px;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .eklenti_form-container input {
        height: 30px;
        padding: 0px 3px;
        font-size: 12px;
        border-radius: 30px;
        padding: 0 10px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__form-container input {
        height: 30px;
        padding: 0px 3px;
        font-size: 12px;
        border-radius: 30px;
        padding: 0 10px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .eklenti_form-container input {
        height: 30px;
        padding: 0px 3px;
        font-size: 12px;
        border-radius: 30px;
        padding: 0 10px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat__form-container input {
        height: 30px;
        padding: 0px 3px;
        font-size: 12px;
        border-radius: 30px;
        padding: 0 10px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .eklenti_form-container input {
        height: 30px;
        padding: 0px 3px;
        font-size: 12px;
        border-radius: 30px;
        padding: 0 10px;
    }
}

.chat__form-container input.bold {
    font-weight: 600;
}

.chat__form-container input.italic {
    font-style: italic;
}

.chat__form-container input.underline {
    text-decoration: underline;
}

.text-editor {
    position: absolute;
    background: var(--main);
    color: var(--bg);
    height: 0px;
    left: 0px;
    bottom: 60px;
    border-radius: 10px 10px 0 0;
    padding: 0 10px;
    display: flex;
    opacity: 0;
    align-items: center;
    gap: 5px;
    transition: all .3s ease;
}

@media (max-width: 480px) {
    .text-editor {
        bottom: 40px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .text-editor {
        bottom: 40px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .text-editor {
        bottom: 40px;
    }
}

.text-editor.active {
    opacity: 1;
    height: 50px;
}

.text-editor__colors {
    position: relative;
    display: flex;
    margin-right: 10px;
}

.text-editor__colors-main {
    cursor: pointer;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
    border: 1px solid var(--main-darken-10);
}

.text-editor__colors-wrapper {
    background: var(--bg);
    border: 1px solid var(--bg-darken-10);
    border-radius: 10px 10px 10px 0;
    padding: 10px;
    position: absolute;
    left: 0px;
    bottom: 45px;
    width: max-content;
    display: none;
    gap: 5px;
    grid-template-columns: repeat(8, 1fr);
    transition: all .3s ease;
}

.text-editor__colors-wrapper.active {
    display: grid;
}

.text-editor__colors-wrapper > span {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid var(--bg-darken-10);
    cursor: pointer;
}

.text-editor__colors-wrapper > span.active {
    border: 1px solid var(--main);
    outline: 3px solid var(--main-lighten-20);
}

.text-editor__button {
    width: 30px;
    height: 30px;
    display: flex;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px solid #ffffff;
    cursor: pointer;
    transition: all .3s ease;
}

.text-editor__button.active {
    background: var(--main-darken-10);
}

.text-editor__clear {
    margin-left: 10px;
    height: 25px;
    border-radius: 25px;
    border: none;
    padding: 0 10px;
    font-size: 14px;
    display: flex;
    gap: 5px;
    align-items: center;
    border: 1px solid var(--main-darken-10);
    background: rgba(0, 0, 0, 0);
    color: var(--bg);
    transition: all .3s ease;
    cursor: pointer;
}

.text-editor__clear:hover {
    background: var(--main-darken-10);
    color: var(--bg);
}

.emoji-editor.active {
    display: grid;
}

.emoji-editor img {
    padding: 3px;
    border-radius: 3px;
    cursor: pointer;
    transition: all .3s ease;
    border: 1px solid rgba(0, 0, 0, 0);
    width: 26px;
    height: 26px;
}

@media (max-width: 480px) {
    .emoji-editor img {
        width: 25px;
        height: 25px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .emoji-editor img {
        width: 25px;
        height: 25px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .emoji-editor img {
        width: 25px;
        height: 25px;
    }
}

.emoji-editor img:hover {
    border: 1px solid var(--main);
}

.chat-title {
    height: 50px;
    flex-shrink: 0;
    padding: 0 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    border-bottom: 2px solid var(--main);
}

@media (max-width: 480px) {
    .chat-title {
        padding: 0 10px;
        height: 30px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-title {
        padding: 0 10px;
        height: 30px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-title {
        padding: 0 10px;
        height: 30px;
    }
}

.chat-title h3 {
    display: flex;
    gap: 5px;
    color: var(--chat-yazi, #b3b3b3);
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .chat-title h3 {
        font-size: 12px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-title h3 {
        font-size: 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-title h3 {
        font-size: 12px;
    }
}

.chat-title h3 i {
    color: var(--main);
}

@media (max-width: 480px) {
    .chat-title__text {
        font-size: 12px;
        height: 12px;
        overflow: hidden;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-title__text {
        font-size: 12px;
        height: 12px;
        overflow: hidden;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-title__text {
        font-size: 12px;
        height: 12px;
        overflow: hidden;
    }
}

.chat-title--users {
    border-bottom: 2px solid var(--secondary);
}

.chat-title--screen {
    border-bottom: 2px solid var(--secondary);
    background: var(--bg);
}

@media (max-width: 480px) {
}
	
	
	
.chat-title--screen {
    overflow: auto;
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-title--screen {
        overflow: auto;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-title--screen {
        overflow: auto;
    }
}

.chat-item {
    display: flex;
    position: relative;
    width: 100%;
    align-items: center;
    padding: 0 20px;
}

@media (max-width: 480px) {
    .chat-item {
        padding: 0 10px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-item {
        padding: 0 10px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-item {
        padding: 0 10px;
    }
}

.chat-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-lighten-60);
    width: 100%;
    padding: 10px 0;
}

@media (max-width: 480px) {
    .chat-item > a {
        padding: 5px 0;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-item > a {
        padding: 5px 0;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-item > a {
        padding: 5px 0;
    }
}

.chat-item:hover > a,
.chat-item.active > a {
    color: var(--main-darken-20);
}

.chat-item:hover .chat-item__close,
.chat-item.active .chat-item__close {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.chat-item__close {
    width: 20px;
    height: 20px;
    background: var(--text);
    color: var(--bg);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0);
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    opacity: 0;
}

@media (max-width: 480px) {
    .chat-item__close {
        right: 10px;
        width: 15px;
        height: 15px;
        font-size: 14px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-item__close {
        right: 10px;
        width: 15px;
        height: 15px;
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-item__close {
        right: 10px;
        width: 15px;
        height: 15px;
        font-size: 14px;
    }
}

.chat-item__close:hover {
    background: var(--red-darken);
}

.chat-item__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-item__text > h5 {
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .chat-item__text > h5 {
        font-size: 12px;
        font-weight: 400;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-item__text > h5 {
        font-size: 12px;
        font-weight: 400;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-item__text > h5 {
        font-size: 12px;
        font-weight: 400;
    }
}

.chat-item__text > span {
    font-size: 12px;
    font-weight: 300;
}

@media (max-width: 480px) {
    .chat-item__text > span {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-item__text > span {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-item__text > span {
        display: none;
    }
}

.chat-item__badges {
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-item .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-item .badge--count {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--red);
    color: var(--text-lighten-100);
}

@media (max-width: 480px) {
    .chat-item .badge--count {
        width: 15px;
        height: 15px;
        font-size: 8px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-item .badge--count {
        width: 15px;
        height: 15px;
        font-size: 8px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-item .badge--count {
        width: 15px;
        height: 15px;
        font-size: 8px;
    }
}

.chat-item .badge--here {
    width: 20px;
    height: 20px;
    background: var(--main);
    border-radius: 50%;
    color: var(--bg);
    font-size: 16px;
}

@media (max-width: 480px) {
    .chat-item .badge--here {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-item .badge--here {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-item .badge--here {
        display: none;
    }
}

.chat-item .badge--volume {
    width: max-content;
    height: 20px;
    padding: 0 10px;
    border-radius: 20px;
    background: var(--bg-darken-10);
    gap: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 45px;
}

@media (max-width: 480px) {
    .chat-item .badge--volume {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat-item .badge--volume {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .chat-item .badge--volume {
        display: none;
    }
}

.user-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #2f4f4f;
    position: relative;
}

@media (max-width: 480px) {
    .user-item {
        padding: 5px 0;
        gap: 3px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .user-item {
        padding: 5px 0;
        gap: 3px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .user-item {
        padding: 5px 0;
        gap: 3px;
    }
}

.user-item:hover,
.user-item.active {
    color: var(--main-darken-30);
}

.user-item__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.user-item__text > h5 {
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .user-item__text > h5 {
        font-size: 12px;
        font-weight: 400;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .user-item__text > h5 {
        font-size: 12px;
        font-weight: 400;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .user-item__text > h5 {
        font-size: 12px;
        font-weight: 400;
    }
}

.user-item__text > span {
    font-size: 12px;
    font-weight: 300;
}

@media (max-width: 480px) {
    .user-item__text > span {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .user-item__text > span {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .user-item__text > span {
        display: none;
    }
}

.user-item .badge {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-radius: 50%;
    background: #2f4f4f;
    color: var(--bg);
    font-size: 18px;
}

@media (max-width: 480px) {
    .user-item .badge {
        width: auto;
        height: auto;
        font-size: 12px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .user-item .badge {
        width: auto;
        height: auto;
        font-size: 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .user-item .badge {
        width: auto;
        height: auto;
        font-size: 12px;
    }
}

.user-item .badge--count {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--red) !important;
    color: #fff;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
}

@media (max-width: 480px) {
    .user-item .badge--count {
        width: 15px;
        height: 15px;
        font-size: 8px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .user-item .badge--count {
        width: 15px;
        height: 15px;
        font-size: 8px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .user-item .badge--count {
        width: 15px;
        height: 15px;
        font-size: 8px;
    }
}

.user-item--owner {
    color: #452bd9;
}

.user-item--owner .badge {
    background: #452bd9;
}

.user-item--supervisor {
    color: brown;
}

.user-item--supervisor .badge {
    background: brown;
}

.user-item--operator-1 {
    color: var(--green);
}

.user-item--operator-1 .badge {
    background: var(--green);
}

.user-item--operator-2 {
    color: var(--red);
}

.user-item--operator-2 .badge {
    background: var(--red);
}

.user-item--talkative {
    color: #d98556;
}

.user-item--talkative .badge {
    background: #d98556;
}

.user-item--administrator {
    color: var(--userlist-renk, #b3b3b3);
}

.user-item--administrator .badge {
    background: var(--afterblue);
}

.message {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: var(--message-font-size, 14px); /* CSS değişkeni ekledik */
}

@media (max-width: 480px) {
    .message {
        font-size: 12px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .message {
        font-size: 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .message {
        font-size: 12px;
    }
}

.message:hover .button--quote {
    opacity: 1;
}

.message:hover .message__send-emoji {
    opacity: 1;
}

.message--me {
    align-items: flex-end;
}

.message--me .message__row {
    flex-direction: row-reverse;
}

.message--me .message__text {
    align-items: flex-end;
}

.message--me .message__header {
    flex-direction: row-reverse;
}

.message--me .message__header-user span {
    color: var(--main);
}

.message--me .message__header-user {
    flex-direction: row-reverse;
}

.message--me .message__text-container {
    border-radius: 10px 0 10px 10px;
}

.message--me .button--quote {
    left: 10px;
    right: auto;
}

.message--me .message__send-emoji {
    left: 10px;
    right: auto;
}

.message--bot .message__text-container {
    background-color: var(--text-lighten-30);
}

.message--bot .message__quote {
    background-color: var(--text-lighten-10);
}

.message--system .status__text-container {
    background-color: white;
}

.message--system-status .status__text-container {
    background-color: white;
}


.message--red .message__text-container {
    background-color: var(--red);
}

.message--orange .message__text-container {
    background-color: var(--orange);
}

.message--green .message__text-container {
    background-color: var(--green);
}

.message--turquoise .message__text-container {
    background-color: var(--turquoise);
}

.message--ginnezumi .message__text-container {
    background-color: var(--ginnezumi);
}

.message--afterblue .message__text-container {
    background-color: var(--afterblue);
}

.message__row {
    width: 100% !important;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
}

.message__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    position: relative;
}

@media (max-width: 480px) {
    .message__text {
        gap: 2px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .message__text {
        gap: 2px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .message__text {
        gap: 2px;
    }
}

.giris__text-container {
    display: flex;
    flex-direction: column;
    color: black;
    padding: 8px;
    border-radius: 0 10px 10px 10px;
    position: relative;
}

.part__text-container {
    display: flex;
    flex-direction: column;
    color: black;
    padding: 8px;
    border-radius: 0 10px 10px 10px;
    position: relative;
}

.mode__text-container {
    display: flex;
    flex-direction: column;
    color: black;
    padding: 8px;
    border-radius: 0 10px 10px 10px;
    position: relative;
}

.nickdegis__text-container {
    display: flex;
    flex-direction: column;
    color: black;
    padding: 8px;
    border-radius: 0 10px 10px 10px;
    position: relative;
}

.status__text-container {
    display: flex;
    flex-direction: column;
    color: black;
    padding: 8px;
    border-radius: 0 10px 10px 10px;
    position: relative;
}

.notice__text-container {
    display: flex;
    flex-direction: column;
    color: black;
    padding: 8px;
    border-radius: 0 10px 10px 10px;
    position: relative;
}

.message__text-container {
    display: flex;
    flex-direction: column;

    
    color: black;
    padding: 8px;
    border-radius: 0 10px 10px 10px;
    position: relative;
}

.message__text .button--quote {
    opacity: 0;
    position: absolute;
    bottom: -10px;
    right: 10px;
}

.message__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 14px;
    gap: 10px;
}

@media (max-width: 480px) {
    .message__header {
        font-size: 11px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .message__header {
        font-size: 11px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .message__header {
        font-size: 11px;
    }
}

.message__header-user {
    display: flex;
    color: var(--text-lighten-50);
    font-weight: 600;
}

.message__header-time {
    font-weight: 300;
    opacity: .5;
}

.message__quote {
    padding: 8px;
    display: flex;
    flex-direction: column;
    background: var(--main-darken-10);
    border-radius: 5px;
    gap: 5px;
    border-left: 2px solid var(--orange);
}

.message__quote-user {
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 480px) {
    .message__quote-user {
        font-size: 11px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .message__quote-user {
        font-size: 11px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .message__quote-user {
        font-size: 11px;
    }
}

.message__media {
    background: var(--main-darken-10);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: var(--bg) !important;
}

@media (max-width: 480px) {
    .message__media {
        flex-direction: column;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .message__media {
        flex-direction: column;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .message__media {
        flex-direction: column;
    }
}

.message__media-img {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
}

.message__media-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

.message__media-text h5 {
    font-weight: 700;
    font-size: 16px;
}

.message__content {
    width: 100%;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .message__content {
       font-size: var(--message-font-size, 12px); /* CSS değişkeni ekledik */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .message__content {
        font-size: var(--message-font-size, 12px); /* CSS değişkeni ekledik */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .message__content {
        font-size: var(--message-font-size, 12px); /* CSS değişkeni ekledik */
    }
}

.message__content a {
    color: black;
    font-weight: 700;
}

.message__content small {
    font-size: 14px;
    opacity: .5;
}

.message__send-emoji {
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transition: all .3s ease;
    position: absolute;
    padding: 5px;
    top: 0px;
    right: 10px;
    border-radius: 20px;
    background: var(--main-darken-10);
    color: var(--bg);
    gap: 5px;
    font-size: 16px;
}

.message__send-emoji > span {
    cursor: pointer;
    transition: all .3s ease;
}

.message__send-emoji > span:hover {
    transform: scale(1.2);
}

.message__emoji {
    display: flex;
    gap: 5px;
    position: absolute;
    padding: 5px;
    font-size: 14px;
    left: 10px;
    bottom: -10px;
    background: var(--main-darken-10);
    border-radius: 10px;
}

.message__emoji span {
    cursor: pointer;
    transition: all .3s ease;
}

.message__emoji span:hover {
    transform: scale(1.2);
}

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
    color: var(--text-lighten-50);
}

.footer__container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 14px;
}

.footer__text > h4 {
    font-weight: 600;
}

.footer__text > span {
    font-size: 12px;
}

.none-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
}

.none-message span:first-child {
    font-size: 32px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .none-message span:first-child {
        font-size: 18px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .none-message span:first-child {
        font-size: 18px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .none-message span:first-child {
        font-size: 18px;
    }
}

.none-message span:last-child {
    font-size: 14px;
    opacity: .5;
}

@media (max-width: 480px) {
    .none-message span:last-child {
        font-size: 8px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .none-message span:last-child {
        font-size: 8px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .none-message span:last-child {
        font-size: 8px;
    }
}

.none-message h5 {
    font-size: 18px;
    font-weight: 500;
    opacity: .5;
}

@media (max-width: 480px) {
    .none-message h5 {
        font-size: 14px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .none-message h5 {
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .none-message h5 {
        font-size: 14px;
    }
}

.is-writing {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(50px);
    font-size: 14px;
    background: var(--main);
    color: var(--bg);
    padding: 5px 10px;
    border-radius: 25px;
    transition: all .3s ease;
    opacity: 0;
}

@media (max-width: 480px) {
    .is-writing {
        font-size: 12px;
        bottom: 79px;
        transform: translateX(-50%) translateY(30px);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .is-writing {
        font-size: 12px;
        bottom: 79px;
        transform: translateX(-50%) translateY(30px);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .is-writing {
        font-size: 12px;
        bottom: 79px;
        transform: translateX(-50%) translateY(30px);
    }
}

.is-writing.active {
    transform: translateX(-50%) translateY(0px);
    opacity: 1;
}






/* Nefes alıp verme animasyonları */
@keyframes redBreathing {
  0% {
    color: red;
    opacity: 1;
  }
  50% {
    color: #ff4d4d;
    opacity: 0.7;
  }
  100% {
    color: red;
    opacity: 1;
  }
}

@keyframes brownBreathing {
  0% {
    color: brown;
    opacity: 1;
  }
  50% {
    color: #d2691e;  /* Daha soluk kahverengi */
    opacity: 0.7;
  }
  100% {
    color: brown;
    opacity: 1;
  }
}

@keyframes blueBreathing {
  0% {
    color: blue;
    opacity: 1;
  }
  50% {
    color: #3399ff; /* Daha soluk mavi */
    opacity: 0.7;
  }
  100% {
    color: blue;
    opacity: 1;
  }
}

@keyframes purpleBreathing {
  0% {
    color: purple;
    opacity: 1;
  }
  50% {
    color: #800080; /* Daha soluk mor */
    opacity: 0.7;
  }
  100% {
    color: purple;
    opacity: 1;
  }
}

@keyframes orangeBreathing {
  0% {
    color: orange;
    opacity: 1;
  }
  50% {
    color: #ff7f00; /* Daha soluk turuncu */
    opacity: 0.7;
  }
  100% {
    color: orange;
    opacity: 1;
  }
}

/* Alevli prefix ve nickname animasyonları */
.alevli-prefix-red {
  animation: redBreathing 2s infinite alternate;
}

.alevli-prefix-brown {
  animation: brownBreathing 2s infinite alternate;
}

.alevli-prefix-blue {
  animation: blueBreathing 2s infinite alternate;
}

.alevli-prefix-purple {
  animation: purpleBreathing 2s infinite alternate;
}

.alevli-prefix-orange {
  animation: orangeBreathing 2s infinite alternate;
}

.alevli-nickname-red {
  animation: redBreathing 3s infinite alternate;
}

.alevli-nickname-brown {
  animation: brownBreathing 3s infinite alternate;
}

.alevli-nickname-blue {
  animation: blueBreathing 3s infinite alternate;
}

.alevli-nickname-purple {
  animation: purpleBreathing 3s infinite alternate;
}

.alevli-nickname-orange {
  animation: orangeBreathing 3s infinite alternate;
}




/* Renkli prefixler */
.alevli-prefix-red { color: red; }
.alevli-prefix-brown { color: brown; }
.alevli-prefix-blue { color: blue; }
.alevli-prefix-purple { color: purple; }
.alevli-prefix-orange { color: orange; }

/* Nickname renkleri */
.alevli-nickname-red { color: red; }
.alevli-nickname-brown { color: brown; }
.alevli-nickname-blue { color: blue; }
.alevli-nickname-purple { color: purple; }
.alevli-nickname-orange { color: orange; }

/* Prefix veya renk yoksa, siyah renk */
.alevli-nickname-black { color: black; }

/* Emoji için temel stil */
.emoji {
  display: inline-block;
  font-size: 25px;  /* Emoji boyutunu ayarlayabilirsiniz */
  animation: rotate 2s linear infinite;  /* Sürekli dönen animasyon */
}

/* Sağa sola dönme animasyonu */
@keyframes rotate {
  0% {
    transform: rotate(0deg);  /* Başlangıç pozisyonu */
  }
  50% {
    transform: rotate(1deg); /* Sağ yöne dönüş */
  }
  100% {
    transform: rotate(348deg); /* Sol yöne dönüş */
  }
}


/* Fa-bell ikonunu sağa sola sallamak için animasyon */
.fa-bell {
  display: inline-block;
  animation: bellShake 1s ease-in-out infinite; /* Zil sallama animasyonu */
}

/* Zil gibi sağa sola sallanma */
@keyframes bellShake {
  0% {
    transform: rotate(0deg);  /* Başlangıç pozisyonu */
  }
  25% {
    transform: rotate(10deg); /* Sağa doğru dönüş */
  }
  50% {
    transform: rotate(0deg);  /* Orijinal pozisyona dönme */
  }
  75% {
    transform: rotate(-10deg); /* Sola doğru dönüş */
  }
  100% {
    transform: rotate(0deg);  /* Başlangıç pozisyonuna geri dönme */
  }
}

/* Fa-bullhorn ikonunu sağa sola sallamak için animasyon */
.fa-bullhorn {
  display: inline-block;
  animation: bullhornShake 1s ease-in-out infinite; /* Bullhorn sallama animasyonu */
}

/* Zil gibi sağa sola sallanma */
@keyframes bullhornShake {
  0% {
    transform: rotate(0deg);  /* Başlangıç pozisyonu */
  }
  25% {
    transform: rotate(10deg); /* Sağa doğru dönüş */
  }
  50% {
    transform: rotate(0deg);  /* Orijinal pozisyona dönme */
  }
  75% {
    transform: rotate(-10deg); /* Sola doğru dönüş */
  }
  100% {
    transform: rotate(0deg);  /* Başlangıç pozisyonuna geri dönme */
  }
}

.message--system-giris .mode__text-container {
    background-color: #191970;
	color: white;
}



.font-size-dropdown {
    display: none;
    position: absolute;
    bottom: 203%;
    left: 241px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 5px;
    list-style: none;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(10px);
    opacity: 0;
    z-index: 1000; /* Menü diğer elementlerin altında kalmaması için */
}

.font-size-dropdown.active {
    display: block;
    transform: translateY(0);
    opacity: 1;
}

/* Dropdown içindeki yazılar */
.font-size-dropdown li {
    cursor: pointer;
    padding: 10px;
    transition: background 0.2s;
    text-align: center; /* Mobilde düzgün hizalama */
    font-size: 16px; /* Mobilde okunaklı olması için */
}

.font-size-dropdown li:hover {
    background: #f0f0f0;
}

/* Buton içindeki dropdown oku */
.yazi_buyut {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Rakam ve ikon arasında boşluk */
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: white;
}

/* Aşağı ok ikonu */
.yazi_buyut i {
    font-size: 12px;
}

/* 📱 Mobil ekranlar için özel stiller */
@media screen and (max-width: 768px) {
    .font-size-dropdown {
        position: fixed;
        bottom: auto;
        top: 8%;
        left: 25%;
        transform: translate(-50%, -50%);
        width: 86%; /* Daha geniş görünüm */
        max-width: 86px;
        padding: 10px;
        border-radius: 8px;
    }

    .font-size-dropdown li {
        font-size: 18px; /* Mobilde daha büyük yazı */
        padding: 15px;
    }
}

:root {
    --header-bg: white; /* ✅ Varsayılan değer */
	--users-bg: white; /* ✅ Varsayılan değer */
	--kanallar-bg: white; /* ✅ Varsayılan değer */
	--eklenti-bg: #452bd9;
	--chat-bg: #b3b3b3;
	--chat-yazi: #b3b3b3;
	--chat-form: #000000;
	--header-renk: #b3b3b3;
    --header-nick: #b3b3b3;
    --userlist-renk: #b3b3b3;
	--ozeller-kanallar: #ffffff;
	--header-logo: #ffffff;
	--etiket-buton: #006400;
	--buton-yolla: #006400;
	--buton-login: #006400
}