/* ==================================================
   RCODE ARTICLE CSS
   ==================================================

   Layout dan komponen artikel.

   WARNA DIATUR OLEH:
   themes/default.css
   themes/dark.css

   ================================================== */


/* ==================================================
   ARTICLE DETAIL ROOT
   ================================================== */

.rcode-detail {

    color:
        var(--text);
}


/* ==================================================
   ARTICLE MAIN
   ================================================== */

.rcode-article-main {

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        22px;

    background:
        var(--bg-card);

    box-shadow:
        var(--shadow-md);
}


/* ==================================================
   ARTICLE HEADER
   ================================================== */

.rcode-article-header {

    padding:
        30px 32px 24px;

    border-bottom:
        1px solid var(--border-light);
}


/* ==================================================
   CATEGORY
   ================================================== */

.rcode-category {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-bottom:
        13px;

    padding:
        7px 11px;

    border:
        1px solid var(--border-primary);

    border-radius:
        999px;

    background:
        var(--soft-primary);

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .5px;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.rcode-category:hover {

    background:
        var(--soft-primary-hover);

    color:
        var(--primary-dark);
}


/* ==================================================
   ARTICLE TITLE
   ================================================== */

.rcode-article-title {

    margin:
        0 0 15px;

    color:
        var(--text-dark);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.35rem
        );

    line-height:
        1.16;

    font-weight:
        800;

    letter-spacing:
        -.8px;
}


/* ==================================================
   ARTICLE META
   ================================================== */

.rcode-article-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        8px 16px;

    color:
        var(--text-faint);

    font-size:
        12px;
}


.rcode-article-meta span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;
}


.rcode-article-meta i {

    color:
        var(--primary);
}


/* ==================================================
   FEATURED IMAGE
   ================================================== */

.rcode-featured {

    padding:
        22px 32px 0;
}


.rcode-featured-frame {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        17px;

    background:
        var(--soft-bg);

    border:
        1px solid var(--border);
}


.rcode-featured-frame img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    max-height:
        520px;

    object-fit:
        cover;

    cursor:
        zoom-in;

    transition:
        transform .35s ease,
        opacity .2s ease;
}


.rcode-featured-frame:hover img {

    transform:
        scale(1.01);

    opacity:
        .97;
}


/* ==================================================
   NATIVE ADS
   ================================================== */

.rcode-native-ad {

    padding:
        0 16px;
}


/* ==================================================
   ARTICLE BODY
   ================================================== */

.rcode-article-body {

    padding:
        28px 32px 10px;
}


.article-content {

    color:
        var(--article-text);

    font-size:
        16px;

    line-height:
        1.85;
}


.article-content p {

    clear:
        none !important;

    margin:
        0 0 1.15rem;
}


.article-content h2 {

    margin:
        2.2rem 0 1rem;

    color:
        var(--article-heading);

    font-size:
        1.55rem;

    line-height:
        1.3;

    font-weight:
        800;
}


.article-content h3 {

    margin:
        1.8rem 0 .85rem;

    color:
        var(--article-heading);

    font-size:
        1.25rem;

    line-height:
        1.35;

    font-weight:
        800;
}


.article-content h4 {

    margin:
        1.5rem 0 .7rem;

    color:
        var(--article-heading);

    font-size:
        1.1rem;

    font-weight:
        700;
}


.article-content ul,
.article-content ol {

    margin:
        0 0 1.2rem;

    padding-left:
        1.5rem;
}


.article-content li {

    margin-bottom:
        .45rem;
}


.article-content blockquote {

    margin:
        1.5rem 0;

    padding:
        15px 18px;

    border-left:
        4px solid var(--article-blockquote-border);

    border-radius:
        0 10px 10px 0;

    background:
        var(--article-blockquote-bg);

    color:
        var(--article-blockquote-text);
}


.article-content a {

    color:
        var(--primary);

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        2px;
}


.article-content img {

    display:
        block;

    max-width:
        100% !important;

    height:
        auto !important;

    margin:
        18px auto;

    border-radius:
        10px;

    cursor:
        zoom-in;

    transition:
        opacity .2s ease;
}


.article-content img:hover {

    opacity:
        .92;
}


/* ==================================================
   FLOAT IMAGE FIX
   ================================================== */

.article-content figure:has(.note-float-left),
.article-content figure:has(img[style*="float: left"]),
.article-content figure:has(img[style*="float:left"]),
.article-content figure.float-start {

    float:
        left !important;

    max-width:
        50% !important;

    margin:
        5px 20px 15px 0 !important;

    display:
        block !important;

    clear:
        none !important;
}


.article-content figure:has(.note-float-right),
.article-content figure:has(img[style*="float: right"]),
.article-content figure:has(img[style*="float:right"]),
.article-content figure.float-end {

    float:
        right !important;

    max-width:
        50% !important;

    margin:
        5px 0 15px 20px !important;

    display:
        block !important;

    clear:
        none !important;
}


.article-content figure img {

    float:
        none !important;

    width:
        100% !important;

    height:
        auto !important;

    display:
        block !important;

    margin:
        0 auto !important;
}


.article-content figcaption {

    display:
        block !important;

    clear:
        both !important;

    width:
        100% !important;

    padding-top:
        7px;

    margin:
        0;

    color:
        var(--text-faint);

    font-size:
        12px;

    line-height:
        1.5;

    text-align:
        center !important;
}


.article-content img.note-float-left,
.article-content img[style*="float: left"],
.article-content img[style*="float:left"] {

    float:
        left !important;

    max-width:
        50% !important;

    margin:
        5px 20px 15px 0 !important;
}


.article-content img.note-float-right,
.article-content img[style*="float: right"],
.article-content img[style*="float:right"] {

    float:
        right !important;

    max-width:
        50% !important;

    margin:
        5px 0 15px 20px !important;
}


.article-content::after {

    content:
        "";

    display:
        table;

    clear:
        both;
}


/* ==================================================
   CODE BLOCK
   ================================================== */

.rcode-block {

    margin:
        25px 0;

    overflow:
        hidden;

    border:
        1px solid var(--code-box-border);

    border-radius:
        12px;

    background:
        var(--code-box-bg);

    box-shadow:
        var(--shadow-sm);
}


.rcode-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        10px 15px;

    border-bottom:
        1px solid var(--code-box-border);

    background:
        var(--code-box-pre-bg);

    color:
        var(--cyan);

    font-size:
        13px;

    font-weight:
        700;
}


.rcode-copy {

    padding:
        5px 11px;

    border:
        1px solid var(--code-box-border);

    border-radius:
        6px;

    background:
        var(--code-box-pre-bg);

    color:
        var(--code-box-text);

    font-size:
        11px;

    cursor:
        pointer;

    transition:
        var(--transition);
}


.rcode-copy:hover {

    background:
        var(--border);

    color:
        var(--text-dark);
}


.rcode-body {

    padding:
        15px;
}


.rcode-body pre {

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        auto;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


.rcode-body code {

    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size:
        14px;

    color:
        var(--code-box-text);

    text-shadow:
        none !important;
}


/* ==================================================
   ARTICLE TAGS
   ================================================== */

.rcode-article-tags {

    margin:
        28px 0 0;

    padding:
        20px 0;

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);
}


.rcode-tags-title {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin:
        0 0 11px;

    color:
        var(--text-dark);

    font-size:
        14px;

    font-weight:
        800;
}


.rcode-tags-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.rcode-tag {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        6px 10px;

    border:
        1px solid var(--tag-border);

    border-radius:
        999px;

    background:
        var(--tag-bg);

    color:
        var(--tag-text);

    font-size:
        10px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        var(--transition);
}


.rcode-tag:hover {

    border-color:
        var(--tag-hover-border);

    background:
        var(--tag-hover-bg);

    color:
        var(--tag-hover-text);
}


/* ==================================================
   SHARE
   ================================================== */

.rcode-share {

    margin:
        0 32px;

    padding:
        22px 0;

    border-bottom:
        1px solid var(--border);
}


.rcode-share-title {

    margin:
        0 0 13px;

    color:
        var(--text-dark);

    font-size:
        15px;

    font-weight:
        800;
}


.rcode-share-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.rcode-share-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        8px 13px;

    border-radius:
        9px;

    color:
        var(--text-white);

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        var(--transition);
}


.rcode-share-button:hover {

    color:
        var(--text-white);

    transform:
        translateY(-2px);

    opacity:
        .9;
}


.rcode-share-facebook {

    background:
        var(--blue);
}


.rcode-share-x {

    background:
        var(--text-dark);

    color:
        var(--bg-card);
}


.rcode-share-x:hover {

    color:
        var(--bg-card);
}


.rcode-share-whatsapp {

    background:
        var(--success);
}


/* ==================================================
   RELATED ARTICLES
   ================================================== */

.rcode-related {

    padding:
        25px 32px 32px;
}


.rcode-section-title {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 16px;

    color:
        var(--text-dark);

    font-size:
        17px;

    font-weight:
        800;
}


.rcode-related-card {

    height:
        100%;

    padding:
        15px;

    border:
        1px solid var(--related-border);

    border-radius:
        13px;

    background:
        var(--related-bg);

    transition:
        var(--transition);
}


.rcode-related-card:hover {

    border-color:
        var(--border-primary);

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-sm);
}


.rcode-related-category {

    margin-bottom:
        7px;

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.rcode-related-title {

    margin:
        0 0 7px;

    font-size:
        14px;

    line-height:
        1.45;

    font-weight:
        750;
}


.rcode-related-title a {

    color:
        var(--related-text);

    text-decoration:
        none;
}


.rcode-related-title a:hover {

    color:
        var(--related-hover);
}


.rcode-related-description {

    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.6;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;
}


/* ==================================================
   LIGHTBOX
   ================================================== */

#imageLightboxModal {

    display:
        none;

    position:
        fixed;

    z-index:
        99999;

    inset:
        0;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        var(--code-box-bg);
}


#imageLightboxModal img {

    max-width:
        92%;

    max-height:
        90vh;

    border-radius:
        10px;

    object-fit:
        contain;

    box-shadow:
        var(--shadow-lg);

    animation:
        zoomIn .25s ease;
}


#lightboxCloseBtn {

    position:
        absolute;

    top:
        18px;

    right:
        25px;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(--text-white);

    font-size:
        40px;

    font-weight:
        700;

    cursor:
        pointer;
}


#lightboxCloseBtn:hover {

    color:
        var(--text-soft);
}


@keyframes zoomIn {

    from {

        transform:
            scale(.92);

        opacity:
            0;
    }

    to {

        transform:
            scale(1);

        opacity:
            1;
    }

}


/* ==================================================
   ARTICLE LIST PAGE
   ================================================== */

.rcode-article-page {

    color:
        var(--text);
}


/* ==================================================
   PAGE HEADER
   ================================================== */

.rcode-article-page .rcode-article-header {

    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        24px;

    padding:
        30px 32px;

    border:
        1px solid var(--border-primary);

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            var(--soft-primary) 0%,
            var(--soft-bg) 55%,
            var(--soft-blue) 100%
        );

    box-shadow:
        var(--shadow-sm);
}


.rcode-article-page .rcode-article-header::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -70px;

    top:
        -90px;

    border-radius:
        50%;

    background:
        var(--hero-overlay);
}


.rcode-article-header-content {

    position:
        relative;

    z-index:
        2;
}


/* ==================================================
   PAGE LABEL
   ================================================== */

.rcode-page-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        9px;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;
}


.rcode-page-title {

    margin:
        0 0 8px;

    color:
        var(--text-dark);

    font-size:
        clamp(
            1.6rem,
            3vw,
            2.25rem
        );

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -.7px;
}


.rcode-page-description {

    max-width:
        800px;

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.7;
}


/* ==================================================
   SEARCH RESULT
   ================================================== */

.rcode-search-result {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        16px;

    padding:
        7px 12px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        var(--bg-card);

    color:
        var(--text-secondary);

    font-size:
        12px;
}


.rcode-search-result strong {

    color:
        var(--text-dark);
}


mark {

    padding:
        1px 3px;

    border-radius:
        3px;

    background:
        var(--warning);

    color:
        var(--text-dark);
}


/* ==================================================
   ARTICLE LIST CARD
   ================================================== */

.rcode-list-card {

    margin-bottom:
        16px;

    padding:
        15px;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    background:
        var(--bg-card);

    transition:
        var(--transition);
}


.rcode-list-card:hover {

    border-color:
        var(--border-primary);

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-md);
}


/* ==================================================
   LIST THUMBNAIL
   ================================================== */

.rcode-list-thumb {

    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        175px;

    overflow:
        hidden;

    border-radius:
        13px;

    background:
        var(--soft-bg);

    text-decoration:
        none;
}


.rcode-list-thumb img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .35s ease;
}


.rcode-list-card:hover
.rcode-list-thumb img {

    transform:
        scale(1.04);
}


.rcode-thumb-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    color:
        var(--text-faint);

    background:
        linear-gradient(
            135deg,
            var(--soft-bg),
            var(--border)
        );

    font-size:
        30px;
}


/* ==================================================
   LIST CONTENT
   ================================================== */

.rcode-list-content {

    padding:
        3px 5px 3px 4px;
}


.rcode-list-category {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin-bottom:
        8px;

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .45px;

    text-transform:
        uppercase;

    text-decoration:
        none;
}


.rcode-list-category:hover {

    color:
        var(--primary-dark);
}


.rcode-list-title {

    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        0 0 8px;

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1.4;

    letter-spacing:
        -.2px;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}


.rcode-list-title a {

    color:
        var(--text-dark);

    text-decoration:
        none;
}


.rcode-list-title a:hover {

    color:
        var(--primary);
}


.rcode-list-excerpt {

    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        0 0 13px;

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.65;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;
}


/* ==================================================
   LIST META
   ================================================== */

.rcode-list-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--text-faint);

    font-size:
        11px;
}


.rcode-list-meta span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;
}


.rcode-list-meta i {

    color:
        var(--primary);
}


/* ==================================================
   SIDEBAR WRAPPER
   ================================================== */

.rcode-sidebar {

    position:
        sticky;

    top:
        20px;
}


.rcode-sidebar > * {

    margin-bottom:
        18px;
}


/* ==================================================
   EMPTY STATE
   ================================================== */

.rcode-empty {

    padding:
        55px 25px;

    border:
        1px dashed var(--empty-border);

    border-radius:
        18px;

    background:
        var(--empty-bg);

    color:
        var(--empty-text);

    text-align:
        center;
}


.rcode-empty-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        64px;

    height:
        64px;

    margin:
        0 auto 18px;

    border-radius:
        18px;

    background:
        var(--soft-bg);

    color:
        var(--empty-icon);

    font-size:
        25px;
}


.rcode-empty h2 {

    margin:
        0 0 8px;

    color:
        var(--empty-title);

    font-size:
        20px;

    font-weight:
        800;
}


.rcode-empty p {

    max-width:
        420px;

    margin:
        0 auto 20px;

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.7;
}


.rcode-empty-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        10px 18px;

    border-radius:
        10px;

    background:
        var(--button-primary-bg);

    color:
        var(--button-primary-text);

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none;
}


.rcode-empty-button:hover {

    color:
        var(--button-primary-hover-text);

    background:
        var(--button-primary-hover-bg);
}


/* ==================================================
   PAGINATION
   ================================================== */

.rcode-pagination {

    display:
        flex;

    justify-content:
        center;

    margin:
        28px 0 10px;
}


.rcode-pagination .pagination {

    margin:
        0;

    gap:
        5px;
}


.rcode-pagination .page-link {

    min-width:
        38px;

    height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--pagination-border);

    border-radius:
        9px !important;

    color:
        var(--pagination-text);

    background:
        var(--pagination-bg);

    font-size:
        12px;

    font-weight:
        600;
}


.rcode-pagination .page-link:hover {

    border-color:
        var(--pagination-active-border);

    color:
        var(--pagination-hover-text);

    background:
        var(--pagination-hover-bg);
}


.rcode-pagination .active .page-link {

    border-color:
        var(--pagination-active-border);

    background:
        var(--pagination-active-bg);

    color:
        var(--pagination-active-text);
}


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

@media (max-width: 991.98px) {

    .rcode-sidebar {

        position:
            static;

        margin-top:
            10px;
    }


    .rcode-list-thumb {

        height:
            190px;
    }

}


@media (max-width: 767.98px) {

    .rcode-article-main {

        border-radius:
            17px;
    }


    .rcode-article-header {

        padding:
            22px 18px 20px;
    }


    .rcode-article-title {

        font-size:
            1.65rem;

        letter-spacing:
            -.5px;
    }


    .rcode-article-meta {

        gap:
            7px 12px;

        font-size:
            10px;
    }


    .rcode-featured {

        padding:
            16px 18px 0;
    }


    .rcode-featured-frame {

        border-radius:
            13px;
    }


    .rcode-featured-frame img {

        max-height:
            none;

        aspect-ratio:
            16 / 9;

        object-fit:
            cover;
    }


    .rcode-article-body {

        padding:
            22px 18px 8px;
    }


    .article-content {

        font-size:
            15px;

        line-height:
            1.8;
    }


    .article-content h2 {

        font-size:
            1.35rem;
    }


    .article-content h3 {

        font-size:
            1.15rem;
    }


    .article-content figure:has(.note-float-left),
    .article-content figure:has(.note-float-right),
    .article-content figure.float-start,
    .article-content figure.float-end {

        float:
            none !important;

        max-width:
            100% !important;

        margin:
            18px 0 !important;
    }


    .article-content img.note-float-left,
    .article-content img.note-float-right,
    .article-content img[style*="float: left"],
    .article-content img[style*="float:left"],
    .article-content img[style*="float: right"],
    .article-content img[style*="float:right"] {

        float:
            none !important;

        max-width:
            100% !important;

        margin:
            18px auto !important;
    }


    .rcode-article-tags {

        margin-top:
            22px;

        padding:
            18px 0;
    }


    .rcode-share {

        margin:
            0 18px;

        padding:
            20px 0;
    }


    .rcode-share-button {

        flex:
            1 1 auto;

        justify-content:
            center;
    }


    .rcode-related {

        padding:
            22px 18px 25px;
    }

}