.ordent-bd-wrapper .ordent-bd-container {
    margin: 0 auto;
    display: grid;
    gap: var(--radius-lg);
    align-items: center;
    grid-template-columns: 1fr;
    text-align: left;
    padding-top: var(--pad-top-mb, 0px);
    padding-bottom: var(--pad-bottom-mb, 0px);
    padding-left: var(--pad-left-mb, 0px);
    padding-right: var(--pad-right-mb, 0px);
}

.ordent-bd-wrapper.pos-left .ordent-bd-image-side,
.ordent-bd-wrapper.pos-top .ordent-bd-image-side { 
    grid-row: 1; 
}
.breadcrumb-center-wrapper {
    display: flex; 
    width: 100%;
}

.ordent-banner-breadcrumb { 
    display: flex;
    flex-wrap: wrap ;
    align-items: center;
    gap: 8px;
    font-size: 13px; 
    color: #2d3748; 
    margin-bottom: 0;
}

.ordent-banner-breadcrumb svg {
    display: block;
    margin: 0 2px;
}

.ordent-banner-breadcrumb a,
.ordent-banner-breadcrumb .current-post {
    white-space: nowrap;
}

.ordent-bd-wrapper.pos-top .breadcrumb-center-wrapper {
    justify-content: center;
}
.ordent-banner-breadcrumb { 
    display: flex;
    align-items: center;
    gap: 10;
    color: #2d3748; 
    margin-bottom: 12px; 
}
.ordent-banner-breadcrumb a { 
    color: #1a365d; 
    text-decoration: underline;
}
.ordent-banner-breadcrumb a:hover {
    text-decoration: none;
}

.ordent-banner-category-label { 
    font-weight: bold; 
    color: #2b6cb0; 
    letter-spacing: 0.5px; 
    margin-bottom: 8px; 
    margin-top: 0;
}

.ordent-banner-main-title { 
    font-size: var(--radius-lg); 
    font-weight: 800; 
    line-height: 1.3; 
    margin: 8px 0; 
    display: flex; 
    align-items: flex-start;
}

.ordent-banner-main-title .red-box-text {
    display: block;
    width: 12px;
    height: 12px;
    background-color: var(--fd-color-red-500);
    border-radius: var(--radius-xs);
    margin-right: 8px;
    margin-top: 8px;
    flex-shrink: 0;
}

.bd-title-link {
    color: inherit;
    text-decoration: underline;
    transition: opacity 0.2s ease-in-out;
}

.bd-title-link:hover, .bd-title-link:focus {
    opacity: 0.8;
}

.author-name-markdown { 
    font-size: 14px; 
    color: #4a5568; 
    margin-bottom: 12px; 
}

.ordent-banner-socials-share-list { 
    display: flex; 
    gap: 12px; 
    align-items: center; 
    flex-wrap: wrap; 
}
.share-icon-link { 
    display: inline-flex; 
    align-items: center; 
    text-decoration: none; 
    color: #2d3748; 
    justify-content: center;
    min-width: 18px;
    min-height: 18px;

}
.share-icon-link:focus {
    outline: 2px solid #2b6cb0;
}
.share-icon-link img { 
    width: 18px; 
    height: 18px; 
    object-fit: contain; 
}
.reading-element-flex { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    margin-left: 2px; 
}
.ordent-bd-image-side {
    display: flex;
    justify-content: center;
}
.ordent-bd-image-side img {
    width: 280px;
    height: 280px;
    aspect-ratio: 1 / 1; 
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.04);
}

.banner-detail-card-type-4{
 display: flex;
 justify-content: start;
}
.card-socmed-4 {
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16px;
  padding: 8px;
  display: flex;
  flex-direction: column;   
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  width: 77%;    
  aspect-ratio: 400 / 600;        
}

.surface-back {
  background: linear-gradient(to left, #012169, #012169),
    linear-gradient(to left, #eff7f7, #eff7f7);
  border-radius: 8.98px;
  flex-shrink: 0;
  width: 95%;
  height: 97%;
  position: absolute;
  right: 1.8%;
  left: 3.8%;
  bottom: 0.38%;
  top: 3.19%;
  transform-origin: 0 0;
  transform: rotate(-2deg) scale(1, 1);
}

.card-socmed-4 .container {
  background: #eff7f7;
  border-radius: 8px;
  padding: var(--radius-lg); 
  display: flex;
  flex-direction: column;   
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between; 
  align-self: stretch;
  flex: 1;
  position: relative;
  z-index: 2;
  height: 100%;
}

.card-socmed-4 .content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: space-between;
}


.card-socmed-4 .quote {
  color: #012169;
  text-align: left;
  font-size: var(--radius-lg); 
  line-height: 1.2;
  letter-spacing: 0.015em;
  font-weight: 600;
  position: relative;
  align-self: stretch;
}
.card-socmed-4 .text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
  flex: 0 1 auto; 
  position: relative;
  overflow: visible;
}

.card-socmed-4 .p {
  text-overflow: ellipsis;
  color: #012169;
  text-align: left;
  position: relative;
  width: 100%;
  align-self: stretch;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8; 
  max-height: none; 
  word-break: break-all;
}

.card-socmed-4 .username {
  display: flex;
  flex-direction: row;
  gap: 6px;          
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  padding: 4px 0;
}

.card-socmed-4 .symbol-svg {
  flex-shrink: 0;
  width: var(--radius-lg);        
  height: var(--radius-lg);
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.card-socmed-4 .username {
  display: flex;
  flex-direction: row;
  gap: 6px;          
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  padding: 4px 0;
  
  overflow: hidden;
}

.card-socmed-4 .username2 {
  color: #1a365d; 
  text-align: left;
  font-weight: 500;
  text-decoration: underline;
  position: relative;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  margin: 0;
}

.username2 {
  position: relative;
  background-color: transparent;
}

.card-socmed-4 .decorative {
  border-radius: 0px;
  flex-shrink: 0;
  width: 4.59%;
  height: 17.58%;
  position: absolute;
  right: 6.04%;
  top: -3%;
  transform: translate(-5.6px, -0.48px);
  overflow: visible;
  pointer-events: none;
}
.parangbatikframe-card {
  flex-shrink: 0;
  position: absolute;
  right: 0%;
  top: -4%;
  z-index: 4;
}
.parangimage{
    width: 145px;
}
.card-socmed-4 .icon {
  width: 98.48%;
  height: 191.73%;
  position: absolute;
  right: -83.81%;
  left: 85.33%;
  bottom: 4.28%;
  top: -96.01%;
  transform: translate(-90.07px, 123.34px);
  overflow: visible;
  aspect-ratio: 103.95/246.29;
}

/*  card 5 */
.card-type-5,
.card-type-5 * {
    box-sizing: border-box;
}

.container-type-5 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-type-5 {
    position: relative;
    display: flex;
    width: 480px;
    height: 600px;
    border-radius: 33.65px;
    overflow: hidden;
    box-shadow: -10.51px 8.41px 48.16px rgba(0, 0, 0, 0.15);
    background: #ffffff;
}

/* Spine */
.card-type-5__spine {
    width: 33.65px;
    background: #eff7f7;
    border-radius: 33.65px 0 0 33.65px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.card-type-5__spine-line {
    width: 2.1px;
    height: 100%;
    border: 2.1px solid rgba(1, 33, 105, 0.1);
    box-shadow: -2.1px 4.21px 10.09px rgba(17, 17, 17, 0.36);
}

/* Cover */
.card-type-5__cover {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-type-5__image-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.card-type-5__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #ffffff;
    padding: 12px;
    border-radius:   33.65px 33.65px 33.65px 33.65px;
}
.card-type-5__title {
    flex-shrink: 0;
    padding: 10px 20px;
    background: #fff;
    border-top: 1px solid #ececec;
    color: #012169;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    -webkit-line-clamp: unset;
}
/* //type 2 */
.type-2{
    display: flex;
    flex-direction: column;
    align-items: end;
}
.wraper-text-type-2{
    text-align: start;
    width: 540px;
}
.text-type-2-banner{
    color: var(--color-text-tertiary);
    padding: 0px 16px;;
}
.img-type-2{
    width: 480px;
    height: 600px;
    border-radius: var(--radius-lg);
}
.parangbatikframe-card-type-2 {
  flex-shrink: 0;
  position: absolute;
  right: 0%;
  top: 0%;
  z-index: 4;
}
/* --- rule none img stretch --- */
.banner-detail-card-type-1 img {
    object-fit: contain !important;
    background-color: #ffffff;
}

.img-type-2-wrapper {
    position: relative;
    width: 520px;
    height: 520px;
    background-color: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 12px;
    padding: 12px;
}

.img-type-2 {
    width: 520px;
    height: 520px;
    object-fit: cover !important;
    background-color: #ffffff;
    border-radius: var(--radius-lg);
}

.card-type-5__image-wrapper {
    background: #ffffff !important;
}
.card-type-5__image {
    object-fit: cover;
    background-color: #ffffff;
}
/* ==========================================
 * RESPONSIVE BREAKPOINTS (SMOOTH SCALING)
 * ========================================== */

 /* --- sm (568px) --- */
@media (min-width: 568px) {
    .ordent-bd-wrapper .ordent-bd-container {
        gap: 32px;
        padding-top: var(--pad-top-dt, 80px);
        padding-bottom: var(--pad-bottom-dt, 80px);
        padding-left: var(--pad-left-dt, 40px);
        padding-right: var(--pad-right-dt, 40px);
    }
    .ordent-banner-main-title {
        font-size: 28px;
    }
    .ordent-bd-image-side img {
        width: 100%;
        height: auto;
        border-radius: 16px;
    }
    
    .card-socmed-4 .p {
        font-size: 20px;
    }
    .card-socmed-4 .username2 {
        font-size: 16px;
    }
}
/* --- md (768px) --- */
@media (min-width: 768px) {
    .banner-detail-card-type-4{
    justify-content: center;
    }
    .share-icon-link img { 
        width: 30px; 
        height: 30px; 
        object-fit: contain; 
    }
    .ordent-bd-wrapper .ordent-bd-container {
        padding: var(--pad-top-dt, 80px) var(--pad-right-dt, 40px) var(--pad-bottom-dt, 80px) var(--pad-left-dt, 40px);
    }
    .ordent-bd-wrapper.has-banner-image.pos-right .ordent-bd-container {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .ordent-bd-wrapper.has-banner-image.pos-left .ordent-bd-container {
        grid-template-columns: 0.9fr 1.1fr;
    }

    .ordent-bd-wrapper.no-banner-image .ordent-bd-container {
        grid-template-columns: 1fr;
    }
    .ordent-bd-wrapper.pos-left .ordent-bd-image-side { 
        grid-column: 1; 
        grid-row: auto; 
    }
    .ordent-bd-wrapper.pos-top .ordent-bd-image-side {
        grid-row: auto;
    }

    .ordent-bd-wrapper.pos-top .ordent-bd-container,
    .ordent-bd-wrapper.pos-bottom .ordent-bd-container { 
        grid-template-columns: 1fr; 
        text-align: center; 
    }
    .ordent-bd-wrapper.pos-top .ordent-bd-image-side { 
        grid-row: 1; 
    }
    .ordent-bd-wrapper.pos-top .ordent-banner-socials-share-list,
    .ordent-bd-wrapper.pos-bottom .ordent-banner-socials-share-list { 
        justify-content: center; 
    }
    .ordent-bd-wrapper.pos-top .ordent-banner-main-title,
    .ordent-bd-wrapper.pos-bottom .ordent-banner-main-title { 
        justify-content: center;
    }
    .ordent-bd-wrapper.pos-top .ordent-banner-main-title .red-box-text,
    .ordent-bd-wrapper.pos-bottom .ordent-banner-main-title .red-box-text { 
        display: none; 
    }
}

/* --- lg (1016) --- */
@media (min-width: 1016px) {
    .card-socmed-4 .username {
        width: clamp(150px, 90%, 100%);
        overflow: hidden;
    }

    .card-socmed-4 .username2 {
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: block;
    }
    .container-type{
        display: flex;
        justify-content: end;
    }
    .card-socmed-4 {
        margin: 0;
        background: #ffffff;
        border-radius: 16px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 480px;
        max-width: 480px;
        height: 600px;
        aspect-ratio: auto; 
    }

    .card-socmed-4 .container {
        padding: 36px;
    }
    
    .card-socmed-4 .p, 
    .card-socmed-4 .quote {
        font-size: 28px;
    }
    
    .card-socmed-4 .username2 {
        font-size: 20px;
    }
    
    .card-socmed-4 .symbol-svg {
        width: 32px;
        height: 32px;
    }

    .ordent-bd-wrapper .ordent-bd-container {
        gap: 40px;
    }
    .ordent-banner-main-title {
        font-size: 32px;
    }
    .ordent-banner-main-title .red-box-text {
        width: 16px;
        height: 16px;
        margin-top: 10px;
        margin-right: 12px;
    }
    .ordent-bd-image-side img {
        max-width: 500px; 
        margin: 0 auto;
    }
}

/* --- xl (1280px) --- */
@media (min-width: 1280px) {
    .ordent-bd-wrapper .ordent-bd-container {
        gap: 50px;
    }
    .ordent-bd-image-side img {
        max-width: 600px;
    }
}

/* --- 2xl (1536px) --- */
@media (min-width: 1536px) {
    .ordent-bd-image-side img {
        max-width: 670px; 
    }
}


@media (max-width: 567px) {
    .parangimage{
        position: absolute;
        right: 0;
        top:0;
    }
    .type-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    .img-type-2-wrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        background-color: #ffffff;
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-bottom: 12px;
        padding: 12px;
        box-sizing: border-box;
    }

    .img-type-2 {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: #ffffff;
        border-radius: var(--radius-lg);
    }

    .wraper-text-type-2 {
        text-align: start;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .text-type-2-banner {
        color: var(--color-text-tertiary);
        padding: 0px 8px;
        word-wrap: break-word;
    }
    .ordent-bd-container > div[style*="display: flex; justify-content: end;"] {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .banner-detail-card-type-3 {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 480px;
        box-sizing: border-box;
    }

    .banner-detail-card-type-3 > div {
        width: 100%;
        height: 100%;
        padding-top: 40px;
        box-sizing: border-box;
    }

    .banner-detail-card-type-3 > div > div {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }
    
    .banner-detail-card-type-3 div[style*="font-family"] {
        white-space: normal;
        word-break: break-word;
    }
   .card-type-5 {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 420px;
        max-height: 500px;
        border-radius: 18px;
        box-sizing: border-box;
    }

    .container-type-5 {
        border-radius: 18px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .card-type-5__spine {
        width: 20px;
        border-radius: 18px 0 0 18px;
        flex-shrink: 0;
    }

    .card-type-5__cover {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px;
    }

    .card-type-5__image-wrapper {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .card-type-5__image {
        width: 100%;
        object-fit: cover;
        border-radius: 0 24px 0 0;
    }

    .card-type-5__title {
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        border-radius: 0 0 24px 0;
    }
    .card-type-5__spine-line{
        width: 0;
    }
}



.ordent-bd-wrapper.no-banner-image .ordent-bd-container { 
    grid-template-columns: 1fr; 
    text-align: left;
}

/* --- CMS  STYLING --- */
.admin-bd-main-box { border: 2px dashed #94a3b8; display: flex; gap: 20px; box-sizing: border-box; }
.admin-bd-main-box.pos-left { flex-direction: row-reverse; }
.admin-bd-main-box.pos-top { flex-direction: column-reverse; }
.admin-bd-main-box.pos-bottom { flex-direction: column; }

.admin-bd-content-flow { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.admin-bd-img-preview-pane { width: 180px; background: #f8fafc; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; }
.admin-bd-img-preview-pane img { width: 100%; height: auto; object-fit: cover; }
.img-empty { font-size: 10px; color: #94a3b8; text-align: center; padding: 10px; }

.adm-node-breadcrumb { font-size: 11px; color: #64748b; background: #f1f5f9; padding: 4px; }
.adm-node-category { font-size: 11px; font-weight: bold; color: #1e3a8a; }
.adm-node-title { font-size: 18px; margin: 4px 0; }
.adm-node-author { border: 1px dashed #3b82f6; background: #eff6ff; padding: 4px; font-size: 13px; }

.admin-icons-row-container { background: #fafafa; border: 1px solid #e2e8f0; padding: 6px; width: 100%; }
.admin-icons-row-container .block-editor-inner-blocks { display: flex; flex-direction: row; gap: 8px; }
.admin-icon-item-node { display: inline-block; }
.icon-uploader-tile { width: 32px; height: 32px; border: 1px dashed #94a3b8; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; }
.icon-uploader-tile img { width: 16px; height: 16px; }
.reading-node-flex { display: flex; align-items: center; gap: 4px; border: 1px dashed #cbd5e1; padding: 2px; background: #fff; }
.reading-txt-input { font-size: 11px; min-width: 80px; color: #334155; }

div.admin-icons-row-container { background: #f8fafc; border: 1px solid #e2e8f0; padding: 10px; border-radius: 8px; }
div.admin-icons-row-container div.icon-uploader-tile { width: 40px; height: 40px; border: 1px dashed #3b82f6; border-radius: 50%; background: #ffffff; color: #3b82f6; font-size: 14px; }
div.admin-icons-row-container div.icon-uploader-tile:hover { background: #eff6ff; }
div.admin-icons-row-container div.icon-uploader-tile img { width: 20px; height: 20px; border-radius: 50%; }