/* ==========================================================================
   KS LP Hero 4 Stylesheet
   ========================================================================== */

.kslp-hero4-block {
    position: relative;
    width: 100%;
    padding: var(--kslp-h4-pad-top, 80px) 0 var(--kslp-h4-pad-bottom, 80px) 0;
    overflow: hidden;
    box-sizing: border-box;
}

.kslp-hero4-block--full {
    position: relative;
    left: auto !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.kslp-hero4-block--full .kslp-hero4-container {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.kslp-hero4-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 20px;
    gap: 48px;
    box-sizing: border-box;
}

.kslp-hero4-content {
    flex: 1.1;
    min-width: 0;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
}

.kslp-hero4-heading {
    margin: 0 0 20px 0;
    line-height: 1.15;
    font-weight: 800;
    width: 100%;
    box-sizing: border-box;
}

.kslp-hero4-heading mark.kslp-heading-highlight,
.kslp-hero4-heading span.kslp-heading-highlight {
    background-color: transparent;
    color: inherit;
    padding: 0 2px;
    border-radius: 4px;
}

.kslp-hero4-sub1 {
    font-weight: 700;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kslp-hero4-sub2 {
    margin-bottom: 30px;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
}

.kslp-hero4-list {
    margin-bottom: 35px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kslp-hero4-list--2cols {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: stretch;
}

.kslp-hero4-list--2cols .kslp-hero4-item {
    width: calc(50% - 12px);
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .kslp-hero4-list--2cols .kslp-hero4-item {
        width: 100%;
    }
}

.kslp-hero4-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    box-sizing: border-box;
    width: fit-content;
}

.kslp-hero4-item--has-bg {
    padding: 8px 16px;
}

.kslp-hero4-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kslp-hero4-item-text {
    flex: 1;
}

/* CTA Buttons */
.kslp-hero4-cta-wrap {
    margin-top: 10px;
    margin-bottom: 24px;
}

.kslp-hero4-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.kslp-hero4-cta.kslp-button--anim-glow:hover {
    box-shadow: 0 0 30px rgba(79, 70, 229, 0.7), 0 10px 25px rgba(0, 0, 0, 0.2);
}

.kslp-hero4-cta.kslp-button--anim-pulse {
    animation: kslp-hero4-btn-pulse 2s infinite;
}
.kslp-hero4-cta.kslp-button--anim-pulse:hover {
    animation: none;
    transform: scale(1.03);
}

@keyframes kslp-hero4-btn-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5);
    }
    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 14px rgba(79, 70, 229, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
}

.kslp-hero4-cta.kslp-button--anim-slide-icon:hover .kslp-hero4-cta-icon {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.3s ease;
}
.kslp-hero4-cta.kslp-button--anim-slide-icon:hover .kslp-hero4-cta-content {
    transform: translateX(4px);
    transition: transform 0.3s ease;
}

.kslp-hero4-cta.kslp-button--anim-shimmer::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    transform: rotate(25deg);
    transition: all 0.6s ease;
}
.kslp-hero4-cta.kslp-button--anim-shimmer:hover::after {
    left: 130%;
}

.kslp-hero4-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kslp-hero4-cta-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.kslp-hero4-cta-main {
    display: block;
    line-height: 1.2;
}

.kslp-hero4-cta-sub {
    display: block;
    line-height: 1.3;
    margin-top: 2px;
}

/* Badges Repeater */
.kslp-hero4-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}

.kslp-hero4-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-weight: 600;
    line-height: 1.3;
    box-sizing: border-box;
}

.kslp-hero4-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kslp-hero4-badge-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.kslp-hero4-badge-text {
    display: block;
    font-weight: 700;
    line-height: 1.2;
}

.kslp-hero4-badge-subtext {
    display: block;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 2px;
}

/* ==========================================================================
   Dual-Track Image Vertical Slider (Marquee GPU)
   ========================================================================== */

.kslp-hero4-slider-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
    box-sizing: border-box;
    height: var(--kslp-h4-height, 540px);
    max-width: calc(var(--kslp-h4-col-w, 220px) * 2 + var(--kslp-h4-gap, 16px));
}

.kslp-hero4-slider-wrap--fade {
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.02) 2%,
        rgba(0, 0, 0, 0.08) 5%,
        rgba(0, 0, 0, 0.25) 10%,
        rgba(0, 0, 0, 0.55) 16%,
        rgba(0, 0, 0, 0.85) 22%,
        #000000 28%,
        #000000 72%,
        rgba(0, 0, 0, 0.85) 78%,
        rgba(0, 0, 0, 0.55) 84%,
        rgba(0, 0, 0, 0.25) 90%,
        rgba(0, 0, 0, 0.08) 95%,
        rgba(0, 0, 0, 0.02) 98%,
        transparent 100%
    );
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.02) 2%,
        rgba(0, 0, 0, 0.08) 5%,
        rgba(0, 0, 0, 0.25) 10%,
        rgba(0, 0, 0, 0.55) 16%,
        rgba(0, 0, 0, 0.85) 22%,
        #000000 28%,
        #000000 72%,
        rgba(0, 0, 0, 0.85) 78%,
        rgba(0, 0, 0, 0.55) 84%,
        rgba(0, 0, 0, 0.25) 90%,
        rgba(0, 0, 0, 0.08) 95%,
        rgba(0, 0, 0, 0.02) 98%,
        transparent 100%
    );
}

.kslp-hero4-slider-inner {
    display: flex;
    flex-direction: row;
    gap: var(--kslp-h4-gap, 16px);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.kslp-hero4-track-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kslp-h4-gap, 16px);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation-duration: var(--kslp-h4-speed, 35s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Desktop Animations */
@media screen and (min-width: 768px) {
    .kslp-hero4-track-col--1 {
        animation-name: kslp-hero4-col-up;
    }
    .kslp-hero4-track-col--2 {
        animation-name: kslp-hero4-col-down;
    }
}

@keyframes kslp-hero4-col-up {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes kslp-hero4-col-down {
    from {
        transform: translate3d(0, -50%, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Pause on hover */
.kslp-hero4-slider-wrap[data-pause="true"]:hover .kslp-hero4-track-col {
    animation-play-state: paused !important;
}

/* ==========================================================================
   Tilted / Slanted Slider Mode (BRIX Style)
   ========================================================================== */
.kslp-hero4-slider-wrap--tilted {
    overflow: visible;
}

@media screen and (min-width: 768px) {
    /* Mode Fade Edges: slider menjangkau hingga ke batas atas block (top: 0) agar pudar ke atas mulus */
    .kslp-hero4-block:not(.kslp-hero4-block--center) .kslp-hero4-slider-wrap--fade {
        align-self: flex-start;
        margin-top: calc(-1 * var(--kslp-h4-pad-top, 80px));
        height: calc(var(--kslp-h4-height, 540px) + var(--kslp-h4-pad-top, 80px));
    }

    .kslp-hero4-block:not(.kslp-hero4-block--center) .kslp-hero4-slider-wrap--fade.kslp-hero4-slider-wrap--tilted {
        height: calc(var(--kslp-h4-height, 540px) + var(--kslp-h4-pad-top, 80px) + 60px);
    }

    .kslp-hero4-slider-wrap--tilted {
        max-width: none;
        width: calc(var(--kslp-h4-col-w, 220px) * 2 + var(--kslp-h4-gap, 16px) + 320px);
        margin-right: -160px;
        margin-left: -60px;
        padding: 0 160px;
        height: calc(var(--kslp-h4-height, 540px) + 60px);
    }

    .kslp-hero4-slider-wrap--tilted .kslp-hero4-slider-inner {
        width: calc(var(--kslp-h4-col-w, 220px) * 2 + var(--kslp-h4-gap, 16px));
        margin: 0 auto;
        transform: skew(var(--kslp-h4-skew-x, -26deg), var(--kslp-h4-skew-y, -1deg)) rotate(var(--kslp-h4-rot, 0deg)) scale(var(--kslp-h4-scale, 1)) translate3d(var(--kslp-h4-offset-x, 0px), 0, 0);
        transform-origin: center center;
        transform-style: preserve-3d;
        will-change: transform;
    }

    .kslp-hero4-slider-wrap--tilted .kslp-hero4-card {
        transform-style: preserve-3d;
    }

    .kslp-hero4-slider-wrap--tilted .kslp-hero4-card:hover {
        transform: translate3d(-6px, -6px, 12px) scale(1.03);
    }
}

@media screen and (max-width: 767px) {
    .kslp-hero4-slider-wrap--tilted {
        max-width: 100vw !important;
        width: calc(100% + 40px) !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding: 12px 0 !important;
        height: auto !important;
    }

    .kslp-hero4-slider-wrap--tilted .kslp-hero4-slider-inner {
        transform: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Cards */
.kslp-hero4-card {
    display: block;
    width: 100%;
    border-radius: var(--kslp-h4-radius, 16px);
    overflow: hidden;
    background-color: #ffffff;
    text-decoration: none !important;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: var(--kslp-h4-aspect, 4/3);
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.kslp-hero4-card a.kslp-hero4-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

.kslp-hero4-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: var(--kslp-h4-fit, cover);
    border-radius: inherit;
}

.kslp-hero4-card:hover {
    transform: translateY(-4px) scale(1.02);
}

.kslp-hero4-card--shadow-none {
    box-shadow: none !important;
}
.kslp-hero4-card--shadow-subtle {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.kslp-hero4-card--shadow-medium {
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.12), 0 8px 12px -6px rgba(0, 0, 0, 0.08);
}
.kslp-hero4-card--shadow-strong {
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.22), 0 10px 16px -6px rgba(0, 0, 0, 0.12);
}

/* Alignment Variations */
.kslp-hero4-block--center .kslp-hero4-container {
    flex-direction: column;
    text-align: center;
}
.kslp-hero4-block--center .kslp-hero4-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kslp-hero4-block--center .kslp-hero4-list {
    align-items: center;
}
.kslp-hero4-block--center .kslp-hero4-item {
    justify-content: center;
}
.kslp-hero4-block--center .kslp-hero4-badges {
    justify-content: center;
}
.kslp-hero4-block--center .kslp-hero4-slider-wrap {
    margin: 20px auto 0 auto;
}

.kslp-hero4-block--right .kslp-hero4-container {
    flex-direction: row-reverse;
}
.kslp-hero4-block--right .kslp-hero4-list {
    align-items: flex-end;
}

/* ==========================================================================
   Mobile Responsive Horizontal Marquee Slider (< 768px)
   ========================================================================== */
@media screen and (max-width: 767px) {
    .kslp-hero4-container {
        flex-direction: column !important;
        gap: 32px;
    }

    .kslp-hero4-content {
        width: 100% !important;
        display: flex;
        flex-direction: column;
    }

    .kslp-hero4-heading,
    .kslp-hero4-sub1,
    .kslp-hero4-sub2 {
        width: 100% !important;
        box-sizing: border-box;
    }

    .kslp-hero4-list {
        width: 100% !important;
    }
    .kslp-hero4-item {
        text-align: left;
    }
    .kslp-hero4-list--mb-left {
        align-items: flex-start !important;
    }
    .kslp-hero4-list--mb-left .kslp-hero4-item {
        justify-content: flex-start;
    }
    .kslp-hero4-list--mb-center {
        align-items: center !important;
    }
    .kslp-hero4-list--mb-center .kslp-hero4-item {
        justify-content: center;
    }

    .kslp-hero4-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        white-space: normal !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 8px !important;
        padding-bottom: 0 !important;
        margin-top: 16px !important;
        box-sizing: border-box !important;
    }
    .kslp-hero4-block--center .kslp-hero4-badges,
    .kslp-hero4-badges--mb-center {
        justify-content: center !important;
    }
    .kslp-hero4-badges--mb-left {
        justify-content: flex-start !important;
    }
    .kslp-hero4-badges--mb-right {
        justify-content: flex-end !important;
    }
    .kslp-hero4-badge {
        flex: 0 1 auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 4px 10px;
    }
    .kslp-hero4-badge-content {
        min-width: 0 !important;
        word-break: break-word;
    }
    .kslp-hero4-badge-text {
        font-size: 11px;
        line-height: 1.25;
    }
    .kslp-hero4-badge-subtext {
        font-size: 10px;
        line-height: 1.2;
    }

    /* Slider turns to 2 horizontal rows on mobile */
    .kslp-hero4-slider-wrap {
        max-width: 100vw !important;
        width: calc(100% + 40px) !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        margin-top: 0 !important;
        align-self: auto !important;
        height: auto !important;
        padding: 12px 0;
        overflow: hidden;
        overflow-x: clip;
    }

    .kslp-hero4-slider-wrap--fade {
        -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.02) 2%,
            rgba(0, 0, 0, 0.08) 5%,
            rgba(0, 0, 0, 0.25) 10%,
            rgba(0, 0, 0, 0.60) 16%,
            rgba(0, 0, 0, 0.88) 22%,
            #000000 28%,
            #000000 72%,
            rgba(0, 0, 0, 0.88) 78%,
            rgba(0, 0, 0, 0.60) 84%,
            rgba(0, 0, 0, 0.25) 90%,
            rgba(0, 0, 0, 0.08) 95%,
            rgba(0, 0, 0, 0.02) 98%,
            transparent 100%
        ) !important;
        mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.02) 2%,
            rgba(0, 0, 0, 0.08) 5%,
            rgba(0, 0, 0, 0.25) 10%,
            rgba(0, 0, 0, 0.60) 16%,
            rgba(0, 0, 0, 0.88) 22%,
            #000000 28%,
            #000000 72%,
            rgba(0, 0, 0, 0.88) 78%,
            rgba(0, 0, 0, 0.60) 84%,
            rgba(0, 0, 0, 0.25) 90%,
            rgba(0, 0, 0, 0.08) 95%,
            rgba(0, 0, 0, 0.02) 98%,
            transparent 100%
        ) !important;
    }

    .kslp-hero4-slider-inner {
        flex-direction: column !important;
        gap: var(--kslp-h4-gap, 14px) !important;
        width: 100% !important;
        height: auto !important;
    }

    .kslp-hero4-track-col {
        flex-direction: row !important;
        width: max-content !important;
        gap: var(--kslp-h4-gap, 14px) !important;
    }

    .kslp-hero4-track-col--1 {
        animation-name: kslp-hero4-row-left !important;
    }

    .kslp-hero4-track-col--2 {
        animation-name: kslp-hero4-row-right !important;
    }

    .kslp-hero4-card {
        width: var(--kslp-h4-col-w-mb, 180px) !important;
        flex-shrink: 0 !important;
    }
}

@keyframes kslp-hero4-row-left {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes kslp-hero4-row-right {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@media screen and (max-width: 480px) {
    .kslp-hero4-badge {
        padding: 4px 8px !important;
        gap: 6px !important;
    }
    .kslp-hero4-badge-text {
        font-size: 10.5px !important;
    }
    .kslp-hero4-badge-subtext {
        font-size: 9.5px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kslp-hero4-track-col {
        animation: none !important;
        transform: none !important;
    }
}