.kw{--ink:#0a0e1a;--ink2:#121a33;--gold:#d4af6a;--gold2:#f3e2b3;--ivory:#f4efe4;--mute:#8d93a8;--ruby:#e0556a;--em:#5fcf9b;
position:relative;overflow:hidden;box-sizing:border-box;max-width:1040px;margin:2rem auto;padding:clamp(1.25rem,4vw,2.75rem);border-radius:28px;color:var(--ivory);font:400 16px/1.55 Manrope,system-ui,sans-serif;
background:radial-gradient(120% 90% at 10% 0%,#17224a 0%,var(--ink) 60%);border:1px solid rgba(212,175,106,.28);box-shadow:0 40px 90px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.kw *{box-sizing:border-box}
.kw-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none;animation:kw-float 14s ease-in-out infinite}
.kw-orb1{width:340px;height:340px;background:#d4af6a;top:-140px;right:-80px}
.kw-orb2{width:300px;height:300px;background:#2b45a8;bottom:-140px;left:-90px;animation-delay:-7s}
@keyframes kw-float{50%{transform:translate(-30px,40px) scale(1.12)}}
.kw>*{position:relative;z-index:1}
.kw-head{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.kw h2{margin:0;font:600 clamp(1.7rem,4.2vw,2.5rem)/1.1 "Cormorant Garamond",Georgia,serif;letter-spacing:.01em;color:var(--gold2)}
.kw h3{margin:0 0 .5rem;font:600 1.5rem/1.2 "Cormorant Garamond",Georgia,serif;color:var(--gold2)}
.kw-live{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:99px;font-size:.8rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.kw-live i{width:8px;height:8px;border-radius:50%;background:var(--mute)}
.kw-live.on i{background:var(--em);box-shadow:0 0 0 0 rgba(95,207,155,.6);animation:kw-ping 2s infinite}
.kw-live.off i{background:var(--gold)}
@keyframes kw-ping{70%{box-shadow:0 0 0 9px rgba(95,207,155,0)}100%{box-shadow:0 0 0 0 rgba(95,207,155,0)}}
.kw-ticker{overflow:hidden;margin:0 -1rem 1.5rem;padding:.7rem 0;border-block:1px solid rgba(212,175,106,.2);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.kw-track{display:flex;width:max-content;gap:2.5rem;animation:kw-scroll 45s linear infinite}
.kw-ticker:hover .kw-track{animation-play-state:paused}
@keyframes kw-scroll{to{transform:translateX(-50%)}}
.kw-t{display:inline-flex;gap:.6rem;align-items:baseline;white-space:nowrap;font-size:.9rem}
.kw-t b{color:var(--gold);font-weight:600;letter-spacing:.06em}.kw-t em{font-style:normal;color:var(--ivory)}
.kw-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:1.25rem}
.kw-card{position:relative;padding:clamp(1.1rem,3vw,1.75rem);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;transition:border-color .5s,box-shadow .5s}
.kw-card::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(212,175,106,.16),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.kw-card:hover::before{opacity:1}
.kw label{display:block;font-size:.85rem;color:var(--mute);margin-bottom:.35rem}
.kw-amount{width:100%;padding:.8rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(5,8,18,.55);color:var(--ivory);font:500 1.4rem Manrope,sans-serif;outline:0;transition:border-color .3s,box-shadow .3s}
.kw-amount:focus,.kw select:focus-visible{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,106,.18)}
.kw-pair{display:flex;align-items:center;gap:.6rem;margin:1rem 0}
.kw select{flex:1;min-width:0;appearance:none;-webkit-appearance:none;padding:.75rem 2.2rem .75rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.14);color:var(--ivory);font:500 .95rem Manrope,sans-serif;outline:0;cursor:pointer;transition:border-color .3s;
background:rgba(5,8,18,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23d4af6a' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center}
.kw select:hover{border-color:rgba(212,175,106,.5)}.kw option{background:#121a33;color:#f4efe4}
.kw-swap{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer;display:grid;place-items:center;transition:transform .6s cubic-bezier(.3,1.4,.4,1),background .3s,color .3s}
.kw-swap:hover{background:var(--gold);color:var(--ink)}.kw-swap.spin{transform:rotate(180deg)}
.kw-swap:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.kw-result{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.08)}
.kw-cur{color:var(--gold);font:600 1.1rem Manrope,sans-serif;letter-spacing:.06em}
.kw-out{font:600 clamp(2.2rem,6.5vw,3.5rem)/1.1 "Cormorant Garamond",Georgia,serif;word-break:break-all;background:linear-gradient(100deg,var(--gold) 20%,#fff6d8 45%,var(--gold) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:kw-shine 5s linear infinite}
@keyframes kw-shine{to{background-position:-220% 0}}
.kw-result.pop .kw-out{animation:kw-shine 5s linear infinite,kw-pop .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes kw-pop{from{transform:translateY(8px) scale(.97);opacity:.4}}
.kw-rate{margin:.5rem 0 0;color:var(--mute);font-size:.88rem}
.kw-gwrap{position:relative;max-width:300px;margin:0 auto}
.kw-gauge{display:block;width:100%;height:auto}
.kw-trk,.kw-arc{fill:none;stroke-width:12;stroke-linecap:round}
.kw-trk{stroke:rgba(255,255,255,.09)}
.kw-arc{stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset .25s linear;filter:drop-shadow(0 0 8px rgba(212,175,106,.45))}
.kw-gtxt{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;line-height:1.2}
.kw-gtxt small{color:var(--mute);font-size:.8rem}
.kw-big{font:600 clamp(1.7rem,5vw,2.2rem) "Cormorant Garamond",Georgia,serif;color:var(--ivory)}
.kw-badge{margin-top:.35rem;padding:.2rem .75rem;border-radius:99px;font-size:.78rem;font-weight:600;border:1px solid currentColor;transition:color .4s,background .4s}
[data-level=ok] .kw-badge{color:var(--em)}[data-level=mid] .kw-badge{color:var(--gold)}
[data-level=warn] .kw-badge{color:#f0a060}
[data-level=danger] .kw-badge{color:#fff;background:var(--ruby);border-color:var(--ruby);animation:kw-alert 1.6s ease-in-out infinite}
@keyframes kw-alert{50%{box-shadow:0 0 0 8px rgba(224,85,106,.0),0 0 22px rgba(224,85,106,.7)}}
[data-level=danger] .kw-scn{border-color:rgba(224,85,106,.55);box-shadow:0 0 50px -12px rgba(224,85,106,.55)}
.kw-range{width:100%;margin:1.25rem 0 .75rem;height:6px;border-radius:9px;appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,var(--em),var(--gold),var(--ruby));outline:0;cursor:pointer}
.kw-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--ivory);border:3px solid var(--gold);box-shadow:0 2px 12px rgba(0,0,0,.5);transition:transform .2s}
.kw-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ivory);border:3px solid var(--gold)}
.kw-range:active::-webkit-slider-thumb{transform:scale(1.2)}
.kw-range:focus-visible{outline:2px solid var(--gold2);outline-offset:6px}
.kw-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.kw-chips button{padding:.4rem .9rem;border-radius:99px;border:1px solid rgba(212,175,106,.4);background:transparent;color:var(--gold2);font:500 .82rem Manrope,sans-serif;cursor:pointer;transition:background .3s,color .3s,transform .2s}
.kw-chips button:hover,.kw-chips button.on{background:var(--gold);color:var(--ink)}.kw-chips button:active{transform:scale(.95)}
.kw-stats{margin:0;display:grid;gap:.1rem}
.kw-stats div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.kw-stats dt{color:var(--mute);font-size:.88rem}.kw-stats dd{margin:0;font-weight:600;text-align:right}
.kw-up{color:var(--ruby)}.kw-down{color:var(--em)}
.kw-note{margin:1.25rem 0 0;font-size:.78rem;color:var(--mute)}
/* satu urutan masuk saat data siap */
.kw:not(.kw-in) .kw-head,.kw:not(.kw-in) .kw-ticker,.kw:not(.kw-in) .kw-card,.kw:not(.kw-in) .kw-note{opacity:0}
.kw-in .kw-head,.kw-in .kw-ticker,.kw-in .kw-card,.kw-in .kw-note{animation:kw-rise .9s cubic-bezier(.2,.8,.2,1) both}
.kw-in .kw-ticker{animation-delay:.12s}.kw-in .kw-conv{animation-delay:.25s}.kw-in .kw-scn{animation-delay:.4s}.kw-in .kw-note{animation-delay:.55s}
@keyframes kw-rise{from{opacity:0;transform:translateY(24px)}}
@media(max-width:820px){.kw-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.kw *,.kw-orb{animation:none!important;transition:none!important}.kw:not(.kw-in) .kw-head,.kw:not(.kw-in) .kw-ticker,.kw:not(.kw-in) .kw-card,.kw:not(.kw-in) .kw-note{opacity:1}}

/* ===== Daftar kurs: satu baris ringkas, bisa digeser, zoom mewah saat disentuh ===== */
.kd{box-sizing:border-box;max-width:1100px;margin:1.5rem auto;padding:.9rem 0 .5rem;background:#fff;color:#1f2933;font:400 16px/1.3 Figtree,system-ui,sans-serif}
.kd *{box-sizing:border-box}
.kd-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:0 1.1rem .25rem}
.kd-ttl{display:flex;flex-direction:column;min-width:0}
.kd-ttl b{font-weight:600;color:#1f2933;font-size:1.05rem}
.kd-ttl span{font-size:.78rem;color:#7b8490}
.kd-nav{display:flex;gap:.6rem;flex:none}
.kd-nav button{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#1c7ab8;background:#fff;border:1px solid #e6e9ee;
box-shadow:0 1px 2px rgba(60,70,85,.1),0 8px 16px -8px rgba(60,70,85,.35);transition:transform .35s cubic-bezier(.3,1.5,.4,1),border-color .3s,box-shadow .3s,color .3s}
.kd-nav button:hover{border-color:#1c7ab8;transform:scale(1.1);box-shadow:0 2px 4px rgba(60,70,85,.12),0 12px 20px -8px rgba(60,70,85,.45)}
.kd-nav button:active{transform:scale(1.22);color:#0f5d8c}
.kd-nav button:focus-visible{outline:2px solid #1c7ab8;outline-offset:3px}
.kd-nav button.pulse::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid #1c7ab8;animation:kd-ring .6s ease-out forwards;pointer-events:none}
@keyframes kd-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
.kd-view{overflow:hidden;padding:14px 0 24px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.kd-view.drag{cursor:grabbing}.kd-view:focus-visible{box-shadow:inset 0 0 0 2px #cfe2f3}
.kd-track{display:flex;gap:12px;width:max-content;will-change:transform}
.kd-item{position:relative;flex:none;width:148px;overflow:hidden;padding:.55rem .7rem .6rem;text-align:left;cursor:pointer;outline:0;border-radius:13px;background:#fff;border:1px solid #eceff2;
box-shadow:0 1px 2px rgba(60,70,85,.08),0 8px 16px -10px rgba(60,70,85,.3);transition:transform .5s cubic-bezier(.2,1.2,.3,1),box-shadow .5s,border-color .5s}
.kd-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,#1c7ab8 0 6px,#5aa6d6 6px 8px);transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.2,.9,.25,1)}
.kd-item::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(28,122,184,.14),transparent);transform:skewX(-18deg);pointer-events:none}
.kd-item:hover,.kd-item:focus-visible,.kd-item.on{transform:translateY(-3px) scale(1.06);border-color:#d3e5f5;background:linear-gradient(135deg,#fff 25%,#e8f2fd);box-shadow:0 22px 30px -14px rgba(28,122,184,.45),0 2px 6px rgba(60,70,85,.08)}
.kd-item:hover::before,.kd-item:focus-visible::before,.kd-item.on::before{transform:scaleY(1)}
.kd-item:active{transform:scale(1.09)}
.kd-item.on{z-index:3;transform:translateY(-4px) scale(1.12);box-shadow:0 28px 36px -14px rgba(28,122,184,.55),0 2px 6px rgba(60,70,85,.1)}
.kd-item.on::after{animation:kd-sweep .9s ease-out}
@keyframes kd-sweep{to{left:140%}}
.kd-n{display:flex;align-items:baseline;gap:.4rem;font-size:.9rem;font-weight:600;letter-spacing:.02em;transform-origin:left center;transition:transform .5s cubic-bezier(.2,1.2,.3,1)}
.kd-nm{min-width:0;font-size:.66rem;font-weight:400;color:#7b8490;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd-p{margin:.3rem 0 .35rem;font-size:1.2rem;font-weight:500;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;transform-origin:left center;transition:transform .5s cubic-bezier(.2,1.2,.3,1),color .4s}
.kd-p small{margin-right:.3em;font-size:.58em;font-weight:400;color:#8a929c}
.kd-item:hover .kd-p,.kd-item:focus-visible .kd-p,.kd-item.on .kd-p{color:#0f5d8c}.kd-item.on .kd-p{transform:scale(1.1)}.kd-item.on .kd-n{transform:scale(1.06)}.kd-item:hover .kd-b,.kd-item.on .kd-b{box-shadow:0 8px 14px -6px rgba(60,70,85,.35)}
.kd-r{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.kd-b{display:inline-block;padding:.2em .55em;border-radius:7px;font-size:.7rem;font-weight:600;white-space:nowrap}
.kd-b.up{background:#fdeceb;color:#c62828}.kd-b.down{background:#e4f4ea;color:#1b7f3b}.kd-b.flat,.kd-b.new{background:#eceff2;color:#5b6470}
.kd-s{font-size:.62rem;color:#8a929c;white-space:nowrap}
.kd-note{margin:0 1.1rem;font-size:.76rem;color:#8a929c}
@media(prefers-reduced-motion:reduce){.kd *{transition:none!important;animation:none!important}}

/* badge besar dan mewah saat kartu diklik */
.kd-b{position:relative;overflow:hidden;transform-origin:left center;transition:transform .6s cubic-bezier(.2,1.4,.3,1),box-shadow .5s,background .4s,color .4s}
.kd-b.up{--g:rgba(198,40,40,.38)}.kd-b.down{--g:rgba(27,127,59,.38)}.kd-b.flat,.kd-b.new{--g:rgba(91,100,112,.32)}
.kd-b::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-20deg);pointer-events:none}
.kd-s{transition:opacity .35s,transform .45s}
.kd-item.on .kd-s{opacity:0;transform:translateX(10px)}
.kd-item.on .kd-b{transform:scale(1.5);letter-spacing:.02em;box-shadow:0 10px 18px -6px rgba(60,70,85,.45),inset 0 0 0 1px rgba(255,255,255,.75);animation:kd-pop .75s cubic-bezier(.2,1.4,.3,1),kd-glow 2.4s ease-out .75s infinite}
.kd-item.on .kd-b::after{animation:kd-sheen 2.4s ease-in-out .4s infinite}
.kd-item.on .kd-b.up{background:linear-gradient(135deg,#ffe9e7,#ffc4bf)}
.kd-item.on .kd-b.down{background:linear-gradient(135deg,#e9f8ef,#bfe8cf)}
.kd-item.on .kd-b.flat,.kd-item.on .kd-b.new{background:linear-gradient(135deg,#f7f9fb,#dde3ea)}
@keyframes kd-pop{0%{transform:scale(1)}55%{transform:scale(1.8)}100%{transform:scale(1.5)}}
@keyframes kd-sheen{0%{left:-80%}55%,100%{left:140%}}
@keyframes kd-glow{from{box-shadow:0 10px 18px -6px rgba(60,70,85,.45),inset 0 0 0 1px rgba(255,255,255,.75),0 0 0 0 var(--g)}to{box-shadow:0 10px 18px -6px rgba(60,70,85,.45),inset 0 0 0 1px rgba(255,255,255,.75),0 0 0 14px transparent}}

/* penyempurnaan lencana: bayangan tipis, tepi champagne, kilap kaca */
.kd-b.up{--g:rgba(198,40,40,.22)}.kd-b.down{--g:rgba(27,127,59,.22)}.kd-b.flat,.kd-b.new{--g:rgba(91,100,112,.2)}
.kd-item:hover .kd-b{box-shadow:0 3px 8px -4px rgba(60,70,85,.22)}
.kd-b::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#f6e7bd,#b8924a 45%,#f6e7bd);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .6s;pointer-events:none}
.kd-item.on .kd-b::before{opacity:1}
.kd-item.on .kd-b{font-weight:700;letter-spacing:.03em;box-shadow:0 4px 10px -5px rgba(60,70,85,.28),inset 0 1px 0 rgba(255,255,255,.9);animation:kd-pop .75s cubic-bezier(.2,1.4,.3,1),kd-glow 3s ease-out .75s infinite}
.kd-item.on .kd-b.up{background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 55%),linear-gradient(135deg,#ffeceb,#ffcfca)}
.kd-item.on .kd-b.down{background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 55%),linear-gradient(135deg,#ecf9f1,#c6ebd5)}
.kd-item.on .kd-b.flat,.kd-item.on .kd-b.new{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 55%),linear-gradient(135deg,#f8fafc,#e1e7ee)}
@keyframes kd-glow{from{box-shadow:0 4px 10px -5px rgba(60,70,85,.28),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 0 var(--g)}to{box-shadow:0 4px 10px -5px rgba(60,70,85,.28),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 7px transparent}}

/* kedipan saat kurs berubah */
.kw-t em.f-up{animation:kw-fu 1.8s ease-out}.kw-t em.f-dn{animation:kw-fd 1.8s ease-out}
@keyframes kw-fu{0%{color:#ff8b9b;text-shadow:0 0 12px rgba(224,85,106,.7)}}
@keyframes kw-fd{0%{color:#7be0b0;text-shadow:0 0 12px rgba(95,207,155,.7)}}
.kd-p.f-up{animation:kd-fu 1.8s ease-out}.kd-p.f-dn{animation:kd-fd 1.8s ease-out}
@keyframes kd-fu{0%{color:#c62828;text-shadow:0 0 14px rgba(198,40,40,.35)}}
@keyframes kd-fd{0%{color:#1b7f3b;text-shadow:0 0 14px rgba(27,127,59,.35)}}

/* Slot otomatis: versi ringkas daftar kurs */
.kw-slot{width:100%;box-sizing:border-box;padding:6px 12px 0}
.kw-slot .kd{margin:0 auto;max-width:100%;padding:0;background:transparent}
.kw-slot .kd-head,.kw-slot .kd-note{display:none}
.kw-slot .kd-view{padding:4px 0 7px}.kw-slot .kd-track{gap:5px}
.kw-slot .kd-item{width:76px;padding:.22rem .32rem .28rem;border-radius:7px}
.kw-slot .kd-n{font-size:.6rem}.kw-slot .kd-nm,.kw-slot .kd-s{display:none}
.kw-slot .kd-p{font-size:.72rem;margin:.08rem 0 .12rem}.kw-slot .kd-p small{font-size:.55em}.kw-slot .kd-b{font-size:.48rem;padding:.14em .38em;border-radius:5px}
.kw-slot .kd-err .kd-head{display:block;padding:6px 12px;font-size:12px;color:#c62828}.kw-slot .kd-err .kd-ttl b{display:none}
.kw-slot-mewah{padding:10px 12px}

/* Cocok dengan tema (Koran dkk): pakai variabel warna tema bila ada, dengan cadangan */
.kw-slot{background:var(--bg,transparent)}
.kw-slot .kd-item{background:var(--card,#fff);border-color:var(--line,#eceff2);color:var(--text,#1f2933)}
.kw-slot .kd-item:hover,.kw-slot .kd-item:focus-visible,.kw-slot .kd-item.on{background:var(--soft,#e8f2fd);border-color:var(--line,#d3e5f5)}
.kw-slot .kd-item.on .kd-p,.kw-slot .kd-item:hover .kd-p{color:var(--red,#0f5d8c)}
.kw-slot .kd-item::before{background:var(--red,#1c7ab8)}
.kw-slot .kd-p small,.kw-slot .kd-nm{color:var(--muted,#7b8490)}
[data-theme=dark] .kw-slot .kd-b.up{background:rgba(224,85,106,.18);color:#ff8a9a}
[data-theme=dark] .kw-slot .kd-b.down{background:rgba(95,207,155,.16);color:#6fe0ad}
[data-theme=dark] .kw-slot .kd-b.flat,[data-theme=dark] .kw-slot .kd-b.new{background:rgba(255,255,255,.08);color:#98a0b8}
[data-theme=dark] .kw-slot .kd-item.on .kd-p,[data-theme=dark] .kw-slot .kd-item:hover .kd-p{color:#fff}

/* Semua kartu muat di layar (desktop): tampil rata satu baris, tanpa geser */
.kw-slot{display:block;width:100%}
.kw-slot .kd{width:100%;max-width:var(--wrap,1140px);margin:0 auto;padding:0 14px}
.kd-static .kd-view{-webkit-mask:none;mask:none;cursor:default;overflow:visible}
.kd-static .kd-track{width:100%;transform:none!important;justify-content:center}
.kd-static .kd-item[aria-hidden="true"]{display:none}
.kw-slot .kd-static .kd-item{flex:1 1 0;min-width:0;width:auto;max-width:120px}

/* Jumlah kartu terlihat tertentu di desktop (lebar dihitung JS) */
.kd.kd-wide .kd-item{width:var(--kd-w)}
.kw-slot .kd.kd-wide .kd-item{padding:.4rem .6rem .45rem;border-radius:10px}
.kw-slot .kd.kd-wide .kd-n{font-size:.85rem}
.kw-slot .kd.kd-wide .kd-nm{display:block}
.kw-slot .kd.kd-wide .kd-p{font-size:1.05rem;margin:.15rem 0 .2rem}
.kw-slot .kd.kd-wide .kd-p small{font-size:.6em}
.kw-slot .kd.kd-wide .kd-b{font-size:.66rem;padding:.16em .45em;border-radius:6px}
.kw-slot .kd.kd-wide .kd-track{gap:8px}
.kw-slot .kd.kd-wide.kd-static .kd-item{max-width:none}