/* Halaman komik (rombak 2026-11-07) */
.dt-hero { position: relative; display: grid; grid-template-columns: 240px 1fr; gap: 28px; padding: 24px; border-radius: 22px; overflow: hidden; isolation: isolate; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); }
.dt-bg { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(40px) saturate(1.2); opacity: .28; transform: scale(1.1); }
.dt-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,13,18,0.2), rgba(11,13,18,0.85)); }
.dt-cover img, .dt-cover .ph { width: 100%; height: auto; aspect-ratio: 3 / 4.2; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 20px 50px rgba(0,0,0,.55); background: #1a1e27; }
.dt-info { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dt-info h1 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.4px; }
.dt-alt { margin: -6px 0 0; color: var(--muted); font-size: 13.5px; }
.dt-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.dt-facts > div { padding: 7px 12px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); }
.dt-facts dt { font-size: 11px; color: var(--muted); }
.dt-facts dd { margin: 0; font-size: 14px; font-weight: 700; }
.dt-facts dd.is-on { color: #7fd49b; }
.dt-facts dd.is-done { color: #8ab4ff; }
.dt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dt-actions .up-btn, .dt-actions .up-ghost { padding: 11px 20px; font-size: 14.5px; }
.dt-actions .dt-main { min-width: 200px; }
.dt-actions .bookmark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.dt-actions .bookmark.marked { color: #ffb380; border-color: rgba(255,122,61,0.5); }
.dt-actions .bookmark.marked svg { fill: rgba(255,122,61,0.4); }
.dt-syn { margin: 22px 0 0; max-width: 820px; }
.dt-syn h2, .chaplist h2, .recs h2 { font-size: 18px; margin: 0 0 8px; }
.dt-desc { position: relative; max-height: 7.6em; overflow: hidden; font-size: 15px; line-height: 1.6; color: #d5dae3; }
.dt-desc p { margin: 0; white-space: pre-line; }
.dt-desc:not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(transparent, var(--bg)); }
.dt-desc.open { max-height: none; }
.dt-desc.open::after { display: none; }
.dt-desc.muted { max-height: none; }
.dt-desc.muted::after { display: none; }
.dt-more { margin-top: 6px; background: none; border: 0; color: #ffb380; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 4px 0; }
.ch-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.ch-tools .chsearch { margin: 0; }
.chap { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15; min-height: 52px; }
.chap b { font-size: 14px; }
.chap small { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.chap .ch-new { font-style: normal; font-size: 10px; font-weight: 800; color: #1a0d05; background: var(--accent-grad, #ff7a3d); padding: 0 6px; border-radius: 999px; }
.chap { position: relative; }
.chap.read { opacity: .5; text-decoration: none !important; }
.chap.read b, .chap.read small { text-decoration: none !important; }
.chap.read::after { content: "✓"; position: absolute; top: 3px; right: 6px; font-size: 10px; font-weight: 800; color: #7fd49b; }
.chap.last { opacity: 1; box-shadow: inset 0 0 0 2px #ff8a4c; }
.chap.pulse { animation: chPulse 1.2s ease; }
@keyframes chPulse { 0%, 100% { transform: none; } 30% { transform: scale(1.08); } }
@media (max-width: 720px) {
  .dt-hero { grid-template-columns: 112px 1fr; gap: 14px; padding: 14px; border-radius: 18px; }
  .dt-info { gap: 8px; }
  .dt-info h1 { font-size: 19px; }
  .dt-alt { font-size: 12px; margin-top: -4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dt-facts { gap: 2px 0; font-size: 12.5px; }
  .dt-facts > div { padding: 0; border: 0; background: none; border-radius: 0; }
  .dt-facts > div + div::before { content: "·"; margin: 0 6px; color: var(--muted); }
  .dt-facts > div { display: inline-flex; }
  .dt-facts dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dt-facts dd { font-size: 12.5px; font-weight: 600; color: #c9d0db; }
  .dt-hero .genre-tags, .dt-actions { grid-column: 1 / -1; }
  .dt-info { display: contents; }
  .dt-info > h1, .dt-info > .dt-alt, .dt-info > .dt-facts { grid-column: 2; }
  .dt-cover { grid-row: 1 / span 3; align-self: start; }
  .dt-actions .dt-main { flex: 1 1 100%; min-width: 0; }
  .dt-actions .dt-latest, .dt-actions .bookmark { flex: 1 1 0; }
  .ch-tools { margin-left: 0; width: 100%; }
  .ch-tools .chsearch { flex: 1 1 100%; }
  .chap { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .chap.pulse { animation: none; } }
.m-only { display: none; }
@media (max-width: 720px) { .m-only { display: inline; } }