/* =============================================================
   Patch 2.10.0 — Program pelatihan daring (halaman publik, ruang belajar, mentor, pengelolaan)
   Palet tambahan: hijau tua #0E4D45, hijau muda #E3F1EE, kunyit #C8811E, krem #FBF7EF
   ============================================================= */
.tl { --tl-deep: #0e4d45; --tl-deep-2: #0a3a34; --tl-tint: #e3f1ee; --tl-amber: #c8811e; --tl-amber-tint: #fbf0dd;
      --tl-cream: #fbf7ef; --tl-ink: #16202b; --tl-line: #dfe5e3; }
.tl *, .tl-unggulan * { min-width: 0; }

/* ---------- Tipografi & utilitas ---------- */
.tl-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tl-amber, #c8811e); margin-bottom: 8px; }
.tl-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7a89; }
.tl-lead { font-size: 16.5px; line-height: 1.6; margin: 0 0 18px; max-width: 62ch; }
.tl-muted { color: #5b6b78; }
.tl-meta { display: inline-block; font-size: 12.5px; color: #6b7a89; }
.tl-meta a { color: inherit; }
.tl-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #e3f1ee; color: #0e4d45; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.tl-no.is-kecil { width: 24px; height: 24px; font-size: 12px; }
.tl-chip { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #eef1f3; color: #33465a; }
.tl-chip.is-ok { background: #e4f2ea; color: #1b7a4b; }
.tl-chip.is-jalan { background: #fbf0dd; color: #8a5510; }
.tl-btn { padding: 9px 18px; font-size: 14px; border-radius: 6px; }
.tl-btn-ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.tl-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ---------- Jejak halaman ---------- */
.tl-jejak { font-size: 12.5px; color: #6b7a89; margin: 0 0 12px; }
.tl-jejak a { color: #33465a; }

/* ---------- Hero ---------- */
.tl-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: stretch;
  background: #0e4d45; color: #fff; border-radius: 10px; padding: 38px 36px; margin: 0 0 26px; overflow: hidden; isolation: isolate; }
.tl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(200,129,30,.30), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 18px),
    linear-gradient(160deg, #11594f 0%, #0a3a34 100%); }
.tl-hero h1 { font-family: var(--serif); font-size: 38px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -.01em; }
.tl-hero .tl-lead { color: #d8ebe6; }
.tl-hero .tl-eyebrow { color: #f2c07a; }
.tl-hero.is-kursus h1, .tl-hero.is-program h1 { font-size: 32px; }
.tl-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tl-cta form { margin: 0; }
.tl-hero .btn-primary { background: #f2c07a; border-color: #f2c07a; color: #2b1d05; font-weight: 600; }
.tl-hero .btn-primary:hover { background: #ffd395; }
.tl-hero-panel { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.tl-angka { display: flex; flex-direction: column; padding: 10px 12px; border-left: 3px solid #f2c07a; }
.tl-angka b { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tl-angka span { font-size: 12.5px; color: #cfe3de; }
.tl-ringkas { margin: 0; }
.tl-ringkas div { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.tl-ringkas div.is-lebar { grid-column: 1 / -1; border-bottom: 0; }
.tl-ringkas dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #a9d0c7; }
.tl-ringkas dd { margin: 2px 0 0; font-weight: 600; }
.tl-aksi { grid-template-columns: 1fr; align-content: start; color: #fff; }
.tl-aksi p { margin: 0; color: #d8ebe6; }
.tl-aksi .btn { justify-self: start; }
.tl-catatan-kecil { font-size: 12.5px; }
.tl-aksi .tl-catatan-kecil a { color: #f2c07a; }
.tl-fakta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; align-self: flex-start; align-items: flex-start; }
.tl-fakta li { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: #e3f1ee; color: #0e4d45; font-weight: 600; }
.tl-fakta.is-terang li { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- Penyelenggara & mitra ---------- */
.tl-mitra { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 4px 0 0; }
.tl-mitra-item { display: flex; align-items: center; gap: 10px; }
.tl-mitra-item b { display: block; font-size: 14px; line-height: 1.3; }
.tl-mitra-k { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.tl-mitra-x { display: none; }
.tl-mono { flex-shrink: 0; display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 8px;
  font-weight: 800; font-size: 12.5px; letter-spacing: .04em; }
.tl-mono.is-org { background: #fff; color: #0e4d45; }
.tl-mono.is-mitra { background: #f2c07a; color: #2b1d05; }
.tl-logo { flex-shrink: 0; height: 44px; width: auto; max-width: 120px; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px; }
.tl-mitra.is-kecil { flex-direction: column; align-items: flex-start; }
.tl-mitra.is-kecil .tl-mitra-x { display: none; }
.tl-kartu .tl-mono.is-org, .tl-unggulan .tl-mono.is-org { background: #0e4d45; color: #fff; }

/* ---------- Bagian halaman ---------- */
.tl-sec { background: #fff; border: 1px solid var(--tl-line, #dfe5e3); border-radius: 10px; padding: 24px 26px; margin: 0 0 20px; }
.tl-sec h2 { font-family: var(--serif); font-size: 22px; margin: 0 0 12px; }
.tl-sec h2 a { color: inherit; }
.tl-sec-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.tl-sec-head > div { flex: 1 1 380px; }
.tl-sec-head p { margin: 4px 0 0; }
.tl-sec-foot { margin-top: 16px; }
.tl-prosa { font-size: 14.5px; line-height: 1.7; max-width: 72ch; }

.tl-jalur { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.tl-jalur-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid #e8ecef; border-radius: 8px; background: #fbf7ef; }
.tl-jalur-isi { flex: 1; }
.tl-jalur-isi h3 { margin: 4px 0 4px; font-size: 16px; }
.tl-jalur-isi h3 a { color: #0e4d45; }
.tl-jalur-isi p { margin: 0 0 6px; color: #33465a; }
.tl-jalur-btn { align-self: center; }

.tl-langkah { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; counter-reset: tl; }
.tl-langkah li { counter-increment: tl; padding: 14px 14px 14px 14px; border-top: 3px solid #c8811e; background: #fbf7ef; border-radius: 0 0 8px 8px; }
.tl-langkah li::before { content: counter(tl, decimal-leading-zero); display: block; font-family: var(--serif); font-size: 22px; color: #c8811e; }
.tl-langkah b { display: block; margin: 4px 0; }
.tl-langkah span { font-size: 13px; color: #5b6b78; }

.tl-disclaimer { font-size: 12.5px; line-height: 1.6; color: #5b4a2c; background: #fbf0dd; border: 1px solid #f0d9b0; border-radius: 8px;
  padding: 12px 16px; margin: 0 0 26px; }

.tl-dua { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.tl-dua.is-app { grid-template-columns: minmax(0, 1fr) 320px; }
.tl-samping { display: grid; gap: 14px; position: sticky; top: 16px; }
.tl-kartu { background: #fff; border: 1px solid var(--tl-line, #dfe5e3); border-radius: 10px; padding: 18px; }
.tl-kartu h3 { font-size: 14px; margin: 0 0 10px; }

.tl-centang { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-centang li { position: relative; padding-left: 26px; line-height: 1.5; }
.tl-centang li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #e3f1ee;
  box-shadow: inset 0 0 0 5px #e3f1ee, inset 0 0 0 16px #0e4d45; transform: scale(.85); }
.tl-centang.is-kecil li { font-size: 13px; }
.tl-tautan { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }

.tl-kurikulum { display: grid; gap: 10px; }
.tl-kur { border: 1px solid #e3e8ea; border-radius: 8px; background: #fff; }
.tl-kur > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; }
.tl-kur > summary::-webkit-details-marker { display: none; }
.tl-kur > summary::after { content: "+"; margin-left: auto; font-size: 20px; color: #6b7a89; }
.tl-kur[open] > summary::after { content: "–"; }
.tl-kur-judul { display: flex; flex-direction: column; flex: 1; }
.tl-kur-judul b { font-size: 15px; }
.tl-kur-isi { padding: 0 16px 16px 60px; }
.tl-kur-isi > p { margin-top: 0; color: #33465a; }
.tl-modul-mini { margin: 0 0 12px; }
.tl-modul-mini b { font-size: 13px; color: #0e4d45; }
.tl-modul-mini ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.tl-modul-mini li { display: flex; align-items: center; gap: 8px; }
.tl-modul-mini .tl-meta { margin-left: auto; }

.tl-faq details { border-bottom: 1px solid #e8ecef; padding: 10px 0; }
.tl-faq summary { cursor: pointer; font-weight: 600; }
.tl-faq p { margin: 8px 0 0; color: #33465a; line-height: 1.6; }

.tl-modul { margin: 0 0 18px; }
.tl-modul-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.tl-modul-head b { display: block; font-size: 15px; }
.tl-materi-list { list-style: none; margin: 0 0 0 46px; padding: 0; border-left: 2px solid #e3f1ee; }
.tl-materi-list li { display: flex; gap: 8px; align-items: center; padding: 7px 0 7px 14px; flex-wrap: wrap; }
.tl-materi-judul { flex: 1 1 200px; }

/* Ikon jenis materi (CSS murni) */
.tl-ikon { display: inline-block; width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; position: relative; margin-right: 6px; vertical-align: -3px; }
.tl-ikon-bacaan { background: #e3f1ee; box-shadow: inset 0 -5px 0 -3px #0e4d45, inset 0 -9px 0 -7px #0e4d45; }
.tl-ikon-video { background: #fbf0dd; }
.tl-ikon-video::after { content: ""; position: absolute; left: 6px; top: 4px; border-left: 6px solid #c8811e; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.tl-ikon-kuis { background: #e8eff8; }
.tl-ikon-kuis::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #1b4f91; }
.tl-ikon-tugas { background: #f4e9f5; }
.tl-ikon-tugas::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #7a3c86; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Pendaftaran ---------- */
.tl-daftar { max-width: 860px; margin: 0 auto; }
.tl-daftar-intro { margin: 6px 0 18px; }
.tl-daftar-intro h1 { font-family: var(--serif); font-size: 32px; margin: 0 0 8px; }
.tl-form fieldset { margin-bottom: 16px; }
.tl-setuju { align-items: flex-start; margin: 4px 0 14px; line-height: 1.5; }
.tl-setuju input { margin-top: 3px; }

/* ---------- Beranda situs: program unggulan ---------- */
.tl-unggulan { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; background: #fbf7ef;
  border: 1px solid #efe4cf; border-left: 5px solid #0e4d45; border-radius: 8px; padding: 22px 24px; }
.tl-unggulan h2 { font-family: var(--serif); font-size: 24px; margin: 0 0 6px; }
.tl-unggulan h2 a { color: #0e4d45; }
.tl-unggulan p { margin: 0 0 12px; color: #33465a; }
.tl-unggulan .hero-act { margin-top: 14px; }
.tl-unggulan-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: center; }
.tl-unggulan-daftar a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #fff; border: 1px solid #ece4d3; border-radius: 8px; color: inherit; text-decoration: none; }
.tl-unggulan-daftar a:hover { border-color: #0e4d45; }
.tl-unggulan-daftar span:last-child { display: flex; flex-direction: column; }
.tl-unggulan-daftar small { color: #6b7a89; }

/* ---------- Ruang belajar ---------- */
.tl-progres { height: 8px; border-radius: 999px; background: #e7ecee; overflow: hidden; }
.tl-progres span { display: block; height: 100%; background: linear-gradient(90deg, #0e4d45, #1f8a77); border-radius: inherit; }
.tl-hero .tl-progres { background: rgba(255,255,255,.18); }
.tl-hero .tl-progres span { background: #f2c07a; }
.tl-progres.is-besar { height: 12px; }
.tl-grid-belajar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tl-kartu-belajar { background: #fff; border: 1px solid #dfe5e3; border-top: 4px solid #0e4d45; border-radius: 8px; padding: 16px; display: grid; gap: 8px; }
.tl-kartu-belajar.is-selesai { border-top-color: #c8811e; }
.tl-kartu-belajar h2 { font-size: 17px; margin: 0; }
.tl-kartu-belajar h2 a { color: #16202b; }
.tl-kartu-belajar p { margin: 0; }
.tl-pilih { display: grid; gap: 10px; }
.tl-pilih-item { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eef1f3; }
.tl-pilih-item:last-child { border-bottom: 0; }
.tl-pilih-item b { display: block; }
.tl-pilih-item p { margin: 4px 0 0; }

.tl-kepala-kursus { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: #fff; border: 1px solid #dfe5e3; border-radius: 8px; padding: 16px 18px; margin-bottom: 18px; }
.tl-kepala-progres { flex: 1 1 320px; }
.tl-kepala-progres p { margin: 8px 0 0; font-size: 13px; color: #5b6b78; }
.tl-kepala-aksi { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.tl-outline-mod { margin-bottom: 14px; }
.tl-outline-judul { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0e4d45; margin: 0 0 6px; }
.tl-outline ul { list-style: none; margin: 0; padding: 0; }
.tl-outline li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; }
.tl-outline li .tl-meta { grid-column: 2; font-size: 11.5px; }
.tl-outline li.is-aktif { background: #e3f1ee; }
.tl-outline li.is-aktif a { font-weight: 700; color: #0e4d45; }
.tl-kunci-teks { color: #8a97a3; }
.tl-status { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid #c7d0d6; background: #fff; }
.is-selesai > .tl-status { border-color: #1b7a4b; background: #1b7a4b; box-shadow: inset 0 0 0 2px #fff; }
.is-buka > .tl-status { border-color: #0e4d45; }
.is-tunggu > .tl-status { border-color: #c8811e; background: #fbf0dd; }
.is-revisi > .tl-status { border-color: #b02a2a; background: #f9e6e6; }
.is-kunci > .tl-status { border-style: dashed; }

.tl-materi-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.tl-materi { background: #fff; border: 1px solid #dfe5e3; border-radius: 10px; padding: 26px 30px; }
.tl-materi-head { border-bottom: 1px solid #eef1f3; padding-bottom: 14px; margin-bottom: 18px; }
.tl-materi-head h1 { font-family: var(--serif); font-size: 27px; line-height: 1.25; margin: 6px 0 8px; }
.tl-materi-samping { position: sticky; top: 16px; background: #fff; border: 1px solid #dfe5e3; border-radius: 10px; padding: 16px;
  max-height: calc(100vh - 32px); overflow: auto; }
.tl-materi-samping > .tl-meta { margin: 6px 0 12px; }
.tl-verif { font-size: 13px; background: #fbf0dd; border-left: 4px solid #c8811e; padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; color: #5b4a2c; }

.tl-isi { font-size: 15.5px; line-height: 1.75; color: #1f2d3a; max-width: 72ch; }
.tl-isi h3 { font-family: var(--serif); font-size: 20px; margin: 26px 0 8px; color: #0e4d45; }
.tl-isi h4 { font-size: 16px; margin: 20px 0 6px; }
.tl-isi p { margin: 0 0 14px; }
.tl-isi ul, .tl-isi ol { margin: 0 0 16px; padding-left: 22px; }
.tl-isi li { margin: 4px 0; }
.tl-isi.is-kecil { font-size: 13.5px; line-height: 1.6; }
.tl-isi.is-kecil h3 { font-size: 16px; margin-top: 14px; }
.tl-catatan { background: #e3f1ee; border-left: 4px solid #0e4d45; padding: 12px 16px; border-radius: 4px; margin: 0 0 16px; font-size: 14.5px; }
.tl-tabel { overflow-x: auto; margin: 0 0 18px; }
.tl-tabel table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; }
.tl-tabel th, .tl-tabel td { border: 1px solid #dfe5e3; padding: 8px 10px; text-align: left; vertical-align: top; }
.tl-tabel th { background: #f3f7f6; font-weight: 700; }
.tl-tabel td:empty::after { content: "\00a0"; }
.tl-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 18px; background: #000; border-radius: 8px; overflow: hidden; }
.tl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tl-selesai-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 6px; padding-top: 16px; border-top: 1px dashed #dfe5e3; }
.tl-selesai-bar form { margin: 0; }
.tl-pager { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* Kuis */
.tl-kuis { margin-top: 8px; }
.tl-soal { border: 1px solid #e3e8ea; border-radius: 8px; padding: 14px 16px 10px; margin: 0 0 12px; }
.tl-soal legend { font-size: 14.5px; font-weight: 600; color: #16202b; padding: 0 6px; display: flex; gap: 8px; align-items: baseline; }
.tl-soal.is-benar { border-color: #9fd1b5; background: #f4fbf7; }
.tl-soal.is-salah { border-color: #eec5c5; background: #fdf6f6; }
.tl-opsi { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; color: #1f2d3a; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.tl-opsi:hover { background: #f3f7f6; }
.tl-opsi input { margin-top: 4px; width: auto; flex-shrink: 0; }
.tl-umpan { margin: 6px 0 2px; font-size: 13px; }
.tl-hasil { display: grid; gap: 2px; padding: 12px 16px; border-radius: 8px; margin: 0 0 14px; }
.tl-hasil.is-lulus { background: #e4f2ea; color: #14603a; }
.tl-hasil.is-gagal { background: #f9e6e6; color: #8f2222; }

/* Tugas */
.tl-rubrik table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tl-rubrik th, .tl-rubrik td { border-bottom: 1px solid #eef1f3; padding: 7px 8px; text-align: left; }
.tl-rubrik .num { text-align: right; }
.tl-rubrik h3, .tl-kiriman h3, .tl-form-tugas h3 { font-size: 16px; margin: 22px 0 10px; }
.tl-kiriman-item { border: 1px solid #e3e8ea; border-left-width: 4px; border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; }
.tl-kiriman-item.is-menunggu { border-left-color: #c8811e; }
.tl-kiriman-item.is-perlu_revisi { border-left-color: #b02a2a; }
.tl-kiriman-item.is-diterima { border-left-color: #1b7a4b; }
.tl-kiriman-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.tl-kiriman-teks { font-size: 14px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.tl-umpan-mentor { background: #f3f7f6; border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
.tl-umpan-mentor p { margin: 4px 0 0; }
.tl-keputusan { display: grid; gap: 8px; margin-top: 12px; }

/* Diskusi */
.tl-post-item { padding: 0 0 10px; }
.tl-post-item.is-balasan { margin-left: 22px; padding-left: 14px; border-left: 2px solid #e3f1ee; }
.tl-post-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-post-isi { margin: 4px 0; line-height: 1.6; overflow-wrap: anywhere; }
.tl-lapor { margin: 0; }
.tl-lapor .btn-link { font-size: 12px; color: #8a97a3; padding: 0; }
.tl-balas { display: flex; gap: 8px; margin-top: 6px; }
.tl-balas input { flex: 1; }

/* ---------- Pengelolaan ---------- */
.tl-subnav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid #d9dee4; }
.tl-subnav a { padding: 7px 12px; font-size: 13px; color: #33465a; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tl-subnav a:hover { color: #0e4d45; border-bottom-color: #0e4d45; text-decoration: none; }
.tl-kelola-modul { border: 1px solid #e3e8ea; border-radius: 8px; padding: 12px; margin-bottom: 14px; }
.tl-kelola-modul-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.tl-kelola-modul-head input[type=text] { flex: 1 1 200px; width: auto; }
.tl-kelola-modul-head.is-baru { border-top: 1px dashed #d9dee4; padding-top: 12px; }
.tl-urut { width: 70px !important; flex: 0 0 70px; }
.tl-kelola-soal { border: 1px solid #e3e8ea; border-radius: 8px; padding: 12px; margin-top: 12px; }
.tl-kelola-soal.is-baru { border-style: dashed; background: #fbfcfd; }
.tl-kelola-soal .form-grid { margin: 8px 0; }
.tl-kelola-rubrik { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tl-kelola-rubrik input[type=text] { flex: 1 1 180px; width: auto; }
.tl-hapus-kecil { margin: 2px 0 0; text-align: right; }
.tl-hapus-kecil .btn-link { font-size: 12px; color: #b02a2a; }
.tl-mono-area { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; }

/* ---------- Bukti penyelesaian (cetak) ---------- */
.tl-bukti { position: relative; background: #fffdf8; overflow: hidden; }
.tl-bukti-pita { position: absolute; inset: 0 auto 0 0; width: 16mm; background:
  repeating-linear-gradient(180deg, #0e4d45 0 18mm, #11594f 18mm 36mm); }
.tl-bukti-pita::after { content: ""; position: absolute; right: -3mm; top: 0; bottom: 0; width: 3mm; background: #c8811e; }
.tl-bukti-isi { position: relative; padding: 16mm 20mm 12mm 34mm; height: 100%; display: flex; flex-direction: column; }
.tl-bukti-mitra { display: flex; gap: 14mm; align-items: flex-start; }
.tl-bukti-mitra > div { display: flex; flex-direction: column; gap: 1mm; max-width: 95mm; }
.tl-bukti-mitra img { height: 14mm; width: auto; object-fit: contain; align-self: flex-start; margin-bottom: 1mm; }
.tl-bukti-mitra span { font-size: 9pt; letter-spacing: .08em; text-transform: uppercase; color: #6b7a89; }
.tl-bukti-mitra b { font-size: 11pt; color: #0e4d45; }
.tl-bukti-jenis { font-family: var(--serif); font-size: 30pt; color: #0e4d45; margin-top: 12mm; line-height: 1.1; }
.tl-bukti-no { font-size: 10pt; color: #6b7a89; margin-top: 2mm; }
.tl-bukti-kecil { font-size: 11pt; color: #33465a; margin-top: 6mm; }
.tl-bukti-nama { font-family: var(--serif); font-size: 26pt; font-weight: 700; color: #16202b; margin-top: 2mm; border-bottom: 1px solid #c8811e; padding-bottom: 2mm; max-width: 200mm; }
.tl-bukti-kursus { font-size: 18pt; font-weight: 700; color: #0e4d45; margin-top: 3mm; }
.tl-bukti-kaki { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10mm; }
.tl-bukti-tgl { text-align: right; font-size: 10.5pt; color: #33465a; }
.tl-bukti-catatan { font-size: 8.5pt; color: #6b7a89; margin: 5mm 0 0; max-width: 220mm; }

/* ---------- Responsif ---------- */
@media (max-width: 960px) {
  .tl-hero { grid-template-columns: 1fr; padding: 28px 22px; }
  .tl-dua, .tl-dua.is-app, .tl-materi-wrap { grid-template-columns: 1fr; }
  .tl-samping, .tl-materi-samping { position: static; max-height: none; }
  .tl-unggulan { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tl-hero h1 { font-size: 28px; }
  .tl-hero.is-kursus h1, .tl-hero.is-program h1 { font-size: 25px; }
  .tl-lead { font-size: 15px; }
  .tl-hero-panel { grid-template-columns: 1fr 1fr; padding: 12px; }
  .tl-angka b { font-size: 21px; }
  .tl-sec { padding: 18px 16px; }
  .tl-jalur-item { flex-wrap: wrap; }
  .tl-jalur-isi { flex: 1 1 calc(100% - 48px); }
  .tl-jalur-btn { margin-left: 48px; }
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar .crumb { flex: 1 1 100%; min-width: 0; }
  .tl-kur-isi { padding-left: 16px; }
  .tl-materi { padding: 18px 16px; }
  .tl-materi-head h1 { font-size: 22px; }
  .tl-isi { font-size: 15px; }
  .tl-materi-list { margin-left: 16px; }
  .tl-pilih-item { flex-direction: column; align-items: flex-start; }
  .tl-mitra { flex-direction: column; align-items: flex-start; }
  .tl-mitra-x { display: none; }
  .tl-unggulan { padding: 18px 16px; }
}
@media print {
  .tl-bukti { box-shadow: none; }
}

/* ---------- Patch 2.10.1: banner program ---------- */
.tl-banner { display: block; max-width: 100%; margin: 0 0 18px; border-radius: 10px; overflow: hidden; background: #e8eef0;
  box-shadow: 0 1px 2px rgba(16,40,50,.06), 0 8px 24px rgba(16,40,50,.08); transition: box-shadow .2s ease; }
/* Patch 2.10.2: gambar mengikuti lebar bingkai dengan rasio aslinya — tidak diperbesar, tidak dipotong, tidak melewati bingkai. */
.tl-banner img { display: block; width: 100%; max-width: 100%; height: auto; }
.tl-banner:hover { box-shadow: 0 1px 2px rgba(16,40,50,.08), 0 10px 28px rgba(16,40,50,.14); }
.tl-banner:focus-visible { outline: 3px solid #c8811e; outline-offset: 3px; }
.tl-banner.is-kecil { margin: 0 0 14px; border-radius: 8px; box-shadow: none; border: 1px solid #ece4d3; }
/* Bila banner sudah memuat judul dan kalimat pembuka, hero di bawahnya menjadi ringkas. */
.tl-hero.is-ringkas { padding-top: 26px; padding-bottom: 26px; }
.tl-hero.is-ringkas h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.tl-hero.is-ringkas .tl-lead, .tl-hero.is-ringkas .tl-eyebrow { display: none; }
.tl-hero.is-ringkas .tl-mitra { margin-top: 0; }
.tl-unggulan.is-banner { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; }
.tl-unggulan.is-banner .hero-act { margin-top: 0; }
.tl-cover-prev { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tl-cover-prev img { width: 240px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 1px solid #d9dee4; }
@media (max-width: 960px) { .tl-unggulan.is-banner { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .tl-banner { border-radius: 8px; margin-bottom: 12px; } }

/* ---------- Patch 2.10.1: manajemen patch, terbaru di atas ---------- */
.pt-unggah .field { max-width: 640px; }
.pt-unggah-baris { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-unggah-baris input { flex: 1 1 260px; width: auto; min-width: 0; }
.pt-pre { background: #f5f7f9; border: 1px solid var(--line); border-radius: 4px; padding: 10px; font-size: 12px; overflow: auto; max-width: 100%; margin: 6px 0 0; }
.pt-nama { white-space: nowrap; }
.pt-tabel tr.pt-terbaru td { background: #f3f8fd; }
.pt-tabel tr.pt-terbaru td:first-child { box-shadow: inset 3px 0 0 #1b4f91; }
.pt-tabel tr.pt-belum td:first-child code { font-weight: 700; }
.pt-desk { margin-top: 4px; }
.pt-desk summary { cursor: pointer; font-size: 12px; color: #1b4f91; }
.pt-desk .hint { margin-top: 4px; line-height: 1.5; }
.pt-lama { border-top: 1px solid #e8ecef; }
.pt-lama > summary { cursor: pointer; padding: 10px 16px; font-size: 13px; color: #1b4f91; font-weight: 600; }
.pt-lama[open] > summary { border-bottom: 1px solid #e8ecef; }

/* ---------- Patch 2.10.2: gambar tidak melewati bingkai ---------- */
.tl img, .tl-unggulan img, .tl-kartu img, .tl-mitra img { max-width: 100%; height: auto; }
.tl-mitra .tl-logo { height: 44px; width: auto; }
.tl-unggulan > *, .tl-hero > *, .tl-dua > *, .tl-materi-wrap > * { min-width: 0; }
.tl-isi img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: 0 0 14px; }