/* Naslovna „Bento 2“ (naslovna-bento-test.php): pločice, priče kao na Instagramu, velika procjena, potražnja.
   Jedan sistem boja (bijelo, crno, zlato), Inter Tight za tekst i brojke, Bodoni kurziv za naglašenu riječ.
   Sve je u .bento, pa tokeni ne diraju podnožje i kolačiće iz let.css. Pokret samo transform/opacity; mirna verzija bez njega.
   Izvor: DOKUMENTI/redizajn_2026/verzije_v8/build.js (skica), preneseno na pravu stranicu. */
@font-face { font-family: 'Inter Tight'; font-weight: 400 900; src: url('/assets/svitanje/fonts/inter-tight-latin-ext.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; }
@font-face { font-family: 'Inter Tight'; font-weight: 400 900; src: url('/assets/svitanje/fonts/inter-tight-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212, U+2605, U+2713, U+2726; }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 500; src: url('/assets/let/fonts/bodoni-moda-italic.woff2') format('woff2'); }

html { scroll-behavior: smooth; }
body { background: #EDEDEA; margin: 0; }
body.sv-open { overflow: hidden; }
.bento, .bento *, .bento *::before, .bento *::after { box-sizing: border-box; }
.bento { --g: 56px; --sans: 'Inter Tight', system-ui, sans-serif; --serif: 'Bodoni Moda', Georgia, serif; --ease: cubic-bezier(.2,.7,.2,1);
  --bg: #EDEDEA; --bg2: #F6F6F4; --paper: #FFFFFF; --ink: #0F0F0F; --muted: #686864; --line: rgba(15,15,15,.1); --line-j: rgba(15,15,15,.2); --line-s: rgba(15,15,15,.12);
  --gold: #B8955A; --gold-t: #84663A; --gold-l: #D8BE8F; --dark: #121212; --dark2: #1C1C1B; --on-dark: #F2F2EF; --dark-muted: rgba(242,242,239,.62); --dark-line: rgba(242,242,239,.14); --chip: #E6E6E2;
  background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* reseti elemenata s nultom specifičnošću (:where), da pravila s jednom klasom (.tel, .dg-ink, .oglas, .h2) ostanu jača */
:where(.bento) :is(h1, h2, h3, p, ul, ol, figure, blockquote, form, fieldset) { margin: 0; padding: 0; }
:where(.bento) ul { list-style: none; }
:where(.bento) img { display: block; max-width: 100%; }
.bento [hidden] { display: none !important; }
:where(.bento) a { color: inherit; text-decoration: none; cursor: pointer; }
:where(.bento) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:where(.bento) :is(input, select, textarea) { font: inherit; color: inherit; }
.bento :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ik { width: 18px; height: 18px; flex: none; }
.fit { display: inline-block; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tamno { background: var(--dark); color: var(--on-dark); --line-j: rgba(255,255,255,.22); --muted: var(--dark-muted); --line: var(--dark-line); }
.tamno .nad { color: var(--dark-muted); } .tamno .h2 em { color: var(--gold-l); }
/* podnožje i kolačići iz let.css (van .bento) ostaju tamni kao na ostatku sajta; font isti kao stranica (let.css ga veže za body.let) */
.let-foot { background: #0B1220; }
.let-foot, .let-kolacici { font-family: 'Inter Tight', system-ui, sans-serif; }
.let-kolacici-naslov { font-family: 'Bodoni Moda', Georgia, serif; }   /* let.css: var(--serif) definisan samo na body.let */
.let-test { top: 36px; left: 220px; transform: none; }   /* u zaglavlju, desno od loga; na mobitelu dolje (.let-test u @media 860) */

/* zaglavlje (svijetlo; mobilni meni vodi stranica.js preko .let-top, #let-meni-btn, #let-nav) */
.vrh.let-top { position: absolute; inset: 0 0 auto 0; z-index: 30; height: 92px; padding: 0 var(--g); display: flex; align-items: center; justify-content: space-between; gap: 0; background: none; box-shadow: none; }
.vrh .logo { display: block; } .vrh .logo img { height: 27px; width: auto; }
.vrh .let-nav { display: flex; gap: 36px; margin-left: auto; margin-right: 36px; }
.vrh .let-nav a { font: 500 14.5px/1 var(--sans); color: var(--ink); opacity: .82; padding: 6px 0; }
.vrh .let-nav a:hover { opacity: 1; color: var(--ink); } .vrh .let-nav a::after { background: var(--gold); }
.vrh-desno { display: flex; align-items: center; gap: 14px; }
.tel { height: 46px; padding: 0 22px 0 18px; border-radius: 99px; background: var(--ink); color: var(--bg); display: flex; align-items: center; gap: 9px; font: 600 14.5px/1 var(--sans); letter-spacing: .01em; }
.vrh .let-meni-btn { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--ink); }
.vrh .let-meni-btn i { width: 18px; height: 1.5px; background: currentColor; display: block; }

/* zajedničko */
.nad { display: flex; align-items: center; gap: 12px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.nad::before { content: ''; width: 34px; height: 1px; background: var(--gold); }
.nad b { font-weight: 700; color: var(--gold-t); } .tamno .nad b { color: var(--gold-l); }
.h2 { font: 750 clamp(40px, 4.6vw, 68px)/.98 var(--sans); letter-spacing: -.045em; margin-top: 18px; }
.h2 em, .h1 em, .kraj-poziv em, .trazim h3 em, .pr-forma h3 em, .sv-kupci h3 em, .pr-hvala h3 em { font: italic 500 1.04em/1 var(--serif); letter-spacing: -.01em; color: var(--gold-t); }
.sek { padding: 96px var(--g); }
.sek-glava { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.uvod { max-width: 520px; color: var(--muted); font-size: 17px; }
.dg { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 99px; font: 600 15px/1 var(--sans); white-space: nowrap; transition: transform .2s var(--ease), background .2s; }
.dg:hover { transform: translateY(-1px); }
.dg:disabled { opacity: .6; cursor: wait; transform: none; }
.dg-ink { background: var(--ink); color: var(--bg2); }
.dg-zlato { background: var(--gold); color: #14110C; }
.dg-bijelo { background: #fff; color: #111; }
.dg-obrub { border: 1px solid var(--line-j); color: inherit; }
.dg-obrub-s { border: 1px solid rgba(255,255,255,.3); color: #fff; }
.dg-staklo { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); }
.dugmad { display: flex; gap: 10px; flex-wrap: wrap; }
.okr { position: absolute; right: 18px; top: 18px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #111; transition: transform .25s var(--ease); }
.pl:hover .okr { transform: rotate(45deg); }
.pl { position: relative; border-radius: 28px; background: var(--paper); overflow: hidden; min-width: 0; } .pl.tamno { background: var(--dark); }
.pl small { font: 600 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.puls { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 0 5px rgba(216,188,140,.18); display: inline-block; animation: puls 2.2s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 9px rgba(216,188,140,.06); } }
.znak { position: absolute; z-index: 2; left: 16px; top: 16px; padding: 7px 11px; border-radius: 99px; background: rgba(255,255,255,.94); color: #111; font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.znak + .znak { left: 86px; }
.greska { color: #B42318; font: 500 13px/1.4 var(--sans); }

/* poruka (pretraga kao poruka) */
.poruka-polje { position: relative; overflow: hidden; height: 68px; border-radius: 99px; background: #fff; display: flex; align-items: center; padding: 0 8px 0 28px; gap: 12px; box-shadow: 0 18px 50px -18px rgba(20,16,10,.28); border: 1px solid rgba(20,16,10,.06); }
.poruka-polje input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 500 17px/1 var(--sans); letter-spacing: -.01em; padding: 0; }
.poruka-polje input::placeholder { color: inherit; opacity: 1; }
.poruka-mjera { position: absolute; left: 28px; top: 0; visibility: hidden; white-space: pre; font: 500 17px/1 var(--sans); letter-spacing: -.01em; }
.kursor { position: absolute; left: 29px; top: 23px; width: 2px; height: 22px; background: var(--gold); animation: treperi 1s steps(2) infinite; }
.kursor.sakrij { display: none; }
@keyframes treperi { 50% { opacity: 0; } }
.poruka-dg b { background: rgba(0,0,0,.14); border-radius: 99px; padding: 4px 9px; font-weight: 700; }
.poruka-dg b.skok { animation: skok .35s var(--ease); }
@keyframes skok { 40% { transform: translateY(-5px) scale(1.12); } }
.cipovi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; font: 500 13px/1 var(--sans); min-height: 32px; }
.cipovi span { color: var(--muted); margin-right: 4px; }
.cipovi i, .cipovi .plus { font-style: normal; padding: 8px 12px; border-radius: 99px; background: var(--chip); color: var(--ink); animation: pop .3s var(--ease); font: inherit; }
.cipovi .plus { background: transparent; border: 1px dashed var(--gold); color: var(--gold-t); cursor: pointer; }
.cipovi i.prazno { background: transparent; color: var(--muted); padding-left: 0; animation: none; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.staklo .poruka-polje { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); color: #fff; }
.staklo .poruka-polje input { color: #fff; }
.staklo .cipovi span { color: rgba(255,255,255,.7); } .staklo .cipovi i { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(8px); }
.staklo .cipovi .plus { background: transparent; border-color: var(--gold-l); color: var(--gold-l); } .staklo .cipovi i.prazno { color: rgba(255,255,255,.7); background: transparent; }
.staklo .kursor { background: var(--gold-l); }

/* klizač */
.bento input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; margin: 0; }
.bento input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold) var(--p, 30%), var(--line-s) var(--p, 30%)); }
.bento input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11.5px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 6px 16px -4px rgba(0,0,0,.35); cursor: grab; }
.bento input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line-s); }
.bento input[type=range]::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--gold); }
.bento input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 6px 16px -4px rgba(0,0,0,.35); }

/* priče: krugovi */
.hero { position: relative; padding: 92px 16px 16px; }
.price { padding: 14px 0 18px; }
.price-red { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px calc(var(--g) - 16px - 8px) 4px; scroll-snap-type: x proximity; }
.price-red::-webkit-scrollbar { display: none; }
.krug { flex: none; width: 92px; display: grid; justify-items: center; gap: 7px; font: 600 11.5px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); scroll-snap-align: start; transition: transform .25s var(--ease); }
.krug:hover { transform: translateY(-2px); }
.krug i { position: relative; width: 74px; height: 74px; border-radius: 50%; padding: 3px; background: var(--line-j); display: block; }
.krug i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 200deg, #F6E3B4, #C9A266, #7E5E2C, #D8BE8F, #F6E3B4); opacity: 0; transition: opacity .3s; }
.krug i img, .krug i b { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); display: grid; place-items: center; background: #DCDAD6; }
.krug.novo i::before { opacity: 1; animation: zlato 6s linear infinite; }
@keyframes zlato { to { transform: rotate(360deg); } }
.krug.novo span { color: var(--gold-t); }
.krug.vidjeno i { background: var(--line); } .krug.vidjeno i::before { opacity: 0; animation: none; }
.kupci-krug i b { background: var(--dark); color: var(--gold-l); font: 800 24px/1 var(--sans); letter-spacing: -.04em; }
.krug span { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* prvi ekran: pločice */
.mreza { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 132px; gap: 12px; }
.glavna { grid-column: span 7; grid-row: span 4; color: #fff; }
.glavna-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 50% 40%; animation: kb 28s linear forwards; }
@keyframes kb { to { transform: scale(1.08); } }
.glavna::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,10,.12), rgba(10,10,10,.1) 30%, rgba(10,10,10,.8)); }
.glavna-sad { position: absolute; z-index: 2; left: 40px; right: 40px; bottom: 36px; }
.glavna-sad .nad { color: rgba(255,255,255,.8); } .glavna-sad .nad::before { background: var(--gold-l); }
.h1 { font: 750 clamp(56px, 6vw, 96px)/.9 var(--sans); letter-spacing: -.055em; margin: 18px 0 28px; }
.h1 em { display: block; color: var(--gold-l); font-size: 1em; }
.rij { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em .04em .24em; margin: -.06em -.04em -.24em; }
.rij b { display: inline-block; font-weight: inherit; transform: translateY(112%); transition: transform .8s var(--ease); }
.rij:nth-child(2) b { transition-delay: .07s; } .rij:nth-child(3) b { transition-delay: .14s; }
html.spremno .rij b, html:not(.js) .rij b { transform: none; }
.glavna .cipovi i:nth-child(n+5) { display: none; }
.broj { grid-column: span 3; grid-row: span 2; padding: 28px; display: flex; flex-direction: column; }
.broj b { font: 800 118px/.85 var(--sans); letter-spacing: -.06em; margin-top: auto; font-variant-numeric: tabular-nums; }
.broj > span { font-size: 14px; color: var(--muted); margin-top: 10px; }
.prica { grid-column: span 2; grid-row: span 2; color: #fff; text-align: left; display: block; width: 100%; }
.prica > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.prica > img.vidi { opacity: 1; }
.prica::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,.72)); }
.trake { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; gap: 4px; }
.trake i { flex: 1; height: 2.5px; background: rgba(255,255,255,.4); border-radius: 2px; overflow: hidden; position: relative; }
.trake i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.trake i.puna::after { transform: none; } .trake i.tece::after { animation: tece 4s linear forwards; }
@keyframes tece { to { transform: none; } }
.prica-dno { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; }
.prica-dno small { color: rgba(255,255,255,.85); } .prica-dno b { display: block; font: 750 24px/1.1 var(--sans); letter-spacing: -.03em; margin-top: 6px; }
.prica-hint { position: absolute; z-index: 2; right: 14px; top: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px 7px 12px; border-radius: 99px; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); font: 600 11.5px/1 var(--sans); color: #fff; }
.kupac-pl { grid-column: span 5; grid-row: span 2; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.kupac-pl > small { color: var(--dark-muted); display: flex; align-items: center; gap: 10px; }
.kupac-sad { margin-top: auto; display: grid; gap: 6px; transition: transform .35s var(--ease), opacity .35s; }
.kupac-sad.ode { transform: translateY(-14px); opacity: 0; } .kupac-sad.dolazi { transform: translateY(14px); opacity: 0; transition: none; }
.kupac-pl strong { font: 600 23px/1.2 var(--sans); letter-spacing: -.025em; }
.kupac-sad span { font: 750 34px/1 var(--sans); letter-spacing: -.04em; color: var(--gold-l); }
.kupac-sad span.mjesta { font: 600 17px/1.3 var(--sans); letter-spacing: -.02em; }
.kupac-link { font: 600 14px/1 var(--sans); display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kalk { grid-column: span 4; grid-row: span 2; padding: 26px 28px; display: flex; flex-direction: column; }
.kalk h3 { font: 650 22px/1.15 var(--sans); letter-spacing: -.025em; margin-top: 8px; }
.kalk-red { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.kalk-naselje { flex: 1; min-width: 0; }
.bento .kalk select, .bento .pr-forma select { width: 100%; height: 40px; border-radius: 99px; border: 1px solid var(--line-j); padding: 0 36px 0 14px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230F0F0F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; appearance: none; -webkit-appearance: none; font: 500 14px/1 var(--sans); color: var(--ink); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.kalk-m2 { flex: none; padding: 9px 14px; border-radius: 99px; background: var(--ink); color: var(--bg2); font: 650 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.kalk input[type=range] { margin-top: 4px; }
.iznos { font: 750 34px/1 var(--sans); letter-spacing: -.045em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kalk-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font: 600 14px/1 var(--sans); color: var(--gold-t); }
.agent-pl { grid-column: span 3; grid-row: span 2; background: #DCDAD6; display: block; }
.agent-pl > img { position: absolute; left: 0; bottom: 0; width: 62%; height: 118%; object-fit: cover; object-position: 50% 0; }
.agent-pl div { position: absolute; right: 22px; top: 26px; text-align: right; display: grid; gap: 4px; }
.agent-pl b { font: 800 54px/.9 var(--sans); letter-spacing: -.05em; } .agent-pl i { font-style: normal; color: var(--gold-t); letter-spacing: 2px; font-size: 13px; }
.agent-pl span { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 70px; }
.trazim { grid-column: span 3; grid-row: span 2; padding: 26px; background: #F3EEE4; display: flex; flex-direction: column; }
.trazim h3 { font: 650 22px/1.1 var(--sans); letter-spacing: -.025em; margin-top: 10px; }
.trazim h3 em { display: block; font-size: 1.1em; }
.trazim-forma { margin-top: auto; position: relative; }
.trazim-forma input { width: 100%; height: 50px; border-radius: 99px; border: 1px solid var(--line-j); background: #fff; padding: 0 56px 0 18px; font: 500 14px/1 var(--sans); outline: none; }
.trazim-forma input:focus { border-color: var(--gold); }
.okr-dg { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.trazim .nap { font-size: 12px; color: var(--muted); margin-top: 10px; }
.savjet { grid-column: span 2; grid-row: span 2; padding: 26px; color: var(--on-dark); display: flex; flex-direction: column; }
.savjet small { color: var(--dark-muted); display: block; max-width: calc(100% - 44px); } .savjet h3 { font: 600 19px/1.2 var(--sans); letter-spacing: -.02em; margin-top: auto; }
.savjet .okr { top: 20px; right: 20px; }

/* 01 ponuda */
.ponuda { padding-left: 16px; padding-right: 16px; padding-top: 72px; } .ponuda .sek-glava { padding: 0 calc(var(--g) - 16px); }
.filteri { display: flex; gap: 8px; font: 600 13.5px/1 var(--sans); flex-wrap: wrap; }
.filteri button { padding: 11px 16px; border-radius: 99px; background: var(--paper); color: var(--muted); transition: background .2s, color .2s; }
.filteri button.on { background: var(--ink); color: #fff; }
.mozaik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 12px; }
.oglas { color: #fff; display: block; } .oglas.d0 { grid-column: span 2; grid-row: span 2; }
.oglas.sakrij { display: none; }
.oglas > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); background: #DCDAD6; }
.oglas:hover > img { transform: scale(1.04); }
.oglas::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.78)); }
.oglas-dno { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; }
.oglas-dno small { color: rgba(255,255,255,.85); }
.oglas-dno h3 { font: 600 18px/1.2 var(--sans); letter-spacing: -.02em; margin: 6px 0 4px; }
.oglas-dno b { font: 750 23px/1 var(--sans); letter-spacing: -.035em; display: block; }
.oglas-dno span { font-size: 12.5px; color: rgba(255,255,255,.75); display: block; margin-top: 5px; }
.oglas.d0 h3 { font-size: 30px; } .oglas.d0 b { font-size: 38px; }
.svi { padding: 26px; display: flex; flex-direction: column; color: var(--on-dark); }
.svi small { color: var(--dark-muted); } .svi b { font: 800 96px/.85 var(--sans); letter-spacing: -.06em; margin-top: auto; } .svi > span:not(.okr) { font-size: 13px; color: var(--dark-muted); margin-top: 8px; }

/* 02 procjena */
.procjena { margin: 0 16px; border-radius: 28px; }
.pr-mreza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; align-items: start; }
.pr-ploca { display: grid; gap: 12px; min-width: 0; }
.pr-k { background: var(--dark2); border-radius: 24px; padding: 24px 26px; min-width: 0; }
.pr-k > small { font: 600 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dark-muted); display: block; margin-bottom: 14px; }
.pr-opcine { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--dark-line); }
.pr-opcine button { padding: 9px 13px; border-radius: 99px; font: 600 13px/1 var(--sans); color: var(--dark-muted); transition: background .2s, color .2s; }
.pr-opcine button.on { background: rgba(255,255,255,.1); color: #fff; }
.pr-cipovi { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-cipovi button { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--dark-line); font: 600 14px/1.2 var(--sans); color: var(--on-dark); text-align: left; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.pr-cipovi button em { font-style: normal; font-size: 12px; color: var(--dark-muted); font-variant-numeric: tabular-nums; }
.pr-cipovi button.on, .pr-cipovi button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #14110C; }
.pr-cipovi button.on em, .pr-cipovi button[aria-pressed="true"] em { color: rgba(20,17,12,.7); }
.pr-cipovi button:active { transform: scale(.97); }
.pr-m2 { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pr-m2 b { font: 800 clamp(64px, 6vw, 96px)/.9 var(--sans); letter-spacing: -.06em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; }
.pr-m2 b i { font: 600 22px/1 var(--sans); font-style: normal; color: var(--dark-muted); letter-spacing: 0; }
.pr-pm { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--dark-line); font: 500 28px/1 var(--sans); display: grid; place-items: center; color: var(--on-dark); transition: background .2s; }
.pr-pm:hover { background: rgba(255,255,255,.08); }
.pr-povrsina input[type=range] { margin-top: 10px; --line-s: rgba(255,255,255,.18); }
.pr-plocice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pr-plocice button { display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: 18px; border: 1px solid var(--dark-line); text-align: left; color: var(--on-dark); transition: background .2s, border-color .2s, transform .2s var(--ease); }
.pr-plocice button b { font: 650 15px/1.2 var(--sans); letter-spacing: -.01em; } .pr-plocice button span { font-size: 12px; color: var(--dark-muted); line-height: 1.3; }
.pr-plocice button em { font-style: normal; font-size: 12.5px; color: var(--gold-l); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pr-plocice button.on { background: var(--gold); border-color: var(--gold); color: #14110C; } .pr-plocice button.on span, .pr-plocice button.on em { color: rgba(20,17,12,.7); }
.pr-plocice button:active { transform: scale(.98); }
.pr-rez { position: sticky; top: 16px; min-width: 0; }
.pr-kartica { background: var(--paper); color: var(--ink); border-radius: 24px; --muted: #686864; --line-j: rgba(15,15,15,.2); }
.pr-gore { padding: 26px 28px 22px; border-bottom: 1px dashed var(--line-j); transition: transform .3s var(--ease); transform-style: preserve-3d; }
.pr-gore > small { font: 600 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pr-iznos { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 800 clamp(34px, 3vw, 46px)/1 var(--sans); letter-spacing: -.05em; margin-top: 12px; font-variant-numeric: tabular-nums; }
.pr-iznos i { font-style: normal; color: var(--muted); font-weight: 500; } .pr-iznos em { font: 600 18px/1 var(--sans); color: var(--muted); letter-spacing: 0; }
.pr-m2c { font: 500 14px/1 var(--sans); color: var(--muted); margin-top: 10px; font-variant-numeric: tabular-nums; }
.pr-racun { list-style: none; margin-top: 18px; display: grid; gap: 7px; font: 500 13.5px/1.3 var(--sans); }
.pr-racun li { display: flex; align-items: baseline; gap: 8px; }
.pr-racun li span { color: var(--muted); } .pr-racun li::after { content: ''; flex: 1; order: 1; border-bottom: 1px dotted var(--line-j); transform: translateY(-4px); } .pr-racun li b { order: 2; font-weight: 650; font-variant-numeric: tabular-nums; }
.pr-racun li.nov b { animation: nov .7s var(--ease); }
@keyframes nov { 0% { color: var(--gold-t); transform: translateY(-3px); } }
.pr-nap { font-size: 12px; color: var(--muted); margin-top: 16px; line-height: 1.45; }
.pr-forma, .pr-hvala { padding: 24px 28px 26px; display: grid; gap: 12px; }
.pr-forma h3, .pr-hvala h3 { font: 650 24px/1.1 var(--sans); letter-spacing: -.03em; } .pr-forma > p, .pr-hvala > p { font-size: 14px; color: var(--muted); margin-top: -4px; }
.pr-polja { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-forma label { display: grid; gap: 6px; font: 600 12px/1 var(--sans); color: var(--muted); }
.bento .pr-forma input { height: 46px; border-radius: 12px; border: 1px solid var(--line-j); padding: 0 14px; background: var(--bg2); font: 500 15px/1 var(--sans); outline: none; color: var(--ink); }
.bento .pr-forma input:focus { border-color: var(--gold); background: #fff; }
.bento .pr-forma input[aria-invalid="true"] { border-color: #B42318; }
.bento .pr-forma select { height: 46px; border-radius: 12px; background-color: var(--bg2); }
.pr-forma .dg { width: 100%; margin-top: 4px; }
.pr-ili { display: flex; align-items: center; gap: 8px; } .pr-ili span { font-size: 13px; color: var(--muted); margin-right: auto; white-space: nowrap; } .pr-ili .dg { height: 42px; padding: 0 16px; font-size: 13.5px; }
.pravno { font-size: 11.5px; color: var(--muted); line-height: 1.45; } .pravno a { text-decoration: underline; }
.pr-traka { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 40; display: none; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 20px; background: var(--ink); color: #fff; box-shadow: 0 20px 50px -16px rgba(0,0,0,.6); transform: translateY(120%); transition: transform .35s var(--ease); }
.pr-traka.on { transform: none; }
.pr-traka small { font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); display: block; } .pr-traka b { font: 750 16px/1.2 var(--sans); letter-spacing: -.03em; display: block; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-traka > div { flex: 1; min-width: 0; } .pr-traka .dg { flex: none; height: 44px; padding: 0 16px; font-size: 14px; }

/* 03 potražnja */
.potraznja { background: var(--bg2); }
.po-mreza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; align-items: start; }
.po-pisi { padding: 30px 32px 28px; display: grid; gap: 14px; border: 1px solid var(--line); }
.po-natpis { font: 600 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bento .po-pisi textarea { width: 100%; min-height: 128px; resize: vertical; border: 0; outline: none; background: none; font: 500 clamp(20px, 1.8vw, 26px)/1.35 var(--sans); letter-spacing: -.02em; padding: 0; }
.bento .po-pisi textarea::placeholder { color: rgba(15,15,15,.32); }
.po-pisi .cipovi { margin-top: 0; padding-top: 14px; border-top: 1px dashed var(--line-j); }
.po-polja { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bento .po-polja input { width: 100%; height: 52px; border-radius: 99px; border: 1px solid var(--line-j); padding: 0 20px; background: var(--bg2); font: 500 15px/1 var(--sans); outline: none; color: var(--ink); }
.bento .po-polja input:focus { border-color: var(--gold); background: #fff; }
.bento .po-polja input[aria-invalid="true"] { border-color: #B42318; }
.po-slanje { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.po-nap { font-size: 12.5px; color: var(--muted); }
.po-hvala h3, .po-kupci h3 { font: 600 20px/1 var(--sans); }
.po-hvala h3 { font-size: 26px; letter-spacing: -.03em; } .po-hvala p { color: var(--muted); margin-top: 6px; }
.po-kupci { padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 12px; }
.po-kupci h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.po-kupci > p { font-size: 12.5px; color: var(--dark-muted); margin-top: 8px; }
article.kupac { padding: 18px 20px; border-radius: 18px; background: var(--dark2); display: grid; gap: 4px; }
article.kupac small { display: flex; gap: 10px; align-items: center; color: var(--dark-muted); flex-wrap: wrap; } article.kupac small b { color: var(--gold-l); letter-spacing: .1em; }
article.kupac strong { font: 600 18px/1.25 var(--sans); letter-spacing: -.02em; margin-top: 4px; }
article.kupac > span { font-size: 14px; color: var(--dark-muted); }
article.kupac em { font: 750 22px/1 var(--sans); letter-spacing: -.035em; color: var(--gold-l); font-style: normal; margin-top: 6px; }
article.kupac a { font: 600 13.5px/1 var(--sans); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: #fff; }
article.kupac.moja { background: transparent; border: 1px dashed var(--gold-l); animation: pop .35s var(--ease); }

/* 04 agent, traka, kraj */
.agent { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 96px; align-items: center; }
.ag-luk { position: relative; width: min(100%, 440px); aspect-ratio: 440 / 560; margin: 0 auto; min-width: 0; }
.ag-obrub { position: absolute; inset: -14px; border-radius: 240px 240px 0 0; border: 1px solid var(--gold); opacity: .5; }
.ag-foto { position: absolute; inset: 0; border-radius: 220px 220px 0 0; overflow: hidden; background: #E6E3DE; }
.ag-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.ag-ocjena { position: absolute; right: -44px; bottom: 54px; background: var(--paper); border-radius: 18px; padding: 16px 20px; display: flex; gap: 14px; align-items: center; box-shadow: 0 24px 50px -20px rgba(0,0,0,.3); color: var(--ink); }
.ag-ocjena b { font: 800 40px/.9 var(--sans); letter-spacing: -.05em; } .ag-ocjena span { font-size: 12.5px; color: var(--muted); display: grid; gap: 3px; } .ag-ocjena i { font-style: normal; color: var(--gold-t); letter-spacing: 2px; }
.ag-tekst { min-width: 0; }
.ag-uloga { color: var(--muted); margin-top: 16px; font-size: 15px; }
.ag-citat { font: 500 clamp(18px, 1.5vw, 21px)/1.45 var(--sans); letter-spacing: -.015em; margin-top: 28px; padding-left: 20px; border-left: 2px solid var(--gold); }
.ag-ko { font-size: 13px; color: var(--muted); margin-top: 10px; } .ag-ko a { text-decoration: underline; }
.agent .dugmad { margin-top: 28px; } .ag-reg { font-size: 12.5px; color: var(--muted); margin-top: 18px; }
.traka { overflow: hidden; border-block: 1px solid var(--line); padding: 20px 0; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.traka > div { display: flex; gap: 28px; width: max-content; animation: klizi 48s linear infinite; }
.traka i { color: var(--gold); font-style: normal; } .traka em { font: italic 500 15px/1 var(--serif); text-transform: none; letter-spacing: 0; color: var(--gold-t); }
@keyframes klizi { to { transform: translateX(-33.3333%); } }
.kraj { margin: 16px; border-radius: 28px; padding: 72px var(--g) 40px; }
.kraj-gore { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.kraj-poziv { font: 750 clamp(36px, 3.6vw, 54px)/1 var(--sans); letter-spacing: -.045em; }
.kraj-broj { margin-top: 40px; font: 800 1px/.9 var(--sans); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.cilim { display: block; width: 100%; height: 16px; margin: 40px 0 28px; opacity: .8; }
.dno { display: flex; align-items: center; gap: 28px; font-size: 12.5px; color: var(--dark-muted); flex-wrap: wrap; }
.dno-logo { height: 22px; width: auto; } .dno-linkovi { margin-left: auto; display: flex; gap: 20px; } .dno-linkovi a:hover { color: #fff; }

/* prozor priča */
.sv { position: fixed; inset: 0; z-index: 100; background: #070707; display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.sv.on { opacity: 1; }
.sv-okvir { position: relative; width: min(100%, calc((100vh - 48px) * 9 / 16)); height: calc(100vh - 48px); border-radius: 24px; overflow: hidden; background: #141414; user-select: none; -webkit-user-select: none; }
.sv-slika img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.sv-slika img.vidi { opacity: 1; }
.sv-okvir::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 140px; z-index: 1; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.sv-okvir::after { content: ''; position: absolute; inset: auto 0 0 0; height: 55%; z-index: 1; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.82)); pointer-events: none; }
.sv-tamno .sv-okvir::before, .sv-tamno .sv-okvir::after { display: none; }
.sv-trake { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; z-index: 3; display: flex; gap: 4px; }
.sv-trake i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.sv-trake i b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.sv-trake i.puna b { transform: none; } .sv-trake i.tece b { animation: tece 6s linear forwards; }
.sv.pauza .sv-trake i.tece b { animation-play-state: paused; }
.sv-glava { position: absolute; top: calc(26px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; z-index: 4; display: flex; align-items: center; gap: 10px; color: #fff; font: 600 13.5px/1 var(--sans); }
.sv-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); } .sv-avatar img { width: 20px; }
.sv-br { color: rgba(255,255,255,.65); font-weight: 500; font-variant-numeric: tabular-nums; }
.sv-x { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font: 300 26px/1 var(--sans); display: grid; place-items: center; }
.sv-dno { position: absolute; left: 22px; right: 22px; bottom: 26px; z-index: 3; color: #fff; }
.sv-dno small { font: 600 11px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.sv-dno h3 { font: 750 clamp(30px, 4vw, 38px)/1 var(--sans); letter-spacing: -.04em; margin: 10px 0 12px; }
.sv-dno p { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .sv-dno p b { font: 800 26px/1 var(--sans); letter-spacing: -.035em; } .sv-dno p span { font-size: 14px; color: rgba(255,255,255,.75); }
.sv-dugmad { display: flex; gap: 8px; margin-top: 20px; } .sv-dugmad .dg { height: 48px; }
.sv-zona { position: absolute; top: 90px; bottom: 200px; width: 34%; z-index: 2; } .sv-prije { left: 0; } .sv-poslije { right: 0; }
.sv-kupci { position: absolute; inset: 0; z-index: 3; padding: calc(92px + env(safe-area-inset-top, 0px)) 24px 28px; color: var(--on-dark); display: flex; flex-direction: column; gap: 10px; background: var(--dark); overflow: auto; }
.sv-kupci > small { font: 600 11px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dark-muted); }
.sv-kupci h3 { font: 750 34px/1 var(--sans); letter-spacing: -.04em; margin: 8px 0 12px; }
.sv-kupci .dg { margin-top: auto; }
.sv-str { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; }
.sv-str .ik { width: 22px; height: 22px; }
.sv-str-l { left: calc(50% - (100vh - 48px) * 9 / 32 - 80px); } .sv-str-r { right: calc(50% - (100vh - 48px) * 9 / 32 - 80px); }

/* mirna verzija */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bento *, .bento *::before, .bento *::after { animation: none !important; transition: none !important; }
  .rij b { transform: none; }
  .trake i.tece::after, .sv-trake i.tece b { transform: none; }
  .kursor { display: none; }
}

/* srednji ekrani */
@media (max-width: 1100px) {
  .bento { --g: 32px; }
  .mreza { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .glavna { grid-column: span 6; } .broj, .prica, .kalk, .agent-pl, .trazim, .savjet { grid-column: span 3; } .kupac-pl { grid-column: span 6; }
  .mozaik { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 260px; }
  .pr-mreza, .po-mreza { grid-template-columns: minmax(0, 1fr); } .pr-rez { position: static; }
  .pr-plocice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}
/* mobitel (meni: let.css ispod 860 px pokazuje #let-meni-btn, a .let-nav otvara stranica.js) */
@media (max-width: 860px) {
  .vrh .let-meni-btn { display: flex; }
  .vrh .let-nav { margin: 0; }
  .vrh.let-top.is-open .let-nav a { color: #fff; opacity: 1; }   /* otvoreni meni je tamni prekrivač iz let.css */
  .let-test { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%; right: auto; transform: translateX(-50%); z-index: 41; }
}
@media (max-width: 760px) {
  .bento { --g: 16px; }
  .vrh.let-top { height: 76px; padding: 0 16px; } .tel span { display: none; } .tel { padding: 0 14px; width: 46px; justify-content: center; }
  .hero { padding: 76px 10px 10px; }
  .price { padding: 10px 0 14px; } .price-red { padding: 6px 4px 4px; gap: 2px; }
  .krug { width: 80px; } .krug i { width: 66px; height: 66px; }
  .mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; }
  .pl { border-radius: 22px; }
  .glavna { grid-column: span 2; grid-row: auto; min-height: 560px; order: 0; }
  .glavna-sad { left: 18px; right: 18px; bottom: 18px; }
  .glavna-sad .nad { font-size: 10px; letter-spacing: .14em; } .glavna-sad .nad::before { width: 16px; }
  .h1 { font-size: 54px; margin: 12px 0 20px; }
  .poruka-polje { height: 60px; padding-left: 20px; } .poruka-polje input { font-size: 15px; } .poruka-mjera { left: 20px; font-size: 15px; } .kursor { left: 21px; top: 19px; }
  .poruka-dg { height: 46px; padding: 0 16px; font-size: 14px; } .poruka-dg b { display: none; }
  .glavna .cipovi i:nth-child(n+4) { display: none; }
  .broj, .prica, .agent-pl, .savjet { grid-column: span 1; grid-row: auto; min-height: 210px; }
  .broj { order: 1; padding: 20px; } .broj b { font-size: 76px; } .broj > span { font-size: 12px; } .broj .okr { width: 34px; height: 34px; right: 12px; top: 12px; }
  .prica { order: 2; } .prica-hint { right: 10px; top: 24px; }
  .kupac-pl { order: 3; grid-column: span 2; grid-row: auto; padding: 22px; }
  .kupac-pl strong { font-size: 20px; margin-top: 18px; } .kupac-sad span { font-size: 28px; }
  .kalk { order: 4; grid-column: span 2; grid-row: auto; padding: 22px; min-height: 0; } .kalk-link { margin-top: 14px; } .iznos { font-size: 28px; white-space: nowrap; }
  .trazim { order: 5; grid-column: span 2; grid-row: auto; padding: 20px; min-height: 0; } .trazim h3 { font-size: 21px; } .trazim-forma { margin-top: 18px; }
  .agent-pl { order: 6; } .agent-pl b { font-size: 40px; } .agent-pl span { display: none; } .agent-pl div { right: 14px; top: 16px; }
  .savjet { order: 7; padding: 18px; } .savjet h3 { font-size: 15.5px; } .savjet .okr { width: 34px; height: 34px; right: 12px; top: 12px; }
  .sek { padding: 56px 10px; } .sek-glava { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 24px; padding: 0 8px; }
  .ponuda { padding-top: 44px; } .ponuda .sek-glava { padding: 0 8px; } .filteri { overflow-x: auto; flex-wrap: nowrap; width: calc(100% + 16px); margin: 0 -8px; padding: 0 8px; scrollbar-width: none; } .filteri::-webkit-scrollbar { display: none; } .filteri button { flex: none; }
  .mozaik { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 8px; }
  .oglas.d0 h3 { font-size: 24px; } .oglas.d0 b { font-size: 30px; }
  .oglas-dno { left: 14px; right: 14px; bottom: 14px; } .oglas-dno h3 { font-size: 14.5px; } .oglas-dno b { font-size: 18px; } .oglas-dno span { display: none; } .oglas.d0 .oglas-dno span { display: block; }
  .oglas .okr, .svi .okr { width: 34px; height: 34px; right: 12px; top: 12px; }
  .svi { padding: 18px; } .svi b { font-size: 64px; }
  .procjena { margin: 0 10px; border-radius: 22px; }
  .pr-k { padding: 18px; border-radius: 18px; }
  .pr-opcine { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 12px; padding: 0 18px 12px; } .pr-opcine::-webkit-scrollbar { display: none; } .pr-opcine button { flex: none; }
  .pr-cipovi button { min-height: 44px; padding: 0 14px; font-size: 13.5px; }
  .pr-m2 b { font-size: 64px; } .pr-pm { width: 46px; height: 46px; }
  .pr-plocice { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-plocice button { padding: 14px; }
  .pr-gore, .pr-forma, .pr-hvala { padding-left: 20px; padding-right: 20px; }
  .pr-iznos { font-size: 32px; } .pr-polja { grid-template-columns: minmax(0, 1fr); }
  .pr-ili { flex-wrap: wrap; } .pr-ili span { width: 100%; margin: 0; }
  .pr-traka { display: flex; }
  .po-pisi { padding: 22px 20px; } .po-pisi textarea { font-size: 19px; min-height: 110px; }
  .po-polja { grid-template-columns: minmax(0, 1fr); } .po-slanje .dg { width: 100%; }
  .po-kupci { padding: 22px 18px; }
  .agent { gap: 40px; } .ag-luk { width: min(100%, 300px); } .ag-ocjena { right: -6px; bottom: 20px; padding: 12px 14px; } .ag-ocjena b { font-size: 30px; }
  .kraj { margin: 10px; border-radius: 22px; padding: 48px 18px 28px; } .kraj-gore { flex-direction: column; align-items: flex-start; gap: 24px; } .kraj-broj { margin-top: 28px; }
  .dno { gap: 14px; } .dno-linkovi { margin-left: 0; }
  .sv-okvir { width: 100%; height: 100%; border-radius: 0; } .sv-str { display: none; }
  .sv-dno { left: 18px; right: 18px; bottom: max(22px, env(safe-area-inset-bottom)); } .sv-dno h3 { font-size: 30px; }
  .sv-dugmad .dg { height: 46px; padding: 0 18px; font-size: 14px; }
  .sv-kupci { padding-left: 18px; padding-right: 18px; }
}