@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;

    -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 {
        height: 34px;
        font-size: 22px;
        margin-left: 68px;
    }
}

@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: #11caff;
}

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

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

#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: 2px;
    color: #ffffff;
    width: 100%;
    border-radius: 5px;
}

#context-menu ul a:hover {
    background: #ffffff;
    color: black;
}

.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 10s 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);
	margin-left: 20px;
	font-size: 17px;
}

.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 15px;
    position: relative;
    height: 55px;
	white-space: nowrap;
}

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

@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: #ff0808;
    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: #ffffff;
}

.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 0px;
    border-right: 1px solid var(--bg-darken-10);
}

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

    }
}

@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 {

  display: block !important;
  overflow: visible !important;
}

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

    }
}

@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 {
  
  background: var(--kanallar-bg, #f5f5f5);
  border-top: 1px solid #ddd;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
    .chat__items-container {
        padding: 1px;
		gap: 1px;
		margin-left: 3px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chat__items-container {
        padding: 0px 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: 110px;
        height: calc(100vh - 116px);   /* Eski telefonlar + eski tarayıcılar */
        height: calc(100dvh - 116px);  /* Yeni telefonlar + modern tarayıcılar */
        overflow-y: auto;              /* İçerik taşarsa kaydırma */
        -webkit-overflow-scrolling: touch; /* iPhone akıcı kaydırma */
    }
}

@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: 5px;
	margin-top: -23px;
}

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

@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-color: var(--header-bg);
    color: var(--text-lighten-100);
    cursor: pointer;
    transition: all .3s ease;
    font-size: 14px;
}

@media (max-width: 480px) {
    .chat__screen-close {
        top: 400px;
		writing-mode: vertical-rl;
    }
}

@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;
		width: 394px;
		bottom: 0;
		left: 0;
		z-index: 9999;
    }
}

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

@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: 87%;
}

.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: 35px;
        padding: 0px 3px;
        margin-left: -7px;
        font-size: 12px;
        padding: 0 10px;
		width: 62%;
    }
}

@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;
        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;
        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: 73px;
    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 {

    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: inline-flex; /* içeriğe göre şekillensin */
  align-items: center;
  background-color: #fff;
  border: 2px solid #dfdedf;

  padding: 4px 10px; /* sadece az bir iç boşluk */
  cursor: pointer;
  white-space: nowrap; /* taşma olmasın */
  transition: 0.2s ease;
}

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

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

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

.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: 0px 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 {
    color: var(--main-darken-20);
}

.chat-item.active > a {
    color: #fff;
}

.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: #a91010;
    color: var(--bg);
    border-radius: 50%;
    position: relative;
    top: 7px;
	left: 1px;
    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;
	color: black;
}

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

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

@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: #e15656;
    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: 0px;
	margin-left: -11px;
}

.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: block;
    }
}

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

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

.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: 18px;
        height: 18px;
        font-size: 12px;
		margin-left: -6px;
    }
}

@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: white;
	background-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: 27px;  /* Emoji boyutunu ayarlayabilirsiniz */
  margin-left: -130px;
  margin-top: -2px;
  border: 1px solid #ffffff;
  border-radius: 15px;
}


@media(max-width: 480px) {
.emoji {
  display: inline-block;
  font-size: 25px;  /* Emoji boyutunu ayarlayabilirsiniz */
  margin-left: -126px;
  border: 1px solid #ffffff;
  border-radius: 15px;
}
}

/* 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;
}



/* 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;
    }
}


.badge-at {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007bff; /* mavi arka plan */
  color: #fff; /* beyaz işaret */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

/* 💡 Mobil cihazlar için daha küçük boyut */
@media (max-width: 480px) {
  .badge-at {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
  .user-item__text h5 {
    font-size: 13px;
  }
  .user-item__text span {
    font-size: 11px;
  }
}

/* ----- GENEL ROZET STİLİ ----- */
.badge-super {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: brown; /* morumsu-kırmızı ton (Bootstrap “pink”) */
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

/* ----- MOBİL (480px altı) ----- */
@media (max-width: 480px) {
  .badge-super {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .user-item__text h5 {
    font-size: 13px;
  }
  .user-item__text span {
    font-size: 11px;
  }
}


/* ----- GENEL ROZET STİLİ ----- */
.badge-hop {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: green; /* morumsu-kırmızı ton (Bootstrap “pink”) */
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

/* ----- MOBİL (480px altı) ----- */
@media (max-width: 480px) {
  .badge-hop {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .user-item__text h5 {
    font-size: 13px;
  }
  .user-item__text span {
    font-size: 11px;
  }
}

/* ----- GENEL ROZET STİLİ ----- */
.badge-vop {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: orange; /* morumsu-kırmızı ton (Bootstrap “pink”) */
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

/* ----- MOBİL (480px altı) ----- */
@media (max-width: 480px) {
  .badge-vop {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .user-item__text h5 {
    font-size: 13px;
  }
  .user-item__text span {
    font-size: 11px;
  }
}

/* ----- GENEL ROZET STİLİ ----- */
.badge-ow {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red; /* morumsu-kırmızı ton (Bootstrap “pink”) */
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

/* ----- MOBİL (480px altı) ----- */
@media (max-width: 480px) {
  .badge-ow {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .user-item__text h5 {
    font-size: 13px;
	margin-left: -6px;
	white-space: nowrap;
	font-weight: bold;
  }
  .user-item__text span {
    font-size: 9px;
	margin-left: -6px;
  }  
}




: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;
}



/* ================================================
   2) Özel Mesaj / Kullanıcılar ALT ALTA SIRALAMA
   chat-title--items başlığını takip eden container
   ================================================ */
.chat-title--items + .chat__items-container {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}


/* ================================================
   3) "Henüz kimseye özel mesaj yazmadınız" alanı
   özel mesaj konteynerinde ortalı görünmesi için
   ================================================ */
.chat-title--items + .chat__items-container .none-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    opacity: 0.8;
}


.chat__screen-close {
    display: grid;
    grid-template-columns: auto 1fr;   /* ikon solda, yazı sağda */
    align-items: center;
    gap: 5px;
    padding: 10px 8px;

    writing-mode: vertical-rl; /* yazı dikey */
    text-orientation: mixed;
}

.chat__screen-close .icon {
    transform: rotate(90deg); /* ikon yan dönüyor */
    display: flex;
    justify-content: center;
}

.chat__screen-close .text {
    display: block;
}








.button--yolla {
    background-color: #007bff; /* Mavi */
    color: #fff;               /* Beyaz yazı */
    display: inline-flex;
	margin-left: -69px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.button--yolla:hover {
    background-color: #0066d6; /* Hover mavi koyu */
}

@media (max-width: 480px) {
    .button--yolla {
        /* width: 25px; */
        height: 25px;
        font-size: 13px;

    }
}

/* ACTIVE OLUNCA yazılar BEYAZ */
.chat-item.active .chat-item__text,
.chat-item.active .chat-item__text h5,
.chat-item.active .chat-item__text span {
    color: #fff;
	font-size: 12px;
}

/* ACTIVE OLUNCA link rengi BEYAZ */
.chat-item.active > a {
    color: #fff;
}

.chat-item.active {
    background-color: var(--header-bg);
    border-color: #000;
}



































/* Kanallar linkine sağdan ok için yer aç */
#menu-rooms {
  position: relative;
  padding-right: 30px;
}

/* Ok ikonu */
.rooms-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 14px;
  opacity: .8;
}

.rooms-toggle:hover {
  opacity: 1;
}

/* Kanallar gizliyken ok yukarı dönsün */
.rooms-hidden .rooms-toggle i {
  transform: rotate(180deg);
  transition: transform .2s ease;
}

/* Kanallar tamamen gizlensin */
.chat__items-container.hide-rooms {
  display: none !important;
}































/* Panel genişliği her ekranda uyumlu */
.emoji-editor{ width:100%; }

.emoji-panel{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  width:min(520px, 96vw);
  max-width:96vw;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Üst bar kaydırılabilir */
.emoji-topbar{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #e9e9e9;
  align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.emoji-topbar::-webkit-scrollbar{ height:0; }

.emoji-body{ padding:10px 12px; }
.emoji-section{ margin-bottom:14px; }

.emoji-section-title{
  font-size:14px;
  font-weight:600;
  margin:8px 0 10px;
  color:#333;
}

/* Grid otomatik kolon */
.emoji-body{ padding:10px 12px; }

/* grid taşma önlemi */
.emoji-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap:7px;
  max-height: min(50vh, 360px);
  overflow-y:auto;
  overflow-x:hidden;              /* ✅ yatay taşmayı kes */
  -webkit-overflow-scrolling:touch;
  padding: 0 2px 6px;             /* ✅ 1-2px güvenlik payı */
  box-sizing:border-box;          /* ✅ hesaplamaya dahil */
}

/* ✅ TEK emoji ölçüsü (default = desktop) */
.emoji-img{
  width: 32px;
  height: 32px;
  cursor:pointer;
  justify-self:center;
  vertical-align:middle;
}

/* Tablet ve altı */
@media (max-width: 768px){
  .emoji-img{ width: 28px; height: 28px; }
}

/* Telefon */
@media (max-width: 480px){
  .emoji-panel{ width:96vw; }
  .emoji-grid{ max-height: 45vh; }
  .emoji-img{ width: 26px; height: 26px; }
}

/* Küçük telefon */
@media (max-width: 360px){
  .emoji-panel{ width:98vw; border-radius:8px; }
  .emoji-grid{
    gap:8px;
    grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
    max-height: 42vh;
  }
  .emoji-img{ width: 24px; height: 24px; }
}







.login__avatar-box {
  margin-bottom: 18px;
}

.login__avatar-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.avatar-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.avatar-option {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.2s ease;
}

.avatar-option:hover {
  transform: scale(1.06);
  border-color: #4f8cff;
}

.avatar-option.selected {
  border-color: #00c853;
  box-shadow: 0 0 0 3px rgba(0,200,83,.18);
}

.selected-avatar-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.selected-avatar-preview img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-item__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-left: -19px;
}




































.login__avatar-box {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(122, 92, 255, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(247,244,255,0.96) 100%);
  box-shadow: 0 10px 30px rgba(87, 63, 187, 0.08);
}

.login__avatar-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #6b6b6b;
}

/* DESKTOP 5'LI DIZILIM */
.avatar-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-height: 170px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px 4px 2px;
  margin-bottom: 14px;
  align-items: start;
}

/* MOBIL 4'LU DIZILIM */
@media (max-width: 768px) {
  .avatar-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-height: 185px;
  }
}

.avatar-list::-webkit-scrollbar {
  width: 8px;
}

.avatar-list::-webkit-scrollbar-track {
  background: rgba(122, 92, 255, 0.08);
  border-radius: 999px;
}

.avatar-list::-webkit-scrollbar-thumb {
  background: rgba(122, 92, 255, 0.35);
  border-radius: 999px;
}

.avatar-list::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 92, 255, 0.55);
}

/* Her avatar kutusu hucreyi tam doldurur ve ortalar */
.avatar-option {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  border: 2px solid transparent;
  background: #fff;
  display: block;
  box-sizing: border-box;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.avatar-option:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: #7a5cff;
  box-shadow: 0 10px 22px rgba(122, 92, 255, 0.18);
}

.avatar-option.selected {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.16), 0 10px 22px rgba(34,197,94,0.16);
}

/* Secilen avatar alani */
.selected-avatar-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(122, 92, 255, 0.10);
}

.selected-avatar-preview span {
  font-size: 13px;
  font-weight: 700;
  color: #747474;
}

.selected-avatar-preview img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 2px solid rgba(122, 92, 255, 0.16);
  box-shadow: 0 6px 16px rgba(122, 92, 255, 0.16);
}

/* Parent kesmesin */
.login__container,
.login__form,
.login__avatar-box {
  overflow: visible;
}


























/* LOGIN MOBIL DÜZELTME */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;

}

body {
    overflow-y: auto;
}

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px 14px 28px 14px;
}

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

.login__container {
    width: 100%;
}

.login__footer {
    width: 100%;
    text-align: center;
    margin-top: 14px;
    padding: 0 10px;
}

.login__footer span {
    display: block;
    line-height: 1.4;
    word-break: break-word;
}

@media (max-width: 480px) {
    .login-body {
        align-items: flex-start;
        padding: 18px 12px 24px 12px;
    }

    .login {
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
    }



    .login__form h1 {
        font-size: 22px;
    }

    .login__footer {
        margin-top: 12px;
        padding: 0 6px;
    }

    .login__footer span:first-child {
        font-size: 14px;
    }

    .login__footer span:last-child {
        font-size: 11px;
    }
}


/* === MESAJ BALONLARI === */

.msg-bubble-wrap {
  display: flex;
  align-items: flex-start;
  margin: 5px 8px;
}

.msg-bubble-wrap--me {
  justify-content: flex-end;
}

.msg-bubble {
  max-width: 75%;
  min-width: 80px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
  border-radius: 4px 18px 18px 18px;
  padding: 6px 12px 8px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  word-break: break-word;
}

.msg-bubble--me {
  background: linear-gradient(135deg, #452bd9 0%, #6c4ee0 100%);
  border-radius: 18px 4px 18px 18px;
}

.msg-bubble--action {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
  border-left: 3px solid #ffa000;
}

.msg-bubble--me.msg-bubble--action {
  background: linear-gradient(135deg, #5c3ee8 0%, #7c5ce4 100%);
  border-left: 3px solid #ffe082;
}

/* Header: saat + avatar + nick — hepsi tek satırda */
.msg-bubble__header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  flex-wrap: nowrap;
  min-height: 32px; /* avatar yüksekliği kadar sabit */
}

.msg-bubble__header--me {
  justify-content: flex-end;
}

.msg-bubble__time {
  font-size: 10px;
  color: #aaa;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.msg-bubble--me .msg-bubble__time {
  color: rgba(255,255,255,0.60);
}

/* Avatar — sabit boyut, kayma olmaz */
.msg-bubble__avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;   /* flex içinde küçülmesin */
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  flex-shrink: 0;
  background-color: #dde3f0;
  display: block;
}

.msg-bubble__nick {
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  line-height: 1;
}

.msg-bubble__nick:hover {
  text-decoration: underline;
}

.msg-prefix {
  font-size: 13px;
  margin-right: 1px;
  line-height: 1;
}

/* Mesaj metni — avatar (28) + gap (5) + border(2*2) = 37px içeriden */
.msg-bubble__text {
  font-size: var(--message-font-size, 14px);
  line-height: 1.5;
  color: #222;
  padding-left: 33px;  /* avatar 28px + gap 5px */
  margin-top: 0;
}

.msg-bubble--me .msg-bubble__text {
  color: #ffffff;
}

/* Kendi mesajımızda metin sağdan hizalı — sağda avatar var */
.msg-bubble__text--me {
  font-size: var(--message-font-size, 14px);
  line-height: 1.5;
  color: #ffffff;
  padding-left: 0;
  padding-right: 33px; /* avatar 28px + gap 5px */
  margin-top: 0;
}




/* Buton: sadece masaüstünde görünsün */
.mause-degis {
  display: none;
}
@media (min-width: 1024px) {
  .mause-degis { display: inline-flex; }
}

/* Dropdown - font-size-dropdown ile aynı görünüm mantığı */
.mause-dropdown {
  display: none;
  position: absolute;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  z-index: 9999;
  min-width: 170px;
  overflow: hidden;
}
.mause-dropdown.active { display: block; }
.mause-dropdown ul { list-style: none; margin: 0; padding: 6px 0; }
.mause-dropdown li {
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.mause-dropdown li:hover { background: #f0f0f0; }
.mause-dropdown li.selected { font-weight: bold; color: var(--header-bg, #452bd9); }

/* Uygulanan imleç sınıfları */
body.cursor-default    { cursor: default; }
body.cursor-pointer    * { cursor: pointer !important; }
body.cursor-crosshair  * { cursor: crosshair !important; }
body.cursor-grab       * { cursor: grab !important; }
body.cursor-help       * { cursor: help !important; }





.mause-degis {
  display: none;
}
@media (min-width: 1024px) {
  .mause-degis { display: inline-flex; }
}


/* Varsayılan (ok) - hafif büyütülmüş */
body.cursor-default {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z" fill="black" stroke="white" stroke-width="1.5"/></svg>') 3 2, default;
}

/* El (pointer) - hafif büyütülmüş */
body.cursor-pointer * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M9 2a1.5 1.5 0 0 1 1.5 1.5V11h.5V4.5a1.5 1.5 0 0 1 3 0V11h.5V6a1.5 1.5 0 0 1 3 0v9c0 3.3-2.7 6-6 6H10c-2 0-3.2-.8-4.2-2.3l-3-4.4a1.4 1.4 0 0 1 2.2-1.7L7 15V3.5A1.5 1.5 0 0 1 9 2Z" fill="black" stroke="white" stroke-width="1"/></svg>') 10 2, pointer !important;
}

/* Nişangah (crosshair) - hafif büyütülmüş */
body.cursor-crosshair * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g stroke="black" stroke-width="1.5" fill="none"><circle cx="12" cy="12" r="8"/><line x1="12" y1="0" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="24"/><line x1="0" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="24" y2="12"/></g></svg>') 16 16, crosshair !important;
}

/* Tutma (grab) - hafif büyütülmüş */
body.cursor-grab * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M6 11V6a1.5 1.5 0 0 1 3 0v4M9 10V4.5a1.5 1.5 0 0 1 3 0V10m0 0V5.5a1.5 1.5 0 0 1 3 0V11m0-3.5a1.5 1.5 0 0 1 3 0V15c0 3.3-2.7 6-6 6H9c-2 0-3-1-4-2.3l-2-3a1.3 1.3 0 0 1 2-1.7l1 1" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') 13 11, grab !important;
}

/* Yardım (help) - hafif büyütülmüş */
body.cursor-help * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z" fill="black" stroke="white" stroke-width="1.5"/><circle cx="18" cy="6" r="6" fill="white" stroke="black" stroke-width="1"/><text x="18" y="9" font-size="9" text-anchor="middle" fill="black">?</text></svg>') 3 2, help !important;
}


/* Kırmızı ok */
body.cursor-red {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z" fill="%23ff3b30" stroke="white" stroke-width="1.5"/></svg>') 3 2, default;
}

/* Mavi ok */
body.cursor-blue {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z" fill="%23007aff" stroke="white" stroke-width="1.5"/></svg>') 3 2, default;
}

/* Yeşil ok */
body.cursor-green {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z" fill="%2334c759" stroke="white" stroke-width="1.5"/></svg>') 3 2, default;
}

/* Mor ok */
body.cursor-purple {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z" fill="%23af52de" stroke="white" stroke-width="1.5"/></svg>') 3 2, default;
}

/* Turuncu ok */
body.cursor-orange {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z" fill="%23ff9500" stroke="white" stroke-width="1.5"/></svg>') 3 2, default;
}

/* Gökkuşağı (gradyan) ok */
body.cursor-rainbow {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><defs><linearGradient id="g" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" stop-color="%23ff3b30"/><stop offset="50%25" stop-color="%23ffcc00"/><stop offset="100%25" stop-color="%23007aff"/></linearGradient></defs><path d="M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z" fill="url(%23g)" stroke="white" stroke-width="1.5"/></svg>') 3 2, default;
}





.text-editor__colors-main i{
    font-size:18px;

    background:linear-gradient(
        90deg,
        #ff0000,
        #ff8000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0066ff,
        #8a2be2,
        #ff0080,
        #ff0000
    );

    background-size:300% 300%;
    animation:rainbow 4s linear infinite;

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

@keyframes rainbow{
    0%{background-position:0%;}
    100%{background-position:300%;}
}














.eglence-listesi {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px;
    -webkit-overflow-scrolling: touch;
}

.eglence-listesi p {
    margin: 6px 0;
    padding: 8px 10px;
    background: #f8f8f8;
    border-left: 4px solid #2196F3;
    border-radius: 6px;
    line-height: 1.5;
    font-size: 14px;
}

.eglence-listesi::-webkit-scrollbar {
    width: 6px;
}

.eglence-listesi::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 10px;
}


  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

  /* ── ARKAPLAN ── */
  .login-body {
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #0d0d1a;
    background-image:
      radial-gradient(ellipse 70% 50% at 20% 20%, rgba(80, 40, 180, 0.35) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 80%, rgba(220, 60, 80, 0.25) 0%, transparent 60%);
    position: relative;
    overflow: hidden;
  }

  /* Dekoratif arka nokta deseni */
  .login-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }

  .login-body.gizle { display: none !important; }

  /* ── KART ── */
  .login {
    width: 100%;
    max-width: 380px;
    position: relative;
    z-index: 1;
  }

  .login__container {
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.08);
    padding: 20px 18px 18px;
    color: #fff;
  }

  /* ── BAŞLIK ── */
  .login__form h1 {
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 40%, rgba(255,255,255,0.55));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── AVATAR KUTUSU ── */
  .login__avatar-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 8px 10px;
  }

  .login__avatar-title { display: none; }

  /* Yatay kayan avatar listesi */
  .avatar-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    padding: 2px 0;
    scrollbar-width: none;
  }
  .avatar-list::-webkit-scrollbar { display: none; }

  .avatar-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
  }
  .avatar-option:hover {
    border-color: rgba(255,140,0,0.7);
    transform: scale(1.12);
  }
  .avatar-option.selected {
    border-color: #ff8c00;
    box-shadow: 0 0 0 3px rgba(255,140,0,0.25);
  }

  /* Seçilen avatar önizlemesi */
  .selected-avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }
  .selected-avatar-preview span {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .selected-avatar-preview img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #ff8c00;
    object-fit: cover;
    box-shadow: 0 0 12px rgba(255,140,0,0.4);
  }

  /* ── FORM ALANLARI ── */
  .login__form-item { margin-bottom: 10px; }

  .login__form-item label {
    display: block;
    font-size: 0.72rem;
    margin-bottom: 4px;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .login__form-item input {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 11px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  }
  .login__form-item input:focus {
    border-color: rgba(255,140,0,0.6);
    background: rgba(255,255,255,0.10);
    box-shadow: 0 0 0 3px rgba(255,140,0,0.12);
  }
  .login__form-item input::placeholder { color: rgba(255,255,255,0.25); }

  /* ── HATA ── */
  #loginhata {
    display: block;
    color: #ff6b6b;
    font-size: 0.75rem;
    margin-bottom: 8px;
    text-align: center;
  }

  /* ── GÖNDER BUTONU ── */
  .button--login {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, #ff8c00 0%, #e8303c 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    margin-top: 4px;
    box-shadow: 0 6px 20px rgba(230, 48, 60, 0.38);
    letter-spacing: 0.01em;
  }
  .button--login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(230, 48, 60, 0.55);
    filter: brightness(1.07);
  }
  .button--login:active { transform: translateY(0); }

  /* ── FOOTER ── */
  .login__footer {
    margin-top: 10px;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    letter-spacing: 0.04em;
  }
  .login__footer strong { color: rgba(255,255,255,0.5); font-weight: 700; }

  /* ── MOBİL ── */
  @media (max-width: 400px) {
    .login__container { padding: 16px 14px 14px; border-radius: 16px; }
    .avatar-option { width: 32px; height: 32px; }
    .selected-avatar-preview img { width: 34px; height: 34px; }
    .button--login { font-size: 0.88rem; padding: 11px; }
  }

  /* Çok kısa ekranlar (landscape mobil) */
  @media (max-height: 600px) {
    .login-body { align-items: flex-start; padding: 10px; }
    .login__container { padding: 14px 14px 12px; }
    .login__form h1 { margin-bottom: 10px; }
    .login__avatar-box { margin-bottom: 8px; padding: 6px 8px; }
    .login__form-item { margin-bottom: 8px; }
    .login__form-item input { padding: 8px 11px; }
  }
  
@media (max-width: 768px) {
    #pcopergirButton {
        display: none;
    }
    #pcnickkayitButton {
        display: none;
    }	
    #pcyeninickButton {
        display: none;
    }
    #pckanalagirButton {
        display: none;
    }
    #pcaboutButton {
        display: none;
    }		
}  

@media (min-width: 769px) {
    #aboutButton {
        display: none;
    }
}

@media (max-width: 768px) {
    .pcaktif {
        display: none !important;
    }
}



.eklenti-toggle{
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;


    color:#fff;

    border-radius:8px 8px 0 0;
    transition:.2s;
}

.eklenti-toggle:hover{
    background:#5a35e5;
}

.eklenti-toggle i{
    font-size:20px;
    transition:transform .25s ease;
}





@media (max-width:480px){

.chat__users{
    height:calc(100dvh - 116px);
    transition:height .25s ease;
}

.chat.eklenti-kapali .chat__users{
    height:calc(100dvh - 74px); /* Burayı kendi eklenti yüksekliğine göre ayarla */
}

}
}


#avatarGrid{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:12px;
    width:100%;
    padding:10px 0;
    box-sizing:border-box;
}

.avatar-item{
    flex:0 0 calc(20% - 10px); /* 5 tane */
    max-width:calc(20% - 10px);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    padding:8px;
    border-radius:10px;
    transition:.2s;
    box-sizing:border-box;
}

.avatar-item img{
    width:64px;
    height:64px;
    border-radius:10px;
    display:block;
}

.avatar-item:hover{
    background:#2d2d2d;
    transform:scale(1.08);
}

/* Tablet */
@media(max-width:900px){
    .avatar-item{
        flex:0 0 calc(25% - 10px);
        max-width:calc(25% - 10px);
    }
}

/* Mobil */
@media(max-width:600px){
    .avatar-item{
        flex:0 0 calc(33.333% - 10px);
        max-width:calc(33.333% - 10px);
    }

    .avatar-item img{
        width:56px;
        height:56px;
    }
}


#avatarGrid{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    align-items:flex-start;
}

#avatarGrid .avatar-item{
    width:64px !important;
    height:64px !important;
    display:flex !important;
    justify-content:center;
    align-items:center;
    flex:none !important;
    padding:0 !important;
    margin:0 !important;
}

#avatarGrid .avatar-grid-img{
    width:64px !important;
    height:64px !important;
    display:block;
    border-radius:8px;
}


#playIcon {
    display: inline-block;
    color: #fff;
    animation: speakerWave 1s ease-in-out infinite;
    transform-origin: left center;
}

@keyframes speakerWave {
    0% {
        transform: scale(1) rotate(0deg);
    }
    20% {
        transform: scale(1.15) rotate(-8deg);
    }
    40% {
        transform: scale(1.25) rotate(6deg);
    }
    60% {
        transform: scale(1.15) rotate(-6deg);
    }
    80% {
        transform: scale(1.2) rotate(8deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

#avatarChangeButton i {
    display: inline-block;
    animation: avatarAttention 2.5s infinite;
}

@keyframes avatarAttention {
    0%,80%,100% {
        transform: scale(1) rotate(0);
    }
    85% {
        transform: scale(1.2) rotate(-8deg);
    }
    90% {
        transform: scale(1.2) rotate(8deg);
    }
    95% {
        transform: scale(1.15) rotate(-5deg);
    }
}


/* Masaüstünde gizle */
.mobile-only {
    display: none !important;
}

/* Mobilde göster */
@media only screen and (max-width: 768px) {
    .mobile-only {
        display: list-item !important;
    }
}

.user-search-box {
    position: relative;
    width: 100%;
    padding: 8px;
}

.user-search-box input {
    width: 106%;
    height: 40px;
    padding: 0 12px 0 38px;
    margin-top: -6px;
    margin-left: -7px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    font-size: 14px;
}

.user-search-box i {
    position: absolute;
    left: 21px;
    top: 57%;
    transform: translateY(-50%);
    color: #08022c;
    pointer-events: none;
    margin-top: -6px;
}

.user-search-notfound {
    text-align: center;
    font-size: .8rem;
    color: #999;
    padding: 8px 0;
}

/* Mobil */
@media (max-width: 768px) {
    .user-search-box input {
        width: 115%;
        padding-left: 22px;
        margin-left: -7px;
        margin-top: -7px;
        font-size: 13px;
    }

    .user-search-box i {
        top: 27px;
        left: 21px;
        margin-left: -14px;
    }
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 6px 4px;
  gap: 6px;
}
.profile-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ff8c00;
  box-shadow: 0 0 16px rgba(255,140,0,.35);
}
.profile-card__nick {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 4px 0 0;
}
.profile-card__badge {
  font-size: .82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.profile-card__badge .profile-dot { font-size: 1rem; line-height: 1; }
.profile-card__status-view {
  font-size: .82rem;
  color: #777;
  font-style: italic;
  max-width: 260px;
  word-break: break-word;
}
.profile-card__status-edit {
  width: 100%;
  max-width: 260px;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  text-align: left;
}
.profile-card__status-edit:not(.gizle) {
  display: flex;
}
.profile-card__status-edit.gizle {
  display: none !important;
}

#profileStatusSave.gizle {
  display: none !important;
}

.profile-card__status-edit label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #999;
  font-weight: 700;
}
.profile-card__status-edit select,
.profile-card__status-edit input {
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.15);
  font-size: .85rem;
  outline: none;
}

#profileStatusSave.gizle { display: none !important; }

.profile-card__divider {
  width: 100%;
  max-width: 260px;
  height: 1px;
  background: rgba(0,0,0,.1);
  margin: 6px 0;
}
.profile-card__friends {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.profile-card__friend-count { font-size: .85rem; color: #555; }
.profile-card__friend-toggle {
  font-size: .78rem;
  color: #ff8c00;
  font-weight: 700;
  text-decoration: none;
}
.profile-card__friend-toggle.gizle { display: none !important; }
.profile-card__friend-list {
  width: 100%;
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: .8rem;
  text-align: left;
}
.profile-card__friend-list.gizle { display: none !important; }
.profile-card__friend-list span {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  background: rgba(0,0,0,.05);
  border-radius: 10px;
}
.profile-card__friend-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.profile-card__friend-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
}
.profile-card__friend-btn--add { background: #ff8c00; }
.profile-card__friend-btn--pending { background: #95a5a6; cursor: default; }
.profile-card__friend-btn--accept { background: #2ecc71; }
.profile-card__friend-btn--decline,
.profile-card__friend-btn--remove { background: #e74c3c; }
.profile-card__friend-btn--like { background: #3498db; }


/* Arkadaş / Beğeni sayaçları yan yana */
.profile-card__counts-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.profile-card__counts-row .profile-card__friend-count {
  font-size: .85rem;
  color: #555;
  white-space: nowrap;
}
.profile-card__counts-row .profile-card__friend-count:not(:last-child) {
  position: relative;
  padding-right: 14px;
}
.profile-card__counts-row .profile-card__friend-count:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
}

/* Butonlar yan yana, mobil/PC aynı davranış */
.profile-card__friend-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 260px;
}
.profile-card__friend-btn {
  flex: 1 1 calc(50% - 8px);
  min-width: 110px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
}
.profile-card__friend-btn--add { background: #ff8c00; }
.profile-card__friend-btn--like { background: #3498db; }
.profile-card__friend-btn--pending { background: #95a5a6; cursor: default; }
.profile-card__friend-btn--accept { background: #2ecc71; }
.profile-card__friend-btn--decline,
.profile-card__friend-btn--remove { background: #e74c3c; }

@media (max-width: 360px) {
  .profile-card__friend-btn { font-size: .72rem; padding: 7px 8px; }
}

.user-item__text .user-item__status-dot,
span .user-item__status-dot,
.user-item__status-dot {
  font-size: 1.2rem !important;
  margin-right: 1px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}


@media (max-width: 768px) {
  .user-item__text .user-item__status-dot,
  span .user-item__status-dot,
  .user-item__status-dot {
    font-size: 1.2rem !important;
    margin-right: 1px !important;
    display: inline-block !important;
    vertical-align: top !important;
    line-height: 0.5 !important;
    margin-left: -2px !important;
  }
}

.profile-card__friend-toggles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.profile-card__friend-toggle {
    font-size: .78rem;
    color: #ff8c00;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}