/* ============================================================
   MK REVIZIJA — Design tokens
   Sharp, editorial, corporate. No rounded corners, no drop
   shadows — hairline rule and confident whitespace instead.
   ============================================================ */
:root{
  --navy:       #0a3d5f;
  --navy-dark:  #064168;
  --navy-ink:   #094469;
  --teal:       #66b4ac;
  --teal-dim:   #e5f1ef;
  --paper:      #ffffff;
  --offwhite:   #f6f8f8;
  --line:       #dfe4e6;
  --line-dark:  rgba(255,255,255,.14);
  --ink:        #16232d;
  --ink-soft:   #52626c;
}

*{ box-sizing:border-box; }

body{
  font-family:'Inter', -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{
  font-family:'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  font-weight:600;
  color:var(--navy-ink);
  letter-spacing:.2px;
}

a{ text-decoration:none; color:inherit; }
img{ display:block; max-width:100%; }

/* kill every rounded-corner utility Bootstrap ships with, on purpose */
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5,
.rounded-pill, .rounded-circle, .card, .btn, .dropdown-menu, .form-control,
.badge, img{ border-radius:0 !important; }

.text-navy{ color:var(--navy) !important; }
.text-teal{ color:var(--teal) !important; }
.bg-navy{ background-color:var(--navy-ink) !important; }
.bg-soft{ background-color:var(--offwhite) !important; }

/* ---------- Eyebrow / section title ---------- */
.section-title{ margin-bottom:2.6rem; }
.section-title small{
  display:inline-block;
  color:var(--teal);
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:.72rem;
  margin-bottom:.6rem;
  position:relative;
  padding-left:26px;
}
.section-title small::before{
  content:'';
  position:absolute; left:0; top:50%;
  width:18px; height:2px;
  background:var(--teal);
}
.section-title h2{ font-size:2rem; margin:0; }
.section-title.text-center small{ padding-left:0; }
.section-title.text-center small::before{ display:none; }

/* ---------- Buttons — rectangular, restrained ---------- */
/* Reset native OS button styling everywhere — Safari/iOS in particular
   renders real <button> elements with rounded, pill-like native chrome
   unless appearance is explicitly turned off, regardless of border-radius. */
button, input[type="submit"], input[type="button"], input[type="reset"]{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border-radius:0 !important;
  cursor:pointer;
}

.btn-mk{
  display:inline-block;
  background:var(--navy);
  border:1px solid var(--navy);
  color:#fff;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.4px;
  padding:.75rem 1.9rem;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-mk:hover{ background:var(--navy-dark); border-color:var(--navy-dark); color:#fff; }

.btn-mk-outline{
  display:inline-block;
  background:transparent;
  border:1px solid var(--navy);
  color:var(--navy);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.4px;
  padding:.7rem 1.8rem;
  transition:background-color .2s ease, color .2s ease;
}
.btn-mk-outline:hover{ background:var(--navy); color:#fff; }
.btn-mk-outline.active{ background:var(--navy); color:#fff; }

.btn-outline-light{
  border:1px solid rgba(255,255,255,.65);
  color:#fff;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.4px;
  padding:.7rem 1.8rem;
  transition:.2s;
}
.btn-outline-light:hover{ background:#fff; color:var(--navy); }

/* ---------- Top accent bar — logo gradient, fades on scroll ---------- */
.top-accent{
  height:4px;
  background:linear-gradient(90deg, var(--teal) 0%, var(--teal) 100%);
  transition:opacity .35s ease, height .35s ease;
}
.top-accent.is-hidden{ opacity:0; height:0; }

/* ---------- Navbar ---------- */
.navbar-mk{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:0;
}
.navbar-mk.shadow{ border-bottom-color:var(--navy); }
.navbar-mk .navbar-brand{ padding: 0.8rem 0; 
  display: inline-block; /* Osigurava da padding radi pravilno oko slike */
  line-height: 0;        /* Uklanja skriveni tekstualni prostor ispod slike */
  transition: padding 0.3s ease; }
.navbar-mk .navbar-brand img { 
  height: 66px; 
  display: block;        /* Uklanja podrazumevani prazan prostor ispod inline slika */
  transition: height 0.3s ease;
}
.navbar-mk .nav-link {
  color: var(--navy-ink);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 1.9rem .95rem !important; 
  position: relative;
  transition: padding 0.3s ease; /* Omogućava glatko smanjivanje */
}
.navbar-mk .nav-link::after {
  content: '';
  position: absolute; 
  left: .95rem; 
  right: .95rem; 
  bottom: 1.55rem; 
  height: 2px; 
  background: var(--teal);
  transform: scaleX(0); 
  transform-origin: left;
  transition: transform .2s ease, bottom 0.3s ease; /* Dodat bottom u tranziciju */
}
.navbar-mk .nav-link:hover::after, .navbar-mk .nav-link.active::after{ transform:scaleX(1); }
.navbar-mk .nav-link:hover, .navbar-mk .nav-link.active{ color:var(--navy); }
.navbar-mk .dropdown-menu{ border:1px solid var(--line); box-shadow:none; margin-top:0; }
.navbar-mk .dropdown-item{ font-size:.9rem; padding:.55rem 1.1rem; }
.navbar-mk .dropdown-item:hover{ background:var(--offwhite); color:var(--navy); }
.navbar-mk .btn-mk{ padding:.6rem 1.5rem; }

.navbar-mk.scrolled .navbar-brand {
  padding: 0.4rem 0; /* Vraća se na originalnu manju veličinu */
}

/* Kada se skroluje, smanjujemo padding na linkovima */
.navbar-mk.scrolled .nav-link {
  padding: 1.35rem .95rem !important; /* Vraća se na originalnu manju veličinu */
}

/* Kada se skroluje, podižemo i liniju ispod linka da prati manji padding */
.navbar-mk.scrolled .nav-link::after {
  bottom: 1.1rem; /* Vraća se na originalnu poziciju */
}

.navbar-mk.scrolled .navbar-brand img {
  height: 46px; 
}

/* ---------- Hero ---------- */
.hero{
  background:var(--navy-ink);
  color:#fff;
  padding:6.5rem 0 5.5rem;
  min-height:480px;
  position:relative;
  overflow:hidden;
  border-bottom:3px solid var(--teal);
}
.hero .container{ position:relative; z-index:2; }
.hero-decor{
  position:absolute;
  top:0; right:0; bottom:0;
  width:50%;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.hero-decor svg{ width:100%; height:100%; display:block; }
.hero h1{ color:#fff; font-size:2.75rem; line-height:1.18; max-width:680px; }
.hero p.lead{ color:#cfdde2; max-width:560px; font-size:1.05rem; }

.hero-page{
  background:var(--navy-ink);
  color:#fff;
  padding:3.2rem 0;
  border-bottom:3px solid var(--teal);
}
.hero-page h1{ color:#fff; margin:0; font-size:2rem; }
.breadcrumb-mk{ font-size:.85rem; }
.breadcrumb-mk a{ color:#a9c2cb; }
.breadcrumb-mk a:hover{ color:#fff; }
.breadcrumb-mk span{ color:#fff; }

/* ---------- Cards — hairline border, no shadow ---------- */
.card-mk{
  border:1px solid var(--line);
  background:#fff;
  transition:border-color .2s ease, transform .2s ease;
}
.card-mk:hover{ border-color:var(--navy); transform:translateY(-3px); }

.card-mk .icon-wrap{
  width:52px; height:52px;
  background:var(--teal-dim);
  color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  margin-bottom:1.1rem;
  border-left:2px solid var(--teal);
}

/* image containers — consistent ratio + subtle zoom on hover, the one
   deliberate motion moment used consistently across the site */
.img-crop{ overflow:hidden; position:relative; }
.img-crop img{ transition:transform .5s ease; }
.card-mk:hover .img-crop img{ transform:scale(1.06); }

.card-mk img{
  height:210px;
  object-fit:cover;
  object-position: center top; /* dodano */
  width:100%;
}
.ekspert-card .img-crop{
  aspect-ratio: 3 / 4;
  overflow:hidden;
}
.ekspert-card .img-crop img{
  height:100%;
  object-fit:cover;
  object-position: center top;
  width:100%;
}

.section-title{ position:relative; }

.badge-kategorija{
  background:var(--teal-dim);
  color:var(--navy);
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:.3rem .7rem;
  font-size:.68rem;
}

/* ---------- Footer ---------- */
footer.footer-mk{ background:var(--navy-ink); color:#a9c2cb; padding:3.8rem 0 1.6rem; border-top:3px solid var(--teal); }
footer.footer-mk h6{ color:#fff; font-weight:700; letter-spacing:.5px; text-transform:uppercase; font-size:.8rem; margin-bottom:1.1rem; }
footer.footer-mk a{ color:#a9c2cb; }
footer.footer-mk a:hover{ color:var(--teal); }
footer.footer-mk .social-icon{
  width:34px; height:34px;
  border:1px solid var(--line-dark);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:.5rem;
  transition:.2s;
}
footer.footer-mk .social-icon:hover{ border-color:var(--teal); color:var(--teal); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--navy-ink); border-left:3px solid var(--teal); padding:3.4rem 3rem; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#cfdde2; }

/* ---------- Scroll-reveal (subtle, restrained) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .card-mk, .card-mk:hover, .img-crop img, .card-mk:hover .img-crop img{ transition:none; transform:none; }
}

/* ---------- Forms ---------- */
.form-control{ border:1px solid var(--line); padding:.65rem .9rem; }
.form-control:focus{ border-color:var(--navy); box-shadow:none; }

/* ============================================================
   CMS / Admin layout — flex-based, sharp, corporate
   ============================================================ */
.admin-wrapper{ display:flex; min-height:100vh; background:var(--offwhite); font-family:'Inter',sans-serif; }

.admin-sidebar{
  width:240px; flex-shrink:0;
  background:var(--navy-ink);
  border-right:1px solid rgba(255,255,255,.08);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
}
.admin-brand{ padding:1.6rem 1.4rem 1rem; }
.admin-brand img{ height:58px;  ; }

.admin-nav{ display:flex; flex-direction:column; padding:.5rem 0; flex:1; }
.admin-nav a{
  color:#a9c2cb; display:flex; align-items:center; gap:.7rem;
  padding:.8rem 1.4rem; font-weight:600; font-size:.88rem;
  border-left:2px solid transparent; position:relative;
}
.admin-nav a i{ font-size:1rem; width:18px; }
.admin-nav a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.admin-nav a.active{ background:rgba(255,255,255,.07); color:#fff; border-left-color:var(--teal); }
.admin-nav-badge{
  margin-left:auto; background:var(--teal); color:var(--navy-ink);
  font-size:.7rem; font-weight:800; padding:.1rem .45rem;
}

.admin-nav-footer{ border-top:1px solid rgba(255,255,255,.08); padding:.5rem 0 1rem; }
.admin-nav-footer a{
  color:#a9c2cb; display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1.4rem; font-weight:600; font-size:.85rem;
}
.admin-nav-footer a:hover{ color:#fff; }

.admin-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.admin-topbar{
  background:#fff; border-bottom:1px solid var(--line);
  padding:1rem 2.2rem; display:flex; align-items:center; gap:1rem;
}
.admin-topbar h5{ margin:0; flex:1; font-family:'Frank Ruhl Libre',serif; }
.admin-user{ color:var(--ink-soft); font-size:.88rem; white-space:nowrap; }
.admin-sidebar-toggle{
  border:1px solid var(--line); background:#fff; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--navy);
}

.admin-content{ padding:2.2rem; flex:1; }
.admin-content table th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); border-bottom-width:1px; font-weight:700; }
.admin-content .table{ border:1px solid var(--line); margin-bottom:0; }
.admin-content .table td{ vertical-align:middle; font-size:.92rem; }

.admin-sidebar-backdrop{ display:none; }

@media (max-width:991.98px){
  .admin-sidebar{
    position:fixed; left:0; top:0; z-index:1050;
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .admin-sidebar.is-open{ transform:translateX(0); }
  .admin-sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(6,41,64,.5); z-index:1040;
  }
  .admin-sidebar-backdrop.is-open{ display:block; }
  .admin-content{ padding:1.4rem; }
  .admin-topbar{ padding:.9rem 1.2rem; }
}

/* ---------- Cookie consent banner (GDPR) ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:var(--navy-ink);
  border-top:3px solid var(--teal);
  transform:translateY(100%);
  transition:transform .35s ease;
  padding:1.1rem 1.5rem;
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
}
.cookie-banner-icon{ font-size:1.8rem; line-height:1; flex-shrink:0; }
.cookie-banner-text{ color:#cfdde2; flex:1; min-width:260px; }
.cookie-banner-text strong{ color:#fff; display:block; margin-bottom:.25rem; font-family:'Frank Ruhl Libre',serif; font-size:1.05rem; }
.cookie-banner-text p{ font-size:.86rem; line-height:1.6; }
.cookie-banner-text a{ color:var(--teal); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:.7rem; flex-shrink:0; margin-left:auto; }
.cookie-banner .btn-cookie-reject{ border-color:rgba(255,255,255,.4); color:#fff; }
.cookie-banner .btn-cookie-reject:hover{ background:rgba(255,255,255,.1); color:#fff; }

/* Placeholder za mapu dok saglasnost nije data */
.map-consent-gate{
  background:var(--offwhite);
  border:1px solid var(--line);
  padding:3rem 1.5rem;
  text-align:center;
}
.map-consent-gate i{ font-size:2rem; color:var(--teal); }

@media (max-width:767px){
  .cookie-banner-actions{ width:100%; margin-left:0; }
  .cookie-banner-actions button{ flex:1; }
}

/* ---------- Rich text content (rendered from Quill editor) ---------- */
.rich-text p{ margin-bottom:1.1rem; }
.rich-text h2, .rich-text h3, .rich-text h4{ margin-top:1.8rem; margin-bottom:.8rem; }
.rich-text ul, .rich-text ol{ margin-bottom:1.1rem; padding-left:1.4rem; }
.rich-text li{ margin-bottom:.4rem; }
.rich-text blockquote{
  border-left:3px solid var(--teal);
  padding:.3rem 0 .3rem 1.2rem;
  margin:1.5rem 0;
  color:var(--ink-soft);
  font-style:italic;
}
.rich-text a{ color:var(--navy); text-decoration:underline; }
.rich-text a:hover{ color:var(--teal); }
.rich-text img{ max-width:100%; height:auto; margin:1.2rem 0; }

/* ---------- Legal pages (privacy / terms) ---------- */
.legal-content h2{ font-size:1.35rem; margin-top:2.2rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{ color:var(--ink-soft); line-height:1.85; }
.legal-content table{ width:100%; border:1px solid var(--line); font-size:.88rem; }
.legal-content table th, .legal-content table td{ border:1px solid var(--line); padding:.6rem .8rem; text-align:left; }
.legal-content table th{ background:var(--offwhite); font-weight:700; }

/* ---------- Admin sidebar keeps flat corporate look ---------- */
.admin-sidebar a{ letter-spacing:.2px; }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-ink);
  background-image:linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 100%);
  padding:1.5rem;
}
.login-card{
  max-width:400px; width:100%;
  border:1px solid var(--line);
  background:#fff;
}
.login-card .btn-mk{ width:100%; text-align:center; }

@media (max-width:767px){
  .hero h1{ font-size:2rem; }
  .cta-band{ padding:2.4rem 1.5rem; }
}

.image-hover-box img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.image-hover-box:hover img {
    opacity: 0.9; /* Blago posvijetli/potamni sliku */
    transform: scale(1.02); /* Blagi zum efekat, opciono */
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}