/* =========================================================
   Klijentske tehnologije – Portfolio
   Paleta + layout + responsive (media queries)
   ========================================================= */


/* Scroll progress bar (na vrhu) */
#scrollProgress{
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  width: 0%;
  z-index: 999999;       /* UVEK iznad nav-a */
  pointer-events: none;  /* ne smeta klikovima */

  background: #3fa9f5;
  box-shadow: 0 0 10px rgba(63,169,245,.8);
}

:root{
  --bg: #0B1220;
  --surface: #0F1B2D;
  --surface2: #0B1628;
  --text: #EAF2FF;
  --muted: #94A3B8;
  --accent: #1677FF;
  --border: rgba(255,255,255,.08);
  --shadow: 0 12px 40px rgba(0,0,0,.35);
}

body.light{
  --bg: #F6F8FC;
  --surface: #FFFFFF;
  --surface2: #F0F4FF;
  --text: #0B1220;
  --muted: #475569;
  --accent: #1677FF;
  --border: rgba(2,6,23,.10);
  --shadow: 0 14px 50px rgba(2,6,23,.10);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* 1) jedinstvena pozadina */
  background: var(--bg);

  color: var(--text);
  padding-top: 72px;
}
/* Globalni overlay preko cele stranice (bez preseka po sekcijama) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 600px at 30% 20%, rgba(22,119,255,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(0,255,200,.10), transparent 55%),
    linear-gradient(to bottom, rgba(11,18,32,.92), rgba(11,18,32,.92));
}

/* Light tema – blaži overlay */
body.light::before{
  background:
    radial-gradient(1200px 600px at 30% 20%, rgba(22,119,255,.12), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(0,255,200,.06), transparent 55%),
    linear-gradient(to bottom, rgba(246,248,252,.92), rgba(246,248,252,.92));
}


/* Header */
.site-header{
  background: rgba(11,18,32,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
    position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
body.light .site-header{ background: rgba(246,248,252,.75); }

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 14px 0;
}
.brand{
  color: var(--text);
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.05rem;
}

/* =========================
   Language dropdown switch
   ========================= */
.lang-switch{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 12px; /* razmak od menija */
}

.lang-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 38px;
  padding: 0 12px;

  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);

  cursor: pointer;
  user-select: none;

  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.lang-btn:hover{
  background: rgba(255,255,255,.10);
}

.lang-btn:active{
  transform: scale(.98);
}

.lang-btn img{
  border-radius: 4px;
  display: block;
}

.lang-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  min-width: 180px;
  padding: 8px;

  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15,27,45,.92); /* fallback za dark */
  backdrop-filter: blur(10px);

  box-shadow: 0 22px 70px rgba(0,0,0,.35);

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  transition: opacity .18s ease, transform .18s ease;
  z-index: 99999;
}

/* kad je otvoren */
.lang-switch.is-open .lang-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Light tema */
body.light .lang-btn{
  background: rgba(0,0,0,.03);
}
body.light .lang-btn:hover{
  background: rgba(0,0,0,.06);
}
body.light .lang-menu{
  background: rgba(255,255,255,.92);
}

.lang-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text);

  cursor: pointer;
  text-align: left;
  transition: background .18s ease;
}

.lang-item:hover{
  background: rgba(255,255,255,.08);
}
body.light .lang-item:hover{
  background: rgba(0,0,0,.06);
}


/* Logo umesto teksta */
.brand-logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo img{
  width: 74px;      /* po želji menjaj */
  height: auto;
  display: block;
}
.nav-links{
  list-style:none;
  display:flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}
.nav-links a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 10px;
}
.nav-links a.active,
.nav-links a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
}

/* Mobile toggle */
.nav-toggle{
  display:none;
  width: 44px;
  height: 38px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 12px;
}
.nav-toggle span{
  display:block;
  width: 20px;
  height: 2px;
  background: var(--text);
  margin: 5px auto;
}

/* Hero */
.hero{ padding: 72px 0 30px; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  align-items:center;
  gap: 40px;
}
.badges{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 18px; }
.pill{
  font-size: .78rem;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  color: var(--text);
}
.hero-title{
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.06;
  margin: 0 0 12px;
  font-weight: 900;
}
.hero-subtitle{
  max-width: 60ch;
  color: var(--muted);
  margin: 0 0 22px;
  font-size: 1.05rem;
}
.hero-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-meta{
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: .95rem;
}

/* Avatar */
.avatar-ring{
  width: min(360px, 90%);
  aspect-ratio: 1 / 1;
  margin-left: auto;
  border-radius: 50%;
  padding: 10px;
  background: radial-gradient(circle at 30% 20%, rgba(22,119,255,.60), rgba(22,119,255,.08) 55%, transparent 70%);
  box-shadow: var(--shadow);
}
.avatar{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(22,119,255,.45);
}

/* Section / cards */
.section{ padding: 40px 0 70px; }
.two-col{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}
.cardish{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
}
body.light .cardish{
  background: var(--surface);
}

.cardish h2{ font-weight: 900; margin: 0 0 12px; }
.muted{ color: var(--muted); }

.mini-project{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  margin-bottom: 12px;
}
.mini-ico{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(22,119,255,.16);
  border: 1px solid rgba(22,119,255,.20);
}
.mini-project h3{ margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; }
.link{ color: var(--accent); text-decoration:none; font-weight: 700; }
.link:hover{ text-decoration: underline; }

/* Footer */
.footer{
  padding: 18px 0;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.10);
}
body.light .footer{ background: rgba(255,255,255,.65); }
.footer-link{ color: var(--muted); text-decoration:none; }
.footer-link:hover{ color: var(--text); }

/* Responsive (obavezno: media queries) */
@media (max-width: 992px){
  .hero-grid{ grid-template-columns: 1fr; }
  .avatar-ring{ margin: 0; }
  .two-col{ grid-template-columns: 1fr; }
  .nav-toggle{ display:block; }
  .nav-links{
    position: absolute;
    right: 12px;
    top: 64px;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    width: min(260px, 92vw);
    box-shadow: var(--shadow);
    display:none;
  }
  .nav-links.open{ display:flex; }
}

@media (max-width: 520px){
  .hero{ padding-top: 52px; }
  .hero-actions .btn{ width: 100%; }
}

/* Dugme Light/Dark da bude vidljivo u obe teme */
#themeToggle{
  border-radius: 12px;
  font-weight: 700;
}

/* Light tema - outline light je nevidljiv, pa ga preboji */
body.light #themeToggle{
  color: var(--text) !important;
  border-color: rgba(2,6,23,.18) !important;
  background: rgba(2,6,23,.06) !important;
}

/* Dark tema - zadrži lep izgled */
body:not(.light) #themeToggle{
  color: var(--text) !important;
  border-color: rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.06) !important;
}


/* =======================
   VEŠTINE (Skills)
   ======================= */
.skills-head{
  text-align: center;
  margin-bottom: 18px;
}

.skills-title{
  font-weight: 900;
  margin: 0 0 6px;
}

.skills-subtitle{
  margin: 0;
}

/* Grid */
.skills-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* Kartica */
.skill-card{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 16px 12px;
  cursor: pointer;
  text-align: center;

  display: grid;
  place-items: center;
  gap: 10px;

  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.skill-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

body.light .skill-card{
  background: rgba(2,6,23,.03);
}
body.light .skill-card:hover{
  background: rgba(2,6,23,.06);
  border-color: rgba(2,6,23,.14);
}

/* Ikonica u boji - ali tema je priguši */
.skill-icon{
  width: 44px;
  height: 44px;
  display:block;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

/* DARK tema: bleda sivkasta */
body:not(.light) .skill-icon{
  filter: grayscale(1) saturate(0) brightness(1.15) contrast(.95);
  opacity: .75;
}

/* LIGHT tema: tamnija/prigušena */
body.light .skill-icon{
  filter: grayscale(1) saturate(0) brightness(.55) contrast(1.15);
  opacity: .85;
}

/* Hover: puna boja */
.skill-card:hover .skill-icon{
  filter: none !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}

.skill-name{
  font-weight: 800;
  font-size: .95rem;
  color: var(--text);
}

/* Opis ispod grid-a */
.skills-desc{
  min-height: 38px;     /* da ne skače layout */
  margin-top: 14px;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
}

.skills-desc.show{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 992px){
  .skills-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .skills-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =======================
   Footer – social icons
   ======================= */
.footer-socials{
  display: flex;
  gap: 16px;
}

.footer-socials a{
  color: var(--muted);
  font-size: 1.35rem;
  transition: color .2s ease, transform .15s ease;
}

.footer-socials a:hover{
  color: var(--accent);
  transform: translateY(-2px);
}


/* TIMELINE */
.timeline-section{
  padding: 100px 0;
}

.section-title{
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 900;
  margin-bottom: 10px;
}

.section-subtitle{
  color: var(--muted);
  margin-bottom: 60px;
  max-width: 55ch;
}

.timeline{
  position: relative;
  padding-left: 40px;
}

.timeline::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--accent),
    transparent
  );
}

.timeline-item{
  position: relative;
  margin-bottom: 50px;
}

.timeline-year{
  position: absolute;
  left: -40px;
  top: 0;
  font-weight: 800;
  font-size: .9rem;
  color: var(--muted);
}

.timeline-item::before{
  content: "";
  position: absolute;
  left: -2px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}

.timeline-content{
  padding-left: 30px;
}

.timeline-content h3{
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.timeline-content p{
  color: var(--muted);
  max-width: 60ch;
}

/* AKTIVNA GODINA */
.timeline-item.active::before{
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(0,0,0,.08);
}

/* CTA – BIG + PREMIUM + FLOAT + HOVER EFFECT */
.cta-section{
  padding: 110px 0 120px;
}

/* Glavna kartica */
.cta-box{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 58px 44px;
  border: 1px solid var(--border);

  /* glass + depth */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.04)
  );
  box-shadow:
    0 30px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);

  /* FLOAT animacija (dok ne hoveruješ) */
  animation: ctaFloat 4.8s ease-in-out infinite;
  will-change: transform;
  transform: translate3d(0,0,0);

  /* glatki prelazi */
  transition: box-shadow .22s ease, filter .22s ease;
}

/* Pauza animacije na hover + "premium lift" */
.cta-box:hover{
  animation-play-state: paused; /* staje float */
  filter: brightness(1.03);
  box-shadow:
    0 40px 100px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Dodajemo scale/lift bez konflikta preko pseudo elementa */
.cta-box::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  /* služi samo da nosi transform */
  transform: scale(1);
  transition: transform .22s ease;
}

.cta-box:hover::after{
  transform: scale(1.01);
}

/* Keyframes za lebdenje */
@keyframes ctaFloat{
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

/* Glow blob iza */
.cta-glow{
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 30% 40%, rgba(50, 130, 255, .35), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(120, 255, 220, .18), transparent 55%),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, .10), transparent 60%);
  filter: blur(16px);
  opacity: .9;
  pointer-events: none;
}

/* sadržaj iznad glowa */
.cta-content,
.cta-actions{
  position: relative;
  z-index: 1;
}

.cta-content h2{
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}

.cta-content p{
  margin: 0;
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 60ch;
}

/* dugmad i linkovi */
.cta-actions{
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  color: #0b1020;

  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.35);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cta-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow:
    0 22px 55px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.60);
}

.cta-link{
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  opacity: .9;
  border-bottom: 1px solid rgba(255,255,255,.20);
  padding-bottom: 2px;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}

.cta-link:hover{
  opacity: 1;
  border-color: rgba(255,255,255,.45);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px){
  .cta-box{
    padding: 42px 22px;
    animation: none; /* na telefonu ugasi lebdenje */
  }
  .cta-content p{ font-size: 1.05rem; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .cta-box{
    animation: none !important;
    transition: none !important;
  }
  .cta-btn,
  .cta-link{
    transition: none !important;
  }
}

/* ======================
   Back to top button
   ====================== */
#backToTop{
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  z-index: 1000;
}

#backToTop:hover{
  background: color-mix(in srgb, var(--accent) 85%, black);
}

/* vidljivo */
#backToTop.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* light tema */
body.light #backToTop{
  background: var(--accent);
}

/* ======================
   THEME TOGGLE – ICON ONLY (LIGHT / DARK)
   ====================== */

.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;

  /* veličina u navbaru */
  transform: scale(0.8);
  transform-origin: right center;
}

/* Track (pilula) */
.theme-toggle__track{
  width: 96px;
  height: 44px;
  padding: 4px;

  position: relative;
  border-radius: 999px;

  background: #1b1f2a;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Light tema */
body.light .theme-toggle__track{
  background: #f2f3f6;
  border-color: rgba(0,0,0,0.12);
}

/* Knob (kružić) */
.theme-toggle__knob{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3b4bff;

  position: absolute;
  top: 4px;
  left: 4px;

  display: grid;
  place-items: center;

  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}

/* Pomeri knob u DARK
   račun: 96 - 36 - (2*4) = 52px */
body:not(.light) .theme-toggle__knob{
  transform: translateX(52px);
}

/* Ikonice u knob-u */
.theme-toggle__ico{
  position: absolute;
  font-size: 16px;
  color: #fff;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* LIGHT */
body.light .theme-toggle__ico--sun{
  opacity: 1;
  transform: scale(1);
}
body.light .theme-toggle__ico--moon{
  opacity: 0;
  transform: scale(0.85);
}

/* DARK */
body:not(.light) .theme-toggle__ico--sun{
  opacity: 0;
  transform: scale(0.85);
}
body:not(.light) .theme-toggle__ico--moon{
  opacity: 1;
  transform: scale(1);
}

/* Hover efekat */
.theme-toggle:hover .theme-toggle__track{
  box-shadow: 0 14px 38px rgba(0,0,0,0.45);
}

/* Fokus (tastatura – accessibility) */
.theme-toggle:focus-visible .theme-toggle__track{
  outline: 2px solid #3b4bff;
  outline-offset: 3px;
}

/* Mobile – još malo manje */
@media (max-width: 768px){
  .theme-toggle{
    transform: scale(0.75);
  }
}


/* ======================
   STATS (counter cards)
   ====================== */

.stats-section{
  padding-top: 28px;
  padding-bottom: 10px;
}

.stats-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
  .stats-grid{ grid-template-columns: 1fr; }
}

.stat-card{
  position: relative;
  border-radius: 18px;
  padding: 18px 18px 16px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 55px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);

  transform: translateY(10px);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
}

body.light .stat-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
}

.stat-card.is-in{
  transform: translateY(0);
  opacity: 1;
}

.stat-top{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* nema više plus gore desno */
  margin-bottom: 12px;
}

/* ✅ Ikonica badge – ujednačeno */
.stat-ico{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.stat-ico i{
  font-size: 18px;
  opacity: .95;
}

body.light .stat-ico{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}

/* ✅ Broj + + + tekst u jednoj liniji */
.stat-line{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}

/* Broj */
.stat-number{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* + pored broja (skriven dok ne završi) */
.stat-plus{
  font-size: 28px;
  font-weight: 900;
  line-height: 1;

  opacity: 0;
  transform: translateY(4px) scale(.9);
  transition: opacity .25s ease, transform .25s ease;
}

/* Kad broj završi (JS doda .is-done na card) */
.stat-card.is-done .stat-plus{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Tekst u istoj liniji */
.stat-label{
  opacity: .78;
  font-size: 14px;
  margin: 0; /* bitno: nema margin-top */
}

/* (Opc.) Na baš malim ekranima dozvoli wrap da ne beži */
@media (max-width: 420px){
  .stat-line{
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* Sekcije su skroz transparentne – pozadina je globalna */
.section,
.timeline-section,
.stats-section,
.cta-section{
  background: transparent;
}


/* ======================
   INTERESOVANJA (grid + kartice)
   ====================== */

.page-head{
  padding: 26px 0 10px;
}

.page-head h1{
  margin: 0 0 10px;
  font-size: clamp(44px, 5vw, 66px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.page-head p{
  margin: 0;
  max-width: 62ch;
  opacity: .78;
}

/* Grid: 3 u redu, pa 2 u redu, pa 1 */
.interests-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
  margin-bottom: 70px;
}

@media (max-width: 992px){
  .interests-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px){
  .interests-grid{
    grid-template-columns: 1fr;
  }
}

/* Kartica – glassy kao na home */
.interest-card{
  border-radius: 18px;
  padding: 16px 16px 18px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);

  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.light .interest-card{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
}

.interest-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.18);
}

body.light .interest-card:hover{
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

/* Slika gore u kartici */
.interest-media{
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

body.light .interest-media{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
}

.interest-media img{
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

/* Tekst */
.interest-card h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
}

.interest-card p{
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  opacity: .78;
}

/* ===== Interests: fade-in-up stagger (STABLE) ===== */

/* start stanje se aktivira tek kad body dobije anim-interests */
body.anim-interests .interest-card{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
  will-change: opacity, transform;
}

body.anim-interests .interest-card.is-in{
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i) * 120ms);
}


/* accessibility */
@media (prefers-reduced-motion: reduce){
  body.anim-interests .interest-card{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* ===== Page head with CTA ===== */
.page-head--with-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

@media (max-width: 768px){
  .page-head--with-cta{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Dugme – u stilu indexa */
.btn-primary-outline{
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.btn-primary-outline:hover{
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

/* ===== Kontakt layout (kao na slici) ===== */

.contact-divider{
  border: 0;
  height: 1px;
  margin: 18px 0 22px;
  background: rgba(255,255,255,.10);
}

body.light .contact-divider{
  background: rgba(0,0,0,.08);
}

.contact-layout{
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 992px){
  .contact-layout{ grid-template-columns: 1fr; }
}

/* zajednički "glass" card (da bude usklađeno sa interesovanjima) */
.glass-card{
  border-radius: 16px;
  padding: 18px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}

body.light .glass-card{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
}

.card-title{
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 900;
}

/* Forma inputi */
.form-glass{
  border-radius: 12px !important;
  padding: 12px 12px !important;
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

body.light .form-glass{
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}

.form-glass::placeholder{
  opacity: .65;
}

.form-glass:focus{
  box-shadow: 0 0 0 4px rgba(22,119,255,.22) !important;
  border-color: rgba(22,119,255,.55) !important;
}

/* Dugme Pošalji */
.btn-send{
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
}

/* Kontakt info lista */
.contact-info{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.contact-info li{
  display: flex;
  gap: 10px;
  align-items: center;
}

.contact-info i{
  font-size: 18px;
  opacity: .9;
  width: 22px;
  text-align: center;
}

.contact-info a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.contact-info a:hover{
  border-bottom-color: rgba(255,255,255,.35);
}

body.light .contact-info a:hover{
  border-bottom-color: rgba(0,0,0,.25);
}

.contact-info-sep{
  height: 1px;
  margin: 14px 0;
  background: rgba(255,255,255,.10);
}

body.light .contact-info-sep{
  background: rgba(0,0,0,.08);
}

/* ===== Social buttons (da se vide i u dark i u light) ===== */

.contact-btns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Default (dark) */
.btn-social{
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}

.btn-social:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}

/* Light theme */
body.light .btn-social{
  background: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  color: rgba(11,18,32,.90) !important; /* tamna boja teksta */
}

body.light .btn-social:hover{
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.22) !important;
  color: rgba(11,18,32,1) !important;
}

/* da ikone budu uvek vidljive */
.btn-social i{
  font-size: 16px;
  opacity: .95;
}

/* ===== Fix: vidljiv tekst i placeholder u inputima (dark/light) ===== */

.form-glass{
  color: rgba(255,255,255,.92) !important;          /* tekst koji kucaš (dark) */
  caret-color: rgba(255,255,255,.92) !important;     /* kursor */
}

.form-glass::placeholder{
  color: rgba(255,255,255,.55) !important;          /* placeholder (dark) */
  opacity: 1 !important;                             /* da browser ne smanji */
}

/* Light tema */
body.light .form-glass{
  color: rgba(11,18,32,.92) !important;             /* tekst (light) */
  caret-color: rgba(11,18,32,.92) !important;
}

body.light .form-glass::placeholder{
  color: rgba(11,18,32,.45) !important;             /* placeholder (light) */
  opacity: 1 !important;
}






.attach-preview{
  margin-top: 10px;
  display: none;
  gap: 10px;
  align-items: center;
}

.attach-preview.is-on{ display: flex; }

.attach-preview img{
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
}

body.light .attach-preview img{
  border-color: rgba(0,0,0,.12);
}

.attach-preview .meta{
  opacity: .85;
  font-size: 14px;
}


/* ===============================
   PROJECTS PAGE
================================ */

.projects-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  margin-bottom: 18px;
}

.projects-filters{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.light .filter-btn{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: var(--text);
}

.filter-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

.filter-btn.is-active{
  background: rgba(22,119,255,.18);
  border-color: rgba(22,119,255,.35);
}

.projects-search{
  position: relative;
  flex: 0 0 320px;
  max-width: 100%;
}

.projects-search i{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .7;
  pointer-events: none;
}

.projects-search input{
  width: 100%;
  padding: 10px 12px 10px 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
}

body.light .projects-search input{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  color: var(--text);
}

.projects-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

@media (max-width: 992px){
  .projects-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects-controls{ flex-direction: column; align-items: stretch; }
  .projects-search{ flex: 1; }
}
@media (max-width: 600px){
  .projects-grid{ grid-template-columns: 1fr; }
}

.project-card{
  border-radius: 18px;
  overflow: hidden;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 55px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

body.light .project-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
}

.project-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.33);
  border-color: rgba(255,255,255,.16);
  filter: brightness(1.02);
}

body.light .project-card:hover{
  box-shadow: 0 26px 70px rgba(0,0,0,.16);
  border-color: rgba(0,0,0,.12);
}

.project-thumb{
  position: relative;
  height: 160px;
  background: rgba(0,0,0,.25);
}

.project-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  backdrop-filter: blur(10px);
}

body.light .project-badge{
  background: rgba(255,255,255,.72);
  color: #0B1220;
  border: 1px solid rgba(0,0,0,.10);
}

.project-body{
  padding: 14px 14px 16px;
}

.project-title{
  margin: 2px 0 6px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
}

.project-desc{
  margin: 0 0 10px;
  opacity: .82;
  font-size: 14px;
  line-height: 1.55;
}

.project-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tag{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}

body.light .tag{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
}

.project-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-ghost{
  border: none;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  opacity: .9;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}

.btn-ghost:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
  opacity: 1;
}

body.light .btn-ghost:hover{
  background: rgba(0,0,0,.06);
}

/* Helper: outline button da izgleda dobro i u light temi */
.btn-outline-onlight{
  border-color: rgba(255,255,255,.22);
  color: var(--text);
}
body.light .btn-outline-onlight{
  border-color: rgba(0,0,0,.15);
  color: var(--text);
}

/* CTA */
.projects-cta{
  margin-top: 18px;
}

.projects-cta-card{
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 55px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.light .projects-cta-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
}

.projects-cta-text h2{
  margin: 0 0 4px;
  font-weight: 900;
}
.projects-cta-text p{
  margin: 0;
  opacity: .82;
}

.projects-cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-cta{
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
}

@media (max-width: 768px){
  .projects-cta-card{ flex-direction: column; align-items: flex-start; }
}

/* ===============================
   REVEAL ANIMATION
================================ */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ===============================
   PROJECT MODAL + PROJECT CARDS
================================ */
/* ===== MODAL ===== */
.pmodal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.pmodal.is-open{ display: block; }

.pmodal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.pmodal__card{
  position: relative;
  width: min(680px, calc(100% - 28px)); /* malo šire */
  margin: 90px auto 0;
  border-radius: 20px;
  padding: 18px 18px 20px; /* malo više prostora */

  background: rgba(15,27,45,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 120px rgba(0,0,0,.45);
}

body.light .pmodal__card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 40px 120px rgba(0,0,0,.20);
}

.pmodal__close{
  position: absolute;
  right: 12px;
  top: 12px;
  border: none;
  background: transparent;
  color: var(--text);
  opacity: .85;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.pmodal__close:hover{
  opacity: 1;
  background: rgba(255,255,255,.10);
}
body.light .pmodal__close:hover{
  background: rgba(0,0,0,.06);
}

.pmodal__title{
  margin: 4px 44px 8px 0;
  font-weight: 900;
}
.pmodal__text{
  margin: 0 0 12px;
  opacity: .85;
  line-height: 1.6;
}

.pmodal__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pmodal__tags .tag{ margin: 0; }

/* ===== PROJECT GRID (5 kartica) ===== */
.projects-grid--5{
  display: grid;
  gap: 26px; /* više razmaka = “premium” */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
}

/* ===== PROJECT CARD ===== */
.project-card{
  border-radius: 20px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.project-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 34px 90px rgba(0,0,0,.38);
  filter: brightness(1.03);
}

/* ===== IMAGE 16:9 (CENTER + BIGGER + FULL VISIBLE) ===== */
.project-thumb{
  aspect-ratio: 16 / 9;
  padding: 16px;
  background: rgba(0,0,0,.25);

  display: flex;
  align-items: center;
  justify-content: center;
}

.project-thumb img{
  width: auto;            /* ✅ KLJUČ */
  height: auto;           /* ✅ KLJUČ */
  max-width: 100%;        /* da ne pređe okvir */
  max-height: 100%;       /* da ne pređe okvir */
  object-fit: contain;

  display: block;
  margin: auto;           /* ✅ centriranje i za svaki slučaj */
  border-radius: 14px;
  background: rgba(0,0,0,.15);
}

body.light .project-thumb img{
  background: rgba(0,0,0,.03);
}

.project-card:hover .project-thumb img{
  transform: scale(1.08);        /* još malo na hover */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px){
  .projects-grid--5{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px){
  .projects-grid--5{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .pmodal__card{
    margin: 70px auto 0;
  }
}

/* =========================================================
   PROJECTS
   ========================================================= */

/* GRID – veće kartice + bolji razmak */
.projects-grid--5{
  display: grid !important;
  gap: 26px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 22px !important;
}

/* CARD – veća */
.project-card{
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.22) !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

.project-card:hover{
  transform: translateY(-8px) !important;
  box-shadow: 0 34px 95px rgba(0,0,0,.32) !important;
  filter: brightness(1.03) !important;
}

/* THUMB – ovde je “pravo” centriranje */
.project-thumb,
.project-thumb--contain{
  position: relative !important;
  height: 220px !important;            /* ✅ veći prostor za sliku */
  padding: 16px !important;
  background: rgba(0,0,0,.25) !important;

  display: flex !important;            /* ✅ centar */
  align-items: center !important;
  justify-content: center !important;
}

body.light .project-thumb,
body.light .project-thumb--contain{
  background: rgba(0,0,0,.04) !important;
}

/* SLIKA – NE width:100% (to je uzrok “levo” efekta) */
.project-thumb img,
.project-thumb--contain img{
  width: auto !important;              /* ✅ KLJUČ */
  height: auto !important;             /* ✅ KLJUČ */
  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  display: block !important;
  margin: 0 auto !important;           /* dodatno osiguranje */
  border-radius: 14px !important;

  background: rgba(0,0,0,.12) !important;
}

body.light .project-thumb img,
body.light .project-thumb--contain img{
  background: rgba(0,0,0,.03) !important;
}

/* BADGE – da ne utiče na centriranje */
.project-badge{
  position: absolute !important;
  left: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
}

/* BODY – malo više paddinga da kartica izgleda veće */
.project-body{
  padding: 18px 18px 20px !important;
}

/* Tekst – malo veći */
.project-title{
  font-size: 1.15rem !important;
  margin-bottom: 8px !important;
}

.project-desc{
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  opacity: .92 !important;
}

/* Actions – razmak */
.project-actions{
  margin-top: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* RESPONSIVE */
@media (max-width: 1100px){
  .projects-grid--5{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .project-thumb,
  .project-thumb--contain{
    height: 210px !important;
  }
}

@media (max-width: 600px){
  .projects-grid--5{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .project-thumb,
  .project-thumb--contain{
    height: 200px !important;
    padding: 14px !important;
  }
}

.project-thumb{
  background: transparent !important;
  padding: 0 !important;
}

.project-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* ✅ nema crnih ivica */
  object-position: center !important;
  background: transparent !important;
}

/* BOOTSTRAP SAFE: centriraj thumbnail + img */
.projects-grid--5 .project-card .project-thumb{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 0 !important;
  background: transparent !important;
}

/* ubij “bootstrap/global img 100%” ako postoji */
.projects-grid--5 .project-card .project-thumb > img{
  display: block !important;

  width: auto !important;          /* ✅ KLJUČ */
  max-width: 100% !important;      /* ostaje responsive */
  height: auto !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 auto !important;
  background: transparent !important;
}

.projects-grid--5 .project-card .project-thumb{
  width: 100% !important;
}
/* ===== LIGHTBOX ===== */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}
.lightbox.is-open{ display: block; }

.lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
}

.lightbox__img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(94vw, 1200px);
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  background: #0b1220;
}

.lightbox__close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  border-radius: 12px;
  cursor: pointer;
}
.lightbox__close:hover{ background: rgba(255,255,255,.08); }

/* =====================================
   MOVE THUMB DOWN (NO IMAGE SHRINK)
   ===================================== */

/* produži karticu vizuelno */
.projects-grid--5 .project-card{
  padding-top: 5px !important; /* koliko želiš razmaka gore */
}

/* NE diramo padding thumbnail-a */
.projects-grid--5 .project-card .project-thumb{
  margin-top:5px !important;  /* pomera ceo deo sa slikom nadole */
}


/* ===============================
   GALLERY (BOOTSTRAP CAROUSEL)
   =============================== */

.gallery-wrap{
  margin-top: 18px;
}

#portfolioCarousel{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 90px rgba(0,0,0,.30);
}

body.light #portfolioCarousel{
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 26px 90px rgba(0,0,0,.18);
}

/* slika */
.gallery-img{
  height: min(68vh, 560px);
  object-fit: cover; /* lepše u karuselu */
}

/* caption box */
.gallery-caption{
  text-align: left;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 18px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.08));
}

body.light .gallery-caption{
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.06));
}

.gallery-pill{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .8rem;
  margin-bottom: 10px;
}

.gallery-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.gallery-note{
  margin: 12px 4px 0;
  opacity: .75;
  font-size: .95rem;
}

/* mobile tweak */
@media (max-width: 576px){
  .gallery-img{
    height: 52vh;
  }
  .gallery-caption{
    padding: 14px;
  }
}

/* ==============================
   TIMELINE reveal (30% u viewport)
   ============================== */

/* ==============================
   TIMELINE reveal (sporije + smooth)
   ============================== */

/* Cela sekcija (inicijalno sakrivena) */
.timeline-section{
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1.2s cubic-bezier(.22, 1, .36, 1),
    transform 1.2s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

/* Kada postane vidljiva */
.timeline-section.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Stavke ulaze jedna po jedna (sporije) */
.timeline-section .timeline-item{
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.95s cubic-bezier(.22, 1, .36, 1),
    transform 0.95s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

/* Aktivirana stavka */
.timeline-section.is-visible .timeline-item.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .timeline-section,
  .timeline-section .timeline-item{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* ==============================
   GALERIJA + CAROUSEL (final)
   - reveal na 30%
   - strelice vidljive + centrirane
   - krugovi opacity 50%
   ============================== */

/* Sporiji reveal galerije */
.gallery-wrap{
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.45s cubic-bezier(.22, 1, .36, 1),
    transform 1.45s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.gallery-wrap.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Sporiji “pop in” za karusel */
#portfolioCarousel{
  position: relative; /* bitno za absolute kontrole */
  opacity: 0;
  transform: translateY(18px) scale(.99);
  transition:
    opacity 1.25s cubic-bezier(.22, 1, .36, 1),
    transform 1.25s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.gallery-wrap.is-visible #portfolioCarousel.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ====== Prev/Next dugmad (uvek iznad slike) ====== */
#portfolioCarousel .carousel-control-prev,
#portfolioCarousel .carousel-control-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 84px;            /* klik zona */
  height: 84px;
  z-index: 9999;
  opacity: 1 !important;
}

#portfolioCarousel .carousel-control-prev{ left: 14px; }
#portfolioCarousel .carousel-control-next{ right: 14px; }

/* Krug (ikonica) */
#portfolioCarousel .carousel-control-prev-icon,
#portfolioCarousel .carousel-control-next-icon{
  width: 56px;
  height: 56px;

  background-image: none !important; /* gasimo bootstrap svg */
  position: relative;

  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 2px solid rgba(0,0,0,.85);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);

  /* ✅ 50% opacity po defaultu */
  opacity: .4;

  transition:
    opacity .25s ease,
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

/* Strelica (centar-centar) */
#portfolioCarousel .carousel-control-prev-icon::after,
#portfolioCarousel .carousel-control-next-icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 14px;
  height: 14px;

  border-top: 4px solid rgba(0,0,0,.95);
  border-right: 4px solid rgba(0,0,0,.95);

  transform-origin: center;
}

/* Desna strelica */
#portfolioCarousel .carousel-control-next-icon::after{
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Leva strelica */
#portfolioCarousel .carousel-control-prev-icon::after{
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* Hover: full opacity + malo veće */
#portfolioCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#portfolioCarousel .carousel-control-next:hover .carousel-control-next-icon{
  opacity: 1;
  transform: scale(1.07);
  box-shadow: 0 20px 46px rgba(0,0,0,.42);
  background: rgba(255,255,255,.92);
}

/* Fokus tastaturom */
#portfolioCarousel .carousel-control-prev:focus-visible .carousel-control-prev-icon,
#portfolioCarousel .carousel-control-next:focus-visible .carousel-control-next-icon{
  outline: 3px solid rgba(0,0,0,.25);
  outline-offset: 3px;
}

/* Ako caption/overlay smeta, zadrži ispod strelica */
#portfolioCarousel .carousel-caption{ z-index: 2; }
#portfolioCarousel .carousel-inner{ position: relative; z-index: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gallery-wrap,
  #portfolioCarousel{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===============================
   MOBILE NAVBAR SPACING ONLY
   =============================== */
@media (max-width: 576px) {
  .site-header .nav,
  .site-header nav {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* ===============================
   HERO IMAGE CENTER – MOBILE ONLY
   =============================== */
@media (max-width: 576px) {
  .hero-right {
    display: flex;
    justify-content: center;
  }
}


/* =========================================
   MOBILE ONLY: Hamburger (3 lines centered) + BackToTop centered
   ========================================= */
@media (max-width: 576px){

  /* ---------- HAMBURGER: centar + uvek 3 linije ---------- */
  .site-header .nav-toggle{
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;              /* razmak između linija */
    overflow: visible !important;
  }

  .site-header .nav-toggle span{
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 999px !important;

    /* reset da se ne spoje / ne nestanu */
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* sigurnost: nema pseudo-linija (4. linija) */
  .site-header .nav-toggle span::before,
  .site-header .nav-toggle span::after{
    content: none !important;
    display: none !important;
  }

  /* ako ti negde postoji margin-top na span+span, gasi ga */
  .site-header .nav-toggle span + span{
    margin-top: 0 !important;
  }

  /* ---------- BACK TO TOP: centar ---------- */
  #backToTop,
  .back-to-top,
  .to-top{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #backToTop i,
  .back-to-top i,
  .to-top i{
    line-height: 1 !important;
  }
}


/* =========================================
   MOBILE ONLY: hamburger uvek 3 bele linije (bez 4.)
   ========================================= */
@media (max-width: 576px){

  /* ubij bilo kakve pseudo-linije koje prave "4. crtu" */
  .site-header .nav-toggle::before,
  .site-header .nav-toggle::after,
  .site-header .nav-toggle span::before,
  .site-header .nav-toggle span::after{
    content: none !important;
    display: none !important;
    box-shadow: none !important;
  }

  /* ako negde postoji 4. span (ili više) – sakrij */
  .site-header .nav-toggle span:nth-child(n+4){
    display: none !important;
  }

  /* linije: UVEK BELE na telefonu */
  .site-header .nav-toggle span{
    background: #ffffff !important;
    box-shadow: none !important;
  }
}

/* =========================================
   MOBILE + LIGHT THEME: hamburger teget linije
   ========================================= */
@media (max-width: 576px){
  body.light .site-header .nav-toggle span{
    background: #1e293b !important;
  }
}