/* KulturBunt — radio skala u maniru starih plejera
   Zavisi od kulturbunt-brend.css. Bez novih boja; sve iz tokena.
   Zamenjuje kb-radio.css na ovoj strani. */

.kb-skala {
  background: var(--kb-mastilo);
  color: #EDE7DC;
  --kb-podloga: var(--kb-mastilo);
  --kb-tekst: #EDE7DC;
  --kb-tekst-tiho: #7C756B;
  --kb-linija: #3A3530;
  --kb-linija-znak: #6B645B;
  --kb-akcent: #FF5330;
  --kb-kartica: #1F1C19;
  padding: 1.1rem 1.1rem 1rem;
  container-type: inline-size;
}

/* ---- prozorčić: gde je igla, šta svira ---- */

.kb-skala__prozor {
  background: var(--kb-kartica);
  border: 1px solid var(--kb-linija);
  padding: 0.85rem 0.9rem 0.9rem;
  border-radius: 14px;
}

.kb-skala__linija {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--kb-meta);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--kb-tekst-tiho);
}
.kb-skala__zemlja { color: var(--kb-akcent); }

/* naziv klizi kad ne staje, kao na displeju plejera */
.kb-skala__ekran {
  overflow: hidden;
  margin: 0.5rem 0 0.15rem;
}
.kb-skala__naziv {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--kb-displej);
  font-weight: 900;
  font-size: clamp(1.35rem, 4.5cqi, 2rem);
  line-height: 1.1;
}
.kb-skala__naziv--klizi {
  animation: kb-klizi 14s linear infinite;
  padding-right: 3rem;
}
@keyframes kb-klizi {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(calc(-100% + 100cqi - 2rem)); }
}

.kb-skala__pesma {
  font-family: var(--kb-tekst-font);
  font-size: 1rem;
  color: var(--kb-tekst-tiho);
  margin: 0;
}

/* ---- traka sa crticama ---- */

.kb-skala__traka {
  position: relative;
  height: 64px;
  margin: 1.15rem 0 0.35rem;
  border-bottom: 1px solid var(--kb-linija);
  border-radius: 10px 10px 0 0;
  touch-action: manipulation;
}

/* jedna crtica po izdanju, poređana po zemlji zapad→istok */
.kb-skala__zarez {
  position: absolute;
  bottom: 0;
  width: 16px;
  margin-left: -8px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.kb-skala__zarez i {
  width: 2px;
  height: 14px;
  background: var(--kb-linija-znak);
  transition: height 140ms ease, background 140ms ease;
}
.kb-skala__zarez:hover i { height: 24px; }
.kb-skala__zarez[aria-current='true'] i {
  height: 30px;
  background: var(--kb-akcent);
}
.kb-skala__zarez:focus-visible {
  outline: 2px solid var(--kb-akcent);
  outline-offset: 2px;
}

/* šest oznaka zemalja, fiksni redosled */
.kb-skala__kanali {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  height: 24px;
}
.kb-skala__kanal {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--kb-meta);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--kb-tekst-tiho);
  background: none;
  border: 0;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
}
.kb-skala__kanal[aria-current='true'] { color: var(--kb-akcent); }
.kb-skala__kanal:focus-visible { outline: 2px solid var(--kb-akcent); outline-offset: 2px; }

.kb-skala__igla {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 64px;
  margin-left: -1px;
  background: var(--kb-akcent);
  transition: left 620ms cubic-bezier(.32, .72, .28, 1);
  pointer-events: none;
}

/* ---- dugmad ---- */

.kb-skala__red {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}
.kb-skala__dugme {
  font-family: var(--kb-meta);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--kb-tekst);
  background: transparent;
  border: 1px solid var(--kb-linija-znak);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
/* mirovanje: roze ivica + roze ikona, tamna pozadina */
.kb-skala__dugme--ikona {
  border-color: #B63480;
  color: #B63480;
}
/* aktivno: pozadina #B63480, komanda bela, ivica stapa s pozadinom */
.kb-skala__dugme--ikona:hover,
.kb-skala__dugme--ikona:active,
.kb-skala__dugme--ikona.is-aktivno {
  background: #B63480;
  border-color: #B63480;
  color: #fff;
}
.kb-skala__dugme:focus-visible { outline: 2px solid var(--kb-akcent); outline-offset: 2px; }
.kb-skala__dugme--pusti {
  border-color: var(--kb-akcent);
  color: var(--kb-akcent);
}

/* dugmad sa ikonicom (Pusti / Prethodno / Sledeće) */
.kb-skala__dugme--ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.8rem;
}
.kb-skala__dugme--ikona svg { width: 16px; height: 16px; display: block; }

/* "Sound ON" indikator — zelena lampica na tamnoj podlozi (nije prekidač) */
.kb-skala__zvuk {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--kb-mastilo);
  color: #EDE7DC;
  border: 1px solid var(--kb-linija-znak);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  font-family: var(--kb-meta);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.kb-skala__lampica {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ECC71;
  box-shadow: 0 0 6px 1px rgba(46, 204, 113, 0.75);
  flex: none;
}
.kb-skala__brojac {
  margin-left: auto;
  font-family: var(--kb-meta);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--kb-tekst-tiho);
}

/* dok se štimuje, prozorčić se blago povuče — kartica se otvara tek na sletanju */
.kb-skala--stim .kb-skala__prozor { opacity: 0.55; }
.kb-skala__prozor { transition: opacity 200ms ease; }

/* plejer se pojavljuje tek kad posetilac klikne Pusti */
.kb-skala__plejer:empty { display: none; }
.kb-skala__plejer {
  margin-top: 0.9rem;
  border: 1px solid var(--kb-linija);
  border-radius: 12px;
  overflow: hidden;
}
.kb-skala__plejer iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .kb-skala__igla { transition: none; }
  .kb-skala__naziv--klizi { animation: none; }
}

@media (max-width: 560px) {
  .kb-skala__brojac { margin-left: 0; width: 100%; }
}

.kb-skala__izlaz {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--kb-linija);
  font-family: var(--kb-meta);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.kb-skala__izlaz a { color: var(--kb-tekst-tiho); }
.kb-skala__izlaz a:hover { color: var(--kb-akcent); }