/* ============================================================ KLJUČ U RUKE — scroll cinematic section (WordPress-safe, scoped) Sve je uokvireno pod .kljuc — ne dira temu okolo ============================================================ */ .kljuc{ --navy-900:#0c1a33; --navy-700:#1b3a63; --sky:#5a9bd4; --sky-deep:#2f6fae; --sky-soft:#aacbe8; --ink:#14263f; --radius-pill:60px; --radius-card:30px; --font-disp:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif; --font-body:"Inter","Segoe UI",system-ui,sans-serif; position:relative; background:#ffffff; color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow:hidden; /* drži sve efekte unutar sekcije */ -webkit-font-smoothing:antialiased; margin:0 !important; /* manji razmak u Elementoru */ padding:0 !important; } /* scoped box-sizing + reset SAMO unutar sekcije */ .kljuc *, .kljuc *::before, .kljuc *::after{box-sizing:border-box} .kljuc h1, .kljuc h2, .kljuc p, .kljuc span, .kljuc div, .kljuc a{margin:0;padding:0} .kljuc .wrap{max-width:1240px;margin:0 auto;padding:0 28px} /* ============================================================ STAGE — pozadinski efekti, lepljeni UNUTAR sekcije (ne fixed!) ============================================================ */ .kljuc .heat{ position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none; background:radial-gradient(44% 36% at 50% 50%,rgba(90,155,212,.16),transparent 62%); opacity:0;transition:opacity .6s; } .kljuc.lit .heat{opacity:1;animation:flicker 3.6s ease-in-out infinite} @keyframes flicker{0%,100%{opacity:.8}50%{opacity:1}} /* canvas varnica — sticky da prati viewport, ali ostaje unutar sekcije */ .kljuc #embers{display:none} .kljuc .scene{ position:relative;z-index:3; min-height:auto;display:flex;align-items:center;justify-content:center; padding:0.6vh 0; } .kljuc .pin-inner{ position:relative;top:auto;height:auto; display:flex;align-items:center;justify-content:center;width:100%; } /* intro + nivoi su "pinned" i daju skrol-prostor da se mapa zumira */ .kljuc .s1{min-height:88vh} .kljuc .s1 .pin-inner{position:sticky;top:0;height:88vh} .kljuc .marquee-scene .pin-inner{position:sticky;top:0;height:100vh} /* ============================================================ SCENE 1 — INTRO (kabasto) ============================================================ */ .kljuc .s1{overflow:hidden} /* mapa Srbije — CSS background (preživi WP sanitizaciju SVG-a) */ .kljuc{position:relative} .kljuc .serbia{ position:absolute;left:50%;top:0; width:min(560px,72vw);aspect-ratio:1024/1024; transform:translate(-50%,0) scale(var(--grow,1)); opacity:var(--mapO,0); z-index:0;pointer-events:none; will-change:opacity,top; transition:opacity .45s ease; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23aaccea%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236aa6dd%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate%280%2C1024%29%20scale%280.1%2C-0.1%29%22%3E%3Cpath%20d%3D%22M2748%2010220%20c-20%20-11%20-41%20-28%20-47%20-37%20-5%20-10%20-24%20-22%20-43%20-28%20-27%0A-10%20-34%20-17%20-36%20-45%20-2%20-22%20-18%20-50%20-44%20-79%20-22%20-25%20-46%20-58%20-54%20-73%20-19%20-37%0A-88%20-72%20-113%20-59%20-12%207%20-34%206%20-69%20-3%20-72%20-19%20-100%20-43%20-104%20-88%20l-3%20-37%20-43%0A19%20c-40%2018%20-44%2018%20-86%203%20l-44%20-16%20-39%2030%20c-45%2036%20-57%2039%20-100%2029%20-35%20-8%20-73%0A-58%20-73%20-95%200%20-16%20-6%20-21%20-27%20-21%20-18%200%20-40%20-13%20-65%20-37%20-35%20-34%20-42%20-37%20-125%0A-44%20-48%20-4%20-89%20-8%20-90%20-8%20-2%20-1%20-3%20-8%20-3%20-16%200%20-9%20-10%20-29%20-22%20-45%20-17%20-24%0A-19%20-34%20-11%20-53%2010%20-21%208%20-25%20-17%20-34%20-32%20-12%20-47%20-64%20-30%20-107%2010%20-28%2029%20-33%0A60%20-14%2025%2016%2060%20-13%2052%20-44%20-4%20-17%20-10%20-19%20-42%20-14%20-39%206%20-50%20-3%20-50%20-40%200%0A-22%2059%20-54%2089%20-48%2015%203%2041%20-3%2061%20-13%2029%20-15%2035%20-24%2037%20-51%201%20-32%200%20-33%20-29%0A-27%20-55%2013%20-66%20-44%20-18%20-90%2035%20-34%2038%20-50%2010%20-67%20-11%20-7%20-20%20-20%20-20%20-29%200%0A-10%20-12%20-20%20-27%20-24%20-16%20-4%20-22%20-10%20-15%20-12%2018%20-7%2015%20-22%20-13%20-59%20-33%20-43%20-32%0A-51%2010%20-68%2019%20-8%2035%20-22%2035%20-30%200%20-23%2013%20-26%2052%20-14%2028%208%2046%207%2084%20-6%2026%20-9%2057%0A-16%2069%20-16%2012%200%2034%20-13%2049%20-29%2023%20-24%2026%20-32%2017%20-50%20-10%20-17%20-23%20-21%20-84%20-23%0Al-72%20-3%20-9%20-43%20c-7%20-33%20-5%20-56%208%20-98%20l17%20-54%20-32%20-28%20c-36%20-32%20-36%20-57%203%20-105%0A18%20-22%2034%20-29%2077%20-34%2047%20-5%2056%20-10%2082%20-46%2016%20-22%2029%20-46%2029%20-53%200%20-6%2034%20-26%0A76%20-44%2061%20-25%2085%20-31%20118%20-26%2091%2014%2089%2014%2099%20-25%2010%20-41%2027%20-48%20121%20-50%2028%200%0A71%20-4%2095%20-7%2044%20-7%2045%20-8%2064%20-66%2022%20-67%2017%20-76%20-46%20-76%20-28%200%20-50%209%20-84%2035%20-54%0A41%20-111%2049%20-120%2015%20-6%20-24%20-15%20-24%20-79%20-5%20-27%208%20-62%2015%20-78%2015%20-26%200%20-28%20-3%0A-23%20-27%204%20-19%20-2%20-42%20-19%20-70%20l-25%20-43%20-68%200%20c-61%200%20-69%20-2%20-78%20-22%20-9%20-20%20-5%0A-29%2024%20-61%2018%20-21%2031%20-43%2027%20-49%20-4%20-6%20-8%20-62%20-8%20-125%20l-1%20-113%2035%200%20c28%200%2039%0A-7%2057%20-32%20l22%20-32%20-42%20-24%20c-23%20-14%20-52%20-34%20-65%20-46%20-17%20-15%20-43%20-22%20-99%20-27%0A-81%20-8%20-84%20-10%20-103%20-69%20-21%20-64%20-12%20-72%2072%20-64%2070%206%2077%2010%20170%2075%2053%2038%20101%0A69%20106%2069%205%200%2021%20-9%2035%20-20%2020%20-16%2031%20-18%2049%20-11%2044%2017%20139%20-2%20190%20-37%2059%20-40%0A66%20-62%2037%20-109%20-17%20-26%20-22%20-49%20-20%20-83%202%20-36%20-2%20-50%20-18%20-64%20-15%20-13%20-21%20-31%0A-21%20-60%200%20-59%20-28%20-125%20-55%20-132%20-18%20-4%20-32%20-27%20-60%20-94%20-20%20-49%20-43%20-91%20-51%0A-94%20-8%20-3%20-14%20-17%20-14%20-30%200%20-20%20-7%20-27%20-32%20-34%20-32%20-8%20-33%20-10%20-31%20-58%205%20-87%0A0%20-94%20-61%20-94%20l-53%200%20-6%20-35%20c-4%20-25%200%20-45%2013%20-68%2010%20-18%2021%20-61%2025%20-97%20l7%0A-65%20-36%20-17%20c-40%20-19%20-56%20-59%20-37%20-89%206%20-10%2011%20-30%2011%20-43%200%20-14%206%20-29%2013%20-33%0A8%20-4%2017%20-26%2020%20-48%208%20-48%2037%20-75%2081%20-75%2023%200%2041%20-9%2061%20-30%2031%20-32%2056%20-37%2094%0A-16%2022%2012%2093%208%20108%20-8%203%20-3%2016%20-47%2027%20-98%20l22%20-93%2047%20-23%20c25%20-12%2057%20-36%2069%0A-52%2020%20-28%2026%20-30%2064%20-24%2041%206%2041%205%2037%20-21%20-4%20-17%201%20-33%2014%20-48%2010%20-12%2024%20-34%0A31%20-49%206%20-16%2018%20-28%2026%20-28%208%200%2033%20-16%2056%20-35%2041%20-34%2070%20-45%2070%20-25%200%206%207%2010%0A15%2010%208%200%2015%20-4%2015%20-10%200%20-5%207%20-10%2016%20-10%2012%200%2014%20-7%209%20-32%20-11%20-49%20-21%20-64%0A-52%20-77%20-16%20-6%20-41%20-32%20-57%20-57%20l-29%20-46%20-126%207%20c-113%207%20-132%2010%20-200%2042%20-90%0A41%20-156%2063%20-193%2063%20-16%200%20-28%20-1%20-28%20-3%200%20-2%2011%20-35%2024%20-74%2019%20-56%2048%20-103%0A132%20-215%2059%20-79%20138%20-178%20176%20-221%2037%20-43%2077%20-95%2088%20-117%2011%20-21%2027%20-43%2036%0A-48%209%20-5%2027%20-34%2038%20-63%2018%20-44%2020%20-62%2013%20-96%20-5%20-27%20-14%20-43%20-23%20-43%20-11%200%0A-14%20-14%20-14%20-60%200%20-68%20-12%20-80%20-79%20-80%20-23%200%20-41%20-4%20-41%20-8%200%20-5%20-6%20-17%20-14%0A-27%20-13%20-18%20-16%20-14%20-50%2053%20-32%2064%20-39%2072%20-65%2072%20-15%200%20-39%20-9%20-53%20-19%20-13%0A-11%20-42%20-22%20-64%20-26%20-67%20-11%20-71%20-14%20-84%20-58%20-7%20-23%20-18%20-51%20-26%20-62%20-17%20-23%0A-17%20-55%20-1%20-112%2011%20-39%2023%20-51%20152%20-143%20116%20-83%20145%20-100%20176%20-100%2037%200%2037%200%0A64%20-75%2027%20-73%2028%20-74%2081%20-96%2057%20-24%2059%20-27%2079%20-129%2010%20-46%2022%20-60%2054%20-60%2020%200%0A47%20-21%20111%20-87%2069%20-72%2089%20-99%20106%20-148%2023%20-67%2029%20-69%20111%20-44%2040%2012%2045%2011%20104%0A-20%2047%20-24%2064%20-29%2070%20-20%206%2010%2018%206%2049%20-15%20l42%20-28%2028%2027%2027%2026%2061%20-94%20c54%0A-81%2069%20-96%20117%20-120%2037%20-18%2053%20-31%2049%20-41%20-3%20-8%2012%20-28%2040%20-51%2041%20-34%2048%20-36%0A90%20-30%2042%207%2053%203%20170%20-59%2069%20-36%20136%20-66%20150%20-66%2046%200%2054%20-8%2046%20-47%20-6%20-26%20-4%0A-46%2011%20-80%2010%20-25%2019%20-46%2019%20-48%200%20-8%20-67%20-33%20-101%20-38%20-76%20-11%20-106%20-32%20-139%0A-96%20-30%20-60%20-31%20-61%20-71%20-61%20-23%200%20-73%2011%20-112%2025%20l-72%2026%20-89%20-31%20c-50%20-16%0A-102%20-30%20-118%20-30%20-33%200%20-47%20-23%20-41%20-68%204%20-24%2020%20-45%2059%20-79%2030%20-26%2054%20-51%0A54%20-56%200%20-17%2052%20-76%2084%20-95%2027%20-16%2034%20-29%2045%20-76%207%20-31%2010%20-74%206%20-95%20-5%20-32%0A-3%20-39%2017%20-48%2045%20-20%20147%20-117%20153%20-145%204%20-14%2024%20-47%2046%20-71%2032%20-37%2038%20-50%2033%0A-74%20-4%20-19%203%20-48%2020%20-87%2015%20-33%2026%20-77%2026%20-101%200%20-53%2021%20-76%2048%20-51%2023%2020%2038%0A20%2046%200%205%20-14%209%20-13%2032%205%20l25%2020%20107%20-69%20c128%20-83%20166%20-119%20230%20-227%2055%20-91%0A74%20-153%2071%20-227%20-3%20-69%209%20-114%2032%20-126%2034%20-19%2070%20-106%2076%20-184%20l5%20-71%20-41%20-38%0Ac-51%20-47%20-53%20-77%20-10%20-135%2017%20-23%2034%20-42%2037%20-42%204%200%2029%207%2056%2015%2028%208%2064%2013%2080%0A10%2028%20-5%2036%200%2089%2064%2034%2042%2057%2079%2057%2093%20-1%2013%20-9%2057%20-19%2098%20-15%2068%20-16%2082%20-3%0A150%2016%2089%2032%20110%2082%20110%2029%200%2041%206%2054%2025%2013%2020%2025%2025%2056%2025%2033%200%2044%206%2070%2038%0A26%2033%2043%2042%20113%2062%2071%2020%2091%2032%20149%2082%20l66%2059%2059%20-26%20c32%20-14%2079%20-47%20106%20-73%0A42%20-41%2047%20-51%2047%20-89%200%20-39%202%20-43%2026%20-43%2014%200%2035%20-5%2046%20-11%2015%20-8%2031%20-7%2064%206%0A48%2018%2054%2034%2033%2093%20-10%2028%20-6%2037%2057%20131%20l66%20100%2052%203%20c50%203%2051%204%2054%2036%202%2018%2010%0A36%2017%2039%2020%207%20103%20-26%20118%20-47%2011%20-16%2017%20-16%2093%207%20l81%2024%2036%20-36%20c20%20-20%2045%0A-35%2059%20-35%2027%200%20103%2033%20112%2049%204%206%2023%2011%2041%2011%2029%200%2039%206%2057%2035%2013%2019%2030%2035%0A38%2035%209%200%2024%2016%2034%2035%2032%2059%2042%2062%2079%2027%2020%20-19%2043%20-32%2059%20-32%2021%200%2029%208%2044%0A46%20l19%2046%2058%20-47%20c53%20-43%2064%20-48%20119%20-51%2041%20-3%2067%201%2080%2010%2016%2011%2026%2012%2045%203%0A21%20-9%2027%20-8%2040%208%209%2013%2023%2019%2038%2017%2016%20-2%2028%204%2037%2017%209%2016%2023%2021%2052%2021%2031%200%2047%0A7%2072%2031%2030%2029%2035%2031%2062%2020%2016%20-7%2053%20-37%2083%20-67%2029%20-29%2058%20-54%2064%20-54%206%200%2021%0A14%2033%2030%2020%2027%2028%2030%2076%2030%20l53%200%2018%2066%20c16%2061%2021%2068%2064%2095%2046%2028%2047%2030%2075%0A128%20l27%2099%20-19%2039%20c-13%2024%20-52%2063%20-101%20102%20-45%2035%20-81%2064%20-81%2065%200%2023%2034%20165%0A44%20185%2010%2018%2013%2042%209%2064%20-4%2027%200%2043%2016%2065%2046%2065%2045%2073%20-15%20156%20-29%2042%20-54%2083%0A-54%2092%200%208%2015%2023%2033%2032%2017%209%2050%2035%2071%2057%2033%2033%2045%2039%2075%2036%2028%20-2%2042%204%2060%2022%0Al23%2025%2063%20-29%2064%20-29%2043%2020%20c24%2011%2057%2020%2074%2020%2046%200%2083%2053%20100%20143%208%2039%2019%2074%0A26%2079%20174%20103%20172%20102%20207%20168%2019%2035%2047%2075%2063%2088%2044%2037%2055%2068%2063%20173%20l7%2097%0A-38%2012%20c-83%2027%20-135%2085%20-220%20245%20-60%20111%20-110%20158%20-201%20185%20-60%2018%20-78%2029%0A-103%2060%20-23%2029%20-40%2040%20-71%2045%20-30%205%20-45%2015%20-62%2040%20-17%2026%20-31%2035%20-64%2040%20-31%204%0A-43%2011%20-43%2023%200%209%20-18%2066%20-40%20126%20-34%2094%20-40%20121%20-40%20191%20l0%2080%20-80%2080%20c-75%0A74%20-80%2082%20-80%20122%200%2023%20-14%2075%20-31%20119%20l-31%2077%2021%2054%20c15%2038%2021%2078%2021%20131%200%0A55%206%2090%2020%20121%2012%2025%2020%2065%2020%2096%20l0%2052%2091%2019%20c87%2017%2093%2020%20116%2056%2019%2028%2040%0A43%2084%2060%20l59%2023%200%2087%20c0%20103%207%20126%2060%20186%2046%2051%2069%20118%2061%20170%20-6%2035%20-9%2037%0A-116%2083%20-61%2026%20-120%2058%20-133%2070%20-29%2030%20-56%20105%20-71%20193%20-7%2038%20-21%2086%20-31%20106%0Al-19%2038%2050%204%20c60%206%2099%2037%2099%2080%200%2031%2016%2068%2034%2080%2023%2016%2079%207%20136%20-22%2085%20-43%0A140%20-39%20161%2012%2040%2096%20-46%20198%20-180%20211%20-63%207%20-64%207%20-160%2096%20-90%2083%20-101%2090%0A-159%20101%20l-62%2013%20-38%20-35%20c-26%20-24%20-57%20-40%20-93%20-48%20-72%20-17%20-70%20-15%20-128%20-90%0A-34%20-45%20-68%20-108%20-108%20-204%20-53%20-126%20-61%20-140%20-91%20-153%20-55%20-23%20-112%205%20-181%0A89%20-46%2056%20-58%2080%20-72%20139%20-9%2039%20-23%2077%20-31%2085%20-8%208%20-78%2032%20-156%2054%20-122%2034%0A-161%2041%20-275%2046%20-207%208%20-249%2026%20-262%20106%20-12%2085%20-16%2093%20-48%20115%20-39%2027%20-156%0A51%20-218%2045%20-61%20-5%20-80%206%20-134%2080%20-43%2059%20-44%2062%20-29%2089%2015%2029%2040%2035%20134%2032%2058%0A-2%20156%2020%20178%2040%2023%2021%2030%2078%2013%20106%20-5%207%20-53%2032%20-108%2055%20-82%2034%20-107%2050%20-147%0A94%20-45%2048%20-48%2055%20-38%2077%208%2017%2020%2025%2036%2025%2044%200%2053%2010%2086%2094%2030%2078%2035%2085%2085%0A115%2052%2031%2053%2033%2044%2064%20-5%2018%20-9%2033%20-9%2034%200%2014%20-68%2073%20-90%2078%20-16%203%20-47%2024%20-69%0A46%20-38%2038%20-42%2040%20-98%2038%20-95%20-3%20-174%2011%20-235%2043%20-71%2038%20-91%2060%20-113%20126%20-9%2028%0A-19%2052%20-22%2052%20-4%200%20-26%20-12%20-51%20-26%20l-44%20-26%20-27%2026%20c-15%2014%20-35%2026%20-44%2026%20-9%0A0%20-25%208%20-35%2018%20-10%2010%20-33%2024%20-52%2032%20-19%207%20-75%2053%20-125%20101%20-49%2048%20-99%2089%0A-110%2091%20-13%202%20-26%2021%20-40%2058%20-20%2053%20-22%2054%20-83%2074%20-73%2023%20-77%2037%20-27%2086%2053%2051%0A47%2087%20-27%20167%20l-38%2043%2016%2037%20c33%2078%2035%2089%2029%20144%20-5%2039%20-2%2073%209%20109%2033%20111%2010%0A151%20-50%2086%20-34%20-37%20-61%20-44%20-107%20-27%20-26%2010%20-99%20131%20-113%20186%20-9%2036%20-79%20153%0A-107%20178%20-13%2012%20-36%2017%20-74%2017%20-59%200%20-88%2021%20-113%2080%20-9%2022%20-22%2032%20-51%2040%20-22%0A5%20-57%2015%20-78%2020%20-44%2012%20-105%2077%20-95%20103%209%2024%20-51%20130%20-99%20174%20-25%2023%20-47%2052%0A-49%2064%20-2%2016%20-14%2025%20-47%2035%20-24%207%20-54%2022%20-66%2034%20-20%2019%20-31%2021%20-72%2015%20-43%20-6%0A-51%20-4%20-72%2019%20-32%2034%20-56%2033%20-98%20-5%20l-36%20-31%20-36%2035%20c-60%2057%20-137%2067%20-193%2023%0A-46%20-35%20-158%20-86%20-188%20-86%20-24%200%20-62%2023%20-160%2098%20-42%2031%20-46%2032%20-139%2032%20-75%20-1%0A-104%20-5%20-133%20-20z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22rgba%2890%2C155%2C212%2C.4%29%22%20stroke-width%3D%2214%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat:no-repeat;background-position:center;background-size:contain; filter:drop-shadow(0 20px 50px rgba(90,155,212,.35)); animation:mapGlow 4.5s ease-in-out infinite; } @keyframes mapGlow{ 0%,100%{filter:drop-shadow(0 20px 50px rgba(90,155,212,.35))} 50%{filter:drop-shadow(0 24px 70px rgba(90,155,212,.55))} } /* (stari inline-svg stilovi nisu vise potrebni) */ .kljuc .bg-label{ font-family:var(--font-disp);font-weight:800;font-size:30px;letter-spacing:2px; fill:#fff;paint-order:stroke;stroke:rgba(47,111,174,.4);stroke-width:1; } /* beli logo — sticky efekat unutar sekcije, JS fade-uje */ .kljuc .ghost-logo{ position:sticky;top:0;height:0;z-index:2;pointer-events:none; display:flex;justify-content:center; } .kljuc .ghost-logo img{ position:absolute;top:80vh;left:50%; transform:translateX(-50%) scale(var(--logoS,1)); width:clamp(70px,9vw,120px); opacity:var(--logoO,0);filter:drop-shadow(0 8px 24px rgba(90,155,212,.5)); transition:opacity .25s; } /* ogromni SEO koji klizi sleva nadesno */ .kljuc .seo-track{ position:absolute;top:50%;left:0;width:100%; transform:translateY(-50%);z-index:1;pointer-events:none;overflow:hidden; } .kljuc .seo-big{ display:block;white-space:nowrap; font-family:var(--font-disp);font-weight:900; font-size:42vw;line-height:.8;letter-spacing:-2vw; color:rgba(90,155,212,.09); transform:translateX(var(--seoX,-30%)); will-change:transform; } .kljuc .s-intro{text-align:center;position:relative;z-index:3} .kljuc .akcija{ display:inline-block;background:var(--sky);color:#fff; font-family:var(--font-disp);font-weight:800;letter-spacing:.16em;font-size:15px; padding:17px 38px;border-radius:var(--radius-pill);text-transform:uppercase; box-shadow:0 14px 40px -8px rgba(90,155,212,.6); animation:badgePulse 2.6s ease-in-out infinite; } @keyframes badgePulse{0%,100%{box-shadow:0 12px 36px -10px rgba(90,155,212,.5)}50%{box-shadow:0 18px 60px -6px rgba(90,155,212,.85)}} .kljuc .s-intro h1{ margin-top:22px;color:var(--ink);font-family:var(--font-disp);font-weight:800; font-size:clamp(46px,8vw,104px);line-height:1.0;letter-spacing:-2px; } .kljuc .s-intro h1 .burn{ background:linear-gradient(90deg,var(--sky-deep),var(--sky),var(--sky-deep)); background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:burnFlow 4s linear infinite; } @keyframes burnFlow{0%{background-position:0% 0}100%{background-position:220% 0}} .kljuc .intro-sub{ margin:18px auto 0;max-width:560px;font-size:19px;line-height:1.5; color:#4a688c;font-weight:500; } .kljuc .scroll-hint{ margin-top:28px;color:var(--sky-deep);font-size:13px;letter-spacing:.24em;text-transform:uppercase;opacity:.8; } .kljuc .scroll-hint .mouse{ display:block;width:26px;height:42px;border:2px solid rgba(90,155,212,.55);border-radius:15px;margin:16px auto 0;position:relative; } .kljuc .scroll-hint .mouse::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:3px;background:var(--sky);transform:translateX(-50%);animation:wheel 1.6s infinite} @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}} /* ============================================================ SCENE 2 — PAKET (kabasto) ============================================================ */ .kljuc .panel{ width:min(760px,94%);position:relative; background:linear-gradient(180deg,#ffffff 0%,#f6faff 100%); border:1px solid rgba(90,155,212,.22); border-radius:var(--radius-card);padding:54px 52px; box-shadow:0 40px 90px -36px rgba(90,155,212,.5),0 1px 0 #fff inset; transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s; } .kljuc .panel:hover{transform:translateY(-4px);box-shadow:0 50px 110px -34px rgba(90,155,212,.62),0 1px 0 #fff inset} /* tanka gradijent linija na vrhu kartice */ .kljuc .panel::before{ content:"";position:absolute;top:0;left:34px;right:34px;height:3px;border-radius:3px; background:linear-gradient(90deg,transparent,var(--sky),var(--sky-deep),transparent); } .kljuc .panel h2{ font-family:var(--font-disp);font-weight:800;font-size:clamp(28px,4vw,44px);color:var(--ink); margin-bottom:26px;letter-spacing:-1px;display:flex;align-items:center;gap:14px; } .kljuc .panel h2::before{ content:"";width:6px;height:1.1em;border-radius:4px;flex:none; background:linear-gradient(180deg,var(--sky),var(--sky-deep)); box-shadow:0 4px 14px -2px rgba(90,155,212,.7); } .kljuc .feat{ display:flex;gap:18px;align-items:center;padding:18px 0; border-bottom:1px solid rgba(90,155,212,.14);font-weight:600;color:#33455e;line-height:1.5;font-size:17.5px; opacity:0;transform:translateX(-44px); transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),background .25s; border-radius:12px;padding-left:8px;padding-right:8px; } .kljuc .feat:hover{background:rgba(90,155,212,.06)} .kljuc .feat.in{opacity:1;transform:none} .kljuc .feat:last-child{border-bottom:0} .kljuc .feat .ck{ flex:none;width:36px;height:36px;border-radius:50%; background:linear-gradient(150deg,var(--sky),var(--sky-deep));color:#fff; display:grid;place-items:center;font-size:16px;font-weight:900; box-shadow:0 6px 16px -4px rgba(90,155,212,.85),0 0 0 0 rgba(90,155,212,.4); transform:scale(0);transition:transform .42s cubic-bezier(.34,1.56,.64,1) .15s; } .kljuc .feat.in .ck{transform:scale(1)} .kljuc .feat:hover .ck{box-shadow:0 6px 16px -4px rgba(90,155,212,.85),0 0 0 6px rgba(90,155,212,.18)} /* ============================================================ MARQUEE — stilizovan naslov + 5 nivoa preko Srbije ============================================================ */ .kljuc .marquee-scene{overflow:hidden;min-height:160vh} .kljuc .marquee-scene .pin-inner{flex-direction:column;gap:30px} /* stilizovan naslov gore — u zaobljenom boxu, glavni element */ .kljuc .marquee-head{ display:inline-flex;align-items:center;justify-content:center;z-index:5; background:#fff;border:1.5px solid rgba(90,155,212,.3); border-radius:var(--radius-pill); padding:18px 40px; box-shadow:0 20px 50px -18px rgba(90,155,212,.6),0 0 0 6px rgba(90,155,212,.06); } .kljuc .marquee-head .mh-text{ font-family:var(--font-disp);font-weight:800; font-size:clamp(17px,2.6vw,28px);letter-spacing:.01em;text-align:center;line-height:1.15; background:linear-gradient(90deg,var(--sky-deep),var(--sky)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* 5 nivoa — naslagani, skroluju preko Srbije */ .kljuc .levels{ position:relative;z-index:3;display:flex;flex-direction:column;align-items:center; gap:clamp(6px,1.4vh,18px);width:100%;text-align:center; } .kljuc .levels .lvl{ font-family:var(--font-disp);font-weight:800;letter-spacing:-1px;line-height:1.25; padding:.12em .1em .22em; color:#ffffff; text-shadow: 0 0 1px rgba(47,111,174,.9), 0 2px 0 rgba(47,111,174,.55), 0 16px 40px rgba(47,111,174,.95), 0 6px 12px rgba(20,40,70,.6), 0 2px 4px rgba(20,40,70,.5); opacity:.4;transform:scale(.9); transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1),text-shadow .35s,color .35s; will-change:transform,opacity; } /* veličine rastu od najmanjeg (opština) ka najvećem (Balkan) */ .kljuc .levels .lvl[data-i="0"]{font-size:clamp(22px,4vw,46px)} .kljuc .levels .lvl[data-i="1"]{font-size:clamp(28px,5.5vw,62px)} .kljuc .levels .lvl[data-i="2"]{font-size:clamp(34px,7vw,82px)} .kljuc .levels .lvl[data-i="3"]{font-size:clamp(42px,9vw,108px)} .kljuc .levels .lvl[data-i="4"]{font-size:clamp(50px,11vw,140px)} /* aktivni nivo se "upali" */ .kljuc .levels .lvl.on{ opacity:1;transform:scale(1.04);color:#ffffff; text-shadow: 0 0 1px rgba(47,111,174,1), 0 2px 0 rgba(47,111,174,.7), 0 28px 70px rgba(47,111,174,1), 0 10px 20px rgba(20,40,70,.8), 0 3px 6px rgba(20,40,70,.6); } /* ============================================================ SCENE 3 — SEO PANEL (kabasto, plavo) ============================================================ */ .kljuc .panel-dark{ width:min(1100px,94%);position:relative;overflow:hidden; background:linear-gradient(180deg,#16335a 0%,#2f6fae 55%,#5a86b8 100%); border-radius:var(--radius-card);padding:56px 56px;color:#fff; box-shadow:0 0 80px -6px rgba(90,155,212,.55),0 50px 110px -34px rgba(20,40,70,.55),0 1px 0 rgba(255,255,255,.2) inset; border:1px solid rgba(255,255,255,.16); } /* suptilni dot-grid u pozadini panela */ .kljuc .panel-dark::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.2px); background-size:22px 22px; -webkit-mask-image:radial-gradient(120% 90% at 80% 10%,#000,transparent 70%); mask-image:radial-gradient(120% 90% at 80% 10%,#000,transparent 70%); } .kljuc .panel-dark .stamp{ position:absolute;top:18px;right:38px;font-family:var(--font-disp);font-weight:900; font-size:clamp(90px,12vw,150px);color:rgba(255,255,255,.13);letter-spacing:-6px; line-height:1;pointer-events:none;user-select:none; } .kljuc .tag{ display:inline-block;background:#fff;color:var(--sky-deep); font-family:var(--font-disp);font-weight:800;font-size:13.5px;letter-spacing:.1em; padding:12px 24px;border-radius:var(--radius-pill);margin-bottom:28px;position:relative;z-index:2; } .kljuc .panel-dark h2{font-family:var(--font-disp);font-weight:800;font-size:clamp(28px,3.6vw,40px);line-height:1.18;margin-bottom:28px;position:relative;z-index:2;letter-spacing:-.5px;color:#fff !important} .kljuc .panel-dark p{font-size:18px;line-height:1.66;color:#fff !important;margin-bottom:20px;position:relative;z-index:2} .kljuc .panel-dark p:last-child{margin-bottom:0} .kljuc .hl{ color:#fff;font-weight:800;white-space:nowrap; background:rgba(255,255,255,.18);padding:2px 10px;border-radius:8px; box-shadow:0 0 18px rgba(255,255,255,.25); } .kljuc .panel-dark .ln{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)} .kljuc .panel-dark.in .ln{opacity:1;transform:none} .kljuc .panel-dark.in .ln:nth-child(2){transition-delay:.1s} .kljuc .panel-dark.in .ln:nth-child(3){transition-delay:.22s} .kljuc .panel-dark.in .ln:nth-child(4){transition-delay:.34s} .kljuc .panel-dark.in .ln:nth-child(5){transition-delay:.46s} .kljuc .panel-dark.in .ln:nth-child(6){transition-delay:.58s} /* garancija — istaknut box */ .kljuc .guarantee-box{ margin-top:26px;position:relative;overflow:hidden;z-index:2; display:flex;align-items:center;gap:18px; background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.12)); border:1.5px solid rgba(255,255,255,.45); border-radius:20px;padding:24px 28px; box-shadow:0 14px 40px -16px rgba(0,0,0,.4),0 0 40px rgba(255,255,255,.12) inset; } .kljuc .guarantee-box .g-shine{ content:"";position:absolute;top:0;left:-60%;width:45%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg);animation:gShine 3.6s ease-in-out infinite; } @keyframes gShine{0%{left:-60%}55%,100%{left:160%}} .kljuc .guarantee-box .g-ico{ flex:none;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--sky-deep); display:grid;place-items:center;font-size:22px;font-weight:900;position:relative;z-index:1; animation:gPulse 2.2s ease-in-out infinite; } .kljuc .guarantee-box .g-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px} .kljuc .guarantee-box .g-text b{font-family:var(--font-disp);font-weight:800;font-size:clamp(17px,2.2vw,22px);color:#fff;line-height:1.2} .kljuc .guarantee-box .g-text small{font-size:14px;color:rgba(255,255,255,.85);font-weight:500} @keyframes gPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}60%{box-shadow:0 0 0 14px rgba(255,255,255,0)}} /* ============================================================ SCENE 4 — CENA (kabasto) ============================================================ */ .kljuc .s-price{text-align:center;width:min(1000px,96%);padding-top:50px;padding-bottom:40px} .kljuc .s-price .lbl{ font-family:var(--font-disp);font-weight:800;font-size:clamp(22px,3vw,32px); color:var(--sky-deep);margin-bottom:10px; } .kljuc .s-price .lbl b{color:var(--ink)} .kljuc .amount{ font-family:var(--font-disp);font-weight:800;letter-spacing:-3px; font-size:clamp(58px,12vw,168px);line-height:.9;white-space:nowrap; background:linear-gradient(110deg,var(--sky-deep) 0%,var(--sky) 30%,#9fcdf0 50%,var(--sky) 70%,var(--sky-deep) 100%); background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 50px rgba(90,155,212,.5)); transition:filter .3s;animation:amountShine 5s linear infinite; } @keyframes amountShine{0%{background-position:0% 0}100%{background-position:220% 0}} .kljuc .amount.pop{animation:pricePop .7s cubic-bezier(.34,1.56,.64,1),amountShine 5s linear infinite} @keyframes pricePop{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:scale(1)}} .kljuc .amount .rsd{font-size:.34em;-webkit-text-fill-color:var(--ink);margin-left:.15em;letter-spacing:0;white-space:nowrap} .kljuc .s-price .rate{color:var(--sky-deep);font-size:17px;margin-top:12px;opacity:.9} .kljuc .perks{display:flex;flex-direction:column;gap:14px;max-width:600px;margin:42px auto 0} .kljuc .perk{ background:linear-gradient(180deg,#fff,#f6faff);border:1px solid rgba(90,155,212,.2);border-radius:18px;padding:20px 26px; font-family:var(--font-disp);font-weight:700;color:var(--sky-deep);font-size:17px; display:flex;gap:14px;align-items:center;text-align:left; opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .3s; box-shadow:0 16px 36px -22px rgba(90,155,212,.6); } .kljuc .perk:hover{box-shadow:0 22px 44px -20px rgba(90,155,212,.75);transform:translateY(-2px)} .kljuc .perk.in{opacity:1;transform:none} .kljuc .perk.in:hover{transform:translateY(-2px)} .kljuc .perk:nth-child(2){transition-delay:.12s} .kljuc .perk:nth-child(3){transition-delay:.24s} .kljuc .perk .ck{flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(150deg,var(--sky),var(--sky-deep));color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px;box-shadow:0 4px 12px -3px rgba(90,155,212,.8)} .kljuc .cta-final{ margin-top:38px;margin-bottom:40px;position:relative;overflow:hidden; display:inline-flex;align-items:center;gap:14px; background:linear-gradient(150deg,#6fa8da 0%,var(--sky) 45%,var(--sky-deep) 100%); color:#fff;font-family:var(--font-disp);font-weight:800; padding:24px 64px;border-radius:var(--radius-pill);font-size:18px;letter-spacing:.04em; box-shadow:0 18px 50px -10px rgba(90,155,212,.6),0 1px 0 rgba(255,255,255,.4) inset; transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s; opacity:0;transform:translateY(20px); } .kljuc .cta-final.in{opacity:1;transform:none;transition:opacity .6s .4s,transform .6s .4s;animation:ctaIdle 3.2s ease-in-out 1.2s infinite} @keyframes ctaIdle{0%,100%{box-shadow:0 18px 50px -10px rgba(90,155,212,.6),0 1px 0 rgba(255,255,255,.4) inset}50%{box-shadow:0 22px 64px -8px rgba(90,155,212,.85),0 1px 0 rgba(255,255,255,.5) inset}} .kljuc .cta-final .cta-txt{position:relative;z-index:2;text-decoration:none} .kljuc .cta-final{text-decoration:none} .kljuc .cta-final .cta-arrow{position:relative;z-index:2;font-size:22px;transition:transform .3s} /* shine sweep */ .kljuc .cta-final::before{ content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;z-index:1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg);transition:left .6s ease; } .kljuc .cta-final:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 28px 70px -10px rgba(90,155,212,.9);animation:none} .kljuc .cta-final:hover::before{left:140%} .kljuc .cta-final:hover .cta-arrow{transform:translateX(6px)} .kljuc .cta-final:active{transform:translateY(-1px) scale(1.0)} .kljuc .cta-final:focus-visible{outline:3px solid var(--sky-deep);outline-offset:4px} /* responsive */ @media(max-width:680px){ .kljuc .wrap{padding:0 18px} .kljuc .panel, .kljuc .panel-dark{padding:40px 26px} .kljuc .scene{padding:60px 0} .kljuc .seo-big{font-size:64vw} /* mapa veca ~50% na mobilnom */ .kljuc .serbia{width:min(96vw,560px)} .kljuc .feat{font-size:16px;gap:14px} /* nivoi (Tvoja opstina ... Balkan) veci ~50% na mobilnom */ .kljuc .levels .lvl[data-i="0"]{font-size:34px} .kljuc .levels .lvl[data-i="1"]{font-size:44px} .kljuc .levels .lvl[data-i="2"]{font-size:54px} .kljuc .levels .lvl[data-i="3"]{font-size:64px} .kljuc .levels .lvl[data-i="4"]{font-size:74px} } @media(prefers-reduced-motion:reduce){ .kljuc *{animation:none!important;transition:none!important} .kljuc .feat, .kljuc .perk, .kljuc .panel-dark .ln, .kljuc .cta-final{opacity:1!important;transform:none!important} .kljuc .pin-inner{position:relative;height:auto} .kljuc .scene{min-height:auto} .kljuc .serbia{opacity:.4!important} .kljuc .ghost-logo img{opacity:.4!important} }