/* SEMUSIK Learn — editorial course catalogue */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#f4f3ee;--ink:#172c28;--green:#174e40;--line:#d6dbd2;--lime:#d2ec77}
body{font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.65}header,main,footer{max-width:1320px}header{padding:24px 40px;background:var(--paper);position:sticky;top:0;z-index:20}header strong{font-size:25px;letter-spacing:-1.6px}header nav{align-items:center;gap:32px}header nav a{text-decoration:none;font-size:15px;font-weight:600}header nav a:last-child{border:1px solid #b9c5ba;border-radius:30px;padding:9px 24px}main{padding:0 40px}section{padding:88px 0;scroll-margin-top:110px}h2{font-size:clamp(32px,3.3vw,45px);max-width:770px;letter-spacing:-1.6px}h3{letter-spacing:-.7px}.eyebrow{font-size:12px;letter-spacing:2px;margin-bottom:16px}.hero{position:relative;isolation:isolate;overflow:hidden;background:#143c32;color:#f7f8ee;border-radius:18px;grid-template-columns:1.1fr 1fr;gap:28px;padding:64px 54px;margin:20px 0 0;min-height:630px}.hero:before{content:'';position:absolute;width:650px;height:650px;border:1px solid #ffffff12;border-radius:50%;right:-160px;top:-210px;z-index:-1;box-shadow:0 0 0 80px #ffffff03,0 0 0 160px #ffffff03}.hero .eyebrow{color:var(--lime)}.hero .eyebrow:before{content:'●';margin-right:10px;font-size:10px}.hero h1{font-size:clamp(44px,5.3vw,72px);line-height:1.05;letter-spacing:-3px;max-width:620px;font-weight:500;margin:18px 0 24px}.hero h1 em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:var(--lime);font-size:1.1em}.hero p:not(.eyebrow){color:#d3e0d8;font-size:16px;max-width:490px}.hero .tag{font-size:12px!important;color:#c4d4c7!important;margin-top:22px}.hero img{aspect-ratio:4/5;object-fit:cover;object-position:43% center;border-radius:130px 130px 12px 12px;transform:rotate(3deg);border:9px solid #f0ead5;box-shadow:0 25px 65px #041f2355;max-height:485px}.button{border-radius:30px;font-size:15px;padding:13px 23px;transition:transform .18s,background .18s}.button:hover{transform:translateY(-2px);background:#25654e}.hero .button{background:var(--lime);color:#183b2c}.hero .button:hover{background:#e4f8a6}.hero .button.secondary{background:transparent;color:white;border-color:#ffffff55}.cards{gap:26px;margin-top:35px}.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;border-radius:16px;padding:0 30px 30px;overflow:hidden;transition:box-shadow .2s,transform .2s}.card:hover{transform:translateY(-4px);box-shadow:0 18px 45px #132d2910}.card:before{content:'';height:180px;width:calc(100% + 60px);margin:0 -30px 27px;background:linear-gradient(0deg,#172c2830,#172c2800),url('/assets/course-illustrations/02-startup-karier.jpg') center/cover}.card.dark:before{background-image:linear-gradient(0deg,#172c2850,#172c2800),url('/assets/course-illustrations/07-strategi-kewirausahaan.jpg')}.card h3{font-size:32px;max-width:430px;margin:0 0 16px}.card p{margin:0 0 18px}.card ul{padding-left:21px;font-size:16px;flex:1}.card li{padding:4px 0}.card .tag{padding-top:20px;width:100%;border-top:1px solid #d5ddd350;font-size:13px}.card.dark{background:#172c28}.card.dark>a{display:inline-block;border-radius:30px;background:var(--lime);color:#172c28;text-decoration:none;padding:13px 23px;font-size:15px;font-weight:600;margin-top:8px}.outcomes{counter-reset:outcome;gap:30px;margin-top:40px}.outcomes article{counter-increment:outcome;background:#e8ebe2;border:0;border-radius:12px;padding:26px}.outcomes article:before{content:'0' counter(outcome);display:block;font-family:'Instrument Serif',Georgia,serif;font-size:48px;color:var(--green);line-height:1.2}.outcomes h3{margin:24px 0 10px}.outcomes p{font-size:15px;margin-bottom:0}.timeline{gap:0;margin-top:34px}.timeline p{background:transparent;border-top:2px solid #24694e;position:relative;padding:25px 20px 0 0;font-size:15px;margin-top:0}.timeline p:before{content:'';position:absolute;top:-6px;left:0;width:10px;height:10px;background:var(--green);border-radius:50%}.timeline b{display:inline-block;color:var(--green);margin-bottom:10px}.sample{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 45px;background:white;border:1px solid var(--line);padding:42px;border-radius:16px}.sample>.eyebrow,.sample>h2{grid-column:1/-1}.sample>h2{max-width:850px;margin:0 0 30px}.sample>p{font-size:16px}.sample .note{grid-column:1/-1;padding:26px 30px;border-radius:10px;margin:10px 0 25px;background:#edf1df}.sample .note p:last-child{margin-bottom:0}.sample>.button{justify-self:start;align-self:center}.sample>p:last-of-type{font-size:13px}.note b{color:var(--green)}details{background:white;margin:10px 0;border:1px solid var(--line);border-radius:10px;padding:0 24px}summary{list-style:none;padding:21px 35px 21px 0;position:relative;font-size:17px}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:0;color:var(--green);font-size:25px;font-weight:400;top:12px}details[open] summary:after{content:'−'}details>p{font-size:16px;max-width:860px;padding-bottom:12px}main>section:last-child{border:0;border-radius:16px;background:#d2ec77;padding:50px;margin:45px 0 40px;position:relative}main>section:last-child h2{margin-top:0}footer{border-top:1px solid var(--line);padding:30px 40px;font-size:13px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #d96848;outline-offset:5px}section[id]{scroll-margin-top:100px}
@media(min-width:1000px){#course>h2{max-width:750px}#course{padding-top:82px}.hero .button.secondary{padding-left:18px;padding-right:18px}}
@media(max-width:900px){header,main,footer{padding-left:24px;padding-right:24px}.hero{padding:42px 30px;grid-template-columns:1.15fr .85fr;gap:20px;min-height:auto}.hero h1{font-size:49px}.hero img{border-width:6px}.hero .button{display:block;width:max-content}.card h3{font-size:27px}.sample{gap:0 25px;padding:30px}}
@media(max-width:650px){header{padding:17px 20px}header strong{font-size:21px}header nav{gap:15px}header nav a{font-size:13px}header nav a:last-child{padding:7px 13px}header nav a:first-child{display:none}main{padding:0 16px}.hero{grid-template-columns:1fr;border-radius:12px;padding:32px 25px;margin-top:12px}.hero h1{font-size:49px;letter-spacing:-2px}.hero img{height:260px;max-width:340px;justify-self:center;border-radius:80px 80px 8px 8px;aspect-ratio:1.3;object-position:center 43%;margin:13px 0 10px}.hero .button{display:inline-block;padding:12px 17px;font-size:14px}.hero .tag{line-height:1.8}.hero p:not(.eyebrow){font-size:15px}section{padding:52px 6px}.cards,.outcomes,.sample{grid-template-columns:1fr}.cards{gap:20px}.card{padding-left:24px;padding-right:24px}.card:before{width:calc(100% + 48px);margin-left:-24px;margin-right:-24px;height:155px}.timeline{grid-template-columns:1fr 1fr;gap:26px 14px}.sample{padding:25px 22px}.sample>h2{font-size:30px}.sample .note{padding:20px}.outcomes{gap:15px}.outcomes article{padding:24px}main>section:last-child{padding:32px 25px;margin:25px 0}h2{font-size:32px}summary{font-size:16px}details{padding:0 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.card{transition:none}.card:hover,.button:hover{transform:none}}

/* Refined editorial masthead: architectural spacing, restrained palette. */
:root{--lime:#ded4b7}
header{max-width:none;padding:27px max(40px,calc((100vw - 1200px)/2));background:#f7f6f2;border-bottom:1px solid #172c2818}
header strong{font-size:22px;letter-spacing:-1.1px;font-weight:700}
header nav{gap:38px}header nav a{font-size:13px;font-weight:500;letter-spacing:.035em}header nav a:last-child{border:0;border-left:1px solid #c8cdc5;border-radius:0;padding:4px 0 4px 32px}
.hero{margin:0 calc(50% - 50vw);width:100vw;min-height:660px;padding:0;border-radius:0;background:#152725;grid-template-columns:1.08fr 1fr;gap:0;overflow:hidden}
.hero:before{display:none}
.hero>div{padding:76px 58px 62px max(40px,calc((100vw - 1200px)/2));z-index:1}
.hero .eyebrow{font-size:11px;color:#c0b798;letter-spacing:3px;font-weight:500;margin:0 0 35px}
.hero .eyebrow:before{display:none}
.hero h1{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(65px,6.9vw,96px);letter-spacing:-2px;line-height:.98;font-weight:400;margin:0 0 30px;color:#f5f3eb}
.hero h1 em{font-size:1em;color:#d8ccad;font-weight:400}
.hero p:not(.eyebrow){font-size:15px;line-height:1.85;color:#bdc9c3;max-width:410px}
.hero img{display:block;align-self:stretch;width:100%;height:100%;max-height:none;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:52% center;transform:none;border:0;border-radius:0;box-shadow:none;filter:saturate(.65);margin:0;min-height:660px}
.hero .button{border-radius:0;background:#e4dac1;color:#182b27;padding:14px 24px;font-size:13px;font-weight:600;margin:22px 18px 12px 0;letter-spacing:.02em}
.hero .button:hover{background:#f1e8d5;transform:none}
.hero .button.secondary{padding:13px 0 7px;background:transparent;border:0;border-bottom:1px solid #74827b;color:#e7e9e1;font-weight:400}
.hero .button.secondary:hover{border-color:#e7e9e1;background:transparent}
.hero .tag{padding-top:23px;margin-top:24px!important;border-top:1px solid #ffffff18;font-size:11px!important;letter-spacing:.045em;color:#91a29a!important}
.hero h1{font-size:clamp(52px,5.2vw,76px)}
@media(min-width:1500px){.hero{grid-template-columns:1fr 1fr}.hero>div{padding-right:90px}}
@media(max-width:900px){header{padding:24px}.hero{grid-template-columns:1.1fr 1fr;min-height:610px}.hero>div{padding:55px 30px}.hero h1{font-size:65px}.hero img{min-height:610px}.hero .button{display:inline-block;margin-right:10px}.hero .button.secondary{margin-top:4px}}
@media(max-width:650px){header{padding:21px 22px}header nav{gap:20px}header nav a:last-child{padding-left:20px}.hero{grid-template-columns:1fr;min-height:0}.hero>div{padding:46px 28px 35px}.hero .eyebrow{margin-bottom:28px;font-size:10px}.hero h1{font-size:65px;letter-spacing:-1.4px;line-height:1}.hero p:not(.eyebrow){font-size:14px}.hero img{min-height:0;height:300px;max-width:none;object-position:center 47%}.hero .tag{margin-top:14px!important;padding-top:20px}.hero .button{font-size:12px;padding:13px 18px;margin-top:18px}.hero .button.secondary{padding:10px 0}.hero .eyebrow:before{display:none}}