:root{
  --ink:#171310;
  --ink-2:#241d18;
  --crvena:#C4121F;
  --crvena-d:#8A0D17;
  --zlato:#B08D52;
  --papir:#F3F1ED;
  --bela:#FFFFFF;
  --siva:#6E675F;
  --linija:#DCD6CD;
  --bg:var(--papir);
  --tekst:var(--ink);
  --kart:#fff;
  --muted:var(--siva);
  --border:var(--linija);
  --maxw:1220px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13100E; --tekst:#EDE8E1; --kart:#1D1815; --muted:#A79E93; --border:#332A24; --papir:#13100E;
  }
}
:root[data-theme="dark"]{ --bg:#13100E; --tekst:#EDE8E1; --kart:#1D1815; --muted:#A79E93; --border:#332A24; --papir:#13100E; }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:74px}
body{
  margin:0; background:var(--bg); color:var(--tekst);
  font-family:"Golos Text","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
h1,h2,h3,.disp{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:-.01em}
h2{font-size:clamp(30px,4vw,46px); line-height:1.1; margin:0 0 .4em}
h3{font-size:clamp(21px,2.2vw,27px); line-height:1.2; margin:0 0 .35em}
p{margin:0 0 1.05em; max-width:74ch}
section{padding:clamp(60px,7vw,104px) 0; position:relative}
.sec-tamna{background:var(--ink); color:#F0EBE4}
.sec-tamna h2,.sec-tamna h3{color:#fff}
.sec-tamna p{color:#D6CFC6}

/* ——— header ——— */
header{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
}
.hrow{display:flex; align-items:center; gap:22px; height:72px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto}
.brand img{width:40px; height:40px; border-radius:50%; object-fit:cover}
.brand b{font-family:"Cormorant Garamond",serif; font-size:26px; letter-spacing:.06em; color:var(--crvena); font-weight:700; line-height:1}
.brand span{display:block; font-size:9.5px; letter-spacing:.17em; color:var(--muted); text-transform:uppercase; margin-top:2px}
nav.glavni{display:flex; gap:22px; margin-left:auto; align-items:center}
nav.glavni a{text-decoration:none; font-size:14.5px; color:var(--muted); padding:6px 0; border-bottom:2px solid transparent; transition:color .15s,border-color .15s}
nav.glavni a:hover{color:var(--tekst); border-color:var(--crvena)}
.btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--crvena); background:var(--crvena);
  color:#fff; padding:11px 22px; border-radius:2px; text-decoration:none; font-size:15px; font-weight:500;
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--crvena-d); border-color:var(--crvena-d)}
.btn.ghost{background:transparent; color:var(--crvena)}
.btn.ghost:hover{background:var(--crvena); color:#fff}
.btn.light{background:transparent; border-color:rgba(255,255,255,.5); color:#fff}
.btn.light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn.mali{padding:8px 15px; font-size:13.5px}
.hamb{display:none; margin-left:auto; background:none; border:1px solid var(--border); border-radius:2px; padding:8px 11px; color:var(--tekst)}

/* ——— hero ——— */
.hero{padding:0; background:var(--ink); color:#fff; overflow:hidden; position:relative}
.hero-slika{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.42}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(15,12,10,.94) 0%,rgba(15,12,10,.72) 42%,rgba(15,12,10,.55) 100%)}
.hero-in{position:relative; z-index:2; padding:clamp(72px,11vw,132px) 0 clamp(56px,7vw,90px)}
.hero .kicker{font-size:14px; letter-spacing:.2em; color:var(--zlato); margin:0 0 26px; display:flex; align-items:center; gap:14px}
.hero .kicker::before{content:""; width:46px; height:1px; background:var(--zlato)}
.hero h1{
  font-size:clamp(44px,7.4vw,96px); line-height:.98; margin:0 0 26px; color:#fff; font-weight:600; max-width:15ch;
}
.hero h1 em{font-style:italic; color:var(--zlato)}
.hero .lid{font-size:clamp(17px,1.5vw,20.5px); color:#DCD4CA; max-width:56ch; margin-bottom:34px}
.hero-akcije{display:flex; gap:14px; flex-wrap:wrap}
.hero-cifre{display:flex; gap:40px; margin-top:58px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.16); padding-top:26px}
.cifra b{display:block; font-family:"Cormorant Garamond",serif; font-size:40px; line-height:1; color:#fff; font-weight:600}
.cifra span{font-size:13px; color:#A79D92; letter-spacing:.04em}

/* ——— tačke / motiv ——— */
.tacka-citat{
  background:var(--ink-2); color:#F2ECE4; padding:clamp(44px,5vw,66px) 0;
}
.tacka-citat .wrap{display:flex; gap:38px; align-items:center; flex-wrap:wrap}
.tacka-citat p{font-family:"Cormorant Garamond",serif; font-size:clamp(24px,3.1vw,38px); line-height:1.24; margin:0; flex:1 1 420px; color:#fff}
.tacka-citat .mali{font-size:15px; color:#A79D92; flex:0 1 300px; font-family:"Golos Text",sans-serif}

/* ——— o nama ——— */
.dve{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:start}
.nadnaslov{font-size:13px; letter-spacing:.19em; color:var(--crvena); margin:0 0 14px; font-weight:600}
.sec-tamna .nadnaslov{color:var(--zlato)}
.istaknuto{
  border-left:3px solid var(--crvena); padding:4px 0 4px 22px; font-family:"Cormorant Garamond",serif;
  font-size:clamp(21px,2.3vw,27px); line-height:1.34; color:var(--tekst); margin:6px 0 26px;
}
.sec-tamna .istaknuto{color:#fff}
ul.tacke{list-style:none; padding:0; margin:0 0 20px}
ul.tacke li{position:relative; padding:9px 0 9px 30px; border-bottom:1px solid var(--border); max-width:70ch}
ul.tacke li::before{content:""; position:absolute; left:2px; top:19px; width:8px; height:8px; border-radius:50%; background:var(--crvena)}
.sec-tamna ul.tacke li{border-color:rgba(255,255,255,.12)}

/* ——— osnivači ——— */
.osn{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px}
.osn article{background:var(--kart); border:1px solid var(--border); border-radius:2px; overflow:hidden; display:flex; flex-direction:column}
.osn img{aspect-ratio:4/5; object-fit:cover; width:100%; filter:grayscale(.15)}
.osn .telo{padding:20px 22px 24px}
.osn h3{margin-bottom:2px}
.osn .glas{color:var(--crvena); font-size:13.5px; letter-spacing:.08em; margin-bottom:12px}
.osn p{font-size:15px; color:var(--muted); margin:0}

/* ——— organi ——— */
.predsednik{display:flex; gap:30px; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); padding:24px; border-radius:2px; margin-bottom:46px; flex-wrap:wrap}
.predsednik img{width:118px; height:148px; object-fit:cover; border-radius:2px}
.predsednik .t{flex:1 1 300px}
.odbori{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px)}
.clan-red{display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12); width:100%; background:none; border-left:0; border-right:0; border-top:0; text-align:left; color:inherit}
.clan-red:hover .cime{color:var(--zlato)}
.clan-red img{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.cime{font-size:16px; transition:color .15s}
.culoga{font-size:12.5px; color:var(--zlato)}
.csub{font-size:12.5px; color:#9E958B}

/* ——— članovi ——— */
.filteri{display:flex; gap:9px; flex-wrap:wrap; margin:26px 0 34px}
.filteri button{
  background:transparent; border:1px solid var(--border); color:var(--muted); padding:8px 17px; border-radius:100px; font-size:14px; transition:all .15s;
}
.filteri button:hover{border-color:var(--crvena); color:var(--crvena)}
.filteri button[aria-pressed="true"]{background:var(--crvena); border-color:var(--crvena); color:#fff}
.mreza{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:22px}
.kart{text-decoration:none; background:none; border:0; padding:0; text-align:left; color:inherit; display:flex; flex-direction:column}
.kart .ram{position:relative; overflow:hidden; background:var(--ink-2); border-radius:2px}
.kart img{aspect-ratio:4/5; width:100%; object-fit:cover; transition:transform .5s ease, filter .4s; filter:grayscale(.35) contrast(1.02)}
.kart:hover img,.kart:focus-visible img{transform:scale(1.035); filter:grayscale(0)}
.kart .ime{font-family:"Cormorant Garamond",serif; font-size:21px; line-height:1.15; margin:13px 0 2px}
.kart .glas{font-size:12.5px; color:var(--crvena); letter-spacing:.06em}
.prazno{color:var(--muted); padding:30px 0}

/* luk od tačaka */
.luk{margin:8px 0 6px; overflow:visible}
.luk circle{cursor:pointer; transition:fill .2s, r .2s}
.luk-wrap{position:relative; display:flex; justify-content:center}
.luk-ime{
  position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:14px; color:var(--muted);
  letter-spacing:.04em; min-height:20px; text-align:center; pointer-events:none;
}

/* ——— vesti ——— */
.vesti{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px}
.vest{background:var(--kart); border:1px solid var(--border); border-radius:2px; padding:24px; position:relative}
.vest time{font-size:12.5px; color:var(--crvena); letter-spacing:.07em}
.vest h3{margin:8px 0 8px; font-size:24px}
.vest p{font-size:15.5px; color:var(--muted); margin:0; white-space:pre-wrap}
.vest .obrisi{position:absolute; top:12px; right:12px; background:none; border:1px solid var(--border); color:var(--muted); border-radius:2px; padding:3px 9px; font-size:12px; display:none}
body.admin .vest .obrisi{display:block}
.prazno-stanje{border:1px dashed var(--border); padding:38px; text-align:center; color:var(--muted); border-radius:2px}

/* ——— baština ——— */
.pogl{border-top:1px solid var(--border)}
.pogl details{border-bottom:1px solid var(--border)}
.pogl summary{
  cursor:pointer; list-style:none; padding:26px 0; display:flex; gap:20px; align-items:baseline;
  font-family:"Cormorant Garamond",serif; font-size:clamp(24px,2.8vw,34px);
}
.pogl summary::-webkit-details-marker{display:none}
.pogl summary .rim{color:var(--crvena); font-size:19px; width:34px; flex:0 0 34px}
.pogl summary::after{content:"+"; margin-left:auto; color:var(--muted); font-size:26px; font-family:"Golos Text",sans-serif}
.pogl details[open] summary::after{content:"–"}
.pogl .telo{padding:0 0 30px 54px; max-width:80ch}
.pogl .telo h4{font-family:"Cormorant Garamond",serif; font-size:22px; margin:28px 0 10px; font-weight:600; color:var(--crvena-d)}
.pogl .telo p{font-size:16.5px; color:var(--muted)}

/* ——— forma ——— */
.forma{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:760px}
.polje{display:flex; flex-direction:column; gap:7px}
.polje.puno{grid-column:1/-1}
label{font-size:13.5px; color:var(--muted); letter-spacing:.03em}
input,select,textarea{
  font:inherit; font-size:15.5px; padding:12px 14px; border:1px solid var(--border); background:var(--kart);
  color:var(--tekst); border-radius:2px; width:100%;
}
.sec-tamna input,.sec-tamna select,.sec-tamna textarea{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--crvena); outline-offset:1px}
textarea{min-height:120px; resize:vertical}
.poruka{font-size:15px; padding:12px 0; color:var(--zlato)}

/* ——— kontakt / footer ——— */
.kontakt-mreza{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:30px}
.kontakt-mreza dt{font-size:12.5px; letter-spacing:.14em; color:var(--muted); margin-bottom:5px}
.kontakt-mreza dd{margin:0 0 18px; font-size:16px}
footer{background:var(--ink); color:#9E958B; padding:56px 0 30px; font-size:14px}
footer .fmreza{display:grid; grid-template-columns:1.3fr .8fr 1fr; gap:44px}
footer .slogan{font-family:"Cormorant Garamond",serif; font-size:26px; color:#fff; line-height:1.2}
footer .fadr{margin:12px 0 0; font-size:14px; color:#9E958B; max-width:34ch}
.fnaslov{display:block; font-size:11px; letter-spacing:.18em; color:#7E756B; margin-bottom:14px; text-transform:uppercase}
footer .fnav{display:flex; flex-direction:column; gap:8px}
footer .fnav a{text-decoration:none; color:#BFB6AB; font-size:14.5px; width:fit-content; border-bottom:1px solid transparent}
footer .fnav a:hover{color:#fff; border-color:var(--crvena)}
footer .fkol{display:flex; flex-direction:column; justify-content:space-between; gap:34px}
.mreze{display:flex; gap:12px}
.mreze a{
  width:42px; height:42px; border:1px solid rgba(255,255,255,.18); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#BFB6AB; transition:all .18s;
}
.mreze a:hover{background:var(--crvena); border-color:var(--crvena); color:#fff; transform:translateY(-2px)}
.mreze svg{width:19px; height:19px; fill:currentColor}
.izrada a{display:inline-block}
.de-logo{height:30px; width:auto; object-fit:contain; filter:grayscale(1) brightness(1.7); opacity:.8; transition:all .3s}
.izrada a:hover .de-logo{filter:none; opacity:1}
.de-tekst{font-family:"Cormorant Garamond",serif; font-size:19px; color:#CFC6BB; letter-spacing:.02em}
.izrada a:hover .de-tekst{color:#fff}
footer .fdno{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:#7E756B;
  border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding-top:22px}
@media (max-width:900px){footer .fmreza{grid-template-columns:1fr; gap:34px}}

/* ——— modal ——— */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center; padding:24px; overflow:auto; background:rgba(12,9,7,.72); backdrop-filter:blur(3px)}
.modal[open],.modal.otvoren{display:flex}
.modal-box{background:var(--bg); max-width:1000px; width:100%; border-radius:2px; position:relative; margin:auto; border:1px solid var(--border)}
.zatvori{position:absolute; top:12px; right:12px; z-index:3; background:var(--bg); border:1px solid var(--border); color:var(--tekst); width:38px; height:38px; border-radius:50%; font-size:20px; line-height:1}
.bio{display:grid; grid-template-columns:330px minmax(0,1fr); gap:0}
.bio .foto{background:var(--ink-2)}
.bio .foto img{width:100%; height:100%; object-fit:cover; min-height:420px}
.bio .tekst{padding:clamp(28px,3.5vw,46px); max-height:84vh; overflow:auto}
.bio h2{margin-bottom:4px}
.bio .glas{color:var(--crvena); letter-spacing:.1em; font-size:14px; margin-bottom:22px}
.bio h4{font-family:"Cormorant Garamond",serif; font-size:21px; margin:26px 0 8px; color:var(--crvena-d)}
.bio p{font-size:16px; color:var(--muted); max-width:66ch}
.mala-modal{max-width:460px; padding:34px}
.mala-modal h3{margin-bottom:16px}

/* admin */
#adminPanel{display:none}
body.admin #adminPanel{display:block}
.tabovi{display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:24px; flex-wrap:wrap}
.tabovi button{background:none; border:0; border-bottom:2px solid transparent; padding:11px 14px; color:var(--muted); font-size:15px}
.tabovi button[aria-selected="true"]{color:var(--crvena); border-color:var(--crvena)}
.panel{display:none}
.panel.aktivan{display:block}
.napomena{font-size:13.5px; color:var(--muted); border:1px solid var(--border); border-left:3px solid var(--zlato); padding:14px 16px; border-radius:2px; margin-bottom:26px; max-width:76ch}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:top}
th{font-size:12px; letter-spacing:.1em; color:var(--muted); font-weight:600}
:focus-visible{outline:2px solid var(--crvena); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto}}
@media (max-width:900px){
  .dve,.odbori,.osn,.bio,.forma{grid-template-columns:1fr}
  .bio .foto img{min-height:260px; max-height:340px}
  nav.glavni{display:none; position:absolute; top:72px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--border); flex-direction:column; gap:0; padding:10px 24px 20px}
  nav.glavni.open{display:flex}
  nav.glavni a{padding:12px 0; border-bottom:1px solid var(--border); width:100%}
  .hamb{display:block}
  .luk-wrap{display:none}
}


/* ——— страница члана ——— */
.putanja{font-size:13.5px; color:var(--muted); padding:26px 0 0}
.putanja a{text-decoration:none; border-bottom:1px solid var(--border)}
.putanja a:hover{color:var(--crvena); border-color:var(--crvena)}
.clan-glava{display:grid; grid-template-columns:400px minmax(0,1fr); gap:clamp(30px,5vw,64px); padding:36px 0 0; align-items:start}
.clan-glava .portret{border-radius:2px; overflow:hidden; background:var(--ink-2); position:sticky; top:96px}
.clan-glava .portret img{width:100%; aspect-ratio:4/5; object-fit:cover}
.clan-glava h1{font-family:"Cormorant Garamond",serif; font-size:clamp(38px,5.4vw,64px); line-height:1.02; margin:0 0 8px; font-weight:600}
.clan-glava .glas{color:var(--crvena); letter-spacing:.12em; font-size:15px; margin-bottom:26px}
.clan-telo h2{font-family:"Cormorant Garamond",serif; font-size:25px; margin:34px 0 10px; color:var(--crvena-d); font-weight:600}
.clan-telo p{font-size:17px; color:var(--muted); max-width:70ch}
.srodni{border-top:1px solid var(--border); margin-top:60px; padding-top:40px}
.srodni .mreza{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.povratak{display:inline-flex; gap:9px; align-items:center; margin-top:40px; text-decoration:none; color:var(--crvena); border-bottom:1px solid transparent}
.povratak:hover{border-color:var(--crvena)}
@media (max-width:900px){.clan-glava{grid-template-columns:1fr} .clan-glava .portret{position:static; max-width:340px}}

/* ——— слика уз вест ——— */
.vest-slika{width:calc(100% + 48px); margin:-24px -24px 18px; aspect-ratio:25/16; object-fit:cover}

/* ——— панел за уређивање ——— */
.prijava-ekran{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--ink)}
.prijava-kutija{background:var(--kart); border:1px solid var(--border); border-radius:2px; padding:40px; width:100%; max-width:420px; text-align:center}
.prijava-kutija img{margin:0 auto 18px; border-radius:50%}
.prijava-kutija h1{font-family:"Cormorant Garamond",serif; font-size:30px; margin:0 0 24px; font-weight:600}
.prijava-kutija .polje{text-align:left; margin-bottom:16px}
.prijava-kutija .btn{width:100%; justify-content:center}
.prijava-kutija .nazad{display:block; margin-top:20px; font-size:14px; color:var(--muted); text-decoration:none}
.admin-telo{background:var(--bg)}
.admin-glava{padding:34px 0 80px}
.admin-glava h1{font-family:"Cormorant Garamond",serif; font-size:34px; margin:0 0 20px; font-weight:600}
.admin-glava h2{font-size:26px}
.admin-glava .forma{max-width:820px}
.admin-glava .tabovi{display:flex; gap:4px; border-bottom:1px solid var(--border); margin:0 0 30px; flex-wrap:wrap}
.admin-glava .tabovi a{text-decoration:none; padding:12px 16px; color:var(--muted); border-bottom:2px solid transparent; font-size:15px}
.admin-glava .tabovi a[aria-selected="true"]{color:var(--crvena); border-color:var(--crvena)}
.obavestenje{background:rgba(176,141,82,.12); border-left:3px solid var(--zlato); padding:13px 16px; margin:0 0 22px; font-size:15px; border-radius:2px}
.upozorenje{background:rgba(196,18,31,.09); border-left:3px solid var(--crvena); padding:13px 16px; margin:0 0 22px; font-size:15px; border-radius:2px}
td.radnje{white-space:nowrap}
td.radnje a,.veza-dugme{font-size:13.5px; color:var(--crvena); background:none; border:0; padding:0 8px 0 0; text-decoration:none; cursor:pointer}
td.radnje form{display:inline}
.veza-dugme:hover,td.radnje a:hover{text-decoration:underline}
input[type=file]{padding:9px; background:transparent}