/* Kodirani svijet · izbornik na računalu (specifikacija 24, Mix 2).
   Pet statičnih ploča preko cijele širine zaglavlja: Usluge, Kako radim i Radovi su Karta staze,
   O meni i Kontakt su Vitrina na svijetloj ploči. Učitava se samo od 1024 px (media na <link>),
   na svim stranicama, i ne ovisi o varijablama naslovnice: boje i pisma su ovdje.
   Mono pismo ima samo težine 400–500 (main.css). Ponašanje je u izbornik.js. */

/* ---------- otvaranje i položaj ---------- */
.zaglavlje .zaglavlje__unutra, .zaglavlje .izbornik, .zaglavlje .izbornik__popis, .zaglavlje .izbornik__grana { position: static; }
.zaglavlje .mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60; color: #272f2c; text-align: left;
  font: 400 15px/1.5 Archivo, system-ui, sans-serif;
}
.zaglavlje .izbornik__grana.je-otvoren:not(.je-zatvoren) > .mega { display: block; }
@media (hover: hover) { .zaglavlje .izbornik__grana:hover:not(.je-zatvoren) > .mega { display: block; } }
.mega .mg-ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mega em { font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 500; color: #ef5428; }
:where(.mega) a { color: inherit; text-decoration: none; }
.mg-oznaka { display: block; font: 500 11px/1.4 "Martian Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #647067; }
.mg-slika { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid #d9dccf; border-radius: 8px; background: #eef0e6; }
.mg-slika img, .mg-slika video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.mg-slika video { opacity: 0; }
.mega a:hover .mg-slika img { transform: scale(1.05); }
@media (hover: hover) { .mega a:hover .mg-slika video { opacity: 1; } }
.mg-portret { display: block; }
.mg-portret img { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1.5px solid #16181a; border-radius: 50%; background: #e4e4de; }
.mg-preglednik { display: block; overflow: hidden; border: 1px solid #d3d6ca; border-radius: 9px; background: #fff; box-shadow: 0 12px 26px -16px rgb(22 24 26 / .45); }
.mg-preglednik__traka { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid #d9dccf; background: #eceee5; font: 500 11px/1 "Martian Mono", monospace; color: #5a6459; }
.mg-preglednik__traka i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #cfd2c6; }
.mg-preglednik__traka > span:not(.mg-zivo) { margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mg-preglednik .mg-slika { border: 0; border-radius: 0; }
.mg-zivo {
  display: inline-flex; flex: none; align-items: center; gap: 5px; margin: 0 0 0 auto; padding: 2px 7px 2px 6px; border-radius: 999px; white-space: nowrap;
  background: #e3efe5; color: #2c6e45; font: 500 11px/1.4 "Martian Mono", monospace; letter-spacing: .06em; text-transform: uppercase;
}
.mg-zivo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2f9e5b; }
.mg-zivo--ne { background: #fbe6dc; color: #b13d14; }
.mg-zivo--ne::before { width: 4px; height: 4px; border: 1.5px solid #ef5428; background: none; }
.mg-status { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.4 "Martian Mono", monospace; color: #b9beb4; }
.mg-status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #b9bcb0; }
.mg-status--da i { background: #2f9e5b; }
.mg-kopiraj { position: relative; padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 500 11px/1.4 "Martian Mono", monospace; opacity: .75; cursor: pointer; }
/* područja dodira od 44 px bez promjene rasporeda */
.mg-kopiraj::before, .mg-c-dno a::before, .mg-sve::before { content: ""; position: absolute; inset: -16px -6px; }
.mg-c-dno a, .mg-sve { position: relative; }
.mg-kopiraj:hover { opacity: 1; color: #ef5428; }
.mg-gumb {
  display: inline-flex; align-items: center; gap: 18px; padding: 12px 16px; border-radius: 2px;
  background: #ef5428; color: #16181a !important; font: 600 14px/1 Archivo, sans-serif; transition: background .2s;
}
.mg-gumb span { font-size: 17px; transition: translate .2s; }
.mg-gumb:hover { background: #ff6a40; }
.mg-gumb:hover span { translate: 4px 0; }
.mg-sve { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 Archivo, sans-serif; color: #c23a0e !important; }
.mg-sve span { transition: translate .25s; }
.mg-sve:hover span { translate: 5px 0; }
.mg-citat { margin: 0 0 18px; font: italic 500 22px/1.35 Fraunces, Georgia, serif; color: #272f2c; }

/* ---------- Karta staze ---------- */
.mega--a, .mega--c {
  border-bottom: 1px solid #cbcfc1; box-shadow: 0 34px 60px -26px rgb(22 24 26 / .32);
  background: #faf9f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='360' viewBox='0 0 720 360'%3E%3Cg fill='none' stroke='%23e6e8dc' stroke-width='1'%3E%3Cpath d='M-20 70C90 30 170 110 290 80S480 20 740 70'/%3E%3Cpath d='M-20 110C100 70 180 150 300 120S490 60 740 110'/%3E%3Cpath d='M-20 150C110 110 190 190 310 160S500 100 740 150'/%3E%3Cpath d='M-20 250C120 290 230 210 380 240S560 300 740 250'/%3E%3Cpath d='M-20 290C130 330 240 250 390 280S570 340 740 290'/%3E%3Cpath d='M420 190c40-30 110-30 140 0s-10 60-70 50-100-20-70-50Z'/%3E%3C/g%3E%3C/svg%3E") center / 720px auto;
}
.mega--a .mg-in { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 56px; align-items: start; max-width: 1280px; margin: 0 auto; padding: 32px 56px 34px; }
.mg-a-uvod { padding-top: 6px; }
.mg-a-naslov { margin: 12px 0 10px; font: 600 34px/1.04 Archivo, sans-serif; letter-spacing: -.04em; color: #16181a; }
.mg-a-tekst { display: block; margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #4a4f55; }
.mg-a-kviz {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed #c4c9ba; border-radius: 10px;
  font-size: 15px; line-height: 1.4; color: #363b35; transition: border-color .2s, background .2s;
}
.mg-a-kviz .mg-ik { width: 24px; height: 24px; color: #ef5428; }
.mg-a-kviz b { display: block; margin-top: 2px; font-weight: 600; color: #c23a0e; }
.mg-a-kviz:hover { border-color: #ef5428; background: #fff; }
.mg-a-desno { position: relative; min-width: 0; }
.mg-a-staza { position: absolute; left: 0; top: 0; width: 100%; height: 40px; overflow: visible; pointer-events: none; }
.mg-a-staza path { fill: none; stroke: #ef5428; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
.mg-a-traka { position: relative; }
.mg-a-setac {
  position: absolute; left: 0; top: 0; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #ef5428; box-shadow: 0 0 0 5px rgb(239 84 40 / .2); pointer-events: none;
  transition: translate .55s cubic-bezier(.5, 0, .2, 1);
}
.mg-a-marker { position: absolute; top: 13px; left: 50%; z-index: 2; width: 14px; height: 14px; margin-left: -7px; border: 3.5px solid #ef5428; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #faf9f1; }
.mg-a-postaje { position: relative; display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.mg-a-postaje--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mg-a-postaje--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.mg-a-postaja { position: relative; display: block; padding-top: 42px; }
/* pokret samo na unutarnjim slojevima: okvir poveznice se pod mišem ne miče */
.mg-a-postaja > :not(.mg-a-marker, .mg-pecat-novo) { transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
.mg-a-postaja:hover > :not(.mg-a-marker, .mg-pecat-novo) { translate: 0 -3px; }
.mg-a-vrijeme { display: block; margin-top: 13px; font: 500 11px/1.3 "Martian Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #647067; }
.mg-a-postaja b { display: block; margin-top: 5px; font: 600 17px/1.2 Archivo, sans-serif; letter-spacing: -.01em; color: #16181a; }
.mg-a-postaja > b { transition: color .2s, translate .3s cubic-bezier(.2, .8, .2, 1); }
.mg-a-postaja b i { display: inline-block; font-style: normal; color: #ef5428; opacity: 0; translate: -4px 0; transition: opacity .2s, translate .2s; }
.mg-a-postaja:hover b { color: #c23a0e; }
.mg-a-postaja:hover b i { opacity: 1; translate: 0 0; }
.mg-a-opis { display: block; margin-top: 5px; font-size: 15px; line-height: 1.5; color: #4a4f55; }
.mg-pecat-novo {
  position: absolute; top: 30px; right: -8px; z-index: 2; padding: 5px 7px 4px; border: 2px solid #ef5428; border-radius: 4px;
  background: rgb(250 249 241 / .9); color: #c23a0e; font: 500 11px/1 "Martian Mono", monospace; letter-spacing: .14em; rotate: 8deg;
}
.mg-a-dno { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #dfe1d6; }
.mg-a-dno > a:not(.mg-sve) { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #4a4f55; }
.mg-a-dno > a:not(.mg-sve) b { margin-right: 6px; color: #16181a; }
.mg-a-dno > a:not(.mg-sve):hover b { color: #c23a0e; }
.mg-a-napomena { font-size: 15px; color: #647067; }
/* uspon (Kako radim) */
.mg-a-profil { position: relative; aspect-ratio: 1000 / 230; margin-top: 52px; }
.mg-a-profil svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mg-a-teren { fill: url(#mg-a-teren); }
.mg-a-izohipsa { fill: none; stroke: #d7dbcc; stroke-width: 1.2; }
.mg-a-uspon { fill: none; stroke: #ef5428; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 3 8; }
.mg-a-zastava path { fill: none; stroke: #272f2c; stroke-width: 2; }
.mg-a-zastava .mg-a-zastava__platno { fill: #ef5428; stroke: none; }
.mg-a-stanica { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.mg-a-stanica .mg-a-marker { top: -7px; left: 0; }
.mg-a-stanica__tekst {
  position: absolute; left: 0; bottom: 16px; translate: -50% 0; padding: 6px 10px; border: 1px solid #dfe1d6; border-radius: 8px;
  background: rgb(250 249 241 / .95); text-align: center; white-space: nowrap; transition: border-color .2s;
}
.mg-a-stanica--ispod .mg-a-stanica__tekst { bottom: auto; top: 16px; }
.mg-a-stanica__tekst .mg-a-vrijeme { margin: 0 0 2px; }
.mg-a-stanica__tekst b { font-size: 15px; color: #16181a; }
.mg-a-stanica:hover .mg-a-stanica__tekst, .mg-a-stanica:focus-visible .mg-a-stanica__tekst { border-color: #ef5428; }
.mg-a-stanica:hover b { color: #c23a0e; }
.zaglavlje .mg-a-stanica:focus-visible { outline: none; }
.zaglavlje .mg-a-stanica:focus-visible .mg-a-stanica__tekst { outline: 2px solid #e0420f; outline-offset: 2px; }

/* ---------- Vitrina (O meni, Kontakt) ---------- */
.mega--c .mg-in { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 0 56px; max-width: 1280px; margin: 0 auto; padding: 30px 56px 0; }
.mg-c-popis { margin: 14px 0 0; padding: 0; list-style: none; }
.mg-c-stavka {
  position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 10px; padding: 14px 0;
  border-bottom: 1px solid #dfe1d6; color: #626863 !important; transition: color .25s, padding .3s cubic-bezier(.2, .8, .2, 1);
}
.mg-c-stavka::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; translate: 0 -50%; background: #ef5428; transition: height .3s cubic-bezier(.2, .8, .2, 1); }
.mg-c-stavka b { font: 600 21px/1.15 Archivo, sans-serif; letter-spacing: -.02em; }
.mg-c-br, .mg-c-stavka em { font: 500 11px/1.3 "Martian Mono", monospace; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: inherit; }
.mg-c-stavka.je-aktivna { padding-left: 16px; color: #16181a !important; }
.mg-c-stavka.je-aktivna::before { height: 58%; }
.mg-c-stavka.je-aktivna .mg-c-br { color: #c23a0e; }
.mg-c-desno {
  display: grid; margin: 24px 0 26px; padding: 26px 30px; border-radius: 16px; color: #ecebe3; box-shadow: 0 26px 50px -26px rgb(22 24 26 / .55);
  background: #1b1f1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='360' viewBox='0 0 720 360'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M-20 70C90 30 170 110 290 80S480 20 740 70'/%3E%3Cpath d='M-20 150C110 110 190 190 310 160S500 100 740 150'/%3E%3Cpath d='M-20 250C120 290 230 210 380 240S560 300 740 250'/%3E%3C/g%3E%3C/svg%3E") center / 720px auto;
}
.mg-c-desno .mg-oznaka { color: #a3aa9f; }
.mg-c-pregled {
  display: grid; grid-area: 1 / 1; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; opacity: 0; visibility: hidden; translate: 14px 0;
  transition: opacity .3s, translate .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s;
}
.mg-c-pregled.je-aktivna { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.mg-c-naslov { margin: 0 0 10px; font: 600 28px/1.08 Archivo, sans-serif; letter-spacing: -.03em; color: #fff; }
.mg-c-natpis > p:not(.mg-c-naslov) { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: rgb(236 235 227 / .74); }
.mg-c-red { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mg-c-desno .mg-gumb { color: #16181a !important; }
.mg-c-dno {
  display: flex; grid-column: 1 / -1; align-items: center; gap: 28px; padding: 14px 0 18px; border-top: 1px solid #dfe1d6;
  font: 500 11px/1.3 "Martian Mono", monospace; color: #647067;
}
.mg-c-dno a, .mg-c-dno__mail { display: inline-flex; align-items: center; gap: 8px; color: #272f2c; }
.mg-c-dno a:hover { color: #c23a0e; }
.mg-c-dno .mg-ik { width: 16px; height: 16px; color: #ef5428; }
.mg-c-dno > span:last-child { margin-left: auto; }
.mg-c-vodic { display: grid; justify-items: center; gap: 16px; text-align: center; }
.mg-c-vodic .mg-portret { width: 170px; }
.mg-c-vodic .mg-portret img { border-color: #ecebe3; box-shadow: 0 0 0 6px #1b1f1e, 0 0 0 7.5px #ff5a2a; }
.mg-c-desno .mg-citat { margin: 0; font-size: 19px; color: #ecebe3; }
.mg-c-veliko { display: grid; gap: 16px; align-content: center; justify-items: start; min-height: 230px; padding: 26px; border: 1px solid rgb(255 255 255 / .12); border-radius: 10px; }
.mg-c-telefon { font: 600 clamp(26px, 2.9vw, 46px)/1 Archivo, sans-serif; letter-spacing: -.03em; color: #fff !important; white-space: nowrap; }
.mg-c-telefon--mail { font-size: 25px; }
a.mg-c-telefon:hover { color: #ff7a4f !important; }

/* Vitrina: crteži O meni 02–05. 02–04 su papiri sa štipaljkom i olovkom, 05 je „in” od staze. Mirno stanje je cijela slika;
   --mg-a je animacija sloja (kreće kad pregled postane aktivan, dolje), --mg-d kašnjenje kvačice ili markacije. */
.mg-c-papir { display: grid; place-items: center; height: 228px; }
.mg-papir {
  position: relative; width: 236px; margin-right: 48px; padding: 16px 16px 12px 22px; border-radius: 2px; color: #16181a; rotate: -2deg;
  background: #f5f2e7 linear-gradient(90deg, #0000 13px, #ef542859 13px 14px, #0000 14px); box-shadow: 0 1px 0 #0005, 0 20px 30px -16px #000;
  --mg-a: mg-papir .6s ease-out backwards;
}
.mg-stipaljka { position: absolute; left: 50%; top: -19px; width: 48px; height: 34px; margin-left: -24px; filter: drop-shadow(0 2px 1px #0005); }
/* zaglavlje: prsten i desno narančasti broj */
.mg-papir p { display: flex; justify-content: space-between; margin: 0 0 8px; font: 500 10.5px/14px "Martian Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #5b625d; }
.mg-papir p > :first-child::before { content: ""; display: inline-block; box-sizing: content-box; width: 9px; height: 9px; margin-right: 7px; border: 2.5px solid #ef5428; border-radius: 50%; vertical-align: -.5px; }
.mg-papir p > span + span { color: #c23a0e; }
/* retci s bilješkom i kućicom; kvačica je crta duljine 1 koja se iscrta (odmak na početku --mg-k) */
.mg-papir :is(ul, ol) { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e1dccb; }
.mg-papir li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #e1dccb; }
.mg-papir i { font: italic 500 14px/1 Fraunces, Georgia, serif; color: #c23a0e; }
.mg-papir li > svg { flex: none; width: 22px; height: 22px; margin-top: -4px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mg-papir rect { fill: #fffdf6; stroke: #16181a; stroke-width: 1.4; }
.mg-papir li path { stroke: #ef5428; stroke-width: 2.4; stroke-dasharray: 1 2; --mg-a: mg-kvacica .2s linear var(--mg-d) backwards; }
.mg-olovka { position: absolute; width: 104px; height: 12px; transform-origin: 1px 6px; rotate: 44deg; scale: .86; filter: drop-shadow(1px 3px 1.5px #0004); }

/* 02 Pitanja prije polaska: popis i brojač 0/6 → 6/6 */
.mg-papir--popis li { height: 25px; font: 600 14px/1 Archivo, sans-serif; --mg-d: .4s; --mg-k: 1.1; }
.mg-papir--popis li:nth-child(2) { --mg-d: .68s; }
.mg-papir--popis li:nth-child(3) { --mg-d: .96s; }
.mg-papir--popis li:nth-child(4) { --mg-d: 1.24s; }
.mg-papir--popis li:nth-child(5) { --mg-d: 1.52s; }
.mg-papir--popis li:nth-child(6) { --mg-d: 1.8s; }
.mg-papir--popis li i { margin-left: auto; }
.mg-brojac i { display: inline-block; height: 14px; overflow: hidden; vertical-align: top; font: inherit; color: inherit; }
.mg-brojac b { display: block; font-weight: 500; --mg-a: mg-brojac 1.68s steps(6, jump-start) .6s backwards; }
.mg-papir--popis .mg-olovka { left: 217px; top: 160px; --mg-a: mg-olovka-popis 2s linear backwards; }
/* olovka (2 s = 100 %) kvači redak po redak u trenutku --mg-d: kratko dolje, dugo gore; redak je 25 px */
@keyframes mg-olovka-popis {
  0% { translate: 18px -85px; opacity: 0; } 12% { opacity: 1; }
  20% { translate: -16px -115px; } 22.5% { translate: -12px -110px; } 30% { translate: 0 -125px; }   /* Cijena, .4 s */
  34% { translate: -16px -90px; } 36.5% { translate: -12px -85px; } 44% { translate: 0 -100px; }     /* Rok, .68 s */
  48% { translate: -16px -65px; } 50.5% { translate: -12px -60px; } 58% { translate: 0 -75px; }      /* Domena, .96 s */
  62% { translate: -16px -40px; } 64.5% { translate: -12px -35px; } 72% { translate: 0 -50px; }      /* Izmjene, 1,24 s */
  76% { translate: -16px -15px; } 78.5% { translate: -12px -10px; } 86% { translate: 0 -25px; }      /* Održavanje, 1,52 s */
  90% { translate: -16px 10px; } 92.5% { translate: -12px 15px; } to { translate: 0 0; }             /* Lokacija, 1,8 s */
}

/* 03 Stanje na stazama: bilten, „Vi ste ovdje” i elipsa oko eRačuna */
.mg-papir--bilten { padding-bottom: 9px; }
.mg-papir--bilten p { margin-bottom: 7px; line-height: 1.7; }
.mg-papir--bilten li { position: relative; display: grid; grid: auto / 1fr 22px; padding: 5px 0; --mg-d: .45s; }
.mg-papir--bilten li + li { --mg-d: .8s; }
.mg-papir--bilten li:last-child { padding-top: 13px; border: 0; }
.mg-papir--bilten li > span { font: 600 14px/16px Archivo, sans-serif; white-space: nowrap; }
.mg-papir--bilten i { display: block; text-align: right; line-height: 16px; }
.mg-papir time { margin-right: 6px; font: 500 10.5px/1 "Martian Mono", monospace; color: #5b625d; }
.mg-papir .mg-ovdje { display: flex; height: 24px; padding: 0; background: #ef54281c; box-shadow: -22px 0 #ef54281c, 16px 0 #ef54281c; }
.mg-ovdje b { flex: 1; font: 500 10.5px/14px "Martian Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }
.mg-ovdje u { position: absolute; left: -14px; top: 6.5px; width: 11px; height: 11px; border-radius: 50%; background: #ff5a2a; --mg-a: mg-tocka .35s cubic-bezier(.3, 1.6, .5, 1) 1.05s backwards; }
.mg-papir .mg-krug { position: absolute; left: -14px; top: 4px; width: 232px; max-width: none; height: 56px; }
.mg-papir .mg-krug path { --mg-a: mg-kvacica .8s linear 1.2s backwards; }
.mg-papir--bilten .mg-olovka { left: 213px; top: 157.8px; --mg-a: mg-olovka-bilten 2s linear backwards; }
/* dvije kvačice (.45 i .8 s), zatim elipsa od 1,2 s: gore ulijevo, zavoj, dolje udesno */
@keyframes mg-olovka-bilten {
  0% { translate: 16px -135px; opacity: 0; } 12% { opacity: 1; }
  22.5% { translate: -12px -101px; } 25% { translate: -8px -96px; } 32.5% { translate: 4px -111px; }   /* Fiskalizacija */
  40% { translate: -12px -58px; } 42.5% { translate: -8px -53px; } 50% { translate: 4px -68px; }      /* Chatbot */
  60% { translate: 8px 2px; } 64% { translate: -40px -2px; } 68% { translate: -88px -3px; } 72% { translate: -135px -3px; } 76% { translate: -183px 0; rotate: 44deg; }
  77% { translate: -195px 3px; } 78% { translate: -199px 13px; } 80% { translate: -185px 31px; rotate: 28deg; }
  84% { translate: -138px 38px; rotate: 22deg; } 88% { translate: -90px 39px; rotate: 22deg; } 92% { translate: -42px 37px; rotate: 24deg; } 96% { translate: 5px 32px; rotate: 30deg; }
  97% { translate: 16px 26px; } 98% { translate: 18px 15px; rotate: 38deg; } to { translate: 0 0; }
}

/* 04 Blog: dva zapisa, olovka podvuče naslov novijeg */
.mg-c-papir--dnevnik { position: relative; display: block; justify-self: center; width: 264px; }
.mg-papir--zapis { position: absolute; width: 220px; margin: 0; padding: 11px 14px 11px 22px; }
.mg-papir--stariji { right: 0; top: 11px; padding-bottom: 26px; rotate: 1.5deg; background-color: #ede7d6; --mg-a: mg-papir-stariji .6s ease-out backwards; }
.mg-papir--noviji { left: 0; top: 107px; --mg-a: mg-papir-noviji .6s cubic-bezier(.2, .8, .2, 1) .25s backwards; }
.mg-papir--zapis p { margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid #e1dccb; }
.mg-papir--zapis b { display: block; font: 600 14px/17px Archivo, sans-serif; letter-spacing: -.01em; }
.mg-papir--zapis i { display: block; margin-top: 4px; line-height: 15px; }
.mg-papir--noviji i { margin-top: 8px; }
.mg-papir--zapis u {
  position: relative; padding-bottom: 6px; text-decoration: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5Q44 2.6 88 4.4T168 3.2' fill='none' stroke='%23ef5428' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% 7px no-repeat;
  --mg-a: mg-podcrta .7s linear 1s backwards;
}
.mg-papir--zapis .mg-olovka { left: 100%; top: 100%; margin: -9px 0 0 -2px; --mg-a: mg-olovka-dnevnik 2s linear backwards; }
/* olovka čeka na početku podcrte i ide s njom 1–1,7 s (left 0 → 100 %) */
@keyframes mg-olovka-dnevnik {
  0%, 25% { left: 0; translate: -60px 20px; opacity: 0; }
  40%, 50% { left: 0; translate: 0 0; opacity: 1; }
  85% { left: 100%; translate: 0 0; }
  92% { translate: 5px -6px; } to { translate: 0 0; }
}

/* 05 Goran na LinkedInu: „in” od staze, šetač pali markacije do cilja na točki */
.mg-in-staza { position: relative; width: 100%; aspect-ratio: 45 / 29; container-type: inline-size; }
.mg-in-staza svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mg-in-izohipse path { fill: none; stroke: #ecebe3; }
.mg-in-sjena, .mg-in-traka { fill: #e9e8dd; stroke: #e9e8dd; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.mg-in-sjena { fill: #111413; stroke: #111413; }
.mg-in-sjena path, .mg-in-traka path { fill: none; }
.mg-in-sjena circle, .mg-in-traka circle { stroke: none; }
.mg-in-crta { fill: none; stroke: #ef5428; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 3 6.5; stroke-dashoffset: 4.5; }
.mg-in-pokrov { fill: none; stroke: #e9e8dd; stroke-width: 7; stroke-linecap: square; stroke-dasharray: 1 1; opacity: 0; --mg-a: mg-in-otkrij .983s linear .25s both; }
.mg-in-pokrov + .mg-in-pokrov { --mg-a: mg-in-otkrij .383s linear 1.42s both; }
.mg-in-start { fill: #1b1f1e; }
.mg-in-markacije circle, .mg-in-cilj {
  fill: #fff; stroke: #ef5428; stroke-width: 3.2; transform-box: fill-box; transform-origin: center;
  --mg-d: .37s; --mg-a: mg-in-upali .45s cubic-bezier(.2, .8, .2, 1) var(--mg-d) both;
}
.mg-in-markacije :nth-child(2) { --mg-d: .6s; }
.mg-in-markacije :nth-child(3) { --mg-d: .88s; }
.mg-in-markacije :nth-child(4) { --mg-d: 1.12s; }
.mg-in-markacije :nth-child(5) { --mg-d: 1.54s; }
.mg-in-markacije :nth-child(6) { --mg-d: 1.75s; }
.mg-in-cilj { stroke-width: 5.6; --mg-d: 1.95s; }
.mg-in-puls { fill: none; stroke: #ff5a2a; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; --mg-a: mg-in-puls 3.6s ease-out 2.05s infinite; }
.mg-in-setac { opacity: 0; fill: #ff5a2a; offset-path: path("M234 152V102C234 84 220 72 201 72C182 72 168 84 168 102V152L130 152V74L130 34"); offset-rotate: 0deg; }
.mg-in-setac circle:first-child { opacity: .25; }
@supports (offset-distance: 0%) { .mg-in-setac { --mg-a: mg-in-hod 1.75s linear .25s both; } }
.mg-in-citat {
  position: absolute; left: 50%; top: 89.2%; translate: -50% -50%; font: italic 500 max(14px, 5cqi)/1.3 Fraunces, Georgia, serif;
  text-align: center; white-space: nowrap; color: #ecebe3; --mg-a: mg-in-citat .45s ease-out 2s both;
}

/* pokret crteža: samo bez smanjenog gibanja i bez „Zaustavi animacije” */
@media (prefers-reduced-motion: no-preference) {
  html:not(.bez-petlji) .mg-c-pregled.je-aktivna :is(.mg-papir, .mg-papir li path, .mg-papir u, .mg-brojac b, .mg-olovka, .mg-in-pokrov, .mg-in-markacije circle, .mg-in-cilj, .mg-in-puls, .mg-in-setac, .mg-in-citat) { animation: var(--mg-a); }
}
@keyframes mg-papir { from { rotate: -6deg; translate: -4px 12px; } }
@keyframes mg-papir-stariji { from { rotate: 6deg; translate: 6px 12px; } }
@keyframes mg-papir-noviji { from { rotate: -7deg; translate: -14px 14px; scale: 1.05; } }
@keyframes mg-kvacica { from { stroke-dashoffset: var(--mg-k, 1.02); } }
@keyframes mg-brojac { from { translate: 0 -84px; } }
@keyframes mg-tocka { from { scale: 0; } }
@keyframes mg-podcrta { from { background-size: 0 7px; } }
@keyframes mg-in-otkrij { from { stroke-dashoffset: 0; opacity: 1; } 99% { opacity: 1; } to { stroke-dashoffset: -1; opacity: 0; } }
@keyframes mg-in-hod { from { offset-distance: 0%; opacity: 0; } 5%, 92% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
@keyframes mg-in-upali { from { opacity: .3; scale: .45; } 55% { opacity: 1; scale: 1.35; } to { scale: 1; } }
@keyframes mg-in-puls { 0% { opacity: .8; scale: 1; } 45%, 100% { opacity: 0; scale: 2.4; } }
@keyframes mg-in-citat { from { opacity: 0; transform: translateX(-6px); } }

/* Vitrina: razgovor u Kontaktu 01–04. Posjetitelj pita (svijetli oblačić desno), Goran odgovara (tamni oblačić s narančastim rubom,
   portret s prstenom dolje lijevo). Mirno stanje je cijeli razgovor, u 03 pitanje s ponuđenim odgovorima. Ukrasi imaju .mg-ukras
   i na mobitelu se ne prikazuju (izbornik-mobitel.css), pa ondje ostaju broj, stanje radnog vremena, adresa i Kopiraj.
   --mg-a je animacija sloja (kreće kad pregled postane aktivan, dolje); oblačić je bez nje dok mu je stavka ne zada. */
.mg-razgovor { position: relative; display: flex; flex-direction: column; gap: 12px; --mg-a: none; }
.mg-oblacic { margin: 0; border-radius: 18px 18px 18px 4px; transform-origin: 0 100%; --mg-a: none; }
.mg-oblacic--pitanje {
  align-self: flex-end; max-width: 90%; padding: 11px 15px 12px; border-radius: 18px 18px 4px; background: #faf9f1; color: #16181a;
  font: 500 clamp(16px, 1.18vw, 17px)/1.38 Archivo, sans-serif; box-shadow: 0 16px 28px -18px #000; transform-origin: 100% 100%;
  --mg-a: mg-rz-ulaz .4s cubic-bezier(.2, .8, .2, 1) .04s both;
}
.mg-oblacic--goran { padding: 10px 17px 13px; border: 1.5px solid #ff5a2a; background: #242927; color: #ecebe3; font: italic 500 clamp(19px, 1.46vw, 21px)/1.28 Fraunces, Georgia, serif; }
.mg-oblacic--goran em { color: #ff7a4f; }
.mg-oblacic--malo { padding: 8px 17px 10px; font-size: clamp(17px, 1.25vw, 18px); line-height: 1.25; }
.mg-razgovor-ime { display: block; margin-bottom: 4px; font: 500 11px/1.4 "Martian Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #a3aa9f; }
/* Goranov red: oblačić 48 px udesno, portret dolje lijevo */
.mg-razgovor-red { position: relative; align-self: flex-start; max-width: 100%; box-sizing: border-box; padding-left: 48px; }
.mg-razgovor-portret {
  position: absolute; left: 0; bottom: 0; width: 38px; height: 38px; box-sizing: border-box; border: 1.5px solid #ecebe3; border-radius: 50%;
  background: #e4e4de url(/assets/img/portret.webp) center / cover; background-image: image-set("/assets/img/portret.avif" type("image/avif"), "/assets/img/portret.webp" type("image/webp"));
  box-shadow: 0 0 0 2.5px #1b1f1e, 0 0 0 4px #ff5a2a;
}
/* prsten (38 px, preko portreta) se raširi i nestane: --mg-po početna prozirnost, --mg-p0 i --mg-p1 početna i završna veličina */
.mg-razgovor-portret::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px; box-sizing: border-box;
  border: 1.5px solid #ff5a2a; border-radius: 50%; opacity: 0;
}
/* tri točke dok Goran tipka: --mg-td kašnjenje prve, --mg-tk razmak, --mg-tt trajanje i krivulja, --mg-tn ponavljanja */
.mg-razgovor-tipka { display: flex; gap: 5px; opacity: 0; --mg-tt: .45s ease-in-out; --mg-tk: .1s; }
.mg-oblacic.mg-razgovor-tipka { padding: 14px 16px; }
.mg-razgovor-tipka i { width: 7px; height: 7px; border-radius: 50%; background: #ecebe3; opacity: .4; --mg-a: mg-rz-tocka var(--mg-tt) calc(var(--mg-td) + var(--mg-ti, 0) * var(--mg-tk)) var(--mg-tn, 1); }
.mg-razgovor-tipka i + i { --mg-ti: 1; }
.mg-razgovor-tipka i + i + i { --mg-ti: 2; }

/* 01 Nazovite: „Mogu li vas nazvati?”, Goran tipka, pa „Naravno.” iznad broja i stanja radnog vremena */
.mg-razgovor--poziv .mg-razgovor-red { transform-origin: 0 100%; --mg-a: mg-rz-ulaz .42s cubic-bezier(.2, .8, .2, 1) .18s both; }
.mg-razgovor--poziv .mg-c-veliko { gap: 0; min-height: 0; }
.mg-razgovor--poziv :is(em, .mg-razgovor-tipka) { grid-area: 2 / 1; }
.mg-razgovor--poziv em { --mg-y: 5px; --mg-a: mg-rz-gore .36s cubic-bezier(.2, .8, .2, 1) .84s both; }
.mg-razgovor--poziv .mg-razgovor-tipka { align-self: center; --mg-td: .28s; --mg-a: mg-rz-tipka .9s linear both; }
.mg-razgovor--poziv .mg-c-telefon { grid-area: 3 / 1; margin-top: 8px; font-size: clamp(28px, 2.8vw, 40px); }
.mg-razgovor--poziv:lang(en) .mg-c-telefon { font-size: clamp(24px, 2.3vw, 34px); }   /* +385 95 904 9777 */
.mg-razgovor--poziv .mg-status { grid-area: 4 / 1; align-items: flex-start; margin-top: 11px; }
.mg-razgovor--poziv .mg-status i { margin-top: 3.5px; }
.mg-razgovor--poziv .mg-status [data-kad] { text-wrap: balance; }
.mg-razgovor--poziv .mg-razgovor-portret::after { inset: -5.5px; width: auto; height: auto; margin: 0; box-sizing: content-box; --mg-a: mg-rz-pali 1s ease-out .55s both; }

/* 02 Pišite: „Kamo da pošaljem upit?”, adresa na praznom Goranovu oblačiću, pa „Pročitam i odgovorim.”; adresa i Kopiraj su izravno
   u .mg-c-veliko (mobitel), a mreža zadržava njegovu najmanju visinu */
.mg-razgovor--mail { display: grid; grid: auto 12px auto auto 6px auto / 38px 10px auto minmax(0, 1fr); gap: 0; align-content: center; justify-items: start; padding: 0; border: 0; border-radius: 0; }
.mg-razgovor--mail .mg-oblacic--pitanje { grid-area: 1 / 1 / 2 / 5; justify-self: end; padding-block: 10px 11px; --mg-a: mg-rz-ulaz .4s cubic-bezier(.2, .8, .2, 1) .04s backwards; }
.mg-razgovor--mail .mg-oblacic--prazan { position: relative; grid-area: 3 / 3 / 5 / 4; justify-self: stretch; align-self: stretch; padding: 0; border-radius: 18px 18px 18px 6px; }
.mg-razgovor--mail .mg-razgovor-ime { position: absolute; top: 9px; left: 20.5px; margin: 0; }
.mg-razgovor--mail .mg-c-telefon { position: relative; grid-area: 3 / 3; margin: 33px 22px 0; font-size: clamp(18px, 1.68vw, 24px); line-height: 1.1; }
.mg-razgovor--mail .mg-kopiraj { grid-area: 4 / 3; margin: 11px 22px 14px; }
.mg-razgovor--mail .mg-kopiraj:not(:hover) { opacity: .9; }
.mg-razgovor--mail > :is(.mg-oblacic--prazan, .mg-c-telefon, .mg-kopiraj) { --mg-a: mg-rz-gore .4s cubic-bezier(.2, .8, .2, 1) .18s backwards; }
.mg-razgovor--mail .mg-razgovor-portret { position: relative; grid-area: 6 / 1; align-self: end; }
/* prsten se poslije tiho ponavlja svakih 7 s */
.mg-razgovor--mail .mg-razgovor-portret::after { --mg-po: .7; --mg-p1: 2; --mg-a: mg-rz-krug .8s ease-out .75s, mg-rz-tiho 7s ease-out 2.3s infinite; }
.mg-razgovor--mail :is(.mg-oblacic--malo, .mg-razgovor-tipka) { grid-area: 6 / 3 / 7 / 5; justify-self: start; border-radius: 6px 18px 18px 4px; }
.mg-razgovor--mail .mg-oblacic--malo { grid-column: 3; padding-inline: 20.5px; --mg-a: mg-rz-ulaz .4s cubic-bezier(.2, .8, .2, 1) 1.5s backwards; }
.mg-razgovor--mail .mg-razgovor-tipka { align-self: end; --mg-tt: .5s cubic-bezier(.2, .8, .2, 1); --mg-td: .8s; --mg-tk: .12s; --mg-tn: 2; --mg-a: mg-rz-tipka .8s cubic-bezier(.2, .8, .2, 1) .75s backwards; }
.mg-razgovor--mail .mg-razgovor-tipka i { opacity: .35; }

/* 03 Ne znate odakle krenuti?: Goran pita, posjetitelj odabere odgovor, ostali se zbiju, Goran tipka i odgovori */
.mg-razgovor--kviz { display: grid; gap: 5px; }
.mg-razgovor--kviz > .mg-oblacic--goran { justify-self: start; margin: 0 0 5px 48px; line-height: 1.25; text-wrap: balance; --mg-a: mg-rz-ulaz .42s cubic-bezier(.2, .8, .2, 1) .04s both; }
.mg-razgovor--kviz .mg-razgovor-ime { display: flex; align-items: center; gap: 12px; }
.mg-razgovor--kviz .mg-razgovor-ime b { display: flex; gap: 3px; margin-left: auto; }
.mg-razgovor--kviz .mg-razgovor-ime i { width: 12px; height: 3px; border-radius: 2px; background: #454c48; }
.mg-razgovor--kviz .mg-razgovor-ime i:first-child { background: #ff5a2a; }
.mg-razgovor--kviz .mg-razgovor-ime i:nth-child(2) { --mg-a: mg-rz-pip 2.6s ease-in-out 2.6s infinite; }
.mg-razgovor-izbor, .mg-razgovor-ponude span {
  justify-self: end; padding: 4px 11px; border: 1px solid rgb(236 235 227 / .38); border-radius: 14px; background: rgb(250 249 241 / .04);
  color: #ecebe3; font: 500 13px/1.25 Archivo, sans-serif; transform-origin: 100% 100%;
  --mg-d: .15s; --mg-a: mg-rz-ulaz .32s cubic-bezier(.2, .8, .2, 1) var(--mg-d) both, mg-rz-van .25s ease-in 1.05s forwards;
}
.mg-razgovor-ponude span + span { --mg-d: .2s; }
.mg-razgovor-ponude span + span + span { --mg-d: .25s; }
.mg-razgovor-izbor { --mg-a: mg-rz-ulaz .32s cubic-bezier(.2, .8, .2, 1) .1s both, mg-rz-bira .5s ease-out 1s forwards; }
.mg-razgovor-ponude { display: grid; gap: 5px; max-height: 89px; margin: 0; --mg-a: mg-rz-zbij .45s cubic-bezier(.4, 0, .2, 1) 1.05s forwards; }
.mg-razgovor--kviz .mg-razgovor-red { display: grid; }
.mg-razgovor--kviz .mg-razgovor-red > :not(.mg-razgovor-portret) { grid-area: 1 / 1; }
.mg-razgovor--kviz .mg-razgovor-red > .mg-oblacic { justify-self: start; align-self: end; margin-top: 5px; opacity: 0; }
.mg-razgovor--kviz .mg-razgovor-tipka { --mg-td: 1.6s; --mg-tt: .6s ease-in-out; --mg-a: mg-rz-ulaz .3s cubic-bezier(.2, .8, .2, 1) 1.55s both, mg-rz-van .15s 1.95s forwards; }
.mg-razgovor--kviz .mg-oblacic--malo { --mg-a: mg-rz-ulaz .42s cubic-bezier(.2, .8, .2, 1) 2s both; }
.mg-razgovor--kviz .mg-oblacic--malo em { display: block; }
.mg-razgovor--kviz .mg-razgovor-portret::after { --mg-po: .8; --mg-p0: 1.15; --mg-p1: 2.1; --mg-a: mg-rz-krug .9s ease-out 1.55s; }

/* 04 Vršna knjiga: „Ne znam točno što mi treba.”, Goran nudi list vršne knjige i upis se počne pisati */
.mg-razgovor--knjiga .mg-oblacic--goran { display: grid; padding: 10px 7px 7px; --mg-a: mg-rz-ulaz .42s cubic-bezier(.2, .8, .2, 1) .18s backwards; }
.mg-razgovor--knjiga .mg-oblacic--pitanje { --mg-a: mg-rz-ulaz .4s cubic-bezier(.2, .8, .2, 1) .04s backwards; }
.mg-razgovor--knjiga .mg-razgovor-ime { margin: 0 10px 4px; }
.mg-razgovor--knjiga em { margin: 0 10px 7px; }
.mg-razgovor-list { display: grid; gap: 5px; margin: 0; padding: 9px 10px 8px; border-radius: 12px 12px 12px 3px; background: #faf9f1; color: #16181a; }
.mg-razgovor-list small { display: flex; align-items: center; gap: 7px; font: 500 10.5px/1.35 "Martian Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #c23a0e; }
.mg-razgovor-list small::before { content: ""; width: 4px; height: 4px; border: 2.5px solid #ef5428; border-radius: 50%; }
.mg-razgovor-list b, .mg-razgovor-list::after { display: flex; align-items: center; min-height: 22px; border-bottom: 1.5px dashed #c5c9bc; }
.mg-razgovor-list b { font: 600 clamp(14px, 1.04vw, 15px)/1.25 Archivo, sans-serif; }
.mg-razgovor-list::after { content: ""; }
.mg-razgovor-list b > span { position: relative; white-space: nowrap; }
.mg-razgovor-list b span span { display: block; --mg-a: mg-rz-pisi 1s linear .75s backwards; }
.mg-razgovor-list b > span::after {
  content: ""; position: absolute; top: 50%; left: 100%; width: 2px; height: 1.15em; margin: -.575em 0 0 2px; background: #ef5428;
  --mg-a: mg-rz-rub 1s linear .75s backwards, mg-rz-kursor 1.1s steps(1, end) 1.75s infinite;
}
.mg-razgovor--knjiga .mg-razgovor-portret::after { --mg-a: mg-rz-krug .8s ease-out .2s; }

@media (max-width: 1279.98px) {
  .mg-oblacic--goran { padding-inline: 14px; }
  .mg-razgovor--poziv .mg-razgovor-red { padding-left: 45px; }
  .mg-razgovor--poziv .mg-status { font: 500 12.5px/1.35 Archivo, sans-serif; }   /* najdulje stanje u dva retka */
  .mg-razgovor--poziv .mg-status i { margin-top: 4.5px; }
}
@media (max-width: 1199.98px) { .mg-razgovor--mail .mg-oblacic--malo { justify-self: stretch; } }

/* pokret razgovora: samo bez smanjenog gibanja i bez „Zaustavi animacije” */
@media (prefers-reduced-motion: no-preference) {
  html:not(.bez-petlji) .mg-c-pregled.je-aktivna :is(.mg-oblacic, .mg-razgovor-red, .mg-razgovor-tipka, .mg-razgovor-tipka i, .mg-razgovor--poziv em, .mg-razgovor--mail > :is(.mg-c-telefon, .mg-kopiraj), .mg-razgovor-ime i:nth-child(2), .mg-razgovor-izbor, .mg-razgovor-ponude, .mg-razgovor-ponude span, .mg-razgovor-list span span),
  html:not(.bez-petlji) .mg-c-pregled.je-aktivna :is(.mg-razgovor-portret, .mg-razgovor-list b > span)::after { animation: var(--mg-a); }
}
@keyframes mg-rz-ulaz { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes mg-rz-gore { from { opacity: 0; translate: 0 var(--mg-y, 12px); } }
@keyframes mg-rz-tipka { 0%, 100% { opacity: 0; } 18%, 82% { opacity: 1; } }
@keyframes mg-rz-tocka { 50% { opacity: 1; translate: 0 -3px; } }
@keyframes mg-rz-krug { from { opacity: var(--mg-po, .85); scale: var(--mg-p0, 1); } to { opacity: 0; scale: var(--mg-p1, 1.9); } }
@keyframes mg-rz-pali { 0% { opacity: 0; scale: 1; } 15% { opacity: .85; } to { opacity: 0; scale: 1.7; } }   /* 01: prsten se najprije blago upali */
@keyframes mg-rz-tiho { 0%, 88% { opacity: 0; scale: 1; } 90% { opacity: .4; } to { opacity: 0; scale: 1.7; } }
@keyframes mg-rz-van { to { opacity: 0; transform: scale(.94); } }
@keyframes mg-rz-zbij { from { clip-path: inset(0); } to { max-height: 0; clip-path: inset(0); } }
@keyframes mg-rz-bira {
  30% { padding: 4px 11px; font-size: 13px; transform: scale(.93); }
  to { padding: 10px 14px 11px; border-color: #faf9f1; border-radius: 18px 18px 4px; background: #faf9f1; color: #16181a; font-size: clamp(16px, 1.18vw, 17px); line-height: 1.38; box-shadow: 0 16px 28px -18px #000; }
}
@keyframes mg-rz-pip { 50% { background: #ff7a4f; } }
@keyframes mg-rz-pisi { from { clip-path: inset(-.3em 100% -.3em 0); } to { clip-path: inset(-.3em 0); } }
@keyframes mg-rz-rub { from { left: 0; } }
@keyframes mg-rz-kursor { 50% { opacity: 0; } }

/* ---------- uže računalo, 1024–1279 px ---------- */
@media (max-width: 1279.98px) {
  .mega--a .mg-in { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 28px 32px 30px; }
  .mega--c .mg-in { grid-template-columns: 300px minmax(0, 1fr); gap: 0 40px; padding: 26px 32px 0; }
  .mega--kako .mg-in { grid-template-columns: 1fr; gap: 0; }
  .mega--kako .mg-a-uvod { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: end; }
  .mega--kako .mg-a-uvod > .mg-oznaka { grid-column: 1 / -1; }
  .mega--kako .mg-a-uvod > .mg-a-naslov { grid-column: 1; margin-bottom: 0; }
  .mega--kako .mg-a-uvod > .mg-a-tekst { grid-column: 2; grid-row: 2; margin: 0; }
  .mega--kako .mg-a-uvod > .mg-sve { grid-column: 2; grid-row: 3; margin-top: 10px; }
}

/* ---------- pokret: samo bez smanjenog gibanja i bez „Zaustavi animacije” ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.bez-petlji) .zaglavlje .mega { animation: mg-otvori .34s cubic-bezier(.2, .8, .2, 1); }
  html:not(.bez-petlji) .mega .mg-a-uvod { animation: mg-gore .45s cubic-bezier(.2, .8, .2, 1) 60ms backwards; }
  html:not(.bez-petlji) .mega .mg-a-postaje > li, html:not(.bez-petlji) .mega .mg-a-stanica { animation: mg-gore .5s cubic-bezier(.2, .8, .2, 1) 140ms backwards; }
  html:not(.bez-petlji) .mega .mg-a-postaje > li:nth-child(2), html:not(.bez-petlji) .mega .mg-a-stanica:nth-of-type(2) { animation-delay: 220ms; }
  html:not(.bez-petlji) .mega .mg-a-postaje > li:nth-child(3), html:not(.bez-petlji) .mega .mg-a-stanica:nth-of-type(3) { animation-delay: 300ms; }
  html:not(.bez-petlji) .mega .mg-a-postaje > li:nth-child(4), html:not(.bez-petlji) .mega .mg-a-stanica:nth-of-type(4) { animation-delay: 380ms; }
  html:not(.bez-petlji) .mega .mg-a-stanica:nth-of-type(5) { animation-delay: 460ms; }
  html:not(.bez-petlji) .mega .mg-a-staza, html:not(.bez-petlji) .mega .mg-a-uspon { animation: mg-crtaj .9s cubic-bezier(.4, 0, .2, 1) 80ms backwards; }
  html:not(.bez-petlji) .mega .mg-c-popis > li { animation: mg-gore .45s cubic-bezier(.2, .8, .2, 1) 80ms backwards; }
  html:not(.bez-petlji) .mega .mg-c-popis > li:nth-child(2) { animation-delay: 135ms; }
  html:not(.bez-petlji) .mega .mg-c-popis > li:nth-child(3) { animation-delay: 190ms; }
  html:not(.bez-petlji) .mega .mg-c-popis > li:nth-child(4) { animation-delay: 245ms; }
  html:not(.bez-petlji) .mega .mg-c-popis > li:nth-child(5) { animation-delay: 300ms; }
  html:not(.bez-petlji) .mega .mg-c-desno { animation: mg-gore .55s cubic-bezier(.2, .8, .2, 1) 160ms backwards; }
  html:not(.bez-petlji) .mg-a-setac::after { content: ""; position: absolute; inset: -5px; border: 2px solid #ef5428; border-radius: 50%; animation: mg-krug 1.8s ease-out infinite; }
  html:not(.bez-petlji) .mg-status--da i { animation: mg-puls 2s ease-out infinite; }
}
@keyframes mg-otvori { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 -60px 0); } }
@keyframes mg-gore { from { opacity: 0; translate: 0 14px; } }
@keyframes mg-crtaj { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mg-krug { from { opacity: .7; scale: .6; } to { opacity: 0; scale: 2.2; } }
@keyframes mg-puls { 0% { box-shadow: 0 0 0 0 rgb(47 158 91 / .55); } 100% { box-shadow: 0 0 0 9px rgb(47 158 91 / 0); } }
/* šetač se uz smanjeno gibanje i „Zaustavi animacije” pomiče bez prijelaza */
@media (prefers-reduced-motion: reduce) { .mg-a-setac { transition: none; } }
html.bez-petlji .mg-a-setac { transition: none; }
/* bez JS-a nema tko pomiče šetača */
html:not(.js) .mega .mg-a-setac { display: none; }