/* =========================================================
   CASA KREATIF — KNOWLEDGE HUB V2
   FINAL CLEAN CSS

   Scope:
   - /blog/ Knowledge Hub
   - Responsive desktop + mobile
   - Commercial Casa pages tetap memakai mobile canvas
========================================================= */


/* =========================================================
   TOKENS
========================================================= */

body.ck-knowledge-hub {
    --ckkh-navy: #10233f;
    --ckkh-navy-2: #183457;
    --ckkh-white: #ffffff;
    --ckkh-soft: #f6f8fb;
    --ckkh-border: #e4e9ef;
    --ckkh-text: #10233f;
    --ckkh-muted: #687586;

    --ckkh-radius: 18px;
    --ckkh-radius-sm: 12px;

    --ckkh-shadow:
        0 14px 40px rgba(16, 35, 63, .08);

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    background: #ffffff !important;
}


/* =========================================================
   KNOWLEDGE HUB OUTER SHELL

   Commercial page:
   .ck-shell > .ck-canvas ≈ mobile canvas

   Knowledge Hub:
   .ck-shell-knowledge > .ck-canvas-knowledge
   = responsive full-width desktop shell
========================================================= */

body.ck-knowledge-hub .ck-shell-knowledge {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 100vh;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--ckkh-white) !important;
}


body.ck-knowledge-hub .ck-canvas-knowledge {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--ckkh-white) !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   GLOBAL KNOWLEDGE HUB BASE
========================================================= */

.ckkh-main {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background: var(--ckkh-white);

    color: var(--ckkh-text);

    font-family:
        "Manrope",
        Arial,
        sans-serif;
}


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


.ckkh-container {
    width: min(
        1180px,
        calc(100% - 48px)
    );

    max-width: 1180px;

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


.ckkh-main img {
    display: block;
    max-width: 100%;
}


.ckkh-main a {
    text-decoration: none;
}


/* =========================================================
   CASA HEADER — KNOWLEDGE HUB MODE
========================================================= */

body.ck-knowledge-hub
.ck-canvas-knowledge
> .ck-header {

    width: min(
        1180px,
        calc(100% - 48px)
    ) !important;

    max-width: 1180px !important;

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


/*
   Mobile menu menggunakan alignment
   yang sama dengan Knowledge Hub.
*/

body.ck-knowledge-hub
.ck-canvas-knowledge
> .ck-mobile-menu {

    width: min(
        1180px,
        calc(100% - 48px)
    );

    max-width: 1180px;

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


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

.ckkh-hero {
    overflow: visible;

    padding:
        64px
        0
        38px;

    background:
        var(--ckkh-white);
}


.ckkh-eyebrow,
.ckkh-section-eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    color: var(--ckkh-navy);

    font-size: 12px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.ckkh-hero h1 {

    max-width: 820px;

    margin:
        0
        0
        30px;

    color: var(--ckkh-navy);

    font-size:
        clamp(
            36px,
            4vw,
            58px
        );

    line-height: 1.07;

    letter-spacing: -.04em;

    font-weight: 800;
}


.ckkh-hero h1 span {

    display: block;

    color: var(--ckkh-muted);

    font-weight: 600;
}


/* =========================================================
   KNOWLEDGE CLUSTER CHIPS
========================================================= */

.ckkh-cluster-nav {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin:
        0
        0
        18px;
}


.ckkh-chip {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding:
        9px
        15px;

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

    border-radius: 999px;

    background:
        var(--ckkh-white);

    color:
        var(--ckkh-navy);

    font-size: 13px;
    line-height: 1.3;

    font-weight: 700;

    white-space: nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.ckkh-chip:hover {

    border-color:
        var(--ckkh-navy);

    transform:
        translateY(-1px);
}


.ckkh-chip.is-active {

    background:
        var(--ckkh-navy);

    border-color:
        var(--ckkh-navy);

    color:
        #ffffff;
}


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

.ckkh-search {

    display: flex;

    width:
        min(
            600px,
            100%
        );

    gap: 8px;

    margin-top: 8px;
}


.ckkh-search input[type="search"] {

    flex: 1;

    min-width: 0;
    height: 48px;

    padding:
        0
        16px;

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

    border-radius:
        12px;

    outline: 0;

    background:
        var(--ckkh-white);

    color:
        var(--ckkh-navy);

    font: inherit;

    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.ckkh-search
input[type="search"]:focus {

    border-color:
        var(--ckkh-navy);

    box-shadow:
        0 0 0 3px
        rgba(16, 35, 63, .08);
}


.ckkh-search
input::placeholder {

    color:
        #8a95a3;
}


.ckkh-search button {

    min-width: 84px;
    height: 48px;

    padding:
        0
        18px;

    border: 0;

    border-radius:
        12px;

    background:
        var(--ckkh-navy);

    color:
        #ffffff;

    font: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

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


.ckkh-search button:hover {

    transform:
        translateY(-1px);

    opacity: .94;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.ckkh-section-head {

    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 24px;

    margin-bottom:
        24px;
}


.ckkh-section-head h2 {

    margin: 0;

    color:
        var(--ckkh-navy);

    font-size:
        clamp(
            25px,
            2.4vw,
            34px
        );

    line-height: 1.15;

    letter-spacing:
        -.025em;

    font-weight: 800;
}


.ckkh-see-all {

    flex: 0 0 auto;

    color:
        var(--ckkh-navy);

    font-size: 13px;

    font-weight: 800;
}


.ckkh-see-all:hover {
    text-decoration:
        underline;
}


/* =========================================================
   FEATURED ARTICLES
========================================================= */

.ckkh-featured {

    padding:
        34px
        0
        52px;
}


.ckkh-featured-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(280px, .8fr);

    gap: 20px;

    align-items: stretch;
}


/* MAIN FEATURED */

.ckkh-featured-main {

    min-width: 0;

    overflow: hidden;

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

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

    background:
        var(--ckkh-white);

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

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.ckkh-featured-main:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 48px
        rgba(16, 35, 63, .12);
}


.ckkh-featured-link {

    display: block;

    height: 100%;

    color: inherit;
}


.ckkh-featured-media {

    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    background:
        var(--ckkh-soft);
}


.ckkh-featured-media img,
.ckkh-featured-media
.ckkh-image-fallback {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.ckkh-featured-content {

    padding:
        26px
        28px
        28px;
}


.ckkh-featured-title {

    margin:
        7px
        0
        12px;

    color:
        var(--ckkh-navy);

    font-size:
        clamp(
            26px,
            2.5vw,
            38px
        );

    line-height: 1.12;

    letter-spacing:
        -.035em;

    font-weight: 800;
}


.ckkh-featured-excerpt {

    max-width: 760px;

    margin:
        0
        0
        18px;

    color:
        var(--ckkh-muted);

    font-size: 15px;

    line-height: 1.7;
}


/* SECONDARY FEATURED */

.ckkh-featured-secondary {

    display: grid;

    grid-template-rows:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;
}


.ckkh-secondary-card {
    height: 100%;
}


/* =========================================================
   ARTICLE GRID
========================================================= */

.ckkh-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 20px;
}


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

.ckkh-card {

    min-width: 0;

    overflow: hidden;

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

    border-radius:
        var(--ckkh-radius-sm);

    background:
        var(--ckkh-white);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.ckkh-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #d5dce5;

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


.ckkh-card-link {

    display: flex;

    flex-direction: column;

    height: 100%;

    color: inherit;
}


.ckkh-card-media {

    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    background:
        var(--ckkh-soft);
}


.ckkh-card-media img,
.ckkh-card-media
.ckkh-image-fallback {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;
}


.ckkh-card:hover
.ckkh-card-media img {

    transform:
        scale(1.025);
}


.ckkh-card-body {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding:
        17px
        18px
        18px;
}


.ckkh-card-cluster {

    display: block;

    margin-bottom: 8px;

    color:
        var(--ckkh-navy);

    font-size: 10px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.ckkh-card-title {

    margin:
        0
        0
        15px;

    color:
        var(--ckkh-navy);

    font-size: 17px;

    line-height: 1.42;

    letter-spacing:
        -.015em;

    font-weight: 800;
}


.ckkh-card-meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    margin-top: auto;

    color:
        var(--ckkh-muted);

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   BRANDED IMAGE FALLBACK
========================================================= */

.ckkh-image-fallback {

    display: flex;

    flex-direction: column;

    justify-content:
        flex-end;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            var(--ckkh-navy),
            var(--ckkh-navy-2)
        );

    color:
        #ffffff;
}


.ckkh-image-fallback span {

    margin-bottom: 7px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing:
        .14em;

    opacity: .72;
}


.ckkh-image-fallback strong {

    max-width: 80%;

    color:
        #ffffff !important;

    font-size: 18px;

    line-height: 1.2;
}


/* =========================================================
   LATEST ARTICLES
========================================================= */

.ckkh-latest {

    padding:
        44px
        0
        64px;
}


/* =========================================================
   INLINE CTA
========================================================= */

.ckkh-inline-cta {

    padding:
        14px
        0
        58px;

    background:
        var(--ckkh-white);
}


.ckkh-inline-cta-box {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 36px;

    padding:
        32px
        36px;

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

    background:
        var(--ckkh-navy);

    color:
        #ffffff;
}


.ckkh-inline-cta-box
.ckkh-section-eyebrow {

    color:
        rgba(
            255,
            255,
            255,
            .68
        );
}


.ckkh-inline-cta-box h2 {

    max-width: 650px;

    margin:
        0
        0
        9px;

    color:
        #ffffff;

    font-size:
        clamp(
            24px,
            2.5vw,
            34px
        );

    line-height: 1.15;

    letter-spacing:
        -.025em;
}


.ckkh-inline-cta-box p {

    max-width: 680px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size: 14px;

    line-height: 1.65;
}


.ckkh-inline-cta-box
.ck-btn {

    flex:
        0 0 auto;
}


/* =========================================================
   KNOWLEDGE CLUSTER SECTIONS
========================================================= */

.ckkh-cluster-section {

    padding:
        58px
        0
        62px;
}


.ckkh-cluster-section.is-white {

    background:
        var(--ckkh-white);
}


.ckkh-cluster-section.is-soft {

    background:
        var(--ckkh-soft);
}


/* =========================================================
   FOCUSED RESULTS
========================================================= */

.ckkh-results {

    padding:
        32px
        0
        70px;

    background:
        var(--ckkh-white);
}


.ckkh-results-grid {
    margin-top: 6px;
}


/* =========================================================
   LOAD MORE
========================================================= */

.ckkh-load-more-wrap {

    display: flex;

    justify-content:
        center;

    padding-top:
        34px;
}


.ckkh-load-more {

    min-height: 46px;

    padding:
        11px
        22px;

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

    border-radius:
        999px;

    background:
        var(--ckkh-white);

    color:
        var(--ckkh-navy);

    font: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.ckkh-load-more:hover {

    background:
        var(--ckkh-navy);

    color:
        #ffffff;
}


.ckkh-load-more:disabled {

    opacity: .6;

    cursor:
        wait;
}


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

.ckkh-empty {

    padding: 44px;

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

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

    background:
        var(--ckkh-soft);

    text-align: center;
}


.ckkh-empty h3 {

    margin:
        0
        0
        8px;

    color:
        var(--ckkh-navy);

    font-size: 22px;
}


.ckkh-empty p {

    margin:
        0
        0
        16px;

    color:
        var(--ckkh-muted);
}


.ckkh-text-link {

    color:
        var(--ckkh-navy);

    font-weight: 800;
}


/* =========================================================
   FINAL CTA — CASA V2 BAND

   Background full-width.
   Inner content uses .ckkh-container.
========================================================= */

body.ck-knowledge-hub
.ckkh-final-cta-band {

    width: 100% !important;
    max-width: none !important;

    margin:
        0 !important;

    padding:
        70px
        0 !important;

    border-radius:
        0 !important;
}


body.ck-knowledge-hub
.ckkh-final-cta-band
.ckkh-container {

    width:
        min(
            1180px,
            calc(100% - 48px)
        ) !important;

    max-width:
        1180px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


body.ck-knowledge-hub
.ckkh-final-cta-band
h2 {

    max-width: 720px;

    margin:
        0
        0
        14px;

    color: #ffffff;

    font-size:
        clamp(
            30px,
            3vw,
            44px
        );

    line-height: 1.1;

    letter-spacing:
        -.03em;
}


body.ck-knowledge-hub
.ckkh-final-cta-band
p {

    max-width: 650px;

    margin:
        0
        0
        24px;

    color:
        rgba(
            255,
            255,
            255,
            .74
        );

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   KNOWLEDGE HUB FOOTER

   Footer background stays full width.
   Existing footer design remains.

   Only inner footer blocks are constrained.
========================================================= */

body.ck-knowledge-hub
.ck-footer-knowledge {

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/*
   Preserve existing footer components,
   but align them to same 1180px grid.
*/

body.ck-knowledge-hub
.ck-footer-knowledge
> .ck-footer-intro,

body.ck-knowledge-hub
.ck-footer-knowledge
> .ck-footer-nav-grid,

body.ck-knowledge-hub
.ck-footer-knowledge
> .ck-footer-support,

body.ck-knowledge-hub
.ck-footer-knowledge
> .ck-footer-cta,

body.ck-knowledge-hub
.ck-footer-knowledge
> .ck-footer-contact,

body.ck-knowledge-hub
.ck-footer-knowledge
> .ck-footer-social,

body.ck-knowledge-hub
.ck-footer-knowledge
> .ck-footer-legal-links,

body.ck-knowledge-hub
.ck-footer-knowledge
> .ck-footer-corporate {

    width:
        min(
            1180px,
            calc(100% - 48px)
        ) !important;

    max-width:
        1180px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


/* =========================================================
   FOOTER DESKTOP UX IMPROVEMENTS
========================================================= */

@media (min-width: 901px) {

    body.ck-knowledge-hub
    .ck-footer-knowledge
    .ck-footer-nav-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    .ck-footer-contact {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    .ck-footer-cta {

        display: flex;

        align-items: center;

        justify-content:
            space-between;

        gap: 32px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.ckkh-main a:focus-visible,
.ckkh-main button:focus-visible,
.ckkh-main input:focus-visible {

    outline:
        3px solid
        rgba(
            16,
            35,
            63,
            .28
        );

    outline-offset: 3px;
}


.ckkh-inline-cta
a:focus-visible,

.ckkh-inline-cta
button:focus-visible,

.ckkh-final-cta-band
a:focus-visible,

.ckkh-final-cta-band
button:focus-visible {

    outline-color:
        rgba(
            255,
            255,
            255,
            .65
        );
}


.screen-reader-text {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


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

@media (max-width: 900px) {


    /* -----------------------------------------
       CONTENT WIDTH
    ----------------------------------------- */

    .ckkh-container {

        width:
            calc(
                100% - 36px
            );
    }


    body.ck-knowledge-hub
    .ck-canvas-knowledge
    > .ck-header,

    body.ck-knowledge-hub
    .ck-canvas-knowledge
    > .ck-mobile-menu {

        width:
            calc(
                100% - 36px
            ) !important;
    }


    /* -----------------------------------------
       FEATURED
    ----------------------------------------- */

    .ckkh-featured-layout {

        grid-template-columns:
            1fr;
    }


    .ckkh-featured-secondary {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        grid-template-rows:
            none;
    }


    /* -----------------------------------------
       ARTICLE GRID
    ----------------------------------------- */

    .ckkh-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    /* -----------------------------------------
       INLINE CTA
    ----------------------------------------- */

    .ckkh-inline-cta-box {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    /* -----------------------------------------
       FINAL CTA
    ----------------------------------------- */

    body.ck-knowledge-hub
    .ckkh-final-cta-band
    .ckkh-container {

        width:
            calc(
                100% - 36px
            ) !important;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-intro,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-nav-grid,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-support,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-cta,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-contact,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-social,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-legal-links,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-corporate {

        width:
            calc(
                100% - 36px
            ) !important;
    }

}


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

@media (max-width: 640px) {


    /* =====================================================
       OUTER SHELL
    ===================================================== */

    body.ck-knowledge-hub
    .ck-shell-knowledge,

    body.ck-knowledge-hub
    .ck-canvas-knowledge {

        width:
            100% !important;

        max-width:
            none !important;
    }


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

    body.ck-knowledge-hub
    .ck-canvas-knowledge
    > .ck-header {

        width:
            100% !important;

        max-width:
            none !important;

        padding-left:
            16px !important;

        padding-right:
            16px !important;
    }


    body.ck-knowledge-hub
    .ck-canvas-knowledge
    > .ck-mobile-menu {

        width:
            calc(
                100% - 28px
            ) !important;
    }


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

    .ckkh-container {

        width:
            calc(
                100% - 28px
            );

        max-width:
            none;
    }


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

    .ckkh-hero {

        padding:
            34px
            0
            22px;
    }


    .ckkh-hero h1 {

        margin-bottom:
            20px;

        font-size:
            31px;

        line-height:
            1.1;
    }


    .ckkh-eyebrow,
    .ckkh-section-eyebrow {

        font-size:
            10px;
    }


    /* =====================================================
       CLUSTER CHIPS
    ===================================================== */

    .ckkh-cluster-nav {

        position:
            sticky;

        z-index:
            30;

        top:
            64px;

        flex-wrap:
            nowrap;

        width:
            calc(
                100vw - 14px
            );

        margin-left:
            -7px;

        padding:
            8px
            7px;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        background:
            rgba(
                255,
                255,
                255,
                .96
            );

        border-bottom:
            1px solid
            rgba(
                228,
                233,
                239,
                .9
            );

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }


    .ckkh-cluster-nav::-webkit-scrollbar {

        display: none;
    }


    .ckkh-chip {

        flex:
            0 0 auto;

        min-height:
            36px;

        padding:
            8px
            13px;

        font-size:
            11px;
    }


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

    .ckkh-search {

        width:
            100%;

        margin-top:
            14px;
    }


    .ckkh-search
    input[type="search"],

    .ckkh-search
    button {

        height:
            44px;
    }


    .ckkh-search button {

        min-width:
            70px;

        padding:
            0
            13px;
    }


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

    .ckkh-featured {

        padding:
            25px
            0
            38px;
    }


    .ckkh-featured-layout,
    .ckkh-featured-secondary {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .ckkh-featured-content {

        padding:
            19px
            18px
            21px;
    }


    .ckkh-featured-title {

        font-size:
            24px;
    }


    .ckkh-featured-excerpt {

        font-size:
            13px;

        line-height:
            1.6;
    }


    /* =====================================================
       ARTICLE GRID
    ===================================================== */

    .ckkh-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .ckkh-card-body {

        padding:
            15px
            16px
            17px;
    }


    .ckkh-card-title {

        font-size:
            16px;

        line-height:
            1.4;
    }


    /* =====================================================
       SECTION HEAD
    ===================================================== */

    .ckkh-section-head {

        align-items:
            flex-start;

        gap:
            16px;

        margin-bottom:
            18px;
    }


    .ckkh-section-head h2 {

        font-size:
            24px;
    }


    .ckkh-see-all {

        padding-top:
            5px;

        font-size:
            11px;
    }


    /* =====================================================
       LATEST
    ===================================================== */

    .ckkh-latest {

        padding:
            30px
            0
            44px;
    }


    /* =====================================================
       CLUSTER SECTIONS
    ===================================================== */

    .ckkh-cluster-section {

        padding:
            42px
            0
            46px;
    }


    /* =====================================================
       INLINE CTA
    ===================================================== */

    .ckkh-inline-cta {

        padding:
            6px
            0
            44px;
    }


    .ckkh-inline-cta-box {

        gap:
            22px;

        padding:
            25px
            22px;

        border-radius:
            16px;
    }


    .ckkh-inline-cta-box h2 {

        font-size:
            25px;
    }


    .ckkh-inline-cta-box
    .ck-btn {

        width:
            100%;

        justify-content:
            center;
    }


    /* =====================================================
       FOCUSED RESULTS
    ===================================================== */

    .ckkh-results {

        padding:
            24px
            0
            52px;
    }


    .ckkh-empty {

        padding:
            30px
            20px;
    }


    /* =====================================================
       FINAL CTA
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-final-cta-band {

        padding:
            50px
            0 !important;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    .ckkh-container {

        width:
            calc(
                100% - 28px
            ) !important;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    h2 {

        font-size:
            29px;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    .ck-btn {

        width:
            100%;

        justify-content:
            center;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-intro,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-nav-grid,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-support,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-cta,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-contact,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-social,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-legal-links,

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-corporate {

        width:
            calc(
                100% - 28px
            ) !important;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .ckkh-main *,
    .ckkh-main *::before,
    .ckkh-main *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }

}
/* =========================================================
   CASA KREATIF — KNOWLEDGE HUB
   DESKTOP VISUAL POLISH V2.1

   Goals:
   1. Hero lebih premium
   2. Featured lebih proporsional
   3. Vertical rhythm lebih rapat
   4. Final CTA lebih intentional
   5. Footer lebih compact

   Desktop only — mobile tetap seperti sebelumnya.
========================================================= */

@media (min-width: 901px) {


    /* =====================================================
       1. HERO — MORE BREATHING ROOM, LESS OVERSIZED
    ===================================================== */

    body.ck-knowledge-hub .ckkh-hero {
        padding-top: 72px;
        padding-bottom: 34px;
    }


    body.ck-knowledge-hub .ckkh-hero h1 {
        max-width: 850px;

        margin-bottom: 26px;

        font-size: clamp(
            38px,
            3.5vw,
            52px
        );

        line-height: 1.06;

        letter-spacing: -.038em;
    }


    body.ck-knowledge-hub .ckkh-eyebrow {
        margin-bottom: 14px;
    }


    /*
     * Cluster + search dibuat sedikit lebih rapat
     * sehingga Hero tidak terasa terlalu panjang.
     */

    body.ck-knowledge-hub .ckkh-cluster-nav {
        margin-bottom: 14px;
    }


    body.ck-knowledge-hub .ckkh-search {
        margin-top: 4px;
    }



    /* =====================================================
       2. FEATURED — BETTER VISUAL BALANCE
    ===================================================== */

    body.ck-knowledge-hub .ckkh-featured {
        padding-top: 30px;
        padding-bottom: 44px;
    }


    body.ck-knowledge-hub .ckkh-featured-layout {
        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(300px, .85fr);

        gap: 18px;
    }


    /*
     * Main visual sedikit lebih pendek.
     * Tetap landscape editorial, tapi tidak mendominasi
     * seluruh viewport.
     */

    body.ck-knowledge-hub .ckkh-featured-main
    .ckkh-featured-media {
        aspect-ratio: 16 / 8.25;
    }


    body.ck-knowledge-hub .ckkh-featured-content {
        padding:
            22px
            24px
            24px;
    }


    body.ck-knowledge-hub .ckkh-featured-title {
        max-width: 760px;

        margin-top: 6px;
        margin-bottom: 10px;

        font-size: clamp(
            27px,
            2.15vw,
            34px
        );

        line-height: 1.13;
    }


    body.ck-knowledge-hub .ckkh-featured-excerpt {
        max-width: 720px;

        margin-bottom: 15px;

        font-size: 14px;

        line-height: 1.65;
    }


    /*
     * Secondary featured dibuat lebih ringkas agar
     * balance dengan main card.
     */

    body.ck-knowledge-hub .ckkh-featured-secondary {
        gap: 18px;
    }


    body.ck-knowledge-hub
    .ckkh-secondary-card
    .ckkh-card-body {
        padding:
            14px
            15px
            15px;
    }


    body.ck-knowledge-hub
    .ckkh-secondary-card
    .ckkh-card-title {
        margin-bottom: 10px;

        font-size: 15px;

        line-height: 1.35;
    }


    body.ck-knowledge-hub
    .ckkh-secondary-card
    .ckkh-card-cluster {
        margin-bottom: 6px;

        font-size: 9px;
    }



    /* =====================================================
       3. SECTION RHYTHM — LESS EMPTY VERTICAL SPACE
    ===================================================== */

    body.ck-knowledge-hub .ckkh-section-head {
        margin-bottom: 20px;
    }


    body.ck-knowledge-hub .ckkh-latest {
        padding-top: 38px;
        padding-bottom: 48px;
    }


    body.ck-knowledge-hub .ckkh-inline-cta {
        padding-top: 0;
        padding-bottom: 48px;
    }


    body.ck-knowledge-hub .ckkh-cluster-section {
        padding-top: 46px;
        padding-bottom: 50px;
    }


    /*
     * CTA inline sedikit lebih compact.
     */

    body.ck-knowledge-hub .ckkh-inline-cta-box {
        padding:
            28px
            32px;

        gap: 30px;
    }


    body.ck-knowledge-hub .ckkh-inline-cta-box h2 {
        font-size: 30px;
    }



    /* =====================================================
       ARTICLE CARDS — SLIGHT DENSITY IMPROVEMENT
    ===================================================== */

    body.ck-knowledge-hub .ckkh-card-body {
        padding:
            15px
            16px
            17px;
    }


    body.ck-knowledge-hub .ckkh-card-title {
        margin-bottom: 12px;

        font-size: 16px;

        line-height: 1.38;
    }


    body.ck-knowledge-hub .ckkh-card-cluster {
        margin-bottom: 7px;
    }



    /* =====================================================
       4. FINAL CTA — USE THE RIGHT SIDE INTENTIONALLY
    ===================================================== */

    body.ck-knowledge-hub .ckkh-final-cta-band {
        padding:
            58px
            0 !important;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    .ckkh-container {
        position: relative;

        min-height: 150px;

        padding-right: 300px;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    .ck-eyebrow {
        margin-bottom: 12px;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    h2 {
        max-width: 680px;

        margin-bottom: 12px;

        font-size: clamp(
            31px,
            2.8vw,
            42px
        );
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    p {
        max-width: 650px;

        margin-bottom: 0;

        font-size: 14px;

        line-height: 1.65;
    }


    /*
     * CTA berada di sisi kanan.
     * Sekarang whitespace kanan punya fungsi.
     */

    body.ck-knowledge-hub
    .ckkh-final-cta-band
    .ck-btn {
        position: absolute;

        top: 50%;
        right: 0;

        width: auto !important;

        transform: translateY(-50%);

        white-space: nowrap;
    }



    /* =====================================================
       5. FOOTER — COMPACT DESKTOP
    ===================================================== */

    body.ck-knowledge-hub
    .ck-footer-knowledge {
        padding-top: 18px !important;
        padding-bottom: 12px !important;
    }


    /*
     * Kurangi vertical padding tiap footer block,
     * tapi tidak mengubah struktur/link/modal.
     */

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-intro {
        padding-top: 20px !important;
        padding-bottom: 18px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-nav-grid {
        padding-top: 18px !important;
        padding-bottom: 20px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-support {
        padding-top: 16px !important;
        padding-bottom: 18px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-cta {
        padding:
            18px
            20px !important;

        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-contact {
        padding-top: 16px !important;
        padding-bottom: 16px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-social {
        padding-top: 13px !important;
        padding-bottom: 13px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-legal-links {
        padding-top: 12px !important;
        padding-bottom: 12px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-corporate {
        padding-top: 12px !important;
        padding-bottom: 16px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

}
/* =========================================================
   CASA KREATIF — KNOWLEDGE HUB
   MOBILE UX POLISH V2.2

   Scope: <= 640px only
   Desktop tetap LOCKED.
========================================================= */

@media (max-width: 640px) {


    /* =====================================================
       1. MOBILE PAGE SAFETY
    ===================================================== */

    body.ck-knowledge-hub {
        overflow-x: hidden;
    }


    body.ck-knowledge-hub .ckkh-main {
        overflow: visible;
    }



    /* =====================================================
       2. STICKY HEADER
       Lebih jelas ketika user scroll artikel panjang.
    ===================================================== */

    body.ck-knowledge-hub
    .ck-canvas-knowledge
    > .ck-header {

        position: sticky;

        top: 0;

        z-index: 100;

        min-height: 58px;

        padding-top: 8px !important;
        padding-bottom: 8px !important;

        background:
            rgba(255, 255, 255, .97);

        border-bottom:
            1px solid rgba(16, 35, 63, .06);

        box-shadow:
            0 4px 16px rgba(16, 35, 63, .045);

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);
    }


    body.ck-knowledge-hub
    .ck-header
    .ck-brand {

        flex:
            0 1 auto;
    }


    body.ck-knowledge-hub
    .ck-header
    .ck-brand img {

        max-height: 30px;

        width: auto;
    }


    body.ck-knowledge-hub
    .ck-header
    .ck-header-actions {

        gap: 8px;
    }


    body.ck-knowledge-hub
    .ck-header
    .ck-btn-small {

        min-height: 36px;

        padding:
            8px
            12px;

        font-size: 10px;

        white-space: nowrap;
    }


    body.ck-knowledge-hub
    .ck-header
    .ck-menu-btn {

        flex:
            0 0 auto;
    }



    /* =====================================================
       3. HERO
       Sedikit lebih cepat sampai ke konten.
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-hero {

        padding-top: 29px;
        padding-bottom: 20px;
    }


    body.ck-knowledge-hub
    .ckkh-eyebrow {

        margin-bottom: 9px;

        font-size: 9px;

        letter-spacing: .105em;
    }


    body.ck-knowledge-hub
    .ckkh-hero h1 {

        max-width: 390px;

        margin-bottom: 19px;

        font-size: 30px;

        line-height: 1.08;

        letter-spacing: -.035em;
    }



    /* =====================================================
       4. CLUSTER CHIPS
       Horizontal navigation dibuat lebih natural.
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-cluster-nav {

        top: 58px;

        z-index: 80;

        width:
            calc(100vw - 14px);

        margin-left: -7px;
        margin-bottom: 12px;

        padding:
            8px
            7px
            9px;

        gap: 7px;

        background:
            rgba(255, 255, 255, .98);

        box-shadow:
            0 5px 12px rgba(16, 35, 63, .035);

        scroll-snap-type:
            x proximity;

        overscroll-behavior-x:
            contain;
    }


    body.ck-knowledge-hub
    .ckkh-chip {

        scroll-snap-align: start;

        min-height: 34px;

        padding:
            7px
            12px;

        font-size: 10px;

        border-radius: 999px;
    }



    /* =====================================================
       5. SEARCH
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-search {

        gap: 7px;

        margin-top: 9px;
    }


    body.ck-knowledge-hub
    .ckkh-search
    input[type="search"] {

        height: 44px;

        padding:
            0
            13px;

        border-radius: 10px;

        font-size: 12px;
    }


    body.ck-knowledge-hub
    .ckkh-search button {

        min-width: 68px;

        height: 44px;

        padding:
            0
            14px;

        border-radius: 10px;

        font-size: 11px;
    }



    /* =====================================================
       6. SECTION HEADINGS
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-section-head {

        gap: 12px;

        margin-bottom: 15px;
    }


    body.ck-knowledge-hub
    .ckkh-section-head h2 {

        font-size: 23px;

        line-height: 1.15;
    }


    body.ck-knowledge-hub
    .ckkh-section-eyebrow {

        margin-bottom: 8px;

        font-size: 9px;
    }


    body.ck-knowledge-hub
    .ckkh-see-all {

        padding-top: 5px;

        font-size: 10px;

        white-space: nowrap;
    }



    /* =====================================================
       7. FEATURED
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-featured {

        padding-top: 22px;
        padding-bottom: 32px;
    }


    body.ck-knowledge-hub
    .ckkh-featured-layout,

    body.ck-knowledge-hub
    .ckkh-featured-secondary {

        gap: 11px;
    }


    body.ck-knowledge-hub
    .ckkh-featured-main {

        border-radius: 14px;
    }


    body.ck-knowledge-hub
    .ckkh-featured-content {

        padding:
            17px
            16px
            18px;
    }


    body.ck-knowledge-hub
    .ckkh-featured-title {

        margin-top: 4px;
        margin-bottom: 9px;

        font-size: 22px;

        line-height: 1.17;
    }


    body.ck-knowledge-hub
    .ckkh-featured-excerpt {

        margin-bottom: 12px;

        font-size: 12px;

        line-height: 1.55;
    }



    /* =====================================================
       8. NORMAL ARTICLE CARDS
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-grid {

        gap: 11px;
    }


    body.ck-knowledge-hub
    .ckkh-card {

        border-radius: 12px;
    }


    body.ck-knowledge-hub
    .ckkh-card-body {

        padding:
            14px
            14px
            15px;
    }


    body.ck-knowledge-hub
    .ckkh-card-cluster {

        margin-bottom: 6px;

        font-size: 9px;

        letter-spacing: .07em;
    }


    body.ck-knowledge-hub
    .ckkh-card-title {

        margin-bottom: 11px;

        font-size: 15px;

        line-height: 1.38;
    }


    body.ck-knowledge-hub
    .ckkh-card-meta {

        gap: 5px;

        font-size: 10px;
    }



    /* =====================================================
       9. LATEST
       Kurangi panjang halaman sedikit tanpa membuang konten.
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-latest {

        padding-top: 27px;
        padding-bottom: 38px;
    }



    /* =====================================================
       10. INLINE CTA
       Ini masalah UX utama dari screenshot:
       tombol sebelumnya terlalu menyerupai link teks.
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-inline-cta {

        padding-top: 2px;
        padding-bottom: 38px;
    }


    body.ck-knowledge-hub
    .ckkh-inline-cta-box {

        gap: 19px;

        padding:
            24px
            20px;

        border-radius: 15px;
    }


    body.ck-knowledge-hub
    .ckkh-inline-cta-box h2 {

        margin-bottom: 8px;

        font-size: 24px;

        line-height: 1.13;
    }


    body.ck-knowledge-hub
    .ckkh-inline-cta-box p {

        font-size: 12px;

        line-height: 1.6;
    }


    /*
       IMPORTANT:
       CTA sekarang benar-benar terlihat seperti tombol.
    */

    body.ck-knowledge-hub
    .ckkh-inline-cta-box
    .ck-btn {

        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 100% !important;

        min-height: 44px;

        padding:
            11px
            16px;

        border:
            1px solid #ffffff !important;

        border-radius:
            10px !important;

        background:
            #ffffff !important;

        color:
            var(--ckkh-navy) !important;

        font-size:
            11px;

        font-weight:
            800;

        text-align: center;
    }



    /* =====================================================
       11. CLUSTER SECTIONS
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-cluster-section {

        padding-top: 37px;
        padding-bottom: 39px;
    }



    /* =====================================================
       12. FINAL CTA
       Screenshot sudah bagus — cukup dipadatkan.
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-final-cta-band {

        padding:
            44px
            0 !important;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    .ck-eyebrow {

        margin-bottom: 10px;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    h2 {

        margin-bottom: 12px;

        font-size: 28px;

        line-height: 1.12;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    p {

        margin-bottom: 21px;

        font-size: 12px;

        line-height: 1.65;
    }


    body.ck-knowledge-hub
    .ckkh-final-cta-band
    .ck-btn {

        min-height: 46px;

        border-radius: 10px;
    }



    /* =====================================================
       13. FOOTER MOBILE
       Struktur sudah bagus. Hanya polish readability.
    ===================================================== */

    body.ck-knowledge-hub
    .ck-footer-knowledge {

        padding-top: 0 !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-intro {

        padding-top: 24px !important;
        padding-bottom: 20px !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    .ck-footer-positioning {

        margin-top: 9px;

        font-size: 11px;

        line-height: 1.5;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-nav-grid {

        padding-top: 17px !important;
        padding-bottom: 18px !important;
    }


    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-support {

        padding-top: 16px !important;
        padding-bottom: 17px !important;
    }


    body.ck-knowledge-hub
    .ck-footer-support-links {

        gap: 6px;
    }


    body.ck-knowledge-hub
    .ck-footer-support-links a {

        min-height: 30px;

        display: inline-flex;

        align-items: center;

        padding:
            6px
            9px;

        white-space: nowrap;
    }


    /*
       Mini CTA footer tetap compact,
       tetapi button dibuat full-width di mobile.
    */

    body.ck-knowledge-hub
    .ck-footer-knowledge
    > .ck-footer-cta {

        gap: 15px;
    }


    body.ck-knowledge-hub
    .ck-footer-cta
    .ck-btn {

        width: 100%;

        justify-content: center;
    }



    /* =====================================================
       14. TOUCH TARGETS
    ===================================================== */

    body.ck-knowledge-hub
    .ckkh-see-all,

    body.ck-knowledge-hub
    .ck-footer-social a,

    body.ck-knowledge-hub
    .ck-footer-legal-links a {

        min-height: 32px;

        display: inline-flex;

        align-items: center;
    }

}
/* =========================================================
   CASA KNOWLEDGE HUB v2.1 — MENU STACKING SAFETY
========================================================= */

@media (max-width: 640px) {
    body.ck-knowledge-hub
    .ck-canvas-knowledge
    > .ck-mobile-menu {
        position: sticky;
        top: 58px;
        z-index: 95;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(16, 35, 63, .06);
    }
}