.wnsp-shell,
        .wnsp-shell * {
            box-sizing: border-box;
        }

        .wnsp-shell {
            --wnsp-navy: #091a39;
            --wnsp-navy-2: #102957;
            --wnsp-orange: #ff6b35;
            --wnsp-soft: #c8d3e8;

            position: relative;
            isolation: isolate;
            width: 100%;
            min-height: 220px;
            margin: 24px 0 18px;
            overflow: hidden;
            border:
                1px solid
                rgba(66, 123, 226, .33);
            border-radius: 24px;
            background:
                linear-gradient(
                    135deg,
                    #08172f,
                    #102a59
                );
            box-shadow:
                0 16px 36px
                rgba(15, 32, 70, .14);
        }

        .wnsp-shell::before {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0;
            opacity: .14;
            background-image:
                linear-gradient(
                    rgba(110, 151, 220, .34)
                    1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(110, 151, 220, .34)
                    1px,
                    transparent 1px
                );
            background-size: 42px 42px;
            pointer-events: none;
        }

        .wnsp-stage {
            position: relative;
            z-index: 2;
            min-height: 220px;
        }

        .wnsp-slide {
            position: relative;
            display: block;
            min-height: 220px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
        }

        .wnsp-slide[hidden] {
            display: none;
        }

        .wnsp-media {
            position: absolute;
            z-index: 1;
            top: 0;
            right: 0;
            bottom: 0;
            width: 62%;
            overflow: hidden;
        }

        .wnsp-media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transform: scale(1.01);
            transition:
                transform .5s ease;
        }

        .wnsp-slide:hover
        .wnsp-media img {
            transform: scale(1.035);
        }

        .wnsp-media::before {
            content: "";
            position: absolute;
            z-index: 2;
            inset: 0;
            background:
                linear-gradient(
                    90deg,
                    #091a39 0%,
                    rgba(9, 26, 57, .91) 9%,
                    rgba(9, 26, 57, .54) 31%,
                    rgba(9, 26, 57, .08) 68%,
                    rgba(9, 26, 57, .12) 100%
                );
            pointer-events: none;
        }

        .wnsp-media::after {
            content: "";
            position: absolute;
            z-index: 2;
            inset: 0;
            background:
                linear-gradient(
                    0deg,
                    rgba(4, 13, 31, .56),
                    transparent 50%
                );
            pointer-events: none;
        }

        .wnsp-fallback {
            position: absolute;
            z-index: 0;
            inset: 0;
            background:
                radial-gradient(
                    circle at 78% 25%,
                    rgba(45, 115, 238, .42),
                    transparent 34%
                ),
                linear-gradient(
                    135deg,
                    #091a39,
                    #14366f
                );
        }

        .wnsp-fallback::after {
            content: "W";
            position: absolute;
            right: 4%;
            bottom: -42px;
            color:
                rgba(255, 255, 255, .045);
            font-size: 235px;
            font-weight: 950;
            line-height: 1;
        }

        .wnsp-shade {
            position: absolute;
            z-index: 2;
            inset: 0;
            background:
                linear-gradient(
                    90deg,
                    rgba(7, 20, 45, .99) 0%,
                    rgba(7, 20, 45, .96) 31%,
                    rgba(7, 20, 45, .67) 48%,
                    rgba(7, 20, 45, .04) 77%
                );
            pointer-events: none;
        }

        .wnsp-copy {
            position: relative;
            z-index: 4;
            width: 55%;
            min-height: 220px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding:
                49px
                28px
                21px;
        }

        .wnsp-eyebrow {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            margin-bottom: 8px;
        }

        .wnsp-status {
            display: inline-flex;
            min-height: 25px;
            align-items: center;
            gap: 7px;
            padding: 4px 10px;
            border:
                1px solid
                rgba(255, 107, 53, .55);
            border-radius: 999px;
            background:
                rgba(11, 25, 52, .48);
            color: #fff;
            font-size: 7px;
            font-weight: 900;
            letter-spacing: .045em;
            text-transform: uppercase;
            backdrop-filter: blur(8px);
        }

        .wnsp-status-dot {
            width: 7px;
            height: 7px;
            flex: 0 0 auto;
            border-radius: 999px;
            background:
                var(--wnsp-orange);
            box-shadow:
                0 0 0 5px
                rgba(255, 107, 53, .12);
        }

        .wnsp-editorial {
            color:
                rgba(232, 239, 251, .72);
            font-size: 7px;
            font-weight: 850;
            letter-spacing: .09em;
            text-transform: uppercase;
        }

        .wnsp-title {
            display: -webkit-box;
            max-width: 495px;
            margin: 0;
            overflow: hidden;
            color: #fff;
            font-size:
                clamp(
                    24px,
                    3.1vw,
                    32px
                );
            font-weight: 950;
            line-height: 1.02;
            letter-spacing: -.045em;
            text-wrap: balance;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .wnsp-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px 11px;
            margin-top: 11px;
            color:
                rgba(224, 233, 248, .77);
            font-size: 8px;
            font-weight: 750;
        }

        .wnsp-meta-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .wnsp-meta-dot {
            width: 4px;
            height: 4px;
            border-radius: 999px;
            background:
                var(--wnsp-orange);
        }

        .wnsp-cta {
            display: inline-flex;
            width: fit-content;
            min-height: 31px;
            align-items: center;
            gap: 8px;
            margin-top: 13px;
            padding: 0 12px;
            border:
                1px solid
                rgba(255, 107, 53, .72);
            border-radius: 999px;
            background:
                rgba(8, 24, 52, .56);
            color: #fff;
            font-size: 8px;
            font-weight: 900;
            backdrop-filter: blur(8px);
            transition:
                background .18s ease,
                transform .18s ease;
        }

        .wnsp-slide:hover
        .wnsp-cta {
            background:
                rgba(255, 107, 53, .16);
            transform:
                translateX(2px);
        }

        .wnsp-topbar {
            position: absolute;
            z-index: 8;
            top: 16px;
            left: 28px;
            right: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            pointer-events: none;
        }

        .wnsp-brand {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color:
                rgba(235, 241, 251, .80);
            font-size: 7px;
            font-weight: 900;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .wnsp-brand::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background:
                var(--wnsp-orange);
        }

        .wnsp-tools {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            pointer-events: auto;
        }

        .wnsp-all {
            display: inline-flex;
            min-height: 27px;
            align-items: center;
            padding: 0 9px;
            border:
                1px solid
                rgba(255, 255, 255, .18);
            border-radius: 999px;
            background:
                rgba(8, 23, 49, .44);
            color:
                rgba(255, 255, 255, .88);
            font-size: 7px;
            font-weight: 850;
            text-decoration: none;
            backdrop-filter: blur(8px);
        }

        .wnsp-all:hover,
        .wnsp-all:focus-visible {
            background:
                rgba(255, 255, 255, .12);
            outline: none;
        }

        .wnsp-position {
            color:
                rgba(255, 255, 255, .64);
            font-size: 7px;
            font-weight: 800;
        }

        .wnsp-controls {
            display: inline-flex;
            gap: 4px;
        }

        .wnsp-control {
            width: 27px;
            height: 27px;
            display: grid;
            place-items: center;
            padding: 0;
            border:
                1px solid
                rgba(255, 255, 255, .20);
            border-radius: 999px;
            background:
                rgba(8, 23, 49, .46);
            color: #fff;
            cursor: pointer;
            font: inherit;
            font-size: 14px;
            line-height: 1;
            backdrop-filter: blur(8px);
        }

        .wnsp-control:hover,
        .wnsp-control:focus-visible {
            border-color:
                rgba(255, 107, 53, .66);
            background:
                rgba(255, 107, 53, .13);
            outline: none;
        }

        @media (max-width: 760px) {
            .wnsp-shell,
            .wnsp-stage,
            .wnsp-slide {
                min-height: 250px;
            }

            .wnsp-shell {
                margin: 20px 0 15px;
                border-radius: 19px;
            }

            .wnsp-media {
                inset: 0;
                width: 100%;
            }

            .wnsp-media img {
                opacity: .78;
            }

            .wnsp-media::before {
                background:
                    linear-gradient(
                        90deg,
                        rgba(6, 18, 42, .96) 0%,
                        rgba(6, 18, 42, .74) 52%,
                        rgba(6, 18, 42, .20) 100%
                    );
            }

            .wnsp-media::after {
                background:
                    linear-gradient(
                        0deg,
                        rgba(5, 16, 38, .94) 0%,
                        rgba(5, 16, 38, .18) 68%
                    );
            }

            .wnsp-shade {
                background:
                    linear-gradient(
                        90deg,
                        rgba(6, 18, 42, .94),
                        rgba(6, 18, 42, .48) 78%,
                        rgba(6, 18, 42, .16)
                    );
            }

            .wnsp-copy {
                width: 100%;
                min-height: 250px;
                justify-content: flex-end;
                padding:
                    73px
                    17px
                    18px;
            }

            .wnsp-title {
                max-width: 90%;
                font-size:
                    clamp(
                        22px,
                        7vw,
                        27px
                    );
            }

            .wnsp-editorial {
                display: none;
            }

            .wnsp-status {
                min-height: 23px;
                padding: 3px 8px;
                font-size: 6.5px;
            }

            .wnsp-meta {
                margin-top: 8px;
                font-size: 7.2px;
            }

            .wnsp-cta {
                min-height: 29px;
                margin-top: 10px;
                font-size: 7px;
            }

            .wnsp-topbar {
                top: 13px;
                left: 16px;
                right: 14px;
            }

            .wnsp-brand {
                font-size: 6.5px;
            }

            .wnsp-all {
                min-height: 25px;
                font-size: 6.5px;
            }

            .wnsp-position {
                display: none;
            }

            .wnsp-control {
                width: 25px;
                height: 25px;
            }
        }

        @media (
            prefers-reduced-motion:
            reduce
        ) {
            .wnsp-media img,
            .wnsp-cta {
                transition: none;
            }
        }
    
        /*
         * wn-home-story-visual-polish-v1-1-r1
         *
         * Premium desktop finishing:
         * - judul sedikit lebih proporsional;
         * - hero lebih hidup;
         * - brand/status lebih terbaca.
         * Tinggi dan struktur tidak berubah.
         */
        @media (min-width: 761px) {
            .wnsp-title {
                font-size:
                    clamp(
                        23px,
                        2.9vw,
                        30px
                    );
                line-height: 1.025;
                letter-spacing: -.042em;
            }

            .wnsp-brand {
                color:
                    rgba(244, 248, 255, .94);
                font-size: 7.5px;
                letter-spacing: .125em;
            }

            .wnsp-brand::before {
                box-shadow:
                    0 0 0 4px
                    rgba(255, 107, 53, .09);
            }

            .wnsp-status {
                min-height: 26px;
                padding: 4px 11px;
                border-color:
                    rgba(255, 107, 53, .70);
                background:
                    rgba(8, 23, 49, .42);
                color:
                    rgba(255, 255, 255, .97);
                font-size: 7.4px;
            }

            .wnsp-editorial {
                color:
                    rgba(238, 244, 253, .84);
                font-size: 7.3px;
            }

            .wnsp-media img {
                filter:
                    brightness(1.055)
                    saturate(1.035);
            }

            .wnsp-media::before {
                background:
                    linear-gradient(
                        90deg,
                        #091a39 0%,
                        rgba(9, 26, 57, .84) 9%,
                        rgba(9, 26, 57, .43) 31%,
                        rgba(9, 26, 57, .02) 68%,
                        rgba(9, 26, 57, .045) 100%
                    );
            }

            .wnsp-media::after {
                background:
                    linear-gradient(
                        0deg,
                        rgba(4, 13, 31, .38),
                        transparent 54%
                    );
            }

            .wnsp-shade {
                background:
                    linear-gradient(
                        90deg,
                        rgba(7, 20, 45, .97) 0%,
                        rgba(7, 20, 45, .90) 30%,
                        rgba(7, 20, 45, .53) 47%,
                        rgba(7, 20, 45, .01) 77%
                    );
            }
        }