:root{--bg:#f6f7f8;--card:#fff;--tx:#18191c;--mut:#61666d;--ac:#00a1d6;--acbg:#e3f6fd;--bd:#e3e5e7}
@media(prefers-color-scheme:dark){:root{--bg:#17181a;--card:#232427;--tx:#f1f2f3;--mut:#9499a0;--acbg:#0b3a4b;--bd:#35363a}}
*{box-sizing:border-box}html{font-size:16px}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg) center/cover fixed;color:var(--tx)}
body.hasbg .main,body.hasbg .side{background:rgba(255,255,255,.85)}
@media(prefers-color-scheme:dark){body.hasbg .main,body.hasbg .side{background:rgba(23,24,26,.85)}}
a{color:inherit;text-decoration:none}
.top{position:sticky;top:0;z-index:5;height:3.6rem;display:flex;align-items:center;gap:1rem;padding:0 1.2rem;background:var(--card);border-bottom:1px solid var(--bd)}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--ac);font-size:1.3rem}.brand img{height:2.2rem}
.logo-dot{background:var(--ac);color:#fff;border-radius:.5rem;padding:.1rem .5rem}
.search{flex:1;max-width:36rem;margin:0 auto}.search input{width:100%;padding:.6rem 1rem;border:1px solid var(--bd);border-radius:.5rem;background:var(--bg);color:var(--tx);font-size:1rem}
.right{margin-left:auto;display:flex;gap:.5rem;align-items:center}.who{color:var(--mut)}
.btn{display:inline-block;border:0;border-radius:.4rem;padding:.55rem 1.1rem;background:var(--ac);color:#fff;font-size:.95rem;cursor:pointer}
.btn.dark{background:#000}.btn.ghost{background:var(--bd);color:var(--tx)}.btn.big{width:100%;margin-top:1rem;padding:.8rem}
.wrap{display:flex;min-height:calc(100vh - 3.6rem)}
.side{width:12.5rem;flex:none;padding:.8rem;background:var(--card);border-right:1px solid var(--bd);position:sticky;top:3.6rem;align-self:flex-start;height:calc(100vh - 3.6rem);overflow:auto}
.side a{display:block;padding:.7rem .9rem;border-radius:.4rem;margin-bottom:.15rem}.side a.on{background:var(--acbg);font-weight:600}
.sep{padding:.8rem .9rem .3rem;color:var(--mut);font-size:.8rem}
.main{flex:1;padding:1.5rem 2rem;min-width:0}
h1{font-size:1.5rem;margin:.2rem 0 1rem}.sec{font-size:1.15rem;margin:1.4rem 0 .8rem}.sec small,.muted{color:var(--mut);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.8rem}
.chip{padding:.5rem 1.2rem;border-radius:2rem;background:var(--card);border:1px solid var(--bd)}.chips.small .chip{padding:.3rem .9rem;font-size:.9rem}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem}
.card{display:block;border-radius:.6rem;outline:0}
.thumb{position:relative;aspect-ratio:16/9;border-radius:.6rem;overflow:hidden;background:#333;transition:transform .15s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.4rem;font-weight:700;padding:1rem;text-align:center}
.ph-canva{background:linear-gradient(135deg,#00c4cc,#7d2ae8)}.ph-wayground{background:linear-gradient(135deg,#f9a03f,#e63946)}.ph-youtube{background:#222}
.thumb em{position:absolute;right:.4rem;bottom:.4rem;background:rgba(0,0,0,.65);color:#fff;font-style:normal;font-size:.75rem;padding:.1rem .45rem;border-radius:.3rem}
.card:hover .thumb,.card:focus .thumb{transform:scale(1.04)}
.card:focus .thumb{outline:.25rem solid var(--ac)}
.ct{display:flex;gap:.6rem;margin-top:.6rem}.av{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-weight:700}
.ct h3{margin:0;font-size:.95rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ct small{color:var(--mut);line-height:1.4}
.watch{max-width:70rem;margin:0 auto;padding:1.2rem}.back{color:var(--ac);display:inline-block;margin-bottom:.8rem}
.player{aspect-ratio:16/9;background:#000;border-radius:.6rem;overflow:hidden}.player iframe{width:100%;height:100%;border:0}
.tugas{background:var(--card);border:1px solid var(--bd);border-left:.3rem solid var(--ac);border-radius:.5rem;padding:.5rem 1.2rem;margin-top:1rem}
.loginbox{max-width:24rem;margin:4rem auto;background:var(--card);padding:2rem;border-radius:.8rem;border:1px solid var(--bd)}
.form{display:grid;gap:.4rem;max-width:40rem;margin-bottom:1.5rem;background:var(--card);padding:1.2rem;border-radius:.6rem;border:1px solid var(--bd)}
.form label,.loginbox label{font-size:.85rem;color:var(--mut);margin-top:.5rem;display:block}.form label.inl{display:inline-flex;gap:.4rem;align-items:center}
input,select,textarea{width:100%;padding:.6rem .8rem;border:1px solid var(--bd);border-radius:.4rem;background:var(--bg);color:var(--tx);font:inherit}
input[type=checkbox]{width:auto}.prev{max-height:5rem;display:block;margin:.3rem 0;border-radius:.3rem}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:.6rem;overflow:hidden}th,td{padding:.6rem .8rem;border-bottom:1px solid var(--bd);text-align:left}th{background:var(--acbg)}
.act{white-space:nowrap}.act form{display:inline}.act a,.lnk{color:var(--ac);background:none;border:0;cursor:pointer;font:inherit;margin-right:.6rem}.lnk{color:#e63946}
.err{background:#fde8ea;color:#b4232f;padding:.6rem 1rem;border-radius:.4rem}.ok{background:#e4f7ea;color:#1b7a3b;padding:.6rem 1rem;border-radius:.4rem}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1rem}.stats div{background:var(--card);border:1px solid var(--bd);border-radius:.6rem;padding:1.2rem;color:var(--mut)}.stats b{display:block;font-size:2rem;color:var(--ac)}
/* Smart TV: perbesar tampilan */
@media(min-width:1800px){html{font-size:20px}.grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:800px){.side{display:none}.main{padding:1rem}.search{display:none}}

.tugas-img{max-width:100%;max-height:70vh;border-radius:.5rem;border:1px solid var(--bd);display:block;margin:.6rem 0}