/* IPAkita tema "buku praktikum": kertas milimeter, warna per kelas */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Bricolage+Grotesque:wght@600;700;800&family=Figtree:wght@400;500;600;700&display=swap');
:root,:root[data-theme="light"]{--bg:#EAF0F8;--surface:#fff;--text:#0E1A36;--body:#27344F;--muted:#58667F;--border:#D3DEEE;--ring:#BFCCE0;--brand:#FF6B1A;--accent:#C74708;--soft:#FFEBDD;--shadow:rgba(14,26,54,.16);--k7:#12906B;--k8:#2F62E0;--k9:#8A3FD1}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0C1426;--surface:#142038;--text:#fff;--body:#DCE4F2;--muted:#93A3BD;--border:#26365A;--ring:#34476F;--soft:#2B1D14;--accent:#FF8A4A;--shadow:rgba(0,0,0,.4);--k7:#3FD0A0;--k8:#7AA2FF;--k9:#B98CFF}}
:root[data-theme="dark"]{--bg:#0C1426;--surface:#142038;--text:#fff;--body:#DCE4F2;--muted:#93A3BD;--border:#26365A;--ring:#34476F;--soft:#2B1D14;--accent:#FF8A4A;--shadow:rgba(0,0,0,.4);--k7:#3FD0A0;--k8:#7AA2FF;--k9:#B98CFF}
body{font-family:Figtree,system-ui,sans-serif;background-color:var(--bg);background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:32px 32px;background-attachment:fixed}
h1,h2,h3,.ik-logo em,.st b{font-family:'Bricolage Grotesque',Figtree,sans-serif;letter-spacing:-.02em}
input,.btn,.pill,.ik-tab,.sf-btn,.lk{font-family:Figtree,system-ui,sans-serif!important}
.sf::before{background:repeating-linear-gradient(90deg,var(--k7) 0 33.3%,var(--k8) 33.3% 66.6%,var(--k9) 66.6% 100%)}
/* beranda */
.hero{padding:48px 0 28px}
.tag{display:none}
h1{font-size:clamp(34px,6vw,58px);line-height:1.04;font-weight:800}
.hero p{font-size:17px;color:var(--body)}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px}
.kp a{--c:var(--k7);display:flex;flex-direction:column;padding:12px 14px;border-radius:12px;background:var(--surface);border:2px solid var(--c);color:var(--text);text-decoration:none;font:800 22px 'Bricolage Grotesque',sans-serif;transition:background .2s,color .2s,transform .2s}
.kp a:nth-child(2){--c:var(--k8)}.kp a:nth-child(3){--c:var(--k9)}
.kp a small{font:500 12.5px Figtree,sans-serif;color:var(--muted);transition:color .2s}
.kp a:hover{background:var(--c);color:#fff;transform:translateY(-3px) rotate(-1deg)}.kp a:hover small{color:#fff}
.hero>div:first-child>*{animation:in .6s cubic-bezier(.2,.7,.2,1) backwards}
.hero>div:first-child>*:nth-child(2){animation-delay:.08s}.hero>div:first-child>*:nth-child(3){animation-delay:.16s}.hero>div:first-child>*:nth-child(4){animation-delay:.24s}
@keyframes in{from{opacity:0;transform:translateY(18px)}}
.art{border-radius:20px;box-shadow:8px 8px 0 var(--text)}
.stats{display:flex;gap:0;background:var(--surface);border:2px solid var(--text);border-radius:14px;overflow:hidden}
.st{flex:1;background:none;border-radius:0;border-right:2px solid var(--border);text-align:left;padding:14px 18px}.st:last-child{border:0}
.st b{color:var(--text)}
.hc{border-radius:14px;border:2px solid var(--border)}.hc:hover{transform:translateY(-4px);border-color:var(--text);box-shadow:5px 5px 0 var(--text)}
.hc .th,.th{border-radius:12px}
.banner{background:var(--text);color:var(--bg);border-radius:14px}.banner h2{color:var(--bg)}
.banner .btn{background:var(--brand);color:#fff}
/* kartu bab: punggung buku berwarna per kelas */
.card{--c:var(--k7);border-radius:14px;border:2px solid var(--border);border-left:8px solid var(--c)}
.card.in:hover{box-shadow:5px 5px 0 var(--c);transform:translate(-2px,-4px)}
.card .th{background:color-mix(in srgb,var(--c) 15%,var(--surface))}
.card .kl{color:var(--c)}.card .bar div{background:var(--c)}
.pill.on{background:var(--text);border-color:var(--text);color:var(--bg);box-shadow:none}
.btn.pri{background:var(--brand);border-color:var(--brand);box-shadow:none}
/* halaman bab (pengganti pop-up) */
#bab{padding:20px 0 48px}
.bk{display:inline-flex;gap:6px;align-items:center;font:700 14px Figtree;color:var(--accent);background:none;border:0;padding:8px 0;cursor:pointer}
.bk:hover{text-decoration:underline}
.bh{--c:var(--k7);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:var(--surface);border:2px solid var(--text);border-left:12px solid var(--c);border-radius:16px;padding:22px;margin:6px 0 18px}
.bh .th{width:84px;height:84px;font-size:46px;background:color-mix(in srgb,var(--c) 16%,var(--surface))}
.bh h1{margin:2px 0 8px;font-size:clamp(24px,4vw,36px)}.bh .kl{color:var(--c);font-size:14px}
.bh .pr{max-width:360px;margin:0}.bh .bar div{background:var(--c);width:0;transition:width .9s .25s}
.bh .also{grid-column:1/-1;margin:4px 0 0;padding-top:14px}
.toc{counter-reset:n;display:grid;gap:10px}
.toc .row{--c:var(--k7);counter-increment:n;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;border:2px solid var(--border);border-radius:12px;background:var(--surface);animation:in .45s backwards}
.toc .row::before{content:var(--bn) "." counter(n);grid-row:span 2;font:800 15px 'Bricolage Grotesque';color:var(--c);min-width:44px}
.toc .row b{margin:0}.toc .row .bd,.toc .row .mm{grid-column:2}
@media(min-width:760px){.toc .row{grid-template-columns:auto minmax(180px,1fr) auto}.toc .row::before{grid-row:auto}.toc .row b{grid-column:2}.toc .row .bd{grid-column:3;justify-content:flex-end}.toc .row .mm{grid-column:2/4}}
.bd a.lk{border-radius:9px;border:2px solid var(--text);background:var(--surface);color:var(--text)}
.bd a.lk:hover,.bd a.lk.dn{background:var(--c,var(--brand));border-color:var(--c,var(--brand));color:#fff}
@media(max-width:560px){.bh{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hero>div:first-child>*,.toc .row{animation:none!important}}
/* ===== beranda ala referensi: hero gelap + molekul ===== */
.hx{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:8px;margin-top:22px;padding:44px 40px 90px;border-radius:24px;color:#fff;overflow:hidden;background:radial-gradient(circle at 78% 40%,#3b3fb8 0,transparent 55%),linear-gradient(135deg,#0b1a4a,#16256e 60%,#2b2f9c)}
.hx h1{font:700 clamp(36px,5.6vw,62px)/1.06 Fraunces,Georgia,serif;color:#fff;margin:0 0 16px;letter-spacing:-.01em}
.hx h1 em{display:block;font-style:normal;color:#FFC83D}
.hx p{color:#d5dcf5;font-size:17px;max-width:440px;margin:0 0 22px}
.hx .btn{border:0;padding:12px 22px}.hx .y{background:#FFC83D;color:#1a1a1a}.hx .o{background:rgba(255,255,255,.14);color:#fff;margin-left:8px}
.hx-v{position:relative;min-height:340px}
.hx-v svg{width:100%;height:100%;display:block;overflow:visible}
.mol{animation:fl 7s ease-in-out infinite}
.chip{position:absolute;display:flex;gap:10px;align-items:center;background:#fff;color:#14204a;border-radius:12px;padding:9px 14px;font:600 13px Figtree;box-shadow:0 10px 26px rgba(0,0,0,.28);animation:fl 6s ease-in-out infinite}
.chip small{display:block;font-weight:500;color:#5a6684;font-size:11.5px}.chip i{font-style:normal;font-size:20px}
.chip:nth-of-type(1){right:0;top:8%}.chip:nth-of-type(2){left:-4%;top:48%;animation-delay:1.2s}.chip:nth-of-type(3){right:6%;bottom:2%;animation-delay:2.4s}
.sb{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:6px;align-items:center;background:var(--surface);border:2px solid var(--text);border-radius:16px;padding:12px 14px;margin:-58px 20px 26px;box-shadow:0 14px 34px var(--shadow)}
.sb label{display:flex;flex-direction:column;gap:2px;padding:4px 14px;border-right:2px solid var(--border);min-width:0}
.sb span{font:600 12px Figtree;color:var(--muted)}
.sb input,.sb select{all:unset;font:600 15px Figtree;color:var(--text);min-width:0;padding:2px 0;cursor:pointer}.sb input{cursor:text;border-radius:0}
.sb select option{color:#000}.sb .btn{padding:14px 26px;border-radius:12px}
.ft{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:34px;background:var(--surface);border-radius:14px;border:2px solid var(--border)}
.ft div{display:flex;gap:10px;align-items:center;padding:14px 16px;border-right:2px solid var(--border);font:700 14px Figtree;color:var(--text)}.ft div:last-child{border:0}
.ft small{display:block;font-weight:500;color:var(--muted);font-size:12px}.ft i{font-style:normal;font-size:24px}
.hub{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.hc{align-items:center;text-align:center;padding:18px 12px}.hc p{display:none}.hc .th{width:60px;height:60px}
.vh{display:flex;justify-content:space-between;align-items:baseline}.vh a{font:700 14px Figtree;color:var(--accent);text-decoration:none}
.pk{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:12px 0 40px}
.pc{--c:var(--k7);background:var(--surface);border:2px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s}
.pc:hover{transform:translate(-2px,-4px);box-shadow:5px 5px 0 var(--c)}
.pcv{height:118px;display:grid;place-items:center;position:relative;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#000),var(--c))}
.pcv span{font-size:54px;transition:transform .3s}.pc:hover .pcv span{transform:scale(1.15) rotate(-6deg)}
.pcv b{position:absolute;left:10px;top:10px;background:#FFC83D;color:#1a1a1a;font:700 11.5px Figtree;padding:3px 9px;border-radius:6px}
.pc h3{margin:12px 14px 2px;font-size:16px}.pc p{margin:0 14px 14px;font-size:13px;color:var(--muted)}
.banner{background:linear-gradient(110deg,#5b3df0,#8a5bff);color:#fff;border-radius:18px}.banner h2{color:#fff}.banner .btn{background:#FFC83D;color:#1a1a1a}
@media(max-width:820px){.hx{grid-template-columns:1fr;padding:32px 22px 80px}.hx-v{min-height:280px}.sb{grid-template-columns:1fr 1fr;margin:-58px 10px 22px}.sb label{border:0;border-bottom:2px solid var(--border)}.sb .btn{grid-column:1/-1}.ft{grid-template-columns:1fr 1fr}.ft div:nth-child(2){border:0}.chip:nth-of-type(2){left:0}.hub{grid-template-columns:repeat(2,1fr)!important}}
/* dropdown kustom di kartu pencarian */
.sb label{position:relative}
.sb select{display:none}
.dd-b{all:unset;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;font:700 15px Figtree;color:var(--text);padding:2px 0;border-radius:6px}
.dd-b::after{content:"";width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s;flex:none}
.dd.o .dd-b::after{transform:rotate(225deg) translateY(-2px)}
.dd-b:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.dd-l{position:absolute;left:8px;right:8px;top:calc(100% + 14px);z-index:20;margin:0;padding:6px;list-style:none;background:var(--surface);border:2px solid var(--text);border-radius:12px;box-shadow:0 16px 34px var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top;transition:opacity .16s,transform .16s,visibility 0s .16s;min-width:170px}
.dd.o .dd-l{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd-l li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;font:600 15px Figtree;color:var(--body);cursor:pointer}
.dd-l li:hover,.dd-l li.f{background:var(--soft);color:var(--accent)}
.dd-l li[aria-selected=true]{color:var(--text);font-weight:800}
.dd-l li[aria-selected=true]::after{content:"✓";color:var(--brand);font-weight:800}
@media(prefers-reduced-motion:reduce){.dd-l{transition:none}}