/* =========================================================
   AUTOŠKOLA SEMAFOR — GLOBALNI STILOVI
   Učitava se na svakoj stranici.
   ========================================================= */

:root {
  --navy-950: #040b16;
  --navy-900: #081322;
  --navy-800: #0e1a2b;
  --gold-500: #c9a14a;
  --gold-400: #e0bc68;
  --gold-300: #f2d98d;
  --white: #ffffff;
  --white-soft: rgba(255, 255, 255, 0.78);
  --text-soft: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.52);
  --line: rgba(201, 161, 74, 0.55);
  --container: 1480px;
  --header-height: 116px;
  --transition: 280ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--white);
  background: var(--navy-950);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: min(calc(100% - 96px), var(--container));
  margin-inline: auto;
}


/* Sprečava pomjeranje stranice dok je mobilni meni otvoren. */
body.menu-open,
body.modal-open {
  overflow: hidden;
}

body.menu-open {
  touch-action: none;
}




/* =========================================================
   MODAL KOMPONENTA
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 7, 14, 0.82);
  backdrop-filter: blur(10px);
}

.modal__dialog {
  position: relative;
  z-index: 2;
  width: min(1050px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  border: 1px solid rgba(201, 161, 74, 0.42);
  border-radius: 18px;
  background: linear-gradient(180deg, #06101c, #030a13);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(20px) scale(0.985);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal.is-open .modal__dialog { transform: none; }

.modal__image {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

.modal__content { padding: clamp(28px, 3vw, 42px); }

.modal__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal__label,
.modal__counter {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(201, 161, 74, 0.26);
  border-radius: 999px;
  color: var(--gold-300);
  background: rgba(201, 161, 74, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.modal__counter[hidden],
.modal__price[hidden],
.modal__nav-wrap[hidden] { display: none; }

.modal__content h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.modal__price {
  margin: 14px 0 18px;
  color: var(--gold-300);
  font-size: 1.1rem;
  font-weight: 800;
}

.modal__text {
  color: var(--text-soft);
  line-height: 1.75;
}

.modal__text p:first-child { margin-top: 0; }
.modal__text ul { margin: 18px 0 0; padding-left: 20px; }
.modal__text li { margin-bottom: 8px; }

.modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: 999px;
  color: #06101d;
  background: linear-gradient(180deg, #e8c970, #c9a14a);
  font-weight: 800;
}

.modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--white);
  border: 1px solid rgba(201, 161, 74, 0.42);
  border-radius: 50%;
  background: rgba(5, 14, 26, 0.82);
  cursor: pointer;
}

.modal__nav-wrap {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 76px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.modal__nav {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--gold-300);
  border: 1px solid rgba(201, 161, 74, 0.32);
  border-radius: 50%;
  background: rgba(5, 14, 26, 0.8);
  cursor: pointer;
}

/* =========================================================
   HEADER I NAVIGACIJA
   ========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;

  width: 100%;
  height: var(--header-height);

  border-bottom: 1px solid rgba(201, 161, 74, 0.34);
  background: rgba(4, 11, 22, 0.08);

  transition:
    height var(--transition),
    background-color var(--transition),
    backdrop-filter var(--transition),
    box-shadow var(--transition);
}

.site-header::after {
  content: "";
  position: absolute;
  right: 5.5%;
  bottom: -2px;

  width: 92px;
  height: 3px;

  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-400)
  );

  box-shadow: 0 0 18px rgba(224, 188, 104, 0.45);
}

.site-header.is-scrolled {
  height: 88px;

  background: rgba(4, 11, 22, 0.9);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.site-header__inner {
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 42px;
}

.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.brand__logo {
  width: clamp(170px, 13vw, 220px);
  height: auto;
  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 54px);
}

.main-nav a {
  position: relative;
  padding: 18px 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color var(--transition);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--gold-300);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(4, 11, 22, 0.5);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 5px auto;
  background: var(--white);
  transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle.is-active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* =========================================================
   GLOBALNA DUGMAD
   ========================================================= */

.button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.98rem;
  font-weight: 600;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button:hover svg,
.button:focus-visible svg {
  transform: translateX(4px);
}

.button--primary {
  min-width: 230px;
  color: #101010;
  background: linear-gradient(135deg, #f1d383 0%, #c99e40 52%, #e6c56e 100%);
  box-shadow: 0 14px 36px rgba(201, 161, 74, 0.22);
}

.button--primary:hover,
.button--primary:focus-visible {
  box-shadow: 0 16px 42px rgba(201, 161, 74, 0.35);
}

.button--secondary {
  min-width: 230px;
  color: var(--gold-300);
  border-color: rgba(201, 161, 74, 0.8);
  background: rgba(5, 14, 28, 0.44);
  backdrop-filter: blur(10px);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  color: var(--navy-950);
  background: var(--gold-400);
  border-color: var(--gold-400);
}


/* =========================================================
   GLOBALNE REVEAL ANIMACIJE
   Aktiviraju se klasom .js-reveal iz main.js fajla.
   ========================================================= */

.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 720ms ease var(--reveal-delay, var(--delay, 0ms)),
    transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1)
      var(--reveal-delay, var(--delay, 0ms));
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   GLOBALNI RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
  :root {
    --header-height: 100px;
  }

  .container {
    width: min(calc(100% - 56px), var(--container));
  }
}

@media (max-width: 980px) {
  .menu-toggle {
    position: relative;
    z-index: 30;
    display: block;
  }

  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 25;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding:
      max(100px, env(safe-area-inset-top))
      20px
      max(40px, env(safe-area-inset-bottom));

    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    background: rgba(3, 9, 18, 0.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);

    transition:
      opacity var(--transition),
      visibility var(--transition),
      transform var(--transition);
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .main-nav a {
    padding: 16px 30px;
    font-size: 1rem;
  }

  /*
     Mobilni browseri mogu tretirati fixed element unutar parenta sa
     backdrop-filterom kao da je vezan za taj parent. Pošto je navigacija
     unutar fixed headera, filter uklanjamo samo dok je meni otvoren kako bi
     fullscreen meni uvijek ostao vezan za viewport, bez obzira na scroll.
  */
  body.menu-open .site-header,
  body.menu-open .site-header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 700px) {
  :root {
    --header-height: 88px;
  }

  .container {
    width: min(calc(100% - 34px), var(--container));
  }

  .brand__logo {
    width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */

.ns-footer {
  position: relative;
  overflow: hidden;

  color: #ffffff;

  border-top: 1px solid rgba(201, 161, 74, 0.42);

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(201, 161, 74, 0.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #06101e 0%,
      #020812 100%
    );

  isolation: isolate;
}

.ns-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  opacity: 0.35;

  background-image:
    linear-gradient(
      rgba(201, 161, 74, 0.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(201, 161, 74, 0.022) 1px,
      transparent 1px
    );

  background-size: 64px 64px;

  mask-image: linear-gradient(
    to bottom,
    #000,
    transparent 85%
  );

  pointer-events: none;
}

.ns-footer__glow {
  position: absolute;
  z-index: -1;

  top: -240px;
  left: -160px;

  width: 600px;
  height: 500px;

  border-radius: 50%;

  background: rgba(201, 161, 74, 0.08);
  filter: blur(120px);

  pointer-events: none;
}

/* Glavni sadržaj */

.ns-footer__main {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.35fr)
    minmax(150px, 0.72fr)
    minmax(260px, 1fr)
    minmax(210px, 0.8fr);

  gap: clamp(35px, 5vw, 78px);

  padding:
    clamp(70px, 7vw, 110px)
    0
    clamp(55px, 6vw, 85px);
}

/* Brand */

.ns-footer__logo {
  display: inline-block;
  width: min(215px, 100%);
}

.ns-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.ns-footer__quote {
  margin: 30px 0 0;

  color: #ffffff;

  font-family: "Inter", sans-serif;
  font-size: clamp(1.55rem, 2vw, 2.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
}

.ns-footer__description {
  max-width: 390px;

  margin: 20px 0 0;

  color: rgba(255, 255, 255, 0.57);

  font-size: 0.9rem;
  line-height: 1.7;
}

/* Naslovi kolona */

.ns-footer__column h3 {
  position: relative;

  margin: 7px 0 27px;
  padding-bottom: 13px;

  color: #ffffff;

  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ns-footer__column h3::after {
  content: "";
  position: absolute;

  bottom: 0;
  left: 0;

  width: 37px;
  height: 1px;

  background: #c9a14a;
}

/* Brzi linkovi */

.ns-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 13px;
}

.ns-footer__links a {
  position: relative;

  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;

  font-size: 0.9rem;

  transition:
    color 300ms ease,
    transform 300ms ease;
}

.ns-footer__links a::before {
  content: "";

  position: absolute;

  top: 50%;
  left: -15px;

  width: 0;
  height: 1px;

  background: #c9a14a;

  transform: translateY(-50%);

  transition: width 300ms ease;
}

.ns-footer__links a:hover {
  color: #c9a14a;
  transform: translateX(15px);
}

.ns-footer__links a:hover::before {
  width: 9px;
}

/* Kontakt */

.ns-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 16px;
}

.ns-footer__contact h3 {
  width: 100%;
  margin-bottom: 11px;
}

.ns-footer__contact a,
.ns-footer__contact-item {
  display: flex;
  align-items: center;

  gap: 13px;

  color: #ffffff;
  text-decoration: none;
}

.ns-footer__contact > a {
  transition:
    color 300ms ease,
    transform 300ms ease;
}

.ns-footer__contact > a:hover {
  color: #c9a14a;
  transform: translateX(4px);
}

.ns-footer__contact a > span,
.ns-footer__contact-item > span {
  flex: 0 0 auto;

  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  color: #c9a14a;

  border: 1px solid rgba(201, 161, 74, 0.38);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.025);
}

.ns-footer__contact i {
  font-size: 0.95rem;
  line-height: 1;
}

.ns-footer__contact a div,
.ns-footer__contact-item div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}

.ns-footer__contact small {
  color: rgba(255, 255, 255, 0.42);

  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ns-footer__contact strong {
  color: inherit;

  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Društvene mreže */

.ns-footer__social-text {
  max-width: 230px;

  margin: 0 0 22px;

  color: rgba(255, 255, 255, 0.56);

  font-size: 0.88rem;
  line-height: 1.6;
}

.ns-footer__socials {
  display: flex;
  align-items: center;

  gap: 11px;
}

.ns-footer__socials a {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  color: #c9a14a;
  text-decoration: none;

  border: 1px solid rgba(201, 161, 74, 0.58);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.025);

  transition:
    color 300ms ease,
    background-color 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease,
    transform 300ms ease;
}

.ns-footer__socials i {
  font-size: 1.05rem;
  line-height: 1;
}

.ns-footer__socials a:hover {
  color: #06101e;

  border-color: #c9a14a;
  background: #c9a14a;

  box-shadow:
    0 0 25px rgba(201, 161, 74, 0.22);

  transform: translateY(-4px);
}

/* CTA u footeru */

.ns-footer__cta {
  width: fit-content;

  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-top: 25px;
  padding: 12px 19px;

  color: #c9a14a;
  text-decoration: none;

  border: 1px solid rgba(201, 161, 74, 0.68);
  border-radius: 6px;

  background: rgba(201, 161, 74, 0.035);

  font-size: 0.84rem;
  font-weight: 700;

  transition:
    color 300ms ease,
    background-color 300ms ease,
    transform 300ms ease;
}

.ns-footer__cta i {
  transition: transform 300ms ease;
}

.ns-footer__cta:hover {
  color: #06101e;
  background: #c9a14a;

  transform: translateY(-3px);
}

.ns-footer__cta:hover i {
  transform: translateX(4px);
}

/* Donja traka */

.ns-footer__bottom {
  min-height: 78px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  gap: 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.4);

  font-size: 0.76rem;
}

.ns-footer__bottom p {
  margin: 0;
}

.ns-footer__legal {
  display: flex;
  align-items: center;

  gap: 16px;
}

.ns-footer__legal span {
  width: 1px;
  height: 13px;

  background: rgba(201, 161, 74, 0.45);
}

.ns-footer__legal a,
.ns-footer__credit a {
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;

  transition: color 300ms ease;
}

.ns-footer__legal a:hover,
.ns-footer__credit a:hover {
  color: #c9a14a;
}

.ns-footer__credit {
  text-align: right;
}

/* Responsive */

@media (max-width: 1100px) {
  .ns-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ns-footer__main {
    grid-template-columns: 1fr;

    gap: 46px;

    padding-top: 65px;
    padding-bottom: 55px;
  }

  .ns-footer__brand,
  .ns-footer__column {
    max-width: 450px;
  }

  .ns-footer__bottom {
    grid-template-columns: 1fr;

    gap: 16px;

    padding: 25px 0;

    text-align: left;
  }

  .ns-footer__legal {
    flex-wrap: wrap;
  }

  .ns-footer__credit {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ns-footer__links a,
  .ns-footer__socials a,
  .ns-footer__cta,
  .ns-footer__cta i,
  .ns-footer__contact > a {
    transition: none;
  }
}



@media (max-width: 980px) {
  .modal__dialog {
    grid-template-columns: 1fr;
    max-height: 90vh;
  }

  .modal__image { max-height: 280px; }
}




@media (max-width: 760px) {
 

  .modal { padding: 14px; }
}