/* ecoedu.info — tema "langit dan daun" */
:root {
  --ink: #1c2833;
  --ink-2: #34495e;
  --muted: #5d6d7e;
  --paper: #f8f9fa;
  --surface: #ffffff;
  --line: #e1e6ea;
  --deep: #1a5276;
  --sky: #1a5276;
  --sky-2: #2e86c1;
  --sky-soft: #d6eaf8;
  --leaf: #038666;
  --leaf-soft: #e6f4ef;
  --sun: #d4912f;
  --sun-soft: #fbf1e3;
  --red: #c0392b;
  --radius: 12px;
  --radius-s: 10px;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --j-sd: #d4912f; --j-smp: #2e86c1; --j-sma: #1a5276; --j-smu: #1a5276; --j-utbk: #c0392b; --j-mahasiswa: #6b4fa3; --j-profesional: #038666; --j-umum: #038666;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sky); text-underline-offset: 3px; }
a:hover { color: var(--deep); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }

/* Header */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand b { display: block; font-family: var(--display); font-size: 1.2rem; line-height: 1; }
.brand small { display: block; color: var(--muted); font-size: .78rem; }
.menu-btn { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; }
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--ink); padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.nav a:hover { background: var(--sky-soft); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.nav a.yt { color: var(--red); }
@media (max-width: 860px) {
  .js .menu-btn { display: block; }
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--surface); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 8px 16px 16px; }
  .js .nav.open { display: flex; }
  .nav a { border-radius: 8px; padding: 12px; }
  .head-row { flex-wrap: wrap; }
}

/* Buttons, chips */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--sky); color: #fff; border: 2px solid var(--sky); border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 700; font-size: .98rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.btn.ghost { background: transparent; color: var(--sky); }
.btn.ghost:hover { background: var(--sky-soft); color: var(--deep); }
.btn.small { padding: 7px 14px; font-size: .9rem; }
.btn.yt-btn { background: var(--red); border-color: var(--red); }
.btn.yt-btn:hover { background: #9c2a1f; border-color: #9c2a1f; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .6em; }
.chip { display: inline-block; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1.5px solid currentColor; text-decoration: none; background: var(--surface); }
.chip.plain { color: var(--muted); border-color: var(--line); font-weight: 600; }
.j-sd { color: #a36b00; } .j-smp { color: #1f7fae; } .j-sma, .j-smu { color: var(--j-smu); } .j-utbk { color: var(--j-utbk); } .j-mahasiswa { color: var(--j-mahasiswa); } .j-profesional { color: var(--j-profesional); } .j-umum { color: var(--j-umum); }
.tag { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--leaf); background: var(--leaf-soft); padding: 2px 9px; border-radius: 6px; }

/* Hero */
.hero { background: var(--deep); color: #fff; padding: clamp(40px, 7vw, 84px) 0 clamp(36px, 6vw, 64px); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto -10% -40px -10%; height: 120px; background:
  radial-gradient(60% 100% at 50% 100%, rgba(124,198,232,.18), transparent 70%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 15ch; }
.hero .lead { color: #cfe3e8; }
.hero .btn { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.hero .btn:hover { background: #ffd273; border-color: #ffd273; }
.hero .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.hero .btn.ghost:hover { background: rgba(255,255,255,.1); }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px; }
.levels h2 { color: #fff; font-size: 1.1rem; font-family: var(--font); font-weight: 700; margin-bottom: 12px; }
.level-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.level-grid.big { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.level { display: flex; flex-direction: column; gap: 2px; text-decoration: none; background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 14px 16px 14px 18px; border-left: 6px solid currentColor; min-height: 92px; transition: transform .15s ease; }
.level b { font-family: var(--display); font-size: 1.35rem; color: var(--ink); }
.level span { font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.level .level-count { margin-top: auto; padding-top: 8px; color: var(--muted); font-weight: 600; }
.level:hover { transform: translateY(-2px); }
.level.j-sd { border-left-color: var(--j-sd); } .level.j-smp { border-left-color: var(--j-smp); } .level.j-sma { border-left-color: var(--j-sma); }
.level.j-mahasiswa { border-left-color: var(--j-mahasiswa); } .level.j-profesional { border-left-color: var(--j-profesional); } .level.j-umum { border-left-color: var(--j-umum); }
@media (prefers-reduced-motion: reduce) { .level { transition: none; } .level:hover { transform: none; } }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .level-grid.big { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .level-grid, .level-grid.big { grid-template-columns: 1fr; } .level { min-height: 0; } }

/* Blocks */
.block { padding: clamp(28px, 4vw, 48px) 0; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.block-head h2 { margin: 0; }
.page-head { padding: clamp(28px, 5vw, 52px) 0 8px; }
.narrow-head { max-width: 900px; }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: .6em; }
.crumbs a { color: var(--muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
.panel { border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.panel.sun { background: var(--sun-soft); border-color: #f1d9a0; }
.panel.leaf { background: var(--leaf-soft); border-color: #b9e0c9; }
.empty { border: 2px dashed var(--line); border-radius: var(--radius); padding: 24px; background: var(--surface); }
.note { background: var(--sky-soft); border-radius: var(--radius-s); padding: 12px 16px; margin-top: 18px; }
.alert { background: #fdecea; border: 1px solid #f3b7b0; color: #8a1f12; padding: 10px 14px; border-radius: var(--radius-s); }

/* Video cards */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
@media (max-width: 900px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } }
.vcard { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #dfe8ea; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.dur { position: absolute; right: 8px; bottom: 8px; background: rgba(10,30,35,.85); color: #fff; font-size: .78rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.vbody { padding: 14px 16px 16px; }
.vbody h3 { margin: 0 0 8px; font-size: 1.08rem; }
.vbody h3 a { color: var(--ink); text-decoration: none; }
.vbody h3 a:hover { color: var(--sky); }
.vseg { font-size: .82rem; font-weight: 700; color: var(--leaf); margin: 0 0 4px; }
.thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 2rem; color: #fff; background: var(--deep); }
.thumb-ph.mini { width: 96px; height: 54px; font-size: .9rem; border-radius: 6px; flex: none; }
.seg-udr { background: #3fa7d6; } .seg-kls { background: #e39e1c; } .seg-kul { background: #6a55c2; } .seg-krj { background: var(--leaf); }
.seg-jbr { background: #2b7a78; } .seg-kbj { background: #1d6fb8; } .seg-dat { background: #455a64; } .seg-pry { background: #8a5a2b; } .seg-jci { background: #9a3b5c; } .seg-kmp { background: #5c6bc0; } .seg-tny { background: #0f4c5c; }

/* Featured & player */
.featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
.featured-title { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.featured-title a { color: var(--ink); text-decoration: none; }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } }
.yt-lite { position: relative; aspect-ratio: 16 / 9; background: #0d2a31; border-radius: var(--radius); overflow: hidden; }
.yt-lite img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-lite .play { position: absolute; inset: 0; margin: auto; width: 76px; height: 54px; border-radius: 14px; border: 0; background: var(--red); cursor: pointer; }
.yt-lite .play::before { content: ""; position: absolute; left: 31px; top: 16px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.yt-lite .play:hover { background: #a92e22; }
.yt-lite[data-yt=""] .play { display: none; }
.yt-lite[data-yt=""]::after { content: "Video segera tayang"; position: absolute; inset: 0; display: grid; place-items: center; color: #cfe3e8; font-weight: 700; }

/* Video page */
.video-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; padding-bottom: 48px; }
@media (max-width: 960px) { .video-layout { grid-template-columns: 1fr; } }
.video-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 26px; }
.video-main h2 { margin-top: 1.4em; font-size: 1.35rem; }
.points li { margin-bottom: .4em; }
.chapters { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.chapters li + li { border-top: 1px solid var(--line); }
.chapters button { width: 100%; text-align: left; background: none; border: 0; font: inherit; padding: 10px 14px; cursor: pointer; color: var(--ink); }
.chapters button:hover { background: var(--sky-soft); }
.chapters .time { font-weight: 700; color: var(--sky); font-variant-numeric: tabular-nums; margin-right: 8px; }
.refs { font-size: .95rem; word-break: break-word; }
.side-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.side-box h2 { font-size: 1.1rem; }
.next-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.next-list a { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.next-list img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; }

/* Materials */
.mat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mat-list.grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mat-list.grid > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; }
@media (max-width: 700px) { .mat-list.grid { grid-template-columns: 1fr; } }
.mat { display: flex; flex-direction: column; gap: 3px; }
.mat-type { font-size: .78rem; font-weight: 700; color: var(--muted); }
.mat-desc { font-size: .92rem; color: var(--ink-2); }
.mat-act { font-weight: 700; font-size: .92rem; }
.mat-act.off { color: var(--muted); font-weight: 600; }

/* Filters & forms */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 18px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 700; color: var(--ink-2); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid #b9cbcd; border-radius: var(--radius-s); padding: 9px 12px; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--sky); outline: none; box-shadow: 0 0 0 3px var(--sky-soft); }
.filters input[type=search] { min-width: 240px; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.hp { position: absolute; left: -9999px; }
.pager { display: flex; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.pager a { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; }
.pager a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Quiz cards & lists */
.list-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
.list-cards.one { grid-template-columns: 1fr; }
@media (max-width: 700px) { .list-cards { grid-template-columns: 1fr; } }
.qcard { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.qcard:hover { border-color: var(--sky); }
.qcard b { font-size: 1.05rem; }
.daily-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); margin-bottom: 8px; }
.daily-link b { font-family: var(--display); font-size: 1.3rem; }
.seg-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 760px) { .seg-list { grid-template-columns: 1fr; } }
.seg { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); text-decoration: none; color: var(--ink); }
.seg:hover { border-color: var(--sky); }
.seg b { display: block; }
.seg small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.35; }
.seg-code { display: grid; place-items: center; height: 40px; border-radius: 8px; color: #fff; font-weight: 800; font-size: .85rem; }
.count { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.series { margin-bottom: 22px; }
.series-list { margin: 0; padding: 0; list-style: none; counter-reset: s; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.series-list li { counter-increment: s; }
.series-list li + li { border-top: 1px solid var(--line); }
.series-list a { display: grid; grid-template-columns: 34px 1fr; padding: 12px 14px; text-decoration: none; color: var(--ink); }
.series-list a::before { content: counter(s); font-weight: 800; color: var(--sky); grid-row: span 2; }
.series-list .sl-title { font-weight: 700; }
.series-list .muted { font-size: .85rem; }

/* Quiz player */
.quiz { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); }
.quiz-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; font-weight: 700; color: var(--ink-2); }
.quiz-timer { font-variant-numeric: tabular-nums; background: var(--sun-soft); padding: 4px 10px; border-radius: 8px; }
.quiz-timer.low { background: #fdecea; color: var(--red); }
.progress { height: 6px; background: var(--paper); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.progress span { display: block; height: 100%; background: var(--sky); width: 0; transition: width .2s; }
.q-text { font-size: 1.15rem; font-weight: 600; margin-bottom: 14px; white-space: pre-line; }
.opts { display: grid; gap: 10px; }
.opt { text-align: left; font: inherit; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; cursor: pointer; color: var(--ink); display: flex; gap: 10px; align-items: flex-start; }
.opt .k { font-weight: 800; color: var(--sky); min-width: 1.4em; }
.opt:hover { border-color: var(--sky); }
.opt.sel { border-color: var(--sky); background: var(--sky-soft); }
.opt.ok { border-color: var(--leaf); background: var(--leaf-soft); }
.opt.no { border-color: var(--red); background: #fdecea; }
.opt[disabled] { cursor: default; }
.feedback { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--paper); }
.feedback.ok { background: var(--leaf-soft); }
.feedback.no { background: #fdecea; }
.quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.dots { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.dots button { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.dots button.done { background: var(--sky-soft); border-color: var(--sky); }
.dots button.cur { outline: 2px solid var(--ink); }
.score { text-align: center; padding: 10px 0 18px; }
.score .big { font-family: var(--display); font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--deep); }
.review { display: grid; gap: 12px; margin-top: 10px; }
.review-item { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; }
.review-item.ok { border-left: 5px solid var(--leaf); }
.review-item.no { border-left: 5px solid var(--red); }
.level-pills, .eq-levels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill { font: inherit; font-weight: 700; font-size: .92rem; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; }
.pill:hover { border-color: var(--sky); }
.pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.streak { font-weight: 700; color: var(--ink-2); }

/* Games */
.game-tile { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; text-decoration: none; color: var(--ink); }
.game-tile b { display: block; font-family: var(--display); font-size: 1.35rem; }
.game-tile span span { color: var(--ink-2); }
.game-tile.soon { opacity: .65; }
a.game-tile:hover { border-color: var(--leaf); }
.gt-badge { width: 72px; height: 72px; border-radius: 18px; background: var(--leaf); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.6rem; }
.eq-modes { margin: 18px 0; }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.eq-group { font-weight: 700; font-size: .85rem; letter-spacing: .02em; color: var(--muted); margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.eq-group:first-child { margin-top: 0; }
.tag-new { background: var(--sun); color: var(--ink); border-radius: 999px; padding: 1px 9px; font-size: .75rem; }
.mode-tile.alt { border-color: #e8d49c; background: #fffaf0; }
.mode-tile.alt:hover, .mode-tile.alt.on { border-color: var(--sun); background: #fdf1d3; }
.eq-sentence { font-family: var(--display); font-size: 1.35rem; line-height: 1.4; background: var(--paper); border-left: 4px solid var(--sky); border-radius: var(--radius-s); padding: 14px 16px; margin: 6px 0 14px; }
.eq-word { font-family: var(--display); font-size: 2rem; font-weight: 700; margin: 4px 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eq-judge { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eq-judge .opt { justify-content: center; font-weight: 700; text-align: center; }
.eq-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eq-pair .opt { flex-direction: column; align-items: center; text-align: center; padding: 18px 12px; }
.eq-pair .opt b { font-family: var(--display); font-size: 1.6rem; }
.eq-pair .opt small { color: var(--muted); }
.eq-cat { display: inline-block; font-size: .78rem; font-weight: 700; background: var(--sky-soft); color: var(--sky); border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.eq-compare { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.feedback .trap { font-weight: 700; }
.mode-tile { text-align: left; font: inherit; padding: 14px 16px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); }
.mode-tile b { display: block; font-family: var(--display); font-size: 1.12rem; }
.mode-tile span { font-size: .85rem; color: var(--muted); }
.mode-tile:hover, .mode-tile.on { border-color: var(--leaf); background: var(--leaf-soft); }
.eq-stage { min-height: 40px; }
.card3d { perspective: 1000px; margin: 10px 0 16px; }
.flash { position: relative; height: 230px; transform-style: preserve-3d; transition: transform .45s; cursor: pointer; }
.flash.flip { transform: rotateY(180deg); }
.flash .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; border: 2px solid var(--line); background: var(--surface); }
.flash .back { transform: rotateY(180deg); background: var(--sky-soft); }
.flash .word { font-family: var(--display); font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .flash { transition: none; } }
.speak { font: inherit; border: 0; background: var(--sun); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; margin-top: 10px; }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match-grid button { font: inherit; padding: 12px; border-radius: var(--radius-s); border: 2px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); min-height: 52px; }
.match-grid button.sel { border-color: var(--sky); background: var(--sky-soft); }
.match-grid button.done { border-color: var(--leaf); background: var(--leaf-soft); color: var(--leaf); cursor: default; }
.match-grid button.wrong { border-color: var(--red); }
.tokens { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 10px; border: 2px dashed var(--line); border-radius: var(--radius-s); margin-bottom: 10px; }
.tokens button { font: inherit; font-weight: 600; padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.tokens.answer { background: var(--paper); }
.eq-input { display: flex; gap: 10px; margin: 12px 0; }
.eq-input input { flex: 1; font-size: 1.2rem; }

/* Prose */
.prose p, .prose li { max-width: 68ch; }
.prose h2 { margin-top: 1.4em; font-size: 1.3rem; }

/* Footer */
.site-foot { background: var(--ink); color: #cfe0e3; padding: 36px 0 22px; margin-top: 40px; }
.site-foot a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 18px; }
.foot-grid nav { display: grid; gap: 6px; align-content: start; }
.foot-brand { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: #fff; margin-bottom: 4px; }
.site-foot .muted { color: #9fb8bd; }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; } }
.eq-word .speak { font-family: var(--font); font-size: 1rem; margin-top: 0; }
.eq-stage > .speak { margin: 0 0 12px; }

/* ===== Versi 3: kumpulan kuis belajar ===== */
.hero-text.wide h1 { max-width: 22ch; }
.stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; color: #cfe3e8; }
.stats b { font-family: var(--display); font-size: 1.6rem; color: var(--sun); margin-right: 4px; }
.jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.jcard { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid currentColor; border-radius: var(--radius); padding: 0 0 8px; display: flex; flex-direction: column; }
.jcard-head { display: block; padding: 14px 16px 8px; text-decoration: none; color: var(--ink); }
.jcard-head b { display: block; font-family: var(--display); font-size: 1.35rem; }
.jcard-head span { display: block; font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.jcard-head:hover b { color: var(--sky); }
.mlist { list-style: none; margin: 0; padding: 0 8px; display: grid; gap: 2px; }
.mlist a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-s); text-decoration: none; color: var(--ink); font-weight: 600; }
.mlist a:hover { background: var(--paper); color: var(--sky); }
.mlist.inline { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.mlist.inline a { border: 1px solid var(--line); background: var(--surface); }
.mic { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 8px; background: var(--paper); font-size: .9rem; font-weight: 800; color: var(--deep); font-family: var(--display); }
.mic.big { min-width: 44px; height: 44px; font-size: 1.15rem; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mcard { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid currentColor; border-radius: var(--radius); padding: 16px; text-decoration: none; }
.mcard b { font-family: var(--display); font-size: 1.25rem; color: var(--ink); }
.mcard span { color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.mcard:hover { border-color: currentColor; box-shadow: 0 6px 18px rgba(18,51,60,.08); }
.mcard.tantangan { color: var(--sun); background: #fffaf0; }
.vids { border-top: 1px solid var(--line); padding-top: 28px; }
.mt { margin-top: 36px; }
.tingkat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.tingkat-tab { font: inherit; font-weight: 800; padding: 12px; border-radius: var(--radius-s); border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.tingkat-tab.on.t1 { border-color: var(--leaf); background: var(--leaf-soft); }
.tingkat-tab.on.t2 { border-color: var(--sun); background: var(--sun-soft); }
.tingkat-tab.on.t3 { border-color: var(--red); background: #fdecea; }
.lat-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lat-info { margin: 10px 0; }
.paket-wrap { margin: 8px 0 16px; }
.paket-wrap summary { cursor: pointer; font-weight: 700; color: var(--sky); }
.paket-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 10px; }
.paket { font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; padding: 2px; }
.paket b { font-size: .95rem; }
.paket span { font-size: .68rem; color: var(--leaf); font-weight: 700; min-height: 1em; }
.paket.next { border-color: var(--sky); box-shadow: 0 0 0 2px var(--sky-soft); }
.paket.done { background: var(--leaf-soft); }
.paket.soon { background: var(--paper); color: #9fb2b6; cursor: default; }
@media (max-width: 560px) { .paket-grid { grid-template-columns: repeat(6, 1fr); } }
.lat-head h2 { margin-bottom: 0; }
.bacaan { background: #fbfcf8; border: 1px solid var(--line); border-left: 4px solid var(--sun); border-radius: var(--radius-s); padding: 10px 14px; margin: 10px 0 14px; }
.bacaan summary { cursor: pointer; }
.bacaan-teks { white-space: pre-line; line-height: 1.7; margin-top: 8px; max-height: 50vh; overflow-y: auto; }
.bacaan .terjemahan { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.bacaan .terjemahan summary { color: var(--sky); font-weight: 700; }
.q-text { white-space: pre-line; }
.tr { color: var(--ink-2); margin-top: 6px; }
.feedback .tr { border-top: 1px dashed rgba(0,0,0,.1); padding-top: 6px; }
/* English Quest per aspek */
.eq-top { display: grid; gap: 10px; }
.eq-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eq-row > .lbl { font-weight: 700; font-size: .85rem; color: var(--muted); min-width: 64px; }
.eq-aspek { margin-top: 18px; }
.eq-aspek h3 { font-size: 1.05rem; margin: 18px 0 8px; display: flex; gap: 8px; align-items: baseline; }
.eq-aspek h3 small { color: var(--muted); font-weight: 600; font-family: var(--font); }
.eq-paket { font-size: .85rem; color: var(--muted); margin: 0 0 8px; }
.dlg { display: grid; gap: 10px; }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; }
.bubble.them { background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.me { background: var(--sky-soft); margin-left: auto; border-bottom-right-radius: 4px; }
.bubble .ar { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* ===== Versi 4: tampilan ramah semua umur (gaya daftar keterampilan), akun, grup ===== */
:root {
  --grape: #6a55c2; --grape-soft: #efebfb; --coral: #e8664a; --coral-soft: #fdece7; --teal: #12a3a3; --teal-soft: #e0f5f5;
  --pink: #d9468f; --shadow: 0 1px 2px rgba(18,51,60,.06), 0 6px 20px rgba(18,51,60,.07);
}
body { background: #f6f9fb; }
.site-head { box-shadow: 0 1px 0 var(--line); border-bottom: 0; }
.head-row { min-height: 68px; gap: 12px; }
.brand b { font-size: 1.3rem; color: var(--sky); }
.nav { flex: 1; justify-content: center; }
.nav a { font-size: .95rem; padding: 9px 14px; }
.nav a[aria-current="page"] { background: var(--sky); }
.nav-grup::before { content: "🏆 "; }
.head-akun { display: flex; align-items: center; gap: 8px; }
.me-chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 700; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); }
.me-chip:hover, .me-chip.on { border-color: var(--sky); }
.ava { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--grape); color: #fff; font-weight: 800; font-size: .95rem; flex: none; }
.me-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.sun { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn.sun:hover { background: #ffc94f; border-color: #ffc94f; color: var(--ink); }
.btn.red { background: var(--red); border-color: var(--red); }
.btn.red:hover { background: #9c2a1f; border-color: #9c2a1f; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--sky); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 980px) {
  .js .menu-btn { display: block; }
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 68px; background: var(--surface); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 8px 16px 16px; box-shadow: var(--shadow); }
  .js .nav.open { display: flex; }
  .head-row { flex-wrap: nowrap; }
}
@media (max-width: 520px) {
  .brand small, .me-name { display: none; }
  .me-chip { padding: 3px; }
  .head-akun .btn.small { padding: 6px 11px; }
}
.flash { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-s); background: var(--leaf-soft); border: 1px solid #b9e0c9; font-weight: 600; }
.flash.err { background: #fdecea; border-color: #f3b7b0; color: #8a1f12; }
.ajakan { background: var(--sun-soft); border-bottom: 1px solid #f1d9a0; }
.ajakan-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; font-size: .95rem; }
.ajakan-row > span:nth-child(2) { flex: 1; min-width: 200px; }
.ajakan-ic { font-size: 1.3rem; }

/* Beranda */
.hero2 { background: radial-gradient(900px 400px at 85% 0%, #fff4d6 0%, rgba(255,244,214,0) 60%), linear-gradient(180deg, #e8f3fc 0%, #f6f9fb 100%); padding: clamp(32px, 6vw, 72px) 0 clamp(28px, 5vw, 56px); }
.hero2-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.hero2 h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); color: var(--ink); max-width: 18ch; }
.eyebrow { font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); margin-bottom: .5em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.stat-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.stat-row li { background: var(--surface); border-radius: 12px; padding: 8px 14px; box-shadow: var(--shadow); display: flex; align-items: baseline; gap: 6px; }
.stat-row b { font-family: var(--display); font-size: 1.4rem; color: var(--sky); }
.stat-row span { font-size: .88rem; color: var(--ink-2); }
.demo-card { background: var(--surface); border-radius: 22px; padding: 22px; box-shadow: 0 20px 50px rgba(29,111,184,.18); transform: rotate(1.5deg); border: 1px solid var(--line); }
.demo-top { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--muted); font-weight: 700; margin-bottom: 12px; }
.pill-s { font-size: .78rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.pill-s.t1 { background: var(--leaf-soft); color: var(--leaf); } .pill-s.t2 { background: var(--sun-soft); color: #9a6a00; } .pill-s.t3 { background: #fdecea; color: var(--red); }
.demo-q { font-weight: 700; font-size: 1.05rem; }
.demo-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-opts span { border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; font-weight: 600; background: var(--paper); }
.demo-opts .ok { border-color: var(--leaf); background: var(--leaf-soft); }
.demo-bar { height: 8px; background: var(--paper); border-radius: 99px; margin: 16px 0 8px; overflow: hidden; }
.demo-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--leaf), var(--sky)); }
.demo-foot { font-size: .85rem; color: var(--muted); margin: 0; font-weight: 600; }
@media (max-width: 860px) { .hero2-grid { grid-template-columns: 1fr; } .demo-card { transform: none; max-width: 460px; } }

/* Strip jenjang (mirip tab mata pelajaran) */
.jtabs { background: var(--surface); border-bottom: 1px solid var(--line); }
.jtabs-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.jtabs-row::-webkit-scrollbar { display: none; }
.jtab { flex: none; text-decoration: none; font-weight: 800; font-size: .92rem; padding: 8px 14px; border-radius: 10px; }
.jtab:hover { background: var(--paper); }

.jtab.on { color: #fff; }
.jtab.j-sd.on { background: #e39e1c; } .jtab.j-smp.on { background: #2a95c9; } .jtab.j-smu.on { background: var(--sky); } .jtab.j-utbk.on { background: var(--red); }
.jtab.j-mahasiswa.on { background: var(--grape); } .jtab.j-profesional.on { background: var(--leaf); } .jtab.j-umum.on { background: var(--deep); }

/* Kartu jenjang */
.jgrid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.jcard { border: 0; border-top: 0; box-shadow: var(--shadow); overflow: hidden; padding-bottom: 10px; }
.jcard-head { background: currentColor; padding: 16px 18px 14px; }
.jcard-head b, .jcard-head span { color: #fff; }
.jcard-head span { opacity: .92; }
.jcard.j-sd .jcard-head { background: #e39e1c; } .jcard.j-smp .jcard-head { background: #2a95c9; } .jcard.j-smu .jcard-head { background: var(--sky); }
.jcard.j-utbk .jcard-head { background: var(--red); } .jcard.j-mahasiswa .jcard-head { background: var(--grape); } .jcard.j-profesional .jcard-head { background: var(--leaf); } .jcard.j-umum .jcard-head { background: var(--deep); }
.jcard-head:hover b { color: #fff; text-decoration: underline; }
.mlist { padding: 8px 8px 0; }
.mlist a { gap: 12px; }
.mcount { margin-left: auto; font-size: .78rem; color: var(--muted); font-weight: 700; }
.mic { color: #fff; background: var(--sky); }
.m-matematika .mic { background: var(--sky); } .m-ipa .mic, .m-biologi .mic { background: var(--leaf); } .m-fisika .mic { background: var(--coral); } .m-kimia .mic { background: var(--teal); }
.m-lingkungan .mic { background: #3c9a4a; } .m-bahasa-inggris .mic { background: var(--grape); } .m-manajemen .mic { background: #8a5a2b; } .m-k3 .mic { background: #d98b00; }
.m-excel .mic { background: #1e7a46; } .m-pengetahuan-umum .mic { background: var(--pink); }
.m-pu .mic, .m-ppu .mic, .m-pbm .mic, .m-pk .mic, .m-lbi .mic, .m-lbe .mic, .m-pm .mic { background: var(--red); font-size: .72rem; }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); background: var(--surface); border-top: 5px solid var(--sky); }
.feat b { font-family: var(--display); font-size: 1.2rem; }
.feat span:last-child { font-size: .9rem; color: var(--ink-2); }
.feat-ic { font-size: 1.8rem; }
.feat.f-eval { border-color: var(--sky); } .feat.f-grup { border-color: var(--sun); } .feat.f-harian { border-color: var(--coral); } .feat.f-eq { border-color: var(--grape); }
.feat:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .feat:hover { transform: none; } }
.mcard { border-left-width: 0; border-top: 5px solid currentColor; box-shadow: var(--shadow); border-color: transparent; }
.mcard .mic { align-self: flex-start; }

/* Halaman mapel: pita judul + daftar paket */
.mhead { background: linear-gradient(135deg, var(--sky) 0%, #2a8fd6 100%); color: #fff; padding: 22px 0 26px; }
.mhead.j-sd { background: linear-gradient(135deg, #d98f12, #f2b134); } .mhead.j-smp { background: linear-gradient(135deg, #1f7fae, #3fa7d6); }
.mhead.j-utbk { background: linear-gradient(135deg, #a8301f, #d9533f); } .mhead.j-mahasiswa { background: linear-gradient(135deg, #5543a8, #7c68d6); }
.mhead.j-profesional { background: linear-gradient(135deg, #17704a, #23a06a); } .mhead.j-umum { background: linear-gradient(135deg, #0b3a47, #13606f); }
.mhead .crumbs, .mhead .crumbs a { color: rgba(255,255,255,.88); }
.mhead h1 { color: #fff; margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.mhead .lead { color: rgba(255,255,255,.92); margin: 4px 0 0; }
.mh-j { font-size: .55em; background: rgba(255,255,255,.22); padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
.mhead-row { display: flex; gap: 16px; align-items: center; }
.mic.xl { min-width: 64px; height: 64px; font-size: 1.8rem; border-radius: 16px; background: rgba(255,255,255,.2); color: #fff; }
.lat-wrap { max-width: 980px; }
.tingkat-tab { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 14px; }
.tingkat-tab b { font-size: 1.05rem; }
.tingkat-tab span { font-weight: 500; font-size: .8rem; color: var(--ink-2); line-height: 1.35; }
.tingkat-tab.t1 b { color: var(--leaf); } .tingkat-tab.t2 b { color: #9a6a00; } .tingkat-tab.t3 b { color: var(--red); }
@media (max-width: 600px) { .tingkat-tab span { display: none; } .tingkat-tab { text-align: center; align-items: center; } }
.lanjut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; background: var(--surface); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); margin: 6px 0 14px; }
.lanjut-label { margin: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lanjut-judul { margin: 2px 0; font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.lanjut-act { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lanjut .lat-info { margin: 0; }
.skill-h { margin-top: 26px; font-size: 1.3rem; }
.skill-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
@media (max-width: 720px) { .skill-list { grid-template-columns: 1fr; } }
.skill button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; color: var(--ink); min-height: 48px; }
.skill button:hover:not([disabled]) { border-color: var(--sky); background: var(--sky-soft); }
.skill .sn { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--paper); color: var(--sky); }
.skill .st { flex: 1; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.skill.next button { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.skill.next .sn { background: var(--sky); color: #fff; }
.skill.soon button { cursor: default; color: #93a7ab; background: #fbfcfc; }
.skill.soon .sn { color: #b3c3c6; }
.skill.done button { background: var(--leaf-soft); }
.sk { flex: none; display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 999px; font-weight: 800; font-size: .82rem; }
.sk.none { min-width: 0; padding: 0; color: var(--sky); }
.sk.gold { background: var(--sun); color: var(--ink); } .sk.hi { background: var(--leaf); color: #fff; } .sk.mid { background: var(--sun-soft); color: #8a5d00; border: 1px solid #f1d9a0; } .sk.lo { background: #fdecea; color: var(--red); }
.sk.soon-t { font-weight: 600; font-size: .75rem; color: #a3b5b8; }
.lat-stage:not(:empty) { margin: 6px 0 20px; }
.lat-head h2 { margin: 0 0 10px; }
.lat-head .eyebrow { margin: 0; }

/* Pemutar soal */
.quiz { box-shadow: var(--shadow); border: 0; }
.qb-left { display: flex; flex-direction: column; gap: 0; }
.qb-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.qb-score { color: var(--leaf); background: var(--leaf-soft); padding: 4px 10px; border-radius: 8px; }
.quiz-clock { font-variant-numeric: tabular-nums; color: var(--muted); }
.opt { border-radius: 12px; padding: 13px 15px; background: #fbfcfd; }
.opt .k { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sky-soft); }
.opt.sel .k { background: var(--sky); color: #fff; }
.opt.ok .k { background: var(--leaf); color: #fff; } .opt.no .k { background: var(--red); color: #fff; }
.score .medal { font-size: 2.4rem; line-height: 1; margin-bottom: 4px; }

/* Masuk & daftar */
.auth-wrap { display: grid; place-items: center; padding: clamp(28px, 6vw, 64px) 0; }
.auth-card { width: min(440px, 100%); background: var(--surface); border-radius: 18px; padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow); }
.auth-card.wide { width: min(620px, 100%); }
.auth-card h1 { font-size: 2rem; }
.auth-alt { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.help { display: block; font-weight: 500; font-size: .82rem; color: var(--muted); }
.form .check, .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .92rem; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.ortu { border: 1.5px dashed #f1d9a0; background: #fffaf0; border-radius: 12px; padding: 12px 14px; display: grid; gap: 12px; margin: 0; }
.ortu legend { font-weight: 800; padding: 0 6px; }
.alert p { margin: 0; }
.alert p + p { margin-top: 4px; }

/* Akun & evaluasi */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.subnav a { text-decoration: none; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: .92rem; }
.subnav a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.subnav form { margin-left: auto; }
.banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--sky-soft); border: 1px solid #bcd8f0; padding: 10px 14px; border-radius: 12px; margin-bottom: 10px; }
.banner > span, .banner > b { flex: 1; min-width: 200px; }
.banner.sun { background: var(--sun-soft); border-color: #f1d9a0; }
.banner select { max-width: 260px; }
.tiles { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tiles li { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tiles b { font-family: var(--display); font-size: 2rem; line-height: 1.1; color: var(--ink); }
.tiles small { font-size: .55em; }
.tiles span { font-size: .85rem; color: var(--ink-2); }
.eval-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
@media (max-width: 860px) { .eval-grid { grid-template-columns: 1fr; } }
.panel { box-shadow: var(--shadow); border: 0; }
.saran { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.saran li { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border-radius: 12px; padding: 10px 12px; }
.s-ic { font-size: 1.3rem; line-height: 1.3; }
.send { display: flex; flex-wrap: wrap; gap: 8px; }
.wbars { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding: 6px 0 0; border-bottom: 1px solid var(--line); }
.wbar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; position: relative; }
.wfill { width: 100%; max-width: 38px; border-radius: 4px 4px 0 0; background: var(--sky); }
.wfill.hi { background: var(--leaf); } .wfill.mid { background: var(--sun); } .wfill.lo { background: var(--coral); }
.wv { font-size: .78rem; font-weight: 800; color: var(--ink-2); }
.wl { position: absolute; bottom: -22px; font-size: .72rem; color: var(--muted); }
.wbars + .muted { margin-top: 28px; }
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.etable { width: 100%; border-collapse: collapse; min-width: 560px; }
.etable th, .etable td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.etable th { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lemah, .riwayat { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lemah li, .riwayat li { background: var(--surface); border-radius: 10px; padding: 9px 12px; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.riwayat li > span:nth-child(2) { flex: 1; }
.prof { display: grid; gap: 16px; }
.panel.danger { border: 1.5px solid #f3b7b0; }
.mt-s { margin-top: 12px; }

/* Grup & pertandingan */
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gcard { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); border-left: 5px solid var(--grape); }
.gcard.resmi { border-left-color: var(--sun); }
.gcard b { font-family: var(--display); font-size: 1.15rem; }
.g-ic { font-size: 1.5rem; }
.live { align-self: flex-start; font-size: .75rem; font-weight: 800; color: #fff; background: var(--red); padding: 2px 9px; border-radius: 999px; }
.gmeta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--ink-2); }
.kode { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--surface); border: 1.5px dashed var(--line); padding: 2px 8px; border-radius: 6px; letter-spacing: .08em; }
.pt-list { display: grid; gap: 14px; }
.pt { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); border-top: 5px solid var(--line); }
.pt.st-berjalan { border-top-color: var(--sun); } .pt.st-akan { border-top-color: var(--sky); }
.pt-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pt-head h3 { margin: 2px 0; font-size: 1.25rem; }
.pt-st { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.st-berjalan .pt-st { color: #9a6a00; }
.pt-set { margin: 8px 0 12px; padding-left: 18px; font-size: .92rem; }
.rank { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.rank li { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 10px; align-items: center; background: var(--paper); border-radius: 10px; padding: 8px 12px; }
.rank li.me { background: var(--sky-soft); outline: 2px solid var(--sky); }
.rk { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); font-weight: 800; }
.rk.r1 { background: #f2b134; } .rk.r2 { background: #cfd8dc; } .rk.r3 { background: #e0a46b; }
.rv { font-weight: 700; }
@media (max-width: 560px) { .rank li { grid-template-columns: 32px 1fr auto; } .rank li > .muted:last-child { grid-column: 2 / -1; } }
.seg-tabs { display: flex; gap: 4px; background: var(--surface); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.seg-tabs a { white-space: nowrap; text-decoration: none; font-weight: 700; font-size: .88rem; padding: 6px 12px; border-radius: 999px; color: var(--ink); }
.seg-tabs a[aria-current] { background: var(--ink); color: #fff; }
.row2, .row3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { grid-template-columns: 1.2fr 1fr 1fr; }
@media (max-width: 480px) { .row2, .row3 { grid-template-columns: 1fr; } }
.members { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.members li { display: flex; gap: 10px; align-items: center; background: var(--surface); padding: 8px 12px; border-radius: 10px; box-shadow: var(--shadow); }
.members li > span:nth-child(2) { flex: 1; }
.inv { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; }
.ok-t { color: var(--leaf); font-weight: 700; }
.skill-list.tanding { grid-template-columns: 1fr; }
[hidden] { display: none !important; }

/* ===== ecoedu.info W1: tiga ruang, jalur, keanggotaan ===== */
.brand img { height: 46px; width: auto; }
.btn.sun { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.btn.sun:hover { background: #026b52; border-color: #026b52; color: #fff; }
.btn.ghost.light { color: #fff; border-color: rgba(255,255,255,.7); }
.btn.ghost.light:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav a[aria-current="page"] { background: var(--sky); color: #fff; }
.foot-logo { height: 46px; width: auto; background: #fff; border-radius: 8px; padding: 4px 8px; margin-bottom: 10px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; color: #9fb8bd; }
.foot-admin { font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-leaf { color: var(--leaf); } .c-sun { color: var(--sun); } .c-red { color: var(--red); }
.req { font-size: .72rem; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }

/* beranda */
.eco-hero { background: linear-gradient(135deg, var(--deep) 0%, var(--sky-2) 100%); color: #fff; padding: clamp(40px, 7vw, 84px) 0; }
.eco-hero h1 { max-width: 20ch; }
.eco-hero .lead { color: #e3f0f9; }
.badge-glass { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: .88rem; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.ruang-blk { padding: clamp(28px, 4vw, 44px) 0 0; }
.ruang-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ruang-no { font-weight: 800; font-size: 1.25rem; color: var(--deep); margin: 0 0 10px; }
.ruang-head .ruang-no { margin: 0; }
.rumpun-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rumpun-card, .ruang-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: var(--radius); padding: 18px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); border-top: 5px solid var(--leaf); }
.rumpun-card:hover, .ruang-card:hover { transform: translateY(-2px); color: var(--ink); }
.rumpun-card b, .ruang-card b { font-size: 1.1rem; }
.rumpun-card .chips { margin: 4px 0 0; }
.ruang-ket { color: var(--muted); font-size: .92rem; margin-top: 12px; }
.ruang-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ruang-dua > div:first-child .ruang-card { border-top-color: var(--leaf); }
.ruang-dua > div:last-child .ruang-card { border-top-color: var(--sun); }
.ruang-card span { color: var(--ink-2); font-size: .95rem; }
.stats-strip { background: var(--sky-soft); margin-top: clamp(28px, 4vw, 44px); padding: 22px 0; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
.stats-row b { display: block; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--deep); line-height: 1.1; }
.stats-row span { color: var(--ink-2); font-size: .9rem; }
.feat.static:hover { transform: none; }
.feat .soon { align-self: flex-start; }
@media (max-width: 900px) { .rumpun-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rumpun-grid, .ruang-dua { grid-template-columns: 1fr; } .stats-row { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .rumpun-card:hover, .ruang-card:hover { transform: none; } }

/* kepala halaman ruang */
.ruang-top { background: linear-gradient(135deg, var(--deep) 0%, var(--sky-2) 100%); color: #fff; padding: clamp(26px, 4vw, 44px) 0 clamp(22px, 3vw, 34px); }
.ruang-top.r-profesional { background: linear-gradient(135deg, #025e48 0%, var(--leaf) 100%); }
.ruang-top.r-keluarga { background: linear-gradient(135deg, #a96d17 0%, var(--sun) 100%); }
.ruang-top.r-alumni, .ruang-top.r-webinar { background: linear-gradient(135deg, var(--ink) 0%, var(--deep) 100%); }
.ruang-top .lead, .ruang-top .mh-j { color: rgba(255,255,255,.9); }
.ruang-top .crumbs, .ruang-top .crumbs a { color: rgba(255,255,255,.85); }
.ruang-top .eyebrow { color: #fff; opacity: .85; }
.ruang-top .note { background: rgba(255,255,255,.14); color: #fff; }
.ruang-top .note a { color: #fff; }
.ruang-top .mic { background: rgba(255,255,255,.2); }
.jtabs-in { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.jtabs-in a { color: #fff; text-decoration: none; font-weight: 700; padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); }
.jtabs-in a.on, .jtabs-in a:hover { background: #fff; color: var(--ink); }

/* jalur */
.rumpun h2 .small { font-weight: 600; }
.jalur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.jalur-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); border-left: 5px solid var(--leaf); }
a.jalur-card:hover { transform: translateY(-2px); color: var(--ink); }
.jalur-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jalur-top b { font-size: 1.15rem; margin-right: auto; }
.jalur-nama { font-size: .93rem; color: var(--ink-2); line-height: 1.4; flex: 1; }
.jalur-foot { margin: 0; }
.tag.ok { color: var(--leaf); background: var(--leaf-soft); }
.tag.wait { color: #8a5a10; background: var(--sun-soft); }
.tag.lock { color: var(--muted); background: #eef1f3; }
.tag.new { color: #fff; background: var(--sun); }
.bar { display: block; height: 8px; background: #e7ecef; border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--leaf); border-radius: inherit; }
.bar.ulang > span { background: var(--sun); }
.bar.belum > span { background: #b6c2ca; }
.soon { display: inline-block; font-size: .72rem; font-weight: 800; color: #8a5a10; background: var(--sun-soft); border-radius: 99px; padding: 1px 8px; vertical-align: middle; white-space: nowrap; }
.jalur-menu { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.jalur-menu a, .jalur-menu .off { color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; padding: 7px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); }
.jalur-menu a.on, .jalur-menu a:hover { background: #fff; color: var(--leaf); }
.jalur-menu .off { opacity: .6; cursor: default; }

/* peta belajar */
.peta-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.peta-head h2 { margin: 0; }
.peta-head p { margin: 0; }
.peta { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.peta-row > a { display: grid; grid-template-columns: 40px 1fr auto 160px 110px; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; text-decoration: none; color: var(--ink); }
.peta-row > a:hover { border-color: var(--sky-2); }
.peta-row.kunci > a { background: #f4f6f7; color: var(--muted); }
.pn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sky-soft); color: var(--deep); font-weight: 800; }
.peta-row.kunci .pn { background: #e4e9ec; color: var(--muted); }
.pj { font-weight: 600; line-height: 1.35; }
.pv { font-size: .82rem; color: var(--muted); text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .peta-row > a { grid-template-columns: 34px 1fr auto; row-gap: 6px; }
  .peta-row .pb { grid-column: 2 / 3; }
  .peta-row .pv { grid-column: 3; text-align: right; }
}
/* peta 10 langkah keluarga/masyarakat */
.lk-row { display: grid; grid-template-columns: 40px 1fr minmax(0, 420px); gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; }
.lk-row.soon-row { background: #f8f9fa; }
.lk-t { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lk-b { display: grid; gap: 4px; text-align: left; font: inherit; background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--ink); }
.lk-b:hover:not([disabled]) { border-color: var(--sky-2); background: var(--sky-soft); }
.lk-b[disabled] { cursor: default; opacity: .55; }
.lk-b.t1 { border-top: 3px solid var(--leaf); } .lk-b.t2 { border-top: 3px solid var(--sun); } .lk-b.t3 { border-top: 3px solid var(--red); }
.lk-tn { font-weight: 800; font-size: .8rem; }
.lk-v { font-size: .75rem; color: var(--muted); }
.lk-b .bar { height: 6px; }
@media (max-width: 760px) { .lk-row { grid-template-columns: 34px 1fr; } .lk-t { grid-column: 1 / -1; } }

/* halaman langkah profesional */
.gate { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 28px); border-top: 5px solid var(--sun); }
.gate-opt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.gate-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 16px; background: var(--paper); }
.gate-card p { margin: 0; }
.gate-card form { margin: 0; }
@media (max-width: 820px) { .gate-opt { grid-template-columns: 1fr; } }
.lk-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.lk-tabs span { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; color: var(--muted); }
.lk-tabs span.on { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.lk-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.lk-side { display: grid; gap: 14px; align-content: start; }
.lk-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-height: 120px; }
.lk-box > b { display: block; margin-bottom: 8px; font-size: 1.05rem; }
.soon-box { background: var(--sun-soft); border: 1px dashed #e2b56b; border-radius: var(--radius-s); padding: 14px; color: #6b4a12; margin: 0; }
.lk-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 820px) { .lk-grid { grid-template-columns: 1fr; } }

/* keanggotaan dan alumni */
.kg-panel { border-left: 5px solid var(--leaf); }
.kg-act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.chip.kg { color: var(--leaf); border-color: var(--leaf); }
.kg-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.kg-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; }
.kat-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-radius: var(--radius); padding: 20px 22px; margin-bottom: 22px; color: #fff; background: linear-gradient(135deg, #8c5a2b, #c88a4a); }
.kat-card .eyebrow { color: #fff; opacity: .85; margin: 0; }
.kat-card p { margin: 0; }
.kat-card.k-gold { background: linear-gradient(135deg, #a77a00, #e2b33a); }
.kat-card.k-platinum { background: linear-gradient(135deg, #4c5a66, #93a3b0); }
.kat-nama { display: block; font-size: 1.8rem; line-height: 1.1; margin: 2px 0 4px; }
.kat-pot { text-align: center; background: rgba(255,255,255,.18); border-radius: var(--radius-s); padding: 10px 18px; }
.kat-pot b { display: block; font-size: 2rem; line-height: 1; }
.kat-pot span { font-size: .82rem; }

/* formulir */
.form-grid, .form-stack, .form-row { display: grid; gap: 14px; }
.form-grid { grid-template-columns: 1fr 1fr; align-items: end; }
.form-row { grid-template-columns: 2fr 1fr auto; align-items: end; }
.form-grid label, .form-stack label:not(.check), .form-row label { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.form-grid input, .form-grid select, .form-stack input, .form-stack select, .form-row input, .form-row select { font: inherit; font-weight: 400; color: var(--ink); width: 100%; padding: 10px 12px; border: 1.5px solid #c3ced5; border-radius: var(--radius-s); background: #fff; }
.form-grid input:focus, .form-grid select:focus, .form-stack input:focus, .form-stack select:focus, .form-row input:focus { outline: none; border-color: var(--sky-2); box-shadow: 0 0 0 3px var(--sky-soft); }
.form-stack .btn { justify-self: start; }
@media (max-width: 640px) { .form-grid, .form-row { grid-template-columns: 1fr; } }
.tanya { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 16px 16px; margin: 0; display: grid; gap: 8px; }
.tanya legend { font-weight: 800; padding: 0 6px; }
.tanya-isi { display: grid; gap: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.tanya-isi[hidden] { display: none; }
.cek-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 12px; }
.cek-h { grid-column: 1 / -1; font-weight: 800; font-size: .85rem; color: var(--deep); margin: 8px 0 0; }
.site-foot .foot-grid { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 700px) { .site-foot .foot-grid { grid-template-columns: 1fr 1fr; } .site-foot .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* ===== W2: isi langkah, laporan kemajuan ===== */
.lk-tabs button { font: inherit; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.lk-tabs button.on { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.lk-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(14px, 3vw, 24px); }
.lk-panel[hidden] { display: none; }
.lk-panel .lk-box { margin-bottom: 10px; min-height: 0; }
.pdf-wrap { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: #eef1f3; margin-bottom: 10px; }
.pdf-wrap iframe { display: block; width: 100%; height: min(78vh, 900px); border: 0; }
.visual-wrap { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: #fff; }
.visual-wrap iframe { display: block; width: 100%; height: min(70vh, 620px); border: 0; }
.materi-html { max-width: 75ch; }
.materi-html img { border-radius: 8px; margin: 10px 0; }
.materi-html table { border-collapse: collapse; margin: 10px 0; }
.materi-html th, .materi-html td { border: 1px solid var(--line); padding: 6px 10px; }
.materi-html .kunci, .materi-html .ide-kunci { background: var(--sky-soft); border-left: 4px solid var(--sky-2); padding: 10px 14px; border-radius: 6px; }
.materi-html .coba, .materi-html .coba-ini { background: var(--sun-soft); border-left: 4px solid var(--sun); padding: 10px 14px; border-radius: 6px; }
.materi-html .salah, .materi-html .kesalahan { background: #fdecea; border-left: 4px solid var(--red); padding: 10px 14px; border-radius: 6px; }
.audio-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--sky-soft); border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 12px; }
.audio-box audio { flex: 1 1 260px; min-width: 0; }
.speed { font-size: .85rem; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.speed select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid #c3ced5; }
.naskah { margin: 0 0 14px; }
.naskah summary { cursor: pointer; font-weight: 700; color: var(--sky); }
.mt-s { margin-top: 18px; }
.gate-mini { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--sun-soft); border-left: 4px solid var(--sun); }
.lk-m { font: inherit; font-size: .78rem; font-weight: 700; margin-top: 4px; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--sky-2); background: #fff; color: var(--sky); cursor: pointer; }
.lk-m:hover { background: var(--sky-soft); }
.materi-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(14px, 3vw, 22px); display: grid; gap: 10px; }
.lk-after { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px dashed var(--line); padding-top: 12px; }
.jalur-menu form.inline { display: inline; margin: 0; }
.jalur-menu button { font: inherit; color: #fff; font-weight: 700; font-size: .92rem; padding: 7px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); background: transparent; cursor: pointer; }
.jalur-menu button:hover:not([disabled]) { background: #fff; color: var(--leaf); }
.jalur-menu button[disabled] { opacity: .5; cursor: default; }
.stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.stat-cards > div { background: var(--sky-soft); border-radius: var(--radius-s); padding: 14px; text-align: center; }
.stat-cards b { display: block; font-size: 1.7rem; color: var(--deep); line-height: 1.1; }
.stat-cards span { font-size: .85rem; color: var(--ink-2); }
@media (max-width: 760px) { .stat-cards { grid-template-columns: 1fr 1fr; } }
.bar30 { position: relative; display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; align-items: end; height: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 10px 22px; }
.bar30 .g70 { position: absolute; left: 10px; right: 10px; bottom: calc(22px + (100% - 32px) * .7); border-top: 2px dashed var(--red); pointer-events: none; }
.b30 { position: relative; height: 100%; display: flex; align-items: flex-end; text-decoration: none; }
.b30 span { display: block; width: 100%; border-radius: 3px 3px 0 0; background: #b6c2ca; }
.b30.kuat span { background: var(--leaf); } .b30.ulang span { background: var(--sun); }
.b30 i { position: absolute; bottom: -19px; left: 0; right: 0; text-align: center; font-style: normal; font-size: .68rem; color: var(--muted); }
@media (max-width: 560px) { .b30 i { font-size: .55rem; } .bar30 { gap: 1px; padding-inline: 6px; } }
.saran-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.saran-grid h3 { margin-bottom: 8px; }
.saran-grid ol { padding-left: 20px; margin: 0 0 10px; }
.plain-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
@media (max-width: 760px) { .saran-grid { grid-template-columns: 1fr; } }
.lk-tabs button:focus-visible { outline: 3px solid var(--sun); }

/* ===== W3: alumni ===== */
.sebaran { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; max-width: 720px; }
.sebaran li { display: grid; grid-template-columns: 180px 1fr 60px; gap: 10px; align-items: center; font-size: .92rem; }
.sebaran b { text-align: right; }
@media (max-width: 560px) { .sebaran li { grid-template-columns: 1fr 50px; } .sebaran li .bar { grid-column: 1 / -1; grid-row: 2; } }
.kartu { max-width: 520px; border-radius: 18px; padding: 20px 22px; color: #fff; background: linear-gradient(135deg, #8c5a2b, #c88a4a); box-shadow: var(--shadow); }
.kartu.k-gold { background: linear-gradient(135deg, #a77a00, #e2b33a); } .kartu.k-platinum { background: linear-gradient(135deg, #4c5a66, #93a3b0); }
.kartu-atas { display: flex; justify-content: space-between; align-items: center; }
.kartu-atas img { background: #fff; border-radius: 8px; padding: 3px 6px; height: 40px; width: auto; }
.kartu-atas span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.kartu-isi { display: flex; justify-content: space-between; gap: 14px; margin-top: 16px; align-items: center; }
.kartu-isi p { margin: 0 0 4px; }
.kartu-nama { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.kartu-kat { font-weight: 700; }
.qr { width: 120px; height: 120px; flex: none; background: #fff; border-radius: 10px; padding: 4px; }
.qr svg { width: 100%; height: 100%; display: block; }
.kartu-bawah { margin: 14px 0 0; opacity: .9; }
@media print { .site-head, .site-foot, .no-print, .crumbs, .skip { display: none !important; } body { background: #fff; } .kartu { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; } }

/* ===== W4: webinar ===== */
.web-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.web-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-radius: var(--radius); padding: 18px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); border-top: 5px solid var(--sky-2); }
.web-card:hover { color: var(--ink); transform: translateY(-2px); }
.web-tgl { font-size: .88rem; color: var(--sky); font-weight: 700; }
.web-tgl b { font-size: 1.8rem; margin-right: 8px; color: var(--deep); }
.web-judul { font-weight: 800; font-size: 1.1rem; line-height: 1.3; }
.web-card .btn { align-self: flex-start; margin-top: auto; }
.web-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.web-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; }
.paspor { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cap { display: flex; flex-direction: column; gap: 3px; border: 2px dashed #b6c2ca; border-radius: 14px; padding: 12px; background: #fff; font-size: .88rem; }
.cap.hadir { border: 2px solid var(--leaf); background: var(--leaf-soft); }
.cap b { font-size: 1.3rem; color: var(--deep); }
.cap-act { display: flex; gap: 10px; font-weight: 700; }
.kode-v { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.yt-wrap { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hp { position: absolute; left: -9999px; }
.sertifikat { max-width: 900px; margin: 0 auto; aspect-ratio: 1.414; background: #fff; border: 10px double var(--deep); border-radius: 6px; padding: 4% 6%; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.sertifikat img { margin: 0 auto 8px; height: 56px; width: auto; }
.sertifikat p { margin: 0; }
.s-label { font-weight: 800; letter-spacing: .18em; color: var(--deep); font-size: 1.3rem; margin-bottom: 8px !important; }
.s-nama { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; color: var(--ink); border-bottom: 2px solid var(--sun); display: inline-block; margin: 6px auto !important; padding: 0 20px 4px; }
.s-acara { font-weight: 700; font-size: 1.15rem; color: var(--deep); margin: 6px 0 !important; }
.s-bawah { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 16px; text-align: left; }
.s-bawah .qr { width: 96px; height: 96px; border: 1px solid var(--line); }
@media (max-width: 600px) { .sertifikat { aspect-ratio: auto; padding: 22px 14px; } }
@media print { .sertifikat { border-width: 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { size: A4 landscape; margin: 10mm; } }
.kg-langganan { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px dashed var(--line); padding-top: 10px; margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--sky); cursor: pointer; text-decoration: underline; }
/* Pesan sistem (p.flash) jangan memakai gaya kartu hafalan .flash */
p.flash { height: auto; transform: none; cursor: default; transform-style: flat; }
.web-strip { background: var(--sun-soft); border-bottom: 1px solid #f1d9a0; }
.web-strip-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
.web-strip-row .btn { margin-left: auto; }