/* ==========================================================
   Online Library - style.css
   Isi file ini:
   1. Token warna & font (tema terang + gelap)
   2. Dasar halaman (body, judul, link)
   3. Header atas
   4. Halaman rak (daftar buku): intro, pencarian, chip kategori, sampul
   5. Halaman buku: hero, daftar isi, ringkasan, bab, istilah, pelajaran
   5b. Login (tombol header, jendela masuk/daftar, toast)
   6. Responsif (tablet & HP)
   ========================================================== */

/* ---------- 1. Token warna & font ----------
   Semua warna didefinisikan di sini sebagai variabel (--nama).
   Ganti nilai di sini untuk mengubah warna di seluruh website. */
:root{
  --paper:#F2F3EF; --paper-2:#E7E9E3; --card:#FBFBF8; --ink:#1C2220; --ink-2:#4A524E; --line:#CDD1C9;
  --accent:#2F5D62;
  --c-diri:#55744A; --c-psikologi:#7A3E5C; --c-keuangan:#2F6470; --c-sejarah:#97462B; --c-pemikiran:#3F4C86; --c-sains:#9C6E19; --c-teknologi:#2E5E8C; --c-fiksi:#8A4F7D;
  --on-cover:#FBFAF5;
  --f-display:"Young Serif", Georgia, "Times New Roman", serif;
  --f-body:"Literata", Georgia, "Times New Roman", serif;
  --f-ui:"IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#151917; --paper-2:#1D2220; --card:#1A1F1D; --ink:#E6E8E2; --ink-2:#A6AEA8; --line:#333A36;
  --accent:#7FB3B8;
  --c-diri:#6E8F62; --c-psikologi:#94566F; --c-keuangan:#3F7C88; --c-sejarah:#AC5A3D; --c-pemikiran:#5866A0; --c-sains:#AF8130; --c-teknologi:#4A7AAB; --c-fiksi:#A26696;
  --on-cover:#FBFAF5; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#151917; --paper-2:#1D2220; --card:#1A1F1D; --ink:#E6E8E2; --ink-2:#A6AEA8; --line:#333A36;
  --accent:#7FB3B8;
  --c-diri:#6E8F62; --c-psikologi:#94566F; --c-keuangan:#3F7C88; --c-sejarah:#AC5A3D; --c-pemikiran:#5866A0; --c-sains:#AF8130; --c-teknologi:#4A7AAB; --c-fiksi:#A26696;
  --on-cover:#FBFAF5; color-scheme:dark;
}
/* ---------- 2. Dasar halaman ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.65;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:0 64px}
.wrap{max-width:1120px; margin:0 auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
h1,h2,h3{font-family:var(--f-display); font-weight:400; text-wrap:balance; line-height:1.15; margin:0}
.ui{font-family:var(--f-ui)}
.label{font-family:var(--f-ui); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); font-weight:500}

/* ---------- 3. Header atas ---------- */
.top{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:28px 18px; border-bottom:1px solid var(--line)}
.brand{display:flex; flex-direction:column; gap:2px; text-decoration:none}
.brand b{font-family:var(--f-display); font-weight:400; font-size:26px; line-height:1}
.brand span{font-family:var(--f-ui); font-size:13px; color:var(--ink-2)}
.stat{font-family:var(--f-ui); font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.stat strong{color:var(--ink); font-weight:600}

/* ---------- 4. Halaman rak (daftar buku) ---------- */
.intro{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px; align-items:end; padding-block:40px 28px}
.intro h1{font-size:clamp(26px,3.6vw,42px); max-width:26ch; line-height:1.2}
.intro .intro-count{font-family:var(--f-ui); font-weight:600; letter-spacing:.02em; color:var(--ink); margin-bottom:6px}
.intro p{margin:0; color:var(--ink-2); max-width:44ch}
.tools{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; padding-block:4px 22px}
.search{flex:1 1 260px; display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:0 12px}
.search svg{flex:none; color:var(--ink-2)}
.search input{flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font:500 15px var(--f-ui); padding:11px 0}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font:500 14px var(--f-ui); border:1px solid var(--line); background:transparent; color:var(--ink); padding:7px 12px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.chip i{width:9px; height:9px; border-radius:50%; background:var(--dot, var(--ink-2)); display:inline-block}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip:hover{border-color:var(--ink-2)}

.shelf{display:grid; grid-template-columns:repeat(auto-fill, minmax(196px,1fr)); gap:26px 20px}
.book{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; min-width:0}
.cover{position:relative; aspect-ratio:3/4; max-width:100%; background:var(--cc); color:var(--on-cover); border-radius:3px 7px 7px 3px; padding:18px 16px 14px 22px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  box-shadow: inset 6px 0 0 rgba(0,0,0,.18), inset 8px 0 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.08), 0 10px 22px -14px rgba(0,0,0,.55);
  transition:transform .25s ease, box-shadow .25s ease}
.book:hover .cover{transform:translateY(-4px); box-shadow: inset 6px 0 0 rgba(0,0,0,.18), inset 8px 0 0 rgba(255,255,255,.08), 0 18px 26px -16px rgba(0,0,0,.6)}
.cover .call{font:500 11.5px var(--f-ui); letter-spacing:.08em; opacity:.85; display:flex; justify-content:space-between; gap:8px}
.cover h3{font-size:clamp(20px,2.2vw,24px); line-height:1.12; overflow-wrap:anywhere}
.cover .au{font:500 13px var(--f-ui); opacity:.9}
.cover .rule{height:1px; background:currentColor; opacity:.35; margin-block:6px}
.cover .read{position:absolute; top:0; right:14px; width:18px; height:30px; background:var(--on-cover); clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%); opacity:.92}
.book .meta{font:14px var(--f-ui); color:var(--ink-2); line-height:1.4}
.book .meta b{color:var(--ink); font-weight:600; display:block; font-size:15px}
.empty{padding:40px 0; color:var(--ink-2); font-family:var(--f-ui)}

/* ---------- 5. Halaman buku ---------- */
.crumbs{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:22px 0; font-family:var(--f-ui); font-size:14.5px}
.crumbs a{text-decoration:none; color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}
.hero{display:grid; grid-template-columns:200px minmax(0,1fr); gap:36px; align-items:start; padding-block:26px 34px; border-bottom:1px solid var(--line)}
.hero .cover{width:200px}
.hero h1{font-size:clamp(32px,4.6vw,52px)}
.hero .sub{font-style:italic; color:var(--ink-2); margin:8px 0 18px; font-size:18px}
.facts{display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--f-ui); font-size:14.5px; margin:0 0 20px; padding:0; list-style:none}
.facts li{display:flex; flex-direction:column}
.facts li span{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.facts li b{font-weight:600; font-variant-numeric:tabular-nums}
.thesis{font-family:var(--f-display); font-size:clamp(19px,2vw,23px); line-height:1.4; margin:0; padding-left:16px; border-left:3px solid var(--cc)}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.btn{font:500 14.5px var(--f-ui); border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:6px; padding:9px 14px; cursor:pointer; display:inline-flex; gap:8px; align-items:center; text-decoration:none}
.btn:hover{border-color:var(--ink-2)}
.btn[aria-pressed="true"]{background:var(--cc); color:var(--on-cover); border-color:var(--cc)}

.body{display:grid; grid-template-columns:200px minmax(0,1fr); gap:36px; padding-top:30px}
.toc{position:sticky; top:calc(env(safe-area-inset-top, 0px) + 18px); align-self:start; display:flex; flex-direction:column; gap:2px; font-family:var(--f-ui); font-size:14.5px}
.toc a{text-decoration:none; color:var(--ink-2); padding:5px 0 5px 12px; border-left:2px solid var(--line)}
.toc a:hover{color:var(--ink); border-left-color:var(--cc)}
.content{min-width:0; max-width:70ch; display:flex; flex-direction:column; gap:44px}
.content section{display:flex; flex-direction:column; gap:14px; scroll-margin-top:20px}
.content h2{font-size:28px}
.content p{margin:0}
.prose{display:flex; flex-direction:column; gap:14px}
.prose p:first-child::first-letter{font-family:var(--f-display); float:left; font-size:3.3em; line-height:.9; padding:4px 8px 0 0; color:var(--cc)}

details.ch{border-top:1px solid var(--line)}
details.ch:last-of-type{border-bottom:1px solid var(--line)}
details.ch summary{list-style:none; cursor:pointer; padding:13px 0; display:flex; justify-content:space-between; gap:16px; align-items:baseline; font-family:var(--f-ui); font-weight:600; font-size:16.5px}
details.ch summary::-webkit-details-marker{display:none}
details.ch summary::after{content:"+"; font-family:var(--f-ui); font-weight:400; font-size:20px; color:var(--ink-2); line-height:1}
details.ch[open] summary::after{content:"–"}
details.ch p{padding:0 0 12px; color:var(--ink)}
details.ch .ch-points{margin:0 0 16px; padding-left:1.2em; display:flex; flex-direction:column; gap:4px; font-size:15.5px}
details.ch .ch-points li::marker{color:var(--cc)}
.content h3.part{font-family:var(--f-ui); font-weight:600; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--cc); margin:22px 0 6px}
.content h3.part:first-child{margin-top:4px}
.bab-head{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline}
.chtools{display:flex; gap:12px; font-family:var(--f-ui); font-size:14px}
.chtools button{background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font:inherit; text-decoration:underline; text-underline-offset:3px}

dl.terms{margin:0; display:grid; grid-template-columns:minmax(0,13em) minmax(0,1fr); gap:0}
dl.terms dt, dl.terms dd{padding:12px 0; border-top:1px solid var(--line); margin:0}
dl.terms dt{font-family:var(--f-ui); font-weight:600; padding-right:18px}
dl.terms dd{color:var(--ink)}

ol.lessons{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; counter-reset:l}
ol.lessons li{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:6px; background:var(--paper-2)}
ol.lessons input{margin-top:6px; width:17px; height:17px; accent-color:var(--cc); flex:none}
ol.lessons label{cursor:pointer}
ol.lessons input:checked + label{color:var(--ink-2); text-decoration:line-through; text-decoration-color:var(--line)}

.keyidea{font-family:var(--f-display); font-size:clamp(22px,2.6vw,28px); line-height:1.35; margin:0; color:var(--ink)}
.keyidea::before{content:"“"; color:var(--cc); margin-right:2px}
.keyidea::after{content:"”"; color:var(--cc)}
.note{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 18px; font-size:15.5px; display:flex; flex-direction:column; gap:6px}
.who{font-size:16px; color:var(--ink-2)}

.pager{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; padding-top:20px; border-top:1px solid var(--line)}
.pager a{text-decoration:none; display:flex; flex-direction:column; gap:4px; min-width:0}
.pager a:last-child{text-align:right}
.pager b{font-family:var(--f-display); font-weight:400; font-size:19px}

footer{margin-top:64px; padding-top:18px; border-top:1px solid var(--line); font:13.5px var(--f-ui); color:var(--ink-2)}
footer{display:flex; flex-direction:column; gap:8px; line-height:1.55}
footer p{margin:0; max-width:80ch}
footer strong{color:var(--ink)}
.btn.support{color:var(--ink); border-color:var(--c-sains)}
.btn.support svg{color:var(--c-sains)}
.btn.support:hover{background:var(--paper-2)}
footer a{color:var(--ink); font-weight:600; text-underline-offset:3px}
footer .mail{user-select:all; color:var(--ink); font-weight:600}
.content .source{border-top:1px solid var(--line); padding-top:16px; gap:8px; font:14px/1.55 var(--f-ui); color:var(--ink-2)}
.content .source p{margin:0}

/* ---------- 5b. Login & progres ---------- */
.top-right{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.auth{display:flex; align-items:center; gap:8px; min-width:0}
.auth-user{font:500 14px var(--f-ui); color:var(--ink-2); max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.auth-note{font:13.5px var(--f-ui); color:var(--ink-2)}
.btn-sm{padding:6px 11px; font-size:14px}
.btn-primary{background:var(--accent); color:var(--card); border-color:var(--accent)}
.btn-primary:hover{border-color:var(--ink)}
.btn-primary:disabled{opacity:.6; cursor:wait}
.btn-block{width:100%; justify-content:center; padding:11px}
.pending{color:var(--c-sains); font-weight:600}
.save-hint{font:13.5px var(--f-ui); color:var(--ink-2); align-self:center}

dialog#auth-dialog{border:1px solid var(--line); border-radius:10px; padding:0; width:min(420px, calc(100vw - 32px)); background:var(--card); color:var(--ink); box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
dialog#auth-dialog::backdrop{background:rgba(10,14,12,.45)}
.auth-form{display:flex; flex-direction:column; gap:8px; padding:22px 22px 18px}
.auth-head{display:flex; justify-content:space-between; align-items:center}
.auth-head h2{font-size:26px}
.auth-x{background:none; border:0; font-size:26px; line-height:1; color:var(--ink-2); cursor:pointer; padding:4px 8px}
.auth-lead{margin:0 0 6px; font-size:15px; color:var(--ink-2)}
.auth-form label{font:600 13.5px var(--f-ui); margin-top:4px}
.auth-form input{font:15.5px var(--f-ui); padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink)}
.auth-form input:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
.auth-msg{margin:4px 0 2px; min-height:1.3em; font:14px var(--f-ui)}
.auth-msg.ok{color:var(--accent)}
.auth-msg.err{color:var(--c-sejarah)}
.auth-switch{margin:6px 0 0; font:14px var(--f-ui); color:var(--ink-2); text-align:center}
.auth-switch button{background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px}

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); max-width:min(480px, calc(100vw - 32px)); background:var(--ink); color:var(--paper); font:14.5px var(--f-ui); padding:11px 16px; border-radius:8px; box-shadow:0 12px 30px -12px rgba(0,0,0,.5); z-index:20}
[hidden]{display:none!important}

/* ---------- 6. Responsif ---------- */
/* Tablet: daftar isi pindah ke atas */
@media (max-width: 860px){
  .intro{grid-template-columns:minmax(0,1fr); gap:14px; padding-block:28px 20px}
  .body{grid-template-columns:minmax(0,1fr)}
  .toc{position:static; flex-direction:row; flex-wrap:wrap; gap:6px}
  .toc a{border:1px solid var(--line); border-radius:999px; padding:5px 11px}
}
/* HP: rak 2 kolom, hero 1 kolom */
@media (max-width: 620px){
  body{font-size:16.5px}
  .shelf{grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 14px}
  .cover{padding:14px 12px 12px 18px}
  .hero{grid-template-columns:minmax(0,1fr); gap:20px}
  .hero .cover{width:150px}
  dl.terms{grid-template-columns:minmax(0,1fr)}
  dl.terms dd{border-top:0; padding-top:0}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager a:last-child{text-align:left}
}