/* Top Chat */
:root {
  --lj: #7c3aed;          /* ljubičasta – glavna boja */
  --lj-t: #6d28d9;
  --roze: #ec4899;
  --preliv: linear-gradient(135deg, #7c3aed, #ec4899);
  --poz: #f5f3fb;
  --karta: #ffffff;
  --tekst: #1c1830;
  --tekst2: #575170;
  --tekst3: #8a84a3;
  --linija: #e7e3f3;
  --hover: #f1edfb;
  --muski: #2563eb;
  --zenski: #db2777;
  --zeleno: #16a34a;
  --crveno: #dc2626;
  --moja: #ede9fe;
  --senka: 0 1px 2px rgba(40, 20, 90, .05), 0 2px 8px rgba(40, 20, 90, .06);
  --r: 16px;
  color-scheme: light;
}
[data-tema="tamna"] {
  --poz: #12101c;
  --karta: #1c192b;
  --tekst: #f1eefb;
  --tekst2: #bcb6d6;
  --tekst3: #8a84a8;
  --linija: #2d2942;
  --hover: #262238;
  --muski: #7aa7ff;
  --zenski: #ff7ab8;
  --moja: #33295c;
  --senka: 0 1px 3px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--poz); color: var(--tekst); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--lj); text-decoration: none; }
[data-tema="tamna"] a { color: #b79bff; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.2; letter-spacing: -.015em; }
h1 { font-size: clamp(24px, 4vw, 30px); font-weight: 800; }
h2 { font-size: 18px; font-weight: 750; }
p { margin: 0 0 10px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.ik { flex: none; }
.omot { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.tiho { color: var(--tekst3); font-size: 14px; }
.sredina { text-align: center; }
.zeleno { color: var(--zeleno); font-weight: 600; font-size: 14px; }
:focus-visible { outline: 2px solid var(--lj); outline-offset: 2px; }

/* zaglavlje */
.zag { background: var(--karta); border-bottom: 1px solid var(--linija); position: sticky; top: 0; z-index: 40; }
.zag-red { display: flex; align-items: center; gap: 10px; height: 58px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 21px; color: var(--tekst) !important; text-decoration: none !important; letter-spacing: -.02em; flex: none; }
.logo b { background: var(--preliv); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-znak { width: 34px; height: 34px; border-radius: 11px; background: var(--preliv); display: grid; place-items: center; font-size: 18px; box-shadow: 0 4px 12px rgba(124, 58, 237, .35); }
.meni { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.meni a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 10px; color: var(--tekst2) !important; font-weight: 600; font-size: 14.5px; text-decoration: none !important; position: relative; }
.meni a:hover { background: var(--hover); color: var(--tekst) !important; }
.meni a.akt { color: var(--lj) !important; background: var(--hover); }
[data-tema="tamna"] .meni a.akt { color: #c4b0ff !important; }
.meni.gost { gap: 10px; }
.znacka { background: var(--roze); color: #fff; font-size: 11.5px; font-weight: 800; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: inline-grid; place-items: center; line-height: 1; }
.znacka[hidden] { display: none; }
.ja { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tekst) !important; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--linija); text-decoration: none !important; flex: none; }
.ja img { border-radius: 50%; object-fit: cover; display: block; }
.ja:hover { background: var(--hover); }
.okruglo { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linija); background: var(--karta); display: inline-grid; place-items: center; cursor: pointer; color: var(--tekst2) !important; flex: none; padding: 0; position: relative; }
.okruglo:hover { background: var(--hover); color: var(--tekst) !important; }

/* opšti delovi */
.glavni { padding-top: 20px; padding-bottom: 36px; flex: 1; }
.kartica { background: var(--karta); border-radius: var(--r); box-shadow: var(--senka); padding: 20px; }
.uska { max-width: 460px; margin: 16px auto; }
.uska-600 { max-width: 680px; margin: 0 auto; }
.obavestenje { background: var(--moja); border: 1px solid color-mix(in srgb, var(--lj) 30%, transparent); padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-weight: 600; overflow-wrap: anywhere; }
.greska { color: var(--crveno); font-weight: 600; font-size: 14.5px; margin: 6px 0; }
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--preliv); color: #fff !important; font-weight: 700; padding: 10px 18px; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none !important; transition: transform .12s, filter .12s; white-space: nowrap; }
.dugme:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dugme.sporedno { background: var(--karta); color: var(--tekst) !important; border: 1.5px solid var(--linija); }
.dugme.sporedno:hover { background: var(--hover); filter: none; }
.dugme.malo { padding: 7px 12px; font-size: 14px; border-radius: 10px; }
.dugme.veliko { padding: 14px 24px; font-size: 17px; border-radius: 14px; }
.veza-dugme { background: none; border: 0; padding: 0; color: var(--tekst3); cursor: pointer; font-size: 13.5px; text-decoration: underline; }
.veza-dugme:hover { color: var(--crveno); }
.dugmad { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.obrazac { display: grid; gap: 14px; margin: 14px 0; }
.obrazac label { display: grid; gap: 5px; font-weight: 650; font-size: 14.5px; }
.obrazac label small { font-weight: 400; color: var(--tekst3); }
input[type=text], input[type=password], input[type=search], input[type=number], select, textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--linija); border-radius: 12px; background: var(--poz); outline: none; transition: border-color .12s; }
input:focus, select:focus, textarea:focus { border-color: var(--lj); }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 650; font-size: 14.5px; padding: 0; margin-bottom: 5px; }
.izbor { display: flex; gap: 10px; flex-wrap: wrap; }
.izbor label { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--linija); border-radius: 12px; cursor: pointer; font-weight: 600; }
.izbor label:has(input:checked) { border-color: var(--lj); background: var(--moja); }
.datum { display: grid; grid-template-columns: 1fr 1.4fr 1.1fr; gap: 8px; }
.datum legend { grid-column: 1 / -1; }
.potvrda { display: flex !important; align-items: flex-start; gap: 9px; font-weight: 400 !important; }
.potvrda input { margin-top: 4px; width: 17px; height: 17px; flex: none; accent-color: var(--lj); }
.zamka { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.red-forma { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.red-forma input[type=search], .red-forma input[type=text] { flex: 1; min-width: 150px; width: auto; }
.red-forma select { width: auto; }
.pretraga { margin: 14px 0; }
.jezicci { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; }
.jezicci a { padding: 7px 14px; border-radius: 999px; background: var(--poz); color: var(--tekst2) !important; font-weight: 650; font-size: 14px; text-decoration: none !important; display: inline-flex; gap: 6px; align-items: center; }
.jezicci a.akt { background: var(--preliv); color: #fff !important; }
.strane { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; color: var(--tekst3); font-size: 14px; }
.avatar { border-radius: 50%; object-fit: cover; background: var(--hover); display: block; flex: none; }
.nik { font-weight: 700; }
.nik.m, .m { color: var(--muski) !important; }
.nik.z, .z { color: var(--zenski) !important; }
.uloga { font-style: normal; font-size: .85em; }
.sa-tackom { position: relative; display: inline-block; flex: none; }
.sa-tackom.online::after { content: ""; position: absolute; right: 2%; bottom: 2%; width: 24%; height: 24%; min-width: 10px; min-height: 10px; background: var(--zeleno); border: 2px solid var(--karta); border-radius: 50%; }
.brojke { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 16px 0; }
.brojke li { background: var(--poz); border-radius: 12px; padding: 12px; text-align: center; color: var(--tekst2); font-size: 13.5px; }
.brojke b { display: block; font-size: 21px; color: var(--tekst); font-weight: 800; }

/* početna za goste */
.uvod { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; padding: 28px 0 12px; }
.uvod h1 { font-size: clamp(32px, 5.4vw, 50px); font-weight: 900; line-height: 1.08; margin-bottom: 16px; background: var(--preliv); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uvod-tekst > p { font-size: 18px; color: var(--tekst2); max-width: 520px; }
.uvod-dugmad { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.uvod-brojke { display: flex; gap: 26px; flex-wrap: wrap; color: var(--tekst2); }
.uvod-brojke b { color: var(--tekst); font-size: 22px; font-weight: 800; margin-right: 4px; }
.uvod-slika { background: var(--karta); border-radius: 24px; box-shadow: 0 20px 50px rgba(124, 58, 237, .18); padding: 22px; display: grid; gap: 10px; transform: rotate(1.2deg); }
.balon { max-width: 85%; padding: 10px 14px; border-radius: 16px; background: var(--poz); font-size: 15px; }
.balon b { display: block; font-size: 12.5px; color: var(--zenski); }
.balon.desno { justify-self: end; background: var(--moja); }
.balon.desno b { color: var(--muski); }
.balon.bot { background: color-mix(in srgb, var(--roze) 12%, var(--karta)); }
.balon.bot b { color: var(--lj); }
.odeljak { margin-top: 40px; }
.odeljak > h2 { font-size: 24px; font-weight: 800; margin-bottom: 16px; }
.mreza-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.veliki-znak { font-size: 30px; display: block; margin-bottom: 8px; }
.mreza-3 p { color: var(--tekst2); margin: 0; font-size: 15px; }

/* portal */
.dva { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.kolona, .bocna { display: grid; gap: 20px; min-width: 0; }
.nasl { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst3); margin: 4px 0 10px 4px; }
.table { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tabla { border-top: 4px solid var(--lj); }
.tabla.bilbord { border-top-color: var(--roze); }
.tabla-tekst { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tabla .tiho { margin: 0; }
.lista-soba { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.lista-soba a, .lista-soba.pregled li { display: flex; align-items: center; gap: 12px; background: var(--karta); border-radius: 14px; box-shadow: var(--senka); padding: 12px 14px; color: var(--tekst) !important; text-decoration: none !important; height: 100%; transition: transform .12s, box-shadow .12s; }
.lista-soba a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(124, 58, 237, .16); }
.soba-ikona { width: 44px; height: 44px; border-radius: 13px; background: var(--moja); display: grid; place-items: center; font-size: 22px; flex: none; }
.lista-soba div { flex: 1; min-width: 0; }
.lista-soba b { display: block; }
.lista-soba small { color: var(--tekst3); font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.broj { min-width: 30px; height: 30px; border-radius: 10px; background: var(--poz); color: var(--tekst3); display: grid; place-items: center; font-weight: 800; font-size: 14px; padding: 0 6px; flex: none; }
.broj.ima { background: var(--zeleno); color: #fff; }
.mali-clanovi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; margin: 10px 0; }
.mali-clanovi a { display: grid; justify-items: center; gap: 3px; text-decoration: none !important; }
.mali-clanovi span { font-size: 12px; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sve-veza { font-weight: 700; font-size: 14px; }
.rang { counter-reset: r; display: grid; gap: 4px; margin-bottom: 10px; }
.rang li { counter-increment: r; display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.rang li::before { content: counter(r); width: 24px; font-weight: 900; color: var(--tekst3); text-align: center; flex: none; }
.rang li:nth-child(1)::before { content: "🥇"; } .rang li:nth-child(2)::before { content: "🥈"; } .rang li:nth-child(3)::before { content: "🥉"; }
.rang li > b { margin-left: auto; }
.rang.velika li::before { content: counter(r) "."; font-size: 14px; }
.rang.velika a { display: flex; align-items: center; gap: 12px; flex: 1; color: var(--tekst) !important; text-decoration: none !important; padding: 6px 8px; border-radius: 12px; min-width: 0; }
.rang.velika a:hover { background: var(--hover); }
.rang.velika a div { min-width: 0; }
.rang.velika small, .clanovi-mreza small { display: block; color: var(--tekst3); font-size: 13px; }
.rang.velika a > b { margin-left: auto; white-space: nowrap; }
.clanovi-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 14px; }
.clanovi-mreza a { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; text-decoration: none !important; background: var(--poz); }
.clanovi-mreza a:hover { background: var(--hover); }
.clanovi-mreza .gde { color: var(--zeleno); }

/* soba i privatni razgovor */
.soba-strana { height: 100dvh; overflow: hidden; }
.soba-strana .glavni { padding: 10px 16px 12px; display: flex; flex-direction: column; min-height: 0; }
.soba-strana .obavestenje { margin-bottom: 8px; }
.soba { flex: 1; min-height: 0; background: var(--karta); border-radius: var(--r); box-shadow: var(--senka); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.soba-vrh { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--linija); }
.soba-naslov { flex: 1; min-width: 0; }
.soba-naslov h1 { font-size: 18px; margin: 0; }
.soba-naslov p { margin: 0; font-size: 13px; color: var(--tekst3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-brojem b { position: absolute; top: -5px; right: -5px; background: var(--zeleno); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.soba-telo { flex: 1; min-height: 0; display: flex; }
.poruke { flex: 1; min-width: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
.ucitavanje { color: var(--tekst3); text-align: center; margin: auto; }
.por { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 10px; padding: 3px 6px; border-radius: 12px; position: relative; }
.por:hover { background: var(--hover); }
.por .avatar { grid-row: span 2; margin-top: 3px; }
.por-glava { display: flex; align-items: baseline; gap: 8px; }
.por-glava button.nik { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14.5px; }
.por-glava time { font-size: 11.5px; color: var(--tekst3); }
.por-tekst { overflow-wrap: anywhere; white-space: pre-wrap; }
.por.nastavak { padding-top: 0; }
.por.nastavak .avatar, .por.nastavak .por-glava { display: none; }
.por.nastavak .por-tekst { grid-column: 2; }
.por.bot .por-tekst { background: color-mix(in srgb, var(--roze) 10%, var(--karta)); border: 1px solid color-mix(in srgb, var(--roze) 25%, transparent); padding: 7px 12px; border-radius: 4px 14px 14px 14px; display: inline-block; font-weight: 600; justify-self: start; }
.por.bot .nik { color: var(--lj) !important; }
.por.sistem { display: block; text-align: center; color: var(--tekst3); font-size: 13.5px; padding: 4px; }
.por.pomen { background: color-mix(in srgb, var(--lj) 9%, transparent); }
.por-meni { position: absolute; right: 6px; top: 2px; opacity: 0; background: var(--karta); border: 1px solid var(--linija); border-radius: 8px; width: 28px; height: 24px; display: grid; place-items: center; cursor: pointer; color: var(--tekst3); padding: 0; }
.por:hover .por-meni, .por-meni:focus { opacity: 1; }
.prisutni { width: 220px; border-left: 1px solid var(--linija); overflow-y: auto; padding: 12px; flex: none; }
.prisutni h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst3); }
.prisutni li a { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; text-decoration: none !important; font-size: 14.5px; }
.prisutni li a:hover { background: var(--hover); }
.soba-greska { margin: 0; padding: 8px 14px; background: color-mix(in srgb, var(--crveno) 10%, var(--karta)); color: var(--crveno); font-weight: 600; font-size: 14px; }
.pisanje { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--linija); align-items: center; }
.pisanje input { flex: 1; border-radius: 999px; padding: 11px 18px; }
.pisanje .dugme { width: 46px; height: 46px; padding: 0; border-radius: 50%; flex: none; }
.emotikoni { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 10px; border-top: 1px solid var(--linija); }
.emotikoni[hidden] { display: none; }
.emotikoni button { background: none; border: 0; font-size: 23px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.emotikoni button:hover { background: var(--hover); }
.meni-poruke { position: fixed; z-index: 80; background: var(--karta); border: 1px solid var(--linija); border-radius: 14px; box-shadow: 0 12px 34px rgba(20, 10, 60, .25); padding: 6px; min-width: 210px; display: grid; }
.meni-poruke[hidden] { display: none; }
.meni-poruke button, .meni-poruke a { background: none; border: 0; text-align: left; padding: 9px 12px; border-radius: 9px; cursor: pointer; color: var(--tekst) !important; text-decoration: none !important; font-size: 14.5px; }
.meni-poruke button:hover, .meni-poruke a:hover { background: var(--hover); }
.meni-poruke .opasno { color: var(--crveno) !important; }
.meni-poruke hr { border: 0; border-top: 1px solid var(--linija); margin: 4px 0; width: 100%; }
.privatne { gap: 6px; }
.pp { max-width: min(78%, 520px); padding: 8px 13px; border-radius: 16px 16px 16px 4px; background: var(--poz); align-self: flex-start; overflow-wrap: anywhere; white-space: pre-wrap; }
.pp.moja { align-self: flex-end; background: var(--moja); border-radius: 16px 16px 4px 16px; }
.pp time { display: block; font-size: 11px; color: var(--tekst3); margin-top: 2px; }
.razgovori li a { display: flex; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 14px; text-decoration: none !important; color: var(--tekst) !important; }
.razgovori li a:hover { background: var(--hover); }
.razgovori li div { flex: 1; min-width: 0; }
.razgovori li small { display: block; color: var(--tekst3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.razgovori .novo small { color: var(--tekst); font-weight: 650; }
.razgovori .desno { display: grid; justify-items: end; gap: 4px; flex: none; }

/* profil */
.profil-vrh { display: flex; gap: 20px; align-items: center; margin-bottom: 14px; }
.profil-vrh h1 { margin-bottom: 4px; }
.profil-vrh p { margin: 0 0 3px; }
.raspolozenje { font-style: italic; color: var(--tekst2); }
.profil-slika { display: flex; gap: 18px; align-items: center; margin: 16px 0; flex-wrap: wrap; }
.profil-slika input[type=file] { max-width: 240px; font-size: 14px; }
.odjava { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linija); }

/* table oglasa, admin, tekst */
.oglasi { display: grid; gap: 4px; margin-top: 12px; }
.oglasi > li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linija); }
.oglasi > li:last-child { border-bottom: 0; }
.oglasi > li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.oglasi p { margin: 0 0 4px; }
.clan-admin { border: 1px solid var(--linija); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.clan-admin-vrh { display: flex; gap: 12px; align-items: center; }
.radnje { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linija); }
.radnje select, .radnje input[type=text] { padding: 6px 9px; border-radius: 9px; font-size: 14px; }
.soba-admin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linija); }
.soba-admin h2 { width: 100%; margin-top: 10px; }
.soba-admin input, .soba-admin select { width: auto; padding: 7px 10px; border-radius: 9px; font-size: 14px; }
.soba-admin .kratko { width: 68px; }
.soba-admin .siroko { flex: 1; min-width: 200px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; color: var(--tekst3); font-size: 12.5px; padding: 6px 8px; }
.tabela td { padding: 7px 8px; border-top: 1px solid var(--linija); overflow-wrap: anywhere; vertical-align: top; }
.tekst { max-width: 780px; margin: 0 auto; padding: 28px clamp(18px, 5vw, 44px); }
.tekst h2 { margin-top: 24px; font-size: 19px; }
.tekst p, .tekst li { color: var(--tekst2); line-height: 1.65; }
.tekst ul { list-style: disc; padding-left: 22px; display: grid; gap: 5px; margin-bottom: 10px; }
.tekst strong { color: var(--tekst); }

/* podnožje */
.pod { border-top: 1px solid var(--linija); padding: 18px 0 22px; color: var(--tekst3); font-size: 14px; }
.pod nav { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.pod a, .pod button { color: var(--tekst2) !important; background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; }
.pod button:hover { text-decoration: underline; }
.pod p { margin: 0; }

/* manji ekrani */
@media (max-width: 900px) {
  .dva { grid-template-columns: minmax(0, 1fr); }
  .uvod { grid-template-columns: 1fr; gap: 24px; padding-top: 12px; }
  .uvod-slika { transform: none; }
  .meni a span { display: none; }
  .meni.gost a span, .meni.gost a { display: inline-flex; }
  .ja span { display: none; }
  .ja { padding: 3px; border: 0; }
  .prisutni { position: absolute; right: 0; top: 59px; bottom: 67px; background: var(--karta); z-index: 5; box-shadow: -10px 0 30px rgba(20, 10, 60, .18); transform: translateX(105%); transition: transform .2s; }
  .prisutni.otvoreno { transform: none; }
}
@media (min-width: 901px) {
  #dugme-prisutni { pointer-events: none; }
}
@media (max-width: 600px) {
  .omot { padding: 0 10px; }
  .zag-red { gap: 4px; }
  .logo span:last-child { font-size: 18px; }
  .logo:has(~ .meni:not(.gost)) span:last-child { display: none; }
  .meni a { padding: 8px 9px; }
  .table { grid-template-columns: 1fr; }
  .kartica { padding: 16px; }
  .soba-strana .glavni { padding: 0; }
  .soba-strana .zag { display: none; }
  .soba { border-radius: 0; }
  .por-meni { opacity: .55; }
  .profil-vrh { flex-direction: column; text-align: center; }
  .datum { grid-template-columns: 1fr 1.3fr 1.1fr; }
  .prisutni { top: 59px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}