.igcopycode-box{
  --_bg: var(--igcc-bg, #0f172a);
  --_bd: var(--igcc-border, #1f2937);
  --_tx: var(--igcc-text, #e5e7eb);
  --_btnbg: var(--igcc-btn-bg, #2563eb);
  --_btntx: var(--igcc-btn-tx, #ffffff);

  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: 10px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Tambahan biar nggak mepet ke artikel */
  margin: 24px 0; /* atas-bawah 24px, kiri-kanan 0 */
  padding: 0;     /* padding dalam box, bisa diatur jika perlu */
}


.igcopycode-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--_bd); color:var(--_tx);
}

.igcopycode-label{ font-size:12px; opacity:.85; text-transform:lowercase; }

.igcopycode-copy{
  background: var(--_btnbg); color: var(--_btntx);
  border:0; border-radius: 6px; padding:6px 10px; font-size:12px; cursor:pointer;
}

.igcopycode-copy:active{ transform: translateY(1px); }

.igcopycode-body{
  margin:0; padding:14px; color: var(--_tx); white-space:pre-wrap; line-height:1.55;
  -webkit-user-select:text; user-select:text;
}

/* === Layout Spacing === */
.igcopycode-box {
  margin: 32px 0; /* jarak antar box biar lega */
  border-radius: 10px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Kalau box berdempetan, kasih jarak ekstra */
.igcopycode-box + .igcopycode-box {
  margin-top: 40px;
}

/* === Header Styling === */
.igcopycode-head {
  background-color: #1C1917; /* dark charcoal */
  color: #F5F5F4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #3F3F46;
}

/* === Body Styling === */
.igcopycode-body {
  background-color: var(--igcc-bg, #1C1917);
  color: var(--igcc-text, #F5F5F4);
  padding: 18px 20px; /* biar tidak mepet ke pinggir */
  line-height: 1.6;
  font-size: 14.5px;
  white-space: pre-wrap;
}

/* === Tombol Copy === */
.igcopycode-copy {
  background-color: #F59E0B; /* orange gold */
  color: #1C1917;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.igcopycode-copy:hover {
  background-color: #FBBF24; /* lebih terang saat hover */
  transform: translateY(-1px);
}

/* === Responsive (Mobile) === */
@media (max-width: 768px) {
  .igcopycode-box {
    margin: 24px 0;
  }
  .igcopycode-body {
    padding: 14px;
    font-size: 13.5px;
  }
}