MediaWiki:Common.js: Perbedaan antara revisi

(17 revisi perantara oleh pengguna yang sama tidak ditampilkan)

Baris 1:

/**

* ====================================================================

* MIPPEDIA DATA - ADVANCED STRUCTURED DATA SYSTEM (V8.0 ULTIMATE ~~PRO~~)

* MIPPEDIA DATA - ADVANCED STRUCTURED DATA SYSTEM (V8.7 SECURE ULTIMATE)

* Fitur ~~Baru~~: ~~Accordion References, Visit Site Button, Toast Notifs~~,

* Fitur: ALL ORIGINAL V8 FEATURES KEPT + Global Social Media Box,

* ~~Auto-Save Drafts, Reorder Data (Up~~/~~Down)~~, ~~File Export/Import,~~

* Smart Autocomplete/Preview Wikilink, Ultra-Strict Security, Mobile Ready.

* 30+ Social Platforms, Glassmorphism UI, Mobile ~~Perfect Animations~~.

* ====================================================================

*/

Baris 20:

Baris 19:

var isLocked = false;

var api = new mw.Api();

var DRAFT_KEY = 'mippedia_data_draft_' + pageName;

// 1. DATA MASTER PLATFORM MEDIA SOSIAL & MUSIK (~~DITAMBAH BANYAK PLATFORM~~)

// 1. DATA MASTER PLATFORM MEDIA SOSIAL & MUSIK (FULL ASLI)

var SOCIAL_PLATFORMS = {

applemusic: { name: 'Apple Music', base: 'https://music.apple.com/artist/', color: '#fc3c44', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.32 12.383c-.328.232-.82.418-1.32.418-1.238 0-1.922-.828-1.922-2.191v-4.14l4.312-.868v1.398l-2.91.586v2.805c0 .734.336 1.148.977 1.148.336 0 .617-.094.863-.258v1.102z"/></svg>' },

spotify: { name: 'Spotify', base: 'https://open.spotify.com/artist/', color: '#1db954', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424c-.18.295-.563.387-.857.207-2.35-1.434-5.308-1.758-8.793-.963-.335.077-.67-.133-.746-.468-.077-.334.132-.67.467-.745 3.816-.87 7.092-.493 9.72 1.112.294.18.386.563.209.857zm1.213-2.71c-.226.368-.703.483-1.07.258-2.688-1.652-6.785-2.13-9.965-1.164-.413.125-.85-.108-.975-.522-.125-.413.108-.85.522-.975 3.633-1.102 8.157-.568 11.23 1.332.368.226.483.703.258 1.071zm.14-2.827c-3.225-1.915-8.54-2.092-11.614-1.16-.503.153-1.037-.133-1.19-.636-.152-.503.133-1.037.636-1.19 3.532-1.072 9.404-.865 13.115 1.338.45.267.598.85.33 1.3-.267.45-.85.598-1.3.33z"/></svg>' },

soundcloud: { name: 'SoundCloud', base: 'https://soundcloud.com/', color: '#ff5500', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M1.175 12.225c-.062 0-.115.053-.115.116v4.636c0 .062.053.115.115.115h.411c.063 0 .116-.053.116-.115v-4.636c0-.063-.053-.116-.116-.116h-.411zm1.312-1.28c-.062 0-.115.052-.115.115v6.52c0 .063.053.115.115.115h.43c.062 0 .115-.052.115-.115v-6.52c0-.063-.053-.115-.115-.115h-.43zm1.33-1.258c-.063 0-.115.052-.115.115v8.322c0 .063.052.115.115.115h.43c.063 0 .115-.052.115-.115V9.802c0-.063-.052-.115-.115-.115h-.43zm1.33-.86c-.063 0-.115.053-.115.116v9.542c0 .063.052.115.115.115h.43c.063 0 .115-.052.115-.115V8.942c0-.063-.052-.116-.115-.116h-.43zm21.43 3.652c-.413 0-.802.08-1.157.228-.312-2.73-2.613-4.858-5.422-4.858-1.08 0-2.083.315-2.928.858-.2-.702-.592-1.332-1.12-1.826-.78-.727-1.812-1.13-2.882-1.13-.815 0-1.6.236-2.272.684v10.822c0 .063.052.115.115.115h15.666c1.666 0 3.018-1.352 3.018-3.018 0-1.666-1.352-3.018-3.018-3.018z"/></svg>' },

~~tidal~~: { name: '~~Tidal~~', base: 'https://~~tidal~~.com~~/browse/artist~~/', color: '#~~000000~~', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="~~M12 4l4 4-4 4-4-4 4-4zm0 8l4 4-4 4-4-4 4-4zm8-8l4 4-4 4-4-4 4-4z"/></svg>' },~~

bandcamp: { name: 'Bandcamp', base: 'https://bandcamp.com/', color: '#1da0c3', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z"/></svg>' },

~~youtube: { name: 'YouTube', base: 'https://youtube~~.~~com/@', color: '#ff0000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22.54 6.42a2~~.~~78 2.78 0 0 0~~-1.94-~~2C18~~.~~88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3~~.~~4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z~~"~~></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"><~~/~~polygon~~></svg>' },

instagram: { name: 'Instagram', base: 'https://instagram.com/', color: '#e1306c', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>' },

tiktok: { name: 'TikTok', base: 'https://www.tiktok.com/@', color: '#000000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 1 1-5.2-1.74 2.89 2.89 0 0 1 2.31-2.22V8.2a6.34 6.34 0 0 0-5 6.13 6.34 6.34 0 1 0 10.7-4.52A8.25 8.25 0 0 0 20 10.56V6.69z"/></svg>' },

youtube: { name: 'YouTube', base: 'https://youtube.com/@', color: '#ff0000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>' },

twitter: { name: 'X / Twitter', base: 'https://x.com/', color: '#0f1419', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>' },

threads: { name: 'Threads', base: 'https://www.threads.net/@', color: '#000000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.842 12.338c-.288 1.83-1.85 3.09-3.842 3.09-2.298 0-4.043-1.68-4.043-4.135 0-2.454 1.745-4.134 4.043-4.134 1.583 0 2.875.836 3.447 2.083l-1.28.625c-.39-.817-1.182-1.328-2.167-1.328-1.55 0-2.613 1.15-2.613 2.754 0 1.603 1.063 2.753 2.613 2.753 1.258 0 2.19-.77 2.37-1.808h-2.37v-1.38h3.842v1.48z"/></svg>' },

facebook: { name: 'Facebook', base: 'https://facebook.com/', color: '#1877f2', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>' },

linkedin: { name: 'LinkedIn', base: 'https://linkedin.com/in/', color: '#0a66c2', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>' },

~~twitch~~: { name: '~~Twitch~~', base: 'https://~~twitch~~.tv/', color: '#~~9146FF~~', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="~~currentColor~~"~~><path d~~="~~M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h~~-~~3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>' },~~

github: { name: 'GitHub', base: 'https://github.com/', color: '#24292e', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>' },

~~discord: { name: 'Discord', base: 'https://discord.gg/', color: '#5865F2', icon: '<svg~~ width="~~13" height="13" viewBox="0 0 24 24" fill="currentColor~~"><path d="~~M20.317 4.37a19.791 19.791 0 0 0~~-4.~~885~~-~~1.515.074.074 0 0 0~~-.~~079.037c~~-~~.21.375~~-~~.444.864~~-.~~608 1~~.~~25a18~~.~~27 18.27~~ 0 0 0-5.~~487 0 12~~.~~64 12~~.~~64 0 0 0~~-.~~617~~-1.~~25.077.077 0 0 0-~~.~~079~~-.~~037A19~~.~~736 19.736~~ 0 0 0 ~~3.677~~ 4.~~37a~~.07.07 0 0 0-.~~032~~.~~027C~~.~~533 9~~.~~046-~~.32 13.~~58.099 18.057a.082.082~~ 0 0 0 .~~031.057 19.9 19~~.~~9 0 0 0~~ 5~~.993 3.03.078.078 0 0 0 .084-.028 14~~.09 14.09 ~~0 0 0 1~~.~~226-1~~.~~994.076.076~~ 0 0 0-.~~041-~~.~~106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10~~.2 0 0 0 ~~.372~~-~~.292.074.074 0 0~~ 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.~~03.077.077 0 0 0 .032-.054c.5-~~5.~~177-~~.~~838-9.674-~~3.~~549-13~~.~~66a~~.~~061~~.~~061~~ 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>' },

pinterest: { name: 'Pinterest', base: 'https://pinterest.com/', color: '#e60023', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg>' }

};

// 2. PRESET ~~TEMPLATES~~

// 2. PRESET & MASTER RUJUKAN

var PRESET_LABELS = [

"Nama Lahir", "Tanggal Lahir", "Tempat Lahir", "Pekerjaan~~", "Gelar~~",

"Nama Lahir", "Tanggal Lahir", "Tempat Lahir", "Pekerjaan",

"Kebangsaan", "Genre", "Instrumen", "Label Rekaman~~", "Zodiak~~",

"Kebangsaan", "Genre", "Instrumen", "Label Rekaman",

"Tahun Aktif", "Situs Web Resmi", "Pasangan", "Orang Tua~~", "Pendidikan~~"

"Tahun Aktif", "Situs Web Resmi", "Pasangan", "Orang Tua"

];

~~// 3. MASTER TIPE RUJUKAN~~

var REF_TYPES = {

"Berita": ["Berita Online", "Berita Cetak / Koran", "Wawancara Eksklusif", "Siaran Radio / TV"],

"Berita": ["Berita Online", "Berita Cetak / Koran", "Wawancara Eksklusif", "Liputan Khusus", "Editorial", "Investigasi Media", "Siaran Radio / TV"],

"Website": ["Situs Resmi", "Portal Informasi", "Database Web", "Forum Diskusi"],

"Website": ["Situs Resmi", "Portal Informasi", "Database Web", "Portal Komunitas", "Forum Diskusi", "Portal Edukasi", "Direktori Web"],

"Buku": ["Buku Cetak", "E-Book", "Bab / Bagian Buku", "Biografi Cetak"],

"Buku": ["Buku Cetak", "E-Book", "Bab / Bagian Buku", "Monograf", "Katalog / Biografi Cetak", "Buku Teks Akademik"],

"Jurnal": ["Jurnal Ilmiah", "Paper Konferensi", "Artikel Review", "Tesis / Disertasi"],

"Jurnal": ["Jurnal Ilmiah Peer-Reviewed", "Paper Konferensi", "Artikel Review", "Pre-print / Draft Penelitian", "Tesis / Disertasi"],

"Musik ~~& Video~~": ["MusicBrainz", "Discogs", "Spotify", "YouTube", "Film Dokumenter"],

"Siaran Pers": ["Siaran Pers Resmi", "Pengumuman Instansi / BUMN", "Pernyataan Pers Hukrim", "Keterangan Pers Artis/Manajemen"],

"~~Lainnya~~": ["~~Siaran Pers~~", "~~Dokumen PDF~~", "Postingan ~~Medsos~~", "Arsip Web"]

"Dokumen PDF": ["Laporan Tahunan / Annual Report", "Dokumen Kebijakan / Regulasi", "Brosur / Pamflet Resmi", "Naskah Akademik"],

"Studio / Database Musik": ["MusicBrainz", "Discogs", "Genius", "AllMusic", "Spotify For Artists", "Database BPI / RIAA", "Songfacts", "Apple Music Catalogue"],

"Video": ["YouTube Video", "Film Dokumenter", "Wawancara Video", "Arsip Siaran TV", "Vlog Resmi"],

"Podcast": ["Episode Podcast", "Siniar Audio Resmi", "Wawancara Audio"],

"Media Sosial": ["Postingan / Tweet", "Video Singkat (Reels/TikTok/Shorts)", "Live Stream", "Thread Resmi"],

"Ensiklopedia": ["Ensiklopedia Cetak", "Ensiklopedia Online", "Kamus / Glosarium"],

"Arsip": ["Arsip Nasional / Sejarah", "Web Archive (Wayback Machine)", "Dokumen Manuskrip"]

};

// 4. IKON SISTEM ~~(SVG Ditingkatkan)~~

var VERIFIED_DOMAINS = [

'kompas.com', 'kompas.id', 'detik.com', 'cnnindonesia.com', 'tribunnews.com', 'kumparan.com', 'tirto.id',

'youtube.com', 'spotify.com', 'apple.com', 'musicbrainz.org', 'billboard.com', 'rollingstone.com',

'bbc.com', 'nytimes.com', 'instagram.com', 'x.com', 'twitter.com', 'facebook.com', 'wikipedia.org', 'imdb.com'

];

// 3. IKON SISTEM

var svgEdit = '<svg class="md-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>';

var svgLock = '<svg class="md-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>';

Baris 64:

Baris 74:

var svgSearch = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>';

var svgCode = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>';

var ~~svgChevronDown~~ = '<svg width="14" height="~~14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12~~ 15 ~~18 9"></polyline></svg>';~~

var svgVerified = '<svg width="15" height="15" viewBox="0 0 24 24" fill="#3b82f6" stroke="#ffffff" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>';

~~var svgExternal = '<svg width="13" height="13~~" viewBox="0 0 24 24" fill="~~none~~" stroke="~~currentColor~~" stroke-width="2"><path d="~~M18 13v6a2 2 0~~ 0 1~~-2 2H5a2 2 0 0~~ 1-~~2-2V8a2 2 0 0 1 2~~-~~2h6"></path><polyline points="15 3 21 3 21~~ 9~~"></polyline><line x1="10" y1="~~14~~" x2="21" y2="3~~"></~~line></svg>';~~

var svgHelp = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>';

~~var svgArrowUp = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"></line~~><polyline points="~~5 12 12 5 19~~ 12"></polyline></svg>';

var ~~svgArrowDown~~ = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><~~line x1~~="12" ~~y1="5" x2~~="12" y2="19"></~~line><polyline points="19 12 12 19 5 12"></polyline></svg>';~~

~~var svgDownload = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"~~><path d="~~M21 15v4a2 2~~ 0 0 1~~-2 2H5a2 2 0 0 1-~~2-2v-4"></path~~><polyline points="7 10 12 15 17 10"></polyline~~><line x1="12" y1="15" x2="12" y2="3"></line></svg>';

// 5. HELPER UTILITY ~~(Notifikasi Toast, Extract Domain, dll)~~

// 4. HELPER UTILITY & ADVANCED SECURITY

function ~~showToast~~(~~message, type~~) {

function sanitizeHTML(str) {

~~var bg = type === 'error' ? '#dc2626' :~~ (~~type~~ ==~~= 'warning' ? '#d97706~~' ~~: '#16a34a~~');

if (typeof str !== 'string') return str;

~~var $toast~~ = $('~~<div style="position~~:~~fixed~~; ~~bottom~~:~~20px~~; ~~right~~:~~20px~~; ~~background:~~'~~+bg+~~'~~; color~~:~~#fff~~; ~~padding:12px 20px; border-radius:8px; box-shadow:0 4px 12px rgba(0~~,~~0,0,0.15); z-index~~:~~9999; font-weight:600; font-size:0.9rem; opacity:0; transform:translateY(20px); transition:all 0.3s ease~~;">'~~+message+~~'</~~div>~~');

return str.replace(/[&<>"'`=\/]/g, function(s) {

$('~~body~~'~~).append($toast)~~;

return {

~~setTimeout(function() { $toast.css({opacity: 1~~, ~~transform~~: '~~translateY(0)~~'}); }~~, 10~~);

'&': '&', '<': '<', '>': '>', '"': '"',

~~setTimeout(~~function() {

"'": ''', '/': '/', '`': '`', '=': '='

~~$toast.css~~(~~{opacity: 0, transform: 'translateY~~(~~20px)'}~~);

}[s];

~~setTimeout~~(function() { ~~$toast~~.~~remove~~(); }~~, 300);~~

});

~~}, 3000~~);

}

function isVerifiedSite(urlStr) {

if(!urlStr) return false;

var domain = extractDomain(urlStr);

return VERIFIED_DOMAINS.some(function(vd) { return domain === vd || domain.endsWith('.' + vd); });

}

function formatIndonesianDate(dateStr) {

if (!dateStr) return '';

Baris 90:

Baris 100:

var monthIdx = parseInt(parts[1], 10) - 1;

var year = parts[0];

if (isNaN(day) || monthIdx < 0 || monthIdx > 11 || isNaN(year)) return dateStr;

if (isNaN(day) || monthIdx < 0 || monthIdx > 11 || isNaN(year)) return sanitizeHTML(dateStr);

return day + ' ' + months[monthIdx] + ' ' + year;

}

function extractDomain(urlStr) {

try {

if (!urlStr.match(/^https?:\/\//i)) urlStr = 'https://' + urlStr;

~~var parsed =~~ new URL(urlStr);

return new URL(urlStr).hostname.replace(/^www\./, '');

~~return parsed~~.hostname.replace(/^www\./, '');

} catch(e) { return urlStr.replace(/^https?:\/\/(www\.)?/, '').split('/')[0]; }

} catch(e) {

return urlStr.replace(/^https?:\/\/(www\.)?/, '').split('/')[0];

}

function ensureHttps(urlStr) {

if (!urlStr) return '';

urlStr = urlStr.trim();

~~if (urlStr && !~~urlStr.match(/^~~https?~~:~~\/\/~~/i)) {

var protoMatch = urlStr.match(/^([a-z0-9]+):/i);

return '~~https://~~' ~~+ urlStr~~;

if (protoMatch) {

var badProtos = ['javascript', 'data', 'vbscript', 'file', 'ws', 'wss', 'ftp'];

if (badProtos.indexOf(protoMatch[1].toLowerCase()) !== -1) return '';

}

return urlStr;

return (urlStr && !urlStr.match(/^https?:\/\//i)) ? 'https://' + urlStr : urlStr;

}

function getTodayString() {

var now = new Date();

Baris 121:

Baris 127:

}

// 6. STYLESHEET ~~MODERN V8.0 PRO~~

// 5. STYLESHEET (TERMASUK LAYOUT MEDIA SOSIAL GLOBAL & AUTOCOMPLETE)

var css = `

#mippedia-data-app {

background: #ffffff; border-radius: 16px; box-shadow: 0 ~~8px 30px~~ rgba(0,0,0,0.04);

background: #ffffff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.06);

padding: ~~24px~~; margin: ~~24px~~ 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto~~, Helvetica, Arial~~, sans-serif;

padding: 20px; margin: 20px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

border: 1px solid #~~f1f5f9~~; max-width: 100%; box-sizing: border-box; overflow: hidden;

border: 1px solid #e2e8f0; max-width: 100%; box-sizing: border-box; overflow: hidden;

}

.md-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }

.md-header {

.md-title-container { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 180px; }

display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;

.md-title { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0; white-space: nowrap; }

gap: 12px; margin-bottom: ~~20px~~; padding-bottom: ~~16px~~; border-bottom: ~~2px~~ solid #~~f8fafc~~;

}

.md-title-container { display: flex; align-items: center; gap: ~~10px~~; flex: 1 1 auto; min-width: 180px; }

.md-title { font-size: 1.~~35rem~~; font-weight: 800; color: #0f172a; margin: 0; white-space: nowrap~~; letter-spacing: -0.5px~~; }

.md-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.md-btn-icon {

background: #f8fafc; border: 1px solid #~~e2e8f0~~; cursor: pointer; color: #4f46e5;

background: #f8fafc; border: 1px solid #cbd5e1; cursor: pointer; color: #4f46e5;

padding: 8px 14px; border-radius: ~~10px~~; transition: all 0.2s ~~cubic-bezier(0.4, 0, 0.2, 1)~~;

padding: 8px 14px; border-radius: 8px; transition: all 0.2s ease;

display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: ~~700~~; white-space: nowrap;

display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; white-space: nowrap;

}

.md-btn-icon:hover:not(:disabled) { background: #~~e0e7ff~~; border-color: #~~c7d2fe~~; transform: translateY(-~~2px); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1); }~~

.md-btn-icon:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px); }

~~.md-btn-icon:active:not(:disabled) { transform: translateY(0~~); }

.md-btn-lock { color: #dc2626; background: #fef2f2; border-color: #fca5a5; }

.md-btn-lock { color: #~~e11d48~~; background: #~~fff1f2~~; border-color: #~~fecdd3; }~~

~~.md-btn-lock:hover:not(:disabled) { background: #ffe4e6; border-color: #fda4af; box-shadow: 0 4px 12px rgba(225, 29, 72, 0.1)~~; }

.md-search-box { position: relative; margin-bottom: ~~20px~~; width: 100%; box-sizing: border-box; }

.md-search-box { position: relative; margin-bottom: 16px; width: 100%; box-sizing: border-box; }

.md-search-input {

.md-search-input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.85rem; box-sizing: border-box; background: #f8fafc; transition: 0.2s; }

width: 100%; padding: 12px ~~16px 12px 40px~~; border: ~~2px~~ solid #~~f1f5f9~~; border-radius: ~~12px~~;

.md-search-input:focus { background: #fff; border-color: #4f46e5; outline: none; }

font-size: 0.~~9rem; font-weight: 500~~; box-sizing: border-box; background: #f8fafc; transition: 0.3s;

.md-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; }

}

.md-search-input:focus { background: #fff; border-color: #~~6366f1~~; outline: none; box-shadow: 0 ~~0 0 4px~~ rgba(99, ~~102~~, ~~241~~, 0.1); }

/* Kotak Global Sosial Media Terpisah di Atas */

.md-~~search~~-~~icon~~ { ~~position~~: ~~absolute~~; ~~left~~: ~~14px~~; ~~top~~: ~~50%~~; transform: translateY(-~~50%~~); ~~color~~: ~~#94a3b8~~; }

.md-global-social-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }

.md-social-box-title { font-size: 0.85rem; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; border-bottom: 1px dashed #cbd5e1; padding-bottom: 8px; }

.md-social-group { display: flex; flex-wrap: wrap; gap: 8px; }

.md-social-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: white !important; text-decoration: none !important; transition: transform 0.2s, opacity 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.md-social-badge:hover { transform: translateY(-2px); opacity: 0.92; }

~~/* Row Display Fix */~~

.md-row-display { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 12px; border-bottom: 1px solid #f1f5f9; transition: all 0.2s; border-radius: 12px; gap: 12px; margin-bottom: 8px; background: #fff; }

.md-row-display {

.md-row-display:hover { background: #faf5ff; box-shadow: inset 4px 0 0 #6366f1; }

display: flex; justify-content: space-between; align-items: flex-start;

padding: 16px~~; border: 1px solid transparent~~; border-bottom: 1px solid #f1f5f9; transition: all 0.2s;

border-radius: 12px; gap: 12px; margin-bottom: 8px; background: #fff; ~~position: relative;~~

}

.md-row-display:hover { background: #~~fafafa; border-color: #f1f5f9~~; box-shadow: 0 4px ~~12px rgba(~~0,0~~,0,0.02)~~; }

.md-data-group { display: flex; flex-direction: column; gap: ~~8px~~; flex: 1; min-width: 0; }

.md-data-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

.md-data-label { font-size: 0.72rem; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: 0.~~8px~~; }

.md-data-label { font-size: 0.72rem; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }

.md-data-value-wrap { display: flex; align-items: center; gap: ~~10px~~; flex-wrap: wrap; }

.md-data-value-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.md-data-value { font-size: 1.~~1rem~~; color: #0f172a; line-height: 1.4; font-weight: ~~700~~; word-break: break-word; }

.md-data-value { font-size: 1.02rem; color: #0f172a; line-height: 1.4; font-weight: 600; word-break: break-word; }

.md-btn-copy {

.md-btn-copy { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: 0.2s; display: inline-flex; align-items: center; }

background: ~~#f1f5f9~~; border: none; color: #~~64748b~~; cursor: pointer; padding: 4px ~~6px~~;

.md-btn-copy:hover { color: #4f46e5; background: #e0e7ff; }

border-radius: ~~6px~~; transition: 0.2s; display: inline-flex; align-items: center;

}

.md-btn-copy:hover { color: #4f46e5; background: #e0e7ff~~; transform: scale(1.05)~~; }

~~.md-row-actions { display: flex; flex-direction: column; gap: 6px; }~~

.md-ref-container { margin-top: 10px; width: 100%; box-sizing: border-box; }

.md-ref-details { background: #f8fafc; border-left: 3px solid #4f46e5; border-radius: 10px; overflow: hidden; border-top:1px solid #f1f5f9; border-right:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9; transition: 0.3s; }

~~/* Tampilan Referensi V8.0 (ACCORDION COLLAPSIBLE) */~~

.md-ref-details summary { display: flex; padding: 10px 14px; font-size: 0.85rem; font-weight: 700; color: #374151; cursor: pointer; user-select: none; list-style: none; flex-wrap: nowrap; align-items: center; gap: 8px; }

.md-ref-container { margin-top: ~~12px~~; width: 100%~~; max-width: 450px~~; box-sizing: border-box; }

.md-ref-details summary::-webkit-details-marker { display: none; }

.md-ref-~~summary~~ {

.md-ref-details[open] summary { border-bottom: 1px dashed #cbd5e1; background: #e0e7ff; color: #3730a3; }

background: #f8fafc; ~~padding~~: ~~8px 12px~~; border-radius: ~~8px~~; border: 1px solid #~~e2e8f0~~;

.md-ref-body { padding: 12px 14px; font-size: 0.85rem; display: flex; flex-direction: column; gap: 6px; }

~~display: flex; justify~~-~~content~~: ~~space-between~~; ~~align~~-~~items~~: ~~center~~; ~~cursor: pointer;~~

transition: ~~all~~ 0.~~2s; user-select: none~~;

}

.md-ref-summary~~:hover~~ { ~~background~~: ~~#f1f5f9~~; ~~border-color~~: ~~#cbd5e1~~; }

~~.md~~-~~ref-summary.open { border-bottom-left-radius~~: 0; ~~border~~-~~bottom-right-radius~~: 0; ~~border-bottom-~~color: ~~transparent~~; ~~background~~: ~~#f1f5f9~~; }

~~.md~~-~~ref-tag { font-size~~: ~~0.8rem~~; ~~font~~-~~weight~~: ~~700~~; ~~color~~: ~~#4f46e5; display: flex~~; align-items: center; gap: ~~6px~~; }

.md-ref-~~toggle { color~~: ~~#94a3b8; transition~~: ~~transform 0.3s;~~ display: ~~flex; align-items: center~~; }

.md-ref-summary~~.open~~ .md-ref-~~toggle~~ { ~~transform~~: ~~rotate(180deg)~~; ~~color~~: ~~#4f46e5~~; }

.md-~~ref~~-~~body~~ {

.md-verified-badge { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; vertical-align: middle; transition: transform 0.2s; flex-shrink: 0; }

~~background~~: ~~#fff~~; ~~padding~~: ~~12px; border: 1px solid #e2e8f0; border~~-~~top: none~~;

.md-verified-badge:hover { transform: scale(1.1); }

~~border~~-~~bottom-left-radius~~: ~~8px~~; ~~border~~-~~bottom-right-radius~~: ~~8px~~; ~~font~~-~~size: 0.85rem;~~

.md-btn-visit { background: #f1f5f9; color: #0f172a; padding: 6px 12px; border-radius: 6px; text-decoration: none; font-size: 0.8rem; display: inline-block; width: fit-content; margin-top: 6px; font-weight:700; border:1px solid #cbd5e1; }

~~display: none; box-shadow~~: 0 4px ~~6px -1px rgba(0, 0, 0, 0.05)~~;

.md-btn-visit:hover { background: #e2e8f0; text-decoration:none; }

}

~~.md~~-~~ref-header { font-weight~~: ~~800~~; ~~color~~: ~~#0f172a; margin-bottom: 8px; display: block; word-break: break-word; line-height: 1~~.~~3; }~~

~~.md-ref-details-grid { display: flex~~; flex-~~direction~~: ~~column; gap: 4px; margin-bottom: 12px~~; }

.md-~~ref~~-~~detail-row { display~~: ~~flex; flex-wrap: wrap; gap: 4px; font-size: 0.82rem; }~~

~~.md-ref-lbl~~ { ~~font-weight~~: ~~700; color: #64748b; }~~

.~~md-ref-val { color: #334155; font-weight: 500~~; }

.md-btn-visit {

~~display: inline-flex; align-items: center; gap: 6px;~~ background: #~~eff6ff~~; color: #~~2563eb~~;

padding: 6px 12px; border-radius: 6px; ~~font~~-~~weight~~: ~~700~~; font-size: 0.8rem; ~~text~~-~~decoration~~: ~~none~~;

~~transition~~: ~~0.2s~~; border: 1px solid #~~bfdbfe; width: max-content~~;

}

.md-btn-visit:hover { background: #~~dbeafe~~; text-decoration: none~~; transform: translateY(-1px)~~; }

~~/* Media Sosial Badges V8 */~~

.md-preset-wrapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.md-~~social~~-~~group~~ { display: flex; flex-wrap: wrap; gap: ~~8px~~; margin-top: ~~10px~~; }

.md-preset-pill { background: #f1f5f9; border: 1px solid #cbd5e1; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; color: #475569; cursor: pointer; transition: 0.2s; }

.md-~~social~~-~~badge~~ {

.md-preset-pill:hover { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }

~~display~~: ~~inline-flex~~; ~~align-items~~: ~~center; gap: 6px~~; padding: ~~6px 12px~~; border-radius: ~~20px~~;

font-size: 0.~~8rem~~; font-weight: ~~700~~; color: ~~white~~; ~~text-decoration~~: ~~none~~; transition: ~~all~~ 0.2s;

~~box-shadow: 0 2px 4px rgba(0,0,0,0.1);~~

}

.md-~~social~~-~~badge~~:hover { ~~transform~~: ~~translateY(-2px) scale(1.02)~~; ~~opacity~~: ~~0.95~~; ~~box~~-~~shadow: 0 4px 8px rgba(0,0,0,0.15);~~ color: ~~white; text-decoration: none~~; }

~~/* Preset Pill Badges */~~

.md-form-box { background: #ffffff; border-radius: 12px; padding: 18px; margin-top: 16px; border: 1px solid #cbd5e1; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }

.md-~~preset~~-~~wrapper~~ { ~~display~~: ~~flex~~; ~~flex~~-~~wrap~~: ~~wrap~~; ~~gap~~: ~~6px~~; margin-top: ~~8px; }~~

.md-form-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin: 0 0 16px 0; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; }

~~.md-preset-pill {~~

.md-form-group { margin-bottom: 14px; }

~~background: #f8fafc~~; border: 1px solid #~~e2e8f0~~; ~~padding~~: 4px ~~10px~~; ~~border~~-~~radius: 12px;~~

.md-form-group label { display: flex; align-items:center; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; color: #334155; }

font-size: 0.~~75rem~~; font-weight: ~~700~~; color: #~~64748b~~; ~~cursor~~: ~~pointer~~; ~~transition~~: ~~0.2s~~;

}

.md-~~preset~~-~~pill:hover~~ { ~~background: #4f46e5; color: #fff; border~~-~~color~~: ~~#4f46e5~~; }

~~/* Form Elements */~~

.md-form-~~box~~ { ~~background~~: ~~#ffffff~~; ~~border~~-~~radius~~: ~~16px~~; ~~padding: 24px; margin~~-~~top: 24px; border: 1px solid #e2e8f0; box-shadow~~: ~~0 10px 40px rgba(0,0,0,~~0.~~06)~~; ~~animation~~: ~~slideDown 0.3s ease~~; }

~~@keyframes slideDown { from { opacity: 0; transform: translateY(~~-~~10px); } to { opacity~~: 1; ~~transform~~: ~~translateY(0)~~; } }

~~.md-form-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin: 0 0 20px 0; border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; }~~

.md-input, .md-select, .md-textarea { width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; font-family: inherit; font-size: 0.9rem; transition: 0.2s; background: #fff; }

~~.md-form-group { margin-bottom: 18px; }~~

.md-input:focus, .md-select:focus, .md-textarea:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }

~~.md-form-group label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: #334155; }~~

.md-input, .md-select, .md-textarea {

width: 100%; padding: ~~10px 14px~~; border: ~~2px~~ solid #~~e2e8f0~~; border-radius: ~~10px~~;

box-sizing: border-box; font-family: inherit; font-size: 0.~~95rem~~; transition: 0.2s; background: #~~fafafa~~;

}

.md-input:focus, .md-select:focus, .md-textarea:focus { border-color: #~~6366f1; background: #fff~~; outline: none; box-shadow: 0 0 0 ~~4px~~ rgba(99, ~~102~~, ~~241~~, 0.1); }

.md-ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: ~~14px~~; background: #f8fafc; padding: ~~16px~~; border-radius: ~~12px~~; border: 1px dashed #cbd5e1; }

/* Autocomplete Styles */

.md-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: ~~12px~~; background: #f1f5f9; padding: ~~16px~~; border-radius: ~~12px~~; border: 1px solid #~~e2e8f0~~; max-height: ~~320px~~; overflow-y: auto; }

.md-autocomplete-wrapper { position: relative; width: 100%; }

.md-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; display: none; max-height: 200px; overflow-y: auto; margin-top: -2px; }

.md-autocomplete-item { padding: 10px 12px; font-size: 0.88rem; color: #0f172a; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: 0.2s; display: flex; align-items: center; gap: 8px; }

.md-autocomplete-item:last-child { border-bottom: none; }

.md-autocomplete-item:hover { background: #f8fafc; color: #4f46e5; padding-left: 16px; }

.md-ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px dashed #cbd5e1; }

.md-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #f1f5f9; padding: 12px; border-radius: 8px; border: 1px solid #cbd5e1; max-height: 280px; overflow-y: auto; }

.md-grid-full { grid-column: span 2; }

.md-~~form~~-~~actions~~ { ~~display~~: ~~flex~~; ~~gap~~: 12px; ~~align~~-~~items~~: ~~center~~; ~~margin~~-~~top~~: ~~24px~~; ~~padding~~-~~top~~: ~~16px~~; border-~~top~~: ~~1px~~ solid #~~e2e8f0~~; ~~flex~~-~~wrap~~: ~~wrap~~; }

.md-cc0-notice { background: #fef2f2; color: #991b1b; padding: 12px; border-radius: 8px; font-size: 0.82rem; line-height: 1.4; border-left: 4px solid #ef4444; margin-top: 15px; margin-bottom: 15px; }

.md-~~btn~~ {

.md-edit-meta { background: #f8fafc; padding: 12px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #e2e8f0; display:flex; flex-direction:column; gap:10px; }

padding: 12px ~~20px~~; border: ~~none~~; border-~~radius~~: 10px; ~~font~~-~~weight~~: ~~800~~; cursor: pointer;

color: ~~white~~; font-size: 0.~~9rem~~; ~~transition~~: 0.2s; display: ~~inline~~-flex; align-items: center~~; gap: 8px~~; justify-content: center;

.md-help-icon { color: #64748b; cursor: pointer; margin-left: 6px; display:inline-flex; align-items:center; }

}

.md-help-icon:hover { color: #4f46e5; }

.md-~~btn~~:~~hover~~:~~not(~~:~~disabled) { transform~~: ~~translateY(~~-~~2px)~~; box-shadow: 0 ~~4px 12px~~ rgba(0,0,0,0.15); }

.md-tooltip-popup { position: absolute; background: #1e293b; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 0.8rem; width: 260px; max-width: calc(100vw - 30px); z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.15); display: none; line-height: 1.4; text-align: left; font-weight:normal; }

.md-btn:~~active~~:not(:disabled) { transform: translateY(0); }

.md-tooltip-popup::after { content: ''; position: absolute; border-width: 6px; border-style: solid; border-color: #1e293b transparent transparent transparent; top: 100%; left: 15px; }

.md-btn-save { background: linear-gradient(135deg, #4f46e5, #4338ca); flex: 1; min-width: ~~150px~~; }

.md-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }

.md-modal-box { background: #fff; padding: 24px; border-radius: 12px; max-width: 400px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); animation: mdPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

@keyframes mdPopIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.md-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding-top: 14px; border-top: 1px solid #e2e8f0; flex-wrap: wrap; }

.md-btn { padding: 10px 18px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; color: white; font-size: 0.85rem; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }

.md-btn:hover:not(:disabled) { transform: translateY(-1px); }

.md-btn-save { background: linear-gradient(135deg, #4f46e5, #4338ca); flex: 1; min-width: 140px; }

.md-btn-cancel { background: #64748b; }

.md-btn-delete { background: #~~ef4444~~; margin-left: auto; }

.md-btn-draft { background: #10b981; }

.md-btn-delete { background: #dc2626; margin-left: auto; }

.md-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: md-spin 0.8s linear infinite; }

.md-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-radius: 50%; border-top-color: #fff; animation: md-spin 0.8s linear infinite; }

.is-loading .md-spinner { display: inline-block; }

@keyframes md-spin { to { transform: rotate(360deg); } }

/* Mobile Optimized Layout (Seluler) */

@media (max-width: 600px) {

#mippedia-data-app { padding: ~~16px~~; margin: ~~16px~~ 0; border-radius: ~~14px~~; }

#mippedia-data-app { padding: 14px; margin: 14px 0; border-radius: 12px; }

.md-header { flex-direction: column; align-items: flex-start; gap: ~~12px~~; }

.md-header { flex-direction: column; align-items: flex-start; gap: 10px; }

.md-actions { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: ~~4px~~; }

.md-actions { width: 100%; justify-content: flex-start; overflow-x:auto; padding-bottom:5px; }

.md-btn-icon { padding: ~~8px~~ 12px; font-size: 0.8rem~~; flex-shrink: 0~~; }

.md-btn-icon { padding: 7px 12px; font-size: 0.8rem; }

.md-ref-grid, .md-social-grid { grid-template-columns: 1fr; }

.md-grid-full { grid-column: span 1; }

.md-form-actions { flex-direction: column; width: 100%; }

.md-btn { width: 100%; margin: 0 !important; }

.md-row-display { padding: ~~14px~~ 10px; flex-direction: column; }

.md-row-display { padding: 12px 10px; flex-direction:column; align-items:stretch;}

.md-~~row-actions~~ { ~~flex-direction: row; width: 100%; justify~~-~~content~~: flex-end; margin-top: ~~10px~~; ~~border~~-~~top~~: ~~1px dashed #e2e8f0; padding~~-~~top: 10px~~; }

.edit-btn { align-self:flex-end; margin-top:8px; }

.md-ref-details summary { align-items: flex-start; }

}

.md-native-render { display: none; }

Baris 272:

Baris 247:

$('<style>').text(css).appendTo('head');

// 7. PARSER & PENYIMPANAN DATA

// 6. POPUP, MODAL & TOOLTIPS

function showModal(title, text) {

$('.md-modal-overlay').remove();

var $overlay = $('<div class="md-modal-overlay"></div>');

var $box = $('<div class="md-modal-box"><h3 style="margin-top:0; color:#0f172a;">' + sanitizeHTML(title) + '</h3><p style="font-size:0.9rem; color:#475569; margin:15px 0;">' + sanitizeHTML(text) + '</p><button class="md-btn md-btn-save" style="width:100%;">Tutup & Mengerti</button></div>');

$box.find('button').on('click', function() { $overlay.remove(); });

$overlay.append($box);

$('body').append($overlay);

}

function initTooltips() {

$('.md-help-icon').off('click').on('click', function(e) {

$('.md-tooltip-popup').remove();

e.stopPropagation();

var $icon = $(this);

var text = sanitizeHTML($icon.data('help'));

var $tt = $('<div class="md-tooltip-popup">' + text + '</div>');

$('body').append($tt);

var offset = $icon.offset();

var ttWidth = $tt.outerWidth();

var winWidth = $(window).width();

var leftPos = offset.left - 15;

if (leftPos + ttWidth > winWidth - 15) leftPos = winWidth - ttWidth - 15;

if (leftPos < 10) leftPos = 10;

$tt.css({ top: offset.top - $tt.outerHeight() - 10, left: leftPos }).fadeIn(200);

});

$(document).off('click.mdtt').on('click.mdtt', function() { $('.md-tooltip-popup').fadeOut(200, function(){ $(this).remove(); }); });

}

// 7. PARSER WIKITEXT & PENYIMPANAN DATA

function loadData() {

return api.get({

Baris 284:

Baris 291:

dataItems = parsed.items || [];

isLocked = parsed.locked || false;

} catch(e) { console.error("JSON Error", e~~); showToast('Gagal memuat struktur JSON!', 'error'~~); }

} catch(e) { console.error("JSON Error", e); }

}

return content;

Baris 318:

Baris 325:

if (refObj.site) details.push("Situs: " + refObj.site);

if (refObj.publisher) details.push("Penerbit: " + refObj.publisher);

if (refObj.date) details.push("~~Diakses~~: " + formatIndonesianDate(refObj.date));

if (refObj.date) details.push("Tanggal Akses: " + formatIndonesianDate(refObj.date));

if (refObj.type) details.push("Jenis: " + refObj.type + (refObj.subType ? " (" + refObj.subType + ")" : ""));

if (details.length > 0) text += " — <small>" + details.join(" • ") + "</small>";

Baris 324:

Baris 332:

}

function saveData(actionType, $btnEl, originalContent, ~~callback~~) {

function saveData(actionType, $btnEl, originalContent, customSummary, isMinorEdit) {

if ($btnEl) $btnEl.addClass('is-loading').prop('disabled', true);

var summaryTxt = customSummary ? ('Mippedia Data: ' + customSummary) : ('Mippedia Data V8.7: ' + actionType);

var jsonStr = JSON.stringify({ locked: isLocked, items: dataItems });

var wt = "\n";

Baris 347:

Baris 356:

api.postWithToken('csrf', {

action: 'edit', title: pageName, text: newContent, summary: ~~'Mippedia Data V8: ' + actionType~~, minor: false

action: 'edit', title: pageName, text: newContent, summary: summaryTxt, minor: isMinorEdit || false

}).done(function() {

localStorage.removeItem(~~'md_draft_' + pageName~~); ~~// Hapus draft jika sukses~~

localStorage.removeItem(DRAFT_KEY);

~~if(callback) callback();~~

var nocacheUrl = location.pathname + "?refresh=" + new Date().getTime();

~~else {~~

window.location.href = nocacheUrl;

~~showToast('Berhasil disimpan! Memuat ulang...', 'success');~~

~~setTimeout(function() { window.location.href~~ = location.pathname + "?refresh=" + new Date().getTime(~~); }, 1000~~);

}

}).fail(function(err) {

if ($btnEl) $btnEl.removeClass('is-loading').prop('disabled', false);

~~showToast~~("Gagal menyimpan: " + err~~, 'error'~~);

alert("Gagal menyimpan! Error: " + err);

});

}

Baris 365:

Baris 371:

var $app = $('<div id="mippedia-data-app"></div>');

~~// HEADER~~

var $header = $('<div class="md-header"></div>');

var $titleContainer = $('<div class="md-title-container"><h3 class="md-title">' + svgEdit + ' Data Terstruktur</h3></div>');

var $actions = $('<div class="md-actions"></div>');

~~// Tombol Ekspor/Impor JSON Baru~~

var $jsonBtn = $('<button class="md-btn-icon" title="Ekspor/Impor JSON">' + svgCode + ' JSON</button>');

var $jsonBtn = $('<button class="md-btn-icon" title="Ekspor/Impor ~~File~~ JSON">' + ~~svgDownload~~ + ' ~~Data~~ JSON</button>');

$jsonBtn.on('click', function() { showJsonModal(rawContent); });

$actions.append($jsonBtn);

if (isSysop) {

var $lockBtn = $('<button class="md-btn-icon ' + (isLocked ? 'md-btn-unlock' : 'md-btn-lock') + '">' + (isLocked ? svgUnlock + ' Buka Kunci' : svgLock + ' Kunci') + ' ~~<span class="md-spinner"></span>~~</button>');

var $lockBtn = $('<button class="md-btn-icon ' + (isLocked ? 'md-btn-unlock' : 'md-btn-lock') + '">' + (isLocked ? svgUnlock + ' Buka Kunci' : svgLock + ' Kunci') + '</button>');

$lockBtn.on('click', function() {

isLocked = !isLocked;

Baris 385:

Baris 389:

if (!isLocked || isSysop) {

var $addBtn = $('<button class="md-btn-icon" ~~style~~="~~background:#4f46e5; color:white; border-color:#4338ca;~~">' + svgEdit + ' Tambah ~~Baru~~</button>');

var $addBtn = $('<button class="md-btn-icon" title="Tambah Data Baru">' + svgEdit + ' Tambah</button>');

$addBtn.on('click', function() { showForm(-1, rawContent); });

$actions.append($addBtn);

Baris 393:

Baris 397:

$app.append($header);

// ~~SEARCH BAR~~

// Tampilkan kotak pencarian jika data banyak

if (dataItems.length > 2) {

var $searchBox = $('<div class="md-search-box"><span class="md-search-icon">' + svgSearch + '</span><input type="text" class="md-search-input" placeholder="Cari data terstruktur ~~(misal: Tanggal Lahir)~~..."></div>');

var $searchBox = $('<div class="md-search-box"><span class="md-search-icon">' + svgSearch + '</span><input type="text" class="md-search-input" placeholder="Cari data terstruktur..."></div>');

$searchBox.find('input').on('keyup input', function() {

var q = $(this).val().toLowerCase();

Baris 406:

Baris 410:

}

// ~~DAFTAR BARIS DATA~~

// MENGUMPULKAN MEDIA SOSIAL GLOBAL (Memisahkan media sosial ke atas)

var globalSocials = {};

dataItems.forEach(function(item) {

if (item.isPersonOrg && item.socials) {

Object.assign(globalSocials, item.socials);

}

});

if (Object.keys(globalSocials).length > 0) {

var $topSocials = $('<div class="md-global-social-box"></div>');

$topSocials.append('<div class="md-social-box-title">Media Sosial & Platform Resmi</div>');

var $socialGroupGlobal = $('<div class="md-social-group"></div>');

Object.keys(SOCIAL_PLATFORMS).forEach(function(key) {

var uname = globalSocials[key];

if (uname) {

var platform = SOCIAL_PLATFORMS[key];

var fullUrl = platform.base + uname.replace(/^@/, '');

var $badge = $('<a class="md-social-badge" href="' + sanitizeHTML(fullUrl) + '" target="_blank" rel="noopener noreferrer" style="background:' + platform.color + ';">' + platform.icon + ' ' + sanitizeHTML(platform.name) + '</a>');

$socialGroupGlobal.append($badge);

}

});

$topSocials.append($socialGroupGlobal);

$app.append($topSocials);

}

var $list = $('<div class="md-list"></div>');

if (dataItems.length === 0) {

$list.append('<div style="text-align:center; padding: ~~40px 20px~~; background:#f8fafc; border-radius:~~12px~~; border:~~2px~~ dashed #cbd5e1; ~~color:#64748b;"><h4>Belum ada data!</h4><p style="~~font-size:0.~~9rem; margin-top:8px~~;">Klik ~~tombol~~ <b>Tambah ~~Baru~~</b> ~~di atas~~ untuk ~~mulai~~ membuat ~~struktur~~.~~</p>~~</div>');

$list.append('<div style="color:#64748b; text-align:center; padding: 25px 10px; background:#f8fafc; border-radius:10px; border:1px dashed #cbd5e1; font-size:0.88rem;">Belum ada data terstruktur. Klik <b>Tambah</b> untuk membuat baru.</div>');

} else {

dataItems.forEach(function(item, index) {

var $row = $('<div class="md-row-display"></div>');

var $info = $('<div class="md-data-group"></div>');

$info.append('<span class="md-data-label">' + item.prop + '</span>');

$info.append('<span class="md-data-label">' + sanitizeHTML(item.prop) + '</span>');

~~// RENDER NILAI DATA~~

var displayValHtml = '';

var rawVal = item.val || '';

if (rawVal.match(/^https?:\/\//i)) {

~~var domain = extractDomain(rawVal);~~

displayValHtml = '<a href="' + sanitizeHTML(rawVal) + '" target="_blank" rel="noopener noreferrer" style="color:#2563eb; font-weight:700; text-decoration:none;">' + extractDomain(rawVal) + '</a>';

displayValHtml = '<a href="' + rawVal + '" target="_blank" style="color:#2563eb; text-decoration:none;">' + ~~domain~~ + '</a>';

} else if (item.linkTarget && item.linkTarget.trim() !== '') {

displayValHtml = '<a href="' + mw.util.getUrl(item.linkTarget.trim()) + '" style="color:#2563eb; text-decoration:none;">' + rawVal + '</a>';

displayValHtml = '<a href="' + mw.util.getUrl(item.linkTarget.trim()) + '" style="color:#2563eb; font-weight:700; text-decoration:none;">' + sanitizeHTML(rawVal) + '</a>';

} else if (item.linkSplit) {

var parts = rawVal.split(/([,/\s]+dan\s+|[,/\s]+atau\s+|[,/]+)/gi);

Baris 430:

Baris 457:

var trimmed = p.trim();

if (trimmed && !p.match(/^[,/\s]+$/) && trimmed.toLowerCase() !== 'dan' && trimmed.toLowerCase() !== 'atau') {

return '<a href="' + mw.util.getUrl(trimmed) + '" style="color:#2563eb; text-decoration:none;">' + trimmed + '</a>';

return '<a href="' + mw.util.getUrl(trimmed) + '" style="color:#2563eb; font-weight:700; text-decoration:none;">' + sanitizeHTML(trimmed) + '</a>';

}

return p;

return sanitizeHTML(p);

}).join('');

} else if (item.link) {

displayValHtml = '<a href="' + mw.util.getUrl(rawVal) + '" style="color:#2563eb; text-decoration:none;">' + rawVal + '</a>';

displayValHtml = '<a href="' + mw.util.getUrl(rawVal) + '" style="color:#2563eb; font-weight:700; text-decoration:none;">' + sanitizeHTML(rawVal) + '</a>';

} else {

displayValHtml = rawVal;

displayValHtml = sanitizeHTML(rawVal);

}

Baris 443:

Baris 470:

$valWrap.append('<span class="md-data-value">' + displayValHtml + '</span>');

var $copyBtn = $('<button class="md-btn-copy" title="Salin ~~nilai~~ teks">' + svgCopy + '</button>');

var $copyBtn = $('<button class="md-btn-copy" title="Salin teks">' + svgCopy + '</button>');

$copyBtn.on('click', function() {

navigator.clipboard.writeText(rawVal);

~~showToast~~('~~Teks disalin!~~', '~~success~~');

$(this).css('color', '#16a34a');

setTimeout(function(){ $copyBtn.css('color', '#94a3b8'); }, 1200);

});

$valWrap.append($copyBtn);

$info.append($valWrap);

~~// RENDER MEDIA SOSIAL & MUSIK~~

~~if (item.isPersonOrg && item.socials) {~~

~~var $socialGroup = $('<div class="md-social-group"></div>');~~

~~var hasSocial = false;~~

~~Object.keys(SOCIAL_PLATFORMS).forEach(function(key) {~~

~~var uname = item.socials[key];~~

~~if (uname) {~~

~~hasSocial = true;~~

~~var platform = SOCIAL_PLATFORMS[key];~~

~~var fullUrl = platform.base + uname.replace(/^@/, '');~~

~~var $badge = $('<a class="md-social-badge" href="' + fullUrl + '" target="_blank" style="background:' + platform.color + ';">' + platform.icon + ' ' + platform.name + '</a>');~~

~~$socialGroup.append($badge);~~

}

~~});~~

~~if (hasSocial) $info.append($socialGroup);~~

}

~~// RENDER REFERENSI EKSPLISIT (V8 ACCORDION)~~

if (item.ref && (item.ref.url || item.ref.title)) {

var ref = item.ref;

var ~~$refContainer~~ = $('<~~div~~ class="md-~~ref~~-~~container~~"></~~div~~>');

var isVer = isVerifiedSite(ref.url);

var verBadgeHtml = isVer ? '<span class="md-verified-badge" title="Situs Populer Terverifikasi">' + svgVerified + '</span>' : '';

var ~~siteNameLabel~~ = ref.~~site || extractDomain~~(ref.url) ~~|| "Referensi"~~;

var safeUrl = ref.url ? ensureHttps(ref.url) : '';

var ~~$refSummary = $('<div class~~=~~"md-~~ref~~-summary"~~ title~~="Klik untuk lihat detail referensi"><span class=~~"~~md-ref-tag~~"~~>' + svgRef + ' 1 Referensi (' + siteNameLabel + ')</span><span class="md-ref-toggle">' + svgChevronDown + '</span></div>');~~

var refTitle = ref.title || "Sumber Rujukan";

~~var $refBody = $('<div class="md-ref-body"></div>')~~;

var ~~refTitle~~ = ~~ref.title || "Sumber Rujukan";~~

var $refContainer = $('<div class="md-ref-container"></div>');

$~~refBody.append~~('<~~span~~ class="md-ref-~~header~~">~~' + refTitle + '~~</~~span~~>');

var $refDetails = $(`

var $~~detailsGrid~~ = $('<~~div~~ class="md-ref-details-~~grid~~"></div>~~');~~

~~if (ref.author) $detailsGrid.append('~~<div ~~class~~="md-~~ref~~-~~detail-row~~"><span ~~class~~="md-~~ref~~-~~lbl~~">~~Penulis:~~</span><~~span~~ class="md-ref-~~val~~">~~' +~~ ref.author + '</span></div>');

<div style="color:#4f46e5; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0;">${svgRef} REFERENSI:</div>

~~if (~~ref.site~~) $detailsGrid.append(~~'<div ~~class="md-ref-detail-row"~~><span ~~class~~="md-~~ref-lbl~~">Situs~~/Penerbit~~:</span~~><span class="md-ref-val"~~>' + ref.site + (ref.publisher ? ' / ' + ref.publisher ~~: ''~~) + '~~</span>~~</div>');

~~if (~~ref.date~~) $detailsGrid.append(~~'<div ~~class="md-ref-detail-row"~~><span ~~class~~="md-~~ref-lbl~~">~~Diakses~~:</span~~><span class="md-ref-val"~~>' + formatIndonesianDate(ref.date) + '~~</span>~~</div>');

<span style="word-break:break-word; line-height:1.3;">${sanitizeHTML(refTitle)}</span>${verBadgeHtml}

~~if (~~ref.type~~) $detailsGrid.append(~~'<div ~~class~~="md-~~ref-detail-row~~"><span ~~class~~="md-~~ref~~-~~lbl">Tipe~~:~~</span><span class="md~~-~~ref-val~~">' + ref.type + (ref.subType ? ' - ' + ref.subType : '') + '</span></div>');

</div>

</summary>

${ref.author ? '<div><span style="color:#64748b; font-weight:700;">Penulis:</span> ' + sanitizeHTML(ref.author) + '</div>' : ''}

${ref.site ? '<div><span style="color:#64748b; font-weight:700;">Situs:</span> ' + sanitizeHTML(ref.site) + '</div>' : ''}

${ref.publisher ? '<div><span style="color:#64748b; font-weight:700;">Penerbit:</span> ' + sanitizeHTML(ref.publisher) + '</div>' : ''}

${ref.date ? '<div><span style="color:#64748b; font-weight:700;">Tanggal Akses:</span> ' + formatIndonesianDate(ref.date) + '</div>' : ''}

${ref.type ? '<div style="margin-top:4px;"><span style="background:#e2e8f0; padding:2px 8px; border-radius:6px; font-weight:700; font-size:0.75rem;">' + sanitizeHTML(ref.type) + (ref.subType ? ' • ' + sanitizeHTML(ref.subType) : '') + '</span></div>' : ''}

${safeUrl ? '<a href="' + sanitizeHTML(safeUrl) + '" target="_blank" rel="noopener noreferrer" class="md-btn-visit">Kunjungi Situs</a>' : ''}

</div>

</details>

`);

$~~refBody~~.~~append~~(~~$detailsGrid);~~

$refDetails.find('.md-verified-badge').on('click', function(e) {

e.preventDefault(); e.stopPropagation();

~~if (ref.url) {~~

showModal('Situs Terverifikasi', 'Centang biru menandakan bahwa URL referensi ini valid dan berasal dari entitas, media publikasi besar, portal populer, atau pangkalan data resmi (seperti Kompas, YouTube, Apple Music, Spotify, dll) yang bereputasi kredibel.');

~~var safeUrl = ensureHttps(ref.url);~~

~~$refBody~~.~~append('<a href="' + safeUrl + '" target="_blank" class="~~md-~~btn~~-~~visit">' + svgExternal + ' Kunjungi Situs</a>~~');

}

~~$refSummary~~.on('click', function() {

~~$refBody~~.~~slideToggle~~(~~200~~);

$(~~this~~).~~toggleClass('open~~');

});

$refContainer.append($~~refSummary).append($refBody~~);

$refContainer.append($refDetails);

$info.append($refContainer);

}

Baris 504:

Baris 518:

$row.append($info);

if (!~~isLocked ||~~ isSysop) {

if (isLocked && !isSysop) {

var $~~actionsGroup = $('<div class="md-row-actions"></div>');~~

var $lockNotifyBtn = $('<button class="md-btn-icon edit-btn" style="color:#dc2626; border-color:#fca5a5; background:#fef2f2;">' + svgLock + ' Terkunci</button>');

$lockNotifyBtn.on('click', function() {

~~// Urutkan Atas/Bawah (Fitur Baru)~~

showModal('Halaman Dikunci', 'Halaman Data Terstruktur ini sedang dikunci sementara oleh pengurus untuk melindungi dari vandalisme atau perubahan yang tidak sah. Pengguna biasa atau anonim tidak dapat mengedit saat ini.');

~~var $btnUp~~ = $('<button class="md-btn-icon~~" style="padding:4px 6px;" title="Pindah ke Atas" ' + (index === 0 ? 'disabled style="opacity:0.3; cursor:not-allowed;"' : '') + '>' + svgArrowUp + '</button>');~~

~~var $btnDown = $('<button class="md~~-btn~~-icon~~" style="~~padding~~:~~4px 6px~~;~~" title="Pindah ke Bawah" ' + (index === dataItems.length~~-~~1 ? 'disabled style="opacity~~:~~0.3~~; ~~cursor~~:~~not-allowed~~;"~~' : '') + '~~>' + ~~svgArrowDown~~ + '</button>');

$~~btnUp~~.on('click', function() {

~~if(index > 0) {~~

~~var temp = dataItems[index-1];~~

~~dataItems[index-1] = dataItems[index];~~

~~dataItems[index] = temp;~~

~~saveData~~('~~Mengubah urutan~~', ~~$(this), rawContent~~);

}

});

$~~btnDown~~.on(~~'click', function() {~~

$row.append($lockNotifyBtn);

~~if(index < dataItems.length-1) {~~

} else {

~~var temp = dataItems[index+1];~~

var $editIcon = $('<button class="md-btn-icon edit-btn">' + svgEdit + ' Edit</button>');

~~dataItems[index+1] = dataItems[index];~~

~~dataItems[index] = temp;~~

~~saveData('Mengubah urutan',~~ $~~(this), rawContent~~);

}

~~});~~

var $editIcon = $('<button class="md-btn-icon edit-btn~~" style="padding:6px 12px; margin-top:4px;~~">' + svgEdit + ' Edit</button>');

$editIcon.on('click', function() { showForm(index, rawContent); });

$row.append($editIcon);

~~var~~ $~~orderWrap = $('<div style="display:flex; gap:4px; justify-content:flex-end;"></div>').append($btnUp).append($btnDown);~~

~~$actionsGroup.append($orderWrap)~~.append($editIcon);

~~$row.append($actionsGroup~~);

}

$list.append($row);

});

Baris 547:

Baris 542:

}

// 9. FORM EDIT ~~DENGAN PRESET~~ & ~~PLATFORM LENGKAP~~

// 9. FORM EDIT & DRAFT LOGIC

function showForm(index, rawContent) {

var $container = $('#md-form-container');

var $container = $('#md-form-container').empty();

~~$container~~.empty();

var isNew = index === -1;

var draftData = localStorage.getItem(DRAFT_KEY);

var currentData = isNew ? { prop: '', val: '', link: false, linkTarget: '', linkSplit: false, ref: {}, isPersonOrg: false, socials: {} } : dataItems[index];

~~// Cek Draft LocalStorage~~

if (isNew && draftData) {

~~var draftKey = 'md_draft_' + pageName;~~

if(confirm("Anda memiliki draft yang belum tersimpan sebelumnya. Ingin melanjutkan draft tersebut?")) {

~~var savedDraft = localStorage.getItem(draftKey);~~

try { currentData = JSON.parse(draftData); } catch(e) {}

if (isNew && ~~savedDraft~~) {

}

~~try~~ {

currentData = JSON.parse(~~savedDraft);~~

~~showToast('Memulihkan draft yang belum tersimpan...', 'warning'~~);

} catch(e) {}

}

Baris 571:

Baris 562:

$form.append('<h4 class="md-form-title">' + (isNew ? 'Tambah Data Baru' : 'Edit Data Terstruktur') + '</h4>');

~~// Label Data~~

var $propGroup = $('<div class="md-form-group"></div>');

var $propGroup = $('<div class="md-form-group"><label>Label Data (~~Cth~~: Pekerjaan, Sutradara)</label><input type="text" id="md-inp-prop" class="md-input ~~md-track-draft~~" value="' + (currentData.prop || '') + '"~~></div~~>');

$propGroup.append('<label>Label Data <span class="md-help-icon" data-help="Nama bidang data (contoh: Pekerjaan, Sutradara, Tempat Lahir). Klik tombol preset di bawah untuk isi otomatis.">' + svgHelp + '</span></label>');

$propGroup.append('<input type="text" id="md-inp-prop" class="md-input" value="' + sanitizeHTML(currentData.prop || '') + '">');

var $presetWrap = $('<div class="md-preset-wrapper"></div>');

PRESET_LABELS.forEach(function(lbl) {

var $pill = $('<span class="md-preset-pill">' + lbl + '</span>');

$pill.on('click', function() { $('#md-inp-prop').val(lbl~~).trigger('input'~~); });

$pill.on('click', function() { $('#md-inp-prop').val(lbl); });

$presetWrap.append($pill);

});

Baris 582:

Baris 575:

$form.append($propGroup);

~~// Nilai Data~~

var $valBox = $('<div class="md-form-group"></div>');

$valBox.append('<label>Nilai ~~/ Konten~~ Data<~~/label><input type="text" id~~="md-~~inp~~-~~val~~" ~~class="md-input md-track~~-~~draft" value~~="~~' +~~ (~~currentData~~.~~val ||~~ '') + '">');

$valBox.append('<label>Nilai Data <span class="md-help-icon" data-help="Ketik nilai. Jika halaman sudah ada di Wiki, saran akan muncul (pratinjau) dan otomatis mencentang opsi Wikilink.">' + svgHelp + '</span></label>');

var $wikilinkOpts = $('<div style="margin-top:~~10px~~; display:flex; flex-direction:column; gap:8px; background:#f8fafc; padding:~~12px~~; border-radius:~~10px~~; border:1px solid #e2e8f0;"></div>');

// FITUR AUTOCOMPLETE PRATINJAU DIMULAI DI SINI

var $autoWrap = $('<div class="md-autocomplete-wrapper"></div>');

var $valInput = $('<input type="text" id="md-inp-val" class="md-input" autocomplete="off" value="' + sanitizeHTML(currentData.val || '') + '">');

var $autoList = $('<div class="md-autocomplete-list"></div>');

$autoWrap.append($valInput).append($autoList);

$valBox.append($autoWrap);

var $wikilinkOpts = $('<div style="margin-top:8px; display:flex; flex-direction:column; gap:8px; background:#f8fafc; padding:10px; border-radius:8px; border:1px solid #e2e8f0;"></div>');

var chkLink = currentData.link ? 'checked' : '';

var chkSplit = currentData.linkSplit ? 'checked' : '';

$~~wikilinkOpts.append~~('<label style="display:flex; align-items:center; gap:8px; font-size:0.~~85rem~~; font-weight:700; cursor:pointer;"><input ~~type~~=~~"checkbox" id~~=~~"md-inp-link"~~ class="md-~~track~~-~~draft~~" ' + ~~chkLink~~ + '~~> Jadikan Wikilink Standar~~</~~label~~>');

var $linkCheck = $('<input type="checkbox" id="md-inp-link" ' + chkLink + '>');

$wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.~~85rem~~; font-weight:700; cursor:pointer;"><input type="checkbox" id="md-inp-split~~" class="md-track-draft~~" ' + chkSplit + '> Smart Split Wikilink ~~(Pecah koma/dan)~~</label>');

var $lblLinkCheck = $('<label style="display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; cursor:pointer;"></label>');

$lblLinkCheck.append($linkCheck).append(' Jadikan Wikilink Standar');

var $pipedGroup = $('<div style="margin-top:~~6px~~;"><label style="font-size:0.~~8rem~~; color:#475569;">Target Halaman ~~Piped~~ (Opsional):</label><input type="text" id="md-inp-target" class="md-input ~~md-track-draft~~" style="padding:~~8px 12px~~; font-size:0.85rem;" placeholder="Contoh: Diskografi Rumi Haitami" value="' + (currentData.linkTarget || '') + '"></div>');

// Logika pratinjau ketika diketik

var isAutoChecked = false;

$valInput.on('input', function() {

var q = $(this).val();

// Jika input dikosongkan/berubah, kembalikan centang link ke false jika tadinya otomatis centang

if (isAutoChecked) {

$linkCheck.prop('checked', false);

isAutoChecked = false;

}

if(q.length < 1) {

$autoList.empty().hide();

return;

}

// Panggil API MediaWiki Prefix Search

api.get({

action: 'query',

list: 'prefixsearch',

pssearch: q,

pslimit: 6,

format: 'json'

}).done(function(data) {

$autoList.empty();

if(data.query && data.query.prefixsearch && data.query.prefixsearch.length > 0) {

data.query.prefixsearch.forEach(function(res) {

var $item = $('<div class="md-autocomplete-item">' + svgSearch + ' ' + sanitizeHTML(res.title) + '</div>');

$item.on('click', function() {

$valInput.val(res.title);

$autoList.empty().hide();

$linkCheck.prop('checked', true); // OTOMATIS TERCENTANG

isAutoChecked = true;

});

$autoList.append($item);

});

$autoList.show();

} else {

$autoList.hide();

}

});

// Sembunyikan pratinjau saat klik di luar

$(document).on('click.mdauto', function(e) {

if(!$(e.target).closest('.md-autocomplete-wrapper').length) {

$autoList.hide();

}

});

$wikilinkOpts.append($lblLinkCheck);

$wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; cursor:pointer;"><input type="checkbox" id="md-inp-split" ' + chkSplit + '> Smart Split Wikilink</label>');

var $pipedGroup = $('<div style="margin-top:4px;"><label style="font-size:0.78rem; color:#475569; margin-bottom:4px;">Target Halaman Khusus (Opsional):</label><input type="text" id="md-inp-target" class="md-input" style="padding:6px 10px; font-size:0.85rem;" placeholder="Contoh: Diskografi Rumi Haitami" value="' + sanitizeHTML(currentData.linkTarget || '') + '"></div>');

$wikilinkOpts.append($pipedGroup);

$valBox.append($wikilinkOpts);

$form.append($valBox);

~~// MEDIA SOSIAL~~

var $socialSec = $('<div class="md-form-group" style="margin-top:16px;"></div>');

var $socialSec = $('<div class="md-form-group" style="margin-top:~~20px~~;"></div>');

var chkPerson = currentData.isPersonOrg ? 'checked' : '';

$socialSec.append('<label style="display:flex; align-items:center; gap:8px; cursor:pointer; background:#e0e7ff; padding:~~12px~~; border-radius:~~10px~~; font-weight:~~800~~; color:#3730a3;"><input type="checkbox" id="md-chk-person" class="md-~~track~~-~~draft~~" ' + ~~chkPerson~~ + '> ~~Aktifkan Profil Sosmed & Musik~~</label>');

$socialSec.append('<label style="display:flex; align-items:center; gap:8px; cursor:pointer; background:#e0e7ff; padding:10px; border-radius:8px; font-weight:700; color:#3730a3; font-size:0.85rem;"><input type="checkbox" id="md-chk-person" ' + chkPerson + '> Simpan Profil Media Sosial (Akan muncul di paling atas) <span class="md-help-icon" data-help="Centang ini untuk mengisi data sosial media. Datanya akan dihimpun dan dimunculkan di kotak teratas data struktur.">' + svgHelp + '</span></label>');

var $socialGrid = $('<div class="md-social-grid" id="md-social-box" style="display:' + (currentData.isPersonOrg ? 'grid' : 'none') + '; margin-top:~~10px~~;"></div>');

var $socialGrid = $('<div class="md-social-grid" id="md-social-box" style="display:' + (currentData.isPersonOrg ? 'grid' : 'none') + '; margin-top:8px;"></div>');

Object.keys(SOCIAL_PLATFORMS).forEach(function(key) {

var p = SOCIAL_PLATFORMS[key];

var valUname = currentSocials[key] || '';

$socialGrid.append('<div><label style="font-size:0.~~8rem~~; color:#334155; font-weight:700;">' + p.name + '</label><input type="text" id="md-soc-' + key + '" class="md-input ~~md-track-draft~~" placeholder="Username" value="' + valUname + '"></div>');

$socialGrid.append('<div><label style="font-size:0.78rem; color:#334155; font-weight:700; margin-bottom:4px;">' + p.name + '</label><input type="text" id="md-soc-' + key + '" class="md-input" placeholder="ID / Username" value="' + sanitizeHTML(valUname) + '"></div>');

});

$socialSec.append($socialGrid);

$form.append($socialSec);

~~// RUJUKAN LENGKAP (Otomatis deteksi domain)~~

var $refArea = $('<div class="md-form-group" style="margin-top:20px;"></div>');

var $refArea = $('<div class="md-form-group" style="margin-top:~~24px~~;"></div>');

$refArea.append('<label style="font-size:0.95rem; font-weight:800; color:#0f172a; margin-bottom:10px;">Sumber Referensi <span class="md-help-icon" data-help="Mohon berikan sumber referensi yang valid, kredibel, dan dapat dipertanggungjawabkan (seperti portal berita resmi, jurnal akademik ilmiah, buku cetak ber-ISBN, atau pangkalan data terverifikasi). Referensi yang kuat sangat membantu memastikan keakuratan informasi. Jika URL rujukan Anda mengarah ke situs web besar yang terverifikasi, sistem keamanan akan secara otomatis menampilkan lencana centang biru premium sebagai tanda sumber tepercaya.">' + svgHelp + '</span></label>');

$refArea.append('<label style="font-size:1.~~05rem~~; font-weight:800; color:#0f172a; ~~border-bottom:2px solid #e2e8f0; padding~~-bottom:~~8px~~;">Sumber Referensi</label>');

var $refGrid = $('<div class="md-ref-grid"></div>');

~~var $refGrid = $('<div class="md-ref-grid" style="margin-top:12px;"></div>');~~

var $typeSel = $('<select id="md-ref-type" class="md-select"><option value="">-- Pilih Tipe Utama --</option></select>');

var $typeSel = $('<select id="md-ref-type" class="md-select ~~md-track-draft~~"><option value="">-- Pilih ~~Kategori~~ --</option></select>');

Object.keys(REF_TYPES).forEach(function(t) {

var sel = currentRef.type === t ? 'selected' : '';

$typeSel.append('<option value="' + t + '" ' + sel + '>' + t + '</option>');

});

var $subTypeSel = $('<select id="md-ref-subtype" class="md-select ~~md-track-draft~~"><option value="">-- Sub ~~Kategori~~ --</option></select>');

var $subTypeSel = $('<select id="md-ref-subtype" class="md-select"><option value="">-- Pilih Sub-Tipe --</option></select>');

function updateSubTypes(mainType, selectedSub) {

$subTypeSel.empty().append('<option value="">-- Sub ~~Kategori~~ --</option>');

$subTypeSel.empty().append('<option value="">-- Pilih Sub-Tipe --</option>');

if (mainType && REF_TYPES[mainType]) {

REF_TYPES[mainType].forEach(function(st) {

Baris 638:

Baris 686:

updateSubTypes(currentRef.type, currentRef.subType);

$refGrid.append('<div><label style="font-size:0.~~8rem~~;">~~Kategori~~</label></div>').find('div').last().append($typeSel);

$refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Tipe Utama</label></div>').find('div').last().append($typeSel);

$refGrid.append('<div><label style="font-size:0.~~8rem~~;">Sub ~~Kategori~~</label></div>').find('div').last().append($subTypeSel);

$refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Sub-Tipe</label></div>').find('div').last().append($subTypeSel);

var $urlInput = $('<input type="~~url~~" id="md-ref-url" class="md-input ~~md-track-draft~~" placeholder="https://..." value="' + (currentRef.url || '') + '">');

var $urlInput = $('<input type="text" id="md-ref-url" class="md-input" placeholder="https://...." value="' + sanitizeHTML(currentRef.url || '') + '">');

$urlInput.on('blur', function() {

var u = ensureHttps($(this).val());

$(this).val(u);

var $siteInp = $('#md-ref-site');

~~// Fitur Baru: Otomatis isi nama situs dari URL~~

if (u && !$siteInp.val().trim()) $siteInp.val(extractDomain(u));

if (u && !$siteInp.val().trim()) {

~~var domain = extractDomain(u);~~

$siteInp.val(~~domain.charAt~~(~~0).toUpperCase() + domain.slice(1)~~);

~~$siteInp.trigger('input'~~);

}

});

$refGrid.append('<div class="md-grid-full"><label style="font-size:0.~~8rem~~;">URL ~~Website (Link)~~</label></div>').find('div').last().append($urlInput);

$refGrid.append('<div class="md-grid-full"><label style="font-size:0.78rem; margin-bottom:4px;">URL Rujukan</label></div>').find('div').last().append($urlInput);

$refGrid.append('<div><label style="font-size:0.~~8rem~~;">Judul Halaman ~~/ Artikel~~</label><input type="text" id="md-ref-title" class="md-input ~~md-track-draft~~" placeholder="Judul" value="' + (currentRef.title || '') + '"></div>');

$refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Judul Halaman</label><input type="text" id="md-ref-title" class="md-input" placeholder="Judul Rujukan" value="' + sanitizeHTML(currentRef.title || '') + '"></div>');

$refGrid.append('<div><label style="font-size:0.~~8rem~~;">Nama Situs ~~/ Portal~~</label><input type="text" id="md-ref-site" class="md-input ~~md-track-draft~~" placeholder="~~Nama~~ Situs" value="' + (currentRef.site || '') + '"></div>');

$refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Nama Situs</label><input type="text" id="md-ref-site" class="md-input" placeholder="Situs" value="' + sanitizeHTML(currentRef.site || '') + '"></div>');

$refGrid.append('<div><label style="font-size:0.~~8rem~~;">Penulis ~~(Opsional)~~</label><input type="text" id="md-ref-author" class="md-input ~~md-track-draft~~" placeholder="~~Nama~~ Penulis" value="' + (currentRef.author || '') + '"></div>');

$refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Penulis</label><input type="text" id="md-ref-author" class="md-input" placeholder="Penulis" value="' + sanitizeHTML(currentRef.author || '') + '"></div>');

$refGrid.append('<div><label style="font-size:0.~~8rem~~;">Penerbit ~~(Opsional)~~</label><input type="text" id="md-ref-publisher" class="md-input ~~md-track-draft~~" placeholder="Penerbit" value="' + (currentRef.publisher || '') + '"></div>');

$refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Penerbit</label><input type="text" id="md-ref-publisher" class="md-input" placeholder="Penerbit" value="' + sanitizeHTML(currentRef.publisher || '') + '"></div>');

var $dateBox = $('<div><label style="font-size:0.~~8rem~~;">Tanggal Akses</label></div>');

var $dateBox = $('<div><label style="font-size:0.78rem; margin-bottom:4px;">Tanggal Akses</label></div>');

var $dateInpWrap = $('<div style="display:flex; gap:~~8px~~;"></div>');

var $dateInpWrap = $('<div style="display:flex; gap:6px;"></div>');

var $dateInp = $('<input type="date" id="md-ref-date" class="md-input ~~md-track-draft~~" value="' + (currentRef.date || '') + '">');

var $dateInp = $('<input type="date" id="md-ref-date" class="md-input" value="' + sanitizeHTML(currentRef.date || '') + '">');

var $todayBtn = $('<button type="button" class="md-btn-icon" style="padding:~~6px 10px~~; font-size:0.~~8rem; border-color:#cbd5e1~~;" title="Set Hari Ini">Hari Ini</button>');

var $todayBtn = $('<button type="button" class="md-btn-icon" style="padding:4px 8px; font-size:0.75rem;" title="Set Hari Ini">Hari Ini</button>');

$todayBtn.on('click', function() { $dateInp.val(getTodayString()~~).trigger('input'~~); });

$todayBtn.on('click', function() { $dateInp.val(getTodayString()); });

$dateInpWrap.append($dateInp).append($todayBtn);

$dateBox.append($dateInpWrap);

Baris 672:

Baris 715:

$form.append($refArea);

// ~~TOMBOL AKSI FORM~~

$form.append(`

<b>Perhatian Lisensi:</b> Setiap data yang diterbitkan di sini akan terlihat publik dan dirilis di bawah lisensi <b>Creative Commons Zero (CC0)</b>. Jika Anda tidak ingin suntingan Anda digunakan secara bebas dan publik tanpa batas, jangan klik Terbitkan. <span class="md-help-icon" data-help="Dengan menerbitkan, Anda melepaskan seluruh hak cipta atas input data ini ke domain publik murni sesuai prinsip Wikidata.">${svgHelp}</span>

</div>

<label style="font-size:0.85rem; font-weight:700;">Ringkasan Suntingan <span class="md-help-icon" data-help="Jelaskan secara singkat apa yang Anda ubah atau tambahkan. Contoh: Menambah data tanggal lahir rumi.">${svgHelp}</span></label>

<label style="font-size:0.85rem; cursor:pointer; font-weight:700; margin-top:5px; display:inline-flex; align-items:center; gap:6px;"><input type="checkbox" id="md-minor-edit"> Ini adalah suntingan kecil (minor)</label>

</div>

`);

var $actions = $('<div class="md-form-actions"></div>');

var $btnSave = $('<button class="md-btn md-btn-save">~~Simpan &~~ Terbitkan<span class="md-spinner"></span></button>');

var $btnSave = $('<button class="md-btn md-btn-save">Terbitkan <span class="md-spinner"></span></button>');

var $btnDraft = $('<button class="md-btn md-btn-draft">Simpan Draft</button>');

var $btnCancel = $('<button class="md-btn md-btn-cancel">Batal</button>');

$actions.append($btnSave).append($btnCancel);

$actions.append($btnSave).append($btnDraft).append($btnCancel);

if (draftData && isNew) {

var $btnDelDraft = $('<button class="md-btn" style="background:#eab308; color:#fff;">Hapus Draft</button>');

$btnDelDraft.on('click', function() {

localStorage.removeItem(DRAFT_KEY);

alert("Draft berhasil dihapus!");

$(this).hide();

});

$actions.append($btnDelDraft);

}

if (!isNew) {

var $btnDelete = $('<button class="md-btn md-btn-delete">Hapus Data<span class="md-spinner"></span></button>');

var $btnDelete = $('<button class="md-btn md-btn-delete">Hapus Data <span class="md-spinner"></span></button>');

$btnDelete.on('click', function() {

if(confirm('Yakin ingin menghapus item data ini ~~permanen~~?')) {

if(confirm('Yakin ingin menghapus item data ini?')) {

dataItems.splice(index, 1);

saveData('Menghapus data ~~terstruktur~~', $(this), rawContent);

saveData('Menghapus data', $(this), rawContent, $('#md-edit-summary').val(), $('#md-minor-edit').is(':checked'));

}

});

Baris 692:

Baris 756:

$form.append($actions);

$container.append($form);

initTooltips();

$('#md-chk-person').on('change', function() {

if($(this).is(':checked')) $('#md-social-box'~~).slideDown(200~~).css('display', 'grid');

if($(this).is(':checked')) $('#md-social-box').css('display', 'grid');

else $('#md-social-box').~~slideUp~~(~~200~~);

else $('#md-social-box').hide();

});

~~// Animasi Scroll~~

$('html, body').animate({ scrollTop: $form.offset().top - 60 }, 250);

$('html, body').animate({ scrollTop: $form.offset().top - 80 }, ~~300~~);

$btnCancel.on('click', function() { $container.empty(); });

$~~btnCancel~~.on('click', function() {

$btnDraft.on('click', function() {

~~localStorage~~.~~removeItem~~(~~draftKey~~);

var socObj = {};

$~~container~~.~~empty~~();

if ($('#md-chk-person').is(':checked')) {

Object.keys(SOCIAL_PLATFORMS).forEach(function(k) {

var valU = $('#md-soc-' + k).val().trim();

if (valU) socObj[k] = valU;

});

}

var draftObj = {

prop: $('#md-inp-prop').val().trim(),

val: $('#md-inp-val').val().trim(),

link: $('#md-inp-link').is(':checked'),

linkSplit: $('#md-inp-split').is(':checked'),

linkTarget: $('#md-inp-target').val().trim(),

isPersonOrg: $('#md-chk-person').is(':checked'),

socials: socObj,

ref: {

type: $('#md-ref-type').val(), subType: $('#md-ref-subtype').val(),

url: ensureHttps($('#md-ref-url').val()), title: $('#md-ref-title').val().trim(),

site: $('#md-ref-site').val().trim(), author: $('#md-ref-author').val().trim(),

publisher: $('#md-ref-publisher').val().trim(), date: $('#md-ref-date').val()

}

};

localStorage.setItem(DRAFT_KEY, JSON.stringify(draftObj));

alert("Draft berhasil disimpan di memori peramban Anda!");

});

~~// FITUR BARU: Auto~~-~~Save Draft~~

$btnSave.on('click', function() {

~~function gatherFormData~~() {

var newProp = $('#md-inp-prop').val().trim();

var newVal = $('#md-inp-val').val().trim();

if (!newProp || !newVal) {

alert("Label Data dan Nilai wajib diisi!"); return;

}

var isPerson = $('#md-chk-person').is(':checked');

var socObj = {};

if (~~$('#md-chk-person').is(':checked')~~) {

if (isPerson) {

Object.keys(SOCIAL_PLATFORMS).forEach(function(k) {

var valU = $('#md-soc-' + k).val().trim();

Baris 715:

Baris 809:

});

}

var refObj = {

type: $('#md-ref-type').val(),

Baris 725:

Baris 820:

date: $('#md-ref-date').val()

};

Object.keys(refObj).forEach(function(key) { if (!refObj[key]) delete refObj[key]; });

if (Object.keys(refObj).length === 0) refObj = null;

~~return~~ {

var newItem = {

prop: ~~$('#md-inp-prop').val().trim()~~,

prop: newProp, val: newVal,

val: ~~$('#md-inp-val').val().trim()~~,

link: $('#md-inp-link').is(':checked'),

linkSplit: $('#md-inp-split').is(':checked'),

linkTarget: $('#md-inp-target').val().trim(),

isPersonOrg: ~~$('#md-chk-person').is(':checked')~~,

isPersonOrg: isPerson,

socials: socObj,

ref: refObj

};

}

~~if (isNew) {~~

~~$('.md-track-draft').on('input change', function() {~~

~~localStorage.setItem(draftKey, JSON.stringify(gatherFormData()));~~

~~});~~

}

~~$btnSave.on('click', function() {~~

~~var newItem = gatherFormData();~~

~~if (!newItem.prop || !newItem.val) {~~

~~showToast("Peringatan: Label Data dan Nilai wajib diisi!", 'warning');~~

~~$('#md-inp-prop').focus();~~

~~return;~~

}

if (isNew) dataItems.push(newItem);

else dataItems[index] = newItem;

saveData(isNew ? 'Tambah data' : 'Edit data', $(this), rawContent);

saveData(isNew ? 'Tambah data' : 'Edit data', $(this), rawContent, $('#md-edit-summary').val().trim(), $('#md-minor-edit').is(':checked'));

});

}

// 10. ~~FITUR BARU:~~ JSON EXPORT & IMPORT ~~KE FILE~~

// 10. JSON EXPORT & IMPORT MODAL (ASLI UTUH)

function showJsonModal(rawContent) {

var $container = $('#md-form-container');

var $container = $('#md-form-container').empty();

~~$container~~.empty();

var jsonStr = JSON.stringify(dataItems, null, 2);

var $box = $('<div class="md-form-box"></div>');

$box.append('<h4 class="md-form-title">Ekspor / Impor ~~File~~ JSON</h4>');

$box.append('<h4 class="md-form-title">Ekspor / Impor JSON Data</h4>');

$box.append('<p style="font-size:0.~~85rem~~; color:#64748b; margin-bottom:~~12px~~;">Anda dapat ~~mendownload~~ struktur ~~data ini sebagai file <b>.json</b>~~ untuk cadangan, atau ~~paste kode~~ JSON ~~untuk memulihkan~~.</p>');

$box.append('<p style="font-size:0.82rem; color:#64748b; margin-bottom:10px;">Anda dapat menyalin struktur JSON di bawah untuk cadangan atau menempelkan JSON dari artikel lain.</p>');

var $txt = $('<textarea class="md-textarea" rows="12" style="font-family:monospace; font-size:0.8rem~~; background:#1e293b; color:#10b981; border:none~~;"></textarea>').val(jsonStr);

var $txt = $('<textarea class="md-textarea" rows="10" style="font-family:monospace; font-size:0.8rem;"></textarea>').val(jsonStr);

$box.append($txt);

var $actions = $('<div class="md-form-actions"></div>');

var $btnImport = $('<button class="md-btn md-btn-save">Impor JSON & Simpan <span class="md-spinner"></span></button>');

~~var $btnDownload = $('<button class="md-btn" style="background:#10b981;">Download File JSON</button>');~~

var $btnImport = $('<button class="md-btn md-btn-save">~~Timpa~~ & ~~Impor Data~~ <span class="md-spinner"></span></button>');

var $btnCancel = $('<button class="md-btn md-btn-cancel">Tutup</button>');

~~$btnDownload.on('click', function() {~~

$actions.append($btnImport).append($btnCancel);

~~var blob = new Blob([$txt.val()], {type: "application/json;charset=utf-8"});~~

~~var url = URL.createObjectURL(blob);~~

~~var a = document.createElement('a');~~

~~a.href = url;~~

~~a.download = 'Mippedia_Data_' + pageName.replace(/ /g, '_') + '.json';~~

~~a.click();~~

~~URL.revokeObjectURL(url);~~

~~showToast('File JSON berhasil didownload!', 'success');~~

~~});~~

$actions~~.append($btnDownload)~~.append($btnImport).append($btnCancel);

$box.append($actions);

$container.append($box);

~~$('html, body').animate({ scrollTop: $box.offset().top - 80 }, 300);~~

$btnCancel.on('click', function() { $container.empty(); });

Baris 803:

Baris 866:

var parsed = JSON.parse($txt.val());

if (Array.isArray(parsed)) {

~~if(confirm('PERHATIAN! Ini akan menimpa seluruh data yang ada. Lanjutkan?')) {~~

dataItems = parsed;

saveData('Impor data dari JSON', $(this), rawContent, 'Impor struktur data JSON', false);

saveData('Impor ~~massal~~ dari JSON', $(this), rawContent);

}

} else {

~~showToast~~("Format ~~Error:~~ JSON harus berupa Array ~~(diawali dan diakhiri kurung siku).~~"~~, 'error'~~);

alert("Format JSON harus berupa Array items!");

}

} catch(e) {

~~showToast~~("Format JSON tidak valid!"~~, 'error'~~);

alert("Format JSON tidak valid: " + e.message);

}

});

}

// 11. ~~EKSEKUSI~~

// 11. EXECUTE

loadData().then(function(rawContent) { buildUI(rawContent); });

});

Baris 1.296:

Baris 1.357:

'<div style="font-size:11px; color:#718096; font-weight:800; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;">Lisensi, Atribusi & Penggunaan Data</div>' +

'<p style="margin:0 0 10px; font-size:13px; color:#4a5568; line-height:1.6;">' +

'Seluruh data terstruktur yang tersaji dalam repositori ini merupakan milik publik dan tersedia di bawah ~~lisensi resmi~~ ' +

'Seluruh data terstruktur yang tersaji dalam repositori ini merupakan milik publik dan tersedia di bawah ' +

'<a href="https://creativecommons.org/~~licenses~~/~~by-sa~~/4.0/" target="_blank" style="color:#6a5acd; text-decoration:none; font-weight:700;">Creative Commons ~~Attribution-ShareAlike 4.0 International~~</a>.' +

'<a href="https://creativecommons.org/publicdomain/zero/1.0/"target="_blank" style="color:#6a5acd; text-decoration:none; font-weight:700;">Lisensi Creative Commons CC0</a>.' +

'</p>' +

'<p style="margin:0; font-size:12px; color:#a0aec0;">Akses API dan penggunaan data secara massal wajib mencantumkan atribusi kepada <strong>Mippedia Community</strong> selaku pengelola proyek.</p></div>';

@@ Baris 1: / Baris 1: @@
 /**
   * ====================================================================
-  * MIPPEDIA DATA - ADVANCED STRUCTURED DATA SYSTEM (V8.0 ULTIMATE PRO)
+  * MIPPEDIA DATA - ADVANCED STRUCTURED DATA SYSTEM (V8.7 SECURE ULTIMATE)
-  * Fitur Baru: Accordion References, Visit Site Button, Toast Notifs,
+  * Fitur: ALL ORIGINAL V8 FEATURES KEPT + Global Social Media Box,
-  * Auto-Save Drafts, Reorder Data (Up/Down), File Export/Import,
+  * Smart Autocomplete/Preview Wikilink, Ultra-Strict Security, Mobile Ready.
- * 30+ Social Platforms, Glassmorphism UI, Mobile Perfect Animations.
   * ====================================================================
   */
@@ Baris 20: / Baris 19: @@
          var isLocked = false;
          var api = new mw.Api();
+        var DRAFT_KEY = 'mippedia_data_draft_' + pageName;
-         // 1. DATA MASTER PLATFORM MEDIA SOSIAL & MUSIK (DITAMBAH BANYAK PLATFORM)
+         // 1. DATA MASTER PLATFORM MEDIA SOSIAL & MUSIK (FULL ASLI)
          var SOCIAL_PLATFORMS = {
              applemusic: { name: 'Apple Music', base: 'https://music.apple.com/artist/', color: '#fc3c44', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.32 12.383c-.328.232-.82.418-1.32.418-1.238 0-1.922-.828-1.922-2.191v-4.14l4.312-.868v1.398l-2.91.586v2.805c0 .734.336 1.148.977 1.148.336 0 .617-.094.863-.258v1.102z"/></svg>' },
              spotify: { name: 'Spotify', base: 'https://open.spotify.com/artist/', color: '#1db954', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424c-.18.295-.563.387-.857.207-2.35-1.434-5.308-1.758-8.793-.963-.335.077-.67-.133-.746-.468-.077-.334.132-.67.467-.745 3.816-.87 7.092-.493 9.72 1.112.294.18.386.563.209.857zm1.213-2.71c-.226.368-.703.483-1.07.258-2.688-1.652-6.785-2.13-9.965-1.164-.413.125-.85-.108-.975-.522-.125-.413.108-.85.522-.975 3.633-1.102 8.157-.568 11.23 1.332.368.226.483.703.258 1.071zm.14-2.827c-3.225-1.915-8.54-2.092-11.614-1.16-.503.153-1.037-.133-1.19-.636-.152-.503.133-1.037.636-1.19 3.532-1.072 9.404-.865 13.115 1.338.45.267.598.85.33 1.3-.267.45-.85.598-1.3.33z"/></svg>' },
              soundcloud: { name: 'SoundCloud', base: 'https://soundcloud.com/', color: '#ff5500', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M1.175 12.225c-.062 0-.115.053-.115.116v4.636c0 .062.053.115.115.115h.411c.063 0 .116-.053.116-.115v-4.636c0-.063-.053-.116-.116-.116h-.411zm1.312-1.28c-.062 0-.115.052-.115.115v6.52c0 .063.053.115.115.115h.43c.062 0 .115-.052.115-.115v-6.52c0-.063-.053-.115-.115-.115h-.43zm1.33-1.258c-.063 0-.115.052-.115.115v8.322c0 .063.052.115.115.115h.43c.063 0 .115-.052.115-.115V9.802c0-.063-.052-.115-.115-.115h-.43zm1.33-.86c-.063 0-.115.053-.115.116v9.542c0 .063.052.115.115.115h.43c.063 0 .115-.052.115-.115V8.942c0-.063-.052-.116-.115-.116h-.43zm21.43 3.652c-.413 0-.802.08-1.157.228-.312-2.73-2.613-4.858-5.422-4.858-1.08 0-2.083.315-2.928.858-.2-.702-.592-1.332-1.12-1.826-.78-.727-1.812-1.13-2.882-1.13-.815 0-1.6.236-2.272.684v10.822c0 .063.052.115.115.115h15.666c1.666 0 3.018-1.352 3.018-3.018 0-1.666-1.352-3.018-3.018-3.018z"/></svg>' },
-             tidal: { name: 'Tidal', base: 'https://tidal.com/browse/artist/', color: '#000000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l4 4-4 4-4-4 4-4zm0 8l4 4-4 4-4-4 4-4zm8-8l4 4-4 4-4-4 4-4z"/></svg>' },
+             bandcamp: { name: 'Bandcamp', base: 'https://bandcamp.com/', color: '#1da0c3', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z"/></svg>' },
-            youtube: { name: 'YouTube', base: 'https://youtube.com/@', color: '#ff0000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>' },
              instagram: { name: 'Instagram', base: 'https://instagram.com/', color: '#e1306c', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>' },
              tiktok: { name: 'TikTok', base: 'https://www.tiktok.com/@', color: '#000000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 1 1-5.2-1.74 2.89 2.89 0 0 1 2.31-2.22V8.2a6.34 6.34 0 0 0-5 6.13 6.34 6.34 0 1 0 10.7-4.52A8.25 8.25 0 0 0 20 10.56V6.69z"/></svg>' },
+            youtube: { name: 'YouTube', base: 'https://youtube.com/@', color: '#ff0000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>' },
              twitter: { name: 'X / Twitter', base: 'https://x.com/', color: '#0f1419', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>' },
              threads: { name: 'Threads', base: 'https://www.threads.net/@', color: '#000000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.842 12.338c-.288 1.83-1.85 3.09-3.842 3.09-2.298 0-4.043-1.68-4.043-4.135 0-2.454 1.745-4.134 4.043-4.134 1.583 0 2.875.836 3.447 2.083l-1.28.625c-.39-.817-1.182-1.328-2.167-1.328-1.55 0-2.613 1.15-2.613 2.754 0 1.603 1.063 2.753 2.613 2.753 1.258 0 2.19-.77 2.37-1.808h-2.37v-1.38h3.842v1.48z"/></svg>' },
              facebook: { name: 'Facebook', base: 'https://facebook.com/', color: '#1877f2', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>' },
              linkedin: { name: 'LinkedIn', base: 'https://linkedin.com/in/', color: '#0a66c2', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>' },
-             twitch: { name: 'Twitch', base: 'https://twitch.tv/', color: '#9146FF', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>' },
+             github: { name: 'GitHub', base: 'https://github.com/', color: '#24292e', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>' },
-            discord: { name: 'Discord', base: 'https://discord.gg/', color: '#5865F2', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>' },
              pinterest: { name: 'Pinterest', base: 'https://pinterest.com/', color: '#e60023', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg>' }
          };
-         // 2. PRESET TEMPLATES
+         // 2. PRESET & MASTER RUJUKAN
          var PRESET_LABELS = [
-             "Nama Lahir", "Tanggal Lahir", "Tempat Lahir", "Pekerjaan", "Gelar",
+             "Nama Lahir", "Tanggal Lahir", "Tempat Lahir", "Pekerjaan",
-             "Kebangsaan", "Genre", "Instrumen", "Label Rekaman", "Zodiak",
+             "Kebangsaan", "Genre", "Instrumen", "Label Rekaman",
-             "Tahun Aktif", "Situs Web Resmi", "Pasangan", "Orang Tua", "Pendidikan"
+             "Tahun Aktif", "Situs Web Resmi", "Pasangan", "Orang Tua"
          ];
-        // 3. MASTER TIPE RUJUKAN
          var REF_TYPES = {
-             "Berita": ["Berita Online", "Berita Cetak / Koran", "Wawancara Eksklusif", "Siaran Radio / TV"],
+             "Berita": ["Berita Online", "Berita Cetak / Koran", "Wawancara Eksklusif", "Liputan Khusus", "Editorial", "Investigasi Media", "Siaran Radio / TV"],
-             "Website": ["Situs Resmi", "Portal Informasi", "Database Web", "Forum Diskusi"],
+             "Website": ["Situs Resmi", "Portal Informasi", "Database Web", "Portal Komunitas", "Forum Diskusi", "Portal Edukasi", "Direktori Web"],
-             "Buku": ["Buku Cetak", "E-Book", "Bab / Bagian Buku", "Biografi Cetak"],
+             "Buku": ["Buku Cetak", "E-Book", "Bab / Bagian Buku", "Monograf", "Katalog / Biografi Cetak", "Buku Teks Akademik"],
-             "Jurnal": ["Jurnal Ilmiah", "Paper Konferensi", "Artikel Review", "Tesis / Disertasi"],
+             "Jurnal": ["Jurnal Ilmiah Peer-Reviewed", "Paper Konferensi", "Artikel Review", "Pre-print / Draft Penelitian", "Tesis / Disertasi"],
-             "Musik & Video": ["MusicBrainz", "Discogs", "Spotify", "YouTube", "Film Dokumenter"],
+             "Siaran Pers": ["Siaran Pers Resmi", "Pengumuman Instansi / BUMN", "Pernyataan Pers Hukrim", "Keterangan Pers Artis/Manajemen"],
-             "Lainnya": ["Siaran Pers", "Dokumen PDF", "Postingan Medsos", "Arsip Web"]
+            "Dokumen PDF": ["Laporan Tahunan / Annual Report", "Dokumen Kebijakan / Regulasi", "Brosur / Pamflet Resmi", "Naskah Akademik"],
+            "Studio / Database Musik": ["MusicBrainz", "Discogs", "Genius", "AllMusic", "Spotify For Artists", "Database BPI / RIAA", "Songfacts", "Apple Music Catalogue"],
+            "Video": ["YouTube Video", "Film Dokumenter", "Wawancara Video", "Arsip Siaran TV", "Vlog Resmi"],
+             "Podcast": ["Episode Podcast", "Siniar Audio Resmi", "Wawancara Audio"],
+            "Media Sosial": ["Postingan / Tweet", "Video Singkat (Reels/TikTok/Shorts)", "Live Stream", "Thread Resmi"],
+            "Ensiklopedia": ["Ensiklopedia Cetak", "Ensiklopedia Online", "Kamus / Glosarium"],
+            "Arsip": ["Arsip Nasional / Sejarah", "Web Archive (Wayback Machine)", "Dokumen Manuskrip"]
          };
-         // 4. IKON SISTEM (SVG Ditingkatkan)
+        var VERIFIED_DOMAINS = [
+            'kompas.com', 'kompas.id', 'detik.com', 'cnnindonesia.com', 'tribunnews.com', 'kumparan.com', 'tirto.id',
+            'youtube.com', 'spotify.com', 'apple.com', 'musicbrainz.org', 'billboard.com', 'rollingstone.com',
+            'bbc.com', 'nytimes.com', 'instagram.com', 'x.com', 'twitter.com', 'facebook.com', 'wikipedia.org', 'imdb.com'
+        ];
+         // 3. IKON SISTEM
          var svgEdit = '<svg class="md-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>';
          var svgLock = '<svg class="md-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>';
@@ Baris 64: / Baris 74: @@
          var svgSearch = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>';
          var svgCode = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>';
-         var svgChevronDown = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>';
+         var svgVerified = '<svg width="15" height="15" viewBox="0 0 24 24" fill="#3b82f6" stroke="#ffffff" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>';
-        var svgExternal = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>';
+         var svgHelp = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>';
-        var svgArrowUp = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>';
-         var svgArrowDown = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>';
-        var svgDownload = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>';
-         // 5. HELPER UTILITY (Notifikasi Toast, Extract Domain, dll)
+         // 4. HELPER UTILITY & ADVANCED SECURITY
-         function showToast(message, type) {
+         function sanitizeHTML(str) {
-             var bg = type === 'error' ? '#dc2626' : (type === 'warning' ? '#d97706' : '#16a34a');
+             if (typeof str !== 'string') return str;
-             var $toast = $('<div style="position:fixed; bottom:20px; right:20px; background:'+bg+'; color:#fff; padding:12px 20px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:9999; font-weight:600; font-size:0.9rem; opacity:0; transform:translateY(20px); transition:all 0.3s ease;">'+message+'</div>');
+             return str.replace(/[&<>"'`=\/]/g, function(s) {
-            $('body').append($toast);
+                return {
-            setTimeout(function() { $toast.css({opacity: 1, transform: 'translateY(0)'}); }, 10);
+                    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;',
-            setTimeout(function() {
+                    "'": '&#39;', '/': '&#x2F;', '`': '&#x60;', '=': '&#x3D;'
-                $toast.css({opacity: 0, transform: 'translateY(20px)'});
+                }[s];
-                setTimeout(function() { $toast.remove(); }, 300);
+            });
-            }, 3000);
+        }
+        function isVerifiedSite(urlStr) {
+            if(!urlStr) return false;
+            var domain = extractDomain(urlStr);
+            return VERIFIED_DOMAINS.some(function(vd) { return domain === vd || domain.endsWith('.' + vd); });
          }
          function formatIndonesianDate(dateStr) {
              if (!dateStr) return '';
@@ Baris 90: / Baris 100: @@
              var monthIdx = parseInt(parts[1], 10) - 1;
              var year = parts[0];
-             if (isNaN(day) || monthIdx < 0 || monthIdx > 11 || isNaN(year)) return dateStr;
+             if (isNaN(day) || monthIdx < 0 || monthIdx > 11 || isNaN(year)) return sanitizeHTML(dateStr);
              return day + ' ' + months[monthIdx] + ' ' + year;
          }
          function extractDomain(urlStr) {
              try {
                  if (!urlStr.match(/^https?:\/\//i)) urlStr = 'https://' + urlStr;
-                 var parsed = new URL(urlStr);
+                 return new URL(urlStr).hostname.replace(/^www\./, '');
-                return parsed.hostname.replace(/^www\./, '');
+             } catch(e) { return urlStr.replace(/^https?:\/\/(www\.)?/, '').split('/')[0]; }
-             } catch(e) {
-                return urlStr.replace(/^https?:\/\/(www\.)?/, '').split('/')[0];
-            }
          }
          function ensureHttps(urlStr) {
              if (!urlStr) return '';
              urlStr = urlStr.trim();
-             if (urlStr && !urlStr.match(/^https?:\/\//i)) {
+             var protoMatch = urlStr.match(/^([a-z0-9]+):/i);
-                 return 'https://' + urlStr;
+            if (protoMatch) {
+                 var badProtos = ['javascript', 'data', 'vbscript', 'file', 'ws', 'wss', 'ftp'];
+                if (badProtos.indexOf(protoMatch[1].toLowerCase()) !== -1) return '';
              }
-             return urlStr;
+             return (urlStr && !urlStr.match(/^https?:\/\//i)) ? 'https://' + urlStr : urlStr;
          }
          function getTodayString() {
              var now = new Date();
@@ Baris 121: / Baris 127: @@
          }
-         // 6. STYLESHEET MODERN V8.0 PRO
+         // 5. STYLESHEET (TERMASUK LAYOUT MEDIA SOSIAL GLOBAL & AUTOCOMPLETE)
          var css = `
              #mippedia-data-app {
-                 background: #ffffff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.04);
+                 background: #ffffff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.06);
-                 padding: 24px; margin: 24px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+                 padding: 20px; margin: 20px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-                 border: 1px solid #f1f5f9; max-width: 100%; box-sizing: border-box; overflow: hidden;
+                 border: 1px solid #e2e8f0; max-width: 100%; box-sizing: border-box; overflow: hidden;
              }
+             .md-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
-             .md-header {
+             .md-title-container { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 180px; }
-                display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
+             .md-title { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0; white-space: nowrap; }
-                gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #f8fafc;
-            }
-             .md-title-container { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 180px; }
-             .md-title { font-size: 1.35rem; font-weight: 800; color: #0f172a; margin: 0; white-space: nowrap; letter-spacing: -0.5px; }
              .md-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
              .md-btn-icon {
-                 background: #f8fafc; border: 1px solid #e2e8f0; cursor: pointer; color: #4f46e5;
+                 background: #f8fafc; border: 1px solid #cbd5e1; cursor: pointer; color: #4f46e5;
-                 padding: 8px 14px; border-radius: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+                 padding: 8px 14px; border-radius: 8px; transition: all 0.2s ease;
-                 display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; white-space: nowrap;
+                 display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; white-space: nowrap;
              }
-             .md-btn-icon:hover:not(:disabled) { background: #e0e7ff; border-color: #c7d2fe; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1); }
+             .md-btn-icon:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px); }
-            .md-btn-icon:active:not(:disabled) { transform: translateY(0); }
+             .md-btn-lock { color: #dc2626; background: #fef2f2; border-color: #fca5a5; }
-             .md-btn-lock { color: #e11d48; background: #fff1f2; border-color: #fecdd3; }
-            .md-btn-lock:hover:not(:disabled) { background: #ffe4e6; border-color: #fda4af; box-shadow: 0 4px 12px rgba(225, 29, 72, 0.1); }
-             .md-search-box { position: relative; margin-bottom: 20px; width: 100%; box-sizing: border-box; }
+             .md-search-box { position: relative; margin-bottom: 16px; width: 100%; box-sizing: border-box; }
-             .md-search-input {
+             .md-search-input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.85rem; box-sizing: border-box; background: #f8fafc; transition: 0.2s; }
-                width: 100%; padding: 12px 16px 12px 40px; border: 2px solid #f1f5f9; border-radius: 12px;
+             .md-search-input:focus { background: #fff; border-color: #4f46e5; outline: none; }
-                font-size: 0.9rem; font-weight: 500; box-sizing: border-box; background: #f8fafc; transition: 0.3s;
+            .md-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
-            }
-             .md-search-input:focus { background: #fff; border-color: #6366f1; outline: none; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); }
+            /* Kotak Global Sosial Media Terpisah di Atas */
-             .md-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
+            .md-global-social-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
+             .md-social-box-title { font-size: 0.85rem; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; border-bottom: 1px dashed #cbd5e1; padding-bottom: 8px; }
+            .md-social-group { display: flex; flex-wrap: wrap; gap: 8px; }
+            .md-social-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: white !important; text-decoration: none !important; transition: transform 0.2s, opacity 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+            .md-social-badge:hover { transform: translateY(-2px); opacity: 0.92; }
-            /* Row Display Fix */
+             .md-row-display { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 12px; border-bottom: 1px solid #f1f5f9; transition: all 0.2s; border-radius: 12px; gap: 12px; margin-bottom: 8px; background: #fff; }
-             .md-row-display {
+             .md-row-display:hover { background: #faf5ff; box-shadow: inset 4px 0 0 #6366f1; }
-                display: flex; justify-content: space-between; align-items: flex-start;
-                padding: 16px; border: 1px solid transparent; border-bottom: 1px solid #f1f5f9; transition: all 0.2s;
-                border-radius: 12px; gap: 12px; margin-bottom: 8px; background: #fff; position: relative;
-            }
-             .md-row-display:hover { background: #fafafa; border-color: #f1f5f9; box-shadow: 0 4px 12px rgba(0,0,0,0.02); }
-             .md-data-group { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
+             .md-data-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
-             .md-data-label { font-size: 0.72rem; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; }
+             .md-data-label { font-size: 0.72rem; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }
-             .md-data-value-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+             .md-data-value-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-             .md-data-value { font-size: 1.1rem; color: #0f172a; line-height: 1.4; font-weight: 700; word-break: break-word; }
+             .md-data-value { font-size: 1.02rem; color: #0f172a; line-height: 1.4; font-weight: 600; word-break: break-word; }
-             .md-btn-copy {
+             .md-btn-copy { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: 0.2s; display: inline-flex; align-items: center; }
-                background: #f1f5f9; border: none; color: #64748b; cursor: pointer; padding: 4px 6px;
+             .md-btn-copy:hover { color: #4f46e5; background: #e0e7ff; }
-                border-radius: 6px; transition: 0.2s; display: inline-flex; align-items: center;
-            }
-             .md-btn-copy:hover { color: #4f46e5; background: #e0e7ff; transform: scale(1.05); }
-            .md-row-actions { display: flex; flex-direction: column; gap: 6px; }
+             .md-ref-container { margin-top: 10px; width: 100%; box-sizing: border-box; }
+             .md-ref-details { background: #f8fafc; border-left: 3px solid #4f46e5; border-radius: 10px; overflow: hidden; border-top:1px solid #f1f5f9; border-right:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9; transition: 0.3s; }
-            /* Tampilan Referensi V8.0 (ACCORDION COLLAPSIBLE) */
+             .md-ref-details summary { display: flex; padding: 10px 14px; font-size: 0.85rem; font-weight: 700; color: #374151; cursor: pointer; user-select: none; list-style: none; flex-wrap: nowrap; align-items: center; gap: 8px; }
-             .md-ref-container { margin-top: 12px; width: 100%; max-width: 450px; box-sizing: border-box; }
+             .md-ref-details summary::-webkit-details-marker { display: none; }
-             .md-ref-summary {
+             .md-ref-details[open] summary { border-bottom: 1px dashed #cbd5e1; background: #e0e7ff; color: #3730a3; }
-                background: #f8fafc; padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0;
+            .md-ref-body { padding: 12px 14px; font-size: 0.85rem; display: flex; flex-direction: column; gap: 6px; }
-                display: flex; justify-content: space-between; align-items: center; cursor: pointer;
-                transition: all 0.2s; user-select: none;
-            }
-             .md-ref-summary:hover { background: #f1f5f9; border-color: #cbd5e1; }
-            .md-ref-summary.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; background: #f1f5f9; }
-            .md-ref-tag { font-size: 0.8rem; font-weight: 700; color: #4f46e5; display: flex; align-items: center; gap: 6px; }
-             .md-ref-toggle { color: #94a3b8; transition: transform 0.3s; display: flex; align-items: center; }
-             .md-ref-summary.open .md-ref-toggle { transform: rotate(180deg); color: #4f46e5; }
-             .md-ref-body {
+             .md-verified-badge { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; vertical-align: middle; transition: transform 0.2s; flex-shrink: 0; }
-                background: #fff; padding: 12px; border: 1px solid #e2e8f0; border-top: none;
+             .md-verified-badge:hover { transform: scale(1.1); }
-                border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; font-size: 0.85rem;
+             .md-btn-visit { background: #f1f5f9; color: #0f172a; padding: 6px 12px; border-radius: 6px; text-decoration: none; font-size: 0.8rem; display: inline-block; width: fit-content; margin-top: 6px; font-weight:700; border:1px solid #cbd5e1; }
-                display: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+             .md-btn-visit:hover { background: #e2e8f0; text-decoration:none; }
-            }
-            .md-ref-header { font-weight: 800; color: #0f172a; margin-bottom: 8px; display: block; word-break: break-word; line-height: 1.3; }
-            .md-ref-details-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
-             .md-ref-detail-row { display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.82rem; }
-            .md-ref-lbl { font-weight: 700; color: #64748b; }
-            .md-ref-val { color: #334155; font-weight: 500; }
-             .md-btn-visit {
-                display: inline-flex; align-items: center; gap: 6px; background: #eff6ff; color: #2563eb;
-                padding: 6px 12px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; text-decoration: none;
-                transition: 0.2s; border: 1px solid #bfdbfe; width: max-content;
-            }
-             .md-btn-visit:hover { background: #dbeafe; text-decoration: none; transform: translateY(-1px); }
-            /* Media Sosial Badges V8 */
+             .md-preset-wrapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
-             .md-social-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+             .md-preset-pill { background: #f1f5f9; border: 1px solid #cbd5e1; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; color: #475569; cursor: pointer; transition: 0.2s; }
-             .md-social-badge {
+             .md-preset-pill:hover { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
-                display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px;
-                font-size: 0.8rem; font-weight: 700; color: white; text-decoration: none; transition: all 0.2s;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            }
-             .md-social-badge:hover { transform: translateY(-2px) scale(1.02); opacity: 0.95; box-shadow: 0 4px 8px rgba(0,0,0,0.15); color: white; text-decoration: none; }
-            /* Preset Pill Badges */
+             .md-form-box { background: #ffffff; border-radius: 12px; padding: 18px; margin-top: 16px; border: 1px solid #cbd5e1; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
-             .md-preset-wrapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+            .md-form-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin: 0 0 16px 0; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; }
-            .md-preset-pill {
+             .md-form-group { margin-bottom: 14px; }
-                background: #f8fafc; border: 1px solid #e2e8f0; padding: 4px 10px; border-radius: 12px;
+             .md-form-group label { display: flex; align-items:center; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; color: #334155; }
-                font-size: 0.75rem; font-weight: 700; color: #64748b; cursor: pointer; transition: 0.2s;
-            }
-             .md-preset-pill:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }
-            /* Form Elements */
-             .md-form-box { background: #ffffff; border-radius: 16px; padding: 24px; margin-top: 24px; border: 1px solid #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,0.06); animation: slideDown 0.3s ease; }
-            @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
-            .md-form-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin: 0 0 20px 0; border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; }
+             .md-input, .md-select, .md-textarea { width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; font-family: inherit; font-size: 0.9rem; transition: 0.2s; background: #fff; }
-            .md-form-group { margin-bottom: 18px; }
+             .md-input:focus, .md-select:focus, .md-textarea:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
-            .md-form-group label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: #334155; }
-             .md-input, .md-select, .md-textarea {
-                width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 10px;
-                box-sizing: border-box; font-family: inherit; font-size: 0.95rem; transition: 0.2s; background: #fafafa;
-            }
-             .md-input:focus, .md-select:focus, .md-textarea:focus { border-color: #6366f1; background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); }
-             .md-ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: #f8fafc; padding: 16px; border-radius: 12px; border: 1px dashed #cbd5e1; }
+            /* Autocomplete Styles */
-             .md-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #f1f5f9; padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0; max-height: 320px; overflow-y: auto; }
+            .md-autocomplete-wrapper { position: relative; width: 100%; }
+            .md-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; display: none; max-height: 200px; overflow-y: auto; margin-top: -2px; }
+            .md-autocomplete-item { padding: 10px 12px; font-size: 0.88rem; color: #0f172a; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: 0.2s; display: flex; align-items: center; gap: 8px; }
+            .md-autocomplete-item:last-child { border-bottom: none; }
+            .md-autocomplete-item:hover { background: #f8fafc; color: #4f46e5; padding-left: 16px; }
+             .md-ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px dashed #cbd5e1; }
+             .md-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #f1f5f9; padding: 12px; border-radius: 8px; border: 1px solid #cbd5e1; max-height: 280px; overflow-y: auto; }
              .md-grid-full { grid-column: span 2; }
-             .md-form-actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e2e8f0; flex-wrap: wrap; }
+             .md-cc0-notice { background: #fef2f2; color: #991b1b; padding: 12px; border-radius: 8px; font-size: 0.82rem; line-height: 1.4; border-left: 4px solid #ef4444; margin-top: 15px; margin-bottom: 15px; }
-             .md-btn {
+             .md-edit-meta { background: #f8fafc; padding: 12px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #e2e8f0; display:flex; flex-direction:column; gap:10px; }
-                padding: 12px 20px; border: none; border-radius: 10px; font-weight: 800; cursor: pointer;
-                color: white; font-size: 0.9rem; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; justify-content: center;
+            .md-help-icon { color: #64748b; cursor: pointer; margin-left: 6px; display:inline-flex; align-items:center; }
-            }
+            .md-help-icon:hover { color: #4f46e5; }
-             .md-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+            .md-tooltip-popup { position: absolute; background: #1e293b; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 0.8rem; width: 260px; max-width: calc(100vw - 30px); z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.15); display: none; line-height: 1.4; text-align: left; font-weight:normal; }
-             .md-btn:active:not(:disabled) { transform: translateY(0); }
+            .md-tooltip-popup::after { content: ''; position: absolute; border-width: 6px; border-style: solid; border-color: #1e293b transparent transparent transparent; top: 100%; left: 15px; }
-             .md-btn-save { background: linear-gradient(135deg, #4f46e5, #4338ca); flex: 1; min-width: 150px; }
+            .md-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
+             .md-modal-box { background: #fff; padding: 24px; border-radius: 12px; max-width: 400px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); animation: mdPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
+            @keyframes mdPopIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
+            .md-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding-top: 14px; border-top: 1px solid #e2e8f0; flex-wrap: wrap; }
+             .md-btn { padding: 10px 18px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; color: white; font-size: 0.85rem; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
+            .md-btn:hover:not(:disabled) { transform: translateY(-1px); }
+             .md-btn-save { background: linear-gradient(135deg, #4f46e5, #4338ca); flex: 1; min-width: 140px; }
              .md-btn-cancel { background: #64748b; }
-             .md-btn-delete { background: #ef4444; margin-left: auto; }
+            .md-btn-draft { background: #10b981; }
+             .md-btn-delete { background: #dc2626; margin-left: auto; }
-             .md-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: md-spin 0.8s linear infinite; }
+             .md-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-radius: 50%; border-top-color: #fff; animation: md-spin 0.8s linear infinite; }
              .is-loading .md-spinner { display: inline-block; }
              @keyframes md-spin { to { transform: rotate(360deg); } }
+            /* Mobile Optimized Layout (Seluler) */
              @media (max-width: 600px) {
-                 #mippedia-data-app { padding: 16px; margin: 16px 0; border-radius: 14px; }
+                 #mippedia-data-app { padding: 14px; margin: 14px 0; border-radius: 12px; }
-                 .md-header { flex-direction: column; align-items: flex-start; gap: 12px; }
+                 .md-header { flex-direction: column; align-items: flex-start; gap: 10px; }
-                 .md-actions { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
+                 .md-actions { width: 100%; justify-content: flex-start; overflow-x:auto; padding-bottom:5px; }
-                 .md-btn-icon { padding: 8px 12px; font-size: 0.8rem; flex-shrink: 0; }
+                 .md-btn-icon { padding: 7px 12px; font-size: 0.8rem; }
                  .md-ref-grid, .md-social-grid { grid-template-columns: 1fr; }
                  .md-grid-full { grid-column: span 1; }
                  .md-form-actions { flex-direction: column; width: 100%; }
                  .md-btn { width: 100%; margin: 0 !important; }
-                 .md-row-display { padding: 14px 10px; flex-direction: column; }
+                 .md-row-display { padding: 12px 10px; flex-direction:column; align-items:stretch;}
-                 .md-row-actions { flex-direction: row; width: 100%; justify-content: flex-end; margin-top: 10px; border-top: 1px dashed #e2e8f0; padding-top: 10px; }
+                 .edit-btn { align-self:flex-end; margin-top:8px; }
+                .md-ref-details summary { align-items: flex-start; }
              }
              .md-native-render { display: none; }
@@ Baris 272: / Baris 247: @@
          $('<style>').text(css).appendTo('head');
-         // 7. PARSER & PENYIMPANAN DATA
+        // 6. POPUP, MODAL & TOOLTIPS
+        function showModal(title, text) {
+            $('.md-modal-overlay').remove();
+            var $overlay = $('<div class="md-modal-overlay"></div>');
+            var $box = $('<div class="md-modal-box"><h3 style="margin-top:0; color:#0f172a;">' + sanitizeHTML(title) + '</h3><p style="font-size:0.9rem; color:#475569; margin:15px 0;">' + sanitizeHTML(text) + '</p><button class="md-btn md-btn-save" style="width:100%;">Tutup & Mengerti</button></div>');
+            $box.find('button').on('click', function() { $overlay.remove(); });
+            $overlay.append($box);
+            $('body').append($overlay);
+        }
+        function initTooltips() {
+            $('.md-help-icon').off('click').on('click', function(e) {
+                $('.md-tooltip-popup').remove();
+                e.stopPropagation();
+                var $icon = $(this);
+                var text = sanitizeHTML($icon.data('help'));
+                var $tt = $('<div class="md-tooltip-popup">' + text + '</div>');
+                $('body').append($tt);
+                var offset = $icon.offset();
+                var ttWidth = $tt.outerWidth();
+                var winWidth = $(window).width();
+                var leftPos = offset.left - 15;
+                if (leftPos + ttWidth > winWidth - 15) leftPos = winWidth - ttWidth - 15;
+                if (leftPos < 10) leftPos = 10;
+                $tt.css({ top: offset.top - $tt.outerHeight() - 10, left: leftPos }).fadeIn(200);
+            });
+            $(document).off('click.mdtt').on('click.mdtt', function() { $('.md-tooltip-popup').fadeOut(200, function(){ $(this).remove(); }); });
+        }
+         // 7. PARSER WIKITEXT & PENYIMPANAN DATA
          function loadData() {
              return api.get({
@@ Baris 284: / Baris 291: @@
                          dataItems = parsed.items || [];
                          isLocked = parsed.locked || false;
-                     } catch(e) { console.error("JSON Error", e); showToast('Gagal memuat struktur JSON!', 'error'); }
+                     } catch(e) { console.error("JSON Error", e); }
                  }
                  return content;
@@ Baris 318: / Baris 325: @@
              if (refObj.site) details.push("Situs: " + refObj.site);
              if (refObj.publisher) details.push("Penerbit: " + refObj.publisher);
-             if (refObj.date) details.push("Diakses: " + formatIndonesianDate(refObj.date));
+             if (refObj.date) details.push("Tanggal Akses: " + formatIndonesianDate(refObj.date));
+            if (refObj.type) details.push("Jenis: " + refObj.type + (refObj.subType ? " (" + refObj.subType + ")" : ""));
              if (details.length > 0) text += " &mdash; <small>" + details.join(" &bull; ") + "</small>";
@@ Baris 324: / Baris 332: @@
          }
-         function saveData(actionType, $btnEl, originalContent, callback) {
+         function saveData(actionType, $btnEl, originalContent, customSummary, isMinorEdit) {
              if ($btnEl) $btnEl.addClass('is-loading').prop('disabled', true);
+            var summaryTxt = customSummary ? ('Mippedia Data: ' + customSummary) : ('Mippedia Data V8.7: ' + actionType);
              var jsonStr = JSON.stringify({ locked: isLocked, items: dataItems });
              var wt = "<!-- MIPPEDIA_DATA_START | " + jsonStr + " -->\n";
@@ Baris 347: / Baris 356: @@
              api.postWithToken('csrf', {
-                 action: 'edit', title: pageName, text: newContent, summary: 'Mippedia Data V8: ' + actionType, minor: false
+                 action: 'edit', title: pageName, text: newContent, summary: summaryTxt, minor: isMinorEdit || false
              }).done(function() {
-                 localStorage.removeItem('md_draft_' + pageName); // Hapus draft jika sukses
+                 localStorage.removeItem(DRAFT_KEY);
-                 if(callback) callback();
+                 var nocacheUrl = location.pathname + "?refresh=" + new Date().getTime();
-                else {
+                 window.location.href = nocacheUrl;
-                    showToast('Berhasil disimpan! Memuat ulang...', 'success');
-                    setTimeout(function() { window.location.href = location.pathname + "?refresh=" + new Date().getTime(); }, 1000);
-                 }
              }).fail(function(err) {
                  if ($btnEl) $btnEl.removeClass('is-loading').prop('disabled', false);
-                 showToast("Gagal menyimpan: " + err, 'error');
+                 alert("Gagal menyimpan! Error: " + err);
              });
          }
@@ Baris 365: / Baris 371: @@
              var $app = $('<div id="mippedia-data-app"></div>');
-            // HEADER
              var $header = $('<div class="md-header"></div>');
              var $titleContainer = $('<div class="md-title-container"><h3 class="md-title">' + svgEdit + ' Data Terstruktur</h3></div>');
              var $actions = $('<div class="md-actions"></div>');
-            // Tombol Ekspor/Impor JSON Baru
+             var $jsonBtn = $('<button class="md-btn-icon" title="Ekspor/Impor JSON">' + svgCode + ' JSON</button>');
-             var $jsonBtn = $('<button class="md-btn-icon" title="Ekspor/Impor File JSON">' + svgDownload + ' Data JSON</button>');
              $jsonBtn.on('click', function() { showJsonModal(rawContent); });
              $actions.append($jsonBtn);
              if (isSysop) {
-                 var $lockBtn = $('<button class="md-btn-icon ' + (isLocked ? 'md-btn-unlock' : 'md-btn-lock') + '">' + (isLocked ? svgUnlock + ' Buka Kunci' : svgLock + ' Kunci') + ' <span class="md-spinner"></span></button>');
+                 var $lockBtn = $('<button class="md-btn-icon ' + (isLocked ? 'md-btn-unlock' : 'md-btn-lock') + '">' + (isLocked ? svgUnlock + ' Buka Kunci' : svgLock + ' Kunci') + '</button>');
                  $lockBtn.on('click', function() {
                      isLocked = !isLocked;
@@ Baris 385: / Baris 389: @@
              if (!isLocked || isSysop) {
-                 var $addBtn = $('<button class="md-btn-icon" style="background:#4f46e5; color:white; border-color:#4338ca;">' + svgEdit + ' Tambah Baru</button>');
+                 var $addBtn = $('<button class="md-btn-icon" title="Tambah Data Baru">' + svgEdit + ' Tambah</button>');
                  $addBtn.on('click', function() { showForm(-1, rawContent); });
                  $actions.append($addBtn);
@@ Baris 393: / Baris 397: @@
              $app.append($header);
-             // SEARCH BAR
+             // Tampilkan kotak pencarian jika data banyak
              if (dataItems.length > 2) {
-                 var $searchBox = $('<div class="md-search-box"><span class="md-search-icon">' + svgSearch + '</span><input type="text" class="md-search-input" placeholder="Cari data terstruktur (misal: Tanggal Lahir)..."></div>');
+                 var $searchBox = $('<div class="md-search-box"><span class="md-search-icon">' + svgSearch + '</span><input type="text" class="md-search-input" placeholder="Cari data terstruktur..."></div>');
                  $searchBox.find('input').on('keyup input', function() {
                      var q = $(this).val().toLowerCase();
@@ Baris 406: / Baris 410: @@
              }
-             // DAFTAR BARIS DATA
+             // MENGUMPULKAN MEDIA SOSIAL GLOBAL (Memisahkan media sosial ke atas)
+            var globalSocials = {};
+            dataItems.forEach(function(item) {
+                if (item.isPersonOrg && item.socials) {
+                    Object.assign(globalSocials, item.socials);
+                }
+            });
+            if (Object.keys(globalSocials).length > 0) {
+                var $topSocials = $('<div class="md-global-social-box"></div>');
+                $topSocials.append('<div class="md-social-box-title">Media Sosial & Platform Resmi</div>');
+                var $socialGroupGlobal = $('<div class="md-social-group"></div>');
+                Object.keys(SOCIAL_PLATFORMS).forEach(function(key) {
+                    var uname = globalSocials[key];
+                    if (uname) {
+                        var platform = SOCIAL_PLATFORMS[key];
+                        var fullUrl = platform.base + uname.replace(/^@/, '');
+                        var $badge = $('<a class="md-social-badge" href="' + sanitizeHTML(fullUrl) + '" target="_blank" rel="noopener noreferrer" style="background:' + platform.color + ';">' + platform.icon + ' ' + sanitizeHTML(platform.name) + '</a>');
+                        $socialGroupGlobal.append($badge);
+                    }
+                });
+                $topSocials.append($socialGroupGlobal);
+                $app.append($topSocials);
+            }
              var $list = $('<div class="md-list"></div>');
              if (dataItems.length === 0) {
-                 $list.append('<div style="text-align:center; padding: 40px 20px; background:#f8fafc; border-radius:12px; border:2px dashed #cbd5e1; color:#64748b;"><h4>Belum ada data!</h4><p style="font-size:0.9rem; margin-top:8px;">Klik tombol <b>Tambah Baru</b> di atas untuk mulai membuat struktur.</p></div>');
+                 $list.append('<div style="color:#64748b; text-align:center; padding: 25px 10px; background:#f8fafc; border-radius:10px; border:1px dashed #cbd5e1; font-size:0.88rem;">Belum ada data terstruktur. Klik <b>Tambah</b> untuk membuat baru.</div>');
              } else {
                  dataItems.forEach(function(item, index) {
                      var $row = $('<div class="md-row-display"></div>');
                      var $info = $('<div class="md-data-group"></div>');
-                     $info.append('<span class="md-data-label">' + item.prop + '</span>');
+                     $info.append('<span class="md-data-label">' + sanitizeHTML(item.prop) + '</span>');
-                    // RENDER NILAI DATA
                      var displayValHtml = '';
                      var rawVal = item.val || '';
                      if (rawVal.match(/^https?:\/\//i)) {
-                        var domain = extractDomain(rawVal);
+                         displayValHtml = '<a href="' + sanitizeHTML(rawVal) + '" target="_blank" rel="noopener noreferrer" style="color:#2563eb; font-weight:700; text-decoration:none;">' + extractDomain(rawVal) + '</a>';
-                         displayValHtml = '<a href="' + rawVal + '" target="_blank" style="color:#2563eb; text-decoration:none;">' + domain + '</a>';
                      } else if (item.linkTarget && item.linkTarget.trim() !== '') {
-                         displayValHtml = '<a href="' + mw.util.getUrl(item.linkTarget.trim()) + '" style="color:#2563eb; text-decoration:none;">' + rawVal + '</a>';
+                         displayValHtml = '<a href="' + mw.util.getUrl(item.linkTarget.trim()) + '" style="color:#2563eb; font-weight:700; text-decoration:none;">' + sanitizeHTML(rawVal) + '</a>';
                      } else if (item.linkSplit) {
                          var parts = rawVal.split(/([,/\s]+dan\s+|[,/\s]+atau\s+|[,/]+)/gi);
@@ Baris 430: / Baris 457: @@
                              var trimmed = p.trim();
                              if (trimmed && !p.match(/^[,/\s]+$/) && trimmed.toLowerCase() !== 'dan' && trimmed.toLowerCase() !== 'atau') {
-                                 return '<a href="' + mw.util.getUrl(trimmed) + '" style="color:#2563eb; text-decoration:none;">' + trimmed + '</a>';
+                                 return '<a href="' + mw.util.getUrl(trimmed) + '" style="color:#2563eb; font-weight:700; text-decoration:none;">' + sanitizeHTML(trimmed) + '</a>';
                              }
-                             return p;
+                             return sanitizeHTML(p);
                          }).join('');
                      } else if (item.link) {
-                         displayValHtml = '<a href="' + mw.util.getUrl(rawVal) + '" style="color:#2563eb; text-decoration:none;">' + rawVal + '</a>';
+                         displayValHtml = '<a href="' + mw.util.getUrl(rawVal) + '" style="color:#2563eb; font-weight:700; text-decoration:none;">' + sanitizeHTML(rawVal) + '</a>';
                      } else {
-                         displayValHtml = rawVal;
+                         displayValHtml = sanitizeHTML(rawVal);
                      }
@@ Baris 443: / Baris 470: @@
                      $valWrap.append('<span class="md-data-value">' + displayValHtml + '</span>');
-                     var $copyBtn = $('<button class="md-btn-copy" title="Salin nilai teks">' + svgCopy + '</button>');
+                     var $copyBtn = $('<button class="md-btn-copy" title="Salin teks">' + svgCopy + '</button>');
                      $copyBtn.on('click', function() {
                          navigator.clipboard.writeText(rawVal);
-                         showToast('Teks disalin!', 'success');
+                         $(this).css('color', '#16a34a');
+                        setTimeout(function(){ $copyBtn.css('color', '#94a3b8'); }, 1200);
                      });
                      $valWrap.append($copyBtn);
                      $info.append($valWrap);
-                    // RENDER MEDIA SOSIAL & MUSIK
-                    if (item.isPersonOrg && item.socials) {
-                        var $socialGroup = $('<div class="md-social-group"></div>');
-                        var hasSocial = false;
-                        Object.keys(SOCIAL_PLATFORMS).forEach(function(key) {
-                            var uname = item.socials[key];
-                            if (uname) {
-                                hasSocial = true;
-                                var platform = SOCIAL_PLATFORMS[key];
-                                var fullUrl = platform.base + uname.replace(/^@/, '');
-                                var $badge = $('<a class="md-social-badge" href="' + fullUrl + '" target="_blank" style="background:' + platform.color + ';">' + platform.icon + ' ' + platform.name + '</a>');
-                                $socialGroup.append($badge);
-                            }
-                        });
-                        if (hasSocial) $info.append($socialGroup);
-                    }
-                    // RENDER REFERENSI EKSPLISIT (V8 ACCORDION)
                      if (item.ref && (item.ref.url || item.ref.title)) {
                          var ref = item.ref;
-                         var $refContainer = $('<div class="md-ref-container"></div>');
+                         var isVer = isVerifiedSite(ref.url);
+                        var verBadgeHtml = isVer ? '<span class="md-verified-badge" title="Situs Populer Terverifikasi">' + svgVerified + '</span>' : '';
-                         var siteNameLabel = ref.site || extractDomain(ref.url) || "Referensi";
+                         var safeUrl = ref.url ? ensureHttps(ref.url) : '';
-                         var $refSummary = $('<div class="md-ref-summary" title="Klik untuk lihat detail referensi"><span class="md-ref-tag">' + svgRef + ' 1 Referensi (' + siteNameLabel + ')</span><span class="md-ref-toggle">' + svgChevronDown + '</span></div>');
+                         var refTitle = ref.title || "Sumber Rujukan";
-                        var $refBody = $('<div class="md-ref-body"></div>');
-                         var refTitle = ref.title || "Sumber Rujukan";
+                         var $refContainer = $('<div class="md-ref-container"></div>');
-                        $refBody.append('<span class="md-ref-header">' + refTitle + '</span>');
+                         var $refDetails = $(`
+                            <details class="md-ref-details">
-                         var $detailsGrid = $('<div class="md-ref-details-grid"></div>');
+                                <summary>
-                        if (ref.author) $detailsGrid.append('<div class="md-ref-detail-row"><span class="md-ref-lbl">Penulis:</span><span class="md-ref-val">' + ref.author + '</span></div>');
+                                    <div style="color:#4f46e5; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0;">${svgRef} REFERENSI:</div>
-                        if (ref.site) $detailsGrid.append('<div class="md-ref-detail-row"><span class="md-ref-lbl">Situs/Penerbit:</span><span class="md-ref-val">' + ref.site + (ref.publisher ? ' / ' + ref.publisher : '') + '</span></div>');
+                                    <div style="color:#374151; display:flex; align-items:center; flex-wrap:wrap; flex:1;">
-                        if (ref.date) $detailsGrid.append('<div class="md-ref-detail-row"><span class="md-ref-lbl">Diakses:</span><span class="md-ref-val">' + formatIndonesianDate(ref.date) + '</span></div>');
+                                        <span style="word-break:break-word; line-height:1.3;">${sanitizeHTML(refTitle)}</span>${verBadgeHtml}
-                        if (ref.type) $detailsGrid.append('<div class="md-ref-detail-row"><span class="md-ref-lbl">Tipe:</span><span class="md-ref-val">' + ref.type + (ref.subType ? ' - ' + ref.subType : '') + '</span></div>');
+                                    </div>
+                                </summary>
+                                <div class="md-ref-body">
+                                    ${ref.author ? '<div><span style="color:#64748b; font-weight:700;">Penulis:</span> ' + sanitizeHTML(ref.author) + '</div>' : ''}
+                                    ${ref.site ? '<div><span style="color:#64748b; font-weight:700;">Situs:</span> ' + sanitizeHTML(ref.site) + '</div>' : ''}
+                                    ${ref.publisher ? '<div><span style="color:#64748b; font-weight:700;">Penerbit:</span> ' + sanitizeHTML(ref.publisher) + '</div>' : ''}
+                                    ${ref.date ? '<div><span style="color:#64748b; font-weight:700;">Tanggal Akses:</span> ' + formatIndonesianDate(ref.date) + '</div>' : ''}
+                                    ${ref.type ? '<div style="margin-top:4px;"><span style="background:#e2e8f0; padding:2px 8px; border-radius:6px; font-weight:700; font-size:0.75rem;">' + sanitizeHTML(ref.type) + (ref.subType ? ' &bull; ' + sanitizeHTML(ref.subType) : '') + '</span></div>' : ''}
+                                    ${safeUrl ? '<a href="' + sanitizeHTML(safeUrl) + '" target="_blank" rel="noopener noreferrer" class="md-btn-visit">Kunjungi Situs</a>' : ''}
+                                </div>
+                            </details>
+                        `);
-                         $refBody.append($detailsGrid);
+                         $refDetails.find('.md-verified-badge').on('click', function(e) {
+                             e.preventDefault(); e.stopPropagation();
-                        if (ref.url) {
+                             showModal('Situs Terverifikasi', 'Centang biru menandakan bahwa URL referensi ini valid dan berasal dari entitas, media publikasi besar, portal populer, atau pangkalan data resmi (seperti Kompas, YouTube, Apple Music, Spotify, dll) yang bereputasi kredibel.');
-                            var safeUrl = ensureHttps(ref.url);
-                            $refBody.append('<a href="' + safeUrl + '" target="_blank" class="md-btn-visit">' + svgExternal + ' Kunjungi Situs</a>');
-                        }
-                        $refSummary.on('click', function() {
-                             $refBody.slideToggle(200);
-                             $(this).toggleClass('open');
                          });
-                         $refContainer.append($refSummary).append($refBody);
+                         $refContainer.append($refDetails);
                          $info.append($refContainer);
                      }
@@ Baris 504: / Baris 518: @@
                      $row.append($info);
-                     if (!isLocked || isSysop) {
+                     if (isLocked && !isSysop) {
-                         var $actionsGroup = $('<div class="md-row-actions"></div>');
+                         var $lockNotifyBtn = $('<button class="md-btn-icon edit-btn" style="color:#dc2626; border-color:#fca5a5; background:#fef2f2;">' + svgLock + ' Terkunci</button>');
+                         $lockNotifyBtn.on('click', function() {
-                        // Urutkan Atas/Bawah (Fitur Baru)
+                             showModal('Halaman Dikunci', 'Halaman Data Terstruktur ini sedang dikunci sementara oleh pengurus untuk melindungi dari vandalisme atau perubahan yang tidak sah. Pengguna biasa atau anonim tidak dapat mengedit saat ini.');
-                        var $btnUp = $('<button class="md-btn-icon" style="padding:4px 6px;" title="Pindah ke Atas" ' + (index === 0 ? 'disabled style="opacity:0.3; cursor:not-allowed;"' : '') + '>' + svgArrowUp + '</button>');
-                        var $btnDown = $('<button class="md-btn-icon" style="padding:4px 6px;" title="Pindah ke Bawah" ' + (index === dataItems.length-1 ? 'disabled style="opacity:0.3; cursor:not-allowed;"' : '') + '>' + svgArrowDown + '</button>');
-                         $btnUp.on('click', function() {
-                             if(index > 0) {
-                                var temp = dataItems[index-1];
-                                dataItems[index-1] = dataItems[index];
-                                dataItems[index] = temp;
-                                saveData('Mengubah urutan', $(this), rawContent);
-                            }
                          });
-                         $btnDown.on('click', function() {
+                         $row.append($lockNotifyBtn);
-                            if(index < dataItems.length-1) {
+                    } else {
-                                var temp = dataItems[index+1];
+                         var $editIcon = $('<button class="md-btn-icon edit-btn">' + svgEdit + ' Edit</button>');
-                                dataItems[index+1] = dataItems[index];
-                                dataItems[index] = temp;
-                                saveData('Mengubah urutan', $(this), rawContent);
-                            }
-                        });
-                         var $editIcon = $('<button class="md-btn-icon edit-btn" style="padding:6px 12px; margin-top:4px;">' + svgEdit + ' Edit</button>');
                          $editIcon.on('click', function() { showForm(index, rawContent); });
+                         $row.append($editIcon);
-                         var $orderWrap = $('<div style="display:flex; gap:4px; justify-content:flex-end;"></div>').append($btnUp).append($btnDown);
-                        $actionsGroup.append($orderWrap).append($editIcon);
-                        $row.append($actionsGroup);
                      }
                      $list.append($row);
                  });
@@ Baris 547: / Baris 542: @@
          }
-         // 9. FORM EDIT DENGAN PRESET & PLATFORM LENGKAP
+         // 9. FORM EDIT & DRAFT LOGIC
          function showForm(index, rawContent) {
-             var $container = $('#md-form-container');
+             var $container = $('#md-form-container').empty();
-            $container.empty();
              var isNew = index === -1;
+            var draftData = localStorage.getItem(DRAFT_KEY);
              var currentData = isNew ? { prop: '', val: '', link: false, linkTarget: '', linkSplit: false, ref: {}, isPersonOrg: false, socials: {} } : dataItems[index];
-            // Cek Draft LocalStorage
+             if (isNew && draftData) {
-            var draftKey = 'md_draft_' + pageName;
+                 if(confirm("Anda memiliki draft yang belum tersimpan sebelumnya. Ingin melanjutkan draft tersebut?")) {
-            var savedDraft = localStorage.getItem(draftKey);
+                     try { currentData = JSON.parse(draftData); } catch(e) {}
-             if (isNew && savedDraft) {
+                }
-                 try {
-                     currentData = JSON.parse(savedDraft);
-                    showToast('Memulihkan draft yang belum tersimpan...', 'warning');
-                } catch(e) {}
              }
@@ Baris 571: / Baris 562: @@
              $form.append('<h4 class="md-form-title">' + (isNew ? 'Tambah Data Baru' : 'Edit Data Terstruktur') + '</h4>');
-            // Label Data
+             var $propGroup = $('<div class="md-form-group"></div>');
-             var $propGroup = $('<div class="md-form-group"><label>Label Data (Cth: Pekerjaan, Sutradara)</label><input type="text" id="md-inp-prop" class="md-input md-track-draft" value="' + (currentData.prop || '') + '"></div>');
+            $propGroup.append('<label>Label Data <span class="md-help-icon" data-help="Nama bidang data (contoh: Pekerjaan, Sutradara, Tempat Lahir). Klik tombol preset di bawah untuk isi otomatis.">' + svgHelp + '</span></label>');
+            $propGroup.append('<input type="text" id="md-inp-prop" class="md-input" value="' + sanitizeHTML(currentData.prop || '') + '">');
              var $presetWrap = $('<div class="md-preset-wrapper"></div>');
              PRESET_LABELS.forEach(function(lbl) {
                  var $pill = $('<span class="md-preset-pill">' + lbl + '</span>');
-                 $pill.on('click', function() { $('#md-inp-prop').val(lbl).trigger('input'); });
+                 $pill.on('click', function() { $('#md-inp-prop').val(lbl); });
                  $presetWrap.append($pill);
              });
@@ Baris 582: / Baris 575: @@
              $form.append($propGroup);
-            // Nilai Data
              var $valBox = $('<div class="md-form-group"></div>');
-             $valBox.append('<label>Nilai / Konten Data</label><input type="text" id="md-inp-val" class="md-input md-track-draft" value="' + (currentData.val || '') + '">');
+             $valBox.append('<label>Nilai Data <span class="md-help-icon" data-help="Ketik nilai. Jika halaman sudah ada di Wiki, saran akan muncul (pratinjau) dan otomatis mencentang opsi Wikilink.">' + svgHelp + '</span></label>');
-             var $wikilinkOpts = $('<div style="margin-top:10px; display:flex; flex-direction:column; gap:8px; background:#f8fafc; padding:12px; border-radius:10px; border:1px solid #e2e8f0;"></div>');
+            // FITUR AUTOCOMPLETE PRATINJAU DIMULAI DI SINI
+            var $autoWrap = $('<div class="md-autocomplete-wrapper"></div>');
+            var $valInput = $('<input type="text" id="md-inp-val" class="md-input" autocomplete="off" value="' + sanitizeHTML(currentData.val || '') + '">');
+            var $autoList = $('<div class="md-autocomplete-list"></div>');
+            $autoWrap.append($valInput).append($autoList);
+            $valBox.append($autoWrap);
+             var $wikilinkOpts = $('<div style="margin-top:8px; display:flex; flex-direction:column; gap:8px; background:#f8fafc; padding:10px; border-radius:8px; border:1px solid #e2e8f0;"></div>');
              var chkLink = currentData.link ? 'checked' : '';
              var chkSplit = currentData.linkSplit ? 'checked' : '';
-             $wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:700; cursor:pointer;"><input type="checkbox" id="md-inp-link" class="md-track-draft" ' + chkLink + '> Jadikan Wikilink Standar</label>');
+             var $linkCheck = $('<input type="checkbox" id="md-inp-link" ' + chkLink + '>');
-             $wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:700; cursor:pointer;"><input type="checkbox" id="md-inp-split" class="md-track-draft" ' + chkSplit + '> Smart Split Wikilink (Pecah koma/dan)</label>');
+            var $lblLinkCheck = $('<label style="display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; cursor:pointer;"></label>');
+            $lblLinkCheck.append($linkCheck).append(' Jadikan Wikilink Standar');
-             var $pipedGroup = $('<div style="margin-top:6px;"><label style="font-size:0.8rem; color:#475569;">Target Halaman Piped (Opsional):</label><input type="text" id="md-inp-target" class="md-input md-track-draft" style="padding:8px 12px; font-size:0.85rem;" placeholder="Contoh: Diskografi Rumi Haitami" value="' + (currentData.linkTarget || '') + '"></div>');
+            // Logika pratinjau ketika diketik
+            var isAutoChecked = false;
+            $valInput.on('input', function() {
+                var q = $(this).val();
+                // Jika input dikosongkan/berubah, kembalikan centang link ke false jika tadinya otomatis centang
+                if (isAutoChecked) {
+                    $linkCheck.prop('checked', false);
+                    isAutoChecked = false;
+                }
+                if(q.length < 1) {
+                    $autoList.empty().hide();
+                    return;
+                }
+                // Panggil API MediaWiki Prefix Search
+                api.get({
+                    action: 'query',
+                    list: 'prefixsearch',
+                    pssearch: q,
+                    pslimit: 6,
+                    format: 'json'
+                }).done(function(data) {
+                    $autoList.empty();
+                    if(data.query && data.query.prefixsearch && data.query.prefixsearch.length > 0) {
+                        data.query.prefixsearch.forEach(function(res) {
+                            var $item = $('<div class="md-autocomplete-item">' + svgSearch + ' ' + sanitizeHTML(res.title) + '</div>');
+                            $item.on('click', function() {
+                                $valInput.val(res.title);
+                                $autoList.empty().hide();
+                                $linkCheck.prop('checked', true); // OTOMATIS TERCENTANG
+                                isAutoChecked = true;
+                            });
+                            $autoList.append($item);
+                        });
+                        $autoList.show();
+                    } else {
+                        $autoList.hide();
+                    }
+                });
+            });
+            // Sembunyikan pratinjau saat klik di luar
+            $(document).on('click.mdauto', function(e) {
+                if(!$(e.target).closest('.md-autocomplete-wrapper').length) {
+                    $autoList.hide();
+                }
+            });
+            $wikilinkOpts.append($lblLinkCheck);
+             $wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; cursor:pointer;"><input type="checkbox" id="md-inp-split" ' + chkSplit + '> Smart Split Wikilink</label>');
+             var $pipedGroup = $('<div style="margin-top:4px;"><label style="font-size:0.78rem; color:#475569; margin-bottom:4px;">Target Halaman Khusus (Opsional):</label><input type="text" id="md-inp-target" class="md-input" style="padding:6px 10px; font-size:0.85rem;" placeholder="Contoh: Diskografi Rumi Haitami" value="' + sanitizeHTML(currentData.linkTarget || '') + '"></div>');
              $wikilinkOpts.append($pipedGroup);
              $valBox.append($wikilinkOpts);
              $form.append($valBox);
-            // MEDIA SOSIAL
+             var $socialSec = $('<div class="md-form-group" style="margin-top:16px;"></div>');
-             var $socialSec = $('<div class="md-form-group" style="margin-top:20px;"></div>');
              var chkPerson = currentData.isPersonOrg ? 'checked' : '';
-             $socialSec.append('<label style="display:flex; align-items:center; gap:8px; cursor:pointer; background:#e0e7ff; padding:12px; border-radius:10px; font-weight:800; color:#3730a3;"><input type="checkbox" id="md-chk-person" class="md-track-draft" ' + chkPerson + '> Aktifkan Profil Sosmed & Musik</label>');
+             $socialSec.append('<label style="display:flex; align-items:center; gap:8px; cursor:pointer; background:#e0e7ff; padding:10px; border-radius:8px; font-weight:700; color:#3730a3; font-size:0.85rem;"><input type="checkbox" id="md-chk-person" ' + chkPerson + '> Simpan Profil Media Sosial (Akan muncul di paling atas) <span class="md-help-icon" data-help="Centang ini untuk mengisi data sosial media. Datanya akan dihimpun dan dimunculkan di kotak teratas data struktur.">' + svgHelp + '</span></label>');
-             var $socialGrid = $('<div class="md-social-grid" id="md-social-box" style="display:' + (currentData.isPersonOrg ? 'grid' : 'none') + '; margin-top:10px;"></div>');
+             var $socialGrid = $('<div class="md-social-grid" id="md-social-box" style="display:' + (currentData.isPersonOrg ? 'grid' : 'none') + '; margin-top:8px;"></div>');
              Object.keys(SOCIAL_PLATFORMS).forEach(function(key) {
                  var p = SOCIAL_PLATFORMS[key];
                  var valUname = currentSocials[key] || '';
-                 $socialGrid.append('<div><label style="font-size:0.8rem; color:#334155; font-weight:700;">' + p.name + '</label><input type="text" id="md-soc-' + key + '" class="md-input md-track-draft" placeholder="Username" value="' + valUname + '"></div>');
+                 $socialGrid.append('<div><label style="font-size:0.78rem; color:#334155; font-weight:700; margin-bottom:4px;">' + p.name + '</label><input type="text" id="md-soc-' + key + '" class="md-input" placeholder="ID / Username" value="' + sanitizeHTML(valUname) + '"></div>');
              });
              $socialSec.append($socialGrid);
              $form.append($socialSec);
-            // RUJUKAN LENGKAP (Otomatis deteksi domain)
+             var $refArea = $('<div class="md-form-group" style="margin-top:20px;"></div>');
-             var $refArea = $('<div class="md-form-group" style="margin-top:24px;"></div>');
+             $refArea.append('<label style="font-size:0.95rem; font-weight:800; color:#0f172a; margin-bottom:10px;">Sumber Referensi <span class="md-help-icon" data-help="Mohon berikan sumber referensi yang valid, kredibel, dan dapat dipertanggungjawabkan (seperti portal berita resmi, jurnal akademik ilmiah, buku cetak ber-ISBN, atau pangkalan data terverifikasi). Referensi yang kuat sangat membantu memastikan keakuratan informasi. Jika URL rujukan Anda mengarah ke situs web besar yang terverifikasi, sistem keamanan akan secara otomatis menampilkan lencana centang biru premium sebagai tanda sumber tepercaya.">' + svgHelp + '</span></label>');
-             $refArea.append('<label style="font-size:1.05rem; font-weight:800; color:#0f172a; border-bottom:2px solid #e2e8f0; padding-bottom:8px;">Sumber Referensi</label>');
+            var $refGrid = $('<div class="md-ref-grid"></div>');
-            var $refGrid = $('<div class="md-ref-grid" style="margin-top:12px;"></div>');
+             var $typeSel = $('<select id="md-ref-type" class="md-select"><option value="">-- Pilih Tipe Utama --</option></select>');
-             var $typeSel = $('<select id="md-ref-type" class="md-select md-track-draft"><option value="">-- Pilih Kategori --</option></select>');
              Object.keys(REF_TYPES).forEach(function(t) {
                  var sel = currentRef.type === t ? 'selected' : '';
                  $typeSel.append('<option value="' + t + '" ' + sel + '>' + t + '</option>');
              });
-             var $subTypeSel = $('<select id="md-ref-subtype" class="md-select md-track-draft"><option value="">-- Sub Kategori --</option></select>');
+             var $subTypeSel = $('<select id="md-ref-subtype" class="md-select"><option value="">-- Pilih Sub-Tipe --</option></select>');
              function updateSubTypes(mainType, selectedSub) {
-                 $subTypeSel.empty().append('<option value="">-- Sub Kategori --</option>');
+                 $subTypeSel.empty().append('<option value="">-- Pilih Sub-Tipe --</option>');
                  if (mainType && REF_TYPES[mainType]) {
                      REF_TYPES[mainType].forEach(function(st) {
@@ Baris 638: / Baris 686: @@
              updateSubTypes(currentRef.type, currentRef.subType);
-             $refGrid.append('<div><label style="font-size:0.8rem;">Kategori</label></div>').find('div').last().append($typeSel);
+             $refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Tipe Utama</label></div>').find('div').last().append($typeSel);
-             $refGrid.append('<div><label style="font-size:0.8rem;">Sub Kategori</label></div>').find('div').last().append($subTypeSel);
+             $refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Sub-Tipe</label></div>').find('div').last().append($subTypeSel);
-             var $urlInput = $('<input type="url" id="md-ref-url" class="md-input md-track-draft" placeholder="https://..." value="' + (currentRef.url || '') + '">');
+             var $urlInput = $('<input type="text" id="md-ref-url" class="md-input" placeholder="https://...." value="' + sanitizeHTML(currentRef.url || '') + '">');
              $urlInput.on('blur', function() {
                  var u = ensureHttps($(this).val());
                  $(this).val(u);
                  var $siteInp = $('#md-ref-site');
-                // Fitur Baru: Otomatis isi nama situs dari URL
+                 if (u && !$siteInp.val().trim()) $siteInp.val(extractDomain(u));
-                 if (u && !$siteInp.val().trim()) {
-                    var domain = extractDomain(u);
-                    $siteInp.val(domain.charAt(0).toUpperCase() + domain.slice(1));
-                    $siteInp.trigger('input');
-                }
              });
-             $refGrid.append('<div class="md-grid-full"><label style="font-size:0.8rem;">URL Website (Link)</label></div>').find('div').last().append($urlInput);
+             $refGrid.append('<div class="md-grid-full"><label style="font-size:0.78rem; margin-bottom:4px;">URL Rujukan</label></div>').find('div').last().append($urlInput);
-             $refGrid.append('<div><label style="font-size:0.8rem;">Judul Halaman / Artikel</label><input type="text" id="md-ref-title" class="md-input md-track-draft" placeholder="Judul" value="' + (currentRef.title || '') + '"></div>');
+             $refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Judul Halaman</label><input type="text" id="md-ref-title" class="md-input" placeholder="Judul Rujukan" value="' + sanitizeHTML(currentRef.title || '') + '"></div>');
-             $refGrid.append('<div><label style="font-size:0.8rem;">Nama Situs / Portal</label><input type="text" id="md-ref-site" class="md-input md-track-draft" placeholder="Nama Situs" value="' + (currentRef.site || '') + '"></div>');
+             $refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Nama Situs</label><input type="text" id="md-ref-site" class="md-input" placeholder="Situs" value="' + sanitizeHTML(currentRef.site || '') + '"></div>');
-             $refGrid.append('<div><label style="font-size:0.8rem;">Penulis (Opsional)</label><input type="text" id="md-ref-author" class="md-input md-track-draft" placeholder="Nama Penulis" value="' + (currentRef.author || '') + '"></div>');
+             $refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Penulis</label><input type="text" id="md-ref-author" class="md-input" placeholder="Penulis" value="' + sanitizeHTML(currentRef.author || '') + '"></div>');
-             $refGrid.append('<div><label style="font-size:0.8rem;">Penerbit (Opsional)</label><input type="text" id="md-ref-publisher" class="md-input md-track-draft" placeholder="Penerbit" value="' + (currentRef.publisher || '') + '"></div>');
+             $refGrid.append('<div><label style="font-size:0.78rem; margin-bottom:4px;">Penerbit</label><input type="text" id="md-ref-publisher" class="md-input" placeholder="Penerbit" value="' + sanitizeHTML(currentRef.publisher || '') + '"></div>');
-             var $dateBox = $('<div><label style="font-size:0.8rem;">Tanggal Akses</label></div>');
+             var $dateBox = $('<div><label style="font-size:0.78rem; margin-bottom:4px;">Tanggal Akses</label></div>');
-             var $dateInpWrap = $('<div style="display:flex; gap:8px;"></div>');
+             var $dateInpWrap = $('<div style="display:flex; gap:6px;"></div>');
-             var $dateInp = $('<input type="date" id="md-ref-date" class="md-input md-track-draft" value="' + (currentRef.date || '') + '">');
+             var $dateInp = $('<input type="date" id="md-ref-date" class="md-input" value="' + sanitizeHTML(currentRef.date || '') + '">');
-             var $todayBtn = $('<button type="button" class="md-btn-icon" style="padding:6px 10px; font-size:0.8rem; border-color:#cbd5e1;" title="Set Hari Ini">Hari Ini</button>');
+             var $todayBtn = $('<button type="button" class="md-btn-icon" style="padding:4px 8px; font-size:0.75rem;" title="Set Hari Ini">Hari Ini</button>');
-             $todayBtn.on('click', function() { $dateInp.val(getTodayString()).trigger('input'); });
+             $todayBtn.on('click', function() { $dateInp.val(getTodayString()); });
              $dateInpWrap.append($dateInp).append($todayBtn);
              $dateBox.append($dateInpWrap);
@@ Baris 672: / Baris 715: @@
              $form.append($refArea);
-             // TOMBOL AKSI FORM
+             $form.append(`
+                <div class="md-cc0-notice">
+                    <b>Perhatian Lisensi:</b> Setiap data yang diterbitkan di sini akan terlihat publik dan dirilis di bawah lisensi <b>Creative Commons Zero (CC0)</b>. Jika Anda tidak ingin suntingan Anda digunakan secara bebas dan publik tanpa batas, jangan klik Terbitkan. <span class="md-help-icon" data-help="Dengan menerbitkan, Anda melepaskan seluruh hak cipta atas input data ini ke domain publik murni sesuai prinsip Wikidata.">${svgHelp}</span>
+                </div>
+                <div class="md-edit-meta">
+                    <label style="font-size:0.85rem; font-weight:700;">Ringkasan Suntingan <span class="md-help-icon" data-help="Jelaskan secara singkat apa yang Anda ubah atau tambahkan. Contoh: Menambah data tanggal lahir rumi.">${svgHelp}</span></label>
+                    <input type="text" id="md-edit-summary" class="md-input" placeholder="Jelaskan perubahan Anda secara singkat...">
+                    <label style="font-size:0.85rem; cursor:pointer; font-weight:700; margin-top:5px; display:inline-flex; align-items:center; gap:6px;"><input type="checkbox" id="md-minor-edit"> Ini adalah suntingan kecil (minor)</label>
+                </div>
+            `);
              var $actions = $('<div class="md-form-actions"></div>');
-             var $btnSave = $('<button class="md-btn md-btn-save">Simpan & Terbitkan<span class="md-spinner"></span></button>');
+             var $btnSave = $('<button class="md-btn md-btn-save">Terbitkan <span class="md-spinner"></span></button>');
+            var $btnDraft = $('<button class="md-btn md-btn-draft">Simpan Draft</button>');
              var $btnCancel = $('<button class="md-btn md-btn-cancel">Batal</button>');
-             $actions.append($btnSave).append($btnCancel);
+             $actions.append($btnSave).append($btnDraft).append($btnCancel);
+            if (draftData && isNew) {
+                var $btnDelDraft = $('<button class="md-btn" style="background:#eab308; color:#fff;">Hapus Draft</button>');
+                $btnDelDraft.on('click', function() {
+                    localStorage.removeItem(DRAFT_KEY);
+                    alert("Draft berhasil dihapus!");
+                    $(this).hide();
+                });
+                $actions.append($btnDelDraft);
+            }
              if (!isNew) {
-                 var $btnDelete = $('<button class="md-btn md-btn-delete">Hapus Data<span class="md-spinner"></span></button>');
+                 var $btnDelete = $('<button class="md-btn md-btn-delete">Hapus Data <span class="md-spinner"></span></button>');
                  $btnDelete.on('click', function() {
-                     if(confirm('Yakin ingin menghapus item data ini permanen?')) {
+                     if(confirm('Yakin ingin menghapus item data ini?')) {
                          dataItems.splice(index, 1);
-                         saveData('Menghapus data terstruktur', $(this), rawContent);
+                         saveData('Menghapus data', $(this), rawContent, $('#md-edit-summary').val(), $('#md-minor-edit').is(':checked'));
                      }
                  });
@@ Baris 692: / Baris 756: @@
              $form.append($actions);
              $container.append($form);
+            initTooltips();
              $('#md-chk-person').on('change', function() {
-                 if($(this).is(':checked')) $('#md-social-box').slideDown(200).css('display', 'grid');
+                 if($(this).is(':checked')) $('#md-social-box').css('display', 'grid');
-                 else $('#md-social-box').slideUp(200);
+                 else $('#md-social-box').hide();
              });
-            // Animasi Scroll
+             $('html, body').animate({ scrollTop: $form.offset().top - 60 }, 250);
-             $('html, body').animate({ scrollTop: $form.offset().top - 80 }, 300);
+             $btnCancel.on('click', function() { $container.empty(); });
-             $btnCancel.on('click', function() {
+             $btnDraft.on('click', function() {
-                 localStorage.removeItem(draftKey);
+                 var socObj = {};
-                 $container.empty();
+                if ($('#md-chk-person').is(':checked')) {
+                    Object.keys(SOCIAL_PLATFORMS).forEach(function(k) {
+                        var valU = $('#md-soc-' + k).val().trim();
+                        if (valU) socObj[k] = valU;
+                    });
+                }
+                 var draftObj = {
+                    prop: $('#md-inp-prop').val().trim(),
+                    val: $('#md-inp-val').val().trim(),
+                    link: $('#md-inp-link').is(':checked'),
+                    linkSplit: $('#md-inp-split').is(':checked'),
+                    linkTarget: $('#md-inp-target').val().trim(),
+                    isPersonOrg: $('#md-chk-person').is(':checked'),
+                    socials: socObj,
+                    ref: {
+                        type: $('#md-ref-type').val(), subType: $('#md-ref-subtype').val(),
+                        url: ensureHttps($('#md-ref-url').val()), title: $('#md-ref-title').val().trim(),
+                        site: $('#md-ref-site').val().trim(), author: $('#md-ref-author').val().trim(),
+                        publisher: $('#md-ref-publisher').val().trim(), date: $('#md-ref-date').val()
+                    }
+                };
+                localStorage.setItem(DRAFT_KEY, JSON.stringify(draftObj));
+                alert("Draft berhasil disimpan di memori peramban Anda!");
              });
-             // FITUR BARU: Auto-Save Draft
+             $btnSave.on('click', function() {
-            function gatherFormData() {
+                var newProp = $('#md-inp-prop').val().trim();
+                var newVal = $('#md-inp-val').val().trim();
+                if (!newProp || !newVal) {
+                    alert("Label Data dan Nilai wajib diisi!"); return;
+                }
+                var isPerson = $('#md-chk-person').is(':checked');
                  var socObj = {};
-                 if ($('#md-chk-person').is(':checked')) {
+                 if (isPerson) {
                      Object.keys(SOCIAL_PLATFORMS).forEach(function(k) {
                          var valU = $('#md-soc-' + k).val().trim();
@@ Baris 715: / Baris 809: @@
                      });
                  }
                  var refObj = {
                      type: $('#md-ref-type').val(),
@@ Baris 725: / Baris 820: @@
                      date: $('#md-ref-date').val()
                  };
                  Object.keys(refObj).forEach(function(key) { if (!refObj[key]) delete refObj[key]; });
                  if (Object.keys(refObj).length === 0) refObj = null;
-                 return {
+                 var newItem = {
-                     prop: $('#md-inp-prop').val().trim(),
+                     prop: newProp, val: newVal,
-                    val: $('#md-inp-val').val().trim(),
                      link: $('#md-inp-link').is(':checked'),
                      linkSplit: $('#md-inp-split').is(':checked'),
                      linkTarget: $('#md-inp-target').val().trim(),
-                     isPersonOrg: $('#md-chk-person').is(':checked'),
+                     isPersonOrg: isPerson,
                      socials: socObj,
                      ref: refObj
                  };
-            }
-            if (isNew) {
-                $('.md-track-draft').on('input change', function() {
-                    localStorage.setItem(draftKey, JSON.stringify(gatherFormData()));
-                });
-            }
-            $btnSave.on('click', function() {
-                var newItem = gatherFormData();
-                if (!newItem.prop || !newItem.val) {
-                    showToast("Peringatan: Label Data dan Nilai wajib diisi!", 'warning');
-                    $('#md-inp-prop').focus();
-                    return;
-                }
                  if (isNew) dataItems.push(newItem);
                  else dataItems[index] = newItem;
-                 saveData(isNew ? 'Tambah data' : 'Edit data', $(this), rawContent);
+                 saveData(isNew ? 'Tambah data' : 'Edit data', $(this), rawContent, $('#md-edit-summary').val().trim(), $('#md-minor-edit').is(':checked'));
              });
          }
-         // 10. FITUR BARU: JSON EXPORT & IMPORT KE FILE
+         // 10. JSON EXPORT & IMPORT MODAL (ASLI UTUH)
          function showJsonModal(rawContent) {
-             var $container = $('#md-form-container');
+             var $container = $('#md-form-container').empty();
-            $container.empty();
              var jsonStr = JSON.stringify(dataItems, null, 2);
              var $box = $('<div class="md-form-box"></div>');
-             $box.append('<h4 class="md-form-title">Ekspor / Impor File JSON</h4>');
+             $box.append('<h4 class="md-form-title">Ekspor / Impor JSON Data</h4>');
-             $box.append('<p style="font-size:0.85rem; color:#64748b; margin-bottom:12px;">Anda dapat mendownload struktur data ini sebagai file <b>.json</b> untuk cadangan, atau paste kode JSON untuk memulihkan.</p>');
+             $box.append('<p style="font-size:0.82rem; color:#64748b; margin-bottom:10px;">Anda dapat menyalin struktur JSON di bawah untuk cadangan atau menempelkan JSON dari artikel lain.</p>');
-             var $txt = $('<textarea class="md-textarea" rows="12" style="font-family:monospace; font-size:0.8rem; background:#1e293b; color:#10b981; border:none;"></textarea>').val(jsonStr);
+             var $txt = $('<textarea class="md-textarea" rows="10" style="font-family:monospace; font-size:0.8rem;"></textarea>').val(jsonStr);
              $box.append($txt);
              var $actions = $('<div class="md-form-actions"></div>');
+             var $btnImport = $('<button class="md-btn md-btn-save">Impor JSON & Simpan <span class="md-spinner"></span></button>');
-            var $btnDownload = $('<button class="md-btn" style="background:#10b981;">Download File JSON</button>');
-             var $btnImport = $('<button class="md-btn md-btn-save">Timpa & Impor Data <span class="md-spinner"></span></button>');
              var $btnCancel = $('<button class="md-btn md-btn-cancel">Tutup</button>');
-            $btnDownload.on('click', function() {
+             $actions.append($btnImport).append($btnCancel);
-                var blob = new Blob([$txt.val()], {type: "application/json;charset=utf-8"});
-                var url = URL.createObjectURL(blob);
-                var a = document.createElement('a');
-                a.href = url;
-                a.download = 'Mippedia_Data_' + pageName.replace(/ /g, '_') + '.json';
-                a.click();
-                URL.revokeObjectURL(url);
-                showToast('File JSON berhasil didownload!', 'success');
-            });
-             $actions.append($btnDownload).append($btnImport).append($btnCancel);
              $box.append($actions);
              $container.append($box);
-            $('html, body').animate({ scrollTop: $box.offset().top - 80 }, 300);
              $btnCancel.on('click', function() { $container.empty(); });
@@ Baris 803: / Baris 866: @@
                      var parsed = JSON.parse($txt.val());
                      if (Array.isArray(parsed)) {
-                         if(confirm('PERHATIAN! Ini akan menimpa seluruh data yang ada. Lanjutkan?')) {
+                         dataItems = parsed;
-                            dataItems = parsed;
+                        saveData('Impor data dari JSON', $(this), rawContent, 'Impor struktur data JSON', false);
-                            saveData('Impor massal dari JSON', $(this), rawContent);
-                        }
                      } else {
-                         showToast("Format Error: JSON harus berupa Array (diawali dan diakhiri kurung siku).", 'error');
+                         alert("Format JSON harus berupa Array items!");
                      }
                  } catch(e) {
-                     showToast("Format JSON tidak valid!", 'error');
+                     alert("Format JSON tidak valid: " + e.message);
                  }
              });
          }
-         // 11. EKSEKUSI
+         // 11. EXECUTE
          loadData().then(function(rawContent) { buildUI(rawContent); });
      });
@@ Baris 1.296: / Baris 1.357: @@
              '<div style="font-size:11px; color:#718096; font-weight:800; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;">Lisensi, Atribusi & Penggunaan Data</div>' +
              '<p style="margin:0 0 10px; font-size:13px; color:#4a5568; line-height:1.6;">' +
-             'Seluruh data terstruktur yang tersaji dalam repositori ini merupakan milik publik dan tersedia di bawah lisensi resmi ' +
+             'Seluruh data terstruktur yang tersaji dalam repositori ini merupakan milik publik dan tersedia di bawah ' +
-             '<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" style="color:#6a5acd; text-decoration:none; font-weight:700;">Creative Commons Attribution-ShareAlike 4.0 International</a>.' +
+             '<a href="https://creativecommons.org/publicdomain/zero/1.0/"target="_blank" style="color:#6a5acd; text-decoration:none; font-weight:700;">Lisensi Creative Commons CC0</a>.' +
              '</p>' +
              '<p style="margin:0; font-size:12px; color:#a0aec0;">Akses API dan penggunaan data secara massal wajib mencantumkan atribusi kepada <strong>Mippedia Community</strong> selaku pengelola proyek.</p></div>';

Admin (bicara | kontrib)