/* MĒRA — dr Miladin Todorović
   Boje i tipografija po logotipu: bela kafa i tamno teget.
   Ceo sajt je ~40KB CSS-a; namerno bez šablona, jer slogan „ni manje, ni više"
   traži sajt koji se otvara odmah i ne nosi ništa suvišno. */

:root {
  --papir:#F4EFE7;
  --papir-2:#EFE9DF;      /* naizmenične sekcije */
  --kartica:#FBF8F3;
  --teget:#1C2A42;
  --teget-2:#2B3A55;
  --tiho:#6B7688;
  --linija:#DDD6C9;
  --linija-2:#C9CDD4;
  --serif:"Cormorant Garamond","Iowan Old Style",Didot,Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sirina:1120px;
  --razmak:clamp(64px, 10vw, 128px);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--papir); color:var(--teget);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  font-weight:300; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; }

.omot { max-width:var(--sirina); margin:0 auto; padding:0 24px; }

/* ── tipografija ─────────────────────────────────────────── */
h1, h2, h3 { font-family:var(--serif); font-weight:300; margin:0; line-height:1.15; }
h1 { font-size:clamp(34px, 5.4vw, 60px); letter-spacing:.01em; }
h2 { font-size:clamp(27px, 3.6vw, 42px); }
h3 { font-size:clamp(19px, 2.2vw, 25px); }
p  { margin:0 0 1.1em; max-width:68ch; }
/* Centrirani tekst mora i da se CENTRIRA: max-width iznad sužava pasus, a uži
   blok bez ovoga ostaje uz levu ivicu — pa naslov deluje pomereno. */
.hero p, .naslov-sekcije p, .dugmad.sredina ~ p { max-width:none; margin-inline:auto; }
.vodilja {
  text-transform:uppercase; letter-spacing:.22em; font-size:11px;
  color:var(--tiho); margin:0 0 16px;
}
.uvodni { font-size:clamp(17px, 2vw, 20px); color:var(--teget-2); }

/* ── zaglavlje ───────────────────────────────────────────── */
.vrh {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--papir) 94%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linija);
}
.vrh .omot { display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }
.logo { text-decoration:none; display:flex; flex-direction:column; line-height:1; }
.logo b {
  font-family:var(--serif); font-weight:400; font-size:26px;
  letter-spacing:.20em; text-indent:.20em;
}
.logo span {
  font-size:8.5px; letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase; color:var(--tiho); margin-top:5px;
}
.meni { display:flex; gap:26px; align-items:center; }
.meni a {
  text-decoration:none; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teget-2);
  padding:6px 0; border-bottom:1px solid transparent;
}
.meni a:hover, .meni a:focus-visible, .meni a[aria-current="page"] { border-bottom-color:var(--teget); }
.meni .dugme { border:1px solid var(--teget); padding:9px 18px; border-radius:2px; }
.meni .dugme:hover { background:var(--teget); color:var(--papir); border-color:var(--teget); }

.hamburger { display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--teget); }

/* ── sekcije ─────────────────────────────────────────────── */
section { padding:var(--razmak) 0; }
section.tamnija { background:var(--papir-2); }
.naslov-sekcije { text-align:center; margin-bottom:clamp(40px, 6vw, 68px); }
.naslov-sekcije p { margin-left:auto; margin-right:auto; }

.crta {
  display:block; width:64px; height:1px; background:var(--linija-2);
  margin:20px auto;
}

/* ── uvodni ekran ────────────────────────────────────────── */
.hero { text-align:center; padding:clamp(80px, 14vw, 160px) 0 var(--razmak); }
.hero .ime {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(56px, 15vw, 148px); line-height:1;
  letter-spacing:.20em; text-indent:.20em; margin:0;
}
.hero .doktor {
  margin:26px 0 0; text-transform:uppercase;
  font-size:clamp(12px, 2vw, 16px); letter-spacing:.22em; text-indent:.22em;
}
.hero .slogan {
  margin:14px 0 0; text-transform:uppercase; color:var(--tiho);
  font-size:clamp(10px, 1.6vw, 12px); letter-spacing:.26em; text-indent:.26em;
}

/* ── mreže ───────────────────────────────────────────────── */
.mreza { display:grid; gap:clamp(18px, 3vw, 34px); }
.mreza.dve { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.mreza.tri { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
/* Četiri kartice: prag je namerno viši da bi na širokom ekranu stale 2×2.
   Sa pragom od 300px staju tri u red, pa četvrta ostane sama i red izgleda
   kao greška. */
.mreza.cetiri { grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

.kartica {
  background:var(--kartica); border:1px solid var(--linija);
  padding:clamp(24px, 3.4vw, 38px);
}
.kartica h3 { margin-bottom:10px; }
.kartica p:last-child { margin-bottom:0; }
.kartica .cena {
  font-family:var(--serif); font-size:24px; margin-top:14px; display:block;
  font-variant-numeric:tabular-nums;
}

/* ── slika + tekst jedno pored drugog ────────────────────── */
/* Slika je uvek PRVA u HTML-u, i na telefonu se tako i vidi. Za obrnuti
   raspored se na širokom ekranu samo premešta udesno — da se ne bi pravile
   dve verzije istog bloka i da mobilni redosled ostane uvek isti. */
.dvokolona {
  display:grid; gap:clamp(28px, 5vw, 64px); align-items:center;
  grid-template-columns:minmax(0, 0.82fr) minmax(0, 1fr);
}
.dvokolona.obrnuto .slika { order:2; }
.dvokolona h2 { margin-bottom:14px; }
.dvokolona .uvodni { margin-bottom:20px; }

.slika { border:1px solid var(--linija); background:var(--kartica); overflow:hidden; }
/* height:auto je OBAVEZNO: <img width=… height=…> u HTML-u postavlja i CSS
   visinu (prezentacioni atribut), pa bi bez ovoga aspect-ratio bio ignorisan
   i slika bi se razvukla na punih 1350px. */
.slika img {
  width:100%; height:auto; aspect-ratio:3 / 4;
  object-fit:cover; object-position:center 22%;
}

@media (max-width:860px) {
  .dvokolona { grid-template-columns:1fr; }
  .dvokolona.obrnuto .slika { order:0; }
  .slika img { aspect-ratio:4 / 5; }
}

/* Dva portreta na „O nama". Bez ograničenja širine svaki bi u punom omotu
   bio preko 700px visok i strana bi se pretvorila u galeriju. */
.portreti { max-width:760px; margin:clamp(34px, 5vw, 56px) auto 0; }

/* Crta ispod naslova stoji centrirano u .naslov-sekcije; u dvokoloni tekst je
   levo poravnat, pa i ona mora biti. */
.crta.levo { margin-left:0; }

/* ── kartica tretmana (sa slikom) ────────────────────────── */
/* Ista .kartica, samo se slika naslanja na ivicu — zato padding ide sa
   omotača na unutrašnji .telo. */
.kartica.usluga {
  padding:0; display:block; text-decoration:none; color:inherit;
  transition:border-color .2s ease;
}
a.kartica.usluga:hover, a.kartica.usluga:focus-visible { border-color:var(--teget); }
.kartica.usluga img {
  width:100%; height:clamp(190px, 23vw, 260px);
  object-fit:cover; object-position:center;
}
.kartica.usluga .telo { padding:clamp(22px, 3vw, 32px); }
.kartica.usluga .telo p { margin-bottom:0; }

/* ── slika na vrhu strane tretmana ───────────────────────── */
/* Fotografije su kvadratne 1000×1000; u punoj širini bi zauzele ceo ekran,
   pa se seku na traku. */
.slika-siroka {
  margin:clamp(28px, 4vw, 46px) 0; border:1px solid var(--linija);
  background:var(--kartica); overflow:hidden;
}
.slika-siroka img {
  width:100%; height:clamp(260px, 34vw, 430px);
  object-fit:cover; object-position:center 38%; display:block;
}

.tekst-usluge { max-width:74ch; }
.tekst-usluge p { max-width:none; }

/* ── cenovnik ────────────────────────────────────────────── */
.cene { width:100%; border-collapse:collapse; }
.cene caption {
  font-family:var(--serif); font-size:clamp(21px, 2.6vw, 28px);
  text-align:left; padding:34px 0 14px;
}
.cene td { padding:15px 0; border-bottom:1px solid var(--linija); vertical-align:top; }
.cene td:last-child {
  text-align:right; white-space:nowrap; padding-left:20px;
  font-variant-numeric:tabular-nums;
}
.cene .opis { display:block; font-size:13.5px; color:var(--tiho); margin-top:3px; }

/* ── često postavljana pitanja ───────────────────────────── */
details.pitanje { border-bottom:1px solid var(--linija); }
details.pitanje summary {
  cursor:pointer; list-style:none; padding:20px 0;
  font-size:17px; display:flex; justify-content:space-between; gap:20px; align-items:center;
}
details.pitanje summary::-webkit-details-marker { display:none; }
details.pitanje summary::after { content:"+"; font-size:22px; color:var(--tiho); }
details.pitanje[open] summary::after { content:"–"; }
details.pitanje .odgovor { padding:0 0 22px; color:var(--teget-2); }

/* ── dugmad ──────────────────────────────────────────────── */
.dugmad { display:flex; gap:14px; flex-wrap:wrap; }
.dugmad.sredina { justify-content:center; }
.btn {
  display:inline-block; text-decoration:none; cursor:pointer;
  padding:14px 30px; border-radius:2px; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--teget); background:none; color:var(--teget);
  font-family:inherit;
}
.btn.pun { background:var(--teget); color:var(--papir); }
.btn:hover { background:var(--teget); color:var(--papir); }
.btn.pun:hover { background:var(--teget-2); border-color:var(--teget-2); }

/* ── obrasci ─────────────────────────────────────────────── */
.polje { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.polje label { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--tiho); }
.polje input, .polje select, .polje textarea {
  font:inherit; padding:13px 14px; border:1px solid var(--linija-2);
  background:var(--kartica); color:var(--teget); border-radius:2px;
}
.polje input:focus, .polje select:focus, .polje textarea:focus {
  outline:2px solid var(--teget); outline-offset:1px;
}

/* ── mesto za popunjavanje ───────────────────────────────── */
.popuniti {
  display:inline-block; border:1px dashed #B9A98A; background:#FBF3E4;
  color:#7A6538; padding:2px 9px; border-radius:2px;
  font-size:12.5px; letter-spacing:.06em;
}
.blok-popuniti {
  border:1px dashed #B9A98A; background:#FBF3E4; color:#7A6538;
  padding:22px 24px; border-radius:2px; font-size:14px;
}
.blok-popuniti b { color:#5C4B26; }

/* ── podnožje ────────────────────────────────────────────── */
.dno { border-top:1px solid var(--linija); padding:clamp(44px, 6vw, 68px) 0 34px; }
.dno .omot { display:grid; gap:34px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.dno h4 {
  margin:0 0 14px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tiho); font-weight:400;
}
.dno a { text-decoration:none; display:block; padding:4px 0; font-size:14.5px; }
.dno a:hover { text-decoration:underline; }
.sitno {
  border-top:1px solid var(--linija); margin-top:34px; padding-top:22px;
  font-size:12.5px; color:var(--tiho); display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}

/* ── telefon ─────────────────────────────────────────────── */
@media (max-width:860px) {
  .hamburger { display:block; }
  .meni {
    position:fixed; inset:74px 0 auto; flex-direction:column; gap:0;
    background:var(--papir); border-bottom:1px solid var(--linija);
    padding:10px 24px 24px; display:none;
  }
  .meni.otvoren { display:flex; }
  .meni a { padding:14px 0; width:100%; border-bottom:1px solid var(--linija); }
  .meni .dugme { margin-top:14px; text-align:center; border:1px solid var(--teget); }
  .cene td:last-child { padding-left:12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* ── mapa na kontaktu ────────────────────────────────────── */
/* Mapa je gost sa tuđeg servera: ne sme da nosi izgled sajta, pa joj
   dajemo isti okvir kao karticama i blago je stišavamo da ne viče bojama. */
.mapa {
  margin-top:clamp(24px, 4vw, 40px);
  border:1px solid var(--linija);
  background:var(--kartica);
  overflow:hidden;
}
.mapa iframe {
  display:block; width:100%; height:clamp(280px, 42vw, 420px);
  border:0; filter:saturate(.9);
}
.ispod-mape {
  margin:12px 0 0; max-width:none; text-align:right;
  font-size:14px; letter-spacing:.04em; color:var(--tiho);
}
.ispod-mape a { text-decoration:none; border-bottom:1px solid var(--linija-2); }
.ispod-mape a:hover { color:var(--teget); border-bottom-color:var(--teget); }