/**
 * assets/css/karakter-detail.css
 * ✅ Tampilan kartu bisa dibalik 3D
 * ✅ Biodata & Status Kekuatan
 * ✅ Komentar & Modal Afiliasi
 * ✅ Warna ikut variabel tema
 */

/* ==========================================================
   TOMBOL KEMBALI & JAM
   ========================================================== */
.kar-admin-detail-edit { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 10px; padding: 7px 11px; color: #171208; border: 1px solid var(--tc, #ffd700); border-radius: 999px; background: var(--tc, #ffd700); font-size: 10px; font-weight: 700; text-decoration: none; }
.kar-admin-detail-edit:hover { filter: brightness(1.08); transform: translateY(-1px); }

.back-link {
    display: inline-block;
    color: var(--tc);
    font-size: 12px;
    text-decoration: none;
    margin-bottom: 12px;
}

.rt-clock {
    text-align: center;
    font-size: 11px;
    color: var(--tc);
    opacity: .8;
    margin-bottom: 14px;
}

/* ==========================================================
   KARTU BISA DIBALIK — EFEK 3D
   ========================================================== */
.flip-scene {
    perspective: 1600px;
    width: min(100%, 480px);
    margin: 0 auto;
}

.flip-card { min-height: 1px; }

.flip-card {
    position: relative;
    width: 100%;
    transition: transform .6s;
    transform-style: preserve-3d;
}

.flip-card.flipped {
    transform: rotateY(180deg);
}

.flip-face {
    backface-visibility: hidden;
    width: 100%;
}

.flip-front {
    position: relative;
}

.flip-back {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
}

/* ==========================================================
   ISI KARTU BIODATA
   ========================================================== */
.kcard-box {
    width: 100%;
    background: #1b140f;
    border: 2px solid var(--tc);
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
}

.kcard-photo {
    width: 150px;
    border-radius: 8px;
    border: 1px solid #555;
    float: left;
    margin-right: 14px;
}

.kcard-tags {
    overflow: hidden;
}

.kcard-tag {
    background: #000;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    color: #ddd;
    margin-bottom: 8px;
}

.kcard-tag b { color: var(--tc); }
.kcard-tag.clickable {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
}

.kcard-badge {
    display: inline-block;
    background: var(--tc);
    color: #000;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    clear: both;
    margin: 16px 0 12px -20px;
}

.kcard-desc {
    clear: both;
    border: 1px solid var(--tc);
    border-radius: 8px;
    padding: 14px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #eee;
    margin-top: 6px;
}

.kcard-desc .hint {
    display: block;
    margin-top: 10px;
    opacity: .75;
    font-style: italic;
    cursor: pointer;
    text-decoration: underline;
    color: var(--tc);
}

/* ==========================================================
   BAGIAN INFORMASI / DATA
   ========================================================== */
.bio-section { margin-top: 14px; }

.bio-section h4 {
    color: var(--tc);
    font-size: 12px;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--tc-lo);
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.bio-row {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: #ddd;
    padding: 3px 0;
    gap: 10px;
}

.bio-row span:first-child { color: #999; flex: 0 0 auto; }
.bio-row span:last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.bio-row-long span:last-child { line-height: 1.55; white-space: normal; }

.bio-text {
    font-size: 11.5px;
    color: #ddd;
    line-height: 1.7;
}

.bio-list {
    margin: 0;
    padding-left: 18px;
    font-size: 11.5px;
    color: #ddd;
    line-height: 1.7;
}

.bio-list li { margin-bottom: 4px; }

/* ==========================================================
   PARAMETER PILAR
   ========================================================== */
.param-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 4px;
}

.param-item {
    background: #000;
    border: 1px solid var(--tc-lo);
    border-radius: 6px;
    text-align: center;
    padding: 8px 2px;
}

.param-item .pv {
    font-size: 15px;
    font-weight: bold;
    color: #ffd23a;
}

.param-item .pl {
    font-size: 8px;
    color: #999;
    text-transform: uppercase;
    margin-top: 2px;
}

/* ==========================================================
   STATUS KEKUATAN — BELAKANG KARTU
   ========================================================== */
.kar-stats-title {
    text-align: center;
    color: var(--tc);
    font-size: 16px;
    letter-spacing: 3px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--tc-lo);
    padding-bottom: 10px;
}

.kar-tier-box {
    text-align: center;
    background: #000;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.kar-tier-box .tier-letter {
    font-size: 34px;
    font-weight: bold;
    color: #ffd23a;
    text-shadow: 0 0 12px rgba(255,210,58,.6);
}

.kar-tier-box .tier-lvl {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}

.kar-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
}

.kar-stats-grid div {
    background: #000;
    border-radius: 6px;
    padding: 9px 12px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.kar-stats-grid .lbl { color: #5bd97a; }

.kar-atkdef {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
}

.kar-atkdef div {
    background: #000;
    border-radius: 6px;
    padding: 9px 12px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #fff;
}

.kar-back-btn {
    display: block;
    margin: 14px auto 0;
    background: none;
    border: 1px solid var(--tc);
    color: var(--tc);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}

/* ==========================================================
   TOMBOL SUKA ⭐
   ========================================================== */
.kar-like {
    text-align: center;
    margin: 18px 0 6px;
}

.kar-like .star-btn {
    font-size: 46px;
    color: #555;
    background: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

.kar-like .star-btn.active {
    color: #ffd23a;
    text-shadow: 0 0 14px rgba(255,210,58,.8);
    transform: scale(1.15);
}

.kar-like p {
    color: var(--tc);
    font-size: 11px;
    font-weight: bold;
    margin-top: 4px;
}

/* ==========================================================
   KOTAK INTERAKSI (SUKA + KOMENTAR)
   ========================================================== */
.interaksi-box {
    width: min(100%, 480px);
    margin: 16px auto;
    padding: 12px 16px;
    background: rgba(0,0,0,.6);
    border: 1px solid var(--tc-lo);
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.interaksi-box > * { min-width: 0; }

.interaksi-box p {
    margin: 0;
    font-size: 12px;
    color: #ddd;
}

.btn-diskusi {
    display: inline-block;
    padding: 6px 14px;
    background: var(--tc);
    color: #000;
    font-weight: bold;
    border-radius: 20px;
    text-decoration: none;
    font-size: 11px;
    transition: .2s;
}

.btn-diskusi:hover {
    background: #ffd23a;
    transform: scale(1.05);
}

/* ==========================================================
   KOTAK KOMENTAR
   ========================================================== */
.kar-komen-box {
    border-top: 1px solid var(--tc-lo);
    margin-top: 16px;
    padding-top: 14px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.kar-komen-box h4 {
    color: var(--tc);
    font-size: 13px;
    margin-bottom: 10px;
}

.kar-komen-box input,
.kar-komen-box textarea {
    width: 100%;
    background: #000;
    border: 1px solid var(--tc);
    color: #fff;
    padding: 9px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 8px;
    outline: none;
}

.kar-komen-box textarea {
    resize: none;
    height: 60px;
}

.kar-komen-submit {
    width: 100%;
    background: var(--tc);
    color: #000;
    border: none;
    padding: 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 14px;
}

.kar-komen-item {
    background: #000;
    border-left: 3px solid var(--tc);
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 8px;
}

.kar-komen-item .kw { font-size: 9px; color: #888; }
.kar-komen-item .kn { color: var(--tc); font-size: 12px; font-weight: bold; margin: 2px 0; }
.kar-komen-item .kp { font-size: 12px; color: #ddd; }

/* ==========================================================
   MODAL AFILIASI / ORGANISASI
   ========================================================== */
#org-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    z-index: 20000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 30px 12px 40px;
}

#org-modal.open { display: flex; }

.org-box {
    background: #1b140f;
    border: 2px solid var(--tc);
    border-radius: 14px;
    max-width: 440px;
    width: 100%;
    padding: 20px;
    position: relative;
}

.org-close {
    position: absolute;
    top: 10px;
    right: 14px;
    color: var(--tc);
    font-size: 24px;
    cursor: pointer;
}

.org-box h3 {
    color: var(--tc);
    text-align: center;
    margin-bottom: 4px;
}

.org-box .org-sub {
    text-align: center;
    color: #999;
    font-size: 11px;
    font-style: italic;
    margin-bottom: 14px;
}

.org-row {
    font-size: 12px;
    color: #ddd;
    margin-bottom: 8px;
}

.org-row b {
    color: var(--tc);
    display: block;
    font-size: 10px;
    opacity: .8;
}

/* ==========================================================
   RESPONSIF LAYAR HP
   ========================================================== */
@media (max-width: 480px) {
    .flip-scene, .interaksi-box { width: 100%; }
    .kcard-box { padding: 14px; border-radius: 12px; }
    .kcard-photo { float: none; display: block; width: min(150px, 100%); max-width: 100%; margin: 0 auto 14px; }
    .param-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    .param-item { padding: 7px 1px; }
    .param-item .pv { font-size: 13px; }
    .param-item .pl { font-size: 7px; }
    /* Format biodata tetap dua kolom: label kiri, nilai kanan. */
    .bio-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        align-items: start;
        gap: 8px;
    }
    .bio-row span:last-child {
        min-width: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }
    .interaksi-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
    .interaksi-box p { white-space: nowrap; }
    .interaksi-box .btn-diskusi { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 340px) {
    .kcard-box { padding: 11px; }
    .bio-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6px; font-size: 10.5px; }
    .interaksi-box { grid-template-columns: 1fr; }
    .interaksi-box p { white-space: normal; }
}

/* Runtime theme normalization */
.kcard-box, .org-box { background: var(--panel-bg, rgba(8,7,5,.82)); color: var(--story-color, #f1f1f1); }
.kcard-tag, .param-item, .kar-tier-box, .kar-stats-grid div, .kar-atkdef div { background: rgba(0,0,0,.62); color: var(--story-color, #f1f1f1); }
.kcard-tag, .kcard-desc, .bio-row, .bio-text, .bio-list, .interaksi-box p { color: var(--story-color, #f1f1f1); }
.bio-row span:first-child, .param-item .pl, .kar-tier-box .tier-lvl { color: color-mix(in srgb, var(--story-color, #f1f1f1) 62%, #fff 38%); }
.param-item .pv, .kar-tier-box .tier-letter, .kar-like .star-btn.active, .kar-like p, .btn-diskusi, .org-box h3, .org-close { color: var(--story-color, #ffd700); }
.btn-diskusi { background: var(--story-color, #ffd700); color: #000; }
.btn-diskusi:hover { background: var(--story-color, #ffd700); filter: brightness(1.1); }
.kar-like .star-btn.active { text-shadow: 0 0 14px var(--tc-sh, rgba(255,215,0,.8)); }
.interaksi-box { background: rgba(0,0,0,.64); border-color: var(--tc-lo); }

/* Universal detail slider: biodata/status lalu foto penuh */
.ui-character-slider{overflow:hidden;position:relative;width:min(100%,480px);margin:0 auto}
.ui-character-track{display:flex;width:300% !important;transform:translateX(0);transition:transform .35s ease;touch-action:pan-y}
.ui-character-track[data-active="full-info"]{transform:translateX(-33.333333%)}
.ui-character-track[data-active="image"]{transform:translateX(-66.666667%)}
/* Setiap panel wajib selebar viewport slider. Panel yang tidak aktif tidak boleh terlihat. */
.ui-character-track > .ui-character-slide{display:block;width:33.333333% !important;flex:0 0 33.333333% !important;box-sizing:border-box}
.ui-character-track > [data-detail-slide]{display:block !important;visibility:hidden;pointer-events:none;height:0;overflow:hidden}
.ui-character-track > [data-detail-slide="initial"],
.ui-character-track[data-active="initial"] > [data-detail-slide="initial"],
.ui-character-track[data-active="full-info"] > [data-detail-slide="full-info"],
.ui-character-track[data-active="image"] > [data-detail-slide="image"]{display:block !important;visibility:visible;pointer-events:auto;height:auto;overflow:visible}
.ui-character-initial{padding:0}
.kcard-initial-box{min-height:520px}
.detail-back-initial,.ui-detail-image-caption{display:block;width:max-content;max-width:calc(100% - 20px);margin:14px auto 0;padding:8px 14px;border:1px solid var(--tc,#ffd700);border-radius:999px;background:rgba(0,0,0,.78);color:var(--tc,#ffd700)!important;font-size:11px;line-height:1.4;text-align:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.28)}
.detail-back-initial:hover,.ui-detail-image-caption:hover{background:rgba(0,0,0,.94);color:var(--tc,#ffd700)!important;filter:brightness(1.08)}
.character-full-interaction{margin-top:16px;padding-top:12px;border-top:1px solid var(--tc-lo,rgba(212,175,55,.35));background:rgba(0,0,0,.18)}
.character-full-interaction .kar-like{margin:0 auto 6px}
.kcard-initial-photo{cursor:pointer}
.character-full-image{display:block;width:100%;max-height:78vh;object-fit:contain;border:1px solid rgba(212,175,55,.55);border-radius:12px;background:#080604}
.ui-character-slider .ui-detail-image{min-height:620px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(8,6,4,.82)}
@media (max-width:650px){.ui-character-slider .ui-detail-image{min-height:500px;padding:10px}.character-full-image{max-height:70vh}}

.kcard-photo{cursor:pointer}
.kcard-photo:focus{outline:2px solid var(--tc,#ffd700);outline-offset:3px}

.kcard-photo-button{display:block;float:left;width:150px;margin:0 14px 0 0;padding:0;border:0;background:transparent;cursor:pointer;text-align:left}
.kcard-photo-button .kcard-photo{display:block;float:none;width:100%;margin:0}
.kcard-photo-button:focus-visible{outline:2px solid var(--tc,#ffd700);outline-offset:4px;border-radius:8px}

.ui-character-track[data-active="image"] > [data-detail-slide="image"]{display:flex !important}

/* Detail karakter: setelah panel aktif, area pendukung dibuat ringkas agar footer tidak terdorong jauh. */
body.detail-character-page .kar-like{margin:4px 0 2px}
body.detail-character-page .kar-like .star-btn{font-size:30px;line-height:1}
body.detail-character-page .kar-like p{margin:2px 0 0}
body.detail-character-page .interaksi-box{margin:4px auto;padding:6px 8px;gap:6px}

/* Julukan ditempatkan setelah foto dan diberi ruang baca lebih lega. */
.kcard-tag.kcard-julukan { margin-top: 6px; padding-top: 14px; padding-bottom: 14px; line-height: 1.65; }

/* Ringkasan karakter mengikuti susunan screenshot: foto kiri, metadata kanan, julukan di bawah foto. */
.kcard-initial-layout { display:grid; grid-template-columns:minmax(140px, 150px) minmax(0, 1fr); gap:10px 14px; align-items:start; }
.kcard-initial-photo-wrap { min-width:0; }
.kcard-initial-photo-wrap .kcard-photo-button { display:block; width:100%; }
.kcard-initial-photo-wrap .kcard-photo { float:none; display:block; width:100%; max-width:150px; margin:0; }
.kcard-side-tags { min-width:0; }
.kcard-side-tags .kcard-tag { margin-bottom:8px; }
.kcard-initial-layout .kcard-julukan { grid-column:1 / -1; margin:0; width:100%; line-height:1.65; }
@media (max-width:600px) {
    .kcard-initial-layout { grid-template-columns:minmax(112px, 44%) minmax(0, 1fr); gap:8px 10px; }
    .kcard-initial-layout .kcard-tag { padding:9px 10px; font-size:11px; }
}

/* Mode foto penuh: hanya foto dan kontrol kembali yang tersisa sebelum footer. */
body.detail-image-active #main-wrap > .back-link,
body.detail-image-active #main-wrap > .kar-admin-detail-edit,
body.detail-image-active #main-wrap > .rt-clock,
body.detail-image-active #main-wrap > .kar-like,
body.detail-image-active #main-wrap > .interaksi-box { display: none !important; }
body.detail-image-active #main-wrap { margin-top: 0 !important; padding-top: 0 !important; }
body.detail-image-active .ui-detail-slider { margin-top: 0 !important; margin-bottom: 0 !important; }
body.detail-image-active .ui-detail-image { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
body.detail-image-active .ui-detail-image .character-full-image { display: block; margin: 0 auto; }
body.detail-image-active .ui-detail-image-caption { display: block; margin: 10px auto 0; }

/* Foto penuh benar-benar menjadi konten utama halaman. */
body.detail-image-active #rtt { display: none !important; }
body.detail-image-active #main-wrap { margin: 0 auto !important; padding: 0 !important; }
body.detail-image-active #main-wrap .ui-detail-slider { width: 100% !important; }
body.detail-image-active .ui-detail-image { margin: 0 !important; border-radius: 0 !important; }

/* Override final: aturan lama .ui-character-slider .ui-detail-image lebih spesifik,
   sehingga mode foto memakai selector yang setara/lebih kuat. */
body.detail-image-active .ui-character-slider .ui-detail-image {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    align-items: initial !important;
    justify-content: initial !important;
}
body.detail-image-active .ui-character-slider .ui-detail-image img,
body.detail-image-active .ui-character-slider .ui-detail-image .character-full-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* Perbaikan selector tahap: panel awal tidak boleh tetap display:block saat tahap lain aktif. */
.ui-character-track[data-active="full-info"] > [data-detail-slide="initial"],
.ui-character-track[data-active="image"] > [data-detail-slide="initial"],
.ui-character-track[data-active="image"] > [data-detail-slide="full-info"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Komponen interaksi berada sebagai saudara #main-wrap, bukan anaknya. */
body.detail-image-active .kar-like,
body.detail-image-active .interaksi-box {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Final alur karakter: biodata lengkap berisi teks; foto dibuka hanya melalui tombol. */
.character-view-photo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(100%, 240px);
    margin: 10px auto 16px;
    padding: 10px 16px;
    color: #080604;
    border: 1px solid var(--tc, #d4af37);
    border-radius: 8px;
    background: var(--tc, #d4af37);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.character-view-photo-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.character-view-photo-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ui-character-slider .character-full-image {
    width: min(100%, 680px);
    max-width: 680px;
    max-height: 78vh;
    object-fit: contain;
}
body:not(.detail-image-active) .interaksi-box,
body:not(.detail-image-active) .kar-like { display: block; visibility: visible; }
body.detail-image-active .ui-character-slider .character-full-image {
    width: min(100%, 680px);
    max-width: 680px;
    max-height: 82vh;
    margin: 0 auto !important;
}
@media (max-width:650px) {
    .character-view-photo-button { width: min(100%, 220px); }
    .ui-character-slider .character-full-image,
    body.detail-image-active .ui-character-slider .character-full-image { width: min(100%, 94vw); max-width: 94vw; max-height: 74vh; }
}