
.jsh-section{
    --jsh-primary:#0f40a0;
    --jsh-secondary:#1765d1;
    --jsh-heading:#0d1b35;
    --jsh-text:#536176;
    --jsh-muted:#7a8798;
    --jsh-border:#dbe7f5;

    position:relative;
    width:100%;
    overflow:hidden;
    padding:96px 0;
    background:
        radial-gradient(circle at 0% 18%,rgba(23,101,209,.07),transparent 26%),
        radial-gradient(circle at 100% 82%,rgba(23,101,209,.05),transparent 27%),
        linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    color:var(--jsh-heading);
    font-family:"Poppins",sans-serif;
}

.jsh-section,
.jsh-section *{
    box-sizing:border-box;
}

.jsh-section a,
.jsh-section a:hover,
.jsh-section a:focus,
.jsh-section a:active,
.jsh-section a:visited{
    text-decoration:none!important;
}

.jsh-container{
    width:min(100% - 40px,1220px);
    margin-inline:auto;
}

.jsh-heading{
    max-width:830px;
    margin:0 auto 45px;
    text-align:center;
}

.jsh-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 15px;
    border:1px solid #cfe0f7;
    border-radius:999px;
    background:#eaf3ff;
    color:var(--jsh-primary);
    font-size:10px;
    font-weight:700;
    letter-spacing:.9px;
    text-transform:uppercase;
}

.jsh-title{
    margin:16px 0 0;
    color:var(--jsh-heading);
    font-size:clamp(35px,4.2vw,53px);
    font-weight:800;
    line-height:1.16;
    letter-spacing:-1.5px;
}

.jsh-description{
    max-width:760px;
    margin:17px auto 0;
    color:var(--jsh-text);
    font-size:14px;
    line-height:1.82;
}

.jsh-social-layout{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr);
    gap:18px;
}

.jsh-social-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--jsh-border);
    border-radius:20px;
    background:#ffffff;
    box-shadow:0 16px 40px rgba(15,64,160,.075);
}

.jsh-social-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 19px;
    border-bottom:1px solid var(--jsh-border);
}

.jsh-platform-label{
    color:var(--jsh-secondary);
    font-size:8px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.jsh-social-card-head h3{
    margin:4px 0 0;
    color:var(--jsh-heading);
    font-size:16px;
    font-weight:800;
    line-height:1.4;
}

.jsh-social-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 13px;

    border-top:1px solid var(--jsh-primary)!important;
    border-right:1px solid var(--jsh-primary)!important;
    border-bottom:1px solid var(--jsh-primary)!important;
    border-left:1px solid var(--jsh-primary)!important;

    border-radius:9px;
    background:linear-gradient(135deg,var(--jsh-primary),var(--jsh-secondary));
    color:#ffffff!important;
    font-size:9px;
    font-weight:600;
    white-space:nowrap;
}

.jsh-social-embed{
    min-height:390px;
    padding:16px;
    background:#f8fbff;
    content-visibility:auto;
    contain-intrinsic-size:390px;
}

.jsh-tiktok-embed-wrap{
    overflow-x:auto;
}

.jsh-tiktok-embed-wrap .tiktok-embed{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
}

.jsh-instagram-embed-wrap>*{
    max-width:100%!important;
    margin-inline:auto!important;
}

.jsh-instagram-embed-wrap iframe{
    width:100%!important;
    max-width:100%!important;
}

.jsh-instagram-embed-wrap .instagram-media{
    width:100%!important;
    min-width:0!important;
    max-width:540px!important;
    margin:0 auto!important;
    border:0!important;
    box-shadow:none!important;
}

.jsh-native-profile-link{
    display:flex;
    min-height:356px;
    align-items:center;
    justify-content:center;
    padding:25px;
    text-align:center;
}

.jsh-native-profile-link a{
    display:inline-flex;
    min-height:43px;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border:1px solid var(--jsh-primary)!important;
    border-radius:10px;
    color:var(--jsh-primary)!important;
    font-size:11px;
    font-weight:700;
}

.jsh-social-fallback{
    display:flex;
    min-height:356px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:30px;
    border:1px dashed #bfd2ed;
    border-radius:14px;
    background:#ffffff;
    text-align:center;
}

.jsh-social-fallback-icon{
    display:flex;
    width:58px;
    height:58px;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:#eaf3ff;
    color:var(--jsh-secondary);
    font-size:30px;
}

.jsh-social-fallback strong{
    margin-top:15px;
    color:var(--jsh-heading);
    font-size:18px;
}

.jsh-social-fallback p{
    max-width:380px;
    margin:8px auto 0;
    color:var(--jsh-text);
    font-size:10.5px;
    line-height:1.7;
}

.jsh-social-fallback a{
    margin-top:16px;
    padding:9px 14px;
    border:1px solid var(--jsh-primary)!important;
    border-radius:9px;
    color:var(--jsh-primary)!important;
    font-size:9px;
    font-weight:600;
}

/* Tidak ada skeleton atau tulisan loading. */
.jsh-embed-skeleton,
.jsh-embed-placeholder,
.jsh-map-loading,
.loading{
    display:none!important;
}

@media(max-width:900px){
    .jsh-social-layout{
        grid-template-columns:1fr;
    }
}

@media(max-width:767px){
    .jsh-section{
        padding:64px 0;
    }

    .jsh-container{
        width:min(100% - 30px,1220px);
    }

    .jsh-heading{
        margin-bottom:35px;
    }

    .jsh-title{
        font-size:33px;
        line-height:1.2;
        letter-spacing:-1px;
    }

    .jsh-description{
        font-size:12.5px;
        line-height:1.74;
    }

    .jsh-social-layout{
        gap:15px;
    }

    .jsh-social-card{
        border-radius:16px;
    }

    .jsh-social-card-head{
        padding:15px;
    }

    .jsh-social-card-head h3{
        font-size:14px;
    }

    .jsh-social-embed{
        min-height:330px;
        padding:11px;
        contain-intrinsic-size:330px;
    }
}

@media(max-width:500px){
    .jsh-social-card-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .jsh-social-link{
        width:100%;
    }
}
