.search input{
  padding:8px 10px;
  border:none;
  border-radius:4px;
}

/* 1 BARIS */
.truncate{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.card{
  background:var(--card);
  display:flex;
  padding:10px;
  border-radius:6px;
}
.card img{
  width:80px;
  height:110px;
  object-fit:cover;
  border-radius:4px;
}
.card-info{
  margin-left:10px;
}
.card-info span{
  font-size:13px;
  color:var(--muted);
}

.toggle{
  cursor:pointer;
  opacity:.8;
}
.toggle:hover{opacity:1}

/* ===== SEARCH RESULT PAGE ===== */
.search-title{
  font-size:18px;
  color:#4ea1ff;
  margin-bottom:15px;
}

.search-title span{
  color:#4ea1ff;
}

.search-grid{
  grid-template-columns:repeat(7,1fr);
}

/* badge MANHWA / MANGA */
.type-badge{
  position:absolute;
  top:6px;
  left:6px;
  background:#e53935;
  color:#fff;
  font-size:10px;
  padding:2px 6px;
  border-radius:3px;
}

/* rating */
.comic-rating{
  font-size:12px;
  margin-top:4px;
  color:#ffd54f;
}

/* responsive */
@media(max-width:1200px){
  .search-grid{ grid-template-columns:repeat(5,1fr); }
}
@media(max-width:768px){
  .search-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:480px){
  .search-grid{ grid-template-columns:repeat(2,1fr); }
}


/* ===== GENRE BAR ===== */
.genre-bar{
  background:#12042c;
  margin-top:10px;
}

.genre-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:10px;
}

/* ITEM GENRE */
.genre-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:90px;
  padding:8px 12px;
  background:#1f0b45;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-size:13px;
  transition:background .2s ease;
  white-space:nowrap;
}

.genre-item:hover{
  background:#6a00ff;
}

/* TEXT */
.genre-name{
  font-weight:1000;
  font-size:11px;
  line-height:1.8;
}

.genre-total{
  font-size:11px;
  opacity:.7;
}

/* ===== DETAIL PAGE ===== */
.detail-hero{
  height:350px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.detail-hero .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

.detail-wrap{
  max-width:1200px;
  margin:-180px auto 40px;
  padding:0 5px;
  position:relative;
}

.detail-header{
  display:flex;
  gap:20px;
  background:#1b1b2b;
  padding:20px;
  border-radius:8px;
}

.detail-cover img{
  width:200px;
  border-radius:6px;
}

.detail-info h1{
  font-size:22px;
}
.alt-title{
  color:#aaa;
  font-size:13px;
  margin-bottom:10px;
}

/* ===== FORCE TEXT PUTIH DI DETAIL KOMIK ===== */
.detail-wrap,
.detail-wrap h1,
.detail-wrap h2,
.detail-wrap h3,
.detail-wrap p,
.detail-wrap li,
.detail-wrap a,
.detail-wrap span,
.detail-wrap small {
  color: #fff;
}

.genre-list a{
  display:inline-block;
  background:#2a2a40;
  padding:4px 8px;
  border-radius:4px;
  font-size:12px;
  margin:2px;
}

.meta{
  margin-top:10px;
  font-size:13px;
  color:#ccc;
}
.meta li{ margin-bottom:4px }

.detail-rate{
  margin-left:auto;
  text-align:center;
}
.score{
  font-size:24px;
  font-weight:bold;
}
.btn-bookmark{
  margin-top:10px;
  background:#3b6ef5;
  border:none;
  padding:8px 12px;
  border-radius:6px;
  color:#fff;
  cursor:pointer;
}

.detail-section{
  margin-top:25px;
  background:#1b1b2b;
  padding:15px;
  border-radius:6px;
}
.detail-section h3{
  margin-bottom:10px;
}

.chapter-list{
  max-height:260px;
  overflow:auto;
  border-top:1px solid #333;
}
.chapter-list a{
  display:flex;
  justify-content:space-between;
  padding:8px;
  border-bottom:1px solid #333;
  font-size:13px;
}
.chapter-list a:hover{
  background:#26263d;
}

/* =========================
   MOBILE DETAIL – TITLE SEJAJAR COVER
========================= */
@media(max-width:768px){

  .detail-header{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  /* blok cover + info */
  .detail-cover,
  .detail-info{
    display:block;
  }

  .detail-header > .detail-cover,
  .detail-header > .detail-info{
    display:inline-block;
  }

  /* cover + info sejajar */
  .detail-header{
    flex-direction:row;
    align-items:flex-start;
  }

  .detail-cover img{
    width:110px;
    flex-shrink:0;
  }

  .detail-info{
    margin-left:12px;
    flex:1;
  }

  /* title tetap di samping cover */
  .detail-info h1{
    font-size:17px;
    line-height:1.3;
    margin-bottom:4px;
  }

  .alt-title{
    font-size:12px;
    margin-bottom:6px;
  }

  .genre-list{
    margin-bottom:6px;
  }

  /* meta ringkas */
  .meta{
    font-size:12px;
  }

  /* rating & bookmark TURUN KE BAWAH */
  .detail-rate{
    width:100%;
    margin-top:10px;
  }
}


/* ===== POPULAR ===== */
.popular{
  margin-top:15px;
}
.section-title{
  background:#12042c;
  color:#fff;
  padding:8px 12px;
  font-weight:bold;
  font-size:14px;
  border-radius:4px;
  display:inline-block;
  margin-bottom:10px;
}

.popular-scroll{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:10px;
}

.pop-card{
  width:150px;
  flex-shrink:0;
}

.pop-card img{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:6px;
}

.pop-title{
  font-size:13px;
  margin-top:6px;
  line-height:1.3;
}

.pop-rating{
  font-size:12px;
  color:#f5c518;
}
.pop-rating span{
  color:#999;
  margin-left:4px;
}


/* BOX */
.box{
  background:var(--card);
  padding:12px;
  border-radius:6px;
  margin-bottom:15px;
}
.box-title{
  font-weight:bold;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
}
.view-all{
  font-size:12px;
  color:#6a00ff;
}

/* PROJECT UPDATE (FIX) */

.update-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.update-card{
  min-width:0; /* ⬅️ WAJIB BIAR TEKS GA NEMBUS */
}

.update-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:6px;
}

/* TITLE MAX 2 BARIS */
.update-title{
  font-size:13px;
  margin:5px 0;
  line-height:1.4;

  display:-webkit-box;
  -webkit-line-clamp:2;        /* ⬅️ BATAS 2 BARIS */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* META */
.update-chapter a{
  font-size:12px;
  color:#6a00ff;
  margin-right:6px;
}
.update-time{
  font-size:11px;
  color:#888;
}

/* RESPONSIVE (OPSIONAL, TAPI AMAN) */
@media(max-width:1024px){
  .update-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px){
  .update-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
  .update-grid{ grid-template-columns:1fr; }
}

/* SIDEBAR */
.tab{
  display:flex;
  gap:10px;
  font-size:12px;
  margin-bottom:10px;
}
.tab span{
  cursor:pointer;
  padding:4px 10px;
  border-radius:4px;
  background:#eee;
}
.tab .active{
  background:#6a00ff;
  color:#fff;
}

.rank-list li{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}
.rank{
  font-weight:bold;
}
.rank-list img{
  width:45px;
  height:60px;
  object-fit:cover;
  border-radius:4px;
}
.stars{
  font-size:12px;
  color:#f5c518;
}

.new-serial{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}
.new-serial img{
  width:50px;
  height:70px;
  object-fit:cover;
  border-radius:4px;
}

/* ===== RILISAN TERBARU (FIX) ===== */

.release-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.release-card{
  min-width:0;          /* ⬅️ INI KUNCI UTAMA */
}

.release-card img{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:6px;
}

/* TITLE FIX */
.release-title a{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
  line-height:1.3;
}

/* RESPONSIVE */
@media(max-width:1024px){
  .release-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:640px){
  .release-grid{ grid-template-columns:repeat(2,1fr); }
}


/* ===== FILTER BAR ===== */
.filter-bar{
  display:flex;
  gap:10px;
  margin-bottom:15px;
}
.filter-bar select{
  padding:6px 10px;
  border-radius:6px;
  border:1px solid #ddd;
  font-size:13px;
}

/* ===== GRID KOMIK ===== */
.comic-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.comic-card{
  background:var(--card);
  border-radius:6px;
  overflow:hidden;
  transition:.2s;
}
.comic-card:hover{
  transform:translateY(-3px);
}

.comic-thumb{
  position:relative;   /* ⬅️ INI KUNCI UTAMA */
  overflow:hidden;
}


.comic-thumb img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.comic-info{
  padding:8px;
}
.comic-title{
  font-size:13px;
  font-weight:bold;
  line-height:1.3;
}
.comic-meta{
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
}

/* ===== PAGINATION ===== */
.pagination{
  margin:20px 0;
  display:flex;
  gap:6px;
  justify-content:center;
}
.pagination a,
.pagination span{
  padding:6px 10px;
  border-radius:4px;
  font-size:13px;
  background:#eee;
}
.pagination a.active{
  background:#6a00ff;
  color:#fff;
}

/* =====================
   READER PAGE
===================== */

.reader-wrap{
  max-width:900px;
  margin:0 auto 40px;
  padding:0 12px;
  color:#fff;
  background-color:#1b1b2b;
}

.reader-title{
  text-align:center;
  font-size:18px;
  margin:15px 0;
}

.reader-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:12px 0;
  gap:10px;
  flex-wrap:wrap;
}

.chapter-select{
  background:#1b1b2b;
  color:#fff;
  border:1px solid #333;
  padding:6px 10px;
  border-radius:4px;
}

.nav-btn{
  display:flex;
  gap:8px;
}

.btn{
  background:#3b6ef5;
  color:#fff;
  padding:6px 12px;
  border-radius:4px;
  font-size:13px;
}

.btn.prev{ background:#444; }

/* IMAGE */
.reader-content img{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* MOBILE */
@media(max-width:768px){
  .reader-title{
    font-size:16px;
  }
  .reader-nav{
    justify-content:center;
  }
}


/* RESPONSIVE */
@media(max-width:1024px){
  .comic-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:640px){
  .comic-grid{ grid-template-columns:repeat(2,1fr); }
  .filter-bar{ flex-direction:column; }
}


/* RESPONSIVE */
@media(max-width:1024px){
  .release-grid{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:640px){
  .release-grid{
    grid-template-columns:repeat(2,1fr);
  }
}


/* MOBILE */
@media(max-width:768px){
  .update-grid{ grid-template-columns:repeat(2,1fr) }
}


@media(max-width:768px){
  .main{flex-direction:column}
  .grid{grid-template-columns:repeat(2,1fr)}
}