/* ----- Developer AGS ----- */

A#itemsbtn {
    background-position: -211px -1px !important;
    left: 68px !important;
}
A#itemsbtn:hover {
    background-position: -211px -36px !important;
}
A#itemsbtn:active {
    background-position: -211px -71px !important;
}
A#charbtn {
    background-position: -246px -1px !important;
    left: 102px !important;
}
A#charbtn:hover {
    background-position: -246px -36px !important;
}
A#charbtn:active {
    background-position: -246px -71px !important;
}

.slot_ags .tooltip_gif {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    background-image: url('../images/ags_item_hoverx.gif');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

.slot_ags:hover .tooltip_gif {
    display: block;
}

.slot_ags_vip .tooltip_gif {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    background-image: url('../images/ags_item_hoverx.gif');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

.slot_ags_vip:hover .tooltip_gif {
    display: block;
}

.slot_ags_vip_item .tooltip_gif {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    background-image: url('../images/ags_item_hoverx.gif');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

.slot_ags_vip_item:hover .tooltip_gif {
    display: block;
}


#tooltip,
.tooltip {
    padding: 7px;
    background-color: rgba(0, 0, 0, 0.8) !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 0px solid #fff !important;
    ;
    border-top: 0px solid #cfcfcf;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
}

#tooltip {
    position: absolute;
    display: none;
    z-index: 99999;
}

.tooltip_inventory {
    color: #c0c0c0;
    font-size: 14px;
    text-align: center;
    margin-top: -5px;
}

.tooltip_ags_brand {
    color: #c0c0c0;
    font-size: 13px;
    text-align: center;
    margin-top: 3px;
}

.item-line-ags {
    width: 100%;
    height: 1px;
    background-color: #887744;
}

.ags_type {
    text-align: right;
}

.ags_trade {
    text-align: left;
    color: red;
}

.slot_ags p {
    position: absolute;
    bottom: 2px;
    left: 4px;
    margin: 0;
    font-family: Tahoma;
    font-size: 11px;
    color: white;
    text-shadow:
        -2px -1px 0 black,
        2px -1px 0 black,
        -2px 1px 0 black,
        2px 1px 0 black;
}

.type_3_ags {
    width: 100%;
    height: 1px;
    background-color: #000;
}

/* Vip System */


.vip_button {
    width: 29px;
    height: 29px;
    background-image: url('../images/vip_button.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
}

.tooltip {
    display: none;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-40%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

.vip_button:hover .tooltip {
    display: block;
}

.vip_button:hover {
    background-position: -31px 0;
}

.vip_button:active {
    background-position: -62px 0;
}


#vip_items_inventory DIV,
#vip_items_inventory IMG {
    position: absolute;
    width: 45px;
    height: 45px;
}

A#vip_items_inventory {
    background-position: -246px -1px;
    left: 102px;
}

A#vip_items_inventory:hover {
    background-position: -246px -36px;
}

A#vip_items_inventory:active {
    background-position: -246px -71px;
}

#vip_items_inventory_off DIV,
#vip_items_inventory_off IMG {
    position: absolute;
    width: 45px;
    height: 45px;
}

A#vip_items_inventory_off {
    background-position: -246px -1px;
    left: 102px;
}

A#vip_items_inventory_off:hover {
    background-position: -246px -36px;
}

A#vip_items_inventory_off:active {
    background-position: -246px -71px;
}

#vip_items DIV,
#vip_items IMG {
    position: absolute;
    width: 45px;
    height: 45px;
}

A#vip_items {
    background-position: -246px -1px;
    left: 102px;
}

A#vip_items:hover {
    background-position: -246px -36px;
}

A#vip_items:active {
    background-position: -246px -71px;
}

.slot_ags_vip p {
    position: absolute;
    bottom: 2px;
    left: 4px;
    margin: 0;
    font-family: Tahoma;
    font-size: 11px;
    color: white;
    text-shadow:
        -2px -1px 0 black,
        2px -1px 0 black,
        -2px 1px 0 black,
        2px 1px 0 black;
}

.slot_ags_vip_item p {
    position: absolute;
    bottom: 2px;
    left: 4px;
    margin: 0;
    font-family: Tahoma;
    font-size: 11px;
    color: white;
    text-shadow:
        -2px -1px 0 black,
        2px -1px 0 black,
        -2px 1px 0 black,
        2px 1px 0 black;
}


#bottombar {
    width: 1020px;
    height: 48px;
    background: url(../new_system/new_footer.png) no-repeat;
    position: relative;
}

#genie {
    width: 167px;
    height: 67px;
    background-image: url('../new_system/genie_bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    margin: 0px auto;
    margin-right: 0;
    display: block;
    margin-top: -64px !important;
}

#progress-container {

    height: 9px;
    margin: 30px auto 0;
    position: relative;
    border-radius: 3px;
    top: 30px;
    margin-left: 2px;
}


#progress-bar {
    width: 0%;
    height: 100%;
    background-image: url('../new_system/genie_system_pb.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 5px;
    left: 0;
}

#progress-text {
    margin-left: 41px;
    padding-top: 1.5px;
    font-size: 9px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

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

.pre_system_button {
    width: 168px;
    height: 24px;
    background: url('../new_system/pre_system_new.png') no-repeat;
    background-position: 0 0;
    display: inline-block;
    margin-left: 591px;
    position: relative;
    cursor: pointer;
    top: -1px;
    margin-bottom: -3px;
}

.pre_system_button:hover {
    background-position: 0 -24px;
}

.pre_system_button:active {
    background-position: 0 -48px;
}


#pre_system_text {

    padding-top: 5.5px;
    font-size: 10px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    pointer-events: none;
    position: relative;
    z-index: 2;
    text-align: center;
}

.pre_system_dropdown_content {
    display: none;
    position: absolute;
    width: 145px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #D5BA85;
    padding: 10px;
    border: 1px solid #F6EDC0;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    z-index: 9999;
    text-align: left;
    margin-top: 7px;
}

.pre_system_dropdown_content.show {
    display: block;
}


.serve_system_button {
    width: 168px;
    height: 24px;
    background: url('../new_system/server_system_new.png') no-repeat;
    background-position: 0 0;
    display: inline-block;
    margin-left: 591px;
    position: relative;
    cursor: pointer;
    top: -1px;
    margin-bottom: -3px;
}

.serve_system_button:hover {
    background-position: 0 -24px;
}

.serve_system_button:active {
    background-position: 0 -48px;
}

#serve_system_text {
    padding-top: 5.5px;
    font-size: 10px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    pointer-events: none;
    position: relative;
    z-index: 2;
    text-align: center;
}

.serve_system_dropdown_content {
    display: none;
    position: absolute;
    width: 145px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #D5BA85;
    padding: 10px;
    border: 1px solid #F6EDC0;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    z-index: 9999;
    text-align: left;
    margin-top: 7px;
}

.serve_system_dropdown_content.show {
    display: block;
}


#content_x .footer {
    margin-top: 614px !important;
    float: left;
    width: 1019px;
    height: 44px;
    position: absolute;
    z-index: 900;
}

#hotkey {
    position: relative;
    top: -70px !important;
    float: left;
    width: 463px;
    height: 45px;
    background: no-repeat url('../images/char-hotkey2_2.png');
    margin-bottom: 10px;
}



.server_left_system_button {
    width: 168px;
    height: 24px;
    background: url('../new_system/server_system_new.png') no-repeat;
    background-position: 0 0;
    display: inline-block;
    margin-left: 591px;
    position: relative;
    cursor: pointer;
    top: -1px;

}

.server_left_system_button:hover {
    background-position: 0 -24px;
}

.server_left_system_button:active {
    background-position: 0 -48px;
}


#server_left_system_text {
    padding-top: 5.5px;
    font-size: 10px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    pointer-events: none;
    position: relative;
    z-index: 2;
    text-align: center;
}

.server_left_system_dropdown_content {
    display: none;
    position: absolute;
    width: 145px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #D5BA85;
    padding: 10px;
    border: 1px solid #F6EDC0;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    z-index: 9999;
    text-align: left;
    margin-top: 7px;
}

.server_left_system_dropdown_content.show {
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
    color: white;
    padding: 10px;
    border: 1px solid gold;
    border-radius: 4px;
    z-index: 9999;
    text-align: center;
}

.dropdown-content.show {
    display: block;
}




/* Sağ Taraf*/

.chat_notice {
    width: 221px;
    height: 133px;
    background: url('../new_system/chat_notice_new_two.png') no-repeat center center;
    background-size: cover;
    margin-top: -139px;
    margin-bottom: 14px;
    margin-left: 77px;
    position: relative;
    overflow: hidden;
}

.chat-content {
    width: calc(100% - 15px);
    height: calc(100% - 37px);
    overflow-y: scroll;
    box-sizing: border-box;
    color: white;
    font-family: Arial, sans-serif;
    margin-top: 14px;
    margin-left: 10px;

}

.chat-message.yellow {
    color: yellow;
    font-size: 10px;
    padding-bottom: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.chat-content::-webkit-scrollbar {
    width: 10px;
    margin-right: -5px;
}

.chat-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

.chat-content::-webkit-scrollbar-thumb {
    background: url('../new_system/scroll.png') no-repeat center center;
    background-size: cover;
    border: 2px solid #000;
    border-radius: 0px;
}

.pp_scroll_ {
    width: 16px;
    height: 16px;
    background-image: url('../new_system/up_button.png');
    background-size: auto;
    background-position: 0 0;
    border: none;
    outline: none;
    float: right;
    margin-right: 2px;
}

.pp_scroll_:hover {
    background-position: -25px 0;
}

.pp_scroll_:active {
    background-position: -50px 0;
}


.pp_scroll_down {
    width: 16px;
    height: 16px;
    background-image: url('../new_system/down_button.png');
    background-size: auto;
    background-position: 0 0;
    border: none;
    outline: none;
    float: right;
    margin-right: 2px;
}

.pp_scroll_down:hover {
    background-position: -25px 0;
}

.pp_scroll_down:active {
    background-position: -50px 0;
}


.online_chat {
    width: 398px;
    height: 132px;
    background: url('../new_system/user_chat_new_system_test.png') no-repeat center center;
    background-size: cover;
    margin-top: 48px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}


.online_chat-content {
    width: calc(100% - 15px);
    height: calc(100% - 50px);
    overflow-y: scroll;
    box-sizing: border-box;
    color: white;
    font-family: Arial, sans-serif;
    margin-top: 14px;
    margin-left: 5px;
    direction: rtl;
}

.online_chat-message.yellow {
    color: #fff;
    font-size: 11px;
    direction: ltr;
    margin-left: 120px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.online_chat-message.war {
    color: #DFDE03;
    font-size: 11px;
    direction: ltr;
    margin-left: 120px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.online_chat-message.ping {
    color: #E978E6;
    font-size: 11px;
    direction: ltr;
    margin-left: 120px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.online_chat-message.shout {
    color: #F86605;
    font-size: 11px;
    direction: ltr;
    margin-left: 120px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.online_chat-message.general {
    color: #fff;
    font-size: 11px;
    direction: ltr;
    margin-left: 120px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.online_chat-content::-webkit-scrollbar {
    width: 10px;
    margin-right: -5px;
}

.online_chat-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

.online_chat-content::-webkit-scrollbar-thumb {
    background: url('../new_system/scroll.png') no-repeat center center;
    background-size: cover;
    border: 2px solid #000;
    border-radius: 0px;
}

.user_scroll_down {
    width: 16px;
    height: 16px;
    background-image: url('../new_system/down_button.png');
    background-size: auto;
    background-position: 0 0;
    border: none;
    outline: none;
    float: left;
    margin-left: 2.5px
}

.user_scroll_down:hover {
    background-position: -25px 0;
}

.user_scroll_down:active {
    background-position: -50px 0;
}

.user_scroll_ {
    width: 16px;
    height: 16px;
    background-image: url('../new_system/up_button.png');
    background-size: auto;
    background-position: 0 0;
    border: none;
    outline: none;
    float: left;
    margin-left: 2.5px;

}

.user_scroll_:hover {
    background-position: -25px 0;
}

.user_scroll_:active {
    background-position: -50px 0;
}

/* Notice System */
.notice-container {
    transform: translateX(-50%);
    top: 50px;
    left: 50%;
    width: 498px;
    height: 25px;
    background: url('../new_system/notice_new.png') no-repeat center center;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
    float: right;
    margin-top: -66px;
}

.notice-text-wrapper {
    position: absolute;
    width: 94% !important;
    height: 100%;
    overflow: hidden;
    margin-left: 15px;
}

.notice-text {
    position: absolute;
    top: 4px !important;
    left: 100%;
    white-space: nowrap;
    font-size: 13px;
    color: yellow;
    font-weight: bold;
    z-index: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

@keyframes slide-left {
    from {
        left: 100%;
    }
    to {
        left: -270%;
    }
}


/* Char System */
.character-container {
    width: 110px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    position: absolute;
    bottom: 34.4px;
    right: 268px;
    z-index: 5;
}

.character-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 2.5px;
    width: 100%;
    position: relative;
}

.character-box:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../new_system/char_hover.png');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: 1;
}

.character-box img,
.character-box .character-name {
    position: relative;
    z-index: 2;
}

.character-box img {
    width: 9px;
    height: 9px;
    margin-right: 4px;
}

.character-name {
    font-size: 8px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: none;
    font-weight: 700;
}

.pagination-button {
    display: inline-block;
    width: 16px;
    height: 22px;
    background-size: cover;
    cursor: pointer;
    border: none;
    padding: 0;
    outline: none;
}

.pagination-container {
    position: absolute;
    bottom: 33px;
    right: 262px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: -10px;
}

.btn-left {
    width: 11px;
    height: 11px;
    background-image: url('../new_system/btn_left_mini.png');
    background-size: auto;
    background-position: 0 0;
    border: none;
    outline: none;
    float: right;
    margin-right: 2px;
}

.btn-left:hover {
    background-position: -25px 0;
}

.btn-left:active {
    background-position: -50px 0;
}

.btn-right {
    width: 11px;
    height: 11px;
    background-image: url('../new_system/btn_right_mini.png');
    background-size: auto;
    background-position: 0 0;
    border: none;
    outline: none;
    float: right;
    margin-right: -4px;
}

.btn-right:hover {
    background-position: -25px 0;
}

.btn-right:active {
    background-position: -50px 0;
}

.pagination-number {
    font-size: 9px;
    color: #FFFF80;
    font-weight: bold
}

/* v23 devamı */


.audio-toggle-button {
    position: relative;
    top: 5px;
    z-index: 975;
    left: 535px;
    width: 31px; /* Butonun genişliği */
    height: 26px; /* Butonun yüksekliği */
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    background-image: url("../new_system/webp/off_music.webp");
  }
  
      #items {
      background-image: url("../new_system/webp/ags_inventory.webp") !important;
      width: 585px;
      height: 563px;
      float: right;
  }
      #inventorycospe {
              width: 10px !important;
              height: 156px !important;
              background-image: url('../new_system/openinv.png');
              background-size: cover;
              margin-top: 121px;
              margin-left: 204px;
          }
      #ags_inventory2 {
              display: none; /* Başlangıçta görünmez */
              width: 200px !important;
              height: 517px !important;
              background-image: url('../new_system/webp/inventory2.webp');
              background-size: cover;
              top: 25px;
              left: 1px;
       }
          .slot_50{
              display: none; 
          }
          .slot_43 {
              display: none; 
          }
          .slot_49 {
              display: none; 
          }
          .slot_42 {
              display: none; 
          }
          .slot_44 {
              display: none; 
          }
          .slot_45 {
              display: none; 
          }
          .slot_46 {
              display: none; 
          }
          .slot_47 {
              display: none; 
          }
          .slot_48 {
              display: none; 
          }
          .bag {
              display: none; 
          }
          .iconx {
              display: none; 
          }
          /* Char Info*/
    
  
  .ags-tab-button {
    position: absolute;
    z-index: 1;
    width: 62px; /* Tüm butonların genişliği */
    height: 24px; /* Varsayılan yükseklik */
    border: none;
    font-family: Arial, sans-serif; /* Yazı fontu */
    font-size: 12px; /* Yazı boyutu */
    color: #ffe400; /* Yazı rengi */
    text-align: center;
    line-height: 22px; /* Varsayılan line-height */
    text-shadow: 1px 1px 0px #000, /* Sağ alt siyah */
                 -1px 1px 0px #000, /* Sol alt siyah */
                 1px -1px 0px #000, /* Sağ üst siyah */
                 -1px -1px 0px #000; /* Sol üst siyah */
    background: url('../new_system/ags-tabbar.png') no-repeat;
    background-size: 193px 32px; /* Görselin toplam boyutuna göre ayarlandı */
  }
  
  .ags-tab-button.other {
    margin-top: 5px;
    background-position: -129px -5px; /* Varsayılan pasif durum (3. kare) */
    font-family: Arial, sans-serif; /* Yazı fontu */
    font-size: 12px; /* Yazı boyutu */
    color: #5a6036; /* Yazı rengi */
    text-align: center;
    line-height: 22px; /* Varsayılan line-height */
    padding-top: 4px; /* Yazıyı aşağı kaydırmak için */
    margin-top: 84px;
    z-index: 2 !important;
  }
  
  .ags-tab-button.active {
    width: 62px;
    height: 29px;
    padding-top: 3px; /* Yazıyı aşağı kaydırmak için */
  
    z-index: 2 !important;
    margin-top: 79px !important;
      line-height: 29px  !important;
      background-position: 0px 0px  !important;
  }
  
  .ags-tab-button:hover {
    background-position: -65px -5px; /* Hover durumu (2. kare) */
  }
  
  
  #charbtn_ags {
    display: block;
    width: 32px; /* Butonun genişliği */
    height: 32px; /* Butonun yüksekliği */
    background: url('../new_system/ags_charakter.png') no-repeat;
    background-position: 0 0; /* Normal durumu (sprite konumunu ayarlayın) */
    margin-left: 103px;
    margin-top: 1px;
  }
  
  /* Hover durumu */
  #charbtn_ags:hover {
    background-position: -32px 0 ; /* Hover durumu için sprite konumu */
  }
  
  /* Click (Aktif) durumu */
  #charbtn_ags:active {
    background-position: -64px 0; /* Click durumu için sprite konumu */
  }
  
  /* CLAN */
  #clan {
    
      background-image: url("../new_system/webp/ags_clan_new_today.webp");
      position: absolute;
      margin-left: -1px;
      margin-top: 23px;
      width: 577px; 
      height: 512px;
      background-repeat: no-repeat;
      z-index: 1;
  }
  
  .ags-close-button {
    position: absolute;
    width: 32px;
    height: 32px;
    background: url('../images/char-btn-close2.png') -1px -1px no-repeat;
    background-size: 141px 35px; /* Görsel boyutuna göre ölçeklendirme */
  
  }
  
  .ags-close-button:hover {
    background-position: -36px -1px; /* Hover durumunda ikinci kare */
  }
  
  .ags-close-button:active {
    background-position: -71px -1px; /* Tıklama durumunda üçüncü kare */
  }
  
  
  
  .ags-clan-notice {
    position: absolute;
    width: 189px;
    height: 29px;
    color: #DDD5CC;
    font-size: 12px; 
   
  
  }
  .ags-clan-buff {
    top: 216px;
    right: 380px;
    position: absolute;
    width: 160px;
    height: 18px;
    color: #DDD5CC;
    font-size: 13px; 
    display: flex;
    justify-content: center; /* Yatay ortalama */
    align-items: center; /* Dikey ortalama */
  }
  
  /* Tooltip kutusu */
  .ags-clan-buff:hover .ags_clan_tooltip {
    display: block; /* Hover sırasında görünür */
  }
  
  .ags_clan_tooltip {
    position: absolute;
    bottom: 25px; 
    background-color: rgba(0, 0, 0, 0.85); /* Siyah arkaplan */
    color: #FFF; /* Yazı rengi beyaz */
    padding: 8px 12px; /* İç boşluk */
    font-size: 12px; /* Yazı boyutu */
    font-weight: 600; /* Yazıyı kalınlaştır */
    border-radius: 4px; /* Kenarları yuvarlat */
    white-space: normal; /* Metni satır içine sığdır */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Gölge efekti */
    z-index: 100; /* Üstte görünmesini sağla */
    display: none; /* Varsayılan olarak gizli */
    text-align: left; /* Yazıyı sola yasla */
    width: 400px; /* Tooltip genişliği */
    left: 0% !important;
    top: -54px !important;
  }
  
  .ags_clan_tooltip::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent;
  }
  
  .ags-alliance-button {
    position: absolute;
    width: 81px;
    height: 29px;
    background: url('../new_system/alliance.png') -1px -1px no-repeat;
    background-size: 247px 30px; /* Görsel boyutuna göre ölçeklendirme */
  
  }
  
  .ags-alliance-button:hover {
    background-position: -83px -1px; /* Hover durumunda ikinci kare */
  }
  
  .ags-alliance-button:active {
    background-position: -165px -1px; /* Tıklama durumunda üçüncü kare */
  }
  
  .ags-clan-grade {
    position: absolute;
    top: 120px !important;
    left: 115px  !important;
    float: left;
    color: #fff; /* Sarı renk */
    font-size: 12px; /* Yazı boyutu */
    text-shadow:
    -1px -1px 0 #000, /* Sol üst siyah kenar */
      1px -1px 0 #000,  /* Sağ üst siyah kenar */
      -1px 1px 0 #000,  /* Sol alt siyah kenar */
      1px 1px 0 #000,   /* Sağ alt siyah kenar */
      -1px -1px 0 #000, /* Daha kalın dış siyah kenar */
      1px -1px 0 #000,  
      -1px 1px 0 #000,  
      0px 2px 0 #000; /* Hafif gölge */
  }
  
  .ags-clan-name {
    position: absolute;
    top: 136px !important;
    left: 116px !important;
    float: left;
    color: #C1EE11; /* Sarı renk */
    font-size: 12px; /* Yazı boyutu */
    text-shadow:
    -1px -1px 0 #000, /* Sol üst siyah kenar */
      1px -1px 0 #000,  /* Sağ üst siyah kenar */
      -1px 1px 0 #000,  /* Sol alt siyah kenar */
      1px 1px 0 #000,   /* Sağ alt siyah kenar */
      -1px -1px 0 #000, /* Daha kalın dış siyah kenar */
      1px -1px 0 #000,  
      -1px 1px 0 #000,  
      0px 2px 0 #000; /* Hafif gölge */
  }
  
  .ags-clan-rank {
    position: absolute;
    top: 151px !important;
    left: 115px !important;
    float: left;
    color: #BCAD70; /* Sarı renk */
    font-size: 12px; /* Yazı boyutu */
    text-shadow:
    -1px -1px 0 #000, /* Sol üst siyah kenar */
      1px -1px 0 #000,  /* Sağ üst siyah kenar */
      -1px 1px 0 #000,  /* Sol alt siyah kenar */
      1px 1px 0 #000,   /* Sağ alt siyah kenar */
      -1px -1px 0 #000, /* Daha kalın dış siyah kenar */
      1px -1px 0 #000,  
      -1px 1px 0 #000,  
      0px 2px 0 #000; /* Hafif gölge */
  }
  .ags-clan-cp {
    position: absolute;
    top: 167px  !important;
    right: 386px !important;
    color: #fff; /* Sarı renk */
    font-size: 12px; /* Yazı boyutu */
    text-shadow:
    -1px -1px 0 #000, /* Sol üst siyah kenar */
      1px -1px 0 #000,  /* Sağ üst siyah kenar */
      -1px 1px 0 #000,  /* Sol alt siyah kenar */
      1px 1px 0 #000,   /* Sağ alt siyah kenar */
      -1px -1px 0 #000, /* Daha kalın dış siyah kenar */
      1px -1px 0 #000,  
      -1px 1px 0 #000,  
      0px 2px 0 #000; /* Hafif gölge */
  }
  
  .ags-clan-current {
    position: absolute;
    top: 247px  !important;
    right: 257px  !important;
    color: #fff; /* Sarı renk */
    font-size: 12px; /* Yazı boyutu */
    text-shadow:
    -1px -1px 0 #000, /* Sol üst siyah kenar */
      1px -1px 0 #000,  /* Sağ üst siyah kenar */
      -1px 1px 0 #000,  /* Sol alt siyah kenar */
      1px 1px 0 #000,   /* Sağ alt siyah kenar */
      -1px -1px 0 #000, /* Daha kalın dış siyah kenar */
      1px -1px 0 #000,  
      -1px 1px 0 #000,  
      0px 2px 0 #000; /* Hafif gölge */
  }
  
  /* Ana Konteyner */
  .ags_clan_member_content {
      overflow-y: scroll;
      margin-top: 145px;
      width: 490px;
      margin-left: 41px;
      height: 106px;
  }
  .ags_clan_member_content::-webkit-scrollbar {
      width: 10px;
      margin-right: -5px;
  }
  
  .ags_clan_member_content::-webkit-scrollbar-track {
      background: rgb(0 0 0) /*rgba(0, 0, 0, 0.5)*/;
      border-radius: 5px;
      margin: 15px 0;
      margin-top: 16px;
      margin-bottom: 11px;
  }
  
  .ags_clan_member_content::-webkit-scrollbar-thumb {
      background: url('../new_system/scroll.png') no-repeat center center;
      background-size: cover;
      border: 2px solid #000;
      border-radius: 0px;
  }
  
  /* Tablo */
  .ags_clan_member_table {
      width: 98%; /* Tablonun genişliği */
  
  }
  
  /* Hücreler */
  .ags_clan_member_table td {
      padding: 0px 8px; /* Hücre içi boşluk (üst/alt, sağ/sol) */
      font-size: 9px; /* Yazı boyutunu küçült */
      color: #DDD5CC; /* Yazı rengi */
      text-align: center; /* Yazıyı sola hizala */
      border-bottom: 2px dashed #ff1c1c00 !important;
  }
  table td {
      border-bottom: 2px dashed #ff1c1c00 !important;
  }
  
  /* Başlık Satırları */
  .ags_clan_member_table th {
      padding: 6px 10px; /* Başlık hücre iç boşlukları */
      font-size: 13px; /* Başlık yazı boyutu */
      color: #FFD700; /* Sarı başlık yazı rengi */
      background-color: rgba(0, 0, 0, 0.6); /* Şeffaf siyah arka plan */
      border-bottom: 1px solid #333; /* Alt çizgi */
      text-align: left;
     
  }
  .clan_member{
      position: relative; top: 2px; height: 22px;
  
  }
  .ags_clan_member_table td:hover::before {
      content: ''; /* Hover sırasında bir resim eklemek için */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('../new_system/clan_hover.png') no-repeat center center; /* Hover resmi */
      background-size: cover; /* Resmin boyutunu ayarlar */
      z-index: -1; /* Resmi yazıların altına yerleştirir */
      opacity: 0.5; /* Şeffaflık ayarı */
  }
  
  
  .clan_scroll_up {
    width: 16px;
    height: 16px;
    background-image: url('../new_system/up_button.png');
    background-size: auto;
    background-position: 0 0;
    border: none;
    outline: none;
    float: right;
    margin-left: 518px;
    margin-top: 146px;
    position: absolute;
    z-index: 5;
  }
  
  .clan_scroll_up:hover {
    background-position: -25px 0;
  }
  
  .clan_scroll_up:active {
    background-position: -50px 0;
  }
  
  .clan_scroll_down {
    width: 16px;
    height: 16px;
    background-image: url('../new_system/down_button.png');
    background-size: auto;
    background-position: 0 0;
    border: none;
    outline: none;
    float: right;
    margin-left: 518px;
    margin-top: -12px;
    position: absolute;
    z-index: 5;
  }
  
  .clan_scroll_down:hover {
    background-position: -25px 0;
  }
  
  .clan_scroll_down:active {
    background-position: -50px 0;
  }
  
  
  /* Alliance */
  #alliance {
  
      background-image: url("../new_system/webp/ags_ally_new_todays.webp");
      position: absolute;
      margin-left: -1px;
      margin-top: 23px;
      width: 577px;
      height: 512px;
      background-repeat: no-repeat;
      z-index: 1;
  }
  
  
  .ags-Knightage-button {
    position: absolute;
    width: 81px;
    height: 29px;
    background: url('../new_system/Knightage.png') -1px -1px no-repeat;
    background-size: 247px 30px; /* Görsel boyutuna göre ölçeklendirme */
  
  }
  
  .ags-Knightage-button:hover {
    background-position: -83px -1px; /* Hover durumunda ikinci kare */
  }
  
  .ags-Knightage-button:active {
    background-position: -165px -1px; /* Tıklama durumunda üçüncü kare */
  }
  
  
  .ags-alliance-close-button {
    position: absolute;
    width: 32px;
    height: 32px;
    background: url('../images/char-btn-close2.png') -1px -1px no-repeat;
    background-size: 141px 35px; /* Görsel boyutuna göre ölçeklendirme */
  
  }
  
  .ags-alliance-close-button:hover {
    background-position: -36px -1px; /* Hover durumunda ikinci kare */
  }
  
  .ags-alliance-close-button:active {
    background-position: -71px -1px; /* Tıklama durumunda üçüncü kare */
  }
  
  
  
  .char_img {
      width: 29px;
      height: 29px;
      background-image: url('../new_system/h_portu.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0 0;
      cursor: pointer;
      border: none;
      outline: none;
      position: relative;
  }
  
  .glass-effect {
      position: absolute;
      top: 114.4px;
      left: 42px;
      width: 63px;
      height: 50px;
      background: url('../new_system/ags_gloss.png') no-repeat center;
      background-size: cover;
      pointer-events: none;
      }
  
      .ags_ally_container {
      display: flex;
      gap: 0px;
      width: 472px;
      top: 120px;
      position: relative;
      left: 39px;
  }
  
      .ags_ally_box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 118px; /* Kutu genişliği */
        height: 137px; /* Kutu yüksekliği */
        color: #B9BAB8; /* Yazı rengi */
        text-align: center; /* Başlık ortalanacak */
        border: none; /* Kenarlık yok */
        background: transparent; /* Şeffaf arka plan */
        font-size: 9px;
        transition: background-color 0.3s ease; /* Hover geçiş efekti */
      }
  
      .ags_ally_box-header {
        font-weight: bold; /* Başlık kalın yazı */
        text-align: center; /* Başlık ortalanmış */
        color: #C1EE11; /* Sarı renk */
        font-size: 11px; /* Yazı boyutu */
        text-shadow:
        -1px -1px 0 #000, /* Sol üst siyah kenar */
        1px -1px 0 #000,  /* Sağ üst siyah kenar */
        -1px 1px 0 #000,  /* Sol alt siyah kenar */
        1px 1px 0 #000,   /* Sağ alt siyah kenar */
        -1px -1px 0 #000, /* Daha kalın dış siyah kenar */
        1px -1px 0 #000,  
        -1px 1px 0 #000,  
        0px 2px 0 #000; /* Hafif gölge */
        margin-top: 5px;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        margin-bottom: 26px;
      }
  
      .ags_ally_box-row {
        display: flex;
        justify-content: space-between; /* Sütunlar arasına boşluk bırak */
        margin-top: 12px; /* Satır alt boşluk */
        margin-left : 1px;
        width: 110px;
        
      }
  
      .ags_ally_left {
        width: 39px;
      }
  
      .ags_ally_right {
        text-align: center; /* Sağ sütun ortalanır */
        flex: 1;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
      }
  
      .ags_ally_box:hover {
    background: #16996026; /* Şeffaf renk hover efekti */
  }
  
  
  /* Friend System*/
  #friend {
      background-image: url("../new_system/webp/ags-friends-pages.webp");
      position: absolute;
      margin-left: -1px;
      margin-top: 23px;
      width: 339px;
      height: 515px;
      background-repeat: no-repeat;
      z-index: 1;
  }
  
    
  .ags_friend_info_on {
      left: 35px;
      position: absolute;
      top: 390px;
      width: 18px;
      height: 18px;
      background-image: url('../new_system/f_online.png');
      background-size: cover;  
      }
      .ags_friend_info_on_text {
      left: 54px;
      position: absolute;
      top: 390px;
      text-align: center;
      align-content: center;
      font-size: 10px;
      height: 18px;
      font-weight: 900;
      color: #8d8a4e;
      text-shadow: 1px 1px 1px rgb(1 1 1);
      }
  
      .ags_friend_info_pton {
      left: 119px;
      position: absolute;
      top: 390px;
      width: 18px;
      height: 18px;
      background-image: url('../new_system/f_party.png');
      background-size: cover;  
      }
      .ags_friend_info_pton_text {
      left: 139px;
      position: absolute;
      top: 390px;
      text-align: center;
      align-content: center;
      font-size: 10px;
      height: 18px;
      font-weight: 900;
      color: #8d8a4e;
      text-shadow: 1px 1px 1px rgb(1 1 1);
      }
  
  
      .ags_friend_info_off {
      left: 207px;
      position: absolute;
      top: 390px;
      width: 18px;
      height: 18px;
      background-image: url('../new_system/f_offline.png');
      background-size: cover;  
      }
      .ags_friend_info_off_text {
      left: 228px;
      position: absolute;
      top: 390px;
      text-align: center;
      align-content: center;
      font-size: 10px;
      height: 18px;
      font-weight: 900;
      color: #8d8a4e;
      text-shadow: 1px 1px 1px rgb(1 1 1);
      }
  
  
      .ags_friend_container {
      display: flex;
      gap: 0px;
      width: 246px;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: stretch; 
  }
  
      .ags_friend_box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 245px;
        height: 22px;
        color: #8d8a76; /* Yazı rengi oflinesi : 134949 */
        border: none; /* Kenarlık yok */
        background: transparent; /* Şeffaf arka plan */
        font-size: 12px;
        transition: background-color 0.3s ease; /* Hover geçiş efekti */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        align-items: flex-start;
      }
  
      .ags_friend_box-row {
          height: 22px;
          display: flex;
          align-items: center;
      }
  
      .ags_friend_status_on {
      left: 30px;
      position: relative;
      width: 18px;
      height: 18px;
      background-image: url('../new_system/f_online.png');
      background-size: cover;  
      }
      .ags_friend_status_off {
      left: 30px;
      position: relative;
      width: 18px;
      height: 18px;
      background-image: url('../new_system/f_offline.png');
      background-size: cover;  
      }
      .ags_friend_status_pton {
      background-image: url('../new_system/f_party.png');
      left: 30px;
      position: relative;
      width: 18px;
      height: 18px;
      background-size: cover;  
      }
  
      .ags_friend_right {
        text-align: center; /* Sağ sütun ortalanır */
        flex: 1;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        left: 32px;
        font-weight: 600;
        position: relative;
      }
  
      .ags_friend_box:hover {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('../new_system/f_hover.png') no-repeat center center; /* Hover resmi */
   
   
  }
  
  .ags_friend_content {
      overflow-y: scroll;
      height: 241px;
      top: 140px;
      left: 38px;
      width: 266px;
      position: relative;
  }
  .ags_friend_content::-webkit-scrollbar {
      width: 10px;
      margin-right: -5px;
  }
  
  .ags_friend_content::-webkit-scrollbar-track {
      background: rgb(0 0 0) /*rgba(0, 0, 0, 0.5)*/;
      border-radius: 5px;
      margin: 15px 0;
      margin-top: 16px;
      margin-bottom: 11px;
  }
  
  .ags_friend_content::-webkit-scrollbar-thumb {
      background: url('../new_system/scroll.png') no-repeat center center;
      background-size: cover;
      border: 2px solid #000;
      border-radius: 0px;
  }
  
  
  .friend_scroll_up {
    width: 16px;
    height: 16px;
    background-image: url('../new_system/up_button.png');
    background-size: auto;
    background-position: 0 0;
    border: none;
    outline: none;
    float: left;
    position: absolute;
    right: 32px;
    top: 140px;
    z-index: 5;
  }
  
  .friend_scroll_up:hover {
    background-position: -25px 0;
  }
  
  .friend_scroll_up:active {
    background-position: -50px 0;
  }
  
  .friend_scroll_down {
    width: 16px;
    height: 16px;
    background-image: url('../new_system/down_button.png');
    background-size: auto;
      background-position: 0 0;
      border: none;
      outline: none;
      float: left;
      position: absolute;
      top: 370px;
      z-index: 5;
      right: 32px;
  }
  
  .friend_scroll_down:hover {
    background-position: -25px 0;
  }
  
  .friend_scroll_down:active {
    background-position: -50px 0;
  }
  
  
  #char-page {
      background-image: url("../new_system/webp/char-page_hypeko.webp") !important;
  }
  
  /* Başarım Sistemi */
  #achieve {
      background-image: url("../new_system/webp/achieve.webp");
      position: absolute;
      margin-left: -1px;
      margin-top: 23px;
      width: 577px;
      height: 512px;
      background-repeat: no-repeat;
      z-index: 1;
  }

  
 .ags_loading_system {
    height: 960px;
    width: 1007px;
    background-color: rgb(38 28 24);
    position: absolute;
    z-index: 99999;
  }
  .ags_bg_intro {
    background-image: url("../new_system/webp/bg_load.webp");
    background-position: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-size: cover;
    height: 749px;
    width: 1007px;
  }
    

    .loading-text {
        color: white;
    font-size: 14px;
    position: relative;
    z-index: 2;
    top: 719px;
    left: 430px;
    }

    .progress-bar {
        width: 80%;
    max-width: 300px;
    height: 19px;
    background: rgb(0, 0, 0);
    border: 2px solid rgb(0, 0, 0);
    position: relative;
    top: 700px;
    left: 340px;
    }

    .progress-bar-fill {
        width: 0;
        height: 100%;
        background: linear-gradient(360deg, #ff2821, #ff5531);
    }

    @keyframes loading {
        0% {
            width: 0;
        }
        100% {
            width: 100%;
        }
    }

    .hidden {
        display: none;
    }