/* base */
:root {
  --osnova: #e6f2ee;
  --tekst: #102a26;
  --akcent: #cf2e7e;
  --akcenttamni: #a91f63;
  --blijedo: #f5fbf8;
  --sivo: #3a5651;
  --crta: rgba(16, 42, 38, .16);
  --rub: #6b8781;
  --naslovi: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  --tijelo: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  --okvir: 1120px;
  --stupac: 640px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--osnova);
  color: var(--tekst);
  font: 400 1.0625rem/1.65 var(--tijelo);
}

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

h1, h2, h3 { margin: 0; }
p { margin: 0 0 1em; }

a {
  color: inherit;
  text-decoration-color: var(--akcent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
a:hover { color: var(--akcenttamni); text-decoration-color: var(--akcenttamni); }
a:active { color: var(--tekst); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--tekst);
  outline-offset: 3px;
}

.okvir {
  width: min(100% - 40px, var(--okvir));
  margin-inline: auto;
}

.preskok {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--tekst);
  color: var(--osnova);
  text-decoration: none;
  border-radius: 4px;
}
.preskok:focus { top: 12px; }

.nevidljivo {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* button */
.gumb {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .32em .22em .28em;
  border: 0;
  border-radius: 2px;
  background-color: transparent;
  background-image: linear-gradient(var(--akcent), var(--akcent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  color: var(--tekst);
  font: 600 1.3125rem/1.25 var(--tijelo);
  text-decoration: none;
  cursor: pointer;
  transition: background-size .26s ease, color .2s ease;
}
.gumb:hover {
  background-size: 100% 100%;
  color: #fff;
}
.gumb:focus-visible {
  outline: 3px solid var(--tekst);
  outline-offset: 3px;
}
.gumb:active {
  background-image: linear-gradient(var(--akcenttamni), var(--akcenttamni));
  background-size: 100% 100%;
  color: #fff;
}
.gumb[disabled] { opacity: .65; cursor: progress; }
.gumb.kratki { font-size: 1.0625rem; }

/* navigation */
.zaglavlje {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--osnova);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.zaglavlje.pomaknuto { border-bottom-color: var(--crta); }

.traka {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}

.naziv {
  font: 600 1.375rem/1 var(--tijelo);
  letter-spacing: .005em;
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
}
a.naziv:hover { color: var(--akcenttamni); }

.navigacija {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  min-width: 0;
}

.teme {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.teme li { flex: none; }

.tema {
  display: inline-block;
  padding: 6px 0;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.tema:hover {
  color: var(--akcenttamni);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--akcent);
  text-underline-offset: 6px;
}
.tema.aktivan {
  font-weight: 600;
  color: var(--tekst);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--tekst);
  text-underline-offset: 6px;
}

.padajuci { position: relative; flex: none; }

.otvarac {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--tekst);
  font: 400 1rem/1.65 var(--tijelo);
  cursor: pointer;
  transition: color .2s ease;
}
.otvarac::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.otvarac:hover { color: var(--akcenttamni); }
.otvarac:active { color: var(--tekst); }
.otvarac[aria-expanded="true"] { font-weight: 600; }
.otvarac[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }

.izbornik {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  z-index: 40;
  min-width: 310px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--blijedo);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(16, 42, 38, .16);
}
.padajuci:focus-within .izbornik,
.padajuci.rasklopljen .izbornik { display: block; }
.pokrenuto .padajuci:not(.rasklopljen) .izbornik { display: none; }

.izbornik a {
  display: block;
  padding: 9px 22px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.izbornik a:hover { background: rgba(207, 46, 126, .08); color: var(--akcenttamni); }
.izbornik a.aktivan {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--tekst);
  text-underline-offset: 6px;
}

/* hero */
.pocetak { padding: 40px 0 124px; }

.pocetak .raspored {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 56px;
  align-items: start;
}
.raspored > * { min-width: 0; }

.citat {
  margin: 0 0 24px;
  font: 600 clamp(2.6rem, 6vw, 5rem)/1.04 var(--naslovi);
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}

.pocetak .odgovor {
  max-width: 58ch;
  margin-bottom: 26px;
  font-size: 1.1875rem;
}

.izvor {
  margin: 18px 0 0;
  font-size: .9375rem;
  color: var(--sivo);
}

.slika { margin: 0; }
.slika img { width: 100%; height: auto; }

.potpis {
  margin-top: 10px;
  font-size: .9375rem;
  font-style: italic;
  color: var(--sivo);
}

.kadar { overflow: hidden; }
.kadar img { transition: opacity .4s ease, transform .4s ease; }
.pokrenuto .kadar.ceka img { opacity: 0; transform: scale(1.02); }

/* doubts */
.dvojbe { padding: 16px 0 136px; }

.najava {
  max-width: 52ch;
  margin: 0 0 0 auto;
  font-size: 1.1875rem;
}
.dvojbe .najava { width: min(100%, var(--stupac)); }

.dvojba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--stupac));
  column-gap: 64px;
  row-gap: 30px;
  margin-top: 104px;
}
.dvojba > * { min-width: 0; }
.dvojba + .dvojba { margin-top: 128px; }
.dvojba.desno { margin-top: 112px; }

.dvojba h2 {
  grid-column: 1 / -1;
  font: 600 clamp(2rem, 3.8vw, 3.25rem)/1.12 var(--naslovi);
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  transition: opacity .4s ease;
}
.pokrenuto .dvojba h2.ceka { opacity: 0; }
.dvojba.desno h2 { text-align: right; }

.dvojba .slika { grid-column: 1; grid-row: 2; align-self: start; }
.dvojba .stupac { grid-column: 2; }
.stupac p { max-width: 66ch; }

/* form */
.upit { padding: 144px 0 120px; }

.upit .raspored {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--stupac));
  column-gap: 64px;
  row-gap: 40px;
}
.upit h2 {
  grid-column: 2;
  font: 600 clamp(2rem, 3.4vw, 2.9rem)/1.12 var(--naslovi);
  letter-spacing: -.01em;
}
.kontakti { grid-column: 1; grid-row: 2; font-size: 1rem; }
.upit .obrazac { grid-column: 2; grid-row: 2; }

.kontakti dl { margin: 24px 0 0; }
.kontakti dt { font-weight: 600; margin-top: 14px; }
.kontakti dd { margin: 2px 0 0; }

.autor {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--crta);
}
.monogram {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tekst);
  color: var(--osnova);
  font: 600 1.25rem/1 var(--tijelo);
  letter-spacing: .04em;
}
.autor p { margin-bottom: .6em; }
.uloga { color: var(--sivo); font-size: .9375rem; }

.obrazac {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
}
.polje {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.polje.puno { grid-column: 1 / -1; }

.obrazac label { font-size: .9375rem; font-weight: 600; }

.obrazac input,
.obrazac select,
.obrazac textarea {
  width: 100%;
  padding: .66em .8em;
  border: 1px solid var(--rub);
  border-radius: 4px;
  background: var(--blijedo);
  color: var(--tekst);
  font: inherit;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.obrazac textarea { min-height: 128px; resize: vertical; }
.obrazac input:hover,
.obrazac select:hover,
.obrazac textarea:hover { border-color: var(--tekst); }
.obrazac input:focus-visible,
.obrazac select:focus-visible,
.obrazac textarea:focus-visible { outline-offset: 2px; }

.polje.neispravno input,
.polje.neispravno select,
.polje.neispravno textarea {
  border-color: #a8124c;
  box-shadow: inset 0 0 0 1px #a8124c;
}

.greska {
  margin: 0;
  color: #96103f;
  font-size: .875rem;
  font-weight: 600;
}
.greska:empty { display: none; }

.privola {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.obrazac .privola label { font-weight: 400; flex: 1; min-width: 0; }
.obrazac .privola input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--akcent);
}
.privola .greska { flex-basis: 100%; }

.sazetak {
  grid-column: 1 / -1;
  padding: 12px 16px;
  border-left: 4px solid var(--akcent);
  background: #f9e3ee;
  color: #5e0a2c;
  font-weight: 600;
}
.sazetak[hidden] { display: none; }

.zamka { display: none; }

/* pricing */
.cjenik { padding: 120px 0 112px; }

.cjenik h2 {
  text-align: center;
  font: 600 clamp(2rem, 3.6vw, 3rem)/1.12 var(--naslovi);
  letter-spacing: -.01em;
}
.cjenik .najava {
  margin: 20px auto 0;
  text-align: center;
  max-width: 56ch;
}

.stavke {
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--crta);
}
.stavka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 210px);
  gap: 32px;
  padding: 26px 12px;
  border-bottom: 1px solid var(--crta);
  transition: background-color .3s ease;
}
.stavka > * { min-width: 0; }
.stavka:target { background: rgba(207, 46, 126, .08); }
.stavka h3 { margin-bottom: 6px; font: 600 1.25rem/1.3 var(--tijelo); }
.stavka p { max-width: 62ch; margin: 0; color: var(--sivo); }

.iznos {
  margin: 0;
  text-align: right;
  font: 600 1.5rem/1.2 var(--tijelo);
  font-variant-numeric: tabular-nums;
}
.iznos small {
  display: block;
  margin-top: 4px;
  color: var(--sivo);
  font-size: .875rem;
  font-weight: 400;
}

.napomena { max-width: 66ch; margin: 30px 0 0; font-size: 1rem; }

/* timeline */
.rokovi { padding: 160px 0 128px; }

.rokovi h2 {
  max-width: 18ch;
  font: 600 clamp(2rem, 4vw, 3.4rem)/1.1 var(--naslovi);
  letter-spacing: -.01em;
}
.rokovi .najava { margin: 22px 0 0; max-width: 60ch; }

.panorama { margin: 56px 0 0; }
.panorama img { width: 100%; height: auto; max-height: 84vh; object-fit: cover; }
.panorama .potpis { width: min(100% - 40px, var(--okvir)); margin: 10px auto 0; }

.faze {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}
.faza { min-width: 0; padding-top: 18px; border-top: 3px solid var(--akcent); }
.faza h3 { font: 600 1.125rem/1.3 var(--tijelo); }
.vrijeme {
  display: block;
  margin: 8px 0 14px;
  font: 600 clamp(2rem, 2.8vw, 2.4rem)/1.12 var(--naslovi);
}
.faza p { max-width: 40ch; }

/* faq */
.pitanja { padding: 104px 0 136px; }

.pitanja .raspored {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.pitanja h2 {
  font: 600 clamp(2rem, 3.2vw, 2.75rem)/1.12 var(--naslovi);
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.pitanja .sporedno { color: var(--sivo); max-width: 40ch; }

.popis { border-top: 1px solid var(--crta); }
.pitanje { border-bottom: 1px solid var(--crta); }
.pitanje h3 { margin: 0; font: inherit; }

.okidac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: none;
  color: var(--tekst);
  font: 600 1.125rem/1.4 var(--tijelo);
  text-align: left;
  cursor: pointer;
  transition: color .2s ease;
}
.okidac::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin: -4px 6px 0 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.okidac:hover { color: var(--akcenttamni); }
.okidac:active { color: var(--tekst); }
.okidac[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }

.razrada { max-width: 66ch; padding: 0 0 22px; }
.razrada[hidden] { display: none; }
.razrada p:last-child { margin-bottom: 0; }

/* inner pages */
.stranica { padding: 44px 0 128px; }

.mrvice ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  color: var(--sivo);
}
.mrvice li + li::before { content: "/"; margin-right: 10px; color: var(--rub); }

.stranica h1 {
  max-width: 21ch;
  margin-bottom: 28px;
  font: 600 clamp(2.4rem, 4.6vw, 3.8rem)/1.08 var(--naslovi);
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}

.tekst {
  max-width: var(--stupac);
  margin-left: clamp(0px, 18vw, 240px);
}
.tekst p, .tekst li { max-width: 66ch; }
.tekst h2 {
  margin: 48px 0 14px;
  font: 700 1.375rem/1.3 var(--tijelo);
}
.tekst h2:first-child { margin-top: 0; }
.tekst ul, .tekst ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.tekst li { margin-bottom: .45em; }
.tekst .odgovor { font-size: 1.1875rem; }

.istaknuto {
  margin: 32px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--akcent);
  background: var(--blijedo);
}
.istaknuto p:last-child { margin-bottom: 0; }

.klizac { overflow-x: auto; margin: 0 0 1.4em; }
.tablica {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 1rem;
}
.tablica th,
.tablica td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--crta);
  text-align: left;
  vertical-align: top;
}
.tablica th { font-weight: 600; }
.tablica thead th { border-bottom: 2px solid var(--tekst); }

.stranica .slika { margin: 40px 0; }
.stranica .potpis { margin-top: 10px; }

.podaci { margin: 0 0 1.4em; }
.podaci dt { margin-top: 14px; font-weight: 600; }
.podaci dd { margin: 2px 0 0; }

.clanak { padding-top: 8px; }
.clanak:target h2 { color: var(--akcenttamni); }

.stranica .obrazac { margin-top: 28px; }

.dalje { margin-top: 40px; }
.dalje ul { padding-left: 1.25em; }

/* footer */
.podnozje {
  padding: 72px 0 40px;
  border-top: 1px solid var(--crta);
  font-size: .9375rem;
}
.mreza {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 40px;
}
.mreza > * { min-width: 0; }
.podnozje .naziv { display: block; margin-bottom: 14px; font-size: 1.25rem; }
.podnozje h2 { margin-bottom: 12px; font: 600 1rem/1.3 var(--tijelo); }
.podnozje ul { margin: 0; padding: 0; list-style: none; }
.podnozje li { margin-bottom: 8px; }
.dno {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--crta);
  color: var(--sivo);
}
.dno p { margin: 0; }

/* cookies */
.kolacici {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: 400px;
  max-height: 25vh;
  overflow-y: auto;
  padding: 16px 20px;
  border-radius: 6px;
  background: var(--blijedo);
  box-shadow: 0 12px 36px rgba(16, 42, 38, .18);
  font-size: .9375rem;
}
.kolacici[hidden] { display: none; }
.kolacici p { margin: 0 0 10px; }
.izbor { display: flex; gap: 28px; }

/* responsive */
@media (max-width: 1280px) {
  .pocetak .raspored { grid-template-columns: minmax(0, 1fr) minmax(0, 390px); }
}

@media (max-width: 1100px) {
  .pocetak .raspored { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 44px; }
  .dvojba { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 40px; }
  .upit .raspored { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 40px; }
  .pitanja .raspored { gap: 44px; }
  .faze { gap: 30px; }
  .tekst { margin-left: clamp(0px, 10vw, 120px); }
  .teme { gap: 18px; }
  .navigacija { gap: 18px; }
  .traka { gap: 22px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 104px; }
  .traka {
    flex-wrap: wrap;
    gap: 0 16px;
    min-height: 0;
    padding-top: 6px;
  }
  .naziv { order: 1; line-height: 44px; }
  .padajuci { order: 2; margin-left: auto; }
  .traka > .gumb { order: 3; }
  .navigacija {
    order: 4;
    flex: 1 0 100%;
    margin-left: 0;
    padding-bottom: 4px;
  }
  .teme {
    flex: 1;
    min-width: 0;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 2px 2px;
  }
  .teme::-webkit-scrollbar { display: none; }
  .padajuci { position: static; }
  .izbornik {
    left: 0;
    right: 0;
    top: 100%;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 0 0 6px 6px;
  }

  .pocetak { padding: 20px 0 88px; }
  .pocetak .raspored { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pocetak .slika img {
    width: 100%;
    height: 46vh;
    height: 46svh;
    object-fit: cover;
    object-position: center 35%;
  }

  .dvojba,
  .upit .raspored,
  .pitanja .raspored { grid-template-columns: minmax(0, 1fr); }
  .dvojba .slika, .dvojba .stupac { grid-column: 1; grid-row: auto; }
  .dvojba.desno h2 { text-align: left; }
  .dvojbe .najava { margin-left: 0; }
  .upit h2, .kontakti, .upit .obrazac { grid-column: 1; grid-row: auto; }
  .upit .obrazac { order: 2; }
  .kontakti { order: 3; }
  .pitanja .raspored { gap: 24px; }
  .mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vlasnik { grid-column: 1 / -1; }
  .tekst { margin-left: 0; }
}

@media (max-width: 768px) {
  .dvojbe { padding-bottom: 96px; }
  .dvojba { margin-top: 80px; }
  .dvojba + .dvojba, .dvojba.desno { margin-top: 88px; }
  .upit { padding: 96px 0 88px; }
  .cjenik { padding: 88px 0 80px; }
  .rokovi { padding: 96px 0 88px; }
  .pitanja { padding: 80px 0 96px; }
  .faze { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faza p { max-width: 66ch; }
  .stranica { padding: 32px 0 96px; }
}

@media (max-width: 640px) {
  .obrazac { grid-template-columns: minmax(0, 1fr); }
  .stavka { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px 4px; }
  .iznos { text-align: left; }
  .mreza { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kolacici { left: 12px; right: 12px; max-width: none; }
}

@media (max-width: 480px) {
  .okvir { width: min(100% - 32px, var(--okvir)); }
  .panorama .potpis { width: min(100% - 32px, var(--okvir)); }
  .gumb { font-size: 1.1875rem; }
  .gumb.kratki { font-size: 1rem; }
  .pocetak .odgovor, .najava { font-size: 1.0625rem; }
  .naziv { font-size: 1.25rem; }
  .teme { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .gumb { transition: color .2s ease !important; }
  .pokrenuto .kadar.ceka img,
  .pokrenuto .dvojba h2.ceka { opacity: 1; transform: none; }
}