/* ============================================================ course.css — gaya bersama untuk Kelas Belajar (HTML/CSS/JS) ============================================================ */ html { scroll-behavior: smooth; } body { scroll-padding-top: 80px; } .navbar-brand { font-weight: 700; } /* ---- Tema warna per materi (di-set lewat class pada ) ---- */ .track-html { --brand: #e34c26; --brand2: #f16529; } .track-css { --brand: #2563eb; --brand2: #06b6d4; } .track-js { --brand: #d97706; --brand2: #f59e0b; } .track-fn { --brand: #7c3aed; --brand2: #a855f7; } .track-dom { --brand: #0ea5e9; --brand2: #22d3ee; } .track-api { --brand: #059669; --brand2: #10b981; } .track-home { --brand: #4f46e5; --brand2: #7c3aed; } /* ---- Progress bar tipis di atas ---- */ .course-progress { height: 4px; background: #e5e7eb; } .course-progress-bar { height: 100%; background: var(--brand); transition: width 0.3s ease; } /* ---- Hero kecil tiap pelajaran ---- */ .hero { background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); color: #fff; padding: 2.5rem 0; } .lesson-crumb { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; margin-bottom: 0.35rem; } /* ---- Konten ---- */ .lesson-content h2 { font-weight: 700; margin-top: 1.75rem; margin-bottom: 0.75rem; font-size: 1.35rem; } .lesson-content h2:first-child { margin-top: 0; } /* ---- Blok kode ---- */ pre { background: #1e293b; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.9rem; line-height: 1.55; } pre code { color: inherit; } pre code.hljs { background: transparent; padding: 0; color: #e2e8f0; } code:not(pre code) { background: #f1f5f9; color: #334155; padding: 0.1rem 0.35rem; border-radius: 0.3rem; font-size: 0.875em; } /* ---- Kotak hasil render ---- */ .preview { border: 1px dashed #cbd5e1; border-radius: 0.5rem; padding: 1rem 1.25rem; background: #fff; } .preview-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; font-weight: 600; margin-bottom: 0.4rem; } /* ---- Demo interaktif ---- */ .demo-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem 1.25rem; } .demo-output { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #0f172a; color: #fbbf24; border-radius: 0.4rem; padding: 0.6rem 0.9rem; min-height: 2.4rem; white-space: pre-wrap; word-break: break-word; } /* ---- Helper untuk contoh CSS ---- */ .demo-box-model { background: #f1f5f9; border: 4px solid var(--brand); padding: 20px; margin: 10px; color: #0f172a; font-weight: 600; width: 260px; } .demo-flex { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .demo-flex>div { background: var(--brand); color: #fff; padding: 14px 18px; border-radius: 6px; font-weight: 600; } .demo-hover { display: inline-block; padding: 10px 18px; background: var(--brand); color: #fff; border-radius: 6px; transition: filter 0.25s, transform 0.25s; cursor: pointer; } .demo-hover:hover { filter: brightness(0.85); transform: translateY(-3px); } /* ---- Nomor langkah ---- */ .badge-step { width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 600; font-size: 0.9rem; } .btn-brand { background: var(--brand); color: #fff; } .btn-brand:hover { filter: brightness(0.92); color: #fff; } /* ---- Navigasi Prev / Next ---- */ .lesson-nav-btn { flex: 1 1 0; max-width: 48%; display: flex; flex-direction: column; text-decoration: none; border: 1px solid #e2e8f0; border-radius: 0.6rem; padding: 0.7rem 1rem; color: #0f172a; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; } .lesson-nav-btn:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); color: #0f172a; } .lesson-nav-btn .dir { font-size: 0.75rem; color: #94a3b8; font-weight: 600; } .lesson-nav-btn .ttl { font-weight: 600; color: var(--brand); } .lesson-nav-btn.next { text-align: right; align-items: flex-end; } /* ---- Kartu silabus ---- */ .track-card .track-head { color: #fff; border-radius: 0.6rem 0.6rem 0 0; padding: 1rem 1.25rem; } .track-card .list-group-item { border-left: none; border-right: none; } .track-card .list-group-item .num { display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 0.8rem; font-weight: 600; margin-right: 0.5rem; }