{"id":11,"date":"2025-10-10T16:37:05","date_gmt":"2025-10-10T16:37:05","guid":{"rendered":"https:\/\/web31251290.lab1.almamater.si\/?page_id=11"},"modified":"2025-10-21T12:26:22","modified_gmt":"2025-10-21T10:26:22","slug":"home","status":"publish","type":"page","link":"https:\/\/web31251290.lab1.almamater.si\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6be20dc e-flex e-con-boxed e-con e-parent\" data-id=\"6be20dc\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-561b8d8 elementor-widget elementor-widget-html\" data-id=\"561b8d8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMART CITY \u2014 TOP NAV (vedno viden, z napisom \u201cTokio\u201d) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<header class=\"smart-topnav\" role=\"navigation\" aria-label=\"Main\">\r\n  <div class=\"nav-frame\">\r\n    <div class=\"nav-inner\">\r\n      <a class=\"brand\" href=\"https:\/\/web31251290.lab1.almamater.si\" aria-label=\"Home\">\r\n        <span class=\"dot\"><\/span> Smart City\r\n      <\/a>\r\n\r\n      <button class=\"nav-toggle\" aria-label=\"Open menu\" aria-expanded=\"false\">\r\n        <span><\/span><span><\/span><span><\/span>\r\n      <\/button>\r\n\r\n      <nav class=\"nav-links\">\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\" data-route=\"home\" class=\"is-active\">Home<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/singapur\" data-route=\"singapore\">Singapur<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/tokio\" data-route=\"tokio\">Tokio<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/london\" data-route=\"london\">London<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/barcelona\" data-route=\"barcelona\">Barcelona<\/a>\r\n        <a href=\"https:\/\/web31251290.lab1.almamater.si\/index.php\/ljubljana\" data-route=\"ljubljana\">Ljubljana<\/a>\r\n      <\/nav>\r\n    <\/div>\r\n  <\/div>\r\n<\/header>\r\n\r\n<style>\r\n:root{\r\n  --bg-0:#05070c; --bg-1:#0b0f18;\r\n  --txt-1:#e7fbff; --txt-2:#9fd8ea;\r\n  --accent:#00eaff;\r\n  --border:rgba(255,255,255,.08);\r\n}\r\n\r\n\/* ====== TOP NAV ====== *\/\r\n.smart-topnav{\r\n    top: 20px; \r\n  position:fixed;\r\n  top:0; left:0; width:100%;\r\n  z-index:9999;\r\n  font-family:\"Poppins\",system-ui,Segoe UI,Arial,sans-serif;\r\n  color:var(--txt-1);\r\n  transition: background .3s ease, box-shadow .3s ease;\r\n  backdrop-filter: blur(10px);\r\n}\r\n\r\n\/* okvir menija *\/\r\n.smart-topnav .nav-frame{\r\n  background: rgba(5,7,12,0.7);\r\n  border-bottom: 1px solid var(--border);\r\n  box-shadow: 0 6px 20px rgba(0,0,0,.35);\r\n}\r\n\r\n\/* notranjost *\/\r\n.smart-topnav .nav-inner{\r\n  max-width: 1200px; margin: 0 auto;\r\n  padding: 12px 18px;\r\n  display: flex; align-items: center; justify-content: space-between;\r\n}\r\n\r\n\/* brand *\/\r\n.smart-topnav .brand{\r\n  display:flex; align-items:center; gap:.6rem;\r\n  font-weight:800; letter-spacing:.5px; text-decoration:none; color:var(--txt-1);\r\n}\r\n.smart-topnav .brand .dot{\r\n  width:10px; height:10px; border-radius:999px;\r\n  background: radial-gradient(circle at 50% 50%, var(--accent) 0%, transparent 70%);\r\n  box-shadow: 0 0 12px var(--accent), 0 0 28px var(--accent);\r\n}\r\n\r\n\/* links *\/\r\n.smart-topnav .nav-links{\r\n  display:flex; align-items:center; gap:.6rem;\r\n}\r\n.smart-topnav .nav-links a{\r\n  --pad-x: 14px; --pad-y: 8px;\r\n  position:relative; display:inline-flex; align-items:center;\r\n  padding: var(--pad-y) var(--pad-x);\r\n  font-weight:600; color:var(--txt-1); text-decoration:none;\r\n  border-radius:12px;\r\n  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;\r\n}\r\n\r\n\/* underline + glow *\/\r\n.smart-topnav .nav-links a::after{\r\n  content:\"\"; position:absolute; left:10px; right:10px; bottom:6px; height:2px;\r\n  background: linear-gradient(90deg, transparent 0 6%, var(--accent) 35% 65%, transparent 94% 100%);\r\n  opacity:0; transform: translateY(3px); transition: all .18s ease;\r\n  box-shadow: 0 0 10px var(--accent);\r\n}\r\n\r\n\/* hover \/ focus *\/\r\n.smart-topnav .nav-links a:hover,\r\n.smart-topnav .nav-links a:focus-visible{\r\n  background: rgba(124,249,255,.07);\r\n  box-shadow: 0 0 0 1px rgba(124,249,255,.18) inset;\r\n  transform: translateY(-1px);\r\n}\r\n.smart-topnav .nav-links a:hover::after,\r\n.smart-topnav .nav-links a:focus-visible::after{ opacity:1; transform:translateY(0); }\r\n\r\n\/* active\/current page *\/\r\n.smart-topnav .nav-links a.is-active,\r\n.smart-topnav .nav-links a[aria-current=\"page\"]{\r\n  background: rgba(124,249,255,.12);\r\n  box-shadow: 0 0 0 1px rgba(124,249,255,.26) inset, 0 0 20px rgba(0,234,255,.15);\r\n}\r\n.smart-topnav .nav-links a.is-active::after,\r\n.smart-topnav .nav-links a[aria-current=\"page\"]::after{\r\n  opacity:1; transform:translateY(0);\r\n}\r\n\r\n\/* hamburger for mobile *\/\r\n.nav-toggle{\r\n  display:none; background:none; border:0; cursor:pointer;\r\n  width:42px; height:36px; border-radius:10px;\r\n}\r\n.nav-toggle span{\r\n  display:block; height:2px; margin:7px 8px; background:var(--txt-1);\r\n  transition: transform .2s ease, opacity .2s ease;\r\n}\r\n\r\n\/* responsive *\/\r\n@media (max-width: 930px){\r\n  .nav-toggle{ display:block; }\r\n  .smart-topnav .nav-inner{ padding:10px 14px; }\r\n  .smart-topnav .nav-links{\r\n    position:fixed; top:64px; right:14px; left:14px;\r\n    display:flex; flex-direction:column; gap:.4rem;\r\n    background: linear-gradient(180deg, rgba(10,14,22,.92), rgba(10,14,22,.86));\r\n    border:1px solid var(--border);\r\n    border-radius:14px; padding:10px;\r\n    box-shadow: 0 12px 40px rgba(0,0,0,.45);\r\n    opacity:0; pointer-events:none; transform: translateY(-8px);\r\n    transition: all .2s ease;\r\n  }\r\n  .smart-topnav.open .nav-links{\r\n    opacity:1; pointer-events:auto; transform: translateY(0);\r\n  }\r\n  .smart-topnav.open .nav-toggle span:nth-child(1){ transform: translateY(9px) rotate(45deg); }\r\n  .smart-topnav.open .nav-toggle span:nth-child(2){ opacity:0; }\r\n  .smart-topnav.open .nav-toggle span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const header = document.querySelector('.smart-topnav');\r\n  const btn = header.querySelector('.nav-toggle');\r\n  const links = header.querySelector('.nav-links');\r\n\r\n  btn.addEventListener('click', () => {\r\n    const open = header.classList.toggle('open');\r\n    btn.setAttribute('aria-expanded', open ? 'true' : 'false');\r\n  });\r\n\r\n  links.querySelectorAll('a').forEach(a=>{\r\n    a.addEventListener('click', ()=> header.classList.remove('open'));\r\n  });\r\n\r\n  const path = location.pathname.toLowerCase();\r\n  links.querySelectorAll('a').forEach(a=>{\r\n    const href = a.getAttribute('href') || '';\r\n    if(href && path !== '\/' && href !== '\/' && path.startsWith(new URL(href, location.origin).pathname.toLowerCase())){\r\n      a.classList.add('is-active'); a.setAttribute('aria-current','page');\r\n    }\r\n    if(path === '\/' && (href === '\/' || href.endsWith('\/index.php'))){\r\n      a.classList.add('is-active'); a.setAttribute('aria-current','page');\r\n    }\r\n  });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2f36045 snap e-flex e-con-boxed e-con e-parent\" data-id=\"2f36045\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-96a4805 e-con-full e-flex e-con e-child\" data-id=\"96a4805\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6124bfa elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"6124bfa\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMART CITY INTRO -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"smart-intro\">\r\n  <h1 class=\"smart-title\">SMART CITYS<\/h1>\r\n\r\n  <div class=\"smart-subtitle\">\r\n    <ul>\r\n      <li><strong>Pametno mesto<\/strong> zdru\u017euje tehnologijo, ljudi in institucije za trajnostni razvoj urbanih okolij.<\/li>\r\n      <li>Temelji na <strong>\u0161estih klju\u010dnih dimenzijah<\/strong>: gospodarstvo, okolje, upravljanje, kakovost bivanja, mobilnost in ljudje.<\/li>\r\n      <li>Cilj je ustvariti <strong>inovativno, vklju\u010dujo\u010de in zeleno mesto<\/strong>, ki krepi dru\u017ebeno povezanost ter spodbuja sodelovanje skupnosti.<\/li>\r\n      <li>V jedru pametno mesto povezuje <strong>IKT, socialno infrastrukturo in javne ustanove<\/strong>, da spodbuja gospodarski, kulturni in prostorski napredek.<\/li>\r\n    <\/ul>\r\n  <\/div>\r\n\r\n  <!-- GUMB: POGLEJ PRIMERE SVETA -->\r\n  <div class=\"smart-btn-wrap\">\r\n    <button class=\"smart-btn\" onclick=\"scrollToGlobe()\">\ud83c\udf0d Poglej primere sveta<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  function scrollToGlobe() {\r\n    const globe = document.getElementById('smartGlobeWrap'); \r\n    if (globe) {\r\n      globe.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n    } else {\r\n      console.warn(\"Element #smartGlobeWrap ni bil najden!\");\r\n    }\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  body {\r\n    font-family: 'Poppins', sans-serif;\r\n  }\r\n\r\n  \/* --- Glavni blok postavitve --- *\/\r\n  .smart-intro {\r\n    max-width: 1100px;\r\n    position: relative;\r\n    top: 22vh; \/* <-- tukaj kontrolira\u0161 vi\u0161ino (22vh = pribli\u017eno proti sredini, a ne \u010disto) *\/\r\n    transform: translateY(-10%);\r\n  }\r\n\r\n  .smart-title {\r\n    font-size: clamp(42px, 5vw, 90px);\r\n    font-weight: 700;\r\n    color: #82e7ff;\r\n    margin-bottom: 18px;\r\n    letter-spacing: 2px;\r\n    text-shadow: 0 0 10px rgba(0, 255, 255, .7),\r\n                 0 0 30px rgba(0, 255, 255, .4),\r\n                 0 0 60px rgba(0, 255, 255, .3);\r\n  }\r\n\r\n  .smart-subtitle {\r\n    color: #fff;\r\n    font-weight: 300;\r\n    font-size: clamp(16px, 1.3vw + 0.4rem, 19px);\r\n    line-height: 1.7;\r\n    max-width: 900px;\r\n    opacity: 0;\r\n    animation: fadeIn 2s ease forwards 1s;\r\n    text-shadow: 0 0 4px rgba(255,255,255,.35),\r\n                 0 0 12px rgba(0,255,255,.25);\r\n    letter-spacing: 0.3px;\r\n  }\r\n\r\n  .smart-subtitle ul {\r\n    list-style: none;\r\n    padding-left: 0;\r\n  }\r\n\r\n  .smart-subtitle li {\r\n    margin-bottom: 12px;\r\n    position: relative;\r\n    padding-left: 26px;\r\n  }\r\n\r\n  .smart-subtitle li::before {\r\n    content: \"\u25c6\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 2px;\r\n    color: #00ffff;\r\n    font-size: 14px;\r\n    text-shadow: 0 0 8px rgba(0,255,255,0.6);\r\n  }\r\n\r\n  \/* --- GUMB --- *\/\r\n  .smart-btn-wrap {\r\n    display: flex;\r\n    justify-content: center;\r\n    margin-top: 90px; \/* vi\u0161je \u0161tevilo = gumb bolj dol *\/\r\n  }\r\n\r\n  .smart-btn {\r\n    padding: 14px 40px;\r\n    font-size: 18px;\r\n    font-weight: 500;\r\n    color: #00faff;\r\n    background: transparent;\r\n    border: 2px solid #00faff;\r\n    border-radius: 50px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    text-shadow: 0 0 8px rgba(0,255,255,.4);\r\n    box-shadow: 0 0 12px rgba(0,255,255,.2);\r\n    outline: none;\r\n  }\r\n\r\n  .smart-btn:hover {\r\n    background: rgba(0,255,255,.1);\r\n    box-shadow: 0 0 20px rgba(0,255,255,.5);\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  .smart-btn:focus,\r\n  .smart-btn:active {\r\n    outline: none;\r\n    background: rgba(0,255,255,.1);\r\n    border-color: #00faff;\r\n    box-shadow: 0 0 20px rgba(0,255,255,.5);\r\n    color: #00faff;\r\n  }\r\n\r\n  @keyframes fadeIn {\r\n    to {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  \/* --- Responsivnost --- *\/\r\n  @media (max-width: 900px) {\r\n    .smart-intro {\r\n      top: 15vh; \/* manj pomaknjeno dol na manj\u0161ih ekranih *\/\r\n      transform: translateY(-5%);\r\n      text-align: center;\r\n    }\r\n    .smart-btn-wrap { margin-top: 70px; }\r\n  }\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f487ac9 e-con-full e-flex e-con e-child\" data-id=\"f487ac9\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-06cf5ed elementor-widget elementor-widget-html\" data-id=\"06cf5ed\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- HERO s tekstom levo in videom desno -->\r\n<section class=\"hero\">\r\n\r\n  <div class=\"hero-video\">\r\n    <video class=\"side-video\" autoplay muted loop playsinline preload=\"auto\">\r\n      <source src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/3129957-uhd_2560_1440_25fps.mp4\" type=\"video\/mp4\">\r\n      Tvoj brskalnik ne podpira HTML5 videa.\r\n    <\/video>\r\n    <!-- fade proti levemu tekstu -->\r\n    <div class=\"video-fade\"><\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .hero{\r\n    position: relative;\r\n    min-height: 100vh;\r\n    background: #000;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* LEVA STRAN \u2013 tvoj obstoje\u010di content *\/\r\n  .hero-copy{\r\n    position: relative;\r\n    z-index: 2;              \/* nad videom *\/\r\n    max-width: 720px;\r\n    padding: 56px 24px 56px 48px;\r\n    color: #eafcff;\r\n  }\r\n\r\n  \/* DESNA STRAN \u2013 video panel *\/\r\n  .hero-video{\r\n    position: absolute;\r\n    inset: 0 0 0 auto;       \/* sidra desno *\/\r\n    width: min(52vw, 920px); \/* \u0161irina desnega panela *\/\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .side-video{\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;       \/* zapolni brez \u010drnih robov *\/\r\n    display: block;\r\n  }\r\n\r\n  \/* Ne\u017een gradient, da je tekst berljiv *\/\r\n  .video-fade{\r\n    position: absolute;\r\n    left: -28vw;             \/* preliv se \u201cprelije\u201d pod tekst *\/\r\n    top: 0;\r\n    width: 28vw;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);\r\n  }\r\n\r\n  \/* Odpravi, da kak\u0161en builder ne prepi\u0161e barve ozadja *\/\r\n  .hero, .hero * { box-sizing: border-box; }\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bb7ab96 snap e-flex e-con-boxed e-con e-parent\" data-id=\"bb7ab96\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-111e0a4 elementor-widget elementor-widget-html\" data-id=\"111e0a4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMART CITY \u2014 POSTS (Elementor HTML widget, dynamic from WP posts) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;500;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"smart-posts-hero\">\r\n  <h2 class=\"title\">Pametna mesta v praksi<\/h2>\r\n  <p class=\"subtitle\">Zadnje objave o pametnih re\u0161itvah, projektih in tehnologijah, ki oblikujejo mesta prihodnosti.<\/p>\r\n<\/section>\r\n\r\n<style>\r\n.smart-posts-hero {\r\n  text-align:center;\r\n  margin:0 auto 25px auto; \/* zmanj\u0161an spodnji razmik *\/\r\n  padding-top:90px; \/* ve\u010dji razmik pod headerjem *\/\r\n  max-width:800px;\r\n}\r\n.smart-posts-hero .title{\r\n  font-size:clamp(28px,4vw,42px);\r\n  color:#00eaff;\r\n  font-weight:800;\r\n  letter-spacing:0.3px;\r\n  margin-bottom:10px;\r\n}\r\n.smart-posts-hero .subtitle{\r\n  color:#9fd8ea;\r\n  font-size:16px;\r\n  line-height:1.6;\r\n  opacity:.9;\r\n}\r\n<\/style>\r\n\r\n<section class=\"smart-posts\" aria-label=\"Smart City posts\">\r\n  <!-- Controls -->\r\n  <div class=\"sp-controls\">\r\n    <div class=\"left\">\r\n      <div class=\"chips\" role=\"tablist\" aria-label=\"Filter by category\">\r\n        <button class=\"chip is-active\" data-cat=\"all\" role=\"tab\" aria-selected=\"true\">Vse<\/button>\r\n        <button class=\"chip\" data-cat=\"mobility\" role=\"tab\">Mobilnost<\/button>\r\n        <button class=\"chip\" data-cat=\"energy\" role=\"tab\">Energija<\/button>\r\n        <button class=\"chip\" data-cat=\"iot\" role=\"tab\">IoT<\/button>\r\n        <button class=\"chip\" data-cat=\"safety\" role=\"tab\">Varnost<\/button>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"right\">\r\n      <label class=\"sr-only\" for=\"sp-city\">Mesto<\/label>\r\n      <select id=\"sp-city\" class=\"select\">\r\n        <option value=\"all\">Vsa mesta<\/option>\r\n        <option value=\"ljubljana\">Ljubljana<\/option>\r\n        <option value=\"tokyo\">Tokyo<\/option>\r\n        <option value=\"singapore\">Singapore<\/option>\r\n        <option value=\"london\">London<\/option>\r\n        <option value=\"barcelona\">Barcelona<\/option>\r\n      <\/select>\r\n\r\n      <label class=\"sr-only\" for=\"sp-search\">I\u0161\u010di<\/label>\r\n      <input id=\"sp-search\" class=\"search\" type=\"search\" placeholder=\"I\u0161\u010di objave\u2026\">\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Grid -->\r\n  <div class=\"sp-grid\" id=\"spGrid\"><\/div>\r\n\r\n  <!-- Load more -->\r\n  <div class=\"sp-actions\">\r\n    <button id=\"spLoadMore\" class=\"btn\">Nalo\u017ei ve\u010d<\/button>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n:root{\r\n  --bg-0:#05070c; --bg-1:#0b0f18;\r\n  --txt-1:#e7fbff; --txt-2:#9fd8ea;\r\n  --line:#0f2430; --muted:#9bb6c3;\r\n  --accent:#00eaff; --accent-soft:#7cf9ff;\r\n  --chip:#0b1420; --chip-b:#123245;\r\n}\r\n.smart-posts{\r\n  font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;\r\n  color:var(--txt-1);\r\n  background:linear-gradient(180deg,var(--bg-0),var(--bg-1));\r\n  padding:24px;\r\n  border-radius:18px;\r\n  box-shadow:0 10px 40px rgba(0,0,0,.35);\r\n  margin-top:80px; \/* dodan razmik od hero sekcije *\/\r\n}\r\n.smart-posts *{box-sizing:border-box}\r\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\r\n\r\n\/* Controls *\/\r\n.sp-controls{\r\n  display:flex;gap:12px;justify-content:space-between;align-items:center;\r\n  margin-bottom:18px;flex-wrap:wrap;\r\n}\r\n.chips{display:flex;gap:8px;flex-wrap:wrap}\r\n.chip{\r\n  background:var(--chip);border:1px solid var(--chip-b);color:var(--txt-2);\r\n  padding:8px 12px;border-radius:999px;font-size:13px;cursor:pointer;transition:.2s;\r\n}\r\n.chip:hover{border-color:var(--accent);color:var(--txt-1)}\r\n.chip.is-active{\r\n  background:rgba(0,234,255,.12);border-color:var(--accent);\r\n  color:var(--accent-soft);box-shadow:0 0 0 1px rgba(0,234,255,.15) inset;\r\n}\r\n.right{display:flex;gap:10px;align-items:center;margin-left:auto}\r\n.select,.search{\r\n  background:#0b1320;border:1px solid #13273a;color:var(--txt-1);\r\n  padding:10px 12px;border-radius:12px;outline:none;font-size:14px;min-width:180px;\r\n}\r\n.search{min-width:240px}\r\n\r\n\/* Grid *\/\r\n.sp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}\r\n@media (max-width:1100px){.sp-grid{grid-template-columns:repeat(8,1fr)}}\r\n@media (max-width:720px){.sp-grid{grid-template-columns:repeat(4,1fr)}}\r\n\r\n.sp-card{\r\n  grid-column:span 4;background:rgba(10,14,22,.55);border:1px solid var(--line);\r\n  border-radius:16px;overflow:hidden;position:relative;\r\n  transition:transform .25s ease, border-color .25s;\r\n}\r\n.sp-card:hover{\r\n  transform:translateY(-4px);border-color:rgba(0,234,255,.35);\r\n  box-shadow:0 12px 32px rgba(0,234,255,.07);\r\n}\r\n.card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}\r\n.media{\r\n  aspect-ratio:16\/9;\r\n  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.25)),var(--img) center\/cover no-repeat;\r\n}\r\n.meta{padding:14px}\r\n.tag{\r\n  display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 10px;\r\n  border-radius:999px;border:1px solid #173245;background:#0b1320;color:#cfefff;\r\n}\r\n.tag.mobility{border-color:#145b6b}\r\n.tag.energy{border-color:#2d6d3a}\r\n.tag.iot{border-color:#5a3ea6}\r\n.tag.safety{border-color:#6b2d2d}\r\n.title{font-size:18px;line-height:1.25;margin:10px 0 6px 0}\r\n.excerpt{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 10px 0}\r\n.info{opacity:.8;font-size:12px;color:#b8d4de}\r\n\r\n\/* Buttons *\/\r\n.sp-actions{display:flex;justify-content:center;margin-top:22px}\r\n.btn{\r\n  background:linear-gradient(90deg,rgba(0,234,255,.15),rgba(0,234,255,.05));\r\n  border:1px solid rgba(0,234,255,.35);color:var(--accent-soft);\r\n  padding:10px 16px;border-radius:12px;cursor:pointer;backdrop-filter:blur(6px);\r\n}\r\n.btn:hover{border-color:var(--accent);color:#e9fdff}\r\n.is-hidden{display:none!important}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const API = '\/wp-json\/wp\/v2';\r\n  const grid = document.getElementById('spGrid');\r\n  const chips = document.querySelectorAll('.chip');\r\n  const citySel = document.getElementById('sp-city');\r\n  const search = document.getElementById('sp-search');\r\n  const loadMoreBtn = document.getElementById('spLoadMore');\r\n  const PAGE_SIZE = 6;\r\n\r\n  const CAT_SLUGS = ['mobility','energy','iot','safety'];\r\n  const CITY_SLUGS = ['ljubljana','tokyo','singapore','london','barcelona'];\r\n\r\n  function getTerms(p, taxonomy){\r\n    const terms = (p._embedded?.['wp:term']||[]).flat().filter(t => t.taxonomy === taxonomy);\r\n    return terms;\r\n  }\r\n  function postCategory(p){\r\n    const cats = getTerms(p, 'category');\r\n    const found = cats.find(c => CAT_SLUGS.includes(c.slug));\r\n    return found ? found.slug : 'mobility';\r\n  }\r\n  function postCity(p){\r\n    const tags = getTerms(p, 'post_tag');\r\n    const found = tags.find(t => CITY_SLUGS.includes(t.slug));\r\n    return found ? found.slug : 'ljubljana';\r\n  }\r\n  function featuredImage(p){\r\n    const m = p._embedded?.['wp:featuredmedia']?.[0];\r\n    return m?.media_details?.sizes?.medium_large?.source_url || m?.source_url ||\r\n           'https:\/\/images.pexels.com\/photos\/173304\/pexels-photo-173304.jpeg';\r\n  }\r\n  function excerptText(p){\r\n    const div = document.createElement('div');\r\n    div.innerHTML = p.excerpt?.rendered || '';\r\n    const t = (div.textContent || '').trim();\r\n    return t.length > 160 ? t.slice(0,157) + '\u2026' : (t || '\u2014');\r\n  }\r\n  function buildCard(p){\r\n    const cat = postCategory(p);\r\n    const city = postCity(p);\r\n    const img = featuredImage(p);\r\n    const date = new Date(p.date).toLocaleDateString('sl-SI',{day:'2-digit',month:'short',year:'numeric'}).replace('.', '');\r\n    const el = document.createElement('article');\r\n    el.className = 'sp-card';\r\n    el.dataset.cat = cat;\r\n    el.dataset.city = city;\r\n    el.innerHTML = `\r\n      <a class=\"card-link\" href=\"${p.link}\">\r\n        <div class=\"media\" style=\"--img:url('${img}')\"><\/div>\r\n        <div class=\"meta\">\r\n          <span class=\"tag ${cat}\">${({mobility:'Mobilnost',energy:'Energija',iot:'IoT',safety:'Varnost'})[cat]}<\/span>\r\n          <h3 class=\"title\">${p.title.rendered}<\/h3>\r\n          <p class=\"excerpt\">${excerptText(p)}<\/p>\r\n          <div class=\"info\"><span>${city.charAt(0).toUpperCase()+city.slice(1)}<\/span> \u00b7 <time>${date}<\/time><\/div>\r\n        <\/div>\r\n      <\/a>`;\r\n    return el;\r\n  }\r\n\r\n  let allPosts = [];\r\n  let filtered = [];\r\n  let visibleCount = 0;\r\n\r\n  function applyFilters(){\r\n    const activeCat = document.querySelector('.chip.is-active')?.dataset.cat || 'all';\r\n    const city = citySel.value || 'all';\r\n    const term = (search.value || '').toLowerCase().trim();\r\n\r\n    filtered = allPosts.filter(p=>{\r\n      const cat = postCategory(p);\r\n      const cOk = (activeCat === 'all' || cat === activeCat);\r\n      const cityOk = (city === 'all' || postCity(p) === city);\r\n      const text = (p.title.rendered + ' ' + excerptText(p)).toLowerCase();\r\n      const tOk = (!term || text.includes(term));\r\n      return cOk && cityOk && tOk;\r\n    });\r\n\r\n    grid.innerHTML = '';\r\n    visibleCount = 0;\r\n    loadMoreBtn.style.display = 'none';\r\n    loadMore();\r\n  }\r\n\r\n  function loadMore(){\r\n    const next = filtered.slice(visibleCount, visibleCount + PAGE_SIZE);\r\n    next.forEach(p => grid.appendChild(buildCard(p)));\r\n    visibleCount += next.length;\r\n    loadMoreBtn.style.display = (visibleCount < filtered.length) ? '' : 'none';\r\n    if(filtered.length === 0){\r\n      grid.innerHTML = '<p style=\"grid-column:1\/-1;opacity:.8\">Ni objav za izbrane filtre.<\/p>';\r\n    }\r\n  }\r\n\r\n  chips.forEach(ch => ch.addEventListener('click', ()=>{\r\n    chips.forEach(c=>c.classList.remove('is-active'));\r\n    ch.classList.add('is-active');\r\n    applyFilters();\r\n  }));\r\n  citySel.addEventListener('change', applyFilters);\r\n  search.addEventListener('input', applyFilters);\r\n  loadMoreBtn.addEventListener('click', loadMore);\r\n\r\n  fetch(`${API}\/posts?per_page=50&_embed=1`)\r\n    .then(r => r.json())\r\n    .then(data => { allPosts = Array.isArray(data) ? data : []; applyFilters(); })\r\n    .catch(err => {\r\n      console.error('WP REST error:', err);\r\n      grid.innerHTML = '<p style=\"grid-column:1\/-1;opacity:.8\">Napaka pri nalaganju objav.<\/p>';\r\n    });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a3b0a9c snap e-flex e-con-boxed e-con e-parent\" data-id=\"a3b0a9c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8f97ea3 e-con-full e-flex e-con e-child\" data-id=\"8f97ea3\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c87ea42 elementor-widget elementor-widget-html\" data-id=\"c87ea42\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- SMART GALLERY: +30% VE\u010cJA (RAZ\u0160IRJENA) VERZIJA -->\r\n<section class=\"smart-gallery-wrapper fit\">\r\n\r\n  <!-- ZGORNJI DEL -->\r\n  <div class=\"smart-gallery top\">\r\n    <div class=\"smart-hover\" tabindex=\"0\" aria-label=\"Pametna mesta: izbolj\u0161ave v prometu\">\r\n      <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/pexels-kstupak-599982-2-scaled.jpg\" alt=\"No\u010dno mesto in promet\" class=\"smart-img\"\/>\r\n      <div class=\"smart-overlay center\">\r\n        <p class=\"smart-text\">\r\n          Pametna mesta z usklajenimi semaforji, senzorji in analitiko zmanj\u0161ajo zastoje ter skraj\u0161ajo poti.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"smart-hover\" tabindex=\"0\" aria-label=\"Solarna polnilna kanopija: opis\">\r\n      <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/pexels-kindelmedia-9800034-scaled.jpg\" alt=\"Solarna kanopija\" class=\"smart-img\"\/>\r\n      <div class=\"smart-overlay center\">\r\n        <p class=\"smart-text\">\r\n          Son\u010dne celice pomagajo z napajanjem e-mobilnost brez emisij.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- SPODNJI DEL -->\r\n  <div class=\"smart-gallery bottom\">\r\n    <div class=\"smart-hover\" tabindex=\"0\" aria-label=\"Pametna mesta in 5G povezljivost\">\r\n      <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/pexels-z-z-2157359-6200343-scaled.jpg\" alt=\"Mestna infrastruktura in 5G\" class=\"smart-img\"\/>\r\n      <div class=\"smart-overlay center\">\r\n        <p class=\"smart-text\">\r\n          5G komunikacija med napravami omogo\u010da hitrej\u0161i odziv, ve\u010djo varnost in energetsko u\u010dinkovitost.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"smart-hover\" tabindex=\"0\" aria-label=\"Pametne zgradbe\">\r\n      <img decoding=\"async\" src=\"https:\/\/web31251290.lab1.almamater.si\/wp-content\/uploads\/2025\/10\/OTA3NmRkMjktMzA5Yi00YTFkLWExMzktOGQ3MDQyZjAxZTkx_what-is-a-smart-building-wattsense.jpg\" alt=\"Pametna zgradba\" class=\"smart-img\"\/>\r\n      <div class=\"smart-overlay center\">\r\n        <p class=\"smart-text\">\r\n          Pametne zgradbe z avtomatizacijo zmanj\u0161ujejo porabo energije in izbolj\u0161ujejo udobje.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n  \/* ===== +5% POVE\u010cANA (SKUPNO +30%) ===== *\/\r\n  .smart-gallery-wrapper.fit {\r\n    --gap: 10px;\r\n    --radius: 18px;\r\n    --h-top: clamp(50svh, 52svh, 54svh);   \/* zgornja vrsta *\/\r\n    --h-bottom: clamp(37svh, 39svh, 41svh);\/* spodnja vrsta *\/\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: calc(var(--gap) * 2);\r\n    width: 100%;\r\n    margin: 0 auto;\r\n    padding: 0;\r\n    max-width: 1650px;\r\n  }\r\n\r\n  .smart-gallery {\r\n    display: grid;\r\n    gap: var(--gap);\r\n    align-items: stretch;\r\n  }\r\n\r\n  .smart-gallery.top {\r\n    grid-template-columns: 65% 35%;\r\n  }\r\n\r\n  .smart-gallery.bottom {\r\n    grid-template-columns: 50% 50%;\r\n  }\r\n\r\n  .smart-gallery.top .smart-hover { height: var(--h-top); }\r\n  .smart-gallery.bottom .smart-hover { height: var(--h-bottom); }\r\n\r\n  \/* Kartice *\/\r\n  .smart-hover {\r\n    position: relative;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    border-radius: var(--radius);\r\n    cursor: pointer;\r\n    isolation: isolate;\r\n    box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;\r\n    transition: box-shadow .4s ease;\r\n  }\r\n\r\n  .smart-img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: transform .45s ease, filter .45s ease;\r\n  }\r\n\r\n  .smart-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: grid;\r\n    place-items: center;\r\n    padding: 16px;\r\n    text-align: center;\r\n    opacity: 0;\r\n    transition: opacity .3s ease;\r\n    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .smart-text {\r\n    max-width: 62ch;\r\n    color: #fff;\r\n    font-size: clamp(1rem, 1vw + .7rem, 1.3rem);\r\n    line-height: 1.45;\r\n    font-weight: 600;\r\n    margin: 0;\r\n    text-shadow: 0 0 8px rgba(255,255,255,.75);\r\n  }\r\n\r\n  \/* Hover u\u010dinek *\/\r\n  .smart-hover:hover .smart-overlay,\r\n  .smart-hover:focus-within .smart-overlay { opacity: 1; }\r\n\r\n  .smart-hover:hover .smart-img,\r\n  .smart-hover:focus-within .smart-img {\r\n    transform: scale(1.045);\r\n    filter: brightness(.93);\r\n  }\r\n\r\n  .smart-hover:hover {\r\n    box-shadow: 0 0 20px rgba(0, 240, 255, .35), 0 0 60px rgba(0, 240, 255, .15);\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 1000px) {\r\n    .smart-gallery.top,\r\n    .smart-gallery.bottom {\r\n      grid-template-columns: 1fr;\r\n    }\r\n    .smart-gallery.top .smart-hover { height: 40svh; }\r\n    .smart-gallery.bottom .smart-hover { height: 34svh; }\r\n  }\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8f0f6e7 snap e-flex e-con-boxed e-con e-parent\" data-id=\"8f0f6e7\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-046963c elementor-widget elementor-widget-html\" data-id=\"046963c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- HERO: Smart Cities Globe (CENTERED + AUTOROTATE + SAFE ZOOM + ZOOM-ONLY-ON-GLOBE + CORS SAFE) -->\r\n<div id=\"smartGlobeWrap\" class=\"globe-wrap\">\r\n  <div class=\"panel\">\r\n    <h3 style=\"margin:0;\">Loading\u2026<\/h3>\r\n  <\/div>\r\n\r\n  <div class=\"globe-area\">\r\n    <div id=\"globeViz\"><\/div>\r\n    <div id=\"globeTooltip\" class=\"globe-tooltip\" style=\"display:none\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  :root{\r\n    --bg-0:#05070c; --bg-1:#0b0f18;\r\n    --txt-1:#e7fbff; --txt-2:#9fd8ea;\r\n    --accent:#00eaff; --accent-soft:#7cf9ff;\r\n    --glass-1:rgba(10,14,22,.55); --glass-2:rgba(0,18,28,.35); --glass-3:rgba(0,10,16,.2);\r\n    --chip:rgba(0,234,255,.12); --chip-b:rgba(0,234,255,.28);\r\n    --radius:18px;\r\n    --globe-shift-x:-120px; \/* vizualni zamik globusa (zaradi levega panela) *\/\r\n  }\r\n\r\n  html, body{ height:100%; }\r\n  #smartGlobeWrap{\r\n    display:flex; gap:24px; align-items:stretch; justify-content:space-between;\r\n    width:100%; height:100svh; min-height:100svh; padding:24px 28px;\r\n    position:relative; overflow:hidden; border-radius:24px;\r\n    background:\r\n      radial-gradient(1200px 700px at 72% 45%, rgba(0,234,255,.12), transparent 60%),\r\n      linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);\r\n    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 40px 80px rgba(0,0,0,.45);\r\n    margin-top:-1px;\r\n  }\r\n  #smartGlobeWrap::before{\r\n    content:\"\"; position:absolute; left:-20px; right:-20px; top:-20px; bottom:-20px;\r\n    pointer-events:none; border-radius:inherit;\r\n    background:\r\n      linear-gradient(to top, rgba(0,0,0,0) 55%, rgba(0,0,0,0.65) 80%, rgba(0,0,0,0.85) 90%, #000 100%),\r\n      radial-gradient(1200px 700px at 70% 40%, transparent 55%, rgba(0,0,0,.35) 100%);\r\n  }\r\n  #smartGlobeWrap::after{\r\n    content:\"\"; position:absolute; inset:0; pointer-events:none; opacity:.22; mix-blend-mode:overlay;\r\n    background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/><feColorMatrix type='saturate' values='0'\/><feComponentTransfer><feFuncA type='linear' slope='0.02'\/><\/feComponentTransfer><\/filter><rect width='100%' height='100%' filter='url(%23n)'\/><\/svg>\");\r\n  }\r\n\r\n  \/* Panel (scroll + fade mask) *\/\r\n  .panel{\r\n    width:340px; min-width:280px; border-radius:var(--radius); padding:18px;\r\n    background:var(--glass-1); backdrop-filter: blur(10px);\r\n    border:1px solid rgba(0,234,255,.18);\r\n    display:flex; flex-direction:column; gap:10px;\r\n\r\n    max-height:calc(100svh - 56px);\r\n    overflow:auto;\r\n    overscroll-behavior: contain;\r\n    padding-bottom:24px;\r\n\r\n    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.0) 0, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,.0) 100%);\r\n            mask-image: linear-gradient(to bottom, rgba(0,0,0,.0) 0, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,.0) 100%);\r\n  }\r\n  .panel .head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }\r\n  .panel h3{ margin:0; color:#dffcff; font-weight:800; letter-spacing:.3px; font-size:26px; }\r\n  .panel .count{\r\n    padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; color:#bff6ff;\r\n    background:linear-gradient(180deg, rgba(0,234,255,.22), rgba(0,234,255,.12));\r\n    border:1px solid rgba(0,234,255,.35);\r\n    text-shadow:0 0 14px rgba(0,234,255,.35);\r\n  }\r\n  .panel .sub{ margin:.2rem 0 .8rem; color:var(--txt-2); font-size:14px; }\r\n  .panel::-webkit-scrollbar{ width:10px; }\r\n  .panel::-webkit-scrollbar-thumb{\r\n    background: linear-gradient(180deg, rgba(0,234,255,.28), rgba(0,234,255,.14));\r\n    border-radius:999px; border:2px solid transparent; background-clip: padding-box;\r\n  }\r\n\r\n  \/* Seznam mest *\/\r\n  #cityList{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}\r\n  #cityList li{\r\n    position:relative; border-radius:14px; padding:12px 14px 12px 12px;\r\n    border:1px solid rgba(0,234,255,.14);\r\n    background:linear-gradient(180deg, var(--glass-2), var(--glass-3));\r\n    color:#bfefff; cursor:pointer; outline:0;\r\n    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;\r\n  }\r\n  #cityList li:hover{ transform:translateY(-1px); border-color:rgba(0,234,255,.35); box-shadow:0 0 18px rgba(0,234,255,.18); }\r\n  #cityList li.active{ border-color:rgba(0,234,255,.5); box-shadow:0 0 22px rgba(0,234,255,.22); background:linear-gradient(180deg, rgba(0,30,40,.5), var(--glass-2)); }\r\n  #cityList .row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }\r\n  #cityList .flag{ font-size:16px; line-height:1; }\r\n  #cityList .name{ font-weight:800; letter-spacing:.2px; color:#e8fbff; }\r\n  #cityList .meta{ margin-left:auto; font-size:12px; color:#9fd8ea; opacity:.9; }\r\n  #cityList .desc{ font-size:12.5px; color:#aee7f7; line-height:1.35; margin-bottom:8px; }\r\n  #cityList .chips{ display:flex; flex-wrap:wrap; gap:6px; }\r\n  #cityList .chip{ font-size:11.5px; font-weight:700; letter-spacing:.2px; color:#bff6ff; padding:5px 8px; border-radius:999px; background:var(--chip); border:1px solid var(--chip-b); }\r\n  #cityList li::after{ content:'\u203a'; position:absolute; right:12px; top:14px; color:#83f1ff; opacity:0; transform:translateX(-2px); transition:opacity .15s, transform .18s; font-weight:700; }\r\n  #cityList li:hover::after, #cityList li.active::after{ opacity:.85; transform:translateX(2px); }\r\n\r\n  \/* Globe area *\/\r\n  .globe-area{ flex:1; display:flex; align-items:center; justify-content:center; min-width:0; }\r\n  #globeViz{\r\n    width:100%; height:100%; min-height:0;\r\n    filter:drop-shadow(0 40px 100px rgba(0,234,255,.16));\r\n    transform: translateX(var(--globe-shift-x));\r\n  }\r\n\r\n  .globe-tooltip{\r\n    position:absolute; padding:10px 12px; border-radius:10px;\r\n    background:rgba(3,10,16,.85); color:#c9f7ff; font-weight:700;\r\n    border:1px solid rgba(0,255,255,.35); pointer-events:none;\r\n    transform:translate(-50%,-140%); white-space:nowrap;\r\n    box-shadow:0 10px 30px rgba(0,0,0,.35); font-size:13px;\r\n    backdrop-filter:blur(6px);\r\n  }\r\n\r\n  @media (max-width: 1100px){ :root{ --globe-shift-x:-60px; } }\r\n  @media (max-width: 900px){\r\n    #smartGlobeWrap{flex-direction:column; padding:18px;}\r\n    .panel{width:100%;}\r\n    :root{ --globe-shift-x:0px; }\r\n  }\r\n  @media (min-width: 1000px){ .panel{ position:sticky; top:16px; } }\r\n<\/style>\r\n\r\n<script>\r\n\/* ------- Varno (idempotentno) nalaganje skript ------- *\/\r\nfunction loadScriptOnce(src){\r\n  return new Promise((resolve, reject)=>{\r\n    if (document.querySelector(`script[data-src=\"${src}\"]`)) return resolve();\r\n    const s = document.createElement('script');\r\n    s.src = src; s.async = true; s.defer = true; s.setAttribute('data-src', src);\r\n    s.onload = resolve; s.onerror = reject;\r\n    document.head.appendChild(s);\r\n  });\r\n}\r\nasync function ensureThree(){ if (!(window.THREE && window.THREE.REVISION)) await loadScriptOnce('https:\/\/unpkg.com\/three@0.158.0\/build\/three.min.js'); }\r\nasync function ensureGlobe(){ if (!(window.createGlobe || window.Globe)) await loadScriptOnce('https:\/\/unpkg.com\/globe.gl@2.44.1\/dist\/globe.gl.min.js'); }\r\n\r\ndocument.addEventListener('DOMContentLoaded', async () => {\r\n  try{ await ensureThree(); await ensureGlobe(); }catch(e){ console.error('Script load failed:', e); return; }\r\n\r\n  \/* ---- CONFIG: varne meje zumiranja ---- *\/\r\n  const ALT_MIN = 1.00;  \/\/ konzervativno (brez pikselizacije)\r\n  const ALT_MAX = 2.4;\r\n  const ALT_START = 1.9;\r\n  const ALT_FLY   = 1.10;\r\n  const ALT_HOVER = 1.28;\r\n  const clampAlt = a => Math.min(ALT_MAX, Math.max(ALT_MIN, a));\r\n\r\n  const cities = [\r\n    { name:'Singapore',  lat: 1.3521,  lng:103.8198, flag:'\ud83c\uddf8\ud83c\uddec', meta:'Smart Nation',\r\n      desc:'National digital ID, cashless push, urban IoT & sensors.',\r\n      tags:['e-ID','Cashless','Urban IoT','GovTech'],\r\n      \/* \ud83d\udd17 popravljeno: \/singapur *\/\r\n      url:'https:\/\/web31251290.lab1.almamater.si\/index.php\/singapur' },\r\n    { name:'Barcelona',  lat:41.3851,  lng: 2.1734,  flag:'\ud83c\uddea\ud83c\uddf8', meta:'Open Data',\r\n      desc:'Citizen-centric mobility, open data, superblocks.',\r\n      tags:['Open Data','Mobility','Superblocks','Sensors'],\r\n      url:'https:\/\/web31251290.lab1.almamater.si\/index.php\/barcelona' },\r\n    { name:'Tokyo',      lat:35.6762,  lng:139.6503,  flag:'\ud83c\uddef\ud83c\uddf5', meta:'Robotics',\r\n      desc:'5G infrastructure, robotics, high-density transit.',\r\n      tags:['5G','Robotics','Transit','AI'],\r\n      url:'https:\/\/web31251290.lab1.almamater.si\/index.php\/tokio' },\r\n    { name:'Ljubljana',  lat:46.0569,  lng:14.5058,   flag:'\ud83c\uddf8\ud83c\uddee', meta:'Green City',\r\n      desc:'Smart waste, green mobility, digital services.',\r\n      tags:['Green','Waste','Mobility','e-Services'],\r\n      url:'https:\/\/web31251290.lab1.almamater.si\/index.php\/ljubljana' },\r\n    { name:'London',     lat:51.5072,  lng:-0.1276,   flag:'\ud83c\uddec\ud83c\udde7', meta:'FinTech',\r\n      desc:'FinTech hub, open banking, data standards.',\r\n      tags:['FinTech','Open Banking','AI','Standards'],\r\n      url:'https:\/\/web31251290.lab1.almamater.si\/index.php\/london' }\r\n  ];\r\n\r\n  \/* Panel *\/\r\n  const panel = document.querySelector('.panel');\r\n  panel.innerHTML = `\r\n    <div class=\"head\">\r\n      <h3>Smart Cities<\/h3>\r\n      <span class=\"count\">${cities.length} cities<\/span>\r\n    <\/div>\r\n    <p class=\"sub\">Explore tech hubs around the world.<\/p>\r\n    <ul id=\"cityList\"><\/ul>\r\n  `;\r\n  const ul = document.getElementById('cityList');\r\n\r\n  const NAV_DELAY_MS = 900; \/\/ po\u010dakamo da se animacija \"fly\" zgodi\r\n\r\n  function navigateTo(c){\r\n    if (c && c.url){\r\n      window.location.href = c.url; \/\/ odpri v istem oknu\r\n      \/\/ ali: window.open(c.url, '_self');\r\n    }\r\n  }\r\n\r\n  cities.forEach(c=>{\r\n    const li = document.createElement('li');\r\n    li.dataset.name = c.name;\r\n    li.setAttribute('role','button'); li.setAttribute('tabindex','0');\r\n    li.innerHTML = `\r\n      <div class=\"row\">\r\n        <span class=\"flag\">${c.flag}<\/span>\r\n        <span class=\"name\">${c.name}<\/span>\r\n        <span class=\"meta\">${c.meta}<\/span>\r\n      <\/div>\r\n      <div class=\"desc\">${c.desc}<\/div>\r\n      <div class=\"chips\">${c.tags.map(t=>`<span class=\"chip\">${t}<\/span>`).join('')}<\/div>\r\n    `;\r\n    li.addEventListener('click', () => flyTo(c, \/*go*\/true));\r\n    li.addEventListener('keydown', (e)=>{ if(e.key==='Enter'||e.key===' ') flyTo(c, \/*go*\/true); });\r\n    li.addEventListener('mouseenter', () => preview(c));\r\n    ul.appendChild(li);\r\n  });\r\n  const setActive = (name) => {\r\n    document.querySelectorAll('#cityList li').forEach(li=>li.classList.toggle('active', li.dataset.name===name));\r\n  };\r\n\r\n  \/* Globe *\/\r\n  const globe = Globe()(document.getElementById('globeViz'))\r\n    .globeImageUrl('https:\/\/unpkg.com\/three-globe\/example\/img\/earth-night.jpg')\r\n    .bumpImageUrl('https:\/\/unpkg.com\/three-globe\/example\/img\/earth-topology.png')\r\n    .backgroundColor('rgba(0,0,0,0)')\r\n    .showAtmosphere(true).atmosphereColor('#00eaff').atmosphereAltitude(0.18)\r\n    .pointOfView({ lat: 25, lng: 10, altitude: clampAlt(ALT_START) })\r\n    .pointsData(cities).pointRadius(1.1).pointAltitude(0.022)\r\n    .pointColor(() => 'rgba(0,255,255,1)').pointLabel('name')\r\n    .onPointClick(p => flyTo(p, \/*go*\/true));  \/* \u2190 klik na to\u010dko tudi preusmeri *\/\r\n\r\n  \/\/ material tweak\r\n  const mat = globe.globeMaterial();\r\n  mat.emissive = new THREE.Color(0x08101a);\r\n  mat.emissiveIntensity = 0.48; mat.shininess = 6;\r\n\r\n  \/\/ pulzirajo\u010di ringi\r\n  globe.ringsData(cities.map(c=>({...c, maxR:5})))\r\n       .ringColor(()=>t=>`rgba(0,255,255,${1-t})`)\r\n       .ringMaxRadius('maxR').ringPropagationSpeed(1.0).ringRepeatPeriod(1300);\r\n\r\n  \/\/ CORS-safe countries geojson (GitHub raw) + fallback\r\n  async function loadCountries(){\r\n    const urls = [\r\n      'https:\/\/raw.githubusercontent.com\/vasturiano\/three-globe\/master\/example\/datasets\/ne_110m_admin_0_countries.geojson',\r\n      'https:\/\/cdn.jsdelivr.net\/gh\/vasturiano\/three-globe\/example\/datasets\/ne_110m_admin_0_countries.geojson'\r\n    ];\r\n    for (const u of urls){\r\n      try{\r\n        const r = await fetch(u, { mode:'cors', cache:'force-cache' });\r\n        if (!r.ok) continue;\r\n        return await r.json();\r\n      }catch{ \/* try next *\/ }\r\n    }\r\n    return null;\r\n  }\r\n  const geo = await loadCountries();\r\n  if (geo){\r\n    globe.hexPolygonsData(geo.features)\r\n         .hexPolygonResolution(3).hexPolygonMargin(0.4).hexPolygonUseDots(true)\r\n         .hexPolygonColor(()=> 'rgba(0,255,255,.18)').hexPolygonAltitude(0.008);\r\n  }else{\r\n    console.warn('Countries GeoJSON not loaded (CORS). Continuing without borders.');\r\n  }\r\n\r\n  \/\/ OrbitControls\r\n  const controls = globe.controls();\r\n  controls.enableDamping = true; controls.dampingFactor = 0.08;\r\n  controls.screenSpacePanning = false;\r\n  controls.minDistance = 300;    \/\/ bli\u017eje NE gre (konzervativno)\r\n  controls.maxDistance = 620;    \/\/ dlje NE gre\r\n  controls.zoomSpeed   = 0.6;\r\n  controls.minPolarAngle = 0.08;\r\n  controls.maxPolarAngle = Math.PI - 0.08;\r\n  controls.autoRotate = true; controls.autoRotateSpeed = 0.35;\r\n\r\n  \/* ---- 4s pause after interaction ---- *\/\r\n  let rotateResumeTimer;\r\n  function pauseAutoRotate(ms=4000){\r\n    controls.autoRotate = false;\r\n    clearTimeout(rotateResumeTimer);\r\n    rotateResumeTimer = setTimeout(()=>{ controls.autoRotate = true; }, ms);\r\n  }\r\n\r\n  \/\/ tooltip z dvema zna\u010dkama\r\n  const tooltip = document.getElementById('globeTooltip');\r\n  const cityByName = Object.fromEntries(cities.map(c=>[c.name,c]));\r\n  globe.onPointHover(p=>{\r\n    if(!p){ tooltip.style.display='none'; return; }\r\n    const meta = cityByName[p.name];\r\n    const tagText = meta ? ' \u00b7 ' + meta.tags.slice(0,2).join(' \/ ') : '';\r\n    tooltip.textContent = p.name + tagText;\r\n    tooltip.style.display='block';\r\n    const sc = globe.getScreenCoords(p.lat, p.lng);\r\n    tooltip.style.left = sc.x + 'px';\r\n    tooltip.style.top  = (sc.y - 20) + 'px';\r\n  });\r\n\r\n  \/\/ helper POV + fly\r\n  function safePOV({lat,lng,altitude}, ms=800){\r\n    globe.pointOfView({ lat, lng, altitude: clampAlt(altitude) }, ms);\r\n  }\r\n  function flyTo(p, go=false){\r\n    pauseAutoRotate(4000);\r\n    setActive(p.name);\r\n    safePOV({ lat:p.lat, lng:p.lng, altitude: ALT_FLY }, 900);\r\n    if (go) setTimeout(()=>navigateTo(p), NAV_DELAY_MS); \/\/ po \u201cfly\u201d odpri URL\r\n  }\r\n  let previewTimeout;\r\n  function preview(p){\r\n    clearTimeout(previewTimeout);\r\n    pauseAutoRotate(4000);\r\n    setActive(p.name);\r\n    safePOV({ lat:p.lat, lng:p.lng, altitude: ALT_HOVER }, 400);\r\n    previewTimeout = setTimeout(()=>{}, 1);\r\n  }\r\n\r\n  \/* ---- Interakcije, ki pavzirajo rotate ---- *\/\r\n  const canvasEl = globe.renderer().domElement;\r\n  ['pointerdown','wheel','touchstart','keydown'].forEach(evt=>{\r\n    canvasEl.addEventListener(evt, () => pauseAutoRotate(), {passive:true});\r\n  });\r\n\r\n  \/* ===========================================================\r\n     ZOOM DOVOLJEN SAMO, KO JE KAZALEC NAD ZEMLJO (RAYCASTER)\r\n     =========================================================== *\/\r\n  const raycaster = new THREE.Raycaster();\r\n  const mouse = new THREE.Vector2();\r\n  \/\/ najdemo pravo \"globe\" mesh prek materiala\r\n  const globeMesh = globe.scene().children.find(o => o.isMesh && o.material === mat);\r\n  let zoomOnGlobe = false;\r\n  function updateZoomPermission(evt){\r\n    const rect = canvasEl.getBoundingClientRect();\r\n    const cx = (evt.clientX ?? (evt.touches && evt.touches[0].clientX)) - rect.left;\r\n    const cy = (evt.clientY ?? (evt.touches && evt.touches[0].clientY)) - rect.top;\r\n    mouse.x = (cx \/ rect.width) * 2 - 1;\r\n    mouse.y = -(cy \/ rect.height) * 2 + 1;\r\n    raycaster.setFromCamera(mouse, globe.camera());\r\n    const hit = globeMesh ? raycaster.intersectObject(globeMesh, true) : [];\r\n    zoomOnGlobe = hit.length > 0;\r\n    canvasEl.style.cursor = zoomOnGlobe ? 'grab' : 'default';\r\n  }\r\n  canvasEl.addEventListener('mousemove', updateZoomPermission, {passive:true});\r\n  canvasEl.addEventListener('mouseenter', updateZoomPermission, {passive:true});\r\n  canvasEl.addEventListener('touchstart', updateZoomPermission, {passive:true});\r\n\r\n  \/* --- clamp POV med upravljanjem --- *\/\r\n  function clampPOVNow(){\r\n    const pov = globe.pointOfView();\r\n    const clamped = clampAlt(pov.altitude);\r\n    if (clamped !== pov.altitude) globe.pointOfView({ lat:pov.lat, lng:pov.lng, altitude:clamped }, 0);\r\n  }\r\n  controls.addEventListener('change', clampPOVNow);\r\n  controls.addEventListener('end', clampPOVNow);\r\n\r\n  \/\/ wheel: blokiraj, \u010de ni nad globusom ali \u010de smo na meji\r\n  canvasEl.addEventListener('wheel', (e)=>{\r\n    const pov = globe.pointOfView();\r\n    const atLimit = (e.deltaY < 0 && pov.altitude <= ALT_MIN) || (e.deltaY > 0 && pov.altitude >= ALT_MAX);\r\n    if (!zoomOnGlobe || atLimit){\r\n      e.preventDefault(); e.stopPropagation();\r\n    }\r\n  }, { passive:false });\r\n\r\n  \/\/ pinch\/gesture: dovoli le, \u010de se je za\u010delo nad globusom + ne na meji\r\n  let touchZoomAllowed = false;\r\n  canvasEl.addEventListener('touchstart', (e)=>{\r\n    updateZoomPermission(e);\r\n    touchZoomAllowed = zoomOnGlobe;\r\n  }, {passive:true});\r\n  canvasEl.addEventListener('gesturechange', (e)=>{\r\n    const pov = globe.pointOfView();\r\n    const atLimit = (e.scale > 1 && pov.altitude <= ALT_MIN) || (e.scale < 1 && pov.altitude >= ALT_MAX);\r\n    if (!touchZoomAllowed || atLimit){ e.preventDefault(); e.stopPropagation(); }\r\n  }, { passive:false });\r\n\r\n  \/\/ performance\r\n  const renderer = globe.renderer();\r\n  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));\r\n  const resize = () => renderer.setSize(globe.width(), globe.height());\r\n  window.addEventListener('resize', resize, { passive:true });\r\n  document.addEventListener('visibilitychange', () => {\r\n    controls.autoRotate = document.visibilityState === 'visible';\r\n  });\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Smart City Home Singapur Tokio London Barcelona Ljubljana SMART CITYS Pametno mesto zdru\u017euje tehnologijo, ljudi in institucije za trajnostni razvoj urbanih okolij. Temelji na \u0161estih klju\u010dnih dimenzijah: gospodarstvo, okolje, upravljanje, kakovost bivanja, mobilnost in ljudje. Cilj je ustvariti inovativno, vklju\u010dujo\u010de in zeleno mesto, ki krepi dru\u017ebeno povezanost ter spodbuja sodelovanje skupnosti. V jedru pametno mesto [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":250,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":773,"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions\/773"}],"wp:attachment":[{"href":"https:\/\/web31251290.lab1.almamater.si\/index.php\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}