/* ============================================================
   Advokatska kancelarija — DIZAJN 5 „Papir i mesing"

   Paleta preuzeta sa redizajna radjenog za Kostu D. Lazica (verzija „Papir i
   mesing"), koji je on na kraju NIJE uzeo — izabrao je nov veliki sajt. Ta paleta
   sme dalje jer NIJE ničiji logotip nego nasa odluka: mesing na mastilu.

   Njegov SADRZAJ nije prenet i ne sme se preneti — pisan je za strane investitore
   i klijente sa ruskog govornog podrucja, u tri jezika. Ovde stoji nas standardni
   advokatski sadrzaj, isti kao u dizajnima 1-4, AKS-uskladjen.

   Vodi TAMNA podloga: dizajni 1, 3 i 4 su svetli, pa bi birac bez ovoga imao samo
   jednu tamnu sliсicu (dizajn 2). Fontovi su sistemski — izvorni vuce Golos Text
   sa Google-a, sto je za 3.277 sajtova spoljna zavisnost.
   ============================================================ */

:root{
  --mastilo:     #1b2230;   /* podloga */
  --mastilo-dub: #141a26;   /* zaglavlje, podnozje */
  --mastilo-viš: #242c3d;   /* izdignute povrsine */
  --mastilo-rub: rgba(241,236,227,.14);

  --mesing:      #a87a2e;
  --mesing-svet: #c99a4f;
  --mesing-bled: rgba(168,122,46,.15);

  --papir:       #f1ece3;   /* topao tekst na tamnom */
  --papir-tih:   rgba(241,236,227,.72);
  --papir-tiši:  rgba(241,236,227,.5);

  /* Naslovi kaligrafskim serifom (Palatino), telo grotesk — par koji nema nijedan
     drugi advokatski dizajn. */
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1140px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --r: 2px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); font-size:16.5px; line-height:1.7;
  color:var(--papir); background:var(--mastilo);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
[hidden]{ display:none !important; }   /* gotcha #37 */

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.18; letter-spacing:-.01em; text-wrap:balance; }
.eyebrow,.section-tag,.info-label,.hc-title,.hamburger-label,.btn,.nav,.card-num,.step-num,.brand-sub{ font-family:var(--sans); }

/* ---------- ZAGLAVLJE ---------- */
.site-header{ position:sticky; top:0; z-index:100; background:var(--mastilo-dub); border-bottom:1px solid var(--mesing-bled); }
.header-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding:.85rem var(--pad); display:flex; align-items:center; gap:1.25rem; flex-wrap:nowrap; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; min-width:0; }
.brand-text{ min-width:0; display:flex; flex-direction:column; line-height:1.26; }
.brand-name{ overflow-wrap:anywhere; font-family:var(--serif); font-size:1.08rem; }
.nav{ flex:0 0 auto; }
.brand-mark{
  flex:none; width:40px; height:40px; border-radius:var(--r);
  border:1px solid var(--mesing); color:var(--mesing-svet); background:transparent;
  display:grid; place-items:center; font-family:var(--serif); font-size:1rem;
}
.brand-sub{ color:var(--papir-tiši); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; }

.nav{ display:none; gap:1.35rem; }
.nav a{ color:var(--papir-tih); text-decoration:none; font-size:.82rem; letter-spacing:.01em; padding-block:.35rem; transition:color .18s; }
.nav a:hover, .nav a.active{ color:var(--mesing-svet); }
body .nav a.active{ text-decoration:none; }

.header-phone{
  display:none; align-items:center; gap:.45rem;
  color:var(--mesing-svet); background:transparent; border:1px solid var(--mesing);
  text-decoration:none; font-weight:600; font-size:.84rem; padding:.48rem .9rem; border-radius:var(--r);
  transition:background .18s, color .18s;
}
.header-phone:hover{ background:var(--mesing); color:var(--mastilo-dub); }

.hamburger{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; background:transparent; color:var(--papir); border:1px solid var(--mesing-bled); border-radius:var(--r); padding:.45rem .7rem; font-size:.8rem; font-weight:600; }
.mobile-nav{ background:var(--mastilo-dub); border-top:1px solid var(--mesing-bled); padding:.4rem var(--pad) 1rem; }
.mobile-nav a{ display:block; padding:.7rem 0; text-decoration:none; color:var(--papir-tih); font-size:.95rem; border-bottom:1px solid var(--mastilo-rub); }
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-phone{ color:var(--mesing-svet) !important; font-weight:600; }

@media (min-width:1040px){
  .nav{ display:flex; }
  .header-phone{ display:inline-flex; }
  .hamburger{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* ---------- HERO — centriran (13.10.2026) ----------
   Do 13.10. je vrh bio tekst levo + kartica kancelarije desno, isto kao dizajn 4 (i prodat
   dizajn 2) — vlasnik: „potrudi se da svih pet dizajna ne budu isti jedan kao drugi".
   Sada: pečat sa paragrafom, ime centrirano, osnovni podaci u vodoravnoj traci ispod. */
.hero{ padding-block:clamp(4rem,9vw,6.8rem) clamp(2.6rem,5vw,3.8rem); position:relative; overflow:hidden; text-align:center; }
/* mesingane vlasi — jedva vidljiv motiv, gase se prema sredini da ne seku ime */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(168,122,46,.08) 0 1px, transparent 1px 26px);
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 45%, transparent 35%, #000 85%);
          mask-image:radial-gradient(ellipse 60% 70% at 50% 45%, transparent 35%, #000 85%);
}
.hero-inner{ position:relative; z-index:1; display:grid; gap:clamp(2.6rem,5vw,3.6rem); justify-items:center; }
.hero-text{ max-width:48rem; display:flex; flex-direction:column; align-items:center; }
.hero-pecat{
  width:66px; height:66px; border-radius:50%; margin-bottom:1.7rem;
  display:grid; place-items:center; border:1px solid var(--mesing);
  font-family:var(--serif); font-size:1.75rem; color:var(--mesing-svet);
  box-shadow:0 0 0 6px var(--mastilo), 0 0 0 7px rgba(168,122,46,.35);
}
.eyebrow{ margin:0 0 1.2rem; display:flex; align-items:center; gap:.85rem; color:var(--mesing-svet); font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow::before, .eyebrow::after{ content:""; width:28px; height:1px; background:var(--mesing); opacity:.7; }
.hero h1{ font-size:clamp(2.3rem,6.6vw,4.3rem); }
.hero h1 span{ display:block; color:var(--mesing-svet); font-style:italic; }
.hero-lead{ margin:1.4rem auto 0; max-width:36rem; color:var(--papir-tih); font-size:clamp(1rem,2vw,1.15rem); }
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:2.1rem; }

.btn{ display:inline-block; text-decoration:none; cursor:pointer; font-size:.86rem; font-weight:600; padding:.85rem 1.5rem; border-radius:var(--r); border:1px solid transparent; transition:background .18s, color .18s, border-color .18s; }
.btn-primary{ background:var(--mesing); color:var(--mastilo-dub); }
.btn-primary:hover{ background:var(--mesing-svet); }
.btn-ghost{ background:transparent; color:var(--papir); border-color:var(--mastilo-rub); }
.btn-ghost:hover{ border-color:var(--mesing-svet); color:var(--mesing-svet); }
.btn-block{ display:block; width:100%; text-align:center; }

/* osnovni podaci: vodoravna traka između dve mesingane crte, ne kartica */
.hero-card{ width:100%; border-top:1px solid rgba(168,122,46,.4); border-bottom:1px solid rgba(168,122,46,.4); padding:1.5rem 0 1.3rem; }
.hc-title{ margin:0 0 1.1rem; color:var(--mesing-svet); font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.hc-list{ margin:0; display:grid; gap:1.1rem; }
.hc-list > div{ display:grid; gap:.2rem; min-width:0; }
.hc-list dt{ font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--papir-tiši); }
.hc-list dd{ margin:0; font-family:var(--serif); font-size:1.02rem; color:var(--papir); overflow-wrap:anywhere; }
.hc-list dd a{ text-decoration:none; border-bottom:1px solid rgba(201,154,79,.55); }
.hc-list dd a:hover{ color:var(--mesing-svet); }
.hc-note{ margin:1.2rem 0 0; font-family:var(--serif); font-style:italic; font-size:.87rem; color:var(--papir-tiši); }
@media (min-width:760px){
  .hc-list{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; }
  .hc-list > div{ padding:0 1.1rem; }
  .hc-list > div + div{ border-left:1px solid var(--mastilo-rub); }
}

/* ---------- SEKCIJE ---------- */
.section{ padding-block:clamp(3.4rem,7vw,5.4rem); }
.section:nth-of-type(even){ background:var(--mastilo-dub); }
.section-head{ margin-bottom:clamp(2rem,4vw,3rem); text-align:center; }
.section-tag{ display:inline-block; margin-bottom:.6rem; color:var(--mesing); font-size:.71rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.section h2{ font-size:clamp(1.7rem,3.6vw,2.45rem); }
.section-head h2::after, .about-head h2::after{ content:""; display:block; width:52px; height:1px; margin:1.05rem auto 0; background:var(--mesing); }

/* ---------- O KANCELARIJI — jedna centrirana kolona ---------- */
.about-grid{ display:grid; gap:1.6rem; max-width:44rem; margin-inline:auto; text-align:center; }
.about-head h2{ font-size:clamp(1.7rem,3.6vw,2.45rem); }
.about-body p{ margin:0 0 1.05rem; color:var(--papir-tih); }
.about-body .lede{ font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,2.6vw,1.6rem); color:var(--papir); line-height:1.45; margin-bottom:1.4rem; }
.about-body .note{ display:inline-block; margin-top:1.1rem; padding-top:1rem; border-top:1px solid rgba(168,122,46,.4); font-family:var(--serif); font-style:italic; color:var(--papir-tiši); font-size:.92rem; }

/* ---------- OBLASTI PRAVA — kao sadržaj knjige ----------
   Broj kurzivom, naslov, tačkasta linija do kraja reda, pod njim stavke u jednom redu.
   Mreža ćelija (do 13.10.) bila je ista kao u dizajnima 2 i 4. */
.practice-grid{ display:grid; gap:0 3.6rem; }
.practice-card{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr); column-gap:.4rem; align-items:baseline;
  padding:1.25rem 0 1.35rem; border-bottom:1px solid var(--mastilo-rub);
}
.card-num{ grid-row:1 / span 2; margin:0; color:var(--mesing-svet); font-family:var(--serif); font-style:italic; font-size:1.2rem; font-weight:400; letter-spacing:0; }
.practice-card h3{ display:flex; align-items:baseline; gap:.8rem; font-size:1.18rem; margin:0 0 .45rem; transition:color .18s; }
.practice-card h3::after{ content:""; flex:1 1 2rem; min-width:2rem; border-bottom:1px dotted rgba(201,154,79,.6); }
.practice-card:hover h3{ color:var(--mesing-svet); }
.area-list{ margin:0; padding:0; list-style:none; color:var(--papir-tiši); font-size:.9rem; line-height:1.6; }
.area-list li{ display:inline; }
.area-list li + li::before{ content:"·"; margin:0 .45rem; color:var(--mesing); }
@media (min-width:860px){ .practice-grid{ grid-template-columns:1fr 1fr; } }
/* na uskom ekranu naslov se prelama u dva reda, pa tačkasta linija ostaje gore desno — sklanja se */
@media (max-width:600px){ .practice-card h3::after{ display:none; } }

/* ---------- PRISTUP RADU — četiri stuba, centrirano, razdvojena uspravnim crtama ---------- */
.approach-grid{ display:grid; gap:2.2rem; }
.approach-item{ text-align:center; padding:0 .8rem; }
.approach-icon{ display:grid; place-items:center; width:54px; height:54px; margin:0 auto 1rem; border-radius:50%; border:1px solid var(--mesing); color:var(--mesing-svet); }
.approach-item h3{ font-size:1.12rem; margin-bottom:.5rem; }
.approach-item p{ margin:0 auto; max-width:17rem; color:var(--papir-tih); font-size:.92rem; }
@media (min-width:620px){ .approach-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){
  .approach-grid{ grid-template-columns:repeat(4,1fr); gap:0; }
  .approach-item{ padding:0 1.6rem; }
  .approach-item + .approach-item{ border-left:1px solid var(--mesing-bled); }
}

/* ---------- SARADNJA — rimski brojevi kurzivom ---------- */
.steps-grid{ display:grid; gap:1.9rem; }
.step-item{ display:grid; grid-template-columns:3.6rem 1fr; gap:.9rem; align-items:start; }
.step-num{ display:block; color:var(--mesing-svet); font-family:var(--serif); font-style:italic; font-size:2.3rem; line-height:1; }
.step-item h3{ font-size:1.08rem; margin:.25rem 0 .4rem; }
.step-item p{ margin:0; color:var(--papir-tih); font-size:.92rem; }
@media (min-width:1000px){
  .steps-grid{ grid-template-columns:repeat(4,1fr); gap:0; }
  .step-item{ grid-template-columns:1fr; text-align:center; padding:0 1.5rem; gap:.6rem; }
  .step-item + .step-item{ border-left:1px solid var(--mesing-bled); }
  .step-num{ font-size:2.8rem; }
}

/* ---------- PITANJA — naslov levo, pitanja desno ---------- */
.faq-list{ display:grid; gap:0; border-top:1px solid var(--mastilo-rub); }
.faq-item{ border-bottom:1px solid var(--mastilo-rub); }
.faq-item summary{ list-style:none; cursor:pointer; padding:1.15rem 2.5rem 1.15rem 0; position:relative; font-family:var(--serif); font-size:1.06rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:""; position:absolute; right:.4rem; top:1.5rem; width:9px; height:9px; border-right:1.5px solid var(--mesing); border-bottom:1.5px solid var(--mesing); transform:rotate(45deg); transition:transform .2s; }
.faq-item[open] summary::after{ transform:rotate(-135deg); top:1.75rem; }
.faq-item p{ margin:0 0 1.3rem; padding-right:2.5rem; color:var(--papir-tih); font-size:.93rem; }
@media (min-width:900px){
  .faq-grid{ display:grid; grid-template-columns:minmax(0,16rem) minmax(0,1fr); gap:3.6rem; align-items:start; }
  .faq-grid .section-head{ text-align:left; position:sticky; top:100px; margin-bottom:0; }
  .faq-grid .section-head h2::after{ margin-left:0; }
}

/* ---------- KONTAKT ---------- */
.contact-grid{ display:grid; gap:clamp(2rem,4vw,3rem); }
/* podaci kao vizit-karta: dvostruki mesingani okvir (13.10.2026) */
.contact-info{ border:1px solid rgba(168,122,46,.45); outline:1px solid rgba(168,122,46,.2); outline-offset:-8px; padding:1.9rem 1.7rem 1.7rem; }
.info-list{ margin:0 0 1.6rem; padding:0; list-style:none; display:grid; gap:1.05rem; }
.info-list li{ display:grid; gap:.18rem; padding-bottom:1.05rem; border-bottom:1px solid var(--mastilo-rub); }
.info-list li:last-child{ border-bottom:none; padding-bottom:0; }
.info-label{ font-size:.71rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--papir-tiši); }
.info-value{ font-size:1rem; color:var(--papir); }
.info-value a{ text-decoration:none; border-bottom:1px solid var(--mesing); }
.info-value a:hover{ color:var(--mesing-svet); }

.map-wrap{ border:1px solid var(--mastilo-rub); border-radius:var(--r); overflow:hidden; background:var(--mastilo-viš); aspect-ratio:16/10; }
.map-wrap iframe{ display:block; width:100%; height:100%; border:0; }
.map-link{ display:inline-block; margin-top:.85rem; font-size:.82rem; font-weight:600; color:var(--mesing-svet); text-decoration:none; border-bottom:1px solid currentColor; }

.contact-form-wrap{ background:var(--mastilo-viš); border:1px solid var(--mastilo-rub); border-top:3px solid var(--mesing); border-radius:var(--r); padding:1.8rem 1.6rem; }
.contact-form-wrap h3{ font-size:1.16rem; margin-bottom:1.3rem; }
.field{ margin-bottom:1.05rem; }
.field label{ display:block; margin-bottom:.34rem; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--papir-tiši); }
.field input, .field textarea{
  width:100%; padding:.74rem .85rem; font-family:var(--sans); font-size:.95rem; color:var(--papir);
  background:var(--mastilo-dub); border:1px solid var(--mastilo-rub); border-radius:var(--r);
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--mesing); box-shadow:0 0 0 3px rgba(168,122,46,.18); }
.field textarea{ resize:vertical; min-height:6.4rem; }
.form-status{ margin:.9rem 0 0; font-size:.89rem; font-weight:600; color:var(--mesing-svet); opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s; }
.form-status.is-visible{ opacity:1; transform:none; }
/* Ishod posle povratka sa posalji.php: ?err=1 prazna polja · ?err=2 slanje nije uspelo (gotcha #122).
   Forma stoji na tamnoj podlozi, pa je i greška svetao tekst na prigušenoj crvenoj. */
.form-error{ margin:.9rem 0 0; padding:.7rem .85rem; background:rgba(226,112,98,.12); border-left:2px solid #e07062; color:#f4d4cf; font-size:.89rem; }
.form-error p{ margin:0; }
.form-error a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.form-error a[href^="tel:"]{ white-space:nowrap; }
.form-disclaimer{ margin:1.05rem 0 0; padding-top:1rem; border-top:1px solid var(--mastilo-rub); font-family:var(--serif); font-size:.81rem; font-style:italic; color:var(--papir-tiši); line-height:1.6; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr minmax(0,25rem); align-items:start; } }

/* ---------- PODNOŽJE ---------- */
.site-footer{ background:var(--mastilo-dub); border-top:1px solid var(--mesing-bled); padding-block:2.8rem 2.2rem; color:var(--papir-tih); }
.footer-inner{ display:grid; gap:.7rem; }
.footer-brand{ display:flex; align-items:center; gap:.65rem; margin-bottom:.35rem; }
.footer-name{ font-family:var(--serif); color:var(--papir); font-size:1.05rem; }
.footer-line{ margin:0; font-size:.87rem; }
.footer-note{ margin:0; font-family:var(--serif); font-style:italic; font-size:.85rem; color:var(--papir-tiši); }
.footer-copy{ margin:.9rem 0 0; padding-top:1rem; border-top:1px solid var(--mastilo-rub); font-size:.79rem; color:var(--papir-tiši); }
.ax-credit{ margin:.45rem 0 0; font-size:.79rem; color:var(--papir-tiši); }
.ax-credit a{ color:var(--papir-tih); }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
/* `.in` — zastita od BELOG EKRANA, vidi isti komentar u ostalim dizajnima */
.reveal.is-visible, .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--mesing); outline-offset:2px;
}
section[id]{ scroll-margin-top:80px; }
body #toTop{ background:var(--mesing); color:var(--mastilo-dub); }


/* ── Zaglavlje na telefonu: JEDAN red (3.9.2026), ime se NE skraćuje (25.9.2026) ──
   Dug naziv firme je brend gurao u dva reda, pa je dugme menija padalo ispod
   (isti kvar nadjen i na knjigovodstvenim d2/d3). 3.9. je to reseno skracivanjem
   sa tri tacke — ali ime klijenta se nikad ne skracuje (gotcha #98; pregled 25.9.
   je nasao „Advokat Ime Pre…"). Ime se sada prelama, a podnaslov se sklanja, kao
   u dizajnu 1: hero odmah ispod pocinje istim recima. */
@media (max-width:700px){
  .header-inner{ flex-wrap:nowrap; }
  .brand{ min-width:0; }
  .brand-text{ min-width:0; }
  .brand-text>.brand-sub{ display:none; }
  .brand-text>.brand-name{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.18; font-size:.95rem; }
}

/* Potpis izrađivača — dodaje ga napravi-live.py (demo verzija ga nema). Boje futera dizajna 5. */
.footer-made{ margin:.35rem 0 0; font-size:.79rem; color:var(--papir-tiši); }
.footer-made a{ color:var(--papir-tih); text-decoration:underline; text-underline-offset:2px; }
.footer-made a:hover{ color:var(--mesing-svet); }