/* V57.4 — THE 105.6 SIGNAL SYSTEM. Visual-only layer over the locked #57 engine. */
.signal-ui{--signal-red:var(--coral);--signal-line:rgba(255,249,235,.18);--signal-metal:#999b94;--signal-amber:#e2a466}
.signal-ui :is(.nav button,.listen-pill,.dock-control,.dock-expand,.dock-more,.text-link,.media-section-head>button,.content-copy button,.business-cta-actions a,.footer-v57-actions button,.footer-v57-actions a,.teaser-card){transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.signal-ui :is(.nav button,.listen-pill,.vinyl-button,.dock-control,.dock-expand,.dock-more,.text-link,.media-section-head>button,.content-copy button,.business-cta-actions a,.footer-v57-actions button,.footer-v57-actions a,.teaser-card):focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--cream),0 0 0 7px var(--coral)}
.signal-ui :is(button,a):active:not(:disabled){transition-duration:.06s}
.signal-ui .listen-pill{isolation:isolate;background:linear-gradient(160deg,#292b28,#141615);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.3);gap:11px}
.signal-ui .listen-pulse{font-size:0!important;width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px #121411,0 0 0 3px rgba(255,249,235,.13);opacity:.55;animation:none}
.signal-ui .listen-wave{width:18px;height:18px;margin:0;gap:2px;padding:3px 1px;border-bottom:1px solid var(--signal-line);align-items:flex-end}
.signal-ui .listen-wave i{width:2px;border-radius:0;background:#a6ab9d;opacity:.42;height:3px}
.signal-ui .listen-wave i:nth-child(2){height:5px}.signal-ui .listen-wave i:nth-child(3){height:8px}.signal-ui .listen-wave i:nth-child(4){height:11px}
.signal-ui .listen-triangle{position:relative;display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border:1px solid rgba(255,249,235,.3);background:var(--cream);border-radius:50%;padding:0;box-shadow:inset 0 -2px 0 rgba(25,24,23,.12)}
.signal-ui .listen-triangle::before{position:absolute;left:11.5px;top:8px;width:0;height:0;margin:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--ink);background:none;box-shadow:none}
.signal-ui.is-playing .listen-triangle{background:var(--lime);border-color:var(--lime)}
.signal-ui.is-playing .listen-triangle::before{left:9.5px;top:8px;width:3px;height:10px;margin:0;border:0;background:var(--ink);box-shadow:6px 0 0 var(--ink)}
.signal-ui.is-playing .listen-pulse{opacity:1;box-shadow:0 0 0 2px #121411,0 0 0 3px rgba(255,80,59,.2),0 0 8px rgba(255,80,59,.25)}
.signal-ui.is-playing .listen-wave i{background:var(--lime);opacity:1;animation:v57Wave .72s ease-in-out infinite alternate}
.signal-ui.is-playing .listen-wave i:nth-child(2){animation-delay:.12s}.signal-ui.is-playing .listen-wave i:nth-child(3){animation-delay:.27s}.signal-ui.is-playing .listen-wave i:nth-child(4){animation-delay:.39s}
.signal-ui.is-connecting .listen-pulse{opacity:1;animation:signalStandby 1.2s ease-in-out infinite}
.signal-ui.is-connecting .listen-wave i{animation:none;opacity:.5;background:var(--signal-amber)}
.signal-ui[data-signal-state="error"] .listen-pulse{opacity:.3;box-shadow:0 0 0 2px #121411,0 0 0 3px var(--signal-line)}

/* Native cursor, real hotspot, no DOM follower or pointer-move work. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
  .signal-ui{cursor:url('./assets/signal-cursor.svg') 3 2,auto}
  .signal-ui :is(button,a,[role="button"]){cursor:url('./assets/signal-cursor-link.svg') 3 2,pointer}
  .signal-ui :is(button,a,[role="button"]) *{cursor:inherit}
  .signal-ui :is(p,h1,h2,h3,.eyebrow){cursor:text}
  .signal-ui :is(input,textarea,[contenteditable="true"]){cursor:text}
  .signal-ui :is(select,label,audio,video,[role="slider"]){cursor:auto}
  .signal-ui :is(#screen-warga,.chat-phone),.signal-ui :is(#screen-warga,.chat-phone) *{cursor:auto}
  .signal-ui :is(#screen-warga,.chat-phone) :is(button,a){cursor:pointer}
  .signal-ui #screen-warga :is(input,textarea,[contenteditable="true"]){cursor:text}
  .signal-ui :is(button,a):disabled{cursor:not-allowed}
}

/* A small directional family; SVG uses currentColor rather than platform glyphs. */
.signal-arrow{display:inline-flex;flex:none;align-items:center;justify-content:center;width:15px;height:15px;margin-left:8px;vertical-align:-2px;line-height:0;pointer-events:none;transition:transform .18s ease}
.signal-arrow svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.signal-arrow[data-direction="external"]{--signal-dx:2px;--signal-dy:-2px}
.signal-arrow[data-direction="next"]{--signal-dx:3px;--signal-dy:0px}
.signal-arrow[data-direction="previous"]{transform:rotate(180deg);--signal-dx:-3px;--signal-dy:0px}
.signal-arrow[data-direction="detail"]{transform:rotate(-90deg)}
.dock-expand[aria-expanded="true"] .signal-arrow{transform:rotate(90deg)}
@media(hover:hover){
  .signal-ui :is(button,a):hover>.signal-arrow,.signal-ui :is(button,a):hover>span>.signal-arrow{translate:var(--signal-dx,2px) var(--signal-dy,0px)}
  .signal-ui .nav button:hover{color:var(--coral)}
  .signal-ui .teaser-card:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--ink)}
  .signal-ui :is(.text-link,.media-section-head>button,.content-copy button):hover{border-bottom-color:var(--coral)}
  .signal-ui :is(.business-cta-actions a,.footer-v57-actions a):hover{background:var(--ink);color:var(--cream)}
}
.signal-ui :is(.teaser-foot,.hero-chat-jump,.sticker-top,.phone-foot,.pulse-chat,.footer-v57-actions button,.footer-v57-actions a,.business-cta-actions a,.ecosystem-tile-copy a){align-items:center}
.signal-ui .teaser-foot .signal-arrow{margin:0}
.signal-ui .dock-expand .signal-arrow{width:12px;height:12px;margin-left:4px}
.signal-ui .dock-more .signal-arrow{width:11px;height:11px;margin-left:4px}
.signal-ui .signal-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* Provisional hardware artwork, integrated without changing the page grid. */
.signal-tuner{position:absolute;right:23px;top:43px;width:clamp(190px,25%,270px);pointer-events:none;isolation:isolate}
.signal-tuner svg{display:block;width:100%;height:auto;overflow:visible}
.signal-tuner [data-signal-needle]{transform:translateX(var(--signal-needle-x,0px));transition:transform .32s cubic-bezier(.22,.7,.24,1)}
.signal-tuner [data-signal-indicator]{opacity:.3;transition:opacity .2s}
.signal-ui[data-signal-state="playing"] .signal-tuner [data-signal-indicator]{opacity:1}
.signal-ui .serang-now::after{opacity:.35}
.signal-ui .serang-now-body>div{position:relative;z-index:1}
.signal-ui .vinyl-button{top:26px;left:50%;width:min(296px,calc(100% - 26px));height:auto;aspect-ratio:2/1;border-radius:10px;max-width:296px;padding:0;transform:translateX(-50%);filter:none;outline-offset:0;transition:filter .2s}
.signal-turntable-art{display:block;width:100%;height:100%;pointer-events:none;scale:1.12;transform-origin:center}
.signal-turntable-art svg{display:block;width:100%;height:100%;overflow:visible}
.signal-turntable-art .signal-record{transform-box:fill-box;transform-origin:center;animation:signalRecord 4s linear infinite;animation-play-state:paused}
.signal-ui.is-playing .signal-turntable-art .signal-record{animation-play-state:running}
.signal-turntable-control{position:absolute;left:86.875%;top:80.3125%;translate:-50% -50%;width:23px;height:23px;border-radius:50%;background:var(--cream);border:1px solid rgba(25,24,23,.45);display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.3);pointer-events:none}
.signal-transport{position:relative;width:12px;height:12px;display:block}
.signal-transport::before{content:'';position:absolute;left:3px;top:1px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--ink)}
.is-playing .signal-transport::before{left:1px;top:1px;width:3px;height:10px;border:0;background:var(--ink);box-shadow:6px 0 0 var(--ink)}
.signal-ui.is-playing .signal-turntable-control{background:var(--lime)}
@media(hover:hover){.signal-ui .vinyl-button:hover{filter:brightness(1.07)}}

/* Sticky deck: same fixed height, same existing controls and accessible state. */
.signal-ui .radio-dock{background:linear-gradient(180deg,#292b29 0,#1b1d1b 12%,#151715 100%);box-shadow:0 -4px 20px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.1)}
.signal-ui .radio-dock::before,.signal-ui .radio-dock::after{content:'';position:absolute;top:9px;width:3px;height:3px;border-radius:50%;background:#101210;box-shadow:0 1px 0 rgba(255,249,235,.18);pointer-events:none}
.signal-ui .radio-dock::before{left:9px}.signal-ui .radio-dock::after{right:9px}
.signal-ui .dock-control{border:1px solid rgba(255,249,235,.4);background:radial-gradient(circle at 36% 25%,#3b3e38,#171917 68%);box-shadow:inset 0 0 0 3px #151715,inset 0 0 0 4px rgba(255,249,235,.12),0 2px 3px rgba(0,0,0,.35)}
.signal-ui .dock-control:hover{transform:none;border-color:var(--coral)}
.signal-ui.is-playing .dock-control{border-color:var(--lime)}
.signal-ui .dock-icon{border-left-color:var(--cream)}
.signal-ui.is-playing .dock-icon::before{background:var(--lime);box-shadow:8px 0 0 var(--lime)}
.signal-ui .dock-program-logo{border:1px solid rgba(255,249,235,.3);box-shadow:inset 0 0 0 2px #141613}
.signal-deck-display{height:42px;width:105px;border:1px solid #090c09;border-radius:4px;background:linear-gradient(150deg,#10150f,#202a1d);box-shadow:inset 0 1px 4px #050705,0 1px 0 rgba(255,249,235,.16);padding:6px 9px;display:grid;grid-template-columns:auto 1fr;column-gap:5px;align-items:center;color:#d3d8c1;flex:0 0 auto;line-height:1}
.signal-deck-display>span:first-child{font-size:6px;letter-spacing:.1em;align-self:end;padding-bottom:2px;opacity:.6}
.signal-deck-display>strong{font:600 18px/.9 'Courier New',monospace;letter-spacing:-.04em}
.signal-deck-display>span:last-child{grid-column:1/-1;font-size:5px;letter-spacing:.2em;margin-top:4px;opacity:.65}
.signal-ui[data-signal-state="connecting"] .signal-deck-display{color:var(--signal-amber)}
.signal-ui[data-signal-state="playing"] .signal-deck-display{color:var(--lime)}
.signal-ui[data-signal-state="error"] .signal-deck-display{color:#b5afa2}
.signal-ui .dock-bars span{background:#8a9080;opacity:.45}
.signal-ui.is-playing .dock-bars span{background:var(--lime);opacity:1}
.signal-ui.is-connecting .dock-control::after{border:1px solid var(--signal-amber);border-right-color:transparent;animation:spin 1.6s linear infinite}
.signal-ui .dock-expand{border-color:rgba(255,249,235,.28);background:rgba(255,249,235,.025)}
.signal-ui .dock-more{background:var(--cream);color:var(--ink)}

/* One optional in-card reward; never fixed over content or a CTA. */
.signal-reward{position:absolute;left:18px;top:18px;z-index:3;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid rgba(255,249,235,.24);border-radius:3px;background:#191c19;color:var(--cream);font-size:6px;font-weight:800;letter-spacing:.13em;opacity:0;translate:0 2px;pointer-events:none}
.signal-reward i{width:4px;height:4px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px rgba(255,80,59,.15)}
.signal-reward.is-noticed{animation:signalReward 2.3s ease both}
@keyframes signalReward{0%,100%{opacity:0;translate:0 2px}15%,80%{opacity:1;translate:0 0}}
@keyframes signalStandby{50%{opacity:.3}}
.signal-tuner.is-acquiring [data-signal-needle]{animation:signalAcquire 1.35s cubic-bezier(.2,.55,.25,1) both}
.signal-arrow[data-direction="down"]{transform:rotate(90deg);--signal-dx:0px;--signal-dy:3px}
@keyframes signalAcquire{0%,10%{transform:translateX(-190.4px)}38%{transform:translateX(-106.4px)}74%{transform:translateX(-36.4px)}100%{transform:translateX(0)}}
@keyframes signalRecord{to{rotate:360deg}}

/* Desktop editorial rhythm. Font families, copy and mobile type stay intact. */
@media(min-width:901px){
  .signal-ui .listen-copy{line-height:1.1;font-size:10px;letter-spacing:.06em}
  .signal-ui .listen-copy::after{content:'105.6 FM';display:block;margin-top:4px;font:600 6px/1 'Courier New',monospace;letter-spacing:.16em;color:#b0b3a8}
  .signal-ui .hero-type strong{font-size:clamp(82px,7.35vw,152px);line-height:.89;letter-spacing:-.022em}
  .signal-ui .hero-small{font-size:clamp(18px,2.2vw,36px);letter-spacing:-.04em;line-height:1.1;margin-bottom:8px}
  .signal-ui .hero-bottom p{line-height:1.55;max-width:31ch}
  .signal-ui .section-heading h2{font-size:clamp(36px,4.5vw,66px);line-height:.99;letter-spacing:-.018em}
  .signal-ui .serang-now h2{font-size:clamp(42px,4.5vw,78px);line-height:.95;letter-spacing:-.02em;max-width:none}
  .signal-ui .serang-now-body{grid-template-columns:minmax(0,1fr) auto;gap:16px}
  .signal-ui .serang-now-body>div{max-width:100%}
  .signal-ui .serang-now-body>div>p{max-width:44ch}
  .signal-ui .serang-now-play{align-self:end}
  .signal-ui .warga-pulse h2{font-size:clamp(40px,3.7vw,63px);line-height:.96;letter-spacing:-.02em}
  .signal-ui .media-section-head{align-items:end;gap:24px}
  .signal-ui .media-section-head>div{min-width:0}
  .signal-ui .media-section-head>button{flex-shrink:0}
  .signal-ui .media-section-head h2{font-size:clamp(53px,6.4vw,103px);line-height:.93;letter-spacing:-.022em}
  .signal-ui .content-copy h3{font-size:clamp(33px,2.85vw,54px);line-height:.96;letter-spacing:-.012em}
  .signal-ui .event-heat-grid h3{font-size:clamp(32px,2.8vw,54px);line-height:.98;letter-spacing:-.012em}
  .signal-ui .crew-teaser-grid b{font-size:28px;line-height:.99;letter-spacing:-.01em}
  .signal-ui .section-intro h1{font-size:clamp(62px,9.6vw,158px);line-height:.88;letter-spacing:-.02em;max-width:16ch}
  .signal-ui .section-intro p{line-height:1.6;max-width:62ch}
  .signal-ui .program-details h2{line-height:1.02;letter-spacing:-.012em}
  .signal-ui .ecosystem-head h2{font-size:clamp(51px,6.2vw,103px);line-height:.94;letter-spacing:-.02em;max-width:21ch}
  .signal-ui .ecosystem-tile-copy h3{font-size:clamp(34px,3.7vw,62px);line-height:.97;letter-spacing:-.012em}
  .signal-ui .business-cta h2{font-size:clamp(48px,5.5vw,91px);line-height:.96;letter-spacing:-.02em}
  .signal-ui .footer-v57-brand strong{font-size:clamp(61px,6.5vw,112px);line-height:.9;letter-spacing:-.02em}
}
@media(min-width:901px) and (max-width:1100px){.signal-ui .serang-now-body>div{max-width:100%}.signal-ui .serang-now h2{font-size:44px}.signal-tuner{width:180px;right:19px;top:39px}.signal-ui .serang-now-body>div>p{max-width:40ch}}
@media(max-width:900px){.signal-deck-display{display:none}.signal-tuner{width:145px;top:auto;bottom:13px;right:18px}.signal-ui .vinyl-button{height:auto;max-width:296px}.signal-ui .listen-wave{display:none}}
@media(max-width:620px){
  .signal-ui .listen-pill{gap:9px}.signal-ui .listen-pulse{width:6px;height:6px;flex-basis:6px}.signal-ui .listen-triangle{width:26px;height:26px;flex-basis:26px}.signal-ui .listen-triangle::before{left:10.5px;top:7px}.signal-ui.is-playing .listen-triangle::before{left:8.5px;top:7px}
  .signal-ui .signal-tuner{width:112px;right:16px;bottom:13px}
  .signal-ui .vinyl-button{width:calc(100% - 16px);height:auto;top:55px}.signal-turntable-control{width:19px;height:19px}
  .signal-ui .radio-dock{height:62px}.signal-ui .dock-control::before{content:'105.6';position:absolute;bottom:4px;left:0;right:0;text-align:center;font:600 4px/1 'Courier New',monospace;letter-spacing:.08em;color:#a0a599;pointer-events:none}
  .signal-ui .signal-arrow{width:13px;height:13px}
  .signal-ui .media-section-head{flex-wrap:wrap;row-gap:8px}.signal-ui .media-section-head>div{min-width:0;max-width:100%}.signal-ui .media-section-head>button{margin-top:0}
  .signal-reward{left:13px;top:13px;font-size:5px;padding:5px 6px}
}
@media(prefers-reduced-motion:reduce){
  .signal-ui *, .signal-ui *::before,.signal-ui *::after{scroll-behavior:auto!important}
  .signal-ui :is(.listen-pulse,.listen-wave i,.signal-record,.signal-reward),.signal-ui .dock-control::after{animation:none!important}
  .signal-ui :is(.signal-arrow,[data-signal-needle],.teaser-card,.nav button,.listen-pill,.dock-control,.text-link){transition:none!important}
  .signal-ui .signal-reward{display:none}.signal-ui .signal-arrow{translate:none!important}
}

/* Neutralize the old glyph-only wrappers before inserting the SVG family. */
body.signal-ui .signal-glyph-host{display:inline-flex;align-items:center;width:auto;height:auto;padding:0;margin-left:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;font-size:inherit;line-height:0}
body.signal-ui .signal-glyph-host::before,body.signal-ui .signal-glyph-host::after{content:none}

@media(min-width:901px) and (max-width:1320px){.signal-ui .hero-type strong{font-size:clamp(94px,9.2vw,140px)}}
@media(min-width:901px){.signal-ui .collab-header h2{font-size:clamp(30px,3.8vw,60px);letter-spacing:-.02em;line-height:1.04}.signal-ui .work-hero h1{font-size:clamp(84px,11.1vw,176px);line-height:.84;letter-spacing:-.025em}.signal-ui .work-small{font-size:clamp(18px,2.2vw,32px);line-height:1.03}.signal-ui .work-form-copy h2{font-size:clamp(42px,4.6vw,70px);line-height:1;letter-spacing:-.015em}}

@media(max-width:620px){.signal-ui .serang-wave{height:70px}}

@media(min-width:901px){.signal-ui #talent-title{font-size:clamp(64px,8.5vw,125px);line-height:.9;letter-spacing:-.045em}}