/* Web series: the same visual language as Mod Pembelajaran. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

.siri-web { background:var(--tfd-canvas); color:var(--tfd-text); font-family:var(--tfd-font-ui); }
.siri-web .container { max-width:1248px; }
.siri-web .site-header { background:var(--tfd-navy); border-bottom:0; }
.siri-web .tahap-hero { background:var(--tfd-canvas); color:var(--tfd-text); padding:40px 0 32px; border-bottom:1px solid var(--tfd-border); }
.siri-web .tahap-hero::before,.siri-web .tahap-hero::after { display:none; }
.siri-web .siri-summary { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(135deg,var(--tfd-navy-strong),#125BA5); border-radius:16px; padding:24px; color:white; }
.siri-web .siri-summary::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--tfd-learning-pattern); background-size:160px 160px; opacity:.12; mask-image:linear-gradient(120deg,transparent,#000); }
.siri-web .tahap-hero .siri-summary h1 { color:white; font-size:clamp(1.5rem,3vw,2rem); max-width:none; }
.siri-web .siri-summary :is(.lead,.tahap-syarat,.tahap-angka span) { color:#DAE9FA; }
.siri-web .siri-summary .tahap-angka strong { color:white; }
.siri-web .siri-summary .tahap-angka { border-color:#ffffff30; margin-top:16px; padding-top:16px; }
.siri-web .siri-summary .btn-teks { color:white; }
.siri-web .siri-summary .btn-aksi { background:#2563EB; }
.siri-web .siri-summary .btn-aksi:hover { background:#1D4ED8; }
.siri-web .siri-actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 0; }
.siri-web .siri-actions > .btn-aksi { flex:1 0 100%; min-height:52px; justify-content:center; }
.siri-sidebar { display:none; }
@media(min-width:1100px) {
  .siri-web.siri-with-sidebar { padding-left:248px; }
  .siri-web.siri-with-sidebar .site-header { background:var(--tfd-canvas); color:var(--tfd-navy); }
  .siri-web.siri-with-sidebar .site-header .brand { display:none; }
  .siri-web .site-header .navbar { justify-content:space-between; }
  .siri-web .siri-sidebar { display:block; position:fixed; inset:0 auto 0 0; width:248px; padding:28px 12px; overflow-y:auto; background:white; border-right:1px solid var(--tfd-border); z-index:100; }
  .siri-sidebar a { display:flex; align-items:center; gap:14px; padding:13px 12px; min-height:48px; color:var(--tfd-text-muted); text-decoration:none; border-radius:12px; font-size:.875rem; }
  .siri-sidebar .siri-brand { color:var(--tfd-navy); margin-bottom:28px; }
  .siri-sidebar img { border-radius:8px; }
  .siri-sidebar svg { width:20px; height:20px; flex:none; }
  .siri-sidebar a[aria-current],.siri-sidebar a:hover { background:var(--tfd-blue-soft); color:var(--tfd-blue-strong); }
  .siri-sidebar hr { border:0; border-top:1px solid var(--tfd-border); margin:18px 0; }
}
.siri-web .tahap-hero h1 { font-family:var(--tfd-font-formal); font-size:clamp(1.8rem,4vw,2.75rem); color:var(--tfd-navy); max-width:30ch; line-height:1.2; }
.siri-web .jejak,.siri-web .jejak a { color:var(--tfd-navy); }
.siri-web .lead,.siri-web .tahap-syarat { color:var(--tfd-text-muted); max-width:70ch; }
.siri-web .tahap-angka { border-color:var(--tfd-border); gap:32px; }
.siri-web .tahap-angka strong { color:var(--tfd-navy); font-family:var(--tfd-font-ui); font-size:1.125rem; }
.siri-web .tahap-angka span { color:var(--tfd-text-muted); }
.siri-web .tanda { background:var(--tfd-blue-soft); color:var(--tfd-navy); border-color:transparent; }
.siri-web .btn { border-radius:12px; min-height:44px; font-family:var(--tfd-font-ui); }
.siri-web .btn-aksi,.siri-web .btn-primary { background:var(--tfd-blue-strong); color:white; border-color:transparent; box-shadow:none; }
.siri-web .btn-aksi:hover,.siri-web .btn-primary:hover { background:var(--tfd-navy); }
.siri-web .btn-atas-gelap,.siri-web .btn-ghost { background:white; color:var(--tfd-navy); border:1px solid var(--tfd-border); }
.siri-web .btn-teks { color:var(--tfd-navy); }
.siri-web .laluan { background:var(--tfd-canvas); padding:32px 0 56px; }
.siri-web .peta-kepala { font-family:var(--tfd-font-ui); font-size:1.25rem; color:var(--tfd-navy); margin-top:32px; }
.siri-web .mula-list { display:block; background:var(--tfd-surface); border:1px solid var(--tfd-border); border-radius:16px; overflow:hidden; padding:0; }
.siri-web .mula-list li + li { border-top:1px solid var(--tfd-border); }
.siri-web .mula-list a { border:0; border-radius:0; background:transparent; padding:20px 24px; margin:0; box-shadow:none; }
.siri-web .mula-list a:hover { background:var(--tfd-blue-soft); transform:none; }
.siri-web .mula-list a::before { background:transparent; color:var(--tfd-text-muted); border-radius:0; }
.siri-web .mula-tajuk { min-width:0; overflow-wrap:anywhere; color:var(--tfd-text); }
.siri-web .mula-tajuk em,.siri-web .mula-list small { color:var(--tfd-text-muted); }
.siri-web .kotak-seterusnya,.siri-web .bahan-panel,.siri-web .kosong { background:var(--tfd-surface); border:1px solid var(--tfd-border); border-radius:16px; box-shadow:none; }
.siri-web :is(a,button):focus-visible { outline:3px solid var(--tfd-blue-strong); outline-offset:3px; }
@media(max-width:600px) {
  .siri-web .tahap-hero { padding:24px 0; }
  .siri-web .tahap-angka { gap:16px; flex-wrap:wrap; }
  .siri-web .mula-list a { padding:16px 12px; gap:12px; flex-wrap:wrap; }
  .siri-web .mula-list small { white-space:normal; }
}