/* ================================================
   artikel.css — Halaman Artikel & Dakwah
   ================================================ */

.artikel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.artikel-card {
  background: white; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(72,91,74,0.08); transition: all 0.25s;
}
.artikel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.artikel-thumb {
  height: 200px; background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.artikel-thumb-icon { font-size: 3rem; color: rgba(212,243,206,0.5); }
.artikel-cat {
  position: absolute; top: 14px; left: 14px;
  background: var(--green-light); color: #ffffff;
  font-size: 0.72rem; font-weight: 700; padding: 4px 12px;
  border-radius: 50px; text-transform: uppercase; letter-spacing: 0.06em;
}
.artikel-body { padding: 20px; }
.artikel-date { font-size: 0.78rem; color: var(--text-light); margin-bottom: 8px; }
.artikel-body h3 { font-size: 1rem; color: var(--green-deep); line-height: 1.4; margin-bottom: 8px; }
.artikel-body p  { font-size: 0.83rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 14px; }
.artikel-link   { color: var(--green-dark); font-size: 0.83rem; font-weight: 600; text-decoration: none; }
.artikel-link:hover { text-decoration: underline; }

/* Admin bar artikel */
.admin-artikel-bar {
  display: none; background: var(--green-pale); border: 1px solid var(--green-light);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 24px;
  align-items: center; gap: 12px; flex-wrap: wrap;
}
.admin-artikel-bar.show { display: flex; }
.admin-artikel-bar input,
.admin-artikel-bar textarea,
.admin-artikel-bar select {
  font-family: var(--font-body); font-size: 0.9rem; padding: 8px 12px;
  border: 1.5px solid var(--green-light); border-radius: 8px; outline: none;
  background: white; color: var(--text-dark);
}
.admin-artikel-bar input:focus,
.admin-artikel-bar textarea:focus { border-color: var(--green-dark); }


.artikel-isi-konten h2 { font-size:1.3rem; color:var(--green-deep); margin:20px 0 8px; }
.artikel-isi-konten h3 { font-size:1.1rem; color:var(--green-dark); margin:16px 0 6px; }
.artikel-isi-konten strong { font-weight:700; }
.artikel-isi-konten em { font-style:italic; }
.artikel-isi-konten ul, .artikel-isi-konten ol { margin:12px 0 12px 24px; }
.artikel-isi-konten li { margin-bottom:6px; }
.artikel-isi-konten blockquote { border-left:4px solid var(--green-light); padding:8px 16px; margin:16px 0; color:var(--text-mid); font-style:italic; background:var(--green-pale); border-radius:0 8px 8px 0; }