/* =====================================================================
 * Tema wm-amber — Westmanga
 * Konsep: poster film/komik retro 70-an. Coklat gelap hangat, amber,
 * terakota; garis-garis retro tiga warna; bingkai tebal + bayangan
 * keras (offset) pada kartu; judul Bebas Neue, isi Roboto.
 * ===================================================================== */
:root{
  --bg:#1a130e;
  --bg2:#211810;
  --surf:#2a1e15;
  --surf2:#35271c;
  --line:#4b3828;
  --line2:#6a4f37;
  --frame:#f1e1c2;
  --text:#f6ead7;
  --muted:#c2ab8f;
  --accent:#ffb000;
  --accent-2:#e2725b;
  --accent-ink:#ffb000;
  --accent2-ink:#f08c76;
  --on-accent:#1a130e;
  --on-accent2:#1a130e;
  --stripe1:#ffb000;
  --stripe2:#f0861f;
  --stripe3:#e2725b;
  --hard:#e2725b;
  --dots:rgba(255,176,0,.07);
  --foot:#120c08;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --f-head:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --f-body:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}
:root[data-theme="dark"]{
  --bg:#1a130e;--bg2:#211810;--surf:#2a1e15;--surf2:#35271c;--line:#4b3828;--line2:#6a4f37;
  --frame:#f1e1c2;--text:#f6ead7;--muted:#c2ab8f;--accent:#ffb000;--accent-2:#e2725b;
  --accent-ink:#ffb000;--accent2-ink:#f08c76;--on-accent:#1a130e;--on-accent2:#1a130e;
  --hard:#e2725b;--dots:rgba(255,176,0,.07);--foot:#120c08;--shadow:0 18px 40px rgba(0,0,0,.45);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5ead6;
  --bg2:#fbf3e4;
  --surf:#fffaf1;
  --surf2:#f0e2c8;
  --line:#dcc6a3;
  --line2:#b89a72;
  --frame:#2a1c12;
  --text:#2a1c12;
  --muted:#6b533c;
  --accent:#ffb000;
  --accent-2:#e2725b;
  --accent-ink:#9a5800;
  --accent2-ink:#b0442d;
  --on-accent:#2a1c12;
  --on-accent2:#2a1c12;
  --hard:#e2725b;
  --dots:rgba(154,88,0,.08);
  --foot:#2a1c12;
  --shadow:0 18px 40px rgba(90,55,20,.18);
  color-scheme:light;
}

/* ---------- Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  margin:0;min-height:100vh;
  font-family:var(--f-body);font-size:15px;line-height:1.55;
  background-color:var(--bg);
  background-image:radial-gradient(var(--dots) 1px,transparent 1.4px);
  background-size:7px 7px;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}
button,input{font-family:inherit}
.wrap{width:min(1240px,calc(100% - 32px));margin-inline:auto}
.muted{color:var(--muted)}
#view{display:block;min-height:60vh;padding-bottom:40px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ic{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.17em;flex:none}
.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}

/* ---------- Garis retro tiga warna ---------- */
.wm-stripes{display:flex;flex-direction:column}
.wm-stripes span{display:block;height:4px}
.wm-stripes span:nth-child(1){background:var(--stripe1)}
.wm-stripes span:nth-child(2){background:var(--stripe2)}
.wm-stripes span:nth-child(3){background:var(--stripe3)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg2);
  border-bottom:3px solid var(--frame);
  box-shadow:0 6px 0 rgba(0,0,0,.18);
}
.wm-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:22px;
  min-height:92px;padding:9px 0;
}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0;line-height:0}
.brand-logo{height:var(--logo-h);width:auto;display:block}

.search{
  position:relative;display:flex;align-items:stretch;
  width:100%;max-width:600px;justify-self:center;
  background:var(--surf);border:2px solid var(--line2);
  height:46px;
  transition:border-color .15s;
}
.search:focus-within{border-color:var(--accent)}
.wm-search-tag{
  display:flex;align-items:center;padding:0 14px;
  background:var(--accent-2);color:var(--on-accent2);
  font-family:var(--f-head);font-size:1.25rem;letter-spacing:1.5px;line-height:1;
  border-right:2px dashed var(--bg2);
}
.search input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--text);
  font-size:15px;outline:none;padding:0 12px;
}
.search input::placeholder{color:var(--muted);opacity:1}
.search input::-webkit-search-cancel-button{cursor:pointer}
.search button{
  flex:none;width:52px;border:0;cursor:pointer;
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;transition:filter .15s;
}
.search button:hover{filter:brightness(1.08)}

.suggest{
  position:absolute;top:calc(100% + 8px);left:-2px;right:-2px;z-index:60;
  background:var(--surf);border:3px solid var(--frame);
  box-shadow:6px 6px 0 var(--hard);
  max-height:420px;overflow:auto;
}
.suggest[hidden]{display:none}
.suggest-item{display:flex;gap:12px;align-items:center;padding:9px 12px;text-decoration:none;color:var(--text);border-bottom:1px dashed var(--line)}
.suggest-item:last-child{border-bottom:0}
.suggest-item:hover,.suggest-item:focus-visible{background:var(--surf2)}
.suggest-item img{width:40px;height:56px;object-fit:cover;flex:none;border:2px solid var(--line2);background:var(--surf2)}
.suggest-item .s-info{display:flex;flex-direction:column;min-width:0}
.suggest-item .s-title{font-weight:700;font-size:.92rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-item .s-meta{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest::-webkit-scrollbar{width:8px}
.suggest::-webkit-scrollbar-thumb{background:var(--line2)}

.wm-tools{display:flex;align-items:center;gap:10px}
.wm-tool{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;min-width:46px;padding:0 12px;
  background:transparent;color:var(--text);
  border:2px solid var(--line2);cursor:pointer;text-decoration:none;
  font-family:var(--f-head);font-size:1.2rem;letter-spacing:1px;line-height:1;
  transition:background .15s,color .15s,border-color .15s;
}
.wm-tool:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.wm-tool svg{flex:none}
.theme-toggle{padding:0}
.theme-toggle .tt-moon{display:none}
:root[data-theme="light"] .theme-toggle .tt-sun{display:none}
:root[data-theme="light"] .theme-toggle .tt-moon{display:block}

/* ---------- Umum ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;min-height:40px;
  background:var(--surf);color:var(--text);
  border:2px solid var(--line2);cursor:pointer;text-decoration:none;
  font-family:var(--f-body);font-weight:700;font-size:.88rem;line-height:1.2;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.btn:hover:not(:disabled):not([aria-disabled="true"]){background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.status{
  padding:34px 18px;text-align:center;color:var(--muted);
  border:2px dashed var(--line2);background:var(--surf);margin:14px 0;line-height:1.7;
}
.status .ic{color:var(--accent-ink)}
.back{
  display:inline-flex;align-items:center;gap:6px;margin:16px 0 6px;
  color:var(--muted);text-decoration:none;
  font-family:var(--f-head);font-size:1.2rem;letter-spacing:1px;line-height:1.1;
}
.back:hover{color:var(--accent-ink)}
.global-err{
  background:var(--accent-2);color:#1a130e;padding:10px 16px;font-weight:700;text-align:center;font-size:.9rem;
}
.global-err[hidden]{display:none}
.mv-toast{
  position:fixed;left:50%;bottom:24px;z-index:1200;
  transform:translateX(-50%) translateY(20px);
  background:var(--accent);color:#1a130e;font-weight:700;
  padding:11px 18px;border:3px solid #1a130e;box-shadow:5px 5px 0 var(--hard);
  opacity:0;pointer-events:none;transition:all .25s;font-size:.9rem;max-width:90vw;
}
.mv-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* skeleton */
.skeleton{display:flex;flex-direction:column;gap:9px}
.skeleton .sk-cover{aspect-ratio:2/3;border:3px solid var(--line);background:var(--surf)}
.skeleton .sk-line{height:12px;background:var(--surf2)}
.skeleton .sk-line.short{width:60%}
.skeleton .sk-cover,.skeleton .sk-line{
  background-image:linear-gradient(100deg,transparent 30%,rgba(255,176,0,.10) 50%,transparent 70%);
  background-size:220% 100%;animation:wmShimmer 1.3s linear infinite;
}
@keyframes wmShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes wmRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Beranda: susunan sidebar (sidebar di KIRI) ---------- */
.home-one{margin-top:8px}
.home-cols{
  display:grid;grid-template-columns:292px minmax(0,1fr);gap:34px;align-items:start;margin-top:22px;
}
.home-cols .home-aside{grid-column:1;grid-row:1}
.home-cols .home-main{grid-column:2;grid-row:1;min-width:0}
.home-main{min-width:0}

.toolbar{display:flex;align-items:flex-start;gap:14px;margin:4px 0 6px}
.filters{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.chip{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:7px 14px 5px;
  background:transparent;color:var(--text);
  border:2px solid var(--line2);cursor:pointer;
  font-family:var(--f-head);font-size:1.15rem;letter-spacing:1px;line-height:1;
  transition:background .15s,color .15s,border-color .15s;
}
.chip .ic{margin-right:6px;width:.95em;height:.95em;vertical-align:-.08em}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:3px 3px 0 var(--hard)}

.genre-dd{position:relative;flex:none}
.genre-dd-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 12px 5px;min-width:170px;justify-content:space-between;
  background:var(--surf);color:var(--text);border:2px solid var(--frame);cursor:pointer;
  font-family:var(--f-head);font-size:1.15rem;letter-spacing:1px;line-height:1;
}
.genre-dd-btn:hover{background:var(--surf2)}
.genre-dd-btn svg{flex:none;margin-top:-2px}
.genre-dd-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:30;
  width:min(360px,calc(100vw - 32px));max-height:380px;overflow:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;
  background:var(--surf);border:3px solid var(--frame);box-shadow:6px 6px 0 var(--hard);
}
.genre-dd-menu[hidden]{display:none}
.genre-item{
  text-align:left;padding:7px 9px;background:transparent;border:1px solid transparent;color:var(--text);
  cursor:pointer;font-size:.85rem;line-height:1.25;
}
.genre-item:hover{border-color:var(--line2);background:var(--surf2)}
.genre-item.sel{background:var(--accent);color:var(--on-accent);font-weight:700}
.genre-dd-menu::-webkit-scrollbar{width:8px}
.genre-dd-menu::-webkit-scrollbar-thumb{background:var(--line2)}

.result-head{margin:20px 0 18px}
.result-head h1{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0;font-family:var(--f-head);font-weight:400;
  font-size:2.3rem;letter-spacing:1.5px;line-height:1.05;
  padding-bottom:6px;
  background:linear-gradient(var(--accent),var(--accent)) left bottom/64px 5px no-repeat;
}
.result-head h1 .ic{color:var(--accent-ink);width:.85em;height:.85em;vertical-align:0}
.result-head p{margin:6px 0 0}

/* ---------- Kartu poster (bingkai tebal + bayangan keras) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:26px 22px}
a.card{text-decoration:none;color:inherit}
.card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  animation:wmRise .35s ease both;
}
.card-cover{
  position:relative;aspect-ratio:2/3;overflow:hidden;
  background:var(--surf2);
  border:3px solid var(--frame);
  box-shadow:5px 5px 0 var(--hard);
  transition:transform .16s ease,box-shadow .16s ease;
}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.card-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,19,14,0) 55%,rgba(26,19,14,.75) 100%);
}
.card:hover .card-cover,.card:focus-visible .card-cover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--accent)}
.card:focus-visible{outline:none}
.card:focus-visible .card-title{text-decoration:underline}
.card-badge{
  position:absolute;left:6px;bottom:6px;z-index:2;
  padding:4px 8px 2px;background:var(--accent);color:#1a130e;
  font-family:var(--f-head);font-size:1.02rem;letter-spacing:.8px;line-height:1;
  border:2px solid #1a130e;
}
.card-fav{
  position:absolute;top:6px;right:6px;z-index:2;
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--accent-2);color:#1a130e;border:2px solid #1a130e;
}
.card-fav .ic{width:14px;height:14px;fill:currentColor;vertical-align:0}
.card-body{display:flex;flex-direction:column;gap:3px;padding:11px 2px 0}
.card-title{
  font-family:var(--f-head);font-size:1.18rem;letter-spacing:.6px;line-height:1.08;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;
}
.card:hover .card-title{color:var(--accent-ink)}
.card-meta{font-size:.76rem;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Pager ---------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:34px 0 10px}
.pager[hidden]{display:none}
.pager-nums{display:flex;flex-wrap:wrap;gap:6px}
.pager-num{min-width:42px;padding:8px 10px;font-family:var(--f-head);font-size:1.1rem;font-weight:400;letter-spacing:.5px}
.pager-num.is-cur{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:3px 3px 0 var(--hard)}
.pager-gap{align-self:center;color:var(--muted);padding:0 2px}
.pager-info{font-size:.82rem;width:100%;text-align:center;order:5}
.pager .btn[disabled]{opacity:.4}

/* ---------- Lanjut Baca ---------- */
.shelf{margin:22px 0 4px;padding:14px 16px 16px;border:2px dashed var(--line2);background:var(--surf)}
.shelf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.shelf-title{
  display:flex;align-items:center;gap:8px;margin:0;
  font-family:var(--f-head);font-weight:400;font-size:1.6rem;letter-spacing:1px;line-height:1.1;
}
.shelf-title .ic{color:var(--accent-ink)}
.shelf-clear{background:none;border:0;border-bottom:2px solid var(--accent-2);color:var(--accent2-ink);cursor:pointer;font-weight:700;font-size:.82rem;padding:2px 0}
.shelf-clear:hover{color:var(--text)}
.row{display:flex;gap:16px;overflow-x:auto;padding:2px 6px 10px 0;scroll-snap-type:x proximity}
.row::-webkit-scrollbar{height:8px}
.row::-webkit-scrollbar-thumb{background:var(--line2)}
.rcard-wrap{position:relative;flex:none;width:112px;scroll-snap-align:start}
.rcard{display:block;text-decoration:none;color:inherit}
.rcard-cover{aspect-ratio:2/3;overflow:hidden;border:3px solid var(--frame);background:var(--surf2);box-shadow:4px 4px 0 var(--hard)}
.rcard-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rcard-title{margin-top:8px;font-weight:700;font-size:.8rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard-sub{font-family:var(--f-head);font-size:1rem;letter-spacing:.5px;color:var(--accent-ink);line-height:1.2}
.rcard-x{
  position:absolute;top:-6px;right:-6px;z-index:2;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--accent-2);color:#1a130e;border:2px solid #1a130e;font-size:16px;line-height:1;font-weight:700;
}
.rcard-x:hover{background:var(--accent)}

/* ---------- Sidebar ---------- */
.home-aside{display:flex;flex-direction:column;gap:26px;min-width:0}
.aside-box{background:var(--surf);border:3px solid var(--frame);box-shadow:6px 6px 0 var(--hard)}
.aside-title{
  display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px 7px;
  background:var(--accent);color:#1a130e;
  font-family:var(--f-head);font-weight:400;font-size:1.55rem;letter-spacing:1.5px;line-height:1;
  border-bottom:3px solid var(--frame);
}
.rank-list{list-style:none;margin:0;padding:6px 0;counter-reset:none}
.rank-list>li.muted{padding:12px 14px}
.rank-item{
  display:flex;align-items:center;gap:11px;padding:9px 14px;text-decoration:none;color:inherit;
  border-bottom:1px dashed var(--line);
}
.rank-list li:last-child .rank-item{border-bottom:0}
.rank-item:hover{background:var(--surf2)}
.rank-no{
  flex:none;width:30px;text-align:center;
  font-family:var(--f-head);font-size:2rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.4px var(--muted);
}
.rank-list li:nth-child(-n+3) .rank-no{-webkit-text-stroke:0;color:var(--accent-ink)}
.rank-list li:first-child .rank-no{color:var(--accent2-ink)}
.rank-cover{flex:none;width:46px;height:64px;object-fit:cover;border:2px solid var(--line2);background:var(--surf2)}
.rank-info{display:flex;flex-direction:column;min-width:0;gap:2px}
.rank-title{font-weight:700;font-size:.88rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rank-item:hover .rank-title{color:var(--accent-ink)}
.rank-meta{font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aside-genres{display:flex;flex-wrap:wrap;gap:6px;padding:14px;max-height:340px;overflow:auto}
.aside-genre{
  padding:4px 9px;font-size:.8rem;text-decoration:none;color:var(--text);
  border:1px solid var(--line2);background:var(--bg2);
}
.aside-genre:hover{background:var(--accent-2);border-color:var(--accent-2);color:#1a130e}

/* ---------- Favorit ---------- */
.fav-wrap{position:relative;min-width:0}
.fav-x{
  position:absolute;top:-8px;right:-8px;z-index:3;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--accent-2);color:#1a130e;border:2px solid #1a130e;font-size:18px;font-weight:700;line-height:1;
}
.fav-x:hover{background:var(--accent)}

/* ---------- Detail (2 kolom) ---------- */
.d2{position:relative;overflow-x:clip}
.d2-hero{
  position:absolute;top:0;left:0;right:0;height:360px;max-width:100%;
  background-size:cover;background-position:center 30%;
  filter:blur(26px) saturate(1.2) sepia(.35);transform:scale(1.15);opacity:.55;
  z-index:0;pointer-events:none;
}
.d2::before{
  content:"";position:absolute;top:0;left:0;right:0;height:360px;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0%,var(--bg) 96%),
    repeating-conic-gradient(from 0deg at 50% 115%,rgba(255,176,0,.13) 0deg 6deg,transparent 6deg 12deg);
}
.d2-wrap{position:relative;z-index:1;padding-top:4px}
.d2-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:40px;margin-top:10px;align-items:start}
.d2-side{position:sticky;top:122px;min-width:0}
.d2-cover{position:relative;border:5px solid var(--frame);box-shadow:9px 9px 0 var(--hard);background:var(--surf2)}
.d2-cover img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover}
.d2-flag{
  position:absolute;top:-14px;right:-14px;
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:#1a130e;border:3px solid #1a130e;
  font-family:var(--f-head);font-size:1.35rem;letter-spacing:1px;line-height:1;
  transform:rotate(12deg);box-shadow:3px 3px 0 #1a130e;
}
.d2-actions{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.d2-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 12px;min-height:44px;text-align:center;
  background:var(--surf);color:var(--text);border:2px solid var(--line2);
  font-weight:700;font-size:.9rem;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.d2-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.d2-btn.primary{background:var(--accent);border-color:var(--accent);color:#1a130e}
.d2-btn.primary:hover{filter:brightness(1.06);color:#1a130e}
.d2-btn.primary.on{background:var(--accent-2);border-color:var(--accent-2);color:#1a130e}
.d2-btn.on{border-color:var(--accent-2);color:var(--accent2-ink)}
.d2-btn.disabled{opacity:.5;pointer-events:none}
#readBtn{background:var(--frame);border-color:var(--frame);color:var(--bg)}
#readBtn:hover{background:var(--accent);border-color:var(--accent);color:#1a130e}
.d2-meta{list-style:none;margin:22px 0 0;padding:0;border-top:3px solid var(--frame)}
.d2-meta li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line2);font-size:.86rem}
.d2-mk{color:var(--muted);display:flex;align-items:center;gap:6px;flex:none}
.d2-mk .ic{color:var(--accent-ink)}
.d2-mv{text-align:right;font-weight:700;min-width:0;overflow-wrap:anywhere}

.d2-main{min-width:0;padding-top:6px}
.d2-title{
  margin:0;font-family:var(--f-head);font-weight:400;
  font-size:3.4rem;line-height:.98;letter-spacing:1.5px;
  text-shadow:3px 3px 0 var(--hard);overflow-wrap:anywhere;
}
.d2-alt{margin:12px 0 0;font-size:.86rem}
.d2-alt-label{display:inline-block;font-family:var(--f-head);font-size:1rem;letter-spacing:1px;color:var(--accent-ink);margin-right:6px}
.d2-alt-val{display:inline;color:var(--muted);overflow-wrap:anywhere}
.d2-badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.d2-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font-size:.8rem;font-weight:700;
  border:2px solid var(--frame);background:var(--surf);
}
.d2-chip .ic{color:var(--accent-ink)}
.d2-tabs{display:flex;gap:0;margin:22px 0 4px;border-bottom:3px solid var(--frame)}
.d2-tabs[hidden]{display:none}
.d2-tab{
  position:relative;background:transparent;border:0;cursor:pointer;color:var(--muted);
  padding:10px 20px 7px;margin-bottom:0;
  font-family:var(--f-head);font-size:1.45rem;letter-spacing:1.5px;line-height:1;
}
.d2-tab:hover{color:var(--text)}
.d2-tab i{
  font-style:normal;font-family:var(--f-body);font-size:.72rem;font-weight:700;letter-spacing:0;
  display:inline-block;vertical-align:4px;margin-left:5px;padding:2px 7px;
  background:var(--surf2);color:var(--text);
}
.d2-tab.active{background:var(--frame);color:var(--bg)}
.d2-tab.active i{background:var(--accent);color:#1a130e}
.d2-panel{padding-top:4px}
.d2-panel[hidden]{display:none}
.d2-h{
  display:flex;align-items:center;gap:8px;margin:22px 0 10px;
  font-family:var(--f-head);font-weight:400;font-size:1.6rem;letter-spacing:1px;line-height:1.05;
}
.d2-h .ic{color:var(--accent-ink)}
.d2-syn{line-height:1.75;white-space:pre-line;font-size:.95rem;color:var(--text);
  padding-left:14px;border-left:4px solid var(--accent)}
.d2-more{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:6px 0;
  background:none;border:0;cursor:pointer;color:var(--accent2-ink);
  font-family:var(--f-head);font-size:1.1rem;letter-spacing:1px;
}
.d2-genres{display:flex;flex-wrap:wrap;gap:8px}
.d2-genre{
  padding:6px 12px;cursor:pointer;font-size:.84rem;font-weight:500;
  background:transparent;color:var(--text);border:2px solid var(--line2);
}
.d2-genre:hover{background:var(--accent);border-color:var(--accent);color:#1a130e}
.d2-recs{margin-top:12px}
.d2-recs-head{display:flex;align-items:center;justify-content:space-between}
.d2-recs-row{display:flex;gap:16px;overflow-x:auto;padding:4px 8px 12px 0;scroll-snap-type:x proximity}
.d2-recs-row::-webkit-scrollbar{height:8px}
.d2-recs-row::-webkit-scrollbar-thumb{background:var(--line2)}
.d2-recs-row .grid{display:flex;gap:16px}
.d2-recs-row .skeleton{flex:none;width:122px}
.rec-card{flex:none;width:122px;text-decoration:none;color:inherit;scroll-snap-align:start}
.rec-cover{aspect-ratio:2/3;overflow:hidden;border:3px solid var(--frame);box-shadow:4px 4px 0 var(--hard);background:var(--surf2);transition:transform .15s}
.rec-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rec-card:hover .rec-cover{transform:translate(-2px,-2px)}
.rec-title{margin-top:8px;font-size:.8rem;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.chapter-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 12px;font-size:.86rem}
.ch-list{
  border:3px solid var(--frame);background:var(--surf);
  max-height:640px;overflow:auto;
}
.ch-list::-webkit-scrollbar{width:9px}
.ch-list::-webkit-scrollbar-thumb{background:var(--line2)}
.ch-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:11px 16px;text-decoration:none;color:var(--text);border-bottom:1px dashed var(--line2);
}
.ch-item:last-child{border-bottom:0}
.ch-item:nth-child(even){background:color-mix(in srgb,var(--surf2) 45%,transparent)}
.ch-item:hover{background:var(--accent);color:#1a130e}
.ch-item:hover .ch-no,.ch-item:hover .ch-side{color:#1a130e}
.ch-no{font-family:var(--f-head);font-size:1.25rem;letter-spacing:.8px;line-height:1;color:var(--accent-ink);white-space:nowrap}
.ch-no .ic{width:.85em;height:.85em}
.ch-name{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-side{font-size:.76rem;color:var(--muted);white-space:nowrap}
.ch-item.read{opacity:.62}
.ch-item.read .ch-no{color:var(--accent2-ink)}

/* ---------- Reader ---------- */
.reader-wrap{width:min(860px,100%);margin-inline:auto;padding:0 16px}
.reader-head{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.reader-head .back{margin-bottom:0}
.reader-title{
  font-family:var(--f-head);font-size:2rem;letter-spacing:1.2px;line-height:1.05;margin:4px 0 12px;overflow-wrap:anywhere;
}
.reader-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0 18px}
.reader-nav .btn{flex:1 1 140px;max-width:240px}
.reader-nav .btn-list{background:var(--accent);border-color:var(--accent);color:#1a130e}
.reader-nav .btn-list:hover{filter:brightness(1.06)}
.pages,#pagesC{display:block;margin:0 -16px;border-block:4px solid var(--frame);background:#0d0907}
.ch-block{display:block}
.pages img.page,#pagesC .ch-block .page,.ch-block .page{display:block;width:100%;height:auto;margin:0;border:0;min-height:120px}
.pages img.page[src]{min-height:0}
.chapter-sep{
  padding:14px 16px 11px;text-align:center;
  background:var(--accent);color:#1a130e;
  font-family:var(--f-head);font-size:1.5rem;letter-spacing:2px;line-height:1.1;
  border-block:3px solid #1a130e;
  background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(26,19,14,.08) 14px 28px);
}
.sentinel{height:2px}
.reader-end{
  margin:24px 0;padding:26px 18px;text-align:center;line-height:1.8;
  border:3px solid var(--frame);background:var(--surf);box-shadow:6px 6px 0 var(--hard);
  font-family:var(--f-head);font-size:1.4rem;letter-spacing:1px;
}
.reader-end .ic{color:var(--accent-ink)}
.reader-end .btn{margin-top:10px;font-size:.9rem}

/* ---------- Halaman statis ---------- */
.page-static{max-width:860px;padding-bottom:20px}
.page-static h1{
  font-family:var(--f-head);font-weight:400;font-size:2.8rem;letter-spacing:1.5px;line-height:1;
  margin:12px 0 18px;padding-bottom:10px;border-bottom:4px solid var(--frame);
}
.page-static h2{font-family:var(--f-head);font-weight:400;font-size:1.7rem;letter-spacing:1px;margin:26px 0 8px;color:var(--accent-ink)}
.page-static p,.page-static li{line-height:1.8;font-size:.96rem}
.page-static p{margin:0 0 14px}
.page-static ul{padding-left:22px;margin:0 0 14px}
.page-static li{margin-bottom:6px}
.page-static li::marker{color:var(--accent-ink)}
.page-static a{color:var(--accent-ink);text-underline-offset:3px}
.social-links{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 20px}
.social-links a{
  display:inline-flex;align-items:center;padding:8px 18px 6px;text-decoration:none;
  border:2px solid var(--frame);background:var(--surf);color:var(--text);
  font-family:var(--f-head);font-size:1.2rem;letter-spacing:1px;
  box-shadow:4px 4px 0 var(--hard);transition:transform .15s,box-shadow .15s,background .15s;
}
.social-links a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent);background:var(--accent);color:#1a130e}

/* ---------- SSR ---------- */
.seo-h1{font-family:var(--f-head);font-weight:400;font-size:2rem;letter-spacing:1px;line-height:1.1;margin:20px 0 14px}
.seo-detail{padding-top:4px;padding-bottom:30px}
.seo-detail .seo-cover{width:180px;max-width:50%;height:auto;display:block;margin:8px 0 16px;border:4px solid var(--frame);box-shadow:6px 6px 0 var(--hard)}
.seo-detail h1{font-family:var(--f-head);font-weight:400;font-size:2.4rem;letter-spacing:1px;line-height:1;margin:6px 0 10px;overflow-wrap:anywhere}
.seo-detail h2{font-family:var(--f-head);font-weight:400;font-size:1.5rem;letter-spacing:1px;margin:22px 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{padding:5px 12px;font-size:.84rem;text-decoration:none;color:var(--text);border:2px solid var(--line2)}
.seo-desc{line-height:1.75;margin:0}
.seo-chapters{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.seo-chapters a{display:block;padding:9px 12px;border:2px solid var(--line2);background:var(--surf);text-decoration:none;color:var(--text)}

/* ---------- Footer ---------- */
.site-footer{margin-top:50px;background:var(--foot);color:#f1e1c2;position:relative}
.wm-foot-sun{
  height:56px;
  background:repeating-conic-gradient(from -90deg at 50% 100%,var(--accent) 0deg 5deg,transparent 5deg 10deg);
  -webkit-mask:linear-gradient(0deg,#000 0%,transparent 100%);mask:linear-gradient(0deg,#000 0%,transparent 100%);
  opacity:.55;background-color:var(--bg);
}
.wm-foot{
  display:grid;grid-template-columns:1.3fr 1fr 1.4fr;gap:34px;
  padding:34px 0 30px;border-top:4px solid var(--accent);
}
.wm-foot-logo{display:inline-block;line-height:0}
.wm-foot-logo img{height:40px;width:auto;display:block}
.wm-foot-slogan{
  margin:14px 0 2px;font-family:var(--f-head);font-size:3rem;letter-spacing:2px;line-height:1;color:#ffb000;
  text-shadow:3px 3px 0 #e2725b;
}
.wm-foot-slogan span{color:#f1e1c2;text-shadow:none}
.wm-foot-sub{margin:6px 0 0;color:#c8b293;font-size:.86rem}
.wm-foot-h{
  margin:0 0 12px;font-family:var(--f-head);font-weight:400;font-size:1.45rem;letter-spacing:1.5px;line-height:1;
  color:#1a130e;background:#ffb000;display:inline-block;padding:5px 10px 3px;
}
.wm-foot-nav{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.wm-foot-nav a{color:#f1e1c2;text-decoration:none;font-size:.9rem;padding:1px 0;border-bottom:1px solid transparent}
.wm-foot-nav a:hover{color:#ffb000;border-bottom-color:#ffb000}
.wm-foot-genre{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:7px;align-content:start}
.wm-foot-genre .wm-foot-h{grid-column:1/-1;justify-self:start}
.wm-foot-base{border-top:1px dashed #5a4330;padding:16px 0 18px}
.footer-note{margin:0;color:#c8b293;font-size:.8rem;line-height:1.65;text-align:center}
.wm-stripes-foot span{height:5px}

/* ---------- Popup disclaimer ---------- */
.disc-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(14,9,6,.78);
  background-image:radial-gradient(rgba(255,176,0,.10) 1px,transparent 1.5px);background-size:6px 6px;
}
.disc-overlay[hidden]{display:none}
.disc-box{
  width:100%;max-width:470px;max-height:calc(100vh - 36px);overflow:auto;
  background:var(--surf);color:var(--text);
  border:4px solid var(--frame);box-shadow:10px 10px 0 var(--hard);
  padding:0 22px 20px;text-align:center;
}
.disc-box h2{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 -22px 18px;padding:14px 18px 10px;
  background:var(--accent);color:#1a130e;border-bottom:4px solid var(--frame);
  font-family:var(--f-head);font-weight:400;font-size:2rem;letter-spacing:2px;line-height:1;
}
.disc-box h2 .ic{width:.8em;height:.8em;vertical-align:0}
.disc-box p{margin:0 0 12px;text-align:left;font-size:.9rem;line-height:1.7;color:var(--muted)}
.disc-box p a{color:var(--accent-ink);font-weight:700}
.disc-box p b{color:var(--text)}
.disc-btn{
  width:100%;margin-top:8px;padding:13px;cursor:pointer;
  background:var(--accent-2);color:#1a130e;border:3px solid var(--frame);
  font-family:var(--f-head);font-size:1.5rem;letter-spacing:2px;line-height:1;
  box-shadow:4px 4px 0 var(--accent);transition:transform .12s,box-shadow .12s;
}
.disc-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent)}
.disc-links{margin-top:14px;font-size:.8rem;color:var(--muted)}
.disc-links a{color:var(--muted);text-decoration:none}
.disc-links a:hover{color:var(--accent-ink);text-decoration:underline}

/* ---------- Popup iklan antar-chapter ---------- */
dialog.chapter-banner-popup{
  position:fixed;inset:0;margin:auto;padding:0;
  width:min(440px,calc(100vw - 32px));height:fit-content;max-height:90vh;max-height:90dvh;overflow:auto;
  background:#1a130e;color:#f6ead7;
  border:4px solid #f1e1c2;box-shadow:9px 9px 0 #e2725b;border-radius:0;
}
dialog.chapter-banner-popup::backdrop{background:rgba(14,9,6,.8)}
.chapter-banner-close{
  position:absolute;top:6px;right:6px;z-index:2;
  display:grid;place-items:center;width:30px;height:30px;padding:0;cursor:pointer;
  background:#ffb000;color:#1a130e;border:2px solid #1a130e;border-radius:50%;
  font-size:20px;font-weight:700;line-height:1;
}
.chapter-banner-close:hover{background:#e2725b}
.chapter-banner-close:focus-visible{outline:3px solid #f1e1c2;outline-offset:2px}
.chapter-banner-link{display:block;line-height:0}
.chapter-banner-link img{display:block;width:100%;height:auto}

/* ===================== Responsif ===================== */
@media (max-width:1100px){
  .home-cols{grid-template-columns:250px minmax(0,1fr);gap:26px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (max-width:900px){
  .home-cols{display:flex;flex-direction:column;gap:30px}
  .home-cols .home-main,.home-cols .home-aside{width:100%}
  .home-aside{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .wm-tool-label{display:none}
  .wm-foot{grid-template-columns:1fr 1fr}
  .wm-foot-brand{grid-column:1/-1}
}
@media (max-width:780px){
  .d2-grid{display:flex;flex-direction:column;gap:14px;align-items:stretch}
  .d2-side,.d2-main{display:contents}
  .d2-side>*,.d2-main>*{min-width:0;max-width:100%}
  .d2-cover{order:1;width:180px;margin:14px auto 8px}
  .d2-title{order:2;text-align:center;font-size:2.4rem}
  .d2-alt{order:3;text-align:center;margin-top:0}
  .d2-badges{order:4;justify-content:center;margin:0}
  .d2-actions{order:5;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
  .d2-actions #readBtn{order:-1;grid-column:1/-1}
  .d2-actions #bmBtn{order:1}
  .d2-actions #shareBtn{order:2}
  .d2-actions #rlBtn{order:3;grid-column:1/-1}
  .d2-actions .d2-btn.disabled{order:-1;grid-column:1/-1}
  .d2-btn{font-size:.86rem;padding:10px 8px}
  .d2-meta{order:6;margin-top:6px}
  .d2-tabs{order:7;margin-top:10px}
  .d2-panel{order:8}
  .d2-hero,.d2::before{height:300px}
  .d2-side{position:static}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .wrap{width:calc(100% - 32px)}
  .site-header{box-shadow:none}
  .wm-head{
    grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "search search";
    gap:8px 10px;min-height:0;padding:8px 0 10px;
  }
  .brand{grid-area:brand}
  .brand-logo{height:var(--logo-h-m)}
  .wm-tools{grid-area:tools;gap:8px}
  .wm-tool{height:42px;min-width:42px;padding:0 10px}
  .fav-link.wm-tool{padding:0}
  .search{grid-area:search;max-width:none;height:42px}
  .wm-search-tag{font-size:1.1rem;padding:0 10px}
  .search button{width:46px}
  .suggest{max-height:60vh}

  .home-cols{margin-top:16px}
  .toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding:2px 34px 6px 0;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 38px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 38px),transparent);
  }
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:none;font-size:1.08rem;padding:7px 12px 5px}
  .genre-dd{width:100%}
  .genre-dd-btn{width:100%}
  .genre-dd-menu{left:0;right:auto;width:100%}
  .result-head{margin:16px 0 14px}
  .result-head h1{font-size:1.85rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .card-title{font-size:1.1rem}
  .home-aside{grid-template-columns:1fr}
  .aside-genres{max-height:none}
  .shelf{padding:12px 12px 14px}
  .rcard-wrap{width:100px}

  .pager{gap:6px}
  .pager>.btn{padding:8px 10px;font-size:.8rem}
  .pager-num{min-width:36px;padding:6px 6px}

  .d2-title{font-size:2.1rem}
  .d2-tab{font-size:1.25rem;padding:9px 14px 6px;flex:1}
  .ch-item{grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:10px 12px}
  .ch-side{grid-column:2}
  .ch-name:empty{display:none}
  .rec-card,.d2-recs-row .skeleton{width:108px}

  .reader-wrap{padding:0 12px}
  .pages,#pagesC{margin:0 -12px}
  .reader-title{font-size:1.6rem}
  .reader-nav .btn{flex:1 1 0;min-width:0;padding:9px 8px;font-size:.8rem}

  .page-static h1{font-size:2.2rem}
  .wm-foot{grid-template-columns:1fr;gap:26px;padding:28px 0 24px}
  .wm-foot-slogan{font-size:2.5rem}
  .disc-box{padding:0 16px 16px}
  .disc-box h2{margin:0 -16px 16px;font-size:1.7rem}
}
@media (max-width:360px){
  .wm-search-tag{display:none}
  .d2-btn{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}