/* Web majstor — "Nova početna" (kandidat za buduću naslovnu).
   Nadovezuje se na blog.css (pozadina, logo, head, footer, --root tokeni).
   Ovde su samo hero sa isticanjem cene + sekcija poverenja + zatvarajuća traka.
   Animacije: CSS @keyframes na dnu fajla + okidači u assets/js/nova-pocetna.js (bez GSAP-a). */

/* ============ Hero ============ */
.wm-np-hero {
	max-width: 1080px;
	margin: 0 auto;
	padding: 132px 24px 0;
	text-align: left;
	overflow-x: hidden;
}

.wm-np-hero .wm-blog-sub {
	max-width: 52ch;
	margin-left: 0;
	margin-right: 0;
	font-size: 16px;
}

/* Dve kolone: levo podnaslov, desno cena — cena ostaje jedini centriran
   element na stranici, sada lokalizovan na svoju kolonu umesto cele širine. */
.wm-np-hero-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 48px;
	margin-top: 0;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}
.wm-np-hero-row .wm-blog-sub {
	max-width: none;
	margin: 15px 0 0;
	align-self: center;
}

.wm-np-price-block {
	margin-top: 28px;
	text-align: left;
}

/* Cena i njena akcijska zamena dele TAČNO isto mesto (centar kolone):
   oba su position:absolute preko cele .wm-np-price-wrap i centriraju
   sopstveni sadržaj — 200 počinje tu uvećana, pa se smanjuje i pomera
   gore kao mala precrtana etiketa, a 100 "zauzima" isti centar. */
.wm-np-price-wrap {
	position: relative;
	min-height: 260px;
}

.wm-np-price-old {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Bedž je apsolutno pozicioniran U ODNOSU NA TEKST (ne flex sused) da ga
   njegova (privremena) nevidljivost pre fade-in-a ne pomera van centra —
   inače prazan prostor rezervisan za bedž gura tekst cene ulevo. */
.wm-np-price-old-strike {
	position: relative;
	display: inline-block;
}
.wm-np-price-old-text {
	font-family: var(--fm);
	font-size: clamp(1.05rem, 2.4vw, 1.35rem);
	color: var(--text-dim);
	white-space: nowrap;
}
.wm-np-strike-line {
	position: absolute;
	left: -3%;
	top: 52%;
	width: 106%;
	height: 2px;
	background: var(--accent);
	transform: scaleX(1);
	transform-origin: left center;
}
.wm-np-discount-badge {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 10px;
	display: inline-block;
	font-family: var(--fm);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--bg);
	background: var(--accent);
	padding: 3px 9px;
	border-radius: 999px;
	line-height: 1.4;
	white-space: nowrap;
}

.wm-np-price {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
}
.wm-np-price-prefix {
	font-family: var(--fm);
	font-size: clamp(0.95rem, 2vw, 1.15rem);
	letter-spacing: 0.06em;
	color: var(--text-mid);
}
.wm-np-price-num {
	font-family: var(--fd);
	font-size: 7rem;
	line-height: 0.9;
	color: var(--accent);
	letter-spacing: 0.01em;
}
.wm-np-price-unit {
	font-family: var(--fm);
	font-size: clamp(0.95rem, 2vw, 1.15rem);
	letter-spacing: 0.06em;
	color: var(--text-mid);
	white-space: nowrap;
}

.wm-np-price-note-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: 24px;
}
.wm-np-note-icon {
	flex-shrink: 0;
	width: 40px;
	height: 100px;
	color: var(--accent);
}
.wm-np-price-note-wrap svg.wm-np-note-icon:first-child {
	transform: rotate(-16deg);
}
.wm-np-price-note-wrap svg.wm-np-note-icon:last-child {
	transform: rotate(16deg);
}
.wm-np-price-note {
	font-family: var(--fm);
	font-size: 16px;
	line-height: 1.8;
	color: var(--text-dim);
	max-width: 56ch;
	margin: 0;
	text-align: center;
}
.wm-np-price-note a {
	color: var(--text-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wm-np-price-note a:hover { color: var(--accent); }

.wm-np-cta {
	display: block;
	width: max-content;
	margin: 0 auto;
	font-family: var(--fm);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text);
	background: var(--accent);
	border-radius: 999px;
	padding: 16px 34px;
	transition: transform 0.24s, box-shadow 0.24s;
}
.wm-np-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(207, 46, 46, 0.35);
}

/* ============ Sekcija poverenja ============ */
.wm-np {
	max-width: 1080px;
	margin: 0 auto;
	padding: 96px 24px 0;
}

.wm-np-title {
	font-family: var(--fd);
	font-size: clamp(2.2rem, 6vw, 4rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0 0 48px;
}

/* ============ Zašto pretplata (pre sekcije poverenja) ============ */
.wm-np-why {
	padding-bottom: 64px;
	margin-bottom: 64px;
	border-bottom: 1px solid var(--border);
	text-align: left;
}
.wm-np-why .wm-np-title {
	margin-bottom: 24px;
}
.wm-np-why p {
	font-family: var(--fm);
	font-size: 16px;
	line-height: 1.8;
	color: var(--text-mid);
	margin: 0;
}

.wm-np-trust {
	padding-bottom: 88px;
	text-align: left;
}
.wm-np-trust-intro {
	font-family: var(--fm);
	font-size: 16px;
	line-height: 1.8;
	color: var(--text-mid);
	max-width: 70ch;
	margin: 0 0 48px;
}

.wm-np-cards {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	text-align: left;
}

.wm-np-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 30px 26px 32px;
}
.wm-np-num {
	display: block;
	font-family: var(--fm);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--accent);
	margin-bottom: 14px;
}
.wm-np-card h3 {
	font-family: var(--fd);
	font-size: 1.7rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0 0 12px;
}
.wm-np-card p {
	font-family: var(--fm);
	font-size: 16px;
	line-height: 1.8;
	color: var(--text-mid);
	margin: 0;
}
.wm-np-card p a {
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wm-np-card p a:hover { color: var(--accent); }

.wm-np-closing-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 48px;
}

.wm-np-closing {
	font-family: var(--fd);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--text);
	max-width: 46ch;
	margin: 0;
}
.wm-np-closing::before {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	background: var(--accent);
	margin: 0 0 22px;
}

.wm-np-closing-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 984 / 988;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--border);
}

/* ============ Zatvarajuća traka ============ */
.wm-np-band {
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 24px 120px;
	text-align: left;
	border-top: 1px solid var(--border);
}
.wm-np-band-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 40px;
}
.wm-np-band-row .wm-np-cta {
	margin: 0;
	flex-shrink: 0;
}
.wm-np-band-title {
	font-family: var(--fd);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	text-transform: uppercase;
	color: var(--text);
	margin: 0;
}
.wm-np-band-sub {
	font-family: var(--fm);
	font-size: 16px;
	color: var(--text-dim);
	margin: 14px 0 0;
}

/* ============ Responsive ============ */
@media (max-width: 860px) {
	.wm-np-hero { padding-top: 112px; }
	.wm-np-hero-row { grid-template-columns: 1fr; gap: 28px; text-align: center; }
	.wm-np-hero-row .wm-blog-sub { text-align: left; }
	.wm-np-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wm-np-closing-row { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 767px) {
	.wm-np-cards { grid-template-columns: minmax(0, 1fr); }
	/* Naslov -> podnaslov -> cena zbijeni na mobilnom, bez velikog razmaka. */
	.wm-np-hero-row {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
		gap: 12px;
	}
	.wm-np-price-wrap { min-height: 170px; }
	.wm-np-price-num { font-size: 6.2rem; }
	.wm-np-hero .wm-blog-eyebrow { margin-top: -30px; }
	.wm-np-price-block { margin-top: 0; }
	.wm-np-note-icon { display: none; }
	.wm-np-price-note { margin-top: 20px; text-align: left; }
	.wm-np-band-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.wm-np-band-row .wm-np-cta { margin: 0 auto; }
	/* Zbijeniji razmaci između sekcija na mobilnom. */
	.wm-np { padding-top: 56px; }
	.wm-np-why {
		padding-bottom: 0;
		margin-bottom: 56px;
	}
	.wm-np-trust .wm-np-title { margin-bottom: 24px; }
	.wm-np-trust { padding-bottom: 24px; }
	.wm-np-band { padding-top: 0; }
}

/* ============ Animacije (bez GSAP-a, 2026-09-27) ============
   Prevod starog GSAP tajmlajna 1:1. Krive:
     power2.out    = cubic-bezier(.33,1,.68,1)
     power2.inOut  = cubic-bezier(.65,0,.35,1)
     power3.inOut  = cubic-bezier(.76,0,.24,1)
     back.out(1.7) = cubic-bezier(.34,1.56,.64,1)
     back.out(2)   = cubic-bezier(.34,1.8,.64,1)
   Koriste se zasebna svojstva translate/scale (ne transform) da se ne
   pregazi postojeći transform (npr. translateY(-50%) na bedžu).
   Bez JS-a ili uz prefers-reduced-motion: CSS podrazumevano = konačno stanje. */

/* Uvećanje/pomeraj stare cene po širini ekrana (ranije bigScale/restY u JS-u). */
.wm-np-price-wrap { --np-big: 2.1; --np-rest: -72px; }
@media (max-width: 860px) { .wm-np-price-wrap { --np-big: 2.6; --np-rest: -66px; } }
@media (max-width: 480px) { .wm-np-price-wrap { --np-big: 1.6; --np-rest: -58px; } }

/* Početno stanje dok IntersectionObserver ne doda .is-in (klasu .wm-np-anim
   dodaje JS, pa bez JS-a ništa nije sakriveno). */
.wm-np-anim:not(.is-in) .wm-np-price-old,
.wm-np-anim:not(.is-in) .wm-np-price { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	/* Uvod hero teksta: y 24 -> 0, fade, 0.7s, stagger 0.08. Čist CSS — kreće
	   od prvog iscrtavanja, ne čeka JS. */
	.wm-np-hero .wm-blog-eyebrow,
	.wm-np-hero .wm-blog-title,
	.wm-np-hero .wm-blog-sub {
		animation: wm-np-up 0.7s cubic-bezier(0.33, 1, 0.68, 1) both;
		--np-y: 24px;
	}
	.wm-np-hero .wm-blog-title { animation-delay: 0.08s; }
	.wm-np-hero .wm-blog-sub { animation-delay: 0.16s; }

	/* Popust — ukupno 4.2s (brojanje 0->100 radi JS od 3.3s do 4.2s):
	   0.00–0.55  200 € ulazi uvećana (fade + y 30->0)
	   2.05–2.50  precrtavanje (posle pauze od 1.5s)
	   2.75–3.30  smanjenje na 1 i pomeraj iznad centra
	   3.10–3.40  bedž -50%
	   3.30–3.85  nova cena iskače (+ brojanje) */
	.wm-np-anim.is-in .wm-np-price-old {
		animation: wm-np-old 3.3s linear both;
	}
	.wm-np-anim.is-in .wm-np-strike-line {
		animation: wm-np-strike 0.45s cubic-bezier(0.65, 0, 0.35, 1) 2.05s both;
	}
	.wm-np-anim.is-in .wm-np-discount-badge {
		animation: wm-np-badge 0.3s cubic-bezier(0.34, 1.8, 0.64, 1) 3.1s both;
	}
	.wm-np-anim.is-in .wm-np-price {
		animation: wm-np-price-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s both;
	}

	/* Reveal sekcija (klase dodaje JS): "Zašto pretplata" i naslov+uvod
	   "Zašto da verujete" y20/0.6s, kartice y26/0.6s, zaključna rečenica y16/0.7s. */
	.wm-np-rv { opacity: 0; }
	.wm-np-rv.is-in {
		animation: wm-np-up var(--np-dur, 0.6s) cubic-bezier(0.33, 1, 0.68, 1) var(--np-delay, 0s) both;
	}
	.wm-np-why .wm-np-rv,
	.wm-np-trust > .wm-np-rv { --np-y: 20px; }
	.wm-np-card.wm-np-rv { --np-y: 26px; }
	.wm-np-closing.wm-np-rv { --np-y: 16px; --np-dur: 0.7s; }
}

@keyframes wm-np-up {
	from { opacity: 0; translate: 0 var(--np-y, 20px); }
	to { opacity: 1; translate: 0 0; }
}
/* Jedan keyframes za staru cenu (ulaz + zadržavanje + smanjenje) jer dve
   odvojene animacije istih svojstava bi se preklapale kroz fill-mode.
   0.55/3.3 = 16.667%, 2.75/3.3 = 83.333%. */
@keyframes wm-np-old {
	0% {
		opacity: 0;
		translate: 0 30px;
		scale: var(--np-big);
		animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	}
	16.667%, 83.333% {
		opacity: 1;
		translate: 0 0;
		scale: var(--np-big);
		animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	}
	100% {
		opacity: 1;
		translate: 0 var(--np-rest);
		scale: 1;
	}
}
@keyframes wm-np-strike {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@keyframes wm-np-badge {
	from { opacity: 0; scale: 0.4; }
	to { opacity: 1; scale: 1; }
}
@keyframes wm-np-price-in {
	from { opacity: 0; scale: 0.55; }
	to { opacity: 1; scale: 1; }
}