.mk-section { --plava: #2E4A52; --bijela: #F7F5F0; --ugljen: #1E1E1C; position: relative; color: #fff; overflow: hidden; background: #1E3036; font-family: 'Schibsted Grotesk', system-ui, sans-serif; }
.mk-section .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
/* Prijelaz umjesto ravne plohe: fotografija se nazire u donjem kutu, tekst gore ostaje čitljiv. */
.mk-section .ov { position: absolute; inset: 0; background: linear-gradient(152deg, rgba(36,58,65,.95) 0%, rgba(30,48,54,.9) 55%, rgba(22,36,41,.88) 100%); }
/*
 * Raspored ostaje u dva stupca, ali crtež dobiva što veći dio plohe (2 naprama 5), jer se kružnice
 * i natpisi u njemu drže istog mjerila: što je ploha šira, to su kružnice veće uz isto pismo.
 */
.mk-wrap { position: relative; max-width: 1600px; margin: 0 auto; padding: clamp(48px, 7vw, 112px) clamp(16px, 3vw, 48px); display: grid; grid-template-columns: minmax(320px, 2fr) minmax(360px, 5fr); gap: clamp(24px, 2.5vw, 40px); align-items: center; }
.mk-text .kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); margin: 0 0 18px; }
.mk-text .roof { display: block; width: 72px; height: auto; margin-bottom: 20px; }
.mk-text h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.012em; margin: 0 0 22px; color: #fff; }
.mk-text .sub { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: rgba(255,255,255,.9); margin: 0 0 28px; padding: 0; list-style: none; }
.mk-text .sub li { padding-left: 18px; position: relative; }
.mk-text .sub li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: #8FA65B; }
.mk-text .leg { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 18px; }
.mk-text .leg .sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 8px; }
.mk-text .leg .legi { display: block; padding-left: 20px; text-indent: -20px; margin-bottom: 6px; }
.mk-text .src { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.6); }
.mk-graphic { position: relative; width: 100%; }
.radial { width: 100%; height: auto; display: block; overflow: visible; font-family: 'Schibsted Grotesk', system-ui, sans-serif; }
.radial .ring { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.2; stroke-dasharray: 4 7; }
.radial .a3 { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2.5; stroke-linecap: round; }
.radial .rl { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; fill: rgba(255,255,255,.65); }
.radial .disc > circle { fill: rgba(247,245,240,.12); stroke: rgba(255,255,255,.85); stroke-width: 2; }
/* Vijenac oko diska sezao je do 169 i dodirivao kružnicu Autoceste A3; sada staje na 160. */
.radial .disc .halo { fill: none; stroke: rgba(247,245,240,.07); stroke-width: 10; }
.radial .disc .k { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; fill: rgba(255,255,255,.8); }
.radial .disc .wm { font-family: 'Fraunces', Georgia, serif; font-size: 23px; fill: #fff; }
.radial .disc .wt { font-size: 16px; fill: #fff; }
.radial .disc path, .radial .disc rect, .radial .disc circle.i, .radial .pt path, .radial .pt rect, .radial .pt circle.i { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.radial .pt .c { fill: rgba(30,48,54,.78); stroke: rgba(255,255,255,.95); stroke-width: 1.5; }
.radial .pt .m { font-family: 'Fraunces', Georgia, serif; font-size: 28px; fill: #fff; }
.radial .pt .mi { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: rgba(255,255,255,.8); }
.radial .pt .n { font-size: 19px; font-weight: 600; fill: #fff; }
.radial .pt .d { font-size: 15px; fill: rgba(255,255,255,.75); }
.mk-list { display: none; list-style: none; margin: 0; padding: 0; }
.mk-list li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 16px; }
.mk-list li b { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 26px; min-width: 44px; text-align: right; }
.mk-list li span { flex: 1; }
.mk-list li small { color: rgba(255,255,255,.65); }
.mk-list .h { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); border: 0; padding-top: 24px; }
@media (max-width: 980px) { .mk-wrap { grid-template-columns: 1fr; } .mk-graphic .radial { display: none; } .mk-list { display: block; } }
/* Bez grafike nema ni krugova ni sredine koje legenda opisuje, pa se na uskom ekranu ne prikazuje. */
@media (max-width: 980px) { .mk-text .leg { display: none; } .mk-graphic:empty, .mk-graphic:not(:has(.mk-list)) { display: none; } }

/* animacija pri ulasku u vidno polje: klasa .in na sekciji (IntersectionObserver) */
.radial .ring, .radial .a3, .radial .rl, .radial .disc, .radial .pt { opacity: 0; }
.mk-section.in .radial .disc { animation: mk-pop .8s .3s both ease-out; transform-origin: 500px 500px; transform-box: view-box; }
.mk-section.in .radial .ring { animation: mk-pop .8s both ease-out; animation-delay: calc(.6s + var(--i) * .2s); transform-origin: 500px 500px; transform-box: view-box; }
.mk-section.in .radial .a3 { animation: mk-pop .8s 1.2s both ease-out; transform-origin: 500px 500px; transform-box: view-box; }
.mk-section.in .radial .rl { animation: mk-up .5s 1.4s both; }
.mk-section.in .radial .pt { animation: mk-pop-pt .5s both ease-out; animation-delay: calc(1.5s + var(--i) * .18s); }
@keyframes mk-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes mk-pop-pt { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .radial .ring, .radial .a3, .radial .rl, .radial .disc, .radial .pt { opacity: 1; animation: none !important; } }