/*
 * Jonggol Custom Styling (JCS) - jcs-styles.css
 * Sangga Buwana | sanggabuwana.id
 * Version: 1.0.0
 *
 * Class-class ini digunakan di artikel blog WordPress.
 * Gunakan di Code tab WordPress saat menulis/mengedit artikel.
 *
 * INSTRUKSI GLOBAL ARTIKEL (catat untuk semua artikel):
 * - Gunakan tanda hubung biasa ( - ) sebagai pengganti em dash ( - )
 * - Semua link sumber penelitian pakai: target="_blank" rel="noopener"
 * - Tidak perlu schema markup di HTML artikel (ditangani RankMath + JSP)
 */

/* ── FEATURED SNIPPET BOX ─────────────────────────────────────────────────── */
.sb-snippet {
    background: #f3f0fa;
    border-left: 4px solid #7b5ea7;
    padding: 18px 22px;
    margin: 24px 0;
    border-radius: 0 6px 6px 0;
}

.sb-snippet p {
    margin: 0;
    font-size: 0.97em;
}

.sb-snippet > strong:first-child {
    color: #4a3f6b;
    display: block;
    margin-bottom: 8px;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── NUMBERED STEPS LIST ──────────────────────────────────────────────────── */
.sb-steps-list {
    background: #f8f7fc;
    border: 1px solid #e0d9f5;
    border-radius: 6px;
    padding: 14px 20px;
    margin: 12px 0 0;
}

.sb-steps-list ol {
    margin: 0;
    padding-left: 22px;
}

.sb-steps-list li {
    padding: 5px 0;
    font-size: 0.97em;
    line-height: 1.5;
}

/* ── BLOCKQUOTE / KUTIPAN PENELITIAN ─────────────────────────────────────── */
.sb-quote {
    border-left: 4px solid #c9a84c;
    background: #fffdf5;
    padding: 14px 20px;
    margin: 20px 0;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #444;
}

.sb-quote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 0.85em;
    color: #888;
}

.sb-quote a {
    color: #c9a84c;
    text-decoration: none;
}

.sb-quote a:hover {
    text-decoration: underline;
}

/* ── CTA CALLOUT BOX ──────────────────────────────────────────────────────── */
.sb-callout {
    background: #1a1a2e;
    color: #fff;
    padding: 22px 26px;
    border-radius: 8px;
    margin: 32px 0;
}

.sb-callout p {
    margin: 0 0 12px;
    color: #e0d9f5;
    line-height: 1.6;
}

.sb-callout p:last-of-type {
    margin-bottom: 0;
}

.sb-callout a {
    display: inline-block;
    background: #c9a84c;
    color: #1a1a2e !important;
    padding: 10px 24px;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.95em;
    margin-top: 10px;
    transition: background 0.2s ease;
}

.sb-callout a:hover {
    background: #e0c060;
}

/* ── AUTHOR BOX ───────────────────────────────────────────────────────────── */
.sb-author-box {
    border-top: 2px solid #e0d9f5;
    padding-top: 20px;
    margin-top: 40px;
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
}

.sb-author-box p:first-child {
    margin-top: 0;
}

.sb-author-box strong {
    color: #1a1a2e;
    display: block;
    margin-bottom: 6px;
    font-size: 1.05em;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sb-snippet,
    .sb-quote,
    .sb-callout {
        padding: 14px 16px;
    }

    .sb-callout a {
        display: block;
        text-align: center;
    }
}