  1000→
  1001→                        <div class="glass-panel rounded-xl p-4">
  1002→                            <h3 class="text-xs font-bold text-purple-400 uppercase tracking-wider mb-2 font-display">Quick Preset</h3>
  1003→                            <div class="grid grid-cols-4 gap-1.5">
  1004→                                <button class="preset-btn text-[10px] py-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 text-slate-300 transition" data-conc="0.5">0.5 M</button>
  1005→                                <button class="preset-btn text-[10px] py-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 text-slate-300 transition" data-conc="1.0">1.0 M</button>
  1006→                                <button class="preset-btn text-[10px] py-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 text-slate-300 transition" data-conc="1.5">1.5 M</button>
  1007→                                <button class="preset-btn text-[10px] py-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 text-slate-300 transition" data-conc="2.0">2.0 M</button>
  1008→                            </div>
  1009→                        </div>
  1010→                    </div>
  1011→
  1012→                    <div class="space-y-2">
  1013→                        <div class="flex justify-between items-center gap-2">
  1014→                            <h3 class="text-xs font-bold text-purple-400 uppercase tracking-wider font-display">Data Pengamatan</h3>
  1015→                            <div class="flex gap-1">
  1016→                                <button id="btn-download-data" class="text-[10px] text-cyan-400 border border-cyan-400/30 px-2 py-1 rounded-lg hover:bg-cyan-900/30 transition">CSV</button>
  1017→                                <button id="btn-clear-table" class="text-[10px] text-rose-400 border border-rose-400/30 px-2 py-1 rounded-lg hover:bg-rose-900/20 transition">Clear</button>
  1018→                            </div>
  1019→                        </div>
  1020→                        <div class="overflow-auto rounded-xl border border-slate-700/50 bg-slate-800/30 max-h-44">
  1021→                            <table class="w-full text-xs data-table">
  1022→                                <thead><tr class="text-slate-400 border-b border-slate-700/50">
  1023→                                    <th class="p-2 w-8">No</th><th class="p-2">T (°C)</th><th class="p-2">K (M)</th><th class="p-2">t (s)</th><th class="p-2">1/t (s⁻¹)</th>
  1024→                                </tr></thead>
  1025→                                <tbody id="data-body" class="text-center text-slate-300"></tbody>
  1026→                            </table>
  1027→                        </div>
  1028→                        <div id="order-result" class="glass-panel rounded-xl p-3 text-xs">
  1029→                            <div class="flex justify-between items-center">
  1030→                                <span class="text-slate-400">Orde Reaksi (estimasi):</span>
  1031→                                <span id="order-value" class="font-mono text-emerald-400 font-bold">—</span>
  1032→                            </div>
  1033→                            <div class="flex justify-between items-center mt-1">
  1034→                                <span class="text-slate-400">R² (linearitas):</span>
  1035→                                <span id="r-squared" class="font-mono text-cyan-400 font-bold">—</span>
  1036→                            </div>
  1037→                        </div>
  1038→                    </div>
  1039→
  1040→                    <div class="space-y-3">
  1041→                        <div class="glass-panel rounded-xl p-3 h-44 relative overflow-hidden">
  1042→                            <button id="btn-download-chart" class="absolute top-2 right-2 z-10 text-[10px] text-cyan-400 bg-slate-800/80 px-2 py-0.5 rounded hover:bg-cyan-400/20 transition border border-cyan-400/20">PNG</button>
  1043→                            <canvas id="reactionChart"></canvas>
  1044→                            <div id="chart-placeholder" class="absolute inset-0 flex flex-col items-center justify-center text-slate-500 text-xs gap-2 pointer-events-none">
  1045→                                <svg class="w-8 h-8 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
  1046→                                <span class="text-center">Grafik Laju (1/t) vs Konsentrasi</span>
  1047→                            </div>
  1048→                        </div>
  1049→                        <div class="glass-panel rounded-xl p-3">
  1050→                            <h3 class="text-xs font-bold text-yellow-400 uppercase tracking-wider mb-2 font-display">Kesimpulan</h3>
  1051→                            <textarea id="conclusion-input" class="w-full bg-slate-800/50 border border-slate-700 rounded-lg p-2 text-xs focus:border-cyan-500 focus:outline-none transition resize-none text-slate-200" rows="3" placeholder="Tulis kesimpulan di sini... Contoh: Semakin tinggi konsentrasi, semakin cepat reaksi..."></textarea>
  1052→                            <button id="btn-save-conclusion" class="w-full mt-2 btn-secondary py-1.5 rounded-lg text-[10px] uppercase font-bold">Simpan ke Laporan</button>
  1053→                        </div>
  1054→                    </div>
  1055→                </div>
  1056→            </div>
  1057→
  1058→            <!-- ============== MICRO PANEL ============== -->
  1059→            <div id="panel-micro" class="panel-hidden tab-content">
  1060→                <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
  1061→                    <div class="glass-panel rounded-xl p-4 space-y-4">
  1062→                        <div class="section-title">
  1063→                            <div class="section-title-icon"><svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg></div>
  1064→                            <h3 class="text-sm font-bold text-white font-display">Kontrol Simulasi</h3>
  1065→                        </div>
  1066→                        
  1067→                        <div>
  1068→                            <div class="flex justify-between text-xs text-slate-400 mb-2">
  1069→                                <span>Energi Aktivasi (Eₐ)</span>
  1070→                                <span id="ea-val-label" class="font-mono text-purple-400 font-bold">50</span>
  1071→                            </div>
  1072→                            <input type="range" id="ea-slider-micro" min="1" max="100" value="50" class="w-full cursor-pointer range-ea">
  1073→                            <p class="text-[10px] text-slate-500 mt-1">Energi minimum untuk tumbukan efektif</p>
  1074→                        </div>
  1075→
  1076→                        <div>
  1077→                            <div class="flex justify-between text-xs text-slate-400 mb-2">
  1078→                                <span>Jumlah Partikel (Konsentrasi)</span>
  1079→                                <span id="particle-val-label" class="font-mono text-emerald-400 font-bold">50</span>
  1080→                            </div>
  1081→                            <input type="range" id="particle-count-slider" min="20" max="80" value="50" class="w-full cursor-pointer range-particle">
  1082→                            <p class="text-[10px] text-slate-500 mt-1">Lebih banyak partikel = konsentrasi lebih tinggi</p>
  1083→                        </div>
  1084→
  1085→                        <div>
  1086→                            <div class="flex justify-between text-xs text-slate-400 mb-2">
  1087→                                <span>Temperatur</span>
  1088→                                <span id="micro-temp-label" class="font-mono text-orange-400 font-bold">25°C</span>
  1089→                            </div>
  1090→                            <input type="range" id="temp-slider-micro" min="25" max="100" value="25" class="w-full cursor-pointer range-temp">
  1091→                            <p class="text-[10px] text-slate-500 mt-1">Suhu lebih tinggi = partikel lebih cepat</p>
  1092→                        </div>
  1093→
  1094→                        <div>
  1095→                            <label class="text-xs text-slate-400 block mb-2">Kecepatan Simulasi</label>
  1096→                            <div class="flex gap-1" id="speed-controls">
  1097→                                <button class="speed-btn flex-1" data-speed="0.5">0.5×</button>
  1098→                                <button class="speed-btn flex-1 active" data-speed="1">1×</button>
  1099→                                <button class="speed-btn flex-1" data-speed="2">2×</button>
  1100→                                <button class="speed-btn flex-1" data-speed="4">4×</button>
  1101→                            </div>
  1102→                            <p class="text-[10px] text-slate-500 mt-1">Kontrol kecepatan animasi partikel</p>
  1103→                        </div>
  1104→
  1105→                        <div class="pt-3 border-t border-slate-700 grid grid-cols-2 gap-2">
  1106→                            <button id="btn-start-micro" class="w-full btn-primary py-3 rounded-xl text-xs uppercase tracking-widest font-bold">Mulai</button>
  1107→                            <button id="btn-reset-micro" class="w-full bg-slate-700 hover:bg-slate-600 py-3 rounded-xl text-xs transition text-slate-300 font-semibold">Reset</button>
  1108→                        </div>
  1109→                    </div>
  1110→
  1111→                    <div class="glass-panel rounded-xl p-4 flex flex-col">
  1112→                        <div class="section-title">
  1113→                            <div class="section-title-icon"><svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
  1114→                            <h3 class="text-sm font-bold text-white font-display">Statistik Real-time</h3>
  1115→                        </div>
  1116→                        <div class="flex-1 space-y-3 mt-2">
  1117→                            <div class="bg-slate-800/40 rounded-lg p-3">
  1118→                                <div class="text-[10px] text-slate-500 uppercase mb-1">Laju Tumbukan</div>
  1119→                                <div class="text-2xl font-bold text-cyan-400 font-mono"><span id="micro-stats">0</span><span class="text-xs ml-1 text-slate-500">/s</span></div>
  1120→                            </div>
  1121→                            <div class="bg-slate-800/40 rounded-lg p-3">
  1122→                                <div class="text-[10px] text-slate-500 uppercase mb-1">Laju Reaksi</div>
  1123→                                <div class="text-2xl font-bold text-yellow-400 font-mono"><span id="micro-rate">0</span><span class="text-xs ml-1 text-slate-500">/s</span></div>
  1124→                            </div>
  1125→                            <div class="bg-slate-800/40 rounded-lg p-3">
  1126→                                <div class="flex justify-between items-center mb-1">
  1127→                                    <span class="text-[10px] text-slate-500 uppercase">Distribusi Energi</span>
  1128→                                    <span class="text-[10px] text-slate-400">Maxwell-Boltzmann</span>
  1129→                                </div>
  1130→                                <canvas id="energyChart" height="80"></canvas>
  1131→                            </div>
  1132→                        </div>
  1133→                    </div>
  1134→
  1135→                    <div class="glass-panel rounded-xl p-4 space-y-3">
  1136→                        <div class="section-title">
  1137→                            <div class="section-title-icon"><svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
  1138→                            <h3 class="text-sm font-bold text-white font-display">Grafik Tumbukan</h3>
  1139→                        </div>
  1140→                        <div class="bg-slate-800/40 rounded-lg p-3">
  1141→                            <canvas id="collisionChart" height="160"></canvas>
  1142→                        </div>
  1143→                        <div class="text-[10px] text-slate-500 leading-relaxed">
  1144→                            <strong class="text-cyan-400">Biru:</strong> Total tumbukan | 
  1145→                            <strong class="text-yellow-400">Kuning:</strong> Reaksi sukses
  1146→                        </div>
  1147→                    </div>
  1148→
  1149→                    <div class="glass-panel rounded-xl p-4 space-y-3">
  1150→                        <div class="section-title">
  1151→                            <div class="section-title-icon"><svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg></div>
  1152→                            <h3 class="text-sm font-bold text-white font-display">Insight</h3>
  1153→                        </div>
  1154→                        <div id="micro-insight" class="space-y-2 text-xs">
  1155→                            <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-cyan-400">
  1156→                                <div class="text-cyan-400 font-bold mb-1">Hubungan Konsentrasi</div>
  1157→                                <p class="text-slate-400 text-[11px] leading-relaxed">Partikel per volume bertambah → jarak antar partikel menurun → peluang tumbukan meningkat → laju reaksi naik.</p>
  1158→                            </div>
  1159→                            <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-purple-400">
  1160→                                <div class="text-purple-400 font-bold mb-1">Energi Aktivasi</div>
  1161→                                <p class="text-slate-400 text-[11px] leading-relaxed">Hanya tumbukan dengan energi kinetik ≥ Eₐ yang menghasilkan reaksi. Naikkan suhu untuk menaikkan energi partikel.</p>
  1162→                            </div>
  1163→                            <div class="bg-slate-800/40 rounded-lg p-3 border-l-2 border-yellow-400">
  1164→                                <div class="text-yellow-400 font-bold mb-1">Tumbukan Efektif</div>
  1165→                                <p class="text-slate-400 text-[11px] leading-relaxed">Tidak semua tumbukan menghasilkan reaksi. Hanya yang memiliki energi cukup DAN orientasi tepat.</p>
  1166→                            </div>
  1167→                        </div>
  1168→                    </div>
  1169→                </div>
  1170→            </div>
  1171→
  1172→            <!-- ============== TEORI PANEL ============== -->
  1173→            <div id="panel-teori" class="panel-hidden tab-content">
  1174→                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  1175→                    
  1176→                    <!-- LEFT COLUMN - Main Theory -->
  1177→                    <div class="lg:col-span-2 space-y-6">
  1178→                        
  1179→                        <!-- Collision Theory -->
  1180→                        <div class="glass-panel rounded-xl p-6">
  1181→                            <div class="section-title">
  1182→                                <div class="section-title-icon"><svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
  1183→                                <h2 class="text-xl font-bold text-cyan-400 font-display">Teori Tumbukan (Collision Theory)</h2>
  1184→                            </div>
  1185→                            <div class="space-y-4 text-sm text-slate-300 leading-relaxed">
  1186→                                <p>
  1187→                                    Teori Tumbukan, yang dikembangkan oleh <strong class="text-white">Max Trautz (1916)</strong> dan <strong class="text-white">William Lewis (1918)</strong>, menjelaskan bahwa reaksi kimia terjadi akibat <strong class="text-cyan-300">tumbukan antar partikel reaktan</strong>. Namun, tidak semua tumbukan menghasilkan reaksi — hanya tumbukan yang memenuhi syarat tertentu yang akan menghasilkan produk.
  1188→                                </p>
  1189→                                <div class="grid grid-cols-1 md:grid-cols-3 gap-3 my-4">
  1190→                                    <div class="theory-card rounded-lg p-4">
  1191→                                        <div class="text-2xl mb-2 font-bold text-cyan-400 font-display">1</div>
  1192→                                        <h4 class="font-bold mb-1">Energi Cukup</h4>
  1193→                                        <p class="text-xs text-slate-400">Energi kinetik tumbukan ≥ Energi aktivasi (Eₐ)</p>
  1194→                                    </div>
  1195→                                    <div class="theory-card rounded-lg p-4">
  1196→                                        <div class="text-2xl mb-2 font-bold text-cyan-400 font-display">2</div>
  1197→                                        <h4 class="font-bold mb-1">Orientasi Tepat</h4>
  1198→                                        <p class="text-xs text-slate-400">Partikel harus bertumbukan dengan sudut/orientasi yang benar</p>
  1199→                                    </div>
  1200→                                    <div class="theory-card rounded-lg p-4">
  1201→                                        <div class="text-2xl mb-2 font-bold text-cyan-400 font-display">3</div>
  1202→                                        <h4 class="font-bold mb-1">Frekuensi Tinggi</h4>
  1203→                                        <p class="text-xs text-slate-400">Semakin sering tumbukan efektif, semakin cepat reaksi</p>
  1204→                                    </div>
  1205→                                </div>
  1206→                                <p>
  1207→                                    Tumbukan yang memenuhi kedua syarat disebut <strong class="text-emerald-300">tumbukan efektif</strong>. Laju reaksi sebanding dengan frekuensi tumbukan efektif per satuan waktu:
  1208→                                </p>
  1209→                                <div class="bg-slate-800/50 rounded-lg p-4 text-center font-mono text-base text-white my-3">
  1210→                                    \( v = Z \times f \times P \)
  1211→                                </div>
  1212→                                <p class="text-xs text-slate-400">
  1213→                                    di mana: <span class="font-mono text-slate-300">Z</span> = frekuensi tumbukan, <span class="font-mono text-slate-300">f</span> = fraksi partikel dengan energi ≥ Eₐ, <span class="font-mono text-slate-300">P</span> = faktor probabilitas orientasi (faktor sterik).
  1214→                                </p>
  1215→                            </div>
  1216→                        </div>
  1217→
  1218→                        <!-- Effect of Concentration -->
  1219→                        <div class="glass-panel rounded-xl p-6">
  1220→                            <div class="section-title">
  1221→                                <div class="section-title-icon"><svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg></div>
  1222→                                <h2 class="text-xl font-bold text-purple-400 font-display">Pengaruh Konsentrasi terhadap Laju Reaksi</h2>
  1223→                            </div>
  1224→                            <div class="space-y-4 text-sm text-slate-300 leading-relaxed">
  1225→                                <p>
  1226→                                    <strong class="text-white">Konsentrasi</strong> menyatakan jumlah partikel zat terlarut dalam satuan volume tertentu (mol/L atau M). Pada reaksi homogen, peningkatan konsentrasi reaktan akan mempercepat laju reaksi melalui mekanisme berikut:
  1227→                                </p>
  1228→                                <ol class="list-decimal list-inside space-y-3 ml-2">
  1229→                                    <li>
  1230→                                        <strong class="text-white">Jumlah Partikel per Volume Bertambah</strong>
  1231→                                        <p class="text-xs mt-1 text-slate-400">Pada konsentrasi 2 M, jumlah partikel reaktan per liter dua kali lipat dibanding 1 M. Dalam volume yang sama, kerapatan partikel meningkat.</p>
  1232→                                    </li>
  1233→                                    <li>
  1234→                                        <strong class="text-white">Jarak Antar Partikel Menurun</strong>
  1235→                                        <p class="text-xs mt-1 text-slate-400">Partikel yang lebih rapat berarti jarak tempuh antar tumbukan lebih pendek, sehingga frekuensi tumbukan per satuan waktu meningkat.</p>
  1236→                                    </li>
  1237→                                    <li>
  1238→                                        <strong class="text-white">Frekuensi Tumbukan Meningkat</strong>
  1239→                                        <p class="text-xs mt-1 text-slate-400">Lebih banyak partikel × jarak lebih dekat → lebih banyak tumbukan per detik. Secara matematis, frekuensi tumbukan sebanding dengan hasil kali konsentrasi reaktan.</p>
  1240→                                    </li>
  1241→                                    <li>
  1242→                                        <strong class="text-white">Tumbukan Efektif Bertambah</strong>
  1243→                                        <p class="text-xs mt-1 text-slate-400">Karena distribusi energi partikel tidak berubah, fraksi tumbukan efektif tetap. Namun karena total tumbukan naik, jumlah tumbukan efektif juga naik proporsional.</p>
  1244→                                    </li>
  1245→                                    <li>
  1246→                                        <strong class="text-white">Waktu Reaksi Menurun</strong>
  1247→                                        <p class="text-xs mt-1 text-slate-400">Lebih banyak tumbukan efektif per detik → reaksi selesai lebih cepat → waktu yang dibutuhkan untuk membentuk jumlah produk tertentu menjadi lebih singkat.</p>
  1248→                                    </li>
  1249→                                </ol>
  1250→                                <div class="bg-purple-900/20 border border-purple-500/30 rounded-lg p-4 mt-4">
  1251→                                    <h4 class="text-sm font-bold text-purple-300 mb-2">Analogi Visual</h4>
  1252→                                    <p class="text-xs text-slate-300 leading-relaxed">
  1253→                                        Bayangkan dua ruangan berukuran sama. Ruangan A berisi 10 orang, ruangan B berisi 50 orang. Jika setiap orang berjalan acak, peluang dua orang bertabrakan di ruangan B jauh lebih tinggi dibanding ruangan A. Begitu pula partikel reaktan — semakin pekat, semakin tinggi peluang tumbukan.
  1254→                                    </p>
  1255→                                </div>
  1256→                            </div>
  1257→                        </div>
  1258→
  1259→                        <!-- Rate Law -->
  1260→                        <div class="glass-panel rounded-xl p-6">
  1261→                            <div class="section-title">
  1262→                                <div class="section-title-icon"><svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg></div>
  1263→                                <h2 class="text-xl font-bold text-emerald-400 font-display">Hukum Laju Reaksi (Rate Law)</h2>
  1264→                            </div>
  1265→                            <div class="space-y-4 text-sm text-slate-300 leading-relaxed">
  1266→                                <p>Untuk reaksi umum: <span class="font-mono text-white">aA + bB → produk</span>, hukum laju dinyatakan sebagai:</p>
  1267→                                <div class="bg-slate-800/50 rounded-lg p-4 text-center font-mono text-lg text-white my-3">
  1268→                                    \( v = k \cdot [A]^m \cdot [B]^n \)
  1269→                                </div>
  1270→                                <p class="text-xs text-slate-400">
  1271→                                    di mana <span class="font-mono text-slate-300">v</span> = laju reaksi, <span class="font-mono text-slate-300">k</span> = konstanta laju, <span class="font-mono text-slate-300">[A], [B]</span> = konsentrasi reaktan, <span class="font-mono text-slate-300">m, n</span> = orde reaksi terhadap A dan B.
  1272→                                </p>
  1273→                                
  1274→                                <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-4">
  1275→                                    <div class="bg-slate-800/40 rounded-lg p-3">
  1276→                                        <div class="text-xs font-bold text-emerald-300 mb-1">Orde Nol (m=0)</div>
  1277→                                        <p class="text-[11px] text-slate-400">Laju tidak dipengaruhi konsentrasi. v = k</p>
  1278→                                        <div class="text-[10px] text-slate-500 mt-1">Grafik [A] vs t: linier</div>
  1279→                                    </div>
  1280→                                    <div class="bg-slate-800/40 rounded-lg p-3">
  1281→                                        <div class="text-xs font-bold text-emerald-300 mb-1">Orde Satu (m=1)</div>
  1282→                                        <p class="text-[11px] text-slate-400">Laju ∝ [A]. v = k[A]</p>
  1283→                                        <div class="text-[10px] text-slate-500 mt-1">Grafik ln[A] vs t: linier</div>
  1284→                                    </div>
  1285→                                    <div class="bg-slate-800/40 rounded-lg p-3">
  1286→                                        <div class="text-xs font-bold text-emerald-300 mb-1">Orde Dua (m=2)</div>
  1287→                                        <p class="text-[11px] text-slate-400">Laju ∝ [A]². v = k[A]²</p>
  1288→                                        <div class="text-[10px] text-slate-500 mt-1">Grafik 1/[A] vs t: linier</div>
  1289→                                    </div>
  1290→                                </div>
  1291→
  1292→                                <div class="bg-emerald-900/20 border border-emerald-500/30 rounded-lg p-4 mt-3">
  1293→                                    <h4 class="text-sm font-bold text-emerald-300 mb-2">Reaksi Na₂S₂O₃ + HCl</h4>
  1294→                                    <p class="text-xs text-slate-300 leading-relaxed mb-2">
  1295→                                        Untuk reaksi yang disimulasikan di lab ini, laju dapat diamati melalui waktu yang dibutuhkan untuk membentuk endapan belerang:
  1296→                                    </p>
  1297→                                    <div class="bg-slate-900/50 rounded p-3 font-mono text-xs text-cyan-300 mb-2">
  1298→                                        v = Δ[S] / Δt ≈ 1 / t
  1299→                                    </div>
  1300→                                    <p class="text-xs text-slate-400">
  1301→                                        Karena jumlah endapan yang diamati konstan (saat X menghilang), maka laju berbanding terbalik dengan waktu: <strong class="text-white">v = 1/t</strong>. Dengan mengukur t pada berbagai [Na₂S₂O₃], kita dapat menentukan orde reaksi.
  1302→                                    </p>
  1303→                                </div>
  1304→                            </div>
  1305→                        </div>
  1306→
  1307→                        <!-- Arrhenius Equation -->
  1308→                        <div class="glass-panel rounded-xl p-6">
  1309→                            <div class="section-title">
  1310→                                <div class="section-title-icon"><svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.24 17 7.341 18.412 10.6 18.408 13.5 16 16c-1.5 1.5-2.5 3-3 4"/></svg></div>
  1311→                                <h2 class="text-xl font-bold text-amber-400 font-display">Persamaan Arrhenius</h2>
  1312→                            </div>
  1313→                            <div class="space-y-4 text-sm text-slate-300 leading-relaxed">
  1314→                                <p>Persamaan Arrhenius menghubungkan konstanta laju (k) dengan suhu dan energi aktivasi:</p>
  1315→                                <div class="bg-slate-800/50 rounded-lg p-4 text-center font-mono text-lg text-white my-3">
  1316→                                    \( k = A \cdot e^{-E_a / RT} \)
  1317→                                </div>
  1318→                                <p class="text-xs text-slate-400">
  1319→                                    di mana <span class="font-mono text-slate-300">A</span> = faktor frekuensi (pre-exponential factor), <span class="font-mono text-slate-300">Eₐ</span> = energi aktivasi (J/mol), <span class="font-mono text-slate-300">R</span> = konstanta gas (8,314 J/mol·K), <span class="font-mono text-slate-300">T</span> = suhu absolut (K).
  1320→                                </p>
  1321→                                <div class="bg-amber-900/20 border border-amber-500/30 rounded-lg p-4 mt-3">
  1322→                                    <h4 class="text-sm font-bold text-amber-300 mb-2">Bentuk Logaritmik</h4>
  1323→                                    <div class="bg-slate-900/50 rounded p-3 font-mono text-xs text-amber-300 mb-2">
  1324→                                        ln k = ln A − Eₐ / RT
  1325→                                    </div>
  1326→                                    <p class="text-xs text-slate-400">
  1327→                                        Dengan memplot <strong class="text-white">ln k</strong> terhadap <strong class="text-white">1/T</strong>, diperoleh garis lurus dengan kemiringan <strong class="text-white">−Eₐ/R</strong>. Inilah dasar penentuan energi aktivasi eksperimen.
  1328→                                    </p>
  1329→                                </div>
  1330→                            </div>
  1331→                        </div>
  1332→
  1333→                    </div>
  1334→
  1335→                    <!-- RIGHT COLUMN - Visualizations & Extra -->
  1336→                    <div class="space-y-6">
  1337→                        
  1338→                        <!-- Energy Profile Diagram -->
  1339→                        <div class="glass-panel rounded-xl p-5">
  1340→                            <h3 class="text-sm font-bold text-purple-400 uppercase tracking-wider mb-3 font-display">Diagram Profil Energi</h3>
  1341→                            <div class="energy-diagram">
  1342→                                <svg viewBox="0 0 300 200" class="w-full h-full">
  1343→                                    <!-- Axes -->
  1344→                                    <line x1="20" y1="180" x2="280" y2="180" stroke="#475569" stroke-width="1"/>
  1345→                                    <line x1="20" y1="20" x2="20" y2="180" stroke="#475569" stroke-width="1"/>
  1346→                                    <text x="155" y="195" fill="#94a3b8" font-size="9" text-anchor="middle">Koordinat Reaksi</text>
  1347→                                    <text x="10" y="100" fill="#94a3b8" font-size="9" text-anchor="middle" transform="rotate(-90 10 100)">Energi</text>
  1348→                                    
  1349→                                    <!-- Reactant level -->
  1350→                                    <line x1="30" y1="130" x2="80" y2="130" stroke="#22d3ee" stroke-width="2"/>
  1351→                                    <text x="35" y="145" fill="#22d3ee" font-size="9">Reaktan</text>
  1352→                                    
  1353→                                    <!-- Product level -->
  1354→                                    <line x1="220" y1="150" x2="270" y2="150" stroke="#fde047" stroke-width="2"/>
  1355→                                    <text x="225" y="165" fill="#fde047" font-size="9">Produk</text>
  1356→                                    
  1357→                                    <!-- Energy curve (without catalyst) -->
  1358→                                    <path class="energy-path" d="M 80 130 Q 150 30, 220 150"/>
  1359→                                    
  1360→                                    <!-- Energy curve (with catalyst) - lower peak -->
  1361→                                    <path class="energy-path-catalyst" d="M 80 130 Q 150 75, 220 150"/>
  1362→                                    
  1363→                                    <!-- Ea arrow -->
  1364→                                    <line x1="155" y1="130" x2="155" y2="35" stroke="#a855f7" stroke-width="1.5" stroke-dasharray="3,2"/>
  1365→                                    <polygon points="155,30 152,38 158,38" fill="#a855f7"/>
  1366→                                    <text x="160" y="80" fill="#a855f7" font-size="9">Eₐ</text>
  1367→                                    
  1368→                                    <!-- ΔH arrow -->
  1369→                                    <line x1="245" y1="130" x2="245" y2="148" stroke="#10b981" stroke-width="1.5"/>
  1370→                                    <polygon points="245,150 242,143 248,143" fill="#10b981"/>
  1371→                                    <text x="248" y="142" fill="#10b981" font-size="9">ΔH</text>
  1372→                                    
  1373→                                    <!-- Peak label -->
  1374→                                    <text x="150" y="22" fill="#94a3b8" font-size="8" text-anchor="middle">Kompleks Teraktifkan</text>
  1375→                                    
  1376→                                    <!-- Catalyst Ea -->
  1377→                                    <text x="180" y="78" fill="#a855f7" font-size="8">Eₐ (kat)</text>
  1378→                                </svg>
  1379→                            </div>
  1380→                            <div class="text-[10px] text-slate-400 mt-3 space-y-1">
  1381→                                <div><span class="inline-block w-3 h-0.5 bg-emerald-400 mr-1"></span> Tanpa katalis (Eₐ tinggi)</div>
  1382→                                <div><span class="inline-block w-3 h-0.5 bg-purple-400 mr-1"></span> Dengan katalis (Eₐ lebih rendah)</div>
  1383→                                <div class="pt-1">ΔH negatif → reaksi eksoterm</div>
  1384→                            </div>
  1385→                        </div>
  1386→
  1387→                        <!-- Maxwell-Boltzmann Distribution -->
  1388→                        <div class="glass-panel rounded-xl p-5">
  1389→                            <h3 class="text-sm font-bold text-cyan-400 uppercase tracking-wider mb-3 font-display">Distribusi Maxwell-Boltzmann</h3>
  1390→                            <div class="bg-slate-800/40 rounded-lg p-3">
  1391→                                <svg viewBox="0 0 280 160" class="w-full">
  1392→                                    <!-- Axes -->
  1393→                                    <line x1="20" y1="140" x2="270" y2="140" stroke="#475569" stroke-width="1"/>
  1394→                                    <line x1="20" y1="10" x2="20" y2="140" stroke="#475569" stroke-width="1"/>
  1395→                                    <text x="145" y="155" fill="#94a3b8" font-size="9" text-anchor="middle">Energi Kinetik (E)</text>
  1396→                                    <text x="8" y="75" fill="#94a3b8" font-size="8" transform="rotate(-90 8 75)">Jumlah Partikel</text>
  1397→                                    
  1398→                                    <!-- Low T curve -->
  1399→                                    <path d="M 20 140 Q 50 60, 90 140" stroke="#06b6d4" stroke-width="2" fill="none"/>

[showing lines 1000-1399 of 4452; use offset=1400 with limit to continue reading]