tes

```html

<!DOCTYPE html>

<head>

<title>Ringkasan Bab 3 - Pendidikan Agama Islam</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

arabic: ['Amiri', 'serif'],

},

colors: {

brand: {

50: '#ecfdf5',

100: '#d1fae5',

500: '#10b981',

600: '#059669',

700: '#047857',

900: '#064e3b',

}

</script>

<style>

body {

background-color: #f3f4f6;

scroll-behavior: smooth;

}

.glass-card {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.2);

}

.arabic-text {

direction: rtl;

line-height: 2.5;

}

/* Custom Scrollbar */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #f1f1f1;

}

::-webkit-scrollbar-thumb {

background: #059669;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: #047857;

}

</style>

</head>

</div>

Rangkuman Materi PAI Kelas XI

</span>

Menghindari Perkelahian Pelajar, Minuman Keras, dan Narkoba

</h1>

Membangun generasi muda yang berakhlak mulia, sehat jasmani dan rohani, serta menjauhi perilaku menyimpang sesuai dengan syariat Islam.

</p>

</div>

</header>

Materi ini membahas tiga bentuk kenakalan atau perilaku menyimpang yang kerap terjadi di kalangan remaja. Mari kita pelajari definisi, faktor penyebab, pandangan Islam, serta cara pencegahannya agar kita dapat menjadi pelajar yang membawa kedamaian (<i class="italic text-brand-700 font-medium">rahmatan lil 'alamin</i>).

</p>

</div>

</div>

<h2 class="text-2xl font-bold text-gray-800">1. Perkelahian Antarpelajar</h2>

</div>

<p><strong class="text-gray-800">Definisi:</strong> Tindakan kekerasan yang dilakukan oleh sekelompok pelajar terhadap kelompok lain untuk menyingkirkan atau membuat lawan tidak berdaya. Tindakan ini digolongkan sebagai kenakalan remaja (<i class="italic">juvenile delinquency</i>).</p>

<h3 class="font-semibold text-gray-800 mb-3"><i class="fa-solid fa-list-ul text-brand-500 mr-2"></i>Faktor Penyebab:</h3>

<li class="flex items-start gap-2"><i class="fa-solid fa-caret-right text-brand-500 mt-1"></i> <span><strong>Rational Choice:</strong> Pilihan dan kemauan sendiri.</span></li>

<li class="flex items-start gap-2"><i class="fa-solid fa-caret-right text-brand-500 mt-1"></i> <span><strong>Social Disorganization:</strong> Lingkungan kurang baik/kurang pengawasan.</span></li>

<li class="flex items-start gap-2"><i class="fa-solid fa-caret-right text-brand-500 mt-1"></i> <span><strong>Strain:</strong> Tekanan dari masyarakat/kesenjangan.</span></li>

<li class="flex items-start gap-2"><i class="fa-solid fa-caret-right text-brand-500 mt-1"></i> <span><strong>Differential Association:</strong> Salah pergaulan.</span></li>

<li class="flex items-start gap-2"><i class="fa-solid fa-caret-right text-brand-500 mt-1"></i> <span><strong>Labeling:</strong> Terbiasa dicap buruk.</span></li>

<li class="flex items-start gap-2"><i class="fa-solid fa-caret-right text-brand-500 mt-1"></i> <span><strong>Male Phenomenon:</strong> Faktor ego maskulinitas/gender laki-laki.</span></li>

</ul>

</div>

<h3 class="font-semibold text-brand-900 mb-2"><i class="fa-solid fa-star-and-crescent text-brand-600 mr-2"></i>Pandangan Islam</h3>

<p class="text-brand-800">Islam sangat melarang tindakan kekerasan atau anarkisme. Sebagai pelajar muslim, kita harus ingat bahwa Islam adalah agama yang damai, santun, dan membawa rahmat. Islam datang dengan solusi, bukan untuk menambah masalah.</p>

</div>

</section>

</div>

<h2 class="text-2xl font-bold text-gray-800">2. Minuman Keras (Miras) / Khamr</h2>

</div>

<p><strong class="text-gray-800">Definisi Khamr:</strong> Segala jenis minuman, makanan, atau zat yang dapat memabukkan dan menghilangkan kesadaran/merusak akal sehat.</p>

يَأَيُّهَا الَّذِينَ آمَنُوا إِنَّمَا الْخَمْرُ وَالْمَيْسِرُ وَالْأَنْصَابُ وَالْأَزْلَامُ رِجْسٌ مِنْ عَمَلِ الشَّيْطَانِ فَاجْتَنِبُوهُ لَعَلَّكُمْ تُفْلِحُوْنَ

</p>

<p class="text-sm text-gray-500 italic mb-2">Q.S. al-Maidah/5: 90</p>

<p class="text-gray-700">"Wahai orang-orang yang beriman! Sesungguhnya minuman keras, berjudi, (berkurban untuk) berhala, dan mengundi nasib dengan anak panah, adalah perbuatan keji dan termasuk perbuatan setan. Maka jauhilah (perbuatan-perbuatan) itu, agar kamu beruntung."</p>

</div>

<p><strong class="text-gray-800">Dampak Negatif:</strong> Merusak saraf, kesehatan, dan mental. Ia menjadi sumber keburukan karena setan menggunakannya untuk memicu permusuhan dan menghalangi manusia dari mengingat Allah Swt. dan mendirikan shalat.</p>

</div>

</section>

</div>

<h2 class="text-2xl font-bold text-gray-800">3. Narkoba</h2>

</div>

<h4 class="font-bold text-gray-800 mb-2 border-b pb-2">Narkotika</h4>

<p class="text-sm">Zat yang menurunkan kesadaran & menimbulkan ketergantungan (contoh: morfin, heroin/putaw, ganja, kokain).</p>

</div>

<h4 class="font-bold text-gray-800 mb-2 border-b pb-2">Psikotropika</h4>

<p class="text-sm">Zat yang memengaruhi susunan saraf pusat & aktivitas mental (contoh: sabu, obat penenang, ekstasi).</p>

</div>

<h4 class="font-bold text-gray-800 mb-2 border-b pb-2">Zat Adiktif</h4>

<p class="text-sm">Bahan kimia yang menyebabkan ketergantungan (contoh: nikotin dalam rokok, alkohol).</p>

</div>

<h3 class="font-semibold text-brand-900 mb-2"><i class="fa-solid fa-scale-balanced text-brand-600 mr-2"></i>Pandangan Hukum Islam</h3>

<p class="text-brand-800">Meski istilah "narkoba" tidak ada di dalam Al-Qur'an, hukumnya ditetapkan melalui <strong>Qiyas</strong> (dianalogikan). Narkoba disamakan dengan khamr karena memiliki <em>illat</em> (sebab hukum) yang sama: memabukkan, merusak akal sehat, dan membahayakan tubuh. Oleh karena itu, <strong>hukumnya HARAM</strong>.</p>

</div>

<div>

<h3 class="font-semibold text-gray-800 mb-3"><i class="fa-solid fa-shield-halved text-brand-500 mr-2"></i>Langkah Pencegahan:</h3>

<li class="flex items-center gap-3"><div class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs"><i class="fa-solid fa-check"></i></div> Mensyukuri hidup dan fokus mengembangkan bakat.</li>

<li class="flex items-center gap-3"><div class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs"><i class="fa-solid fa-check"></i></div> Berani berkata "TIDAK" pada ajakan teman yang buruk.</li>

<li class="flex items-center gap-3"><div class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs"><i class="fa-solid fa-check"></i></div> Menghindari rokok dan miras sebagai "pintu masuk" narkoba.</li>

<li class="flex items-center gap-3"><div class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs"><i class="fa-solid fa-check"></i></div> Menciptakan lingkungan keluarga dan sekolah yang positif.</li>

</ul>

</div>

</section>

<h2 class="text-2xl font-bold text-gray-800">Ruang Diskusi & Komentar</h2>

</div>

<label for="nama" class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap</label>

</div>

<label for="komentarTeks" class="block text-sm font-medium text-gray-700 mb-1">Komentar / Tanggapan</label>

</div>

<i class="fa-regular fa-paper-plane"></i> Kirim Komentar

</button>

</form>

A

</div>

<div>

<h4 class="font-bold text-gray-800">Ahmad Siswa XI</h4>

<p class="text-gray-600 text-sm">Materi yang sangat bermanfaat. Memang benar, bergaul dengan lingkungan yang salah bisa menjadi awal terjerumusnya kita ke hal-hal negatif seperti miras. Terima kasih rangkumannya!</p>

</div>

S

</div>

<div>

<h4 class="font-bold text-gray-800">Siti Aminah</h4>

<p class="text-gray-600 text-sm">Penjelasan tentang qiyas untuk hukum narkoba sangat jelas. Sekarang saya paham kenapa narkoba itu haram meskipun tidak disebutkan langsung di Al-Qur'an.</p>

</div>

</section>

</main>

<p class="mb-2">Bahan Ajar Pendidikan Agama Islam & Budi Pekerti Kelas XI</p>

</footer>

document.addEventListener('DOMContentLoaded', () => {

const form = document.getElementById('commentForm');

const commentList = document.getElementById('commentList');

const notification = document.getElementById('notification');

// Helper function to show notification instead of alert()

function showNotification(message, type = 'success') {

notification.textContent = message;

notification.className = `mb-4 p-3 rounded-lg text-sm text-white font-medium transition-all duration-300 block ${type === 'success' ? 'bg-green-500' : 'bg-red-500'}`;

// Hide after 3 seconds

setTimeout(() => {

notification.classList.add('hidden');

notification.classList.remove('block');

}, 3000);

}

form.addEventListener('submit', function(e) {

e.preventDefault(); // Prevent page reload

// Get values

const nameInput = document.getElementById('nama').value.trim();

const textInput = document.getElementById('komentarTeks').value.trim();

if (nameInput === '' || textInput === '') {

showNotification('Mohon isi nama dan komentar Anda.', 'error');

return;

}

// Get initial for avatar

const initial = nameInput.charAt(0).toUpperCase();

// Generate random colors for avatar background

const colors = ['bg-indigo-100 text-indigo-600', 'bg-teal-100 text-teal-600', 'bg-orange-100 text-orange-600', 'bg-brand-100 text-brand-600'];

const randomColor = colors[Math.floor(Math.random() * colors.length)];

// Create new comment element

const newComment = document.createElement('div');

newComment.className = 'bg-white p-4 rounded-xl border border-gray-100 shadow-sm flex gap-4 animate-fade-in-down';

newComment.innerHTML = `

<div class="w-10 h-10 rounded-full ${randomColor} flex-shrink-0 flex i

tes

tes

Ditulis Oleh