:root{--ink:#262a25;--muted:#777c74;--paper:#f7f5ef;--white:#fffefa;--green:#66875c;--green-dark:#476640;--line:#e7e5dd;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100vw - 1120px)/2),5vw);border-bottom:1px solid rgba(38,42,37,.08)}.brand{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:-.5px}.brand-mark{width:28px;height:28px;display:inline-grid;place-items:center;background:var(--green);color:white;border-radius:8px;font:18px var(--serif)}.topbar nav{margin-left:auto;margin-right:0;font-size:12px;color:#656a62}.topbar.has-action nav{margin-right:45px}.topbar nav a:hover,.nav-cta:hover{color:var(--green-dark)}.nav-cta{color:var(--green-dark);font-weight:700;font-size:12px}.nav-cta span{padding-left:5px}.hero{max-width:1120px;margin:auto;min-height:490px;padding:78px 24px 62px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;color:var(--green);text-transform:uppercase}.hero h1{font:500 clamp(38px,5.5vw,61px)/1.08 var(--serif);letter-spacing:-2px;margin:19px 0 14px}.hero h1 em{font-weight:400;color:var(--green);font-style:italic}.hero-copy{max-width:490px;color:var(--muted);font-size:14px;line-height:1.75;margin:0}.profile-form{margin-top:28px;max-width:520px}.profile-form label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}.profile-entry{display:flex;gap:9px}.profile-entry input,.modal-card input{min-width:0;flex:1;border:1px solid #d9dbd2;background:var(--white);border-radius:6px;padding:12px 13px;color:var(--ink);outline:none}.profile-entry input:focus,.modal-card input:focus{border-color:var(--green)}.profile-form>small{display:block;color:#8a8e84;font-size:10px;margin-top:8px}.primary,.secondary,.text-button{border:0;cursor:pointer}.primary{background:var(--green);color:white;padding:12px 16px;border-radius:6px;font-weight:700;font-size:12px;transition:background .2s}.primary:hover{background:var(--green-dark)}.secondary{background:#eeede6;color:var(--ink);padding:12px 16px;border-radius:6px;font-weight:700;font-size:12px}.profile-summary{margin-top:23px;padding:14px 16px;border:1px solid var(--line);border-radius:7px;display:flex;gap:38px;width:max-content;max-width:100%;background:#fffefa80}.profile-summary[hidden]{display:none}.profile-summary>div{display:grid;gap:4px}.summary-label{font-size:9px;color:#858a80;letter-spacing:1px}.profile-summary strong{font-size:13px;font-weight:700}.earned-list{margin-top:18px;max-width:520px}.earned-list h2{font:500 16px var(--serif);margin:0 0 8px}.empty-earned{font-size:11px;color:#898d83;margin:0}.earned-item{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;border:1px solid var(--line);background:var(--white);padding:11px 13px;border-radius:6px;margin-top:7px;cursor:pointer;color:var(--green-dark)}.earned-item strong,.earned-item small{display:block}.earned-item strong{font-size:11px;color:var(--ink)}.earned-item small{font-size:10px;color:var(--muted);margin-top:3px}.section{max-width:1120px;margin:auto;padding:12px 24px 75px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.section h2{font:500 30px/1.15 var(--serif);letter-spacing:-.8px;margin:7px 0 0}.section-head p{font-size:11px;color:var(--muted);margin:0}.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.program-card{background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer}.program-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px #2834200d}.card-art{height:155px;position:relative;display:grid;place-items:center;overflow:hidden}.card-art.peach{background:#f0e4d8}.card-art.lilac{background:#e8e4ed}.card-art.mint{background:#e2e9de}.card-symbol{width:88px;height:88px;border:1px solid #797e6a55;border-radius:50%;display:grid;place-items:center;color:#536c4e;font:48px var(--serif);background:#fff7}.card-index{position:absolute;left:14px;top:12px;font-size:9px;color:#787b72;letter-spacing:1px}.card-type{position:absolute;right:13px;top:12px;font-size:8px;font-weight:700;letter-spacing:1px;color:#646a5f}.card-body{padding:15px}.card-meta{display:flex;gap:12px;color:#878b82;font-size:9px}.card-body h3{font-size:16px;line-height:1.35;letter-spacing:-.3px;margin:10px 0 6px;min-height:44px}.card-body p{font-size:11px;line-height:1.6;color:var(--muted);margin:0;min-height:52px}.card-bottom{border-top:1px solid var(--line);padding-top:12px;margin-top:13px;display:flex;justify-content:space-between;align-items:center;color:var(--green-dark);font-size:11px;font-weight:700}.card-bottom span:last-child{font-size:17px}footer{max-width:1120px;margin:auto;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;color:#898d83;font-size:10px}.footer-brand{font-size:13px;color:var(--ink)}.footer-brand .brand-mark{width:24px;height:24px;font-size:16px}.page-wrap{max-width:960px;margin:auto;padding:35px 24px 70px}.back-link{border:0;background:none;color:#73786f;cursor:pointer;font-size:11px;padding:0;margin-bottom:23px}.detail-grid{display:grid;grid-template-columns:1fr 260px;gap:40px}.detail-main h1{font:500 clamp(35px,5vw,50px)/1.08 var(--serif);letter-spacing:-1.5px;margin:12px 0}.detail-main>.lead{font-size:13px;line-height:1.8;color:var(--muted);max-width:580px}.detail-image{height:195px;border-radius:7px;margin:23px 0;background:#e9e8de;display:grid;place-items:center;overflow:hidden}.detail-image.has-banner{height:320px;background:#fff}.detail-image img{width:100%;height:100%;display:block;object-fit:contain;border-radius:7px}.detail-image.peach{background:#f0e4d8}.detail-image.lilac{background:#e8e4ed}.detail-image.mint{background:#e2e9de}.detail-image .card-symbol{width:115px;height:115px;font-size:60px;background:#ffffff66}.detail-block{margin-top:23px}.detail-block h2{font-size:14px;margin-bottom:10px}.topic-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.topic-list li{font-size:12px;color:#62675f;display:flex;gap:9px}.topic-list li:before{content:"✓";color:var(--green);font-weight:700}.detail-aside{align-self:start;background:var(--white);border:1px solid var(--line);border-radius:7px;padding:18px;position:sticky;top:16px}.aside-label{font-size:9px;letter-spacing:1px;color:#8a8e84}.aside-title{font:500 19px var(--serif);margin:6px 0 15px}.aside-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:10px}.aside-row:first-child{border-top:0;padding-top:0}.aside-row span:first-child{color:#858a80}.aside-row strong{font-weight:600;text-align:right}.detail-aside .primary{width:100%;margin-top:12px}.quiz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#7c8178;font-size:11px}.progress{height:3px;background:#e4e3dc;border-radius:10px;overflow:hidden;margin-bottom:32px}.progress>span{height:100%;display:block;background:var(--green);transition:width .2s}.quiz-box{max-width:670px;margin:0 auto}.quiz-box h1{font:500 clamp(30px,5vw,42px)/1.1 var(--serif);letter-spacing:-1px;margin:10px 0}.quiz-sub{color:var(--muted);font-size:12px;margin-bottom:28px}.question-count{font-size:9px;letter-spacing:1.2px;color:var(--green);font-weight:700}.question{font:500 21px/1.4 var(--sans);margin-bottom:19px}.options{display:grid;gap:8px}.option{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:12px 13px;text-align:left;cursor:pointer;color:#4f544c;display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5}.option:hover{border-color:#9aae93}.option.selected{border-color:var(--green);background:#f0f4ed}.option-letter{width:21px;height:21px;border:1px solid #d9dbd2;border-radius:50%;display:grid;place-items:center;font-size:9px;flex:none;color:#7c8178}.option.selected .option-letter{background:var(--green);border-color:var(--green);color:#fff}.quiz-actions{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.quiz-actions .text-button{background:none;color:#7c8178;font-size:11px;padding:9px;cursor:pointer}.quiz-actions .primary:disabled{opacity:.45;cursor:not-allowed}.result{text-align:center;padding:25px 0 40px}.result-icon{width:62px;height:62px;border-radius:50%;background:#e4ecdf;color:var(--green-dark);display:grid;place-items:center;font-size:25px;margin:0 auto 18px}.result h1{font:500 clamp(36px,6vw,52px)/1 var(--serif);letter-spacing:-1px;margin:10px 0}.result p{color:var(--muted);font-size:13px;line-height:1.7;max-width:460px;margin:12px auto 17px}.score-pill{display:inline-block;background:#eeede6;border-radius:30px;padding:8px 13px;font-size:11px;margin:3px}.result .primary,.result .secondary{margin:15px 4px 0}.certificate{background:#fcfbf6;border:1px solid #d8d7c8;padding:9px;box-shadow:0 14px 40px #343c2914;max-width:800px;margin:0 auto 20px}.certificate-inner{border:1px solid #babd9f;min-height:410px;padding:40px 25px;text-align:center;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fcfbf6}.certificate-inner:before,.certificate-inner:after{content:"✳";position:absolute;color:#99aa89;font-size:24px}.certificate-inner:before{top:18px;left:21px}.certificate-inner:after{bottom:18px;right:21px}.cert-brand{font-size:13px;font-weight:700;color:var(--green-dark)}.cert-kicker{font-size:8px;letter-spacing:2px;color:#888e78;margin:22px 0 11px}.certificate-inner h1{font:italic 40px var(--serif);color:#495e43;margin:0}.cert-caption{font:12px var(--serif);color:#777c6d;margin:14px 0 5px}.cert-name{font:500 26px var(--serif);border-bottom:1px solid #abb69b;padding:0 22px 7px;min-width:240px}.cert-course{font:500 15px var(--serif);margin-top:11px}.cert-footer{display:flex;gap:70px;margin-top:30px;color:#71776a;font-size:9px}.cert-footer span{display:block;border-top:1px solid #b9bdad;padding:7px 12px 0;min-width:115px}.cert-actions{text-align:center}.cert-actions .primary,.cert-actions .secondary{margin:4px}.cert-note{text-align:center;color:#8a8e84;font-size:10px;margin-top:14px}.name-modal{position:fixed;inset:0;background:#20251f80;display:grid;place-items:center;padding:18px;z-index:10}.modal-card{background:var(--white);border-radius:9px;padding:25px;width:min(100%,410px);box-shadow:0 24px 70px #0003}.modal-card h2{font:500 28px var(--serif);margin:7px 0}.modal-card p{color:var(--muted);font-size:12px;line-height:1.6}.modal-card label{display:block;font-size:11px;font-weight:700;margin:20px 0 7px}.modal-error{font-size:10px;color:#a4483b;margin-top:6px;min-height:14px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:17px}@media(max-width:700px){.topbar{height:62px;padding:0 18px}.topbar nav{display:none}.hero{min-height:0;padding:53px 20px 43px}.hero h1{font-size:42px;letter-spacing:-1.5px}.hero-copy{font-size:13px}.profile-form{margin-top:23px}.profile-entry{gap:7px}.profile-entry input{padding:11px 10px;font-size:12px}.profile-entry .primary{padding:10px;font-size:11px}.profile-summary{gap:25px;padding:12px;width:100%}.section{padding:15px 20px 50px}.section h2{font-size:27px;max-width:240px}.section-head p{text-align:right}.program-grid{grid-template-columns:1fr;gap:11px}.card-art{height:145px}.card-body h3,.card-body p{min-height:0}.card-body{padding:14px}.page-wrap{padding:27px 18px 50px}.detail-grid{grid-template-columns:1fr;gap:22px}.detail-aside{position:static;order:-1}.detail-main h1{font-size:39px}.detail-image{height:165px}.question{font-size:18px}.progress{margin-bottom:26px}.certificate-inner{min-height:340px;padding:30px 10px}.certificate-inner h1{font-size:34px}.cert-name{font-size:22px;min-width:210px}.cert-footer{gap:22px}.cert-footer span{min-width:98px;font-size:8px}.certificate-inner:before{top:10px;left:10px}.certificate-inner:after{bottom:10px;right:10px}footer{padding:17px 18px;font-size:9px}}
@media print{body{background:white}.topbar,footer,.back-link,.cert-actions,.cert-note{display:none!important}.page-wrap{padding:0;max-width:none}.certificate{box-shadow:none;border:0;max-width:none;margin:0}.certificate-inner{min-height:180mm;border:2px solid #a7b195}@page{size:A4 landscape;margin:12mm}}

/* Banner dan tata letak konten yang lebih ringkas. */
.hero{min-height:0;padding-top:52px;padding-bottom:38px}
.profile-form{margin-top:24px}
.card-art.has-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#18201766,transparent 58%);pointer-events:none}
.card-banner{display:block;width:100%;height:200px;object-fit:contain;background:#fff}.card-art.has-banner{height:auto;overflow:hidden;position:relative}.card-art.has-banner .card-index,.card-art.has-banner .card-type{position:absolute}
.card-index,.card-type{z-index:1;color:#fff;text-shadow:0 1px 4px #0006}
.detail-image{overflow:hidden;padding:0}
.detail-image img{display:block;width:100%;height:100%;object-fit:cover}
.detail-main>.lead{margin:22px 0;white-space:pre-line}
.detail-main>.topic-list{margin-top:20px}
footer{justify-content:center;text-align:center}
footer a{color:var(--green-dark);font-weight:700}
@media(max-width:700px){.hero{padding:34px 20px 26px}.profile-form{margin-top:20px}}
.program-card.preview-only .card-art img{filter:grayscale(1) opacity(.62)}
.program-card.preview-only .card-art:not(.has-banner){filter:grayscale(1)}
.preview-badge{position:absolute;z-index:1;left:12px;bottom:10px;padding:4px 7px;border-radius:4px;background:#454b43d9;color:#fff;font-size:8px;font-weight:700;letter-spacing:.8px}
.detail-main.preview-only .detail-image img{filter:grayscale(1) opacity(.72)}
.detail-aside .primary:disabled{cursor:not-allowed;opacity:.65;background:#92968d}