/* Auto Servis „Karataš“: zajednička osnova */
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-condensed-800.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-condensed-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/barlow-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/barlow-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --crvena: #C8161D;        /* crvena s table i logotipa */
  --crvena-tamna: #A01016;
  --crna: #000000;
  --tekst: #262626;
  --siva: #5E5E5E;
  --linija: #D2D2D2;
  --bijela: #FFFFFF;
  --temelj: #E3E4E3;        /* siva temeljne boje (primer) */
  --naslovi: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --tijelo: "Barlow", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--tijelo);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--bijela);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, dl, dd { margin: 0; }
ul { padding: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--crna); outline-offset: 3px; }

h2 {
  font-family: var(--naslovi);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--crna);
  margin-bottom: .35rem;
}

/* dugme za poziv */
.poziv {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .32em .9em .32em .36em;
  background: var(--crvena);
  color: var(--bijela);
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--naslovi);
  font-weight: 800;
  font-size: clamp(2.1rem, 8.5vw, 3.1rem);
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: lining-nums;
}
.poziv svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  padding: .2em;
  border-radius: 50%;
  background: var(--bijela);
  fill: var(--crvena);
}
.poziv:hover { background: var(--crvena-tamna); }
.poziv-uz { font-size: 1rem; color: var(--siva); margin-top: .6rem; }

.sati { display: grid; grid-template-columns: auto auto; gap: .1rem 1.25rem; justify-content: start; }
.sati dt { font-weight: 600; color: var(--crna); }
.sati dd { font-variant-numeric: tabular-nums; }

.karta { font-weight: 600; color: var(--crvena); text-underline-offset: .18em; }
.karta:hover { color: var(--crvena-tamna); }

.usluge-lista { list-style: none; }
.usluge-lista li { position: relative; padding-left: 1.1rem; }
.usluge-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: .5rem;
  background: var(--crvena);
}

.podnozje { font-size: .9375rem; color: var(--siva); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Varijanta B: Crvena traka (veliko crveno polje kao lakirana površina, informacije ispod) */
.traka-status {
  background: var(--crna);
  color: var(--bijela);
  font-size: .9375rem;
  padding: .55rem 1.25rem;
  text-align: center;
}

.traka { background: var(--crvena); color: var(--bijela); }
.traka-unutra {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  gap: 2.25rem;
  align-items: end;
}
@media (min-width: 56rem) {
  .traka-unutra { grid-template-columns: 1.25fr 1fr; gap: 4rem; }
}
.traka h1 img, .traka-pocetna img { width: min(30rem, 100%); }
.traka-pocetna { display: inline-block; }
.traka-nazad { margin-top: 1rem; }
.traka-nazad a { color: var(--bijela); font-weight: 600; text-underline-offset: .18em; }
.traka-uvod {
  margin-top: 1.5rem;
  max-width: 26ch;
  font-family: var(--naslovi);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.2;
}

/* na crvenoj podlozi dugme je bijelo, a fokus bijel */
.traka .poziv { background: var(--bijela); color: var(--crvena); }
.traka .poziv svg { background: var(--crvena); fill: var(--bijela); }
.traka .poziv:hover { background: #F3F3F3; }
.traka :focus-visible { outline-color: var(--bijela); }
.traka .poziv-uz { color: var(--bijela); opacity: .92; }

.traka-info {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  display: grid;
  gap: 2.25rem;
}
@media (min-width: 48rem) {
  .traka-info { grid-template-columns: 1fr 1fr 1.3fr; gap: 3rem; }
}
.traka-info section { border-top: 4px solid var(--crna); padding-top: 1rem; }
.traka-info .karta { display: inline-block; margin-top: .4rem; }

.traka-podnozje {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem clamp(1.25rem, 5vw, 3rem) 2.5rem;
  border-top: 1px solid var(--linija);
}