/* ══════════════════════════════════════════════════════════════════════════
   PRODAJNA STRANA MAGAZINA (/prodaja)
   Tamna, „proizvodna" strana odvojena od uređivačkog izgleda sajta. Makete
   ekrana su čist CSS: prozor pregledača i telefon u blagoj 3D perspektivi,
   napunjeni pravim naslovnicama iz baze, bez ijedne slike maketе.
   ══════════════════════════════════════════════════════════════════════════ */
.trek-pr {
	--pr-ink: #0d1017;
	--pr-ink-2: #151a24;
	--pr-linija: rgba(255, 255, 255, .12);
	--pr-tekst: #e7eaf0;
	--pr-tiho: #949cab;
	--pr-akcent: #4bff2a;
	--pr-akcent-2: #ffaaea;
	background: var(--pr-ink);
	color: var(--pr-tekst);
}
.trek-pr a { text-decoration: none; }
.trek-pr h1, .trek-pr h2, .trek-pr h3 {
	color: #fff;
	/* Prodajna strana je proizvodna, ne uređivačka: bezserifni naslovi umesto magazinskog serifa. */
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Hero ── */
.trek-pr-hero { padding: 4rem 0 4.5rem; background: radial-gradient(120% 90% at 15% 0%, #1d2634 0%, var(--pr-ink) 62%); }
.trek-pr-oznaka { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--pr-akcent); border: 1px solid rgba(75,255,42,.3); border-radius: 100px; padding: 7px 15px; }
.trek-pr-tacka { width: 8px; height: 8px; border-radius: 50%; background: var(--pr-akcent); box-shadow: 0 0 0 4px rgba(75,255,42,.16); }
.trek-pr-h1 { font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.1; letter-spacing: -.025em; margin: 1.1rem 0 1rem; }
.trek-pr-uvod { font-size: 1.06rem; line-height: 1.65; color: var(--pr-tiho); max-width: 46ch; margin-bottom: 1.8rem; }

.trek-pr-brojke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.6rem; margin-bottom: 2rem; }
.trek-pr-brojke b { display: block; font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.trek-pr-brojke span { display: block; font-size: .82rem; color: var(--pr-tiho); margin-top: 2px; }

.trek-pr-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.trek-pr-cta-sred { justify-content: center; }
.trek-pr-btn { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: .95rem;
	padding: 14px 28px; border-radius: 100px; transition: transform .14s ease, opacity .14s ease; }
.trek-pr-btn:hover { transform: translateY(-2px); }
.trek-pr-btn-glavni { background: var(--pr-akcent); color: #0d1017; }
.trek-pr-btn-tihi { border: 1px solid var(--pr-linija); color: var(--pr-tekst); }
.trek-pr-btn-svetli { background: #fff; color: #0d1017; }
.trek-pr-btn-obris { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.trek-pr-mail { margin-top: 1rem; font-size: .88rem; color: var(--pr-tiho); }
.trek-pr-mail a { color: var(--pr-akcent); border-bottom: 1px solid rgba(75,255,42,.4); }

/* ── Makete uređaja sa pravim snimcima ekrana ── */
.trek-pr-scena { position: relative; perspective: 1800px; }
.trek-pr-uredjaji { position: relative; }
.trek-pr-laptop { transform: rotateY(-12deg) rotateX(5deg); transform-style: preserve-3d;
	filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.trek-pr-brauzer { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.16); }
.trek-pr-brauzer-traka { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #e9edf2; }
.trek-pr-tacke { display: inline-flex; gap: 5px; }
.trek-pr-tacke i { width: 9px; height: 9px; border-radius: 50%; background: #c4ccd6; display: block; }
.trek-pr-url { flex: 1; background: #fff; border-radius: 100px; font-size: .68rem; color: #6b7482; padding: 3px 12px; }
.trek-pr-snimak { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f7f8fa; }
.trek-pr-snimak img { width: 100%; display: block; }
.trek-pr-postolje { height: 10px; margin: 0 auto; width: 74%; border-radius: 0 0 12px 12px;
	background: linear-gradient(180deg, #2a3140, #171c25); }

.trek-pr-telefon { width: 210px; margin: 0 auto; }
.trek-pr-uredjaji.je-par .trek-pr-telefon { position: absolute; right: -10px; bottom: -18px; width: 150px; }
.trek-pr-uredjaji.je-veliki .trek-pr-telefon { width: 260px; }
.trek-pr-tel-okvir { position: relative; background: #0f141c; border-radius: 30px; padding: 9px; overflow: hidden;
	box-shadow: 0 26px 46px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.trek-pr-tel-okvir img { width: 100%; display: block; border-radius: 22px; }
.trek-pr-tel-zvucnik { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 2;
	width: 46px; height: 5px; border-radius: 100px; background: rgba(255,255,255,.35); }
.trek-pr-maketa-note { margin-top: .6rem; font-size: .78rem; color: var(--pr-tiho); text-align: center; }

/* Poziv na skrolovanje ispod otvaranja */
.trek-pr-skrol { display: flex; align-items: center; gap: .6rem; justify-content: center; margin-top: 3rem;
	font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pr-tiho); }
.trek-pr-skrol span { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 100px; position: relative; }
.trek-pr-skrol span::after { content: ""; position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
	width: 3px; height: 7px; border-radius: 100px; background: var(--pr-akcent); animation: prSkrol 1.7s infinite; }
@keyframes prSkrol { 0% { top: 7px; opacity: 1; } 70% { top: 19px; opacity: .1; } 100% { top: 7px; opacity: 0; } }

/* ── Priča: uređaj stoji, poglavlja prolaze ── */
.trek-pr-prica { padding: 2rem 0 4rem; border-top: 1px solid var(--pr-linija); }
/* Maketa stoji zalepljena i USPRAVNO CENTRIRANA u ekranu dok poglavlja prolaze,
   umesto da visi uz gornju ivicu. Visina je vezana za ekran, pa se snimak nikad
   ne prelije preko njega. */
.trek-pr-lepljivo { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.trek-pr-ekrani { position: relative; width: 100%; display: grid; }
.trek-pr-ekrani .trek-pr-snimak img { max-height: 62vh; object-fit: cover; object-position: top; }
.trek-pr-ekrani .trek-pr-tel-okvir img { max-height: 66vh; width: auto; margin: 0 auto; }
.trek-pr-kadar { grid-area: 1 / 1; opacity: 0; transform: scale(.97) translateY(10px); transition: opacity .5s ease, transform .5s ease;
	pointer-events: none; }
.trek-pr-kadar.je-aktivan { opacity: 1; transform: none; pointer-events: auto; }

.trek-pr-poglavlje { padding: 4.5rem 0; border-bottom: 1px solid rgba(255,255,255,.07); opacity: .38;
	transition: opacity .4s ease, transform .5s ease; transform: translateY(16px); }
.trek-pr-poglavlje.je-tu { transform: none; }
.trek-pr-poglavlje.je-u-fokusu { opacity: 1; }
.trek-pr-poglavlje:first-child { padding-top: 2rem; }
.trek-pr-poglavlje:last-child { border-bottom: 0; }
.trek-pr-broj { font-size: .76rem; font-weight: 800; letter-spacing: .18em; color: var(--pr-akcent); }
.trek-pr-nad { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--pr-tiho); margin: .5rem 0 .4rem; }
.trek-pr-pg-tt { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.02em; margin-bottom: .7rem; }
.trek-pr-pg-o { color: var(--pr-tiho); line-height: 1.7; margin-bottom: 1.1rem; }
.trek-pr-cekiri { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.trek-pr-cekiri li { font-size: .84rem; font-weight: 600; padding: 7px 14px; border-radius: 100px;
	background: rgba(75,255,42,.1); border: 1px solid rgba(75,255,42,.24); color: #d9ffd0; }

@media (max-width: 991.98px) {
	.trek-pr-lepljivo { position: static; height: auto; display: block; margin-bottom: 1.5rem; }
	.trek-pr-ekrani { min-height: 0; }
	.trek-pr-kadar { display: none; }
	.trek-pr-kadar.je-aktivan { display: block; }
	.trek-pr-laptop { transform: none; }
	.trek-pr-uredjaji.je-par .trek-pr-telefon { position: static; width: 170px; margin: -1rem auto 0; }
	.trek-pr-poglavlje { opacity: 1; padding: 2.5rem 0; }
}

/* ── Otkrivanje pri skrolovanju ── */
.trek-pr-otkrij { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.trek-pr-otkrij.je-tu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.trek-pr-otkrij, .trek-pr-poglavlje { opacity: 1 !important; transform: none !important; transition: none !important; }
	.trek-pr-skrol span::after { animation: none; }
}

/* Traka napretka kroz stranu */
.trek-pr-napredak { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1080; background: transparent; pointer-events: none; }
.trek-pr-napredak span { display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--pr-akcent), var(--pr-akcent-2)); transition: width .1s linear; }

/* Obim platforme (brojači) */
.trek-pr-obim { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; margin: 0 0 2.6rem; }
.trek-pr-obim b { display: block; font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.trek-pr-obim span { display: block; font-size: .8rem; color: var(--pr-tiho); margin-top: 2px; }
.trek-pr-h3 { font-weight: 800; font-size: 1.3rem; margin: 3rem 0 1.2rem; }

/* ── Sekcije ── */
.trek-pr-sek { padding: 4.5rem 0; border-top: 1px solid var(--pr-linija); }
.trek-pr-sek-tamna { background: var(--pr-ink-2); }
.trek-pr-sek-siva { background: #11151d; }
.trek-pr-h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.02em; margin-bottom: .5rem; }
.trek-pr-podnaslov { color: var(--pr-tiho); max-width: 62ch; margin-bottom: 2.4rem; }

/* Modeli */
.trek-pr-model { height: 100%; display: flex; flex-direction: column; background: var(--pr-ink-2); border: 1px solid var(--pr-linija);
	border-radius: 18px; padding: 2rem; }
.trek-pr-model-istaknut { border-color: rgba(75,255,42,.45); box-shadow: 0 0 0 1px rgba(75,255,42,.16), 0 24px 60px rgba(0,0,0,.4); }
.trek-pr-model-oznaka { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pr-akcent); }
.trek-pr-model-tt { font-weight: 800; font-size: 1.5rem; margin: .5rem 0 .6rem; }
.trek-pr-model-opis { color: var(--pr-tiho); line-height: 1.6; margin-bottom: 1.3rem; }
.trek-pr-lista { list-style: none; margin: 0 0 1.6rem; padding: 0; flex: 1; }
.trek-pr-lista li { position: relative; padding: .5rem 0 .5rem 1.7rem; border-bottom: 1px solid rgba(255,255,255,.07); line-height: 1.5; }
.trek-pr-lista li:last-child { border-bottom: 0; }
.trek-pr-lista li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 8px; height: 8px; border-radius: 50%;
	background: var(--pr-akcent); }
.trek-pr-lista-tanka li { font-size: .92rem; padding-left: 1.4rem; }
.trek-pr-lista-tanka li::before { width: 5px; height: 5px; top: 1rem; }

/* Funkcije */
.trek-pr-mreza-fn { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; }
.trek-pr-fn { background: rgba(255,255,255,.035); border: 1px solid var(--pr-linija); border-radius: 16px; padding: 1.5rem; }
.trek-pr-fn-ik { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px;
	background: rgba(75,255,42,.12); color: var(--pr-akcent); font-size: 1.15rem; margin-bottom: .9rem; }
.trek-pr-fn-n { font-size: 1.05rem; font-weight: 800; margin-bottom: .4rem; }
.trek-pr-fn-o { font-size: .9rem; line-height: 1.6; color: var(--pr-tiho); margin: 0; }

/* Tehnologija */
.trek-pr-teh { height: 100%; background: rgba(255,255,255,.03); border: 1px solid var(--pr-linija); border-radius: 16px; padding: 1.6rem; }
.trek-pr-teh-tt { font-size: 1.05rem; font-weight: 800; margin-bottom: .8rem; color: #fff; }

/* API tabela */
.trek-pr-api { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .1rem 2.5rem; }
.trek-pr-api-red { display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.trek-pr-api-n { flex: 0 0 40%; font-weight: 700; color: #fff; font-size: .95rem; }
.trek-pr-api-o { flex: 1; color: var(--pr-tiho); font-size: .88rem; line-height: 1.5; }

/* Monetizacija */
.trek-pr-kanal { height: 100%; background: rgba(255,255,255,.035); border: 1px solid var(--pr-linija); border-radius: 16px; padding: 1.5rem; }
.trek-pr-kanal-ik { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255,170,234,.14); color: var(--pr-akcent-2); font-size: 1.05rem; margin-bottom: .8rem; }
.trek-pr-kanal-n { font-size: 1.02rem; font-weight: 800; margin-bottom: .4rem; }
.trek-pr-kanal-o { font-size: .9rem; line-height: 1.6; color: var(--pr-tiho); margin: 0; }

/* Poziv na kraju */
.trek-pr-poziv { padding: 5rem 0; text-align: center;
	background: radial-gradient(90% 120% at 50% 0%, #1d2634 0%, var(--pr-ink) 65%); border-top: 1px solid var(--pr-linija); }
.trek-pr-poziv-tt { font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.02em; margin-bottom: .8rem; }
.trek-pr-poziv-o { color: var(--pr-tiho); max-width: 60ch; margin: 0 auto 2rem; line-height: 1.65; }

/* ══════════════════════════════════════════════════════════════════════════
   MAKETE EKRANA IZA PRIJAVE (uređivač, profil, napojnica, algoritam).
   Crtane u HTML-u i CSS-u, u jeziku same aplikacije: ostaju oštre na svakom
   ekranu, ne traže prijavu i menjaju se bez ponovnog snimanja.
   ══════════════════════════════════════════════════════════════════════════ */
.trek-pr-maketa { width: 100%; }
.trek-pr-app { background: #fff; border-radius: 14px; overflow: hidden; color: #14171f;
	box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.trek-pr-app-traka { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #e9edf2; }
.trek-pr-app-tacke { display: inline-flex; gap: 5px; }
.trek-pr-app-tacke i { width: 9px; height: 9px; border-radius: 50%; background: #c4ccd6; display: block; }
.trek-pr-app-put { flex: 1; background: #fff; border-radius: 100px; font-size: .66rem; color: #6b7482; padding: 3px 12px; }
.trek-pr-app-cuva { font-size: .62rem; color: #0f9d58; font-weight: 700; white-space: nowrap; }
.trek-pr-app-telo { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; padding: 14px; background: #f7f8fa; }
.trek-pr-app-telo-jedan { grid-template-columns: 1fr; }

/* Uređivač teksta */
.trek-pr-ur-oznaka { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8b93a1; }
.trek-pr-ur-naslov { font-weight: 800; font-size: 1.02rem; line-height: 1.25; margin: 4px 0 10px; color: #14171f; }
.trek-pr-ur-alatke { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #fff; border: 1px solid #e4e8ee;
	border-radius: 8px; font-size: .68rem; color: #4a5261; }
.trek-pr-ur-alatke-desno { margin-left: auto; font-size: .6rem; color: #8b93a1; }
.trek-pr-ur-tekst { background: #fff; border: 1px solid #e4e8ee; border-top: 0; border-radius: 0 0 8px 8px; padding: 12px;
	display: flex; flex-direction: column; gap: 7px; }
.trek-pr-ur-tekst .l { display: block; height: 8px; border-radius: 100px; background: #e8ecf2; }
.trek-pr-ur-tekst .l-slika { height: 54px; background: #eef2f7; border: 1px dashed #cfd6e0; display: flex; align-items: center;
	justify-content: center; gap: 6px; font-size: .62rem; color: #8b93a1; border-radius: 8px; }
.trek-pr-ur-bocno { display: flex; flex-direction: column; gap: 10px; }
.trek-pr-ur-kartica { background: #fff; border: 1px solid #e4e8ee; border-radius: 10px; padding: 11px; display: flex;
	flex-direction: column; gap: 6px; }
.trek-pr-ur-kartica-tt { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b93a1; }
.trek-pr-ur-red { display: flex; justify-content: space-between; align-items: center; font-size: .68rem; color: #6b7482; }
.trek-pr-ur-red b { color: #14171f; font-weight: 700; }
.trek-pr-ur-red b.je-zuta { color: #b45309; background: #fef3c7; padding: 2px 7px; border-radius: 100px; font-size: .62rem; }
.trek-pr-ur-serp-url { font-size: .6rem; color: #0f9d58; }
.trek-pr-ur-serp-tt { font-size: .74rem; color: #1a0dab; font-weight: 600; line-height: 1.25; }
.trek-pr-ur-serp-o { font-size: .62rem; color: #6b7482; line-height: 1.35; }
.trek-pr-ur-dugme { margin-top: 3px; text-align: center; background: #2a2aff; color: #fff; font-weight: 800; font-size: .7rem;
	padding: 8px; border-radius: 100px; }

/* Profil autora */
.trek-pr-pf-vrh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid #e4e8ee;
	border-radius: 10px; padding: 13px; }
.trek-pr-pf-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,#2a2aff,#7b3de8); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; }
.trek-pr-pf-ime { display: flex; flex-direction: column; font-weight: 800; font-size: .9rem; color: #14171f; }
.trek-pr-pf-ime span { font-weight: 500; font-size: .66rem; color: #8b93a1; }
.trek-pr-pf-stat { margin-left: auto; text-align: center; font-size: .58rem; color: #8b93a1; }
.trek-pr-pf-stat b { display: block; font-size: .95rem; color: #14171f; }
.trek-pr-pf-polja { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.trek-pr-pf-polje { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid #e4e8ee; border-radius: 10px; padding: 10px 12px; }
.trek-pr-pf-polje > span:first-child { font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b93a1; }
.trek-pr-pf-polje b { font-size: .8rem; color: #14171f; font-weight: 700; }
.trek-pr-pf-polje b.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.trek-pr-pf-istaknuto { border-color: #0f9d58; box-shadow: 0 0 0 3px rgba(15,157,88,.12); }
.trek-pr-pf-nota { font-size: .6rem; color: #0f9d58; font-weight: 600; }

/* Napojnica na telefonu */
.trek-pr-telefon.je-samostalan { width: 250px; margin: 0 auto; }
.trek-pr-np { background: #fff; border-radius: 22px; padding: 18px 16px; display: flex; flex-direction: column;
	align-items: center; gap: 9px; color: #14171f; }
.trek-pr-np-nad { font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8b93a1; }
.trek-pr-np-ime { font-weight: 800; font-size: 1.05rem; }
.trek-pr-np-qr { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 132px; height: 132px; padding: 8px;
	background: #fff; border: 1px solid #e4e8ee; border-radius: 10px; }
.trek-pr-np-qr i { display: block; border-radius: 1px; background: #eef1f5; }
.trek-pr-np-qr i.je-crna { background: #14171f; }
.trek-pr-np-iznosi { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.trek-pr-np-iznosi i { font-style: normal; font-size: .64rem; font-weight: 700; padding: 5px 10px; border-radius: 100px;
	background: #f1f4f8; color: #4a5261; }
.trek-pr-np-iznosi i.je-izabran { background: #14171f; color: #fff; }
.trek-pr-np-dugme { background: #2a2aff; color: #fff; font-weight: 800; font-size: .72rem; padding: 9px 16px; border-radius: 100px; }
.trek-pr-np-nota { font-size: .56rem; color: #8b93a1; text-align: center; }

/* Algoritam: signali levo, preuređen raspored desno */
.trek-pr-alg { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
	background: rgba(255,255,255,.04); border: 1px solid var(--pr-linija); border-radius: 16px; padding: 18px; }
.trek-pr-alg-kolona { display: flex; flex-direction: column; gap: 7px; }
.trek-pr-alg-nas { font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-tiho); margin-bottom: 3px; }
.trek-pr-alg-cip { font-size: .72rem; padding: 7px 11px; border-radius: 9px; background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1); color: var(--pr-tekst); }
.trek-pr-alg-strelica { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--pr-akcent); font-size: 1.3rem; }
.trek-pr-alg-strelica span { font-size: .56rem; color: var(--pr-tiho); text-align: center; max-width: 78px; line-height: 1.3; }
.trek-pr-alg-red { display: flex; align-items: center; gap: 8px; font-size: .78rem; padding: 7px 11px; border-radius: 9px;
	background: rgba(255,255,255,.05); color: var(--pr-tekst); }
.trek-pr-alg-red b { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex;
	align-items: center; justify-content: center; font-size: .6rem; }
.trek-pr-alg-red i { margin-left: auto; font-style: normal; font-size: .62rem; font-weight: 700; }
.trek-pr-alg-red.je-gore { background: rgba(75,255,42,.12); border: 1px solid rgba(75,255,42,.28); }
.trek-pr-alg-red.je-gore i { color: var(--pr-akcent); }
.trek-pr-alg-red.je-dole i { color: #f87171; }
.trek-pr-alg-nota { font-size: .58rem; color: var(--pr-tiho); margin-top: 4px; }
@media (max-width: 575.98px) {
	.trek-pr-app-telo { grid-template-columns: 1fr; }
	.trek-pr-alg { grid-template-columns: 1fr; }
	.trek-pr-alg-strelica { transform: rotate(90deg); }
}

/* ── Izbor izgleda (demo teme za kupca) ── */
.trek-pr-teme { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.6rem; }
.trek-pr-tema-kart { border: 1px solid var(--bs-border-color); border-radius: 16px; overflow: hidden; background: var(--bs-body-bg);
	display: flex; flex-direction: column; transition: transform .16s, box-shadow .16s; }
.trek-pr-tema-kart:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(10,14,30,.14); }
.trek-pr-tema-uzor { position: relative; aspect-ratio: 16/10; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.trek-pr-tema-tag { align-self: flex-start; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; }
.trek-pr-tema-h { font-weight: 800; font-size: 1.05rem; line-height: 1.15; max-width: 82%; }
.trek-pr-tema-linija { width: 46px; height: 4px; border-radius: 3px; }
.trek-pr-tema-telo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.trek-pr-tema-naziv { font-size: 1.05rem; font-weight: 800; margin: 0; }
.trek-pr-tema-opis { font-size: .86rem; line-height: 1.45; color: var(--bs-secondary-color); margin: 0; flex: 1; }
.trek-pr-tema-dugme { margin-top: 6px; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
	font-weight: 700; font-size: .88rem; color: var(--bs-primary); text-decoration: none; }
.trek-pr-tema-dugme:hover { gap: 11px; }
@media (max-width: 991.98px) { .trek-pr-teme { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .trek-pr-teme { grid-template-columns: 1fr; } }