/* ======================
   WRAPPER
====================== */
.article-wrap{
  max-width:1200px;
  margin:60px auto;
}

/* ======================
   ARTIKEL BOX (HALAMAN BACA)
====================== */
.article-box{
  background:#ffffff;
  border:2px solid #f1d37a; /* border emas lembut */
  border-radius:22px;
  padding:34px 36px;
  box-shadow:
    0 18px 45px rgba(160,120,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.6);
  position:relative;
}

/* garis aksen atas */
.article-box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:linear-gradient(90deg,#d4af37,#f7e27c,#d4af37);
  border-radius:22px 22px 0 0;
}

/* JUDUL */
.article-title{
  font-size:2.3rem;
  font-weight:800;
  line-height:1.25;
  margin-bottom:12px;
  color:#111827;
}

/* META */
.article-meta{
  font-size:.9rem;
  color:#6b7280;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px dashed #e6c200;
}

/* FOTO */
.article-image-box{
  width:100%;
  height:420px;
  overflow:hidden;
  border-radius:16px;
  margin-bottom:28px;
  border:1px solid #ecdca6;
  background:#fafafa;
}

.article-image-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.article-content{
  font-size:1.08rem;
  line-height:1.9;
  color:#1f2937;
}

.article-content p{
  margin-bottom:1.3em;
}

.article-content img{
  max-width:100%;
  border-radius:12px;
  margin:18px 0;
}


/* ======================
   SIDEBAR
====================== */
.sidebar-box{
  background:#fff8dc;
  border:1px solid #f0d46a;
  border-radius:18px;
  padding:24px;
  box-shadow:0 10px 30px rgba(160,120,0,.25);
}

.sidebar-box h3{
  font-size:1.3rem;
  font-weight:800;
  margin-bottom:18px;
  border-bottom:2px solid #d4af37;
  padding-bottom:6px;
}

/* ITEM */
.sidebar-item{
  display:flex;
  gap:12px;
  margin-bottom:16px;
  text-decoration:none;
  color:#111;
  padding-bottom:14px;
  border-bottom:1px dashed #e6c200;
}

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

.sidebar-item img{
  width:90px;
  height:70px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e5e7eb;
}

.sidebar-item h4{
  font-size:.95rem;
  line-height:1.35;
  margin:0 0 4px;
}

.sidebar-item small{
  color:#6b7280;
}

.sidebar-item:hover h4{
  color:#b48b00;
}

/* ======================
   RESPONSIVE
====================== */
@media(max-width:768px){
  .article-box{
    padding:24px 22px;
  }
  .article-image-box{
    height:240px;
  }
}

  .sidebar-box{
    margin-top:28px;
  }
}