/* ================================================================
   Knjiga — list strane + listanje (3D okretanje).
   Dele ga editor (čarobnjak) i demo knjiga u galeriji na naslovnoj.
   Interaktivni delovi (aktivni slotovi, contenteditable, fokus, fioka…)
   žive u mag-carobnjak.css.
   ================================================================ */

/* List strane — odnos strana (--mag-odnos) postavlja JS iz projekat.format, isto kao štampa */
.mag-strana-list {
	position: relative;
	aspect-ratio: var(--mag-odnos, 1);
	background: #fff;
	border-radius: 4px;
	box-shadow: var(--mag-senka);
	overflow: hidden;
	container-type: inline-size;   /* tekst se skalira sa listom (cqw), kao u štampi */
}

/* sloj pozadine (dizajn) ide prvi u listu — ispod slotova, guttera i teksta */
.mag-pozadina {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.mag-pozadina-svg { width: 100%; height: 100%; display: block; }

/* strana hrbata: senka poveza — desne strane imaju hrbat levo, leve desno */
.mag-gutter {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 6%;
	pointer-events: none;
	z-index: 1;
}

.mag-strana-desna .mag-gutter {
	left: 0;
	background: linear-gradient(to right, rgba(43, 37, 64, 0.16), rgba(43, 37, 64, 0));
}

.mag-strana-leva .mag-gutter {
	right: 0;
	background: linear-gradient(to left, rgba(43, 37, 64, 0.16), rgba(43, 37, 64, 0));
}

/* korice: tvrdi povez — deblja ivica i hrbat */
.mag-korice {
	border-radius: 4px 8px 8px 4px;
	box-shadow: 0 10px 30px rgba(43, 37, 64, 0.3), inset 0 0 0 2px rgba(43, 37, 64, 0.15);
}

.mag-korice-zadnje { border-radius: 8px 4px 4px 8px; }

.mag-korice-hrbat {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3.5%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.05) 60%, rgba(255, 255, 255, 0.12));
	pointer-events: none;
	z-index: 2;
}

.mag-korice-hrbat-desno { left: auto; right: 0; transform: scaleX(-1); }

/* brending dole u sredini zadnje korice (cover.brend, po dizajnu): naziv razmaknutim velikim
   slovima + adresa; boju, font, težinu i mere postavlja JS (TIPOGRAFIJA.brend), isto kao štampa */
.mag-korice-brend {
	position: absolute;
	left: 8%;
	right: 8%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	line-height: 1.15;
	font-weight: 300;
	pointer-events: none;
	z-index: 3;
}

.mag-korice-brend-naziv { white-space: nowrap; }
.mag-korice-brend-adresa { white-space: nowrap; }

.mag-strana-unutrasnja { box-shadow: none; }

/* slotovi */

.mag-slot {
	position: absolute;
	overflow: hidden;
	background: #ece8f4;
}

.mag-slot-slika {
	width: 100%;
	height: 100%;
	object-fit: cover;   /* isto kadriranje kao u štampi */
	display: block;
	pointer-events: none;
}

/* polaroid: beo okvir (padding iz poljaPolaroida, u cqw), tanka siva ivica, nagnut
   (transform rotate iz JS-a) — isti okvir štampa crta kroz putanje() */
.mag-slot-polaroid {
	box-sizing: border-box;
	background: #fff;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.12);
	overflow: visible;
}

.mag-slot-polaroid .mag-slot-slika { background: #ece8f4; }

.mag-slot-polaroid.mag-slot-prazan { background: #fff; }

.mag-slot-polaroid .mag-slot-plus { inset: auto; width: 100%; height: 100%; }

/* beo ram ispod slike u luku (luk): ista forma kao slot, malo veća; ne hvata klik */
.mag-luk-okvir {
	position: absolute;
	background: #fff;
	pointer-events: none;
}

/* čipkasti ram oko slike u ovalu (oval_cipka): SVG preko slota, ne hvata klik */
.mag-ram-ovala {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.mag-ram-ovala svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.mag-slot-prazan {
	background: repeating-linear-gradient(45deg, #ece8f4 0 6px, #e2dcf0 6px 12px);
}

.mag-slot-plus {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: clamp(18px, 9cqw, 44px);
	font-weight: 900;
	color: var(--mag-ljubicasta-svetla);
	pointer-events: none;
}

.mag-slot-upozorenje {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mag-zuta);
	color: var(--mag-mastilo);
	font-weight: 900;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	z-index: 3;
	pointer-events: none;
}

.mag-slot-upozorenje-lose { background: var(--mag-crvena); color: #fff; }

/* Ukras (pattern): vektorski venac oko slike — iste mere kao u štampi, pa
   su mere u SVG-u (mm), ovde samo položaj sloja. */
.mag-korice-ukras,
.mag-strana-ukras {
	position: absolute;
	inset: 0;
	z-index: 0;          /* iznad pozadine, ISPOD slika (slotovi dolaze posle u DOM-u) */
	pointer-events: none;
}

.mag-korice-ukras svg,
.mag-strana-ukras svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* nalepnice (cvetić u ćošku, roda…): PREKO slika, ispod teksta — dolaze posle slotova u DOM-u */
.mag-korice-ukras-iznad,
.mag-strana-ukras-iznad {
	z-index: 1;
}

/* korice: scrim je SAMO za pregled — u štampi se peče u sliku (stampa/mag-slika.js, ista visina 36%) */

.mag-korice-scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 36%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	pointer-events: none;
}

/* bela traka preko sredine korica 'foto-mreza' (top/height/boju postavlja JS) */
.mag-korice-traka-mreza {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 2;
}

/* naslov: položaj i veličinu (left/right/bottom/font-size) postavlja JS iz
   šeme korica dizajna (mag-crtanje.js, stilNaslovaKorica) — iste mere kao u štampi */
.mag-korice-naslov {
	position: absolute;
	color: #fff;
	font-family: var(--mag-font-naslov);
	font-weight: 400;
	line-height: 1.05;
	pointer-events: none;
	z-index: 3;
	word-break: break-word;
}

.mag-korice-naslov-taman { color: var(--mag-mastilo); }

/* reč po red (šema naslov.redPoReci, boja_tipografija „our / story"): ogroman razmak reči
   lomi red posle svake reči; prazno mesto na kraju reda ne zauzima širinu */
.mag-korice-naslov-po-reci { word-spacing: 100em; word-break: normal; overflow-wrap: normal; }   /* reč se nikad ne seče na pola */

/* podnaslov sam gore desno (šema podnaslov.polozaj 'gore-desno'): jedan red, desno poravnat;
   boju, font, težinu, veličinu, razmak slova i položaj postavlja JS (nacrtajKorice) */
.mag-korice-podnaslov-ugao {
	position: absolute;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	z-index: 3;
}

/* blok naslov + podnaslov (šeme sa `podnaslov`, npr. panel „MOXIE / 2026"): blok stoji
   gde bi stajao sam naslov (stilNaslovaKorica), naslov u njemu teče normalno, podnaslov
   ispod — kurziv, bez razmaka slova i velikih slova naslova; mere iz JS-a */
.mag-korice-naslovni-blok {
	position: absolute;
	color: #fff;
	line-height: 1.05;
	pointer-events: none;
	z-index: 3;
}

/* tamna varijanta mora da pobedi belu boju bloka (ista specifičnost, kasnije pravilo) */
.mag-korice-naslovni-blok.mag-korice-naslov-taman { color: var(--mag-mastilo); }

.mag-korice-naslovni-blok .mag-korice-naslov {
	position: static;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	font-size: inherit;
	font-family: inherit;   /* font, razmak slova i velika slova nosi blok (stilNaslovaKorica) */
}

.mag-korice-podnaslov-panel {
	display: block;
	color: inherit;
	font-family: var(--mag-font-kurziv);
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-indent: 0;
	text-transform: none;
	word-break: break-word;
}

/* traka teksta preko slike (tekstfull strana / korice 'foto-traka'): položaj,
   visinu, boju (rgba = TRAKA_ALFA) i mere teksta postavlja JS iz trakaTeksta() +
   TIPOGRAFIJA.traka — u štampi se traka peče u sliku, tekst ide istim merama */
.mag-traka {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	pointer-events: none;
	z-index: 3;
}

/* zaglavlje (strana polaroid / korice 'foto-polaroid'): isti sklop kao traka, ali bez
   podloge, tamno na papiru (boja iz JS-a), gore na strani (zaglavljeTeksta) */
.mag-traka.mag-zaglavlje {
	background: none;
}

/* naslov korica je inače beo (na slici) — u zaglavlju nosi boju mastila iz JS-a */
.mag-zaglavlje .mag-korice-naslov { color: inherit; }

.mag-traka .mag-korice-naslov {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
}

.mag-traka-naslov {
	font-family: var(--mag-font-skript);
	font-weight: 400;
	line-height: 1;
	max-width: 100%;
	word-break: break-word;
}

.mag-traka-podnaslov {
	font-family: var(--mag-font);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
}

/* strana „Zdravo bebo" (raspored beba): stubac desno od slika — položaj stupca i
   svakog reda (top, font-size, line-height = 1 em) postavlja JS iz blokBebe() +
   TIPOGRAFIJA.beba; boja = akcent stila; štampa crta iste mere. Redovi su centrirani. */
.mag-beba {
	position: absolute;
	pointer-events: none;
	z-index: 3;
}

/* ikone (mag-ikone.js): ekran ne seče van kutije — PDF ne seče, pa ni pregled */
.mag-ikona-svg { overflow: visible; }

.mag-beba-naslov,
.mag-beba-pisano,
.mag-beba-etiketa,
.mag-beba-vrednost {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	white-space: nowrap;
}

.mag-beba-naslov {
	font-family: var(--mag-font-beba);
	font-weight: 700;
	text-transform: uppercase;
}

.mag-beba-pisano,
.mag-beba-etiketa {
	font-family: var(--mag-font-skript);
	font-weight: 400;
}

.mag-beba-vrednost {
	font-family: var(--mag-font);
	font-weight: 400;
}

/* strana „Volimo te" (raspored volimo): beo stubac desno od Full slike — srca gore,
   naslov reč po reč (width: min-content prelama svaku reč u svoj red, kao štampa),
   pisani red; položaj i mere postavlja JS iz blokVolimo() + TIPOGRAFIJA.volimo */
.mag-volimo {
	position: absolute;
	pointer-events: none;
	z-index: 3;
}

.mag-volimo-srca {
	position: absolute;
}

.mag-volimo-srca svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mag-volimo-naslov,
.mag-volimo-pisano {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}

.mag-volimo-naslov {
	font-family: var(--mag-font-beba);
	font-weight: 700;
	text-transform: uppercase;
	width: min-content;
	margin: 0 auto;
	white-space: normal;
	word-break: normal;
}

.mag-volimo-pisano {
	font-family: var(--mag-font-skript);
	font-weight: 400;
	white-space: nowrap;
}

/* strana „Ti + ja = ♥" (raspored ti_ja): jedan red dole levo ispod slike — reč, „+", reč,
   „=", srce; položaj, veličinu i razmake postavlja JS iz blokTiJa() + TIPOGRAFIJA.ti_ja */
.mag-tija {
	position: absolute;
	display: flex;
	align-items: center;
	white-space: nowrap;
	line-height: 1;
	pointer-events: none;
	z-index: 3;
}

.mag-tija-naslov,
.mag-tija-podnaslov {
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1;
}

.mag-tija-simbol { display: block; flex: none; }
.mag-tija-simbol svg { display: block; width: 100%; height: 100%; }

/* tekst blokovi — položaj (left/top/width) postavlja JS iz tekstBlok() u mag-rasporedi.js */

.mag-tekst-blok {
	position: absolute;
	pointer-events: none;
}

/* mere (font-size, prored, širina stupca, linija) postavlja JS iz mag-tipografija.js — iste kao u PDF-u */
.mag-tekst-naslov {
	font-family: var(--mag-font-naslov);
	font-weight: 400;
	margin: 0;
	word-break: break-word;
}

.mag-tekst-linija { pointer-events: none; }

.mag-tekst-telo {
	font-weight: 400;
	color: inherit;
	white-space: pre-wrap;
}


/* ---------------------------------------------------------------- listanje */

.mag-listanje {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.mag-listanje-sleti > .mag-lst-knjiga,
.mag-listanje-sleti .mag-lst-motor { animation: mag-sleti 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15); }

/* ------------------------------------------------- motor listanja (page-flip vendor) */

/*
 * List koji se okreće privremeno viri van gabarita knjige (rotacija oko
 * hrbata) — bez ovoga roditelj sa overflow:auto (popup dizajna) dobije
 * scrollbarove i poskakuje. overflow:clip zaustavlja širenje scroll
 * oblasti, a clip-margin pušta savijeni list da se vidi malo van knjige
 * (Safari bez clip-margin podrške samo iseče taj višak — i dalje bez
 * scrollbarova).
 */
.mag-lst-okvir {
	overflow: hidden;         /* rezerva za browsere bez overflow: clip */
	overflow: clip;
	overflow-clip-margin: 70px;
}

.mag-lst-motor {
	position: relative;
	margin: 0 auto;
}

/* o.centrirajKorice: motor zatvorenu knjigu drži u jednoj polovini okvira (prednju desno,
   zadnju levo) — pomeranjem za četvrtinu staje u sredinu; trajanje postavlja JS (kao okretanje) */
.mag-lst-motor {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
}
.mag-lst-motor.mag-lst-prva { transform: translateX(-25%); }
.mag-lst-motor.mag-lst-zadnja { transform: translateX(25%); }

/* vendor stPageFlip.css ima tipfeler ".sft__wrapper" — ispravka ovde */
.stf__wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.mag-lst-motor .mag-lst-strana {
	background: var(--mag-papir);
	overflow: hidden;
}

/* tvrda strana (korice) — blaga ivica poveza i kad je motor crta */
.mag-lst-motor .mag-lst-strana[data-density="hard"] {
	box-shadow: inset 0 0 0 2px rgba(43, 37, 64, 0.12);
}

@keyframes mag-sleti {
	from { transform: translateY(-34px) scale(0.9); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.mag-listanje-pomoc {
	text-align: center;
	color: #6d6684;
	font-size: 0.9rem;
	margin: 12px 0 6px;
}

.mag-lst-knjiga {
	position: relative;
	width: 100%;
	cursor: grab;
}

.mag-lst-hvata { cursor: grabbing; }

/* dupli list */

.mag-lst-dupla {
	aspect-ratio: calc(2 * var(--mag-odnos, 1));
	perspective: 2600px;
}

.mag-lst-sto { position: absolute; inset: 0; }

.mag-lst-list {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: left center;
	transition: transform 0.65s cubic-bezier(0.4, 0.15, 0.2, 1);
	will-change: transform;
}

.mag-lst-bez-prelaza,
.mag-lst-hvata .mag-lst-list { transition: none !important; }

.mag-lst-lice {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	background: var(--mag-papir);
	box-shadow: 0 18px 40px -18px rgba(43, 37, 64, 0.55);
}

.mag-lst-prednje { border-radius: 0 6px 6px 0; }
.mag-lst-zadnje { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }

/* senka uz hrbat */
.mag-lst-prednje::before,
.mag-lst-zadnje::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 9%;
	z-index: 5;
	pointer-events: none;
}

.mag-lst-prednje::before { left: 0; background: linear-gradient(90deg, rgba(43, 37, 64, 0.22), transparent); }
.mag-lst-zadnje::before { right: 0; background: linear-gradient(270deg, rgba(43, 37, 64, 0.22), transparent); }

.mag-lst-strana { position: absolute; inset: 0; }
.mag-lst-strana-nema { visibility: hidden; }

.mag-lst-strana .mag-strana-list {
	width: 100%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
}

.mag-lst-zatvorena-napred .mag-lst-list-vrh .mag-lst-prednje { border-radius: 4px 8px 8px 4px; }

/* ćošak koji zove na hvatanje */
.mag-lst-cosak {
	position: absolute;
	bottom: 0;
	width: 58px;
	height: 58px;
	pointer-events: none;
	opacity: 0;
	z-index: 6;
	transition: opacity 0.3s;
}

.mag-lst-cosak-desno {
	right: 0;
	background: linear-gradient(315deg, rgba(255, 255, 255, 0.85), rgba(43, 37, 64, 0.12) 40%, transparent 62%);
}

.mag-lst-cosak-levo {
	left: 0;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0.85), rgba(43, 37, 64, 0.12) 40%, transparent 62%);
}

.mag-lst-list-vrh .mag-lst-prednje .mag-lst-cosak-desno {
	opacity: 1;
	animation: mag-cosak 2.4s ease-in-out infinite;
}

.mag-lst-list-levi .mag-lst-zadnje .mag-lst-cosak-levo { opacity: 0.8; }

@keyframes mag-cosak {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(-6px, -6px); }
}

/* jedna strana (uzak ekran) */

.mag-lst-jedna {
	aspect-ratio: var(--mag-odnos, 1);
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 18px 40px -18px rgba(43, 37, 64, 0.55);
}

.mag-lst-klizac {
	position: absolute;
	inset: 0;
	transition: transform 0.35s ease;
}

.mag-lst-klizac .mag-lst-strana { position: absolute; inset: 0; }

/* navigacija */

.mag-lst-navigacija {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 14px;
}

.mag-lst-strelica {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #e4dff0;
	background: #fff;
	font-family: inherit;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--mag-ljubicasta);
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0 0 3px;
}

.mag-lst-strelica:hover:not(:disabled) { border-color: var(--mag-zuta); }
.mag-lst-strelica:disabled { opacity: 0.35; cursor: not-allowed; }

.mag-lst-oznaka {
	font-weight: 900;
	color: #6d6684;
	min-width: 9em;
	text-align: center;
}

@media (max-width: 640px) {
	.mag-lst-cosak { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.mag-listanje-sleti > .mag-lst-knjiga,
	.mag-lst-cosak { animation: none !important; }
	.mag-lst-list, .mag-lst-klizac { transition: none !important; }
}