/* ===============================
   DETAIL MANGA STYLES (theme-driven)
   =============================== */

/* Container utama */
.detail-manga { padding: 10px 0; }

/* Gambar cover besar */
.detail-manga .thumb-large{
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Judul utama mengikuti aksen */
.detail-title{
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--accent);
}

/* Deskripsi */
.detail-desc{
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 12px;
  color: var(--muted);
}

/* ===============================
   GENRE TAG
   =============================== */

.detail-genres{ margin: 10px 0 15px; }

.genre-tag{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .85em;
  margin: 0 6px 6px 0;
  background: var(--chip);
  color: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
}

/* ===============================
   TAB MENU (List Chapter / Judul Serupa)
   =============================== */

.tab-menu{
  display: flex;
  gap: 10px;
  margin: 20px 0 10px;
}

.tab-btn{
  flex: 1;
  padding: 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, color .15s ease;
}
.tab-btn:hover{ filter: brightness(1.05); }

.tab-btn.active,
.tab-btn[aria-selected="true"]{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent); /* konsisten dengan tema */
}

/* ===============================
   CHAPTER LIST
   =============================== */

.chapter-list{ list-style: none; padding: 0; margin: 0; }

/* Baris judul (jika masih dipakai di layout lama) */
.chapter-title{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  transition: background .15s ease, color .15s ease;
}
.chapter-title:hover{ background: rgba(0,0,0,.06); }

/* Versi baris baru: kiri judul, kanan tombol Baca */
.chapter-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: default; /* biar tidak misleading: yang klik itu tombol Baca */
}
.chapter-item .chapter-title{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  border: 0;
  padding: 0;
}

/* Tombol tindakan */
.read-btn,
.sort-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent) !important; /* pakai on-accent, bukan putih fix */
  cursor: pointer;
  transition: filter .15s ease;
}
.read-btn:hover,
.sort-btn:hover{ filter: brightness(1.05); }

.read-btn:focus-visible,
.sort-btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===============================
   CHAPTER TOOLBAR (Search + Sort)
   =============================== */

.chapter-toolbar{
  display: flex;
  gap: 10px;
  margin: 12px 0 18px;
  padding: 0 10px;
}

#chapter-search{
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 14px;
}
#chapter-search::placeholder{ color: var(--muted); }
#chapter-search:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ===============================
   RELATED MANGA – VERTICAL LIST
   =============================== */

.related-vertical-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.related-vertical-item{
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  gap: 10px;
  cursor: pointer;
  transition: filter .15s ease;
}
.related-vertical-item:hover{ filter: brightness(1.03); }

.related-vertical-item img{
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.related-info{ display: flex; flex-direction: column; justify-content: center; }

.related-title{
  font-weight: 700;
  font-size: .95em;
  color: var(--text);
}

.related-chapter{ font-size: .85em; color: var(--muted); }

/* Meta */
.chapter-meta{
  margin-top: 12px;
  margin-bottom: 20px;
  font-size: .95rem;
  color: var(--muted);
  font-weight: 500;
}

/* Inputs di section detail */
.detail-manga input[type="search"],
.detail-manga input[type="number"],
.detail-manga select{
  height: 40px;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0 12px;
}
.detail-manga input::placeholder{ color: var(--muted); }

/* ===============================
   Aksesibilitas & preferensi motion
   =============================== */

@media (prefers-reduced-motion: reduce){
  .tab-btn,
  .read-btn,
  .sort-btn,
  .chapter-title,
  .related-vertical-item{
    transition: none !important;
  }
}