/* Anova Canvas — Kelas Online elements */
.acv-course-list .hn-empty,.hn-empty{color:var(--acv-muted)}
.acv-ccats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.acv-ccat{--tone:var(--acv-primary);display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:14px;background:var(--acv-surface);border:1px solid var(--acv-border);border-radius:16px;color:var(--acv-text);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.acv-ccat:hover{transform:translateY(-3px);box-shadow:var(--acv-shadow-lg);border-color:color-mix(in srgb,var(--tone) 40%,transparent);color:var(--acv-text)}
.acv-ccat__img{grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--tone) 14%,var(--acv-surface));color:var(--tone)}
.acv-ccat__img .acv-icon,.acv-ccat__img i{font-size:24px;line-height:1}
.acv-ccat__img img{width:100%;height:100%;object-fit:cover}
.acv-ccat__img b{font-size:22px;font-weight:800}
.acv-ccat__name{font-weight:700;color:var(--acv-heading);line-height:1.25;align-self:end}
.acv-ccat__count{font-size:13px;color:var(--acv-muted);align-self:start}
.acv-ccats--card .acv-ccat{grid-template-columns:1fr;grid-template-rows:auto;text-align:center;justify-items:center;padding:22px 14px;gap:6px}
.acv-ccats--card .acv-ccat__img{grid-row:auto;width:72px;height:72px;border-radius:20px;margin-bottom:6px}
.acv-tone--teal{--tone:#0d9488}.acv-tone--amber{--tone:#d97706}.acv-tone--indigo{--tone:#4f46e5}.acv-tone--rose{--tone:#e11d48}
.acv-tone--sky{--tone:#0284c7}.acv-tone--lime{--tone:#65a30d}.acv-tone--violet{--tone:#7c3aed}.acv-tone--orange{--tone:#ea580c}
.acv-ctabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--acv-border)}
.acv-ctabs::-webkit-scrollbar{display:none}
.acv-ctab{flex-shrink:0;padding:12px 16px;border:0;background:none;color:var(--acv-muted);font:inherit;font-weight:700;font-size:15px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.acv-ctab:hover{color:var(--acv-heading)}
.acv-ctab.is-active{color:var(--acv-heading);border-bottom-color:var(--acv-ctab,var(--acv-primary))}
.acv-ctabs__panel{margin-top:18px}
.acv-ctabs__panel.is-boxed{padding:22px;border:1px solid var(--acv-border);border-radius:22px;background:var(--acv-surface)}
.acv-ctabs__body{transition:opacity .2s}
.acv-ctabs__body.is-loading{opacity:.4;pointer-events:none}
.acv-instrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.acv-instr{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px 22px;border-radius:22px;background:var(--acv-surface-2);color:var(--acv-text);text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}
.acv-instr:hover{background:var(--acv-surface);box-shadow:var(--acv-shadow-lg);transform:translateY(-3px);color:var(--acv-text)}
.acv-instr img{width:88px;height:88px;border-radius:50%;object-fit:cover;margin-bottom:14px;box-shadow:0 0 0 4px var(--acv-surface)}
.acv-instr strong{font-size:16px;color:var(--acv-heading)}
.acv-instr small{color:var(--acv-muted);font-size:13px;margin-top:2px}
.acv-instr__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.acv-instr__meta em{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;background:var(--acv-surface);font-style:normal;font-size:12px;font-weight:600}
.acv-instr__meta .bi-star-fill{color:#f5a524}
.acv-stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--acv-surface);border:1px solid var(--acv-border);border-radius:22px;box-shadow:var(--acv-shadow)}
.acv-stat{display:flex;align-items:center;gap:14px;padding:22px 26px}
.acv-stat+.acv-stat{border-left:1px solid var(--acv-border)}
.acv-stat__ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--acv-soft);color:var(--acv-primary);font-size:20px;flex:none}
.acv-stat strong{display:block;font-size:22px;font-weight:800;color:var(--acv-heading);line-height:1.1}
.acv-stat div>span{font-size:13px;color:var(--acv-muted)}
.acv-catmenu__btn{display:inline-flex;align-items:center;gap:8px;padding:.6em 1em;border-radius:12px;border:1px solid var(--acv-border);background:var(--acv-surface);color:var(--acv-text);font:inherit;font-weight:700;cursor:pointer}
.acv-catmenu__btn:hover{border-color:var(--acv-primary);color:var(--acv-primary)}
.acv-catmenu__panel{left:0;right:auto;min-width:280px;padding:8px}
.acv-catmenu__item{position:relative}
.acv-catmenu__item>a{display:flex!important;align-items:center;gap:10px}
.acv-catmenu__item>a b{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--acv-soft);color:var(--acv-primary);font-size:13px}
.acv-catmenu__item>a span{flex:1}
.acv-catmenu__sub{position:absolute;left:100%;top:0;min-width:220px;padding:8px;background:var(--acv-surface);border:1px solid var(--acv-border);border-radius:14px;box-shadow:var(--acv-shadow-lg);display:none}
.acv-catmenu__item:hover>.acv-catmenu__sub{display:block}
.acv-catmenu__all{border-top:1px solid var(--acv-border);margin-top:6px;font-weight:700!important;color:var(--acv-primary)!important}
@media(max-width:1024px){.acv-ccats,.acv-instrs{grid-template-columns:repeat(2,minmax(0,1fr))}.acv-stats{grid-template-columns:repeat(2,1fr)}.acv-stat:nth-child(3){border-left:0}.acv-stat:nth-child(n+3){border-top:1px solid var(--acv-border)}}
@media(max-width:600px){.acv-ccat{grid-template-columns:1fr;text-align:left}.acv-ccat__img{grid-row:auto;width:44px;height:44px;margin-bottom:8px}.acv-ctabs__panel.is-boxed{padding:14px}.acv-stats{grid-template-columns:1fr}.acv-stat+.acv-stat{border-left:0;border-top:1px solid var(--acv-border)}.acv-catmenu__sub{position:static;box-shadow:none;border:0;padding-left:30px}}