{"id":7,"date":"2026-03-16T17:32:08","date_gmt":"2026-03-16T17:32:08","guid":{"rendered":"https:\/\/koordino.com.hr\/?page_id=7"},"modified":"2026-10-06T10:31:07","modified_gmt":"2026-10-06T10:31:07","slug":"home-page","status":"publish","type":"page","link":"https:\/\/koordino.com.hr\/","title":{"rendered":"Home Page"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* Sve je ograni\u010deno na .kd da ne dira header, meni i footer WordPress teme *\/\n  .kd,.kd *,.kd *::before,.kd *::after{box-sizing:border-box;margin:0;padding:0;}\n\n  .kd{\n    --bg:#eef3ff;\n    --text:#0d1e5c;\n    --soft:#4a5d8a;\n    --card:rgba(255,255,255,0.86);\n    --border:rgba(37,99,235,0.16);\n    --shadow:0 8px 32px rgba(37,99,235,0.10);\n    --shadow-h:0 22px 56px rgba(37,99,235,0.18);\n\n    --tl-track:rgba(37,99,235,0.20);\n    --tl-fill:#2563eb;\n    --tl-dot:#eef3ff;\n\n    --blue:#2563eb;\n    --blue-d:#1d4ed8;\n    --blue-l:#3b82f6;\n    --accent:#f59e0b;\n\n    font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;\n    background:var(--bg);\n    color:var(--text);\n    position:relative;\n    min-height:100vh;\n    overflow-x:hidden;\n    overflow-x:clip;\n    line-height:1.5;\n    -webkit-font-smoothing:antialiased;\n  }\n  html{scroll-behavior:smooth;}\n  .kd h1,.kd h2,.kd h3,.kd h4{font-family:'Plus Jakarta Sans',sans-serif;line-height:1.15;}\n  .kd a{color:inherit;text-decoration:none;}\n  .kd a:focus-visible,.kd button:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:3px;}\n  .kd svg{display:inline-block;vertical-align:middle;}\n\n  .kd .container{\n    max-width:1200px;\n    margin:0 auto;\n    padding:0 24px;\n    position:relative;\n    z-index:1;\n    width:100%;\n  }\n\n  .kd .card{\n    background:var(--card);\n    backdrop-filter:blur(16px);\n    -webkit-backdrop-filter:blur(16px);\n    border:1px solid var(--border);\n    box-shadow:var(--shadow);\n    transition:background .35s,border-color .35s,box-shadow .3s,transform .28s;\n  }\n  .kd .card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px);}\n\n  \/* \u2500\u2500 TOP BAR (Google Drive) \u2500\u2500 *\/\n  .kd .topbar{position:relative;z-index:20;padding:18px 0 0;}\n  .kd .drive-link{\n    display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto;\n    padding:12px 12px 12px 14px;border-radius:20px;\n    background:rgba(255,255,255,.9);border:1px solid var(--border);\n    box-shadow:0 10px 30px rgba(37,99,235,.12);\n    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);\n    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;\n  }\n  .kd .drive-link:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(37,99,235,.20);border-color:rgba(37,99,235,.35);}\n  .kd .drive-link .d-ic{\n    width:46px;height:46px;border-radius:14px;flex-shrink:0;\n    background:linear-gradient(135deg,#fde68a,#f59e0b);\n    display:flex;align-items:center;justify-content:center;color:#7c4a03;\n    box-shadow:0 6px 16px rgba(245,158,11,.30);\n  }\n  .kd .drive-link .d-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}\n  .kd .drive-link .d-t1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:16px;color:var(--text);}\n  .kd .drive-link .d-t2{font-size:13.5px;color:var(--soft);}\n  .kd .drive-link .d-go{\n    flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:14px;\n    background:linear-gradient(135deg,var(--blue-d),var(--blue-l));color:#fff;font-weight:700;font-size:14.5px;\n    font-family:'Plus Jakarta Sans',sans-serif;box-shadow:0 6px 18px rgba(37,99,235,.30);\n    transition:gap .2s ease;\n  }\n  .kd .drive-link:hover .d-go{gap:12px;}\n\n  \/* \u2500\u2500 BACKGROUND LAYERS \u2500\u2500 *\/\n  .kd .bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}\n  .kd .bg-svg{width:100%;height:100%;display:block;}\n\n  .kd .bg-glow-1,.kd .bg-glow-2{\n    position:absolute;border-radius:50%;filter:blur(90px);\n    animation:kdPulseSlow 10s ease-in-out infinite;\n  }\n  .kd .bg-glow-1{\n    top:7%;left:9%;width:65vw;max-width:820px;height:55vw;max-height:560px;\n    background:radial-gradient(circle,rgba(37,99,235,.11),transparent 70%);\n  }\n  .kd .bg-glow-2{\n    top:12%;right:7%;width:60vw;max-width:750px;height:50vw;max-height:500px;\n    background:radial-gradient(circle,rgba(245,158,11,.07),transparent 70%);\n    filter:blur(100px);animation-delay:2s;\n  }\n  @keyframes kdPulseSlow{\n    0%,100%{opacity:.3;transform:scale(1);}\n    50%{opacity:.55;transform:scale(1.06);}\n  }\n\n  .kd .sat-outer{animation:kdOrbit 32s linear infinite;transform-origin:600px 450px;}\n  .kd .sat-inner{animation:kdOrbit 20s linear infinite reverse;transform-origin:600px 450px;}\n  @keyframes kdOrbit{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}\n\n  \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\n  @keyframes kdCtaGlow{\n    0%,100%{box-shadow:0 14px 40px rgba(37,99,235,.28);}\n    50%{box-shadow:0 14px 40px rgba(37,99,235,.52),0 0 28px rgba(59,130,246,.26);}\n  }\n  .kd .cta-glow{animation:kdCtaGlow 2.6s ease-in-out infinite;}\n\n  @keyframes kdFloatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}\n  @keyframes kdSpin{to{transform:rotate(360deg);}}\n  @keyframes kdPinPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.5;}50%{transform:translateX(-50%) scale(1.7);opacity:0;}}\n  @keyframes kdBadgeDot{0%,100%{transform:scale(1);}50%{transform:scale(1.22);}}\n  @keyframes kdGpsBlink{0%,100%{opacity:1;}50%{opacity:.3;}}\n  @keyframes kdFaqBounce{\n    0%{transform:translateY(0) rotate(0deg);}\n    30%{transform:translateY(-8px) rotate(-4deg);}\n    60%{transform:translateY(0) rotate(3deg);}\n    100%{transform:translateY(0) rotate(0deg);}\n  }\n  .kd .faq-mascot-bounce{animation:kdFaqBounce .55s ease;}\n\n  \/* \u2500\u2500 COMPASS \u2500\u2500 *\/\n  .kd .compass{position:relative;}\n  .kd .compass .ring-out{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(37,99,235,.22);animation:kdSpin 22s linear infinite;}\n  .kd .compass .ring-in{position:absolute;inset:8px;border-radius:50%;border:2px solid rgba(37,99,235,.30);animation:kdSpin 16s linear infinite reverse;}\n  .kd .compass .tick{position:absolute;width:2.5px;height:8px;background:rgba(29,78,216,.75);left:50%;top:50%;}\n  .kd .compass .needle-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:kdNeedle 4.5s ease-in-out infinite;}\n  @keyframes kdNeedle{0%,100%{transform:rotate(0deg);}25%{transform:rotate(12deg);}75%{transform:rotate(-12deg);}}\n  .kd .compass .needle{position:relative;width:2.5px;}\n  .kd .compass .needle .n{position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,#ef4444,#dc2626);clip-path:polygon(50% 0%,0% 100%,100% 100%);}\n  .kd .compass .needle .s{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,#d1d5db,#9ca3af);clip-path:polygon(50% 100%,0% 0%,100% 0%);}\n  .kd .compass .hub{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}\n  .kd .compass .hub div{width:9px;height:9px;border-radius:50%;background:#1d4ed8;box-shadow:0 0 10px rgba(37,99,235,.5);}\n\n  \/* \u2500\u2500 COORD DISPLAY \u2500\u2500 *\/\n  .kd .coord{\n    display:inline-flex;flex-direction:column;gap:5px;padding:13px 16px;border-radius:14px;\n    background:rgba(6,12,30,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n    border:1px solid rgba(37,99,235,.38);box-shadow:0 8px 32px rgba(0,0,0,.32);\n    color:white;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;\n  }\n  .kd .coord .row{display:flex;gap:8px;align-items:center;}\n  .kd .coord .lbl{color:#93c5fd;}\n  .kd .coord .val{font-weight:600;font-variant-numeric:tabular-nums;}\n  .kd .coord .foot{display:flex;gap:6px;align-items:center;border-top:1px solid rgba(37,99,235,.3);padding-top:7px;margin-top:3px;}\n  .kd .coord .gps-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:kdGpsBlink 1.4s infinite;}\n  .kd .coord .gps-txt{font-size:10px;color:#bfdbfe;}\n\n  \/* \u2500\u2500 HERO \u2500\u2500 *\/\n  .kd .hero{position:relative;overflow:hidden;min-height:82vh;display:flex;align-items:center;padding:72px 0 80px;}\n  .kd .hero-blob1{position:absolute;top:-100px;right:-100px;width:360px;height:360px;background:rgba(37,99,235,.08);border-radius:50%;filter:blur(70px);animation:kdPulseSlow 9s ease-in-out infinite;}\n  .kd .hero-blob2{position:absolute;bottom:-80px;left:-60px;width:300px;height:300px;background:rgba(245,158,11,.07);border-radius:50%;filter:blur(70px);animation:kdPulseSlow 11s ease-in-out infinite 1.5s;}\n  .kd .hero-inner{max-width:880px;margin:0 auto;text-align:center;position:relative;z-index:10;}\n\n  .kd .badge{\n    display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;margin-bottom:28px;\n    background:rgba(255,226,130,.24);border:1px solid rgba(230,175,0,.32);\n  }\n  .kd .badge .dot{width:10px;height:10px;border-radius:50%;background:#f59e0b;display:inline-block;animation:kdBadgeDot 1.5s infinite;}\n  .kd .badge .txt{font-size:15px;font-weight:500;color:var(--text);}\n\n  .kd .hero h1{\n    font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800;line-height:1.08;\n    letter-spacing:-.02em;margin-bottom:22px;\n    background:linear-gradient(135deg,#0d1e5c 0%,#1d4ed8 60%,#2563eb 100%);\n    -webkit-background-clip:text;background-clip:text;color:transparent;\n    padding-bottom:4px;\n  }\n  .kd .hero .lead{\n    font-size:clamp(1.05rem,2vw,1.25rem);max-width:620px;margin:0 auto 34px;\n    color:var(--soft);line-height:1.7;\n  }\n\n  .kd .cta{\n    display:inline-flex;align-items:center;gap:12px;padding:15px 34px 15px 15px;border-radius:22px;\n    background:linear-gradient(135deg,#1d4ed8,#2563eb,#3b82f6);color:#fff;font-weight:700;font-size:18px;\n    font-family:'Plus Jakarta Sans',sans-serif;transition:transform .2s ease;\n  }\n  .kd .cta:hover{transform:scale(1.04) translateY(-3px);color:#fff;}\n  .kd .cta .play-box{\n    width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.16);\n    display:flex;align-items:center;justify-content:center;\n  }\n\n  .kd .hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:840px;margin:46px auto 0;}\n  .kd .hero-card{border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:12px;text-align:left;}\n  .kd .hero-card:hover{transform:translateY(-3px);}\n  .kd .hero-card .ic{\n    width:44px;height:44px;border-radius:12px;background:rgba(37,99,235,.10);color:var(--blue);\n    display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s,color .25s;\n  }\n  .kd .hero-card:hover .ic{background:var(--blue);color:#fff;}\n  .kd .hero-card .ct{font-weight:700;font-size:15px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;}\n\n  .kd .hero-decor{position:absolute;z-index:5;}\n  .kd .hero-pin{position:absolute;pointer-events:none;animation:kdFloatY 2.2s ease-in-out infinite;color:#ef4444;filter:drop-shadow(0 2px 8px rgba(239,68,68,.5));}\n  .kd .hero-pin .pulse{position:absolute;bottom:-2px;left:50%;width:11px;height:11px;border-radius:50%;background:rgba(239,68,68,.18);animation:kdPinPulse 2.2s ease-in-out infinite;}\n\n  .kd .sun{position:absolute;top:60px;right:72px;pointer-events:none;animation:kdFloatY 6s ease-in-out infinite;}\n  .kd .sun .rays{transform-origin:59px 59px;animation:kdSpin 28s linear infinite;}\n\n  \/* \u2500\u2500 SECTION TITLES \u2500\u2500 *\/\n  .kd .sec{padding:80px 0 100px;position:relative;}\n  .kd .sec h2{\n    font-size:clamp(1.9rem,3.8vw,3.1rem);font-weight:800;text-align:center;color:var(--text);\n    margin-bottom:20px;letter-spacing:-.018em;\n  }\n  .kd .sec-line{\n    width:72px;height:4px;border-radius:4px;margin:0 auto 64px;\n    background:linear-gradient(90deg,var(--blue),var(--accent));\n  }\n\n  \/* \u2500\u2500 FEATURES TIMELINE \u2500\u2500 *\/\n  .kd .feat-list{position:relative;display:flex;flex-direction:column;gap:56px;max-width:1100px;margin:0 auto;}\n  .kd .tl-line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);pointer-events:none;z-index:1;}\n  .kd .tl-dashes{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--tl-track) 0,var(--tl-track) 8px,transparent 8px,transparent 18px);}\n  .kd .tl-fill{position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(to bottom,var(--tl-fill),rgba(59,130,246,.45));border-radius:2px;}\n\n  .kd .feat-row{display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;position:relative;z-index:2;}\n  .kd .feat-node{grid-column:2;grid-row:1;position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;}\n  .kd .feat-node::before{\n    content:\"\";position:absolute;top:50%;height:2px;width:50%;\n    background:repeating-linear-gradient(to right,var(--tl-track) 0,var(--tl-track) 6px,transparent 6px,transparent 12px);\n  }\n  .kd .feat-row.left .feat-node::before{left:0;}\n  .kd .feat-row.right .feat-node::before{right:0;}\n  .kd .tl-dot{\n    position:relative;z-index:2;width:18px;height:18px;border-radius:50%;\n    border:3px solid var(--tl-fill);background:var(--tl-dot);\n    transition:background .3s,transform .3s,box-shadow .3s;\n  }\n  .kd .tl-dot.on{background:var(--tl-fill);transform:scale(1.3);box-shadow:0 0 0 7px rgba(37,99,235,.15);}\n\n  .kd .feat-row.left .feat-card{grid-column:1;grid-row:1;}\n  .kd .feat-row.right .feat-card{grid-column:3;grid-row:1;}\n\n  .kd .feat-card{border-radius:26px;padding:38px 36px 36px;position:relative;overflow:hidden;}\n  .kd .feat-card::before{\n    content:\"\";position:absolute;left:0;top:0;right:0;height:4px;\n    background:linear-gradient(90deg,var(--blue),var(--blue-l),var(--accent));\n    opacity:0;transition:opacity .3s ease;\n  }\n  .kd .feat-card:hover::before{opacity:1;}\n  .kd .feat-card .num{\n    position:absolute;top:18px;right:26px;font-family:'Plus Jakarta Sans',sans-serif;\n    font-size:64px;font-weight:800;line-height:1;color:rgba(37,99,235,.08);pointer-events:none;\n    transition:color .3s ease;\n  }\n  .kd .feat-card:hover .num{color:rgba(37,99,235,.14);}\n  .kd .feat-card .ic{\n    width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,#1d4ed8,#3b82f6);\n    display:flex;align-items:center;justify-content:center;margin-bottom:20px;\n    box-shadow:0 10px 24px rgba(37,99,235,.28);color:#fff;transition:transform .4s ease;\n  }\n  .kd .feat-card:hover .ic{transform:scale(1.08) rotate(-6deg);}\n  .kd .feat-card h3{font-size:24px;font-weight:800;color:var(--text);margin-bottom:12px;position:relative;z-index:1;letter-spacing:-.01em;}\n  .kd .feat-card p{color:var(--soft);line-height:1.8;font-size:17px;position:relative;z-index:1;}\n\n  \/* \u2500\u2500 FAQ \u2500\u2500 *\/\n  .kd .faq-mascot-card{\n    display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.75);border:1px solid var(--border);\n    padding:12px 20px 12px 14px;border-radius:20px;box-shadow:var(--shadow);\n  }\n  .kd .faq-mascot-card img{width:56px;height:56px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 6px 14px rgba(37,99,235,.15));}\n  .kd .faq-mascot-card .t1{font-weight:800;font-size:15.5px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;}\n  .kd .faq-mascot-card .t2{font-size:14px;color:var(--soft);}\n\n  .kd .faq-wrap{max-width:840px;margin:0 auto;}\n  .kd .faq-list{display:flex;flex-direction:column;gap:12px;}\n  .kd .faq-item{\n    border-radius:18px;background:var(--card);border:1px solid var(--border);box-shadow:0 4px 18px rgba(37,99,235,.07);\n    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;\n    transition:border-color .25s ease,box-shadow .25s ease;\n  }\n  .kd .faq-item:hover{border-color:rgba(37,99,235,.30);}\n  .kd .faq-item.open{border-color:rgba(37,99,235,.40);box-shadow:0 12px 34px rgba(37,99,235,.14);}\n  .kd .faq-q,\n  .kd .faq-q:hover,\n  .kd .faq-q:focus,\n  .kd .faq-q:active{\n    width:100%;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;\n    background:transparent;border:none;border-radius:0;box-shadow:none;cursor:pointer;text-align:left;gap:14px;\n    color:var(--text);text-transform:none;letter-spacing:normal;font:inherit;line-height:1.4;\n  }\n  .kd .faq-q .qtxt{font-weight:700;color:var(--text);font-size:17px;font-family:'Plus Jakarta Sans',sans-serif;flex:1;min-width:0;}\n  .kd .faq-q .plus{\n    flex-shrink:0;width:34px;height:34px;border-radius:10px;background:rgba(37,99,235,.08);\n    border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--blue);\n    transition:transform .3s ease,background .25s ease,color .25s ease;\n  }\n  .kd .faq-q.active .plus{transform:rotate(45deg);background:var(--blue);color:#fff;border-color:var(--blue);}\n  .kd .faq-a{height:0;overflow:hidden;transition:height .32s ease;}\n  .kd .faq-a-inner{padding:0 24px 22px;color:var(--soft);line-height:1.72;font-size:16px;}\n\n  \/* \u2500\u2500 CONTACT \u2500\u2500 *\/\n  .kd .contact-card{\n    border-radius:28px;padding:46px 40px;position:relative;overflow:hidden;text-align:center;max-width:600px;margin:0 auto;\n  }\n  .kd .contact-card .blob1{position:absolute;top:-48px;right:-48px;width:150px;height:150px;background:rgba(37,99,235,.08);border-radius:50%;filter:blur(42px);}\n  .kd .contact-card .blob2{position:absolute;bottom:-34px;left:-34px;width:125px;height:125px;background:rgba(245,158,11,.08);border-radius:50%;filter:blur(34px);}\n  .kd .contact-card .inner{position:relative;z-index:1;}\n  .kd .contact-card .ic{\n    width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#1d4ed8,#3b82f6);\n    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;\n    box-shadow:0 8px 22px rgba(37,99,235,.28);color:#fff;transition:transform .4s ease;\n  }\n  .kd .contact-card:hover .ic{transform:scale(1.08) rotate(-6deg);}\n  .kd .contact-card h2{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:800;color:var(--text);margin-bottom:10px;}\n  .kd .contact-card p{color:var(--soft);margin-bottom:26px;font-size:16.5px;line-height:1.64;}\n  .kd .contact-btn{\n    display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;\n    background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;font-weight:700;font-size:16px;\n    box-shadow:0 8px 24px rgba(37,99,235,.28);justify-content:center;transition:transform .2s ease;\n    max-width:100%;word-break:break-all;\n  }\n  .kd .contact-btn:hover{transform:scale(1.04) translateY(-3px);color:#fff;}\n  .kd .contact-btn svg{flex-shrink:0;}\n\n  \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n  .kd .kd-footer{padding:30px 0 42px;border-top:1px solid var(--border);position:relative;z-index:1;}\n  .kd .kd-footer .fwrap{display:flex;flex-direction:column;align-items:center;gap:10px;}\n  .kd .kd-footer p{color:var(--soft);font-size:13.5px;text-align:center;}\n  .kd .kd-footer p.sub{font-size:12.5px;opacity:.65;}\n\n  \/* \u2500\u2500 SCROLL TO TOP \u2500\u2500 *\/\n  .kd .stb{\n    position:fixed;bottom:1.5rem;right:1.25rem;z-index:120;width:52px;height:52px;border-radius:16px;\n    background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border:none;cursor:pointer;padding:0;\n    display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,99,235,.40);\n    opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .2s,transform .2s;\n  }\n  .kd .stb.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}\n  .kd .stb:hover{transform:translateY(-4px) scale(1.08);}\n  \/* Strelica nacrtana CSS-om (bez SVG-a) da je tema ne mo\u017ee sakriti *\/\n  .kd .stb .stb-arrow{\n    position:relative !important;display:block !important;width:20px !important;height:22px !important;\n    background:none !important;border:none !important;margin:0 !important;padding:0 !important;\n  }\n  .kd .stb .stb-arrow::before{\n    content:\"\" !important;position:absolute !important;left:50% !important;top:4px !important;bottom:1px !important;\n    width:3px !important;margin-left:-1.5px !important;background:#ffffff !important;border-radius:3px !important;display:block !important;\n  }\n  .kd .stb .stb-arrow::after{\n    content:\"\" !important;position:absolute !important;left:50% !important;top:3px !important;\n    width:12px !important;height:12px !important;margin-left:-6px !important;\n    border-left:3px solid #ffffff !important;border-top:3px solid #ffffff !important;\n    border-right:0 !important;border-bottom:0 !important;border-radius:2px 0 0 0 !important;\n    transform:rotate(45deg) !important;background:none !important;display:block !important;box-sizing:border-box !important;\n  }\n\n  \/* \u2500\u2500 FADE IN \u2500\u2500 *\/\n  \/* Sadr\u017eaj je uvijek vidljiv; animacija se uklju\u010di tek kad JS proradi (klasa kd-js) *\/\n  .kd.kd-js .fade-in{opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .3s;}\n  .kd.kd-js .fade-in.is-visible{opacity:1;transform:translateY(0);}\n  .kd.kd-js .fade-in.from-left{transform:translateX(-60px);}\n  .kd.kd-js .fade-in.from-right{transform:translateX(60px);}\n  .kd.kd-js .fade-in.from-left.is-visible,.kd.kd-js .fade-in.from-right.is-visible{transform:translateX(0);}\n  .kd.kd-js .feat-card.fade-in.is-visible:hover{transform:translateY(-4px);}\n\n  .kd .hero-mob-compass{display:none;}\n  .kd .hero-coord{display:flex;justify-content:center;margin-top:30px;}\n\n  \/* \u2500\u2500 TABLET \u2500\u2500 *\/\n  @media (max-width:1024px){\n    .kd .feat-row{grid-template-columns:1fr 70px 1fr;}\n    .kd .feat-card{padding:32px 26px 30px;}\n    .kd .feat-card p{font-size:16px;}\n    .kd .sun{right:30px;}\n  }\n\n  \/* \u2500\u2500 MOBITEL \u2500\u2500 *\/\n  @media (max-width:768px){\n    .kd .container{padding:0 18px;}\n    .kd .topbar{padding-top:14px;}\n    .kd .drive-link{gap:12px;padding:10px;border-radius:18px;}\n    .kd .drive-link .d-ic{width:40px;height:40px;border-radius:12px;}\n    .kd .drive-link .d-t1{font-size:14.5px;}\n    .kd .drive-link .d-t2{font-size:12.5px;}\n    .kd .drive-link .d-go{padding:10px 12px;font-size:13.5px;}\n    .kd .drive-link .d-go .go-txt{display:none;}\n\n    .kd .hero{min-height:auto;padding:44px 0 56px;}\n    .kd .hero-decor,.kd .sun,.kd .hero-pin{display:none;}\n    .kd .hero-mob-compass{display:flex;justify-content:center;margin-bottom:20px;opacity:.6;}\n    .kd .hero-coord{margin-top:26px;}\n    .kd .badge{margin-bottom:22px;padding:7px 15px;}\n    .kd .badge .txt{font-size:14px;}\n    .kd .hero h1{font-size:clamp(2rem,8.4vw,2.6rem);margin-bottom:16px;}\n    .kd .hero .lead{font-size:1.02rem;margin-bottom:26px;}\n    .kd .cta{padding:12px 26px 12px 12px;font-size:16.5px;}\n    .kd .cta .play-box{width:36px;height:36px;}\n    .kd .hero-cards{grid-template-columns:1fr;gap:10px;margin-top:30px;}\n    .kd .hero-card{padding:13px 16px;}\n    .kd .hero-card .ic{width:40px;height:40px;}\n    .kd .hero-card .ct{font-size:15px;}\n\n    .kd .sec{padding:56px 0 68px;}\n    .kd .sec h2{font-size:clamp(1.65rem,6.4vw,2.1rem);margin-bottom:16px;}\n    .kd .sec-line{margin-bottom:40px;}\n\n    .kd .feat-list{gap:22px;}\n    .kd .tl-line{left:15px;transform:none;}\n    .kd .feat-row,.kd .feat-row.left,.kd .feat-row.right{grid-template-columns:32px 1fr;column-gap:12px;}\n    .kd .feat-node{grid-column:1;}\n    .kd .feat-node::before{display:none;}\n    .kd .tl-dot{width:15px;height:15px;border-width:2.5px;}\n    .kd .feat-row.left .feat-card,.kd .feat-row.right .feat-card{grid-column:2;}\n    .kd.kd-js .fade-in.from-left,.kd.kd-js .fade-in.from-right{transform:translateY(28px);}\n    .kd.kd-js .fade-in.from-left.is-visible,.kd.kd-js .fade-in.from-right.is-visible{transform:translateY(0);}\n    .kd .feat-card{padding:26px 22px 24px;border-radius:22px;}\n    .kd .feat-card .num{font-size:46px;top:14px;right:18px;}\n    .kd .feat-card h3{font-size:20px;}\n    .kd .feat-card p{font-size:15.5px;line-height:1.75;}\n    .kd .feat-card .ic{width:52px;height:52px;border-radius:15px;margin-bottom:16px;}\n\n    .kd .faq-mascot-card img{width:46px;height:46px;}\n    .kd .faq-q,.kd .faq-q:hover,.kd .faq-q:focus,.kd .faq-q:active{padding:17px 18px;}\n    .kd .faq-q .qtxt{font-size:15.5px;}\n    .kd .faq-a-inner{padding:0 18px 18px;font-size:15px;}\n\n    .kd .contact-card{padding:32px 22px;}\n    .kd .contact-card h2{font-size:1.5rem;}\n    .kd .contact-btn{padding:13px 20px;font-size:14.5px;}\n    .kd .stb{width:46px;height:46px;bottom:1rem;right:1rem;}\n  }\n\n  @media (prefers-reduced-motion:reduce){\n    html{scroll-behavior:auto;}\n    .kd .fade-in,.kd.kd-js .fade-in{opacity:1;transform:none !important;transition:none;}\n    .kd *{animation:none !important;}\n  }\n<\/style>\n\n<div class=\"kd\">\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BACKGROUND \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"bg-layer\" aria-hidden=\"true\">\n  <svg class=\"bg-svg\" viewBox=\"0 0 1200 900\" preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <defs>\n      <pattern id=\"sg\" width=\"50\" height=\"50\" patternUnits=\"userSpaceOnUse\">\n        <path d=\"M 50 0 L 0 0 0 50\" fill=\"none\" stroke=\"rgba(37,99,235,0.085)\" stroke-width=\"1.05\"><\/path>\n      <\/pattern>\n      <pattern id=\"lg\" width=\"250\" height=\"250\" patternUnits=\"userSpaceOnUse\">\n        <rect width=\"250\" height=\"250\" fill=\"url(#sg)\"><\/rect>\n        <path d=\"M 250 0 L 0 0 0 250\" fill=\"none\" stroke=\"rgba(37,99,235,0.22)\" stroke-width=\"1.5\"><\/path>\n      <\/pattern>\n    <\/defs>\n\n    <rect width=\"100%\" height=\"100%\" fill=\"url(#lg)\"><\/rect>\n\n    <line x1=\"600\" y1=\"0\" x2=\"600\" y2=\"900\" stroke=\"rgba(37,99,235,0.30)\" stroke-width=\"1.8\" stroke-dasharray=\"7 6\"><\/line>\n    <line x1=\"0\" y1=\"450\" x2=\"1200\" y2=\"450\" stroke=\"rgba(37,99,235,0.30)\" stroke-width=\"1.8\" stroke-dasharray=\"7 6\"><\/line>\n\n    <g stroke=\"rgba(37,99,235,0.22)\" stroke-width=\"1.1\">\n      <line x1=\"350\" y1=\"442\" x2=\"350\" y2=\"458\"><\/line>\n      <line x1=\"450\" y1=\"442\" x2=\"450\" y2=\"458\"><\/line>\n      <line x1=\"550\" y1=\"442\" x2=\"550\" y2=\"458\"><\/line>\n      <line x1=\"650\" y1=\"442\" x2=\"650\" y2=\"458\"><\/line>\n      <line x1=\"750\" y1=\"442\" x2=\"750\" y2=\"458\"><\/line>\n      <line x1=\"850\" y1=\"442\" x2=\"850\" y2=\"458\"><\/line>\n      <line x1=\"593\" y1=\"200\" x2=\"607\" y2=\"200\"><\/line>\n      <line x1=\"593\" y1=\"300\" x2=\"607\" y2=\"300\"><\/line>\n      <line x1=\"593\" y1=\"400\" x2=\"607\" y2=\"400\"><\/line>\n      <line x1=\"593\" y1=\"500\" x2=\"607\" y2=\"500\"><\/line>\n      <line x1=\"593\" y1=\"600\" x2=\"607\" y2=\"600\"><\/line>\n      <line x1=\"593\" y1=\"700\" x2=\"607\" y2=\"700\"><\/line>\n    <\/g>\n\n    <g fill=\"rgba(37,99,235,0.32)\" font-size=\"9.5\" font-family=\"monospace\">\n      <text x=\"344\" y=\"440\">\u2013250<\/text>\n      <text x=\"444\" y=\"440\">\u2013100<\/text>\n      <text x=\"556\" y=\"440\">+100<\/text>\n      <text x=\"656\" y=\"440\">+250<\/text>\n      <text x=\"613\" y=\"204\">+250<\/text>\n      <text x=\"613\" y=\"304\">+150<\/text>\n      <text x=\"613\" y=\"504\">\u201350<\/text>\n      <text x=\"613\" y=\"604\">\u2013150<\/text>\n    <\/g>\n\n    <text x=\"607\" y=\"20\" fill=\"rgba(37,99,235,0.48)\" font-size=\"11\" font-family=\"monospace\" font-weight=\"600\">+N<\/text>\n    <text x=\"607\" y=\"888\" fill=\"rgba(37,99,235,0.48)\" font-size=\"11\" font-family=\"monospace\" font-weight=\"600\">\u2013S<\/text>\n    <text x=\"1178\" y=\"447\" fill=\"rgba(37,99,235,0.48)\" font-size=\"11\" font-family=\"monospace\" font-weight=\"600\">+E<\/text>\n    <text x=\"6\" y=\"447\" fill=\"rgba(37,99,235,0.48)\" font-size=\"11\" font-family=\"monospace\" font-weight=\"600\">\u2013W<\/text>\n\n    <circle cx=\"600\" cy=\"450\" r=\"5.5\" fill=\"rgba(37,99,235,0.45)\"><\/circle>\n    <circle cx=\"600\" cy=\"450\" r=\"15\" fill=\"none\" stroke=\"rgba(37,99,235,0.30)\" stroke-width=\"1.3\" opacity=\".5\"><\/circle>\n    <circle cx=\"600\" cy=\"450\" r=\"30\" fill=\"none\" stroke=\"rgba(37,99,235,0.15)\" stroke-width=\"1\" opacity=\".5\"><\/circle>\n\n    <g stroke=\"rgba(37,99,235,0.26)\" stroke-width=\"1.1\" stroke-dasharray=\"5 7\" fill=\"none\">\n      <line x1=\"155\" y1=\"105\" x2=\"365\" y2=\"158\"><\/line>\n      <line x1=\"365\" y1=\"158\" x2=\"138\" y2=\"325\"><\/line>\n      <line x1=\"138\" y1=\"325\" x2=\"155\" y2=\"105\"><\/line>\n      <line x1=\"155\" y1=\"105\" x2=\"260\" y2=\"215\"><\/line>\n      <line x1=\"365\" y1=\"158\" x2=\"260\" y2=\"215\"><\/line>\n      <line x1=\"138\" y1=\"325\" x2=\"260\" y2=\"215\"><\/line>\n    <\/g>\n\n    <circle cx=\"155\" cy=\"105\" r=\"4\" fill=\"rgba(37,99,235,0.42)\"><\/circle>\n    <circle cx=\"365\" cy=\"158\" r=\"4\" fill=\"rgba(37,99,235,0.42)\"><\/circle>\n    <circle cx=\"138\" cy=\"325\" r=\"4\" fill=\"rgba(37,99,235,0.42)\"><\/circle>\n    <circle cx=\"260\" cy=\"215\" r=\"5.5\" fill=\"rgba(37,99,235,0.50)\"><\/circle>\n\n    <g fill=\"rgba(37,99,235,0.32)\" font-size=\"9\" font-family=\"monospace\">\n      <text x=\"161\" y=\"102\">T01<\/text>\n      <text x=\"371\" y=\"155\">T02<\/text>\n      <text x=\"143\" y=\"338\">T03<\/text>\n      <text x=\"265\" y=\"212\">T04<\/text>\n    <\/g>\n\n    <g stroke=\"rgba(37,99,235,0.26)\" stroke-width=\"1.1\" stroke-dasharray=\"5 7\" fill=\"none\">\n      <line x1=\"845\" y1=\"88\" x2=\"1048\" y2=\"188\"><\/line>\n      <line x1=\"1048\" y1=\"188\" x2=\"882\" y2=\"334\"><\/line>\n      <line x1=\"882\" y1=\"334\" x2=\"845\" y2=\"88\"><\/line>\n      <line x1=\"845\" y1=\"88\" x2=\"962\" y2=\"222\"><\/line>\n      <line x1=\"1048\" y1=\"188\" x2=\"962\" y2=\"222\"><\/line>\n      <line x1=\"882\" y1=\"334\" x2=\"962\" y2=\"222\"><\/line>\n    <\/g>\n\n    <circle cx=\"845\" cy=\"88\" r=\"4\" fill=\"rgba(37,99,235,0.42)\"><\/circle>\n    <circle cx=\"1048\" cy=\"188\" r=\"4\" fill=\"rgba(37,99,235,0.42)\"><\/circle>\n    <circle cx=\"882\" cy=\"334\" r=\"4\" fill=\"rgba(37,99,235,0.42)\"><\/circle>\n    <circle cx=\"962\" cy=\"222\" r=\"5.5\" fill=\"rgba(37,99,235,0.50)\"><\/circle>\n\n    <g fill=\"rgba(37,99,235,0.32)\" font-size=\"9\" font-family=\"monospace\">\n      <text x=\"851\" y=\"85\">T05<\/text>\n      <text x=\"1053\" y=\"185\">T06<\/text>\n      <text x=\"887\" y=\"347\">T07<\/text>\n      <text x=\"968\" y=\"219\">T08<\/text>\n    <\/g>\n\n    <ellipse cx=\"600\" cy=\"450\" rx=\"200\" ry=\"118\" fill=\"none\" stroke=\"rgba(37,99,235,0.18)\" stroke-width=\"1\" stroke-dasharray=\"4 9\"><\/ellipse>\n\n    <g class=\"sat-outer\">\n      <g transform=\"translate(800, 450)\">\n        <rect x=\"-9\" y=\"-3.5\" width=\"18\" height=\"7\" rx=\"2\" fill=\"rgba(37,99,235,0.58)\"><\/rect>\n        <rect x=\"-22\" y=\"-2.5\" width=\"11\" height=\"5\" rx=\"1\" fill=\"rgba(245,158,11,0.72)\"><\/rect>\n        <rect x=\"11\" y=\"-2.5\" width=\"11\" height=\"5\" rx=\"1\" fill=\"rgba(245,158,11,0.72)\"><\/rect>\n        <line x1=\"0\" y1=\"-3.5\" x2=\"0\" y2=\"-10\" stroke=\"rgba(37,99,235,0.65)\" stroke-width=\"1\"><\/line>\n        <circle cx=\"0\" cy=\"-11\" r=\"1.8\" fill=\"rgba(37,99,235,0.55)\"><\/circle>\n      <\/g>\n    <\/g>\n\n    <ellipse cx=\"600\" cy=\"450\" rx=\"120\" ry=\"68\" fill=\"none\" stroke=\"rgba(37,99,235,0.13)\" stroke-width=\"1\" stroke-dasharray=\"3 10\"><\/ellipse>\n\n    <g class=\"sat-inner\">\n      <g transform=\"translate(720, 450)\">\n        <rect x=\"-5.5\" y=\"-2.5\" width=\"11\" height=\"5\" rx=\"1.5\" fill=\"rgba(37,99,235,0.48)\"><\/rect>\n        <rect x=\"-13\" y=\"-2\" width=\"6\" height=\"4\" rx=\"1\" fill=\"rgba(245,158,11,0.65)\"><\/rect>\n        <rect x=\"7\" y=\"-2\" width=\"6\" height=\"4\" rx=\"1\" fill=\"rgba(245,158,11,0.65)\"><\/rect>\n      <\/g>\n    <\/g>\n\n    <g stroke=\"rgba(37,99,235,0.18)\" stroke-width=\"1\" stroke-dasharray=\"4 8\" fill=\"none\">\n      <line x1=\"200\" y1=\"720\" x2=\"480\" y2=\"680\"><\/line>\n      <line x1=\"480\" y1=\"680\" x2=\"380\" y2=\"840\"><\/line>\n      <line x1=\"380\" y1=\"840\" x2=\"200\" y2=\"720\"><\/line>\n    <\/g>\n\n    <circle cx=\"200\" cy=\"720\" r=\"3.5\" fill=\"rgba(37,99,235,0.35)\"><\/circle>\n    <circle cx=\"480\" cy=\"680\" r=\"3.5\" fill=\"rgba(37,99,235,0.35)\"><\/circle>\n    <circle cx=\"380\" cy=\"840\" r=\"3.5\" fill=\"rgba(37,99,235,0.35)\"><\/circle>\n\n    <g stroke=\"rgba(37,99,235,0.18)\" stroke-width=\"1\" stroke-dasharray=\"4 8\" fill=\"none\">\n      <line x1=\"750\" y1=\"700\" x2=\"1000\" y2=\"720\"><\/line>\n      <line x1=\"1000\" y1=\"720\" x2=\"900\" y2=\"860\"><\/line>\n      <line x1=\"900\" y1=\"860\" x2=\"750\" y2=\"700\"><\/line>\n    <\/g>\n\n    <circle cx=\"750\" cy=\"700\" r=\"3.5\" fill=\"rgba(37,99,235,0.35)\"><\/circle>\n    <circle cx=\"1000\" cy=\"720\" r=\"3.5\" fill=\"rgba(37,99,235,0.35)\"><\/circle>\n    <circle cx=\"900\" cy=\"860\" r=\"3.5\" fill=\"rgba(37,99,235,0.35)\"><\/circle>\n  <\/svg>\n\n  <div class=\"bg-glow-1\"><\/div>\n  <div class=\"bg-glow-2\"><\/div>\n<\/div>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TOP BAR \u2013 GOOGLE DRIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"topbar\">\n  <div class=\"container\">\n    <a class=\"drive-link\" href=\"https:\/\/drive.google.com\/drive\/folders\/1C9q52_JVZNRt7QOhbp_DnBBrIE5EZv-s?usp=drive_link\" target=\"_blank\" rel=\"noopener noreferrer\">\n      <span class=\"d-ic\">\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"><\/path><\/svg>\n      <\/span>\n      <span class=\"d-txt\">\n        <span class=\"d-t1\">Materijali za u\u010denje<\/span>\n        <span class=\"d-t2\">Google Drive mapa s materijalima<\/span>\n      <\/span>\n      <span class=\"d-go\">\n        <span class=\"go-txt\">Otvori mapu<\/span>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n      <\/span>\n    <\/a>\n  <\/div>\n<\/div>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"hero\">\n  <div class=\"hero-blob1\"><\/div>\n  <div class=\"hero-blob2\"><\/div>\n\n  <!-- Sun (desktop) -->\n  <div class=\"sun\">\n    <svg width=\"118\" height=\"118\" viewBox=\"0 0 118 118\">\n      <g class=\"rays\">\n        <line x1=\"86\" y1=\"59\" x2=\"103\" y2=\"59\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"82.4\" y1=\"72.5\" x2=\"97.1\" y2=\"81\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"72.5\" y1=\"82.4\" x2=\"81\" y2=\"97.1\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"59\" y1=\"86\" x2=\"59\" y2=\"103\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"45.5\" y1=\"82.4\" x2=\"37\" y2=\"97.1\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"35.6\" y1=\"72.5\" x2=\"20.9\" y2=\"81\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"32\" y1=\"59\" x2=\"15\" y2=\"59\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"35.6\" y1=\"45.5\" x2=\"20.9\" y2=\"37\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"45.5\" y1=\"35.6\" x2=\"37\" y2=\"20.9\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"59\" y1=\"32\" x2=\"59\" y2=\"15\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"72.5\" y1=\"35.6\" x2=\"81\" y2=\"20.9\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n        <line x1=\"82.4\" y1=\"45.5\" x2=\"97.1\" y2=\"37\" stroke=\"rgba(250,204,21,.72)\" stroke-width=\"3\" stroke-linecap=\"round\"><\/line>\n      <\/g>\n      <circle cx=\"59\" cy=\"59\" r=\"21\" fill=\"rgba(250,204,21,.92)\">\n        <animate attributeName=\"r\" values=\"19;23;19\" dur=\"4s\" repeatCount=\"indefinite\"><\/animate>\n      <\/circle>\n      <circle cx=\"59\" cy=\"59\" r=\"33\" fill=\"rgba(250,204,21,.10)\"><\/circle>\n    <\/svg>\n  <\/div>\n\n  <!-- Compass (desktop) -->\n  <div class=\"hero-decor\" style=\"top:36px;left:36px;opacity:.55;animation:kdFloatY 5s ease-in-out infinite;\">\n    <div class=\"compass\" style=\"width:78px;height:78px;\">\n      <div class=\"ring-out\"><\/div>\n      <div class=\"ring-in\">\n        <div class=\"tick\" style=\"transform:translate(-50%,-50%) rotate(0deg) translateY(-27px);\"><\/div>\n        <div class=\"tick\" style=\"transform:translate(-50%,-50%) rotate(90deg) translateY(-27px);\"><\/div>\n        <div class=\"tick\" style=\"transform:translate(-50%,-50%) rotate(180deg) translateY(-27px);\"><\/div>\n        <div class=\"tick\" style=\"transform:translate(-50%,-50%) rotate(270deg) translateY(-27px);\"><\/div>\n      <\/div>\n      <div class=\"needle-wrap\"><div class=\"needle\" style=\"height:50px;\"><div class=\"n\"><\/div><div class=\"s\"><\/div><\/div><\/div>\n      <div class=\"hub\"><div><\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Pins (desktop) -->\n  <div class=\"hero-pin\" style=\"left:13%;top:66%;\">\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"><\/path><\/svg>\n    <div class=\"pulse\"><\/div>\n  <\/div>\n  <div class=\"hero-pin\" style=\"left:83%;top:74%;animation-delay:.5s;\">\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"><\/path><\/svg>\n    <div class=\"pulse\"><\/div>\n  <\/div>\n\n  <div class=\"container\">\n    <div class=\"hero-inner fade-in\">\n\n      <!-- Mobile compass -->\n      <div class=\"hero-mob-compass\">\n        <div class=\"compass\" style=\"width:52px;height:52px;\">\n          <div class=\"ring-out\"><\/div>\n          <div class=\"ring-in\">\n            <div class=\"tick\" style=\"transform:translate(-50%,-50%) rotate(0deg) translateY(-18px);\"><\/div>\n            <div class=\"tick\" style=\"transform:translate(-50%,-50%) rotate(90deg) translateY(-18px);\"><\/div>\n            <div class=\"tick\" style=\"transform:translate(-50%,-50%) rotate(180deg) translateY(-18px);\"><\/div>\n            <div class=\"tick\" style=\"transform:translate(-50%,-50%) rotate(270deg) translateY(-18px);\"><\/div>\n          <\/div>\n          <div class=\"needle-wrap\"><div class=\"needle\" style=\"height:33px;\"><div class=\"n\"><\/div><div class=\"s\"><\/div><\/div><\/div>\n          <div class=\"hub\"><div><\/div><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"badge\"><span class=\"dot\"><\/span><span class=\"txt\">Video lekcije \u2022 Online<\/span><\/div>\n\n      <h1>Koordino u\u010di mirno i to\u010dno.<\/h1>\n      <p class=\"lead\">Video lekcije i pripreme za Geodetski fakultet. U\u010di svojim tempom &#8211; kad god \u017eeli\u0161.<\/p>\n\n      <div>\n        <a href=\"https:\/\/koordino.com.hr\/index.php\/pripreme\/\" class=\"cta cta-glow\">\n          <span class=\"play-box\">\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n          <\/span>\n          Pogledaj pripreme\n        <\/a>\n      <\/div>\n\n      <div class=\"hero-cards\">\n        <div class=\"hero-card card\">\n          <div class=\"ic\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg><\/div>\n          <span class=\"ct\">Video lekcije<\/span>\n        <\/div>\n        <div class=\"hero-card card\">\n          <div class=\"ic\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg><\/div>\n          <span class=\"ct\">Zadatci i rje\u0161enja<\/span>\n        <\/div>\n        <div class=\"hero-card card\">\n          <div class=\"ic\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line><\/svg><\/div>\n          <span class=\"ct\">Organizirano po temama<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- Koordinate (centrirano) -->\n      <div class=\"hero-coord\">\n        <div class=\"coord\">\n          <div class=\"row\"><span class=\"lbl\">LAT:<\/span><span class=\"val\" id=\"latVal\">45.817557\u00b0<\/span><\/div>\n          <div class=\"row\"><span class=\"lbl\">LNG:<\/span><span class=\"val\" id=\"lngVal\">15.977773\u00b0<\/span><\/div>\n          <div class=\"foot\"><div class=\"gps-dot\"><\/div><span class=\"gps-txt\">GPS AKTIVAN<\/span><\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FEATURES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"sec\" id=\"features\">\n  <div class=\"container\">\n    <h2 class=\"fade-in\">Za\u0161to Koordino?<\/h2>\n    <div class=\"sec-line fade-in\"><\/div>\n\n    <div class=\"feat-list\" id=\"featList\">\n      <div class=\"tl-line\" aria-hidden=\"true\">\n        <div class=\"tl-dashes\"><\/div>\n        <div class=\"tl-fill\" id=\"tlFill\"><\/div>\n      <\/div>\n\n      <div class=\"feat-row left\">\n        <div class=\"feat-node\" aria-hidden=\"true\"><span class=\"tl-dot\"><\/span><\/div>\n        <div class=\"feat-card card fade-in from-left\">\n          <span class=\"num\" aria-hidden=\"true\">01<\/span>\n          <div class=\"ic\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"23 7 16 12 23 17 23 7\"><\/polygon><rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\"><\/rect><\/svg><\/div>\n          <h3>Video lekcije<\/h3>\n          <p>Detaljno i jasno obra\u0111ene geodetske teme kroz pregledne video lekcije. Svaka cjelina vodi te korak po korak kroz va\u017ene pojmove, postupke i tipi\u010dne zadatke kako bi gradivo bilo lak\u0161e za pratiti, razumjeti i kasnije samostalno ponavljati.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"feat-row right\">\n        <div class=\"feat-node\" aria-hidden=\"true\"><span class=\"tl-dot\"><\/span><\/div>\n        <div class=\"feat-card card fade-in from-right\">\n          <span class=\"num\" aria-hidden=\"true\">02<\/span>\n          <div class=\"ic\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"6\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"2\"><\/circle><\/svg><\/div>\n          <h3>Fokusirana priprema<\/h3>\n          <p>AOGM, Geodetski instrumenti, GRO i Dr\u017eavna izmjera organizirani su pregledno i smisleno kako bi se mogao usmjeriti na ono \u0161to je stvarno va\u017eno. Manje tra\u017eenja materijala, a vi\u0161e konkretne pripreme kroz sadr\u017eaj koji prati ono \u0161to ti treba za sigurno u\u010denje i ponavljanje.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"feat-row left\">\n        <div class=\"feat-node\" aria-hidden=\"true\"><span class=\"tl-dot\"><\/span><\/div>\n        <div class=\"feat-card card fade-in from-left\">\n          <span class=\"num\" aria-hidden=\"true\">03<\/span>\n          <div class=\"ic\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg><\/div>\n          <h3>Fleksibilno u\u010denje<\/h3>\n          <p>U\u010di kad tebi odgovara i vra\u0107aj se na lekcije koliko god puta \u017eeli\u0161. Materijali su dostupni u vlastitom ritmu, \u0161to ti omogu\u0107uje da sporije pro\u0111e\u0161 te\u017ee dijelove, a br\u017ee ponovi\u0161 ono \u0161to ve\u0107 razumije\u0161 i osje\u0107a\u0161 sigurnije.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"sec\" id=\"faq\">\n  <div class=\"container\">\n    <div class=\"fade-in\">\n      <h2>\u010cesto postavljena pitanja<\/h2>\n      <div class=\"sec-line\" style=\"margin-bottom:30px;\"><\/div>\n\n      <div style=\"display:flex;justify-content:center;margin-bottom:32px;\">\n        <div class=\"faq-mascot-card\">\n          <img decoding=\"async\" id=\"faqMascot\" src=\"https:\/\/koordino.com.hr\/wp-content\/uploads\/2026\/03\/cropped-logo_kooridno.png\" alt=\"Koordino zemljica\">\n          <div>\n            <div class=\"t1\">Koordino odgovara<\/div>\n            <div class=\"t2\">Klikni na pitanje i vidi odgovor \ud83c\udf0d<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-wrap\">\n        <div class=\"faq-list\">\n          <div class=\"faq-item\">\n            <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n              <span class=\"qtxt\">Kako zapo\u010deti s gledanjem?<\/span>\n              <span class=\"plus\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><\/svg><\/span>\n            <\/button>\n            <div class=\"faq-a\"><div class=\"faq-a-inner\">Desno u gornjem kutu nalaze se opcije za prijavu i registraciju. Nakon \u0161to izradi\u0161 profil, javi nam svoj username putem e-maila pa \u0107emo ti omogu\u0107iti pristup video instrukcijama i dogovoriti na\u010din i vrijeme pla\u0107anja.<\/div><\/div>\n          <\/div>\n\n          <div class=\"faq-item\">\n            <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n              <span class=\"qtxt\">Gdje su pripreme i predmeti?<\/span>\n              <span class=\"plus\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><\/svg><\/span>\n            <\/button>\n            <div class=\"faq-a\"><div class=\"faq-a-inner\">Klikni na &#8220;Priprema&#8221; u navigaciji &#8211; tamo se nalaze svi obra\u0111eni kolegiji.<\/div><\/div>\n          <\/div>\n\n          <div class=\"faq-item\">\n            <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n              <span class=\"qtxt\">Mogu li gledati lekcije vi\u0161e puta?<\/span>\n              <span class=\"plus\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><\/svg><\/span>\n            <\/button>\n            <div class=\"faq-a\"><div class=\"faq-a-inner\">Da. Ideja i jest da se mo\u017ee\u0161 vra\u0107ati na dijelove lekcija koliko god puta treba.<\/div><\/div>\n          <\/div>\n\n          <div class=\"faq-item\">\n            <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n              <span class=\"qtxt\">Radi li stranica na mobitelu?<\/span>\n              <span class=\"plus\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><\/svg><\/span>\n            <\/button>\n            <div class=\"faq-a\"><div class=\"faq-a-inner\">Da. Stranica je responzivna i prilago\u0111ena mobitelu, tabletu i ra\u010dunalu.<\/div><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CONTACT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"sec\" id=\"kontakt\" style=\"padding:40px 0 86px;\">\n  <div class=\"container\">\n    <div class=\"fade-in\">\n      <div class=\"contact-card card\">\n        <div class=\"blob1\"><\/div>\n        <div class=\"blob2\"><\/div>\n        <div class=\"inner\">\n          <div class=\"ic\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg><\/div>\n          <h2>Kontaktiraj nas<\/h2>\n          <p>Ima\u0161 pitanja? Slobodno nam se javi putem e-maila.<\/p>\n          <a href=\"mailto:koordinoinstr@gmail.com\" class=\"contact-btn\">\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>\n            koordinoinstr@gmail.com\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"kd-footer\">\n  <div class=\"container\">\n    <div class=\"fwrap\">\n      <p>\u00a9 <span id=\"yr\"><\/span> Koordino. Sva prava pridr\u017eana.<\/p>\n      <p class=\"sub\">Geodetske instrukcije &#8211; u\u010dimo zajedno \ud83d\udcd0<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCROLL TO TOP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<button class=\"stb\" id=\"scrollTop\" type=\"button\" aria-label=\"Natrag na vrh\"><span class=\"stb-arrow\" aria-hidden=\"true\"><\/span><\/button>\n\n<\/div>\n\n\n<script>\n(function(){\n  'use strict';\n  \/* Napomena: skripta namjerno ne koristi znakove manje\/vece ni dvostruki ampersand jer ih WordPress zna pokvariti *\/\n  var root = document.querySelector('.kd');\n  if (!root) return;\n  var reduce = false;\n  if (window.matchMedia) { reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; }\n  var canObserve = ('IntersectionObserver' in window);\n  if (canObserve) { if (!reduce) { root.classList.add('kd-js'); } }\n\n  \/* Godina *\/\n  var yr = document.getElementById('yr');\n  if (yr) { yr.textContent = new Date().getFullYear(); }\n\n  \/* Fade in na scroll *\/\n  var fadeEls = root.querySelectorAll('.fade-in');\n  if (root.classList.contains('kd-js')) {\n    var obs = new IntersectionObserver(function(entries, observer){\n      entries.forEach(function(entry){\n        if (entry.isIntersecting) {\n          entry.target.classList.add('is-visible');\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.12 });\n    Array.prototype.forEach.call(fadeEls, function(el){ obs.observe(el); });\n    \/* sigurnosna mreza: nakon 4 s sve prikazi *\/\n    setTimeout(function(){\n      Array.prototype.forEach.call(fadeEls, function(el){ el.classList.add('is-visible'); });\n    }, 4000);\n  }\n\n  \/* Koordinate *\/\n  function jitter(base){ return (base + (Math.random() - 0.5) * 0.003).toFixed(6) + '\u00b0'; }\n  var latEl = document.getElementById('latVal');\n  var lngEl = document.getElementById('lngVal');\n  setInterval(function(){\n    if (latEl) { latEl.textContent = jitter(45.817557); }\n    if (lngEl) { lngEl.textContent = jitter(15.977773); }\n  }, 2200);\n\n  \/* Timeline na scroll *\/\n  var featList = document.getElementById('featList');\n  var tlFill = document.getElementById('tlFill');\n  var tlDots = featList ? featList.querySelectorAll('.tl-dot') : [];\n  var ticking = false;\n  function updateTimeline(){\n    ticking = false;\n    if (!featList) return;\n    if (!tlFill) return;\n    var r = featList.getBoundingClientRect();\n    var h = featList.offsetHeight;\n    var target = window.innerHeight * 0.6;\n    var fillPx = Math.max(0, Math.min(h, target - r.top));\n    tlFill.style.height = fillPx + 'px';\n    Array.prototype.forEach.call(tlDots, function(dot){\n      var dr = dot.getBoundingClientRect();\n      var dotY = dr.top + dr.height \/ 2 - r.top;\n      dot.classList.toggle('on', Math.max(fillPx, dotY) === fillPx);\n    });\n  }\n  function requestTimeline(){\n    if (!ticking) { ticking = true; window.requestAnimationFrame(updateTimeline); }\n  }\n  window.addEventListener('scroll', requestTimeline, { passive: true });\n  window.addEventListener('resize', requestTimeline);\n  updateTimeline();\n\n  \/* FAQ *\/\n  var mascot = document.getElementById('faqMascot');\n  var faqBtns = root.querySelectorAll('.faq-q');\n  Array.prototype.forEach.call(faqBtns, function(btn){\n    btn.addEventListener('click', function(){\n      var item = btn.closest('.faq-item');\n      var ans = item.querySelector('.faq-a');\n      var isOpen = btn.classList.contains('active');\n      Array.prototype.forEach.call(faqBtns, function(b){\n        b.classList.remove('active');\n        b.setAttribute('aria-expanded', 'false');\n        var it = b.closest('.faq-item');\n        it.classList.remove('open');\n        it.querySelector('.faq-a').style.height = '0px';\n      });\n      if (!isOpen) {\n        btn.classList.add('active');\n        btn.setAttribute('aria-expanded', 'true');\n        item.classList.add('open');\n        ans.style.height = ans.firstElementChild.offsetHeight + 'px';\n      }\n      if (mascot) {\n        mascot.classList.remove('faq-mascot-bounce');\n        void mascot.offsetWidth;\n        mascot.classList.add('faq-mascot-bounce');\n        setTimeout(function(){ mascot.classList.remove('faq-mascot-bounce'); }, 600);\n      }\n    });\n  });\n  window.addEventListener('resize', function(){\n    var openBtn = root.querySelector('.faq-q.active');\n    if (openBtn) {\n      var ans = openBtn.closest('.faq-item').querySelector('.faq-a');\n      ans.style.height = ans.firstElementChild.offsetHeight + 'px';\n    }\n  });\n\n  \/* Natrag na vrh *\/\n  var stb = document.getElementById('scrollTop');\n  if (stb) {\n    var toggleStb = function(){ stb.classList.toggle('show', Math.min(window.scrollY, 261) === 261); };\n    window.addEventListener('scroll', toggleStb, { passive: true });\n    toggleStb();\n    stb.addEventListener('click', function(){ window.scrollTo({ top: 0, behavior: 'smooth' }); });\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u2013250 \u2013100 +100 +250 +250 +150 \u201350 \u2013150 +N \u2013S +E \u2013W T01 T02 T03 T04 T05 T06 T07 T08 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"disabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":23,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/154"}],"wp:attachment":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}