@charset "UTF-8";
/* =============================================================================
   Veb Centar — popup
   Vrijednosti su preuzete 1:1 iz Figma fajla (frame 1200×700).
   Struktura:  1. Fontovi  2. Reset  3. Demo stranica  4. Tokeni
               5. Dialog + backdrop  6. Pozadina i glow  7. Sadržaj
               8. Forma  9. Zatvaranje  10. Responsive  11. A11y / motion
   ========================================================================== */

/* 1. FONTOVI ---------------------------------------------------------------
   Fixel nije besplatno hostovan na CDN-u — ubaci .woff2 fajlove u
   assets/fonts/ i deklaracije ispod počinju da rade. Do tada se koristi
   fallback stack koji je vizuelno najbliži (SF Pro / Segoe / Inter).        */

@font-face {
  font-family: "Fixel Display";
  src: local("FixelDisplay-Bold"), url("../fonts/FixelDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixel Text";
  src: local("FixelText-Regular"), url("../fonts/FixelText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixel Text";
  src: local("FixelText-Medium"), url("../fonts/FixelText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixel Text";
  src: local("FixelText-SemiBold"), url("../fonts/FixelText-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 2. RESET ---------------------------------------------------------------- */


.popup button { font: inherit; color: inherit; }

/* zaključavanje skrola dok je popup otvoren */
html.is-popup-open,
html.is-popup-open body { overflow: hidden; }

.popup .u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 4. TOKENI --------------------------------------------------------------- */

:root {
  --font-display: "Fixel Display", "Fixel Text", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Fixel Text", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* boje iz Figme */
  --c-bg:            #0132C4;   /* osnovna plava iz pozadinske fotografije */
  --c-navy:          #002095;   /* Ellipse 164 */
  --c-accent:        #8A5CF6;   /* Ellipse 162 / 163, glow dugmeta */
  --c-btn:           #B973FC;   /* Rectangle 379 */
  --c-stroke-from:   #288BEE;   /* gradient border inputa, stop 0 */
  --c-stroke-to:     #8A5CF6;   /* gradient border inputa, stop 1 */
  --c-field-bg:      rgb(17 17 17 / .10);
  --c-placeholder:   rgb(255 255 255 / .80);
  --c-rule:          rgb(255 255 255 / .10);

  /* geometrija */
  --radius-card:  32px;
  --radius-pill:  500px;
  --gutter:       24px;   /* razmak kartice od ivice ekrana */
  --pad:          72px;   /* unutrašnji padding kartice */
  --col:          434px;  /* širina kolone sa tekstom */
  --gap:          24px;   /* razmak između blokova */
  --gap-form:     18px;   /* razmak input ↔ dugme */
  --control-h:    56px;   /* visina inputa i dugmeta */

  /* tipografija */
  --fs-title:  48px;  --lh-title:  56px;  --ls-title: -1px;
  --fs-lead:   20px;  --lh-lead:   26px;
  --fs-body:   14px;  --lh-body:   24px;
  --fs-ui:     18px;  --lh-ui:     22px;
}

/* 5. DIALOG + BACKDROP ---------------------------------------------------- */

.popup {
  width: min(1200px, calc(100vw - var(--gutter) * 2));
  /* 700px je visina iz Figme; fit-content + min-height sprječava suvišan
     skrol kada se metrike fonta razlikuju za koji piksel.
     Mora biti fit-content (a ne auto) — modalni <dialog> se inače razvuče
     do max-height. */
  height: fit-content;
  min-height: min(700px, calc(100dvh - var(--gutter) * 2));
  max-width: none;
  max-height: calc(100dvh - var(--gutter) * 2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background-color: var(--c-bg);
  color: #fff;
  font-family: var(--font-text);
}

.popup::backdrop {
  background: rgb(3 12 48 / .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ulazna animacija */
.popup[open] { animation: popup-in .34s cubic-bezier(.2, .8, .25, 1) both; }
.popup[open]::backdrop { animation: fade-in .34s ease both; }

@keyframes popup-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 6. POZADINA I GLOW ------------------------------------------------------ */

.popup .popup__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/popup-bg.jpg");
  background-image: image-set(url("../images/popup-bg.webp") type("image/webp"),
                              url("../images/popup-bg.jpg")  type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

.popup .popup__glows {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.popup .popup__glow {
  position: absolute;
  border-radius: 50%;
  /* Figma layer blur R  ≈  CSS blur(R / 2) */
  filter: blur(82px);
}

/* Ellipse 162 — 274×274 @ (-120, 528), #8A5CF6 70 % */
.popup .popup__glow--purple-bottom {
  width: 274px; height: 274px;
  left: -120px; top: 528px;
  background: var(--c-accent);
  opacity: .7;
}
/* Ellipse 164 — 274×274 @ (-136, 141), #002095 */
.popup .popup__glow--navy {
  width: 274px; height: 274px;
  left: -136px; top: 141px;
  background: var(--c-navy);
}
/* Ellipse 163 — 120×333 @ (526, -92), #8A5CF6 */
.popup .popup__glow--purple-top {
  width: 120px; height: 333px;
  left: 526px; top: -92px;
  background: var(--c-accent);
  filter: blur(80px);
}

/* 7. SADRŽAJ -------------------------------------------------------------- */

.popup .popup__content {
  position: relative;
  z-index: 2;
  padding: var(--pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / .28) transparent;
}
.popup .popup__content::-webkit-scrollbar { width: 6px; }
.popup .popup__content::-webkit-scrollbar-track { background: transparent; }
.popup .popup__content::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / .28);
  border-radius: 3px;
}

.popup .popup__inner {
  display: flex;
  flex-direction: column;
  align-items: center;      /* stackCounterAlignItems: CENTER */
  gap: var(--gap);
  width: var(--col);
  max-width: 100%;
}

.popup .popup__inner > * { width: 100%; margin: 0; }

/* naslov — ispunjen fotografijom neba (image fill iz Figme) */
.popup .popup__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: #DCEBFF;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .popup .popup__title {
    background-image: url("../images/headline-sky.jpg");
    background-image: image-set(url("../images/headline-sky.webp") type("image/webp"),
                                url("../images/headline-sky.jpg")  type("image/jpeg"));
    /* Figma image fill: STRETCH, scaleY 0.459, offsetY 0.316  →  vidljivi
       pojas neba je 31.6 %–77.5 % visine slike                              */
    background-size: 100% 217.9%;
    background-position: 0 58.4%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.popup .popup__lead {
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.popup .popup__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.popup .popup__body p { margin: 0; }
/* prazan red između pasusa, kao u Figmi (1 × line-height) */
.popup .popup__body p + p { margin-top: var(--lh-body); }
.popup .popup__body .is-medium { font-weight: 500; }

.popup .popup__rule {
  height: 1px;
  border: 0;
  background: var(--c-rule);
}

.popup .popup__note {
  width: auto;                 /* centrirano, širina po sadržaju */
  align-self: center;
  text-align: center;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  text-wrap: balance;
}
.popup .popup__note a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0);
  transition: border-color .18s ease;
}
.popup .popup__note a:hover,
.popup .popup__note a:focus-visible { border-bottom-color: currentColor; }

/* 8. FORMA ---------------------------------------------------------------- */

.popup .popup__form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-form);
}

/* --- input sa gradijentnim borderom (Rectangle 378) --- */
.popup .field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--control-h);
  padding-inline: 24px;
  border-radius: var(--radius-pill);
  background: var(--c-field-bg);
  transition: background .18s ease, box-shadow .18s ease;
}

.popup .field__input:-webkit-autofill,
.popup .field__input:-webkit-autofill:hover,
.popup .field__input:-webkit-autofill:focus,
.popup .field__input:-webkit-autofill:active {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 9999s ease-in-out 0s;
    color: #fff !important;
}

/* 1px unutrašnji gradijentni prsten */
.popup .field::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--c-stroke-from), var(--c-stroke-to));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.popup .field__icon {
  flex: 0 0 auto;
  width: 21px;
  height: 17px;
  fill: rgb(255 255 255 / .8);
}

.popup .field__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}
.popup .field__input::placeholder { color: var(--c-placeholder); opacity: 1; }
.popup .field__input:focus { outline: none; }

/* Fokus se vidi kroz samo polje (deblji prsten + halo koji prati pilulu),
   a ne kroz outline — outline bi preko zaobljenog polja iscrtao
   bijeli pravougaonik.                                                    */
.popup .field:focus-within {
  background: rgb(17 17 17 / .18);
  box-shadow: 0 0 0 3px rgb(255 255 255 / .45);
}
.popup .field:focus-within::before { padding: 2px; }

.popup .field.is-invalid::before {
  background: linear-gradient(90deg, #FF7A7A, #FF4D6D);
}

/* --- dugme (Rectangle 379) --- */
.popup .popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding-inline: 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-btn);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 57.4px rgb(138 92 246 / .5);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  width: 100%;
}
.popup .popup-btn:hover {
  background: #C489FD;
  box-shadow: 0 0 64px rgb(138 92 246 / .75);
  transform: translateY(-1px);
}
.popup .popup-btn:active { transform: translateY(0); box-shadow: 0 0 40px rgb(138 92 246 / .5); }
.popup .popup-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.popup .popup__status:empty { display: none; }   /* prazna poruka ne zauzima prostor */

.popup .popup__status {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: rgb(255 255 255 / .85);
}
.popup .popup__status.is-error { color: #FFC2CC; }

/* 9. ZATVARANJE ----------------------------------------------------------- */

.popup .popup__close {
  position: absolute;
  top: 28px;
  right: 38px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.popup .popup__close svg { width: 100%; height: 100%; }
.popup .popup__close path {
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}
.popup .popup__close:hover { background: rgb(255 255 255 / .16); transform: rotate(90deg); }

/* Fokus — jedinstven za sve interaktivne elemente.
   Bez `border-radius` u ovom pravilu: outline sam prati radius elementa,
   pa pilula ostaje pilula.                                                */
.popup .popup :focus-visible,
.popup .demo__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Input je izuzetak — njegov fokus crta `.field:focus-within` (sekcija 8). */
.popup .field:focus-within,
.popup .field__input:focus,
.popup .field__input:focus-visible { outline: none; }

/* 10. RESPONSIVE ---------------------------------------------------------- */

/* --- 10a. Uski desktop / veliki tablet: kartica se sužava, kolona ostaje --- */
@media (max-width: 1200px) and (min-width: 1024px) {
  :root { --pad: 56px; }
  .popup .popup__media { background-position: 78% center; }
}

/* --- 10b. TABLET i niže: vertikalni raspored (slika gore, sadržaj dolje) --- */
@media (max-width: 1023px) {
  :root {
    --gutter: 20px;
    --pad: 48px;
    --gap: 20px;
    --fs-title: clamp(30px, 4.6vw, 42px);
    --lh-title: 1.14;
    --ls-title: -0.5px;
    --fs-lead: 18px;  --lh-lead: 25px;
    --fs-body: 14px;  --lh-body: 23px;
    --fs-ui:   17px;  --lh-ui:   22px;
  }

  .popup .popup {
    display: flex;
    flex-direction: column;
    height: fit-content;
    min-height: 0;
    max-height: calc(100dvh - var(--gutter) * 2);
    border-radius: 28px;
  }

  /* slika postaje traka na vrhu; kadar je zumiran tako da žena sa
     laptopom ostane u centru trake na svakoj širini ekrana */
  .popup .popup__media {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: 190% auto;
    background-position: 92% 62%;
  }

  /* Naslov: na užim ekranima naslov ima druge prelome, pa Figmin isječak
     neba presiječe slova tvrdom ivicom oblaka. Zato se ovdje koristi
     gradijent uzet iz iste fotografije — isti utisak, bez tvrdih ivica.   */
  .popup .popup__title {
    background-image: linear-gradient(100deg,
      #FFFFFF 0%, #D6E8FF 34%, #7FB6F2 66%, #EAF4FF 100%);
    background-size: auto;
    background-position: 0 0;
    text-wrap: balance;
  }
  /* mekan prelaz trake u plavu podlogu */
  .popup .popup__media::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 34%;
    background: linear-gradient(to bottom, rgb(1 50 196 / 0), var(--c-bg));
  }

  .popup .popup__content {
    height: auto;
    flex: 1 1 auto;
    padding: 32px var(--pad) var(--pad);
    display: flex;
    justify-content: center;
    align-items: flex-start;   /* bez ovoga se kolona rasteže na punu visinu */
  }

  .popup .popup__inner { width: 520px; }

  /* glow-ovi se premještaju uz tekstualni dio */
  .popup .popup__glow--purple-bottom { left: -22%; top: auto; bottom: -8%; width: 46%; height: 0; padding-bottom: 46%; }
  .popup .popup__glow--navy          { left: -26%; top: 46%;  width: 46%; height: 0; padding-bottom: 46%; }
  .popup .popup__glow--purple-top    { left: 62%;  top: 24%;  width: 26%; height: 0; padding-bottom: 62%; border-radius: 40%; }

  .popup .popup__close { top: 20px; right: 20px; }
}

/* --- 10c. MOBILNI --- */
@media (max-width: 767px) {
  :root {
    --gutter: 14px;
    --pad: 24px;
    --gap: 16px;
    --gap-form: 14px;
    --control-h: 54px;
    --fs-title: clamp(26px, 7.4vw, 34px);
    --lh-title: 1.16;
    --fs-lead: 17px;  --lh-lead: 24px;
    --fs-body: 14px;  --lh-body: 22px;
    --fs-ui:   16px;  --lh-ui:   21px;
  }

  .popup .popup { border-radius: 22px; }

  /* traka se veže za visinu ekrana da bi CTA ostao vidljiv bez skrola */
  .popup .popup__media {
    aspect-ratio: auto;
    height: clamp(140px, 22dvh, 240px);
  }

  .popup .popup__content { padding: 22px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom)); }
  .popup .popup__inner   { width: 100%; }

  .popup .popup__body p + p { margin-top: 14px; }

  .popup .field { padding-inline: 18px; gap: 10px; }
  .popup .field__icon { width: 19px; height: 15px; }

  /* iOS zumira input ispod 16px — držimo 16px */
  .popup .field__input { font-size: 16px; }

  .popup .popup-btn { padding-inline: 16px; }

  .popup .popup__close {
    top: 12px; right: 12px;
    width: 34px; height: 34px;      /* veća meta za prst */
    background: rgb(3 12 48 / .35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .popup .popup__glow { filter: blur(58px); }
}

/* --- 10d. Vrlo uski ekrani --- */
@media (max-width: 380px) {
  :root { --pad: 18px; --gap: 16px; --fs-lead: 16px; --lh-lead: 23px; }
  .popup .popup__media { aspect-ratio: 3 / 2; }
  .popup .popup__note  { font-size: 15px; }
}

/* --- 10e. Landscape na telefonu (niska visina) ---
   Vodoravna traka bi na 400px visine pojela pola kartice, pa se ovdje
   vraćamo na raspored u dvije kolone — slika desno, kao na desktopu.     */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 1023px) {
  :root {
    --gap: 12px;
    --gap-form: 12px;
    --control-h: 48px;
    --fs-title: clamp(22px, 3.4vw, 30px);
    --fs-lead: 16px; --lh-lead: 22px;
    --fs-ui: 16px;   --lh-ui: 20px;   /* ne ispod 16px — iOS zumira input */
  }

  .popup .popup { flex-direction: row; }

  .popup .popup__media {
    order: 2;
    flex: 0 0 36%;
    width: 36%;
    height: auto;
    align-self: stretch;
    background-size: cover;
    background-position: 74% center;
  }
  /* prelaz je sada vertikalan, uz lijevu ivicu slike */
  .popup .popup__media::after {
    inset: 0 auto 0 -1px;
    width: 28%;
    height: auto;
    background: linear-gradient(to right, var(--c-bg), rgb(1 50 196 / 0));
  }

  .popup .popup__content {
    order: 1;
    flex: 1 1 auto;
    padding: 20px 24px;
    align-items: center;
  }
  .popup .popup__inner { width: 100%; max-width: 460px; }

  .popup .popup__close { top: 12px; right: 12px; }
}

/* 11. A11Y / MOTION ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .popup .popup[open],
  .popup .popup[open]::backdrop { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .popup .popup__close:hover { transform: none; }
}

@media (forced-colors: active) {
  .popup .popup { border: 1px solid CanvasText; }
  .popup .field::before { display: none; }
  .popup .field { border: 1px solid CanvasText; }
  .popup .popup__title { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; }
}