/* ===== Base ===== */
.artikel-konten {
    font-size: 15px !important;
}

/* ===== Headings ===== */
.artikel-konten h1 {
    font-size: 1.75em !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 1em 0 0.5em !important;
}

.artikel-konten h2 {
    font-size: 1.4em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 1em 0 0.4em !important;
}

.artikel-konten h3 {
    font-size: 1.15em !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0.8em 0 0.3em !important;
}

.artikel-konten h4 {
    font-size: 1.05em !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0.75em 0 0.3em !important;
}

/* ===== Block elements ===== */
.artikel-konten p {
    line-height: 1.5 !important;
    margin-bottom: 1.25em !important;
}

.artikel-konten blockquote {
    border-left: 4px solid #059669 !important;
    padding-left: 1em !important;
    color: #475569 !important;
    font-style: italic !important;
    margin: 1em 0 !important;
}

.artikel-konten hr {
    border: none !important;
    border-top: 2px solid #e2e8f0 !important;
    margin: 1.5em 0 !important;
}

/* ===== Lists ===== */
.artikel-konten ul {
    list-style-type: disc !important;
    padding-left: 1.5em !important;
    margin: 0.5em 0 !important;
}

.artikel-konten ol {
    list-style-type: decimal !important;
    padding-left: 1.5em !important;
    margin: 0.5em 0 !important;
}

.artikel-konten li {
    margin: 0.25em 0 !important;
}

/* ===== Inline formatting ===== */
.artikel-konten strong,
.artikel-konten b {
    font-weight: 700 !important;
}

.artikel-konten em,
.artikel-konten i {
    font-style: italic !important;
}

.artikel-konten u {
    text-decoration: underline !important;
}

.artikel-konten s {
    text-decoration: line-through !important;
}

.artikel-konten sub {
    vertical-align: sub !important;
    font-size: 0.75em !important;
}

.artikel-konten sup {
    vertical-align: super !important;
    font-size: 0.75em !important;
}

.artikel-konten a {
    color: #093cbe !important;
    text-decoration: underline !important;
}

.artikel-konten code:not(pre > code) {
    font-family: monospace !important;
    background: #f1f5f9 !important;
    padding: 0.15em 0.4em !important;
    border-radius: 4px !important;
    font-size: 0.875em !important;
}

/* ===== Media ===== */
.artikel-konten img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 0.5em 0 !important;
}

/* ===== Font family ===== */
.artikel-konten .ql-font-arial {
    font-family: Arial, sans-serif !important;
}

.artikel-konten .ql-font-georgia {
    font-family: Georgia, serif !important;
}

.artikel-konten .ql-font-verdana {
    font-family: Verdana, sans-serif !important;
}

.artikel-konten .ql-font-trebuchet {
    font-family: 'Trebuchet MS', sans-serif !important;
}

.artikel-konten .ql-font-serif {
    font-family: serif !important;
}

.artikel-konten .ql-font-monospace {
    font-family: monospace !important;
}

/* ===== Text alignment ===== */
.artikel-konten .ql-align-center {
    text-align: center !important;
}

.artikel-konten .ql-align-right {
    text-align: right !important;
}

.artikel-konten .ql-align-justify {
    text-align: justify !important;
}

/* ===== Indentation ===== */
.artikel-konten .ql-indent-1 {
    padding-left: 3em !important;
}

.artikel-konten .ql-indent-2 {
    padding-left: 6em !important;
}

.artikel-konten .ql-indent-3 {
    padding-left: 9em !important;
}

.artikel-konten .ql-indent-4 {
    padding-left: 12em !important;
}

.artikel-konten .ql-indent-5 {
    padding-left: 15em !important;
}

.artikel-konten .ql-indent-6 {
    padding-left: 18em !important;
}

.artikel-konten .ql-indent-7 {
    padding-left: 21em !important;
}

.artikel-konten .ql-indent-8 {
    padding-left: 24em !important;
}

/* ===== Direction RTL ===== */
.artikel-konten .ql-direction-rtl {
    direction: rtl !important;
    text-align: inherit !important;
}

/* ===== Checklist ===== */
.artikel-konten li[data-list] {
    list-style-type: none !important;
}

.artikel-konten li[data-list]>.ql-ui {
    margin-right: 0.5em !important;
}

.artikel-konten li[data-list="checked"]>.ql-ui::before {
    content: '☑' !important;
}

.artikel-konten li[data-list="unchecked"]>.ql-ui::before {
    content: '☐' !important;
}

/* ===== Code block ===== */
.artikel-konten pre.ql-syntax {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    padding: 0.5em 1em !important;
    border-radius: 4px !important;
    font-family: monospace !important;
    /* font-size: 0.875em !important; */
    overflow-x: auto !important;
    margin: 1em 0 !important;
    white-space: pre !important;
}

/* ===== Video iframe ===== */
.artikel-konten .ql-video {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px !important;
    border: none !important;
    margin: 1em 0 !important;
}

/* ===== Table (via ql-table-wrapper BlockEmbed) ===== */
.artikel-konten .ql-table-wrapper {
    overflow: hidden !important;
    overflow-x: auto !important;
    margin: 1em 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

.artikel-konten .ql-table-wrapper table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.artikel-konten .ql-table-wrapper th,
.artikel-konten .ql-table-wrapper td {
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    padding: 12px 16px !important;
    vertical-align: top !important;
    color: #475569 !important;
}

.artikel-konten .ql-table-wrapper th {
    border-bottom: 1px solid #fff !important;
    border-right: 1px solid #fff !important;
}

.artikel-konten .ql-table-wrapper th:last-child,
.artikel-konten .ql-table-wrapper td:last-child {
    border-right: none !important;
}

.artikel-konten .ql-table-wrapper th {
    background: #e2e8f0 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
    color: #475569 !important;
}

.artikel-konten .ql-table-wrapper tbody tr:last-child td {
    border-bottom: none !important;
}

/* ===== Table — dark mode (data-theme=dark) ===== */
[data-theme=dark] .artikel-konten .ql-table-wrapper {
    border-color: #334155 !important;
}

[data-theme=dark] .artikel-konten .ql-table-wrapper th,
[data-theme=dark] .artikel-konten .ql-table-wrapper td {
    border-bottom-color: #334155 !important;
    border-right-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme=dark] .artikel-konten .ql-table-wrapper th {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

[data-theme=dark] .artikel-konten .ql-table-wrapper tbody td {
    background: transparent !important;
}