/* ================================================================
   POCETNA — nadogradnja
   Ide POSLE style.css i s3-theme.css, samo na index.html.

   Tri stvari:
     1. slika servera kao pozadina heroja (sa zastorom za citljivost)
     2. status servera kao pravi panel umesto sitnog teksta
     3. otkrivanje sekcija pri skrolovanju
   ================================================================ */


/* ══ 2. STATUS SERVERA ════════════════════════════════════════
   Namerno suzdrzano. Boja stoji samo u tackici — cim i tekst i
   broj pocnu da svetle zeleno i da imaju gradijent, panel pocne
   da lici na gejmerski bedz umesto na podatak. */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
  padding: 0;
  border: 0;
  background: none;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  font-size: inherit;
}

.hs-levo { display: flex; align-items: center; gap: 10px; }

.hs-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5FBF7F;
  box-shadow: 0 0 0 3px rgba(95,191,127,.12);
  animation: hs-puls 3.2s ease-in-out infinite;
}
.hs-dot.off {
  background: #C9565E;
  box-shadow: 0 0 0 3px rgba(201,86,94,.12);
  animation: none;
}
@keyframes hs-puls {
  0%, 100% { box-shadow: 0 0 0 3px rgba(95,191,127,.12); }
  50%      { box-shadow: 0 0 0 6px rgba(95,191,127,0); }
}

.hs-kol { display: flex; flex-direction: column; gap: 5px; }

.hs-live {
  font-family: var(--fu);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  line-height: 1;
}
.hs-live.off { color: rgba(255,255,255,.5); }

.hs-lbl {
  font-family: var(--fu);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  line-height: 1;
}

.hs-crta {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.12);
}

.hs-desno { display: flex; flex-direction: column; gap: 6px; }

.hs-broj { display: flex; align-items: baseline; gap: 5px; line-height: 1; }

.hs-players {
  font-family: var(--fd);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .03em;
  color: rgba(255,255,255,.92);
}
.hs-max {
  font-family: var(--fu);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
}

/* ── IP / Discord na klik za kopiranje ── */
.hsc-row.kopiraj {
  cursor: none;
  border-radius: 7px;
  padding: 4px 7px;
  margin: -4px -7px;
  transition: background .2s;
}
.hsc-row.kopiraj:hover { background: rgba(93,156,172,.09); }
.hsc-row.kopiraj .hsc-val { transition: color .2s; }
.hsc-row.kopiraj:hover .hsc-val { color: #8FCADB; }
.hsc-row .kopirano {
  font-family: var(--fu);
  font-size: .58rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: #4ADE80;
  opacity: 0;
}
/* Animacija umesto prelaza: `transition` je na ovom elementu umeo
   da ostane zaglavljen na 0 i potvrda se ne bi videla. Keyframe se
   pokrece iznova svaki put kad se klasa doda i sam se ugasi. */
.hsc-row.ok .kopirano {
  animation: kopirano-bljesak 1.6s ease forwards;
}
@keyframes kopirano-bljesak {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}


/* ══ 3. OTKRIVANJE PRI SKROLOVANJU ════════════════════════════
   Klasa `js-otkrij` se dodaje na <html> tek iz JS-a. Bez JS-a
   pravilo ispod ne vazi i sve je normalno vidljivo. */
html.js-otkrij [data-otkrij] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s cubic-bezier(.2,.7,.3,1),
    transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--kasni, 0ms);
  will-change: opacity, transform;
}
html.js-otkrij [data-otkrij].vid {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js-otkrij [data-otkrij] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hs-dot { animation: none; }
  .hsc-row.ok .kopirano { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
  .hero-status { gap: 14px; padding: 12px 16px; }
  .hs-players { font-size: 1.7rem; }
}

/* ══ CITLJIVOST PREKO SLIKE ═══════════════════════════════════
   Hero je ranije bio prazan pa su ovi tekstovi mogli da budu
   bledi. Sad stoje preko fotografije, pa im treba i podloga i
   jaci kontrast. `.hsc-label` je bio na .16 — oko 1.4:1, sto se
   nije videlo ni na crnom. */
.hero-server-card {
  background: rgba(9,9,17,.66);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(93,156,172,.22);
  border-radius: 12px;
}
.hsc-label {
  color: rgba(255,255,255,.52);
}
.hsc-val {
  color: rgba(255,255,255,.76);
}
.hsc-val.gold {
  color: #8FCADB;
}
.hero-desc {
  color: rgba(255,255,255,.66);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.hero-tag {
  color: rgba(255,255,255,.5);
}

/* ══ HERO NA TELEFONU ═════════════════════════════════════════
   Zateceno stanje: .hero-inner je mreza `1fr 1px 420px` bez
   ijednog mobilnog pravila, pa je desna kolona (logo + kartica
   sa IP-om) ispadala iz ekrana i hero ju je secao. Na telefonu
   slazemo u jednu kolonu. Veliki logo sklanjamo — brend vec
   stoji u navigaciji, a kartica sa IP-om je korisnija. */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-vline { display: none; }
  .hero-right {
    width: 100%;
    align-items: stretch;
  }
  .hero-logo { display: none; }
  .hero-server-card {
    width: 100%;
    max-width: 420px;
  }
}

@media (max-width: 560px) {
  .hero-status { gap: 16px; }
}

/* ══ TERITORIJE BANDI ═════════════════════════════════════════
   Mape su vec postojale u pravilima kao obicne slicice. Ovde su
   sa izborom bande i prelazom, da se vidi odnos teritorija. */
.ter-sec {
  padding: 110px 80px;
  max-width: 1300px;
  margin: 0 auto;
}
.ter-hd { max-width: 620px; margin-bottom: 48px; }

.ter-telo {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

/* ── spisak bandi ── */
.ter-lista { display: flex; flex-direction: column; gap: 6px; }

.ter-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: none;
  text-align: left;
  cursor: none;
  transition: background .22s, border-color .22s;
}
.ter-btn:hover { background: rgba(255,255,255,.035); }
.ter-btn.on {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}

.ter-tacka {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bsol, #777);
  opacity: .45;
  transition: opacity .22s, box-shadow .22s;
}
.ter-btn.on .ter-tacka {
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}

.ter-ime {
  font-family: var(--fu);
  font-size: .88rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  transition: color .22s;
}
.ter-btn:hover .ter-ime { color: rgba(255,255,255,.75); }
.ter-btn.on .ter-ime { color: #fff; }

.ter-pravila {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 0 16px;
  font-family: var(--fu);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(93,156,172,.85);
  text-decoration: none;
  transition: color .22s, gap .22s;
}
.ter-pravila:hover { color: #8FCADB; gap: 11px; }

/* ── mapa ── */
.ter-okvir {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a12;
}
.ter-slika {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .5s ease, transform .7s ease;
}
.ter-slika.on { opacity: 1; transform: none; }

.ter-okvir::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(6,6,13,.75) 100%);
}

.ter-oznaka {
  position: absolute;
  left: 20px; bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fd);
  font-size: 1.5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.ter-oznaka::before {
  content: "";
  width: 3px; height: 20px;
  border-radius: 2px;
  background: var(--bsol, #777);
}

@media (max-width: 980px) {
  .ter-sec { padding: 80px 40px; }
  .ter-telo { grid-template-columns: 1fr; gap: 26px; }
  .ter-lista { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .ter-btn { width: auto; padding: 11px 15px; }
  .ter-pravila { margin-top: 0; padding: 11px 4px; }
}
@media (max-width: 768px) {
  .ter-sec { padding: 70px 20px; }
  .ter-ime { font-size: .78rem; letter-spacing: .12em; }
  .ter-oznaka { font-size: 1.2rem; left: 14px; bottom: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  /* `transition: .01s` nije dovoljno — prelaz ume da ostane
     zaglavljen na pocetnoj vrednosti pa slika ostane nevidljiva.
     Gasimo ga potpuno, da se vrednost primeni odmah. */
  .ter-slika { transition: none; transform: none; }
}

/* ══ KAKO DA POCNES ═══════════════════════════════════════════
   Vodic za novog igraca. Pet koraka u redu na desktopu, jedan
   ispod drugog na telefonu. */
.poc-sec {
  padding: 110px 80px;
  max-width: 1300px;
  margin: 0 auto;
}
.poc-hd { max-width: 620px; margin-bottom: 48px; }

.poc-koraci {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: korak;
}

.poc-korak {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 20px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  transition: border-color .25s, background .25s, transform .25s;
}
.poc-korak:hover {
  transform: translateY(-3px);
  border-color: rgba(93,156,172,.28);
  background: rgba(93,156,172,.04);
}

/* linija koja povezuje korake */
.poc-korak::after {
  content: "";
  position: absolute;
  top: 40px;
  right: -19px;
  width: 18px;
  height: 1px;
  background: rgba(255,255,255,.1);
}
.poc-korak:last-child::after { display: none; }

.poc-br {
  font-family: var(--fd);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: .04em;
  background: var(--s3-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.poc-ime {
  font-family: var(--fu);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: #fff;
  margin-bottom: 9px;
}

.poc-txt {
  flex: 1 0 auto;
  font-family: var(--fb);
  font-size: .8rem;
  line-height: 1.65;
  color: rgba(255,255,255,.52);
  margin-bottom: 16px;
}

.poc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fu);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(93,156,172,.9);
  text-decoration: none;
  transition: color .22s, gap .22s;
}
.poc-link:hover { color: #8FCADB; gap: 10px; }

@media (max-width: 1100px) {
  .poc-sec { padding: 90px 40px; }
  .poc-koraci { grid-template-columns: repeat(2, 1fr); }
  .poc-korak::after { display: none; }
}
@media (max-width: 680px) {
  .poc-sec { padding: 70px 20px; }
  .poc-koraci { grid-template-columns: 1fr; gap: 12px; }
  .poc-korak { padding: 20px 18px 16px; }
  .poc-br { font-size: 1.5rem; margin-bottom: 12px; }
}

/* ══ PARTNERI ═════════════════════════════════════════════════
   Tiha centrirana traka izmedju statistike i vodica. Namerno
   sitna — partneri treba da se vide, ali ne da takmice se sa
   sadrzajem oko sebe. */
.partneri {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 42px 20px 10px;
}
.partneri-lbl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fu);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
/* crtice levo i desno od reci */
.partneri-lbl::before,
.partneri-lbl::after {
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(255,255,255,.14);
}

.partneri-lista {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
/* Prigusena zlatna, ne jarka — jarko zlato (#FFD700) nosi rang
   Supervizor na /staff i ovde bi delovalo kao bedz, ne kao ime. */
.partneri-lista a {
  font-family: var(--fu);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D9B86A;
  text-decoration: none;
  transition: color .22s;
}
.partneri-lista a:hover { color: #F0D79A; }

.partneri-tacka {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(217,184,106,.38);
}

@media (max-width: 560px) {
  .partneri { padding: 34px 20px 6px; gap: 11px; }
  .partneri-lista { gap: 13px; }
  .partneri-lista a { font-size: .74rem; }
}