/* Glavni izgled sajta Pekara Zrno */
:root{
  --krem:#fbf5ea; --krem2:#f4ead8; --papir:#fffdf8;
  --kora:#8a4b21; --kora-t:#5e3214; --kora-tt:#3d2010;
  --zito:#e3b25b; --zito-s:#f3d79c; --tekst:#2b2118; --siva:#6f6358; --linija:#e8dcc7;
  --zelena:#3b6b2a; --zelena-bg:#e7f2e1;
  --senka:0 18px 40px -18px rgba(94,50,20,.35);
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--krem);color:var(--tekst);line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.1;color:var(--kora-t)}
a{color:inherit}
button{font:inherit;cursor:pointer}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.rukom{font-family:Caveat,cursive;color:var(--kora);font-size:1.6rem;line-height:1}

/* ---------- Header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,box-shadow .3s}
header.skrol{background:rgba(251,245,234,.9);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linija)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:Fraunces,serif;font-weight:800;font-size:1.45rem;text-decoration:none;color:var(--kora-t)}
.logo span{color:var(--zito)}
.logo svg{width:34px;height:34px}
.meni-linkovi{display:flex;gap:26px;align-items:center}
.meni-linkovi a{text-decoration:none;font-size:.95rem;color:var(--siva);position:relative}
.meni-linkovi a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--zito);transform:scaleX(0);transition:transform .25s;transform-origin:left}
.meni-linkovi a:hover{color:var(--kora-t)} .meni-linkovi a:hover::after{transform:scaleX(1)}
.nav-desno{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--kora);color:#fff;padding:12px 22px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem;transition:transform .2s,background .2s,box-shadow .2s;box-shadow:0 8px 20px -10px rgba(138,75,33,.8)}
.btn:hover{background:var(--kora-t);transform:translateY(-2px)}
.btn.svetlo{background:transparent;color:var(--kora);box-shadow:inset 0 0 0 2px var(--kora)}
.btn.svetlo:hover{background:var(--kora);color:#fff}
.btn.zito{background:var(--zito);color:var(--kora-tt)}
.btn.zito:hover{background:var(--zito-s)}
.btn.malo{padding:8px 16px;font-size:.88rem}
.korisnik{position:relative}
.avatar{width:40px;height:40px;border-radius:50%;border:0;background:var(--zito);color:var(--kora-tt);font-weight:700;font-family:Fraunces,serif;font-size:1.1rem}
.padajuci{position:absolute;right:0;top:50px;background:var(--papir);border:1px solid var(--linija);border-radius:14px;box-shadow:var(--senka);min-width:220px;padding:8px;display:none}
.padajuci.otvoren{display:block;animation:pojavi .2s ease}
.padajuci .ime{padding:8px 12px 10px;border-bottom:1px solid var(--linija);margin-bottom:6px;font-size:.9rem}
.padajuci .ime b{display:block;color:var(--kora-t)}
.padajuci button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 12px;border-radius:9px;color:var(--tekst)}
.padajuci button:hover{background:var(--krem2)}
.hamburger{display:none;background:none;border:0;width:40px;height:40px}
.hamburger span{display:block;width:22px;height:2px;background:var(--kora-t);margin:5px auto;transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:110px 0 60px;overflow:hidden;
  background:radial-gradient(ellipse at 75% 45%,#f7e2b9 0%,rgba(251,245,234,0) 55%),var(--krem)}
#brasno{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:800;letter-spacing:-.02em}
.hero h1 .red{display:block;overflow:hidden}
.hero h1 .red span{display:inline-block;transform:translateY(110%);animation:podigni .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .red:nth-child(2) span{animation-delay:.12s}
.hero h1 .red:nth-child(3) span{animation-delay:.24s;color:var(--kora)}
.hero p.uvod{font-size:1.15rem;color:var(--siva);margin:22px 0 30px;max-width:40ch;opacity:0;animation:izroni .8s .5s forwards}
.hero .dugmad{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:izroni .8s .65s forwards}
.hero .rukom{display:inline-block;transform:rotate(-4deg);margin-bottom:10px;opacity:0;animation:izroni .8s .1s forwards}
.hero-slika{position:relative;opacity:0;animation:izroni 1s .3s forwards}
.hero-slika svg{width:100%;height:auto;filter:drop-shadow(0 40px 40px rgba(94,50,20,.25))}
.para path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;opacity:0;stroke-dasharray:120;stroke-dashoffset:120;animation:para 4s ease-in-out infinite}
.para path:nth-child(2){animation-delay:1.3s} .para path:nth-child(3){animation-delay:2.6s}
.vekna{transform-origin:240px 300px;animation:disi 5s ease-in-out infinite}
.hero-slika .pecat{position:absolute;right:2%;top:2%;width:120px;height:120px;filter:none;animation:okreni 18s linear infinite}
.skrol-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:.8rem;color:var(--siva);display:flex;flex-direction:column;align-items:center;gap:6px}
.skrol-hint i{width:2px;height:34px;background:linear-gradient(var(--kora),transparent);animation:kapi 1.8s infinite}

/* ---------- Traka ---------- */
.traka{background:var(--kora-t);color:var(--zito-s);overflow:hidden;padding:16px 0;transform:rotate(-1.2deg);margin:-10px -20px 0;position:relative;z-index:2}
.traka-unutra{display:flex;gap:40px;white-space:nowrap;animation:traka 28s linear infinite;width:max-content;font-family:Fraunces,serif;font-size:1.3rem}
.traka-unutra span::after{content:"✦";margin-left:40px;color:var(--zito)}

/* ---------- Sekcije ---------- */
section{padding:100px 0;position:relative}
.naslov{text-align:center;margin:0 auto 50px;max-width:640px}
.naslov h2{font-size:clamp(2rem,4vw,3rem);font-weight:800}
.naslov p{color:var(--siva);margin-top:10px}
.otkrij{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.otkrij.vidljivo{opacity:1;transform:none}
.kasni1{transition-delay:.1s}.kasni2{transition-delay:.2s}.kasni3{transition-delay:.3s}

/* Brojevi */
.brojevi{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.broj{background:var(--papir);border:1px solid var(--linija);border-radius:var(--r);padding:28px 20px;text-align:center}
.broj strong{display:block;font-family:Fraunces,serif;font-size:2.8rem;font-weight:800;color:var(--kora)}
.broj span{color:var(--siva);font-size:.92rem}

/* Proces */
.proces{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;margin-top:60px}
.proces::before{content:"";position:absolute;top:38px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--zito) 0 10px,transparent 10px 18px)}
.korak{text-align:center;position:relative}
.korak .krug{width:78px;height:78px;border-radius:50%;background:var(--papir);border:2px solid var(--zito);display:grid;place-items:center;margin:0 auto 16px;font-family:Fraunces,serif;font-weight:800;font-size:1.6rem;color:var(--kora);transition:transform .3s,background .3s}
.korak:hover .krug{transform:scale(1.1) rotate(-6deg);background:var(--zito-s)}
.korak h3{font-size:1.15rem;margin-bottom:6px}
.korak p{color:var(--siva);font-size:.93rem}

/* Meni */
#meni{background:var(--papir);border-top:1px solid var(--linija);border-bottom:1px solid var(--linija)}
.filteri{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-bottom:34px}
.tab{border:1px solid var(--linija);background:var(--krem);padding:9px 18px;border-radius:999px;color:var(--siva);font-weight:500;transition:.2s}
.tab:hover{border-color:var(--zito);color:var(--kora-t)}
.tab.aktivan{background:var(--kora-t);color:#fff;border-color:var(--kora-t)}
.prekidac{display:flex;align-items:center;gap:8px;color:var(--siva);font-size:.92rem;margin-left:8px;cursor:pointer;user-select:none}
.prekidac input{display:none}
.prekidac i{width:40px;height:22px;border-radius:99px;background:var(--linija);position:relative;transition:.25s}
.prekidac i::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.prekidac input:checked+i{background:var(--zelena)}
.prekidac input:checked+i::after{left:21px}
.pretraga{border:1px solid var(--linija);background:var(--krem);border-radius:999px;padding:9px 16px;min-width:200px;font:inherit;outline:none}
.pretraga:focus{border-color:var(--zito);box-shadow:0 0 0 3px rgba(227,178,91,.25)}
.proizvodi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.proizvod{background:var(--krem);border:1px solid var(--linija);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;animation:ulaz .5s both}
.proizvod:hover{transform:translateY(-6px);box-shadow:var(--senka)}
.proizvod .ilu{height:130px;display:grid;place-items:center;background:radial-gradient(circle at 50% 70%,var(--zito-s),var(--krem2) 70%);position:relative}
.proizvod .ilu svg{width:120px;height:90px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.proizvod:hover .ilu svg{transform:scale(1.12) rotate(-4deg)}
.proizvod .telo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.proizvod h3{font-size:1.15rem}
.proizvod p{color:var(--siva);font-size:.9rem;flex:1}
.proizvod .dno{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.cena{font-family:Fraunces,serif;font-weight:800;font-size:1.35rem;color:var(--kora)}
.cena small{font-family:Inter;font-weight:500;font-size:.75rem;color:var(--siva)}
.oznaka{position:absolute;top:12px;left:12px;font-size:.72rem;font-weight:600;background:var(--zelena-bg);color:var(--zelena);padding:3px 10px;border-radius:99px}
.prazno{text-align:center;color:var(--siva);padding:40px;grid-column:1/-1}

/* Torte */
.torte{background:var(--kora-t);color:#f5e6cf;border-radius:28px;padding:56px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.torte::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(227,178,91,.35),transparent 70%)}
.torte h2{color:#fff;font-size:clamp(2rem,4vw,2.8rem);margin-bottom:14px}
.torte .rukom{color:var(--zito)}
.torte ul{list-style:none;position:relative;z-index:1}
.torte li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.18)}
.torte li b{color:var(--zito-s)}
.torte .btn{margin-top:22px}

/* Kako poručiti */
.koraci3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kartica{background:var(--papir);border:1px solid var(--linija);border-radius:var(--r);padding:30px;position:relative;transition:transform .3s,box-shadow .3s}
.kartica:hover{transform:translateY(-4px);box-shadow:var(--senka)}
.kartica .br{font-family:Caveat,cursive;font-size:3rem;color:var(--zito);line-height:1}
.kartica h3{font-size:1.25rem;margin:6px 0}
.kartica p{color:var(--siva);font-size:.95rem}
.kartica.gotovo{border-color:var(--zelena)}
.kartica.gotovo::after{content:"✓";position:absolute;top:18px;right:20px;width:28px;height:28px;border-radius:50%;background:var(--zelena);color:#fff;display:grid;place-items:center;font-weight:700}
.cta-centar{text-align:center;margin-top:36px}
.primer{display:inline-block;background:var(--papir);border:1px dashed var(--zito);border-radius:14px;padding:12px 18px;margin-top:16px;color:var(--kora-t);font-style:italic}

/* Info */
#info{background:var(--krem2)}
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.info table{width:100%;border-collapse:collapse;margin-top:8px}
.info td{padding:6px 0;border-bottom:1px dashed var(--linija)}
.info td:last-child{text-align:right;font-weight:500}
.info tr.danas td{color:var(--kora);font-weight:700}
.status{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;padding:5px 12px;border-radius:99px;margin-top:4px}
.status i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:puls 1.6s infinite}
.status.otv{background:var(--zelena-bg);color:var(--zelena)}
.status.zat{background:#f8e3e0;color:#9a3324}

/* FAQ */
.faq{max-width:780px;margin:0 auto}
.pitanje{background:var(--papir);border:1px solid var(--linija);border-radius:14px;margin-bottom:12px;overflow:hidden}
.pitanje button{width:100%;text-align:left;background:none;border:0;padding:18px 22px;font-weight:600;display:flex;justify-content:space-between;align-items:center;color:var(--tekst)}
.pitanje button::after{content:"+";font-size:1.4rem;color:var(--kora);transition:transform .3s}
.pitanje.otv button::after{transform:rotate(45deg)}
.pitanje .odg{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.pitanje.otv .odg{grid-template-rows:1fr}
.pitanje .odg>div{overflow:hidden}
.pitanje .odg p{padding:0 22px 18px;color:var(--siva)}

footer{background:var(--kora-tt);color:#cdb89b;padding:50px 0 100px;font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer .logo{color:#fff}
footer small{display:block;margin-top:10px;opacity:.7}

/* ---------- Modali ---------- */
.pozadina{position:fixed;inset:0;background:rgba(43,33,24,.55);backdrop-filter:blur(4px);z-index:60;display:none;align-items:center;justify-content:center;padding:16px}
.pozadina.otvoren{display:flex;animation:pojavi .2s}
.modal{background:var(--papir);border-radius:22px;width:100%;max-width:440px;max-height:90vh;overflow:auto;padding:32px;position:relative;animation:modal .35s cubic-bezier(.2,.8,.2,1)}
.modal.sirok{max-width:640px}
.zatvori{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--krem2);font-size:1.2rem;color:var(--kora-t)}
.modal h2{font-size:1.8rem;margin-bottom:4px}
.modal .pod{color:var(--siva);font-size:.92rem;margin-bottom:20px}
.tabovi{display:flex;background:var(--krem2);border-radius:12px;padding:4px;margin-bottom:22px}
.tabovi button{flex:1;border:0;background:none;padding:10px;border-radius:9px;font-weight:600;color:var(--siva)}
.tabovi button.aktivan{background:var(--papir);color:var(--kora-t);box-shadow:0 2px 6px rgba(0,0,0,.08)}
form .polje{margin-bottom:14px}
form label{display:block;font-size:.85rem;font-weight:600;margin-bottom:5px;color:var(--kora-t)}
form input,form textarea{width:100%;border:1px solid var(--linija);background:var(--krem);border-radius:11px;padding:11px 14px;font:inherit;outline:none;transition:.2s}
form input:focus,form textarea:focus{border-color:var(--zito);box-shadow:0 0 0 3px rgba(227,178,91,.25);background:#fff}
form .btn{width:100%;justify-content:center;margin-top:6px}
.dva{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.greska{background:#f8e3e0;color:#9a3324;border-radius:10px;padding:10px 14px;font-size:.9rem;margin-bottom:14px;display:none}
.greska.vidljiva{display:block}
.napomena{font-size:.82rem;color:var(--siva);margin-top:14px;text-align:center}
.porudzbina{border:1px solid var(--linija);border-radius:14px;padding:16px 18px;margin-bottom:12px;background:var(--krem)}
.porudzbina .gore{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.porudzbina .gore b{font-family:Fraunces,serif;color:var(--kora-t)}
.porudzbina .meta{font-size:.85rem;color:var(--siva)}
.porudzbina .stavke{margin:8px 0;white-space:pre-line}
.bedz{font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.03em;background:var(--krem2);color:var(--kora-t)}
.bedz.primljena{background:#fdf0d5;color:#8a5a00}
.bedz.u-pripremi{background:#e3edfb;color:#24508f}
.bedz.spremna,.bedz.isporucena,.bedz.isporučena{background:var(--zelena-bg);color:var(--zelena)}
.bedz.otkazana{background:#f8e3e0;color:#9a3324}
.ucitava{display:flex;justify-content:center;padding:30px}
.ucitava i{width:28px;height:28px;border:3px solid var(--linija);border-top-color:var(--kora);border-radius:50%;animation:okreni .8s linear infinite}

.tost{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120px);background:var(--kora-tt);color:#fff;padding:13px 22px;border-radius:999px;z-index:80;font-size:.93rem;transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:var(--senka);max-width:calc(100% - 32px);text-align:center}
.tost.vidljiv{transform:translate(-50%,0)}


/* ---------- Animacije ---------- */
@keyframes podigni{to{transform:none}}
@keyframes izroni{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes para{0%{opacity:0;stroke-dashoffset:120}30%{opacity:.7}100%{opacity:0;stroke-dashoffset:-120}}
@keyframes disi{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes okreni{to{transform:rotate(360deg)}}
@keyframes kapi{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes traka{to{transform:translateX(-50%)}}
@keyframes ulaz{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pojavi{from{opacity:0}to{opacity:1}}
@keyframes modal{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.otkrij{opacity:1;transform:none}}

/* ---------- Mobilni ---------- */
@media (max-width:900px){
  .meni-linkovi{position:fixed;top:72px;left:0;right:0;background:var(--krem);flex-direction:column;gap:0;padding:10px 20px 20px;border-bottom:1px solid var(--linija);transform:translateY(-130%);transition:transform .35s;z-index:-1}
  .meni-linkovi.otvoren{transform:none}
  .meni-linkovi a{padding:12px 0;width:100%;border-bottom:1px solid var(--linija)}
  .hamburger{display:block}
  .nav-desno .btn.sakrij-mob{display:none}
  .hero-grid,.torte{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:100px}
  .hero-slika{max-width:380px;margin:0 auto}
  .hero-slika .pecat{width:84px;height:84px}
  .brojevi{grid-template-columns:repeat(2,1fr)}
  .proces{grid-template-columns:repeat(2,1fr);row-gap:36px}.proces::before{display:none}
  .koraci3,.info{grid-template-columns:1fr}
  .torte{padding:32px 24px}
  section{padding:70px 0}
  .dva{grid-template-columns:1fr}
  .modal{padding:26px 20px}
  .skrol-hint{display:none}
}