/* === 1. LAYOUT UTAMA === */
.article-template {
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 40px;
  box-sizing: border-box;
}

.article-container {
  display: flex;
  gap: 40px;
  margin: 30px 0;
}

.blog-sidebar {
  width: 300px;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   KHUSUS SIDEBAR: UKURAN MAKSIMAL (OSWALD 22px & ASSISTANT 17px)
   ========================================================================== */
/* Import Font Oswald & Assistant dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700&family=Oswald:wght@600;700&display=swap');

/* [1] SEMUA ISI SIDEBAR: Didongkrak ke 17px (Sangat Jelas & Terbaca) */
.blog-sidebar,
.blog-sidebar p, 
.blog-sidebar a, 
.blog-sidebar span, 
.blog-sidebar li, 
.blog-sidebar input {
  font-family: 'Assistant', sans-serif !important;
  font-size: 17px; /* Ukuran teks besar untuk kenyamanan maksimal */
  line-height: 1.65; /* Jarak baris ekstra agar tidak sumpek */
  letter-spacing: 0.01em;
  color: #1e293b; /* Warna Slate pekat agar kontras teks ke latar belakang sangat tajam */
}

/* [2] JUDUL MASING-MASING SECTION: Oswald diperbesar ke 22px */
.sidebar-title {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  font-weight: 700; /* Dibuat lebih tebal/bold */
  font-size: 22px; /* Ukuran judul diperbesar signifikan */
  letter-spacing: 0.05em; 
  line-height: 1.3;
  color: #0f172a;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 3px solid #cbd5e1; /* Garis pembatas bawah dibuat lebih tebal dan tegas */
  text-align: left;
}

/* [3] TOMBOL SIDEBAR: Assistant diperbesar ke 16px dengan ruang klik mantap */
.blog-sidebar button, 
.blog-sidebar .btn, 
.blog-sidebar .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1e293b; /* Slate gelap kontras tinggi */
  color: #ffffff !important;
  font-family: 'Assistant', sans-serif !important;
  font-weight: 600;
  font-size: 16px; /* Ukuran teks tombol dinaikkan */
  letter-spacing: 0.03em;
  padding: 12px 26px; /* Padding diperlebar mengikuti ukuran teks baru */
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1;
}

/* Efek Hover & Active Tombol */
.blog-sidebar button:hover, 
.blog-sidebar .btn:hover, 
.blog-sidebar .button-link:hover {
  background-color: #0f172a;
  color: #ffffff !important;
}

.blog-sidebar button:active, 
.blog-sidebar .btn:active, 
.blog-sidebar .button-link:active {
  transform: scale(0.97);
}


/* === 2. WIDGET GENERAL === */
.blog-sidebar .widget {
  margin-bottom: 45px; /* Jarak antar widget disesuaikan dengan proporsi teks baru */
  width: 100%;
}


/* === 3. RECENT POSTS (Judul Artikel Naik ke 18px) === */
.recent-article-item {
  display: flex;
  align-items: flex-start; /* Mengubah ke flex-start agar baris teks panjang rapi dari atas */
  margin-bottom: 20px; /* Jarak antar artikel direnggangkan */
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.recent-article-item:hover {
  opacity: 0.75;
}

.recent-article-thumb {
  flex-shrink: 0;
  margin-right: 16px;
  border-radius: 6px;
  overflow: hidden;
}

.recent-article-meta {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.recent-article-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  font-family: 'Assistant', sans-serif !important;
  font-weight: 600 !important; /* Semi-bold agar judul artikel menonjol */
  line-height: 1.45; 
  font-size: 18px; /* Diperbesar agar seimbang dengan teks isi */
  margin: 0;
  color: #0f172a;
  text-transform: none;
}


/* === 4. TAGS & CATEGORIES (Sangat Proporsional) === */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-link {
  font-size: 15px; /* Tag diperbesar agar mudah diklik di desktop/mobile */
  padding: 6px 14px;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  transition: all 0.2s;
}

.tag-link:hover {
  background-color: #1e293b !important;
  border-color: #1e293b !important;
  color: #fff !important;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  border-bottom: 1px dashed #cbd5e1; 
}

.category-list li:last-child {
  border-bottom: none;
}

.category-list li a {
  text-align: left;
  display: block;
  padding: 12px 0; /* Area sentuh link diperluas */
  font-size: 18px; /* Disamakan dengan ukuran teks dasar */
  color: #1e293b;
  transition: all 0.2s;
}

.category-list li a:hover {
  color: #007bff !important;
  padding-left: 8px; /* Efek geser sedikit lebih tegas */
}


/* === 5. RESPONSIVE (Mobile) === */
@media screen and (max-width: 1024px) {
  .article-template {
    padding: 0 20px;
  }
}

@media screen and (max-width: 900px) {
  .article-container {
    flex-direction: column;
  }
  .blog-sidebar {
    width: 100%;
    border-top: 1px solid #eee;
    padding-top: 30px;
  }
}