/*
             * Waktu.News Special Moment
             * Public Renderer V1D.
             */

            .wnsm {
                position: relative;
                margin: 12px 0 10px;
                font-family: inherit;
            }

            .wnsm__poster {
                position: relative;
                isolation: isolate;
                display: grid;
                grid-template-columns:
                    108px
                    minmax(0, 1fr)
                    auto
                    auto;
                align-items: center;
                gap: 20px;
                min-height: 120px;
                padding: 17px 20px;
                overflow: hidden;
                border: 1px solid
                    color-mix(
                        in srgb,
                        var(--wnsm-primary) 18%,
                        #dfe5ee
                    );
                border-radius: 18px;
                background:
                    linear-gradient(
                        115deg,
                        var(--wnsm-secondary) 0%,
                        #ffffff 55%,
                        color-mix(
                            in srgb,
                            var(--wnsm-primary) 7%,
                            #ffffff
                        ) 100%
                    );
                box-shadow:
                    0 10px 30px
                    rgba(18, 40, 79, 0.07);
            }

            .wnsm__poster::before {
                content: "";
                position: absolute;
                z-index: -2;
                inset: 0 auto 0 0;
                width: 5px;
                background:
                    var(--wnsm-primary);
            }

            .wnsm__poster::after {
                content: "";
                position: absolute;
                z-index: -3;
                width: 330px;
                height: 330px;
                top: -210px;
                right: -70px;
                border-radius: 50%;
                background:
                    var(--wnsm-primary);
                opacity: 0.055;
            }

            .wnsm__abstract {
                position: absolute;
                z-index: -2;
                inset: 0;
                overflow: hidden;
                pointer-events: none;
            }

            .wnsm__orb {
                position: absolute;
                display: block;
                border-radius: 999px;
                border: 1px solid
                    var(--wnsm-primary);
                opacity: 0.10;
            }

            .wnsm__orb--one {
                width: 120px;
                height: 120px;
                right: 18%;
                top: -62px;
            }

            .wnsm__orb--two {
                width: 76px;
                height: 76px;
                right: 7%;
                bottom: -38px;
            }

            .wnsm__line {
                position: absolute;
                display: block;
                height: 2px;
                width: 210px;
                background:
                    var(--wnsm-primary);
                opacity: 0.075;
                transform:
                    rotate(-22deg);
            }

            .wnsm__line--one {
                right: 11%;
                top: 22px;
            }

            .wnsm__line--two {
                right: 19%;
                bottom: 18px;
            }

            .wnsm__spark {
                position: absolute;
                width: 54px;
                height: 54px;
                right: 31%;
                top: 50%;
                transform:
                    translateY(-50%);
                color:
                    var(--wnsm-primary);
                opacity: 0.045;
            }

            /*
             * Built-in national artwork.
             * Hanya aktif bila tidak ada artwork upload.
             */
            .wnsm__national-art {
                position: absolute;
                z-index: -1;
                width: min(47%, 520px);
                height: 100%;
                right: -12px;
                bottom: -1px;
                overflow: hidden;
                color:
                    var(--wnsm-primary);
                pointer-events: none;
                opacity: 0.23;
            }

            .wnsm__national-art svg {
                display: block;
                width: 100%;
                height: 100%;
            }

            .wnsm__national-ribbon {
                fill: none;
                stroke:
                    currentColor;
                stroke-linecap: round;
            }

            .wnsm__national-ribbon--strong {
                stroke-width: 25;
                opacity: 0.42;
            }

            .wnsm__national-ribbon--soft {
                stroke-width: 15;
                opacity: 0.19;
            }

            .wnsm__national-ribbon--fine {
                stroke-width: 7;
                opacity: 0.20;
            }

            .wnsm__national-circle {
                fill: none;
                stroke:
                    currentColor;
                stroke-width: 2;
                opacity: 0.18;
            }

            .wnsm__national-circle--inner {
                opacity: 0.11;
            }

            .wnsm__date {
                position: relative;
                z-index: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                min-width: 0;
                padding-right: 18px;
                border-right: 1px solid
                    rgba(
                        20,
                        38,
                        80,
                        0.12
                    );
            }

            .wnsm__date-number,
            .wnsm__date-symbol {
                display: block;
                margin: 0;
                font-size:
                    clamp(
                        44px,
                        4.6vw,
                        64px
                    );
                line-height: 0.82;
                letter-spacing:
                    -0.065em;
                font-weight: 900;
                color:
                    var(--wnsm-primary);
            }

            .wnsm__date-symbol {
                line-height: 1;
                letter-spacing: 0;
            }

            .wnsm__date-month {
                display: block;
                margin-top: 8px;
                font-size: 11px;
                line-height: 1;
                letter-spacing:
                    0.12em;
                font-weight: 900;
                color:
                    var(--wnsm-accent);
            }

            .wnsm__date-year {
                display: block;
                margin-top: 4px;
                font-size: 10px;
                line-height: 1;
                letter-spacing:
                    0.08em;
                font-weight: 700;
                color: #778196;
            }

            .wnsm__copy {
                position: relative;
                z-index: 1;
                min-width: 0;
            }

            .wnsm__eyebrow {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 7px;
                margin-bottom: 7px;
            }

            .wnsm__label,
            .wnsm__countdown {
                display: inline-flex;
                align-items: center;
                min-height: 23px;
                padding: 4px 9px;
                border-radius: 999px;
                font-size: 10px;
                line-height: 1;
                letter-spacing:
                    0.055em;
                font-weight: 900;
            }

            .wnsm__label {
                color: #ffffff;
                background:
                    var(--wnsm-primary);
            }

            .wnsm__countdown {
                color:
                    var(--wnsm-accent);
                border: 1px solid
                    rgba(
                        20,
                        38,
                        80,
                        0.12
                    );
                background:
                    rgba(
                        255,
                        255,
                        255,
                        0.84
                    );
            }

            .wnsm__title {
                margin: 0;
                max-width: 780px;
                font-size:
                    clamp(
                        20px,
                        2.25vw,
                        30px
                    );
                line-height: 1.08;
                letter-spacing:
                    -0.035em;
                font-weight: 900;
                color:
                    var(--wnsm-accent);
                text-wrap: balance;
            }

            .wnsm__subtitle {
                display:
                    -webkit-box;
                margin: 7px 0 0;
                max-width: 760px;
                overflow: hidden;
                -webkit-box-orient:
                    vertical;
                -webkit-line-clamp: 2;
                font-size: 13px;
                line-height: 1.45;
                color: #5d6678;
            }

            .wnsm__artwork {
                position: relative;
                z-index: 1;
                width: 116px;
                height: 84px;
                overflow: hidden;
                border-radius: 14px;
                box-shadow:
                    0 8px 22px
                    rgba(
                        18,
                        40,
                        79,
                        0.10
                    );
            }

            .wnsm__artwork picture,
            .wnsm__artwork img {
                display: block;
                width: 100%;
                height: 100%;
            }

            .wnsm__artwork img {
                object-fit: cover;
            }

            .wnsm__action {
                position: relative;
                z-index: 3;
            }

            .wnsm__cta {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-height: 42px;
                padding: 0 15px;
                border: 1px solid
                    color-mix(
                        in srgb,
                        var(--wnsm-primary) 28%,
                        #dce2eb
                    );
                border-radius: 12px;
                background:
                    rgba(
                        255,
                        255,
                        255,
                        0.90
                    );
                color:
                    var(--wnsm-accent);
                font-size: 12px;
                line-height: 1;
                font-weight: 850;
                text-decoration: none;
                white-space: nowrap;
                box-shadow:
                    0 4px 15px
                    rgba(
                        18,
                        40,
                        79,
                        0.04
                    );
                transition:
                    transform 160ms ease,
                    background-color 160ms ease,
                    border-color 160ms ease;
            }

            .wnsm__cta svg {
                width: 16px;
                height: 16px;
                flex: 0 0 auto;
            }

            .wnsm__cta:hover {
                transform:
                    translateY(-1px);
                background: #ffffff;
                border-color:
                    var(--wnsm-primary);
            }

            /*
             * Compact Moment.
             */
            .wnsm--compact
            .wnsm__poster {
                grid-template-columns:
                    78px
                    minmax(0, 1fr)
                    auto
                    auto;
                gap: 15px;
                min-height: 94px;
                padding-top: 13px;
                padding-bottom: 13px;
            }

            .wnsm--compact
            .wnsm__date-number {
                font-size: 42px;
            }

            .wnsm--compact
            .wnsm__subtitle {
                display: none;
            }

            .wnsm--compact
            .wnsm__title {
                font-size:
                    clamp(
                        18px,
                        1.9vw,
                        24px
                    );
            }

            .wnsm--compact
            .wnsm__artwork {
                width: 88px;
                height: 64px;
            }

            /*
             * Minimal Accent.
             */
            .wnsm--minimal
            .wnsm__poster {
                grid-template-columns:
                    auto
                    minmax(0, 1fr)
                    auto;
                gap: 14px;
                min-height: 66px;
                padding: 10px 14px;
                border-radius: 14px;
                box-shadow: none;
            }

            .wnsm--minimal
            .wnsm__date {
                min-width: 58px;
                padding-right: 12px;
            }

            .wnsm--minimal
            .wnsm__date-number {
                font-size: 32px;
            }

            .wnsm--minimal
            .wnsm__date-month {
                margin-top: 5px;
                font-size: 9px;
            }

            .wnsm--minimal
            .wnsm__date-year,
            .wnsm--minimal
            .wnsm__subtitle,
            .wnsm--minimal
            .wnsm__artwork,
            .wnsm--minimal
            .wnsm__spark,
            .wnsm--minimal
            .wnsm__national-art {
                display: none;
            }

            .wnsm--minimal
            .wnsm__eyebrow {
                margin-bottom: 3px;
            }

            .wnsm--minimal
            .wnsm__label,
            .wnsm--minimal
            .wnsm__countdown {
                min-height: 20px;
                padding: 3px 7px;
                font-size: 9px;
            }

            .wnsm--minimal
            .wnsm__title {
                font-size: 16px;
                line-height: 1.2;
            }

            /*
             * Theme nuances.
             */
            .wnsm--theme-national
            .wnsm__poster {
                background:
                    linear-gradient(
                        115deg,
                        #ffffff 0%,
                        #ffffff 50%,
                        #fff7f7 100%
                    );
            }

            .wnsm--theme-ramadan
            .wnsm__poster,
            .wnsm--theme-eid
            .wnsm__poster {
                box-shadow:
                    0 10px 30px
                    rgba(
                        15,
                        107,
                        88,
                        0.08
                    );
            }

            .wnsm--theme-christmas
            .wnsm__poster {
                box-shadow:
                    0 10px 30px
                    rgba(
                        139,
                        38,
                        53,
                        0.08
                    );
            }

            .wnsm--theme-election
            .wnsm__poster,
            .wnsm--theme-press
            .wnsm__poster {
                box-shadow:
                    0 10px 30px
                    rgba(
                        20,
                        38,
                        80,
                        0.08
                    );
            }

            /*
             * Tablet.
             */
            @media (max-width: 980px) {
                .wnsm__poster {
                    grid-template-columns:
                        94px
                        minmax(0, 1fr)
                        auto;
                    gap: 16px;
                }

                .wnsm__artwork {
                    display: none;
                }

                .wnsm__spark {
                    right: 16%;
                }

                .wnsm__national-art {
                    width: 47%;
                    opacity: 0.18;
                }
            }

            /*
             * Mobile.
             *
             * CTA menjadi icon action supaya
             * judul mendapatkan ruang lebih besar.
             */
            @media (max-width: 680px) {
                .wnsm {
                    margin: 8px 0 8px;
                }

                .wnsm__poster {
                    display: grid;
                    grid-template-columns:
                        58px
                        minmax(0, 1fr);
                    gap: 10px;
                    min-height: 88px;
                    padding:
                        11px
                        12px
                        11px
                        14px;
                    border-radius: 15px;
                    box-shadow:
                        0 6px 18px
                        rgba(
                            18,
                            40,
                            79,
                            0.055
                        );
                }

                .wnsm__poster::before {
                    width: 4px;
                }

                .wnsm__poster::after {
                    width: 185px;
                    height: 185px;
                    top: -125px;
                    right: -68px;
                }

                .wnsm__date {
                    padding-right: 9px;
                }

                .wnsm__date-number,
                .wnsm__date-symbol {
                    font-size: 34px;
                    line-height: 0.85;
                }

                .wnsm__date-month {
                    max-width: 50px;
                    margin-top: 6px;
                    overflow: hidden;
                    font-size: 8.5px;
                    line-height: 1.05;
                    text-overflow:
                        ellipsis;
                    white-space:
                        nowrap;
                }

                .wnsm__date-year {
                    margin-top: 3px;
                    font-size: 8.5px;
                }

                .wnsm__copy {
                    padding-right: 38px;
                }

                .wnsm__eyebrow {
                    gap: 5px;
                    margin-bottom: 4px;
                }

                .wnsm__label,
                .wnsm__countdown {
                    min-height: 19px;
                    padding: 3px 6px;
                    font-size: 8px;
                    letter-spacing:
                        0.035em;
                }

                .wnsm__title {
                    max-width: none;
                    font-size: 15.5px;
                    line-height: 1.10;
                    letter-spacing:
                        -0.025em;
                    text-wrap: pretty;
                }

                .wnsm__subtitle {
                    margin-top: 4px;
                    max-width: none;
                    -webkit-line-clamp: 1;
                    font-size: 10px;
                    line-height: 1.25;
                }

                .wnsm__action {
                    position: absolute;
                    z-index: 4;
                    right: 11px;
                    top: 50%;
                    transform:
                        translateY(-50%);
                }

                .wnsm__cta {
                    width: 32px;
                    height: 32px;
                    min-height: 32px;
                    padding: 0;
                    border-radius: 999px;
                    gap: 0;
                    background:
                        rgba(
                            255,
                            255,
                            255,
                            0.94
                        );
                }

                .wnsm__cta span {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip:
                        rect(
                            0,
                            0,
                            0,
                            0
                        );
                    white-space:
                        nowrap;
                    border: 0;
                }

                .wnsm__cta svg {
                    width: 14px;
                    height: 14px;
                }

                .wnsm__orb--one {
                    width: 82px;
                    height: 82px;
                    right: -14px;
                    top: -41px;
                }

                .wnsm__orb--two {
                    display: none;
                }

                .wnsm__line {
                    width: 104px;
                }

                .wnsm__spark {
                    width: 34px;
                    height: 34px;
                    right: 5px;
                }

                /*
                 * National mobile fallback:
                 * hanya pita merah-putih sangat halus.
                 */
                .wnsm__national-art {
                    width: 58%;
                    height: 100%;
                    right: -36px;
                    bottom: -9px;
                    opacity: 0.16;
                }

                /*
                 * Compact mobile.
                 */
                .wnsm--compact
                .wnsm__poster {
                    grid-template-columns:
                        52px
                        minmax(0, 1fr);
                    gap: 9px;
                    min-height: 76px;
                    padding-top: 9px;
                    padding-bottom: 9px;
                }

                .wnsm--compact
                .wnsm__date-number {
                    font-size: 30px;
                }

                .wnsm--compact
                .wnsm__title {
                    font-size: 14.5px;
                }

                /*
                 * Minimal mobile.
                 */
                .wnsm--minimal
                .wnsm__poster {
                    grid-template-columns:
                        48px
                        minmax(0, 1fr);
                    min-height: 58px;
                    padding:
                        8px
                        11px
                        8px
                        12px;
                }

                .wnsm--minimal
                .wnsm__date {
                    min-width: 0;
                    padding-right: 7px;
                }

                .wnsm--minimal
                .wnsm__date-number {
                    font-size: 26px;
                }

                .wnsm--minimal
                .wnsm__eyebrow {
                    display: none;
                }

                .wnsm--minimal
                .wnsm__title {
                    font-size: 13.5px;
                }

                .wnsm--minimal
                .wnsm__copy {
                    padding-right: 36px;
                }
            }

            /*
             * HP sangat sempit.
             */
            @media (max-width: 380px) {
                .wnsm__poster {
                    grid-template-columns:
                        54px
                        minmax(0, 1fr);
                    gap: 8px;
                    padding-left: 12px;
                    padding-right: 10px;
                }

                .wnsm__date-number,
                .wnsm__date-symbol {
                    font-size: 32px;
                }

                .wnsm__label,
                .wnsm__countdown {
                    font-size: 7.5px;
                    padding-left: 5px;
                    padding-right: 5px;
                }

                .wnsm__title {
                    font-size: 14.5px;
                }

                .wnsm__subtitle {
                    font-size: 9.5px;
                }

                .wnsm__action {
                    right: 9px;
                }

                .wnsm__cta {
                    width: 30px;
                    height: 30px;
                    min-height: 30px;
                }
            }

            @media (
                prefers-reduced-motion:
                reduce
            ) {
                .wnsm__cta {
                    transition: none;
                }
            }