/* ============================================================
   Plantaža Sajtova — izgled javnog sajta

   Otvoren raspored: pozadine sekcija idu od ivice do ivice.
   Sadržaj drži nevidljiva mreža, bez centralne ploče i senke.
   Krupna tipografija, tanke linije i plava boja sa logotipa.

   Tokeni su u tri sloja:
     1. OSNOVNE VREDNOSTI — sirove boje i mere (jedino mesto sa hex-om)
     2. ZNAČENJE          — čemu vrednost služi
     3. KOMPONENTE        — vrednosti vezane za jedan element
   ============================================================ */

/* ---------------------------------------------------------- fontovi */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   SLOJ 1 — OSNOVNE VREDNOSTI
   ============================================================ */

:root {
    /* boje sa logotipa */
    --boja-plava-700: #003c62;
    --boja-plava-600: #005386;   /* plava iz logotipa */
    --boja-plava-500: #0a6fa8;
    --boja-plava-400: #2a8cc4;

    --boja-ink-900: #122b38;     /* tamnija za podnožje */
    --boja-ink-800: #193341;
    --boja-ink-600: #5b6272;
    --boja-ink-500: #656c80;
    --boja-ink-400: #98a0b3;
    --boja-ink-200: #ced3de;
    --boja-ink-100: #e7ebf2;

    /* Mirne, svetle podloge sekcija. */
    --boja-podloga: #fcfcf9;
    --boja-podloga-2: #f1f5f3;
    --boja-bela: #ffffff;

    /* pastelni akcenti — u njima stoje ikone i ukrasi */
    --boja-mint: #d3ede5;
    --boja-mint-jaka: #1c8060;
    --boja-nebo: #d8e9f7;
    --boja-nebo-jaka: #2a7fb8;
    --boja-roze: #f8dfe6;
    --boja-roze-jaka: #c0507c;
    --boja-zuta: #fbe7c6;
    --boja-zuta-jaka: #b47714;
    --boja-lavanda: #e2e3f6;
    --boja-lavanda-jaka: #5b5fb0;

    /* stanja */
    --boja-greska: #c0392b;
    --boja-uspeh: #1f7a52;

    /* kanali za providne varijante */
    --kanal-plava: 0 83 134;
    --kanal-ink: 35 36 49;
    --kanal-bela: 255 255 255;

    /* razmaci (korak 4px) */
    --razmak-1: 4px;
    --razmak-2: 8px;
    --razmak-3: 12px;
    --razmak-4: 16px;
    --razmak-5: 20px;
    --razmak-6: 24px;
    --razmak-7: 28px;
    --razmak-8: 32px;
    --razmak-10: 40px;
    --razmak-12: 48px;
    --razmak-14: 56px;
    --razmak-16: 64px;

    /* Zaobljenja kontrola i medija; sekcije nemaju radijus. */
    --zaobljenje-1: 6px;
    --zaobljenje-2: 10px;
    --zaobljenje-3: 14px;
    --zaobljenje-4: 20px;
    --zaobljenje-5: 28px;
    --zaobljenje-6: 40px;
    --zaobljenje-puno: 999px;

    /* senke — meke i široke, bez oštrih ivica */
    --senka-1: 0 4px 14px -6px rgb(var(--kanal-ink) / .08);
    --senka-2: 0 12px 34px -12px rgb(var(--kanal-ink) / .12);
    --senka-3: 0 24px 60px -20px rgb(var(--kanal-ink) / .16);

    /* tipografija */
    --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --slova-h1: clamp(2.35rem, 4.9vw, 4.35rem);
    --slova-h2: clamp(1.95rem, 3.9vw, 3.35rem);
    --slova-h3: clamp(1.15rem, 1.5vw, 1.38rem);
    --slova-uvod: clamp(1.02rem, 1.35vw, 1.18rem);
    --slova-telo: 17px;
    --slova-malo: .9rem;
    --slova-sitno: .82rem;
    --slova-oznaka: .78rem;

    /* kretanje */
    --kriva: cubic-bezier(.22, .61, .36, 1);
    --prelaz: 240ms var(--kriva);
    --prelaz-brzi: 160ms var(--kriva);

/* ============================================================
   SLOJ 2 — ZNAČENJE
   ============================================================ */

    --plava: var(--boja-plava-600);
    --plava-svetla: var(--boja-plava-500);
    --plava-tamna: var(--boja-plava-700);

    --podloga: var(--boja-podloga);
    --ploca: var(--boja-bela);
    --povrsina: var(--boja-podloga-2);
    --tamna: var(--boja-ink-900);

    --tekst: var(--boja-ink-800);
    --tekst-blag: var(--boja-ink-600);
    --tekst-tih: var(--boja-ink-500);
    --ivica: var(--boja-ink-100);
    --ivica-kontrole: #7d879c;   /* obrisi dugmadi i polja — traže 3:1 */

    --na-tamnom: var(--boja-bela);
    --na-tamnom-blag: #b9bfd0;
    --na-tamnom-tih: #949bb0;
    --ivica-na-tamnom: rgb(var(--kanal-bela) / .12);

    --naglasak-slab: rgb(var(--kanal-plava) / .06);
    --naglasak: rgb(var(--kanal-plava) / .1);
    --senka-dugmeta: 0 10px 22px -12px rgb(var(--kanal-plava) / .85);

    --greska: var(--boja-greska);
    --uspeh: var(--boja-uspeh);

    --sirina: 1440px;
    --sirina-uska: 760px;
    --pad-strana: clamp(22px, 5.5vw, 88px);
    --sekcija-y: clamp(72px, 8.5vw, 128px);

/* ============================================================
   SLOJ 3 — KOMPONENTE
   ============================================================ */

    --dugme-pad-y: 17px;
    --dugme-pad-x: var(--razmak-6);
    --dugme-radijus: var(--zaobljenje-puno);

    --kartica-radijus: 0px;
    --kartica-pad: clamp(22px, 2.4vw, 30px);

    --polje-radijus: var(--zaobljenje-2);
    --polje-pad-y: 13px;
    --polje-pad-x: var(--razmak-4);

    --zaglavlje-visina: 88px;
    --krug-ikone: 52px;
}

/* ---------------------------------------------------------- osnova */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    /* Kratke stranice zadržavaju podnožje na dnu ekrana. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--podloga);
    color: var(--tekst);
    font-family: var(--font);
    font-size: var(--slova-telo);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a { color: var(--plava); text-decoration: none; transition: color var(--prelaz); }
a:hover { color: var(--plava-svetla); }

button { font: inherit; color: inherit; }

::selection { background: rgb(var(--kanal-plava) / .18); }

:focus-visible {
    outline: 2px solid var(--plava);
    outline-offset: 3px;
    border-radius: var(--zaobljenje-1);
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.045em;
    color: var(--tekst);
    text-wrap: balance;
}

h1 { font-size: var(--slova-h1); line-height: 1.12; }
h2 { font-size: var(--slova-h2); }
h3 { font-size: var(--slova-h3); line-height: 1.35; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Nevidljiva mreža određuje širinu sadržaja; sekcije ostaju pune širine. */

.omot {
    width: 100%;
    max-width: var(--sirina);
    margin-inline: auto;
    padding-inline: var(--pad-strana);
}

.omot-usko { max-width: var(--sirina-uska); }

.sekcija { padding-block: var(--sekcija-y); position: relative; }
.sekcija-tesna { padding-block: calc(var(--sekcija-y) * .62); }
.sekcija-povrsina { background: var(--povrsina); }

/* ---------------------------------------------------------- naslovi sekcija */

.oznaka {
    display: inline-block;
    margin-bottom: var(--razmak-3);
    font-size: var(--slova-oznaka);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plava);
}

.zaglavlje-sekcije { max-width: 760px; margin-bottom: clamp(38px, 5vw, 64px); }
.zaglavlje-sekcije.centar { margin-inline: auto; text-align: center; }
.zaglavlje-sekcije h2 { line-height: 1.03; letter-spacing: -.045em; }
.zaglavlje-sekcije .uvod { margin-top: var(--razmak-5); max-width: 560px; }

.zaglavlje-sekcije.sa-dugmetom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--razmak-6);
    max-width: none;
}

.zaglavlje-sekcije.sa-dugmetom > div { max-width: 620px; }

.sekcija-uvod { max-width: none; }
.sekcija-uvod .uvod { max-width: 480px; }

@media (min-width: 900px) {
    .sekcija-uvod { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10%; align-items: end; }
    .sekcija-uvod .oznaka { grid-column: 1 / -1; }
    .sekcija-uvod h2 { margin-bottom: 0; }
    .sekcija-uvod .uvod { margin-bottom: 0; }
}

.uvod { font-size: var(--slova-uvod); color: var(--tekst-blag); }
.prigusen { color: var(--tekst-blag); }
.tekst-centar { text-align: center; }

/* Naglašena reč u naslovu nosi samo boju brenda — bez linije ispod,
   jer je linija na svakom naslovu podsećala na podvučen link. */
.istaknuto {
    position: relative;
    display: inline-block;
    color: var(--plava);
}

/* Traka iza reči stoji samo tamo gde treba dodatna težina (uvod, poziv). */
.istaknuto.traka::after {
    content: '';
    position: absolute;
    left: -.08em;
    right: -.08em;
    bottom: .04em;
    height: .3em;
    background: var(--boja-nebo);
    z-index: -1;
    transform-origin: left center;
    transition: transform 620ms var(--kriva);
}

.istaknuto.traka.ceka::after { transform: scaleX(0); }
.istaknuto.mint.traka::after { background: var(--boja-mint); }
.istaknuto.roze.traka::after { background: var(--boja-roze); }
.istaknuto.zuta.traka::after { background: var(--boja-zuta); }

h1, h2 { position: relative; z-index: 1; }

/* ============================================================
   DUGMAD
   ============================================================ */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--razmak-2);
    padding: var(--dugme-pad-y) var(--dugme-pad-x);
    border: 1px solid transparent;
    border-radius: var(--dugme-radijus);
    font-size: var(--slova-malo);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: background var(--prelaz), color var(--prelaz), border-color var(--prelaz),
                transform var(--prelaz), box-shadow var(--prelaz);
}

.dugme:disabled { opacity: .55; cursor: not-allowed; }
.dugme svg { flex-shrink: 0; }

.dugme-puno {
    background: var(--plava);
    color: var(--na-tamnom);
    box-shadow: none;
}

.dugme-puno:hover:not(:disabled) {
    background: var(--plava-tamna);
    color: var(--na-tamnom);
    transform: translateY(-2px);
}

.dugme-meko {
    background: var(--boja-nebo);
    color: var(--plava);
}

.dugme-meko:hover:not(:disabled) { background: #c9e0f2; color: var(--plava-tamna); transform: translateY(-2px); }

.dugme-obris {
    background: transparent;
    border-color: var(--ivica);
    color: var(--tekst);
}

.dugme-obris:hover:not(:disabled) { border-color: var(--plava); color: var(--plava); transform: translateY(-2px); }

.dugme-belo { background: var(--boja-bela); color: var(--plava); }
.dugme-belo:hover:not(:disabled) { transform: translateY(-2px); color: var(--plava-tamna); }

.dugme-malo { padding: 9px 18px; font-size: var(--slova-sitno); }

.dugme:active:not(:disabled) { transform: translateY(0); box-shadow: none; transition-duration: 90ms; }

.strelica { transition: transform var(--prelaz); }
.dugme:hover .strelica { transform: translateX(3px); }

.veza-dalje {
    display: inline-flex;
    align-items: center;
    gap: var(--razmak-2);
    font-weight: 600;
    font-size: var(--slova-malo);
    color: var(--plava);
}

.veza-dalje svg { transition: transform var(--prelaz); }
.veza-dalje:hover svg { transform: translateX(3px); }

/* ============================================================
   ZAGLAVLJE
   ============================================================ */

/* Zaglavlje je sastavni deo stranice, od ivice do ivice. */
.zaglavlje {
    position: sticky;
    top: 0;
    z-index: 60;
    width: 100%;
    margin: 0;
    background: rgb(255 255 255 / .9);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ivica);
    transition: box-shadow var(--prelaz), background var(--prelaz);
}

.zaglavlje.skrolovano {
    background: rgb(255 255 255 / .97);
    box-shadow: var(--senka-1);
}

#sadrzaj { flex: 1 0 auto; min-width: 0; scroll-margin-top: var(--zaglavlje-visina); }

.zaglavlje-red {
    display: flex;
    align-items: center;
    gap: var(--razmak-5);
    min-height: var(--zaglavlje-visina);
}

.logo { flex-shrink: 0; }
.logo img { width: 164px; height: auto; }

.meni { display: none; align-items: center; gap: 2px; margin-inline: auto; }

.meni a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    border-radius: var(--zaobljenje-2);
    font-size: var(--slova-malo);
    font-weight: 500;
    color: var(--tekst);
    white-space: nowrap;
    transition: background var(--prelaz), color var(--prelaz);
}

.meni a:hover, .meni a.aktivna { background: var(--naglasak-slab); color: var(--plava); }

.meni-grupa { position: relative; }

.padajuci {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 290px;
    padding: var(--razmak-2);
    background: var(--boja-bela);
    border-radius: var(--zaobljenje-4);
    box-shadow: var(--senka-3);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--prelaz-brzi), transform var(--prelaz-brzi), visibility var(--prelaz-brzi);
}

.meni-grupa:hover .padajuci,
.meni-grupa:focus-within .padajuci,
.meni-grupa.otvorena .padajuci {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.padajuci a {
    display: flex;
    align-items: center;
    gap: var(--razmak-3);
    padding: 10px 12px;
    border-radius: var(--zaobljenje-2);
    font-size: var(--slova-malo);
    font-weight: 500;
}

.padajuci-ikona {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}

.padajuci-sve {
    justify-content: space-between;
    margin-top: 4px;
    border-top: 1px solid var(--ivica);
    border-radius: 0 0 var(--zaobljenje-3) var(--zaobljenje-3);
    color: var(--plava);
    font-weight: 600;
}

.zaglavlje-desno { display: flex; align-items: center; gap: var(--razmak-2); margin-left: auto; }

.jezik {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--ivica);
    border-radius: var(--zaobljenje-2);
    font-size: var(--slova-sitno);
    font-weight: 600;
    color: var(--tekst);
    transition: border-color var(--prelaz), color var(--prelaz);
}

.jezik:hover { border-color: var(--plava); color: var(--plava); }

.dugme-menija {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid var(--ivica);
    border-radius: var(--zaobljenje-2);
    cursor: pointer;
}

.samo-desktop { display: none; }

/* ============================================================
   MOBILNI MENI — preko celog ekrana
   Stoji van <header> jer zaglavlje ima backdrop-filter, a takav
   predak postaje okvir za position:fixed.
   ============================================================ */

.meni-mobilni {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    background: var(--podloga);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms var(--kriva), visibility 0s linear 260ms;
}

.meni-mobilni::before {
    /* meki pastelni oblik u uglu, isti motiv kao pozadina sajta */
    content: '';
    position: absolute;
    right: -22%;
    top: -14%;
    width: 78vw;
    height: 78vw;
    max-width: 460px;
    max-height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--boja-mint) 0%, transparent 68%);
    opacity: .75;
    pointer-events: none;
}

/* Zatvoren meni je i za čitače ekrana sklonjen — atribut skida JS. */
.meni-mobilni[hidden] { display: none; }

.meni-mobilni.otvoren {
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms var(--kriva), visibility 0s;
}

/* --- gornja traka sa logotipom i zatvaranjem --- */

.meni-mobilni-vrh {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ivica);
    /* Sadržaj klizi ispod trake, pa ona mora da zamuti ono iza sebe. */
    background: rgb(252 252 249 / .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.meni-mobilni-vrh .zaglavlje-red { justify-content: space-between; }

.dugme-zatvori {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: var(--boja-bela);
    border: 1px solid var(--ivica-kontrole);
    border-radius: 50%;
    color: var(--tekst);
    cursor: pointer;
    transition: background var(--prelaz), color var(--prelaz), transform var(--prelaz);
}

.dugme-zatvori:hover { background: var(--plava); border-color: var(--plava); color: var(--na-tamnom); }
.dugme-zatvori:active { transform: scale(.94); }

/* --- spisak stranica --- */

.meni-mobilni-telo {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-block: clamp(14px, 3vw, 28px) var(--razmak-8);
}

.mm-veza,
.mm-usluge {
    /* svaka stavka ulazi sa malim zakašnjenjem, red po red */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms var(--kriva), transform 420ms var(--kriva);
    transition-delay: calc(var(--red, 0) * 45ms + 60ms);
}

.meni-mobilni.otvoren .mm-veza,
.meni-mobilni.otvoren .mm-usluge {
    opacity: 1;
    transform: none;
}

.mm-veza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--razmak-4);
    padding: clamp(13px, 2.4vw, 17px) 0;
    border-bottom: 1px solid var(--ivica);
    font-size: clamp(1.35rem, 6.4vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--tekst);
}

.mm-veza svg { flex-shrink: 0; color: var(--boja-ink-400); transition: transform var(--prelaz), color var(--prelaz); }
.mm-veza:active { color: var(--plava); }
.mm-veza:active svg { transform: translateX(4px); color: var(--plava); }

.mm-veza.aktivna { color: var(--plava); }
.mm-veza.aktivna svg { color: var(--plava); }

/* --- usluge kao mreža sitnijih stavki --- */

.mm-usluge { padding-top: var(--razmak-7); }

.mm-naslov {
    display: block;
    margin-bottom: var(--razmak-4);
    font-size: var(--slova-oznaka);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tekst-tih);
}

.mm-usluge-mreza {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--razmak-2);
}

.mm-usluge-mreza a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--zaobljenje-3);
    background: rgb(255 255 255 / .7);
    font-size: var(--slova-sitno);
    font-weight: 500;
    line-height: 1.25;
    color: var(--tekst);
}

.mm-usluge-mreza a:active { background: var(--boja-bela); }
.mm-usluge-mreza .krug-ikone { width: 32px; height: 32px; }

/* --- donja traka: poziv na akciju i kontakt --- */

.meni-mobilni-dno {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding-block: var(--razmak-5);
    padding-bottom: max(var(--razmak-5), env(safe-area-inset-bottom));
    border-top: 1px solid var(--ivica);
    background: rgb(255 255 255 / .75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.meni-mobilni-dno .dugme { width: 100%; }

.mm-podaci {
    display: flex;
    flex-wrap: wrap;
    gap: var(--razmak-3) var(--razmak-5);
    margin-top: var(--razmak-4);
}

.mm-podaci a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--slova-sitno);
    color: var(--tekst-blag);
}

.mm-podaci svg { color: var(--plava); }

/* Zaključavanje pozadine bez pomeranja skrola. `position: fixed` na telu
   je oduzimalo dokumentu visinu, pa je strana pri otvaranju menija skakala
   na vrh; zato ide samo overflow, i to na oba elementa. */
html.meni-otvoren,
body.meni-otvoren {
    overflow: hidden;
    overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
    .meni-mobilni,
    .mm-veza,
    .mm-usluge { transition-duration: .01ms; transition-delay: 0s; }
}

@media (min-width: 1040px) {
    .meni { display: flex; }
    .dugme-menija { display: none; }
    .samo-desktop { display: inline-flex; }
    .meni-mobilni { display: none !important; }
}

/* ============================================================
   NASLOVNI EKRAN
   ============================================================ */

.hero { position: relative; padding-block: clamp(50px, 6.8vw, 100px) 0; }

.hero-mreza {
    display: grid;
    gap: clamp(26px, 4vw, 52px);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 900px) {
    .hero-mreza { grid-template-columns: 1.2fr 1fr; }
}

.hero h1 { margin-bottom: var(--razmak-7); line-height: 1.06; }
.hero h1 .istaknuto { display: block; width: fit-content; }
.hero h1 .istaknuto::after { display: none; }
.hero .oznaka { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--razmak-6); }
.hero .oznaka::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--boja-mint-jaka); }
.hero .uvod { max-width: 510px; margin-bottom: var(--razmak-8); line-height: 1.85; }
.hero-tekst { min-width: 0; }
.dugme-tekst { padding-inline: 8px; color: var(--tekst); border-radius: 0; }
.dugme-tekst:hover { color: var(--plava); }

.hero-dugmad { display: flex; flex-wrap: wrap; gap: var(--razmak-3); }

/* Rezultati povezuju celu širinu uvoda u jednu mirnu horizontalnu traku. */
.hero-brojke {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 40px);
    margin-top: clamp(42px, 6vw, 80px);
    padding-block: clamp(26px, 3vw, 40px);
    border-top: 1px solid var(--ivica);
}

.hero-brojka strong {
    display: block;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--plava);
}

.hero-brojka > span { display: block; margin-top: 8px; font-size: var(--slova-sitno); color: var(--tekst-blag); }

.hero-slika { position: relative; min-width: 0; }

/* Slika koristi postojeću kolonu usluge, bez novog okvira ili promene rasporeda. */
.usluga-vizual { display: block; width: 100%; height: auto; }

.sekcija-usluge .mreza { column-gap: clamp(30px, 4vw, 64px); row-gap: 12px; }
.sekcija-projekti .mreza { column-gap: clamp(24px, 3.5vw, 48px); row-gap: 36px; }
.sekcija-projekti .kartica-telo h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); }
.sekcija-projekti .kartica-slika { aspect-ratio: 16 / 10; border-radius: var(--zaobljenje-1); }

.sekcija-proces { background: var(--tamna); color: var(--na-tamnom); }
.sekcija-proces h2, .sekcija-proces h3, .sekcija-proces .istaknuto { color: var(--na-tamnom); }
.sekcija-proces .oznaka, .sekcija-proces .proces-broj { color: var(--boja-mint); }
.sekcija-proces .uvod, .sekcija-proces .proces-korak p { color: var(--na-tamnom-blag); }
.sekcija-proces .proces-korak { border-color: var(--ivica-na-tamnom); }
.sekcija-proces .proces-broj { position: absolute; top: 24px; right: 0; font-weight: 400; }
.sekcija-proces .istaknuto::after { background: var(--boja-mint-jaka); }
.sekcija-proces .krug-ikone { background: transparent; color: var(--boja-mint); border: 1px solid var(--ivica-na-tamnom); border-radius: 50%; }

.sekcija-poziv { background: var(--plava); }
.sekcija-poziv h2 { font-size: clamp(2.3rem, 5.2vw, 4.7rem); line-height: 1.1; }
.sekcija-poziv .poziv { overflow: visible; }
.sekcija-poziv .poziv-ukras { right: 0; bottom: 0; }

/* ============================================================
   ILUSTRACIJA PLANTAŽE (SVG, animira se pri skrolu)
   ============================================================ */

.plantaza { width: 100%; height: auto; overflow: visible; }

/* Ilustracija je podrazumevano nacrtana — vidi se i bez JavaScripta.
   JS joj doda .ceka pre nego što uđe u vidno polje, pa je skloni i biljke izrastu. */
.plantaza .stabljika {
    stroke-dasharray: var(--duzina, 300);
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1400ms var(--kriva);
}

.plantaza .list,
.plantaza .kartica-sajta {
    opacity: 1;
    transform-box: fill-box;
    transform-origin: center bottom;
    transition: opacity 520ms var(--kriva), transform 620ms var(--kriva);
}

.plantaza.ceka .stabljika { stroke-dashoffset: var(--duzina, 300); }
.plantaza.ceka .list,
.plantaza.ceka .kartica-sajta { opacity: 0; transform: scale(.4); }

.plantaza .lebdi { animation: lebdenje 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.plantaza .lebdi-2 { animation-delay: -1.6s; }
.plantaza .lebdi-3 { animation-delay: -3.1s; }

@keyframes lebdenje {
    0%, 100% { transform: translateY(0) rotate(-.6deg); }
    50%      { transform: translateY(-9px) rotate(.8deg); }
}

/* ============================================================
   KARTICE
   ============================================================ */

.mreza { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.mreza-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.mreza-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 276px), 1fr)); }
.mreza-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 212px), 1fr)); }

.kartica {
    background: transparent;
    border-radius: var(--kartica-radijus);
    transition: transform var(--prelaz), box-shadow var(--prelaz);
}

.kartica-diza:hover { transform: translateY(-3px); }

/* Krug sa ikonom povezuje usluge sa motivom plantaže. */
.krug-ikone {
    display: grid;
    place-items: center;
    width: var(--krug-ikone);
    height: var(--krug-ikone);
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--prelaz);
}

/* pastelne varijante — koriste ih i krugovi u karticama i oni u meniju */
.krug-ikone.mint,    .padajuci-ikona.mint    { background: var(--boja-mint);    color: var(--boja-mint-jaka); }
.krug-ikone.nebo,    .padajuci-ikona.nebo    { background: var(--boja-nebo);    color: var(--boja-nebo-jaka); }
.krug-ikone.roze,    .padajuci-ikona.roze    { background: var(--boja-roze);    color: var(--boja-roze-jaka); }
.krug-ikone.zuta,    .padajuci-ikona.zuta    { background: var(--boja-zuta);    color: var(--boja-zuta-jaka); }
.krug-ikone.lavanda, .padajuci-ikona.lavanda { background: var(--boja-lavanda); color: var(--boja-lavanda-jaka); }

.kartica-diza:hover .krug-ikone { transform: scale(1.08) rotate(-6deg); }

/* --- kartica usluge --- */

.kartica-usluge { display: flex; flex-direction: column; height: 100%; padding: 30px 0; border-top: 1px solid var(--boja-ink-200); }
.kartica-usluge:hover { border-color: var(--plava); }
.kartica-usluge .krug-ikone { margin-bottom: var(--razmak-5); }
.kartica-usluge h3 { margin-bottom: var(--razmak-2); }
.kartica-usluge p { font-size: var(--slova-malo); color: var(--tekst-blag); margin-bottom: var(--razmak-5); }

.kartica-usluge-dno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--razmak-3);
    margin-top: auto;
}

.cena-od { font-size: var(--slova-sitno); color: var(--tekst-tih); }
.cena-od strong { display: block; font-size: 1rem; color: var(--tekst); }


/* --- kartica projekta i članka --- */

.kartica-medija { overflow: hidden; height: 100%; display: flex; flex-direction: column; }

.kartica-slika {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--povrsina);
}

.kartica-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--kriva); }
.kartica-medija:hover .kartica-slika img { transform: scale(1.05); }

.kartica-slika-prazna { display: grid; place-items: center; height: 100%; color: var(--boja-ink-400); }

.kartica-telo { display: flex; flex-direction: column; flex: 1; padding: var(--razmak-5) 0 var(--razmak-6); }

.kartica-telo h3 { margin-bottom: var(--razmak-1); font-size: 1.08rem; }
.kartica-telo p { font-size: var(--slova-malo); color: var(--tekst-blag); margin-bottom: var(--razmak-4); }
.kartica-telo .veza-dalje { margin-top: auto; }

.kartica-red { display: flex; align-items: baseline; justify-content: space-between; gap: var(--razmak-3); }
.godina { flex-shrink: 0; font-size: var(--slova-sitno); font-weight: 600; color: var(--boja-ink-400); }

.meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--razmak-2);
    margin-bottom: var(--razmak-3);
    font-size: var(--slova-sitno);
    color: var(--tekst-tih);
}

.znacka {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--zaobljenje-puno);
    background: var(--boja-nebo);
    color: var(--boja-nebo-jaka);
    font-size: .74rem;
    font-weight: 600;
}

/* --- utisak --- */

.kartica-utiska { display: flex; flex-direction: column; height: 100%; padding: 30px 0; border-top: 1px solid var(--ivica); }
.utisak-tekst { color: var(--tekst); margin-bottom: var(--razmak-5); }

.utisak-autor { display: flex; align-items: center; gap: var(--razmak-3); margin-top: auto; }
.utisak-autor img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

.utisak-inicijal {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--boja-nebo);
    color: var(--boja-nebo-jaka);
    font-weight: 600;
}

.utisak-autor strong { display: block; font-size: var(--slova-malo); }
.utisak-autor span { font-size: var(--slova-sitno); color: var(--tekst-tih); }

/* ============================================================
   PROCES — četiri koraka
   ============================================================ */

.proces-korak { position: relative; padding: 30px 0 0; border-top: 1px solid var(--ivica); }
.proces-korak .krug-ikone { margin: 0 0 var(--razmak-5); width: 52px; height: 52px; }
.proces-korak h3 { margin-bottom: var(--razmak-2); }
.proces-korak p { font-size: var(--slova-malo); color: var(--tekst-blag); margin: 0; }

.proces-broj {
    display: block;
    margin-bottom: var(--razmak-2);
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--boja-ink-400);
}

/* ============================================================
   ZAŠTO MI
   ============================================================ */

.razlog { display: flex; gap: var(--razmak-4); align-items: flex-start; }
.razlog .krug-ikone { width: 46px; height: 46px; }
.razlog h3 { margin-bottom: var(--razmak-1); font-size: 1.05rem; }
.razlog p { font-size: var(--slova-malo); color: var(--tekst-blag); margin: 0; }

/* ============================================================
   CENOVNIK
   ============================================================ */

.prekidaci { display: flex; flex-wrap: wrap; gap: var(--razmak-2); margin-top: var(--razmak-7); }
.zaglavlje-sekcije.centar + .prekidaci { justify-content: center; }

.prekidac {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--boja-bela);
    border: 1px solid var(--ivica);
    border-radius: var(--zaobljenje-puno);
    font-size: var(--slova-malo);
    font-weight: 500;
    color: var(--tekst-blag);
    cursor: pointer;
    transition: all var(--prelaz);
}

.prekidac:hover { border-color: var(--boja-ink-200); color: var(--tekst); }
.prekidac.aktivan { background: var(--plava); border-color: var(--plava); color: var(--na-tamnom); }
.prekidac-broj { font-size: .72rem; font-weight: 700; opacity: .65; }

.paketi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr)); align-items: stretch; gap: 32px; }

.paket {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 0 0;
    background: transparent;
    border-radius: var(--kartica-radijus);
    border-top: 2px solid var(--boja-ink-200);
    transition: transform var(--prelaz), box-shadow var(--prelaz);
}

.paket:hover { border-color: var(--plava); }

.paket.preporucen {
    border-color: var(--plava);
}

.paket-znacka {
    position: absolute;
    top: -11px;
    left: 0;
    padding: 4px 14px;
    border-radius: var(--zaobljenje-puno);
    background: var(--plava);
    color: var(--na-tamnom);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.paket h3 { font-size: 1.2rem; margin-bottom: var(--razmak-1); }
.paket-opis { font-size: var(--slova-malo); color: var(--tekst-blag); margin-bottom: var(--razmak-5); }

.paket-cena {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--plava);
    margin-bottom: var(--razmak-1);
}

.paket-stara { display: block; font-size: .92rem; font-weight: 400; color: var(--boja-ink-400); text-decoration: line-through; }
.paket-period { font-size: var(--slova-sitno); font-weight: 500; color: var(--tekst-tih); }

.paket-rok {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--razmak-5);
    font-size: var(--slova-sitno);
    color: var(--tekst-tih);
}

.paket-stavke {
    list-style: none;
    margin: 0 0 var(--razmak-6);
    padding: var(--razmak-5) 0 0;
    border-top: 1px solid var(--ivica);
    display: grid;
    gap: 10px;
}

.paket-stavke li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--slova-malo); line-height: 1.5; }
.paket-stavke svg { flex-shrink: 0; margin-top: 4px; color: var(--boja-mint-jaka); }
.paket-stavke .nema { color: var(--boja-ink-400); }
.paket-stavke .nema span { text-decoration: line-through; }
.paket-stavke .nema svg { color: var(--boja-ink-200); }

.paket .dugme { margin-top: auto; width: 100%; }
.paket-cena { padding-bottom: 28px; }
.paket-period { display: block; margin-top: 8px; }

.napomena {
    display: flex;
    align-items: flex-start;
    gap: var(--razmak-3);
    max-width: 700px;
    margin: var(--razmak-10) auto 0;
    padding: var(--razmak-4) var(--razmak-5);
    background: var(--povrsina);
    border-radius: var(--zaobljenje-3);
    font-size: var(--slova-malo);
    color: var(--tekst-blag);
}

.napomena svg { flex-shrink: 0; margin-top: 4px; color: var(--plava); }
.napomena p { margin: 0; }

/* ============================================================
   ČESTA PITANJA
   ============================================================ */

.harmonika { border-top: 1px solid var(--ivica); }
.harmonika-stavka { border-bottom: 1px solid var(--ivica); }

.harmonika-dugme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--razmak-5);
    width: 100%;
    padding: var(--razmak-5) 2px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--tekst);
    cursor: pointer;
    transition: color var(--prelaz);
}

.harmonika-dugme:hover { color: var(--plava); }
.harmonika-stavka.otvorena .harmonika-dugme { color: var(--plava); }

.harmonika-znak {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--boja-nebo);
    color: var(--boja-nebo-jaka);
    transition: transform var(--prelaz);
}

.harmonika-stavka.otvorena .harmonika-znak { transform: rotate(45deg); }

.harmonika-odgovor { display: none; }
.harmonika-odgovor > div { padding: 0 46px var(--razmak-5) 2px; color: var(--tekst-blag); }

/* ============================================================
   FORME
   ============================================================ */

.forma-red { display: grid; gap: var(--razmak-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .forma-red { grid-template-columns: 1fr 1fr; } }

.polje { margin-bottom: var(--razmak-4); display: flex; flex-direction: column; }

.polje label { margin-bottom: 7px; font-size: var(--slova-sitno); font-weight: 600; }
.obavezno { color: var(--greska); }

.polje input,
.polje select,
.polje textarea {
    width: 100%;
    padding: var(--polje-pad-y) var(--polje-pad-x);
    background: var(--povrsina);
    border: 1px solid transparent;
    border-radius: var(--polje-radijus);
    font: inherit;
    font-size: var(--slova-malo);
    color: var(--tekst);
    transition: border-color var(--prelaz), box-shadow var(--prelaz), background var(--prelaz);
}

.polje textarea { resize: vertical; min-height: 130px; line-height: 1.65; }

.polje input:focus,
.polje select:focus,
.polje textarea:focus {
    outline: none;
    background: var(--boja-bela);
    border-color: var(--plava);
    box-shadow: 0 0 0 3px rgb(var(--kanal-plava) / .12);
}

.polje input:disabled, .polje select:disabled, .polje textarea:disabled { opacity: .6; cursor: not-allowed; }
.polje input::placeholder, .polje textarea::placeholder { color: var(--boja-ink-400); }

.polje .greska-polje { border-color: var(--greska); }
.polje .greska-polje:focus { border-color: var(--greska); box-shadow: 0 0 0 3px rgb(192 57 43 / .12); }

.greska-tekst { margin-top: 6px; font-size: var(--slova-sitno); color: var(--greska); }

.polje-zamka { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

.forma-dno { display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-4); margin-top: var(--razmak-2); }
.forma-napomena { margin: 0; font-size: var(--slova-sitno); color: var(--tekst-tih); max-width: 300px; }

.poruka-uspeha {
    display: none;
    text-align: center;
    padding: var(--razmak-10) var(--razmak-4);
}

.poruka-uspeha .krug-ikone { margin: 0 auto var(--razmak-5); width: 64px; height: 64px; }
.poruka-uspeha h2 { font-size: 1.3rem; }

/* ============================================================
   POZIV NA AKCIJU
   ============================================================ */

.poziv {
    position: relative;
    overflow: hidden;
    padding: 0;
    color: var(--na-tamnom);
}

.poziv h2 { color: var(--na-tamnom); }
.poziv p { color: rgb(255 255 255 / .78); }
.poziv-sadrzaj { position: relative; z-index: 1; max-width: 820px; }
.poziv-dugmad { display: flex; flex-wrap: wrap; gap: var(--razmak-3); margin-top: var(--razmak-7); }

.poziv-ukras {
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 280px;
    opacity: .12;
    pointer-events: none;
}

.poziv .dugme-obris { border-color: rgb(255 255 255 / .34); color: var(--na-tamnom); }
.poziv .dugme-obris:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .6); color: var(--na-tamnom); }

/* ============================================================
   PODNOŽJE
   ============================================================ */

/* Pozadina podnožja ide od ivice do ivice. */
.podnozje-omot {
    position: relative;
    z-index: 1;
    background: var(--tamna);
}

.podnozje {
    max-width: var(--sirina);
    margin-inline: auto;
    padding: clamp(48px, 6vw, 86px) var(--pad-strana) 30px;
    background: var(--tamna);
    color: var(--na-tamnom-blag);
}

.podnozje-mreza {
    display: grid;
    gap: clamp(26px, 3.5vw, 46px);
    grid-template-columns: 1fr;
    padding-bottom: var(--razmak-10);
    border-bottom: 1px solid var(--ivica-na-tamnom);
}

@media (min-width: 700px) { .podnozje-mreza { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1000px) { .podnozje-mreza { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; } }

.podnozje-logo img { width: 178px; }
.podnozje-opis { margin-top: var(--razmak-4); max-width: 320px; font-size: var(--slova-malo); color: var(--na-tamnom-tih); }

.podnozje-mreze { display: flex; gap: var(--razmak-2); margin-top: var(--razmak-5); }

.podnozje-mreze a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgb(255 255 255 / .07);
    color: var(--na-tamnom-blag);
    transition: background var(--prelaz), color var(--prelaz);
}

.podnozje-mreze a:hover { background: var(--plava); color: var(--na-tamnom); }

.podnozje h4 {
    margin-bottom: var(--razmak-4);
    font-size: var(--slova-malo);
    font-weight: 600;
    color: var(--na-tamnom);
}

.podnozje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.podnozje ul a, .podnozje ul span { font-size: var(--slova-malo); color: var(--na-tamnom-tih); }
.podnozje ul a:hover { color: var(--na-tamnom); }

.podnozje-kontakt li { display: flex; align-items: flex-start; gap: 10px; }
.podnozje-kontakt svg { flex-shrink: 0; margin-top: 5px; color: var(--boja-plava-400); }

.podnozje-dno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--razmak-3);
    padding-top: var(--razmak-6);
    font-size: var(--slova-sitno);
    color: var(--na-tamnom-tih);
}

.podnozje-dno p { margin: 0; }
.podnozje-pravno { display: flex; flex-wrap: wrap; gap: var(--razmak-5); }
.podnozje-pravno a { color: var(--na-tamnom-tih); }
.podnozje-pravno a:hover { color: var(--na-tamnom); }
.podnozje :focus-visible, .sekcija-poziv :focus-visible { outline-color: var(--na-tamnom); }

/* ============================================================
   POJEDINAČNE STRANICE
   ============================================================ */

.vrh-strane { padding-block: clamp(48px, 7vw, 100px) clamp(36px, 5vw, 64px); }
.vrh-strane h1 { margin-bottom: var(--razmak-4); }

.mrvice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--razmak-4);
    font-size: var(--slova-sitno);
    color: var(--tekst-tih);
}

.mrvice a { color: var(--tekst-blag); }

.usluga-vrh-mreza { display: grid; gap: clamp(24px, 4vw, 46px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 920px) { .usluga-vrh-mreza { grid-template-columns: 1.04fr .96fr; } }

.usluga-podnaslov { font-size: 1.1rem; font-weight: 600; color: var(--plava); margin-bottom: var(--razmak-4); }

.koraci { display: grid; gap: 0; max-width: 820px; }

.korak { display: flex; gap: var(--razmak-5); align-items: flex-start; padding: var(--razmak-6) 0; border-bottom: 1px solid var(--ivica); }
.korak:last-child { border-bottom: none; }

.korak-broj {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--boja-nebo);
    color: var(--boja-nebo-jaka);
    font-weight: 700;
    font-size: var(--slova-malo);
}

.korak h3 { margin-bottom: 4px; }
.korak p { font-size: var(--slova-malo); color: var(--tekst-blag); margin: 0; }

.velika-slika { overflow: hidden; border-radius: var(--zaobljenje-1); }
.velika-slika img { width: 100%; }

.projekat-mreza { display: grid; gap: clamp(24px, 3vw, 42px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .projekat-mreza { grid-template-columns: 1.5fr 1fr; } }

.detalji { padding: 28px 0; border-top: 1px solid var(--ivica); }
.detalji dl { margin: 0; display: grid; gap: var(--razmak-4); }
.detalji dt { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-tih); margin-bottom: 2px; }
.detalji dd { margin: 0; font-size: var(--slova-malo); font-weight: 500; }
.detalji .tehnologije { margin-top: var(--razmak-5); padding-top: var(--razmak-5); border-top: 1px solid var(--ivica); }
.detalji .tehnologije div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.sadrzaj-teksta { color: var(--tekst-blag); line-height: 1.85; }
.sadrzaj-teksta h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-top: 1.8em; color: var(--tekst); }
.sadrzaj-teksta h3 { margin-top: 1.6em; color: var(--tekst); }
.sadrzaj-teksta ul, .sadrzaj-teksta ol { padding-left: 1.2em; margin-bottom: 1.2em; }
.sadrzaj-teksta li { margin-bottom: .45em; }
.sadrzaj-teksta strong { color: var(--tekst); font-weight: 600; }
.sadrzaj-teksta a { text-decoration: underline; text-underline-offset: 3px; }
.sadrzaj-teksta img { border-radius: var(--zaobljenje-3); margin-block: 1.4em; }

.kontakt-mreza { display: grid; gap: clamp(22px, 3vw, 38px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .kontakt-mreza { grid-template-columns: 1.55fr 1fr; } }

.kontakt-forma { padding: 28px 0 0; border-top: 1px solid var(--ivica); }

.kontakt-podaci { padding: 28px 0; border-top: 1px solid var(--ivica); }
.kontakt-podaci h2 { font-size: 1.2rem; margin-bottom: var(--razmak-5); }
.kontakt-podaci ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--razmak-4); }
.kontakt-podaci li { display: flex; align-items: flex-start; gap: var(--razmak-3); font-size: var(--slova-malo); }
.kontakt-podaci .krug-ikone { width: 38px; height: 38px; }

.prazno { padding: var(--razmak-16) 0; text-align: center; color: var(--tekst-tih); }

.strana-404 { padding-block: clamp(56px, 9vw, 110px); text-align: center; }
.strana-404 .broj { font-size: clamp(3.4rem, 9vw, 5.5rem); font-weight: 700; line-height: 1; color: var(--boja-ink-100); margin: 0 0 var(--razmak-2); }
.strana-404 .dugmad { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--razmak-3); margin-top: var(--razmak-7); }

.straniranje { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--razmak-10); }

.straniranje a, .straniranje span {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    border-radius: var(--zaobljenje-2);
    background: var(--boja-bela);
    border: 1px solid var(--ivica);
    font-size: var(--slova-malo);
    font-weight: 500;
    color: var(--tekst);
}

.straniranje a:hover { border-color: var(--plava); color: var(--plava); }
.straniranje .trenutna { background: var(--plava); border-color: var(--plava); color: var(--na-tamnom); font-weight: 600; }

/* ============================================================
   POMOĆNO
   ============================================================ */

.preskoci {
    position: absolute;
    left: -9999px;
    top: 10px;
    z-index: 999;
    padding: 10px 18px;
    background: var(--plava);
    color: var(--na-tamnom);
    border-radius: var(--zaobljenje-2);
}

.preskoci:focus { left: 10px; }

.na-vrh {
    position: fixed;
    right: clamp(14px, 2.5vw, 26px);
    bottom: clamp(14px, 2.5vw, 26px);
    z-index: 55;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--plava);
    color: var(--na-tamnom);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    box-shadow: var(--senka-dugmeta);
    transition: opacity var(--prelaz), transform var(--prelaz), visibility var(--prelaz);
}

.na-vrh.vidljivo { opacity: 1; visibility: visible; transform: translateY(0); }
.na-vrh:hover { background: var(--plava-tamna); }

/* Pojavljivanje pri skrolu — isti princip: sadržaj je vidljiv, JS ga
   privremeno sakrije (.ceka) da bi se pojavio kad dođe na red. */
.otkrij { transition: opacity 620ms var(--kriva), transform 620ms var(--kriva); }
.otkrij.ceka { opacity: 0; transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .otkrij.ceka { opacity: 1; transform: none; }
    .plantaza.ceka .stabljika { stroke-dashoffset: 0; }
    .plantaza.ceka .list, .plantaza.ceka .kartica-sajta { opacity: 1; transform: none; }
    .istaknuto.ceka::after { transform: scaleX(1); }
}

@media (max-width: 620px) {
    .logo img { width: 138px; }
    :root { --zaglavlje-visina: 74px; }
    .hero-brojke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-slika { max-width: 390px; width: 100%; margin-inline: auto; }
    .hero-dugmad { gap: 10px 18px; }
    .hero-dugmad .dugme { font-size: .85rem; }
    .sekcija-poziv .poziv-ukras { width: 140px; }
    .poziv-dugmad .dugme { max-width: 100%; }
    .zaglavlje-red { gap: 12px; }
    .jezik { min-height: 44px; }
    .dugme-menija { width: 44px; height: 44px; }
}

@media (min-width: 621px) and (max-width: 899px) {
    .hero-mreza { grid-template-columns: 1.25fr 1fr; gap: 16px; }
    .hero h1 { font-size: clamp(2.5rem, 5.2vw, 3.2rem); }
    .hero .uvod { font-size: .95rem; }
}

@media (min-width: 900px) {
    .sekcija-proces .mreza-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sekcija-projekti .mreza-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
    .sekcija-usluge .mreza-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   USLUGE KAO UREDNIČKI SPISAK
   Umesto šest istih kolona, usluge stoje kao redovi preko cele
   širine. Naziv nosi težinu, cena stoji desno, red se na prelaz
   miša blago oboji.
   ============================================================ */

.usluge-lista { display: grid; }

.usluga-red {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--razmak-4) clamp(18px, 2.6vw, 40px);
    padding: clamp(22px, 2.6vw, 32px) clamp(12px, 1.4vw, 20px);
    margin-inline: clamp(-20px, -1.4vw, -12px);
    border-top: 1px solid var(--ivica);
    color: var(--tekst);
    transition: background var(--prelaz);
}

.usluge-lista .usluga-red:last-child { border-bottom: 1px solid var(--ivica); }
.usluga-red:hover { background: var(--naglasak-slab); color: var(--tekst); }

.usluga-red .krug-ikone { width: 46px; height: 46px; }
.usluga-red:hover .krug-ikone { transform: scale(1.08) rotate(-6deg); }

.usluga-naziv {
    margin: 0;
    font-size: clamp(1.22rem, 2.1vw, 1.72rem);
    line-height: 1.2;
    letter-spacing: -.03em;
    transition: color var(--prelaz);
}

.usluga-red:hover .usluga-naziv { color: var(--plava); }

.usluga-opis {
    margin: 0;
    font-size: var(--slova-malo);
    color: var(--tekst-blag);
    max-width: 62ch;
}

.usluga-desno {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    white-space: nowrap;
}

.usluga-cena { font-size: var(--slova-sitno); color: var(--tekst-tih); }
.usluga-cena strong { display: block; font-size: 1.12rem; color: var(--tekst); letter-spacing: -.02em; }

.usluga-strelica {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--ivica);
    border-radius: 50%;
    color: var(--tekst-blag);
    transition: background var(--prelaz), border-color var(--prelaz),
                color var(--prelaz), transform var(--prelaz);
}

.usluga-red:hover .usluga-strelica {
    background: var(--plava);
    border-color: var(--plava);
    color: var(--na-tamnom);
    transform: translateX(4px);
}

@media (min-width: 860px) {
    .usluga-red { grid-template-columns: auto minmax(190px, 0.9fr) minmax(0, 1.35fr) auto; }
    .usluga-opis { grid-column: auto; }
}

@media (max-width: 859px) {
    .usluga-red { grid-template-columns: auto minmax(0, 1fr); }
    .usluga-opis { grid-column: 1 / -1; }
    .usluga-desno { grid-column: 1 / -1; justify-content: space-between; }
}

/* ============================================================
   PODELJENA SEKCIJA — naslov stoji sa strane dok sadržaj klizi
   ============================================================ */

@media (min-width: 980px) {
    .split-sekcija {
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        gap: clamp(44px, 6vw, 112px);
        align-items: start;
    }

    .split-sekcija > .zaglavlje-sekcije {
        position: sticky;
        top: calc(var(--zaglavlje-visina) + 28px);
        margin-bottom: 0;
        max-width: none;
    }
}

/* ============================================================
   DOPUNE POSTOJEĆIH KOMPONENTI
   ============================================================ */

/* Broj koraka nosi sekciju procesa; ikona je bila suvišan ukras. */
.proces-korak { padding-top: clamp(26px, 3vw, 38px); }
.proces-korak .proces-broj {
    position: static;
    display: block;
    margin-bottom: var(--razmak-4);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.05em;
}
.sekcija-proces .proces-korak .proces-broj { color: var(--boja-mint); }
.proces-korak .krug-ikone { display: none; }

/* Meko dugme je bilo prebledo pored punog; sada nosi jasan obris. */
.dugme-meko {
    background: transparent;
    border-color: var(--boja-ink-200);
    color: var(--tekst);
}

.dugme-meko:hover:not(:disabled) {
    background: transparent;
    border-color: var(--plava);
    color: var(--plava);
}

/* Cena je najvažniji podatak u paketu, pa dobija punu težinu naslova. */
.paket-cena { font-size: clamp(2.1rem, 3vw, 2.6rem); letter-spacing: -.04em; }
.paket h3 { font-size: 1.32rem; letter-spacing: -.03em; }

/* Opis gura cenu i dugme nadole, pa se u svim paketima poravnaju
   po istoj liniji bez obzira na dužinu teksta. */
.paketi-sazeti .paket-opis { flex: 1 0 auto; }
.paketi-sazeti .paket > .dugme { margin-top: var(--razmak-5); }

/* Obris kontrole mora da se vidi: siva ivica od #e7ebf2 davala je
   svega 1.46:1 prema podlozi, pa se dugme sa obrisom jedva razaznavalo,
   a polje forme se oslanjalo samo na svetlu ispunu. */
.dugme-obris, .dugme-meko { border-color: var(--ivica-kontrole); }

.polje input,
.polje select,
.polje textarea { border-color: var(--ivica-kontrole); }

.usluga-strelica { border-color: var(--ivica-kontrole); color: var(--tekst); }

/* Naslov u dvokolonom zaglavlju ima upola manje mesta nego onaj preko cele
   širine, pa mu treba i manja skala — inače se duži naslov prelomi u četiri
   reda i proguta ceo prvi ekran. */
.usluga-vrh-mreza h1 { font-size: clamp(2.05rem, 3.5vw, 3.15rem); }

/* ============================================================
   PARTNER NA PROJEKTU
   Na kartici stoji samo tih pečat u uglu — dovoljno da se vidi
   sa kim je projekat rađen, a da ne otima pažnju od slike.
   Prava veza ka sajtu partnera stoji na strani projekta.
   ============================================================ */

.kartica-telo { position: relative; }

.partner-pecat {
    position: absolute;
    right: 0;
    bottom: var(--razmak-5);
    display: grid;
    place-items: center;
    max-width: 96px;
    opacity: .38;
    filter: grayscale(1);
    transition: opacity var(--prelaz), filter var(--prelaz);
    pointer-events: none;
}

.partner-pecat img { max-height: 34px; width: auto; object-fit: contain; }

.partner-pecat-tekst {
    font-size: var(--slova-sitno);
    font-weight: 600;
    line-height: 1.2;
    text-align: right;
    color: var(--tekst-tih);
}

.kartica-medija:hover .partner-pecat { opacity: .85; filter: grayscale(0); }

/* Kad kartica nema opis delatnosti, pečat ne sme da naleti na naslov. */
.kartica-telo:has(.partner-pecat) .kartica-red { padding-right: 104px; }
.kartica-telo:has(.partner-pecat) > p { padding-right: 104px; }

/* --- strana projekta --- */

.partner-blok { margin-top: var(--razmak-6); padding-top: var(--razmak-5); border-top: 1px solid var(--ivica); }
.partner-blok dt { margin-bottom: var(--razmak-3); }

.partner-veza {
    display: flex;
    align-items: center;
    gap: var(--razmak-3);
    padding: var(--razmak-3) var(--razmak-4);
    border: 1px solid var(--ivica-kontrole);
    border-radius: var(--zaobljenje-2);
    color: var(--tekst);
    transition: border-color var(--prelaz), background var(--prelaz), color var(--prelaz);
}

a.partner-veza:hover { border-color: var(--plava); background: var(--naglasak-slab); color: var(--plava); }

.partner-veza img { max-width: 72px; max-height: 40px; width: auto; object-fit: contain; flex-shrink: 0; }
.partner-veza svg { flex-shrink: 0; margin-left: auto; }

.partner-ime { display: flex; flex-direction: column; min-width: 0; }
.partner-ime strong { font-size: var(--slova-malo); line-height: 1.3; }
.partner-opis { font-size: var(--slova-sitno); color: var(--tekst-tih); }

@media (max-width: 520px) {
    .partner-pecat { max-width: 68px; }
    .partner-pecat img { max-height: 26px; }
    .kartica-telo:has(.partner-pecat) .kartica-red,
    .kartica-telo:has(.partner-pecat) > p { padding-right: 76px; }
}