/* ----------- PALETA / VARS ----------- */
:root{
  --brand: #0033ff;     /* glavna plava */
  --accent:#0033ff;     /* sekundarna (ljubičasta) */
  --bg:     #09090b;    /* pozadina glavna */
  --bg-soft:#101014;    /* pozadina kartica */
  --text:   #e5e7eb;    /* primarni tekst */
  --muted:  #9ca3af;    /* sekundarni tekst */
  --border: #1f2937;    /* ivice */

  /* izvedene nijanse (automatski tamnije) */
  --brand-dim: color-mix(in oklab, var(--brand) 50%, transparent);
  --accent-dim: color-mix(in oklab, var(--accent) 50%, transparent);
}
/* ----------- SIDE GLOW (levi i desni) ----------- */
.side-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    linear-gradient(
      90deg,
      rgba(0, 51, 255, 0.3) 0%,
      rgba(0, 51, 255, 0.1) 8%,
      rgba(0, 51, 255, 0.05) 16%,
      transparent 35%,
      transparent 65%,
      rgba(0, 51, 255, 0.05) 84%,
      rgba(0, 51, 255, 0.1) 92%,
      rgba(0, 51, 255, 0.3) 100%
    );
  filter: blur(px);
}

/* @keyframes sidePulse {
  0%,100% { opacity:.65; filter:blur(120px); }
  50% { opacity:.85; filter:blur(140px); }
}
.side-glow {
  animation: sidePulse 3s ease-in-out infinite;
} */

/* ----------- GLOBAL ----------- */
*{ font-family: Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
.bg-site{ background: radial-gradient(60% 120% at 50% -20%, #0b0f1a, var(--bg) 60%); }
.text-site-foreground{ color: var(--text); }
.text-site-strong{ color:#d1d5db; }
.text-site-muted{ color: var(--muted); }
.text-brand{ color: var(--brand); }
.border-site-border{ border-color: var(--border); }
.bg-brand{ background: var(--brand); }
.bg-site-soft{ background: var(--bg-soft); }
.link{ color: inherit; transition: .2s; }
.link:hover{ color: var(--brand); }

.noise{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.04;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.25"/></svg>');
}

.font-extrabold {
  font-size: 30px;
}
/* ----------- HERO ----------- */
.hero{ position:relative; }
.hero-glow{ position:absolute; inset:-20% -10% auto -10%; height:60vh; pointer-events:none; z-index:-1;
  background:
    radial-gradient(40% 40% at 20% 10%, var(--brand) 0%, transparent 60%),
    radial-gradient(35% 35% at 80% 0%, var(--accent) 0%, transparent 60%);
  filter: blur(56px); opacity:.35;
}
.title{ font-weight:900; line-height:1.05; font-size:clamp(2.25rem, 3.5vw + 1rem, 3.5rem); margin-bottom:1rem; }
.grad-text{ background:linear-gradient(90deg,var(--brand),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{ color: var(--muted); }
.row{ display:flex; align-items:center; gap:.5rem; }
.icon{ width:1rem; height:1rem; }
.logo{ width:3rem; height:3rem; }

/* ----------- PILLS (neon transparent) ----------- */
.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .75rem; border-radius:999px;
}
.pill .icon{ width:.95rem; height:.95rem; }
.pill--neon{
  font-weight: bold;
  color:#0059ff;                                   /* svetla plava slova */
  background: rgba(10,13,22,.14);                  /* vrlo transparentno */
  border:1px solid rgb(0, 51, 255);             /* osnovni border */
  box-shadow:
    inset 0 0 0 1px rgba(0, 51, 255, 0.459),            /* inner ring */
    0 0 18px rgba(0, 51, 255, 0.61);                 /* blagi accent glow */
  text-shadow: 0 0 8px rgba(0,51,255,.35);         /* glow tekst */
  transition: box-shadow .25s, color .25s, border-color .25s, background .25s;
}
/* .pill--neon:hover{
  color:#0051ff;
  border-color: rgba(0,51,255,.55);
  box-shadow:
    inset 0 0 0 1px rgba(0,51,255,.35),
    0 0 22px rgba(0,51,255,.35),
    0 0 48px rgba(168,85,247,.18);
} */

/* ----------- KOMPONENTE ----------- */
.card{
  background: color-mix(in oklab, var(--bg-soft) 92%, transparent);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card--highlight{
  border-width:2px; border-color: var(--brand);
  position:relative;
}
.tag{
  position:absolute; right:1rem; top:-.8rem;
  background: linear-gradient(90deg,var(--brand),var(--accent)); color:white;
  font-size:.7rem; padding:.25rem .5rem; border-radius:999px;
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1rem;
  border-radius:.9rem; font-weight:600; transition:.2s;
  position:relative; border:0;
}
.btn .icon{ width:1rem; height:1rem; }
.btn-sm{ padding:.5rem .75rem; border-radius:.7rem; font-size:.9rem; }
.btn-xs{ padding:.35rem .6rem; font-size:.8rem; border-radius:.6rem; }

/* PUNI GRADIENT BUTTON (brand → accent) */
.btn-primary{
  color:#fff;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  box-shadow: 0 4px 20px color-mix(in oklab, var(--brand) 35%, transparent);
}
.btn-primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 6px 28px color-mix(in oklab, var(--accent) 35%, transparent);
}
.btn-primary:active{ transform: scale(.98); }

.btn-ghost{
  color:var(--text);
  background: color-mix(in oklab, var(--bg-soft) 70%, transparent);
}
.btn-ghost:hover{ outline:4px solid color-mix(in oklab, var(--brand) 18%, transparent); outline-offset:0; }
.btn-outline{
  background: color-mix(in oklab, var(--bg-soft) 70%, transparent); color:var(--text);
  border:1px solid var(--border);
}
.btn-outline:hover{ border-color: color-mix(in oklab, var(--brand) 60%, var(--border)); }
.btn:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand) 45%, transparent);
  outline-offset: 2px;
}

.input{
  background:#0b0c10; border:1px solid var(--border); border-radius:.9rem; padding:.65rem 1rem; color:var(--text);
}
.input:focus{ outline: none; border-color: color-mix(in oklab, var(--brand) 60%, var(--border)); }

.badge{
  font-size:.75rem; padding:.25rem .6rem; border-radius:999px;
  color:var(--brand);
  background: var(--brand-dim);
  border:1px solid color-mix(in oklab, var(--brand) 30%, transparent);
}

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.section-head{
  display: grid;
  grid-template-columns: 1fr auto; /* levo raste, desno prirodna širina */
  align-items: end;                 /* poravnaj SVE na dno */
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.section-head .nudge-down { transform: translateY(55px); }
.section-title{ font-size:1.6rem; font-weight:600; }

/* ratio placeholder */
.ratio{ aspect-ratio: 4/3; }

/* list */
.list{ color:#cbd5e1; list-style: disc; margin-left:1.25rem; }
.list li{ margin:.4rem 0; }

/* ----------- ARTIST KARTICE ----------- */
.artist{
  position:relative; overflow:hidden;
  background:
    linear-gradient(0deg, transparent, transparent 72%, var(--brand-dim)),
    color-mix(in oklab, var(--bg-soft) 92%, transparent);
  transition: .25s border-color ease, box-shadow .25s;
  border-color: color-mix(in oklab, var(--brand) 18%, var(--border));
}
.artist:hover{ border-color: color-mix(in oklab, var(--brand) 55%, var(--border)); box-shadow: 0 10px 35px color-mix(in oklab, var(--brand) 20%, transparent); }
.artist__media {
  aspect-ratio: 4/4;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--brand) 18%, transparent), color-mix(in oklab, var(--accent) 18%, transparent)),
    #0e1118;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.badge-dot{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; color:#cbd5e1;
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  border:1px solid color-mix(in oklab, var(--brand) 26%, transparent);
  padding:.25rem .5rem; border-radius:.6rem;
}
.badge-dot b{ width:.45rem; height:.45rem; border-radius:999px; display:inline-block; background: var(--brand); }

/* ----------- FAQ (više prostora + brend-dim highlight) ----------- */
.faq{
  border:1px solid var(--border); background: color-mix(in oklab, var(--bg-soft) 92%, transparent);
  border-radius: .9rem; overflow: hidden;
}
.faq > summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  padding:1rem 1rem .95rem; font-weight:600;
  transition: background .2s, border-color .2s;
}
.faq[open] > summary{
  background:
    linear-gradient(0deg, var(--brand-dim), transparent);
  border-bottom:1px solid color-mix(in oklab, var(--brand) 30%, var(--border));
}
.faq > summary .icon{ transition: transform .2s; }
.faq[open] > summary .icon{ transform: rotate(90deg); }
/* više prostora iznad teksta kad je otvoreno */
.faq > div{
  padding: 1.1rem 1rem 1rem;
  color:#cbd5e1;
}

/* ----------- COUNTDOWN (clean “pill”) ----------- */
.counter{
  background: #0f1219; border:1px solid var(--border);
  border-radius: 1rem; padding: .9rem; transition:.2s; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.counter:hover{ border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); }
.counter__value{ font-size:1.75rem; font-weight:800; color: var(--brand); line-height:1; }
.counter__label{ margin-top:.35rem; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:#9aa2b1; }

/* ===================== */
/* LOADING ANIMACIJA     */
/* ===================== */
/* ===================== */
/* LOADING EKRAN         */
/* ===================== */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-circle {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid rgba(0,51,255,0.25);
  border-top-color: var(--brand);
  animation: spin 1.5s linear infinite;
  box-shadow: 0 0 30px rgba(0,51,255,0.3);
}

.loader-logo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  animation: slowspin 3s linear infinite;
}
.loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* fallback ako nema slike */
.loader-logo.placeholder {
  background: var(--brand);
  box-shadow: 0 0 25px rgba(0,51,255,0.4);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes slowspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* fade efekat za sadržaj */
body.loaded .container {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.container {
  opacity: 0;
  transform: translateY(20px);
}

.hero{
    overflow-x:hidden;
}