/* ==========================================================================
   AS 012 Požarevac — dizajn sistem
   Boje sa logoa: navy #133a75, orange #f28f00. Akcenat grada: zlatna.
   ========================================================================== */

@import url("/static/fonts/fonts.css");

:root {
  /* Brend */
  --navy-900: #0c2450;
  --navy-800: #0f2c60;
  --navy-700: #133a75; /* primarna sa logoa */
  --navy-600: #1b4a90;
  --navy-500: #2a5fb0;
  --orange:   #f28f00; /* akcenat sa logoa */
  --orange-600: #d97d00;
  --orange-300: #ffb443;
  --gold:     #f6b733; /* akcenat grada Požarevca */

  /* Neutralno */
  --ink:      #14213d;
  --ink-soft: #465575;
  --muted:    #7c8aa5;
  --line:     #e5e9f2;
  --bg:       #f6f8fc;
  --bg-soft:  #eef2f9;
  --white:    #ffffff;

  /* Sistem */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(15, 44, 96, .06), 0 2px 8px rgba(15, 44, 96, .05);
  --shadow:    0 8px 24px rgba(15, 44, 96, .10);
  --shadow-lg: 0 20px 50px rgba(15, 44, 96, .18);
  --container: 1180px;
  --header-h: 76px;

  --font-head: "Montserrat Alternates", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* --------------------------------------------------------------------------
   Scroll traka — 8px, u bojama kluba
   Odnosi se i na stranu i na unutrašnje kontejnere koji se skroluju
   (tabela takmičenja, tekstualna polja, admin panel).
   -------------------------------------------------------------------------- */

html {
  /* Rezervisano mesto za traku, da sadržaj ne poskoči kad se traka pojavi
     ili nestane pri prelasku sa kratke na dugu stranu. */
  scrollbar-gutter: stable;
}

/* Firefox nema ::-webkit-scrollbar, pa koristi standardna svojstva.
   VAŽNO je ograđivanje: moderni Chrome i Edge podržavaju `scrollbar-width`,
   i kada je zadato ono PREGAZI ::-webkit-scrollbar. Izmereno u brauzeru —
   bez ovog @supports traka je 10px, a ne zadatih 8px. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--navy-600) var(--bg-soft); }
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--bg-soft); border-radius: 8px; }
*::-webkit-scrollbar-thumb {
  background: var(--navy-600);
  border-radius: 8px;
  transition: background .2s;
}
*::-webkit-scrollbar-thumb:hover { background: var(--navy-700); }
*::-webkit-scrollbar-thumb:active { background: var(--orange-600); }
/* Ugao gde se sastaju vodoravna i uspravna traka. */
*::-webkit-scrollbar-corner { background: var(--bg-soft); }

/* Na dodirnim ekranima traka je tanja i providnija — tamo je preklapa sadržaj
   i služi samo kao znak da se sekcija može pomerati (npr. tabela u stranu). */
@media (hover: none) and (pointer: coarse) {
  *::-webkit-scrollbar { width: 6px; height: 6px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: rgba(19, 58, 117, .45); }
}

/* --------------------------------------------------------------------------
   Reset / osnove
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }

/* Naglašen "sportski" italik naslov */
.display {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .98;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head);
  font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-600);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--orange); }

.text-gradient {
  background: linear-gradient(100deg, var(--orange) 0%, var(--gold) 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------------------------------------------------------------------------
   Dugmad
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--orange); --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out), background .2s;
  box-shadow: 0 8px 20px rgba(242, 143, 0, .28);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(242, 143, 0, .38); }
.btn:active { transform: translateY(-1px); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: #fff;
  border-color: rgba(255,255,255,.35); box-shadow: none;
}
.btn--ghost:hover { background: rgba(255,255,255,.10); box-shadow: none; }
.btn--navy { --btn-bg: var(--navy-700); --btn-fg: #fff; box-shadow: 0 8px 20px rgba(19,58,117,.28); }
.btn--navy:hover { box-shadow: 0 14px 28px rgba(19,58,117,.36); }
.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--navy-700);
  border-color: var(--line); box-shadow: none;
}
.btn--outline:hover { background: var(--white); border-color: var(--navy-500); box-shadow: var(--shadow-sm); }
.btn svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s, background .3s;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); border-color: var(--line); }
.nav { display: flex; align-items: center; gap: 1.5rem; height: 100%; }
.brand { display: flex; align-items: center; margin-right: auto; }
/* Logotip se ne rotira ni ne izobličava — samo blago uveća na hover. */
.brand img { height: 52px; width: auto; transition: transform .4s var(--ease-spring); }
.brand:hover img { transform: scale(1.03); }

/* Bela podloga za logo na tamnim pozadinama. Logo je napravljen za svetlu
   podlogu, pa se nikad ne prebojava filterom — dobija podlogu. */
.logo-plate { display: inline-block; background: #fff; padding: .75rem 1rem; border-radius: 14px; }
.logo-plate img { display: block; height: 100%; width: auto; }

.nav-links { display: flex; align-items: center; gap: .3rem; }
/* `:not(.btn)` je obavezno — bez toga ova pravila (specifičnost 0,1,1) pregaze
   .btn (0,1,0), pa dugme „Učlani se" dobije navy slova na navy podlozi. */
.nav-links a:not(.btn) {
  position: relative; padding: .5rem .85rem; border-radius: 8px;
  font-weight: 600; font-size: .95rem; color: var(--ink-soft);
  transition: color .2s;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 2px;
  background: var(--orange); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-links a:not(.btn):hover { color: var(--navy-700); }
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after { transform: scaleX(1); }
.nav-links a:not(.btn).active { color: var(--navy-700); }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--navy-700); }
.nav-toggle svg { width: 28px; height: 28px; }

/* Granica je 1140px: izmereno u brauzeru sa osam stavki u meniju (posle
   dodavanja „Pravila"). Sa punim nazivom „Pravila rukometa" meni se prelamao
   na svakoj širini do 1600px, pa je naziv skraćen na „Pravila". */
@media (max-width: 1140px) {
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); padding: 1rem; box-shadow: var(--shadow);
    transform: translateY(-140%); transition: transform .4s var(--ease-out);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: .9rem 1rem; border-radius: 10px; font-size: 1.05rem; }
  .nav-links a::after { display: none; }
  .nav-links a.active { background: var(--bg-soft); }
  .nav-toggle { display: inline-flex; }
  /* Poziv na upis ostaje i u mobilnom meniju — bez njega roditelj na dubljim
     stranama (npr. Galerija) nema brz put do upisa (Poslovne-Odluke, Pravilo 3). */
  .nav-cta { display: flex; justify-content: center; margin-top: .7rem; padding: .8rem 1.1rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(242,143,0,.30), transparent 55%),
    radial-gradient(900px 500px at 0% 110%, rgba(42,95,176,.55), transparent 50%),
    linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 45%, var(--navy-900) 100%);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 7rem);
}
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.9rem); margin-bottom: 1.2rem; }
.hero h1 .line { display: block; overflow: hidden; }
.hero p.lead { font-size: clamp(1.05rem, 2vw, 1.28rem); color: rgba(255,255,255,.82); max-width: 46ch; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__stats { display: flex; gap: 2.4rem; margin-top: 3rem; }
.hero__stats .num { font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 2.4rem; color: var(--orange-300); line-height: 1; }
.hero__stats .lbl { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .4rem; }

.hero__art { position: relative; display: grid; place-items: center; }
.hero__art .disc {
  position: relative; width: min(440px, 85%); aspect-ratio: 1; display: grid; place-items: center;
}
/* Grb je navy krug napravljen za svetlu podlogu — na navy hero pozadini dobija
   belu kružnu podlogu, pa se vidi u originalnim bojama. */
.hero__art .disc img {
  width: 100%; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 12px #fff, 0 30px 60px rgba(0,0,0,.45);
  animation: floaty 6s ease-in-out infinite;
}
.hero__art .ring {
  position: absolute; border-radius: 50%; border: 2px dashed rgba(255,255,255,.18);
  inset: -6%; animation: spin 40s linear infinite;
}
.hero__art .ring.r2 { inset: 8%; border-style: solid; border-color: rgba(242,143,0,.25); animation-duration: 26s; animation-direction: reverse; }

.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; color: var(--bg); }

@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-16px) } }
@keyframes spin { to { transform: rotate(360deg) } }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .hero p.lead { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__stats { justify-content: center; flex-wrap: wrap; }
  .hero__art { order: -1; }
  .hero__art .disc { width: min(300px, 70%); }
}
@media (max-width: 620px) {
  /* Tri statistike u jednom redu. Sa flex-om se treća prelamala sama u novi
     red i stajala kao siroče ispod prve dve. */
  .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 2.2rem; }
  .hero__stats .num { font-size: 1.9rem; }
  .hero__stats .lbl { font-size: .68rem; letter-spacing: .06em; }
}

/* --------------------------------------------------------------------------
   Sekcije & layout
   -------------------------------------------------------------------------- */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: linear-gradient(160deg, var(--navy-800), var(--navy-700)); color: #fff; }
.section-head { max-width: 640px; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: .6rem 0 .8rem; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }
.section--navy .section-head p { color: rgba(255,255,255,.75); }

.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; max-width: none; }
@media (max-width: 640px){ .section-head--row { flex-direction: column; align-items: flex-start; } }

.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px){ .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Kartice
   -------------------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* News */
.news-card { display: flex; flex-direction: column; height: 100%; }
.news-card__media { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); position: relative; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.news-card:hover .news-card__media img { transform: scale(1.06); }
.news-card__media .ph { position: absolute; inset: 0; display: grid; place-items: center; opacity: .18; }
.news-card__media .ph img { width: 46%; height: auto; object-fit: contain; }
.news-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.news-card__date { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-600); }
.news-card h3 { font-size: 1.25rem; }
.news-card p { color: var(--ink-soft); font-size: .96rem; flex: 1; }
.news-card .more { font-weight: 700; color: var(--navy-700); display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; }
.news-card .more svg { width: 16px; height: 16px; transition: transform .3s; }
.news-card:hover .more svg { transform: translateX(4px); }

/* Team */
.team-card { text-align: left; }
.team-card__top { padding: 1.6rem 1.6rem 0; display: flex; align-items: center; justify-content: space-between; }
.team-card__num { font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 2.6rem; color: var(--bg-soft); line-height: 1; }
.team-card__badge { width: 46px; height: 46px; }
.team-card__body { padding: 1rem 1.6rem 1.7rem; }
.team-card h3 { font-size: 1.4rem; margin-bottom: .2rem; }
.team-card .cat { color: var(--orange-600); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.team-card p { color: var(--ink-soft); font-size: .95rem; margin-top: .7rem; }
.team-card .coach { margin-top: 1rem; font-size: .88rem; color: var(--muted); }
.team-card .coach b { color: var(--ink); }

/* Feature / info tiles */
.feature { display: flex; gap: 1rem; padding: 1.6rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.feature .ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--orange), var(--gold)); color: #fff; }
.feature .ico svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.feature p { color: var(--ink-soft); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Utakmice / rezultati
   -------------------------------------------------------------------------- */
.match {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.match:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.match__team { display: flex; align-items: center; gap: .7rem; font-weight: 700; }
.match__team.away { justify-content: flex-end; text-align: right; }
.match__team.own { color: var(--navy-700); }
.match__team .dot { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-soft); display: grid; place-items: center; flex: none; }
.match__team .dot img { width: 22px; }
/* Neutralna oznaka protivnika: prvo slovo naziva, bez našeg logotipa. */
.match__team .dot--rival { font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 1rem; color: var(--muted); border: 1px solid var(--line); background: var(--white); }
.match__center { text-align: center; min-width: 92px; }
.match__score { font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 1.7rem; color: var(--navy-700); white-space: nowrap; }
.match__vs { font-weight: 800; color: var(--muted); font-size: 1rem; }
.match__meta { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: .25rem; }
.match__badge { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--orange-600); }
@media (max-width: 560px){
  /* Ekipe idu jedna pod drugu. U tri kolone na 390px ime se lomi na
     „Poža/reva/c" — merenjem u brauzeru potvrđeno da je neupotrebljivo. */
  .match { grid-template-columns: 1fr; gap: .55rem; padding: 1rem 1.1rem; }
  .match__team span.name { font-size: .98rem; line-height: 1.25; }
  .match__team { gap: .6rem; }
  .match__team .dot { width: 30px; height: 30px; }
  /* Gost se poravnava levo kao domaćin, a oznaka ide pre imena. */
  .match__team.away { justify-content: flex-start; text-align: left; }
  .match__team.away .dot { order: -1; }
  /* Rezultat/termin u sredini, u jednom redu. */
  .match__center {
    text-align: left; min-width: 0;
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding-left: calc(30px + .6rem);
  }
  .match__vs { font-size: .82rem; }
  .match__score { font-size: 1.35rem; }
  .match__meta { margin-top: 0; }
}

/* Tabela */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
table.standings { width: 100%; border-collapse: collapse; min-width: 620px; }
table.standings th, table.standings td { padding: .85rem 1rem; text-align: center; font-size: .92rem; }
table.standings th { background: var(--navy-700); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
table.standings th:nth-child(2), table.standings td:nth-child(2) { text-align: left; }
table.standings tbody tr { border-top: 1px solid var(--line); transition: background .2s; }
table.standings tbody tr:hover { background: var(--bg-soft); }
table.standings td:first-child { font-weight: 800; color: var(--muted); }
table.standings .pts { font-weight: 800; color: var(--navy-700); }
table.standings tr.own { background: linear-gradient(90deg, rgba(242,143,0,.12), rgba(246,183,51,.06)); }
table.standings tr.own td:nth-child(2) { color: var(--navy-700); font-weight: 800; }
table.standings tr.own td:first-child { color: var(--orange-600); }
.team-pill { display: inline-flex; align-items: center; gap: .5rem; }
.team-pill img { width: 20px; }

/* --------------------------------------------------------------------------
   Galerija
   -------------------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px){ .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--bg-soft); box-shadow: var(--shadow-sm); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,36,80,.5), transparent 45%); opacity: 0; transition: opacity .3s; }
.gallery-item:hover::after { opacity: 1; }
.gallery-cap { position: absolute; display: block; left: 0; right: 0; bottom: 0; padding: 1rem; color: #fff; font-weight: 700; font-size: .9rem; transform: translateY(8px); opacity: 0; transition: .3s; z-index: 1; }
.gallery-item:hover .gallery-cap { transform: translateY(0); opacity: 1; }

/* Galerija — prikaz slike sa listanjem */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 20, 44, .93); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 2rem;
}
/* `hidden` mora da pobedi `display: grid`, inače atribut ne radi ništa. */
.lightbox[hidden] { display: none; }

.lightbox__figure { margin: 0; display: grid; place-items: center; gap: .9rem; }
.lightbox__figure img {
  max-width: min(92vw, 1200px); max-height: 78vh;
  border-radius: 12px; box-shadow: var(--shadow-lg);
}
.lightbox__cap {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  flex-wrap: wrap; color: rgba(255, 255, 255, .9);
  font-weight: 600; font-size: .95rem; text-align: center;
}
.lightbox__count {
  font-family: var(--font-head); font-style: italic; font-weight: 800;
  color: var(--orange-300); font-size: .9rem; white-space: nowrap;
}

.lightbox__close, .lightbox__nav {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; border: 0;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s, transform .2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.lightbox__nav:hover { transform: scale(1.06); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible {
  outline: 2px solid var(--orange-300); outline-offset: 3px;
}
.lightbox__close { top: 1.4rem; right: 1.6rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--prev { left: 1.2rem; }
.lightbox__nav--next { right: 1.2rem; }
.lightbox__nav[hidden] { display: none; }

/* Na telefonu strelice idu u donji red, da ne prekrivaju sliku. */
@media (max-width: 620px) {
  .lightbox { padding: 1rem; align-content: center; }
  .lightbox__figure img { max-height: 64vh; }
  .lightbox__nav {
    top: auto; bottom: 1.4rem; transform: none;
    width: 52px; height: 52px; /* veća meta za prst */
  }
  .lightbox__nav:hover { transform: none; }
  .lightbox__nav--prev { left: 1.5rem; }
  .lightbox__nav--next { right: 1.5rem; }
  .lightbox__cap { padding-bottom: 4.5rem; }
}

/* --------------------------------------------------------------------------
   CTA traka
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(2.5rem,5vw,4rem); color: #fff; text-align: center;
  background: radial-gradient(600px 300px at 100% 0%, rgba(242,143,0,.5), transparent 60%), linear-gradient(135deg, var(--navy-700), var(--navy-900)); }
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: .8rem; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 auto 1.8rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.72); padding: 3.5rem 0 1.5rem; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .logo-plate { margin-bottom: 1.1rem; }
.footer-brand .logo-plate img { height: 56px; }
.footer-brand p { font-size: .92rem; max-width: 34ch; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.site-footer a:hover { color: var(--orange-300); }
.footer-contact li { display: flex; gap: .6rem; font-size: .92rem; }
.footer-contact svg { width: 18px; height: 18px; color: var(--orange); flex: none; margin-top: 3px; }
.social { display: flex; gap: .6rem; margin-top: 1rem; }
.social a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: .25s; }
.social a:hover { background: var(--orange); transform: translateY(-3px); }
.social svg { width: 20px; height: 20px; color: #fff; }
.footer-bottom { padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: rgba(255,255,255,.5); }

/* --------------------------------------------------------------------------
   Page hero (podstranice)
   -------------------------------------------------------------------------- */
.page-hero { background: linear-gradient(135deg, var(--navy-800), var(--navy-700)); color: #fff; padding: clamp(2.5rem,6vw,4.5rem) 0 clamp(2.5rem,6vw,4rem); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(242,143,0,.35), transparent 70%); }
.page-hero .breadcrumb { font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: .8rem; }
.page-hero .breadcrumb a:hover { color: var(--orange-300); }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.page-hero p { color: rgba(255,255,255,.8); margin-top: .8rem; max-width: 60ch; }

/* Article */
.article { max-width: 760px; margin-inline: auto; }
.article__media { border-radius: var(--radius); overflow: hidden; margin: 0 0 2rem; box-shadow: var(--shadow); }
.article__body { font-size: 1.1rem; color: var(--ink); }
.article__body p { margin-bottom: 1.3rem; }

/* Prazno stanje */
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty svg { width: 54px; height: 54px; opacity: .4; margin: 0 auto 1rem; }

/* --------------------------------------------------------------------------
   Forme na javnom sajtu
   Admin panel ima svoje stilove u admin.css — javna strana ga ne učitava,
   pa javne forme moraju imati stilove ovde.
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.form { display: flex; flex-direction: column; gap: 1.15rem; }

.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .86rem; font-weight: 700; color: var(--navy-700); }
.field .req { color: var(--orange-600); }

.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .78rem .95rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus {
  outline: none; background: var(--white); border-color: var(--navy-500);
  box-shadow: 0 0 0 4px rgba(42, 95, 176, .15);
}
/* Brauzerova validacija: crveni okvir tek kad korisnik pokuša da pošalje. */
.field input:user-invalid, .field textarea:user-invalid {
  border-color: #b3261e; box-shadow: 0 0 0 4px rgba(179, 38, 30, .12);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.form-note { font-size: .82rem; color: var(--muted); margin: -.2rem 0 .2rem; }
.btn--block { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   Reveal animacije na scroll
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-reveal="left"] { transform: translateX(-32px); }
[data-reveal][data-reveal="right"] { transform: translateX(32px); }
[data-reveal].in { transform: none; }
[data-delay="1"]{ transition-delay: .08s; }
[data-delay="2"]{ transition-delay: .16s; }
[data-delay="3"]{ transition-delay: .24s; }
[data-delay="4"]{ transition-delay: .32s; }

/* Hero uvodna animacija */
.hero [data-in] { opacity: 0; transform: translateY(24px); animation: heroIn .9s var(--ease-out) forwards; }
.hero [data-in="1"]{ animation-delay: .05s; }
.hero [data-in="2"]{ animation-delay: .18s; }
.hero [data-in="3"]{ animation-delay: .32s; }
.hero [data-in="4"]{ animation-delay: .46s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* View transitions */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}

/* Pristupačnost: poštuj smanjeni pokret */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Utility */
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.flash { padding: .9rem 1.2rem; border-radius: 12px; background: #e8f6ec; color: #1b6b3a; border: 1px solid #b9e6c7; font-weight: 600; margin-bottom: 1.2rem; }
.flash.error { background: #fdecec; color: #a12626; border-color: #f3c0c0; }