/* CSS bersama halaman program (Buku Mini, Suaramu, Buku Solo, dll). */
/* Dipulihkan dari desain /tampilan/ + aturan khusus Buku Solo. */

.lead { color:var(--muted); max-width:56ch; margin:14px 0 0 }
.hero { padding:72px 0 96px; background:linear-gradient(180deg,var(--bg2),var(--bg)) }
.hero h1 { font-size:clamp(38px,6vw,64px); letter-spacing:-.01em }
.hero p { font-size:19px; color:var(--muted); max-width:46ch; margin:22px 0 32px }
.cta { display:flex; gap:14px; flex-wrap:wrap }
.ic { width:52px; height:52px; border-radius:16px 16px 16px 4px; background:var(--sun); color:#17253D; display:grid; place-items:center }
.st:nth-child(even) .ic { background:var(--sea); color:#fff }
.ic svg { width:26px; height:26px }
.karya { background:var(--sunt) }
.mk { position:relative; aspect-ratio:1/1; border-radius:6px 22px 6px 22px; background:color-mix(in srgb,var(--a) 20%,var(--card)); display:grid; place-items:center; overflow:hidden }
.mk:after { content:""; position:absolute; bottom:13%; left:27%; width:46%; height:6%; background:rgba(0,0,0,.28); filter:blur(9px); border-radius:50% }
.bm { position:relative; z-index:1; width:46%; aspect-ratio:3/4.2; border-radius:3px 9px 9px 3px; background:linear-gradient(135deg,var(--a),var(--b)); box-shadow:12px 14px 22px rgba(0,0,0,.3); transform:perspective(900px) rotateY(-24deg) rotate(-2deg); transition:transform .35s ease; overflow:hidden }
.bm:before { content:""; position:absolute; inset:0 auto 0 0; width:9%; background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(255,255,255,.14)) }
.bm:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 26%,rgba(255,255,255,.4) 0 17%,transparent 18%),radial-gradient(circle at 25% 85%,rgba(255,255,255,.18) 0 34%,transparent 35%),linear-gradient(0deg,var(--sun) 0 7%,transparent 7%) }
.bk:hover .bm { transform:perspective(900px) rotateY(-12deg) rotate(0) scale(1.04) }
.cd.big { grid-row:span 2 }
.big .th { aspect-ratio:auto; flex:1; min-height:260px }
.big .cb h3 { font-size:27px }
.fd { background:var(--navy); color:#fff }
.fg { display:grid; grid-template-columns:240px 1fr; gap:56px; align-items:center }
.ph { aspect-ratio:1; border-radius:50% 50% 50% 8px; background:var(--sun); display:grid; place-items:center; color:#17253D; font-weight:700; font-size:14px; text-align:center; padding:20px }
.fd blockquote { margin:0; font-family:"Young Serif",serif; font-size:clamp(22px,3vw,30px); line-height:1.4 }
.fd p { color:#C5D3E8; max-width:60ch; margin:20px 0 0 }
.fd cite { display:block; margin-top:18px; font-style:normal; font-weight:700; color:var(--sun) }
.join { display:grid; grid-template-columns:1fr 1fr; gap:28px }
.jb { border-radius:6px 28px 6px 28px; padding:40px 36px }
.j1 { background:var(--sun); color:#17253D }
.j1 .btn { background:#17253D; color:#fff; margin-top:22px }
.j2 { background:var(--bg2) }
.jb.card { background:var(--card); border:1px solid var(--line) }
.jb h2 { font-size:28px; max-width:none }
.jb p { margin:12px 0 0 }
.j1 p { color:#3a3320 }
.j2 p { color:var(--muted) }
.ch3 { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px }
.ch3 span { border:1.5px solid var(--line); border-radius:999px; padding:7px 18px; font-size:15px; color:var(--muted); background:var(--card) }
.ch3 b { color:var(--fg); font-size:18px }
.alt { background:var(--bg2) }
.sx { display:flex; gap:18px }
.nb { flex:none; width:46px; height:46px; border-radius:50%; background:var(--sun); color:#17253D; display:grid; place-items:center; font:400 20px "Young Serif",serif }
.sx h3 { font-size:21px; margin-bottom:8px }
.sx p { margin:0; color:var(--muted) }
.q { position:absolute; left:0; right:0; margin:0; padding:24px 28px; border-radius:6px 24px 6px 24px; font:400 23px/1.35 "Young Serif",Georgia,serif; box-shadow:0 14px 30px rgba(23,50,92,.2); animation:open .8s cubic-bezier(.2,.8,.2,1) both }
.big { max-width:880px }
.fd .big p { font-size:18px }
.fd .big p+p { margin-top:14px }
.hero .q { margin:0; max-width:none; font-size:23px; color:#17253D }
.hero .q3 { color:#fff }
.sty { display:grid; grid-template-columns:1.3fr .7fr; gap:64px; align-items:center }
.sty blockquote { font-size:clamp(26px,3.3vw,38px); line-height:1.28 }
.fd .sty p { font-size:18px; max-width:54ch; margin-top:26px; padding-top:26px; border-top:1px solid rgba(255,255,255,.2) }
.lost { background:#fff; border-radius:6px 26px 6px 26px; padding:34px 30px; transform:rotate(3deg); box-shadow:0 20px 44px rgba(0,0,0,.32); display:grid; gap:13px; justify-self:center; width:100%; max-width:340px }
.lost i { display:block; height:10px; border-radius:5px; background:#17325C }
.mk .bm { margin-top:-9% }
.chk { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; align-items:start }
.chk div { display:flex; gap:12px; align-items:center; padding:16px 18px; border:1px solid var(--line); border-radius:6px 18px 6px 18px; background:var(--card) }
.chk svg { flex:none; width:22px; height:22px; color:var(--sl) }
.chk.bad svg { color:#E0527F }
.chk.two { grid-template-columns:1fr 1fr; gap:12px }
.after { margin:32px 0 0; font:400 clamp(20px,2.2vw,26px)/1.4 "Young Serif",Georgia,serif; max-width:60ch; color:var(--fg) }
.stt { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px }
.stt div { padding:28px 24px; border-radius:6px 22px 6px 22px; background:var(--card); border:1px solid var(--line) }
.stt b { display:block; font:400 46px/1 "Young Serif",serif; color:var(--sl) }
.stt span { display:block; margin-top:10px; color:var(--muted) }
.flow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:32px }
.flow span { padding:12px 24px; border-radius:999px; background:var(--sun); color:#17253D; font-weight:700 }
.flow span:nth-of-type(2) { background:var(--sea); color:#fff }
.flow span:nth-of-type(3) { background:var(--navy); color:#fff }
.flow svg { width:22px; color:var(--muted) }
.ses { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px }
.sc2 { background:var(--card); border:1px solid var(--line); border-radius:6px 22px 6px 22px; padding:28px }
.sc2 h3 { font-size:22px; margin:18px 0 10px }
.sc2 p { margin:0; color:var(--muted) }
.cp { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px }
.cp span { padding:10px 20px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); font-weight:600 }
.br { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px }
.br div { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:6px 18px 6px 18px; padding:22px; text-align:center; display:grid; gap:6px; justify-items:center }
.br b { color:var(--sun); font:400 20px "Young Serif",serif }
.br svg { width:20px; color:#C5D3E8 }
.cmp { display:grid; gap:12px; margin-top:36px }
.cmp div { display:grid; grid-template-columns:1fr 40px 1.2fr; align-items:center; gap:12px; padding:18px 24px; border-radius:6px 18px 6px 18px; background:var(--card); border:1px solid var(--line) }
.cmp .no { color:var(--muted); text-decoration:line-through }
.cmp .yes { font-weight:700; color:var(--fg) }
.cmp svg { width:22px; color:var(--sl) }
.sw { display:grid; grid-template-columns:1fr; gap:14px; justify-items:start; max-width:360px; justify-self:center; width:100%; margin-top:32px }
.sw p { margin:0!important; padding:22px 26px; border-radius:6px 22px 6px 22px; font:400 22px/1.3 "Young Serif",serif; width:100% }
.sw .a { background:rgba(255,255,255,.1); color:#C5D3E8; text-decoration:line-through; transform:rotate(-2deg) }
.sw .b { background:var(--sun); color:#17253D; transform:rotate(2deg) }
.sw svg { width:28px; margin-left:24px; color:var(--sun) }
.vis .mk { width:100%; aspect-ratio:16/10 }
.vis .mk .bm { width:24%; margin-top:0 }
.vis .mk:after { bottom:12% }
.vis > svg { width:28px; height:28px; color:var(--muted) }
.vn { display:flex; align-items:center; gap:18px; padding:20px 24px; border-radius:6px 22px 6px 22px; background:var(--card); border:1px solid var(--line) }
.play { flex:none; display:grid; place-items:center }
.play svg { width:44px; height:44px; color:var(--sun) }
.wf { flex:1; display:flex; align-items:center; gap:3px; height:48px }
.wf i { flex:1; border-radius:99px; background:color-mix(in srgb, var(--sl) 55%, transparent) }
.vn time { flex:none; font:600 13px Figtree, system-ui, sans-serif; color:var(--muted) }
.vis .cap { margin:8px 0 0; color:var(--muted); font-size:15px }
.sw-vertical { display:grid; gap:12px; justify-items:start; margin-top:28px }
.sw-vertical p { margin:0!important; padding:22px 26px; border-radius:6px 22px 6px 22px; font:400 22px/1.3 "Young Serif",serif; width:100%; max-width:360px }
.sw-vertical .a { background:rgba(255,255,255,.1); color:#C5D3E8; text-decoration:line-through; transform:rotate(-2deg) }
.sw-vertical .b { background:var(--sun); color:#17253D; transform:rotate(2deg) }
.sw-vertical svg { width:28px; margin-left:24px; color:var(--sun) }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px }
.g3 .st { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:6px 22px 6px 22px; padding:28px 24px 24px; transition:transform .2s, border-color .2s }
.g3 .st:hover { transform:translateY(-4px); border-color:var(--sl) }
.g3 .ic { width:52px; height:52px; border-radius:16px 16px 16px 4px; background:var(--sun); color:#17253D; display:grid; place-items:center }
.g3 .st:nth-child(even) .ic { background:var(--sea); color:#fff }
.g3 .ic svg { width:26px; height:26px }
.g3 .st h3 { font-size:21px; margin:20px 0 10px }
.g3 .st p { margin:0; color:var(--muted); font-size:15.5px }
.nt { display:grid; grid-template-columns:1fr 1fr; gap:20px 40px; margin-top:40px }
.ni { display:flex; gap:16px; align-items:flex-start }
.ni svg { flex:none; width:44px; height:44px; padding:10px; border-radius:14px 14px 14px 4px; background:var(--sea); color:#fff }
.ni p { margin:0 }
.est { background:var(--card); border:1px solid var(--line); border-radius:6px 20px 6px 20px; padding:22px; align-self:start }
.est b { font:400 40px/1 "Young Serif",serif }
.est span { margin-left:6px; color:var(--muted) }
.est p { margin:10px 0 0; color:var(--muted); font-size:14px }
.ti .cp { margin-top:14px }
.ti .cp span { padding:6px 14px; font-size:14px }
.rul { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:36px }
.rul div { background:var(--card); border:1px solid var(--line); border-radius:6px 20px 6px 20px; padding:22px }
.rul small { display:block; color:var(--muted); font-size:14px }
.rul b { display:block; margin-top:8px; font:400 20px/1.25 "Young Serif",serif }
.call { margin-top:32px; padding:26px 30px; border-left:6px solid var(--sun); background:var(--card); border-radius:6px 20px 20px 6px; font:400 clamp(20px,2.2vw,26px)/1.4 "Young Serif",Georgia,serif }
.bp { position:relative; max-width:400px; width:100%; aspect-ratio:3/4; margin:0 auto }
.bp:before,.bp:after { content:""; position:absolute; inset:0; border-radius:6px 26px 6px 26px }
.bp:before { background:var(--sun); transform:rotate(-7deg) translate(-14px,6px) }
.bp:after { background:var(--sea); transform:rotate(6deg) translate(14px,0) }
.bpi { position:absolute; inset:0; z-index:1; background:#fff; color:#17253D; border-radius:6px 26px 6px 26px; display:grid; place-items:center; text-align:center; box-shadow:0 18px 40px rgba(23,50,92,.25); transform:rotate(-1deg); animation:open .9s cubic-bezier(.2,.8,.2,1) both }
.bpi:before { content:""; position:absolute; inset:16px; border:2px solid var(--sun); border-radius:4px 18px 4px 18px }
.bpi:after { content:""; position:absolute; inset:24px; border:1px solid #17325C55; border-radius:3px 14px 3px 14px }
.bpi div { position:relative; padding:0 40px }
.bpi small { display:block; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#51617A; font-weight:600 }
.bpi b { display:block; font:400 clamp(34px,4vw,48px)/1.1 "Young Serif",Georgia,serif; margin:14px 0 18px }
.bpi i { display:block; font-style:normal; font-size:18px; margin:18px 0 }
.bpi i:before { content:""; display:block; width:56px; height:3px; background:var(--sun); margin:0 auto 18px }
.spl { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; margin-top:40px }
.spl .mk { max-width:420px; width:100%; justify-self:center }
.spl .mk .bm { width:50%; aspect-ratio:14/21 }
.rul.r2 { grid-template-columns:1fr 1fr; margin-top:0 }
.cmp .ask { font-weight:600 }
.cmp.sol div { grid-template-columns:minmax(0,1fr) 24px auto }
.scn { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px }
.scn div { border-radius:6px 26px 6px 26px; padding:32px 30px }
.scn small { font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:13px }
.scn p { margin:14px 0 0; line-height:1.7 }
.scn blockquote { margin:22px 0 0; font:400 22px/1.35 "Young Serif",Georgia,serif }
.sa { background:var(--card); border:2px dashed var(--line); color:var(--muted) }
.sa blockquote { color:var(--fg) }
.sb2 { background:var(--sun); color:#17253D }
.sb2 small { color:#4a3b0d }
.tagsm { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
.tagsm span { font-size:13.5px; font-weight:600; padding:5px 12px; border-radius:999px; background:var(--bg2) }
.cmp.sol { max-width:960px }
.cmp.sol .ask { font-size:18px }
.cmp.sol .yes { background:var(--sun); color:#17253D; padding:7px 18px; border-radius:999px; font-size:15px; white-space:nowrap }
.two { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:center; margin-top:36px }
.two .call { margin-top:28px }
.two .cmp.sol { max-width:none; margin-top:0 }

@media (max-width:900px) {
	.cd.big { grid-row:auto; grid-column:span 2 }
	.hg,.fg,.join { grid-template-columns:1fr }
	.fg { gap:32px }
	.ph { max-width:160px }
	.q { font-size:20px; padding:20px 22px }
	.hero .q { font-size:20px }
	.sty { grid-template-columns:1fr; gap:40px }
	.lost { max-width:280px; justify-self:start }
	.g3,.chk,.chk.two,.ses { grid-template-columns:1fr }
	.stt,.br { grid-template-columns:1fr 1fr }
	.cmp div { grid-template-columns:1fr }
	.cmp svg { display:none }
	.rul { grid-template-columns:1fr 1fr }
	.spl,.scn { grid-template-columns:1fr }
	.rul.r2 { grid-template-columns:1fr 1fr }
	.two { grid-template-columns:1fr; gap:32px }
}

@media (max-width:520px) {
	.cd.big { grid-column:auto }
	.stt,.br { grid-template-columns:1fr }
	.rul { grid-template-columns:1fr }
	.rul.r2 { grid-template-columns:1fr }
}

@media (prefers-reduced-motion:reduce) {
	.q { animation:none }
	.bpi { animation:none }
}

@media (max-width:640px) {
	.cmp.sol div { grid-template-columns:1fr }
	.cmp.sol svg { display:none }
	.cmp.sol .yes { justify-self:start }
}