/* ================================================================
   MIN 7 TAPIN - RICH CONTENT / SUMMERNOTE OUTPUT
   PHP 8.2 / CodeIgniter 3
   ================================================================ */

.rich-content,
.artikel-detail-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: #405a70;
    font-size: 16px;
    line-height: 1.9;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.rich-content p,
.artikel-detail-content p {
    margin: 0 0 20px;
}

.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6,
.artikel-detail-content h1,
.artikel-detail-content h2,
.artikel-detail-content h3,
.artikel-detail-content h4,
.artikel-detail-content h5,
.artikel-detail-content h6 {
    color: #153f72;
    font-weight: 800;
    line-height: 1.4;
    margin-top: 28px;
    margin-bottom: 14px;
}
.rich-content h1,.artikel-detail-content h1{font-size:30px}
.rich-content h2,.artikel-detail-content h2{font-size:26px}
.rich-content h3,.artikel-detail-content h3{font-size:22px}
.rich-content h4,.artikel-detail-content h4{font-size:19px}
.rich-content h5,.artikel-detail-content h5{font-size:17px}
.rich-content h6,.artikel-detail-content h6{font-size:15px}

.rich-content strong,.rich-content b,
.artikel-detail-content strong,.artikel-detail-content b { font-weight: 700; }
.rich-content em,.rich-content i,
.artikel-detail-content em,.artikel-detail-content i { font-style: italic; }
.rich-content u,.artikel-detail-content u { text-decoration: underline; }
.rich-content s,.rich-content strike,
.artikel-detail-content s,.artikel-detail-content strike { text-decoration: line-through; }

.rich-content a,
.artikel-detail-content a {
    color: #087f6b;
    font-weight: 600;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
   LIST: 1 -> a -> i -> A -> I
   --------------------------------------------------------------- */
.rich-content ol,
.rich-content ul,
.artikel-detail-content ol,
.artikel-detail-content ul {
    display: block !important;
    margin: 12px 0 22px !important;
    padding-left: 2.5rem !important;
    list-style-position: outside !important;
}

.rich-content ol,
.artikel-detail-content ol { list-style-type: decimal !important; }
.rich-content ul,
.artikel-detail-content ul { list-style-type: disc !important; }

.rich-content li,
.artikel-detail-content li {
    display: list-item !important;
    margin: 4px 0 !important;
    padding-left: .25em !important;
}

/* Explicit type attribute from Summernote */
.rich-content ol[type="1"], .artikel-detail-content ol[type="1"] { list-style-type: decimal !important; }
.rich-content ol[type="a"], .artikel-detail-content ol[type="a"] { list-style-type: lower-alpha !important; }
.rich-content ol[type="A"], .artikel-detail-content ol[type="A"] { list-style-type: upper-alpha !important; }
.rich-content ol[type="i"], .artikel-detail-content ol[type="i"] { list-style-type: lower-roman !important; }
.rich-content ol[type="I"], .artikel-detail-content ol[type="I"] { list-style-type: upper-roman !important; }

/* Five-level nested numbering */
.rich-content ol ol,
.artikel-detail-content ol ol { list-style-type: lower-alpha !important; }
.rich-content ol ol ol,
.artikel-detail-content ol ol ol { list-style-type: lower-roman !important; }
.rich-content ol ol ol ol,
.artikel-detail-content ol ol ol ol { list-style-type: upper-alpha !important; }
.rich-content ol ol ol ol ol,
.artikel-detail-content ol ol ol ol ol { list-style-type: upper-roman !important; }

/* Metadata generated by final Summernote JS */
.rich-content ol[data-min7-list-level="1"], .artikel-detail-content ol[data-min7-list-level="1"] { list-style-type: decimal !important; }
.rich-content ol[data-min7-list-level="2"], .artikel-detail-content ol[data-min7-list-level="2"] { list-style-type: lower-alpha !important; }
.rich-content ol[data-min7-list-level="3"], .artikel-detail-content ol[data-min7-list-level="3"] { list-style-type: lower-roman !important; }
.rich-content ol[data-min7-list-level="4"], .artikel-detail-content ol[data-min7-list-level="4"] { list-style-type: upper-alpha !important; }
.rich-content ol[data-min7-list-level="5"], .artikel-detail-content ol[data-min7-list-level="5"] { list-style-type: upper-roman !important; }

/* Inline style fallback */
.rich-content ol[style*="lower-alpha"], .artikel-detail-content ol[style*="lower-alpha"] { list-style-type: lower-alpha !important; }
.rich-content ol[style*="upper-alpha"], .artikel-detail-content ol[style*="upper-alpha"] { list-style-type: upper-alpha !important; }
.rich-content ol[style*="lower-roman"], .artikel-detail-content ol[style*="lower-roman"] { list-style-type: lower-roman !important; }
.rich-content ol[style*="upper-roman"], .artikel-detail-content ol[style*="upper-roman"] { list-style-type: upper-roman !important; }
.rich-content ol[style*="decimal"], .artikel-detail-content ol[style*="decimal"] { list-style-type: decimal !important; }

.rich-content ul ul,
.artikel-detail-content ul ul { list-style-type: circle !important; }
.rich-content ul ul ul,
.artikel-detail-content ul ul ul { list-style-type: square !important; }


/* =========================================================
   MIN 7 TAPIN
   GAMBAR ARTIKEL / SUMMERNOTE
   PHP 8.2 + CODEIGNITER 3
   ========================================================= */


/* =========================================================
   DEFAULT IMAGE
   ---------------------------------------------------------
   - Mengikuti ukuran yang diberikan Summernote
   - Tidak dipaksa menjadi 100%
   - Tetap responsif terhadap container
   ========================================================= */

.artikel-detail-content img,
.rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}


/* =========================================================
   FLOAT LEFT
   ---------------------------------------------------------
   Contoh:

   [ GAMBAR ] Teks artikel mengalir di sebelah kanan.
   [ GAMBAR ] Teks artikel tetap mengalir.
   ========================================================= */

.artikel-detail-content img[style*="float: left"],
.artikel-detail-content img[style*="float:left"],
.rich-content img[style*="float: left"],
.rich-content img[style*="float:left"] {
    float: left;

    /*
     * Jangan gunakan width:auto !important;
     * karena dapat menimpa ukuran yang diberikan
     * oleh Summernote.
     */

    max-width: 50%;
    height: auto;

    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 0;
}


/* =========================================================
   FLOAT RIGHT
   ========================================================= */

.artikel-detail-content img[style*="float: right"],
.artikel-detail-content img[style*="float:right"],
.rich-content img[style*="float: right"],
.rich-content img[style*="float:right"] {
    float: right;

    max-width: 50%;
    height: auto;

    margin-top: 5px;
    margin-left: 20px;
    margin-bottom: 10px;
    margin-right: 0;
}


/* =========================================================
   ALIGN CENTER
   ---------------------------------------------------------
   Summernote biasanya menghasilkan:

   text-align: center
   ========================================================= */

.artikel-detail-content p[style*="text-align: center"] img,
.artikel-detail-content p[style*="text-align:center"] img,
.artikel-detail-content div[style*="text-align: center"] img,
.artikel-detail-content div[style*="text-align:center"] img,

.rich-content p[style*="text-align: center"] img,
.rich-content p[style*="text-align:center"] img,
.rich-content div[style*="text-align: center"] img,
.rich-content div[style*="text-align:center"] img {
    float: none;

    display: inline-block;

    max-width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   ALIGN LEFT
   ---------------------------------------------------------
   Berbeda dengan FLOAT LEFT.
   Ini hanya alignment gambar.
   ========================================================= */

.artikel-detail-content p[style*="text-align: left"] img,
.artikel-detail-content p[style*="text-align:left"] img,
.artikel-detail-content div[style*="text-align: left"] img,
.artikel-detail-content div[style*="text-align:left"] img,

.rich-content p[style*="text-align: left"] img,
.rich-content p[style*="text-align:left"] img,
.rich-content div[style*="text-align: left"] img,
.rich-content div[style*="text-align:left"] img {
    float: none;

    display: inline-block;

    max-width: 100%;
    height: auto;

    margin-left: 0;
    margin-right: 10px;
}


/* =========================================================
   ALIGN RIGHT
   ========================================================= */

.artikel-detail-content p[style*="text-align: right"] img,
.artikel-detail-content p[style*="text-align:right"] img,
.artikel-detail-content div[style*="text-align: right"] img,
.artikel-detail-content div[style*="text-align:right"] img,

.rich-content p[style*="text-align: right"] img,
.rich-content p[style*="text-align:right"] img,
.rich-content div[style*="text-align: right"] img,
.rich-content div[style*="text-align:right"] img {
    float: none;

    display: inline-block;

    max-width: 100%;
    height: auto;

    margin-left: 10px;
    margin-right: 0;
}


/* =========================================================
   FIGURE
   ---------------------------------------------------------
   Jangan paksa image menjadi width:100%.
   ========================================================= */

.artikel-detail-content figure,
.rich-content figure {
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.artikel-detail-content figure img,
.rich-content figure img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   CLEAR FLOAT
   ---------------------------------------------------------
   Mencegah elemen setelah gambar ikut tertarik oleh float.
   ========================================================= */

.artikel-detail-content::after,
.rich-content::after {
    content: "";
    display: table;
    clear: both;
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 767px) {

    .artikel-detail-content img,
    .rich-content img {
        max-width: 100%;
        height: auto;
    }


    /* FLOAT LEFT */

    .artikel-detail-content img[style*="float: left"],
    .artikel-detail-content img[style*="float:left"],
    .rich-content img[style*="float: left"],
    .rich-content img[style*="float:left"] {
        max-width: 45%;

        margin-right: 14px;
        margin-bottom: 8px;
    }


    /* FLOAT RIGHT */

    .artikel-detail-content img[style*="float: right"],
    .artikel-detail-content img[style*="float:right"],
    .rich-content img[style*="float: right"],
    .rich-content img[style*="float:right"] {
        max-width: 45%;

        margin-left: 14px;
        margin-bottom: 8px;
    }
}


/* =========================================================
   MOBILE KECIL
   ========================================================= */

@media (max-width: 480px) {

    .artikel-detail-content img[style*="float: left"],
    .artikel-detail-content img[style*="float:left"],
    .artikel-detail-content img[style*="float: right"],
    .artikel-detail-content img[style*="float:right"],

    .rich-content img[style*="float: left"],
    .rich-content img[style*="float:left"],
    .rich-content img[style*="float: right"],
    .rich-content img[style*="float:right"] {
        max-width: 42%;
    }
}




.rich-content iframe,
.rich-content video,
.artikel-detail-content iframe,
.artikel-detail-content video {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 360px;
    margin: 20px 0;
    border: 0;
    border-radius: 12px;
}

.rich-content video { height: auto; }

/* ---------------------------------------------------------------
   TABLE / QUOTE / HR / CODE
   --------------------------------------------------------------- */
.rich-content table,
.artikel-detail-content table {
    width: 100% !important;
    max-width: 100%;
    margin: 22px 0;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}
.rich-content th,.rich-content td,
.artikel-detail-content th,.artikel-detail-content td {
    border: 1px solid #d7e1e5;
    padding: 10px 13px;
    vertical-align: top;
}
.rich-content th,.artikel-detail-content th { font-weight: 700; text-align: left; }

.rich-content blockquote,
.artikel-detail-content blockquote {
    margin: 22px 0;
    padding: 15px 20px;
    color: #536d82;
    background: #f0f8f6;
    border-left: 4px solid #087f6b;
    border-radius: 0 10px 10px 0;
    font-style: italic;
}

.rich-content hr,
.artikel-detail-content hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid #e1e8ed;
}

.rich-content pre,
.artikel-detail-content pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 15px 18px;
    margin: 20px 0;
    background: #f1f4f6;
    border-radius: 10px;
    line-height: 1.6;
}
.rich-content code,
.artikel-detail-content code { overflow-wrap: anywhere; }

/* Summernote alignment + indentation */
.rich-content [style*="text-align: center"], .artikel-detail-content [style*="text-align: center"] { text-align: center !important; }
.rich-content [style*="text-align: right"], .artikel-detail-content [style*="text-align: right"] { text-align: right !important; }
.rich-content [style*="text-align: left"], .artikel-detail-content [style*="text-align: left"] { text-align: left !important; }
.rich-content [style*="text-align: justify"], .artikel-detail-content [style*="text-align: justify"] { text-align: justify !important; }

.rich-content [style*="text-indent"],
.artikel-detail-content [style*="text-indent"] { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------
   ADMIN SUMMERNOTE EDITOR
   --------------------------------------------------------------- */
.note-editor.note-frame {
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.note-toolbar { background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.note-editable {
    min-height: 420px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}
.note-editable p { margin: 0 0 .75rem; }
.note-editable h1,.note-editable h2,.note-editable h3,.note-editable h4,.note-editable h5,.note-editable h6 { line-height:1.3; margin-top:1rem; }
.note-editable img { max-width:100%; height:auto; }
.note-editable table { width:100%; border-collapse:collapse; }
.note-editable table td,.note-editable table th { border:1px solid #cbd5e1; padding:8px 10px; vertical-align:top; }
.note-editable ol,.note-editable ul { padding-left:2.2rem; }
.note-editable li { margin:.15rem 0; }
.note-editable ol.min7-ordered-list[data-min7-list-level="1"] { list-style-type:decimal; }
.note-editable ol.min7-ordered-list[data-min7-list-level="2"] { list-style-type:lower-alpha; }
.note-editable ol.min7-ordered-list[data-min7-list-level="3"] { list-style-type:lower-roman; }
.note-editable ol.min7-ordered-list[data-min7-list-level="4"] { list-style-type:upper-alpha; }
.note-editable ol.min7-ordered-list[data-min7-list-level="5"] { list-style-type:upper-roman; }

/* Index modal: only safe plain-text summary is rendered. */
.artikel-ringkasan-modal {
    color: #405a70;
    font-size: 15px;
    line-height: 1.75;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .rich-content,.artikel-detail-content { font-size:15px; line-height:1.8; }
    .rich-content ol,.rich-content ul,.artikel-detail-content ol,.artikel-detail-content ul { padding-left:2rem !important; }
    .rich-content iframe,.rich-content video,.artikel-detail-content iframe,.artikel-detail-content video { min-height:240px; }
    .rich-content table,.artikel-detail-content table { display:block; overflow-x:auto; white-space:nowrap; }
}