/* ki-fix.css — override terkendali untuk tema preview komikindovip.
   Dimuat PALING AKHIR. Tidak menyentuh berkas CSS impor, jadi gampang dicabut:
   hapus <link> ki-fix.css di header-persis.php. */

/* ---------------------------------------------------------------
   1. SLOT LOGO TENGAH
   ki-front-style.css mematikan slot ini dengan !important:
     .site-header.bound-item{display:none!important}
     .logos{display:none}
   Dihidupkan lagi dan dijadikan kolom tengah pada baris #main-menu.
   --------------------------------------------------------------- */
#main-menu .bound {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 20px;        /* napas atas-bawah; sebelumnya 0 -> mepet */
    width: 100%;
    min-height: 64px;
    box-sizing: border-box;
}

#main-menu .sorceres.bound-item,
#main-menu .right-menu.bound-item {
    flex: 0 0 auto;
    float: none !important;
}

/* Kolom tengah dipaku ke TITIK TENGAH BARIS, bukan sekadar flex:1.
   Alasannya: lebar nav kiri (366px) dan kotak search kanan (367px) tidak
   pernah persis sama, jadi sisa ruang membuat logo meleset ~38px.
   position:absolute + translateX(-50%) membuat posisinya tidak bergantung
   pada lebar kedua sisi. */
#main-menu .bound { position: relative; }

/* Kotak slot dikunci selebar LOGO. Tanpa ini kotak melar jadi ~380px
   (shrink-to-fit ikut lebar elemen dalamnya), gambar duduk ke sisi kanan
   kotak, dan hasilnya logo meleset ~38px walau kotaknya sendiri center. */
#main-menu .site-header.bound-item {
    display: flex !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);   /* center mendatar DAN tegak */
    margin: 0 !important;               /* tema memberi margin-top:9px -> turun 9px */
    width: 133px;
    max-width: none;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
}

#main-menu .site-branding.logox {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}



/* Rantai lebar dikunci sampai ke <img>. Sebelumnya span.logos hanya 57px
   di dalam kotak 133px, flex memusatkan span itu ((133-57)/2 = 38px), lalu
   <a> meluber ke kanan -- itu sumber meleset 38px, bukan posisi kotaknya. */
#main-menu span.logos {
    display: block !important;
    flex: 0 0 133px;
    width: 133px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

#main-menu .logos a {
    display: block;
    width: 133px;
    line-height: 0;
}

/* ukuran logo: lebar mengikuti acuan, tinggi ikut rasio asli (jangan gepeng) */
#main-menu .logos img {
    width: 133px !important;
    height: auto !important;
    max-width: none !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    display: block;
}

/* wordmark sudah ada di gambar -> teks nama situs tidak dicetak dua kali */
#main-menu .logos .hdl { display: none !important; }

/* ---------------------------------------------------------------
   1c. KOTAK PENCARIAN
   Tema punya gaya search tapi aturannya menyasar `#form2 #s2`, sedangkan
   markup tidak punya id itu -> NOL aturan kena, yang tampil input mentah
   bawaan browser (border 2px inset, radius 0, padding 1px 2px).
   Di sini digayakan langsung ke elemennya.
   --------------------------------------------------------------- */
#main-menu .searchx,
.th .searchx2 {
    float: none !important;
    margin: 0 !important;
    width: 268px;
    max-width: 100%;
}

#main-menu .searchx form,
.th .searchx2 form {
    position: relative;
    display: block;
    margin: 0;
}

#main-menu .searchx input[type="text"],
.th .searchx2 input[type="text"] {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 44px 0 16px;
    border: 0 !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #eee;
    font-family: inherit;
    font-size: 14px;
    line-height: 38px;
    box-shadow: none;
    outline: none;
    box-sizing: border-box;
    transition: background .15s;
}

#main-menu .searchx input[type="text"]::placeholder,
.th .searchx2 input[type="text"]::placeholder { color: #8b8b8b; }

#main-menu .searchx input[type="text"]:focus,
.th .searchx2 input[type="text"]:focus {
    background: rgba(255, 255, 255, .13);
}

#main-menu .searchx button,
.th .searchx2 button {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 38px;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(0, 122, 255);
    font-size: 16px;
    cursor: pointer;
    line-height: 38px;
    transition: opacity .15s;
}

#main-menu .searchx button:hover,
.th .searchx2 button:hover { opacity: .75; }

/* ---------------------------------------------------------------
   1d. BARIS MENU: tiga zona seimbang
   Sisi kiri dan kanan diberi lebar dasar yang SAMA supaya baris terbaca
   simetris dan logo di tengah tidak pernah terdorong.
   --------------------------------------------------------------- */
#main-menu .sorceres.bound-item,
#main-menu .right-menu.bound-item {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
    display: flex;
    align-items: center;
}

#main-menu .sorceres.bound-item { justify-content: flex-start; }
#main-menu .right-menu.bound-item { justify-content: flex-end; }

/* menu kiri: teks + ikon, jarak lega, tanpa pil (pil bikin sesak) */
#main-menu .sorceres ul.menu {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#main-menu .sorceres li.menu-item {
    float: none !important;
    margin: 0;
    display: flex;
    align-items: center;
}

#main-menu .sorceres li.menu-item > a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: #f2f2f2;
    transition: color .15s;
}

#main-menu .sorceres li.menu-item > a:hover { color: rgb(0, 122, 255); background: none; }
#main-menu .sorceres li.menu-item > a i { margin: 0; font-size: 15px; }

/* ---------------------------------------------------------------
   1e. BAND NAV KEDUA
   Dibuat sebagai pita terpisah dengan tone sendiri, isinya chip berlatar
   dengan padding lebar dan gap seragam -- itu yang membuat baris menu
   terbaca rapi, bukan teks telanjang yang menempel satu sama lain.
   --------------------------------------------------------------- */
nav.second-nav:not(.floating-nav) {
    background: #141414;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
}

nav.second-nav:not(.floating-nav) ul.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    list-style: none;
}

nav.second-nav:not(.floating-nav) li.menu-item { float: none !important; margin: 0; }

nav.second-nav:not(.floating-nav) li.menu-item > a {
    display: block;
    padding: 9px 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    color: #e8e8e8;
    font-size: 13.5px;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

nav.second-nav:not(.floating-nav) li.menu-item > a:hover {
    background: rgba(0, 122, 255, .18);
    color: #fff;
}

/* ---------------------------------------------------------------
   1g. RITME SPASI KONTEN
   Perbaikan tepi sebelumnya menol-kan padding/margin bawaan tema tanpa
   menggantinya -> semua elemen menempel. Di sini jaraknya dikembalikan
   dengan skala tetap (8 / 16 / 20 / 24).
   --------------------------------------------------------------- */
#wrap { padding-top: 24px !important; padding-bottom: 32px; }

.whites {
    padding: 0 !important;
    margin: 0 0 24px !important;
}

.widget-body { padding: 0 !important; }

.releases, .section-head, .whites > h2, .widget-title {
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 16px;
    line-height: 1.2;
}

/* grid kartu: dari float ke CSS grid -> gutter rata, tinggi baris seragam */
.listupd {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 16px;
    float: none !important;
}

.listupd .animepost {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    display: block;
}

.listupd .animepost .animposx { margin: 0 !important; }

@media (max-width: 1180px) { .listupd { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .listupd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }

/* sidebar: kartu widget punya padding sendiri */
#sidebar .senc .sencs { margin-bottom: 20px; }
#sidebar .serieslist.pop ul { margin: 0; padding: 0; list-style: none; }
#sidebar .serieslist.pop li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
#sidebar .serieslist.pop li:last-child { border-bottom: 0; }
#sidebar .serieslist.pop .imgseries { flex: 0 0 62px; }
#sidebar .serieslist.pop .imgseries img { width: 62px; height: 88px; object-fit: cover; border-radius: 4px; display: block; }
#sidebar .serieslist.pop .leftseries { flex: 1 1 auto; min-width: 0; }
#sidebar .serieslist.pop .leftseries h3 { margin: 0 0 4px; font-size: 13.5px; line-height: 1.35; }
#sidebar .serieslist.pop .leftseries .author { display: block; font-size: 12px; color: #9a9a9a; }

/* ---------------------------------------------------------------
   1f. KARTU TINGGI SERAGAM
   Judul 1 baris vs 2 baris membuat tinggi kartu berbeda, sehingga baris
   "Chapter N + waktu" tidak pernah lurus antar kartu dan grid terlihat
   bergerigi. Kartu dijadikan kolom flex: judul dikunci 2 baris, blok
   chapter didorong ke dasar kartu.
   --------------------------------------------------------------- */
.listupd .animepost .animposx {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.listupd .animepost .bigors {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    padding-top: 8px;
}

.listupd .animepost .bigors .tt { margin: 0; }

.listupd .animepost .bigors .tt h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    min-height: calc(1.35em * 2);     /* selalu setara 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listupd .animepost .bigors .adds { margin-top: auto; }   /* dorong ke dasar */

.listupd .animepost .bigors .lsch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.listupd .animepost .bigors .lsch .datech { color: #9a9a9a; white-space: nowrap; }

/* cover rasio tetap -> baris judul selalu mulai di ketinggian yang sama */
.listupd .animepost .limit {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 6px;
}

.listupd .animepost .limit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------------
   2. DUA KOLOM: konten + sidebar (hilangkan area kosong)
   Tema mengharapkan .postbody{float:left;width:74%} berpasangan dengan
   #sidebar{float:right;width:250px}, tetapi index-persis.php membungkus
   grid dengan .whites/.listupd dan TIDAK PERNAH memakai .postbody.
   Akibatnya kolom kiri melebar 100% dan #sidebar jatuh ke bawah grid,
   menyisakan blok kosong selebar ~960px di kiri.
   #content dan #sidebar bersaudara di dalam #wrap, jadi #wrap dijadikan
   baris flex -- tanpa menyentuh markup sama sekali.
   --------------------------------------------------------------- */
#main-menu .centernav.navs,
nav.second-nav .centernav.navs {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

#wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#content {
    flex: 1 1 auto;
    min-width: 0;            /* tanpa ini grid memaksa kolom melebar */
    padding: 0 !important;
    margin-top: 0;
}

#sidebar {
    flex: 0 0 300px;
    width: 300px !important;
    float: none !important;
    margin-top: 0;
}

/* batas lebar sekarang dipegang #wrap, bukan tiap section di dalamnya */
.postbody, .whites {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

.widget-body, .listupd {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* di bawah 980px sidebar turun ke bawah konten, bukan menyempit */
@media (max-width: 980px) {
    #wrap { flex-direction: column; }
    #sidebar { flex: 1 1 auto; width: 100% !important; }
}

/* ---------------------------------------------------------------
   3. MOBILE
   Topbar mobile (.th) memuat salinan logo yang sama; samakan tingginya
   dan jaga agar tidak menabrak kotak pencarian.
   --------------------------------------------------------------- */
@media (max-width: 860px) {
    #main-menu .bound { flex-wrap: wrap; gap: 8px; }
    #main-menu .site-header.bound-item { width: 118px; }
    #main-menu span.logos { flex: 0 0 118px; width: 118px !important; }
    #main-menu .logos a { width: 118px; }
    #main-menu .logos img { width: 118px !important; }
}

.th .shme.logo-mobile { width: auto; float: left; padding: 10px 0; }
.th .shme.logo-mobile img { height: 30px; width: auto; display: block; }