/* PTUN Kupang — Hero Slider V6 SAFE ADD-ON
   Does not replace home-modern.css. Keep CMS data and Bootstrap carousel intact. */

/*
 * Layout safety guards:
 * - Desktop remains two columns.
 * - Tablet/mobile keep the existing responsive layout from home-modern.css.
 * - Image padding/border are included in the declared width to prevent overflow.
 */
.ptun-home-2026 > .ptun-hero,
.ptun-home-2026 > .ptun-hero .ptun-hero-grid,
.ptun-home-2026 > .ptun-hero .ptun-hero-copy,
.ptun-home-2026 > .ptun-hero .ptun-hero-media,
.ptun-home-2026 > .ptun-hero .ptun-hero-media img {
    box-sizing: border-box;
    min-width: 0;
}

.ptun-home-2026 > .ptun-hero {
    width: 100%;
    max-width: 100%;
}

.ptun-home-2026 > .ptun-hero .ptun-hero-media img {
    max-width: 100%;
}

@media (min-width: 992px) {
    .ptun-home-2026 > .ptun-hero .carousel-inner > .item,
    .ptun-home-2026 > .ptun-hero .ptun-hero-grid {
        min-height: 350px;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 43fr) minmax(0, 57fr) !important;
        width: 100%;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-copy {
        padding: 38px 20px 48px 44px;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-copy h1 {
        font-size: clamp(29px, 3vw, 44px);
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-media,
    .ptun-home-2026 > .ptun-hero .ptun-hero-media img {
        height: 350px;
        min-height: 0;
        max-height: 350px;
    }
}

/* =========================================================
   HERO SLIDER V6 — gradasi biru, aksen emas, animasi ringan
   Konten slider tetap dinamis dari CMS.
   ========================================================= */
.ptun-home-2026 > .ptun-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(112deg, #071957 0%, #0E29CD 36%, #176CEA 69%, #0B2A81 100%) !important;
    box-shadow: 0 24px 56px rgba(10, 36, 117, .16);
}

.ptun-home-2026 > .ptun-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 83% 10%, rgba(255, 255, 255, .20), transparent 28%),
        radial-gradient(ellipse at 8% 100%, rgba(255, 178, 26, .15), transparent 28%),
        linear-gradient(90deg, rgba(3, 16, 61, .24), transparent 68%);
    transform: translate3d(0, 0, 0) scale(1);
    animation: ptunHeroAmbient 11s ease-in-out infinite;
}

.ptun-home-2026 > .ptun-hero .carousel-inner {
    position: relative;
    z-index: 1;
    border-radius: inherit;
    background: transparent;
}

.ptun-home-2026 > .ptun-hero .carousel-inner > .item {
    background: transparent !important;
}

.ptun-home-2026 > .ptun-hero .ptun-hero-grid {
    position: relative;
    z-index: 1;
}

.ptun-home-2026 > .ptun-hero .ptun-hero-copy h1 {
    max-width: 650px;
    margin-top: 0;
    color: #fff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: clamp(30px, 3.35vw, 48px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.035em;
    text-shadow: 0 10px 26px rgba(0, 0, 0, .14);
    text-wrap: balance;
}

.ptun-home-2026 > .ptun-hero .ptun-btn-light {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 10px;
    background: linear-gradient(135deg, #FFE29A, #FFB21A);
    color: #1D2850 !important;
    box-shadow: 0 10px 22px rgba(255, 164, 0, .24);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.ptun-home-2026 > .ptun-hero .ptun-btn-light:hover,
.ptun-home-2026 > .ptun-hero .ptun-btn-light:focus {
    background: linear-gradient(135deg, #FFE9B4, #FFC13D);
    color: #142653 !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(255, 164, 0, .32);
}

.ptun-home-2026 > .ptun-hero .ptun-hero-media {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

.ptun-home-2026 > .ptun-hero .ptun-hero-media img {
    position: relative;
    z-index: 1;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 14px;
    background: linear-gradient(145deg, #FFFFFF, #EEF3FB);
    box-shadow: 0 20px 48px rgba(0, 8, 45, .26);
}

.ptun-home-2026 > .ptun-hero .ptun-hero-media::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 42%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        112deg,
        transparent 0%,
        rgba(255, 255, 255, .02) 30%,
        rgba(255, 255, 255, .26) 50%,
        rgba(255, 255, 255, .02) 70%,
        transparent 100%
    );
    transform: translate3d(-180%, 0, 0) skewX(-18deg);
}

.ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-copy h1 {
    animation: ptunHeroTextIn .68s .08s cubic-bezier(.22, .72, .25, 1) both;
}

.ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-copy .ptun-btn {
    animation: ptunHeroTextIn .62s .23s cubic-bezier(.22, .72, .25, 1) both;
}

.ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-media img {
    animation: ptunHeroImageIn .74s .06s cubic-bezier(.22, .72, .25, 1) both;
}

.ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-media .ptun-hero-placeholder {
    animation: ptunHeroImageIn .74s .06s cubic-bezier(.22, .72, .25, 1) both;
}

.ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-media::after {
    animation: ptunHeroShine 1.2s .62s ease-out both;
}

.ptun-home-2026 > .ptun-hero .carousel-control {
    z-index: 8;
    border: 1px solid rgba(255, 255, 255, .30);
    background: rgba(5, 22, 77, .66);
    backdrop-filter: blur(6px);
    transition: transform .18s ease, background .18s ease;
}

.ptun-home-2026 > .ptun-hero .carousel-control:hover,
.ptun-home-2026 > .ptun-hero .carousel-control:focus {
    background: rgba(5, 22, 77, .92);
    transform: translateY(-2px);
}

.ptun-home-2026 > .ptun-hero .carousel-indicators li.active {
    background: #FFD36A;
    box-shadow: 0 0 12px rgba(255, 211, 106, .26);
}

@keyframes ptunHeroAmbient {
    0%, 100% {
        opacity: .88;
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate3d(1.2%, -1%, 0) scale(1.03);
    }
}

@keyframes ptunHeroTextIn {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ptunHeroImageIn {
    from {
        opacity: 0;
        transform: translate3d(24px, 0, 0) scale(.965);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}


@keyframes ptunHeroShine {
    0% {
        opacity: 0;
        transform: translate3d(-180%, 0, 0) skewX(-18deg);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(360%, 0, 0) skewX(-18deg);
    }
}

@media (max-width: 991px) {
    .ptun-home-2026 > .ptun-hero {
        border-radius: 16px;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-copy h1 {
        font-size: clamp(29px, 4.5vw, 38px);
    }
}

@media (max-width: 767px) {
    .ptun-home-2026 > .ptun-hero {
        border-radius: 14px;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-copy h1 {
        font-size: clamp(27px, 7.3vw, 34px);
        line-height: 1.08;
    }

    .ptun-home-2026 > .ptun-hero .ptun-btn-light {
        min-height: 40px;
        padding: 10px 14px;
    }

    .ptun-home-2026 > .ptun-hero .carousel-indicators li.active {
        width: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ptun-home-2026 > .ptun-hero::before,
    .ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-copy h1,
    .ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-copy .ptun-btn,
    .ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-media img,
    .ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-media .ptun-hero-placeholder,
    .ptun-home-2026 > .ptun-hero .carousel-inner > .item.active .ptun-hero-media::after {
        animation: none !important;
        transition: none !important;
    }

    .ptun-home-2026 > .ptun-hero .ptun-btn-light,
    .ptun-home-2026 > .ptun-hero .carousel-control {
        transition: none !important;
    }
}

/* V6 HOTFIX — seamless image background and consistent blue gradient.
   Keep object-fit: contain so text inside CMS banners is not cropped.
   Transparent letterboxing reveals the same gradient as the text panel. */
.ptun-home-2026 > .ptun-hero .ptun-hero-media {
    background: transparent !important;
}

.ptun-home-2026 > .ptun-hero .ptun-hero-media img {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}


/* =========================================================
   HERO SLIDER V6.1 FINAL
   - Bootstrap carousel remains the single slide-transition mechanism.
   - Disable separate entrance animations on text/image to prevent a second movement.
   - Full rectangular image panel, no white frame or rounded corners.
   - The media area stays transparent so the shared hero gradient shows through,
     including on mobile.
   - CMS markup, slider titles, image URLs and destination URLs are untouched.
   ========================================================= */

/* A square, edge-to-edge hero shell on every viewport. */
.ptun-home-2026 > .ptun-hero {
    border-radius: 0 !important;
    background: linear-gradient(
        112deg,
        #071957 0%,
        #0E29CD 36%,
        #176CEA 69%,
        #0B2A81 100%
    ) !important;
    box-shadow: none !important;
}

.ptun-home-2026 > .ptun-hero::before {
    border-radius: 0 !important;
}

/* Do not introduce another frame/background around the CMS banner. */
.ptun-home-2026 > .ptun-hero .carousel-inner,
.ptun-home-2026 > .ptun-hero .carousel-inner > .item,
.ptun-home-2026 > .ptun-hero .ptun-hero-grid,
.ptun-home-2026 > .ptun-hero .ptun-hero-media {
    border-radius: 0 !important;
    background: transparent !important;
}

.ptun-home-2026 > .ptun-hero .ptun-hero-media {
    overflow: hidden;
    padding: 0 !important;
    box-shadow: none !important;
}

/* The image remains fully visible; any unused area reveals the same hero gradient. */
.ptun-home-2026 > .ptun-hero .ptun-hero-media img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Remove the V6 shine layer: it was a second visual movement after the slide entered. */
.ptun-home-2026 > .ptun-hero .ptun-hero-media::after {
    display: none !important;
    animation: none !important;
    transition: none !important;
}

/*
 * Important: Bootstrap's .item / .next / .prev transition moves the entire slide.
 * The content inside must not run separate translate/fade entrance animations.
 * This avoids the title/image appearing to move again after slide 2, 3, etc. arrives.
 */
.ptun-home-2026 > .ptun-hero .carousel-inner > .item .ptun-hero-copy h1,
.ptun-home-2026 > .ptun-hero .carousel-inner > .item .ptun-hero-copy .ptun-btn,
.ptun-home-2026 > .ptun-hero .carousel-inner > .item .ptun-hero-copy .ptun-btn-light,
.ptun-home-2026 > .ptun-hero .carousel-inner > .item .ptun-hero-media img,
.ptun-home-2026 > .ptun-hero .carousel-inner > .item .ptun-hero-media .ptun-hero-placeholder {
    animation: none !important;
    opacity: 1 !important;
}

.ptun-home-2026 > .ptun-hero .carousel-inner > .item .ptun-hero-media img,
.ptun-home-2026 > .ptun-hero .carousel-inner > .item .ptun-hero-media .ptun-hero-placeholder {
    transform: none !important;
}

/* Consistent media panel sizing at desktop, tablet, and mobile. */
@media (min-width: 992px) {
    .ptun-home-2026 > .ptun-hero .ptun-hero-media {
        height: 350px !important;
        min-height: 0 !important;
        max-height: 350px !important;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-media img {
        height: 350px !important;
        max-height: 350px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .ptun-home-2026 > .ptun-hero {
        border-radius: 0 !important;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-media {
        height: 320px !important;
        min-height: 0 !important;
        max-height: 320px !important;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-media img {
        height: 320px !important;
        max-height: 320px !important;
    }
}

@media (max-width: 767px) {
    .ptun-home-2026 > .ptun-hero,
    .ptun-home-2026 > .ptun-hero .carousel-inner,
    .ptun-home-2026 > .ptun-hero .carousel-inner > .item,
    .ptun-home-2026 > .ptun-hero .ptun-hero-grid,
    .ptun-home-2026 > .ptun-hero .ptun-hero-media,
    .ptun-home-2026 > .ptun-hero .ptun-hero-media img {
        border-radius: 0 !important;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-media {
        height: 240px !important;
        min-height: 0 !important;
        max-height: 240px !important;
        background: transparent !important;
    }

    .ptun-home-2026 > .ptun-hero .ptun-hero-media img {
        height: 240px !important;
        min-height: 0 !important;
        max-height: 240px !important;
        object-fit: contain !important;
        background: transparent !important;
    }
}

/* Keep the one slide transition, but respect reduced-motion accessibility preferences. */
@media (prefers-reduced-motion: reduce) {
    .ptun-home-2026 > .ptun-hero::before {
        animation: none !important;
    }

    .ptun-home-2026 > .ptun-hero .carousel-inner > .item,
    .ptun-home-2026 > .ptun-hero .carousel-inner > .item * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}