/* Cahayabox Crew - docs/Cahayabox-CREW-dizajn.md.
   Prvi dio su Clubove klase PREPISANE s istim imenima i vrijednostima
   (webgpu-gallery-blazor/wwwroot/css/global.css): .browse-*, .fotografi-grid,
   .fotograf-*, .tags-chip, .login-*, .upload-opis. Kad se u Clubu promijene,
   promijene se i ovdje (ručno - domene ne dijele datoteku). Drugi dio je
   samo ono što zajednica nema: .crew-* (redak, cijena, kvačica, filtri, upit,
   ispunjenost). Tamna tema na svim stranicama (issue #30, tokeni u odjeljku „Naslovnica i okvir"); boje su varijable, ne tvrdo upisane. */

/* ---------- slova ---------- */
/* Imena fontova su samo u varijablama ispod (--font-naslovi, --font-tijelo, --font-logo); pravila koriste var(). Dok web font
   ne stigne, preglednik crta zamjenskim fontom s size-adjust, iste širine kao web font, pa swap ne pomakne stranicu
   (crew #76 mjera 8, CLS naslovnice; tests/zamjenski-fontovi.mjs). Blok slaže tools/zamjenski-fontovi.py iz
   tools/zamjenski-fontovi.json. */
/* zamjenski-fontovi: početak (tools/zamjenski-fontovi.py --upisi, ne mijenjati ručno) */
@font-face { font-family: "Playfair Display zamjena Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"), local("Liberation Serif"), local("LiberationSerif"), local("Tinos"); size-adjust: 109.74%; ascent-override: 98.60%; descent-override: 22.87%; line-gap-override: 0.00%; }
@font-face { font-family: "Playfair Display zamjena Noto Serif"; src: local("Noto Serif"), local("NotoSerif-Regular"); size-adjust: 93.60%; ascent-override: 115.59%; descent-override: 26.81%; line-gap-override: 0.00%; }
@font-face { font-family: "Playfair Display zamjena DejaVu Serif"; src: local("DejaVu Serif"), local("DejaVuSerif"); size-adjust: 86.81%; ascent-override: 124.64%; descent-override: 28.91%; line-gap-override: 0.00%; }
@font-face { font-family: "Manrope zamjena Arial"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"); size-adjust: 101.85%; ascent-override: 104.66%; descent-override: 29.45%; line-gap-override: 0.00%; }
@font-face { font-family: "Manrope zamjena Roboto"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 102.92%; ascent-override: 103.57%; descent-override: 29.15%; line-gap-override: 0.00%; }
@font-face { font-family: "Manrope zamjena DejaVu Sans"; src: local("DejaVu Sans"), local("DejaVuSans"); size-adjust: 89.35%; ascent-override: 119.31%; descent-override: 33.58%; line-gap-override: 0.00%; }
@font-face { font-family: "Marcellus zamjena Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"), local("Liberation Serif"), local("LiberationSerif"), local("Tinos"); size-adjust: 109.86%; ascent-override: 88.67%; descent-override: 25.47%; line-gap-override: 0.00%; }
@font-face { font-family: "Marcellus zamjena Noto Serif"; src: local("Noto Serif"), local("NotoSerif-Regular"); size-adjust: 93.71%; ascent-override: 103.95%; descent-override: 29.86%; line-gap-override: 0.00%; }
@font-face { font-family: "Marcellus zamjena DejaVu Serif"; src: local("DejaVu Serif"), local("DejaVuSerif"); size-adjust: 86.91%; ascent-override: 112.09%; descent-override: 32.19%; line-gap-override: 0.00%; }
:root {
  --font-naslovi: "Playfair Display", "Playfair Display zamjena Times", "Playfair Display zamjena Noto Serif", "Playfair Display zamjena DejaVu Serif", serif;
  --font-tijelo: "Manrope", "Manrope zamjena Arial", "Manrope zamjena Roboto", "Manrope zamjena DejaVu Sans", system-ui, -apple-system, sans-serif;
  --font-logo: "Marcellus", "Marcellus zamjena Times", "Marcellus zamjena Noto Serif", "Marcellus zamjena DejaVu Serif", serif;
}
/* zamjenski-fontovi: kraj */

/* ---------- baza (Club html/body) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-tijelo);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* ---------- Club: naslovi, mreže, kartice ---------- */
.browse-title {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 1.9rem;
  margin: 0 0 0.4rem;
}
.browse-sub {
  margin: 0 0 2rem;
  font-size: 0.9rem;
  color: var(--mut);
  max-width: 40rem;
}
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem 1.5rem;
}
.browse-card { display: block; color: var(--fg); text-decoration: none; }
.browse-card img { width: 100%; height: auto; display: block; object-fit: cover; }
.fotografi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.fotograf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1.25rem;
  background: var(--card);
  border: none;
  box-shadow: var(--card-shadow);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
}
.fotograf-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; }
.fotograf-name { display: block; text-align: center; font-family: var(--font-logo); font-size: 1.1rem; margin-top: 0.95rem; }

/* ---------- Club: čipovi ---------- */
.tags-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.tags-chip {
  display: inline-flex; align-items: center; gap: 0.1rem;
  padding: 0.22rem 0.6rem;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  font-size: 0.8rem; line-height: 1.25;
  text-decoration: none; color: var(--fg);
}
.tags-chip:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Club: forma (prijava/upload jezik) ---------- */
.login-field { display: flex; flex-direction: column; gap: 0.4rem; }
.login-label { font-size: 0.8125rem; color: var(--mut); }
.login-input {
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; padding: 0.45rem 0; font: inherit; color: var(--fg); width: 100%;
}
/* Fokus bez okvira (T 3. 9.): nema outlinea ni sjene oko polja; jedini znak je zlatna donja crta (input/select) ili zlatni rub (textarea). */
.login-input:focus, .login-input:focus-visible { outline: none; box-shadow: none; border-bottom-color: var(--gold); }
.upload-opis:focus, .upload-opis:focus-visible { outline: none; box-shadow: none; border-color: var(--gold); }
.login-error { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--err); }
.login-submit {
  margin-top: 0.6rem; align-self: flex-start;
  border: 1px solid var(--fg); background: var(--fg); color: var(--bg);
  font: inherit; font-weight: 600; font-size: 0.85rem;
  padding: 0.6rem 1.7rem; border-radius: 999px; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  text-decoration: none; display: inline-block;
}
.login-submit:hover, .login-submit:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--na-zlatnom); }
.upload-opis {
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.7rem 0.85rem;
  font-family: inherit; font-size: 0.95rem; line-height: 1.55; color: var(--fg);
  resize: vertical; min-height: 5.5rem; width: 100%; background: var(--card);
}

/* ---------- Crew: glavna radnja (dizajn § 2: narančasta ploha, tamni tekst) ---------- */
.crew-btn-1, .login-submit.crew-btn-1 { background: var(--hot); border-color: var(--hot); color: #111; }
.crew-btn-1:hover, .login-submit.crew-btn-1:hover, .login-submit.crew-btn-1:focus-visible { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.crew-btn-2 {
  display: inline-block; padding: 0.55rem 1.3rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--fg);
  font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: border-color 160ms ease;
}
.crew-btn-2:hover, .crew-btn-2:focus-visible { border-color: var(--gold); }

/* ---------- Crew: raspored stranica (zaglavlje i podnožje su u odjeljku „Naslovnica i okvir" na dnu) ---------- */
.crew-main { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; min-height: 60vh; }

/* ---------- Crew: sitnice ---------- */
.crew-label {
  display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mut); font-weight: 500; margin: 2.2rem 0 0.8rem;
}
h1 + .crew-label, .browse-sub + .crew-label, .crew-box .crew-label { margin-top: 0; }
/* Labela unutar forme/filtra je samo naziv polja, bez razmaka sekcije. */
.crew-filters .crew-label, .crew-search .crew-label { margin: 0 0 0.3rem; }
.crew-muted { color: var(--mut); }
.crew-small { font-size: 0.8rem; }
.crew-ok { color: var(--ok); font-size: 0.9rem; margin: 0.6rem 0; }
.crew-cta { margin-top: 3rem; font-size: 0.95rem; }
.crew-cta a { color: var(--gold); }
.crew-more { margin: 1.5rem 0; display: flex; align-items: center; gap: 1rem; }
.crew-more-n { font-size: 0.85rem; color: var(--mut); }
.crew-empty { text-align: center; padding: 3rem 0; }
.crew-empty p { margin: 0.5rem 0; }
.crew-empty .browse-sub { margin: 0 auto 1rem; }
.crew-empty a { color: var(--gold); }

/* Kvačica verificiranog (dizajn § 5): zlatna, 16px, u liniji s tekstom. */
.crew-verified { display: inline-flex; vertical-align: -2px; color: var(--gold); margin-left: 0.2rem; }
.crew-verified svg { display: block; }

/* Cijena (dizajn § 5) */
.crew-price { display: inline-flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.crew-price-od { font-size: 0.8125rem; color: var(--gold); }
.crew-price-iznos { font-weight: 600; font-size: 1.05rem; }
.crew-price-jed { font-size: 0.85rem; color: var(--mut); }
.crew-price-upit { font-style: italic; color: var(--mut); font-size: 0.9rem; }

/* ---------- Crew: naslovnica ---------- */
.crew-search {
  display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
  padding: 1.2rem; background: var(--warm); border-radius: 12px; margin-bottom: 0.5rem;
}
.crew-search label { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 200px; }
/* „Koga" u tražilici (issue #18): kvačice zanimanja. Fieldset samo grupira - bez okvira i razmaka,
   da forma izgleda isto kao i prije (bez dizajna, odluka 24. 9. 2026.). */
.crew-koga { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 1rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.crew-koga legend { padding: 0; }
.crew-koga label { flex: 0 1 auto; }
.crew-search .login-submit { margin-top: 0; align-self: flex-end; height: 42px; flex: 0 0 auto; }
.crew-search select, .crew-filters select {
  height: 42px; border-radius: 11px; border: 1px solid var(--line-strong);
  background: var(--card); padding: 0 0.8rem; font: inherit; font-size: 0.9rem; color: var(--fg); width: 100%;
}
.crew-kat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; }
.crew-kat a, .crew-kat-empty {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: 12px; text-decoration: none; min-height: 44px;
  transition: border-color 160ms ease;
}
.crew-kat a:hover { border-color: var(--gold); }
.crew-kat-name { font-family: var(--font-logo); font-size: 1.15rem; }
.crew-kat-n { font-size: 0.85rem; color: var(--mut); }
.crew-kat-empty { color: var(--mut); border-style: dashed; }
.crew-card-meta { font-size: 0.85rem; color: var(--mut); margin-top: 0.2rem; }
.crew-card .crew-price { margin-top: 0.4rem; }

/* Sličice 3:2 (Club .fotograf-photos mjere) */
.crew-thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--warm); }
.crew-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Crew: popis kategorije (dizajn § 4.2) ---------- */
.crew-filters {
  display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem;
}
.crew-filters label { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 150px; }
.crew-filters-check { flex-direction: row !important; align-items: center !important; gap: 0.4rem !important; min-height: 42px; font-size: 0.9rem; }
.crew-filters .crew-btn-2 { height: 42px; }
/* Podvrste (issue #29): red „Vrsta fotografiranja" na stranici namjene, čip podvrste na kartici, putokaz stranice podvrste.
   Narančasta nije boja sitnog teksta (Odluke.md 25. 9., kontrast 3,47:1): izbor se vidi po obrubu i podlozi, tekst ostaje --fg. */
.crew-podvrste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 1rem; }
.crew-podvrste .crew-label { margin: 0; }
.crew-podvrste .tags-chip { text-decoration: none; color: var(--fg); }
.crew-podvrste .tags-chip.is-on { border-color: var(--fg); border-width: 1px; font-weight: 600; }
.crew-chip-n { color: var(--mut); font-size: 0.75rem; margin-left: 0.25rem; }
.crew-chip-podvrsta { border-color: var(--fg); font-weight: 600; }
.crew-putokaz { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--mut); }
.crew-putokaz a { color: var(--mut); }
.crew-podvrsta-profil { margin-top: 0.6rem; }
.crew-podvrsta-profil ul { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }

/* ---------- Crew: profil (dizajn § 4.3) ---------- */
.crew-profil-head { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; }
.crew-profil-line { margin-top: 0.2rem; font-size: 0.95rem; }
.crew-profil-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
.crew-box { margin-bottom: 2rem; }
.crew-box p { margin: 0.3rem 0; }
.crew-box-main { font-size: 1.15rem; }
.crew-box-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.crew-box-head .crew-label { margin: 0; }
.crew-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.crew-links a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.crew-opis { white-space: pre-line; max-width: 44rem; }
.crew-upiti { list-style: none; padding: 0; margin: 0.8rem 0 0; max-width: 44rem; }
.crew-upiti li { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.crew-upit-poruka { white-space: pre-line; }
.crew-galerija { margin-top: 0.5rem; }
.crew-galerija li { aspect-ratio: 3 / 2; overflow: hidden; background: var(--warm); }
.crew-galerija img { width: 100%; height: 100%; object-fit: cover; }
.crew-foot { margin-top: 1rem; font-size: 0.8rem; color: var(--mut); }

/* Upit u mjestu (dizajn § 4.4): <details>, summary je gumb, bez JS-a */
.crew-upit { margin-top: 0.8rem; }
.crew-upit summary { list-style: none; }
.crew-upit summary::-webkit-details-marker { display: none; }
.crew-upit[open] summary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.crew-form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; max-width: 440px; }
.crew-form-wide { max-width: 720px; }
.crew-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.crew-form .login-submit { margin-top: 0.2rem; }
.crew-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.crew-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.crew-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.crew-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; min-height: 32px; }
.crew-check input { accent-color: var(--gold); width: 16px; height: 16px; }
/* Primjer u praznom polju mora se vidjeti da je primjer, ne upisana vrijednost (T 3. 9.). */
.login-input::placeholder, .upload-opis::placeholder { color: var(--ph); font-style: italic; opacity: 1; }
.crew-hint { margin: 0.35rem 0 0; line-height: 1.4; }
/* Grad: <input list> - preglednik sam crta popis; njegov gumb-strelicu samo prigušimo da polje ostane crta kao ostala. */
.login-input[list]::-webkit-calendar-picker-indicator { opacity: 0.35; }
.crew-details summary { cursor: pointer; font-size: 0.9rem; color: var(--gold); margin: 0.4rem 0; }
.crew-details > :not(summary) { margin-top: 0.9rem; }
/* Ovo sam ja: četiri načina dokaza kao koraci koji se otvaraju */
.crew-korak { border-top: 1px solid var(--line); padding-top: 0.9rem; }
.crew-korak summary { font-size: 1.05rem; font-weight: 600; color: inherit; }
.crew-korak code { font-size: 0.95rem; word-break: break-all; }
.crew-prose p { margin: 0.6rem 0; max-width: 44rem; }
.crew-prose a { color: var(--gold); }
select.login-input { height: 2.2rem; }

/* Ispunjenost (dizajn § 5) */
.crew-progress { height: 6px; background: var(--track); border-radius: 999px; overflow: hidden; margin-top: 1rem; max-width: 440px; }
.crew-progress span { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.crew-progress-n { margin: 0.4rem 0 1.8rem; font-size: 0.9rem; }

/* ---------- responsive (dizajn § 8) ---------- */
@media (max-width: 899px) {
  .crew-profil-cols { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .browse-title { font-size: 1.6rem; }
  .crew-main { padding-left: 1rem; padding-right: 1rem; }
  .crew-search { flex-direction: column; align-items: stretch; }
  .crew-filters { flex-direction: column; align-items: stretch; background: var(--warm); padding: 1rem; border-radius: 12px; }
  .crew-form-row { grid-template-columns: 1fr; }
  .crew-upit summary, .crew-upit .login-submit { width: 100%; text-align: center; }
  .crew-profil-head { gap: 1rem; }
}

/* 1.6 (odluka 35): ponude po kategoriji na profilu i u formi */
.crew-ponuda{margin-bottom:1.25rem}
.crew-ponuda-kat{font:600 .95rem/1.3 var(--font-tijelo);margin:0 0 .35rem}
.crew-ponuda-kat a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.crew-ponuda-kat a:hover{border-color:var(--gold)}
.crew-stavke{list-style:none;margin:.5rem 0 0;padding:0}
.crew-stavke li{display:grid;grid-template-columns:1fr auto;gap:.15rem .9rem;padding:.45rem 0;border-top:1px solid var(--line)}
.crew-stavka-naziv{font-weight:500}
.crew-stavka-cijena{white-space:nowrap;font-weight:600}
.crew-stavka-ukljucuje{grid-column:1/-1;font-size:.85rem}
.crew-ponuda-form{margin-bottom:1.5rem}
.crew-stavke-form{display:grid;gap:.4rem;margin:.5rem 0}
.crew-stavka-head,.crew-stavka-row{display:grid;grid-template-columns:2.2fr .8fr .8fr 1.1fr .6fr;gap:.4rem;align-items:center}
.crew-stavka-head{font-size:.8125rem;color:var(--mut)}
.crew-stavka-row .login-input{margin:0;min-width:0}
.crew-stavka-uklj{grid-column:1/-1}
@media (max-width:768px){
  .crew-stavka-head{display:none}
  .crew-stavka-row{grid-template-columns:1fr 1fr}
  .crew-stavka-row input[name$="_naziv"]{grid-column:1/-1}
}

/* Moj profil (issue #15): "dodaj još" ispod redaka cijene i gumb Spremi dok slanje traje. */
.crew-dodaj-jos{font-size:.85rem;padding:.35rem .8rem;cursor:pointer}
.crew-stavke-form p{margin:0}
.crew-ugaseni{list-style:none;margin:.6rem 0 .3rem;padding:0}
.crew-ugaseni li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .9rem;padding:.45rem 0;border-top:1px solid var(--line)}
.crew-ugaseni strong{color:var(--mut)}
.crew-ugaseno{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:3px;padding:.05rem .35rem;margin-right:.3rem}
.crew-ugaseni a.crew-btn-2{text-decoration:none}
#moj-forma [hidden]{display:none !important}
.login-submit.crew-salje{opacity:.7;cursor:progress}
.login-submit.crew-salje::after{content:"";display:inline-block;width:.85em;height:.85em;margin-left:.5em;vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:crew-vrti .7s linear infinite}
@keyframes crew-vrti{to{transform:rotate(360deg)}}

/* =====================================================================================================
   Naslovnica i okvir (issue #30, Claude Design od 25. 9. 2026., docs/dizajn-2026-09-25/, pravila P1 do P21).
   Zaglavlje (.ch) i podnožje (.cf) vrijede za sve stranice; sve ostalo (.h-*, .vk-*) je naslovnica.
   Tamna tema (P19) vrijedi za sve stranice: boje su varijable u tokenima, sadržaj stranica se ne dira.
   Slova (Odluke 25. 9.): Playfair Display za naslove, imena i brojke, Manrope za ostalo, Marcellus samo u logotipu.
   Točke loma 390 / 768 / 1200 / 1440 (P17); razmaci iz ljestvice 4-8-12-16-24-32-48-64-96 (P2).
   ===================================================================================================== */

/* ---------- tokeni ---------- */
/* Svijetla tema je zadana; tamna (P19) dolazi samo iz izbora u prekidaču (data-theme na <html>, js/tema.js).
   Postavka sustava se ne prati (Odluke 25. 9.). */
:root {
  --fg: #111; --bg: #fff; --card: #fff; --warm: #f1efe8; --gold: #8a7443; --body: #3a3733;
  --mut: rgba(17, 17, 17, 0.62); --line: rgba(17, 17, 17, 0.14); --line-strong: rgba(17, 17, 17, 0.25);
  --chip: rgba(17, 17, 17, 0.035); --track: rgba(17, 17, 17, 0.08); --ph: rgba(17, 17, 17, 0.3);
  --err: #c02d00; --ok: #2f7a3f; --na-zlatnom: #fff; --card-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
  --cf-rub: #121110; --hot: #f83600;
  /* Avatar je zaobljeni kvadrat s polumjerom 18 % stranice, isti kao na ID-u, Clubu i Gearu (Odluke 24. 9. i 18. 10., crew #97). */
  --avatar-radius: 18%;
  color-scheme: light;
}
:is(.crew-page-home, .crew-page:has(.s-page)) {
  --bg: #f7f4ef; --card: #fff; --fg: #111; --body: #3a3733; --mut: #6b665f; --line: rgba(17, 17, 17, 0.10); --warm: #efebe4;
  --karta-linija: rgba(17, 17, 17, 0.18); --karta-susjed: rgba(17, 17, 17, 0.10);
  --pad: 20px; --gap: 64px; --cmax: calc(1280px + 2 * var(--pad)); --h2: 30px; --tijelo: 16px; --herop: 64px;
  background: var(--bg); color: var(--fg);
}
html[data-theme="dark"], html[data-theme="dark"] :is(.crew-page-home, .crew-page:has(.s-page)) {
  --bg: #121110; --card: #1c1a18; --fg: #f2efe9; --body: #f2efe9; --mut: #a39d94; --line: rgba(242, 239, 233, 0.14); --warm: #1c1a18; --gold: #c9a96a;
  --line-strong: rgba(242, 239, 233, 0.35); --chip: rgba(242, 239, 233, 0.06); --track: rgba(242, 239, 233, 0.14); --ph: #8a847b;
  --err: #ff6a3d; --ok: #6fcf85; --na-zlatnom: #121110; --card-shadow: 0 0 0 1px rgba(242, 239, 233, 0.14);
  --karta-linija: rgba(242, 239, 233, 0.2); --karta-susjed: rgba(242, 239, 233, 0.10); --cf-rub: rgba(242, 239, 233, 0.14);
  color-scheme: dark;
}
body:has(.crew-page-home), body:has(.s-page) { background: #f7f4ef; }
html[data-theme="dark"] body:has(.crew-page-home), html[data-theme="dark"] body:has(.s-page) { background: #121110; }
.ch :focus-visible, .cf :focus-visible, .crew-home :focus-visible, .s-page :focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ch *, .cf *, .crew-home *, .s-page *, .ch *::before, .cf *::before, .crew-home *::before, .s-page *::before, .s-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- zaglavlje ---------- */
.ch { position: relative; z-index: 50; border-bottom: 1px solid var(--line); background: var(--bg); }
.ch-in {
  display: flex; align-items: center; gap: 24px; height: 72px;
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px);
}
:is(.crew-page-home, .crew-page:has(.s-page)) .ch-in { max-width: var(--cmax); padding: 0 var(--pad); }
.ch-brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font: 400 1.15rem var(--font-logo); white-space: nowrap; }
.ch-brand svg { flex: 0 0 auto; }
.ch-sp { flex: 1; }
.ch-nav { display: flex; gap: 32px; font: 500 15px/1.5 var(--font-tijelo); }
.ch-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mut); text-decoration: none; }
:is(.crew-page-home, .crew-page:has(.s-page)) .ch-nav a { color: var(--body); }
.ch-nav a:hover, .ch-login:hover { text-decoration: underline; text-underline-offset: 4px; }
.ch-ico {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px;
  border: 0; border-radius: 4px; background: transparent; color: var(--fg); cursor: pointer; text-decoration: none;
}
.ch-ico:hover { background: var(--card); }
.ch-ico[hidden] { display: none; }
.ch-login { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px var(--font-tijelo); color: var(--fg); text-decoration: none; white-space: nowrap; }
.ch-odjava { color: var(--mut); }
.ch-cta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 600 15px/1 var(--font-tijelo); text-decoration: none; cursor: pointer; }
.ch-cta-obrub {
  height: 48px; padding: 0 20px; border-radius: 4px; border: 1px solid var(--fg); background: transparent; color: var(--fg);
  transition: border-color 0.2s, background-color 0.2s;
}
.ch-cta-obrub:hover { border-color: var(--hot); background-color: var(--card); }
.crew-tema-sunce { display: none; }
.crew-tema-mjesec { display: flex; }
html[data-theme="dark"] .crew-tema-sunce { display: flex; }
html[data-theme="dark"] .crew-tema-mjesec { display: none; }
/* Crewovo zvonce (crew #96 korak 3): broj nepročitanih u kružiću na rubu ikone (js/obavijesti.js). */
.ch-zvonce { position: relative; }
.ch-zvonce-broj {
  position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--hot); color: #fff; font: 600 11px/18px var(--font-tijelo); text-align: center;
}
.ch-zvonce-broj[hidden] { display: none; }
.ch-mob { display: none; }
.ch-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ch-burger {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer;
}
.ch-toggle:focus-visible + .ch-burger { outline: 2px solid var(--hot); outline-offset: 2px; }
.ch-panel {
  display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 4px;
  padding: 16px 20px 24px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: 500 17px var(--font-tijelo);
}
.ch-toggle:checked ~ .ch-panel { display: flex; }
.ch-panel a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; color: var(--mut); text-decoration: none; }
.ch-panel .ch-p-jaka { color: var(--fg); }
.ch-panel .ch-p-cta { justify-content: center; height: 48px; margin-top: 12px; padding: 0; font-size: 15px; }
.ch-panel .ch-cta-obrub { color: var(--fg); }
/* Zaglavlje se sabire u izbornik do 1099 px: na 768 px navigacija, prekidač, prijava i gumb ne stanu u jedan red. */
@media (max-width: 1099px) {
  .ch-desk { display: none !important; }
  .ch-mob { display: block; }
}

/* ---------- podnožje ---------- */
.cf { margin-top: 96px; border-top: 1px solid var(--line); }
.cf-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; max-width: 1240px; margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 48px); font: 400 14px/1.5 var(--font-tijelo); color: var(--mut);
}
.cf-in a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; }
/* Razdjelnica „·" (crew #70): ispred svake stavke, 12 px s obje strane kao prije (točka je široka oko 3 px); red je
   pomaknut 27 px ulijevo i odrezan 4 px lijevo od teksta, pa se točka na početku retka ne vidi, a fokus (2 + 2 px) da. */
.cf-red { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; row-gap: 4px; min-width: 0; margin-left: -27px; clip-path: inset(-8px -8px -8px 23px); }
.cf-i { display: inline-flex; align-items: center; }
.cf-i::before { content: "·"; content: "·" / ""; padding: 0 12px; }
.cf-in a:hover { text-decoration: underline; }
.cf-brand { font: 400 16px var(--font-logo); color: var(--fg); }
:is(.crew-page-home, .crew-page:has(.s-page)) .cf { margin-top: var(--gap); border-top: 1px solid var(--cf-rub); background: #121110; }
:is(.crew-page-home, .crew-page:has(.s-page)) .cf-in { max-width: var(--cmax); padding: 32px var(--pad); color: #a39d94; }
:is(.crew-page-home, .crew-page:has(.s-page)) .cf-in a, :is(.crew-page-home, .crew-page:has(.s-page)) .cf-brand { color: #f2efe9; }

/* ---------- naslovnica: mreža i odjeljci (P1, P2) ---------- */
.h-wrap { max-width: var(--cmax); margin: 0 auto; padding: 0 var(--pad); }
.h-sec { padding-top: var(--gap); }
.h-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.h-head-t { min-width: 0; flex: 1 1 420px; }
.h-head-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.h-lab { font: 600 12px/1.5 var(--font-tijelo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.h-h2 { margin-top: 12px; font: 400 var(--h2) / 1.15 var(--font-naslovi); color: var(--fg); text-wrap: balance; }
.h-p { max-width: 65ch; margin-top: 16px; font: 400 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--body); text-wrap: pretty; }
.h-h3 { padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); }
.h-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 15px/1.5 var(--font-tijelo); color: var(--fg); text-decoration: none; white-space: nowrap; }
.h-more span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.h-more:hover span { text-decoration-thickness: 2px; }
.h-arrows { display: flex; gap: 8px; }
.h-arrows[hidden] { display: none; }
.h-arrow {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 4px;
  border: 1px solid var(--mut); background: transparent; color: var(--fg); cursor: pointer;
}
.h-arrow:hover { background: var(--card); }

/* ---------- hero ---------- */
.h-hero { position: relative; z-index: 30; background: #1a120b; }
.h-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.h-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 55% 35%; }
.h-hero-tint, .h-hero-ov, .h-hero-fade { position: absolute; inset: 0; }
.h-hero-tint { background: rgba(200, 120, 50, 0.2); mix-blend-mode: multiply; }
.h-hero-ov { background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.58)); }
.h-hero-fade { background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 64px); }
.h-hero-in { position: relative; padding-top: var(--herop); padding-bottom: var(--herop); color: #fff; }
.h-h1 { font: 600 12px/1.5 var(--font-tijelo); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.h-slogan { margin-top: 24px; font: 400 40px/1.05 var(--font-naslovi); letter-spacing: -0.01em; color: #fff; }
.h-slogan span { display: block; }
.h-slogan em { font-style: normal; color: var(--hot); white-space: nowrap; }
.h-sub { max-width: 620px; margin-top: 24px; font: 400 17px/1.5 var(--font-tijelo); color: #fff; text-wrap: pretty; }
.h-credit { position: absolute; right: var(--pad); bottom: 12px; font: 400 13px/1.5 var(--font-tijelo); color: #fff; }
.h-credit a { color: #fff; }

/* tražilica */
.h-bar {
  position: relative; z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: 100%; min-height: 64px; margin-top: 32px; padding: 8px; border-radius: 4px; background: #fff; color: #111;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}
.h-koga { min-width: 0; }
.h-koga > summary { list-style: none; }
.h-koga > summary::-webkit-details-marker { display: none; }
.h-field {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 48px; padding: 0 16px; border: 0; border-radius: 4px;
  background: transparent; color: #111; text-align: left; cursor: pointer;
}
.h-field-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.h-field-l { font: 600 15px/1.4 var(--font-tijelo); color: #111; }
.h-field-s, .h-field select { font: 400 13px/1.4 var(--font-tijelo); color: #6b665f; }
.h-field select { width: 100%; padding: 0; border: 0; background: transparent; appearance: none; cursor: pointer; }
.h-div { flex: 0 0 1px; align-self: stretch; margin: 4px 16px; background: rgba(17, 17, 17, 0.10); }
.h-btn, .s-page .login-submit.crew-btn-1 {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px; height: 48px; padding: 0 24px;
  border-radius: 4px; border: 1px solid var(--hot); color: #111; font: 600 15px/1 var(--font-tijelo); cursor: pointer;
  background-color: var(--hot); background-image: linear-gradient(90deg, var(--hot) 50%, #fff 50%); background-size: 202% 100%; background-position: 0 0;
  transition: background-position 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.h-btn:hover, .s-page .login-submit.crew-btn-1:hover, .s-page .login-submit.crew-btn-1:focus-visible { background-position: 100% 0; color: #111; border-color: var(--hot); }
.h-pop {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(100%, 360px); max-height: min(420px, 60vh); overflow-y: auto;
  padding: 8px 16px 12px; border-radius: 4px; background: #fff; color: #111; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}
.h-pop-hint { padding: 8px 0 4px; font: 400 13px/1.5 var(--font-tijelo); color: #6b665f; }
.h-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; font: 500 15px/1.4 var(--font-tijelo); cursor: pointer; }
.h-opt input { position: absolute; left: 0; width: 20px; height: 20px; margin: 0; opacity: 0; }
.h-box {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px;
  border: 1.5px solid #6b665f; color: #fff;
}
.h-box svg { opacity: 0; }
.h-opt input:checked + .h-box { border-color: #8a7443; background: #8a7443; }
.h-opt input:checked + .h-box svg { opacity: 1; }
.h-opt input:focus-visible + .h-box { outline: 2px solid var(--hot); outline-offset: 2px; }
.h-opt-l { flex: 1; }
.h-opt-n { font: 400 13px/1.4 var(--font-tijelo); color: #6b665f; font-variant-numeric: tabular-nums; }
/* Pretraga po imenu (ZADATAK-72): „Koga tražite?" je summary izbornika zanimanja, ispod njega polje `q` (combobox, js/trazi.js).
   Prijedlozi su isti skočni okvir kao izbornik: profili prvi, zatim zanimanja i namjene odvojeni crtom, bez naslova skupina. */
.h-koga-w { cursor: text; }
.h-koga-w .h-field-l { cursor: pointer; }
.h-q {
  width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #111;
  -webkit-appearance: none; appearance: none; outline: none;
}
.h-q::placeholder { color: #6b665f; opacity: 1; }
.h-q::-webkit-search-cancel-button { display: none; }
/* Fokus polja je crta ispod cijelog okvira (kao .login-input), ne okvir oko samog unosa. */
.crew-home .h-q:focus-visible, .h-q:focus-visible { outline: none; }
.h-koga-w:has(.h-q:focus) { box-shadow: inset 0 -2px 0 var(--hot); }
/* iOS povećava stranicu na polju sitnijem od 16 px. */
@media (pointer: coarse) { .h-q { font-size: 16px; } }
.h-sug { width: min(100%, 420px); margin: 0; padding: 8px 0; list-style: none; }
.h-sug[hidden] { display: none; }
.h-sug li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 16px; cursor: pointer; }
.h-sug li.is-crta { margin-top: 8px; border-top: 1px solid rgba(17, 17, 17, 0.10); padding-top: 16px; }
.h-sug li.is-on, .h-sug li:hover { background: #f3efe8; }
.h-sug-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.h-sug-n { overflow: hidden; font: 600 15px/1.4 var(--font-tijelo); color: #111; white-space: nowrap; text-overflow: ellipsis; }
.h-sug-m { overflow: hidden; font: 400 13px/1.4 var(--font-tijelo); color: #6b665f; white-space: nowrap; text-overflow: ellipsis; }
.h-sug .h-opt-l { font: 500 15px/1.4 var(--font-tijelo); color: #111; }
/* Razmak 4 px oko poveznica je mjesto za fokus (2 px obrub, 2 px razmak, P18) koji overflow inače odreže (crew #65);
   negativna margina drži red na istom mjestu. */
.h-cesto {
  display: flex; align-items: center; gap: 8px; margin: 14px -2px -2px; padding: 4px; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  font: 400 14px/1.5 var(--font-tijelo); color: #fff;
}
.h-cesto > * { flex: 0 0 auto; }
.h-cesto a {
  display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.h-cesto a:hover { text-decoration-thickness: 2px; }

/* traka brojki */
.h-stats { background: var(--bg); border-bottom: 1px solid var(--line); }
.h-stats-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; align-items: center; min-height: 112px; padding: 24px 0; }
.h-stats-in > div:first-child { grid-column: 1 / -1; }
.h-stat-n { font: 400 32px/1.15 var(--font-naslovi); color: var(--fg); font-variant-numeric: lining-nums; }
.h-stat-l { margin-top: 4px; font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }

/* pločice namjena i tvrtki */
.h-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.h-tiles-3 { grid-template-columns: 1fr; }
.h-tiles > li { display: flex; min-width: 0; }
.h-tile {
  display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 4px;
  background: var(--card); color: var(--fg); text-decoration: none; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.h-tile:hover { transform: translateY(-4px); }
.h-tile-m { position: relative; display: block; overflow: hidden; background: var(--warm); }
.h-tile-m img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.h-tile-b { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 16px; }
.h-tile-t { font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); text-wrap: balance; }
.h-tile-s { font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }
.h-tiles-5 > li:last-child:nth-child(odd) { grid-column: span 2; }

/* koga tražite */
.h-occ { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
.h-occ-g { min-width: 0; }
.h-occ-i {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 0;
  border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none;
}
.h-occ-i:hover .h-occ-l { text-decoration: underline; text-underline-offset: 3px; }
.h-occ-l { font: 500 15px/1.4 var(--font-tijelo); }
.h-occ-n { font: 400 14px/1.4 var(--font-tijelo); color: var(--mut); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* redovi kartica */
.h-row { display: flex; gap: 16px; margin-top: 32px; padding-bottom: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.h-row::-webkit-scrollbar { display: none; }
.h-row-i { display: flex; flex: 0 0 84%; min-width: 0; max-width: 84%; scroll-snap-align: start; }
.vk {
  display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 4px;
  background: var(--card); color: var(--fg); text-decoration: none; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vk:hover { transform: translateY(-4px); }
.vk-media { position: relative; display: block; flex: 0 0 auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--warm); }
.vk-photos { position: absolute; inset: 0; display: grid; gap: 2px; }
.vk-p1 { grid-template: 1fr / 1fr; }
.vk-p2 { grid-template: 1fr / 1fr 1fr; }
.vk-p3, .vk-p4 { grid-template: 1fr 1fr / 1fr 1fr; }
.vk-p3 img:first-child { grid-row: 1 / 3; }
.vk-photos img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: none; object-fit: cover; }
.vk-init { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 48px/1 var(--font-naslovi); color: var(--mut); }
.vk-badge {
  position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 8px;
  border-radius: 4px; background: var(--card); color: var(--fg); font: 600 13px/1.4 var(--font-tijelo);
}
.vk-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 24px; }
.vk-name { min-height: 52px; font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); text-wrap: balance; }
.vk-role { margin-top: 8px; font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }
.vk-city { font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }
.vk-det { margin-top: 12px; font: 400 14px/1.5 var(--font-tijelo); color: var(--body); }
.vk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.vk-icons { display: flex; gap: 4px; padding-top: 16px; }
.vk-ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; color: var(--mut); }
.vk-ic.is-cur { color: var(--fg); background: var(--warm); }
.vk-price { flex: 0 0 auto; text-align: right; }
.vk-price-l { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.vk-od { font: 600 13px/1.5 var(--font-tijelo); color: var(--mut); }
.vk-iznos { font: 600 17px/1.3 var(--font-tijelo); color: var(--fg); white-space: nowrap; }
.vk-jed { display: block; font: 400 13px/1.5 var(--font-tijelo); color: var(--mut); }
.vk-upit { font: italic 400 14px/1.5 var(--font-tijelo); color: var(--mut); white-space: nowrap; }

/* karta i gradovi */
.h-gradovi { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; margin-top: 32px; }
/* Karta (crew #41, js/karta.mjs): okvir ima stalan omjer prije i poslije učitavanja MapLibrea, da se raspored ne pomakne. */
.h-karta-kutija { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--warm); }
.h-karta { position: relative; width: 100%; aspect-ratio: 640 / 560; overflow: hidden; font: 400 12px/1.4 var(--font-tijelo); }
.h-karta .maplibregl-ctrl.maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--mut); font-size: 10px; }
.h-karta .maplibregl-ctrl.maplibregl-ctrl-attrib a { color: var(--mut); }
.h-karta .maplibregl-ctrl.maplibregl-ctrl-group { background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.h-karta .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
html[data-theme="dark"] .h-karta .maplibregl-ctrl-icon { filter: invert(1); }
.h-karta .maplibregl-cooperative-gesture-screen { font: 400 15px/1.4 var(--font-tijelo); }
.h-kg { display: block; width: calc(var(--r) * 1.4); height: calc(var(--r) * 1.4); border-radius: 50%; text-decoration: none; cursor: pointer; }
button.h-kg { padding: 0; border: 0; background: none; }
.h-kg.bez-imena .h-kg-l { display: none; }
.h-karta .h-kg-l { text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 6px var(--bg); }
.h-kg-c {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--gold); color: var(--na-zlatnom); font: 600 13px/1 var(--font-tijelo);
}
.h-kg.is-on { outline: 1.5px solid var(--gold); outline-offset: 4.5px; }
.h-kg.is-on .h-kg-c { background: var(--fg); }
.h-kg:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }
.h-kg-l { position: absolute; top: 50%; transform: translateY(-50%); font: 400 16px/1.3 var(--font-naslovi); color: var(--fg); white-space: nowrap; pointer-events: none; }
.h-kg.is-desno .h-kg-l { left: calc(100% + 12px); }
.h-kg.is-lijevo .h-kg-l { right: calc(100% + 12px); }
.h-grad { min-width: 0; }
.h-grad-ime { font: 400 var(--h2) / 1.15 var(--font-naslovi); color: var(--fg); }
.h-grad-n { margin-top: 8px; font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }
.h-grad-a { margin-top: 16px; }
.h-grad-lista { margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.h-grad-red { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.h-grad-l { display: flex; align-items: center; gap: 12px; }
.h-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: var(--line); }
.h-grad-red.is-on .h-dot { background: var(--fg); }
.h-grad-t { font: 400 20px/1.3 var(--font-naslovi); text-underline-offset: 4px; }
.h-grad-red.is-on .h-grad-t { text-decoration: underline; }
.h-grad-c { font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); font-variant-numeric: tabular-nums; }
.h-grad-f { margin-top: 16px; font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }

/* Club, tvrtke, magazin, poziv */
.h-club { flex-direction: column; gap: 12px; color: var(--fg); text-decoration: none; }
.h-club-m { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--warm); }
.h-club-m img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.h-club:hover .h-club-m img { transform: scale(1.03); }
.h-club-t { display: block; }
.h-club-n { display: block; font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); }
.h-club-r { display: block; font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }
.h-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.h-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--mut);
  color: var(--fg); font: 500 15px/1.4 var(--font-tijelo); text-decoration: none; transition: border-color 0.2s;
}
.h-chip:hover { border-color: var(--gold); }
.h-chip span { font: 400 13px/1.4 var(--font-tijelo); color: var(--mut); font-variant-numeric: tabular-nums; }
.h-arts { display: grid; grid-template-columns: 1fr; gap: 48px 16px; margin-top: 32px; }
.h-art { display: flex; flex-direction: column; gap: 12px; color: var(--fg); text-decoration: none; }
.h-art-m { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--warm); }
.h-art-m img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.h-art-t { font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); text-wrap: pretty; }
.h-art-d { font: 400 13px/1.5 var(--font-tijelo); color: var(--mut); }
.h-cta { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end; padding-top: var(--gap); border-top: 1px solid var(--line); }
.h-cta-a { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.h-btn-2, .s-page .login-submit:not(.crew-btn-1), .s-page .crew-btn-2 {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 4px; border: 1px solid var(--fg);
  background: transparent; color: var(--fg); font: 600 15px/1 var(--font-tijelo); text-decoration: none; transition: border-color 0.2s, background-color 0.2s;
}
.h-btn-2:hover, .s-page .login-submit:not(.crew-btn-1):hover, .s-page .crew-btn-2:hover { border-color: var(--hot); background-color: var(--card); color: var(--fg); }
.h-link { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1.5 var(--font-tijelo); color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- tablet (768 do 1199) ---------- */
@media (min-width: 768px) {
  :is(.crew-page-home, .crew-page:has(.s-page)) { --pad: 40px; --gap: 96px; --h2: 48px; --tijelo: 17px; --herop: 96px; }
  .h-h1 { font-size: 13px; }
  .h-slogan { font-size: 80px; }
  .h-sub { font-size: 20px; }
  .h-hero-bg img { object-position: center 18%; }
  .h-hero-ov {
    --stop: calc(max(var(--pad), (100vw - 1280px) / 2) + 900px);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0, rgba(0, 0, 0, 0.58) var(--stop), rgba(0, 0, 0, 0.14) calc(var(--stop) + 360px), rgba(0, 0, 0, 0) 100%);
  }
  .h-bar { flex-direction: row; gap: 8px; max-width: 670px; }
  .h-bar > .h-field { flex: 1 1 0; }
  .h-div { margin: 8px 0; }
  .h-stats-in { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .h-stats-in > div:first-child { grid-column: auto; }
  .h-stats-in > div + div { padding-left: 32px; border-left: 1px solid var(--line); }
  .h-tiles-5, .h-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h-tiles-5 > li:last-child:nth-child(odd) { grid-column: auto; }
  .h-occ { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h-row-i { flex-basis: calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); }
  .h-kg { width: calc(var(--r) * 2); height: calc(var(--r) * 2); }
  .h-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .h-arrows { display: none !important; }
}

/* ---------- računalo (1200 i više) ---------- */
@media (min-width: 1200px) {
  :is(.crew-page-home, .crew-page:has(.s-page)) { --pad: 80px; }
  .h-tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .h-occ { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .h-row-i { flex-basis: calc((100% - 48px) / 4); max-width: calc((100% - 48px) / 4); }
  .h-gradovi { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .h-arts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h-cta { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .h-cta-a { justify-content: flex-end; }
}

/* =====================================================================================================
   Podstranice (issue #34): grad, pretraga, dodaj se, ovo sam ja, moj profil, o Crew-u, ukloni, stranica ne postoji.
   Stranica omotana u .s-page dobiva tokene, mrežu (P1), podnožje i tamnu temu naslovnice (selektori s :has(.s-page)
   gore). Slaže se od klasa naslovnice (.h-wrap, .h-sec, .h-lab, .h-h2, .h-h3, .h-p, .h-occ-i, .h-btn, .h-btn-2, .h-link);
   ovdje su samo H1 podstranice i postojeće klase formi (.login-*, .crew-check, .crew-korak ...) prevedene na isti jezik.
   Profil i popis profila (ProfilPrikaz, KategorijaPopis) su od issuea #37 također .s-page, s klasama .p-* i .l-* na dnu.
   ===================================================================================================== */
.crew-page:has(.s-page) { display: flex; flex-direction: column; min-height: 100vh; }
.crew-main:has(> .s-page) { flex: 1 0 auto; width: 100%; max-width: none; min-height: 0; padding: 0; }
.s-page { padding-top: 48px; color: var(--fg); }
.s-h1 { font: 400 40px/1.05 var(--font-naslovi); letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; overflow-wrap: anywhere; }
.s-page .h-p a:not([class]), .s-page .crew-prose a:not([class]), .s-page .crew-muted a:not([class]), .s-page .crew-box a:not([class]) { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-page .h-p a:not([class]):hover, .s-page .crew-prose a:not([class]):hover, .s-page .crew-box a:not([class]):hover { text-decoration-thickness: 2px; }
.s-page .crew-muted { color: var(--mut); }
.s-page .crew-small { font-size: 14px; line-height: 1.5; }
.s-page strong { font-weight: 600; }
.s-uska { max-width: 760px; }
.s-radnje { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }

/* poruke (ishod forme): tekst u boji teksta, znak je rub; boja ishoda samo na rubu (P8: nema tankog obojenog teksta) */
.s-page .login-error, .s-page .crew-ok {
  margin: 24px 0 0; padding: 12px 16px; border-left: 2px solid var(--err); border-radius: 0 4px 4px 0; background: var(--card);
  font: 500 15px/1.5 var(--font-tijelo); color: var(--fg);
}
.s-page .crew-ok { border-left-color: var(--ok); }

/* polja forme: crta ispod (dizajn), 48 px visine, fokus narančasta crta 2 px (P18) */
.s-page .crew-form { gap: 24px; max-width: 760px; margin-top: 0; }
.s-page .login-field { gap: 4px; }
/* Oznake polja malim slovima (P5, Odluke.md 3. 10.), 14 px jer bez verzala ništa ispod 13 px (P4); verzal ostaje
   samo oznaci odjeljka (h3.login-label na /moj-profil: Galerija, Vjenčanje). */
.s-page .login-label, .s-page .crew-fieldset legend { font: 600 14px/1.5 var(--font-tijelo); color: var(--mut); }
.s-page h3.login-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.s-page .login-input {
  min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--mut); font: 400 16px/1.5 var(--font-tijelo); color: var(--fg);
}
.s-page .login-input:focus, .s-page .login-input:focus-visible { border-bottom-color: var(--hot); box-shadow: 0 1px 0 var(--hot); outline: none; }
.s-page select.login-input {
  height: 48px; padding-right: 28px; appearance: none; cursor: pointer; background: transparent no-repeat right 4px center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b665f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .s-page select.login-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39d94' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.s-page select.login-input option { background: var(--card); color: var(--fg); }
.s-page .upload-opis { padding: 12px 16px; border: 1px solid var(--mut); border-radius: 4px; background: var(--card); font: 400 16px/1.6 var(--font-tijelo); color: var(--fg); }
.s-page .upload-opis:focus, .s-page .upload-opis:focus-visible { border-color: var(--hot); box-shadow: inset 0 0 0 1px var(--hot); outline: none; }
.s-page .crew-hint { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--mut); }
.s-page .crew-fieldset { gap: 12px; }
.s-page .crew-fieldset legend { margin-bottom: 12px; padding: 0; }
.s-page .crew-form > .crew-hint { margin-top: -16px; }

/* kvačice: u skupini su čipovi (gotovi izbori jednim dodirom), sama kvačica je redak od 44 px */
.s-page .crew-checks { gap: 8px; }
.s-page .crew-check { gap: 12px; min-height: 44px; font: 500 15px/1.4 var(--font-tijelo); color: var(--fg); cursor: pointer; }
.s-page .crew-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--fg); cursor: pointer; }
.s-page .crew-checks .crew-check { gap: 8px; padding: 0 16px 0 12px; border: 1px solid var(--mut); border-radius: 999px; transition: border-color 0.2s, background-color 0.2s; }
.s-page .crew-checks .crew-check:hover { border-color: var(--fg); }
.s-page .crew-checks .crew-check:has(input:checked) { border-color: var(--fg); background: var(--card); box-shadow: inset 0 0 0 1px var(--fg); }
.s-page .crew-check:has(input:focus-visible) { outline: 2px solid var(--hot); outline-offset: 2px; }
.s-page .crew-check input:focus-visible { outline: none; }

/* gumbi: .h-btn i .h-btn-2 gore primaju i .login-submit / .crew-btn-2 unutar .s-page (P11, P12) */
.s-page .login-submit, .s-page .crew-btn-2 { margin-top: 0; align-self: flex-start; }
.s-page .login-submit[disabled] { cursor: progress; }
.s-page .crew-dodaj-jos { height: 44px; padding: 0 16px; font-size: 14px; }

/* prazna stanja i 404 */
.s-page .crew-empty { padding-top: 0; padding-bottom: 0; text-align: left; }
.s-page .crew-empty p:not(.h-p) { margin: 0; }
.s-page .crew-empty a { color: var(--fg); }
.s-page header + .crew-empty { margin-top: 32px; }

@media (min-width: 768px) {
  .s-page { padding-top: 64px; }
  .s-h1 { font-size: 56px; }
}
@media (min-width: 1200px) {
  .s-h1 { font-size: 80px; }
}

/* grad: kategorije u stupcima (1 / 2 / 3, P17) koji se pune odozgo prema dolje, pa zadnji red nije jedan usamljeni; popis profila ispod */
.s-kat { column-gap: 32px; margin-top: 32px; border-top: 1px solid var(--line); }
.s-kat > li { min-width: 0; break-inside: avoid; }
.s-kat .h-occ-i { min-height: 48px; }
@media (min-width: 768px) { .s-kat { columns: 2; } }
@media (min-width: 1200px) { .s-kat { columns: 3; } }

/* pretraga: prijedlozi kad upit nema rezultata (crew #62) */
.crew-empty .s-kat-lab { margin-top: 40px; }
.crew-empty .s-prijedlozi { margin-top: 12px; }

/* pretraga: „Prikažite još" ispod grupe */
.s-vise { margin: 24px 0 0; gap: 16px; }
.s-vise .crew-more-n { font-size: 14px; }

/* forme i okviri podstranica (dodaj se, ovo sam ja, moj profil, ukloni) */
.s-sadrzaj { margin-top: 48px; }
.s-okvir {
  display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--card); font: 400 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--body);
}
.s-okvir p { margin: 0; }
.s-okvir .s-radnje { margin-top: 8px; }
.s-okvir .h-h3 { margin-bottom: 8px; }
.s-page .crew-korak { padding-top: 24px; border-top: 1px solid var(--line); }
.s-okvir .crew-korak { display: flex; flex-direction: column; gap: 12px; }
.s-okvir .crew-form { margin-top: 4px; }
@media (min-width: 768px) {
  .s-okvir { padding: 32px; }
}

/* ovo sam ja: načini dokaza kao harmonika; naslov koraka je H3 (P4), znak +/− crta obruba 1,5 px (P13) */
.s-koraci { border-bottom: 1px solid var(--line); }
.s-koraci > .login-error { margin: 0 0 24px; }
.s-koraci .crew-korak { margin: 0; padding: 0; }
.s-koraci .crew-korak > summary {
  position: relative; display: flex; align-items: center; min-height: 64px; margin: 0; padding: 16px 48px 16px 0;
  font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); list-style: none;
}
.s-koraci .crew-korak > summary::-webkit-details-marker { display: none; }
.s-koraci .crew-korak > summary::before, .s-koraci .crew-korak > summary::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 1.5px; background: currentColor; transition: transform 0.2s;
}
.s-koraci .crew-korak > summary::after { transform: rotate(90deg); }
.s-koraci .crew-korak[open] > summary::after { transform: rotate(0deg); }
.s-koraci .crew-korak > summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.s-koraci .crew-korak > :not(summary) { margin-top: 0; }
.s-koraci .crew-korak[open] { padding-bottom: 32px; }
.s-koraci .crew-korak > p { margin: 0 0 16px; max-width: 65ch; font: 400 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--body); }
.s-koraci .crew-korak > p.crew-muted { color: var(--mut); }
.s-koraci .crew-korak > .login-error, .s-koraci .crew-korak > .crew-ok { margin: 0 0 16px; }
.s-page code { padding: 2px 6px; border-radius: 4px; background: var(--warm); font: 400 15px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg); word-break: break-all; }
@media (min-width: 768px) {
  .s-koraci .crew-korak > summary { font-size: 24px; }
}

/* moj profil: odjeljci forme s naslovom H3 i crtom, ispunjenost kao tanka traka, Spremi u ljepljivoj traci */
.s-page .h-head .s-h1 { flex: 1 1 auto; }
.s-moj > .login-error:first-child, .s-moj > .crew-ok:first-child { margin-top: 0; }
.s-page .crew-progress { height: 4px; max-width: none; margin-top: 32px; background: var(--line); }
.s-page .crew-progress span { background: var(--fg); }
.s-page .crew-progress-n { margin: 12px 0 0; font: 400 15px/1.5 var(--font-tijelo); color: var(--fg); }
.s-moj > .crew-box, .s-moj .crew-form-wide > .crew-box { display: flex; flex-direction: column; gap: 24px; margin: 48px 0 0; }
.s-moj .crew-form-wide { margin-top: 0; max-width: none; gap: 0; }
.s-moj .crew-box[hidden] { display: none; }
.s-moj .crew-box > p { margin: 0; font: 400 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--body); }
.s-moj .crew-box > p.crew-muted, .s-moj .crew-box > p.crew-small { color: var(--mut); }
.s-moj .crew-box > p.crew-small { font-size: 14px; }
.s-moj h3.login-label { margin: 8px 0 0; }
.s-moj .crew-upiti { max-width: none; margin: 0; border-bottom: 1px solid var(--line); }
.s-moj .crew-upiti li { padding: 16px 0; }
.s-moj .crew-upiti li:first-child { border-top: 0; }
.s-moj .crew-upiti p { margin: 0; font: 400 15px/1.6 var(--font-tijelo); color: var(--body); }
.s-moj .crew-upiti p + p { margin-top: 4px; }
/* /obavijesti i „Uključi obavijesti" (crew #96 korak 3): retci kao upiti na Mojem profilu, nepročitani s oznakom „Novo". */
.crew-obavijesti { list-style: none; padding: 0; margin: 0 0 32px; border-bottom: 1px solid var(--line); }
.crew-obavijesti li { padding: 16px 0; border-top: 1px solid var(--line); }
.crew-obavijesti p { margin: 0; font: 400 15px/1.6 var(--font-tijelo); color: var(--body); }
.crew-obavijesti p + p { margin-top: 4px; }
.crew-obavijesti a { color: var(--fg); }
.crew-obavijest-nova p:first-child { color: var(--fg); font-weight: 600; }
.crew-obavijest-oznaka { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 4px; background: var(--hot); color: #fff; font: 600 12px/20px var(--font-tijelo); vertical-align: 1px; }
.crew-push[hidden] { display: none; }
.crew-push .s-radnje { margin-top: 16px; }
.crew-push-stanje:empty { display: none; }
/* Kartica „Instaliraj Crew" (crew #96 korak 4): × u kutu, koraci za iPhone kao numerirani popis. */
.crew-aplikacija { position: relative; }
.crew-aplikacija[hidden], .crew-aplikacija [hidden] { display: none; }
.crew-aplikacija .h-h3 { padding-right: 40px; }
.crew-aplikacija-zatvori { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--mut); font: 400 24px/32px var(--font-tijelo); cursor: pointer; }
.crew-aplikacija-zatvori:hover, .crew-aplikacija-zatvori:focus-visible { color: var(--fg); background: var(--line); }
.crew-aplikacija-koraci { margin: 12px 0 0; padding-left: 20px; font: 400 15px/1.6 var(--font-tijelo); color: var(--body); }
.crew-aplikacija .s-radnje { margin-top: 16px; }
.s-moj .crew-form-row { gap: 24px; }
.s-moj .crew-stavke-form { gap: 16px; margin: 0; }
.s-moj .crew-stavka-head { font: 600 12px/1.5 var(--font-tijelo); letter-spacing: 0.12em; color: var(--mut); }
.s-moj .crew-stavka-head, .s-moj .crew-stavka-row { gap: 8px 16px; }
.s-moj .crew-stavka-row { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.s-moj .crew-ugaseni { margin: 0; }
.s-moj .crew-ugaseni li { padding: 12px 0; }
.s-moj .crew-ugaseno { font-size: 12px; letter-spacing: 0.12em; border-color: var(--mut); border-radius: 4px; padding: 2px 8px; }
.s-spremi {
  position: sticky; bottom: 0; z-index: 10; margin-top: 48px; padding: 16px 0; border-top: 1px solid var(--line); background: var(--bg);
}
/* Slika profila i zaglavlje (crew #32): pregled trenutne slike, polje za povlačenje kao Club /objavi, gumbi u redu. */
.s-slika-red { display: flex; align-items: center; gap: 16px; }
.s-slika-red p { margin: 0; font: 400 15px/1.6 var(--font-tijelo); color: var(--mut); }
.p-av.s-slika-av { margin-top: 0; width: 96px; height: 96px; border: 1px solid var(--line); font-size: 32px; }
.s-zag-pregled { overflow: hidden; aspect-ratio: 24 / 7; border-radius: 8px; background: #1a120b; }
.s-zag-pregled img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.s-ucitaj { display: flex; flex-direction: column; gap: 16px; }
.s-slika-gumbi { display: flex; flex-wrap: wrap; gap: 12px; }
.s-slika-gumbi .login-submit { margin-top: 0; }
.dropzone {
  position: relative; padding: 1.6rem 1rem; text-align: center; border: 1.5px dashed var(--line-strong); border-radius: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone.is-drag, .dropzone:hover { border-color: var(--gold); background: rgba(138, 116, 67, 0.04); }
/* Prozirni pravi input preko cijelog okvira hvata klik i ispuštanje bez JS-a; s odabranom fotkom pušta klik na ×. */
.dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone.has-file .dropzone-input { pointer-events: none; }
.dropzone-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; color: var(--mut); pointer-events: none; }
.dropzone-icon { width: 30px; height: 30px; opacity: 0.6; }
.dropzone-title { font: 400 15px/1.5 var(--font-tijelo); color: var(--fg); }
.dropzone-link { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.dropzone-preview { display: flex; align-items: center; gap: 0.75rem; text-align: left; }
.dropzone-preview[hidden], .dropzone-empty[hidden] { display: none; }
.dropzone-thumb { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--warm); }
.dropzone-filename { flex: 1; min-width: 0; font: 400 14px/1.5 var(--font-tijelo); color: var(--fg); word-break: break-all; }
.dropzone-clear {
  flex: none; width: 28px; height: 28px; border: 0.5px solid var(--line-strong); border-radius: 50%; background: transparent;
  font-size: 1.15rem; line-height: 1; color: var(--fg); cursor: pointer;
}
.dropzone-clear:hover { background: var(--line); }
.s-page .login-submit.crew-salje:not(.crew-btn-1) { opacity: 0.7; cursor: progress; }

/* o Crew-u: odjeljak je red, naslov lijevo (H2 naslovnice), tekst desno najviše 65 znakova (P6) */
.s-split { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.s-split:last-child { border-bottom: 1px solid var(--line); }
.s-split .h-h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.3; }
.s-page .crew-prose .h-btn-2 { color: var(--fg); }
.s-split p { max-width: 65ch; margin: 0; font: 400 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--body); text-wrap: pretty; }
.s-split p + p { margin-top: 16px; }
.s-split > .h-h2 ~ * { grid-column: 1; }
@media (min-width: 1200px) {
  .s-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 32px; padding: 48px 0; }
  .s-split .h-h2 { grid-row: 1 / span 10; margin: 0; font-size: 30px; }
  .s-split > .h-h2 ~ * { grid-column: 2; }
}

/* grad: broj gradova u Crewu ispod podnaslova, oznaka „Kategorije" iznad redaka (odobreno 26. 9., issue #34) */
.s-page .s-gradova { margin-top: 4px; color: var(--mut); }
.s-kat-lab { margin-top: 32px; }
.s-kat-lab + .s-kat { margin-top: 12px; }

/* pretraga: broj profila uz naslov grupe, na istoj osnovnoj crti (odobreno 26. 9., issue #34) */
.s-grupa-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; }
.s-grupa-n .h-h2 { margin-top: 0; }
.s-n { font: 500 15px/1.5 var(--font-tijelo); color: var(--mut); font-variant-numeric: tabular-nums; }

/* dodaj se: koraci forme, oznaka koraka iznad naslova H3 (odobreno 26. 9., issue #34) */
.s-korak { display: flex; flex-direction: column; gap: 12px; }
.s-korak + .s-korak { margin-top: 24px; }
.s-korak > p { margin: 0; }
.s-korak > .h-h3 { margin: 0 0 4px; }
.s-korak > .crew-checks { margin-top: 4px; }

/* moj profil: uvod ispod H1 i oznaka „Profil je ispunjen" iznad trake (odobreno 26. 9., issue #34) */
.s-page .h-head-t > .h-p { margin-top: 16px; }
.s-page .s-ispunjen { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; font-weight: 500; }
.s-page .s-ispunjen + .crew-progress { margin-top: 12px; }

/* stranica ne postoji: sitna oznaka „404" iznad naslova (odobreno 26. 9., issue #34) */
.s-page .h-lab + .s-h1 { margin-top: 8px; }

/* =====================================================================================================
   Profil (issue #37, docs/dizajn-2026-09-26/Profil.dc.html): zaglavlje s avatarom, lijevo galerija ili ploča „Ovo sam ja"
   i cijene po namjeni, desno kontakt i forma upita (na računalu prilijepljeno, stupac 400 px). Kartice kao na naslovnici:
   bijela ploha, obrub 1 px, zaobljenje 4 px (P9, P12); oznake polja 14 px, H3 24 / 20 px (P4).
   ===================================================================================================== */
.p-prof { --field: rgba(17, 17, 17, 0.45); }
html[data-theme="dark"] .p-prof { --field: rgba(242, 239, 233, 0.45); }
/* Zaglavlje (crew #32): dok vlasnik ne učita svoje, hero fotka naslovnice s istim zatamnjenjem (.h-hero-*) i potpisom;
   visina 240 / 320 / 420 px i avatar koji ga preklapa pola svoje visine (dizajn). */
.s-page.p-prof { padding-top: 0; }
.p-zag { position: relative; height: 240px; overflow: hidden; background: #1a120b; }
/* Zadana hero fotka (Odluke.md 28. 9.): zatamnjenje ispod teksta naslovnice (0,58 do 0,72) na traci bez teksta guta fotku.
   Ovdje je samo potpis: lakše zatamnjenje, rub od 64 px ispod potpisa ostaje; izrez drži glavu modela i fotoaparate. */
.p-zag-hero .h-hero-ov { background: rgba(0, 0, 0, 0.15); }
.p-head { display: flex; flex-direction: column; gap: 16px; }
.p-av {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 72px; height: 72px;
  margin-top: -36px; overflow: hidden; border: 4px solid var(--bg); border-radius: var(--avatar-radius); background: var(--card);
  font: 400 24px/1 var(--font-naslovi); color: var(--fg);
}
.p-av img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.p-h1 { margin-top: 8px; }
.p-h1 .crew-verified { vertical-align: 0.1em; }
.p-meta { display: flex; flex-direction: column; gap: 4px; }
.p-uloga { font: 500 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--fg); }
.p-crte { font: 400 15px/1.6 var(--font-tijelo); color: var(--mut); }
.p-skok { display: flex; margin-top: 8px; }
.p-skok .h-btn-2 { justify-content: center; width: 100%; }
.p-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: start; margin-top: var(--gap); }
.p-main { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.p-sec { display: flex; flex-direction: column; gap: 24px; }
.p-h2 { margin-top: 0; }
.p-h3 { font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); text-wrap: balance; }
.p-h3 a, .p-upit a { color: inherit; text-decoration: none; }
.p-h3 a:hover, .p-upit a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.p-gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-gal li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--warm); }
.p-gal a { position: absolute; inset: 0; display: block; }
.p-gal img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.p-sec > .h-more { align-self: flex-start; }
.p-ploca { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px; border-radius: 4px; background: var(--warm); }
.p-ploca p { max-width: 60ch; font: 400 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--fg); text-wrap: pretty; }
.p-opis { max-width: 65ch; white-space: pre-line; font: 400 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--body); }
.p-blok, .p-kartica { display: flex; flex-direction: column; gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
.p-kartica { gap: 16px; }
.p-forma { gap: 24px; }
.p-blok-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.p-cijena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.p-cijena-s { font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); white-space: nowrap; }
.p-cijena-i { font: 600 24px/1.3 var(--font-tijelo); color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-cijena-u, .p-upit-c { font: italic 400 14px/1.5 var(--font-tijelo); color: var(--mut); white-space: nowrap; }
.p-paketi { border-top: 1px solid var(--line); }
.p-paketi li { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.p-pk-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p-pk-n, .p-pk-c { font: 600 var(--tijelo) / 1.5 var(--font-tijelo); color: var(--fg); }
.p-pk-d { font: 400 15px/1.6 var(--font-tijelo); color: var(--body); text-wrap: pretty; }
/* Cijena najviše 45 % retka (s razmakom), smije se prelomiti; dug tekst cijene inače stisne naziv i opis (crew #44).
   Ne skuplja se (flex-shrink 0): kratka cijena ostaje u jednom retku, „1.250 €" se više ne lomi pred €; dug tekst lomi max-width. */
.p-pk-c { flex: 0 0 auto; max-width: calc(45% - 24px); text-align: right; text-wrap: balance; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .p-paketi li { flex-direction: column; align-items: stretch; gap: 4px; }
  .p-pk-c { max-width: none; text-align: left; }
}
.p-nap { max-width: 65ch; font: 400 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--body); }
.p-vrste { display: flex; flex-direction: column; gap: 12px; }
.p-vrste-l, .p-polje > span { font: 500 14px/1.5 var(--font-tijelo); color: var(--mut); }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
  font: 500 14px/1.5 var(--font-tijelo); color: var(--fg); text-decoration: none;
}
a.p-chip:hover { border-color: var(--fg); }
.p-prov { font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }
.p-prov a { color: var(--mut); text-decoration: underline; text-underline-offset: 3px; }
.p-upit { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; padding: 0 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
/* Oprema s Geara (ZADATAK-156): isti popis kao „na upit", redak je poveznica na proizvod; sličica 56 px, press slika cijela (contain). */
.p-opr { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; padding: 0 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
.p-opr li { border-bottom: 1px solid var(--line); }
.p-opr li:last-child { border-bottom: 0; }
.p-opr a { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 8px 0; font: 500 15px/1.4 var(--font-tijelo); color: var(--fg); text-decoration: none; }
.p-opr a:hover .p-opr-n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.p-opr-sl { flex: 0 0 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #fff; overflow: hidden; }
.p-opr-sl img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.p-opr-n { min-width: 0; overflow-wrap: anywhere; }
.p-upit li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; border-bottom: 1px solid var(--line); font: 500 15px/1.4 var(--font-tijelo); color: var(--fg); }
.p-upit li:last-child { border-bottom: 0; }
.p-aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; scroll-margin-top: 24px; }
.p-kontakt { border-top: 1px solid var(--line); }
.p-kontakt li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; border-bottom: 1px solid var(--line); font: 500 15px/1.5 var(--font-tijelo); color: var(--fg); }
.p-kontakt a { min-width: 0; font-weight: 400; color: var(--fg); text-align: right; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Google karta s ocjenom ispod kontakata (crew #61). */
.p-google > .p-sitno { margin-top: -16px; }
.p-google iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 4px; background: var(--line); }
.p-polje { display: flex; flex-direction: column; gap: 4px; }
.p-polje input, .p-polje textarea {
  width: 100%; height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; background: transparent;
  font: 400 17px/1.5 var(--font-tijelo); color: var(--fg);
}
.p-polje textarea { height: auto; padding: 12px 0; line-height: 1.6; resize: vertical; }
/* Datum: iOS Safari inače crta sivu pilulu centriranog teksta koja se prazna skupi; ovako je linija kao ostala polja. */
.p-polje input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
.p-polje input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.p-polje input:focus, .p-polje textarea:focus { outline: none; border-bottom: 2px solid var(--hot); }
.p-polje ::placeholder { color: var(--mut); opacity: 1; }
/* Obavezna polja upita (crew #49): zvjezdica vidljiva, „(obavezno)" samo za čitače ekrana. */
.p-obav { margin-left: 2px; }
.p-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.p-forma .login-submit { align-self: stretch; }
.p-forma .login-submit.crew-salje { opacity: 0.7; }
.p-forma .login-error { margin: 0; }
.p-poslan { font: 500 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--fg); }
.p-sitno { font-size: 14px; line-height: 1.5; color: var(--mut); text-wrap: pretty; }
.p-foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }
@media (min-width: 768px) {
  .p-zag { height: 320px; }
  .p-zag-hero .h-hero-bg img { object-position: center 14%; }
  .p-av { width: 96px; height: 96px; margin-top: -48px; font-size: 32px; }
  .p-h3 { font-size: 24px; }
  .p-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-ploca { padding: 48px; }
  .p-blok, .p-kartica { padding: 32px; }
  .p-upit { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 32px; }
  .p-upit li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .p-opr { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 32px; }
  .p-opr li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .p-skok .h-btn-2 { width: auto; }
}
@media (min-width: 1200px) {
  .p-zag { height: 420px; }
  .p-skok { display: none; }
  .p-cols { grid-template-columns: minmax(0, 1fr) 400px; }
  .p-aside { position: sticky; top: 24px; }
}

/* =====================================================================================================
   Popis profila (issue #37, docs/dizajn-2026-09-26/Popis profila.dc.html): H1 i rečenica s brojem, čipovi „Vrsta
   fotografiranja", filtri lijevo 280 px (ispod 1200 px iza gumba „Filtri"), široke kartice sa slikom pa mreža kartica
   bez slike (1 / 2 / 3 stupca, zadnja usamljena preko cijelog reda, dvije u zadnjem redu od tri po pola, P17), stranice po 15.
   ===================================================================================================== */
.l-pop { --field: rgba(17, 17, 17, 0.45); }
html[data-theme="dark"] .l-pop { --field: rgba(242, 239, 233, 0.45); }
.l-putokaz { margin: 0 0 16px; font: 400 14px/1.5 var(--font-tijelo); }
.l-putokaz a + a { margin-left: 8px; }
.s-susjedi { margin-top: 24px; }
.s-susjedi .l-putokaz, .p-veze .l-putokaz { margin: 16px 0 0; }
.p-veze { margin-top: 24px; }
.l-h1 { max-width: 14em; }
.l-sub { margin-top: 24px; }
.l-lab { font: 500 14px/1.5 var(--font-tijelo); color: var(--mut); }
.l-vrste { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; }
.l-vrste-r { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; overflow-x: auto; scrollbar-width: none; }
.l-vrste-r::-webkit-scrollbar { display: none; }
.l-vrste-r > li { flex: 0 0 auto; }
/* Na mobitelu i čipovi zanimanja stoje u jednom redu koji klizi (crew #68 t. 1), da prvi profil bude na prvom ekranu.
   Oba reda na desnom rubu blijede, da se vidi da ih ima još; od 768 px se prelamaju kao prije. */
.l-zan .h-chips { flex-wrap: nowrap; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; overflow-x: auto; scrollbar-width: none; }
.l-zan .h-chips::-webkit-scrollbar { display: none; }
.l-zan .h-chips > li { flex: 0 0 auto; }
.l-zan .h-chip { white-space: nowrap; }
.l-vrste-r, .l-zan .h-chips {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
.l-vr {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
  font: 500 15px/1 var(--font-tijelo); color: var(--fg); text-decoration: none; white-space: nowrap;
}
.l-vr:hover { border-color: var(--fg); }
/* Red zanimanja na stranici namjene (crew #38): čipovi s naslovnice (.h-chip), uključen kao odabrana podvrsta (.l-vr.is-on). */
.l-zan { margin-top: 32px; }
.l-zan .h-chips { margin-top: 0; }
.l-zan .h-chip.is-on { border: 1.5px solid var(--fg); background: var(--card); }
.l-zan .h-chip[aria-disabled="true"]:hover { border-color: var(--fg); }
.l-vr.is-on { border: 1.5px solid var(--fg); background: var(--card); }
.l-vr-n { font: 400 14px/1 var(--font-tijelo); color: var(--mut); font-variant-numeric: tabular-nums; }
.l-lay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 48px; }
.l-ft { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.l-filtri { display: none; flex-direction: column; gap: 24px; min-width: 0; padding: 24px; border-radius: 4px; background: var(--warm); }
.l-lay:has(.l-ft:checked) .l-filtri { display: flex; }
.l-ft:focus-visible ~ .l-res .l-ft-b { outline: 2px solid var(--hot); outline-offset: 2px; }
.l-polje { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.l-polje legend { margin-bottom: 4px; padding: 0; }
.l-polje select {
  width: 100%; height: 48px; padding: 0 28px 0 0; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; appearance: none; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b665f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center / 16px;
  font: 400 16px var(--font-tijelo); color: var(--fg);
}
html[data-theme="dark"] .l-polje select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39d94' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.l-polje select option { background: var(--card); color: var(--fg); }
.l-polje select:focus { outline: none; border-bottom: 2px solid var(--hot); }
.l-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 400 15px/1.5 var(--font-tijelo); color: var(--fg); cursor: pointer; }
.l-opt input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--fg); cursor: pointer; }
.l-filtri .h-btn { align-self: stretch; }
.l-res { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.l-res-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.l-raspon { font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); font-variant-numeric: tabular-nums; }
.l-ft-b { gap: 8px; padding: 0 20px; cursor: pointer; }
.l-kf-lista, .l-mreza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.l-mreza { grid-auto-rows: 1fr; }
.l-kf-lista > li, .l-mreza > li { display: flex; min-width: 0; }
.l-kf, .l-k {
  display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px;
  background: var(--card); color: var(--fg); text-decoration: none; transition: border-color 0.2s;
}
.l-kf:hover, .l-k:hover { border-color: var(--fg); color: var(--fg); }
/* min-height: 0: bez njega kvadratna slika rastegne okvir iznad 4:3 (min-height: auto uz aspect-ratio pusti sadržaj).
   Okvir reže, a jedna slika leži u njemu kao .h-art-m img (crew #32, 27. 9.): slika se nije smjela crtati preko teksta kartice. */
.l-kf-m { position: relative; inset: auto; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: var(--warm); }
.l-kf-m.vk-p1 img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.l-kf-b { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; }
.l-k { gap: 16px; padding: 24px; }
.l-top { display: flex; align-items: flex-start; gap: 16px; }
.l-av {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; overflow: hidden; border-radius: var(--avatar-radius);
  background: var(--warm); font: 400 17px/1 var(--font-naslovi); color: var(--fg);
}
.l-av img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.l-ime { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.l-n { font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); text-wrap: balance; }
.l-kf .l-n { font-size: 20px; }
.l-meta { font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }
.l-cij { flex: 0 0 auto; text-align: right; }
.l-cij-r { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.l-od { font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); }
.l-izn { font: 600 17px/1.3 var(--font-tijelo); color: var(--fg); font-variant-numeric: tabular-nums; }
.l-jed { display: block; font: 400 13px/1.5 var(--font-tijelo); color: var(--mut); }
.l-upit { font: italic 400 14px/1.5 var(--font-tijelo); color: var(--mut); white-space: nowrap; }
.l-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.l-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  font: 500 13px/1.5 var(--font-tijelo); color: var(--fg);
}
.l-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 49px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.l-k .l-foot { gap: 8px; }
.l-ost { min-width: 0; font: 400 14px/1.5 var(--font-tijelo); color: var(--mut); text-wrap: pretty; }
.l-prazno { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 32px; border-radius: 4px; background: var(--warm); }
.l-prazno p { font: 400 var(--tijelo) / 1.6 var(--font-tijelo); color: var(--fg); }
.l-str { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.l-str-a, .l-str-n {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 4px;
  font: 600 15px/1 var(--font-tijelo); color: var(--fg); text-decoration: none; font-variant-numeric: tabular-nums;
}
.l-str-a:hover, .l-str-n:hover { border-color: var(--fg); }
.l-str-n.is-on { border: 1.5px solid var(--fg); }
.l-str-a.is-off { color: var(--mut); }
.l-str-a.is-off:hover { border-color: var(--line); }
.l-str-x { width: 24px; text-align: center; color: var(--mut); }
/* Traka „obično treba i" ispod rezultata stranice para (issue #18 t. 5): čipovi naslovnice, naslov H3 (P4), meka crta iznad (P9). */
.l-obicno { padding-top: 24px; border-top: 1px solid var(--line); }
.l-obicno-n { font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); text-wrap: balance; }
@media (min-width: 768px) { .l-obicno-n { font-size: 24px; } }
/* Česta pitanja ispod kartica (crew #76 t. 2): kao traka iznad, pitanje Manrope 600, odgovor tijelo (P4, P6, P7). */
.l-faq { padding-top: 24px; border-top: 1px solid var(--line); }
.l-faq-p { margin: 24px 0 8px; font: 600 17px/1.4 var(--font-tijelo); color: var(--fg); }
.l-faq-o { max-width: 65ch; margin: 0; }
@media (min-width: 768px) {
  .l-vrste-r { flex-wrap: wrap; margin: 0; padding: 0 0 4px; overflow: visible; }
  .l-zan .h-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .l-vrste-r, .l-zan .h-chips { -webkit-mask-image: none; mask-image: none; }
  .l-kf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .l-kf-b, .l-k { padding: 32px; }
  .l-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-mreza > li:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .l-lay { grid-template-columns: 280px minmax(0, 1fr); gap: 64px; }
  .l-filtri, .l-lay:has(.l-ft:checked) .l-filtri { display: flex; position: sticky; top: 24px; padding: 0; background: transparent; }
  .l-ft-b { display: none; }
  /* Tri kartice u retku na mreži od šest stupaca: zadnji redak s jednom karticom je preko cijelog reda, s dvije su obje
     po pola (crew #67 t. 3, P17), pa nijedan redak nema prazno mjesto. */
  .l-mreza { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .l-mreza > li, .l-mreza > li:last-child:nth-child(odd):not(:first-child) { grid-column: span 2; }
  .l-mreza > li:nth-last-child(2):nth-child(3n+1), .l-mreza > li:last-child:nth-child(3n+2):not(:first-child) { grid-column: span 3; }
  .l-mreza > li:last-child:nth-child(3n+1):not(:first-child) { grid-column: 1 / -1; }
  /* Široka kartica niža (crew #67 t. 2, Odluke.md 4. 10.): slika 40 % kartice (najviše 400 px) i visoka 248 px umjesto 4:3
     polovice, pa između imena i ikona nema ~120 px praznog; kad tijelo treba više mjesta, slika se izdužuje s njim. */
  .l-kf-lista .l-kf { grid-template-columns: minmax(0, min(40%, 400px)) minmax(0, 1fr); }
  .l-kf-lista .l-kf-m { aspect-ratio: auto; min-height: 248px; }
  .l-kf-lista .srce-kf { right: auto; left: calc(min(40%, 400px) - 56px); }
}
.l-cij-k { margin-top: 4px; text-align: left; }
.l-cij-k .l-cij-r { justify-content: flex-start; }

/* o Crew-u: odobreni tekst (Odluke.md 26. 9., issue #37) je jedan odlomak bez naslova, pa red nema lijevi stupac */
@media (min-width: 1200px) { .s-split.s-o { grid-template-columns: minmax(0, 1fr); } }

/* Jednake kartice (Odluke.md 27. 9., crew #32): slika je uvijek u okviru stalnog omjera, izrezana da ga ispuni,
   pa ni slika s weba (og:image, bilo koji omjer) ni fotke s Cluba ne mijenjaju visinu kartice. Tekst ispod slike
   ima stalan broj redaka: ime najviše 2 i redak „zanimanje · grad" najviše 3 (crew #64), opis 2, čipovi jedan red (čip koji ne stane ide u drugi red, a taj se ne vidi),
   da duži tekst ne gura karticu. */
.l-kf-m img, .vk-photos img, .crew-thumb img, .fotograf-photos img, .l-av img, .p-av img {
  object-fit: cover; object-position: center;
}
/* Logo s weba (crew #67, js/kartice.js) se ne reže: cijeli u istom okviru, podloga boje njegova ruba. */
.vk-photos img.je-logo { object-fit: contain; }
/* Ime i redak „zanimanje · grad" (i grad na velikoj kartici) ne režu se u jednom retku (crew #64, P14, Odluke.md 3. 10.):
   prelamaju se, ime najviše dva retka, „zanimanje · grad" najviše tri (kad ne stane u dva, npr. „Video postprodukcija ·
   Velika Gorica" na 1440, ide u treći redak umjesto „…", Odluke.md 3. 10.). */
.l-n, .vk-name, .fotograf-name, .l-meta, .vk-city {
  display: -webkit-box; min-width: 0; max-width: 100%; overflow: hidden; overflow-wrap: break-word;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.l-meta, .vk-city { -webkit-line-clamp: 3; line-clamp: 3; }
.vk-name { min-height: 0; }
.vk-role { min-height: 3em; }
.vk-role, .l-ost {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
/* Opis kartice popisa uvijek zauzima svoja dva retka, i kad ga nema (PopisKartica ga uvijek ispisuje). */
.l-ost { flex: 1 1 100%; min-height: 3em; }
.l-chips { min-height: 32px; max-height: 32px; overflow: hidden; }

/* Slični profili na dnu profila (ZADATAK-72 B): kartica popisa (PopisKartica) u mreži, 2 u retku na mobitelu, 4 na računalu.
   Široka kartica ovdje ne ide u dva stupca (slika gore, tijelo ispod), a ime i cijena stoje jedno ispod drugog. */
.p-slicni { margin-top: 64px; }
.p-slicni-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.p-slicni-l > li { display: flex; min-width: 0; }
.p-slicni .l-kf { display: flex; flex-direction: column; }
.p-slicni .l-kf-b, .p-slicni .l-k { gap: 12px; padding: 12px; }
.p-slicni .l-top { flex-direction: column; gap: 8px; }
.p-slicni .l-av { width: 40px; height: 40px; }
.p-slicni .l-n, .p-slicni .l-kf .l-n { font-size: 17px; }
.p-slicni .l-meta { font-size: 13px; }
.p-slicni .l-cij { text-align: left; }
.p-slicni .l-cij-r { justify-content: flex-start; }
.p-slicni .l-foot { min-height: 0; padding-top: 12px; }
.p-slicni .l-ost { font-size: 13px; }
@media (min-width: 1024px) {
  .p-slicni-l { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .p-slicni .l-kf-b, .p-slicni .l-k { padding: 16px; }
}

/* Moj popis (ZADATAK-75 A, crew #50): srce na kartici i profilu, traka na dnu. Srce je gumb pokraj poveznice kartice,
   u kutu roditelja (li); na kartici sa slikom stoji u kutu slike (na računalu je slika lijeva polovica kartice). */
.srce {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; background: var(--card); color: var(--fg); cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.srce:hover { border-color: var(--fg); }
.srce:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.srce[aria-pressed="true"] { border-color: var(--hot); color: var(--hot); }
.srce[aria-pressed="true"] svg { fill: currentColor; }
.srce[hidden], .popis-traka[hidden] { display: none; }
.l-kf-lista > li, .l-mreza > li, .p-slicni-l > li { position: relative; }
.srce-kf, .srce-k { position: absolute; top: 12px; right: 12px; z-index: 1; }
.l-k:has(+ .srce) .l-ime { padding-right: 36px; }
.p-slicni .l-k:has(+ .srce) .l-top { padding-right: 40px; }
@media (min-width: 768px) {
  .l-kf-lista .srce-kf { right: calc(50% + 12px); }
}
.p-head { position: relative; }
.srce-prof { position: absolute; top: 12px; right: 0; }
.p-head:has(.srce-prof) .p-h1 { padding-right: 56px; }
/* Traka: fiksna na dnu, iznad donjeg ruba iPhonea (safe-area); js/popis.js tijelu daje razmak visine trake (--popis-h),
   pa ni podnožje ni gumb na dnu stranice ne ostanu ispod nje. */
body { padding-bottom: var(--popis-h, 0px); }
.popis-traka {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--fg); color: var(--bg); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
.popis-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; max-width: 1280px; margin: 0 auto; }
.popis-broj { margin: 0; font: 600 15px/1.5 var(--font-tijelo); font-variant-numeric: tabular-nums; }
.popis-usp {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-left: auto; padding: 0 24px; border-radius: 999px;
  background: var(--hot); color: #111; font: 600 15px/1 var(--font-tijelo); text-decoration: none;
}
.popis-usp:hover, .popis-usp:focus-visible { background: var(--bg); color: var(--fg); }
.popis-nap { flex-basis: 100%; margin: 0; font: 400 13px/1.5 var(--font-tijelo); opacity: 0.8; }

/* Usporedba (ZADATAK-75 B i C, crew #51, #52): tablica klizi vodoravno unutar okvira, stupac s nazivima redaka stoji. */
.u-page { --field: rgba(17, 17, 17, 0.45); }
html[data-theme="dark"] .u-page { --field: rgba(242, 239, 233, 0.45); }
.u-sadrzaj { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.u-sadrzaj > * { min-width: 0; }
.u-okvir { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--card); overscroll-behavior-x: contain; }
.u-okvir:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
/* Stupci profila iste širine (table-layout: fixed); tablica je barem stupac naziva + N × najmanja širina (--u-n s poslužitelja). */
.u-t { --u-0: 120px; --u-c: 200px; width: max(100%, calc(var(--u-0) + var(--u-n, 3) * var(--u-c))); table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.u-t th, .u-t td {
  padding: 16px; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left;
  font: 400 15px/1.5 var(--font-tijelo); color: var(--body);
}
.u-t tbody th, .u-t thead td {
  position: sticky; left: 0; z-index: 1; width: var(--u-0); background: var(--card);
  font: 500 14px/1.5 var(--font-tijelo); color: var(--mut); box-shadow: 1px 0 0 var(--line);
}
.u-t thead th { font: 400 20px/1.3 var(--font-naslovi); color: var(--fg); }
.u-t tr:last-child > * { border-bottom: 0; }
.u-odabir { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
/* Kvačica u boji teksta, ne narančasta: puna narančasta je samo „Pošaljite upit odabranima" (P11, crew #69). */
.u-odabir input { flex: 0 0 auto; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--fg); cursor: pointer; }
.u-ime { min-width: 0; text-wrap: balance; }
/* Srce u zaglavlju stupca (ZADATAK-85, crew #56) je izvan labela kvačice. Stoji desno od imena dok ime ima barem 9em;
   u užem stupcu (mobitel, 5 stupaca) prelazi ispod imena, pa se ime ne lomi usred riječi. */
.u-zag { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.u-zag .u-odabir { flex: 1 1 9em; min-width: 0; }
.srce-u { flex: 0 0 auto; }
.u-cij .l-jed { display: block; }
.u-paketi { margin: 0; padding: 0; list-style: none; }
.u-paketi li + li { margin-top: 12px; }
.u-pk-n { display: block; font-weight: 600; color: var(--fg); }
.u-pk-c { display: block; font-variant-numeric: tabular-nums; }
.u-uklj { margin: 0; }
.u-uklj + .u-uklj { margin-top: 8px; }
.u-profil { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.u-radnje { display: flex; margin: 0; }
.s-page .u-gumb { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 28px; font-size: 15px; }
.u-gumb[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.u-forma { max-width: 560px; scroll-margin-top: 24px; }
/* Obrazac se otvara gumbom (#skupni) ili je otvoren kad nosi ishod slanja (?upit=). */
.u-forma:not(:target):not(.is-otvoren) { display: none; }
@media (max-width: 767px) {
  .u-t { --u-0: 104px; --u-c: 180px; }
  .u-t th, .u-t td { padding: 12px; }
  .s-page .u-gumb { width: 100%; }
}

/* Dodaj se: popunjavanje iz weba (ZADATAK-111, iza postavke DodajSe:WebPrijedlozi). Polja su skrivena dok ne stigne
   prijedlog; .login-field je flex pa [hidden] treba izričito. Oznaka „s vašeg weba" je mala pilula uz naslov polja. */
.dw { display: flex; flex-direction: column; gap: 24px; }
.dw [hidden], .dw[hidden] { display: none !important; }
.dw-oznaka { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--hot); border-radius: 999px; font-size: 11px; letter-spacing: 0.04em; text-transform: none; color: var(--fg); }
.dw-napomena { margin: 0; }
.dw-slika { display: block; width: 100%; max-width: 360px; max-height: 240px; object-fit: cover; border-radius: 4px; background: var(--card); }
.dw-cijene { display: flex; flex-direction: column; gap: 16px; }
.dw-cijena { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
@media (max-width: 600px) { .dw-cijena { grid-template-columns: 1fr 1fr; } .dw-cijena > .login-field:first-child { grid-column: 1 / -1; } }

/* crew #91: obavijest i modal „dodaj fotografije" (iza zastavice Fotke:Obavijest). */
.fotke-obavijest { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 16px; background: var(--warm); color: var(--fg); font-size: 14px; border-bottom: 1px solid var(--line); }
.fotke-obavijest-a { color: var(--fg); font-weight: 600; text-decoration: underline; }
.fotke-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(17, 17, 17, 0.55); }
.fotke-modal-okvir { max-width: 440px; width: 100%; padding: 24px; background: var(--card); color: var(--fg); border-radius: 12px; }
.fotke-modal-okvir h2 { margin: 0 0 8px; }
.fotke-modal-gumbi { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }