/* Genel Renk Ayarları */
a { color: #84e8a7; }

/* Genel site ayarları */
body {
    color: #fff;
    background: #1c1c1c url('images/toz.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Login sayfasına özel ayarlar */
body.login-page {
    background: #000 url('images/login-ekrani3.jpg') no-repeat center center fixed;
    background-size: cover;
}

button {
    background: transparent;
    color: #fff;
}
button { background: transparent; color: #fff; } /* Buton arka planı ve metin rengi */

/* Login ekranı */
#wrap_login {
    position: fixed; /* Sayfa kaydırılsa bile sabit kalır */
    left: 25%; /* 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, 62, 66, 1); /* Arka plan rengi */
    padding: 0px; /* İçerik boşluğu */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); /* 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 */
    }
}


/* Kutuların Arkaplan Renkleri */
.background_chat, .background_login {
    background: rgba(28, 28, 28, 0.6); /* %80 opaklık ile arka plan */
    box-shadow: 0 0 5px #fff;
    border: 1px solid rgba(128, 128, 128, 0.9); /* %50 opaklık ile mavi sınır */
}

.background_box {
    background: #d92727;
    color: #fff;
    border: 1px solid rgba(128, 128, 128, 0.5); /* %50 opaklık ile Gri sınır */
}

.background_menu_footer { background:#111; border-top:1px solid #333; }
.panels { border: 3px solid rgba(128, 128, 128, 0.5); background:#111111; box-shadow:0 0 5px #111;}
#chat_error { background:#111; }
#inner_header, #header_login { background: url('logo/Default.png'); background-repeat:no-repeat; background-size:auto 100%; background-position:left center; }
#menu_private { background:#000;}
#main_emoticon { background:#333; }


/* Sohbet Geçiş Renkleri */
.log1 { background:none; }
.log2 { background:none; }
.ch_logs { border-bottom:none;}

/* Ayırıcı Renkler */
.user_separator { border-bottom:1px solid #444; }
.user_option_separator { border-bottom:1px solid #444; }
.top_separator { border-top:1px solid #333; }
.right_separator { border-right:1px solid #444; }
.bottom_separator { border-bottom:1px solid #111; }

/* Kullanıcı Listesi Seçenek Renkleri */
.user_option_list { background:#303030; color:#fff; }
.username, .my_notice, .logs_date, .my_text {
    font-size: <?php echo $fontSize; ?>px !important;
}

/* Buton ve Öğelerin Renkleri */
.sub_button { background:#333; color:#fff;}
.sub_element { background:#d92727; color:#fff;}
.empty_element { background:#d92727; color:#fff; }
.selected_element { background:#d92727; color:#fff; }
.hover_element:hover { background:#d92727; color:#fff;}

/* Reklam Arkaplanı */
#show_chat_ads { background:#111 !important;}

/* Özel ve Alt Renkler */
.error { color:red;}
.success { color:green;}
.away { color:#414141; }
.my_notice { background:#666; padding:3px; color:#fff;}
.sub_color2 { color:#03add8;}
.sub_color { color:#03add8; }
.hide_private_title { color:#ccc; }
.room_userin { color:#fff; }
.wrap_command:hover { background:#444 !important; }

/* Özel Sohbet Mesajı Renkleri */
.target_private {color:#fff; background:#333;}
.hunter_private {color:#fff; background:#03add8;}

/* 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(0, 0, 0, 0);}
.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 { color: #b4a6d7; font-weight: bold; }
.mor1 { color: #9900fb; font-weight: bold; }
.mor2 { color: #4c1131; font-weight: bold; }
.fusya { color: #a44d77; font-weight: bold; }
.pembe2 { color: #c37ba1; font-weight: bold; }
.pembe3 { color: #d7a6bc; font-weight: bold; }
.magenta { color: #fc01fc; font-weight: bold; }
.siyah { color: #000000; font-weight: bold; }
.gri { color: #434343; font-weight: bold; }
.gri1 { color: #666666; font-weight: bold; }
.beyaz { color: #ffffff; font-weight: bold; }
.balik { color: #8c8074; font-weight: bold; }
.neon1 {
  color: #ff5959 !important; /* Neon metin rengi */
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ffc000; /* Neon ışık efekti */
    font-weight: bold; } /* Daha belirgin yapmak için */ 
.neon2 {
  color: #ffa627 !important; /* Neon metin rengi */
  text-shadow: 0 0 10px #ffa627, 0 0 20px #ffa627, 0 0 30px #ffa200, 0 0 40px #e1bd7e; /* Neon ışık efekti */
  font-weight: bold; } /* Daha belirgin yapmak için */ 
}

/* 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 */
} bold; } /* Kalın metin */

/* 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 */
} bold; } /* Kalın metin */

/* 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 */
} bold; } /* Kalın metin */

/* 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 */
} bold; } /* Kalın metin */

/* 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 */
} bold; } /* Kalın metin */


/* 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 */
} bold; } /* Kalın metin */

/* 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 */
} bold; } /* Kalın metin */

/* 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 */
} bold; } /* Kalın metin */

/* 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 */
} bold; } /* Kalın metin */

/* 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 */
} bold; } /* Kalın metin */

/* 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 */
} bold; } /* Kalın metin */
/* 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 */
}

/* 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 */
} bold; } /* Kalın metin */

/* Renk Seçici ve Araç Çubuğu */
.bar_options{} 

/* Araç Çubuğu Elemanı Ayırıcı */
#picker_box, #list_emoticon { background: rgba(17, 17, 17, 0.8); } /* Seçici ve Emojilerin Arkaplan Rengi (0.8 şeffaflık) */
.sel_item { background: rgba(34, 34, 34, 0.8); } /* Seçilen Elemanın Arkaplanı (0.8 şeffaflık) */

.pick_color, #smile_content, .wrap_picker { 
    border-left: 1px solid rgba(34, 34, 34, 0.8); 
    border-bottom: 1px solid rgba(68, 68, 68, 0.8); 
    border-top: 1px solid rgba(34, 34, 34, 0.8); 
    border-right: 1px solid rgba(68, 68, 68, 0.8); 
} /* Elemanların Kenarlıkları (0.8 şeffaflık) */

#smile_content { background: rgba(17, 17, 17, 0.9); } /* Emojiler İçin Arkaplan Rengi (0.8 şeffaflık) */


/* Seçili öğe arka planı */
.sel_item { background: rgba(34, 34, 34, 0.7); /* Seçili öğe için daha koyu ve %70 opak */ }

/* Sınırlar ve içerik arka planları */
.pick_color, #smile_content, .wrap_picker { border-left: 1px solid rgba(34, 34, 34, 0.7); border-bottom: 1px solid rgba(68, 68, 68, 0.7); border-top: 1px solid rgba(211, 84, 84, 0,6); border-right: 1px solid rgba(211, 84, 84, 0,6); }

/* Emoticon içeriğinin arka planı */
#smile_content { background: rgba(17, 17, 17, 0.6); /* %60 opaklıkla koyu gri */ }

/* Kullanıcı ismi hover efekti */
.usertarget:hover { color: #fff !important; opacity: 1; }
.open_user { background: #111; } /* Açık kullanıcı arka plan rengi */
/* Seçili öğe arka planı */
.sel_item { background: rgba(34, 34, 34, 0.7); /* Seçili öğe için daha koyu ve %70 opak */ }

/* Sınırlar ve içerik arka planları */
.pick_color, #smile_content, .wrap_picker { border-left: 1px solid rgba(34, 34, 34, 0.7); border-bottom: 1px solid rgba(68, 68, 68, 0.7); border-top: 1px solid rgba(211, 84, 84, 0,6); border-right: 1px solid rgba(211, 84, 84, 0,6); }

/* Emoticon içeriğinin arka planı */
#smile_content { background: rgba(17, 17, 17, 0.6); /* %60 opaklıkla koyu gri */ }

/* Kullanıcı ismi hover efekti */
.usertarget:hover { color: #fff !important; opacity: 1; }
.open_user { background: #111; } /* Açık kullanıcı arka plan rengi */

/* Buton ve hover efektleri */
.sub_button, #submit_button { background: #d92727; color: #fff; }
.hover_element {
    background: rgba(44, 44, 44, 0.4); /* Varsayılan gri tonlu arka plan */
    color: #fff; /* Metin rengi */
    transition: all 0.5s ease; /* Hover için yumuşak geçiş */
}


.hover_element:hover {
    background: rgba(211, 84, 84, 1); /* Hover durumda daha açık bir gri */
    color: #fff; /* Metin rengi aynı kalır */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); /* Hafif parlama efekti */
    transform: scale(1.05); /* Hafif büyüme efekti */
}
/* Hover ve focus durumlarında stil ayarı */
input:hover, select:hover, textarea:hover, input:focus, select:focus, textarea:focus {
    background-color: #272727; /* Hover/focus durumunda daha açık bir mavi */
    outline: none;
    border-color: rgba(139, 139, 139, 0.4); /* Kenarlık hover ve focus durumunda aynı kalıyor */
}

/* Buton ve hover efektleri */

.hover_element:hover {
  background-image: url('https://s6.gifyu.com/images/bpgHJ.gif'); /* GIF dosyanızın yolu Nicklerin arka tarafı */
  background-size: cover; /* GIF'in elementin boyutuna sığdırılması */
  color: #BFA181; /* Beyaz yazı */
  border: 2px solid rgba(139, 139, 139, 0.6); /* Yarı saydam #1e9dff (mavi) border */
  opacity: 0.8; /* GIF'e opaklık ekle (0 ile 1 arasında bir değer) */
  transform: scale(1.1); /* Büyüme efekti */
}