:root{
  --bg:#0f1115;
  --bg-soft:#171a21;
  --card:#1b1f27;
  --card-hover:#222733;
  --line:#2a2f3a;
  --text:#e7eaf0;
  --muted:#99a2b2;
  --accent:#ff4757;
  --accent-2:#5b8cff;
  --star:#ffb400;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
}
:root[data-theme="light"]{
  --bg:#f5f6fa;
  --bg-soft:#ffffff;
  --card:#ffffff;
  --card-hover:#f0f2f7;
  --line:#e4e7ee;
  --text:#1a1d24;
  --muted:#6b7280;
  --shadow:0 10px 30px rgba(20,30,60,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{width:min(1200px,92%);margin-inline:auto}
.muted{color:var(--muted)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 85%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand-mark{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),#ff7a59);
  color:#fff;font-size:20px;font-weight:700;
  box-shadow:var(--shadow);
}
.brand-name{font-size:20px;font-weight:600;letter-spacing:.3px}
.brand-name strong{color:var(--accent)}

.search{
  flex:1;display:flex;align-items:center;
  background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:4px 4px 4px 16px;
  max-width:560px;margin-inline:auto;
}
.search input{
  flex:1;border:0;background:transparent;color:var(--text);
  font-size:15px;outline:none;padding:8px 0;
}
.search input::placeholder{color:var(--muted)}
.search button{
  display:grid;place-items:center;
  width:40px;height:40px;border:0;border-radius:999px;
  background:var(--accent);color:#fff;cursor:pointer;
  transition:transform .15s;
}
.search button:hover{transform:scale(1.05)}

.theme-toggle{
  display:grid;place-items:center;flex-shrink:0;
  width:42px;height:42px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
  color:var(--text);cursor:pointer;transition:background .15s;
}
.theme-toggle:hover{background:var(--card-hover)}

/* Filters */
.filters{
  display:flex;gap:10px;padding:12px 0 16px;
  overflow-x:auto;scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);
  color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.chip:hover{background:var(--card-hover);color:var(--text)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Result head */
.result-head{margin:28px 0 18px}
.result-head h1{margin:0;font-size:26px;font-weight:700}
.result-head p{margin:4px 0 0;font-size:14px}

/* Grid */
.grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  min-height:200px;
}
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;
  transition:transform .18s, background .18s, box-shadow .18s;
  animation:fade .35s ease both;
}
.card:hover{transform:translateY(-4px);background:var(--card-hover);box-shadow:var(--shadow)}
.card-cover{position:relative;aspect-ratio:2/3;background:var(--bg-soft);overflow:hidden}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.card-score{
  position:absolute;top:8px;left:8px;
  display:flex;align-items:center;gap:4px;
  background:rgba(0,0,0,.7);color:#fff;
  padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;
}
.card-score svg{color:var(--star)}
.card-rank{
  position:absolute;top:8px;right:8px;
  background:var(--accent);color:#fff;
  padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;
}
.card-body{padding:12px;display:flex;flex-direction:column;gap:6px}
.card-title{
  font-size:14px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-meta{font-size:12px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.card-meta .dot{opacity:.5}

/* Status / skeleton */
.status{text-align:center;padding:40px 0;color:var(--muted);font-size:15px}
.skeleton{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.skeleton .sk-cover{aspect-ratio:2/3;background:linear-gradient(90deg,var(--card) 25%,var(--card-hover) 37%,var(--card) 63%);background-size:400% 100%;animation:shimmer 1.4s infinite}
.skeleton .sk-line{height:12px;margin:12px;border-radius:6px;background:var(--card-hover)}
.skeleton .sk-line.short{width:60%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Pager */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:32px 0}
.pager[hidden]{display:none}
.btn{
  padding:10px 18px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;
  transition:background .15s;
}
.btn:hover:not(:disabled){background:var(--card-hover)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:24px 0;color:var(--muted);font-size:13px}
.site-footer a{color:var(--accent-2)}

/* Modal */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.modal-card{
  position:relative;z-index:1;
  width:min(820px,100%);max-height:90vh;overflow:auto;
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);
  animation:fade .25s ease both;
}
.modal-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:36px;height:36px;border-radius:10px;border:0;
  background:rgba(0,0,0,.5);color:#fff;font-size:22px;cursor:pointer;line-height:1;
}
.modal-body{padding:0}
.m-hero{position:relative;display:flex;gap:20px;padding:24px;background:var(--card)}
.m-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.12;filter:blur(2px)}
.m-cover{position:relative;flex-shrink:0;width:150px;aspect-ratio:2/3;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.m-cover img{width:100%;height:100%;object-fit:cover}
.m-info{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.m-info h2{margin:0;font-size:22px;line-height:1.25}
.m-sub{color:var(--muted);font-size:14px}
.m-stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.m-stat{display:flex;flex-direction:column}
.m-stat b{font-size:18px}
.m-stat span{font-size:12px;color:var(--muted)}
.m-genres{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.m-genre{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted)}
.m-section{padding:20px 24px;border-top:1px solid var(--line)}
.m-section h3{margin:0 0 8px;font-size:15px}
.m-synopsis{color:var(--text);font-size:14px;line-height:1.7;white-space:pre-wrap}
.m-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:10px 16px;border-radius:10px;background:var(--accent-2);color:#fff;text-decoration:none;font-size:14px;font-weight:500}

@media(max-width:620px){
  .brand-name{display:none}
  .result-head h1{font-size:22px}
  .m-hero{flex-direction:column;align-items:center;text-align:center}
  .m-info{align-items:center}
  .m-genres,.m-stats{justify-content:center}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
}

/* ============ Reader/Detail additions (v10) ============ */
#view{min-height:60vh}
a.card{text-decoration:none;color:inherit}
.global-err{background:#7f1d1d;color:#fff;padding:10px 16px;text-align:center;font-size:14px}

.card-badge{
  position:absolute;bottom:8px;left:8px;
  background:rgba(0,0,0,.72);color:#fff;
  padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;
}

.back{display:inline-block;margin:18px 0 6px;color:var(--accent-2);text-decoration:none;font-size:14px}
.back:hover{text-decoration:underline}

/* Detail */
.detail{display:flex;gap:24px;margin:10px 0 8px}
.detail-cover{flex-shrink:0;width:210px;max-width:38vw}
.detail-cover img{width:100%;border-radius:14px;box-shadow:var(--shadow);display:block}
.detail-info{min-width:0;display:flex;flex-direction:column;gap:10px}
.detail-info h1{margin:0;font-size:26px;line-height:1.2}
.detail-info .alt{margin:0;font-size:14px}
.detail-meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:12px;padding:4px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--muted)}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;padding:4px 10px;border-radius:8px;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted)}
.btn-read{
  align-self:flex-start;margin-top:8px;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;text-decoration:none;
  padding:12px 22px;border-radius:12px;font-weight:600;font-size:15px;
  transition:transform .15s;
}
.btn-read:hover{transform:translateY(-2px)}

.synopsis{margin:28px 0}
.synopsis h2,.chapters h2{font-size:18px;margin:0 0 12px}
.synopsis p{color:var(--text);line-height:1.7;font-size:14px;white-space:pre-wrap}

/* Chapter list */
.chapters{margin:28px 0 40px}
.chapter-list{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow:auto;padding-right:4px}
.chapter-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);
  text-decoration:none;color:var(--text);font-size:14px;transition:background .15s;
}
.chapter-row:hover{background:var(--card-hover)}
.ch-num{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-meta{flex-shrink:0;font-size:12px;color:var(--muted)}

/* Reader */
.reader-wrap{max-width:900px;margin-inline:auto;padding:0 10px 60px}
.reader-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:6px}
.reader-title{font-size:15px;font-weight:600;color:var(--text)}
.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0}
.reader-nav .btn{flex:1;text-align:center;text-decoration:none;color:var(--text)}
.reader-nav .btn-list{flex:1.4}
.reader-nav .btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.pages{display:flex;flex-direction:column;align-items:center;gap:2px;background:#000;border-radius:8px;overflow:hidden}
.pages .page{width:100%;height:auto;display:block}

@media(max-width:620px){
  .detail{gap:16px}
  .detail-cover{width:130px}
  .detail-info h1{font-size:20px}
  .reader-title{font-size:13px;width:100%}
}

/* ============ Language + Coming Soon (v11) ============ */
.lang-select{
  flex-shrink:0;height:42px;padding:0 10px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  font-size:14px;font-weight:600;cursor:pointer;
}
.pill-soon{background:#854d0e;border-color:#a16207;color:#fde68a}
.soon-box{
  margin-top:8px;padding:14px 16px;border-radius:12px;
  background:var(--bg-soft);border:1px solid var(--line);font-size:14px;color:var(--muted);
}
.soon-box strong{color:var(--text)}
.soon-langs{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lang-pick{
  padding:6px 14px;border-radius:999px;cursor:pointer;
  background:var(--accent);border:0;color:#fff;font-size:13px;font-weight:600;
}
.lang-pick:hover{filter:brightness(1.08)}
@media(max-width:620px){ .lang-select{height:38px;font-size:13px} }

/* ============ v12: toolbar, shelf, favorites, actions ============ */
.fav-link{
  flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);color:var(--accent);font-size:18px;text-decoration:none;
}
.fav-link:hover{background:var(--card-hover)}

.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 4px}
.toolbar .filters{padding:0;margin:0}
.genre-select{
  height:38px;padding:0 12px;border-radius:999px;margin-left:auto;
  background:var(--card);border:1px solid var(--line);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;
}

/* Shelf (Lanjut Baca) */
.shelf{margin:22px 0 6px}
.shelf-title{font-size:18px;margin:0 0 12px}
.row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.row::-webkit-scrollbar{height:6px}
.row::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rcard{flex:0 0 120px;text-decoration:none;color:inherit}
.rcard-cover{aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--bg-soft);border:1px solid var(--line)}
.rcard-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rcard-title{font-size:12px;margin-top:6px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard-sub{font-size:11px;color:var(--accent-2)}

.card-fav{position:absolute;top:8px;right:8px;font-size:14px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* Detail actions */
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.btn-fav{
  padding:12px 18px;border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--text);transition:all .15s;
}
.btn-fav:hover{background:var(--card-hover)}
.btn-fav.on{background:#3b1113;border-color:var(--accent);color:#ff8d98}

/* Chapter read state */
.chapter-row.read{opacity:.62}
.chapter-row.read .ch-meta{color:var(--accent-2)}

@media(max-width:620px){ .genre-select{margin-left:0;width:100%} .toolbar{gap:8px} }

/* ============ v13: reader kontinu + mobile polish ============ */
.pages{display:flex;flex-direction:column;align-items:stretch;gap:0;background:#0b0b0d;border-radius:8px;overflow:hidden}
.ch-block{display:flex;flex-direction:column;align-items:center;width:100%}
.ch-block .page{width:100%;height:auto;display:block}
.chapter-sep{
  width:100%;text-align:center;padding:14px 10px;margin:0;
  background:var(--card);color:var(--text);font-weight:700;font-size:14px;
  border-top:2px solid var(--accent);
}
.ch-block:first-child .chapter-sep{border-top:0}
.sentinel{height:4px}
.reader-end{text-align:center;padding:30px 10px;color:var(--muted);font-size:15px;line-height:2}
.reader-end .btn{display:inline-block;margin-top:6px;text-decoration:none;color:var(--text)}

/* ---- Mobile polish ---- */
@media(max-width:640px){
  .header-inner{flex-wrap:wrap;gap:8px;padding:10px 0}
  .brand{order:1}
  .fav-link{order:2;margin-left:auto;width:38px;height:38px}
  .lang-select{order:3;height:38px}
  .theme-toggle{order:4;width:38px;height:38px}
  .search{order:5;flex-basis:100%;max-width:none;margin:2px 0 0}
  .brand-mark{width:36px;height:36px;font-size:18px}

  .wrap{width:92%}
  .result-head h1{font-size:19px}
  .shelf-title,.synopsis h2,.chapters h2{font-size:16px}
  .toolbar{gap:8px}
  .toolbar .filters{width:100%}
  .chip{padding:7px 13px;font-size:13px}
  .rcard{flex-basis:100px}

  .detail{flex-direction:row}
  .detail-cover{width:120px}
  .detail-info h1{font-size:18px}
  .detail-actions{width:100%}
  .btn-read,.btn-fav{flex:1;text-align:center;justify-content:center;padding:11px 10px;font-size:14px}
  .chapter-list{max-height:none}

  .reader-wrap{padding:0 0 60px}
  .reader-head{padding:8px 12px 0}
  .pages{border-radius:0}
  .reader-nav{padding:12px}
  .chapter-sep{font-size:13px;padding:11px 8px}
}

/* ============ v14: reader uniform + chapter dropdown ============ */
.reader-wrap{max-width:850px}
#pagesC{gap:0;background:#111;align-items:center;overflow:hidden}
#pagesC .ch-block{gap:0;width:100%;max-width:100%}
#pagesC .ch-block .page{
  width:100%;max-width:100%;height:auto;display:block;margin:0 auto;
  background:#15181f; /* placeholder saat gambar sedang dimuat (kurangi bidang hitam) */
}
.chapter-picker{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chapter-select-full{
  flex:1;min-width:220px;padding:13px 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  font-size:14px;font-weight:500;cursor:pointer;
}
.chapter-picker .btn{text-decoration:none;color:var(--text);white-space:nowrap}
@media(max-width:640px){ .chapter-picker .btn{flex:1;text-align:center} }

/* ============ v15: filter labels (jelaskan 2 dimensi filter) ============ */
.toolbar{flex-direction:column;align-items:stretch;gap:12px}
.filter-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-label{
  flex-shrink:0;width:66px;font-size:12px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted);
}
.filter-group .filters{flex:1;min-width:0}
.filter-group .genre-select{margin-left:0;flex:1}
@media(max-width:640px){
  .filter-group{align-items:flex-start;flex-direction:column;gap:6px}
  .filter-label{width:auto}
  .filter-group .filters{width:100%}
}

/* ============ v16: satu baris filter ============ */
.toolbar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
#catBar{flex:1;min-width:0}
.toolbar .genre-select{margin-left:auto;flex:0 0 auto}
@media(max-width:640px){
  .toolbar{flex-direction:column;align-items:stretch}
  #catBar{width:100%}
  .toolbar .genre-select{margin-left:0;width:100%}
}

/* ============ v17: custom genre dropdown ============ */
.genre-dd{position:relative;flex:0 0 auto}
.genre-dd-btn{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  border-radius:999px;background:var(--card);border:1px solid var(--line);
  color:var(--text);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.genre-dd-btn:hover{background:var(--card-hover)}
.genre-dd-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:50;
  width:230px;max-height:340px;overflow-y:auto;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:6px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
}
.genre-dd-menu[hidden]{display:none}
.genre-item{
  text-align:left;padding:9px 12px;border-radius:9px;border:0;cursor:pointer;
  background:transparent;color:var(--text);font-size:13px;transition:background .12s;
}
.genre-item:hover{background:var(--card-hover)}
.genre-item.sel{background:var(--accent);color:#fff;font-weight:600}
.genre-dd-menu::-webkit-scrollbar{width:8px}
.genre-dd-menu::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
@media(max-width:640px){
  .genre-dd{width:100%}
  .genre-dd-btn{width:100%;justify-content:space-between}
  .genre-dd-menu{width:100%;right:auto;left:0}
}

/* ============ v18: tombol hapus "Lanjut Baca" ============ */
.shelf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.shelf-head .shelf-title{margin:0}
.shelf-clear{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:6px 12px;border-radius:999px;font-size:12px;cursor:pointer;
}
.shelf-clear:hover{color:var(--text);background:var(--card)}
.rcard-wrap{position:relative;flex:0 0 120px}
.rcard-wrap .rcard{flex:unset;width:100%}
.rcard-x{
  position:absolute;top:6px;right:6px;z-index:3;
  width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.72);color:#fff;font-size:16px;line-height:1;
  display:grid;place-items:center;opacity:.85;transition:all .15s;
}
.rcard-x:hover{background:var(--accent);opacity:1;transform:scale(1.1)}
@media(max-width:640px){ .rcard-wrap{flex-basis:100px} .rcard-x{width:22px;height:22px;font-size:15px} }

/* ============ v21: search suggest ============ */
.search{position:relative}
.suggest{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:6px;max-height:70vh;overflow-y:auto;
}
.suggest[hidden]{display:none}
.suggest-item{
  display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;
  text-decoration:none;color:var(--text);transition:background .12s;
}
.suggest-item:hover{background:var(--card-hover)}
.suggest-item img{width:40px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--card)}
.suggest-item .s-info{display:flex;flex-direction:column;min-width:0}
.suggest-item .s-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-item .s-meta{font-size:12px;color:var(--muted)}
.suggest::-webkit-scrollbar{width:8px}
.suggest::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* ============ v22: genre tag clickable ============ */
.tags-wrap{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.tags-label{flex-shrink:0;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);padding-top:5px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-size:12px;padding:5px 11px;border-radius:999px;cursor:pointer;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);
  transition:all .15s;
}
.tag:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ============ Jikan: skor di kartu ============ */
.card-score{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.72);color:var(--star);
  font-size:.74rem;font-weight:700;padding:3px 7px;border-radius:8px;backdrop-filter:blur(2px)}

/* ============ Detail v2 (gaya referensi) ============ */
.d2{position:relative}
.d2-hero{position:absolute;top:0;left:0;right:0;height:380px;background-size:cover;background-position:center 25%;
  filter:blur(22px) brightness(.72) saturate(1.15);transform:scale(1.12);opacity:.85;z-index:0;pointer-events:none}
.d2-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 35%,var(--bg) 100%)}
.d2-wrap{position:relative;z-index:1;padding-top:16px}
.d2-grid{display:grid;grid-template-columns:260px 1fr;gap:28px;margin-top:12px;align-items:start}
.d2-side{position:sticky;top:78px}
.d2-cover{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.d2-cover img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover}
.d2-flag{position:absolute;bottom:8px;left:8px;font-size:1.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.d2-actions{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.d2-btn{display:block;text-align:center;padding:11px 12px;border-radius:11px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-weight:600;font-size:.92rem;cursor:pointer;transition:all .15s;text-decoration:none}
.d2-btn:hover{background:var(--card-hover)}
.d2-btn.primary{background:linear-gradient(135deg,#17b8c7,#1596c9);border-color:transparent;color:#fff}
.d2-btn.primary.on{background:linear-gradient(135deg,#e04b63,#c62a52)}
.d2-btn.on{border-color:#17b8c7;color:#17b8c7}
.d2-btn.disabled{opacity:.6;cursor:default;pointer-events:none}
.d2-meta{list-style:none;margin:16px 0 0;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;gap:12px}
.d2-meta li{display:flex;flex-direction:column;gap:2px}
.d2-mk{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.d2-mv{font-size:.94rem;font-weight:600;word-break:break-word}

.d2-main{min-width:0}
.d2-title{font-size:2rem;line-height:1.15;margin:0 0 10px}
.d2-alt{margin-bottom:14px}
.d2-alt-label{display:block;font-size:.76rem;font-weight:700;color:var(--accent-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.d2-alt-val{color:var(--muted);font-size:.9rem;line-height:1.5}
.d2-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.d2-pop{background:rgba(255,71,87,.14);color:var(--accent);border:1px solid rgba(255,71,87,.35);
  font-weight:700;font-size:.82rem;padding:6px 11px;border-radius:9px}
.d2-chip{background:var(--card);border:1px solid var(--line);color:var(--star);font-weight:700;font-size:.82rem;padding:6px 11px;border-radius:9px}
.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.d2-more{background:none;border:none;color:var(--accent-2);font-weight:600;cursor:pointer;padding:6px 0;font-size:.86rem}

.d2-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:6px 0 18px}
.d2-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  font-weight:600;font-size:.96rem;padding:10px 14px;cursor:pointer;margin-bottom:-1px}
.d2-tab i{font-style:normal;background:var(--card-hover);color:var(--text);font-size:.74rem;padding:1px 7px;border-radius:20px;margin-left:4px}
.d2-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.d2-h{font-size:1.1rem;margin:20px 0 10px}
.d2-syn{color:var(--text);line-height:1.7;white-space:pre-line;font-size:.95rem}
.d2-genres{display:flex;flex-wrap:wrap;gap:8px}
.d2-genre{background:var(--card);border:1px solid var(--line);color:var(--text);padding:6px 14px;border-radius:20px;
  font-size:.85rem;cursor:pointer;transition:all .15s}
.d2-genre:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}

.d2-recs{margin-top:26px}
.d2-recs-head h2{margin-bottom:2px}
.d2-recs-head p{margin:0 0 12px}
.d2-recs-row{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.d2-recs-row .skeleton{width:132px}
.rec-card{scroll-snap-align:start;text-decoration:none;color:var(--text)}
.rec-cover{border-radius:10px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.rec-cover img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.rec-title{font-size:.82rem;font-weight:600;margin-top:6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.chapter-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.ch-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ch-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--text);background:var(--card);transition:background .12s}
.ch-item:last-child{border-bottom:none}
.ch-item:hover{background:var(--card-hover)}
.ch-item.read{color:var(--muted)}
.ch-no{font-weight:700;min-width:70px;font-size:.9rem}
.ch-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;color:var(--muted)}
.ch-side{font-size:.78rem;color:var(--muted);white-space:nowrap}

.mv-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#222733;color:#fff;
  padding:11px 18px;border-radius:10px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .25s;z-index:999;font-size:.9rem;max-width:90vw}
.mv-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:780px){
  /* urutan mobile: cover, judul, alt, badge, tombol aksi, meta, tab, isi */
  .d2-grid{display:flex;flex-direction:column;gap:14px;align-items:stretch}
  .d2-side,.d2-main{display:contents}
  /* PENTING: flex-item hasil display:contents harus boleh menyusut (min-width:0),
   * supaya konten (sinopsis & baris rekomendasi) MUAT di layar dan tidak terpotong
   * oleh .d2{overflow-x:clip}. Baris rekomendasi lalu scroll di dalam dirinya sendiri. */
  .d2-side>*,.d2-main>*{min-width:0;max-width:100%}
  .d2-cover{order:1;width:168px;margin:2px auto 4px}
  .d2-title{order:2;font-size:1.4rem;line-height:1.25;text-align:center;margin:0 0 2px}
  .d2-alt{order:3;text-align:center;margin-bottom:6px}
  .d2-badges{order:4;justify-content:center}
  .d2-actions{order:5;width:100%;max-width:420px;margin:2px auto 0}
  .d2-meta{order:6}
  .d2-tabs{order:7;justify-content:center;flex-wrap:wrap}
  .d2-panel{order:8}
  .d2-hero{height:240px}
  /* baris rekomendasi: scroll horizontal di dalam barisnya, beri sedikit ruang swipe */
  .d2-recs-row{scroll-padding-left:2px}
}

/* catatan sumber fallback */
.src-note{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--accent-2);
  border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:.88rem;color:var(--muted)}

/* tombol hapus (×) di kartu Bookmark/Readlist */
.fav-wrap{position:relative}
.fav-x{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;border-radius:50%;border:none;
  background:rgba(0,0,0,.7);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .15s;backdrop-filter:blur(2px)}
.fav-x:hover{background:var(--accent)}

/* logo brand (ganti /logo.png dgn logo milikmu) */
.brand-logo{height:34px;width:auto;display:block}
@media(max-width:600px){.brand-logo{height:28px}}

/* ===== Footer ===== */
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:8px 0}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.footer-nav a{color:var(--text);text-decoration:none;font-size:.92rem;font-weight:600;opacity:.9}
.footer-nav a:hover{color:var(--accent)}
.footer-note{color:var(--muted);font-size:.82rem;margin:0;max-width:720px;line-height:1.6}

/* ===== Halaman statis ===== */
.page-static{max-width:800px}
.page-static h1{font-size:1.7rem;margin:10px 0 18px}
.page-static p{color:var(--text);line-height:1.8;margin:0 0 14px}
.page-static ul{color:var(--text);line-height:1.8;padding-left:20px;margin:0 0 14px}
.page-static li{margin-bottom:8px}
.page-static a{color:var(--accent-2)}

/* ===== Disclaimer modal ===== */
.disc-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px}
.disc-overlay[hidden]{display:none}
.disc-box{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;max-width:460px;width:100%;
  padding:24px 22px;box-shadow:var(--shadow);text-align:center}
.disc-box h2{margin:0 0 12px;font-size:1.25rem}
.disc-box p{color:var(--muted);line-height:1.7;font-size:.92rem;margin:0 0 12px;text-align:left}
.disc-box p b{color:var(--text)}
.disc-btn{margin-top:6px;width:100%;padding:12px;border:none;border-radius:11px;cursor:pointer;
  background:linear-gradient(135deg,#17b8c7,#1596c9);color:#fff;font-weight:700;font-size:.98rem}
.disc-btn:hover{filter:brightness(1.05)}
.disc-links{margin-top:12px;font-size:.82rem}
.disc-links a{color:var(--muted);text-decoration:none}
.disc-links a:hover{color:var(--accent)}

/* ===== Fix geser horizontal (overflow) di mobile =====
 * Pemicu utama: .d2-hero (banner blur) pakai transform:scale(1.12) di elemen
 * full-width sehingga meluber ~6% ke kiri-kanan. Guard ini mengkliping luberan
 * itu tanpa mengganggu sticky header (diterapkan di <html>, bukan body). */
html,body{overflow-x:hidden}
/* Kliping TEPAT di wadah hero: .d2-hero (absolute, scale 1.12) meluber ke luar
 * .d2. overflow-x:clip memotong luberan itu di tepi .d2 TANPA jadi scroll-container
 * (jadi sticky .d2-side di desktop tetap jalan). Ini fix utama geser-horizontal. */
.d2{overflow-x:clip}
.d2-hero{max-width:100%}
img{max-width:100%}
.d2-title,.d2-alt-val,.seo-detail h1{overflow-wrap:anywhere}

/* ===== Tampilan SSR halaman detail (seo_detail_body) — tampil sebelum app.js
 * render & untuk crawler tanpa JS. app.js akan menimpa isinya. ===== */
.seo-h1{font-size:1.4rem;margin:18px 0 12px}
.seo-detail{padding-top:12px}
.seo-detail .seo-cover{max-width:180px;height:auto;border-radius:12px;margin:8px 0 14px;display:block}
.seo-detail h1{font-size:1.5rem;line-height:1.2;margin:4px 0 10px}
.seo-detail h2{font-size:1.1rem;margin:20px 0 10px}
.seo-meta{color:var(--muted);font-size:.9rem;margin:0 0 12px}
.seo-genres{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.seo-genres .seo-genre{background:var(--card);border:1px solid var(--line);color:var(--text);padding:6px 14px;border-radius:20px;font-size:.85rem;text-decoration:none}
.seo-desc{line-height:1.7;margin:0 0 8px}
.seo-chapters{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.seo-chapters a{display:block;padding:9px 12px;background:var(--card);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text)}

/* Chapter sponsor banner */
.chapter-banner-popup{position:fixed;inset:0;margin:auto;padding:0;border:0;border-radius:12px;width:min(440px,calc(100vw - 32px));max-height:90vh;max-height:90dvh;overflow:auto;background:#171717;color:#fff;box-shadow:0 16px 64px #0008}
.chapter-banner-popup::backdrop{background:rgba(0,0,0,.72)}
.chapter-banner-close{position:absolute;top:6px;right:6px;z-index:1;display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid #ffffff80;border-radius:50%;background:#000a;color:#fff;font-size:18px;line-height:1;cursor:pointer}
.chapter-banner-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.chapter-banner-link{display:block}
.chapter-banner-link img{display:block;width:100%;height:auto}