input{font-family:inherit}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);color:#EAEEF8;font-weight:600;font-size:14px;transition:background .2s,border-color .2s}
.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.pill-peri{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;background:#9DB0FF;color:#0E1424;font-weight:700;font-size:14px;transition:transform .2s,background .2s}
.pill-peri:hover{background:#B9C6FF;transform:translateY(-2px)}
.pill-ink{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;background:#0E1424;color:#fff;font-weight:700;font-size:14px;border:0;cursor:pointer;transition:transform .2s,background .2s}
.pill-ink:hover{background:#27325A;transform:translateY(-2px)}
.fchip{padding:10px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.22);background:transparent;color:#EAEEF8;font-weight:600;font-size:14px;cursor:pointer;min-height:44px;transition:background .2s,color .2s,border-color .2s}
.fchip:hover{border-color:#fff}
.fchip.on{background:#fff;color:#0E1424;border-color:#fff}
.crumb{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;color:#9AA6C4}
.crumb a:hover{color:#fff}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}

/* halaman ini */
.two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.steps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
.books{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.book{display:block;transition:transform .3s}
.book:hover{transform:translateY(-6px)}
.cover{position:relative;aspect-ratio:3/4;max-width:100%;border-radius:6px 18px 18px 6px;overflow:hidden;padding:20px 18px 18px 26px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:rgba(0,0,0,.18)}
.cover .arch{position:absolute;right:16px;bottom:0;width:46%;height:42%;border-radius:999px 999px 0 0}
.cv0{background:#9DB0FF;color:#0E1424}.cv0 .arch{background:#0E1424}
.cv1{background:#FFC95C;color:#0E1424}.cv1 .arch{background:#0E1424}
.cv2{background:#34426F;color:#fff}.cv2 .arch{background:#9DB0FF}
.cv3{background:#fff;color:#0E1424}.cv3 .arch{background:#34426F}
.cv4{background:#222C47;color:#fff;border:1px solid rgba(255,255,255,.12)}.cv4 .arch{background:#FFC95C}
.fmt{position:absolute;top:14px;right:14px;z-index:2;font-family:'DM Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:#fff;background:rgba(14,20,36,.82);padding:4px 9px;border-radius:999px}
.cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#fff;padding:9px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);transition:background .2s,color .2s,border-color .2s}
.book:hover .cta{background:#FFC95C;color:#0E1424;border-color:#FFC95C}
.step{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.wave span{display:block;width:4px;border-radius:2px;background:#FFC95C}

@media (max-width:1120px){.links{display:none}.menubtn{display:inline-flex}}
@media (max-width:960px){.two,.steps{grid-template-columns:minmax(0,1fr);gap:40px}.books{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.books{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.foot-cols{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* sampul unggahan */
.cover .cimg{position:absolute;inset:0;z-index:0;background:#222C47 center/cover no-repeat;opacity:0;transition:opacity .35s}
.cover .cimg.loaded{opacity:1}
.cover .cimg.gagal{display:none}
.cover.photo{padding:0;background:#222C47}
.cover.photo .fmt{position:absolute;left:auto;right:10px;top:10px;z-index:2}
.btitle{margin-top:14px;font-family:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.01em;color:#fff}
.book.busy{opacity:.6;cursor:progress}