:root {
    ---color-text-1: rgba(255, 255, 255, 0.8);
    ---color-text-2: rgba(255, 255, 255, 0.8);
    ---color-text-3: #ffc107;
    ---color-bg-1: #0d1421;
    ---color-bg-2: #24283b;

    /*ProgressBar Color*/
    --progress-low: #ffc107;
    --progress-hight: #28a745;
    --progress-warning: #ff0707;

    /*k:36 yeni tanımlamalar*/
    --background-color: rgb(255, 255, 255);
    --brand-color: #f7931a;
    --secondary-color: #afafaf;
    --logo-text-color: #1d284c;

    --border-color: rgb(239 242 245 / 1);
    --head-text-color: rgb(61, 77, 99);
    --head-text-color-solid: rgb(100 116 139/1);
    --menu-text-color: #334155;
    --menu-text-color-solid: rgb(100 116 139/1);

    --chart-text-color: #f7931a;
    --text-color: rgb(15 23 42/1);
    --white-color: #070707;
    --text-color-solid: #647489;
    --text-color-solid-more-dark: #0f1012;
    --coin-color-text: rgb(51 65 85/1);
    --coin-solid-color-text: rgb(81, 89, 108);
    --detailpage-solid-color: #3a4758;
    --shortcoinname-color: #9ba1b8;

    --button-text-color: #ffffff;
    --button-solid-color: rgb(228, 233, 238);
    --outline-button-color: #f7941a2d;
    --outline-button-text-color: #f7941a;
    --input-background-color: rgb(241 245 249/1);
    --modal-background-color: rgb(255, 255, 255);
    --box-background-color: rgb(249, 249, 249);
    --info-box-background-color: rgb(249, 249, 249);
    --reviewcard-background-color: rgb(249, 249, 249);
    --showcasecard-background-color: rgb(249, 249, 249);
    --showcasecard-hover-background-color: #f7941a38;
    --alert-background-color: rgb(255, 255, 255);

    --box-border-color: rgb(237, 237, 237);

    --hover-color-text: rgb(243, 237, 219);
}

.dark-theme {
    ---color-text-1: rgba(255, 255, 255, 0.8);
    ---color-text-2: rgba(255, 255, 255, 0.8);
    ---color-text-3: #ffc107;
    ---color-bg-1: #0d1421;
    ---color-bg-2: #24283b;

    /*k:36 yeni tanımlamalar*/
    --background-color: /* #0e141a;*/ #0c1218;
    --brand-color: #f7931a;
    --secondary-color: #d1d1d1;
    --border-color: #212d3b;
    --head-text-color: rgb(223, 229, 236, 1);
    --head-text-color-solid: rgb(158 176 199 / 1);
    --menu-text-color-solid: rgb(158 176 199 / 1);
    --menu-text-color: rgb(223 229 236/1);
    --logo-text-color: #ffffff;
    --text-color: rgb(223 229 236 /1);
    --white-color: #fff;
    --text-color-solid: rgb(158 176 199/1);
    --text-color-solid-more-dark: rgb(154 157 161/1);
    --coin-color-text: rgb(190 203 218 /1);
    --coin-solid-color-text: rgb(151, 161, 175);
    --shortcoinname-color: #485461;

    --button-text-color: #5f390d;
    --button-solid-color: rgb(49, 59, 70);
    --outline-button-color: #f7941a2d;
    --input-background-color: rgb(27 35 45/1);
    --modal-background-color: rgb(27 35 45/1);
    --box-background-color: #0f151c;
    --info-box-background-color: #212d3b;
    --reviewcard-background-color: /* #131e29; */ #0f151c;
    --showcasecard-background-color: /* #131e29; */ #0f151c;
    --showcasecard-hover-background-color: #f7941a38;
    --alert-background-color: #15202b;

    --box-border-color: #1b242f;

    --hover-color-text: #202933;
}

* {
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    border: 0 solid rgb(229, 231, 235);
}
body {
    background-color: var(--background-color);
}
body a {
    color: var(--secondary-color);
    /* text-decoration: none; */
}

a:hover {
    color: var(--brand-color) !important;
    /* text-decoration: underline; */
}

.minh-64 {
    min-height: 64px;
}

.minh-24 {
    min-height: 24px;
}

.minw-100 {
    min-width: 100px;
}

.minh-178 {
    min-height: 178px;
}

#toggle-wrapper a {
    display: inline;
}

.section-stats {
    min-height: 200px;
    display: flex;
    align-items: center;
}

/*Backtotop Roket Css*/
#backtotop-btn {
    visibility: hidden;
    position: fixed;
    cursor: pointer;
    right: 16px;
    bottom: 16px;
    user-select: none;
    transition: 1s;
}

.rocket {
    display: block;
    font-size: 50px;
    transform: rotate(315deg);
}

.coinCustomText a {
    color: var(--brand-color) !important;
    font-weight: bold;
}

.wallet-verification-steps > li {
    margin-top: 8px;
    margin-bottom: 8px;
}

.complete_payment_swal{
    width: 50% !important;
}
.glossary > a:hover{
    background-color: var(--hover-color-text);
    border-radius: 8px;
}


.coinCustomText a:hover {
    text-decoration: underline;
}

.coinDangerCustomText a {
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    font-weight: bold;
}

.coinDangerCustomText a:hover {
    text-decoration: underline;
}

.arrow-top {
    display: block;
    width: 64px;
    height: 64px;
    pointer-events: none;
    background-color: #0fb;
    border-radius: 50%;
}

.slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-out-top {
    -webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
        both;
    animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.scale-out-center {
    -webkit-animation: scale-out-center 0.5s
        cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

@keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

#navigationMenu {
    border-bottom: 1px solid var(--border-color);
    height: 65px;
}
.info-menu {
    border-bottom: 1px solid var(--border-color);
    height: 52px;
}

.logo-img {
    width: 2.5rem;
}
.mobileLogo {
    width: 2.5rem !important;
}

.logo-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--logo-text-color);
}

.logo-test-text {
    font-size: 0.6rem;
    font-weight: 300;
    color: #b3b3b3;
}
.inputContainer {
    /* width: 32%; */
    align-items: center;
    display: flex;
}
.search-box {
    /* height: 100%; */
    width: 100%;
    position: relative;
}
#searchBoxOpenCardClose:hover {
    color: var(--brand-color);
    cursor: pointer;
}
#search_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 8px;
    font-size: 1rem;
    padding-left: 35px;
}
#search_space_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    padding-left: 55px;
}
#search_space_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}

#ask_search_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    padding-left: 55px;
}
#ask_search_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}
#search_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 0.75rem;
    font-weight: 500;
}

.searchIcon {
    position: absolute;
    top: 35%;
    left: 13px;
    color: var(--text-color-solid);
    font-size: 0.85rem;
}

.space_searchIcon {
    position: absolute;
    top: 35%;
    left: 25px;
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.ask_search_inputIcon {
    position: absolute;
    top: 35%;
    left: 25px;
    color: var(--text-color-solid);
    font-size: 1.2rem;
}

.searchBoxOpenCard {
    position: absolute;
    right: 10% !important;
    top: 7%;
    width: 500px;
    padding: 13px 25px 0px;
    display: flex;
    align-items: center;
    background-color: var(--input-background-color);
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    z-index: 99999;
    opacity: 0; /* Başlangıçta tamamen görünmez */
    visibility: hidden; /* Görünmezliği garantilemek için */
    transition: right 0.2s ease, opacity 0.2s ease; /* Animasyon süresi ve kolaylaştırma */
}

.searchBoxOpenCard.show {
    right: 0px; /* Kutuyu ekranın içine kaydır */
    opacity: 1; /* Görünürlüğü geri getir */
    visibility: visible; /* Artık görünür yap */
}

.searchBoxOpenCardDetail {
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    background-color: var(--input-background-color);
    border-radius: 0px 0px 12px 12px;
    border-top: none; /* Üst sınır burada da yok */
}
.searchBoxOpenCardDetail hr {
    background-color: var(--brand-color);
    height: 1px;
    border: none;
}

.list-box {
    margin: 0px;
    padding: 0px 21px 24px;
    width: 99%;
    overflow: hidden auto;
    max-height: 80vh;
    display: grid;
    grid-template-rows: min-content;
    grid-auto-columns: 100%;
    row-gap: 16px;
}

.searchBoxOpenCardInput {
    color: var(--text-color);
    font-weight: 600;
    margin-left: 6px;
    margin-right: auto;
    width: 100% !important;
    height: 40px;
    background: none;
    text-overflow: ellipsis;
    transition: border-color 0.4s;
    border: none;
    outline: none;
    font-size: 1.1rem;
    padding: 0px !important;
}
.searchBoxOpenCardInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

#cryptoDiv {
    display: none;
}
#exchangeDiv {
    display: none;
}

.exchangeAboutBox {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    max-height: 780; /* Başlangıçta yüksekliği sınırlıyoruz, ihtiyaç duyarsanız değeri değiştirebilirsiniz */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* Animasyonlu geçiş */
}

.exchangeAboutBox.expanded {
    max-height: 10000em; /* İçerik açıldığında sınırsız yüksekliğe sahip olur */
}

.short-content {
    display: inline;
}

.full-content {
    display: none;
}

.mobileCloseIcon:hover {
    color: var(--brand-color);
    cursor: pointer;
}
@media only screen and (max-width: 1200px) {
    .searchBoxOpenCard {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 100000; /* Z-index değerini artırdık */
        background-color: var(--input-background-color);
        opacity: 1;
        visibility: hidden; /* Görünmezliği garantilemek için */
        padding: 20px;
        border-radius: 0; /* Tam ekran görünüm için köşeleri yuvarlatmayı kaldır */
        flex-direction: column;
        transition: right 0.8s ease, opacity 0.8s ease; /* Animasyon süresi ve kolaylaştırma */
    }

    .searchBoxOpenCardInput {
        font-size: 1.1rem;
        padding: 10px;
    }

    .list-box {
        max-height: 80vh;
        padding: 0px;
        overflow-y: auto;
    }

    .searchBoxOpenCardDetail {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--input-background-color);
        padding: 0;
        border-radius: 0;
        width: 100%;
    }
}
@media only screen and (max-width: 768px) {
    .counter {
        font-size: 2rem !important;
    }
}

.dataTableSearch {
    display: none !important;
    width: 100%;
    position: relative;
}
#coinSearch {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 15px;
    font-size: 1rem;
    padding-left: 50px;
}
#coinSearch::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.search-Icon {
    position: absolute;
    top: 29%;
    left: 29px;
    color: var(--text-color-solid);
    font-size: 1.5rem;
}

.form-control:focus {
    border-color: none !important;
    box-shadow: none !important;
}
/* Checkbox Gizleme */
.theme-checkbox {
    opacity: 0;
    position: absolute;
}

/* Toggle Label */
.theme-checkbox-label {
    background-color: var(--border-color);
    width: 65px;
    height: 30px;
    border-radius: 50px;
    position: relative;
    padding: 7px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease-in-out;
}

/* Iconlar */
.fa-moon,
.fa-sun {
    color: var(--brand-color);
}

/* Top */
.theme-checkbox-label .ball {
    background-color: var(--text-color);
    width: 26px;
    height: 26px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
}

/* Checkbox Checked Durumunda Topu Kaydır */
.theme-checkbox:checked + .theme-checkbox-label .ball {
    transform: translateX(35px);
}

/* Mobil İçin Özel Düzeltmeler */
@media only screen and (max-width: 768px) {
    .theme-checkbox-label {
        width: 60px; /* Küçük ekranlarda genişliği azalt */
        height: 28px; /* Küçük ekranlarda yüksekliği azalt */
    }
    .theme-checkbox-label .ball {
        width: 24px; /* Küçük ekranlar için top boyutunu ayarla */
        height: 24px;
        top: 2px;
        left: 2px;
    }
    .theme-checkbox:checked + .theme-checkbox-label .ball {
        transform: translateX(32px); /* Mobilde uygun mesafeye kaydır */
    }
}

.mobileSocialBar {
    border-top: 1px solid var(--border-color);
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}
.mobileSocialBar i {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: var(--text-color-solid);
    margin-right: 20px;
}
.mobileSocialBar i:hover {
    color: var(--brand-color);
}

.textXSmall {
    font-size: 0.75rem;
}
.textSmall {
    font-size: 0.875rem;
}

.text18Px {
    font-size: 1.125rem;
}
.textMd {
    font-size: 1.25rem;
}
.textXl {
    font-size: 2rem;
    line-height: 1.2;
}
.textX-L {
    font-size: 2.5rem;
    line-height: 1.2;
}

.textXXL {
    font-size: 3rem;
}
.text64px {
    font-size: 4rem;
}

.font-300 {
    font-weight: 300 !important;
}
.font-400 {
    font-weight: 400 !important;
}
.font-500 {
    font-weight: 500 !important;
}
.font-700 {
    font-weight: 700 !important;
}
.font-800 {
    font-weight: 800 !important;
}

.counter {
    transition: none !important;
    animation: none !important;
}

.coinTextPrice {
    font-size: 0.875rem;
    font-weight: 500;
}

.coinColor {
    color: var(--coin-color-text);
}

.baseWhiteColor {
    color: var(--text-color);
}

.cardTitleText {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}
.cardTitleMoreText {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
    white-space: nowrap;
}
.coinSmallText {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
}

.DatatableCoinText {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
}
.DatatableCoinSmallText {
    padding-left: 5px !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
}

.CardLink a:hover {
    border-radius: 5px;
    background-color: var(--hover-color-text);
    cursor: pointer;
}

.solidTextColorMoreDark {
    color: var(--text-color-solid-more-dark);
}

.detailpageTextColor {
    color: var(--detailpage-solid-color);
}

.shortCoinNameColor {
    color: var(--shortcoinname-color);
}

.coinCard {
    background-color: var(--reviewcard-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    max-width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    /*height: 225px;*/
}

.coinCard .card-body {
    flex-grow: 1; /* İçeriğin alanı doldurmasını sağlar */
    display: flex;
    flex-direction: column;
}

.coinCardContent {
    flex-grow: 1; /* İçerik alanını genişletir ve footer'ı en alta iter */
    font-weight: 500;
}

.coinCardFooter {
    margin-top: auto; /* Footer her zaman en altta kalır */
}

.coinCardColorRed {
    color: #eb0102;
}
.coinCardColorOrange {
    color: #fc6c03;
}
.coinCardColorYellow {
    color: #bdb322;
}
.coinCardColorGreen {
    color: #00b200;
}

.cryptoDetailCoinScore {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-color);
}
.cryptoDetailCoinScoreMobile {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-color);
    align-content: end;
}

.about-container {
    max-height: 330px;
    border: 1px solid var(--box-border-color);
    background-color: var(--box-background-color);
    border-radius: 5px;
    padding: 20px;
    overflow: hidden;
}

.about_none {
    display: none;
}

.about_block {
    display: block;
}

.ogSpaceContentContainer > p,
.ogSpaceContentContainer > ul > li,
.accordion .accordion-item .accordionContent > p,
.accordion .accordion-item .accordionContent > ul > li,
.about-text {
    color: var(--text-color-solid);
}

.ogSpaceContentContainer > p > a,
.ogSpaceContentContainer > ul > li > a,
#about > div > div.about-container > div > p > u > a,
#about > div > div.about-container > div > p > strong > u > a,
#about > div > div.about-container > div > p > a,
.accordion .accordion-item .accordionContent > p > a,
.accordion .accordion-item .accordionContent > ul > li > a,
#about > div > div.about-container > div > p > strong > a {
    color: var(--text-color) !important;
    text-decoration: underline;
}

.ogSpaceContentContainer > p > a:hover,
.ogSpaceContentContainer > ul > li > a:hover,
#about > div > div.about-container > div > p > u > a:hover,
#about > div > div.about-container > div > p > strong > u > a:hover,
#about > div > div.about-container > div > p > a:hover,
.accordion .accordion-item .accordionContent > p > a:hover,
.accordion .accordion-item .accordionContent > ul > li > a:hover,
#about > div > div.about-container > div > p > strong > a:hover {
    color: var(--brand-color) !important;
}

.aboutHeader {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.ogSpaceContentContainer > h3,
#about > div > div.about-container > div > h3 {
    color: var(--text-color);
    font-weight: 600 !important;
    font-size: 1.25rem;
}

.updateHeader {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 0.5px solid var(--border-color);
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.featuredMobil {
    display: none;
}

.featuredImage{
    width: 50%;
}

@media only screen and (max-width: 991px) {
    .coinCard {
        background-color: var(--reviewcard-background-color);
        border: 1.5px solid var(--box-border-color);
        border-radius: 10px;
        max-width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /*height: 225px;*/
    }

    .coinCard .card-body {
        flex-grow: 1; /* İçeriğin alanı doldurmasını sağlar */
        display: flex;
        flex-direction: column;
    }

    .featuredImage{
        width:25%;
    }
}

@media only screen and (max-width: 1024px) {
    .featuredMobil {
        display: block;
    }
}
.text-justify {
    text-align: justify;
}

/*Login Modal Start*/
.modal-content {
    background-color: var(--box-background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Ortak stiller */
.loginButton,
.signInButton {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-solid);
    padding-bottom: 0.325rem;
    border-bottom: 2px solid var(--border-color); /* Ortak border stili */
    cursor: pointer; /* Ortak cursor stili */
}

/* Hover durumları */
.loginButton:hover,
.signInButton:hover {
    border-bottom: 2px solid var(--hover-color-text); /* Hover durumunda border rengi */
}

/* Aktif sekmenin border rengi */
.loginButton.active,
.signInButton.active {
    color: var(--text-color);
    border-bottom: 2px solid var(--brand-color);
}

/* Tüm tab içerikleri başlangıçta gizli */
.TabsContent .loginContent,
.TabsContent .signInContent {
    display: none;
}

/* Sadece aktif olan içerik görünür olacak */
.TabsContent .loginContent.active,
.TabsContent .signInContent.active {
    display: block;
}

.FormInput {
    height: 50px;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 1rem;
    padding-left: 35px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.FormInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.FormInput:focus {
    border: 2px solid var(--brand-color);
}

.supportUsInput {
    width: 4rem;
    height: 50px;
    font-size: 0.875rem !important;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 1rem;
    padding-left: 10px;
    padding-right: 60px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.supportUsInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.75rem;
    font-weight: 500;
}

.supportUsInput:focus {
    border: 2px solid var(--brand-color);
}

.copy-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border: none;
    cursor: pointer;
    border-radius: 5px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.copy-btn:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filterInput {
    height: 35px;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color) !important;
    padding: 5px;
    font-size: 1rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.filterInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.filterInput:focus {
    border: 2px solid var(--brand-color);
}

.login-icon-email-left {
    position: absolute;
    left: 17px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.login-icon-password-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.login-icon-see-right {
    position: absolute;
    right: 17px;
    top: 24px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}

.register-icon-email-left {
    position: absolute;
    left: 17px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-password-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-referance-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-see-right {
    position: absolute;
    right: 17px;
    top: 24px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
/*Login Modal End*/

.controlPanelMenu {
    background-color: var(--box-background-color) !important;
    border: 1.5px solid var(--box-border-color) !important;
    color: var(--text-color) !important;
    border-radius: 5px;
    width: 100% !important;
}

.controlPanelMenu a {
    color: var(--text-color) !important;
    border-radius: 5px;
    width: 100% !important;
}

.bgVarColor1 {
    background-color: var(---color-bg-1);
}
.colorVarText2 {
    color: var(---color-text-2);
}

.bgColor111 {
    background-color: #111;
}

.border1pxSolid4f {
    border: 1px solid #4f4f4f;
}
.borderRight1pxSolid4f {
    border-right: 1px solid #4f4f4f;
}
.bgBlackCss {
    background-color: black;
}
.bordeBottom1PxSolidGray {
    border-bottom: 1px solid gray;
}
.backGroundColorBgSecondary {
    background-color: var(--bs-secondary-bg);
}
.page-link:hover {
    background-color: var(--brand-color) !important;
    color: var(--text-color) !important;
    border: none !important;
}



#coinTable_previous ::before {
    content: "<";
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable_next ::before {
    content: ">";
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable2_previous ::before {
    content: "<";
    font-size: 1rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable2_next ::before {
    content: ">";
    font-size: 1rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}
#tbl_head {
    font-size: 0.875rem !important;
}
#tbl_head th {
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 600 !important;
}
#homeTableBody tr {
    vertical-align: middle !important;
}
.detayTablo {
    font-size: 0.875rem !important;
}
.detayTablo th {
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 600 !important;
}
.text-white {
    color: rgba(255, 255, 255, 0.8) !important;
}
.text-light {
    color: rgba(255, 255, 255, 0.8) !important;
}

.moreDetail {
    color: var(--brand-color);
    transition: 0.2s ease-in-out;
}
.moreDetail:hover {
    color: #ffc107;
    transition: 0.2s ease-in-out;
}

.complaints_textarea::placeholder {
    color: #b8babc;
    /* veya istediğiniz başka bir renk */
}

.color-text-1 {
    color: var(--text-color-solid) !important;
}

.card-img-top {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    object-fit: cover;
    margin-bottom: 15px;
}

.ogspaceCard {
    height: 400px !important;
    border: none !important;
    background: none;
    border-bottom: 0.5px solid var(--brand-color) !important;
    border-radius: 0px;
}
.ogspace_title:hover {
    color: var(--brand-color);
    cursor: pointer;
}

/* .main-news-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}


.news-img {
    width: 220px !important;
    height: 162px !important;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.news-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.news-content-bg {
    background-color: #f7941a9d;
    color: var(--white-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
    }

    .news-img {
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
    }

    .news-item div {
        align-items: flex-start;
        text-align: left;
    }

    .news-item .align-self-end {
        align-self: flex-start !important;
    }
}
 */

.headingsmall {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-color);
}

@media only screen and (max-width: 991px) {
    .color-text-1 {
        font-size: 11px;
    }
}
.color-text-2 {
    color: #b8babc !important;
}

.color-text-3 {
    /* border-bottom: 3px solid #ffc107; */
    color: #ffc107 !important;
}

.color-text-4 {
    color: #0000 !important;
}

.heading-info-text-red {
    color: red !important;
}

.heading-info-text-green {
    color: green !important;
}

.heading-info-text {
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--head-text-color);
    font-size: 0.75rem;
    font-weight: 200;
}

.heading-info-solid-text {
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--head-text-color-solid);
    font-size: 0.75rem;
    font-weight: 600;
}

.heading-info-solid-text-red {
    color: red;
}

.heading-info-solid-green {
    color: green;
}

/* .a2 {
    color: #b8babc;
    font-size: 12px;
    background-color: black;
} */
.accordion-flush .accordion-item {
    background-color: black !important;
}
.a2-mode {
    color: #b8babc;
    font-size: 15px;
}

@media screen and (max-width: 1200px) {
    .logo {
        width: 100% !important;
    }
    .exchanges-image {
        width: 50px;
        border-radius: 10px;
    }
}

.footer {
    border-top: 2px solid var(--border-color);
    background-color: var(--box-background-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 sütunlu bir yapı */
    gap: 3rem; /* Sütunlar arası boşluk */
}

.footer-logo {
    grid-column: span 2; /* Logoya 2 sütun yer ayır */
}
/* .footer-logo a img {
    width: 7rem;
} */

.footer-links-section,
.footer-social,
.footer-support {
    grid-column: span 1; /* Diğerlerine 1 sütun */
}
.footer-links a {
    color: var(--text-color-solid);
    font-size: 0.875rem;
}
.footer-links a:hover {
    color: var(--brand-color);
}


.ogReviewsSystemImage {
    position: relative;
    width: 100%;
}
.ogReviewsSystemImageScore {
    position: absolute;
    top: 33%;
    right: 49%;
    color: var(--text-color-solid);
    font-size: 2.5rem;
    font-weight: 600;
}
.ogReviewsSystemCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    max-width: 85%;
    position: relative;
}
.ogReviewsSystemScoreLeft {
    font-size: 1.5rem;
    font-weight: 600;
    border-right: 0.5px solid var(--detailpage-solid-color);
    color: var(--text-color-solid);
}
.ogReviewsSystemScoreRight {
    font-size: 1.5rem;
    font-weight: 600;
    border-left: 0.5px solid var(--detailpage-solid-color);
    color: var(--text-color-solid);
}

.ogReviewsSystemText {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}

.ogReviewsSystemInfo {
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
    color: var(--brand-color);
}
.ogReviewsSystemInfoLeft {
    position: absolute;
    top: 7px;
    left: 7px;
    cursor: pointer;
    color: var(--brand-color);
}
.ogReviewsSystemInfo,
.ogReviewsSystemInfoLeft i {
    font-size: 0.85rem;
}
.border-right {
    border-right: 1px dashed var(--brand-color);
}
.border-left {
    border-left: 1px dashed var(--brand-color);
}

.mb-20 {
    margin-bottom: 20px;
}
.mb-10 {
    margin-bottom: 10px;
}

.ogtooltip {
    --bs-tooltip-bg: var(--box-border-color);
    --bs-tooltip-color: var(--text-color);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: 400px;
    border-radius: 10px;
}

.fa-thumbs-up:hover,
.fa-thumbs-down:hover {
    color: var(--brand-color);
    cursor: pointer;
}

.boxTooltip {
    width: 25% !important;
    font-size: 0.875rem;
}

/* Mobil cihazlar için düzenleme */
@media (max-width: 768px) {
    .ogReviewsSystemCard {
        max-width: 100%;
    }
    .ogReviewsSystemScoreLeft {
        font-size: 1rem;
        font-weight: 600;
        border-right: 0.5px solid var(--detailpage-solid-color);
        color: var(--text-color-solid);
    }
    .ogReviewsSystemScoreRight {
        font-size: 1rem;
        font-weight: 600;
        border-left: 0.5px solid var(--detailpage-solid-color);
        color: var(--text-color-solid);
    }

    .ogReviewsSystemText {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-color-solid);
    }

    .ogReviewsSystemImage {
        position: relative;
        width: 60%;
    }
    .ogReviewsSystemImageScore {
        position: absolute;
        top: 33%;
        right: 49%;
        color: var(--text-color-solid);
        font-size: 1.5rem;
        font-weight: 600;
    }
    .ogReviewsSystemInfo,
    .ogReviewsSystemInfoLeft i {
        font-size: 0.625rem;
    }
    .footer-grid {
        grid-template-columns: 1fr; /* Mobilde 1 sütun */
        text-align: center; /* Mobilde merkezi hizalama */
    }

    .footer-logo {
        grid-column: span 1; /* Mobilde logo tek sütun yer kaplayacak */
    }

    .boxTooltip {
        width: 100% !important;
        height: 50% !important;
        font-size: 0.625rem !important;
        z-index: 9999;
        left: 0px !important;
        bottom: 0px !important;
    }
}

.menu-nav {
    color: #b8babc;
}

.menuItem {
    color: var(--menu-text-color);
    font-size: 1rem;
    font-weight: 600;
    /* letter-spacing: 0.5px; */
}

.CoinDetailmenu {
    /* border-bottom: 1px solid var(--border-color); */
    position: relative;
    overflow-x: auto; /* Yatay kaydırma aktif */
    white-space: nowrap; /* Satır kırılmadan tek satırda */
    overflow-y: auto; /* Kaydırma aktif ama scrollbar gizli */
    scrollbar-width: none; /* Firefox'ta kaydırma çubuğunu gizler */
    scrollbar-color: var(--brand-color) var(--background-color); /* Renk: kaydırma çubuğu / arka plan */
}

/* Scrollbar özelleştirme */
.CoinDetailmenu::-webkit-scrollbar {
    height: 3px; /* Kaydırma çubuğunun yüksekliği */
    display: none; /* Başlangıçta scrollbar gizlenir */
}

.CoinDetailmenu::-webkit-scrollbar-track {
    background: var(--background-color); /* Kaydırma çubuğunun arka planı */
}

.CoinDetailmenu::-webkit-scrollbar-thumb {
    background-color: var(--brand-color); /* Kaydırma çubuğu rengi */
    border-radius: 10px; /* Köşeleri yuvarlama */
    border: 1px solid var(--background-color); /* Kenarlık */
    display: none;
}
/* Scrollbar kaydırma sırasında görünür olacak */
.CoinDetailmenu:hover::-webkit-scrollbar {
    display: block; /* Hover veya kaydırma sırasında scrollbar görünür */
}

.CoinDetailmenuItem {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0rem 1rem 0.3rem 1rem; /* Her bir öğenin kenar boşluğu */
    position: relative;
    display: inline-block; /* Öğelerin yan yana kalması için */
    white-space: nowrap; /* Metinlerin alt alta gelmesini engeller */
}

.CoinDetailmenuItem.active {
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--brand-color);
}

.CoinDetailmenuItem.active::after {
    content: "";
    position: absolute;
    bottom: -1px; /* Çizgi CoinDetailmenu'nun alt çizgisiyle hizalı olacak */
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--brand-color); /* Brand rengi */
    z-index: 1; /* CoinDetailmenu'nun border-bottom çizgisinin üstünde gösterilecek */
}

.coinDetailReviewsContainer {
    border: 1.5px solid var(--box-border-color);
    border-radius: 5px;
    padding: 20px;
    height: 100%;
}

.filterDropdown {
    padding: 10px;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
}
.dropdown-item {
    color: var(--coin-solid-color-text);
    cursor: pointer;
}
.dropdown-item:hover {
    background-color: var(--hover-color-text);
    color: var(--text-color);
    cursor: pointer;
}
.filterDropdownButton {
    font-size: 0.875rem;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    cursor: pointer;
}
.filterDropdownButton:hover {
    opacity: 0.8;
    cursor: pointer;
}
#filterDropdown:hover {
    opacity: 0.8 !important;
}

.profile-left-col {
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
    height: 100%;
}

.profile-list-group {
    padding: 0px !important;
    list-style: none;
}
.profile-list-group-item {
    width: 100%;
    padding: 7px;
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 300;
    margin-bottom: 5px;
}
.profile-list-group-item.active {
    background-color: var(--hover-color-text);
    border-radius: 10px;
}
.profile-list-group-item-link {
    color: var(--text-color) !important;
    display: block;
}
.profile-list-group-item-link i {
    font-size: 1rem;
    margin-right: 5px;
    color: var(--text-color-solid) !important;
}
.profile-list-group-item:hover {
    color: var(--text-color);
    cursor: pointer;
    background-color: var(--hover-color-text);
    border-radius: 10px;
}

.FormInputProfile {
    height: 40px;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 0.875rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

.goButton {
    background-color: var(--box-background-color);
    border: 0.5px solid var(--box-border-color);
    color: var(--text-color-solid);
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.goButton:hover {
    background-color: var(--brand-color);
    color: var(--text-color);
}

.ogDivider {
    border-bottom: 1px solid var(--border-color);
    margin: 1rem 0;
}
.coinComment {
    width: 100%;
    margin: 0rem 2rem;
}

/* Placeholder için stiller */
.FormInputProfile::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 300;
}

.FormInputProfile:focus {
    border: 2px solid var(--brand-color);
}

.FormInputTextArea {
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 0.875rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

.walletInfoCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 200px; /* Minimum kart yüksekliği */
}

.walletInfoCardContext {
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 10px;
}

.walletCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 300px; /* Minimum kart yüksekliği */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* İçerikleri dikey olarak hizalar */
}

.walletCardContext {
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}

.honeycomb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    transform: translateY(34.375px);
}
.honeycomb-cell {
    flex: 0 1 250px;
    max-width: 250px;
    height: 137.5px;
    margin: 65.4761904762px 12.5px 25px;
    position: relative;
    padding: 0.5em;
    text-align: center;
    z-index: 1;
}
.honeycomb-cell__title {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
    text-transform: uppercase;
    color: var(--brand-color);
    font-weight: 700;
    font-size: 1.2em;
    transition: opacity 350ms;
}
.honeycomb-cell__title > small {
    font-weight: 300;
    margin-top: 0.25em;
}
.honeycomb-cell__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}
.honeycomb-cell::before,
.honeycomb-cell::after {
    content: "";
}
.honeycomb-cell::before,
.honeycomb-cell::after {
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    display: block;
    position: absolute;
    -webkit-clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}
.honeycomb-cell::before {
    background-color: var(--outline-button-color);
    color: var(--brand-color);
    border-radius: 5px;
    font-size: 0.85rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0.2px solid var(--brand-color);
    transform: scale(1.055);
}
.honeycomb-cell::after {
    background-color: var(--outline-button-color);
    color: var(--brand-color);
    border-radius: 5px;
    font-size: 0.85rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0.2px solid var(--brand-color);
    transition: opacity 350ms;
}

.honeycomb-cell:hover::before {
    color: var(--text-color);
}
.honeycomb-cell:hover::after {
    background-color: var(--outline-button-color);
    color: var(--text-color);
}
.honeycomb__placeholder {
    display: none;
    opacity: 0;
    width: 250px;
    margin: 0 12.5px;
}

@media (max-width: 550px) {
    .honeycomb-cell {
        margin: 81.25px 25px;
    }
}
@media (min-width: 550px) and (max-width: 825px) {
    .honeycomb-cell:nth-child(3n) {
        margin-right: calc(50% - 125px);
        margin-left: calc(50% - 125px);
    }

    .honeycomb__placeholder:nth-child(3n + 5) {
        display: block;
    }
}
@media (min-width: 825px) and (max-width: 1100px) {
    .honeycomb-cell:nth-child(5n + 4) {
        margin-left: calc(50% - 275px);
    }

    .honeycomb-cell:nth-child(5n + 5) {
        margin-right: calc(50% - 275px);
    }

    .honeycomb__placeholder:nth-child(5n),
    .honeycomb__placeholder:nth-child(5n + 3) {
        display: block;
    }
}
@media (min-width: 1100px) {
    .honeycomb-cell:nth-child(7n + 5) {
        margin-left: calc(50% - 400px);
    }

    .honeycomb-cell:nth-child(7n + 7),
    .honeycomb-cell:nth-child(7n + 5):nth-last-child(2) {
        margin-right: calc(50% - 400px);
    }

    .honeycomb__placeholder:nth-child(7n + 7),
    .honeycomb__placeholder:nth-child(7n + 9),
    .honeycomb__placeholder:nth-child(7n + 11) {
        display: block;
    }
}

@media screen and (max-width: 1650px) {
    .a1 {
        font-size: 14px;
    }
}
@media screen and (max-width: 1550px) {
    .a1 {
        font-size: 13px;
    }
    .menuItem {
        font-size: 15px;
    }
}
@media screen and (max-width: 1500px) {
    .a1 {
        font-size: 12px;
    }
}
@media screen and (max-width: 1400px) {
    .a1 {
        font-size: 8px;
    }
    .menuItem {
        font-size: 13px;
    }
}

.menu {
    display: flex;
    align-items: center !important;
    margin: 0px 10px 0px 10px;
    cursor: pointer;
}

.menu:hover {
    color: var(--brand-color);
}

.menu:hover a,
.menuItem:hover {
    color: var(--brand-color);
}

/* .a3:hover {

    color: #ffc107;

} */
.about-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 0px 10px 0px 10px; */
    /* cursor: pointer; */
    width: 40%;
    margin-bottom: 20px;
    margin-left: 12%;
}

.ogManifestText {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-color);
}
@media (max-width: 768px) {
    .ogManifestText {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .minw-100 {
        min-width: 140px;
    }
}
@media (max-width: 768px) {
    .SpaceContentArea {
        justify-content: space-around;
    }
}

.SpaceImageContainer {
    flex: 1; /* Esnek genişlik */
    max-width: 640px; /* Maksimum genişlik 640px */
    height: auto; /* Yükseklik otomatik ayarlanır */
    aspect-ratio: 16 / 9; /* Oranı korumak için kullanılır (640px x 360px) */
    border-radius: 10px; /* Kenar yuvarlama eklemek için */
    overflow: hidden; /* Taşan kısımları gizler */
    margin-right: 15px;
}

.SpaceImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.SpaceContentArea {
    flex: 1; /* Esnek genişlik */
    max-width: 640px; /* Maksimum genişlik 640px */
    height: auto; /* Yükseklik otomatik ayarlanır */
    aspect-ratio: 16 / 9; /* Oranı korumak için kullanılır (640px x 360px) */
    /* background-color: var(--brand-color); */
    border-radius: 10px; /* Kenar yuvarlama eklemek için */
    /* overflow: hidden; */
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px;
}

.SpaceContent {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.SpaceContentCat {
    background-color: var(--box-border-color);
    color: var(--text-color);
    border-radius: 5px;
    font-size: 0.765rem;
    /* font-weight: 600; */
    transition: all 0.3s ease;
    padding: 5px;
}
.spaceTitle {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 40px;
}
.spaceTitle:hover {
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.spaceDesc {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color-solid);
    line-height: 20px;
}
.spaceDate {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-color-solid);
    line-height: 20px;
}

.spaceButton {
    margin-top: 25px;
}

.custom-list {
    list-style-type: none;
    padding-left: 0px;
}

.custom-list li {
    font-weight: 300;
}

.custom-listMobile {
    list-style-type: none;
}

.custom-listMobile li {
    font-weight: 300;
    font-size: 14px;
}
.about-card-style {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 300px; /* Minimum kart yüksekliği */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* İçerikleri dikey olarak hizalar */
}
.about-card-style:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    cursor: pointer;
}

@media (max-width: 768px) {
    .about-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        /* margin: 0px 10px 0px 10px; */
        /* cursor: pointer; */
        width: 40%;
        margin-bottom: 5px;
        margin-left: 33%;
    }
    .about-title-text {
        text-align-last: center;
        margin-bottom: 20px;
    }
    .custom-list {
        list-style-type: none;
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        align-self: center;
    }
}

.gap-4-5 {
    gap: 2rem;
}

.ogScoreScore {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 0.5;
    text-align: start;
}
.ogScoreAreaTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap; /* Bu satır başlığın tek satırda kalmasını sağlar */
}
.bottomLine {
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.rightLine {
    border-right: 1px solid var(--text-color-solid);
    padding-right: 5px;
    padding-left: 5px;
}
.bottomLineTooltip {
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.InfoBottomLine {
    border-bottom: 1px solid var(--box-border-color);
}
.InfoTopLine {
    border-top: 1px solid var(--box-border-color);
}
.py-2-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-875 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.infoContent {
    border-bottom: 1px solid var(--box-border-color);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.infoBox {
    border-radius: 5px;
    background-color: var(--info-box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    font-size: 0.675rem;
    width: 100%;
}
.infoBoxExchange {
    border-radius: 5px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    font-size: 0.875rem;
    width: 100%;
}
.infoBoxDropdown {
    position: absolute;
    right: 0;
    top: 30px;
    width: max-content; /* min-width yerine width: max-content kullanıyoruz */
    border-radius: 5px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    z-index: 999 !important;
}
.infoBoxDropdown ul li {
    display: flex;
    padding: 0px 0px 5px 0px !important;
}
.infoBox:hover {
    opacity: 0.6;
    cursor: pointer;
}
.infoBox img {
    border-radius: 100%;
    margin-right: 5px;
}
.marketCapArea {
    width: 48%;
    border: 1px solid var(--box-border-color);
    border-radius: 5px;
    background-color: var(--box-background-color);
    padding: 10px;
    justify-content: center;
    min-height: 70px;
}
.marketCapAreaScore {
    font-size: 1.7rem;
    font-weight: 600;
}
.marketCapAreaTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}


.exchangeInfoCard {
    background: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.exchangeInfoCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--brand-color);
}

.exchangeInfoCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exchangeInfoCard:hover::before {
    opacity: 1;
}

.exchangeInfoCardContext {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-color);
    margin-bottom: 4px;
    line-height: 1.2;
}

.exchangeInfoCardTitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color-solid);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .ogScoreContainer {
        display: flex;
        flex-direction: column !important;
    }
    .ogScoreContainerMobile {
        display: flex;
        /* flex-direction: column !important */
    }
    .OgScoreArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .ogScoreScore {
        font-size: 2rem;
        text-align: start;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .ogScoreAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .marketCapArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .marketCapAreaScore {
        font-size: 1.7rem;
        font-weight: 600;
    }
    .marketCapAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
}

@media (max-width: 991px) {
    .ogScoreContainer {
        display: flex;
        flex-direction: column !important;
    }
    .ogScoreContainerMobile {
        display: flex;
        /* flex-direction: column !important */
    }
    .OgScoreArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .ogScoreScore {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .ogScoreAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .marketCapArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .marketCapAreaScore {
        font-size: 1.7rem;
        font-weight: 600;
    }
    .marketCapAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
    .pb-20 {
        padding-bottom: 100px;
    }
}

@media (max-width: 1400px) {
    .marketCapAreaTitle {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
}
tbody,
td,
tfoot,
th,
thead,
tr {
    background-color: var(--background-color) !important;
    /* color: var(--text-color) !important; */
}
.cursor-pointer {
    cursor: pointer;
}

.feture-td-1 {
    width: 50px;
}

.feture-td-2 {
    width: 250px;
}

.text-size-11 {
    font-size: 11px;
}

.text-size-14 {
    font-size: 14px;
}

.text-size-18 {
    font-size: 15px;
}

.text-size-25 {
    font-size: 25px;
}

.menu-hover {
    border-radius: 10px;
}

.menu-hover:hover {
    background-color: #222531;
    box-shadow: rgba(128, 138, 157, 0.12) 0px 1px 2px,
        rgba(128, 138, 157, 0.24) 0px 8px 32px;
}

.table-responsive {
    overflow: unset;
}

.exchange-menu,
.crpyto-menu,
.ogspace-menu {
    display: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    padding: 15px 0px 25px 0px;
    background-color: #0d1421;
    top: 161px;
    box-shadow: rgba(128, 138, 157, 0.12) 0px 1px 2px,
        rgba(128, 138, 157, 0.24) 0px 8px 32px;
}

.exchange:hover .exchange-menu,
.crpyto:hover .crpyto-menu,
.ogspace:hover .ogspace-menu {
    display: block;
}

.bodyContainer {
    position: relative !important;
}

.filter-box {
    position: absolute !important;
    width: 250px;
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--background-color);
    z-index: 99 !important;
    left: 1%;
    top: 1%;
}

:root {
    ---color-text-1: rgba(255, 255, 255, 0.8);
    ---color-text-2: rgba(255, 255, 255, 0.8);
    ---color-text-3: #ffc107;
    ---color-bg-1: #0d1421;
    ---color-bg-2: #24283b;

    /*ProgressBar Color*/
    --progress-low: #ffc107;
    --progress-hight: #28a745;
    --progress-warning: #ff0707;

    /*k:36 yeni tanımlamalar*/
    --background-color: rgb(255, 255, 255);
    --brand-color: #f7931a;
    --logo-text-color: #1d284c;

    --border-color: rgb(239 242 245 / 1);
    --head-text-color: rgb(61, 77, 99);
    --head-text-color-solid: rgb(100 116 139/1);
    --menu-text-color: #334155;
    --menu-text-color-solid: rgb(100 116 139/1);

    --chart-text-color: #f7931a;
    --text-color: rgb(15 23 42/1);
    --white-color: #070707;
    --text-color-solid: #647489;
    --text-color-solid-more-dark: #0f1012;
    --coin-color-text: rgb(51 65 85/1);
    --coin-solid-color-text: rgb(81, 89, 108);
    --detailpage-solid-color: #3a4758;
    --shortcoinname-color: #9ba1b8;

    --button-text-color: #ffffff;
    --button-solid-color: rgb(228, 233, 238);
    --outline-button-color: #f7941a2d;
    --outline-button-text-color: #f7941a;
    --input-background-color: rgb(241 245 249/1);
    --modal-background-color: rgb(255, 255, 255);
    --box-background-color: rgb(249, 249, 249);
    --reviewcard-background-color: rgb(249, 249, 249);
    --alert-background-color: rgb(255, 255, 255);

    --box-border-color: rgb(237, 237, 237);

    --hover-color-text: rgb(243, 237, 219);
}

.dark-theme {
    ---color-text-1: rgba(255, 255, 255, 0.8);
    ---color-text-2: rgba(255, 255, 255, 0.8);
    ---color-text-3: #ffc107;
    ---color-bg-1: #0d1421;
    ---color-bg-2: #24283b;

    /*k:36 yeni tanımlamalar*/
    --background-color: /* #0e141a;*/ #0c1218;
    --brand-color: #f7931a;
    --border-color: #212d3b;
    --head-text-color: rgb(223, 229, 236, 1);
    --head-text-color-solid: rgb(158 176 199 / 1);
    --menu-text-color-solid: rgb(158 176 199 / 1);
    --menu-text-color: rgb(223 229 236/1);
    --logo-text-color: #ffffff;
    --text-color: rgb(223 229 236 /1);
    --white-color: #fff;
    --text-color-solid: rgb(158 176 199/1);
    --text-color-solid-more-dark: rgb(154 157 161/1);
    --coin-color-text: rgb(190 203 218 /1);
    --coin-solid-color-text: rgb(151, 161, 175);
    --shortcoinname-color: #485461;

    --button-text-color: #5f390d;
    --button-solid-color: rgb(49, 59, 70);
    --outline-button-color: #f7941a2d;
    --input-background-color: rgb(27 35 45/1);
    --modal-background-color: rgb(27 35 45/1);
    --box-background-color: #0f151c;
    --reviewcard-background-color: /* #131e29; */ #0f151c;
    --alert-background-color: #15202b;

    --box-border-color: #1b242f;

    --hover-color-text: #202933;
}

* {
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    border: 0 solid rgb(229, 231, 235);
}
body {
    background-color: var(--background-color);
}
body a {
    text-decoration: none;
}

a:hover {
    color: var(--brand-color) !important;
}

.minh-64 {
    min-height: 64px;
}

.minh-24 {
    min-height: 24px;
}

.minw-100 {
    min-width: 100px;
}

.minh-178 {
    min-height: 178px;
}

#toggle-wrapper a {
    display: inline;
}

.section-stats {
    min-height: 200px;
    display: flex;
    align-items: center;
}

/*Backtotop Roket Css*/
#backtotop-btn {
    visibility: hidden;
    position: fixed;
    cursor: pointer;
    right: 16px;
    bottom: 16px;
    user-select: none;
    transition: 1s;
}

.rocket {
    display: block;
    font-size: 50px;
    transform: rotate(315deg);
}

.coinCustomText a {
    color: var(--brand-color) !important;
    font-weight: bold;
}

.coinCustomText a:hover {
    text-decoration: underline;
}

.coinDangerCustomText a {
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    font-weight: bold;
}

.coinDangerCustomText a:hover {
    text-decoration: underline;
}

.arrow-top {
    display: block;
    width: 64px;
    height: 64px;
    pointer-events: none;
    background-color: #0fb;
    border-radius: 50%;
}

.slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-out-top {
    -webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
        both;
    animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.scale-out-center {
    -webkit-animation: scale-out-center 0.5s
        cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

@keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

#navigationMenu {
    border-bottom: 1px solid var(--border-color);
    height: 65px;
}
.info-menu {
    border-bottom: 1px solid var(--border-color);
    height: 52px;
}

.logo-img {
    width: 2.5rem;
}
.mobileLogo {
    width: 2.5rem !important;
}

.logo-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--logo-text-color);
}

.logo-test-text {
    font-size: 0.6rem;
    font-weight: 300;
    color: #b3b3b3;
}
.inputContainer {
    /* width: 32%; */
    align-items: center;
    display: flex;
}
.search-box {
    /* height: 100%; */
    width: 100%;
    position: relative;
}
#searchBoxOpenCardClose:hover {
    color: var(--brand-color);
    cursor: pointer;
}
#search_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 8px;
    font-size: 1rem;
    padding-left: 35px;
}
#search_space_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    padding-left: 55px;
}
#search_space_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}

#ask_search_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    padding-left: 55px;
}
#ask_search_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}
#search_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 0.75rem;
    font-weight: 500;
}

.searchIcon {
    position: absolute;
    top: 35%;
    left: 13px;
    color: var(--text-color-solid);
    font-size: 0.85rem;
}

.space_searchIcon {
    position: absolute;
    top: 35%;
    left: 25px;
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.ask_search_inputIcon {
    position: absolute;
    top: 35%;
    left: 25px;
    color: var(--text-color-solid);
    font-size: 1.2rem;
}

.searchBoxOpenCard {
    position: absolute;
    right: 10% !important;
    top: 7%;
    width: 500px;
    padding: 13px 25px 0px;
    display: flex;
    align-items: center;
    background-color: var(--input-background-color);
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    z-index: 99999;
    opacity: 0; /* Başlangıçta tamamen görünmez */
    visibility: hidden; /* Görünmezliği garantilemek için */
    transition: right 0.2s ease, opacity 0.2s ease; /* Animasyon süresi ve kolaylaştırma */
}

.searchBoxOpenCard.show {
    right: 0px; /* Kutuyu ekranın içine kaydır */
    opacity: 1; /* Görünürlüğü geri getir */
    visibility: visible; /* Artık görünür yap */
}

.searchBoxOpenCardDetail {
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    background-color: var(--input-background-color);
    border-radius: 0px 0px 12px 12px;
    border-top: none; /* Üst sınır burada da yok */
}
.searchBoxOpenCardDetail hr {
    background-color: var(--brand-color);
    height: 1px;
    border: none;
}

.list-box {
    margin: 0px;
    padding: 0px 21px 24px;
    width: 99%;
    overflow: hidden auto;
    max-height: 80vh;
    display: grid;
    grid-template-rows: min-content;
    grid-auto-columns: 100%;
    row-gap: 16px;
}

.searchBoxOpenCardInput {
    color: var(--text-color);
    font-weight: 600;
    margin-left: 6px;
    margin-right: auto;
    width: 100% !important;
    height: 40px;
    background: none;
    text-overflow: ellipsis;
    transition: border-color 0.4s;
    border: none;
    outline: none;
    font-size: 1.1rem;
    padding: 0px !important;
}
.searchBoxOpenCardInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

#cryptoDiv {
    display: none;
}
#exchangeDiv {
    display: none;
}

.exchangeAboutBox {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    max-height: 780; /* Başlangıçta yüksekliği sınırlıyoruz, ihtiyaç duyarsanız değeri değiştirebilirsiniz */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* Animasyonlu geçiş */
}

.exchangeAboutBox.expanded {
    max-height: 10000em; /* İçerik açıldığında sınırsız yüksekliğe sahip olur */
}

.short-content {
    display: inline;
}

.full-content {
    display: none;
}

.mobileCloseIcon:hover {
    color: var(--brand-color);
    cursor: pointer;
}
@media only screen and (max-width: 1200px) {
    .searchBoxOpenCard {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 100000; /* Z-index değerini artırdık */
        background-color: var(--input-background-color);
        opacity: 1;
        visibility: hidden; /* Görünmezliği garantilemek için */
        padding: 20px;
        border-radius: 0; /* Tam ekran görünüm için köşeleri yuvarlatmayı kaldır */
        flex-direction: column;
        transition: right 0.8s ease, opacity 0.8s ease; /* Animasyon süresi ve kolaylaştırma */
    }

    .searchBoxOpenCardInput {
        font-size: 1.1rem;
        padding: 10px;
    }

    .list-box {
        max-height: 80vh;
        padding: 0px;
        overflow-y: auto;
    }

    .searchBoxOpenCardDetail {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--input-background-color);
        padding: 0;
        border-radius: 0;
        width: 100%;
    }
}
@media only screen and (max-width: 768px) {
    .counter {
        font-size: 2rem !important;
    }
}

.dataTableSearch {
    display: none !important;
    width: 100%;
    position: relative;
}
#coinSearch {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 15px;
    font-size: 1rem;
    padding-left: 50px;
}
#coinSearch::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.search-Icon {
    position: absolute;
    top: 29%;
    left: 29px;
    color: var(--text-color-solid);
    font-size: 1.5rem;
}

.form-control:focus {
    border-color: none !important;
    box-shadow: none !important;
}
/* Checkbox Gizleme */
.theme-checkbox {
    opacity: 0;
    position: absolute;
}

/* Toggle Label */
.theme-checkbox-label {
    background-color: var(--border-color);
    width: 65px;
    height: 30px;
    border-radius: 50px;
    position: relative;
    padding: 7px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease-in-out;
}

/* Iconlar */
.fa-moon,
.fa-sun {
    color: var(--brand-color);
}

/* Top */
.theme-checkbox-label .ball {
    background-color: var(--text-color);
    width: 26px;
    height: 26px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
}

/* Checkbox Checked Durumunda Topu Kaydır */
.theme-checkbox:checked + .theme-checkbox-label .ball {
    transform: translateX(35px);
}

/* Mobil İçin Özel Düzeltmeler */
@media only screen and (max-width: 768px) {
    .theme-checkbox-label {
        width: 60px; /* Küçük ekranlarda genişliği azalt */
        height: 28px; /* Küçük ekranlarda yüksekliği azalt */
    }
    .theme-checkbox-label .ball {
        width: 24px; /* Küçük ekranlar için top boyutunu ayarla */
        height: 24px;
        top: 2px;
        left: 2px;
    }
    .theme-checkbox:checked + .theme-checkbox-label .ball {
        transform: translateX(32px); /* Mobilde uygun mesafeye kaydır */
    }
}

.mobileSocialBar {
    border-top: 1px solid var(--border-color);
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}
.mobileSocialBar i {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: var(--text-color-solid);
    margin-right: 20px;
}
.mobileSocialBar i:hover {
    color: var(--brand-color);
}

.textXSmall {
    font-size: 0.75rem;
}
.textSmall {
    font-size: 0.875rem;
}

.text18Px {
    font-size: 1.125rem;
}
.textMd {
    font-size: 1.25rem;
}
.textXl {
    font-size: 2rem;
    line-height: 1.2;
}
.textX-L {
    font-size: 2.5rem;
    line-height: 1.2;
}

.textXXL {
    font-size: 3rem;
}
.text64px {
    font-size: 4rem;
}

.font-300 {
    font-weight: 300 !important;
}
.font-400 {
    font-weight: 400 !important;
}
.font-500 {
    font-weight: 500 !important;
}
.font-700 {
    font-weight: 700 !important;
}
.font-800 {
    font-weight: 800 !important;
}

.counter {
    transition: none !important;
    animation: none !important;
}

.coinTextPrice {
    font-size: 0.875rem;
    font-weight: 500;
}

.coinColor {
    color: var(--coin-color-text);
}

.baseWhiteColor {
    color: var(--text-color);
}

.cardTitleText {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}
.cardTitleMoreText {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
    white-space: nowrap;
}
.coinSmallText {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
}

.DatatableCoinText {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
}
.DatatableCoinSmallText {
    padding-left: 5px !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
}

.CardLink a:hover {
    border-radius: 5px;
    background-color: var(--hover-color-text);
    cursor: pointer;
}

.solidTextColorMoreDark {
    color: var(--text-color-solid-more-dark);
}

.detailpageTextColor {
    color: var(--detailpage-solid-color);
}

.shortCoinNameColor {
    color: var(--shortcoinname-color);
}

.coinCard {
    background-color: var(--reviewcard-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    max-width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    /*height: 225px;*/
}

.coinCard .card-body {
    flex-grow: 1; /* İçeriğin alanı doldurmasını sağlar */
    display: flex;
    flex-direction: column;
}

.coinCardContent {
    flex-grow: 1; /* İçerik alanını genişletir ve footer'ı en alta iter */
    font-weight: 500;
}

.coinCardFooter {
    margin-top: auto; /* Footer her zaman en altta kalır */
}

.coinCardColorRed {
    color: #eb0102;
}
.coinCardColorOrange {
    color: #fc6c03;
}
.coinCardColorYellow {
    color: #bdb322;
}
.coinCardColorGreen {
    color: #00b200;
}

.cryptoDetailCoinScore {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-color);
}
.cryptoDetailCoinScoreMobile {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-color);
    align-content: end;
}

.about-container {
    max-height: 330px;
    border: 1px solid var(--box-border-color);
    background-color: var(--box-background-color);
    border-radius: 5px;
    padding: 20px;
    overflow: hidden;
}

.about_none {
    display: none;
}

.about_block {
    display: block;
}

.ogSpaceContentContainer > p,
.ogSpaceContentContainer > ul > li,
.accordion .accordion-item .accordionContent > p,
.accordion .accordion-item .accordionContent > ul > li,
.about-text {
    color: var(--text-color-solid);
}

.ogSpaceContentContainer > p > a,
.ogSpaceContentContainer > ul > li > a,
#about > div > div.about-container > div > p > u > a,
#about > div > div.about-container > div > p > strong > u > a,
#about > div > div.about-container > div > p > a,
.accordion .accordion-item .accordionContent > p > a,
.accordion .accordion-item .accordionContent > ul > li > a,
#about > div > div.about-container > div > p > strong > a {
    color: var(--text-color) !important;
    text-decoration: underline;
}

.ogSpaceContentContainer > p > a:hover,
.ogSpaceContentContainer > ul > li > a:hover,
#about > div > div.about-container > div > p > u > a:hover,
#about > div > div.about-container > div > p > strong > u > a:hover,
#about > div > div.about-container > div > p > a:hover,
.accordion .accordion-item .accordionContent > p > a:hover,
.accordion .accordion-item .accordionContent > ul > li > a:hover,
#about > div > div.about-container > div > p > strong > a:hover {
    color: var(--brand-color) !important;
}

.aboutHeader {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.ogSpaceContentContainer > h3,
#about > div > div.about-container > div > h3 {
    color: var(--text-color);
    font-weight: 600 !important;
    font-size: 1.25rem;
}

.updateHeader {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 0.5px solid var(--border-color);
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.featuredMobil {
    display: none;
}

@media only screen and (max-width: 991px) {
    .coinCard {
        background-color: var(--reviewcard-background-color);
        border: 1.5px solid var(--box-border-color);
        border-radius: 10px;
        max-width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /*height: 225px;*/
    }

    .coinCard .card-body {
        flex-grow: 1; /* İçeriğin alanı doldurmasını sağlar */
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 1024px) {
    .featuredMobil {
        display: block;
    }
}
.text-justify {
    text-align: justify;
}

/*Login Modal Start*/
.modal-content {
    background-color: var(--box-background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Ortak stiller */
.loginButton,
.signInButton {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-solid);
    padding-bottom: 0.325rem;
    border-bottom: 2px solid var(--border-color); /* Ortak border stili */
    cursor: pointer; /* Ortak cursor stili */
}

/* Hover durumları */
.loginButton:hover,
.signInButton:hover {
    border-bottom: 2px solid var(--hover-color-text); /* Hover durumunda border rengi */
}

/* Aktif sekmenin border rengi */
.loginButton.active,
.signInButton.active {
    color: var(--text-color);
    border-bottom: 2px solid var(--brand-color);
}

/* Tüm tab içerikleri başlangıçta gizli */
.TabsContent .loginContent,
.TabsContent .signInContent {
    display: none;
}

/* Sadece aktif olan içerik görünür olacak */
.TabsContent .loginContent.active,
.TabsContent .signInContent.active {
    display: block;
}

.FormInput {
    height: 50px;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 1rem;
    padding-left: 35px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.FormInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.FormInput:focus {
    border: 2px solid var(--brand-color);
}

.supportUsInput {
    width: 4rem;
    height: 50px;
    font-size: 0.875rem !important;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 1rem;
    padding-left: 10px;
    padding-right: 60px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.supportUsInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.75rem;
    font-weight: 500;
}

.supportUsInput:focus {
    border: 2px solid var(--brand-color);
}

.copy-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border: none;
    cursor: pointer;
    border-radius: 5px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.copy-btn:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filterInput {
    height: 35px;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color) !important;
    padding: 5px;
    font-size: 1rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.filterInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.filterInput:focus {
    background-color: var(--input-background-color);
    border: 2px solid var(--brand-color);
}

.login-icon-email-left {
    position: absolute;
    left: 17px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.login-icon-password-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.login-icon-see-right {
    position: absolute;
    right: 17px;
    top: 24px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}

.register-icon-email-left {
    position: absolute;
    left: 17px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-password-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-referance-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-see-right {
    position: absolute;
    right: 17px;
    top: 24px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
/*Login Modal End*/

.controlPanelMenu {
    background-color: var(--box-background-color) !important;
    border: 1.5px solid var(--box-border-color) !important;
    color: var(--text-color) !important;
    border-radius: 5px;
    width: 100% !important;
}

.controlPanelMenu a {
    color: var(--text-color) !important;
    border-radius: 5px;
    width: 100% !important;
}

.bgVarColor1 {
    background-color: var(---color-bg-1);
}
.colorVarText2 {
    color: var(---color-text-2);
}

.bgColor111 {
    background-color: #111;
}

.border1pxSolid4f {
    border: 1px solid #4f4f4f;
}
.borderRight1pxSolid4f {
    border-right: 1px solid #4f4f4f;
}
.bgBlackCss {
    background-color: black;
}
.bordeBottom1PxSolidGray {
    border-bottom: 1px solid gray;
}
.backGroundColorBgSecondary {
    background-color: var(--bs-secondary-bg);
}
.page-link:hover {
    background-color: var(--brand-color) !important;
    color: var(--text-color) !important;
    border: none !important;
}
#coinTable_previous ::before {
    content: "<";
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable_next ::before {
    content: ">";
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable2_previous ::before {
    content: "<";
    font-size: 1rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable2_next ::before {
    content: ">";
    font-size: 1rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}
#tbl_head {
    font-size: 0.875rem !important;
}
#tbl_head th {
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 600 !important;
}
#homeTableBody tr {
    vertical-align: middle !important;
}
.detayTablo {
    font-size: 0.875rem !important;
}
.detayTablo th {
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 600 !important;
}
.text-white {
    color: rgba(255, 255, 255, 0.8) !important;
}
.text-light {
    color: rgba(255, 255, 255, 0.8) !important;
}

.moreDetail {
    color: var(--brand-color);
    transition: 0.2s ease-in-out;
}
.moreDetail:hover {
    color: #ffc107;
    transition: 0.2s ease-in-out;
}

.complaints_textarea::placeholder {
    color: #b8babc;
    /* veya istediğiniz başka bir renk */
}

.color-text-1 {
    color: var(--text-color-solid) !important;
}

.card-img-top {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    object-fit: cover;
    margin-bottom: 15px;
}

.ogspaceCard {
    height: 400px !important;
    border: none !important;
    background: none;
    border-bottom: 0.5px solid var(--brand-color) !important;
    border-radius: 0px;
}
.ogspace_title:hover {
    color: var(--brand-color);
    cursor: pointer;
}

/* .main-news-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}


.news-img {
    width: 220px !important;
    height: 162px !important;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.news-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.news-content-bg {
    background-color: #f7941a9d;
    color: var(--white-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
    }

    .news-img {
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
    }

    .news-item div {
        align-items: flex-start;
        text-align: left;
    }

    .news-item .align-self-end {
        align-self: flex-start !important;
    }
}
 */

.headingsmall {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-color);
}

@media only screen and (max-width: 991px) {
    .color-text-1 {
        font-size: 11px;
    }
}
.color-text-2 {
    color: #b8babc !important;
}

.color-text-3 {
    /* border-bottom: 3px solid #ffc107; */
    color: #ffc107 !important;
}

.color-text-4 {
    color: #0000 !important;
}

.heading-info-text-red {
    color: red !important;
}

.heading-info-text-green {
    color: green !important;
}

.heading-info-text {
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--head-text-color);
    font-size: 0.75rem;
    font-weight: 200;
}

.heading-info-solid-text {
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--head-text-color-solid);
    font-size: 0.75rem;
    font-weight: 600;
}

.heading-info-solid-text-red {
    color: red;
}

.heading-info-solid-green {
    color: green;
}

/* .a2 {
    color: #b8babc;
    font-size: 12px;
    background-color: black;
} */
.accordion-flush .accordion-item {
    background-color: black !important;
}
.a2-mode {
    color: #b8babc;
    font-size: 15px;
}

@media screen and (max-width: 1200px) {
    .logo {
        width: 100% !important;
    }
    .exchanges-image {
        width: 50px;
        border-radius: 10px;
    }
}

.footer {
    border-top: 2px solid var(--border-color);
    background-color: var(--box-background-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 sütunlu bir yapı */
    gap: 3rem; /* Sütunlar arası boşluk */
}

.footer-logo {
    grid-column: span 2; /* Logoya 2 sütun yer ayır */
}
/* .footer-logo a img {
    width: 7rem;
} */

.footer-links-section,
.footer-social,
.footer-support {
    grid-column: span 1; /* Diğerlerine 1 sütun */
}
.footer-links a {
    color: var(--text-color-solid);
    font-size: 0.875rem;
}
.footer-links a:hover {
    color: var(--brand-color);
}


.ogReviewsSystemImage {
    position: relative;
    width: 100%;
}
.ogReviewsSystemImageScore {
    position: absolute;
    top: 33%;
    right: 49%;
    color: var(--text-color-solid);
    font-size: 2.5rem;
    font-weight: 600;
}
.ogReviewsSystemCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    max-width: 85%;
    position: relative;
}
.ogReviewsSystemScoreLeft {
    font-size: 1.5rem;
    font-weight: 600;
    border-right: 0.5px solid var(--detailpage-solid-color);
    color: var(--text-color-solid);
}
.ogReviewsSystemScoreRight {
    font-size: 1.5rem;
    font-weight: 600;
    border-left: 0.5px solid var(--detailpage-solid-color);
    color: var(--text-color-solid);
}

.ogReviewsSystemText {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}

.ogReviewsSystemInfo {
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
    color: var(--brand-color);
}
.ogReviewsSystemInfoLeft {
    position: absolute;
    top: 7px;
    left: 7px;
    cursor: pointer;
    color: var(--brand-color);
}
.ogReviewsSystemInfo,
.ogReviewsSystemInfoLeft i {
    font-size: 0.85rem;
}
.border-right {
    border-right: 1px dashed var(--brand-color);
}
.border-left {
    border-left: 1px dashed var(--brand-color);
}

.mb-20 {
    margin-bottom: 20px;
}
.mb-10 {
    margin-bottom: 10px;
}

.ogtooltip {
    --bs-tooltip-bg: var(--box-border-color);
    --bs-tooltip-color: var(--text-color);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: 400px;
    border-radius: 10px;
}

.fa-thumbs-up:hover,
.fa-thumbs-down:hover {
    color: var(--brand-color);
    cursor: pointer;
}

.boxTooltip {
    width: 25% !important;
    font-size: 0.875rem;
}

/* Mobil cihazlar için düzenleme */
@media (max-width: 768px) {
    .ogReviewsSystemCard {
        max-width: 100%;
    }
    .ogReviewsSystemScoreLeft {
        font-size: 1rem;
        font-weight: 600;
        border-right: 0.5px solid var(--detailpage-solid-color);
        color: var(--text-color-solid);
    }
    .ogReviewsSystemScoreRight {
        font-size: 1rem;
        font-weight: 600;
        border-left: 0.5px solid var(--detailpage-solid-color);
        color: var(--text-color-solid);
    }

    .ogReviewsSystemText {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-color-solid);
    }

    .ogReviewsSystemImage {
        position: relative;
        width: 60%;
    }
    .ogReviewsSystemImageScore {
        position: absolute;
        top: 33%;
        right: 49%;
        color: var(--text-color-solid);
        font-size: 1.5rem;
        font-weight: 600;
    }
    .ogReviewsSystemInfo,
    .ogReviewsSystemInfoLeft i {
        font-size: 0.625rem;
    }
    .footer-grid {
        grid-template-columns: 1fr; /* Mobilde 1 sütun */
        text-align: center; /* Mobilde merkezi hizalama */
    }

    .footer-logo {
        grid-column: span 1; /* Mobilde logo tek sütun yer kaplayacak */
    }

    .boxTooltip {
        width: 100% !important;
        height: 50% !important;
        font-size: 0.625rem !important;
        z-index: 9999;
        left: 0px !important;
        bottom: 0px !important;
    }
}

.menu-nav {
    color: #b8babc;
}

.menuItem {
    color: var(--menu-text-color);
    font-size: 1rem;
    font-weight: 600;
    /* letter-spacing: 0.5px; */
}

.CoinDetailmenu {
    /* border-bottom: 1px solid var(--border-color); */
    position: relative;
    overflow-x: auto; /* Yatay kaydırma aktif */
    white-space: nowrap; /* Satır kırılmadan tek satırda */
    overflow-y: auto; /* Kaydırma aktif ama scrollbar gizli */
    scrollbar-width: none; /* Firefox'ta kaydırma çubuğunu gizler */
    scrollbar-color: var(--brand-color) var(--background-color); /* Renk: kaydırma çubuğu / arka plan */
}

/* Scrollbar özelleştirme */
.CoinDetailmenu::-webkit-scrollbar {
    height: 3px; /* Kaydırma çubuğunun yüksekliği */
    display: none; /* Başlangıçta scrollbar gizlenir */
}

.CoinDetailmenu::-webkit-scrollbar-track {
    background: var(--background-color); /* Kaydırma çubuğunun arka planı */
}

.CoinDetailmenu::-webkit-scrollbar-thumb {
    background-color: var(--brand-color); /* Kaydırma çubuğu rengi */
    border-radius: 10px; /* Köşeleri yuvarlama */
    border: 1px solid var(--background-color); /* Kenarlık */
    display: none;
}
/* Scrollbar kaydırma sırasında görünür olacak */
.CoinDetailmenu:hover::-webkit-scrollbar {
    display: block; /* Hover veya kaydırma sırasında scrollbar görünür */
}

.CoinDetailmenuItem {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0rem 1rem 0.3rem 1rem; /* Her bir öğenin kenar boşluğu */
    position: relative;
    display: inline-block; /* Öğelerin yan yana kalması için */
    white-space: nowrap; /* Metinlerin alt alta gelmesini engeller */
}

.CoinDetailmenuItem.active {
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--brand-color);
}

.CoinDetailmenuItem.active::after {
    content: "";
    position: absolute;
    bottom: -1px; /* Çizgi CoinDetailmenu'nun alt çizgisiyle hizalı olacak */
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--brand-color); /* Brand rengi */
    z-index: 1; /* CoinDetailmenu'nun border-bottom çizgisinin üstünde gösterilecek */
}

.coinDetailReviewsContainer {
    border: 1.5px solid var(--box-border-color);
    border-radius: 5px;
    padding: 20px;
    height: 100%;
}

.filterDropdown {
    padding: 10px;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
}
.dropdown-item {
    color: var(--coin-solid-color-text);
    cursor: pointer;
}
.dropdown-item:hover {
    background-color: var(--hover-color-text);
    color: var(--text-color);
    cursor: pointer;
}
.filterDropdownButton {
    font-size: 0.875rem;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    cursor: pointer;
}
.filterDropdownButton:hover {
    opacity: 0.8;
    cursor: pointer;
}
#filterDropdown:hover {
    opacity: 0.8 !important;
}

.profile-left-col {
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
    height: 100%;
}

.profile-list-group {
    padding: 0px !important;
    list-style: none;
}
.profile-list-group-item {
    width: 100%;
    padding: 7px;
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 300;
    margin-bottom: 5px;
}
.profile-list-group-item.active {
    background-color: var(--hover-color-text);
    border-radius: 10px;
}
.profile-list-group-item-link {
    color: var(--text-color) !important;
    display: block;
}
.profile-list-group-item-link i {
    font-size: 1rem;
    margin-right: 5px;
    color: var(--text-color-solid) !important;
}
.profile-list-group-item:hover {
    color: var(--text-color);
    cursor: pointer;
    background-color: var(--hover-color-text);
    border-radius: 10px;
}

.FormInputProfile {
    height: 40px;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 0.875rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

.goButton {
    background-color: var(--box-background-color);
    border: 0.5px solid var(--box-border-color);
    color: var(--text-color-solid);
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.goButton:hover {
    background-color: var(--brand-color);
    color: var(--text-color);
}

.ogDivider {
    border-bottom: 1px solid var(--border-color);
    margin: 1rem 0;
}
.coinComment {
    width: 100%;
    margin: 0rem 2rem;
}

/* Placeholder için stiller */
.FormInputProfile::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 300;
}

.FormInputProfile:focus {
    border: 2px solid var(--brand-color);
}

.FormInputTextArea {
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 0.875rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

.walletInfoCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 200px; /* Minimum kart yüksekliği */
}

.walletInfoCardContext {
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 10px;
}

.walletCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 300px; /* Minimum kart yüksekliği */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* İçerikleri dikey olarak hizalar */
}

.walletCardContext {
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}

.honeycomb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    transform: translateY(34.375px);
}
.honeycomb-cell {
    flex: 0 1 250px;
    max-width: 250px;
    height: 137.5px;
    margin: 65.4761904762px 12.5px 25px;
    position: relative;
    padding: 0.5em;
    text-align: center;
    z-index: 1;
}
.honeycomb-cell__title {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
    text-transform: uppercase;
    color: var(--brand-color);
    font-weight: 700;
    font-size: 1.2em;
    transition: opacity 350ms;
}
.honeycomb-cell__title > small {
    font-weight: 300;
    margin-top: 0.25em;
}
.honeycomb-cell__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}
.honeycomb-cell::before,
.honeycomb-cell::after {
    content: "";
}
.honeycomb-cell::before,
.honeycomb-cell::after {
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    display: block;
    position: absolute;
    -webkit-clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}
.honeycomb-cell::before {
    color: var(--text-color);
    transform: scale(1.055);
}
.honeycomb-cell::after {
    background: var(--outline-button-color);
    transition: opacity 350ms;
}

.honeycomb-cell:hover::before {
    color: var(--text-color);
}
.honeycomb-cell:hover::after {
    background-color:var(--outline-button-color);
    color: var(--text-color);
}
.honeycomb__placeholder {
    display: none;
    opacity: 0;
    width: 250px;
    margin: 0 12.5px;
}

@media (max-width: 550px) {
    .honeycomb-cell {
        margin: 81.25px 25px;
    }
}
@media (min-width: 550px) and (max-width: 825px) {
    .honeycomb-cell:nth-child(3n) {
        margin-right: calc(50% - 125px);
        margin-left: calc(50% - 125px);
    }

    .honeycomb__placeholder:nth-child(3n + 5) {
        display: block;
    }
}
@media (min-width: 825px) and (max-width: 1100px) {
    .honeycomb-cell:nth-child(5n + 4) {
        margin-left: calc(50% - 275px);
    }

    .honeycomb-cell:nth-child(5n + 5) {
        margin-right: calc(50% - 275px);
    }

    .honeycomb__placeholder:nth-child(5n),
    .honeycomb__placeholder:nth-child(5n + 3) {
        display: block;
    }
}
@media (min-width: 1100px) {
    .honeycomb-cell:nth-child(7n + 5) {
        margin-left: calc(50% - 400px);
    }

    .honeycomb-cell:nth-child(7n + 7),
    .honeycomb-cell:nth-child(7n + 5):nth-last-child(2) {
        margin-right: calc(50% - 400px);
    }

    .honeycomb__placeholder:nth-child(7n + 7),
    .honeycomb__placeholder:nth-child(7n + 9),
    .honeycomb__placeholder:nth-child(7n + 11) {
        display: block;
    }
}

@media screen and (max-width: 1650px) {
    .a1 {
        font-size: 14px;
    }
}
@media screen and (max-width: 1550px) {
    .a1 {
        font-size: 13px;
    }
    .menuItem {
        font-size: 15px;
    }
}
@media screen and (max-width: 1500px) {
    .a1 {
        font-size: 12px;
    }
}
@media screen and (max-width: 1400px) {
    .a1 {
        font-size: 8px;
    }
    .menuItem {
        font-size: 13px;
    }
}

.menu {
    display: flex;
    align-items: center !important;
    margin: 0px 10px 0px 10px;
    cursor: pointer;
}

.menu:hover {
    color: var(--brand-color);
}

.menu:hover a,
.menuItem:hover {
    color: var(--brand-color);
}

/* .a3:hover {

    color: #ffc107;

} */
.about-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 0px 10px 0px 10px; */
    /* cursor: pointer; */
    width: 40%;
    margin-bottom: 20px;
    margin-left: 12%;
}

.ogManifestText {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-color);
}
@media (max-width: 768px) {
    .ogManifestText {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .minw-100 {
        min-width: 140px;
    }
}
@media (max-width: 768px) {
    .SpaceContentArea {
        justify-content: space-around;
    }
}

.SpaceImageContainer {
    flex: 1; /* Esnek genişlik */
    max-width: 640px; /* Maksimum genişlik 640px */
    height: auto; /* Yükseklik otomatik ayarlanır */
    aspect-ratio: 16 / 9; /* Oranı korumak için kullanılır (640px x 360px) */
    border-radius: 10px; /* Kenar yuvarlama eklemek için */
    overflow: hidden; /* Taşan kısımları gizler */
    margin-right: 15px;
}

.SpaceImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.SpaceContentArea {
    flex: 1; /* Esnek genişlik */
    max-width: 640px; /* Maksimum genişlik 640px */
    height: auto; /* Yükseklik otomatik ayarlanır */
    aspect-ratio: 16 / 9; /* Oranı korumak için kullanılır (640px x 360px) */
    /* background-color: var(--brand-color); */
    border-radius: 10px; /* Kenar yuvarlama eklemek için */
    /* overflow: hidden; */
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px;
}

.SpaceContent {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.SpaceContentCat {
    background-color: var(--box-border-color);
    color: var(--text-color);
    border-radius: 5px;
    font-size: 0.765rem;
    /* font-weight: 600; */
    transition: all 0.3s ease;
    padding: 5px;
}
.spaceTitle {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 40px;
}
.spaceTitle:hover {
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.spaceDesc {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color-solid);
    line-height: 20px;
}
.spaceDate {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-color-solid);
    line-height: 20px;
}

.spaceButton {
    margin-top: 25px;
}

.custom-list {
    list-style-type: none;
    padding-left: 0px;
}

.custom-list li {
    font-weight: 300;
}

.custom-listMobile {
    list-style-type: none;
}

.custom-listMobile li {
    font-weight: 300;
    font-size: 14px;
}
.about-card-style {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 300px; /* Minimum kart yüksekliği */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* İçerikleri dikey olarak hizalar */
}
.about-card-style:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    cursor: pointer;
}

@media (max-width: 768px) {
    .about-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        /* margin: 0px 10px 0px 10px; */
        /* cursor: pointer; */
        width: 40%;
        margin-bottom: 5px;
        margin-left: 33%;
    }
    .about-title-text {
        text-align-last: center;
        margin-bottom: 20px;
    }
    .custom-list {
        list-style-type: none;
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        align-self: center;
    }
}

.gap-4-5 {
    gap: 2rem;
}

.ogScoreScore {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 0.5;
    text-align: start;
}
.ogScoreAreaTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap; /* Bu satır başlığın tek satırda kalmasını sağlar */
}
.bottomLine {
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.rightLine {
    border-right: 1px solid var(--text-color-solid);
    padding-right: 5px;
    padding-left: 5px;
}
.bottomLineTooltip {
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.InfoBottomLine {
    border-bottom: 1px solid var(--box-border-color);
}
.InfoTopLine {
    border-top: 1px solid var(--box-border-color);
}
.py-2-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.infoContent {
    border-bottom: 1px solid var(--box-border-color);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.infoBox {
    border-radius: 5px;
    background-color: var(--info-box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    font-size: 0.675rem;
    width: 100%;
}
.infoBoxExchange {
    border-radius: 5px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    font-size: 0.875rem;
    width: 100%;
}
.infoBoxDropdown {
    position: absolute;
    right: 0;
    top: 30px;
    width: max-content; /* min-width yerine width: max-content kullanıyoruz */
    border-radius: 5px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    z-index: 999 !important;
}
.infoBoxDropdown ul li {
    display: flex;
    padding: 0px 0px 5px 0px !important;
}
.infoBox:hover {
    opacity: 0.6;
    cursor: pointer;
}
.infoBox img {
    border-radius: 100%;
    margin-right: 5px;
}
.marketCapArea {
    width: 48%;
    border: 1px solid var(--box-border-color);
    border-radius: 5px;
    background-color: var(--box-background-color);
    padding: 10px;
    justify-content: center;
    min-height: 70px;
}
.marketCapAreaScore {
    font-size: 1.7rem;
    font-weight: 600;
}
.marketCapAreaTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .ogScoreContainer {
        display: flex;
        flex-direction: column !important;
    }
    .ogScoreContainerMobile {
        display: flex;
        /* flex-direction: column !important */
    }
    .OgScoreArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .ogScoreScore {
        font-size: 2rem;
        text-align: start;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .ogScoreAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .marketCapArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .marketCapAreaScore {
        font-size: 1.7rem;
        font-weight: 600;
    }
    .marketCapAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
}

@media (max-width: 991px) {
    .ogScoreContainer {
        display: flex;
        flex-direction: column !important;
    }
    .ogScoreContainerMobile {
        display: flex;
        /* flex-direction: column !important */
    }
    .OgScoreArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .ogScoreScore {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .ogScoreAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .marketCapArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .marketCapAreaScore {
        font-size: 1.7rem;
        font-weight: 600;
    }
    .marketCapAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
    .pb-20 {
        padding-bottom: 100px;
    }
}

@media (max-width: 1400px) {
    .marketCapAreaTitle {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
}
tbody,
td,
tfoot,
th,
thead,
tr {
    background-color: var(--background-color) !important;
    /* color: var(--text-color) !important; */
}
.cursor-pointer {
    cursor: pointer;
}

.feture-td-1 {
    width: 50px;
}

.feture-td-2 {
    width: 250px;
}

.text-size-11 {
    font-size: 11px;
}

.text-size-14 {
    font-size: 14px;
}

.text-size-18 {
    font-size: 15px;
}

.text-size-25 {
    font-size: 25px;
}

.menu-hover {
    border-radius: 10px;
}

.menu-hover:hover {
    background-color: #222531;
    box-shadow: rgba(128, 138, 157, 0.12) 0px 1px 2px,
        rgba(128, 138, 157, 0.24) 0px 8px 32px;
}

.table-responsive {
    overflow: unset;
}

.exchange-menu,
.crpyto-menu,
.ogspace-menu {
    display: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    padding: 15px 0px 25px 0px;
    background-color: #0d1421;
    top: 161px;
    box-shadow: rgba(128, 138, 157, 0.12) 0px 1px 2px,
        rgba(128, 138, 157, 0.24) 0px 8px 32px;
}

.exchange:hover .exchange-menu,
.crpyto:hover .crpyto-menu,
.ogspace:hover .ogspace-menu {
    display: block;
}

.bodyContainer {
    position: relative !important;
}

.filter-box {
    position: absolute !important;
    width: 250px;
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--background-color);
    z-index: 99 !important;
    left: 1%;
    top: 1%;
}

.feature-div {
    border-radius: 10px;
    padding: 0.5rem;
    min-height: 175px;
    max-height: 189px;
    overflow: hidden !important;
    background-color: var(--reviewcard-background-color);
    border: 1.5px solid var(--box-border-color);
    overflow: hidden;
}

/* .satisfaction-div a:hover {
    background-color: #323539 !important;
} */

#new-carousel {
    width: 100%;
    /* border: 1px solid #ccc; */
    /* padding: 15px */
}

#new-carousel .owl-dots {
    display: flex !important;
    margin-top: 0px !important;
    justify-content: end;
    text-align: end;
    width: 100%;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(---color-text-3) !important;
    color: black !important;
}

.nav-link {
    color: black;
    margin-left: 10px;
    background-color: #b8babc;
}

.nav-link:hover {
    color: black;
}

.select2-selection {
    border-radius: 0.375rem !important;
    height: 35px !important;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 8px !important;
    background-color: var(--border-color);
}

.page-item {
    margin: 3px;
}

.page-link {
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    background-color: var(--border-color);
    border: none !important;
    color: var(--text-color);
}

.page-item.active .page-link {
    background-color: var(--brand-color);
}

.page-link.disabled,
.disabled > .page-link {
    background-color: var(--border-color);
    color: var(--text-color);
    border: none !important;
}
.page-link.active,
.active > .page-link {
    font-size: 0.875rem !important;
    border: none !important;
}

.page-link .next,
.page-link .previous {
    font-size: 0.875rem !important;
    display: none !important;
}

.og-color-1,
.case-color-1,
.satisfaction-color-1,
.point-color-1 {
    color: #eb0102;
}

.og-color-2,
.case-color-2,
.satisfaction-color-2,
.point-color-2 {
    color: #fc6c03;
}

.og-color-3,
.case-color-3,
.satisfaction-color-3,
.point-color-3 {
    color: #bdb322;
}

.og-color-4,
.case-color-4,
.satisfaction-color-4,
.point-color-4 {
    color: #85b200;
}

.og-color-5,
.case-color-5,
.satisfaction-color-5,
.point-color-5 {
    color: #00b200;
}

.point-border-color-1 {
    border: 1px dashed #eb0102;
}

.point-border-color-2 {
    border: 1px dashed #fc6c03;
}

.point-border-color-3 {
    border: 1px dashed #bdb322;
}

.point-border-color-4 {
    border: 1px dashed #85b200;
}

.point-border-color-5 {
    border: 1px dashed #00b200;
}

.table-dark {
    --bs-table-bg: var(--background-color);
    --bs-table-color: var(--text-color);
    --bs-table-hover-bg: var(--input-background-color);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-color: var(--text-color);
}

.accordion {
    --bs-accordion-bg: var(--background-color) !important;
    --bs-accordion-color: var(--text-color) !important;
    --bs-accordion-btn-color: var(--background-color) !important;
    --bs-accordion-border-color: none !important;
}

.accordion-body {
    background-color: var(--box-background-color) !important;
}
.accordion-body > p {
    font-family: "Poppins", sans-serif !important;
    font-size: 0.875rem !important;
    /* color: var(--text-color-solid) !important; */
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7931a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item {
    background-color: var(--background-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Default background for all accordion headers when collapsed (closed) */
.accordion-button.collapsed {
    background-color: var(
        --background-color
    ) !important; /* Normal background */
    color: var(--text-color) !important;
    transition: background-color 0.3s ease;
}

/* Background for the opened accordion header */
.accordion-button:not(.collapsed) {
    background-color: var(
        --background-color
    ) !important; /* Brand color when expanded */
    color: var(--text-color) !important;
    transition: background-color 0.3s ease;
}

/* When accordion header is focused */
.accordion-button:focus {
    box-shadow: none !important;
}
.accordion-button.faqOpen {
    /* background-color: var(--brand-color) !important;  */
    color: var(--brand-color) !important;
    transition: background-color 0.3s ease;
    font-weight: 600 !important;
}

.navigation-mobile {
    display: none !important;
    border-bottom: 1px solid var(--border-color);
    padding: 12px;
}

.info-menu-mobile {
    display: none !important;
}
@media screen and (max-width: 1200px) {
    .navigation,
    .info-menu {
        display: none !important;
    }

    .navigation-mobile {
        display: block !important;
    }

    .info-menu-mobile {
        display: block !important;
    }

    .crypto-table {
        width: 100% !important;
    }

    .crypto-promo {
        display: none !important;
    }

    .table-responsive {
        overflow: auto !important;
    }
}
@media screen and (max-width: 960px) {
    .navigation,
    .info-menu {
        display: none !important;
    }

    .navigation-mobile {
        display: block !important;
    }

    .info-menu-mobile {
        display: block !important;
    }

    .crypto-table {
        width: 100% !important;
    }

    .crypto-promo {
        display: none !important;
    }

    .table-responsive {
        overflow: auto !important;
    }
}

.offcanvas-header {
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
}
.offcanvas-body {
    background-color: var(--background-color);
}

.offcanvas-header button {
    background-color: var(---color-text-3) !important;
}

.mobile-solo-menu {
    padding: 1rem 0px !important;
    border-bottom: 1px solid var(--border-color);
    list-style: none;
}

.icon-container{
    width: 24px;
    text-align: center;
    margin-right: 0.5rem;
}

.solo-menu-icon {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

.search-detail {
    display: none;
    max-height: 452px;
    position: absolute;
    width: 750px;
    z-index: 99999;
    background-color: var(--box-background-color) !important;
    border: 1px solid var(--box-border-color);
    border-radius: 7px;
    top: 46px;
    right: 0px;
    overflow-x: hidden !important;
    padding: 20px;
}

.searchDetailTitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    border-bottom: 0.5px solid var(--brand-color);
    padding-bottom: 5px;
}

.searchDetailTitleIcon {
    font-size: 0.75rem;
    color: var(--brand-color);
    margin-right: 5px;
}
.searchDetailItem {
    text-decoration: none; /* Alt çizgiyi kaldırır */
    color: inherit; /* Renk kalmasını sağlar */
    display: block; /* Link alanını tüm bloğa yayar */
    border-radius: 5px; /* Kenarlara yumuşak köşeler verir */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Geçiş efekti */
    padding: 10px 5px 10px 5px;
    list-style: none !important;
}
.searchDetailItem:hover {
    border-radius: 5px;
    background-color: var(--hover-color-text);
    cursor: pointer;
}
.askSearchLink:hover {
    background-color: var(--hover-color-text) !important;
    cursor: pointer;
}
.ogAlertWarning {
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem;
    align-items: center;
}

.ogAlertWarning svg {
    color: var(--outline-button-color);
    fill: var(--brand-color) !important;
    width: 15px;
}

.ogAlertDanger {
    background-color: rgba(200, 49, 49, 0.233);
    color: rgb(200, 49, 49);
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem;
    align-items: center;
}

.dangerColor {
    color: rgb(200, 49, 49);
}

.ogAlertDanger svg {
    color: rgb(200, 49, 49);
    fill: rgb(200, 49, 49) !important;
    width: 15px;
}

.btn-close {
    --bs-btn-close-color: var(--brand-color) !important;
}

.alert-dismissible .btn-close {
    padding: 0.875rem 1rem !important;
}

.overview {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 10px;
    background-color: #111;
}

.overview.submitted {
    /* border: 3px 0 0 0 solid green; */
    border-top: 4px solid rgb(155, 155, 43);
    /* border-left: 5px solid yellow; */
    border-bottom: 1px solid rgb(220, 220, 220);
}

.overview.unsolved {
    /* border: 3px 0 0 0 solid green; */
    border-left: 6px solid red;
    /* border-left: 5px solid yellow; */
}

.overview.solved {
    /* border: 3px 0 0 0 solid green; */
    border-left: 6px solid green;
    /* border-right: 5px solid green; */
}

.overview.waiting {
    border-left: 10px solid grey;
    /* border-right: 5px solid green; */
    border-bottom: 1px solid grey;
}

.overview.open {
    border-left: 6px solid grey;
    /* border-right: 5px solid green; */
}

.review-div {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    height: 150px;
    margin: 0px 0px 10px 10px;
    background-color: #111;
    border: 1px solid #4f4f4f;
}

.review-div-2 {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 10px;
    background-color: var(---color-bg-2);
}

.round-box {
    width: 60px;
    height: 60px;
    /* border: 1px solid gray; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    /* margin-left: auto; */
    /* Yuvarlak div'in otomatik olarak sağa konumlanması */
    margin-bottom: 10px;
    /* İstenen boşluğu kontrol etmek için */
}

.review-text {
    word-break: break-all;
    height: 70px;
    max-height: 70px;
    overflow-x: auto;
    width: 100%;
}

/* BİTİŞ */
#pills-tab {
    display: flex;
}

.home_table_img {
    width: 30px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.home_table_text {
    font-size: 18px;
}

@media only screen and (max-width: 900px) {
    #pills-tab {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    #pills-tab > li {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .home_table_img {
        width: 25px;
    }

    .home_table_text {
        font-size: 15px;
    }
}

.form-control-dark {
    background-color: var(---color-bg-1) !important;
    color: var(---color-text-2) !important;
    border: 1px solid gray !important;
}

.table_mobile_custom {
    display: flex;
    align-items: center;
}

.og-ask-div {
    border: 1px solid gray;
    border-radius: 10px;
    background-color: #ffc107;
}

.ask-categories {
    border: 1px solid gray;
    background-color: var(---color-bg-2);
    border-radius: 15px;
}

.ask-color {
    background-color: var(---color-bg-2);
}

.ask-categories > ul > li {
    list-style: none;
}

.ask-categories-square {
    border: 1px solid gray;
    background-color: #0d1421;
    border-radius: 15px;
}

#kullanici_etiketle > ::placeholder {
    color: #ffff !important;
    opacity: 1;
    /* Firefox */
}

#kullanici_etiketle > ::-ms-input-placeholder {
    /* Edge 12-18 */
    color: #ffff !important;
}

.ask-font-size {
    font-size: 20px;
}

.ask-question-bar {
    font-size: 15px;
    font-weight: 600;
}

.ask_category_list {
    border-bottom: 1px solid gray;

    padding: 15px;
}

.ask_category_list:hover {
    color: #ffc107 !important;
}

.ask_category_more {
    line-height: 15px;
    padding: 15px;
}

.ask-profil-image {
    width: 33px;
    height: 33px;
}

#ask-head > .form-control:focus {
    background-color: #0d1421 !important;
}

#ask-text > .form-control:focus {
    background-color: #0d1421 !important;
}

.custom-modal-color {
    background-color: #0d1421 !important;
}

.modal-body {
    border-bottom: 0px !important;
    border-radius: 10px;
}

#kullanici_etiketle .form-control:focus {
    background-color: #0d1421;
}

.complaint-div-answer {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 10px;
    background-color: #0d1421;
    /* border: 1px solid grey; */
    border-top: 10px solid green;
    /* border-left: 5px solid yellow; */
    border-bottom: 1px solid rgb(220, 220, 220);
}

.ask-read-btn {
    color: #f6f6f6 !important;
    border: 0px !important;
}

.ask-read-btn:hover {
    color: #b8babc !important;
}

.ask-answer-passive {
    display: none;
}

.ask-answer-active {
    display: block;
}

.modal-content {
    border-radius: 15px !important;
}

.message-number-index {
    font-size: 15px;
}

.etherscan-li {
    list-style: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.etherscan-li-element {
    position: absolute;
    background-color: var(---color-bg-2);
    gap: 25px;
    top: -500px;
}

.etherscan-li-element-active {
    position: absolute;
    background-color: var(---color-bg-2);
    gap: 25px;
    padding: 30px;
    z-index: 99999;
}

.ether-scan-title {
    font-size: 20px;
}

.low-container {
    padding: 25px;
    border: 1px solid gray;
    background-color: #0d1421;
}

.price-span {
    font-size: 20px;
    font-weight: 500;
}

#carousel1.owl-carousel {
    z-index: 0;
}

#carousel2.owl-carousel {
    z-index: 0;
}

.review-content {
    width: 85%;
}

.review-score-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

.score-con-div {
    width: 15%;
}

.score-div {
    border: 5px dotted #00b200;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    width: 100px;
}

.folder-profile-image {
    border-radius: 50%;
}

.folder-complaints-container {
    /* width: 100%; */
    background-color: #24283b;
    border-radius: 10px;
    cursor: pointer;
}

.folder-image-div {
    width: 50px;
    height: 50px;
}

.folder-radius {
    border-radius: 10px;
}

.folder-message-see-container {
    background-color: #0d1421;
    height: 800px;
}

.message-see-container {
    background-color: #24283b;
    height: 808px;
    overflow-y: auto;
}

.folder-overflow-container {
    height: 650px;
    overflow-y: auto;
}

#folder-message-see-container ::-webkit-scrollbar {
    width: 5px;
}

#folder-message-see-container ::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#folder-message-see-container ::-webkit-scrollbar-thumb {
    background: #ffc107;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-color);
}

::-webkit-scrollbar {
    color: var(--brand-color) !important;
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    color: var(--brand-color) !important;
    border-radius: 5px;
    width: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-color);
}

body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

@media only screen and (max-width: 950px) {
    .review-score-container {
        justify-content: center;
        flex-direction: column;
    }

    .review-content {
        width: 100%;
    }

    .score-con-div {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4caf50;
    color: white;
    padding: 15px;
    border-radius: 5px;
    display: none;
    z-index: 9999999 !important;
}

.select2-container--open {
    z-index: 9999999;
}

.eth-gas-container-passive {
    display: none;
}

.eth-gas-container {
    position: absolute;
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    z-index: 9999999999999999;
    width: 20%;
    display: block;
    background-color: var(--box-background-color);
}

.gasValueContainer {
    width: 87%;
    background-color: var(--reviewcard-background-color);
    border: 1.5px solid var(--box-border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
}
.gasValueContainer span {
    font-size: .875rem;
    font-weight: 500;
}

.text-img-container {
    position: relative;
}

.test {
    width: 100%;
}

.test img {
    width: 100%;
    position: relative;
}

.test-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 10px;
    width: 100%;
    /* background: #000; */
    padding: 80px;
}

.test-2 .leaf-group {
    display: flex;
    justify-content: space-around;
    gap: 100px;
    margin-bottom: 70px;
}

.test-2 .leaf-group:nth-child(1) {
    margin-bottom: 73px;
    /* background-color: red */
}

.test-2 .leaf-group:nth-child(1) h6:nth-child(1) {
    margin-left: -11px;
}

.test-2 .leaf-group:nth-child(1) h6:nth-child(2) {
    margin-left: 619px;
}

.test-2 .leaf-group:nth-child(2) {
    margin-bottom: 66px;
}

.test-2 .leaf-group:nth-child(2) h6:nth-child(1) {
    margin-left: -11px !important;
}

.test-2 .leaf-group:nth-child(2) h6:nth-child(2) {
    margin-left: 952px;
}

.test-2 .leaf-group:nth-child(3) {
    margin-bottom: 50px;
}

.test-2 .leaf-group:nth-child(3) h6:nth-child(1) {
    margin-left: -11px !important;
}

.test-2 .leaf-group:nth-child(3) h6:nth-child(2) {
    margin-left: 366px !important;
}

.test-2 .leaf-group:nth-child(3) h6:nth-child(3) {
    margin-left: 535px !important;
}

.test-2 .leaf-group:nth-child(4) {
    margin-bottom: 128px;
}

.test-2 .leaf-group:nth-child(4) h6:nth-child(1) {
    margin-left: -11px;
}

.test-2 .leaf-group:nth-child(4) h6:nth-child(2) {
    margin-left: 953px;
}

.test-2 .leaf-group:nth-child(5) {
    margin-bottom: 8px;
}

.test-2 .leaf-group:nth-child(5) h6:nth-child(1) {
    margin-left: -6px;
}

.test-2 .leaf-group:nth-child(5) h6:nth-child(2) {
    margin-left: 637px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-color-solid) !important;
}

.breadcrumb {
    --bs-breadcrumb-divider: "\f105"; /* fa-angle-right ikonu */
    display: flex;
    list-style: none;
    padding: 5px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider);
    font-family: "Font Awesome 5 Free", "Font Awesome";
    font-weight: 900; /* Font Awesome ikonları için ağırlık */
    padding: 0px 5px;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: 0px !important;
}

/* SVG etiketlerinin altındaki rakamlar */
.custom-value-label {
    font-size: 18px; /* Yazı boyutunu biraz daha büyük yapabilirsiniz */
    font-weight: bold;
    fill: currentColor; /* Tema renklerine göre renk değişimi */
    text-anchor: middle; /* Ortada hizalamak için */
    dominant-baseline: middle; /* Dikeyde ortalamak için */
}
.crypto-div {
    /* box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px, rgba(88, 102, 126, 0.12) 0px 1px 2px; */
    border: 1px solid #4f4f4f;
    border-radius: 8px;
    padding: 10px;
    /* margin: 0px 0px 10px 10px; */
    background-color: #111;
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--progress-hight);
    --bs-progress-height: 7px;
    --bs-progress-bg: var(--text-color-solid) !important;
}

.nav-link {
    text-align: left !important;
    margin-top: 5px;
}

.nav-link.active {
    background-color: var(---color-text-3) !important;
    color: var(---color-text-1) !important;
}

.fa-star-o {
    font-size: 20px;
    color: #808080;
}

.fa-star-half-o {
    font-size: 20px;
    color: #edb867;
}

.average {
    font-size: 18px;
    color: #808080;
    padding-left: 10px;
}

.rate-comment-up:hover {
    border: 1px solid #28a745 !important;
}

.rate-comment-down:hover {
    border: 1px solid #dc3545 !important;
}

.complaints-support:hover i,
.complaints-support:hover span {
    color: var(---color-text-3) !important;
}

.round-box-link {
    width: 45px;
    margin: 10px;
    height: 45px;
    border: 1px solid gray;
    background-color: var(---color-bg-2);
    border-radius: 50%;
    color: var(---color-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    /* margin-left: auto; */
    /* Yuvarlak div'in otomatik olarak sağa konumlanması */
    margin-bottom: 10px;
    /* İstenen boşluğu kontrol etmek için */
}

.round-box-category {
    width: 45px;
    margin: 10px;
    height: 45px;
    background-color: var(---color-bg-2);
    border-radius: 50%;
    color: var(---color-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.round-box-category a {
    color: var(---color-text-2) !important;
}

.round-box-link a {
    color: var(---color-text-2) !important;
}

.round-box-link:hover {
    border: 1px solid var(---color-bg-1) !important;
}

.round-box-complaints {
    width: 70px;
    height: 60px;
    border-radius: 50%;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: bold;
}

.complaint-div {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    background-color: var(--box-background-color);
    /* border: 1px solid grey; */
    /* border-left: 5px solid yellow; */
    border-bottom: 1px solid var(--box-border-color);
}

.complaint-div-2 {
    border-top: 10px solid red;
}

.complaint-div1 {
    border-top: 10px solid grey;
}
.complaint-div_new {
    border-bottom: 1px solid grey;
}
.complaint-div2 {
    border-top: 10px solid green;
}

.og-review-button {
    animation: pulse 1.5s infinite;
    /* Pulse animasyonunu tanımla */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        /* Normal boyutta başla */
    }

    50% {
        transform: scale(1.2);
        /* 50% boyut büyütme */
    }

    100% {
        transform: scale(1);
        /* Normal boyuta geri dön */
    }
}

.evaluate-div {
    border-radius: 8px;
    background-color: var(---color-bg-2);
    border: 1px solid gray;
    padding: 10px;
}

.complaint-reply {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(---color-bg-2);
    /* display: none; */
}

.complaint-reply span {
    color: var(---color-text-2);
}

.btn.active {
    background-color: #ffa500;
    /* Warning (Orange) */
    border-color: #ffa500 !important;
    color: white;
}

.btn-day {
    background-color: transparent;
    color: var(--text-color-solid);
    border: 1px solid var(--box-border-color);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-day:hover {
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border-color: var(--outline-button-text-color);
}

.btn-day.active {
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border-color: var(--outline-button-text-color);
}

/* Add specific styles for dark mode */
.dark-theme .btn-day {
    background-color: transparent;
    color: var(--text-color-solid);
    border: 1px solid var(--box-border-color);
}

.dark-theme .btn-day:hover,
.dark-theme .btn-day.active {
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border-color: var(--outline-button-text-color);
}

.evaluate-text {
    width: 16%;
    border: none !important;
    padding: 0px !important;
    height: 35px !important;
    text-align: center !important;
}

.foto_container {
    position: relative;
}

.foto_yazi_first_text {
    color: var(--text-color);
    font-size: 20px;
}

.foto_yazi_first_center {
    color: var(--text-color);
    font-size: 40px;
}

.foto_yazi_center {
    position: absolute;
    left: 41%;
    top: 40%;
    z-index: 1;
}

.foto_info {
    font-size: 14px;
    color: var(--brand-color);
    cursor: pointer;
}

.foto_yazi_first {
    position: absolute;
    left: 14.5%;
    top: 7%;
    z-index: 1;
}

.foto_yazi_second {
    position: absolute;
    left: 9%;
    top: 26%;
    z-index: 1;
}

.foto_yazi_third {
    position: absolute;
    left: 6.6%;
    top: 43%;
    z-index: 1;
}

.foto_yazi_fourth {
    position: absolute;
    left: 9%;
    top: 60%;
    z-index: 1;
}

.foto_yazi_five {
    position: absolute;
    left: 14.3%;
    top: 87.5%;
    z-index: 1;
}

.foto_yazi_six {
    position: absolute;
    right: 13.8%;
    top: 7%;
    z-index: 1;
}

.foto_yazi_seven {
    position: absolute;
    right: 8%;
    top: 25.5%;
    z-index: 1;
}

.foto_yazi_eight {
    position: absolute;
    right: 5.9%;
    top: 43%;
    z-index: 1;
}

.foto_yazi_nine {
    position: absolute;
    right: 8.2%;
    top: 59.5%;
    z-index: 1;
}

.foto_yazi_ten {
    position: absolute;
    right: 13.3%;
    top: 87.4%;
    z-index: 1;
}

.foto_info_first {
    position: absolute;
    left: 32.5%;
    top: 4.5%;
    z-index: 1;
}

.foto_info_second {
    position: absolute;
    left: 31%;
    top: 23.2%;
    z-index: 1;
}

.foto_info_third {
    position: absolute;
    left: 27.6%;
    top: 40.5%;
    z-index: 1;
}

.foto_info_fourth {
    position: absolute;
    left: 29%;
    top: 56.5%;
    z-index: 1;
}

.foto_info_five {
    position: absolute;
    left: 34.3%;
    top: 85.4%;
    z-index: 1;
}

.foto_info_six {
    position: absolute;
    right: 18.8%;
    top: 4%;
    z-index: 1;
}

.foto_info_seven {
    position: absolute;
    right: 13.8%;
    top: 22.2%;
    z-index: 1;
}

.foto_info_eight {
    position: absolute;
    right: 10.9%;
    top: 40%;
    z-index: 1;
}

.foto_info_nine {
    position: absolute;
    right: 13.3%;
    top: 56.5%;
    z-index: 1;
}

.foto_info_ten {
    position: absolute;
    right: 20.9%;
    top: 84.4%;
    z-index: 1;
}

.info-box-text {
    font-size: 15px;
    color: var(--text-color);
}

.info_box_first {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 10%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_second {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 29%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_third {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 47%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_fourth {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 62%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_five {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 92%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_six {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 10%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_seven {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 29%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_eight {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 47%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_nine {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 62%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_ten {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 92%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info-box-passive {
    position: absolute;
    opacity: 0;
    z-index: -99999;
}
.exchangeInfoBar {
    width: 100%;
}

.exchangeHeader {
    background: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.exchangeImage {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.exchangeImage img {
    border: 2px solid var(--box-border-color);
    transition: border-color 0.3s ease;
}

.exchangeImage:hover img {
    border-color: var(--brand-color);
}

.exchangeInfoBar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.exchangeInfoBarSocial {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--box-border-color);
}

.exchangeInfoBarSocialIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.exchangeInfoBarSocialIcon:hover {
    background: var(--brand-color);
    border-color: var(--brand-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.exchangeInfoBarSocialIcon i {
    color: var(--text-color);
    transition: color 0.3s ease;
}

.exchangeInfoBarSocialIcon:hover i {
    color: white;
}

.social-separator {
    color: var(--text-color-solid);
    opacity: 0.5;
    font-weight: 300;
}



.exchangeListCard {
    border: 1px solid var(--box-border-color);
    background-color: var(--box-background-color);
    border-radius: 8px;
    padding: 20px;
    border-radius: 10px;
    gap: 6rem;
}

.exchangeListCard:hover {
    border: 1px solid var(--brand-color);
    transition: 0.2s all;
    cursor: pointer;
}

.exchangeListCardVolume {
    border: 1px solid var(--box-border-color);
    background-color: var(--box-background-color);
    border-radius: 8px;
    padding: 8px;
}

@media (max-width: 1200px) {
    .exchangeHeader {
        padding: 20px;
    }

    .exchangeInfoBar {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .exchangeHeader {
        text-align: center;
    }

    .exchangeImage {
        justify-content: center;
        margin-bottom: 20px;
    }

    .exchangeInfoBar {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin: 20px 0;
    }

    .exchangeInfoBarSocial {
        justify-content: center;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .exchangeHeader {
        padding: 16px;
        margin-bottom: 24px;
    }

    .exchangeInfoBar {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .exchangeInfoCard {
        padding: 16px;
        min-height: 80px;
    }

    .exchangeInfoCardContext {
        font-size: 1.1rem;
    }

    .exchangeInfoCardTitle {
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .exchangeInfoBarSocial {
        flex-wrap: wrap;
        gap: 8px;
    }

    .exchangeInfoBarSocialIcon {
        width: 36px;
        height: 36px;
    }
}

.profileHeader {
    border: 1px solid var(--box-border-color);
    background-color: var(--box-background-color);
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    gap: 3rem;
}

.badgeImage {
    position: absolute;
    top: 40px;
    right: 20px;
    width: 100px;
    height: 100px;
}

.exchangeContainer {
    width: 100%;
    min-height: 105px;
}

.scoreCardContainer {
    min-height: 380px; /* Yüksekliği içeriğe göre otomatik alır */
    margin-bottom: 20px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;

    display: flex;
}

@media (max-width: 768px) {
    .scoreCardContainer {
        padding: 0.5rem;
    }
}

.scoreCardRight {
    /* height: 100%; */
    background-color: var(--background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 10px;
    display: flex;
    padding: 0; /* İç padding kaldırıldı */
}

/* .apexcharts-canvas svg{
    height: 600px !important;
} */

#radarChart {
    min-width: 300px;
    min-height: 300px;
    margin: auto;
}

@media (max-width: 768px) {
    #radarChart {
        min-width: 200px;
        min-height: 200px;
    }
}

.exchangeImage {
    display: flex;
    align-items: center;
}

.profileImage {
    display: flex;
    align-items: center;
}
.profileImage img {
    width: 100px;
    height: 100px;
}

.exchangeInfoBarSocialIcon {
    align-content: center;
    text-align: center;
    width: 40px;
    height: 40px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 100px;
    margin-left: 5px;
}
.exchangeInfoBarSocialIcon i {
    font-size: 1.1rem;
    color: var(--text-color);
}

.exchangeInfoBarSocialIcon:hover {
    opacity: 0.8;
    cursor: pointer;
    transition: 0.2s all;
}

.profileInfoBarSocialIcon {
    align-content: center;
    text-align: center;
    width: 40px;
    height: 40px;
    background-color: var(--brand-color);
    border-radius: 100px;
}
.profileInfoBarSocialIcon i {
    font-size: 1.5rem;
    color: var(--white-color);
    margin-top: 5px;
}

.profileInfoBarSocialIcon:hover {
    opacity: 0.8;
    cursor: pointer;
    transition: 0.2s all;
}

.profileBioBar {
    height: 100%;
    align-self: start;
    margin-top: 10px;
    overflow: hidden;
}
.profileBioBarContent {
    width: 100%; /* veya belirli bir genişlik */
    word-wrap: break-word; /* Uzun kelimeleri bölerek alt satıra geçirir */
    word-break: break-word; /* Kelimelerin satır sonunda kesilmesini sağlar */
}

#chart3 {
    min-height: 30px;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.scoreCardLeft {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 10px;
}

.foto_title_text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    z-index: 1;
}

.foto_title_text_right {
    color: #fcc018;
    font-size: 20px;
    font-weight: 700;
    z-index: 1;
}

.foto_yazi_title_first {
    position: absolute;
    left: 21.5%;
    top: 5%;
    z-index: 1;
}

.foto_yazi_title_second {
    position: absolute;
    left: 16%;
    top: 23.5%;
    z-index: 1;
}

.foto_yazi_title_third {
    position: absolute;
    left: 13.6%;
    top: 41%;
    z-index: 1;
}

.foto_yazi_title_fourth {
    position: absolute;
    left: 16%;
    top: 57%;
    z-index: 1;
}

.foto_yazi_title_five {
    position: absolute;
    left: 21.3%;
    top: 85.5%;
    z-index: 1;
}

.foto_yazi_title_six {
    position: absolute;
    right: 20.8%;
    top: 5%;
    z-index: 1;
}

.foto_yazi_title_seven {
    position: absolute;
    right: 16%;
    top: 23.5%;
    z-index: 1;
}

.foto_yazi_title_eight {
    position: absolute;
    right: 12.9%;
    top: 41%;
    z-index: 1;
}

.foto_yazi_title_nine {
    position: absolute;
    right: 17.2%;
    top: 56.9%;
    z-index: 1;
}

.foto_yazi_title_ten {
    position: absolute;
    right: 22.3%;
    top: 85.4%;
    z-index: 1;
}

.folder-mobile {
    display: block !important;
}

.complaint-div-mobile-active {
    display: none;
}
.foto_container-mobile {
    display: none;
}
#echange_fourth {
    top: 57.5%;
    left: 15.5%;
}
#echange_fourth_text {
    font-size: 20px !important;
}
#exchange_nine {
    top: 57.5%;
    right: 14.9%;
}
#exchange_nine_text {
    font-size: 20px !important;
}
@media only screen and (max-width: 1400px) {
    .foto_title_text_right {
        font-size: 18px;
    }
    .foto_title_text {
        font-size: 18px;
    }
    .foto_yazi_first_text {
        font-size: 18px;
    }
}
@media only screen and (max-width: 1300px) {
    .foto_title_text_right {
        font-size: 16px;
    }
    .foto_title_text {
        font-size: 16px;
    }
    .foto_yazi_first_text {
        font-size: 16px;
    }
}
@media only screen and (max-width: 1200px) {
    .foto_title_text_right {
        font-size: 15px;
    }
    .foto_title_text {
        font-size: 15px;
    }
    .foto_yazi_first_text {
        font-size: 15px;
    }
}
@media only screen and (max-width: 1100px) {
    .foto_title_text_right {
        font-size: 13px;
    }
    .foto_title_text {
        font-size: 13px;
    }
    .foto_yazi_first_text {
        font-size: 13px;
    }
    #exchange_nine_text {
        font-size: 12px !important;
    }
    #echange_fourth_text {
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 991px) {
    .profileImage img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    .foto_container-mobile {
        display: block;
        position: relative;
    }
    .foto_container {
        display: none !important;
    }
    .complaint-div-mobile-active {
        display: block;
        margin-bottom: 140%;
    }

    .complain_section_mobile {
        max-height: 1400px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .foto_yazi_first_center {
        font-size: 37px;
    }

    .foto_yazi_first_text {
        font-size: 31px;
    }

    .foto_info {
        font-size: 31px;
    }

    #exchange_photo_mobile .foto_title_text {
        font-size: 15px;
    }

    #exchange_photo_mobile .foto_title_text_right {
        font-size: 15px;
    }

    .foto_title_text {
        font-size: 31px;
    }

    .foto_title_text_right {
        font-size: 31px;
    }
    .foto_yazi_ten {
        top: 92.8%;
        left: 81%;
    }
    .foto_yazi_nine {
        top: 84.5%;
        left: 11%;
    }
    .foto_yazi_eight {
        top: 75.6%;
        left: 81.1%;
    }
    .foto_yazi_seven {
        top: 67.3%;
        left: 11%;
    }
    .foto_yazi_six {
        top: 58.5%;
        left: 80.9%;
    }
    .foto_yazi_five {
        top: 50.2%;
        left: 11%;
    }
    .foto_yazi_fourth {
        top: 41.5%;
        left: 81.5%;
    }
    .foto_yazi_third {
        top: 33%;
        left: 10.9%;
    }
    .foto_yazi_second {
        top: 24.3%;
        left: 81%;
    }
    .foto_info_first {
        top: 16.5%;
        left: 63%;
    }
    .foto_info_second {
        top: 24.5%;
        left: 60%;
    }
    .foto_info_third {
        top: 33.2%;
        left: 64%;
    }
    .foto_yazi_title_second {
        top: 25.4%;
        left: 22%;
    }
}
@media only screen and (max-width: 600px) {
    .foto_container-mobile {
        display: block;
        position: relative;
    }
    .foto_container {
        display: none !important;
    }
    .complaint-div-mobile-active {
        display: block;
        margin-bottom: 140%;
    }

    .complain_section_mobile {
        max-height: 1400px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .foto_yazi_center {
        left: 43%;
        top: 4.9%;
    }
    .foto_yazi_first_center {
        font-size: 13px !important;
    }
    .folder-mobile {
        display: none !important;
    }

    .foto_yazi_first_text {
        font-size: 13px !important;
    }

    .foto_info {
        font-size: 10px !important;
    }

    .foto_yazi_first {
        top: 15.9%;
        left: 12%;
    }

    .foto_yazi_second {
        top: 23.8%;
        left: 80%;
    }

    .foto_yazi_third {
        top: 32.9%;
        left: 12%;
    }

    .foto_yazi_fourth {
        top: 41.2%;
        left: 80%;
    }
    .foto_yazi_five {
        top: 49.9%;
        left: 12%;
    }
    #exchange_photo_mobile .foto_title_text {
        font-size: 15px;
    }

    #exchange_photo_mobile .foto_title_text_right {
        font-size: 15px;
    }
    .foto_yazi_six {
        top: 58%;
        left: 80%;
    }

    .foto_yazi_seven {
        top: 67.5%;
        left: 12%;
    }

    .foto_yazi_eight {
        top: 75.2%;
        left: 79.8%;
    }

    .foto_yazi_nine {
        top: 84.2%;
        left: 12%;
    }
    .foto_yazi_ten {
        top: 92.9%;
        left: 80.1%;
    }

    .foto_info_first {
        top: 17.3%;
        left: 68%;
    }

    .foto_info_second {
        top: 25.4%;
        left: 63%;
    }

    .foto_info_third {
        top: 34%;
        left: 64%;
    }

    .foto_info_fourth {
        top: 42.6%;
        left: 64%;
    }

    .foto_info_five {
        top: 51.2%;
        left: 69.3%;
    }

    .foto_info_six {
        top: 59.8%;
        left: 62.3%;
    }

    .foto_info_seven {
        top: 68.4%;
        left: 69.3%;
    }

    .foto_info_eight {
        top: 76.4%;
        left: 67.3%;
    }

    .foto_info_nine {
        top: 85.4%;
        left: 70.3%;
    }

    .foto_info_ten {
        top: 93.5%;
        left: 63.3%;
    }

    .foto_title_text {
        font-size: 14px;
    }

    .foto_title_text_right {
        font-size: 14px;
    }

    .foto_yazi_title_first {
        top: 17.3%;
        left: 34%;
    }

    .foto_yazi_title_second {
        top: 25.4%;
        left: 21%;
    }

    .foto_yazi_title_third {
        top: 34%;
        left: 33%;
    }

    .foto_yazi_title_fourth {
        top: 42.6%;
        left: 32%;
    }

    .foto_yazi_title_five {
        top: 51.2%;
        left: 33%;
    }

    .foto_yazi_title_six {
        top: 59.8%;
        left: 26%;
    }

    .foto_yazi_title_seven {
        top: 68.4%;
        left: 36%;
    }

    .foto_yazi_title_eight {
        top: 76.4%;
        left: 22%;
    }

    .foto_yazi_title_nine {
        top: 85.4%;
        left: 32%;
    }

    .foto_yazi_title_ten {
        top: 93.5%;
        left: 37%;
    }
}
@media only screen and (max-width: 991px) {
    .foto_container-mobile {
        display: block;
        position: relative;
    }
    .foto_container {
        display: none !important;
    }
    .complaint-div-mobile-active {
        display: block;
        margin-bottom: 140%;
    }

    .complain_section_mobile {
        max-height: 1400px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .foto_yazi_center {
        left: 43%;
        top: 4.9%;
    }
    .foto_yazi_first_center {
        font-size: 18px;
    }
    .folder-mobile {
        display: none !important;
    }

    .foto_yazi_first_text {
        font-size: 18px;
    }

    .foto_info {
        font-size: 15px;
    }

    .foto_yazi_first {
        top: 15.9%;
        left: 12%;
    }

    .foto_yazi_second {
        top: 23.8%;
        left: 80%;
    }

    .foto_yazi_third {
        top: 32.9%;
        left: 12%;
    }

    .foto_yazi_fourth {
        top: 41.2%;
        left: 80%;
    }
    .foto_yazi_five {
        top: 49.9%;
        left: 12%;
    }
    #exchange_photo_mobile .foto_title_text {
        font-size: 15px;
    }

    #exchange_photo_mobile .foto_title_text_right {
        font-size: 15px;
    }
    .foto_yazi_six {
        top: 58%;
        left: 80%;
    }

    .foto_yazi_seven {
        top: 67.5%;
        left: 12%;
    }

    .foto_yazi_eight {
        top: 75.2%;
        left: 79.8%;
    }

    .foto_yazi_nine {
        top: 84.2%;
        left: 12%;
    }
    .foto_yazi_ten {
        top: 92.9%;
        left: 80.1%;
    }

    .foto_info_first {
        top: 17.3%;
        left: 68%;
    }

    .foto_info_second {
        top: 25.4%;
        left: 63%;
    }

    .foto_info_third {
        top: 34%;
        left: 64%;
    }

    .foto_info_fourth {
        top: 42.6%;
        left: 64%;
    }

    .foto_info_five {
        top: 51.2%;
        left: 69.3%;
    }

    .foto_info_six {
        top: 59.8%;
        left: 62.3%;
    }

    .foto_info_seven {
        top: 68.4%;
        left: 69.3%;
    }

    .foto_info_eight {
        top: 76.4%;
        left: 67.3%;
    }

    .foto_info_nine {
        top: 85.4%;
        left: 70.3%;
    }

    .foto_info_ten {
        top: 93.5%;
        left: 63.3%;
    }

    .foto_title_text {
        font-size: 14px;
    }

    .foto_title_text_right {
        font-size: 14px;
    }

    .foto_yazi_title_first {
        top: 17.3%;
        left: 34%;
    }

    .foto_yazi_title_second {
        top: 25.4%;
        left: 21%;
    }

    .foto_yazi_title_third {
        top: 34%;
        left: 33%;
    }

    .foto_yazi_title_fourth {
        top: 42.6%;
        left: 32%;
    }

    .foto_yazi_title_five {
        top: 51.2%;
        left: 33%;
    }

    .foto_yazi_title_six {
        top: 59.8%;
        left: 26%;
    }

    .foto_yazi_title_seven {
        top: 68.4%;
        left: 36%;
    }

    .foto_yazi_title_eight {
        top: 76.4%;
        left: 22%;
    }

    .foto_yazi_title_nine {
        top: 85.4%;
        left: 32%;
    }

    .foto_yazi_title_ten {
        top: 93.5%;
        left: 37%;
    }
}
@media only screen and (max-width: 767px) {
    .crypto_ogaudit_image {
        display: none;
    }
}

.folder_active {
    border: 2px solid rgb(222, 226, 230) !important;
}

.og_evaluate_con {
    width: 49%;
}

@media only screen and (max-width: 900px) {
    .og_evaluate_con {
        width: 100% !important;
    }
}

.fa-2x {
    font-size: 1.7em;
}

#socialLink .modal-body {
    background-color: #0d1421;
    border: 1px solid gray;
    border-bottom: 1px solid gray !important;
}

#explorerLink .modal-body {
    background-color: #0d1421;
    border: 1px solid gray;
    border-bottom: 1px solid gray !important;
}

#webLink .modal-body {
    background-color: #0d1421;
    border: 1px solid gray;
    border-bottom: 1px solid gray !important;
}

.side_bar_category_none {
    position: fixed;
    top: 16%;
    right: -2000%;
    transition: right 0.5s ease-in;
}
.side_bar_category {
    position: fixed;
    top: 16%;
    right: 0%;
    width: 11%;
    border-radius: 8px;
    z-index: 99999;
    transition: right 0.5s ease-in;
}
.og-code {
    border: 1px solid #4f4f4f;
    width: 100%;
    height: 13.6%;
    border-radius: 8px;
}

.top-profil {
    border: 1px solid #4f4f4f;
    border-radius: 8px;
}

.avatar-square {
    width: 100%;
    height: 84.9%;
    border: 1px solid #4f4f4f;
    border-radius: 8px;
}

.profil-color2 {
    background-color: #0d1421;
}

.avatar {
    border-radius: 100px;
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.social-link-profil {
    font-size: 20px;
}

.social-link-profil:hover {
    color: #ffc107 !important;
}

.profil-color {
    background-color: #111;
}

.profil-info-box {
    border: 1px solid #4f4f4f;
    border-radius: 5px;
    background-color: black;
}

.fav-table-profile {
    background-color: black;
}

.fav-table-profile-border {
    background-color: var(---color-bg-2);
    border: 1px solid #0d1421;
    border-radius: 5px;
}

.fav-table {
    background-color: #0d1421;
    flex-direction: row;
}

.profil-text-size {
    font-size: 25px;
}

.profil-text-size2 {
    font-size: 20px;
}

.settings-icon-size {
    font-size: 35px;
}

.profileCard {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
}

@media only screen and (max-width: 900px) {
    .avatar {
        width: 100%;
    }
    .profil-text-size2 {
        font-size: 13px;
    }

    .avatar-square {
        width: 100%;
    }

    .og-code {
        width: 100%;
    }

    .top-profil {
        margin-top: 15px;
        padding: 15px;
    }

    .fav-table {
        flex-direction: column;
    }
}
.og-code-settings {
    border: 1px solid gray;
    width: 100%;
    background-color: #0d1421;
    border-radius: 5px;
}

.top-profil-settings {
    border: 1px solid gray;
    background-color: var(---color-bg-1);
    border-radius: 5px;
    width: 55%;
}

.setting-color {
    background-color: var(---color-bg-2);
}

.avatar-square-settings {
    width: 100%;
    height: auto;
    border: 1px solid gray;
    background-color: #0d1421;
    border-radius: 5px;
}

.avatar-settings {
    border-radius: 100px;
    width: 200px;
    height: 200px;
}

.social-link-profil-settings {
    font-size: 20px;
}

.social-link-profil-settings:hover {
    color: #ffc107 !important;
}

.setting-text-title {
    font-size: 15px;
    font-weight: 500;
}

.profil-info-box-settings {
    border-radius: 5px;
    width: 100%;
}

.hover-overlay-container {
    position: relative;
    width: 300px;
    border-radius: 100px;
}

.hover-overlay-container:hover {
    opacity: 0.6;
    transition: 0.5s all;
}

.hover-overlay-container:hover .overlay-image {
    opacity: 0.3;
}

.hover-overlay-container:hover .overlay-btn-container {
    opacity: 1;
}

.hover-overlay-container .overlay-image {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    transition: 0.5s ease;
    backface-visibility: hidden;
}

.hover-overlay-container .overlay-btn-container {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transition: 0.5s ease;
    text-align: center;
    transform: translate(-50%, -50%);
}

.profile-image-add {
    font-size: 30px;
    cursor: pointer;
    color: #fff;
}

.profil-setting-font-size {
    font-size: 25px;
    word-break: break-all;
}

.settings-icon-size {
    font-size: 35px;
}

.setting-menu {
    border-radius: 15px;
}

.settings-button {
    border-bottom: 1px solid gray;
    padding: 15px;
}

.settings-button .nav-link {
    border-radius: 4px;
    background-color: #b8babc;
}

.settings-button .nav-link:hover {
    background-color: #f1c541;
}

.settings-button .nav-link:focus {
    background-color: #f1c541;
    border: 1px solid #ffc107;
}

.settings-button .nav-item.show .nav-link,
.settings-button .nav-link.active {
    background-color: #f1c541 !important;
    border: 1px solid #ffc107;
}

#setting-form .form-control {
    background-color: transparent;
    color: white;
    display: flex;
    text-align: center;
}

#setting-form .form-control:focus {
    background-color: white;
    color: black;
}

#social .form-control {
    background-color: transparent;
    color: white;
    display: flex;
    text-align: center;
}

#social .form-control:focus {
    background-color: white;
    color: black;
}

.setting-link-active {
    color: #ffc107 !important;
}

.setting-menu-style {
    background-color: #111 !important;
    border-radius: 5px !important;
}

.setting-menu-style-mobile {
    background-color: #0d1421 !important;
    border-radius: 5px !important;
}

.toggle-wrapper {
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative;
    border-radius: 0.5em;
    padding: 0.125em;
}

.toggle-checkbox {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 1;
    border-radius: inherit;
    width: 10%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.toggle-container {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 0.375em;
    width: 3em;
    height: 1.5em;
    background-color: var(--box-background-color);
    box-shadow: inset 0 0 0.0625em 0.125em rgb(255 255 255 / 0.2),
        inset 0 0.0625em 0.125em rgb(0 0 0 / 0.4);
    transition: background-color 0.4s linear;

    .toggle-checkbox:checked + & {
        background-color: var(--brand-color);
    }
}

.toggle-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0.0625em;
    border-radius: 0.3125em;
    width: 1.375em;
    height: 1.375em;
    background-color: #e4ddcf;
    box-shadow: inset 0 -0.0625em 0.0625em 0.125em rgb(0 0 0 / 0.1),
        inset 0 -0.125em 0.0625em rgb(0 0 0 / 0.2),
        inset 0 0.1875em 0.0625em rgb(255 255 255 / 0.3),
        0 0.125em 0.125em rgb(0 0 0 / 0.5);
    transition: left 0.4s /*cubic-bezier(.65, 1.35, .5, 1)*/;

    .toggle-checkbox:checked + .toggle-container > & {
        left: 1.5625em;
    }
}

:root {
    ---color-text-1: rgba(255, 255, 255, 0.8);
    ---color-text-2: rgba(255, 255, 255, 0.8);
    ---color-text-3: #ffc107;
    ---color-bg-1: #0d1421;
    ---color-bg-2: #24283b;

    /*ProgressBar Color*/
    --progress-low: #ffc107;
    --progress-hight: #28a745;
    --progress-warning: #ff0707;

    /*k:36 yeni tanımlamalar*/
    --background-color: rgb(255, 255, 255);
    --brand-color: #f7931a;
    --secondary-color: #afafaf;
    --logo-text-color: #1d284c;

    --border-color: rgb(239 242 245 / 1);
    --head-text-color: rgb(61, 77, 99);
    --head-text-color-solid: rgb(100 116 139/1);
    --menu-text-color: #334155;
    --menu-text-color-solid: rgb(100 116 139/1);

    --chart-text-color: #f7931a;
    --text-color: rgb(15 23 42/1);
    --white-color: #070707;
    --text-color-solid: #647489;
    --text-color-solid-more-dark: #0f1012;
    --coin-color-text: rgb(51 65 85/1);
    --coin-solid-color-text: rgb(81, 89, 108);
    --detailpage-solid-color: #3a4758;
    --shortcoinname-color: #9ba1b8;

    --button-text-color: #ffffff;
    --button-solid-color: rgb(228, 233, 238);
    --outline-button-color: #f7941a2d;
    --outline-button-text-color: #f7941a;
    --input-background-color: rgb(241 245 249/1);
    --modal-background-color: rgb(255, 255, 255);
    --box-background-color: rgb(249, 249, 249);
    --reviewcard-background-color: rgb(249, 249, 249);
    --alert-background-color: rgb(255, 255, 255);

    --box-border-color: rgb(237, 237, 237);

    --hover-color-text: rgb(243, 237, 219);
}

.dark-theme {
    ---color-text-1: rgba(255, 255, 255, 0.8);
    ---color-text-2: rgba(255, 255, 255, 0.8);
    ---color-text-3: #ffc107;
    ---color-bg-1: #0d1421;
    ---color-bg-2: #24283b;

    /*k:36 yeni tanımlamalar*/
    --background-color: /* #0e141a;*/ #0c1218;
    --brand-color: #f7931a;
    --secondary-color: #d1d1d1;
    --border-color: #212d3b;
    --head-text-color: rgb(223, 229, 236, 1);
    --head-text-color-solid: rgb(158 176 199 / 1);
    --menu-text-color-solid: rgb(158 176 199 / 1);
    --menu-text-color: rgb(223 229 236/1);
    --logo-text-color: #ffffff;
    --text-color: rgb(223 229 236 /1);
    --white-color: #fff;
    --text-color-solid: rgb(158 176 199/1);
    --text-color-solid-more-dark: rgb(154 157 161/1);
    --coin-color-text: rgb(190 203 218 /1);
    --coin-solid-color-text: rgb(151, 161, 175);
    --shortcoinname-color: #485461;

    --button-text-color: #5f390d;
    --button-solid-color: rgb(49, 59, 70);
    --outline-button-color: #f7941a2d;
    --input-background-color: rgb(27 35 45/1);
    --modal-background-color: rgb(27 35 45/1);
    --box-background-color: #0f151c;
    --reviewcard-background-color: /* #131e29; */ #0f151c;
    --alert-background-color: #15202b;

    --box-border-color: #1b242f;

    --hover-color-text: #202933;
}

* {
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    border: 0 solid rgb(229, 231, 235);
}
body {
    background-color: var(--background-color);
}
body a {
    color: var(--secondary-color);
    /* text-decoration: none; */
}

a:hover {
    color: var(--brand-color) !important;
    /* text-decoration: underline; */
}

.minh-64 {
    min-height: 64px;
}

.minh-24 {
    min-height: 24px;
}

.minw-100 {
    min-width: 100px;
}

.minh-178 {
    min-height: 178px;
}

#toggle-wrapper a {
    display: inline;
}

.section-stats {
    min-height: 200px;
    display: flex;
    align-items: center;
}

/*Backtotop Roket Css*/
#backtotop-btn {
    visibility: hidden;
    position: fixed;
    cursor: pointer;
    right: 16px;
    bottom: 16px;
    user-select: none;
    transition: 1s;
}

.rocket {
    display: block;
    font-size: 50px;
    transform: rotate(315deg);
}

.coinCustomText a {
    color: var(--brand-color) !important;
    font-weight: bold;
}


.glossary > a:hover{
    background-color: var(--hover-color-text);
}

.coinCustomText a:hover {
    text-decoration: underline;
}

.coinDangerCustomText a {
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    font-weight: bold;
}

.coinDangerCustomText a:hover {
    text-decoration: underline;
}

.arrow-top {
    display: block;
    width: 64px;
    height: 64px;
    pointer-events: none;
    background-color: #0fb;
    border-radius: 50%;
}

.slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-out-top {
    -webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
        both;
    animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.scale-out-center {
    -webkit-animation: scale-out-center 0.5s
        cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

@keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

#navigationMenu {
    border-bottom: 1px solid var(--border-color);
    height: 65px;
}
.info-menu {
    border-bottom: 1px solid var(--border-color);
    height: 52px;
}

.logo-img {
    width: 2.5rem;
}
.mobileLogo {
    width: 2.5rem !important;
}

.logo-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--logo-text-color);
}

.logo-test-text {
    font-size: 0.6rem;
    font-weight: 300;
    color: #b3b3b3;
}
.inputContainer {
    /* width: 32%; */
    align-items: center;
    display: flex;
}
.search-box {
    /* height: 100%; */
    width: 100%;
    position: relative;
}
#searchBoxOpenCardClose:hover {
    color: var(--brand-color);
    cursor: pointer;
}
#search_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 8px;
    font-size: 1rem;
    padding-left: 35px;
}
#search_space_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    padding-left: 55px;
}
#search_space_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}

#ask_search_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    padding-left: 55px;
}
#ask_search_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}
#search_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 0.75rem;
    font-weight: 500;
}

.searchIcon {
    position: absolute;
    top: 35%;
    left: 13px;
    color: var(--text-color-solid);
    font-size: 0.85rem;
}

.space_searchIcon {
    position: absolute;
    top: 35%;
    left: 25px;
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.ask_search_inputIcon {
    position: absolute;
    top: 35%;
    left: 25px;
    color: var(--text-color-solid);
    font-size: 1.2rem;
}

.searchBoxOpenCard {
    position: absolute;
    right: 10% !important;
    top: 7%;
    width: 500px;
    padding: 13px 25px 0px;
    display: flex;
    align-items: center;
    background-color: var(--input-background-color);
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    z-index: 99999;
    opacity: 0; /* Başlangıçta tamamen görünmez */
    visibility: hidden; /* Görünmezliği garantilemek için */
    transition: right 0.2s ease, opacity 0.2s ease; /* Animasyon süresi ve kolaylaştırma */
}

.searchBoxOpenCard.show {
    right: 0px; /* Kutuyu ekranın içine kaydır */
    opacity: 1; /* Görünürlüğü geri getir */
    visibility: visible; /* Artık görünür yap */
}

.searchBoxOpenCardDetail {
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    background-color: var(--input-background-color);
    border-radius: 0px 0px 12px 12px;
    border-top: none; /* Üst sınır burada da yok */
}
.searchBoxOpenCardDetail hr {
    background-color: var(--brand-color);
    height: 1px;
    border: none;
}

.list-box {
    margin: 0px;
    padding: 0px 21px 24px;
    width: 99%;
    overflow: hidden auto;
    max-height: 80vh;
    display: grid;
    grid-template-rows: min-content;
    grid-auto-columns: 100%;
    row-gap: 16px;
}

.searchBoxOpenCardInput {
    color: var(--text-color);
    font-weight: 600;
    margin-left: 6px;
    margin-right: auto;
    width: 100% !important;
    height: 40px;
    background: none;
    text-overflow: ellipsis;
    transition: border-color 0.4s;
    border: none;
    outline: none;
    font-size: 1.1rem;
    padding: 0px !important;
}
.searchBoxOpenCardInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

#cryptoDiv {
    display: none;
}
#exchangeDiv {
    display: none;
}

.exchangeAboutBox {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    max-height: 780; /* Başlangıçta yüksekliği sınırlıyoruz, ihtiyaç duyarsanız değeri değiştirebilirsiniz */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* Animasyonlu geçiş */
}

.exchangeAboutBox.expanded {
    max-height: 10000em; /* İçerik açıldığında sınırsız yüksekliğe sahip olur */
}

.short-content {
    display: inline;
}

.full-content {
    display: none;
}

.mobileCloseIcon:hover {
    color: var(--brand-color);
    cursor: pointer;
}
@media only screen and (max-width: 1200px) {
    .searchBoxOpenCard {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 100000; /* Z-index değerini artırdık */
        background-color: var(--input-background-color);
        opacity: 1;
        visibility: hidden; /* Görünmezliği garantilemek için */
        padding: 20px;
        border-radius: 0; /* Tam ekran görünüm için köşeleri yuvarlatmayı kaldır */
        flex-direction: column;
        transition: right 0.8s ease, opacity 0.8s ease; /* Animasyon süresi ve kolaylaştırma */
    }

    .searchBoxOpenCardInput {
        font-size: 1.1rem;
        padding: 10px;
    }

    .list-box {
        max-height: 80vh;
        padding: 0px;
        overflow-y: auto;
    }

    .searchBoxOpenCardDetail {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--input-background-color);
        padding: 0;
        border-radius: 0;
        width: 100%;
        height: 100%;
    }
}
@media only screen and (max-width: 768px) {
    .counter {
        font-size: 2rem !important;
    }
}

.dataTableSearch {
    display: none !important;
    width: 100%;
    position: relative;
}
#coinSearch {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 15px;
    font-size: 1rem;
    padding-left: 50px;
}
#coinSearch::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.search-Icon {
    position: absolute;
    top: 29%;
    left: 29px;
    color: var(--text-color-solid);
    font-size: 1.5rem;
}

.form-control:focus {
    border-color: none !important;
    box-shadow: none !important;
}
/* Checkbox Gizleme */
.theme-checkbox {
    opacity: 0;
    position: absolute;
}

/* Toggle Label */
.theme-checkbox-label {
    background-color: var(--border-color);
    width: 65px;
    height: 30px;
    border-radius: 50px;
    position: relative;
    padding: 7px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease-in-out;
}

/* Iconlar */
.fa-moon,
.fa-sun {
    color: var(--brand-color);
}

/* Top */
.theme-checkbox-label .ball {
    background-color: var(--text-color);
    width: 26px;
    height: 26px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
}

/* Checkbox Checked Durumunda Topu Kaydır */
.theme-checkbox:checked + .theme-checkbox-label .ball {
    transform: translateX(35px);
}

/* Mobil İçin Özel Düzeltmeler */
@media only screen and (max-width: 768px) {
    .theme-checkbox-label {
        width: 60px; /* Küçük ekranlarda genişliği azalt */
        height: 28px; /* Küçük ekranlarda yüksekliği azalt */
    }
    .theme-checkbox-label .ball {
        width: 24px; /* Küçük ekranlar için top boyutunu ayarla */
        height: 24px;
        top: 2px;
        left: 2px;
    }
    .theme-checkbox:checked + .theme-checkbox-label .ball {
        transform: translateX(32px); /* Mobilde uygun mesafeye kaydır */
    }
}

.mobileSocialBar {
    border-top: 1px solid var(--border-color);
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}
.mobileSocialBar i {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: var(--text-color-solid);
    margin-right: 20px;
}
.mobileSocialBar i:hover {
    color: var(--brand-color);
}

.textXSmall {
    font-size: 0.75rem;
}
.textSmall {
    font-size: 0.875rem;
}

.text18Px {
    font-size: 1.125rem;
}
.textMd {
    font-size: 1.25rem;
}
.textXl {
    font-size: 2rem;
    line-height: 1.2;
}
.textX-L {
    font-size: 2.5rem;
    line-height: 1.2;
}

.textXXL {
    font-size: 3rem;
}
.text64px {
    font-size: 4rem;
}

.font-300 {
    font-weight: 300 !important;
}
.font-400 {
    font-weight: 400 !important;
}
.font-500 {
    font-weight: 500 !important;
}
.font-700 {
    font-weight: 700 !important;
}
.font-800 {
    font-weight: 800 !important;
}

.counter {
    transition: none !important;
    animation: none !important;
}

.coinTextPrice {
    font-size: 0.875rem;
    font-weight: 500;
}

.coinColor {
    color: var(--coin-color-text);
}

.baseWhiteColor {
    color: var(--text-color);
}

.cardTitleText {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}
.cardTitleMoreText {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
    white-space: nowrap;
}
.coinSmallText {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
}

.DatatableCoinText {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
}
.DatatableCoinSmallText {
    padding-left: 5px !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
}

.CardLink a:hover {
    border-radius: 5px;
    background-color: var(--hover-color-text);
    cursor: pointer;
}

.solidTextColorMoreDark {
    color: var(--text-color-solid-more-dark);
}

.detailpageTextColor {
    color: var(--detailpage-solid-color);
}

.shortCoinNameColor {
    color: var(--shortcoinname-color);
}

.coinCard {
    background-color: var(--reviewcard-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    max-width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    /*height: 225px;*/
}

.coinCard .card-body {
    flex-grow: 1; /* İçeriğin alanı doldurmasını sağlar */
    display: flex;
    flex-direction: column;
}

.coinCardContent {
    flex-grow: 1; /* İçerik alanını genişletir ve footer'ı en alta iter */
    font-weight: 500;
}

.coinCardFooter {
    margin-top: auto; /* Footer her zaman en altta kalır */
}

.coinCardColorRed {
    color: #eb0102;
}
.coinCardColorOrange {
    color: #fc6c03;
}
.coinCardColorYellow {
    color: #bdb322;
}
.coinCardColorGreen {
    color: #00b200;
}

.cryptoDetailCoinScore {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-color);
}
.cryptoDetailCoinScoreMobile {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-color);
    align-content: end;
}

.about-container {
    max-height: 330px;
    border: 1px solid var(--box-border-color);
    background-color: var(--box-background-color);
    border-radius: 5px;
    padding: 20px;
    overflow: hidden;
}

.about_none {
    display: none;
}

.about_block {
    display: block;
}

.ogSpaceContentContainer > p,
.ogSpaceContentContainer > ul > li,
.accordion .accordion-item .accordionContent > p,
.accordion .accordion-item .accordionContent > ul > li,
.about-text {
    color: var(--text-color-solid);
}

.ogSpaceContentContainer > p > a,
.ogSpaceContentContainer > ul > li > a,
#about > div > div.about-container > div > p > u > a,
#about > div > div.about-container > div > p > strong > u > a,
#about > div > div.about-container > div > p > a,
.accordion .accordion-item .accordionContent > p > a,
.accordion .accordion-item .accordionContent > ul > li > a,
#about > div > div.about-container > div > p > strong > a {
    color: var(--text-color) !important;
    text-decoration: underline;
}

.ogSpaceContentContainer > p > a:hover,
.ogSpaceContentContainer > ul > li > a:hover,
#about > div > div.about-container > div > p > u > a:hover,
#about > div > div.about-container > div > p > strong > u > a:hover,
#about > div > div.about-container > div > p > a:hover,
.accordion .accordion-item .accordionContent > p > a:hover,
.accordion .accordion-item .accordionContent > ul > li > a:hover,
#about > div > div.about-container > div > p > strong > a:hover {
    color: var(--brand-color) !important;
}

.aboutHeader {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.ogSpaceContentContainer > h3,
#about > div > div.about-container > div > h3 {
    color: var(--text-color);
    font-weight: 600 !important;
    font-size: 1.25rem;
}

.updateHeader {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 0.5px solid var(--border-color);
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.featuredMobil {
    display: none;
}

.featuredImage{
    width: 50%;
}

@media only screen and (max-width: 991px) {
    .coinCard {
        background-color: var(--reviewcard-background-color);
        border: 1.5px solid var(--box-border-color);
        border-radius: 10px;
        max-width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /*height: 225px;*/
    }

    .coinCard .card-body {
        flex-grow: 1; /* İçeriğin alanı doldurmasını sağlar */
        display: flex;
        flex-direction: column;
    }

    .featuredImage{
        width:25%;
    }
}

@media only screen and (max-width: 1024px) {
    .featuredMobil {
        display: block;
    }
}
.text-justify {
    text-align: justify;
}

/*Login Modal Start*/
.modal-content {
    background-color: var(--box-background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Ortak stiller */
.loginButton,
.signInButton {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-solid);
    padding-bottom: 0.325rem;
    border-bottom: 2px solid var(--border-color); /* Ortak border stili */
    cursor: pointer; /* Ortak cursor stili */
}

/* Hover durumları */
.loginButton:hover,
.signInButton:hover {
    border-bottom: 2px solid var(--hover-color-text); /* Hover durumunda border rengi */
}

/* Aktif sekmenin border rengi */
.loginButton.active,
.signInButton.active {
    color: var(--text-color);
    border-bottom: 2px solid var(--brand-color);
}

/* Tüm tab içerikleri başlangıçta gizli */
.TabsContent .loginContent,
.TabsContent .signInContent {
    display: none;
}

/* Sadece aktif olan içerik görünür olacak */
.TabsContent .loginContent.active,
.TabsContent .signInContent.active {
    display: block;
}

.FormInput {
    height: 50px;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 1rem;
    padding-left: 35px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.FormInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.FormInput:focus {
    border: 2px solid var(--brand-color);
}

.supportUsInput {
    width: 4rem;
    height: 50px;
    font-size: 0.875rem !important;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 1rem;
    padding-left: 10px;
    padding-right: 60px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.supportUsInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.75rem;
    font-weight: 500;
}

.supportUsInput:focus {
    border: 2px solid var(--brand-color);
}

.copy-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border: none;
    cursor: pointer;
    border-radius: 5px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.copy-btn:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filterInput {
    height: 35px;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color) !important;
    padding: 5px;
    font-size: 1rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.filterInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.filterInput:focus {
    border: 2px solid var(--brand-color);
}

.login-icon-email-left {
    position: absolute;
    left: 17px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.login-icon-password-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.login-icon-see-right {
    position: absolute;
    right: 17px;
    top: 24px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}

.register-icon-email-left {
    position: absolute;
    left: 17px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-password-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-referance-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-see-right {
    position: absolute;
    right: 17px;
    top: 24px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
/*Login Modal End*/

.controlPanelMenu {
    background-color: var(--box-background-color) !important;
    border: 1.5px solid var(--box-border-color) !important;
    color: var(--text-color) !important;
    border-radius: 5px;
    width: 100% !important;
}

.controlPanelMenu a {
    color: var(--text-color) !important;
    border-radius: 5px;
    width: 100% !important;
}

.bgVarColor1 {
    background-color: var(---color-bg-1);
}
.colorVarText2 {
    color: var(---color-text-2);
}

.bgColor111 {
    background-color: #111;
}

.border1pxSolid4f {
    border: 1px solid #4f4f4f;
}
.borderRight1pxSolid4f {
    border-right: 1px solid #4f4f4f;
}
.bgBlackCss {
    background-color: black;
}
.bordeBottom1PxSolidGray {
    border-bottom: 1px solid gray;
}
.backGroundColorBgSecondary {
    background-color: var(--bs-secondary-bg);
}
.page-link:hover {
    background-color: var(--brand-color) !important;
    color: var(--text-color) !important;
    border: none !important;
}
#coinTable_previous ::before {
    content: "<";
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable_next ::before {
    content: ">";
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable2_previous ::before {
    content: "<";
    font-size: 1rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable2_next ::before {
    content: ">";
    font-size: 1rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}
#tbl_head {
    font-size: 0.875rem !important;
}
#tbl_head th {
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 600 !important;
}
#homeTableBody tr {
    vertical-align: middle !important;
}
.detayTablo {
    font-size: 0.875rem !important;
}
.detayTablo th {
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 600 !important;
}
.text-white {
    color: rgba(255, 255, 255, 0.8) !important;
}
.text-light {
    color: rgba(255, 255, 255, 0.8) !important;
}

.moreDetail {
    color: var(--brand-color);
    transition: 0.2s ease-in-out;
}
.moreDetail:hover {
    color: #ffc107;
    transition: 0.2s ease-in-out;
}

.complaints_textarea::placeholder {
    color: #b8babc;
    /* veya istediğiniz başka bir renk */
}

.color-text-1 {
    color: var(--text-color-solid) !important;
}

.card-img-top {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    object-fit: cover;
    margin-bottom: 15px;
}

.ogspaceCard {
    height: 400px !important;
    border: none !important;
    background: none;
    border-bottom: 0.5px solid var(--brand-color) !important;
    border-radius: 0px;
}
.ogspace_title:hover {
    color: var(--brand-color);
    cursor: pointer;
}

/* .main-news-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}


.news-img {
    width: 220px !important;
    height: 162px !important;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.news-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.news-content-bg {
    background-color: #f7941a9d;
    color: var(--white-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
    }

    .news-img {
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
    }

    .news-item div {
        align-items: flex-start;
        text-align: left;
    }

    .news-item .align-self-end {
        align-self: flex-start !important;
    }
}
 */

.headingsmall {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-color);
}

@media only screen and (max-width: 991px) {
    .color-text-1 {
        font-size: 11px;
    }
}
.color-text-2 {
    color: #b8babc !important;
}

.color-text-3 {
    /* border-bottom: 3px solid #ffc107; */
    color: #ffc107 !important;
}

.color-text-4 {
    color: #0000 !important;
}

.heading-info-text-red {
    color: red !important;
}

.heading-info-text-green {
    color: green !important;
}

.heading-info-text {
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--head-text-color);
    font-size: 0.75rem;
    font-weight: 200;
}

.heading-info-solid-text {
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--head-text-color-solid);
    font-size: 0.75rem;
    font-weight: 600;
}

.heading-info-solid-text-red {
    color: red;
}

.heading-info-solid-green {
    color: green;
}

/* .a2 {
    color: #b8babc;
    font-size: 12px;
    background-color: black;
} */
.accordion-flush .accordion-item {
    background-color: black !important;
}
.a2-mode {
    color: #b8babc;
    font-size: 15px;
}

@media screen and (max-width: 1200px) {
    .logo {
        width: 100% !important;
    }
    .exchanges-image {
        width: 50px;
        border-radius: 10px;
    }
}

.footer {
    border-top: 2px solid var(--border-color);
    background-color: var(--box-background-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 sütunlu bir yapı */
    gap: 3rem; /* Sütunlar arası boşluk */
}

.footer-logo {
    grid-column: span 2; /* Logoya 2 sütun yer ayır */
}
/* .footer-logo a img {
    width: 7rem;
} */

.footer-links-section,
.footer-social,
.footer-support {
    grid-column: span 1; /* Diğerlerine 1 sütun */
}
.footer-links a {
    color: var(--text-color-solid);
    font-size: 0.875rem;
}
.footer-links a:hover {
    color: var(--brand-color);
}


.ogReviewsSystemImage {
    position: relative;
    width: 100%;
}
.ogReviewsSystemImageScore {
    position: absolute;
    top: 33%;
    right: 49%;
    color: var(--text-color-solid);
    font-size: 2.5rem;
    font-weight: 600;
}
.ogReviewsSystemCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    max-width: 85%;
    position: relative;
}
.ogReviewsSystemScoreLeft {
    font-size: 1.5rem;
    font-weight: 600;
    border-right: 0.5px solid var(--detailpage-solid-color);
    color: var(--text-color-solid);
}
.ogReviewsSystemScoreRight {
    font-size: 1.5rem;
    font-weight: 600;
    border-left: 0.5px solid var(--detailpage-solid-color);
    color: var(--text-color-solid);
}

.ogReviewsSystemText {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}

.ogReviewsSystemInfo {
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
    color: var(--brand-color);
}
.ogReviewsSystemInfoLeft {
    position: absolute;
    top: 7px;
    left: 7px;
    cursor: pointer;
    color: var(--brand-color);
}
.ogReviewsSystemInfo,
.ogReviewsSystemInfoLeft i {
    font-size: 0.85rem;
}
.border-right {
    border-right: 1px dashed var(--brand-color);
}
.border-left {
    border-left: 1px dashed var(--brand-color);
}

.mb-20 {
    margin-bottom: 20px;
}
.mb-10 {
    margin-bottom: 10px;
}

.ogtooltip {
    --bs-tooltip-bg: var(--box-border-color);
    --bs-tooltip-color: var(--text-color);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: 400px;
    border-radius: 10px;
}

.fa-thumbs-up:hover,
.fa-thumbs-down:hover {
    color: var(--brand-color);
    cursor: pointer;
}

.boxTooltip {
    width: 25% !important;
    font-size: 0.875rem;
}

/* Mobil cihazlar için düzenleme */
@media (max-width: 768px) {
    .ogReviewsSystemCard {
        max-width: 100%;
    }
    .ogReviewsSystemScoreLeft {
        font-size: 1rem;
        font-weight: 600;
        border-right: 0.5px solid var(--detailpage-solid-color);
        color: var(--text-color-solid);
    }
    .ogReviewsSystemScoreRight {
        font-size: 1rem;
        font-weight: 600;
        border-left: 0.5px solid var(--detailpage-solid-color);
        color: var(--text-color-solid);
    }

    .ogReviewsSystemText {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-color-solid);
    }

    .ogReviewsSystemImage {
        position: relative;
        width: 60%;
    }
    .ogReviewsSystemImageScore {
        position: absolute;
        top: 33%;
        right: 49%;
        color: var(--text-color-solid);
        font-size: 1.5rem;
        font-weight: 600;
    }
    .ogReviewsSystemInfo,
    .ogReviewsSystemInfoLeft i {
        font-size: 0.625rem;
    }
    .footer-grid {
        grid-template-columns: 1fr; /* Mobilde 1 sütun */
        text-align: center; /* Mobilde merkezi hizalama */
    }

    .footer-logo {
        grid-column: span 1; /* Mobilde logo tek sütun yer kaplayacak */
    }

    .boxTooltip {
        width: 100% !important;
        height: 50% !important;
        font-size: 0.625rem !important;
        z-index: 9999;
        left: 0px !important;
        bottom: 0px !important;
    }
}

.menu-nav {
    color: #b8babc;
}

.menuItem {
    color: var(--menu-text-color);
    font-size: 1rem;
    font-weight: 600;
    /* letter-spacing: 0.5px; */
}

.CoinDetailmenu {
    /* border-bottom: 1px solid var(--border-color); */
    position: relative;
    overflow-x: auto; /* Yatay kaydırma aktif */
    white-space: nowrap; /* Satır kırılmadan tek satırda */
    overflow-y: auto; /* Kaydırma aktif ama scrollbar gizli */
    scrollbar-width: none; /* Firefox'ta kaydırma çubuğunu gizler */
    scrollbar-color: var(--brand-color) var(--background-color); /* Renk: kaydırma çubuğu / arka plan */
}

/* Scrollbar özelleştirme */
.CoinDetailmenu::-webkit-scrollbar {
    height: 3px; /* Kaydırma çubuğunun yüksekliği */
    display: none; /* Başlangıçta scrollbar gizlenir */
}

.CoinDetailmenu::-webkit-scrollbar-track {
    background: var(--background-color); /* Kaydırma çubuğunun arka planı */
}

.CoinDetailmenu::-webkit-scrollbar-thumb {
    background-color: var(--brand-color); /* Kaydırma çubuğu rengi */
    border-radius: 10px; /* Köşeleri yuvarlama */
    border: 1px solid var(--background-color); /* Kenarlık */
    display: none;
}
/* Scrollbar kaydırma sırasında görünür olacak */
.CoinDetailmenu:hover::-webkit-scrollbar {
    display: block; /* Hover veya kaydırma sırasında scrollbar görünür */
}

.CoinDetailmenuItem {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0rem 1rem 0.3rem 1rem; /* Her bir öğenin kenar boşluğu */
    position: relative;
    display: inline-block; /* Öğelerin yan yana kalması için */
    white-space: nowrap; /* Metinlerin alt alta gelmesini engeller */
}

.CoinDetailmenuItem.active {
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--brand-color);
}

.CoinDetailmenuItem.active::after {
    content: "";
    position: absolute;
    bottom: -1px; /* Çizgi CoinDetailmenu'nun alt çizgisiyle hizalı olacak */
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--brand-color); /* Brand rengi */
    z-index: 1; /* CoinDetailmenu'nun border-bottom çizgisinin üstünde gösterilecek */
}

.coinDetailReviewsContainer {
    border: 1.5px solid var(--box-border-color);
    border-radius: 5px;
    padding: 20px;
    height: 100%;
}

.filterDropdown {
    padding: 10px;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
}
.dropdown-item {
    color: var(--coin-solid-color-text);
    cursor: pointer;
}
.dropdown-item:hover {
    background-color: var(--hover-color-text);
    color: var(--text-color);
    cursor: pointer;
}
.filterDropdownButton {
    font-size: 0.875rem;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    cursor: pointer;
}
.filterDropdownButton:hover {
    opacity: 0.8;
    cursor: pointer;
}
#filterDropdown:hover {
    opacity: 0.8 !important;
}

.profile-left-col {
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
    height: 100%;
}

.profile-list-group {
    padding: 0px !important;
    list-style: none;
}
.profile-list-group-item {
    width: 100%;
    padding: 7px;
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 300;
    margin-bottom: 5px;
}
.profile-list-group-item.active {
    background-color: var(--hover-color-text);
    border-radius: 10px;
}
.profile-list-group-item-link {
    color: var(--text-color) !important;
    display: block;
}
.profile-list-group-item-link i {
    font-size: 1rem;
    margin-right: 5px;
    color: var(--text-color-solid) !important;
}
.profile-list-group-item:hover {
    color: var(--text-color);
    cursor: pointer;
    background-color: var(--hover-color-text);
    border-radius: 10px;
}

.FormInputProfile {
    height: 40px;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 0.875rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

.goButton {
    background-color: var(--box-background-color);
    border: 0.5px solid var(--box-border-color);
    color: var(--text-color-solid);
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.goButton:hover {
    background-color: var(--brand-color);
    color: var(--text-color);
}

.ogDivider {
    border-bottom: 1px solid var(--border-color);
    margin: 1rem 0;
}
.coinComment {
    width: 100%;
    margin: 0rem 2rem;
}

/* Placeholder için stiller */
.FormInputProfile::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 300;
}

.FormInputProfile:focus {
    border: 2px solid var(--brand-color);
}

.FormInputTextArea {
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 0.875rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

.walletInfoCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 200px; /* Minimum kart yüksekliği */
}

.walletInfoCardContext {
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 10px;
}

.walletCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 300px; /* Minimum kart yüksekliği */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* İçerikleri dikey olarak hizalar */
}

.walletCardContext {
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}

.honeycomb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    transform: translateY(34.375px);
}
.honeycomb-cell {
    flex: 0 1 250px;
    max-width: 250px;
    height: 137.5px;
    margin: 65.4761904762px 12.5px 25px;
    position: relative;
    padding: 0.5em;
    text-align: center;
    z-index: 1;
}
.honeycomb-cell__title {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
    text-transform: uppercase;
    color: var(--brand-color);
    font-weight: 700;
    font-size: 1.2em;
    transition: opacity 350ms;
}
.honeycomb-cell__title > small {
    font-weight: 300;
    margin-top: 0.25em;
}
.honeycomb-cell__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}
.honeycomb-cell::before,
.honeycomb-cell::after {
    content: "";
}
.honeycomb-cell::before,
.honeycomb-cell::after {
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    display: block;
    position: absolute;
    -webkit-clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}
.honeycomb-cell::before {
    background-color: var(--outline-button-color);
    color: var(--brand-color);
    border-radius: 5px;
    font-size: 0.85rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0.2px solid var(--brand-color);
    transform: scale(1.055);
}
.honeycomb-cell::after {
    background-color: var(--outline-button-color);
    color: var(--brand-color);
    border-radius: 5px;
    font-size: 0.85rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0.2px solid var(--brand-color);
    transition: opacity 350ms;
}

.honeycomb-cell:hover::before {
    color: var(--text-color);
}
.honeycomb-cell:hover::after {
    background-color: var(--outline-button-color);
    color: var(--text-color);
}
.honeycomb__placeholder {
    display: none;
    opacity: 0;
    width: 250px;
    margin: 0 12.5px;
}

@media (max-width: 550px) {
    .honeycomb-cell {
        margin: 81.25px 25px;
    }
}
@media (min-width: 550px) and (max-width: 825px) {
    .honeycomb-cell:nth-child(3n) {
        margin-right: calc(50% - 125px);
        margin-left: calc(50% - 125px);
    }

    .honeycomb__placeholder:nth-child(3n + 5) {
        display: block;
    }
}
@media (min-width: 825px) and (max-width: 1100px) {
    .honeycomb-cell:nth-child(5n + 4) {
        margin-left: calc(50% - 275px);
    }

    .honeycomb-cell:nth-child(5n + 5) {
        margin-right: calc(50% - 275px);
    }

    .honeycomb__placeholder:nth-child(5n),
    .honeycomb__placeholder:nth-child(5n + 3) {
        display: block;
    }
}
@media (min-width: 1100px) {
    .honeycomb-cell:nth-child(7n + 5) {
        margin-left: calc(50% - 400px);
    }

    .honeycomb-cell:nth-child(7n + 7),
    .honeycomb-cell:nth-child(7n + 5):nth-last-child(2) {
        margin-right: calc(50% - 400px);
    }

    .honeycomb__placeholder:nth-child(7n + 7),
    .honeycomb__placeholder:nth-child(7n + 9),
    .honeycomb__placeholder:nth-child(7n + 11) {
        display: block;
    }
}

@media screen and (max-width: 1650px) {
    .a1 {
        font-size: 14px;
    }
}
@media screen and (max-width: 1550px) {
    .a1 {
        font-size: 13px;
    }
    .menuItem {
        font-size: 15px;
    }
}
@media screen and (max-width: 1500px) {
    .a1 {
        font-size: 12px;
    }
}
@media screen and (max-width: 1400px) {
    .a1 {
        font-size: 8px;
    }
    .menuItem {
        font-size: 13px;
    }
}

.menu {
    display: flex;
    align-items: center !important;
    margin: 0px 10px 0px 10px;
    cursor: pointer;
}

.menu:hover {
    color: var(--brand-color);
}

.menu:hover a,
.menuItem:hover {
    color: var(--brand-color);
}

/* .a3:hover {

    color: #ffc107;

} */
.about-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 0px 10px 0px 10px; */
    /* cursor: pointer; */
    width: 40%;
    margin-bottom: 20px;
    margin-left: 12%;
}

.ogManifestText {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-color);
}
@media (max-width: 768px) {
    .ogManifestText {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .minw-100 {
        min-width: 140px;
    }
}
@media (max-width: 768px) {
    .SpaceContentArea {
        justify-content: space-around;
    }
}

.SpaceImageContainer {
    flex: 1; /* Esnek genişlik */
    max-width: 640px; /* Maksimum genişlik 640px */
    height: auto; /* Yükseklik otomatik ayarlanır */
    aspect-ratio: 16 / 9; /* Oranı korumak için kullanılır (640px x 360px) */
    border-radius: 10px; /* Kenar yuvarlama eklemek için */
    overflow: hidden; /* Taşan kısımları gizler */
    margin-right: 15px;
}

.SpaceImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.SpaceContentArea {
    flex: 1; /* Esnek genişlik */
    max-width: 640px; /* Maksimum genişlik 640px */
    height: auto; /* Yükseklik otomatik ayarlanır */
    aspect-ratio: 16 / 9; /* Oranı korumak için kullanılır (640px x 360px) */
    /* background-color: var(--brand-color); */
    border-radius: 10px; /* Kenar yuvarlama eklemek için */
    /* overflow: hidden; */
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px;
}

.SpaceContent {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.SpaceContentCat {
    background-color: var(--box-border-color);
    color: var(--text-color);
    border-radius: 5px;
    font-size: 0.765rem;
    /* font-weight: 600; */
    transition: all 0.3s ease;
    padding: 5px;
}
.spaceTitle {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 40px;
}
.spaceTitle:hover {
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.spaceDesc {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color-solid);
    line-height: 20px;
}
.spaceDate {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-color-solid);
    line-height: 20px;
}

.spaceButton {
    margin-top: 25px;
}

.custom-list {
    list-style-type: none;
    padding-left: 0px;
}

.custom-list li {
    font-weight: 300;
}

.custom-listMobile {
    list-style-type: none;
}

.custom-listMobile li {
    font-weight: 300;
    font-size: 14px;
}
.about-card-style {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 300px; /* Minimum kart yüksekliği */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* İçerikleri dikey olarak hizalar */
}
.about-card-style:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    cursor: pointer;
}

@media (max-width: 768px) {
    .about-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        /* margin: 0px 10px 0px 10px; */
        /* cursor: pointer; */
        width: 40%;
        margin-bottom: 5px;
        margin-left: 33%;
    }
    .about-title-text {
        text-align-last: center;
        margin-bottom: 20px;
    }
    .custom-list {
        list-style-type: none;
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        align-self: center;
    }
}

.gap-4-5 {
    gap: 2rem;
}

.ogScoreScore {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 0.5;
    text-align: start;
}
.ogScoreAreaTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap; /* Bu satır başlığın tek satırda kalmasını sağlar */
}
.bottomLine {
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.rightLine {
    border-right: 1px solid var(--text-color-solid);
    padding-right: 5px;
    padding-left: 5px;
}
.bottomLineTooltip {
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.InfoBottomLine {
    border-bottom: 1px solid var(--box-border-color);
}
.InfoTopLine {
    border-top: 1px solid var(--box-border-color);
}
.py-2-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.infoContent {
    border-bottom: 1px solid var(--box-border-color);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.infoBox {
    border-radius: 5px;
    background-color: var(--info-box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    font-size: 0.675rem;
    width: 100%;
}
.infoBoxExchange {
    border-radius: 5px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    font-size: 0.875rem;
    width: 100%;
}
.infoBoxDropdown {
    position: absolute;
    right: 0;
    top: 30px;
    width: max-content; /* min-width yerine width: max-content kullanıyoruz */
    border-radius: 5px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    z-index: 999 !important;
}
.infoBoxDropdown ul li {
    display: flex;
    padding: 0px 0px 5px 0px !important;
}
.infoBox:hover {
    opacity: 0.6;
    cursor: pointer;
}
.infoBox img {
    border-radius: 100%;
    margin-right: 5px;
}
.marketCapArea {
    width: 48%;
    border: 1px solid var(--box-border-color);
    border-radius: 5px;
    background-color: var(--box-background-color);
    padding: 10px;
    justify-content: center;
    min-height: 70px;
}
.marketCapAreaScore {
    font-size: 1.7rem;
    font-weight: 600;
}
.marketCapAreaTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .ogScoreContainer {
        display: flex;
        flex-direction: column !important;
    }
    .ogScoreContainerMobile {
        display: flex;
        /* flex-direction: column !important */
    }
    .OgScoreArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .ogScoreScore {
        font-size: 2rem;
        text-align: start;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .ogScoreAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .marketCapArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .marketCapAreaScore {
        font-size: 1.7rem;
        font-weight: 600;
    }
    .marketCapAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
}

@media (max-width: 991px) {
    .ogScoreContainer {
        display: flex;
        flex-direction: column !important;
    }
    .ogScoreContainerMobile {
        display: flex;
        /* flex-direction: column !important */
    }
    .OgScoreArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .ogScoreScore {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .ogScoreAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .marketCapArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .marketCapAreaScore {
        font-size: 1.7rem;
        font-weight: 600;
    }
    .marketCapAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
    .pb-20 {
        padding-bottom: 100px;
    }
}

@media (max-width: 1400px) {
    .marketCapAreaTitle {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
}
tbody,
td,
tfoot,
th,
thead,
tr {
    background-color: var(--background-color) !important;
    /* color: var(--text-color) !important; */
}
.cursor-pointer {
    cursor: pointer;
}

.feture-td-1 {
    width: 50px;
}

.feture-td-2 {
    width: 250px;
}

.text-size-11 {
    font-size: 11px;
}

.text-size-14 {
    font-size: 14px;
}

.text-size-18 {
    font-size: 15px;
}

.text-size-25 {
    font-size: 25px;
}

.menu-hover {
    border-radius: 10px;
}

.menu-hover:hover {
    background-color: #222531;
    box-shadow: rgba(128, 138, 157, 0.12) 0px 1px 2px,
        rgba(128, 138, 157, 0.24) 0px 8px 32px;
}

.table-responsive {
    overflow: unset;
}

.exchange-menu,
.crpyto-menu,
.ogspace-menu {
    display: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    padding: 15px 0px 25px 0px;
    background-color: #0d1421;
    top: 161px;
    box-shadow: rgba(128, 138, 157, 0.12) 0px 1px 2px,
        rgba(128, 138, 157, 0.24) 0px 8px 32px;
}

.exchange:hover .exchange-menu,
.crpyto:hover .crpyto-menu,
.ogspace:hover .ogspace-menu {
    display: block;
}

.bodyContainer {
    position: relative !important;
}

.filter-box {
    position: absolute !important;
    width: 250px;
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--background-color);
    z-index: 99 !important;
    left: 1%;
    top: 1%;
}

:root {
    ---color-text-1: rgba(255, 255, 255, 0.8);
    ---color-text-2: rgba(255, 255, 255, 0.8);
    ---color-text-3: #ffc107;
    ---color-bg-1: #0d1421;
    ---color-bg-2: #24283b;

    /*ProgressBar Color*/
    --progress-low: #ffc107;
    --progress-hight: #28a745;
    --progress-warning: #ff0707;

    /*k:36 yeni tanımlamalar*/
    --background-color: rgb(255, 255, 255);
    --brand-color: #f7931a;
    --logo-text-color: #1d284c;

    --border-color: rgb(239 242 245 / 1);
    --head-text-color: rgb(61, 77, 99);
    --head-text-color-solid: rgb(100 116 139/1);
    --menu-text-color: #334155;
    --menu-text-color-solid: rgb(100 116 139/1);

    --chart-text-color: #f7931a;
    --text-color: rgb(15 23 42/1);
    --white-color: #070707;
    --text-color-solid: #647489;
    --text-color-solid-more-dark: #0f1012;
    --coin-color-text: rgb(51 65 85/1);
    --coin-solid-color-text: rgb(81, 89, 108);
    --detailpage-solid-color: #3a4758;
    --shortcoinname-color: #9ba1b8;

    --button-text-color: #ffffff;
    --button-solid-color: rgb(228, 233, 238);
    --outline-button-color: #f7941a2d;
    --outline-button-text-color: #f7941a;
    --input-background-color: rgb(241 245 249/1);
    --modal-background-color: rgb(255, 255, 255);
    --box-background-color: rgb(249, 249, 249);
    --reviewcard-background-color: rgb(249, 249, 249);
    --alert-background-color: rgb(255, 255, 255);

    --box-border-color: rgb(237, 237, 237);

    --hover-color-text: rgb(243, 237, 219);
}

.dark-theme {
    ---color-text-1: rgba(255, 255, 255, 0.8);
    ---color-text-2: rgba(255, 255, 255, 0.8);
    ---color-text-3: #ffc107;
    ---color-bg-1: #0d1421;
    ---color-bg-2: #24283b;

    /*k:36 yeni tanımlamalar*/
    --background-color: /* #0e141a;*/ #0c1218;
    --brand-color: #f7931a;
    --border-color: #212d3b;
    --head-text-color: rgb(223, 229, 236, 1);
    --head-text-color-solid: rgb(158 176 199 / 1);
    --menu-text-color-solid: rgb(158 176 199 / 1);
    --menu-text-color: rgb(223 229 236/1);
    --logo-text-color: #ffffff;
    --text-color: rgb(223 229 236 /1);
    --white-color: #fff;
    --text-color-solid: rgb(158 176 199/1);
    --text-color-solid-more-dark: rgb(154 157 161/1);
    --coin-color-text: rgb(190 203 218 /1);
    --coin-solid-color-text: rgb(151, 161, 175);
    --shortcoinname-color: #485461;

    --button-text-color: #5f390d;
    --button-solid-color: rgb(49, 59, 70);
    --outline-button-color: #f7941a2d;
    --input-background-color: rgb(27 35 45/1);
    --modal-background-color: rgb(27 35 45/1);
    --box-background-color: #0f151c;
    --reviewcard-background-color: /* #131e29; */ #0f151c;
    --alert-background-color: #15202b;

    --box-border-color: #1b242f;

    --hover-color-text: #202933;
}

* {
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    border: 0 solid rgb(229, 231, 235);
}
body {
    background-color: var(--background-color);
}
body a {
    text-decoration: none;
}

a:hover {
    color: var(--brand-color) !important;
}

.minh-64 {
    min-height: 64px;
}

.minh-24 {
    min-height: 24px;
}

.minw-100 {
    min-width: 100px;
}

.minh-178 {
    min-height: 178px;
}

#toggle-wrapper a {
    display: inline;
}

.section-stats {
    min-height: 200px;
    display: flex;
    align-items: center;
}

/*Backtotop Roket Css*/
#backtotop-btn {
    visibility: hidden;
    position: fixed;
    cursor: pointer;
    right: 16px;
    bottom: 16px;
    user-select: none;
    transition: 1s;
}

.rocket {
    display: block;
    font-size: 50px;
    transform: rotate(315deg);
}

.coinCustomText a {
    color: var(--brand-color) !important;
    font-weight: bold;
}

.coinCustomText a:hover {
    text-decoration: underline;
}

.coinDangerCustomText a {
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    font-weight: bold;
}

.coinDangerCustomText a:hover {
    text-decoration: underline;
}

.arrow-top {
    display: block;
    width: 64px;
    height: 64px;
    pointer-events: none;
    background-color: #0fb;
    border-radius: 50%;
}

.slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-out-top {
    -webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
        both;
    animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.scale-out-center {
    -webkit-animation: scale-out-center 0.5s
        cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

@keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}

#navigationMenu {
    border-bottom: 1px solid var(--border-color);
    height: 65px;
}
.info-menu {
    border-bottom: 1px solid var(--border-color);
    height: 52px;
}

.logo-img {
    width: 2.5rem;
}
.mobileLogo {
    width: 2.5rem !important;
}

.logo-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--logo-text-color);
}

.logo-test-text {
    font-size: 0.6rem;
    font-weight: 300;
    color: #b3b3b3;
}
.inputContainer {
    /* width: 32%; */
    align-items: center;
    display: flex;
}
.search-box {
    /* height: 100%; */
    width: 100%;
    position: relative;
}
#searchBoxOpenCardClose:hover {
    color: var(--brand-color);
    cursor: pointer;
}
#search_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 8px;
    font-size: 1rem;
    padding-left: 35px;
}
#search_space_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    padding-left: 55px;
}
#search_space_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}

#search_glossary_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    padding-left: 55px;
}
#search_glossary_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}

#ask_search_input {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    padding-left: 55px;
    border-radius: 8px;
}
#ask_search_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}
#search_input::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 0.75rem;
    font-weight: 500;
}

.mobileSearchInput {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 8px;
    font-size: 1rem;
    padding-left: 35px;
}

.mobileSearchInput::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 0.75rem;
    font-weight: 500;
}


.searchIcon {
    position: absolute;
    top: 35%;
    left: 13px;
    color: var(--text-color-solid);
    font-size: 0.85rem;
}

.space_searchIcon {
    position: absolute;
    top: 35%;
    left: 25px;
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.ask_search_inputIcon {
    position: absolute;
    top: 35%;
    left: 25px;
    color: var(--text-color-solid);
    font-size: 1.2rem;
}

.searchBoxOpenCard {
    position: absolute;
    right: 10% !important;
    top: 7%;
    width: 500px;
    padding: 13px 25px 0px;
    display: flex;
    align-items: center;
    background-color: var(--input-background-color);
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    z-index: 99999;
    opacity: 0; /* Başlangıçta tamamen görünmez */
    visibility: hidden; /* Görünmezliği garantilemek için */
    transition: right 0.2s ease, opacity 0.2s ease; /* Animasyon süresi ve kolaylaştırma */
}

.searchBoxOpenCard.show {
    right: 0px; /* Kutuyu ekranın içine kaydır */
    opacity: 1; /* Görünürlüğü geri getir */
    visibility: visible; /* Artık görünür yap */
}

.searchBoxOpenCardDetail {
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    background-color: var(--input-background-color);
    border-radius: 0px 0px 12px 12px;
    border-top: none; /* Üst sınır burada da yok */
}
.searchBoxOpenCardDetail hr {
    background-color: var(--brand-color);
    height: 1px;
    border: none;
}

.list-box {
    margin: 0px;
    /* padding: 0px 21px 24px; */
    width: 99%;
    overflow: hidden auto;
    max-height: 50vh;
    display: grid;
    grid-template-rows: min-content;
    grid-auto-columns: 100%;
    row-gap: 16px;
    scrollbar-width: 2px !important;
    scrollbar-color: var(--brand-color) var(--input-background-color) !important;
}

.searchBoxOpenCardInput {
    color: var(--text-color);
    font-weight: 600;
    margin-left: 6px;
    margin-right: auto;
    width: 100% !important;
    height: 40px;
    background: none;
    text-overflow: ellipsis;
    transition: border-color 0.4s;
    border: none;
    outline: none;
    font-size: 1.1rem;
    padding: 0px !important;
}
.searchBoxOpenCardInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

#cryptoDiv {
    display: none;
}
#exchangeDiv {
    display: none;
}

.exchangeAboutBox {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    max-height: 780; /* Başlangıçta yüksekliği sınırlıyoruz, ihtiyaç duyarsanız değeri değiştirebilirsiniz */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* Animasyonlu geçiş */
}

.exchangeAboutBox.expanded {
    max-height: 10000em; /* İçerik açıldığında sınırsız yüksekliğe sahip olur */
}

.short-content {
    display: inline;
}

.full-content {
    display: none;
}

.mobileCloseIcon:hover {
    color: var(--brand-color);
    cursor: pointer;
}
@media only screen and (max-width: 1200px) {
    .searchBoxOpenCard {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 100000; /* Z-index değerini artırdık */
        background-color: var(--input-background-color);
        opacity: 1;
        visibility: hidden; /* Görünmezliği garantilemek için */
        padding: 20px;
        border-radius: 0; /* Tam ekran görünüm için köşeleri yuvarlatmayı kaldır */
        flex-direction: column;
        transition: right 0.8s ease, opacity 0.8s ease; /* Animasyon süresi ve kolaylaştırma */
    }

    .searchBoxOpenCardInput {
        font-size: 1.1rem;
        padding: 10px;
    }

    .list-box {
        max-height: 80vh;
        padding-right: 10px;
        overflow-y: auto;
    }

    .searchBoxOpenCardDetail {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--input-background-color);
        padding: 0;
        border-radius: 0;
        width: 100%;
    }
}
@media only screen and (max-width: 768px) {
    .counter {
        font-size: 2rem !important;
    }
}

.dataTableSearch {
    display: none !important;
    width: 100%;
    position: relative;
}
#coinSearch {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color);
    padding: 15px;
    font-size: 1rem;
    padding-left: 50px;
}
#coinSearch::placeholder {
    background-color: var(--input-background-color);
    border: none;
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.search-Icon {
    position: absolute;
    top: 29%;
    left: 29px;
    color: var(--text-color-solid);
    font-size: 1.5rem;
}

.form-control:focus {
    border-color: none !important;
    box-shadow: none !important;
}
/* Checkbox Gizleme */
.theme-checkbox {
    opacity: 0;
    position: absolute;
}

/* Toggle Label */
.theme-checkbox-label {
    background-color: var(--border-color);
    width: 65px;
    height: 30px;
    border-radius: 50px;
    position: relative;
    padding: 7px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease-in-out;
}

/* Iconlar */
.fa-moon,
.fa-sun {
    color: var(--brand-color);
}

/* Top */
.theme-checkbox-label .ball {
    background-color: var(--text-color);
    width: 26px;
    height: 26px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
}

/* Checkbox Checked Durumunda Topu Kaydır */
.theme-checkbox:checked + .theme-checkbox-label .ball {
    transform: translateX(35px);
}

/* Mobil İçin Özel Düzeltmeler */
@media only screen and (max-width: 768px) {
    .theme-checkbox-label {
        width: 60px; /* Küçük ekranlarda genişliği azalt */
        height: 28px; /* Küçük ekranlarda yüksekliği azalt */
    }
    .theme-checkbox-label .ball {
        width: 24px; /* Küçük ekranlar için top boyutunu ayarla */
        height: 24px;
        top: 2px;
        left: 2px;
    }
    .theme-checkbox:checked + .theme-checkbox-label .ball {
        transform: translateX(32px); /* Mobilde uygun mesafeye kaydır */
    }
}

.mobileSocialBar {
    border-top: 1px solid var(--border-color);
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}
.mobileSocialBar i {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: var(--text-color-solid);
    margin-right: 20px;
}
.mobileSocialBar i:hover {
    color: var(--brand-color);
}

.textXSmall {
    font-size: 0.75rem;
}
.textSmall {
    font-size: 0.875rem;
}

.text18Px {
    font-size: 1.125rem;
}
.textMd {
    font-size: 1.25rem;
}
.textXl {
    font-size: 2rem;
    line-height: 1.2;
}
.textX-L {
    font-size: 2.5rem;
    line-height: 1.2;
}

.textXXL {
    font-size: 3rem;
}
.text64px {
    font-size: 4rem;
}

.font-300 {
    font-weight: 300 !important;
}
.font-400 {
    font-weight: 400 !important;
}
.font-500 {
    font-weight: 500 !important;
}
.font-700 {
    font-weight: 700 !important;
}
.font-800 {
    font-weight: 800 !important;
}

.counter {
    transition: none !important;
    animation: none !important;
}

.coinTextPrice {
    font-size: 0.875rem;
    font-weight: 500;
}

.coinColor {
    color: var(--coin-color-text);
}

.baseWhiteColor {
    color: var(--text-color);
}

.cardTitleText {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}
.cardTitleMoreText {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
    white-space: nowrap;
}
.coinSmallText {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
}

.DatatableCoinText {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
    margin-left: 10px;
}
.DatatableCoinSmallText {
    padding-left: 5px !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--coin-solid-color-text);
}

.CardLink a:hover {
    border-radius: 5px;
    background-color: var(--hover-color-text);
    cursor: pointer;
}

.solidTextColorMoreDark {
    color: var(--text-color-solid-more-dark);
}

.detailpageTextColor {
    color: var(--detailpage-solid-color);
}

.shortCoinNameColor {
    color: var(--shortcoinname-color);
}

.coinCard {
    background-color: var(--reviewcard-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    max-width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    /*height: 225px;*/
}

.coinCard .card-body {
    flex-grow: 1; /* İçeriğin alanı doldurmasını sağlar */
    display: flex;
    flex-direction: column;
}

.coinCardContent {
    flex-grow: 1; /* İçerik alanını genişletir ve footer'ı en alta iter */
    font-weight: 500;
}

.coinCardFooter {
    margin-top: auto; /* Footer her zaman en altta kalır */
}

.coinCardColorRed {
    color: #eb0102;
}
.coinCardColorOrange {
    color: #fc6c03;
}
.coinCardColorYellow {
    color: #bdb322;
}
.coinCardColorGreen {
    color: #00b200;
}

.cryptoDetailCoinScore {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-color);
}
.cryptoDetailCoinScoreMobile {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-color);
    align-content: end;
}

.about-container {
    max-height: 330px;
    border: 1px solid var(--box-border-color);
    background-color: var(--box-background-color);
    border-radius: 5px;
    padding: 20px;
    overflow: hidden;
}

.about_none {
    display: none;
}

.about_block {
    display: block;
}

.ogSpaceContentContainer > p,
.ogSpaceContentContainer > ul > li,
.accordion .accordion-item .accordionContent > p,
.accordion .accordion-item .accordionContent > ul > li,
.about-text {
    color: var(--text-color-solid);
}

.ogSpaceContentContainer > p > a,
.ogSpaceContentContainer > ul > li > a,
#about > div > div.about-container > div > p > u > a,
#about > div > div.about-container > div > p > strong > u > a,
#about > div > div.about-container > div > p > a,
.accordion .accordion-item .accordionContent > p > a,
.accordion .accordion-item .accordionContent > ul > li > a,
#about > div > div.about-container > div > p > strong > a {
    color: var(--text-color) !important;
    text-decoration: underline;
}

.ogSpaceContentContainer > p > a:hover,
.ogSpaceContentContainer > ul > li > a:hover,
#about > div > div.about-container > div > p > u > a:hover,
#about > div > div.about-container > div > p > strong > u > a:hover,
#about > div > div.about-container > div > p > a:hover,
.accordion .accordion-item .accordionContent > p > a:hover,
.accordion .accordion-item .accordionContent > ul > li > a:hover,
#about > div > div.about-container > div > p > strong > a:hover {
    color: var(--brand-color) !important;
}

.aboutHeader {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.ogSpaceContentContainer > h3,
#about > div > div.about-container > div > h3 {
    color: var(--text-color);
    font-weight: 600 !important;
    font-size: 1.25rem;
}

.updateHeader {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 0.5px solid var(--border-color);
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.featuredMobil {
    display: none;
}

@media only screen and (max-width: 991px) {
    .coinCard {
        background-color: var(--reviewcard-background-color);
        border: 1.5px solid var(--box-border-color);
        border-radius: 10px;
        max-width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /*height: 225px;*/
    }

    .coinCard .card-body {
        flex-grow: 1; /* İçeriğin alanı doldurmasını sağlar */
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 1024px) {
    .featuredMobil {
        display: block;
    }
}
.text-justify {
    text-align: justify;
}

/*Login Modal Start*/
.modal-content {
    background-color: var(--box-background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Ortak stiller */
.loginButton,
.signInButton {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-solid);
    padding-bottom: 0.325rem;
    border-bottom: 2px solid var(--border-color); /* Ortak border stili */
    cursor: pointer; /* Ortak cursor stili */
}

/* Hover durumları */
.loginButton:hover,
.signInButton:hover {
    border-bottom: 2px solid var(--hover-color-text); /* Hover durumunda border rengi */
}

/* Aktif sekmenin border rengi */
.loginButton.active,
.signInButton.active {
    color: var(--text-color);
    border-bottom: 2px solid var(--brand-color);
}

/* Tüm tab içerikleri başlangıçta gizli */
.TabsContent .loginContent,
.TabsContent .signInContent {
    display: none;
}

/* Sadece aktif olan içerik görünür olacak */
.TabsContent .loginContent.active,
.TabsContent .signInContent.active {
    display: block;
}

.FormInput {
    height: 50px;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 1rem;
    padding-left: 35px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.FormInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.FormInput:focus {
    border: 2px solid var(--brand-color);
}

.supportUsInput {
    width: 4rem;
    height: 50px;
    font-size: 0.875rem !important;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 1rem;
    padding-left: 10px;
    padding-right: 60px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.supportUsInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.75rem;
    font-weight: 500;
}

.supportUsInput:focus {
    border: 2px solid var(--brand-color);
}

.copy-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border: none;
    cursor: pointer;
    border-radius: 5px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.copy-btn:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filterInput {
    height: 35px;
    background-color: var(--input-background-color);
    border: 2px solid var(--box-border-color);
    color: var(--text-color) !important;
    padding: 5px;
    font-size: 1rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

/* Placeholder için stiller */
.filterInput::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 500;
}

.filterInput:focus {
    background-color: var(--input-background-color);
    border: 2px solid var(--brand-color);
}

.login-icon-email-left {
    position: absolute;
    left: 17px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.login-icon-password-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.login-icon-see-right {
    position: absolute;
    right: 17px;
    top: 24px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}

.register-icon-email-left {
    position: absolute;
    left: 17px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-password-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-referance-left {
    position: absolute;
    left: 19px;
    bottom: 4px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
.register-icon-see-right {
    position: absolute;
    right: 17px;
    top: 24px;
    transform: translateY(-50%);
    color: var(--text-color-solid);
    font-size: 1.2rem;
}
/*Login Modal End*/

.controlPanelMenu {
    background-color: var(--box-background-color) !important;
    border: 1.5px solid var(--box-border-color) !important;
    color: var(--text-color) !important;
    border-radius: 5px;
    width: 100% !important;
}

.controlPanelMenu a {
    color: var(--text-color) !important;
    border-radius: 5px;
    width: 100% !important;
}

.bgVarColor1 {
    background-color: var(---color-bg-1);
}
.colorVarText2 {
    color: var(---color-text-2);
}

.bgColor111 {
    background-color: #111;
}

.border1pxSolid4f {
    border: 1px solid #4f4f4f;
}
.borderRight1pxSolid4f {
    border-right: 1px solid #4f4f4f;
}
.bgBlackCss {
    background-color: black;
}
.bordeBottom1PxSolidGray {
    border-bottom: 1px solid gray;
}
.backGroundColorBgSecondary {
    background-color: var(--bs-secondary-bg);
}
.page-link:hover {
    background-color: var(--brand-color) !important;
    color: var(--text-color) !important;
    border: none !important;
}
#coinTable_previous ::before {
    content: "<";
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable_next ::before {
    content: ">";
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable2_previous ::before {
    content: "<";
    font-size: 1rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}

#coinTable2_next ::before {
    content: ">";
    font-size: 1rem;
    vertical-align: middle;
    color: var(--text-color);
    font-weight: 600;
}
#tbl_head {
    font-size: 0.875rem !important;
}
#tbl_head th {
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 600 !important;
}
#homeTableBody tr {
    vertical-align: middle !important;
    height: 60px !important;
}
.detayTablo {
    font-size: 0.875rem !important;
}
.detayTablo th {
    border-top: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 600 !important;
}
.text-white {
    color: rgba(255, 255, 255, 0.8) !important;
}
.text-light {
    color: rgba(255, 255, 255, 0.8) !important;
}

.moreDetail {
    color: var(--brand-color);
    transition: 0.2s ease-in-out;
}
.moreDetail:hover {
    color: #ffc107;
    transition: 0.2s ease-in-out;
}

.complaints_textarea::placeholder {
    color: #b8babc;
    /* veya istediğiniz başka bir renk */
}

.color-text-1 {
    color: var(--text-color-solid) !important;
}

.card-img-top {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    object-fit: cover;
    margin-bottom: 15px;
}

.ogspaceCard {
    height: 400px !important;
    border: none !important;
    background: none;
    border-bottom: 0.5px solid var(--brand-color) !important;
    border-radius: 0px;
}
.ogspace_title:hover {
    color: var(--brand-color);
    cursor: pointer;
}

/* .main-news-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}


.news-img {
    width: 220px !important;
    height: 162px !important;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.news-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.news-content-bg {
    background-color: #f7941a9d;
    color: var(--white-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
    }

    .news-img {
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
    }

    .news-item div {
        align-items: flex-start;
        text-align: left;
    }

    .news-item .align-self-end {
        align-self: flex-start !important;
    }
}

.headingsmall {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-color);
}

@media only screen and (max-width: 991px) {
    .color-text-1 {
        font-size: 11px;
    }
}
.color-text-2 {
    color: #b8babc !important;
}

.color-text-3 {
    /* border-bottom: 3px solid #ffc107; */
    /* color: #ffc107 !important;
} */

.color-text-4 {
    color: #0000 !important;
}

.heading-info-text-red {
    color: red !important;
}

.heading-info-text-green {
    color: green !important;
}

.heading-info-text {
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--head-text-color);
    font-size: 0.75rem;
    font-weight: 200;
}

.heading-info-solid-text {
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: var(--head-text-color-solid);
    font-size: 0.75rem;
    font-weight: 600;
}

.heading-info-solid-text-red {
    color: red;
}

.heading-info-solid-green {
    color: green;
}

/* .a2 {
    color: #b8babc;
    font-size: 12px;
    background-color: black;
} */
.accordion-flush .accordion-item {
    background-color: black !important;
}
.a2-mode {
    color: #b8babc;
    font-size: 15px;
}

@media screen and (max-width: 1200px) {
    .logo {
        width: 100% !important;
    }
    .exchanges-image {
        width: 50px;
        border-radius: 10px;
    }
}

.footer {
    border-top: 2px solid var(--border-color);
    background-color: var(--box-background-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 sütunlu bir yapı */
    gap: 3rem; /* Sütunlar arası boşluk */
}

.footer-logo {
    grid-column: span 2; /* Logoya 2 sütun yer ayır */
}
/* .footer-logo a img {
    width: 7rem;
} */

.footer-links-section,
.footer-social,
.footer-support {
    grid-column: span 1; /* Diğerlerine 1 sütun */
}
.footer-links a {
    color: var(--text-color-solid);
    font-size: 0.875rem;
}
.footer-links a:hover {
    color: var(--brand-color);
}


.ogReviewsSystemImage {
    position: relative;
    width: 100%;
}
.ogReviewsSystemImageScore {
    position: absolute;
    top: 33%;
    right: 49%;
    color: var(--text-color-solid);
    font-size: 2.5rem;
    font-weight: 600;
}
.ogReviewsSystemCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    max-width: 85%;
    position: relative;
}
.ogReviewsSystemScoreLeft {
    font-size: 1.5rem;
    font-weight: 600;
    border-right: 0.5px solid var(--detailpage-solid-color);
    color: var(--text-color-solid);
}
.ogReviewsSystemScoreRight {
    font-size: 1.5rem;
    font-weight: 600;
    border-left: 0.5px solid var(--detailpage-solid-color);
    color: var(--text-color-solid);
}

.ogReviewsSystemText {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}

.ogReviewsSystemInfo {
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
    color: var(--brand-color);
}
.ogReviewsSystemInfoLeft {
    position: absolute;
    top: 7px;
    left: 7px;
    cursor: pointer;
    color: var(--brand-color);
}
.ogReviewsSystemInfo,
.ogReviewsSystemInfoLeft i {
    font-size: 0.85rem;
}
.border-right {
    border-right: 1px dashed var(--brand-color);
}
.border-left {
    border-left: 1px dashed var(--brand-color);
}

.mb-20 {
    margin-bottom: 20px;
}
.mb-10 {
    margin-bottom: 10px;
}

.ogtooltip {
    --bs-tooltip-bg: var(--box-border-color);
    --bs-tooltip-color: var(--text-color);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: 400px;
    border-radius: 10px;
}

.fa-thumbs-up:hover,
.fa-thumbs-down:hover {
    color: var(--brand-color);
    cursor: pointer;
}

.boxTooltip {
    width: 25% !important;
    font-size: 0.875rem;
}

/* Mobil cihazlar için düzenleme */
@media (max-width: 768px) {
    .ogReviewsSystemCard {
        max-width: 100%;
    }
    .ogReviewsSystemScoreLeft {
        font-size: 1rem;
        font-weight: 600;
        border-right: 0.5px solid var(--detailpage-solid-color);
        color: var(--text-color-solid);
    }
    .ogReviewsSystemScoreRight {
        font-size: 1rem;
        font-weight: 600;
        border-left: 0.5px solid var(--detailpage-solid-color);
        color: var(--text-color-solid);
    }

    .ogReviewsSystemText {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-color-solid);
    }

    .ogReviewsSystemImage {
        position: relative;
        width: 60%;
    }
    .ogReviewsSystemImageScore {
        position: absolute;
        top: 33%;
        right: 49%;
        color: var(--text-color-solid);
        font-size: 1.5rem;
        font-weight: 600;
    }
    .ogReviewsSystemInfo,
    .ogReviewsSystemInfoLeft i {
        font-size: 0.625rem;
    }
    .footer-grid {
        grid-template-columns: 1fr; /* Mobilde 1 sütun */
        text-align: center; /* Mobilde merkezi hizalama */
    }

    .footer-logo {
        grid-column: span 1; /* Mobilde logo tek sütun yer kaplayacak */
    }

    .boxTooltip {
        width: 100% !important;
        height: 50% !important;
        font-size: 0.625rem !important;
        z-index: 9999;
        left: 0px !important;
        bottom: 0px !important;
    }
}

.menu-nav {
    color: #b8babc;
}

.menuItem {
    color: var(--menu-text-color);
    font-size: 1rem;
    font-weight: 600;
    /* letter-spacing: 0.5px; */
}

.CoinDetailmenu {
    /* border-bottom: 1px solid var(--border-color); */
    position: relative;
    overflow-x: auto; /* Yatay kaydırma aktif */
    white-space: nowrap; /* Satır kırılmadan tek satırda */
    overflow-y: auto; /* Kaydırma aktif ama scrollbar gizli */
    scrollbar-width: none; /* Firefox'ta kaydırma çubuğunu gizler */
    scrollbar-color: var(--brand-color) var(--background-color); /* Renk: kaydırma çubuğu / arka plan */
}

/* Scrollbar özelleştirme */
.CoinDetailmenu::-webkit-scrollbar {
    height: 3px; /* Kaydırma çubuğunun yüksekliği */
    display: none; /* Başlangıçta scrollbar gizlenir */
}

.CoinDetailmenu::-webkit-scrollbar-track {
    background: var(--background-color); /* Kaydırma çubuğunun arka planı */
}

.CoinDetailmenu::-webkit-scrollbar-thumb {
    background-color: var(--brand-color); /* Kaydırma çubuğu rengi */
    border-radius: 10px; /* Köşeleri yuvarlama */
    border: 1px solid var(--background-color); /* Kenarlık */
    display: none;
}
/* Scrollbar kaydırma sırasında görünür olacak */
.CoinDetailmenu:hover::-webkit-scrollbar {
    display: block; /* Hover veya kaydırma sırasında scrollbar görünür */
}

.CoinDetailmenuItem {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0rem 1rem 0.3rem 1rem; /* Her bir öğenin kenar boşluğu */
    position: relative;
    display: inline-block; /* Öğelerin yan yana kalması için */
    white-space: nowrap; /* Metinlerin alt alta gelmesini engeller */
}

.CoinDetailmenuItem.active {
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--brand-color);
}

.CoinDetailmenuItem.active::after {
    content: "";
    position: absolute;
    bottom: -1px; /* Çizgi CoinDetailmenu'nun alt çizgisiyle hizalı olacak */
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--brand-color); /* Brand rengi */
    z-index: 1; /* CoinDetailmenu'nun border-bottom çizgisinin üstünde gösterilecek */
}

.coinDetailReviewsContainer {
    border: 1.5px solid var(--box-border-color);
    border-radius: 5px;
    padding: 20px;
    height: 100%;
}

.filterDropdown {
    padding: 10px;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
}
.dropdown-item {
    color: var(--coin-solid-color-text);
    cursor: pointer;
}
.dropdown-item:hover {
    background-color: var(--hover-color-text);
    color: var(--text-color);
    cursor: pointer;
}
.filterDropdownButton {
    font-size: 0.875rem;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    cursor: pointer;
}
.filterDropdownButton:hover {
    opacity: 0.8;
    cursor: pointer;
}
#filterDropdown:hover {
    opacity: 0.8 !important;
}

.profile-left-col {
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
    height: 100%;
}

.profile-list-group {
    padding: 0px !important;
    list-style: none;
}
.profile-list-group-item {
    width: 100%;
    padding: 7px;
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 300;
    margin-bottom: 5px;
}
.profile-list-group-item.active {
    background-color: var(--hover-color-text);
    border-radius: 10px;
}
.profile-list-group-item-link {
    color: var(--text-color) !important;
    display: block;
}
.profile-list-group-item-link i {
    font-size: 1rem;
    margin-right: 5px;
    color: var(--text-color-solid) !important;
}
.profile-list-group-item:hover {
    color: var(--text-color);
    cursor: pointer;
    background-color: var(--hover-color-text);
    border-radius: 10px;
}

.FormInputProfile {
    height: 40px;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 0.875rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

.goButton {
    background-color: var(--box-background-color);
    border: 0.5px solid var(--box-border-color);
    color: var(--text-color-solid);
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.goButton:hover {
    background-color: var(--brand-color);
    color: var(--text-color);
}

.ogDivider {
    border-bottom: 1px solid var(--border-color);
    margin: 1rem 0;
}
.coinComment {
    width: 100%;
    margin: 0rem 2rem;
}

/* Placeholder için stiller */
.FormInputProfile::placeholder {
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 300;
}

.FormInputProfile:focus {
    border: 2px solid var(--brand-color);
}

.FormInputTextArea {
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    color: var(--text-color);
    padding: 5px;
    font-size: 0.875rem;
    padding-left: 10px;
    border-radius: 5px;
    outline: none;
}

.walletInfoCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 200px; /* Minimum kart yüksekliği */
}

.walletInfoCardContext {
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 10px;
}

.walletCard {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 300px; /* Minimum kart yüksekliği */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* İçerikleri dikey olarak hizalar */
}

.walletCardContext {
    color: var(--text-color-solid);
    font-size: 1rem;
    font-weight: 500;
}

.honeycomb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    transform: translateY(34.375px);
}
.honeycomb-cell {
    flex: 0 1 250px;
    max-width: 250px;
    height: 137.5px;
    margin: 65.4761904762px 12.5px 25px;
    position: relative;
    padding: 0.5em;
    text-align: center;
    z-index: 1;
}
.honeycomb-cell__title {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
    text-transform: uppercase;
    color: var(--brand-color);
    font-weight: 700;
    font-size: 1.2em;
    transition: opacity 350ms;
}
.honeycomb-cell__title > small {
    font-weight: 300;
    margin-top: 0.25em;
}
.honeycomb-cell__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}
.honeycomb-cell::before,
.honeycomb-cell::after {
    content: "";
}
.honeycomb-cell::before,
.honeycomb-cell::after {
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    display: block;
    position: absolute;
    -webkit-clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}
.honeycomb-cell::before {
    color: var(--text-color);
    transform: scale(1.055);
}
.honeycomb-cell::after {
    background: var(--outline-button-color);
    transition: opacity 350ms;
}

.honeycomb-cell:hover::before {
    color: var(--text-color);
}
.honeycomb-cell:hover::after {
    background-color:var(--outline-button-color);
    color: var(--text-color);
}
.honeycomb__placeholder {
    display: none;
    opacity: 0;
    width: 250px;
    margin: 0 12.5px;
}

@media (max-width: 550px) {
    .honeycomb-cell {
        margin: 81.25px 25px;
    }
}
@media (min-width: 550px) and (max-width: 825px) {
    .honeycomb-cell:nth-child(3n) {
        margin-right: calc(50% - 125px);
        margin-left: calc(50% - 125px);
    }

    .honeycomb__placeholder:nth-child(3n + 5) {
        display: block;
    }
}
@media (min-width: 825px) and (max-width: 1100px) {
    .honeycomb-cell:nth-child(5n + 4) {
        margin-left: calc(50% - 275px);
    }

    .honeycomb-cell:nth-child(5n + 5) {
        margin-right: calc(50% - 275px);
    }

    .honeycomb__placeholder:nth-child(5n),
    .honeycomb__placeholder:nth-child(5n + 3) {
        display: block;
    }
}
@media (min-width: 1100px) {
    .honeycomb-cell:nth-child(7n + 5) {
        margin-left: calc(50% - 400px);
    }

    .honeycomb-cell:nth-child(7n + 7),
    .honeycomb-cell:nth-child(7n + 5):nth-last-child(2) {
        margin-right: calc(50% - 400px);
    }

    .honeycomb__placeholder:nth-child(7n + 7),
    .honeycomb__placeholder:nth-child(7n + 9),
    .honeycomb__placeholder:nth-child(7n + 11) {
        display: block;
    }
}

@media screen and (max-width: 1650px) {
    .a1 {
        font-size: 14px;
    }
}
@media screen and (max-width: 1550px) {
    .a1 {
        font-size: 13px;
    }
    .menuItem {
        font-size: 15px;
    }
}
@media screen and (max-width: 1500px) {
    .a1 {
        font-size: 12px;
    }
}
@media screen and (max-width: 1400px) {
    .a1 {
        font-size: 8px;
    }
    .menuItem {
        font-size: 13px;
    }
}

.menu {
    display: flex;
    align-items: center !important;
    margin: 0px 10px 0px 10px;
    cursor: pointer;
}

.menu:hover {
    color: var(--brand-color);
}

.menu:hover a,
.menuItem:hover {
    color: var(--brand-color);
}

/* .a3:hover {

    color: #ffc107;

} */
.about-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 0px 10px 0px 10px; */
    /* cursor: pointer; */
    width: 40%;
    margin-bottom: 20px;
    margin-left: 12%;
}

.ogManifestText {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-color);
}
@media (max-width: 768px) {
    .ogManifestText {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .minw-100 {
        min-width: 140px;
    }
}
@media (max-width: 768px) {
    .SpaceContentArea {
        justify-content: space-around;
    }
}

.SpaceImageContainer {
    flex: 1; /* Esnek genişlik */
    max-width: 640px; /* Maksimum genişlik 640px */
    height: auto; /* Yükseklik otomatik ayarlanır */
    aspect-ratio: 16 / 9; /* Oranı korumak için kullanılır (640px x 360px) */
    border-radius: 10px; /* Kenar yuvarlama eklemek için */
    overflow: hidden; /* Taşan kısımları gizler */
    margin-right: 15px;
}

.SpaceImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.SpaceContentArea {
    flex: 1; /* Esnek genişlik */
    max-width: 640px; /* Maksimum genişlik 640px */
    height: auto; /* Yükseklik otomatik ayarlanır */
    aspect-ratio: 16 / 9; /* Oranı korumak için kullanılır (640px x 360px) */
    /* background-color: var(--brand-color); */
    border-radius: 10px; /* Kenar yuvarlama eklemek için */
    /* overflow: hidden; */
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px;
}

.SpaceContent {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.SpaceContentCat {
    background-color: var(--box-border-color);
    color: var(--text-color);
    border-radius: 5px;
    font-size: 0.765rem;
    /* font-weight: 600; */
    transition: all 0.3s ease;
    padding: 5px;
}
.spaceTitle {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 40px;
}
.spaceTitle:hover {
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.spaceDesc {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color-solid);
    line-height: 20px;
}
.spaceDate {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-color-solid);
    line-height: 20px;
}

.spaceButton {
    margin-top: 25px;
}

.custom-list {
    list-style-type: none;
    padding-left: 0px;
}

.custom-list li {
    font-weight: 300;
}

.custom-listMobile {
    list-style-type: none;
}

.custom-listMobile li {
    font-weight: 300;
    font-size: 14px;
}
.about-card-style {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    overflow: hidden !important;
    min-height: 300px; /* Minimum kart yüksekliği */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* İçerikleri dikey olarak hizalar */
}
.about-card-style:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    cursor: pointer;
}

@media (max-width: 768px) {
    .about-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        /* margin: 0px 10px 0px 10px; */
        /* cursor: pointer; */
        width: 40%;
        margin-bottom: 5px;
        margin-left: 33%;
    }
    .about-title-text {
        text-align-last: center;
        margin-bottom: 20px;
    }
    .custom-list {
        list-style-type: none;
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        align-self: center;
    }
}

.gap-4-5 {
    gap: 2rem;
}

.ogScoreScore {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 0.5;
    text-align: start;
}
.ogScoreAreaTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap; /* Bu satır başlığın tek satırda kalmasını sağlar */
}
.bottomLine {
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.rightLine {
    border-right: 1px solid var(--text-color-solid);
    padding-right: 5px;
    padding-left: 5px;
}
.bottomLineTooltip {
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.InfoBottomLine {
    border-bottom: 1px solid var(--box-border-color);
}
.InfoTopLine {
    border-top: 1px solid var(--box-border-color);
}
.py-2-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.infoContent {
    border-bottom: 1px solid var(--box-border-color);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.infoBox {
    border-radius: 5px;
    background-color: var(--info-box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    font-size: 0.675rem;
    width: 100%;
}
.infoBoxExchange {
    border-radius: 5px;
    background-color: var(--info-box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    font-size: 0.875rem;
    width: 100%;
}
.infoBoxDropdown {
    position: absolute;
    right: 0;
    top: 30px;
    width: max-content; /* min-width yerine width: max-content kullanıyoruz */
    border-radius: 5px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 7px;
    color: var(--text-color);
    z-index: 999 !important;
}
.infoBoxDropdown ul li {
    display: flex;
    padding: 0px 0px 5px 0px !important;
}
.infoBox:hover {
    opacity: 0.6;
    cursor: pointer;
}
.infoBox img {
    border-radius: 100%;
    margin-right: 5px;
}
.marketCapArea {
    width: 48%;
    border: 1px solid var(--box-border-color);
    border-radius: 5px;
    background-color: var(--box-background-color);
    padding: 10px;
    justify-content: center;
    min-height: 70px;
}
.marketCapAreaScore {
    font-size: 1.7rem;
    font-weight: 600;
}
.marketCapAreaTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

@media (max-width: 426px) {
    /* Sadece margin-right ekleyerek ikonlar arasındaki boşluğu artıralım */
    td.text-end .infoBox {
      margin-right: 5px; /* Sağdan boşluk artırıldı */
    }

    /* 1 more butonunun konumlanmasını düzeltelim */
    .infoBoxDropdownButton {
      margin-top: 0; /* Mevcut margin-top değerini kaldıralım */
      margin-left: 5px; /* Soldan boşluk ekleyelim */
      position: relative; /* Pozisyon belirleyelim */
      vertical-align: middle; /* Dikey ortalama yapalım */
    }

    /* Sosyal ikon kutularını aynı hizada tutalım */
    td.baseWhiteColor.font-600.py-2.text-end {
      line-height: 2.5; /* Satır yüksekliğini artıralım */
    }

  }

@media (max-width: 768px) {
    .ogScoreContainer {
        display: flex;
        flex-direction: column !important;
    }
    .ogScoreContainerMobile {
        display: flex;
        /* flex-direction: column !important */
    }
    .OgScoreArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .ogScoreScore {
        font-size: 2rem;
        text-align: start;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .ogScoreAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .marketCapArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .marketCapAreaScore {
        font-size: 1.7rem;
        font-weight: 600;
    }
    .marketCapAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
}

@media (max-width: 991px) {
    .ogScoreContainer {
        display: flex;
        flex-direction: column !important;
    }
    .ogScoreContainerMobile {
        display: flex;
        /* flex-direction: column !important */
    }
    .OgScoreArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .ogScoreScore {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .ogScoreAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .marketCapArea {
        width: 100%;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        background-color: var(--box-background-color);
        padding: 10px;
        justify-content: center;
        min-height: 70px;
        margin-bottom: 5px;
    }
    .marketCapAreaScore {
        font-size: 1.7rem;
        font-weight: 600;
    }
    .marketCapAreaTitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
    .pb-20 {
        padding-bottom: 100px;
    }
}

@media (max-width: 1400px) {
    .marketCapAreaTitle {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
    }
}
tbody,
td,
tfoot,
th,
thead,
tr {
    background-color: var(--background-color) !important;
    /* color: var(--text-color) !important; */
}
.cursor-pointer {
    cursor: pointer;
}

.feture-td-1 {
    width: 50px;
}

.feture-td-2 {
    width: 250px;
}

.text-size-11 {
    font-size: 11px;
}

.text-size-14 {
    font-size: 14px;
}

.text-size-18 {
    font-size: 15px;
}

.text-size-25 {
    font-size: 25px;
}

.menu-hover {
    border-radius: 10px;
}

.menu-hover:hover {
    background-color: #222531;
    box-shadow: rgba(128, 138, 157, 0.12) 0px 1px 2px,
        rgba(128, 138, 157, 0.24) 0px 8px 32px;
}

.table-responsive {
    overflow: unset;
}

.exchange-menu,
.crpyto-menu,
.ogspace-menu {
    display: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    padding: 15px 0px 25px 0px;
    background-color: #0d1421;
    top: 161px;
    box-shadow: rgba(128, 138, 157, 0.12) 0px 1px 2px,
        rgba(128, 138, 157, 0.24) 0px 8px 32px;
}

.exchange:hover .exchange-menu,
.crpyto:hover .crpyto-menu,
.ogspace:hover .ogspace-menu {
    display: block;
}

.bodyContainer {
    position: relative !important;
}

.filter-box {
    position: absolute !important;
    width: 250px;
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--background-color);
    z-index: 99 !important;
    left: 1%;
    top: 1%;
}

.feature-div {
    border-radius: 10px;
    padding: 0.5rem;
    min-height: 175px;
    max-height: 189px;
    overflow: hidden !important;
    background-color: var(--reviewcard-background-color);
    border: 1.5px solid var(--box-border-color);
    overflow: hidden;
}


/* .satisfaction-div a:hover {
    background-color: #323539 !important;
} */

#new-carousel {
    width: 100%;
    /* border: 1px solid #ccc; */
    /* padding: 15px */
}

#new-carousel .owl-dots {
    display: flex !important;
    margin-top: 0px !important;
    justify-content: end;
    text-align: end;
    width: 100%;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(---color-text-3) !important;
    color: black !important;
}

.nav-link {
    color: black;
    margin-left: 10px;
    background-color: #b8babc;
}

.nav-link:hover {
    color: black;
}

.select2-selection {
    border-radius: 0.375rem !important;
    height: 35px !important;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 8px !important;
    background-color: var(--border-color);
}

.page-item {
    margin: 3px;
}

.page-link {
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    background-color: var(--border-color);
    border: none !important;
    color: var(--text-color);
}

.page-item.active .page-link {
    background-color: var(--brand-color);
}

.page-link.disabled,
.disabled > .page-link {
    background-color: var(--border-color);
    color: var(--text-color);
    border: none !important;
}
.page-link.active,
.active > .page-link {
    font-size: 0.875rem !important;
    border: none !important;
}

.page-link .next,
.page-link .previous {
    font-size: 0.875rem !important;
    display: none !important;
}

.og-color-1,
.case-color-1,
.satisfaction-color-1,
.point-color-1 {
    color: #eb0102;
}

.og-color-2,
.case-color-2,
.satisfaction-color-2,
.point-color-2 {
    color: #fc6c03;
}

.og-color-3,
.case-color-3,
.satisfaction-color-3,
.point-color-3 {
    color: #bdb322;
}

.og-color-4,
.case-color-4,
.satisfaction-color-4,
.point-color-4 {
    color: #85b200;
}

.og-color-5,
.case-color-5,
.satisfaction-color-5,
.point-color-5 {
    color: #00b200;
}

.point-border-color-1 {
    border: 1px dashed #eb0102;
}

.point-border-color-2 {
    border: 1px dashed #fc6c03;
}

.point-border-color-3 {
    border: 1px dashed #bdb322;
}

.point-border-color-4 {
    border: 1px dashed #85b200;
}

.point-border-color-5 {
    border: 1px dashed #00b200;
}

.table-dark {
    --bs-table-bg: var(--background-color);
    --bs-table-color: var(--text-color);
    --bs-table-hover-bg: var(--input-background-color);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-color: var(--text-color);
}

.accordion {
    --bs-accordion-bg: var(--background-color) !important;
    --bs-accordion-color: var(--text-color) !important;
    --bs-accordion-btn-color: var(--background-color) !important;
    --bs-accordion-border-color: none !important;
}

.accordion-body {
    background-color: var(--box-background-color) !important;
}
.accordion-body > p {
    font-family: "Poppins", sans-serif !important;
    font-size: 0.875rem !important;
    /* color: var(--text-color-solid) !important; */
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7931a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item {
    background-color: var(--background-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Default background for all accordion headers when collapsed (closed) */
.accordion-button.collapsed {
    background-color: var(
        --background-color
    ) !important; /* Normal background */
    color: var(--text-color) !important;
    transition: background-color 0.3s ease;
}

/* Background for the opened accordion header */
.accordion-button:not(.collapsed) {
    background-color: var(
        --background-color
    ) !important; /* Brand color when expanded */
    color: var(--text-color) !important;
    transition: background-color 0.3s ease;
}

/* When accordion header is focused */
.accordion-button:focus {
    box-shadow: none !important;
}
.accordion-button.faqOpen {
    /* background-color: var(--brand-color) !important;  */
    color: var(--brand-color) !important;
    transition: background-color 0.3s ease;
    font-weight: 600 !important;
}

.navigation-mobile {
    display: none !important;
    border-bottom: 1px solid var(--border-color);
    padding: 12px;
}

.info-menu-mobile {
    display: none !important;
}
@media screen and (max-width: 1200px) {
    .navigation,
    .info-menu {
        display: none !important;
    }

    .navigation-mobile {
        display: block !important;
    }

    .info-menu-mobile {
        display: block !important;
    }

    .crypto-table {
        width: 100% !important;
    }

    .crypto-promo {
        display: none !important;
    }

    .table-responsive {
        overflow: auto !important;
    }
}
@media screen and (max-width: 960px) {
    .navigation,
    .info-menu {
        display: none !important;
    }

    .navigation-mobile {
        display: block !important;
    }

    .info-menu-mobile {
        display: block !important;
    }

    .crypto-table {
        width: 100% !important;
    }

    .crypto-promo {
        display: none !important;
    }

    .table-responsive {
        overflow: auto !important;
    }
}

.offcanvas-header {
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
}
.offcanvas-body {
    background-color: var(--background-color);
}

.offcanvas-header button {
    background-color: var(---color-text-3) !important;
}

.mobile-solo-menu {
    padding: 1rem 0px !important;
    border-bottom: 1px solid var(--border-color);
    list-style: none;
}

.search-detail {
    display: none;
    max-height: 452px;
    position: absolute;
    width: 750px;
    z-index: 99999;
    background-color: var(--box-background-color) !important;
    border: 1px solid var(--box-border-color);
    border-radius: 7px;
    top: 46px;
    right: 0px;
    overflow-x: hidden !important;
    padding: 20px;
}

.searchDetailTitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    border-bottom: 0.5px solid var(--brand-color);
    padding-bottom: 5px;
}

.searchDetailTitleIcon {
    font-size: 0.75rem;
    color: var(--brand-color);
    margin-right: 5px;
}
.searchDetailItem {
    text-decoration: none; /* Alt çizgiyi kaldırır */
    color: inherit; /* Renk kalmasını sağlar */
    display: block; /* Link alanını tüm bloğa yayar */
    border-radius: 5px; /* Kenarlara yumuşak köşeler verir */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Geçiş efekti */
    padding: 10px 5px 10px 5px;
    list-style: none !important;
}
.searchDetailItem:hover {
    border-radius: 5px;
    background-color: var(--hover-color-text);
    cursor: pointer;
}
.askSearchLink:hover {
    background-color: var(--hover-color-text) !important;
    cursor: pointer;
}
.ogAlertWarning {
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem;
    align-items: center;
}

.ogAlertWarning svg {
    color: var(--outline-button-color);
    fill: var(--brand-color) !important;
    width: 15px;
}

.ogAlertDanger {
    background-color: rgba(200, 49, 49, 0.233);
    color: rgb(200, 49, 49);
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem;
    align-items: center;
}

.dangerColor {
    color: rgb(200, 49, 49);
}

.ogAlertDanger svg {
    color: rgb(200, 49, 49);
    fill: rgb(200, 49, 49) !important;
    width: 15px;
}

.btn-close {
    --bs-btn-close-color: var(--brand-color) !important;
}

.alert-dismissible .btn-close {
    padding: 0.875rem 1rem !important;
}

.overview {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 10px;
    background-color: #111;
}

.overview.submitted {
    /* border: 3px 0 0 0 solid green; */
    border-top: 4px solid rgb(155, 155, 43);
    /* border-left: 5px solid yellow; */
    border-bottom: 1px solid rgb(220, 220, 220);
}

.overview.unsolved {
    /* border: 3px 0 0 0 solid green; */
    border-left: 6px solid red;
    /* border-left: 5px solid yellow; */
}

.overview.solved {
    /* border: 3px 0 0 0 solid green; */
    border-left: 6px solid green;
    /* border-right: 5px solid green; */
}

.overview.waiting {
    border-left: 10px solid grey;
    /* border-right: 5px solid green; */
    border-bottom: 1px solid grey;
}

.overview.open {
    border-left: 6px solid grey;
    /* border-right: 5px solid green; */
}

.review-div {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    height: 150px;
    margin: 0px 0px 10px 10px;
    background-color: #111;
    border: 1px solid #4f4f4f;
}

.review-div-2 {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 10px;
    background-color: var(---color-bg-2);
}

.round-box {
    width: 60px;
    height: 60px;
    /* border: 1px solid gray; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    /* margin-left: auto; */
    /* Yuvarlak div'in otomatik olarak sağa konumlanması */
    margin-bottom: 10px;
    /* İstenen boşluğu kontrol etmek için */
}

.review-text {
    word-break: break-all;
    height: 70px;
    max-height: 70px;
    overflow-x: auto;
    width: 100%;
}

/* BİTİŞ */
#pills-tab {
    display: flex;
}

.home_table_img {
    width: 30px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.home_table_text {
    font-size: 18px;
}

@media only screen and (max-width: 900px) {
    #pills-tab {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    #pills-tab > li {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .home_table_img {
        width: 25px;
    }

    .home_table_text {
        font-size: 15px;
    }
}

.form-control-dark {
    background-color: var(---color-bg-1) !important;
    color: var(---color-text-2) !important;
    border: 1px solid gray !important;
}

.table_mobile_custom {
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .table_mobile_custom_text {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        line-height: 1.3;

    }
    .DatatableCoinSmallText {
        padding:0px !important;
    }
    .DatatableCoinText {
        padding:0px !important;
        margin: 0px;
    }

    #coinTable td:nth-child(1) {
        position: sticky;
            left: -5px;
    }
    #coinTable td:nth-child(2) {
        position: sticky;
            left:27px;

    }
    #coinTable td:nth-child(3) {
        position: sticky;
            left: 60px;
    }

    #coinTable th:nth-child(1) {
        position: sticky;
            left: 0px;
            z-index: 100;
    }
    #coinTable th:nth-child(2) {
        position: sticky;
        left: 5px;
        min-width: 33px;
        z-index: 100;
    }
    #coinTable th:nth-child(3) {
        position: sticky;
            left: 53px;
            z-index: 100;
    }


    #coinTable2 td:nth-child(1) {
        position: sticky;
            left: -5px;
    }
    #coinTable2 td:nth-child(2) {
        position: sticky;
            left:27px;

    }
    #coinTable2 td:nth-child(3) {
        position: sticky;
            left: 60px;
    }

    #coinTable2 th:nth-child(1) {
        position: sticky;
            left: 0px;
            z-index: 100;
    }
    #coinTable2 th:nth-child(2) {
        position: sticky;
        left: 5px;
        min-width: 33px;
        z-index: 100;
    }
    #coinTable2 th:nth-child(3) {
        position: sticky;
            left: 53px;
            z-index: 100;
    }
}

.og-ask-div {
    border: 1px solid gray;
    border-radius: 10px;
    background-color: #ffc107;
}

.ask-categories {
    border: 1px solid gray;
    background-color: var(---color-bg-2);
    border-radius: 15px;
}

.ask-color {
    background-color: var(---color-bg-2);
}

.ask-categories > ul > li {
    list-style: none;
}

.ask-categories-square {
    border: 1px solid gray;
    background-color: #0d1421;
    border-radius: 15px;
}

#kullanici_etiketle > ::placeholder {
    color: #ffff !important;
    opacity: 1;
    /* Firefox */
}

#kullanici_etiketle > ::-ms-input-placeholder {
    /* Edge 12-18 */
    color: #ffff !important;
}

.ask-font-size {
    font-size: 20px;
}

.ask-question-bar {
    font-size: 15px;
    font-weight: 600;
}

.ask_category_list {
    border-bottom: 1px solid gray;

    padding: 15px;
}

.ask_category_list:hover {
    color: #ffc107 !important;
}

.ask_category_more {
    line-height: 15px;
    padding: 15px;
}

.ask-profil-image {
    width: 33px;
    height: 33px;
}

#ask-head > .form-control:focus {
    background-color: #0d1421 !important;
}

#ask-text > .form-control:focus {
    background-color: #0d1421 !important;
}

.custom-modal-color {
    background-color: #0d1421 !important;
}

.modal-body {
    border-bottom: 0px !important;
    border-radius: 10px;
}

#kullanici_etiketle .form-control:focus {
    background-color: #0d1421;
}

.complaint-div-answer {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 10px;
    background-color: #0d1421;
    /* border: 1px solid grey; */
    border-top: 10px solid green;
    /* border-left: 5px solid yellow; */
    border-bottom: 1px solid rgb(220, 220, 220);
}

.ask-read-btn {
    color: #f6f6f6 !important;
    border: 0px !important;
}

.ask-read-btn:hover {
    color: #b8babc !important;
}

.ask-answer-passive {
    display: none;
}

.ask-answer-active {
    display: block;
}

.modal-content {
    border-radius: 15px !important;
}

.message-number-index {
    font-size: 15px;
}

.etherscan-li {
    list-style: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.etherscan-li-element {
    position: absolute;
    background-color: var(---color-bg-2);
    gap: 25px;
    top: -500px;
}

.etherscan-li-element-active {
    position: absolute;
    background-color: var(---color-bg-2);
    gap: 25px;
    padding: 30px;
    z-index: 99999;
}

.ether-scan-title {
    font-size: 20px;
}

.low-container {
    padding: 25px;
    border: 1px solid gray;
    background-color: #0d1421;
}

.price-span {
    font-size: 20px;
    font-weight: 500;
}

#carousel1.owl-carousel {
    z-index: 0;
}

#carousel2.owl-carousel {
    z-index: 0;
}

.review-content {
    width: 85%;
}

.review-score-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

.score-con-div {
    width: 15%;
}

.score-div {
    border: 5px dotted #00b200;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    width: 100px;
}

.folder-profile-image {
    border-radius: 50%;
}

.folder-complaints-container {
    /* width: 100%; */
    background-color: #24283b;
    border-radius: 10px;
    cursor: pointer;
}

.folder-image-div {
    width: 50px;
    height: 50px;
}

.folder-radius {
    border-radius: 10px;
}

.folder-message-see-container {
    background-color: #0d1421;
    height: 800px;
}

.message-see-container {
    background-color: #24283b;
    height: 808px;
    overflow-y: auto;
}

.folder-overflow-container {
    height: 650px;
    overflow-y: auto;
}

#folder-message-see-container ::-webkit-scrollbar {
    width: 5px;
}

#folder-message-see-container ::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#folder-message-see-container ::-webkit-scrollbar-thumb {
    background: #ffc107;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-color);
}

::-webkit-scrollbar {
    color: var(--brand-color) !important;
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    color: var(--brand-color) !important;
    border-radius: 5px;
    width: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-color);
}

body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

@media only screen and (max-width: 950px) {
    .review-score-container {
        justify-content: center;
        flex-direction: column;
    }

    .review-content {
        width: 100%;
    }

    .score-con-div {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4caf50;
    color: white;
    padding: 15px;
    border-radius: 5px;
    display: none;
    z-index: 9999999 !important;
}

.select2-container--open {
    z-index: 9999999;
}

.eth-gas-container-passive {
    display: none;
}

.eth-gas-container {
    position: absolute;
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    z-index: 9999999999999999;
    width: 20%;
    display: block;
    background-color: var(--box-background-color);
}

.gasValueContainer {
    width: 87%;
    background-color: var(--reviewcard-background-color);
    border: 1.5px solid var(--box-border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
}
.gasValueContainer span {
    font-size: .875rem;
    font-weight: 500;
}

.text-img-container {
    position: relative;
}

.test {
    width: 100%;
}

.test img {
    width: 100%;
    position: relative;
}

.test-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 10px;
    width: 100%;
    /* background: #000; */
    padding: 80px;
}

.test-2 .leaf-group {
    display: flex;
    justify-content: space-around;
    gap: 100px;
    margin-bottom: 70px;
}

.test-2 .leaf-group:nth-child(1) {
    margin-bottom: 73px;
    /* background-color: red */
}

.test-2 .leaf-group:nth-child(1) h6:nth-child(1) {
    margin-left: -11px;
}

.test-2 .leaf-group:nth-child(1) h6:nth-child(2) {
    margin-left: 619px;
}

.test-2 .leaf-group:nth-child(2) {
    margin-bottom: 66px;
}

.test-2 .leaf-group:nth-child(2) h6:nth-child(1) {
    margin-left: -11px !important;
}

.test-2 .leaf-group:nth-child(2) h6:nth-child(2) {
    margin-left: 952px;
}

.test-2 .leaf-group:nth-child(3) {
    margin-bottom: 50px;
}

.test-2 .leaf-group:nth-child(3) h6:nth-child(1) {
    margin-left: -11px !important;
}

.test-2 .leaf-group:nth-child(3) h6:nth-child(2) {
    margin-left: 366px !important;
}

.test-2 .leaf-group:nth-child(3) h6:nth-child(3) {
    margin-left: 535px !important;
}

.test-2 .leaf-group:nth-child(4) {
    margin-bottom: 128px;
}

.test-2 .leaf-group:nth-child(4) h6:nth-child(1) {
    margin-left: -11px;
}

.test-2 .leaf-group:nth-child(4) h6:nth-child(2) {
    margin-left: 953px;
}

.test-2 .leaf-group:nth-child(5) {
    margin-bottom: 8px;
}

.test-2 .leaf-group:nth-child(5) h6:nth-child(1) {
    margin-left: -6px;
}

.test-2 .leaf-group:nth-child(5) h6:nth-child(2) {
    margin-left: 637px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-color-solid) !important;
}

.breadcrumb {
    --bs-breadcrumb-divider: "\f105"; /* fa-angle-right ikonu */
    display: flex;
    list-style: none;
    padding: 5px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider);
    font-family: "Font Awesome 5 Free", "Font Awesome";
    font-weight: 900; /* Font Awesome ikonları için ağırlık */
    padding: 0px 5px;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: 0px !important;
}

/* SVG etiketlerinin altındaki rakamlar */
.custom-value-label {
    font-size: 18px; /* Yazı boyutunu biraz daha büyük yapabilirsiniz */
    font-weight: bold;
    fill: currentColor; /* Tema renklerine göre renk değişimi */
    text-anchor: middle; /* Ortada hizalamak için */
    dominant-baseline: middle; /* Dikeyde ortalamak için */
}
.crypto-div {
    /* box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px, rgba(88, 102, 126, 0.12) 0px 1px 2px; */
    border: 1px solid #4f4f4f;
    border-radius: 8px;
    padding: 10px;
    /* margin: 0px 0px 10px 10px; */
    background-color: #111;
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--progress-hight);
    --bs-progress-height: 7px;
    --bs-progress-bg: var(--text-color-solid) !important;
}

.nav-link {
    text-align: left !important;
    margin-top: 5px;
}

.nav-link.active {
    background-color: var(---color-text-3) !important;
    color: var(---color-text-1) !important;
}

.fa-star-o {
    font-size: 20px;
    color: #808080;
}

.fa-star-half-o {
    font-size: 20px;
    color: #edb867;
}

.average {
    font-size: 18px;
    color: #808080;
    padding-left: 10px;
}

.rate-comment-up:hover {
    border: 1px solid #28a745 !important;
}

.rate-comment-down:hover {
    border: 1px solid #dc3545 !important;
}

.complaints-support:hover i,
.complaints-support:hover span {
    color: var(---color-text-3) !important;
}

.round-box-link {
    width: 45px;
    margin: 10px;
    height: 45px;
    border: 1px solid gray;
    background-color: var(---color-bg-2);
    border-radius: 50%;
    color: var(---color-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    /* margin-left: auto; */
    /* Yuvarlak div'in otomatik olarak sağa konumlanması */
    margin-bottom: 10px;
    /* İstenen boşluğu kontrol etmek için */
}

.round-box-category {
    width: 45px;
    margin: 10px;
    height: 45px;
    background-color: var(---color-bg-2);
    border-radius: 50%;
    color: var(---color-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.round-box-category a {
    color: var(---color-text-2) !important;
}

.round-box-link a {
    color: var(---color-text-2) !important;
}

.round-box-link:hover {
    border: 1px solid var(---color-bg-1) !important;
}

.round-box-complaints {
    width: 70px;
    height: 60px;
    border-radius: 50%;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: bold;
}

.complaint-div {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    background-color: var(--box-background-color);
    /* border: 1px solid grey; */
    /* border-left: 5px solid yellow; */
    border-bottom: 1px solid var(--box-border-color);
}

.complaint-div-2 {
    border-top: 10px solid red;
}

.complaint-div1 {
    border-top: 10px solid grey;
}
.complaint-div_new {
    border-bottom: 1px solid grey;
}
.complaint-div2 {
    border-top: 10px solid green;
}

.og-review-button {
    animation: pulse 1.5s infinite;
    /* Pulse animasyonunu tanımla */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        /* Normal boyutta başla */
    }

    50% {
        transform: scale(1.2);
        /* 50% boyut büyütme */
    }

    100% {
        transform: scale(1);
        /* Normal boyuta geri dön */
    }
}

.evaluate-div {
    border-radius: 8px;
    background-color: var(---color-bg-2);
    border: 1px solid gray;
    padding: 10px;
}

.complaint-reply {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(---color-bg-2);
    /* display: none; */
}

.complaint-reply span {
    color: var(---color-text-2);
}

.btn.active {
    background-color: #ffa500;
    /* Warning (Orange) */
    border-color: #ffa500 !important;
    color: white;
}

.btn-day {
    background-color: transparent;
    color: var(--text-color-solid);
    border: 1px solid var(--box-border-color);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-day:hover {
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border-color: var(--outline-button-text-color);
}

.btn-day.active {
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border-color: var(--outline-button-text-color);
}

/* Add specific styles for dark mode */
.dark-theme .btn-day {
    background-color: transparent;
    color: var(--text-color-solid);
    border: 1px solid var(--box-border-color);
}

.dark-theme .btn-day:hover,
.dark-theme .btn-day.active {
    background-color: var(--outline-button-color);
    color: var(--outline-button-text-color);
    border-color: var(--outline-button-text-color);
}

.evaluate-text {
    width: 16%;
    border: none !important;
    padding: 0px !important;
    height: 35px !important;
    text-align: center !important;
}

.foto_container {
    position: relative;
}

.foto_yazi_first_text {
    color: var(--text-color);
    font-size: 20px;
}

.foto_yazi_first_center {
    color: var(--text-color);
    font-size: 40px;
}

.foto_yazi_center {
    position: absolute;
    left: 41%;
    top: 40%;
    z-index: 1;
}

.foto_info {
    font-size: 14px;
    color: var(--brand-color);
    cursor: pointer;
}

.foto_yazi_first {
    position: absolute;
    left: 14.5%;
    top: 7%;
    z-index: 1;
}

.foto_yazi_second {
    position: absolute;
    left: 9%;
    top: 26%;
    z-index: 1;
}

.foto_yazi_third {
    position: absolute;
    left: 6.6%;
    top: 43%;
    z-index: 1;
}

.foto_yazi_fourth {
    position: absolute;
    left: 9%;
    top: 60%;
    z-index: 1;
}

.foto_yazi_five {
    position: absolute;
    left: 14.3%;
    top: 87.5%;
    z-index: 1;
}

.foto_yazi_six {
    position: absolute;
    right: 13.8%;
    top: 7%;
    z-index: 1;
}

.foto_yazi_seven {
    position: absolute;
    right: 8%;
    top: 25.5%;
    z-index: 1;
}

.foto_yazi_eight {
    position: absolute;
    right: 5.9%;
    top: 43%;
    z-index: 1;
}

.foto_yazi_nine {
    position: absolute;
    right: 8.2%;
    top: 59.5%;
    z-index: 1;
}

.foto_yazi_ten {
    position: absolute;
    right: 13.3%;
    top: 87.4%;
    z-index: 1;
}

.foto_info_first {
    position: absolute;
    left: 32.5%;
    top: 4.5%;
    z-index: 1;
}

.foto_info_second {
    position: absolute;
    left: 31%;
    top: 23.2%;
    z-index: 1;
}

.foto_info_third {
    position: absolute;
    left: 27.6%;
    top: 40.5%;
    z-index: 1;
}

.foto_info_fourth {
    position: absolute;
    left: 29%;
    top: 56.5%;
    z-index: 1;
}

.foto_info_five {
    position: absolute;
    left: 34.3%;
    top: 85.4%;
    z-index: 1;
}

.foto_info_six {
    position: absolute;
    right: 18.8%;
    top: 4%;
    z-index: 1;
}

.foto_info_seven {
    position: absolute;
    right: 13.8%;
    top: 22.2%;
    z-index: 1;
}

.foto_info_eight {
    position: absolute;
    right: 10.9%;
    top: 40%;
    z-index: 1;
}

.foto_info_nine {
    position: absolute;
    right: 13.3%;
    top: 56.5%;
    z-index: 1;
}

.foto_info_ten {
    position: absolute;
    right: 20.9%;
    top: 84.4%;
    z-index: 1;
}

.info-box-text {
    font-size: 15px;
    color: var(--text-color);
}

.info_box_first {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 10%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_second {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 29%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_third {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 47%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_fourth {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 62%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_five {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 92%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_six {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 10%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_seven {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 29%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_eight {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 47%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_nine {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 62%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info_box_ten {
    position: absolute;
    width: 90%;
    background-color: #111;
    border: 1px solid #4f4f4f;
    padding: 15px;
    z-index: 2;
    top: 92%;
    opacity: 1;
    transition: 0.1s ease-in;
}

.info-box-passive {
    position: absolute;
    opacity: 0;
    z-index: -99999;
}
.exchangeInfoBar {
    width: 100%;
}

.exchangeHeader {
    background: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.exchangeImage {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.exchangeImage img {
    border: 2px solid var(--box-border-color);
    transition: border-color 0.3s ease;
}

.exchangeImage:hover img {
    border-color: var(--brand-color);
}

.exchangeInfoBar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.exchangeInfoBarSocial {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--box-border-color);
}

.exchangeInfoBarSocialIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.exchangeInfoBarSocialIcon:hover {
    background: var(--brand-color);
    border-color: var(--brand-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.exchangeInfoBarSocialIcon i {
    color: var(--text-color);
    transition: color 0.3s ease;
}

.exchangeInfoBarSocialIcon:hover i {
    color: white;
}

.social-separator {
    color: var(--text-color-solid);
    opacity: 0.5;
    font-weight: 300;
}

@media (max-width: 1200px) {
    .exchangeHeader {
        padding: 20px;
    }

    .exchangeInfoBar {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .exchangeHeader {
        text-align: center;
    }

    .exchangeImage {
        justify-content: center;
        margin-bottom: 20px;
    }

    .exchangeInfoBar {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin: 20px 0;
    }

    .exchangeInfoBarSocial {
        justify-content: center;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .exchangeHeader {
        padding: 16px;
        margin-bottom: 24px;
    }

    .exchangeInfoBar {

        gap: 12px;
    }

    .exchangeInfoCard {
        padding: 16px;
        min-height: 80px;
    }

    .exchangeInfoCardContext {
        font-size: 1.1rem;
    }

    .exchangeInfoCardTitle {
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .exchangeInfoBarSocial {
        flex-wrap: wrap;
        gap: 8px;
    }

    .exchangeInfoBarSocialIcon {
        width: 36px;
        height: 36px;
    }
}

.profileHeader {
    border: 1px solid var(--box-border-color);
    background-color: var(--box-background-color);
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    gap: 3rem;
}

.badgeImage {
    position: absolute;
    top: 40px;
    right: 20px;
    width: 100px;
    height: 100px;
}

.exchangeContainer {
    width: 100%;
    min-height: 105px;
}

.scoreCardContainer {
    min-height: 380px; /* Yüksekliği içeriğe göre otomatik alır */
    margin-bottom: 20px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;

    display: flex;
}

@media (max-width: 768px) {
    .scoreCardContainer {
        padding: 0.5rem;
    }
}

.scoreCardRight {
    /* height: 100%; */
    background-color: var(--background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 10px;
    display: flex;
    padding: 0; /* İç padding kaldırıldı */
}

/* .apexcharts-canvas svg{
    height: 600px !important;
} */

#radarChart {
    min-width: 300px;
    min-height: 300px;
    margin: auto;
}

@media (max-width: 768px) {
    #radarChart {
        min-width: 200px;
        min-height: 200px;
    }
}

.exchangeImage {
    display: flex;
    align-items: center;
}

.profileImage {
    display: flex;
    align-items: center;
}
.profileImage img {
    width: 100px;
    height: 100px;
}

.exchangeInfoBarSocialIcon {
    align-content: center;
    text-align: center;
    width: 40px;
    height: 40px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 100px;
    margin-left: 5px;
}
.exchangeInfoBarSocialIcon i {
    font-size: 1.1rem;
    color: var(--text-color);
}

.exchangeInfoBarSocialIcon:hover {
    opacity: 0.8;
    cursor: pointer;
    transition: 0.2s all;
}

.profileInfoBarSocialIcon {
    align-content: center;
    text-align: center;
    width: 40px;
    height: 40px;
    background-color: var(--brand-color);
    border-radius: 100px;
}
.profileInfoBarSocialIcon i {
    font-size: 1.5rem;
    color: var(--white-color);
    margin-top: 5px;
}

.profileInfoBarSocialIcon:hover {
    opacity: 0.8;
    cursor: pointer;
    transition: 0.2s all;
}

.profileBioBar {
    height: 100%;
    align-self: start;
    margin-top: 10px;
    overflow: hidden;
}
.profileBioBarContent {
    width: 100%; /* veya belirli bir genişlik */
    word-wrap: break-word; /* Uzun kelimeleri bölerek alt satıra geçirir */
    word-break: break-word; /* Kelimelerin satır sonunda kesilmesini sağlar */
}

#chart3 {
    min-height: 30px;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.scoreCardLeft {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 10px;
}

.foto_title_text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    z-index: 1;
}

.foto_title_text_right {
    color: #fcc018;
    font-size: 20px;
    font-weight: 700;
    z-index: 1;
}

.foto_yazi_title_first {
    position: absolute;
    left: 21.5%;
    top: 5%;
    z-index: 1;
}

.foto_yazi_title_second {
    position: absolute;
    left: 16%;
    top: 23.5%;
    z-index: 1;
}

.foto_yazi_title_third {
    position: absolute;
    left: 13.6%;
    top: 41%;
    z-index: 1;
}

.foto_yazi_title_fourth {
    position: absolute;
    left: 16%;
    top: 57%;
    z-index: 1;
}

.foto_yazi_title_five {
    position: absolute;
    left: 21.3%;
    top: 85.5%;
    z-index: 1;
}

.foto_yazi_title_six {
    position: absolute;
    right: 20.8%;
    top: 5%;
    z-index: 1;
}

.foto_yazi_title_seven {
    position: absolute;
    right: 16%;
    top: 23.5%;
    z-index: 1;
}

.foto_yazi_title_eight {
    position: absolute;
    right: 12.9%;
    top: 41%;
    z-index: 1;
}

.foto_yazi_title_nine {
    position: absolute;
    right: 17.2%;
    top: 56.9%;
    z-index: 1;
}

.foto_yazi_title_ten {
    position: absolute;
    right: 22.3%;
    top: 85.4%;
    z-index: 1;
}

.folder-mobile {
    display: block !important;
}

.complaint-div-mobile-active {
    display: none;
}
.foto_container-mobile {
    display: none;
}
#echange_fourth {
    top: 57.5%;
    left: 15.5%;
}
#echange_fourth_text {
    font-size: 20px !important;
}
#exchange_nine {
    top: 57.5%;
    right: 14.9%;
}
#exchange_nine_text {
    font-size: 20px !important;
}
@media only screen and (max-width: 1400px) {
    .foto_title_text_right {
        font-size: 18px;
    }
    .foto_title_text {
        font-size: 18px;
    }
    .foto_yazi_first_text {
        font-size: 18px;
    }
}
@media only screen and (max-width: 1300px) {
    .foto_title_text_right {
        font-size: 16px;
    }
    .foto_title_text {
        font-size: 16px;
    }
    .foto_yazi_first_text {
        font-size: 16px;
    }
}
@media only screen and (max-width: 1200px) {
    .foto_title_text_right {
        font-size: 15px;
    }
    .foto_title_text {
        font-size: 15px;
    }
    .foto_yazi_first_text {
        font-size: 15px;
    }

    .exchangeHeader{
        /* display:flex;
        flex-direction: column; */
        gap: 10px;
    }
}
@media only screen and (max-width: 1100px) {
    .foto_title_text_right {
        font-size: 13px;
    }
    .foto_title_text {
        font-size: 13px;
    }
    .foto_yazi_first_text {
        font-size: 13px;
    }
    #exchange_nine_text {
        font-size: 12px !important;
    }
    #echange_fourth_text {
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 991px) {
    .profileImage img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    .foto_container-mobile {
        display: block;
        position: relative;
    }
    .foto_container {
        display: none !important;
    }
    .complaint-div-mobile-active {
        display: block;
        margin-bottom: 140%;
    }

    .complain_section_mobile {
        max-height: 1400px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .foto_yazi_first_center {
        font-size: 37px;
    }

    .foto_yazi_first_text {
        font-size: 31px;
    }

    .foto_info {
        font-size: 31px;
    }

    #exchange_photo_mobile .foto_title_text {
        font-size: 15px;
    }

    #exchange_photo_mobile .foto_title_text_right {
        font-size: 15px;
    }

    .foto_title_text {
        font-size: 31px;
    }

    .foto_title_text_right {
        font-size: 31px;
    }
    .foto_yazi_ten {
        top: 92.8%;
        left: 81%;
    }
    .foto_yazi_nine {
        top: 84.5%;
        left: 11%;
    }
    .foto_yazi_eight {
        top: 75.6%;
        left: 81.1%;
    }
    .foto_yazi_seven {
        top: 67.3%;
        left: 11%;
    }
    .foto_yazi_six {
        top: 58.5%;
        left: 80.9%;
    }
    .foto_yazi_five {
        top: 50.2%;
        left: 11%;
    }
    .foto_yazi_fourth {
        top: 41.5%;
        left: 81.5%;
    }
    .foto_yazi_third {
        top: 33%;
        left: 10.9%;
    }
    .foto_yazi_second {
        top: 24.3%;
        left: 81%;
    }
    .foto_info_first {
        top: 16.5%;
        left: 63%;
    }
    .foto_info_second {
        top: 24.5%;
        left: 60%;
    }
    .foto_info_third {
        top: 33.2%;
        left: 64%;
    }
    .foto_yazi_title_second {
        top: 25.4%;
        left: 22%;
    }
}
@media only screen and (max-width: 600px) {
    .foto_container-mobile {
        display: block;
        position: relative;
    }
    .foto_container {
        display: none !important;
    }
    .complaint-div-mobile-active {
        display: block;
        margin-bottom: 140%;
    }

    .complain_section_mobile {
        max-height: 1400px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .foto_yazi_center {
        left: 43%;
        top: 4.9%;
    }
    .foto_yazi_first_center {
        font-size: 13px !important;
    }
    .folder-mobile {
        display: none !important;
    }

    .foto_yazi_first_text {
        font-size: 13px !important;
    }

    .foto_info {
        font-size: 10px !important;
    }

    .foto_yazi_first {
        top: 15.9%;
        left: 12%;
    }

    .foto_yazi_second {
        top: 23.8%;
        left: 80%;
    }

    .foto_yazi_third {
        top: 32.9%;
        left: 12%;
    }

    .foto_yazi_fourth {
        top: 41.2%;
        left: 80%;
    }
    .foto_yazi_five {
        top: 49.9%;
        left: 12%;
    }
    #exchange_photo_mobile .foto_title_text {
        font-size: 15px;
    }

    #exchange_photo_mobile .foto_title_text_right {
        font-size: 15px;
    }
    .foto_yazi_six {
        top: 58%;
        left: 80%;
    }

    .foto_yazi_seven {
        top: 67.5%;
        left: 12%;
    }

    .foto_yazi_eight {
        top: 75.2%;
        left: 79.8%;
    }

    .foto_yazi_nine {
        top: 84.2%;
        left: 12%;
    }
    .foto_yazi_ten {
        top: 92.9%;
        left: 80.1%;
    }

    .foto_info_first {
        top: 17.3%;
        left: 68%;
    }

    .foto_info_second {
        top: 25.4%;
        left: 63%;
    }

    .foto_info_third {
        top: 34%;
        left: 64%;
    }

    .foto_info_fourth {
        top: 42.6%;
        left: 64%;
    }

    .foto_info_five {
        top: 51.2%;
        left: 69.3%;
    }

    .foto_info_six {
        top: 59.8%;
        left: 62.3%;
    }

    .foto_info_seven {
        top: 68.4%;
        left: 69.3%;
    }

    .foto_info_eight {
        top: 76.4%;
        left: 67.3%;
    }

    .foto_info_nine {
        top: 85.4%;
        left: 70.3%;
    }

    .foto_info_ten {
        top: 93.5%;
        left: 63.3%;
    }

    .foto_title_text {
        font-size: 14px;
    }

    .foto_title_text_right {
        font-size: 14px;
    }

    .foto_yazi_title_first {
        top: 17.3%;
        left: 34%;
    }

    .foto_yazi_title_second {
        top: 25.4%;
        left: 21%;
    }

    .foto_yazi_title_third {
        top: 34%;
        left: 33%;
    }

    .foto_yazi_title_fourth {
        top: 42.6%;
        left: 32%;
    }

    .foto_yazi_title_five {
        top: 51.2%;
        left: 33%;
    }

    .foto_yazi_title_six {
        top: 59.8%;
        left: 26%;
    }

    .foto_yazi_title_seven {
        top: 68.4%;
        left: 36%;
    }

    .foto_yazi_title_eight {
        top: 76.4%;
        left: 22%;
    }

    .foto_yazi_title_nine {
        top: 85.4%;
        left: 32%;
    }

    .foto_yazi_title_ten {
        top: 93.5%;
        left: 37%;
    }
}
@media only screen and (max-width: 991px) {
    .foto_container-mobile {
        display: block;
        position: relative;
    }
    .foto_container {
        display: none !important;
    }
    .complaint-div-mobile-active {
        display: block;
        margin-bottom: 140%;
    }

    .complain_section_mobile {
        max-height: 1400px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .foto_yazi_center {
        left: 43%;
        top: 4.9%;
    }
    .foto_yazi_first_center {
        font-size: 18px;
    }
    .folder-mobile {
        display: none !important;
    }

    .foto_yazi_first_text {
        font-size: 18px;
    }

    .foto_info {
        font-size: 15px;
    }

    .foto_yazi_first {
        top: 15.9%;
        left: 12%;
    }

    .foto_yazi_second {
        top: 23.8%;
        left: 80%;
    }

    .foto_yazi_third {
        top: 32.9%;
        left: 12%;
    }

    .foto_yazi_fourth {
        top: 41.2%;
        left: 80%;
    }
    .foto_yazi_five {
        top: 49.9%;
        left: 12%;
    }
    #exchange_photo_mobile .foto_title_text {
        font-size: 15px;
    }

    #exchange_photo_mobile .foto_title_text_right {
        font-size: 15px;
    }
    .foto_yazi_six {
        top: 58%;
        left: 80%;
    }

    .foto_yazi_seven {
        top: 67.5%;
        left: 12%;
    }

    .foto_yazi_eight {
        top: 75.2%;
        left: 79.8%;
    }

    .foto_yazi_nine {
        top: 84.2%;
        left: 12%;
    }
    .foto_yazi_ten {
        top: 92.9%;
        left: 80.1%;
    }

    .foto_info_first {
        top: 17.3%;
        left: 68%;
    }

    .foto_info_second {
        top: 25.4%;
        left: 63%;
    }

    .foto_info_third {
        top: 34%;
        left: 64%;
    }

    .foto_info_fourth {
        top: 42.6%;
        left: 64%;
    }

    .foto_info_five {
        top: 51.2%;
        left: 69.3%;
    }

    .foto_info_six {
        top: 59.8%;
        left: 62.3%;
    }

    .foto_info_seven {
        top: 68.4%;
        left: 69.3%;
    }

    .foto_info_eight {
        top: 76.4%;
        left: 67.3%;
    }

    .foto_info_nine {
        top: 85.4%;
        left: 70.3%;
    }

    .foto_info_ten {
        top: 93.5%;
        left: 63.3%;
    }

    .foto_title_text {
        font-size: 14px;
    }

    .foto_title_text_right {
        font-size: 14px;
    }

    .foto_yazi_title_first {
        top: 17.3%;
        left: 34%;
    }

    .foto_yazi_title_second {
        top: 25.4%;
        left: 21%;
    }

    .foto_yazi_title_third {
        top: 34%;
        left: 33%;
    }

    .foto_yazi_title_fourth {
        top: 42.6%;
        left: 32%;
    }

    .foto_yazi_title_five {
        top: 51.2%;
        left: 33%;
    }

    .foto_yazi_title_six {
        top: 59.8%;
        left: 26%;
    }

    .foto_yazi_title_seven {
        top: 68.4%;
        left: 36%;
    }

    .foto_yazi_title_eight {
        top: 76.4%;
        left: 22%;
    }

    .foto_yazi_title_nine {
        top: 85.4%;
        left: 32%;
    }

    .foto_yazi_title_ten {
        top: 93.5%;
        left: 37%;
    }
}
@media only screen and (max-width: 767px) {
    .crypto_ogaudit_image {
        display: none;
    }
}

.folder_active {
    border: 2px solid rgb(222, 226, 230) !important;
}

.og_evaluate_con {
    width: 49%;
}

@media only screen and (max-width: 900px) {
    .og_evaluate_con {
        width: 100% !important;
    }
}

.fa-2x {
    font-size: 1.7em;
}

#socialLink .modal-body {
    background-color: #0d1421;
    border: 1px solid gray;
    border-bottom: 1px solid gray !important;
}

#explorerLink .modal-body {
    background-color: #0d1421;
    border: 1px solid gray;
    border-bottom: 1px solid gray !important;
}

#webLink .modal-body {
    background-color: #0d1421;
    border: 1px solid gray;
    border-bottom: 1px solid gray !important;
}

.side_bar_category_none {
    position: fixed;
    top: 16%;
    right: -2000%;
    transition: right 0.5s ease-in;
}
.side_bar_category {
    position: fixed;
    top: 16%;
    right: 0%;
    width: 11%;
    border-radius: 8px;
    z-index: 99999;
    transition: right 0.5s ease-in;
}
.og-code {
    border: 1px solid #4f4f4f;
    width: 100%;
    height: 13.6%;
    border-radius: 8px;
}

.top-profil {
    border: 1px solid #4f4f4f;
    border-radius: 8px;
}

.avatar-square {
    width: 100%;
    height: 84.9%;
    border: 1px solid #4f4f4f;
    border-radius: 8px;
}

.profil-color2 {
    background-color: #0d1421;
}

.avatar {
    border-radius: 100px;
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.social-link-profil {
    font-size: 20px;
}

.social-link-profil:hover {
    color: #ffc107 !important;
}

.profil-color {
    background-color: #111;
}

.profil-info-box {
    border: 1px solid #4f4f4f;
    border-radius: 5px;
    background-color: black;
}

.fav-table-profile {
    background-color: black;
}

.fav-table-profile-border {
    background-color: var(---color-bg-2);
    border: 1px solid #0d1421;
    border-radius: 5px;
}

.fav-table {
    background-color: #0d1421;
    flex-direction: row;
}

.profil-text-size {
    font-size: 25px;
}

.profil-text-size2 {
    font-size: 20px;
}

.settings-icon-size {
    font-size: 35px;
}

.profileCard {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
}

@media only screen and (max-width: 900px) {
    .avatar {
        width: 100%;
    }
    .profil-text-size2 {
        font-size: 13px;
    }

    .avatar-square {
        width: 100%;
    }

    .og-code {
        width: 100%;
    }

    .top-profil {
        margin-top: 15px;
        padding: 15px;
    }

    .fav-table {
        flex-direction: column;
    }
}
.og-code-settings {
    border: 1px solid gray;
    width: 100%;
    background-color: #0d1421;
    border-radius: 5px;
}

.top-profil-settings {
    border: 1px solid gray;
    background-color: var(---color-bg-1);
    border-radius: 5px;
    width: 55%;
}

.setting-color {
    background-color: var(---color-bg-2);
}

.avatar-square-settings {
    width: 100%;
    height: auto;
    border: 1px solid gray;
    background-color: #0d1421;
    border-radius: 5px;
}

.avatar-settings {
    border-radius: 100px;
    width: 200px;
    height: 200px;
}

.social-link-profil-settings {
    font-size: 20px;
}

.social-link-profil-settings:hover {
    color: #ffc107 !important;
}

.setting-text-title {
    font-size: 15px;
    font-weight: 500;
}

.profil-info-box-settings {
    border-radius: 5px;
    width: 100%;
}

.hover-overlay-container {
    position: relative;
    width: 300px;
    border-radius: 100px;
}

.hover-overlay-container:hover {
    opacity: 0.6;
    transition: 0.5s all;
}

.hover-overlay-container:hover .overlay-image {
    opacity: 0.3;
}

.hover-overlay-container:hover .overlay-btn-container {
    opacity: 1;
}

.hover-overlay-container .overlay-image {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    transition: 0.5s ease;
    backface-visibility: hidden;
}

.hover-overlay-container .overlay-btn-container {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transition: 0.5s ease;
    text-align: center;
    transform: translate(-50%, -50%);
}

.profile-image-add {
    font-size: 30px;
    cursor: pointer;
    color: #fff;
}

.profil-setting-font-size {
    font-size: 25px;
    word-break: break-all;
}

.settings-icon-size {
    font-size: 35px;
}

.setting-menu {
    border-radius: 15px;
}

.settings-button {
    border-bottom: 1px solid gray;
    padding: 15px;
}

.settings-button .nav-link {
    border-radius: 4px;
    background-color: #b8babc;
}

.settings-button .nav-link:hover {
    background-color: #f1c541;
}

.settings-button .nav-link:focus {
    background-color: #f1c541;
    border: 1px solid #ffc107;
}

.settings-button .nav-item.show .nav-link,
.settings-button .nav-link.active {
    background-color: #f1c541 !important;
    border: 1px solid #ffc107;
}

#setting-form .form-control {
    background-color: transparent;
    color: white;
    display: flex;
    text-align: center;
}

#setting-form .form-control:focus {
    background-color: white;
    color: black;
}

#social .form-control {
    background-color: transparent;
    color: white;
    display: flex;
    text-align: center;
}

#social .form-control:focus {
    background-color: white;
    color: black;
}

.setting-link-active {
    color: #ffc107 !important;
}

.setting-menu-style {
    background-color: #111 !important;
    border-radius: 5px !important;
}

.setting-menu-style-mobile {
    background-color: #0d1421 !important;
    border-radius: 5px !important;
}

.toggle-wrapper {
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative;
    border-radius: 0.5em;
    padding: 0.125em;
}

.toggle-checkbox {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 1;
    border-radius: inherit;
    width: 10%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.toggle-container {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 0.375em;
    width: 3em;
    height: 1.5em;
    background-color: var(--box-background-color);
    box-shadow: inset 0 0 0.0625em 0.125em rgb(255 255 255 / 0.2),
        inset 0 0.0625em 0.125em rgb(0 0 0 / 0.4);
    transition: background-color 0.4s linear;

    .toggle-checkbox:checked + & {
        background-color: var(--brand-color);
    }
}

.toggle-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0.0625em;
    border-radius: 0.3125em;
    width: 1.375em;
    height: 1.375em;
    background-color: #e4ddcf;
    box-shadow: inset 0 -0.0625em 0.0625em 0.125em rgb(0 0 0 / 0.1),
        inset 0 -0.125em 0.0625em rgb(0 0 0 / 0.2),
        inset 0 0.1875em 0.0625em rgb(255 255 255 / 0.3),
        0 0.125em 0.125em rgb(0 0 0 / 0.5);
    transition: left 0.4s /*cubic-bezier(.65, 1.35, .5, 1)*/;

    .toggle-checkbox:checked + .toggle-container > & {
        left: 1.5625em;
    }
}

.toggle-button-circles-container {
    display: grid;
    grid-template-columns: repeat(3, min-content);
    gap: 0.125em;
    position: absolute;
    margin: 0 auto;
}

.toggle-button-circle {
    border-radius: 50%;
    width: 0.125em;
    height: 0.125em;
    background-image: radial-gradient(circle at 50% 0, #f6f0e9, #bebcb0);
}

/* Varsayılan */
.featuredWeb {
    display: none;
}

/* Desktop toggle için */
.featuredWeb.active {
    display: block;
}

/* Mobile toggle için */
@media (max-width: 768px) {
    .featuredWeb {
        display: none !important;
    }

    .featuredWeb.open {
        display: block !important;
    }
}

.qr_settings {
    width: 100px;
    height: 100px;
}

.setting-menu-mobile {
    display: none;
}

.qr_container {
    flex-direction: row;
}

@media only screen and (max-width: 900px) {
    .profil-setting-font-size {
        font-size: 14px;
    }

    .avatar-square-settings {
        width: 100%;
    }

    .og-code-settings {
        width: 100%;
    }

    .top-profil-settings {
        margin-top: 15px;
        padding: 15px;
        width: 100%;
    }

    .setting-menu {
        display: none;
    }

    .setting-menu-mobile {
        display: block;
    }

    .ask-font-size {
        font-size: 10px;
    }

    .ask_category_list {
        border-bottom: 0px;
    }

    .qr_container {
        flex-direction: column;
    }
}
.about-col-table {
    border: 1px solid gray;
    background-color: var(---color-bg-2);
    border-radius: 8px;
}
#carousel1 .owl-dots .owl-dot span {
    width: 50px !important;
    height: 4px;
    margin: 5px 7px;
    background: #d6d6d6 !important;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 0.2s ease;
    border-radius: 0;
    transition: 0.5s all;
}

.owl-dots {
    position: absolute;
    bottom: 0;
}
.owl-dots button {
    background-color: transparent !important;
    border: 0 !important;
}
.owl-dots button:hover {
    background-color: transparent !important;
    border: 0 !important;
}
.owl-theme .owl-dots .owl-dot span {
    background: black !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #fec544 !important;
}

.owl-theme .owl-dots .owl-dot.active span {
    width: 70px !important;
    transition: 0.5s all;
}

#carousel2 .owl-nav button.owl-next,
#carousel2 .owl-nav button.owl-prev,
#carousel2 button.owl-dot {
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
    font-weight: 600;
    font-size: 30px;
    width: 33px;
    border: 0 !important;
}

#carousel2 .owl-nav [class*="owl-"]:hover {
    background: #fec544 !important;
    transition: all 0.3s ease-in;
    color: white !important;
    border: 0 !important;
}

#carousel1 > div {
    border-radius: 15px;
}

.owl-theme .owl-nav {
    position: absolute;
    top: 50%;
    right: 104%;
    margin: 0;
    display: flex;
    width: 98%;
    justify-content: space-between;
}

.ogspace_message_success {
    height: 15px;
}

.og-buttons {
    background-color: #b8babc;
}

.og-buttons:active {
    background-color: #fec544;
}

.og-card-style {
    background-color: #111;
    border-radius: 10px;
    border: 1px solid #4f4f4f;
}

.og_text_data p {
    color: #d6d6d6 !important;
}
.og_text_data img {
    width: 25px !important;
    height: 25px !important;
}
.og_image_data {
    height: 300px;
}

@media only screen and (max-width: 900px) {
    .ogspace-mobil-button {
        margin-top: 15px !important;
    }
}
.detail-og-image {
    width: 100%;
    height: 20em !important;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 25px;
}
.ogSpaceDetailTitle {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 25px;
}

@media only screen and (max-width: 768px) {
    .detail-og-image {
        height: 15em !important;
    }
    .ogSpaceDetailTitle {
        font-size: 2rem;
    }
}

.ogspaceInfoBarContainer {
    width: 100%;
    border-bottom: 1px solid var(--box-border-color);
    border-top: 1px solid var(--box-border-color);
    padding: 15px 0 15px 0;
}
.ogspaceInfoBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ogspaceInfoBarAuthor {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ogspaceInfoAvatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.ogspaceInfoUser {
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.ogspaceInfoBarSocial {
    display: flex;
    align-items: center;
}

.ogspaceInfoBarSocialIcon {
    align-content: center;
    text-align: center;
    width: 40px;
    height: 40px;
    /* background-color: var(--brand-color); */
    border-radius: 5px;
    margin-left: 5px;
}
.ogspaceInfoBarSocialIcon i {
    font-size: 2rem;
    color: var(--white-color);
}

.ogspaceInfoBarSocialIcon i:hover {
    color: var(--brand-color) !important;
    cursor: pointer;
    transition: 0.2s all;
}

.ogspaceInfoBarDate {
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 600;
}
.ogspaceInfoBarHour {
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 600;
}
.ogspaceInfoBarDateAndHour {
    display: flex;
    align-items: center;
    gap: 25px;
}

@media only screen and (max-width: 1200px) {
    .ogspaceInfoBar {
        flex-direction: column;
        align-items: flex-start;
    }
    .ogspaceInfoBarAuthor {
        width: 100%;
        margin-top: 10px;
    }
}
@media only screen and (max-width: 490px) {
    .ogspaceInfoBar {
        flex-direction: column;
        align-items: flex-start;
    }
    .ogspaceInfoBarAuthor {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0;
        margin-bottom: 10px;
    }
}

.ogSpaceContentContainer {
    border-right: 1px solid var(--box-border-color);
    padding-right: 50px;
}
.ogSpaceTableOfContentContainer {
    padding: 20px;
    position: sticky;
    top: 50px; /* Üstten ne kadar mesafe bırakacağını belirle */
}

.ogSpaceTableOfContent {
    margin-top: 10px;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
}

.ogSpaceTableOfContent a {
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 0.875rem;
    color: var(--text-color-solid) !important;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.ogSpaceTableOfContent a {
    color: inherit;
    border-left: none;
    padding-left: 0;
    transition: color 0.3s, border 0.3s, padding 0.3s;
}

.ogSpaceTableOfContent a.active {
    color: white;
    border-left: 4px solid var(--brand-color);
    padding-left: 5px;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: var(--alert-background-color) !important;
    width: 24em !important;
    border-radius: 10px !important;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    color: var(--white-color) !important;
}
div:where(.swal2-icon) {
    display: none !important;
}
.swal2-confirm.swal2-styled {
    border-radius: 5px !important;
    padding: 10px 20px !important;
    background-color: var(--outline-button-color) !important;
    color: var(--brand-color) !important;
    border-radius: 5px !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 0.2px solid var(--brand-color) !important;
    box-shadow: none !important;
}

.swal2-confirm.swal2-styled:hover {
    opacity: 0.8;
}

.detail-background {
    background-color: var(--background-color);
}
@keyframes borderChange {
    0% {
        border-color: gray;
        border-top-color: transparent;
        border-right-color: transparent;
        border-width: 2px;
    }
    25% {
        border-top-color: var(--brand-color);
        border-width: 2px;
    }
    50% {
        border-top-color: transparent;
        border-right-color: var(--brand-color);
        border-width: 2px;
    }
    75% {
        border-right-color: transparent;
        border-bottom-color: var(--brand-color);
        border-width: 2px;
    }

    100% {
        border-bottom-color: transparent;
        border-color: var(--brand-color);
        border-width: 2px;
    }
}

.exchanges-card {
    border: 1px solid var(--box-border-color);
    border-radius: 10px;
    background-color: var(--box-background-color);
    height: 185px;
}

.exchanges-card:hover {
    border: 2px solid var(--brand-color);
    animation: borderChange 1.5s linear forwards;
}
.exchangeCardHeader {
    padding: 15px 15px 0 15px;
}
.exchangeCardContent {
    padding: 15px 15px 15px 15px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.exchanges-list-type {
    list-style: none;
}

.exchanges-card-1 {
    border: 4px solid green;
    border-radius: 10px;
}

.exchanges-card-2 {
    border: 4px solid red;
    border-radius: 10px;
}

.exchanges-flex {
    flex-direction: row;
}

.exchanges-image {
    width: 50px;
    border-radius: 10px;
}

#coinTable_wrapper > div.row {
    margin-bottom: 16px;
}

@media only screen and (max-width: 960px) {
    .exchanges-flex {
        flex-direction: column;
    }

    .card-list-mobil {
        flex-direction: column !important;
    }

    .exchange_banner_reklam {
        display: none;
    }
    .info-menu {
        display: none !important;
    }
    .exchange-mobil-head {
        font-size: 25px;
        margin-left: -50px;
    }
}

.about-opacity {
    opacity: 0.1;
}
.og-ask-div {
    border: 1px solid gray;
    border-radius: 10px;
    background-color: #ffc107;
}

.ask-categories {
    border: 1px solid #4f4f4f;
    border-radius: 15px;
}

.ask-color {
    background-color: var(---color-bg-2);
}

.ask-categories > ul > li {
    list-style: none;
}

.ask-categories-square {
    border: 1px solid gray;
    background-color: #0d1421;
    border-radius: 15px;
}

#kullanici_etiketle > ::placeholder {
    color: #ffff !important;
    opacity: 1;
    /* Firefox */
}

#kullanici_etiketle > ::-ms-input-placeholder {
    /* Edge 12-18 */
    color: #ffff !important;
}

.searchNotFoundImage {
    width: 75%;
}
.searchNotFound {
    justify-content: center;
    display: flex;
    align-items: center;
}

.ask-font-size {
    font-size: 18px;
}

.ask-question-bar {
    font-size: 15px;
    font-weight: 600;
}

.ask_category_list {
    border-bottom: 1px solid gray;
    line-height: 15px;
    padding: 15px;
}

.ask_category_list:hover {
    color: #ffc107 !important;
}

.ask_category_more {
    line-height: 15px;
    padding: 15px;
}

.ask-profil-image {
    width: 33px;
    height: 33px;
}

#ask-head > .form-control:focus {
    background-color: #0d1421 !important;
}

#ask-text > .form-control:focus {
    background-color: #0d1421 !important;
}

.complaint-div-ask {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 10px;
    background-color: black;
    border: 1px solid #4f4f4f;
}

.complaint-div-answer {
    box-shadow: rgba(88, 102, 126, 0.08) 0px 4px 24px,
        rgba(88, 102, 126, 0.12) 0px 1px 2px;
    border-radius: 8px;
    padding: 10px;
    margin: 0px 0px 10px 10px;
    background-color: #0d1421;
    /* border: 1px solid grey; */
    border-top: 10px solid green;
    /* border-left: 5px solid yellow; */
    border-bottom: 1px solid rgb(220, 220, 220);
}

.ask-read-btn {
    color: #f6f6f6 !important;
    border: 0px !important;
}

.ask-read-btn:hover {
    color: #b8babc !important;
}

.ask-answer-passive {
    display: none;
}

.ask-answer-active {
    display: block;
}

.ask-search-detail {
    display: none; /* Başlangıçta görünmez */
    position: absolute;
    width: 100%;
    z-index: 99999;
    background-color: var(--input-background-color) !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    top: 95%; /* Kutuyu inputun altına yerleştir */
    left: 0;
    max-height: 400px; /* Maksimum yükseklik (daha fazla sonuç olursa kaydırılır) */
    overflow-y: auto; /* Fazla içerik için kaydırma ekle */
    transition: max-height 0.3s ease; /* Yumuşak genişleme efekti */
    padding-left: 25px;
}

.no-results {
    color: var(--text-color);
    font-size: 1rem;
    padding: 10px;
}

.ticket-container {
    background-color: var(--background-color);
    height: 700px;
    overflow-y: auto;
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
}
.ticket-text-container {
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    background-color: var(--box-background-color);
    cursor: pointer;
}
.expert_head_text {
    font-size: 11px;
}
.expert_head_time {
    text-align: end;
}
.expert_head_title_text {
    justify-content: center;
    text-align: center;
    align-items: center;
}
.walletText {
    font-size: 13px;
}
.expert-container {
    flex-direction: row;
}
.expert-container-text {
    width: 90%;
}
.expert-container-score {
    width: 10%;
}
@media only screen and (max-width: 1400px) {
    .round-box {
        width: 50px;
        height: 50px;
        font-size: 12px;
    }
}
@media only screen and (max-width: 991px) {
    .expert_head_text {
        font-size: 12px;
    }
    .expert_head_time {
        text-align: center;
    }
    .expert_head_title_text {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }
    .round-box {
        width: 45px;
        height: 45px;
        font-size: 12px;
    }
    .expert-container {
        flex-direction: column;
    }
    .expert-container-text {
        width: 100%;
    }
    .expert-container-score {
        width: 100%;
    }
    .review-text {
        word-break: break-all;
        max-height: none;
        overflow: hidden;
        font-size: 12px;
        height: auto;
    }
    .review-div {
        height: auto;
    }
    .owl-theme .owl-nav {
        top: -50%;
        right: 3%;
    }
    #coinTable_previous ::before {
        display: none !important;
    }

    #coinTable_next ::before {
        display: none !important;
    }
    .page-item:first-child .page-link,
    .page-item:last-child .page-link {
        display: none;
    }
    .page-item:first-child .page-link,
    .page-item:last-child .page-link {
        display: none;
    }
    div.table-responsive > div.dataTables_wrapper > div.row {
        margin: 0 !important;
        margin-top: 20px !important;
        gap: 5px !important;
    }
}
.about-title-new {
    color: #fec544;
    font-size: 50px;
}
.about-custom-text {
    color: white;
    font-size: 30px;
}
.about-first-text {
    font-size: 45px;
    color: white;
}
.about-list-dashed {
    list-style-type: none;
    color: white;
}

.about-list-dashed > li:before {
    content: "-";
    text-indent: -5px;
}
.about-list-title {
    width: auto;
    font-size: 49px;
    color: #fec544;
}
.about-list-border-right {
    border-right: 1px solid gray;
}
.about-list-border-bottom {
    border-bottom: 1px solid gray;
}
.about-list-text {
    color: white;
    font-size: 26px;
}
.about-petek {
    position: relative;
}
.petek-text-first {
    position: absolute;
    font-size: 20px;
    left: 8.8%;
    top: 26%;
}
.petek-text-second {
    position: absolute;
    font-size: 20px;
    left: 33.6%;
    top: 66%;
}
.petek-text-thirth {
    position: absolute;
    font-size: 20px;
    left: 56.6%;
    top: 26%;
}
.petek-text-fourth {
    position: absolute;
    font-size: 20px;
    left: 78.6%;
    top: 66%;
}
.about-petek-normal {
    display: block;
}
.about-list-text-second {
    color: white;
}

.about-list-second {
    color: white;
    line-height: 250%;
}
.about-list-second-title {
    border-right: 1px solid gray;
}
.about-br {
    height: 150px;
}
.about-petek-mobil {
    display: none;
}
@media only screen and (max-width: 1372px) {
    .petek-text-first {
        font-size: 21px;
    }
    .petek-text-second {
        font-size: 21px;
    }
    .petek-text-thirth {
        font-size: 21px;
    }
    .petek-text-fourth {
        font-size: 21px;
    }
}
@media only screen and (max-width: 1190px) {
    .petek-text-first {
        font-size: 19px;
    }
    .petek-text-second {
        font-size: 19px;
    }
    .petek-text-thirth {
        font-size: 19px;
    }
    .petek-text-fourth {
        font-size: 19px;
    }
}
@media only screen and (max-width: 991px) {
    .about-list-border-right {
        border-left: 1px solid gray;
    }
    .about-list-border-bottom {
        border-top: 1px solid gray;
    }
    .about-first-text {
        font-size: 20px;
    }
    .petek-text-first {
        font-size: 20px;
        top: 13%;
        left: 48.7%;
    }
    .petek-text-second {
        font-size: 20px;
        top: 37.8%;
        left: 32.4%;
    }
    .petek-text-thirth {
        font-size: 20px;
        top: 61%;
        left: 51.6%;
    }
    .petek-text-fourth {
        font-size: 20px;
        top: 86%;
        left: 32.5%;
    }
    .about-petek-normal {
        display: none;
    }
    .about-list-second-title {
        border-right: 0px;
        border-bottom: 1px solid gray;
        padding: 15px;
    }
    .about-br {
        height: 50px;
    }
    .about-petek-mobil {
        display: block;
    }
}
@media only screen and (max-width: 700px) {
    .about-list-border-right {
        border-left: 1px solid gray;
    }
    .about-list-border-bottom {
        border-top: 1px solid gray;
    }
    .about-first-text {
        font-size: 20px;
    }
    .petek-text-first {
        font-size: 14px;
        top: 13%;
        left: 48.7%;
    }
    .petek-text-second {
        font-size: 14px;
        top: 37.8%;
        left: 32.4%;
    }
    .petek-text-thirth {
        font-size: 14px;
        top: 61%;
        left: 51.6%;
    }
    .petek-text-fourth {
        font-size: 14px;
        top: 86%;
        left: 32.5%;
    }
    .about-petek-normal {
        display: none;
    }
    .about-list-second-title {
        border-right: 0px;
        border-bottom: 1px solid gray;
        padding: 15px;
    }
    .about-br {
        height: 50px;
    }
    .about-petek-mobil {
        display: block;
    }
}
@media only screen and (max-width: 550px) {
    .about-list-border-right {
        border-left: 1px solid gray;
    }
    .about-list-border-bottom {
        border-top: 1px solid gray;
    }
    .about-first-text {
        font-size: 20px;
    }
    .petek-text-first {
        font-size: 11px;
        top: 13%;
        left: 48.7%;
    }
    .petek-text-second {
        font-size: 11px;
        top: 37.8%;
        left: 32.4%;
    }
    .petek-text-thirth {
        font-size: 11px;
        top: 61%;
        left: 51.6%;
    }
    .petek-text-fourth {
        font-size: 11px;
        top: 86%;
        left: 32.5%;
    }
    .about-list-second-title {
        border-right: 0px;
        border-bottom: 1px solid gray;
        padding: 15px;
    }
    .about-br {
        height: 50px;
    }
}
@media only screen and (min-width: 1024px) {
    #coinTable_paginate {
        position: absolute !important;
        left: 38% !important;
        margin-top: 18px !important;
    }
    #coinTable_length {
        position: absolute;
        right: 0%;
        margin-top: 3% !important;
    }
}

@media only screen and (max-width: 991px) {
    .table_info {
        text-align: center;
        align-items: center;
        justify-content: center;
    }
}
.select2-container {
    width: 100% !important;
}

#coinTable_info {
    color: var(--text-color-solid);
    font-size: 0.875rem;
}
.input-group
    > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
        .valid-feedback
    ):not(.invalid-tooltip):not(.invalid-feedback) {
    background-color: #e7e7e7 !important;
}
#case_min,
#case_max,
.select2-container--default .select2-selection--multiple,
#og_min,
#og_max,
#market_cap_min,
#market_cap_max {
    background-color: var(--input-background-color) !important;
}
/* .select2-container--default .select2-results > .select2-results__options {
    background-color: var(--box-background-color);
} */

.select2-container--default .select2-results__option--selected {
    background-color: var(--box-background-color) !important;
}
.sticky-header-none {
    position: relative;
    transition: 0.2s ease-in;
}
.sticky-header {
    position: sticky;
    top: 5%;
    height: 50px;
    z-index: 1;
    transition: 0.2s ease-in;
}

.og_reviews_web {
    display: block;
}
.links_responsive {
    flex-direction: row;
}
.grafik-div {
    margin-top: 0;
}
.og_reviews_mobile {
    display: none;
}
.home_table_height {
    align-items: center !important;
}
.exchange_grafik_con {
    background-color: #111;
    border: 1px solid #4f4f4f;
    border-radius: 8px;
    height: 410px;
    max-height: 410px;
}
@media only screen and (max-width: 1400px) {
    .text-size-18 {
        font-size: 14px;
    }
}
@media only screen and (max-width: 991px) {
    .logo img,
    .logo-footer img {
        width: 25%;
    }
    .exchange_grafik_con {
        margin-top: 3rem;
        height: auto;
        max-height: none;
    }
    .exchange_grafik_con .row {
        gap: 15px;
    }
    .home_table_height {
        height: auto;
        width: max-content;
    }
    .og_reviews_web {
        display: none !important;
    }
    .og_reviews_mobile {
        display: block;
    }
    .crypto-div {
        height: auto !important;
        padding-top: 20px;
    }
    .links_responsive {
        flex-direction: column;
    }
    .side_bar_category {
        width: 40%;
    }
    .grafik-div {
        margin-top: 3rem;
    }
    #about_project_con {
        font-size: 10px !important;
    }
    #reviews_con {
        font-size: 10px !important;
    }
    #market_data_con {
        font-size: 10px !important;
    }
    #update_con {
        font-size: 10px !important;
    }
    #side_bar_category .btn-day {
        background-color: rgba(0, 128, 0, 0.538);
    }
    #side_bar_category .btn-day .active {
        background-color: #ffa500 !important;
        border-color: #ffa500 !important;
        color: white;
    }
    .side_bar_category {
        top: 30%;
    }
    .fade:not(.show) {
        opacity: 0;
        display: none;
    }
    .feature-div {
        height: auto;
        max-height: none;
    }
    .text-size-18 {
        font-size: 11px;
    }
    #exchangeMarket_wrapper .table-responsive {
        overflow: hidden !important;
    }
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        padding: 15px;
    }
}

.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
.input-group:not(.has-validation)
    > .form-floating:not(:last-child)
    > .form-control,
.input-group:not(.has-validation)
    > .form-floating:not(:last-child)
    > .form-select,
.input-group:not(.has-validation)
    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
        .form-floating
    ) {
    background-color: #e7e7e7 !important;
}

.dropdown-toggle::after {
    display: none;
}

.form-select {
    background-color: var(--border-color) !important;
    color: var(--text-color) !important;
    border: none !important;
}
.ogButton {
    display: inline-flex;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--brand-color);
    color: var(--button-text-color);
    border: 1px solid var(--brand-color);
    border-radius: 5px;
    padding: 0.5rem 1rem; /* Dinamik padding, 1em = root font size */
    font-size: 0.875rem; /* rem birimi ile font boyutu */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease; /* Hover veya focus anında yumuşak geçişler için */
}

.ogButton:hover {
    opacity: 0.8;
}
.ogButtonSolid {
    display: inline-flex;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--box-background-color);
    color: var(--text-color-solid);
    border: 1px solid var(--box-border-color);
    border-radius: 5px;
    padding: 0.5rem 1rem; /* Dinamik padding, 1em = root font size */
    font-size: 0.875rem; /* rem birimi ile font boyutu */
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease; /* Hover veya focus anında yumuşak geçişler için */
}

.ogButtonSolid:hover {
    opacity: 0.8;
}
.ogButtonMd {
    background-color: var(--brand-color);
    color: var(--button-text-color);
    border: 1px solid var(--brand-color);
    border-radius: 5px;
    padding: 0.7em 0.7em; /* Dinamik padding, 1em = root font size */
    font-size: 1rem; /* rem birimi ile font boyutu */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease; /* Hover veya focus anında yumuşak geçişler için */
}

.ogButtonMd:hover {
    opacity: 0.8;
}

.ogButtonAuth {
    background-color: var(--button-solid-color);
    color: var(--text-color);
    border: 2px solid var(--button-solid-color);
    border-radius: 5px;
    padding: 0.7em 0.7em; /* Dinamik padding, 1em = root font size */
    font-size: 1rem; /* rem birimi ile font boyutu */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease; /* Hover veya focus anında yumuşak geçişler için */
}

.ogButtonAuth:hover {
    opacity: 0.8;
}

.ogButton-outline {
    color: var(--text-color-solid);
    border-radius: 5px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 0.5px solid var(--box-border-color);
}
.ogButton-outline:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    font-size: 0.875rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
}
.ogButton-outline.active {
    background-color: var(--outline-button-color);
    color: var(--brand-color);
    border-radius: 5px;
    font-size: 0.875rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0.2px solid var(--brand-color);
}
.ogButton-outline.deactive {
    background-color: var(--button-solid-color);
    color: var(--text-color-solid);
    border-radius: 5px;
    font-size: 0.875rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
}

.ogButton-outline.active:hover {
    opacity: 0.8;
}


.ogGlossaryBtn {
    color: var(--text-color-solid);
    border-radius: 5px;
    padding: .875rem .875rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 0.5px solid var(--box-border-color);
}
.ogGlossaryBtn:hover {
    background-color: var(--box-border-color);
    color: var(--text-color-solid);
    border: 0.5px solid var(--brand-color);
    border-radius: 5px;
    font-size: 1rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-container {
    overflow-x: auto; /* Yatay kaydırmayı aktif hale getirir */
    white-space: nowrap;
    position: relative !important;
}

/* Kaydırılabilir Nav */
.scrollable-nav {
    display: flex;
    gap: 1rem;
    white-space: nowrap;
    overflow-x: auto; /* Yatay kaydırma */
    flex-wrap: nowrap; /* Alt satıra düşmeyi engeller */
    padding-bottom: 10px;
}

.scrollable-nav::-webkit-scrollbar {
    height: 5px; /* Yatay kaydırma çubuğu yüksekliği */
}

.scrollable-nav::-webkit-scrollbar-thumb {
    background-color: var(--text-color-solid); /* Kaydırma çubuğu rengi */
    border-radius: 10px;
}
.scrollable-nav::-webkit-scrollbar-track {
    background-color: var(--border-color); /* Kaydırma çubuğu rengi */
    border-radius: 10px;
}

/* Küçük Ekranlar İçin */
@media (max-width: 768px) {
    .scrollable-nav {
        gap: 0.5rem;
    }

    .ogButton-outline {
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        gap: 0.5rem;
    }
}

.graphic_con {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    height: 400px;
    overflow-y: auto;
}
@media only screen and (max-width: 991px) {
    .nav-link {
        font-size: 12px;
    }
    .graphic_con {
        height: auto;
        overflow-y: hidden;
        gap: 15px;
    }
    .round-box-link {
        border: 0 !important;
    }
    .mobil_icons {
        border: 0 !important;
    }
}

/* span, p, a, b, button, h1, h2, h3, h4, h5, h6, div, section, g, text{
                font-family: "Viga", sans-serif !important;
                font-weight: 400 !important;
                font-style: normal !important;
                letter-spacing: 1px !important;
        } */
.og-eva-row {
    background-color: #111 !important;
    border: 1px solid #4f4f4f;
    border-radius: 8px;
}
.og-eva-text {
    color: rgba(255, 255, 255, 0.8) !important;
}
.og-rew-text-content {
    height: auto;
    max-height: 150px;
    overflow-y: auto;
}
.og-rew-dark-green {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
    border: 1px dashed #00b200;
    color: #00b200;
}
.og-rew-green {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
    border: 1px dashed #66cd66;
    color: #66cd66;
}
.og-rew-yellow {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
    border: 1px dashed #ffc107;
    color: #ffc107;
}
.og-rew-red {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
    border: 1px dashed red;
    color: red;
}
.color-text-blue {
    color: orange;
}
.ask-eva-row {
    background-color: var(--box-background-color);
    border: 1.5px solid var(--box-border-color);
    border-radius: 5px;
}
table.dataTable > thead .sorting::before {
    right: auto !important;
    left: -15px !important;
}
table.dataTable > thead .sorting::after {
    right: auto !important;
    left: -10px !important;
}
table.dataTable > thead > tr > th {
    border-bottom: 1px solid var(--border-color);
}
.iconConBorder {
    border-right: 1px solid gray;
    padding: 15px;
}
.iconConBorderLast {
    padding: 15px;
}
.refCodeDiv {
    flex-direction: row;
}
.verifiedOgCheckIcon {
    font-size: 20px;
}
@media only screen and (max-width: 991px) {
    .refCodeDiv {
        flex-direction: column;
    }
    .iconConBorder {
        border-right: 0;
        padding: 15px;
    }
    .iconConBorderLast {
        padding: 15px;
    }
    .og-rew-text-content {
        height: auto;
        max-height: none;
        overflow-y: hidden;
    }
    .og-rew-dark-green {
        width: 50px;
        height: 50px;
    }
    .og-rew-green {
        width: 50px;
        height: 50px;
    }
    .og-rew-yellow {
        width: 50px;
        height: 50px;
    }
    .og-rew-red {
        width: 50px;
        height: 50px;
    }
}

.priceLong {
    display: none;
    position: absolute;
    right: -135px;
    top: -25px;
}

.price_parse:hover + .priceLong {
    background-color: black;
    display: block;
    border: 1px solid #4f4f4f;
    padding: 5px 10px;
    z-index: 999;
}
.sorting_disabled {
    cursor: auto !important;
}
.sorting_disabled::after {
    display: none !important;
}
.sorting_disabled::before {
    display: none !important;
}
.tbl_price {
    width: 100px;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
}

.tbl_price i {
    font-size: 0.875rem;
}

@media only screen and (max-width: 1400px) {
    .ask-font-size {
        font-size: 11px !important;
    }
    .profil-setting-font-size {
        font-size: 19px !important;
    }
}
.topics-header-div {
    height: 45px !important;
    color: var(--text-color-solid);
    font-size: 0.875rem;
    font-weight: 300;
    cursor: pointer;
}

.topics-header-div:hover {
    color: var(--brand-color);
}

.topics-header-div.active {
    background-color: var(--brand-color);
    color: var(--button-text-color);
    border-radius: 5px;
}

.crypto_topcs_menu {
    height: auto;
    max-height: 100%;
    overflow-y: auto;
    border-right: 0.5px solid var(--box-border-color);
}
@media only screen and (max-width: 991px) {
    .crypto_topcs_menu {
        height: auto;
        max-height: 250px;
        overflow-y: auto;
        margin-bottom: 2rem;
        border-bottom: 1px solid #4f4f4f;
    }
}

.border-bottom {
    border-bottom: 1px solid var(--border-color) !important;
}

/* Placeholder için stiller */
.FormInput option {
    color: var(--text-color);
    font-size: 1rem; /* Seçenek metin boyutu */
}

.select2-container .select2-selection--single {
    height: 40px !important; /* Yükseklik ayarı */
    border: 2px solid var(--box-border-color) !important;
    border-radius: 5px !important;
    background-color: var(--input-background-color) !important;
    padding: 5px;
    display: flex;
    align-items: center;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--text-color-solid) !important;
    line-height: 28px !important; /* Dikey ortalama için */
    font-size: 1rem !important; /* Yazı boyutu */
    padding-left: 15px !important; /* Sol boşluk */
}

/* Placeholder için */
.select2-container--default
    .select2-selection--single
    .select2-selection__placeholder {
    color: var(--text-color-solid) !important;
    font-size: 0.875rem; /* Placeholder boyutu */
    font-weight: 500; /* Placeholder kalınlığı */
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 26px !important;
    position: absolute;
    top: 7px !important;
    right: 7px !important;
    width: 23px;
}

.select2-search--dropdown {
    background-color: var(--input-background-color) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

.select2-container--default .select2-results > .select2-results__options {
    background-color: var(--input-background-color) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
}

.select2-container--default
    .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--outline-button-color) !important;
    color: var(--text-color) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: none !important;
    background-color: var(--input-background-color) !important;
    color: var(--text-color) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

.select2-dropdown {
    border: 1px solid var(--box-border-color) !important;
    border-radius: 5px !important;
}

.form-check-input:checked {
    background-color: var(--brand-color) !important;
    border: 1px solid var(--brand-color) !important;
}

.modalFormCheckInput {
    width: 0.8rem !important;
    height: 0.8rem !important;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #f7941a23;
}

/* For Firefox */
input[type="range"]::-moz-range-track {
    background: #f7941a23;
}
input[type="range"]::-webkit-slider-thumb {
    background: var(--brand-color);
    cursor: pointer;
}

.radarChartContainer {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    justify-content: center;
    align-items: center;
}

.radarBox {
    position: absolute;
    width: 120px;
    height: auto;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

/* Masaüstü ekranlar için pozisyonlar */
@media (min-width: 1200px) {
    .radarBox[data-position="innovation"] {
        top: 15%;
        left: 50%;
        z-index: 1;
    }
    .radarBox[data-position="security"] {
        top: 35%;
        left: 75%;
        z-index: 1;
    }
    .radarBox[data-position="community"] {
        top: 70%;
        left: 75%;
        z-index: 1;
    }
    .radarBox[data-position="tokenomics"] {
        top: 87%;
        left: 50%;
        z-index: 1;
    }
    .radarBox[data-position="team"] {
        top: 70%;
        left: 25%;
        z-index: 1;
    }
    .radarBox[data-position="roadmap"] {
        top: 35%;
        left: 25%;
        z-index: 1;
    }
}

/* Tablet ekranlar için pozisyonlar */
@media (max-width: 1199px) {
    .radarBox[data-position="innovation"] {
        top: 15%;
        left: 50%;
    }
    .radarBox[data-position="security"] {
        top: 35%;
        left: 85%;
    }
    .radarBox[data-position="community"] {
        top: 70%;
        left: 85%;
    }
    .radarBox[data-position="tokenomics"] {
        top: 87%;
        left: 50%;
    }
    .radarBox[data-position="team"] {
        top: 70%;
        left: 15%;
    }
    .radarBox[data-position="roadmap"] {
        top: 35%;
        left: 15%;
    }
}

/* Mobil ekranlar için pozisyonlar */
@media (max-width: 991px) {
    .radarBox[data-position="innovation"] {
        top: 25%;
        left: 50%;
    }
    .radarBox[data-position="security"] {
        top: 40%;
        left: 72%;
    }
    .radarBox[data-position="community"] {
        top: 65%;
        left: 72%;
    }
    .radarBox[data-position="tokenomics"] {
        top: 77%;
        left: 50%;
    }
    .radarBox[data-position="team"] {
        top: 65%;
        left: 27%;
    }
    .radarBox[data-position="roadmap"] {
        top: 40%;
        left: 27%;
    }

    .radarBox {
        width: 80px;
        padding: 4px;
    }

    .boxTitle {
        font-size: 0.7rem;
    }

    .boxPoints {
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .radarBox[data-position="innovation"] {
        top: 25%;
        left: 50%;
    }
    .radarBox[data-position="security"] {
        top: 40%;
        left: 75%;
    }
    .radarBox[data-position="community"] {
        top: 65%;
        left: 75%;
    }
    .radarBox[data-position="tokenomics"] {
        top: 77%;
        left: 50%;
    }
    .radarBox[data-position="team"] {
        top: 65%;
        left: 25%;
    }
    .radarBox[data-position="roadmap"] {
        top: 40%;
        left: 25%;
    }

    .radarBox {
        width: 80px;
        padding: 4px;
    }

    .boxTitle {
        font-size: 0.7rem;
    }

    .boxPoints {
        font-size: 0.875rem;
    }
}

.boxTitle {
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.875rem;
}

.boxPoints {
    font-size: 1rem;
    font-weight: bold;
    color: var(--brand-color);
}

.radarBox:hover {
    background-color: var(--box-border-color);
    /*border: 1px solid var(--box-border-color); */
    cursor: pointer;
    z-index: 100000 !important;
}

.apexcharts-marker.hovered {
    width: 8px;
    height: 8px;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}

#radarChart {
    min-width: 250px; /* Azaltıldı */
    min-height: 250px; /* Azaltıldı */
    margin: auto;
}

/* Büyük ekranlar için */
@media (min-width: 1400px) {
    #radarChart {
        min-width: 300px;
        min-height: 300px;
    }
}

/* Orta boy ekranlar için */
@media (max-width: 1399px) and (min-width: 992px) {
    #radarChart {
        min-width: 250px;
        min-height: 250px;
    }
}

/* Tablet ekranlar için */
@media (max-width: 991px) and (min-width: 768px) {
    #radarChart {
        min-width: 220px;
        min-height: 220px;
    }
}

/* Mobil ekranlar için */
@media (max-width: 767px) {
    .radarChartContainer {
        min-height: 300px;
    }

    #radarChart {
        min-width: 200px;
        min-height: 200px;
    }

    .radarBox {
        width: 70px; /* Kutuları da küçülttük */
        height: 45px;
    }
}

/* Responsive tasarım */
@media (max-width: 1200px) {
    .radarBox {
        width: 100px;
        padding: 6px;
    }

    .boxTitle {
        font-size: 0.75rem;
    }

    .boxPoints {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .radarChartContainer {
        min-height: 350px;
    }

    .radarBox {
        width: 80px;
        padding: 4px;
    }

    .boxTitle {
        font-size: 0.7rem;
    }

    .boxPoints {
        font-size: 0.875rem;
    }
}

.score-integer {
    font-size: 20px;
    font-weight: 700;
}

.score-decimal {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 400;
}

/* Mevcut .boxPoints stiline eklemeler */
.boxPoints {
    display: flex;
    align-items: baseline; /* Sayıları alt çizgiye hizalar */
    justify-content: center;
}

/* Mevcut radarBox stillerinin altına ekleyin */

.radarBox-tooltip {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: 250px;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.875rem;
    color: var(--text-color);
    z-index: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* CSS for the active state of the tooltip when clicked */
.radarBox-tooltip.active {
    visibility: visible;
    opacity: 1;
    z-index: 1000;
}

.radarBox:hover .radarBox-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Ok işareti için */
.radarBox-tooltip::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background-color: var(--box-background-color);
    border-right: 1px solid var(--box-border-color);
    border-bottom: 1px solid var(--box-border-color);
}

.radarBox-tooltip-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-color);
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 5px;
}




.customBox-tooltip {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.875rem;
    color: var(--text-color);
    z-index: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%);
    margin-bottom: 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    top: 22px;
}

/* CSS for the active state of the tooltip when clicked */
.customBox-tooltip.active {
    visibility: visible;
    opacity: 1;
    z-index: 1000;
    top: 150%;
    width: max-content;
}

.customBox:hover .customBox-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Mobile styles for the tooltip */
@media (max-width: 1200px) {
    .customBox-tooltip.active {
        visibility: visible;
        opacity: 1;
        z-index: 1000;
        position: absolute;
        /* top: auto; */
        bottom: 84%;
        left: 20%;
        transform: translateX(-50%);
        width: auto;
        max-height: max-content;
        max-width: 161px;
    }

    /* Portfolio button specific tooltip positioning */
    .portfolio-btn .customBox-tooltip.active {
        top: auto;
        bottom: 30%;
    }
}

/* Ok işareti için */
.customBox-tooltip::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(228deg);
    width: 12px;
    height: 12px;
    background-color: var(--box-background-color);
    border-right: 1px solid var(--box-border-color);
    border-bottom: 1px solid var(--box-border-color);
}

.customBox-tooltip-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-color);
    border-bottom: 1px solid var(--box-border-color);
    padding-bottom: 5px;
}

.kt-tooltip-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
    padding-bottom: 5px;
}

/* Sticky menü için stil */
.sticky-menu {
    position: sticky;
    top: 0;
    background-color: var(--background-color);
    z-index: 100;
    padding: 10px 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-color);
}

/* Scroll durumunda menünün görünümü */
.sticky-menu.scrolled {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Aktif menü item'ı için stil */
.CoinDetailmenuItem.active {
    color: var(--text-color) !important;
    position: relative;
}

.CoinDetailmenuItem.active::after {
    content: "";
    position: absolute;
    bottom: -11px; /* Border ile hizalamak için */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--brand-color);
}

.content-popover-card {
    max-width: 400px !important;
    background-color: var(--box-background-color) !important;
    border: 1px solid var(--box-border-color) !important;
    padding: 15px !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.content-popover-card .popover-body {
    color: var(--text-color) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 0 !important;
}

.content-popover-card .popover-arrow::before {
    border-right-color: var(--box-border-color) !important;
}

.content-popover-card .popover-arrow::after {
    border-right-color: var(--box-background-color) !important;
}

.content-hover {
    position: relative;
}

.content-hover .radarBox-tooltip {
    width: 350px;
    left: -175px; /* Tooltip'i ortala */
    bottom: 30px; /* Read More'un üstünde göster */
}

/* Mobil için tooltip genişliğini ayarla */
@media (max-width: 768px) {
    .content-hover .radarBox-tooltip {
        width: 280px;
        left: -140px;
    }
}
.tooltip-inner {
    max-width: 400px !important;
}
/* Ticket System Styles */
.ticket-item {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ticket-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ticket-number {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-right: 2rem;
    min-width: 80px;
}

.ticket-main-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 1.5rem;
}

.ticket-title-section {
    flex: 1;
    color: var(--text-color);
    font-size: 1rem;
}

.ticket-date {
    color: var(--text-color-solid);
    font-size: 0.9rem;
    min-width: 150px;
    text-align: center;
}

.ticket-status {
    min-width: 100px;
    padding: 0.4rem 1rem;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

.ticket-status.open {
    background-color: var(--point-color-5);
    color: var(--text-color);
    border: 1px solid var(--point-border-color-5);
}

.ticket-status.closed {
    background-color: var(--point-color-3);
    color: gray;
    border: 1px dashed gray;
}

.ticket-status.waiting {
    background-color: var(--point-color-3);
    color: #bdb322;
    border: 1px dashed #bdb322;
}

.ticket-view-btn {
    min-width: 80px;
    padding: 0.4rem 1rem;
    background-color: var(--point-color-5);
    color: var(--text-color);
    border: none;
    border-radius: 5px;
    font-size: 0.85rem;
    text-align: center;
    transition: all 0.3s ease;
}

.ticket-view-btn:hover {
    background-color: var(--point-color-4);
    color: var(--text-color);
}

/* Ticket Detail Page Styles */
.ticket-detail-container {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.ticket-message {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--box-background-color);
    border-radius: 8px;
    border: 1px solid var(--box-border-color);
}

.ticket-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ticket-message-content {
    color: var(--text-color);
    line-height: 1.6;
}

.ticket-reply-form {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 8px;
}
.ticket-item {
    background-color: var(--background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}
span.infoBox {
    white-space: nowrap;
}

.evaluateCardContainer {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
}
.evaluateScoreCard {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 15px;
    border-radius: 8px;
    min-height: 118px;
}
.evaluateScoreCardTitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.evaluateScoreCardScore {
    font-size: 2rem;
    font-weight: 600;
}

.coinevaluateCardContainer {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
}
.coinevaluateScoreCard {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    padding: 15px;
    border-radius: 8px;
    min-height: 118px;
}
.coinevaluateScoreCardTitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.coinevaluateScoreCardScore {
    font-size: 2rem;
    font-weight: 600;
}

.bg-brandColor {
    background-color: var(--brand-color);
}

.secondaryColor {
    color: var(--secondary-color);
}

.topics-container {
    display: flex;
    width: 100%;
}

.topics-sidebar {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 1rem;
    position: sticky;
    top: 4rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.topics-main {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.topic-header {
    border-bottom: 1px solid var(--box-border-color);
    padding: 0rem 1rem;
    margin-bottom: 1.5rem;
}

.topic-header-link:hover {
    text-decoration: underline;
}


.topics-header-div {
    padding: 1.7rem 0;
    border-radius: 4px;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.topics-header-div:hover {
    background-color: var(--hover-color-text);
}

.topics-header-div.active {
    background-color: var(--hover-color-text);
    border-left: 3px solid var(--brand-color);
}

.topic-entry {
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--box-border-color);
    position: relative;
    clear: both;
    margin-bottom: 1.5rem;
}

.topic-entry::after {
    content: "";
    display: table;
    clear: both;
}

.topic-entry-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dotted var(--box-border-color);
}

.topic-entry-content {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 3.5rem;
    overflow-wrap: break-word;
    padding-right: 0;
}

.topic-author {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.topic-author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.75rem;
}

.topic-author-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.topic-author-name {
    font-weight: 500;
    color: var(--brand-color);
    /* font-size: 0.750rem; */
    text-decoration: none;
}

.topic-wallet {
    font-size: 0.75rem;
    color: var(--text-color-solid);
    margin-bottom: 0.25rem;
}

.topic-timestamp {
    font-size: 0.75rem;
    color: var(--text-color-solid);
    font-weight: 300;
    margin-top: 0.125rem;
}

.topic-entry-content {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    overflow-wrap: break-word;
    padding-right: 0;
}

.topic-reactions {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-start;
    padding: 0.5rem 0;
    /* border-top: 1px dotted var(--box-border-color); */
}

.reply-container-fixed {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background-color: var(--box-background-color);
    /* border-top: 1px solid var(--box-border-color); */
    /* padding: 1rem;
    margin-top: 1rem; */
    /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); */
}

/* Sidebar scrollbar styling */
.topics-sidebar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: block;
}

.topics-sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.topics-sidebar::-webkit-scrollbar-thumb {
    background: var(--brand-color);
    border-radius: 3px;
}

.topics-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 140, 0, 0.8);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .topic-entry-content {
        padding-right: 0;
        margin-bottom: 3rem; /* Space for author info */
    }

    .topic-author {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 0.5rem;
        padding-left: 0;
    }

    .topic-author-info {
        display: flex;
        flex-direction: column;
        align-items: end;
        font-size: 0.75rem;
    }

    .topic-wallet {
        margin-bottom: 0;
    }
}

.reply-box {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.reply-input {
    width: 100%;
    background-color: var(--input-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 4px;
    padding: 0.75rem;
    resize: vertical;
    min-height: 100px;
    color: var(--text-color);
}

.reply-input:focus {
    outline: none;
    border-color: var(--brand-color);
}

.reply-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}

.reply-button {
    background-color: var(--outline-button-color);
    color: var(--brand-color);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0.2px solid var(--brand-color);
}

.reply-button:hover {
    background-color: var(--brand-color);
    color: var(--button-text-color);
    opacity: 0.8;
}

.reply-container {
    background: transparent;
    padding: 0;
}

.emoji-btn {
    background: transparent;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
}

.emoji-panel {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
}

.emoji,
.emoji-reply {
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji:hover,
.emoji-reply:hover {
    transform: scale(1.2);
    background-color: var(--hover-color-text);
    border-radius: 4px;
}

.topic-search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border-radius: 4px;
    border: 1px solid var(--box-border-color);
    background-color: var(--input-background-color);
    color: var(--text-color);
    font-size: 0.95rem;
}

.topic-search-input:focus {
    outline: none;
    border-color: var(--brand-color);
}

.search-icon-container {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.search-container {
    position: relative;
    margin-bottom: 0.875rem;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-result-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--box-border-color);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: var(--hover-color-text);
}

.no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-color-solid);
}

.reaction-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    /* border: 1px solid var(--box-border-color);
    border-radius: 50px; */
    cursor: pointer;
    color: var(--text-color-solid);
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.reaction-btn:hover {
    background-color: var(--hover-color-text);
}

.reaction-btn.active {
    color: var(--brand-color);
    background-color: rgba(255, 140, 0, 0.1);
    border-color: var(--brand-color);
    border: 1px solid var(--box-border-color);
    border-radius: 50px;
}

/* Make sure the SP class interaction works */
.reaction-btn.sp {
    cursor: pointer;
    position: relative;
    z-index: 10;
    user-select: none;
}

/* Fix for diamond icons and counts */
.bi-gem,
.diamond-count,
.reply-diamond-count {
    transition: color 0.2s ease;
}

.color-text-blue,
.diamond-btn.color-text-blue,
.diamond-count.color-text-blue,
.reply-diamond-btn.color-text-blue,
.reply-diamond-count.color-text-blue {
    color: var(--brand-color) !important;
}

.reaction-btn.active .bi-gem,
.reaction-btn.active .diamond-count,
.reaction-btn.active .reply-diamond-count {
    color: var(--brand-color);
}

.new-topic-btn {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--outline-button-color);
    color: var(--brand-color);
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    border: 0.2px solid var(--brand-color);
}

.new-topic-btn:hover {
    opacity: 0.9;
}

/* Additional mobile responsiveness */
@media (max-width: 991px) {
    .topics-container {
        flex-direction: column;
    }

    .topics-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 1rem;
        max-height: none;
    }

    .emoji-panel {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .topic-author {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .topic-author-image {
        width: 28px;
        height: 28px;
    }

    .topic-author-info {
        font-size: 0.7rem;
    }

    .topic-entry-content {
        margin-bottom: 4.5rem;
    }

    .topics-container {
        flex-direction: column;
    }

    .emoji-panel {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Topics sidebar collapse styles for mobile and tablet */
@media (max-width: 991px) {
    .topics-sidebar {
        max-height: 60px;
        overflow: hidden;
        transition: max-height 0.3s ease, top 0.3s ease;
        position: relative;
        margin-bottom: 1rem;
        border-radius: 8px;
        padding: 15px;
    }

    .topics-sidebar.expanded {
        max-height: 100vh;
        overflow-y: auto;
    }

    /* Sidebar scrollbar styling */
    .topics-sidebar.expanded::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        display: block;
    }

    .topics-sidebar.expanded::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }

    .topics-sidebar.expanded::-webkit-scrollbar-thumb {
        background: var(--brand-color);
        border-radius: 3px;
    }

    .topics-sidebar.expanded::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 140, 0, 0.8);
    }

    .topics-sidebar.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        border-radius: 0;
        margin: 0;
        padding: 15px 40px;
        width: 100% !important;
        background-color: var(--box-background-color);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .topics-list {
        margin-top: 15px;
    }

    /* Custom Topics Dropdown Icon */
    .topics-toggle-icon {
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .custom-dropdown-icon {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--brand-color);
        transition: transform 0.3s ease;
    }

    .topics-sidebar.expanded .custom-dropdown-icon {
        transform: rotate(180deg);
    }

    .search-container {
        margin-bottom: 0rem !important;
    }
}

/* Masaüstünde sticky özelliği kaldırıldı */
@media (min-width: 992px) {
    .topics-sidebar .mb-3 {
        display: flex;
        align-items: center;
    }

    .topics-sidebar .mb-3:after {
        display: none;
    }
}

/* Adjust fixed reply container for better mobile experience */
@media (max-width: 991px) {
    .reply-container-fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
        background-color: var(--box-background-color);
        border-top: 1px solid var(--box-border-color);
        box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: transform 0.3s ease;
    }

    .reply-container-fixed .reply-box {
        margin: 0;
        border-radius: 8px;
    }
}

/* Desktop sticky sidebar */
@media (min-width: 992px) {
    .topics-sidebar.sticky {
        /* position: fixed; */
        top: 0;
        z-index: 1000;
        background-color: var(--box-background-color);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 15px;
        border-radius: 8px;
        transition: top 0.3s ease;
    }
}

/* Topics overview section - for the main page */
.topics-overview {
    margin-top: 20px;
}

.topic-card {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.topic-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.topic-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.topic-card-title a {
    color: var(--text-color);
    text-decoration: none;
}

.topic-card-title a:hover {
    color: var(--brand-color);
}

.topic-card-meta {
    font-size: 0.875rem;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.topic-card-preview {
    margin-bottom: 15px;
    font-size: 0.95rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    flex-grow: 1;
}

.topic-card-link {
    align-self: flex-start;
    color: var(--brand-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s;
    margin-top: auto;
}

.topic-card-link:hover {
    text-decoration: underline;
}

.topic-card-link i {
    font-size: 0.8rem;
    margin-left: 5px;
}

@media (max-width: 768px) {
    .topic-card {
        margin-bottom: 15px;
    }
}

.topics-overview {
    margin-top: 20px;
}

.topic-list-item {
    padding: 20px 0;
    transition: background-color 0.2s;
    position: relative;
    border: 1px solid var(--box-border-color);
    margin-bottom: 1.5rem;
    border-radius: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.topic-list-item:hover {
    background-color: var(--box-background-color);
}

.topic-header h3 {
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.topic-content {
    max-height: 100%;
    /* overflow: hidden; */
    margin-bottom: 15px;
    position: relative;
    padding: 0rem 1rem;
}

.topic-footer {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0rem 1rem;
}

.topic-author-name {
    color: var(--brand-color);
    text-decoration: none;
    font-weight: 500;
}

.topic-author-name:hover {
    text-decoration: underline;
}

.topic-timestamp {
    color: var(--text-color-solid);
}

.topic-divider {
    margin: 0;
    border-color: var(--box-border-color);
    opacity: 0.5;
}

.topic-view-btn {
    background-color: var(--outline-button-color);
    color: var(--brand-color);
    border-radius: 5px;
    font-size: 0.85rem;
    /* font-weight: 600; */
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.375rem 0.75rem;
    border: 0.2px solid var(--brand-color);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.topic-view-btn:hover {
    background-color: var(--brand-color);
    color: #fff !important;
}

.topic-view-btn i {
    font-size: 0.75rem;
    margin-left: 5px;
}

@media (max-width: 768px) {
    .topic-footer {
        flex-wrap: wrap;
    }

    .topic-view-btn {
        margin-top: 10px;
        margin-left: 0 !important;
        width: 100%;
        text-align: center;
    }

    .topic-content,
    .topic-header h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        width: 100%;
    }
}

/* Topics containers */
.topic-detail-container {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 1.5rem;
}



.topic-list-item {
    padding: 20px;
    transition: background-color 0.2s;
    position: relative;
    border: 1px solid var(--box-border-color);
    margin-bottom: 1.5rem;
    border-radius: 8px;
    background-color: var(--box-background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.badgeInfoCard {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 1rem;
}

.badge-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    gap: 1rem;
    margin-right: 1rem;
}

.badgeSvg {
    width: 100px;
    height: 100px;
    /* margin-right: 1rem; */
}

.badgeSvg:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Badge item container */
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.5rem;
    max-width: 130px;
    position: relative;
    transition: all 0.3s ease;
}

/* Active badge (unlocked) */
.badge-active {
    filter: none;
    transition: all 0.3s ease;
}

/* Inactive badge (locked/not achieved) */
.badge-inactive {
    filter: grayscale(100%) opacity(40%);
    transition: all 0.3s ease;
}

/* Badge title styling */
.badge-title {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    width: 100%;
    font-weight: 600;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Active badge title */
.badge-title-active {
    color: #f1c541;
}

/* Inactive badge title */
.badge-title-inactive {
    color: #737373;
}

/* Badge hover effects */
.badge-item:hover .badgeSvg.badge-inactive {
    filter: grayscale(80%) opacity(60%);
}

/* Custom tooltip styling */
.badge-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999;
    pointer-events: none;
    width: 200px;
}

.badge-tooltip-content {
    background-color: rgba(25, 25, 25, 0.95);
    color: #fff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(10px);
    transition: all 0.3s ease;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.badge-tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: rgba(25, 25, 25, 0.95) transparent transparent transparent;
}

.badge-tooltip-title {
    color: #f1c541;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 700;
}

.badge-tooltip-content p {
    font-size: 0.85rem;
    margin-bottom: 8px;
    line-height: 1.4;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.badge-lock {
    display: inline-block;
    color: #ff3a33;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-unlocked {
    display: inline-block;
    color: #32ca5b;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-item:hover .badge-tooltip {
    visibility: visible;
    opacity: 1;
}

.badge-item:hover .badge-tooltip-content {
    transform: translateY(0);
}

@media (max-width: 991px) {
    .badge-container {
        justify-content: center;
    }

    .badge-item {
        margin: 0.3rem;
    }

    .badgeSvg {
        width: 100px;
        height: 100px;
    }

    .badge-title {
        font-size: 0.8rem;
    }

    .badge-tooltip {
        width: 180px;
    }

    .badge-tooltip-title {
        font-size: 0.9rem;
    }

    .badge-tooltip-content p {
        font-size: 0.8rem;
    }

    .exp-bar {
        height: 6px;
    }

    .exp-text {
        font-size: 0.65rem;
    }

    .badge-level-overview {
        padding: 8px;
    }

    .current-level,
    .total-xp {
        font-size: 0.85rem;
    }

    .level-number,
    .xp-number {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .badgeSvg {
        width: 80px;
        height: 80px;
        margin-right: 0.5rem;
    }

    .badge-title {
        font-size: 0.7rem;
    }

    .badge-tooltip {
        width: 150px;
    }

    .badge-tooltip-title {
        font-size: 0.8rem;
    }

    .badge-tooltip-content p {
        font-size: 0.7rem;
    }

    .exp-bar {
        height: 5px;
    }

    .exp-text {
        font-size: 0.6rem;
    }
}

/* Experience Bar Styling */
.exp-bar-container {
    width: 100%;
    margin-top: 8px;
    text-align: center;
}

.exp-bar {
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-bottom: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.exp-progress {
    height: 100%;
    background: linear-gradient(90deg, green, green);
    border-radius: 4px;
    transition: width 0.6s ease-in-out;
    position: relative;
}

.exp-progress.completed {
    background: linear-gradient(90deg, #32ca5b, #6ff194);
}

.exp-progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.exp-text {
    font-size: 0.7rem;
    color: var(--text-color-solid);
    font-weight: 600;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.exp-text.locked {
    color: rgba(255, 0, 0, 0.5);
}

.exp-text.completed {
    color: #32ca5b;
}

/* Badge level overview */
.badge-level-overview {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--box-background-color);
    border-radius: 8px;
    border: 1px solid var(--box-border-color);
}

.current-level,
.total-xp {
    display: flex;
    align-items: center;
    color: var(--text-color-solid);
    font-size: 0.9rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.level-number,
.xp-number {
    margin-left: 5px;
    font-weight: 700;
    color: var(--brand-color);
    font-size: 1rem;
}

.badge-requirements {
    font-size: 0.75rem;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.6);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Inactive badge exp bar styling */
.badge-inactive + .badge-title + .exp-bar-container .exp-bar {
    opacity: 0.5;
}

.badge-inactive + .badge-title + .exp-bar-container .exp-progress {
    background: #555;
}

.badge-item:hover .badge-inactive + .badge-title + .exp-bar-container .exp-bar {
    opacity: 0.7;
}

@media (max-width: 991px) {
    .badge-container {
        justify-content: center;
    }

    .badge-item {
        margin: 0.3rem;
    }

    .badgeSvg {
        width: 100px;
        height: 100px;
    }

    .badge-title {
        font-size: 0.8rem;
    }

    .badge-tooltip {
        width: 180px;
    }

    .badge-tooltip-title {
        font-size: 0.9rem;
    }

    .badge-tooltip-content p {
        font-size: 0.8rem;
    }

    .exp-bar {
        height: 6px;
    }

    .exp-text {
        font-size: 0.65rem;
    }

    .badge-level-overview {
        padding: 8px;
    }

    .current-level,
    .total-xp {
        font-size: 0.85rem;
    }

    .level-number,
    .xp-number {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .badgeSvg {
        width: 80px;
        height: 80px;
        margin-right: 0.5rem;
    }

    .badge-title {
        font-size: 0.7rem;
    }

    .badge-tooltip {
        width: 150px;
    }

    .badge-tooltip-title {
        font-size: 0.8rem;
    }

    .badge-tooltip-content p {
        font-size: 0.7rem;
    }

    .exp-bar {
        height: 5px;
    }

    .exp-text {
        font-size: 0.6rem;
    }

    .badge-level-overview {
        flex-direction: column;
        align-items: center;
    }

    .current-level {
        margin-bottom: 5px;
    }

    .total-xp {
        margin-top: 5px;
    }
}

/* Emoji Stilleri */
.emoji-reply {
    cursor: pointer;
}

.emoji {
    cursor: pointer;
}

/* New filter panel styles */
.advanced-filter-panel {
    display: none;
    background-color: var(--box-background-color);
    border-radius: 10px;
    border: 1px solid var(--brand-color);
    padding: 18px 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    z-index: 999;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

.advanced-filter-panel label {
    display: block;
    margin-bottom: 8px;
}

.filterInput {
    border-radius: 6px;
    border: 1px solid var(--box-border-color);
    background-color: var(--input-background-color);
    font-size: 14px;
    transition: all 0.2s ease;
}

.filterInput:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px rgba(247, 147, 26, 0.1);
}

#filter_show.active {
    position: relative;
    /* z-index: 1000; */
}

.filter-container {
    position: relative;
}

@media (max-width: 768px) {
    .advanced-filter-panel .col-md-3 {
        margin-bottom: 16px;
    }
}

/* Çerez Stilleri */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--background-color, #fff);
    color: var(--text-color, #333);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    padding: 15px;
    max-width: 320px;
    display: none;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.cookie-content {
    display: flex;
    flex-direction: column;
}

.cookie-content p {
    margin: 0 0 10px 0;
    font-size: 13px;
}

.cookie-content a {
    color: var(--brand-color, #ffc107);
}

.cookie-buttons {
    display: flex;
    gap: 5px;
}

.cookie-buttons button {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    background-color: var(--outline-button-color, #f5f5f5);
    color: var(--text-color, #333);
}

.cookie-buttons .btn-accept {
    background-color: var(--brand-color, #ffc107);
    color: #000;
}

.cookie-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.cookie-modal-content {
    background-color: var(--background-color, #fff);
    color: var(--text-color, #333);
    border-radius: 8px;
    padding: 20px;
    position: relative;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

.close-cookie-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 18px;
    cursor: pointer;
}

.cookie-modal h3 {
    margin-top: 0;
    font-size: 16px;
    margin-bottom: 20px;
}

.cookie-switch-container {
    margin-bottom: 20px;
}

.cookie-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cookie-option span {
    font-size: 14px;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
}

input:checked + .slider {
    background-color: var(--brand-color, #ffc107);
}

input:checked + .slider:before {
    transform: translateX(18px);
}

.switch.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-save {
    width: 100%;
    padding: 8px;
    background-color: var(--brand-color, #ffc107);
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

@media (max-width: 480px) {
    .cookie-banner {
        bottom: 0;
        right: 0;
        left: 0;
        max-width: 100%;
        border-radius: 0;
        border-width: 1px 0 0 0;
    }
}

.headerTitle {
    font-size: 1.5rem;
    font-weight: 600;
}
    .headerDescription{
        font-size: 1rem;
        line-height: 1.1;
    }
@media (max-width: 768px) {
    .headerTitle {
        font-size: 1rem;
        font-weight: 600;
    }
    .headerDescription{
        font-size: .875rem;
        line-height: 1.1;
    }
    .headerDescriptionShort{
        font-size: .875rem;
        line-height: 1.3 !important;
    }
}

.lcp-section{
    line-height: 1.1;
    text-justify: inter-word;
    margin-bottom: 1rem;
}

.lcp-section-home{
    line-height: 1.1;
    text-justify: inter-word;
}

.searchCloseButton{
    display: none;
}

@media (max-width: 1200px) {
    .searchCloseButton{
        position: absolute;
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
        z-index: 999;
        padding: 1.1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .searchCloseButton:hover{
        background-color: var(--box-background-color);
        border-radius: 5px;
        padding: 1.1rem;
        cursor: pointer;
        width: 100%;
    }

    .searchCloseButton i{
        font-size: 2rem;
        color: var(--text-color-solid);
    }

}



.showcaseCard {
    border-radius: 10px;
    padding: 0.5rem;
    min-height: 175px;
    max-height: 189px;
    overflow: hidden !important;
    background-color: var(--showcasecard-background-color);
    border: 1.5px solid var(--box-border-color);
    overflow: hidden;
    cursor: pointer;
}

.showcaseCard:hover{
    background-color: var(--showcasecard-hover-background-color);
    border: 1.5px solid var(--brand-color);
    transition: all 0.3s ease;
}

.showcaseExchangeCard {
    border-radius: 10px;
    padding: 0.5rem;
    min-height: 175px;
    max-height: 500px;
    overflow: hidden !important;
    background-color: var(--showcasecard-background-color);
    border: 1.5px solid var(--box-border-color);
    overflow: hidden;
    cursor: pointer;
}


.showcaseExchangeCard:hover {
    background-color: var(--showcasecard-hover-background-color);
    border: 1.5px solid var(--brand-color);
    transition: all 0.3s ease;
}

.statsSection > .table-sm > tbody,
.statsSection > .table-sm > tbody > tr,
.statsSection > .table-sm > tbody > tr > th,
.statsSection > .table-sm > tbody > tr > td {
    background-color: transparent !important;
    background: none !important;
    background-image: none !important;
}

/* Tablo çizgilerini kaldırmak için */
.statsSection > .table-sm {
    background-color: transparent !important;
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-striped-color: inherit !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-active-color: inherit !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-hover-color: inherit !important;
}

/* Özel olarak o sayfadaki tablo arka planını tamamen temizle */
.showcaseExchangeCard .statsSection table,
.showcaseExchangeCard .statsSection tbody,
.showcaseExchangeCard .statsSection tr,
.showcaseExchangeCard .statsSection th,
.showcaseExchangeCard .statsSection td {
    background-color: transparent !important;
    background: none !important;
    background-image: none !important;
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important; 
    --bs-table-striped-color: inherit !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-active-color: inherit !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-hover-color: inherit !important;
    border-collapse: collapse;
}

/* Tüm infobox içindeki tablolara özel stil */
.showcaseExchangeCard .statsSection .InfoBottomLine,
.showcaseExchangeCard .statsSection .InfoBottomLine th,
.showcaseExchangeCard .statsSection .InfoBottomLine td {
    color: var(--text-color-solid) !important;
}