/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fontovi/bricolage-grotesque-1.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fontovi/bricolage-grotesque-2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fontovi/bricolage-grotesque-3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontovi/manrope-4.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontovi/manrope-5.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontovi/manrope-6.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontovi/manrope-7.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontovi/manrope-8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontovi/manrope-9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fallback */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fontovi/ikone.woff2") format("woff2");
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* hover pravila (iz style-hover atributa izvora) */
.lh1:hover { color:#c2560c }
.lh2:hover { color:#c2560c }
.lh3:hover { color:#c2560c }
.lh4:hover { color:#c2560c }
.lh5:hover { color:#c2560c }
.lh6:hover { background:#ea6a0b }
.lh7:hover { background:#ea6a0b }
.lh8:hover { border-color:#fbcfa9; color:#b8530c }
.lh9:hover { box-shadow:0 2px 4px rgba(87,60,34,.06), 0 12px 32px -8px rgba(87,60,34,.14) }
.lh10:hover { box-shadow:0 2px 4px rgba(87,60,34,.06), 0 12px 32px -8px rgba(87,60,34,.14) }
.lh11:hover { box-shadow:0 2px 4px rgba(87,60,34,.06), 0 12px 32px -8px rgba(87,60,34,.14) }
.lh12:hover { box-shadow:0 2px 4px rgba(87,60,34,.06), 0 12px 32px -8px rgba(87,60,34,.14) }
.lh13:hover { box-shadow:0 2px 4px rgba(87,60,34,.06), 0 12px 32px -8px rgba(87,60,34,.14) }
.lh14:hover { box-shadow:0 2px 4px rgba(87,60,34,.06), 0 12px 32px -8px rgba(87,60,34,.14) }
.lh15:hover { box-shadow:0 2px 4px rgba(87,60,34,.06), 0 12px 32px -8px rgba(87,60,34,.14) }
.lh16:hover { box-shadow:0 2px 4px rgba(87,60,34,.06), 0 12px 32px -8px rgba(87,60,34,.14) }
.lh17:hover { background:#44403c; color:#fff }
.lh18:hover { border-color:#fbcfa9; color:#b8530c }
.lh19:hover { background:#ea6a0b; color:#fff }
.lh20:hover { border-color:#fbcfa9; color:#b8530c }
.lh21:hover { border-color:#fbcfa9; color:#b8530c }
.lh22:hover { background:#ea6a0b }
.lh23:hover { color:#fdba74 }
.lh24:hover { color:#fdba74 }
.lh25:hover { color:#fdba74 }
.lh26:hover { color:#fdba74 }
.lh27:hover { color:#fdba74 }
.lh28:hover { color:#fdba74 }
.lh29:hover { color:#fdba74 }
.lh30:hover { color:#fdba74 }
.lh31:hover { color:#fdba74 }


/* ---------- zaglavlje ---------- */
/* Providno na vrhu, sa pozadinom čim se krene skrolovati (ranije reaktivni stil). */
.zaglavlje {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.zaglavlje.skrolovan {
  background: rgba(250,250,249,.85);
  backdrop-filter: blur(12px);
  border-bottom-color: #e7e5e4;
}

/* ---------- tabovi sa ekranima ---------- */
.tab {
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  padding: 10px 16px; border-radius: 11px; cursor: pointer;
  border: 1px solid #e7e5e4; background: #fff; color: #57534e;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tab:hover { border-color: #fbcfa9; color: #b8530c; }
.tab[aria-selected="true"] { border-color: #f97316; background: #fef2e9; color: #b8530c; }

.faq-dugme:hover .faq-znak { background: #fde3ce; }


/* ---------- ponašanje skrola ---------- */
/* Meni koristi #ankere; bez ovoga skok je trenutan. Poštuje reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Sekcije ne smiju završiti ispod ljepljivog zaglavlja (~62px). */
[id] { scroll-margin-top: 80px; }


/* ================================================================
   BURGER MENI
   Ispod 860px horizontalni nav i dugmad iz zaglavlja se sklanjaju,
   a sve (uključujući „Prijava") seli u panel ispod zaglavlja.
   ================================================================ */

.burger {
  display: none;              /* na širokom ekranu ga nema */
  margin-left: auto;
  flex: none;
  width: 46px; height: 46px;
  padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid #e7e5e4;
  border-radius: 13px;
  background: rgba(255,255,255,.75);
  color: #44403c;
  cursor: pointer;
}
.burger:hover { border-color: #fbcfa9; color: #b8530c; }

.burger-crte { display: block; position: relative; width: 20px; height: 14px; }
.burger-crte span {
  position: absolute; left: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: top .18s ease, transform .18s ease, opacity .12s ease;
}
.burger-crte span:nth-child(1) { top: 0; }
.burger-crte span:nth-child(2) { top: 6px; }
.burger-crte span:nth-child(3) { top: 12px; }
/* Otvoreno stanje: tri crte postaju krstić. */
.burger[aria-expanded="true"] .burger-crte span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-crte span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-crte span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobilni-meni {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: #fff;
  border-top: 1px solid #e7e5e4;
  border-bottom: 1px solid #e7e5e4;
  box-shadow: 0 18px 44px -16px rgba(87,60,34,.32);
  padding: 10px 20px 18px;
}
.mobilni-meni[hidden] { display: none; }
/* Sigurnosna kočnica: iznad granice panel se ne prikazuje ni ako je stanje
   u skripti ostalo otvoreno (npr. brzo razvlačenje prozora). */
@media (min-width: 861px) { .mobilni-meni { display: none !important; } }

.mobilni-meni-linkovi { display: grid; gap: 2px; max-width: 1180px; margin: 0 auto; }
.mobilni-meni-linkovi a {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 13px 14px;
  border-radius: 12px;
  font-size: 16px; font-weight: 700; color: #44403c;
  border-bottom: 1px solid #f5f5f4;
}
.mobilni-meni-linkovi a:hover { color: #b8530c; background: #fef8f3; }

/* „Prijava" je izdvojena da se ne izgubi među linkovima. */
.mobilni-meni-linkovi .mm-prijava {
  margin-top: 12px;
  justify-content: center;
  border: 1px solid #e7e5e4;
  border-radius: 13px;
  background: #fff;
  color: #292524;
}
.mobilni-meni-linkovi .mm-prijava .ms { font-size: 20px; color: #f97316; }
.mobilni-meni-linkovi .mm-prijava:hover { border-color: #fbcfa9; color: #b8530c; }
.mobilni-meni-linkovi .mm-cta {
  margin-top: 8px;
  justify-content: center;
  border: 0; border-radius: 13px;
  background: #f97316; color: #fff;
  box-shadow: 0 1px 2px rgba(87,60,34,.05), 0 4px 16px -6px rgba(87,60,34,.08);
}
.mobilni-meni-linkovi .mm-cta:hover { background: #ea6a0b; color: #fff; }

/* Dok je meni otvoren, zaglavlje ne smije ostati providno. */
.zaglavlje.meni-otvoren {
  background: rgba(250,250,249,.96);
  backdrop-filter: blur(12px);
  border-bottom-color: #e7e5e4;
}

@media (prefers-reduced-motion: no-preference) {
  .mobilni-meni { animation: meniUlaz .18s cubic-bezier(.21,.8,.35,1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .burger-crte span { transition: none; }
}
@keyframes meniUlaz {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}


/* ================================================================
   MOBILNI RASPORED
   Sadržaj stranice je pisan inline stilovima (uvoz iz dizajna), pa
   se ovdje gazi sa !important. Nijedno pravilo ne dira širine iznad
   980px, tako da desktop izgled ostaje isti.
   ================================================================ */

/* Ništa ne smije probiti širinu ekrana. Iframe je izuzet namjerno: makete se
   renderuju u punoj širini pa skaliraju transformom, a max-width bi ih vratio
   na širinu okvira i zgnječio raspored unutra. */
img, video, svg { max-width: 100%; }

/* ---------- do 980px: mreže sa 4 kolone idu na 2 ---------- */
@media (max-width: 980px) {
  .mreza-mogucnosti { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mreza-paketi     { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  .mreza-koraci     { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px !important; }
  .mreza-podnozje   { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 32px !important; }
}

/* ---------- do 860px: burger, jednokolonske sekcije, skalirani ekrani ---------- */
@media (max-width: 860px) {
  .nav-glavni, .zaglavlje-akcije { display: none !important; }
  .burger { display: inline-flex; }
  .zaglavlje-traka { gap: 12px !important; padding: 12px 20px !important; }

  .sekcija { padding-left: 20px !important; padding-right: 20px !important; }

  /* „Sveska, Viber grupa i Excel." → strelica → rješenje: jedno ispod drugog. */
  .problem-karta { grid-template-columns: 1fr !important; gap: 14px !important; padding: 22px !important; }
  .problem-karta > span { transform: rotate(90deg); }
  .problem-karta > p:first-child { font-size: 20px !important; }

  /* Red tabova skroluje unutar sebe umjesto da se lomi u tri reda. */
  .tab-traka {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .tab-traka > button { flex: 0 0 auto; }

  /* Ekrani su crtani za desktop; na uskom ekranu se cijeli skaliraju,
     isto kao maketa u herou, umjesto da se raspored zgnječi. Projektovana
     širina 820px je tačno širina okvira na 860px, pa nema skoka na granici. */
  .tab-ekran {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 820 / 520;
    overflow: hidden;
  }
  .tab-ekran iframe {
    position: absolute; top: 0; left: 0;
    width: 820px !important; max-width: none !important; height: 520px !important;
    transform-origin: top left;
    transform: scale(calc(100cqw / 820px));
  }

  /* Ista napomena stoji u uvodu sekcije; preko skalirane makete samo smeta. */
  .napomena-maketa { display: none !important; }

  .tab-telefon-omot { padding: 32px 16px !important; }
  .tab-telefon { width: min(320px, 100%) !important; }

  .mreza-roditelji { grid-template-columns: 1fr !important; gap: 32px !important; }
  .roditelji-telefon { width: min(300px, 100%) !important; }
}

/* ---------- do 640px: telefon ---------- */
@media (max-width: 640px) {
  .sekcija { padding-left: 18px !important; padding-right: 18px !important; }
  .zaglavlje-traka { padding: 11px 18px !important; }
  .mobilni-meni { padding: 10px 18px 16px; }

  /* Vertikalni razmaci: 84px je na telefonu prazan ekran. */
  #zasto, #za-roditelje, #cjenovnik { padding-top: 56px !important; padding-bottom: 56px !important; }
  #mogucnosti { padding-bottom: 56px !important; }
  #platforma .sekcija, #kako .sekcija, #pitanja .sekcija { padding-top: 56px !important; padding-bottom: 56px !important; }
  #pristup { padding-top: 56px !important; padding-bottom: 72px !important; }
  .podnozje { padding-top: 48px !important; padding-bottom: 28px !important; }
  .traka-za { padding-top: 20px !important; padding-bottom: 20px !important; gap: 12px !important; }

  /* Naslovi sekcija: 38px prelazi u tri reda i guta ekran. */
  section h2 { font-size: 27px !important; line-height: 1.18 !important; }
  section > .sekcija > p, #cjenovnik .cjenovnik-zaglavlje p { font-size: 16px !important; }

  .mreza-mogucnosti { grid-template-columns: 1fr !important; }
  .mreza-paketi { grid-template-columns: 1fr !important; }
  .mreza-podnozje { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px !important; }

  /* Koraci: broj lijevo, tekst desno, da četiri koraka ne budu ekran i po. */
  .mreza-koraci { grid-template-columns: 1fr !important; gap: 22px !important; }
  .mreza-koraci > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .mreza-koraci > div > span { grid-row: span 2; }
  .mreza-koraci > div > h3 { margin-top: 7px !important; }
  .mreza-koraci > div > p { margin-top: 6px !important; }

  .cjenovnik-zaglavlje { gap: 16px !important; }
  .enterprise-traka { padding: 18px !important; gap: 12px !important; }

  /* FAQ: desni razmak od 60px je bio zbog širokog ekrana. */
  .faq-dugme { padding: 16px !important; gap: 12px !important; }
  .faq-dugme > span:first-child { font-size: 15.5px !important; }
  .faq-odgovor { padding: 0 16px 18px !important; font-size: 15px !important; }

  .forma-pristup { padding: 20px !important; gap: 16px !important; margin-top: 28px !important; }
  .polje-par { grid-template-columns: 1fr !important; gap: 16px !important; }
  .forma-pristup + p, [data-uslov="poslano"] > div { padding: 26px !important; }
}

/* ---------- do 400px: najuži ekrani (320–375px) ---------- */
@media (max-width: 400px) {
  .sekcija { padding-left: 16px !important; padding-right: 16px !important; }
  .zaglavlje-traka { padding: 10px 16px !important; }
  .mobilni-meni { padding: 8px 16px 14px; }

  section h2 { font-size: 24px !important; }
  .problem-karta > p:first-child { font-size: 18.5px !important; }
  .mreza-podnozje { grid-template-columns: 1fr !important; gap: 24px !important; }
  .tab-telefon-omot { padding: 24px 10px !important; }
  .forma-pristup { padding: 16px !important; }
  .enterprise-traka { padding: 16px !important; }
}