/* preveziapp.com – iste boje i izgled kao aplikacija (svetla i tamna tema) */
:root {
  --nar: #f97316; --nar-tamna: #ea580c; --nar-svetla: #fff1e6;
  --crvena: #dc2626; --crvena-svetla: #fee2e2; --zelena: #16a34a; --zelena-svetla: #dcfce7;
  --tekst: #0f172a; --tekst2: #475569; --tekst3: #94a3b8;
  --pozadina: #f3f4f6; --kartica: #fff; --ivica: #e5e7eb;
  --senka: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .06);
  --r: 16px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nar-svetla: #3a2414; --crvena-svetla: #3f1d1d; --zelena-svetla: #12301f;
    --tekst: #f1f5f9; --tekst2: #cbd5e1; --tekst3: #64748b;
    --pozadina: #0b1120; --kartica: #151d2e; --ivica: #263248; --senka: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.55; color: var(--tekst); background: var(--pozadina); }
a { color: var(--nar-tamna); }
img { max-width: 100%; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15; margin: .3em 0 .4em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.25; margin: 1.6em 0 .6em; }
h3 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
.sirina { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.uska { max-width: 820px; }
.centar { text-align: center; }
.sivo { color: var(--tekst2); } .svetlo { color: var(--tekst3); } .malo { font-size: .9rem; } .vrlo-malo { font-size: .8rem; }
.skriveno { position: absolute; left: -9999px; }
.red { display: flex; align-items: center; gap: 12px; }

/* Zaglavlje */
.zaglavlje { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--kartica) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ivica); }
.zaglavlje .red { height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--tekst); text-decoration: none; }
.meni { display: flex; gap: 4px; margin-left: auto; }
.meni a { padding: 8px 12px; border-radius: 999px; color: var(--tekst2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.meni a:hover, .meni a.aktivan { color: var(--nar-tamna); background: var(--nar-svetla); }
@media (max-width: 760px) {
  .zaglavlje .red { height: auto; flex-wrap: wrap; padding: 10px 16px; row-gap: 6px; }
  .meni { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .meni a { padding: 6px 10px; font-size: .88rem; white-space: nowrap; }
  .zaglavlje .dugme { margin-left: auto; }
}

/* Dugmad */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; border: 0; background: var(--nar); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; }
.dugme:hover { background: var(--nar-tamna); }
.dugme.obicno { background: var(--kartica); color: var(--tekst); border: 1px solid var(--ivica); }
.dugme.malo { padding: 8px 14px; font-size: .9rem; }
.dugme.veliko { padding: 16px 26px; font-size: 1.1rem; }
.dugmad { display: flex; gap: 10px; flex-wrap: wrap; }

/* Naslovni deo */
.hero { padding: 48px 0 32px; background: radial-gradient(ellipse at top, var(--nar-svetla), transparent 70%); }
.hero.mali { padding: 28px 0 20px; }
.hero-ikona { border-radius: 22px; box-shadow: 0 10px 30px rgba(249, 115, 22, .3); }
.podnaslov { font-size: 1.15rem; color: var(--tekst2); margin: 0 0 22px; }
.hitno { display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 0 auto; padding: 18px 22px; border-radius: 20px; text-align: left; text-decoration: none; color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 10px 28px rgba(220, 38, 38, .35); }
.hitno .velika { font-size: 2.4rem; }
.hitno b { display: block; font-size: 1.35rem; }
.hitno .pod { display: block; opacity: .9; font-size: .95rem; }

/* Kartice i mreže */
.kartica { display: block; background: var(--kartica); border: 1px solid var(--ivica); border-radius: var(--r); padding: 18px; box-shadow: var(--senka); color: var(--tekst); text-decoration: none; }
a.kartica:hover { border-color: var(--nar); }
.kartica.istaknuta { border-color: var(--nar); }
.kartica h2 { margin-top: 0; }
.mreza-usluga { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kartica.usluga { display: flex; flex-direction: column; gap: 4px; }
.kartica.usluga .ik { font-size: 2rem; }
.tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.tri .kartica b { display: block; margin-bottom: 4px; }
.broj { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--nar); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 6px; }
.dve { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: 24px; }
.dve > div:first-child { flex: 1 1 320px; }
.dve h2 { margin-top: 0; }
.lista-kartica { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lista-kartica h2 { font-size: 1.15rem; margin: 0 0 4px; }
.lista-kartica p { margin: 0; }
.mreza-gradova { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.mreza-gradova h2 { font-size: 1.15rem; margin: 0; }
.linkovi { display: flex; flex-direction: column; margin-top: 8px; font-size: .92rem; }
.oznake { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.oznake.centar { justify-content: center; }
.oznake a, .oznake > span { padding: 6px 12px; border-radius: 999px; background: var(--kartica); border: 1px solid var(--ivica); text-decoration: none; color: var(--tekst); font-size: .92rem; }
.oznake a:hover { border-color: var(--nar); color: var(--nar-tamna); }

/* Tekst strane */
.tekst { padding-bottom: 24px; }
.tekst p, .tekst li { color: var(--tekst); }
.tekst ul, .tekst ol { padding-left: 1.3em; }
.tekst li { margin: 4px 0; }
.koraci li { margin: 8px 0; }
.putanja { color: var(--tekst3); margin-top: 16px; }
.putanja a { color: var(--tekst2); text-decoration: none; }
.pitanje { background: var(--kartica); border: 1px solid var(--ivica); border-radius: 12px; padding: 12px 16px; margin: 8px 0; }
.pitanje summary { cursor: pointer; font-weight: 700; }
.pitanje p { margin: 8px 0 0; color: var(--tekst2); }
.poziv { margin: 28px 0; padding: 20px; border-radius: var(--r); background: var(--nar-svetla); border: 1px solid var(--nar); }
.poziv b { font-size: 1.15rem; }
.poziv p { margin: 6px 0 12px; }

/* Forma */
.forma { display: grid; gap: 14px; }
.forma label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.forma input, .forma textarea { font: inherit; padding: 12px; border-radius: 10px; border: 1.5px solid var(--ivica); background: var(--kartica); color: var(--tekst); }
.forma input:focus, .forma textarea:focus { outline: none; border-color: var(--nar); }
.traka { padding: 12px 16px; border-radius: 12px; margin: 12px 0; font-weight: 600; }
.traka.zelena { background: var(--zelena-svetla); color: var(--zelena); }
.traka.crvena { background: var(--crvena-svetla); color: var(--crvena); }

/* Podnožje */
.dno { margin-top: 48px; padding: 32px 0 20px; background: var(--kartica); border-top: 1px solid var(--ivica); }
.mreza-dno { display: grid; gap: 24px; grid-template-columns: 2fr 1fr 1fr; }
.mreza-dno > div { display: flex; flex-direction: column; gap: 6px; }
.mreza-dno a:not(.logo) { color: var(--tekst2); text-decoration: none; font-size: .92rem; }
.mreza-dno a:hover { color: var(--nar-tamna); }
@media (max-width: 700px) { .mreza-dno { grid-template-columns: 1fr 1fr; } .mreza-dno > div:first-child { grid-column: 1 / -1; } }