/* ===============================
   ARTIKEL – GLOBAL IMAGE & CONTENT STYLE
   =============================== */

/* Container artikel */
.artikel-content {
    max-width: 720px;          /* Batasi lebar artikel */
    margin: 0 auto;            /* Center artikel */
    line-height: 1.6;          /* Rapi jarak baris */
    word-wrap: break-word;      /* Hindari teks keluar container */
    font-family: Arial, sans-serif; /* Font profesional */
    color: #222;
    padding: 0 15px;           /* Memberi padding agar tidak terlalu rapat */
}

/* Gambar default – sesuai CKEditor */
.artikel-content img {
    display: inline-block;       /* Inline agar tetap sesuai editor */
    margin: 10px 0;              /* Jarak vertikal antar elemen */
    width: auto !important;      /* Hormati ukuran CKEditor */
    height: auto !important;     
    max-width: 100%;             /* Jangan keluar container */
    border: none;                
    vertical-align: middle;      /* Rapi dengan teks */
}

/* Hapus style inline CKEditor yang merusak */
.artikel-content img[style] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Gambar full width (opsional) */
.artikel-content img.full,
.artikel-content figure.full img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto;
}

/* Figure / caption */
.artikel-content figure {
    margin: 20px 0;
    text-align: center;
    display: inline-block; /* Jangan paksa block, biar bisa inline dengan text jika perlu */
    max-width: 100%;
}

.artikel-content figure img {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}

.artikel-content figcaption {
    font-size: 12px;
    color: #555;
    margin-top: 6px;
    line-height: 1.4;
    text-align: center;
}

/* Teks & paragraf */
.artikel-content p {
    margin: 0 0 16px 0;
}

.artikel-content h1,
.artikel-content h2,
.artikel-content h3 {
    margin: 24px 0 12px 0;
    line-height: 1.3;
    font-weight: bold;
    color: #2980b9; /* Warna heading profesional */
}

/* Mobile responsive tweaks */
@media (max-width: 768px) {
    .artikel-content {
        padding: 0 15px;
    }

    .artikel-content img,
    .artikel-content figure {
        max-width: 100%;
    }

    .artikel-content img {
        width: 100%;
        height: auto;
    }

    .artikel-content figure {
        text-align: center;
    }
}