/* ============================================================
   putujsaljubimcem.rs - stilovi
   Paleta: borova zelena + med žuta, čista bela pozadina
   ============================================================ */
:root {
    --bor: #1E4D3B;        /* primarna - duboka zelena */
    --bor-tamna: #143528;
    --med: #F2A93B;        /* akcenat - med žuta */
    --med-tamna: #D98F1F;
    --mastilo: #22302B;
    --siva: #5F6E67;
    --linija: #DDE5E0;
    --pozadina: #FFFFFF;
    --pozadina-blaga: #F6F9F7;
    --radius: 12px;
    --senka: 0 2px 10px rgba(20, 53, 40, .08);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--mastilo);
    background: var(--pozadina);
    line-height: 1.55;
}
a { color: var(--bor); }

/* ---------- header ---------- */
.top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--linija);
    position: sticky; top: 0; background: #fff; z-index: 1100;
}
.logo {
    font-weight: 800; font-size: 1.25rem; text-decoration: none;
    color: var(--bor); letter-spacing: -.02em;
}
.logo span { color: var(--med-tamna); }
.logo em { font-style: normal; color: var(--siva); font-weight: 500; }

/* ---------- dugmad ---------- */
.btn {
    display: inline-block; padding: 10px 18px; border-radius: 999px;
    border: none; font-size: .95rem; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: background .15s;
}
.btn-primary { background: var(--bor); color: #fff; }
.btn-primary:hover { background: var(--bor-tamna); }
.btn-accent { background: var(--med); color: var(--mastilo); }
.btn-accent:hover { background: var(--med-tamna); }
.btn-ghost { background: transparent; color: var(--bor); border: 1px solid var(--linija); }
.btn-ghost:hover { background: var(--pozadina-blaga); }
.btn-opasno { background: #fff0f0; color: #B3261E; border: 1px solid #f3c9c6; }

/* ---------- hero ---------- */
.hero {
    padding: 48px 24px 28px;
    max-width: 860px; margin: 0 auto; text-align: center;
}
.hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0 0 10px; letter-spacing: -.02em; }
.hero h1 u { text-decoration-color: var(--med); text-decoration-thickness: 5px; text-underline-offset: 5px; }
.hero p { color: var(--siva); font-size: 1.05rem; margin: 0; }
.hero-uska { padding-bottom: 8px; }

/* ---------- filteri ---------- */
.filteri {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 14px; align-items: end;
    max-width: 1100px; margin: 24px auto; padding: 16px 20px;
    background: var(--pozadina-blaga);
    border: 1px solid var(--linija); border-radius: var(--radius);
}
.filteri .btn { width: 100%; text-align: center; }
.filteri .polje input, .filteri .polje select { width: 100%; min-width: 0; }
.polje { display: flex; flex-direction: column; gap: 5px; }
.polje label { font-size: .82rem; font-weight: 600; color: var(--siva); }
.polje label small { font-weight: 400; }
.polje input, .polje select, .polje textarea {
    padding: 10px 12px; border: 1px solid var(--linija);
    border-radius: 8px; font-size: .95rem; font-family: inherit;
    background: #fff; min-width: 170px;
}
.polje input:focus, .polje select:focus, .polje textarea:focus {
    outline: 2px solid var(--med); outline-offset: 1px; border-color: var(--med);
}

/* ---------- raspored: mapa + lista ---------- */
.raspored {
    display: block;
    max-width: 1100px; margin: 0 auto 48px; padding: 0 20px;
}
#mapa {
    height: 320px; border-radius: var(--radius);
    border: 1px solid var(--linija);
    position: relative !important; z-index: 0;
    overflow: hidden; contain: paint;   /* ništa iz mape ne može van njenog okvira */
    margin-bottom: 22px;
}
@media (min-width: 1001px) {
    #mapa { height: 440px; }
}
.paw-marker {
    font-size: 22px; text-align: center; line-height: 34px;
    background: #fff; border: 2px solid var(--bor); border-radius: 50%;
    box-shadow: var(--senka);
}

.lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 16px;
    /* stretch: sve kartice u istom redu imaju istu visinu */
}
.broj-rezultata, .paginacija, .prazno { grid-column: 1 / -1; }
.broj-rezultata { color: var(--siva); font-size: .9rem; margin: 0; }

.kartica {
    border: 1px solid var(--linija); border-radius: var(--radius);
    padding: 14px 16px; background: #fff; box-shadow: var(--senka);
    transition: border-color .15s;
    position: relative; z-index: 1;   /* lista uvek iznad mape */
    display: flex; flex-direction: column;
}
.kartica:hover { border-color: var(--bor); }
.kartica-glava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kartica h2 { margin: 0; font-size: 1.02rem; }
.cena { font-weight: 800; color: var(--bor); white-space: nowrap; }
.cena small { color: var(--siva); font-weight: 500; }
.lokacija-red { color: var(--siva); font-size: .82rem; margin: 6px 0; }
.opis {
    margin: 6px 0 10px; font-size: .88rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ljubimci-red { margin: 0 0 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
    background: var(--pozadina-blaga); border: 1px solid var(--linija);
    border-radius: 999px; padding: 3px 10px; font-size: .85rem;
}
.kontakt {
    display: flex; gap: 12px; flex-wrap: wrap; font-size: .84rem;
    margin: auto 0 0;   /* kontakt red uvek na dnu kartice */
    padding-top: 8px;
}
.kontakt a { text-decoration: none; font-weight: 600; }

.prazno {
    text-align: center; padding: 40px 20px; color: var(--siva);
    border: 1px dashed var(--linija); border-radius: var(--radius);
}

/* ---------- forma za prijavu ---------- */
.forma-okvir { max-width: 720px; margin: 0 auto 60px; padding: 0 20px; }
.forma-okvir h2 {
    font-size: 1.05rem; margin: 32px 0 14px; padding-bottom: 8px;
    border-bottom: 2px solid var(--med);
}
.forma-okvir .polje { margin-bottom: 16px; }
.forma-okvir input, .forma-okvir textarea, .forma-okvir select { width: 100%; min-width: 0; }
.red-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#mapaPicker { height: 320px; border-radius: var(--radius); border: 1px solid var(--linija); }
.hint { color: var(--siva); font-size: .85rem; margin: 6px 0 0; }
.checkbox-grupa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.checkbox-grupa label {
    display: flex; align-items: center; gap: 10px;
    font-size: .95rem; font-weight: 600; color: var(--mastilo);
    cursor: pointer; white-space: nowrap;
    border: 1px solid var(--linija); border-radius: 10px;
    padding: 12px 14px; background: #fff; transition: all .12s;
}
.checkbox-grupa label:hover { border-color: var(--bor); }
.checkbox-grupa label:has(input:checked) {
    border-color: var(--bor); background: #EFF8F2;
    box-shadow: inset 0 0 0 1px var(--bor);
}
.checkbox-grupa input {
    width: 18px; height: 18px; accent-color: var(--bor); flex: 0 0 auto; margin: 0;
}

.greska {
    background: #FDF0EF; border: 1px solid #F3C9C6; color: #B3261E;
    padding: 12px 16px; border-radius: 8px; margin: 12px 0;
}
.uspeh {
    background: #EFF8F2; border: 1px solid #BFE3CC; color: var(--bor-tamna);
    padding: 16px 18px; border-radius: 8px; margin: 16px 0; font-size: 1.02rem;
}
#paypal-dugme { max-width: 420px; margin-top: 12px; }

/* ---------- admin ---------- */
.admin-kartica { cursor: default; }
.status-tag {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; vertical-align: middle;
    background: var(--pozadina-blaga); border: 1px solid var(--linija); color: var(--siva);
}
.status-pending .status-tag { background: #FFF6E5; border-color: #F2D9A6; color: var(--med-tamna); }
.status-aktivan .status-tag { background: #EFF8F2; border-color: #BFE3CC; color: var(--bor); }
.admin-akcije { display: flex; gap: 10px; margin-top: 12px; }

/* ---------- footer ---------- */
.dno {
    border-top: 1px solid var(--linija); padding: 20px 24px;
    text-align: center; color: var(--siva); font-size: .9rem;
}

/* ---------- mobil ---------- */
@media (max-width: 1000px) {
    .lista { grid-template-columns: 1fr; }
    .lista { margin-top: 4px; }
    .red-2 { grid-template-columns: 1fr; }
    .polje input, .polje select { min-width: 0; width: 100%; }

    /* iOS: font < 16px u poljima izaziva auto-zoom pri fokusu */
    .polje input, .polje select, .polje textarea { font-size: 16px; }

    /* header i hero kompaktniji */
    .top { padding: 10px 14px; }
    .logo { font-size: 1.05rem; }
    .top .btn { padding: 8px 14px; font-size: .85rem; }
    .hero { padding: 24px 16px 14px; }
    .hero p { font-size: .95rem; }

    /* filteri: dve kolone, dugme preko cele širine */
    .filteri {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 10px; margin: 14px 16px; padding: 14px;
    }
    .filteri .polje:nth-child(3) { grid-column: 1 / -1; }
    .filteri .btn { grid-column: 1 / -1; text-align: center; }

    /* kartice: kompaktne */
    .kartica { padding: 12px 14px; }
    .kartica-slika { margin: -12px -14px 10px; }
    .kartica-slika img { height: 160px; }
    .kartica-slika img { height: 150px; }
    .kartica h2 { font-size: 1.02rem; }
    .cena { font-size: .95rem; }
    .lokacija-red { font-size: .82rem; margin: 4px 0; }
    .opis { font-size: .88rem; margin: 4px 0 8px; }
    .tag { font-size: .78rem; padding: 2px 8px; }
    .ljubimci-red { margin-bottom: 8px; gap: 6px; }
    .kontakt { font-size: .84rem; gap: 12px; }
    .broj-rezultata { font-size: .82rem; }

    .dno { padding: 16px; font-size: .82rem; }
}

/* ============================================================
   v2 - slike, galerija, detalj stranica
   ============================================================ */
.kartica-slika { display: block; margin: -14px -16px 12px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.kartica-slika img { width: 100%; height: 150px; object-fit: cover; display: block; transition: transform .25s; }
.kartica:hover .kartica-slika img { transform: scale(1.03); }
.kartica h2 a { color: var(--mastilo); text-decoration: none; }
.kartica h2 a:hover { color: var(--bor); }

.pregled-slika { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pregled-slika img { width: 90px; height: 68px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linija); }

.btn-veliki { padding: 14px 28px; font-size: 1.05rem; }

/* ---------- detalj stranica ---------- */
.detalj { max-width: 900px; margin: 0 auto 60px; padding: 0 20px; }
.mrvice { font-size: .85rem; color: var(--siva); margin: 18px 0 6px; }
.mrvice a { color: var(--siva); }
.detalj-glava { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.detalj-glava h1 { margin: 6px 0; font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.02em; }
.cena-velika { font-size: 1.4rem; }

.galerija { margin: 18px 0; }
#glavnaSlika { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--linija); }
.sličice { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.sličice img { width: 100px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; flex: 0 0 auto; }
.sličice img.aktivna, .sličice img:hover { border-color: var(--med); }

.detalj-telo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; margin-top: 8px; }
.detalj-telo h2 { font-size: 1.05rem; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--med); }
.opis-pun { font-size: 1rem; }
.mapa-detalj { height: 300px; border-radius: var(--radius); border: 1px solid var(--linija); }
.kontakt-detalj { flex-direction: column; align-items: flex-start; gap: 10px; }

/* ---------- admin slike ---------- */
.admin-slike { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.admin-slike img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linija); }

@media (max-width: 720px) {
    .detalj-telo { grid-template-columns: 1fr; gap: 8px; }
    .detalj { padding: 0 14px; }
    #glavnaSlika { max-height: 300px; }
    .sličice img { width: 78px; height: 56px; }
    .detalj-glava h1 { font-size: 1.35rem; }
    .cena-velika { font-size: 1.15rem; }
    .opis-pun { font-size: .92rem; }
    .kontakt-detalj .btn { width: 100%; text-align: center; }
    .mapa-detalj { height: 240px; }
    .forma-okvir { padding: 0 14px; }
    #mapaPicker { height: 260px; }
}


/* ---------- lociraj me ---------- */
.btn-lociraj {
    background: #fff; border: 2px solid rgba(0,0,0,.2); border-radius: 6px;
    padding: 7px 12px; font-size: .9rem; font-weight: 600; cursor: pointer;
    font-family: inherit; color: var(--mastilo); box-shadow: var(--senka);
}
.btn-lociraj:hover { background: var(--pozadina-blaga); }
.moja-lokacija {
    background: #2A7FFF; border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 0 0 2px #2A7FFF, 0 0 12px rgba(42,127,255,.6);
}
.udaljenost { color: var(--bor); font-weight: 700; }


/* ---------- admin: ručno dodavanje ---------- */
.dodaj-okvir { margin: 0 0 24px; }
.dodaj-okvir summary { list-style: none; display: inline-block; cursor: pointer; }
.dodaj-okvir summary::-webkit-details-marker { display: none; }
.dodaj-forma {
    margin-top: 14px; padding: 18px; border: 1px solid var(--linija);
    border-radius: var(--radius); background: var(--pozadina-blaga);
}
.dodaj-forma .polje { margin-bottom: 14px; }
.dodaj-forma input, .dodaj-forma textarea, .dodaj-forma select { width: 100%; min-width: 0; }

.vrsta-tag {
    display: inline-block; background: var(--bor); color: #fff;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; padding: 2px 8px; border-radius: 4px; margin-right: 4px;
}

/* ---------- paginacija ---------- */
.paginacija {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
    margin-top: 10px; font-size: .95rem;
}
.paginacija a, .paginacija .tekuca {
    padding: 8px 13px; border-radius: 8px; text-decoration: none;
    border: 1px solid var(--linija); color: var(--bor); font-weight: 600;
}
.paginacija a:hover { background: var(--pozadina-blaga); }
.paginacija .tekuca { background: var(--bor); color: #fff; border-color: var(--bor); }
.paginacija .tri-tacke { padding: 8px 4px; color: var(--siva); }

/* ---------- klasteri na mapi ---------- */
.klaster { background: none; border: none; }
.klaster-krug {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bor); color: #fff; font-weight: 800; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #fff; box-shadow: 0 2px 8px rgba(20,53,40,.35);
}


/* ---------- mape ne smeju da "legnu" na sadržaj ---------- */
.mapa-detalj, #mapaPicker, #adminMapa {
    position: relative; z-index: 0; overflow: hidden; contain: paint;
}
.galerija, .detalj-telo, .lista, .forma-okvir { position: relative; z-index: 1; }

.btn-vodi { display: block; text-align: center; margin-top: 12px; }

/* ---------- admin: pregled i izmena ---------- */
.admin-okvir { max-width: 860px; }
.pregled { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 18px; }
.pregled-kartica {
    display: block; text-align: center; text-decoration: none;
    border: 1px solid var(--linija); border-radius: var(--radius);
    padding: 12px 8px; color: var(--siva); font-size: .85rem; background: #fff;
}
.pregled-kartica strong { display: block; font-size: 1.5rem; color: var(--mastilo); }
.pregled-kartica:hover { border-color: var(--bor); }
.pregled-kartica.izabrana { border-color: var(--bor); background: var(--pozadina-blaga); }
.pregled-kartica.paznja strong { color: var(--med-tamna); }
.pregled-kartica.upozorenje strong { color: #B3261E; }

.istice-tag { background: #FFF6E5 !important; border-color: #F2D9A6 !important; color: var(--med-tamna) !important; }

.uredi-slike { display: flex; gap: 10px; flex-wrap: wrap; }
.uredi-slika { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: .8rem; cursor: pointer; }
.uredi-slika img { width: 96px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linija); }
.admin-kartica .opis { -webkit-line-clamp: unset; display: block; }

/* ---------- kapacitet, pogodnosti, novi filteri ---------- */
.red-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.forma-podnaslov { font-size: 1.05rem; margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--med); }

.kljucni-podaci {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    padding: 12px 16px; margin: 14px 0 4px;
    background: var(--pozadina-blaga); border: 1px solid var(--linija);
    border-radius: var(--radius); font-size: .95rem; font-weight: 600;
}

.pogodnosti-grupa { font-weight: 700; font-size: .9rem; margin: 14px 0 8px; color: var(--mastilo); }
.cipovi { display: flex; flex-wrap: wrap; gap: 8px; }
.cip { cursor: pointer; }
.cip input { position: absolute; opacity: 0; pointer-events: none; }
.cip span {
    display: inline-block; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--linija); background: #fff; font-size: .88rem;
    transition: all .12s; user-select: none;
}
.cip:hover span { border-color: var(--bor); }
.cip input:checked + span { background: var(--bor); color: #fff; border-color: var(--bor); }

.pogodnosti-okvir { margin: 18px 0; }
.pogodnosti-okvir summary {
    cursor: pointer; font-weight: 700; padding: 10px 0;
    border-bottom: 2px solid var(--med);
}

.pogodnosti-blok { margin-bottom: 14px; }
.pogodnosti-lista {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px;
}
.pogodnosti-lista li { font-size: .92rem; padding: 3px 0; }
.pogodnosti-ljubimci {
    background: #EFF8F2; border: 1px solid #BFE3CC;
    border-radius: var(--radius); padding: 12px 16px;
}


@media (max-width: 1000px) {
    .red-3 { grid-template-columns: 1fr 1fr; }
    .kljucni-podaci { font-size: .85rem; gap: 6px 14px; }
}

.btn-posalji { margin-top: 16px; }

.izvoz-red { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 14px; }

@media (max-width: 480px) {
    .checkbox-grupa { grid-template-columns: 1fr 1fr; }
    .checkbox-grupa label { font-size: .88rem; padding: 10px 10px; gap: 8px; }
}

.redni-broj { color: var(--siva); font-weight: 600; font-size: .95rem; }

/* checkbox u karticama ljubimaca ne sme da nasledi width:100% iz opštih pravila formi */
.checkbox-grupa input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    flex: 0 0 19px !important;
}

/* naslov kategorije pogodnosti na stranici smeštaja - jasno "naslov", ne opcija */
.pogodnosti-kategorija {
    font-size: .76rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--siva);
    margin: 4px 0 8px; padding-bottom: 5px;
    border-bottom: 1px solid var(--linija);
}
.pogodnosti-ljubimci .pogodnosti-kategorija { color: var(--bor-tamna); border-color: #BFE3CC; }

/* ---------- kontakt stranica ---------- */
.kontakt-lista { padding-left: 22px; }
.kontakt-lista li { margin-bottom: 8px; font-size: .98rem; }

/* ---------- zahtevi za izmenu ---------- */
.zahtev-stavke { list-style: none; padding: 0; margin: 8px 0; }
.zahtev-stavke li { padding: 3px 0; font-size: .95rem; }
.zahtev-stavke s { color: var(--siva); }
.zahtev-nov { border-left: 4px solid var(--med); }
.zahtev-primenjen { opacity: .65; }
.zahtev-odbijen { opacity: .55; }

.top-nav { display: flex; gap: 8px; align-items: center; }
@media (max-width: 1000px) {
    .top-nav { gap: 6px; }
    .top-nav .btn { padding: 8px 12px; font-size: .82rem; }
}

/* honeypot - nevidljivo ljudima, botovi ga popune */
.hp-polje { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- kako funkcioniše ---------- */
.kako {
    max-width: 1100px; margin: 10px auto 4px; padding: 20px 24px;
    background: var(--pozadina-blaga); border: 1px solid var(--linija); border-radius: var(--radius);
}
.kako-naslov { text-align: center; margin-bottom: 14px; }
.kako-naslov h2 { font-size: 1.25rem; margin: 0 0 4px; }
.kako-naslov p { margin: 0; color: var(--siva); }
.kako-koraci { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.kako-korak {
    background: #fff; border: 1px solid var(--linija); border-radius: 12px;
    padding: 14px 16px; font-size: .9rem; color: var(--siva); line-height: 1.45;
}
.kako-korak span {
    display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
    background: var(--med); color: #3A2A05; font-weight: 800;
    align-items: center; justify-content: center; margin-bottom: 6px;
}
.kako-korak strong { display: block; color: var(--mastilo); margin-bottom: 3px; }
.kako-cta { text-align: center; margin: 14px 0 0; }
@media (max-width: 1000px) {
    .kako-koraci { grid-template-columns: 1fr; }
}

/* pravne stranice */
.pravna h2 { font-size: 1.05rem; margin-top: 22px; }
.pravna p { font-size: .95rem; line-height: 1.6; }

.prijavi-gresku { font-size: .85rem; color: var(--siva); }

/* traka za izdavače ispod hero */
.traka-izdavaci {
    max-width: 1100px; margin: 6px auto 0; padding: 10px 20px;
    background: #FFF6E5; border: 1px solid #F2D9A6; border-radius: 10px;
    text-align: center; font-size: .92rem;
}
.traka-izdavaci p { margin: 0; color: var(--mastilo); }
.traka-izdavaci a { font-weight: 700; white-space: nowrap; }
/* kako blok na dnu diše od sadržaja iznad */
.kako { margin-top: 30px; }