/* Varsayılan tema
 * Logo + login/sohbet tam ekran arka plan → Ayarlar > Logo&Arkaplan paneli */

/* Genel Renk Ayarları */
a { color: red; }

/* Genel site ayarları — sohbet arka planı panelden (#external_wrap.bc_chat_bg) */
body {
        color: #fff;
        background: #000;
}

button {
        background: transparent;
        color: #fff;
}



/* Konuşma kutusu */
.background_chat:not(.bc_dj_chat_theme) {
        background: rgba(10, 24, 40, 0.5);
        box-shadow: 0 0 7px #e02121;
}

.background_chat.bc_dj_chat_theme {
        box-shadow: 0 0 7px #e02121;
}

.background_login {
        background: #08080c;
        box-shadow: 0 0 7px #e02121;
}

#wrap_chat {
        background: transparent !important;
}

#bc_chat_surface,
.bc_chat_surface {
        background: transparent !important;
        box-shadow: none;
        border: none;
}

#bc_chat_surface #warp_show_chat {
        background: rgba(0, 0, 0, 0.32) !important;
}

#bc_chat_surface #container_show_chat,
#bc_chat_surface #inside_wrap_chat,
#bc_chat_surface #show_chat.background_box,
#bc_chat_surface ul#show_chat {
        background: transparent !important;
        border: none !important;
        color: #f0f0f0;
}

#top_chat_container {
        background: transparent;
}

#container_input #content {
        display: block;
        width: 100% !important;
        min-height: 36px;
        box-sizing: border-box;
}

/* Input + picker — format satırı hafif şeffaf bant */
#bc_chat_surface #top_chat_container {
        background: transparent !important;
}

#bc_chat_surface #container_input,
#bc_chat_surface #main_emoticon,
#bc_chat_surface #main_emoticon .bar_options,
#bc_chat_surface .bc_format_bar {
        box-shadow: none;
        border-radius: 0;
}

#bc_chat_surface #main_emoticon.bc_format_bar,
#bc_chat_surface .bc_format_bar {
        background: rgba(0, 0, 0, 0.1) !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Emoticon + resim ikonu */
#emo_item,
#emo_item .fa,
#emo_item .fa-smile-o,
#send_image,
#send_image .fa,
#clear_chat,
#clear_chat .fa {
        color: #f0f0f0 !important;
        opacity: 1 !important;
}

/* Yazı kutusu */
#content.background_box,
#container_input #content {
        background: #141418 !important;
        color: #f0f0f0 !important;
}

#content.background_box:hover,
#container_input #content:hover,
#content.background_box:focus,
#container_input #content:focus {
        background: #0a0a0e !important;
        color: #f0f0f0 !important;
}

/* Oda başlığı — sohbet yüzeyinin parçası, ayrı bant yok */
#bc_chat_surface #wrap_topic,
#bc_chat_surface #wrap_topic #room_topic,
#bc_chat_surface #wrap_topic .topic {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        color: #f0f0f0;
}

.background_menu_footer {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
    border-top: 1px solid rgba(224, 33, 33, 0.9);
    mix-blend-mode: multiply;
} /* Menü altı koyu mavi arka plan ve üstte ince mavi kenarlık */
.panels {
        background-color: rgba(8, 6, 12, 0.94);
        background-image:
                linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.65)),
                url('/legacy/css/themes/Dark/images/nick-arka.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
}

/* Logo üst şeritte — panel yüklemesi yoksa Varsayilan/logo/logo.gif (app.css + branding.ts) */
#header,
#inner_header {
        background-color: transparent;
}

#chat_panel .clear_panel {
        background-color: rgba(8, 6, 12, 0.98);
        background-image:
                linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)),
                url('/legacy/css/themes/Dark/images/nick-arka.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
}
#chat_error { background:#111; } /* Sohbet bildirimi — genişlik app.css (sağ %30) */
/* #inner_header / #header_login logosu → Logo&Arkaplan paneli */
#menu_private { background:#000;} /* Özel menü siyah arka planlı */



/* Login ekranı */
#wrap_login {
        position: fixed; /* Sayfa kaydırılsa bile sabit kalır */
        left: 27%; /* Sol tarafa yapıştır */
        top: 50%; /* Sayfanın ortasına hizala */
        transform: translateY(-50%); /* Dikey ortalama için */
        width: 0px; /* Genişlik masaüstü için */
        background-color: rgba(56, 36, 89, 0.5); /* Arka plan rengi */
        padding: 0px; /* İçerik boşluğu */
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); /* Gölge efekti */
        border-radius: 8px; /* Köşeleri yuvarlama */
}

/* 1366x768 Çözünürlük için özel stil */
@media (min-width: 1366px) and (max-width: 1366px) and (min-height: 768px) and (max-height: 768px) {
        #wrap_login {
                top: 70%; /* Gitarın altındaki alanda daha doğru konum */
                left: 48%; /* Hafif sağa kaydırma */
                transform: translate(-50%, -50%);
                width: 350px; /* Hafif daha küçük boyut */
        }
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
        #wrap_login {
                left: 50%; /* Tam ortalamak için */
         top: 55%; /* Sayfanın ortasına hizala */
                transform: translate(-50%, -50%); /* Hem yatay hem dikey ortalama */
                width: 100%; /* Genişlik ekranın %90'ı */
                padding: 0px; /* Daha küçük içerik boşluğu */
        }
}

/* Sohbet kayıtları için geçiş renkleri */
.log1 { background:none; } /* Şeffaf arka plan */
.log2 { background:none; } /* Şeffaf arka plan */
.ch_logs { border-bottom:none;} /* Alt kenarlık yok */

/* Ayırıcı renkleri */
.user_separator { border-bottom:1px solid #e021021; } /* Kullanıcı ayırıcı yeşil */
.user_option_separator { border-bottom:2px solid #10011a; } /* Kullanıcı seçeneği ayırıcı mavi */
.top_separator { border-top:1px solid #e021021; } /* Üst ayırıcı mavi */
.right_separator { border-right:1px solid #e021021; } /* Sağ ayırıcı mavi */
.bottom_separator { border-bottom:1px solid #e021021; } /* Alt ayırıcı siyah */

/* Kullanıcı listesi açılır menü renkleri */
.user_option_list { background:#171c23; color:#fff; } /* Koyu mavi arka plan, beyaz yazı */

/* Buton ve öğe renkleri */
.sub_element { background:#d80000; color:#fff;} /* Alt öğe koyu yeşil arka plan ve beyaz yazı */
.empty_element { background:#01b928; color:#fff; } /* Boş öğe açık yeşil arka plan ve beyaz yazı */
.selected_element { background:#e021021; color:#fff; } /* Seçili öğe sarı arka plan ve beyaz yazı */
.hover_element {
    /* Diğer stil özellikleriniz */
    border: 1px solid transparent; /* Varsayılan olarak şeffaf bir kenarlık ekliyoruz */
}

.hover_element {
    /* Diğer stil özellikleriniz */
    border: 1px solid transparent; /* Varsayılan olarak şeffaf bir kenarlık ekliyoruz */
    transition: transform 0.3s ease; /* Büyüme efekti geçişi */
}

.hover_element:hover {
    color: #e021021;
    transform: scale(1);
}

#submit_button {
    color: #fff;
    border-radius: 8px;
}

#submit_button:hover {
    color: #fff;
}


/* Reklam alanı arka planı */
#show_chat_ads { background:#222 !important;} /* Reklam alanı için koyu gri arka plan */

/* Özel renkler ve alt renkler */
.error { color:red;} /* Hata mesajları kırmızı */
.success { color:green;} /* Başarı mesajları yeşil */
.away { color:#8a8a8a; } /* Uzakta olan kullanıcılar mavi */
.my_notice { background:#ff0707; padding:3px;} /* Bildirim sarı arka plan ve iç boşluk */
.sub_color2 { color:#e021021;} /* İkinci alt renk sarı */
.sub_color { color:#e021021;} /* Alt renk sarı */
.room_userin { color:#fff; } /* Oda içi kullanıcılar beyaz */
.hide_private_title { color:#ccc; } /* Gizli başlık açık gri */
.wrap_command:hover { background:#1d0034 !important; } /* Komut satırında hover durumu yeşil arka plan */
.tooltip:hover:before, .tooltip2:hover:before, .tooltip3:hover:before { border-color: #1d0034 transparent;} /* Tooltip kenarlıkları yeşil */
.tooltip:hover:after, .tooltip2:hover:after, .tooltip3:hover:after { background: none repeat scroll 0 0 #1d0034; color: #fff;} /* Tooltip arka planı yeşil, yazı beyaz */

/* Özel sohbet mesaj renkleri */
.target_private {color:#fff; background:#178582;} /* Hedef özel mesaj beyaz yazı, yeşil arka plan */
.hunter_private {color:#fff; background:#000;} /* Avcı özel mesaj beyaz yazı, turuncu arka plan */

/* Sohbet İçi Renkler */
.datechat {color:#ffffff;}
.me {color:#fff; background:#03add8;}
.global { color:#fff; background:#ff3b3b;}
.private { color:#fff; background:#1a9033;}
.private_reply { background:#39ba54; color:#fff;}
.seen { color:#fff; background:#7817a6;}
.delete_log, .logs_date {color:rgba(51, 51, 51, 0.1);}
.global, .me, .private, .seen {  margin-bottom:1px;}

/* Kullanıcı Renkleri ve Özel Kullanıcı Renkleri */
.system { color:#fff !important;}
.admin{ color:#ff0303;}
.sadmin { color:#939393; }
.modo  {color:#17bbff;}
.vip {color:#ffea03;}
.user {color:#ffffff;}
.guest {color:#e6ac2e;}
.kahverengi { color: #5b0f01; font-weight: bold; }
.kirmizi { color: #a71b00; font-weight: bold; }
.kirmizi1 { color: #cd4126; font-weight: bold; }
.pembe { color: #dd7e6c; font-weight: bold; }
.kirmizi2 { color: #990100; font-weight: bold; }
.bordo { color: #670001; font-weight: bold; }
.kirmizi3 { color: #d50006; font-weight: bold; }
.kirmizi4 { color: #e16668; font-weight: bold; }
.pembe1 { color: #e99a95; font-weight: bold; }
.kirmizi5 { color: #fe0000; font-weight: bold; }
.kahverengi1 { color: #7a3f05; font-weight: bold; }
.turuncu { color: #e6903b; font-weight: bold; }
.turuncu1 { color: #f6b26b; font-weight: bold; }
.seftali { color: #facb9d; font-weight: bold; }
.turuncu2 { color: #fe9903; font-weight: bold; }
.altin { color: #7c5f00; font-weight: bold; }
.sari { color: #f1bf38; font-weight: bold; }
.sari1 { color: #fdda66; font-weight: bold; }
.sari2 { color: #ffe69b; font-weight: bold; }
.sari3 { color: #ffff01; font-weight: bold; }
.yesil { color: #284e13; font-weight: bold; }
.yesil1 { color: #6aa950; font-weight: bold; }
.yesil2 { color: #95c47e; font-weight: bold; }
.nane { color: #b7d7a8; font-weight: bold; }
.neon { color: #00ff01; font-weight: bold; }
.camgobegi { color: #0d333e; font-weight: bold; }
.celik { color: #46808b; font-weight: bold; }
.mavi { color: #74a5b3; font-weight: bold; }
.mavi1 { color: #a3c4c9; font-weight: bold; }
.camgobegi1 { color: #00ffff; font-weight: bold; }
.lacivert { color: #083763; font-weight: bold; }
.mavi2 { color: #3e84c2; font-weight: bold; }
.mavi3 { color: #70a7dd; font-weight: bold; }
.bebek { color: #9fc5e9; font-weight: bold; }
.mavi4 { color: #0200f9; font-weight: bold; }
.civit { color: #20124d; font-weight: bold; }
.mor { color: #664ea4; font-weight: bold; }
.lavanta { color: #907cc1; font-weight: bold; }
.lavanta1 {
      font-weight: bold;
    font-family: 'Julius Sans One', sans-serif;
    background-image: linear-gradient(120deg, #c4b5fd, #a78bfa, #7c3aed, #e9d5ff);
    background-size: 200% 200%;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(10, 24, 40, 0.0);
    text-stroke: 1px rgba(10, 24, 40, 0.0);
}
.mor1 {
    font-weight: bold;
    font-family: 'Merienda', sans-serif;
    background-image: linear-gradient(120deg, #d8b4fe, #c026d3, #7e22ce, #f0abfc);
    background-size: 200% 200%;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(10, 24, 40, 0.0);
    text-stroke: 1px rgba(10, 24, 40, 0.0);
}
.mor2 {
    font-weight: bold;
    font-family: 'Grechen Fuemen', sans-serif;
    background-image: linear-gradient(120deg, #f0abfc, #e879f9, #a21caf, #fae8ff);
    background-size: 200% 200%;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(10, 24, 40, 0.3);
    text-stroke: 1px rgba(10, 24, 40, 0.3);
}
.fusya {
    font-weight: bold;
    font-family: 'Sigmar', sans-serif;
    background-image: linear-gradient(120deg, #fb7185, #f472b6, #db2777, #fecdd3);
    background-size: 200% 200%;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(10, 24, 40, 0.3);
    text-stroke: 1px rgba(10, 24, 40, 0.3);
}
.neon1 {
    color: #ff4d4d !important;
    text-shadow: 0 0 8px #ff0000, 0 0 16px #ff2222, 0 0 28px #ff6600, 0 0 40px #ffaa00;
    font-weight: bold;
}
.neon2 {
    color: #ffb020 !important;
    text-shadow: 0 0 8px #ff8800, 0 0 16px #ffaa00, 0 0 28px #ffcc44, 0 0 40px #ffe08a;
    font-weight: bold;
}
.neon3 {
    color: #ff5ecf !important;
    text-shadow: 0 0 8px #ff1493, 0 0 16px #ff69b4, 0 0 28px #ff85c8, 0 0 40px #ffb6e1;
    font-weight: bold;
}
.neon4 {
    color: #ff33ff !important;
    text-shadow: 0 0 8px #ff00ff, 0 0 16px #ff44ff, 0 0 28px #ff77ff, 0 0 40px #ffaaff;
    font-weight: bold;
}
.neon5 {
    color: #c77dff !important;
    text-shadow: 0 0 8px #9933ff, 0 0 16px #b366ff, 0 0 28px #cc99ff, 0 0 40px #e0c0ff;
    font-weight: bold;
}
.neon6 {
    color: #4dc3ff !important;
    text-shadow: 0 0 8px #0099ff, 0 0 16px #33bbff, 0 0 28px #66ccff, 0 0 40px #99ddff;
    font-weight: bold;
}
.neon7 {
    color: #00ffd5 !important;
    text-shadow: 0 0 8px #00e5c0, 0 0 16px #00ffcc, 0 0 28px #66ffe5, 0 0 40px #aafff0;
    font-weight: bold;
}
.neon8 {
    color: #66ff33 !important;
    text-shadow: 0 0 8px #33ff00, 0 0 16px #77ff44, 0 0 28px #99ff66, 0 0 40px #ccff99;
    font-weight: bold;
}
.neon9 {
    color: #fff44f !important;
    text-shadow: 0 0 8px #ffee00, 0 0 16px #fff200, 0 0 28px #fff766, 0 0 40px #fffaa0;
    font-weight: bold;
}
.neon10 {
    color: #ffd700 !important;
    text-shadow: 0 0 8px #ffcc00, 0 0 16px #ffdd33, 0 0 28px #ffe566, 0 0 40px #fff0a0;
    font-weight: bold;
}
.neon11 {
    color: #ff7f6b !important;
    text-shadow: 0 0 8px #ff5533, 0 0 16px #ff7766, 0 0 28px #ff9988, 0 0 40px #ffbbaa;
    font-weight: bold;
}
.neon12 {
    color: #ffffff !important;
    text-shadow: 0 0 8px #cceeff, 0 0 16px #ffffff, 0 0 28px #e8f4ff, 0 0 40px #ffffff;
    font-weight: bold;
}

/* Animasyonlu Nick 2 */
.hareketli110 {       background: linear-gradient(to bottom right, #b39c6b, #795939, #4f3b27, #a25a2a, #c7b39e); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 3s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}

/* Animasyonlu Nick 2 */
.hareketli2 {       background: linear-gradient(to bottom right, #b39c6b, #795939, #4f3b27, #a25a2a, #c7b39e); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 3s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}

/* Animasyonlu Nick 3 */
.hareketli3 {       background: linear-gradient(to left, #f7b3a6, #f8d9a0, #f1e3b7, #d4b8e0, #b6919c); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 3s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}

/* Animasyonlu Nick 4 */
.hareketli4 {       background: linear-gradient(to bottom right, #ff5c7a, #d93a3a, #b83d4e, #a62b3d, #f8c83a); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 3s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}

/* Animasyonlu Nick 5 */
.hareketli5 {       background: linear-gradient(to bottom left, #d60032, #ff6e61, #ffb84d, #ffe680, #4cae4f); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 3s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}


/* Animasyonlu Nick 6 */
.hareketli6 {       background: linear-gradient(to left, #feff85, #e5e736, #fcff00, #ffffff, #c1e955); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 4s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}

/* Animasyonlu Nick 7 */
.hareketli7 {       background: linear-gradient(to left, #db8170, #d7a399, #d5523a, #ffffff, #ff4927); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 4s infinite; /* Animasyon ekle */
}

/* BEŞİKTAŞ */
.hareketli8 {       background: linear-gradient(to left, #fbffed, #393939, #c2c2c2, #393939, #fbffed); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 4s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}

/* GALATASARAY */
.hareketli9 {       background: linear-gradient(to right, #ff0000, #ffea00, #fff000, #fff600, #f62e00); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 4s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}

/* FENERBAHÇE */
.hareketlia {       background: linear-gradient(to left, #0018ff, #0018ff, #fff000, #0018ff, #463dea); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 4s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}

/* TRABZON */
.hareketlib {       background: linear-gradient(to right, #b35656, #b35656, #5989e2, #5989e2, #ab6768); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 4s infinite; /* Animasyon ekle */
}

/* Hareketli gradyan animasyonu */
@keyframes dalgali-yesil-hareket {
        0% {
                background-position: 0% 50%; /* Başlangıç pozisyonu */
        }
        50% {
                background-position: 100% 50%; /* Orta pozisyon */
        }
        100% {
                background-position: 0% 50%; /* Bitiş pozisyonu */
        }
}
/* Animasyon1 */
.hareketli {       background: linear-gradient(to right, #3bc6fa, #3b71fa, #70fffa, #6ad7ff, #3ebfef); /* Gradyan renkleri */
        background-size: 300% 300%; /* Hareket için geniş arka plan */
        -webkit-background-clip: text; /* Sadece metne uygula */
        -webkit-text-fill-color: transparent; /* Metni şeffaf yap */
        font-weight: bold; /* Kalın metin */
        animation: dalgali-yesil-hareket 4s infinite; /* Animasyon ekle */
}

/* ——— Ek animasyonlu nick efektleri (daha hızlı / hareketli) ——— */
.nick-aurora {
        background-image: linear-gradient(120deg, #00ff87, #60efff, #9b59b6, #ff6b9d, #00ff87);
        background-size: 400% 400%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-zigzag 2.2s ease-in-out infinite;
}
.nick-fire {
        background-image: linear-gradient(90deg, #ff0000, #ff4500, #ff8c00, #ffd700, #ff0000);
        background-size: 500% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-fire-flow 1.4s linear infinite;
}
.nick-ocean {
        background-image: linear-gradient(180deg, #001f3f, #0074d9, #39cccc, #7fdbff, #001f3f);
        background-size: 100% 500%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-ocean-rise 2s ease-in-out infinite alternate;
}
.nick-cyber {
        background-image: linear-gradient(45deg, #ff00ff, #00ffff, #ff00aa, #00ff88, #ff00ff);
        background-size: 400% 400%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-cyber-diag 1.6s ease infinite alternate;
}
.nick-sunset {
        background-image: linear-gradient(to right, #ff512f, #f09819, #ff6b6b, #c471ed, #ff512f);
        background-size: 350% 350%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-pulse-flow 2.5s ease-in-out infinite;
}
.nick-toxic {
        background-image: linear-gradient(90deg, #39ff14, #00ff00, #adff2f, #7fff00, #39ff14);
        background-size: 450% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-toxic-shake 1.2s linear infinite;
}
.nick-candy {
        background-image: linear-gradient(135deg, #ff6ec7, #ff9a9e, #fecfef, #a18cd1, #ff6ec7);
        background-size: 400% 400%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-zigzag 1.8s ease infinite;
}
.nick-plasma {
        background-image: linear-gradient(60deg, #8e2de2, #4a00e0, #ff0080, #00d4ff, #8e2de2);
        background-size: 500% 500%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-plasma-spin 1.5s ease-in-out infinite;
}
.nick-lava {
        background-image: linear-gradient(to bottom, #1a0000, #8b0000, #ff4500, #ff6347, #ffd700, #8b0000);
        background-size: 100% 600%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-lava-bubble 2s ease-in-out infinite alternate;
}
.nick-ice {
        background-image: linear-gradient(180deg, #e0f7fa, #80deea, #4dd0e1, #ffffff, #b2ebf2);
        background-size: 100% 450%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-ice-shimmer 1.8s ease-in-out infinite;
}
.nick-nebula {
        background-image: linear-gradient(225deg, #0f0c29, #302b63, #24243e, #6a0572, #ab83a1, #0f0c29);
        background-size: 400% 400%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-nebula-drift 3s ease infinite;
}
.nick-electric {
        background-image: linear-gradient(90deg, #ffff00, #ffffff, #00bfff, #ffff00, #ffffff);
        background-size: 600% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-electric-flash 1.1s linear infinite;
}
.nick-chrome {
        background-image: linear-gradient(90deg, #434343, #a8a8a8, #ffffff, #c0c0c0, #434343);
        background-size: 400% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-chrome-sweep 2s ease-in-out infinite;
}
.nick-violet {
        background-image: linear-gradient(120deg, #4a148c, #7b1fa2, #e040fb, #ea80fc, #4a148c);
        background-size: 350% 350%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-violet-wave 2.4s ease-in-out infinite alternate;
}
.nick-rainbow {
        background-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
        background-size: 700% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: bold;
        animation: nickfx-rainbow-rush 1.6s linear infinite;
}

@keyframes nickfx-zigzag {
        0%   { background-position: 0% 50%; }
        25%  { background-position: 100% 0%; }
        50%  { background-position: 100% 100%; }
        75%  { background-position: 0% 100%; }
        100% { background-position: 0% 50%; }
}
@keyframes nickfx-fire-flow {
        0%   { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
}
@keyframes nickfx-ocean-rise {
        0%   { background-position: 50% 0%; }
        100% { background-position: 50% 100%; }
}
@keyframes nickfx-cyber-diag {
        0%   { background-position: 0% 0%; }
        100% { background-position: 100% 100%; }
}
@keyframes nickfx-pulse-flow {
        0%, 100% { background-position: 0% 50%; background-size: 350% 350%; }
        50%      { background-position: 100% 50%; background-size: 450% 450%; }
}
@keyframes nickfx-toxic-shake {
        0%   { background-position: 0% 50%; }
        25%  { background-position: 50% 50%; }
        50%  { background-position: 100% 50%; }
        75%  { background-position: 50% 50%; }
        100% { background-position: 0% 50%; }
}
@keyframes nickfx-plasma-spin {
        0%   { background-position: 0% 50%; }
        33%  { background-position: 100% 0%; }
        66%  { background-position: 0% 100%; }
        100% { background-position: 100% 50%; }
}
@keyframes nickfx-lava-bubble {
        0%   { background-position: 50% 0%; }
        100% { background-position: 50% 100%; }
}
@keyframes nickfx-ice-shimmer {
        0%, 100% { background-position: 50% 0%; }
        50%      { background-position: 50% 100%; }
}
@keyframes nickfx-nebula-drift {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
}
@keyframes nickfx-electric-flash {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 200% 50%; }
}
@keyframes nickfx-chrome-sweep {
        0%   { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
}
@keyframes nickfx-violet-wave {
        0%   { background-position: 0% 0%; }
        100% { background-position: 100% 100%; }
}
@keyframes nickfx-rainbow-rush {
        0%   { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
}


/* Renk seçici ve araç çubuğu */
.bar_options{ border-left:1px solid #035ea4; border-right:1px solid #011626;} /* Araç çubuğu ayırıcı çizgiler */
#picker_box, #list_emoticon { background: rgba(17, 17, 17, 0.6); /* %60 opak arka plan */ }
.sel_item { background:#ff9900;} /* Seçili öğe turuncu arka planlı */
.pick_color, #smile_content, .wrap_picker { border-left:1px solid #111; border-bottom:1px solid #222; border-top:1px solid #111; border-right:1px solid #222;} /* Kenarlıklar */
#smile_content { background:#000;} /* Emoji içeriği beyaz arka planlı */

/* Kullanıcı listesi üzerine gelindiğinde isim rengi */
.usertarget:hover { color:#fff !important; opacity:1; } /* Hover durumunda beyaz yazı */
.open_user {
    background: #000; /* Kullanıcı alanı Nick Alanı arkaplan */
    border: 1px solid transparent; /* Şeffaf border (yer tutucu) */
}
.user_option_list .hover_element:hover { background:#c36262; } /* Hover sırasında açılır menü mavi arka plan */

/* Form öğeleri — gri zemin, beyaz yazı (#content sohbet kutusu app.css’te ayrı) */
input:not(#content), select, textarea:not(#content) {
        background-color: #4a4a4a;
        color: #ffffff;
        border: 1px solid rgba(210, 68, 68, 0.35);
        padding: 5px;
        border-radius: 4px;
        width: 100%;
}

select option {
        background-color: #3d3d3d;
        color: #ffffff;
}

input:not(#content):hover,
input:not(#content):focus,
select:hover,
select:focus,
textarea:not(#content):hover,
textarea:not(#content):focus {
        background-color: #5c5c5c;
        color: #ffffff;
        outline: none;
        border-color: rgba(210, 68, 68, 0.45);
}