Index.html

<!DOCTYPE html>

<head>

<title>Deteksi Armedia Karawang — Future Lokal</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

'sans': ['Inter', 'system-ui', '-apple-system', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],

'display': ['"Space Grotesk"', 'Inter', 'system-ui', 'sans-serif'],

colors: {

'karawang-bg': '#081121',

'karawang-bg2': '#0a1222',

'karawang-surface': '#111c32',

'karawang-glass': 'rgba(19,30,52,0.72)',

'padi': '#00e676',

'padi-dim': '#2dd47a',

'citarum': '#00b8ff',

'citarum-dim': '#0096e6',

'pangkal': '#ffcc33',

'ink-light': '#d4dde9',

'ink-mute': '#8b98ab',

'line-glass': 'rgba(255,255,255,0.09)',

boxShadow: {

'neon-cyan': '0 0 28px rgba(0,184,255,0.18), inset 0 1px 0 rgba(255,255,255,0.06)',

'neon-green': '0 0 28px rgba(0,230,118,0.14), inset 0 1px 0 rgba(255,255,255,0.06)',

'lift': '0 18px 50px rgba(0,8,24,0.55)',

}

</script>

:root{

--bg: #081121;

--bg2: #0a1222;

--padi: #00e676;

--citarum: #00b8ff;

--gold: #ffcc33;

}

body{

background-color:#081121;

color:#d4dde9;

-webkit-font-smoothing:antialiased;

font-family: Inter, system-ui, sans-serif;

}

/* Grid background */

.future-grid{

background-color:#081121;

background-image:

linear-gradient(rgba(0,184,255,0.045) 1px, transparent 1px),

linear-gradient(90deg, rgba(0,184,255,0.032) 1px, transparent 1px),

radial-gradient(1200px 700px at 70% -10%, rgba(0,184,255,0.065), transparent 60%),

radial-gradient(900px 600px at -10% 20%, rgba(0,230,118,0.038), transparent 55%);

background-size: 48px 48px, 48px 48px, auto, auto;

}

/* Batik Karawang subtle pattern - padi & goyang karawang wave */

.batik-krw {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='0.9'%3E%3C!-- Padi stalk --%3E%3Cpath d='M28 92 C28 74 28 60 28 44'/%3E%3Cpath d='M28 78 C22 75 18 71 18 66'/%3E%3Cpath d='M28 78 C34 75 38 71 38 66'/%3E%3Cpath d='M28 66 C22 63 18 59 18 54'/%3E%3Cpath d='M28 66 C34 63 38 59 38 54'/%3E%3Cpath d='M28 54 C22 51 20 47 20 43'/%3E%3Cpath d='M28 54 C34 51 36 47 36 43'/%3E%3C!-- Goyang Karawang wave --%3E%3Cpath d='M74 70 C88 54 104 86 118 70 C132 54 148 86 162 70 C176 54 188 86 202 70' stroke-width='1.1'/%3E%3Cpath d='M74 82 C88 66 104 98 118 82 C132 66 148 98 162 82 C176 66 188 98 202 82' stroke-width='0.7' opacity='0.7'/%3E%3C/g%3E%3C/svg%3E");

background-repeat: repeat;

}

.wrap{ max-width:1180px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px;}

@media (max-width: 390px){ .wrap{ padding-left:16px; padding-right:16px;} }

.glass{

background: linear-gradient(180deg, rgba(26,39,65,0.78), rgba(16,26,46,0.68));

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

backdrop-filter: blur(14px);

-webkit-backdrop-filter: blur(14px);

}

.glass-strong{

background: linear-gradient(180deg, rgba(22,34,58,0.92), rgba(14,23,41,0.88));

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

backdrop-filter: blur(18px);

-webkit-backdrop-filter: blur(18px);

}

.display { font-family: "Space Grotesk", Inter, system-ui, sans-serif; }

.h-eyebrow { font-size: 11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }

.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}

/* Neon borders */

.neon-cyan-ring{ box-shadow: 0 0 0 1px rgba(0,184,255,0.38), 0 0 30px rgba(0,184,255,0.13), inset 0 1px 0 rgba(255,255,255,0.05); }

.neon-green-ring{ box-shadow: 0 0 0 1px rgba(0,230,118,0.28), 0 0 26px rgba(0,230,118,0.10), inset 0 1px 0 rgba(255,255,255,0.05); }

/* Card hover */

.news-card{ transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }

.news-card:hover{ transform: translateY(-5px); border-color: rgba(0,184,255,0.38); box-shadow: 0 18px 50px rgba(0,8,24,0.55), 0 0 28px rgba(0,184,255,0.10); }

/* Nav active */

.nav-pill-active{

background: rgba(0,184,255,0.10);

color: #9de7ff;

box-shadow: inset 0 0 0 1px rgba(0,184,255,0.28);

}

/* Scrollbar hide */

.no-scrollbar::-webkit-scrollbar{display:none}

.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none }

/* Ticker */

@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker-track { animation: ticker-scroll 55s linear infinite; }

.ticker-wrap:hover .ticker-track { animation-play-state: paused; }

/* Modal */

.modal-body::-webkit-scrollbar{ width:6px }

.modal-body::-webkit-scrollbar-thumb{ background:#23324a; border-radius:4px }

</style>

</head>

<span class="text-[#c8d6e8] font-medium whitespace-nowrap">Kamis, 25 Juni 2026</span>

<span class="hidden sm:flex items-center gap-1.5 text-[#8fdeb7]"><span class="w-1.5 h-1.5 rounded-full bg-[#00e676] shadow-[0_0_8px_rgba(0,230,118,0.8)]"></span>Live Karawang</span>

<span class="hidden md:inline text-[#8ba0b8]">Suhu Karawang 31°C • Citarum Normal • PM2.5 Baik • 07:14 WIB</span>

</div>

<a href="#tentang" class="hover:text-[#dbe7f5] transition-colors hidden sm:inline">Tentang</a>

<a href="#redaksi" class="hover:text-[#dbe7f5] transition-colors hidden sm:inline">Redaksi</a>

<a href="#kontak" class="hover:text-[#dbe7f5] transition-colors">Kontak</a>

<a href="#" class="hover:text-citarum transition-colors">TikTok</a>

</div>

<div>

</div>

<div>

<span class="text-[#eaf3ff]" style="text-shadow:0 0 22px rgba(0,184,255,0.15)">DETEKSI AR MEDIA</span>

<span class="text-[#7dbbff]"> | KARAWANG</span>

</h1>

FUTURE LOKAL — <span class="text-[#86f0b8]">JERNIH MELIHAT FAKTA</span>

</div>

</div>

Notifikasi

</button>

</button>

</div>

</div>

</header>

<button class="nav-pill px-3.5 py-[8px] rounded-full whitespace-nowrap transition-all nav-pill-active" data-cat="Semua">Nasional</button>

<button class="nav-pill px-3.5 py-[8px] rounded-full whitespace-nowrap hover:text-[#cfe9ff] transition-all" data-cat="Karawang Raya">Karawang Raya</button>

<button class="nav-pill px-3.5 py-[8px] rounded-full whitespace-nowrap hover:text-[#cfe9ff] transition-all" data-cat="Industri">Industri</button>

<button class="nav-pill px-3.5 py-[8px] rounded-full whitespace-nowrap hover:text-[#cfe9ff] transition-all" data-cat="Pertanian">Pertanian</button>

<button class="nav-pill px-3.5 py-[8px] rounded-full whitespace-nowrap hover:text-[#cfe9ff] transition-all" data-cat="Hukum">Hukum</button>

<button class="nav-pill px-3.5 py-[8px] rounded-full whitespace-nowrap hover:text-[#cfe9ff] transition-all" data-cat="Politik">Politik</button>

<button class="nav-pill px-3.5 py-[8px] rounded-full whitespace-nowrap hover:text-[#cfe9ff] transition-all" data-cat="Teknologi">Teknologi</button>

<button class="nav-pill px-3.5 py-[8px] rounded-full whitespace-nowrap hover:text-[#cfe9ff] transition-all" data-cat="Budaya">Budaya</button>

</div>

<span>Edisi Karawang</span>

<a href="#" class="hover:text-[#cfe9ff]">E-Paper</a>

<a href="#" class="hover:text-[#cfe9ff]">Video</a>

</div>

<a href="#" class="hover:text-citarum">Indeks Karawang</a>

<a href="#" class="hover:text-citarum">Radar Citarum</a>

<a href="#" class="hover:text-citarum">Lowongan KIIC</a>

<a href="#" class="hover:text-citarum">Harga Gabah</a>

<a href="#" class="hover:text-citarum">Tentang Kami</a>

<a href="#" class="hover:text-citarum">Pasang Iklan</a>

</div>

</nav>

LIVE

</div>

<span>Suhu Karawang 31°C • Citarum Normal • Tanggul Klari Aman</span>

<span>Harga Gabah Kering Rp 6.850/kg — KUD Telukjambe</span>

<span>Tol Jakarta–Cikampek Layang Lancar • KCIC Whoosh Karawang 12x/hari</span>

<span>Lowongan: PT EV Battery Karawang buka 420 operator — Daftar di Disnaker</span>

<span aria-hidden="true">Suhu Karawang 31°C • Citarum Normal • Tanggul Klari Aman</span>

<span aria-hidden="true">Harga Gabah Kering Rp 6.850/kg — KUD Telukjambe</span>

<span aria-hidden="true">Tol Jakarta–Cikampek Layang Lancar • KCIC Whoosh Karawang 12x/hari</span>

<span aria-hidden="true">Lowongan: PT EV Battery Karawang buka 420 operator — Daftar di Disnaker</span>

</div>

<span class="px-2.5 py-1 rounded-full text-[11px] font-[700] tracking-wide bg-[rgba(0,184,255,0.14)] text-[#9ee8ff] border border-citarum/30">EKSKLUSIF KARAWANG</span>

<span class="px-2.5 py-1 rounded-full text-[11px] font-[700] bg-[rgba(0,230,118,0.10)] text-[#82f0b8] border border-padi/25">INDUSTRI</span>

</div>

KIIC Karawang Resmikan Pabrik Baterai EV Terbesar ASEAN, Serap 4.200 Pekerja Lokal

</h2>

Fase 1 gigafactory 15 GWh mulai produksi September. Upah UMSK Karawang jadi rujukan, 62% tenaga kerja direkrut dari SMK vokasi Karawang Barat, Telukjambe, dan Klari.

</p>

<span>Deteksi Armedia Karawang</span>

<span>Kamis, 25 Juni 2026 • 07.05 WIB</span>

<span class="text-[#7ccfff]">KIIC / Karawang Barat</span>

</div>

</article>

<div>

<div class="h-eyebrow text-padi-dim">Lumbung Padi</div>

<h3 class="display font-[600] text-[16.5px] leading-snug text-[#dde9f7] mt-1">Panen Raya Karawang Tembus 7,1 ton/ha, Varietas Ciherang Armedia</h3>

<div class="text-[11.5px] text-[#7e90a6] mt-1.5">1 jam lalu • Rengasdengklok</div>

</div>

</article>

<div>

<div class="h-eyebrow text-citarum">Karawang Raya</div>

<h3 class="display font-[600] text-[16.5px] leading-snug text-[#dde9f7] mt-1">Stasiun KCIC Karawang tambah 4 jadwal Whoosh, 18 menit ke Halim</h3>

</div>

</article>

</div>

<h3 class="display text-[20px] font-[700] text-[#e7f2ff]">Trending Karawang</h3>

<span class="text-[11px] text-[#7e90a6]">Realtime</span>

</div>

</ol>

<a href="#" class="text-citarum hover:text-[#8ee1ff] font-[600]">Lihat Radar Karawang →</a>

</div>

<div class="text-[#d5e6f7] font-[600] mb-1">Deteksi Pagi Karawang</div>

Ringkasan 5 berita Karawang jam 06.00. <a href="#newsletter" class="text-padi-dim font-[600] hover:text-padi">Daftar gratis</a>

</div>

</aside>

</section>

<h2 class="display text-[24px] md:text-[27px] font-[700] text-[#e7f0fb]">Berita Terkini Karawang</h2>

<button class="filter-chip text-[#9fe8ff] font-[600]" data-filter="Semua">Pilihan Redaksi</button>

<button class="filter-chip hover:text-[#cfe9ff]" data-filter="Terbaru">Terbaru</button>

</div>

</div>

Tidak ada berita yang cocok dengan "<span id="no-results-query" class="text-[#dbe8f5] font-[600]"></span>".

<div class="mt-2"><button id="reset-search" class="text-citarum font-[600] hover:underline text-[13px]">Reset pencarian</button></div>

</div>

<button id="load-more" class="px-5 py-2.5 rounded-full glass text-[13px] font-[600] text-[#bcd7ef] hover:border-citarum/40 transition">Muat berita lainnya</button>

</div>

<h3 class="display text-[18px] font-[700] text-[#e4eef9] mb-3">Radar Citarum</h3>

<div class="flex justify-between"><span class="text-[#9aadc3]">TMA Bendung Walahar</span><span class="font-[600] text-[#8af2bd]">Normal</span></div>

<div class="flex justify-between"><span class="text-[#9aadc3]">Kualitas Air</span><span class="font-[600] text-[#8af2bd]">Baik</span></div>

<div class="flex justify-between"><span class="text-[#9aadc3]">Debit</span><span class="font-[600] text-[#c9d8e8]">184 m³/s</span></div>

<div class="text-[11.5px] text-[#7c8ea5]">Update 06:40 WIB — BBWS Citarum</div>

</div>

<div class="h-eyebrow text-citarum">Deteksi Pagi</div>

<div class="display text-[19px] font-[700] text-[#e5f0fb] mt-1">Karawang, jam 06.00</div>

<p class="text-[13.2px] text-[#9aadc3] mt-2 leading-relaxed">5 berita paling penting Karawang Raya. Tanpa spam.</p>

<button class="w-full rounded-[12px] bg-gradient-to-r from-[#00b8ff] to-[#00d2a8] text-[#03141f] font-[700] py-2.5 text-[13.5px] hover:brightness-[1.05] transition">Berlangganan Gratis</button>

</form>

<p class="text-[11px] text-[#7689a2] mt-2">12.840 pembaca Karawang.</p>

</div>

<h3 class="display text-[17.5px] font-[700] text-[#dde8f4]">Jajak Karawang</h3>

<p class="text-[13.3px] text-[#9aadc3] mt-1.5">Pabrik baterai EV di KIIC: apa harapan terbesar Anda?</p>

<label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="poll" value="lokal" class="accent-[#00e676]"> Lapangan kerja warga Karawang</label>

<label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="poll" value="umkm"> Rantai pasok UMKM lokal</label>

<label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="poll" value="lingkungan"> Jaga Citarum & lingkungan</label>

</div>

<button id="vote-btn" class="mt-3 text-[12.5px] font-[700] text-citarum hover:text-[#8ee1ff]">Kirim suara</button>

<div id="poll-result" class="hidden mt-3 text-[12.5px] text-[#a6bbcf] bg-white/[0.035] rounded-[10px] px-3 py-2 border border-white/[0.07]">Terima kasih! 58% memilih “Lapangan kerja warga Karawang”.</div>

</div>

Ruang Iklan<br/>300×250<br/>

<span class="text-[11px]">iklan@deteksiarm...media.id</span>

</div>

</aside>

</section>

<div>

<h3 class="display text-[20px] font-[700] text-[#e5eef9]">Karawang Raya</h3>

<a href="#" class="text-[12px] text-citarum font-[600] hover:text-[#8ee1ff]">Lainnya →</a>

</div>

</div>

</div>

<div>

<h3 class="display text-[20px] font-[700] text-[#e5eef9]">Lumbung Padi</h3>

<a href="#" class="text-[12px] text-citarum font-[600] hover:text-[#8ee1ff]">Lainnya →</a>

</div>

</div>

</div>

<div>

<h3 class="display text-[20px] font-[700] text-[#e5eef9]">Kawasan Industri</h3>

<a href="#" class="text-[12px] text-citarum font-[600] hover:text-[#8ee1ff]">Lainnya →</a>

</div>

</div>

</div>

</section>

<div>

<div class="h-eyebrow text-padi-dim">APLIKASI DETEKSI KARAWANG</div>

<div class="display text-[22px] md:text-[26px] font-[700] mt-1 text-[#eaf3ff]">Berita Karawang, lebih cepat. 2030-ready.</div>

<p class="text-[13.5px] text-[#9aadc3] mt-1">Mode gelap nyaman, notifikasi breaking Karawang, simpan offline.</p>

</div>

<a href="#" class="px-4 py-2.5 rounded-full bg-[#eaf3ff] text-[#0b1626] text-[12.5px] font-[700]">App Store</a>

<a href="#" class="px-4 py-2.5 rounded-full glass text-[#cfe6ff] text-[12.5px] font-[600] border-white/[0.18]">Google Play</a>

</div>

</section>

</main>

<div class="display font-[700] text-[25px] text-[#eaf3ff] tracking-[-0.01em]">DETEKSI AR MEDIA <span class="text-[#7dbbff]">| KARAWANG</span></div>

<div class="text-[11px] tracking-[0.18em] text-[#7e91a8] mt-1 font-[600]">FUTURE LOKAL — JERNIH MELIHAT FAKTA</div>

Portal berita Karawang independen, futuristik, berpihak pada warga. Verifikasi, keberimbangan, kepentingan publik. Berbasis di Karawang Barat, meliput Karawang Raya, Cikampek, Rengasdengklok, Telukjambe, Klari.

</p>

<a href="#" class="hover:text-citarum">Instagram</a>

<a href="#" class="hover:text-citarum">YouTube</a>

<a href="#" class="hover:text-citarum">TikTok</a>

</div>

<div class="font-[700] text-[11.5px] text-[#d7e6f5] mb-3 tracking-wider uppercase">Kanal</div>

<li><a class="hover:text-[#d5e8ff]" href="#">Karawang Raya</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Industri</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Pertanian</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Hukum</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Politik</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Teknologi</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Budaya</a></li>

</ul>

</div>

<div class="font-[700] text-[11.5px] text-[#d7e6f5] mb-3 tracking-wider uppercase">Perusahaan</div>

<li><a class="hover:text-[#d5e8ff]" href="#">Tentang Kami</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Redaksi</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Pedoman Media Siber</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Karier Karawang</a></li>

<li><a class="hover:text-[#d5e8ff]" href="#">Iklan Lokal</a></li>

</ul>

</div>

<div class="font-[700] text-[11.5px] text-[#d7e6f5] mb-3 tracking-wider uppercase">Redaksi Karawang</div>

PT Deteksi Armedia Karawang<br/>

Galuh Mas Tech Hub Lt.3<br/>

Jl. Galuh Mas Raya, Telukjambe Barat<br/>

Karawang 41361<br/><br/>

redaksi@deteksiarm...media.id<br/>

WhatsApp: +62 812-9000-1147

</div>

<a href="#" class="hover:text-[#cfe9ff]">Privasi</a>

<a href="#" class="hover:text-[#cfe9ff]">Syarat</a>

<a href="#" class="hover:text-[#cfe9ff]">Koreksi</a>

</div>

</footer>

<div>

<div id="modal-kicker" class="h-eyebrow text-citarum">Karawang Raya</div>

<h3 id="modal-title" class="display text-[22px] md:text-[27px] leading-snug text-[#eaf3ff] mt-1 font-[700]">Judul</h3>

<div id="modal-meta" class="text-[12px] text-[#8a9db4] mt-2">Kamis, 25 Juni 2026 • 4 menit baca • Karawang</div>

</div>

</button>

</div>

<p>Ini pratinjau artikel Deteksi Armedia Karawang — Future Lokal. Kami mengutamakan verifikasi cepat, data terbuka, dan konteks Karawang Raya.</p>

<p>Setiap berita dicek dua lapis, dengan sumber jelas dari Pemkab Karawang, KIIC, Kadin, kelompok tani, hingga warga. Koreksi? kirim ke redaksi@deteksiarm...media.id — kami balas dalam 24 jam.</p>

<p>Terima kasih telah membaca Deteksi Armedia Karawang — Jernih Melihat Fakta.</p>

</div>

<button class="share-btn px-3.5 py-2 rounded-full glass text-[12.5px] font-[600] text-[#bcd7ef] hover:border-citarum/40">Salin tautan</button>

<button class="save-btn px-3.5 py-2 rounded-full glass text-[12.5px] font-[600] text-[#bcd7ef] hover:border-citarum/40">Simpan artikel</button>

</div>

<div id="toast" class="fixed bottom-5 left-1/2 -translate-x-1/2 bg-[#0f1d33] border border-white/[0.12] text-[#d9e8f5] text-[12.5px] px-4 py-2.5 rounded-full shadow-lift opacity-0 translate-y-3 transition-all duration-300 z-[90] pointer-events-none">Tersimpan</div>

/* ---- Karawang News Data ---- */

const articles = [

{ id:'k1', cat:'Karawang Raya', time:'28 menit lalu', title:'Tol MBZ Karawang Timur Bebas Hambatan, Waktu Tempuh Jakarta–Karawang 42 Menit', excerpt:'Jasa Marga buka 2 lajur baru Gerbang Tol Karawang Barat, tapcash otomatis penuh di jam berangkat.', img:'https://picsum.photos/seed/karawang-tol-mbz/520/320' },

{ id:'k2', cat:'Industri', time:'55 menit lalu', title:'UMSK Karawang 2026 Disepakati Rp 5,92 Juta, Berlaku 1 Juli', excerpt:'Tripartit menyepakati kenaikan 4,8%, berlaku untuk 1.842 perusahaan di 7 kawasan industri.', img:'https://picsum.photos/seed/karawang-umsk/520/320' },

{ id:'k3', cat:'Pertanian', time:'1 jam lalu', title:'KUD Telukjambe Panen Ciherang Armedia, Rendemen 67%, Harga Gabah Naik', excerpt:'Luas panen 1.240 ha, Bulog Karawang serap 3.200 ton untuk cadangan pangan.', img:'https://picsum.photos/seed/karawang-kud/520/320' },

{ id:'k4', cat:'Hukum', time:'2 jam lalu', title:'Polres Karawang Ungkap Pencemaran Citarum di Rengasdengklok, 2 PT Disegel', excerpt:'DLH ambil sampel, IPAL tidak sesuai baku mutu. Sidang TIPIDLH pekan depan.', img:'https://picsum.photos/seed/karawang-citarum-hukum/520/320' },

{ id:'k5', cat:'Teknologi', time:'3 jam lalu', title:'SMKN 1 Karawang Luncurkan EV Training Center Bareng KIIC', excerpt:'200 siswa/minggu praktik baterai & BMS. Lulusan langsung magang di pabrik EV.', img:'https://picsum.photos/seed/karawang-smk-ev/520/320' },

{ id:'k6', cat:'Budaya', time:'4 jam lalu', title:'Festival Goyang Karawang 2026 Pecahkan Rekor, 4.000 Penari di Alun-Alun', excerpt:'Dibuka Bupati, live di Deteksi Armedia. UMKM batik Karawang tembus Rp 1,1 M.', img:'https://picsum.photos/seed/karawang-goyang/520/320' },

{ id:'k7', cat:'Politik', time:'5 jam lalu', title:'DPRD Karawang Sahkan Perda Kawasan Pertanian Pangan Berkelanjutan 12.400 Ha', excerpt:'Lindung lahan sawah abadi di 9 kecamatan lumbung.', img:'https://picsum.photos/seed/karawang-perda/520/320' },

{ id:'k8', cat:'Karawang Raya', time:'Kemarin', title:'RSUD Karawang Buka Cathlab Kedua, Waktu Tanggap Serangan Jantung 38 Menit', excerpt:'Layanan BPJS, rujukan Cikampek–Purwakarta.', img:'https://picsum.photos/seed/karawang-rsud/520/320' },

];

const trendingKarawang = [

'Pabrik Baterai EV KIIC Resmi Produksi',

'UMSK Karawang Rp 5,92 Juta — Resmi',

'Panen Raya Ciherang Armedia 7,1 ton/ha',

'Whoosh Karawang Tambah 4 Jadwal',

'Polres Segel Pencemar Citarum Rengasdengklok',

'Festival Goyang Karawang 4.000 Penari'

];

const catBlocks = {

'Karawang Raya': [

{title:'Flyover Lamaran ditarget rampung Agustus, urai macet Cikampek', time:'2 jam lalu'},

{title:'Damkar Karawang: 14 titik rawan kebakaran lahan dimonitor drone', time:'6 jam lalu'},

{title:'Mal Pelayanan Publik Galuh Mas tambah 9 layanan OSS', time:'Kemarin'}

'Pertanian': [

{title:'Harga gabah kering Karawang Rp 6.850/kg, tertinggi se-Jabar', time:'1 jam lalu'},

{title:'Pompanisasi Citarum Timur hidupkan 800 ha sawah Klari', time:'4 jam lalu'},

{title:'Petani milenial Karawang pakai drone semprot, hemat 40%', time:'Kemarin'}

'Industri': [

{title:'Lowongan 420 operator EV Battery KIIC, daftar via Disnaker', time:'40 menit lalu'},

{title:'Suryacipta buka klaster semikonduktor, 3 investor antri', time:'3 jam lalu'},

{title:'Kadin Karawang: ekspor otomotif naik 14% yoy', time:'Kemarin'}

]

};

/* Render cards - glass */

function articleCard(a){

return `

<span class="absolute top-3 left-3 text-[10.5px] font-[700] tracking-wider px-2.5 py-1 rounded-full bg-[rgba(0,184,255,0.12)] text-[#8ee1ff] border border-citarum/25">${a.cat.toUpperCase()}</span>

</div>

<h3 class="display text-[18px] md:text-[19px] leading-snug font-[600] text-[#dde8f5] group-hover:text-[#bfeeff] transition-colors">${a.title}</h3>

<p class="text-[13.4px] text-[#8e9fb6] mt-2 line-clamp-2">${a.excerpt}</p>

</div>

</article>`;

}

const grid = document.getElementById('berita-grid');

let visibleCount = 6;

let currentCat = 'Semua';

function renderGrid(filterText = '', catFilter = 'Semua'){

const q = filterText.trim().toLowerCase();

let list = articles.filter(a => {

const matchText = !q || (a.title.toLowerCase().includes(q) || a.excerpt.toLowerCase().includes(q) || a.cat.toLowerCase().includes(q));

const matchCat = catFilter === 'Semua' || a.cat === catFilter;

return matchText && matchCat;

});

const showing = list.slice(0, visibleCount);

grid.innerHTML = showing.map(a => articleCard(a)).join('');

const noResults = document.getElementById('no-results');

noResults.classList.toggle('hidden', list.length !== 0);

const nq = document.getElementById('no-results-query');

if(nq) nq.textContent = filterText;

document.getElementById('load-more').style.display = list.length > visibleCount ? '' : 'none';

bindArticleClicks();

}

renderGrid();

/* Trending list */

document.getElementById('trending-list').innerHTML = trendingKarawang.map((t,i)=>`

<span class="w-[30px] h-[30px] rounded-full flex items-center justify-center text-[12px] font-[700] shrink-0 mt-0.5

${i===0 ? 'bg-[rgba(255,204,51,0.13)] text-[#ffda6a] border border-[#ffcc33]/30' : 'bg-white/[0.05] text-[#8edfff] border border-white/[0.09]'} ">

${i+1}

</span>

</li>

`).join('');

/* Cat blocks */

function renderCatBlock(elId, items){

const el = document.getElementById(elId);

if(!el) return;

el.innerHTML = items.map(it=>`

${it.title}

</a>

`).join('');

}

renderCatBlock('cat-karawang', catBlocks['Karawang Raya']);

renderCatBlock('cat-pertanian', catBlocks['Pertanian']);

renderCatBlock('cat-industri', catBlocks['Industri']);

/* Search */

const searchInput = document.getElementById('site-search');

const searchInputMobile = document.getElementById('site-search-mobile');

const clearBtn = document.getElementById('clear-search');

function doSearch(val){

visibleCount = 6;

renderGrid(val, currentCat);

}

let searchTimer;

function bindSearchInput(inputEl){

if(!inputEl) return;

inputEl.addEventListener('input', ()=>{

const v = inputEl.value;

if(clearBtn) clearBtn.classList.toggle('hidden', !v && inputEl === searchInput);

clearTimeout(searchTimer);

searchTimer = setTimeout(()=> doSearch(v), 160);

if(inputEl === searchInput && searchInputMobile) searchInputMobile.value = v;

if(inputEl === searchInputMobile && searchInput) searchInput.value = v;

});

}

bindSearchInput(searchInput);

bindSearchInput(searchInputMobile);

clearBtn?.addEventListener('click', ()=>{

if(searchInput) searchInput.value='';

if(searchInputMobile) searchInputMobile.value='';

clearBtn.classList.add('hidden');

renderGrid('', currentCat);

});

document.getElementById('reset-search')?.addEventListener('click', ()=>{

if(searchInput) searchInput.value='';

if(searchInputMobile) searchInputMobile.value='';

renderGrid('', currentCat);

});

/* Category nav */

document.querySelectorAll('#category-nav .nav-pill').forEach(btn=>{

btn.addEventListener('click', e=>{

e.preventDefault();

document.querySelectorAll('#category-nav .nav-pill').forEach(n=>{

n.classList.remove('nav-pill-active');

});

btn.classList.add('nav-pill-active');

const catMap = {

'Nasional':'Semua',

'Karawang Raya':'Karawang Raya',

'Industri':'Industri',

'Pertanian':'Pertanian',

'Hukum':'Hukum',

'Politik':'Politik',

'Teknologi':'Teknologi',

'Budaya':'Budaya'

};

currentCat = catMap[btn.dataset.cat] || btn.dataset.cat || 'Semua';

visibleCount = 6;

const q = (searchInput && searchInput.value) || (searchInputMobile && searchInputMobile.value) || '';

renderGrid(q, currentCat);

const feedEl = document.getElementById('feed');

if(feedEl) window.scrollTo({top: feedEl.getBoundingClientRect().top + window.scrollY - 80, behavior:'smooth'});

});

/* Load more */

document.getElementById('load-more').addEventListener('click', ()=>{

visibleCount += 4;

const q = (searchInput && searchInput.value) || '';

renderGrid(q, currentCat);

});

/* Modal reader */

const modal = document.getElementById('article-modal');

function openArticle({title, cat, img, time}){

document.getElementById('modal-kicker').textContent = (cat || 'Karawang Raya').toUpperCase();

document.getElementById('modal-title').textContent = title || 'Berita Deteksi Armedia Karawang';

document.getElementById('modal-meta').textContent = `Kamis, 25 Juni 2026 • ${time || '4 menit baca'} • Karawang`;

const mImg = document.getElementById('modal-image');

if(img){ mImg.src = img; mImg.classList.remove('hidden'); } else { mImg.classList.add('hidden'); }

modal.classList.remove('hidden');

document.body.style.overflow = 'hidden';

}

function closeModal(){

modal.classList.add('hidden');

document.body.style.overflow = '';

}

document.getElementById('modal-close').addEventListener('click', closeModal);

document.getElementById('modal-backdrop').addEventListener('click', closeModal);

document.addEventListener('keydown', e=>{ if(e.key==='Escape') closeModal(); });

function bindArticleClicks(){

document.querySelectorAll('.article-row, article.group, .popular-link, .cat-link').forEach(el=>{

if(el.dataset.bound) return;

el.dataset.bound = "1";

el.addEventListener('click', (ev)=>{

ev.preventDefault();

const card = el.closest('article');

let title = el.dataset.popTitle || el.dataset.catTitle || (card ? card.querySelector('h1, h2, h3')?.textContent.trim() : 'Deteksi Armedia Karawang');

let cat = card?.dataset?.cat || 'Karawang Raya';

let imgEl = card?.querySelector('img');

openArticle({title, cat, img: imgEl?.src , time: '4 menit baca'});

});

}

bindArticleClicks();

/* Mobile menu / search */

document.getElementById('mobile-menu-btn').addEventListener('click', ()=>{

document.getElementById('mobile-menu').classList.toggle('hidden');

const sWrap = document.getElementById('mobile-search-wrap');

if(!sWrap.classList.contains('hidden')){

sWrap.classList.add('hidden');

} else {

sWrap.classList.remove('hidden');

setTimeout(()=> document.getElementById('site-search-mobile')?.focus(), 30);

}

});

/* Toast */

let toastTimer;

function showToast(msg){

const t = document.getElementById('toast');

t.textContent = msg;

t.style.opacity = '1';

t.style.transform = 'translate(-50%, 0)';

clearTimeout(toastTimer);

toastTimer = setTimeout(()=>{ t.style.opacity='0'; t.style.transform='translate(-50%, 12px)'; }, 2200);

}

/* Newsletter */

document.getElementById('newsletter-form').addEventListener('submit', e=>{

e.preventDefault();

e.target.reset();

showToast('Berlangganan Deteksi Pagi Karawang berhasil!');

});

document.getElementById('subscribe-btn')?.addEventListener('click', ()=>{

showToast('Notifikasi Karawang aktif ✓');

});

/* Poll */

document.getElementById('vote-btn').addEventListener('click', ()=>{

const chosen = document.querySelector('input[name="poll"]:checked');

if(!chosen){ showToast('Pilih salah satu opsi dulu'); return; }

document.getElementById('poll-result').classList.remove('hidden');

showToast('Suara Anda tercatat. Nuhun!');

});

/* Modal share/save */

document.querySelector('.share-btn')?.addEventListener('click', async ()=>{

try { await navigator.clipboard.writeText(location.href); showToast('Tautan disalin'); }

catch { showToast('deteksiarm...media.id/karawang'); }

});

document.querySelector('.save-btn')?.addEventListener('click', ()=> showToast('Artikel disimpan ke bacaan'));

</script>

</body>

</html>

Index.html

Dokumentasi Terbaru

Portofolio Klien

ARTIKEL TERPOPULER🔝

Ditemui Aliansi Pemuda di Pemda II, Plt Kepala DPRKP Karawang Paparkan Anggaran RUTILAHU Rp134 Miliar, Tertinggi Kedua di Indonesia

DLH Karawang Tegaskan TPAS Jalupang Tetap Beroperasi dengan Sistem Controlled Landfill

Gotong Royong Massal Wujudkan Karawang Bersih, UPTD Kebersihan Wil 1 Karawang Sisir Dua Titik di Majalaya dan Karawang Barat

Jelang HUT RI ke-81, UPTD LH Wilayah 1 Karawang Gotong Royong Bersihkan Kantor dan Pasang Umbul-Umbul

Klari Berkembang Pesat: Clean & Go Hadirkan Layanan Dari Cuci Steam Hingga Auto Detailing

Konsolidasi dan Bedah Dapil Partai NasDem se-Jawa Barat Digelar, DPD NasDem Karawang Matangkan Strategi Gerakan Perubahan

Firma Hukum EP & Partners Ucapkan Dirgahayu RI 81: Indonesia Berdaulat Adil dan Makmur - Edi Prakoso