/* ============================================================
   TREK DIZAJN-SISTEM — „moderni magazin × Medium"
   Jedan izvor istine za tipografiju, boje i komponente.
   Učitava se POSLE style.css i namerno gazi temu.
   ============================================================ */

:root {
	--trek-ink: #131417;            /* skoro crna — tekst i kontrast */
	--trek-ink-2: #56575c;          /* sekundarni tekst */
	--trek-paper: #ffffff;
	--trek-accent: #2163e8;         /* jedini akcenat (brend) */
	--trek-hairline: rgba(19, 20, 23, .12);
	--trek-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--trek-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
	--trek-radius: 6px;             /* diskretno, ne igračka */
}
[data-bs-theme="dark"] {
	--trek-ink: #f2f2f3;
	--trek-ink-2: #a5a6ad;
	--trek-paper: #131417;
	--trek-hairline: rgba(242, 242, 243, .14);
}

/* ---------- Tipografija ---------- */
body {
	font-family: var(--trek-sans);
	color: var(--trek-ink);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, .h1, .h2, .h3,
.trek-clanak-naslov, .card-title, .tsv-title {
	font-family: var(--trek-serif);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--trek-ink);
}
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--trek-sans); font-weight: 700; letter-spacing: -0.01em; }
.navbar, .btn, .badge, .form-control, .dropdown-menu { font-family: var(--trek-sans); }

/* Naslovi kartica: serif, bez plavog hover-a teme */
.card h5 a, .card h6 a, .card .card-title a { font-family: var(--trek-serif); font-weight: 600; }
.card h5 a:hover, .card h6 a:hover { color: var(--trek-accent) !important; }

/* Telo članka: serif kao štampa (justify + hifenacija ostaju) */
.trek-prose { font-family: var(--trek-serif); font-size: 1.14rem; line-height: 1.85; color: var(--trek-ink); }
.trek-lead { font-family: var(--trek-serif); color: var(--trek-ink-2); }
.trek-prose blockquote { font-family: var(--trek-serif); font-style: italic; font-weight: 500; border-left-color: var(--trek-ink); }

/* ---------- Kickeri umesto šarenih pilula ---------- */
.trek-kicker {
	display: inline-block;
	font-family: var(--trek-sans);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--trek-accent);
	text-decoration: none;
	background: none !important;
	padding: 0;
	line-height: 1.4;
}
a.trek-kicker:hover { text-decoration: underline; }
/* Kicker preko fotografije (hero/feature) mora biti čitljiv */
.trek-feature .trek-kicker, .trek-story .trek-kicker, .tsv-panel .trek-kicker, .trek-rf-body .trek-kicker { color: #fff !important; opacity: .92; }

/* ---------- Kartice: ravno, novinski, bez cirkusa ---------- */
.card { border: 0; border-radius: 0; background: transparent; }
.card .card-img-top, .card img { border-radius: var(--trek-radius); }
.trek-card, .trek-card:hover { transform: none !important; box-shadow: none !important; transition: none; }
.trek-card:hover .card-img-top { transform: none !important; }
.card-body { padding-top: .75rem; }
.card small, .card .text-body-secondary { color: var(--trek-ink-2) !important; font-size: .78rem; }

/* Lenjiri između redova mreže (novinski) */
.trek-grid-rule > [class*="col-"] { position: relative; }

/* ---------- Sekcijski naslovi ---------- */
.trek-h {
	font-family: var(--trek-sans);
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding-left: 0;
	border-bottom: 2px solid var(--trek-ink);
	padding-bottom: .5rem;
}
.trek-h::before { display: none; }
.trek-h-light { border-bottom-color: rgba(255,255,255,.5); }
section h2.h6.text-uppercase, .trek-otkrij h2.h6 { letter-spacing: .1em; font-weight: 800; border-bottom: 2px solid var(--trek-ink); padding-bottom: .5rem; color: var(--trek-ink) !important; }

/* ---------- Dugmad: mirno, jedan akcenat ---------- */
.btn { border-radius: 2rem; font-weight: 600; }
.btn-primary { background: var(--trek-accent); border-color: var(--trek-accent); }
.btn-danger, .btn-warning { background: var(--trek-ink); border-color: var(--trek-ink); color: var(--trek-paper); }
.btn-danger:hover, .btn-warning:hover { background: var(--trek-accent); border-color: var(--trek-accent); color: #fff; }

/* ---------- Gašenje cirkusa iz teme/starih stilova ---------- */
/* šarene pločice rubrika -> neutralno */
.trek-tile { background: transparent !important; border: 1px solid var(--trek-hairline) !important; border-radius: var(--trek-radius) !important; color: var(--trek-ink) !important; }
.trek-tile i { color: var(--trek-ink-2) !important; }
.trek-tile:hover { border-color: var(--trek-ink); transform: none; box-shadow: none; }
/* rang brojevi: ink umesto plavog */
.trek-rank, .trek-rank-no { color: var(--trek-ink); opacity: .25; font-family: var(--trek-serif); }
/* newsletter i veliki baner: ink umesto plavog gradijenta */
.trek-news { background: var(--trek-paper) !important; border: 1px solid var(--trek-hairline) !important; border-radius: var(--trek-radius) !important; }
.trek-veliki-baner { background: var(--trek-ink) !important; border-radius: var(--trek-radius) !important; }
[data-bs-theme="dark"] .trek-veliki-baner { background: #26272c; }
.trek-vb-naslov { font-family: var(--trek-serif); }
/* tamni band priča: pravi ink */
.trek-stories-band { background: var(--trek-ink) !important; border-radius: 0 !important; }
[data-bs-theme="dark"] .trek-stories-band { background: #1b1c21; }
/* kolekcija hero: ink */
.trek-kolekcija-hero { background: var(--trek-ink) !important; }
.trek-kolekcija-cover { background: var(--trek-ink); border-radius: 0; }
.trek-kolekcija-kart { border: 0; border-top: 1px solid var(--trek-hairline); border-radius: 0; }
.trek-kolekcija-kart:hover { transform: none; box-shadow: none; }
.trek-kolekcija-kart:hover h5 { color: var(--trek-accent); }
/* rubrika hero: belo + lenjir u boji rubrike (umesto gradijenta) */
.trek-rubrika-hero { background: var(--trek-paper) !important; border-top: 4px solid var(--rc, var(--trek-accent)) !important; border-bottom: 1px solid var(--trek-hairline) !important; padding: 2.2rem 0 1.8rem !important; }
.trek-rubrika-hero h1 { color: var(--trek-ink) !important; font-family: var(--trek-serif); }
.trek-rubrika-hero .text-white-50 { color: var(--trek-ink-2) !important; }
.trek-rubrika-ikona { background: transparent !important; border: 1px solid var(--trek-hairline) !important; color: var(--rc, var(--trek-accent)) !important; border-radius: var(--trek-radius) !important; }
.trek-rubrika-hero .btn-outline-light { color: var(--trek-ink); border-color: var(--trek-ink); }
.trek-rubrika-hero .btn-outline-light:hover, .trek-rubrika-hero .btn-light { background: var(--trek-ink); border-color: var(--trek-ink); color: var(--trek-paper); }
/* feature preko slike: manji radius */
.trek-feature, .trek-rubrika-featured, .trek-story { border-radius: var(--trek-radius); }
/* autor box: ravno */
.trek-autor-box { background: transparent !important; border: 0 !important; border-top: 1px solid var(--trek-ink) !important; border-radius: 0 !important; padding: 1.5rem 0 0 !important; }
.trek-autor-avatar { box-shadow: none; }
.trek-autor-ime { font-family: var(--trek-serif); }
/* akcije traka */
.trek-akcije { border-color: var(--trek-hairline); }
/* deljenje ikonice */
.trek-deli-ic { border-color: var(--trek-hairline); }
.trek-deli-ic:hover { background: var(--trek-ink); border-color: var(--trek-ink); color: var(--trek-paper); }
/* komentari */
.trek-kom-forma { background: transparent !important; border: 1px solid var(--trek-hairline) !important; border-radius: var(--trek-radius) !important; }
.trek-kom { border-color: var(--trek-hairline); }
/* tagovi */
.trek-tag-chip { border-radius: 2rem !important; background: transparent !important; border-color: var(--trek-hairline) !important; }
.trek-tag-chip:hover { background: var(--trek-ink); border-color: var(--trek-ink); color: var(--trek-paper); }
/* danas na treku */
.trek-danas { border: 0 !important; border-top: 2px solid var(--trek-ink) !important; border-radius: 0 !important; padding: 1rem 0 0 !important; }
.trek-danas-lista li::marker { font-family: var(--trek-serif); }
.trek-danas-tt { font-family: var(--trek-serif); font-weight: 600; }
/* mini naslovi u listama */
h6 a.btn-link, .trek-rank-tt .fw-bold { font-family: var(--trek-serif); font-weight: 600 !important; }
/* U trendu traka */
.bg-light.rounded.p-3 { background: transparent !important; border-top: 1px solid var(--trek-hairline); border-bottom: 1px solid var(--trek-hairline); border-radius: 0 !important; }
/* sledeći-divider */
.trek-sledeci-divider span { font-family: var(--trek-sans); }
/* toc */
.trek-toc { background: transparent !important; border-radius: var(--trek-radius) !important; }
/* progres bar ostaje akcenat */
.trek-progress { background: var(--trek-accent); }
/* offcanvas / dropdown čistije */
.dropdown-menu { border-radius: var(--trek-radius); border-color: var(--trek-hairline); box-shadow: 0 10px 30px rgba(0,0,0,.08); }

/* mreže: prazan hover na slikama lista */
a:hover img { opacity: .96; }

/* Sponzorisani sadržaj — transparentna oznaka */
.trek-sponzor-oznaka { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9a6a00; background: #fff3cd; border: 1px solid #ffe08a; padding: .2rem .6rem; border-radius: 2rem; margin-bottom: .6rem; }

/* ═══ Mobilni app-header (reusable) — body.trek-apphdr ═══ */
.trek-ma-head { display: none; }
@media (max-width: 991.98px) {
	body.trek-apphdr > header.navbar-light,
	body.trek-apphdr .navbar-top-mob { display: none !important; }
	.trek-apphdr .trek-ma-head { position: sticky; top: 0; z-index: 1050; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 9px) 12px 9px; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
	.trek-apphdr .trek-ma-head .trek-ma-ic { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--bs-tertiary-bg); color: var(--bs-body-color); display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; }
	.trek-apphdr .trek-ma-logo { display: inline-flex; align-items: baseline; gap: 3px; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -0.5px; color: var(--bs-body-color); }
	.trek-apphdr .trek-ma-logo .trek-ma-dot { width: 6px; height: 6px; border-radius: 50%; background: #2163e8; display: inline-block; }
	.trek-apphdr .trek-ma-actions { display: flex; align-items: center; gap: 8px; }
}

/* ═══ Notifikaciona tačka na hamburgeru + nalog u offcanvas meniju (mobilni) ═══ */
@media (max-width: 991.98px) {
	.trek-ma-ic, .trek-m-ic, .navbar-toggler { position: relative; }
	.trek-ham-dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #E23636; box-shadow: 0 0 0 2px var(--bs-body-bg); }
	.trek-off-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #E23636; margin-left: 8px; }
	.trek-off-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bs-primary); color: #fff; font-weight: 700; font-size: .72rem; }
}

/* ═══ Pull-to-refresh (mobilni) ═══ */
.trek-ptr { position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-42px); z-index: 1055; width: 34px; height: 34px; border-radius: 50%; background: var(--bs-body-bg); box-shadow: 0 3px 12px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.trek-ptr-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--bs-border-color); border-top-color: var(--bs-primary); transition: transform .2s ease; }
.trek-ptr.is-ready .trek-ptr-spin { transform: rotate(180deg); }
.trek-ptr.is-loading .trek-ptr-spin { animation: trekptr .7s linear infinite; }
@keyframes trekptr { to { transform: rotate(360deg); } }

/* ═══ Mobilni: spreči horizontalno „šetanje" strane pri swipe-u ═══ */
@media (max-width: 991.98px) {
	html, body { overflow-x: clip; max-width: 100%; overscroll-behavior-x: none; }
	/* horizontalni railovi/karuseli: swipe ostaje unutar njih, ne pomera stranu */
	.trek-m-rail, .trek-m-carousel, .trek-potk-scroll, .trek-chips-traka .trek-chips, .trek-karusel { overscroll-behavior-x: contain; }
}

/* ═══ Mobilni: offcanvas meni do ~62% ekrana (ne preko celog) ═══ */
@media (max-width: 991.98px) {
	#offcanvasMenu { width: 62% !important; max-width: 320px; }
}