<!DOCTYPE html>
<html lang="id" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anatomi Perselingkuhan di Indonesia - Data & Riset Empiris</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
50: '#f0fdf4',
500: '#10b981',
600: '#059669',
},
dark: {
950: '#090d16',
900: '#0f172a',
800: '#1e293b',
700: '#334155'
}
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.mono {
font-family: 'JetBrains Mono', monospace;
}
.glass-card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-card-active {
background: rgba(30, 41, 59, 0.95);
border: 1px solid rgba(16, 185, 129, 0.4);
box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.15);
}
/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-dark-950 text-slate-100 min-h-screen flex flex-col selection:bg-emerald-500/30 selection:text-emerald-300">
<!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 glass-card border-b border-slate-800/80 px-4 sm:px-8 py-3.5 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold">
<i data-lucide="bar-chart-3" class="w-4 h-4"></i>
</div>
<div>
<h1 class="text-sm sm:text-base font-bold tracking-tight text-white flex items-center gap-2">
Anatomi Perselingkuhan di Indonesia
<span class="text-[10px] font-medium px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Empirical Report</span>
</h1>
<p class="text-[11px] text-slate-400 hidden sm:block">3.654 Data Points • Medsos vs Jurnal Ilmiah vs Pengadilan Agama</p>
</div>
</div>
<!-- Slide Indicators & Controls -->
<div class="flex items-center gap-2">
<div class="hidden md:flex items-center gap-1 bg-slate-900/80 p-1 rounded-lg border border-slate-800" id="slide-dots">
<!-- Generated by JS -->
</div>
<div class="flex items-center gap-1">
<button id="prev-btn" onclick="prevSlide()" class="p-2 rounded-lg bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white transition disabled:opacity-30 disabled:cursor-not-allowed">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</button>
<span id="slide-num" class="text-xs font-mono font-medium text-slate-400 px-2">1 / 6</span>
<button id="next-btn" onclick="nextSlide()" class="p-2 rounded-lg bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white transition disabled:opacity-30 disabled:cursor-not-allowed">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</button>
</div>
</div>
</header>
<!-- Main Slide Container -->
<main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 flex flex-col justify-center">
<!-- ================= SLIDE 1: OVERVIEW & PARADOKS UTAMA ================= -->
<section id="slide-1" class="slide-content space-y-6">
<div class="space-y-2">
<div class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-md border border-emerald-500/20">
<i data-lucide="flame" class="w-3.5 h-3.5"></i> Paradoks Persepsi vs Fakta
</div>
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight">
Apakah Laki-Laki atau Perempuan yang Lebih Sering Selingkuh?
</h2>
<p class="text-slate-400 text-sm sm:text-base max-w-3xl leading-relaxed">
Temuan dari ekstraksi multi-sudut menunjukkan kontras tajam antara apa yang meledak di <span class="text-slate-200 font-medium">Algoritma Medsos</span>, pengakuan di <span class="text-slate-200 font-medium">Survei Perilaku</span>, dan fakta hukum di <span class="text-slate-200 font-medium">Pengadilan Agama</span>.
</p>
</div>
<!-- Quick Metrics Bento Grid -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
<div class="glass-card p-4 rounded-xl border border-slate-800/80 flex flex-col justify-between">
<span class="text-xs font-medium text-slate-400">Total Dataset Scraped</span>
<div class="my-2">
<span class="text-2xl sm:text-3xl font-extrabold text-white mono">3.654</span>
<span class="text-xs text-emerald-400 ml-1 font-medium">data unik</span>
</div>
<span class="text-[11px] text-slate-500">Multi-keyword Twitter/X</span>
</div>
<div class="glass-card p-4 rounded-xl border border-slate-800/80 flex flex-col justify-between">
<span class="text-xs font-medium text-slate-400">Rasio Kasus Riil Medsos</span>
<div class="my-2 flex items-baseline gap-2">
<span class="text-2xl sm:text-3xl font-extrabold text-blue-400 mono">54%</span>
<span class="text-sm font-bold text-slate-400">vs</span>
<span class="text-2xl sm:text-3xl font-extrabold text-rose-400 mono">45%</span>
</div>
<span class="text-[11px] text-slate-500">Pria 212 vs Wanita 177 kasus</span>
</div>
<div class="glass-card p-4 rounded-xl border border-slate-800/80 flex flex-col justify-between">
<span class="text-xs font-medium text-slate-400">Survei Pengakuan Mandiri</span>
<div class="my-2">
<span class="text-2xl sm:text-3xl font-extrabold text-purple-400 mono">~40%</span>
<span class="text-xs text-rose-400 ml-1 font-medium">(Wanita +10%)</span>
</div>
<span class="text-[11px] text-slate-500">JustDating Indonesia & Dating Apps</span>
</div>
<div class="glass-card p-4 rounded-xl border border-slate-800/80 flex flex-col justify-between">
<span class="text-xs font-medium text-slate-400">Kasus Cerai Gugat (PA/MA)</span>
<div class="my-2">
<span class="text-2xl sm:text-3xl font-extrabold text-amber-400 mono">79%</span>
<span class="text-xs text-slate-400 ml-1 font-medium">diajukan istri</span>
</div>
<span class="text-[11px] text-slate-500">Badilag Mahkamah Agung RI</span>
</div>
</div>
<!-- Core Finding Highlights -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="glass-card p-5 rounded-2xl border-l-4 border-l-blue-500">
<div class="flex items-center gap-2 mb-2">
<div class="p-1.5 rounded-lg bg-blue-500/10 text-blue-400"><i data-lucide="megaphone" class="w-4 h-4"></i></div>
<h3 class="text-base font-bold text-white">Kenapa Medsos Tampak Penuh Cowok Selingkuh?</h3>
</div>
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
<strong class="text-white">Reporting Bias & Solidaritas X:</strong> Pihak perempuan memiliki ekosistem spill yang terorganisir untuk menuntut sanksi sosial publik. Kasus perselingkuhan pria mendulang <span class="text-blue-400 font-mono font-medium">68.500+ likes & 12,8M views</span> (3x lipat dibanding kasus wanita).
</p>
</div>
<div class="glass-card p-5 rounded-2xl border-l-4 border-l-rose-500">
<div class="flex items-center gap-2 mb-2">
<div class="p-1.5 rounded-lg bg-rose-500/10 text-rose-400"><i data-lucide="eye-off" class="w-4 h-4"></i></div>
<h3 class="text-base font-bold text-white">Kenapa Algoritma For You Lo Isinya Cewek Selingkuh?</h3>
</div>
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
<strong class="text-white">Threat-Loop Algoritmik:</strong> Konten cewek selingkuh, hipergami, dan ninggalin pasangan memicu alarm kecemasan laki-laki (<span class="italic">anxiety retention</span>). Sistem rekomendasi mengurung audiens cowok dalam rabbit hole serupa demi mengejar dwell-time.
</p>
</div>
</div>
</section>
<!-- ================= SLIDE 2: PERBANDINGAN TIGA LENSA RISET ================= -->
<section id="slide-2" class="slide-content hidden space-y-6">
<div class="space-y-1">
<div class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-blue-400 bg-blue-500/10 px-2.5 py-1 rounded-md border border-blue-500/20">
<i data-lucide="microscope" class="w-3.5 h-3.5"></i> Metodologi & Komparasi Data
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
Tiga Lensa Mengukur Perselingkuhan di Indonesia
</h2>
<p class="text-slate-400 text-sm">Setiap alat ukur memiliki distorsi dan bias pengumpulan data masing-masing.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<!-- Card 1: Medsos -->
<div class="glass-card p-5 rounded-2xl flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-bold uppercase tracking-wider text-sky-400 bg-sky-500/10 px-2 py-0.5 rounded">Lensa 1</span>
<i data-lucide="twitter" class="w-4 h-4 text-sky-400"></i>
</div>
<h3 class="text-lg font-bold text-white">Scraping Medsos (X / Twitter)</h3>
<p class="text-xs text-slate-400 mt-1">Mengukur <strong class="text-slate-200">Spill Culture & Sanksi Sosial</strong></p>
<div class="my-4 h-36 flex items-center justify-center">
<canvas id="chartMedsos"></canvas>
</div>
<ul class="text-xs text-slate-300 space-y-1.5">
<li class="flex items-start gap-1.5"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400 mt-0.5 shrink-0"></i> <span>Pria: 54,2% (212 kasus terlacak)</span></li>
<li class="flex items-start gap-1.5"><i data-lucide="check" class="w-3.5 h-3.5 text-rose-400 mt-0.5 shrink-0"></i> <span>Wanita: 45,3% (177 kasus terlacak)</span></li>
<li class="flex items-start gap-1.5 text-slate-400"><i data-lucide="info" class="w-3.5 h-3.5 text-slate-500 mt-0.5 shrink-0"></i> <span>Bias: Laki-laki jarang curhat terbuka karena faktor gengsi/maskulinitas.</span></li>
</ul>
</div>
</div>
<!-- Card 2: Survei Mandiri -->
<div class="glass-card p-5 rounded-2xl flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-bold uppercase tracking-wider text-purple-400 bg-purple-500/10 px-2 py-0.5 rounded">Lensa 2</span>
<i data-lucide="clipboard-check" class="w-4 h-4 text-purple-400"></i>
</div>
<h3 class="text-lg font-bold text-white">Survei Perilaku (JustDating)</h3>
<p class="text-xs text-slate-400 mt-1">Mengukur <strong class="text-slate-200">Pengakuan Pribadi Responden</strong></p>
<div class="my-4 h-36 flex items-center justify-center">
<canvas id="chartSurvei"></canvas>
</div>
<ul class="text-xs text-slate-300 space-y-1.5">
<li class="flex items-start gap-1.5"><i data-lucide="check" class="w-3.5 h-3.5 text-purple-400 mt-0.5 shrink-0"></i> <span>40% responden Indonesia pernah selingkuh</span></li>
<li class="flex items-start gap-1.5"><i data-lucide="check" class="w-3.5 h-3.5 text-rose-400 mt-0.5 shrink-0"></i> <span>Wanita tercatat 10% lebih tinggi</span></li>
<li class="flex items-start gap-1.5 text-slate-400"><i data-lucide="info" class="w-3.5 h-3.5 text-slate-500 mt-0.5 shrink-0"></i> <span>Beda Definisi: Cewek anggap chat rahasia = selingkuh, cowok ukur dari kontak fisik.</span></li>
</ul>
</div>
</div>
<!-- Card 3: Pengadilan Agama -->
<div class="glass-card p-5 rounded-2xl flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-bold uppercase tracking-wider text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded">Lensa 3</span>
<i data-lucide="scale" class="w-4 h-4 text-amber-400"></i>
</div>
<h3 class="text-lg font-bold text-white">Mahkamah Agung (Putusan MA)</h3>
<p class="text-xs text-slate-400 mt-1">Mengukur <strong class="text-slate-200">Legalitas & Gugatan Cerai Resmi</strong></p>
<div class="my-4 h-36 flex items-center justify-center">
<canvas id="chartHukum"></canvas>
</div>
<ul class="text-xs text-slate-300 space-y-1.5">
<li class="flex items-start gap-1.5"><i data-lucide="check" class="w-3.5 h-3.5 text-amber-400 mt-0.5 shrink-0"></i> <span>79% Cerai Gugat (Diajukan pihak Istri)</span></li>
<li class="flex items-start gap-1.5"><i data-lucide="check" class="w-3.5 h-3.5 text-slate-300 mt-0.5 shrink-0"></i> <span>21% Cerai Talak (Diajukan pihak Suami)</span></li>
<li class="flex items-start gap-1.5 text-slate-400"><i data-lucide="info" class="w-3.5 h-3.5 text-slate-500 mt-0.5 shrink-0"></i> <span>Pemicu utama: Perselisihan tak berujung akibat perselingkuhan & nafkah.</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- ================= SLIDE 3: SETTING & MODUS LAPANGAN ================= -->
<section id="slide-3" class="slide-content hidden space-y-6">
<div class="space-y-1">
<div class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-purple-400 bg-purple-500/10 px-2.5 py-1 rounded-md border border-purple-500/20">
<i data-lucide="map-pin" class="w-3.5 h-3.5"></i> Pola Kejadian Nyata
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
Di Mana & Kapan Perselingkuhan Paling Rawan Terjadi?
</h2>
<p class="text-slate-400 text-sm">Pembedahan empiris setting lokasi dan momen krisis dari ratusan kasus nyata.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-5">
<!-- Interactive Bar Chart -->
<div class="lg:col-span-7 glass-card p-5 rounded-2xl flex flex-col justify-between">
<h3 class="text-sm font-bold text-white mb-2 flex items-center justify-between">
<span>Distribusi Setting Kasus (Pria vs Wanita)</span>
<span class="text-xs text-slate-400 font-normal">Sample 391 Kasus Spesifik</span>
</h3>
<div class="h-64 sm:h-72">
<canvas id="chartSettingBar"></canvas>
</div>
</div>
<!-- Detail Insights -->
<div class="lg:col-span-5 space-y-3 flex flex-col justify-between">
<div class="glass-card p-4 rounded-xl border-l-4 border-l-sky-500">
<h4 class="text-sm font-bold text-white flex items-center gap-1.5">
<i data-lucide="briefcase" class="w-4 h-4 text-sky-400"></i> Lingkungan Kantor / Teman Kerja
</h4>
<p class="text-xs text-slate-300 mt-1">
Pria mendominasi kasus di tempat kerja (29 vs 9 kasus). Polanya: atasan-bawahan, intensitas lembur, dinas luar kota, dan sesama rekan kerja yang sudah berpasangan.
</p>
</div>
<div class="glass-card p-4 rounded-xl border-l-4 border-l-rose-500">
<h4 class="text-sm font-bold text-white flex items-center gap-1.5">
<i data-lucide="hotel" class="w-4 h-4 text-rose-400"></i> Penggerebekan Fisik (Hotel Melati / Kosan)
</h4>
<p class="text-xs text-slate-300 mt-1">
Kasus istri selingkuh (69 kasus) paling sering meledak ke publik melalui aksi gerebek suami bersama warga/aparat desa di hotel atau kamar kos.
</p>
</div>
<div class="glass-card p-4 rounded-xl border-l-4 border-l-amber-500">
<h4 class="text-sm font-bold text-white flex items-center gap-1.5">
<i data-lucide="baby" class="w-4 h-4 text-amber-400"></i> Momen Paling Dihujat: Hamil & Pasca Lahiran
</h4>
<p class="text-xs text-slate-300 mt-1">
Kasus pria selingkuh saat istri hamil besar atau pasca caesar (31 kasus) konsisten memicu sentimen paling negatif dan gelombang boikot sosial netizen.
</p>
</div>
</div>
</div>
</section>
<!-- ================= SLIDE 4: ANATOMI MICROCHEATING & DIGITAL ================= -->
<section id="slide-4" class="slide-content hidden space-y-6">
<div class="space-y-1">
<div class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-rose-400 bg-rose-500/10 px-2.5 py-1 rounded-md border border-rose-500/20">
<i data-lucide="smartphone" class="w-3.5 h-3.5"></i> Deteksi Jejak Digital
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
Anatomi Microcheating & Investigasi HP
</h2>
<p class="text-slate-400 text-sm">Bagaimana perselingkuhan modern disamarkan dan bagaimana jejaknya terbongkar.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Step 1: Flirting / Microcheating -->
<div class="glass-card p-5 rounded-2xl flex flex-col justify-between">
<div>
<div class="w-10 h-10 rounded-xl bg-rose-500/10 border border-rose-500/20 flex items-center justify-center text-rose-400 mb-4">
<i data-lucide="message-circle-heart" class="w-5 h-5"></i>
</div>
<h3 class="text-base font-bold text-white">1. Microcheating & Soft Flirting</h3>
<p class="text-xs text-slate-400 mt-1 mb-3">89 tweet diskusi & curhat</p>
<ul class="text-xs text-slate-300 space-y-2">
<li class="flex items-start gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-rose-400 mt-1.5"></span>
<span>Bales story Instagram/TikTok dengan pujian terselubung & emoji intim.</span>
</li>
<li class="flex items-start gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-rose-400 mt-1.5"></span>
<span>Curhat masalah rumah tangga/pasangan ke lawan jenis ("temen cerita").</span>
</li>
<li class="flex items-start gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-rose-400 mt-1.5"></span>
<span>Sengaja menyembunyikan status hubungan agar terkesan <em>single/available</em>.</span>
</li>
</ul>
</div>
</div>
<!-- Step 2: Modus Sembunyi -->
<div class="glass-card p-5 rounded-2xl flex flex-col justify-between">
<div>
<div class="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center text-amber-400 mb-4">
<i data-lucide="shield-alert" class="w-5 h-5"></i>
</div>
<h3 class="text-base font-bold text-white">2. Manuver "Biar Ga Ketahuan"</h3>
<p class="text-xs text-slate-400 mt-1 mb-3">157 tweet trik & kamuflase</p>
<ul class="text-xs text-slate-300 space-y-2">
<li class="flex items-start gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 mt-1.5"></span>
<span>Ganti nama kontak: disamarkan jadi "Bengkel", "Tukang AC", atau nama teman pria.</span>
</li>
<li class="flex items-start gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 mt-1.5"></span>
<span>Fitur Chat Lock, arsip WhatsApp, atau aplikasi fake calculator.</span>
</li>
<li class="flex items-start gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 mt-1.5"></span>
<span>Kirim pesan lewat <em>catatan transaksi GoPay / ShopeePay</em> transfer Rp1.</span>
</li>
</ul>
</div>
</div>
<!-- Step 3: Titik Jebol -->
<div class="glass-card p-5 rounded-2xl flex flex-col justify-between">
<div>
<div class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 mb-4">
<i data-lucide="search-check" class="w-5 h-5"></i>
</div>
<h3 class="text-base font-bold text-white">3. Titik Jebol: Cek Galeri & Audit HP</h3>
<p class="text-xs text-slate-400 mt-1 mb-3">213 tweet investigasi pasangan</p>
<ul class="text-xs text-slate-300 space-y-2">
<li class="flex items-start gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 mt-1.5"></span>
<span>Folder <em>Recently Deleted</em> galeri foto & video yang lupa dikosongkan.</span>
</li>
<li class="flex items-start gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 mt-1.5"></span>
<span>Audit tag nomor telepon di Getcontact (muncul tag panggilan sayang).</span>
</li>
<li class="flex items-start gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 mt-1.5"></span>
<span>Riwayat rute ojek online (titik jemput hotel / kosan yang mencurigakan).</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ================= SLIDE 5: DIMENSI EKONOMI & REALITAS PERCERAIAN ================= -->
<section id="slide-5" class="slide-content hidden space-y-6">
<div class="space-y-1">
<div class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded-md border border-amber-500/20">
<i data-lucide="coins" class="w-3.5 h-3.5"></i> Faktor Finansial
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
Faktor Ekonomi: Pembiayaan Selingkuhan vs Resentment
</h2>
<p class="text-slate-400 text-sm">251 data analisis korelasi uang, nafkah, dan alasan resmi di meja pengadilan.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<!-- Pria Econ -->
<div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-xl bg-blue-500/10 text-blue-400"><i data-lucide="wallet" class="w-5 h-5"></i></div>
<div>
<h3 class="text-base font-bold text-white">Sisi Pria: Royal ke Pihak Ketiga</h3>
<p class="text-xs text-slate-400">Penelantaran Finansial Keluarga</p>
</div>
</div>
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
Pola paling umum yang memicu kemarahan publik adalah suami yang beralasan <strong class="text-white">gaji pas-pasan untuk nafkah anak-istri</strong>, namun di balik layar royal membiayai sewa kamar kos, gaya hidup, atau transferan rutin ke pihak ketiga.
</p>
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800 text-xs text-slate-400 font-mono">
"Nafkah anak 70rb/hari dihitung-hitung, tapi mutasi transfer ke selingkuhan tembus jutaan."
</div>
</div>
<!-- Wanita Econ -->
<div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-xl bg-rose-500/10 text-rose-400"><i data-lucide="trending-up" class="w-5 h-5"></i></div>
<div>
<h3 class="text-base font-bold text-white">Sisi Wanita: Beban Ganda & Hipergami</h3>
<p class="text-xs text-slate-400">Resentment & Pencarian Kemapanan</p>
</div>
</div>
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
Pemicu ekonomi bagi istri/cewek umumnya berakar dari <strong class="text-white">beban ganda</strong> (suami tidak berpenghasilan/pasif sehingga istri lelah menanggung nafkah) atau dorongan mencari pasangan baru yang secara finansial dan masa depan dinilai jauh lebih mapan.
</p>
<div class="p-3 rounded-xl bg-slate-900/60 border border-slate-800 text-xs text-slate-400 font-mono">
"Istri banting tulang kerja, suami ongkang-ongkang kaki. Resentment numpuk lalu lari ke rekan kerja."
</div>
</div>
</div>
<!-- Legal Reality Note -->
<div class="glass-card p-5 rounded-2xl border border-emerald-500/20 bg-emerald-950/10">
<h4 class="text-sm font-bold text-emerald-400 flex items-center gap-2 mb-1.5">
<i data-lucide="file-text" class="w-4 h-4"></i> Realitas Hukum di Balik Berkas Gugatan Cerai
</h4>
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
Di berkas resmi Pengadilan Agama, <em>Faktor Ekonomi</em> dan <em>Perselisihan Terus-Menerus</em> tercatat sebagai alasan utama. Praktisi hukum mengakui bahwa perselingkuhan kerap menjadi akar masalahnya, namun penggugat sengaja memilih dalil ekonomi/nafkah karena <strong>beban pembuktiannya jauh lebih ringan dan putusan cerai keluar lebih cepat</strong> dibanding membuktikan pasal perzinaan.
</p>
</div>
</section>
<!-- ================= SLIDE 6: ARSITEKTUR TOOLING CROSS-PLATFORM ================= -->
<section id="slide-6" class="slide-content hidden space-y-6">
<div class="space-y-1">
<div class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-md border border-emerald-500/20">
<i data-lucide="terminal" class="w-3.5 h-3.5"></i> Engineering & Tooling
</div>
<h2 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
Arsitektur Scraper Lintas Platform di Zerodays
</h2>
<p class="text-slate-400 text-sm">Tooling modular siap pakai untuk riset sosial dan empiris multi-source.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Tool 1 -->
<div class="glass-card p-4 rounded-xl border border-slate-800 flex flex-col justify-between">
<div>
<div class="text-sky-400 font-mono font-bold text-sm mb-1">x-scrape</div>
<div class="text-xs text-slate-400 mb-2">Twitter/X Multi-Account</div>
<p class="text-[11px] text-slate-300">
Rotasi 5 akun cookie twscrape otomatis saat kena rate-limit 15 menit. Zero banned account.
</p>
</div>
<div class="mt-3 py-1 px-2 rounded bg-slate-900 border border-slate-800 text-[10px] font-mono text-emerald-400">
accounts.db (5 pool)
</div>
</div>
<!-- Tool 2 -->
<div class="glass-card p-4 rounded-xl border border-slate-800 flex flex-col justify-between">
<div>
<div class="text-amber-400 font-mono font-bold text-sm mb-1">ma-scrape</div>
<div class="text-xs text-slate-400 mb-2">Putusan Mahkamah Agung</div>
<p class="text-[11px] text-slate-300">
Bypass Cloudflare WAF 403 via indexer SearxNG homelab. Ekstraksi nomor perkara & putusan cerai.
</p>
</div>
<div class="mt-3 py-1 px-2 rounded bg-slate-900 border border-slate-800 text-[10px] font-mono text-emerald-400">
searxng.fakhrads.dev
</div>
</div>
<!-- Tool 3 -->
<div class="glass-card p-4 rounded-xl border border-slate-800 flex flex-col justify-between">
<div>
<div class="text-purple-400 font-mono font-bold text-sm mb-1">social_forum</div>
<div class="text-xs text-slate-400 mb-2">Quora ID & Reddit</div>
<p class="text-[11px] text-slate-300">
Scraping curhat mendalam tanpa bias likes medsos. Mengurai motif psikologis murni pelaku.
</p>
</div>
<div class="mt-3 py-1 px-2 rounded bg-slate-900 border border-slate-800 text-[10px] font-mono text-emerald-400">
r/indonesia & Quora
</div>
</div>
<!-- Tool 4 -->
<div class="glass-card p-4 rounded-xl border border-slate-800 flex flex-col justify-between">
<div>
<div class="text-emerald-400 font-mono font-bold text-sm mb-1">cross-scrape</div>
<div class="text-xs text-slate-400 mb-2">Master Orchestrator</div>
<p class="text-[11px] text-slate-300">
Satu CLI terpadu yang memanggil semua scraper & menormalisasi output ke skema JSON seragam.
</p>
</div>
<div class="mt-3 py-1 px-2 rounded bg-slate-900 border border-slate-800 text-[10px] font-mono text-emerald-400">
cross-platform-scraping
</div>
</div>
</div>
<!-- Live Terminal Preview Card -->
<div class="glass-card p-5 rounded-2xl font-mono text-xs text-slate-300 space-y-2 border border-slate-800 bg-slate-950/80">
<div class="flex items-center justify-between text-slate-500 pb-2 border-b border-slate-800">
<span>bash — zerodays server</span>
<span class="text-emerald-400 font-sans text-[11px]">Skill Hermes: cross-platform-scraping</span>
</div>
<p><span class="text-emerald-400">fakhrads@zerodays</span>:<span class="text-sky-400">~</span>$ cross-scrape --query "microcheating" --platform all --limit 20 -o /tmp/results.json</p>
<p class="text-slate-400">[*] Scraping X (twscrape pool)... Done (25 items)</p>
<p class="text-slate-400">[*] Scraping Putusan Mahkamah Agung... Done (20 items)</p>
<p class="text-slate-400">[*] Scraping Forums (Quora/Reddit)... Done (20 items)</p>
<p class="text-emerald-400">[+] Total items collected: 65 (Clean schema exported)</p>
</div>
</section>
</main>
<!-- Footer Navigation Info -->
<footer class="glass-card border-t border-slate-800/80 px-4 py-3 text-center text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-2">
<div>Gunakan tombol panah keyboard <kbd class="px-1.5 py-0.5 rounded bg-slate-800 border border-slate-700 text-slate-300">←</kbd> <kbd class="px-1.5 py-0.5 rounded bg-slate-800 border border-slate-700 text-slate-300">→</kbd> untuk navigasi slide</div>
<div class="text-[11px] text-slate-400">Dibuat oleh Vania • Homelab Zerodays (Debian 13)</div>
</footer>
<script>
// Lucide Icons init
lucide.createIcons();
let currentSlide = 1;
const totalSlides = 6;
// Slide titles for indicator dots
const slideTitles = [
"Paradoks Persepsi",
"Tiga Lensa Riset",
"Setting Lapangan",
"Microcheating Digital",
"Dimensi Finansial",
"Arsitektur Tooling"
];
function buildDots() {
const container = document.getElementById('slide-dots');
container.innerHTML = '';
for (let i = 1; i <= totalSlides; i++) {
const btn = document.createElement('button');
btn.className = `px-2.5 py-1 text-xs rounded font-medium transition ${
i === currentSlide
? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
}`;
btn.textContent = `${i}. ${slideTitles[i-1]}`;
btn.onclick = () => goToSlide(i);
container.appendChild(btn);
}
}
function updateView() {
for (let i = 1; i <= totalSlides; i++) {
const el = document.getElementById(`slide-${i}`);
if (el) {
if (i === currentSlide) {
el.classList.remove('hidden');
} else {
el.classList.add('hidden');
}
}
}
document.getElementById('slide-num').textContent = `${currentSlide} / ${totalSlides}`;
document.getElementById('prev-btn').disabled = (currentSlide === 1);
document.getElementById('next-btn').disabled = (currentSlide === totalSlides);
buildDots();
lucide.createIcons();
// Trigger chart renders on slide switch
if (currentSlide === 2) renderSlide2Charts();
if (currentSlide === 3) renderSlide3Charts();
}
function nextSlide() {
if (currentSlide < totalSlides) {
currentSlide++;
updateView();
}
}
function prevSlide() {
if (currentSlide > 1) {
currentSlide--;
updateView();
}
}
function goToSlide(n) {
if (n >= 1 && n <= totalSlides) {
currentSlide = n;
updateView();
}
}
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') {
nextSlide();
} else if (e.key === 'ArrowLeft') {
prevSlide();
}
});
// Chart.js instances
let chartMedsosInstance = null;
let chartSurveiInstance = null;
let chartHukumInstance = null;
let chartBarInstance = null;
function renderSlide2Charts() {
// 1. Chart Medsos Donut
const ctxMedsos = document.getElementById('chartMedsos');
if (ctxMedsos && !chartMedsosInstance) {
chartMedsosInstance = new Chart(ctxMedsos, {
type: 'doughnut',
data: {
labels: ['Pria (54.2%)', 'Wanita (45.3%)'],
datasets: [{
data: [212, 177],
backgroundColor: ['#38bdf8', '#fb7185'],
borderColor: '#0f172a',
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { color: '#94a3b8', font: { size: 10 } } }
},
cutout: '70%'
}
});
}
// 2. Chart Survei Donut
const ctxSurvei = document.getElementById('chartSurvei');
if (ctxSurvei && !chartSurveiInstance) {
chartSurveiInstance = new Chart(ctxSurvei, {
type: 'doughnut',
data: {
labels: ['Wanita (Pengakuan)', 'Pria (Pengakuan)'],
datasets: [{
data: [55, 45],
backgroundColor: ['#a855f7', '#64748b'],
borderColor: '#0f172a',
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { color: '#94a3b8', font: { size: 10 } } }
},
cutout: '70%'
}
});
}
// 3. Chart Hukum Donut
const ctxHukum = document.getElementById('chartHukum');
if (ctxHukum && !chartHukumInstance) {
chartHukumInstance = new Chart(ctxHukum, {
type: 'doughnut',
data: {
labels: ['Cerai Gugat (Istri 79%)', 'Cerai Talak (Suami 21%)'],
datasets: [{
data: [79, 21],
backgroundColor: ['#f59e0b', '#334155'],
borderColor: '#0f172a',
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { color: '#94a3b8', font: { size: 10 } } }
},
cutout: '70%'
}
});
}
}
function renderSlide3Charts() {
const ctxBar = document.getElementById('chartSettingBar');
if (ctxBar && !chartBarInstance) {
chartBarInstance = new Chart(ctxBar, {
type: 'bar',
data: {
labels: [
'Lingkungan Kantor',
'Gerebek Hotel/Kosan',
'Momen Hamil / Sakit',
'LDR / Luar Kota',
'Bukti Chat / Digital'
],
datasets: [
{
label: 'Pelaku Pria / Suami',
data: [29, 34, 31, 23, 98],
backgroundColor: 'rgba(56, 189, 248, 0.85)',
borderRadius: 6
},
{
label: 'Pelaku Wanita / Istri',
data: [9, 69, 6, 21, 62],
backgroundColor: 'rgba(251, 113, 133, 0.85)',
borderRadius: 6
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: { color: 'rgba(255, 255, 255, 0.05)' },
ticks: { color: '#94a3b8', font: { size: 10 } }
},
y: {
grid: { color: 'rgba(255, 255, 255, 0.05)' },
ticks: { color: '#94a3b8', font: { size: 10 } }
}
},
plugins: {
legend: {
position: 'top',
labels: { color: '#e2e8f0', font: { size: 11 } }
}
}
}
});
}
}
// Init first view
updateView();
</script>
</body>
</html>
Scan with iPhone Camera or Android QR scanner to preview natively on your device.