/* TangerineSEO - stilski sloj za WordPress + Elementor.
   Učitava ga child tema posle Elementor CSS-a (zavisnost: elementor-frontend).
   Elementor elementi dobijaju klase kroz Advanced > CSS Classes; custom widgeti ih ispisuju direktno.
   Boje čitaju Elementor Global Colors (--e-global-color-*), pa promena u Site Settings menja ceo sajt.
   Imena promenljivih (--tg-*) su ista kao u design/*.dc.html, pa se vrednosti iz rendered.html prenose 1:1. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --tg-orange: var(--e-global-color-primary, #f26b1d);
  --tg-ink: var(--e-global-color-secondary, #201e1d);
  --tg-acc-ink: var(--e-global-color-accent, #a8460b);
  --tg-bg: var(--e-global-color-tgbg, #f3f2f2);
  --tg-surface: var(--e-global-color-tgsurface, #ffffff);
  --tg-sunk: var(--e-global-color-tgsunk, #eae9e9);
  --tg-tint: var(--e-global-color-tgtint, #fff1e8);
  --tg-tint2: var(--e-global-color-tgtint2, #ffdcc6);
  --tg-mute: var(--e-global-color-tgmute, #4a4746);
  --tg-mute2: var(--e-global-color-tgmute2, #5b5857);
  --tg-dim: var(--e-global-color-tgdim, #b4b0af);
  --tg-rule: var(--tg-ink);
  --tg-line: #201e1d44;
  --tg-grid: #201e1d12;
  --tg-shadow: var(--tg-ink);
  --tg-inv-acc: var(--tg-orange);
  --tg-track: #d9d6d5;
  --tg-font: "Archivo", system-ui, sans-serif;
  --tg-max: 1320px;
  --tg-px: clamp(16px, 4vw, 48px);
  --tg-py: clamp(56px, 7vw, 104px);
}

/* Osnova */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; background: var(--tg-bg); color: var(--tg-ink); font-family: var(--tg-font); font-weight: 500; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--tg-tint2); color: var(--tg-ink); }
:focus-visible { outline: 2px solid var(--tg-orange); outline-offset: 2px; }
a { color: var(--tg-ink); }
a:hover { color: var(--tg-acc-ink); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; border-radius: 0; }

/* Elementor reset: bez podrazumevanih paddinga, razmaka i zaobljenja */
.elementor .e-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.elementor .elementor-widget:not(:last-child) { margin-block-end: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor [class*="tg-"] p { margin-top: 0; }

/* Raspored */
.tg-section { position: relative; border-bottom: 2px solid var(--tg-rule); }
.tg-wrap { width: 100%; max-width: var(--tg-max); margin-inline: auto; padding: var(--tg-py) var(--tg-px); }
.tg-wrap--tight { padding-block: clamp(48px, 6vw, 88px); }
.tg-wrap--flush { padding-block: 0; }
.tg-wrap--hero { position: relative; padding: clamp(48px, 7vw, 104px) var(--tg-px) clamp(56px, 7vw, 112px); }
.tg-wrap--close { padding-block: clamp(64px, 8vw, 128px); }
.tg-split, .e-con.tg-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tg-col, 420px)), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
.tg-split--hero, .e-con.tg-split--hero { --tg-col: 480px; gap: clamp(40px, 5vw, 88px); align-items: center; }
.tg-split--center, .e-con.tg-split--center { align-items: center; }
.tg-head, .e-con.tg-head { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.tg-row, .e-con.tg-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.tg-col, .e-con.tg-col { display: flex; flex-direction: column; }

/* Površine */
.tg-sunk { background: var(--tg-sunk); }
.tg-dark { background: var(--tg-ink); color: var(--tg-bg); --tg-acc-ink: var(--tg-orange); --tg-mute: #bdb8b6; --tg-mute2: #a29d9b; --tg-line: #f3f2f233; }
.tg-dark a { color: var(--tg-bg); }
.tg-orange { background: var(--tg-orange); color: var(--tg-ink); --tg-acc-ink: var(--tg-ink); --tg-mute: var(--tg-ink); }
.tg-hard-shadow { box-shadow: 6px 6px 0 var(--tg-shadow); }

/* Tipografija. Klasa ide na Elementor widget (wrapper) ili direktno na element u custom widgetu. */
.tg-kicker, .tg-kicker p { margin: 0 0 16px; font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--tg-acc-ink); }
.tg-kicker p { margin: 0; }
.tg-kicker--hero { margin-bottom: 22px; }
.tg-h1, .tg-h1 .elementor-heading-title { margin: 0; font-size: clamp(46px, 6.6vw, 100px); line-height: .92; font-weight: 900; letter-spacing: -.045em; font-stretch: 116%; text-wrap: balance; color: inherit; }
.tg-h1 .tg-line, .tg-h2 .tg-line, .tg-display .tg-line { display: block; }
.tg-h1 .tg-hl { color: var(--tg-orange); }
.tg-h2, .tg-h2 .elementor-heading-title { margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: .98; font-weight: 900; letter-spacing: -.04em; font-stretch: 112%; text-wrap: balance; color: inherit; }
.tg-h2--md, .tg-h2--md .elementor-heading-title { font-size: clamp(32px, 3.6vw, 48px); line-height: 1; letter-spacing: -.035em; }
.tg-h2--sm, .tg-h2--sm .elementor-heading-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -.03em; font-stretch: 100%; }
.tg-display, .tg-display .elementor-heading-title { margin: 0; font-size: clamp(44px, 7.4vw, 120px); line-height: .9; font-weight: 900; letter-spacing: -.05em; font-stretch: 122%; color: inherit; }
.tg-h3, .tg-h3 .elementor-heading-title { margin: 0; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: inherit; }
.tg-lead, .tg-lead p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--tg-mute); max-width: 46ch; }
.tg-lead { margin-top: 28px; }
.tg-body, .tg-body p { font-size: 17px; line-height: 1.55; color: var(--tg-mute); max-width: 44ch; }
.tg-body { margin-top: 22px; }
.tg-meta, .tg-meta p { font-size: 15px; line-height: 1.5; color: var(--tg-mute); max-width: 34ch; }
.tg-tabnum { font-variant-numeric: tabular-nums; }
.tg-kbd { padding: 1px 7px; border: 2px solid var(--tg-ink); font-weight: 800; font-size: .9em; }

/* Linkovi sa narandžastom linijom (npr. "Sve studije slučaja →") */
.tg-link a, a.tg-link { font-weight: 800; font-size: 16px; text-decoration: none; color: var(--tg-ink); border-bottom: 2px solid var(--tg-orange); padding-bottom: 4px; }
.tg-link a:hover, a.tg-link:hover { color: var(--tg-acc-ink); }

/* Dugmad. Tekst uvek levo, strelica desno. */
.tg-btn { flex: 1 1 240px; max-width: 420px; }
.tg-btn .elementor-button, a.tg-btn, button.tg-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 28px; min-height: 60px; padding: 0 22px; border: 2px solid var(--tg-ink); border-radius: 0; background: var(--tg-orange); color: var(--tg-ink); font: 800 16px/1.1 var(--tg-font); text-align: left; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.tg-btn .elementor-button:hover, a.tg-btn:hover, button.tg-btn:hover { background: var(--tg-ink); color: var(--tg-bg); }
.tg-btn .elementor-button-content-wrapper { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 28px; }
.tg-btn--arrow .elementor-button-content-wrapper::after, a.tg-btn--arrow::after { content: "→"; font-weight: 800; }
.tg-btn--ghost { flex-basis: 200px; }
.tg-btn--ghost .elementor-button, a.tg-btn--ghost { background: transparent; color: var(--tg-ink); }
.tg-btn--ghost .elementor-button:hover, a.tg-btn--ghost:hover { background: var(--tg-ink); color: var(--tg-bg); }
.tg-btn--dark .elementor-button, a.tg-btn--dark { background: var(--tg-ink); color: var(--tg-bg); min-height: 64px; padding: 0 26px; }
.tg-btn--dark .elementor-button:hover, a.tg-btn--dark:hover { background: var(--tg-bg); color: var(--tg-ink); }
.tg-btn--dark.tg-btn--arrow .elementor-button-content-wrapper::after, a.tg-btn--dark.tg-btn--arrow::after { color: var(--tg-orange); }
.tg-btn--sm .elementor-button, a.tg-btn--sm { min-height: 44px; padding: 0 14px; font-size: 14.5px; }
.tg-btn--fit { flex: 0 0 auto; }

/* Mreže */
.tg-ruled, .e-con.tg-ruled { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tg-cell, 290px)), 1fr)); border-top: 2px solid var(--tg-rule); border-left: 2px solid var(--tg-rule); }
.tg-ruled > * { min-width: 0; border-right: 2px solid var(--tg-rule); border-bottom: 2px solid var(--tg-rule); }
.tg-gapgrid, .e-con.tg-gapgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tg-cell, 260px)), 1fr)); gap: 2px; background: var(--tg-rule); border: 2px solid var(--tg-rule); }
.tg-gapgrid > * { min-width: 0; background: var(--tg-bg); }

/* Kartice */
.tg-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--tg-bg); color: var(--tg-ink); text-decoration: none; transition: background .25s, color .3s; }
.tg-card:hover { background: var(--tg-orange); color: var(--tg-ink); }
.tg-card.is-dim { color: var(--tg-dim); }
.tg-card__num { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tg-card__desc { font-size: 15.5px; line-height: 1.5; }
.tg-badge { padding: 3px 8px; background: var(--tg-orange); color: var(--tg-ink); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Fotografije: uvek crno-bele, okvir 2px, potpis dole levo */
.tg-photo { position: relative; margin: 0; border: 2px solid var(--tg-rule); overflow: hidden; background: var(--tg-sunk); }
.tg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.tg-photo__cap { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: var(--tg-orange); color: var(--tg-ink); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Čipovi (filteri). Stanje ide kroz aria-pressed. */
.tg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--tg-ink); background: transparent; color: var(--tg-ink); font: 700 14.5px var(--tg-font); cursor: pointer; }
.tg-chip:hover { background: var(--tg-tint); }
.tg-chip[aria-pressed="true"] { background: var(--tg-ink); color: var(--tg-bg); }

/* Lista sa narandžastim kvadratima (Elementor Icon List ili ul) */
ul.tg-checks, .tg-checks ul { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; }
.tg-checks li, .tg-checks .elementor-icon-list-item { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.tg-checks li::before, .tg-checks .elementor-icon-list-item::before { content: ""; width: 8px; height: 8px; background: var(--tg-orange); flex-shrink: 0; }
.tg-checks .elementor-icon-list-icon { display: none; }

/* FAQ (details/summary) */
.tg-faq { border-top: 2px solid var(--tg-rule); }
.tg-faq details { border-bottom: 2px solid var(--tg-rule); }
.tg-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.tg-faq summary::-webkit-details-marker { display: none; }
.tg-faq summary::after { content: "+"; font-size: 26px; font-weight: 600; line-height: 1; transition: transform .2s; }
.tg-faq details[open] summary::after { transform: rotate(45deg); }
.tg-faq summary:hover { color: var(--tg-acc-ink); }
.tg-faq .tg-faq__a { padding: 0 0 22px; max-width: 62ch; color: var(--tg-mute); line-height: 1.6; }

/* Hero: mreža u pozadini + narandžasti spotlight koji prati kursor (tangerine-frontend.js postavlja --mx, --my, --spot) */
.tg-hero-grid { position: relative; overflow: hidden; }
.tg-hero-grid::before, .tg-hero-grid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 88px 88px; }
.tg-hero-grid::before { background-image: linear-gradient(var(--tg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tg-grid) 1px, transparent 1px); }
.tg-hero-grid::after { background-image: linear-gradient(#f26b1d 1px, transparent 1px), linear-gradient(90deg, #f26b1d 1px, transparent 1px); -webkit-mask-image: radial-gradient(240px circle at var(--mx, 75%) var(--my, 45%), #000, transparent 75%); mask-image: radial-gradient(240px circle at var(--mx, 75%) var(--my, 45%), #000, transparent 75%); opacity: var(--spot, 0); transition: opacity .5s; }
.tg-hero-grid > * { position: relative; z-index: 1; }

/* Marquee (sadržaj se u markup-u ispisuje dva puta) */
.tg-marquee { overflow: hidden; border-bottom: 2px solid var(--tg-rule); }
.tg-marquee__track { display: flex; width: max-content; animation: tg-marquee var(--tg-speed, 58s) linear infinite; }
.tg-marquee--rev .tg-marquee__track { animation-direction: reverse; }
.tg-marquee:hover .tg-marquee__track { animation-play-state: paused; }
@keyframes tg-marquee { to { transform: translateX(-50%); } }

/* Pojavljivanje pri skrolu. html.tg-js postavlja inline skripta u <head>, pa bez JS-a sadržaj ostaje vidljiv. */
.tg-js .tg-reveal, .tg-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.tg-js .tg-reveal.is-in, .tg-js [data-reveal].is-in { opacity: 1; transform: none; }
.tg-d1 { --d: 70ms; } .tg-d2 { --d: 140ms; } .tg-d3 { --d: 210ms; } .tg-d4 { --d: 280ms; } .tg-d5 { --d: 350ms; } .tg-d6 { --d: 420ms; } .tg-d7 { --d: 490ms; } .tg-d8 { --d: 560ms; }
.elementor-editor-active .tg-reveal, .elementor-editor-active [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Pristupačnost */
.tg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .tg-js .tg-reveal, .tg-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tg-marquee__track { animation: none; }
  .tg-hero-grid::after { display: none; }
}

/* ---------------------------------------------------------------------------
   Dopuna za WordPress build. Original iz paketa je iznad i ne menja se.
   --------------------------------------------------------------------------- */

/* Ikonica kao CSS maska: boja dolazi iz currentColor, pa prati hover stanje.
   Lucide i Simple Icons se self-hostuju iz plugina, assets/icons/. */
.tg-ico {
	display: block;
	flex-shrink: 0;
	width: var(--tg-ico-size, 18px);
	height: var(--tg-ico-size, 18px);
	background: currentColor;
	-webkit-mask: var(--tg-ico-url) center / contain no-repeat;
	mask: var(--tg-ico-url) center / contain no-repeat;
}

/* Elementor ume da ubaci prazan wrapper oko widgeta zaglavlja i podnozja;
   sticky ne radi ako roditelj ima overflow, pa ga ovde drzimo cistim. */
.tg-site-header,
.tg-site-footer {
	display: block;
}

/* Dugmad: dizajn ima 17px, primarno bez okvira, hover tekst narandzast.
   Ghost je 700 sa manjim razmakom. (reference/pocetna/rendered-desktop.html) */
.tg-btn .elementor-button,
a.tg-btn,
button.tg-btn {
	font-size: 17px;
}

.tg-btn:not(.tg-btn--ghost):not(.tg-btn--dark) .elementor-button {
	border: 0;
}

.tg-btn:not(.tg-btn--ghost):not(.tg-btn--dark) .elementor-button:hover {
	color: var(--tg-orange);
}

.tg-btn--ghost .elementor-button,
a.tg-btn--ghost {
	gap: 12px;
	font-weight: 700;
}

/* Strelica nadole, za "Pogledajte rezultate". */
.tg-btn--down .elementor-button-content-wrapper::after,
a.tg-btn--down::after {
	content: "↓";
	font-weight: 800;
}

/* Lista sa narandzastim kvadratima u heroju: red koji se prelama,
   sa linijom iznad, 14,5px. */
.tg-wrap--hero .tg-checks ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 2px solid var(--tg-rule);
}

.tg-wrap--hero .tg-checks li,
.tg-wrap--hero .tg-checks .elementor-icon-list-item {
	font-size: 14.5px;
}

/* Elementor Icon List ume da ubaci separator i svoje razmake. */
.tg-checks .elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tg-checks .elementor-icon-list-text {
	color: inherit;
}

/* Sekcija bez donje linije, kad dve idu jedna na drugu. */
.tg-section--flush {
	border-bottom: 0;
}

/* Zavrsni CTA: dugme i telefon u istom redu, telefon podvucen. */
.tg-row--cta {
	gap: 16px 28px;
	margin-top: 44px;
}

.tg-cta-phone p {
	margin: 0;
}

.tg-cta-phone a {
	border-bottom: 2px solid var(--tg-ink);
	color: var(--tg-ink);
	font-size: 18px;
	font-weight: 800;
	text-decoration: none;
}

/* Glava sekcije: kicker i naslov u levoj koloni. */
.tg-head .tg-col {
	gap: 0;
}

/* Naslovi sekcija u dizajnu imaju max-width u ch, da link sa desne strane
   stane u isti red. */
.tg-h2--16ch,
.tg-h2--16ch .elementor-heading-title {
	max-width: 16ch;
}

.tg-h2--18ch,
.tg-h2--18ch .elementor-heading-title {
	max-width: 18ch;
}

/* Elementor sirinu widgeta postavlja kroz svoje promenljive, pa max-width
   iz .tg-btn mora da bude specificniji od njegovog pravila. */
.e-con > .elementor-widget.tg-btn {
	max-width: 420px;
}

/* Stranica sa lepljivim sadržajem sa strane (šablon usluge, niše, grada). */
.tg-doc {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 0 clamp(32px, 4vw, 64px);
	padding-block: 0;
}

.tg-doc > * {
	min-width: 0;
}

@media (max-width: 999px) {
	.tg-doc {
		grid-template-columns: 1fr;
	}
}

/* Sekcija unutar tg-doc: linija dole, bez bočnog paddinga. */
.tg-sub {
	padding: clamp(48px, 6vw, 88px) 0;
	border-bottom: 2px solid var(--tg-rule);
	scroll-margin-top: 80px;
}

.tg-sub--last {
	border-bottom: 0;
}

.tg-h2--sub,
.tg-h2--sub .elementor-heading-title {
	font-size: clamp(32px, 3.8vw, 52px);
	line-height: 1;
	letter-spacing: -0.035em;
	font-stretch: 112%;
}

/* Hero sa fotografijom: naslov levo, slika desno, činjenice ispod. */
.tg-split--hero3 {
	--tg-col: 460px;
	align-items: end;
}

/* Mreža povezanih linkova ispod sadržaja. */
.tg-linkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 2px;
	background: var(--tg-rule);
	border: 2px solid var(--tg-rule);
}

.tg-linkgrid a {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	background: var(--tg-bg);
	color: var(--tg-ink);
	font-size: 19px;
	font-weight: 800;
	text-decoration: none;
}

.tg-linkgrid a:hover {
	background: var(--tg-orange);
	color: var(--tg-ink);
}

/* Završni CTA u redu: naslov levo, dugme desno. */
.tg-close {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
}

.tg-display--12ch,
.tg-display--12ch .elementor-heading-title {
	max-width: 12ch;
}

/* Sitne pomoćne klase za razmake na podstranicama. */
.tg-mb28 {
	margin-bottom: 28px;
}

.tg-mb32 {
	margin-bottom: 32px;
}

/* Mali naslov iznad mreže linkova. */
.tg-eyebrow,
.tg-eyebrow .elementor-heading-title {
	margin: 0 0 20px;
	color: var(--tg-mute2);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Fotografija u heroju podstranice: 4:3, potpis dole levo. */
.tg-photo--hero img,
.tg-photo--hero .elementor-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	min-height: 260px;
}

/* H1 na podstranicama je nijansu manji nego na početnoj. */
.tg-h1--sub,
.tg-h1--sub .elementor-heading-title {
	font-size: clamp(44px, 6.4vw, 96px);
}

/* Potpis Elementor slike unutar .tg-photo izgleda kao .tg-photo__cap. */
.tg-photo figure,
.tg-photo .elementor-image {
	position: relative;
	margin: 0;
}

.tg-photo figcaption,
.tg-photo .widget-image-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 8px 12px;
	background: var(--tg-orange);
	color: var(--tg-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}

/* Tamni hero na stranicama niša i gradova. */
.tg-section--darkhero {
	background: var(--tg-ink);
	color: var(--tg-bg);
}

.tg-section--darkhero .tg-crumbs,
.tg-section--darkhero .tg-crumbs a {
	color: #cfcbca;
}

.tg-section--darkhero .tg-crumbs__current {
	color: var(--tg-bg);
}

.tg-section--darkhero .tg-lead,
.tg-section--darkhero .tg-lead p {
	color: #cfcbca;
}

/* Čipovi kao linkovi (druge niše, drugi gradovi). */
.tg-chiplinks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tg-chiplinks a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 2px solid var(--tg-ink);
	color: var(--tg-ink);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
}

.tg-chiplinks a:hover {
	background: var(--tg-orange);
	color: var(--tg-ink);
}

/* Na tamnom heroju ghost dugme mora da bude svetlo - inače je mastilo na mastilu. */
.tg-section--darkhero .tg-btn--ghost .elementor-button,
.tg-section--darkhero a.tg-btn--ghost {
	border-color: var(--tg-bg);
	color: var(--tg-bg);
}

.tg-section--darkhero .tg-btn--ghost .elementor-button:hover,
.tg-section--darkhero a.tg-btn--ghost:hover {
	background: var(--tg-bg);
	color: var(--tg-ink);
}

/* Isto i za ivice i sitan tekst u tamnom heroju. */
.tg-section--darkhero .tg-photo {
	border-color: var(--tg-bg);
}

/* Naslov studije slučaja: ime, ogromna brojka, metrika. */
.tg-case__h1 .tg-case__client {
	font-size: clamp(40px, 5vw, 72px);
}

.tg-case__h1 .tg-case__big {
	color: var(--tg-orange);
	font-size: clamp(84px, 17vw, 260px);
}

.tg-case__h1 .tg-case__metric {
	font-size: clamp(28px, 3.4vw, 52px);
	letter-spacing: -0.035em;
}

/* Četiri činjenice u jednom redu. */
.tg-facts--4 .tg-facts {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	margin-top: 32px;
}

/* Kartice drugih studija. */
.tg-casecards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 2px;
	background: var(--tg-rule);
	border: 2px solid var(--tg-rule);
}

.tg-casecards a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	background: var(--tg-bg);
	color: var(--tg-ink);
	text-decoration: none;
}

.tg-casecards a:hover {
	background: var(--tg-tint);
}

.tg-casecard__kicker {
	color: var(--tg-mute2);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tg-casecard__name {
	font-size: 20px;
	font-weight: 800;
}

.tg-casecard__num {
	color: var(--tg-orange);
	font-size: 40px;
	font-weight: 900;
	letter-spacing: -0.03em;
}

/* Mali nadnaslov unutar H1 na cenovniku. */
.tg-h1 .tg-price__eyebrow {
	display: block;
	font-size: clamp(14px, 1.4vw, 18px);
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 2.4;
	text-transform: uppercase;
	color: var(--tg-acc-ink);
}

/* Kartica druge studije sa slikom. */
.tg-casecards a {
	padding: 0;
}

.tg-casecard__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 2px solid var(--tg-rule);
	background: var(--tg-surface);
}

.tg-casecard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}

.tg-casecard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
}

/* Poruka posle slanja forme, ispod lepljivog zaglavlja. */
.tg-notice {
	position: sticky;
	top: 72px;
	z-index: 58;
	padding: 14px var(--tg-px);
	border-bottom: 2px solid var(--tg-rule);
	font-size: 15.5px;
	font-weight: 700;
}

.tg-notice--ok {
	background: var(--tg-orange);
	color: var(--tg-ink);
}

.tg-notice--err {
	background: var(--tg-ink);
	color: var(--tg-bg);
}

/* ---------------------------------------------------------------------------
   Rezervni prikaz objekata bez svoje stranice (includes/fallback.php).
   --------------------------------------------------------------------------- */

/* Napomena zašto je stranica kratka - treba joj cela širina, ne 44ch kolona. */
.tg-body--wide,
.tg-body--wide p {
	max-width: 62ch;
}

/* Profil člana tima: fotografija levo, podaci desno. */
.tg-split--person {
	--tg-col: 320px;
	align-items: start;
}

.tg-photo--person {
	max-width: 360px;
	aspect-ratio: 4 / 5;
}

.tg-h1--person,
.tg-h1--person .elementor-heading-title {
	font-size: clamp(40px, 5vw, 76px);
}

.tg-avatar__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Podaci o firmi na pravnim stranicama. */
.tg-defs {
	margin: 24px 0 0;
	border-top: 2px solid var(--tg-rule);
}

.tg-defs__row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-bottom: 2px solid var(--tg-rule);
}

.tg-defs dt {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tg-mute);
}

.tg-defs dd {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

@media (max-width: 599px) {
	.tg-defs__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* ---------------------------------------------------------------------------
   Dug tekst: pravne stranice, vodiči. Mera reda je 68ch - duže od toga oko
   gubi red pri prelasku.
   --------------------------------------------------------------------------- */
.tg-prose {
	margin-top: 20px;
}

.tg-prose p,
.tg-prose li {
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--tg-mute);
}

.tg-prose p {
	margin: 0 0 16px;
}

.tg-prose p:last-child {
	margin-bottom: 0;
}

.tg-prose strong {
	color: var(--tg-ink);
	font-weight: 800;
}

.tg-prose ul {
	margin: 0 0 16px;
	padding-left: 22px;
	list-style: square;
}

.tg-prose li {
	margin-bottom: 8px;
}

.tg-prose a {
	color: var(--tg-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tg-prose a:hover {
	background: var(--tg-orange);
}

.tg-prose .tg-defs dd,
.tg-prose .tg-defs dt {
	max-width: none;
	color: var(--tg-ink);
}

.tg-prose .tg-defs dt {
	color: var(--tg-mute);
}

/* ---------------------------------------------------------------------------
   Članak na blogu (single.php). Tekst se piše u editoru, pa raspored mora da
   radi i na markupu koji Elementor nije dirao.
   --------------------------------------------------------------------------- */
.tg-h1--article,
.tg-h1--article .elementor-heading-title {
	font-size: clamp(36px, 4.4vw, 68px);
	line-height: 1;
	letter-spacing: -0.035em;
	max-width: 22ch;
}

.tg-lead--wide,
.tg-lead--wide p {
	max-width: 58ch;
}

/* Red sa kategorijom, datumom i vremenom čitanja. */
.tg-amet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 28px 0 0;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--tg-mute);
}

.tg-amet span {
	color: var(--tg-rule);
}

.tg-amet__cat {
	padding: 4px 10px;
	border: 2px solid var(--tg-ink);
	color: var(--tg-ink);
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.tg-amet__cat:hover {
	background: var(--tg-orange);
}

/* Naslovna slika članka. Korice su u 16:9, pa je i okvir takav - inače crop
   odseca po visini.

   Ranije je ovde stajalo `object-fit: contain; filter: none`, jer je korica
   bila kartica sa naslovom koju crop i crno-belo kvare. Sada je korica prava
   fotografija, pa nasleđuje isecanje i crno-belo kao i sve ostale slike na
   sajtu. */
.tg-photo--cover {
	aspect-ratio: 16 / 9;
}

/* Naslovi u tekstu članka. Mera je ista kao u .tg-prose, ali naslovi smeju
   da budu šire od reda teksta. */
.tg-prose--article h2 {
	margin: 48px 0 16px;
	max-width: 30ch;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.05;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--tg-ink);
	scroll-margin-top: 96px;
}

.tg-prose--article h2:first-child {
	margin-top: 0;
}

.tg-prose--article h3 {
	margin: 32px 0 12px;
	max-width: 34ch;
	font-size: 21px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--tg-ink);
}

.tg-prose--article blockquote {
	margin: 32px 0;
	padding: 20px 24px;
	border-left: 4px solid var(--tg-orange);
	background: var(--tg-surface);
}

.tg-prose--article blockquote p:last-child {
	margin-bottom: 0;
}

.tg-prose--article table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
	font-size: 16px;
}

.tg-prose--article th,
.tg-prose--article td {
	padding: 12px 14px;
	border: 2px solid var(--tg-rule);
	text-align: left;
	vertical-align: top;
}

.tg-prose--article th {
	background: var(--tg-surface);
	font-weight: 800;
	color: var(--tg-ink);
}

.tg-prose--article ol {
	margin: 0 0 16px;
	padding-left: 24px;
}

.tg-prose--article ol li {
	margin-bottom: 8px;
}

/* Kutija o autoru ispod teksta. */
.tg-author {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 2px solid var(--tg-rule);
}

.tg-author__photo {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	aspect-ratio: 1;
}

.tg-author__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tg-author__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tg-mute);
}

.tg-author__name {
	margin: 0;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.tg-author__role {
	margin: 0;
	font-size: 15px;
	color: var(--tg-mute);
}

.tg-author__link {
	margin-top: 6px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--tg-ink);
	text-decoration: none;
}

.tg-author__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

@media (max-width: 599px) {
	.tg-author {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Mreža linkova: linije su do sada bile pozadina ispod 2px razmaka, pa je
   nepopunjen poslednji red ostajao kao crna mrlja. Sada svaka pločica nosi
   svoju liniju. */
.tg-linkgrid {
	background: transparent;
}

.tg-linkgrid a {
	box-shadow: 0 0 0 2px var(--tg-rule);
}

/* Mrvice ispisane direktno u šablonu nemaju Elementor-ov razmak ispod sebe.
   Selektor gađa samo taj slučaj - u Elementoru su mrvice unutar .elementor-widget. */
.tg-wrap > .tg-crumbs {
	margin-bottom: 20px;
}

/* Delovi grada na stranicama gradova. Nisu linkovi - stranice po naselju još
   ne postoje, a lažan link je gori od običnog teksta. */
.tg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.tg-tag {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	border: 2px solid var(--tg-rule);
	background: var(--tg-bg);
	font-size: 14px;
	font-weight: 700;
	color: var(--tg-ink);
}

/* ---------------------------------------------------------------------------
   Slike unutar članka. Fotografija ide crno-belo kao i sve ostale na sajtu,
   a grafika napravljena iz teksta ostaje u boji - ona je informacija, ne ukras.
   --------------------------------------------------------------------------- */
.tg-inline {
	margin: 40px 0;
	border: 2px solid var(--tg-rule);
	background: var(--tg-bg);
}

.tg-inline__img {
	display: block;
	width: 100%;
	height: auto;
}

.tg-inline--foto img {
	filter: grayscale(1) contrast(1.05);
}

.tg-inline figcaption {
	padding: 12px 16px;
	border-top: 2px solid var(--tg-rule);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tg-mute);
}

@media (max-width: 599px) {
	.tg-inline {
		margin: 28px 0;
	}
}