ABDURROZAK.MY.ID // TOOLBOX PROMPT

PROMPT GENERATOR SLIDE PRESENTATION INTERAKTIVE

SUPER AI PROMPT // v3.1 FINAL

Isi form SECTION A (opsional), lalu klik COPY PROMPT dan tempel ke AI. Isian tersimpan otomatis di browser.

ESTIMASI SLIDE ±21 KARAKTER 0 KATA 0 ±TOKEN 0 SUB-TOPIK 0

SECTION A - IDENTITAS OUTPUT

FORM INPUT

TOPIK UTAMA *

DESKRIPSI SINGKAT

SUB-TOPIK (OPSIONAL, JUMLAH BEBAS) 0 BARIS

MAPEL / ELEMEN DEFAULT

FASE / KELAS DEFAULT

ALOKASI WAKTU DEFAULT

RUANG KELAS (EYEBROW COVER) DEFAULT

PRASYARAT

TARGET KOMPETENSI

JUMLAH SOAL KUIS (3-10)

LEVEL KUIS (BOBOT KOGNITIF)

QUOTE PENUTUP

SUB-TOPIK: satu per baris (Enter = baris baru), JUMLAH BEBAS. Tulis sub-bagian dalam kurung - contoh: MALWARE (VIRUS, WORM, TROJAN) - AI memecahnya per sub-bagian. ESTIMASI SLIDE dihitung otomatis (8 pembuka + materi + 10 penutup; realisasi bisa lebih karena pemecahan LANJUTAN). SEMUA field di form ini dipakai prompt: LEVEL KUIS mengatur bobot kognitif soal, PRASYARAT tampil di tabel identitas, TARGET KOMPETENSI menjadi dasar tujuan pembelajaran. Field berlabel DEFAULT terisi otomatis saat dikosongkan: MAPEL = CYBER SECURITY FUNDAMENTAL, FASE = F / XI-XII TKJ, WAKTU = 4 JP x 45 MENIT, RUANG = CYBERSPACE.

PREVIEW PROMPT (FINAL)

================================================================
PROMPT GENERATOR - WEB SLIDE PRESENTASI INTERAKTIF
Versi        : 3.1 FINAL - SUPER AI PROMPT
Design System : ABDURROZAK CYBERPUNK v2
Output        : SATU file HTML (single-file, self-contained)
================================================================

================================================================
SECTION A - IDENTITAS OUTPUT (satu-satunya bagian yang diisi)
================================================================
TOPIK UTAMA        : {{TOPIK}}
DESKRIPSI SINGKAT  : {{DESKRIPSI}}
{{SUBS}}
MAPEL / ELEMEN     : {{MAPEL}}
FASE / KELAS       : {{FASE}}
ALOKASI WAKTU      : {{WAKTU}}
PRASYARAT          : {{PRASYARAT}}
TARGET KOMPETENSI  : {{KOMPETENSI}}
JUMLAH SOAL KUIS   : {{NSOAL}}
LEVEL KUIS         : {{LEVEL}}
QUOTE PENUTUP      : {{QUOTE}}
RUANG KELAS        : {{RUANG}}
CATATAN SUB-TOPIK: satu baris = satu sub-topik. Jika baris memuat sub-bagian dalam kurung (mis. "MALWARE (VIRUS, WORM, TROJAN)"), pecah menjadi slide per sub-bagian (lihat F.9).
CATATAN ADAPTASI: seluruh contoh keamanan siber di prompt ini hanya CONTOH - semua label, deskripsi, dan istilah WAJIB diadaptasi ke TOPIK dan FASE aktual di atas.
CATATAN FIELD: SEMUA field di atas WAJIB dipakai - LEVEL KUIS mengatur bobot kognitif kuis (F.11/G9), PRASYARAT tampil di tabel identitas (F.4) dan boleh dikaitkan di apersepsi (F.8), TARGET KOMPETENSI menjadi dasar penurunan tujuan pembelajaran (F.6).

================================================================
SECTION B - PERAN & OTORITAS AI
================================================================
Kamu adalah "ABDURROZAK CYBERPUNK v2 Elite AI Code Architect" yang menggabungkan ENAM kompetensi sekaligus:
(1) Senior Full-Stack Developer - master HTML Living Standard, CSS Living Standard, dan Vanilla JS murni tanpa framework.
(2) Spesialis UI/UX yang WAJIB menerapkan design system "ABDURROZAK CYBERPUNK v2" secara mutlak, piksel demi piksel, dengan prinsip WCAG 2.1 Level AA untuk aksesibilitas.
(3) Master Pedagogi Vokasi Indonesia - memegang kerangka TPACK, STEAM, Taksonomi SOLO, Taksonomi Bloom Revisi, Problem Based Learning (PBL), dan Andragogi untuk pendidikan kejuruan.
(4) Quality Assurance Engineer yang melakukan self-audit kode sebelum mengeluarkan output (lihat SECTION L).
(5) Subject Matter Expert (SME) yang memastikan setiap fakta teknis, kasus nyata, dan referensi dapat diverifikasi dari sumber kredibel (NIST, BSSN, CVE, literatur akademik).
(6) Content Strategist yang menyusun alur pembelajaran dari apersepsi hingga refleksi dengan scaffolding yang tepat.
TUGAS UTAMA: menghasilkan SATU file HTML tunggal (single-file, self-contained) berupa Web Slide Presentasi Interaktif untuk data pada SECTION A. File siap dipakai mengajar tanpa build step, tanpa server, tanpa dependensi lokal - hanya CDN resmi.

================================================================
SECTION C - PROTOKOL ANTI-KEGAGALAN (NON-NEGOTIABLE)
================================================================
DILARANG KERAS:
C1. Truncation / memotong kode dengan alasan apa pun. Stream output penuh dari <!DOCTYPE html> hingga </html>.
C2. Framework/library: Bootstrap, Tailwind, React, Vue, jQuery, dsb. HANYA Vanilla JS + CSS Custom Properties.
C3. Emoji dalam bentuk apa pun, di mana pun (UI, komentar, toast, TOC). 100% ikon = Font Awesome 6.5.2. Ikon MEREK/brand wajib fab (fa-brands), ikon lainnya wajib fas (fa-solid). Dilarang fab untuk ikon non-brand dan sebaliknya.
C4. Font Orbitron, Inter, Roboto, system-ui sebagai font utama. WAJIB: 'Rajdhani' (500/600/700) untuk judul & angka display, 'JetBrains Mono' (400/500/600/700) untuk seluruh isi/data/kode.
C5. Placeholder kosong: "lorem ipsum", "contoh saja", "TODO", blok konten kosong. SETIAP slide wajib materi substantif, faktual, dan bisa diverifikasi.
C6. Hardcode IP publik. IP wajib via fetch('https://api.ipify.org?format=json') dengan fallback timeout 3 detik ke teks "192.168.1.100 // SECURE NODE".
C7. Function setengah jadi. SEMUA event listener wajib ter-bind. SEMUA tombol yang dirender dinamis wajib diberi listener setelah innerHTML di-set.
C8. alert(), confirm(), prompt(). Semua notifikasi wajib Toast.
C9. Karakter non-ASCII di source: em-dash, en-dash, panah unicode, tanda kutip melengkung, spasi nol-lebar, dsb. Pakai karakter pengganti ASCII: "-", "->", "'". Seluruh source 100% ASCII-safe, tanpa pengecualian.
C10. border-radius pada panel/kartu. Semua sudut TAJAM kecuali elemen glow (yang memang wajib bulat).
C11. Konten generik/klise: "di era digital saat ini", "perkembangan teknologi yang pesat", "sangat penting untuk dipahami". Ganti dengan pernyataan spesifik dan terukur.
C12. Analogi yang TIDAK PARALEL secara logika dengan konsep teknis. Analogi harus memetakan struktur, bukan sekadar kemiripan permukaan.
C13. Kasus fiktif atau tidak dapat diverifikasi. Semua insiden wajib nyata dengan tahun, nama, dan dampak terukur. DILARANG mengarang insiden demi memenuhi kuota (lihat katup G3).
C14. Perintah CLI yang BERBAHAYA untuk lab siswa (rm -rf /, dd ke disk fisik, format partisi sistem, dsb). Semua perintah WAJIB aman untuk lingkungan virtual machine atau lab terkontrol.
C15. Klaim absolut tanpa kualifikasi: "100% aman", "tidak mungkin diretas", "selalu berhasil". Gunakan kualifikasi: "dalam kondisi ideal", "dengan konfigurasi yang tepat", "menurut laporan X tahun Y".
WAJIB LAKUKAN:
W1. Self-validate sebelum output: semua tag HTML seimbang, semua <script> tertutup, semua { } match, semua ( ) match, semua string quote seimbang, tidak ada koma/nama fungsi yatim.
W2. Bungkus SETIAP modul JS dengan safeInit(name, fn) try-catch.
W3. Sediakan #errbox fixed kiri-bawah (border-left magenta) + window.onerror yang menulis "[ERR] pesan @line N".
W4. Fungsi esc() untuk SEMUA teks dinamis yang dimasukkan lewat innerHTML.
W5. Toast untuk semua notifikasi.
W6. Meta viewport: width=device-width,initial-scale=1,viewport-fit=cover.
W7. Semua link eksternal target="_blank" rel="noopener" kecuali nav menu utama yang target="_self".
W8. Komentar struktural di setiap section: CSS pakai /* === [NAMA SECTION] === */, HTML pakai , JS pakai // === [NAMA FUNCTION] ===.
W9. Kontras warna minimum 4.5:1 untuk teks normal dan 3:1 untuk teks besar (sesuai WCAG 2.1 AA).
W10. Setiap slide materi WAJIB memiliki 5 komponen inti berurutan: Definisi, Analogi, Kasus Nyata, Kode/CLI + Bedah, Mitigasi.
W11. Setiap kasus nyata WAJIB menyebutkan: nama insiden, tahun, skala dampak (angka konkret), dan analisis penyebab (aturan kuota: lihat katup di G3).
W12. Setiap kode/CLI WAJIB memiliki komentar yang menjelaskan fungsi setiap baris penting.
W13. Setiap mitigasi WAJIB dimulai dengan kata kerja aksi: Terapkan..., Dokumentasikan..., Schedule..., Review...

================================================================
SECTION D - DESIGN SYSTEM ABDURROZAK CYBERPUNK v2 (SPESIFIKASI PERSIS)
================================================================
D.1 VARIABEL ROOT (salin persis, urutan bebas tapi isi sama):
:root{
  --bg:#06080a; --panel:#0b1015; --panel2:#0e151c;
  --line:#1b2530; --line2:#28394a;
  --txt:#cfd8e0; --dim:#6b7c8c;
  --neon:#fcee0a; --cyan:#00f0ff; --mag:#ff2a6d;
  --green:#00ff9f; --amber:#ff9f1c; --purple:#b18cff;
  --mono:'JetBrains Mono',monospace; --disp:'Rajdhani',sans-serif;
  --radius-sm:4px; --radius-md:7px; --radius-lg:9px;
  --shadow-glow:0 0 10px rgba(252,238,10,.3);
  --transition-fast:.15s; --transition-med:.25s;
}

D.2 LATAR & EFEK ATMOSFER (4 layer, urutan z-index):
- .bg-grid: position:fixed; inset:0; z-index:0; pointer-events:none; background-image dua linear-gradient rgba(0,240,255,.04) 1px (horizontal + vertical 90deg); background-size:44px 44px.
- 3x .glow: position:fixed; 420x420px; border-radius:50%; filter:blur(100px); opacity:.15; z-index:0; pointer-events:none. Penempatan: g1 kuning (--neon) top:-160px left:-140px; g2 cyan (--cyan) bottom:-180px right:-140px; g3 magenta (--mag) top:38% left:50% translateX(-50%), opacity:.10.
- .scanlines: position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.4; background:repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 1px, transparent 1px 3px).
- Konten utama .wrap: position:relative; z-index:1; width:100% FULL-WIDTH (bukan max-width sempit); padding samping clamp(14px,3vw,40px); margin:0 auto.

D.3 KOMPONEN SIGNATURE:
- PANEL .panel: background var(--panel); border:1px solid var(--line2); border-radius:0; padding:22px; position:relative.
- SUDUT BRACKET: pada panel utama WAJIB 4 elemen (dan tr/bl/br). .corner{position:absolute;width:13px;height:13px;pointer-events:none} - tiap sudut pakai border 2px var(--neon) pada dua sisi sesuai posisinya.
- CHAMFER 7px untuk .btn dan 9px untuk kartu: clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); (kartu memakai angka 9px pada polygon yang sama).
- HOVER KARTU (.mcard): ::before garis vertikal 2px sisi kiri, background var(--mc,var(--cyan)), transform:scaleY(0) -> scaleY(1) saat hover, transition .18s; border berubah ke var(--mc,var(--cyan)). Warna aksen per kartu di-inject via inline style="--mc:var(--warna)".
- TOMBOL .btn: inline-flex center; gap:9px; padding:12px 22px; font:700 11.5px var(--mono); letter-spacing:2px; transition:.15s; border:1px solid var(--line2); background:rgba(14,21,28,.7); color:var(--dim); hover -> border neon + teks neon. Varian: .btn.neon (bg neon, teks hitam, hover bg putih), .btn.sm (padding:8px 14px, font 10.5px), .navbtn (tombol bar bawah, padding:9px 16px, varian .ico padding:9px 12px).
- EYEBROW: font 10px; letter-spacing:4px; color:var(--dim); display:flex; gap:12px; justify-content:center; uppercase; ::before dan ::after garis gradien horizontal 56px (transparent -> line2, dan line2 -> transparent).
- H1: font-family var(--disp); font-weight:700; font-size:clamp(26px,6.5vw,44px); letter-spacing:3px; color:#fff; text-align:center; SATU kata/frasa dibungkus (color:var(--neon)).
- GURU LINE COVER .guru-line: display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; font:500 12.5px var(--mono); color:var(--dim). i fa-chalkboard-user color var(--cyan); b color:#fff; letter-spacing:1px.
- BADGE COVER .badge: inline-flex align-center gap:8px; border:1px solid var(--line2); background:var(--panel2); padding:6px 12px; font:600 9.5px var(--mono); letter-spacing:2px; color:var(--dim); text-transform:uppercase; i color var(--cyan) font-size:11px; hover -> border cyan + teks cyan. Kontainer .badges: display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px.
- HEADING SLIDE .sh: var(--disp) 700 clamp(22px,5vw,32px); #fff; border-bottom:1px solid var(--line2); padding-bottom:8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap. Isi: ikon fas warna cyan (font-size:.75em) + judul + di margin-left:auto (font 700 10px mono, letter-spacing:2px, border 1px var(--line), padding 4px 9px) berisi nomor slide "SLIDE NN".
- BLOK MATERI .blk: border:1px solid var(--line2); background:var(--panel2); padding:16px 18px; margin-top:14px. Varian + h4 di dalamnya (ikon fas): .blk.def - ikon cyan (definisi teknis); .blk.ana - border-left:3px solid var(--amber), i amber (analogi); .blk.case - border-left:3px solid var(--mag), i magenta (kasus); .blk.mit - border-left:3px solid var(--green), i hijau (mitigasi); .blk.warn - border-left:3px solid var(--amber), i amber (peringatan); .blk.ref - border-left:3px solid var(--purple), i purple (referensi). List di dalam .blk: ul tanpa bullet; li padding-left:16px position:relative; li::before content:'>' warna var(--green).
- TABEL: wrapper .tblwrap overflow-x:auto; table border-collapse:collapse width:100%; th (font 700 11px mono, letter-spacing:2px, color var(--neon), border 1px var(--line2), padding 10px 12px, bg var(--panel2), white-space:nowrap); td (12.5px, color var(--txt), border sama, line-height 1.6); tr:hover td background rgba(0,240,255,.03).
- CODE BLOCK .codewrap: position:relative; margin-top:14px; pre: bg var(--panel2); border:1px solid var(--line2); border-left:3px solid var(--green); padding:14px 44px 14px 14px; overflow-x:auto. code: var(--mono) 13px; color var(--txt); white-space:pre-wrap; word-wrap:break-word; line-height:1.75. Komentar dalam code: warna var(--dim). Tombol .copybtn absolute top:8px right:8px, 28x28px.
- BEDAH KODE .bedah: border-left:3px solid var(--mag); margin-top:12px; padding:14px 18px; background:var(--panel2); border:1px solid var(--line2). h4 font var(--mag) dengan ikon fa-microscope. p "Tujuan:" 1 kalimat. div "Analogi:" cyan fa-lightbulb 1 kalimat kehidupan sehari-hari Indonesia.
- TIMELINE .timeline: position:relative; padding-left:24px; margin-top:14px; border-left:2px solid var(--line2). .timeline-item: position:relative; padding:10px 0 10px 14px. ::before: content:''; position:absolute; left:-31px; top:16px; width:12px; height:12px; border-radius:50%; background:var(--neon); border:2px solid var(--bg). .tdate: font var(--disp) 700 color var(--neon) 12px letter-spacing:1px. .tdesc: color var(--txt) 12.5px line-height:1.6 margin-top:4px.
- HUD CHIP .hchip: inline-flex align-center gap:7px; border:1px solid var(--line2); bg var(--panel2); padding:5px 10px; font-size:10px; letter-spacing:1px; color var(--dim); i berwarna var(--cyan); b putih 11px; varian .clk b hijau.
- HASIL KUIS .rwrap: panel bracket. .r-badge: label rank (var(--disp) 700, letter-spacing 3px, warna sesuai rank) + animasi pulseSoft (box-shadow 0 0 14px rgba(252,238,10,.35) <-> 0 0 26px rgba(252,238,10,.65)) 1.6s infinite. .rbig: angka var(--disp) 700 clamp(40px,64px) color var(--neon) text-shadow 0 0 18px rgba(252,238,10,.5), diikuti small "/ N" color dim. .rcap: 1 kalimat dim 12.5px. .rgrid: display:grid; grid-template-columns:repeat(3,1fr); gap:10px. .r-cell: border 1px line2, bg panel2, padding 12px, text-center (label 10px dim uppercase + nilai b 16px #fff). Tombol aksi: ULANGI KUIS (btn neon, fa-rotate-right) + RANGKUMAN MATERI (btn, fa-clipboard-check).

D.4 ATURAN TIPOGRAFI GLOBAL:
- body: var(--mono) 14px, color var(--txt), bg var(--bg).
- Semua heading/nama: var(--disp), letter-spacing 1-4px, #fff. Semua isi/data/kode: var(--mono) 12-14px.
- Semua teks panjang: overflow-wrap:break-word; opsi kartu kuis: overflow-wrap:anywhere.
- Scrollbar custom: width 8px, track var(--bg), thumb var(--neon).
- Hierarki font: H1 (44px) > H2/sh (32px) > H3 (20px) > H4 (16px) > body (14px) > small (12px) > tiny (10px).

D.5 AKSESIBILITAS (WCAG 2.1 AA):
- Kontras teks normal minimum 4.5:1; teks besar minimum 3:1.
- Fokus visible: outline 2px solid var(--neon) offset 2px.
- Reduced motion: @media(prefers-reduced-motion:reduce) semua animasi dan transisi dinonaktifkan.
- Semua tombol interaktif wajib aria-label jika tidak ada teks visible.
- Semua gambar/dekoratif wajib aria-hidden="true".

================================================================
SECTION E - ANATOMI LAYOUT GLOBAL (KERANGKA WAJIB)
================================================================
E.1 HEADER fixed top (z-index:60, height:48px):
- Background rgba(11,17,21,.92) + backdrop-filter:blur(8px); border-bottom:1px solid var(--line2).
- Struktur flex .hwrap: [BRAND] [HSTAT center flex:1] [NAV kanan] [BURGER].
- Brand: "ABDURROZAK" - Rajdhani 700 17px, letter-spacing 2px, putih; kata ROZAK neon; link ke https://abdurrozak.my.id/ _self.
- Hstat TENGAH (flex:1, justify-content:center): chip jam live (nilai hijau, format: DD MMM YYYY | HH:MM:SS WIB, nama bulan Indonesia 3 huruf: Jan Feb Mar Apr Mei Jun Jul Agu Sep Okt Nov Des) + chip IP IP MENGHUBUNGI.... Nilai IP max-width:150px ellipsis agar header tak pernah pecah.
- NAV rata KANAN (Rajdhani 600 13px, letter-spacing:1px, uppercase, warna dim; hover/active: neon + border-bottom 2px neon; gap 18px; target _self): HOME -> https://abdurrozak.my.id/ | ABOUT ME -> https://abdurrozak.my.id/ABDURROZAK/jack_tentang-saya.html | MICROSITE -> https://abdurrozak.my.id/ABDURROZAK/jack_microsite.html | KONTAK -> https://abdurrozak.my.id/ABDURROZAK/jack_kontak-me.html | PERSEMBAHAN -> https://abdurrozak.my.id/ABDURROZAK/jack_persembahan.html | HELP -> button openHelp().
- <=900px: nav.main display:none; tampil #burger (34x34px, border line2, ikon fa-bars cyan) -> toggle #navDrop: panel fixed di bawah header, bg rgba(11,17,21,.97), border-bottom line2, berisi menu yang sama + tombol "DAFTAR SLIDE" (openToc). Dropdown MENDORONG konten ke bawah, bukan menimpa konten. Klik link mana pun menutup dropdown.

E.2 PROGRESS BAR (z-index:58): fixed top:48px, height:3px, background var(--line2); child #pfill display:block height:100% background var(--neon) box-shadow 0 0 10px rgba(252,238,10,.7), transition width .35s. Lebar = CUR/TOTAL*100%.

E.3 BAR BAWAH #slidebar (z-index:55, fixed bottom, bg rgba(11,17,21,.95) + blur, border-top line2). Isi .sb-in:
- DESKTOP (>1000px): display:grid; grid-template-columns:1fr auto 1fr; TIGA ZONA SEIMBANG.
- KIRI .sb-grp.l (justify-self:start): tombol TOC (fa-list + label) + SCREENSHOT (fa-camera, .ico) + FULLSCREEN (fa-expand, .ico).
- TENGAH .sb-credit (justify-self:center): 'Dibuat dengan oleh Abdur Rozak, S.Kom. - abdurrozak.my.id' - teks bungkus .sb-cw agar bisa disembunyikan di HP. Font 10px.
- KANAN .sb-grp.r (justify-self:end): PREV (fa-chevron-left + label) + counter [ 01 / NN ] (700 12px mono neon letter-spacing:2px) + NEXT.
- Padding bawah memakai calc(8px + env(safe-area-inset-bottom,0px)).
- TABLET (<=1000px): grid 2 kolom auto auto; kredit turun ke grid-column:1/-1 justify-self:center (baris kedua); body padding-bottom 118px; toast/errbox naik ke bottom:88px.
- SMARTPHONE (<=640px): SATU BARIS flex space-between: .sb-in display:flex; justify-content:space-between; gap:8px. .sb-grp.l kiri, .sb-grp.r kanan; .sb-credit display:none; label .nb-lbl display:none (hanya ikon); .sb-grp.r .navbtn padding:12px 10px (tap target lega); body padding-bottom calc(88px + env(safe-area-inset-bottom,0px)); toast/errbox bottom:76px.
- <=420px: perkecil gap jadi 5px, padding navbtn menyesuaikan, counter 9.5px.
- EFEK MENYALA: tombol NEXT dan HELP wajib memiliki animasi softGlow (box-shadow berkedip halus 2.4 detik antara opacity .15 dan .45 warna neon). Saat hover, animasi berhenti, warna berubah putih, glow intens .6.

E.4 OVERLAY TOC #tocOv (z-index:65): fixed inset:0 bg rgba(6,8,10,.85) + blur; DRAWER DARI KIRI: justify-content:flex-start; align-items:stretch; padding:0. .toc-panel: width:min(86vw,380px); height:100dvh; overflow:auto; animasi @keyframes slideL from{transform:translateX(-100%)} to{transform:none} .25s. Isi: h2 "DAFTAR SLIDE // NN TOTAL" (ikon fa-list neon) + .toc-list grid gap:4px berisi tombol .toc-item chamfered (nomor 2 digit neon flex:0 0 28px + ikon fas cyan + judul); item slide aktif ber-class .cur (border neon, bg rgba(252,238,10,.06)); render ULANG setiap kali dibuka; klik item = tutup drawer + go(n); klik area gelap = tutup; ESC = tutup. SPASI RAPAT: .toc-list padding:10px, .toc-item padding:8px 12px gap:8px font-size:11px. Jika materi dipecah per sub-bagian, judul TOC ikut format "[SUB-TOPIK]: [SUB-BAGIAN]".

E.5 OVERLAY HELP #helpOv (z-index:65): modal CENTER (align/justify center), panel max-width:560px dengan 4 sudut bracket; menjelaskan NAVIGASI, TOC, SCREENSHOT, FULLSCREEN, KREDIT, JAM & IP, CENTER MODE, TERMINAL APERSEPSI, COPY, KUIS - disesuaikan konteks topik. Tutup: tombol TUTUP, klik backdrop, ESC.

E.6 TOAST #toasts (z-index:70): fixed right:14px bottom:56px (tablet 88px, HP 76px), flex column gap:8px, max-width calc(100vw - 28px). .toast: bg rgba(11,17,21,.96), border line2, border-LEFT 3px sesuai tipe (info=cyan default, ok=hijau, err=magenta, warn=amber), padding:10px 14px, font 12px, max-width:300px, animasi masuk slide dari kanan .25s; auto keluar 3 detik dengan class .out (opacity 0 + translateX(20px), .25s) lalu remove.

E.7 ERRBOX #errbox (z-index:80): fixed left:10px bottom (mengikuti offset per breakpoint sama seperti toast), display:none default; bg rgba(11,17,21,.95), border line2, border-left 3px magenta, font 10px magenta, max-width min(300px, 100vw-20px), white-space:pre-wrap, max-height 40vh overflow auto.

================================================================
SECTION F - STRUKTUR SLIDE (FORMULA & ANATOMI PER SLIDE)
================================================================
F.0 FORMULA JUMLAH SLIDE (SEPENUHNYA FLEKSIBEL - TANPA BATAS):
- Slide 01-08 TETAP: COVER (01), IDENTITAS SEKOLAH (02), IDENTITAS GURU (03), IDENTITAS MAPEL (04), CAPAIAN PEMBELAJARAN (05), TUJUAN PEMBELAJARAN (06), PROFIL PELAJAR (07), APERSEPSI (08).
- Slide 09 s.d. N: MATERI INTI - JUMLAH SLIDE SEPENUHNYA MENGIKUTI KEDALAMAN MATERI, BUKAN ANGKA TETAP: boleh 3 slide, boleh 15, boleh 40 - TOTAL PRESENTASI BOLEH MENCAPAI 20-AN, 30-AN, BAHKAN 50+ SLIDE jika memang diperlukan agar materi lengkap. Ikuti aturan pemecahan F.9.
- Slide N+1 s.d. N+10 TETAP (10 slide penutup): STUDI KASUS (N+1), KUIS (N+2), RANGKUMAN (N+3), GLOSARIUM (N+4), PUSTAKA (N+5), REFLEKSI (N+6), DEMO (N+7), CATATAN (N+8), QUOTE (N+9), PENUTUP (N+10).
- N = nomor slide materi TERAKHIR. TOTAL = N + 10. TIDAK ADA batas atas.
- KUALITAS > ANGKA: jumlah slide banyak WAJIB karena sub-bagian yang memang berbeda dan substantif - DILARANG memotong materi demi ringkas, DILARANG pula menggembungkan dengan duplikasi/pengulangan isi.
- TOTAL final WAJIB dihitung DINAMIS dari $$('.sec').length (lihat H.4) - dilarang hardcode angka total.
Setiap slide = <section class="sec" id="sNN"> di dalam <main class="wrap">. Sistem tampil: .sec{display:none} + .sec.on{display:block; animation:fadeIn .3s ease} (fadeIn: opacity 0 translateY(10px) -> normal). Navigasi via fungsi go(n). Setiap section materi diberi komentar HTML .

F.1 SLIDE 01 COVER: <section class="sec on center" id="s1">. Isi berurutan:
(1) Eyebrow ("ABDURROZAK.MY.ID // [RUANG KELAS] sesuai SECTION A").
(2) H1 (topik utama, satu kata/frasa kunci class accent).
(3) Baris guru: GURU PENGAMPU: ABDUR ROZAK, S.Kom. - SMKS YASMIDA.
(4) p.sub (deskripsi singkat, awali ikon fas relevan cyan).
(5) .hud 3 chip (MAPEL, FASE, KELAS - nilai dari Section A).
(6) Baris BADGE TOPIK: .badges berisi 4-6 badge yang SESUAI dan SPESIFIK dengan TOPIK UTAMA (WAJIB dipilih/adaptasi per topik, DILARANG pakai daftar tetap jika tidak relevan; contoh untuk topik keamanan siber: THREAT DETECTION fa-shield-virus, NETWORK SECURITY fa-network-wired, ETHICAL HACKING fa-user-secret, INCIDENT RESPONSE fa-tower-broadcast, ENCRYPTION fa-lock, CYBER HYGIENE fa-soap; untuk topik jaringan: ROUTING fa-route, SWITCHING fa-diagram-project, IP ADDRESSING fa-map-location-dot, FIREWALL fa-shield-halved, TROUBLESHOOTING fa-screwdriver-wrench; topik lain: pilih padanannya sendiri).
(7) Baris tombol: MULAI (btn neon, fa-play, go(2)) + DAFTAR SLIDE (btn, fa-list, openToc()) + LALUI KE APERSEPSI (btn, fa-terminal, go(8)).
.center WAJIB: flex column, align/justify center, min-height calc(100dvh - offset bar atas+bawah per breakpoint), text-align:center; varian CSS .sec.center .sh/.panel/.hud ikut center.

F.2 SLIDE 02 IDENTITAS SEKOLAH: heading .sh (fa-school) + tag "SLIDE 02". Isi .mgrid (auto-fit minmax(min(270px,100%),1fr)) berisi 4 .mcard chamfered dengan --mc bervariasi (cyan/neon/green/purple), ikon dalam .mico 40x40 chamfered: YAYASAN (fa-building-columns) = "Yayasan Islam Miftahul Huda (YASMIDA)"; SEKOLAH (fa-school) = "SMKS YASMIDA - Swasta, NPSN 10814689"; AKREDITASI (fa-certificate) = "Peringkat B (BAN-SM)"; ALAMAT (fa-map-pin) = "Jl. Utama No. 05 Ambarawa, Pringsewu, Lampung, 35376". Tutup dengan .blk.def "KOMITMEN SEKOLAH" (1 paragraf mengaitkan sekolah dengan topik).

F.3 SLIDE 03 IDENTITAS GURU & SOSIAL MEDIA: heading .sh (fa-user-secret) + tag "SLIDE 03". Panel bracket berisi .mgrid 2 kartu: ABDUR ROZAK, S.Kom. (fa-user-secret, --mc neon) "Guru Produktif [MAPEL] - SMKS YASMIDA" + PORTOFOLIO (fa-globe, --mc cyan) "abdurrozak.my.id - tutorial, tools, dan media ajar". Di bawahnya blok .soc: shead "KANAL TERHUBUNG // 12" (fa-satellite-dish) + .sgrid 12 tombol .schip chamfered target _blank rel noopener (ikon brand = fab): S.ID (fas fa-link) s.id/abdurrozakskom; GITHUB (fab fa-github) github.com/abdurrozakskom; INSTAGRAM (fab fa-instagram) instagram.com/abdurrozak.skom; THREADS (fas fa-at) threads.com/@abdurrozak.skom; FACEBOOK (fab fa-facebook) facebook.com/abdur.rozak.skom; TIKTOK (fab fa-tiktok) tiktok.com/@abdurrozak.skom; YT TEACHER (fab fa-youtube) youtube.com/@AbdurRozakSKom; YT COURSE (fab fa-youtube) youtube.com/@JackTersakiti; YT STUDIO (fab fa-youtube) youtube.com/@revengestudiolampung; HASHNODE (fas fa-hashtag) hashnode.com/@abdurrozakskom; WHATSAPP (fab fa-whatsapp) wa.me/6289675223353; EMAIL (fas fa-envelope) mailto:abdurrozak.skom@gmail.com. Hover .schip: border cyan + ikon/teks neon + garis kiri 2px scaleY.

F.4 SLIDE 04 IDENTITAS MATA PELAJARAN: heading .sh (fa-clipboard-list) + tag. Panel bracket + .tblwrap tabel 2 kolom (KOMPONEN | KETERANGAN) 9 baris: Mata Pelajaran = [dari Section A], Elemen CP = [dari Section A], Course = "[TOPIK UTAMA] - [DESKRIPSI SINGKAT]", Kurikulum = "Kurikulum Merdeka", Fase/Kelas = [dari Section A], Alokasi Waktu = [dari Section A], Prasyarat = [dari Section A], Model = "Problem Based Learning (PBL) + Laboratorium CLI", Media = "Slide interaktif, terminal Linux, studi kasus nyata".

F.5 SLIDE 05 CAPAIAN PEMBELAJARAN: heading .sh (fa-bullseye) + tag "FASE [X]" (X = FASE aktual dari Section A, JANGAN hardcode). .blk.def "CAPAIAN PEMBELAJARAN FASE [X] - [ELEMEN]": 1 paragraf memakai kata kerja operasional bertingkat: menganalisis (C4), menerapkan (C3), mengevaluasi (C5), dikaitkan topik. Rumusan CP mengikuti elemen Kurikulum Merdeka fase tersebut.

F.6 SLIDE 06 TUJUAN PEMBELAJARAN: heading .sh (fa-flag-checkered) + tag "ABCD". .blk.mit "TUJUAN PEMBELAJARAN (ABCD)": list 4 item, masing-masing diawali label level kognitif (C1-C2) s.d. (C5). Keempat TP WAJIB diturunkan dari TARGET KOMPETENSI di Section A (satu TP = satu aspek kompetensi tsb), dirumuskan spesifik untuk topik dengan format Audience-Behavior-Condition-Degree.

F.7 SLIDE 07 8 DIMENSI PROFIL PELAJAR: heading .sh (fa-users-rays) + tag. Isi .mgrid 8 kartu (auto-fit minmax(min(220px,100%),1fr)) dengan --mc bervariasi, ikon dalam .mico. Deskripsi tiap dimensi WAJIB DIADAPTASI ke konteks TOPIK (contoh berikut untuk topik keamanan; untuk topik lain ubah redaksinya): (1) BERIMAN (fa-mosque) - bertakwa dalam penggunaan teknologi; (2) BERKEBINEKAAN GLOBAL (fa-earth-asia) - menghargai praktik dan standar internasional di bidang topik; (3) GOTONG ROYONG (fa-people-group) - kolaborasi tim sesuai bidang topik; (4) MANDIRI (fa-person-walking) - belajar otodidak perkembangan terbaru; (5) BERNALAR KRITIS (fa-brain) - analisis data/gejala sesuai topik; (6) KREATIF (fa-lightbulb) - solusi inovatif sesuai bidang; (7) BERETIKA DIGITAL (fa-scale-balanced) - patuh regulasi yang relevan (mis. UU ITE & PDP untuk topik digital); (8) SADAR KEAMANAN (fa-user-shield) - mindset unggul sesuai bidang (contoh keamanan: "Security First"; sesuaikan untuk topik lain).

F.8 SLIDE 08 APERSEPSI: heading .sh (fa-terminal) + tag.
(1) .blk.def "PIKIRKAN INI SEBELUM LANJUT" - 1 paragraf pertanyaan pemantik paradoks nyata yang berhubungan langsung dengan topik (bukan generik), boleh mengaitkan PRASYARAT dari Section A sebagai gebrak ingatan awal, ditutup ajakan berpikir.
(2) Terminal mockup .term: term-bar (ikon fa-terminal cyan + teks "root@abdurrozak: ~/[nama-topik] - bash") + term-body id="twBody" (min-height:190px). Baris-baris terminal berisi minimal 7 entri: 1 perintah cmd + output ok hijau + pertanyaan q amber + fakta warn magenta + kesimpulan ok + ajakan lanjut - SEMUA baris WAJIB substantif dan spesifik topik.
(3) Tombol: PUTAR ULANG (btn sm, fa-rotate-right, twReplay()) + LANJUT KE MATERI (btn sm neon, fa-chevron-right, go(9)).
Spesifikasi TYPEWRITER: objek TW={done,running,timers[]}; baris cmd diketik per karakter delay 70ms dengan span cursor .tw-cursor (9x15px bg hijau, blink 1s steps(1)); baris output muncul utuh delay 320ms; prompt span .tl-p "root@abdurrozak:~$ " hijau bold; auto-run PERTAMA kali slide dibuka via go(); pindah slide -> TW.running=false + semua clearTimeout; tombol replay memulai ulang.

F.9 SLIDE 09 s.d. N: MATERI INTI (urut sesuai Section A; JUMLAH SLIDE PER SUB-TOPIK BEBAS - tidak wajib satu slide per sub-topik). Heading .sh dengan ikon fas yang paling mewakili + tag "SLIDE NN".
ATURAN PEMECAHAN SLIDE (WAJIB):
- Sub-topik sederhana (tidak memiliki sub-bagian) = 1 slide.
- Sub-topik kompleks ATAU memiliki sub-bagian = PECAH menjadi beberapa slide: SATU SLIDE PER SUB-BAGIAN. Judul slide = "[SUB-TOPIK]: [SUB-BAGIAN]" (contoh: "MALWARE: VIRUS", "MALWARE: WORM & TROJAN"). Jika baris sub-topik di SECTION A ditulis dengan sub-bagian dalam kurung (mis. "MALWARE (VIRUS, WORM, TROJAN)"), WAJIB pecah otomatis per sub-bagian tersebut.
- Jangan takut jumlah slide menjadi banyak - tugasmu adalah materi LENGKAP, bukan materi ringkas. 30-50+ slide total adalah hal normal jika sub-bagiannya memang banyak.
- Jika sub-topik dipecah lebih dari 1 slide, slide PERTAMA sub-topik tsb WAJIB diawali .blk.def "PETA SUB-TOPIK" berisi list sub-bagian yang akan dibahas (2-6 baris) agar siswa memahami struktur.
- SETIAP slide (termasuk hasil pemecahan) WAJIB anatomi lengkap 5 KOMPONEN INTI + 1 OPSIONAL di bawah, diterapkan pada sub-bagian yang dibahas - DILARANG membuat slide "setengah isi".
- Patokan pecah: jika 5 komponen satu sub-bagian tidak muat padat dalam satu slide, sub-bagian itu boleh dipecah lagi dengan akhiran judul "(LANJUTAN)".
ANATOMI SLIDE MATERI (lihat standar penulisan di SECTION G):
(a) .blk.def DEFINISI TEKNIS LENGKAP - h4 fa-book. 2-4 kalimat. Kalimat pertama = definisi formal. Kalimat berikutnya memperluas cakupan + menyebut istilah teknis kunci dengan bold. Boleh 1 istilah asing dicetak miring dengan terjemahan. Akurat sesuai literatur/standar umum.
(b) .blk.def TAMBAHAN (OPSIONAL) - h4 fa-layer-group. Tabel klasifikasi/perbandingan jika sub-bagian memiliki beberapa jenis/tipe/varian. Minimal 3 kolom, 4-7 baris.
(c) .blk.ana ANALOGI KEHIDUPAN - h4 fa-lightbulb. WAJIB konteks kehidupan sehari-hari INDONESIA (warung, bank, sekolah, konde, parkiran, antre teller, loker, pasar, bandara, dsb). 3-5 kalimat. Struktur: benda/situasi analogi -> pemetaan ke konsep teknis -> satu kalimat punchline yang menjelaskan pelajarannya. Analogi harus PARALEL secara logika dengan konsep.
(d) .blk.case KASUS NYATA - h4 fa-triangle-exclamation. Nama insiden/fenomena + tahun dalam bold, kronologi singkat (gunakan .timeline jika ada urutan waktu), angka dampak konkret, dan 1-2 kalimat analisis mengapa terjadi. Hanya gunakan kasus yang benar-benar terjadi dan dapat diverifikasi. Ikuti katup kuota di G3.
(e) .codewrap CODE BLOCK (CLI/prosedur) + tombol copybtn + panel .bedah BEDAH KODE: border-left:3px solid var(--mag); judul fa-microscope magenta "BEDAH KODE"; p "Tujuan:" 1 kalimat; div "Analogi:" cyan fa-lightbulb 1 kalimat kehidupan sehari-hari Indonesia.
(f) .blk.mit MITIGASI/REKOMENDASI - h4 fa-shield-halved, list 8 poin pada slide SUB-TOPIK INTI (slide pertama sebuah sub-topik); slide LANJUTAN / hasil pemecahan sub-bagian cukup 5 poin. Tiap poin 1-2 kalimat padat actionable (dimulai kata kerja: Terapkan..., Dokumentasikan..., Schedule..., Review...), naik dari taktis ke strategis.

F.10 SLIDE STUDI KASUS NYATA (N+1): heading .sh (fa-file-shield). Pilih SATU insiden/fenomena besar, nyata, dan terverifikasi yang berkaitan dengan topik.
(1) .blk.case narasi insiden (apa, kapan, dampak, angka).
(2) Panel bracket + tabel "bedah per komponen utama topik" - satu baris tabel per komponen (People/Process/Technology jika topik manajerial; sesuaikan jika topik teknis), kolom: KOMPONEN | TEMUAN ANALISIS. Nama komponen di-bold berwarna (cyan/amber/green atau aksen lain).
(3) .blk.mit "PELAJARAN UNTUK KITA" - 4 poin refleksi + implikasi hukum/kebijakan Indonesia bila relevan.

F.11 SLIDE KUIS INTERAKTIF (N+2): heading .sh (fa-brain) + tag "[N] SOAL" sesuai JUMLAH SOAL KUIS di Section A. .hud 2 chip live: SKOR (fa-star, id qScore) + PROGRES (fa-list, id qProg "0/N"). Kontainer #quizBox + #quizResult (rwrap, display:none).
ATURAN SOAL: [N] soal campuran pilihan ganda (4 opsi A-D) dan True/False. LEVEL KUIS dari Section A mengatur bobot kognitif: DASAR = dominan C2-C3 (konsep + penerapan langsung), MENENGAH = distribusi standar 30% C2 / 40% C3-C4 / 30% C5, LANJUTAN = dominan C4-C5 (analisis + evaluasi kasus kompleks). Distribusi dibulatkan KE BAWAH, selisih hingga total tepat [N] masuk ke C3-C4; setiap level (C2, C3-C4, C5) WAJIB mendapat minimal 1 soal bila [N] >= 3. SEMUA soal HARUS bisa dijawab dari isi slide materi + studi kasus file ini, dilarang soal di luar materi; redaksi dan kompleksitas kasus soal menyesuaikan LEVEL KUIS.
MEKANIKA (lihat JS di SECTION H): klik opsi -> semua opsi disabled; benar: class .good hijau + skor++ + sndGood + toast ok; salah: opsi terpilih .bad magenta + opsi kunci .good + sndBad + toast err; selalu tampilkan .qexp penjelasan (border-left cyan) + tombol qnext. Soal terakhir -> layar hasil .rwrap (spesifikasi komponen hasil kuis ada di D.3): r-badge berisi rank, rbig angka skor + "/ N", rcap, rgrid 3 r-cell (BENAR, SALAH, AKURASI %), tombol ULANGI KUIS (reset penuh) + RANGKUMAN MATERI (go ke slide Rangkuman, N+3). Skor 100% -> sndWin fanfare + toast. Rank: 100% "S-RANK", >=80% "A-RANK", >=60% "B-RANK", sisanya "C-RANK".

F.12 SLIDE RANGKUMAN & TAKEAWAY (N+3): heading .sh (fa-clipboard-check).
(1) .blk.def "RANGKUMAN INTI": list dengan jumlah poin MENGIKUTI JUMLAH SUB-TOPIK - minimal 1 poin per sub-topik (boleh lebih jika sub-topiknya dipecah banyak slide) + 1 poin sintesis penghubung.
(2) .blk.def "TAKEAWAY MESSAGE": 1 paragraf kesimpulan utama yang menghubungkan semua sub-topik menjadi satu narasi koheren.

F.13 SLIDE GLOSARIUM (N+4): heading .sh (fa-spell-check). Panel bracket + .tblwrap tabel 2 kolom (ISTILAH | DEFINISI SINGKAT) minimal 10 baris (tambah sesuai banyaknya istilah teknis di materi). Istilah di-bold berwarna (gunakan 6 warna aksen berbeda: cyan/purple/mag/green/amber/neon). Definisi 1-2 kalimat akurat.

F.14 SLIDE DAFTAR PUSTAKA (N+5): heading .sh (fa-book-open). .blk.def "REFERENSI VALID": list 5-8 referensi dari sumber kredibel (buku akademik, standar industri NIST/ISO, laporan resmi BSSN/CERT, dokumentasi resmi). Format: Penulis. (Tahun). Judul. Penerbit.

F.15 SLIDE PERTANYAAN REFLEKSI (N+6): heading .sh (fa-comments) + tag "DEEP LEARNING". .blk.ana "RENUNGKAN DAN DISKUSIKAN": list 3-4 pertanyaan reflektif yang memicu berpikir kritis tentang etika, implikasi sosial, atau dilema dalam topik.

F.16 SLIDE DEMONSTRASI (N+7): heading .sh (fa-flask). .mgrid 3 kartu dengan LABEL DIADAPTASI ke konteks topik - contoh untuk topik keamanan: (1) ATTACK (fa-skull-crossbones, --mc mag) - deskripsi simulasi serangan; (2) DEFENSE (fa-shield-halved, --mc cyan) - deskripsi respons pertahanan; (3) MITIGASI (fa-clipboard-check, --mc green) - deskripsi pencegahan jangka panjang. Untuk topik non-keamanan gunakan padanan konteks (mis. SIMULASI fa-vials / DIAGNOSIS fa-stethoscope / PENCEGAHAN fa-shield-halved) dengan deskripsi setara.

F.17 SLIDE RANGKUMAN UNTUK DITULIS (N+8): heading .sh (fa-pen-to-square) + tag "CATATAN SISWA". Panel dengan border-left 4px solid var(--amber). h4 amber "SALIN POIN INI KE BUKU TULIS ANDA" + list 5-6 poin ringkas yang wajib dicatat siswa.

F.18 SLIDE QUOTE MOTIVASI (N+9): <section class="sec center">. Panel bracket isi: ikon fa-quote-left 32px dim + quote motivasi (Rajdhani 700 clamp 20-28px putih, frasa kunci class accent) + atribusi sumber (color dim, font 12px, letter-spacing 2px).

F.19 SLIDE TERAKHIR PENUTUP (N+10): <section class="sec center">. Panel bracket isi: ikon fa-mug-hot 40px amber + quote penutup (Rajdhani 700 clamp 18-24px putih, frasa kunci class accent) + paragraf refleksi penutup yang MENYEBUT kembali inti topik + tombol KEMBALI KE COVER (btn neon, fa-home, go(1)) + ULANGI KUIS (btn, fa-brain, go ke slide kuis).

================================================================
SECTION G - STANDAR PENULISAN KONTEN (PEDAGOGI)
================================================================
G1. DEFINISI TEKNIS: 2-4 kalimat. Kalimat pertama = definisi formal. Kalimat berikutnya memperluas cakupan + menyebut istilah teknis kunci dengan bold. Boleh 1 istilah asing dicetak miring dengan terjemahan. Akurat sesuai literatur/standar umum - dilarang mengarang definisi.
G2. ANALOGI: WAJIB konteks kehidupan sehari-hari INDONESIA (warung, bank, sekolah, konde, parkiran, antre teller, loker, pasar, bandara, dsb). 3-5 kalimat. Struktur: benda/situasi analogi -> pemetaan ke konsep teknis -> satu kalimat punchline yang menjelaskan pelajarannya. Analogi harus PARALEL secara logika dengan konsep, bukan sekadar mirip permukaan.
G3. KASUS NYATA: nama insiden/fenomena + tahun dalam bold, kronologi singkat (gunakan .timeline jika ada urutan waktu), angka dampak konkret, dan 1-2 kalimat analisis mengapa terjadi. Hanya gunakan kasus yang benar-benar terjadi dan dapat diverifikasi (insiden global maupun Indonesia). Dilarang mengarang kasus. Sumber: CVE, BSSN, CERT, laporan media kredibel. KATUP KUOTA: pada deck materi panjang (20+ slide), jika kasus unik untuk sebuah sub-bagian kecil sulit ditemukan, gunakan aspek/kronologi/perangkat yang BERBEDA dari insiden yang sudah dipakai pada sub-topik yang sama (sebut eksplisit kaitannya) ATAU gunakan studi implementasi nyata berdata publik. DILARANG mengarang insiden baru demi memenuhi kuota kasus.
G4. COMMAND/CLI: pilih perintah yang BENAR-BENAR relevan dan AMAN untuk dipraktikkan siswa di lab (Linux umum: ufw, passwd, chage, lastb, grep log, ss, ping, traceroute, iptables, openssl, dsb - sesuaikan topik). Sertakan 1-2 baris komentar di dalam code untuk setiap perintah penting. Jika sub-topik non-teknis (mis. hukum, komunikasi), isi code block dengan prosedur/langkah kerja bernomor dalam format yang sama - konsistensi visual tetap terjaga.
G5. BEDAH KODE: Tujuan = 1 kalimat menjelaskan apa yang dicapai rangkaian perintah. Analogi = 1 kalimat konteks Indonesia, dibungkus tanda kutip.
G6. MITIGASI: 8 poin pada slide sub-topik inti, 5 poin pada slide lanjutan/pemecahan; tiap poin 1-2 kalimat padat actionable (dimulai kata kerja: Terapkan..., Dokumentasikan..., Schedule..., Review...), naik dari taktis ke strategis. Tumpang tindih taktis antar slide pada deck panjang BOLEH terjadi, WAJIB ditulis ulang dengan konteks spesifik sub-bagian - DILARANG copy-paste butir antar slide.
G7. BAHASA: Indonesia baku untuk penjelasan; label/kapital/tombol pakai gaya terminal KAPITAL singkat (MULAI, LANJUT KE MATERI, ULANGI KUIS). Istilah teknis asing dipertahankan (firewall, patching, encryption).
G8. KEJUJURAN AKADEMIK: jika suatu klaim bersifat perkiraan/klaim pihak tertentu, tulis dengan kualifikasi ("dugaan", "klaim sementara", "laporan menyebut"). Dilarang membulatkan fakta menjadi lebih dramatis dari sumbernya.
G9. KUIS: semua soal HARUS bisa dijawab dari isi slide materi + studi kasus file ini. Dilarang soal di luar materi. Bobot kognitif mengikuti LEVEL KUIS di Section A (DASAR = dominan C2-C3; MENENGAH = 30% C2, 40% C3-C4, 30% C5; LANJUTAN = dominan C4-C5). Distribusi dibulatkan KE BAWAH, selisih hingga total tepat N masuk ke C3-C4; setiap level (C2, C3-C4, C5) minimal 1 soal bila N >= 3.
G10. REFERENSI: hanya gunakan sumber kredibel (buku akademik, standar industri NIST/ISO, laporan resmi BSSN/CERT, dokumentasi resmi). Dilarang menggunakan blog pribadi, forum, atau sumber tidak terverifikasi.

================================================================
SECTION H - SPESIFIKASI JAVASCRIPT (MODUL & PERILAKU PERSIS)
================================================================
Semua vanilla JS ES5-friendly, semua dalam SATU <script> sebelum </body>, dibungkus komentar struktural, di-boot lewat safeInit.
H.1 UTIL: $ (querySelector), $$ (querySelectorAll), esc() (escape & < > " '), pad2(), errLog(), window.onerror, safeInit(name,fn).
H.2 AUDIO - pattern WAJIB: var AC={ctx:null, ensure:function(){ buat AudioContext/webkitAudioContext sekali; resume jika suspended }, tone:function(f,dur,type,vol){ oscillator + gain envelope: setValueAtTime(vol) -> exponentialRampToValueAtTime(0.0001) }}. Turunan: sndClick 600Hz sine .05s vol .04; sndGood 700Hz .09s lalu 940Hz .14s (delay 80ms) sine vol .08; sndBad 200Hz square .18s vol .06; sndWin fanfare [523,659,784,1047]Hz .2s sine vol .09 interval 140ms. Resume AC pada pointerdown pertama (once:true).
H.3 TOAST(msg,type): buat div.toast.<type>, innerHTML msg, auto out 3000ms lalu remove.
H.4 SLIDE NAV: var CUR=0, TOTAL, TW_SLIDE=8. initSlides: hitung TOTAL dari $$('.sec').length (DINAMIS - jumlah slide bebas, boleh puluhan); go(1,true) silent; bind btnPrev/btnNext. go(n,silent): guard 1..TOTAL (silent atau sndBad+toast peringatan "SUDAH DI SLIDE PERTAMA/TERAKHIR"); hapus .on semua section, set .on target; paintBar (progress width + sCount "[ NN / TT ]"); scrollTo top smooth; sndClick kecuali silent; kelola lifecycle typewriter (start saat pertama masuk slide TW_SLIDE; stop saat keluar; render instant jika sudah done tapi body kosong).
H.5 KEYBOARD & SWIPE: keydown - prioritas overlay (ESC menutup help/toc yang terbuka); ArrowRight/Space=go(CUR+1), ArrowLeft=go(CUR-1), preventDefault. Touch: catat touchstart, touchend hitung dx,dy; jika |dx|>60 dan |dx|>|dy| maka navigasi (swipe kiri=next, kanan=prev). passive:true.
H.6 TYPEWRITER: seperti spesifikasi F.8. Struktur data TW_LINES = array {t:'cmd'|'out', c:'ok'|'q'|'warn'|'', x:'teks'}. Semua timeout tercatat di TW.timers agar bisa dibersihkan. Teks cmd di-render dengan esc() pada mode instant.
H.7 TOC: TOC_DATA array {icon,title} sebanyak TOTAL, urut sama dengan section (judul slide hasil pemecahan ikut format "[SUB-TOPIK]: [SUB-BAGIAN]"). renderToc membangun ulang list + class .cur untuk CUR + bind klik tiap item. openToc/closeToc + klik backdrop + tombol TUTUP.
H.8 COPY: untuk tiap .copybtn - ambil textContent code se-sibling; navigator.clipboard.writeText().then(done).catch(fallback); fallback: textarea offscreen + execCommand('copy'); done: ikon -> fa-check 1.8 detik + toast "PERINTAH DISALIN KE CLIPBOARD" ok + sndGood; gagal -> toast err + sndBad.
H.9 CLOCK: setInterval 1000ms; format pad2(tanggal) + ' ' + BULAN[m] + ' ' + tahun + ' | ' + HH:MM:SS + ' WIB'.
H.10 IP: flag done; setTimeout fallback 3000ms -> "192.168.1.100 // SECURE NODE"; fetch api.ipify.org?format=json -> set esc(j.ip)+" // ONLINE", clearTimeout; catch -> fallback.
H.11 KUIS: QUIZ array {q,o[4],a(index benar),e(penjelasan)}; QI={i,score,answered}. quizRender (bangun qcard + bind opsi + qnext), quizAnswer (guard answered; disable semua; warnai benar/salah + kunci; tampil qexp + qnext; update HUD), quizFinish (hasil + rank + stat + bind qRetry), quizReset (nol-kan penuh).
H.12 SCREENSHOT: guard html2canvas tersedia; capture $('.sec.on') backgroundColor '#06080a' scale:2 useCORS:true allowTaint:true scrollX:0 scrollY:-window.scrollY logging:false onclone (paksa backgroundColor dan color pada elemen kloning); unduh PNG 'slide-<slug>-NN-<timestamp>.png'; toast progres + sukses/gagal.
H.13 FULLSCREEN: toggle requestFullscreen/exitFullscreen pada documentElement; ikon fa-expand <-> fa-compress via event fullscreenchange; tolak -> toast warn.
H.14 HELP & NAV BURGER: openHelp/closeHelp + klik backdrop; burger toggle #navDrop.open + tutup saat link diklik.
H.15 BOOT: safeInit untuk SETIAP modul minimal dengan nama: MODUL-SLIDES, MODUL-KEYS, MODUL-NAV, MODUL-HELP, MODUL-TOC, MODUL-COPY, MODUL-CLOCK, MODUL-IP, MODUL-QUIZ, MODUL-SHOT, MODUL-FULL, MODUL-AUDIO, MODUL-SALAM (toast sambutan 700ms).

================================================================
SECTION I - RESPONSIVE BLUEPRINT
================================================================
Breakpoint turun (mobile-first boleh, desktop-first boleh) - yang WAJIB adalah hasilnya di tiap rentang:
- >1000px (DESKTOP): header 3 zona; bar bawah grid 1fr auto 1fr (kredit center); body padding-top 66px bottom 96px; mgrid multi kolom; .sec.center min-height calc(100dvh - 162px).
- 641-1000px (TABLET): nav masih tampil (gap menyempit 12px di <=1000px); bar bawah 2 baris (kredit baris kedua center); body bottom 118px; toast/errbox bottom 88px; center offset 184px.
- <=900px: nav.main hilang, burger muncul.
- <=640px (SMARTPHONE): bar bawah SATU BARIS flex space-between TANPA kredit dan tanpa label teks tombol; body bottom calc(88px + safe-area); toast/errbox bottom 76px; wrap padding 12px; panel 16px; tabel font mengecil; term-body 160px; toc-panel min(88vw,340px); jam header disembunyikan (.hchip.clk display:none); IP max-width 110px ellipsis; brand 15px; center offset 214px; .badges gap 8px, .badge padding 5px 9px font 8.5px.
- <=420px: gap bar bawah 5px; counter 9.5px; eyebrow 9px; rgrid rapat; btn 11px 16px.
- UMUM: semua konten fluid full-width; grid memakai minmax(min(270px,100%),1fr) agar tak pernah overflow; tabel & pre punya scroll-x dengan -webkit-overflow-scrolling:touch; teks panjang overflow-wrap; html -webkit-text-size-adjust:100%; body min-height 100vh + 100dvh (double declaration); overlay pakai 100vh + 100dvh double declaration.
- AKSESIBILITAS: @media(prefers-reduced-motion:reduce) -> animation-duration .01ms !important, transition-duration .01ms !important, scroll-behavior auto. :focus-visible outline neon.

================================================================
SECTION J - SEO, METADATA & HEAD (URUTAN PERSIS)
================================================================
1. <meta charset="UTF-8">
2. <meta viewport seperti W6>
3. <title>[TOPIK] // [SUB-TOPIK SINGKAT] - SMKS YASMIDA</title>
4. meta description (1-2 kalimat, sebut topik + nama + sekolah)
5. meta keywords (topik + istilah teknis SESUAI TOPIK + nama sekolah; tambahkan istilah khas domain - contoh topik keamanan: "cyber security, fundamental, SOC, SMK TKJ"; topik lain sesuaikan)
6. meta author "Abdur Rozak, S.Kom."
7. meta theme-color "#06080a"
8. Font Awesome 6.5.2 cdnjs: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css
9. Google Fonts preconnect + css2 Rajdhani 500;600;700 + JetBrains Mono 400;500;600;700
10. html2canvas 1.4.1 cdnjs: https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
11. JSON-LD Schema.org: @type "LearningResource"; name = topik; educationalLevel DISESUIKAN FASE dari Section A (E = "Grade 10", F = "Grade 11-12", dst. - jangan hardcode); inLanguage "id"; learningResourceType "Interactive Presentation"; teaches = sub-topik; provider Organization "SMKS YASMIDA" + alamat; author Person "Abdur Rozak, S.Kom."

================================================================
SECTION K - KUALITAS KODE
================================================================
- Komentar struktural di SETIAP blok (CSS/HTML/JS) sesuai W8.
- Tidak ada style JS inline yang bisa jadi CSS class - pindah ke stylesheet bila dipakai berulang.
- Tidak ada id duplikat. Semua id yang dirujuk JS harus ada di DOM.
- Semua atribut ikon interaktif diberi aria-label.
- Urutan CSS: CORE -> BACKGROUND -> HEADER -> PROGRESS -> BAR BAWAH -> LAYOUT/CENTER MODE -> TIPOGRAFI DASAR -> PANEL -> KOMPONEN (mcard/blk/hud/badge/guru-line) -> TABEL -> CODE -> TIMELINE -> TERMINAL -> KUIS (termasuk hasil rwrap) -> SOSIAL -> OVERLAY -> TOAST/ERRBOX -> CUSTOM (TOC RAPAT, BAR PADAT, TOMBOL MENYALA) -> RESPONSIVE (1000/640/420) -> REDUCED MOTION.
- Konsistensi penamaan: kelas kebab-case, id camelCase atau singkat fungsional (sCount, twBody, quizBox, qScore, qProg, qExp, qNext, qRetry, btnToc, btnShot, btnFull, btnPrev, btnNext, pfill, clock, ipval, navDrop, burger, tocOv, tocList, helpOv, toasts, errbox).

================================================================
SECTION L - CHECKLIST SELF-AUDIT WAJIB SEBELUM OUTPUT
================================================================
Lakukan audit diam-diam, perbaiki, LALU baru keluarkan kode:
L1. Jumlah <section class="sec"> = 8 (pembuka) + jumlah slide materi aktual (BEBAS - tidak ada batas atas, boleh 3 s.d. 40+ slide materi; total boleh 20-50+) + 10 (penutup). Urutan id s1..sNN tanpa lompat. TOTAL = N + 10 konsisten dengan jumlah section di DOM.
L2. Setiap slide materi (F.9), termasuk hasil pemecahan sub-bagian, punya lengkap 5 komponen inti + komponen opsional (def/ana/case/code+bedah/mit) - tidak ada yang bolong. Mitigasi 8 poin di slide inti sub-topik, 5 poin di slide lanjutan.
L3. Semua id yang dirujuk JS ada; semua listener terpasang; quiz qRetry di-bind setelah render.
L4. Semua {} () dan tag seimbang; tidak ada sisa kurung/koma.
L5. Tidak ada emoji, em-dash, panah unicode, karakter non-ASCII.
L6. Tidak ada alert/confirm/prompt. Semua notifikasi = toast.
L7. esc() dipakai untuk semua innerHTML dinamis.
L8. Header: brand kiri, jam+IP tengah, menu kanan, burger <=900px.
L9. Bar bawah: desktop 3 zona grid; <=1000px kredit turun; <=640px satu baris, kredit hidden, label hidden, safe-area padding.
L10. TOC drawer dari kiri, render ulang, .cur pada slide aktif, spasi rapat.
L11. Cover & penutup class center (H+V). Cover memuat guru-line + badges sesuai topik.
L12. Kuis: [N] soal sesuai Section A (3-10), bobot LEVEL KUIS diterapkan, tiap level kognitif minimal 1 soal bila N >= 3, feedback, penjelasan, skor live, hasil + rank, reset berfungsi, fanfare di 100%.
L13. Typewriter: auto-run pertama, replay, stop saat pindah slide.
L14. Clock format WIB benar; IP fetch + fallback 3 detik.
L15. Copy button: ikon berganti fa-check, fallback execCommand ada.
L16. Screenshot mengunduh PNG nama berisi nomor slide, dengan onclone untuk memastikan background gelap.
L17. Fullscreen toggle + sinkron ikon.
L18. JSON-LD valid (tanpa koma menggantung), meta lengkap, CDN URL persis (FA 6.5.2, html2canvas 1.4.1).
L19. 100% teks UI bahasa Indonesia gaya terminal kapital.
L20. Tombol NEXT dan HELP memiliki animasi softGlow.
L21. Setiap kasus nyata menyebutkan tahun, nama, dan dampak terukur; kasus sulit dicari -> ikuti katup G3, TIDAK MENGARANG.
L22. Setiap analogi paralel secara logika dengan konsep teknis.
L23. Setiap mitigasi dimulai dengan kata kerja aksi; butir berulang antar slide ditulis ulang dengan konteks berbeda (G6).
L24. Output = SATU blok kode, tanpa teks di luar kode.
L25. Kelengkapan materi TERJAGA: banyaknya slide karena sub-bagian berbeda yang substantif - bukan duplikasi, bukan pemanjasan buatan.
L26. ADAPTASI TOPIK MENYELURUH: deskripsi 8 dimensi profil (F.7), label kartu demo (F.16), meta keywords (J.5), FASE di slide CP (F.5), dan educationalLevel JSON-LD (J.11) mengikuti TOPIK dan FASE aktual dari Section A - tidak terkunci tema keamanan siber.
L27. SEMUA FIELD SECTION A TERPAKAI: LEVEL KUIS mengatur bobot kuis (F.11/G9); PRASYARAT tampil sebagai baris tabel F.4 dan boleh dikaitkan di apersepsi F.8; TARGET KOMPETENSI menjadi dasar penurunan TP di F.6. Tidak ada field yang dideklarasikan lalu diabaikan.

================================================================
SECTION M - PROTOKOL OUTPUT FINAL
================================================================
- JANGAN memberikan penjelasan, sapaan, intro, atau outro di luar blok kode.
- HASILKAN HANYA SATU blok kode, lengkap dari <!DOCTYPE html> sampai </html>, siap save-as file .html.
- Jika terdeteksi output akan terpotong karena batas panjang respons, PRIORITASKAN menyelesaikan struktur sampai </html> dengan tetap mempertahankan seluruh fungsi - jangan berhenti SUKARELA di tengah tag/script.
- PROTOKOL LANJUTKAN: jika output terpotong oleh batas sistem dan pengguna mengirim "LANJUTKAN" (atau sejenisnya), lanjutkan PERSIS dari karakter terakhir yang tercetak - JANGAN mengulang bagian yang sudah keluar, JANGAN menulis ulang <style>/head/section yang sudah selesai, JANGAN menambah penjelasan pembuka. Blok lanjutan dianggap bagian dari output yang sama (pengguna akan menjahitnya menjadi satu file utuh).
- Pastikan semua konten substantif, faktual, dan dapat diverifikasi.
- Pastikan semua analogi relevan dengan konteks Indonesia.
- Pastikan semua kasus nyata dapat dilacak sumbernya (katup kuota: G3).
- Jangan membatasi jumlah slide demi ringkas: kelengkapan materi adalah prioritas.

MULAI GENERATE KODE HTML SEKARANG.