/* ============================================================
   Karakter sayfası (pages/character.php)
   Ortak bileşenler pages/shared/cp-ui.css içindedir; burada yalnızca
   bu sayfaya özgü kurallar bulunur (.charpage kapsamı).
   ============================================================ */

.charpage {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 15px;
}

.charpage .cp-alerts .karakterbaninfo {
    margin: 0 !important;
    border-radius: var(--cp-radius-sm);
}

/* ---------- Hero ---------- */
.charpage .cp-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(184, 38, 38, .18) 0%, rgba(184, 38, 38, 0) 55%),
        var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
}

.charpage .cp-hero__avatar {
    position: relative;
    width: 104px;
    height: 104px;
    flex: none;
}

.charpage .cp-hero__avatar img {
    width: 104px;
    height: 104px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid var(--cp-border);
    background: var(--cp-surface-3);
    display: block;
}

.charpage .cp-presence {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cp-text-3);
    border: 3px solid var(--cp-surface);
}

.charpage .cp-presence.is-online {
    background: var(--cp-success);
}

.charpage .cp-hero__main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.charpage .cp-hero__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.charpage .cp-hero__name {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    overflow-wrap: anywhere;
}

.charpage .cp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.charpage .cp-level {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 520px;
}

.charpage .cp-level__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: var(--cp-text-2);
}

.charpage .cp-level__head b {
    font-size: 14px;
    color: var(--cp-text-1);
}

.charpage .cp-hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    align-self: start;
}

.charpage .cp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.charpage .cp-hero__ids {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.charpage .cp-hero__alts {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--cp-border);
}

.charpage .cp-hero__alts-label {
    margin-right: 4px;
    font-size: 12px;
    color: var(--cp-text-3);
}


/* Blacklist kartları */
.charpage .cp-blacklist-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.charpage .cp-blacklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--cp-radius-sm);
    border: 1px solid var(--cp-border);
    border-left: 3px solid var(--cp-danger);
    background: var(--cp-surface-2);
    font-size: 13px;
}

.charpage .cp-blacklist.is-expired { border-left-color: var(--cp-success); }
.charpage .cp-blacklist.is-disabled { border-left-color: var(--cp-text-3); opacity: .6; }

.charpage .cp-blacklist__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.charpage .cp-blacklist__head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-text-1);
}

.charpage .cp-blacklist__tags {
    display: flex;
    align-items: center;
    gap: 6px;
}

.charpage .cp-blacklist__reason {
    margin: 0;
    line-height: 1.5;
    color: var(--cp-text-2);
}

.charpage .cp-blacklist__reason b {
    color: var(--cp-text-1);
    font-weight: 500;
}

.charpage .cp-blacklist__meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.charpage .cp-blacklist__meta > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.charpage .cp-blacklist__meta b {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cp-text-3);
}

.charpage .cp-blacklist__meta em {
    font-style: normal;
    font-weight: 600;
}

.charpage .cp-blacklist__foot {
    font-size: 12px;
    color: var(--cp-text-3);
}

.charpage .cp-danger { color: #f87171; }

.charpage .cp-panel__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-text-2);
}

.charpage .cp-panel__hint {
    font-weight: 400;
    color: var(--cp-text-3);
}


/* ---------- Ajax'tan gelen bölümlerin uyarlanması ---------- */
.charpage .karakterbasarilari,
.charpage .izinsoyad2,
.charpage .karakterenv {
    margin: 0 !important;
    padding: 18px;
    gap: 12px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
}

.charpage .karakterbasarilari span:not(.badge),
.charpage .izinsoyad2 span:not(.badge),
.charpage .karakterenv span:not(.badge) {
    background: none;
    padding: 0;
    border-radius: 0;
}

.charpage .karakterbasarilari > span:first-child,
.charpage .izinsoyad2 > span:first-child,
.charpage .karakterenv > span:first-child {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cp-text-2);
}

.charpage .envkar {
    margin-top: 0;
    gap: 4px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

.charpage .envkaric {
    flex: none;
    padding: 8px 10px;
    background: var(--cp-surface-2);
    border-radius: var(--cp-radius-sm);
    font-size: 13px;
}

/* Başlık satırı kaydırırken üstte sabit kalır */
.charpage .envkaric:first-child {
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: 0;
    background: var(--cp-surface);
    padding-top: 0;
    padding-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cp-text-3);
}

.charpage .bildiribol,
.charpage .raporbol,
.charpage .notugor {
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    font-size: 13px;
    line-height: 1.45;
}

.charpage .bildiribol small,
.charpage .raporbol small {
    color: var(--cp-text-3);
    font-size: 11px;
}

.charpage .notugor2 {
    color: var(--cp-text-3);
    font-size: 11px;
}

.charpage .notugor2 span {
    width: auto;
}

.charpage .notugor2 a {
    cursor: pointer;
    color: var(--cp-text-3);
}

.charpage .notugor2 a:hover {
    color: var(--cp-danger);
}

.charpage .notdetay2 span {
    color: var(--cp-text-2);
    margin-right: 4px;
}

.charpage .notdetay2 p {
    display: inline;
    margin: 0;
}


/* Online grafik widget'ı kendi kartını getirir; dış boşluğu sıfırla */
.charpage #lazyload_content_onlinechart:empty,
.charpage #lazyload_content_gallery:empty,
.charpage #lazyload_content_invoices:empty,
.charpage #lazyload_content_lockedln:empty,
.charpage #lazyload_content_inventory:empty {
    display: none;
}


/* Telefon galerisi */
.charpage .telgaleri {
    margin-top: 0;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.charpage .telgaleri a {
    cursor: pointer;
    border-radius: var(--cp-radius-sm);
    border: 1px solid var(--cp-border);
    overflow: hidden;
    background: var(--cp-surface-2);
}

.charpage .telgaleri img {
    height: 110px;
    border-radius: 0;
    transition: transform .2s;
}

.charpage .telgaleri a:hover img {
    transform: scale(1.04);
}

.charpage .telgaleri a:hover img.cp-img-broken {
    transform: none;
}

/* ---------- Oyun aktivitesi (getCharacterChart.php) ---------- */
.charpage .cp-oc {
    gap: 16px;
}

.charpage .cp-oc__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.charpage .cp-oc__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.charpage .cp-oc__select {
    height: 32px !important;
    padding: 0 30px 0 10px !important;
    border-radius: var(--cp-radius-sm);
    border: 1px solid var(--cp-border);
    background: var(--cp-surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--cp-text-1);
    font: inherit;
    font-size: 12px;
    line-height: 30px !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}


/* Görünüm çubuğu ve paneller */
.charpage .cp-oc__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.charpage .cp-oc__viewbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.charpage .cp-oc__hint {
    font-size: 12px;
    color: var(--cp-text-3);
}

.charpage .cp-oc__view {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.charpage .cp-oc__view.is-active {
    display: flex;
    animation: cp-fade .2s ease;
}

.charpage .cp-oc__chart {
    position: relative;
    height: 260px;
}

.charpage .cp-oc__chart--sm {
    height: 220px;
}

.charpage .cp-oc__subbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.charpage .cp-oc__insight {
    font-size: 13px;
    color: var(--cp-text-2);
}

.charpage .cp-oc__insight b {
    color: #fff;
}

.charpage .cp-oc__insight span {
    color: var(--cp-text-3);
}

.charpage .cp-oc__daypick {
    display: flex;
    align-items: center;
    gap: 6px;
}

.charpage .cp-oc__date {
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: var(--cp-radius-sm);
    border: 1px solid var(--cp-border);
    background: var(--cp-surface-3);
    color: var(--cp-text-1);
    font: inherit;
    font-size: 12px;
    color-scheme: dark;
}

.charpage .cp-oc__table tbody tr.is-clickable {
    cursor: pointer;
}

.charpage .cp-oc__table td {
    white-space: nowrap;
}

.charpage .cp-oc__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: 1px;
}

.charpage .cp-oc__share {
    min-width: 130px;
    color: var(--cp-text-2);
    font-size: 12px;
}

.charpage .cp-oc__sharebar {
    display: inline-block;
    position: relative;
    width: 70px;
    height: 6px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--cp-surface-3);
    overflow: hidden;
    vertical-align: 1px;
}

.charpage .cp-oc__sharebar > span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
}

@media (max-width: 560px) {
    .charpage .cp-oc__chart {
        height: 220px;
    }
}

/* LifeInvader */
.charpage .cp-iframe {
    width: 100%;
    height: 640px;
    border: 0;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface-2);
}

/* ---------- Blacklist modal ---------- */
.cp-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .7);
}

.cp-modal.is-open {
    display: flex;
}

.cp-modal__box {
    width: 100%;
    max-width: 500px;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #2a2b2e;
    background: #18191a;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    color: #e6e6e6;
}

.cp-modal__box h3 {
    margin: 0 0 18px;
    font-size: 18px;
    color: #f87171;
}

.cp-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.cp-modal__field label {
    font-size: 13px;
    color: #9a9a9a;
}

.cp-modal__field input,
.cp-modal__field textarea {
    width: 100%;
    padding: 9px 12px !important;
    border-radius: 8px;
    border: 1px solid #2a2b2e;
    background: #242526;
    color: #e6e6e6;
    font: inherit;
    font-size: 13px;
    line-height: 1.4 !important;
    box-sizing: border-box;
}

.cp-modal__field textarea {
    resize: vertical;
}

.cp-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.cp-modal__actions button {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #2a2b2e;
    background: #242526;
    color: #e6e6e6;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.cp-modal__actions button.is-danger {
    background: #b82626;
    border-color: #b82626;
    color: #fff;
    font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .charpage .cp-hero {
        grid-template-columns: auto 1fr;
    }

    .charpage .cp-hero__aside {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .charpage .cp-hero__actions,
    .charpage .cp-hero__ids {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .charpage .cp-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 18px;
    }

    .charpage .cp-hero__title,
    .charpage .cp-hero__meta,
    .charpage .cp-hero__aside,
    .charpage .cp-hero__actions,
    .charpage .cp-hero__ids,
    .charpage .cp-hero__alts {
        justify-content: center;
    }

    .charpage .cp-hero__main {
        width: 100%;
        align-items: center;
    }

    .charpage .cp-level {
        width: 100%;
    }

    .charpage .cp-hero__name {
        font-size: 22px;
    }

    .charpage .cp-iframe {
        height: 520px;
    }
}