.hla-wrap{
	--hla-bg:linear-gradient(90deg,#e61a10,#f07a0a);--hla-text:#fff;--hla-lbg:#fff;--hla-lcol:#d81f0f;
	--hla-radius:8px;--hla-gap:12px;--hla-mt:6px;--hla-mb:6px;--hla-pad:4px;--hla-fs:1;--hla-ls:1;--hla-sepgap:8px;--hla-max:100%;--hla-hover:#fff;--hla-sepc:#fff;--hla-ox:0px;--hla-sticky:0px;
	box-sizing:border-box;width:calc(100% - 2 * var(--hla-gap));max-width:min(var(--hla-max),calc(100% - 2 * var(--hla-gap)));
	margin:var(--hla-mt) auto var(--hla-mb);clear:both;transform:translateX(var(--hla-ox));font-family:inherit;position:relative;z-index:1;
}
.hla-wrap *{box-sizing:border-box;font-family:inherit}
.hla-bar{
	display:flex;align-items:center;gap:.6em;min-width:0;overflow:hidden;
	padding:var(--hla-pad) .6em var(--hla-pad) var(--hla-pad);
	background:var(--hla-bg);color:var(--hla-text);border-radius:var(--hla-radius);
	font-size:calc(.85em * var(--hla-fs));line-height:1.35;
}
.hla-label{
	display:inline-flex;align-items:center;flex:0 0 auto;padding:.22em .8em;border-radius:999px;background:var(--hla-lbg);color:var(--hla-lcol);
	font-size:calc(1.12em * var(--hla-ls));font-weight:800;line-height:1.2;text-transform:var(--hla-lcase,uppercase);letter-spacing:.02em;white-space:nowrap;
}
.hla-view{position:relative;flex:1 1 auto;min-width:0;overflow:hidden}
.hla-item{color:var(--hla-text);font-size:.92em;font-weight:700;text-decoration:none;white-space:nowrap;text-transform:var(--hla-icase,none)}
.hla-item.is-plain{cursor:default}
a.hla-item:hover,a.hla-item:focus{color:var(--hla-hover);text-decoration:underline}
.hla-sep{display:inline-block;margin:0 var(--hla-sepgap);color:var(--hla-sepc);opacity:.75;font-weight:700}

/* Marquee */
.hla-wrap.is-marquee .hla-track{display:flex;width:max-content;animation:hla-scroll var(--hla-dur,40s) linear infinite;will-change:transform}
.hla-wrap.is-marquee .hla-group{display:flex;flex:none;align-items:center;white-space:nowrap}
.hla-wrap.is-marquee.pause .hla-bar:hover .hla-track,
.hla-wrap.is-marquee.pause .hla-bar:focus-within .hla-track,
.hla-wrap.is-marquee.pause .hla-bar:active .hla-track{animation-play-state:paused}
@keyframes hla-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Rotate */
.hla-wrap.is-rotate .hla-view{height:1.5em}
.hla-wrap.is-rotate .hla-track{position:relative;height:100%}
.hla-wrap.is-rotate .hla-item{
	position:absolute;left:0;right:0;top:0;overflow:hidden;text-overflow:ellipsis;
	opacity:0;transform:translateY(70%);transition:opacity .4s ease,transform .4s ease;pointer-events:none;
}
.hla-wrap.is-rotate .hla-item.is-active{opacity:1;transform:none;pointer-events:auto}

@media (max-width:480px){
	.hla-bar{gap:.5em;font-size:calc(.8em * var(--hla-fs))}
	.hla-label{padding:.2em .7em}
}
@media (max-width:360px){
	.hla-wrap.hide-label-m .hla-label{display:none}
	.hla-wrap.hide-label-m .hla-bar{padding-left:.8em}
}
@media (prefers-reduced-motion:reduce){
	.hla-wrap.is-marquee .hla-track{animation:none}
	.hla-wrap.is-marquee .hla-view{overflow-x:auto;scrollbar-width:none}
	.hla-wrap.is-marquee .hla-group[aria-hidden="true"]{display:none}
	.hla-wrap.is-rotate .hla-item{transition:none}
}

/* Rata bar, bayangan, menempel */
.hla-wrap.align-left{margin-left:var(--hla-gap);margin-right:auto}
.hla-wrap.align-right{margin-right:var(--hla-gap);margin-left:auto}
.hla-wrap.has-shadow .hla-bar{box-shadow:0 3px 8px rgba(0,0,0,.18)}
.hla-wrap.is-sticky{position:sticky;top:var(--hla-sticky);z-index:999}
.admin-bar .hla-wrap.is-sticky{top:calc(var(--hla-sticky) + 32px)}
@media (max-width:782px){.admin-bar .hla-wrap.is-sticky{top:calc(var(--hla-sticky) + 46px)}}

/* Titik berdetak */
.hla-dot{position:relative;flex:none;display:inline-block;width:.55em;height:.55em;margin-right:.5em;border-radius:50%;background:var(--hla-dot,currentColor);animation:hla-throb 1.4s ease-in-out infinite}
.hla-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:hla-ring 1.4s ease-out infinite}
@keyframes hla-throb{0%,100%{transform:scale(1)}50%{transform:scale(.78)}}
@keyframes hla-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hla-dot,.hla-dot:after{animation:none}}

/* Lebar & posisi disamakan dengan konten situs (diatur otomatis oleh JS di desktop) */
.hla-wrap.is-fit{width:var(--hla-w);max-width:none;margin-left:var(--hla-ml);margin-right:0}
