/* ============================================================
   Advokatska kancelarija — DIZAJN 1 „Pečat"
   Nov dizajn od 8.9.2026. Prethodni („Bordo na papiru", krem #f8f3ea + bordo #7a1f2b)
   prodat je Ivani Nikolić i živi na advokativananikolic.rs — zamrznut je u
   `advokati-tpl/dizajn-1-prodat-ivana/` i više se ne nudi nikome. Ovo je DRUGA zamena
   ovog broja: prvi „Bordo na papiru" otišao je Nevenki Maksimović 7.8.2026.
   Paleta i tretman su namerno udaljeni od svih pet postojećih advokatskih dizajna:
      1 (stari) krem + bordo   2 boca-zelena + sijena   3 svetla siva + tirkiz
      4 sivi papir + škriljac  5 tamno mastilo + mesing
   pa ovaj uzima ono što nijedan nema: HLADNA svetla podloga + duboka ŠLJIVA, i jedini
   je sa punom tamnom trakom u herou i rimskim brojem sekcije u margini.
   MARKUP JE NEPROMENJEN u odnosu na prodati dizajn — namerno: 3.293 već generisana
   sajta se time menjaju zamenom samo ovog fajla i dve slike, bez pregenerisanja
   (a 1.497 advokatskih sajtova nema batch fajl pa se i ne mogu pregenerisati, gotcha #38).
   Zato numeracija sekcija ide CSS brojačem, ne novim elementom.
   ============================================================ */
:root {
  --ground:      #f2f3f6;   /* hladna svetla podloga — suprotno toploj krem podlozi prodatog */
  --ground-2:    #e9ebf0;
  --sheet:       #ffffff;
  --ink:         #191b21;
  --ink-soft:    #414753;
  --muted:       #6f7683;
  --plum:        #5b2545;   /* jedini akcenat */
  --plum-deep:   #431a33;
  --plum-mid:    #6d3053;
  --plum-soft:   #f0e8ee;
  --plum-line:   rgba(91, 37, 69, .22);
  --line:        #dfe2e8;
  --line-soft:   #ebedf1;
  --on-plum:     #f6eef2;
  --on-plum-dim: rgba(246, 238, 242, .72);
  --radius:      2px;       /* skoro pravi uglovi — dokument, ne aplikacija */
  --radius-lg:   4px;
  --serif: 'Iowan Old Style', Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --maxw:  1120px;
  --pad:   clamp(1.1rem, 4vw, 2.25rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--plum); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: -.012em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
[hidden] { display: none !important; }   /* mobilni meni ostaje zatvoren i bez JS-a */

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

/* ── ZAGLAVLJE ─────────────────────────────────────────────────────────────
   Belo, tanko, sa šljiva-linijom po dnu. Prodati dizajn je imao krem zaglavlje
   bez linije — ovo je prva razlika koju oko primeti. */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 var(--plum);
}
.header-inner { max-width: var(--maxw); margin: 0 auto; padding: .7rem var(--pad); display: flex; align-items: center; gap: 1.25rem; }
/* `min-width:0` je uslov da se brend uopšte SME skupiti: flex stavka podrazumevano ne ide
   ispod svog sadržaja, pa je dugačko ime kancelarije („Advokat Dragana Jovešković Petrović")
   guralo meni u premalo prostora i svaka stavka se lomila u dva reda (nađeno uživo 8.9.2026). */
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; min-width: 0; }
.brand-mark {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: var(--plum); color: var(--on-plum);
  font: 600 1.05rem/1 var(--serif); letter-spacing: .02em;
  border-radius: var(--radius);
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em;
               overflow-wrap: anywhere; }   /* dugačko ime se prelama, ne razvlači zaglavlje */
.brand-sub { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

.nav { margin-left: auto; display: flex; gap: .1rem; flex: none; }
.nav a {
  position: relative; padding: .45rem .5rem; text-decoration: none;
  color: var(--ink-soft); font-size: .86rem; font-weight: 500; border-radius: var(--radius);
  white-space: nowrap;   /* stavka menija se NIKAD ne lomi u dva reda */
}
.nav a::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .18rem; height: 1px;
  background: var(--plum); transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.nav a:hover { color: var(--plum); }
.nav a:hover::after { transform: scaleX(1); }
.site-header .nav a.active { color: var(--plum); text-underline-offset: 6px; }

.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-phone { display: inline-flex; align-items: center; gap: .4rem; color: var(--plum); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.header-phone a { color: inherit; text-decoration: none; }
.header-phone a:hover { text-decoration: underline; }
.hamburger {
  display: none; align-items: center; gap: .35rem; padding: .4rem .6rem;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  font: 600 .85rem var(--sans); cursor: pointer;
}
.hamburger-label { letter-spacing: .02em; }
.mobile-nav { display: none; flex-direction: column; padding: .4rem var(--pad) 1rem; background: var(--sheet); border-top: 1px solid var(--line); }
.mobile-nav a { padding: .7rem .2rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-soft); font-size: 1rem; }
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-phone { color: var(--plum) !important; font-weight: 700; }

/* ── HERO — puna šljiva traka ──────────────────────────────────────────────
   Najveća razlika u odnosu na prodati dizajn, koji je imao svetao hero na kremu.
   Tanka linija ispod naslova stoji umesto ukrasa: dokument, ne plakat. */
.hero { background: var(--plum); color: var(--on-plum); border-bottom: 4px solid var(--plum-deep); }
.hero-inner { padding: clamp(3.2rem, 9vw, 5.6rem) var(--pad) clamp(3rem, 8vw, 5rem); max-width: 62rem; }
.hero .eyebrow {
  margin: 0 0 1.1rem; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-plum-dim); display: flex; align-items: center; gap: .8rem;
}
.hero .eyebrow::after { content: ""; height: 1px; flex: 1; background: rgba(246, 238, 242, .28); max-width: 8rem; }
.hero h1 { font-size: clamp(2.05rem, 5.6vw, 3.5rem); letter-spacing: -.022em; }
.hero-lead {
  margin: 1.1rem 0 0; max-width: 44rem; font-size: clamp(1.02rem, 2vw, 1.16rem);
  line-height: 1.65; color: var(--on-plum-dim);
  padding-top: 1.1rem; border-top: 1px solid rgba(246, 238, 242, .2);
}
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .7rem; }

/* ── DUGMAD ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .78rem 1.5rem; border-radius: var(--radius); text-decoration: none;
  font: 600 .96rem var(--sans); letter-spacing: .01em; cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hero .btn-primary { background: var(--on-plum); color: var(--plum-deep); border-color: var(--on-plum); }
.hero .btn-primary:hover { background: #fff; }
.hero .btn-secondary { background: transparent; color: var(--on-plum); border-color: rgba(246, 238, 242, .45); }
.hero .btn-secondary:hover { border-color: var(--on-plum); background: rgba(246, 238, 242, .1); }
.btn-primary { background: var(--plum); color: var(--on-plum); border-color: var(--plum); }
.btn-primary:hover { background: var(--plum-deep); border-color: var(--plum-deep); }
.btn-secondary { background: transparent; color: var(--plum); border-color: var(--plum-line); }
.btn-secondary:hover { border-color: var(--plum); background: var(--plum-soft); }
.btn-block { width: 100%; }

/* ── FOTO-BAND ─────────────────────────────────────────────────────────── */
.foto-band { padding: 0; background: var(--ground); }
.foto-band .fb-in { padding-left: 0; padding-right: 0; max-width: none; }
.foto-band img { width: 100%; height: clamp(120px, 20vw, 210px); object-fit: cover; }

/* ── SEKCIJE — rimski broj u margini ───────────────────────────────────────
   Numeracija je stvarna struktura dokumenta (I–VI), ne ukras, i radi CSS brojačem
   pa ne traži nijedan nov element u markupu. */
.section { padding: clamp(3rem, 7vw, 4.6rem) 0; }
.section-alt { background: var(--ground-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); position: relative; }
.section-kicker {
  display: inline-block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem;
}
.section-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); }
.section-head h2::after {
  content: ""; display: block; width: 3.2rem; height: 2px; background: var(--plum); margin-top: .85rem;
}

/* ── O KANCELARIJI ─────────────────────────────────────────────────────── */
.about-inner { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.about-body { font-size: 1.04rem; color: var(--ink-soft); max-width: 44rem; }
.about-body p { margin-bottom: 1.05em; }
.about-note {
  margin-top: 1.4rem; padding-left: 1rem; border-left: 2px solid var(--plum);
  font-family: var(--serif); font-style: italic; color: var(--plum-deep); font-size: 1rem;
}

/* ── OBLASTI PRAVA — bez senki, samo linije ────────────────────────────── */
.areas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 1040px) { .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .areas-grid { grid-template-columns: 1fr; } }
.area-card {
  background: var(--sheet); padding: 1.5rem 1.4rem 1.6rem;
  display: flex; flex-direction: column; transition: background .15s ease;
}
.area-card:hover { background: var(--plum-soft); }
.area-icon {
  width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 1rem;
  color: var(--plum); border: 1px solid var(--plum-line); border-radius: var(--radius);
}
.area-icon svg { width: 19px; height: 19px; }
.area-card h3 { font-size: 1.06rem; min-height: 2.5em; display: flex; align-items: flex-start; }
.area-list { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); display: grid; gap: .45rem; }
.area-list li { position: relative; padding-left: 1rem; font-size: .93rem; color: var(--ink-soft); line-height: 1.5; }
.area-list li::before { content: "—"; position: absolute; left: 0; color: var(--plum); }

/* ── PRISTUP RADU ──────────────────────────────────────────────────────── */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.2rem, 3vw, 2.2rem); }
.value-item { display: flex; gap: .95rem; align-items: flex-start; }
.value-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--plum); }
.value-icon svg { width: 22px; height: 22px; }
.value-item h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.value-item p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* ── SARADNJA — brojevi kao u spisu ────────────────────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.step-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem 1.2rem 1.5rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.step-item:last-child { border-right: 0; }
.step-num {
  flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: var(--plum); color: var(--on-plum);
  font: 600 .95rem/1 var(--serif); border-radius: var(--radius);
}
.step-item h3 { font-size: 1rem; margin-bottom: .3rem; }
.step-item p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

/* ── ČESTA PITANJA ─────────────────────────────────────────────────────── */
.faq-list { max-width: 52rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); background: transparent; }
.faq-item summary {
  cursor: pointer; padding: 1.05rem .2rem 1.05rem 2rem; position: relative;
  font-family: var(--serif); font-size: 1.04rem; font-weight: 600; color: var(--ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+"; position: absolute; left: .3rem; top: 50%; transform: translateY(-50%);
  color: var(--plum); font: 400 1.25rem/1 var(--sans);
}
.faq-item[open] summary::before { content: "–"; }
.faq-item[open] summary { color: var(--plum-deep); }
.faq-item p { margin: 0 0 1.1rem; padding-left: 2rem; color: var(--ink-soft); font-size: .97rem; max-width: 46rem; }

/* ── KONTAKT ───────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1.5rem, 4vw, 2.8rem); align-items: start; }
.contact-list { display: grid; gap: 1.05rem; margin-bottom: 1.6rem; }
.contact-list li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--plum); }
.contact-ico svg { width: 19px; height: 19px; }
.contact-label { display: block; font-size: .71rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .12rem; }
.contact-list a { color: var(--ink); text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--plum); text-decoration: underline; }
.map-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--ground-2); }
.map-wrap iframe { display: block; width: 100%; height: 260px; border: 0; }
.map-link { display: inline-block; margin-top: .7rem; font-size: .9rem; color: var(--plum); text-decoration: none; border-bottom: 1px solid var(--plum-line); }
.map-link:hover { border-bottom-color: var(--plum); }

.contact-form-wrap { background: var(--sheet); border: 1px solid var(--line); border-top: 3px solid var(--plum); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.9rem); }
.contact-form-wrap h3 { font-size: 1.18rem; margin-bottom: 1.1rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; font-weight: 600; }
.field input, .field textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ground); color: var(--ink); font: 400 1rem var(--sans); resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--plum); background: var(--sheet); box-shadow: 0 0 0 3px var(--plum-soft); }
.form-success { margin: .9rem 0 0; padding: .75rem .9rem; background: var(--plum-soft); border-left: 2px solid var(--plum); color: var(--plum-deep); font-size: .93rem; }
.form-disclaimer { margin: .9rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.55; }

/* ── PODNOŽJE ──────────────────────────────────────────────────────────── */
.site-footer { background: var(--plum-deep); color: var(--on-plum-dim); padding: clamp(2rem, 5vw, 2.8rem) 0; }
.footer-inner { display: flex; flex-direction: column; gap: .4rem; }
.footer-line { color: var(--on-plum); font-size: .97rem; margin: 0; }
.footer-note { margin: 0; font-size: .9rem; }
.footer-copy { margin: .5rem 0 0; font-size: .84rem; color: rgba(246, 238, 242, .5); }

/* ── OTKRIVANJE PRI SKROLU ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
/* `.in` NIJE ukras nego zaštita od BELOG EKRANA: generator ubacuje kod koji tu klasu doda
   svim `.reveal` sekcijama na prvi klik na sidro. Ako IntersectionObserver ne opali (stariji
   ili strog pregledač, blokiran JS posle učitavanja), sekcije ostaju na opacity 0 i čovek
   vidi praznu stranu. Advokatski dizajn je jednom već bio bez ovoga — mrtva zakrpa na 3.290
   sajtova, nađena tek adversarijalnom proverom 13.8.2026. */
.reveal.is-visible, .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── MOBILNI ───────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .nav { display: none; }
  /* DUGME MENIJA OSTAJE VODORAVNO: znak pa rec „Meni" pored njega.
     9.9.2026. je probano uspravno slaganje (rec ispod znaka) — bilo je uze i ostavljalo
     vise mesta imenu kancelarije, ali je korisnik posle vidjenog presudio da ostane kako
     je bilo. Zapisano da se ne vrti u krug: to NIJE previd nego odluka. */
  .hamburger { display: inline-flex; }
  /* Bez ovoga dugme stoji odmah uz ime kancelarije, a ne uz desnu ivicu: na sirokom
     ekranu razmak pravi `.nav { margin-left:auto }`, koja je ovde sakrivena. */
  .header-actions { margin-left: auto; }
  .mobile-nav:not([hidden]) { display: flex; }
  .about-inner { grid-template-columns: 1fr; }
  .step-item { border-right: 0; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .header-phone { display: none; }   /* broj je u mobilnom meniju, zaglavlje ostaje u jednom redu */
  .brand-mark { width: 34px; height: 34px; font-size: .95rem; }
  .hero-actions .btn { width: 100%; }

  /* ZAGLAVLJE NA TELEFONU (mereno 8.9.2026 na 375px, dovrseno 9.9.2026)
     Zateceno stanje: 122px visine na ekranu od 812px — sesti deo ekrana, i to LEPLJIVO,
     dakle odneto na svakom skrolu. Uzrok su bila DVA prelamanja jedno ispod drugog: ime
     kancelarije u dva reda i ispod njega jos i podnaslov „ADVOKATSKA KANCELARIJA", kojem
     razmak izmedju slova (.16em) ne da da stane u red od 193px.
     Odluka korisnika: zaglavlje ostaje kakvo je bilo, samo bez podnaslova. Zato se ovde
     dira samo dvoje:
       • podnaslov se sklanja — hero odmah ispod pocinje istim recima („ADVOKATSKA
         KANCELARIJA · NOVI SAD"), pa je u zaglavlju bio cist duplikat;
       • ime dobija svoj prored (1.25) umesto telesnog (1.7) — 1.7 je razmak za pasus, a
         ovde su dva reda naslova, pa su bez toga razmaknuta kao dva odvojena podatka.
     Ime zadrzava punu velicinu i NE skracuje se sa tri tacke: sajt nosi ime te kancelarije
     i ono se mora videti celo (najduze u bazi ima 44 znaka i staje). */
  .brand-name { line-height: 1.25; }
  .brand-sub { display: none; }
}
@media print {
  .site-header, .hero-actions, .contact-form-wrap, .map-wrap, .foto-band { display: none; }
  body { background: #fff; font-size: 12pt; }
  .hero { background: #fff; color: #000; border: 0; }
  .hero-lead, .hero .eyebrow { color: #333; }
}

/* ═══ Fotografije kancelarije (8.10.2026, poslao advokat) — prirodne boje, uklopljene u dizajn ═══ */
#o-kancelariji .about-foto { margin: 0; }
#o-kancelariji .about-foto img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  #o-kancelariji .about-inner, #o-kancelariji .about-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr);
    grid-template-areas: "glava foto" "tekst foto";
    grid-template-rows: auto 1fr;   /* višak visine (uspravna fotografija) ide tekstu, ne razmaku ispod naslova */
    column-gap: clamp(2.2rem, 4.5vw, 4.2rem); row-gap: 0; align-items: start;
  }
  #o-kancelariji .section-head, #o-kancelariji .about-head { grid-area: glava; }
  #o-kancelariji .about-body { grid-area: tekst; }
  #o-kancelariji .about-foto { grid-area: foto; align-self: center; }
}
@media (max-width: 899.98px) { #o-kancelariji .about-foto { margin-top: 2rem; } }

/* vrh: on za stolom kao desna polovina ljubičastog vrha, sa prelazom iz ljubičaste */
.hero-foto { margin: 0; position: relative; overflow: hidden; }
.hero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); }
  .hero .hero-inner { grid-column: 1; grid-row: 1; width: auto; max-width: none; margin: 0;
    padding-left: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
    padding-right: clamp(1.5rem, 3.5vw, 3rem); }
  .hero-foto { grid-column: 2; grid-row: 1; }
  .hero-foto img { position: absolute; inset: 0; object-position: 50% 42%; }
  .hero-foto::after { background: linear-gradient(90deg, var(--plum) 0%, rgba(91, 37, 69, .55) 16%, rgba(91, 37, 69, 0) 46%); }
}
@media (max-width: 899.98px) {
  .hero-foto { height: clamp(250px, 66vw, 420px); }
  .hero-foto img { object-position: 50% 40%; }
  .hero-foto::after { background: linear-gradient(0deg, var(--plum) 0%, rgba(91, 37, 69, .4) 22%, rgba(91, 37, 69, 0) 52%); }
}
/* „О канцеларији": fotografija LEVO, tekst desno (9.10.2026, na zahtev). Vrh strane ima fotografiju DESNO, pa je ova,
   kad je desno, stajala odmah ispod nje — kolone su zamenjene. Na telefonu je redosled isti kao pre (tekst, pa slika). */
@media (min-width: 900px) {
  #o-kancelariji .about-inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); grid-template-areas: "foto glava" "foto tekst"; }
}
/* „О канцеларији": blok u šljiva-boji iza fotografije */
#o-kancelariji .about-foto { position: relative; padding: 0 18px 18px 0; }
#o-kancelariji .about-foto::before { content: ""; position: absolute; top: 18px; left: 18px; right: 0; bottom: 0; background: rgba(91, 37, 69, .14); border: 1px solid rgba(91, 37, 69, .28); }
#o-kancelariji .about-foto img { position: relative; border-radius: var(--radius); }
/* traka: prirodne boje, ivice blago utopljene u šljivu */
.foto-band { border-top: 3px solid var(--plum); border-bottom: 3px solid var(--plum); }
.foto-band .fb-in { position: relative; max-width: 1400px; margin: 0 auto; }
/* sto sa predmetima: ceo kadar do 1400 px (statua Pravde desno ne sme da bude odsečena) */
.foto-band img { height: auto; aspect-ratio: 2000 / 787; max-height: 480px; object-position: 50% 42%; }
@media (max-width: 899.98px) { .foto-band img { aspect-ratio: 16 / 10; max-height: none; object-position: 48% 64%; } }
.foto-band .fb-in::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(67, 26, 51, .3) 0%, rgba(67, 26, 51, 0) 10%, rgba(67, 26, 51, 0) 90%, rgba(67, 26, 51, .3) 100%); }

/* ═══ Reč advokata (9.10.2026) — njegov tekst, doslovno; dve kolone na širokom ekranu ═══ */
.rec { background: var(--plum-soft); border-top: 1px solid var(--plum-line); border-bottom: 1px solid var(--plum-line); }
.rec-tekst { font-family: var(--serif); font-size: 1.08rem; line-height: 1.75; color: var(--ink); }
.rec-tekst p { margin: 0 0 1em; orphans: 3; widows: 3; }
.rec-tekst p:first-child { font-size: 1.22rem; line-height: 1.6; color: var(--plum-deep); }
.rec-tekst p:first-child::first-letter { float: left; font-size: 3.3em; line-height: .82; padding: .08em .1em 0 0; color: var(--plum); }
.rec-potpis { margin: 1.4rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--plum-deep); text-align: right; }
.rec-potpis::before { content: ""; display: inline-block; width: 2.4rem; height: 1px; margin-right: .8rem; vertical-align: middle; background: var(--plum); }
/* engleski: početno slovo „I" je preusko za veliko početno slovo („I n my view") — običan tekst */
html[lang="en"] .rec-tekst p:first-child::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; }
@media (min-width: 1000px) {
  .rec-tekst { columns: 2; column-gap: clamp(2.5rem, 4.5vw, 4rem); column-rule: 1px solid var(--plum-line); }
}
/* Zaglavlje (9.10.2026): sa dugmetom za jezik ceo meni traži 1056 px, a kontejner ima 1048 — „Hitno"-greška
   kao kod Protektanimala. Izmereno: gušći razmaci → 1010 px; ispod 1140 px dugme sa menijem + broj (rezerva ≥ 40 px za šire sistemske fontove). */
@media (min-width: 1140px) {
  .header-inner { gap: 1rem; }
  .nav a { padding: .45rem .4rem; }
  .brand-name, .brand-sub { white-space: nowrap; }
}
@media (min-width: 1021px) and (max-width: 1139.98px) {
  .nav { display: none; }
  .hamburger { display: inline-flex; }
  .header-actions { margin-left: auto; }
  .mobile-nav:not([hidden]) { display: flex; }
}
/* izbor jezika (ćirilica / engleski) */
.lang-link { display: inline-flex; align-items: center; padding: .28rem .5rem; border: 1px solid var(--plum-line); border-radius: var(--radius); color: var(--plum); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-decoration: none; white-space: nowrap; }
.lang-link:hover { border-color: var(--plum); background: var(--plum-soft); }
@media (max-width: 520px) { .lang-link { display: none; } }   /* na telefonu je izbor jezika u meniju */

/* Ishod forme posle povratka sa posalji.php (9.10.2026): ?sent=1 uspeh · ?err=1 prazna polja · ?err=2 slanje nije uspelo */
.form-error { margin: .9rem 0 0; padding: .75rem .9rem; background: #fbeeee; border-left: 2px solid #a8322d; color: #5f1f1c; font-size: .93rem; }
.form-error p { margin: 0; }
.form-error a { color: inherit; font-weight: 600; white-space: nowrap; }

/* Potpis izrađivača — dodaje ga napravi-live.py (demo verzija ga nema). */
.footer-made { margin: .35rem 0 0; font-size: .79rem; color: rgba(246, 238, 242, .5); }
.footer-made a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-made a:hover { color: var(--on-plum); }