/* === Artikel Container Tema MERAH MEWAH & ELEGANT (Nyaman di Mata) === */
.article-container {
  margin: 40px auto;
  padding: 35px 30px;
  background: linear-gradient(145deg, #160a0a, #0c0505); /* Gradasi merah marun gelap yang lembut dan ramah di mata */
  border-radius: 20px;
  border: 1px solid rgba(220, 53, 69, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(220, 53, 69, 0.12);
  font-family: "Poppins", sans-serif;
  color: #e2e8f0;
  line-height: 1.8;
  position: relative;
  overflow: hidden;
}

/* Judul Utama Artikel (H1) */
.article-container h1 {
  font-size: 1.9rem;
  font-weight: 800;
  text-align: center;
  color: #ffffff;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px dashed rgba(255, 170, 0, 0.4);
  text-shadow: 0 0 12px rgba(255, 60, 60, 0.4);
  letter-spacing: 0.5px;
}

/* Paragraf */
.article-container p {
  font-size: 15.5px;
  margin-bottom: 20px;
  text-align: justify;
  color: #cbd5e1;
}

/* Link dengan Efek Gengsi */
.article-container a {
  color: #ffaa00;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed #ffaa00;
  transition: all 0.3s ease;
}

.article-container a:hover {
  color: #ff4d4d;
  border-color: #ff4d4d;
  text-shadow: 0 0 8px rgba(255, 77, 77, 0.8);
}

/* List */
.article-container ul,
.article-container ol {
  margin-left: 20px;
  margin-bottom: 20px;
  color: #e2e8f0;
}

/* Blockquote Mewah */
.article-container blockquote {
  border-left: 5px solid #ff4d4d;
  padding: 15px 20px;
  margin: 25px 0;
  font-style: italic;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 10px 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Efek Kilap Mewah Bergerak */
.article-container::after {
  content: "";
  position: absolute;
  top: 0; 
  left: -150%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  animation: shineArticle 4s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
}

/* Animasi Kilap */
@keyframes shineArticle {
  0% { left: -150%; }
  50% { left: 150%; }
  100% { left: 150%; }
}

/* Responsif Mobile */
@media (max-width: 600px) {
  .article-container {
    padding: 20px 15px;
    margin: 15px;
  }

  .article-container h1 {
    font-size: 1.4rem;
  }

  .article-container p {
    font-size: 14px;
  }
}