/* Home hero carousel (replaces the static .catalog-hero container look). */
.hero-carousel { position: relative; width: min(1150px, calc(100% - 64px)); margin: 0 auto; overflow: hidden; border: 1px solid #e9e7f7; border-radius: 28px; background: #fbfaff; box-shadow: 0 18px 40px rgb(43 34 120 / .06); }
.hero-carousel__viewport { overflow: hidden; touch-action: pan-y; cursor: grab; }
.hero-carousel__viewport.is-dragging { cursor: grabbing; user-select: none; }
.hero-carousel__track { display: flex; transition: transform .45s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.hero-carousel__track.no-anim { transition: none; }
.hero-slide { flex: 0 0 100%; width: 100%; min-width: 0; }
.hero-slide img { -webkit-user-drag: none; user-select: none; }

/* Slide 1: reuse the existing hero block, but flatten its own container styling */
.hero-carousel .catalog-hero { width: 100%; margin: 0; border: 0; border-radius: 0; background: radial-gradient(circle at 68% 15%, #e9e5ff 0, transparent 23rem), linear-gradient(105deg, #fff 6%, #fbfaff 52%, #f2efff 100%); box-shadow: none; }

/* Slide 2: Nokos / OTP promo */
.promo-slide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 420px; color: #fff; background: radial-gradient(circle at 78% 30%, rgb(120 98 255 / .55) 0, transparent 24rem), radial-gradient(circle at 8% 100%, rgb(37 211 102 / .14) 0, transparent 18rem), linear-gradient(120deg, #150f45 0%, #2f2296 55%, #5a4bdc 100%); }
.promo-slide__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: clamp(34px, 3.4vw, 44px); padding-right: 12px; }
.promo-slide__tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(100deg, #ffe066, #ffb020 55%, #ff8a3d); box-shadow: 0 6px 16px rgb(255 160 30 / .35); color: #3b2300; font-size: .74rem; font-weight: 900; letter-spacing: .06em; }
.promo-slide h2 { margin: 0; max-width: 520px; color: #fff; font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.06; }
.promo-slide h2 em { color: #c9c0ff; font-family: Georgia, serif; font-style: italic; }
.promo-slide__lead { max-width: 500px; margin: 0; color: #dcd7ff; font-size: .93rem; line-height: 1.65; }
.promo-slide__lead b { color: #fff; font-weight: 750; }
.promo-slide__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.promo-slide__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; background: rgb(255 255 255 / .1); font-size: .78rem; font-weight: 750; white-space: nowrap; }
.promo-slide__chips i { color: #5ff0a0; font-style: normal; font-weight: 900; }

/* CTA with animated glow border */
.promo-slide__cta { position: relative; isolation: isolate; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 50px; margin-top: 6px; padding: 0 26px; border: 2px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(110deg, #ffe066, #ff8a3d, #c9c0ff, #5ff0a0, #ffe066) border-box; background-size: 100% 100%, 300% 100%; box-shadow: 0 0 18px rgb(255 214 90 / .5), 0 12px 26px rgb(8 5 45 / .4); color: #2f2296; font-weight: 800; text-decoration: none; animation: promo-glow 3.2s linear infinite; transition: transform .18s ease; }
.promo-slide__cta:hover, .promo-slide__cta:focus-visible { outline: 0; transform: translateY(-2px) scale(1.02); }
@keyframes promo-glow {
    0% { background-position: 0 0, 0% 0; box-shadow: 0 0 14px rgb(255 214 90 / .35), 0 12px 26px rgb(8 5 45 / .4); }
    50% { box-shadow: 0 0 28px rgb(255 160 60 / .65), 0 12px 26px rgb(8 5 45 / .4); }
    100% { background-position: 0 0, 300% 0; box-shadow: 0 0 14px rgb(255 214 90 / .35), 0 12px 26px rgb(8 5 45 / .4); }
}

/* Visual: OTP card + orbiting app icons. Built on a fixed 400px stage that is scaled down on small screens. */
.promo-slide__visual { position: relative; z-index: 1; min-height: 420px; overflow: hidden; }.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.orbit-stage { --k: 1; --r: 184px; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; transform: scale(var(--k)); }
.orbit-stage::before { position: absolute; z-index: -1; inset: 10px; border: 1px dashed rgb(255 255 255 / .2); border-radius: 50%; content: ''; }
.orbit-stage::after { position: absolute; z-index: -1; inset: 62px; border-radius: 50%; background: radial-gradient(circle, rgb(37 211 102 / .22), transparent 68%); content: ''; }
.orbit__ring { position: absolute; inset: 0; animation: orbit-spin 70s linear infinite; }
.orbit__icon { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; }
.orbit__svg { display: block; width: 50px; height: 50px; border-radius: 14px; box-shadow: 0 8px 18px rgb(6 4 36 / .5); animation: orbit-unspin 70s linear infinite; }
.orbit__icon--1 { transform: rotate(0deg) translateY(calc(var(--r, 184px) * -1)) rotate(0deg); }
.orbit__icon--2 { transform: rotate(45deg) translateY(calc(var(--r, 184px) * -1)) rotate(-45deg); }
.orbit__icon--3 { transform: rotate(90deg) translateY(calc(var(--r, 184px) * -1)) rotate(-90deg); }
.orbit__icon--4 { transform: rotate(135deg) translateY(calc(var(--r, 184px) * -1)) rotate(-135deg); }
.orbit__icon--5 { transform: rotate(180deg) translateY(calc(var(--r, 184px) * -1)) rotate(-180deg); }
.orbit__icon--6 { transform: rotate(225deg) translateY(calc(var(--r, 184px) * -1)) rotate(-225deg); }
.orbit__icon--7 { transform: rotate(270deg) translateY(calc(var(--r, 184px) * -1)) rotate(-270deg); }
.orbit__icon--8 { transform: rotate(315deg) translateY(calc(var(--r, 184px) * -1)) rotate(-315deg); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-unspin { to { transform: rotate(-360deg); } }

.promo-card { position: absolute; top: 50%; left: 50%; width: 236px; padding: 16px; border: 1px solid rgb(120 255 180 / .28); border-radius: 22px; background: linear-gradient(150deg, #11513c, #0a2c22 70%); box-shadow: 0 26px 50px rgb(2 12 8 / .55), inset 0 1px 0 rgb(255 255 255 / .12); transform: translate(-50%, -50%) rotate(-3deg); }
.promo-card__row { display: flex; align-items: center; gap: 10px; }
.promo-card__app { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; }
.promo-card__row strong { display: block; font-size: .95rem; }
.promo-card__row small { color: #a6dcc3; font-size: .72rem; }
.promo-card__num { margin: 13px 0 9px; padding: 10px 12px; border-radius: 11px; background: rgb(0 0 0 / .32); font-family: ui-monospace, Consolas, monospace; font-size: .98rem; letter-spacing: .04em; }
.promo-card__otp { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 11px; background: #fff; color: #0a2c22; }
.promo-card__otp span { color: #4f6b5f; font-size: .7rem; font-weight: 800; }
.promo-card__otp b { color: #0f8f55; font-family: ui-monospace, Consolas, monospace; font-size: 1.2rem; letter-spacing: .14em; }
.promo-badge { position: absolute; padding: 6px 11px; border-radius: 999px; background: #fff; box-shadow: 0 8px 18px rgb(2 12 8 / .4); color: #0a5a3a; font-size: .7rem; font-weight: 850; white-space: nowrap; }
.promo-badge--a { top: -14px; right: -16px; background: linear-gradient(100deg, #ffe066, #ffb020); color: #3b2300; transform: rotate(5deg); }
.promo-badge--b { right: 8px; bottom: -15px; transform: rotate(-3deg); }

/* Controls */
.hero-carousel__nav { position: absolute; z-index: 3; top: 50%; display: grid; width: 42px; height: 42px; min-height: 0; place-items: center; padding: 0; border: 1px solid rgb(98 85 232 / .18); border-radius: 50%; background: rgb(255 255 255 / .92); box-shadow: 0 8px 20px rgb(30 25 90 / .22); color: #4b3fcb; font-size: 1.5rem; line-height: 1; transform: translateY(-50%); transition: background .18s ease, transform .18s ease; }
.hero-carousel__nav:hover, .hero-carousel__nav:focus-visible { background: #fff; outline: 0; transform: translateY(-50%) scale(1.07); }
.hero-carousel__nav--prev { left: 14px; }
.hero-carousel__nav--next { right: 14px; }
.hero-carousel__dots { position: absolute; z-index: 3; right: 0; bottom: 14px; left: 0; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.hero-carousel__dot { width: 10px; height: 10px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: rgb(98 85 232 / .35); box-shadow: 0 0 0 2px rgb(255 255 255 / .6); pointer-events: auto; transition: width .25s ease, background .25s ease; }
.hero-carousel__dot.is-active { width: 28px; background: #6255e8; }

/* Equal-height slides: each slide's gradient fills the whole card, with room for the dots */
.hero-slide { display: flex; }
.hero-slide > .catalog-hero, .hero-slide > .promo-slide { flex: 1 1 100%; min-width: 0; min-height: 420px; padding-bottom: 36px; }
.hero-carousel .catalog-hero { min-height: 420px; }

@media (max-width: 900px) {
    .promo-slide { grid-template-columns: 1fr; }
    .hero-slide > .promo-slide, .hero-slide > .catalog-hero { min-height: 0; }
    .promo-slide__copy { padding: 42px 40px 6px; }
    .promo-slide__visual { min-height: 340px; }
    .orbit-stage { --k: .84; }
    .hero-carousel { width: min(100% - 32px, 680px); margin-top: 12px; border-radius: 0 0 28px 28px; }
}
@media (max-width: 640px) {
    .promo-slide__copy { padding: 36px 22px 4px; }
    .promo-slide h2 { font-size: clamp(2rem, 9.5vw, 2.6rem); }
    .promo-slide__chips span { padding: 6px 10px; font-size: .72rem; }
    .promo-slide__cta { width: 100%; justify-content: center; }
    .promo-slide__visual { min-height: 316px; }
    /* Orbit stage: capped width, centred, scaled to 75% so it never dominates the screen */
    .orbit-stage { --k: .75; --r: 170px; }
    .hero-orbit-stage svg, .hero-orbit-stage img { width: 32px !important; height: 32px !important; max-width: 100%; }
    .orbit__icon { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
    .orbit__svg { border-radius: 10px; }
    .promo-card { width: 236px; }
    .promo-badge { font-size: .64rem; padding: 5px 9px; }
}
@media (max-width: 560px) {
    .hero-carousel { width: 100%; margin-top: 0; border-right: 0; border-left: 0; border-radius: 0 0 24px 24px; }
    .hero-carousel__nav { width: 36px; height: 36px; font-size: 1.25rem; }
    .hero-carousel__nav--prev { left: 8px; }
    .hero-carousel__nav--next { right: 8px; }
    .hero-carousel__dots { bottom: 12px; }
}
@media (max-width: 380px) {
    .promo-slide__visual { min-height: 284px; }
    .orbit-stage { --k: .66; }
}@media (prefers-reduced-motion: reduce) {
    .orbit__ring, .orbit__svg, .promo-slide__cta { animation: none; }
    .hero-carousel__track { transition: none; }
}

/* Slide 3: Layanan Sosmed (purple / neon) */
.promo-slide--smm { background: radial-gradient(circle at 78% 28%, rgb(190 90 255 / .5) 0, transparent 24rem), radial-gradient(circle at 10% 100%, rgb(255 70 160 / .2) 0, transparent 18rem), linear-gradient(120deg, #120a3a 0%, #34178f 55%, #6a33d6 100%); }
.promo-slide--smm h2 em { color: #ffb3ee; }
.smm-stage { --k: 1; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; transform: scale(var(--k)); }
.smm-stage::before { position: absolute; z-index: -1; inset: 40px; border-radius: 50%; background: radial-gradient(circle, rgb(214 120 255 / .35), transparent 68%); content: ''; }
.smm-card { position: absolute; top: 50%; left: 50%; width: 252px; padding: 16px; border: 1px solid rgb(214 170 255 / .35); border-radius: 22px; background: linear-gradient(150deg, #2a1470, #170a45 75%); box-shadow: 0 26px 50px rgb(6 2 30 / .6), inset 0 1px 0 rgb(255 255 255 / .14); transform: translate(-50%, -50%) rotate(-3deg); }
.smm-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.smm-card__head strong { flex: 1; font-size: .92rem; }
.smm-card__head small { color: #b9a8f0; font-size: .68rem; }
.smm-card__dot { width: 9px; height: 9px; border-radius: 50%; background: #5ff0a0; box-shadow: 0 0 10px #5ff0a0; }
.smm-card__row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 9px 10px; border-radius: 12px; background: rgb(255 255 255 / .08); }
.smm-card__row svg { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; }
.smm-card__row div { flex: 1; min-width: 0; }
.smm-card__row b { display: block; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.smm-card__row small { color: #b9a8f0; font-size: .68rem; }
.smm-card__row i { color: #5ff0a0; font-style: normal; font-weight: 900; }
.smm-card__bar { height: 8px; margin: 12px 0 8px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .12); }
.smm-card__bar span { display: block; width: 78%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe066, #ff6bd6, #a98bff); animation: smm-bar 3.4s ease-in-out infinite alternate; }
.smm-card__foot { display: flex; justify-content: space-between; color: #d8cdfa; font-size: .72rem; }
.smm-card__foot b { color: #ffe066; }
.smm-float { position: absolute; display: block; width: 58px; height: 58px; animation: smm-float 4.4s ease-in-out infinite; }
.smm-float svg { display: block; width: 100%; height: 100%; border-radius: 16px; box-shadow: 0 10px 22px rgb(6 2 30 / .55), 0 0 18px rgb(214 120 255 / .35); }
.smm-float--ig { top: 18px; left: 26px; }
.smm-float--tt { top: 40px; right: 18px; animation-delay: -1.1s; }
.smm-float--yt { bottom: 34px; left: 14px; animation-delay: -2.2s; }
.smm-float--x { right: 30px; bottom: 22px; animation-delay: -3.3s; }
.smm-pill { position: absolute; padding: 6px 11px; border-radius: 999px; background: #fff; box-shadow: 0 8px 18px rgb(6 2 30 / .4); color: #34178f; font-size: .7rem; font-weight: 850; white-space: nowrap; }
.smm-pill--a { top: 96px; left: 4px; background: linear-gradient(100deg, #ffe066, #ffb020); color: #3b2300; transform: rotate(-5deg); }
.smm-pill--b { right: 6px; bottom: 82px; transform: rotate(4deg); }
@keyframes smm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes smm-bar { from { width: 46%; } to { width: 88%; } }
@media (max-width: 900px) { .smm-stage { --k: .84; } }
@media (max-width: 640px) { .smm-stage { --k: .75; } .smm-float { width: 46px; height: 46px; } .smm-pill { font-size: .64rem; padding: 5px 9px; } }
@media (max-width: 380px) { .smm-stage { --k: .66; } }
@media (prefers-reduced-motion: reduce) { .smm-float, .smm-card__bar span { animation: none; } }