/* ==========================================================================
   MAK Gradnja : redizajn 2026
   Brend: amber #fac000 + crna + bela. Moderan industrial stil.
   ========================================================================== */

:root {
  --amber: #fac000;
  --amber-2: #ffce2e;
  --amber-dark: #c99900;

  --bg: #0d0e10;
  --bg-2: #131418;
  --surface: #17191e;
  --surface-2: #1e2127;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);

  --text: #f5f6f7;
  --muted: #9ba1a9;
  --muted-2: #6d7178;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-sm: 10px;

  --ff-head: "Oswald", "Roboto Condensed", "Arial Narrow", sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.amber { color: var(--amber); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--ff-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--amber); color: #14140c; }
.btn-primary:hover { background: var(--amber-2); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 82px;
  transition: background .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(13, 14, 16, .88);
  backdrop-filter: blur(12px);
  height: 68px;
  border-bottom-color: var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 42px; width: auto; border-radius: 6px; }
.site-header.scrolled .brand img { height: 38px; }

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav a {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  color: #d7dade;
  transition: color .2s, background .2s;
}
.nav a:hover { color: var(--amber); }
.nav a.active { color: var(--amber); }

/* ---------- Padajuci meni pod Usluge ----------
   Cisto CSS, bez JavaScripta. Namerno: meni koji zavisi od skripte je meni
   koji moze da ostane zatvoren ako skripta padne. Otvara se i na :focus-within,
   pa radi i tastaturom, ne samo misem. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); }

.subnav {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 268px;
  /* Gornji padding je most preko procepa izmedju linka i panela.
     Bez njega meni nestane cim mis krene nadole. */
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
  z-index: 120;
}
.nav-item:hover .subnav,
.nav-item:focus-within .subnav { opacity: 1; visibility: visible; transform: none; }

.subnav-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
}
.subnav a {
  font-size: 14px;
  letter-spacing: .04em;
  padding: 11px 14px;
  border-radius: 8px;
  color: #d7dade;
  white-space: nowrap;
}
.subnav a:hover { background: var(--surface-2); color: var(--amber); }
.subnav .subnav-all {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  color: var(--muted);
  font-size: 13px;
}

.header-cta { display: flex; align-items: center; gap: 16px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  letter-spacing: .03em;
  color: var(--text);
}
.header-phone svg { width: 18px; height: 18px; color: var(--amber); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  width: 44px; height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  font-weight: 500;
  color: var(--amber);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--amber);
}
.section h2 { font-size: clamp(30px, 4.5vw, 52px); }
.section-head p { color: var(--muted); font-size: 18px; margin-top: 16px; }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 82px;
  background:
    radial-gradient(1200px 600px at 78% 12%, rgba(250, 192, 0, .12), transparent 60%),
    linear-gradient(180deg, #0b0c0e 0%, #0d0e10 100%);
  overflow: hidden;
}
.hero::before { /* faint grid */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 600px at 30% 40%, #000 0%, transparent 75%);
  opacity: .5;
}
.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.hero-copy { max-width: 640px; }
.hero h1 {
  font-size: clamp(40px, 7vw, 82px);
  line-height: .98;
  margin-bottom: 22px;
}
.hero h1 span { color: var(--amber); }
.hero-lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- Hero sa fotografijom (Pocetna, od 17.08.2026) ----------
   Zamenio je cutout PNG na tamnoj podlozi. Fotka ide kao <img> pod sadrzajem,
   isti pristup kao na stranama usluga. */
.hero-photo { isolation: isolate; }
/* Mreza i amber odsjaj su bili za praznu tamnu podlogu. Preko fotke su samo
   prljavstina, pa se gase. */
.hero-photo::before { content: none; }
.hero-photo { background: var(--bg); }

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Dva sloja: vertikalni nosi citljivost teksta i trake sa brojkama na dnu,
   horizontalni stiti levu stranu gde stoji naslov. */
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, .82) 0%, rgba(10, 11, 13, .38) 34%, rgba(10, 11, 13, .90) 100%),
    linear-gradient(90deg, rgba(10, 11, 13, .74) 0%, rgba(10, 11, 13, .18) 66%);
}
/* Bez desne kolone za cutout, tekst dobija celu sirinu ali ostaje ogranicen. */
.hero-photo .container { grid-template-columns: 1fr; }
.hero-photo .hero-copy { max-width: 720px; }
.hero-photo .hero-lead { color: #e2e5e9; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }

/* Stat strip */
.hero-stats {
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 34px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero-stats .stat { background: rgba(19,20,24,.75); backdrop-filter: blur(6px); padding: 20px 24px; }
.stat .num { font-family: var(--ff-head); font-size: clamp(28px, 4vw, 42px); color: var(--amber); line-height: 1; }
.stat .lbl { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding-top: calc(82px + clamp(56px, 8vw, 96px));
  padding-bottom: clamp(48px, 7vw, 84px);
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(250,192,0,.10), transparent 60%),
    linear-gradient(180deg, #0b0c0e, var(--bg));
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(36px, 6vw, 68px); }
.page-hero p { color: var(--muted); font-size: 19px; max-width: 640px; margin-top: 18px; }
.breadcrumb { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--amber); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 22px; }
/* dense: sire kartice ne smeju da ostave rupu u mrezi */
.grid-3 { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.card .icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(250,192,0,.12);
  color: var(--amber);
  margin-bottom: 20px;
}
.card .icon svg { width: 28px; height: 28px; }
.card h3 { font-size: 22px; margin-bottom: 10px; }
.card p { color: var(--muted); margin: 0; font-size: 15.5px; }
.card.accent { position: relative; }
.card.accent::after {
  content: "";
  position: absolute; left: 0; top: 24px; bottom: 24px;
  width: 3px; background: var(--amber); border-radius: 3px;
  opacity: 0; transition: opacity .3s;
}
.card:hover.accent::after { opacity: 1; }

/* Sirena usluga: zauzima dva polja u mrezi, ikonica levo od teksta.
   .wide = drugi nivo isticanja, .featured = prvi nivo (amber okvir i podloga). */
.card.wide,
.card.featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 26px;
  align-content: start;
}
.card.wide .icon,
.card.featured .icon {
  grid-row: span 2;
  width: 64px; height: 64px;
  margin-bottom: 0;
}
.card.wide .icon svg,
.card.featured .icon svg { width: 32px; height: 32px; }
.card.wide h3 { font-size: 25px; }
.card.featured h3 { font-size: 28px; }
.card.wide p,
.card.featured p { font-size: 16.5px; max-width: 58ch; }

.card.featured {
  border-color: rgba(250, 192, 0, .38);
  background: linear-gradient(115deg, rgba(250, 192, 0, .09), var(--surface) 42%, var(--bg-2));
}
.card.featured.accent::after { opacity: 1; }

/* ---------- Spotlight: istaknuta usluga sa terenskom fotkom ---------- */
.spotlight {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.spotlight-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.spotlight-media img {
  width: 100%;
  height: auto; /* neutralise height atribut, inace gazi aspect-ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.spotlight-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(13, 14, 16, .45));
  pointer-events: none;
}
.spotlight-copy h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px; }
.spotlight-copy > p { color: var(--muted); font-size: 17px; margin: 0; }
.spotlight-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 32px;
  display: grid;
  gap: 12px;
}
.spotlight-list li {
  position: relative;
  padding-left: 30px;
  color: #d7dade;
  font-size: 15.5px;
}
.spotlight-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 16px; height: 2px;
  background: var(--amber);
}
.spotlight-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 30px;
}
.spotlight-stats .stat { background: var(--surface); padding: 18px 22px; }
.spotlight-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Services band / machine teaser ---------- */
.band {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}
.machine-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.machine-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  transition: transform .3s var(--ease), border-color .3s;
}
.machine-chip:hover { transform: translateY(-6px); border-color: var(--amber); }
.machine-chip img {
  height: 64px; width: auto; margin: 0 auto 14px;
  border-radius: 10px;
}
.machine-chip span {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 15px;
  color: #d7dade;
}

/* Machine detail card (mehanizacija page) */
.machine-card { padding: 30px; }
.machine-card img { height: 84px; margin-bottom: 20px; border-radius: 12px; }
.machine-card h3 { color: var(--amber); font-size: 24px; margin-bottom: 12px; }
.machine-card ul { list-style: none; margin: 0; padding: 0; }
.machine-card li { color: var(--muted); font-size: 15px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.machine-card li:last-child { border-bottom: 0; }

/* ---------- Marquee logo traka (stalno klizi) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-tile {
  flex: 0 0 auto;
  width: 180px;
  height: 96px;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: .72;
  transition: opacity .3s var(--ease);
}
.logo-tile:hover { opacity: 1; }
.logo-tile img {
  max-width: 100%;
  max-height: 54px;
  width: auto;
  object-fit: contain;
}

/* ---------- Vozni park: velike fotke masina ---------- */
.fleet-cat { margin-bottom: 56px; }
.fleet-cat:last-child { margin-bottom: 0; }
.fleet-cat-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.fleet-cat-head h3 { font-size: 26px; color: var(--amber); }
.fleet-cat-head span { color: var(--muted); font-size: 15px; }

.machine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.machine-photo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.machine-photo-card:hover { transform: translateY(-6px); border-color: var(--amber); }
.machine-photo-card .ph {
  background: linear-gradient(165deg, #ffffff 0%, #eef0f3 100%);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.machine-photo-card .ph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}
/* Kartica sa pravom terenskom fotkom: slika popunjava okvir, bez padinga */
.machine-photo-card.photo .ph img { object-fit: cover; padding: 0; }
.machine-photo-card .cap { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.machine-photo-card .cap strong { font-family: var(--ff-head); font-weight: 600; font-size: 18px; letter-spacing: .02em; }
.machine-photo-card .cap span { color: var(--muted); font-size: 13px; }

/* Home highlight grid (krupne fotke) */
.fleet-highlight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ---------- Svetla sekcija (bela pozadina) ---------- */
.section.light {
  background: #f4f5f7;
  color: #16181c;
  border-block: 1px solid #e4e7ec;
}
.section.light .eyebrow { color: #b58a00; }
.section.light .eyebrow::before { background: #d9a400; }
.section.light h2, .section.light .fleet-cat-head h3 { color: #14161a; }
.section.light .section-head p,
.section.light .fleet-cat-head span { color: #5b626b; }
.section.light .fleet-cat-head { border-bottom-color: #e0e3e8; }
.section.light .machine-photo-card {
  background: #ffffff;
  border-color: #e3e6ea;
  box-shadow: 0 10px 30px rgba(20, 25, 35, .06);
}
.section.light .machine-photo-card:hover { border-color: var(--amber-dark); }
.section.light .machine-photo-card .ph { background: #ffffff; }
.section.light .machine-photo-card .cap strong { color: #14161a; }
.section.light .machine-photo-card .cap span { color: #7a828b; }
.section.light .spotlight-copy > p { color: #5b626b; }
.section.light .spotlight-list li { color: #3d434a; }
.section.light .spotlight-media { border-color: #dfe3e8; box-shadow: 0 14px 40px rgba(20, 25, 35, .10); }
.section.light .btn-ghost { color: #14161a; border-color: rgba(0, 0, 0, .16); }
.section.light .btn-ghost:hover { color: var(--amber-dark); border-color: var(--amber-dark); }
/* Tamni blok brojki unutar svetle sekcije */
.section.light .spotlight-stats { background: var(--surface-2); border-color: var(--surface-2); }
.section.light .spotlight-stats .stat { background: var(--surface); }
.section.light .spotlight-stats .num { color: var(--amber); }
.section.light .spotlight-stats .lbl { color: var(--muted); }

/* ---------- Traka brojki, samostalna (van spotlighta) ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 34px;
}
.stat-row .stat { background: var(--surface); padding: 22px 26px; }
.stat-row .stat .num { font-size: clamp(26px, 3.2vw, 38px); }

/* ---------- Kartica narucioca (geoloska istrazivanja) ---------- */
.ref-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.ref-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.ref-card .period {
  display: block;
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--amber);
  margin-bottom: 12px;
}
.ref-card h3 { font-size: 19px; line-height: 1.25; margin-bottom: 10px; }
.ref-card p { color: var(--muted); margin: 0; font-size: 14.5px; }
/* Prva kartica zauzima dva polja da 7 narucilaca popuni 8 polja bez rupe */
.ref-card.wide { grid-column: span 2; }
.ref-card.wide h3 { font-size: 23px; }
.ref-card.wide p { font-size: 15.5px; }

/* ---------- Referentna tabela (Larsen talpe) ---------- */
.ref-table-wrap {
  background: #ffffff;
  border: 1px solid #e0e3e8;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 25, 35, .06);
}
.ref-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ref-table thead th {
  background: #eceef2;
  color: #14161a;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid #dfe3e8;
}
.ref-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #edeff3;
  color: #4a515a;
  vertical-align: top;
}
.ref-table tbody tr:last-child td { border-bottom: 0; }
.ref-table tbody tr:hover td { background: #f7f8fa; }
.ref-table td:first-child {
  font-family: var(--ff-head);
  font-weight: 600;
  color: #14161a;
  white-space: nowrap;
}
.ref-table td:nth-child(2) { color: #14161a; font-weight: 500; }

/* ---------- Reference logos ---------- */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.logo-wall .cell {
  background: var(--bg-2);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 22px;
}
.logo-wall img {
  max-height: 60px;
  width: auto;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .55;
  transition: filter .35s var(--ease), opacity .35s var(--ease), transform .35s;
}
.logo-wall .cell:hover img { filter: none; opacity: 1; transform: scale(1.05); }

.excellent-badge {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 30px;
}
.excellent-badge img { height: 66px; width: auto; background: #fff; border-radius: 8px; padding: 8px; }
.excellent-badge div h3 { font-size: 20px; margin-bottom: 6px; }
.excellent-badge div p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(700px 300px at 80% 50%, rgba(250,192,0,.14), transparent 65%),
    var(--bg-2);
  border-block: 1px solid var(--line);
  text-align: center;
}
.cta-band h2 { font-size: clamp(30px, 5vw, 56px); margin-bottom: 18px; }
.cta-band p { color: var(--muted); font-size: 18px; max-width: 540px; margin: 0 auto 30px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.loc-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.loc-card .tag {
  font-family: var(--ff-head); text-transform: uppercase; letter-spacing: .08em;
  font-size: 13px; color: var(--amber); margin-bottom: 12px; display: block;
}
.loc-card h3 { font-size: 21px; margin-bottom: 10px; }
.loc-row { display: flex; gap: 12px; color: var(--muted); padding: 6px 0; font-size: 15.5px; align-items: flex-start; }
.loc-row svg { width: 18px; height: 18px; color: var(--amber); flex: none; margin-top: 3px; }
.loc-row a:hover { color: var(--amber); }

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block; font-family: var(--ff-head); text-transform: uppercase;
  letter-spacing: .05em; font-size: 13px; color: var(--muted); margin-bottom: 8px;
}
.form-field input, .form-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 15px;
  transition: border-color .2s;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--amber); }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 13px; color: var(--muted-2); margin-top: 8px; }

/* Honeypot: covek ovo polje nikad ne vidi, bot koji popunjava sva polja ga popuni.
   Ne koristi se display:none jer neki botovi preskacu takva polja.
   Skriva se pomeranjem van kadra, sto izgleda kao obicno polje u HTML-u. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Poruka o gresci iznad forme, prikazuje je main.js po ?greska= parametru */
.form-alert {
  display: none;
  border: 1px solid rgba(255, 92, 92, .45);
  background: rgba(255, 92, 92, .08);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14.5px;
  color: #ffb4b4;
}
.form-alert.show { display: block; }
.form-alert a { color: var(--amber); text-decoration: underline; }

/* ==========================================================================
   Strane usluga (usluge/*.html), od 17.08.2026
   ========================================================================== */

/* Hero sa fotografijom. Slika je <img> a ne background, da bi je Google video
   i da bi mogla da nosi alt tekst i fetchpriority. */
.svc-hero {
  position: relative;
  isolation: isolate;
  /* 88vh usvojeno 17.08.2026 posle probe na strani Zemljani radovi.
     Na laptopu 1440x900 daje 792px, sto pokazuje 98 odsto fotke i ostavlja oko
     108px sledece sekcije na dnu ekrana kao znak da ima jos sadrzaja. Na 92vh
     se vidi cela fotka ali taj znak padne na 72px i hero pojede ceo ekran. */
  min-height: clamp(560px, 88vh, 900px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(82px + 40px);
  padding-bottom: clamp(44px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.svc-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Dva sloja: jak vertikalni gradijent za tekst i blagi ravan sloj preko cele
   slike. Bez ravnog sloja tekst pada preko svetlog neba i kontrast propada. */
.svc-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, .78) 0%, rgba(10, 11, 13, .40) 38%, rgba(10, 11, 13, .88) 100%),
    linear-gradient(90deg, rgba(10, 11, 13, .70) 0%, rgba(10, 11, 13, .20) 62%);
}
.svc-hero-inner { position: relative; }
.svc-hero h1 { font-size: clamp(34px, 5.6vw, 64px); margin: 6px 0 0; }
/* Svetlije od standardnog breadcrumb-a: preko fotke je merenje po 95. percentilu
   davalo 4.67 naspram praga 4.5, premalo rezerve za druge fotke na drugim
   stranama usluga. Sa ovim tonom rezerva je oko dvostruka. */
.svc-hero > .container > .breadcrumb { color: #d2d7dd; }
.svc-hero > .container > .breadcrumb a { color: #e8ebee; }
.svc-hero p {
  color: #e2e5e9;
  font-size: 18.5px;
  max-width: 620px;
  margin-top: 18px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.svc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.svc-hero .btn-ghost { color: #f5f6f7; border-color: rgba(255, 255, 255, .38); }
.svc-hero .btn-ghost:hover { color: var(--amber); border-color: var(--amber); }

.svc-more { margin-top: 28px; display: flex; justify-content: center; }

/* Kartica koja je ceo link ka strani usluge.
   ⛔ .card.wide i .card.featured imaju sopstveni grid raspored (ikonica levo,
   tekst desno). Zato im se ovde NE sme nametnuti flex, inace se ikonica vrati
   iznad naslova i siroka kartica izgubi svoj izgled. */
a.svc-link { display: flex; flex-direction: column; text-decoration: none; }
a.svc-link p { flex: 1; }
a.svc-link.wide,
a.svc-link.featured { display: grid; }
a.svc-link.wide p,
a.svc-link.featured p { flex: none; }
/* U sirokoj kartici strelica ide u tekstualnu kolonu, ispod opisa. */
a.svc-link.wide .svc-link-go,
a.svc-link.featured .svc-link-go { grid-column: 2; margin-top: 14px; }
.svc-link-go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-family: var(--ff-head); text-transform: uppercase; letter-spacing: .06em;
  font-size: 13px; color: var(--amber);
}
.svc-link-go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
a.svc-link:hover .svc-link-go svg { transform: translateX(4px); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 22px;
  transition: border-color .3s var(--ease);
}
.faq-item[open] { border-color: rgba(250, 192, 0, .35); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 34px 20px 0;
  position: relative;
  font-family: var(--ff-head);
  font-size: 18px;
  letter-spacing: .01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Plus koji se pretvara u minus. Samo transform, bez opacity, da dugme
   ne moze da ostane nevidljivo ako se animacija prekine. */
.faq-item summary::after,
.faq-item summary::before {
  content: "";
  position: absolute;
  right: 4px; top: 50%;
  width: 14px; height: 2px;
  background: var(--amber);
  transition: transform .25s var(--ease);
}
.faq-item summary::before { transform: translateY(-50%) rotate(90deg); }
.faq-item summary::after { transform: translateY(-50%); }
.faq-item[open] summary::before { transform: translateY(-50%) rotate(0deg); }
.faq-item p { color: var(--muted); font-size: 15.5px; margin: 0 0 22px; max-width: 68ch; }

/* ---------- Traka o kolačićima ----------
   Samo obaveštenje, ne blokira sadržaj. Stoji nad sadržajem ali ispod
   mobilnog menija (z-index 95), da nikad ne pokrije navigaciju. */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px var(--pad);
  background: rgba(19, 20, 24, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
}
.cookie-bar p { margin: 0; font-size: 14.5px; color: var(--muted); max-width: 720px; }
.cookie-bar .btn { padding: 11px 22px; font-size: 14px; flex: none; }

@media (max-width: 620px) {
  .cookie-bar { flex-direction: column; gap: 12px; padding: 16px 20px; text-align: center; }
  .cookie-bar p { font-size: 13.5px; }
  .cookie-bar .btn { width: 100%; justify-content: center; }
}

/* ---------- Strana zahvalnice ---------- */
.thanks-section { min-height: 62vh; display: flex; align-items: center; }
.thanks-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(32px, 6vw, 56px);
}
.thanks-mark {
  width: 64px; height: 64px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--amber);
  color: #14140c;
  display: flex; align-items: center; justify-content: center;
}
.thanks-mark svg { width: 32px; height: 32px; }
.thanks-card h1 { font-size: clamp(28px, 5vw, 40px); margin: 0 0 16px; }
.thanks-lead { color: var(--muted); font-size: 17px; margin: 0 0 12px; }
.thanks-note { color: var(--muted-2); font-size: 15px; margin: 0 0 32px; }
.thanks-note a { color: var(--amber); }
.thanks-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.map-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 40px;
}
.map-embed iframe { width: 100%; height: 380px; border: 0; display: block; filter: grayscale(.4) invert(.9) hue-rotate(180deg); }

/* ---------- Footer ---------- */
.site-footer {
  background: #0a0b0d;
  border-top: 1px solid var(--line);
  padding-top: 64px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-brand img { height: 46px; width: auto; border-radius: 6px; margin-bottom: 18px; }
.footer-brand p { color: var(--muted); font-size: 15px; max-width: 280px; }
.footer-col h4 { font-size: 15px; letter-spacing: .08em; color: #fff; margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; color: var(--muted); font-size: 15px; padding: 5px 0; margin: 0; }
.footer-col a:hover { color: var(--amber); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-block: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted-2);
  font-size: 14px;
}

/* ---------- Reveal animation (progressive enhancement) ----------
   Sadržaj je vidljiv po difoltu. Sakriva se samo kada JS radi (html.js),
   pa ako main.js ne učita, sajt ostaje potpuno čitljiv. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .machine-row { grid-template-columns: repeat(3, 1fr); }
  .machine-grid, .fleet-highlight { grid-template-columns: repeat(2, 1fr); }
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
  .hero .container { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-block: 140px 200px; }
}

@media (max-width: 860px) {
  .nav, .header-phone { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Mobilni meni = full-screen overlay preko cele strane */
  .nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg);
    padding: 88px 24px 48px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s var(--ease), visibility .32s var(--ease);
    z-index: 95;
  }
  body.nav-open .nav { display: flex; opacity: 1; visibility: visible; }
  .nav a { font-size: 26px; padding: 12px 16px; letter-spacing: .06em; }

  /* Na mobilnom nema hovera, pa je podmeni uvek otvoren i samo uvucen.
     Time nestaje potreba za dugmetom i za JS-om koji bi ga otvarao. */
  .nav { overflow-y: auto; justify-content: flex-start; }
  .nav-item { flex-direction: column; align-items: center; width: 100%; }
  .nav-caret { display: none; }
  .subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-top: 4px;
    min-width: 0;
    width: 100%;
  }
  .subnav-inner {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    align-items: center;
    gap: 0;
  }
  .subnav a { font-size: 17px; padding: 8px 12px; color: var(--muted); white-space: normal; text-align: center; }
  .subnav .subnav-all { border-top: 0; margin-top: 2px; font-size: 15px; }

  /* Zakljucaj scroll strane dok je meni otvoren */
  body.nav-open { overflow: hidden; }

  /* Iskljuci backdrop-filter headera dok je meni otvoren:
     inace pravi containing block i fixed overlay se veze za header, ne za ekran */
  body.nav-open .site-header,
  body.nav-open .site-header.scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }

  /* Stari drawer backdrop vise nije potreban */
  .nav-backdrop { display: none; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .spotlight { grid-template-columns: 1fr; gap: 32px; }
}

/* ⛔ Nizak telefon (iPhone SE i slicni): sa 4 podstavke meni ima 10 linkova i
   na 26px poslednji, Kontakt, ispadne ispod kadra. Skupljanje se vezuje za
   VISINU ekrana, da visoki telefoni zadrze krupnu tipografiju.

   Ovaj upit sme da sadrzi SAMO tipografiju menija. Kad je dodat 17.08.2026,
   ubacen je usred bloka od 860px, pa su pravila ispod (zakljucavanje scrolla,
   backdrop-filter zaglavlja, footer-top, contact-grid, spotlight) upala u njega
   i vazila samo ispod 740px visine. Posledica: na svakom telefonu visem od
   740px kontakt forma je ostajala u dve kolone i visila 120px van ekrana. */
@media (max-width: 860px) and (max-height: 740px) {
  .nav { padding: 74px 24px 32px; }
  .nav > a,
  .nav-item > a { font-size: 21px; padding: 9px 14px; }
  .subnav a { font-size: 15.5px; padding: 9px 12px; }
  .subnav .subnav-all { font-size: 14px; }
}

/* Referentna tabela na uskim ekranima postaje spisak kartica */
@media (max-width: 760px) {
  .ref-table, .ref-table tbody, .ref-table tr, .ref-table td { display: block; width: 100%; }
  .ref-table thead { display: none; }
  .ref-table tr { padding: 16px 18px; border-bottom: 1px solid #e6e9ee; }
  .ref-table tbody tr:last-child { border-bottom: 0; }
  .ref-table tbody tr:hover td { background: transparent; }
  .ref-table td { padding: 2px 0; border: 0; }
  .ref-table td::before {
    content: attr(data-l) ": ";
    color: #8a919a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .ref-table td:first-child::before,
  .ref-table td:nth-child(2)::before { content: none; }
  .ref-table td:first-child { font-size: 13px; color: var(--amber-dark); letter-spacing: .08em; }
  .ref-table td:nth-child(2) { font-size: 17px; margin-bottom: 6px; }
}

@media (max-width: 620px) {
  .hide-mobile { display: none; }

  /* ---------- Hero na telefonu: fotka gore, tekst ispod ----------
     Na uskom ekranu tekst preko fotke pojede sliku, a fotka pojede tekst.
     Zato se sloj razdvaja: slika je blok u toku, tekst ide ispod nje na
     punoj pozadini. Kontrast time prestaje da bude problem. */
  .svc-hero,
  .hero-photo {
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: clamp(36px, 8vw, 56px);
    align-items: stretch;
  }
  .svc-hero-img,
  .hero-img {
    position: static;
    width: 100%;
    height: auto;
    z-index: auto;
  }
  /* Odnos se poklapa sa samom fotkom, da se ne sece nista.
     Strane usluga imaju 16:9 fotke, Pocetna ima svoj uspravni kadar 1080x1350. */
  .svc-hero-img { aspect-ratio: 16 / 9; }
  .hero-img { aspect-ratio: 4 / 5; }

  /* Gradijent ostaje samo kao traka na vrhu slike, da logo i dugme menija
     imaju kontrast dok je zaglavlje providno. z-index mora biti pozitivan:
     slika je sada u toku, pa bi je negativni sloj ostavio ispod nje. */
  .svc-hero-shade,
  .hero-shade {
    top: 0;
    bottom: auto;
    height: 132px;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 11, 13, .78) 0%, rgba(10, 11, 13, 0) 100%);
  }

  .svc-hero-inner,
  .hero-photo .container { padding-top: 30px; }
  .svc-hero h1 { font-size: clamp(30px, 8.4vw, 40px); }
  /* Tekst vise ne stoji preko fotke, pa senka i svetli tonovi nisu potrebni. */
  .svc-hero p,
  .hero-photo .hero-lead { font-size: 16.5px; color: var(--muted); text-shadow: none; }
  .svc-hero > .container > .breadcrumb { color: var(--muted-2); }
  .svc-hero > .container > .breadcrumb a { color: var(--muted); }
  .svc-hero-actions { margin-top: 24px; }
  .svc-hero-actions .btn { width: 100%; justify-content: center; }
  .hero-photo .hero-actions .btn { width: 100%; justify-content: center; }
  .faq-item { padding: 0 16px; }
  .faq-item summary { font-size: 16.5px; padding-right: 30px; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  /* Jedna kolona: sire kartice ne smeju da razvuku mrezu na dve kolone */
  .card.wide, .card.featured { grid-column: auto; grid-template-columns: 1fr; }
  /* ⛔ Strelica na desktopu stoji u koloni 2. U mrezi od jedne kolone to pravi
     IMPLICITNU drugu kolonu i kartica se stisne. Isti mehanizam kao kod
     .ref-card.wide ispod. Bez ovog reseta siroke kartice pucaju na telefonu. */
  a.svc-link.wide .svc-link-go,
  a.svc-link.featured .svc-link-go { grid-column: auto; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-row .stat { padding: 16px 22px; }
  .ref-card.wide { grid-column: auto; }
  .ref-card.wide h3 { font-size: 19px; }
  .ref-card.wide p { font-size: 14.5px; }
  .card.wide .icon, .card.featured .icon { grid-row: auto; margin-bottom: 20px; }
  .card.wide h3, .card.featured h3 { font-size: 22px; }
  .card.wide p, .card.featured p { font-size: 15.5px; }
  .machine-row { grid-template-columns: repeat(2, 1fr); }
  .machine-grid, .fleet-highlight { grid-template-columns: 1fr; }
  .logo-tile { width: 150px; height: 92px; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .hero { flex-direction: column; align-items: stretch; padding-bottom: 80px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); position: static; margin-top: 40px; }
  .excellent-badge { flex-direction: column; text-align: center; }
  .footer-top { grid-template-columns: 1fr; }
}


/* ==========================================================================
   VESTI (faza 6, 20.08.2026)
   Lista vesti i pojedinacna vest. Dodato na kraj fajla, ne dira postojece
   klase. Sve klase su nove: .news-* za listu, .post-* za jednu vest.
   ========================================================================== */

/* ---------- Lista vesti ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.news-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.news-card:hover { border-color: var(--amber-dark); transform: translateY(-4px); }

.news-card-media {
  position: relative;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
/* height auto je obavezan uz aspect-ratio. Bez njega HTML atribut height
   pobedi CSS i kadar se izduzi. */
.news-card-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.news-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.news-card-body h3 { font-size: 21px; margin-bottom: 10px; }
.news-card-body p { color: var(--muted); font-size: 15.5px; margin: 0 0 18px; }
.news-card .news-go { margin-top: auto; }

/* Red sa datumom i lokacijom, iznad naslova */
.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}
.news-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }

/* Oznaka usluge, ista logika kao eyebrow ali u obliku plocice */
.news-tag {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
}

.news-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amber);
}
.news-go svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.news-card:hover .news-go svg { transform: translateX(4px); }

/* Kada jos nema objavljenih vesti */
.news-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 42px;
  text-align: center;
  color: var(--muted);
}

/* ---------- Pojedinacna vest ---------- */
/* Zaglavlje je namerno bez fotografije preko cele sirine. Vest izlazi svake
   nedelje, a hero preko cele sirine bi trazio cetiri isecka po vesti
   (800, 1600, 2400 i uspravan za telefon). Vodeca fotka stoji u telu teksta. */
.post-head {
  padding-top: calc(82px + clamp(48px, 6vw, 76px));
  padding-bottom: clamp(32px, 4vw, 48px);
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(250, 192, 0, .10), transparent 60%),
    linear-gradient(180deg, #0b0c0e, var(--bg));
  border-bottom: 1px solid var(--line);
}
.post-head h1 { font-size: clamp(30px, 4.6vw, 52px); max-width: 900px; }
.post-head .news-meta { margin-bottom: 18px; }
.post-lead {
  color: var(--muted);
  font-size: 19px;
  max-width: 760px;
  margin-top: 20px;
}

.post-body { padding-block: clamp(48px, 6vw, 76px); }
.post-wrap { max-width: 820px; margin: 0 auto; }
.post-wrap p { color: #c7ccd3; font-size: 17px; margin: 0 0 22px; }
.post-wrap h2 { font-size: clamp(24px, 3vw, 32px); margin: 42px 0 18px; }
.post-wrap ul { color: #c7ccd3; font-size: 17px; padding-left: 20px; margin: 0 0 22px; }
.post-wrap li { margin-bottom: 8px; }
.post-wrap li::marker { color: var(--amber); }

/* Vodeca fotografija i svaka fotka u tekstu */
.post-figure { margin: 0 0 30px; }
.post-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.post-figure figcaption {
  color: var(--muted-2);
  font-size: 13.5px;
  margin-top: 10px;
  padding-left: 2px;
}

/* Kutija sa podacima o poslu. Ovo je deo koji klijent prosledjuje naruciocu. */
.post-facts {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 24px 26px;
  margin: 0 0 30px;
}
.post-facts h2 { font-size: 18px; margin: 0 0 14px; }
.post-facts dl { display: grid; grid-template-columns: 190px 1fr; gap: 10px 18px; margin: 0; }
.post-facts dt {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.post-facts dd { margin: 0; font-size: 15.5px; color: var(--text); }

/* Galerija sa terena */
.post-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 30px; }
.post-gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

/* Prethodna i sledeca vest */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  margin-top: 44px;
  padding-top: 26px;
  font-family: var(--ff-head);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.post-nav a { color: var(--muted); }
.post-nav a:hover { color: var(--amber); }

@media (max-width: 860px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .post-facts dl { grid-template-columns: 150px 1fr; }
}

@media (max-width: 620px) {
  .news-grid { grid-template-columns: 1fr; }
  .post-gallery { grid-template-columns: repeat(2, 1fr); }
  .post-facts dl { grid-template-columns: 1fr; gap: 4px 0; }
  .post-facts dd { margin-bottom: 12px; }
  .post-wrap p, .post-wrap ul { font-size: 16px; }
  .post-nav { flex-direction: column; gap: 12px; }
}


/* ---------- Prebacivac jezika (faza 7, 20.08.2026) ----------
   Stoji u zaglavlju pored telefona. Na telefonu ostaje vidljiv, za razliku od
   broja telefona, jer je jezik jedina stvar koju stranac trazi prvo. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.lang-switch:hover { color: var(--amber); border-color: var(--amber-dark); }
.lang-switch svg { width: 14px; height: 14px; }

@media (max-width: 620px) {
  .lang-switch { padding: 5px 10px; font-size: 12px; }
  .lang-switch svg { display: none; }
}