/* ==================================================
   RCODE GLOBAL SITE CSS
   ================================================== */


/* ==================================================
   GLOBAL
   ================================================== */

html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;

    background:
        var(--bg-main);

    color:
        var(--text-dark);

    font-family:
        'Inter',
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}

img {
    max-width: 100%;
}

a {
    transition:
        var(--transition);
}


/* ==================================================
   MAIN CONTENT
   ================================================== */

.content {
    margin-left:
        292px;

    min-height:
        100vh;

    padding:
        24px
        32px
        50px
        20px;
}


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

.sidebar {
    position:
        fixed;

    left:
        16px;

    top:
        16px;

    bottom:
        16px;

    width:
        260px;

    height:
        auto;

    padding:
        24px 16px;

    overflow-y:
        auto;

    background:
        linear-gradient(
            160deg,
            var(--sidebar-bg-start) 0%,
            var(--sidebar-bg-end) 100%
        );

    color:
        var(--sidebar-text);

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

    border-radius:
        20px;

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

    z-index:
        1000;
}

.sidebar::-webkit-scrollbar {
    width:
        5px;
}

.sidebar::-webkit-scrollbar-track {
    background:
        transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background:
        var(--sidebar-scrollbar);

    border-radius:
        99px;
}


/* ==================================================
   SIDEBAR BRAND
   ================================================== */

.sidebar .brand {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        4px 10px 20px;

    color:
        var(--sidebar-brand-text);

    font-size:
        22px;

    font-weight:
        800;

    letter-spacing:
        -.5px;
}

.sidebar .brand i {
    color:
        var(--sidebar-brand-icon);
}

.sidebar hr {
    margin:
        4px 8px 16px;

    border:
        0;

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

    opacity:
        1;
}


/* ==================================================
   SIDEBAR LINK
   ================================================== */

.sidebar a {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        11px 13px;

    margin:
        3px 0;

    border-radius:
        10px;

    color:
        var(--sidebar-text);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        500;

    transition:
        var(--transition);
}

.sidebar a i {
    width:
        20px;

    text-align:
        center;

    font-size:
        15px;
}

.sidebar a:hover,
.sidebar a[aria-expanded="true"] {
    color:
        var(--sidebar-text-hover);

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

.sidebar a.text-danger {
    color:
        var(--sidebar-danger-text);
}

.sidebar a.text-danger:hover {
    color:
        var(--sidebar-danger-hover-text) !important;

    background:
        var(--sidebar-danger-bg);
}


/* ==================================================
   SIDEBAR SUBMENU
   ================================================== */

.submenu {
    margin:
        5px 0 8px 23px;

    padding-left:
        8px;

    border-left:
        1px solid var(--sidebar-submenu-border);
}

.submenu a {
    padding:
        8px 10px;

    font-size:
        13px;
}


/* ==================================================
   CUSTOM TOPBAR
   ================================================== */

.custom-topbar {
    position:
        sticky;

    top:
        12px;

    z-index:
        990;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        58px;

    margin-bottom:
        22px;

    padding:
        10px 16px;

    background:
        var(--topbar-bg);

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

    border-radius:
        14px;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

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


/* ==================================================
   TOPBAR LEFT
   ================================================== */

.topbar-left {
    display:
        flex;

    align-items:
        center;

    gap:
        4px;
}

.topbar-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-right:
        14px;

    padding:
        8px 10px;

    color:
        var(--text-dark);

    text-decoration:
        none;

    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        -.5px;
}

.topbar-brand:hover {
    color:
        var(--primary);
}

.topbar-brand i,
.topbar-mobile-brand i {
    color:
        var(--primary);
}


/* ==================================================
   TOPBAR LINK
   ================================================== */

.topbar-link {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 12px;

    color:
        var(--text-muted);

    text-decoration:
        none;

    border-radius:
        10px;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        var(--transition);

    white-space:
        nowrap;
}

.topbar-link i:first-child {
    width:
        17px;

    text-align:
        center;
}

.topbar-link:hover {
    color:
        var(--primary);

    background:
        var(--primary-light);
}

.topbar-chevron {
    width:
        auto !important;

    margin-left:
        2px;

    font-size:
        10px;
}


/* ==================================================
   TOPBAR DROPDOWN
   ================================================== */

.topbar-menu {
    min-width:
        190px;

    margin-top:
        8px !important;

    padding:
        7px;

    background:
        var(--dropdown-bg);

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

    border-radius:
        12px;

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

.topbar-menu .dropdown-item {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        9px 10px;

    color:
        var(--dropdown-text);

    border-radius:
        8px;

    font-size:
        13px;
}

.topbar-menu .dropdown-item:hover {
    color:
        var(--dropdown-hover-text);

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

.topbar-menu .dropdown-item i {
    width:
        16px;

    text-align:
        center;
}


/* ==================================================
   TOPBAR RIGHT
   ================================================== */

.topbar-right {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}

.topbar-right .btn {
    font-size:
        13px;

    border-radius:
        9px !important;
}

.topbar-divider {
    width:
        1px;

    height:
        25px;

    margin:
        0 5px;

    background:
        var(--topbar-divider);
}


/* ==================================================
   MOBILE TOPBAR BRAND
   ================================================== */

.topbar-brand-mobile,
.topbar-mobile-brand {
    display:
        none;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--text-dark);

    text-decoration:
        none;

    font-size:
        19px;

    font-weight:
        800;
}


/* ==================================================
   HERO KOMPATIBILITAS
   ================================================== */

body .content .hero {
    padding:
        42px !important;

    border:
        0 !important;

    border-radius:
        var(--radius-xl) !important;

    color:
        var(--hero-text) !important;

    background:
        linear-gradient(
            135deg,
            var(--hero-bg-start) 0%,
            var(--hero-bg-middle) 48%,
            var(--hero-bg-end) 100%
        ) !important;

    box-shadow:
        var(--shadow-lg) !important;
}

body .content .hero h1 {
    font-size:
        clamp(
            30px,
            4vw,
            44px
        ) !important;

    font-weight:
        800 !important;

    line-height:
        1.1 !important;

    letter-spacing:
        -1.5px !important;
}

body .content .hero p {
    color:
        var(--hero-text-muted) !important;

    font-size:
        15px !important;

    line-height:
        1.7 !important;
}


/* ==================================================
   CODE BOX
   ================================================== */

body .content .code-box {
    overflow:
        hidden;

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

    border-radius:
        var(--radius-lg) !important;

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

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

body .content .code-box pre {
    margin:
        0;

    padding:
        20px !important;

    overflow:
        auto;

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

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

    border-radius:
        var(--radius-md) !important;
}


/* ==================================================
   CARD SYSTEM
   ================================================== */

.card-tech {
    padding:
        26px;

    background:
        var(--card-bg);

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

    border-radius:
        var(--radius-lg);

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

    transition:
        var(--transition);
}

.card-tech:hover {
    transform:
        translateY(-2px);

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

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

.card-tech h2 {
    color:
        var(--text-dark);

    font-size:
        21px;

    font-weight:
        750;
}

.card-tech p {
    color:
        var(--text-muted);

    line-height:
        1.75;
}


/* ==================================================
   ARTICLE CARDS
   ================================================== */

.article-card-title {
    margin:
        12px 0;

    font-size:
        19px;

    font-weight:
        700;

    line-height:
        1.4;
}

.article-card-title a {
    color:
        var(--text-dark);

    text-decoration:
        none;

    transition:
        var(--transition);
}

.article-card-title a:hover {
    color:
        var(--primary);
}

.article-excerpt {
    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.65;
}

.article-thumb {
    overflow:
        hidden;

    border-radius:
        var(--radius-md);
}

.article-thumb img {
    display:
        block;

    width:
        100%;

    height:
        190px;

    object-fit:
        cover;

    transition:
        var(--transition);
}

.card-tech:hover .article-thumb img {
    transform:
        scale(1.025);
}


/* ==================================================
   ARTICLE CONTENT
   ================================================== */

.article-title {
    color:
        var(--text-dark);

    font-size:
        36px;

    font-weight:
        800;

    line-height:
        1.25;
}

.article-content {
    color:
        var(--article-text);

    font-size:
        16px;

    line-height:
        1.85;
}

.article-content h2,
.article-content h3 {
    margin-top:
        2rem;

    margin-bottom:
        1rem;

    color:
        var(--text-dark);

    font-weight:
        750;
}

.article-content pre {
    padding:
        20px;

    overflow:
        auto;

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

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

    border-radius:
        var(--radius-md);

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

.article-content code {
    padding:
        3px 6px;

    color:
        var(--article-inline-code-text);

    background:
        var(--article-inline-code-bg);

    border-radius:
        6px;

    font-size:
        .9em;
}

.article-content blockquote {
    padding:
        16px 20px;

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

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

    border-left:
        4px solid var(--primary);

    border-radius:
        0 var(--radius-md) var(--radius-md) 0;

    font-style:
        italic;
}


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

.pagination {
    justify-content:
        center;

    gap:
        6px;

    margin-top:
        2rem;
}

.pagination li a,
.pagination li span {
    padding:
        9px 14px;

    color:
        var(--pagination-text);

    background:
        var(--pagination-bg);

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

    border-radius:
        var(--radius-md) !important;

    text-decoration:
        none;

    transition:
        var(--transition);
}

.pagination li a:hover {
    color:
        var(--primary);

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

.pagination .active span {
    color:
        var(--pagination-active-text);

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

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


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

.category-item {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        11px 0;

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

.category-item a {
    color:
        var(--category-text);

    text-decoration:
        none;

    font-weight:
        500;

    transition:
        var(--transition);
}

.category-item a:hover {
    color:
        var(--category-hover-text);

    transform:
        translateX(3px);
}

.category-count {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        32px;

    height:
        24px;

    color:
        var(--category-count-text);

    background:
        var(--category-count-bg);

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        700;
}


/* ==================================================
   STICKY FOOTER AD
   ================================================== */

.sticky-footer-ad {
    position:
        fixed;

    left:
        0;

    bottom:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        60px;

    padding:
        5px 0;

    background:
        var(--sticky-ad-bg);

    box-shadow:
        var(--sticky-ad-shadow);
}

.sticky-footer-ad .close-btn {
    position:
        absolute;

    top:
        -10px;

    right:
        10px;

    width:
        22px;

    height:
        22px;

    padding:
        0;

    color:
        var(--sticky-ad-close-text);

    background:
        var(--sticky-ad-close-bg);

    border:
        0;

    border-radius:
        50%;

    font-size:
        13px;

    line-height:
        22px;

    cursor:
        pointer;
}

.sticky-footer-ad .ad-pc,
.sticky-footer-ad .ad-mobile {
    text-align:
        center;
}

.sticky-footer-ad .ad-pc {
    display:
        none;

    width:
        468px;

    height:
        60px;
}

.sticky-footer-ad .ad-mobile {
    display:
        block;

    width:
        320px;

    height:
        50px;
}


/* ==================================================
   RCODE BODY CODE
   ================================================== */

.rcode-body pre {
    margin:
        0;

    padding:
        15px;

    overflow:
        auto;

    font-size:
        14px;

    line-height:
        1.6;
}

.rcode-body code {
    font-family:
        Consolas,
        "Courier New",
        monospace;
}


/* ==================================================
   GENERIC FORM / INPUT
   ================================================== */

.form-control,
.form-select {
    color:
        var(--input-text);

    background:
        var(--input-bg);

    border-color:
        var(--input-border);
}

.form-control:focus,
.form-select:focus {
    color:
        var(--input-text);

    background:
        var(--input-bg);

    border-color:
        var(--input-focus-border);

    box-shadow:
        0 0 0 .2rem var(--input-focus-shadow);
}

.form-control::placeholder {
    color:
        var(--input-placeholder);
}


/* ==================================================
   DESKTOP
   ================================================== */

@media (min-width: 993px) {

    .topbar-brand-mobile,
    .topbar-mobile-brand {
        display:
            none !important;
    }

    .sticky-footer-ad .ad-pc {
        display:
            block;
    }

    .sticky-footer-ad .ad-mobile {
        display:
            none;
    }

}


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

@media (max-width: 992px) {

    .sidebar {
        position:
            relative;

        left:
            auto;

        top:
            auto;

        bottom:
            auto;

        width:
            100%;

        min-height:
            auto;

        margin:
            10px 0;

        border-radius:
            16px;
    }

    .content {
        margin-left:
            0;

        padding:
            15px;
    }

    .topbar-brand-mobile,
    .topbar-mobile-brand {
        display:
            flex;
    }

    .topbar-left {
        display:
            none !important;
    }

    .custom-topbar {
        top:
            8px;

        margin-bottom:
            18px;
    }

}


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

@media (max-width: 767px) {

    .content {
        padding:
            10px 12px 40px;
    }

    .custom-topbar {
        min-height:
            54px;

        padding:
            9px 12px;

        border-radius:
            12px;
    }

    .topbar-right .btn {
        padding:
            7px 10px !important;

        font-size:
            11px;
    }

    .rcode-hero,
    body .content .hero {
        padding:
            28px 20px !important;

        border-radius:
            20px !important;
    }

    body .content .hero h1 {
        font-size:
            29px !important;
    }

    .card-tech {
        padding:
            20px;

        border-radius:
            16px;
    }

    .article-title {
        font-size:
            29px;
    }

    .article-content {
        font-size:
            15px;
    }

    .sticky-footer-ad {
        min-height:
            55px;
    }

    .sticky-footer-ad .ad-mobile {
        width:
            320px;

        max-width:
            calc(100vw - 35px);

        overflow:
            hidden;
    }

}