/* genel renkler */
a {color: #66CCFF; /* neon blue */}
body {background: #111; /* dark black */ color: #fff;}
button { background: transparent; color: #fff; }
input, textarea, .post_input_container { background: rgba(250, 250, 250, 0.61); /* dark gray */ border: 1px solid #333; /* dark gray */ color: #0909ef; /* neon blue */}
.setdef { color: #fff; }

/* çerez kutusu */
.cookie_wrap { background: #222; /* dark gray */ color: #fff; }

/* arka planlı öğe (efektsiz) */
.bback { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.bbackb { background: rgba(40, 40, 40, 0.2); /* dark gray */ border: 1px solid rgba(40, 40, 40, 0.2); /* dark gray */}

/* arka plansız öğe (hover efekti ile) */
.bhover:hover { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.bbackhover { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.bbackhover:hover { background: rgba(40, 40, 40, 0.1); /* dark gray */}

/* çerçeveli, arka planlı ve hover efektli öğe */
.bbackhoverb { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.bbackhoverb:hover { background: rgba(255, 255, 255, 0.3); /* light gray */ border: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}

/* çizgili, arka plansız ve hover efektli öğe */
.blisting { border-bottom: 1px solid rgba(40, 40, 40, 0.1); /* dark gray */}
.blisting:hover { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.blist { border-bottom: 1px solid rgba(40, 40, 40, 0.1); /* dark gray */}

/* özel panel üst kısmı */
.back_ptop { background: rgba(20, 20, 20, 0.85); /* dark gray */ color: #fff;}

/* sayfa menüsü ve alt menüsü */
.bpmenu:hover { background: rgb(255, 255, 255, 0.05); /* light gray */}
.bsub { background: rgb(0, 0, 0, 0.1); /* dark black */}
.bsub:hover { background: rgba(40, 40, 40, 0.1); /* dark gray */}

/* kart, log, duvar ve haber alt menüleri */
.bmenu, .submenu { border-bottom: 1px solid rgba(40, 40, 40, 0.1); /* dark gray */}
.bmenu:hover, .submenu:hover { background: rgba(40, 40, 40, 0.1); /* dark gray */}

/* kutu gölgesi */
.bshadow, .page_element, .float_menu, .btnshadow, .pboxed { box-shadow: 0 1px 3px rgb(0, 0, 0, 0.4); /* dark black */}
.bshadow, .page_element, .float_menu, .btnshadow, .pboxed { backdrop-filter: blur(10px); /* glassy effect */}

/* panel ve kutu için seçili ana öğe */
.bselected { background: rgba(255, 214, 0, 0.05); /* light orange */}
.rselected { background: rgba(255, 214, 0, 0.05); /* light orange */}
.pselected { color: #d3b300; /* light orange */}
.cselected, .liked { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.pag_btn { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.pagselected, .pag_btn:hover { background: rgb(255, 255, 255, 0.1); /* light gray */}

/* sayaç ve altın etiketi */
.gtag { background: #111; /* dark black */ border: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}
.bborder { border-bottom: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}
.tborder { border-top: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}
.lborder, .ppanel { border-left: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}
.rborder { border-right: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}
.fborder { border: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}

/* üstteki kayan alanın rengi */
.float_top { border-bottom: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}
.float_ctop { border-bottom: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}

/* başlıklar, altlık ve üst modalların renkleri */
.bhead {background: linear-gradient(144deg, rgb(93 93 93) 18%, rgb(157 151 151) 48%, rgb(157 157 157) 19%, rgb(169 164 164) 26%, rgb(159 159 159) 58%, rgb(79 189 195) 88%);color:#fff;box-shadow: inset 0 0 36px -7px #000;}
.modal_top { background: #111; /* dark black */ color: #fff;}
.pro_top { background: rgba(13, 8, 5, 0.61); /* dark gray */ color: #fff;}
.bfoot {background: linear-gradient(144deg, rgb(93 93 93) 18%, rgb(157 151 151) 48%, rgb(157 157 157) 19%, rgb(169 164 164) 26%, rgb(159 159 159) 58%, rgb(79 189 195) 88%);color: #ffffff;box-shadow: inset 0 0 36px -7px #000;}
.foot { background:#222; color:#fff; }

/* panel, sayfa menüsü, kayan menü, modal ve sohbet kutularının arka planı */
.backglob { background: transparent; }
.back_chat, #page_full_content, .tab_menu { background: rgba(13, 8, 5, 0.61); /* dark gray */}
.back_priv { background: rgba(13, 8, 5, 0.61); /* dark gray */}
.back_panel { background: rgba(13, 8, 5, 0.61); /* dark gray */}
.back_menu { background: rgba(20, 20, 20, 0.85); /* dark gray */}
.back_pmenu { background: rgba(13, 8, 5, 0.61); /* dark gray */}
.back_box { background: rgba(13, 8, 5, 0.61); /* dark gray */}
.back_input { background: rgba(13, 8, 5, 0.61); /* dark gray */ border-top: 1px solid rgba(255, 238, 160, 0.11); /* light gray */}
.back_modal { background: rgba(13, 8, 5, 0.61); /* dark gray */ backdrop-filter: blur(10px); /* glassy effect */}
.page_element { background: rgba(13, 8, 5, 0.61); /* dark gray */}
.back_quote { background: rgba(13, 8, 5, 0.81); /* dark gray */}

/* ana tema rengi */
.theme_color { color: #66CCFF; /* light orange */}
.default_color { color: #6a6242; /* dark gray */}
.error { color: #a73232; /* dark red */}
.success { color: #409728; /* light green */}
.warn { color: orange; /* orange */}

/* buton renkleri */
.theme_btn, .back_theme { background: #00b0d3; /* light orange */ color: #fff;}
.default_btn, .back_default { background: #282518; /* dark gray */ color: #fff;}
.defaultd_btn { background: #4d472d; /* dark gray */ color: #fff;}
.ok_btn { background: #409728; /* light green */ color: #fff;}
.warn_btn { background: orange; /* orange */ color: #fff;}
.delete_btn { background: #a73232; /* dark red */ color: #fff;}
.send_btn, .footer_play { color: #ebe9e1; /* light orange */}

/* varsayılan kullanıcı adı rengi */
.user { color: #fff; /* white */}

/* Sohbet sistemi mesaj stilleri */
.chat_system {
    color: #b9ae7e; /* Light gray text */
    background: url('./images/kalp.gif') no-repeat center center;
    background-size: cover; /* Görselin arka planı tamamen kaplamasını sağlar */
    padding: 10px 16px; /* Buton benzeri bir şekil için iç boşluk */
    border-radius: 10px; /* Yuvarlak köşeler */
    display: inline-block; /* Arka planın metni sarmasını sağlar */
    max-width: 80%; /* Çok geniş olmasını engeller */
    text-align: center; /* Metni ortalar */
    
    /* Öğeyi ortalamak için */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* listede çevrimdışı kullanıcı opaklığı */
.offline { opacity: 0.5; /* %50 saydamlık */}

/* menü simgesi */
.menui { color: #ecebe6; /* light orange */}
.subi { color: #efefeb; /* light orange */}

/* duvar yanıt arka planı */
.reply_item { background: rgba(13, 8, 5, 0.61); /* dark gray */}

/* ana gönderi öğesi seçenekleri (duvar ve haber) */
.main_post_item { color: rgb(255, 255, 255, 0.5); /* light gray */}

/* giriş alanı arka plan renkleri */
.input_item, .panel_option, .main_post_item { color: #fff; /* white */}

/* özel günlük balonu renkleri */
.target_private, .hunt_quote { color: #fff; /* white */ background: #4d472d; /* dark gray */}
.hunter_private, .targ_quote { color: #fff; /* white */ background: #34301f; /* dark gray */}

/* sohbetteki alıntının arka plan rengi */
.cquote { background: rgba(13, 8, 5, 0.299) !important; /* dark gray */}
.cqname { color: #dedede; /* light gray */}
.cqmess { color: #eeece6; /* dark gray */}

/* sekme menüsü */
.tab_menu { box-shadow: 0 1px 3px rgb(0, 0, 0, 0.4); /* dark black */}
.tab_selected { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.tab_menu { backdrop-filter: blur(10px); /* glassy effect */}

/* modal menü */
.modal_mback { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.modal_mborder { border-bottom: 1px solid rgba(40, 40, 40, 0.2); /* dark gray */}
.modal_selected { background: rgba(40, 40, 40, 0.2); /* dark gray */}
.modal_back { background-color: rgba(51, 33, 21, 0.69); /* dark gray */}

/* sohbet kayıtları */
.log2 {
    background: url('./images/arkam1.png') no-repeat center center;
    background-size: cover; /* Ensures the image fills the whole element */
}
.topic_log {
  background: rgba(28, 155, 104, 0.299); /* Semi-transparent white */
  backdrop-filter: blur(10px); /* Glassy effect */
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  color: #efede3; /* Light gray */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* Star shape */
  padding: 15px; /* Daha iyi okunabilirlik için boşluk ayarla */
  border-radius: 10px; /* Yumuşak kenarlar */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Daha iyi kontrast için hafif kenarlık */
}



/* yükleme ilerlemesi */
.bprogress { background: #409728; /* light green */ color: #fff;}

/* bildirim renkleri */
.bnotify { background: #d3b300; /* light orange */ color: #fff;}
.foot_notify, .head_notify { border: 1px solid #fff; /* white */}

/* tarih renkleri */
.sub_date { color: #a89e71; /* light gray */}
.sub_chat, .sub_priv { color: #6a6242; /* dark gray */}

/* ikincil metin rengi */
.sub_text, .list_mood { color: #a89e71; /* light gray */}

/* profil beğenileri */
.plikes { background-color: rgba(100, 100, 100, 0.2); /* dark gray */ color: #fff;}

/* yüklenme simgesi rengi */
.bspin { color: rgb(255, 255, 255, 0.3); /* light gray */}

/* özel sohbet öğesi */
.my_notice { color: #fff; /* white */ background: #d3b300; /* light orange */}
.system_text { background: rgba(40, 40, 40, 0.2); /* dark gray */ color: #a89e71; /* light gray */}

/* dış sayfaların arka planı */
.back_page { background: #111; /* dark black */ color: #fff;}

/* video arka plan rengi */
.post_video { background: rgb(0, 0, 0, 1); /* dark black */}

/* kaydırıcı */
.boom_slider .ui-widget-content { background: #282518; /* dark gray */}
.boom_slider .ui-state-default { background: #ffeea0 !important; /* light gray */}
.boom_slider .ui-state-active { background: #ffeea0 !important; /* light gray */}
.boom_slider .ui-slider-range { background: #6a6242; /* dark gray */}

/* seçim girişi rengi */
.selectboxit-list, .selectboxit-btn { background-color: rgba(13, 8, 5, 0.61); /* dark gray */ border: 1px solid #34301f; /* dark gray */ color: #fff;}
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor { background-color: rgba(44, 28, 17, 0.61); /* dark gray */ color: #fff;}
.selectboxit-default-arrow { border-top: 4px solid #6a6242; /* dark gray */}
.selectboxit-btn.selectboxit-enabled:hover, .selectboxit-btn.selectboxit-enabled:focus, .selectboxit-btn.selectboxit-enabled:active { background: rgba(13, 8, 5, 0.61); /* dark gray */ color: #fff;}
.selectboxit-options { background: rgba(13, 8, 5, 0.887); /* dark gray */ color: #fff;}
.selectboxit-list .selectboxit-option-anchor { color: #6a6242; /* dark gray */}

/* özel */
.modal_in { border: 1px solid rgb(255, 255, 255, 0.01); /* light gray */}
#intro_top { background: rgba(13, 8, 5, 0.61) !important; /* dark gray */}
input#content { background: rgba(32, 20, 14, 0.45); /* dark gray */ border: 1px solid rgba(255, 238, 160, 0.11) !important; /* light gray */ color: #ffeea0 !important; /* light gray */ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.188); /* dark black */}
body::before { content: ''; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url('./images/arkam.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; box-shadow: inset 0 0 500px #000; /* dark black */}
.intro_login_btn { background: #e7e6e3 !important; /* light orange */}

@media screen and (max-width: 1200px) {
  .back_panel { backdrop-filter: blur(10px);}
}
@media screen and (max-width: 1100px) {
  .back_pmenu { backdrop-filter: blur(10px);}
}
@media screen and (max-width: 768px) {
  .back_menu, .back_box, .back_priv { backdrop-filter: blur(10px);}
}
/* Genel sohbet kayıt stilleri */
.chat_log {
    width: auto;
    display: flex; /* Avatar ve sohbet balonunu yatay hizalar */
    align-items: center; /* Dikey olarak ortala */
    
    /* Animasyon */
    animation: bounceSlideIn 1.2s ease-out;
}

/* Sohbet avatar stilleri */
.chat_log > .chat_avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.6s ease;
  }
  
  /* Hover (fare üzerine gelince dönme) */
  .chat_log > .chat_avatar:hover {
    transform: rotate(360deg);
  }
  
  /* Saydam ve estetik sohbet balonu */
  .chat_log > .my_text {
    position: relative;
    max-width: 85%;
    padding: 2px;
    border-radius: 16px;
    word-break: break-word;
    color: #fff;
    font-weight: 700;
    background: rgba(64, 100, 124, 0.134);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(45, 72, 160, 0.197);
    margin: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.0;
    transition: background-color 0.3s ease;
    cursor: default;
    animation: bounceSlideIn 1.2s ease-out;
  }
  .chat_log > .my_text:hover {
    background: rgba(101, 127, 154, 0.204);
    border-color: rgba(45, 51, 160, 0.168);
  }
  

    /* Arka plan görseli */
    .glass_effect {
        background: url('./images/arkam.gif') no-repeat center center;
        background-size: cover;
        background-color: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }



/* Sohbet balonuna bağlanan ok */
.chat_log > .my_text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent rgba(255, 255, 255, 0.949) transparent transparent;
  }

/* Kayarak gelen zıplama animasyonu */
@keyframes bounceSlideIn {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    50% {
        transform: translateX(10px);
        opacity: 1;
    }
    70% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Duyarlı (responsive) ayarlamalar */
@media (max-width: 768px) {
    .chat_log {
        flex-direction: row;
        gap: 5px;
        padding: 8px;
        box-sizing: border-box;
    }

    .chat_log > .chat_avatar {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
}
/* Sohbete animasyonlu giriş */
@keyframes bounceSlideIn {
    0% { transform: translateX(-100px); opacity: 0; }
    50% { transform: translateX(10px); opacity: 1; }
    70% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
  }
  .chat_log {
    gap: 0.5 !important;
    padding: 0.5 !important;
    margin: 0 !important;
}

.chat_log > .my_text {
    margin: 0 !important;
}

.chat_log > .chat_avatar {
    margin: 0 !important;
}
@media (max-width: 768px) {
    .chat_log > .my_text {
      margin-left: 14px !important;
    }
  }