/* Monogatari — dark premium, ringan, kontras tinggi */
:root{
  --bg:#0b0d12; --bg2:#11141c; --card:#151922; --card2:#1b2029;
  --line:#242a36; --line2:#2f3644;
  --tx:#e9edf5; --tx2:#9aa4b8; --tx3:#6b7488;
  --acc:#7c8cff; --acc2:#a78bfa; --acc3:#f472b6;
  --ok:#34d399; --warn:#fbbf24; --err:#f87171;
  --r:14px; --r2:10px; --sh:0 8px 28px rgba(0,0,0,.45);
  --maxw:1240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a3140;border-radius:8px}
::-webkit-scrollbar-track{background:var(--bg)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(11,13,18,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;
  padding:11px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;flex:0 0 auto}
.brand-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2) 55%,var(--acc3));
  color:#0b0d12;font-weight:900;font-size:16px}
.brand-txt{font-size:17px}
.nav{display:flex;gap:4px;flex:1 1 auto;min-width:0;overflow:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:7px 12px;border-radius:999px;color:var(--tx2);font-size:14px;
  white-space:nowrap;transition:.15s}
.nav a:hover{color:var(--tx);background:var(--card)}
.nav a.on{color:#0b0d12;background:linear-gradient(135deg,var(--acc),var(--acc2));font-weight:600}
.hdr-act{display:flex;gap:6px;flex:0 0 auto}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;cursor:pointer;font-size:16px;
  color:var(--tx2);transition:.15s}
.icon-btn:hover{color:var(--tx);border-color:var(--line2);background:var(--card2)}
.burger{display:none}
.searchbar{max-width:var(--maxw);margin:0 auto;display:flex;gap:8px;padding:0 16px 12px}
.searchbar input{flex:1 1 auto;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);padding:10px 13px;outline:none}
.searchbar input:focus{border-color:var(--acc)}
.searchbar select{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:10px 8px;max-width:38%}
.btn-go{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#0b0d12;font-weight:700;
  border:0;border-radius:var(--r2);padding:10px 18px;cursor:pointer}

/* ---------- layout ---------- */
.app{max-width:var(--maxw);margin:0 auto;width:100%;padding:22px 16px 40px;flex:1 1 auto}
.sec{margin-bottom:30px}
.sec-hd{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.sec-hd h2{margin:0;font-size:19px;letter-spacing:.2px}
.sec-hd .hint{color:var(--tx3);font-size:13px}
.row-acts{margin-left:auto;display:flex;gap:6px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--tx2);border-radius:999px;
  padding:6px 13px;font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap}
.chip:hover{color:var(--tx);border-color:var(--line2)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#0b0d12;font-weight:600}
.chips{display:flex;gap:7px;overflow:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}

.grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--sh)}
.card .cv{position:relative;aspect-ratio:2/3;background:var(--card2);overflow:hidden}
.card .cv img{width:100%;height:100%;object-fit:cover}
.card .cv .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--tx3);
  font-size:12px;text-align:center;padding:10px}
.card .bd{padding:9px 10px 11px;display:flex;flex-direction:column;gap:5px;flex:1 1 auto}
.card .tt{font-size:13.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .mt{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.tag{font-size:10.5px;color:var(--tx3);border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;text-transform:uppercase;letter-spacing:.4px}
.tag.src{color:var(--acc);border-color:rgba(124,140,255,.35)}
.tag.adult{color:var(--acc3);border-color:rgba(244,114,182,.4)}

/* ---------- detail ---------- */
.dt{display:grid;grid-template-columns:230px 1fr;gap:24px;margin-bottom:26px}
.dt .cover{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.dt .cover img{width:100%;aspect-ratio:2/3;object-fit:cover}
.dt h1{margin:0 0 8px;font-size:25px;line-height:1.25}
.dt .meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.dt .syn{color:var(--tx2);font-size:14.5px;margin:0 0 16px;max-width:78ch}
.dt .acts{display:flex;gap:9px;flex-wrap:wrap}
.btn{border:0;border-radius:var(--r2);padding:11px 20px;font-weight:600;cursor:pointer}
.btn-pri{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#0b0d12}
.btn-sec{background:var(--card);border:1px solid var(--line);color:var(--tx)}
.btn-sec:hover{border-color:var(--line2)}
.chlist{display:grid;gap:7px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  max-height:520px;overflow:auto;padding-right:4px}
.chrow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);padding:9px 12px;cursor:pointer;transition:.14s}
.chrow:hover{border-color:var(--acc);background:var(--card2)}
.chrow .n{font-size:12px;color:var(--tx3);flex:0 0 auto;min-width:34px}
.chrow .t{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.chrow .d{font-size:11.5px;color:var(--tx3);flex:0 0 auto}

/* ---------- reader ---------- */
.rd{max-width:860px;margin:0 auto}
.rd-top{position:sticky;top:58px;z-index:50;background:rgba(11,13,18,.92);
  backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--r2);
  padding:9px 12px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.rd-top .ti{flex:1 1 auto;min-width:0;font-size:13.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rd-top .ti b{font-weight:600}
.rd-top .ti span{color:var(--tx3)}
.pg{display:flex;flex-direction:column;gap:6px;align-items:center}
.pg img{width:100%;max-width:860px;border-radius:6px;background:var(--card2);min-height:180px}
.rd-nav{display:flex;gap:10px;justify-content:space-between;margin:22px 0 40px}
.rd-nav button{flex:1 1 0}

/* ---------- misc ---------- */
.loading,.empty{color:var(--tx3);text-align:center;padding:44px 16px;font-size:14px}
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line2);
  border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite;
  vertical-align:-2px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.err{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);color:#fca5a5;
  border-radius:var(--r2);padding:12px 14px;font-size:13.5px;margin-bottom:14px}
.ftr{border-top:1px solid var(--line);margin-top:auto}
.ftr-in,.ftr-sub{max-width:var(--maxw);margin:0 auto;padding:16px;color:var(--tx3);font-size:12.5px}
.ftr-in{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-bottom:4px}
.ftr-sub{padding-top:0}
.dot{opacity:.5}

/* ---------- iklan ---------- */
/* Guard: atribut [hidden] WAJIB menang atas display apa pun di bawah ini.
   Tanpa ini, .ad-modal{display:grid} tetap menutupi layar & memblokir semua klik. */
[hidden]{display:none !important}
.ad-modal{position:fixed;inset:0;z-index:200;background:rgba(6,8,12,.82);
  backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px}
.ad-box{width:100%;max-width:560px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:18px;overflow:hidden;box-shadow:var(--sh);animation:pop .22s ease-out}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.ad-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;
  border-bottom:1px solid var(--line)}
.ad-tag{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tx3);
  border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.ad-count{font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums}
.ad-body{padding:20px 18px 8px}
.ad-title{margin:0 0 5px;font-size:17px;font-weight:700}
.ad-sub{margin:0 0 16px;color:var(--tx2);font-size:13.5px}
.ad-grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.ad-item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:10px 12px;font-size:13px;transition:.14s}
.ad-item:hover{border-color:var(--acc);background:var(--card2)}
.ad-item .go{color:var(--acc);font-size:12px;font-weight:600}
.ad-foot{padding:14px 18px 18px;display:flex;justify-content:flex-end}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--tx2);
  border-radius:var(--r2);padding:10px 18px;cursor:pointer;font-weight:600}
.btn-ghost:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost:not(:disabled){color:var(--tx);border-color:var(--line2)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg2);
    border-bottom:1px solid var(--line);flex-direction:column;padding:10px 14px;gap:2px}
  .nav.open{display:flex}
  .nav a{padding:11px 12px}
  .burger{display:grid}
  .dt{grid-template-columns:130px 1fr;gap:16px}
  .dt h1{font-size:19px}
  .dt .syn{font-size:13.5px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:11px}
  .card .tt{font-size:12.5px}
  .rd-top{top:52px}
}
@media (max-width:430px){
  .brand-txt{display:none}
  .dt{grid-template-columns:110px 1fr}
  .searchbar{flex-wrap:wrap}
  .searchbar select{max-width:100%;flex:1 1 100%}
}