:root{
  --bg:#ffffff; --text:#111; --muted:#6b7280; --line:#e5e7eb; --primary:#0d6efd;
}
*{box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{height:38px}
.menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.menu a{padding:8px 10px;border-radius:10px}
.menu a:hover{background:#f7f7f7}
.hero{background:#0b0b0b;color:#fff}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.hero .media{width:100%;overflow:hidden;background:#000}
.hero .media img{display:block;width:100%;height:auto;object-fit:contain}
.hero .content{padding:28px 0}
.hero h1{font-size:clamp(28px,5vw,46px);line-height:1.1;margin:0 0 10px}
.hero p.lead{margin:0 0 16px;color:#d1d5db;font-size:clamp(16px,2.2vw,20px)}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid transparent;font-weight:600}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{border-color:#9ca3af;color:#fff}
.section{padding:56px 0}
.section h2{font-size:clamp(22px,3.6vw,32px);margin:0 0 6px}
.section p.sub{margin:0 0 24px;color:var(--muted)}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:991px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:#fff;border-radius:16px;overflow:hidden}
.card .pad{padding:16px}
.gallery a{display:block}
.gallery img{width:100%;height:auto;object-fit:cover;aspect-ratio:1/1;display:block}
.list{margin:0;padding-left:18px}
.badge{display:inline-block;background:#f3f4f6;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:#374151}
.footer{border-top:1px solid var(--line);color:#6b7280;padding:24px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.two-col{grid-template-columns:1fr}}

/* Category blocks in gallery */
.gallery .group{margin-bottom:20px}
.gallery .group h3{margin:10px 0 10px;font-size:18px;color:#374151}
.gallery .group .grid{margin-top:6px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--line);padding:10px;text-align:left;font-size:14px}
.table th{background:#f9fafb}


/* Mobile hamburger */
.toggle-btn{display:none;background:transparent;border:0;cursor:pointer;padding:8px;margin-left:auto}
.toggle-btn .bar{display:block;width:26px;height:2px;background:#111;margin:5px 0;border-radius:2px}
@media(max-width:768px){
  .menu{position:absolute;top:56px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);display:none;flex-direction:column;gap:0}
  .menu li{border-top:1px solid var(--line)}
  .menu a{display:block;padding:12px 16px}
  .menu.open{display:flex}
  .toggle-btn{display:inline-block}
  .nav{position:relative}
}


.hero { position: relative; text-align: center; color: #fff; }
.hero .media img { width: 100%; height: auto; object-fit: cover; }
.hero .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hero .content img { filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }


.hero .media{position:relative}
.hero .media .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}
.hero .media picture,
.hero .media img{position:relative;z-index:0}
.hero .content{z-index:1;color:#fff}



.hero { position: relative; height: 100vh; max-height: 100vh; overflow: hidden; }
.hero .media img { width: 100%; height: 100%; object-fit: cover; }

.hero .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hero .content-box {
  display: inline-block;
  background: rgba(0,0,0,0.55);
  padding: 20px 30px;
  border-radius: 12px;
}

.hero .content h1,
.hero .content p,
.hero .content a { color: #fff; }


/* Hero height fix */
.hero { height: 70vh; max-height: 800px; }
@media (max-width: 991px) {
  .hero { height: 100vh; max-height: none; }
}


.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand img {
  display: block;
  height: 36px;
  width: auto;
}

.brand span {
  font-weight: 700;
  font-size: 1.1rem;
  color: #111; /* crni tekst */
}


/* NAVBAR: logo uvijek na potpuno bijeloj podlozi bez sjena i blendanja */
.header .brand{ background:transparent !important; }
.header .brand img{
  display:block;
  height:36px; width:auto;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}
/* Ako postoji generičko pravilo koje daje sjenu na svim <img>, ovo ga gasi */
.header img{ filter:none !important; box-shadow:none !important; }



.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:2000}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:12px}
.lb-close{position:absolute;top:16px;right:16px;font-size:28px;border:0;background:#fff;border-radius:50%;width:40px;height:40px;cursor:pointer}


/* Pager bez JS (radio) */
.gal-pager{display:flex;gap:8px;margin:8px 0 16px;align-items:center}
.gal-pager input{display:none}
.gal-pager label{
  border:1px solid var(--line); border-radius:10px; padding:6px 10px; cursor:pointer; user-select:none;
}
.gal-pager input#galp1:checked + label,
.gal-pager input#galp2:checked + label{ background:#111; color:#fff; border-color:#111 }

/* Stranice – pokaži jednu, sakrij drugu (bez JS) */
.gal-page{display:none}
#galp1:checked ~ .gal-page.p1{display:block}
#galp2:checked ~ .gal-page.p2{display:block}





/* GRID layout */
#gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 991.98px) {
  #gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  #gallery-grid { grid-template-columns: 1fr; }
}

/* Item styling + animacija */
#gallery-grid .gallery-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
#gallery-grid .gallery-item.is-visible {
  opacity: 1;
  transform: none;
}
#gallery-grid .gallery-item.is-hidden {
  display: none !important;
}

#gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.aspect-square{aspect-ratio:1/1}
.object-cover{object-fit:cover;width:100%;height:100%}
.gallery-card{transform:translateZ(0);transition:transform .2s ease,opacity .2s ease}
.gallery-card:hover{transform:scale(1.02)}
.gallery-item{display:none}
.gallery-item.show{display:block}
#gallery-filters{gap:.75rem;margin-bottom:1.25rem}
#gallery-grid{margin-top:.5rem}
.filter-btn{border-radius:999px;padding:.5rem 1rem;border:1px solid #dee2e6;background:#fff;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.filter-btn:hover{box-shadow:0 2px 6px rgba(0,0,0,.08)}
.filter-btn.active{background:#111;color:#fff;border-color:#111}
#load-more{margin-top:1rem;border-radius:999px;padding:.5rem 1.25rem}


#gallery-grid .gallery-item{display:none}
#gallery-grid .gallery-item.is-visible{display:block;opacity:1;transform:none}
#gallery-grid .gallery-item.is-hidden{display:none}

#gallery-filters{gap:.75rem;margin-bottom:1.25rem}
#gallery-grid{margin-top:.5rem}
.filter-btn{border-radius:999px;padding:.5rem 1rem;border:1px solid #dee2e6;background:#fff;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.filter-btn:hover{box-shadow:0 2px 6px rgba(0,0,0,.08)}
.filter-btn.active{background:#111;color:#fff;border-color:#111}
#load-more{margin-top:1rem;border-radius:999px;padding:.5rem 1.25rem}



/* OBJAVE */
#objave .card-img-top {
  height: 220px;              /* kontrolirana visina slike */
  object-fit: cover;          /* da se lijepo izreže */
}

#objave .card-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

#objave .card-text {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1rem;
}


/* Hover efekt za objave */
#objave .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#objave .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.15);
}

#objave .card-img-top {
  transition: transform 0.4s ease;
}

#objave .card:hover .card-img-top {
  transform: scale(1.05);
}


/* OBJAVE: 1 u redu na mob, 2 u redu na >=992px, neovisno o Bootstrapu */
#objave .row{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* razmak između kartica */
  margin: 0;   /* neutraliziraj moguće negativne margine/gutter */
}
@media (min-width: 992px){
  #objave .row{
    grid-template-columns: 1fr 1fr; /* 2 kolone na desktopu */
  }
}

/* sigurnosno: neka kartice ne imaju max-width koja bi ih širila/lomila red */
#objave .card{ max-width: none; width: 100%; }




/* OBJAVE — horizontalni layout s wrap teksta oko slike */
#objave .card-body { position: relative; }
#objave .card-body::after { content: ""; display: block; clear: both; } /* clearfix */

#objave .thumb {
  float: left;
  width: 320px;           /* jedinstvena širina slike */
  height: 220px;          /* jedinstvena visina */
  object-fit: cover;      /* crop bez deformacije */
  border-radius: .75rem;
  margin: 0 1rem .75rem 0;/* razmak od teksta */
  display: block;
}

/* gumbi pri dnu */
#objave .btn { margin-top: .75rem; }

/* Mobile: slika iznad teksta, full width */
@media (max-width: 767.98px){
  #objave .thumb{
    float: none;
    width: 100%;
    height: auto;
    margin: 0 0 1rem 0;
  }
}




:root{
  --brand:#0d6efd;          /* primarna */
  --brand-2:#6f42c1;        /* akcent */
  --ink:#111;
  --muted:#6c757d;
  --bg:#fff;
  --soft:#f8f9fa;
  --grad-hero: linear-gradient(180deg, rgba(13,110,253,.14), rgba(111,66,193,.14));
}

/* utility */
.text-gradient{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.shadow-soft{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.card-hover{transition:transform .25s ease, box-shadow .25s ease}
.card-hover:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,.12)}
.badge-soft{background:rgba(13,110,253,.08); color:var(--brand)}
.btn-soft{background:rgba(13,110,253,.1); border-color:transparent}
.btn-soft:hover{background:rgba(13,110,253,.18)}
.ratio>.img-cover, .img-cover{object-fit:cover; width:100%; height:100%}
.rounded-2xl{border-radius:1.25rem!important}



.navbar.sticky-top{backdrop-filter:saturate(180%) blur(8px); background-color:rgba(255,255,255,.8)}
.nav-scrolled{box-shadow:0 6px 20px rgba(0,0,0,.08)}


.hero{position:relative; background:var(--grad-hero)}
.hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80rem 40rem at 10% -10%, rgba(13,110,253,.18), transparent 60%),
             radial-gradient(80rem 40rem at 110% 10%, rgba(111,66,193,.18), transparent 60%);
  pointer-events:none;
}


.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}


.section-title{position:relative; display:inline-block}
.section-title::after{
  content:""; position:absolute; left:0; right:0; bottom:-.5rem; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:3px;
}


/* === MahnetInterijeri – živi akcenti i efekti === */
:root{
  --mi-primary: #0ea5b0;   /* teal akcent */
  --mi-primary-600:#0b8e97;
  --mi-accent:  #f59e0b;   /* topla drvena/amber */
  --mi-deco:    #8b5e3c;   /* wood brown za tanke linije */
  --mi-surface: #f8fafc;   /* svijetla pozadina sekcija */
  --mi-ink:     #0f172a;   /* tamni tekst */
}

body{color:var(--mi-ink)}

/* Sekcijski „accent strip” i mekani gradient */
.section-accent{
  background:
    linear-gradient(180deg, rgba(14,165,176,.08), transparent 55%),
    linear-gradient(90deg, rgba(245,158,11,.06), transparent 40%),
    var(--mi-surface);
  position: relative;
}
.section-accent::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:6px;
  background: linear-gradient(90deg, var(--mi-accent), var(--mi-primary));
  opacity:.8;
}

/* Naslovi s akcent crtom */
.h-accent, .section-title{
  position:relative; display:inline-block;
}
.h-accent::after, .section-title::after{
  content:"";
  position:absolute; left:0; bottom:-10px; height:3px; width:64%;
  background: linear-gradient(90deg,var(--mi-primary),var(--mi-accent));
  border-radius:3px;
}

/* Gumbi – „življi” varijante */
.btn-mi{
  --_bg: var(--mi-primary);
  --_bgH: var(--mi-primary-600);
  --_fg: #fff;
  background: var(--_bg); color: var(--_fg); border:0; border-radius:999px;
  padding:.6rem 1.1rem; font-weight:600; letter-spacing:.02em;
  box-shadow: 0 8px 20px -10px var(--mi-primary);
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease, opacity .2s ease;
}
.btn-mi:hover{ background:var(--_bgH); transform: translateY(-1px); box-shadow: 0 12px 28px -12px var(--mi-primary); }
.btn-mi-outline{
  background:transparent; color:var(--mi-primary); border:2px solid var(--mi-primary);
  box-shadow:none;
}
.btn-mi-outline:hover{ color:#fff; background:var(--mi-primary); }

/* Kartice – suptilni lift i bordura akcenta */
.card-raise{
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, outline .2s ease;
  border:1px solid rgba(15,23,42,.08);
}
.card-raise:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -20px rgba(2,8,23,.35);
  border-color: rgba(14,165,176,.35);
}

/* Galerija – zoom & overlay titl */
.gallery-card{ position:relative; overflow:hidden; border-radius:.75rem; }
.gallery-card img{ width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.gallery-card::after{
  content: attr(data-caption);
  position:absolute; left:0; right:0; bottom:-3rem;
  padding:.6rem .9rem; font-size:.95rem; font-weight:600;
  color:#0b1324; background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  transition: transform .35s ease, opacity .35s ease, bottom .35s ease;
  opacity:0;
}
.gallery-card:hover img{ transform: scale(1.06); }
.gallery-card:hover::after{ bottom:.6rem; opacity:1; }

/* Ikonice s obojenim „chipom” */
.icon-chip{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px;
  background:linear-gradient(180deg, rgba(14,165,176,.15), rgba(14,165,176,.05));
  color:var(--mi-primary);
  box-shadow: inset 0 0 0 1px rgba(14,165,176,.25);
}

/* Divider s drvenom notom */
.hr-deco{
  height:1px; border:0; background:
    linear-gradient(90deg, transparent, var(--mi-deco), transparent);
  opacity:.45; margin:2rem 0;
}

/* Navbar – underline na hover/active */
.navbar .nav-link{
  position:relative; font-weight:600;
}
.navbar .nav-link::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.35rem; height:2px;
  background: linear-gradient(90deg, var(--mi-accent), var(--mi-primary));
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{ transform: scaleX(1); }

/* Scroll-reveal animacije (klase + početno stanje) */
.reveal{ opacity:0; transform: translateY(10px); }
.reveal.show{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }

/* Utility: mekani „glass” za istaknute okvire */
.glass{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px -20px rgba(2,8,23,.35);
  border:1px solid rgba(255,255,255,.6);
  border-radius: 1rem;
}










/* ===== OBAVE / NOVOSTI: stabilna mreža i jednake kartice ===== */
/* Ako ti je sekcija #objave — ostavi selektor; ako je #novosti, zamijeni ga u nastavku. */
#objave .row.g-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* g-4 spacing */
}
@media (min-width: 992px) {
  #objave .row.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Poništi legacy bootstrap kolone unutar naše gride (da ne “guraju” širinu/padding). */
#objave .row.g-4 > [class*="col"] {
  padding: 0;
  margin: 0;
  width: auto;
}

/* Kartice iste visine + gumb pri dnu. */
#objave .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0;
  border-radius: .75rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.06);
}
#objave .card-body {
  display: flex;
  flex-direction: column;
}
#objave .card .btn { margin-top: auto; }

/* Ujednači slike (bilo .thumb u bodyju ili .card-img-top). */
#objave img.thumb,
#objave .card-img-top {
  display: block;
  width: 100%;
  height: 240px;                /* po potrebi 220–280px */
  object-fit: cover;
  border-radius: .75rem;
  margin-bottom: .75rem;
}
@media (min-width: 768px) {
  #objave img.thumb,
  #objave .card-img-top { height: 260px; }
}

/* Fallback za g-4 ako bootstrap varijable nisu prisutne. */
#objave .row.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

/* Sitna tipografija za tekst unutar kartica. */
#objave .card-title { margin-bottom: .5rem; }
#objave .card-text { color: #666; line-height: 1.4; }



/* ===== GALERIJA (live: #gallery-grid) – stabilan grid i uredne pločice ===== */

/* Pretvorimo .row.g-3 u pravi CSS grid */
#gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem; /* ≈ g-3 */
}
@media (min-width: 992px) {
  #gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Poništi Bootstrap .col padding/width unutar našeg CSS grida */
#gallery-grid > [class*="col"] {
  padding: 0;
  margin: 0;
  width: auto;
}

/* Kartica slike – kvadrat, uredan crop; radi ako koristiš .gallery-card */
#gallery-grid .gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: .75rem;
  aspect-ratio: 1 / 1; /* kvadratne pločice; promijeni u 4/3 po želji */
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.06);
}

/* Slika unutar kartice ili direktno u gridu – uvijek popuni pločicu */
#gallery-grid .gallery-card img,
#gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: .75rem; /* zadrži za slučaj da nema .gallery-card wrap */
}

/* Lagani hover (ako postoji .gallery-item/.gallery-card struktura) */
#gallery-grid .gallery-card::after {
  content: "";
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  transition: .2s;
}
#gallery-grid .gallery-item:hover .gallery-card::after {
  opacity: .08;
}

/* Fallback za g-3 razmake ako Bootstrap varijable nisu aktivne */
#gallery-grid.row.g-3 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.filter-help, .filter-guidelines { display: none !important; }


#edit-body-0-format-help {
  display: none !important;
}



/* === Mobile nav panel fix (z-index, pozadina, položaj) === */


@media (max-width: 991.98px) {
  .nav { position: relative; }

  /* Panel koji se otvara */
  .menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;                        /* default zatvoreno */
    flex-direction: column;
    gap: 0;
    background: #fff;                     /* PUNA pozadina da se jasno vidi */
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 28px rgba(0,0,0,.12);
  }
  .menu.open { display: flex; }
  .menu li { border-top: 1px solid var(--line); }
  .menu a { display: block; padding: 12px 16px; }

  .toggle-btn { display: inline-block; }  /* pokaži hamburger */
}














/* === DRUPAL ADMIN TOOLBAR + SITE NAVBAR (bez z-indexa) === */

/* 0) Za svaki slučaj resetiraj “trikove” ako su postojali */
.user-logged-in header.header {
  position: relative !important;
  top: auto !important;
  margin-top: 0; /* početno, prije izračuna ispod */
}

/* 1) Kad je toolbar fiksiran (smanjeni jedan red ~39px), spusti header */
body.toolbar-fixed header.header {
  margin-top: 39px;
}

/* 2) Kad je otvorena tray ladica (dvije razine), dodatno ga spusti (~79px) */
body.toolbar-fixed.toolbar-tray-open header.header {
  margin-top: 79px;
}

/* 3) (opcionalno) da #anchor linkovi ne završe ispod toolbara + headera */
html, body {
  scroll-padding-top: 80px; /* fino podešavanje po želji */
}



#gallery-grid .gallery-item { display: block !important; }
#gallery-grid .gallery-item.d-none { display: block !important; }




.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
/* prihvati i .in i .show kao “vidljivo” */
.reveal.in,
.reveal.show{opacity:1; transform:none}


/* Hot-fix: Galerija – prisili prikaz slike unutar .gallery-item */
.gallery-item{
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: none !important;   /* ukloni eventualni "reveal" pomak */
}
.gallery-item[style*="display:none"] { display:block !important; } /* ako je inline display:none */




#imageModal .btn-close{
  filter: invert(1) grayscale(100%); /* učini ikonu bijelom */
  opacity: 1;
}
#imageModal .btn-close::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  background:rgba(0,0,0,.35); /* diskretna tamna “pločica” ispod X-a */
}