/* ==========================================================================
   VARIJABLE / RESET
   ========================================================================== */
/* Outfit - self-hostan (bez Google Fonts zavisnosti). Licenca: fonts/LICENSE-Outfit-OFL.txt */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Tipografska skala (baza 16px, korak ~1.25). Sve velicine na stranici
     referiraju ove varijable - bez ad-hoc rem vrijednosti. */
  --font-main: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-2xs: 0.72rem;    /* mikro labeli (uppercase meta) */
  --fs-xs: 0.8125rem;   /* nav, badgevi, celije tablice */
  --fs-sm: 0.9375rem;   /* naslovi kartica, prateci tekst */
  --fs-base: 1rem;      /* tekst proze */
  --fs-lg: 1.25rem;     /* ime u detaljima */
  --fs-xl: 1.5rem;      /* h2 u detaljnom panelu */
  --fs-2xl: 1.625rem;   /* h1 sekcije (uppercase, prostrijeljen) */

  --dark-bg: #121214;
  --dark-bg-2: #1a1a1d;
  --light-bg: #17171a;
  --light-card: #212125;
  --text-dark: #d9d9dd;
  --text-muted: #9a9aa2;
  --accent: #e63946;
  --tab-inactive: #8a8a8f;
  --tab-active: #ffffff;
  --tab-hover: #d8d8db;
  --border-soft: rgba(255,255,255,0.09);
  /* Override-a se u css/generated-vars.css (generira sync_input_to_site.py)
     kad postoji Input data/slike/naslovna/pozadina.* */
  --naslovna-bg-image: none;
  /* visina sticky headera - koristi se za offset pri scrollanju do sekcije */
  --header-h: 72px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--fs-base);
  color: var(--text-dark);
  background: var(--light-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
  font-family: var(--font-main);
  letter-spacing: 0.04em;
  font-weight: 700;
}

button, select, input, textarea {
  font-family: inherit;
}

a { color: var(--accent); }

.hidden { display: none !important; }

/* ==========================================================================
   HEADER (taman)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dark-bg);
  /* vidljiv hairline - prije je bio #1px solid #000, nevidljiv na tamnoj podlozi */
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
}

.logo-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
.logo-btn:hover { opacity: 1; }
.logo-img {
  height: 30px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  gap: 30px;
}

/* Aktivni tab nosi tanku podvlaku umjesto text-shadow sjaja. */
.nav-tab {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tab-inactive);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  padding: 4px 0 8px;
  transition: color 0.2s ease;
}
.nav-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--tab-active);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-tab:hover {
  color: var(--tab-hover);
}
.nav-tab.active {
  color: var(--tab-active);
}
.nav-tab.active::after {
  transform: scaleX(1);
}

.lang-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
}
.lang-opt {
  color: var(--tab-inactive);
  transition: color 0.2s ease;
}
.lang-sep { color: rgba(255,255,255,0.22); }
.lang-toggle:hover .lang-opt { color: var(--tab-hover); }

/* Aktivni jezik ostaje bijel i na hoveru. */
html[lang="hr"] .lang-hr,
html[lang="en"] .lang-en,
html[lang="hr"] .lang-toggle:hover .lang-hr,
html[lang="en"] .lang-toggle:hover .lang-en {
  color: var(--tab-active);
}

/* ==========================================================================
   NASLOVNA (taman, crna ovca sitea)
   ========================================================================== */
.naslovna {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  box-sizing: border-box;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Naslovna nije dio scrolla - odvrti intro pa se sakrije (.hidden). */
.naslovna.leaving {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}

/* Ulaz glavne stranice nakon naslovne. Klasa se uklanja po zavrsetku
   animacije - transform na .app-content bio bi containing block za sticky
   zaglavlje repertoara, pa ga ne smijemo ostaviti trajno. */
.site-header.entering {
  animation: headerIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-content.entering {
  animation: contentIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
@keyframes headerIn {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes contentIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header.entering,
  .app-content.entering { animation: none; }
}

/* Foto-pozadina (ako postoji Input data/slike/naslovna/pozadina.*): lagano
   mutna i blijeda, tako da logo/moto ostanu jasno čitljivi preko nje. Kad
   fotke nema, --naslovna-bg-image je "none" i vidi se samo crna podloga. */
.naslovna-photo-bg {
  position: absolute;
  inset: -20px;
  z-index: 0;
  pointer-events: none;
  background-image: var(--naslovna-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(0.45) brightness(0.9);
}
/* Vinjeta preko foto-pozadine — tamna preko cijele širine (logo je vrlo
   širok, mora ostati čitljiv i pri rubovima), blago tamnija u sredini. */
.naslovna-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.5) 100%);
}

.naslovna-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: auto;
}

/* Wordmark razlozen na slojeve. Mjere znaka unutar platna 1000x200:
   x 346-482 (left 34.6%, width 13.7%), y 22-177 (top 11%, height 78%).
   Znak je vodoravno na 41.4% sirine, a treba doci na 50% (sredina) - to je
   pomak od 8.6% sirine kutije, sto je 62.8% vlastite sirine znaka.
   Logotip je namjerno velik (1100px) da znak bez ikakvog skaliranja bude
   dovoljno velik kad se pojavi na sredini - nema faze smanjivanja. */
.naslovna-logo {
  position: relative;
  width: min(1100px, 92vw);
  aspect-ratio: 1000 / 200;
  line-height: 0;
  /* Znak se krece SAMO vodoravno - vertikalna pozicija je od pocetka do kraja
     ista (ona koju ima u wordmarku), pa nema nikakvog dizanja ni spustanja. */
  --mark-shift-x: 62.8%;
}
.nl-part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}
/* Granice reza idu u PRAZNINE izmedu glifova (332-345 i 483-499), ne na sam
   rub znaka - inace u svakom sloju ostane stupac piksela znaka i vidi se
   tanka crtica zalijepljena na slovo O. */
.nl-alg { clip-path: inset(0 66% 0 0); }
.nl-ritam { clip-path: inset(0 0 0 49%); }

.nl-mark {
  position: absolute;
  left: 34.6%;
  top: 11%;
  width: 13.7%;
  height: 78%;
  display: block;
  opacity: 0;
  transform-origin: center;
}

.naslovna-motto {
  color: var(--tab-inactive);
  letter-spacing: 0.45em;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}
.naslovna-motto span {
  display: inline-block;
  opacity: 0;
}

/* --- Auto-intro (window 2.5s) ----------------------------------------
   1. 0-0.25s    znak se pojavi 2.6x velik, na vodoravnoj sredini kutije
                 (vertikalna pozicija je ista kao konacna - scale ide oko centra)
   2. 0.25-0.90s znak se istovremeno smanjuje i putuje ulijevo
   3. 0.88s      otkrivanje ALG i RITAM IZ znaka (animirani clip-path)
   4. 0.88s      PLAY dolazi s lijeva, REPEAT s desna

   Zasto 0.88s a ne 0.90s: krivulja putovanja ostavlja rep u kojem je znak
   vizualno vec stigao. S cubic-bezier(0.5,0,0.7,1) znak prijede 98% puta na
   0.852s, pa preostalih 48ms ne registrira oko. Da otkrivanje cekamo do
   punih 0.90s, osjeti se mrtva pauza. Preklop od 20ms daje dojam da reveal
   krece TOCNO kad znak sjedne.
   Animacija zavrsava na ~1.45s, statika do 2.5s.
   -------------------------------------------------------------------- */
.naslovna.intro .nl-mark {
  animation: markToPlace 0.9s linear forwards;
}
.naslovna.intro .nl-alg {
  animation: algReveal 0.5s cubic-bezier(0.33, 0, 0.2, 1) 0.88s forwards;
}
.naslovna.intro .nl-ritam {
  animation: ritamReveal 0.5s cubic-bezier(0.33, 0, 0.2, 1) 0.88s forwards;
}
.naslovna.intro .nm-play {
  animation: mottoFromLeft 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.88s forwards;
}
.naslovna.intro .nm-amp {
  animation: mottoFade 0.55s ease-out 0.98s forwards;
}
.naslovna.intro .nm-repeat {
  animation: mottoFromRight 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.88s forwards;
}

/* Skaliranje ide oko centra, pa se vertikalna pozicija znaka ne mijenja;
   translateX ga vodi s vodoravne sredine kutije na mjesto slova O. */
@keyframes markToPlace {
  0% {
    opacity: 0;
    transform: translateX(var(--mark-shift-x)) scale(2.6);
    animation-timing-function: ease-out;
  }
  28% {
    opacity: 1;
    transform: translateX(var(--mark-shift-x)) scale(2.6);
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 1);
  }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
/* Rez se siri IZ znaka: pocetna sirina je nula na rubu znaka. */
@keyframes algReveal {
  from { opacity: 1; clip-path: inset(0 66% 0 34%); }
  to   { opacity: 1; clip-path: inset(0 66% 0 0); }
}
@keyframes ritamReveal {
  from { opacity: 1; clip-path: inset(0 51% 0 49%); }
  to   { opacity: 1; clip-path: inset(0 0 0 49%); }
}
@keyframes mottoFromLeft {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mottoFromRight {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mottoFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Bez animacije: sve odmah vidljivo na konacnim pozicijama. */
@media (prefers-reduced-motion: reduce) {
  .naslovna.intro .nl-mark,
  .naslovna.intro .nl-alg,
  .naslovna.intro .nl-ritam,
  .naslovna.intro .naslovna-motto span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   CONTENT (svjetliji background)
   ========================================================================== */
.app-content {
  position: relative;
  background: var(--light-bg);
  min-height: calc(100vh - 62px);
  overflow: hidden;
}

/* Sve sekcije su slozene jedna pod drugom na istoj stranici. Navigacija ne
   mijenja sadrzaj, nego glatko scrolla do sekcije. min-height osigurava da se
   i kratka sekcija (npr. KONTAKT) moze dovesti do vrha ekrana. */
#app-content .page {
  min-height: calc(100vh - var(--header-h));
  scroll-margin-top: var(--header-h);
}

.page-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  transition: opacity 0.18s ease;
}

/* Fade koji se pušta pri promjeni jezika (nav + aktivni sadržaj) */
.lang-fade-out {
  opacity: 0.15;
}

/* Naslov sekcije: uppercase i prostrijeljen, u duhu logotipa. */
.page-inner h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
  margin: 0 0 26px;
}

/* Negativna gornja margina privlaci hint blize naslovu; sekcije bez hinta
   zadrzavaju punih 26px do sadrzaja. */
.hint {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: -18px 0 26px;
}

/* O NAMA */
.onama-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.onama-photo {
  width: 100%;
  aspect-ratio: 16 / 6;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--dark-bg-2), var(--dark-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
  letter-spacing: 0.1em;
  overflow: hidden;
}
.onama-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.onama-text {
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--text-dark);
  white-space: pre-line;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

/* ČLANOVI - uspravne kartice u nizu, fotografija dominira */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.member-card {
  background: linear-gradient(180deg, #26262b, #1b1b1e);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.member-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(0,0,0,0.5);
}
.member-card.selected {
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 16px 28px rgba(0,0,0,0.55);
}
.member-card-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--dark-bg);
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  overflow: hidden;
}
.member-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fotografije su portreti - drzi lice u gornjem dijelu kadra */
  object-position: center 22%;
  display: block;
  /* fotke su mjesavina crno-bijelih i kolor kadrova - grayscale ih ujednacuje */
  filter: grayscale(1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.member-card:hover .member-card-photo img { transform: scale(1.04); }

/* Samo ime, centrirano, u vecem fontu. Puno ime, uloga i opis su u detaljima. */
.member-card-body {
  padding: 14px 10px 16px;
  min-width: 0;
  text-align: center;
}
.member-card-body h3 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.3;
}

/* Kartice se pojavljuju odozdo, jedna za drugom, kad sekcija ude u vidno polje.
   "card-armed" je stanje PRIJE animacije (nevidljive) - bez njega bi kartice
   bljesnule vidljive prije nego animacija krene. Klasu postavlja JS, pa kartice
   ostaju vidljive ako JS ne radi.
   animation-fill-mode je namjerno "backwards", ne "forwards": forwards bi
   zakljucao transform i pokvario hover podizanje kartice. */
.member-card.card-armed,
.promo-card.card-armed { opacity: 0; }
.member-card.card-in,
.promo-card.card-in {
  animation: cardRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--card-delay, 0ms);
}
@keyframes cardRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .member-card.card-in,
  .promo-card.card-in { animation: none; }
}

/* Detalj o članu - otvara se ispod grida, BEZ okvira: kartica unutar mreze
   kartica stvarala je previse ugniježđenih kutija. Odnos prema mrezi nose
   razmak i animacija otvaranja. */
.member-detail {
  margin-top: 44px;
  padding: 0;
  position: relative;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.member-detail.opening {
  animation: detailIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes detailIn {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.member-detail.closing {
  animation: detailOut 0.4s ease forwards;
}
@keyframes detailOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-18px); }
}
.member-detail-photo {
  flex: 0 0 240px;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--dark-bg-2), var(--dark-bg));
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  overflow: hidden;
}
.member-detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.member-detail-text { flex: 1 1 280px; }
.member-detail-text h2 { margin: 0 0 6px; font-size: var(--fs-xl); }
.member-detail-role {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}
.member-detail-bio {
  line-height: 1.75;
  letter-spacing: 0.01em;
  white-space: pre-line;
  margin: 0;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

/* PROMO */
/* Pet pjesama u jednom redu; na kartici je samo naziv. */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.promo-card {
  background: linear-gradient(165deg, #26262b, #1b1b1e);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 20px 14px;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.promo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(0,0,0,0.5);
}
.promo-card.selected {
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 16px 28px rgba(0,0,0,0.55);
}
.promo-card h3 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  line-height: 1.4;
  color: var(--text-dark);
  transition: color 0.25s ease;
}
.promo-card:hover h3,
.promo-card.selected h3 { color: #fff; }

/* Detalj o pjesmi - bez okvira; video je sam po sebi dovoljno jak vizualni
   element pa mu obrub oko obruba nije potreban. */
.promo-detail {
  margin-top: 44px;
  padding: 0;
  position: relative;
}
.promo-detail.opening {
  animation: detailIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.promo-detail.closing {
  animation: detailOut 0.4s ease forwards;
}
.promo-detail-video {
  width: 100%;
  margin: 0 0 22px;
  aspect-ratio: 16/9;
  background: var(--dark-bg-2);
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: var(--fs-sm);
  overflow: hidden;
}
.promo-detail-video iframe { width: 100%; height: 100%; border: none; }
.promo-detail-info h2 { margin: 0 0 4px; font-size: var(--fs-xl); }
.promo-detail-artist {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}
.promo-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.promo-detail-meta-item {
  font-size: var(--fs-sm);
  color: var(--text-dark);
  line-height: 1.5;
}
.promo-detail-meta-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  display: block;
  margin-bottom: 3px;
}
.promo-detail-trivia {
  line-height: 1.75;
  letter-spacing: 0.01em;
  white-space: pre-line;
  margin: 0;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

/* REPERTOAR */
/* Jedan padajuci izbornik s dvije kategorije umjesto dva zasebna. */
.rep-filter {
  position: relative;
  margin-bottom: 26px;
}
.rep-filter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(165deg, #26262b, #1b1b1e);
  border: 1px solid var(--border-soft);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rep-filter-btn::after {
  content: "\25be";
  font-size: 0.8em;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.rep-filter-btn:hover { border-color: rgba(255,255,255,0.3); }
.rep-filter.open .rep-filter-btn {
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.rep-filter.open .rep-filter-btn::after { transform: rotate(180deg); }
.rep-filter-summary {
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

.rep-filter-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 540px;
  max-width: min(760px, 92vw);
  background: linear-gradient(165deg, #26262b, #1b1b1e);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55);
  padding: 6px 20px 18px;
}
.rep-filter.open .rep-filter-panel { display: block; }

.rep-filter-group + .rep-filter-group {
  margin-top: 6px;
  border-top: 1px solid var(--border-soft);
}
.rep-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0 10px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
/* "Odaberi sve" stoji skroz desno u zaglavlju svoje kategorije. */
.rep-select-all {
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.rep-select-all:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.45); }
.rep-select-all[disabled] { opacity: 0.35; cursor: default; }
.rep-select-all[disabled]:hover { color: var(--text-muted); border-bottom-color: transparent; }

.rep-group-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px 18px;
}
.rep-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text-dark);
  user-select: none;
}
.rep-opt:hover { background: rgba(255,255,255,0.06); }
.rep-opt input { accent-color: #ffffff; cursor: pointer; }
/* Zadnja odabrana vrijednost u kategoriji se ne moze odznaciti. */
.rep-opt.locked { cursor: default; }
.rep-opt.locked input { cursor: default; }
.rep-opt-count { margin-left: auto; color: var(--text-muted); font-size: var(--fs-2xs); }

/* Prikazuje se ~15 redova, ostatak se scrolla UNUTAR okvira (ne cijela
   stranica). 15 redova x ~42px + zaglavlje ~40px. */
.repertoar-table-wrap {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: auto;
  max-height: 670px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
.repertoar-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.repertoar-table-wrap::-webkit-scrollbar-track { background: transparent; }
.repertoar-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 99px;
  border: 3px solid var(--light-card);
}
.repertoar-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
.repertoar-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--light-card);
}
.repertoar-table th, .repertoar-table td {
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
}
/* Nazivi i izvodaci se pisu normalno (velika i mala slova), ne verzalom. */
.repertoar-table td {
  padding: 13px 16px;
  color: var(--text-dark);
}
.repertoar-table td.rep-cell-meta { color: var(--text-muted); }

/* Zaglavlje ostaje vidljivo pri scrollanju kroz popis. Donja linija je
   box-shadow, a ne border - border se pri sticky pozicioniranju odscrolla. */
.repertoar-table thead th {
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #232327;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border-soft);
}
/* Stil zaglavlja je isti kao naslovi promo pjesama i imena clanova. */
.repertoar-sort-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.11em;
  color: var(--text-dark);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}
.repertoar-sort-btn:hover,
.repertoar-sort-btn.sorted { color: #fff; }
.sort-arrow { font-size: 0.75em; min-width: 0.8em; }

.repertoar-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.repertoar-table tbody tr:hover { background: rgba(255,255,255,0.055); }
.repertoar-table tbody tr:last-child td { border-bottom: none; }

/* Redci se poslozu jedan ispod drugog pri prvom prikazu i na svaku promjenu
   filtera/sorta. Kaskada je ogranicena na prvih 14 redova - inace bi kod 129
   pjesama animacija trajala nekoliko sekundi. Zaglavlje se ne animira. */
.repertoar-table tbody tr.row-in {
  animation: rowIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--row-delay, 0ms);
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .repertoar-table tbody tr.row-in { animation: none; }
}

/* KONTAKT */
.kontakt-body { display: flex; flex-direction: column; gap: 14px; }
.kontakt-row { display: flex; gap: 10px; align-items: baseline; }
.kontakt-label { font-weight: 700; min-width: 130px; }
.kontakt-socials { display: flex; gap: 16px; margin-top: 8px; }
.kontakt-socials a { font-size: 1.6rem; text-decoration: none; }

/* ===== TEMP DEV GUMB — ukloniti prije lansiranja ===== */
.temp-reset-btn {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: #2a1a00;
  color: #ffcc66;
  border: 1px dashed #ffcc66;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.85;
}
.temp-reset-btn:hover { opacity: 1; }

/* Responsive */
@media (max-width: 720px) {
  .header-inner { flex-wrap: wrap; gap: 12px; }
  .main-nav { order: 3; width: 100%; justify-content: space-between; gap: 10px; overflow-x: auto; }
}