/* Kosta D. Lazić — nov sajt po dokumentu klijenta (v2, 2026-08-17).
   Vizuelni brif iz tačke 1 i 10 dokumenta, doslovno:
     crna, bela i nijanse sive · velika elegantna serifna tipografija za ime ·
     moderan sans-serif za navigaciju i pomoćni tekst · mnogo praznog prostora ·
     tanke linije · diskretne ikonice · bez fotografija, vage pravde, čekića i klišea.
   Ime KOSTA D. LAZIĆ je glavni vizuelni identitet — otud je najveći element na strani.

   Pismo je uzeto sa KLIJENTOVE MAKETE, ne birano po svom ukusu: ime nosi Playfair
   Display (Didone, oštar kontrast debelih i tankih poteza, kakav se na maketi vidi),
   a oznake, navigacija i tekst nose Montserrat (geometrijski grotesk). Prva verzija
   je koristila Cormorant i Golos — lepi za sebe, ali mekši i sasvim drugog karaktera.
   Oba su PROVERENA na nivou woff2 fajla — nose svih 78 traženih ćiriličnih znakova,
   ruskih i srpskih (gotcha #54), što je za rusku verziju uslov, ne detalj. Za poređenje,
   Jost je odbijen jer mu fali svih 12 srpskih ćiriličnih slova. */

:root {
  --crna: #111111;
  --mastilo: #1a1a1a;
  --tekst: #2e2e2e;
  --tiho: #6b6b6b;
  --tise: #8a8a8a;
  --linija: #e0e0e0;
  --linija-2: #cfcfcf;
  --bela: #ffffff;
  --siva: #f6f6f5;           /* jedina podloga — trake sekcija */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --maxw: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 100px; }

/* Osnovno pismo je BEZSERIFNO. Na klijentovoj maketi je serif rezervisan za ime,
   podnaslov naslovne, uvod, citat i naslove tekstova — sve ostalo, uključujući tekst
   sekcija, nosi sans. Prva verzija je serif pustila svuda, pa je stranica delovala
   mekše i lakše nego maketa, koja je osetno čvršća i deblja. */
body {
  margin: 0; background: var(--bela); color: var(--tekst);
  font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; }

/* Prored naslova se mora zadati izričito — inače nasleđuju 1.72 od teksta, pa se
   naslov od dva reda razvuče kao da su dva odvojena pasusa. */
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--crna); line-height: 1.18; }
h3 { margin: 0; font-family: var(--sans); font-weight: 600; color: var(--crna); line-height: 1.3; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: var(--crna); }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

.omot { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
@media (max-width: 700px) { .omot { padding: 0 22px; } }

/* Oznaka sekcije — sitna, razmaknuta, bezserifna. „Pomoćni tekst" iz brifa. */
/* Oznaka sekcije je na maketi naslov, ne fusnota: krupnija, deblja i sa kratkom
   crtom ispod. */
.oznaka {
  font-family: var(--sans); font-size: .88rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--crna);
  margin: 0 0 14px;
}
.oznaka::after { content: ""; display: block; width: 40px; height: 2px;
  background: var(--crna); margin-top: 9px; }
.sredina .oznaka::after { margin-left: auto; margin-right: auto; }
.tise { color: var(--tiho); }

.preskoci { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--crna); color: #fff; padding: 12px 20px; text-decoration: none;
  font-family: var(--sans); font-size: .8rem; }
.preskoci:focus { left: 0; }

/* ───────────── zaglavlje ───────────── */

.zaglavlje {
  position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--linija);
}
.zaglavlje-red { display: flex; align-items: center; gap: 30px; min-height: 72px; }

.znak { text-decoration: none; margin-right: auto; display: block; }
.znak-ime {
  display: block; font-family: var(--serif); font-weight: 400; font-size: 1.32rem;
  letter-spacing: .12em; color: var(--crna); line-height: 1.1; white-space: nowrap;
}
.znak-zvanje {
  display: block; font-family: var(--sans); font-size: .58rem; font-weight: 500;
  letter-spacing: .3em; color: var(--tiho); margin-top: 5px;
}

.meni { display: flex; align-items: center; gap: 30px; }
.meni > a {
  font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tekst); text-decoration: none;
  padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap;
}
.meni > a:hover, .meni > a.tekuci { color: var(--crna); border-bottom-color: var(--crna); }

.jezici { display: flex; align-items: center; gap: 10px; padding-left: 22px; border-left: 1px solid var(--linija); }
.jezik {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tise); text-decoration: none; border-bottom: 1px solid transparent;
}
.jezik:hover { color: var(--crna); }
.jezik.tekuci { color: var(--crna); border-bottom-color: var(--crna); }

.meni-dugme {
  display: none; background: none; border: 1px solid var(--linija-2);
  width: 44px; height: 44px; cursor: pointer; font-size: 1rem; color: var(--crna);
  place-items: center;
}
@media (max-width: 1040px) {
  .js .meni-dugme { display: grid; }
  .js .meni {
    position: absolute; left: 0; right: 0; top: 72px; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--bela);
    border-bottom: 1px solid var(--linija); padding: 6px 40px 22px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .07);
  }
  .meni { flex-direction: column; align-items: stretch; gap: 0; }
  .meni > a { padding: 15px 0; border-bottom: 1px solid var(--linija); }
  html:not(.js) .zaglavlje-red { flex-wrap: wrap; min-height: 0; padding-bottom: 14px; }
  html:not(.js) .meni { width: 100%; }
}
/* Na uskom ekranu isti red dele tri stvari: potpis, dugme menija i prekidač jezika.
   Sa razmakom od 30px i potpisom u punoj veličini zbir premašuje 375px, pa je „SR"
   ispadalo van ekrana — i to bez vodoravnog klizača, jer se višak seče a ne pomera,
   pa se ne vidi da nešto uopšte nedostaje. Dugme i jezici se izuzimaju iz skupljanja
   (`flex: 0 0 auto`) da bi popuštao samo potpis; bez toga se dugme stiskalo sa 44 na
   28 piksela i prestajalo da bude pouzdana meta za prst. */
@media (max-width: 560px) {
  .zaglavlje-red { gap: 14px; }
  .znak-ime { font-size: 1.06rem; letter-spacing: .09em; }
  .znak-zvanje { font-size: .54rem; letter-spacing: .24em; margin-top: 4px; }
  .meni-dugme { flex: 0 0 auto; }
  .jezici { flex: 0 0 auto; padding-left: 12px; gap: 9px; }
}
/* Najuži ekrani koji se još sreću (iPhone SE, 320px). Potpis se ne sme prelomiti u dva
   reda, pa jedini prostor koji je ostao dolazi od bočne margine samog zaglavlja. */
@media (max-width: 400px) {
  .zaglavlje .omot { padding: 0 16px; }
  .zaglavlje-red { gap: 10px; }
  .znak-ime { font-size: .96rem; letter-spacing: .06em; }
  .jezici { padding-left: 10px; gap: 7px; }
}

/* ───────────── dugmad ───────────── */

.dug {
  display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans);
  font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; padding: 14px 26px; border: 1px solid var(--crna);
  background: var(--crna); color: #fff; transition: background .18s, color .18s;
}
.dug:hover { background: var(--bela); color: var(--crna); }
.dug::after { content: "→"; font-size: .9rem; letter-spacing: 0; }

.veza {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans);
  font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--crna); text-decoration: none; border-bottom: 1px solid var(--linija-2);
  padding-bottom: 5px;
}
.veza:hover { border-bottom-color: var(--crna); }
.veza::after { content: "→"; letter-spacing: 0; }

/* ───────────── naslovna ───────────── */

/* Maketa: cela naslovna staje u pola ekrana. Prva verzija je istu sadržinu razvukla
   na preko hiljadu piksela — svaki razmak dvostruko veći, ime skoro upola veće — pa je
   utisak bio sasvim drugi iako su elementi isti. Ovde je razmera vraćena na njihovu. */
.hero { padding: 44px 0 52px; }
.hero-mreza { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: stretch; }
@media (max-width: 980px) { .hero-mreza { grid-template-columns: 1fr; gap: 34px; } .hero { padding: 34px 0 44px; } }

.ime-veliko {
  font-family: var(--serif); font-weight: 400; color: var(--crna);
  font-size: clamp(2.3rem, 4.9vw, 4.3rem); line-height: 1.04; letter-spacing: .005em;
  margin: 0 0 10px; text-wrap: balance;
}
.crta { width: 78px; height: 1px; background: var(--crna); margin: 0 0 18px; }
.zvanje-veliko {
  font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .3em;
  text-transform: uppercase; color: var(--crna); margin: 0 0 16px;
}
.hero-podnaslov {
  font-family: var(--serif); font-weight: 400; color: var(--crna);
  font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.2; margin: 0 0 14px;
  max-width: 24ch;
}
.hero-uvod { font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--tekst); max-width: 52ch; }
.hero-uvod p { margin-bottom: .55em; }
.hero .dug { margin-top: 24px; }

.citat {
  border-left: 1px solid var(--linija); padding: 0 0 0 46px; margin: 0;
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: var(--tekst);
}
@media (max-width: 980px) { .citat { border-left: none; padding: 0; } }
.citat-znak { font-size: 2.2rem; line-height: .5; color: var(--tise); display: block; }
.citat-znak.dole { text-align: right; }
.citat p { margin: 14px 0; max-width: 30ch; }

/* ───────────── trake sekcija ───────────── */

.traka { background: var(--siva); border-top: 1px solid var(--linija); border-bottom: 1px solid var(--linija); }
.odeljak { padding: 52px 0; }
@media (max-width: 700px) { .odeljak { padding: 40px 0; } }

/* dve kolone: levo naslov i uvod, desno sadržaj */
.dvokolono { display: grid; grid-template-columns: 300px 1fr; gap: 54px; align-items: start; }
@media (max-width: 980px) { .dvokolono { grid-template-columns: 1fr; gap: 38px; } }
.dvokolono h2 { font-size: 1.3rem; margin-bottom: 12px; }
.uvodni { color: var(--tiho); font-size: .9rem; line-height: 1.6; }
.dvokolono .veza { margin-top: 18px; }

/* stubovi (iskustvo / pristup / poverljivost) */
.stubovi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
@media (max-width: 860px) { .stubovi { grid-template-columns: 1fr; } }
.stub { padding: 0 26px; border-left: 1px solid var(--linija-2); }
.stub:first-child { padding-left: 0; border-left: none; }
@media (max-width: 860px) {
  .stub { padding: 26px 0; border-left: none; border-top: 1px solid var(--linija-2); }
  .stub:first-child { padding-top: 0; border-top: none; }
}
.stub .ikona { margin-bottom: 14px; }
.stub h3 {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 9px;
}
.stub p { color: var(--tiho); font-size: .82rem; line-height: 1.55; }

/* ikonice — tanka linija, bez ijednog klišea (bez vage, čekića i sudnice) */
.ikona { width: 34px; height: 34px; stroke: var(--crna); fill: none;
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; display: block; }
/* Viber i WhatsApp su zvanični znaci, crtani punom površinom a ne linijom. CSS iznad
   gasi `fill`, pa bi bez ovoga bili nevidljivi — pravilo u tabeli stilova jače je od
   atributa `fill` na samom <svg>. Veličinu ne diramo: nasleđuju istih 20px kao
   linijski znaci pored njih, pa je red poravnat. */
.ikona-marka { fill: var(--crna); stroke: none; }

/* ───────────── oblasti prava ───────────── */

.sredina { text-align: center; }
.sredina .oznaka { margin-bottom: 14px; }
.naslov-sredina { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.crta-sredina { width: 64px; height: 1px; background: var(--linija-2); margin: 22px auto 0; }

/* Šest oblasti u JEDNOM redu, kao na maketi — ne 3×2. Na užem ekranu se lomi na tri
   pa na dve pa na jednu kolonu. */
.oblasti { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 30px; }
@media (max-width: 1180px) { .oblasti { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .oblasti { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .oblasti { grid-template-columns: 1fr; } }
.oblast {
  padding: 22px 16px 18px; border-left: 1px solid var(--linija);
  display: flex; flex-direction: column;
}
.oblasti .oblast:first-child { border-left: none; }
@media (max-width: 1180px) {
  .oblasti .oblast { border-bottom: 1px solid var(--linija); }
  .oblasti .oblast:first-child { border-left: 1px solid var(--linija); }
  .oblasti .oblast:nth-child(3n+1) { border-left: none; }
}
@media (max-width: 780px) { .oblasti .oblast:nth-child(3n+1) { border-left: 1px solid var(--linija); }
  .oblasti .oblast:nth-child(2n+1) { border-left: none; } }
@media (max-width: 520px) { .oblast { border-left: none !important; padding: 26px 0; } }
.oblast .ikona { width: 30px; height: 30px; margin: 0 auto 14px; }
.oblast h3 {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.4; margin-bottom: 9px; text-align: center;
}
.oblast p { color: var(--tiho); font-size: .78rem; line-height: 1.5; text-align: center; }
/* Strelica ispod svake oblasti — na maketi vodi na tu oblast; ovde vodi na stranicu
   sa svim oblastima, jer zasebne stranice po usluzi još ne postoje. */
.oblast-strelica {
  margin-top: auto; padding-top: 14px; text-align: center; font-size: 1rem;
  color: var(--crna); text-decoration: none; display: block;
}
.oblast-strelica:hover { transform: translateX(3px); }
.sredina-veza { margin-top: 26px; text-align: center; }

/* spisak na stranici „Sve oblasti prava" — mirniji, u dve kolone */
/* Stranica „Sve oblasti prava" ide u REDOVE, ne u mrežu.
   U mreži od dve kolone grupa od tri stavke ostavlja rupu, a visinu reda diktira
   najduži tekst — pa su kraće kartice imale prazan prostor do strelice. Red sa
   ikonicom levo, tekstom u sredini i strelicom desno nema nijedan od ta dva problema
   i podnosi bilo koji broj stavki u grupi. */
.spisak { display: block; margin-top: 6px; }
/* Red ima ČETIRI deteta — ikonicu, naslov, opis i strelicu — pa se svako mora
   izričito rasporediti. Bez toga opis upadne u treću kolonu široku 28px i lomi se
   po jednu reč u redu, a strelica sklizne u sledeći red ispod ikonice. */
.spisak .oblast {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px;
  grid-template-rows: auto auto; align-items: start; column-gap: 22px; row-gap: 6px;
  text-align: left; border-left: none; border-bottom: 1px solid var(--linija);
  padding: 20px 0;
}
.spisak .ikona { grid-column: 1; grid-row: 1 / span 2; }
.spisak .oblast > h3, .spisak .oblast > h4 { grid-column: 2; grid-row: 1; }
.spisak .oblast > p { grid-column: 2; grid-row: 2; }
.spisak .oblast-strelica { grid-column: 3; grid-row: 1 / span 2; }
.spisak .oblast:last-child { border-bottom: none; }
.spisak .oblast h3, .spisak .oblast p { text-align: left; }
.spisak .oblast h3 { font-size: .78rem; margin-bottom: 6px; }
.spisak .oblast p { font-size: .84rem; line-height: 1.55; max-width: 78ch; }
.spisak .ikona { width: 26px; height: 26px; margin: 2px 0 0; }
.spisak .oblast-strelica { margin: 0; padding: 0; text-align: right; align-self: center; }
@media (max-width: 620px) {
  .spisak .oblast { grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; }
  .spisak .oblast-strelica { grid-column: 2; grid-row: 3; text-align: left; padding-top: 6px; }
}

/* ───────────── pravna praksa ───────────── */

.teme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
@media (max-width: 980px) { .teme { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .teme { grid-template-columns: 1fr; } }
.tema { padding: 0 26px; border-left: 1px solid var(--linija-2); }
.teme .tema:nth-child(3n+1) { border-left: none; }
@media (max-width: 980px) {
  .teme .tema:nth-child(3n+1) { border-left: 1px solid var(--linija-2); }
  .teme .tema:nth-child(2n+1) { border-left: none; }
}
/* `.teme .tema:nth-child(3n+1)` iz pravila za 980px ima vecu tezinu od golog
   `.tema`, pa je na telefonu cetvrti blok zadrzavao levu liniju i izgledao
   uokviren dok ostali nisu. Selektor mora biti iste tezine da bi je ugasio. */
@media (max-width: 640px) {
  .teme .tema,
  .teme .tema:nth-child(3n+1),
  .teme .tema:nth-child(2n+1) { border-left: none; padding: 22px 0; border-top: 1px solid var(--linija-2); }
}
.tema h3 { font-family: var(--serif); font-weight: 400; font-size: 1.06rem; line-height: 1.3; margin-bottom: 8px; }
.tema p { color: var(--tiho); font-size: .8rem; line-height: 1.5; }
.u-pripremi {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; color: var(--tise);
  margin-top: 34px;
}

/* ───────────── međunarodni klijenti ───────────── */

.grupe { display: grid; gap: 30px; margin-top: 30px; }
.grupa { border-top: 1px solid var(--linija-2); padding-top: 20px; }
.grupa h3 {
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 12px;
}
.grupa p { color: var(--tiho); font-size: .96rem; }

/* ───────────── kontakt ───────────── */

/* DVE kolone, ne tri. Treća je nosila samo pravnu napomenu, a otkako je spisak
   kontakata narastao na deset redova ostajala je kao prazno polje uz dugačku levu
   kolonu. Napomena sada stoji ispod forme, gde je i inače čita onaj ko šalje upit,
   a forma dobija prostor — polja su u tri kolone bila preuska da se vidi šta u njima
   piše („E-mail, telefon ili What…"). */
.kontakt-mreza { display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr;
  grid-template-rows: auto 1fr; gap: 0 64px; align-items: start; margin-top: 28px; }
/* Spisak kontakata drži OBA reda u levoj koloni, pa napomena staje odmah ispod forme.
   Bez toga je ona čekala da se završi duži red — a duži red je uvek levi — pa je između
   dugmeta i napomene zjapio prazan prostor visok koliko i pola spiska. */
.podaci { grid-row: 1 / span 2; }
.kontakt-strana { grid-column: 2; grid-row: 2; margin-top: 26px; align-self: start; }
@media (max-width: 860px) { .kontakt-mreza { grid-template-columns: 1fr; gap: 38px; }
  .podaci { grid-row: auto; } .kontakt-strana { grid-column: 1; grid-row: auto; margin-top: 0; } }

.podaci { display: grid; gap: 14px; }
.podatak { display: grid; grid-template-columns: 22px 1fr; gap: 15px; align-items: start; }
.podatak .ikona { width: 20px; height: 20px; margin-top: 4px; }
.podatak a, .podatak span { font-size: .92rem; color: var(--tekst); text-decoration: none; word-break: break-word; }
.podatak a:hover { color: var(--crna); border-bottom: 1px solid var(--crna); }
.potpis-kancelarije { font-size: .95rem; color: var(--tiho); margin-top: 8px; }

.forma { display: grid; gap: 16px; }
.forma[hidden] { display: none; }
.mamac { position: absolute; left: -9999px; }
.forma-red { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .forma-red { grid-template-columns: 1fr; } }
.forma input, .forma textarea {
  width: 100%; padding: 12px 14px; font-family: var(--serif); font-size: 1rem;
  background: var(--bela); color: var(--crna); border: 1px solid var(--linija-2);
}
.forma input::placeholder, .forma textarea::placeholder { color: var(--tise); }
.forma input:focus, .forma textarea:focus { outline: none; border-color: var(--crna); }
.forma textarea { resize: vertical; min-height: 92px; }
.forma button { justify-self: start; cursor: pointer; }
.forma-greska { font-family: var(--sans); font-size: .82rem; color: #8f2222; margin: 0; }
.forma-greska[hidden] { display: none; }
.forma-hvala { display: none; }
.forma-hvala:target, .forma-hvala.vidi-se {
  display: block; border: 1px solid var(--crna); padding: 20px 22px; font-size: .96rem;
}
.forma-hvala strong { display: block; margin-bottom: 4px; }

.kontakt-strana p { font-size: .78rem; color: var(--tiho); line-height: 1.65; max-width: 62ch; }
.kontakt-strana .crta { margin-bottom: 16px; width: 40px; }

/* ───────────── podnožje ───────────── */

.podnozje { border-top: 1px solid var(--linija); padding: 30px 0; }
.podnozje .omot { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; }
.podnozje p { font-family: var(--sans); font-size: .74rem; color: var(--tise); margin: 0; }
/* Advokatska tarifa — puna širina ispod ostalog, da se ne bori za mesto sa kontaktom. */
.podnozje .tarifa { flex-basis: 100%; }
.podnozje .tarifa a { color: var(--tise); text-decoration: underline; text-underline-offset: 3px; }
.podnozje .tarifa a:hover { color: var(--tekst); }
.napomena-tarifa { font-family: var(--sans); font-size: .82rem; color: var(--tise);
  max-width: 68ch; margin: 34px auto 0; text-align: center; }
.napomena-tarifa a { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) { body { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ───────────── radne stranice po uslugama (tačka 7) ─────────────
   Vidljive oznake za podatke koje klijent treba da potvrdi. Namerno su upadljive:
   cilj je da se ne mogu prevideti i da nijedna ne ode u objavu nepopunjena. */

.traka-nacrt {
  background: #fff8dc; border-bottom: 1px solid #e8d9a0; padding: 12px 0;
  font-family: var(--sans); font-size: .8rem; color: #4a3f14; line-height: 1.5;
}
.usko-tekst { max-width: 760px; }
.usko-tekst h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 22px; }
.usko-tekst h2 { font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin: 30px 0 10px; }
.usko-tekst p { margin-bottom: 1em; }
.napomena-klijentu { background: #fff8dc; border-left: 3px solid #d9be5e;
  padding: 12px 16px; font-size: .86rem; }
mark.potvrditi {
  background: #ffe680; color: #3d3208; padding: 1px 6px; border-radius: 2px;
  font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.faq-naslov { margin-top: 34px !important; }
.faq { margin: 0; }
.faq dt { font-weight: 600; margin-top: 16px; }
.faq dd { margin: 4px 0 0; color: var(--tiho); }
.interni { font-family: var(--sans); font-size: .78rem; color: var(--tiho);
  border-top: 1px solid var(--linija); padding-top: 14px; margin-top: 30px; }
.tabela-usluga { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: .9rem; }
.tabela-usluga th, .tabela-usluga td { text-align: left; padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--linija); vertical-align: top; }
.tabela-usluga th { font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }

/* Naslov tematske grupe na stranici „Sve oblasti prava" (tačka 3.1 dokumenta). */
.grupa-naslov {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--crna); margin: 36px 0 0;
  padding-bottom: 10px; border-bottom: 2px solid var(--crna);
}
.grupa-naslov + .spisak { margin-top: 0; }
.ime-veliko .zvanje-veliko { display: block; margin: 14px 0 0; }

/* ───────────── plan objavljivanja (Pravna praksa) ───────────── */
/* Naslovi budućih tekstova. Namerno NISU linkovi — stranice još ne postoje, a link
   koji ne vodi nigde je gori od običnog reda teksta. Postaju linkovi čim tekst stigne. */
.plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 54px;
  border-top: 1px solid var(--linija); }
.plan-grupa { padding: 30px 30px 6px; border-left: 1px solid var(--linija); }
.plan-grupa:first-child { border-left: none; padding-left: 0; }
.plan-grupa h2 { font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--crna); margin: 0 0 16px; }
.plan-grupa ul { list-style: none; margin: 0; padding: 0; }
.plan-grupa li { font-family: var(--serif); font-size: 1rem; line-height: 1.45;
  color: var(--tekst); padding: 11px 0; border-top: 1px solid var(--linija); }
.plan-grupa li:first-child { border-top: none; padding-top: 0; }
@media (max-width: 900px) { .plan { grid-template-columns: 1fr; }
  .plan-grupa { border-left: none; padding: 26px 0 4px; border-top: 1px solid var(--linija); }
  .plan-grupa:first-child { border-top: none; } }

/* ───────────── lepljiva traka na telefonu ───────────── */
/* Poziv i WhatsApp uvek nadohvat palca. Na širem ekranu je nema — tamo je kontakt
   ionako vidljiv, a traka bi samo pokrivala sadržaj. Podnožje dobija razmak da je
   poslednji red teksta ne završi ispod trake. */
.mob-traka { display: none; }
@media (max-width: 760px) {
  .mob-traka {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(255, 255, 255, .97); backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--linija-2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mob-traka a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 54px; text-decoration: none; color: var(--crna);
    font-family: var(--sans); font-size: .72rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
  }
  .mob-traka a + a { border-left: 1px solid var(--linija); }
  .mob-traka .ikona { width: 17px; height: 17px; }
  .podnozje { padding-bottom: calc(30px + 54px + env(safe-area-inset-bottom)); }
}

/* ───────────── Google ocena i mapa ───────────── */
/* Zvezdice se crtaju iz ocene (CSS širina punjenja), a ne slikom — pa se ne mogu
   razići sa brojem koji stoji pored. Broj recenzija se ne piše: Google ga na ovom
   profilu ne prikazuje javno, a izmišljen bi bio neistina na advokatovoj stranici. */
.google-red { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--linija-2); }
.ocena { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.ocena-broj { font-family: var(--serif); font-size: 1.6rem; color: var(--crna); line-height: 1; }
.zvezde { display: inline-flex; gap: 3px; }
.zvezda { position: relative; width: 15px; height: 15px; display: inline-block;
  background: var(--linija-2);
  -webkit-mask: var(--zvezda-oblik) center/contain no-repeat;
          mask: var(--zvezda-oblik) center/contain no-repeat; }
.zvezda-pun { position: absolute; inset: 0; background: var(--crna); }
:root { --zvezda-oblik: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5.1 4.8 1.3 6.9L12 17.8 5.8 21.1l1.3-6.9L2 9.4l7-.9z'/%3E%3C/svg%3E"); }
.ocena-natpis { font-family: var(--sans); font-size: .78rem; color: var(--tiho);
  border-bottom: 1px solid var(--linija-2); padding-bottom: 2px; }
.ocena:hover .ocena-natpis { color: var(--crna); border-bottom-color: var(--crna); }

/* Mapa u sivim tonovima — jedini spoljni sadržaj na strani, pa se svodi na paletu
   stranice. Na prelazak mišem dobija punu boju, da se lokacija čita normalno. */
.mapa { margin-top: 26px; border: 1px solid var(--linija-2); line-height: 0; }
.mapa iframe { display: block; filter: grayscale(1) contrast(1.05); transition: filter .3s; }
.mapa:hover iframe { filter: none; }

.podatak .sitno { font-size: .78rem; color: var(--tiho); display: inline-block; margin-top: 3px; }

/* Natpis podgrupe u kontaktu („Društvene mreže i poruke") — deli spisak na dva dela,
   isto kao na njegovom sadašnjem sajtu, ali bez druge boje i bez okvira. */
.podgrupa { font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tise);
  margin: 22px 0 4px; padding-top: 18px; border-top: 1px solid var(--linija); }

/* ── Verna kopija advokat-beograd.com (ADVO_OBIM=stari, 15.9.2026) ─────────────────────────
   Dodaje se na kraj odobrenog `stil.css` samo u toj verziji. Sadržaj je 1:1 sa starog sajta
   (dugi opisi usluga sa spiskovima, tri grupe kontakta, traka o kolačićima), pa ovde stoje
   rasporedi za taj sadržaj u istom crno-belom jeziku dizajna. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Dugme menija: natpis sa starog sajta ostaje skriven u dugmetu, znak crta CSS. */
.meni-dugme-verno .crte, .meni-dugme-verno .crte::before, .meni-dugme-verno .crte::after {
  display: block; width: 18px; height: 1.5px; background: var(--crna); content: "";
  transition: transform .2s, background .2s; }
.meni-dugme-verno .crte { position: relative; }
.meni-dugme-verno .crte::before { position: absolute; left: 0; top: -6px; }
.meni-dugme-verno .crte::after { position: absolute; left: 0; top: 6px; }
.meni-dugme-verno[aria-expanded="true"] .crte { background: transparent; }
.meni-dugme-verno[aria-expanded="true"] .crte::before { top: 0; transform: rotate(45deg); }
.meni-dugme-verno[aria-expanded="true"] .crte::after { top: 0; transform: rotate(-45deg); }

/* Naslovna: H1 je doslovno sa starog sajta („Advokatska kancelarija<br>Kosta D. Lazić"). */
.hero-verno { padding: 56px 0 60px; }
.hero-verno .h1-verno { max-width: 18ch; margin-bottom: 28px; }
.hero-verno .dug { margin-top: 0; }

/* Ko smo mi — engleska strana ima podnaslov h3, ruska drugi h2 unutar iste sekcije. */
.o-nama-tekst p { font-size: .98rem; line-height: 1.7; color: var(--tekst); max-width: 68ch; }
.o-nama-tekst h2, .o-nama-tekst h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem;
  line-height: 1.3; color: var(--crna); margin: 30px 0 12px; }
.o-nama-tekst > h2:first-child, .o-nama-tekst > h3:first-child { margin-top: 0; }
/* Na telefonu naslov stoji iznad teksta — razmak kolona od 38px ga je odvajao od pasusa koji uvodi. */
@media (max-width: 980px) { .dvokolono { gap: 10px; } }

/* Usluge — naslov sa znakom levo, tekst i spisak desno. */
.usluge-stari { margin-top: 34px; border-top: 1px solid var(--linija); }
.usluga-stari { display: grid; grid-template-columns: 300px 1fr; gap: 54px;
  padding: 38px 0; border-bottom: 1px solid var(--linija); }
.usluga-glava .ikona { margin-bottom: 14px; }
.usluga-glava h3 { font-family: var(--serif); font-weight: 400; font-size: 1.28rem; line-height: 1.3; }
.usluga-telo p { font-size: .95rem; line-height: 1.7; color: var(--tekst); max-width: 70ch; }
.usluga-telo .stavke { list-style: none; margin: 4px 0 1.05em; padding: 0; max-width: 70ch; }
.usluga-telo .stavke:last-child { margin-bottom: 0; }
.usluga-telo .stavke li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--linija-2);
  font-size: .92rem; line-height: 1.6; color: var(--tekst); }
.usluga-telo .stavke li:first-child { border-top: none; }
.usluga-telo .stavke li::before { content: ""; position: absolute; left: 0; top: 1.3em;
  width: 12px; height: 1px; background: var(--crna); }
@media (max-width: 980px) { .usluga-stari { grid-template-columns: 1fr; gap: 14px; padding: 30px 0; } }

/* Kontakt — tri grupe sa starog sajta: adresa, kontakt informacije, društvene mreže. */
.kontakt-verno { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 38px; }
.kontakt-grupa h4 { margin: 0 0 16px; font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--crna); }
.kontakt-grupa h4::after { content: ""; display: block; width: 32px; height: 1px; background: var(--crna); margin-top: 9px; }
.kontakt-grupa p { font-size: .92rem; line-height: 1.6; color: var(--tekst); margin: 0 0 10px; overflow-wrap: anywhere; }
.kontakt-grupa a { color: var(--crna); text-decoration: none; border-bottom: 1px solid var(--linija-2); }
.kontakt-grupa a:hover { border-bottom-color: var(--crna); }
.mreze { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mreze a { display: inline-flex; align-items: center; gap: 12px; border-bottom: none; font-size: .92rem; }
.mreze a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mreze svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 860px) { .kontakt-verno { grid-template-columns: 1fr; gap: 30px; } }

/* Podnožje — autorska prava sa starog sajta. */
.podnozje .copyright { flex-basis: 100%; }
.podnozje .copyright a { color: var(--tise); text-decoration: underline; text-underline-offset: 3px; }
.podnozje .copyright a:hover { color: var(--tekst); }

/* Traka o kolačićima — tekst, dugme i skripta doslovno sa starog sajta; ovde samo izgled. */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: none;
  align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 26px;
  max-width: 780px; margin: 0 auto; padding: 16px 20px; background: var(--crna); color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.cookie-banner.cookie-banner-visible { display: flex; }
.cookie-banner.cookie-banner-hidden { display: none; }
.cookie-banner-text { margin: 0; flex: 1 1 280px; font-size: .82rem; line-height: 1.55; color: #fff; }
.cookie-accept-btn { background: #fff; color: var(--crna); border: 1px solid #fff; cursor: pointer;
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; padding: 11px 22px; }
.cookie-accept-btn:hover { background: transparent; color: #fff; }

/* ── Verzija po modelu (ADVO_OBIM=model, 15.9.2026) ─────────────────────────────────────────
   Dodaje se posle `stil.css` i `stil-stari.css`. Raspored je sa Kostine makete; tekst je sa
   starog sajta, pa su rečenice duže nego na maketi — zato kartice idu u tri kolone, ne u šest. */

/* Uvod: podnaslov je njegov stari naslov („English-speaking Serbian lawyer"). */
.hero-model .hero-podnaslov {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.3; color: var(--crna); letter-spacing: 0; text-transform: none; margin: 0 0 12px;
}
.hero-model .h1-verno { margin-bottom: 22px; }
.hero-model .hero-podnaslov { max-width: none; }   /* podnaslov u jednom redu, bez „lawyer" samog u redu */
.hero-model .hero-uvod p { max-width: 58ch; }

/* Oblasti na početnoj: tri u redu. */
.oblasti.oblasti-model { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oblasti-model .oblast { border-bottom: 1px solid var(--linija); }
.oblasti-model .oblast:nth-child(3n+1) { border-left: none; }
.oblasti-model .oblast p { font-size: .82rem; }
@media (max-width: 780px) {
  .oblasti.oblasti-model { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oblasti-model .oblast:nth-child(3n+1) { border-left: 1px solid var(--linija); }
  .oblasti-model .oblast:nth-child(2n+1) { border-left: none; }
}
@media (max-width: 520px) { .oblasti.oblasti-model { grid-template-columns: 1fr; } }

/* Kontakt: tri grupe sa starog sajta levo, forma desno. */
.kontakt-model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 54px;
  align-items: start; margin-top: 34px; }
.kontakt-model .kontakt-verno { grid-template-columns: 1fr; gap: 28px; margin-top: 0; }
.kontakt-forma select { width: 100%; padding: 12px 14px; font: inherit; font-size: .9rem;
  border: 1px solid var(--linija-2); background: var(--bela); color: var(--tekst); }
@media (max-width: 860px) { .kontakt-model { grid-template-columns: 1fr; gap: 38px; } }

/* Unutrašnje strane. */
.naslov-strane { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 4px 0 24px; }
.odeljak-cta { padding-top: 0; }
.o-nama-tekst .bio { font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; color: var(--crna); }
.usluga-strana { max-width: 860px; }
.usluga-strana .oznaka a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linija-2); }
.usluga-strana .oznaka a:hover { border-bottom-color: var(--crna); }
.usluga-cta { margin-top: 34px; }
.ostale-usluge { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--linija); }
.ostale-usluge ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.ostale-usluge a { color: var(--crna); text-decoration: none; border-bottom: 1px solid var(--linija-2);
  font-size: .95rem; line-height: 1.5; }
.ostale-usluge a:hover { border-bottom-color: var(--crna); }

/* Zaglavlje na telefonu i tabletu (zahtev 15.9.2026): izbor jezika na mestu dugmeta, dugme menija krajnje desno.
   Crta koja deli jezike od menija prelazi na desnu stranu jezika. Samo uz JS — bez njega dugmeta nema. */
@media (max-width: 1040px) {
  .js .jezici { padding-left: 0; border-left: none; padding-right: 22px; border-right: 1px solid var(--linija); }
}
@media (max-width: 560px) { .js .jezici { padding-left: 0; padding-right: 12px; } }
@media (max-width: 400px) { .js .jezici { padding-left: 0; padding-right: 10px; } }
/* Najuži telefoni (320px): ime, jezici i dugme zajedno su bili 11px širi od reda, pa je dugme stajalo 5px od desne
   ivice umesto 16px kao levo. Manji razmaci vraćaju istu marginu sa obe strane. */
@media (max-width: 360px) {
  .zaglavlje-red { gap: 8px; }
  .js .jezici { gap: 5px; padding-right: 6px; }
}

/* ── Spojena verzija (ADVO_OBIM=spojeno, 15.9.2026) ─────────────────────────────────────────
   Dodaje se posle `stil-model.css`, samo u ovoj verziji. Početna nosi ceo tekst starog sajta, a iz
   dokumenta v2 dobija uvod, O advokatu sa tri stuba, šest oblasti, međunarodne klijente i formu. */

/* Naslov sekcije sa izgledom oznake (oblasti prava). Klasa pobeđuje serif koji h2 nosi iz stil.css. */
h2.oznaka { line-height: 1.3; }

/* Uvod: podnaslov iz dokumenta pa dva kratka pasusa. */
.hero-model .hero-uvod p + p { font-size: .95rem; color: var(--tiho); }

/* O advokatu: tekst iz dokumenta u dve kolone, tri stuba u redu ispod. */
.o-nama-tekst .veza { margin-top: 8px; }
.stubovi-red { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--linija-2); }

/* Dve bele sekcije jedna za drugom (tekst starog sajta, pa oblasti) dele se linijom. */
.odeljak-oblasti { border-top: 1px solid var(--linija); }

/* Naslovi usluga sa starog sajta vode na stranu usluge — veza se vidi, ali ne vuče pažnju. */
.usluga-glava h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linija-2); }
.usluga-glava h3 a:hover { border-bottom-color: var(--crna); }

/* Međunarodni klijenti. Grupe stoje u koloni teksta starog sajta, čiji `.o-nama-tekst h3` i `p` (stil-stari.css)
   imaju istu težinu kao `.grupa h3` i `.u-pripremi`, a dolaze kasnije — pa su naslovi grupa dobijali serif
   od 1.3rem sa razmakom slova, a napomena razmak slova na punoj veličini teksta. Zato selektori sa dve klase. */
.o-nama-tekst .grupe { margin-top: 22px; }
.o-nama-tekst .grupa h3 { font-family: var(--sans); font-size: .72rem; font-weight: 600; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--crna); margin: 0 0 10px; }
.o-nama-tekst .grupa p { font-size: .95rem; color: var(--tekst); }
.o-nama-tekst .u-pripremi { margin-top: 22px; font-size: .8rem; letter-spacing: .04em; color: var(--tiho); }
.o-nama-tekst .dug { margin-top: 22px; }

/* Kontakt: naslov i uvod forme iz dokumenta, napomena ispod dugmeta. */
.forma-naslov { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.25;
  color: var(--crna); margin: 0 0 8px; }
.kontakt-forma > .uvodni { margin-bottom: 18px; max-width: 56ch; }
.forma-napomena { font-size: .78rem; color: var(--tiho); line-height: 1.65; margin: 18px 0 0; max-width: 62ch; }
.kontakt-verno .potpis-kancelarije { font-size: .86rem; margin: 0; }

/* Strana usluge: opis iz dokumenta, pa naslov i tekst sa starog sajta. */
.uvodni-veliki { font-family: var(--serif); font-size: 1.12rem; line-height: 1.6; color: var(--crna); max-width: 62ch; }
.usluga-strana .naslov-usluge { font-size: 1.3rem; line-height: 1.3; margin: 30px 0 14px; }

/* Meni ima pet stavki. Na 1041–1200px ruski meni ne staje u red sa imenom i jezicima, pa se dugme
   menija pojavljuje ranije nego u ostalim verzijama — isti prelom stoji i u `skripta-spojeno.js`. */
@media (max-width: 1200px) {
  .js .meni-dugme { display: grid; }
  .js .meni {
    position: absolute; left: 0; right: 0; top: 72px; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--bela);
    border-bottom: 1px solid var(--linija); padding: 6px 40px 22px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .07);
  }
  .meni { flex-direction: column; align-items: stretch; gap: 0; }
  .meni > a { padding: 15px 0; border-bottom: 1px solid var(--linija); }
  html:not(.js) .zaglavlje-red { flex-wrap: wrap; min-height: 0; padding-bottom: 14px; }
  html:not(.js) .meni { width: 100%; }
  .js .jezici { padding-left: 0; border-left: none; padding-right: 22px; border-right: 1px solid var(--linija); }
}