[data-cms-swipe="0"] .mini-nav,
[data-cms-swipe="0"] .mini-dots,
[data-cms-swipe="0"] .collection-tools > div,
[data-cms-swipe="0"] .cms-media-gallery-nav,
[data-cms-swipe="0"] .cms-media-gallery-dots {
    display: none !important;
}

[data-cms-swipe="0"] .mini-track,
[data-cms-swipe="0"] .card-rail,
[data-cms-swipe="0"] .cms-media-gallery-track {
    display: grid !important;
    overflow: visible !important;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
    transform: none !important;
}

[data-cms-swipe="0"] .mini-slide,
[data-cms-swipe="0"] .story-card,
[data-cms-swipe="0"] .cms-media-gallery-slide {
    width: auto !important;
    min-width: 0 !important;
    transform: none !important;
}

[data-cms-swipe="0"] .cms-media-gallery {
    overflow: visible;
    aspect-ratio: auto !important;
    background: transparent;
}

.cms-media-gallery {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    border-radius: inherit;
    background: rgba(23, 36, 60, .08);
    touch-action: pan-y;
}

.cms-media-gallery[data-cms-fill-frame="1"] {
    height: 100%;
    aspect-ratio: auto !important;
}

.cms-media-gallery-track {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}

.cms-media-gallery-slide {
    display: block;
    /*
     * A number of Mata Yearbook layouts intentionally position decorative
     * `figure` elements absolutely (for example `.intro-photo-stack figure`).
     * Older CMS galleries also used `figure` for each slide, so those layout
     * rules accidentally pulled every slide out of the flex track. Keep this
     * reset deliberately strong so already-saved galleries repair themselves.
     */
    position: relative !important;
    inset: auto !important;
    z-index: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    rotate: none !important;
}

.cms-media-gallery-slide > img {
    display: block;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: var(--cms-crop-x, 50%) var(--cms-crop-y, 50%) !important;
    transform: scale(var(--cms-crop-scale, 1)) !important;
    transform-origin: var(--cms-crop-x, 50%) var(--cms-crop-y, 50%) !important;
    transition: transform .22s ease, object-position .22s ease;
    rotate: none !important;
}

img[data-cms-crop-x][data-cms-crop-y] {
    object-fit: cover !important;
    object-position: var(--cms-crop-x, 50%) var(--cms-crop-y, 50%) !important;
    transform: scale(var(--cms-crop-scale, 1));
    transform-origin: var(--cms-crop-x, 50%) var(--cms-crop-y, 50%);
}

img[data-cms-large-preview="1"] {
    cursor: zoom-in;
}

[data-cms-replaceable-visual] {
    overflow: hidden;
    isolation: isolate;
}

[data-cms-replaceable-visual] > img[data-cms-visual-custom] {
    display: none !important;
    position: absolute !important;
    z-index: 20 !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: var(--cms-crop-x, 50%) var(--cms-crop-y, 50%) !important;
    transform: scale(var(--cms-crop-scale, 1)) !important;
    transform-origin: var(--cms-crop-x, 50%) var(--cms-crop-y, 50%) !important;
    pointer-events: auto !important;
    user-select: none;
}

body[data-cms-preview="1"] [data-cms-replaceable-visual] > img[data-cms-visual-custom] {
    pointer-events: none !important;
}

[data-cms-replaceable-visual][data-cms-visual-mode="custom"][data-cms-visual-ready="1"] > img[data-cms-visual-custom] {
    display: block !important;
}

[data-cms-replaceable-visual] > [data-cms-visual-custom-gallery] {
    display: none !important;
    position: absolute !important;
    z-index: 20 !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
}

[data-cms-replaceable-visual][data-cms-visual-mode="custom"][data-cms-visual-ready="1"] > [data-cms-visual-custom-gallery] {
    display: block !important;
}

/*
 * Hero utama Mata Yearbook adalah ilustrasi berlapis. Hanya permukaan
 * `.book-cover` yang boleh diganti foto; `.book-scene`, halaman buku,
 * bayangan, stiker, dan ornamen di belakang harus tetap menjadi layout asli.
 */
.book-cover[data-cms-hero-book-cover="1"] {
    isolation: isolate !important;
    overflow: hidden !important;
}

.book-cover[data-cms-hero-book-cover="1"] > img[data-cms-visual-custom],
.book-cover[data-cms-hero-book-cover="1"] > [data-cms-visual-custom-gallery] {
    border-radius: inherit !important;
}

.book-cover[data-cms-hero-book-cover="1"][data-cms-visual-mode="custom"][data-cms-visual-ready="1"]::before {
    display: none !important;
    content: none !important;
}

.book-cover[data-cms-hero-book-cover="1"][data-cms-visual-mode="custom"][data-cms-visual-ready="1"] > .cover-top,
.book-cover[data-cms-hero-book-cover="1"][data-cms-visual-mode="custom"][data-cms-visual-ready="1"] > .cover-main,
.book-cover[data-cms-hero-book-cover="1"][data-cms-visual-mode="custom"][data-cms-visual-ready="1"] > .cover-bottom {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Saat swipe section dimatikan, cover tetap rapi dan hanya menampilkan foto pertama. */
[data-cms-swipe="0"] .cms-visual-gallery {
    overflow: hidden !important;
    aspect-ratio: auto !important;
}

[data-cms-swipe="0"] .cms-visual-gallery > .cms-media-gallery-track {
    display: flex !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
    transform: none !important;
}

[data-cms-swipe="0"] .cms-visual-gallery .cms-media-gallery-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}

[data-cms-swipe="0"] .cms-visual-gallery .cms-media-gallery-slide:not(:first-child) {
    display: none !important;
}

.cms-image-lightbox {
    display: grid;
    position: fixed;
    z-index: 100000;
    inset: 0;
    padding: clamp(14px, 3vw, 42px);
    place-items: center;
    color: #fff;
    background: rgba(8, 15, 28, .94);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
    backdrop-filter: blur(12px);
}

.cms-image-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.cms-image-lightbox-stage {
    display: grid;
    position: relative;
    width: min(1180px, 100%);
    height: min(86vh, 900px);
    place-items: center;
}

.cms-image-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

.cms-image-lightbox-close,
.cms-image-lightbox-nav {
    display: grid;
    position: absolute;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 2px solid #17243c;
    border-radius: 50%;
    color: #17243c;
    background: #ffd91a;
    box-shadow: 4px 4px 0 #ff7a20;
    font: 900 1rem/1 "Plus Jakarta Sans", sans-serif;
}

.cms-image-lightbox-close {
    top: 0;
    right: 0;
    font-size: 1.25rem;
}

.cms-image-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
}

.cms-image-lightbox-nav.is-prev {
    left: 0;
}

.cms-image-lightbox-nav.is-next {
    right: 0;
}

.cms-image-lightbox-nav[hidden] {
    display: none;
}

.cms-image-lightbox-caption {
    position: absolute;
    right: 60px;
    bottom: 0;
    left: 60px;
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
    line-height: 1.5;
    text-align: center;
}

body.cms-lightbox-open {
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .cms-image-lightbox {
        padding: 12px;
    }

    .cms-image-lightbox-stage {
        height: 88vh;
    }

    .cms-image-lightbox-close,
    .cms-image-lightbox-nav {
        width: 38px;
        height: 38px;
    }

    .cms-image-lightbox-nav.is-prev {
        left: 4px;
    }

    .cms-image-lightbox-nav.is-next {
        right: 4px;
    }

    .cms-image-lightbox-caption {
        right: 46px;
        left: 46px;
        font-size: .72rem;
    }
}

.cms-media-gallery-nav {
    display: grid;
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 2px solid #17243c;
    border-radius: 50%;
    color: #17243c;
    background: #ffd91a;
    box-shadow: 3px 3px 0 #17243c;
    font: 900 1rem/1 "Plus Jakarta Sans", sans-serif;
    transform: translateY(-50%);
}

.cms-media-gallery-nav.is-prev {
    left: 12px;
}

.cms-media-gallery-nav.is-next {
    right: 12px;
}

.cms-media-gallery-dots {
    display: flex;
    position: absolute;
    z-index: 4;
    bottom: 12px;
    left: 50%;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255, 249, 238, .88);
    transform: translateX(-50%);
    backdrop-filter: blur(7px);
}

.cms-media-gallery-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 1px solid #17243c;
    border-radius: 999px;
    background: transparent;
    transition: width .2s ease, background-color .2s ease;
}

.cms-media-gallery-dots button.is-active {
    width: 22px;
    background: #ff7a20;
}

.article-hero-card {
    overflow: hidden;
    min-height: 420px;
    margin: 0;
    border: 3px solid var(--navy);
    border-radius: 28px;
    box-shadow: 10px 10px 0 var(--orange);
}

.article-hero-card img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

.article-prose .article-faq details {
    margin: 12px 0;
    padding: 16px 18px;
    border: 2px solid var(--navy);
    border-radius: 14px;
    background: var(--cream);
}

.article-prose .article-faq summary {
    cursor: pointer;
    font-weight: 800;
}

.article-prose .article-faq details p {
    margin: 10px 0 0;
}

html[data-cms-preview="1"] {
    scroll-behavior: auto !important;
}

body[data-cms-preview="1"] [data-cms-section] {
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color .15s ease;
}

body[data-cms-preview="1"] [data-cms-section]:hover {
    outline-color: rgba(118, 87, 255, .5);
}

/*
 * Badge editor wajib berupa elemen DOM, bukan ::before/::after. Beberapa
 * komponen landing (opening video, inner footer, cover buku) sudah memakai
 * pseudo-element untuk artwork. Memakai pseudo-element yang sama membuat
 * nilai inset/ukuran dekorasi lama ikut terbawa dan menghasilkan overlay
 * kuning raksasa di preview.
 */
body[data-cms-preview="1"] .cms-editor-badge {
    box-sizing: border-box !important;
    position: absolute;
    z-index: 10001;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 16px);
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 10px;
    border: 1px solid rgba(23, 36, 60, .2);
    border-radius: 999px;
    color: #17243c;
    background: #ffd91a;
    font: 800 10px/1.2 "Plus Jakarta Sans", sans-serif;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    pointer-events: none;
}

body[data-cms-preview="1"] .cms-editor-badge--global {
    top: 8px;
    right: 8px;
}

body[data-cms-preview="1"] [data-cms-global-readonly="1"] {
    cursor: alias;
}

body[data-cms-preview="1"] [data-cms-managed-item] {
    cursor: pointer;
}

body[data-cms-preview="1"] [data-cms-managed-item]:hover {
    outline: 3px dashed #7657ff !important;
    outline-offset: 3px;
}

body[data-cms-preview="1"] [data-cms-managed-item].cms-managed-selected {
    outline: 4px solid #ff7a20 !important;
    outline-offset: 4px;
}

body[data-cms-preview="1"] [data-cms-node]:hover {
    outline: 2px dashed #7657ff !important;
    outline-offset: 3px;
    cursor: text;
}

body[data-cms-preview="1"] [data-cms-replaceable-visual],
body[data-cms-preview="1"] [data-cms-replaceable-visual]:hover {
    cursor: pointer;
}

body[data-cms-preview="1"] [data-cms-replaceable-visual] > .cms-editor-badge--visual {
    right: 10px;
    bottom: 10px;
    padding: 6px 9px;
    background: rgba(255, 217, 26, .94);
    font: 800 9px/1.2 "Plus Jakarta Sans", sans-serif;
    opacity: 0 !important;
    transition: opacity .18s ease;
}

body[data-cms-preview="1"] [data-cms-replaceable-visual]:hover > .cms-editor-badge--visual,
body[data-cms-preview="1"] [data-cms-replaceable-visual].cms-node-selected > .cms-editor-badge--visual {
    opacity: 1 !important;
}

body[data-cms-preview="1"] .book-cover[data-cms-hero-book-cover="1"] > .cms-editor-badge--visual {
    background: rgba(255, 217, 26, .96);
}

body[data-cms-preview="1"] [data-cms-node].cms-node-selected {
    outline: 3px solid #ff7a20 !important;
    outline-offset: 4px;
}

body[data-cms-preview="1"] [contenteditable="true"]:focus {
    outline: 3px solid #ff7a20 !important;
    outline-offset: 4px;
}

body[data-cms-preview="1"] a,
body[data-cms-preview="1"] button {
    cursor: pointer;
}

body[data-cms-preview="1"] [data-cms-managed-item] [data-cms-node] {
    outline: 0 !important;
    cursor: pointer;
}

@media (max-width: 767px) {
    [data-cms-swipe="0"] .mini-track,
    [data-cms-swipe="0"] .card-rail,
    [data-cms-swipe="0"] .cms-media-gallery-track {
        grid-template-columns: 1fr !important;
    }

    .cms-media-gallery-nav {
        width: 36px;
        height: 36px;
    }

    .article-hero-card,
    .article-hero-card img {
        min-height: 280px;
    }
}

/* Hero artwork media: ornamen di belakang tetap utuh; hanya cover/buku yang menjadi swipe. */
.cms-artwork-gallery {
    overflow: hidden !important;
}
.cms-artwork-gallery .cms-media-gallery-track,
.cms-artwork-gallery .cms-media-gallery-slide {
    width: 100% !important;
    height: 100% !important;
}
.cms-artwork-gallery .cms-artwork-gallery-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: var(--cms-crop-x, 50%) var(--cms-crop-y, 50%) !important;
    transform: scale(var(--cms-crop-scale, 1)) !important;
    transform-origin: var(--cms-crop-x, 50%) var(--cms-crop-y, 50%) !important;
}

/* Mode editor ringan: tampilan tetap sama, tetapi pekerjaan animasi dan media berat dimatikan di iframe builder. */
html[data-cms-builder="1"] {
    scroll-behavior: auto !important;
}

html[data-cms-builder="1"] *,
html[data-cms-builder="1"] *::before,
html[data-cms-builder="1"] *::after {
    animation-play-state: paused !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
}

html[data-cms-builder="1"] .reveal {
    opacity: 1 !important;
    transform: none !important;
}

/*
 * Judul hero memakai animasi `heroLine` dengan opacity: 0 sebagai frame awal.
 * Animasi memang dijeda di builder agar preview tetap ringan, tetapi akibatnya
 * setiap baris judul membeku dalam keadaan transparan. Paksa state akhirnya
 * hanya di iframe builder; animasi landing publik tetap tidak berubah.
 */
html[data-cms-builder="1"] .hero-title .line {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

html[data-cms-builder="1"] .cursor,
html[data-cms-builder="1"] .scroll-progress {
    display: none !important;
}

html[data-cms-builder="1"] main > [data-cms-section] {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}

html[data-cms-builder="1"] [data-video],
html[data-cms-builder="1"] video {
    cursor: pointer;
}

html[data-cms-builder="1"] [data-video] iframe {
    pointer-events: none !important;
}

body[data-cms-preview="1"] [data-video][data-cms-node]:hover {
    outline: 3px dashed #7657ff !important;
    outline-offset: 4px;
}

body[data-cms-preview="1"] [data-video][data-cms-node].cms-node-selected {
    outline: 4px solid #ff7a20 !important;
    outline-offset: 4px;
}


/* ==========================================================
   BUILDER PREVIEW — opening selalu ditampilkan pada state akhir
   (video hero), bukan frame animasi kata. Landing publik tetap
   memakai opening.js dan animasi aslinya.
   ========================================================== */
html[data-cms-builder="1"] .absa-opening[data-cms-section] {
    position: relative !important;
    inset: auto !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 620px !important;
    overflow: hidden !important;
    content-visibility: visible !important;
    contain: layout paint !important;
    background: #17243c !important;
}

html[data-cms-builder="1"] .absa-opening::before,
html[data-cms-builder="1"] .absa-opening__word-stage,
html[data-cms-builder="1"] .absa-opening__lockup-side,
html[data-cms-builder="1"] .absa-opening__skip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

html[data-cms-builder="1"] .absa-opening__stage,
html[data-cms-builder="1"] .absa-opening__lockup {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

html[data-cms-builder="1"] .absa-opening__video-shell {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

html[data-cms-builder="1"] .absa-opening__video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

html[data-cms-builder="1"] .absa-opening__video-ui {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none !important;
}

html[data-cms-builder="1"] .absa-opening__video-controls {
    pointer-events: none !important;
}

html[data-cms-builder="1"] .absa-opening__scroll-cue {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none !important;
}

html[data-cms-builder="1"] .absa-opening__grain {
    opacity: .08 !important;
    animation: none !important;
    transform: none !important;
}

/* Data master cards always point to their own slug detail. */
.cms-card-detail-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.cms-card-detail-link:hover {
    color: inherit;
}

.portfolio-item .cms-card-detail-link {
    display: flex;
    flex-direction: column;
}

.cms-card-detail-cta,
.cms-related-card .story-card-body > span {
    display: inline-block;
    margin-top: auto;
    padding-top: .85rem;
    color: var(--orange);
    font-size: .72rem;
    font-weight: 900;
}

.gallery-shot > .cms-card-detail-link {
    position: absolute;
    inset: 0;
}

.gallery-shot > .cms-card-detail-link > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-shot > .cms-card-detail-link > span {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
}

.cms-detail-hero .hero-photo-main img,
.cms-detail-hero .hero-photo-float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.8rem);
    margin-top: clamp(1.5rem, 3vw, 2.8rem);
}

.cms-related-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.cms-related-card > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.cms-related-card .story-card-body {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.footer-contact-chat {
    margin-top: .55rem;
}

@media (max-width: 767px) {
    .cms-related-grid {
        grid-template-columns: 1fr;
    }
}


/* Landing Page inspector audit highlight. Only activated inside the CMS preview. */
.cms-display-audit-highlight {
    position: relative;
    z-index: 12;
    outline: 4px solid #ff7a1a !important;
    outline-offset: 4px;
    border-radius: 8px;
    box-shadow: 0 0 0 7px rgba(255, 122, 26, .18) !important;
    animation: cmsDisplayAuditPulse .9s ease-in-out infinite alternate;
}

@keyframes cmsDisplayAuditPulse {
    from { outline-offset: 3px; }
    to { outline-offset: 7px; }
}

/* CMS controls persisted from Landing Page Builder. */
[data-cms-section].cms-section-custom-background {
    background-color: var(--cms-section-background) !important;
}

[data-cms-element-hidden="1"] {
    display: none !important;
}

/* Adaptive section theme — keeps Mata Yearbook accents readable after admin changes a section color. */
[data-cms-section].cms-section-custom-background {
    /* Important: only replace the base color. Do not use the background shorthand here,
       otherwise existing radial/linear gradients, blur accents and texture layers vanish. */
    background-color: var(--cms-section-background) !important;
}

/* IMPORTANT: scene ornaments are part of Mata Yearbook's visual identity.
   A custom section background/accent must NEVER repaint these colourful assets.
   Their original --orn-bg / --orn-ink values from style.css + main.js stay intact.
   We only add a soft neutral separation so they remain readable on a similar bg. */
[data-cms-section].cms-section-adaptive-style .scene-shape {
    filter:
        drop-shadow(0 0 1px var(--cms-adaptive-ink))
        drop-shadow(4px 4px 0 var(--cms-adaptive-shadow));
}

/* Large MATA words are intentionally subtle watermarks. On custom backgrounds they
   use the adaptive ink with controlled opacity instead of disappearing completely. */
[data-cms-section].cms-section-adaptive-style.portfolio::after,
[data-cms-section].cms-section-adaptive-style.inner-footer::before,
[data-cms-section].cms-section-adaptive-style.login-art::before {
    color: var(--cms-adaptive-muted) !important;
}

/* Decorative artwork keeps the colours authored by the template.
   Visibility protection is handled with shadow/halo only, never recolouring. */

/* Section-level ornament switch. This does not touch real content, cards, text or media. */
[data-cms-section].cms-section-ornaments-hidden > .scene-ornaments,
[data-cms-section].cms-section-ornaments-hidden > [class*="ornament"],
[data-cms-section].cms-section-ornaments-hidden > [class*="decoration"],
[data-cms-section].cms-section-ornaments-hidden > [class*="decor-"],
[data-cms-section].cms-section-ornaments-hidden > [class*="deco-"],
[data-cms-section].cms-section-ornaments-hidden > [class*="doodle"],
[data-cms-section].cms-section-ornaments-hidden > [class*="scribble"],
[data-cms-section].cms-section-ornaments-hidden > [class*="spark"] {
    display: none !important;
}

[data-cms-section].cms-section-ornaments-hidden.portfolio::after,
[data-cms-section].cms-section-ornaments-hidden.inner-footer::before,
[data-cms-section].cms-section-ornaments-hidden.login-art::before {
    content: none !important;
}

/* Raster/SVG decorative assets cannot always be recolored safely. Give them a subtle
   adaptive edge instead, so an ornament with nearly the same color as the section
   is still visible without destroying the original artwork. */
[data-cms-section].cms-section-adaptive-style :is(
    img[class*="ornament"],
    img[class*="decor"],
    svg[class*="ornament"],
    svg[class*="decor"],
    [class*="ornament"] > img,
    [class*="decor"] > img,
    [class*="ornament"] > svg,
    [class*="decor"] > svg
) {
    filter: drop-shadow(0 0 1px var(--cms-adaptive-ink)) drop-shadow(0 4px 8px var(--cms-adaptive-shadow));
}

/* Do not push section accent variables into ornamental/decorative artwork.
   Custom accent remains available for editorial text accents and gradients only;
   ornaments keep the colours authored by the template. */

/* Preserve every authored gradient / blur when only the section background changes.
   A background choice must never replace the template's playful mint/orange/purple
   lighting with an automatically chosen dark/navy glow. Only an EXPLICIT manual
   section accent is allowed to recolor accent gradients. */
[data-cms-section].cms-section-custom-accent.hero {
    background-image:
        radial-gradient(circle at 86% 18%, rgba(var(--cms-accent-rgb), .55), transparent 24%),
        radial-gradient(circle at 14% 70%, rgba(var(--cms-accent-rgb), .18), transparent 25%) !important;
}

[data-cms-section].cms-section-custom-accent.process {
    background-image:
        radial-gradient(circle at 10% 20%, rgba(var(--cms-accent-rgb), .45), transparent 28%) !important;
}

[data-cms-section].cms-section-custom-accent.home-products {
    background-image:
        radial-gradient(circle at 82% 15%, rgba(var(--cms-accent-rgb), .24), transparent 22%) !important;
}

/* CSS-drawn circles/lines also keep their original border colour. Add a tiny
   halo only when the section background is custom, so the authored colour survives. */
[data-cms-section].cms-section-adaptive-style.intro::before,
[data-cms-section].cms-section-adaptive-style.closing::before,
[data-cms-section].cms-section-adaptive-style.closing::after {
    filter: drop-shadow(0 0 1px var(--cms-adaptive-ink));
}

/* Authored highlight colours stay exactly as designed when the BACKGROUND changes.
   They only follow --cms-accent-color after the admin explicitly changes the section
   accent. This prevents orange/yellow highlighted words from unexpectedly changing. */
[data-cms-section].cms-section-custom-accent .scribble::after,
[data-cms-section].cms-section-custom-accent .cms-title-accent--underline::after,
[data-cms-section].cms-section-custom-accent .cms-title-accent--marker::before {
    background-color: var(--cms-accent-color) !important;
}

/* Global brand logo variants + sticky social action */
img[data-site-logo-switch] {
    transition: opacity .2s ease, filter .2s ease;
}

.mata-floating-social {
    --mata-floating-bg: #25d366;
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px));
    z-index: 1120;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 2px solid rgba(23, 36, 60, .82);
    border-radius: 999px;
    color: #fff;
    background: var(--mata-floating-bg);
    box-shadow: 3px 4px 0 rgba(23, 36, 60, .92), 0 12px 28px rgba(23, 36, 60, .16);
    text-decoration: none;
    isolation: isolate;
    transform: translateZ(0);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mata-floating-social:hover,
.mata-floating-social:focus-visible {
    color: #fff;
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: 4px 6px 0 rgba(23, 36, 60, .92), 0 16px 32px rgba(23, 36, 60, .20);
}

.mata-floating-social:focus-visible {
    outline: 3px solid #fffdfa;
    outline-offset: 4px;
}

.mata-floating-social--instagram {
    --mata-floating-bg: radial-gradient(circle at 32% 105%, #ffd65a 0 22%, #ff5c65 36%, #d52b8a 58%, #6f55e8 82%, #515bd4 100%);
}
.mata-floating-social--facebook { --mata-floating-bg: #1877f2; }
.mata-floating-social--tiktok { --mata-floating-bg: #111827; }
.mata-floating-social--telegram { --mata-floating-bg: #229ed9; }
.mata-floating-social--custom { --mata-floating-bg: #ff7a20; }

.mata-floating-social-icon {
    position: relative;
    z-index: 2;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    transform-origin: 50% 70%;
}

.mata-floating-social-icon svg,
.mata-floating-social-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.mata-floating-social-icon img {
    border-radius: 50%;
    object-fit: contain;
}

.mata-floating-social-tooltip {
    position: absolute;
    right: calc(100% + 13px);
    top: 50%;
    z-index: 4;
    width: max-content;
    max-width: min(220px, 58vw);
    padding: .55rem .75rem;
    border: 1.5px solid rgba(23, 36, 60, .18);
    border-radius: 10px;
    color: #17243c;
    background: #fffdfa;
    box-shadow: 3px 4px 0 #17243c;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(8px, -50%);
    transition: opacity .2s ease, transform .2s ease;
}

.mata-floating-social:hover .mata-floating-social-tooltip,
.mata-floating-social:focus-visible .mata-floating-social-tooltip {
    opacity: 1;
    transform: translate(0, -50%);
}

.mata-floating-social--pulse::before,
.mata-floating-social--ring::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -2px;
    border: 3px solid currentColor;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.mata-floating-social--pulse::before {
    animation: mataFloatingPulse 2s ease-out infinite;
}

.mata-floating-social--ring::before {
    animation: mataFloatingRing 1.65s ease-out infinite;
}

.mata-floating-social--bounce .mata-floating-social-icon {
    animation: mataFloatingBounce 1.65s cubic-bezier(.34, 1.56, .64, 1) infinite;
}

.mata-floating-social--wiggle .mata-floating-social-icon {
    animation: mataFloatingWiggle 1.9s ease-in-out infinite;
}

.mata-floating-social--float .mata-floating-social-icon {
    animation: mataFloatingFloat 2.35s ease-in-out infinite;
}

.mata-floating-social--glow {
    animation: mataFloatingGlow 1.8s ease-in-out infinite;
}

@keyframes mataFloatingPulse {
    0%, 22% { opacity: .52; transform: scale(.92); }
    72%, 100% { opacity: 0; transform: scale(1.55); }
}

@keyframes mataFloatingRing {
    0%, 14% { opacity: .55; transform: scale(.92); }
    68%, 100% { opacity: 0; transform: scale(1.72); }
}

@keyframes mataFloatingBounce {
    0%, 74%, 100% { transform: translateY(0); }
    12% { transform: translateY(-7px); }
    24% { transform: translateY(1px); }
    36% { transform: translateY(-3px); }
}

@keyframes mataFloatingWiggle {
    0%, 68%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-13deg); }
    20% { transform: rotate(12deg); }
    30% { transform: rotate(-8deg); }
    40% { transform: rotate(7deg); }
    50% { transform: rotate(-3deg); }
}

@keyframes mataFloatingFloat {
    0%, 100% { transform: translateY(2px); }
    50% { transform: translateY(-7px); }
}

@keyframes mataFloatingGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50% { filter: drop-shadow(0 0 11px rgba(255,255,255,.86)); }
}

/* Keep the three persistent bottom-right elements from competing with each other:
   Scroll Story stays at the frame edge, social action gets its own lane, and Back to Top
   sits neatly above it only after scrolling. */
body.has-mata-floating-social .frame-label {
    right: 104px;
}

body.has-mata-floating-social .back-top {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
    width: 46px;
    height: 46px;
    box-shadow: 3px 3px 0 var(--navy);
}

body.has-mata-floating-social .back-top:hover {
    transform: translateY(-3px) rotate(-5deg);
}

@media (max-width: 980px) and (min-width: 641px) {
    .mata-floating-social {
        right: max(14px, env(safe-area-inset-right));
    }
    body.has-mata-floating-social .back-top {
        right: max(14px, env(safe-area-inset-right));
    }
    body.has-mata-floating-social .frame-label {
        right: 96px;
    }
}

@media (max-width: 640px) {
    .mata-floating-social {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
        width: 50px;
        height: 50px;
        border-width: 1.75px;
        box-shadow: 3px 3px 0 rgba(23, 36, 60, .92), 0 10px 22px rgba(23, 36, 60, .16);
    }
    .mata-floating-social-icon { width: 26px; height: 26px; }
    .mata-floating-social-tooltip { display: none; }
    body.has-mata-floating-social .back-top {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(78px, calc(env(safe-area-inset-bottom) + 78px));
        width: 42px;
        height: 42px;
        box-shadow: 3px 3px 0 var(--navy);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mata-floating-social,
    .mata-floating-social::before,
    .mata-floating-social-icon {
        animation: none !important;
    }
}


/* Scroll Story label removed globally. Keep this as a defensive rule for cached/legacy markup. */
.frame-label {
    display: none !important;
}


/* Preview khusus Konten Website > Builder Detail. */
html[data-content-builder-preview="1"],
body.content-builder-preview {
    background: #f5f3ed;
}

body.content-builder-preview {
    overflow-x: hidden;
}

body.content-builder-preview .cms-content-detail {
    min-height: 100vh;
}

body.content-builder-preview .inner-hero,
body.content-builder-preview .page-section,
body.content-builder-preview .page-cta {
    scroll-margin-top: 18px;
}

body.content-builder-preview .reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

body.content-builder-preview .cms-content-detail a {
    cursor: default;
}


body.content-builder-preview .cms-builder-media-placeholder {
    display: grid;
    place-items: center;
    min-height: 320px;
    padding: 28px;
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 230, 33, .28), transparent 28%),
        radial-gradient(circle at 80% 75%, rgba(86, 219, 205, .28), transparent 30%),
        #f7f3e8;
    color: #63717d;
    text-align: center;
    font: 800 14px/1.5 "Plus Jakarta Sans", sans-serif;
}

body.content-builder-preview .cms-builder-media-placeholder span {
    padding: 10px 14px;
    border: 1px dashed rgba(23, 36, 60, .28);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
}