:root{--bg:#F3EAD3;--ink:#252422;--muted:#6A6354;--line:rgba(37,36,34,.16);--link:#3547A5;--parch:#E7D6B1;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1C1B19;--ink:#EDE3CB;--muted:#A59C88;--line:rgba(231,214,177,.16);--link:#9AA8EE}}
:root[data-theme="dark"]{--bg:#1C1B19;--ink:#EDE3CB;--muted:#A59C88;--line:rgba(231,214,177,.16);--link:#9AA8EE}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 Poppins,system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px}
.wrap{max-width:1100px;margin:20px auto;padding:0 20px}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:baseline;gap:10px;padding-top:12px;padding-bottom:12px}
.mark{font:600 1.5rem/1 "Grenze Gotisch",Georgia,serif;text-decoration:none}
header span{color:var(--muted);font-size:.9rem}

/* hero slider */
.hero{background:radial-gradient(120% 90% at 20% 0%,#4458BD 0%,#3547A5 55%,#2A397F 100%);color:var(--parch)}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track:focus-visible{outline:2px solid var(--parch);outline-offset:-4px}
.slide{flex:0 0 100%;scroll-snap-align:start}
.inner{max-width:1100px;margin:0 auto;padding:28px 20px 12px;display:grid;grid-template-columns:minmax(110px,40%) 1fr;grid-template-areas:"cover head" "body body";gap:14px 18px}
.hc{grid-area:cover}.hh{grid-area:head;align-self:end}.hb{grid-area:body}
.tag{display:inline-block;margin-bottom:8px;padding:3px 11px;border:1px solid rgba(231,214,177,.55);border-radius:999px;font-size:.78rem;font-weight:500}
.slide h1{font:600 clamp(1.9rem,8vw,3.6rem)/1.02 "Grenze Gotisch",Georgia,serif;margin:0 0 6px}
.sub{margin:0;font-weight:500;font-size:.9rem;opacity:.9}
.blurb{margin:0 0 16px;max-width:46ch;opacity:.88}
.meter{max-width:360px;margin-bottom:18px}
.meter b{display:block;height:3px;border-radius:3px;background:rgba(231,214,177,.28);overflow:hidden}
.meter i{display:block;height:100%;background:var(--parch)}
.meter p{margin:6px 0 0;font-size:.82rem;opacity:.9}
.btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-block;padding:11px 20px;border-radius:999px;font-weight:600;font-size:.92rem;text-decoration:none;border:1.5px solid var(--parch);color:var(--parch)}
.btn.fill{background:var(--parch);color:#252422}
.btn:hover{filter:brightness(1.08)}
.bm{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--parch);background:none;color:var(--parch);cursor:pointer}
.bm svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.bm[aria-pressed="true"]{background:var(--parch);color:#252422}
.bm[aria-pressed="true"] svg{fill:currentColor}
.dots{max-width:1100px;margin:0 auto;padding:0 12px 14px;display:flex;gap:0}
.dots button{width:24px;height:24px;padding:8px;border:0;background:rgba(231,214,177,.4);background-clip:content-box;border-radius:999px;cursor:pointer;transition:width .25s}
.dots button[aria-current="true"]{width:42px;background-color:var(--parch)}
@media (min-width:760px){
.inner{grid-template-columns:260px 1fr;grid-template-areas:"cover head" "cover body";grid-template-rows:auto 1fr;gap:18px 48px;padding-top:52px;padding-bottom:20px}
.hb{align-self:start}.dots{padding:0 20px 28px}}

/* cover */
.cover{--bgc:linear-gradient(160deg,#3547A5,#1E2A66);--fgc:#E7D6B1;aspect-ratio:2/3;border-radius:5px 10px 10px 5px;padding:12% 11% 11% 14%;display:flex;flex-direction:column;justify-content:space-between;background:var(--bgc);color:var(--fgc);box-shadow:inset 6px 0 0 rgba(0,0,0,.2),0 6px 16px rgba(0,0,0,.22);transition:transform .2s}
.cover small{font-size:.7rem;font-weight:500;opacity:.85}
.ct{font:600 clamp(.95rem,4.4vw,1.15rem)/1.1 "Grenze Gotisch",Georgia,serif}
.slide .cover{box-shadow:inset 6px 0 0 rgba(0,0,0,.25),0 14px 36px rgba(0,0,0,.4)}
.slide .ct{font-size:clamp(1.15rem,5.4vw,1.7rem)}

/* grid */
main{padding-top:36px;padding-bottom:56px}
h2{font-size:1.25rem;margin:0 0 4px}
.lead{margin:0 0 22px;color:var(--muted);font-size:.92rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 16px}
.novel{display:block;text-decoration:none}
.novel:hover .cover{transform:translateY(-3px)}
.nt{font-weight:600;font-size:.92rem;line-height:1.3;margin:11px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.na{color:var(--muted);font-size:.8rem;margin:0 0 8px}
.novel .meter b{background:var(--line)}
.novel .meter i{background:var(--link)}
.novel .meter p{color:var(--muted);font-size:.75rem;opacity:1}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
footer .wrap{padding-top:20px;padding-bottom:28px}
@media (prefers-reduced-motion:reduce){.cover,.dots button{transition:none}.novel:hover .cover{transform:none}}

/* tombol masuk/keluar, cover gambar, hero kosong */
#auth{margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font:500 .85rem Poppins,system-ui,sans-serif;color:inherit;cursor:pointer}
#auth:hover{background:var(--line)}
.cover.img small,.cover.img .ct{visibility:hidden}
.hero[hidden]{display:none}

/* rating di kartu novel */
.rt{margin:0 0 6px;color:var(--muted);font-size:.78rem}
.rt:empty{display:none}