/* Landing per Lab (/sql/ dst). Dimuat SESUDAH css/home.css: memakai .wrap, .hbtn, .hero, .hero-grid, .lead, .cta, .demo,
   .dpanel, .code, .res, .closing dari beranda. Token dari css/style.css; tanpa nilai px untuk font-size atau radius. */
.lp-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-block:10px;font-size:var(--t-sm);color:var(--muted)}
.lp-crumb a{color:var(--accent-ink);text-decoration:none}
.lp-crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.lp-crumb [aria-current]{color:var(--ink);font-weight:600}

.lp-hero{padding-block:44px 48px}
.lp-hero h1{font-size:clamp(var(--t-4xl),4vw,var(--t-6xl))}
.lp-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;font-weight:700;font-size:var(--t-md);color:var(--on-hero)}
.lp-eyebrow img{border-radius:var(--r-sm)}
.lp-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0}
.lp-facts li{font-size:var(--t-sm);font-weight:600;color:var(--on-hero);border:1px solid var(--hero-line);border-radius:var(--r-pill);padding:5px 12px}

.lp-preview{align-self:center}
.lp-pv-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 14px 0}
.lp-pv-head b{font-family:var(--f-display);font-size:var(--t-lg);color:var(--ink)}
.lp-pv-head span{font-size:var(--t-sm);color:var(--muted)}
.lp-pv{min-height:0}
.lp-obipr{margin:0 0 8px;font-size:var(--t-sm);color:var(--muted)}
.lp-obk{display:block;font-size:var(--t-xs);font-weight:600;color:var(--accent-ink)}

.lp-sec{padding-block:60px}
.lp-alt{background:var(--surface);border-block:1px solid var(--line)}
.lp-sec h2{font-size:clamp(var(--t-3xl),3vw,var(--t-4xl));font-weight:800;letter-spacing:-.02em;line-height:1.12}
.lp-lead{margin:10px 0 0;font-size:var(--t-lg);color:var(--muted);max-width:52ch}
.lp-muted{color:var(--muted)}

.lp-groups{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;margin-top:28px}
@media (max-width:1100px){.lp-groups{grid-auto-columns:minmax(230px,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding-inline:max(20px,env(safe-area-inset-left,0px));scroll-padding-inline:max(20px,env(safe-area-inset-left,0px))}.lp-grp{scroll-snap-align:start}}
@media (min-width:640px) and (max-width:1100px){.lp-groups{grid-auto-columns:minmax(230px,36%)}}
.lp-grp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 18px 14px;display:flex;flex-direction:column;gap:6px}
.lp-grp-k{margin:0;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-ink);font:800 var(--t-base)/1 var(--f-display)}
.lp-grp h3{font-size:var(--t-xl);font-weight:700;margin-top:4px}
.lp-grp-m{margin:0;font-size:var(--t-sm);font-weight:600;color:var(--muted)}
.lp-grp p{margin:0}
.lp-grp details{margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.lp-grp summary{cursor:pointer;font-weight:600;font-size:var(--t-sm);color:var(--accent-ink);padding:4px 0}
.lp-grp ol{margin:6px 0 4px;padding-left:26px;display:flex;flex-direction:column;gap:4px;font-size:var(--t-sm)}
.lp-grp ol a{color:var(--ink);text-decoration:none}
.lp-grp ol a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

.lp-card-k{font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.lp-card b{font-family:var(--f-display);font-size:var(--t-lg);line-height:1.25}
.lp-card span:not(.lp-card-k){font-size:var(--t-sm);color:var(--muted)}
.lp-tag{margin-top:auto;align-self:flex-start;font-style:normal;font-size:var(--t-xs);font-weight:700;color:var(--warm-ink);background:var(--warm-soft);border-radius:var(--r-pill);padding:3px 10px}

.lp-end-r{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.lp-other{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--on-hero-2)}
.lp-other span{flex-basis:100%}
.lp-other a{display:inline-flex;align-items:center;gap:7px;color:var(--on-hero);font-weight:600;text-decoration:none;border:1px solid var(--hero-line);border-radius:var(--r-pill);padding:5px 13px 5px 6px}
.lp-other a:hover{background:var(--hero-2);border-color:var(--tint)}
.lp-other img{border-radius:var(--r-sm)}
.closing{margin-top:0}

@media (max-width:640px){
  .lp-sec{padding-block:44px}
  .lp-hero{padding-block:28px 32px}
}
@media (prefers-reduced-motion:reduce){.lp-stop{transition:none}a.lp-stop:hover{transform:none}}

/* tab mode Lab di top bar (gaya .modes dari style.css); beranda mengunci top bar tidak membungkus, landing boleh */
@media (max-width:1320px){.hp .top:not(.top-home){flex-wrap:wrap}.hp .top:not(.top-home) .modes{order:3;flex:1 0 100%}}

/* progres kecil di hero (hanya user yang sudah punya progres di Lab ini) */
.lp-pg{margin-top:22px;max-width:460px;background:var(--hero-2);border:1px solid var(--hero-line);border-radius:var(--r-card);padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.lp-pg-h{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-weight:700;color:var(--on-hero)}
.lp-pg-h span{font-weight:600;font-size:var(--t-sm);color:var(--on-hero-2)}
.lp-pg-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:var(--t-sm);color:var(--on-hero-2)}
.lp-pg-row b{color:var(--on-hero);font-weight:600}
.lp-pg-bar{height:8px;border-radius:var(--r-pill);background:var(--hero-line);overflow:hidden}
.lp-pg-bar span{display:block;height:100%;background:var(--tint);border-radius:inherit}
.lp-pg-all{align-self:flex-start;font-size:var(--t-sm);font-weight:600;color:var(--tint);text-decoration:none}
.lp-pg-all:hover{text-decoration:underline;text-underline-offset:3px}

/* ilustrasi grup materi (SVG dari config Lab; warna lewat kelas supaya ikut tema) */
.lp-art{margin:-18px -18px 8px;height:104px;display:grid;place-items:center;background:var(--sunk);border-bottom:1px solid var(--line);border-radius:var(--r-card) var(--r-card) 0 0;overflow:hidden}
.lp-art svg{width:100%;height:100%;max-width:240px}
.lp-art .f-card{fill:var(--surface)}.lp-art .f-acc{fill:var(--accent)}.lp-art .f-soft{fill:var(--accent-soft)}.lp-art .f-line{fill:var(--line)}
.lp-art .f-warm{fill:var(--warm)}.lp-art .f-wsoft{fill:var(--warm-soft)}.lp-art .f-bad{fill:var(--bad-soft)}.lp-art .f-good{fill:var(--good)}
.lp-art .s-line{stroke:var(--line)}.lp-art .s-acc{stroke:var(--accent)}.lp-art .s-mut{stroke:var(--muted)}.lp-art .s-bad{stroke:var(--bad)}
.lp-art [class*="s-"]{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.lp-stop{width:100%;max-width:400px;box-sizing:border-box;display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.lp-alt .lp-stop{background:var(--bg)}
.lp-stop h3{font-size:var(--t-lg);font-weight:700}
.lp-stop p{margin:0;color:var(--muted)}
a.lp-stop:hover{border-color:var(--accent);transform:translateY(-2px)}
.lp-goal .lp-stop{border-style:dashed;background:transparent}
.lp-goal .lp-stop b{font-family:var(--f-display);font-size:var(--t-lg)}
.lp-goal .lp-stop span{font-size:var(--t-sm);color:var(--muted)}
@media (max-width:760px){
  .lp-stop{max-width:none}
}

/* "Cara belajarnya": jalan raya berkelok dengan pin peta (beda gaya dari jalur jejak "Mulai dari sini") */
.lp-road{position:relative;margin-top:30px}
.lp-road-svg{position:absolute;left:0;top:0;width:100%;height:120px;overflow:visible}
.lp-road-base{fill:none;stroke:var(--line);stroke-width:26;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lp-road-mid{fill:none;stroke:var(--surface);stroke-width:3;stroke-dasharray:10 12;vector-effect:non-scaling-stroke}
.lp-alt .lp-road-mid{stroke:var(--bg)}
.lp-road-stops{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:20px}
.lp-road-stops li{position:relative;padding-top:128px;text-align:center}
.lp-pin{position:absolute;top:8px;left:50%;width:40px;height:40px;margin-left:-20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);box-shadow:0 6px 14px var(--sh-2,rgba(0,0,0,.15));display:grid;place-items:center}
.lp-pin b{transform:rotate(45deg);color:var(--surface);font:800 var(--t-md)/1 var(--f-display)}
.lp-road-stops li:last-child .lp-pin{background:var(--warm-ink)}
.lp-road-stops h3{font-size:var(--t-lg);font-weight:700}
.lp-road-stops p{margin:6px auto 0;color:var(--muted);max-width:30ch}
@media (max-width:760px){
  .lp-road-svg{display:none}
  .lp-road-stops{grid-template-columns:minmax(0,1fr);gap:0}
  .lp-road-stops::before{content:"";position:absolute;left:14px;top:10px;bottom:30px;width:22px;background:var(--line);border-radius:var(--r-pill)}
  .lp-road-stops li{padding:4px 0 24px 64px;text-align:left}
  .lp-pin{top:6px;left:5px;margin-left:0}
  .lp-road-stops p{margin-left:0}
}

/* "Mulai dari sini": jalur kereta (metro). Rel lurus mendatar, stasiun cincin, kartu menggantung di bawah.
   Sengaja beda dari "Cara belajarnya" (jalan berkelok + pin). Satu baris; di layar sempit geser samping. */
.lp-metro{list-style:none;margin:30px 0 0;padding:44px 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px}
.lp-metro>li{position:relative;display:flex;flex-direction:column;align-items:stretch;padding-top:34px}
.lp-metro>li::before{content:"";position:absolute;top:10px;left:50%;width:calc(100% + 14px);height:6px;background:var(--accent)}
.lp-metro>li:last-child::before{display:none}
.lp-metro>li:nth-last-child(2)::before{background:repeating-linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 20px)}
.lp-metro .lp-node{position:absolute;top:0;left:50%;margin-left:-13px;z-index:1;width:26px;height:26px;box-sizing:border-box;border-radius:50%;background:var(--surface);border:5px solid var(--accent);display:grid;place-items:center;font-size:0;color:var(--accent-ink)}
.lp-metro li:not(.lp-goal) .lp-node svg{display:none}
.lp-metro>li::after{content:"";position:absolute;top:26px;left:50%;height:8px;border-left:2px solid var(--line)}
.lp-metro .lp-stop{max-width:none;height:100%;padding:14px}
.lp-metro .lp-card b{font-size:var(--t-md)}
.lp-metro .lp-goal .lp-node{width:34px;height:34px;margin-left:-17px;top:-4px;border:0;background:var(--ink);color:var(--bg)}
.lp-metro .lp-goal .lp-node svg{width:16px;height:16px}
.lp-metro .lp-here-b{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--t-xs);color:var(--surface);background:var(--warm-ink);border-radius:var(--r-pill);padding:5px 11px}
.lp-metro .lp-here-b::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--warm-ink)}
@media (max-width:1100px){
  .lp-metro{grid-auto-columns:minmax(190px,44%);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding-inline:max(20px,env(safe-area-inset-left,0px));scroll-padding-inline:max(20px,env(safe-area-inset-left,0px))}
  .lp-metro>li{scroll-snap-align:start}
}
@media (max-width:640px){.lp-metro{grid-auto-columns:minmax(190px,64%)}}