/* ==========================================================
   assets/css/komentar.css
   ✅ Identitas visual: Gaya Emas Dark Fantasy
   ✅ Warna dari variabel CSS --km-* (bisa diatur admin)
   ✅ Responsif HP & PC
   ✅ Semua komponen teratur rapi
   ========================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    color: var(--km-text);
    background: #0a0805 url('../img/bg.jpg') center / cover fixed no-repeat;
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.6;
}

/* ==========================================================
   PEMBUNGKUS UTAMA
   ========================================================== */
.km-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 60px;
}

/* ==========================================================
   HEADER — TOMBOL KEMBALI + JUDUL + SIMBOL
   ========================================================== */
.km-header {
    position: relative;
    text-align: center;
    padding: 28px 16px 20px;
}

.km-back {
    position: absolute;
    left: 16px;
    top: 24px;
    color: var(--km-border);
    font-size: 18px;
    text-decoration: none;
    border: 1px solid var(--km-border);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}
.km-back:hover {
    background: var(--km-border);
    color: var(--km-bg);
}

.simbol-monsalidus {
    text-align: center;
    margin: 10px 0;
}
.simbol-monsalidus svg {
    width: 120px;
    height: auto;
}

.km-diamond {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--km-border);
    stroke-width: 1.5;
    margin: 0 auto 10px;
    display: block;
}
.km-diamond-sm {
    width: 14px;
    height: 14px;
    fill: var(--km-border);
}

.km-header h1 {
    font-size: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--km-hover);
    text-shadow: 0 0 12px rgba(212,175,55,.35);
    font-weight: normal;
}

.km-orn-line {
    width: 140px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--km-border), transparent);
    margin: 14px auto 0;
}

/* ==========================================================
   LAYOUT — KIRI=DAFTAR KOMENTAR | KANAN=FORM (PC SAJA)
   ========================================================== */
.km-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 14px;
}

@media (min-width: 900px) {
    .km-layout {
        grid-template-columns: 1.6fr 1fr;
        align-items: start;
    }
    .km-form-mobile-only { display: none; }
}
@media (max-width: 899px) {
    .km-desktop-only { display: none; }
}

/* ==========================================================
   INFO HALAMAN — JUDUL BAB/CHAPTER + STATISTIK
   ========================================================== */
.km-page-info {
    background: var(--km-panel);
    border: 1px solid var(--km-border);
    border-radius: 4px;
    padding: 18px 20px;
    text-align: center;
}

.km-tag {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--km-border);
    border: 1px solid var(--km-border);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.km-page-info h2 {
    font-size: 20px;
    color: var(--km-hover);
    margin-bottom: 10px;
}

.km-stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 12px;
    color: var(--km-text);
    opacity: .85;
    flex-wrap: wrap;
}
.km-stats i {
    color: var(--km-border);
    margin-right: 4px;
}

/* ==========================================================
   GARIS PEMISAH
   ========================================================== */
.km-orn-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.km-orn-divider span:not(.km-diamond-sm) {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--km-border), transparent);
}
.km-orn-divider svg { flex-shrink: 0; }

/* ==========================================================
   DAFTAR KOMENTAR
   ========================================================== */
.km-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.km-empty, .km-kosong {
    text-align: center;
    padding: 40px 20px;
    color: var(--km-text);
    opacity: .6;
    border: 1px dashed var(--km-border);
    border-radius: 4px;
}
.km-empty i {
    font-size: 26px;
    color: var(--km-border);
    margin-bottom: 10px;
    display: block;
}

/* === Kartu Komentar — Gaya Baru === */
.km-card {
    position: relative;
    background: var(--km-panel);
    border: 1px solid var(--km-border);
    border-radius: 6px;
    padding: 16px 18px;
    transition: box-shadow .2s;
}
.km-card:hover {
    box-shadow: 0 0 16px rgba(212,175,55,.15);
}
.km-card.is-admin {
    border-color: var(--km-hover);
    background: linear-gradient(160deg, rgba(255,215,0,.06), var(--km-panel) 50%);
}

.km-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.km-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--km-border), var(--km-hover));
    color: var(--km-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 15px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.km-avatar-sm {
    width: 26px;
    height: 26px;
    font-size: 11px;
}
.km-who {
    flex: 1;
    min-width: 0;
}
.km-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--km-hover);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.km-badge {
    font-size: 9px;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.km-badge-admin {
    background: var(--km-hover);
    color: var(--km-bg);
}
.km-time {
    font-size: 10px;
    color: var(--km-text);
    opacity: .55;
    white-space: nowrap;
}
.km-msg {
    font-size: 13.5px;
    color: var(--km-text);
    opacity: .92;
    margin: 4px 0 10px;
    word-wrap: break-word;
}
.km-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(212,175,55,.2);
    padding-top: 10px;
}
.km-act {
    background: none;
    border: 1px solid rgba(212,175,55,.35);
    color: var(--km-text);
    font-size: 10.5px;
    letter-spacing: .5px;
    padding: 6px 10px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: .15s;
    font-family: inherit;
}
.km-act:hover {
    border-color: var(--km-hover);
    color: var(--km-hover);
}
.km-act.liked, .km-act.active {
    background: var(--km-hover);
    color: var(--km-bg);
    border-color: var(--km-hover);
    font-weight: bold;
}

/* === Balasan Komentar === */
.km-reply-item {
    display: flex;
    gap: 10px;
    margin: 12px 0 0 20px;
    padding: 10px 12px;
    border-left: 2px solid var(--km-border);
    background: rgba(212,175,55,.05);
    border-radius: 0 6px 6px 0;
}
.km-reply-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}
.km-reply-head b {
    color: var(--km-hover);
    font-size: 12px;
}
.km-reply-body p {
    font-size: 12px;
    opacity: .9;
}

/* === Kartu Komentar — Gaya Lama (tetap kompatibel) === */
.komentar-item {
    background: rgba(0,0,0,.3);
    border-left: 2px solid var(--km-border);
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 0 6px 6px 0;
}
.komentar-kepala {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.komentar-nama {
    font-weight: bold;
    font-size: 14px;
    color: var(--km-border);
}
.badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
}
.badge.admin {
    background: rgba(255,215,0,.15);
    color: #FFD700;
    border: 1px solid #FFD700;
}
.badge.penulis {
    background: rgba(74,222,128,.15);
    color: #4ade80;
    border: 1px solid #4ade80;
}
.komentar-waktu {
    font-size: 11px;
    color: #666;
}
.komentar-isi {
    font-size: 14px;
    line-height: 1.6;
    color: #E8E0D0;
    margin-bottom: 8px;
}
.komentar-aksi {
    display: flex;
    gap: 10px;
}
.komentar-aksi button {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
}
.komentar-aksi button:hover,
.komentar-aksi button.active {
    color: var(--km-hover);
}

/* ==========================================================
   FORM KOMENTAR
   ========================================================== */
/* === Gaya Baru === */
.km-form-box {
    background: var(--km-panel);
    border: 1px solid var(--km-border);
    border-radius: 6px;
    padding: 18px;
    position: sticky;
    top: 16px;
}
.km-form-head {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--km-hover);
    margin-bottom: 16px;
}
.km-diamond-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--km-border));
}
.km-form-head span:last-child {
    background: linear-gradient(90deg, var(--km-border), transparent);
}
.km-label {
    display: block;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--km-border);
    margin: 12px 0 6px;
}
.km-form-box input[type=text],
.km-form-box textarea {
    width: 100%;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(212,175,55,.4);
    color: var(--km-text);
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}
.km-form-box textarea {
    min-height: 100px;
    resize: vertical;
}
.km-form-box input:focus,
.km-form-box textarea:focus {
    outline: none;
    border-color: var(--km-hover);
    box-shadow: 0 0 0 2px rgba(255,215,0,.15);
}
.km-charcount {
    text-align: right;
    font-size: 10px;
    opacity: .55;
    margin-top: 4px;
}
.km-reply-info {
    background: rgba(212,175,55,.1);
    border: 1px solid var(--km-border);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.km-reply-info button {
    background: none;
    border: none;
    color: var(--km-hover);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}
.km-submit {
    width: 100%;
    margin-top: 16px;
    background: linear-gradient(135deg, var(--km-border), var(--km-hover));
    color: var(--km-bg);
    border: none;
    padding: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .2s;
}
.km-submit:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 18px rgba(255,215,0,.4);
}
.km-submit:active {
    transform: scale(.98);
}

/* === Gaya Lama (kompatibel) === */
.komentar-form {
    background: var(--km-panel);
    border: 1px solid var(--km-border);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 20px;
}
.komentar-baris {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.komentar-form input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(212,175,55,.3);
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}
.komentar-form input:focus { border-color: var(--km-border); }
.komentar-form textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(212,175,55,.3);
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    resize: vertical;
    margin: 8px 0;
    outline: none;
}
.komentar-baris-bawah {
    display: flex;
    gap: 10px;
    align-items: center;
}
.btn-kirim {
    padding: 8px 20px;
    background: linear-gradient(135deg, #B8860B, #D4AF37);
    border: none;
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.komentar-info {
    font-size: 11px;
    color: #888;
}

/* ==========================================================
   KETERANGAN BADGE
   ========================================================== */
.km-legend {
    margin-top: 16px;
    background: var(--km-panel);
    border: 1px solid var(--km-border);
    border-radius: 6px;
    padding: 16px;
}
.km-legend h3 {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--km-border);
    text-align: center;
    margin-bottom: 12px;
}
.km-legend-grid {
    display: grid;
    gap: 8px;
    font-size: 12px;
}
.km-legend-grid div {
    display: flex;
    align-items: center;
    gap: 8px;
}
.km-legend-grid i {
    color: var(--km-hover);
    width: 16px;
    text-align: center;
}

/* ==========================================================
   PAGINASI — PENOMORAN HALAMAN
   ========================================================== */
.km-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.km-pagination a,
.km-pagination span.km-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--km-border);
    color: var(--km-text);
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
}
.km-pagination a:hover {
    border-color: var(--km-hover);
    color: var(--km-hover);
}
.km-pagination a.active {
    background: var(--km-hover);
    color: var(--km-bg);
    font-weight: bold;
    border-color: var(--km-hover);
}
.km-pagination a.disabled {
    opacity: .3;
    pointer-events: none;
}
.km-pagination span.km-dots {
    border: none;
    color: #555;
}

/* ==========================================================
   NOTIFIKASI TOAST
   ========================================================== */
.km-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--km-hover);
    color: var(--km-bg);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}
.km-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}

/* ==========================================================
   RESPONSIF — TAMPILAN HP
   ========================================================== */
@media (max-width: 768px) {
    .simbol-monsalidus svg { width: 90px; }
    .km-stats { flex-wrap: wrap; }
}

/* Tambahan untuk komponen komentar modular. */
.km-preview {
    margin-top: 8px;
    padding: 10px 12px;
    border-left: 2px solid var(--km-border);
    color: var(--km-text);
    background: rgba(212, 175, 55, .06);
    border-radius: 0 5px 5px 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
}
.km-act:disabled,
.km-submit:disabled { opacity: .55; cursor: wait; }
.km-toast[data-kind="error"] { color: #fff; background: #9b1c1c; }
.km-reply-item time { color: var(--km-text); opacity: .55; font-size: 10px; }
.km-reply-item .km-actions { margin-top: 6px; padding-top: 6px; }
.km-card .km-actions { align-items: center; }
@media (max-width: 899px) {
    .km-layout { display: flex; flex-direction: column-reverse; }
    .km-right { width: 100%; }
    .km-form-box { position: static; }
}


/* Override wajib: theme.css memiliki aturan global `header` yang tidak boleh menimpa header komentar. */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
header.km-header {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    display: block;
    padding: 28px 12px 16px;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: auto;
}
.km-wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 12px 70px; }
.km-layout { display: flex; flex-direction: column; width: 100%; max-width: 720px; margin: 0 auto; padding: 0; gap: 16px; }
.km-left, .km-right { width: 100%; min-width: 0; max-width: none; }
.km-right { display: flex; flex-direction: column; gap: 16px; }
.km-page-info { width: 100%; max-width: none; }
.km-form-box { position: static; width: 100%; max-width: none; margin: 0; }
.km-list { width: 100%; min-width: 0; }
.km-card, .km-empty { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.km-actions { width: 100%; }
.km-act { max-width: 100%; }
.km-pagination { width: 100%; max-width: none; height: auto; margin: 18px 0 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.km-header h1 { max-width: 100%; font-size: clamp(20px, 6vw, 30px); line-height: 1.3; letter-spacing: clamp(2px, 1vw, 5px); overflow-wrap: anywhere; }
.km-page-info h2 { overflow-wrap: anywhere; }
@media (max-width: 899px) {
    .km-layout { flex-direction: column; }
    .km-right { order: -1; }
    .km-form-box { padding: 16px; }
    .km-page-info { padding: 14px; }
    .km-card { padding: 14px; }
    .km-actions { gap: 6px; }
    .km-act { flex: 1 1 auto; justify-content: center; padding: 7px 8px; font-size: 10px; }
}

/* Indikator admin pada halaman komentar: tersembunyi sebelum login, kecil setelah login. */
#btn-otak.km-admin-float {
    position: fixed;
    right: 14px;
    bottom: 18px;
    z-index: 6200;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    color: #111;
    background: #d4af37;
    border: 1px solid #ffe88a;
    border-radius: 999px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .38);
    font: 700 11px/1 Georgia, serif;
    cursor: pointer;
}
#btn-otak.km-admin-float.show { display: inline-flex; }
#btn-otak.km-admin-float:hover { filter: brightness(1.12); }

@media (max-width: 600px) {
    #btn-otak.km-admin-float { right: 10px; bottom: 12px; padding: 8px 11px; }
}

/* Shared public shell and runtime theme */
body { background: transparent; color: var(--story-color, var(--tc, #f5f0e8)); font-family: var(--font-body, 'Segoe UI', Georgia, serif); padding-bottom: calc(var(--bb, 62px) + 20px); }
.km-wrap { max-width: 1100px; margin: 0 auto; padding: 18px 0 calc(var(--bb, 62px) + 45px); }
.km-header h1, .km-page-info h2, .km-form-head, .km-name, .km-label, .km-tag, .km-stats i, .km-form-head, .km-legend h3 { color: var(--story-color, var(--tc, #ffd700)); }
.km-page-info, .km-card, .km-form-box, .km-legend, .km-empty, .km-kosong { background: var(--panel-bg, rgba(10,8,5,.78)); border-color: var(--story-color, var(--tc, #ffd700)); }
.km-form-box input[type=text], .km-form-box textarea { border-color: var(--story-color, var(--tc, #ffd700)); color: var(--story-color, #f5f0e8); }
.km-submit { background: var(--story-color, var(--tc, #ffd700)); color: #000; }
.km-act:hover, .km-act.liked, .km-act.active { border-color: var(--story-color, var(--tc, #ffd700)); color: var(--story-color, var(--tc, #ffd700)); }
.km-badge-admin { background: var(--story-color, var(--tc, #ffd700)); color: #000; }
@media (max-width: 899px) { .km-layout { padding: 0 10px; gap: 14px; } .km-form-box { position: static; } }