#karakterustu {
    margin-top: -5px
}

@media only screen and (max-width: 600px) {
    #karakterustu {
        margin-top: 0;
        top: unset
    }
    #envanterkarakterustu {
        margin-top: 14px;
    }
}

span.rare {
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(../image/ingame/itemplus.png) left top;
    -webkit-animation: silkroadplay 1.8s steps(32) infinite;
    -moz-animation: silkroadplay 1.8s steps(32) infinite;
    -ms-animation: silkroadplay 1.8s steps(32) infinite;
    -o-animation: silkroadplay 1.8s steps(32) infinite;
    animation: silkroadplay 1.8s steps(32) infinite;
    cursor: pointer
}

@-webkit-keyframes silkroadplay {
    100% {
        background-position: -1024px
    }
}

@-moz-keyframes silkroadplay {
    100% {
        background-position: -1024px
    }
}

@-ms-keyframes silkroadplay {
    100% {
        background-position: -1024px
    }
}

@-o-keyframes silkroadplay {
    100% {
        background-position: -1024px
    }
}

@keyframes silkroadplay {
    100% {
        background-position: -1024px
    }
}

#iteminfo {
    position: relative;
}

    #iteminfo #iteminfotext {
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        margin-left: 12px;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        z-index: 1000;
        width: 260px;
        padding: 10px 12px;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 12px;
        line-height: 1.5;
        color: #fff;
        text-shadow: 1px 1px 2px #000;
        pointer-events: none;
        white-space: normal;
    }

    #iteminfo:hover #iteminfotext {
        visibility: visible;
        opacity: 1;
    }

    /* Tooltip oku (sol tarafta) */
    #iteminfo #iteminfotext::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -6px;
        transform: translateY(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: transparent rgba(0, 0, 0, 0.85) transparent transparent;
    }

@media (max-width: 768px) {
    #iteminfo #iteminfotext {
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        margin-left: 0;
        width: 220px;
        margin-top: 12px;
        width: 90vw; /* Mobilde daha geniş alan */
        max-width: 220px;
    }

        #iteminfo #iteminfotext::before {
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent;
            border-width: 6px;
        }
}


#dpsinfo {
    position: relative
}

    #dpsinfo #dpsinfotext {
        margin-top: 32px;
        margin-left: 35%;
        visibility: hidden;
        position: absolute;
        z-index: 10000;
        max-width: 220px;
        min-width: 220px;
        padding: 8px !important;
        background: url(../image/ingame/equipment/com_bg_tile_tl.PNG) no-repeat !important;
        background-size: 100% 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 1px !important;
        font-family: Tahoma,Geneva,sans-serif;
        font-size: 12px !important;
        line-height: 15px;
        font-weight: lighter;
        font-style: normal;
        text-shadow: 1px 1px #000;
        color: #fff
    }

    #dpsinfo:hover #dpsinfotext {
        visibility: visible;
        opacity: 1
    }

.karakterresmi {
    position: absolute;
    margin-left: 234px;
    top: 75px;
    width: 100px
}
.silkroadpagebtn {
    height: 25px;
    background: url(../image/ingame/WebStall/buton.png) no-repeat;
    /* background-size: 10px 10px; */
    position: absolute;
    margin-top: 41px;
    margin-left: 12.5px;
    width: 59px;
    color: #fff;
    font-size: 13px;
    padding-top: 5px;
    /* padding-left: 9px; */
    text-align: center;
    cursor: pointer;
}

    .silkroadpagebtn:hover {
        background: url(../image/ingame/WebStall/btnhover.png) no-repeat;
    }
.silkroadbtnactive {
    background: url(../image/ingame/WebStall/btnhover.png) no-repeat;
}
@media only screen and (max-width: 600px) {
    .karakterresmi {
        position: absolute;
        margin-left: 234px;
        top: 100px;
        width: 100px
    }
}

.silkroadkarakter {
    background-image: url(../image/ingame/KarakterUstu/karakterback.png);
    min-width: 203px;
    max-width: 203px;
    min-height: 408px;
    max-height: 408px;
    margin: 0 auto
}

.silkroadavatar {
    background-image: url(../image/ingame/KarakterUstu/avatarback.png);
    min-width: 203px;
    max-width: 203px;
    min-height: 408px;
    max-height: 408px;
    margin: 0 auto
}
.envantermoney {
    position: absolute;
    color: #fff;
    margin-top: 373px;
    margin-bottom: -16px;
    margin-left: 52px;
    font-size: 12px;
}
.karakterresmieu {
    position: absolute;
    margin-left: 244px;
    margin-top: 67px;
    width: 81px;
    top: unset;
}
.karakteritem, .karakteravatar {
    width: 32px;
    max-width: 32px;
    min-width: 32px;
    max-height: 32px;
    min-height: 32px;
    display: inherit;
    margin-right: 3.3px;
    margin-top: -1.3px;
    position: relative
}
.itemlist {
    width: 150px;
    margin-top: 77px;
    margin-left: 30px;
    display: inline-table;
}

.item {
    width: 32px;
    max-width: 32px;
    min-width: 32px;
    max-height: 32px;
    min-height: 32px;
    display: inherit;
    margin-right: 3.3px;
    margin-top: -1.3px;
}

    .item img {
        width: 32px;
        height: 32px;
        cursor: pointer;
        vertical-align: unset;
    }
.karakteritemliste .leftweapon {
    top: 53px;
    left: 24px;
    position: relative
}

.karakteritemliste .rightshield {
    top: 23px;
    left: 146px;
    position: relative
}

.karakteritemliste .lefthead {
    top: 66.7px;
    left: 17px;
    position: relative
}

.karakteritemliste .rightshoulder {
    top: 35.7px;
    left: 154px;
    position: relative
}

.karakteritemliste .leftchest {
    top: 49px;
    left: 17px;
    position: relative
}

.karakteritemliste .righthands {
    top: 17px;
    left: 154px;
    position: relative
}

.karakteritemliste .leftlegs {
    top: 29px;
    left: 17px;
    position: relative
}

.karakteritemliste .rightfoot {
    top: -2px;
    left: 154px;
    position: relative
}

.karakteritemliste .leftearring {
    top: 11.2px;
    left: 17px;
    position: relative
}

.karakteritemliste .rightnecklace {
    top: -19.6px;
    left: 154px;
    position: relative
}

.karakteritemliste .leftring {
    top: -7px;
    left: 17px;
    position: relative
}

.karakteritemliste .rightring {
    top: -38px;
    left: 154px;
    position: relative
}

.karakteravatarliste .avatarhead {
    top: 129px;
    left: 17px;
    position: relative
}

.karakteravatarliste .avatarflag {
    top: 76px;
    left: 154px;
    position: relative
}

.karakteravatarliste .avatarbody {
    top: 140px;
    left: 17px;
    position: relative
}

.karakteravatarliste .avatarback {
    top: 66px;
    left: 154px;
    position: relative
}

.karakteravatarliste .avatardevil {
    top: 92px;
    left: 17px;
    position: relative
}

.envanterkarakterustuliste {
    position: absolute;
}

    .envanterkarakterustuliste .leftweapon {
        top: -327px;
        left: 208px
    }

    .envanterkarakterustuliste .rightshield {
        top: -360px;
        left: 330px;
    }

    .envanterkarakterustuliste .lefthead {
        top: -285px;
        left: 201px;
    }

    .envanterkarakterustuliste .rightshoulder {
        top: -317px;
        left: 337px;
    }

    .envanterkarakterustuliste .leftchest {
        top: -306px;
        left: 201px;
    }

    .envanterkarakterustuliste .righthands {
        top: -338px;
        left: 337px;
    }

    .envanterkarakterustuliste .leftlegs {
        top: -327px;
        left: 201px;
    }

    .envanterkarakterustuliste .rightfoot {
        top: -359px;
        left: 337px;
    }

    .envanterkarakterustuliste .leftearring {
        top: -348px;
        left: 201px;
    }

    .envanterkarakterustuliste .rightnecklace {
        top: -379px;
        left: 337px;
    }

    .envanterkarakterustuliste .leftring {
        top: -370px;
        left: 201px;
    }

    .envanterkarakterustuliste .rightring {
        top: -401px;
        left: 337px;
    }
.karakteritem img {
    cursor: pointer
}

.karakterresmi2 {
    position: absolute;
    margin-left: 53px;
    margin-top: 70px;
    width: 98px;
    top: unset
}

.avatarbuton {
    height: 38px;
    background: url(../image/ingame/KarakterUstu/avatarbuton.png) no-repeat;
    position: absolute;
    margin-top: 344px;
    margin-left: 12.5px;
    width: 39px;
    cursor: pointer
}

    .avatarbuton:hover {
        background: url(../image/ingame/KarakterUstu/avatarbutonhover.png) no-repeat
    }

    .avatarbuton:active {
        background: url(../image/ingame/KarakterUstu/avatarbutonactive.png) no-repeat
    }

.karakterbuton {
    height: 38px;
    background: url(../image/ingame/KarakterUstu/karakterbuton.png) no-repeat;
    position: absolute;
    margin-top: 344px;
    margin-left: 12.5px;
    width: 39px;
    cursor: pointer
}

    .karakterbuton:hover {
        background: url(../image/ingame/KarakterUstu/karakterbutonhover.png) no-repeat
    }

    .karakterbuton:active {
        background: url(../image/ingame/KarakterUstu/karakterbutonactive.png) no-repeat
    }

.karakteritemliste {
    position: absolute
}

.karakteravatarliste {
    position: absolute
}

.karakterenvanter {
    background-image: url(../image/ingame/Envanter/envanterarkaplan.png);
    min-width: 385px;
    max-width: 385px;
    min-height: 409px;
    max-height: 409px;
    margin: 0 auto
}

.karakterenvanteravatar {
    background-image: url(../image/ingame/Envanter/envanteravatararkaplan.png);
    min-width: 385px;
    max-width: 385px;
    min-height: 409px;
    max-height: 409px;
    margin: 0 auto
}

.cosinventory {
    background-image: url("../image/ingame/Banka/Cosinv.png");
    min-width: 354px;
    max-width: 354px;
    min-height: 387px;
    margin: 1px auto 0;
}

.cositemlist {
    width: 260px;
    margin-top: 120px;
    margin-left: 51px;
    display: inline-table;
}

.cositem {
    width: 32px;
    max-width: 32px;
    min-width: 32px;
    max-height: 32px;
    min-height: 32px;
    margin-right: 4px;
    display: inherit;
    margin-top: 4px;
}

    .cositem img {
        width: 32px;
        height: 32px;
    }

.bankainventory {
    background-image: url("../image/ingame/Banka/bankabackground.png");
    min-width: 254px;
    max-width: 254px;
    min-height: 317px;
    margin: 1px auto 0;
}

.bankaitemlist {
    width: 240px;
    margin-top: 67px;
    margin-left: 20px;
    display: inline-table;
}

.bankaitem {
    width: 32px;
    max-width: 32px;
    min-width: 32px;
    max-height: 32px;
    min-height: 32px;
    margin-right: 4px;
    display: inherit;
    margin-top: 4px;
}

    .bankaitem img {
        width: 32px;
        height: 32px;
    }

.bankapagebtn {
    height: 17px;
    background: url("../image/ingame/Banka/btn1.png") no-repeat;
    /* background-size: 10px 10px; */
    position: absolute;
    margin-top: 254px;
    margin-left: 102.5px;
    width: 17px;
    color: #fff;
    font-size: 13px;
    padding-top: 5px;
    /* padding-left: 9px; */
    text-align: center;
    cursor: pointer;
}

.bankapagebtn2 {
    height: 17px;
    background: url(../image/ingame/Banka/btn2.png) no-repeat;
    /* background-size: 10px 10px; */
    position: absolute;
    margin-top: 254px;
    margin-left: 135.5px;
    width: 17px;
    color: #fff;
    font-size: 13px;
    padding-top: 5px;
    /* padding-left: 9px; */
    text-align: center;
    cursor: pointer;
}

.bankamoney {
    position: absolute;
    color: #fff;
    margin-top: 287px;
    margin-left: 103px;
    font-size: 12px;
}

.bankapageno {
    position: absolute;
    color: #fff;
    margin-top: 253px;
    margin-left: 124px;
    font-size: 12px;
}