/* ===== Kraljevo Web — glavni stilovi ===== */
:root{
  --narandzasta:#F97316;
  --narandzasta-tamna:#EA580C;
  --tamna:#0F172A;
  --tamna-2:#1E293B;
  --siva:#64748B;
  --svetla:#F8FAFC;
  --linija:#E2E8F0;
  --bela:#FFFFFF;
  --radius:16px;
  --senka:0 10px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--tamna);background:var(--bela);line-height:1.6;font-size:16px}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.kontejner{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}
section{padding:90px 0}
.naslov-sekcije{text-align:center;max-width:680px;margin:0 auto 50px}
.naslov-sekcije .oznaka{display:inline-block;color:var(--narandzasta);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.naslov-sekcije h2{font-size:clamp(28px,4vw,40px);line-height:1.2;margin-bottom:14px}
.naslov-sekcije p{color:var(--siva)}

/* Dugmad */
.dugme{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;transition:.2s;border:2px solid transparent;cursor:pointer;font-family:inherit}
.dugme-glavno{background:var(--narandzasta);color:#fff}
.dugme-glavno:hover{background:var(--narandzasta-tamna);transform:translateY(-2px)}
.dugme-obicno{border-color:var(--linija);color:var(--tamna);background:#fff}
.dugme-obicno:hover{border-color:var(--narandzasta);color:var(--narandzasta)}

/* Zaglavlje */
.zaglavlje{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--linija)}
.zaglavlje .kontejner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;letter-spacing:-.5px}
.logo svg{width:34px;height:auto}
.logo span{color:var(--narandzasta)}
.meni{display:flex;align-items:center;gap:28px}
.meni a{font-weight:500;font-size:15px;color:var(--tamna-2)}
.meni a:hover{color:var(--narandzasta)}
.meni .dugme{padding:10px 20px;color:#fff}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--tamna);margin:5px 0;transition:.2s}

/* Uvodni deo */
.uvod{padding:80px 0 90px;background:linear-gradient(180deg,#FFF7ED 0%,#fff 100%)}
.uvod .kontejner{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.ponuda-traka{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #FED7AA;color:var(--narandzasta-tamna);padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;margin-bottom:22px}
.uvod h1{font-size:clamp(34px,5vw,54px);line-height:1.1;letter-spacing:-1px;margin-bottom:20px}
.uvod h1 span{color:var(--narandzasta)}
.uvod p.podnaslov{font-size:18px;color:var(--siva);margin-bottom:32px;max-width:520px}
.uvod .dugmad{display:flex;gap:14px;flex-wrap:wrap}
.uvod .prednosti{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;color:var(--tamna-2);font-size:14px;font-weight:500}
.uvod .prednosti div{display:flex;align-items:center;gap:8px}
.kvacica{width:20px;height:20px;border-radius:50%;background:var(--narandzasta);color:#fff;display:inline-grid;place-items:center;font-size:12px;flex-shrink:0}

/* Ilustracija pregledača */
.pregledac{background:#fff;border-radius:18px;box-shadow:0 25px 60px rgba(15,23,42,.15);overflow:hidden;border:1px solid var(--linija)}
.pregledac .traka{background:var(--tamna);padding:12px 16px;display:flex;gap:8px;align-items:center}
.pregledac .traka i{width:11px;height:11px;border-radius:50%;background:#475569;display:block}
.pregledac .traka i:first-child{background:var(--narandzasta)}
.pregledac .traka b{margin-left:12px;background:#1E293B;color:#94A3B8;font-weight:400;font-size:12px;padding:4px 14px;border-radius:999px}
.pregledac .sadrzaj{padding:28px}
.pregledac .blok{height:12px;border-radius:6px;background:var(--linija);margin-bottom:10px}
.pregledac .blok.kratak{width:55%}
.pregledac .blok.nar{background:var(--narandzasta);width:35%;height:30px;border-radius:999px;margin-top:18px}
.pregledac .kartice{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.pregledac .kartice div{height:70px;border-radius:10px;background:#FFF7ED;border:1px solid #FED7AA}
.pregledac .kruna{width:70px;margin:0 0 18px}

/* Usluge */
.usluge{background:#fff}
.mreza-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kartica{background:#fff;border:1px solid var(--linija);border-radius:var(--radius);padding:30px;transition:.25s}
.kartica:hover{box-shadow:var(--senka);transform:translateY(-4px);border-color:#FED7AA}
.ikona{width:52px;height:52px;border-radius:14px;background:#FFF7ED;display:grid;place-items:center;font-size:24px;margin-bottom:18px}
.kartica h3{font-size:19px;margin-bottom:8px}
.kartica p{color:var(--siva);font-size:15px}

/* Koraci */
.koraci{background:var(--svetla)}
.mreza-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:korak}
.korak{position:relative;padding:30px 24px;background:#fff;border-radius:var(--radius);border:1px solid var(--linija)}
.korak::before{counter-increment:korak;content:counter(korak);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--tamna);color:#fff;font-weight:700;margin-bottom:16px}
.korak h3{font-size:17px;margin-bottom:6px}
.korak p{color:var(--siva);font-size:14px}

/* Paketi */
.paketi{background:#fff}
.mreza-paketa{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.paket{border:1px solid var(--linija);border-radius:20px;padding:34px 28px;display:flex;flex-direction:column;position:relative;background:#fff}
.paket.istaknut{border:2px solid var(--narandzasta);box-shadow:0 20px 50px rgba(249,115,22,.15)}
.paket .bedz{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--narandzasta);color:#fff;font-size:12px;font-weight:600;padding:5px 14px;border-radius:999px;white-space:nowrap}
.paket h3{font-size:22px}
.paket .opis{color:var(--siva);font-size:14px;margin:4px 0 20px}
.paket .stara{color:var(--siva);text-decoration:line-through;font-size:15px}
.paket .cena{font-size:34px;font-weight:700;line-height:1.1}
.paket .cena small{font-size:15px;font-weight:500;color:var(--siva)}
.paket .napomena-cena{font-size:13px;color:var(--narandzasta-tamna);font-weight:600;margin:6px 0 22px}
.paket ul{list-style:none;margin-bottom:28px;flex-grow:1}
.paket li{display:flex;gap:10px;font-size:15px;padding:6px 0;color:var(--tamna-2)}
.paket li::before{content:"✓";color:var(--narandzasta);font-weight:700}
.paket .dugme{justify-content:center}
.odrzavanje{margin-top:30px;background:var(--tamna);color:#fff;border-radius:20px;padding:30px 34px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.odrzavanje h3{font-size:20px;margin-bottom:4px}
.odrzavanje p{color:#CBD5E1;font-size:15px}
.odrzavanje .cena{font-size:26px;font-weight:700;color:var(--narandzasta);white-space:nowrap}
.odrzavanje .cena small{font-size:14px;color:#CBD5E1;font-weight:400}
.napomena{text-align:center;color:var(--siva);font-size:14px;margin-top:24px}

/* Radovi */
.radovi{background:var(--svetla)}
.rad{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--linija);transition:.25s;display:block}
.rad:hover{box-shadow:var(--senka);transform:translateY(-4px)}
.rad .slika{height:190px;display:grid;place-items:center;color:#fff;font-size:26px;font-weight:700;position:relative;text-align:center;padding:20px}
.rad .slika small{display:block;font-size:13px;font-weight:400;opacity:.85;margin-top:4px}
.rad .oznaka-primer{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.95);color:var(--tamna);font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.rad .tekst{padding:22px}
.rad h3{font-size:18px;margin-bottom:4px}
.rad p{color:var(--siva);font-size:14px}
.rad .link{color:var(--narandzasta);font-weight:600;font-size:14px;margin-top:10px;display:inline-block}

/* O meni */
.o-meni .kontejner{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.o-meni .slika-logo{background:var(--tamna);border-radius:24px;aspect-ratio:1;display:grid;place-items:center;max-width:380px;width:100%;margin:0 auto}
.o-meni .slika-logo svg{width:55%}
.o-meni h2{font-size:clamp(28px,4vw,38px);margin-bottom:18px;line-height:1.2}
.o-meni p{color:var(--siva);margin-bottom:16px}
.vrednosti{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.vrednosti>div{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.vrednosti b{display:block}
.vrednosti span{color:var(--siva);font-size:14px}

/* Pitanja */
.pitanja{background:var(--svetla)}
.lista-pitanja{max-width:780px;margin:0 auto}
details{background:#fff;border:1px solid var(--linija);border-radius:14px;margin-bottom:12px;padding:0 24px}
summary{cursor:pointer;font-weight:600;padding:20px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--narandzasta);font-size:22px;line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--siva);padding-bottom:20px;font-size:15px}

/* Kontakt */
.kontakt .kontejner{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px}
.kontakt h2{font-size:clamp(28px,4vw,38px);margin-bottom:14px;line-height:1.2}
.kontakt .uvod-tekst{color:var(--siva);margin-bottom:28px}
.kontakt-stavka{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--linija);border-radius:14px;margin-bottom:12px;transition:.2s}
.kontakt-stavka:hover{border-color:var(--narandzasta)}
.kontakt-stavka .ikona{margin:0;width:46px;height:46px;font-size:20px}
.kontakt-stavka small{display:block;color:var(--siva);font-size:13px}
.kontakt-stavka b{font-size:15px;word-break:break-all}
form{background:var(--svetla);border:1px solid var(--linija);border-radius:20px;padding:34px}
.polje{margin-bottom:18px}
.polje label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.polje input,.polje select,.polje textarea{width:100%;padding:13px 16px;border:1px solid #CBD5E1;border-radius:12px;font-family:inherit;font-size:15px;background:#fff;color:var(--tamna)}
.polje input:focus,.polje select:focus,.polje textarea:focus{outline:2px solid var(--narandzasta);border-color:transparent}
.polje textarea{min-height:120px;resize:vertical}
.dva-polja{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .dugme{width:100%;justify-content:center;font-size:16px}
.skriveno{display:none}
.mala-napomena{font-size:12px;color:var(--siva);margin-top:12px;text-align:center}

/* Podnožje */
.podnozje{background:var(--tamna);color:#CBD5E1;padding:50px 0 30px}
.podnozje .kontejner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.podnozje .logo{color:#fff}
.podnozje nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
.podnozje nav a:hover{color:var(--narandzasta)}
.podnozje .prava{width:100%;border-top:1px solid #1E293B;padding-top:22px;margin-top:10px;font-size:13px;text-align:center}

/* Telefon i tablet */
@media (max-width:960px){
  .uvod .kontejner,.o-meni .kontejner,.kontakt .kontejner{grid-template-columns:1fr}
  .mreza-3,.mreza-paketa{grid-template-columns:1fr 1fr}
  .mreza-4{grid-template-columns:1fr 1fr}
  .uvod-slika{max-width:460px}
  .paket.istaknut{order:-1;grid-column:1/-1}
}
@media (max-width:720px){
  section{padding:64px 0}
  .uvod{padding:50px 0 64px}
  .mreza-3,.mreza-paketa,.mreza-4,.vrednosti,.dva-polja{grid-template-columns:1fr}
  .hamburger{display:block}
  .meni{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px 20px 24px;gap:4px;border-bottom:1px solid var(--linija);box-shadow:var(--senka)}
  .meni.otvoren{display:flex}
  .meni a{padding:12px 4px;font-size:16px}
  .meni .dugme{justify-content:center;margin-top:8px;padding:14px}
  form{padding:24px}
  .odrzavanje{padding:26px}
}
.vrednosti .kvacica{color:#fff}
@media (max-width:720px){
  .ponuda-traka{font-size:12.5px;padding:7px 14px}
  .uvod .dugmad .dugme{width:100%;justify-content:center}
  .uvod .prednosti{gap:12px 18px}
}