/* WCA Audio player: the "Dengarkan artikel" card, the mini player and the highlight of the paragraph being read. */
.wcaud-btn { margin-top: 6px; width: 100%; max-width: 520px; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border: 1px solid rgba(236, 208, 138, .4);
	border-radius: 18px; background: rgba(11, 15, 23, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f3eee4; text-align: left; cursor: pointer; font: inherit; }
.wcaud-btn:hover { border-color: rgba(236, 208, 138, .7); }
.wcaud-btn:focus-visible, .wcaud-ap button:focus-visible { outline: 2px solid #ecd08a; outline-offset: 2px; }
.wcaud-pb { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(180deg, #ecd08a, #c9a24a); color: #1a1408; box-shadow: 0 6px 18px rgba(201, 162, 74, .35); }
.wcaud-pb svg { width: 17px; height: 17px; fill: currentColor; }
.wcaud-tx { flex: 1; min-width: 0; }
.wcaud-tx b { display: block; font: 600 15.5px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #f6f1e6; }
.wcaud-tx small { display: block; margin-top: 3px; font: 500 12px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #cfc8bb; }
.wcaud-wv { display: flex; gap: 3px; align-items: center; height: 26px; flex: none; }
.wcaud-wv i { width: 3px; border-radius: 2px; background: rgba(236, 208, 138, .55); }
.wcaud-on .wcaud-wv i { animation: wcaud-eq 1s ease-in-out infinite; }
.wcaud-on .wcaud-wv i:nth-child(2n) { animation-delay: -.35s; }
.wcaud-on .wcaud-wv i:nth-child(3n) { animation-delay: -.7s; }
@keyframes wcaud-eq { 0%, 100% { height: 3px; } 50% { height: 20px; } }
.wcaud-top { margin: 0 0 22px; }
.wcaud-top .wcaud-btn { background: rgba(127, 127, 127, .08); color: inherit; }
.wcaud-top .wcaud-tx b, .wcaud-top .wcaud-tx small { color: inherit; }

.wcaud-ap { position: fixed; z-index: 9990; left: 50%; bottom: var(--wcaud-b, 16px); width: min(560px, calc(100% - 24px)); translate: -50% 160%; opacity: 0; pointer-events: none;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding: 10px; border-radius: 20px;
	background: rgba(19, 24, 34, .93); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(236, 208, 138, .28); box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
	color: #f3eee4; font: 14px/1.3 Inter, system-ui, sans-serif; transition: translate .35s cubic-bezier(.2, .9, .3, 1), opacity .3s; }
.wcaud-ap.show { translate: -50% 0; opacity: 1; pointer-events: auto; }
.wcaud-ap button { font: inherit; color: inherit; cursor: pointer; }
.wcaud-pp { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #ecd08a, #c9a24a); color: #1a1408 !important; }
.wcaud-pp svg { width: 18px; height: 18px; fill: currentColor; }
.wcaud-tt b { display: flex; align-items: center; gap: 7px; font: 600 13.5px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcaud-tt b span:last-child { overflow: hidden; text-overflow: ellipsis; }
.wcaud-tt small { display: block; margin-top: 3px; font: 500 11px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #8d8a84; font-variant-numeric: tabular-nums; }
.wcaud-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; flex: none; }
.wcaud-eq i { width: 3px; height: 4px; background: #ecd08a; border-radius: 1px; }
.wcaud-ap.playing .wcaud-eq i { animation: wcaud-eq2 1s ease-in-out infinite; }
.wcaud-ap.playing .wcaud-eq i:nth-child(2) { animation-delay: -.3s; }
.wcaud-ap.playing .wcaud-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes wcaud-eq2 { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.wcaud-sp, .wcaud-x { height: 34px; min-width: 44px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .05); font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace !important; color: #ecd08a !important; }
.wcaud-x { min-width: 34px; font-size: 16px !important; color: #cfc8bb !important; }
.wcaud-bar { grid-column: 1 / -1; height: 14px; margin: -2px 0 -6px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.wcaud-bar i { display: block; height: 4px; width: 100%; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.wcaud-bar i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a6a2a, #ecd08a); }
body.wcaud-open .wcab-chat, body.wcaud-open #wcat-top, body.wcaud-open .e-contact-buttons { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
.wcaud-cur { border-radius: 6px; background: linear-gradient(90deg, rgba(201, 162, 74, .14), rgba(201, 162, 74, 0) 75%); box-shadow: -14px 0 0 -10px #ecd08a; transition: background .3s, box-shadow .3s; }
@media (prefers-reduced-motion: reduce) {
	.wcaud-on .wcaud-wv i, .wcaud-ap.playing .wcaud-eq i { animation: none; }
	.wcaud-ap { transition: none; }
}