/* --- ARCava-POPost: FULL CONTAINER STYLE --- */

Untuk membuat tampilan lebih rapat dan padat (compact), kita perlu mengurangi padding, margin, dan ukuran font pada beberapa elemen. Ini akan memberikan kesan list berita yang lebih intens dan profesional.

Berikut adalah kode yang sudah dioptimalkan agar spasi antar postingan lebih rapat:

HTML

<style>
/* --- ARCava-POPost: COMPACT VERSION --- */
#ARCava-POPost { color: var(--text); overflow: hidden; }
.arc-list { list-style: none; padding: 0; margin: 0; }

/* ITEM PERTAMA (LEBIH RAPAT) */
.arc-item-first { 
  margin-bottom: 12px; /* Dikurangi dari 25px */
  border-bottom: 1px solid var(--border); 
  padding-bottom: 12px; /* Dikurangi dari 20px */
}
.arc-item-first a { display: flex !important; flex-direction: column !important; text-decoration: none; color: inherit; }
.arc-item-first .arc-thumb { 
  width: 100%; 
  aspect-ratio: 16 / 9; 
  overflow: hidden; 
  border-radius: 8px; /* Lebih kecil agar serasi */
  border: 1px solid var(--accent); 
  margin-bottom: 10px; 
}
.arc-item-first .arc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.arc-item-first .arc-title { 
  font-family: 'Rajdhani'; 
  font-size: 17px; /* Ukuran judul pertama dikecilkan */
  font-weight: 700; 
  line-height: 1.2; 
  margin: 0; 
}

/* ITEM SUB (2-5) - JARAK SANGAT RAPAT */
.arc-item-sub { 
  padding: 8px 0; /* Dikurangi dari 15px */
  border-bottom: 1px solid var(--border); 
}
.arc-item-sub a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }

/* NOMOR STYLE (LEBIH KECIL & RAPAT) */
.arc-num { 
  font-family: 'Rajdhani'; 
  font-weight: 900; 
  font-style: italic; 
  font-size: 20px; /* Ukuran nomor dikecilkan */
  color: var(--accent); 
  min-width: 28px; /* Ruang nomor dipersempit */
  text-shadow: 0 0 5px rgba(0, 242, 255, 0.3); 
  line-height: 1;
}

.arc-title { 
  font-family: 'Rajdhani'; 
  font-size: 14px; /* Ukuran judul list dikecilkan */
  font-weight: 700; 
  margin: 0; 
  line-height: 1.3;
  transition: 0.2s; 
}

/* Hover Effect */
.arc-item-sub:hover .arc-title, .arc-item-first:hover .arc-title { color: var(--accent); }

.arc-loading { font-family: 'Rajdhani'; text-align: center; color: var(--accent); padding: 10px; font-size: 12px; }

/* Mobile Adjustment */
@media (max-width: 600px) {
  .arc-item-first .arc-title { font-size: 16px; }
  .arc-item-sub { padding: 10px 0; } /* Sedikit longgar di mobile agar mudah di-klik jari */
}
</style>

<div id='ARCava-POPost'>
  <div class='arc-loading'>SCANNING TRENDS...</div>
</div>

<script>
// Logic tetap sama agar data terambil otomatis
const arcConfig = { postCount: 5 };
function renderARC(data) {
  let entries = data.feed.entry || [];
  let html = '<ul class="arc-list">';
  entries.forEach((entry, i) => {
    let title = entry.title.$t;
    let url = entry.link.find(l => l.rel === 'alternate').href;
    let thumb = entry.media$thumbnail ? entry.media$thumbnail.url.replace('s72-c', 's600') : 'https://placehold.co/600x337/121212/00f2ff?text=No+Image';
    if (i === 0) {
      html += `<li class="arc-item-first"><a href="${url}"><div class="arc-thumb"><img src="${thumb}"/></div><div style="display:flex;gap:10px"><span class="arc-num">01</span><h2 class="arc-title">${title}</h2></div></a></li>`;
    } else {
      let num = (i + 1).toString().padStart(2, '0');
      html += `<li class="arc-item-sub"><a href="${url}"><span class="arc-num">${num}</span><h2 class="arc-title">${title}</h2></a></li>`;
    }
  });
  html += '</ul>';
  document.getElementById('ARCava-POPost').innerHTML = html;
}
const arcScript = document.createElement('script');
arcScript.src = `/feeds/posts/default?alt=json-in-script&max-results=${arcConfig.postCount}&callback=renderARC`;
document.body.appendChild(arcScript);
</script>

Apa yang diubah agar lebih rapat?

1. Padding & Margin: Jarak antar list (.arc-item-sub) dikurangi menjadi 8px, sehingga dalam satu layar sidebar bisa menampung lebih banyak judul.

2. Font Size: Judul list utama kini 14px (sebelumnya 16px) agar tidak memakan banyak tempat jika judulnya panjang (tetap terbaca jelas berkat font Rajdhani).

3. Nomor Urut: Ukuran angka dikurangi menjadi 20px dan lebar minimumnya dipersempit, sehingga teks judul bisa lebih menempel ke kiri.

4. Thumbnail Margin: Jarak antara gambar besar dan judulnya dipersempit menjadi 10px.

Apakah tingkat kerapatannya sudah sesuai dengan keinginanmu? Jika masih ingin lebih rapat lagi, kita bisa menghilangkan garis bawah (border-bottom) antar postingan.