/**

 * Promo carousel — portal pelanggan & landing page.

 */



.promo-carousel {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 12px;

    overflow: visible;

}



.promo-carousel__stage {

    overflow: hidden;

    border-radius: var(--cb-radius, 14px);

}



.promo-carousel__viewport {

    overflow: hidden;

    touch-action: none;

    cursor: grab;

    user-select: none;

    -webkit-user-select: none;

}



.promo-carousel__viewport.is-dragging {

    cursor: grabbing;

}



.promo-carousel--dragging .promo-carousel__viewport {

    cursor: grabbing;

}



.promo-carousel__track {

    display: flex;

    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;

}



.promo-carousel__slide {

    flex: 0 0 100%;

    min-width: 100%;

}



.promo-carousel__media {

    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, #dbeafe 0%, #ecfdf5 100%);

    box-shadow: var(--cpa-shadow-soft, 0 4px 14px rgba(30, 90, 168, 0.08));

    aspect-ratio: 720 / 320;

    min-height: 140px;

}



.promo-carousel__visual {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

    -webkit-user-drag: none;

    user-drag: none;

    -webkit-touch-callout: none;

}



.promo-carousel__shield {

    position: absolute;

    inset: 0;

    z-index: 2;

    display: block;

    background: transparent;

    touch-action: none;

}



.promo-carousel__overlay {

    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    pointer-events: none;

    background: linear-gradient(

        180deg,

        rgba(10, 22, 40, 0) 0%,

        rgba(10, 22, 40, 0.05) 42%,

        rgba(10, 22, 40, 0.62) 100%

    );

}



.promo-carousel__overlay-inner {

    padding: clamp(14px, 3.5vw, 20px) clamp(14px, 3.5vw, 18px) clamp(16px, 3.8vw, 22px);

}



.promo-carousel__eyebrow {

    margin: 0 0 6px;

    font-size: 0.625rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.82);

    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);

}



.promo-carousel__title {

    margin: 0;

    font-size: clamp(0.9375rem, 2.8vw, 1.125rem);

    font-weight: 800;

    letter-spacing: -0.02em;

    line-height: 1.25;

    color: #fff;

    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);

}



.promo-carousel__sub {

    margin: 6px 0 0;

    font-size: clamp(0.75rem, 2.2vw, 0.8125rem);

    line-height: 1.45;

    color: rgba(255, 255, 255, 0.92);

    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.promo-carousel__cta {

    display: inline-flex;

    align-items: center;

    margin-top: 10px;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.18);

    border: 1px solid rgba(255, 255, 255, 0.35);

    color: #fff;

    font-size: 0.6875rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    text-decoration: none;

    pointer-events: auto;

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    transition: background 0.15s ease, transform 0.12s ease;

}



.promo-carousel__cta:hover {

    background: rgba(255, 255, 255, 0.28);

    color: #fff;

}



.promo-carousel__cta:active {

    transform: scale(0.98);

}



.promo-carousel__nav {

    flex-shrink: 0;

    display: flex;

    justify-content: center;

    padding: 2px 0 0;

}



.promo-carousel__dots {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin: 0;

    padding: 0;

}



.promo-carousel__dot {

    width: 7px;

    height: 7px;

    padding: 0;

    border: none;

    border-radius: 999px;

    background: rgba(30, 90, 168, 0.22);

    cursor: pointer;

    transition: width 0.2s ease, background 0.2s ease;

}



.promo-carousel__dot--active {

    width: 18px;

    background: var(--cb-blue, #1e5aa8);

}



/* Spesifisitas di atas .landing-page h2 — teks overlay selalu terbaca */

.landing-page .promo-carousel .promo-carousel__overlay h2.promo-carousel__title {

    color: #ffffff;

    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);

}



.landing-page .promo-carousel .promo-carousel__overlay p.promo-carousel__sub {

    color: rgba(255, 255, 255, 0.94);

}



.landing-page .promo-carousel .promo-carousel__overlay p.promo-carousel__eyebrow {

    color: rgba(147, 197, 253, 0.96);

}



/* ─── Portal pelanggan (beranda) ─── */

.promo-carousel--portal .promo-carousel__stage {

    border-radius: calc(var(--cb-radius, 14px) + 2px);

    box-shadow: var(--cpa-shadow-lift, 0 8px 24px rgba(30, 90, 168, 0.1));

}



.promo-carousel--portal .promo-carousel__media {

    border-radius: calc(var(--cb-radius, 14px) + 2px);

    min-height: 128px;

}



.promo-carousel--protected .promo-carousel__media--protected {

    -webkit-touch-callout: none;

}



.promo-carousel--protected {

    -webkit-touch-callout: none;

}



/* ─── Landing page ─── */

.promo-carousel--landing {

    margin: 0;

    width: 100%;

    max-width: none;

    padding: 0;

    gap: 14px;

}



.promo-carousel--landing .promo-carousel__stage {

    border-radius: 20px;

    box-shadow:

        0 4px 6px rgba(15, 23, 42, 0.04),

        0 16px 40px rgba(30, 90, 168, 0.12);

}



.promo-carousel--landing .promo-carousel__media {

    border-radius: 20px;

    min-height: clamp(168px, 30vw, 240px);

    aspect-ratio: 720 / 320;

}



.promo-carousel--landing .promo-carousel__overlay {

    background: linear-gradient(

        180deg,

        rgba(10, 22, 40, 0) 0%,

        rgba(10, 22, 40, 0.08) 55%,

        rgba(10, 22, 40, 0.42) 100%

    );

}



.promo-carousel--landing .promo-carousel__overlay-inner {

    margin: clamp(10px, 2.5vw, 16px);

    max-width: min(100%, 520px);

    padding: clamp(14px, 3vw, 18px) clamp(16px, 3.2vw, 20px);

}



.landing-page .pub-promo .promo-carousel--landing .promo-carousel__overlay h2.promo-carousel__title {

    font-size: clamp(1.125rem, 3.2vw, 1.5rem);

    line-height: 1.22;

    font-weight: 800;

    color: #ffffff;

    text-shadow:

        0 1px 2px rgba(0, 0, 0, 0.55),

        0 2px 14px rgba(0, 0, 0, 0.35);

}



.landing-page .pub-promo .promo-carousel--landing .promo-carousel__overlay p.promo-carousel__sub {

    margin-top: 8px;

    font-size: clamp(0.8125rem, 2.4vw, 0.9375rem);

    line-height: 1.5;

    -webkit-line-clamp: 3;

    color: #f8fafc;

    text-shadow:

        0 1px 2px rgba(0, 0, 0, 0.5),

        0 2px 10px rgba(0, 0, 0, 0.32);

}



.landing-page .pub-promo .promo-carousel--landing .promo-carousel__overlay p.promo-carousel__eyebrow {

    margin-bottom: 8px;

    color: #dbeafe;

    letter-spacing: 0.16em;

    text-shadow:

        0 1px 2px rgba(0, 0, 0, 0.45),

        0 1px 8px rgba(0, 0, 0, 0.28);

}



.promo-carousel--landing .promo-carousel__nav {

    padding-top: 0;

}



.promo-carousel--landing .promo-carousel__dot {

    width: 8px;

    height: 8px;

    background: rgba(30, 90, 168, 0.2);

}



.promo-carousel--landing .promo-carousel__dot--active {

    width: 24px;

    background: var(--pub-brand, #1e5aa8);

}



@media (min-width: 768px) {

    .promo-carousel--landing .promo-carousel__overlay-inner {

        margin: 16px 18px 18px;

    }



    .landing-page .pub-promo .promo-carousel--landing .promo-carousel__overlay h2.promo-carousel__title {

        font-size: 1.5rem;

    }



    .landing-page .pub-promo .promo-carousel--landing .promo-carousel__overlay p.promo-carousel__sub {

        font-size: 0.9375rem;

    }

}



/* ─── Landing: section di atas Fitur lengkap ─── */

.pub-promo {

    padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);

    background: var(--pub-mist, #f8fafc);

    border-top: 1px solid var(--pub-border, #e2e8f0);

    border-bottom: 1px solid var(--pub-border, #e2e8f0);

}



.pub-promo__head {

    margin-bottom: 1.25rem;

    text-align: center;

}



.pub-promo__title {

    margin: 0.35rem 0 0;

    font-size: clamp(1.35rem, 2.5vw, 1.65rem);

    font-weight: 800;

    letter-spacing: -0.02em;

    color: var(--pub-ink, #0f172a);

}



@media (min-width: 768px) {

    .pub-promo__head {

        text-align: left;

        margin-bottom: 1.35rem;

    }

}



.pub-promo + .pub-catalog {

    border-top: none;

    padding-top: clamp(2rem, 4vw, 2.75rem);

}



@media (prefers-reduced-motion: reduce) {

    .promo-carousel__track {

        transition: none;

    }

}