/* ==========================================================================
   kc-violet — tema Komikcast
   Konsep "Aurora Glass": langit ungu gelap dengan cahaya aurora ungu-cyan,
   semua panel berupa kaca buram (backdrop-filter) bergaris tipis terang.
   Font: Outfit. Mode bawaan: dark.
   ========================================================================== */
:root{
  --bg:#120d22;
  --bg2:#1a1430;
  --violet:#8b5cf6;
  --cyan:#22d3ee;
  --grad:linear-gradient(120deg,#8b5cf6 0%,#6d6cf7 45%,#22d3ee 100%);
  --grad-soft:linear-gradient(120deg,rgba(139,92,246,.28),rgba(34,211,238,.18));
  --glass:rgba(34,25,64,.52);
  --glass-2:rgba(48,36,88,.55);
  --glass-hi:rgba(255,255,255,.07);
  --glass-line:rgba(196,181,253,.18);
  --glass-line-2:rgba(196,181,253,.32);
  --blur:blur(18px) saturate(1.4);
  --text:#eeeaff;
  --muted:#a9a0cc;
  --ink-violet:#c4b5fd;
  --ink-cyan:#67e8f9;
  --on-grad:#ffffff;
  --shadow:0 18px 50px -20px rgba(4,2,14,.85);
  --glow:0 14px 40px -12px rgba(139,92,246,.55),0 0 0 1px rgba(34,211,238,.25);
  --aurora-a:rgba(139,92,246,.38);
  --aurora-b:rgba(34,211,238,.20);
  --aurora-c:rgba(217,70,239,.16);
  --plate:rgba(20,14,40,.58);
  --plate-text:#ffffff;
  --plate-muted:#cfc6f3;
  --banner-veil:linear-gradient(180deg,rgba(18,13,34,.25) 0%,rgba(18,13,34,.55) 55%,rgba(18,13,34,.92) 100%);
  --skel-a:rgba(139,92,246,.10);
  --skel-b:rgba(139,92,246,.22);
  --focus:#67e8f9;
  color-scheme:dark;
}
:root[data-theme="dark"]{
  --bg:#120d22;--bg2:#1a1430;
  --glass:rgba(34,25,64,.52);--glass-2:rgba(48,36,88,.55);--glass-hi:rgba(255,255,255,.07);
  --glass-line:rgba(196,181,253,.18);--glass-line-2:rgba(196,181,253,.32);
  --text:#eeeaff;--muted:#a9a0cc;--ink-violet:#c4b5fd;--ink-cyan:#67e8f9;
  --shadow:0 18px 50px -20px rgba(4,2,14,.85);
  --aurora-a:rgba(139,92,246,.38);--aurora-b:rgba(34,211,238,.20);--aurora-c:rgba(217,70,239,.16);
  --plate:rgba(20,14,40,.58);--plate-text:#ffffff;--plate-muted:#cfc6f3;
  --banner-veil:linear-gradient(180deg,rgba(18,13,34,.25) 0%,rgba(18,13,34,.55) 55%,rgba(18,13,34,.92) 100%);
  --skel-a:rgba(139,92,246,.10);--skel-b:rgba(139,92,246,.22);--focus:#67e8f9;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3f0fc;--bg2:#ffffff;
  --glass:rgba(255,255,255,.62);--glass-2:rgba(255,255,255,.78);--glass-hi:rgba(255,255,255,.7);
  --glass-line:rgba(109,40,217,.14);--glass-line-2:rgba(109,40,217,.28);
  --text:#1c1433;--muted:#5b5378;--ink-violet:#6d28d9;--ink-cyan:#0e7490;
  --shadow:0 18px 44px -22px rgba(76,29,149,.35);
  --glow:0 14px 34px -14px rgba(109,40,217,.45),0 0 0 1px rgba(8,145,178,.3);
  --aurora-a:rgba(139,92,246,.22);--aurora-b:rgba(34,211,238,.20);--aurora-c:rgba(244,114,182,.12);
  --plate:rgba(255,255,255,.74);--plate-text:#1c1433;--plate-muted:#4c4470;
  --banner-veil:linear-gradient(180deg,rgba(40,20,90,.18) 0%,rgba(40,20,90,.42) 60%,rgba(40,20,90,.62) 100%);
  --skel-a:rgba(139,92,246,.08);--skel-b:rgba(139,92,246,.18);--focus:#0891b2;
  color-scheme:light;
}

/* ---------- dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;min-height:100vh;overflow-x:hidden;
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;position:relative;isolation:isolate;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vmax 34vmax at 8% -6%,var(--aurora-a),transparent 70%),
    radial-gradient(36vmax 30vmax at 100% 12%,var(--aurora-b),transparent 70%),
    radial-gradient(40vmax 34vmax at 60% 110%,var(--aurora-c),transparent 70%),
    var(--bg);
}
a{color:inherit}
img{max-width:100%}
button,input{font-family:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:10px}
::selection{background:rgba(139,92,246,.45);color:#fff}
.wrap{width:min(1240px,calc(100% - 32px));margin-inline:auto}
#view{min-height:60vh}
.muted{color:var(--muted)}
.ic{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;flex:none}
.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.global-err{margin:10px auto;width:min(1240px,calc(100% - 32px));padding:10px 16px;border-radius:14px;background:rgba(220,38,38,.85);color:#fff;font-size:14px;text-align:center}
.status{padding:44px 16px;text-align:center;color:var(--muted);font-size:15px}
.status .ic{vertical-align:-.2em;margin-right:4px;color:var(--ink-violet)}

/* panel kaca dasar */
.kcv-glass,.toolbar .filters,.genre-dd-btn,.genre-dd-menu,.suggest,.shelf,.d2-side,.d2-main,.page-static,.reader-head,.reader-nav,.pager,.disc-box,.site-footer .kcv-foot{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
}

/* tombol umum */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:8px 16px;border-radius:12px;
  border:1px solid var(--glass-line-2);background:var(--glass-hi);color:var(--text);
  font-size:14px;font-weight:600;text-decoration:none;line-height:1.2;
  transition:background .18s,border-color .18s,transform .18s,color .18s;
}
.btn:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--violet);background:rgba(139,92,246,.18)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.back{
  display:inline-flex;align-items:center;gap:6px;margin:18px 0 10px;padding:6px 14px 6px 10px;
  border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--text);font-size:13.5px;font-weight:500;text-decoration:none;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.back:hover{border-color:var(--cyan);color:var(--ink-cyan)}

/* ==========================================================================
   HEADER — pulau kaca melayang
   ========================================================================== */
.site-header{position:sticky;top:12px;z-index:50;padding:12px 0 0}
.kcv-island{
  width:min(1240px,calc(100% - 32px));margin:0 auto;
  display:flex;align-items:center;gap:22px;min-height:84px;padding:12px 14px 12px 22px;
  border-radius:26px;
  background:rgba(26,19,50,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
}
:root[data-theme="light"] .kcv-island{background:rgba(255,255,255,.66);box-shadow:var(--shadow),inset 0 1px 0 #fff}
.kcv-island::after{ /* garis aurora tipis di bawah pulau */
  content:"";position:absolute;left:28px;right:28px;bottom:-1px;height:2px;border-radius:2px;
  background:var(--grad);opacity:.85;
}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;line-height:0}
.brand-logo{height:var(--logo-h);width:auto;display:block}
.search{
  position:relative;flex:1;max-width:620px;margin-left:auto;
  display:flex;align-items:center;gap:8px;height:50px;padding:0 5px 0 16px;
  border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--glass-line);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
:root[data-theme="light"] .search{background:rgba(255,255,255,.75)}
.search:focus-within{border-color:var(--violet);box-shadow:0 0 0 4px rgba(139,92,246,.18)}
.kcv-search-ic{flex:none;color:var(--muted)}
.search input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  color:var(--text);font-size:15px;
}
.search input::placeholder{color:var(--muted);opacity:.9}
.search input::-webkit-search-cancel-button{cursor:pointer}
.search button{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;
  background:var(--grad);color:var(--on-grad);transition:transform .18s,filter .18s;
}
.search button:hover{transform:translateX(2px);filter:brightness(1.1)}
.kcv-tools{display:flex;align-items:center;gap:10px;flex:none}
.kcv-orb{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--glass-line-2);background:rgba(255,255,255,.06);color:var(--text);
  text-decoration:none;transition:border-color .2s,color .2s,transform .2s,background .2s;
}
:root[data-theme="light"] .kcv-orb{background:rgba(255,255,255,.8)}
.kcv-orb:hover{border-color:var(--cyan);color:var(--ink-cyan);transform:rotate(-8deg)}
.fav-link svg{color:var(--ink-violet)}
.kcv-moon{display:none}
:root[data-theme="light"] .kcv-sun{display:none}
:root[data-theme="light"] .kcv-moon{display:block}

/* saran pencarian */
.suggest{
  position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;max-height:min(440px,70vh);overflow:auto;
  padding:6px;border-radius:18px;background:rgba(26,19,50,.92);box-shadow:var(--shadow);
}
:root[data-theme="light"] .suggest{background:rgba(255,255,255,.96)}
.suggest-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;text-decoration:none;color:var(--text)}
.suggest-item:hover,.suggest-item:focus-visible{background:var(--grad-soft)}
.suggest-item img{width:42px;height:58px;object-fit:cover;border-radius:8px;flex:none;background:var(--bg2)}
.s-info{display:flex;flex-direction:column;min-width:0}
.s-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ==========================================================================
   BERANDA — hero "panggung + antrian"
   ========================================================================== */
.home-hero{margin:26px 0 6px}
.hero-track{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:repeat(5,minmax(0,1fr));
  gap:10px;min-height:400px;counter-reset:kcv-q 1;
}
.hero-item{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);min-width:0;overflow:hidden}
.hero-item.skeleton{grid-column:1/-1;grid-row:1/-1;border-radius:28px;background:linear-gradient(100deg,var(--skel-a) 30%,var(--skel-b) 50%,var(--skel-a) 70%);background-size:300% 100%;animation:kcv-shine 1.4s linear infinite}
/* panggung utama */
.hero-item.is-first{
  grid-column:1;grid-row:1/-1;padding:36px 44px;gap:34px;border-radius:28px;isolation:isolate;
  border:1px solid var(--glass-line-2);color:#fff;
  box-shadow:var(--shadow);
}
.hero-item.is-first .hero-bg{
  position:absolute;inset:-30px;z-index:-2;background-size:cover;background-position:center 30%;
  filter:blur(26px) saturate(1.5) brightness(.75);transform:scale(1.1);
}
.hero-item.is-first::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 90% at 0% 100%,rgba(139,92,246,.75),transparent 70%),
    radial-gradient(50% 70% at 100% 0%,rgba(34,211,238,.45),transparent 70%),
    linear-gradient(90deg,rgba(18,13,34,.82),rgba(18,13,34,.35));
}
.hero-item.is-first::after{ /* kilau kaca */
  content:"";position:absolute;top:0;left:0;right:0;height:50%;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent);pointer-events:none;
}
.hero-item.is-first .hero-info{order:1;flex:1}
.hero-item.is-first .hero-cover{
  order:2;flex:none;width:210px;aspect-ratio:2/3;height:auto;object-fit:cover;border-radius:20px;
  transform:perspective(900px) rotateY(-14deg) rotateZ(2deg);
  box-shadow:-18px 24px 50px -10px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.25);
  transition:transform .4s ease;
}
.hero-item.is-first:hover .hero-cover{transform:perspective(900px) rotateY(-4deg) rotateZ(0)}
.hero-info{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.hero-type{
  display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.hero-title{margin:0;font-weight:700;line-height:1.15;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.hero-item.is-first .hero-title{font-size:40px;letter-spacing:-.02em;-webkit-line-clamp:3;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-meta{margin:0;font-size:14px;color:rgba(255,255,255,.82)}
.hero-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:12px 22px;border-radius:14px;
  background:var(--grad);color:#fff;font-weight:600;font-size:15px;
  box-shadow:0 12px 26px -10px rgba(139,92,246,.9);
}
/* antrian di kanan */
.hero-item:not(.is-first):not(.skeleton){
  grid-column:2;padding:8px 12px 8px 8px;border-radius:18px;
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:border-color .2s,transform .2s,background .2s;
}
.hero-item:not(.is-first):not(.skeleton):hover{border-color:var(--cyan);transform:translateX(-4px);background:var(--glass-2)}
.hero-item:not(.is-first) .hero-bg,.hero-item:not(.is-first) .hero-cta,.hero-item:not(.is-first) .hero-type{display:none}
.hero-item:not(.is-first):not(.skeleton)::before{
  counter-increment:kcv-q;content:"0" counter(kcv-q);order:3;margin-left:auto;flex:none;
  font-size:22px;font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;
}
.hero-item:not(.is-first) .hero-cover{width:46px;height:62px;object-fit:cover;border-radius:10px;flex:none;background:var(--bg2)}
.hero-item:not(.is-first) .hero-info{gap:2px;flex:1}
.hero-item:not(.is-first) .hero-title{font-size:14.5px;font-weight:600;-webkit-line-clamp:1}
.hero-item:not(.is-first) .hero-meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ==========================================================================
   TOOLBAR / CHIP / GENRE
   ========================================================================== */
.home-one,.home-main{min-width:0}
.toolbar{display:flex;align-items:center;gap:12px;margin:26px 0 6px}
.toolbar .filters{
  flex:1;min-width:0;display:flex;gap:4px;padding:5px;border-radius:18px;
  overflow-x:auto;scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:13px;
  border:0;background:transparent;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;
  transition:color .18s,background .18s;
}
.chip .ic{color:var(--ink-violet)}
.chip:hover{color:var(--text);background:rgba(139,92,246,.12)}
.chip.is-active{background:var(--grad);color:#fff;box-shadow:0 8px 20px -10px rgba(139,92,246,.9)}
.chip.is-active .ic{color:#fff}
.genre-dd{position:relative;flex:none}
.genre-dd-btn{
  display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 18px;border-radius:18px;
  color:var(--text);font-size:14px;font-weight:600;
}
.genre-dd-btn:hover{border-color:var(--cyan)}
.genre-dd-btn svg{color:var(--ink-cyan)}
.genre-dd-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(520px,calc(100vw - 32px));max-height:360px;overflow:auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px;padding:10px;border-radius:18px;
  background:rgba(26,19,50,.94);box-shadow:var(--shadow);
}
:root[data-theme="light"] .genre-dd-menu{background:rgba(255,255,255,.97)}
.genre-item{padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:13.5px;text-align:left}
.genre-item:hover{background:rgba(139,92,246,.16)}
.genre-item.sel{background:var(--grad);color:#fff;font-weight:600}

.result-head{margin:22px 0 16px}
.result-head h1{
  display:flex;align-items:center;gap:10px;margin:0;font-size:26px;font-weight:700;letter-spacing:-.01em;
}
.result-head h1 .ic{color:var(--ink-cyan)}
.result-head h1::after{content:"";flex:1;height:1px;margin-left:8px;background:linear-gradient(90deg,var(--glass-line-2),transparent)}
.result-head p{margin:4px 0 0;font-size:14px}

/* ==========================================================================
   KARTU — overlay dengan pelat kaca melayang
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:18px}
#homeGrid{min-height:200px}
a.card{text-decoration:none}
.card{
  position:relative;display:block;aspect-ratio:5/7;border-radius:22px;overflow:hidden;isolation:isolate;
  border:1.5px solid transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,linear-gradient(150deg,rgba(139,92,246,.7),rgba(255,255,255,.08) 45%,rgba(34,211,238,.6)) border-box;
  color:var(--plate-text);box-shadow:0 12px 30px -18px rgba(0,0,0,.8);
  transition:transform .25s ease,box-shadow .25s ease;
  animation:kcv-rise .4s ease both;
}
.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--glow)}
.card-cover{position:absolute;inset:0;z-index:-1;background:var(--bg2)}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card:hover .card-cover img{transform:scale(1.07)}
.card-badge{
  position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:11.5px;font-weight:600;line-height:1.3;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.6);
}
.card-fav{
  position:absolute;top:9px;right:9px;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:rgba(18,13,34,.5);border:1px solid rgba(255,255,255,.3);color:#f0abfc;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.card-fav .ic{fill:currentColor;width:14px;height:14px;vertical-align:0}
.card-body{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  display:flex;flex-direction:column;gap:2px;padding:9px 11px 10px;border-radius:15px;
  background:var(--plate);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.card-title{font-size:14px;font-weight:600;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:11.5px;color:var(--plate-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* skeleton */
.skeleton{border-radius:22px;overflow:hidden;border:1px solid var(--glass-line);background:var(--glass)}
.sk-cover,.sk-line{background:linear-gradient(100deg,var(--skel-a) 30%,var(--skel-b) 50%,var(--skel-a) 70%);background-size:300% 100%;animation:kcv-shine 1.4s linear infinite}
.sk-cover{aspect-ratio:5/6}
.sk-line{height:11px;margin:10px 12px;border-radius:6px}
.sk-line.short{width:55%}
@keyframes kcv-shine{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes kcv-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* pager */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:30px auto 10px;padding:10px;border-radius:20px;width:fit-content;max-width:100%}
.pager-nums{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.pager-num{min-width:40px;padding:8px 10px}
.pager-num.is-cur{background:var(--grad);border-color:transparent;color:#fff}
.pager-gap{color:var(--muted);padding:0 2px}
.pager-info{width:100%;text-align:center;font-size:13px;order:5}

/* Lanjut Baca */
.shelf{margin:22px 0 6px;padding:16px 18px 12px;border-radius:24px}
.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-size:18px;font-weight:700}
.shelf-title .ic{color:var(--ink-cyan)}
.shelf-clear{border:0;background:none;color:var(--muted);font-size:13px;padding:4px 8px;border-radius:8px}
.shelf-clear:hover{color:var(--ink-violet);background:rgba(139,92,246,.12)}
#homeGrid>.shelf-title{margin:26px 0 14px}
.row{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--glass-line-2) transparent}
.rcard-wrap{position:relative;flex:0 0 116px}
.rcard{display:block;text-decoration:none;color:var(--text)}
.rcard-cover{aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--bg2);border:1px solid var(--glass-line)}
.rcard-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rcard-title{margin-top:6px;font-size:12.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard-sub{font-size:12px;font-weight:600;color:var(--ink-cyan)}
.rcard-x,.fav-x{
  position:absolute;top:6px;right:6px;z-index:4;display:grid;place-items:center;width:26px;height:26px;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(18,13,34,.6);color:#fff;font-size:17px;line-height:1;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.rcard-x:hover,.fav-x:hover{background:var(--violet)}
.fav-wrap{position:relative}
.fav-wrap .fav-x{top:9px;right:9px;width:28px;height:28px}
.fav-wrap .card-fav{right:44px}

/* ==========================================================================
   DETAIL — billboard bulat + dua panel kaca menumpang
   ========================================================================== */
.d2{position:relative;overflow-x:clip;padding-bottom:10px}
.d2-hero{
  position:relative;width:min(1240px,calc(100% - 32px));height:330px;margin:24px auto 0;border-radius:32px;overflow:hidden;
  background-size:cover;background-position:center 25%;isolation:isolate;
  border:1px solid var(--glass-line);
}
.d2-hero::before{ /* garis kisi tipis */
  content:"";position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
}
.d2-hero::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(60% 120% at 0% 0%,rgba(139,92,246,.6),transparent 70%),radial-gradient(50% 100% at 100% 100%,rgba(34,211,238,.45),transparent 70%),var(--banner-veil);
}
.d2-wrap{position:relative;z-index:3;margin-top:-330px;padding:0 26px}
.d2-wrap>.back{margin:20px 0 0;background:rgba(18,13,34,.45);color:#fff;border-color:rgba(255,255,255,.25)}
.d2-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start;padding-top:130px}
.d2-main{order:1;min-width:0;padding:30px 32px 30px;border-radius:26px;box-shadow:var(--shadow)}
.d2-side{order:2;min-width:0;padding:16px;border-radius:26px;box-shadow:var(--shadow);position:sticky;top:120px}
.d2-cover{position:relative;aspect-ratio:2/3;border-radius:18px;overflow:hidden;background:var(--bg2);box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.d2-cover img{width:100%;height:100%;object-fit:cover;display:block}
.d2-flag{
  position:absolute;bottom:10px;right:10px;padding:4px 10px;border-radius:999px;
  background:rgba(18,13,34,.55);border:1px solid rgba(255,255,255,.3);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:11.5px;font-weight:700;letter-spacing:.1em;
}
.d2-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.d2-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 10px;border-radius:13px;
  border:1px solid var(--glass-line-2);background:var(--glass-hi);color:var(--text);
  font-size:13.5px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;
  transition:border-color .18s,background .18s,color .18s;
}
.d2-btn:hover{border-color:var(--violet);background:rgba(139,92,246,.16)}
#readBtn{grid-column:1/-1;order:-2;min-height:50px;border:0;background:var(--grad);color:#fff;font-size:15px;box-shadow:0 12px 26px -12px rgba(139,92,246,.95)}
#readBtn:hover{filter:brightness(1.08)}
#rlBtn{grid-column:1/-1;order:-1}
.d2-btn.primary .ic{color:var(--ink-violet)}
.d2-btn.on{border-color:var(--cyan);color:var(--ink-cyan);background:rgba(34,211,238,.12)}
.d2-btn.on .ic{color:var(--ink-cyan)}
.d2-btn.disabled{opacity:.5;pointer-events:none;grid-column:1/-1;order:-2}
.d2-meta{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.d2-meta li{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:14px;background:var(--glass-hi);border:1px solid var(--glass-line);min-width:0}
.d2-mk{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.d2-mk .ic{color:var(--ink-cyan)}
.d2-mv{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.d2-title{
  margin:0 0 10px;font-size:38px;font-weight:800;line-height:1.12;letter-spacing:-.02em;overflow-wrap:anywhere;
  background:linear-gradient(110deg,var(--text) 40%,var(--ink-violet) 75%,var(--ink-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.d2-alt{margin-bottom:12px}
.d2-alt-label{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-cyan)}
.d2-alt-val{font-size:14px;color:var(--muted);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.d2-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.d2-badges:empty{display:none}
.d2-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--grad-soft);border:1px solid var(--glass-line-2);font-size:13px;font-weight:500}
.d2-chip .ic{color:var(--ink-violet)}
.d2-tabs{display:inline-flex;gap:4px;padding:5px;margin-bottom:6px;border-radius:16px;background:var(--glass-hi);border:1px solid var(--glass-line)}
.d2-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:14.5px;font-weight:600}
.d2-tab:hover{color:var(--text)}
.d2-tab.active{background:var(--grad);color:#fff;box-shadow:0 8px 20px -10px rgba(139,92,246,.9)}
.d2-tab i{font-style:normal;font-size:12px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.18)}
.d2-tab:not(.active) i{background:rgba(139,92,246,.18);color:var(--ink-violet)}
.d2-tab i:empty{display:none}
.d2-panel{min-width:0}
.d2-h{display:flex;align-items:center;gap:8px;margin:22px 0 10px;font-size:17px;font-weight:700}
.d2-h::before{content:"";width:18px;height:4px;border-radius:4px;background:var(--grad)}
.d2-recs-head .d2-h::before{display:none}
.d2-h .ic{color:var(--ink-cyan)}
.d2-syn{font-size:15px;line-height:1.75;color:var(--text);opacity:.92;white-space:pre-line}
.d2-more{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 12px;border-radius:999px;border:1px solid var(--glass-line-2);background:transparent;color:var(--ink-violet);font-size:13px;font-weight:600}
.d2-more:hover{border-color:var(--violet)}
.d2-genres{display:flex;flex-wrap:wrap;gap:8px}
.d2-genre{padding:6px 14px;border-radius:999px;border:1px solid var(--glass-line-2);background:var(--glass-hi);color:var(--text);font-size:13.5px;font-weight:500;transition:.18s}
.d2-genre:hover{background:var(--grad);border-color:transparent;color:#fff}
.d2-recs{margin-top:8px}
.d2-recs-head h2{margin-top:26px}
.d2-recs-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--glass-line-2) transparent}
.d2-recs-row .grid{display:flex;gap:14px}
.d2-recs-row .skeleton{flex:0 0 130px}
.rec-card{flex:0 0 130px;scroll-snap-align:start;text-decoration:none;color:var(--text)}
.rec-cover{aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--bg2);border:1px solid var(--glass-line);transition:border-color .2s,transform .2s}
.rec-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rec-card:hover .rec-cover{border-color:var(--cyan);transform:translateY(-3px)}
.rec-title{margin-top:6px;font-size:13px;font-weight:600;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;flex-wrap:wrap;gap:10px;margin:16px 0 12px;font-size:14px}
.ch-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:640px;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--glass-line-2) transparent}
.ch-item{
  display:flex;align-items:center;gap:10px;min-width:0;padding:11px 14px;border-radius:14px;
  background:var(--glass-hi);border:1px solid var(--glass-line);text-decoration:none;color:var(--text);font-size:14px;
  transition:border-color .18s,background .18s;
}
.ch-item:hover{border-color:var(--violet);background:rgba(139,92,246,.14)}
.ch-no{flex:none;font-weight:700}
.ch-no .ic{color:var(--ink-cyan)}
.ch-name{flex:1;min-width:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-side{flex:none;font-size:12px;color:var(--muted)}
.ch-item.read{opacity:.6}
.ch-item.read .ch-no{color:var(--ink-cyan)}

/* ==========================================================================
   READER
   ========================================================================== */
.reader-wrap{width:min(880px,100%);margin:0 auto;padding:0 16px 60px}
.reader-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;padding:10px 12px;border-radius:20px}
.reader-head .back{margin:0;max-width:60%}
.reader-title{flex:1;min-width:0;font-size:15px;font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-nav{display:flex;align-items:center;gap:10px;margin:12px 0;padding:8px;border-radius:18px}
.reader-nav .btn{flex:1}
.reader-nav .btn-list{flex:1.4;background:var(--grad);border:0;color:#fff}
.reader-nav .btn-list:hover:not(:disabled){filter:brightness(1.08);background:var(--grad)}
.pages{display:flex;flex-direction:column;gap:0;border-radius:18px;overflow:hidden;background:#07050f;border:1px solid var(--glass-line)}
.ch-block{display:flex;flex-direction:column;width:100%}
.ch-block img.page,img.page{display:block;width:100%;height:auto;margin:0}
.chapter-sep{
  padding:14px 12px;text-align:center;font-size:14px;font-weight:600;letter-spacing:.04em;color:#fff;
  background:linear-gradient(90deg,rgba(139,92,246,.55),rgba(34,211,238,.4));
}
.ch-block .status{color:#d6d0f5}
.sentinel{height:4px}
.reader-end{padding:30px 14px;text-align:center;color:var(--muted);line-height:2}
.reader-end .ic{width:1.4em;height:1.4em;vertical-align:-.3em;color:#facc15}
.reader-end .btn{margin-top:8px}

/* ==========================================================================
   HALAMAN STATIS + SSR
   ========================================================================== */
.page-static{width:min(860px,calc(100% - 32px));margin:24px auto 0;padding:10px 34px 30px;border-radius:28px;box-shadow:var(--shadow)}
.page-static h1{margin:8px 0 14px;font-size:30px;font-weight:800;letter-spacing:-.01em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%}
.page-static h2{margin:24px 0 8px;font-size:19px;font-weight:700}
.page-static p,.page-static li{font-size:15px;line-height:1.75;color:var(--text);opacity:.94}
.page-static ul{padding-left:20px;margin:8px 0}
.page-static li{margin:4px 0}
.page-static li::marker{color:var(--violet)}
.page-static a{color:var(--ink-cyan)}
.social-links{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 18px}
.social-links a{display:inline-flex;align-items:center;padding:9px 18px;border-radius:14px;border:1px solid var(--glass-line-2);background:var(--glass-hi);color:var(--text);font-weight:600;font-size:14px;text-decoration:none;transition:.18s}
.social-links a:hover{background:var(--grad);border-color:transparent;color:#fff}

.seo-h1{font-size:1.5rem;margin:22px 0 12px}
.seo-detail{padding-top:14px}
.seo-detail h1{font-size:1.6rem;line-height:1.2;margin:6px 0 10px;overflow-wrap:anywhere}
.seo-detail h2{font-size:1.1rem;margin:20px 0 10px}
.seo-cover{display:block;max-width:180px;height:auto;margin:8px 0 14px;border-radius:18px;border:1px solid var(--glass-line)}
.seo-meta{margin:0 0 12px;color:var(--muted);font-size:.92rem}
.seo-genres{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.seo-genre{padding:6px 14px;border-radius:999px;border:1px solid var(--glass-line-2);background:var(--glass);color:var(--text);font-size:.85rem;text-decoration:none}
.seo-desc{line-height:1.75;margin:0 0 8px}
.seo-chapters{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.seo-chapters a{display:block;padding:10px 14px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line);color:var(--text);text-decoration:none}

/* ==========================================================================
   FOOTER — panel kaca dengan orbit genre
   ========================================================================== */
.site-footer{margin-top:56px;padding:0 0 22px;color:var(--muted);font-size:14px}
.kcv-foot{
  width:min(1240px,calc(100% - 32px));margin:0 auto;padding:30px 32px;border-radius:30px;
  display:grid;grid-template-columns:1.4fr .8fr .8fr 1.6fr;gap:28px;position:relative;overflow:hidden;
}
.kcv-foot::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.kcv-foot::after{content:"";position:absolute;width:280px;height:280px;right:-80px;bottom:-140px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.22),transparent 70%);pointer-events:none}
.kcv-foot-logo{display:inline-block;line-height:0}
.kcv-foot-logo img{height:38px;width:auto;display:block}
.kcv-foot-tag{margin:12px 0 0;line-height:1.6;max-width:300px}
.kcv-foot-h{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-cyan)}
.kcv-foot-col{display:flex;flex-direction:column;gap:7px}
.kcv-foot-col a{color:var(--text);text-decoration:none;width:fit-content}
.kcv-foot-col a:hover{color:var(--ink-violet)}
.kcv-orbit{display:flex;flex-wrap:wrap;gap:7px}
.kcv-orbit a{padding:5px 12px;border-radius:999px;border:1px solid var(--glass-line-2);color:var(--text);font-size:13px;text-decoration:none;transition:.18s}
.kcv-orbit a:hover{background:var(--grad);border-color:transparent;color:#fff}
.kcv-foot-base{width:min(1240px,calc(100% - 32px));margin:14px auto 0;padding:0 8px;text-align:center}
.footer-note{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}

/* ==========================================================================
   POPUP — disclaimer, iklan antar-chapter, toast
   ========================================================================== */
.disc-overlay{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(8,5,20,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
:root[data-theme="light"] .disc-overlay{background:rgba(60,30,120,.28)}
.disc-box{
  position:relative;width:min(480px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:28px 26px 20px;border-radius:28px;
  background:rgba(30,22,58,.82);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);text-align:center;color:var(--text);
}
:root[data-theme="light"] .disc-box{background:rgba(255,255,255,.9)}
.disc-box::before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 3px 3px;background:var(--grad)}
.disc-box h2{margin:0 0 12px;font-size:21px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.disc-box h2 .ic{color:#facc15}
:root[data-theme="light"] .disc-box h2 .ic{color:#d97706}
.disc-box p{margin:0 0 10px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.disc-box p a{color:var(--ink-cyan);font-weight:600}
.disc-btn{display:block;width:100%;margin:16px 0 12px;padding:13px 18px;border:0;border-radius:15px;background:var(--grad);color:#fff;font-size:15.5px;font-weight:600;box-shadow:0 12px 28px -12px rgba(139,92,246,.95)}
.disc-btn:hover{filter:brightness(1.08)}
.disc-links{font-size:13px;color:var(--muted)}
.disc-links a{color:var(--ink-violet);text-decoration:none}
.disc-links a:hover{text-decoration:underline}

dialog.chapter-banner-popup{
  position:fixed;inset:0;margin:auto;padding:0;border:1px solid rgba(196,181,253,.35);border-radius:20px;
  width:min(440px,calc(100vw - 32px));height:fit-content;max-height:90vh;max-height:90dvh;overflow:auto;
  background:#1a1430;color:#fff;box-shadow:0 24px 70px -10px rgba(0,0,0,.8),0 0 0 4px rgba(139,92,246,.18);
}
dialog.chapter-banner-popup::backdrop{background:rgba(8,5,20,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.chapter-banner-close{
  position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:30px;height:30px;padding:0;
  border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(18,13,34,.7);color:#fff;font-size:19px;line-height:1;
}
.chapter-banner-close:hover{background:var(--violet)}
.chapter-banner-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.chapter-banner-link{display:block;line-height:0}
.chapter-banner-link img{display:block;width:100%;height:auto}

.mv-toast{
  position:fixed;left:50%;bottom:26px;z-index:300;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  max-width:calc(100vw - 32px);padding:11px 20px;border-radius:14px;
  background:rgba(30,22,58,.9);border:1px solid rgba(196,181,253,.35);color:#fff;font-size:14px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);
  transition:opacity .25s,transform .25s;overflow-wrap:anywhere;
}
.mv-toast.show{opacity:1;transform:translate(-50%,0)}

/* ==========================================================================
   RESPONSIF
   ========================================================================== */
@media (max-width:1100px){
  .hero-track{grid-template-columns:minmax(0,1fr) 290px}
  .hero-item.is-first{padding:30px;gap:24px}
  .hero-item.is-first .hero-title{font-size:32px}
  .hero-item.is-first .hero-cover{width:170px}
  .kcv-foot{grid-template-columns:1fr 1fr 1fr}
  .kcv-foot-genres{grid-column:1/-1}
}
@media (max-width:900px){
  .hero-track{display:flex;flex-wrap:wrap;gap:10px;min-height:0}
  .hero-item.is-first{flex:1 1 100%;min-height:280px}
  .hero-item:not(.is-first):not(.skeleton){flex:1 1 calc(50% - 5px)}
  .hero-item.skeleton{flex:1 1 100%;min-height:280px}
  .d2-grid{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:110px}
  .d2-side{order:1;position:static;display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start}
  .d2-cover{grid-row:1/3}
  .d2-actions{margin-top:0}
  .d2-meta{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
  .d2-main{order:2}
}
@media (max-width:680px){
  body{font-size:14.5px}
  .wrap{width:calc(100% - 24px)}
  .site-header{position:relative;top:0;padding-top:10px}
  .kcv-island{width:calc(100% - 20px);flex-wrap:wrap;gap:10px 12px;min-height:0;padding:10px 10px 12px 14px;border-radius:22px}
  .kcv-island::after{left:20px;right:20px}
  .brand-logo{height:var(--logo-h-m)}
  .kcv-tools{margin-left:auto;gap:8px}
  .kcv-orb{width:42px;height:42px}
  .search{order:3;flex:1 1 100%;max-width:none;margin:0;height:46px}
  .search button{width:36px;height:36px}

  .home-hero{margin-top:16px}
  .hero-track{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -12px;padding:0 12px 4px;gap:10px;scroll-padding-inline:12px}
  .hero-track::-webkit-scrollbar{display:none}
  .hero-item.is-first{flex:0 0 88%;min-height:250px;padding:20px 18px;gap:14px;border-radius:24px;scroll-snap-align:start}
  .hero-item.is-first .hero-cover{width:104px;border-radius:14px;transform:perspective(700px) rotateY(-10deg)}
  .hero-item.is-first .hero-title{font-size:21px;-webkit-line-clamp:3}
  .hero-item.is-first .hero-meta{font-size:12.5px}
  .hero-cta{padding:9px 14px;font-size:13.5px;margin-top:6px}
  .hero-item:not(.is-first):not(.skeleton){flex:0 0 62%;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;padding:12px;scroll-snap-align:start}
  .hero-item:not(.is-first):not(.skeleton)::before{position:absolute;top:12px;right:12px}
  .hero-item:not(.is-first) .hero-cover{width:64px;height:88px}
  .hero-item:not(.is-first) .hero-info{flex:none;width:100%}
  .hero-item:not(.is-first) .hero-title{-webkit-line-clamp:2;font-size:14px}
  .hero-item.skeleton{flex:0 0 100%;min-height:250px}

  .toolbar{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
  .toolbar .filters{flex:none;width:100%;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:40px}
  .chip{padding:8px 13px;font-size:13.5px}
  .genre-dd-btn{width:100%;justify-content:space-between;height:46px}
  .genre-dd-menu{left:0;right:0;width:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-head h1{font-size:21px}

  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{border-radius:18px}
  .card-body{left:6px;right:6px;bottom:6px;padding:8px 9px;border-radius:12px}
  .card-title{font-size:13.5px}
  .card-badge{top:8px;left:8px;font-size:11px;padding:3px 8px}
  .shelf{padding:14px 12px 10px;border-radius:20px}
  .shelf-title{font-size:16px}
  .rcard-wrap{flex-basis:100px}
  .pager{width:100%;border-radius:18px}
  .pager>.btn:not(.pager-num){flex:1}

  .d2-hero{width:calc(100% - 24px);height:230px;margin-top:14px;border-radius:24px}
  .d2-wrap{margin-top:-230px;padding:0 12px}
  .d2-wrap>.back{margin-top:12px}
  .d2-grid{padding-top:70px}
  .d2-side{grid-template-columns:118px minmax(0,1fr);gap:12px;padding:12px;border-radius:22px}
  .d2-cover{grid-row:auto;border-radius:14px}
  .d2-actions{grid-column:1/-1;gap:8px}
  .d2-side{grid-template-rows:auto}
  .d2-meta{grid-column:2;grid-row:1;grid-template-columns:1fr;gap:5px;align-self:center}
  .d2-meta li{padding:5px 9px;flex-direction:row;justify-content:space-between;align-items:center;gap:8px}
  .d2-mk{font-size:10.5px;flex:none}
  .d2-mv{font-size:12.5px;text-align:right;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .d2-btn{font-size:13px;min-height:42px}
  .d2-main{padding:20px 16px;border-radius:22px}
  .d2-title{font-size:26px}
  .d2-tabs{display:flex}
  .d2-tab{flex:1;justify-content:center;padding:9px 10px}
  .ch-list{grid-template-columns:1fr;max-height:none;overflow:visible;padding-right:0}
  .rec-card,.d2-recs-row .skeleton{flex-basis:112px}

  .reader-wrap{padding:0 0 50px}
  .reader-head{margin:12px 12px 0;border-radius:18px}
  .reader-head .back{max-width:100%}
  .reader-title{flex:1 1 100%;font-size:14px}
  .reader-nav{margin:10px 12px}
  .reader-nav .btn{padding:8px 10px;font-size:13.5px}
  .pages{border-radius:0;border-left:0;border-right:0}

  .page-static{width:calc(100% - 24px);padding:6px 18px 24px;border-radius:22px}
  .page-static h1{font-size:24px}

  .site-footer{margin-top:40px}
  .kcv-foot{width:calc(100% - 24px);grid-template-columns:1fr 1fr;padding:24px 20px;gap:22px;border-radius:24px}
  .kcv-foot-brand,.kcv-foot-genres{grid-column:1/-1}
  .kcv-foot-base{width:calc(100% - 24px)}
  .disc-box{padding:24px 18px 16px;border-radius:24px}
  .disc-box h2{font-size:19px}
}
@media (max-width:380px){
  .kcv-orb{width:38px;height:38px}
  .d2-side{grid-template-columns:104px minmax(0,1fr)}
  .d2-btn{font-size:12.5px;padding:8px 6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}