/* ki-fix2.css — perbaikan lanjutan: sidebar peringkat + urutan daftar chapter.
   Dimuat paling akhir. */

/* ====================================================================
   1. DAFTAR CHAPTER — urutan baca
   grid 2 kolom membuat urutan zigzag (255 kiri, 254 kanan) sehingga mata
   melompat tiap nomor. `columns` mengalir atas-ke-bawah dulu baru pindah
   kolom, jadi angkanya berurutan secara alami.
   ==================================================================== */
.kf-chlist {
    display: block !important;
    columns: 2;
    column-gap: 22px;
    padding: 6px 0 !important;
}

.kf-chlist > a {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 2px;
}

@media (max-width: 760px) {
    .kf-chlist { columns: 1; }
}

/* ====================================================================
   2. SIDEBAR PERINGKAT
   Badge sebelumnya memakai .leftseries sebagai acuan sehingga mendarat di
   atas JUDUL. Acuannya dipindah ke thumbnail.
   ==================================================================== */
#sidebar .serieslist.pop li {
    position: relative;
    align-items: flex-start;
}

#sidebar .serieslist.pop .leftseries { position: static !important; }

#sidebar .serieslist.pop .imgseries {
    position: relative;
    flex: 0 0 62px;
    line-height: 0;
}

#sidebar .serieslist.pop .ctr {
    position: absolute !important;
    top: -6px !important;
    left: -6px !important;
    z-index: 2;
}

#sidebar .serieslist.pop .imgseries img {
    width: 62px;
    height: 88px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

#sidebar .serieslist.pop .leftseries h3 {
    margin: 0 0 5px;
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#sidebar .serieslist.pop .leftseries h3 a { color: #ededed; }
#sidebar .serieslist.pop .leftseries h3 a:hover { color: rgb(0, 122, 255); }

#sidebar .serieslist.pop .author {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #8f8f8f;
}

/* ikon hati tanpa angka = data rating memang kosong -> jangan tampilkan */
#sidebar .serieslist.pop .loveviews { display: none; }

/* ====================================================================
   3. TOMBOL SEKUNDER di halaman detail terlihat jelas
   ==================================================================== */
.kf-detail-cta .allproject:not(.utama) {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #d6d6d6;
}

.kf-detail-cta .allproject:not(.utama):hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

/* ====================================================================
   4. META DETAIL — kolom rata, Genres boleh memanjang penuh
   ==================================================================== */
.kf-detail-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.kf-detail-meta > div:last-child { grid-column: 1 / -1; }
.kf-detail-meta dd { white-space: normal; line-height: 1.5; }

@media (max-width: 760px) {
    .kf-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* badge nomor duduk DI DALAM pojok thumbnail, bukan melayang di atasnya */
#sidebar .serieslist.pop .ctr {
    top: 4px !important;
    left: 4px !important;
    width: 22px;
    height: 22px;
    font-size: 11.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .65);
}

/* ====================================================================
   5. HERO: cegah scroll horizontal
   8 slide (7x172 + aktif 668 + gap) = ~1998px, melebihi container 1180
   sehingga halaman punya scrollbar mendatar. Track dikunci dan slide
   jauh disembunyikan; yang tampil cukup aktif +- 2 tetangga.
   ==================================================================== */
.kf-hero, .kf-hero-inner { max-width: 100%; overflow: hidden; }

.kf-hero-track {
    max-width: 100%;
    overflow: hidden;
    flex-wrap: nowrap;
}

.kf-hero-item.is-jauh { display: none; }

/* ====================================================================
   6. BADGE PERINGKAT
   Markupnya berada di dalam .leftseries (bukan .imgseries), jadi acuan
   posisinya memakai <li> lalu digeser ke pojok thumbnail.
   ==================================================================== */
#sidebar .serieslist.pop .ctr {
    top: 16px !important;
    left: 4px !important;
}

/* 3 slide (aktif + 1 tetangga per sisi) harus muat di 1068px:
   668 + 2x160 + 2x18 = 1024 -> aman, panel tidak terpotong */
.kf-hero-item { width: 160px; }
.kf-hero-cover { flex: 0 0 160px; width: 160px; }
.kf-hero-panel { overflow: hidden; }
.kf-hero-sin {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kf-hero-foot { flex-wrap: wrap; }