/* Moj Pirot — digitalni brend v3 */
:root {
  --mp-navy:#0D1B2A; --mp-navy-2:#142A3D; --mp-red:#B71C1C; --mp-red-dark:#8E1414;
  --mp-sand:#D9C9A3; --mp-bg:#F6F4EF; --mp-card:#FFFFFF; --mp-line:#E7E0D2;
  --mp-text:#0D1B2A; --mp-muted:#5B6875; --mp-radius:18px;
  --mp-shadow:0 16px 40px rgba(13,27,42,.10); --mp-shadow-soft:0 8px 24px rgba(13,27,42,.07);
}
body { background:#fff; }
.wrap { max-width:1180px; padding-left:24px; padding-right:24px; }
main.wrap { padding-top:28px; padding-bottom:76px; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:9999; background:#fff; color:var(--mp-navy); padding:10px 14px; border-radius:10px; box-shadow:var(--mp-shadow); }
.skip-link:focus { top:16px; }
.sr-only { 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; }

.site-head { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); border-bottom:1px solid rgba(13,27,42,.08); box-shadow:0 5px 18px rgba(13,27,42,.05); }
.head-in { min-height:76px; padding-top:9px; padding-bottom:9px; flex-wrap:nowrap; }
.brand { min-width:max-content; gap:12px; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px var(--mp-line),0 8px 18px rgba(13,27,42,.08); overflow:hidden; }
.brand-mark img { width:38px; height:auto; }
.brand-copy small { font-size:.57rem; letter-spacing:.16em; }
.wordmark { font-size:1.38rem; }
.main-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.main-nav a { color:var(--mp-muted); text-decoration:none; font-size:.82rem; font-weight:600; padding:10px 11px; border-radius:10px; transition:.2s ease; }
.main-nav a:hover,.main-nav a.on { color:var(--mp-navy); background:#F3EFE7; box-shadow:none; }
.main-nav .nav-cta { color:#fff; background:var(--mp-red); margin-left:6px; padding:11px 15px; }
.main-nav .nav-cta:hover,.main-nav .nav-cta.on { color:#fff; background:var(--mp-red-dark); }
.nav-toggle { display:none; width:44px; height:44px; margin-left:auto; border:0; border-radius:12px; background:#F3EFE7; padding:11px; cursor:pointer; }
.nav-toggle span:not(.sr-only) { display:block; height:2px; background:var(--mp-navy); margin:5px 0; border-radius:2px; }

/* Hero: fotografija Pirota u punom kadru — proporcije heroja prate
   proporcije fotografije (1080x610), pa se na desktopu ništa ne iseca. */
/* Pažnja: aspect-ratio + min-height zajedno bi PROŠIRILI hero preko ekrana
   (transferovana veličina), zato min-height ovde ne sme da postoji. */
.home-hero { position:relative; aspect-ratio:1080/610; max-width:100%; border-radius:24px; overflow:hidden;
  background:url('../slike/pirot-hero.jpg') center/cover no-repeat #0D1B2A;
  box-shadow:var(--mp-shadow); }
.home-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,18,31,.78) 0%,rgba(6,18,31,.48) 44%,rgba(6,18,31,.08) 100%); }
.home-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:12px;
  background-color:#0D1B2A; background-repeat:repeat-x; background-size:28px 12px;
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="12" viewBox="0 0 28 12"%3E%3Crect width="28" height="12" fill="%230D1B2A"/%3E%3Cpath d="M7 1 L12 6 L7 11 L2 6 Z" fill="%23B71C1C"/%3E%3Cpath d="M21 1 L26 6 L21 11 L16 6 Z" fill="%23D9C9A3"/%3E%3C/svg%3E'); }
.home-hero-content { position:relative; z-index:1; color:#fff; max-width:680px; padding:68px 64px 110px; }
.home-hero .eyebrow { color:var(--mp-sand); }
.home-hero h1 { font-size:clamp(2.7rem,6vw,5rem); line-height:1.02; letter-spacing:-.045em; margin-bottom:22px; }
.home-hero .lead { color:rgba(255,255,255,.9); font-size:1.08rem; max-width:58ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.hero-primary { background:var(--mp-red); }
.hero-secondary { background:#fff; color:var(--mp-navy); box-shadow:none; }
.hero-secondary:hover { background:#F3EFE7; color:var(--mp-navy); }

.brand-actions { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:-62px 34px 32px; background:#fff; border:1px solid var(--mp-line); border-radius:18px; overflow:hidden; box-shadow:var(--mp-shadow); }
.brand-action { min-height:132px; display:flex; gap:15px; align-items:flex-start; padding:20px; color:var(--mp-text); text-decoration:none; border-right:1px solid var(--mp-line); transition:.2s ease; }
.brand-action:last-child { border-right:0; }
.brand-action:hover { background:#FBF9F5; transform:translateY(-2px); }
.brand-action-icon { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:1.45rem; flex:0 0 auto; }
.brand-action.red .brand-action-icon { background:var(--mp-red); }
.brand-action.navy .brand-action-icon { background:var(--mp-navy); }
.brand-action.sand .brand-action-icon { background:var(--mp-sand); color:#fff; }
.brand-action b { display:block; text-transform:uppercase; font-size:.78rem; margin:3px 0 8px; }
.brand-action small { display:block; color:var(--mp-muted); font-size:.75rem; line-height:1.45; }

.home-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0 0 44px; background:var(--mp-navy); border-radius:16px; overflow:hidden; box-shadow:var(--mp-shadow-soft); }
.home-stats div { color:#fff; padding:20px; text-align:center; background:rgba(255,255,255,.025); }
.home-stats b { display:block; font-size:1.65rem; }
.home-stats span { display:block; margin-top:4px; font-size:.73rem; color:rgba(255,255,255,.72); text-transform:uppercase; letter-spacing:.08em; }

.home-section { margin:0 0 44px; }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:18px; }
.section-heading h2 { font-size:1.65rem; }
.section-heading a { text-decoration:none; font-weight:600; }
.news-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.news-card { overflow:hidden; background:#fff; border:1px solid var(--mp-line); border-radius:16px; box-shadow:var(--mp-shadow-soft); transition:.2s ease; }
.news-card:hover { transform:translateY(-3px); box-shadow:var(--mp-shadow); }
.news-image { width:100%; height:170px; object-fit:cover; display:block; background:#EDE8DE; }
.placeholder-image { background:linear-gradient(135deg,#D9C9A3,#EEE8DC); }
.news-body { padding:16px; }
.news-tag { display:inline-block; color:#fff; background:var(--mp-red); font-size:.62rem; line-height:1; font-weight:700; text-transform:uppercase; border-radius:999px; padding:6px 8px; margin-bottom:10px; }
.news-body h3 { font-size:1rem; min-height:3.5em; }
.news-body p { color:var(--mp-muted); font-size:.76rem; margin:.55rem 0 .9rem; }
.news-meta { display:flex; justify-content:space-between; gap:10px; align-items:center; }

.home-info-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:18px; }
.home-info-card { padding:28px; }
.home-info-card h2 { font-size:1.55rem; }
.confidential-card { background:linear-gradient(145deg,#F7F2E9,#fff); }
.home-steps { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.home-steps li { display:flex; gap:12px; align-items:flex-start; }
.home-steps li>span { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:var(--mp-red); color:#fff; font-weight:700; }
.home-steps b { display:block; font-size:.9rem; }
.home-steps small { display:block; color:var(--mp-muted); font-size:.76rem; margin-top:4px; }

.card,.panel,.tile,.brojka { border-color:var(--mp-line); border-radius:var(--mp-radius); box-shadow:var(--mp-shadow-soft); }
.card,.panel { padding:22px; }
.grid-2,.grid-3 { gap:18px; }
.btn { border-radius:12px; min-height:46px; padding:12px 20px; transition:.15s ease; box-shadow:0 8px 18px rgba(183,28,28,.16); }
.btn:hover { transform:translateY(-1px); box-shadow:0 12px 24px rgba(183,28,28,.23); }
.btn.ghost { box-shadow:none; background:#fff; }
input[type=text],input[type=email],input[type=password],input[type=file],textarea,select { border-radius:12px; border:1px solid #D9D4C8; padding:13px 14px; }
input:focus,textarea:focus,select:focus { border-color:var(--mp-red); box-shadow:0 0 0 4px rgba(183,28,28,.08); outline:none; }
label { color:var(--mp-navy); }

.site-foot { background:var(--mp-navy); color:#fff; margin-top:56px; }
.site-foot .kilim-band { opacity:.72; }
.foot-in { color:rgba(255,255,255,.72); padding-top:34px; padding-bottom:44px; }
.site-foot .wordmark { color:#fff; }
.site-foot nav a { color:rgba(255,255,255,.78); text-decoration:none; }
.site-foot nav a:hover { color:#fff; }
.mobile-bottom-nav { display:none; }

@media (min-width:761px) {
  .predlozi-grid { grid-template-columns:1fr 1.4fr; }
}

.legal-page { max-width:860px; margin:0 auto; }
.legal-page>h1 { font-size:clamp(2rem,5vw,3.4rem); }
.legal-page>.lead { max-width:68ch; margin-bottom:28px; }
.legal-card { margin-bottom:16px; }
.legal-card h2 { font-size:1.18rem; margin-bottom:8px; }
.admin-side { background:linear-gradient(180deg,#0D1B2A,#132C40); }
.admin-main { background:var(--mp-bg); }
.admin-side .abrand img { background:#fff; padding:3px; }

@media (max-width:1040px) {
  .nav-toggle { display:block; }
  /* .site-head prefiks: mora da nadjača .site-head nav iz stil.css */
  .site-head .main-nav { display:none; position:absolute; top:76px; left:16px; right:16px; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--mp-line); border-radius:18px; padding:12px; box-shadow:var(--mp-shadow); }
  .site-head .main-nav.open { display:flex; }
  .main-nav a { padding:13px 14px; }
  .main-nav .nav-cta { margin:4px 0 0; text-align:center; }
  .brand-actions { grid-template-columns:repeat(2,1fr); margin-left:22px; margin-right:22px; }
  .brand-action:nth-child(2) { border-right:0; }
  .brand-action:nth-child(-n+2) { border-bottom:1px solid var(--mp-line); }
  .news-grid { grid-template-columns:repeat(2,1fr); }
  .home-info-grid { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  body { padding-bottom:72px; }
  .wrap { padding-left:14px; padding-right:14px; }
  main.wrap { padding-top:14px; }
  .head-in { min-height:68px; padding-left:14px; padding-right:14px; }
  .brand-copy small { display:none; }
  .brand-mark { width:42px; height:42px; border-radius:12px; }
  .brand-mark img { width:33px; }
  .wordmark { font-size:1.2rem; }
  .main-nav { top:68px; }
  /* na telefonu visinu diktira sadržaj, ne odnos stranica fotografije */
  .home-hero { aspect-ratio:auto; min-height:520px; border-radius:18px; background-position:center center; }
  .home-hero-overlay { background:linear-gradient(180deg,rgba(6,18,31,.3),rgba(6,18,31,.9) 58%,rgba(6,18,31,.96)); }
  .home-hero-content { padding:220px 24px 34px; }
  .home-hero h1 { font-size:clamp(2.4rem,12vw,3.4rem); }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; }
  .brand-actions { grid-template-columns:repeat(2,1fr); margin:-18px 10px 24px; }
  .brand-action { min-height:150px; padding:16px 13px; flex-direction:column; gap:10px; }
  .brand-action-icon { width:46px; height:46px; }
  .brand-action b { font-size:.72rem; }
  .brand-action small { font-size:.68rem; }
  .home-stats { grid-template-columns:repeat(2,1fr); }
  .news-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .news-image { height:120px; }
  .news-body { padding:12px; }
  .news-body h3 { font-size:.86rem; }
  .news-body p { font-size:.7rem; }
  .home-steps { grid-template-columns:1fr; }
  .foot-in { flex-direction:column; }
  .foot-in nav { flex-direction:column; gap:10px; }
  .mobile-bottom-nav { position:fixed; z-index:1200; left:0; right:0; bottom:0; height:66px; display:grid; grid-template-columns:repeat(5,1fr); background:rgba(255,255,255,.97); backdrop-filter:blur(16px); border-top:1px solid var(--mp-line); box-shadow:0 -8px 24px rgba(13,27,42,.08); }
  .mobile-bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--mp-muted); text-decoration:none; font-size:.62rem; font-weight:600; }
  .mobile-bottom-nav a strong { font-size:1.05rem; line-height:1; color:var(--mp-navy); }
  .mobile-bottom-nav a.primary strong { color:var(--mp-red); }
  .admin-main { padding:18px 14px 40px; }
}

@media (max-width:480px) {
  .news-grid { grid-template-columns:1fr; }
  .news-image { height:180px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* ---------- tamna tema ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --mp-bg:#0D1B2A; --mp-card:#14293E; --mp-line:#274361;
    --mp-text:#EDF1F5; --mp-muted:#93A2B3;
    --mp-shadow:0 16px 40px rgba(0,0,0,.4); --mp-shadow-soft:0 8px 24px rgba(0,0,0,.3);
  }
  body { background:var(--mp-bg); color:var(--mp-text); }
  .site-head { background:rgba(13,27,42,.94); border-bottom-color:rgba(255,255,255,.08); box-shadow:0 5px 18px rgba(0,0,0,.3); }
  .main-nav a { color:var(--mp-muted); }
  .main-nav a:hover, .main-nav a.on { color:#fff; background:#1A324A; }
  .main-nav .nav-cta { color:#fff; background:var(--mp-red); }
  .nav-toggle { background:#1A324A; }
  .nav-toggle span:not(.sr-only) { background:#EDF1F5; }
  label { color:var(--mp-text); }
  input[type=text],input[type=email],input[type=password],input[type=file],textarea,select { background:var(--mp-card); border-color:var(--mp-line); color:var(--mp-text); }
  .btn.ghost { background:transparent; }
  .hero-secondary { background:var(--mp-card); color:#fff; }
  .hero-secondary:hover { background:#1A324A; color:#fff; }
  .brand-actions { background:var(--mp-card); border-color:var(--mp-line); }
  .brand-action { color:var(--mp-text); border-right-color:var(--mp-line); }
  .brand-action:hover { background:#1A324A; }
  .brand-action.sand .brand-action-icon { color:#0D1B2A; }
  .news-card { background:var(--mp-card); border-color:var(--mp-line); }
  .confidential-card { background:linear-gradient(145deg,#1A2C40,var(--mp-card)); }
  .placeholder-image { background:linear-gradient(135deg,#2B415C,#1A324A); }
  .home-stats div { background:rgba(255,255,255,.04); }
  .admin-main { background:var(--mp-bg); }
}
@media (prefers-color-scheme: dark) and (max-width:1040px) {
  .site-head .main-nav { background:var(--mp-card); border-color:var(--mp-line); }
  .brand-action:nth-child(-n+2) { border-bottom-color:var(--mp-line); }
}
@media (prefers-color-scheme: dark) and (max-width:760px) {
  .mobile-bottom-nav { background:rgba(13,27,42,.97); border-top-color:var(--mp-line); box-shadow:0 -8px 24px rgba(0,0,0,.35); }
  .mobile-bottom-nav a { color:var(--mp-muted); }
  .mobile-bottom-nav a strong { color:#EDF1F5; }
}