/* Adrian.ID coverflow: all cards share one center; side cards sit underneath. */
.promo-carousel-wrapper{--slide-size:62%;--side-shift:36.5%;--base-height:300px;--card-height:var(--base-height);--motion:560ms;--ease:cubic-bezier(.22,.7,.25,1);width:calc(100% - 64px);max-width:1320px;margin:0 auto;position:relative;outline-offset:4px}
.promo-carousel-container{position:relative}
.promo-carousel-viewport{position:relative;width:100%;overflow:hidden;touch-action:pan-y;padding:12px 0 28px}
.promo-carousel-track{position:relative;height:var(--card-height);perspective:1600px;isolation:isolate}
.promo-slide{position:absolute;left:50%;top:50%;width:var(--slide-size);height:100%;min-width:0;opacity:0;z-index:0;pointer-events:none;transform:translate(-50%,-50%) scale(.76);transition:transform var(--motion) var(--ease),opacity var(--motion) ease;will-change:transform,opacity}
.promo-slide.is-previous{transform:translate(-50%,-50%) translateX(calc(-1 * var(--side-shift))) scale(.82) rotateY(6deg);opacity:.78;z-index:2}
.promo-slide.is-next{transform:translate(-50%,-50%) translateX(var(--side-shift)) scale(.82) rotateY(-6deg);opacity:.78;z-index:2}
.promo-slide.is-before{transform:translate(-50%,-50%) translateX(-58%) scale(.76)}
.promo-slide.is-after{transform:translate(-50%,-50%) translateX(58%) scale(.76)}
.promo-slide.is-leaving{z-index:3}
.promo-slide.is-active{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:4;pointer-events:auto}
.promo-card{height:100%;position:relative;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:minmax(0,1fr);align-items:center;background:#c5f2e3;border:1px solid #acdcca;border-radius:18px;padding:28px 32px;overflow:hidden;color:#104a49;box-shadow:0 6px 14px #154c3e0a;transition:box-shadow var(--motion) ease}
.promo-slide.is-active .promo-card{box-shadow:0 14px 24px -10px #164e4960,0 3px 6px #164e4912}
.promo-card:before{content:'';position:absolute;width:300px;height:300px;right:-100px;top:-160px;border:1px solid #ffffff65;border-radius:50%;box-shadow:0 0 0 28px #ffffff12,0 0 0 56px #ffffff10;pointer-events:none}
.promo-card.theme-gaming{background:#bcefdc;border-color:#9edcc8}
.promo-card.theme-pulsa{background:#cef0f5;border-color:#b7dfe7}
.promo-card.theme-pln{background:#eaf2cf;border-color:#d8e3b9}
.promo-card.theme-ewallet{background:#c1eee5;border-color:#a8dace}
.promo-card.theme-member{background:#dcecf2;border-color:#c4dce4}
.promo-card.theme-voucher{background:#dcefd9;border-color:#c7dec3}
.promo-content-col{position:relative;z-index:1;min-width:0}
.promo-badge-tag{font-size:10px;font-weight:800;letter-spacing:1.8px;display:flex;align-items:center;gap:9px;margin-bottom:13px;color:#22695c;overflow-wrap:anywhere}
.promo-badge-tag:before{content:'';flex:0 0 6px;height:6px;border-radius:50%;background:#008c78}
.promo-title-text{font-size:clamp(27px,2.45vw,36px);font-weight:800;letter-spacing:-1.5px;line-height:1.12;color:#104a49;margin:0 0 12px;overflow-wrap:anywhere}
.promo-subtitle-text{font-size:12px;line-height:1.65;max-width:320px;color:#395f56;margin:0 0 18px;overflow-wrap:anywhere}
.promo-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;max-width:100%;min-height:42px;font-size:12px;font-weight:700;line-height:1.4;background:#007d72;color:#fff;padding:11px 17px;border-radius:8px;box-shadow:0 4px 10px #087d7012;overflow-wrap:anywhere}
.promo-cta-btn:hover{background:#075e57;color:#fff}
.promo-cta-btn svg{flex:0 0 17px;width:17px;height:17px}
.promo-visual-col{display:block;min-width:0;min-height:0;align-self:stretch;position:relative}
.promo-visual-col img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 12px 14px #236d5715)}
.promo-edition{position:absolute;right:26px;bottom:14px;font-size:7px;font-weight:700;letter-spacing:1.5px;color:#38695e}
.promo-edition span{padding:0 9px;color:#618f7f}
.promo-arrow{position:absolute;top:calc(12px + var(--card-height)/2);transform:translate(-50%,-50%);z-index:5;border:1px solid #b9dfd4;width:42px;height:42px;border-radius:50%;background:#fff;color:#135f58;box-shadow:0 4px 14px #1a5d4d1c;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:29px;line-height:1;transition:background .2s,color .2s,border-color .2s}
.promo-arrow:hover{background:#008d7d;border-color:#008d7d;color:#fff}
.promo-arrow-prev{left:calc((100% - var(--slide-size))/2)}
.promo-arrow-next{left:calc((100% + var(--slide-size))/2)}
.promo-controls{height:36px;display:flex;align-items:center;justify-content:center;position:relative;margin:-8px 0 6px}
.promo-dots{display:flex;gap:0;align-items:center}
.promo-dot{width:28px;height:36px;display:grid;place-items:center}
.promo-dot:after{content:'';width:6px;height:6px;border-radius:9px;background:#badbd2;transition:width .25s,background .25s}
.promo-dot.is-active:after{width:22px;background:#008675}
.promo-counter,.promo-hint{display:none}
.promo-rotation{position:absolute;right:calc((100% - var(--slide-size))/2);display:grid;place-items:center;width:32px;height:32px;border:1px solid #d7e9e3;border-radius:50%;color:#3f7064;background:#fff}
.promo-rotation svg{width:12px;height:12px;fill:currentColor}
.promo-rotation:hover{background:#e3f7ef;border-color:#7fbca9}
.promo-rotation:disabled{opacity:.5;cursor:default}
.promo-carousel-wrapper :is(button,a):focus-visible{outline:3px solid #008477;outline-offset:4px}
.promo-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:1600px){.promo-carousel-wrapper{--base-height:310px}}
@media(min-width:601px) and (max-width:1000px){
 .promo-carousel-wrapper{width:calc(100% - 32px);--slide-size:74%;--side-shift:27%;--base-height:300px}
 .promo-card{padding:25px;grid-template-columns:1.4fr 1fr}.promo-title-text{font-size:28px}.promo-badge-tag{font-size:9px;letter-spacing:1.2px}.promo-edition{font-size:6px}
}
@media(max-width:600px){
 .promo-carousel-wrapper{width:100%;--slide-size:86%;--side-shift:16%;--base-height:390px}
 .promo-carousel-viewport{padding-top:8px;padding-bottom:24px}
 .promo-slide.is-previous{transform:translate(-50%,-50%) translateX(calc(-1 * var(--side-shift))) scale(.92);opacity:.75}
 .promo-slide.is-next{transform:translate(-50%,-50%) translateX(var(--side-shift)) scale(.92);opacity:.75}
 .promo-card{display:block;padding:25px 26px;border-radius:16px}
 .promo-title-text{font-size:28px;letter-spacing:-1.2px;margin-bottom:12px}
 .promo-badge-tag{font-size:8px;letter-spacing:1.4px;margin-bottom:14px}
 .promo-subtitle-text{font-size:12px;line-height:1.6;max-width:275px;margin-bottom:16px}
 .promo-cta-btn{font-size:11px;gap:14px;padding:11px 14px}
 .promo-visual-col{position:absolute;width:57%;height:130px;right:10px;bottom:9px;pointer-events:none}
 .promo-edition{left:26px;right:auto;bottom:24px;font-size:7px;max-width:90px;line-height:1.8}
 .promo-edition span{display:none}
 .promo-arrow{top:calc(8px + var(--card-height)/2);width:36px;height:36px;font-size:25px}
 .promo-controls{margin-top:-6px}.promo-rotation{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){.promo-slide,.promo-card,.promo-dot:after{transition:none!important}}
/* Before JS, keep a usable first banner and no overlapping interactive links. */
.promo-carousel-wrapper:not(.is-ready) .promo-slide:not(.is-active){visibility:hidden}
.promo-carousel-wrapper:not(.is-ready) .promo-controls,.promo-carousel-wrapper:not(.is-ready) .promo-arrow{visibility:hidden}
/* Uploaded complete campaigns: retain the supplied artwork and its full composition. */
.promo-card.is-artwork{display:block;padding:0;background:#fff;border-color:#c9ece7;border-radius:18px}
.promo-card.is-artwork:before,.promo-card.is-artwork .promo-edition{display:none}
.promo-banner-picture{position:absolute;inset:0;display:block}
.promo-banner-picture img{display:block;width:100%;height:100%;object-fit:contain}
.promo-card.is-artwork .promo-content-col{display:none}
.promo-artwork-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.promo-card.is-artwork .promo-artwork-link:focus-visible{outline-offset:-5px}
@media(max-width:600px){
 .promo-card.is-artwork{border-radius:16px;background:#f7fdfb}
 .promo-card.is-artwork .promo-banner-picture{height:176px;bottom:auto;background:#e7f8f5;border-bottom:1px solid #d6ece5}
 .promo-card.is-artwork .promo-banner-picture img{object-fit:contain}
 .promo-card.is-artwork .promo-content-col{display:block;margin-top:176px;padding:20px 22px 24px}
 .promo-card.is-artwork .promo-title-text{font-size:27px;line-height:1.14;letter-spacing:-1px}
 .promo-card.is-artwork .promo-subtitle-text{font-size:12px;line-height:1.6}
 .promo-card.is-artwork .promo-artwork-link{display:none}
}
/* Independent HTML CTA, positioned in percent of the fitted banner artwork. */
.promo-card.is-artwork{container-type:inline-size}
.promo-artwork-stage{position:absolute;left:50%;top:50%;width:var(--canvas-width,100%);height:var(--canvas-height,100%);transform:translate(-50%,-50%)}
.promo-artwork-link{inset:auto;left:var(--cta-left,5.5%);top:var(--cta-top,77.5%);width:var(--cta-width,20.5%);height:var(--cta-height,17.5%);display:flex;align-items:center;justify-content:center;gap:9px;padding:3px 8px;background:#006c74;color:#fff;border:1px solid #0a8d91;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff20,0 3px 7px #064e5025;font-size:clamp(9px,1.6cqw,15px);font-weight:750;line-height:1.15;text-align:center;z-index:3}
.promo-artwork-link svg{width:1.1em;height:1.1em;flex:0 0 1.1em}
.promo-clickable-cta{position:relative;isolation:isolate;overflow:hidden;transition:background .18s,box-shadow .18s,transform .13s;-webkit-tap-highlight-color:transparent}
.promo-artwork-link.promo-clickable-cta{position:absolute}
.promo-button-label,.promo-clickable-cta>svg{position:relative;z-index:1;pointer-events:none}
.promo-clickable-cta:hover{background:#00858b;color:#fff;box-shadow:inset 0 1px 0 #ffffff20,0 5px 13px #006c7430}
.promo-clickable-cta:active,.promo-clickable-cta.is-activated{transform:scale(.97);background:#004e58;color:#fff;box-shadow:inset 0 3px 7px #003b5360}
.promo-ripple{position:absolute;border-radius:50%;background:#b6fff175;transform:scale(0);animation:promo-ripple .6s ease-out forwards;pointer-events:none;z-index:0}
@keyframes promo-ripple{to{transform:scale(1);opacity:0}}
@media(max-width:600px){.promo-card.is-artwork .promo-artwork-stage{left:0;top:0;width:100%;height:176px;transform:none}.promo-card.is-artwork .promo-banner-picture{height:100%}.promo-card.is-artwork .promo-cta-btn{min-height:44px}.promo-card.is-artwork .promo-artwork-link{display:none}}
@media(prefers-reduced-motion:reduce){.promo-clickable-cta{transition:none}.promo-clickable-cta:active,.promo-clickable-cta.is-activated{transform:none}.promo-ripple{display:none}}
