/* Ordinacija dentalne medicine Dr Isailović — izgled sajta.
   Bez ijednog poziva ka internetu: fontovi su sistemski, slike su naše. */

/* ⚠ Paleta je IZMERENA iz znaka ordinacije (zub u štitu, sa zida), a ne
   izabrana po oku: teget #003078, plava #004890, tirkiz #78d8f0, koral
   #f0a890. Do 17.9.2026. je sajt vozio mint zeleno-plavu koja sa tim znakom
   nema veze, pa je izgledao kao šablon u koji je upisano tuđe ime. */
:root{
  --tamna:#0b2f57;           /* teget iz znaka */
  --tamnija:#071f3b;
  --mint:#2f93bd;            /* ukrasi i linije */
  --mint-tekst:#1c6e93;      /* sitan tekst na belom */
  --mint-svetla:#e8f4fa;
  --koral:#e0765c;           /* akcenat iz iglica u znaku */
  --koral-tamni:#b9553d;     /* isti ton, ali dovoljno taman za tekst */
  --koral-najtamniji:#a94a33;/* za prelaz mišem preko dugmeta */
  --zlatna-citljiva:#9c6a00; /* zvezdice: svetlo zlato je na belom 2.22:1 */
  --krem:#f6f9fb;
  --papir:#ffffff;
  --tekst:#14222e;
  --prigusen:#4d6475;
  --ivica:#dbe6ee;
  --zlatna:#a8803c;
  --meko:0 1px 2px rgba(11,47,87,.05), 0 10px 30px rgba(11,47,87,.08);
  --sirina:1120px;
  --naslovni:Georgia, "Times New Roman", "Liberation Serif", serif;
  --tekstualni:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* ⚠ Podloga nije ravna bela. Dva vrlo blaga preliva u bojama ZNAKA (tirkiz i
   koral, ispod 10% jačine) daju strani dubinu a da se ne primete kao ukras —
   sajt bez toga izgleda ispravno ali prazno. Ne koristi se slika: tekstura od
   slike bi se videla iza teksta i pojela kontrast. */
body{
  margin:0; color:var(--tekst);
  background-color:var(--krem);
  /* ⚠ Prva vrednost (.13/.07/.07) bila je toliko blaga da je korisnik nije
     ni video — a ukras koji se ne vidi je samo utrošen bajt. Pojačano oko
     dva i po puta; iznad ovoga preliv počinje da se bori sa fotografijama. */
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(47,147,189,.34), transparent 64%),
    radial-gradient(820px 520px at -8% 26%, rgba(224,118,92,.18), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(11,47,87,.16), transparent 62%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  font:17px/1.65 var(--tekstualni);
  -webkit-text-size-adjust:100%;
}
/* Bele sekcije ostaju bele, ali ne potpuno zaravnjene — tanka linija u boji
   znaka na vrhu odvaja ih od podloge. */
section.papir{position:relative}
/* ⚠ Bila je nakratko 3 px u punim bojama znaka — prejako, linija je počela da
   vuče pogled na sebe umesto da samo odvoji sekciju. Vraćena na tanku i tihu,
   kako je i bila; prelivi u podlozi ostaju pojačani, oni rade drugi posao. */
section.papir::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent,
    rgba(47,147,189,.35) 22%, rgba(224,118,92,.30) 78%, transparent);
}

img{max-width:100%; height:auto}

/* ⚠ Bez ovoga se naslov lomi gde stigne, pa se IME ORDINACIJE cepa na
   „Ordinacija dentalne / medicine Dr Isailović". `balance` izjednačava redove,
   `pretty` sprečava da poslednji red pasusa ostane jedna reč. */
h1,h2,h3{font-family:var(--naslovni); font-weight:400; line-height:1.2; margin:0;
  text-wrap:balance}
p, li{text-wrap:pretty}
h1{font-size:clamp(30px, 5.2vw, 50px); letter-spacing:-.01em}
h2{font-size:clamp(24px, 3.4vw, 34px)}
h3{font-size:20px}
p{margin:0 0 14px}
a{color:var(--tamna)}

.omot{width:100%; max-width:var(--sirina); margin:0 auto; padding-inline:20px}

/* --------------------------------------------------------- zaglavlje */

.vrh{
  position:sticky; top:0; z-index:40;
  background:rgba(251,248,243,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ivica);
}
.vrh .omot{display:flex; align-items:center; gap:18px; padding-block:12px}
/* ⚠ Znak je bio visok 42 px (iscrtan 33×42) i uz ime u dva reda je delovao
   kao sitan crtež, a ne kao logotip ordinacije. Sada je krupniji, a ime i
   grad stoje kao JEDAN blok poravnat po njegovoj sredini. */
.znak{display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit}
.znak .zub{flex:0 0 auto; width:auto; height:72px}
.znak .ime{font-family:var(--naslovni); font-size:25px; line-height:1.05;
  letter-spacing:-.01em; display:block}
.znak .pod{font-size:11.5px; color:var(--mint-tekst); letter-spacing:.18em;
  text-transform:uppercase; display:block; margin-top:4px}
/* ⚠ JEDAN blok za telefon, ne dva. Kratko su stajala dva `max-width:560px`
   pravila za isti znak (54 px u prvom, 34 px u drugom) — pobeđivalo je ono
   koje stoji niže, pa je uvećanje znaka na telefonu tiho nestalo.
   Na 412 px se uz to ime ordinacije lomilo u dva reda, a meni se stiskao uz
   ivicu: zato ime ostaje u jednom redu, a meni pada u svoj. */
@media (max-width:560px){
  .vrh .omot{flex-wrap:wrap; gap:10px 12px; padding-block:10px}
  .znak .zub{height:54px}
  .znak .ime{font-size:21px; white-space:nowrap}
  .znak .pod{font-size:11px}
  .meni{width:100%; margin-left:0; justify-content:space-between; gap:4px}
  .meni a{font-size:15px}
}

.meni{display:flex; gap:6px; margin-left:auto; align-items:center; flex-wrap:wrap}
.meni a{
  text-decoration:none; color:var(--tekst); font-size:15px; font-weight:600;
  padding:9px 13px; border-radius:9px;
}
.meni a:hover{background:var(--mint-svetla)}
.meni a[aria-current="page"]{background:var(--mint-svetla); color:var(--tamna)}
/* Dugme u meniju: `.meni a` ima vecu tezinu od `.dugme`, pa bi mu prepisalo
   boju u tamno na tamnom (mereno 1.35:1, zamka 68). Pojavi se tek kad postoji
   broj telefona, zato ga ranija provera nije ni videla. */
.meni a.dugme{color:#fff; background:var(--tamna); padding:10px 16px}
.meni a.dugme:hover{background:var(--tamnija)}

.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--tamna); color:#fff; text-decoration:none; font-weight:650;
  padding:13px 22px; border-radius:10px; border:1px solid var(--tamna);
  font-size:16px; min-height:48px;
}
.dugme:hover{background:var(--tamnija)}
.dugme.obrnuto{background:transparent; color:var(--tamna)}
.dugme.obrnuto:hover{background:var(--mint-svetla)}
.dugme.svetlo{background:#fff; color:var(--tamna); border-color:#fff}
/* Glavni poziv na radnju uzima koral iz znaka — jedina topla boja na strani,
   pa se vidi i kad je oko naviklo na plavo. */
/* ⚠ Podloga je NAMERNO --koral-tamni, ne --koral. Sa svetlijim koralom je
   beo tekst na 3.04:1, a traži se 4.5:1 — izmereno u pregledaču, ne
   računato iz koda (zamka 68). Ton je isti, samo dovoljno taman da se
   tekst na njemu STVARNO vidi. */
.dugme.poziv{background:var(--koral-tamni); border-color:var(--koral-tamni); color:#fff}
.dugme.poziv:hover{background:var(--koral-najtamniji); border-color:var(--koral-najtamniji)}

/* Kartica usluge bez fotografije: četiri makro snimka na naslovnoj strani
   laiku ne znače ništa i izgledaju kao popunjavanje (zamerka korisnika,
   17.9.2026). Ostaje tipografija i tanka linija u boji znaka. */
.kartica.usluga{border-top:3px solid var(--mint)}
.kartica.usluga .telo{padding:24px 24px 26px}

/* -------------------------------------------------------------- hero */

/* ⚠ Hero je do 17.9.2026. bio mreža `1fr minmax(260px,480px)`, pa je
   fotografija ispadala „ni pola ni puna širina", tekst se lomio u uskoj
   koloni, a dugmad su stajala nalepljena na sliku. Sada fotografija ide
   preko CELE širine kao podloga, tekst stoji u svojoj čitljivoj traci, a
   dugmad u svom redu ispod nje. */
.hero{
  position:relative; isolation:isolate; color:#fff;
  background:var(--tamna);
  padding-block:clamp(64px, 11vw, 132px);
}
.hero .slika-pozadina{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:72% 42%; z-index:-2;
}
/* ⚠ Preklop je prvo bio 0.94 → 0.42 i fotografija se praktično izgubila:
   ostala je tamna traka na kojoj se ne vidi ni pacijentkinja ni prostor.
   Sada je gust samo tamo gde stoji tekst, a desna trećina ostaje slika. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    rgba(7,31,59,.92) 0%, rgba(7,31,59,.78) 38%,
    rgba(11,47,87,.34) 66%, rgba(11,47,87,.12) 100%);
}
/* Na telefonu tekst stoji PREKO slike po celoj širini, pa preklop mora da
   bude gušći — ali ne toliko da fotografija nestane. Gornja trećina ostaje
   providnija, tu se vidi ordinacija; tekst počinje ispod nje. */
@media (max-width:760px){
  .hero{padding-block:clamp(48px, 8vw, 72px) clamp(40px, 7vw, 64px)}
  .hero::after{background:linear-gradient(180deg,
    rgba(7,31,59,.34) 0%, rgba(7,31,59,.72) 30%, rgba(11,47,87,.90) 62%)}
  .hero .slika-pozadina{object-position:68% 26%}
  .hero .hero-tekst{padding-top:clamp(70px, 26vw, 140px)}
}
.hero .hero-tekst{max-width:34rem}
.hero h1{color:#fff; max-width:18ch}
.hero .nad{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:#9fd2e0; margin:0 0 14px;
}
.hero p.vodeci{font-size:clamp(17px,2.1vw,20px); color:#dbe9f2; max-width:44ch; margin:18px 0 28px}
.hero .akcije{display:flex; gap:12px; flex-wrap:wrap}

/* ---------------------------------------------------- traka poverenja */
/* Ono zbog čega pacijent ostaje na strani: ocena sa tuđeg mesta, zvanje i
   dostupnost. Stoji odmah ispod heroja, jer se dole ne skroluje uvek. */
/* ⚠ Prvo je stajala kao tamna traka na tamnom heroju i praktično se nije
   videla. Sada je svetla i sa svojom ivicom — to je red zbog kog pacijent
   ostaje na strani, ne ukras. */
.poverenje{background:var(--papir); color:var(--tekst); padding-block:0;
  border-bottom:1px solid var(--ivica)}
/* ⚠ Centrirano, a ne razvučeno po celoj širini: tri stavke nose ~700 px
   teksta u traci od 1120, pa bi `space-between` ostavio praznine od po
   ~200 px i izgledalo bi kao da je nešto ispalo između njih. */
.poverenje .omot{display:flex; flex-wrap:wrap; gap:12px 28px;
  align-items:center; justify-content:center; padding-block:18px}
@media (max-width:640px){
  .poverenje .omot{justify-content:flex-start; gap:8px 20px}
}
.poverenje .stavka{display:flex; align-items:center; gap:9px; font-size:16px;
  color:var(--prigusen)}
/* Ocena je link ka recenzijama na Google mapi — i mora da IZGLEDA kao link,
   inače niko ne pomisli da se klikne. */
.poverenje a.ocena{
  text-decoration:none; border-radius:9px; padding:5px 10px; margin:-5px -4px;
  transition:background-color .15s ease;
}
.poverenje a.ocena:hover{background:var(--mint-svetla)}
.poverenje a.ocena b{text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(28,110,147,.45)}
@media (prefers-reduced-motion: reduce){ .poverenje a.ocena{transition:none} }
.poverenje b{color:var(--tekst); font-weight:700}
.poverenje .zvezde{color:var(--zlatna-citljiva); letter-spacing:.06em; font-size:17px}
.poverenje a{color:var(--mint-tekst)}
.poverenje .tacka{width:5px; height:5px; border-radius:50%;
  background:var(--koral); flex:0 0 auto}

/* „Sada otvoreno / zatvoreno" — jedini natpis na strani koji se menja sam,
   pa ima svoju tačku u boji stanja. */
.poverenje .sada{font-weight:650}
.poverenje .sada::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--prigusen);
}
.poverenje .sada[data-stanje="otvoreno"]{color:#1c7a46}
.poverenje .sada[data-stanje="otvoreno"]::before{background:#1f9d55}
.poverenje .sada[data-stanje="dezurstvo"]{color:var(--koral-tamni)}
.poverenje .sada[data-stanje="dezurstvo"]::before{background:var(--koral)}
.poverenje .sada[data-stanje="zatvoreno"]{color:var(--prigusen)}

/* ------------------------------------------------------------ dezurstvo */

.nad-dezurstvo{
  margin:18px 0 6px; font-size:13px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--koral-tamni);
}
.dno .nad-dezurstvo{color:#f0a88f}
.radno.dezurstvo li{font-size:15px}

/* ---------------------------------------------------------------- mapa */

.mapa-okvir{
  margin-top:26px; border-radius:16px; overflow:hidden;
  border:1px solid var(--ivica); box-shadow:var(--meko); background:var(--papir);
}
.mapa-okvir iframe{display:block; width:100%; height:400px; border:0}
@media (max-width:640px){ .mapa-okvir iframe{height:300px} }
.ispod-mape{margin-top:16px}

/* ------------------------------------------------- vodeni žig sa znakom */
/* Znak ordinacije, jedva vidljiv, iza odeljka sa recenzijama. Cilj je da
   strana ima potpis — ne da se ukras primeti. Ide iza sadrzaja (`z-index:0`
   na omotu) i ISKLJUCUJE se na telefonu, gde bi pao tacno iza teksta. */
.sa-zigom{position:relative; overflow:hidden}
.sa-zigom::after{
  content:""; position:absolute; right:-40px; top:50%; translate:0 -50%;
  width:380px; height:480px; opacity:.085; pointer-events:none;
  background:url(slike/znak.png) right center / contain no-repeat;
}
.sa-zigom > .omot{position:relative; z-index:1}
@media (max-width:900px){ .sa-zigom::after{display:none} }

/* ------------------------------------------------------------ recenzije */

.recenzije{display:grid; gap:20px; grid-template-columns:1fr}
@media (min-width:820px){ .recenzije{grid-template-columns:repeat(3, 1fr)} }
.recenzija{
  background:var(--papir); border:1px solid var(--ivica); border-radius:16px;
  padding:22px 24px 24px; box-shadow:var(--meko);
  display:flex; flex-direction:column; gap:12px;
}
.recenzija .zvezde{color:var(--zlatna-citljiva); letter-spacing:.1em; font-size:15px}
.recenzija blockquote{margin:0; font-size:16px; color:var(--tekst)}
.recenzija .potpis{margin-top:auto; font-size:14px; color:var(--prigusen)}
.recenzija .potpis b{color:var(--tekst); font-weight:650}
.izvor-recenzija{margin-top:22px; font-size:14px; color:var(--prigusen);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* ------------------------------------------------- poziv na radove */

/* ⚠ `1fr` je `minmax(auto, 1fr)`, a `auto` ne sme ispod min-content stavke —
   pa je fotografija od 1400 px razvlačila ceo blok i strana se prelivala na
   412 px (uhvatila kapija, ne oko). Zato svuda `minmax(0, …)`. */
.radovi-poziv{
  display:grid; gap:0; grid-template-columns:minmax(0,1fr); overflow:hidden;
  border-radius:18px; border:1px solid var(--ivica); background:var(--papir);
  box-shadow:var(--meko);
}
@media (min-width:820px){
  .radovi-poziv{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
.radovi-poziv img{display:block; width:100%; height:100%; min-height:260px;
  object-fit:cover}
.radovi-poziv .telo{padding:clamp(26px,4vw,40px); align-self:center}
.radovi-poziv .telo p{color:var(--prigusen)}

/* ------------------------------------------------------------ odeljci */

section{padding-block:clamp(44px, 7vw, 80px)}
section.papir{background:var(--papir)}
.zaglavlje-odeljka{max-width:62ch; margin-bottom:34px}
/* Jedno pravilo za sve natpise iznad naslova. Kad je boja ukucana u
   inline stilu, popravka kontrasta je promasi i nalaz se vrati. */
.nad{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mint-tekst); font-weight:700; margin:0 0 10px;
}
.zaglavlje-odeljka .nad{margin:0 0 10px}
.zaglavlje-odeljka p{color:var(--prigusen); margin-top:12px}

.mreza{display:grid; gap:22px}
.mreza.dve{grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}
/* Cetiri kartice u mrezi od tri stupca ostave jednu samu i to izgleda kao
   greska. Dva po redu su namera koja se vidi. */
.mreza.dva-po-redu{grid-template-columns:1fr}
@media (min-width:760px){ .mreza.dva-po-redu{grid-template-columns:repeat(2, 1fr)} }
.mreza.tri{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}

.kartica{
  background:var(--papir); border:1px solid var(--ivica); border-radius:16px;
  overflow:hidden; box-shadow:var(--meko); display:flex; flex-direction:column;
}
.kartica .slika{
  display:block; width:100%; height:190px; object-fit:cover;
  background:var(--mint-svetla);
}
.kartica .telo{padding:20px 22px 24px}
.kartica .nad{font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mint-tekst); font-weight:700; margin-bottom:6px}
.kartica p{color:var(--prigusen); margin:10px 0 0; font-size:16px}

/* ---------------------------------------------------------- o doktoru */

.doktor{display:grid; gap:34px; grid-template-columns:minmax(240px, 340px) 1fr;
  align-items:start}
@media (max-width:780px){ .doktor{grid-template-columns:1fr} }
.doktor .portret{
  width:100%; aspect-ratio:4/5; border-radius:16px; object-fit:cover;
  background:var(--mint-svetla); border:1px solid var(--ivica);
}
.doktor .nema-slike{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px; color:var(--prigusen); font-size:15px;
}
.doktor .zvanje{color:var(--mint-tekst); font-weight:700; font-size:15px;
  letter-spacing:.04em; margin:6px 0 16px}

/* --------------------------------------------------------- ordinacija */

.ordinacija{display:grid; gap:34px; grid-template-columns:1fr minmax(260px, 480px);
  align-items:center}
@media (max-width:780px){ .ordinacija{grid-template-columns:1fr} }
/* ⚠ Ranije je ovde stajalo `aspect-ratio:3/2; object-fit:cover`. Slika
   pregleda je 16:9, pa je cover odsecao desnu trecinu — a tamo je bas
   pacijentkinja, zbog koje ta slika i stoji na sajtu. Sada se postuje
   prirodan odnos slike, koji generator ionako upisuje u width/height. */
.ordinacija .slika{
  display:block; width:100%; height:auto;
  border-radius:16px; border:1px solid var(--ivica); background:var(--mint-svetla);
}

/* ------------------------------------------------------------- radovi */

.par{
  background:var(--papir); border:1px solid var(--ivica); border-radius:16px;
  box-shadow:var(--meko); overflow:hidden; margin-bottom:26px;
}
.par .glava{padding:20px 22px 0}
.par .glava p{color:var(--prigusen); font-size:16px; margin-top:8px}
/* Flex sa align-items: flex-start, ne mreza sa jednakim stupcima. U mrezi
   svaki stubac ima istu sirinu, pa se siroka slika stisne a uspravna razvuce.
   Ovako svaka figura bude tacno onoliko siroka koliko joj slika trazi. */
.par .slike{display:flex; flex-wrap:wrap; gap:18px;
  align-items:flex-start; justify-content:center; padding:20px 22px 22px}
.par figure{margin:0; flex:0 1 auto; min-width:0; max-width:100%}
/* Fotografije su razlicitog oblika: neke uspravne, neke polozene. Ako se
   razvuku na punu sirinu okvira, uspravna slika ostane u sredini sive trake.
   Zato visina odredjuje meru, a sirina se prilagodjava. */
.par figure img{
  display:block; height:340px; width:auto; max-width:100%;
  object-fit:contain;                /* kad max-width stegne, odnos ostaje */
  margin-inline:auto; border-radius:11px; border:1px solid var(--ivica);
}
@media (max-width:520px){
  .par figure img{height:260px}
  /* Polozena slika bi na 260 px visine bila stisnuta po sirini i dobila
     bele trake gore i dole. Na telefonu ide preko cele sirine. */
  .par figure img.siroka{height:auto; width:100%}
  .par figure:has(img.siroka){flex-basis:100%}
}
.par figcaption{
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--prigusen); margin-top:9px; text-align:center;
}
.par figcaption.posle{color:var(--mint-tekst)}
/* Rad u cetiri koraka: flex bi prelomio tri pa jednu. Mreza drzi dva po
   redu na telefonu i sva cetiri u redu na sirem ekranu; visinu odredjuje
   sama slika, pa se odnos strana ne kvari (zamka 37). */
.par .slike.cetiri{display:grid; grid-template-columns:repeat(2, 1fr); align-items:start}
@media (min-width:760px){ .par .slike.cetiri{grid-template-columns:repeat(4, 1fr)} }
.par .slike.cetiri figure img{width:100%; height:auto}
/* Razmak izmedju naslova i teksta u odeljku o ordinaciji. */
.ordinacija h2{margin-bottom:14px}

.pojedinacni{display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))}
.pojedinacni figure{margin:0; background:var(--papir); border:1px solid var(--ivica);
  border-radius:14px; overflow:hidden; box-shadow:var(--meko)}
.pojedinacni img{display:block; width:100%; height:220px; object-fit:cover;
  background:#f1f5f6}
.pojedinacni figcaption{padding:12px 14px 16px; font-size:14px; color:var(--prigusen)}

.napomena{
  background:var(--mint-svetla); border:1px solid #bcdae2; color:var(--tamna);
  border-radius:14px; padding:16px 18px; margin-bottom:28px; font-size:16px;
}

/* ------------------------------------------------------------ kontakt */

.podaci{list-style:none; margin:0; padding:0}
.podaci li{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--ivica)}
.podaci li:first-child{border-top:0}
.podaci .oznaka{flex:0 0 132px; color:var(--prigusen); font-size:15px}
.podaci .vrednost{font-weight:600}
.podaci a{color:var(--tamna)}

.radno{list-style:none; margin:0; padding:0}
.radno li{display:flex; justify-content:space-between; gap:14px;
  padding:11px 0; border-top:1px solid var(--ivica)}
.radno li:first-child{border-top:0}
.radno .dan{color:var(--prigusen)}
.radno .sati{font-weight:600}

/* --------------------------------------------------------------- rupa */

.fali{
  display:inline-block; background:#fde9c8; color:#7a4c05;
  border:1px dashed #c08a2a; border-radius:7px;
  padding:2px 9px; font-size:14px; font-weight:700; font-style:normal;
}

/* ------------------------------------------------------------- podnožje */

.dno{background:var(--tamnija); color:#c9dde4; padding-block:40px; font-size:15px}
.dno a{color:#fff}
.dno .omot{display:grid; gap:26px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.dno h3{color:#fff; font-size:17px; margin-bottom:10px}
.dno .sitno{border-top:1px solid rgba(255,255,255,.16); margin-top:26px;
  padding-top:18px; font-size:13px; color:#9ab8c2;
  /* Poslednji red sajta stoji po sredini — sam je u svom redu, pa uz levu
     ivicu izgleda kao da je nešto ispalo pored njega. */
  text-align:center; text-wrap:balance}
/* Boje iz svetle teme na tamnom podnozju padnu na 2.59:1 (zamka 68). */
.dno .radno .dan, .dno .podaci .oznaka{color:#9ab8c2}
.dno .radno li, .dno .podaci li{border-top-color:rgba(255,255,255,.16)}
.dno .radno .sati, .dno .podaci .vrednost{color:#ffffff}
.dno .fali{background:#ffe6b8; color:#5f3a03; border-color:#a2711f}

/* --------------------------------------------------------- lepljiv poziv */

.poziv-traka{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--tamna); color:#fff;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:none; gap:12px; align-items:center; justify-content:space-between;
  box-shadow:0 -6px 24px rgba(9,43,54,.25);
}
.poziv-traka .sta{font-size:14px; line-height:1.3}
.poziv-traka .dugme{padding:10px 16px; min-height:44px; font-size:15px}
/* Viber: prepoznatljiva ljubičasta, ali dovoljno tamna da beo tekst ima
   kontrast iznad 4,5:1 (#665cac je 5,7:1 po WCAG formuli). */
.dugme.viber{background:#665cac; border-color:#8a82c8; color:#fff}
.dugme.viber:hover{background:#574d9c}
@media (max-width:720px){
  .poziv-traka{display:flex}
  body{padding-bottom:74px}
}

@media print{
  .vrh, .poziv-traka, .hero .akcije{display:none !important}
  body{background:#fff}
}

/* ------------------------------------------ strane usluga i o doktoru */
/* (18.9.2026) Sve ispod koristi postojeće boje i kartice; nov je samo
   raspored dve kolone i spiskovi. */

/* Sa pet stavki meni na telefonu ide u dva reda; logotip već vodi kući. */
/* Isto i za „Pozovite": na telefonu ga već nosi traka na dnu ekrana, a u
   meniju je sam padao u drugi red. */
@media (max-width:560px){
  .meni a.meni-pocetna{display:none}
  .meni:has(a.meni-pocetna) a.dugme{display:none}
  /* Pet stavki ne staje u jedan red na 412 px (treba ~400 px, ima 372), a
     `space-between` u dva reda daje slučajne razmake. Mreža od tri kolone
     drži ih poravnate. */
  .meni:has(a.meni-pocetna){display:grid; grid-template-columns:repeat(3, 1fr); gap:2px}
  .meni:has(a.meni-pocetna) a{text-align:center; padding:8px 4px}
}

.mrvice{font-size:14px; color:var(--prigusen); margin-bottom:18px}
.mrvice a{color:var(--mint-tekst)}

.usluga-mreza{display:grid; gap:36px; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .usluga-mreza{grid-template-columns:minmax(0,1fr) minmax(0,340px); align-items:start}
  .poziv-okvir{position:sticky; top:120px}
}
.usluga-tekst{max-width:68ch}
.usluga-tekst h2{margin:40px 0 14px}
.vodeci-tekst{font-size:19px; color:var(--tekst)}
.spisak{margin:0 0 16px; padding-left:22px}
.spisak li{margin-bottom:8px}
.koraci{list-style:none; margin:0; padding:0; counter-reset:korak}
.koraci li{counter-increment:korak; position:relative; padding:14px 0 14px 50px;
  border-top:1px solid var(--ivica)}
.koraci li:first-child{border-top:0}
.koraci li::before{
  content:counter(korak); position:absolute; left:0; top:12px;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--mint-svetla); color:var(--tamna); font-weight:700; font-size:15px;
}
.pitanje{background:var(--papir); border:1px solid var(--ivica); border-radius:14px;
  padding:16px 20px; margin-bottom:12px}
.pitanje h3{font-size:18px; margin-bottom:6px}
.pitanje p{margin:0; color:var(--prigusen)}
.poziv-okvir h2{font-size:24px; margin-bottom:6px}
.poziv-okvir .dugme{width:100%}
.poziv-okvir .radno{margin-top:14px}
.sitno-siv{font-size:14px; color:var(--prigusen); margin-top:14px}

.kartica.usluga h2 a, .kartica.usluga h3 a{color:inherit; text-decoration:none}
.kartica.usluga h2 a:hover, .kartica.usluga h3 a:hover{text-decoration:underline}
.kartica.usluga .dalje{margin-top:14px}
.kartica.usluga .dalje a{color:var(--mint-tekst); font-weight:650; text-decoration:none}
.kartica.usluga .dalje a:hover{text-decoration:underline}

.akcije-red{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}

/* ------------------------------------------------------------ cenovnik */
.grupa-cena{margin-bottom:34px}
.grupa-cena h2{font-size:24px; margin-bottom:12px}
table.cene{width:100%; border-collapse:collapse; background:var(--papir);
  border:1px solid var(--ivica); border-radius:14px; overflow:hidden; font-size:16px}
table.cene td{padding:11px 16px; border-top:1px solid var(--ivica); vertical-align:top}
table.cene tr:first-child td{border-top:0}
table.cene td.iznos{text-align:right; white-space:nowrap; font-weight:650;
  color:var(--tamna)}

/* --------------------------------------------- zahtev za termin (forma) */
.forma{max-width:620px}
.forma label{display:block; font-weight:650; font-size:15px; margin-bottom:16px}
.forma input:not([type=checkbox]), .forma textarea{
  display:block; width:100%; margin-top:6px; padding:12px 14px; font:inherit;
  font-weight:400; color:var(--tekst); background:#fff;
  border:1px solid #9fb3c2; border-radius:10px; min-height:48px;
}
.forma input:focus, .forma textarea:focus{outline:3px solid rgba(47,147,189,.35);
  border-color:var(--mint-tekst)}
.forma .neobavezno{font-weight:400; color:var(--prigusen)}
.forma .potvrda{display:flex; gap:10px; align-items:flex-start; font-weight:400}
.forma .potvrda input{width:20px; height:20px; margin-top:3px; flex:0 0 auto}
/* Mamac za robote: van ekrana, ne `display:none` — neki roboti preskacu
   skrivena polja, ali popune ona koja „postoje". */
.forma .zamka{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.poruka-forme{border-radius:12px; padding:14px 18px; max-width:620px; font-weight:600}
.poruka-forme.uspeh{background:#e4f4ec; color:#0c5a37; border:1px solid #9fd4b8}
.poruka-forme.greska{background:#fceceb; color:#8a1f28; border:1px solid #efb7b5}

/* Naslov strane je h1, pa su naslovi kartica h2 zbog citaca ekrana.
   Velicina se zato zadaje klasom, ne tagom. */
.kartica h2, .kartica h3{font-size:20px}
.par .glava h2{font-size:20px}

/* Hero sa fotografijom (16.9.2026). Do tada je desna polovina bila prazna. */
.hero-mreza{display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,56px); align-items:center}
.hero-slika{width:100%; max-width:100%; height:auto; border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.34); display:block;
  /* Uspravna fotografija je 1050x1400; bez plafona hero naraste preko celog
     ekrana i gurne sadrzaj ispod pregiba. Isecak se pomera nagore, da lice
     ostane u kadru. */
  max-height:520px; object-fit:cover; object-position:50% 28%}
/* Na uzem ekranu slika ide ISPOD teksta: na telefonu se prvo cita zasto bi
   neko zvao, pa tek onda gleda. */
@media (max-width: 860px){
  .hero-mreza{grid-template-columns:1fr}
  .hero-slika{max-height:58vh; width:auto; margin:6px auto 0}
}