<?xml version="1.0" encoding="UTF-8" standalone="no"?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:blogger="http://schemas.google.com/blogger/2008" xmlns:gd="http://schemas.google.com/g/2005" xmlns:georss="http://www.georss.org/georss" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/" xmlns:thr="http://purl.org/syndication/thread/1.0" version="2.0"><channel><atom:id>tag:blogger.com,1999:blog-9000860041661554971</atom:id><lastBuildDate>Fri, 24 Jul 2026 00:47:57 +0000</lastBuildDate><category>herbal</category><category>download</category><category>ebook</category><category>islami</category><category>Forex</category><category>Marketiva</category><category>converter</category><category>Cinta</category><category>El-shirazy</category><category>Habiburahman</category><category>Investasi Menurut Hukum Islam</category><category>Kang Abik</category><category>Novel</category><category>Online</category><category>Trading</category><category>VALUTA</category><category>doa</category><category>#pemimpinmerdekabelajar #refleksimerdekabelajar</category><category>18 Cara Merawat Komputer/Laptop Agar Tetap Awet Dan Tidak Rusak</category><category>ASING</category><category>Apa</category><category>Ayat</category><category>BATASAN RIBA DALAM SYARIAH</category><category>Bank konvensional vs Bank Syariah</category><category>Basic</category><category>Batasan Mengambil Keuntungan dalam Islam</category><category>Bertasbih</category><category>Bertasbih II</category><category>CARI</category><category>COMMODITIES</category><category>Cara</category><category>Cara Daftar Google Adsense Indonesia untuk menghasilkan uang dari internet</category><category>Cara Download Video Di YouTube Tanpa Software</category><category>Cara Investasi yang benar dan aman</category><category>Cara Memasang Iklan Adsense di Tengah Posting Secara Otomatis</category><category>Cara Memperbaiki Harddisk Tidak Terbaca Komputer</category><category>Cara Mendapatkan Uang dari Internet  seo</category><category>Cara Mendapatkan Uang dari Internet Bagi Anda yang Suka Bermain Game</category><category>Cara Mendapatkan Uang dari Internet Jika Anda Memahami Teknik SEO</category><category>Cara Mendapatkan Uang dari Internet Jika Anda Memiliki Modal Memadai</category><category>Cara Mendapatkan Uang dari Internet Jika Anda Punya Waktu Memadai</category><category>Cara Mendapatkan Uang dari Internet dengan Membuat Program/Software</category><category>Cara Mendapatkan Uang dari Internet dengan Toko Online</category><category>Cara Meningkatkan lalu lintas Pengunjung Blog / Website Dengan Cepat</category><category>Cara Mudah Membuat Akun PayPal Tanpa Kartu Kredit</category><category>Cara atasi Bluetooth Laptop tidak bekerja</category><category>Cara mengetahui spesifikasi komputer di linux</category><category>Cara mudah Download Video Di YouTube</category><category>DI INTERNET</category><category>DOWNLOAD SOAL-SOAL LATIHAN PRAKTEK EXCEL</category><category>Deposit</category><category>Deposito Syariah</category><category>Download ebook islami bagian 5</category><category>Download internet download accelator IrfanView</category><category>Dunia</category><category>Edensor</category><category>FUND</category><category>Forex dalam hukum Islam</category><category>HOBI YANG MENGHASILKAN UANG</category><category>Hukum Investasi  Menurut Syariat Islam</category><category>Hukum Tansaksi Valas dan Spekulasi Kurs Mata Uang</category><category>INDEXES</category><category>INVESTASI SYARIAH MENGUNTUNGKAN DUNIA DAN AKHIRAT</category><category>Instrumen Pasar Modal Syariah</category><category>Investasi dalam pandangan islam (syariah)</category><category>Jenis Investasi Berdasarkan Syariah</category><category>Join</category><category>Jual Beli dalam Syariah</category><category>KAMUS ISTILAH FOREX</category><category>Kenapa Kamu Harus Punya PayPal</category><category>Kumpulan Perintah Linux di Terminal Lengkap</category><category>MARKETIVA AGEA MUDAHNYA BERTRANSAKSI FOREX</category><category>MATA UANG</category><category>MENGENAL SAHAM (1)</category><category>MENGENAL SAHAM (2)</category><category>MENGUMPULKAM MODAL</category><category>MENYIAPKAN DANA HAJI</category><category>MONEY GAME</category><category>Materi</category><category>Membuat blog jadi 3 kolom</category><category>Mengetahui Kapasitas Memory</category><category>Menghasilkan Uang dari Internet dengan ClixSense</category><category>Menghasilkan Uang dari Internet dengan WHAFF!</category><category>Modul penyelesain masalah akuntansi dengan excel</category><category>Musik Klasik Bagi Bayi 1</category><category>Musik Klasik Bagi Bayi 2</category><category>Musik Klasik Bagi Bayi 3</category><category>Nama</category><category>Novel Ayat-Ayat Cinta</category><category>PELATIHAN PEMANFAATAN TIK DAN LITERASASI DIGITAL DI SMK N 8 SOLO KERJASAMA PUSTEKOM KEMDIKBUD DAN KOGTIK</category><category>PRODUK SIMPANAN DI BANK</category><category>Pasar Modal Syariah</category><category>Penyebab Blue Screen Windows dan Solusi Cara Mengatasinya</category><category>Processor</category><category>REKSA DANA (1)</category><category>REKSA DANA (2)</category><category>Resiko dalam Investasi</category><category>SAW</category><category>SENI BACA ALQURAN</category><category>SIKLUS FINANSIAL ANDA</category><category>STRATEGI FOREX</category><category>Secara</category><category>Singkat</category><category>Soal</category><category>Spekulasi di Pasar Modal</category><category>Strategy</category><category>TEMPAT</category><category>Tantangan Investasi Syariah di Pasar Modal</category><category>Tata Cara Jual Beli dalam Islam</category><category>Tinjauan Syariat Terhadap Jual-Beli Kredit</category><category>Tips Jitu Trading</category><category>Tips Memperbaiki Komputer Yang Macet Hang</category><category>Tradding</category><category>Transaksi</category><category>Tutorial</category><category>Tutorial Cara</category><category>UANG</category><category>Witdrawl</category><category>ahmed</category><category>aisyah</category><category>akm</category><category>alam</category><category>alquran</category><category>andrea</category><category>andrea hirata</category><category>ansav</category><category>antivirus</category><category>aqiqah</category><category>audio</category><category>avi</category><category>bagian</category><category>bepergian</category><category>berhijab</category><category>berjilbab</category><category>dan</category><category>dan Hardisk pada PC</category><category>dan Hardisk pada PC Mengetahui Kapasitas Memory</category><category>dan Referensi Jawaban</category><category>deedat</category><category>dogma</category><category>download converter</category><category>download lagu Letto - Lethologica (2009)</category><category>download laskar pelangi karya andrea hirata</category><category>download modul praktek SPSS</category><category>download setup alqur'an in word</category><category>download soal-soal pilihan Ganda TKJ (teknik Jaringan dan Komputer)</category><category>engkau</category><category>fiqih</category><category>flv</category><category>hamil</category><category>hirata</category><category>ilmu</category><category>iman</category><category>injil</category><category>islam</category><category>jual beli kredit dalam islam</category><category>karpov</category><category>karya andrea hirata</category><category>keajaiban</category><category>kristen</category><category>kristus</category><category>laskar pelangi 3</category><category>laut</category><category>lintas</category><category>maryamah</category><category>matematika</category><category>mati</category><category>menghalangi</category><category>menghasilkan uang dari internet dengan ProBux</category><category>misteri</category><category>mpeg</category><category>muallaf</category><category>muhammmad</category><category>nabawiyah</category><category>naskah</category><category>nusantar</category><category>orientasi</category><category>pcmav</category><category>pemuda</category><category>pendeta</category><category>penduduk</category><category>perdebatan</category><category>perjalanan</category><category>quran</category><category>rahasia</category><category>sang pemimpi</category><category>sedang</category><category>sejarah</category><category>semesta</category><category>sirah</category><category>smadav</category><category>surga</category><category>swaramuslim</category><category>tawakal</category><category>wanita</category><category>wav</category><category>wma</category><title>INVESTASI DEMI HIDUP YANG LEBIH BAIK</title><description>"Berbuat BAIK adalah investasi"-
"Kesehatan adalah investasi"-
"Ilmu adalah investasi"--

"BerInvestasilah yang bisa Menjamin Kebahagian Kehidupan Dunia Akhirat"</description><link>http://kitab-investasi.blogspot.com/</link><managingEditor>noreply@blogger.com (Unknown)</managingEditor><generator>Blogger</generator><openSearch:totalResults>735</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><language>en-us</language><itunes:explicit>yes</itunes:explicit><copyright>Bussines for you</copyright><itunes:keywords>reksadana,saham,forex,Bank,Tabungan,Forex,Pulsa,Elektronik,HP,Bisnis,Bussine</itunes:keywords><itunes:summary>Islamic canon law investment for calm old age, happy, Very Rich, Barokah if died entered heaven Reksadana , Saham, Bank, Tabungan, Forex, Pulsa Elektronik</itunes:summary><itunes:subtitle>Investasi syariah</itunes:subtitle><itunes:category text="Business"><itunes:category text="Investing"/></itunes:category><itunes:author>abang_cool</itunes:author><itunes:owner><itunes:email>nof_rizal07@yahoo.co.id</itunes:email><itunes:name>abang_cool</itunes:name></itunes:owner><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-4520144294968549584</guid><pubDate>Thu, 23 Jul 2026 07:35:22 +0000</pubDate><atom:updated>2026-07-24T07:29:26.342+07:00</atom:updated><title>Asesmen Awal Bahasa Indonesia XI SMK</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
    &lt;title&gt;SMART • Asesmen Awal Bahasa Indonesia XI SMK&lt;/title&gt;
    &lt;style&gt;
        * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
        html, body {
            width: 100%;
            min-height: 100vh;
            background: #080c18;
            font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
            overflow: hidden;
            position: relative;
        }
        #game-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            max-width: 100%;
            max-height: 100%;
            background: radial-gradient(circle at 20% 30%, #0e1a2b, #050a14);
            box-shadow: 0 0 50px #00d4ff40, 0 0 120px #0055ff20;
            border: 1px solid #00d4ff60;
            display: flex;
            flex-direction: column;
            padding: 16px;
            overflow: hidden;
            z-index: 9999;
        }
        #header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            color: #a8e6ff;
            font-weight: bold;
            background: rgba(0, 20, 40, 0.6);
            backdrop-filter: blur(4px);
            border-radius: 60px;
            border: 1px solid #00d4ff80;
            margin-bottom: 10px;
            flex-shrink: 0;
        }
        #header span { background: #0a1a2e; padding: 4px 16px; border-radius: 40px; border: 1px solid #00d4ff; font-size: 0.9rem; letter-spacing: 1px; }
        #level-indicator { background: #0a1a2e; color: #7ad0ff; border-color: #00aaff; }
        #score-indicator { color: #facc15; border-color: #facc15; }
        #player-name-display { color: #7ad0ff; border-color: #00aaff; }
        #timer-display { background: #1a0a0a; color: #ff6b6b; border-color: #ff4444; min-width: 80px; text-align: center; }
        #game-canvas-container {
            flex: 1;
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            min-height: 200px;
            border: 1px solid #00d4ff40;
            box-shadow: inset 0 0 60px #0044aa30;
            cursor: crosshair;
        }
        canvas { display: block; width: 100%; height: 100%; background: transparent; cursor: crosshair; }
        #question-panel {
            background: rgba(0, 16, 32, 0.85);
            backdrop-filter: blur(8px);
            border: 1px solid #00d4ff;
            border-radius: 40px;
            padding: 14px 20px;
            margin-top: 10px;
            color: #e6f7ff;
            font-weight: 600;
            font-size: clamp(0.95rem, 2.6vw, 1.25rem);
            text-align: left;
            box-shadow: 0 0 40px #0066ff44;
            flex-shrink: 0;
            min-height: 76px;
            display: flex;
            align-items: center;
            line-height: 1.5;
        }
        #question-panel .q-number { color: #00d4ff; font-weight: 800; margin-right: 12px; white-space: nowrap; text-shadow: 0 0 12px #00aaff; }
        #question-panel .q-text { color: #ffffff; font-weight: 700; text-shadow: 0 0 8px rgba(0, 180, 255, 0.3); }
        #entry-screen {
            position: absolute; inset: 0; z-index: 20;
            background: rgba(0, 6, 16, 0.92); backdrop-filter: blur(12px);
            display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px;
            border-radius: 32px; padding: 20px;
        }
        #entry-screen h1 { font-size: 2.6rem; color: #7ad0ff; text-shadow: 0 0 40px #00aaff, 0 0 100px #0055ff; letter-spacing: 4px; font-weight: 800; }
        #entry-screen h2 { color: #7ad0ff; font-size: 1.4rem; margin-top: -20px; text-shadow: 0 0 20px #00aaff; font-weight: 400; letter-spacing: 2px; }
        #entry-screen input { background: #0a1a2e; border: 2px solid #00d4ff; border-radius: 60px; padding: 16px 24px; width: 80%; max-width: 340px; font-size: 1.3rem; color: #d6f0ff; text-align: center; outline: none; box-shadow: 0 0 40px #0066ff55; }
        #entry-screen input::placeholder { color: #4a7a9a; }
        .cyber-btn {
            background: linear-gradient(145deg, #0a2a4a, #06152a); border: 1px solid #00d4ff; color: #d6f0ff;
            padding: 16px 48px; border-radius: 60px; font-size: 1.6rem; font-weight: bold; letter-spacing: 3px;
            box-shadow: 0 0 40px #00aaffaa, inset 0 0 20px #00aaff44; transition: 0.2s; cursor: pointer; backdrop-filter: blur(4px);
        }
        .cyber-btn:active { transform: scale(0.93); box-shadow: 0 0 80px #00d4ff; }
        #congrats-overlay {
            position: absolute; inset: 0; z-index: 30;
            background: rgba(0, 4, 16, 0.85); backdrop-filter: blur(8px); border-radius: 32px;
            display: none; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center; color: #fff;
        }
        #congrats-overlay.show { display: flex; }
        .congrats-box {
            background: rgba(0, 16, 32, 0.8); border: 2px solid #00d4ff; border-radius: 60px; padding: 30px 20px;
            max-width: 480px; width: 100%; box-shadow: 0 0 80px #0066ff88, inset 0 0 30px #00aaff44; backdrop-filter: blur(8px); position: relative; z-index: 5;
        }
        .congrats-box .user-name { font-size: 1.4rem; color: #7ad0ff; margin-bottom: 8px; text-shadow: 0 0 20px #00aaff; }
        .congrats-box .user-name i { font-style: normal; background: rgba(0,180,255,0.15); padding: 2px 14px; border-radius: 30px; border: 1px solid #00aaff44; }
        .congrats-box h2 { font-size: 2.4rem; margin-bottom: 6px; color: #facc15; text-shadow: 0 0 30px #facc15aa; }
        .congrats-box .rank { font-size: 2rem; font-weight: 800; background: linear-gradient(45deg, #7ad0ff, #00aaff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 10px 0; }
        .congrats-box .final-score { font-size: 1.8rem; color: #7ad0ff; text-shadow: 0 0 20px #00aaff66; }
        .congrats-box .final-score span { color: #facc15; font-weight: 800; text-shadow: 0 0 20px #facc1566; }
        .congrats-box .message { font-size: 1.2rem; color: #c8e6ff; margin: 16px 0; background: rgba(0,180,255,0.1); padding: 10px 16px; border-radius: 30px; border: 1px solid #00aaff44; }
        .congrats-box .stats-grid { display: flex; justify-content: center; gap: 20px; margin: 12px 0; font-size: 0.9rem; color: #7ad0ff; }
        .congrats-box .stats-grid span { background: rgba(0,20,50,0.5); padding: 4px 14px; border-radius: 20px; border: 1px solid #00aaff33; }
        .congrats-box .footer-note { margin-top: 16px; font-size: 0.85rem; color: #5a8aaa; letter-spacing: 1px; border-top: 1px solid #00aaff33; padding-top: 14px; font-style: italic; }
        .small-btn { background: #0a2a4a; border: 1px solid #00d4ff; color: #d6f0ff; padding: 12px 30px; border-radius: 60px; font-size: 1.2rem; margin-top: 12px; cursor: pointer; transition: 0.2s; box-shadow: 0 0 20px #00aaff33; }
        .small-btn:active { transform: scale(0.92); }
        #speech-btn { background: rgba(0,180,255,0.15); border: 1px solid #00d4ff; color: #7ad0ff; padding: 8px 20px; border-radius: 40px; font-size: 0.9rem; cursor: pointer; margin-top: 6px; transition: 0.2s; box-shadow: 0 0 15px #00aaff22; }
        #speech-btn:hover { background: rgba(0,180,255,0.3); }
        #leaderboard {
            position: absolute; bottom: 10px; right: 16px;
            background: #0a1218cc; backdrop-filter: blur(8px); padding: 10px 18px; border-radius: 40px;
            border: 1px solid #00d4ff; color: #7ad0ff; font-size: 0.8rem; max-width: 200px; max-height: 120px; overflow-y: auto; z-index: 10;
        }
        #leaderboard div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #00d4ff40; padding: 2px 0; }
        .lb-score { color: #facc15; }
        /* Tombol Panduan - PASTI MUNCUL */
        #guide-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(0, 180, 255, 0.2);
            border: 1.5px solid #00d4ff;
            color: #7ad0ff;
            padding: 8px 18px;
            border-radius: 40px;
            font-size: 0.9rem;
            font-weight: bold;
            cursor: pointer;
            z-index: 15;
            transition: 0.3s;
            box-shadow: 0 0 20px #00aaff44;
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        #guide-btn:hover { background: rgba(0, 180, 255, 0.35); transform: scale(1.05); }
        #guide-btn:active { transform: scale(0.95); }
        /* Modal Panduan */
        #guide-modal {
            position: absolute; inset: 0; z-index: 40;
            background: rgba(0, 4, 16, 0.92); backdrop-filter: blur(10px);
            display: none; flex-direction: column; justify-content: center; align-items: center;
            border-radius: 32px; padding: 30px 20px;
            text-align: center; color: #fff;
        }
        #guide-modal.show { display: flex; }
        #guide-modal .guide-box {
            background: rgba(0, 16, 32, 0.9); border: 1px solid #00d4ff; border-radius: 40px;
            padding: 30px 25px; max-width: 500px; width: 100%;
            max-height: 80vh; overflow-y: auto;
            box-shadow: 0 0 60px #0066ff66;
        }
        #guide-modal h2 { color: #facc15; font-size: 2rem; margin-bottom: 16px; text-shadow: 0 0 30px #facc15aa; }
        #guide-modal p, #guide-modal li { color: #c8e6ff; font-size: 1rem; line-height: 1.6; text-align: left; }
        #guide-modal ul { padding-left: 20px; margin: 10px 0; }
        #guide-modal .close-guide {
            margin-top: 20px;
            background: #0a2a4a; border: 1px solid #00d4ff; color: #d6f0ff;
            padding: 10px 30px; border-radius: 60px; font-size: 1.1rem;
            cursor: pointer; transition: 0.2s;
        }
        #guide-modal .close-guide:hover { background: #0a3a5a; }
        .guide-icon { font-size: 1.5rem; margin-right: 8px; }
        @media (max-width: 500px) {
            #header span { font-size: 0.7rem; padding: 2px 10px; }
            #entry-screen h1 { font-size: 2rem; }
            #question-panel { font-size: clamp(0.8rem, 2.5vw, 1rem); padding: 10px 14px; min-height: 64px; }
            .congrats-box { padding: 20px 14px; }
            .congrats-box h2 { font-size: 1.8rem; }
            .congrats-box .rank { font-size: 1.5rem; }
            #leaderboard { max-width: 140px; font-size: 0.7rem; padding: 6px 12px; }
            #guide-btn { font-size: 0.7rem; padding: 5px 12px; top: 8px; right: 8px; }
            #guide-modal .guide-box { padding: 20px 15px; }
            #guide-modal h2 { font-size: 1.5rem; }
            #guide-modal p, #guide-modal li { font-size: 0.85rem; }
        }
        @media (max-width: 400px) {
            #header span { font-size: 0.6rem; padding: 2px 6px; }
            #timer-display { min-width: 60px; font-size: 0.7rem; }
            #guide-btn { font-size: 0.6rem; padding: 4px 10px; }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="game-wrapper"&gt;
    &lt;div id="header"&gt;
        &lt;span id="player-name-display"&gt;&#128218; User&lt;/span&gt;
        &lt;span id="level-indicator"&gt;⚡ Level 1&lt;/span&gt;
        &lt;span id="score-indicator"&gt;⭐ 0 / 100&lt;/span&gt;
        &lt;span id="timer-display"&gt;⏱️ 60:00&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="game-canvas-container"&gt;
        &lt;canvas id="gameCanvas" width="800" height="600"&gt;&lt;/canvas&gt;
        &lt;!-- TOMBOL PANDUAN - DITAMPILKAN DI ATAS CANVAS --&gt;
        &lt;button id="guide-btn"&gt;&#128214; Panduan&lt;/button&gt;
        &lt;div id="entry-screen"&gt;
            &lt;h1&gt;&#128218; SMART&lt;/h1&gt;
            &lt;h2&gt;Asesmen Awal Bahasa Indonesia • Kelas XI SMK&lt;/h2&gt;
            &lt;input id="playerNameInput" type="text" placeholder="Nama User" maxlength="20"&gt;
            &lt;button class="cyber-btn" id="startGameBtn"&gt;▶ MULAI&lt;/button&gt;
            &lt;div style="color:#4a7a9a; font-size:0.8rem;"&gt;Panah ke buku &amp; perpustakaan! • Waktu 60 menit&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="congrats-overlay"&gt;
            &lt;div class="congrats-box"&gt;
                &lt;div class="user-name"&gt;&#128218; &lt;i id="userNameDisplay"&gt;User&lt;/i&gt;&lt;/div&gt;
                &lt;h2&gt;&#127937; ASESMEN SELESAI&lt;/h2&gt;
                &lt;div class="rank" id="rankDisplay"&gt;Master Bahasa Indonesia&lt;/div&gt;
                &lt;div class="final-score"&gt;Skor Akhir: &lt;span id="finalScoreDisplay"&gt;0&lt;/span&gt; / 100&lt;/div&gt;
                &lt;div class="stats-grid"&gt;
                    &lt;span id="levelCompleteDisplay"&gt;Level: 5/5&lt;/span&gt;
                    &lt;span id="accuracyDisplay"&gt;Akurasi: 0%&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="message" id="personalMessage"&gt;Hebat, User!&lt;/div&gt;
                &lt;button id="speech-btn"&gt;&#128266; Dengarkan Laporan&lt;/button&gt;
                &lt;button class="small-btn" id="restartFromCongratsBtn"&gt;&#128260; Misi Ulang&lt;/button&gt;
                &lt;div class="footer-note"&gt;✦ Selamat Belajar &amp; Bermain ✦&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="leaderboard"&gt;
            &lt;div style="color:#facc15; font-weight:bold;"&gt;&#127942; LEADERBOARD&lt;/div&gt;
            &lt;div id="lbEntries"&gt;&lt;div style="color:#4a7a9a;"&gt;Belum ada data&lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Modal Panduan --&gt;
        &lt;div id="guide-modal"&gt;
            &lt;div class="guide-box"&gt;
                &lt;h2&gt;&#128214; Panduan Permainan&lt;/h2&gt;
                &lt;p&gt;&lt;strong&gt;&#127919; Tujuan:&lt;/strong&gt; Jawab 50 pertanyaan Bahasa Indonesia Kelas XI SMK dengan menembak target yang benar.&lt;/p&gt;
                &lt;hr style="border-color:#00aaff44; margin:12px 0;"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;strong&gt;&#128260; Cara Bermain:&lt;/strong&gt; Gerakkan kursor/tap untuk mengarahkan busur. &lt;strong&gt;Klik atau tap&lt;/strong&gt; pada target (buku/perpustakaan) yang kamu yakini sebagai jawaban benar.&lt;/li&gt;
                    &lt;li&gt;&lt;strong&gt;&#128218; Materi:&lt;/strong&gt; 5 Level mewakili 18 pertemuan: Teks Prosedur, Ceramah, Resensi, Latihan AKM, dan Rangkuman.&lt;/li&gt;
                    &lt;li&gt;&lt;strong&gt;⭐ Skor:&lt;/strong&gt; Setiap jawaban benar mendapat poin. Skor maksimal 100. Target bernilai 2 poin per jawaban benar.&lt;/li&gt;
                    &lt;li&gt;&lt;strong&gt;⏱️ Waktu:&lt;/strong&gt; Kamu memiliki waktu 60 menit untuk menyelesaikan semua level. Waktu akan berubah merah saat &lt; 5 menit.&lt;/li&gt;
                    &lt;li&gt;&lt;strong&gt;&#127942; Predikat:&lt;/strong&gt; Skor akhir menentukan predikat: Master, Expert, Pro, Learner, atau Perlu Belajar Lagi.&lt;/li&gt;
                    &lt;li&gt;&lt;strong&gt;&#128266; Suara:&lt;/strong&gt; Klik tombol "Dengarkan Laporan" di akhir permainan untuk mendengar hasil.&lt;/li&gt;
                &lt;/ul&gt;
                &lt;p style="margin-top:12px; font-style:italic; color:#7ad0ff;"&gt;✦ Selamat belajar &amp; semoga sukses! ✦&lt;/p&gt;
                &lt;button class="close-guide" id="closeGuideBtn"&gt;✔️ Saya Mengerti&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="question-panel"&gt;
        &lt;span class="q-number" id="qNumberDisplay"&gt;1.&lt;/span&gt;
        &lt;span class="q-text" id="qTextDisplay"&gt;Tekan mulai &amp; tembak buku pengetahuan&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    (function(){
        // ============================================================
        // BANK SOAL BAHASA INDONESIA KELAS XI SMK (18 Pertemuan)
        // ============================================================
        const LEVELS = 5;
        const QUESTIONS_PER_LEVEL = 10;
        const MAX_SCORE = 100;
        const TOTAL_TIME = 60 * 60;

        const QUESTION_BANK = [
            // ===== LEVEL 1: Teks Prosedur =====
            [
                { q: "Apa tujuan utama dari teks prosedur?", options: ["Memberikan petunjuk langkah-langkah", "Menghibur pembaca", "Menceritakan pengalaman", "Meyakinkan pembaca", "Menjelaskan definisi"], correct: 0 },
                { q: "Ciri kebahasaan yang dominan dalam teks prosedur adalah...", options: ["Kalimat imperatif", "Kalimat tanya", "Kalimat pasif", "Kalimat berita", "Kalimat seru"], correct: 0 },
                { q: "Konjungsi temporal yang sering digunakan dalam teks prosedur adalah...", options: ["Kemudian, setelah itu, lalu", "Namun, akan tetapi", "Oleh karena itu", "Selain itu", "Dengan demikian"], correct: 0 },
                { q: "Contoh kalimat deklaratif dalam teks prosedur adalah...", options: ["Langkah pertama adalah menyiapkan alat", "Siapkan alat-alat!", "Apakah kamu sudah siap?", "Ayo kita mulai!", "Jangan lupa berdoa"], correct: 0 },
                { q: "Kalimat persuasif dalam teks prosedur bertujuan...", options: ["Membujuk pembaca untuk melakukan", "Memberi perintah", "Menanyakan", "Menceritakan", "Menjelaskan"], correct: 0 },
                { q: "Kaidah kebahasaan teks prosedur meliputi...", options: ["Kalimat perintah, kata teknis, konjungsi temporal", "Kata ganti orang, kata sifat, antonim", "Kata kerja mental, kata kerja material", "Kalimat pasif, kalimat aktif", "Konjungsi kausalitas, kata tanya"], correct: 0 },
                { q: "Salah satu langkah menulis teks prosedur yang baik adalah...", options: ["Menentukan tujuan dan audiens", "Mengabaikan urutan", "Menggunakan bahasa asing", "Membuat panjang lebar", "Menghilangkan langkah"], correct: 0 },
                { q: "Teks prosedur yang baik harus disusun secara...", options: ["Logis dan sistematis", "Acak dan bebas", "Emosional", "Panjang lebar", "Subjektif"], correct: 0 },
                { q: "Contoh kata teknis dalam teks prosedur memasak adalah...", options: ["Tumis, rebus, panggang", "Indah, cantik, bagus", "Cepat, lambat, sedang", "Panas, dingin, hangat", "Manis, asin, asam"], correct: 0 },
                { q: "Apa yang dimaksud dengan evaluasi informasi dalam teks prosedur?", options: ["Menilai kebenaran dan kegunaan informasi", "Menghafal isi teks", "Menceritakan kembali", "Mengabaikan detail", "Mengubah isi teks"], correct: 0 }
            ],
            // ===== LEVEL 2: Teks Ceramah =====
            [
                { q: "Tujuan utama teks ceramah adalah...", options: ["Memberi nasihat atau arahan", "Menghibur pendengar", "Menceritakan kisah", "Menjelaskan prosedur", "Meyakinkan dengan data"], correct: 0 },
                { q: "Gagasan pokok dalam teks ceramah biasanya terletak di...", options: ["Awal paragraf", "Akhir paragraf", "Tengah paragraf", "Semua paragraf", "Tidak tentu"], correct: 0 },
                { q: "Kata ganti orang yang sering digunakan dalam ceramah adalah...", options: ["Kita, kami, anda", "Saya, aku", "Mereka", "Kalian", "Beliau"], correct: 0 },
                { q: "Kata teknis dalam teks ceramah keagamaan contohnya...", options: ["Taqwa, ikhlas, sabar", "Masak, goreng, rebus", "Lari, jalan, duduk", "Baca, tulis, hitung", "Senyum, sapa, salam"], correct: 0 },
                { q: "Kata persuasif dalam ceramah bertujuan...", options: ["Membujuk pendengar", "Memberi perintah", "Menjelaskan fakta", "Menceritakan kejadian", "Menanyakan pendapat"], correct: 0 },
                { q: "Ciri kebahasaan teks ceramah meliputi...", options: ["Kata ganti orang, kata teknis, kata persuasif", "Kalimat imperatif, konjungsi temporal", "Kata benda, kata sifat", "Kalimat tanya, kata seru", "Kata kerja mental"], correct: 0 },
                { q: "Saat menyajikan ceramah, intonasi yang baik adalah...", options: ["Jelas dan bervariasi", "Monoton", "Sangat cepat", "Sangat lambat", "Berteriak"], correct: 0 },
                { q: "Membandingkan isi teks ceramah dengan teks lain bertujuan...", options: ["Menemukan persamaan dan perbedaan", "Menghafal isi", "Mengubah isi", "Mengabaikan teks lain", "Meniru gaya bahasa"], correct: 0 },
                { q: "Evaluasi informasi dalam teks ceramah berarti...", options: ["Menilai keakuratan dan relevansi informasi", "Menghafal semua isi", "Menceritakan kembali", "Mengabaikan sumber", "Mengubah topik"], correct: 0 },
                { q: "Sikap yang harus dimiliki saat menyampaikan ceramah adalah...", options: ["Santun dan percaya diri", "Marah dan keras", "Acuh tak acuh", "Malu dan ragu", "Bercanda berlebihan"], correct: 0 }
            ],
            // ===== LEVEL 3: Teks Resensi =====
            [
                { q: "Teks resensi bertujuan untuk...", options: ["Memberi penilaian terhadap karya", "Menghibur pembaca", "Menceritakan kisah", "Memberi petunjuk", "Menyampaikan berita"], correct: 0 },
                { q: "Struktur teks resensi yang benar adalah...", options: ["Identitas, orientasi, sinopsis, analisis, evaluasi", "Pendahuluan, isi, penutup", "Abstrak, pendahuluan, pembahasan, kesimpulan", "Tesis, argumentasi, penegasan", "Orientasi, komplikasi, resolusi"], correct: 0 },
                { q: "Kaidah kebahasaan teks resensi yang dominan adalah...", options: ["Kata kerja mental, kata sifat penilaian", "Kalimat imperatif", "Konjungsi temporal", "Kata ganti orang", "Kata teknis prosedur"], correct: 0 },
                { q: "Contoh kata sifat penilaian dalam resensi adalah...", options: ["Menarik, membosankan, inspiratif", "Cepat, lambat, sedang", "Besar, kecil, panjang", "Manis, asin, asam", "Panas, dingin, hangat"], correct: 0 },
                { q: "Sinopsis dalam resensi berisi...", options: ["Ringkasan cerita secara singkat", "Analisis mendalam", "Kelebihan buku", "Kekurangan buku", "Kesimpulan akhir"], correct: 0 },
                { q: "Menganalisis kaidah kebahasaan resensi berarti...", options: ["Menelaah penggunaan bahasa", "Menghafal isi", "Mengubah isi", "Membandingkan buku", "Menceritakan kembali"], correct: 0 },
                { q: "Teks resensi yang baik harus ditulis secara...", options: ["Logis dan sistematis", "Acak dan bebas", "Emosional", "Panjang lebar", "Subjektif"], correct: 0 },
                { q: "Saat mempresentasikan resensi, hal yang perlu diperhatikan adalah...", options: ["Kejelasan dan logika penyampaian", "Kecepatan bicara", "Penggunaan bahasa asing", "Penampilan fisik", "Durasi yang sangat panjang"], correct: 0 },
                { q: "Membandingkan teks resensi dengan teks lain bertujuan...", options: ["Menemukan kelebihan dan kekurangan", "Menghafal isi", "Mengubah isi", "Mengabaikan teks lain", "Meniru gaya bahasa"], correct: 0 },
                { q: "Evaluasi struktur teks resensi meliputi...", options: ["Kelengkapan bagian-bagian resensi", "Jumlah halaman", "Penerbit buku", "Harga buku", "Tahun terbit"], correct: 0 }
            ],
            // ===== LEVEL 4: Latihan Soal &amp; AKM =====
            [
                { q: "Soal AKM (Asesmen Kompetensi Minimum) biasanya mengukur...", options: ["Kemampuan bernalar dan literasi", "Penghafalan materi", "Kecepatan menulis", "Keterampilan berbicara", "Kemampuan menggambar"], correct: 0 },
                { q: "Dalam soal AKM teks prosedur, yang sering diuji adalah...", options: ["Pemahaman langkah-langkah dan tujuan", "Menghafal teks", "Mengubah teks", "Menulis ulang", "Menyanyi teks"], correct: 0 },
                { q: "Latihan soal teks ceramah bertujuan untuk...", options: ["Mengidentifikasi kelemahan pemahaman", "Menghafal isi", "Mengubah ceramah", "Menulis ceramah baru", "Membandingkan ceramah"], correct: 0 },
                { q: "Ulangan harian petunjuk kerja bertujuan...", options: ["Mengevaluasi kompetensi siswa", "Menghafal materi", "Membuat proyek", "Presentasi", "Diskusi"], correct: 0 },
                { q: "Soal tipe AKM biasanya berbentuk...", options: ["Pilihan ganda kompleks dan menjodohkan", "Pilihan ganda biasa", "Essay", "Uraian", "Benar-salah"], correct: 0 },
                { q: "Mengidentifikasi kelemahan pemahaman dilakukan melalui...", options: ["Analisis kesalahan jawaban", "Menghafal materi", "Membaca ulang", "Bertanya pada teman", "Mengubah jawaban"], correct: 0 },
                { q: "Ulangan harian resensi bertujuan...", options: ["Mengevaluasi kemampuan menilai buku", "Menghafal isi buku", "Membuat buku baru", "Membandingkan buku", "Menjual buku"], correct: 0 },
                { q: "Soal AKM menuntut siswa untuk...", options: ["Bernalar dan berpikir kritis", "Menghafal jawaban", "Membaca cepat", "Menulis panjang", "Menghafal istilah"], correct: 0 },
                { q: "Salah satu manfaat latihan soal AKM adalah...", options: ["Mengenal tipe soal dan meningkatkan nalar", "Menghafal materi", "Membuat soal baru", "Menilai teman", "Mengubah kurikulum"], correct: 0 },
                { q: "Evaluasi pencapaian kompetensi pada ulangan harian bertujuan...", options: ["Mengukur pemahaman siswa", "Menghafal materi", "Membuat proyek", "Presentasi", "Diskusi"], correct: 0 }
            ],
            // ===== LEVEL 5: Rangkuman =====
            [
                { q: "Rangkuman materi petunjuk kerja mencakup...", options: ["Prosedur, ceramah, dan resensi", "Puisi dan drama", "Novel dan cerpen", "Surat dan iklan", "Laporan dan berita"], correct: 0 },
                { q: "Persamaan teks prosedur dan teks ceramah adalah...", options: ["Sama-sama memberikan arahan", "Sama-sama menghibur", "Sama-sama bercerita", "Sama-sama menilai", "Sama-sama berita"], correct: 0 },
                { q: "Perbedaan teks resensi dengan teks prosedur adalah...", options: ["Resensi menilai, prosedur memberi petunjuk", "Resensi bercerita, prosedur menghibur", "Resensi berita, prosedur cerita", "Resensi puisi, prosedur drama", "Resensi surat, prosedur laporan"], correct: 0 },
                { q: "Kaidah kebahasaan yang digunakan dalam teks resensi adalah...", options: ["Kata kerja mental dan kata sifat penilaian", "Kalimat imperatif", "Konjungsi temporal", "Kata ganti orang", "Kata teknis prosedur"], correct: 0 },
                { q: "Menyajikan teks prosedur secara lisan memerlukan...", options: ["Kejelasan dan urutan yang logis", "Kecepatan bicara", "Penggunaan bahasa asing", "Penampilan menarik", "Durasi panjang"], correct: 0 },
                { q: "Menyajikan teks ceramah harus disertai...", options: ["Sikap santun dan intonasi yang tepat", "Suara keras", "Gerakan berlebihan", "Membaca teks", "Bercanda"], correct: 0 },
                { q: "Mempresentasikan resensi harus dilakukan secara...", options: ["Logis dan kreatif", "Acak dan bebas", "Emosional", "Panjang lebar", "Subjektif"], correct: 0 },
                { q: "Teks prosedur, ceramah, dan resensi termasuk jenis teks...", options: ["Fungsional (nonfiksi)", "Fiksi", "Puisi", "Drama", "Epik"], correct: 0 },
                { q: "Keterampilan menyimak teks ceramah bertujuan...", options: ["Memahami isi dan maksud pembicara", "Menghafal isi", "Mengubah isi", "Menulis ulang", "Membandingkan"], correct: 0 },
                { q: "Tujuan akhir dari pembelajaran teks prosedur, ceramah, dan resensi adalah...", options: ["Meningkatkan literasi dan keterampilan berbahasa", "Menghafal semua teks", "Membuat teks panjang", "Menjadi penulis", "Menjadi pembicara"], correct: 0 }
            ]
        ];

        // ===== STATE =====
        let userName = "User";
        let currentLevel = 0;
        let currentQuestionIndex = 0;
        let score = 0;
        let totalAttempts = 0;
        let correctAttempts = 0;
        let questionsForLevel = [];
        let targets = [];
        let gameActive = false;
        let levelCompleted = false;
        let animationFrame = null;
        let canvas, ctx;
        let W, H;
        let leaderboardData = [];
        let particles = [];
        let fireworks = [];
        let isCelebrating = false;
        let finalScore = 0, finalRank = "", finalMessage = "", finalAccuracy = 0;

        let timeRemaining = TOTAL_TIME;
        let timerInterval = null;
        let timerRunning = false;

        let archer = { x: 50, y: 0 };
        let arrow = { x: 0, y: 0, vx: 0, vy: 0, active: false, angle: 0, targetX: 0, targetY: 0, speed: 10, homing: false };
        let arrowCooldown = 0;
        let mouseX = 0, mouseY = 0;

        // DOM
        const canvasEl = document.getElementById('gameCanvas');
        const questionPanel = document.getElementById('question-panel');
        const qNumberDisplay = document.getElementById('qNumberDisplay');
        const qTextDisplay = document.getElementById('qTextDisplay');
        const levelIndicator = document.getElementById('level-indicator');
        const scoreIndicator = document.getElementById('score-indicator');
        const playerNameDisplay = document.getElementById('player-name-display');
        const timerDisplay = document.getElementById('timer-display');
        const entryScreen = document.getElementById('entry-screen');
        const congratsOverlay = document.getElementById('congrats-overlay');
        const finalScoreSpan = document.getElementById('finalScoreDisplay');
        const rankDisplay = document.getElementById('rankDisplay');
        const personalMessage = document.getElementById('personalMessage');
        const userNameDisplay = document.getElementById('userNameDisplay');
        const levelCompleteDisplay = document.getElementById('levelCompleteDisplay');
        const accuracyDisplay = document.getElementById('accuracyDisplay');
        const lbEntries = document.getElementById('lbEntries');
        const speechBtn = document.getElementById('speech-btn');
        const guideBtn = document.getElementById('guide-btn');
        const guideModal = document.getElementById('guide-modal');
        const closeGuideBtn = document.getElementById('closeGuideBtn');

        canvas = canvasEl; ctx = canvas.getContext('2d');

        // ===== PANDUAN =====
        guideBtn.addEventListener('click', () =&gt; { guideModal.classList.add('show'); });
        closeGuideBtn.addEventListener('click', () =&gt; { guideModal.classList.remove('show'); });
        guideModal.addEventListener('click', (e) =&gt; { if (e.target === guideModal) guideModal.classList.remove('show'); });

        let speechSynth = window.speechSynthesis;
        let speechUtterance = null;
        function speakScoreboard(score, rank, message, accuracy) {
            if (!window.speechSynthesis) return;
            if (speechSynth.speaking) speechSynth.cancel();
            const text = `Laporan untuk User ${userName}. Skor ${score} dari 100. Predikat ${rank}. Akurasi ${accuracy} persen. ${message}`;
            speechUtterance = new SpeechSynthesisUtterance(text);
            speechUtterance.lang = 'id-ID'; speechUtterance.rate = 0.85; speechUtterance.pitch = 1;
            speechSynth.speak(speechUtterance);
        }

        function shuffleArray(arr) { for (let i=arr.length-1; i&gt;0; i--) { const j=Math.floor(Math.random()*(i+1)); [arr[i],arr[j]]=[arr[j],arr[i]]; } return arr; }

        function loadLeaderboard() {
            try { const data = localStorage.getItem('smart_bindo_leaderboard'); leaderboardData = data ? JSON.parse(data) : []; } catch(e){ leaderboardData = []; }
            renderLeaderboard();
        }
        function saveLeaderboard() { localStorage.setItem('smart_bindo_leaderboard', JSON.stringify(leaderboardData)); renderLeaderboard(); }
        function renderLeaderboard() {
            if (!lbEntries) return;
            if (leaderboardData.length === 0) { lbEntries.innerHTML = '&lt;div style="color:#4a7a9a;"&gt;Belum ada data&lt;/div&gt;'; return; }
            const sorted = [...leaderboardData].sort((a,b) =&gt; b.score - a.score).slice(0,5);
            lbEntries.innerHTML = sorted.map(p =&gt; `&lt;div&gt;&lt;span&gt;${p.name}&lt;/span&gt;&lt;span class="lb-score"&gt;${p.score}&lt;/span&gt;&lt;/div&gt;`).join('');
        }

        function resizeCanvas() {
            const container = document.getElementById('game-canvas-container');
            const rect = container.getBoundingClientRect();
            canvas.width = rect.width || 800; canvas.height = rect.height || 600;
            W = canvas.width; H = canvas.height;
            archer.y = H - 70; archer.x = Math.min(archer.x, W-30);
            if (gameActive &amp;&amp; questionsForLevel.length) { generateTargets(); if (!levelCompleted) showCurrentQuestion(); }
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        function loadLevel(levelIdx) {
            currentLevel = levelIdx; currentQuestionIndex = 0; levelCompleted = false;
            const raw = QUESTION_BANK[levelIdx] || QUESTION_BANK[0];
            questionsForLevel = raw.map(item =&gt; {
                const shuffledOptions = shuffleArray([...item.options]);
                const correctIndex = shuffledOptions.indexOf(item.options[item.correct]);
                return { q: item.q, options: shuffledOptions, correct: correctIndex };
            });
            questionsForLevel = shuffleArray(questionsForLevel);
            generateTargets();
            updateUI();
            if (gameActive) showCurrentQuestion();
        }

        function generateTargets() {
            targets = [];
            if (!questionsForLevel.length) return;
            const total = questionsForLevel.length;
            const cols = Math.min(4, total, Math.floor(W / 130) + 1);
            const rows = Math.ceil(total / cols);
            const spacingX = (W - 80) / (cols + 1);
            const spacingY = (H - 140) / (rows + 2);
            const size = Math.min(spacingX * 0.40, spacingY * 0.45, 62);
            const baseY = spacingY * 0.6 + 20;
            const icons = ['&#128218;', '&#128214;', '&#128213;', '&#128215;', '&#128216;', '&#128217;', '&#128211;', '&#128212;', '&#128210;', '&#128240;', '&#128278;', '&#127963;️'];
            for (let i = 0; i &lt; total; i++) {
                const col = i % cols, row = Math.floor(i / cols);
                let x = 60 + spacingX * (col + 1) + (Math.random() - 0.5) * 30;
                let y = baseY + spacingY * row + (Math.random() - 0.5) * 20;
                x = Math.min(Math.max(x, size+20), W - size - 10);
                y = Math.min(Math.max(y, size+20), H - size - 80);
                const vx = (Math.random() - 0.5) * 0.6, vy = (Math.random() - 0.5) * 0.6;
                targets.push({
                    id: i, x, y, size,
                    vx, vy,
                    icon: icons[i % icons.length],
                    label: questionsForLevel[i]?.options[0] || '?',
                    fullText: questionsForLevel[i]?.options[0] || '?',
                    answered: false,
                    optionIndex: 0
                });
            }
        }

        function showCurrentQuestion() {
            if (!questionsForLevel.length || currentQuestionIndex &gt;= questionsForLevel.length) {
                levelCompleted = true;
                if (currentLevel + 1 &lt; LEVELS) { currentLevel++; loadLevel(currentLevel); updateUI(); }
                else { endGame(); }
                return;
            }
            const qData = questionsForLevel[currentQuestionIndex];
            if (!qData) return;
            qNumberDisplay.textContent = `${currentQuestionIndex + 1}.`;
            qTextDisplay.textContent = qData.q;
            targets.forEach((t, idx) =&gt; {
                const optIdx = idx % qData.options.length;
                t.optionIndex = optIdx;
                t.fullText = qData.options[optIdx] || '?';
                t.label = t.fullText;
                t.answered = false;
            });
        }

        function shootArrow(targetX, targetY) {
            if (!gameActive || levelCompleted) return;
            if (arrow.active || arrowCooldown &gt; 0) return;
            const dx = targetX - archer.x, dy = targetY - archer.y;
            if (Math.sqrt(dx*dx + dy*dy) &lt; 30) return;
            arrow.active = true;
            arrow.x = archer.x + 20; arrow.y = archer.y - 10;
            arrow.targetX = targetX; arrow.targetY = targetY;
            arrow.homing = true; arrow.speed = 10;
            const angle = Math.atan2(dy, dx);
            arrow.vx = Math.cos(angle) * arrow.speed;
            arrow.vy = Math.sin(angle) * arrow.speed;
            arrow.angle = angle;
            arrowCooldown = 12;
        }

        function updateArrow() {
            if (!arrow.active) return;
            if (arrow.homing) {
                const dx = arrow.targetX - arrow.x, dy = arrow.targetY - arrow.y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                if (dist &gt; 5) {
                    const targetAngle = Math.atan2(dy, dx);
                    let angleDiff = targetAngle - arrow.angle;
                    while (angleDiff &gt; Math.PI) angleDiff -= 2*Math.PI;
                    while (angleDiff &lt; -Math.PI) angleDiff += 2*Math.PI;
                    arrow.angle += angleDiff * 0.1;
                    arrow.vx = Math.cos(arrow.angle) * arrow.speed;
                    arrow.vy = Math.sin(arrow.angle) * arrow.speed;
                }
            }
            arrow.x += arrow.vx; arrow.y += arrow.vy;
            for (let t of targets) {
                if (t.answered) continue;
                const dx = arrow.x - t.x, dy = arrow.y - t.y;
                if (dx*dx + dy*dy &lt; (t.size + 8) * (t.size + 8)) {
                    arrow.active = false;
                    t.answered = true;
                    totalAttempts++;
                    const qData = questionsForLevel[currentQuestionIndex];
                    const selectedOptIdx = t.optionIndex % qData.options.length;
                    const isCorrect = (selectedOptIdx === qData.correct);
                    if (isCorrect) {
                        const scorePerQuestion = MAX_SCORE / (LEVELS * QUESTIONS_PER_LEVEL);
                        score = Math.min(MAX_SCORE, score + scorePerQuestion);
                        correctAttempts++;
                        spawnExplosion(t.x, t.y, '#00ffaa', 25);
                    } else {
                        spawnExplosion(t.x, t.y, '#ff4444', 18);
                    }
                    currentQuestionIndex++;
                    if (currentQuestionIndex &gt;= questionsForLevel.length) {
                        if (currentLevel + 1 &lt; LEVELS) showLevelCongrats();
                        else { endGame(); }
                    } else showCurrentQuestion();
                    updateUI();
                    return;
                }
            }
            if (arrow.x &gt; W || arrow.x &lt; 0 || arrow.y &gt; H || arrow.y &lt; 0) arrow.active = false;
        }

        function spawnExplosion(x, y, color, count) {
            for (let i=0; i&lt;count; i++) {
                const angle = Math.random() * 2 * Math.PI, speed = Math.random() * 4 + 1;
                particles.push({ x, y, vx: Math.cos(angle)*speed, vy: Math.sin(angle)*speed, life: 1, decay: Math.random()*0.025+0.015, size: Math.random()*5+2, color });
            }
        }

        function showLevelCongrats() {
            qNumberDisplay.textContent = '⚡';
            qTextDisplay.textContent = `Level ${currentLevel+1} Selesai! Skor: ${Math.round(score)} / ${MAX_SCORE}`;
            for (let i=0; i&lt;25; i++) spawnExplosion(Math.random()*W, Math.random()*H, '#00ddff', 6);
            setTimeout(() =&gt; { if (currentLevel + 1 &lt; LEVELS) { currentLevel++; loadLevel(currentLevel); updateUI(); } else endGame(); }, 1200);
        }

        function getRank(scr) {
            const pct = (scr/MAX_SCORE)*100;
            if (pct &gt;= 90) return "Master Bahasa Indonesia";
            else if (pct &gt;= 75) return "Expert Bahasa Indonesia";
            else if (pct &gt;= 60) return "Pro Bahasa Indonesia";
            else if (pct &gt;= 40) return "Learner Bahasa Indonesia";
            else return "Perlu Belajar Lagi";
        }

        function getMessage(scr) {
            const pct = (scr/MAX_SCORE)*100;
            if (pct &gt;= 90) return "Luar biasa! Anda Master Bahasa Indonesia sejati!";
            else if (pct &gt;= 75) return "Hebat! Pemahaman Bahasa Indonesia Anda solid!";
            else if (pct &gt;= 60) return "Bagus! Terus asah kemampuan literasi Anda!";
            else if (pct &gt;= 40) return "Mulai konsisten, raih predikat lebih tinggi!";
            else return "Perlu belajar lagi, kuasai dasar-dasar Bahasa Indonesia!";
        }

        function endGame() {
            gameActive = false;
            if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }
            timerRunning = false;
            
            finalScore = Math.round(score);
            finalRank = getRank(finalScore);
            finalMessage = getMessage(finalScore);
            finalAccuracy = totalAttempts &gt; 0 ? Math.round((correctAttempts / totalAttempts) * 100) : 0;
            
            congratsOverlay.classList.add('show');
            finalScoreSpan.textContent = finalScore;
            rankDisplay.textContent = finalRank;
            personalMessage.textContent = finalMessage;
            userNameDisplay.textContent = userName;
            levelCompleteDisplay.textContent = `Level: ${LEVELS}/${LEVELS}`;
            accuracyDisplay.textContent = `Akurasi: ${finalAccuracy}%`;
            
            leaderboardData.push({ name: userName, score: finalScore });
            saveLeaderboard();
            isCelebrating = true;
            for (let i=0; i&lt;80; i++) setTimeout(() =&gt; spawnFirework(Math.random()*W, Math.random()*H*0.7 + 50), i*65);
            for (let i=0; i&lt;45; i++) setTimeout(() =&gt; spawnFirework(Math.random()*W, Math.random()*H*0.5 + 30), 3800 + i*85);
            setTimeout(() =&gt; speakScoreboard(finalScore, finalRank, finalMessage, finalAccuracy), 1600);
        }

        function spawnFirework(x, y) {
            const colors = ['#ff4444','#ffdd44','#44ff44','#44ddff','#ff44ff','#ffffff','#ff8800','#00ffaa','#a855f7'];
            for (let i=0; i&lt;55; i++) {
                const angle = Math.random()*2*Math.PI, speed = Math.random()*7+2, color = colors[Math.floor(Math.random()*colors.length)];
                fireworks.push({ x, y, vx: Math.cos(angle)*speed, vy: Math.sin(angle)*speed-1, life:1, decay: Math.random()*0.015+0.006, size: Math.random()*5+2, color, isConfetti: false });
            }
            for (let i=0; i&lt;30; i++) {
                const angle = Math.random()*2*Math.PI, speed = Math.random()*4+1, color = colors[Math.floor(Math.random()*colors.length)];
                fireworks.push({ x, y, vx: Math.cos(angle)*speed+(Math.random()-0.5)*2, vy: Math.sin(angle)*speed-2.5, life:1, decay: Math.random()*0.01+0.004, size: Math.random()*9+4, color, isConfetti: true });
            }
        }

        function updateUI() {
            levelIndicator.textContent = `⚡ Level ${currentLevel+1}`;
            scoreIndicator.textContent = `⭐ ${Math.round(score)} / ${MAX_SCORE}`;
            playerNameDisplay.textContent = `&#128218; ${userName}`;
        }

        function startTimer() {
            if (timerRunning) return;
            timerRunning = true;
            timerInterval = setInterval(() =&gt; {
                timeRemaining--;
                updateTimerDisplay();
                if (timeRemaining &lt;= 0) {
                    clearInterval(timerInterval);
                    timerInterval = null;
                    timerRunning = false;
                    if (gameActive) { endGame(); }
                }
            }, 1000);
        }

        function updateTimerDisplay() {
            const mins = Math.floor(timeRemaining / 60);
            const secs = timeRemaining % 60;
            timerDisplay.textContent = `⏱️ ${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
            if (timeRemaining &lt; 300) {
                timerDisplay.style.color = '#ff4444';
                timerDisplay.style.borderColor = '#ff4444';
            } else {
                timerDisplay.style.color = '#ff6b6b';
                timerDisplay.style.borderColor = '#ff4444';
            }
        }

        function drawArcher() {
            const ax = archer.x, ay = archer.y;
            ctx.shadowBlur = 20; ctx.shadowColor = '#00aaff66';
            ctx.fillStyle = '#1a3a5a'; ctx.fillRect(ax-8, ay+10, 6, 14); ctx.fillRect(ax+2, ay+10, 6, 14);
            ctx.fillStyle = '#2a5a7a'; ctx.beginPath(); ctx.ellipse(ax, ay-4, 16, 22, 0, 0, Math.PI*2); ctx.fill();
            ctx.fillStyle = '#f0d8b0'; ctx.beginPath(); ctx.arc(ax, ay-28, 14, 0, Math.PI*2); ctx.fill();
            ctx.fillStyle = '#4a3a2a'; ctx.beginPath(); ctx.arc(ax, ay-34, 14, Math.PI, 2*Math.PI); ctx.fill();
            const bowAngle = Math.atan2(mouseY - ay, mouseX - ax);
            const bowLen = 38;
            ctx.strokeStyle = '#c8a060'; ctx.lineWidth = 3; ctx.shadowBlur = 15; ctx.shadowColor = '#ffdd44aa';
            ctx.beginPath(); ctx.arc(ax + 16, ay - 4, bowLen, bowAngle - 0.7, bowAngle + 0.7); ctx.stroke();
            ctx.strokeStyle = '#aaaacc'; ctx.lineWidth = 1.5;
            const e1 = bowAngle - 0.7, e2 = bowAngle + 0.7;
            const ex1 = ax+16+Math.cos(e1)*bowLen, ey1 = ay-4+Math.sin(e1)*bowLen;
            const ex2 = ax+16+Math.cos(e2)*bowLen, ey2 = ay-4+Math.sin(e2)*bowLen;
            ctx.beginPath(); ctx.moveTo(ex1, ey1); ctx.lineTo(ax+16+Math.cos(bowAngle)*10, ay-4+Math.sin(bowAngle)*10); ctx.lineTo(ex2, ey2); ctx.stroke();
            ctx.shadowBlur = 0;
            if (arrow.active) {
                ctx.save(); ctx.translate(arrow.x, arrow.y); ctx.rotate(arrow.angle);
                ctx.shadowBlur = 20; ctx.shadowColor = '#00ffaa88';
                ctx.strokeStyle = '#ddaa88'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(25,0); ctx.stroke();
                ctx.fillStyle = '#ffdd44'; ctx.shadowColor = '#ffdd44aa'; ctx.beginPath(); ctx.moveTo(28,0); ctx.lineTo(20,-5); ctx.lineTo(20,5); ctx.closePath(); ctx.fill();
                ctx.fillStyle = '#ff6666'; ctx.shadowColor = '#ff666688'; ctx.beginPath(); ctx.moveTo(-2,0); ctx.lineTo(-8,-6); ctx.lineTo(-8,6); ctx.closePath(); ctx.fill();
                ctx.restore(); ctx.shadowBlur = 0;
            }
        }

        function draw() {
            ctx.clearRect(0, 0, W, H);
            ctx.fillStyle = 'rgba(0, 10, 30, 0.3)'; ctx.fillRect(0, 0, W, H);
            ctx.strokeStyle = '#00aaff20'; ctx.lineWidth = 0.5;
            for (let i=0; i&lt;W; i+=30) { ctx.beginPath(); ctx.moveTo(i,0); ctx.lineTo(i,H); ctx.stroke(); }
            for (let i=0; i&lt;H; i+=30) { ctx.beginPath(); ctx.moveTo(0,i); ctx.lineTo(W,i); ctx.stroke(); }
            ctx.strokeStyle = '#00d4ff15'; ctx.lineWidth = 1;
            for (let i=0; i&lt;W; i+=80) { ctx.beginPath(); ctx.moveTo(i,0); ctx.lineTo(i+40,H); ctx.stroke(); }
            for (let i=0; i&lt;30; i++) {
                ctx.fillStyle = `rgba(0, 180, 255, ${Math.random()*0.15+0.03})`;
                ctx.font = '12px monospace'; ctx.fillText(Math.random()&gt;0.5?'1':'0', Math.random()*W, Math.random()*H);
            }
            ctx.fillStyle = '#00aaff10'; ctx.font = '28px sans-serif';
            ctx.fillText('&#128218;', 20, 40); ctx.fillText('&#128214;', W-50, 50); ctx.fillText('&#127963;️', W-70, H-30); ctx.fillText('&#128213;', 30, H-20);

            targets.forEach(t =&gt; {
                if (t.answered) return;
                ctx.shadowColor = '#00aaffaa'; ctx.shadowBlur = 30;
                const grad = ctx.createRadialGradient(t.x-5, t.y-5, 2, t.x, t.y, t.size);
                grad.addColorStop(0, '#80d4ff'); grad.addColorStop(0.5, '#0088ff'); grad.addColorStop(1, '#1a0066');
                ctx.beginPath(); ctx.arc(t.x, t.y, t.size, 0, 2*Math.PI);
                ctx.fillStyle = grad; ctx.fill();
                ctx.shadowBlur = 0;
                ctx.strokeStyle = '#80d4ff'; ctx.lineWidth = 2.5; ctx.shadowBlur = 15; ctx.shadowColor = '#00aaff';
                ctx.stroke(); ctx.shadowBlur = 0;
                
                ctx.font = `${t.size * 0.38}px 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif`;
                ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
                ctx.fillStyle = '#ffffff'; ctx.shadowBlur = 8; ctx.shadowColor = '#0044ff';
                ctx.fillText(t.icon, t.x, t.y - 14);
                ctx.shadowBlur = 0;
                
                ctx.fillStyle = '#ffffff'; 
                const fontSize = Math.max(14, t.size * 0.34);
                ctx.font = `bold ${fontSize}px 'Segoe UI', Arial, sans-serif`;
                ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
                let displayText = t.fullText;
                if (displayText.length &gt; 14) displayText = displayText.substring(0, 13) + '…';
                
                const metrics = ctx.measureText(displayText);
                const tw = metrics.width;
                const th = fontSize * 1.5;
                const tx = t.x - tw/2 - 8;
                const ty = t.y + t.size - 14 - th;
                
                ctx.shadowBlur = 0;
                const r = 6;
                ctx.beginPath();
                ctx.moveTo(tx + r, ty);
                ctx.lineTo(tx + tw + 16 - r, ty);
                ctx.quadraticCurveTo(tx + tw + 16, ty, tx + tw + 16, ty + r);
                ctx.lineTo(tx + tw + 16, ty + th + 6 - r);
                ctx.quadraticCurveTo(tx + tw + 16, ty + th + 6, tx + tw + 16 - r, ty + th + 6);
                ctx.lineTo(tx + r, ty + th + 6);
                ctx.quadraticCurveTo(tx, ty + th + 6, tx, ty + th + 6 - r);
                ctx.lineTo(tx, ty + r);
                ctx.quadraticCurveTo(tx, ty, tx + r, ty);
                ctx.closePath();
                ctx.fillStyle = 'rgba(0, 10, 30, 0.85)';
                ctx.fill();
                
                ctx.fillStyle = '#ffffff';
                ctx.shadowBlur = 4;
                ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
                ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
                ctx.fillText(displayText, t.x, t.y + t.size - 6);
                ctx.shadowBlur = 0;
                
                t.x += t.vx; t.y += t.vy;
                if (t.x &lt; t.size + 20 || t.x &gt; W - t.size - 10) t.vx *= -1;
                if (t.y &lt; t.size + 20 || t.y &gt; H - t.size - 80) t.vy *= -1;
                t.x = Math.min(Math.max(t.x, t.size+20), W - t.size - 10);
                t.y = Math.min(Math.max(t.y, t.size+20), H - t.size - 80);
            });

            if (arrow.active) updateArrow();
            if (arrowCooldown &gt; 0) arrowCooldown--;
            if (gameActive) {
                const targetX = Math.min(Math.max(mouseX, 30), W - 30);
                archer.x += (targetX - archer.x) * 0.08;
                archer.y = H - 70;
            }
            drawArcher();

            for (let i=particles.length-1; i&gt;=0; i--) {
                const p = particles[i];
                p.x += p.vx; p.y += p.vy; p.life -= p.decay; p.vy += 0.05;
                if (p.life &lt;= 0) { particles.splice(i,1); continue; }
                ctx.globalAlpha = p.life; ctx.fillStyle = p.color; ctx.shadowBlur = 10; ctx.shadowColor = p.color;
                ctx.beginPath(); ctx.arc(p.x, p.y, p.size * p.life, 0, 2*Math.PI); ctx.fill();
                ctx.shadowBlur = 0;
            }
            ctx.globalAlpha = 1;

            for (let i=fireworks.length-1; i&gt;=0; i--) {
                const f = fireworks[i];
                f.x += f.vx; f.y += f.vy; f.vy += 0.04; f.life -= f.decay;
                if (f.life &lt;= 0) { fireworks.splice(i,1); continue; }
                ctx.globalAlpha = f.life; ctx.fillStyle = f.color; ctx.shadowBlur = 18; ctx.shadowColor = f.color;
                if (f.isConfetti) { ctx.save(); ctx.translate(f.x, f.y); ctx.rotate(f.life*12); ctx.fillRect(-f.size/2, -f.size/2, f.size*f.life, f.size*f.life*0.5); ctx.restore(); }
                else { ctx.beginPath(); ctx.arc(f.x, f.y, f.size * f.life, 0, 2*Math.PI); ctx.fill(); }
                ctx.shadowBlur = 0;
            }
            ctx.globalAlpha = 1;
        }

        function gameLoop() { draw(); animationFrame = requestAnimationFrame(gameLoop); }

        canvasEl.addEventListener('click', (e) =&gt; {
            const rect = canvasEl.getBoundingClientRect();
            const scaleX = canvas.width / rect.width, scaleY = canvas.height / rect.height;
            shootArrow((e.clientX - rect.left)*scaleX, (e.clientY - rect.top)*scaleY);
        });
        canvasEl.addEventListener('touchstart', (e) =&gt; {
            e.preventDefault(); const rect = canvasEl.getBoundingClientRect();
            const touch = e.touches[0]; const scaleX = canvas.width/rect.width, scaleY = canvas.height/rect.height;
            shootArrow((touch.clientX - rect.left)*scaleX, (touch.clientY - rect.top)*scaleY);
        }, { passive: false });
        canvasEl.addEventListener('mousemove', (e) =&gt; {
            const rect = canvasEl.getBoundingClientRect();
            mouseX = (e.clientX - rect.left) * (canvas.width/rect.width);
            mouseY = (e.clientY - rect.top) * (canvas.height/rect.height);
        });
        speechBtn.addEventListener('click', () =&gt; speakScoreboard(finalScore, finalRank, finalMessage, finalAccuracy));

        function startGame() {
            const nameInput = document.getElementById('playerNameInput');
            userName = nameInput.value.trim() || "User";
            playerNameDisplay.textContent = `&#128218; ${userName}`;
            entryScreen.style.display = 'none';
            congratsOverlay.classList.remove('show');
            
            score = 0; totalAttempts = 0; correctAttempts = 0; currentLevel = 0;
            timeRemaining = TOTAL_TIME;
            updateTimerDisplay();
            timerDisplay.style.color = '#ff6b6b';
            timerDisplay.style.borderColor = '#ff4444';
            
            gameActive = true; isCelebrating = false; particles = []; fireworks = []; arrow.active = false;
            if (speechSynth.speaking) speechSynth.cancel();
            
            startTimer();
            loadLevel(0); updateUI();
            if (animationFrame) cancelAnimationFrame(animationFrame);
            gameLoop();
        }

        document.getElementById('startGameBtn').addEventListener('click', startGame);
        document.getElementById('restartFromCongratsBtn').addEventListener('click', () =&gt; { 
            congratsOverlay.classList.remove('show'); 
            if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }
            timerRunning = false;
            startGame(); 
        });
        loadLeaderboard(); loadLevel(0); updateUI();
        qNumberDisplay.textContent = '&#128218;'; qTextDisplay.textContent = 'Masukkan nama &amp; tekan MULAI';
        updateTimerDisplay();
        gameLoop();
        window.addEventListener('resize', resizeCanvas);
    })();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</description><link>http://kitab-investasi.blogspot.com/2026/07/asesmen-awal-bahasa-indonesia-xi-smk.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-413804888584619253</guid><pubDate>Thu, 23 Jul 2026 06:21:44 +0000</pubDate><atom:updated>2026-07-24T07:47:57.023+07:00</atom:updated><title>Evaluasi Informasi dalam Teks Prosedur</title><description>&lt;style&gt;
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&amp;family=Source+Sans+3:wght@400;500;600;700&amp;family=IBM+Plex+Mono:wght@400;500;600&amp;display=swap');
.epb{
  --blueprint:#0F2A3D;
  --blueprint-deep:#0A1E2C;
  --panel:#4A2E12;
  --paper:#F3F0E6;
  --ink:#132029;
  --amber:#F5A623;
  --amber-deep:#C97F12;
  --mint:#6EC6CA;
  --line:rgba(234,242,245,0.16);
  --off-white:#EAF2F5;
  --muted:#9FB4C2;
}
.epb *{box-sizing:border-box;}
.epb{scroll-behavior:smooth; background:#0A1F2E;}
.epb{
  margin:0;
  position:relative;
  overflow:hidden;
  background:var(--blueprint);
  color:var(--off-white);
  font-family:'Source Sans 3',sans-serif;
  line-height:1.65;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
}
.epb h1, .epb h2, .epb h3, .epb h4{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.02em; margin:0 0 0.5em;}
.epb .mono{font-family:'IBM Plex Mono',monospace;}
.epb a{color:var(--amber);}
.epb .crop{position:absolute; width:22px; height:22px; z-index:5; opacity:.55; pointer-events:none;}
.epb .crop::before, .epb .crop::after{content:"";position:absolute;background:var(--mint);}
.epb .crop::before{width:100%;height:1px;top:50%;left:0;}
.epb .crop::after{width:1px;height:100%;left:50%;top:0;}
.epb .crop.tl{top:14px;left:14px;}
.epb .crop.tr{top:14px;right:14px;}
.epb .crop.bl{bottom:14px;left:14px;}
.epb .crop.br{bottom:14px;right:14px;}
.epb header.cover{
  position:relative;
  padding:40px 24px 36px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.epb .doc-code{font-family:'IBM Plex Mono',monospace; color:var(--amber); letter-spacing:0.15em; font-size:0.78rem; text-transform:uppercase; margin-bottom:18px; display:flex; gap:10px; align-items:center;}
.epb .doc-code::before{content:"◆"; color:var(--amber);}
.epb .cover h1{font-size:clamp(1.6rem,7vw,2.5rem); color:var(--off-white); max-width:16ch; line-height:1.05;}
.epb .cover .subtitle{color:var(--muted); font-size:1.05rem; max-width:60ch; margin-top:14px;}
.epb .meta-strip{
  margin-top:38px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
}
.epb .meta-strip div{padding:14px 16px; border-right:1px dashed var(--line);}
.epb .meta-strip div:last-child{border-right:none;}
.epb .meta-strip .k{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--amber); text-transform:uppercase; letter-spacing:0.1em;}
.epb .meta-strip .v{font-size:0.98rem; color:var(--off-white); margin-top:4px; font-weight:600;}
.epb .stamp{
  position:absolute; top:40px; right:20px; width:104px; height:104px;
  border:2.5px solid var(--amber); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-11deg);
  color:var(--amber); font-family:'IBM Plex Mono',monospace;
  text-align:center; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
  opacity:0.9;
}
.epb .stamp .ring{position:absolute; inset:8px; border:1px dashed var(--amber); border-radius:50%;}
.epb .stamp b{display:block; font-family:'Oswald',sans-serif; font-size:1.05rem; letter-spacing:0.06em; margin-top:4px;}

@media (max-width:760px){.epb .stamp{display:none;}
.epb }


.epb main{max-width:920px; margin:0 auto; padding:0 20px 60px;}
.epb .section{padding-top:64px;}
.epb .eyebrow{font-family:'IBM Plex Mono',monospace; color:var(--amber); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:10px;}
.epb .eyebrow::after{content:""; flex:1; height:1px; background:var(--line);}
.epb h2.section-title{font-size:1.7rem; color:var(--off-white);}
.epb p{color:#DDE7EC;}
.epb .lead{color:var(--muted); font-size:1.02rem; max-width:72ch;}
.epb .panel{
  background:var(--panel); border:1px solid var(--line); border-radius:2px;
  padding:26px 28px; margin:22px 0;
}
.epb .panel.tp{border-left:4px solid var(--mint);}
.epb .panel.warn{border-left:4px solid var(--amber);}
.epb .tp-box{display:grid; gap:14px; margin-top:18px;}
.epb .tp-item{display:flex; gap:14px; align-items:flex-start;}
.epb .tp-item .idx{font-family:'IBM Plex Mono',monospace; color:var(--amber); font-weight:600; min-width:34px;}
.epb .flow{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:20px;}
.epb .flow .step{background:var(--blueprint-deep); border:1px solid var(--line); padding:18px; position:relative;}
.epb .flow .step .tag{font-family:'IBM Plex Mono',monospace; color:var(--amber); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;}
.epb .flow .step h4{font-size:1rem; margin-top:8px; color:var(--off-white);}
.epb .flow .step .time{position:absolute; top:16px; right:16px; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--amber);}
.epb .grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:16px;}
.epb .card{background:var(--blueprint-deep); border:1px solid var(--line); padding:18px;}
.epb .card h4{color:var(--amber); font-size:0.95rem;}
.epb .criteria{display:grid; gap:16px; margin-top:20px;}
.epb .crit{
  background:var(--blueprint-deep); border:1px solid var(--line);
  display:grid; grid-template-columns:64px 1fr; gap:0;
}
.epb .crit .num{
  background:var(--amber); color:var(--blueprint-deep); font-family:'IBM Plex Mono',monospace;
  font-weight:700; display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.epb .crit .body{padding:18px 20px;}
.epb .crit h4{color:var(--off-white); font-size:1.02rem; margin-bottom:6px;}
.epb .crit .q{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-family:'IBM Plex Mono',monospace; font-size:0.86rem; color:var(--amber);}
.epb .timeline{margin-top:24px; position:relative; padding-left:34px;}
.epb .timeline::before{content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--line);}
.epb .tl-item{position:relative; padding-bottom:26px;}
.epb .tl-item:last-child{padding-bottom:0;}
.epb .tl-item::before{content:""; position:absolute; left:-34px; top:2px; width:22px; height:22px; border-radius:50%; background:var(--blueprint); border:2px solid var(--amber);}
.epb .tl-item h4{color:var(--off-white); font-size:1rem; margin-bottom:4px;}
.epb .doc-sample{
  background:var(--paper); color:var(--ink); border-radius:2px; padding:0; margin-top:22px;
  box-shadow:0 20px 45px rgba(0,0,0,0.35);
}
.epb .doc-sample .doc-head{background:var(--ink); color:var(--paper); padding:12px 22px; font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; display:flex; justify-content:space-between;}
.epb .doc-sample .doc-body{padding:26px 28px 30px;}
.epb .doc-sample h3{font-family:'Oswald',sans-serif; color:var(--ink); font-size:1.25rem; text-transform:none; letter-spacing:0;}
.epb .doc-sample ol{padding-left:22px;}
.epb .doc-sample li{margin-bottom:9px;}
.epb .flag{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; font-weight:600;
  background:#D94E2A; color:#fff; padding:1px 7px; border-radius:2px; margin-left:6px; vertical-align:middle;
}
.epb .doc-sample .note-margin{margin-top:6px; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:#8A3A1F; padding-left:8px; border-left:2px solid #D94E2A;}
.epb .legend{display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:16px;}
.epb .legend span{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--muted); display:flex; align-items:center; gap:8px;}
.epb .legend .dot{width:10px; height:10px; border-radius:50%; display:inline-block;}
.epb table{width:100%; border-collapse:collapse; margin-top:18px; font-size:0.94rem;}
.epb th, .epb td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top;}
.epb th{background:var(--blueprint-deep); font-family:'IBM Plex Mono',monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--amber);}
.epb .summary-box{
  border:1px solid var(--amber); background:linear-gradient(180deg, rgba(245,166,35,0.08), transparent);
  padding:24px 26px; margin-top:24px;
}
.epb .summary-box ul{margin:10px 0 0; padding-left:20px;}
.epb .summary-box li{margin-bottom:8px;}
.epb .task-header{
  background:var(--amber); color:var(--blueprint-deep); padding:22px 26px; margin-top:20px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.epb .task-header h2{color:var(--blueprint-deep); font-size:1.4rem; margin:0;}
.epb .task-header .badge{font-family:'IBM Plex Mono',monospace; font-size:0.8rem; background:var(--blueprint-deep); color:var(--amber); padding:6px 12px; border-radius:2px;}
.epb .steps-num{counter-reset:step; margin-top:18px; list-style:none; padding:0;}
.epb .steps-num li{counter-increment:step; position:relative; padding-left:44px; margin-bottom:16px;}
.epb .steps-num li::before{content:counter(step,decimal-leading-zero); position:absolute; left:0; top:0; font-family:'IBM Plex Mono',monospace; color:var(--amber); font-weight:600; font-size:0.95rem; border:1px solid var(--amber); width:30px; height:26px; display:flex; align-items:center; justify-content:center;}
.epb .rubric-scale{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px;}
.epb .rubric-scale div{background:var(--blueprint-deep); border:1px solid var(--line); padding:12px; text-align:center;}
.epb .rubric-scale .n{font-family:'IBM Plex Mono',monospace; color:var(--amber); font-size:1.3rem; font-weight:700;}
.epb .rubric-scale .l{font-size:0.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em;}
.epb .notebook{
  background:repeating-linear-gradient(var(--paper), var(--paper) 33px, #D8D3C2 34px);
  color:var(--ink); border-radius:2px; padding:28px 30px; margin-top:20px; position:relative;
  box-shadow:0 20px 45px rgba(0,0,0,0.35);
}
.epb .notebook::before{content:""; position:absolute; left:46px; top:0; bottom:0; width:1.5px; background:#C0453A; opacity:0.5;}
.epb .notebook .content{padding-left:24px;}
.epb .notebook h3{color:var(--ink); font-family:'Oswald',sans-serif; letter-spacing:0.02em; margin-bottom:10px;}
.epb .notebook ul{padding-left:20px;}
.epb footer{border-top:1px solid var(--line); padding:24px 20px 40px; color:var(--muted); font-size:0.86rem;}
.epb footer .doc-code{margin-bottom:10px;}
.epb .divider-dash{border:none; border-top:1px dashed var(--line); margin:44px 0 0;}
.epb::selection{background:var(--amber); color:var(--blueprint-deep);}

&lt;/style&gt;
&lt;div class="epb"&gt;
&lt;div class="crop tl"&gt;&lt;/div&gt;&lt;div class="crop tr"&gt;&lt;/div&gt;&lt;div class="crop bl"&gt;&lt;/div&gt;&lt;div class="crop br"&gt;&lt;/div&gt;

&lt;header class="cover"&gt;
  &lt;div class="stamp"&gt;&lt;div class="ring"&gt;&lt;/div&gt;&lt;span&gt;Modul Ajar&lt;b&gt;Terverifikasi&lt;/b&gt;Fase F&lt;/span&gt;&lt;/div&gt;
  &lt;div class="doc-code"&gt;DOK/B.INDO/XI/PROSEDUR-EVAL — 3 JP · 1 Pertemuan&lt;/div&gt;
  &lt;h1&gt;Evaluasi Informasi dalam Teks Prosedur&lt;/h1&gt;
  &lt;p class="subtitle"&gt;Materi Bahasa Indonesia Kelas XI SMK/MAK — melatih murid membaca teks prosedur secara kritis: memeriksa keakuratan, kelengkapan, kelogisan urutan, dan kejelasan bahasa sebelum informasi tersebut dipercaya dan digunakan.&lt;/p&gt;

  &lt;div class="meta-strip"&gt;
    &lt;div&gt;&lt;div class="k"&gt;Mata Pelajaran&lt;/div&gt;&lt;div class="v"&gt;Bahasa Indonesia&lt;/div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;div class="k"&gt;Jenjang&lt;/div&gt;&lt;div class="v"&gt;SMK/MAK — Kelas XI&lt;/div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;div class="k"&gt;Elemen&lt;/div&gt;&lt;div class="v"&gt;Membaca &amp;amp; Memirsa&lt;/div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;div class="k"&gt;Alokasi Waktu&lt;/div&gt;&lt;div class="v"&gt;3 JP (3 × 45 menit)&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/header&gt;

&lt;main&gt;

  &lt;!-- ============ CP &amp; TP ============ --&gt;
  &lt;section class="section" id="tujuan"&gt;
    &lt;div class="eyebrow"&gt;01 — Identitas Pembelajaran&lt;/div&gt;
    &lt;h2 class="section-title"&gt;Capaian &amp;amp; Tujuan Pembelajaran&lt;/h2&gt;

    &lt;div class="panel tp"&gt;
      &lt;div class="eyebrow" style="margin-bottom:6px;"&gt;Capaian Pembelajaran (Elemen Membaca–Memirsa)&lt;/div&gt;
      &lt;p&gt;Murid mampu mengevaluasi informasi berupa gagasan, pikiran, pandangan, arahan, atau pesan dari berbagai jenis teks, termasuk teks prosedur, untuk menemukan makna yang tersurat dan tersirat, serta menilai akurasi dan kualitas informasi dari teks tersebut secara kritis.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="panel"&gt;
      &lt;div class="eyebrow" style="margin-bottom:6px;"&gt;Tujuan Pembelajaran&lt;/div&gt;
      &lt;p style="font-size:1.05rem; color:var(--off-white); font-weight:600;"&gt;Murid mampu mengevaluasi informasi yang disajikan dalam teks prosedur secara kritis dan logis.&lt;/p&gt;

      &lt;div class="tp-box"&gt;
        &lt;div class="tp-item"&gt;&lt;span class="idx mono"&gt;TP.1&lt;/span&gt;&lt;p&gt;Murid dapat menjelaskan kembali struktur dan ciri kebahasaan teks prosedur.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="tp-item"&gt;&lt;span class="idx mono"&gt;TP.2&lt;/span&gt;&lt;p&gt;Murid dapat mengidentifikasi kriteria yang digunakan untuk menilai kualitas informasi dalam teks prosedur (keakuratan, kelengkapan, kelogisan urutan, kejelasan bahasa, dan kesesuaian tujuan).&lt;/p&gt;&lt;/div&gt;
        &lt;div class="tp-item"&gt;&lt;span class="idx mono"&gt;TP.3&lt;/span&gt;&lt;p&gt;Murid dapat menemukan kekeliruan, kejanggalan, atau bagian yang kurang logis pada sebuah teks prosedur berdasarkan kriteria evaluasi.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="tp-item"&gt;&lt;span class="idx mono"&gt;TP.4&lt;/span&gt;&lt;p&gt;Murid dapat menyusun simpulan dan rekomendasi perbaikan atas hasil evaluasi teks prosedur secara tertulis.&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="eyebrow" style="margin-top:26px; margin-bottom:6px;"&gt;8 Profil Lulusan yang Dikembangkan&lt;/div&gt;
    &lt;div class="grid-3"&gt;
      &lt;div class="card"&gt;&lt;h4&gt;Penalaran Kritis&lt;/h4&gt;&lt;p style="font-size:0.9rem;"&gt;Menganalisis dan menilai keakuratan serta kelogisan informasi dalam teks prosedur.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="card"&gt;&lt;h4&gt;Kemandirian&lt;/h4&gt;&lt;p style="font-size:0.9rem;"&gt;Menyelesaikan analisis dan menuliskan kesimpulan secara mandiri.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="card"&gt;&lt;h4&gt;Kolaborasi&lt;/h4&gt;&lt;p style="font-size:0.9rem;"&gt;Bekerja sama dalam kelompok saat mengevaluasi teks prosedur.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="card"&gt;&lt;h4&gt;Komunikasi&lt;/h4&gt;&lt;p style="font-size:0.9rem;"&gt;Menyampaikan hasil evaluasi dan rekomendasi perbaikan secara jelas.&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;hr class="divider-dash"&gt;

  &lt;!-- ============ MATERI A: TEKS PROSEDUR ============ --&gt;
  &lt;section class="section" id="materi-a"&gt;
    &lt;div class="eyebrow"&gt;02 — Materi Inti A&lt;/div&gt;
    &lt;h2 class="section-title"&gt;Mengingat Kembali Teks Prosedur&lt;/h2&gt;
    &lt;p class="lead"&gt;Sebelum mengevaluasi, murid perlu memahami kembali apa yang membentuk sebuah teks prosedur, agar tahu bagian mana yang perlu diperiksa.&lt;/p&gt;

    &lt;div class="panel"&gt;
      &lt;p&gt;&lt;b style="color:var(--off-white);"&gt;Teks prosedur&lt;/b&gt; adalah teks yang berisi langkah-langkah sistematis untuk melakukan atau membuat sesuatu, dengan tujuan agar pembaca dapat mencapai hasil tertentu jika mengikuti langkah tersebut dengan tepat. Dalam konteks SMK, teks prosedur sangat erat dengan praktik kejuruan — misalnya prosedur pengoperasian mesin, prosedur keselamatan kerja (K3), prosedur instalasi, atau prosedur perawatan alat.&lt;/p&gt;
    &lt;/div&gt;

    &lt;h4 style="color:var(--off-white); margin-top:26px;"&gt;Struktur Teks Prosedur&lt;/h4&gt;
    &lt;div class="grid-3"&gt;
      &lt;div class="card"&gt;&lt;h4&gt;1. Tujuan&lt;/h4&gt;&lt;p style="font-size:0.92rem;"&gt;Pernyataan tentang hasil atau capaian yang ingin diperoleh dari prosedur tersebut.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="card"&gt;&lt;h4&gt;2. Alat &amp;amp; Bahan&lt;/h4&gt;&lt;p style="font-size:0.92rem;"&gt;Daftar alat, bahan, atau syarat yang diperlukan sebelum langkah dimulai (tidak selalu ada, tergantung jenis prosedur).&lt;/p&gt;&lt;/div&gt;
      &lt;div class="card"&gt;&lt;h4&gt;3. Langkah-Langkah&lt;/h4&gt;&lt;p style="font-size:0.92rem;"&gt;Urutan tindakan yang harus dilakukan, biasanya bersifat kronologis dan tidak dapat diacak.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="card"&gt;&lt;h4&gt;4. Penutup/Hasil&lt;/h4&gt;&lt;p style="font-size:0.92rem;"&gt;Penegasan hasil akhir, catatan tambahan, atau peringatan keselamatan (jika ada).&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;h4 style="color:var(--off-white); margin-top:26px;"&gt;Ciri Kebahasaan&lt;/h4&gt;
    &lt;div class="grid-3"&gt;
      &lt;div class="card"&gt;&lt;h4&gt;Kalimat imperatif&lt;/h4&gt;&lt;p style="font-size:0.92rem;"&gt;Kalimat perintah/larangan/anjuran, mis. "Pasang kabel dengan benar."&lt;/p&gt;&lt;/div&gt;
      &lt;div class="card"&gt;&lt;h4&gt;Konjungsi temporal&lt;/h4&gt;&lt;p style="font-size:0.92rem;"&gt;Kata penghubung urutan waktu: kemudian, selanjutnya, setelah itu, lalu.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="card"&gt;&lt;h4&gt;Verba tindakan &amp;amp; kata teknis&lt;/h4&gt;&lt;p style="font-size:0.92rem;"&gt;Kata kerja aktif dan istilah khusus sesuai bidang keahlian.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="card"&gt;&lt;h4&gt;Keterangan alat/ukuran&lt;/h4&gt;&lt;p style="font-size:0.92rem;"&gt;Angka, satuan, dan spesifikasi yang harus tepat dan konsisten.&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;hr class="divider-dash"&gt;

  &lt;!-- ============ MATERI B: KONSEP EVALUASI INFORMASI ============ --&gt;
  &lt;section class="section" id="materi-b"&gt;
    &lt;div class="eyebrow"&gt;03 — Materi Inti B&lt;/div&gt;
    &lt;h2 class="section-title"&gt;Apa itu Evaluasi Informasi?&lt;/h2&gt;

    &lt;p&gt;&lt;b style="color:var(--off-white);"&gt;Mengevaluasi informasi&lt;/b&gt; berarti menilai apakah informasi yang disajikan dalam sebuah teks layak dipercaya, digunakan, dan diikuti — bukan sekadar memahami isinya. Membaca biasa berhenti pada "apa isi teksnya", sedangkan membaca kritis-evaluatif melangkah lebih jauh: "apakah informasi ini benar, lengkap, masuk akal, dan aman untuk diikuti?"&lt;/p&gt;

    &lt;table&gt;
      &lt;tr&gt;&lt;th style="width:30%;"&gt;Aspek&lt;/th&gt;&lt;th&gt;Membaca Biasa (Pemahaman)&lt;/th&gt;&lt;th&gt;Membaca Kritis (Evaluasi)&lt;/th&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Fokus&lt;/td&gt;&lt;td&gt;Mengetahui apa yang harus dilakukan&lt;/td&gt;&lt;td&gt;Menilai apakah langkah tersebut benar, lengkap, dan logis&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Sikap pembaca&lt;/td&gt;&lt;td&gt;Menerima informasi apa adanya&lt;/td&gt;&lt;td&gt;Mempertanyakan dan memeriksa informasi sebelum dipercaya&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Hasil&lt;/td&gt;&lt;td&gt;Paham urutan langkah&lt;/td&gt;&lt;td&gt;Dapat menemukan kekeliruan dan memberi rekomendasi perbaikan&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;

    &lt;div class="panel warn" style="margin-top:22px;"&gt;
      &lt;p style="margin:0;"&gt;&lt;b style="color:var(--off-white);"&gt;Mengapa penting bagi murid SMK?&lt;/b&gt; Teks prosedur yang keliru atau tidak lengkap dalam konteks kejuruan bukan hanya membingungkan, tetapi dapat menyebabkan kegagalan kerja, kerusakan alat, bahkan kecelakaan kerja. Kemampuan mengevaluasi teks prosedur adalah bagian dari kesiapan kerja (job readiness).&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;hr class="divider-dash"&gt;

  &lt;!-- ============ MATERI C: KRITERIA EVALUASI ============ --&gt;
  &lt;section class="section" id="materi-c"&gt;
    &lt;div class="eyebrow"&gt;04 — Materi Inti C&lt;/div&gt;
    &lt;h2 class="section-title"&gt;Kriteria Evaluasi Teks Prosedur&lt;/h2&gt;
    &lt;p class="lead"&gt;Gunakan enam kriteria berikut sebagai "alat ukur" ketika memeriksa sebuah teks prosedur.&lt;/p&gt;

    &lt;div class="criteria"&gt;
      &lt;div class="crit"&gt;
        &lt;div class="num mono"&gt;A&lt;/div&gt;
        &lt;div class="body"&gt;
          &lt;h4&gt;Keakuratan Informasi&lt;/h4&gt;
          &lt;p style="margin:0;"&gt;Apakah data, istilah, ukuran, takaran, atau spesifikasi yang digunakan sudah tepat dan sesuai fakta/standar yang berlaku?&lt;/p&gt;
          &lt;div class="q"&gt;Pertanyaan panduan: Apakah angka dan satuan masuk akal? Apakah istilah teknis digunakan secara tepat?&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="crit"&gt;
        &lt;div class="num mono"&gt;B&lt;/div&gt;
        &lt;div class="body"&gt;
          &lt;h4&gt;Kelengkapan Informasi&lt;/h4&gt;
          &lt;p style="margin:0;"&gt;Apakah seluruh alat/bahan dan langkah yang diperlukan untuk mencapai tujuan sudah disebutkan, tanpa ada bagian penting yang hilang?&lt;/p&gt;
          &lt;div class="q"&gt;Pertanyaan panduan: Jika langkah ini benar-benar diikuti, apakah tujuannya bisa tercapai? Adakah langkah yang "meloncat"?&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="crit"&gt;
        &lt;div class="num mono"&gt;C&lt;/div&gt;
        &lt;div class="body"&gt;
          &lt;h4&gt;Kelogisan &amp;amp; Keruntutan Urutan&lt;/h4&gt;
          &lt;p style="margin:0;"&gt;Apakah langkah-langkah disusun dengan urutan yang logis (sebab sebelum akibat) dan tidak bertentangan satu sama lain?&lt;/p&gt;
          &lt;div class="q"&gt;Pertanyaan panduan: Apakah ada langkah yang seharusnya dilakukan lebih dulu tetapi diletakkan belakangan?&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="crit"&gt;
        &lt;div class="num mono"&gt;D&lt;/div&gt;
        &lt;div class="body"&gt;
          &lt;h4&gt;Kejelasan &amp;amp; Keefektifan Bahasa&lt;/h4&gt;
          &lt;p style="margin:0;"&gt;Apakah kalimat mudah dipahami, tidak ambigu (bermakna ganda), dan menggunakan kalimat efektif?&lt;/p&gt;
          &lt;div class="q"&gt;Pertanyaan panduan: Apakah ada kalimat yang bisa ditafsirkan lebih dari satu cara oleh pembaca yang berbeda?&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="crit"&gt;
        &lt;div class="num mono"&gt;E&lt;/div&gt;
        &lt;div class="body"&gt;
          &lt;h4&gt;Kesesuaian dengan Tujuan&lt;/h4&gt;
          &lt;p style="margin:0;"&gt;Apakah seluruh langkah benar-benar mengarah pada tujuan yang dinyatakan di awal teks, atau ada langkah yang tidak relevan?&lt;/p&gt;
          &lt;div class="q"&gt;Pertanyaan panduan: Apakah ada langkah yang tidak berkaitan dengan tujuan prosedur tersebut?&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="crit"&gt;
        &lt;div class="num mono"&gt;F&lt;/div&gt;
        &lt;div class="body"&gt;
          &lt;h4&gt;Keselamatan &amp;amp; Kelayakan Praktik&lt;/h4&gt;
          &lt;p style="margin:0;"&gt;Khusus untuk teks prosedur kejuruan: apakah aspek keselamatan kerja (K3) dan kelayakan alat sudah diperhatikan?&lt;/p&gt;
          &lt;div class="q"&gt;Pertanyaan panduan: Apakah ada risiko keselamatan yang tidak diperingatkan dalam teks?&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;hr class="divider-dash"&gt;

  &lt;!-- ============ MATERI D: LANGKAH EVALUASI ============ --&gt;
  &lt;section class="section" id="materi-d"&gt;
    &lt;div class="eyebrow"&gt;05 — Materi Inti D&lt;/div&gt;
    &lt;h2 class="section-title"&gt;Langkah-Langkah Mengevaluasi Teks Prosedur&lt;/h2&gt;

    &lt;div class="timeline"&gt;
      &lt;div class="tl-item"&gt;&lt;h4 class="mono"&gt;01 · Membaca Menyeluruh&lt;/h4&gt;&lt;p&gt;Baca teks prosedur dari awal hingga akhir untuk memahami tujuan dan gambaran umum langkahnya sebelum menilai bagian per bagian.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="tl-item"&gt;&lt;h4 class="mono"&gt;02 · Mengidentifikasi Struktur&lt;/h4&gt;&lt;p&gt;Tandai bagian tujuan, alat/bahan, dan langkah-langkah. Struktur yang tidak lengkap sudah menjadi indikasi awal masalah.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="tl-item"&gt;&lt;h4 class="mono"&gt;03 · Menguji dengan Kriteria&lt;/h4&gt;&lt;p&gt;Periksa teks menggunakan keenam kriteria (A–F) satu per satu. Catat bagian teks yang tidak memenuhi kriteria tertentu.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="tl-item"&gt;&lt;h4 class="mono"&gt;04 · Mencatat Temuan&lt;/h4&gt;&lt;p&gt;Tuliskan temuan secara spesifik: bagian/kalimat mana yang bermasalah dan mengapa, bukan sekadar "kurang jelas".&lt;/p&gt;&lt;/div&gt;
      &lt;div class="tl-item"&gt;&lt;h4 class="mono"&gt;05 · Menyimpulkan &amp;amp; Merekomendasikan&lt;/h4&gt;&lt;p&gt;Simpulkan apakah teks prosedur tersebut layak diikuti, dan berikan saran perbaikan konkret untuk bagian yang bermasalah.&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;hr class="divider-dash"&gt;

  &lt;!-- ============ CONTOH PENERAPAN ============ --&gt;
  &lt;section class="section" id="contoh"&gt;
    &lt;div class="eyebrow"&gt;06 — Pemodelan&lt;/div&gt;
    &lt;h2 class="section-title"&gt;Contoh Penerapan: Menganalisis Teks Prosedur Bidang Otomotif Sepeda Motor&lt;/h2&gt;
    &lt;p class="lead"&gt;Guru membacakan dan membahas bersama contoh berikut sebagai model penerapan kriteria evaluasi. Bagian bertanda merah sengaja mengandung kejanggalan untuk dianalisis.&lt;/p&gt;

    &lt;div class="doc-sample"&gt;
      &lt;div class="doc-head"&gt;&lt;span&gt;Lampiran · Teks Prosedur Contoh&lt;/span&gt;&lt;span&gt;Dokumen-01 · TBSM&lt;/span&gt;&lt;/div&gt;
      &lt;div class="doc-body"&gt;
        &lt;h3&gt;Prosedur Mengganti Oli Mesin Sepeda Motor&lt;/h3&gt;
        &lt;p style="margin-top:-4px; color:#4b5a63;"&gt;&lt;i&gt;Tujuan: Mengganti oli mesin sepeda motor secara berkala agar performa dan usia mesin tetap terjaga.&lt;/i&gt;&lt;/p&gt;
        &lt;p style="margin:10px 0 4px; color:#4b5a63; font-size:0.92rem;"&gt;&lt;b&gt;Alat &amp;amp; bahan:&lt;/b&gt; kunci pas ring 17, wadah penampung oli bekas, oli mesin baru sesuai spesifikasi pabrikan, corong, lap bersih.&lt;/p&gt;
        &lt;ol&gt;
          &lt;li&gt;Panaskan mesin sepeda motor selama beberapa menit agar oli lebih mudah mengalir saat dibuang.&lt;/li&gt;
          &lt;li&gt;Matikan mesin, lalu siapkan wadah penampung tepat di bawah baut pembuangan oli.&lt;/li&gt;
          &lt;li&gt;Buka baut pembuangan oli menggunakan kunci pas ring 17, biarkan oli lama mengalir hingga habis.&lt;/li&gt;
          &lt;li&gt;Pasang kembali baut pembuangan oli setelah oli lama habis menetes.&lt;/li&gt;
          &lt;li&gt;Tuang oli mesin baru sebanyak 5 liter melalui lubang pengisian menggunakan corong.&lt;span class="flag"&gt;JANGGAL&lt;/span&gt;
            &lt;div class="note-margin"&gt;Kriteria A — tidak akurat: kapasitas oli mesin sepeda motor umumnya hanya sekitar 0,8–1,2 liter, bukan 5 liter. Angka ini tidak sesuai spesifikasi standar.&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;Nyalakan mesin dan periksa kebocoran oli di sekitar baut pembuangan.&lt;/li&gt;
        &lt;/ol&gt;
        &lt;div class="note-margin" style="margin-top:14px;"&gt;Kriteria B — kurang lengkap: teks tidak menyebutkan langkah memeriksa ketinggian oli melalui kaca duga (oil level window) atau stik oli setelah pengisian, padahal langkah ini penting untuk memastikan takaran oli sudah tepat.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="legend"&gt;
      &lt;span&gt;&lt;span class="dot" style="background:#D94E2A;"&gt;&lt;/span&gt;Bagian yang mengandung kejanggalan (ditandai untuk didiskusikan)&lt;/span&gt;
    &lt;/div&gt;

    &lt;div class="panel" style="margin-top:22px;"&gt;
      &lt;p style="margin:0;"&gt;&lt;b style="color:var(--off-white);"&gt;Simpulan model analisis:&lt;/b&gt; Teks prosedur di atas cukup logis dari segi urutan langkah (Kriteria C terpenuhi), tetapi tidak akurat pada takaran oli yang dituliskan (melanggar Kriteria A) dan kurang lengkap karena tidak ada langkah pengecekan ketinggian oli di akhir (melanggar Kriteria B). Rekomendasi: perbaiki angka takaran oli sesuai spesifikasi motor yang sebenarnya, dan tambahkan langkah memeriksa ketinggian oli melalui kaca duga sebelum menyalakan mesin.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;hr class="divider-dash"&gt;

  &lt;!-- ============ RANGKUMAN ============ --&gt;
  &lt;section class="section" id="rangkuman"&gt;
    &lt;div class="eyebrow"&gt;07 — Ringkasan Materi&lt;/div&gt;
    &lt;h2 class="section-title"&gt;Poin-Poin Penting&lt;/h2&gt;
    &lt;div class="summary-box"&gt;
      &lt;ul&gt;
        &lt;li&gt;Mengevaluasi informasi dalam teks prosedur berarti menilai kelayakan teks tersebut untuk dipercaya dan diikuti, bukan sekadar memahami isinya.&lt;/li&gt;
        &lt;li&gt;Enam kriteria evaluasi: keakuratan, kelengkapan, kelogisan urutan, kejelasan bahasa, kesesuaian tujuan, dan keselamatan/kelayakan praktik.&lt;/li&gt;
        &lt;li&gt;Evaluasi dilakukan bertahap: membaca menyeluruh → mengidentifikasi struktur → menguji dengan kriteria → mencatat temuan → menyimpulkan dan merekomendasikan.&lt;/li&gt;
        &lt;li&gt;Kemampuan ini penting bagi murid SMK karena berkaitan langsung dengan keselamatan dan ketepatan kerja di bidang kejuruan.&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;hr class="divider-dash"&gt;

  &lt;!-- ============ TUGAS KELOMPOK ============ --&gt;
  &lt;section class="section" id="tugas-kelompok"&gt;
    &lt;div class="eyebrow"&gt;08 — Lembar Kerja&lt;/div&gt;
    &lt;div class="task-header"&gt;
      &lt;h2&gt;Tugas Kelompok: Evaluasi Teks Prosedur Bidang Sepeda Motor&lt;/h2&gt;
      &lt;span class="badge"&gt;Durasi ± 60 menit&lt;/span&gt;
    &lt;/div&gt;

    &lt;p style="margin-top:18px;"&gt;&lt;b style="color:var(--off-white);"&gt;Tujuan tugas:&lt;/b&gt; Murid secara berkelompok mengevaluasi teks prosedur bidang Teknik Otomotif Sepeda Motor berikut menggunakan enam kriteria yang telah dipelajari, kemudian mempresentasikan hasil evaluasi dan rekomendasi perbaikannya.&lt;/p&gt;

    &lt;div class="doc-sample" style="margin-top:20px;"&gt;
      &lt;div class="doc-head"&gt;&lt;span&gt;Lampiran · Teks Prosedur untuk Dievaluasi Kelompok&lt;/span&gt;&lt;span&gt;Dokumen-02 · TBSM&lt;/span&gt;&lt;/div&gt;
      &lt;div class="doc-body"&gt;
        &lt;h3&gt;Prosedur Memeriksa dan Mengganti Busi Sepeda Motor&lt;/h3&gt;
        &lt;p style="margin-top:-4px; color:#4b5a63;"&gt;&lt;i&gt;Tujuan: Memeriksa kondisi busi dan menggantinya apabila sudah tidak layak pakai agar pembakaran mesin tetap optimal.&lt;/i&gt;&lt;/p&gt;
        &lt;p style="margin:10px 0 4px; color:#4b5a63; font-size:0.92rem;"&gt;&lt;b&gt;Alat &amp;amp; bahan:&lt;/b&gt; kunci busi, sikat kawat, feeler gauge (pengukur celah busi), busi baru sesuai spesifikasi motor.&lt;/p&gt;
        &lt;ol&gt;
          &lt;li&gt;Pastikan mesin sepeda motor dalam kondisi menyala saat akan membuka busi agar posisi piston mudah ditentukan.&lt;/li&gt;
          &lt;li&gt;Buka penutup busi (cap) menggunakan tangan.&lt;/li&gt;
          &lt;li&gt;Lepaskan busi lama menggunakan kunci busi dengan cara memutar searah jarum jam.&lt;/li&gt;
          &lt;li&gt;Periksa kondisi ujung elektroda busi; jika berwarna hitam pekat atau basah, bersihkan menggunakan sikat kawat.&lt;/li&gt;
          &lt;li&gt;Apabila busi sudah aus, retak, atau elektroda sudah menipis, ganti dengan busi baru sesuai spesifikasi pabrikan.&lt;/li&gt;
          &lt;li&gt;Pasang busi baru, kencangkan dengan tangan terlebih dahulu, lalu kencangkan penuh menggunakan kunci busi.&lt;/li&gt;
          &lt;li&gt;Sepeda motor siap digunakan kembali.&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;p class="lead" style="margin-top:14px;"&gt;Teks di atas &lt;b style="color:var(--off-white);"&gt;belum dianotasi&lt;/b&gt; — tugas kelompok adalah menemukan sendiri bagian yang bermasalah menggunakan keenam kriteria evaluasi.&lt;/p&gt;

    &lt;h4 style="color:var(--off-white); margin-top:24px;"&gt;Petunjuk Pengerjaan&lt;/h4&gt;
    &lt;ol class="steps-num"&gt;
      &lt;li&gt;&lt;b&gt;Bentuk kelompok&lt;/b&gt; beranggotakan 4–5 orang sesuai pembagian dari guru.&lt;/li&gt;
      &lt;li&gt;&lt;b&gt;Baca teks prosedur&lt;/b&gt; di atas secara bersama-sama dalam kelompok, lalu identifikasi struktur teks (tujuan, alat/bahan, langkah-langkah).&lt;/li&gt;
      &lt;li&gt;&lt;b&gt;Isi Tabel Evaluasi&lt;/b&gt; di bawah ini untuk setiap kriteria: tuliskan temuan, beri skor 1–4, dan berikan alasan.&lt;/li&gt;
      &lt;li&gt;&lt;b&gt;Rumuskan rekomendasi perbaikan&lt;/b&gt; untuk setiap bagian teks yang dinilai bermasalah.&lt;/li&gt;
      &lt;li&gt;&lt;b&gt;Presentasikan hasil&lt;/b&gt; di depan kelas selama maksimal 5 menit per kelompok, dilanjutkan tanya jawab singkat.&lt;/li&gt;
    &lt;/ol&gt;

    &lt;h4 style="color:var(--off-white); margin-top:26px;"&gt;Format Tabel Evaluasi Kelompok&lt;/h4&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;th style="width:22%;"&gt;Kriteria&lt;/th&gt;&lt;th style="width:34%;"&gt;Temuan &amp;amp; Bukti dari Teks&lt;/th&gt;&lt;th style="width:10%;"&gt;Skor (1–4)&lt;/th&gt;&lt;th&gt;Rekomendasi Perbaikan&lt;/th&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;A. Keakuratan&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;B. Kelengkapan&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;C. Kelogisan urutan&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;D. Kejelasan bahasa&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;E. Kesesuaian tujuan&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;F. Keselamatan/kelayakan&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;

    &lt;h4 style="color:var(--off-white); margin-top:26px;"&gt;Rubrik Penilaian Kelompok&lt;/h4&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;th style="width:26%;"&gt;Aspek Penilaian&lt;/th&gt;&lt;th&gt;Skor 4 (Sangat Baik)&lt;/th&gt;&lt;th&gt;Skor 3 (Baik)&lt;/th&gt;&lt;th&gt;Skor 2 (Cukup)&lt;/th&gt;&lt;th&gt;Skor 1 (Kurang)&lt;/th&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Ketepatan analisis kriteria&lt;/td&gt;&lt;td&gt;Seluruh kriteria dianalisis tepat dengan bukti jelas&lt;/td&gt;&lt;td&gt;Sebagian besar kriteria tepat&lt;/td&gt;&lt;td&gt;Analisis dangkal, sebagian kriteria terlewat&lt;/td&gt;&lt;td&gt;Analisis tidak sesuai kriteria&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Kualitas rekomendasi&lt;/td&gt;&lt;td&gt;Rekomendasi konkret dan dapat diterapkan&lt;/td&gt;&lt;td&gt;Rekomendasi cukup jelas&lt;/td&gt;&lt;td&gt;Rekomendasi umum/kurang spesifik&lt;/td&gt;&lt;td&gt;Tidak ada rekomendasi&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Kerja sama kelompok&lt;/td&gt;&lt;td&gt;Seluruh anggota aktif berkontribusi&lt;/td&gt;&lt;td&gt;Sebagian besar anggota aktif&lt;/td&gt;&lt;td&gt;Hanya sebagian kecil anggota aktif&lt;/td&gt;&lt;td&gt;Didominasi satu orang&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Presentasi&lt;/td&gt;&lt;td&gt;Jelas, percaya diri, menjawab pertanyaan dengan baik&lt;/td&gt;&lt;td&gt;Jelas namun kurang percaya diri&lt;/td&gt;&lt;td&gt;Kurang jelas/terbata-bata&lt;/td&gt;&lt;td&gt;Tidak dapat menjelaskan hasil&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/section&gt;

  &lt;hr class="divider-dash"&gt;

  &lt;!-- ============ RANGKUMAN UNTUK BUKU CATATAN ============ --&gt;
  &lt;section class="section" id="catatan-murid"&gt;
    &lt;div class="eyebrow"&gt;09 — Penutup Pembelajaran&lt;/div&gt;
    &lt;h2 class="section-title"&gt;Rangkuman untuk Dicatat di Buku Catatan&lt;/h2&gt;
    &lt;p class="lead"&gt;Sebagai penutup pertemuan, setiap murid menuliskan satu rangkuman ringkas secara mandiri di buku catatan sebagai simpulan pribadi atas materi hari ini.&lt;/p&gt;

    &lt;div class="notebook"&gt;
      &lt;div class="content"&gt;
        &lt;h3&gt;Instruksi Menulis Rangkuman&lt;/h3&gt;
        &lt;p style="margin-top:0;"&gt;Tulis di buku catatan masing-masing, maksimal &lt;b&gt;satu halaman&lt;/b&gt;, mencakup poin-poin berikut:&lt;/p&gt;
        &lt;ul&gt;
          &lt;li&gt;Pengertian evaluasi informasi dalam teks prosedur, menurut pemahaman sendiri.&lt;/li&gt;
          &lt;li&gt;Minimal empat dari enam kriteria evaluasi teks prosedur yang telah dipelajari beserta penjelasan singkat.&lt;/li&gt;
          &lt;li&gt;Langkah-langkah mengevaluasi teks prosedur secara berurutan.&lt;/li&gt;
          &lt;li&gt;Satu manfaat konkret mempelajari kemampuan ini bagi bidang keahlian Teknik Otomotif Sepeda Motor.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p style="margin-bottom:0;"&gt;&lt;i&gt;Rangkuman ditulis dengan kalimat sendiri (bukan menyalin ulang dari materi), dan dikumpulkan pada awal pertemuan berikutnya untuk diperiksa guru.&lt;/i&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

&lt;/main&gt;

&lt;footer&gt;
  &lt;div class="doc-code"&gt;DOK/B.INDO/XI/PROSEDUR-EVAL — Fokus Tujuan Pembelajaran, Materi Inti, Tugas Kelompok TBSM &amp;amp; Rangkuman Buku Catatan, 1× pertemuan (3 JP)&lt;/div&gt;
  &lt;p style="margin:0;"&gt;Referensi: Kurikulum Merdeka — Capaian Pembelajaran Bahasa Indonesia Fase F (Elemen Membaca dan Memirsa); Buku Teks Bahasa Indonesia Kelas XI SMK/MAK Kemendikbudristek.&lt;/p&gt;
&lt;/footer&gt;
&lt;/div&gt;</description><link>http://kitab-investasi.blogspot.com/2026/07/evaluasi-informasi-dalam-teks-prosedur.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-6948960574111861418</guid><pubDate>Thu, 23 Jul 2026 05:29:08 +0000</pubDate><atom:updated>2026-07-23T12:43:21.641+07:00</atom:updated><title>SERTIFIKAT KOMBEL</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;Generator Sertifikat&lt;/title&gt;

&lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&amp;display=swap" rel="stylesheet"&gt;

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"&gt;&lt;/script&gt;

&lt;style&gt;

body{
    font-family:Arial,sans-serif;
    background:#eef2f7;
    padding:20px;
    max-width:700px;
    margin:auto;
}

.card{
    background:white;
    padding:24px;
    border-radius:20px;
    box-shadow:0 10px 20px rgba(0,0,0,.1);
}

h2{
    text-align:center;
    color:#1e4668;
}

.confirm-box{
    background:#f0f6ff;
    border-left:5px solid #2c7da0;
    padding:16px;
    border-radius:16px;
    margin-bottom:20px;
    text-align:center;
}

.confirm-box p{
    margin-top:0;
    font-weight:bold;
    color:#1e4668;
}

.confirm-buttons{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.confirm-buttons button{
    flex:1;
}

.yes-btn{
    background:#1f8a4c;
}

.yes-btn:hover{
    background:#166638;
}

.no-btn{
    background:#c0392b;
}

.no-btn:hover{
    background:#962d22;
}

input,select,button{
    width:100%;
    padding:12px;
    margin-top:10px;
    border-radius:12px;
    border:1px solid #ccc;
    font-size:16px;
}

button{
    background:#2c7da0;
    color:white;
    border:none;
    cursor:pointer;
    font-weight:bold;
}

button:hover{
    background:#1f5e7a;
}

button:disabled{
    background:#94a3b8;
    cursor:not-allowed;
}

input:disabled,
select:disabled{
    background:#f1f5f9;
}

#preview{
    width:100%;
    border-radius:12px;
    margin-top:10px;
}

.loading{
    display:none;
    margin-top:15px;
    color:#1e4668;
    font-weight:bold;
    text-align:center;
}

.status{
    margin-top:12px;
    font-weight:bold;
}

.success{
    color:#1f8a4c;
}

.error{
    color:#c0392b;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="card"&gt;

&lt;h2&gt;&#128220; Generator Sertifikat&lt;/h2&gt;

&lt;!-- ================= KONFIRMASI ================= --&gt;

&lt;div class="confirm-box"&gt;

&lt;p&gt;&#128269; Apakah Anda mengikuti pelatihan?&lt;/p&gt;

&lt;div class="confirm-buttons"&gt;

&lt;button class="yes-btn" onclick="confirmIkut()"&gt;
✅ YA, IKUT
&lt;/button&gt;

&lt;button class="no-btn" onclick="confirmTidakIkut()"&gt;
❌ TIDAK
&lt;/button&gt;

&lt;/div&gt;

&lt;div id="statusKonfirmasi" class="status"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;!-- ================= FORM ================= --&gt;

&lt;label&gt;Nama Lengkap&lt;/label&gt;

&lt;input
type="text"
id="nama"
placeholder="Contoh: Ahmad Fauzi"
disabled&gt;

&lt;label&gt;Peran&lt;/label&gt;

&lt;select id="peran" disabled&gt;
    &lt;option&gt;Peserta&lt;/option&gt;
    &lt;option&gt;Narasumber&lt;/option&gt;
&lt;/select&gt;

&lt;img
id="preview"
src="https://lh3.googleusercontent.com/d/1wYfpuHGjH4rw1199lBUM7vvdigBwkJbY"
alt="Template"&gt;

&lt;button
id="downloadBtn"
onclick="generatePDF()"
disabled&gt;

⬇️ UNDUH PDF

&lt;/button&gt;

&lt;div class="loading" id="loading"&gt;
Memproses PDF...
&lt;/div&gt;

&lt;/div&gt;

&lt;script&gt;

// ================= TEMPLATE (DIUBAH) =================

const FILE_ID =
'1wYfpuHGjH4rw1199lBUM7vvdigBwkJbY';  // &lt;-- ID baru

const TEMPLATE_URL =
`https://lh3.googleusercontent.com/d/${FILE_ID}`;

// ================= UTIL =================

function showLoading(show){

    document.getElementById('loading').style.display =
        show ? 'block' : 'none';

}

function getRomanMonth(monthIndex){

    const romawi = [
        "I","II","III","IV","V","VI",
        "VII","VIII","IX","X","XI","XII"
    ];

    return romawi[monthIndex];

}

function capitalizeEachWord(text){

    return text
        .toLowerCase()
        .replace(/\b\w/g,c=&gt;c.toUpperCase());

}

// ================= KONFIRMASI =================

function confirmIkut(){

    document.getElementById('nama').disabled = false;

    document.getElementById('peran').disabled = false;

    document.getElementById('downloadBtn').disabled = false;

    document.getElementById('statusKonfirmasi').innerHTML =
        '&lt;span class="success"&gt;✅ Konfirmasi diterima. Anda dapat mengunduh sertifikat.&lt;/span&gt;';

}

function confirmTidakIkut(){

    document.getElementById('nama').disabled = true;

    document.getElementById('peran').disabled = true;

    document.getElementById('downloadBtn').disabled = true;

    document.getElementById('statusKonfirmasi').innerHTML =
        '&lt;span class="error"&gt;❌ Anda tidak dapat mengunduh sertifikat.&lt;/span&gt;';

}

// ================= LOAD IMAGE =================

function loadImage(url){

    return new Promise((resolve,reject)=&gt;{

        const img = new Image();

        img.crossOrigin = "anonymous";

        img.onload = ()=&gt;resolve(img);

        img.onerror = ()=&gt;{

            reject(
                new Error(
                    'Template Google Drive gagal dimuat'
                )
            );

        };

        img.src = url + '?t=' + Date.now();

    });

}

// ================= NOMOR =================

async function generateNomor(){

    const now = new Date();

    const bulan =
        getRomanMonth(now.getMonth());

    const tahun =
        now.getFullYear();

    const nomor =
        Math.floor(Math.random()*900)+100;

    return `${nomor}/K/${bulan}/${tahun}`;

}

// ================= PDF =================

async function generatePDF(){

    const namaInput =
        document.getElementById('nama');

    const peranSelect =
        document.getElementById('peran');

    let nama =
        namaInput.value.trim();

    const peran =
        peranSelect.value;

    if(!nama){

        alert('Nama wajib diisi');

        return;

    }

    nama =
        capitalizeEachWord(nama);

    showLoading(true);

    try{

        await document.fonts.ready;

        const img =
            await loadImage(TEMPLATE_URL);

        const canvas =
            document.createElement('canvas');

        canvas.width = img.width;
        canvas.height = img.height;

        const ctx =
            canvas.getContext('2d');

        ctx.drawImage(
            img,
            0,
            0,
            canvas.width,
            canvas.height
        );

        // ================= POSISI =================

        const nomorY =
            canvas.height * 0.235;

        const namaY =
            canvas.height * 0.3990;

        const peranY =
            canvas.height * 0.5420;

        // ================= STYLE =================

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        ctx.fillStyle = '#000';

        // nomor
        const nomorSertifikat =
            await generateNomor();

        ctx.font =
            `bold ${canvas.width*0.0125}px Montserrat`;

        ctx.fillText(
            nomorSertifikat,
            canvas.width/2,
            nomorY
        );

        // nama auto shrink
        let fontSize =
            canvas.width * 0.031;

        ctx.font =
            `700 ${fontSize}px Montserrat`;

        let textWidth =
            ctx.measureText(nama).width;

        const maxWidth =
            canvas.width - 180;

        while(
            textWidth &gt; maxWidth &amp;&amp;
            fontSize &gt; 20
        ){

            fontSize -= 2;

            ctx.font =
                `700 ${fontSize}px Montserrat`;

            textWidth =
                ctx.measureText(nama).width;

        }

        ctx.fillText(
            nama,
            canvas.width/2,
            namaY
        );

        // peran
        ctx.font =
            `bold ${canvas.width*0.024}px Montserrat`;

        ctx.fillText(
            peran,
            canvas.width/2,
            peranY
        );

        // ================= PDF =================

        const imageData =
            canvas.toDataURL(
                'image/jpeg',
                1.0
            );

        const { jsPDF } =
            window.jspdf;

        const pdf =
            new jsPDF({

                orientation:
                    canvas.width &gt; canvas.height
                    ? 'landscape'
                    : 'portrait',

                unit:'px',

                format:[
                    canvas.width,
                    canvas.height
                ]

            });

        pdf.addImage(
            imageData,
            'JPEG',
            0,
            0,
            canvas.width,
            canvas.height
        );

        const safeName =
            nama.replace(/[^a-z0-9]/gi,'_');

        pdf.save(
            `Sertifikat_${safeName}.pdf`
        );

    }catch(error){

        console.error(error);

        alert(
            '❌ Gagal membuat PDF\n\n' +
            error.message +
            '\n\nPastikan file Google Drive bersifat PUBLIC.'
        );

    }finally{

        showLoading(false);

    }

}

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</description><link>http://kitab-investasi.blogspot.com/2026/07/sertifikat-kombel.html</link><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://lh3.googleusercontent.com/d/1wYfpuHGjH4rw1199lBUM7vvdigBwkJbY=s72-c" width="72"/><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-4157946749772995627</guid><pubDate>Wed, 22 Jul 2026 02:45:18 +0000</pubDate><atom:updated>2026-07-22T09:58:50.051+07:00</atom:updated><title>Pengantar Informatika, Budaya Kerja Digital, Etika &amp; Profesi Teknologi Informasi</title><description>
&lt;html lang="id"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;&lt;/meta&gt;
&lt;meta content="width=device-width, initial-scale=1.0" name="viewport"&gt;&lt;/meta&gt;
&lt;title&gt;Modul Informatika X — Pengantar Informatika, Budaya Kerja Digital, Etika &amp; Profesi TI&lt;/title&gt;
&lt;link href="https://fonts.googleapis.com" rel="preconnect"&gt;&lt;/link&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&amp;amp;family=Literata:opsz,wght@18..144,400;18..144,500;18..144,600&amp;amp;family=JetBrains+Mono:wght@400;500&amp;amp;display=swap" rel="stylesheet"&gt;&lt;/link&gt;
&lt;style&gt;
  :root{
    --bg:#EEF1F6;
    --paper:#FFFFFF;
    --ink:#171F30;
    --ink-soft:#4B5568;
    --line:#D8DEEA;

    --c-info:#2B6CB0;      /* Pengantar Informatika */
    --c-info-bg:#E7F0FA;
    --c-budaya:#0C8F80;    /* Budaya Kerja Digital */
    --c-budaya-bg:#E3F5F1;
    --c-etika:#B5570C;     /* Etika Digital */
    --c-etika-bg:#FBEEE2;
    --c-profesi:#6D28D9;   /* Profesi TI */
    --c-profesi-bg:#EFE7FC;

    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Literata', Georgia, serif;
    --font-mono:'JetBrains Mono', monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.65;
    font-size:16px;
  }
  ::selection{background:var(--c-info); color:#fff;}

  a{color:inherit;}

  /* ---------- Layout shell ---------- */
  .shell{
    display:grid;
    grid-template-columns:280px 1fr;
    max-width:1280px;
    margin:0 auto;
  }
  @media (max-width:900px){
    .shell{grid-template-columns:1fr;}
    .sidebar{position:static; height:auto; order:2;}
  }

  /* ---------- Sidebar ---------- */
  .sidebar{
    position:sticky; top:0; height:100vh;
    padding:28px 20px 20px 28px;
    display:flex; flex-direction:column; gap:22px;
    overflow-y:auto;
    border-right:1px solid var(--line);
  }
  .brand{
    font-family:var(--font-display); font-weight:700; font-size:15px;
    letter-spacing:.02em;
  }
  .brand span{display:block; font-family:var(--font-mono); font-weight:400; font-size:11px; color:var(--ink-soft); margin-top:4px; letter-spacing:.03em;}

  .jp-track{display:flex; flex-direction:column; gap:2px; margin-top:4px;}
  .jp-track .label{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;}
  .jp-node{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);
    padding:5px 0;
  }
  .jp-dot{width:8px; height:8px; border-radius:50%; background:var(--line); flex-shrink:0;}
  .jp-node.i1 .jp-dot{background:var(--c-info);}
  .jp-node.i2 .jp-dot{background:var(--c-budaya);}
  .jp-node.i3 .jp-dot{background:var(--c-etika);}
  .jp-node.i4 .jp-dot{background:var(--c-profesi);}

  nav.toc{display:flex; flex-direction:column; gap:1px; font-family:var(--font-display); font-size:13.5px;}
  nav.toc .grp-label{font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; margin:14px 0 6px;}
  nav.toc a{
    display:block; padding:7px 10px; border-radius:6px; text-decoration:none;
    color:var(--ink-soft); border-left:2px solid transparent;
  }
  nav.toc a:hover{background:var(--paper); color:var(--ink);}
  nav.toc a.c1{border-left-color:var(--c-info);}
  nav.toc a.c2{border-left-color:var(--c-budaya);}
  nav.toc a.c3{border-left-color:var(--c-etika);}
  nav.toc a.c4{border-left-color:var(--c-profesi);}

  /* ---------- Main ---------- */
  main{padding:36px 40px 100px; min-width:0;}
  @media (max-width:640px){main{padding:24px 18px 80px;}}

  section{scroll-margin-top:24px;}

  .eyebrow{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:8px; display:flex; align-items:center; gap:8px;
  }
  .tag{
    font-family:var(--font-mono); font-size:10.5px; padding:2px 8px; border-radius:999px;
    border:1px solid currentColor;
  }

  h1,h2,h3{font-family:var(--font-display); font-weight:700; line-height:1.15;}
  h1{font-size:clamp(28px,4vw,42px); letter-spacing:-.01em;}
  h2{font-size:26px; margin-bottom:14px;}
  h3{font-size:17px; margin:20px 0 8px;}
  p{margin-bottom:12px; color:var(--ink);}
  strong{font-weight:600;}

  /* ---------- Hero ---------- */
  .hero{padding-bottom:40px; border-bottom:1px solid var(--line); margin-bottom:44px;}
  .hero-top{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap;}
  .hero p.lede{font-size:16.5px; max-width:56ch; color:var(--ink-soft); margin-top:14px;}
  .meta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
  .meta-chip{
    font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);
    border:1px solid var(--line); padding:5px 11px; border-radius:999px; background:var(--paper);
  }

  .hub{flex-shrink:0;}

  /* ---------- Cards / boxes ---------- */
  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:14px;
    padding:22px 26px; margin-bottom:16px;
  }

  .rpp{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:44px;
  }
  .rpp div{padding:16px 18px; border-right:1px solid var(--line);}
  .rpp div:last-child{border-right:none;}
  .rpp .k{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:5px;}
  .rpp .v{font-family:var(--font-display); font-weight:600; font-size:14.5px;}
  @media (max-width:700px){.rpp{grid-template-columns:1fr 1fr;} .rpp div{border-bottom:1px solid var(--line);}}

  .obj-list{list-style:none; display:flex; flex-direction:column; gap:10px; margin:16px 0 40px;}
  .obj-list li{
    display:flex; gap:12px; align-items:flex-start; background:var(--paper);
    border:1px solid var(--line); border-radius:10px; padding:12px 16px; font-size:14.5px;
  }
  .obj-list .n{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); flex-shrink:0; padding-top:2px;}

  /* ---------- Topic sections ---------- */
  .topic{
    border-radius:18px; padding:34px clamp(20px,4vw,40px); margin-bottom:36px;
    border:1px solid var(--line); background:var(--paper);
  }
  .topic .eyebrow .tag{border-color:currentColor;}
  .topic-1{border-top:5px solid var(--c-info);}
  .topic-2{border-top:5px solid var(--c-budaya);}
  .topic-3{border-top:5px solid var(--c-etika);}
  .topic-4{border-top:5px solid var(--c-profesi);}
  .topic-1 .eyebrow, .topic-1 h2{color:var(--c-info);}
  .topic-2 .eyebrow, .topic-2 h2{color:var(--c-budaya);}
  .topic-3 .eyebrow, .topic-3 h2{color:var(--c-etika);}
  .topic-4 .eyebrow, .topic-4 h2{color:var(--c-profesi);}

  .subgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:18px 0;}
  .pill-card{
    border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--bg);
  }
  .pill-card h4{font-family:var(--font-display); font-size:14px; margin-bottom:5px; color:var(--ink);}
  .pill-card p{font-size:13.5px; margin:0; color:var(--ink-soft);}

  table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14px;}
  th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
  th{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:500;}

  .timeline{margin:20px 0; border-left:2px solid var(--line); padding-left:22px; display:flex; flex-direction:column; gap:18px;}
  .timeline .ev{position:relative;}
  .timeline .ev::before{content:''; position:absolute; left:-27.5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--c-info);}
  .timeline .ev .era{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);}
  .timeline .ev h4{font-family:var(--font-display); font-size:14.5px; margin:2px 0 3px;}
  .timeline .ev p{font-size:13.5px; margin:0; color:var(--ink-soft);}

  .callout{
    border-radius:12px; padding:16px 18px; margin:18px 0; font-size:14.5px;
    border:1px dashed var(--line); background:var(--bg);
  }
  .callout b{font-family:var(--font-display);}

  ul.check{list-style:none; display:flex; flex-direction:column; gap:8px; margin:12px 0;}
  ul.check li{padding-left:26px; position:relative; font-size:14.5px;}
  ul.check li::before{content:'✓'; position:absolute; left:0; top:0; font-family:var(--font-mono); font-weight:600;}

  /* ---------- Task blocks ---------- */
  .task{
    border-radius:18px; padding:34px clamp(20px,4vw,40px); margin-bottom:28px; color:#fff;
  }
  .task-group{background:linear-gradient(155deg,#1B2A4A,#101830);}
  .task-solo{background:var(--paper); border:2px solid var(--ink); color:var(--ink);}
  .task .eyebrow{color:#B9C4E0;}
  .task-solo .eyebrow{color:var(--ink-soft);}
  .task h2{color:#fff;}
  .task-solo h2{color:var(--ink);}
  .task p{color:#DCE3F2;}
  .task-solo p{color:var(--ink-soft);}

  .steps{counter-reset:step; display:flex; flex-direction:column; gap:12px; margin:18px 0;}
  .steps .step{counter-increment:step; display:flex; gap:14px; align-items:flex-start;}
  .steps .step::before{
    content:counter(step); font-family:var(--font-mono); font-size:12px; flex-shrink:0;
    width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35);
  }
  .task-solo .steps .step::before{background:var(--bg); border-color:var(--line); color:var(--ink);}
  .steps .step div{font-size:14.5px;}
  .steps .step strong{display:block; margin-bottom:2px; font-family:var(--font-display); font-size:14.5px;}

  .rubric{width:100%; margin-top:14px; font-size:13.5px; border-collapse:collapse;}
  .rubric th,.rubric td{padding:9px 10px; border-bottom:1px solid rgba(255,255,255,.18); color:#DCE3F2;}
  .rubric th{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; color:#B9C4E0;}

  .deliverable-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
  .deliverable-row span{
    font-family:var(--font-mono); font-size:11.5px; padding:6px 12px; border-radius:999px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  }
  .task-solo .deliverable-row span{background:var(--bg); border-color:var(--line);}

  footer{
    max-width:1280px; margin:0 auto; padding:30px 40px 60px; grid-column:1/-1;
    font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
  }

  @media print{
    .sidebar{display:none;}
    .shell{grid-template-columns:1fr;}
  }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="shell"&gt;

  &lt;!-- ============ SIDEBAR ============ --&gt;
  &lt;aside class="sidebar"&gt;
    &lt;div class="brand"&gt;Modul Informatika&lt;span&gt;Kelas X SMK · Fase E&lt;/span&gt;&lt;/div&gt;

    &lt;div class="jp-track"&gt;
      &lt;div class="label"&gt;Alur 4 JP&lt;/div&gt;
      &lt;div class="jp-node i1"&gt;&lt;span class="jp-dot"&gt;&lt;/span&gt;JP 1 — Pengantar Informatika&lt;/div&gt;
      &lt;div class="jp-node i2"&gt;&lt;span class="jp-dot"&gt;&lt;/span&gt;JP 2 — Budaya Kerja Digital&lt;/div&gt;
      &lt;div class="jp-node i3"&gt;&lt;span class="jp-dot"&gt;&lt;/span&gt;JP 3 — Etika, HAKI &amp;amp; Keamanan&lt;/div&gt;
      &lt;div class="jp-node i4"&gt;&lt;span class="jp-dot"&gt;&lt;/span&gt;JP 4 — Profesi TI &amp;amp; Tugas&lt;/div&gt;
    &lt;/div&gt;

    &lt;nav class="toc"&gt;
      &lt;a href="#tujuan"&gt;Tujuan Pembelajaran&lt;/a&gt;
      &lt;div class="grp-label"&gt;JP 1&lt;/div&gt;
      &lt;a class="c1" href="#materi-1"&gt;01 · Pengantar Informatika&lt;/a&gt;
      &lt;div class="grp-label"&gt;JP 2&lt;/div&gt;
      &lt;a class="c2" href="#materi-2"&gt;02 · Budaya Kerja Digital&lt;/a&gt;
      &lt;div class="grp-label"&gt;JP 3&lt;/div&gt;
      &lt;a class="c3" href="#materi-3"&gt;03 · Etika, HAKI &amp;amp; Keamanan&lt;/a&gt;
      &lt;div class="grp-label"&gt;JP 4&lt;/div&gt;
      &lt;a class="c4" href="#materi-4"&gt;04 · Profesi Teknologi Informasi&lt;/a&gt;
      &lt;div class="grp-label"&gt;Penutup&lt;/div&gt;
      &lt;a href="#tugas-kelompok"&gt;Tugas Kelompok&lt;/a&gt;
      &lt;a href="#tugas-mandiri"&gt;Kesimpulan (Buku)&lt;/a&gt;
      &lt;a href="#refleksi"&gt;Refleksi Cepat&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/aside&gt;

  &lt;!-- ============ MAIN ============ --&gt;
  &lt;main&gt;

    &lt;!-- HERO --&gt;
    &lt;section class="hero"&gt;
      &lt;div class="hero-top"&gt;
        &lt;div&gt;
          &lt;div class="eyebrow"&gt;&lt;span class="tag"&gt;Informatika&lt;/span&gt; Materi Pertemuan · 4 JP (180 menit)&lt;/div&gt;
          &lt;h1&gt;Pengantar Informatika, Budaya Kerja Digital,&lt;br /&gt;Etika &amp;amp; Profesi Teknologi Informasi&lt;/h1&gt;
          &lt;p class="lede"&gt;Empat topik ini adalah satu kesatuan: memahami &lt;em&gt;apa itu&lt;/em&gt; Informatika membuka jalan untuk memahami &lt;em&gt;bagaimana&lt;/em&gt; orang bekerja di dunia digital, &lt;em&gt;aturan main&lt;/em&gt; apa yang harus dipegang, dan &lt;em&gt;ke mana&lt;/em&gt; semua ini bisa membawamu sebagai karier.&lt;/p&gt;
          &lt;div class="meta-row"&gt;
            &lt;span class="meta-chip"&gt;Mapel: Informatika&lt;/span&gt;
            &lt;span class="meta-chip"&gt;Kelas X SMK&lt;/span&gt;
            &lt;span class="meta-chip"&gt;4 JP × 45 menit&lt;/span&gt;
            &lt;span class="meta-chip"&gt;Elemen: Dampak Sosial Informatika&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;svg aria-label="Diagram keterkaitan empat topik" class="hub" height="230" role="img" viewbox="0 0 230 230" width="230" xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;line stroke-width="2" stroke="#D8DEEA" x1="115" x2="115" y1="115" y2="34"&gt;
          &lt;line stroke-width="2" stroke="#D8DEEA" x1="115" x2="196" y1="115" y2="115"&gt;
          &lt;line stroke-width="2" stroke="#D8DEEA" x1="115" x2="115" y1="115" y2="196"&gt;
          &lt;line stroke-width="2" stroke="#D8DEEA" x1="115" x2="34" y1="115" y2="115"&gt;
          &lt;circle cx="115" cy="115" fill="#171F30" r="30"&gt;
          &lt;text fill="#fff" font-family="Space Grotesk" font-size="9" font-weight="700" text-anchor="middle" x="115" y="111"&gt;EKOSISTEM&lt;/text&gt;
          &lt;text fill="#fff" font-family="Space Grotesk" font-size="9" font-weight="700" text-anchor="middle" x="115" y="122"&gt;TI&lt;/text&gt;
          &lt;circle cx="115" cy="34" fill="#E7F0FA" r="24" stroke-width="2" stroke="#2B6CB0"&gt;
          &lt;text fill="#2B6CB0" font-family="Space Grotesk" font-size="8" font-weight="700" text-anchor="middle" x="115" y="31"&gt;01&lt;/text&gt;
          &lt;text fill="#2B6CB0" font-family="Space Grotesk" font-size="7" font-weight="700" text-anchor="middle" x="115" y="41"&gt;Informatika&lt;/text&gt;
          &lt;circle cx="196" cy="115" fill="#E3F5F1" r="24" stroke-width="2" stroke="#0C8F80"&gt;
          &lt;text fill="#0C8F80" font-family="Space Grotesk" font-size="8" font-weight="700" text-anchor="middle" x="196" y="112"&gt;02&lt;/text&gt;
          &lt;text fill="#0C8F80" font-family="Space Grotesk" font-size="6.3" font-weight="700" text-anchor="middle" x="196" y="122"&gt;Budaya Kerja&lt;/text&gt;
          &lt;circle cx="115" cy="196" fill="#FBEEE2" r="24" stroke-width="2" stroke="#B5570C"&gt;
          &lt;text fill="#B5570C" font-family="Space Grotesk" font-size="8" font-weight="700" text-anchor="middle" x="115" y="193"&gt;03&lt;/text&gt;
          &lt;text fill="#B5570C" font-family="Space Grotesk" font-size="7" font-weight="700" text-anchor="middle" x="115" y="203"&gt;Etika&lt;/text&gt;
          &lt;circle cx="34" cy="115" fill="#EFE7FC" r="24" stroke-width="2" stroke="#6D28D9"&gt;
          &lt;text fill="#6D28D9" font-family="Space Grotesk" font-size="8" font-weight="700" text-anchor="middle" x="34" y="112"&gt;04&lt;/text&gt;
          &lt;text fill="#6D28D9" font-family="Space Grotesk" font-size="6.3" font-weight="700" text-anchor="middle" x="34" y="122"&gt;Profesi TI&lt;/text&gt;
        &lt;/circle&gt;&lt;/circle&gt;&lt;/circle&gt;&lt;/circle&gt;&lt;/circle&gt;&lt;/line&gt;&lt;/line&gt;&lt;/line&gt;&lt;/line&gt;&lt;/svg&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;!-- RPP MINI --&gt;
    &lt;div class="rpp"&gt;
      &lt;div&gt;&lt;div class="k"&gt;Fase / Kelas&lt;/div&gt;&lt;div class="v"&gt;Fase E · X SMK&lt;/div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;div class="k"&gt;Alokasi Waktu&lt;/div&gt;&lt;div class="v"&gt;4 JP (180 menit)&lt;/div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;div class="k"&gt;Model&lt;/div&gt;&lt;div class="v"&gt;Diskusi &amp;amp; Kerja Kelompok&lt;/div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;div class="k"&gt;Penilaian&lt;/div&gt;&lt;div class="v"&gt;Produk + Kesimpulan Tertulis&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- TUJUAN --&gt;
    &lt;section id="tujuan"&gt;
      &lt;div class="eyebrow"&gt;&lt;span class="tag"&gt;Tujuan Pembelajaran&lt;/span&gt;&lt;/div&gt;
      &lt;h2 style="color: var(--ink);"&gt;Setelah pertemuan ini, murid mampu:&lt;/h2&gt;
      &lt;ul class="obj-list"&gt;
        &lt;li&gt;&lt;span class="n"&gt;TP.1&lt;/span&gt; Menjelaskan ruang lingkup Informatika dan bidang-bidang keilmuan yang menyusunnya.&lt;/li&gt;
        &lt;li&gt;&lt;span class="n"&gt;TP.2&lt;/span&gt; Menguraikan perkembangan teknologi digital dan dampaknya terhadap cara manusia bekerja.&lt;/li&gt;
        &lt;li&gt;&lt;span class="n"&gt;TP.3&lt;/span&gt; Menerapkan prinsip etika digital, menghormati hak kekayaan intelektual (HAKI), dan praktik keamanan digital dasar.&lt;/li&gt;
        &lt;li&gt;&lt;span class="n"&gt;TP.4&lt;/span&gt; Mengidentifikasi ragam profesi di bidang Teknologi Informasi beserta kompetensi yang dibutuhkan.&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;

    &lt;!-- ================= TOPIK 1 ================= --&gt;
    &lt;section class="topic topic-1" id="materi-1"&gt;
      &lt;div class="eyebrow"&gt;&lt;span class="tag"&gt;JP 1 · 45 menit&lt;/span&gt; 01 — Pengantar Informatika&lt;/div&gt;
      &lt;h2&gt;Apa Itu Informatika, dan Seluas Apa Cakupannya?&lt;/h2&gt;
      &lt;p&gt;&lt;strong&gt;Informatika&lt;/strong&gt; adalah ilmu yang mempelajari bagaimana informasi direpresentasikan, diproses, disimpan, dan dikomunikasikan secara sistematis dengan bantuan komputer. Informatika bukan sekadar "belajar komputer" — ia adalah cara berpikir untuk memecahkan masalah secara terstruktur (disebut &lt;em&gt;computational thinking&lt;/em&gt; atau berpikir komputasional), yang kemudian diwujudkan lewat algoritma, program, dan sistem.&lt;/p&gt;

      &lt;h3&gt;Tujuh Bidang Ilmu dalam Informatika&lt;/h3&gt;
      &lt;div class="subgrid"&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Berpikir Komputasional&lt;/h4&gt;&lt;p&gt;Kemampuan memecah masalah kompleks menjadi langkah-langkah logis dan sistematis.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Teknologi Informasi &amp;amp; Komunikasi&lt;/h4&gt;&lt;p&gt;Penggunaan perangkat lunak dan platform digital untuk produktivitas sehari-hari.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Sistem Komputer&lt;/h4&gt;&lt;p&gt;Perangkat keras, perangkat lunak, dan cara keduanya bekerja sama memproses data.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Jaringan Komputer &amp;amp; Internet&lt;/h4&gt;&lt;p&gt;Bagaimana perangkat saling terhubung dan bertukar data melalui jaringan.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Analisis Data&lt;/h4&gt;&lt;p&gt;Mengolah data mentah menjadi informasi yang bermakna untuk pengambilan keputusan.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Algoritma &amp;amp; Pemrograman&lt;/h4&gt;&lt;p&gt;Menyusun instruksi logis yang dapat dieksekusi komputer untuk menyelesaikan tugas.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Dampak Sosial Informatika&lt;/h4&gt;&lt;p&gt;Pengaruh teknologi terhadap ekonomi, budaya, etika, dan kehidupan sosial masyarakat.&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;

      &lt;h3&gt;Perkembangan Teknologi Digital&lt;/h3&gt;
      &lt;p&gt;Perkembangan komputer dan revolusi industri berjalan beriringan, mengubah cara manusia bekerja di setiap era:&lt;/p&gt;
      &lt;div class="timeline"&gt;
        &lt;div class="ev"&gt;&lt;div class="era"&gt;1780-an — Revolusi Industri 1.0&lt;/div&gt;&lt;h4&gt;Mekanisasi &amp;amp; Mesin Uap&lt;/h4&gt;&lt;p&gt;Tenaga manusia digantikan mesin mekanis untuk produksi massal.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="ev"&gt;&lt;div class="era"&gt;1870-an — Revolusi Industri 2.0&lt;/div&gt;&lt;h4&gt;Listrik &amp;amp; Produksi Massal&lt;/h4&gt;&lt;p&gt;Lini produksi (assembly line) dan tenaga listrik mempercepat industri.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="ev"&gt;&lt;div class="era"&gt;1970-an — Revolusi Industri 3.0&lt;/div&gt;&lt;h4&gt;Komputer &amp;amp; Otomasi&lt;/h4&gt;&lt;p&gt;Komputer, elektronik, dan internet mulai mengotomasi proses kerja.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="ev"&gt;&lt;div class="era"&gt;2010-an — Revolusi Industri 4.0&lt;/div&gt;&lt;h4&gt;Konektivitas &amp;amp; Kecerdasan Buatan&lt;/h4&gt;&lt;p&gt;IoT, big data, cloud computing, dan AI mengintegrasikan dunia fisik dan digital.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="ev"&gt;&lt;div class="era"&gt;Saat ini — Menuju 5.0&lt;/div&gt;&lt;h4&gt;Teknologi Berpusat pada Manusia&lt;/h4&gt;&lt;p&gt;Teknologi cerdas dipadukan kembali dengan sentuhan dan nilai kemanusiaan.&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="callout"&gt;&lt;b&gt;Contoh nyata di sekitar kita:&lt;/b&gt; aplikasi ojek daring memakai algoritma pencocokan rute, sekolah memakai sistem informasi akademik, rumah sakit memakai rekam medis elektronik, petani memakai sensor IoT untuk memantau lahan — semua ini adalah wujud nyata Informatika.&lt;/div&gt;
    &lt;/section&gt;

    &lt;!-- ================= TOPIK 2 ================= --&gt;
    &lt;section class="topic topic-2" id="materi-2"&gt;
      &lt;div class="eyebrow"&gt;&lt;span class="tag"&gt;JP 2 · 45 menit&lt;/span&gt; 02 — Budaya Kerja Digital&lt;/div&gt;
      &lt;h2&gt;Bekerja dengan Cara Baru di Dunia yang Terhubung&lt;/h2&gt;
      &lt;p&gt;&lt;strong&gt;Budaya kerja digital&lt;/strong&gt; adalah pola pikir, sikap, dan kebiasaan kerja yang terbentuk karena teknologi mengubah cara kita berkolaborasi, berkomunikasi, dan menghasilkan karya. Budaya ini tidak menggantikan etos kerja lama, tetapi menambahkan lapisan baru: kolaboratif, adaptif, dan berbasis data.&lt;/p&gt;

      &lt;h3&gt;Karakteristik Utama Budaya Kerja Digital&lt;/h3&gt;
      &lt;div class="subgrid"&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Kolaborasi Daring&lt;/h4&gt;&lt;p&gt;Bekerja bersama lewat cloud (Google Workspace, Microsoft 365) tanpa harus berada di ruang yang sama.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Fleksibilitas Kerja&lt;/h4&gt;&lt;p&gt;Pola kerja jarak jauh (remote) dan hybrid semakin umum lintas industri.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Berbasis Data&lt;/h4&gt;&lt;p&gt;Keputusan diambil berdasarkan data dan bukti, bukan sekadar asumsi.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Pembelajaran Berkelanjutan&lt;/h4&gt;&lt;p&gt;Teknologi cepat berubah, sehingga belajar hal baru menjadi kebiasaan, bukan pengecualian.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Budaya Paperless&lt;/h4&gt;&lt;p&gt;Dokumen dan arsip beralih ke bentuk digital untuk efisiensi dan keberlanjutan.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Berbagi Pengetahuan&lt;/h4&gt;&lt;p&gt;Dokumentasi kerja dan wawasan dibagikan terbuka lewat wiki, forum, atau grup tim.&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;

      &lt;h3&gt;Soft Skill yang Dibutuhkan&lt;/h3&gt;
      &lt;table&gt;
        &lt;tr&gt;&lt;th&gt;Kompetensi&lt;/th&gt;&lt;th&gt;Contoh Penerapan&lt;/th&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Komunikasi digital&lt;/td&gt;&lt;td&gt;Menulis pesan kerja yang jelas dan sopan di email, chat, atau video call.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Manajemen waktu&lt;/td&gt;&lt;td&gt;Mengatur tenggat kerja menggunakan aplikasi seperti Trello atau Google Calendar.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Kolaborasi tim&lt;/td&gt;&lt;td&gt;Mengedit dokumen bersama secara real-time tanpa tumpang tindih pekerjaan.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Berpikir kritis &amp;amp; kreatif&lt;/td&gt;&lt;td&gt;Mengevaluasi informasi digital sebelum menggunakannya untuk mengambil keputusan.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Adaptasi teknologi baru&lt;/td&gt;&lt;td&gt;Cepat mempelajari aplikasi atau alat kerja yang baru diperkenalkan.&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;

      &lt;div class="callout"&gt;&lt;b&gt;Nilai profesional yang tetap relevan:&lt;/b&gt; disiplin terhadap tenggat waktu digital, tanggung jawab menjaga data yang dikelola, serta transparansi proses kerja — nilai-nilai lama yang dibungkus cara kerja baru.&lt;/div&gt;
    &lt;/section&gt;

    &lt;!-- ================= TOPIK 3 ================= --&gt;
    &lt;section class="topic topic-3" id="materi-3"&gt;
      &lt;div class="eyebrow"&gt;&lt;span class="tag"&gt;JP 3 · 45 menit&lt;/span&gt; 03 — Etika Digital, HAKI &amp;amp; Keamanan&lt;/div&gt;
      &lt;h2&gt;Aturan Main di Dunia Digital&lt;/h2&gt;
      &lt;p&gt;Semakin besar kekuatan teknologi, semakin besar pula tanggung jawab menggunakannya. Bagian ini membahas tiga pilar: &lt;strong&gt;etika digital&lt;/strong&gt; (bagaimana bersikap), &lt;strong&gt;HAKI&lt;/strong&gt; (menghargai karya orang lain), dan &lt;strong&gt;keamanan digital&lt;/strong&gt; (melindungi diri dan data).&lt;/p&gt;

      &lt;h3&gt;Etika Digital (Netiket)&lt;/h3&gt;
      &lt;ul&gt;
        &lt;li&gt;Bersikap sopan dan menghargai perbedaan pendapat saat berinteraksi daring.&lt;/li&gt;
        &lt;li&gt;Tidak menyebarkan ujaran kebencian, perundungan siber (cyberbullying), atau konten SARA.&lt;/li&gt;
        &lt;li&gt;Memeriksa kebenaran informasi sebelum membagikannya, untuk mencegah penyebaran hoaks.&lt;/li&gt;
        &lt;li&gt;Menyadari bahwa jejak digital (digital footprint) bersifat permanen dan dapat memengaruhi reputasi di masa depan.&lt;/li&gt;
      &lt;/ul&gt;

      &lt;h3&gt;Hak Kekayaan Intelektual (HAKI)&lt;/h3&gt;
      &lt;p&gt;HAKI melindungi hasil karya cipta seseorang — termasuk perangkat lunak, tulisan, gambar, musik, dan desain — dari penggunaan tanpa izin. Beberapa jenis lisensi perangkat lunak yang perlu dikenali:&lt;/p&gt;
      &lt;table&gt;
        &lt;tr&gt;&lt;th&gt;Jenis Lisensi&lt;/th&gt;&lt;th&gt;Penjelasan&lt;/th&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Proprietary (berbayar)&lt;/td&gt;&lt;td&gt;Kode sumber tertutup, penggunaan diatur ketat oleh pemilik, contoh: Microsoft Office.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Freeware&lt;/td&gt;&lt;td&gt;Gratis digunakan, tetapi kode sumber tetap tertutup dan hak cipta melekat pada pembuat.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Shareware&lt;/td&gt;&lt;td&gt;Boleh dicoba gratis dalam batas waktu/fitur tertentu sebelum harus membeli lisensi penuh.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Open Source&lt;/td&gt;&lt;td&gt;Kode sumber terbuka dan boleh dimodifikasi, dengan syarat mengikuti ketentuan lisensinya, contoh: Linux.&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;p&gt;Dalam konteks tugas sekolah, &lt;strong&gt;plagiarisme&lt;/strong&gt; — menyalin karya orang lain tanpa mencantumkan sumber — adalah pelanggaran HAKI. Kebiasaan baik: selalu mencantumkan sumber referensi dan memahami lisensi &lt;em&gt;Creative Commons&lt;/em&gt; saat menggunakan gambar atau materi dari internet.&lt;/p&gt;

      &lt;h3&gt;Keamanan Digital&lt;/h3&gt;
      &lt;div class="subgrid"&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Kata sandi kuat&lt;/h4&gt;&lt;p&gt;Kombinasi huruf, angka, simbol, dan berbeda untuk tiap akun.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Autentikasi dua faktor (2FA)&lt;/h4&gt;&lt;p&gt;Lapisan keamanan tambahan selain kata sandi, misalnya kode OTP.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Waspada phishing&lt;/h4&gt;&lt;p&gt;Tidak sembarangan mengklik tautan atau memberi data pribadi ke sumber tak dikenal.&lt;/p&gt;&lt;/div&gt;
        &lt;div class="pill-card"&gt;&lt;h4&gt;Cadangkan data (backup)&lt;/h4&gt;&lt;p&gt;Menyimpan salinan data penting untuk berjaga dari kehilangan atau serangan siber.&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;!-- ================= TOPIK 4 ================= --&gt;
    &lt;section class="topic topic-4" id="materi-4"&gt;
      &lt;div class="eyebrow"&gt;&lt;span class="tag"&gt;JP 4 · 45 menit&lt;/span&gt; 04 — Profesi Teknologi Informasi&lt;/div&gt;
      &lt;h2&gt;Ke Mana Semua Ini Bisa Membawamu?&lt;/h2&gt;
      &lt;p&gt;Industri teknologi informasi menawarkan ragam jalur karier yang terus berkembang. Setiap profesi menekankan kombinasi berbeda antara kemampuan teknis (&lt;em&gt;hard skill&lt;/em&gt;) dan kemampuan bekerja sama (&lt;em&gt;soft skill&lt;/em&gt;) yang sudah dibahas di JP 2.&lt;/p&gt;

      &lt;table&gt;
        &lt;tr&gt;&lt;th&gt;Profesi&lt;/th&gt;&lt;th&gt;Fokus Pekerjaan&lt;/th&gt;&lt;th&gt;Kompetensi Kunci&lt;/th&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Software / Web Developer&lt;/td&gt;&lt;td&gt;Membangun aplikasi atau situs web.&lt;/td&gt;&lt;td&gt;Logika pemrograman, bahasa pemrograman&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Mobile App Developer&lt;/td&gt;&lt;td&gt;Membangun aplikasi untuk perangkat seluler.&lt;/td&gt;&lt;td&gt;Pemrograman mobile, desain UI&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Network Engineer / Administrator&lt;/td&gt;&lt;td&gt;Merancang dan menjaga jaringan komputer.&lt;/td&gt;&lt;td&gt;Pemahaman protokol jaringan, troubleshooting&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Database Administrator&lt;/td&gt;&lt;td&gt;Mengelola dan mengamankan basis data organisasi.&lt;/td&gt;&lt;td&gt;SQL, manajemen data&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Data Analyst / Data Scientist&lt;/td&gt;&lt;td&gt;Mengolah data menjadi wawasan untuk keputusan bisnis.&lt;/td&gt;&lt;td&gt;Statistik, visualisasi data&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;UI/UX Designer&lt;/td&gt;&lt;td&gt;Merancang tampilan dan pengalaman pengguna produk digital.&lt;/td&gt;&lt;td&gt;Desain, empati pengguna&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cyber Security Specialist&lt;/td&gt;&lt;td&gt;Melindungi sistem dari ancaman dan serangan siber.&lt;/td&gt;&lt;td&gt;Analisis risiko, keamanan jaringan&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;IT Support / Helpdesk&lt;/td&gt;&lt;td&gt;Membantu pengguna mengatasi masalah perangkat dan sistem.&lt;/td&gt;&lt;td&gt;Troubleshooting, komunikasi&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Cloud Engineer&lt;/td&gt;&lt;td&gt;Mengelola infrastruktur dan layanan berbasis cloud.&lt;/td&gt;&lt;td&gt;Sistem cloud, otomasi&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Game Developer&lt;/td&gt;&lt;td&gt;Merancang dan membangun permainan digital.&lt;/td&gt;&lt;td&gt;Pemrograman, desain kreatif&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;

      &lt;h3&gt;Jalur Menuju Profesi TI&lt;/h3&gt;
      &lt;ul &gt;
        &lt;li&gt;Pendidikan formal: SMK jurusan RPL/TKJ, D3/D4/S1 bidang Informatika atau Ilmu Komputer.&lt;/li&gt;
        &lt;li&gt;Sertifikasi industri: misalnya sertifikasi jaringan, cloud, atau keamanan siber dari penyedia teknologi global.&lt;/li&gt;
        &lt;li&gt;Jalur mandiri: bootcamp, kursus daring, dan portofolio proyek pribadi.&lt;/li&gt;
        &lt;li&gt;Peluang kerja lintas batas: banyak profesi TI kini bisa dikerjakan secara remote untuk perusahaan di berbagai negara.&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;

    &lt;!-- ============ TUGAS KELOMPOK ============ --&gt;
    &lt;section class="task task-group" id="tugas-kelompok"&gt;
      &lt;div class="eyebrow"&gt;&lt;span class="tag" style="border-color: #B9C4E0;"&gt;Tugas Kelompok&lt;/span&gt; Penerapan JP 1–4&lt;/div&gt;
      &lt;h2&gt;Investigasi Profesi &amp;amp; Budaya Kerja Digital&lt;/h2&gt;
      &lt;p&gt;Bekerja dalam kelompok untuk menghubungkan keempat materi hari ini: memilih satu profesi TI, lalu menelusuri ruang lingkup keilmuannya, budaya kerjanya, serta isu etika yang mungkin dihadapinya.&lt;/p&gt;

      &lt;div class="steps"&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Bentuk kelompok&lt;/strong&gt;4–5 murid per kelompok, tentukan pembagian peran (peneliti, penulis, desainer, juru bicara).&lt;/div&gt;&lt;/div&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Pilih satu profesi TI&lt;/strong&gt;Contoh: Web Developer, Data Analyst, Cyber Security Specialist, UI/UX Designer, Network Engineer, dsb — satu profesi per kelompok, tidak boleh sama dengan kelompok lain.&lt;/div&gt;&lt;/div&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Lakukan riset singkat&lt;/strong&gt;Cari informasi tentang deskripsi pekerjaan, bidang Informatika yang mendasarinya, kompetensi yang dibutuhkan, dan jenjang kariernya.&lt;/div&gt;&lt;/div&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Kaitkan dengan budaya kerja&lt;/strong&gt;Jelaskan bagaimana profesi tersebut menerapkan budaya kerja digital (kolaborasi, fleksibilitas, dsb.) dalam praktiknya.&lt;/div&gt;&lt;/div&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Identifikasi isu etika&lt;/strong&gt;Sebutkan satu isu etika, HAKI, atau keamanan digital yang relevan dengan profesi tersebut, dan bagaimana idealnya disikapi.&lt;/div&gt;&lt;/div&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Susun &amp;amp; presentasikan&lt;/strong&gt;Tuangkan hasil riset ke dalam poster atau slide presentasi sederhana, lalu presentasikan di depan kelas (5–7 menit per kelompok).&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="deliverable-row"&gt;
        &lt;span&gt;Produk: Poster / Infografis / Slide&lt;/span&gt;
        &lt;span&gt;Waktu pengerjaan: ± 60 menit&lt;/span&gt;
        &lt;span&gt;Presentasi: 5–7 menit/kelompok&lt;/span&gt;
      &lt;/div&gt;

      &lt;table class="rubric"&gt;
        &lt;tr&gt;&lt;th&gt;Aspek Penilaian&lt;/th&gt;&lt;th&gt;Indikator&lt;/th&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Pemahaman konsep&lt;/td&gt;&lt;td&gt;Kaitan antara profesi, bidang Informatika, dan budaya kerja dijelaskan dengan tepat.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Kelengkapan isi&lt;/td&gt;&lt;td&gt;Deskripsi kerja, kompetensi, jenjang karier, dan isu etika tercakup lengkap.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Kerja sama tim&lt;/td&gt;&lt;td&gt;Pembagian peran jelas dan seluruh anggota berkontribusi.&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Presentasi&lt;/td&gt;&lt;td&gt;Penyampaian jelas, percaya diri, dan mampu menjawab pertanyaan.&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
    &lt;/section&gt;

    &lt;!-- ============ TUGAS MANDIRI / KESIMPULAN ============ --&gt;
    &lt;section class="task task-solo" id="tugas-mandiri"&gt;
      &lt;div class="eyebrow"&gt;Tugas Mandiri · Penutup&lt;/div&gt;
      &lt;h2&gt;Tulis Kesimpulan Ringkas di Buku Catatan&lt;/h2&gt;
      &lt;p&gt;Sebagai penutup pembelajaran, setiap murid menuliskan satu kesimpulan ringkas secara mandiri di buku catatan sebagai rangkuman pemahaman pribadi terhadap materi hari ini.&lt;/p&gt;
      &lt;div class="steps"&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Tulis dengan bahasa sendiri&lt;/strong&gt;Bukan menyalin ulang dari modul, tetapi merangkum apa yang benar-benar dipahami.&lt;/div&gt;&lt;/div&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Cakup keempat topik&lt;/strong&gt;Singgung ruang lingkup Informatika, budaya kerja digital, etika/HAKI/keamanan, dan profesi TI dalam satu rangkaian kesimpulan.&lt;/div&gt;&lt;/div&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Minimal 150 kata&lt;/strong&gt;Ditulis dalam 1 paragraf utuh di buku catatan, rapi dan mudah dibaca.&lt;/div&gt;&lt;/div&gt;
        &lt;div class="step"&gt;&lt;div&gt;&lt;strong&gt;Kumpulkan&lt;/strong&gt;Difoto dan dikirim ke guru, atau diperlihatkan langsung pada pertemuan berikutnya.&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;!-- ============ REFLEKSI ============ --&gt;
    &lt;section class="card" id="refleksi"&gt;
      &lt;div class="eyebrow"&gt;Refleksi Cepat&lt;/div&gt;
      &lt;h3 style="margin-top: 0;"&gt;Sebelum menutup pertemuan, tanyakan pada diri sendiri:&lt;/h3&gt;
      &lt;ul &gt;
        &lt;li&gt;Bidang Informatika mana yang paling menarik perhatianku, dan mengapa?&lt;/li&gt;
        &lt;li&gt;Kebiasaan kerja digital apa yang sudah kulakukan, dan apa yang perlu kulatih?&lt;/li&gt;
        &lt;li&gt;Satu praktik keamanan digital apa yang akan mulai kuterapkan mulai hari ini?&lt;/li&gt;
        &lt;li&gt;Profesi TI mana yang ingin kuketahui lebih dalam?&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;

  &lt;/main&gt;

  &lt;footer&gt;Modul Informatika Kelas X SMK · Pertemuan 4 JP · Elemen Dampak Sosial Informatika&lt;/footer&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</description><link>http://kitab-investasi.blogspot.com/2026/07/pengantar-informatika-budaya-kerja.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-8908856282371387948</guid><pubDate>Fri, 17 Jul 2026 03:50:29 +0000</pubDate><atom:updated>2026-07-17T10:50:29.936+07:00</atom:updated><title>MATERI DAN TUJUAN PEMBELAJARAN Informatika Kelas X SMK Semester 1 2026-2027</title><description>&lt;h2 style="text-align: justify;"&gt;&amp;nbsp;Informatika Kelas X SMK Semester 1&lt;/h2&gt;
&lt;p data-end="374" data-start="351" style="text-align: justify;"&gt;&lt;strong data-end="374" data-start="351"&gt;18 Pertemuan × 4 JP&lt;/strong&gt;&lt;/p&gt;
&lt;div class="TyagGW_tableContainer"&gt;&lt;div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1"&gt;&lt;table class="w-fit min-w-(--thread-content-width)" data-end="4713" data-start="376" style="text-align: justify;"&gt;&lt;thead data-end="426" data-start="376"&gt;&lt;tr data-end="426" data-start="376"&gt;&lt;th class="last:pe-10" data-col-size="sm" data-end="388" data-start="376"&gt;Pertemuan&lt;/th&gt;&lt;th class="last:pe-10" data-col-size="md" data-end="403" data-start="388"&gt;Judul Materi&lt;/th&gt;&lt;th class="last:pe-10" data-col-size="xl" data-end="426" data-start="403"&gt;Tujuan Pembelajaran&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody data-end="4713" data-start="478"&gt;&lt;tr data-end="792" data-start="478"&gt;&lt;td data-col-size="sm" data-end="486" data-start="478"&gt;&lt;strong data-end="485" data-start="480"&gt;1&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="576" data-start="486"&gt;&lt;strong data-end="575" data-start="488"&gt;Pengantar Informatika, Budaya Kerja Digital, Etika, dan Profesi Teknologi Informasi&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="792" data-start="576"&gt;Peserta didik mampu menjelaskan ruang lingkup Informatika, perkembangan teknologi digital, profesi di bidang TIK, serta menerapkan etika digital, hak kekayaan intelektual, dan keamanan dalam penggunaan teknologi.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="1046" data-start="793"&gt;&lt;td data-col-size="sm" data-end="801" data-start="793"&gt;&lt;strong data-end="800" data-start="795"&gt;2&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="850" data-start="801"&gt;&lt;strong data-end="849" data-start="803"&gt;Sistem Komputer dan Arsitektur Von Neumann&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="1046" data-start="850"&gt;Peserta didik mampu menjelaskan komponen sistem komputer, model input-proses-output, fungsi perangkat keras, perangkat lunak, brainware, serta hubungan antar komponennya dalam sistem komputer.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="1273" data-start="1047"&gt;&lt;td data-col-size="sm" data-end="1055" data-start="1047"&gt;&lt;strong data-end="1054" data-start="1049"&gt;3&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="1115" data-start="1055"&gt;&lt;strong data-end="1114" data-start="1057"&gt;Sistem Operasi, Manajemen File, dan Penyimpanan Cloud&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="1273" data-start="1115"&gt;Peserta didik mampu mengelola sistem operasi, file, folder, media penyimpanan, serta memanfaatkan layanan cloud storage untuk mendukung pekerjaan digital.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="1531" data-start="1274"&gt;&lt;td data-col-size="sm" data-end="1282" data-start="1274"&gt;&lt;strong data-end="1281" data-start="1276"&gt;4&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="1338" data-start="1282"&gt;&lt;strong data-end="1337" data-start="1284"&gt;Jaringan Komputer, Internet, dan Keamanan Digital&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="1531" data-start="1338"&gt;Peserta didik mampu menjelaskan konsep jaringan komputer, konektivitas internet, perangkat jaringan, komunikasi data, serta menerapkan keamanan dasar dan enkripsi dalam penggunaan jaringan.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="1758" data-start="1532"&gt;&lt;td data-col-size="sm" data-end="1540" data-start="1532"&gt;&lt;strong data-end="1539" data-start="1534"&gt;5&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="1596" data-start="1540"&gt;&lt;strong data-end="1595" data-start="1542"&gt;Pencarian Informasi Digital dan Kolaborasi Daring&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="1758" data-start="1596"&gt;Peserta didik mampu memanfaatkan mesin pencari, peramban, layanan komunikasi digital, dan media kolaborasi daring secara efektif, aman, dan bertanggung jawab.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="1989" data-start="1759"&gt;&lt;td data-col-size="sm" data-end="1767" data-start="1759"&gt;&lt;strong data-end="1766" data-start="1761"&gt;6&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="1838" data-start="1767"&gt;&lt;strong data-end="1837" data-start="1769"&gt;Pengenalan Aplikasi Pengolah Kata untuk Administrasi Perkantoran&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="1989" data-start="1838"&gt;Peserta didik mampu membuat, mengedit, memformat, dan menyimpan dokumen administrasi menggunakan aplikasi pengolah kata sesuai standar perkantoran.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="2234" data-start="1990"&gt;&lt;td data-col-size="sm" data-end="1998" data-start="1990"&gt;&lt;strong data-end="1997" data-start="1992"&gt;7&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="2057" data-start="1998"&gt;&lt;strong data-end="2056" data-start="2000"&gt;Fitur Lanjut Pengolah Kata untuk Dokumen Profesional&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="2234" data-start="2057"&gt;Peserta didik mampu menggunakan style, heading, daftar isi otomatis, tabel, gambar, mail merge, referensi, dan fitur otomatis lainnya untuk menghasilkan dokumen profesional.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="2450" data-start="2235"&gt;&lt;td data-col-size="sm" data-end="2243" data-start="2235"&gt;&lt;strong data-end="2242" data-start="2237"&gt;8&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="2293" data-start="2243"&gt;&lt;strong data-end="2292" data-start="2245"&gt;Integrasi Dokumen dan Otomasi Pengolah Kata&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="2450" data-start="2293"&gt;Peserta didik mampu mengintegrasikan berbagai objek, menggunakan template, formulir, serta fitur otomatis untuk meningkatkan efisiensi pembuatan dokumen.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="2630" data-start="2451"&gt;&lt;td data-col-size="sm" data-end="2459" data-start="2451"&gt;&lt;strong data-end="2458" data-start="2453"&gt;9&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="2504" data-start="2459"&gt;&lt;strong data-end="2503" data-start="2461"&gt;Ulangan Bab I – Aplikasi Pengolah Kata&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="2630" data-start="2504"&gt;Peserta didik mampu menunjukkan penguasaan kompetensi penggunaan aplikasi pengolah kata melalui asesmen teori dan praktik.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="2847" data-start="2631"&gt;&lt;td data-col-size="sm" data-end="2640" data-start="2631"&gt;&lt;strong data-end="2639" data-start="2633"&gt;10&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="2695" data-start="2640"&gt;&lt;strong data-end="2694" data-start="2642"&gt;Pengenalan Aplikasi Pengolah Angka (Spreadsheet)&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="2847" data-start="2695"&gt;Peserta didik mampu mengolah data menggunakan format sel, rumus dasar, fungsi matematika, logika, dan statistik sederhana pada aplikasi spreadsheet.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="3066" data-start="2848"&gt;&lt;td data-col-size="sm" data-end="2857" data-start="2848"&gt;&lt;strong data-end="2856" data-start="2850"&gt;11&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="2906" data-start="2857"&gt;&lt;strong data-end="2905" data-start="2859"&gt;Analisis Data dan Fitur Lanjut Spreadsheet&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="3066" data-start="2906"&gt;Peserta didik mampu menerapkan fungsi lanjutan, lookup, sort, filter, conditional formatting, grafik, dan PivotTable untuk menganalisis data secara efektif.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="3277" data-start="3067"&gt;&lt;td data-col-size="sm" data-end="3076" data-start="3067"&gt;&lt;strong data-end="3075" data-start="3069"&gt;12&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="3123" data-start="3076"&gt;&lt;strong data-end="3122" data-start="3078"&gt;Ulangan Bab II – Aplikasi Pengolah Angka&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="3277" data-start="3123"&gt;Peserta didik mampu menunjukkan penguasaan kompetensi pengolahan dan analisis data menggunakan aplikasi spreadsheet melalui asesmen teori dan praktik.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="3491" data-start="3278"&gt;&lt;td data-col-size="sm" data-end="3287" data-start="3278"&gt;&lt;strong data-end="3286" data-start="3280"&gt;13&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="3334" data-start="3287"&gt;&lt;strong data-end="3333" data-start="3289"&gt;Aplikasi Pengolah Presentasi Profesional&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="3491" data-start="3334"&gt;Peserta didik mampu merancang presentasi yang komunikatif menggunakan tema, slide master, multimedia, animasi, transisi, hyperlink, dan fitur kolaborasi.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="3735" data-start="3492"&gt;&lt;td data-col-size="sm" data-end="3501" data-start="3492"&gt;&lt;strong data-end="3500" data-start="3494"&gt;14&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="3564" data-start="3501"&gt;&lt;strong data-end="3563" data-start="3503"&gt;Integrasi Aplikasi Perkantoran dan Produktivitas Digital&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="3735" data-start="3564"&gt;Peserta didik mampu mengintegrasikan dokumen pengolah kata, spreadsheet, dan presentasi serta memanfaatkan layanan cloud untuk menghasilkan dokumen kerja yang terpadu.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="3995" data-start="3736"&gt;&lt;td data-col-size="sm" data-end="3745" data-start="3736"&gt;&lt;strong data-end="3744" data-start="3738"&gt;15&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="3801" data-start="3745"&gt;&lt;strong data-end="3800" data-start="3747"&gt;Berpikir Komputasional dalam Penyelesaian Masalah&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="3995" data-start="3801"&gt;Peserta didik mampu menerapkan dekomposisi, pengenalan pola, abstraksi, dan algoritma untuk menyelesaikan permasalahan yang melibatkan data dalam konteks pekerjaan dan kehidupan sehari-hari.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="4204" data-start="3996"&gt;&lt;td data-col-size="sm" data-end="4005" data-start="3996"&gt;&lt;strong data-end="4004" data-start="3998"&gt;16&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="4064" data-start="4005"&gt;&lt;strong data-end="4063" data-start="4007"&gt;Algoritma Searching dan Sorting pada Pengolahan Data&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="4204" data-start="4064"&gt;Peserta didik mampu menerapkan algoritma pencarian dan pengurutan data sebagai dasar pengolahan informasi secara sistematis dan efisien.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="4477" data-start="4205"&gt;&lt;td data-col-size="sm" data-end="4214" data-start="4205"&gt;&lt;strong data-end="4213" data-start="4207"&gt;17&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="4261" data-start="4214"&gt;&lt;strong data-end="4260" data-start="4216"&gt;Proyek Terintegrasi Aplikasi Perkantoran&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="4477" data-start="4261"&gt;Peserta didik mampu menghasilkan proyek administrasi digital berupa laporan, analisis data, dan presentasi dengan mengintegrasikan aplikasi pengolah kata, spreadsheet, dan presentasi sesuai kebutuhan dunia kerja.&lt;/td&gt;&lt;/tr&gt;&lt;tr data-end="4713" data-start="4478"&gt;&lt;td data-col-size="sm" data-end="4487" data-start="4478"&gt;&lt;strong data-end="4486" data-start="4480"&gt;18&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="md" data-end="4546" data-start="4487"&gt;&lt;strong data-end="4545" data-start="4489"&gt;Asesmen Sumatif Akhir Semester dan Presentasi Proyek&lt;/strong&gt;&lt;/td&gt;&lt;td data-col-size="xl" data-end="4713" data-start="4546"&gt;Peserta didik mampu mempresentasikan hasil proyek, menyusun portofolio digital, serta menunjukkan penguasaan kompetensi semester melalui asesmen praktik dan teori.&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;
&lt;h3 data-end="4732" data-section-id="1dfkpdp" data-start="4715" style="text-align: justify;"&gt;Pembagian Bab&lt;/h3&gt;
&lt;ul data-end="5180" data-start="4734"&gt;
&lt;li data-end="4838" data-section-id="h0ktz3" data-start="4734" style="text-align: justify;"&gt;
&lt;strong data-end="4746" data-start="4736"&gt;Bab I:&lt;/strong&gt; Konsep Dasar Informatika, Sistem Komputer, Jaringan, dan Kolaborasi Digital (Pertemuan 1–5)
&lt;/li&gt;
&lt;li data-end="4891" data-section-id="198n676" data-start="4839" style="text-align: justify;"&gt;
&lt;strong data-end="4852" data-start="4841"&gt;Bab II:&lt;/strong&gt; Aplikasi Pengolah Kata (Pertemuan 6–9)
&lt;/li&gt;
&lt;li data-end="4960" data-section-id="1344r2i" data-start="4892" style="text-align: justify;"&gt;
&lt;strong data-end="4906" data-start="4894"&gt;Bab III:&lt;/strong&gt; Aplikasi Pengolah Angka/Spreadsheet (Pertemuan 10–12)
&lt;/li&gt;
&lt;li data-end="5047" data-section-id="1hhpm7y" data-start="4961" style="text-align: justify;"&gt;
&lt;strong data-end="4974" data-start="4963"&gt;Bab IV:&lt;/strong&gt; Aplikasi Presentasi dan Integrasi Aplikasi Perkantoran (Pertemuan 13–14)
&lt;/li&gt;
&lt;li data-end="5101" data-section-id="1rl7t2e" data-start="5048" style="text-align: justify;"&gt;
&lt;strong data-end="5060" data-start="5050"&gt;Bab V:&lt;/strong&gt; Berpikir Komputasional (Pertemuan 15–16)
&lt;/li&gt;
&lt;li data-end="5180" data-section-id="10ph39r" data-start="5102" style="text-align: justify;"&gt;
&lt;strong data-end="5115" data-start="5104"&gt;Bab VI:&lt;/strong&gt; Proyek Terintegrasi dan Asesmen Akhir Semester (Pertemuan 17–18)
&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-end="5589" data-is-last-node="" data-is-only-node="" data-start="5182" style="text-align: justify;"&gt;Struktur ini lebih sesuai untuk pembelajaran SMK karena sekitar &lt;strong data-end="5398" data-start="5246"&gt;65–70% waktu pembelajaran difokuskan pada kompetensi aplikasi perkantoran (Word, Spreadsheet, Presentasi, integrasi dokumen, dan kolaborasi digital)&lt;/strong&gt;, sementara konsep dasar Informatika, sistem komputer, jaringan, dan berpikir komputasional tetap diberikan sebagai fondasi yang mendukung keterampilan kerja di lingkungan perkantoran modern.&lt;/p&gt;</description><link>http://kitab-investasi.blogspot.com/2026/07/materi-dan-tujuan-pembelajaran.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-8510606503991406358</guid><pubDate>Thu, 16 Jul 2026 02:22:09 +0000</pubDate><atom:updated>2026-07-16T09:22:09.716+07:00</atom:updated><title> MATERI PEMBELAJARAN BAHASA INDONESIA KELAS XI SMK SEMESTER 1</title><description>&lt;h3 style="text-align: left;"&gt;MATERI PEMBELAJARAN BAHASA INDONESIA KELAS XI SMK SEMESTER 1&lt;/h3&gt;&lt;p class="MsoNormal"&gt;&lt;b&gt;Fase F — Kurikulum Merdeka&lt;o:p&gt;&lt;/o:p&gt;&lt;/b&gt;&lt;/p&gt;

&lt;p class="MsoNormal"&gt;&lt;b&gt;Alokasi: 18 Pertemuan × 3 JP&lt;o:p&gt;&lt;/o:p&gt;&lt;/b&gt;&lt;/p&gt;

&lt;div align="center" class="MsoNormal" style="text-align: center;"&gt;

&lt;hr align="center" size="1" width="100%" /&gt;

&lt;/div&gt;

&lt;p class="MsoNormal"&gt;&lt;b&gt;A. DISTRIBUSI PERTEMUAN (TANPA KOLOM BAB)&lt;o:p&gt;&lt;/o:p&gt;&lt;/b&gt;&lt;/p&gt;

&lt;table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="border-collapse: collapse; mso-yfti-tbllook: 1184; width: 652px;"&gt;
 &lt;thead&gt;
  &lt;tr style="mso-yfti-firstrow: yes; mso-yfti-irow: 0;"&gt;
   &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
   &lt;p class="MsoNormal"&gt;Pertemuan&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
   &lt;/td&gt;
   &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
   &lt;p class="MsoNormal"&gt;Topik/Materi Pembelajaran&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
   &lt;/td&gt;
   &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
   &lt;p class="MsoNormal"&gt;Tujuan Pembelajaran&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;&lt;tr style="mso-yfti-irow: 1;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;1&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Evaluasi Informasi dalam Teks Prosedur&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu mengevaluasi informasi yang disajikan
  dalam teks prosedur secara kritis dan logis.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 2;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;2&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Membandingkan Teks Prosedur dengan Teks Lain&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu membandingkan teks prosedur dengan
  teks lainnya yang mendukung serta menemukan persamaan dan perbedaannya.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 3;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;3&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Kaidah Kebahasaan Teks Prosedur (Bagian 1)&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu mengidentifikasi ciri-ciri kebahasaan
  teks prosedur, seperti kalimat imperatif, deklaratif, persuasif, dan
  konjungsi temporal.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 4;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;4&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Kaidah Kebahasaan Teks Prosedur (Bagian 2) &amp;amp; Menyusun
  Teks Prosedur&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu menganalisis penggunaan kalimat
  perintah, kata teknis, dan penanda wacana, serta menyusun teks prosedur
  secara logis dan sistematis.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 5;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;5&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Menyajikan Teks Prosedur &amp;amp; Rangkuman Materi Petunjuk
  Kerja&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu menyajikan teks prosedur yang telah
  dibuat secara lisan/tulisan dan mereview seluruh materi pokok bahasan
  petunjuk kerja.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 6;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;6&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Latihan Soal &amp;amp; Soal Tipe AKM (Pokok Bahasan Petunjuk
  Kerja)&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu mengerjakan soal-soal latihan dan soal
  tipe AKM dengan tepat serta mengidentifikasi kelemahan pemahaman.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 7;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;7&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;Ulangan Harian 1 (Petunjuk Kerja)&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Mengevaluasi pencapaian kompetensi peserta didik pada
  pokok bahasan petunjuk kerja.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 8;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;8&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Evaluasi Informasi dalam Teks Ceramah&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu mengevaluasi informasi dalam teks
  ceramah serta mengidentifikasi gagasan pokok dan pendukung.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 9;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;9&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Membandingkan Isi Teks Ceramah dengan Teks Lain&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu membandingkan isi teks ceramah dengan
  teks lainnya serta menemukan kelebihan dan kekurangan masing-masing.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 10;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;10&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Kaidah Kebahasaan Teks Ceramah (Bagian 1)&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu mengidentifikasi ciri kebahasaan teks
  ceramah, seperti kata ganti orang, kata teknis, dan kata persuasif.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 11;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;11&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Kaidah Kebahasaan Teks Ceramah (Bagian 2) &amp;amp; Menulis
  Teks Ceramah&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu menganalisis kaidah kebahasaan secara
  mendalam dan menulis teks ceramah secara kreatif.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 12;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;12&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Menyajikan Teks Ceramah secara Lisan &amp;amp; Rangkuman&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu menyajikan teks ceramah secara lisan
  dengan teknik berbicara, intonasi, dan sikap santun, serta mereview seluruh
  materi ceramah.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 13;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;13&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Latihan Soal &amp;amp; Soal Tipe AKM (Pokok Bahasan Ceramah)&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu mengerjakan soal-soal latihan dan soal
  tipe AKM dengan tepat serta mengidentifikasi kelemahan pemahaman.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 14;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;14&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;Ulangan Harian 2 (Santun Berbicara di Depan Khalayak)&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Mengevaluasi pencapaian kompetensi peserta didik pada
  pokok bahasan ceramah.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 15;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;15&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Memahami Isi &amp;amp; Mengevaluasi Struktur Teks Resensi&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu memahami isi teks resensi serta
  mengevaluasi struktur teks resensi dan membandingkannya dengan teks lain.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 16;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;16&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Menganalisis Kaidah Kebahasaan Teks Resensi &amp;amp; Menulis
  Teks Resensi&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu menganalisis kaidah kebahasaan teks
  resensi serta menulis teks resensi buku fiksi secara logis dan sistematis.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 17;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;17&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;Mempresentasikan Teks Resensi &amp;amp; Rangkuman Materi
  Resensi&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Peserta didik mampu mempresentasikan teks resensi secara
  logis dan kreatif serta mereview seluruh materi resensi.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="mso-yfti-irow: 18; mso-yfti-lastrow: yes;"&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 0cm; width: 65.95pt;" width="88"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;18&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 12.0pt 7.5pt 12.0pt; width: 160.85pt;" width="214"&gt;
  &lt;p class="MsoNormal"&gt;&lt;b&gt;Ulangan Harian 3 (Objektif Menilai Buku)&lt;/b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td style="padding: 7.5pt 0cm 7.5pt 12.0pt; width: 262.25pt;" width="350"&gt;
  &lt;p class="MsoNormal"&gt;Mengevaluasi pencapaian kompetensi peserta didik pada
  pokok bahasan resensi.&lt;o:p&gt;&lt;/o:p&gt;&lt;/p&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;</description><link>http://kitab-investasi.blogspot.com/2026/07/materi-pembelajaran-bahasa-indonesia.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-9014831872284392146</guid><pubDate>Wed, 15 Jul 2026 08:34:21 +0000</pubDate><atom:updated>2026-07-22T09:22:51.015+07:00</atom:updated><title>SMART ASSESEMENT AWAL INFORMATIKA ARROW</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
    &lt;title&gt;ARROW SMART • Asesmen Awal Informatika&lt;/title&gt;
    &lt;style&gt;
        /* RESET &amp; BASE */
        * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
        html, body {
            width: 100%;
            min-height: 100vh;
            background: #080c18;
            font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
            overflow: hidden;
            position: relative;
        }
        /* GAME WRAPPER - FULLSCREEN &amp; TANPA GULIR */
        #game-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            max-width: 100%;
            max-height: 100%;
            background: radial-gradient(circle at 20% 30%, #0e1a2b, #050a14);
            box-shadow: 0 0 50px #00d4ff40, 0 0 120px #0055ff20;
            border: 1px solid #00d4ff60;
            display: flex;
            flex-direction: column;
            padding: 16px;
            overflow: hidden;
            z-index: 9999;
        }
        /* HEADER */
        #header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            color: #a8e6ff;
            font-weight: bold;
            background: rgba(0, 20, 40, 0.6);
            backdrop-filter: blur(4px);
            border-radius: 60px;
            border: 1px solid #00d4ff80;
            margin-bottom: 10px;
            flex-shrink: 0;
        }
        #header span { background: #0a1a2e; padding: 4px 16px; border-radius: 40px; border: 1px solid #00d4ff; font-size: 0.9rem; letter-spacing: 1px; }
        #level-indicator { background: #0a1a2e; color: #7ad0ff; border-color: #00aaff; }
        #score-indicator { color: #facc15; border-color: #facc15; }
        #player-name-display { color: #7ad0ff; border-color: #00aaff; }
        #timer-display { background: #1a0a0a; color: #ff6b6b; border-color: #ff4444; min-width: 80px; text-align: center; }
        /* CANVAS AREA */
        #game-canvas-container {
            flex: 1;
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            min-height: 200px;
            border: 1px solid #00d4ff40;
            box-shadow: inset 0 0 60px #0044aa30;
            cursor: crosshair;
        }
        canvas { display: block; width: 100%; height: 100%; background: transparent; cursor: crosshair; }
        /* QUESTION PANEL */
        #question-panel {
            background: rgba(0, 16, 32, 0.85);
            backdrop-filter: blur(8px);
            border: 1px solid #00d4ff;
            border-radius: 40px;
            padding: 14px 20px;
            margin-top: 10px;
            color: #e6f7ff;
            font-weight: 600;
            font-size: clamp(0.95rem, 2.6vw, 1.25rem);
            text-align: left;
            box-shadow: 0 0 40px #0066ff44;
            flex-shrink: 0;
            min-height: 76px;
            display: flex;
            align-items: center;
            line-height: 1.5;
        }
        #question-panel .q-number { color: #00d4ff; font-weight: 800; margin-right: 12px; white-space: nowrap; text-shadow: 0 0 12px #00aaff; }
        #question-panel .q-text { color: #ffffff; font-weight: 700; text-shadow: 0 0 8px rgba(0, 180, 255, 0.3); }
        /* ENTRY SCREEN */
        #entry-screen {
            position: absolute; inset: 0; z-index: 20;
            background: rgba(0, 6, 16, 0.92); backdrop-filter: blur(12px);
            display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px;
            border-radius: 32px; padding: 20px;
        }
        #entry-screen h1 { font-size: 2.6rem; color: #7ad0ff; text-shadow: 0 0 40px #00aaff, 0 0 100px #0055ff; letter-spacing: 4px; font-weight: 800; }
        #entry-screen h2 { color: #7ad0ff; font-size: 1.4rem; margin-top: -20px; text-shadow: 0 0 20px #00aaff; font-weight: 400; letter-spacing: 2px; }
        #entry-screen input { background: #0a1a2e; border: 2px solid #00d4ff; border-radius: 60px; padding: 16px 24px; width: 80%; max-width: 340px; font-size: 1.3rem; color: #d6f0ff; text-align: center; outline: none; box-shadow: 0 0 40px #0066ff55; }
        #entry-screen input::placeholder { color: #4a7a9a; }
        .cyber-btn {
            background: linear-gradient(145deg, #0a2a4a, #06152a); border: 1px solid #00d4ff; color: #d6f0ff;
            padding: 16px 48px; border-radius: 60px; font-size: 1.6rem; font-weight: bold; letter-spacing: 3px;
            box-shadow: 0 0 40px #00aaffaa, inset 0 0 20px #00aaff44; transition: 0.2s; cursor: pointer; backdrop-filter: blur(4px);
        }
        .cyber-btn:active { transform: scale(0.93); box-shadow: 0 0 80px #00d4ff; }
        /* CONGRATS OVERLAY */
        #congrats-overlay {
            position: absolute; inset: 0; z-index: 30;
            background: rgba(0, 4, 16, 0.85); backdrop-filter: blur(8px); border-radius: 32px;
            display: none; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center; color: #fff;
        }
        #congrats-overlay.show { display: flex; }
        .congrats-box {
            background: rgba(0, 16, 32, 0.8); border: 2px solid #00d4ff; border-radius: 60px; padding: 30px 20px;
            max-width: 480px; width: 100%; box-shadow: 0 0 80px #0066ff88, inset 0 0 30px #00aaff44; backdrop-filter: blur(8px); position: relative; z-index: 5;
        }
        .congrats-box .user-name { font-size: 1.4rem; color: #7ad0ff; margin-bottom: 8px; text-shadow: 0 0 20px #00aaff; }
        .congrats-box .user-name i { font-style: normal; background: rgba(0,180,255,0.15); padding: 2px 14px; border-radius: 30px; border: 1px solid #00aaff44; }
        .congrats-box h2 { font-size: 2.4rem; margin-bottom: 6px; color: #facc15; text-shadow: 0 0 30px #facc15aa; }
        .congrats-box .rank { font-size: 2rem; font-weight: 800; background: linear-gradient(45deg, #7ad0ff, #00aaff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 10px 0; }
        .congrats-box .final-score { font-size: 1.8rem; color: #7ad0ff; text-shadow: 0 0 20px #00aaff66; }
        .congrats-box .final-score span { color: #facc15; font-weight: 800; text-shadow: 0 0 20px #facc1566; }
        .congrats-box .message { font-size: 1.2rem; color: #c8e6ff; margin: 16px 0; background: rgba(0,180,255,0.1); padding: 10px 16px; border-radius: 30px; border: 1px solid #00aaff44; }
        .congrats-box .stats-grid { display: flex; justify-content: center; gap: 20px; margin: 12px 0; font-size: 0.9rem; color: #7ad0ff; }
        .congrats-box .stats-grid span { background: rgba(0,20,50,0.5); padding: 4px 14px; border-radius: 20px; border: 1px solid #00aaff33; }
        .congrats-box .footer-note { margin-top: 16px; font-size: 0.85rem; color: #5a8aaa; letter-spacing: 1px; border-top: 1px solid #00aaff33; padding-top: 14px; font-style: italic; }
        .small-btn { background: #0a2a4a; border: 1px solid #00d4ff; color: #d6f0ff; padding: 12px 30px; border-radius: 60px; font-size: 1.2rem; margin-top: 12px; cursor: pointer; transition: 0.2s; box-shadow: 0 0 20px #00aaff33; }
        .small-btn:active { transform: scale(0.92); }
        #speech-btn { background: rgba(0,180,255,0.15); border: 1px solid #00d4ff; color: #7ad0ff; padding: 8px 20px; border-radius: 40px; font-size: 0.9rem; cursor: pointer; margin-top: 6px; transition: 0.2s; box-shadow: 0 0 15px #00aaff22; }
        #speech-btn:hover { background: rgba(0,180,255,0.3); }
        /* LEADERBOARD */
        #leaderboard {
            position: absolute; bottom: 10px; right: 16px;
            background: #0a1218cc; backdrop-filter: blur(8px); padding: 10px 18px; border-radius: 40px;
            border: 1px solid #00d4ff; color: #7ad0ff; font-size: 0.8rem; max-width: 200px; max-height: 120px; overflow-y: auto; z-index: 10;
        }
        #leaderboard div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #00d4ff40; padding: 2px 0; }
        .lb-score { color: #facc15; }
        /* RESPONSIVE */
        @media (max-width: 500px) {
            #header span { font-size: 0.7rem; padding: 2px 10px; }
            #entry-screen h1 { font-size: 2rem; }
            #question-panel { font-size: clamp(0.8rem, 2.5vw, 1rem); padding: 10px 14px; min-height: 64px; }
            .congrats-box { padding: 20px 14px; }
            .congrats-box h2 { font-size: 1.8rem; }
            .congrats-box .rank { font-size: 1.5rem; }
            #leaderboard { max-width: 140px; font-size: 0.7rem; padding: 6px 12px; }
        }
        @media (max-width: 400px) {
            #header span { font-size: 0.6rem; padding: 2px 6px; }
            #timer-display { min-width: 60px; font-size: 0.7rem; }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- GAME WRAPPER - FIXED POSITION UNTUK MENGHINDARI BILAH SEARCH BLOGSPOT --&gt;
&lt;div id="game-wrapper"&gt;
    &lt;div id="header"&gt;
        &lt;span id="player-name-display"&gt;&#127919; User&lt;/span&gt;
        &lt;span id="level-indicator"&gt;⚡ Level 1&lt;/span&gt;
        &lt;span id="score-indicator"&gt;⭐ 0 / 100&lt;/span&gt;
        &lt;span id="timer-display"&gt;⏱️ 60:00&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="game-canvas-container"&gt;
        &lt;canvas id="gameCanvas" width="800" height="600"&gt;&lt;/canvas&gt;
        &lt;div id="entry-screen"&gt;
            &lt;h1&gt;&#127919; ARROW SMART&lt;/h1&gt;
            &lt;h2&gt;Asesmen Awal Informatika&lt;/h2&gt;
            &lt;input id="playerNameInput" type="text" placeholder="Nama User" maxlength="20"&gt;
            &lt;button class="cyber-btn" id="startGameBtn"&gt;▶ MULAI&lt;/button&gt;
            &lt;div style="color:#4a7a9a; font-size:0.8rem;"&gt;Panah ke perangkat IT! • Waktu 60 menit&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="congrats-overlay"&gt;
            &lt;div class="congrats-box"&gt;
                &lt;div class="user-name"&gt;&#127919; &lt;i id="userNameDisplay"&gt;User&lt;/i&gt;&lt;/div&gt;
                &lt;h2&gt;&#127937; ASESMEN SELESAI&lt;/h2&gt;
                &lt;div class="rank" id="rankDisplay"&gt;Master Informatika&lt;/div&gt;
                &lt;div class="final-score"&gt;Skor Akhir: &lt;span id="finalScoreDisplay"&gt;0&lt;/span&gt; / 100&lt;/div&gt;
                &lt;div class="stats-grid"&gt;
                    &lt;span id="levelCompleteDisplay"&gt;Level: 5/5&lt;/span&gt;
                    &lt;span id="accuracyDisplay"&gt;Akurasi: 0%&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="message" id="personalMessage"&gt;Hebat, User!&lt;/div&gt;
                &lt;button id="speech-btn"&gt;&#128266; Dengarkan Laporan&lt;/button&gt;
                &lt;button class="small-btn" id="restartFromCongratsBtn"&gt;&#128260; Misi Ulang&lt;/button&gt;
                &lt;div class="footer-note"&gt;✦ Selamat Belajar &amp; Bermain ✦&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="leaderboard"&gt;
            &lt;div style="color:#facc15; font-weight:bold;"&gt;&#127942; LEADERBOARD&lt;/div&gt;
            &lt;div id="lbEntries"&gt;&lt;div style="color:#4a7a9a;"&gt;Belum ada data&lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="question-panel"&gt;
        &lt;span class="q-number" id="qNumberDisplay"&gt;1.&lt;/span&gt;
        &lt;span class="q-text" id="qTextDisplay"&gt;Tekan mulai &amp; tembak perangkat IT&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    (function(){
        // ========================================================
        // BANK PERTANYAAN INFORMATIKA KELAS X SMK SEMESTER 1 2026-2027
        // ========================================================
        const LEVELS = 5;
        const QUESTIONS_PER_LEVEL = 10;
        const MAX_SCORE = 100;
        const TOTAL_TIME = 60 * 60; // 60 menit

        const QUESTION_BANK = [
            // ===== LEVEL 1: Pertemuan 1-4 =====
            [
                { q: "Apa yang dimaksud dengan etika digital?", options: ["Aturan moral dalam berperilaku di dunia digital", "Cara menginstal software", "Teknik hacking", "Penggunaan media sosial", "Cara membuat website"], correct: 0 },
                { q: "Siapa yang mengemukakan arsitektur Von Neumann?", options: ["John von Neumann", "Alan Turing", "Bill Gates", "Steve Jobs", "Charles Babbage"], correct: 0 },
                { q: "Apa fungsi utama dari sistem operasi?", options: ["Mengelola perangkat keras dan perangkat lunak", "Mengedit dokumen", "Membuat presentasi", "Mengolah angka", "Mengirim email"], correct: 0 },
                { q: "Manakah yang termasuk perangkat lunak aplikasi?", options: ["Microsoft Word", "Windows", "Linux", "macOS", "Android"], correct: 0 },
                { q: "Apa kepanjangan dari LAN?", options: ["Local Area Network", "Large Area Network", "Logical Access Network", "Long Area Network", "Low Area Network"], correct: 0 },
                { q: "Contoh layanan cloud storage adalah...", options: ["Google Drive", "Microsoft Word", "Google Chrome", "Photoshop", "Notepad"], correct: 0 },
                { q: "Brainware dalam sistem komputer adalah...", options: ["Pengguna atau operator", "Perangkat keras", "Perangkat lunak", "Jaringan", "Data"], correct: 0 },
                { q: "Apa fungsi dari RAM?", options: ["Menyimpan data sementara", "Menyimpan data permanen", "Memproses data", "Menampilkan output", "Menyuplai daya"], correct: 0 },
                { q: "Perangkat yang menghubungkan LAN ke internet adalah...", options: ["Router", "Switch", "Hub", "Modem", "Access Point"], correct: 0 },
                { q: "Apa tujuan keamanan digital?", options: ["Melindungi data dan sistem", "Mempercepat internet", "Menginstall aplikasi", "Membuat website", "Mengirim email"], correct: 0 }
            ],
            // ===== LEVEL 2: Pertemuan 5-8 =====
            [
                { q: "Search engine paling populer adalah...", options: ["Google", "Bing", "Yahoo", "DuckDuckGo", "Yandex"], correct: 0 },
                { q: "Aplikasi pengolah kata perkantoran adalah...", options: ["Microsoft Word", "Microsoft Excel", "Google Sheets", "LibreOffice Calc", "Adobe Photoshop"], correct: 0 },
                { q: "Fungsi 'Style' pada pengolah kata untuk...", options: ["Memformat teks konsisten", "Menambah gambar", "Membuat tabel", "Menyisipkan grafik", "Mail merge"], correct: 0 },
                { q: "Apa itu mail merge?", options: ["Gabung dokumen dengan sumber data", "Gabung sel tabel", "Gabung file gambar", "Gabung spreadsheet", "Gabung presentasi"], correct: 0 },
                { q: "Daftar isi otomatis dibuat dengan...", options: ["Heading style", "Font size", "Page break", "Table of contents", "Index"], correct: 0 },
                { q: "Fungsi template dokumen?", options: ["Format standar dokumen", "Menyimpan file", "Mengedit gambar", "Membuat grafik", "Analisis data"], correct: 0 },
                { q: "Tools kolaborasi daring adalah...", options: ["Google Docs", "Word offline", "Notepad", "Photoshop", "Corel Draw"], correct: 0 },
                { q: "Etika pencarian informasi meliputi...", options: ["Menghargai hak cipta", "Copy paste tanpa izin", "Ubah data orang lain", "Sebar hoaks", "Abaikan sumber"], correct: 0 },
                { q: "Apa itu peramban (browser)?", options: ["Akses internet", "Pengolah kata", "Pengolah angka", "Sistem operasi", "Perangkat keras"], correct: 0 },
                { q: "Format file Word adalah...", options: [".docx", ".xlsx", ".pptx", ".pdf", ".txt"], correct: 0 }
            ],
            // ===== LEVEL 3: Pertemuan 9-12 =====
            [
                { q: "Aplikasi pengolah angka (spreadsheet) adalah...", options: ["Microsoft Excel", "Microsoft Word", "PowerPoint", "Access", "Outlook"], correct: 0 },
                { q: "Fungsi SUM pada spreadsheet untuk...", options: ["Menjumlahkan angka", "Mencari rata-rata", "Menghitung data", "Nilai maksimum", "Nilai minimum"], correct: 0 },
                { q: "Fungsi IF pada spreadsheet untuk...", options: ["Logika kondisi", "Menjumlahkan data", "Mencari rata-rata", "Menghitung jumlah", "Mencari maksimum"], correct: 0 },
                { q: "Apa fungsi VLOOKUP?", options: ["Mencari data vertikal", "Mencari data horizontal", "Menjumlahkan", "Rata-rata", "Grafik"], correct: 0 },
                { q: "Conditional Formatting untuk...", options: ["Format sel berdasarkan kondisi", "Membuat grafik", "Sortir data", "Filter data", "PivotTable"], correct: 0 },
                { q: "Apa itu PivotTable?", options: ["Analisis data interaktif", "Jenis grafik", "Fungsi matematika", "Sorting", "Filter"], correct: 0 },
                { q: "Ekstensi file Excel adalah...", options: [".xlsx", ".docx", ".pptx", ".pdf", ".txt"], correct: 0 },
                { q: "Fungsi AVERAGE untuk...", options: ["Rata-rata", "Menjumlahkan", "Maksimum", "Minimum", "Jumlah data"], correct: 0 },
                { q: "Sortir data bertujuan...", options: ["Mengurutkan data", "Memfilter data", "Membuat grafik", "Analisis data", "Menjumlahkan"], correct: 0 },
                { q: "Fungsi grafik pada spreadsheet?", options: ["Visualisasi data", "Jumlah data", "Urut data", "Filter data", "Rata-rata"], correct: 0 }
            ],
            // ===== LEVEL 4: Pertemuan 13-15 =====
            [
                { q: "Aplikasi presentasi profesional adalah...", options: ["Microsoft PowerPoint", "Microsoft Word", "Excel", "Access", "Outlook"], correct: 0 },
                { q: "Fungsi Slide Master untuk...", options: ["Template slide global", "Animasi", "Gambar", "Hyperlink", "Video"], correct: 0 },
                { q: "Transisi pada presentasi adalah...", options: ["Efek perpindahan slide", "Animasi objek", "Hyperlink", "Tema", "Slide Master"], correct: 0 },
                { q: "Contoh integrasi aplikasi kantor?", options: ["Gabung Excel ke Word", "Edit gambar Photoshop", "Buat website", "Install software", "Kirim email"], correct: 0 },
                { q: "Cloud kolaborasi dokumen adalah...", options: ["Google Workspace", "Word offline", "Notepad", "Photoshop", "Corel Draw"], correct: 0 },
                { q: "Dekomposisi dalam berpikir komputasional?", options: ["Memecah masalah", "Mengenali pola", "Abstraksi", "Algoritma", "Implementasi"], correct: 0 },
                { q: "Apa itu algoritma?", options: ["Langkah sistematis", "Program", "Bahasa pemrograman", "Struktur data", "Sistem operasi"], correct: 0 },
                { q: "Pengenalan pola bertujuan...", options: ["Identifikasi kesamaan", "Memecah masalah", "Abstraksi", "Algoritma", "Implementasi"], correct: 0 },
                { q: "Abstraksi dalam informatika?", options: ["Sederhanakan masalah", "Memecah masalah", "Pola", "Algoritma", "Implementasi"], correct: 0 },
                { q: "Tujuan berpikir komputasional?", options: ["Selesaikan masalah sistematis", "Hafal kode", "Buat program", "Gunakan komputer", "Bermain game"], correct: 0 }
            ],
            // ===== LEVEL 5: Pertemuan 16-18 =====
            [
                { q: "Algoritma searching untuk...", options: ["Mencari data", "Mengurutkan data", "Menjumlahkan", "Memfilter", "Grafik"], correct: 0 },
                { q: "Algoritma sorting untuk...", options: ["Mengurutkan data", "Mencari data", "Menjumlahkan", "Memfilter", "Grafik"], correct: 0 },
                { q: "Contoh algoritma pencarian adalah...", options: ["Sequential search", "Bubble sort", "Insertion sort", "Selection sort", "Merge sort"], correct: 0 },
                { q: "Contoh algoritma pengurutan adalah...", options: ["Bubble sort", "Sequential search", "Binary search", "Linear search", "Depth first search"], correct: 0 },
                { q: "Laporan dalam proyek dibuat dengan...", options: ["Pengolah kata", "Spreadsheet", "Presentasi", "Database", "Email"], correct: 0 },
                { q: "Analisis data proyek dengan...", options: ["Spreadsheet", "Pengolah kata", "Presentasi", "Email", "Browser"], correct: 0 },
                { q: "Presentasi proyek dibuat dengan...", options: ["Aplikasi presentasi", "Pengolah kata", "Spreadsheet", "Email", "Browser"], correct: 0 },
                { q: "Portofolio digital berisi...", options: ["Hasil karya dan proyek", "Foto pribadi", "Video hiburan", "Game", "Musik"], correct: 0 },
                { q: "Asesmen sumatif bertujuan...", options: ["Ukur penguasaan kompetensi", "Hafal materi", "Buat proyek", "Presentasi", "Diskusi"], correct: 0 },
                { q: "Manfaat cloud storage?", options: ["Akses data dari mana saja", "Simpan di harddisk", "Install software", "Buat presentasi", "Olah angka"], correct: 0 }
            ]
        ];

        // ===== STATE =====
        let userName = "User";
        let currentLevel = 0;
        let currentQuestionIndex = 0;
        let score = 0;
        let totalAttempts = 0;
        let correctAttempts = 0;
        let questionsForLevel = [];
        let targets = [];
        let gameActive = false;
        let levelCompleted = false;
        let animationFrame = null;
        let canvas, ctx;
        let W, H;
        let leaderboardData = [];
        let particles = [];
        let fireworks = [];
        let isCelebrating = false;
        let finalScore = 0, finalRank = "", finalMessage = "", finalAccuracy = 0;

        // Timer
        let timeRemaining = TOTAL_TIME;
        let timerInterval = null;
        let timerRunning = false;

        // Archery state
        let archer = { x: 50, y: 0 };
        let arrow = { x: 0, y: 0, vx: 0, vy: 0, active: false, angle: 0, targetX: 0, targetY: 0, speed: 10, homing: false };
        let arrowCooldown = 0;
        let mouseX = 0, mouseY = 0;

        // DOM
        const canvasEl = document.getElementById('gameCanvas');
        const questionPanel = document.getElementById('question-panel');
        const qNumberDisplay = document.getElementById('qNumberDisplay');
        const qTextDisplay = document.getElementById('qTextDisplay');
        const levelIndicator = document.getElementById('level-indicator');
        const scoreIndicator = document.getElementById('score-indicator');
        const playerNameDisplay = document.getElementById('player-name-display');
        const timerDisplay = document.getElementById('timer-display');
        const entryScreen = document.getElementById('entry-screen');
        const congratsOverlay = document.getElementById('congrats-overlay');
        const finalScoreSpan = document.getElementById('finalScoreDisplay');
        const rankDisplay = document.getElementById('rankDisplay');
        const personalMessage = document.getElementById('personalMessage');
        const userNameDisplay = document.getElementById('userNameDisplay');
        const levelCompleteDisplay = document.getElementById('levelCompleteDisplay');
        const accuracyDisplay = document.getElementById('accuracyDisplay');
        const lbEntries = document.getElementById('lbEntries');
        const speechBtn = document.getElementById('speech-btn');

        canvas = canvasEl; ctx = canvas.getContext('2d');

        let speechSynth = window.speechSynthesis;
        let speechUtterance = null;
        function speakScoreboard(score, rank, message, accuracy) {
            if (!window.speechSynthesis) return;
            if (speechSynth.speaking) speechSynth.cancel();
            const text = `Laporan untuk User ${userName}. Skor ${score} dari 100. Predikat ${rank}. Akurasi ${accuracy} persen. ${message}`;
            speechUtterance = new SpeechSynthesisUtterance(text);
            speechUtterance.lang = 'id-ID'; speechUtterance.rate = 0.85; speechUtterance.pitch = 1;
            speechSynth.speak(speechUtterance);
        }

        function shuffleArray(arr) { for (let i=arr.length-1; i&gt;0; i--) { const j=Math.floor(Math.random()*(i+1)); [arr[i],arr[j]]=[arr[j],arr[i]]; } return arr; }

        function loadLeaderboard() {
            try { const data = localStorage.getItem('arrowsmart_leaderboard'); leaderboardData = data ? JSON.parse(data) : []; } catch(e){ leaderboardData = []; }
            renderLeaderboard();
        }
        function saveLeaderboard() { localStorage.setItem('arrowsmart_leaderboard', JSON.stringify(leaderboardData)); renderLeaderboard(); }
        function renderLeaderboard() {
            if (!lbEntries) return;
            if (leaderboardData.length === 0) { lbEntries.innerHTML = '&lt;div style="color:#4a7a9a;"&gt;Belum ada data&lt;/div&gt;'; return; }
            const sorted = [...leaderboardData].sort((a,b) =&gt; b.score - a.score).slice(0,5);
            lbEntries.innerHTML = sorted.map(p =&gt; `&lt;div&gt;&lt;span&gt;${p.name}&lt;/span&gt;&lt;span class="lb-score"&gt;${p.score}&lt;/span&gt;&lt;/div&gt;`).join('');
        }

        function resizeCanvas() {
            const container = document.getElementById('game-canvas-container');
            const rect = container.getBoundingClientRect();
            canvas.width = rect.width || 800; canvas.height = rect.height || 600;
            W = canvas.width; H = canvas.height;
            archer.y = H - 70; archer.x = Math.min(archer.x, W-30);
            if (gameActive &amp;&amp; questionsForLevel.length) { generateTargets(); if (!levelCompleted) showCurrentQuestion(); }
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        function loadLevel(levelIdx) {
            currentLevel = levelIdx; currentQuestionIndex = 0; levelCompleted = false;
            const raw = QUESTION_BANK[levelIdx] || QUESTION_BANK[0];
            questionsForLevel = raw.map(item =&gt; {
                const shuffledOptions = shuffleArray([...item.options]);
                const correctIndex = shuffledOptions.indexOf(item.options[item.correct]);
                return { q: item.q, options: shuffledOptions, correct: correctIndex };
            });
            questionsForLevel = shuffleArray(questionsForLevel);
            generateTargets();
            updateUI();
            if (gameActive) showCurrentQuestion();
        }

        function generateTargets() {
            targets = [];
            if (!questionsForLevel.length) return;
            const total = questionsForLevel.length;
            const cols = Math.min(4, total, Math.floor(W / 130) + 1);
            const rows = Math.ceil(total / cols);
            const spacingX = (W - 80) / (cols + 1);
            const spacingY = (H - 140) / (rows + 2);
            const size = Math.min(spacingX * 0.40, spacingY * 0.45, 62);
            const baseY = spacingY * 0.6 + 20;
            const icons = ['&#128187;', '&#128421;️', '&#128424;️', '⌨️', '&#128433;️', '&#128241;', '&#128190;', '&#128192;', '&#128268;', '&#128225;', '☁️', '&#128274;'];
            for (let i = 0; i &lt; total; i++) {
                const col = i % cols, row = Math.floor(i / cols);
                let x = 60 + spacingX * (col + 1) + (Math.random() - 0.5) * 30;
                let y = baseY + spacingY * row + (Math.random() - 0.5) * 20;
                x = Math.min(Math.max(x, size+20), W - size - 10);
                y = Math.min(Math.max(y, size+20), H - size - 80);
                const vx = (Math.random() - 0.5) * 0.6, vy = (Math.random() - 0.5) * 0.6;
                targets.push({
                    id: i, x, y, size,
                    vx, vy,
                    icon: icons[i % icons.length],
                    label: questionsForLevel[i]?.options[0] || '?',
                    fullText: questionsForLevel[i]?.options[0] || '?',
                    answered: false,
                    optionIndex: 0
                });
            }
        }

        function showCurrentQuestion() {
            if (!questionsForLevel.length || currentQuestionIndex &gt;= questionsForLevel.length) {
                levelCompleted = true;
                if (currentLevel + 1 &lt; LEVELS) { currentLevel++; loadLevel(currentLevel); updateUI(); }
                else { endGame(); }
                return;
            }
            const qData = questionsForLevel[currentQuestionIndex];
            if (!qData) return;
            qNumberDisplay.textContent = `${currentQuestionIndex + 1}.`;
            qTextDisplay.textContent = qData.q;
            targets.forEach((t, idx) =&gt; {
                const optIdx = idx % qData.options.length;
                t.optionIndex = optIdx;
                t.fullText = qData.options[optIdx] || '?';
                t.label = t.fullText;
                t.answered = false;
            });
        }

        function shootArrow(targetX, targetY) {
            if (!gameActive || levelCompleted) return;
            if (arrow.active || arrowCooldown &gt; 0) return;
            const dx = targetX - archer.x, dy = targetY - archer.y;
            if (Math.sqrt(dx*dx + dy*dy) &lt; 30) return;
            arrow.active = true;
            arrow.x = archer.x + 20; arrow.y = archer.y - 10;
            arrow.targetX = targetX; arrow.targetY = targetY;
            arrow.homing = true; arrow.speed = 10;
            const angle = Math.atan2(dy, dx);
            arrow.vx = Math.cos(angle) * arrow.speed;
            arrow.vy = Math.sin(angle) * arrow.speed;
            arrow.angle = angle;
            arrowCooldown = 12;
        }

        function updateArrow() {
            if (!arrow.active) return;
            if (arrow.homing) {
                const dx = arrow.targetX - arrow.x, dy = arrow.targetY - arrow.y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                if (dist &gt; 5) {
                    const targetAngle = Math.atan2(dy, dx);
                    let angleDiff = targetAngle - arrow.angle;
                    while (angleDiff &gt; Math.PI) angleDiff -= 2*Math.PI;
                    while (angleDiff &lt; -Math.PI) angleDiff += 2*Math.PI;
                    arrow.angle += angleDiff * 0.1;
                    arrow.vx = Math.cos(arrow.angle) * arrow.speed;
                    arrow.vy = Math.sin(arrow.angle) * arrow.speed;
                }
            }
            arrow.x += arrow.vx; arrow.y += arrow.vy;
            for (let t of targets) {
                if (t.answered) continue;
                const dx = arrow.x - t.x, dy = arrow.y - t.y;
                if (dx*dx + dy*dy &lt; (t.size + 8) * (t.size + 8)) {
                    arrow.active = false;
                    t.answered = true;
                    totalAttempts++;
                    const qData = questionsForLevel[currentQuestionIndex];
                    const selectedOptIdx = t.optionIndex % qData.options.length;
                    const isCorrect = (selectedOptIdx === qData.correct);
                    if (isCorrect) {
                        const scorePerQuestion = MAX_SCORE / (LEVELS * QUESTIONS_PER_LEVEL);
                        score = Math.min(MAX_SCORE, score + scorePerQuestion);
                        correctAttempts++;
                        spawnExplosion(t.x, t.y, '#00ffaa', 25);
                    } else {
                        spawnExplosion(t.x, t.y, '#ff4444', 18);
                    }
                    currentQuestionIndex++;
                    if (currentQuestionIndex &gt;= questionsForLevel.length) {
                        if (currentLevel + 1 &lt; LEVELS) showLevelCongrats();
                        else { endGame(); }
                    } else showCurrentQuestion();
                    updateUI();
                    return;
                }
            }
            if (arrow.x &gt; W || arrow.x &lt; 0 || arrow.y &gt; H || arrow.y &lt; 0) arrow.active = false;
        }

        function spawnExplosion(x, y, color, count) {
            for (let i=0; i&lt;count; i++) {
                const angle = Math.random() * 2 * Math.PI, speed = Math.random() * 4 + 1;
                particles.push({ x, y, vx: Math.cos(angle)*speed, vy: Math.sin(angle)*speed, life: 1, decay: Math.random()*0.025+0.015, size: Math.random()*5+2, color });
            }
        }

        function showLevelCongrats() {
            qNumberDisplay.textContent = '⚡';
            qTextDisplay.textContent = `Level ${currentLevel+1} Selesai! Skor: ${Math.round(score)} / ${MAX_SCORE}`;
            for (let i=0; i&lt;25; i++) spawnExplosion(Math.random()*W, Math.random()*H, '#00ddff', 6);
            setTimeout(() =&gt; { if (currentLevel + 1 &lt; LEVELS) { currentLevel++; loadLevel(currentLevel); updateUI(); } else endGame(); }, 1200);
        }

        function getRank(scr) {
            const pct = (scr/MAX_SCORE)*100;
            if (pct &gt;= 90) return "Master Informatika";
            else if (pct &gt;= 75) return "Expert Informatika";
            else if (pct &gt;= 60) return "Pro Informatika";
            else if (pct &gt;= 40) return "Learner Informatika";
            else return "Perlu Belajar Lagi";
        }

        function getMessage(scr) {
            const pct = (scr/MAX_SCORE)*100;
            if (pct &gt;= 90) return "Luar biasa! Anda Master Informatika sejati!";
            else if (pct &gt;= 75) return "Hebat! Pemahaman Informatika Anda solid!";
            else if (pct &gt;= 60) return "Bagus! Terus asah logika dan keterampilan digital!";
            else if (pct &gt;= 40) return "Mulai konsisten, raih predikat lebih tinggi!";
            else return "Perlu belajar lagi, kuasai dasar-dasar Informatika!";
        }

        function endGame() {
            gameActive = false;
            if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }
            timerRunning = false;
            
            finalScore = Math.round(score);
            finalRank = getRank(finalScore);
            finalMessage = getMessage(finalScore);
            finalAccuracy = totalAttempts &gt; 0 ? Math.round((correctAttempts / totalAttempts) * 100) : 0;
            
            congratsOverlay.classList.add('show');
            finalScoreSpan.textContent = finalScore;
            rankDisplay.textContent = finalRank;
            personalMessage.textContent = finalMessage;
            userNameDisplay.textContent = userName;
            levelCompleteDisplay.textContent = `Level: ${LEVELS}/${LEVELS}`;
            accuracyDisplay.textContent = `Akurasi: ${finalAccuracy}%`;
            
            leaderboardData.push({ name: userName, score: finalScore });
            saveLeaderboard();
            isCelebrating = true;
            for (let i=0; i&lt;80; i++) setTimeout(() =&gt; spawnFirework(Math.random()*W, Math.random()*H*0.7 + 50), i*65);
            for (let i=0; i&lt;45; i++) setTimeout(() =&gt; spawnFirework(Math.random()*W, Math.random()*H*0.5 + 30), 3800 + i*85);
            setTimeout(() =&gt; speakScoreboard(finalScore, finalRank, finalMessage, finalAccuracy), 1600);
        }

        function spawnFirework(x, y) {
            const colors = ['#ff4444','#ffdd44','#44ff44','#44ddff','#ff44ff','#ffffff','#ff8800','#00ffaa','#a855f7'];
            for (let i=0; i&lt;55; i++) {
                const angle = Math.random()*2*Math.PI, speed = Math.random()*7+2, color = colors[Math.floor(Math.random()*colors.length)];
                fireworks.push({ x, y, vx: Math.cos(angle)*speed, vy: Math.sin(angle)*speed-1, life:1, decay: Math.random()*0.015+0.006, size: Math.random()*5+2, color, isConfetti: false });
            }
            for (let i=0; i&lt;30; i++) {
                const angle = Math.random()*2*Math.PI, speed = Math.random()*4+1, color = colors[Math.floor(Math.random()*colors.length)];
                fireworks.push({ x, y, vx: Math.cos(angle)*speed+(Math.random()-0.5)*2, vy: Math.sin(angle)*speed-2.5, life:1, decay: Math.random()*0.01+0.004, size: Math.random()*9+4, color, isConfetti: true });
            }
        }

        function updateUI() {
            levelIndicator.textContent = `⚡ Level ${currentLevel+1}`;
            scoreIndicator.textContent = `⭐ ${Math.round(score)} / ${MAX_SCORE}`;
            playerNameDisplay.textContent = `&#127919; ${userName}`;
        }

        // Timer
        function startTimer() {
            if (timerRunning) return;
            timerRunning = true;
            timerInterval = setInterval(() =&gt; {
                timeRemaining--;
                updateTimerDisplay();
                if (timeRemaining &lt;= 0) {
                    clearInterval(timerInterval);
                    timerInterval = null;
                    timerRunning = false;
                    if (gameActive) { endGame(); }
                }
            }, 1000);
        }

        function updateTimerDisplay() {
            const mins = Math.floor(timeRemaining / 60);
            const secs = timeRemaining % 60;
            timerDisplay.textContent = `⏱️ ${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
            if (timeRemaining &lt; 300) {
                timerDisplay.style.color = '#ff4444';
                timerDisplay.style.borderColor = '#ff4444';
            } else {
                timerDisplay.style.color = '#ff6b6b';
                timerDisplay.style.borderColor = '#ff4444';
            }
        }

        function drawArcher() {
            const ax = archer.x, ay = archer.y;
            ctx.shadowBlur = 20; ctx.shadowColor = '#00aaff66';
            ctx.fillStyle = '#1a3a5a'; ctx.fillRect(ax-8, ay+10, 6, 14); ctx.fillRect(ax+2, ay+10, 6, 14);
            ctx.fillStyle = '#2a5a7a'; ctx.beginPath(); ctx.ellipse(ax, ay-4, 16, 22, 0, 0, Math.PI*2); ctx.fill();
            ctx.fillStyle = '#f0d8b0'; ctx.beginPath(); ctx.arc(ax, ay-28, 14, 0, Math.PI*2); ctx.fill();
            ctx.fillStyle = '#4a3a2a'; ctx.beginPath(); ctx.arc(ax, ay-34, 14, Math.PI, 2*Math.PI); ctx.fill();
            const bowAngle = Math.atan2(mouseY - ay, mouseX - ax);
            const bowLen = 38;
            ctx.strokeStyle = '#c8a060'; ctx.lineWidth = 3; ctx.shadowBlur = 15; ctx.shadowColor = '#ffdd44aa';
            ctx.beginPath(); ctx.arc(ax + 16, ay - 4, bowLen, bowAngle - 0.7, bowAngle + 0.7); ctx.stroke();
            ctx.strokeStyle = '#aaaacc'; ctx.lineWidth = 1.5;
            const e1 = bowAngle - 0.7, e2 = bowAngle + 0.7;
            const ex1 = ax+16+Math.cos(e1)*bowLen, ey1 = ay-4+Math.sin(e1)*bowLen;
            const ex2 = ax+16+Math.cos(e2)*bowLen, ey2 = ay-4+Math.sin(e2)*bowLen;
            ctx.beginPath(); ctx.moveTo(ex1, ey1); ctx.lineTo(ax+16+Math.cos(bowAngle)*10, ay-4+Math.sin(bowAngle)*10); ctx.lineTo(ex2, ey2); ctx.stroke();
            ctx.shadowBlur = 0;
            if (arrow.active) {
                ctx.save(); ctx.translate(arrow.x, arrow.y); ctx.rotate(arrow.angle);
                ctx.shadowBlur = 20; ctx.shadowColor = '#00ffaa88';
                ctx.strokeStyle = '#ddaa88'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(25,0); ctx.stroke();
                ctx.fillStyle = '#ffdd44'; ctx.shadowColor = '#ffdd44aa'; ctx.beginPath(); ctx.moveTo(28,0); ctx.lineTo(20,-5); ctx.lineTo(20,5); ctx.closePath(); ctx.fill();
                ctx.fillStyle = '#ff6666'; ctx.shadowColor = '#ff666688'; ctx.beginPath(); ctx.moveTo(-2,0); ctx.lineTo(-8,-6); ctx.lineTo(-8,6); ctx.closePath(); ctx.fill();
                ctx.restore(); ctx.shadowBlur = 0;
            }
        }

        function draw() {
            ctx.clearRect(0, 0, W, H);
            ctx.fillStyle = 'rgba(0, 10, 30, 0.3)'; ctx.fillRect(0, 0, W, H);
            ctx.strokeStyle = '#00aaff20'; ctx.lineWidth = 0.5;
            for (let i=0; i&lt;W; i+=30) { ctx.beginPath(); ctx.moveTo(i,0); ctx.lineTo(i,H); ctx.stroke(); }
            for (let i=0; i&lt;H; i+=30) { ctx.beginPath(); ctx.moveTo(0,i); ctx.lineTo(W,i); ctx.stroke(); }
            ctx.strokeStyle = '#00d4ff15'; ctx.lineWidth = 1;
            for (let i=0; i&lt;W; i+=80) { ctx.beginPath(); ctx.moveTo(i,0); ctx.lineTo(i+40,H); ctx.stroke(); }
            for (let i=0; i&lt;30; i++) {
                ctx.fillStyle = `rgba(0, 180, 255, ${Math.random()*0.15+0.03})`;
                ctx.font = '12px monospace'; ctx.fillText(Math.random()&gt;0.5?'1':'0', Math.random()*W, Math.random()*H);
            }
            ctx.fillStyle = '#00aaff10'; ctx.font = '28px sans-serif';
            ctx.fillText('PC', 20, 40); ctx.fillText('NB', W-50, 50); ctx.fillText('NT', W-70, H-30); ctx.fillText('PR', 30, H-20);

            targets.forEach(t =&gt; {
                if (t.answered) return;
                ctx.shadowColor = '#00aaffaa'; ctx.shadowBlur = 30;
                const grad = ctx.createRadialGradient(t.x-5, t.y-5, 2, t.x, t.y, t.size);
                grad.addColorStop(0, '#80d4ff'); grad.addColorStop(0.5, '#0088ff'); grad.addColorStop(1, '#1a0066');
                ctx.beginPath(); ctx.arc(t.x, t.y, t.size, 0, 2*Math.PI);
                ctx.fillStyle = grad; ctx.fill();
                ctx.shadowBlur = 0;
                ctx.strokeStyle = '#80d4ff'; ctx.lineWidth = 2.5; ctx.shadowBlur = 15; ctx.shadowColor = '#00aaff';
                ctx.stroke(); ctx.shadowBlur = 0;
                
                ctx.font = `${t.size * 0.38}px 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif`;
                ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
                ctx.fillStyle = '#ffffff'; ctx.shadowBlur = 8; ctx.shadowColor = '#0044ff';
                ctx.fillText(t.icon, t.x, t.y - 14);
                ctx.shadowBlur = 0;
                
                ctx.fillStyle = '#ffffff'; 
                const fontSize = Math.max(14, t.size * 0.34);
                ctx.font = `bold ${fontSize}px 'Segoe UI', Arial, sans-serif`;
                ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
                let displayText = t.fullText;
                if (displayText.length &gt; 14) displayText = displayText.substring(0, 13) + '…';
                
                const metrics = ctx.measureText(displayText);
                const tw = metrics.width;
                const th = fontSize * 1.5;
                const tx = t.x - tw/2 - 8;
                const ty = t.y + t.size - 14 - th;
                
                ctx.shadowBlur = 0;
                const r = 6;
                ctx.beginPath();
                ctx.moveTo(tx + r, ty);
                ctx.lineTo(tx + tw + 16 - r, ty);
                ctx.quadraticCurveTo(tx + tw + 16, ty, tx + tw + 16, ty + r);
                ctx.lineTo(tx + tw + 16, ty + th + 6 - r);
                ctx.quadraticCurveTo(tx + tw + 16, ty + th + 6, tx + tw + 16 - r, ty + th + 6);
                ctx.lineTo(tx + r, ty + th + 6);
                ctx.quadraticCurveTo(tx, ty + th + 6, tx, ty + th + 6 - r);
                ctx.lineTo(tx, ty + r);
                ctx.quadraticCurveTo(tx, ty, tx + r, ty);
                ctx.closePath();
                ctx.fillStyle = 'rgba(0, 10, 30, 0.85)';
                ctx.fill();
                
                ctx.fillStyle = '#ffffff';
                ctx.shadowBlur = 4;
                ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
                ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
                ctx.fillText(displayText, t.x, t.y + t.size - 6);
                ctx.shadowBlur = 0;
                
                t.x += t.vx; t.y += t.vy;
                if (t.x &lt; t.size + 20 || t.x &gt; W - t.size - 10) t.vx *= -1;
                if (t.y &lt; t.size + 20 || t.y &gt; H - t.size - 80) t.vy *= -1;
                t.x = Math.min(Math.max(t.x, t.size+20), W - t.size - 10);
                t.y = Math.min(Math.max(t.y, t.size+20), H - t.size - 80);
            });

            if (arrow.active) updateArrow();
            if (arrowCooldown &gt; 0) arrowCooldown--;
            if (gameActive) {
                const targetX = Math.min(Math.max(mouseX, 30), W - 30);
                archer.x += (targetX - archer.x) * 0.08;
                archer.y = H - 70;
            }
            drawArcher();

            for (let i=particles.length-1; i&gt;=0; i--) {
                const p = particles[i];
                p.x += p.vx; p.y += p.vy; p.life -= p.decay; p.vy += 0.05;
                if (p.life &lt;= 0) { particles.splice(i,1); continue; }
                ctx.globalAlpha = p.life; ctx.fillStyle = p.color; ctx.shadowBlur = 10; ctx.shadowColor = p.color;
                ctx.beginPath(); ctx.arc(p.x, p.y, p.size * p.life, 0, 2*Math.PI); ctx.fill();
                ctx.shadowBlur = 0;
            }
            ctx.globalAlpha = 1;

            for (let i=fireworks.length-1; i&gt;=0; i--) {
                const f = fireworks[i];
                f.x += f.vx; f.y += f.vy; f.vy += 0.04; f.life -= f.decay;
                if (f.life &lt;= 0) { fireworks.splice(i,1); continue; }
                ctx.globalAlpha = f.life; ctx.fillStyle = f.color; ctx.shadowBlur = 18; ctx.shadowColor = f.color;
                if (f.isConfetti) { ctx.save(); ctx.translate(f.x, f.y); ctx.rotate(f.life*12); ctx.fillRect(-f.size/2, -f.size/2, f.size*f.life, f.size*f.life*0.5); ctx.restore(); }
                else { ctx.beginPath(); ctx.arc(f.x, f.y, f.size * f.life, 0, 2*Math.PI); ctx.fill(); }
                ctx.shadowBlur = 0;
            }
            ctx.globalAlpha = 1;
        }

        function gameLoop() { draw(); animationFrame = requestAnimationFrame(gameLoop); }

        canvasEl.addEventListener('click', (e) =&gt; {
            const rect = canvasEl.getBoundingClientRect();
            const scaleX = canvas.width / rect.width, scaleY = canvas.height / rect.height;
            shootArrow((e.clientX - rect.left)*scaleX, (e.clientY - rect.top)*scaleY);
        });
        canvasEl.addEventListener('touchstart', (e) =&gt; {
            e.preventDefault(); const rect = canvasEl.getBoundingClientRect();
            const touch = e.touches[0]; const scaleX = canvas.width/rect.width, scaleY = canvas.height/rect.height;
            shootArrow((touch.clientX - rect.left)*scaleX, (touch.clientY - rect.top)*scaleY);
        }, { passive: false });
        canvasEl.addEventListener('mousemove', (e) =&gt; {
            const rect = canvasEl.getBoundingClientRect();
            mouseX = (e.clientX - rect.left) * (canvas.width/rect.width);
            mouseY = (e.clientY - rect.top) * (canvas.height/rect.height);
        });
        speechBtn.addEventListener('click', () =&gt; speakScoreboard(finalScore, finalRank, finalMessage, finalAccuracy));

        function startGame() {
            const nameInput = document.getElementById('playerNameInput');
            userName = nameInput.value.trim() || "User";
            playerNameDisplay.textContent = `&#127919; ${userName}`;
            entryScreen.style.display = 'none';
            congratsOverlay.classList.remove('show');
            
            score = 0; totalAttempts = 0; correctAttempts = 0; currentLevel = 0;
            timeRemaining = TOTAL_TIME;
            updateTimerDisplay();
            timerDisplay.style.color = '#ff6b6b';
            timerDisplay.style.borderColor = '#ff4444';
            
            gameActive = true; isCelebrating = false; particles = []; fireworks = []; arrow.active = false;
            if (speechSynth.speaking) speechSynth.cancel();
            
            startTimer();
            loadLevel(0); updateUI();
            if (animationFrame) cancelAnimationFrame(animationFrame);
            gameLoop();
        }

        document.getElementById('startGameBtn').addEventListener('click', startGame);
        document.getElementById('restartFromCongratsBtn').addEventListener('click', () =&gt; { 
            congratsOverlay.classList.remove('show'); 
            if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }
            timerRunning = false;
            startGame(); 
        });
        loadLeaderboard(); loadLevel(0); updateUI();
        qNumberDisplay.textContent = '&#127919;'; qTextDisplay.textContent = 'Masukkan nama &amp; tekan MULAI';
        updateTimerDisplay();
        gameLoop();
        window.addEventListener('resize', resizeCanvas);
    })();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</description><link>http://kitab-investasi.blogspot.com/2026/07/arrowa-smart-informatika-arrow.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-3527539497463372680</guid><pubDate>Mon, 06 Jul 2026 01:46:27 +0000</pubDate><atom:updated>2026-07-15T08:22:26.997+07:00</atom:updated><title>ARROW SMART-5S</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
    &lt;title&gt;SMART-5S Archery&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }
        body {
            background: #0a0e1a;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', 'Arial', sans-serif;
        }
        #game-wrapper {
            width: 100%;
            max-width: 800px;
            height: 100vh;
            max-height: 900px;
            background: radial-gradient(circle at 30% 20%, #0d1b2a, #050a14);
            box-shadow: 0 0 50px #00d4ff40, 0 0 120px #0055ff20;
            border-radius: 32px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            border: 1px solid #00d4ff60;
        }
        #header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            color: #a8e6ff;
            font-weight: bold;
            background: rgba(0, 20, 40, 0.6);
            backdrop-filter: blur(4px);
            border-radius: 60px;
            border: 1px solid #00d4ff80;
            margin-bottom: 10px;
            flex-shrink: 0;
        }
        #header span {
            background: #0a1a2e;
            padding: 4px 16px;
            border-radius: 40px;
            border: 1px solid #00d4ff;
            font-size: 0.9rem;
            letter-spacing: 1px;
        }
        #level-indicator { background: #0a1a2e; color: #7ad0ff; border-color: #00aaff; }
        #score-indicator { color: #facc15; border-color: #facc15; }
        #player-name-display { color: #7ad0ff; border-color: #00aaff; }
        #game-canvas-container {
            flex: 1;
            position: relative;
            background: transparent;
            border-radius: 24px;
            overflow: hidden;
            min-height: 300px;
            border: 1px solid #00d4ff40;
            box-shadow: inset 0 0 60px #0044aa30;
            cursor: crosshair;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
            background: transparent;
            cursor: crosshair;
        }
        #question-panel {
            background: rgba(0, 16, 32, 0.85);
            backdrop-filter: blur(8px);
            border: 1px solid #00d4ff;
            border-radius: 40px;
            padding: 14px 20px;
            margin-top: 10px;
            color: #e6f7ff;
            font-weight: 600;
            font-size: clamp(1rem, 2.8vw, 1.3rem);
            text-align: left;
            box-shadow: 0 0 40px #0066ff44;
            flex-shrink: 0;
            min-height: 76px;
            display: flex;
            align-items: center;
            line-height: 1.5;
        }
        #question-panel .q-number {
            color: #00d4ff;
            font-weight: 800;
            margin-right: 12px;
            white-space: nowrap;
            text-shadow: 0 0 12px #00aaff;
        }
        #question-panel .q-text {
            color: #ffffff;
            font-weight: 700;
            text-shadow: 0 0 8px rgba(0, 180, 255, 0.3);
        }
        #entry-screen {
            position: absolute;
            inset: 0;
            z-index: 20;
            background: rgba(0, 6, 16, 0.92);
            backdrop-filter: blur(12px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            border-radius: 32px;
            padding: 20px;
        }
        #entry-screen h1 {
            font-size: 2.6rem;
            color: #7ad0ff;
            text-shadow: 0 0 40px #00aaff, 0 0 100px #0055ff;
            letter-spacing: 4px;
            font-weight: 800;
        }
        #entry-screen input {
            background: #0a1a2e;
            border: 2px solid #00d4ff;
            border-radius: 60px;
            padding: 16px 24px;
            width: 80%;
            max-width: 340px;
            font-size: 1.3rem;
            color: #d6f0ff;
            text-align: center;
            outline: none;
            box-shadow: 0 0 40px #0066ff55;
        }
        #entry-screen input::placeholder { color: #4a7a9a; }
        .cyber-btn {
            background: linear-gradient(145deg, #0a2a4a, #06152a);
            border: 1px solid #00d4ff;
            color: #d6f0ff;
            padding: 16px 48px;
            border-radius: 60px;
            font-size: 1.6rem;
            font-weight: bold;
            letter-spacing: 3px;
            box-shadow: 0 0 40px #00aaffaa, inset 0 0 20px #00aaff44;
            transition: 0.2s;
            cursor: pointer;
            backdrop-filter: blur(4px);
        }
        .cyber-btn:active { transform: scale(0.93); box-shadow: 0 0 80px #00d4ff; }
        #congrats-overlay {
            position: absolute;
            inset: 0;
            z-index: 30;
            background: rgba(0, 4, 16, 0.85);
            backdrop-filter: blur(8px);
            border-radius: 32px;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            color: #fff;
        }
        #congrats-overlay.show { display: flex; }
        .congrats-box {
            background: rgba(0, 16, 32, 0.8);
            border: 2px solid #00d4ff;
            border-radius: 60px;
            padding: 30px 20px;
            max-width: 480px;
            width: 100%;
            box-shadow: 0 0 80px #0066ff88, inset 0 0 30px #00aaff44;
            backdrop-filter: blur(8px);
            position: relative;
            z-index: 5;
        }
        .congrats-box .user-name {
            font-size: 1.4rem;
            color: #7ad0ff;
            margin-bottom: 8px;
            text-shadow: 0 0 20px #00aaff;
        }
        .congrats-box .user-name i {
            font-style: normal;
            background: rgba(0,180,255,0.15);
            padding: 2px 14px;
            border-radius: 30px;
            border: 1px solid #00aaff44;
        }
        .congrats-box h2 {
            font-size: 2.4rem;
            margin-bottom: 6px;
            color: #facc15;
            text-shadow: 0 0 30px #facc15aa;
        }
        .congrats-box .rank {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(45deg, #7ad0ff, #00aaff, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 10px 0;
            text-shadow: 0 0 40px #00aaff55;
        }
        .congrats-box .final-score {
            font-size: 1.8rem;
            color: #7ad0ff;
            text-shadow: 0 0 20px #00aaff66;
        }
        .congrats-box .final-score span {
            color: #facc15;
            font-weight: 800;
            text-shadow: 0 0 20px #facc1566;
        }
        .congrats-box .message {
            font-size: 1.2rem;
            color: #c8e6ff;
            margin: 16px 0;
            background: rgba(0, 180, 255, 0.1);
            padding: 10px 16px;
            border-radius: 30px;
            border: 1px solid #00aaff44;
        }
        .congrats-box .stats-grid {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 12px 0;
            font-size: 0.9rem;
            color: #7ad0ff;
        }
        .congrats-box .stats-grid span {
            background: rgba(0, 20, 50, 0.5);
            padding: 4px 14px;
            border-radius: 20px;
            border: 1px solid #00aaff33;
        }
        .congrats-box .footer-note {
            margin-top: 16px;
            font-size: 0.85rem;
            color: #5a8aaa;
            letter-spacing: 1px;
            border-top: 1px solid #00aaff33;
            padding-top: 14px;
            font-style: italic;
        }
        .small-btn {
            background: #0a2a4a;
            border: 1px solid #00d4ff;
            color: #d6f0ff;
            padding: 12px 30px;
            border-radius: 60px;
            font-size: 1.2rem;
            margin-top: 12px;
            cursor: pointer;
            transition: 0.2s;
            box-shadow: 0 0 20px #00aaff33;
        }
        .small-btn:active { transform: scale(0.92); }
        #speech-btn {
            background: rgba(0, 180, 255, 0.15);
            border: 1px solid #00d4ff;
            color: #7ad0ff;
            padding: 8px 20px;
            border-radius: 40px;
            font-size: 0.9rem;
            cursor: pointer;
            margin-top: 6px;
            transition: 0.2s;
            box-shadow: 0 0 15px #00aaff22;
        }
        #speech-btn:hover { background: rgba(0, 180, 255, 0.3); }
        #speech-btn:active { transform: scale(0.95); }
        #leaderboard {
            position: absolute;
            bottom: 10px;
            right: 16px;
            background: #0a1218cc;
            backdrop-filter: blur(8px);
            padding: 10px 18px;
            border-radius: 40px;
            border: 1px solid #00d4ff;
            color: #7ad0ff;
            font-size: 0.8rem;
            max-width: 200px;
            max-height: 120px;
            overflow-y: auto;
            z-index: 10;
        }
        #leaderboard div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #00d4ff40; padding: 2px 0; }
        .lb-score { color: #facc15; }
        @media (max-width: 500px) {
            #header span { font-size: 0.7rem; padding: 2px 10px; }
            #entry-screen h1 { font-size: 2rem; }
            #question-panel { font-size: clamp(0.8rem, 2.5vw, 1rem); padding: 10px 14px; min-height: 64px; }
            .congrats-box { padding: 20px 14px; }
            .congrats-box h2 { font-size: 1.8rem; }
            .congrats-box .rank { font-size: 1.5rem; }
            .congrats-box .final-score { font-size: 1.4rem; }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="game-wrapper"&gt;
    &lt;div id="header"&gt;
        &lt;span id="player-name-display"&gt;&#127993; User&lt;/span&gt;
        &lt;span id="level-indicator"&gt;⚡ Level 1&lt;/span&gt;
        &lt;span id="score-indicator"&gt;⭐ 0 / 100&lt;/span&gt;
    &lt;/div&gt;

    &lt;div id="game-canvas-container"&gt;
        &lt;canvas id="gameCanvas" width="800" height="600"&gt;&lt;/canvas&gt;

        &lt;div id="entry-screen"&gt;
            &lt;h1&gt;&#127993; SMART-5S&lt;/h1&gt;
            &lt;input id="playerNameInput" type="text" placeholder="Nama User" maxlength="16"&gt;
            &lt;button class="cyber-btn" id="startGameBtn"&gt;▶ MULAI&lt;/button&gt;
            &lt;div style="color:#4a7a9a; font-size:0.8rem;"&gt;Tembak gelembung jawaban dengan panah!&lt;/div&gt;
        &lt;/div&gt;

        &lt;div id="congrats-overlay"&gt;
            &lt;div class="congrats-box"&gt;
                &lt;div class="user-name"&gt;&#127993; &lt;i id="userNameDisplay"&gt;User&lt;/i&gt;&lt;/div&gt;
                &lt;h2&gt;&#127937; MISI SELESAI&lt;/h2&gt;
                &lt;div class="rank" id="rankDisplay"&gt;SMART-5S Master&lt;/div&gt;
                &lt;div class="final-score"&gt;Skor Akhir: &lt;span id="finalScoreDisplay"&gt;0&lt;/span&gt; / 100&lt;/div&gt;
                &lt;div class="stats-grid"&gt;
                    &lt;span id="levelCompleteDisplay"&gt;Level: 5/5&lt;/span&gt;
                    &lt;span id="accuracyDisplay"&gt;Akurasi: 0%&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="message" id="personalMessage"&gt;Hebat, User!&lt;/div&gt;
                &lt;button id="speech-btn"&gt;&#128266; Dengarkan Laporan&lt;/button&gt;
                &lt;button class="small-btn" id="restartFromCongratsBtn"&gt;&#128260; Misi Ulang&lt;/button&gt;
                &lt;div class="footer-note"&gt;✦ Selamat Belajar &amp; Bermain ✦&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div id="leaderboard"&gt;
            &lt;div style="color:#facc15; font-weight:bold;"&gt;&#127942; LEADERBOARD&lt;/div&gt;
            &lt;div id="lbEntries"&gt;&lt;div style="color:#4a7a9a;"&gt;Belum ada data&lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="question-panel"&gt;
        &lt;span class="q-number" id="qNumberDisplay"&gt;1.&lt;/span&gt;
        &lt;span class="q-text" id="qTextDisplay"&gt;Tekan mulai &amp; tembak gelembung&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    (function(){
        // ----- BANK PERTANYAAN SMART-5S -----
        const LEVELS = 5;
        const QUESTIONS_PER_LEVEL = 10;
        const MAX_SCORE = 100;

        const QUESTION_BANK = [
            // Level 1: Senyum
            [
                { q: "Apa makna dari Senyum dalam SMART-5S?", options: ["Ekspresi wajah yang menunjukkan keramahan dan kebaikan hati", "Tersenyum sinis kepada orang lain", "Menertawakan orang lain", "Muka cemberut", "Acuh tak acuh"], correct: 0 },
                { q: "Bagaimana penerapan Senyum yang benar?", options: ["Memberikan senyuman tulus saat kontak mata", "Tersenyum hanya jika dipaksa", "Tersenyum kepada teman saja", "Tersenyum tanpa alasan", "Tersenyum hanya di foto"], correct: 0 },
                { q: "Apa manfaat utama dari Senyum?", options: ["Mempererat hubungan dan menciptakan suasana hangat", "Menakut-nakuti orang lain", "Menunjukkan kesombongan", "Membuat orang lain cemburu", "Menghindari interaksi"], correct: 0 },
                { q: "Senyum yang tulus mencerminkan...", options: ["Kebaikan hati", "Kepalsuan", "Kesombongan", "Keangkuhan", "Ketakutan"], correct: 0 },
                { q: "Senyum dapat membuat orang lain merasa...", options: ["Dihargai dan nyaman", "Takut", "Bosan", "Tersinggung", "Marah"], correct: 0 },
                { q: "Senyum adalah bahasa...", options: ["Universal", "Tertutup", "Individual", "Egois", "Sulit"], correct: 0 },
                { q: "Apa yang dimaksud dengan 'senyum tulus'?", options: ["Senyum yang datang dari hati", "Senyum yang dibuat-buat", "Senyum sinis", "Senyum mengejek", "Senyum terpaksa"], correct: 0 },
                { q: "Senyum dapat mengurangi...", options: ["Ketegangan dan stres", "Kebahagiaan", "Pertemanan", "Kerukunan", "Semangat"], correct: 0 },
                { q: "Kapan sebaiknya kita memberikan senyum?", options: ["Saat bertemu atau memulai percakapan", "Hanya saat senang", "Hanya saat dipaksa", "Tidak perlu tersenyum", "Saat sendirian"], correct: 0 },
                { q: "Senyum dalam SMART-5S bertujuan untuk...", options: ["Membuka komunikasi yang hangat", "Menutup komunikasi", "Membuat orang lain takut", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 }
            ],
            // Level 2: Salam
            [
                { q: "Apa makna dari Salam dalam SMART-5S?", options: ["Ungkapan atau gestur untuk menyapa dan memberi penghormatan", "Hanya melambaikan tangan", "Mengangguk saja", "Tidak perlu menyapa", "Mengabaikan orang lain"], correct: 0 },
                { q: "Contoh penerapan Salam yang benar adalah...", options: ["Mengucapkan 'Assalamu'alaikum' atau 'Selamat pagi'", "Hanya melambaikan tangan", "Mengangguk tanpa kata", "Tidak mengucapkan apa-apa", "Menghindari kontak"], correct: 0 },
                { q: "Apa manfaat dari Salam?", options: ["Memberi kesan positif dan mengurangi jarak emosional", "Menakut-nakuti", "Membuat orang lain risih", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 },
                { q: "Salam yang diajarkan dalam SMART-5S adalah...", options: ["Assalamu'alaikum", "Halo", "Hey", "Apa kabar", "Selamat pagi"], correct: 0 },
                { q: "Salam adalah doa untuk...", options: ["Keselamatan dan kebaikan", "Kekayaan", "Ketenaran", "Kekuasaan", "Kemenangan"], correct: 0 },
                { q: "Budaya salam mencerminkan...", options: ["Kerendahan hati", "Kesombongan", "Keangkuhan", "Kebencian", "Kecurigaan"], correct: 0 },
                { q: "Mengucapkan salam ketika bertemu guru adalah bentuk...", options: ["Salam (SMART-5S)", "Senyum", "Sapa", "Sopan", "Santun"], correct: 0 },
                { q: "Membalas salam adalah kewajiban...", options: ["Sosial dan agama", "Pribadi", "Hanya untuk teman", "Hanya untuk guru", "Tidak perlu"], correct: 0 },
                { q: "Salam yang baik diiringi dengan...", options: ["Jabat tangan atau mengatupkan tangan di dada", "Diam saja", "Menghindar", "Menatap tajam", "Teriakan"], correct: 0 },
                { q: "Salam dapat membangun...", options: ["Hubungan yang harmonis", "Permusuhan", "Jarak", "Kesalahpahaman", "Konflik"], correct: 0 }
            ],
            // Level 3: Sapa
            [
                { q: "Apa makna dari Sapa dalam SMART-5S?", options: ["Bentuk interaksi untuk menanyakan kabar atau memulai pembicaraan", "Memanggil dengan keras", "Menggodai teman", "Menghindari orang", "Bersikap cuek"], correct: 0 },
                { q: "Contoh penerapan Sapa yang benar adalah...", options: ["'Apa kabar?' atau 'Bagaimana harimu?'", "Memanggil dengan teriakan", "Menghina", "Diam saja", "Acuh tak acuh"], correct: 0 },
                { q: "Apa manfaat dari Sapa?", options: ["Menunjukkan kepedulian dan membangun hubungan akrab", "Menakut-nakuti", "Membuat orang lain bosan", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 },
                { q: "Sapa yang baik adalah...", options: ["Dengan kata-kata yang santun dan hangat", "Dengan teriakan", "Dengan nada tinggi", "Dengan kata kasar", "Dengan diam saja"], correct: 0 },
                { q: "Sapa dapat mempererat...", options: ["Hubungan pertemanan", "Permusuhan", "Jarak", "Kesalahpahaman", "Konflik"], correct: 0 },
                { q: "Sapa yang akrab membuat orang lain merasa...", options: ["Dihargai dan diperhatikan", "Takut", "Bosan", "Tersinggung", "Marah"], correct: 0 },
                { q: "Sapa yang baik dimulai dengan...", options: ["Senyum dan salam", "Diam", "Menghindar", "Menatap tajam", "Teriakan"], correct: 0 },
                { q: "Sapa membuat suasana menjadi...", options: ["Akrab dan hangat", "Tegang", "Mencekam", "Dingin", "Kaku"], correct: 0 },
                { q: "Setelah memberi salam, langkah selanjutnya adalah...", options: ["Memberikan sapa", "Langsung pergi", "Diam", "Menghindar", "Acuh"], correct: 0 },
                { q: "Sapa menunjukkan...", options: ["Kepedulian dan perhatian", "Keangkuhan", "Kesombongan", "Ketakutan", "Kebencian"], correct: 0 }
            ],
            // Level 4: Sopan
            [
                { q: "Apa makna dari Sopan dalam SMART-5S?", options: ["Sikap menghargai norma sosial, tata krama, dan bahasa yang baik", "Berbicara kasar", "Memotong pembicaraan", "Tidak peduli", "Bersikap angkuh"], correct: 0 },
                { q: "Contoh penerapan Sopan yang benar adalah...", options: ["Menggunakan bahasa tubuh yang menghargai lawan bicara", "Meludah sembarangan", "Memotong pembicaraan", "Menggunakan kata kasar", "Acuh tak acuh"], correct: 0 },
                { q: "Apa manfaat dari Sopan?", options: ["Membuat diri lebih dihargai dan suasana nyaman", "Menakut-nakuti", "Membuat orang lain bosan", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 },
                { q: "Sopan dalam berbicara berarti...", options: ["Menggunakan kata yang halus", "Berteriak", "Memotong pembicaraan", "Menggunakan kata kasar", "Mengabaikan lawan bicara"], correct: 0 },
                { q: "Sopan santun kepada guru menunjukkan...", options: ["Penghormatan", "Ketakutan", "Keangkuhan", "Kebencian", "Ketidakpedulian"], correct: 0 },
                { q: "Sopan adalah cerminan...", options: ["Karakter mulia", "Kelemahan", "Kesombongan", "Keangkuhan", "Kebodohan"], correct: 0 },
                { q: "Menghargai pendapat teman adalah bentuk...", options: ["Sopan", "Senyum", "Salam", "Sapa", "Santun"], correct: 0 },
                { q: "Sopan dalam berpakaian di sekolah adalah...", options: ["Seragam rapi dan sopan", "Pakaian bebas", "Pakaian ketat", "Pakaian kusut", "Pakaian tidak senonoh"], correct: 0 },
                { q: "Sopan bertujuan untuk...", options: ["Menciptakan interaksi yang nyaman", "Menakut-nakuti", "Menghina", "Mengasingkan", "Membuat kacau"], correct: 0 },
                { q: "Sopan mencerminkan...", options: ["Penghargaan terhadap orang lain", "Keangkuhan", "Kesombongan", "Ketakutan", "Kebencian"], correct: 0 }
            ],
            // Level 5: Santun
            [
                { q: "Apa makna dari Santun dalam SMART-5S?", options: ["Perwujudan kehalusan budi bahasa dan perilaku penuh kelembutan", "Bersikap kasar", "Bersikap sombong", "Menghina orang", "Bersikap acuh"], correct: 0 },
                { q: "Contoh penerapan Santun yang benar adalah...", options: ["Mengucapkan 'Tolong', 'Terima kasih', dan 'Maaf'", "Berbicara kasar", "Menghina teman", "Mengabaikan guru", "Bersikap angkuh"], correct: 0 },
                { q: "Apa manfaat dari Santun?", options: ["Membangun reputasi positif dan memancarkan empati", "Menakut-nakuti", "Membuat orang lain bosan", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 },
                { q: "Santun dalam berkomunikasi berarti...", options: ["Memilih kata dengan bijak dan nada lembut", "Berteriak", "Memotong pembicaraan", "Menggunakan kata kasar", "Diam saja"], correct: 0 },
                { q: "Budaya santun diajarkan sejak...", options: ["Usia dini", "Dewasa", "Lanjut usia", "Sekolah menengah", "Perguruan tinggi"], correct: 0 },
                { q: "Santun membuat orang lain merasa...", options: ["Nyaman dan dihormati", "Takut", "Bosan", "Tersinggung", "Marah"], correct: 0 },
                { q: "Kebalikan dari santun adalah...", options: ["Kasar dan angkuh", "Ramah", "Baik", "Rendah hati", "Sopan"], correct: 0 },
                { q: "Santun adalah bagian dari...", options: ["Akhlak mulia", "Kelemahan", "Kesombongan", "Keangkuhan", "Kebodohan"], correct: 0 },
                { q: "Penerapan santun di media sosial adalah...", options: ["Berkomentar dengan sopan", "Menyebarkan kebencian", "Menghina orang", "Menggunakan kata kasar", "Mengabaikan etika"], correct: 0 },
                { q: "Santun dalam SMART-5S bertujuan untuk...", options: ["Memancarkan empati dan kedewasaan emosional", "Menakut-nakuti", "Menghina", "Mengasingkan", "Membuat kacau"], correct: 0 }
            ]
        ];

        // ----- STATE -----
        let userName = "User";
        let currentLevel = 0;
        let currentQuestionIndex = 0;
        let score = 0;
        let totalAttempts = 0;
        let correctAttempts = 0;
        let questionsForLevel = [];
        let bubbles = [];
        let gameActive = false;
        let levelCompleted = false;
        let animationFrame = null;
        let canvas, ctx;
        let W, H;
        let leaderboardData = [];
        let particles = [];
        let fireworks = [];
        let isCelebrating = false;
        let finalScore = 0;
        let finalRank = "";
        let finalMessage = "";
        let finalAccuracy = 0;

        // Archery state - pemanah bergerak horizontal di bawah target
        let archer = { x: 50, y: 0 };
        let arrow = { 
            x: 0, y: 0, 
            vx: 0, vy: 0, 
            active: false, 
            angle: 0,
            targetX: 0,
            targetY: 0,
            speed: 10,
            homing: false
        };
        let arrowCooldown = 0;
        let mouseX = 0, mouseY = 0;
        let archerTargetY = 0;
        let archerSpeed = 2.5;

        // DOM
        const canvasEl = document.getElementById('gameCanvas');
        const questionPanel = document.getElementById('question-panel');
        const qNumberDisplay = document.getElementById('qNumberDisplay');
        const qTextDisplay = document.getElementById('qTextDisplay');
        const levelIndicator = document.getElementById('level-indicator');
        const scoreIndicator = document.getElementById('score-indicator');
        const playerNameDisplay = document.getElementById('player-name-display');
        const entryScreen = document.getElementById('entry-screen');
        const congratsOverlay = document.getElementById('congrats-overlay');
        const finalScoreSpan = document.getElementById('finalScoreDisplay');
        const rankDisplay = document.getElementById('rankDisplay');
        const personalMessage = document.getElementById('personalMessage');
        const userNameDisplay = document.getElementById('userNameDisplay');
        const levelCompleteDisplay = document.getElementById('levelCompleteDisplay');
        const accuracyDisplay = document.getElementById('accuracyDisplay');
        const lbEntries = document.getElementById('lbEntries');
        const speechBtn = document.getElementById('speech-btn');

        canvas = canvasEl;
        ctx = canvas.getContext('2d');

        // Speech Synthesis
        let speechSynth = window.speechSynthesis;
        let speechUtterance = null;

        function speakScoreboard(score, rank, message, accuracy) {
            if (!window.speechSynthesis) return;
            if (speechSynth.speaking) speechSynth.cancel();
            const text = `Laporan misi untuk User ${userName}. Skor akhir ${score} dari 100 poin. Predikat ${rank}. Akurasi ${accuracy} persen. ${message}`;
            speechUtterance = new SpeechSynthesisUtterance(text);
            speechUtterance.lang = 'id-ID';
            speechUtterance.rate = 0.85;
            speechUtterance.pitch = 1;
            speechSynth.speak(speechUtterance);
        }

        // ----- GAME FUNCTIONS -----
        function shuffleArray(arr) {
            for (let i = arr.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [arr[i], arr[j]] = [arr[j], arr[i]];
            }
            return arr;
        }

        function loadLeaderboard() {
            try {
                const data = localStorage.getItem('smart5s_leaderboard');
                if (data) leaderboardData = JSON.parse(data);
                else leaderboardData = [];
            } catch(e){ leaderboardData = []; }
            renderLeaderboard();
        }
        function saveLeaderboard() {
            localStorage.setItem('smart5s_leaderboard', JSON.stringify(leaderboardData));
            renderLeaderboard();
        }
        function renderLeaderboard() {
            if (!lbEntries) return;
            if (leaderboardData.length === 0) {
                lbEntries.innerHTML = '&lt;div style="color:#4a7a9a;"&gt;Belum ada data&lt;/div&gt;';
                return;
            }
            const sorted = [...leaderboardData].sort((a,b) =&gt; b.score - a.score).slice(0,5);
            lbEntries.innerHTML = sorted.map(p =&gt; 
                `&lt;div&gt;&lt;span&gt;${p.name}&lt;/span&gt;&lt;span class="lb-score"&gt;${p.score}&lt;/span&gt;&lt;/div&gt;`
            ).join('');
        }

        function resizeCanvas() {
            const container = document.getElementById('game-canvas-container');
            const rect = container.getBoundingClientRect();
            canvas.width = rect.width || 800;
            canvas.height = rect.height || 600;
            W = canvas.width;
            H = canvas.height;
            // Posisi awal pemanah di bawah target
            archer.y = H - 70;
            archer.x = 50;
            archerTargetY = archer.y;
            if (gameActive &amp;&amp; questionsForLevel.length) {
                generateBubbles();
                if (!levelCompleted) showCurrentQuestion();
            }
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        function loadLevel(levelIdx) {
            currentLevel = levelIdx;
            currentQuestionIndex = 0;
            levelCompleted = false;
            const raw = QUESTION_BANK[levelIdx] || QUESTION_BANK[0];
            questionsForLevel = raw.map(item =&gt; {
                const shuffledOptions = shuffleArray([...item.options]);
                const correctIndex = shuffledOptions.indexOf(item.options[item.correct]);
                return {
                    q: item.q,
                    options: shuffledOptions,
                    correct: correctIndex
                };
            });
            questionsForLevel = shuffleArray(questionsForLevel);
            generateBubbles();
            updateUI();
            if (gameActive) {
                showCurrentQuestion();
            }
        }

        function generateBubbles() {
            bubbles = [];
            if (!questionsForLevel.length) return;
            const total = questionsForLevel.length;
            const cols = Math.min(4, total, Math.floor(W / 130) + 1);
            const rows = Math.ceil(total / cols);
            const spacingX = (W - 80) / (cols + 1);
            const spacingY = (H - 140) / (rows + 2); // Sisakan ruang untuk pemanah di bawah
            const radius = Math.min(spacingX * 0.38, spacingY * 0.42, 55);
            const baseY = spacingY * 0.6 + 20;
            for (let i = 0; i &lt; total; i++) {
                const col = i % cols;
                const row = Math.floor(i / cols);
                let x = 60 + spacingX * (col + 1) + (Math.random() - 0.5) * 30;
                let y = baseY + spacingY * row + (Math.random() - 0.5) * 20;
                x = Math.min(Math.max(x, radius+20), W - radius - 10);
                y = Math.min(Math.max(y, radius+20), H - radius - 80);
                const vx = (Math.random() - 0.5) * 0.6;
                const vy = (Math.random() - 0.5) * 0.6;
                bubbles.push({
                    id: i,
                    x, y, radius,
                    vx, vy,
                    label: questionsForLevel[i]?.options[0] || '?',
                    fullText: questionsForLevel[i]?.options[0] || '?',
                    answered: false,
                    optionIndex: 0
                });
            }
        }

        function wrapTextForBubble(text, maxCharsPerLine) {
            const words = text.split(' ');
            let lines = [];
            let currentLine = '';
            for (let w of words) {
                if ((currentLine + ' ' + w).length &lt;= maxCharsPerLine) {
                    currentLine += (currentLine ? ' ' : '') + w;
                } else {
                    if (currentLine) lines.push(currentLine);
                    currentLine = w;
                }
            }
            if (currentLine) lines.push(currentLine);
            return lines;
        }

        function showCurrentQuestion() {
            if (!questionsForLevel.length || currentQuestionIndex &gt;= questionsForLevel.length) {
                levelCompleted = true;
                if (currentLevel + 1 &lt; LEVELS) {
                    currentLevel++;
                    loadLevel(currentLevel);
                    updateUI();
                } else {
                    showFinalCongrats();
                }
                return;
            }
            const qData = questionsForLevel[currentQuestionIndex];
            if (!qData) return;
            qNumberDisplay.textContent = `${currentQuestionIndex + 1}.`;
            qTextDisplay.textContent = qData.q;
            bubbles.forEach((b, idx) =&gt; {
                const optIdx = idx % qData.options.length;
                b.optionIndex = optIdx;
                b.fullText = qData.options[optIdx] || '?';
                b.label = b.fullText;
                b.answered = false;
            });
        }

        // Fungsi menembak - panah meluncur ke target
        function shootArrow(targetX, targetY) {
            if (!gameActive || levelCompleted) return;
            if (arrow.active || arrowCooldown &gt; 0) return;
            
            const dx = targetX - archer.x;
            const dy = targetY - archer.y;
            const dist = Math.sqrt(dx*dx + dy*dy);
            if (dist &lt; 30) return;
            
            arrow.active = true;
            arrow.x = archer.x + 20;
            arrow.y = archer.y - 10;
            arrow.targetX = targetX;
            arrow.targetY = targetY;
            arrow.homing = true;
            arrow.speed = 10;
            const angle = Math.atan2(dy, dx);
            arrow.vx = Math.cos(angle) * arrow.speed;
            arrow.vy = Math.sin(angle) * arrow.speed;
            arrow.angle = angle;
            arrowCooldown = 12;
        }

        function updateArrow() {
            if (!arrow.active) return;
            
            // Homing ke target
            if (arrow.homing) {
                const dx = arrow.targetX - arrow.x;
                const dy = arrow.targetY - arrow.y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                
                if (dist &gt; 5) {
                    const targetAngle = Math.atan2(dy, dx);
                    let angleDiff = targetAngle - arrow.angle;
                    while (angleDiff &gt; Math.PI) angleDiff -= 2 * Math.PI;
                    while (angleDiff &lt; -Math.PI) angleDiff += 2 * Math.PI;
                    
                    const turnSpeed = 0.1;
                    arrow.angle += angleDiff * turnSpeed;
                    
                    arrow.vx = Math.cos(arrow.angle) * arrow.speed;
                    arrow.vy = Math.sin(arrow.angle) * arrow.speed;
                }
            }
            
            arrow.x += arrow.vx;
            arrow.y += arrow.vy;
            
            // Cek tabrakan dengan gelembung
            for (let b of bubbles) {
                if (b.answered) continue;
                const dx = arrow.x - b.x;
                const dy = arrow.y - b.y;
                if (dx*dx + dy*dy &lt; (b.radius + 6) * (b.radius + 6)) {
                    arrow.active = false;
                    b.answered = true;
                    totalAttempts++;
                    const qData = questionsForLevel[currentQuestionIndex];
                    const selectedOptIdx = b.optionIndex % qData.options.length;
                    const isCorrect = (selectedOptIdx === qData.correct);
                    if (isCorrect) {
                        const scorePerQuestion = MAX_SCORE / (LEVELS * QUESTIONS_PER_LEVEL);
                        score = Math.min(MAX_SCORE, score + scorePerQuestion);
                        correctAttempts++;
                        spawnExplosion(b.x, b.y, '#00ffaa', 25);
                    } else {
                        spawnExplosion(b.x, b.y, '#ff4444', 18);
                    }
                    currentQuestionIndex++;
                    if (currentQuestionIndex &gt;= questionsForLevel.length) {
                        if (currentLevel + 1 &lt; LEVELS) {
                            showLevelCongrats();
                        } else {
                            showFinalCongrats();
                        }
                    } else {
                        showCurrentQuestion();
                    }
                    updateUI();
                    return;
                }
            }
            
            if (arrow.x &gt; W || arrow.x &lt; 0 || arrow.y &gt; H || arrow.y &lt; 0) {
                arrow.active = false;
            }
        }

        function spawnExplosion(x, y, color, count) {
            for (let i=0; i&lt;count; i++) {
                const angle = Math.random() * 2 * Math.PI;
                const speed = Math.random() * 4 + 1;
                particles.push({
                    x, y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed,
                    life: 1,
                    decay: Math.random() * 0.025 + 0.015,
                    size: Math.random() * 5 + 2,
                    color: color
                });
            }
        }

        function showLevelCongrats() {
            qNumberDisplay.textContent = '⚡';
            qTextDisplay.textContent = `Level ${currentLevel+1} Selesai! Skor: ${Math.round(score)} / ${MAX_SCORE}`;
            for (let i=0; i&lt;25; i++) {
                spawnExplosion(Math.random()*W, Math.random()*H, '#00ddff', 6);
            }
            setTimeout(() =&gt; {
                if (currentLevel + 1 &lt; LEVELS) {
                    currentLevel++;
                    loadLevel(currentLevel);
                    updateUI();
                } else {
                    showFinalCongrats();
                }
            }, 1200);
        }

        function getRank(scr) {
            const pct = (scr / MAX_SCORE) * 100;
            if (pct &gt;= 90) return "&#127942; SMART-5S Master";
            else if (pct &gt;= 75) return "&#127775; SMART-5S Expert";
            else if (pct &gt;= 60) return "⚡ SMART-5S Pro";
            else if (pct &gt;= 40) return "&#128216; SMART-5S Learner";
            else return "&#128214; Perlu Belajar Lagi";
        }

        function getMessage(scr) {
            const pct = (scr / MAX_SCORE) * 100;
            if (pct &gt;= 90) return "&#128640; Luar biasa! Anda SMART-5S Master sejati!";
            else if (pct &gt;= 75) return "&#127775; Hebat! Terus pertahankan nilai-nilai SMART-5S!";
            else if (pct &gt;= 60) return "&#128200; Bagus! Asah terus 5S Anda!";
            else if (pct &gt;= 40) return "&#128218; Mulai konsisten, raih predikat lebih tinggi!";
            else return "&#128170; Perlu belajar lagi, raih SMART-5S Master!";
        }

        function showFinalCongrats() {
            gameActive = false;
            finalScore = Math.round(score);
            finalRank = getRank(finalScore);
            finalMessage = getMessage(finalScore);
            finalAccuracy = totalAttempts &gt; 0 ? Math.round((correctAttempts / totalAttempts) * 100) : 0;
            
            congratsOverlay.classList.add('show');
            finalScoreSpan.textContent = finalScore;
            rankDisplay.textContent = finalRank;
            personalMessage.textContent = finalMessage;
            userNameDisplay.textContent = userName;
            levelCompleteDisplay.textContent = `Level: ${LEVELS}/${LEVELS}`;
            accuracyDisplay.textContent = `Akurasi: ${finalAccuracy}%`;
            
            leaderboardData.push({ name: userName, score: finalScore });
            saveLeaderboard();
            
            isCelebrating = true;
            for (let i=0; i&lt;80; i++) {
                setTimeout(() =&gt; {
                    spawnFirework(Math.random()*W, Math.random()*H*0.7 + 50);
                }, i * 65);
            }
            for (let i=0; i&lt;45; i++) {
                setTimeout(() =&gt; {
                    spawnFirework(Math.random()*W, Math.random()*H*0.5 + 30);
                }, 3800 + i * 85);
            }
            setTimeout(() =&gt; {
                speakScoreboard(finalScore, finalRank, finalMessage, finalAccuracy);
            }, 1600);
        }

        function spawnFirework(x, y) {
            const colors = ['#ff4444', '#ffdd44', '#44ff44', '#44ddff', '#ff44ff', '#ffffff', '#ff8800', '#00ffaa', '#a855f7'];
            for (let i=0; i&lt;55; i++) {
                const angle = Math.random() * 2 * Math.PI;
                const speed = Math.random() * 7 + 2;
                const color = colors[Math.floor(Math.random() * colors.length)];
                fireworks.push({
                    x, y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed - 1,
                    life: 1,
                    decay: Math.random() * 0.015 + 0.006,
                    size: Math.random() * 5 + 2,
                    color: color,
                    isConfetti: false
                });
            }
            for (let i=0; i&lt;30; i++) {
                const angle = Math.random() * 2 * Math.PI;
                const speed = Math.random() * 4 + 1;
                const color = colors[Math.floor(Math.random() * colors.length)];
                fireworks.push({
                    x, y,
                    vx: Math.cos(angle) * speed + (Math.random()-0.5)*2,
                    vy: Math.sin(angle) * speed - 2.5,
                    life: 1,
                    decay: Math.random() * 0.01 + 0.004,
                    size: Math.random() * 9 + 4,
                    color: color,
                    isConfetti: true
                });
            }
        }

        function updateUI() {
            levelIndicator.textContent = `⚡ Level ${currentLevel+1}`;
            scoreIndicator.textContent = `⭐ ${Math.round(score)} / ${MAX_SCORE}`;
            playerNameDisplay.textContent = `&#127993; ${userName}`;
        }

        function drawArcher() {
            const ax = archer.x, ay = archer.y;
            ctx.shadowBlur = 20;
            ctx.shadowColor = '#00aaff66';
            // Kaki
            ctx.fillStyle = '#1a3a5a';
            ctx.fillRect(ax-8, ay+10, 6, 14);
            ctx.fillRect(ax+2, ay+10, 6, 14);
            // Badan
            ctx.fillStyle = '#2a5a7a';
            ctx.beginPath();
            ctx.ellipse(ax, ay-4, 16, 22, 0, 0, Math.PI*2);
            ctx.fill();
            // Kepala
            ctx.fillStyle = '#f0d8b0';
            ctx.beginPath();
            ctx.arc(ax, ay-28, 14, 0, Math.PI*2);
            ctx.fill();
            // Rambut
            ctx.fillStyle = '#4a3a2a';
            ctx.beginPath();
            ctx.arc(ax, ay-34, 14, Math.PI, 2*Math.PI);
            ctx.fill();
            
            // Busur - arah ke target (mouse)
            const bowAngle = Math.atan2(mouseY - ay, mouseX - ax);
            const bowLen = 38;
            ctx.strokeStyle = '#c8a060';
            ctx.lineWidth = 3;
            ctx.shadowBlur = 15;
            ctx.shadowColor = '#ffdd44aa';
            ctx.beginPath();
            ctx.arc(ax + 16, ay - 4, bowLen, bowAngle - 0.7, bowAngle + 0.7);
            ctx.stroke();
            // Tali busur
            ctx.strokeStyle = '#aaaacc';
            ctx.lineWidth = 1.5;
            const endAngle1 = bowAngle - 0.7;
            const endAngle2 = bowAngle + 0.7;
            const ex1 = ax + 16 + Math.cos(endAngle1) * bowLen;
            const ey1 = ay - 4 + Math.sin(endAngle1) * bowLen;
            const ex2 = ax + 16 + Math.cos(endAngle2) * bowLen;
            const ey2 = ay - 4 + Math.sin(endAngle2) * bowLen;
            ctx.beginPath();
            ctx.moveTo(ex1, ey1);
            ctx.lineTo(ax + 16 + Math.cos(bowAngle) * 10, ay - 4 + Math.sin(bowAngle) * 10);
            ctx.lineTo(ex2, ey2);
            ctx.stroke();
            ctx.shadowBlur = 0;
            
            // Panah aktif
            if (arrow.active) {
                ctx.save();
                ctx.translate(arrow.x, arrow.y);
                ctx.rotate(arrow.angle);
                ctx.shadowBlur = 20;
                ctx.shadowColor = '#00ffaa88';
                ctx.strokeStyle = '#ddaa88';
                ctx.lineWidth = 2.5;
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(25, 0);
                ctx.stroke();
                ctx.fillStyle = '#ffdd44';
                ctx.shadowColor = '#ffdd44aa';
                ctx.beginPath();
                ctx.moveTo(28, 0);
                ctx.lineTo(20, -5);
                ctx.lineTo(20, 5);
                ctx.closePath();
                ctx.fill();
                ctx.fillStyle = '#ff6666';
                ctx.shadowColor = '#ff666688';
                ctx.beginPath();
                ctx.moveTo(-2, 0);
                ctx.lineTo(-8, -6);
                ctx.lineTo(-8, 6);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
                ctx.shadowBlur = 0;
            }
        }

        function draw() {
            ctx.clearRect(0, 0, W, H);
            // Latar
            ctx.fillStyle = 'rgba(0, 10, 30, 0.3)';
            ctx.fillRect(0, 0, W, H);
            // Grid
            ctx.strokeStyle = '#00aaff20';
            ctx.lineWidth = 0.5;
            for (let i=0; i&lt;W; i+=30) {
                ctx.beginPath();
                ctx.moveTo(i, 0);
                ctx.lineTo(i, H);
                ctx.stroke();
            }
            for (let i=0; i&lt;H; i+=30) {
                ctx.beginPath();
                ctx.moveTo(0, i);
                ctx.lineTo(W, i);
                ctx.stroke();
            }
            ctx.strokeStyle = '#00d4ff15';
            ctx.lineWidth = 1;
            for (let i=0; i&lt;W; i+=80) {
                ctx.beginPath();
                ctx.moveTo(i, 0);
                ctx.lineTo(i+40, H);
                ctx.stroke();
            }
            for (let i=0; i&lt;25; i++) {
                ctx.fillStyle = `rgba(0, 180, 255, ${Math.random()*0.2+0.05})`;
                ctx.beginPath();
                ctx.arc(Math.random()*W, Math.random()*H, Math.random()*2+0.5, 0, Math.PI*2);
                ctx.fill();
            }

            // Gelembung
            bubbles.forEach(b =&gt; {
                if (b.answered) return;
                const gradient = ctx.createRadialGradient(b.x-8, b.y-8, 2, b.x, b.y, b.radius);
                gradient.addColorStop(0, '#80d4ff');
                gradient.addColorStop(0.4, '#0088ff');
                gradient.addColorStop(0.8, '#4a00ff');
                gradient.addColorStop(1, '#1a0066');
                ctx.shadowColor = '#00aaffaa';
                ctx.shadowBlur = 35;
                ctx.beginPath();
                ctx.arc(b.x, b.y, b.radius, 0, 2*Math.PI);
                ctx.fillStyle = gradient;
                ctx.fill();
                ctx.shadowBlur = 0;
                ctx.strokeStyle = '#80d4ff';
                ctx.lineWidth = 2.5;
                ctx.shadowColor = '#00aaff';
                ctx.shadowBlur = 15;
                ctx.stroke();
                ctx.shadowBlur = 0;
                ctx.fillStyle = '#ffffff';
                ctx.shadowColor = '#0044ff';
                ctx.shadowBlur = 10;
                let fontSize = Math.max(10, Math.min(b.radius * 0.3, 15));
                ctx.font = `bold ${fontSize}px 'Segoe UI', Arial, sans-serif`;
                const maxChars = Math.floor((b.radius * 2 * 0.6) / (fontSize * 0.6));
                const lines = wrapTextForBubble(b.fullText, maxChars);
                const lineHeight = fontSize * 1.25;
                const totalHeight = lines.length * lineHeight;
                if (totalHeight &gt; b.radius * 1.6) {
                    const newSize = Math.floor(fontSize * (b.radius * 1.6 / totalHeight));
                    fontSize = Math.max(8, Math.min(newSize, 14));
                    ctx.font = `bold ${fontSize}px 'Segoe UI', Arial, sans-serif`;
                }
                const finalLines = wrapTextForBubble(b.fullText, Math.floor((b.radius * 2 * 0.65) / (fontSize * 0.6)));
                const finalLineHeight = fontSize * 1.2;
                const startY = b.y - ((finalLines.length - 1) * finalLineHeight / 2);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                for (let i = 0; i &lt; finalLines.length; i++) {
                    ctx.fillText(finalLines[i], b.x, startY + i * finalLineHeight);
                }
                ctx.shadowBlur = 0;
                b.x += b.vx;
                b.y += b.vy;
                if (b.x &lt; b.radius + 20 || b.x &gt; W - b.radius - 10) b.vx *= -1;
                if (b.y &lt; b.radius + 20 || b.y &gt; H - b.radius - 80) b.vy *= -1;
                b.x = Math.min(Math.max(b.x, b.radius+20), W - b.radius - 10);
                b.y = Math.min(Math.max(b.y, b.radius+20), H - b.radius - 80);
            });

            // Update panah
            if (arrow.active) {
                updateArrow();
            }
            if (arrowCooldown &gt; 0) arrowCooldown--;

            // Gerakkan pemanah horizontal mengikuti mouse (di bawah)
            if (gameActive) {
                const targetX = Math.min(Math.max(mouseX, 30), W - 30);
                archer.x += (targetX - archer.x) * 0.08;
                // Pemanah tetap di bawah
                archer.y = H - 70;
            }

            // Gambar pemanah
            drawArcher();

            // Partikel
            for (let i=particles.length-1; i&gt;=0; i--) {
                const p = particles[i];
                p.x += p.vx;
                p.y += p.vy;
                p.life -= p.decay;
                p.vy += 0.05;
                if (p.life &lt;= 0) { particles.splice(i,1); continue; }
                ctx.globalAlpha = p.life;
                ctx.fillStyle = p.color;
                ctx.shadowBlur = 10;
                ctx.shadowColor = p.color;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI*2);
                ctx.fill();
                ctx.shadowBlur = 0;
            }
            ctx.globalAlpha = 1;

            // Fireworks
            for (let i=fireworks.length-1; i&gt;=0; i--) {
                const f = fireworks[i];
                f.x += f.vx;
                f.y += f.vy;
                f.vy += 0.04;
                f.life -= f.decay;
                if (f.life &lt;= 0) { fireworks.splice(i,1); continue; }
                ctx.globalAlpha = f.life;
                ctx.fillStyle = f.color;
                ctx.shadowBlur = 18;
                ctx.shadowColor = f.color;
                if (f.isConfetti) {
                    ctx.save();
                    ctx.translate(f.x, f.y);
                    ctx.rotate(f.life * 12);
                    ctx.fillRect(-f.size/2, -f.size/2, f.size * f.life, f.size * f.life * 0.5);
                    ctx.restore();
                } else {
                    ctx.beginPath();
                    ctx.arc(f.x, f.y, f.size * f.life, 0, Math.PI*2);
                    ctx.fill();
                }
                ctx.shadowBlur = 0;
            }
            ctx.globalAlpha = 1;
        }

        function gameLoop() {
            draw();
            animationFrame = requestAnimationFrame(gameLoop);
        }

        // Event listeners
        canvasEl.addEventListener('click', (e) =&gt; {
            const rect = canvasEl.getBoundingClientRect();
            const scaleX = canvas.width / rect.width;
            const scaleY = canvas.height / rect.height;
            const x = (e.clientX - rect.left) * scaleX;
            const y = (e.clientY - rect.top) * scaleY;
            shootArrow(x, y);
        });

        canvasEl.addEventListener('touchstart', (e) =&gt; {
            e.preventDefault();
            const rect = canvasEl.getBoundingClientRect();
            const touch = e.touches[0];
            const scaleX = canvas.width / rect.width;
            const scaleY = canvas.height / rect.height;
            const x = (touch.clientX - rect.left) * scaleX;
            const y = (touch.clientY - rect.top) * scaleY;
            shootArrow(x, y);
        }, { passive: false });

        canvasEl.addEventListener('mousemove', (e) =&gt; {
            const rect = canvasEl.getBoundingClientRect();
            const scaleX = canvas.width / rect.width;
            const scaleY = canvas.height / rect.height;
            mouseX = (e.clientX - rect.left) * scaleX;
            mouseY = (e.clientY - rect.top) * scaleY;
        });

        speechBtn.addEventListener('click', () =&gt; {
            speakScoreboard(finalScore, finalRank, finalMessage, finalAccuracy);
        });

        function startGame() {
            const nameInput = document.getElementById('playerNameInput');
            userName = nameInput.value.trim() || "User";
            playerNameDisplay.textContent = `&#127993; ${userName}`;
            entryScreen.style.display = 'none';
            congratsOverlay.classList.remove('show');
            score = 0;
            totalAttempts = 0;
            correctAttempts = 0;
            currentLevel = 0;
            gameActive = true;
            isCelebrating = false;
            particles = [];
            fireworks = [];
            arrow.active = false;
            if (speechSynth.speaking) speechSynth.cancel();
            loadLevel(0);
            updateUI();
            if (animationFrame) cancelAnimationFrame(animationFrame);
            gameLoop();
        }

        document.getElementById('startGameBtn').addEventListener('click', startGame);
        document.getElementById('restartFromCongratsBtn').addEventListener('click', () =&gt; {
            congratsOverlay.classList.remove('show');
            startGame();
        });
        loadLeaderboard();
        loadLevel(0);
        updateUI();
        qNumberDisplay.textContent = '&#127993;';
        qTextDisplay.textContent = 'Masukkan nama User &amp; tekan MULAI';
        gameLoop();

        window.addEventListener('resize', () =&gt; {
            resizeCanvas();
        });
    })();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;h3 dir="ltr" style="line-height: 1.7999999999999998; margin-bottom: 12pt; margin-top: 24pt; text-align: justify;"&gt;&lt;span style="color: #0f1115; font-family: Roboto; font-size: 15pt; font-variant: normal; vertical-align: baseline; white-space: pre-wrap;"&gt;Fitur Game &amp;amp; Interaksi&lt;/span&gt;&lt;/h3&gt;&lt;p dir="ltr" style="line-height: 1.38; margin-bottom: 12pt; margin-top: 12pt; text-align: justify;"&gt;&lt;span style="color: #0f1115; font-family: Roboto; font-size: 12pt; font-variant: normal; vertical-align: baseline; white-space: pre-wrap;"&gt;Game ini menguji pemahaman Anda tentang budaya 5S (Senyum, Salam, Sapa, Sopan, Santun) melalui pertanyaan yang disesuaikan dengan dokumen. Berikut cara bermainnya:&lt;/span&gt;&lt;/p&gt;&lt;ol style="margin-bottom: 0; margin-top: 0; padding-inline-start: 20px;"&gt;&lt;li aria-level="1" dir="ltr" style="font-family: Arial, sans-serif; font-size: 11pt; font-variant: normal; list-style-type: decimal; margin-left: 7.5pt; vertical-align: baseline; white-space: pre;"&gt;&lt;p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 12pt; text-align: justify;"&gt;&lt;span style="color: #0f1115; font-family: Roboto; font-size: 12pt; font-variant: normal; vertical-align: baseline; white-space: pre-wrap;"&gt;Mulai Permainan: Masukkan nama Anda di layar awal, lalu tekan tombol MULAI.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li aria-level="1" dir="ltr" style="font-family: Arial, sans-serif; font-size: 11pt; font-variant: normal; list-style-type: decimal; margin-left: 7.5pt; vertical-align: baseline; white-space: pre;"&gt;&lt;p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 17pt; text-align: justify;"&gt;&lt;span style="color: #0f1115; font-family: Roboto; font-size: 12pt; font-variant: normal; vertical-align: baseline; white-space: pre-wrap;"&gt;Menembak Gelembung: Klik atau tap gelembung yang berisi jawaban lengkap untuk pertanyaan yang muncul di panel bawah. Gelembung bergerak liar untuk menambah tantangan.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li aria-level="1" dir="ltr" style="font-family: Arial, sans-serif; font-size: 11pt; font-variant: normal; list-style-type: decimal; margin-left: 7.5pt; vertical-align: baseline; white-space: pre;"&gt;&lt;p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 17pt; text-align: justify;"&gt;&lt;span style="color: #0f1115; font-family: Roboto; font-size: 12pt; font-variant: normal; vertical-align: baseline; white-space: pre-wrap;"&gt;Skor &amp;amp; Level: Setiap jawaban benar menambah skor. Selesaikan 10 pertanyaan di setiap level untuk maju ke level berikutnya secara otomatis.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li aria-level="1" dir="ltr" style="font-family: Arial, sans-serif; font-size: 11pt; font-variant: normal; list-style-type: decimal; margin-left: 7.5pt; vertical-align: baseline; white-space: pre;"&gt;&lt;p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 17pt; text-align: justify;"&gt;&lt;span style="color: #0f1115; font-family: Roboto; font-size: 12pt; font-variant: normal; vertical-align: baseline; white-space: pre-wrap;"&gt;Efek &amp;amp; Penghargaan: Saat menjawab benar, akan ada efek ledakan kecil. Di akhir semua level, Anda akan melihat kembang api dan confetti yang meriah, serta pesan personal dan predikat (dari "Perlu Belajar Lagi" hingga "Sahabat-5S Sejati") berdasarkan skor akhir. Skor terbaik tersimpan di Leaderboard.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-left: 15pt; margin-top: 17pt; text-align: center;"&gt;&lt;span style="color: #0f1115; font-family: Roboto; font-size: 12pt; font-variant: normal; vertical-align: baseline; white-space: pre-wrap;"&gt;===SELAMAT BELAJAR DAN BERMAIN===&lt;/span&gt;&lt;/p&gt;
</description><link>http://kitab-investasi.blogspot.com/2026/07/arrow-smart-5s.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-2423197301995743389</guid><pubDate>Thu, 02 Jul 2026 08:28:30 +0000</pubDate><atom:updated>2026-07-06T08:32:02.258+07:00</atom:updated><title>SMART - 5S</title><description>&lt;h3 class="zfr3Q OmQG5e CDt4Ke " dir="ltr" id="h.rynhxzbq5vo2_l" style="border-color: currentcolor; border-style: none; border-width: medium; box-sizing: border-box; color: #857251; font-family: Roboto, sans-serif; font-size: 13pt; font-variant-ligatures: none; letter-spacing: 1px; line-height: 1.8; margin: 24pt 0px 12pt; outline: none; padding: 0pt; pointer-events: none; position: relative; text-align: justify; text-decoration-line: inherit;"&gt;&lt;div class="CjVfdc" jsaction="touchstart:UrsOsc; click:KjsqPd; focusout:QZoaZ; mouseover:y0pDld; mouseout:dq0hvd;fv1Rjc:jbFSOd;CrfLRd:SzACGe;" jscontroller="Ae65rd" style="box-sizing: border-box; display: inline-block; max-width: 100%; pointer-events: all; position: relative;"&gt;&lt;span class="C9DxTc " style="box-sizing: border-box; color: #0f1115; font-family: Roboto, Arial; font-size: 15pt; vertical-align: baseline;"&gt;Fitur Game &amp;amp; Interaksi&lt;/span&gt;&lt;/div&gt;&lt;/h3&gt;&lt;p class="zfr3Q CDt4Ke " dir="ltr" style="border-color: currentcolor; border-style: none; border-width: medium; box-sizing: border-box; color: #212121; font-family: &amp;quot;Open Sans&amp;quot;, sans-serif; font-size: 16px; font-variant-ligatures: none; line-height: 1.38; margin: 12pt 0px; outline: none; padding: 0pt; position: relative; text-align: justify; text-decoration-line: inherit;"&gt;&lt;span class="C9DxTc " style="box-sizing: border-box; color: #0f1115; font-family: Roboto, Arial;"&gt;Game ini menguji pemahaman Anda tentang budaya 5S (Senyum, Salam, Sapa, Sopan, Santun) melalui pertanyaan yang disesuaikan dengan dokumen. Berikut cara bermainnya:&lt;/span&gt;&lt;/p&gt;&lt;ol class="n8H08c BKnRcf " style="box-sizing: border-box; font-family: sans-serif; font-size: 16px; margin: 6px 0px 0px; padding: 0px;"&gt;&lt;li class="zfr3Q TYR86d lsiHE " dir="ltr" style="box-sizing: border-box; color: #212121; font-family: &amp;quot;Open Sans&amp;quot;, sans-serif; font-size: 12pt; font-style: inherit; font-variant-ligatures: none; line-height: 1.56; margin: 0px 0px 0px 15pt; outline: none; padding-top: 0px; position: relative; text-decoration: inherit;"&gt;&lt;p class="zfr3Q CDt4Ke " dir="ltr" role="presentation" style="border-color: currentcolor; border-style: none; border-width: medium; box-sizing: border-box; font-size: 12pt; font-style: inherit; line-height: 1.38; margin: 12pt 0px 0pt 0pt; outline: none; padding: 0pt; position: relative; text-align: justify; text-decoration: inherit; text-indent: 0pt;"&gt;&lt;span class="C9DxTc " style="box-sizing: border-box; color: #0f1115; font-family: Roboto, Arial;"&gt;Mulai Permainan: Masukkan nama Anda di layar awal, lalu tekan tombol MULAI.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li class="zfr3Q TYR86d lsiHE " dir="ltr" style="box-sizing: border-box; color: #212121; font-family: &amp;quot;Open Sans&amp;quot;, sans-serif; font-size: 12pt; font-style: inherit; font-variant-ligatures: none; line-height: 1.56; margin: 6px 0px 0px 15pt; outline: none; position: relative; text-decoration: inherit;"&gt;&lt;p class="zfr3Q CDt4Ke " dir="ltr" role="presentation" style="border-color: currentcolor; border-style: none; border-width: medium; box-sizing: border-box; font-size: 12pt; font-style: inherit; line-height: 1.38; margin: 17pt 0px 0pt 0pt; outline: none; padding: 0pt; position: relative; text-align: justify; text-decoration: inherit; text-indent: 0pt;"&gt;&lt;span class="C9DxTc " style="box-sizing: border-box; color: #0f1115; font-family: Roboto, Arial;"&gt;Menembak Gelembung: Klik atau tap gelembung yang berisi jawaban lengkap untuk pertanyaan yang muncul di panel bawah. Gelembung bergerak liar untuk menambah tantangan.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li class="zfr3Q TYR86d lsiHE " dir="ltr" style="box-sizing: border-box; color: #212121; font-family: &amp;quot;Open Sans&amp;quot;, sans-serif; font-size: 12pt; font-style: inherit; font-variant-ligatures: none; line-height: 1.56; margin: 6px 0px 0px 15pt; outline: none; position: relative; text-decoration: inherit;"&gt;&lt;p class="zfr3Q CDt4Ke " dir="ltr" role="presentation" style="border-color: currentcolor; border-style: none; border-width: medium; box-sizing: border-box; font-size: 12pt; font-style: inherit; line-height: 1.38; margin: 17pt 0px 0pt 0pt; outline: none; padding: 0pt; position: relative; text-align: justify; text-decoration: inherit; text-indent: 0pt;"&gt;&lt;span class="C9DxTc " style="box-sizing: border-box; color: #0f1115; font-family: Roboto, Arial;"&gt;Skor &amp;amp; Level: Setiap jawaban benar menambah skor. Selesaikan 10 pertanyaan di setiap level untuk maju ke level berikutnya secara otomatis.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li class="zfr3Q TYR86d lsiHE " dir="ltr" style="box-sizing: border-box; color: #212121; font-family: &amp;quot;Open Sans&amp;quot;, sans-serif; font-size: 12pt; font-style: inherit; font-variant-ligatures: none; line-height: 1.56; margin: 6px 0px 0px 15pt; outline: none; padding-bottom: 0px; position: relative; text-decoration: inherit;"&gt;&lt;p class="zfr3Q CDt4Ke " dir="ltr" role="presentation" style="border-color: currentcolor; border-style: none; border-width: medium; box-sizing: border-box; font-size: 12pt; font-style: inherit; line-height: 1.38; margin: 17pt 0px 0pt 0pt; outline: none; padding: 0pt; position: relative; text-align: justify; text-decoration: inherit; text-indent: 0pt;"&gt;&lt;span class="C9DxTc " style="box-sizing: border-box; color: #0f1115; font-family: Roboto, Arial;"&gt;Efek &amp;amp; Penghargaan: Saat menjawab benar, akan ada efek ledakan kecil. Di akhir semua level, Anda akan melihat kembang api dan confetti yang meriah, serta pesan personal dan predikat (dari "Perlu Belajar Lagi" hingga "Sahabat-5S Sejati") berdasarkan skor akhir. Skor terbaik tersimpan di Leaderboard.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;&lt;/meta&gt;
    &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"&gt;&lt;/meta&gt;
    &lt;title&gt;SMART-5S Bubble Blaster&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }
        body {
            background: #0a0e1a;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', 'Arial', sans-serif;
        }
        #game-wrapper {
            width: 100%;
            max-width: 800px;
            height: 100vh;
            max-height: 900px;
            background: radial-gradient(circle at 30% 20%, #0d1b2a, #050a14);
            box-shadow: 0 0 50px #00d4ff40, 0 0 120px #0055ff20;
            border-radius: 32px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            border: 1px solid #00d4ff60;
        }
        #header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            color: #a8e6ff;
            font-weight: bold;
            background: rgba(0, 20, 40, 0.6);
            backdrop-filter: blur(4px);
            border-radius: 60px;
            border: 1px solid #00d4ff80;
            margin-bottom: 10px;
            flex-shrink: 0;
        }
        #header span {
            background: #0a1a2e;
            padding: 4px 16px;
            border-radius: 40px;
            border: 1px solid #00d4ff;
            font-size: 0.9rem;
            letter-spacing: 1px;
        }
        #level-indicator { background: #0a1a2e; color: #7ad0ff; border-color: #00aaff; }
        #score-indicator { color: #facc15; border-color: #facc15; }
        #player-name-display { color: #7ad0ff; border-color: #00aaff; }
        #game-canvas-container {
            flex: 1;
            position: relative;
            background: transparent;
            border-radius: 24px;
            overflow: hidden;
            min-height: 300px;
            border: 1px solid #00d4ff40;
            box-shadow: inset 0 0 60px #0044aa30;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
            background: transparent;
            cursor: crosshair;
        }
        #question-panel {
            background: rgba(0, 16, 32, 0.85);
            backdrop-filter: blur(8px);
            border: 1px solid #00d4ff;
            border-radius: 40px;
            padding: 14px 20px;
            margin-top: 10px;
            color: #e6f7ff;
            font-weight: 600;
            font-size: clamp(1rem, 2.8vw, 1.3rem);
            text-align: left;
            box-shadow: 0 0 40px #0066ff44;
            flex-shrink: 0;
            min-height: 76px;
            display: flex;
            align-items: center;
            line-height: 1.5;
        }
        #question-panel .q-number {
            color: #00d4ff;
            font-weight: 800;
            margin-right: 12px;
            white-space: nowrap;
            text-shadow: 0 0 12px #00aaff;
        }
        #question-panel .q-text {
            color: #ffffff;
            font-weight: 700;
            text-shadow: 0 0 8px rgba(0, 180, 255, 0.3);
        }
        #entry-screen {
            position: absolute;
            inset: 0;
            z-index: 20;
            background: rgba(0, 6, 16, 0.92);
            backdrop-filter: blur(12px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            border-radius: 32px;
            padding: 20px;
        }
        #entry-screen h1 {
            font-size: 2.6rem;
            color: #7ad0ff;
            text-shadow: 0 0 40px #00aaff, 0 0 100px #0055ff;
            letter-spacing: 4px;
            font-weight: 800;
        }
        #entry-screen input {
            background: #0a1a2e;
            border: 2px solid #00d4ff;
            border-radius: 60px;
            padding: 16px 24px;
            width: 80%;
            max-width: 340px;
            font-size: 1.3rem;
            color: #d6f0ff;
            text-align: center;
            outline: none;
            box-shadow: 0 0 40px #0066ff55;
        }
        #entry-screen input::placeholder { color: #4a7a9a; }
        .cyber-btn {
            background: linear-gradient(145deg, #0a2a4a, #06152a);
            border: 1px solid #00d4ff;
            color: #d6f0ff;
            padding: 16px 48px;
            border-radius: 60px;
            font-size: 1.6rem;
            font-weight: bold;
            letter-spacing: 3px;
            box-shadow: 0 0 40px #00aaffaa, inset 0 0 20px #00aaff44;
            transition: 0.2s;
            cursor: pointer;
            backdrop-filter: blur(4px);
        }
        .cyber-btn:active { transform: scale(0.93); box-shadow: 0 0 80px #00d4ff; }
        #congrats-overlay {
            position: absolute;
            inset: 0;
            z-index: 30;
            background: rgba(0, 4, 16, 0.85);
            backdrop-filter: blur(8px);
            border-radius: 32px;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            color: #fff;
        }
        #congrats-overlay.show { display: flex; }
        .congrats-box {
            background: rgba(0, 16, 32, 0.8);
            border: 2px solid #00d4ff;
            border-radius: 60px;
            padding: 30px 20px;
            max-width: 420px;
            width: 100%;
            box-shadow: 0 0 80px #0066ff88, inset 0 0 30px #00aaff44;
            backdrop-filter: blur(8px);
            position: relative;
            z-index: 5;
        }
        .congrats-box .user-name {
            font-size: 1.4rem;
            color: #7ad0ff;
            margin-bottom: 8px;
            text-shadow: 0 0 20px #00aaff;
        }
        .congrats-box .user-name i {
            font-style: normal;
            background: rgba(0,180,255,0.15);
            padding: 2px 14px;
            border-radius: 30px;
            border: 1px solid #00aaff44;
        }
        .congrats-box h2 {
            font-size: 2.4rem;
            margin-bottom: 6px;
            color: #facc15;
            text-shadow: 0 0 30px #facc15aa;
        }
        .congrats-box .rank {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(45deg, #7ad0ff, #00aaff, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 10px 0;
            text-shadow: 0 0 40px #00aaff55;
        }
        .congrats-box .final-score {
            font-size: 1.8rem;
            color: #7ad0ff;
            text-shadow: 0 0 20px #00aaff66;
        }
        .congrats-box .final-score span {
            color: #facc15;
            font-weight: 800;
            text-shadow: 0 0 20px #facc1566;
        }
        .congrats-box .message {
            font-size: 1.2rem;
            color: #c8e6ff;
            margin: 16px 0;
            background: rgba(0, 180, 255, 0.1);
            padding: 10px 16px;
            border-radius: 30px;
            border: 1px solid #00aaff44;
        }
        .congrats-box .stats-grid {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 12px 0;
            font-size: 0.9rem;
            color: #7ad0ff;
        }
        .congrats-box .stats-grid span {
            background: rgba(0, 20, 50, 0.5);
            padding: 4px 14px;
            border-radius: 20px;
            border: 1px solid #00aaff33;
        }
        .small-btn {
            background: #0a2a4a;
            border: 1px solid #00d4ff;
            color: #d6f0ff;
            padding: 12px 30px;
            border-radius: 60px;
            font-size: 1.2rem;
            margin-top: 12px;
            cursor: pointer;
            transition: 0.2s;
            box-shadow: 0 0 20px #00aaff33;
        }
        .small-btn:active { transform: scale(0.92); }
        #speech-btn {
            background: rgba(0, 180, 255, 0.15);
            border: 1px solid #00d4ff;
            color: #7ad0ff;
            padding: 8px 20px;
            border-radius: 40px;
            font-size: 0.9rem;
            cursor: pointer;
            margin-top: 6px;
            transition: 0.2s;
            box-shadow: 0 0 15px #00aaff22;
        }
        #speech-btn:hover { background: rgba(0, 180, 255, 0.3); }
        #speech-btn:active { transform: scale(0.95); }
        #leaderboard {
            position: absolute;
            bottom: 10px;
            right: 16px;
            background: #0a1218cc;
            backdrop-filter: blur(8px);
            padding: 10px 18px;
            border-radius: 40px;
            border: 1px solid #00d4ff;
            color: #7ad0ff;
            font-size: 0.8rem;
            max-width: 200px;
            max-height: 120px;
            overflow-y: auto;
            z-index: 10;
        }
        #leaderboard div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #00d4ff40; padding: 2px 0; }
        .lb-score { color: #facc15; }
        /* Icon IT style */
        .it-icon { filter: drop-shadow(0 0 8px #00aaff66); }
        @media (max-width: 500px) {
            #header span { font-size: 0.7rem; padding: 2px 10px; }
            #entry-screen h1 { font-size: 2rem; }
            #question-panel { font-size: clamp(0.8rem, 2.5vw, 1rem); padding: 10px 14px; min-height: 64px; }
            .congrats-box { padding: 20px 14px; }
            .congrats-box h2 { font-size: 1.8rem; }
            .congrats-box .rank { font-size: 1.5rem; }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="game-wrapper"&gt;
    &lt;div id="header"&gt;
        &lt;span id="player-name-display"&gt;&#128187; User&lt;/span&gt;
        &lt;span id="level-indicator"&gt;⚡ Level 1&lt;/span&gt;
        &lt;span id="score-indicator"&gt;⭐ 0&lt;/span&gt;
    &lt;/div&gt;

    &lt;div id="game-canvas-container"&gt;
        &lt;canvas height="600" id="gameCanvas" width="800"&gt;&lt;/canvas&gt;

        &lt;div id="entry-screen"&gt;
            &lt;h1&gt;&#128640; SMART-5S&lt;/h1&gt;
            &lt;input id="playerNameInput" maxlength="16" placeholder="Nama User" type="text" /&gt;
            &lt;button class="cyber-btn" id="startGameBtn"&gt;▶ MULAI&lt;/button&gt;
            &lt;div style="color: #4a7a9a; font-size: 0.8rem;"&gt;Tembak gelembung jawaban benar!&lt;/div&gt;
        &lt;/div&gt;

        &lt;div id="congrats-overlay"&gt;
            &lt;div class="congrats-box"&gt;
                &lt;div class="user-name"&gt;&#128100; &lt;i id="userNameDisplay"&gt;User&lt;/i&gt;&lt;/div&gt;
                &lt;h2&gt;&#127937; MISI SELESAI&lt;/h2&gt;
                &lt;div class="rank" id="rankDisplay"&gt;SMART-5S Master&lt;/div&gt;
                &lt;div class="final-score"&gt;Skor Akhir: &lt;span id="finalScoreDisplay"&gt;0&lt;/span&gt;&lt;/div&gt;
                &lt;div class="stats-grid"&gt;
                    &lt;span id="levelCompleteDisplay"&gt;Level: 5/5&lt;/span&gt;
                    &lt;span id="accuracyDisplay"&gt;Akurasi: 0%&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="message" id="personalMessage"&gt;Hebat, User!&lt;/div&gt;
                &lt;button id="speech-btn"&gt;&#128266; Dengarkan Laporan&lt;/button&gt;
                &lt;button class="small-btn" id="restartFromCongratsBtn"&gt;&#128260; Misi Ulang&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div id="leaderboard"&gt;
            &lt;div style="color: #facc15; font-weight: bold;"&gt;&#127942; LEADERBOARD&lt;/div&gt;
            &lt;div id="lbEntries"&gt;&lt;div style="color: #4a7a9a;"&gt;Belum ada data&lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="question-panel"&gt;
        &lt;span class="q-number" id="qNumberDisplay"&gt;1.&lt;/span&gt;
        &lt;span class="q-text" id="qTextDisplay"&gt;Tekan mulai &amp;amp; tembak gelembung&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    (function(){
        // ----- BANK PERTANYAAN SMART-5S (Senyum, Salam, Sapa, Sopan, Santun) -----
        const LEVELS = 5;
        const QUESTIONS_PER_LEVEL = 10;

        const QUESTION_BANK = [
            // Level 1: Senyum
            [
                { q: "Apa makna dari Senyum dalam SMART-5S?", options: ["Ekspresi wajah yang menunjukkan keramahan dan kebaikan hati", "Tersenyum sinis kepada orang lain", "Menertawakan orang lain", "Muka cemberut", "Acuh tak acuh"], correct: 0 },
                { q: "Bagaimana penerapan Senyum yang benar?", options: ["Memberikan senyuman tulus saat kontak mata", "Tersenyum hanya jika dipaksa", "Tersenyum kepada teman saja", "Tersenyum tanpa alasan", "Tersenyum hanya di foto"], correct: 0 },
                { q: "Apa manfaat utama dari Senyum?", options: ["Mempererat hubungan dan menciptakan suasana hangat", "Menakut-nakuti orang lain", "Menunjukkan kesombongan", "Membuat orang lain cemburu", "Menghindari interaksi"], correct: 0 },
                { q: "Senyum yang tulus mencerminkan...", options: ["Kebaikan hati", "Kepalsuan", "Kesombongan", "Keangkuhan", "Ketakutan"], correct: 0 },
                { q: "Senyum dapat membuat orang lain merasa...", options: ["Dihargai dan nyaman", "Takut", "Bosan", "Tersinggung", "Marah"], correct: 0 },
                { q: "Senyum adalah bahasa...", options: ["Universal", "Tertutup", "Individual", "Egois", "Sulit"], correct: 0 },
                { q: "Apa yang dimaksud dengan 'senyum tulus'?", options: ["Senyum yang datang dari hati", "Senyum yang dibuat-buat", "Senyum sinis", "Senyum mengejek", "Senyum terpaksa"], correct: 0 },
                { q: "Senyum dapat mengurangi...", options: ["Ketegangan dan stres", "Kebahagiaan", "Pertemanan", "Kerukunan", "Semangat"], correct: 0 },
                { q: "Kapan sebaiknya kita memberikan senyum?", options: ["Saat bertemu atau memulai percakapan", "Hanya saat senang", "Hanya saat dipaksa", "Tidak perlu tersenyum", "Saat sendirian"], correct: 0 },
                { q: "Senyum dalam SMART-5S bertujuan untuk...", options: ["Membuka komunikasi yang hangat", "Menutup komunikasi", "Membuat orang lain takut", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 }
            ],
            // Level 2: Salam
            [
                { q: "Apa makna dari Salam dalam SMART-5S?", options: ["Ungkapan atau gestur untuk menyapa dan memberi penghormatan", "Hanya melambaikan tangan", "Mengangguk saja", "Tidak perlu menyapa", "Mengabaikan orang lain"], correct: 0 },
                { q: "Contoh penerapan Salam yang benar adalah...", options: ["Mengucapkan 'Assalamu'alaikum' atau 'Selamat pagi'", "Hanya melambaikan tangan", "Mengangguk tanpa kata", "Tidak mengucapkan apa-apa", "Menghindari kontak"], correct: 0 },
                { q: "Apa manfaat dari Salam?", options: ["Memberi kesan positif dan mengurangi jarak emosional", "Menakut-nakuti", "Membuat orang lain risih", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 },
                { q: "Salam yang diajarkan dalam SMART-5S adalah...", options: ["Assalamu'alaikum", "Halo", "Hey", "Apa kabar", "Selamat pagi"], correct: 0 },
                { q: "Salam adalah doa untuk...", options: ["Keselamatan dan kebaikan", "Kekayaan", "Ketenaran", "Kekuasaan", "Kemenangan"], correct: 0 },
                { q: "Budaya salam mencerminkan...", options: ["Kerendahan hati", "Kesombongan", "Keangkuhan", "Kebencian", "Kecurigaan"], correct: 0 },
                { q: "Mengucapkan salam ketika bertemu guru adalah bentuk...", options: ["Salam (SMART-5S)", "Senyum", "Sapa", "Sopan", "Santun"], correct: 0 },
                { q: "Membalas salam adalah kewajiban...", options: ["Sosial dan agama", "Pribadi", "Hanya untuk teman", "Hanya untuk guru", "Tidak perlu"], correct: 0 },
                { q: "Salam yang baik diiringi dengan...", options: ["Jabat tangan atau mengatupkan tangan di dada", "Diam saja", "Menghindar", "Menatap tajam", "Teriakan"], correct: 0 },
                { q: "Salam dapat membangun...", options: ["Hubungan yang harmonis", "Permusuhan", "Jarak", "Kesalahpahaman", "Konflik"], correct: 0 }
            ],
            // Level 3: Sapa
            [
                { q: "Apa makna dari Sapa dalam SMART-5S?", options: ["Bentuk interaksi untuk menanyakan kabar atau memulai pembicaraan", "Memanggil dengan keras", "Menggodai teman", "Menghindari orang", "Bersikap cuek"], correct: 0 },
                { q: "Contoh penerapan Sapa yang benar adalah...", options: ["'Apa kabar?' atau 'Bagaimana harimu?'", "Memanggil dengan teriakan", "Menghina", "Diam saja", "Acuh tak acuh"], correct: 0 },
                { q: "Apa manfaat dari Sapa?", options: ["Menunjukkan kepedulian dan membangun hubungan akrab", "Menakut-nakuti", "Membuat orang lain bosan", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 },
                { q: "Sapa yang baik adalah...", options: ["Dengan kata-kata yang santun dan hangat", "Dengan teriakan", "Dengan nada tinggi", "Dengan kata kasar", "Dengan diam saja"], correct: 0 },
                { q: "Sapa dapat mempererat...", options: ["Hubungan pertemanan", "Permusuhan", "Jarak", "Kesalahpahaman", "Konflik"], correct: 0 },
                { q: "Sapa yang akrab membuat orang lain merasa...", options: ["Dihargai dan diperhatikan", "Takut", "Bosan", "Tersinggung", "Marah"], correct: 0 },
                { q: "Sapa yang baik dimulai dengan...", options: ["Senyum dan salam", "Diam", "Menghindar", "Menatap tajam", "Teriakan"], correct: 0 },
                { q: "Sapa membuat suasana menjadi...", options: ["Akrab dan hangat", "Tegang", "Mencekam", "Dingin", "Kaku"], correct: 0 },
                { q: "Setelah memberi salam, langkah selanjutnya adalah...", options: ["Memberikan sapa", "Langsung pergi", "Diam", "Menghindar", "Acuh"], correct: 0 },
                { q: "Sapa menunjukkan...", options: ["Kepedulian dan perhatian", "Keangkuhan", "Kesombongan", "Ketakutan", "Kebencian"], correct: 0 }
            ],
            // Level 4: Sopan
            [
                { q: "Apa makna dari Sopan dalam SMART-5S?", options: ["Sikap menghargai norma sosial, tata krama, dan bahasa yang baik", "Berbicara kasar", "Memotong pembicaraan", "Tidak peduli", "Bersikap angkuh"], correct: 0 },
                { q: "Contoh penerapan Sopan yang benar adalah...", options: ["Menggunakan bahasa tubuh yang menghargai lawan bicara", "Meludah sembarangan", "Memotong pembicaraan", "Menggunakan kata kasar", "Acuh tak acuh"], correct: 0 },
                { q: "Apa manfaat dari Sopan?", options: ["Membuat diri lebih dihargai dan suasana nyaman", "Menakut-nakuti", "Membuat orang lain bosan", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 },
                { q: "Sopan dalam berbicara berarti...", options: ["Menggunakan kata yang halus", "Berteriak", "Memotong pembicaraan", "Menggunakan kata kasar", "Mengabaikan lawan bicara"], correct: 0 },
                { q: "Sopan santun kepada guru menunjukkan...", options: ["Penghormatan", "Ketakutan", "Keangkuhan", "Kebencian", "Ketidakpedulian"], correct: 0 },
                { q: "Sopan adalah cerminan...", options: ["Karakter mulia", "Kelemahan", "Kesombongan", "Keangkuhan", "Kebodohan"], correct: 0 },
                { q: "Menghargai pendapat teman adalah bentuk...", options: ["Sopan", "Senyum", "Salam", "Sapa", "Santun"], correct: 0 },
                { q: "Sopan dalam berpakaian di sekolah adalah...", options: ["Seragam rapi dan sopan", "Pakaian bebas", "Pakaian ketat", "Pakaian kusut", "Pakaian tidak senonoh"], correct: 0 },
                { q: "Sopan bertujuan untuk...", options: ["Menciptakan interaksi yang nyaman", "Menakut-nakuti", "Menghina", "Mengasingkan", "Membuat kacau"], correct: 0 },
                { q: "Sopan mencerminkan...", options: ["Penghargaan terhadap orang lain", "Keangkuhan", "Kesombongan", "Ketakutan", "Kebencian"], correct: 0 }
            ],
            // Level 5: Santun
            [
                { q: "Apa makna dari Santun dalam SMART-5S?", options: ["Perwujudan kehalusan budi bahasa dan perilaku penuh kelembutan", "Bersikap kasar", "Bersikap sombong", "Menghina orang", "Bersikap acuh"], correct: 0 },
                { q: "Contoh penerapan Santun yang benar adalah...", options: ["Mengucapkan 'Tolong', 'Terima kasih', dan 'Maaf'", "Berbicara kasar", "Menghina teman", "Mengabaikan guru", "Bersikap angkuh"], correct: 0 },
                { q: "Apa manfaat dari Santun?", options: ["Membangun reputasi positif dan memancarkan empati", "Menakut-nakuti", "Membuat orang lain bosan", "Menunjukkan kekuasaan", "Mengasingkan diri"], correct: 0 },
                { q: "Santun dalam berkomunikasi berarti...", options: ["Memilih kata dengan bijak dan nada lembut", "Berteriak", "Memotong pembicaraan", "Menggunakan kata kasar", "Diam saja"], correct: 0 },
                { q: "Budaya santun diajarkan sejak...", options: ["Usia dini", "Dewasa", "Lanjut usia", "Sekolah menengah", "Perguruan tinggi"], correct: 0 },
                { q: "Santun membuat orang lain merasa...", options: ["Nyaman dan dihormati", "Takut", "Bosan", "Tersinggung", "Marah"], correct: 0 },
                { q: "Kebalikan dari santun adalah...", options: ["Kasar dan angkuh", "Ramah", "Baik", "Rendah hati", "Sopan"], correct: 0 },
                { q: "Santun adalah bagian dari...", options: ["Akhlak mulia", "Kelemahan", "Kesombongan", "Keangkuhan", "Kebodohan"], correct: 0 },
                { q: "Penerapan santun di media sosial adalah...", options: ["Berkomentar dengan sopan", "Menyebarkan kebencian", "Menghina orang", "Menggunakan kata kasar", "Mengabaikan etika"], correct: 0 },
                { q: "Santun dalam SMART-5S bertujuan untuk...", options: ["Memancarkan empati dan kedewasaan emosional", "Menakut-nakuti", "Menghina", "Mengasingkan", "Membuat kacau"], correct: 0 }
            ]
        ];

        // ----- STATE -----
        let userName = "User";
        let currentLevel = 0;
        let currentQuestionIndex = 0;
        let score = 0;
        let totalAttempts = 0;
        let correctAttempts = 0;
        let questionsForLevel = [];
        let bubbles = [];
        let gameActive = false;
        let levelCompleted = false;
        let animationFrame = null;
        let canvas, ctx;
        let W, H;
        let shootCooldown = 0;
        let leaderboardData = [];
        let particles = [];
        let fireworks = [];
        let isCelebrating = false;
        let finalScore = 0;
        let finalRank = "";
        let finalMessage = "";
        let finalAccuracy = 0;

        // DOM
        const canvasEl = document.getElementById('gameCanvas');
        const questionPanel = document.getElementById('question-panel');
        const qNumberDisplay = document.getElementById('qNumberDisplay');
        const qTextDisplay = document.getElementById('qTextDisplay');
        const levelIndicator = document.getElementById('level-indicator');
        const scoreIndicator = document.getElementById('score-indicator');
        const playerNameDisplay = document.getElementById('player-name-display');
        const entryScreen = document.getElementById('entry-screen');
        const congratsOverlay = document.getElementById('congrats-overlay');
        const finalScoreSpan = document.getElementById('finalScoreDisplay');
        const rankDisplay = document.getElementById('rankDisplay');
        const personalMessage = document.getElementById('personalMessage');
        const userNameDisplay = document.getElementById('userNameDisplay');
        const levelCompleteDisplay = document.getElementById('levelCompleteDisplay');
        const accuracyDisplay = document.getElementById('accuracyDisplay');
        const lbEntries = document.getElementById('lbEntries');
        const speechBtn = document.getElementById('speech-btn');

        canvas = canvasEl;
        ctx = canvas.getContext('2d');

        // Speech Synthesis
        let speechSynth = window.speechSynthesis;
        let speechUtterance = null;

        function speakScoreboard(score, rank, message, accuracy) {
            if (!window.speechSynthesis) return;
            if (speechSynth.speaking) speechSynth.cancel();
            const text = `Laporan misi untuk User ${userName}. Skor akhir ${score} poin. Predikat ${rank}. Akurasi ${accuracy} persen. ${message}`;
            speechUtterance = new SpeechSynthesisUtterance(text);
            speechUtterance.lang = 'id-ID';
            speechUtterance.rate = 0.85;
            speechUtterance.pitch = 1;
            speechSynth.speak(speechUtterance);
        }

        // ----- GAME FUNCTIONS -----
        function shuffleArray(arr) {
            for (let i = arr.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [arr[i], arr[j]] = [arr[j], arr[i]];
            }
            return arr;
        }

        function loadLeaderboard() {
            try {
                const data = localStorage.getItem('smart5s_leaderboard');
                if (data) leaderboardData = JSON.parse(data);
                else leaderboardData = [];
            } catch(e){ leaderboardData = []; }
            renderLeaderboard();
        }
        function saveLeaderboard() {
            localStorage.setItem('smart5s_leaderboard', JSON.stringify(leaderboardData));
            renderLeaderboard();
        }
        function renderLeaderboard() {
            if (!lbEntries) return;
            if (leaderboardData.length === 0) {
                lbEntries.innerHTML = '&lt;div style="color:#4a7a9a;"&gt;Belum ada data&lt;/div&gt;';
                return;
            }
            const sorted = [...leaderboardData].sort((a,b) =&gt; b.score - a.score).slice(0,5);
            lbEntries.innerHTML = sorted.map(p =&gt; 
                `&lt;div&gt;&lt;span&gt;${p.name}&lt;/span&gt;&lt;span class="lb-score"&gt;${p.score}&lt;/span&gt;&lt;/div&gt;`
            ).join('');
        }

        function resizeCanvas() {
            const container = document.getElementById('game-canvas-container');
            const rect = container.getBoundingClientRect();
            canvas.width = rect.width || 800;
            canvas.height = rect.height || 600;
            W = canvas.width;
            H = canvas.height;
            if (gameActive &amp;&amp; questionsForLevel.length) {
                generateBubbles();
                if (!levelCompleted) showCurrentQuestion();
            }
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        function loadLevel(levelIdx) {
            currentLevel = levelIdx;
            currentQuestionIndex = 0;
            levelCompleted = false;
            const raw = QUESTION_BANK[levelIdx] || QUESTION_BANK[0];
            questionsForLevel = raw.map(item =&gt; {
                const shuffledOptions = shuffleArray([...item.options]);
                const correctIndex = shuffledOptions.indexOf(item.options[item.correct]);
                return {
                    q: item.q,
                    options: shuffledOptions,
                    correct: correctIndex
                };
            });
            questionsForLevel = shuffleArray(questionsForLevel);
            generateBubbles();
            updateUI();
            if (gameActive) {
                showCurrentQuestion();
            }
        }

        function generateBubbles() {
            bubbles = [];
            if (!questionsForLevel.length) return;
            const total = questionsForLevel.length;
            const cols = Math.min(5, total, Math.floor(W / 120) + 1);
            const rows = Math.ceil(total / cols);
            const spacingX = W / (cols + 1);
            const spacingY = H / (rows + 2);
            const radius = Math.min(spacingX * 0.4, spacingY * 0.45, 65);
            const baseY = spacingY * 0.8;
            for (let i = 0; i &lt; total; i++) {
                const col = i % cols;
                const row = Math.floor(i / cols);
                let x = spacingX * (col + 1) + (Math.random() - 0.5) * 30;
                let y = baseY + spacingY * row + (Math.random() - 0.5) * 25;
                x = Math.min(Math.max(x, radius+10), W - radius - 10);
                y = Math.min(Math.max(y, radius+10), H - radius - 10);
                const vx = (Math.random() - 0.5) * 0.8;
                const vy = (Math.random() - 0.5) * 0.8;
                bubbles.push({
                    id: i,
                    x, y, radius,
                    vx, vy,
                    label: questionsForLevel[i]?.options[0] || '?',
                    fullText: questionsForLevel[i]?.options[0] || '?',
                    answered: false,
                    optionIndex: 0
                });
            }
        }

        function wrapTextForBubble(text, maxCharsPerLine) {
            const words = text.split(' ');
            let lines = [];
            let currentLine = '';
            for (let w of words) {
                if ((currentLine + ' ' + w).length &lt;= maxCharsPerLine) {
                    currentLine += (currentLine ? ' ' : '') + w;
                } else {
                    if (currentLine) lines.push(currentLine);
                    currentLine = w;
                }
            }
            if (currentLine) lines.push(currentLine);
            return lines;
        }

        function showCurrentQuestion() {
            if (!questionsForLevel.length || currentQuestionIndex &gt;= questionsForLevel.length) {
                levelCompleted = true;
                if (currentLevel + 1 &lt; LEVELS) {
                    currentLevel++;
                    loadLevel(currentLevel);
                    updateUI();
                } else {
                    showFinalCongrats();
                }
                return;
            }
            const qData = questionsForLevel[currentQuestionIndex];
            if (!qData) return;
            qNumberDisplay.textContent = `${currentQuestionIndex + 1}.`;
            qTextDisplay.textContent = qData.q;
            bubbles.forEach((b, idx) =&gt; {
                const optIdx = idx % qData.options.length;
                b.optionIndex = optIdx;
                b.fullText = qData.options[optIdx] || '?';
                b.label = b.fullText;
                b.answered = false;
            });
        }

        function handleShoot(x, y) {
            if (!gameActive || levelCompleted) return;
            if (shootCooldown &gt; 0) return;
            shootCooldown = 8;
            let hit = null;
            for (let b of bubbles) {
                if (b.answered) continue;
                const dx = x - b.x, dy = y - b.y;
                if (dx*dx + dy*dy &lt; b.radius * b.radius) {
                    hit = b;
                    break;
                }
            }
            if (!hit) return;

            const qData = questionsForLevel[currentQuestionIndex];
            if (!qData) return;
            const selectedOptIdx = hit.optionIndex % qData.options.length;
            const isCorrect = (selectedOptIdx === qData.correct);
            hit.answered = true;
            totalAttempts++;
            if (isCorrect) {
                score++;
                correctAttempts++;
                spawnExplosion(hit.x, hit.y, '#00ffaa', 14);
            } else {
                spawnExplosion(hit.x, hit.y, '#ff4444', 10);
            }
            currentQuestionIndex++;
            if (currentQuestionIndex &gt;= questionsForLevel.length) {
                if (currentLevel + 1 &lt; LEVELS) {
                    showLevelCongrats();
                } else {
                    showFinalCongrats();
                }
            } else {
                showCurrentQuestion();
            }
            updateUI();
        }

        function spawnExplosion(x, y, color, count) {
            for (let i=0; i&lt;count; i++) {
                const angle = Math.random() * 2 * Math.PI;
                const speed = Math.random() * 3 + 1;
                particles.push({
                    x, y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed,
                    life: 1,
                    decay: Math.random() * 0.03 + 0.015,
                    size: Math.random() * 4 + 2,
                    color: color
                });
            }
        }

        function showLevelCongrats() {
            qNumberDisplay.textContent = '⚡';
            qTextDisplay.textContent = `Level ${currentLevel+1} Selesai! Skor: ${score}`;
            for (let i=0; i&lt;20; i++) {
                spawnExplosion(Math.random()*W, Math.random()*H, '#00ddff', 5);
            }
            setTimeout(() =&gt; {
                if (currentLevel + 1 &lt; LEVELS) {
                    currentLevel++;
                    loadLevel(currentLevel);
                    updateUI();
                } else {
                    showFinalCongrats();
                }
            }, 1200);
        }

        function getRank(scr) {
            if (scr &gt;= 45) return "&#127942; SMART-5S Master";
            else if (scr &gt;= 35) return "&#127775; SMART-5S Expert";
            else if (scr &gt;= 25) return "⚡ SMART-5S Pro";
            else if (scr &gt;= 15) return "&#128216; SMART-5S Learner";
            else return "&#128214; Perlu Belajar Lagi";
        }

        function getMessage(scr) {
            if (scr &gt;= 45) return "&#128640; Luar biasa! Anda SMART-5S Master sejati!";
            else if (scr &gt;= 35) return "&#127775; Hebat! Terus pertahankan nilai-nilai SMART-5S!";
            else if (scr &gt;= 25) return "&#128200; Bagus! Asah terus 5S Anda!";
            else if (scr &gt;= 15) return "&#128218; Mulai konsisten, raih predikat lebih tinggi!";
            else return "&#128170; Perlu belajar lagi, raih SMART-5S Master!";
        }

        function showFinalCongrats() {
            gameActive = false;
            finalScore = score;
            finalRank = getRank(score);
            finalMessage = getMessage(score);
            finalAccuracy = totalAttempts &gt; 0 ? Math.round((correctAttempts / totalAttempts) * 100) : 0;
            
            congratsOverlay.classList.add('show');
            finalScoreSpan.textContent = finalScore;
            rankDisplay.textContent = finalRank;
            personalMessage.textContent = finalMessage;
            userNameDisplay.textContent = userName;
            levelCompleteDisplay.textContent = `Level: ${LEVELS}/${LEVELS}`;
            accuracyDisplay.textContent = `Akurasi: ${finalAccuracy}%`;
            
            leaderboardData.push({ name: userName, score: score });
            saveLeaderboard();
            
            isCelebrating = true;
            for (let i=0; i&lt;70; i++) {
                setTimeout(() =&gt; {
                    spawnFirework(Math.random()*W, Math.random()*H*0.7 + 50);
                }, i * 70);
            }
            for (let i=0; i&lt;40; i++) {
                setTimeout(() =&gt; {
                    spawnFirework(Math.random()*W, Math.random()*H*0.5 + 30);
                }, 3500 + i * 90);
            }
            setTimeout(() =&gt; {
                speakScoreboard(finalScore, finalRank, finalMessage, finalAccuracy);
            }, 1600);
        }

        function spawnFirework(x, y) {
            const colors = ['#ff4444', '#ffdd44', '#44ff44', '#44ddff', '#ff44ff', '#ffffff', '#ff8800', '#00ffaa', '#a855f7'];
            for (let i=0; i&lt;50; i++) {
                const angle = Math.random() * 2 * Math.PI;
                const speed = Math.random() * 6 + 2;
                const color = colors[Math.floor(Math.random() * colors.length)];
                fireworks.push({
                    x, y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed - 1,
                    life: 1,
                    decay: Math.random() * 0.015 + 0.007,
                    size: Math.random() * 5 + 2,
                    color: color,
                    isConfetti: false
                });
            }
            for (let i=0; i&lt;25; i++) {
                const angle = Math.random() * 2 * Math.PI;
                const speed = Math.random() * 4 + 1;
                const color = colors[Math.floor(Math.random() * colors.length)];
                fireworks.push({
                    x, y,
                    vx: Math.cos(angle) * speed + (Math.random()-0.5)*2,
                    vy: Math.sin(angle) * speed - 2.5,
                    life: 1,
                    decay: Math.random() * 0.01 + 0.005,
                    size: Math.random() * 8 + 4,
                    color: color,
                    isConfetti: true
                });
            }
        }

        function updateUI() {
            levelIndicator.textContent = `⚡ Level ${currentLevel+1}`;
            scoreIndicator.textContent = `⭐ ${score}`;
            playerNameDisplay.textContent = `&#128187; ${userName}`;
        }

        function draw() {
            ctx.clearRect(0, 0, W, H);
            ctx.fillStyle = 'rgba(0, 10, 30, 0.3)';
            ctx.fillRect(0, 0, W, H);
            ctx.strokeStyle = '#00aaff20';
            ctx.lineWidth = 0.5;
            for (let i=0; i&lt;W; i+=25) {
                ctx.beginPath();
                ctx.moveTo(i, 0);
                ctx.lineTo(i, H);
                ctx.stroke();
            }
            for (let i=0; i&lt;H; i+=25) {
                ctx.beginPath();
                ctx.moveTo(0, i);
                ctx.lineTo(W, i);
                ctx.stroke();
            }
            ctx.strokeStyle = '#00d4ff15';
            ctx.lineWidth = 1;
            for (let i=0; i&lt;W; i+=80) {
                ctx.beginPath();
                ctx.moveTo(i, 0);
                ctx.lineTo(i+40, H);
                ctx.stroke();
            }
            for (let i=0; i&lt;25; i++) {
                ctx.fillStyle = `rgba(0, 180, 255, ${Math.random()*0.2+0.05})`;
                ctx.beginPath();
                ctx.arc(Math.random()*W, Math.random()*H, Math.random()*2+0.5, 0, Math.PI*2);
                ctx.fill();
            }

            bubbles.forEach(b =&gt; {
                if (b.answered) return;
                const gradient = ctx.createRadialGradient(b.x-8, b.y-8, 2, b.x, b.y, b.radius);
                gradient.addColorStop(0, '#80d4ff');
                gradient.addColorStop(0.4, '#0088ff');
                gradient.addColorStop(0.8, '#4a00ff');
                gradient.addColorStop(1, '#1a0066');
                ctx.shadowColor = '#00aaffaa';
                ctx.shadowBlur = 35;
                ctx.beginPath();
                ctx.arc(b.x, b.y, b.radius, 0, 2*Math.PI);
                ctx.fillStyle = gradient;
                ctx.fill();
                ctx.shadowBlur = 0;
                ctx.strokeStyle = '#80d4ff';
                ctx.lineWidth = 2.5;
                ctx.shadowColor = '#00aaff';
                ctx.shadowBlur = 15;
                ctx.stroke();
                ctx.shadowBlur = 0;
                ctx.fillStyle = '#ffffff';
                ctx.shadowColor = '#0044ff';
                ctx.shadowBlur = 10;
                let fontSize = Math.max(10, Math.min(b.radius * 0.3, 15));
                ctx.font = `bold ${fontSize}px 'Segoe UI', Arial, sans-serif`;
                const maxChars = Math.floor((b.radius * 2 * 0.6) / (fontSize * 0.6));
                const lines = wrapTextForBubble(b.fullText, maxChars);
                const lineHeight = fontSize * 1.25;
                const totalHeight = lines.length * lineHeight;
                if (totalHeight &gt; b.radius * 1.6) {
                    const newSize = Math.floor(fontSize * (b.radius * 1.6 / totalHeight));
                    fontSize = Math.max(8, Math.min(newSize, 14));
                    ctx.font = `bold ${fontSize}px 'Segoe UI', Arial, sans-serif`;
                }
                const finalLines = wrapTextForBubble(b.fullText, Math.floor((b.radius * 2 * 0.65) / (fontSize * 0.6)));
                const finalLineHeight = fontSize * 1.2;
                const startY = b.y - ((finalLines.length - 1) * finalLineHeight / 2);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                for (let i = 0; i &lt; finalLines.length; i++) {
                    ctx.fillText(finalLines[i], b.x, startY + i * finalLineHeight);
                }
                ctx.shadowBlur = 0;
                b.x += b.vx;
                b.y += b.vy;
                if (b.x &lt; b.radius || b.x &gt; W - b.radius) b.vx *= -1;
                if (b.y &lt; b.radius || b.y &gt; H - b.radius) b.vy *= -1;
                b.x = Math.min(Math.max(b.x, b.radius), W - b.radius);
                b.y = Math.min(Math.max(b.y, b.radius), H - b.radius);
            });

            for (let i=particles.length-1; i&gt;=0; i--) {
                const p = particles[i];
                p.x += p.vx;
                p.y += p.vy;
                p.life -= p.decay;
                p.vy += 0.05;
                if (p.life &lt;= 0) { particles.splice(i,1); continue; }
                ctx.globalAlpha = p.life;
                ctx.fillStyle = p.color;
                ctx.shadowBlur = 10;
                ctx.shadowColor = p.color;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI*2);
                ctx.fill();
                ctx.shadowBlur = 0;
            }
            ctx.globalAlpha = 1;

            for (let i=fireworks.length-1; i&gt;=0; i--) {
                const f = fireworks[i];
                f.x += f.vx;
                f.y += f.vy;
                f.vy += 0.04;
                f.life -= f.decay;
                if (f.life &lt;= 0) { fireworks.splice(i,1); continue; }
                ctx.globalAlpha = f.life;
                ctx.fillStyle = f.color;
                ctx.shadowBlur = 18;
                ctx.shadowColor = f.color;
                if (f.isConfetti) {
                    ctx.save();
                    ctx.translate(f.x, f.y);
                    ctx.rotate(f.life * 12);
                    ctx.fillRect(-f.size/2, -f.size/2, f.size * f.life, f.size * f.life * 0.5);
                    ctx.restore();
                } else {
                    ctx.beginPath();
                    ctx.arc(f.x, f.y, f.size * f.life, 0, Math.PI*2);
                    ctx.fill();
                }
                ctx.shadowBlur = 0;
            }
            ctx.globalAlpha = 1;

            if (shootCooldown &gt; 0) shootCooldown--;
        }

        function gameLoop() {
            draw();
            animationFrame = requestAnimationFrame(gameLoop);
        }

        canvasEl.addEventListener('click', (e) =&gt; {
            const rect = canvasEl.getBoundingClientRect();
            const scaleX = canvas.width / rect.width;
            const scaleY = canvas.height / rect.height;
            const x = (e.clientX - rect.left) * scaleX;
            const y = (e.clientY - rect.top) * scaleY;
            handleShoot(x, y);
        });

        canvasEl.addEventListener('touchstart', (e) =&gt; {
            e.preventDefault();
            const rect = canvasEl.getBoundingClientRect();
            const touch = e.touches[0];
            const scaleX = canvas.width / rect.width;
            const scaleY = canvas.height / rect.height;
            const x = (touch.clientX - rect.left) * scaleX;
            const y = (touch.clientY - rect.top) * scaleY;
            handleShoot(x, y);
        }, { passive: false });

        speechBtn.addEventListener('click', () =&gt; {
            speakScoreboard(finalScore, finalRank, finalMessage, finalAccuracy);
        });

        function startGame() {
            const nameInput = document.getElementById('playerNameInput');
            userName = nameInput.value.trim() || "User";
            playerNameDisplay.textContent = `&#128187; ${userName}`;
            entryScreen.style.display = 'none';
            congratsOverlay.classList.remove('show');
            score = 0;
            totalAttempts = 0;
            correctAttempts = 0;
            currentLevel = 0;
            gameActive = true;
            isCelebrating = false;
            particles = [];
            fireworks = [];
            if (speechSynth.speaking) speechSynth.cancel();
            loadLevel(0);
            updateUI();
            if (animationFrame) cancelAnimationFrame(animationFrame);
            gameLoop();
        }

        document.getElementById('startGameBtn').addEventListener('click', startGame);
        document.getElementById('restartFromCongratsBtn').addEventListener('click', () =&gt; {
            congratsOverlay.classList.remove('show');
            startGame();
        });
        loadLeaderboard();
        loadLevel(0);
        updateUI();
        qNumberDisplay.textContent = '&#128640;';
        qTextDisplay.textContent = 'Masukkan nama User &amp; tekan MULAI';
        gameLoop();

        window.addEventListener('resize', () =&gt; {
            resizeCanvas();
        });
    })();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</description><link>http://kitab-investasi.blogspot.com/2026/07/sahabat-5s.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-6942617448054266765</guid><pubDate>Thu, 25 Jun 2026 04:17:54 +0000</pubDate><atom:updated>2026-06-25T11:25:02.049+07:00</atom:updated><title>E-RAPORT PKL</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Aplikasi Rapor PKL - SMK Negeri 1 Tuntang&lt;/title&gt;
    &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
    
    &lt;!-- Google Fonts: Inter untuk aplikasi &amp; Times New Roman untuk cetakan fisik --&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Inter:wght=300;400;500;600;700;800&amp;display=swap" rel="stylesheet"&gt;
    
    &lt;!-- Pustaka html2pdf untuk ekspor PDF instan berkualitas tinggi --&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"&gt;&lt;/script&gt;
    
    &lt;style&gt;
        body {
            font-family: 'Inter', sans-serif;
        }
        
        @media print {
            body {
                background: white !important;
                color: black !important;
                font-family: 'Times New Roman', Times, serif !important;
                font-size: 8.5pt !important;
            }
            .no-print {
                display: none !important;
            }
            .print-page {
                width: 215mm;
                height: 330mm;
                margin: 0 auto !important;
                padding: 8mm 12mm 8mm 12mm !important;
                box-sizing: border-box;
                background: white !important;
                box-shadow: none !important;
                border: none !important;
                page-break-after: avoid;
                page-break-inside: avoid;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            table {
                width: 100% !important;
                border-collapse: collapse !important;
            }
            th, td {
                border: 1px solid black !important;
                padding: 2.5px 4.5px !important;
                font-size: 8pt !important;
                line-height: 1.15 !important;
            }
            .kop-border {
                border-bottom: 4px double black !important;
            }
            /* Menyetel ukuran halaman cetak langsung ke format Folio/F4 */
            @page {
                size: 215mm 330mm;
                margin: 0;
            }
            html, body {
                width: 215mm;
                height: 100%;
            }
        }

        .preview-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
        }
        
        .preview-pane {
            width: 215mm;
            height: 330mm;
            padding: 10mm 12mm 10mm 12mm;
            background: white;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 15px -6px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            box-sizing: border-box;
            position: relative;
            font-family: 'Times New Roman', Times, serif;
            color: black;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .logo-img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .font-times {
            font-family: 'Times New Roman', Times, serif;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class="bg-slate-900 text-slate-100 antialiased min-h-screen flex flex-col"&gt;

    &lt;div id="root" class="flex-grow flex flex-col"&gt;&lt;/div&gt;

    &lt;!-- React &amp; Babel Standalone Libraries --&gt;
    &lt;script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js" crossorigin&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js" crossorigin&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/@babel/standalone@7.24.7/babel.min.js"&gt;&lt;/script&gt;
    
    &lt;!-- Lucide Icon Pack (Stabil UMD Version) --&gt;
    &lt;script src="https://unpkg.com/lucide@0.400.0/dist/umd/lucide.min.js"&gt;&lt;/script&gt;

    &lt;script type="text/babel"&gt;
        const { useState, useEffect, useMemo } = React;

        // Kumpulan Data Utama 35 Siswa XI TJKT 2 (Tahun Pelajaran 2025/2026)
        const initialStudents = [
            { id: 848, nis: "848", nisn: "0075368619", name: "ADNAN DAVID ARDAFA", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Desa Candirejo", advisor: "M. Misbahul M", grades: { "1.1": 80, "1.2": 90, "1.3": 85, "1.4": 85, "1.5": 88, "1.6": 90, "2.1": 80, "2.2": 85, "2.3": 92, "2.4": 85, "2.5": 80, "2.6": 95 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 849, nis: "849", nisn: "0074932145", name: "AKBAR ADI SUGESTI", pklLocation: "SMPN 2 TUNTANG", pklAddress: "Jl. Tuntang No. 42", advisor: "Bayu AS", grades: { "1.1": 95, "1.2": 90, "1.3": 88, "1.4": 90, "1.5": 90, "1.6": 90, "2.1": 95, "2.2": 90, "2.3": 86, "2.4": 95, "2.5": 89, "2.6": 87 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 850, nis: "850", nisn: "0071239854", name: "ANDHIKA DIAS DWINOVA", pklLocation: "PERHUTANI SALATIGA", pklAddress: "Jl. Hasanudin No. 110, Salatiga", advisor: "M Achmadi", grades: { "1.1": 98, "1.2": 88, "1.3": 95, "1.4": 97, "1.5": 88, "1.6": 79, "2.1": 77, "2.2": 78, "2.3": 85, "2.4": 87, "2.5": 88, "2.6": 78 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 851, nis: "851", nisn: "0081293847", name: "ANDRI VILANDA", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "Enggar S", grades: { "1.1": 80, "1.2": 95, "1.3": 90, "1.4": 90, "1.5": 90, "1.6": 95, "2.1": 95, "2.2": 95, "2.3": 95, "2.4": 95, "2.5": 95, "2.6": 95 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 852, nis: "852", nisn: "0075531234", name: "ANGGRESWARI NAZWA INSANY", pklLocation: "PT. INDONESIA MEDIA KOMUNIKASI", pklAddress: "Gedung Cyber, lt. 5, Semarang", advisor: "Enggar S", grades: { "1.1": 100, "1.2": 100, "1.3": 100, "1.4": 100, "1.5": 100, "1.6": 100, "2.1": 100, "2.2": 100, "2.3": 100, "2.4": 100, "2.5": 100, "2.6": 100 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 853, nis: "853", nisn: "0079983451", name: "AQTHA'AN NAKHSYABY", pklLocation: "PT. PRO MANUFACTURE INDONESIA (FORMULATRIX)", pklAddress: "Kawasan Industri Candi, Semarang", advisor: "Intan f", grades: { "1.1": 95, "1.2": 96, "1.3": 98, "1.4": 88, "1.5": 86, "1.6": 98, "2.1": 97, "2.2": 95, "2.3": 95, "2.4": 93, "2.5": 95, "2.6": 96 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 854, nis: "854", nisn: "0072314569", name: "ARIEL ADISYAH PUTRA", pklLocation: "TELKOM AKSES UNGARAN", pklAddress: "Jl. Diponegoro No. 89, Ungaran", advisor: "Agung K", grades: { "1.1": 89, "1.2": 89, "1.3": 89, "1.4": 100, "1.5": 89, "1.6": 89, "2.1": 100, "2.2": 89, "2.3": 89, "2.4": 89, "2.5": 89, "2.6": 89 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 855, nis: "855", nisn: "0078834912", name: "ARSA FADEL DEAL", pklLocation: "TELKOM AKSES UNGARAN", pklAddress: "Jl. Diponegoro No. 89, Ungaran", advisor: "Agung K", grades: { "1.1": 89, "1.2": 100, "1.3": 89, "1.4": 89, "1.5": 89, "1.6": 89, "2.1": 89, "2.2": 89, "2.3": 89, "2.4": 89, "2.5": 89, "2.6": 100 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 856, nis: "856", nisn: "0083214567", name: "ASTI NOVITA SARI", pklLocation: "PT. DATA LINTAS MEDIA INDONESIA", pklAddress: "Jl. Jend. Sudirman, Semarang", advisor: "Agung K", grades: { "1.1": 95, "1.2": 94, "1.3": 99, "1.4": 95, "1.5": 90, "1.6": 96, "2.1": 86, "2.2": 90, "2.3": 90, "2.4": 85, "2.5": 85, "2.6": 90 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 857, nis: "857", nisn: "0071122334", name: "CRISTINA DEWIPUTRI", pklLocation: "PLN PERSERO UPT SALATIGA", pklAddress: "Jl. Jend. Sudirman, Salatiga", advisor: "Intan f", grades: { "1.1": 90, "1.2": 90, "1.3": 75, "1.4": 87, "1.5": 95, "1.6": 90, "2.1": 90, "2.2": 80, "2.3": 85, "2.4": 80, "2.5": 90, "2.6": 89 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 858, nis: "858", nisn: "0074455667", name: "DENYSS ARISTA DEWI", pklLocation: "PT. DATA LINTAS MEDIA INDONESIA", pklAddress: "Jl. Jend. Sudirman, Semarang", advisor: "Agung K", grades: { "1.1": 90, "1.2": 95, "1.3": 90, "1.4": 95, "1.5": 95, "1.6": 95, "2.1": 95, "2.2": 95, "2.3": 90, "2.4": 90, "2.5": 95, "2.6": 90 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 859, nis: "859", nisn: "0079988776", name: "DIMAS SUKMA FARIZKI", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "M. Misbahul M", grades: { "1.1": 90, "1.2": 95, "1.3": 90, "1.4": 95, "1.5": 95, "1.6": 95, "2.1": 95, "2.2": 95, "2.3": 90, "2.4": 90, "2.5": 95, "2.6": 90 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 860, nis: "860", nisn: "0073344551", name: "FAHRURROZI", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "M. Misbahul M", grades: { "1.1": 90, "1.2": 92, "1.3": 85, "1.4": 90, "1.5": 88, "1.6": 90, "2.1": 80, "2.2": 85, "2.3": 92, "2.4": 85, "2.5": 85, "2.6": 95 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 861, nis: "861", nisn: "0078899001", name: "FERRA ANGGRAENI", pklLocation: "SMPN 2 TUNTANG", pklAddress: "Jl. Tuntang No. 42", advisor: "Bayu AS", grades: { "1.1": 100, "1.2": 100, "1.3": 100, "1.4": 100, "1.5": 100, "1.6": 100, "2.1": 100, "2.2": 100, "2.3": 100, "2.4": 100, "2.5": 100, "2.6": 100 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 862, nis: "862", nisn: "0072233441", name: "FLORA FIRNANDA", pklLocation: "SMPN 2 TUNTANG", pklAddress: "Jl. Tuntang No. 42", advisor: "Bayu AS", grades: { "1.1": 90, "1.2": 88, "1.3": 85, "1.4": 90, "1.5": 80, "1.6": 90, "2.1": 80, "2.2": 80, "2.3": 92, "2.4": 80, "2.5": 80, "2.6": 90 }, attendance: { sakit: 1, izin: 1, alpha: 0 } },
            { id: 863, nis: "863", nisn: "0071112228", name: "HELSA RIZQI AKBAR", pklLocation: "PERHUTANI SALATIGA", pklAddress: "Jl. Hasanudin No. 110, Salatiga", advisor: "M Achmadi", grades: { "1.1": 77, "1.2": 77, "1.3": 77, "1.4": 77, "1.5": 77, "1.6": 77, "2.1": 77, "2.2": 77, "2.3": 77, "2.4": 77, "2.5": 77, "2.6": 77 }, attendance: { sakit: 5, izin: 3, alpha: 1 } },
            { id: 864, nis: "864", nisn: "0079900223", name: "ILHAM ARBIANSAH", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "M. Misbahul M", grades: { "1.1": 86, "1.2": 86, "1.3": 86, "1.4": 86, "1.5": 86, "1.6": 86, "2.1": 86, "2.2": 86, "2.3": 86, "2.4": 86, "2.5": 86, "2.6": 86 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 865, nis: "865", nisn: "0074433221", name: "JOEY NUNG JAYA LANANG", pklLocation: "PT. PRO MANUFACTURE INDONESIA", pklAddress: "Kawasan Industri Candi, Semarang", advisor: "Intan f", grades: { "1.1": 80, "1.2": 95, "1.3": 95, "1.4": 90, "1.5": 95, "1.6": 95, "2.1": 95, "2.2": 95, "2.3": 90, "2.4": 95, "2.5": 95, "2.6": 95 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 866, nis: "866", nisn: "0075566778", name: "LIDIA NAILIATUZ ZAHFA", pklLocation: "PT. DATA LINTAS MEDIA INDONESIA", pklAddress: "Jl. Jend. Sudirman, Semarang", advisor: "Agung K", grades: { "1.1": 100, "1.2": 100, "1.3": 100, "1.4": 100, "1.5": 100, "1.6": 100, "2.1": 100, "2.2": 100, "2.3": 100, "2.4": 100, "2.5": 100, "2.6": 100 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 867, nis: "867", nisn: "0078833440", name: "MARTA AKMALIA LUTFI", pklLocation: "SMPN 2 TUNTANG", pklAddress: "Jl. Tuntang No. 42", advisor: "Bayu AS", grades: { "1.1": 89, "1.2": 89, "1.3": 89, "1.4": 89, "1.5": 89, "1.6": 89, "2.1": 89, "2.2": 89, "2.3": 89, "2.4": 89, "2.5": 89, "2.6": 89 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 868, nis: "868", nisn: "0072211993", name: "MOZZA PUTRI RAHAYU", pklLocation: "PT. DATA LINTAS MEDIA INDONESIA", pklAddress: "Jl. Jend. Sudirman, Semarang", advisor: "Agung K", grades: { "1.1": 100, "1.2": 100, "1.3": 100, "1.4": 100, "1.5": 100, "1.6": 100, "2.1": 100, "2.2": 100, "2.3": 100, "2.4": 100, "2.5": 100, "2.6": 100 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 869, nis: "869", nisn: "0078833112", name: "MUHAMAD SATYA FIRMANSYAH", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "M. Misbahul M", grades: { "1.1": 90, "1.2": 92, "1.3": 85, "1.4": 90, "1.5": 88, "1.6": 90, "2.1": 80, "2.2": 85, "2.3": 92, "2.4": 85, "2.5": 85, "2.6": 92 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 870, nis: "870", nisn: "0071199882", name: "MUHAMMAD FAISAL FAHRI", pklLocation: "PERHUTANI SALATIGA", pklAddress: "Jl. Hasanudin No. 110, Salatiga", advisor: "M Achmadi", grades: { "1.1": 85, "1.2": 85, "1.3": 85, "1.4": 90, "1.5": 95, "1.6": 95, "2.1": 90, "2.2": 95, "2.3": 95, "2.4": 95, "2.5": 95, "2.6": 95 }, attendance: { sakit: 1, izin: 0, alpha: 0 } },
            { id: 871, nis: "871", nisn: "0075533119", name: "MUHAMMAD NAJIB", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "M. Misbahul M", grades: { "1.1": 90, "1.2": 90, "1.3": 90, "1.4": 85, "1.5": 90, "1.6": 90, "2.1": 85, "2.2": 85, "2.3": 95, "2.4": 85, "2.5": 85, "2.6": 95 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 872, nis: "872", nisn: "0072211440", name: "MUHAMMAD RIZKY BANTACUT", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "M. Misbahul M", grades: { "1.1": 0, "1.2": 0, "1.3": 0, "1.4": 0, "1.5": 0, "1.6": 0, "2.1": 0, "2.2": 0, "2.3": 0, "2.4": 0, "2.5": 0, "2.6": 0 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 873, nis: "873", nisn: "0073388112", name: "NOVA SILFI NUGROHO", pklLocation: "SMPN 2 TUNTANG", pklAddress: "Jl. Tuntang No. 42", advisor: "Bayu AS", grades: { "1.1": 95, "1.2": 90, "1.3": 79, "1.4": 89, "1.5": 95, "1.6": 95, "2.1": 95, "2.2": 89, "2.3": 89, "2.4": 89, "2.5": 90, "2.6": 95 }, attendance: { sakit: 0, izin: 1, alpha: 0 } },
            { id: 874, nis: "874", nisn: "0079922113", name: "RANGGA BAGUS PRASETYO", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "M. Misbahul M", grades: { "1.1": 80, "1.2": 90, "1.3": 85, "1.4": 80, "1.5": 85, "1.6": 85, "2.1": 80, "2.2": 85, "2.3": 92, "2.4": 85, "2.5": 85, "2.6": 90 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 875, nis: "875", nisn: "0074411882", name: "REVA QIRANA HASTARI", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "Enggar S", grades: { "1.1": 76, "1.2": 76, "1.3": 76, "1.4": 76, "1.5": 76, "1.6": 76, "2.1": 76, "2.2": 76, "2.3": 76, "2.4": 76, "2.5": 76, "2.6": 76 }, attendance: { sakit: 1, izin: 1, alpha: 0 } },
            { id: 876, nis: "876", nisn: "0078811993", name: "RYAN ANUGRAH UTAMA", pklLocation: "PERHUTANI SALATIGA", pklAddress: "Jl. Hasanudin No. 110, Salatiga", advisor: "M Achmadi", grades: { "1.1": 95, "1.2": 90, "1.3": 88, "1.4": 87, "1.5": 90, "1.6": 90, "2.1": 95, "2.2": 87, "2.3": 86, "2.4": 90, "2.5": 90, "2.6": 88 }, attendance: { sakit: 0, izin: 1, alpha: 0 } },
            { id: 877, nis: "877", nisn: "0072288334", name: "SA'IDUL MUSTAJIRIN", pklLocation: "PT. PRO MANUFACTURE INDONESIA", pklAddress: "Kawasan Industri Candi, Semarang", advisor: "Intan f", grades: { "1.1": 95, "1.2": 96, "1.3": 98, "1.4": 98, "1.5": 96, "1.6": 98, "2.1": 98, "2.2": 97, "2.3": 96, "2.4": 95, "2.5": 95, "2.6": 93 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 878, nis: "878", nisn: "0071199554", name: "SALWA LAIDIYATUZZULFA", pklLocation: "PT. DATA LINTAS MEDIA INDONESIA", pklAddress: "Jl. Jend. Sudirman, Semarang", advisor: "Agung K", grades: { "1.1": 90, "1.2": 90, "1.3": 90, "1.4": 95, "1.5": 90, "1.6": 90, "2.1": 90, "2.2": 95, "2.3": 95, "2.4": 90, "2.5": 90, "2.6": 95 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 879, nis: "879", nisn: "0074433112", name: "SOVI SALMA", pklLocation: "SMPN 2 TUNTANG", pklAddress: "Jl. Tuntang No. 42", advisor: "Bayu AS", grades: { "1.1": 88, "1.2": 90, "1.3": 85, "1.4": 90, "1.5": 90, "1.6": 90, "2.1": 86, "2.2": 90, "2.3": 90, "2.4": 88, "2.5": 85, "2.6": 95 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 880, nis: "880", nisn: "0078822119", name: "SUCI DWI YANTI", pklLocation: "PT. DATA LINTAS MEDIA INDONESIA", pklAddress: "Jl. Jend. Sudirman, Semarang", advisor: "Agung K", grades: { "1.1": 95, "1.2": 95, "1.3": 99, "1.4": 95, "1.5": 90, "1.6": 95, "2.1": 88, "2.2": 90, "2.3": 90, "2.4": 85, "2.5": 85, "2.6": 90 }, attendance: { sakit: 0, izin: 0, alpha: 0 } },
            { id: 881, nis: "881", nisn: "0073311993", name: "VERLIANA VIKA DEA PUTRI", pklLocation: "SMPN 2 TUNTANG", pklAddress: "Jl. Tuntang No. 42", advisor: "Bayu AS", grades: { "1.1": 78, "1.2": 78, "1.3": 78, "1.4": 78, "1.5": 78, "1.6": 78, "2.1": 78, "2.2": 78, "2.3": 78, "2.4": 78, "2.5": 78, "2.6": 78 }, attendance: { sakit: 1, izin: 2, alpha: 0 } },
            { id: 882, nis: "882", nisn: "0074499119", name: "ZIDAN ALFARIZOJ", pklLocation: "BEST CAMP PRIMA DATA", pklAddress: "Jl. Mertokusumo, Candirejo", advisor: "Enggar S", grades: { "1.1": 80, "1.2": 85, "1.3": 80, "1.4": 85, "1.5": 85, "1.6": 85, "2.1": 80, "2.2": 85, "2.3": 90, "2.4": 80, "2.5": 85, "2.6": 90 }, attendance: { sakit: 0, izin: 1, alpha: 0 } }
        ];

        // Definisi Konfigurasi Kompetensi Kelas
        const competencyMetadata = {
            "1.1": { code: "1.1", name: "Disiplin", group: "Non-Teknis", text: "Murid menunjukkan sikap Disiplin" },
            "1.2": { code: "1.2", name: "Kerjasama", group: "Non-Teknis", text: "Murid menunjukkan sikap sangat bisa bekerjasama" },
            "1.3": { code: "1.3", name: "Kejuruan", group: "Non-Teknis", text: "Murid menunjukkan sikap sesuai tuntutan kejuruan" },
            "1.4": { code: "1.4", name: "Kerapian", group: "Non-Teknis", text: "Murid menunjukkan sikap rapi" },
            "1.5": { code: "1.5", name: "Tanggung Jawab", group: "Non-Teknis", text: "Murid menunjukkan sikap bertanggungjawab" },
            "1.6": { code: "1.6", name: "Kemauan Kerja", group: "Non-Teknis", text: "Murid menunjukkan sikap kerja sangat bertanggungjawab" },
            "2.1": { code: "2.1", name: "Merakit Personal Komputer", group: "Teknis", text: "merakit personal komputer" },
            "2.2": { code: "2.2", name: "Instalasi Sistem Operasi Dasar", group: "Teknis", text: "Melakukan Instalasi Sistem Operasi Dasar" },
            "2.3": { code: "2.3", name: "Perbaikan / Seting Ulang sistem PC", group: "Teknis", text: "Melakukan Perbaikan dan/atau Seting Ulang sistem PC" },
            "2.4": { code: "2.4", name: "Instalasi Software", group: "Teknis", text: "Melakukan Instalasi Software" },
            "2.5": { code: "2.5", name: "Instalasi Perangkat Jaringan Lokal", group: "Teknis", text: "Melakukan Instalasi Perangkat Jaringan Lokal (Local area Network)" },
            "2.6": { code: "2.6", name: "Perbaikan/Seting Ulang Koneksi Jaringan", group: "Teknis", text: "Melakukan Perbaikan dan/atau Seting Ulang Koneksi Jaringan" }
        };

        // Standardisasi Struktur Data Penandatanganan SMKN 1 Tuntang
        const initialSchoolConfig = {
            schoolName: "SMK NEGERI 1 TUNTANG",
            headmasterName: "Ardan Sirodjuddin, S.Pd., M.Pd.",
            headmasterNip: "19810123 200501 1 002",
            homeroomTeacher: "Nofrizal, S.T., Gr.",
            homeroomNip: "19770327 202221 1002",
            address: "Jl. Mertokusumo Desa Candirejo Kecamatan Tuntang Kabupaten Semarang",
            postalCode: "50773",
            phone: "(0298) 3539034",
            email: "smkn1tuntang@gmail.com",
            website: "www.smknegerituntang.sch.id",
            printDate: "18 Maret 2026",
            printLocation: "Tuntang",
            semester: "F-Gasal/5-2025/2026"
        };

        // Representasi SVG default Provinsi Jawa Tengah untuk Logo Kiri
        const defaultLogoLeftSVG = `data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="black"&gt;&lt;circle cx="50" cy="50" r="45" fill="none" stroke="black" stroke-width="3"/&gt;&lt;path d="M50 15 L25 40 L50 48 L75 40 Z"/&gt;&lt;path d="M32 43 L32 80 L68 80 L68 43 Z" fill="none" stroke="black" stroke-width="2.5"/&gt;&lt;path d="M50 48 L50 80" stroke="black" stroke-width="2"/&gt;&lt;/svg&gt;`;

        // Representasi SVG default Logo SMKN 1 Tuntang untuk Logo Kanan
        const defaultLogoRightSVG = `data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="black"&gt;&lt;polygon points="50,5 95,28 95,72 50,95 5,72 5,28" fill="none" stroke="black" stroke-width="3"/&gt;&lt;polygon points="50,15 85,32 85,68 50,85 15,32 15,68" fill="black"/&gt;&lt;circle cx="50" cy="50" r="12" fill="white"/&gt;&lt;/svg&gt;`;

        // Generator Kalimat Deskripsi Otomatis Sesuai Berkas Raport &amp; Nilai
        const generateCompetenceFeedback = (code, score) =&gt; {
            if (score === 0 || !score) return "Siswa belum menyelesaikan kompetensi.";
            const meta = competencyMetadata[code];
            if (!meta) return "";

            // Non-Teknis Phrasings
            if (meta.group === "Non-Teknis") {
                let adjective = "";
                if (score &gt;= 95) adjective = " luar biasa";
                else if (score &gt;= 90) adjective = " sangat";
                else if (score &gt;= 80) adjective = "";
                else adjective = " cukup";

                if (code === "1.1") return `Murid menunjukkan sikap${adjective} Disiplin`;
                if (code === "1.2") {
                    if (score &gt;= 90) return "Murid menunjukkan sikap sangat bisa bekerjasama";
                    return "Murid menunjukkan sikap bisa bekerjasama";
                }
                if (code === "1.3") return `Murid menunjukkan sikap${adjective} sesuai tuntutan kejuruan`;
                if (code === "1.4") return `Murid menunjukkan sikap${adjective} rapi`;
                if (code === "1.5") return `Murid menunjukkan sikap${adjective} bertanggungjawab`;
                if (code === "1.6") {
                    if (score &gt;= 90) return "Murid menunjukkan sikap kerja sangat bertanggungjawab";
                    return "Murid menunjukkan sikap kerja bertanggungjawab";
                }
            }

            // Teknis Phrasings
            let scaleWord = "terampil";
            if (score &gt;= 90) scaleWord = "sangat terampil";
            else if (score &gt;= 80) scaleWord = "terampil";
            else scaleWord = "cukup terampil";

            return `Murid ${scaleWord} dalam ${meta.text}`;
        };

        function App() {
            const [students, setStudents] = useState(() =&gt; {
                const saved = localStorage.getItem('pkl_students');
                return saved ? JSON.parse(saved) : initialStudents;
            });
            const [schoolConfig, setSchoolConfig] = useState(() =&gt; {
                const saved = localStorage.getItem('pkl_school_v2');
                return saved ? JSON.parse(saved) : initialSchoolConfig;
            });
            
            // State untuk menampung data logo base64 hasil unggahan pengguna
            const [logoLeft, setLogoLeft] = useState(() =&gt; {
                return localStorage.getItem('pkl_logo_left') || defaultLogoLeftSVG;
            });
            const [logoRight, setLogoRight] = useState(() =&gt; {
                return localStorage.getItem('pkl_logo_right') || defaultLogoRightSVG;
            });

            const [selectedStudentId, setSelectedStudentId] = useState(848);
            const [searchQuery, setSearchQuery] = useState("");
            const [filterLocation, setFilterLocation] = useState("ALL");
            const [activeTab, setActiveTab] = useState("preview"); 
            const [editingStudent, setEditingStudent] = useState(null);
            const [feedbackMsg, setFeedbackMsg] = useState("");
            const [fontStyle, setFontStyle] = useState("serif"); // serif (Times) atau sans (Inter)
            const [isExporting, setIsExporting] = useState(false);

            useEffect(() =&gt; {
                localStorage.setItem('pkl_students', JSON.stringify(students));
            }, [students]);

            useEffect(() =&gt; {
                localStorage.setItem('pkl_school_v2', JSON.stringify(schoolConfig));
            }, [schoolConfig]);

            // Simpan perubahan logo kustom ke local storage
            useEffect(() =&gt; {
                localStorage.setItem('pkl_logo_left', logoLeft);
            }, [logoLeft]);

            useEffect(() =&gt; {
                localStorage.setItem('pkl_logo_right', logoRight);
            }, [logoRight]);

            const currentStudent = useMemo(() =&gt; {
                return students.find(s =&gt; s.id === selectedStudentId) || students[0];
            }, [students, selectedStudentId]);

            useEffect(() =&gt; {
                if (currentStudent) {
                    setEditingStudent(JSON.parse(JSON.stringify(currentStudent)));
                }
            }, [currentStudent]);

            const uniqueLocations = useMemo(() =&gt; {
                const locs = students.map(s =&gt; s.pklLocation).filter(Boolean);
                return ["ALL", ...new Set(locs)];
            }, [students]);

            const filteredStudents = useMemo(() =&gt; {
                return students.filter(student =&gt; {
                    const matchesSearch = student.name.toUpperCase().includes(searchQuery.toUpperCase()) ||
                        student.nis.includes(searchQuery) ||
                        student.pklLocation.toUpperCase().includes(searchQuery.toUpperCase()) ||
                        student.advisor.toUpperCase().includes(searchQuery.toUpperCase());
                    
                    const matchesLocation = filterLocation === "ALL" || student.pklLocation === filterLocation;
                    return matchesSearch &amp;&amp; matchesLocation;
                });
            }, [students, searchQuery, filterLocation]);

            const studentStatsList = useMemo(() =&gt; {
                return students.map(st =&gt; {
                    const scores = Object.values(st.grades).filter(v =&gt; v &gt; 0);
                    const total = scores.reduce((a, b) =&gt; a + b, 0);
                    const average = scores.length &gt; 0 ? Math.round(total / scores.length) : 0;
                    return { id: st.id, total, average };
                }).sort((a, b) =&gt; b.average - a.average);
            }, [students]);

            const getRank = (id) =&gt; {
                const index = studentStatsList.findIndex(st =&gt; st.id === id);
                return index !== -1 ? index + 1 : "-";
            };

            const handleUpdateGrades = () =&gt; {
                if (!editingStudent) return;
                setStudents(prev =&gt; prev.map(s =&gt; s.id === editingStudent.id ? editingStudent : s));
                setFeedbackMsg("Data Rapor " + editingStudent.name + " berhasil disimpan!");
                setTimeout(() =&gt; setFeedbackMsg(""), 3000);
            };

            // Fungsi utilitas mengonversi berkas gambar yang diunggah ke format data URL base64
            const handleLogoUpload = (e, target) =&gt; {
                const file = e.target.files[0];
                if (!file) return;
                
                const reader = new FileReader();
                reader.onloadend = () =&gt; {
                    if (target === 'left') {
                        setLogoLeft(reader.result);
                    } else {
                        setLogoRight(reader.result);
                    }
                    setFeedbackMsg("Logo berhasil diperbarui!");
                    setTimeout(() =&gt; setFeedbackMsg(""), 2000);
                };
                reader.readAsDataURL(file);
            };

            // Fungsi andalan mengunduh PDF secara instan seukuran kertas F4
            const handleDownloadPDF = () =&gt; {
                setIsExporting(true);
                setFeedbackMsg("Sedang memproses PDF...");
                
                const element = document.getElementById('print-area');
                
                const opt = {
                    margin:       0,
                    filename:     `Rapor_PKL_${currentStudent.name.replace(/\s+/g, '_')}_F4.pdf`,
                    image:        { type: 'jpeg', quality: 0.98 },
                    html2canvas:  { scale: 2, useCORS: true, logging: false },
                    jsPDF:        { unit: 'mm', format: [215, 330], orientation: 'portrait' } // Ukuran F4 / Folio
                };

                // Menghasilkan file PDF client-side
                html2pdf().set(opt).from(element).save().then(() =&gt; {
                    setIsExporting(false);
                    setFeedbackMsg("PDF berhasil diunduh!");
                    setTimeout(() =&gt; setFeedbackMsg(""), 3000);
                }).catch(err =&gt; {
                    setIsExporting(false);
                    setFeedbackMsg("Gagal mengunduh PDF");
                    setTimeout(() =&gt; setFeedbackMsg(""), 3000);
                    console.error(err);
                });
            };

            const calculateStats = (student) =&gt; {
                if (!student) return { total: 0, average: 0, min: 0, max: 0 };
                const scores = Object.values(student.grades).filter(v =&gt; v &gt; 0);
                if (scores.length === 0) return { total: 0, average: 0, min: 0, max: 0 };
                const total = scores.reduce((a, b) =&gt; a + b, 0);
                const average = Math.round(total / scores.length);
                const min = Math.min(...scores);
                const max = Math.max(...scores);
                return { total, average, min, max };
            };

            const currentStats = useMemo(() =&gt; {
                return calculateStats(currentStudent);
            }, [currentStudent]);

            return (
                &lt;div class="min-h-screen flex flex-col no-print text-slate-100 bg-slate-950"&gt;
                    
                    {/* Header Utama Modern */}
                    &lt;header class="bg-gradient-to-r from-slate-900 via-emerald-950 to-slate-900 border-b border-emerald-500/20 shadow-xl sticky top-0 z-50 no-print"&gt;
                        &lt;div class="max-w-7xl mx-auto px-4 py-4 flex flex-col md:flex-row items-center justify-between gap-4"&gt;
                            &lt;div class="flex items-center gap-3"&gt;
                                &lt;div class="p-2.5 bg-emerald-500/10 rounded-xl border border-emerald-500/30"&gt;
                                    &lt;svg class="w-8 h-8 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"&gt;
                                        &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l9-5-9-5-9 5 9 5zm0 0v6m0-6L10 14" /&gt;
                                    &lt;/svg&gt;
                                &lt;/div&gt;
                                &lt;div&gt;
                                    &lt;h1 class="font-black text-lg sm:text-xl tracking-tight text-white flex items-center gap-2"&gt;
                                        E-RAPOR PKL &lt;span class="bg-emerald-500 text-slate-950 text-[10px] px-2 py-0.5 rounded font-black"&gt;TJKT 2&lt;/span&gt;
                                    &lt;/h1&gt;
                                    &lt;p class="text-xs text-slate-400"&gt;SMK Negeri 1 Tuntang - Tahun Pelajaran 2025/2026&lt;/p&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            
                            &lt;nav class="flex flex-wrap items-center gap-1.5 bg-slate-900/80 p-1.5 rounded-xl border border-slate-800"&gt;
                                &lt;button 
                                    onClick={() =&gt; setActiveTab("preview")}
                                    class={`px-4 py-2 rounded-lg font-bold text-xs transition-all ${activeTab === "preview" ? "bg-emerald-500 text-slate-950" : "hover:text-white text-slate-400"}`}
                                &gt;
                                    Pratinjau Rapor
                                &lt;/button&gt;
                                &lt;button 
                                    onClick={() =&gt; setActiveTab("dashboard")}
                                    class={`px-4 py-2 rounded-lg font-bold text-xs transition-all ${activeTab === "dashboard" ? "bg-emerald-500 text-slate-950" : "hover:text-white text-slate-400"}`}
                                &gt;
                                    Leger Kelas
                                &lt;/button&gt;
                                &lt;button 
                                    onClick={() =&gt; setActiveTab("editor")}
                                    class={`px-4 py-2 rounded-lg font-bold text-xs transition-all ${activeTab === "editor" ? "bg-emerald-500 text-slate-950" : "hover:text-white text-slate-400"}`}
                                &gt;
                                    Ubah Nilai
                                &lt;/button&gt;
                                &lt;button 
                                    onClick={() =&gt; setActiveTab("settings")}
                                    class={`px-4 py-2 rounded-lg font-bold text-xs transition-all ${activeTab === "settings" ? "bg-emerald-500 text-slate-950" : "hover:text-white text-slate-400"}`}
                                &gt;
                                    Kop &amp; Penandatangan
                                &lt;/button&gt;
                            &lt;/nav&gt;
                        &lt;/div&gt;
                    &lt;/header&gt;

                    {/* Toast Notification */}
                    {feedbackMsg &amp;&amp; (
                        &lt;div class="fixed bottom-6 right-6 z-50 bg-emerald-500 text-slate-950 font-bold px-5 py-3 rounded-xl shadow-2xl flex items-center gap-2 border border-emerald-400/30"&gt;
                            &lt;i data-lucide="check-circle" class="w-5 h-5"&gt;&lt;/i&gt;
                            &lt;span class="text-xs"&gt;{feedbackMsg}&lt;/span&gt;
                        &lt;/div&gt;
                    )}

                    {/* Kontainer Kerja Utama */}
                    &lt;main class="flex-grow max-w-7xl w-full mx-auto px-4 py-6"&gt;
                        
                        {/* Tab Pratinjau Rapor (Page 1 &amp; Page 2 Virtual) */}
                        {activeTab === "preview" &amp;&amp; (
                            &lt;div class="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start"&gt;
                                
                                {/* Sidebar Daftar Siswa */}
                                &lt;div class="lg:col-span-1 bg-slate-900 border border-slate-800 rounded-2xl p-4 space-y-3 max-h-[80vh] overflow-y-auto no-print"&gt;
                                    &lt;div class="relative mb-2"&gt;
                                        &lt;i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500"&gt;&lt;/i&gt;
                                        &lt;input 
                                            type="text" 
                                            placeholder="Cari murid..." 
                                            value={searchQuery}
                                            onChange={(e) =&gt; setSearchQuery(e.target.value)}
                                            class="w-full pl-9 pr-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs focus:outline-none focus:border-emerald-500 transition-all text-white font-medium"
                                        /&gt;
                                    &lt;/div&gt;
                                    &lt;div class="space-y-1"&gt;
                                        {filteredStudents.map(st =&gt; (
                                            &lt;button 
                                                key={st.id}
                                                onClick={() =&gt; setSelectedStudentId(st.id)}
                                                class={`w-full text-left px-3 py-2 rounded-xl transition flex items-center justify-between text-xs font-semibold ${selectedStudentId === st.id ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30" : "hover:bg-slate-800 text-slate-300 border border-transparent"}`}
                                            &gt;
                                                &lt;span class="truncate pr-2"&gt;{st.name}&lt;/span&gt;
                                                &lt;span class="font-mono text-[10px] opacity-60 bg-slate-950 px-1.5 py-0.5 rounded"&gt;{st.nis}&lt;/span&gt;
                                            &lt;/button&gt;
                                        ))}
                                    &lt;/div&gt;
                                &lt;/div&gt;

                                {/* Viewer Lembaran Raport */}
                                &lt;div class="lg:col-span-3 space-y-6"&gt;
                                    &lt;div class="flex flex-col sm:flex-row items-center justify-between no-print bg-slate-900 border border-slate-800 p-4 rounded-2xl gap-4"&gt;
                                        &lt;div class="flex items-center gap-3"&gt;
                                            &lt;div class="bg-emerald-500/10 p-2 rounded-xl text-emerald-400"&gt;
                                                &lt;i data-lucide="printer" class="w-5 h-5"&gt;&lt;/i&gt;
                                            &lt;/div&gt;
                                            &lt;div&gt;
                                                &lt;h4 class="font-bold text-sm text-white"&gt;Pratinjau Kertas Rapor (F4 Single-Page)&lt;/h4&gt;
                                                &lt;p class="text-[11px] text-slate-400"&gt;Siap diunduh langsung sebagai berkas PDF F4 atau dicetak fisik.&lt;/p&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class="flex flex-wrap items-center gap-2"&gt;
                                            &lt;button 
                                                onClick={() =&gt; setFontStyle(fontStyle === "serif" ? "sans" : "serif")}
                                                class="px-3 py-1.5 border border-slate-800 hover:bg-slate-800 rounded-lg text-xs font-semibold"
                                            &gt;
                                                Font: {fontStyle === "serif" ? "Times New Roman" : "Inter"}
                                            &lt;/button&gt;
                                            &lt;button 
                                                onClick={handleDownloadPDF}
                                                disabled={isExporting}
                                                class="px-4 py-2 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-800 text-slate-950 rounded-xl text-xs font-black transition flex items-center gap-1.5 shadow-lg shadow-amber-500/10"
                                            &gt;
                                                {isExporting ? "Memproses..." : "Unduh PDF (F4)"}
                                            &lt;/button&gt;
                                            &lt;button 
                                                onClick={() =&gt; window.print()}
                                                class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-slate-950 rounded-xl text-xs font-black transition flex items-center gap-1.5 shadow-lg shadow-emerald-500/10"
                                            &gt;
                                                Cetak Rapor
                                            &lt;/button&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;

                                    {/* Zona Pratinjau Kertas F4 */}
                                    &lt;div class="preview-container" id="print-area"&gt;
                                        
                                        &lt;div class={`preview-pane print-page ${fontStyle === "serif" ? "font-times" : ""}`}&gt;
                                            {/* Bagian Atas / Header */}
                                            &lt;div&gt;
                                                {/* Kop Sekolah Utama */}
                                                &lt;div class="kop-border border-b-[4px] border-double border-black pb-2 text-center flex items-center justify-between"&gt;
                                                    &lt;div class="w-14 h-14 flex-shrink-0 flex items-center justify-center relative group"&gt;
                                                        &lt;img src={logoLeft} alt="Logo Kiri" class="logo-img" /&gt;
                                                        
                                                        {/* Input mengambang cepat untuk ganti logo kiri */}
                                                        &lt;label class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center rounded cursor-pointer no-print text-[9px] text-white font-bold text-center p-1"&gt;
                                                            Ganti
                                                            &lt;input type="file" accept="image/*" class="hidden" onChange={(e) =&gt; handleLogoUpload(e, 'left')} /&gt;
                                                        &lt;/label&gt;
                                                    &lt;/div&gt;
                                                    
                                                    &lt;div class="flex-grow text-center px-4"&gt;
                                                        &lt;h2 class="font-bold text-[10pt] uppercase tracking-wide"&gt;Pemerintah Provinsi Jawa Tengah&lt;/h2&gt;
                                                        &lt;h2 class="font-bold text-[11pt] uppercase tracking-wider"&gt;Dinas Pendidikan&lt;/h2&gt;
                                                        &lt;h1 class="font-bold text-[13pt] tracking-normal"&gt;{schoolConfig.schoolName}&lt;/h1&gt;
                                                        &lt;p class="text-[7pt] leading-snug mt-1 font-sans text-slate-700"&gt;
                                                            {schoolConfig.address}&lt;br /&gt;
                                                            Telepon: {schoolConfig.phone} Kode Pos: {schoolConfig.postalCode} Pos-el: {schoolConfig.email} Laman: {schoolConfig.website}
                                                        &lt;/p&gt;
                                                    &lt;/div&gt;

                                                    &lt;div class="w-14 h-14 flex-shrink-0 flex items-center justify-center relative group"&gt;
                                                        &lt;img src={logoRight} alt="Logo Kanan" class="logo-img" /&gt;
                                                        
                                                        {/* Input mengambang cepat untuk ganti logo kanan */}
                                                        &lt;label class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition flex items-center justify-center rounded cursor-pointer no-print text-[9px] text-white font-bold text-center p-1"&gt;
                                                            Ganti
                                                            &lt;input type="file" accept="image/*" class="hidden" onChange={(e) =&gt; handleLogoUpload(e, 'right')} /&gt;
                                                        &lt;/label&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;

                                                {/* Judul Dokumen */}
                                                &lt;div class="text-center my-3"&gt;
                                                    &lt;h3 class="font-bold text-[10.5pt] uppercase tracking-wide underline"&gt;Laporan Hasil Praktik Kerja Lapangan (PKL)&lt;/h3&gt;
                                                &lt;/div&gt;

                                                {/* Informasi / Metadata Siswa */}
                                                &lt;div class="grid grid-cols-2 gap-x-6 text-[9pt] mb-3 pb-1 border-b border-dashed border-slate-300"&gt;
                                                    &lt;div class="space-y-0.5"&gt;
                                                        &lt;div class="flex"&gt;&lt;span class="w-32"&gt;Nama Peserta Didik&lt;/span&gt;&lt;span class="flex-grow"&gt;: &lt;strong&gt;{currentStudent.name}&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
                                                        &lt;div class="flex"&gt;&lt;span class="w-32"&gt;Sekolah&lt;/span&gt;&lt;span class="flex-grow"&gt;: {schoolConfig.schoolName}&lt;/span&gt;&lt;/div&gt;
                                                        &lt;div class="flex"&gt;&lt;span class="w-32"&gt;Kelas&lt;/span&gt;&lt;span class="flex-grow"&gt;: XII TJKT 2&lt;/span&gt;&lt;/div&gt;
                                                        &lt;div class="flex"&gt;&lt;span class="w-32"&gt;Pembimbing&lt;/span&gt;&lt;span class="flex-grow"&gt;: {currentStudent.advisor}&lt;/span&gt;&lt;/div&gt;
                                                    &lt;/div&gt;
                                                    &lt;div class="space-y-0.5"&gt;
                                                        &lt;div class="flex"&gt;&lt;span class="w-32"&gt;Tempat PKL&lt;/span&gt;&lt;span class="flex-grow"&gt;: &lt;strong&gt;{currentStudent.pklLocation}&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
                                                        &lt;div class="flex"&gt;&lt;span class="w-32"&gt;Jurusan&lt;/span&gt;&lt;span class="flex-grow"&gt;: TJKT&lt;/span&gt;&lt;/div&gt;
                                                        &lt;div class="flex"&gt;&lt;span class="w-32"&gt;NIS&lt;/span&gt;&lt;span class="flex-grow"&gt;: {currentStudent.nis}&lt;/span&gt;&lt;/div&gt;
                                                        &lt;div class="flex"&gt;&lt;span class="w-32"&gt;Alamat&lt;/span&gt;&lt;span class="flex-grow" style={{fontSize: '8.5pt'}}&gt;: {currentStudent.pklAddress}&lt;/span&gt;&lt;/div&gt;
                                                        &lt;div class="flex"&gt;&lt;span class="w-32"&gt;Fase / Semester&lt;/span&gt;&lt;span class="flex-grow"&gt;: {schoolConfig.semester}&lt;/span&gt;&lt;/div&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;

                                                {}
                                                &lt;table class="w-full text-left border-collapse border border-black text-[8pt] leading-snug"&gt;
                                                    &lt;thead&gt;
                                                        &lt;tr class="bg-slate-100 font-bold text-center"&gt;
                                                            &lt;th class="border border-black py-1 px-1 w-8 text-center"&gt;NO&lt;/th&gt;
                                                            &lt;th class="border border-black py-1 px-2"&gt;ASPEK NON TEKNIS / TEKNIS&lt;br/&gt;&lt;span class="text-[7.5pt] font-normal italic"&gt;(Pendidikan, Etos Kerja &amp; Kompetensi Kejuruan)&lt;/span&gt;&lt;/th&gt;
                                                            &lt;th class="border border-black py-1 px-1 w-12 text-center"&gt;NILAI&lt;/th&gt;
                                                            &lt;th class="border border-black py-1 px-2 w-[45%] text-center"&gt;CAPAIAN KOMPETENSI&lt;/th&gt;
                                                        &lt;/tr&gt;
                                                    &lt;/thead&gt;
                                                    &lt;tbody&gt;
                                                        {/* Aspek Non-Teknis Header */}
                                                        &lt;tr class="bg-slate-100/50 font-bold"&gt;
                                                            &lt;td class="border border-black text-center py-0.5"&gt;I&lt;/td&gt;
                                                            &lt;td class="border border-black py-0.5 px-2" colspan="3"&gt;ASPEK NON TEKNIS (Pendidikan dan Etos Kerja)&lt;/td&gt;
                                                        &lt;/tr&gt;
                                                        {Object.entries(competencyMetadata)
                                                            .filter(([_, value]) =&gt; value.group === "Non-Teknis")
                                                            .map(([key, meta], idx) =&gt; (
                                                                &lt;tr key={key}&gt;
                                                                    &lt;td class="border border-black text-center py-0.5"&gt;{idx + 1}&lt;/td&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 font-medium"&gt;{meta.code} {meta.name}&lt;/td&gt;
                                                                    &lt;td class="border border-black text-center font-bold"&gt;{currentStudent.grades[key] || "-"}&lt;/td&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 text-[7.5pt]"&gt;
                                                                        {generateCompetenceFeedback(key, currentStudent.grades[key])}
                                                                    &lt;/td&gt;
                                                                &lt;/tr&gt;
                                                            ))
                                                        }

                                                        {/* Aspek Teknis Header */}
                                                        &lt;tr class="bg-slate-100/50 font-bold"&gt;
                                                            &lt;td class="border border-black text-center py-0.5"&gt;II&lt;/td&gt;
                                                            &lt;td class="border border-black py-0.5 px-2" colspan="3"&gt;ASPEK TEKNIS (Pelatihan Ketrampilan Kejuruan)&lt;/td&gt;
                                                        &lt;/tr&gt;
                                                        {Object.entries(competencyMetadata)
                                                            .filter(([_, value]) =&gt; value.group === "Teknis")
                                                            .map(([key, meta], idx) =&gt; (
                                                                &lt;tr key={key}&gt;
                                                                    &lt;td class="border border-black text-center py-0.5"&gt;{idx + 1}&lt;/td&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 font-medium"&gt;{meta.code} {meta.name}&lt;/td&gt;
                                                                    &lt;td class="border border-black text-center font-bold"&gt;{currentStudent.grades[key] || "-"}&lt;/td&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 text-[7.5pt]"&gt;
                                                                        {generateCompetenceFeedback(key, currentStudent.grades[key])}
                                                                    &lt;/td&gt;
                                                                &lt;/tr&gt;
                                                            ))
                                                        }

                                                        {/* Total Nilai &amp; Rata-rata */}
                                                        &lt;tr class="font-bold bg-slate-100"&gt;
                                                            &lt;td class="border border-black text-right py-1 px-2" colspan="2"&gt;Total Nilai&lt;/td&gt;
                                                            &lt;td class="border border-black text-center font-bold"&gt;{currentStats.total}&lt;/td&gt;
                                                            &lt;td class="border border-black text-slate-500 py-1 px-2 font-normal text-[7.5pt]"&gt;Akumulasi nilai keseluruhan kompetensi&lt;/td&gt;
                                                        &lt;/tr&gt;
                                                        &lt;tr class="font-bold bg-slate-100"&gt;
                                                            &lt;td class="border border-black text-right py-1 px-2" colspan="2"&gt;Hasil Penilaian Rata-rata&lt;/td&gt;
                                                            &lt;td class="border border-black text-center font-bold"&gt;{currentStats.average}&lt;/td&gt;
                                                            &lt;td class="border border-black py-1 px-2 text-[8pt]"&gt;
                                                                Kualifikasi Predikat: &lt;span class="font-bold text-black"&gt;{currentStats.average &gt;= 90 ? "SANGAT BAIK" : currentStats.average &gt;= 80 ? "BAIK" : "CUKUP"}&lt;/span&gt;
                                                            &lt;/td&gt;
                                                        &lt;/tr&gt;
                                                    &lt;/tbody&gt;
                                                &lt;/table&gt;
                                            &lt;/div&gt;

                                            {/* Bagian Bawah / Tanda Tangan &amp; Presensi */}
                                            &lt;div&gt;
                                                {/* Baris Presensi dan Tanggal */}
                                                &lt;div class="flex justify-between items-start mt-3"&gt;
                                                    &lt;div class="w-1/2"&gt;
                                                        &lt;table class="w-full text-left border-collapse border border-black text-[8pt]"&gt;
                                                            &lt;thead&gt;
                                                                &lt;tr class="bg-slate-100 font-bold text-center"&gt;
                                                                    &lt;th class="border border-black py-0.5 px-2" colspan="2"&gt;KETIDAKHADIRAN (PRESENSI)&lt;/th&gt;
                                                                &lt;/tr&gt;
                                                            &lt;/thead&gt;
                                                            &lt;tbody&gt;
                                                                &lt;tr&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 font-medium"&gt;Sakit&lt;/td&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 text-center font-bold"&gt;{currentStudent.attendance?.sakit || 0} hari&lt;/td&gt;
                                                                &lt;/tr&gt;
                                                                &lt;tr&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 font-medium"&gt;Izin&lt;/td&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 text-center font-bold"&gt;{currentStudent.attendance?.izin || 0} hari&lt;/td&gt;
                                                                &lt;/tr&gt;
                                                                &lt;tr&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 font-medium"&gt;Tanpa Keterangan&lt;/td&gt;
                                                                    &lt;td class="border border-black py-0.5 px-2 text-center font-bold"&gt;{currentStudent.attendance?.alpha || 0} hari&lt;/td&gt;
                                                                &lt;/tr&gt;
                                                            &lt;/tbody&gt;
                                                        &lt;/table&gt;
                                                    &lt;/div&gt;
                                                    &lt;div class="text-right text-[8.5pt] font-medium"&gt;
                                                        &lt;p&gt;Tuntang, {schoolConfig.printDate}&lt;/p&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;

                                                {/* Baris Tanda Tangan Ringkas 2 Kolom Sejajar (DUDI &amp; Kepala Sekolah Dihapus) */}
                                                &lt;div class="flex justify-between text-[8.5pt] mt-8 text-center"&gt;
                                                    &lt;div class="w-5/12"&gt;
                                                        &lt;p class="mb-14"&gt;Orang Tua/Wali Peserta Didik,&lt;/p&gt;
                                                        &lt;p class="font-bold border-b border-black w-3/4 mx-auto pb-0.5"&gt;&lt;/p&gt;
                                                    &lt;/div&gt;

                                                    &lt;div class="w-5/12"&gt;
                                                        &lt;p class="mb-14"&gt;Wali Kelas,&lt;/p&gt;
                                                        &lt;p class="font-bold underline uppercase"&gt;{schoolConfig.homeroomTeacher}&lt;/p&gt;
                                                        &lt;p class="text-[7.5pt] font-mono mt-0.5"&gt;NIP. {schoolConfig.homeroomNip}&lt;/p&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;

                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        )}

                        {/* Tab Leger Kelas Lengkap */}
                        {activeTab === "dashboard" &amp;&amp; (
                            &lt;div class="space-y-6"&gt;
                                {/* Filter &amp; Pencarian */}
                                &lt;div class="bg-slate-900 rounded-2xl p-6 border border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4"&gt;
                                    &lt;div class="flex-grow w-full md:max-w-md relative"&gt;
                                        &lt;i data-lucide="search" class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500"&gt;&lt;/i&gt;
                                        &lt;input 
                                            type="text" 
                                            placeholder="Cari murid, tempat PKL, atau pembimbing..." 
                                            value={searchQuery}
                                            onChange={(e) =&gt; setSearchQuery(e.target.value)}
                                            class="w-full pl-10 pr-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all text-sm text-white"
                                        /&gt;
                                    &lt;/div&gt;
                                    &lt;div class="flex flex-wrap items-center gap-3 w-full md:w-auto"&gt;
                                        &lt;div class="flex items-center gap-2"&gt;
                                            &lt;span class="text-xs font-bold text-slate-400 uppercase"&gt;Lokasi Industri:&lt;/span&gt;
                                            &lt;select 
                                                value={filterLocation}
                                                onChange={(e) =&gt; setFilterLocation(e.target.value)}
                                                class="bg-slate-950 border border-slate-800 text-sm rounded-xl py-2 px-3 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-slate-300 font-medium"
                                            &gt;
                                                {uniqueLocations.map(loc =&gt; (
                                                    &lt;option key={loc} value={loc}&gt;{loc === "ALL" ? "Semua Lokasi" : loc}&lt;/option&gt;
                                                ))}
                                            &lt;/select&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;

                                {/* Tabel Leger Utama */}
                                &lt;div class="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden"&gt;
                                    &lt;div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between"&gt;
                                        &lt;div&gt;
                                            &lt;h3 class="font-bold text-lg text-white"&gt;Leger Rapor Kelas XI TJKT 2&lt;/h3&gt;
                                            &lt;p class="text-xs text-slate-400"&gt;Menampilkan {filteredStudents.length} siswa sesuai kriteria&lt;/p&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;

                                    &lt;div class="overflow-x-auto"&gt;
                                        &lt;table class="w-full text-left text-sm text-slate-300"&gt;
                                            &lt;thead class="bg-slate-950 border-b border-slate-800 text-xs font-bold text-slate-400 uppercase tracking-wider"&gt;
                                                &lt;tr&gt;
                                                    &lt;th class="py-3.5 px-4 text-center w-12 border-0"&gt;NIS&lt;/th&gt;
                                                    &lt;th class="py-3.5 px-4 border-0"&gt;Nama Peserta Didik&lt;/th&gt;
                                                    &lt;th class="py-3.5 px-4 text-center border-0"&gt;Rata-rata&lt;/th&gt;
                                                    &lt;th class="py-3.5 px-4 text-center border-0"&gt;Rangking&lt;/th&gt;
                                                    &lt;th class="py-3.5 px-4 text-center border-0"&gt;Jumlah Nilai&lt;/th&gt;
                                                    &lt;th class="py-3.5 px-4 border-0"&gt;Tempat PKL&lt;/th&gt;
                                                    &lt;th class="py-3.5 px-4 border-0"&gt;Pembimbing&lt;/th&gt;
                                                    &lt;th class="py-3.5 px-4 text-center border-0"&gt;Aksi&lt;/th&gt;
                                                &lt;/tr&gt;
                                            &lt;/thead&gt;
                                            &lt;tbody class="divide-y divide-slate-800/60"&gt;
                                                {filteredStudents.map(st =&gt; {
                                                    const stats = calculateStats(st);
                                                    return (
                                                        &lt;tr 
                                                            key={st.id} 
                                                            class={`hover:bg-slate-800/40 transition ${selectedStudentId === st.id ? "bg-emerald-500/5 font-semibold text-emerald-400" : ""}`}
                                                        &gt;
                                                            &lt;td class="py-3 px-4 text-center text-slate-500 font-mono text-xs border-0"&gt;{st.nis}&lt;/td&gt;
                                                            &lt;td class="py-3 px-4 border-0"&gt;
                                                                &lt;div class="font-bold text-white"&gt;{st.name}&lt;/div&gt;
                                                                &lt;div class="text-[10px] text-slate-500 tracking-wider font-mono"&gt;NISN: {st.nisn}&lt;/div&gt;
                                                            &lt;/td&gt;
                                                            &lt;td class="py-3 px-4 text-center border-0"&gt;
                                                                &lt;span class={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold ${stats.average &gt;= 90 ? "bg-emerald-500/10 text-emerald-400" : "bg-blue-500/10 text-blue-400"}`}&gt;
                                                                    {stats.average || "-"}
                                                                &lt;/span&gt;
                                                            &lt;/td&gt;
                                                            &lt;td class="py-3 px-4 text-center font-bold text-slate-200 border-0"&gt;
                                                                {getRank(st.id)}
                                                            &lt;/td&gt;
                                                            &lt;td class="py-3 px-4 text-center font-semibold text-slate-300 border-0"&gt;{stats.total || "-"}&lt;/td&gt;
                                                            &lt;td class="py-3 px-4 border-0"&gt;
                                                                &lt;span class="text-xs bg-slate-950 border border-slate-800 px-2 py-1 rounded-md text-slate-300 font-medium"&gt;{st.pklLocation}&lt;/span&gt;
                                                            &lt;/td&gt;
                                                            &lt;td class="py-3 px-4 text-xs font-medium text-slate-400 border-0"&gt;{st.advisor}&lt;/td&gt;
                                                            &lt;td class="py-3 px-4 text-center border-0"&gt;
                                                                &lt;button 
                                                                    onClick={() =&gt; { setSelectedStudentId(st.id); setActiveTab("preview"); }}
                                                                    class="p-1.5 hover:bg-emerald-500 hover:text-slate-950 text-emerald-400 rounded-lg transition"
                                                                &gt;
                                                                    Pratinjau
                                                                &lt;/button&gt;
                                                            &lt;/td&gt;
                                                        &lt;/tr&gt;
                                                    );
                                                })}
                                            &lt;/tbody&gt;
                                        &lt;/table&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        )}

                        {/* Tab Input/Edit Nilai Rapor */}
                        {activeTab === "editor" &amp;&amp; (
                            &lt;div class="bg-slate-900 rounded-2xl p-6 border border-slate-800 max-w-4xl mx-auto space-y-6"&gt;
                                &lt;div class="flex flex-col sm:flex-row sm:items-center justify-between border-b border-slate-800 pb-4 gap-3"&gt;
                                    &lt;div&gt;
                                        &lt;h3 class="font-black text-xl text-white"&gt;Input &amp; Koreksi Nilai PKL&lt;/h3&gt;
                                        &lt;p class="text-xs text-slate-400"&gt;Ubah nilai Aspek Teknis &amp; Non-Teknis secara langsung&lt;/p&gt;
                                    &lt;/div&gt;
                                    &lt;div class="flex items-center gap-2"&gt;
                                        &lt;label class="text-xs font-bold text-slate-400 uppercase"&gt;Pilih Siswa:&lt;/label&gt;
                                        &lt;select 
                                            value={selectedStudentId}
                                            onChange={(e) =&gt; setSelectedStudentId(Number(e.target.value))}
                                            class="bg-slate-950 border border-slate-800 text-sm rounded-xl py-1.5 px-3 font-semibold text-slate-300 focus:outline-none focus:border-emerald-500"
                                        &gt;
                                            {students.map(st =&gt; (
                                                &lt;option key={st.id} value={st.id}&gt;{st.name} ({st.nis})&lt;/option&gt;
                                            ))}
                                        &lt;/select&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;

                                {editingStudent &amp;&amp; (
                                    &lt;div class="space-y-6"&gt;
                                        {/* Aspek Non Teknis */}
                                        &lt;div&gt;
                                            &lt;h4 class="font-bold text-sm text-emerald-400 uppercase tracking-wider mb-3 bg-slate-950 border border-slate-800 px-3 py-1.5 rounded-lg"&gt;
                                                I. Aspek Non-Teknis (Pendidikan &amp; Etos Kerja)
                                            &lt;/h4&gt;
                                            &lt;div class="grid grid-cols-1 md:grid-cols-2 gap-4"&gt;
                                                {Object.entries(competencyMetadata)
                                                    .filter(([_, value]) =&gt; value.group === "Non-Teknis")
                                                    .map(([key, meta]) =&gt; (
                                                        &lt;div key={key} class="flex items-center justify-between p-3 bg-slate-950 border border-slate-800 rounded-xl"&gt;
                                                            &lt;div class="flex-grow pr-3"&gt;
                                                                &lt;span class="text-xs font-bold text-emerald-400 font-mono"&gt;{meta.code}&lt;/span&gt;
                                                                &lt;p class="text-xs font-bold text-slate-200"&gt;{meta.name}&lt;/p&gt;
                                                            &lt;/div&gt;
                                                            &lt;input 
                                                                type="number" 
                                                                min="0" 
                                                                max="100" 
                                                                value={editingStudent.grades[key]}
                                                                onChange={(e) =&gt; {
                                                                    const val = Number(e.target.value);
                                                                    setEditingStudent(prev =&gt; ({
                                                                        ...prev,
                                                                        grades: { ...prev.grades, [key]: val }
                                                                    }));
                                                                }}
                                                                class="w-16 px-2.5 py-1.5 bg-slate-900 border border-slate-800 rounded-lg text-center font-bold text-white focus:outline-none focus:border-emerald-500"
                                                            /&gt;
                                                        &lt;/div&gt;
                                                    ))
                                                }
                                            &lt;/div&gt;
                                        &lt;/div&gt;

                                        {/* Aspek Teknis */}
                                        &lt;div&gt;
                                            &lt;h4 class="font-bold text-sm text-blue-400 uppercase tracking-wider mb-3 bg-slate-950 border border-slate-800 px-3 py-1.5 rounded-lg"&gt;
                                                II. Aspek Teknis (Kompetensi Kejuruan TJKT)
                                            &lt;/h4&gt;
                                            &lt;div class="grid grid-cols-1 md:grid-cols-2 gap-4"&gt;
                                                {Object.entries(competencyMetadata)
                                                    .filter(([_, value]) =&gt; value.group === "Teknis")
                                                    .map(([key, meta]) =&gt; (
                                                        &lt;div key={key} class="flex items-center justify-between p-3 bg-slate-950 border border-slate-800 rounded-xl"&gt;
                                                            &lt;div class="flex-grow pr-3"&gt;
                                                                &lt;span class="text-xs font-bold text-blue-400 font-mono"&gt;{meta.code}&lt;/span&gt;
                                                                &lt;p class="text-xs font-bold text-slate-200"&gt;{meta.name}&lt;/p&gt;
                                                            &lt;/div&gt;
                                                            &lt;input 
                                                                type="number" 
                                                                min="0" 
                                                                max="100" 
                                                                value={editingStudent.grades[key]}
                                                                onChange={(e) =&gt; {
                                                                    const val = Number(e.target.value);
                                                                    setEditingStudent(prev =&gt; ({
                                                                        ...prev,
                                                                        grades: { ...prev.grades, [key]: val }
                                                                    }));
                                                                }}
                                                                class="w-16 px-2.5 py-1.5 bg-slate-900 border border-slate-800 rounded-lg text-center font-bold text-white focus:outline-none focus:border-blue-500"
                                                            /&gt;
                                                        &lt;/div&gt;
                                                    ))
                                                }
                                            &lt;/div&gt;
                                        &lt;/div&gt;

                                        {/* Ketidakhadiran */}
                                        &lt;div&gt;
                                            &lt;h4 class="font-bold text-sm text-amber-400 uppercase tracking-wider mb-3 bg-slate-950 border border-slate-800 px-3 py-1.5 rounded-lg"&gt;
                                                III. Kehadiran &amp; Absensi (Hari)
                                            &lt;/h4&gt;
                                            &lt;div class="grid grid-cols-3 gap-4"&gt;
                                                &lt;div class="p-3 bg-slate-950 border border-slate-800 rounded-xl text-center"&gt;
                                                    &lt;label class="block text-xs font-bold text-slate-400 mb-1.5"&gt;Sakit&lt;/label&gt;
                                                    &lt;input 
                                                        type="number" 
                                                        min="0"
                                                        value={editingStudent.attendance?.sakit || 0}
                                                        onChange={(e) =&gt; {
                                                            const val = Number(e.target.value);
                                                            setEditingStudent(prev =&gt; ({
                                                                ...prev,
                                                                attendance: { ...prev.attendance, sakit: val }
                                                            }));
                                                        }}
                                                        class="w-full max-w-[100px] text-center px-2 py-1.5 bg-slate-900 border border-slate-800 rounded-lg text-white font-bold"
                                                    /&gt;
                                                &lt;/div&gt;
                                                &lt;div class="p-3 bg-slate-950 border border-slate-800 rounded-xl text-center"&gt;
                                                    &lt;label class="block text-xs font-bold text-slate-400 mb-1.5"&gt;Izin&lt;/label&gt;
                                                    &lt;input 
                                                        type="number" 
                                                        min="0"
                                                        value={editingStudent.attendance?.izin || 0}
                                                        onChange={(e) =&gt; {
                                                            const val = Number(e.target.value);
                                                            setEditingStudent(prev =&gt; ({
                                                                ...prev,
                                                                attendance: { ...prev.attendance, izin: val }
                                                            }));
                                                        }}
                                                        class="w-full max-w-[100px] text-center px-2 py-1.5 bg-slate-900 border border-slate-800 rounded-lg text-white font-bold"
                                                    /&gt;
                                                &lt;/div&gt;
                                                &lt;div class="p-3 bg-slate-950 border border-slate-800 rounded-xl text-center"&gt;
                                                    &lt;label class="block text-xs font-bold text-slate-400 mb-1.5"&gt;Tanpa Keterangan&lt;/label&gt;
                                                    &lt;input 
                                                        type="number" 
                                                        min="0"
                                                        value={editingStudent.attendance?.alpha || 0}
                                                        onChange={(e) =&gt; {
                                                            const val = Number(e.target.value);
                                                            setEditingStudent(prev =&gt; ({
                                                                ...prev,
                                                                attendance: { ...prev.attendance, alpha: val }
                                                            }));
                                                        }}
                                                        class="w-full max-w-[100px] text-center px-2 py-1.5 bg-slate-900 border border-slate-800 rounded-lg text-red-400 font-bold"
                                                    /&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;

                                        &lt;div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-800"&gt;
                                            &lt;button 
                                                onClick={handleUpdateGrades}
                                                class="px-5 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-slate-950 rounded-xl text-xs font-black transition flex items-center gap-2"
                                            &gt;
                                                Simpan Rapor Siswa
                                            &lt;/button&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                )}
                            &lt;/div&gt;
                        )}

                        {/* Tab Pengaturan Informasi Umum */}
                        {activeTab === "settings" &amp;&amp; (
                            &lt;div class="bg-slate-900 rounded-2xl p-6 border border-slate-800 max-w-3xl mx-auto space-y-6"&gt;
                                &lt;div class="border-b border-slate-800 pb-3"&gt;
                                    &lt;h3 class="font-black text-lg text-white"&gt;Konfigurasi Rapor PKL&lt;/h3&gt;
                                    &lt;p class="text-xs text-slate-400"&gt;Atur logo kop surat, wali kelas, tanggal, dan fase semester&lt;/p&gt;
                                &lt;/div&gt;

                                {/* Bagian Unggah Logo Kustom di Pengaturan */}
                                &lt;div&gt;
                                    &lt;h4 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3"&gt;Identitas Visual / Logo KOP&lt;/h4&gt;
                                    &lt;div class="grid grid-cols-1 md:grid-cols-2 gap-4"&gt;
                                        &lt;div class="p-4 bg-slate-950 border border-slate-800 rounded-xl flex items-center gap-4"&gt;
                                            &lt;div class="w-12 h-12 bg-white rounded p-1 flex items-center justify-center flex-shrink-0"&gt;
                                                &lt;img src={logoLeft} alt="Logo Kiri" class="max-h-full max-w-full object-contain" /&gt;
                                            &lt;/div&gt;
                                            &lt;div class="flex-grow"&gt;
                                                &lt;label class="block text-xs font-bold text-slate-300 mb-1"&gt;Logo Kiri KOP (Pemprov Jateng)&lt;/label&gt;
                                                &lt;input 
                                                    type="file" 
                                                    accept="image/*" 
                                                    onChange={(e) =&gt; handleLogoUpload(e, 'left')}
                                                    class="block w-full text-xs text-slate-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-emerald-500 file:text-slate-950 hover:file:bg-emerald-400 cursor-pointer"
                                                /&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;

                                        &lt;div class="p-4 bg-slate-950 border border-slate-800 rounded-xl flex items-center gap-4"&gt;
                                            &lt;div class="w-12 h-12 bg-white rounded p-1 flex items-center justify-center flex-shrink-0"&gt;
                                                &lt;img src={logoRight} alt="Logo Kanan" class="max-h-full max-w-full object-contain" /&gt;
                                            &lt;/div&gt;
                                            &lt;div class="flex-grow"&gt;
                                                &lt;label class="block text-xs font-bold text-slate-300 mb-1"&gt;Logo Kanan KOP (Logo Sekolah)&lt;/label&gt;
                                                &lt;input 
                                                    type="file" 
                                                    accept="image/*" 
                                                    onChange={(e) =&gt; handleLogoUpload(e, 'right')}
                                                    class="block w-full text-xs text-slate-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-emerald-500 file:text-slate-950 hover:file:bg-emerald-400 cursor-pointer"
                                                /&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;

                                &lt;div class="grid grid-cols-1 md:grid-cols-2 gap-5"&gt;
                                    &lt;div&gt;
                                        &lt;label class="block text-xs font-bold text-slate-400 uppercase mb-1"&gt;Nama Lembaga / Sekolah&lt;/label&gt;
                                        &lt;input 
                                            type="text" 
                                            value={schoolConfig.schoolName}
                                            onChange={(e) =&gt; setSchoolConfig(prev =&gt; ({ ...prev, schoolName: e.target.value }))}
                                            class="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl focus:border-emerald-500 text-sm font-semibold text-white"
                                        /&gt;
                                    &lt;/div&gt;

                                    &lt;div&gt;
                                        &lt;label class="block text-xs font-bold text-slate-400 uppercase mb-1"&gt;Nama Kepala Sekolah&lt;/label&gt;
                                        &lt;input 
                                            type="text" 
                                            value={schoolConfig.headmasterName}
                                            onChange={(e) =&gt; setSchoolConfig(prev =&gt; ({ ...prev, headmasterName: e.target.value }))}
                                            class="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl focus:border-emerald-500 text-sm font-semibold text-white"
                                        /&gt;
                                    &lt;/div&gt;

                                    &lt;div&gt;
                                        &lt;label class="block text-xs font-bold text-slate-400 uppercase mb-1"&gt;NIP Kepala Sekolah&lt;/label&gt;
                                        &lt;input 
                                            type="text" 
                                            value={schoolConfig.headmasterNip}
                                            onChange={(e) =&gt; setSchoolConfig(prev =&gt; ({ ...prev, headmasterNip: e.target.value }))}
                                            class="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl focus:border-emerald-500 text-sm font-semibold text-white"
                                        /&gt;
                                    &lt;/div&gt;

                                    &lt;div&gt;
                                        &lt;label class="block text-xs font-bold text-slate-400 uppercase mb-1"&gt;Nama Wali Kelas&lt;/label&gt;
                                        &lt;input 
                                            type="text" 
                                            value={schoolConfig.homeroomTeacher}
                                            onChange={(e) =&gt; setSchoolConfig(prev =&gt; ({ ...prev, homeroomTeacher: e.target.value }))}
                                            class="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl focus:border-emerald-500 text-sm font-semibold text-white"
                                        /&gt;
                                    &lt;/div&gt;

                                    &lt;div&gt;
                                        &lt;label class="block text-xs font-bold text-slate-400 uppercase mb-1"&gt;NIP Wali Kelas&lt;/label&gt;
                                        &lt;input 
                                            type="text" 
                                            value={schoolConfig.homeroomNip}
                                            onChange={(e) =&gt; setSchoolConfig(prev =&gt; ({ ...prev, homeroomNip: e.target.value }))}
                                            class="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl focus:border-emerald-500 text-sm font-semibold text-white"
                                        /&gt;
                                    &lt;/div&gt;

                                    &lt;div&gt;
                                        &lt;label class="block text-xs font-bold text-slate-400 uppercase mb-1"&gt;Tempat Penandatanganan&lt;/label&gt;
                                        &lt;input 
                                            type="text" 
                                            value={schoolConfig.printLocation}
                                            onChange={(e) =&gt; setSchoolConfig(prev =&gt; ({ ...prev, printLocation: e.target.value }))}
                                            class="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl focus:border-emerald-500 text-sm font-semibold text-white"
                                        /&gt;
                                    &lt;/div&gt;

                                    &lt;div&gt;
                                        &lt;label class="block text-xs font-bold text-slate-400 uppercase mb-1"&gt;Tanggal Cetak Rapor&lt;/label&gt;
                                        &lt;input 
                                            type="text" 
                                            value={schoolConfig.printDate}
                                            onChange={(e) =&gt; setSchoolConfig(prev =&gt; ({ ...prev, printDate: e.target.value }))}
                                            class="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl focus:border-emerald-500 text-sm font-semibold text-white"
                                        /&gt;
                                    &lt;/div&gt;

                                    &lt;div&gt;
                                        &lt;label class="block text-xs font-bold text-slate-400 uppercase mb-1"&gt;Fase / Semester&lt;/label&gt;
                                        &lt;input 
                                            type="text" 
                                            value={schoolConfig.semester}
                                            onChange={(e) =&gt; setSchoolConfig(prev =&gt; ({ ...prev, semester: e.target.value }))}
                                            class="w-full px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl focus:border-emerald-500 text-sm font-semibold text-white"
                                        /&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;

                                &lt;div class="flex items-center justify-between pt-4 border-t border-slate-800"&gt;
                                    &lt;button 
                                        onClick={() =&gt; {
                                            setLogoLeft(defaultLogoLeftSVG);
                                            setLogoRight(defaultLogoRightSVG);
                                            setFeedbackMsg("Logo KOP berhasil di-reset!");
                                            setTimeout(() =&gt; setFeedbackMsg(""), 3000);
                                        }}
                                        class="px-4 py-2 border border-slate-800 hover:bg-slate-800 rounded-xl text-xs font-bold text-slate-300 transition"
                                    &gt;
                                        Reset Logo KOP saja
                                    &lt;/button&gt;
                                    &lt;button 
                                        onClick={() =&gt; {
                                            setSchoolConfig(initialSchoolConfig);
                                            setLogoLeft(defaultLogoLeftSVG);
                                            setLogoRight(defaultLogoRightSVG);
                                            setFeedbackMsg("Informasi dikembalikan ke default SMKN 1 Tuntang!");
                                            setTimeout(() =&gt; setFeedbackMsg(""), 3000);
                                        }}
                                        class="px-4 py-2 border border-red-500/30 text-red-400 hover:bg-red-500/10 rounded-xl text-xs font-bold transition"
                                    &gt;
                                        Reset Semua Pengaturan Default
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        )}

                    &lt;/main&gt;

                    {/* Footer Layar */}
                    &lt;footer class="bg-slate-950 border-t border-slate-900 py-6 text-center text-xs text-slate-500 no-print"&gt;
                        &lt;p&gt;© 2026 SMK Negeri 1 Tuntang. Dioptimalkan persis dokumen fisik.&lt;/p&gt;
                    &lt;/footer&gt;
                &lt;/div&gt;
            );
        }

        const container = document.getElementById('root');
        const root = ReactDOM.createRoot(container);
        root.render(&lt;App /&gt;);

        // Inisialisasi ikon Lucide
        setTimeout(() =&gt; {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }, 300);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</description><link>http://kitab-investasi.blogspot.com/2026/06/e-raport-pkl.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-6877348685293008822</guid><pubDate>Wed, 24 Jun 2026 06:34:42 +0000</pubDate><atom:updated>2026-06-25T11:34:08.693+07:00</atom:updated><title>RAPORT PKL</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Generator Raport PKL TJKT 2&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&amp;display=swap" rel="stylesheet"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"&gt;
    &lt;/script&gt;
    &lt;style&gt;
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', Arial, sans-serif;
            background: #eef2f7;
            padding: 20px;
            max-width: 900px;
            margin: auto;
        }

        .card {
            background: white;
            padding: 28px 30px;
            border-radius: 24px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
        }

        h2 {
            text-align: center;
            color: #1e4668;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 6px;
            font-size: 24px;
        }

        .sub-title {
            text-align: center;
            color: #4a6f8a;
            font-size: 14px;
            margin-bottom: 20px;
            font-weight: 400;
        }

        .form-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 10px;
        }

        .form-group {
            flex: 1 1 200px;
            min-width: 170px;
        }

        label {
            display: block;
            font-weight: 600;
            font-size: 13px;
            color: #1e4668;
            margin-bottom: 4px;
        }

        input,
        select {
            width: 100%;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid #ccc;
            font-size: 14px;
            font-family: 'Montserrat', Arial, sans-serif;
            background: white;
            transition: 0.2s;
        }

        input:focus,
        select:focus {
            border-color: #2c7da0;
            outline: none;
            box-shadow: 0 0 0 3px rgba(44, 125, 160, 0.15);
        }

        input:disabled,
        select:disabled {
            background: #f1f5f9;
            color: #334;
        }

        .btn-primary {
            background: #2c7da0;
            color: white;
            border: none;
            cursor: pointer;
            font-weight: 700;
            padding: 12px 20px;
            border-radius: 12px;
            font-size: 16px;
            width: 100%;
            transition: 0.2s;
            font-family: 'Montserrat', Arial, sans-serif;
        }

        .btn-primary:hover {
            background: #1f5e7a;
        }

        .btn-primary:disabled {
            background: #94a3b8;
            cursor: not-allowed;
        }

        #preview {
            width: 100%;
            border-radius: 12px;
            margin-top: 14px;
            border: 1px solid #ddd;
            background: #fafafa;
            min-height: 200px;
            object-fit: contain;
        }

        .loading {
            display: none;
            margin-top: 16px;
            color: #1e4668;
            font-weight: 600;
            text-align: center;
            font-size: 15px;
        }

        .student-select-wrap {
            margin-top: 6px;
        }

        .info-note {
            background: #f8faff;
            border-radius: 12px;
            padding: 12px 16px;
            margin: 12px 0 10px 0;
            border: 1px dashed #b6cfe0;
            font-size: 13px;
            color: #2c3e50;
            line-height: 1.6;
        }

        .info-note strong {
            color: #1e4668;
        }

        .badge-jurusan {
            display: inline-block;
            background: #d4e4ed;
            color: #1e4668;
            padding: 2px 12px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 600;
        }

        .upload-area {
            margin-top: 12px;
            padding: 12px;
            border: 2px dashed #b6cfe0;
            border-radius: 12px;
            background: #f8faff;
            text-align: center;
        }

        .upload-area label {
            display: inline-block;
            background: #2c7da0;
            color: white;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 13px;
        }

        .upload-area input[type="file"] {
            display: none;
        }

        .upload-area .hint {
            font-size: 12px;
            color: #666;
            margin-top: 6px;
        }

        @media (max-width: 600px) {
            .card {
                padding: 16px;
            }
            .form-group {
                flex: 1 1 100%;
            }
            h2 {
                font-size: 20px;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div class="card"&gt;

        &lt;h2&gt;&#128203; Generator Raport PKL&lt;/h2&gt;
        &lt;p class="sub-title"&gt;SMK Negeri 1 Tuntang — Kelas XII TJKT 2&lt;/p&gt;

        &lt;!-- ================= FORM ================= --&gt;
        &lt;div class="form-row"&gt;
            &lt;div class="form-group student-select-wrap"&gt;
                &lt;label&gt;&#128100; Pilih Siswa (TJKT 2)&lt;/label&gt;
                &lt;select id="studentSelect" onchange="onStudentChange()"&gt;
                    &lt;option value=""&gt;— Pilih Siswa —&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;&#128219; Nama Lengkap&lt;/label&gt;
                &lt;input type="text" id="nama" placeholder="Nama siswa" disabled&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;&#127380; NISN / NIS&lt;/label&gt;
                &lt;input type="text" id="nisn" placeholder="NISN / NIS" disabled&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="form-row"&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;&#129489;‍&#127979; Pembimbing PKL&lt;/label&gt;
                &lt;input type="text" id="pembimbing" placeholder="Nama Pembimbing" disabled&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;&#128205; Tempat PKL&lt;/label&gt;
                &lt;input type="text" id="tempatPkl" placeholder="Lokasi PKL" disabled&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="info-note"&gt;
            &lt;strong&gt;&#128204; Data Raport:&lt;/strong&gt; Nilai non-teknis (6 aspek) &amp;amp; teknis (6 aspek) diambil dari Leger Raport.
            &lt;span class="badge-jurusan"&gt;TJKT 2&lt;/span&gt;
        &lt;/div&gt;

        &lt;!-- ================= TEMPLATE ================= --&gt;
        &lt;img id="preview" src="" alt="Template Raport"&gt;

        &lt;!-- Upload lokal sebagai fallback --&gt;
        &lt;div class="upload-area"&gt;
            &lt;label for="templateUpload"&gt;&#128228; Upload Template (jika gambar tidak muncul)&lt;/label&gt;
            &lt;input type="file" id="templateUpload" accept="image/*" onchange="handleTemplateUpload(event)"&gt;
            &lt;div class="hint"&gt;Gunakan gambar template PNG atau JPG dari file Anda.&lt;/div&gt;
        &lt;/div&gt;

        &lt;button class="btn-primary" id="downloadBtn" onclick="generatePDF()" disabled&gt;
            ⬇️ UNDUH RAPORT PDF
        &lt;/button&gt;

        &lt;div class="loading" id="loading"&gt;⏳ Memproses PDF ...&lt;/div&gt;

    &lt;/div&gt;

    &lt;script&gt;
        // ======================================================================
        // DATA SISWA TJKT 2 — dari LEGER RAPOR + DAFTAR PEMBIMBING
        // ======================================================================
        const STUDENTS_DATA = [{
            id: 'adnan',
            nama: 'ADNAN DAVID ARDAFA',
            nisn: '0075368619',
            nis: '848',
            kelas: 'XII TJKT 2',
            fase: 'F',
            semester: 'Gasal / 5',
            tahun: '2025/2026',
            pembimbing: 'M. Misbahul M',
            tempatPkl: 'BEST CAMP PRIMA DATA',
            nonTeknis: [
                { kode: '1.1', aspek: 'Disiplin', nilai: 80, capaian: 'Murid Menunjukkan sikap Disiplin dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.2', aspek: 'Kerjasama', nilai: 90, capaian: 'Murid Menunjukkan sikap sangat bisa bekerjasama dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.3', aspek: 'Kejuruan', nilai: 85, capaian: 'Murid Menunjukkan sikap sesuai dengan tuntutan kejuruan dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.4', aspek: 'Kerapian', nilai: 85, capaian: 'Murid Menunjukkan sikap rapi dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.5', aspek: 'Tanggung Jawab', nilai: 88, capaian: 'Murid Menunjukkan sikap bertanggungjawab dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.6', aspek: 'Kemauan Kerja', nilai: 90, capaian: 'Murid Menunjukkan sikap kerja sangat bertanggungjawab dalam pelaksanaan tugas yang diberikan' }
            ],
            teknis: [
                { kode: '2.1', aspek: 'Merakit Personal Komputer', nilai: 80, capaian: 'Murid terampil dalam merakit personal komputer' },
                { kode: '2.2', aspek: 'Instalasi Sistem Operasi Dasar', nilai: 85, capaian: 'Murid terampil dalam Melakukan Instalasi Sistem Operasi Dasar' },
                { kode: '2.3', aspek: 'Perbaikan dan/atau Seting Ulang sistem PC', nilai: 92, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang sistem PC' },
                { kode: '2.4', aspek: 'Instalasi Software', nilai: 85, capaian: 'Murid terampil dalam Melakukan Instalasi Software' },
                { kode: '2.5', aspek: 'Instalasi Perangkat Jaringan Lokal', nilai: 80, capaian: 'Murid terampil dalam Melakukan Instalasi Perangkat Jaringan Lokal (Local area Network)' },
                { kode: '2.6', aspek: 'Perbaikan dan/atau Seting Ulang Koneksi Jaringan', nilai: 95, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang Koneksi Jaringan' }
            ],
            sakit: 0,
            izin: 0,
            tanpaKeterangan: 0,
        }, {
            id: 'fahrur',
            nama: 'FAHRUR ROZI',
            nisn: '0075368620',
            nis: '849',
            kelas: 'XII TJKT 2',
            fase: 'F',
            semester: 'Gasal / 5',
            tahun: '2025/2026',
            pembimbing: 'M. Misbahul M',
            tempatPkl: 'BEST CAMP PRIMA DATA',
            nonTeknis: [
                { kode: '1.1', aspek: 'Disiplin', nilai: 82, capaian: 'Murid Menunjukkan sikap Disiplin dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.2', aspek: 'Kerjasama', nilai: 88, capaian: 'Murid Menunjukkan sikap sangat bisa bekerjasama dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.3', aspek: 'Kejuruan', nilai: 80, capaian: 'Murid Menunjukkan sikap sesuai dengan tuntutan kejuruan dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.4', aspek: 'Kerapian', nilai: 83, capaian: 'Murid Menunjukkan sikap rapi dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.5', aspek: 'Tanggung Jawab', nilai: 85, capaian: 'Murid Menunjukkan sikap bertanggungjawab dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.6', aspek: 'Kemauan Kerja', nilai: 87, capaian: 'Murid Menunjukkan sikap kerja sangat bertanggungjawab dalam pelaksanaan tugas yang diberikan' }
            ],
            teknis: [
                { kode: '2.1', aspek: 'Merakit Personal Komputer', nilai: 78, capaian: 'Murid terampil dalam merakit personal komputer' },
                { kode: '2.2', aspek: 'Instalasi Sistem Operasi Dasar', nilai: 82, capaian: 'Murid terampil dalam Melakukan Instalasi Sistem Operasi Dasar' },
                { kode: '2.3', aspek: 'Perbaikan dan/atau Seting Ulang sistem PC', nilai: 88, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang sistem PC' },
                { kode: '2.4', aspek: 'Instalasi Software', nilai: 80, capaian: 'Murid terampil dalam Melakukan Instalasi Software' },
                { kode: '2.5', aspek: 'Instalasi Perangkat Jaringan Lokal', nilai: 76, capaian: 'Murid terampil dalam Melakukan Instalasi Perangkat Jaringan Lokal (Local area Network)' },
                { kode: '2.6', aspek: 'Perbaikan dan/atau Seting Ulang Koneksi Jaringan', nilai: 90, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang Koneksi Jaringan' }
            ],
            sakit: 0,
            izin: 0,
            tanpaKeterangan: 0,
        }, {
            id: 'flora',
            nama: 'FLORA FIRNANDA',
            nisn: '0075368621',
            nis: '850',
            kelas: 'XII TJKT 2',
            fase: 'F',
            semester: 'Gasal / 5',
            tahun: '2025/2026',
            pembimbing: 'M. Misbahul M',
            tempatPkl: 'BEST CAMP PRIMA DATA',
            nonTeknis: [
                { kode: '1.1', aspek: 'Disiplin', nilai: 90, capaian: 'Murid Menunjukkan sikap Disiplin dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.2', aspek: 'Kerjasama', nilai: 92, capaian: 'Murid Menunjukkan sikap sangat bisa bekerjasama dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.3', aspek: 'Kejuruan', nilai: 88, capaian: 'Murid Menunjukkan sikap sesuai dengan tuntutan kejuruan dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.4', aspek: 'Kerapian', nilai: 90, capaian: 'Murid Menunjukkan sikap rapi dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.5', aspek: 'Tanggung Jawab', nilai: 91, capaian: 'Murid Menunjukkan sikap bertanggungjawab dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.6', aspek: 'Kemauan Kerja', nilai: 93, capaian: 'Murid Menunjukkan sikap kerja sangat bertanggungjawab dalam pelaksanaan tugas yang diberikan' }
            ],
            teknis: [
                { kode: '2.1', aspek: 'Merakit Personal Komputer', nilai: 85, capaian: 'Murid terampil dalam merakit personal komputer' },
                { kode: '2.2', aspek: 'Instalasi Sistem Operasi Dasar', nilai: 88, capaian: 'Murid terampil dalam Melakukan Instalasi Sistem Operasi Dasar' },
                { kode: '2.3', aspek: 'Perbaikan dan/atau Seting Ulang sistem PC', nilai: 92, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang sistem PC' },
                { kode: '2.4', aspek: 'Instalasi Software', nilai: 87, capaian: 'Murid terampil dalam Melakukan Instalasi Software' },
                { kode: '2.5', aspek: 'Instalasi Perangkat Jaringan Lokal', nilai: 84, capaian: 'Murid terampil dalam Melakukan Instalasi Perangkat Jaringan Lokal (Local area Network)' },
                { kode: '2.6', aspek: 'Perbaikan dan/atau Seting Ulang Koneksi Jaringan', nilai: 94, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang Koneksi Jaringan' }
            ],
            sakit: 0,
            izin: 0,
            tanpaKeterangan: 0,
        }, {
            id: 'raysa',
            nama: 'RAYSA ADI SAPUTRA',
            nisn: '0075368622',
            nis: '851',
            kelas: 'XII TJKT 2',
            fase: 'F',
            semester: 'Gasal / 5',
            tahun: '2025/2026',
            pembimbing: 'Agung K',
            tempatPkl: 'PT MITRA KENCANA TECHNOLOGY',
            nonTeknis: [
                { kode: '1.1', aspek: 'Disiplin', nilai: 78, capaian: 'Murid Menunjukkan sikap Disiplin dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.2', aspek: 'Kerjasama', nilai: 82, capaian: 'Murid Menunjukkan sikap sangat bisa bekerjasama dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.3', aspek: 'Kejuruan', nilai: 80, capaian: 'Murid Menunjukkan sikap sesuai dengan tuntutan kejuruan dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.4', aspek: 'Kerapian', nilai: 76, capaian: 'Murid Menunjukkan sikap rapi dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.5', aspek: 'Tanggung Jawab', nilai: 79, capaian: 'Murid Menunjukkan sikap bertanggungjawab dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.6', aspek: 'Kemauan Kerja', nilai: 84, capaian: 'Murid Menunjukkan sikap kerja sangat bertanggungjawab dalam pelaksanaan tugas yang diberikan' }
            ],
            teknis: [
                { kode: '2.1', aspek: 'Merakit Personal Komputer', nilai: 75, capaian: 'Murid terampil dalam merakit personal komputer' },
                { kode: '2.2', aspek: 'Instalasi Sistem Operasi Dasar', nilai: 78, capaian: 'Murid terampil dalam Melakukan Instalasi Sistem Operasi Dasar' },
                { kode: '2.3', aspek: 'Perbaikan dan/atau Seting Ulang sistem PC', nilai: 82, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang sistem PC' },
                { kode: '2.4', aspek: 'Instalasi Software', nilai: 76, capaian: 'Murid terampil dalam Melakukan Instalasi Software' },
                { kode: '2.5', aspek: 'Instalasi Perangkat Jaringan Lokal', nilai: 72, capaian: 'Murid terampil dalam Melakukan Instalasi Perangkat Jaringan Lokal (Local area Network)' },
                { kode: '2.6', aspek: 'Perbaikan dan/atau Seting Ulang Koneksi Jaringan', nilai: 86, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang Koneksi Jaringan' }
            ],
            sakit: 0,
            izin: 0,
            tanpaKeterangan: 0,
        }, {
            id: 'guntur',
            nama: 'GUNTUR ADITYA SAPUTRA',
            nisn: '0075368623',
            nis: '852',
            kelas: 'XII TJKT 2',
            fase: 'F',
            semester: 'Gasal / 5',
            tahun: '2025/2026',
            pembimbing: 'Umi F',
            tempatPkl: 'HORIZON RESORT TLOGO',
            nonTeknis: [
                { kode: '1.1', aspek: 'Disiplin', nilai: 83, capaian: 'Murid Menunjukkan sikap Disiplin dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.2', aspek: 'Kerjasama', nilai: 86, capaian: 'Murid Menunjukkan sikap sangat bisa bekerjasama dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.3', aspek: 'Kejuruan', nilai: 81, capaian: 'Murid Menunjukkan sikap sesuai dengan tuntutan kejuruan dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.4', aspek: 'Kerapian', nilai: 84, capaian: 'Murid Menunjukkan sikap rapi dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.5', aspek: 'Tanggung Jawab', nilai: 87, capaian: 'Murid Menunjukkan sikap bertanggungjawab dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.6', aspek: 'Kemauan Kerja', nilai: 89, capaian: 'Murid Menunjukkan sikap kerja sangat bertanggungjawab dalam pelaksanaan tugas yang diberikan' }
            ],
            teknis: [
                { kode: '2.1', aspek: 'Merakit Personal Komputer', nilai: 79, capaian: 'Murid terampil dalam merakit personal komputer' },
                { kode: '2.2', aspek: 'Instalasi Sistem Operasi Dasar', nilai: 83, capaian: 'Murid terampil dalam Melakukan Instalasi Sistem Operasi Dasar' },
                { kode: '2.3', aspek: 'Perbaikan dan/atau Seting Ulang sistem PC', nilai: 88, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang sistem PC' },
                { kode: '2.4', aspek: 'Instalasi Software', nilai: 82, capaian: 'Murid terampil dalam Melakukan Instalasi Software' },
                { kode: '2.5', aspek: 'Instalasi Perangkat Jaringan Lokal', nilai: 77, capaian: 'Murid terampil dalam Melakukan Instalasi Perangkat Jaringan Lokal (Local area Network)' },
                { kode: '2.6', aspek: 'Perbaikan dan/atau Seting Ulang Koneksi Jaringan', nilai: 91, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang Koneksi Jaringan' }
            ],
            sakit: 0,
            izin: 0,
            tanpaKeterangan: 0,
        }, {
            id: 'helsa',
            nama: 'HELSA RIZQI AKBAR',
            nisn: '0075368624',
            nis: '853',
            kelas: 'XII TJKT 2',
            fase: 'F',
            semester: 'Gasal / 5',
            tahun: '2025/2026',
            pembimbing: 'Bramantyo',
            tempatPkl: 'BEST CAMP PRIMA DATA',
            nonTeknis: [
                { kode: '1.1', aspek: 'Disiplin', nilai: 87, capaian: 'Murid Menunjukkan sikap Disiplin dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.2', aspek: 'Kerjasama', nilai: 90, capaian: 'Murid Menunjukkan sikap sangat bisa bekerjasama dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.3', aspek: 'Kejuruan', nilai: 85, capaian: 'Murid Menunjukkan sikap sesuai dengan tuntutan kejuruan dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.4', aspek: 'Kerapian', nilai: 88, capaian: 'Murid Menunjukkan sikap rapi dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.5', aspek: 'Tanggung Jawab', nilai: 90, capaian: 'Murid Menunjukkan sikap bertanggungjawab dalam pelaksanaan tugas yang diberikan' },
                { kode: '1.6', aspek: 'Kemauan Kerja', nilai: 92, capaian: 'Murid Menunjukkan sikap kerja sangat bertanggungjawab dalam pelaksanaan tugas yang diberikan' }
            ],
            teknis: [
                { kode: '2.1', aspek: 'Merakit Personal Komputer', nilai: 83, capaian: 'Murid terampil dalam merakit personal komputer' },
                { kode: '2.2', aspek: 'Instalasi Sistem Operasi Dasar', nilai: 87, capaian: 'Murid terampil dalam Melakukan Instalasi Sistem Operasi Dasar' },
                { kode: '2.3', aspek: 'Perbaikan dan/atau Seting Ulang sistem PC', nilai: 91, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang sistem PC' },
                { kode: '2.4', aspek: 'Instalasi Software', nilai: 86, capaian: 'Murid terampil dalam Melakukan Instalasi Software' },
                { kode: '2.5', aspek: 'Instalasi Perangkat Jaringan Lokal', nilai: 82, capaian: 'Murid terampil dalam Melakukan Instalasi Perangkat Jaringan Lokal (Local area Network)' },
                { kode: '2.6', aspek: 'Perbaikan dan/atau Seting Ulang Koneksi Jaringan', nilai: 93, capaian: 'Murid sangat terampil dalam Melakukan Perbaikan dan/atau Seting Ulang Koneksi Jaringan' }
            ],
            sakit: 0,
            izin: 0,
            tanpaKeterangan: 0,
        }];

        // ======================================================================
        // STATE
        // ======================================================================
        let selectedStudent = null;
        let templateImageData = null; // akan diisi dengan data URL gambar

        // DOM refs
        const studentSelect = document.getElementById('studentSelect');
        const namaInput = document.getElementById('nama');
        const nisnInput = document.getElementById('nisn');
        const pembimbingInput = document.getElementById('pembimbing');
        const tempatPklInput = document.getElementById('tempatPkl');
        const downloadBtn = document.getElementById('downloadBtn');
        const loadingEl = document.getElementById('loading');
        const previewImg = document.getElementById('preview');
        const templateUpload = document.getElementById('templateUpload');

        // URL template dari Google Drive (fallback)
        const TEMPLATE_URL_DRIVE = 'https://drive.google.com/uc?export=view&amp;id=1fttQv-oJtw6meR3sScnXo6MjRT8Ul4m1';

        // ======================================================================
        // INIT
        // ======================================================================
        function init() {
            // Isi dropdown
            studentSelect.innerHTML = '&lt;option value=""&gt;— Pilih Siswa —&lt;/option&gt;';
            STUDENTS_DATA.forEach(s =&gt; {
                const opt = document.createElement('option');
                opt.value = s.id;
                opt.textContent = s.nama + ' (' + s.nis + ')';
                studentSelect.appendChild(opt);
            });

            // Coba muat template dari drive
            loadTemplateFromDrive();
        }

        // ======================================================================
        // LOAD TEMPLATE
        // ======================================================================
        function loadTemplateFromDrive() {
            previewImg.src = TEMPLATE_URL_DRIVE;
            previewImg.onload = function() {
                // Berhasil, simpan data gambar
                templateImageData = previewImg.src;
                console.log('Template berhasil dimuat dari Google Drive');
                previewImg.onerror = null; // hapus handler error
            };
            previewImg.onerror = function() {
                console.warn('Gagal memuat template dari Drive. Silakan upload manual.');
                previewImg.alt = 'Gagal memuat template. Upload gambar secara manual.';
                // Tampilkan pesan di area preview
                previewImg.style.display = 'block';
                // Kita tidak set templateImageData, sehingga nanti akan dicegah generate PDF
                // tapi kita beri info ke user
                alert('Gagal memuat template dari Google Drive. Silakan upload gambar template menggunakan tombol di bawah.');
            };
        }

        // ======================================================================
        // HANDLE UPLOAD TEMPLATE LOKAL
        // ======================================================================
        function handleTemplateUpload(event) {
            const file = event.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(e) {
                const dataUrl = e.target.result;
                templateImageData = dataUrl;
                previewImg.src = dataUrl;
                previewImg.onerror = null;
                previewImg.alt = 'Template lokal';
                console.log('Template lokal berhasil dimuat');
                alert('Template berhasil diunggah!');
            };
            reader.onerror = function() {
                alert('Gagal membaca file. Coba lagi.');
            };
            reader.readAsDataURL(file);
        }

        // ======================================================================
        // STUDENT SELECT
        // ======================================================================
        function onStudentChange() {
            const id = studentSelect.value;
            if (!id) {
                clearFields();
                downloadBtn.disabled = true;
                return;
            }
            const s = STUDENTS_DATA.find(d =&gt; d.id === id);
            if (!s) return;
            selectedStudent = s;
            namaInput.value = s.nama;
            nisnInput.value = s.nisn + ' / ' + s.nis;
            pembimbingInput.value = s.pembimbing;
            tempatPklInput.value = s.tempatPkl;
            // Cek apakah template sudah dimuat
            if (templateImageData) {
                downloadBtn.disabled = false;
            } else {
                downloadBtn.disabled = true;
                alert('Template belum dimuat. Upload gambar template terlebih dahulu.');
            }
        }

        function clearFields() {
            namaInput.value = '';
            nisnInput.value = '';
            pembimbingInput.value = '';
            tempatPklInput.value = '';
            selectedStudent = null;
            downloadBtn.disabled = true;
        }

        // ======================================================================
        // LOAD IMAGE FROM DATA URL
        // ======================================================================
        function loadImageFromDataUrl(dataUrl) {
            return new Promise((resolve, reject) =&gt; {
                const img = new Image();
                img.onload = () =&gt; resolve(img);
                img.onerror = () =&gt; reject(new Error('Gagal memuat gambar template.'));
                img.src = dataUrl;
            });
        }

        // ======================================================================
        // GENERATE PDF
        // ======================================================================
        async function generatePDF() {
            if (!selectedStudent) {
                alert('Pilih siswa terlebih dahulu.');
                return;
            }
            if (!templateImageData) {
                alert('Template belum dimuat. Upload gambar template terlebih dahulu.');
                return;
            }

            const s = selectedStudent;

            // Hitung total &amp; rata-rata
            const allNilai = [...s.nonTeknis, ...s.teknis];
            const total = allNilai.reduce((sum, item) =&gt; sum + item.nilai, 0);
            const avg = Math.round(total / allNilai.length);

            loadingEl.style.display = 'block';
            downloadBtn.disabled = true;

            try {
                await document.fonts.ready;
                const img = await loadImageFromDataUrl(templateImageData);

                const canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');

                // Gambar template
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                // ====================== POSISI TEKS ======================
                const W = canvas.width;
                const H = canvas.height;

                ctx.textAlign = 'left';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = '#000000';

                // ----- 1. Nama Peserta Didik -----
                const namaY = H * 0.188;
                let fontSize = W * 0.020;
                ctx.font = `700 ${fontSize}px Montserrat`;
                let tw = ctx.measureText(s.nama).width;
                const maxW = W * 0.55;
                while (tw &gt; maxW &amp;&amp; fontSize &gt; 12) {
                    fontSize -= 1;
                    ctx.font = `700 ${fontSize}px Montserrat`;
                    tw = ctx.measureText(s.nama).width;
                }
                ctx.fillText(s.nama, W * 0.175, namaY);

                // ----- 2. NISN/NIS -----
                const nisnText = s.nisn + ' / ' + s.nis;
                ctx.font = `400 ${W * 0.017}px Montserrat`;
                ctx.fillText(nisnText, W * 0.175, H * 0.225);

                // ----- 3. Sekolah -----
                const sekolah = 'SMK NEGERI 1 TUNTANG';
                ctx.font = `400 ${W * 0.017}px Montserrat`;
                ctx.fillText(sekolah, W * 0.175, H * 0.260);

                // ----- 4. Alamat -----
                const alamat = 'Jl. Mertokusumo, Desa Candirejo';
                ctx.font = `400 ${W * 0.017}px Montserrat`;
                ctx.fillText(alamat, W * 0.175, H * 0.295);

                // ----- 5. Kelas -----
                ctx.font = `400 ${W * 0.017}px Montserrat`;
                ctx.fillText(s.kelas, W * 0.175, H * 0.330);

                // ----- 6. Fase -----
                ctx.fillText(s.fase, W * 0.175, H * 0.365);

                // ----- 7. Semester -----
                ctx.fillText(s.semester, W * 0.175, H * 0.400);

                // ----- 8. Tahun Pelajaran -----
                ctx.fillText(s.tahun, W * 0.175, H * 0.435);

                // ----- 9. Pembimbing (ditambahkan) -----
                const pembText = 'Pembimbing : ' + s.pembimbing;
                ctx.font = `500 ${W * 0.016}px Montserrat`;
                ctx.fillText(pembText, W * 0.175, H * 0.470);

                // ----- 10. Tempat PKL (ditambahkan) -----
                const tempatText = 'Tempat PKL : ' + s.tempatPkl;
                ctx.font = `500 ${W * 0.016}px Montserrat`;
                ctx.fillText(tempatText, W * 0.175, H * 0.502);

                // ====================== TABEL NILAI ======================
                // Non-Teknis (1.1 - 1.6)
                const startX = W * 0.070;
                const col1W = W * 0.165;
                const col2W = W * 0.380;
                const col3W = W * 0.075;
                const col4W = W * 0.300;
                const rowH = H * 0.038;
                let yRow = H * 0.560;

                ctx.font = `400 ${W * 0.014}px Montserrat`;
                ctx.textAlign = 'left';
                ctx.textBaseline = 'middle';

                s.nonTeknis.forEach((item, idx) =&gt; {
                    const x1 = startX;
                    const x2 = startX + col1W;
                    const x3 = startX + col1W + col2W;
                    const x4 = startX + col1W + col2W + col3W;
                    const y = yRow + idx * rowH;

                    ctx.fillText(item.kode, x1 + 4, y);
                    ctx.fillText(item.aspek, x2 + 4, y);
                    ctx.fillText(item.nilai.toString(), x3 + 4, y);
                    let cap = item.capaian;
                    if (cap.length &gt; 38) cap = cap.substring(0, 36) + '...';
                    ctx.fillText(cap, x4 + 4, y);
                });

                // Teknis (2.1 - 2.6)
                const teknisStartY = H * 0.560 + (s.nonTeknis.length * rowH) + H * 0.025;
                s.teknis.forEach((item, idx) =&gt; {
                    const x1 = startX;
                    const x2 = startX + col1W;
                    const x3 = startX + col1W + col2W;
                    const x4 = startX + col1W + col2W + col3W;
                    const y = teknisStartY + idx * rowH;

                    ctx.fillText(item.kode, x1 + 4, y);
                    ctx.fillText(item.aspek, x2 + 4, y);
                    ctx.fillText(item.nilai.toString(), x3 + 4, y);
                    let cap = item.capaian;
                    if (cap.length &gt; 38) cap = cap.substring(0, 36) + '...';
                    ctx.fillText(cap, x4 + 4, y);
                });

                // ----- Total Nilai &amp; Rata-rata -----
                const totalY = teknisStartY + (s.teknis.length * rowH) + H * 0.020;
                ctx.font = `600 ${W * 0.017}px Montserrat`;
                ctx.textAlign = 'left';
                ctx.fillText('Total Nilai', startX + 4, totalY);
                ctx.fillText(total.toString(), startX + col1W + col2W + 4, totalY);

                const avgY = totalY + rowH * 0.9;
                ctx.fillText('Rata-rata', startX + 4, avgY);
                ctx.fillText(avg.toString(), startX + col1W + col2W + 4, avgY);

                // ----- Ketidakhadiran -----
                const absenY = avgY + rowH * 1.2;
                ctx.font = `400 ${W * 0.016}px Montserrat`;
                ctx.textAlign = 'left';
                ctx.fillText('Sakit', startX + 4, absenY);
                ctx.fillText(s.sakit + ' hari', startX + col1W + 4, absenY);
                ctx.fillText('Izin', startX + col1W + col2W + 4, absenY);
                ctx.fillText(s.izin + ' hari', startX + col1W + col2W + col3W + 4, absenY);
                ctx.fillText('Tanpa Keterangan', startX + col1W + col2W + col3W + col4W + 4, absenY);
                ctx.fillText(s.tanpaKeterangan + ' hari', startX + col1W + col2W + col3W + col4W + col3W + 4, absenY);

                // ----- Tanggal &amp; Tanda Tangan -----
                const ttdY = H * 0.930;
                ctx.font = `400 ${W * 0.015}px Montserrat`;
                ctx.textAlign = 'center';
                ctx.fillText('Tuntang, 18 Maret 2026', W * 0.5, ttdY);

                const tandaY = H * 0.960;
                ctx.font = `400 ${W * 0.014}px Montserrat`;
                ctx.fillText('Kepala Sekolah', W * 0.20, tandaY);
                ctx.fillText('Orang Tua/Wali', W * 0.50, tandaY);
                ctx.fillText('Wali Kelas', W * 0.80, tandaY);

                // Nama Kepsek
                ctx.font = `600 ${W * 0.014}px Montserrat`;
                ctx.fillText('Nanang Nurdiyanto, S.Pd, M.Eng', W * 0.20, tandaY + H * 0.025);
                ctx.fillText('NIP.19770402 200501 1 010', W * 0.20, tandaY + H * 0.045);

                // Nama Wali Kelas
                ctx.fillText('Nofrizal, S.T., Gr.', W * 0.80, tandaY + H * 0.025);
                ctx.fillText('NIP.19770327 202221 1 002', W * 0.80, tandaY + H * 0.045);

                // ====================== EXPORT PDF ======================
                const imageData = canvas.toDataURL('image/jpeg', 0.98);
                const { jsPDF } = window.jspdf;
                const pdf = new jsPDF({
                    orientation: canvas.width &gt; canvas.height ? 'landscape' : 'portrait',
                    unit: 'px',
                    format: [canvas.width, canvas.height]
                });

                pdf.addImage(imageData, 'JPEG', 0, 0, canvas.width, canvas.height);
                const safeName = s.nama.replace(/[^a-z0-9]/gi, '_');
                pdf.save('Raport_PKL_' + safeName + '.pdf');

            } catch (error) {
                console.error(error);
                alert('❌ Gagal membuat PDF\n\n' + error.message);
            } finally {
                loadingEl.style.display = 'none';
                downloadBtn.disabled = false;
            }
        }

        // ======================================================================
        // START
        // ======================================================================
        init();
        console.log('✅ Aplikasi Raport PKL TJKT 2 siap. Silakan upload template jika diperlukan.');
    &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTwjlyzkMzJywQ96opnkRlOsC8pRIsVpEID1FccNG43tmWGOwKuKC1DLg14SfhQUp7daIc0N_I64Z4yTtbvuOKQUF8xexbNYPkPSxyaKXALhR9gpNYE9pbTz4qWcKGlDZiD-t82C3lj_QQQTGxfe__h91uMG_sDsH2_LiM5MO51CY7QIhcIIImal71gA/s2599/tempalte%20RAPOR%20PKL%202025-2026-TJKT2-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="2599" data-original-width="1654" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTwjlyzkMzJywQ96opnkRlOsC8pRIsVpEID1FccNG43tmWGOwKuKC1DLg14SfhQUp7daIc0N_I64Z4yTtbvuOKQUF8xexbNYPkPSxyaKXALhR9gpNYE9pbTz4qWcKGlDZiD-t82C3lj_QQQTGxfe__h91uMG_sDsH2_LiM5MO51CY7QIhcIIImal71gA/w408-h640/tempalte%20RAPOR%20PKL%202025-2026-TJKT2-1.png" width="408" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;</description><link>http://kitab-investasi.blogspot.com/2026/06/raport-pkl.html</link><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTwjlyzkMzJywQ96opnkRlOsC8pRIsVpEID1FccNG43tmWGOwKuKC1DLg14SfhQUp7daIc0N_I64Z4yTtbvuOKQUF8xexbNYPkPSxyaKXALhR9gpNYE9pbTz4qWcKGlDZiD-t82C3lj_QQQTGxfe__h91uMG_sDsH2_LiM5MO51CY7QIhcIIImal71gA/s72-w408-h640-c/tempalte%20RAPOR%20PKL%202025-2026-TJKT2-1.png" width="72"/><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-4286446652379436361</guid><pubDate>Thu, 18 Jun 2026 07:53:16 +0000</pubDate><atom:updated>2026-07-02T14:46:30.663+07:00</atom:updated><title>Game Edukasi Karakter 5S Terintegrasi INFORMATIKA</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Cyber 5S: Ultimate Quest&lt;/title&gt;
    &lt;style&gt;
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&amp;display=swap');
        body { margin: 0; background: #050616; color: #00f3ff; font-family: 'Orbitron', sans-serif; overflow: hidden; touch-action: none; }
        #ui { position: fixed; top: 10px; width: 100%; text-align: center; z-index: 10; pointer-events: none; }
        .panel { background: rgba(0, 243, 255, 0.1); border: 2px solid #00f3ff; padding: 10px 20px; border-radius: 20px; display: inline-block; pointer-events: auto; text-shadow: 0 0 5px #00f3ff; }
        canvas { display: block; }
        #overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle, #0f172a, #050616); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 20; text-align: center; }
        .btn { padding: 15px 40px; background: transparent; border: 2px solid #00ff88; color: #00ff88; cursor: pointer; border-radius: 30px; font-weight: bold; transition: 0.3s; margin-top: 20px; font-family: inherit; font-size: 1.2rem; }
        .btn:hover { background: #00ff88; color: #050616; box-shadow: 0 0 20px #00ff88; }
        input { padding: 15px; border-radius:10px; border:2px solid #00f3ff; background:transparent; color:#fff; text-align:center; width: 300px; font-family: inherit; font-size: 1.2rem; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="ui"&gt;
    &lt;div class="panel"&gt;PILOT: &lt;span id="user-display"&gt;---&lt;/span&gt; | SCORE: &lt;span id="score-display"&gt;0&lt;/span&gt; | LVL: &lt;span id="lvl-display"&gt;1/5&lt;/span&gt;&lt;/div&gt;
    &lt;div id="q-text" class="panel" style="margin-top:10px; font-size: 1.1rem; max-width: 80%; border-color: #00ff88; color: #00ff88;"&gt;Siapkan sensor Anda, Pilot!&lt;/div&gt;
&lt;/div&gt;

&lt;div id="overlay"&gt;
    &lt;h1 style="font-size: 3rem; color: #00f3ff; text-shadow: 0 0 20px #00f3ff;"&gt;CYBER 5S MISSION&lt;/h1&gt;
    &lt;p style="margin: 20px; color: #fff;"&gt;Tembak gelembung jawaban yang PALING TEPAT untuk menginternalisasi nilai 5S.&lt;/p&gt;
    &lt;input type="text" id="username" placeholder="Nama Pilot" maxlength="15"&gt;
    &lt;button class="btn" onclick="initGame()"&gt;MULAI MISI&lt;/button&gt;
&lt;/div&gt;

&lt;canvas id="gameCanvas"&gt;&lt;/canvas&gt;

&lt;script&gt;
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    let gameActive = false, score = 0, level = 1, currentQ = 0, bubbles = [], bullets = [], playerX = 0, username = "";

    const qData = [
        { t: "SENYUM", d: [
            {q: "Apa esensi dari Senyum dalam 5S?", a: ["Menebar energi positif", "Pamer gigi", "Hanya formalitas", "Tanda lelah", "Menutupi sedih"], corr: 0},
            {q: "Kapan waktu terbaik memberikan senyum?", a: ["Saat bertemu orang", "Saat marah", "Saat bosan", "Saat sendiri", "Saat ditegur"], corr: 0},
            {q: "Senyum dapat menurunkan tingkat?", a: ["Stres", "Kecerdasan", "Gaji", "Wibawa", "Kecepatan"], corr: 0},
            {q: "Apa dampak senyum bagi lingkungan kerja?", a: ["Suasana jadi hangat", "Jadi berisik", "Kurang fokus", "Sangat formal", "Menjadi kaku"], corr: 0},
            {q: "Tersenyum adalah bentuk?", a: ["Sedekah termudah", "Tugas berat", "Pilihan sulit", "Tanda kelemahan", "Sikap pasif"], corr: 0},
            {q: "Bagaimana kriteria senyum 5S?", a: ["Tulus dari hati", "Dibuat-buat", "Sinis", "Terpaksa", "Menghina"], corr: 0},
            {q: "Senyum meningkatkan apa?", a: ["Rasa percaya diri", "Kecurigaan", "Jarak sosial", "Ketegangan", "Keraguan"], corr: 0},
            {q: "Apa respon orang saat kita tersenyum?", a: ["Merasa dihargai", "Merasa takut", "Bingung", "Abaikan", "Curiga"], corr: 0},
            {q: "Senyum adalah kunci awal?", a: ["Hubungan positif", "Konflik", "Debat", "Perkelahian", "Ketidakadilan"], corr: 0},
            {q: "Bagaimana jika kita lelah?", a: ["Tetap berusaha tersenyum", "Cemberut terus", "Marah-marah", "Cuek", "Menghindari orang"], corr: 0}
        ]},
        { t: "SALAM", d: Array.from({length:10}, (_,i) =&gt; ({q: `Salam #${i+1}: Mengapa salam itu penting?`, a: ["Penghormatan sesama", "Formalitas saja", "Buang waktu", "Tanda takut", "Kewajiban berat"], corr: 0})) },
        { t: "SAPA", d: Array.from({length:10}, (_,i) =&gt; ({q: `Sapa #${i+1}: Cara menyapa yang baik?`, a: ["Ramah dan santun", "Teriak-teriak", "Ejek nama", "Mengabaikan", "Lari saja"], corr: 0})) },
        { t: "SOPAN", d: Array.from({length:10}, (_,i) =&gt; ({q: `Sopan #${i+1}: Cerminan pribadi yang?`, a: ["Beradab", "Sombong", "Cuek", "Kasar", "Acuh"], corr: 0})) },
        { t: "SANTUN", d: Array.from({length:10}, (_,i) =&gt; ({q: `Santun #${i+1}: Inti komunikasi santun?`, a: ["Menghindari konflik", "Menang debat", "Bicara keras", "Memotong kata", "Menyindir"], corr: 0})) }
    ];

    function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
    window.onresize = resize; resize();

    function initGame() {
        username = document.getElementById('username').value || "Cadet";
        document.getElementById('user-display').innerText = username;
        document.getElementById('overlay').style.display = 'none';
        gameActive = true;
        loadQuest();
        animate();
    }

    function loadQuest() {
        bubbles = [];
        let q = qData[level-1].d[currentQ];
        document.getElementById('q-text').innerText = `${qData[level-1].t}: ${q.q}`;
        q.a.forEach((txt, i) =&gt; {
            bubbles.push({ x: Math.random()*(canvas.width-200)+100, y: Math.random()*200+50, vx: (Math.random()-0.5)*4, vy: (Math.random()-0.5)*4, text: txt, isCorr: i === q.corr });
        });
    }

    window.addEventListener('mousemove', e =&gt; playerX = e.clientX);
    window.addEventListener('click', () =&gt; { if(gameActive) bullets.push({x: playerX, y: canvas.height - 80}); });

    function animate() {
        if(!gameActive) return;
        ctx.fillStyle = "rgba(5, 6, 22, 0.4)"; ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Ship
        ctx.fillStyle = "#00f3ff";
        ctx.beginPath(); ctx.moveTo(playerX, canvas.height - 80); ctx.lineTo(playerX-25, canvas.height-20); ctx.lineTo(playerX+25, canvas.height-20); ctx.fill();
        
        bullets.forEach((b, i) =&gt; {
            b.y -= 10; ctx.fillStyle = "#00ff88"; ctx.fillRect(b.x - 2, b.y, 4, 15);
            bubbles.forEach((bubble, j) =&gt; {
                if(Math.hypot(b.x - bubble.x, b.y - bubble.y) &lt; 45) {
                    bullets.splice(i, 1);
                    if(bubble.isCorr) { score += 20; }
                    currentQ++;
                    if(currentQ &gt;= 10) { currentQ = 0; level++; if(level &gt; 5) showCongrats(); else loadQuest(); } 
                    else loadQuest();
                    document.getElementById('score-display').innerText = score;
                    document.getElementById('lvl-display').innerText = `${level}/5`;
                }
            });
            if(b.y &lt; 0) bullets.splice(i, 1);
        });

        bubbles.forEach(b =&gt; {
            b.x += b.vx; b.y += b.vy;
            if(b.x &lt; 40 || b.x &gt; canvas.width-40) b.vx *= -1;
            if(b.y &lt; 40 || b.y &gt; 300) b.vy *= -1;
            ctx.strokeStyle = "#00f3ff"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(b.x, b.y, 40, 0, Math.PI*2); ctx.stroke();
            ctx.fillStyle = "#fff"; ctx.font = "10px Orbitron"; ctx.fillText(b.text, b.x - 25, b.y + 5);
        });
        requestAnimationFrame(animate);
    }

    function showCongrats() {
        gameActive = false;
        let rank = score &gt;= 900 ? "Cyber-5S Master" : score &gt;= 600 ? "Pro 5S Navigator" : score &gt;= 300 ? "Guardian 5S" : "Perlu Belajar Lagi";
        document.getElementById('overlay').style.display = 'flex';
        document.getElementById('overlay').innerHTML = `
            &lt;h1 style="color:#00ff88"&gt;MISSION COMPLETE&lt;/h1&gt;
            &lt;p style="font-size: 1.5rem"&gt;PILOT ${username}&lt;/p&gt;
            &lt;p style="font-size: 2rem; color: #ff0;"&gt;RANK: ${rank}&lt;/p&gt;
            &lt;p style="margin: 20px;"&gt;SKOR AKHIR: ${score} / 1000&lt;/p&gt;
            &lt;button class="btn" onclick="location.reload()"&gt;RE-DEPLOY&lt;/button&gt;
        `;
    }
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</description><link>http://kitab-investasi.blogspot.com/2026/06/5s-game.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-3111842205694353476</guid><pubDate>Tue, 09 Jun 2026 14:11:48 +0000</pubDate><atom:updated>2026-06-09T21:11:48.136+07:00</atom:updated><title>KKA</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;KKA - CyberJungle Learning App&lt;/title&gt;
    &lt;style&gt;
        /* BASE STYLE &amp; FUTURISTIC JUNGLE BACKGROUND */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background: linear-gradient(135deg, rgba(6, 24, 14, 0.95), rgba(12, 44, 28, 0.9)), 
                        url('https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?q=80&amp;w=1920') no-repeat center center fixed;
            background-size: cover;
            color: #e0f2fe;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* NEON GLOW EFFECT FOR GEN-Z STYLING */
        .neon-text {
            text-shadow: 0 0 10px #10b981, 0 0 20px #059669;
        }

        /* APP CONTAINER */
        .app-container {
            display: flex;
            max-width: 1400px;
            margin: 20px auto;
            background: rgba(10, 35, 22, 0.75);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(16, 185, 129, 0.25);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        /* SIDEBAR (NAVIGASI SEMESTER) */
        .sidebar {
            width: 320px;
            background: rgba(4, 20, 12, 0.9);
            border-right: 1px solid rgba(16, 185, 129, 0.2);
            padding: 30px 20px;
        }

        .brand {
            font-size: 24px;
            font-weight: 800;
            color: #10b981;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            gap: 10px;
            letter-spacing: 1px;
        }

        .semester-btn {
            width: 100%;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            padding: 15px;
            border-radius: 12px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 15px;
        }

        .semester-btn:hover, .semester-btn.active {
            background: #10b981;
            color: #04140c;
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
            transform: translateX(5px);
        }

        /* MAIN CONTENT AREA */
        .main-content {
            flex: 1;
            padding: 40px;
            overflow-y: auto;
            max-height: 85vh;
        }

        .header-area {
            margin-bottom: 30px;
            border-bottom: 2px solid rgba(16, 185, 129, 0.2);
            padding-bottom: 20px;
        }

        .header-area h1 {
            font-size: 32px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 10px;
        }

        /* TIMELINE / PERTEMUAN CARDS */
        .timeline {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .card {
            background: rgba(16, 185, 129, 0.05);
            border: 1px solid rgba(16, 185, 129, 0.15);
            border-radius: 16px;
            padding: 24px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: #10b981;
            opacity: 0.5;
        }

        .card:hover {
            transform: translateY(-5px);
            background: rgba(16, 185, 129, 0.1);
            border-color: #10b981;
            box-shadow: 0 10px 20px rgba(16, 185, 129, 0.1);
        }

        .badge-pertemuan {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            display: inline-block;
            margin-bottom: 12px;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .badge-evaluasi {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .card h3 {
            font-size: 18px;
            color: #fff;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .card p {
            font-size: 14px;
            color: #a7f3d0;
            line-height: 1.6;
        }

        /* CUSTOM SCROLLBAR */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(4, 20, 12, 0.5);
        }
        ::-webkit-scrollbar-thumb {
            background: #10b981;
            border-radius: 4px;
        }

        /* RESPONSIVE MQS */
        @media (max-width: 900px) {
            .app-container {
                flex-direction: column;
                margin: 10px;
            }
            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid rgba(16, 185, 129, 0.2);
            }
            .main-content {
                max-height: none;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div style="text-align: center; padding: 30px 10px 10px 10px;"&gt;
        &lt;h2 class="neon-text" style="font-size: 28px; font-weight: 800; color: #fff;"&gt;INFORMATIKA FASE E: DEEP LEARNING PORTAL&lt;/h2&gt;
        &lt;p style="color: #6ee7b7; font-size: 14px; margin-top: 5px;"&gt;Platform Pembelajaran Interaktif Berbasis Studi Kasus &amp; AI Generatif&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="app-container"&gt;
        &lt;div class="sidebar"&gt;
            &lt;div class="brand"&gt;
                &lt;span&gt;&#127807;&lt;/span&gt; CYBER JUNGLE v1.0
            &lt;/div&gt;
            &lt;button class="semester-btn active" onclick="switchSemester(1, this)"&gt;
                &#128193; Semester 1: Fondasi &amp; Koding
            &lt;/button&gt;
            &lt;button class="semester-btn" onclick="switchSemester(2, this)"&gt;
                &#128193; Semester 2: Basis Data &amp; AI
            &lt;/button&gt;
        &lt;/div&gt;

        &lt;div class="main-content"&gt;
            
            &lt;div id="semester1" class="semester-section"&gt;
                &lt;div class="header-area"&gt;
                    &lt;h1&gt;Semester 1: Fondasi Berpikir, Literasi Digital, &amp; Pemrograman&lt;/h1&gt;
                    &lt;p&gt;Fokus pada pembentukan pola pikir sistematis, pemanfaatan media digital secara bijak, dan arsitektur logika pemrograman.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="timeline"&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 1 - 2&lt;/span&gt;
                        &lt;h3&gt;Berpikir Komputasional (Dasar)&lt;/h3&gt;
                        &lt;p&gt;Pengenalan 4 pilar inti: Dekomposisi, Abstraksi, Pengenalan Pola, dan Perancangan Algoritma untuk memecahkan masalah kompleks.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 3 - 4&lt;/span&gt;
                        &lt;h3&gt;Penerapan Kasus Riil&lt;/h3&gt;
                        &lt;p&gt;Mengintegrasikan logika berpikir komputasional dengan analisis data pemecahan kasus nyata yang relevan dengan bidang keahlian.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 5 - 6&lt;/span&gt;
                        &lt;h3&gt;Etika &amp; Keamanan Digital&lt;/h3&gt;
                        &lt;p&gt;Membahas regulasi digital, perlindungan keamanan data pribadi, serta etika dalam memproduksi informasi di ruang siber.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 7 - 8&lt;/span&gt;
                        &lt;h3&gt;Produksi Konten Multimedia&lt;/h3&gt;
                        &lt;p&gt;Eksperimen langsung memproduksi serta mendistribusikan konten digital multimedia yang kreatif, aman, dan beretika.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card" style="border-color: rgba(239, 68, 68, 0.4);"&gt;
                        &lt;span class="badge-pertemuan badge-evaluasi"&gt;Pertemuan 9&lt;/span&gt;
                        &lt;h3&gt;Asesmen Sumatif Tengah Semester (STS)&lt;/h3&gt;
                        &lt;p&gt;Uji evaluasi berbasis proyek dan teori komprehensif untuk Elemen Berpikir Komputasional dan Literasi Digital.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 10 - 12&lt;/span&gt;
                        &lt;h3&gt;Instruksi Logis Algoritma&lt;/h3&gt;
                        &lt;p&gt;Belajar membaca bermakna serta menyusun bagan instruksi pemrograman yang logis, linier, sistematis, dan bertahap.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 13 - 15&lt;/span&gt;
                        &lt;h3&gt;Praktik Menulis Kode (Koding)&lt;/h3&gt;
                        &lt;p&gt;Koding mandiri dan kolaboratif menggunakan paradigma pemrograman modern untuk melatih keterampilan motorik digital.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 16 - 17&lt;/span&gt;
                        &lt;h3&gt;Studi Komparasi Algoritma&lt;/h3&gt;
                        &lt;p&gt;Membandingkan berbagai efisiensi kode dan struktur logika algoritma guna menghasilkan performa aplikasi yang optimal.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card" style="border-color: rgba(239, 68, 68, 0.4);"&gt;
                        &lt;span class="badge-pertemuan badge-evaluasi"&gt;Pertemuan 18&lt;/span&gt;
                        &lt;h3&gt;Asesmen Sumatif Akhir Semester (SAS 1)&lt;/h3&gt;
                        &lt;p&gt;Uji kompetensi pemrograman akhir semester melalui pameran proyek mini aplikasi sederhana buatan siswa.&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div id="semester2" class="semester-section" style="display: none;"&gt;
                &lt;div class="header-area"&gt;
                    &lt;h1&gt;Semester 2: Pengelolaan Data, Literasi KA, &amp; Proyek AI Generatif&lt;/h1&gt;
                    &lt;p&gt;Eksplorasi tingkat lanjut manajemen big data, arsitektur Kecerdasan Artifisial, dan rekayasa prompt (Prompt Engineering).&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="timeline"&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 19 - 20&lt;/span&gt;
                        &lt;h3&gt;Konsep Dasar Basis Data&lt;/h3&gt;
                        &lt;p&gt;Pengenalan struktur pengolahan data, model relasional database, dan cara mengorganisir data siber secara rapi.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 21 - 23&lt;/span&gt;
                        &lt;h3&gt;Analisis Data Bermakna&lt;/h3&gt;
                        &lt;p&gt;Praktik langsung menginput, menyaring, memproses, dan menyajikan visualisasi data agar menjadi informasi strategis.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 24 - 25&lt;/span&gt;
                        &lt;h3&gt;Prediksi Berbasis Data (Data-Driven)&lt;/h3&gt;
                        &lt;p&gt;Metodologi pengambilan keputusan cerdas dan membuat prediksi tren masa depan berdasarkan pola data yang tersedia.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 26 - 27&lt;/span&gt;
                        &lt;h3&gt;Konsep &amp; Cara Kerja KA&lt;/h3&gt;
                        &lt;p&gt;Membongkar dapur teknologi Kecerdasan Artifisial, cara model belajar (Deep Learning), serta manfaat dan dampaknya.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card" style="border-color: rgba(239, 68, 68, 0.4);"&gt;
                        &lt;span class="badge-pertemuan badge-evaluasi"&gt;Pertemuan 28&lt;/span&gt;
                        &lt;h3&gt;Asesmen Sumatif Tengah Semester (STS)&lt;/h3&gt;
                        &lt;p&gt;Evaluasi pemahaman konsep teknik analisis basis data serta arsitektur fundamental teknologi kecerdasan buatan.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 29 - 31&lt;/span&gt;
                        &lt;h3&gt;Etika, Keamanan &amp; Keadaban KA&lt;/h3&gt;
                        &lt;p&gt;Diskusi interaktif kritis mengenai bias algoritma, keamanan data siber, dan aspek hukum/sosial dalam pemanfaatan KA.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 32 - 34&lt;/span&gt;
                        &lt;h3&gt;Prompt Engineering Pro&lt;/h3&gt;
                        &lt;p&gt;Seni merancang instruksi perintah yang efektif, presisi, dan optimal pada platform AI Generatif untuk produktivitas kerja.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card"&gt;
                        &lt;span class="badge-pertemuan"&gt;Pertemuan 35 - 37&lt;/span&gt;
                        &lt;h3&gt;Proyek Kolaboratif Produk KA&lt;/h3&gt;
                        &lt;p&gt;Menggunakan AI generatif untuk merancang, mendesain cetak biru, dan mengevaluasi rencana bisnis/proyek barang-jasa kreatif.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="card" style="border-color: rgba(239, 68, 68, 0.4);"&gt;
                        &lt;span class="badge-pertemuan badge-evaluasi"&gt;Pertemuan 38&lt;/span&gt;
                        &lt;h3&gt;Asesmen Sumatif Akhir Semester (SAS 2)&lt;/h3&gt;
                        &lt;p&gt;Sidang presentasi akhir produk inovasi berbasis AI Generatif hasil kolaborasi kelompok di depan kelas.&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        function switchSemester(sem, btn) {
            // Sembunyikan semua section
            document.getElementById('semester1').style.display = 'none';
            document.getElementById('semester2').style.display = 'none';
            
            // Tampilkan section terpilih
            document.getElementById('semester' + sem).style.display = 'block';
            
            // Reset &amp; atur class aktif tombol
            const buttons = document.querySelectorAll('.semester-btn');
            buttons.forEach(b =&gt; b.classList.remove('active'));
            btn.classList.add('active');
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</description><link>http://kitab-investasi.blogspot.com/2026/06/kka.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-5934869907301933553</guid><pubDate>Tue, 19 May 2026 04:15:22 +0000</pubDate><atom:updated>2026-05-19T12:31:12.083+07:00</atom:updated><title>sertifikat kombel</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;Generator Sertifikat&lt;/title&gt;

&lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&amp;display=swap" rel="stylesheet"&gt;

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"&gt;&lt;/script&gt;

&lt;style&gt;

body{
    font-family:Arial,sans-serif;
    background:#eef2f7;
    padding:20px;
    max-width:700px;
    margin:auto;
}

.card{
    background:white;
    padding:24px;
    border-radius:20px;
    box-shadow:0 10px 20px rgba(0,0,0,.1);
}

h2{
    text-align:center;
    color:#1e4668;
}

.confirm-box{
    background:#f0f6ff;
    border-left:5px solid #2c7da0;
    padding:16px;
    border-radius:16px;
    margin-bottom:20px;
    text-align:center;
}

.confirm-box p{
    margin-top:0;
    font-weight:bold;
    color:#1e4668;
}

.confirm-buttons{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.confirm-buttons button{
    flex:1;
}

.yes-btn{
    background:#1f8a4c;
}

.yes-btn:hover{
    background:#166638;
}

.no-btn{
    background:#c0392b;
}

.no-btn:hover{
    background:#962d22;
}

input,select,button{
    width:100%;
    padding:12px;
    margin-top:10px;
    border-radius:12px;
    border:1px solid #ccc;
    font-size:16px;
}

button{
    background:#2c7da0;
    color:white;
    border:none;
    cursor:pointer;
    font-weight:bold;
}

button:hover{
    background:#1f5e7a;
}

button:disabled{
    background:#94a3b8;
    cursor:not-allowed;
}

input:disabled,
select:disabled{
    background:#f1f5f9;
}

#preview{
    width:100%;
    border-radius:12px;
    margin-top:10px;
}

.loading{
    display:none;
    margin-top:15px;
    color:#1e4668;
    font-weight:bold;
    text-align:center;
}

.status{
    margin-top:12px;
    font-weight:bold;
}

.success{
    color:#1f8a4c;
}

.error{
    color:#c0392b;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="card"&gt;

&lt;h2&gt;&#128220; Generator Sertifikat&lt;/h2&gt;

&lt;!-- ================= KONFIRMASI ================= --&gt;

&lt;div class="confirm-box"&gt;

&lt;p&gt;&#128269; Apakah Anda mengikuti pelatihan?&lt;/p&gt;

&lt;div class="confirm-buttons"&gt;

&lt;button class="yes-btn" onclick="confirmIkut()"&gt;
✅ YA, IKUT
&lt;/button&gt;

&lt;button class="no-btn" onclick="confirmTidakIkut()"&gt;
❌ TIDAK
&lt;/button&gt;

&lt;/div&gt;

&lt;div id="statusKonfirmasi" class="status"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;!-- ================= FORM ================= --&gt;

&lt;label&gt;Nama Lengkap&lt;/label&gt;

&lt;input
type="text"
id="nama"
placeholder="Contoh: Ahmad Fauzi"
disabled&gt;

&lt;label&gt;Peran&lt;/label&gt;

&lt;select id="peran" disabled&gt;
    &lt;option&gt;Peserta&lt;/option&gt;
    &lt;option&gt;Narasumber&lt;/option&gt;
&lt;/select&gt;

&lt;img
id="preview"
src="https://lh3.googleusercontent.com/d/1XxVJfD2xfGgl9XxqlYj7MeS3-mbuMzsc"
alt="Template"&gt;

&lt;button
id="downloadBtn"
onclick="generatePDF()"
disabled&gt;

⬇️ UNDUH PDF

&lt;/button&gt;

&lt;div class="loading" id="loading"&gt;
Memproses PDF...
&lt;/div&gt;

&lt;/div&gt;

&lt;script&gt;

// ================= TEMPLATE =================

const FILE_ID =
'1XxVJfD2xfGgl9XxqlYj7MeS3-mbuMzsc';

const TEMPLATE_URL =
`https://lh3.googleusercontent.com/d/${FILE_ID}`;

// ================= UTIL =================

function showLoading(show){

    document.getElementById('loading').style.display =
        show ? 'block' : 'none';

}

function getRomanMonth(monthIndex){

    const romawi = [
        "I","II","III","IV","V","VI",
        "VII","VIII","IX","X","XI","XII"
    ];

    return romawi[monthIndex];

}

function capitalizeEachWord(text){

    return text
        .toLowerCase()
        .replace(/\b\w/g,c=&gt;c.toUpperCase());

}

// ================= KONFIRMASI =================

function confirmIkut(){

    document.getElementById('nama').disabled = false;

    document.getElementById('peran').disabled = false;

    document.getElementById('downloadBtn').disabled = false;

    document.getElementById('statusKonfirmasi').innerHTML =
        '&lt;span class="success"&gt;✅ Konfirmasi diterima. Anda dapat mengunduh sertifikat.&lt;/span&gt;';

}

function confirmTidakIkut(){

    document.getElementById('nama').disabled = true;

    document.getElementById('peran').disabled = true;

    document.getElementById('downloadBtn').disabled = true;

    document.getElementById('statusKonfirmasi').innerHTML =
        '&lt;span class="error"&gt;❌ Anda tidak dapat mengunduh sertifikat.&lt;/span&gt;';

}

// ================= LOAD IMAGE =================

function loadImage(url){

    return new Promise((resolve,reject)=&gt;{

        const img = new Image();

        img.crossOrigin = "anonymous";

        img.onload = ()=&gt;resolve(img);

        img.onerror = ()=&gt;{

            reject(
                new Error(
                    'Template Google Drive gagal dimuat'
                )
            );

        };

        img.src = url + '?t=' + Date.now();

    });

}

// ================= NOMOR =================

async function generateNomor(){

    const now = new Date();

    const bulan =
        getRomanMonth(now.getMonth());

    const tahun =
        now.getFullYear();

    const nomor =
        Math.floor(Math.random()*900)+100;

    return `${nomor}/K/${bulan}/${tahun}`;

}

// ================= PDF =================

async function generatePDF(){

    const namaInput =
        document.getElementById('nama');

    const peranSelect =
        document.getElementById('peran');

    let nama =
        namaInput.value.trim();

    const peran =
        peranSelect.value;

    if(!nama){

        alert('Nama wajib diisi');

        return;

    }

    nama =
        capitalizeEachWord(nama);

    showLoading(true);

    try{

        await document.fonts.ready;

        const img =
            await loadImage(TEMPLATE_URL);

        const canvas =
            document.createElement('canvas');

        canvas.width = img.width;
        canvas.height = img.height;

        const ctx =
            canvas.getContext('2d');

        ctx.drawImage(
            img,
            0,
            0,
            canvas.width,
            canvas.height
        );

        // ================= POSISI =================

        const nomorY =
            canvas.height * 0.24;

        const namaY =
            canvas.height * 0.3990;

        const peranY =
            canvas.height * 0.5420;

        // ================= STYLE =================

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        ctx.fillStyle = '#000';

        // nomor
        const nomorSertifikat =
            await generateNomor();

        ctx.font =
            `bold ${canvas.width*0.014}px Montserrat`;

        ctx.fillText(
            nomorSertifikat,
            canvas.width/2,
            nomorY
        );

        // nama auto shrink
        let fontSize =
            canvas.width * 0.031;

        ctx.font =
            `700 ${fontSize}px Montserrat`;

        let textWidth =
            ctx.measureText(nama).width;

        const maxWidth =
            canvas.width - 180;

        while(
            textWidth &gt; maxWidth &amp;&amp;
            fontSize &gt; 20
        ){

            fontSize -= 2;

            ctx.font =
                `700 ${fontSize}px Montserrat`;

            textWidth =
                ctx.measureText(nama).width;

        }

        ctx.fillText(
            nama,
            canvas.width/2,
            namaY
        );

        // peran
        ctx.font =
            `bold ${canvas.width*0.024}px Montserrat`;

        ctx.fillText(
            peran,
            canvas.width/2,
            peranY
        );

        // ================= PDF =================

        const imageData =
            canvas.toDataURL(
                'image/jpeg',
                1.0
            );

        const { jsPDF } =
            window.jspdf;

        const pdf =
            new jsPDF({

                orientation:
                    canvas.width &gt; canvas.height
                    ? 'landscape'
                    : 'portrait',

                unit:'px',

                format:[
                    canvas.width,
                    canvas.height
                ]

            });

        pdf.addImage(
            imageData,
            'JPEG',
            0,
            0,
            canvas.width,
            canvas.height
        );

        const safeName =
            nama.replace(/[^a-z0-9]/gi,'_');

        pdf.save(
            `Sertifikat_${safeName}.pdf`
        );

    }catch(error){

        console.error(error);

        alert(
            '❌ Gagal membuat PDF\n\n' +
            error.message +
            '\n\nPastikan file Google Drive bersifat PUBLIC.'
        );

    }finally{

        showLoading(false);

    }

}

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</description><link>http://kitab-investasi.blogspot.com/2026/05/sertikom.html</link><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://lh3.googleusercontent.com/d/1XxVJfD2xfGgl9XxqlYj7MeS3-mbuMzsc=s72-c" width="72"/><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-5631480851349941544</guid><pubDate>Mon, 11 May 2026 04:28:00 +0000</pubDate><atom:updated>2026-05-11T11:28:45.089+07:00</atom:updated><title>Menulis Karya Ilmiah Populer Bertema Konservasi Alam</title><description>&lt;h2 style="text-align: justify;"&gt;&amp;nbsp;&lt;span style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 20px; font-weight: inherit;"&gt;A. Pendahuluan – Mengapa Konservasi Alam Penting?&lt;/span&gt;&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span class=""&gt;Alam menyediakan sumber daya yang kita gunakan setiap hari: udara bersih, air, pangan, kayu, dan energi. Namun, aktivitas manusia seperti penebangan liar, polusi, dan perburuan satwa menyebabkan kerusakan lingkungan.&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: 600;"&gt;Konservasi alam&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;adalah upaya perlindungan, pelestarian, dan pengelolaan sumber daya alam secara bijak agar tetap lestari untuk generasi mendatang. Sebagai generasi muda, kalian dapat berkontribusi dengan menuliskan gagasan, fakta, dan ajakan melalui&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: 600;"&gt;karya ilmiah populer&lt;/span&gt;&lt;span class=""&gt;.&lt;/span&gt;&lt;/p&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;B. Pengertian Karya Ilmiah Populer&lt;/span&gt;&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Karya ilmiah populer&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;adalah tulisan yang menyajikan fakta ilmiah (berbasis data, observasi, atau penelitian) dengan&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: 600;"&gt;bahasa yang mudah dipahami&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;oleh masyarakat umum, tidak hanya oleh ilmuwan. Tulisan ini sering ditemukan di media massa, majalah, blog edukasi, atau laman organisasi lingkungan.&lt;/span&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Perbedaan dengan jenis tulisan lain:&lt;/span&gt;&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; --padding-left: calc(( 1257px - (840px - 2*44px))/2 + (840px - 2*44px - 100%)); --padding-right: 54px; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin-left: calc(100% - 1004.5px); overflow-x: auto; padding-left: calc(-100% + 1004.5px); padding-right: 54px; position: relative; scrollbar-width: none; width: calc(100% + 198.5px); z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 259px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1 !important; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 950.521px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; top: 245px;"&gt;&lt;div class="ds-scroll-area__horizontal-bar" style="background-color: transparent; cursor: initial; height: 10px; left: 0px; margin-bottom: auto; pointer-events: all; position: relative; text-align: justify; width: 856.923px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -251px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: max-content; text-align: justify; width: max-content;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span class=""&gt;Jenis Tulisan&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span class=""&gt;Bahasa&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span class=""&gt;Target Pembaca&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span class=""&gt;Contoh&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span class=""&gt;Karya ilmiah murni (skripsi, jurnal)&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Teknis, formal, banyak istilah&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Peneliti, akademisi&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;“Analisis Keanekaragaman Avifauna di Hutan Mangrove...”&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span class=""&gt;Karya ilmiah populer&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Ilmiah tetapi populer (dijelaskan)&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Masyarakat umum, pelajar&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;“Mengapa Hutan Mangrove Penting untuk Melindungi Pantai?”&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span class=""&gt;Nonfiksi populer (feature, opini)&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Bebas, bisa subjektif&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Umum&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;“Indahnya Hutan Mangrove di Pesisir Utara”&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Ciri utama karya ilmiah populer:&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tema ilmiah&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– berbasis fakta, bukan fiksi atau hoaks.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Bahasa populer&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– kalimat tidak rumit, istilah asing dijelaskan.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Struktur jelas&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– ada pembuka, isi, penutup.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Menarik &amp;amp; aplikatif&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– pembaca mendapat informasi baru dan bisa menerapkannya.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Bersifat persuasif/ajakan&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– sering kali mengajak pembaca peduli atau bertindak.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;C. Struktur Karya Ilmiah Populer&lt;/span&gt;&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span class=""&gt;Struktur baku tulisan ilmiah populer terdiri atas:&lt;/span&gt;&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&lt;span class=""&gt;1.&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: inherit;"&gt;Judul&lt;/span&gt;&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Singkat, padat, menarik, dan mencerminkan isi.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Bisa berbentuk pertanyaan, pernyataan mengejutkan, atau ajakan.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;em&gt;Contoh:&lt;/em&gt;&lt;span class=""&gt;&amp;nbsp;“Sampah Plastik: Musuh Tersembunyi Laut Kita”, “Bisakah Hutan Kita Selamat di Tangan Generasi Z?”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&lt;span class=""&gt;2.&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: inherit;"&gt;Pembuka (Lead)&lt;/span&gt;&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Paragraf pertama yang menarik perhatian.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Bisa berupa fakta mengejutkan, kutipan, anekdot, atau pertanyaan retoris.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;em&gt;Contoh:&lt;/em&gt;&lt;span class=""&gt;&amp;nbsp;“Tahukah kamu, setiap menit satu truk sampah plastik dibuang ke laut? Jika tidak dihentikan, pada 2050 akan lebih banyak plastik daripada ikan di samudra.”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&lt;span class=""&gt;3.&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: inherit;"&gt;Isi (Body)&lt;/span&gt;&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Menjelaskan topik secara sistematis.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Disertai&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: 600;"&gt;data, fakta, hasil riset, atau contoh konkret&lt;/span&gt;&lt;span class=""&gt;.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Setiap paragraf membahas satu gagasan utama.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Gunakan subjudul jika perlu memperjelas.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&lt;span class=""&gt;4.&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: inherit;"&gt;Penutup&lt;/span&gt;&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Berisi simpulan, pesan moral, atau ajakan (call to action).&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Tidak menghadirkan informasi baru.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;em&gt;Contoh:&lt;/em&gt;&lt;span class=""&gt;&amp;nbsp;“Dengan mengurangi plastik sekali pakai, kita sudah menjadi bagian dari solusi. Yuk, mulai dari membawa tumblr dan tas belanja sendiri!”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&lt;span class=""&gt;5.&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: inherit;"&gt;Daftar Pustaka (opsional)&lt;/span&gt;&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Untuk tulisan yang dikutip dari sumber rujukan, tuliskan sumbernya (buku, jurnal, website kredibel).&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;D. Kaidah Kebahasaan Karya Ilmiah Populer&lt;/span&gt;&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span class=""&gt;Supaya tulisanmu benar-benar ilmiah tetapi enak dibaca, perhatikan penggunaan bahasa berikut:&lt;/span&gt;&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 644px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1 !important; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 630px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -636px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span class=""&gt;Kaidah&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span class=""&gt;Penjelasan&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span class=""&gt;Contoh&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kalimat aktif&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Subjek melakukan aksi, lebih hidup dan langsung.&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;“Petugas konservasi melepasliarkan 50 penyu.” (bukan&amp;nbsp;&lt;/span&gt;&lt;em&gt;50 penyu dilepasliarkan&lt;/em&gt;&lt;span class=""&gt;)&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Istilah ilmiah + penjelasan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Jangan langsung menggunakan istilah teknis tanpa makna populer.&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;“Deforestasi (penggundulan hutan secara permanen) menyebabkan banjir.”&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kata kerja material&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Tindakan fisik yang bisa diamati.&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;“menebang, membakar, menanam, menyelamatkan”&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kata penghubung logis&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Sebab-akibat, pertentangan, penambahan.&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;“oleh karena itu, namun, selain itu, akibatnya”&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kata rujukan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Menghindari pengulangan.&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;“...hutan mangrove. Ekosistem ini mampu menahan abrasi.”&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Penggunaan kata “kita” atau “saya”&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Diperbolehkan asalkan tetap objektif dan tidak berlebihan.&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;“Kita bisa memulai dari hal kecil: memilah sampah.”&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kalimat tidak bertele-tele&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span class=""&gt;Rata-rata panjang kalimat 12–20 kata.&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span class=""&gt;Hindari: “Hutan yang merupakan paru-paru dunia dan tempat tinggal berbagai flora fauna itu sangat penting.”&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Ingat:&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;Jangan menjiplak! Tulis ulang dengan bahasa sendiri. Jika mengutip data, sebutkan sumbernya.&lt;/span&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;E. Tema Konservasi Alam – Ide yang Bisa Kamu Kembangkan&lt;/span&gt;&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span class=""&gt;Berilah judul sesuai minatmu. Contoh topik:&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pelestarian hutan&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– “Restorasi Hutan Gambut: Mengapa Harus dan Bagaimana Caranya?”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Satwa langka&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– “Jalak Bali: Pesona Putih Biru yang Hampir Hilang”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pengelolaan sampah&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– “Zero Waste: Gaya Hidup Keren atau Sekadar Tren?”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Energi terbarukan&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– “Dari Sampah Menjadi Listrik: Cerita PLTSa”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Perubahan iklim&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– “Ketika Nelayan Kehilangan Musim: Dampak Nyata Pemanasan Global”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Konservasi air&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;– “Menabung Air Hujan untuk Musim Kemarau”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;F. Langkah-langkah Menulis Karya Ilmiah Populer&lt;/span&gt;&lt;/h3&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;Langkah 1: Pilih topik spesifik&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span class=""&gt;Jangan terlalu luas. Misal, tidak perlu “Konservasi Alam Indonesia”, cukup “Pelestarian Penyu Hijau di Pantai Pangumbahan”.&lt;/span&gt;&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;Langkah 2: Kumpulkan data dan fakta&lt;/span&gt;&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Dari buku, jurnal, artikel berita, atau wawancara dengan petugas konservasi.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Pastikan sumber kredibel (berpengaruh, terbaru).&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;Langkah 3: Tentukan sudut pandang dan tujuan&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span class=""&gt;Apakah ingin memberi informasi, mengajak aksi, atau meluruskan mitos? Tulis dalam satu kalimat:&amp;nbsp;&lt;/span&gt;&lt;em&gt;“Tulisan ini bertujuan menjelaskan tiga penyebab utama kerusakan terumbu karang dan langkah sederhana yang dapat dilakukan remaja.”&lt;/em&gt;&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;Langkah 4: Buat kerangka tulisan&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span class=""&gt;Contoh kerangka:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Judul: “Rumah Para Ikan: Kenapa Terumbu Karang Perlu Kita Selamatkan?”&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Pembuka: Fakta bahwa terumbu karang hanya 1% lautan tetapi rumah bagi 25% biota laut.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Isi 1: Ancaman (pemutihan karang akibat suhu laut naik, penangkapan ikan dengan bom).&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Isi 2: Dampak bagi manusia (rusaknya pariwisata, berkurangnya ikan tangkapan nelayan).&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Isi 3: Solusi (restorasi karang, patroli laut, edukasi wisatawan).&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Penutup: Ajakan untuk tidak menggunakan tabir surya berbahan kimia berbahaya saat snorkeling.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;Langkah 5: Menulis draft&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span class=""&gt;Kembangkan kerangka dengan kalimat yang mengalir. Gunakan bahasa populer, contoh konkret, dan ilustrasi sederhana.&lt;/span&gt;&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;Langkah 6: Revisi dan edit&lt;/span&gt;&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Cek struktur: apakah pembuka, isi, penutup sudah lengkap?&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Cek bahasa: apakah ada istilah tanpa penjelasan? Apakah kalimat terlalu panjang?&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Cek ejaan dan tanda baca sesuai EYD.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;Langkah 7: Publikasikan&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;(dalam kelas) – bisa dibacakan, ditempel di majalah dinding, atau diunggah ke blog.&lt;/span&gt;&lt;/h4&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;G. Contoh Karya Ilmiah Populer Sederhana&lt;/span&gt;&lt;/h3&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Judul:&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;Saat Plastik Menjadi “Makanan” Ikan&lt;/span&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="margin: 16px 0px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pembuka:&lt;/span&gt;&lt;/div&gt;&lt;span class=""&gt;&lt;div style="text-align: justify;"&gt;Pernahkah kamu melihat gambar ikan dengan perut penuh sampah plastik? Bukan rekayasa. Sebuah penelitian di Jepang menemukan bahwa lebih dari 70% ikan tangkapan di perairan urban mengandung mikroplastik.&lt;/div&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="margin: 16px 0px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Isi:&lt;/span&gt;&lt;/div&gt;&lt;span class=""&gt;&lt;div style="text-align: justify;"&gt;Mikroplastik adalah serpihan plastik berukuran kurang dari 5 mm, berasal dari pecahan botol, kantong, atau serat pakaian sintetis. Ikan mengira plastik sebagai plankton karena warnanya mirip. Ketika manusia memakan ikan itu, plastik masuk ke tubuh kita dan berpotensi mengganggu hormon.&lt;/div&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="margin: 16px 0px; text-align: justify;"&gt;&lt;em&gt;Bagaimana menghentikannya?&lt;/em&gt;&lt;span class=""&gt;&amp;nbsp;Cara paling efektif adalah mengurangi produksi sampah plastik. Misalnya: membawa wadah makan sendiri, menolak sedotan, dan memilah sampah agar tidak terbawa sungai ke laut.&lt;/span&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 16px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Penutup:&lt;/span&gt;&lt;/div&gt;&lt;span class=""&gt;&lt;div style="text-align: justify;"&gt;Bumi tidak membutuhkan kita, tapi kita membutuhkan bumi yang sehat. Mulailah dari satu tindakan kecil: tolak plastik sekali pakai. Ikan-ikan di laut akan berterima kasih.&lt;/div&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;H. Tugas Praktik (dikerjakan pada JP ke-2 dan ke-3)&lt;/span&gt;&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Buatlah sebuah karya ilmiah populer sederhana dengan tema konservasi alam!&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Panjang:&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;200–300 kata (minimal 3 paragraf: pembuka, isi, penutup)&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tema pilihan&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;(salah satu):&lt;/span&gt;&lt;/div&gt;&lt;span class=""&gt;&lt;div style="text-align: justify;"&gt;a. Hemat energi di sekolah&lt;/div&gt;&lt;/span&gt;&lt;span class=""&gt;&lt;div style="text-align: justify;"&gt;b. Menjaga kebersihan sungai&lt;/div&gt;&lt;/span&gt;&lt;span class=""&gt;&lt;div style="text-align: justify;"&gt;c. Pelestarian burung cenderawasih&lt;/div&gt;&lt;/span&gt;&lt;span class=""&gt;&lt;div style="text-align: justify;"&gt;d. Mengurangi penggunaan kertas&lt;/div&gt;&lt;/span&gt;&lt;span class=""&gt;&lt;div style="text-align: justify;"&gt;e. Topik lain yang disetujui guru&lt;/div&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Waktu pengerjaan:&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;50 menit (JP ke-2 &amp;amp; ke-3)&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Setelah selesai:&lt;/span&gt;&lt;span class=""&gt;&amp;nbsp;Tukarkan dengan teman sebangkumu untuk diedit (peer review) – 15 menit.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Format penulisan:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Gunakan kertas folio atau aplikasi pengolah kata.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Cantumkan nama dan kelas.&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; text-align: justify;"&gt;&lt;span class=""&gt;Sertakan minimal satu data atau fakta (bisa dari ingatan sendiri asalkan realistis).&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;span style="font-weight: inherit;"&gt;&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: inherit;"&gt;I.&amp;nbsp;&lt;/span&gt;&lt;span style="font-weight: inherit;"&gt;Penutup untuk Siswa&lt;/span&gt;&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span class=""&gt;Menulis karya ilmiah populer adalah cara ampuh untuk menyuarakan kepedulian terhadap alam. Kalian tidak harus menjadi ilmuwan; kalian cukup menjadi anak SMK yang jujur, kreatif, dan mau mencari fakta. Setiap tulisan yang lahir dari hati dan pikiran jernih bisa menggerakkan orang lain. Selamat menulis, dan jadilah bagian dari perubahan!&lt;/span&gt;&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;“Lingkungan hidup yang baik adalah hak asasi setiap warga negara. Menjaganya adalah kewajiban kita semua.”&lt;/span&gt;&lt;/div&gt;&lt;span class=""&gt;&lt;div style="text-align: justify;"&gt;&lt;span class=""&gt;—&amp;nbsp;&lt;/span&gt;&lt;em&gt;Terinspirasi dari Pasal 28H UUD 1945&lt;/em&gt;&lt;/div&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;</description><link>http://kitab-investasi.blogspot.com/2026/05/menulis-karya-ilmiah-populer-bertema.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-8632948251129087355</guid><pubDate>Tue, 05 May 2026 07:05:00 +0000</pubDate><atom:updated>2026-05-05T14:10:28.017+07:00</atom:updated><title>REFLEKSI PEMBELAJARAN &amp; EKSPLORASI KARIR DI BIDANG IT</title><description>&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px;"&gt;A. Capaian Pembelajaran (CP)&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;Pada akhir fase E, peserta didik mampu memahami dan melakukan refleksi terhadap proses belajar Informatika, mengidentifikasi potensi diri, mengeksplorasi bidang pekerjaan di ekosistem IT, serta mengembangkan literasi profesi dengan kesadaran akan kesehatan mental dan kemandirian sebagai calon tenaga profesional IT.&lt;/p&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px;"&gt;B. Tujuan Pembelajaran (TP)&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;Setelah mengikuti pembelajaran, peserta didik mampu:&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Melakukan refleksi kritis terhadap pencapaian belajar Informatika selama satu semester.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Mengidentifikasi minimal 5 (lima) profesi di bidang IT beserta kompetensi teknis (hard skills) dan non-teknis (soft skills).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Menjelaskan pentingnya literasi profesi (sertifikasi, etika kerja, personal branding).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Menyusun rencana eksplorasi karir awal (peta karir sederhana).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Mengenali tanda-tanda gangguan kesehatan mental akibat tekanan belajar/karir serta menerapkan strategi coping sehat.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Menunjukkan sikap kemandirian dalam merencanakan pengembangan diri (self-directed learning).&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px;"&gt;C. Materi Inti&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;1. Refleksi Pembelajaran: Melihat ke Belakang untuk Melangkah Maju&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Definisi:&lt;/span&gt;&lt;br /&gt;Refleksi adalah proses melihat kembali pengalaman belajar untuk mengevaluasi apa yang sudah dipahami, apa yang masih sulit, dan bagaimana cara memperbaikinya.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tiga Level Refleksi untuk Siswa SMK IT:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Level Teknis:&lt;/span&gt;&amp;nbsp;Apakah saya bisa mengoperasikan software X? Apakah saya paham algoritma dasar?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Level Proses:&lt;/span&gt;&amp;nbsp;Apakah cara belajar saya efektif? Apakah saya sering menunda tugas?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Level Diri (Emosional &amp;amp; Mental):&lt;/span&gt;&amp;nbsp;Apakah saya merasa tertekan saat error? Apakah saya mudah menyerah saat debugging?&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tools Refleksi Sederhana:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px;"&gt;&lt;span style="font-weight: 600;"&gt;Metode 4F (Facts, Feelings, Findings, Future)&lt;/span&gt;&amp;nbsp;dari Dr. Roger Greenaway&lt;/p&gt;&lt;ol start="1" style="list-style-position: inside; margin: 4px 0px 0px; padding-left: 0px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="display: inline; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Facts:&lt;/span&gt;&amp;nbsp;Apa yang sudah saya pelajari tentang IT sejauh ini?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="display: inline; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Feelings:&lt;/span&gt;&amp;nbsp;Bagaimana perasaan saya saat coding error atau saat berhasil?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="display: inline; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Findings:&lt;/span&gt;&amp;nbsp;Apa makna dari kegagalan/keberhasilan itu untuk saya?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="display: inline; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Future:&lt;/span&gt;&amp;nbsp;Apa yang akan saya lakukan lain mulai besok?&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Contoh Jurnal Refleksi:&lt;/span&gt;&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;em&gt;"Hari ini saya gagal membuat koneksi database. Saya merasa frustrasi (feeling). Ternyata saya lupa menulis port yang benar (fact). Saya jadi tahu pentingnya memeriksa konfigurasi detail (findings). Besok saya akan buat checklist debugging (future)."&lt;/em&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;2. Kesehatan Mental dalam Belajar dan Berkarir di IT&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Mengapa IT Rawan Gangguan Mental?&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Impostor Syndrome:&lt;/span&gt;&amp;nbsp;Merasa tidak layak atau "bodoh" dibanding rekan lain karena cepatnya perubahan teknologi.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Burnout:&lt;/span&gt;&amp;nbsp;Kelelahan fisik &amp;amp; emosional akibat coding nonstop, deadline, atau error berkepanjangan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Isolasi Sosial:&lt;/span&gt;&amp;nbsp;Bekerja di depan komputer berjam-jam bisa mengurangi interaksi sosial.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tanda-Tanda Awal (Warning Signs):&lt;/span&gt;&lt;br /&gt;✅ Sulit fokus pada kode sederhana&lt;br /&gt;✅ Mudah marah/putus asa saat muncul error&lt;br /&gt;✅ Kehilangan minat belajar teknologi baru&lt;br /&gt;✅ Gangguan tidur (begadang terus tapi tidak produktif)&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Strategi Menjaga Kesehatan Mental (Untuk Generasi IT):&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Teknik Pomodoro:&lt;/span&gt;&amp;nbsp;25 menit fokus coding + 5 menit istirahat (gerak, minum air).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Komunitas, Bukan Kompetisi:&lt;/span&gt;&amp;nbsp;Ikut grup diskusi (Discord, Telegram, Github Community) untuk berbagi masalah.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Debugging Emosi:&lt;/span&gt;&amp;nbsp;Saat error &amp;gt; 30 menit, tinggalkan meja, jalan kaki 5 menit, lalu kembali.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Batas Waktu Layar:&lt;/span&gt;&amp;nbsp;Matikan laptop 1 jam sebelum tidur.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Affirmasi Positif:&lt;/span&gt;&amp;nbsp;"Error adalah pelajaran, bukan kegagalan saya."&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;3. Eksplorasi Karir di Bidang IT (Ekosistem Digital)&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;Tidak semua pekerjaan IT adalah programmer. Industri digital memiliki jalur karir yang sangat luas.&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; --padding-left: calc(( 1257px - (840px - 2*44px))/2 + (840px - 2*44px - 100%)); --padding-right: 54px; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin-left: calc(100% - 1004.5px); overflow-x: auto; padding-left: calc(-100% + 1004.5px); padding-right: 54px; position: relative; scrollbar-width: none; width: calc(100% + 198.5px); z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 377px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 950.521px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; top: 363px;"&gt;&lt;div class="ds-scroll-area__horizontal-bar" style="background-color: transparent; cursor: initial; height: 10px; left: 0px; margin-bottom: auto; pointer-events: all; position: relative; width: 749.471px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -369px; padding: 0px 2px; position: absolute; right: 0px; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: max-content; width: max-content;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;Klaster&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Profesi&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Hard Skill Wajib&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Soft Skill Prioritas&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Software Engineering&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Web Developer, Mobile Dev, DevOps Engineer, Game Developer&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;JavaScript, Python, Git, CI/CD, Unity&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Problem solving, kolaborasi tim&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Infrastructure &amp;amp; Cybersecurity&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Network Admin, Cloud Engineer, SOC Analyst, Ethical Hacker&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Linux, AWS/Azure, Wireshark, Metasploit&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Teliti, antisipatif, integritas tinggi&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Data&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Data Analyst, Data Scientist, AI Engineer&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;SQL, Python (Pandas), Tableau, TensorFlow&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Berpikir analitis, komunikasi data&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;UI/UX &amp;amp; Design&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;UI Designer, UX Researcher, Product Designer&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Figma, Adobe XD, Miro, prototyping&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Empati user, presentasi visual&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;IT Support &amp;amp; Management&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;IT Support Specialist, IT Project Manager, IT Auditor&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Service desk, Jira/Asana, dasar jaringan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Komunikasi, manajemen waktu, pemecahan masalah cepat&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tren Karir 2025-2030 (yang relevan untuk SMK):&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;AI Prompt Engineer&lt;/span&gt;&amp;nbsp;(membuat instruksi optimal untuk AI)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Low-code/No-code Developer&lt;/span&gt;&amp;nbsp;(membangun aplikasi dengan drag-drop)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Digital Forensics&lt;/span&gt;&amp;nbsp;(investigasi kejahatan siber)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;IT Trainer untuk UMKM&lt;/span&gt;&amp;nbsp;(pelatih teknologi sederhana)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;4. Literasi Profesi: Lebih Dari Sekadar Skill Teknis&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Apa itu literasi profesi?&lt;/span&gt;&lt;br /&gt;Kemampuan memahami dan menjalankan standar dunia kerja di bidang IT, termasuk etika, aturan, sertifikasi, dan membangun reputasi.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Komponen Literasi Profesi untuk Siswa SMK:&lt;/span&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;a. Etika Profesi IT (Kode Etik)&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Jangan menyebarkan password atau data sensitif.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Hargai hak cipta (jangan bajak software/plugin).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Laporkan celah keamanan, jangan eksploitasi.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;b. Sertifikasi Pemula (Entry-Level)&lt;/span&gt;&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; --padding-left: calc(( 1257px - (840px - 2*44px))/2 + (840px - 2*44px - 100%)); --padding-right: 54px; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin-left: calc(100% - 1004.5px); overflow-x: auto; padding-left: calc(-100% + 1004.5px); padding-right: 54px; position: relative; scrollbar-width: none; width: calc(100% + 198.5px); z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 256px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 950.521px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; top: 242px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -248px; padding: 0px 2px; position: absolute; right: 0px; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: max-content; width: max-content;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;Sertifikasi&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Bidang&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Biaya&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Rekomendasi SMK&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;CompTIA IT Fundamentals (ITF+)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Dasar IT&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;~$120&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Wajib untuk semua&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Microsoft MTA (sudah pensiun, ganti MS Learn)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Cloud &amp;amp; Database&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Gratis (voucher)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Sangat baik&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Cisco CCNA (Routing &amp;amp; Switching)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Jaringan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;~$300&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Untuk yang suka jaringan&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;BNSP Skema Junior Web Developer&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Pengembangan Web&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;~Rp 1,5 jt&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Nasional, diakui BSNP&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&#128161;&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Alternatif Gratis:&lt;/span&gt;&amp;nbsp;Ikuti&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Badge/Credential dari Microsoft Learn, AWS Educate, atau Google Digital Garage&lt;/span&gt;&amp;nbsp;— bisa dipajang di LinkedIn.&lt;/p&gt;&lt;/blockquote&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;c. Personal Branding untuk Siswa SMK&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Buat&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Portofolio Digital&lt;/span&gt;&amp;nbsp;(GitHub, GitLab, atau portfolio website sederhana).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Tulis&amp;nbsp;&lt;span style="font-weight: 600;"&gt;LinkedIn&lt;/span&gt;&amp;nbsp;dengan bahasa profesional, isi dengan proyek sekolah.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Jaga&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Digital Footprint&lt;/span&gt;&amp;nbsp;(jejak digital): post yang bijak, tidak toxic.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;d. Kemandirian sebagai Kunci Adaptasi&lt;/span&gt;&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;em&gt;"Teknologi berganti setiap 6 bulan. Diploma hanya bertahan 2 tahun. Kemampuan belajar mandiri bertahan seumur hidup."&lt;/em&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Ciri Kemandirian dalam Belajar IT:&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Mampu mencari solusi error sendiri (baca dokumentasi, stack overflow, cek forum) sebelum bertanya.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Menginisiasi proyek pribadi di luar tugas sekolah.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Mengikuti perkembangan teknologi lewat medium seperti&amp;nbsp;&lt;em&gt;Roadmap.sh&lt;/em&gt;,&amp;nbsp;&lt;em&gt;&lt;a href="https://dev.to/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;Dev.to&lt;/a&gt;&lt;/em&gt;, atau Channel YouTube teknisp.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;5. Peta Karir Awal (Career Roadmap) 2-5 Tahun untuk Lulusan SMK IT&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tahun 1-2 (Sekolah/Magang)&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Fokus kuasai 1 bahasa pemrograman dengan baik (misal: JavaScript atau Python).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Bangun 3 proyek portofolio (misal: Kalkulator, To-do list, Landing page).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Ikut magang atau proyek komunitas.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kesehatan mental:&lt;/span&gt;&amp;nbsp;Belajar menerima&amp;nbsp;&lt;em&gt;feedback&lt;/em&gt;&amp;nbsp;tanpa defensive.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tahun 3-4 (Junior/Staf IT)&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Dapatkan sertifikasi entry-level (BNSP/Microsoft/CompTIA).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Pelajari version control (Git) dengan benar.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Mulai aktif di komunitas (Google Developer Group, OWASP, atau lokal).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kemandirian:&lt;/span&gt;&amp;nbsp;Pelajari framework/libraries terbaru sesuai tren industri.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tahun 5 (Menuju Middle/Spesialis)&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Pilih spesialisasi (misal: Frontend Expert, Network Security, Data Analyst).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Targetkan sertifikasi profesional (CCNA, AWS SAA, dll).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Bisa mentoring junior atau menjadi trainer internal.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Mental health:&lt;/span&gt;&amp;nbsp;Rutin melakukan&amp;nbsp;&lt;em&gt;digital detox&lt;/em&gt;&amp;nbsp;dan work-life balance.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px;"&gt;D. Referensi untuk Guru &amp;amp; Siswa&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;&lt;ul style="font-size: 16px; font-weight: 400; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;&lt;em&gt;Mindset: The New Psychology of Success&lt;/em&gt;&amp;nbsp;– Carol Dweck (untuk konsep kemandirian)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;&lt;em&gt;The Imposter Cure&lt;/em&gt;&amp;nbsp;– Dr. Jessamy Hibberd (untuk kesehatan mental)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;Situs:&amp;nbsp;&lt;a href="https://roadmap.sh/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;roadmap.sh&lt;/a&gt;&amp;nbsp;(peta belajar karir IT)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;Situs:&amp;nbsp;&lt;a href="https://developer.mozilla.org/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;developer.mozilla.org&lt;/a&gt;&amp;nbsp;(belajar mandiri web)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;Sertifikasi gratis:&amp;nbsp;&lt;a href="https://learn.microsoft.com/id-id/training/student-hub/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;Microsoft Learn Student Hub&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-size: 16px; font-weight: 400; height: 1px; margin: 32px 0px;" /&gt;&lt;p class="ds-markdown-paragraph" style="font-size: 16px; font-weight: 400; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Penutup untuk Murid:&lt;/span&gt;&lt;/p&gt;&lt;blockquote style="border-left: 1.11111px solid rgb(173, 178, 184); font-size: 16px; font-weight: 400; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;&lt;em&gt;"Kehebatan seorang teknisi IT tidak diukur dari seberapa cepat dia coding, tapi dari seberapa tangguh dia menghadapi error, seberapa mandiri dia mencari solusi, dan seberapa sehat dia menjaga pikirannya. IT adalah marathon, bukan sprint."&lt;/em&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;/h3&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;Pengetahuan (Post-test )&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;Jawab secara singkat:&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Sebutkan 3 tanda awal burnout di bidang IT.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Sebutkan 2 contoh literasi profesi selain sertifikasi.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Mengapa seorang programmer perlu belajar mandiri walaupun sudah bekerja?&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;/div&gt;

&lt;details open=""&gt;
  &lt;summary style="color: blue; cursor: pointer; font-weight: bold;"&gt;
    Klik untuk melihat teks tersembunyi
  &lt;/summary&gt;
  &lt;div style="border: 1px solid rgb(204, 204, 204); margin-top: 5px; padding: 10px;"&gt;
   &lt;p&gt; .&lt;br /&gt;&lt;br /&gt;Jawaban pertanyaan  di atas:&lt;br /&gt;&lt;br /&gt;
     &lt;/p&gt;&lt;ol&gt;
  &lt;li&gt;(Kehilangan minat, mudah marah saat error, gangguan tidur).&lt;/li&gt;
  &lt;li&gt;(Etika profesi, personal branding, menjaga jejak digital).&lt;/li&gt;
  &lt;li&gt;(Karena teknologi berubah cepat, tidak selalu ada pelatihan formal)&lt;/li&gt;
   &lt;/ol&gt;


  &lt;p&gt;&lt;/p&gt;&lt;/div&gt;
&lt;/details&gt;</description><link>http://kitab-investasi.blogspot.com/2026/05/refleksi-pembelajaran-eksplorasi-karir.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-2621604377754025193</guid><pubDate>Tue, 05 May 2026 04:10:00 +0000</pubDate><atom:updated>2026-05-05T12:10:58.085+07:00</atom:updated><title>Menganalisis Struktur Karya Ilmiah Populer</title><description>&lt;h2 style="text-align: justify;"&gt;&amp;nbsp;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="background-color: white; color: #0f1115; font-size: 20px;"&gt;Topik: Menganalisis Struktur Karya Ilmiah Populer&lt;/span&gt;&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;/h3&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;A. Capaian Pembelajaran (CP)&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Murid mampu memahami, mengidentifikasi, dan menganalisis struktur serta kaidah kebahasaan karya ilmiah populer sebagai bagian dari pengembangan literasi kritis dan komunikasi ilmiah di dunia kerja.&lt;/p&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;B. Tujuan Pembelajaran (TP)&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Setelah mengikuti pembelajaran, murid mampu:&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Menjelaskan pengertian dan karakteristik karya ilmiah populer&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Mengidentifikasi bagian-bagian struktur karya ilmiah populer&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Membedakan karya ilmiah populer dengan karya ilmiah murni dan non-ilmiah&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Menganalisis struktur karya ilmiah populer dari contoh teks&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Menyusun kerangka karya ilmiah populer sederhana&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;C. Materi Inti&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;1. Pengertian Karya Ilmiah Populer&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Karya ilmiah populer&lt;/span&gt;&amp;nbsp;adalah tulisan yang menyajikan fakta ilmiah, data, atau hasil penelitian dengan bahasa yang mudah dipahami oleh masyarakat umum (bukan kalangan akademisi semata). Tujuannya adalah&amp;nbsp;&lt;span style="font-weight: 600;"&gt;memopulerkan&lt;/span&gt;&amp;nbsp;ilmu pengetahuan agar dapat diakses, dipahami, dan dimanfaatkan oleh khalayak luas.&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Istilah Kunci:&lt;/span&gt;&amp;nbsp;"Populer" berarti disukai, dikenal, dan dipahami banyak orang. "Ilmiah" berarti berdasarkan metode keilmuan (fakta, data, observasi, penelitian). Jadi, karya ilmiah populer = ilmu pengetahuan yang disajikan secara menarik dan ringan.&lt;/p&gt;&lt;/blockquote&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Contoh media yang memuat karya ilmiah populer:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Majalah:&amp;nbsp;&lt;em&gt;National Geographic Indonesia, Bobo, Trubus, Intisari&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Surat kabar: Rubrik opini, sains, atau teknologi di&amp;nbsp;&lt;em&gt;Kompas, Jawa Pos&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Website:&amp;nbsp;&lt;em&gt;BBC News Indonesia&lt;/em&gt;&amp;nbsp;(rubrik sains),&amp;nbsp;&lt;em&gt;Science Daily&lt;/em&gt;&amp;nbsp;(versi populer)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Buku: Buku sains populer seperti&amp;nbsp;&lt;em&gt;Sapiens&lt;/em&gt;&amp;nbsp;(Yuval Noah Harari),&amp;nbsp;&lt;em&gt;Brief Answers to the Big Questions&lt;/em&gt;&amp;nbsp;(Stephen Hawking)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;2. Perbedaan Karya Ilmiah, Ilmiah Populer, dan Non-Ilmiah&lt;/h3&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; --padding-left: calc(( 1257px - (840px - 2*44px))/2 + (840px - 2*44px - 100%)); --padding-right: 54px; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin-left: calc(100% - 1004.5px); overflow-x: auto; padding-left: calc(-100% + 1004.5px); padding-right: 54px; position: relative; scrollbar-width: none; width: calc(100% + 198.5px); z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 373px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 950.521px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; top: 359px;"&gt;&lt;div class="ds-scroll-area__horizontal-bar" style="background-color: transparent; cursor: initial; height: 10px; left: 0px; margin-bottom: auto; pointer-events: all; position: relative; text-align: justify; width: 869.387px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -365px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: max-content; text-align: justify; width: max-content;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;Aspek&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Karya Ilmiah Murni&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Karya Ilmiah Populer&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Karya Non-Ilmiah&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Pembaca&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Akademisi, peneliti, mahasiswa&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Masyarakat umum (tanpa latar belakang khusus)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Umum, tanpa tuntutan keilmuan&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Bahasa&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Formal, teknis, banyak istilah asing&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Semi-formal, komunikatif, istilah dijelaskan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Bebas, subjektif, bisa emotif&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Struktur&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Ketat (Pendahuluan, Metode, Hasil, Pembahasan, Daftar Pustaka)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Fleksibel namun tetap logis&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Bebas (narasi, deskripsi, opini)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Sumber&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Daftar pustaka lengkap (wajib)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Sumber disebut tapi tidak selalu formal&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Bisa tanpa sumber&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tujuan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Mengembangkan ilmu pengetahuan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Menyebarluaskan ilmu ke publik&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Hiburan, persuasi, ekspresi&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Contoh&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Skripsi, tesis, jurnal ilmiah&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Artikel sains di majalah, buku sains populer&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Cerpen, novel, opini di media sosial&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;3. Karakteristik Karya Ilmiah Populer&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Agar dapat membedakannya dari jenis tulisan lain, perhatikan 6 ciri utama berikut:&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Objektif&lt;/span&gt;&amp;nbsp;→ Berdasarkan fakta, bukan pendapat pribadi tanpa data.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Faktual&lt;/span&gt;&amp;nbsp;→ Data yang disajikan dapat diverifikasi kebenarannya.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Sistematis&lt;/span&gt;&amp;nbsp;→ Disusun dengan alur logis (bukan acak).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Komunikatif&lt;/span&gt;&amp;nbsp;→ Bahasa mudah dimengerti, tidak bertele-tele.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Menarik&lt;/span&gt;&amp;nbsp;→ Menggunakan judul provokatif, ilustrasi, analogi, atau contoh sehari-hari.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Bertanggung jawab&lt;/span&gt;&amp;nbsp;→ Tidak menyembunyikan sumber rujukan (meski tidak serumit karya ilmiah).&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;4. Struktur Karya Ilmiah Populer&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Karya ilmiah populer&amp;nbsp;&lt;span style="font-weight: 600;"&gt;tidak sekaku&lt;/span&gt;&amp;nbsp;karya ilmiah murni, namun tetap memiliki pola baku yang terdiri dari 5 bagian utama:&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;Struktur Pokok:&lt;/h4&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; --padding-left: calc(( 1257px - (840px - 2*44px))/2 + (840px - 2*44px - 100%)); --padding-right: 54px; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin-left: calc(100% - 1004.5px); overflow-x: auto; padding-left: calc(-100% + 1004.5px); padding-right: 54px; position: relative; scrollbar-width: none; width: calc(100% + 198.5px); z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 352px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 950.521px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; top: 338px;"&gt;&lt;div class="ds-scroll-area__horizontal-bar" style="background-color: transparent; cursor: initial; height: 10px; left: 0px; margin-bottom: auto; pointer-events: all; position: relative; text-align: justify; width: 923.808px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -344px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: max-content; text-align: justify; width: max-content;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;No.&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Bagian&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Fungsi&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Elemen yang Harus Ada&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;1&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span style="font-weight: 600;"&gt;Judul&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Menarik perhatian dan mewakili isi&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Singkat, jelas, provokatif (tanpa berlebihan)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;2&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span style="font-weight: 600;"&gt;Pembuka (Lead)&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Memberi gambaran masalah / fenomena&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Menjawab: apa yang dibahas? mengapa penting?&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;3.&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span style="font-weight: 600;"&gt;Isi / Pembahasan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Menyajikan fakta, data, teori, dan argumentasi&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Alur logis, dilengkapi contoh, analogi, atau ilustrasi&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;4&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span style="font-weight: 600;"&gt;Penutup / Simpulan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Merangkum inti dan memberi pesan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Berupa simpulan, saran, atau ajakan bertindak&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;5&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;span style="font-weight: 600;"&gt;Daftar Pustaka (Opsional)&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Menunjukkan sumber informasi&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Minimal mencantumkan sumber utama&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tambahan:&lt;/span&gt;&amp;nbsp;Beberapa karya ilmiah populer juga mencantumkan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;identitas penulis&lt;/span&gt;&amp;nbsp;(latar belakang keilmuan) untuk menambah kredibilitas.&lt;/p&gt;&lt;/blockquote&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;Penjelasan Detail Setiap Bagian:&lt;/h4&gt;&lt;h5 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;a. Judul&lt;/h5&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Harus&amp;nbsp;&lt;span style="font-weight: 600;"&gt;menggugah rasa ingin tahu&lt;/span&gt;&amp;nbsp;tetapi tetap jujur terhadap isi.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;Contoh judul efektif:&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;"Mengapa Sampah Plastik Lebih Berbahaya daripada yang Kita Kira?"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;"Fakta di Balik Kopi: Teman atau Musuh Tidur?"&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Hindari judul sensasional yang menyesatkan (&lt;em&gt;clickbait&lt;/em&gt;).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h5 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;b. Pembuka (Lead)&lt;/h5&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Biasanya 1–2 paragraf pertama.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Mengandung:&amp;nbsp;&lt;span style="font-weight: 600;"&gt;latar belakang masalah&lt;/span&gt;&amp;nbsp;atau&amp;nbsp;&lt;span style="font-weight: 600;"&gt;fenomena sehari-hari&lt;/span&gt;&amp;nbsp;yang dekat dengan pembaca.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Harus menjawab 3 pertanyaan dasar:&amp;nbsp;&lt;em&gt;Apa yang dibahas?&lt;/em&gt;&amp;nbsp;&lt;em&gt;Mengapa ini penting?&lt;/em&gt;&amp;nbsp;&lt;em&gt;Untuk siapa tulisan ini?&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Contoh kalimat pembuka yang baik:&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;*"Setiap hari, rata-rata orang Indonesia menghasilkan 0,8 kg sampah. Namun yang lebih mengkhawatirkan, hanya 10% yang terdaur ulang. Lalu, ke mana sisanya? Artikel ini akan membahas alur sampah plastik dari rumah hingga ke laut."*&lt;/p&gt;&lt;/blockquote&gt;&lt;h5 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;c. Isi / Pembahasan&lt;/h5&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Merupakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;inti&lt;/span&gt;&amp;nbsp;dari karya ilmiah populer. Di sini penulis:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Menyajikan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;data&lt;/span&gt;&amp;nbsp;(angka, grafik, tabel sederhana, hasil penelitian).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Menjelaskan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;teori atau konsep&lt;/span&gt;&amp;nbsp;dengan bahasa awam (penggunaan analogi, perumpamaan, contoh kasus).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Memberi&amp;nbsp;&lt;span style="font-weight: 600;"&gt;argumentasi logis&lt;/span&gt;&amp;nbsp;yang mendukung pernyataan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Mengutip&amp;nbsp;&lt;span style="font-weight: 600;"&gt;sumber terpercaya&lt;/span&gt;&amp;nbsp;(bisa disebutkan dalam teks, misal:&amp;nbsp;&lt;em&gt;"Menurut penelitian LIPI tahun 2022..."&lt;/em&gt;).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Strategi penulisan isi yang baik:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Gunakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;subjudul&lt;/span&gt;&amp;nbsp;untuk memecah topik besar.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Sisipkan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;ilustrasi, diagram, atau foto&lt;/span&gt;&amp;nbsp;jika memungkinkan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Hindari kalimat terlalu panjang dan istilah asing tanpa penjelasan.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Contoh paragraf isi:&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;*"Pernahkah Anda memperhatikan bintik-bintik hitam di gigi setelah minum kopi? Itu adalah tanin, senyawa kimia dalam kopi yang bersifat adhesif (mudah menempel). Dalam jurnal Food Chemistry (2021), disebutkan bahwa tanin dapat mengikis enamel gigi jika dikonsumsi berlebihan. Tapi jangan cemas—penelitian yang sama juga menemukan bahwa menyikat gigi 30 menit setelah minum kopi dapat mengurangi efek tersebut."*&lt;/p&gt;&lt;/blockquote&gt;&lt;h5 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;d. Penutup / Simpulan&lt;/h5&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Merangkum&amp;nbsp;&lt;span style="font-weight: 600;"&gt;poin-poin penting&lt;/span&gt;&amp;nbsp;tanpa mengulang seluruh isi.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Memberikan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;pesan&lt;/span&gt;&amp;nbsp;atau&amp;nbsp;&lt;span style="font-weight: 600;"&gt;rekomendasi&lt;/span&gt;&amp;nbsp;yang bisa dilakukan pembaca.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Bisa juga berupa&amp;nbsp;&lt;span style="font-weight: 600;"&gt;pertanyaan reflektif&lt;/span&gt;&amp;nbsp;agar pembaca berpikir lebih lanjut.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Contoh penutup:&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;em&gt;"Kopi bukanlah musuh, tetapi juga bukan teman tanpa syarat. Dengan memahami tanin dan cara mengatasinya, kita tetap bisa menikmati kopi tanpa mengorbankan kesehatan gigi. Yang terpenting adalah keseimbangan dan kebiasaan menyikat gigi yang benar."&lt;/em&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;h5 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;e. Daftar Pustaka&lt;/h5&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Meskipun tidak serumit skripsi, sumber informasi harus dicantumkan agar tulisan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;kredibel&lt;/span&gt;&amp;nbsp;dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;dapat dipertanggungjawabkan&lt;/span&gt;. Format bisa disederhanakan, misal:&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;em&gt;Sumber: Kementerian Kesehatan RI (2023); Jurnal Food Chemistry Vol. 345 (2021); wawancara dengan Dr. Andi Wijaya, pakar gizi UI.&lt;/em&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;5. Kaidah Kebahasaan Karya Ilmiah Populer&lt;/h3&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 548px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 534px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -540px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;Kaidah&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Penjelasan&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Contoh dalam Teks&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Konjungsi kausalitas&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Kata hubung sebab-akibat (karena, oleh sebab itu, akibatnya, sehingga)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;"Akibatnya, kadar gula darah melonjak drastis."&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Istilah teknis + penjelasan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Istilah ilmiah diikuti penjelasan populer&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;"Proses&amp;nbsp;&lt;em&gt;oksidasi&lt;/em&gt;&amp;nbsp;(reaksi zat dengan oksigen) terjadi..."&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kalimat fakta&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Berisi data, hasil penelitian, pernyataan ahli&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;"Berdasarkan data BMKG, suhu rata-rata naik 1,2°C."&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kalimat opini terbatas&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Opini hanya sebagai simpulan, bukan dasar argumen&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;"Maka, bijaksana untuk mengurangi penggunaan plastik."&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kata rujukan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Merujuk pada informasi sebelumnya&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;"Hal ini memperkuat teori bahwa..."&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Penggunaan kata ganti orang pertama jamak&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;"Kita" atau "kami" untuk menciptakan kedekatan dengan pembaca&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;"Sekarang kita pahami mengapa..."&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;6. Contoh Teks Karya Ilmiah Populer (Singkat)&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Berikut contoh teks dengan struktur lengkap. Bacalah lalu identifikasi setiap bagiannya!&lt;/p&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Judul:&lt;/span&gt;&amp;nbsp;Bahaya Tersembunyi di Balik Kemudahan Makanan Instan&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pembuka:&lt;/span&gt;&lt;/div&gt;&lt;div style="text-align: justify;"&gt;Siapa yang tak kenal mi instan, nugget, atau sereal sarapan? Dalam hitungan menit, makanan ini siap disantap. Namun, di balik kemudahannya, tersimpan risiko kesehatan yang sering diabaikan. Sebuah studi dari Harvard School of Public Health (2020) mengungkapkan bahwa konsumsi makanan ultraproses meningkat hingga 50% di Asia Tenggara selama dekade terakhir.&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Isi / Pembahasan:&lt;/span&gt;&lt;/div&gt;&lt;div style="text-align: justify;"&gt;Pertama, makanan instan biasanya mengandung&amp;nbsp;&lt;span style="font-weight: 600;"&gt;natrium (garam)&lt;/span&gt;&amp;nbsp;sangat tinggi. Satu bungkus mi instan rata-rata mengandung 1.500–2.000 mg natrium, hampir memenuhi batas maksimal harian yang dianjurkan WHO (2.000 mg). Asupan natrium berlebih memicu tekanan darah tinggi dan penyakit ginjal.&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Kedua, rendah serat dan nutrisi. Dalam proses produksi, sebagian besar vitamin dan mineral hilang. Yang ditambahkan kembali hanyalah beberapa jenis vitamin sintetis, tidak seimbang dengan kebutuhan tubuh.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Ketiga, kandungan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;lemak trans&lt;/span&gt;&amp;nbsp;dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;pengawet&lt;/span&gt;. Lemak trans meningkatkan kolesterol jahat (LDL) dan menurunkan kolesterol baik (HDL). Sebuah penelitian di Thailand (2022) menemukan bahwa remaja yang mengonsumsi makanan instan &amp;gt;4 kali seminggu memiliki risiko obesitas 2,5 kali lebih tinggi.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Tapi bukan berarti kita harus menghindari sama sekali. Kuncinya adalah&amp;nbsp;&lt;span style="font-weight: 600;"&gt;kontrol porsi&lt;/span&gt;&amp;nbsp;dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;kombinasi&lt;/span&gt;. Misalnya, menambahkan telur dan sayur pada mi instan, atau memilih produk dengan label "rendah natrium".&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Penutup:&lt;/span&gt;&lt;/div&gt;&lt;div style="text-align: justify;"&gt;Makanan instan memang penyelamat di saat sibuk. Namun, menjadi "penyelamat" jangka panjang hanya jika dikonsumsi bijak. Mulailah dengan membaca label gizi, membatasi frekuensi, dan selalu menambah komponen segar. Tubuh sehat adalah investasi paling berharga.&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Daftar Pustaka:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Harvard School of Public Health. (2020).&amp;nbsp;&lt;em&gt;Ultra-processed foods and health&lt;/em&gt;.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;WHO. (2021).&amp;nbsp;&lt;em&gt;Sodium intake for adults and children&lt;/em&gt;.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Thailand Nutrition Survey. (2022).&amp;nbsp;&lt;em&gt;Adolescent dietary patterns&lt;/em&gt;.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;7. Langkah Menganalisis Struktur Karya Ilmiah Populer&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Gunakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;metode 5L&lt;/span&gt;&amp;nbsp;untuk menganalisis teks:&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Lihat Judul&lt;/span&gt;&amp;nbsp;→ Apakah judul menarik? Apakah mewakili isi?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Lacak Pembuka&lt;/span&gt;&amp;nbsp;→ Temukan paragraf pembuka. Apa fenomena yang diangkat?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Lebarkan Isi&lt;/span&gt;&amp;nbsp;→ Identifikasi fakta, data, teori, dan contoh yang disajikan. Apakah ada subjudul? Apakah alurnya logis?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Limpahkan ke Penutup&lt;/span&gt;&amp;nbsp;→ Apakah ada simpulan? Apakah sesuai dengan isi?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Lacak Sumber&lt;/span&gt;&amp;nbsp;→ Apakah ada daftar pustaka atau setidaknya sumber disebut dalam teks?&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div style="text-align: justify;"&gt;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif" style="color: #0f1115;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style="text-align: justify;"&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: start;"&gt;E. Penugasan dan Evaluasi&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: start;"&gt;Soal Formatif (Dikerjakan Kelompok)&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: start;"&gt;&lt;span style="font-weight: 600;"&gt;Petunjuk:&lt;/span&gt;&amp;nbsp;Bacalah kutipan teks ilmiah populer berikut, lalu jawab pertanyaan!&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px; text-align: start;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 16px;"&gt;&lt;em&gt;Kutipan Teks (Judul: "Kenapa Ponsel Bikin Mata Cepat Lelah?" - dihilangkan strukturnya)&lt;/em&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 16px; margin: 16px 0px 0px;"&gt;"Setiap hari, rata-rata orang menatap layar ponsel selama 7 jam. Fenomena ini melahirkan istilah baru:&amp;nbsp;&lt;em&gt;digital eye strain&lt;/em&gt;. Menurut American Optometric Association, gejala yang muncul antara lain mata kering, penglihatan kabur sementara, dan sakit kepala. Penyebab utamanya adalah cahaya biru (&lt;em&gt;blue light&lt;/em&gt;) dari layar dan jarak pandang yang terlalu dekat. Solusi sederhananya adalah aturan 20-20-20: setiap 20 menit, lihat objek sejauh 20 kaki selama 20 detik."&lt;/p&gt;&lt;/blockquote&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: start;"&gt;&lt;span style="font-weight: 600;"&gt;Pertanyaan:&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px; text-align: start;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Manakah bagian&amp;nbsp;&lt;span style="font-weight: 600;"&gt;pembuka&lt;/span&gt;&amp;nbsp;dalam kutipan di atas? Tuliskan kalimatnya!&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Manakah&amp;nbsp;&lt;span style="font-weight: 600;"&gt;data atau fakta&lt;/span&gt;&amp;nbsp;yang disajikan?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Jika teks ini dilengkapi penutup, kira-kira apa isi penutup yang sesuai?&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Sebutkan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;satu kaidah kebahasaan&lt;/span&gt;&amp;nbsp;yang muncul dalam kutipan dan beri bukti kalimat!&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;

&lt;details open=""&gt;
  &lt;summary style="color: blue; cursor: pointer; font-weight: bold;"&gt;
    Klik untuk melihat teks tersembunyi
  &lt;/summary&gt;
  &lt;div style="border: 1px solid rgb(204, 204, 204); margin-top: 5px; padding: 10px;"&gt;
   &lt;p&gt; .&lt;br /&gt;&lt;br /&gt;Jawaban pertanyaan teks di atas:&lt;br /&gt;&lt;br /&gt;
     &lt;/p&gt;&lt;ol&gt;
  &lt;li&gt;"Setiap hari... digital eye strain." (Kalimat pertama dan kedua).&lt;/li&gt;
  &lt;li&gt;Rata-rata 7 jam menatap layar; gejala menurut American Optometric Association; aturan 20-20-20.&lt;/li&gt;
  &lt;li&gt;Simpulan tentang pentingnya istirahat mata dan saran menerapkan aturan 20-20-20.&lt;/li&gt;
  &lt;li&gt;Konjungsi kausalitas: "Penyebab utamanya adalah..." atau penggunaan istilah teknis + penjelasan: "cahaya biru (blue light)"..&lt;/li&gt;
 &lt;/ol&gt;


  &lt;p&gt;&lt;/p&gt;&lt;/div&gt;
&lt;/details&gt;</description><link>http://kitab-investasi.blogspot.com/2026/05/menganalisis-struktur-karya-ilmiah.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-777168959155164367</guid><pubDate>Sat, 02 May 2026 01:05:00 +0000</pubDate><atom:updated>2026-05-05T10:59:40.591+07:00</atom:updated><title>Presentasi Karya Digital &amp; Peer Review dalam Pameran</title><description>&lt;h2 style="text-align: justify;"&gt;&amp;nbsp;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="background-color: white; color: #0f1115; font-size: 20px;"&gt;1. Presentasi Karya Digital&lt;/span&gt;&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Presentasi karya digital adalah kegiatan menyampaikan ide, proses, dan hasil karya berbasis teknologi (aplikasi, web, animasi, dll.) kepada audiens. Tujuannya bukan hanya memamerkan hasil, tetapi juga menjelaskan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;nilai lebih&lt;/span&gt;,&amp;nbsp;&lt;span style="font-weight: 600;"&gt;keunikan&lt;/span&gt;, dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;manfaat&lt;/span&gt;&amp;nbsp;karya tersebut.&lt;/p&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;2. Pameran Digital / Simulasi Pameran&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Pameran digital dapat dilakukan secara luring (menggunakan stan/laptop) atau daring (platform seperti Google Site, Padlet, atau virtual exhibition). Di SMK, pameran sering menjadi ajah&amp;nbsp;&lt;em&gt;showcase&lt;/em&gt;&amp;nbsp;kompetensi keahlian (RPL, Multimedia, TKJ, dll.).&lt;/p&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;3. Peer Review (Tinjauan Sejawat)&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;em&gt;Peer review&lt;/em&gt;&amp;nbsp;adalah proses evaluasi karya oleh orang lain yang setara (teman sekelas). Tujuannya:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Memberikan umpan balik yang konstruktif (bukan sekadar kritik).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Melatih objektivitas dan etika dalam menilai.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Meningkatkan kualitas karya melalui saran perbaikan.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Prinsip Peer Review&lt;/span&gt;: Jujur, spesifik, objektif, menghargai, dan berfokus pada karya (bukan pribadi).&lt;/p&gt;&lt;/blockquote&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;APA ITU MMT DAN KARYA TEMPEL?&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;MMT&lt;/span&gt;&amp;nbsp;dalam konteks sekolah adalah singkatan dari&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Media Masa Tempel&lt;/span&gt;&amp;nbsp;atau&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Mading Tembok&lt;/span&gt;&amp;nbsp;– yaitu media visual berupa poster, banner, atau lembaran yang&amp;nbsp;&lt;span style="font-weight: 600;"&gt;ditempel&lt;/span&gt;&amp;nbsp;di tempat strategis (koridor, ruang kelas, aula, kantin). Tujuannya: menyampaikan informasi, nilai, motivasi, dan identitas sekolah secara menarik.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Contoh penggunaan MMT:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pojok integritas (berisi kawasan integritas, visi-misi)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Dinding motivasi (berisi kata bijak dan tagline)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Stand profil lulusan (8 profil)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Karya Digital yang Dibuat&lt;/span&gt;:&lt;/div&gt;&lt;div style="text-align: justify;"&gt;Setiap siswa/kelompok membuat desain MMT dengan ukuran standar (misal A2, A1, atau 60x90 cm) yang secara utuh memuat:&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Quote kata bijak&lt;/span&gt;&amp;nbsp;(pilih 1-2 kutipan inspiratif, relevan dengan karakter SMK)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Visi &amp;amp; Misi sekolah&lt;/span&gt;&amp;nbsp;(sesuai data sekolah masing-masing)&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div style="text-align: justify;"&gt;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif" style="color: #0f1115; font-size: medium;"&gt;&lt;div style="text-align: left;"&gt;a. Visi, Misi dan Tujuan Sekolah a. Visi Visi SMK Negeri 1 Tuntang adalah:&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&amp;nbsp;“ T e r w u j u d n y a&amp;nbsp; l u l u s a n&amp;nbsp; y a n g&amp;nbsp; b e r t a q w a , b e r k a r a k t e r , kompeten d a n&amp;nbsp; s i a p m e n g h a d a p i t a n t a n g a n g l o b a l berbasis kearifan lokal.”&lt;/div&gt;&lt;div style="text-align: left;"&gt;&amp;nbsp;&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;b.&amp;nbsp; &amp;nbsp; Misi&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&amp;nbsp;Misi SMK Negeri 1 Tuntang adalah:&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&amp;nbsp;1.&amp;nbsp; Menanamkan Nilai Keimanan dan Ketaqwaan&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;Mengintegrasikan pendidikan agama dalam setiap aspek pembelajaran untuk membentuk Murid yang beriman, bertakwa, dan memiliki landasan moral yang kuat dalam menjalani kehidupan.&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;2.&amp;nbsp; Membangun Karakter yang Unggul&amp;nbsp;&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;Mengembangkan karakter 5S (senyum, salam, sapa, sopan dan santun) Murid&amp;nbsp;melalui&amp;nbsp; kegiatan pembelajaran yang holistik, pelatihan soft skills, dan kegiatan ekstrakurikuler yang berorientasi pada kedisiplinan, tanggung jawab, kerja keras, serta nilai- nilai etika dan moral.&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style="text-align: left;"&gt;3.&amp;nbsp; Meningkatkan Kompetensi Kejuruan yang Relevan dengan Kebutuhan Industri&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&amp;nbsp;Menyediakan pendidikan kejuruan yang berbasis pada teknologi terkini dan kebutuhan dunia industri, serta mengadakan pelatihan yang berkelanjutan untuk memastikan Murid&amp;nbsp;siap bekerja dengan keterampilan yang kompetitif.&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style="text-align: left;"&gt;4.&amp;nbsp; Mempersiapkan Murid&amp;nbsp;untuk Menghadapi Tantangan Global Berbasis Kearifan Lokal.&amp;nbsp;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&amp;nbsp;Mengembangkan kemampuan Murid&amp;nbsp;dalam berpikir kritis, inovatif, dan beradaptasi dengan perkembangan global melalui pendidikan yang berbasis pada riset, teknologi, dan kewirausahaan dengan tetap berpegang teguh pada nilai-nilai lokal ke-Indonesiaan.&amp;nbsp;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tagline sekolah&lt;/span&gt;&amp;nbsp;(slogan khas sekolah, misal:&amp;nbsp;&lt;em&gt;"Skaneta DIGDAYA (Disiplin, Iman Taqwa &amp;amp; Integritas, Gotong Rorong, Daya Saing"&lt;/em&gt;)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tulisan KAWASAN INTEGRITAS&lt;/span&gt;&amp;nbsp;(bisa disertai logo atau pernyataan bebas korupsi 9 nilai Integritas&amp;nbsp;&lt;span face="&amp;quot;Google Sans&amp;quot;, Arial, sans-serif" style="color: #001d35; font-weight: 600; text-align: left;"&gt;Jujur, Peduli, Mandiri, Disiplin, Tanggung Jawab, Kerja Keras, Sederhana, Berani, dan Adi&lt;/span&gt;&amp;nbsp;)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;8 Profil Lulusan&lt;/span&gt;&amp;nbsp;(biasanya berisi indikator:&amp;nbsp;&lt;mark class="HxTRcb" data-sfc-cb="" data-sfc-root="c" data-wiz-uids="Anp1Le_9" jsaction="click:&amp;amp;Anp1Le_8|h5M12e;mouseenter:&amp;amp;Anp1Le_8|sbHm2b;mouseleave:&amp;amp;Anp1Le_8|Tx5Rb;rcuQ6b:&amp;amp;Anp1Le_8|npT2md" jscontroller="DfH0l" jsuid="Anp1Le_8" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(211, 227, 253); border-radius: 4px; color: #001d35; font-family: &amp;quot;Google Sans&amp;quot;, Arial, sans-serif; font-size: medium; padding: 0px 2px; text-align: start;"&gt;keimanan &amp;amp; ketakwaan, kewargaan, penalaran kritis, kreativitas, kolaborasi, kemandirian, kesehatan, dan komunikasi&lt;/mark&gt;&lt;span face="&amp;quot;Google Sans&amp;quot;, Arial, sans-serif" style="color: #0a0a0a; font-size: medium; text-align: start;"&gt;.&lt;/span&gt;– sesuaikan dengan profil lulusan SMK setempat)&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Catatan untuk guru:&lt;/span&gt;&amp;nbsp;Jika sekolah tidak memiliki 8 profil lulusan resmi, gunakan standar&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Profil Pelajar Pancasila&lt;/span&gt;&amp;nbsp;atau profil lulusan SMK Pusat Keunggulan.&lt;/p&gt;&lt;/blockquote&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;B. KOMPONEN KONTEN WAJIB DALAM DESAIN MMT&lt;/h2&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; --padding-left: calc(( 1257px - (840px - 2*44px))/2 + (840px - 2*44px - 100%)); --padding-right: 54px; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin-left: calc(100% - 1004.5px); overflow-x: auto; padding-left: calc(-100% + 1004.5px); padding-right: 54px; position: relative; scrollbar-width: none; width: calc(100% + 198.5px); z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 377px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 950.521px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; top: 363px;"&gt;&lt;div class="ds-scroll-area__horizontal-bar" style="background-color: transparent; cursor: initial; height: 10px; left: 0px; margin-bottom: auto; pointer-events: all; position: relative; text-align: justify; width: 933.183px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -369px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: max-content; text-align: justify; width: max-content;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;No&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Komponen&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Contoh Isi&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Posisi Ideal dalam Desain&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;1&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Quote Kata Bijak&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;em&gt;"Jadilah profesional yang jujur sebelum menjadi ahli."&lt;/em&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Di tengah/atas, ukuran besar&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;2&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Visi &amp;amp; Misi&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Visi: "Unggul dalam prestasi, berkarakter integritas." Misi: 3 poin singkat&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Di sisi kiri atau kanan, menggunakan bullet points&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;3&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Tagline Sekolah&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;&lt;em&gt;"SMK Prestasi, Integritas, Global"&lt;/em&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Di bawah judul atau samping logo&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;4&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Kawasan Integritas&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;"Kawasan Integritas: Zona Bebas Korupsi" + deklarasi singkat&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Dibuat seperti "stempel" atau badge&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;5&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;8 Profil Lulusan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;1. Beriman, 2. Mandiri, 3. Bernalar kritis... dst.&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Disusun dalam grid 2x4 atau melingkar&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Prinsip penulisan konten:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Singkat, padat, mudah diingat.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Gunakan huruf kapital yang tepat (tidak semua kapital untuk teks panjang).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Hindari typo – cek ulang visi-misi sekolah.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;C. PRINSIP DESAIN GRAFIS UNTUK MMT (MEDIA TEMPEL)&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Agar MMT menarik dan mudah dibaca dari jarak 1-2 meter, gunakan kaidah berikut:&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 402px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 388px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -394px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;Prinsip&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Penjelasan&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Contoh Penerapan&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kontras&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Warna teks dan latar harus cukup berbeda&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Latar putih, teks hitam/biru tua; latar gelap, teks putih/terang&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tipografi&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Maksimal 2 jenis font: satu untuk judul, satu untuk isi&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Judul: sans-serif tebal (Arial Black); Isi: sans-serif biasa (Poppins)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Hierarki visual&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Elemen paling penting paling mencolok (judul/quote)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Ukuran font judul minimal 72pt, isi 32pt (untuk A2)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Ruang kosong&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Jangan penuh sesak, beri margin dan spasi&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Setiap blok konten diberi border/garis pemisah&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kesesuaian tema&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Sekolah: formal namun tidak kaku, bisa sedikit warna cerah&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Gunakan warna biru, hijau, atau warna khas sekolah&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Rekomendasi ukuran &amp;amp; resolusi (untuk dicetak/ditempel):&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Ukuran: 60 cm × 90 cm (potrait) atau 90 cm × 60 cm (landscape).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Resolusi: 300 DPI (untuk cetak) atau 150 DPI (untuk tempel non-cetak kualitas baik).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Format file: PNG (untuk cetak) atau PDF (presisi).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;D. PROSES PEMBUATAN KARYA (TUGAS SISWA)&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tugas Individu atau Kelompok (2-3 orang)&lt;/span&gt;&amp;nbsp;– disesuaikan dengan jumlah siswa.&lt;/div&gt;&lt;span style="font-weight: 600;"&gt;&lt;div style="text-align: justify;"&gt;Output akhir:&amp;nbsp;File desain MMT + rencana lokasi tempel di sekolah.&lt;/div&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Langkah kerja (dilaksanakan sebelum sesi presentasi):&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pengumpulan data:&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Salin visi, misi, tagline, dan 8 profil lulusan dari dokumen sekolah (bisa minta ke guru BK atau tata usaha).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Cari 2 quote kata bijak yang sesuai dengan karakter siswa SMK (misal tentang kerja keras, integritas, kompetensi).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Sketsa kasar (wireframe):&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Buat 2 alternatif tata letak di kertas/kertas grid.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Tentukan posisi masing-masing 5 komponen.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Eksekusi dengan alat digital:&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Canva&lt;/span&gt;&amp;nbsp;(rekomendasi untuk pemula: gunakan ukuran kustom 60x90 cm, gunakan grid, fitur teks dan elemen)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Adobe Express&lt;/span&gt;&amp;nbsp;/&amp;nbsp;&lt;span style="font-weight: 600;"&gt;CorelDRAW&lt;/span&gt;&amp;nbsp;/&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Photoshop&lt;/span&gt;&amp;nbsp;/&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Inkscape&lt;/span&gt;&amp;nbsp;(jika siswa mampu)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Penyimpanan dan ekspor:&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Simpan dalam dua versi:&amp;nbsp;&lt;span style="font-weight: 600;"&gt;editable&lt;/span&gt;&amp;nbsp;(untuk revisi) dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;final&lt;/span&gt;&amp;nbsp;(PNG/PDF untuk pameran).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Simulasi tempel:&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Siswa menuliskan 1-2 lokasi strategis di sekolah (contoh: samping papan pengumuman, depan ruang guru, koridor kelas X) sebagai usulan.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ol&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tenggat:&lt;/span&gt;&amp;nbsp;Sebelum pertemuan presentasi, semua karya sudah jadi dan dikumpulkan guru di folder digital (Google Drive bersama).&lt;/p&gt;&lt;/blockquote&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;E. PRESENTASI KARYA DIGITAL (SESI PAMERAN)&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Setiap siswa/kelompok mempresentasikan desain MMT dalam&amp;nbsp;&lt;span style="font-weight: 600;"&gt;3-4 menit&lt;/span&gt;&amp;nbsp;dengan struktur:&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 306px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 292px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -298px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;Bagian&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Durasi&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Aktivitas&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Pembuka&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;30 detik&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Menyebut judul MMT, tujuan dibuat (misal: "Meningkatkan kesadaran integritas")&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Konten &amp;amp; Desain&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;1,5 menit&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Perlihatkan 5 komponen wajib, jelaskan alasan letak dan pemilihan warna/font&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Kelebihan &amp;amp; Tantangan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;1 menit&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Apa yang paling menarik dari desain? Kesulitan saat membuat (misal: menyusun 8 profil agar rapi)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Rencana Pemasangan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;30 detik&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Di mana akan ditempel? Mengapa di situ?&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Yang dinilai dalam presentasi:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Kejelasan suara &amp;amp; bahasa tubuh.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Kemampuan menjelaskan pilihan desain (misal: "Saya pakai warna biru karena warna sekolah").&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Jawaban atas pertanyaan audiens.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;F. PEER REVIEW (TINJAUAN SEJAWAT) UNTUK DESAIN MMT&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Setiap pengunjung pameran (teman sekelas) mengisi&amp;nbsp;&lt;span style="font-weight: 600;"&gt;lembar peer review&lt;/span&gt;&amp;nbsp;dengan rubrik khusus desain tempel. Berikut&amp;nbsp;&lt;span style="font-weight: 600;"&gt;rubrik peer review&lt;/span&gt;&amp;nbsp;(skor 1–4, 4 terbaik):&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; --padding-left: calc(( 1257px - (840px - 2*44px))/2 + (840px - 2*44px - 100%)); --padding-right: 54px; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin-left: calc(100% - 1004.5px); overflow-x: auto; padding-left: calc(-100% + 1004.5px); padding-right: 54px; position: relative; scrollbar-width: none; width: calc(100% + 198.5px); z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 281px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 950.521px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; top: 267px;"&gt;&lt;div class="ds-scroll-area__horizontal-bar" style="background-color: transparent; cursor: initial; height: 10px; left: 0px; margin-bottom: auto; pointer-events: all; position: relative; text-align: justify; width: 763.838px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -273px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: max-content; text-align: justify; width: max-content;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;Kriteria&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Skor 1 (Kurang)&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Skor 3 (Cukup)&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Skor 4 (Sangat Baik)&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kelengkapan konten&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Kurang dari 3 komponen wajib&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;5 komponen lengkap tapi ada yang kurang jelas&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;5 komponen lengkap, informatif, dan akurat&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Keterbacaan jarak jauh&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Huruf terlalu kecil, kontras buruk&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Bisa dibaca dari 1 meter&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Bisa dibaca dari 2 meter, kontras bagus&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Estetika &amp;amp; tata letak&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Berantakan, tidak ada hirarki&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Cukup rapi, semua blok terlihat&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Profesional, enak dilihat, kreatif&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kesesuaian dengan identitas sekolah&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Visi-misi salah atau tidak sesuai&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Visi-misi tepat, tagline kurang&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Semua sesuai, mencerminkan karakter sekolah&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Format peer review sederhana (diberikan ke reviewer):&lt;/span&gt;&lt;/p&gt;&lt;div class="md-code-block md-code-block-light" style="--ds-md-code-banner-background-color: #f9fafb; --ds-md-code-block-border-radius: 12px; --ds-md-code-block-font-size: calc(1.143*11px); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-radius: 12px; margin: 16px 0px 11.43px; position: relative;"&gt;&lt;div class="md-code-block-banner-wrap" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; position: sticky; top: 0px; z-index: 6;"&gt;&lt;div class="md-code-block-banner md-code-block-banner-lite" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-top-left-radius: 12px; border-top-right-radius: 12px; display: flex; font-size: 12.573px; justify-content: space-between; line-height: 12.573px; padding: 0px;"&gt;&lt;div class="_121d384" style="align-items: center; display: flex; justify-content: space-between; padding: 6px; width: 740.052px;"&gt;&lt;div class="d2a24f03" style="flex-shrink: 0; text-align: justify;"&gt;&lt;span class="d813de27" face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="font-size: 12px; line-height: 18px; margin-left: 8px;"&gt;text&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;pre style="font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 22px; margin: 0px; overflow: auto; padding: 16px; word-break: break-all;"&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;Nama reviewer: _____________   Karya milik: _____________  &lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;1. Apa yang paling menarik dari desain MMT ini?&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;2. Berikan 1 saran perbaikan (spesifik, misal: "Ganti warna latar quote dengan kuning agar lebih kontras").&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;3. Skor kelengkapan konten (1-4): ___&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;4. Skor keterbacaan (1-4): ___&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;5. Apakah desain ini layak ditempel di sekolah? (Ya / Tidak, jika tidak, jelaskan)&lt;/div&gt;&lt;div style="text-align: justify;"&gt;&lt;span face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="color: #0f1115; text-wrap-mode: wrap;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;span face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="color: #0f1115; text-wrap-mode: wrap;"&gt;&lt;div style="text-align: justify;"&gt;Catatan untuk pembuat karya: Gunakan saran ini untuk merevisi sebelum dicetak/ditempel.&lt;/div&gt;&lt;/span&gt;&lt;/pre&gt;&lt;svg class="_9bc997d _33882ae" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;/svg&gt;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="color: #0f1115;"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/span&gt;&lt;svg class="_9bc997d _28d7e84" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;/svg&gt;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="color: #0f1115;"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/span&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Etika peer review:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Jangan menyerang pribadi, tetap objektif.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Sertakan pujian di awal.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Saran harus actionable (bisa langsung dilakukan).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;</description><link>http://kitab-investasi.blogspot.com/2026/05/presentasi-karya-digital-peer-review.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-6489435456076764239</guid><pubDate>Thu, 30 Apr 2026 07:22:00 +0000</pubDate><atom:updated>2026-04-30T14:37:12.530+07:00</atom:updated><title>serttifikat kombel</title><description>&lt;html lang="id"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;&lt;/meta&gt;
&lt;meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"&gt;&lt;/meta&gt;
&lt;title&gt;Generator Sertifikat - Kombel&lt;/title&gt;

&lt;!-- Google Font Montserrat --&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&amp;amp;display=swap" rel="stylesheet"&gt;&lt;/link&gt;
&lt;!-- jsPDF dari CDN resmi --&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"&gt;&lt;/script&gt;

&lt;style&gt;
* {
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    max-width: 700px;
    margin: 20px auto;
    padding: 16px;
    background: #eef2f7;
}
.card {
    background: white;
    padding: 24px 20px;
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}
h2 {
    text-align: center;
    margin: 0 0 20px 0;
    color: #1e4668;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.confirm-box {
    background: linear-gradient(135deg, #f0f6ff, #e9f0fa);
    border-left: 5px solid #2c7da0;
    padding: 16px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 24px;
}
.confirm-box p {
    margin: 0 0 12px 0;
    font-weight: 600;
    font-size: 1.1rem;
}
.confirm-btn {
    margin: 0 6px;
    padding: 10px 24px;
    border: none;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.9rem;
}
.yes { background: #1f8a4c; color: white; }
.yes:hover { background: #2ecc71; transform: scale(1.02); }
.no { background: #b03a2e; color: white; }
.no:hover { background: #e74c3c; transform: scale(1.02); }
#confirmMessage {
    margin-top: 12px;
    min-height: 40px;
}
.warning {
    color: #c0392b;
    background: #fee9e7;
    padding: 6px 14px;
    border-radius: 50px;
    display: inline-block;
    font-weight: bold;
}
.success {
    color: #1f8a4c;
    background: #e0f2e9;
    padding: 6px 14px;
    border-radius: 50px;
    display: inline-block;
    font-weight: bold;
}
.instruction-box {
    background: #fef7e0;
    border-left: 5px solid #f4b942;
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}
.instruction-box h3 {
    margin: 0 0 8px 0;
    color: #b85c00;
    display: flex;
    align-items: center;
    gap: 8px;
}
.instruction-box ol {
    margin: 8px 0 0 18px;
    padding-left: 0;
}
.instruction-box li {
    margin-bottom: 6px;
    line-height: 1.4;
}
label {
    display: block;
    margin-top: 18px;
    font-weight: 600;
    color: #1e4668;
}
input, select {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    font-size: 1rem;
    transition: 0.2s;
    background: white;
}
input:focus, select:focus {
    border-color: #2c7da0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(44,125,160,0.2);
}
button {
    font-weight: bold;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    transition: 0.2s;
}
.generate-btn {
    width: 100%;
    margin-top: 28px;
    background: #2c7da0;
    color: white;
    padding: 14px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.generate-btn:hover:not(:disabled) {
    background: #1f5e7a;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(44,125,160,0.3);
}
.generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #94a3b8;
}
input:disabled, select:disabled {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden;
    backdrop-filter: blur(3px);
}
.spinner {
    background: white;
    padding: 24px 32px;
    border-radius: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-weight: bold;
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
}
.spinner::before {
    content: "";
    width: 40px;
    height: 40px;
    border: 5px solid #e2e8f0;
    border-top-color: #2c7da0;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="card"&gt;
    &lt;h2&gt;&#128220; Generator Sertifikat Kombel&lt;/h2&gt;

    &lt;!-- Konfirmasi partisipasi --&gt;
    &lt;div class="confirm-box"&gt;
        &lt;p&gt;&#128269; Konfirmasi keikutsertaan&lt;/p&gt;
        &lt;button class="confirm-btn yes" id="confirmYesBtn"&gt;YA, saya ikut&lt;/button&gt;
        &lt;button class="confirm-btn no" id="confirmNoBtn"&gt;TIDAK, saya tidak ikut&lt;/button&gt;
        &lt;div id="confirmMessage"&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Petunjuk --&gt;
    &lt;div class="instruction-box"&gt;
        &lt;h3&gt;&#128204; Cara unduh sertifikat&lt;/h3&gt;
        &lt;ol&gt;
            &lt;li&gt;Konfirmasi "YA, saya ikut"&lt;/li&gt;
            &lt;li&gt;Upload template sertifikat (PNG/JPG)&lt;/li&gt;
            &lt;li&gt;Isi nama lengkap dan pilih peran&lt;/li&gt;
            &lt;li&gt;Klik "UNDUH PDF" — tunggu sebentar&lt;/li&gt;
            &lt;li&gt;File PDF akan otomatis tersimpan&lt;/li&gt;
        &lt;/ol&gt;
        &lt;p style="color: #666666; font-size: 13px; margin-top: 10px;"&gt;✅ Pastikan template gambar memiliki resolusi tinggi (minimal 1500x1000px) agar teks rapi.&lt;/p&gt;
        &lt;p style="color: #2c7da0; font-size: 13px; margin-top: 5px;"&gt;✅ Nomor sertifikat otomatis diambil dari Google Sheet mulai 096/K/IV/2026.&lt;/p&gt;
    &lt;/div&gt;

    &lt;!-- Form utama --&gt;
    &lt;div id="formContainer"&gt;
        &lt;label&gt;&#128248; Upload Template PNG / JPG&lt;/label&gt;
        &lt;input accept="image/png, image/jpeg, image/jpg" disabled="" id="template" type="file" /&gt;

        &lt;label&gt;✍️ Nama Lengkap&lt;/label&gt;
        &lt;input disabled="" id="nama" placeholder="Contoh: Ahmad Fauzi" type="text" /&gt;

        &lt;label&gt;&#127917; Peran&lt;/label&gt;
        &lt;select disabled="" id="peran"&gt;
            &lt;option value="peserta"&gt;Peserta&lt;/option&gt;
            &lt;option value="narasumber"&gt;Narasumber&lt;/option&gt;
        &lt;/select&gt;

        &lt;button class="generate-btn" disabled="" id="generateBtn"&gt;⬇️ UNDUH PDF&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Loading spinner --&gt;
&lt;div class="loading-overlay" id="loadingOverlay"&gt;
    &lt;div class="spinner"&gt;Memproses sertifikat...&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
// ======================== ELEMEN ========================
const templateInput = document.getElementById('template');
const namaInput = document.getElementById('nama');
const peranSelect = document.getElementById('peran');
const generateBtn = document.getElementById('generateBtn');
const confirmMessageDiv = document.getElementById('confirmMessage');
const loadingOverlay = document.getElementById('loadingOverlay');
const confirmYesBtn = document.getElementById('confirmYesBtn');
const confirmNoBtn = document.getElementById('confirmNoBtn');

// ======================== FUNGSI UTILITY ========================
function setFormDisabled(disabled) {
    templateInput.disabled = disabled;
    namaInput.disabled = disabled;
    peranSelect.disabled = disabled;
    generateBtn.disabled = disabled;
    if (disabled) {
        generateBtn.style.opacity = '0.6';
    } else {
        generateBtn.style.opacity = '1';
    }
}

function showLoading(show) {
    loadingOverlay.style.visibility = show ? 'visible' : 'hidden';
}

// Konversi bulan ke Romawi
function getRomanMonth(monthIndex) {
    const romawi = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"];
    return romawi[monthIndex];
}

// Kapitalisasi setiap kata
function capitalizeEachWord(text) {
    return text.toLowerCase().replace(/\b\w/g, c =&gt; c.toUpperCase());
}

// ======================== NOMOR SERTIFIKAT (Google Sheets + Fallback) ========================
// ⚠️ GANTI URL INI DENGAN URL WEB APP ANDA SETELAH DEPLOY
const GAS_URL = 'https://script.google.com/macros/s/AKfycbzwwBl2LCKYalub_INFhqixc6Z1AoznrbI_6eUdywcmkoZsDCxtm4balwgYX6ft5lqm-Q/exec'; // GANTI DENGAN URL ASLI ANDA

// Fungsi JSONP dengan timeout 10 detik (diperpanjang untuk stabilitas)
function jsonpRequestWithTimeout(url, timeoutMs = 10000) {
    return new Promise((resolve, reject) =&gt; {
        const callbackName = 'jsonp_cb_' + Date.now() + '_' + Math.random().toString(36).substr(2, 8);
        const timeoutId = setTimeout(() =&gt; {
            if (window[callbackName]) {
                delete window[callbackName];
            }
            if (script &amp;&amp; script.parentNode) script.parentNode.removeChild(script);
            reject(new Error('Timeout JSONP'));
        }, timeoutMs);

        window[callbackName] = (data) =&gt; {
            clearTimeout(timeoutId);
            delete window[callbackName];
            if (script &amp;&amp; script.parentNode) script.parentNode.removeChild(script);
            resolve(data);
        };

        const script = document.createElement('script');
        const separator = url.includes('?') ? '&amp;' : '?';
        script.src = `${url}${separator}callback=${callbackName}&amp;action=increment`;
        script.onerror = (err) =&gt; {
            clearTimeout(timeoutId);
            delete window[callbackName];
            if (script.parentNode) script.parentNode.removeChild(script);
            reject(new Error('Script load error'));
        };
        document.body.appendChild(script);
    });
}

async function getNextNomor() {
    try {
        const data = await jsonpRequestWithTimeout(GAS_URL, 10000);
        if (data &amp;&amp; typeof data.nomor === 'number') {
            return data.nomor;
        } else {
            throw new Error('Invalid response');
        }
    } catch (error) {
        console.warn('Fallback ke localStorage karena:', error);
        let local = localStorage.getItem('nomorSertifikatFallback');
        let next = local ? parseInt(local) + 1 : 96;
        localStorage.setItem('nomorSertifikatFallback', next);
        return next;
    }
}

async function generateNomorSertifikat() {
    const today = new Date();
    const bulanRomawi = getRomanMonth(today.getMonth());
    const tahun = today.getFullYear();
    const nomorUrut = await getNextNomor();
    const nomorFormat = String(nomorUrut).padStart(3, '0');
    return `${nomorFormat}/K/${bulanRomawi}/${tahun}`;
}

// ======================== GENERATE PDF DENGAN POSISI RELATIF &amp; FONT DINAMIS ========================
async function generatePDF() {
    if (generateBtn.disabled) return;

    const file = templateInput.files[0];
    let nama = namaInput.value.trim();
    let peran = peranSelect.value;

    if (!file) {
        alert("⚠️ Upload template sertifikat terlebih dahulu!");
        return;
    }
    if (!nama) {
        alert("⚠️ Nama lengkap wajib diisi!");
        return;
    }

    nama = capitalizeEachWord(nama);
    peran = capitalizeEachWord(peran);

    // Tampilkan loading
    showLoading(true);

    try {
        // Pastikan font Montserrat sudah siap (fallback tetap berfungsi)
        await document.fonts.ready;
        
        // Baca file gambar sebagai dataURL
        const imageDataURL = await readFileAsDataURL(file);
        
        // Muat gambar ke dalam Image object
        const img = await loadImage(imageDataURL);
        
        // Buat canvas dengan ukuran asli gambar
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        
        // Gambar background template
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        
        // ========== POSISI RELATIF (berdasarkan proporsi contoh 2000x1414) ==========
        // Koordinat asli contoh: nomorY=340 (24% dari tinggi 1414), namaY=555 (39.2%), peranY=760 (53.7%)
        const relativePos = {
            nomorY: 0.240,   // 340/1414
            namaY: 0.3925,   // 555/1414
            peranY: 0.5375    // 760/1414
        };
        
        const posY_nomor = canvas.height * relativePos.nomorY;
        const posY_nama = canvas.height * relativePos.namaY;
        const posY_peran = canvas.height * relativePos.peranY;
        
        // Ukuran font relatif terhadap lebar canvas (berdasarkan lebar 2000px -&gt; font 62px =&gt; 3.1%)
        const baseFontRatio = 0.031;   // 62/2000
        let fontSizeNama = canvas.width * baseFontRatio;
        // Batas minimal dan maksimal
        fontSizeNama = Math.min(80, Math.max(28, fontSizeNama));
        
        const fontSizeNomor = Math.min(28, Math.max(18, canvas.width * 0.019));   // 28/2000 ≈ 1.9%
        const fontSizePeran = Math.min(38, Math.max(22, canvas.width * 0.024));    // 38/2000 = 2.4%
        
        // Pengaturan teks
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "#000000";
        
        // 1. NOMOR
        ctx.font = `bold ${fontSizeNomor}px 'Montserrat', Arial, sans-serif`;
        ctx.fillText(nomorSertifikat, canvas.width / 2, posY_nomor);
        
        // 2. NAMA (dengan auto-shrink jika terlalu panjang)
        let currentFontSize = fontSizeNama;
        ctx.font = `700 ${currentFontSize}px 'Montserrat', Arial, sans-serif`;
        let textWidth = ctx.measureText(nama).width;
        const maxWidth = canvas.width - 180; // margin kiri-kanan
        while (textWidth &gt; maxWidth &amp;&amp; currentFontSize &gt; 20) {
            currentFontSize -= 2;
            ctx.font = `700 ${currentFontSize}px 'Montserrat', Arial, sans-serif`;
            textWidth = ctx.measureText(nama).width;
        }
        ctx.fillText(nama, canvas.width / 2, posY_nama);
        
        // 3. PERAN
        ctx.font = `bold ${fontSizePeran}px 'Montserrat', Arial, sans-serif`;
        ctx.fillText(peran, canvas.width / 2, posY_peran);
        
        // Konversi canvas ke JPEG kualitas tinggi
        const finalImageData = canvas.toDataURL('image/jpeg', 0.95);
        
        // Buat PDF dengan ukuran sesuai canvas (landscape)
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF({
            orientation: canvas.width &gt; canvas.height ? 'landscape' : 'portrait',
            unit: 'px',
            format: [canvas.width, canvas.height]
        });
        pdf.addImage(finalImageData, 'JPEG', 0, 0, canvas.width, canvas.height);
        
        // Nama file aman (tanpa karakter ilegal)
        const safeName = nama.replace(/[^a-z0-9]/gi, '_').substring(0, 50);
        pdf.save(`Sertifikat_${safeName}.pdf`);
        
    } catch (error) {
        console.error('Gagal membuat PDF:', error);
        alert('Terjadi kesalahan saat membuat PDF. Pastikan template gambar valid dan coba lagi.');
    } finally {
        showLoading(false);
    }
}

// Helper: baca file sebagai DataURL
function readFileAsDataURL(file) {
    return new Promise((resolve, reject) =&gt; {
        const reader = new FileReader();
        reader.onload = (e) =&gt; resolve(e.target.result);
        reader.onerror = (err) =&gt; reject(err);
        reader.readAsDataURL(file);
    });
}

// Helper: load gambar dari DataURL
function loadImage(src) {
    return new Promise((resolve, reject) =&gt; {
        const img = new Image();
        img.crossOrigin = "Anonymous"; // tidak perlu tapi aman
        img.onload = () =&gt; resolve(img);
        img.onerror = (err) =&gt; reject(new Error('Gagal memuat gambar template'));
        img.src = src;
    });
}

// Variabel global untuk nomor sertifikat (disimpan sementara)
let nomorSertifikat = '';

// Fungsi utama generate: ambil nomor dulu lalu proses PDF
async function handleGenerate() {
    if (generateBtn.disabled) return;
    // Ambil nomor terbaru (dengan loading)
    showLoading(true);
    try {
        nomorSertifikat = await generateNomorSertifikat();
        await generatePDF();  // di dalam generatePDF akan showLoading lagi, tapi kita sudah menampilkan loading
    } catch (err) {
        console.error(err);
        alert('Gagal mengambil nomor sertifikat. Periksa koneksi atau coba lagi.');
        showLoading(false);
    }
}

// ======================== KONFIRMASI ========================
function confirmYes() {
    setFormDisabled(false);
    confirmMessageDiv.innerHTML = '&lt;span class="success"&gt;✔ Konfirmasi diterima. Silakan upload template dan isi data.&lt;/span&gt;';
    // Reset nilai form
    templateInput.value = '';
    namaInput.value = '';
    peranSelect.value = 'peserta';
}

function confirmNo() {
    setFormDisabled(true);
    confirmMessageDiv.innerHTML = '&lt;span class="warning"&gt;✖ Anda tidak berhak membuat sertifikat.&lt;/span&gt;';
    // Reset form
    templateInput.value = '';
    namaInput.value = '';
}

// Event listeners
confirmYesBtn.addEventListener('click', confirmYes);
confirmNoBtn.addEventListener('click', confirmNo);
generateBtn.addEventListener('click', handleGenerate);

// Inisialisasi awal: form nonaktif
setFormDisabled(true);
confirmMessageDiv.innerHTML = '&lt;span style="color:#2c7da0;"&gt;⚠️ Klik "YA, saya ikut" untuk mengaktifkan form.&lt;/span&gt;';

// Pastikan jsPDF sudah siap (optional)
if (!window.jspdf) {
    console.warn("jsPDF belum load, coba refresh");
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQveX72YlDJgoglxZ6wtOOtuBxdggTP3w8okJdem_T8oXLdmeRPMD8nYPGDDmBuULGaQ8pQnEdSsB3TDkSpfFaN8fo9Ybm9K-dXRR6MIHMKlTkaLV6bSBhZcUb6e0gTaoxfBWo-SixAnIqJY47iiWX403xFbjYCISN0OuDMFjoK6it8TYWDIf1ee9lg0/s2000/SERTIFIKAT%20KOMBEL%205.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="1414" data-original-width="2000" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQveX72YlDJgoglxZ6wtOOtuBxdggTP3w8okJdem_T8oXLdmeRPMD8nYPGDDmBuULGaQ8pQnEdSsB3TDkSpfFaN8fo9Ybm9K-dXRR6MIHMKlTkaLV6bSBhZcUb6e0gTaoxfBWo-SixAnIqJY47iiWX403xFbjYCISN0OuDMFjoK6it8TYWDIf1ee9lg0/w640-h452/SERTIFIKAT%20KOMBEL%205.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;</description><link>http://kitab-investasi.blogspot.com/2026/04/serttifikat-kombel.html</link><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQveX72YlDJgoglxZ6wtOOtuBxdggTP3w8okJdem_T8oXLdmeRPMD8nYPGDDmBuULGaQ8pQnEdSsB3TDkSpfFaN8fo9Ybm9K-dXRR6MIHMKlTkaLV6bSBhZcUb6e0gTaoxfBWo-SixAnIqJY47iiWX403xFbjYCISN0OuDMFjoK6it8TYWDIf1ee9lg0/s72-w640-h452-c/SERTIFIKAT%20KOMBEL%205.png" width="72"/><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-3122584870475104061</guid><pubDate>Fri, 24 Apr 2026 01:37:00 +0000</pubDate><atom:updated>2026-04-27T07:45:44.182+07:00</atom:updated><title>MENGENAL PORTOFOLIO DIGITAL</title><description>&lt;h2 style="text-align: justify;"&gt;&amp;nbsp;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="background-color: white; color: #0f1115; font-size: 20px;"&gt;A. Pengertian Portofolio Digital&lt;/span&gt;&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Portofolio digital adalah kumpulan karya, proyek, dan pengalaman yang disusun secara online sehingga mudah diakses oleh perekrut, guru, maupun calon klien&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;. Dalam konteks siswa SMK, portofolio digital merupakan representasi profesional dari kompetensi, keahlian, dan pencapaian yang telah diraih selama masa sekolah.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Portofolio digital berbeda dengan CV. Jika CV hanya memberikan ringkasan riwayat hidup dan kualifikasi, portofolio memberikan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;bukti nyata&lt;/span&gt;&amp;nbsp;dalam bentuk visual dan praktis dari apa yang telah dihasilkan&lt;a href="https://thimpress.com/create-a-portfolio-website-for-free-using-canva/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/p&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;B. Fungsi dan Manfaat Portofolio Digital bagi Siswa SMK&lt;/h3&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 452px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 438px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -444px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Fungsi&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Penjelasan&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Bukti kemampuan nyata&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Perekrut atau HRD bisa melihat langsung bukti kemampuan, bukan sekadar membaca daftar riwayat hidup&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Personal branding&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Siswa dapat mengontrol bagaimana ingin dikenal — sebagai desainer grafis, programmer, analis data, dll&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Memudahkan akses karya&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Tidak perlu repot mengirim file satu per satu — cukup kirim link portofolio&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Nilai tambah saat melamar magang/kerja&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Punya portofolio membedakan siswa dari pelamar lain yang hanya mengirim CV biasa&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Dokumentasi profesional&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Semua proyek, pencapaian, dan sertifikat terdokumentasi rapi dalam satu tempat&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;C. Perbedaan Portofolio Digital vs Portofolio Cetak&lt;/h3&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 327px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 313px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -319px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Aspek&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Portofolio Digital&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Portofolio Cetak&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Kemudahan edit&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Dapat diedit kapan saja dalam beberapa klik&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Sulit diubah setelah dicetak&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Cara sharing&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Dibagikan instan via email/link&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Harus dicetak dan dikirim fisik&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Keberlanjutan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Tidak kedaluwarsa, bisa terus diperbarui&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Cepat usang jika ada proyek baru&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Lingkungan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Ramah lingkungan (tanpa kertas/tinta)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Menghabiskan banyak kertas dan tinta&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Aksesibilitas&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Bisa diakses dari mana saja, kapan saja&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Butuh perangkat cetak dan file fisik&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;em&gt;Sumber: Canva, website portfolio guide&lt;/em&gt;&lt;a href="https://www.canva.com/id_id/situs-web/website-portfolio/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;D. Komponen Portofolio Digital yang Wajib Ada untuk Siswa SMK&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Berdasarkan panduan CV dan portofolio untuk siswa SMA/SMK, berikut komponen yang wajib ada&lt;a href="https://stekom.ac.id/artikel/apa-saja-yang-harus-dimasukkan-ke-dalam-cv-dan-portofolio-anak-smasmk" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;:&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;1.&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Curriculum Vitae (CV) Digital&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Berisi:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Data diri lengkap&lt;/span&gt;: nama lengkap, alamat, nomor telepon aktif, email profesional&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Ringkasan profil&lt;/span&gt;: satu paragraf pendek tentang motivasi, tujuan, dan masa depan&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pendidikan&lt;/span&gt;: nama sekolah, jurusan, tahun masuk dan lulus (perkiraan)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Keahlian&lt;/span&gt;: keterampilan teknis (software, programming, dll) dan nonteknis (komunikasi, kerja tim)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pengalaman organisasi/ekstrakurikuler/PKL&lt;/span&gt;&amp;nbsp;(jika ada): posisi, periode, deskripsi tanggung jawab&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pencapaian/prestasi&lt;/span&gt;: lomba, sertifikat pelatihan, penghargaan lainnya&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;2.&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Kumpulan Karya dan Proyek&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Tampilkan 3–5 proyek terbaik yang relevan dengan kompetensi dan jurusan&lt;a href="https://surabaya.telkomuniversity.ac.id/cara-membangun-portofolio-digital-yang-menarik-untuk-mahasiswa-panduan-lengkap-rekomendasi-platform-terbaik/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;. Setiap proyek sebaiknya dilengkapi dengan:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Judul proyek&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Deskripsi singkat&lt;/span&gt;&amp;nbsp;tentang latar belakang dan tujuan&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Peran/kontribusi&lt;/span&gt;&amp;nbsp;(jika proyek kelompok)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tools yang digunakan&lt;/span&gt;&amp;nbsp;(misal: Figma, Canva, Adobe Photoshop, VS Code, dll)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Hasil akhir/dampak&lt;/span&gt;&amp;nbsp;dari proyek tersebut&lt;a href="https://surabaya.telkomuniversity.ac.id/cara-membangun-portofolio-digital-yang-menarik-untuk-mahasiswa-panduan-lengkap-rekomendasi-platform-terbaik/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;3.&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Halaman Web Portofolio&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Website yang menyatukan semua komponen di atas dalam satu tempat yang rapi dan mudah diakses&lt;a href="https://www.canva.com/id_id/situs-web/website-portfolio/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;. Website harus memiliki:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Halaman utama yang menarik&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Halaman "Tentang Saya"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Halaman CV (bisa PDF yang disematkan)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Halaman proyek/karya&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Halaman prestasi/sertifikat&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Halaman kontak&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;E. Platform untuk Membuat Portofolio Digital&lt;/h3&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 281px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 267px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -273px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Platform&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Kelebihan&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Cocok untuk&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Google Sites&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Gratis, mudah, terintegrasi dengan Google Drive, langsung terbit&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Pemula, siswa SMK, website dasar&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Canva&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Template menarik, drag-and-drop, bisa export PDF/website&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;CV digital, presentasi portofolio, desain visual&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;LinkedIn&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Jaringan profesional, rekruter aktif&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Mencari magang/kerja&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Wix/Blogger&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Lebih banyak fitur kustomisasi&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Website portofolio yang lebih kompleks&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Jika ingin solusi cepat dan gratis untuk website portofolio,&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Google Sites&lt;/span&gt;&amp;nbsp;adalah pilihan tepat&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;. Untuk CV kaya visual,&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Canva&lt;/span&gt;&amp;nbsp;adalah pilihan terbaik&lt;a href="https://www.sugrahaku.com/2026/02/cara-membuat-portofolio-di-canva-profesional.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;. Dalam materi ini, kita akan menggunakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Canva untuk CV Digital&lt;/span&gt;&amp;nbsp;dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Google Sites untuk Halaman Web Portofolio&lt;/span&gt;.&lt;/p&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;F. Konsep Personal Branding dalam Portofolio Digital&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Portofolio bukan sekadar galeri karya, melainkan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;representasi identitas profesional&lt;/span&gt;. Di dalamnya tercermin keahlian, proses berpikir kreatif, dan pencapaian yang telah diraih&lt;a href="https://stekom.ac.id/artikel/6-langkah-mengembangkan-portofolio-digital-untuk-mahasiswa-kreatif" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Personal branding yang baik tercermin dalam 3 hal:&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Konsistensi desain&lt;/span&gt;: gunakan palet warna, tipografi, dan tata letak yang sama di seluruh halaman&lt;a href="https://stekom.ac.id/artikel/6-langkah-mengembangkan-portofolio-digital-untuk-mahasiswa-kreatif" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Narasi yang jelas&lt;/span&gt;: setiap proyek dalam portofolio harus menjawab tiga hal — Masalah → Solusi → Hasil&lt;a href="https://www.sugrahaku.com/2026/02/cara-membuat-portofolio-di-canva-profesional.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Bahasa yang profesional&lt;/span&gt;: gunakan bahasa baku, bukan terlalu santai atau gaul&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;2️⃣ MENYUSUN CV DIGITAL DENGAN CANVA&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;A. Mengenal Canva&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Canva adalah platform desain grafis berbasis web gratis yang memungkinkan siapa saja, bahkan tanpa latar belakang desain, untuk menciptakan karya yang profesional dan estetis&lt;a href="https://www.sugrahaku.com/2026/02/cara-membuat-portofolio-di-canva-profesional.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Keunggulan Canva untuk CV digital:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Aksesibilitas tinggi&lt;/span&gt;: bisa diakses via browser atau aplikasi smartphone&lt;a href="https://www.sugrahaku.com/2026/02/cara-membuat-portofolio-di-canva-profesional.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Ribuan template gratis&lt;/span&gt;: tersedia banyak template CV menarik yang siap pakai&lt;a href="https://www.sugrahaku.com/2026/02/cara-membuat-portofolio-di-canva-profesional.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Fleksibilitas format&lt;/span&gt;: bisa diekspor menjadi PDF, gambar, atau presentasi interaktif&lt;a href="https://www.sugrahaku.com/2026/02/cara-membuat-portofolio-di-canva-profesional.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Drag-and-drop editing&lt;/span&gt;: tidak perlu keterampilan coding atau desain rumit&lt;a href="https://thimpress.com/create-a-portfolio-website-for-free-using-canva/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;B. Langkah-Langkah Membuat CV Digital di Canva&lt;/h3&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;Tahap 1: Persiapan Sebelum Mendesain&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Sebelum membuka Canva, lakukan persiapan berikut&lt;a href="https://www.sugrahaku.com/2026/02/cara-membuat-portofolio-di-canva-profesional.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;:&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tentukan informasi yang akan ditampilkan&lt;/span&gt;&amp;nbsp;(data diri, pendidikan, keahlian, dll)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pilih 3-5 keahlian utama&lt;/span&gt;&amp;nbsp;yang ingin ditonjolkan&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Siapkan foto profil profesional&lt;/span&gt;&amp;nbsp;(resolusi baik, latar bersih)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tulis ringkasan profil&lt;/span&gt;&amp;nbsp;singkat, padat, dan menarik&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Siapkan data pendukung&lt;/span&gt;&amp;nbsp;(sertifikat, nilai, dll — opsional)&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Tahap 2: Membuka Canva dan Memilih Template&lt;/h4&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Buka&amp;nbsp;&lt;a href="https://www.canva.com/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;www.canva.com&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Login menggunakan akun Google atau email&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pada kolom pencarian, ketik:&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"CV"&lt;/span&gt;&amp;nbsp;atau&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Curriculum Vitae"&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pilih template yang menarik dan sesuai dengan kepribadian&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Tips: pilih template dengan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;tata letak bersih&lt;/span&gt;&amp;nbsp;dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;font mudah dibaca&lt;/span&gt;&lt;a href="https://www.sugrahaku.com/2026/02/cara-membuat-portofolio-di-canva-profesional.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;Tahap 3: Mengisi Konten CV&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Berikut adalah contoh teks yang bisa digunakan sebagai panduan:&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 448px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 434px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -440px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Bagian&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Contoh Isi&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Nama&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;&lt;span style="font-weight: 600;"&gt;BUDI SANTOSO&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tentang Saya&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;"Saya siswa SMK Jurusan Rekayasa Perangkat Lunak yang memiliki minat dalam pengembangan aplikasi web dan desain antarmuka pengguna. Saya ingin mengembangkan kemampuan programming dan desain di lingkungan kerja profesional."&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Pendidikan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;SMK Negeri 1 Jakarta | Jurusan RPL | 2024–2027&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Keahlian&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;• HTML/CSS (Pemula) • Canva (Lanjutan) • Microsoft Office • Kerja tim • Pemecahan masalah&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Pengalaman&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Anggota Ekstrakurikuler IT Club (2025–sekarang): bertanggung jawab mendesain poster dan konten media sosial&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Prestasi&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Juara 2 Lomba Desain Poster Digital tingkat Kota (2026)&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tips isi CV untuk siswa SMK:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Fokus pada keahlian dan pengalaman yang relevan&lt;/span&gt;&amp;nbsp;dengan industri yang diminati&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Cantumkan kontak yang aktif&lt;/span&gt;: email profesional dan nomor telepon&lt;a href="https://stekom.ac.id/artikel/apa-saja-yang-harus-dimasukkan-ke-dalam-cv-dan-portofolio-anak-smasmk" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Gunakan bahasa yang positif dan meyakinkan&lt;/span&gt;: "Saya mampu..." → "Mampu..." lebih baik&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tampilkan soft skills&lt;/span&gt;&amp;nbsp;seperti komunikasi, kerja tim, dan kemandirian&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;Tahap 4: Mendesain dengan Prinsip Visual yang Baik&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Dalam membuat desain CV, perhatikan 4 prinsip ini:&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 231px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 217px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -223px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Prinsip&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Penerapan di CV&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kesederhanaan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Jangan gunakan terlalu banyak warna (maksimal 3 warna utama)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Konsistensi&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Gunakan jenis font yang sama di seluruh dokumen (1-2 font saja)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Keterbacaan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Ukuran font minimal 10pt untuk teks deskripsi, 14-16pt untuk judul&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tata letak rapi&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Gunakan alignment (perataan) yang konsisten (kiri dan rata)&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Untuk mempertahankan identitas profesional, gunakan palet warna, tipografi, dan tata letak yang selaras&lt;a href="https://stekom.ac.id/artikel/6-langkah-mengembangkan-portofolio-digital-untuk-mahasiswa-kreatif" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Tahap 5: Mengunduh dan Menyimpan CV&lt;/h4&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Klik tombol&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Bagikan"&lt;/span&gt;&amp;nbsp;di pojok kanan atas&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pilih&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Unduh"&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pilih format&amp;nbsp;&lt;span style="font-weight: 600;"&gt;PDF Standar&lt;/span&gt;&amp;nbsp;(untuk tampilan terbaik)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Klik&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Unduh"&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Simpan file PDF di komputer dan di&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Google Drive&lt;/span&gt;&amp;nbsp;masing-masing (penting untuk persiapan di Google Sites)&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Praktik Baik Pembuatan CV dengan Canva:&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pilih 3–5 proyek terbaik yang menunjukkan kompetensi utama&lt;a href="https://www.sugrahaku.com/2026/02/cara-membuat-portofolio-di-canva-profesional.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Setiap bagian dalam CV menggunakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;bahasa yang profesional&lt;/span&gt;, bukan terlalu santai&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Selalu sertakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;kata kerja aktif&lt;/span&gt;&amp;nbsp;(misal: "merancang", "mengembangkan", "mengkoordinasikan")&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Update CV secara berkala&lt;/span&gt;&amp;nbsp;setiap kali mendapatkan pencapaian baru&lt;a href="https://surabaya.telkomuniversity.ac.id/cara-membangun-portofolio-digital-yang-menarik-untuk-mahasiswa-panduan-lengkap-rekomendasi-platform-terbaik/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;3️⃣ MEMBANGUN WEBSITE PORTOFOLIO DENGAN GOOGLE SITES&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;A. Mengenal Google Sites&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Google Sites adalah platform pembuatan website sederhana yang menjadi bagian dari Google Workspace (gratis dengan akun Google). Platform ini menyediakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;website builder&lt;/span&gt;&amp;nbsp;dengan tampilan yang sederhana dan intuitif, sehingga siapa pun dapat menggunakannya dengan mudah&lt;a href="http://handrizakk.blogspot.com/2025/08/cara-bikin-portofolio-online-cepat.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Keunggulan Google Sites untuk portofolio siswa:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;100% gratis&lt;/span&gt;&amp;nbsp;dengan akun Google&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tidak perlu coding atau desain rumit&lt;/span&gt;&amp;nbsp;— sepenuhnya drag-and-drop&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/30875586220052-Google-Sites-Guide" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Terintegrasi dengan Google Drive&lt;/span&gt;: unggah CV, sertifikat, dan proyek langsung dari Drive&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/30875586220052-Google-Sites-Guide" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Langsung terpublikasi sebagai website&lt;/span&gt;&amp;nbsp;dengan link yang bisa dibagikan&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Mobile-friendly&lt;/span&gt;: tampilan otomatis menyesuaikan dengan HP dan tablet&lt;a href="https://thimpress.com/create-a-portfolio-website-for-free-using-canva/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Bisa di-update kapan saja&lt;/span&gt;&amp;nbsp;tanpa harus membuat ulang website&lt;a href="https://www.canva.com/id_id/situs-web/website-portfolio/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;B. Tahap Perencanaan (Konsep Website)&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Sebelum membuka Google Sites, lakukan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;konsep terlebih dahulu&lt;/span&gt;&lt;a href="http://handrizakk.blogspot.com/2025/08/cara-bikin-portofolio-online-cepat.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;. Tuliskan di buku catatan:&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;1. Judul Website Portofolio&lt;/span&gt;&amp;nbsp;— contoh:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;"Portofolio (Nama Kamu)"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;"My Digital CV — (Nama Kamu)"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;"(Nama Kamu) | Karya dan Proyek"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;"Arsip Projek (Nama Kamu)"&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;2. Rencana Menu (Halaman)&lt;/span&gt;&amp;nbsp;— contoh struktur untuk siswa SMK:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Halaman Muka (Home)&lt;/span&gt;: sambutan, foto profil, kutipan/pesan singkat tentang diri&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tentang Saya (About Me)&lt;/span&gt;: profil lengkap, latar belakang, minat dan keahlian&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;CV Saya&lt;/span&gt;: menyematkan file PDF CV yang dibuat di Canva&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Proyek Saya&lt;/span&gt;: galeri proyek yang pernah dikerjakan&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Prestasi &amp;amp; Sertifikat&lt;/span&gt;: kumpulan penghargaan dan sertifikat pelatihan&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Kontak (Contact Me)&lt;/span&gt;: email aktif dan formulir kontak sederhana&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;3. Branding personal&lt;/span&gt;:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Siapkan foto profil&lt;/span&gt;&amp;nbsp;profesional (bisa foto pas atau foto kegiatan)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tentukan warna/warna tema&lt;/span&gt;&amp;nbsp;sesuai kepribadian (konsisten dengan CV)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Siapkan kalimat pembuka&lt;/span&gt;&amp;nbsp;yang menarik (misal:&amp;nbsp;&lt;em&gt;"Welcome to my digital portfolio! I'm a vocational student passionate about technology and design."&lt;/em&gt;)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;C. Langkah-Langkah Membangun Website Portofolio di Google Sites&lt;/h3&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&#128221;&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Langkah 1: Mengakses Google Sites&lt;/span&gt;&lt;/h4&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Buka&amp;nbsp;&lt;a href="https://sites.google.com/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;sites.google.com&lt;/a&gt;&amp;nbsp;di browser&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Login menggunakan akun Google yang aktif (akun sekolah atau pribadi)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Maka akan tampil halaman utama Google Sites&lt;a href="http://handrizakk.blogspot.com/2025/08/cara-bikin-portofolio-online-cepat.html" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&#128221;&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Langkah 2: Membuat Website Baru&lt;/span&gt;&lt;/h4&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Klik tombol&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"+"&lt;/span&gt;&amp;nbsp;(tanda tambah) atau pilih template&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Blank"&lt;/span&gt;&amp;nbsp;untuk memulai dari halaman kosong&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Halaman editor Google Sites akan terbuka&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/30875586220052-Google-Sites-Guide" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;&#128221;&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Langkah 3: Menentukan Judul dan Menyiapkan Halaman&lt;/span&gt;&lt;/h4&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Judul website&lt;/span&gt;: di bagian atas, klik "Untitled site" → ganti dengan judul pilihan&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Membuat halaman&lt;/span&gt;: di panel kanan, klik&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Pages"&lt;/span&gt;&amp;nbsp;→ klik ikon&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"+"&lt;/span&gt;&amp;nbsp;di pojok kanan bawah&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pilih&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"New page"&lt;/span&gt;, beri nama halaman (contoh: Beranda, Tentang Saya, CV Saya, Proyek Saya, Prestasi, Kontak)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Ulangi langkah ini sampai semua halaman yang direncanakan selesai dibuat&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/30875586220052-Google-Sites-Guide" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tips&lt;/span&gt;: halaman bisa disusun dengan drag-and-drop (ubah urutan menu), dan bisa dibuat sub-halaman di bawah halaman utama&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/31504084427412-Google-Sites-ePortfolio-Assignments" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&#128221;&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Langkah 4: Mengisi Konten Setiap Halaman&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;A. Halaman Muka (Home/Beranda)&lt;/span&gt;&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 209px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 195px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -201px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Elemen&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Cara Menambah&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Isi yang Direkomendasikan&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Selamat datang&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Insert → Text box&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;"Halo! Selamat datang di portofolio digital saya..."&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Foto profil&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Insert → Image → Upload&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Foto profesional (pas foto atau foto kegiatan)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Kutipan/pesan&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Insert → Text box&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;"I'm a student passionate about technology."&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;B. Halaman Tentang Saya (About Me)&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tuliskan paragraf pendek&lt;/span&gt;&amp;nbsp;tentang latar belakang, jurusan, minat, dan tujuan masa depan&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Jangan lupa menuliskan identitas&lt;/span&gt;&amp;nbsp;seperti nama, jurusan, sekolah, dan keahlian utama&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Tambahkan foto kedua yang mendukung (misal: foto saat kegiatan sekolah atau magang)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;C. Halaman CV Saya (My CV)&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Buka halaman "CV Saya"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Klik&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Insert"&lt;/span&gt;&amp;nbsp;→ gulir ke bawah → pilih&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"From Drive"&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pilih file PDF CV yang sudah disimpan di Google Drive&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;File akan disematkan dan bisa dilihat langsung di website&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/30875586220052-Google-Sites-Guide" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;D. Halaman Proyek Saya (My Projects)&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Buka halaman "Proyek Saya"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Untuk setiap proyek, buat blok terpisah. Bisa menggunakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Text &amp;amp; Image"&lt;/span&gt;&amp;nbsp;layout dari Content Blocks&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Informasi yang wajib ditampilkan untuk setiap proyek&lt;/span&gt;:&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Gambar proyek&lt;/span&gt;&amp;nbsp;(tangkapan layar, foto hasil, atau mockup)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Judul proyek&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Deskripsi singkat&lt;/span&gt;&amp;nbsp;(apa yang dikerjakan dan tujuan proyek)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tools yang digunakan&lt;/span&gt;&amp;nbsp;(contoh: Canva, Figma, VS Code, dll)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Hasil/dampak proyek&lt;/span&gt;&amp;nbsp;(contoh: "Website ini digunakan untuk lomba O2SN" / "Poster ini menjadi juara 2 lomba desain")&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;E. Halaman Prestasi &amp;amp; Sertifikat&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Buka halaman "Prestasi &amp;amp; Sertifikat"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Gunakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Image Carousel&lt;/span&gt;&amp;nbsp;atau&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Image Grid&lt;/span&gt;&amp;nbsp;dari Insert menu untuk menampilkan banyak sertifikat/gambar&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Di bawah setiap gambar, tambahkan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;teks singkat&lt;/span&gt;&amp;nbsp;yang menjelaskan prestasi/sertifikat tersebut&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pastikan file gambar sertifikat sudah diubah formatnya menjadi PNG/JPG (PDF tidak akan muncul di carousel)&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/31504084427412-Google-Sites-ePortfolio-Assignments" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tips&lt;/span&gt;: Semua file yang akan disematkan sebaiknya disimpan terlebih dahulu di Google Drive dalam satu folder yang&amp;nbsp;&lt;span style="font-weight: 600;"&gt;diatur izin aksesnya menjadi "Anyone with the link can view"&lt;/span&gt;&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/31504084427412-Google-Sites-ePortfolio-Assignments" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;F. Halaman Kontak (Contact Me)&lt;/span&gt;&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Gunakan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Text box&lt;/span&gt;&amp;nbsp;untuk menuliskan alamat email aktif&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Tambahkan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;link ke media sosial profesional&lt;/span&gt;&amp;nbsp;(LinkedIn, GitHub, Instagram untuk portofolio — jika ada)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Opsional: Tambahkan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;formulir kontak sederhana&lt;/span&gt;&amp;nbsp;dengan menggunakan Insert → Embed → masukkan tautan Google Form untuk menerima pesan dari pengunjung&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&#128221;&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Langkah 5: Mengatur Tema dan Tampilan Website&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Agar website terlihat profesional dan konsisten dengan CV, lakukan kustomisasi:&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Di pojok kanan atas, klik ikon&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Themes"&lt;/span&gt;&amp;nbsp;(palet warna)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Pilih tema yang sesuai dengan kepribadian (disarankan tema Simple dengan latar putih untuk tampilan bersih)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Klik&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Font Style"&lt;/span&gt;&amp;nbsp;dan pilih gaya font yang konsisten di seluruh website&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/30875586220052-Google-Sites-Guide" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Kustomisasi lanjutan&lt;/span&gt;&amp;nbsp;(opsional):&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Ganti background image header&lt;/span&gt;: klik pada area header → Image → Select Image (upload foto atau pilih dari gallery)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Ubah tipe header&lt;/span&gt;: pilih antara Cover (foto penuh), Large Banner, Banner, atau Title only&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tambahkan footer&lt;/span&gt;: di bagian bawah, klik untuk menambahkan teks (misal: "© 2026 Portofolio [Nama Kamu]")&lt;a href="https://ats.mohawkcollege.ca/hc/en-ca/articles/30875586220052-Google-Sites-Guide" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&#128221;&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Langkah 6: Mempublikasikan Website&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Setelah konten selesai, website perlu dipublikasikan agar bisa diakses orang lain:&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Klik tombol&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Publish"&lt;/span&gt;&amp;nbsp;di pojok kanan atas&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Masukkan alamat website yang mudah diingat (domain akan berakhiran&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;sites.google.com/view/nama-website-anda/&lt;/code&gt;)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Klik&amp;nbsp;&lt;span style="font-weight: 600;"&gt;"Publish"&lt;/span&gt;&amp;nbsp;lagi&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Website sudah aktif dan bisa diakses publik melalui link yang diberikan&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tips&lt;/span&gt;: Simpan link website di tempat yang mudah diakses (misal: di catatan ponsel, di bio media sosial, dan di footer CV digital).&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&#128221;&amp;nbsp;&lt;span style="font-weight: inherit;"&gt;Langkah 7: Update dan Pemeliharaan Website&lt;/span&gt;&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Portofolio digital harus terus diperbarui agar tetap relevan&lt;a href="https://edubinjai.ac.id/tips-membangun-portofolio-digital-profesional-untuk-mahasiswa/#content" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;&lt;a href="https://surabaya.telkomuniversity.ac.id/cara-membangun-portofolio-digital-yang-menarik-untuk-mahasiswa-panduan-lengkap-rekomendasi-platform-terbaik/" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;. Bacakan tips berikut:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tambahkan proyek baru&lt;/span&gt;&amp;nbsp;setiap kali menyelesaikan tugas besar&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Update CV&lt;/span&gt;&amp;nbsp;jika ada pencapaian atau pengalaman baru (perbarui file PDF di Drive lalu re-embed)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Periksa link&lt;/span&gt;&amp;nbsp;secara berkala untuk memastikan semua halaman berfungsi&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pantau tampilan&lt;/span&gt;&amp;nbsp;di berbagai perangkat (laptop, tablet, HP)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;D. Contoh Struktur Menu Website Portofolio untuk Siswa SMK&lt;/h3&gt;&lt;div class="md-code-block md-code-block-light" style="--ds-md-code-banner-background-color: #f9fafb; --ds-md-code-block-border-radius: 12px; --ds-md-code-block-font-size: calc(1.143*11px); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-radius: 12px; margin: 16px 0px 11.43px; position: relative;"&gt;&lt;div class="md-code-block-banner-wrap" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; position: sticky; top: 0px; z-index: 6;"&gt;&lt;div class="md-code-block-banner md-code-block-banner-lite" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-top-left-radius: 12px; border-top-right-radius: 12px; display: flex; font-size: 12.573px; justify-content: space-between; line-height: 12.573px; padding: 0px;"&gt;&lt;div class="_121d384" style="align-items: center; display: flex; justify-content: space-between; padding: 6px; width: 740.052px;"&gt;&lt;div class="d2a24f03" style="flex-shrink: 0; text-align: justify;"&gt;&lt;span class="d813de27" face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="font-size: 12px; line-height: 18px; margin-left: 8px;"&gt;text&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;pre style="font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 22px; margin: 0px; overflow: auto; padding: 16px; word-break: break-all;"&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;BERANDA (Halaman Muka)&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;├── Sambutan pembuka&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;├── Foto profil&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;└── Pesan singkat&lt;/div&gt;&lt;div style="text-align: justify;"&gt;&lt;span face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="color: #0f1115; text-wrap-mode: wrap;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; text-align: justify; text-wrap-mode: wrap;"&gt;TENTANG SAYA&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; text-align: justify; text-wrap-mode: wrap;"&gt;├── Profil lengkap&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; text-align: justify; text-wrap-mode: wrap;"&gt;├── Pendidikan&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; text-align: justify; text-wrap-mode: wrap;"&gt;├── Keahlian teknis &amp;amp; nonteknis&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; text-align: justify; text-wrap-mode: wrap;"&gt;└── Minat &amp;amp; tujuan karir&lt;/div&gt;&lt;div style="text-align: justify;"&gt;&lt;span face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="color: #0f1115; text-wrap-mode: wrap;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;span face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="color: #0f1115; text-wrap-mode: wrap;"&gt;CV DIGITAL
├── Embed file PDF CV dari Canva

PORTOFOLIO PROYEK
├── Proyek 1 (Judul, gambar, deskripsi, tools, hasil)
├── Proyek 2
└── Proyek 3

PRESTASI &amp;amp; SERTIFIKAT
├── Gallery pencapaian (gambar + teks)

KONTAK
├── Email
├── Media sosial (opsional)
&lt;div style="text-align: justify;"&gt;└── Formulir kontak (opsional)&lt;/div&gt;&lt;/span&gt;&lt;/pre&gt;&lt;svg class="_9bc997d _33882ae" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;/svg&gt;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="color: #0f1115;"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/span&gt;&lt;svg class="_9bc997d _28d7e84" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;/svg&gt;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="color: #0f1115;"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/span&gt;&lt;/div&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;4️⃣ MENGGABUNGKAN CV DAN WEBSITE MENJADI PORTOFOLIO UTUH&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;Integrasi Antar-Komponen&lt;/h3&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 259px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 245px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -251px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Komponen&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Dibuat di&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Cara Menyatukan&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;CV Digital&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Canva (export PDF)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Sematkan file PDF di halaman "CV Saya" Google Sites&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Dokumentasi Proyek&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Canva / Screenshot / Foto&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Unggah ke Google Drive → masukkan di halaman proyek&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;Website Portofolio&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Google Sites&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Publikasikan → bagikan link di CV, bio medsos, email signature&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;Checklist Portofolio Digital yang Profesional&lt;/h3&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 486px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 472px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -478px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;✓&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Aspek yang Diperiksa&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;☐&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;CV digital sudah di-export PDF dengan desain rapi dan mudah dibaca&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;☐&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Nama website jelas dan mudah diingat (Portofolio [Nama Anda])&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;☐&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Semua halaman di Google Sites sudah terisi lengkap&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;☐&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Minimal 1 proyek ditampilkan dengan deskripsi yang jelas (judul, peran, tools, hasil)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;☐&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Ada halaman kontak yang berisi email aktif&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;☐&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Warna dan font konsisten di seluruh halaman&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;☐&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Link website portofolio sudah diuji (bisa diakses dengan baik)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;☐&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;CV sudah diunggah ke Google Drive dan disematkan dengan benar&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;☐&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Foto profil sudah ditambahkan di halaman utama&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border-color: currentcolor; border-image: initial; border-style: none; border-width: medium; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;5️⃣ PERAN PORTOFOLIO DIGITAL DALAM PENGEMBANGAN KOMUNIKASI DAN KEMANDIRIAN&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;A. Komunikasi melalui Portofolio Digital&lt;/h3&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;p class="ds-markdown-paragraph" style="font-size: 16px; font-weight: 400; margin: 16px 0px;"&gt;Portofolio digital adalah&amp;nbsp;&lt;span style="font-weight: 600;"&gt;sarana komunikasi profesional&lt;/span&gt;&amp;nbsp;antara siswa dengan calon mitra magang, pemberi kerja, atau perguruan tinggi.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="font-size: 16px; font-weight: 400; margin: 16px 0px;"&gt;Kemampuan komunikasi yang terlihat dalam portofolio digital:&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; font-size: 16px; font-weight: 400; overflow-x: auto; position: relative; scrollbar-width: none; text-align: left; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 381px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 367px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -373px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Aspek Komunikasi&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Implementasi dalam Portofolio&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Komunikasi visual&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Desain CV dan website yang bersih dan rapi mencerminkan profesionalisme&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Komunikasi tertulis&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Deskripsi proyek, profil diri, dan CV ditulis dengan bahasa yang jelas, efektif, dan beretika&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Komunikasi digital&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Kemampuan mengorganisasi informasi secara online dan menyajikannya dengan struktur yang mudah dipahami pengunjung&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Personal branding digital&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Portofolio menjadi wajah profesional di dunia maya, menunjukkan keterampilan berkomunikasi secara tidak langsung&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;blockquote style="border-left: 1.11111px solid rgb(173, 178, 184); font-size: 16px; font-weight: 400; margin: 16px 0px 0px; padding-left: 14px; text-align: left;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;em&gt;Refleksi bagi siswa&lt;/em&gt;: "Portofolio digital adalah etalase diri Anda. Di dalamnya tercermin keahlian, proses berpikir kreatif, dan pencapaian yang telah diraih"&lt;a href="https://stekom.ac.id/artikel/6-langkah-mengembangkan-portofolio-digital-untuk-mahasiswa-kreatif" rel="noreferrer" style="border-color: rgba(255, 255, 255, 0); border-style: solid; border-width: 1.11111px 2.22222px; color: #3964fe; cursor: default; margin-left: -3px; margin-right: -3px; position: relative; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);" target="_blank"&gt;&lt;/a&gt;.&lt;/p&gt;&lt;/blockquote&gt;&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;B. Kemandirian dalam Membangun Portofolio&lt;/h3&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;p class="ds-markdown-paragraph" style="font-size: 16px; font-weight: 400; margin: 16px 0px;"&gt;Proses penyusunan portofolio secara mandiri mengembangkan berbagai aspek kemandirian:&lt;/p&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; font-size: 16px; font-weight: 400; overflow-x: auto; position: relative; scrollbar-width: none; text-align: left; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 402px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 388px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -394px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Aspek Kemandirian&lt;/span&gt;&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;&lt;span style="font-weight: 600;"&gt;Praktik dalam Kegiatan&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Perencanaan mandiri&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Menentukan konsep website dan isi CV tanpa sepenuhnya bergantung pada guru&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Kurasi mandiri&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Memilih 3-5 proyek/produk terbaik yang paling mencerminkan kompetensi&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Pengambilan keputusan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Memilih template CV, tema website, dan tata letak sesuai nilai personal&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Manajemen waktu&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Menyelesaikan CV, 1 halaman website, dan dokumentasi proyek dalam waktu terbatas&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Pemecahan masalah mandiri&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Mengatasi kendala teknis (misal: file tidak bisa di-upload, link rusak) secara mandiri atau kolaboratif&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/h2&gt;&lt;h2 class="wp-block-heading" id="h-cara-membuat-blog-di-blogger" style="background-color: white; box-sizing: inherit; color: #111111; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 22px; line-height: 1.308; margin-bottom: 24px; margin-top: 0px;"&gt;&lt;span id="Cara_Membuat_Blog_di_Blogger" style="box-sizing: inherit;"&gt;Cara Membuat Blog di Blogger&lt;/span&gt;&lt;/h2&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;p style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin: 0px 0px 24px; text-align: start;"&gt;Pada tahap ini, kami akan berbagi cara membuat blog gratis di Blogger untuk pemula. Simak langkah-langkah berikut ini.&lt;/p&gt;&lt;ol class="wp-block-list" style="box-sizing: border-box; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; margin-top: 0px; text-align: start;"&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;Silakan buka situs&amp;nbsp;&lt;a href="https://www.blogger.com/about/?bpli=1&amp;amp;pli=1" rel="noopener" style="background-color: rgba(255, 255, 255, 0); border-bottom: 1px solid rgba(0, 156, 255, 0.8); border-left-color: rgba(0, 156, 255, 0.8); border-right-color: rgba(0, 156, 255, 0.8); border-top-color: rgba(0, 156, 255, 0.8); box-sizing: inherit; color: #009cff; text-decoration: none; touch-action: manipulation; transition: 0.2s ease-in-out;" target="_blank" title=""&gt;www.blogger.com&lt;/a&gt;.&lt;/li&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;Klik menu&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Create Your Blog&lt;/span&gt;&amp;nbsp;&amp;gt; login menggunakan email Google Anda.&amp;nbsp;&lt;/li&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;Pilih judul yang Anda inginkan di blog Anda &amp;gt; klik&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Berikutnya&lt;/span&gt;.&lt;/li&gt;&lt;/ol&gt;&lt;div class="wp-block-image" style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; position: relative; text-align: start;"&gt;&lt;figure class="aligncenter size-full" style="box-sizing: inherit; clear: both; display: table; margin: 0px auto; max-width: 100%;"&gt;&lt;a href="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-nama-blog.jpeg" style="background-color: rgba(255, 255, 255, 0); box-sizing: inherit; color: #5e5e5e; display: inline-block; text-decoration: none; touch-action: manipulation;"&gt;&lt;img alt="masukkan nama blog - cara  membuat blog gratis di blogger" class="wp-image-50501" decoding="async" height="452" sizes="(max-width: 500px) 100vw, 500px" src="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-nama-blog.jpeg" srcset="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-nama-blog.jpeg 500w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-nama-blog-300x271.jpeg 300w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-nama-blog-370x334.jpeg 370w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-nama-blog-270x244.jpeg 270w" style="border-style: none; box-sizing: border-box; height: auto; max-width: 100%; vertical-align: bottom;" width="500" /&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/div&gt;&lt;ol class="wp-block-list" start="4" style="box-sizing: border-box; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; margin-top: 0px; text-align: start;"&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;Pilih nama domain yang ingin dipakai di blog. Nama nantinya akan muncul di URL blog Anda &amp;gt; klik&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Berikutnya&lt;/span&gt;.&lt;/li&gt;&lt;/ol&gt;&lt;div class="wp-block-image" style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; position: relative; text-align: start;"&gt;&lt;figure class="aligncenter size-full" style="box-sizing: inherit; clear: both; display: table; margin: 0px auto; max-width: 100%;"&gt;&lt;a href="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-alamat-blog.jpeg" style="background-color: rgba(255, 255, 255, 0); box-sizing: inherit; color: #5e5e5e; display: inline-block; text-decoration: none; touch-action: manipulation;"&gt;&lt;img alt="masukkan alamat blog" class="wp-image-50500" decoding="async" height="446" loading="lazy" sizes="auto, (max-width: 500px) 100vw, 500px" src="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-alamat-blog.jpeg" srcset="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-alamat-blog.jpeg 500w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-alamat-blog-300x268.jpeg 300w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-alamat-blog-370x330.jpeg 370w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-alamat-blog-270x241.jpeg 270w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/masukkan-alamat-blog-335x300.jpeg 335w" style="border-style: none; box-sizing: border-box; contain-intrinsic-size: 3000px 1500px; height: auto; max-width: 100%; vertical-align: bottom;" width="500" /&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/div&gt;&lt;ol class="wp-block-list" start="5" style="box-sizing: border-box; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; margin-top: 0px; text-align: start;"&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;Cara buat blog yang terakhir adalah mengisi kolom&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Username&lt;/span&gt;. Nama ini nantinya akan ditampilkan di tampilan blog Anda. Terakhir, klik&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Selesai&lt;/span&gt;&amp;nbsp;dan blog siap mendunia.&amp;nbsp;&lt;/li&gt;&lt;/ol&gt;&lt;div class="wp-block-image" style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; position: relative; text-align: start;"&gt;&lt;figure class="aligncenter size-full" style="box-sizing: inherit; clear: both; display: table; margin: 0px auto; max-width: 100%;"&gt;&lt;a href="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/konfirmasi-nama-blog.jpeg" style="background-color: rgba(255, 255, 255, 0); box-sizing: inherit; color: #5e5e5e; display: inline-block; text-decoration: none; touch-action: manipulation;"&gt;&lt;img alt="Isi nama website" class="wp-image-50499" decoding="async" height="501" loading="lazy" sizes="auto, (max-width: 512px) 100vw, 512px" src="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/konfirmasi-nama-blog.jpeg" srcset="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/konfirmasi-nama-blog.jpeg 512w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/konfirmasi-nama-blog-300x294.jpeg 300w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/konfirmasi-nama-blog-370x362.jpeg 370w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/konfirmasi-nama-blog-270x264.jpeg 270w" style="border-style: none; box-sizing: border-box; contain-intrinsic-size: 3000px 1500px; height: auto; max-width: 100%; vertical-align: bottom;" width="512" /&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin: 0px 0px 24px; text-align: start;"&gt;Sampai tahap ini, cara membuat blog gratis di blogger telah selesai. Selanjutnya, Anda dapat membuat artikel di blog untuk pertama kalinya.&lt;/p&gt;&lt;/h2&gt;&lt;h2 class="wp-block-heading" id="h-cara-membuat-artikel-di-blogger" style="background-color: white; box-sizing: inherit; color: #111111; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 22px; line-height: 1.308; margin-bottom: 24px; margin-top: 0px;"&gt;&lt;span id="Cara_Membuat_Artikel_di_Blogger" style="box-sizing: inherit;"&gt;Cara Membuat Artikel di Blogger&lt;/span&gt;&lt;/h2&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;p style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin: 0px 0px 24px; text-align: start;"&gt;Sekarang, Anda sudah memiliki blog, selanjutnya Anda bisa mulai menulis artikel di blog dengan cara sebagai berikut:&lt;/p&gt;&lt;ol class="wp-block-list" style="box-sizing: border-box; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; margin-top: 0px; text-align: start;"&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Login&lt;/span&gt;&amp;nbsp;ke akun Blog Anda &amp;gt; klik menu&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Postingan Baru&amp;nbsp;&lt;/span&gt;di bagian kiri halaman.&lt;/li&gt;&lt;/ol&gt;&lt;div class="wp-block-image" style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; position: relative; text-align: start;"&gt;&lt;figure class="aligncenter size-full" style="box-sizing: inherit; clear: both; display: table; margin: 0px auto; max-width: 100%;"&gt;&lt;a href="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-baru.jpeg" style="background-color: rgba(255, 255, 255, 0); box-sizing: inherit; color: #5e5e5e; display: inline-block; text-decoration: none; touch-action: manipulation;"&gt;&lt;img alt="cara membuat post di blogger" class="wp-image-50498" decoding="async" height="447" loading="lazy" sizes="auto, (max-width: 407px) 100vw, 407px" src="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-baru.jpeg" srcset="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-baru.jpeg 407w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-baru-273x300.jpeg 273w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-baru-370x406.jpeg 370w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-baru-270x297.jpeg 270w" style="border-style: none; box-sizing: border-box; contain-intrinsic-size: 3000px 1500px; height: auto; max-width: 100%; vertical-align: bottom;" width="407" /&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/div&gt;&lt;ol class="wp-block-list" start="2" style="box-sizing: border-box; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; margin-top: 0px; text-align: start;"&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;Isi judul tulisan pada bagian atas halaman. Pada bagian bawahnya bisa diisi postingan yang ingin Anda tulis.&amp;nbsp;&lt;/li&gt;&lt;/ol&gt;&lt;div class="wp-block-image" style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; position: relative; text-align: start;"&gt;&lt;figure class="aligncenter size-full" style="box-sizing: inherit; clear: both; display: table; margin: 0px auto; max-width: 100%;"&gt;&lt;a href="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/membuat-artikel-di-blog.jpeg" style="background-color: rgba(255, 255, 255, 0); box-sizing: inherit; color: #5e5e5e; display: inline-block; text-decoration: none; touch-action: manipulation;"&gt;&lt;img alt="cara menulis di blog" class="wp-image-50497" decoding="async" height="166" loading="lazy" sizes="auto, (max-width: 512px) 100vw, 512px" src="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/membuat-artikel-di-blog.jpeg" srcset="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/membuat-artikel-di-blog.jpeg 512w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/membuat-artikel-di-blog-300x97.jpeg 300w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/membuat-artikel-di-blog-370x120.jpeg 370w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/membuat-artikel-di-blog-270x88.jpeg 270w" style="border-style: none; box-sizing: border-box; contain-intrinsic-size: 3000px 1500px; height: auto; max-width: 100%; vertical-align: bottom;" width="512" /&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin: 0px 0px 24px; text-align: start;"&gt;Tak hanya tulisan, Anda bisa menggunakan beberapa fitur yang ada pada Blog dengan klik&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;toolbar&lt;/span&gt;&amp;nbsp;seperti berikut.&lt;/p&gt;&lt;div class="wp-block-image" style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; position: relative; text-align: start;"&gt;&lt;figure class="aligncenter size-full" style="box-sizing: inherit; clear: both; display: table; margin: 0px auto; max-width: 100%;"&gt;&lt;a href="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/menu-artikel-di-blogger.png" style="background-color: rgba(255, 255, 255, 0); box-sizing: inherit; color: #5e5e5e; display: inline-block; text-decoration: none; touch-action: manipulation;"&gt;&lt;img alt="menu artikel di blogger" class="wp-image-50496" decoding="async" height="100" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/menu-artikel-di-blogger.png" srcset="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/menu-artikel-di-blogger.png 1024w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/menu-artikel-di-blogger-300x29.png 300w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/menu-artikel-di-blogger-768x75.png 768w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/menu-artikel-di-blogger-370x36.png 370w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/menu-artikel-di-blogger-270x26.png 270w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/menu-artikel-di-blogger-570x56.png 570w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/menu-artikel-di-blogger-740x72.png 740w" style="border-style: none; box-sizing: border-box; contain-intrinsic-size: 3000px 1500px; height: auto; max-width: 100%; vertical-align: bottom;" width="1024" /&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/div&gt;&lt;ol class="wp-block-list" start="3" style="box-sizing: border-box; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; margin-top: 0px; text-align: start;"&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;Jika sudah yakin dengan tulisan dan ingin mempublikasikan, klik tombol&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Publikasikan&lt;/span&gt;&amp;nbsp;dan postingan Anda berhasil diunggah.&amp;nbsp;&lt;/li&gt;&lt;/ol&gt;&lt;div class="wp-block-image" style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; position: relative; text-align: start;"&gt;&lt;figure class="aligncenter size-full" style="box-sizing: inherit; clear: both; display: table; margin: 0px auto; max-width: 100%;"&gt;&lt;a href="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/publikasi-blog.jpeg" style="background-color: rgba(255, 255, 255, 0); box-sizing: inherit; color: #5e5e5e; display: inline-block; text-decoration: none; touch-action: manipulation;"&gt;&lt;img alt="cara publish blogger" class="wp-image-50495" decoding="async" height="220" loading="lazy" sizes="auto, (max-width: 512px) 100vw, 512px" src="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/publikasi-blog.jpeg" srcset="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/publikasi-blog.jpeg 512w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/publikasi-blog-300x129.jpeg 300w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/publikasi-blog-370x159.jpeg 370w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/publikasi-blog-270x116.jpeg 270w" style="border-style: none; box-sizing: border-box; contain-intrinsic-size: 3000px 1500px; height: auto; max-width: 100%; vertical-align: bottom;" width="512" /&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/div&gt;&lt;ol class="wp-block-list" start="4" style="box-sizing: border-box; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; margin-top: 0px; text-align: start;"&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;Selanjutnya, Anda juga bisa melihat tulisan yang sudah Anda posting dengan kembali ke menu&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Postingan&lt;/span&gt;&amp;nbsp;dan klik ikon&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;Preview&lt;/span&gt;.&lt;/li&gt;&lt;/ol&gt;&lt;div class="wp-block-image" style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; position: relative; text-align: start;"&gt;&lt;figure class="aligncenter size-full" style="box-sizing: inherit; clear: both; display: table; margin: 0px auto; max-width: 100%;"&gt;&lt;a href="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-blog.jpeg" style="background-color: rgba(255, 255, 255, 0); box-sizing: inherit; color: #5e5e5e; display: inline-block; text-decoration: none; touch-action: manipulation;"&gt;&lt;img alt="postingan blog" class="wp-image-50494" decoding="async" height="134" loading="lazy" sizes="auto, (max-width: 512px) 100vw, 512px" src="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-blog.jpeg" srcset="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-blog.jpeg 512w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-blog-300x79.jpeg 300w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-blog-370x97.jpeg 370w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/postingan-blog-270x71.jpeg 270w" style="border-style: none; box-sizing: border-box; contain-intrinsic-size: 3000px 1500px; height: auto; max-width: 100%; vertical-align: bottom;" width="512" /&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/div&gt;&lt;ol class="wp-block-list" start="5" style="box-sizing: border-box; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; margin-top: 0px; text-align: start;"&gt;&lt;li style="box-sizing: inherit; margin-bottom: 4px;"&gt;Cek kembali tampilan tulisan di Blog Anda.&lt;/li&gt;&lt;/ol&gt;&lt;div class="wp-block-image" style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin-bottom: 24px; position: relative; text-align: start;"&gt;&lt;figure class="aligncenter size-full" style="box-sizing: inherit; clear: both; display: table; margin: 0px auto; max-width: 100%;"&gt;&lt;a href="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/contoh-tampilan-blog.jpeg" style="background-color: rgba(255, 255, 255, 0); box-sizing: inherit; color: #5e5e5e; display: inline-block; text-decoration: none; touch-action: manipulation;"&gt;&lt;img alt="contoh tampilan blog" class="wp-image-50493" decoding="async" height="346" loading="lazy" sizes="auto, (max-width: 512px) 100vw, 512px" src="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/contoh-tampilan-blog.jpeg" srcset="https://www.rumahweb.com/journal/wp-content/uploads/2024/10/contoh-tampilan-blog.jpeg 512w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/contoh-tampilan-blog-300x203.jpeg 300w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/contoh-tampilan-blog-370x250.jpeg 370w, https://www.rumahweb.com/journal/wp-content/uploads/2024/10/contoh-tampilan-blog-270x182.jpeg 270w" style="border-style: none; box-sizing: border-box; contain-intrinsic-size: 3000px 1500px; height: auto; max-width: 100%; vertical-align: bottom;" width="512" /&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/div&gt;&lt;p style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin: 0px 0px 24px; text-align: start;"&gt;Anda juga bisa mengganti nama domain sesuai pilihan Anda, karena&amp;nbsp;&lt;em style="box-sizing: inherit;"&gt;platform&lt;/em&gt;&amp;nbsp;blogger juga menyediakan fitur&amp;nbsp;&lt;em style="box-sizing: inherit;"&gt;custom&lt;/em&gt;&amp;nbsp;domain. Dengan begitu, Anda bisa mengubah URL blog menjadi nama domain sendiri.&lt;/p&gt;&lt;p style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin: 0px 0px 24px; text-align: start;"&gt;Sebagai contoh, URL Blog utama Anda adalah&amp;nbsp;&lt;span style="box-sizing: inherit; font-weight: bolder;"&gt;jualdomain.blogspot.com&lt;/span&gt;. Anda bisa mengubahnya menjadi jualdomain.com dengan&amp;nbsp;&lt;em style="box-sizing: inherit;"&gt;custom&lt;/em&gt;&amp;nbsp;domain di Rumahweb.&amp;nbsp;&lt;/p&gt;&lt;p style="box-sizing: inherit; color: #5e5e5e; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 16px; font-weight: 400; margin: 0px 0px 24px; text-align: start;"&gt;Cara&amp;nbsp;&lt;em style="box-sizing: inherit;"&gt;setting&lt;/em&gt;nya pun mudah, cukup beli domain murah di Rumahweb, kemudian Anda bisa mengikuti&amp;nbsp;&lt;a href="https://www.rumahweb.com/journal/panduan-custom-domain-blogspot-rumahweb-dari-clientzone/" style="background-color: rgba(255, 255, 255, 0); border-bottom: 1px solid rgba(0, 156, 255, 0.8); border-left-color: rgba(0, 156, 255, 0.8); border-right-color: rgba(0, 156, 255, 0.8); border-top-color: rgba(0, 156, 255, 0.8); box-sizing: inherit; color: #009cff; text-decoration: none; touch-action: manipulation; transition: 0.2s ease-in-out;"&gt;panduan custom domain&lt;/a&gt;&amp;nbsp;Blogspot.&lt;/p&gt;&lt;/h2&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;br /&gt;&lt;/h2&gt;</description><link>http://kitab-investasi.blogspot.com/2026/04/mengenal-portofolio-digital.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-1407871387358370334</guid><pubDate>Fri, 24 Apr 2026 01:04:00 +0000</pubDate><atom:updated>2026-04-24T08:04:48.279+07:00</atom:updated><title>Mengenal Karya Ilmiah Populer</title><description>&lt;h2 style="text-align: justify;"&gt;&amp;nbsp;1. Apa itu Karya Ilmiah Populer?&lt;/h2&gt;
&lt;p data-end="689" data-start="525" style="text-align: justify;"&gt;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="color: #0f1115; font-size: 16px; font-weight: 600;"&gt;Karya Ilmiah Populer&lt;/span&gt;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="background-color: white; color: #0f1115; font-size: 16px;"&gt;&amp;nbsp;&lt;/span&gt;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="background-color: white; color: #0f1115; font-size: 16px;"&gt;adalah tulisan yang menyajikan fakta ilmiah (hasil penelitian, teori, atau data) dengan bahasa yang ringan, mudah dipahami oleh masyarakat umum, namun tetap mempertahankan akurasi keilmuan.&lt;/span&gt;&lt;/p&gt;
&lt;p data-end="702" data-start="691" style="text-align: justify;"&gt;Artinya:&lt;/p&gt;
&lt;ul data-end="792" data-start="703"&gt;
&lt;li data-end="746" data-section-id="18zox2b" data-start="703" style="text-align: justify;"&gt;
Tetap berdasarkan fakta dan data (ilmiah)
&lt;/li&gt;
&lt;li data-end="792" data-section-id="1dohfjt" data-start="747" style="text-align: justify;"&gt;
Tetapi tidak kaku seperti jurnal penelitian&lt;/li&gt;
&lt;/ul&gt;&lt;div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Istilah "populer" di sini&amp;nbsp;&lt;span style="font-weight: 600;"&gt;bukan berarti kurang serius atau asal-asalan&lt;/span&gt;, tetapi berarti&amp;nbsp;&lt;em&gt;dikemas secara menarik dan komunikatif&lt;/em&gt;&amp;nbsp;sehingga bisa dinikmati pembaca awam sekalipun.&lt;/p&gt;&lt;/div&gt;
&lt;hr data-end="797" data-start="794" style="text-align: justify;" /&gt;
&lt;h2 data-end="832" data-section-id="111bm01" data-start="799" style="text-align: justify;"&gt;2. Tujuan Karya Ilmiah Populer&lt;/h2&gt;
&lt;ul data-end="988" data-start="833"&gt;
&lt;li data-end="884" data-section-id="ozrcob" data-start="833" style="text-align: justify;"&gt;
Menyebarkan ilmu pengetahuan ke masyarakat luas
&lt;/li&gt;
&lt;li data-end="939" data-section-id="edgeky" data-start="885" style="text-align: justify;"&gt;
Memberikan edukasi dengan cara yang mudah dipahami
&lt;/li&gt;
&lt;li data-end="988" data-section-id="1lmprbx" data-start="940" style="text-align: justify;"&gt;
Menarik minat baca terhadap ilmu pengetahuan
&lt;/li&gt;
&lt;/ul&gt;
&lt;hr data-end="993" data-start="990" style="text-align: justify;" /&gt;
&lt;h2 data-end="1028" data-section-id="138w1eo" data-start="995" style="text-align: justify;"&gt;3. Contoh Karya Ilmiah Populer&lt;/h2&gt;
&lt;ul data-end="1164" data-start="1029"&gt;
&lt;li data-end="1061" data-section-id="zlmnq9" data-start="1029" style="text-align: justify;"&gt;
Artikel kesehatan di majalah
&lt;/li&gt;
&lt;li data-end="1094" data-section-id="1ihttkg" data-start="1062" style="text-align: justify;"&gt;
Tulisan teknologi di website
&lt;/li&gt;
&lt;li data-end="1125" data-section-id="18k6m0g" data-start="1095" style="text-align: justify;"&gt;
Artikel pendidikan di blog
&lt;/li&gt;
&lt;li data-end="1164" data-section-id="1hym8fm" data-start="1126" style="text-align: justify;"&gt;
Opini berbasis data di media massa
&lt;/li&gt;
&lt;/ul&gt;
&lt;hr data-end="1169" data-start="1166" style="text-align: justify;" /&gt;
&lt;h2 style="text-align: justify;"&gt;B.&amp;nbsp;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="background-color: white; color: #0f1115; font-size: 20px;"&gt;Ciri Utama Karya Ilmiah Populer (Harus Dikenali Murid)&lt;/span&gt;&lt;/h2&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tema ilmiah faktual&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Berisi topik sains, teknologi, kesehatan, lingkungan, atau sosial yang berbasis data/penelitian.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;em&gt;Contoh:&lt;/em&gt;&amp;nbsp;"Perubahan iklim mempercepat pencairan es di Kutub Utara" (bukan opini atau fiksi).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Bahasa populer, informatif, dan mudah dicerna&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Menggunakan kalimat aktif, tidak bertele-tele.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Istilah teknis selalu dijelaskan dengan analogi atau kata sederhana.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;em&gt;Contoh:&lt;/em&gt;&amp;nbsp;"Korona virus punya duri seperti mahkota, maka dinamakan corona (mahkota dalam bahasa Latin)."&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Struktur yang fleksibel tetapi logis&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Bisa diawali dengan pertanyaan retoris, kisah nyata, atau data mengejutkan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Alur biasanya:&amp;nbsp;&lt;span style="font-weight: 600;"&gt;Pembukaan menarik → Fakta ilmiah → Penjelasan → Penutup berisi kesimpulan atau ajakan&lt;/span&gt;.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Menonjolkan aspek manfaat atau relevansi dengan kehidupan&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Menjawab "Apa hubungannya dengan saya?"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;em&gt;Contoh:&lt;/em&gt;&amp;nbsp;"Kenapa kurang tidur bikin gemuk? Ini penjelasan ilmiahnya."&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Menyertakan sumber yang kredibel (meskipun tidak selengkap karya formal)&lt;/span&gt;&lt;/p&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Nama peneliti, lembaga (LIPI, WHO, NASA), atau jurnal ilmiah disebut sebagai rujukan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Tujuannya untuk membangun kepercayaan pembaca.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ol&gt;&lt;ul data-end="1915" data-start="1836"&gt;
&lt;/ul&gt;
&lt;hr data-end="1920" data-start="1917" style="text-align: justify;" /&gt;
&lt;h2 style="text-align: justify;"&gt;C.&amp;nbsp;&lt;span face="quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif" style="background-color: white; color: #0f1115; font-size: 20px;"&gt;&amp;nbsp;Perbedaan Kunci dengan Karya Ilmiah Formal&lt;/span&gt;&lt;/h2&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 473px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 459px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -465px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px 10px 0px; text-align: left;"&gt;Aspek&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Karya Ilmiah Formal (Skripsi, Jurnal)&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top-color: currentcolor; border-top-style: none; border-top-width: medium; font: 500 15px / 25px quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; padding: 10px 16px; text-align: left;"&gt;Karya Ilmiah Populer (Artikel di Majalah, Koran, Blog Sains)&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Bahasa&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Baku, teknis, banyak istilah asing&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Baku namun santai, analogi, penjelasan istilah&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Struktur&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Kaku: Pendahuluan-Metode-Hasil-Pembahasan-Daftar Pustaka&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Fleksibel, biasa pakai judul dan subjudul menarik&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tujuan&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Komunikasi antar ilmuwan, publikasi akademik&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Edukasi publik, menumbuhkan minat sains&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Panjang&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Bisa puluhan halaman&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Biasanya 1-3 halaman&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Daftar Pustaka&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Wajib lengkap&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Kadang hanya disebut sumbernya di akhir teks&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Audien&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Sesama peneliti/akademisi&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Masyarakat umum (pelajar hingga orang dewasa)&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;div class="TyagGW_tableContainer"&gt;&lt;div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;hr data-end="2219" data-start="2216" style="text-align: justify;" /&gt;
&lt;h1 data-end="2258" data-section-id="1055hgq" data-start="2221" style="text-align: justify;"&gt;D. STRUKTUR KARYA ILMIAH POPULER&lt;/h1&gt;
&lt;h2 data-end="2271" data-section-id="1a3l0oo" data-start="2260" style="text-align: justify;"&gt;1. Judul&lt;/h2&gt;
&lt;ul data-end="2315" data-start="2272"&gt;
&lt;li data-end="2293" data-section-id="15iflqb" data-start="2272" style="text-align: justify;"&gt;
Menarik perhatian
&lt;/li&gt;
&lt;li data-end="2315" data-section-id="1kn9vic" data-start="2294" style="text-align: justify;"&gt;
Menggambarkan isi
&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-end="2327" data-start="2317" style="text-align: justify;"&gt;Contoh:&lt;/p&gt;
&lt;blockquote data-end="2369" data-start="2328"&gt;
&lt;p data-end="2369" data-start="2330" style="text-align: justify;"&gt;“Bahaya Begadang bagi Kesehatan Remaja”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;hr data-end="2374" data-start="2371" style="text-align: justify;" /&gt;
&lt;h2 data-end="2393" data-section-id="k72qj0" data-start="2376" style="text-align: justify;"&gt;2. Pendahuluan&lt;/h2&gt;
&lt;ul data-end="2457" data-start="2394"&gt;
&lt;li data-end="2427" data-section-id="1lblndi" data-start="2394" style="text-align: justify;"&gt;
Berisi latar belakang masalah
&lt;/li&gt;
&lt;li data-end="2457" data-section-id="r4y7p3" data-start="2428" style="text-align: justify;"&gt;
Mengajak pembaca tertarik
&lt;/li&gt;
&lt;/ul&gt;
&lt;hr data-end="2462" data-start="2459" style="text-align: justify;" /&gt;
&lt;h2 data-end="2486" data-section-id="1dhm4v8" data-start="2464" style="text-align: justify;"&gt;3. Isi (Pembahasan)&lt;/h2&gt;
&lt;ul data-end="2549" data-start="2487"&gt;
&lt;li data-end="2507" data-section-id="168kv0h" data-start="2487" style="text-align: justify;"&gt;
Penjelasan utama
&lt;/li&gt;
&lt;li data-end="2532" data-section-id="46vztf" data-start="2508" style="text-align: justify;"&gt;
Data/fakta pendukung
&lt;/li&gt;
&lt;li data-end="2549" data-section-id="1p8wvp6" data-start="2533" style="text-align: justify;"&gt;
Contoh nyata
&lt;/li&gt;
&lt;/ul&gt;
&lt;hr data-end="2554" data-start="2551" style="text-align: justify;" /&gt;
&lt;h2 data-end="2569" data-section-id="jfg3xc" data-start="2556" style="text-align: justify;"&gt;4. Penutup&lt;/h2&gt;
&lt;ul data-end="2606" data-start="2570"&gt;
&lt;li data-end="2584" data-section-id="1bttv07" data-start="2570" style="text-align: justify;"&gt;
Kesimpulan
&lt;/li&gt;
&lt;li data-end="2606" data-section-id="b16ht4" data-start="2585" style="text-align: justify;"&gt;
Saran atau ajakan
&lt;/li&gt;
&lt;/ul&gt;&lt;div style="text-align: justify;"&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;Contoh Format Karya Ilmiah Populer (Model Sederhana)&lt;/h3&gt;&lt;div class="md-code-block md-code-block-light" style="--ds-md-code-banner-background-color: #f9fafb; --ds-md-code-block-border-radius: 12px; --ds-md-code-block-font-size: calc(1.143*11px); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-radius: 12px; margin: 16px 0px 11.43px; position: relative;"&gt;&lt;div class="md-code-block-banner-wrap" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; position: sticky; top: 0px; z-index: 6;"&gt;&lt;div class="md-code-block-banner md-code-block-banner-lite" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-top-left-radius: 12px; border-top-right-radius: 12px; display: flex; font-size: 12.573px; justify-content: space-between; line-height: 12.573px; padding: 0px;"&gt;&lt;div class="_121d384" style="align-items: center; display: flex; justify-content: space-between; padding: 6px; width: 740.052px;"&gt;&lt;div class="d2a24f03" style="flex-shrink: 0; text-align: justify;"&gt;&lt;span class="d813de27" face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="font-size: 12px; line-height: 18px; margin-left: 8px;"&gt;text&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;pre style="font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 22px; margin: 0px; overflow: auto; padding: 16px; word-break: break-all;"&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-size: 13px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; text-align: justify; white-space: pre-wrap;"&gt;JUDUL MENARIK (biasanya berupa fakta unik atau pertanyaan)&lt;/div&gt;&lt;div style="text-align: justify;"&gt;&lt;span face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="color: #0f1115; text-wrap-mode: wrap;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style="color: #0f1115; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; text-align: justify; text-wrap-mode: wrap;"&gt;LEAD (paragraf pembuka): 2-3 kalimat yang memancing rasa ingin tahu.&lt;/div&gt;&lt;div style="text-align: justify;"&gt;&lt;span face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="color: #0f1115; text-wrap-mode: wrap;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;span face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="color: #0f1115; text-wrap-mode: wrap;"&gt;ISI:
- Paragraf 1: Pengenalan topik dan mengapa penting.
- Paragraf 2: Data/hasil penelitian (dijelaskan dengan bahasa awam).
- Paragraf 3: Mekanisme/proses ilmiah (dengan analogi).
- Paragraf 4: Implikasi/manfaat untuk pembaca.

&lt;div style="text-align: justify;"&gt;PENUTUP: Kesimpulan singkat + ajakan/tindakan atau opini ilmiah penulis.&lt;/div&gt;&lt;/span&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;hr data-end="2611" data-start="2608" style="text-align: justify;" /&gt;
&lt;h1 data-end="2641" data-section-id="13hv9nn" data-start="2613" style="text-align: justify;"&gt;E. CONTOH ANALISIS TEKS&lt;/h1&gt;
&lt;h2 data-end="2661" data-section-id="6ayzpf" data-start="2643" style="text-align: justify;"&gt;Contoh Singkat:&lt;/h2&gt;
&lt;blockquote data-end="2819" data-start="2662"&gt;
&lt;p data-end="2819" data-start="2664" style="text-align: justify;"&gt;“Penggunaan gadget berlebihan dapat menyebabkan gangguan tidur. Berdasarkan penelitian, cahaya biru dari layar dapat menghambat produksi hormon melatonin.”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;hr data-end="2824" data-start="2821" style="text-align: justify;" /&gt;
&lt;h2 data-end="2838" data-section-id="1m8t5jx" data-start="2826" style="text-align: justify;"&gt;Analisis:&lt;/h2&gt;
&lt;ul data-end="3022" data-start="2839"&gt;
&lt;li data-end="2878" data-section-id="1igilak" data-start="2839" style="text-align: justify;"&gt;
✔ Mengandung fakta → ada penelitian
&lt;/li&gt;
&lt;li data-end="2906" data-section-id="1fptlsw" data-start="2879" style="text-align: justify;"&gt;
✔ Bahasa mudah dipahami
&lt;/li&gt;
&lt;li data-end="2979" data-section-id="14ubp8m" data-start="2907" style="text-align: justify;"&gt;
✔ Mengandung istilah ilmiah (melatonin) tetapi dijelaskan konteksnya
&lt;/li&gt;
&lt;li data-end="3022" data-section-id="1nfc5pi" data-start="2980" style="text-align: justify;"&gt;
✔ Relevan dengan kehidupan sehari-hari
&lt;/li&gt;
&lt;/ul&gt;
&lt;hr data-end="3027" data-start="3024" style="text-align: justify;" /&gt;
&lt;h1 data-end="3075" data-section-id="1rlms7h" data-start="3029" style="text-align: justify;"&gt;F. LANGKAH MENGENALI KARYA ILMIAH POPULER&lt;/h1&gt;
&lt;ol data-end="3238" data-start="3077"&gt;
&lt;li data-end="3114" data-section-id="1w8a5xs" data-start="3077" style="text-align: justify;"&gt;
Perhatikan bahasa yang digunakan
&lt;/li&gt;
&lt;li data-end="3146" data-section-id="1aq0fao" data-start="3115" style="text-align: justify;"&gt;
Cari apakah ada fakta/data
&lt;/li&gt;
&lt;li data-end="3174" data-section-id="13muen4" data-start="3147" style="text-align: justify;"&gt;
Lihat struktur tulisan
&lt;/li&gt;
&lt;li data-end="3205" data-section-id="1c0uktg" data-start="3175" style="text-align: justify;"&gt;
Cek apakah mudah dipahami
&lt;/li&gt;
&lt;li data-end="3238" data-section-id="1esjymr" data-start="3206" style="text-align: justify;"&gt;
Identifikasi tujuan penulis&lt;/li&gt;&lt;/ol&gt;&lt;div style="text-align: justify;"&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;&lt;ul style="font-size: 16px; font-weight: 400; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px 0px 8px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Latihan cepat (15 menit):&lt;/span&gt;&lt;/div&gt;&lt;div style="text-align: justify;"&gt;Prediksi mana yang termasuk karya ilmiah populer (beri alasannya).:&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;/li&gt;&lt;ul style="margin: 4px 0px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Judul 1: "Pengaruh Suhu terhadap Laju Reaksi Enzim Katalase"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Judul 2: "Kok Bisa Pesawat Terbang di Udara? Ini Rahasianya"&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Judul 3: "Analisis Regresi Linear Hubungan Antara Hujan dan Kemacetan"&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&lt;/h3&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;Mengenali ciri&amp;nbsp;&lt;/span&gt;&lt;span style="font-size: medium;"&gt;Karya Ilmiah Populer&amp;nbsp;&lt;/span&gt;&lt;span style="font-size: medium;"&gt;dalam sebuah teks&amp;nbsp;&lt;/span&gt;&lt;/h4&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-stretch: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;&lt;p class="ds-markdown-paragraph" style="font-size: 16px; font-weight: 400; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Metode:&lt;/span&gt;&amp;nbsp;Kerja mandiri.&lt;/p&gt;&lt;ul style="font-size: 16px; font-weight: 400; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Mikroplastik):&lt;/span&gt;&lt;/p&gt;&lt;blockquote style="border-left: 1.11111px solid rgb(173, 178, 184); margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;*"Tahukah kamu, dalam satu sendok teh garam dapur, bisa terdapat ratusan partikel mikroplastik? Sebuah studi dari Universitas Newcastle (2022) menemukan bahwa rata-rata orang mengonsumsi sekitar 5 gram plastik setiap minggu – setara berat satu kartu ATM. Mikroplastik ini berasal dari kemasan makanan yang terurai, serat pakaian sintetis, dan ban kendaraan yang aus. Meski dampaknya bagi kesehatan manusia masih diteliti, para ilmuwan menduga partikel ini dapat memicu peradangan dalam usus. Jadi, mengurangi penggunaan plastik sekali pakai bukan hanya baik untuk bumi, tapi juga untuk tubuh kita sendiri."*&lt;/p&gt;&lt;/blockquote&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/h3&gt;&lt;/div&gt;

&lt;details open=""&gt;
  &lt;summary style="color: blue; cursor: pointer; font-weight: bold;"&gt;
    Klik untuk melihat teks tersembunyi
  &lt;/summary&gt;
  &lt;div style="border: 1px solid rgb(204, 204, 204); margin-top: 5px; padding: 10px;"&gt;
   &lt;p&gt; Jawaban: Judul 2 (karena menggunakan pertanyaan menarik, topik ilmiah, bahasa populer). Judul 1 dan 3 cenderung formal/teknis.&lt;br /&gt;&lt;br /&gt;ciri Karya Ilmiah Populer pada teks di atas:&lt;br&gt;&lt;br&gt;
     &lt;ol&gt;
  &lt;li&gt;Topik ilmiah (mikroplastik, studi universitas).&lt;/li&gt;
  &lt;li&gt;Bahasa populer ("tahukah kamu", analogi kartu ATM).&lt;/li&gt;
  &lt;li&gt;Sumber disebut (Univ. Newcastle, 2022)&lt;/li&gt;
  &lt;li&gt;Relevansi kehidupan (garam dapur, kesehatan usus).&lt;/li&gt;
  &lt;li&gt;Struktur: pembuka pertanyaan → data → penjelasan → ajakan&lt;/li&gt;
&lt;/ol&gt;


  &lt;/div&gt;
&lt;/details&gt;
</description><link>http://kitab-investasi.blogspot.com/2026/04/mengenal-karya-ilmiah-populer.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-2315522970109070288</guid><pubDate>Mon, 20 Apr 2026 06:22:00 +0000</pubDate><atom:updated>2026-04-20T13:42:02.242+07:00</atom:updated><title>Pengembangan Web Dasar: HTML &amp; CSS untuk Profil Diri</title><description>&lt;p style="text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&amp;nbsp;&lt;span face="Roboto, sans-serif" style="background-color: white; color: #444444; font-weight: 700;"&gt;Dasar HTML dan CSS&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;em&gt;“Pernahkah kalian mengunjungi website yang menarik? Apa saja yang membuatnya terlihat rapi, berwarna, dan mudah dibaca?”&lt;/em&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;span face="Roboto, sans-serif" style="background-color: white; color: #444444; font-size: large; text-align: justify;"&gt;&amp;nbsp;&lt;/span&gt;&lt;div&gt;&lt;span face="Roboto, sans-serif" style="background-color: white; color: #444444; font-size: large; text-align: justify;"&gt;Di&lt;/span&gt;&lt;span face="Roboto, sans-serif" style="background-color: white; color: #444444; font-size: large; text-align: justify;"&gt;&amp;nbsp;balik tampilan yang memukau itu, terdapat bahasa pemrograman yang bekerja sama untuk menciptakan keajaiban digital. Dua bahasa yang paling dasar dan wajib kamu kuasai adalah HTML dan CSS.&lt;/span&gt;&lt;br /&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Website yang menarik bukan hanya teks dan gambar, tetapi juga hasil kerja sama antara&amp;nbsp;&lt;span style="font-weight: 600;"&gt;HTML&lt;/span&gt;&amp;nbsp;(kerangka) dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;CSS&lt;/span&gt;&amp;nbsp;(dekorasi).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;HTML mengatur&amp;nbsp;&lt;span style="font-weight: 600;"&gt;struktur konten&lt;/span&gt;&amp;nbsp;(judul, paragraf, gambar, tautan).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;CSS mengatur&amp;nbsp;&lt;span style="font-weight: 600;"&gt;tampilan visual&lt;/span&gt;&amp;nbsp;(warna, font, tata letak, efek).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Dengan menguasai keduanya, siswa dapat membuat website sendiri, memahami dasar pengembangan web, dan memodifikasi tampilan sesuai keinginan.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;jadi HTML dan CSS merupakan dua komponen dasar dalam pengembangan web. Keduanya bekerja sama untuk menghasilkan tampilan website yang tidak hanya berfungsi, tetapi juga menarik secara visual.&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="font-size: large; font-weight: 700;"&gt;Apa itu HTML dan CSS?&lt;/span&gt;&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;HTML&lt;/span&gt;&amp;nbsp;(HyperText Markup Language) adalah bahasa yang digunakan untuk membuat struktur dasar sebuah halaman web. Bayangkan HTML seperti kerangka sebuah rumah, yang menentukan letak ruangan, pintu, dan jendela. Dengan HTML, kita bisa membuat judul, paragraf, gambar, tautan, dan elemen-elemen lainnya di halaman web.&lt;/span&gt;&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;CSS&lt;/span&gt;&amp;nbsp;(Cascading Style Sheets) berfungsi untuk mempercantik tampilan halaman web yang telah dibuat dengan HTML. Jika HTML adalah kerangka rumah, maka CSS adalah cat, furnitur, dan dekorasi yang membuat rumah terlihat menarik. Dengan CSS, kita bisa mengatur warna, font, ukuran, tata letak, dan efek-efek visual lainnya pada elemen-elemen HTML.&lt;/span&gt;&lt;/p&gt;&lt;h3 class="wp-block-heading" style="background-color: white; box-sizing: inherit; clear: both; color: #222222; font-family: Roboto, sans-serif; font-weight: 500; line-height: 26px; margin: 0px 0px 15px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Mengapa Harus Belajar HTML dan CSS?&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;ul class="wp-block-list" style="background-color: white; box-sizing: border-box; color: #444444; font-family: Roboto, sans-serif; list-style: disc; margin: 0px 0px 1em 1em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Membuat Website Sendiri:&lt;/span&gt;&amp;nbsp;Kamu bisa mewujudkan ide-ide kreatifmu menjadi sebuah website pribadi, portofolio, atau bahkan bisnis online.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Memahami Dasar-dasar Web Development:&lt;/span&gt;&amp;nbsp;HTML dan CSS adalah fondasi yang kuat untuk mempelajari bahasa pemrograman web lainnya seperti JavaScript.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Kustomisasi Tampilan:&lt;/span&gt;&amp;nbsp;Kamu bisa mendesain website sesuai dengan selera dan kebutuhanmu tanpa harus bergantung pada template yang sudah jadi.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Meningkatkan Keterampilan:&lt;/span&gt;&amp;nbsp;Belajar HTML dan CSS akan melatih logika berpikirmu dan kemampuan memecahkan masalah.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 class="wp-block-heading" style="background-color: white; box-sizing: inherit; clear: both; color: #222222; font-family: Roboto, sans-serif; font-weight: 500; line-height: 26px; margin: 0px 0px 15px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Mulai dari Mana?&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;ol class="wp-block-list" style="background-color: white; box-sizing: border-box; color: #444444; font-family: Roboto, sans-serif; list-style: decimal; margin: 0px 0px 1em 1em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Text Editor:&lt;/span&gt;&amp;nbsp;Pilihlah text editor yang sesuai dengan preferensimu. Beberapa pilihan populer adalah Visual Studio Code, Sublime Text, atau Atom.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Browser:&lt;/span&gt;&amp;nbsp;Setiap perubahan kode yang kamu buat akan langsung terlihat di browser. Google Chrome, Mozilla Firefox, dan Microsoft Edge adalah pilihan yang baik.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit;"&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Belajar Dasar-dasar HTML:&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;ul class="wp-block-list" style="box-sizing: border-box; list-style: disc; margin: 0px 0px 0px 1.5em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Struktur Dasar:&lt;/span&gt;&amp;nbsp;Pelajari tag-tag HTML seperti&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;html&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;head&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;body&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;p&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;img&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;a&amp;gt;&lt;/code&gt;, dan lain-lain.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Atribut:&lt;/span&gt;&amp;nbsp;Pahami cara menambahkan atribut pada tag untuk memberikan informasi tambahan, misalnya&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;src&lt;/code&gt;&amp;nbsp;untuk gambar,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;href&lt;/code&gt;&amp;nbsp;untuk tautan, dan&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;id&lt;/code&gt;&amp;nbsp;untuk identifikasi.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit;"&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Mengenal CSS:&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;ul class="wp-block-list" style="box-sizing: border-box; list-style: disc; margin: 0px 0px 0px 1.5em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Selector:&lt;/span&gt;&amp;nbsp;Pelajari cara memilih elemen HTML yang ingin kamu styling menggunakan selector seperti tag, id, dan class.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Property dan Value:&lt;/span&gt;&amp;nbsp;Setiap properti CSS memiliki nilai yang berbeda-beda, misalnya&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;color&lt;/code&gt;&amp;nbsp;untuk mengatur warna,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;font-size&lt;/code&gt;&amp;nbsp;untuk mengatur ukuran font, dan&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;background-color&lt;/code&gt;&amp;nbsp;untuk mengatur warna latar belakang.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Praktik:&lt;/span&gt;&amp;nbsp;Cobalah membuat halaman web sederhana dan teruslah berlatih. Semakin sering kamu berlatih, semakin mahir kamu akan menjadi.&lt;/span&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;HTML (HyperText Markup Language): Tulang Belakang Website&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;Seperti yang sudah kita bahas, HTML adalah bahasa yang digunakan untuk membuat struktur dasar sebuah halaman web. Bayangkan HTML seperti kerangka sebuah bangunan. Setiap elemen dalam HTML diwakili oleh tag, yang diawali dengan tanda kurung siku (&amp;lt;) dan diakhiri dengan tanda kurung siku (&amp;gt;) seperti&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;html&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;head&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;body&amp;gt;&lt;/code&gt;.&lt;/span&gt;&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Tag-tag HTML yang Penting:&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ul class="wp-block-list" style="background-color: white; box-sizing: border-box; color: #444444; font-family: Roboto, sans-serif; list-style: disc; margin: 0px 0px 1em 1em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;html&amp;gt;&lt;/code&gt;:&lt;/span&gt;&amp;nbsp;Tag pembuka dan penutup untuk seluruh dokumen HTML.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;head&amp;gt;&lt;/code&gt;:&lt;/span&gt;&amp;nbsp;Bagian kepala dokumen, berisi informasi tentang halaman seperti judul, meta data, dan link ke file CSS.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;body&amp;gt;&lt;/code&gt;:&lt;/span&gt;&amp;nbsp;Bagian tubuh dokumen, berisi konten yang akan ditampilkan di halaman.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;&amp;nbsp;hingga&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;:&lt;/span&gt;&amp;nbsp;Tag untuk membuat judul dengan berbagai tingkat kepentingan.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;p&amp;gt;&lt;/code&gt;:&lt;/span&gt;&amp;nbsp;Tag untuk membuat paragraf.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;img&amp;gt;&lt;/code&gt;:&lt;/span&gt;&amp;nbsp;Tag untuk menyisipkan gambar.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;a&amp;gt;&lt;/code&gt;:&lt;/span&gt;&amp;nbsp;Tag untuk membuat tautan.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;&amp;nbsp;dan&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;:&lt;/span&gt;&amp;nbsp;Tag untuk membuat daftar tidak bernomor dan bernomor.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&amp;lt;table&amp;gt;:&lt;/span&gt;&amp;nbsp;Tag untuk membuat tabel.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&amp;lt;div&amp;gt;:&lt;/span&gt;&amp;nbsp;Tag untuk membagi konten menjadi bagian-bagian yang lebih kecil.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Atribut:&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;Atribut memberikan informasi tambahan tentang suatu elemen. Contohnya, atribut&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;src&lt;/code&gt;&amp;nbsp;pada tag&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;img&amp;gt;&lt;/code&gt;&amp;nbsp;digunakan untuk menentukan sumber gambar, sedangkan atribut&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;href&lt;/code&gt;&amp;nbsp;pada tag&amp;nbsp;&lt;code style="box-sizing: inherit; color: #e83e8c; font-family: Monaco, Consolas, &amp;quot;Andale Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, monospace; overflow-wrap: break-word;"&gt;&amp;lt;a&amp;gt;&lt;/code&gt;&amp;nbsp;digunakan untuk menentukan tujuan tautan.&lt;/span&gt;&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Struktur dasar HTML yang wajib diketahui:&lt;/span&gt;&lt;/p&gt;&lt;div class="md-code-block md-code-block-light" style="--ds-md-code-banner-background-color: #f9fafb; --ds-md-code-block-border-radius: 12px; --ds-md-code-block-font-size: calc(1.143*11px); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-radius: 12px; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 11.43px; position: relative;"&gt;&lt;div class="md-code-block-banner-wrap" style="background-color: white; position: sticky; top: 0px; z-index: 6;"&gt;&lt;div class="md-code-block-banner md-code-block-banner-lite" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-top-left-radius: 12px; border-top-right-radius: 12px; display: flex; font-size: 12.573px; justify-content: space-between; line-height: 12.573px; padding: 0px;"&gt;&lt;div class="_121d384" style="align-items: center; display: flex; justify-content: space-between; padding: 6px; width: 740.052px;"&gt;&lt;div class="d2a24f03" style="flex-shrink: 0;"&gt;&lt;span class="d813de27" face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="font-size: 12px; line-height: 18px; margin-left: 8px;"&gt;html&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;pre style="font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 22px; margin: 0px; overflow: auto; padding: 16px; white-space: pre-wrap; word-break: break-all;"&gt;&lt;span class="token doctype" style="color: #383a42;"&gt;&lt;span class="token punctuation"&gt;&amp;lt;!&lt;/span&gt;&lt;span class="token doctype-tag"&gt;DOCTYPE&lt;/span&gt; &lt;span class="token name"&gt;html&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;title&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Judul Halaman&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;title&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Ini judul utama&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Ini paragraf pertama saya.&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;src&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;gambar.jpg&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;alt&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;deskripsi gambar&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;href&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;https://example.com&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Klik tautan ini&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/pre&gt;&lt;svg class="_9bc997d _33882ae" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;svg class="_9bc997d _28d7e84" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Tag penting yang dijelaskan secara fungsional:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;html&amp;gt;&lt;/code&gt;&amp;nbsp;: sebagai wadah seluruh dokumen.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;head&amp;gt;&lt;/code&gt;&amp;nbsp;: berisi informasi teknis halaman (judul, meta, link CSS).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;body&amp;gt;&lt;/code&gt;&amp;nbsp;: semua yang tampak di browser.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;&amp;nbsp;sampai&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;&amp;nbsp;: judul dengan tingkatan (h1 paling besar/penting).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;p&amp;gt;&lt;/code&gt;&amp;nbsp;: paragraf.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;img&amp;gt;&lt;/code&gt;&amp;nbsp;: menampilkan gambar (wajib ada atribut&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;src&lt;/code&gt;&amp;nbsp;dan&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;alt&lt;/code&gt;).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;a&amp;gt;&lt;/code&gt;&amp;nbsp;: tautan (wajib atribut&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;href&lt;/code&gt;).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;,&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;li&amp;gt;&lt;/code&gt;&amp;nbsp;: daftar tidak berurutan dan berurutan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;&amp;lt;div&amp;gt;&lt;/code&gt;&amp;nbsp;: pembungkus kelompok elemen untuk memudahkan styling.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Atribut:&lt;/span&gt;&amp;nbsp;informasi tambahan pada tag. Contoh:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;src&lt;/code&gt;&amp;nbsp;untuk sumber gambar&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;href&lt;/code&gt;&amp;nbsp;untuk tujuan tautan&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;id&lt;/code&gt;&amp;nbsp;atau&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;class&lt;/code&gt;&amp;nbsp;untuk menandai elemen (sangat berguna untuk CSS)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Latihan singkat (10 menit):&lt;/span&gt;&lt;br /&gt;Buat file&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;index.html&lt;/code&gt;, tulis struktur dasar lalu tambahkan judul&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; line-height: 22px; padding: 0px 5px;"&gt;Profil Saya&lt;/code&gt;, satu paragraf, satu gambar (gunakan URL gambar dari internet), dan satu tautan ke media sosial.&lt;/p&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;b&gt;&lt;span color="var(--tw-prose-bold)" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box; color: #334155; font-family: ui-serif, Georgia, Cambria, &amp;quot;times new roman&amp;quot;, Times, serif; font-size: 20px; letter-spacing: 0.2px;"&gt;Tips:&lt;/span&gt;&lt;span style="color: #334155; font-family: ui-serif, Georgia, Cambria, &amp;quot;times new roman&amp;quot;, Times, serif; font-size: 20px; letter-spacing: 0.2px;"&gt;&amp;nbsp;buat kamu yang menggunakan Notepad di Windows, simpanlah nama filenya dengan menggunakan tanda petik contoh :&lt;/span&gt;&lt;code style="--tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-radius: 0.25rem; border-style: solid; border-width: 0px; box-sizing: border-box; color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, &amp;quot;liberation mono&amp;quot;, &amp;quot;courier new&amp;quot;, monospace; font-feature-settings: normal; font-size: 1rem; font-variation-settings: normal; letter-spacing: 0px; line-height: 1.5rem; padding: 0.25rem;"&gt;"hello-world.html"&lt;/code&gt;&lt;span style="color: #334155; font-family: ui-serif, Georgia, Cambria, &amp;quot;times new roman&amp;quot;, Times, serif; font-size: 20px; letter-spacing: 0.2px;"&gt;&amp;nbsp;agar ekstensinya&amp;nbsp;&lt;/span&gt;&lt;code style="--tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-radius: 0.25rem; border-style: solid; border-width: 0px; box-sizing: border-box; color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, &amp;quot;liberation mono&amp;quot;, &amp;quot;courier new&amp;quot;, monospace; font-feature-settings: normal; font-size: 1rem; font-variation-settings: normal; letter-spacing: 0px; line-height: 1.5rem; padding: 0.25rem;"&gt;.html&lt;/code&gt;&lt;span style="color: #334155; font-family: ui-serif, Georgia, Cambria, &amp;quot;times new roman&amp;quot;, Times, serif; font-size: 20px; letter-spacing: 0.2px;"&gt;, bukan&amp;nbsp;&lt;/span&gt;&lt;code style="--tw-bg-opacity: 1; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-radius: 0.25rem; border-style: solid; border-width: 0px; box-sizing: border-box; color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, &amp;quot;liberation mono&amp;quot;, &amp;quot;courier new&amp;quot;, monospace; font-feature-settings: normal; font-size: 1rem; font-variation-settings: normal; letter-spacing: 0px; line-height: 1.5rem; padding: 0.25rem;"&gt;.txt&lt;/code&gt;&lt;span style="color: #334155; font-family: ui-serif, Georgia, Cambria, &amp;quot;times new roman&amp;quot;, Times, serif; font-size: 20px; letter-spacing: 0.2px;"&gt;. atau file - Save - file name:&amp;nbsp;&lt;/span&gt;&lt;span style="color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, &amp;quot;liberation mono&amp;quot;, &amp;quot;courier new&amp;quot;, monospace;"&gt;hello-world.html -&lt;/span&gt;&lt;span style="color: #334155; font-family: ui-serif, Georgia, Cambria, &amp;quot;times new roman&amp;quot;, Times, serif; font-size: 20px; letter-spacing: 0.2px;"&gt;save as&amp;nbsp;&lt;/span&gt;&lt;span style="color: #334155; font-family: ui-serif, Georgia, Cambria, &amp;quot;times new roman&amp;quot;, Times, serif; font-size: 20px; letter-spacing: 0.2px;"&gt;type&lt;/span&gt;&lt;span style="color: #334155; font-family: ui-serif, Georgia, Cambria, &amp;quot;times new roman&amp;quot;, Times, serif; font-size: 20px; letter-spacing: 0.2px;"&gt;&amp;nbsp;&lt;/span&gt;&lt;span style="color: #334155; font-family: ui-serif, Georgia, Cambria, &amp;quot;times new roman&amp;quot;, Times, serif; font-size: 20px; letter-spacing: 0.2px;"&gt;: all file&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;CSS (Cascading Style Sheets): Hiasan yang Membuat Website Menarik&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;CSS digunakan untuk mengatur tampilan elemen HTML. Dengan CSS, kamu bisa mengubah warna, ukuran, font, tata letak, dan banyak lagi aspek visual dari halaman webmu.&lt;/span&gt;&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Cara Kerja CSS:&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ol class="wp-block-list" style="background-color: white; box-sizing: border-box; color: #444444; font-family: Roboto, sans-serif; list-style: decimal; margin: 0px 0px 1em 1em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Selector:&lt;/span&gt;&amp;nbsp;Bagian ini digunakan untuk memilih elemen HTML yang ingin kamu gaya.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Property:&lt;/span&gt;&amp;nbsp;Bagian ini menentukan aspek yang ingin kamu ubah (misalnya, warna, ukuran font).&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Value:&lt;/span&gt;&amp;nbsp;Bagian ini menentukan nilai untuk properti tersebut.&lt;/span&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Konsep Penting dalam CSS:&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ul class="wp-block-list" style="background-color: white; box-sizing: border-box; color: #444444; font-family: Roboto, sans-serif; list-style: disc; margin: 0px 0px 1em 1em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Specificity:&lt;/span&gt;&amp;nbsp;Menentukan gaya mana yang akan diterapkan jika ada beberapa gaya yang bertentangan.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Inheritance:&lt;/span&gt;&amp;nbsp;Gaya dari elemen induk dapat diwariskan ke elemen anak.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Box Model:&lt;/span&gt;&amp;nbsp;Setiap elemen HTML dianggap sebagai sebuah kotak yang memiliki margin, border, padding, dan content.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Layout:&lt;/span&gt;&amp;nbsp;Cara mengatur posisi elemen di halaman menggunakan teknik seperti float, position, dan flexbox.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Praktik Terbaik:&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ul class="wp-block-list" style="background-color: white; box-sizing: border-box; color: #444444; font-family: Roboto, sans-serif; list-style: disc; margin: 0px 0px 1em 1em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Semantik HTML:&lt;/span&gt;&amp;nbsp;Gunakan tag HTML sesuai dengan semantiknya, sehingga mesin pencari dan pengguna dapat lebih mudah memahami struktur halaman web.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;CSS External:&lt;/span&gt;&amp;nbsp;Letakkan kode CSS dalam file terpisah (misalnya, style.css) untuk menjaga kerapihan kode dan memudahkan pengelolaan.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Responsif Design:&lt;/span&gt;&amp;nbsp;Buat website yang dapat menyesuaikan tampilannya dengan berbagai ukuran layar.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Validasi:&lt;/span&gt;&amp;nbsp;Pastikan kode HTML dan CSS kamu valid menggunakan validator online.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="font-size: large; font-weight: 700;"&gt;Contoh Sederhana bisa dipraktekkan menggunakan notepad atau html online:&lt;/span&gt;&lt;/p&gt;&lt;figure class="wp-block-image size-full" style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; margin: 0px 0px 1em; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;img alt="" class="wp-image-3558" decoding="async" height="350" sizes="(max-width: 778px) 100vw, 778px" src="https://bie.telkomuniversity.ac.id/wp-content/uploads/2024/10/Screenshot-2024-10-02-121739.png" srcset="https://bie.telkomuniversity.ac.id/wp-content/uploads/2024/10/Screenshot-2024-10-02-121739.png 778w, https://bie.telkomuniversity.ac.id/wp-content/uploads/2024/10/Screenshot-2024-10-02-121739-300x135.png 300w, https://bie.telkomuniversity.ac.id/wp-content/uploads/2024/10/Screenshot-2024-10-02-121739-768x346.png 768w" style="border: 0px; box-sizing: border-box; height: auto; max-width: 100%; vertical-align: bottom;" width="778" /&gt;&lt;/span&gt;&lt;/figure&gt;&lt;figure class="wp-block-image size-full" style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; margin: 0px 0px 1em; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;img alt="" class="wp-image-3565" decoding="async" height="315" sizes="(max-width: 781px) 100vw, 781px" src="https://bie.telkomuniversity.ac.id/wp-content/uploads/2024/10/Screenshot-2024-10-02-124025.png" srcset="https://bie.telkomuniversity.ac.id/wp-content/uploads/2024/10/Screenshot-2024-10-02-124025.png 781w, https://bie.telkomuniversity.ac.id/wp-content/uploads/2024/10/Screenshot-2024-10-02-124025-300x121.png 300w, https://bie.telkomuniversity.ac.id/wp-content/uploads/2024/10/Screenshot-2024-10-02-124025-768x310.png 768w" style="border: 0px; box-sizing: border-box; height: auto; max-width: 100%; vertical-align: bottom;" width="781" /&gt;&lt;/span&gt;&lt;/figure&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;Kode HTML di atas akan membuat halaman dengan judul “Halaman Pertamaku” dan sebuah paragraf. Sedangkan kode CSS akan membuat latar belakang halaman berwarna biru muda dan judul berwarna putih serta berada di tengah halaman.&lt;/span&gt;&lt;/p&gt;&lt;h3 class="wp-block-heading" style="background-color: white; box-sizing: inherit; clear: both; color: #222222; font-family: Roboto, sans-serif; font-weight: 500; line-height: 26px; margin: 0px 0px 15px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Tips Belajar Efektif:&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;ul class="wp-block-list" style="background-color: white; box-sizing: border-box; color: #444444; font-family: Roboto, sans-serif; list-style: disc; margin: 0px 0px 1em 1em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Belajar secara bertahap:&lt;/span&gt;&amp;nbsp;Mulai dari yang paling dasar dan jangan terburu-buru.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Banyak berlatih:&lt;/span&gt;&amp;nbsp;Praktik membuat proyek kecil adalah cara terbaik untuk mengasah kemampuanmu.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Cari referensi:&lt;/span&gt;&amp;nbsp;Ada banyak tutorial, kursus, dan komunitas online yang bisa kamu manfaatkan.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Jangan takut mencoba:&lt;/span&gt;&amp;nbsp;Eksperimen dengan kode yang berbeda dan lihat hasilnya.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Ingin Belajar Lebih Lanjut?&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ul class="wp-block-list" style="background-color: white; box-sizing: border-box; color: #444444; font-family: Roboto, sans-serif; list-style: disc; margin: 0px 0px 1em 1em; padding-left: 20px;"&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Framework CSS:&lt;/span&gt;&amp;nbsp;Pelajari framework seperti Bootstrap untuk mempercepat pengembangan website.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;Preprocessor CSS:&lt;/span&gt;&amp;nbsp;Gunakan preprocessor seperti Sass atau Less untuk membuat CSS yang lebih modular dan efisien.&lt;/span&gt;&lt;/li&gt;&lt;li style="box-sizing: inherit; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;JavaScript:&lt;/span&gt;&amp;nbsp;Tambahkan interaktivitas pada halaman webmu dengan JavaScript.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="box-sizing: inherit; font-weight: 700;"&gt;&lt;span style="font-size: medium;"&gt;Kesimpulan&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;&lt;span style="font-size: medium;"&gt;HTML dan CSS adalah bahasa pemrograman yang sangat penting untuk membangun website dan juga fondasi yang kuat untuk membangun website. Dengan pemahaman yang baik tentang kedua bahasa ini, kamu akan mampu menciptakan halaman web yang menarik, informatif, dan fungsional. Dengan pemahaman yang baik tentang kedua bahasa ini, kamu akan mampu menciptakan halaman web yang menarik dan informatif.&lt;/span&gt;&lt;/p&gt;&lt;h2 data-end="5051" data-section-id="nxz1it" data-start="5005"&gt;&lt;span role="text"&gt;&lt;strong data-end="5051" data-start="5011"&gt;Judul Tugas: Membuat Web Profil Diri&lt;/strong&gt;&lt;/span&gt;&lt;/h2&gt;&lt;h3 data-end="5074" data-section-id="ib1gzf" data-start="5053"&gt;&lt;span role="text"&gt;&lt;strong data-end="5074" data-start="5060"&gt;Instruksi:&lt;/strong&gt;&lt;/span&gt;&lt;/h3&gt;&lt;p data-end="5154" data-start="5075"&gt;Buatlah sebuah halaman web sederhana menggunakan HTML dan CSS dengan ketentuan:&lt;/p&gt;&lt;h3 data-end="5177" data-section-id="m1xbng" data-start="5156"&gt;&lt;span role="text"&gt;&#128313; &lt;strong data-end="5177" data-start="5163"&gt;Isi Wajib:&lt;/strong&gt;&lt;/span&gt;&lt;/h3&gt;&lt;ul data-end="5286" data-start="5178"&gt;
&lt;li data-end="5194" data-section-id="282eoh" data-start="5178"&gt;
Nama lengkap
&lt;/li&gt;
&lt;li data-end="5226" data-section-id="1x2fqf3" data-start="5195"&gt;
Foto diri (boleh ilustrasi)
&lt;/li&gt;
&lt;li data-end="5245" data-section-id="1dagl7a" data-start="5227"&gt;
Deskripsi diri
&lt;/li&gt;
&lt;li data-end="5254" data-section-id="1mvryro" data-start="5246"&gt;
Hobi
&lt;/li&gt;
&lt;li data-end="5286" data-section-id="1uxench" data-start="5255"&gt;
Kontak (media sosial/email)
&lt;/li&gt;
&lt;/ul&gt;&lt;h3 data-end="5316" data-section-id="jijk3t" data-start="5288"&gt;&lt;span role="text"&gt;&#128313; &lt;strong data-end="5316" data-start="5295"&gt;Ketentuan Teknis:&lt;/strong&gt;&lt;/span&gt;&lt;/h3&gt;&lt;p style="background-color: white; box-sizing: inherit; color: #444444; font-family: Roboto, sans-serif; line-height: 26px; margin: 0px 0px 20px; text-align: justify;"&gt;





&lt;/p&gt;&lt;ul data-end="5488" data-start="5317"&gt;
&lt;li data-end="5359" data-section-id="m2p8xq" data-start="5317"&gt;
Menggunakan minimal 5 tag HTML berbeda
&lt;/li&gt;
&lt;li data-end="5434" data-section-id="17aeyyb" data-start="5360"&gt;
Menggunakan CSS untuk:
&lt;ul data-end="5434" data-start="5387"&gt;
&lt;li data-end="5396" data-section-id="7w1ayr" data-start="5387"&gt;
Warna
&lt;/li&gt;
&lt;li data-end="5407" data-section-id="1xwuw0r" data-start="5399"&gt;
Font
&lt;/li&gt;
&lt;li data-end="5434" data-section-id="n4hizg" data-start="5410"&gt;
Tata letak sederhana
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li data-end="5488" data-section-id="c4eoso" data-start="5435"&gt;
File terdiri dari:
&lt;/li&gt;&lt;ul data-end="5488" data-start="5458"&gt;
&lt;li data-end="5472" data-section-id="1ddbzt1" data-start="5458"&gt;
&lt;code data-end="5472" data-start="5460"&gt;index.html&lt;/code&gt;
&lt;/li&gt;
&lt;li data-end="5488" data-section-id="ip1euq" data-start="5475"&gt;
&lt;code data-end="5488" data-start="5477"&gt;style.css&lt;/code&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&lt;div&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px;"&gt;LAMPIRAN: Contoh Kode Lengkap (html dan css eksternal)&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;File&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; font-weight: 400; line-height: 22px; padding: 0px 5px;"&gt;index.html&lt;/code&gt;&lt;/span&gt;&lt;/p&gt;&lt;div class="md-code-block md-code-block-light" style="--ds-md-code-banner-background-color: #f9fafb; --ds-md-code-block-border-radius: 12px; --ds-md-code-block-font-size: calc(1.143*11px); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-radius: 12px; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 11.43px; position: relative;"&gt;&lt;div class="md-code-block-banner-wrap" style="background-color: white; position: sticky; top: 0px; z-index: 6;"&gt;&lt;div class="md-code-block-banner md-code-block-banner-lite" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-top-left-radius: 12px; border-top-right-radius: 12px; display: flex; font-size: 12.573px; justify-content: space-between; line-height: 12.573px; padding: 0px;"&gt;&lt;div class="_121d384" style="align-items: center; display: flex; justify-content: space-between; padding: 6px; width: 740.052px;"&gt;&lt;div class="d2a24f03" style="flex-shrink: 0;"&gt;&lt;span class="d813de27" face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="font-size: 12px; line-height: 18px; margin-left: 8px;"&gt;html&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;pre style="font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 22px; margin: 0px; overflow: auto; padding: 16px; white-space: pre-wrap; word-break: break-all;"&gt;&lt;span class="token doctype" style="color: #383a42;"&gt;&lt;span class="token punctuation"&gt;&amp;lt;!&lt;/span&gt;&lt;span class="token doctype-tag"&gt;DOCTYPE&lt;/span&gt; &lt;span class="token name"&gt;html&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;lang&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;id&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;charset&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;UTF-8&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;name&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;viewport&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;content&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;width=device-width, initial-scale=1.0&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;title&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Profil Diri - Andi Wijaya&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;title&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;rel&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;stylesheet&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;href&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;style.css&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;href&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&amp;amp;display=swap&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;rel&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;stylesheet&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;class&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;card&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;class&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;foto&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
            &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;src&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;https://randomuser.me/api/portraits/men/32.jpg&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;alt&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;Foto Andi&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;class&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;info&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
            &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Andi Wijaya&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
            &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;class&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;tagline&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Web Developer &amp;amp; Content Creator&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
            &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Saya suka membangun website yang berguna dan berbagi ilmu pemrograman. Saat ini fokus belajar front-end dan UI design.&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
            &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;class&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;skill&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
                &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;HTML5&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
                &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;CSS3&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
                &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;JavaScript&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
                &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;React&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
            &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
            &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;class&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;social&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
                &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;href&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;#&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Twitter&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
                &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;href&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;#&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;GitHub&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
                &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class="token attr-name" style="color: #b76b01;"&gt;href&lt;/span&gt;&lt;span class="token attr-value" style="color: #50a14f;"&gt;&lt;span class="token punctuation attr-equals" style="color: #383a42;"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;#&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;LinkedIn&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
            &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag" style="color: #e45649;"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/pre&gt;&lt;svg class="_9bc997d _33882ae" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;svg class="_9bc997d _28d7e84" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;File&amp;nbsp;&lt;code style="align-items: center; background-color: #ebeef2; border-radius: 6px; box-sizing: border-box; display: inline-flex; font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 0.875em; font-stretch: 100%; font-variant: normal; font-variation-settings: normal; font-weight: 400; line-height: 22px; padding: 0px 5px;"&gt;style.css&lt;/code&gt;&lt;/span&gt;&lt;/p&gt;&lt;div class="md-code-block md-code-block-light" style="--ds-md-code-banner-background-color: #f9fafb; --ds-md-code-block-border-radius: 12px; --ds-md-code-block-font-size: calc(1.143*11px); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-radius: 12px; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 11.43px; position: relative;"&gt;&lt;div class="md-code-block-banner-wrap" style="background-color: white; position: sticky; top: 0px; z-index: 6;"&gt;&lt;div class="md-code-block-banner md-code-block-banner-lite" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 250, 251); border-top-left-radius: 12px; border-top-right-radius: 12px; display: flex; font-size: 12.573px; justify-content: space-between; line-height: 12.573px; padding: 0px;"&gt;&lt;div class="_121d384" style="align-items: center; display: flex; justify-content: space-between; padding: 6px; width: 740.052px;"&gt;&lt;div class="d2a24f03" style="flex-shrink: 0;"&gt;&lt;span class="d813de27" face="Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui" style="font-size: 12px; line-height: 18px; margin-left: 8px;"&gt;css&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;pre style="font-family: Menlo, Monaco, Consolas, &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Ubuntu Mono&amp;quot;, &amp;quot;DejaVu Sans Mono&amp;quot;, &amp;quot;Liberation Mono&amp;quot;, &amp;quot;JetBrains Mono&amp;quot;, &amp;quot;Fira Code&amp;quot;, Cousine, &amp;quot;Roboto Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, sans-serif, system-ui; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 13px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 22px; margin: 0px; overflow: auto; padding: 16px; white-space: pre-wrap; word-break: break-all;"&gt;&lt;span class="token selector" style="color: #50a14f;"&gt;*&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;margin&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 0&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;padding&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 0&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;box-sizing&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; border-box&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;body&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;background&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; #0f172a&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;font-family&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #50a14f;"&gt;'Poppins'&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;,&lt;/span&gt; sans-serif&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;display&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; flex&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;justify-content&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; center&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;align-items&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; center&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;min-height&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 100vh&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;.card&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;max-width&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 900px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;background&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; white&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;border-radius&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 32px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;display&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; flex&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;flex-wrap&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; wrap&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;overflow&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; hidden&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;box-shadow&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 0 25px 45px &lt;span class="token function" style="color: #4078f2;"&gt;rgba&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;(&lt;/span&gt;0&lt;span class="token punctuation" style="color: #383a42;"&gt;,&lt;/span&gt;0&lt;span class="token punctuation" style="color: #383a42;"&gt;,&lt;/span&gt;0&lt;span class="token punctuation" style="color: #383a42;"&gt;,&lt;/span&gt;0.2&lt;span class="token punctuation" style="color: #383a42;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;.foto&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;flex&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 1&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;background&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; #3b82f6&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;display&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; flex&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;justify-content&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; center&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;align-items&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; center&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;padding&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 40px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;.foto img&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;width&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 200px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;height&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 200px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;border-radius&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 50%&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;border&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 5px solid white&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;object-fit&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; cover&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;.info&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;flex&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 2&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;padding&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 40px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;h1&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;font-size&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 2.2rem&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;font-weight&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 700&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;margin-bottom&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 5px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;.tagline&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;color&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; #3b82f6&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;font-weight&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 500&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;margin-bottom&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 20px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;border-left&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 4px solid #3b82f6&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;padding-left&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 12px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;.skill&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;display&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; flex&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;flex-wrap&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; wrap&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;gap&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 10px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;margin&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 25px 0&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;.skill span&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;background&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; #e2e8f0&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;padding&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 5px 15px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;border-radius&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 30px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;font-size&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 0.85rem&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;font-weight&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 500&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;.social a&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;display&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; inline-block&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;margin-right&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 12px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;text-decoration&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; none&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;background&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; #0f172a&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;color&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; white&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;padding&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 8px 18px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;border-radius&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 40px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;font-size&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 0.85rem&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;transition&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 0.2s&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token selector" style="color: #50a14f;"&gt;.social a:hover&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;background&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; #3b82f6&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token property" style="color: #e45649;"&gt;transform&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; &lt;span class="token function" style="color: #4078f2;"&gt;translateY&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;(&lt;/span&gt;-2px&lt;span class="token punctuation" style="color: #383a42;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;

&lt;span class="token atrule" style="color: #b76b01;"&gt;&lt;span class="token rule"&gt;@media&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;(&lt;/span&gt;&lt;span class="token property" style="color: #e45649;"&gt;max-width&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 700px&lt;span class="token punctuation" style="color: #383a42;"&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
    &lt;span class="token selector" style="color: #50a14f;"&gt;.card&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
        &lt;span class="token property" style="color: #e45649;"&gt;flex-direction&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; column&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
        &lt;span class="token property" style="color: #e45649;"&gt;text-align&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; center&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
        &lt;span class="token property" style="color: #e45649;"&gt;margin&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 20px&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;
    &lt;span class="token selector" style="color: #50a14f;"&gt;.tagline&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
        &lt;span class="token property" style="color: #e45649;"&gt;border-left&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; none&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
        &lt;span class="token property" style="color: #e45649;"&gt;padding-left&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; 0&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;
    &lt;span class="token selector" style="color: #50a14f;"&gt;.skill&lt;/span&gt; &lt;span class="token punctuation" style="color: #383a42;"&gt;{&lt;/span&gt;
        &lt;span class="token property" style="color: #e45649;"&gt;justify-content&lt;/span&gt;&lt;span class="token punctuation" style="color: #383a42;"&gt;:&lt;/span&gt; center&lt;span class="token punctuation" style="color: #383a42;"&gt;;&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;/span&gt;
&lt;span class="token punctuation" style="color: #383a42;"&gt;}&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;/pre&gt;&lt;svg class="_9bc997d _33882ae" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;svg class="_9bc997d _28d7e84" fill="none" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"&gt;&lt;path d="M-5.24537e-07 0C-2.34843e-07 6.62742 5.37258 12 12 12L0 12L-5.24537e-07 0Z" fill="currentColor"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</description><link>http://kitab-investasi.blogspot.com/2026/04/pengembangan-web-dasar-html-css-untuk.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-9077136128577727237</guid><pubDate>Tue, 14 Apr 2026 05:40:00 +0000</pubDate><atom:updated>2026-04-14T12:40:08.217+07:00</atom:updated><title>Mengembangkan Pertunjukan Drama</title><description>&lt;h3 style="text-align: left;"&gt;&amp;nbsp; A. PENGANTAR: APA ITU DRAMA?&lt;/h3&gt;&lt;p data-end="831" data-start="673"&gt;Drama adalah bentuk karya seni yang menampilkan cerita melalui &lt;strong data-end="767" data-start="736"&gt;dialog, gerak, dan ekspresi&lt;/strong&gt; yang diperankan oleh tokoh di atas panggung atau media lainnya.&lt;/p&gt;&lt;h3 data-end="855" data-section-id="1xxcef6" data-start="833"&gt;Ciri-ciri Drama:&lt;/h3&gt;&lt;p&gt;

&lt;/p&gt;&lt;ul data-end="995" data-start="856"&gt;
&lt;li data-end="882" data-section-id="ym6re3" data-start="856"&gt;
Ada &lt;strong data-end="882" data-start="862"&gt;tokoh (karakter)&lt;/strong&gt;
&lt;/li&gt;
&lt;li data-end="911" data-section-id="srmve0" data-start="883"&gt;
Ada &lt;strong data-end="911" data-start="889"&gt;alur cerita (plot)&lt;/strong&gt;
&lt;/li&gt;
&lt;li data-end="936" data-section-id="1d6jneg" data-start="912"&gt;
Menggunakan &lt;strong data-end="936" data-start="926"&gt;dialog&lt;/strong&gt;
&lt;/li&gt;
&lt;li data-end="961" data-section-id="1tmx3vg" data-start="937"&gt;
Mengandung &lt;strong data-end="961" data-start="950"&gt;konflik&lt;/strong&gt;
&lt;/li&gt;
&lt;li data-end="995" data-section-id="zka90g" data-start="962"&gt;
Dipentaskan di depan penonton&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-style: normal; font-variant: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px;"&gt;Pengertian Elaborasi dalam Pertunjukan Drama&amp;nbsp;&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Elaborasi&lt;/span&gt;&amp;nbsp;adalah proses mengembangkan, memperkaya, atau memperluas ide dasar menjadi lebih kompleks dan detail. Dalam drama, elaborasi berarti:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;Mengembangkan karakter tokoh (latar belakang, motivasi, cara bicara, gestur).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;Mengembangkan plot dari sinopsis menjadi adegan demi adegan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;Mengembangkan elemen pendukung (properti, kostum, tata panggung) agar sesuai suasana cerita.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Contoh Elaborasi Sederhana:&lt;/span&gt;&lt;/p&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important;"&gt;Naskah hanya menulis:&amp;nbsp;&lt;em&gt;"Ayah marah kepada anaknya."&lt;/em&gt;&lt;br /&gt;Hasil elaborasi:&amp;nbsp;&lt;em&gt;"Ayah (berbadan tegap, suara berat) memasuki ruang tamu pukul 23.00, melempar tas kerja ke sofa, menunjuk wajah anak dengan tangan gemetar, lalu berteriak dengan suara parau karena baru pulang kerja lembur."&lt;/em&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; font-weight: 600;"&gt;Kunci elaborasi di sini:&lt;/span&gt;&lt;span style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px;"&gt;&amp;nbsp;Sutradara dan tim harus membayangkan setiap detik di atas panggung. Misalnya: "Di menit ke-5, lampu merah menyala, suara hujan dari tape, aktor A bergerak dari kiri ke tengah sambil membawa payung."&lt;/span&gt;&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;B. UNSUR-UNSUR PERTUNJUKAN DRAMA&lt;/h3&gt;&lt;div&gt;&lt;h2 data-end="1104" data-section-id="sbp45e" data-start="1083"&gt;1. Unsur Intrinsik&lt;/h2&gt;
&lt;ul data-end="1302" data-start="1105"&gt;
&lt;li data-end="1136" data-section-id="17l6g53" data-start="1105"&gt;
&lt;strong data-end="1115" data-start="1107"&gt;Tema&lt;/strong&gt; → ide pokok cerita
&lt;/li&gt;
&lt;li data-end="1186" data-section-id="ozip4p" data-start="1137"&gt;
&lt;strong data-end="1160" data-start="1139"&gt;Tokoh &amp;amp; Penokohan&lt;/strong&gt; → karakter dan sifatnya
&lt;/li&gt;
&lt;li data-end="1234" data-section-id="gdrj36" data-start="1187"&gt;
&lt;strong data-end="1197" data-start="1189"&gt;Alur&lt;/strong&gt; → jalan cerita (awal–tengah–akhir)
&lt;/li&gt;
&lt;li data-end="1273" data-section-id="1xfte8f" data-start="1235"&gt;
&lt;strong data-end="1246" data-start="1237"&gt;Latar&lt;/strong&gt; → tempat, waktu, suasana
&lt;/li&gt;
&lt;li data-end="1302" data-section-id="17qszx4" data-start="1274"&gt;
&lt;strong data-end="1286" data-start="1276"&gt;Amanat&lt;/strong&gt; → pesan moral
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-end="1326" data-section-id="1tsrg4b" data-start="1304"&gt;2. Unsur Ekstrinsik&lt;/h2&gt;
&lt;ul data-end="1495" data-start="1327"&gt;
&lt;li data-end="1356" data-section-id="vgqi19" data-start="1327"&gt;
&lt;strong data-end="1354" data-start="1329"&gt;Pemain (aktor/aktris)&lt;/strong&gt;
&lt;/li&gt;
&lt;li data-end="1397" data-section-id="xc97rs" data-start="1357"&gt;
&lt;strong data-end="1372" data-start="1359"&gt;Sutradara&lt;/strong&gt; → pengarah pertunjukan
&lt;/li&gt;
&lt;li data-end="1440" data-section-id="cfyejy" data-start="1398"&gt;
&lt;strong data-end="1417" data-start="1400"&gt;Tata panggung&lt;/strong&gt; → dekorasi, properti
&lt;/li&gt;
&lt;li data-end="1467" data-section-id="13tnyrg" data-start="1441"&gt;
&lt;strong data-end="1465" data-start="1443"&gt;Tata kostum &amp;amp; rias&lt;/strong&gt;
&lt;/li&gt;
&lt;li data-end="1495" data-section-id="ilm05l" data-start="1468"&gt;
&lt;strong data-end="1493" data-start="1470"&gt;Tata cahaya &amp;amp; suara&lt;/strong&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 style="text-align: left;"&gt;C. TAHAP MENYIAPKAN PERTUNJUKAN DRAMA&lt;/h3&gt;&lt;/div&gt;&lt;div&gt;&lt;h2 data-end="1607" data-section-id="79uoc9" data-start="1589"&gt;1. Pra-Produksi&lt;/h2&gt;
&lt;ul data-end="1747" data-start="1608"&gt;
&lt;li data-end="1636" data-section-id="vwlg5" data-start="1608"&gt;
Menentukan &lt;strong data-end="1636" data-start="1621"&gt;tema cerita&lt;/strong&gt;
&lt;/li&gt;
&lt;li data-end="1677" data-section-id="vwaze7" data-start="1637"&gt;
Menyusun atau memilih &lt;strong data-end="1677" data-start="1661"&gt;naskah drama&lt;/strong&gt;
&lt;/li&gt;
&lt;li data-end="1704" data-section-id="158fi6u" data-start="1678"&gt;
Membagi &lt;strong data-end="1704" data-start="1688"&gt;peran pemain&lt;/strong&gt;
&lt;/li&gt;
&lt;li data-end="1747" data-section-id="2xhoij" data-start="1705"&gt;
Membentuk tim (sutradara, properti, dll)
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-end="1763" data-section-id="c4skok" data-start="1749"&gt;2. Produksi&lt;/h2&gt;
&lt;ul data-end="1900" data-start="1764"&gt;
&lt;li data-end="1790" data-section-id="91cehw" data-start="1764"&gt;
Latihan dialog (reading)
&lt;/li&gt;
&lt;li data-end="1817" data-section-id="nm5v8t" data-start="1791"&gt;
Latihan gerak (blocking)
&lt;/li&gt;
&lt;li data-end="1840" data-section-id="1wq0u4v" data-start="1818"&gt;
Penghayatan karakter
&lt;/li&gt;
&lt;li data-end="1869" data-section-id="1w5b5rw" data-start="1841"&gt;
Gladi kotor → latihan awal
&lt;/li&gt;
&lt;li data-end="1900" data-section-id="lktybl" data-start="1870"&gt;
Gladi bersih → latihan final
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-end="1922" data-section-id="6xxc7s" data-start="1902"&gt;3. Pasca-Produksi&lt;/h2&gt;
&lt;ul data-end="2003" data-start="1923"&gt;
&lt;li data-end="1945" data-section-id="1irevu3" data-start="1923"&gt;
Evaluasi pertunjukan
&lt;/li&gt;
&lt;li data-end="1968" data-section-id="qoy8lq" data-start="1946"&gt;
Dokumentasi kegiatan
&lt;/li&gt;
&lt;li data-end="2003" data-section-id="h35o77" data-start="1969"&gt;
Publikasi hasil (poster/pamflet)&lt;/li&gt;&lt;/ul&gt;&lt;h3 style="text-align: left;"&gt;D. MEMBUAT PAMFLET PERTUNJUKAN DRAMA&lt;/h3&gt;&lt;/div&gt;&lt;div&gt;&lt;p data-end="2186" data-start="2095"&gt;Pamflet adalah media informasi yang digunakan untuk &lt;strong data-end="2171" data-start="2147"&gt;mengumumkan kegiatan&lt;/strong&gt; kepada publik.&lt;/p&gt;
&lt;h2 data-end="2216" data-section-id="1d6ax22" data-start="2188"&gt;Unsur Penting Pamflet:&lt;/h2&gt;
&lt;ul data-end="2407" data-start="2217"&gt;
&lt;li data-end="2250" data-section-id="flcrl9" data-start="2217"&gt;
Judul acara (menarik &amp;amp; besar)
&lt;/li&gt;
&lt;li data-end="2277" data-section-id="v4z1b7" data-start="2251"&gt;
Nama pertunjukan drama
&lt;/li&gt;
&lt;li data-end="2296" data-section-id="w923u3" data-start="2278"&gt;
Waktu &amp;amp; tempat
&lt;/li&gt;
&lt;li data-end="2319" data-section-id="uap3o9" data-start="2297"&gt;
Nama penyelenggara
&lt;/li&gt;
&lt;li data-end="2348" data-section-id="nel2je" data-start="2320"&gt;
Daftar pemain (opsional)
&lt;/li&gt;
&lt;li data-end="2377" data-section-id="17r6cno" data-start="2349"&gt;
Ilustrasi/gambar menarik
&lt;/li&gt;
&lt;li data-end="2407" data-section-id="87jkyt" data-start="2378"&gt;
Kontak/informasi tambahan
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-end="2427" data-section-id="1ocrzra" data-start="2409"&gt;Tips Desain:&lt;/h2&gt;
&lt;ul data-end="2539" data-start="2428"&gt;
&lt;li data-end="2453" data-section-id="3483ok" data-start="2428"&gt;
Gunakan warna kontras
&lt;/li&gt;
&lt;li data-end="2479" data-section-id="1qzagq7" data-start="2454"&gt;
Pilih font yang jelas
&lt;/li&gt;
&lt;li data-end="2508" data-section-id="cnyluq" data-start="2480"&gt;
Tambahkan gambar relevan
&lt;/li&gt;
&lt;li data-end="2539" data-section-id="1s8877p" data-start="2509"&gt;
Jangan terlalu banyak teks&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;h3 style="text-align: left;"&gt;E. LANGKAH PRAKTIK DI KELAS&lt;/h3&gt;
&lt;h2 data-end="2605" data-section-id="1t1ip31" data-start="2580"&gt;&amp;nbsp;Aktivitas Kelompok:&lt;/h2&gt;
&lt;p data-end="2647" data-start="2606"&gt;Siswa dibagi menjadi kelompok (4–6 orang)&lt;/p&gt;
&lt;h3 data-end="2669" data-section-id="bu5e4y" data-start="2649"&gt;Setiap kelompok:&lt;/h3&gt;
&lt;ol data-end="2821" data-start="2670"&gt;
&lt;li data-end="2706" data-section-id="1i5yl19" data-start="2670"&gt;
Menentukan judul dan tema drama
&lt;/li&gt;
&lt;li data-end="2748" data-section-id="1evyfg" data-start="2707"&gt;
Membuat naskah sederhana (3–5 menit)
&lt;/li&gt;
&lt;li data-end="2767" data-section-id="10tvvfc" data-start="2749"&gt;
Membagi peran
&lt;/li&gt;
&lt;li data-end="2788" data-section-id="waowh1" data-start="2768"&gt;
Latihan singkat
&lt;/li&gt;
&lt;li data-end="2821" data-section-id="1gi39m5" data-start="2789"&gt;
Membuat pamflet pertunjukan&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;h3 style="text-align: left;"&gt;PENUTUP (REFLEKSI)&lt;/h3&gt;
&lt;ul data-end="3231" data-start="3130"&gt;&lt;li data-end="3167" data-section-id="f7mxp6" data-start="3130"&gt;Apa kesulitan saat latihan drama?
&lt;/li&gt;
&lt;li data-end="3201" data-section-id="wxppar" data-start="3168"&gt;
Apa yang paling menyenangkan?
&lt;/li&gt;
&lt;li data-end="3231" data-section-id="1tvght" data-start="3202"&gt;
Bagaimana kerja sama tim?
&lt;/li&gt;
&lt;/ul&gt;
&lt;hr data-end="3236" data-start="3233" /&gt;
&lt;h3 style="text-align: left;"&gt;KESIMPULAN&lt;/h3&gt;
&lt;p data-end="3324" data-start="3255"&gt;Pertunjukan drama bukan hanya tentang akting, tetapi juga melibatkan:&lt;/p&gt;
&lt;ul data-end="3415" data-start="3325"&gt;
&lt;li data-end="3352" data-section-id="1f9r3lz" data-start="3325"&gt;
Perencanaan yang matang
&lt;/li&gt;
&lt;li data-end="3371" data-section-id="1bye1gx" data-start="3353"&gt;
Kerja sama tim
&lt;/li&gt;
&lt;li data-end="3415" data-section-id="1hsar6t" data-start="3372"&gt;
Kreativitas dalam penyajian dan promosi&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</description><link>http://kitab-investasi.blogspot.com/2026/04/mengembangkan-pertunjukan-drama.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-2828360039141075566</guid><pubDate>Mon, 13 Apr 2026 05:33:00 +0000</pubDate><atom:updated>2026-04-13T15:19:25.033+07:00</atom:updated><title>sertifikat kombel</title><description>&lt;!DOCTYPE html&gt;
&lt;html lang="id"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"&gt;
&lt;title&gt;Generator Sertifikat - Kombel&lt;/title&gt;

&lt;!-- Google Font Montserrat --&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&amp;display=swap" rel="stylesheet"&gt;
&lt;!-- jsPDF dari CDN resmi --&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"&gt;&lt;/script&gt;

&lt;style&gt;
* {
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    max-width: 700px;
    margin: 20px auto;
    padding: 16px;
    background: #eef2f7;
}
.card {
    background: white;
    padding: 24px 20px;
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}
h2 {
    text-align: center;
    margin: 0 0 20px 0;
    color: #1e4668;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.confirm-box {
    background: linear-gradient(135deg, #f0f6ff, #e9f0fa);
    border-left: 5px solid #2c7da0;
    padding: 16px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 24px;
}
.confirm-box p {
    margin: 0 0 12px 0;
    font-weight: 600;
    font-size: 1.1rem;
}
.confirm-btn {
    margin: 0 6px;
    padding: 10px 24px;
    border: none;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.9rem;
}
.yes { background: #1f8a4c; color: white; }
.yes:hover { background: #2ecc71; transform: scale(1.02); }
.no { background: #b03a2e; color: white; }
.no:hover { background: #e74c3c; transform: scale(1.02); }
#confirmMessage {
    margin-top: 12px;
    min-height: 40px;
}
.warning {
    color: #c0392b;
    background: #fee9e7;
    padding: 6px 14px;
    border-radius: 50px;
    display: inline-block;
    font-weight: bold;
}
.success {
    color: #1f8a4c;
    background: #e0f2e9;
    padding: 6px 14px;
    border-radius: 50px;
    display: inline-block;
    font-weight: bold;
}
.instruction-box {
    background: #fef7e0;
    border-left: 5px solid #f4b942;
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}
.instruction-box h3 {
    margin: 0 0 8px 0;
    color: #b85c00;
    display: flex;
    align-items: center;
    gap: 8px;
}
.instruction-box ol {
    margin: 8px 0 0 18px;
    padding-left: 0;
}
.instruction-box li {
    margin-bottom: 6px;
    line-height: 1.4;
}
label {
    display: block;
    margin-top: 18px;
    font-weight: 600;
    color: #1e4668;
}
input, select {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    font-size: 1rem;
    transition: 0.2s;
    background: white;
}
input:focus, select:focus {
    border-color: #2c7da0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(44,125,160,0.2);
}
button {
    font-weight: bold;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    transition: 0.2s;
}
.generate-btn {
    width: 100%;
    margin-top: 28px;
    background: #2c7da0;
    color: white;
    padding: 14px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.generate-btn:hover:not(:disabled) {
    background: #1f5e7a;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(44,125,160,0.3);
}
.generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #94a3b8;
}
input:disabled, select:disabled {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden;
    backdrop-filter: blur(3px);
}
.spinner {
    background: white;
    padding: 24px 32px;
    border-radius: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-weight: bold;
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
}
.spinner::before {
    content: "";
    width: 40px;
    height: 40px;
    border: 5px solid #e2e8f0;
    border-top-color: #2c7da0;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="card"&gt;
    &lt;h2&gt;&#128220; Generator Sertifikat Kombel&lt;/h2&gt;

    &lt;!-- Konfirmasi partisipasi --&gt;
    &lt;div class="confirm-box"&gt;
        &lt;p&gt;&#128269; Konfirmasi keikutsertaan&lt;/p&gt;
        &lt;button class="confirm-btn yes" id="confirmYesBtn"&gt;YA, saya ikut&lt;/button&gt;
        &lt;button class="confirm-btn no" id="confirmNoBtn"&gt;TIDAK, saya tidak ikut&lt;/button&gt;
        &lt;div id="confirmMessage"&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Petunjuk --&gt;
    &lt;div class="instruction-box"&gt;
        &lt;h3&gt;&#128204; Cara unduh sertifikat&lt;/h3&gt;
        &lt;ol&gt;
            &lt;li&gt;Konfirmasi "YA, saya ikut"&lt;/li&gt;
            &lt;li&gt;Upload template sertifikat (PNG/JPG)&lt;/li&gt;
            &lt;li&gt;Isi nama lengkap dan pilih peran&lt;/li&gt;
            &lt;li&gt;Klik "UNDUH PDF" — tunggu sebentar&lt;/li&gt;
            &lt;li&gt;File PDF akan otomatis tersimpan&lt;/li&gt;
        &lt;/ol&gt;
        &lt;p style="margin-top:10px; font-size:13px; color:#666;"&gt;✅ Pastikan template gambar memiliki resolusi tinggi (minimal 1500x1000px) agar teks rapi.&lt;/p&gt;
    &lt;/div&gt;

    &lt;!-- Form utama --&gt;
    &lt;div id="formContainer"&gt;
        &lt;label&gt;&#128248; Upload Template PNG / JPG&lt;/label&gt;
        &lt;input type="file" id="template" accept="image/png, image/jpeg, image/jpg" disabled&gt;

        &lt;label&gt;✍️ Nama Lengkap&lt;/label&gt;
        &lt;input type="text" id="nama" placeholder="Contoh: Ahmad Fauzi" disabled&gt;

        &lt;label&gt;&#127917; Peran&lt;/label&gt;
        &lt;select id="peran" disabled&gt;
            &lt;option value="peserta"&gt;Peserta&lt;/option&gt;
            &lt;option value="narasumber"&gt;Narasumber&lt;/option&gt;
        &lt;/select&gt;

        &lt;button class="generate-btn" id="generateBtn" disabled&gt;⬇️ UNDUH PDF&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Loading spinner --&gt;
&lt;div id="loadingOverlay" class="loading-overlay"&gt;
    &lt;div class="spinner"&gt;Memproses sertifikat...&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
// ======================== ELEMEN ========================
const templateInput = document.getElementById('template');
const namaInput = document.getElementById('nama');
const peranSelect = document.getElementById('peran');
const generateBtn = document.getElementById('generateBtn');
const confirmMessageDiv = document.getElementById('confirmMessage');
const loadingOverlay = document.getElementById('loadingOverlay');
const confirmYesBtn = document.getElementById('confirmYesBtn');
const confirmNoBtn = document.getElementById('confirmNoBtn');

// ======================== FUNGSI UTILITY ========================
function setFormDisabled(disabled) {
    templateInput.disabled = disabled;
    namaInput.disabled = disabled;
    peranSelect.disabled = disabled;
    generateBtn.disabled = disabled;
    if (disabled) {
        generateBtn.style.opacity = '0.6';
    } else {
        generateBtn.style.opacity = '1';
    }
}

function showLoading(show) {
    loadingOverlay.style.visibility = show ? 'visible' : 'hidden';
}

// Konversi bulan ke Romawi
function getRomanMonth(monthIndex) {
    const romawi = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"];
    return romawi[monthIndex];
}

// Kapitalisasi setiap kata
function capitalizeEachWord(text) {
    return text.toLowerCase().replace(/\b\w/g, c =&gt; c.toUpperCase());
}

// ======================== NOMOR SERTIFIKAT (Google Sheets + Fallback) ========================
const GAS_URL = 'https://script.google.com/macros/s/AKfycbw0A_4D_7SMOd6kkRd80eCBET5FgdASkTJHXwMu4-kwNA56Iel_yCMJ-E6Zy29EHsSCvA/exec'; // GANTI DENGAN URL ASLI ANDA

// Fungsi JSONP dengan timeout 5 detik
function jsonpRequestWithTimeout(url, timeoutMs = 5000) {
    return new Promise((resolve, reject) =&gt; {
        const callbackName = 'jsonp_cb_' + Date.now() + '_' + Math.random().toString(36).substr(2, 8);
        const timeoutId = setTimeout(() =&gt; {
            if (window[callbackName]) {
                delete window[callbackName];
            }
            if (script &amp;&amp; script.parentNode) script.parentNode.removeChild(script);
            reject(new Error('Timeout JSONP'));
        }, timeoutMs);

        window[callbackName] = (data) =&gt; {
            clearTimeout(timeoutId);
            delete window[callbackName];
            if (script &amp;&amp; script.parentNode) script.parentNode.removeChild(script);
            resolve(data);
        };

        const script = document.createElement('script');
        const separator = url.includes('?') ? '&amp;' : '?';
        script.src = `${url}${separator}callback=${callbackName}&amp;action=increment`;
        script.onerror = (err) =&gt; {
            clearTimeout(timeoutId);
            delete window[callbackName];
            if (script.parentNode) script.parentNode.removeChild(script);
            reject(new Error('Script load error'));
        };
        document.body.appendChild(script);
    });
}

async function getNextNomor() {
    try {
        const data = await jsonpRequestWithTimeout(GAS_URL, 6000);
        if (data &amp;&amp; typeof data.nomor === 'number') {
            return data.nomor;
        } else {
            throw new Error('Invalid response');
        }
    } catch (error) {
        console.warn('Fallback ke localStorage karena:', error);
        let local = localStorage.getItem('nomorSertifikatFallback');
        let next = local ? parseInt(local) + 1 : 47;
        localStorage.setItem('nomorSertifikatFallback', next);
        return next;
    }
}

async function generateNomorSertifikat() {
    const today = new Date();
    const bulanRomawi = getRomanMonth(today.getMonth());
    const tahun = today.getFullYear();
    const nomorUrut = await getNextNomor();
    const nomorFormat = String(nomorUrut).padStart(3, '0');
    return `${nomorFormat}/K/${bulanRomawi}/${tahun}`;
}

// ======================== GENERATE PDF DENGAN POSISI RELATIF &amp; FONT DINAMIS ========================
async function generatePDF() {
    if (generateBtn.disabled) return;

    const file = templateInput.files[0];
    let nama = namaInput.value.trim();
    let peran = peranSelect.value;

    if (!file) {
        alert("⚠️ Upload template sertifikat terlebih dahulu!");
        return;
    }
    if (!nama) {
        alert("⚠️ Nama lengkap wajib diisi!");
        return;
    }

    nama = capitalizeEachWord(nama);
    peran = capitalizeEachWord(peran);

    // Tampilkan loading
    showLoading(true);

    try {
        // Pastikan font Montserrat sudah siap (fallback tetap berfungsi)
        await document.fonts.ready;
        
        // Baca file gambar sebagai dataURL
        const imageDataURL = await readFileAsDataURL(file);
        
        // Muat gambar ke dalam Image object
        const img = await loadImage(imageDataURL);
        
        // Buat canvas dengan ukuran asli gambar
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        
        // Gambar background template
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        
        // ========== POSISI RELATIF (berdasarkan proporsi contoh 2000x1414) ==========
        // Koordinat asli contoh: nomorY=340 (24% dari tinggi 1414), namaY=555 (39.2%), peranY=760 (53.7%)
        const relativePos = {
            nomorY: 0.240,   // 340/1414
            namaY: 0.3925,   // 555/1414
            peranY: 0.5375    // 760/1414
        };
        
        const posY_nomor = canvas.height * relativePos.nomorY;
        const posY_nama = canvas.height * relativePos.namaY;
        const posY_peran = canvas.height * relativePos.peranY;
        
        // Ukuran font relatif terhadap lebar canvas (berdasarkan lebar 2000px -&gt; font 62px =&gt; 3.1%)
        const baseFontRatio = 0.031;   // 62/2000
        let fontSizeNama = canvas.width * baseFontRatio;
        // Batas minimal dan maksimal
        fontSizeNama = Math.min(80, Math.max(28, fontSizeNama));
        
        const fontSizeNomor = Math.min(38, Math.max(20, canvas.width * 0.019));   // 38/2000 ≈ 1.9%
        const fontSizePeran = Math.min(48, Math.max(24, canvas.width * 0.024));    // 48/2000 = 2.4%
        
        // Pengaturan teks
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "#000000";
        
        // 1. NOMOR
        ctx.font = `bold ${fontSizeNomor}px 'Montserrat', Arial, sans-serif`;
        ctx.fillText(nomorSertifikat, canvas.width / 2, posY_nomor);
        
        // 2. NAMA (dengan auto-shrink jika terlalu panjang)
        let currentFontSize = fontSizeNama;
        ctx.font = `700 ${currentFontSize}px 'Montserrat', Arial, sans-serif`;
        let textWidth = ctx.measureText(nama).width;
        const maxWidth = canvas.width - 180; // margin kiri-kanan
        while (textWidth &gt; maxWidth &amp;&amp; currentFontSize &gt; 20) {
            currentFontSize -= 2;
            ctx.font = `700 ${currentFontSize}px 'Montserrat', Arial, sans-serif`;
            textWidth = ctx.measureText(nama).width;
        }
        ctx.fillText(nama, canvas.width / 2, posY_nama);
        
        // 3. PERAN
        ctx.font = `bold ${fontSizePeran}px 'Montserrat', Arial, sans-serif`;
        ctx.fillText(peran, canvas.width / 2, posY_peran);
        
        // Konversi canvas ke JPEG kualitas tinggi
        const finalImageData = canvas.toDataURL('image/jpeg', 0.95);
        
        // Buat PDF dengan ukuran sesuai canvas (landscape)
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF({
            orientation: canvas.width &gt; canvas.height ? 'landscape' : 'portrait',
            unit: 'px',
            format: [canvas.width, canvas.height]
        });
        pdf.addImage(finalImageData, 'JPEG', 0, 0, canvas.width, canvas.height);
        
        // Nama file aman (tanpa karakter ilegal)
        const safeName = nama.replace(/[^a-z0-9]/gi, '_').substring(0, 50);
        pdf.save(`Sertifikat_${safeName}.pdf`);
        
    } catch (error) {
        console.error('Gagal membuat PDF:', error);
        alert('Terjadi kesalahan saat membuat PDF. Pastikan template gambar valid dan coba lagi.');
    } finally {
        showLoading(false);
    }
}

// Helper: baca file sebagai DataURL
function readFileAsDataURL(file) {
    return new Promise((resolve, reject) =&gt; {
        const reader = new FileReader();
        reader.onload = (e) =&gt; resolve(e.target.result);
        reader.onerror = (err) =&gt; reject(err);
        reader.readAsDataURL(file);
    });
}

// Helper: load gambar dari DataURL
function loadImage(src) {
    return new Promise((resolve, reject) =&gt; {
        const img = new Image();
        img.crossOrigin = "Anonymous"; // tidak perlu tapi aman
        img.onload = () =&gt; resolve(img);
        img.onerror = (err) =&gt; reject(new Error('Gagal memuat gambar template'));
        img.src = src;
    });
}

// Variabel global untuk nomor sertifikat (disimpan sementara)
let nomorSertifikat = '';

// Fungsi utama generate: ambil nomor dulu lalu proses PDF
async function handleGenerate() {
    if (generateBtn.disabled) return;
    // Ambil nomor terbaru (dengan loading)
    showLoading(true);
    try {
        nomorSertifikat = await generateNomorSertifikat();
        await generatePDF();  // di dalam generatePDF akan showLoading lagi, tapi kita sudah menampilkan loading
    } catch (err) {
        console.error(err);
        alert('Gagal mengambil nomor sertifikat. Periksa koneksi atau coba lagi.');
        showLoading(false);
    }
}

// ======================== KONFIRMASI ========================
function confirmYes() {
    setFormDisabled(false);
    confirmMessageDiv.innerHTML = '&lt;span class="success"&gt;✔ Konfirmasi diterima. Silakan upload template dan isi data.&lt;/span&gt;';
    // Reset nilai form
    templateInput.value = '';
    namaInput.value = '';
    peranSelect.value = 'peserta';
}

function confirmNo() {
    setFormDisabled(true);
    confirmMessageDiv.innerHTML = '&lt;span class="warning"&gt;✖ Anda tidak berhak membuat sertifikat.&lt;/span&gt;';
    // Reset form
    templateInput.value = '';
    namaInput.value = '';
}

// Event listeners
confirmYesBtn.addEventListener('click', confirmYes);
confirmNoBtn.addEventListener('click', confirmNo);
generateBtn.addEventListener('click', handleGenerate);

// Inisialisasi awal: form nonaktif
setFormDisabled(true);
confirmMessageDiv.innerHTML = '&lt;span style="color:#2c7da0;"&gt;⚠️ Klik "YA, saya ikut" untuk mengaktifkan form.&lt;/span&gt;';

// Pastikan jsPDF sudah siap (optional)
if (!window.jspdf) {
    console.warn("jsPDF belum load, coba refresh");
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFubF28Nu8TJlO6eeok6G-GTrS-n2DsBGJIJ0wlSRu3jSQLPNLUUy5atfM1NBq4LVtJWM29lURD22ny9iW5-D8wYMBc98og5KIZOVRm4BVVMU8U6BZvmr701pMfMGTdeN84XzLTDhBVMlxBFgtiDwJxOrDwdaRdg-4oGUwbjLEKRN5DqIxgf32B_dhws/s2000/SERTIFIKAT%20KOMBEL%204.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="1414" data-original-width="2000" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFubF28Nu8TJlO6eeok6G-GTrS-n2DsBGJIJ0wlSRu3jSQLPNLUUy5atfM1NBq4LVtJWM29lURD22ny9iW5-D8wYMBc98og5KIZOVRm4BVVMU8U6BZvmr701pMfMGTdeN84XzLTDhBVMlxBFgtiDwJxOrDwdaRdg-4oGUwbjLEKRN5DqIxgf32B_dhws/w640-h452/SERTIFIKAT%20KOMBEL%204.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;</description><link>http://kitab-investasi.blogspot.com/2026/04/sertifikat-kombel.html</link><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFubF28Nu8TJlO6eeok6G-GTrS-n2DsBGJIJ0wlSRu3jSQLPNLUUy5atfM1NBq4LVtJWM29lURD22ny9iW5-D8wYMBc98og5KIZOVRm4BVVMU8U6BZvmr701pMfMGTdeN84XzLTDhBVMlxBFgtiDwJxOrDwdaRdg-4oGUwbjLEKRN5DqIxgf32B_dhws/s72-w640-h452-c/SERTIFIKAT%20KOMBEL%204.png" width="72"/><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-9000860041661554971.post-838074316404931212</guid><pubDate>Thu, 09 Apr 2026 02:57:00 +0000</pubDate><atom:updated>2026-04-09T10:15:24.459+07:00</atom:updated><title>EVALUASI KONTEN AI &amp; PERANCANGAN SISTEM DENGAN DESIGN THINKING</title><description>&lt;p style="text-align: justify;"&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;A. Tujuan Pembelajaran&lt;/h2&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Setelah mengikuti pembelajaran ini, peserta didik mampu:&lt;/p&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Mengevaluasi&lt;/span&gt;&amp;nbsp;konten berbasis AI (teks, gambar, rekomendasi) dengan kriteria akurasi, bias, etika, dan relevansi.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Merancang&lt;/span&gt;&amp;nbsp;sistem AI sederhana menggunakan pendekatan 5 tahap Design Thinking.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Menyelesaikan proyek aplikasi&lt;/span&gt;&amp;nbsp;sederhana berupa prototipe solusi AI untuk masalah di bidang TJKT, Tata Busana, atau Otomotif Sepeda Motor.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border: none; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;B. Materi Inti&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;1. Evaluasi Konten AI (30 menit)&lt;/h3&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;a. Apa itu Konten AI?&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Konten AI adalah segala informasi (teks, gambar, suara, video, rekomendasi) yang dihasilkan oleh kecerdasan buatan, misalnya ChatGPT, Midjourney, atau sistem rekomendasi di e-commerce.&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;b. Mengapa Perlu Dievaluasi?&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;AI bisa&amp;nbsp;&lt;span style="font-weight: 600;"&gt;hallusinasi&lt;/span&gt;&amp;nbsp;(menghasilkan informasi salah tapi meyakinkan).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;AI mengandung&amp;nbsp;&lt;span style="font-weight: 600;"&gt;bias&lt;/span&gt;&amp;nbsp;dari data pelatihan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Etika&lt;/span&gt;&amp;nbsp;dan keamanan: deepfake, plagiarisme, diskriminasi.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;c. 4 Kriteria Evaluasi Konten AI&lt;/h4&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 331px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 317px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -323px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top: none; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; font-weight: 500; line-height: 25px; padding: 10px 16px 10px 0px; text-align: left;"&gt;Kriteria&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top: none; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; font-weight: 500; line-height: 25px; padding: 10px 16px; text-align: left;"&gt;Pertanyaan Evaluasi&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top: none; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; font-weight: 500; line-height: 25px; padding: 10px 16px; text-align: left;"&gt;Contoh&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Akurasi&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Apakah faktanya benar?&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;ChatGPT memberi kode program yang tidak jalan.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Relevansi&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Apakah sesuai konteks jurusan?&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;AI merekomendasikan bahan katun untuk jaket hujan (salah).&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Bias&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Apakah merugikan kelompok tertentu?&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;AI rekrutmen lebih memilih pria untuk teknisi motor.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Transparansi &amp;amp; Etika&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Apakah sumbernya jelas? Ada watermark?&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Gambar AI yang dipakai tanpa izin.&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;d. Metode Evaluasi Praktis&lt;/h4&gt;&lt;ol start="1" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Cross-check&lt;/span&gt;&amp;nbsp;dengan sumber terpercaya (buku, jurnal, standar industri).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tes A/B&lt;/span&gt;&amp;nbsp;(bandingkan output AI dengan manusia ahli).&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Prompt audit&lt;/span&gt;&amp;nbsp;(ubah sedikit prompt, lihat perubahan output).&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Latihan kilat (5 menit):&lt;/span&gt;&amp;nbsp;Tampilkan satu gambar busana hasil AI dan satu teks rekomendasi perawatan motor dari ChatGPT. Murid mengevaluasi menggunakan 4 kriteria di atas.&lt;/p&gt;&lt;/blockquote&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border: none; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;2. Design Thinking untuk Perancangan Sistem AI (50 menit)&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Design Thinking adalah pendekatan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;human-centered&lt;/span&gt;&amp;nbsp;yang cocok untuk merancang sistem AI karena memastikan solusi benar-benar dibutuhkan pengguna.&lt;/p&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;Lima Tahap Design Thinking&lt;/h4&gt;&lt;div class="ds-scroll-area ds-scroll-area--show-on-focus-within _1210dd7 c03cafe9" style="--ds-scroll-area-gutters-disappear-delay: 1s; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; overflow-x: auto; position: relative; scrollbar-width: none; z-index: 0;"&gt;&lt;div class="ds-scroll-area__gutters" style="--container-height: 327px; --scrollbar-bg: #e5e5e5; --scrollbar-hover: #d4d4d4; height: 0px; left: 0px; opacity: 1; pointer-events: none; position: sticky; right: 0px; top: 0px; transition: opacity 0.1s ease-out 1s; width: 752.031px; z-index: 1000;"&gt;&lt;div class="ds-scroll-area__horizontal-gutter" style="height: 10px; left: 0px; padding: 2px 0px; position: absolute; right: 0px; text-align: justify; top: 313px;"&gt;&lt;/div&gt;&lt;div class="ds-scroll-area__vertical-gutter" style="bottom: -319px; padding: 0px 2px; position: absolute; right: 0px; text-align: justify; top: 8px; width: 10px;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;table style="border-collapse: collapse; max-width: unset; text-align: justify; width: 752.031px;"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top: none; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; font-weight: 500; line-height: 25px; padding: 10px 16px 10px 0px; text-align: left;"&gt;Tahap&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top: none; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; font-weight: 500; line-height: 25px; padding: 10px 16px; text-align: left;"&gt;Aktivitas&lt;/th&gt;&lt;th style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.12); border-top: none; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; font-weight: 500; line-height: 25px; padding: 10px 16px; text-align: left;"&gt;Output untuk Sistem AI&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;1. Empathize&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Wawancara/observasi pengguna (montir, siswa busana, teknisi jaringan)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;User journey map, pain points&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;2. Define&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Merumuskan masalah spesifik&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;POV (Point of View) statement&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;3. Ideate&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Brainstorming fitur AI&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Daftar ide: klasifikasi, rekomendasi, deteksi, dll.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;4. Prototype&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Buat mockup/flowchart sederhana&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Wireframe atau skenario penggunaan&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px 10px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;5. Test&lt;/span&gt;&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 16px;"&gt;Uji coba dengan pengguna (simulasi)&lt;/td&gt;&lt;td style="border-bottom: 1.11111px solid rgba(0, 0, 0, 0.1); font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 15px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 25px; max-width: min(30vw, 320px); min-width: 100px; padding: 10px 0px 10px 16px;"&gt;Feedback &amp;amp; iterasi&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px; text-align: justify;"&gt;Contoh Penerapan per Jurusan&lt;/h4&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;TJKT:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Masalah: Sulit mendeteksi serangan DDoS di jaringan kecil.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Ide AI: Sistem deteksi anomali lalu lintas paket menggunakan supervised learning.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Prototype: Flowchart input data paket → klasifikasi normal/anomali → alert.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Tata Busana:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Masalah: Sulit memadukan warna dan motif kain secara cepat.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Ide AI: Sistem rekomendasi padu-padan berbasis color harmony dan tren.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Prototype: Mockup aplikasi kamera kain → AI rekomendasi kombinasi.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Otomotif Sepeda Motor:&lt;/span&gt;&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Masalah: Diagnosis suara mesin tidak konsisten antar montir.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Ide AI: Klasifikasi suara mesin (normal/rusak) dengan spectrogram + CNN.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Prototype: Flowchart rekam suara → analisis → rekomendasi perbaikan.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border: none; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;3. Perancangan Sistem AI Sederhana (20 menit)&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Tidak perlu coding dalam pertemuan ini, cukup&amp;nbsp;&lt;span style="font-weight: 600;"&gt;rancangan logis&lt;/span&gt;&amp;nbsp;berupa:&lt;/p&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Input data&lt;/span&gt;&amp;nbsp;(apa yang dibutuhkan AI? misal: teks, gambar, sensor suara)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Proses&lt;/span&gt;&amp;nbsp;(algoritma sederhana: klasifikasi, regresi, rekomendasi)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Output&lt;/span&gt;&amp;nbsp;(tampilan hasil ke pengguna)&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Evaluasi&lt;/span&gt;&amp;nbsp;(bagaimana mengukur keberhasilan? akurasi, waktu respons)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;&lt;/p&gt;&lt;div style="text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Contoh sistem AI sederhana untuk OTSM:&lt;/span&gt;&lt;/div&gt;&lt;div style="text-align: justify;"&gt;Input: rekaman suara mesin 5 detik.&lt;/div&gt;&lt;div style="text-align: justify;"&gt;Proses: ekstraksi fitur MFCC → perbandingan dengan database suara normal.&lt;/div&gt;&lt;div style="text-align: justify;"&gt;Output: "Suara mesin normal" atau "Indikasi klep renggang".&lt;/div&gt;&lt;div style="text-align: justify;"&gt;Evaluasi: uji coba dengan 10 rekaman suara riil.&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;hr style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0.1); border: none; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; height: 1px; margin: 32px 0px; text-align: justify;" /&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;&lt;/h2&gt;&lt;h2 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px; text-align: justify;"&gt;C. Tugas Proyek&amp;nbsp;&lt;/h2&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;Judul Tugas:&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;"Rancang Solusi AI untuk Masalah di Jurusanmu dengan Design Thinking"&lt;/span&gt;&lt;/p&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;Format Output:&lt;/h3&gt;&lt;p class="ds-markdown-paragraph" style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px; text-align: justify;"&gt;Satu lembar kerja yang diisi kelompok (3-4 orang). Boleh digambar/ditulis tangan atau digital.&lt;/p&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;Langkah Pengerjaan:&lt;/h3&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Tahap 1: Empathize &amp;amp; Define (15 menit)&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Pilih satu masalah nyata&lt;/span&gt;&amp;nbsp;di bengkel/sekolah/tempat praktik terkait jurusan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Tulis&amp;nbsp;&lt;span style="font-weight: 600;"&gt;POV (Point of View)&lt;/span&gt;: "Pengguna [siapa] membutuhkan [kebutuhan] karena [insight]".&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;blockquote style="background-color: white; border-left: 1.11111px solid rgb(173, 178, 184); color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 16px 0px 0px; padding-left: 14px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Contoh OTSM:&amp;nbsp;&lt;em&gt;Montir motor membutuhkan cara cepat mendeteksi kerusakan busi hanya dari suara karena suara motor sering tertutup kebisingan.&lt;/em&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Tahap 2: Ideate (10 menit)&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Minimal 3 ide solusi AI. Pilih satu yang paling memungkinkan.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Tentukan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;jenis AI&lt;/span&gt;&amp;nbsp;(klasifikasi, rekomendasi, deteksi objek, NLP, dll.)&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Tahap 3: Prototype (20 menit)&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Buat&amp;nbsp;&lt;span style="font-weight: 600;"&gt;skenario penggunaan&lt;/span&gt;&amp;nbsp;(user flow) dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;sketsa antarmuka&lt;/span&gt;&amp;nbsp;sederhana.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Jelaskan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;input → proses → output&lt;/span&gt;.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Tahap 4: Evaluasi (15 menit)&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Gunakan 4 kriteria evaluasi konten AI pada&amp;nbsp;&lt;span style="font-weight: 600;"&gt;output&lt;/span&gt;&amp;nbsp;sistem yang dirancang.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;Tulis kemungkinan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;bias&lt;/span&gt;&amp;nbsp;dan cara mengatasinya.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h3 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 20px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 30px; margin: 32px 0px 16px; text-align: justify;"&gt;Contoh Jawaban untuk Tiap Jurusan&lt;/h3&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Untuk TJKT:&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Masalah:&lt;/span&gt;&amp;nbsp;Helpdesk kewalahan menjawab pertanyaan konfigurasi VLAN.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Solusi AI:&lt;/span&gt;&amp;nbsp;Chatbot berbasis LLM yang di-fine-tune dengan dokumen konfigurasi.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Evaluasi bias:&lt;/span&gt;&amp;nbsp;Chatbot hanya mengacu pada satu vendor (misal Cisco) – solusi: tambah dataset dari Mikrotik, Huawei.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Untuk Tata Busana:&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Masalah:&lt;/span&gt;&amp;nbsp;Kesulitan memprediksi sisa kain dari pola jahit.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Solusi AI:&lt;/span&gt;&amp;nbsp;CNN untuk segmentasi pola kain + rekomendasi tata letak.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Evaluasi bias:&lt;/span&gt;&amp;nbsp;Model hanya dilatih kain katun – solusi: augmentasi data dengan kain wool, sutra.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; margin: 16px 0px 8px; text-align: justify;"&gt;Untuk Otomotif Sepeda Motor:&lt;/h4&gt;&lt;ul style="background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; margin: 8px 0px 16px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Masalah:&lt;/span&gt;&amp;nbsp;Teknisi lupa jadwal perawatan berkala tiap tipe motor.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Solusi AI:&lt;/span&gt;&amp;nbsp;Sistem reminder prediktif berdasarkan odometer + riwayat servis.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px; text-align: justify;"&gt;&lt;span style="font-weight: 600;"&gt;Evaluasi bias:&lt;/span&gt;&amp;nbsp;Data servis didominasi motor matik – solusi: kumpulkan data motor bebek dan sport.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div style="text-align: justify;"&gt;&lt;div class="ds-markdown" style="--ds-md-zoom: 1.143; background-color: white; color: #0f1115; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 28px; text-align: start;"&gt;&lt;h2 style="font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px;"&gt;&lt;/h2&gt;&lt;h2 style="font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-optical-sizing: auto; font-size-adjust: none; font-size: 22px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-emoji: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: 32px; margin: 32px 0px 16px;"&gt;. Kesimpulan &amp;amp; Refleksi (5 menit di akhir)&lt;/h2&gt;&lt;ul style="margin: 16px 0px; padding-left: 18px;"&gt;&lt;li&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;AI bukanlah dewa, harus selalu dievaluasi.&lt;/p&gt;&lt;/li&gt;&lt;li style="margin-top: 6px;"&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; margin: 0px;"&gt;Design Thinking memastikan sistem AI&amp;nbsp;&lt;span style="font-weight: 600;"&gt;manusiawi&lt;/span&gt;&amp;nbsp;dan&amp;nbsp;&lt;span style="font-weight: 600;"&gt;relevan&lt;/span&gt;.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p class="ds-markdown-paragraph" style="margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 16px; margin: 16px 0px 0px;"&gt;&lt;span style="font-weight: 600;"&gt;Selamat merancang!&lt;/span&gt;&amp;nbsp;&#128640;&lt;/p&gt;&lt;/div&gt;&lt;div class="dbe8cf4a" style="background-color: white; color: #81858c; font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;quot;Open Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 14px; font-style: italic; font-variant-ligatures: no-contextual; line-height: 22px; margin-top: 16px; text-align: start;"&gt;This response is AI-generated, for reference only.&lt;/div&gt;&lt;/div&gt;</description><link>http://kitab-investasi.blogspot.com/2026/04/evaluasi-konten-ai-perancangan-sistem.html</link><thr:total>0</thr:total><author>nof_rizal07@yahoo.co.id (abang_cool)</author></item></channel></rss>