/* Raspored: fotografija preko celog prvog ekrana u zaobljenom okviru, pa priča u poglavljima: radnja → cvet po cvet (složite buket) → gotovi buketi → dostava → kontakt */
:root{
  --papir:#FBFAF8;      /* pozadina */
  --latica:#F3E3E4;     /* svetlo roze, meni i polja */
  --vino:#7A1832;       /* akcent, dugmad */
  --vino-tamno:#5E1026;
  --vino-rgb:122,24,50;
  --zlato:#8E6B3B;       /* zlatni tekst detalji */
  --zlato-svetlo:#B08D57;
  --sampanjac:#F6D3D8;   /* istaknuta reč na fotografiji */
  --tinta:#1F1A1B;      /* tekst */
  --siva:#6E6668;       /* sporedni tekst */
  --linija:#E7E0DE;
  --zelena:#56604F;     /* stabljika, sitni detalji */
  --rec:"Jost","Futura","Century Gothic",sans-serif;          /* velika reč MAGNOLIJA */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;        /* naslovi i priča */
  --tekst:"Manrope","Segoe UI",system-ui,sans-serif;           /* tekst i dugmad */
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--papir);color:var(--tinta);font-family:var(--tekst);font-size:17px;line-height:1.65;padding-inline:16px;padding-block:0;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--vino);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:300;text-wrap:balance}
p{margin:0}
.nb{white-space:nowrap}
.mala{font-family:var(--serif);font-size:.82rem;letter-spacing:.24em;text-transform:uppercase}
.sir{max-width:1240px;margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 26px;border-radius:999px;font:700 .95rem/1 var(--tekst);text-decoration:none;cursor:pointer;border:1.5px solid var(--vino);background:var(--vino);color:#fff;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--vino-tamno);border-color:var(--vino-tamno)}
.btn.prazno{background:transparent;color:var(--vino)}
.btn.prazno:hover{background:var(--vino);color:#fff}
.btn.svetlo{background:transparent;border-color:rgba(255,255,255,.75);color:#fff;font-family:var(--serif);font-weight:400;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem}
.btn.svetlo:hover{background:#fff;color:var(--tinta)}

/* ---------- 1. Hero ---------- */
.hero{position:relative;margin-top:16px;border-radius:44px;overflow:hidden;min-height:min(92vh,860px);display:grid;place-items:center;isolation:isolate;color:#fff}
.hero-foto{position:absolute;inset:0;z-index:-2;background:#5b5e57 url("img/hero-bozuri.webp") center/cover no-repeat;transform:scale(var(--z,1.06));will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,18,.28) 0%,rgba(20,18,18,.12) 40%,rgba(20,18,18,.5) 100%)}
.meni{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--latica);color:var(--tinta);border-radius:999px;padding:8px 10px 8px 26px;z-index:5}
.znak{font-family:var(--serif);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.15;color:var(--vino);text-decoration:none}
.meni nav{display:flex;gap:26px;font-size:.86rem}
.meni nav a{text-decoration:none}
.meni nav a:hover{color:var(--vino)}
.meni .zovi{min-height:40px;padding:0 18px;font-size:.85rem}
.meni-dugme{display:none}
.hero-tekst{text-align:center;padding:120px 16px 72px;display:grid;justify-items:center;gap:14px}
.hero-tekst .mala{opacity:.92}
.rec{font-family:var(--rec);font-weight:200;font-size:clamp(3.4rem,13vw,11.5rem);line-height:.86;letter-spacing:var(--ls,.02em);text-transform:uppercase;margin:0}
.hero-tekst .pod{max-width:30ch;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:300}
.hero-tekst .btn{margin-top:18px}
.hero-dno{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:space-between;padding-inline:32px;font-size:.82rem;opacity:.9}
.hero-dno b{font-family:var(--serif);font-weight:400;font-size:1.05rem}

/* ---------- poglavlja ---------- */
.poglavlje{padding-block:120px}
.glava{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:baseline;margin-bottom:56px}
.glava .mala{color:var(--vino)}
.naslov{font-family:var(--serif);font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.04;letter-spacing:-.01em}
.naslov em{font-style:italic;color:var(--vino)}

/* 2. radnja */
.radnja{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;overflow:hidden}
.ruka{transform:translateX(var(--rx,0));will-change:transform}
.ruka img{width:100%;height:auto;border-radius:28px}
.radnja-tekst{display:grid;gap:22px;max-width:520px}
.radnja-tekst p{color:var(--siva);font-size:1.06rem}
.radnja-tekst .uvod{font-family:var(--serif);font-size:1.6rem;line-height:1.35;color:var(--tinta);font-weight:300}
.cinjenice{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:36px;padding-top:22px;border-top:1px solid var(--linija);margin-top:8px}
.cinjenice b{display:block;font-family:var(--serif);font-weight:300;font-size:2.4rem;line-height:1;color:var(--tinta)}
.cinjenice span{font-size:.8rem;color:var(--siva)}

/* 3. cvet po cvet + složite buket */
.katalog{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.izbor{position:sticky;top:24px;display:grid;gap:18px}
.izbor .vel{font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.06;font-weight:300}
.izbor .ili{font-family:var(--serif);font-style:italic;color:var(--siva);font-size:1.05rem}
.izbor p{color:var(--siva);font-size:.95rem}
.cvece{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cvet{display:grid;gap:10px}
.cvet figure{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:var(--latica)}
.cvet img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cvet:hover img{transform:scale(1.045)}
.cvet .red{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cvet h3{font-family:var(--serif);font-size:1.3rem;font-weight:400}
.cvet .cena{font-size:.85rem;color:var(--siva);font-variant-numeric:tabular-nums;white-space:nowrap}
.kol{display:flex;align-items:center;gap:6px}
.kol button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--linija);background:var(--papir);font:400 1.3rem/1 var(--tekst);color:var(--tinta);cursor:pointer;transition:border-color .2s,background .2s}
.kol button:hover{border-color:var(--vino);color:var(--vino)}
.kol output{min-width:2.2ch;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.kol .dodaj{width:auto;border-radius:999px;padding:0 16px;font-size:.85rem;font-weight:700;margin-left:auto}
.cvet.izabran figure{box-shadow:0 0 0 2px var(--vino)}
.znacka{position:absolute;top:10px;right:10px;background:var(--vino);color:#fff;border-radius:999px;font-size:.8rem;font-weight:700;padding:3px 10px;font-variant-numeric:tabular-nums}

.vas-buket{margin-top:72px;display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:center;background:var(--latica);border-radius:32px;padding:48px}
.krug{position:relative;aspect-ratio:1;max-width:100%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff 0,#fff 30%,rgba(255,255,255,0) 70%)}
.krug .glava-cveta{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background-size:300%;background-position:50% 22%;box-shadow:0 6px 18px rgba(60,20,30,.18);transition:left .6s cubic-bezier(.2,.7,.2,1),top .6s cubic-bezier(.2,.7,.2,1),transform .4s}
.krug .prazno{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:22%;font-family:var(--serif);font-style:italic;color:var(--siva);font-size:1.15rem}
.racun{display:grid;gap:18px}
.racun .naslov{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.stavke{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.stavke li{display:flex;justify-content:space-between;gap:12px;padding-block:9px;border-bottom:1px solid rgba(var(--vino-rgb),.14)}
.pakovanje{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.pakovanje legend{font-size:.85rem;color:var(--siva);margin-bottom:8px;padding:0}
.pakovanje label{cursor:pointer}
.pakovanje input{position:absolute;opacity:0;pointer-events:none}
.pakovanje span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(var(--vino-rgb),.3);font-size:.9rem}
.pakovanje input:checked+span{background:var(--vino);border-color:var(--vino);color:#fff}
.pakovanje input:focus-visible+span{outline:2px solid var(--vino);outline-offset:3px}
.ukupno{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:6px}
.ukupno b{font-family:var(--serif);font-weight:300;font-size:2.4rem;font-variant-numeric:tabular-nums}
.poruka{background:var(--papir);border-radius:14px;padding:16px 18px;font-size:.95rem;color:var(--tinta)}
.akcije{display:flex;flex-wrap:wrap;gap:10px}
.napomena{font-size:.8rem;color:var(--siva)}

/* 4. gotovi buketi */
.gotovi{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
.gotov{position:relative;border-radius:28px;overflow:hidden;min-height:520px;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.gotov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.gotov:hover img{transform:scale(1.04)}
.gotov::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(25,15,18,0) 30%,rgba(25,15,18,.55) 62%,rgba(25,15,18,.82) 100%)}
.gotov .opis{padding:32px;display:grid;gap:8px;max-width:440px}
.gotov h3{font-family:var(--serif);font-size:2rem;font-weight:300}
.gotov .cena{font-size:.95rem;opacity:.92}
.desno-kolona{display:grid;gap:28px}
.desno-kolona .gotov{min-height:300px}
.kartica-tekst{border:1px solid var(--linija);border-radius:28px;padding:32px;display:grid;gap:10px;align-content:start}
.kartica-tekst h3{font-family:var(--serif);font-size:1.7rem;font-weight:300}
.kartica-tekst p{color:var(--siva)}

/* 5. dostava, linija koja se puni */
.dostava{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.put{position:relative;list-style:none;margin:0;padding:0 0 0 44px;display:grid;gap:56px}
.put::before,.put::after{content:"";position:absolute;left:10px;top:8px;width:1.5px;bottom:8px;background:var(--linija)}
.put::after{background:var(--vino);transform-origin:top;transform:scaleY(var(--p,1))}
.put li{position:relative}
.put li::before{content:"";position:absolute;left:-40px;top:9px;width:13px;height:13px;border-radius:50%;background:var(--papir);border:1.5px solid var(--vino);z-index:1}
.put .kada{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vino);font-weight:700}
.put h3{font-family:var(--serif);font-size:1.75rem;font-weight:300;margin-block:4px 6px}
.put p{color:var(--siva)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:.8rem;color:var(--siva);padding-bottom:10px}
th,td{text-align:left;padding:15px 0;border-bottom:1px solid var(--linija)}
th{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--siva);font-weight:700}
td:last-child,th:last-child{text-align:right}
.tabela{overflow-x:auto}
.ocena{margin-top:48px;display:flex;gap:22px;align-items:center;padding:28px;border-radius:24px;background:var(--latica)}
.ocena b{font-family:var(--serif);font-weight:300;font-size:3.6rem;line-height:1;color:var(--vino)}
.ocena p{color:var(--siva);font-size:.95rem}
.ocena a{color:var(--vino);font-weight:700}

/* 6. kontakt */
.kraj{position:relative;border-radius:44px;overflow:hidden;color:#fff;isolation:isolate;padding:96px 56px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;margin-bottom:24px}
.kraj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.kraj::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(28,20,22,.72) 0%,rgba(28,20,22,.35) 100%)}
.kraj .naslov{color:#fff}
.kraj .naslov em{color:var(--sampanjac)}
.podaci{display:grid;gap:22px;font-size:1rem}
.podaci .mala{opacity:.8;font-size:.72rem}
.podaci .vel{font-family:var(--serif);font-size:1.6rem;font-weight:300;line-height:1.25}
.podaci a{text-decoration-color:rgba(255,255,255,.5)}
.x-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--siva);padding-block:12px 40px}

.traka{display:none}
.mob-meni{position:fixed;inset:0;z-index:60;background:var(--papir);padding:calc(22px + env(safe-area-inset-top,0px)) 24px 24px;display:flex;flex-direction:column;gap:4px}
.mob-meni a{font-family:var(--serif);font-size:2rem;font-weight:300;text-decoration:none;padding-block:8px}
.mob-meni .btn{align-self:flex-end}

/* otkrivanje pri skrolu: samo ako JS radi, samo za ono što je ispod ekrana */
.js .pojava.dole{opacity:0;transform:translateY(28px)}
.pojava{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}

@media (max-width:1000px){
  .meni nav,.meni .zovi{display:none}
  .meni-dugme{display:inline-flex;min-height:40px;padding:0 18px;font-size:.85rem}
  .glava{grid-template-columns:1fr;gap:10px;margin-bottom:36px}
  .radnja,.katalog,.dostava,.gotovi,.vas-buket,.kraj{grid-template-columns:1fr}
  .izbor{position:static}
  .vas-buket{padding:28px;gap:28px}
  .krug{max-width:380px;width:100%;margin-inline:auto}
  .kraj{padding:64px 28px}
  .poglavlje{padding-block:80px}
  .dostava{gap:48px}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{border-radius:28px;min-height:620px}
  .hero-tekst{padding:130px 22px 110px}
  .hero-dno{flex-direction:column;align-items:center;gap:2px;padding-inline:20px;font-size:.78rem;bottom:18px}
  .meni{padding-left:18px}
  .cvece{grid-template-columns:repeat(2,1fr);gap:14px}
  .cvet h3{font-size:1.1rem}
  .cvet .red{flex-direction:column;gap:0}
  .kol .dodaj{display:none}
  .gotov{min-height:400px}
  .cinjenice{grid-template-columns:repeat(3,1fr);gap:14px}
  .cinjenice b{font-size:1.9rem}
  .ocena{flex-direction:column;align-items:flex-start}
  .kraj{border-radius:28px}
  .ruka img{max-height:300px;object-fit:cover;object-position:left center}
  .x-footer{padding-bottom:110px}
  .traka{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(251,250,248,.96);border-top:1px solid var(--linija);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .traka .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .pojava.dole{opacity:1;transform:none}
}

/* ---------- v3: više strana i animacije ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.35s ease both stranaIzlaz}
::view-transition-new(root){animation:.55s cubic-bezier(.2,.7,.2,1) both stranaUlaz}
@keyframes stranaIzlaz{to{opacity:0;transform:translateY(-12px)}}
@keyframes stranaUlaz{from{opacity:0;transform:translateY(18px)}}

.napredak{position:fixed;top:0;left:0;right:0;height:3px;background:var(--vino);transform-origin:left;transform:scaleX(var(--n,0));z-index:70;pointer-events:none}

/* slova koja se dižu pri učitavanju */
.slovo{display:inline-block;animation:slovo 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 55ms + 150ms)}
.rec{overflow:hidden;padding-bottom:.06em}
@keyframes slovo{from{opacity:0;transform:translateY(55%) rotate(4deg)}}
.dize{animation:dize 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--k,.5s)}
@keyframes dize{from{opacity:0;transform:translateY(18px)}}

/* latice u heru */
.latice{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.hero-tekst,.hero-dno,.baner-tekst{position:relative;z-index:1}
.hero-foto{animation:priblizi 2.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes priblizi{from{transform:scale(1.18);filter:saturate(.7) brightness(.8)}}

/* baner na unutrašnjim stranama */
.baner{position:relative;margin-top:16px;border-radius:44px;overflow:hidden;min-height:clamp(380px,58vh,560px);display:grid;align-items:end;isolation:isolate;color:#fff}
.baner .hero-foto{background-image:var(--slika)}
.baner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(24,16,18,.62) 0%,rgba(24,16,18,.28) 55%,rgba(24,16,18,.05) 100%),linear-gradient(180deg,rgba(20,18,18,.2) 0%,rgba(20,18,18,0) 35%,rgba(20,18,18,.5) 100%)}
.baner-tekst{padding:140px 56px 52px;display:grid;gap:10px;max-width:900px}
.baner-tekst h1{text-shadow:0 2px 30px rgba(0,0,0,.25);font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,7vw,6rem);line-height:.98;letter-spacing:-.01em}
.baner-tekst h1 em{color:var(--sampanjac)}
.baner-tekst p{font-size:1.08rem;max-width:46ch;opacity:.92}
.meni nav a{position:relative}
.meni nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--vino);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.meni nav a:hover::after,.meni nav a[aria-current=page]::after{transform:scaleX(1)}
.meni nav a[aria-current=page]{color:var(--vino)}
.mob-meni a{opacity:0;transform:translateY(14px);animation:meni-ulaz .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 60ms + 60ms)}

/* dugmad živnu na prelaz */
.btn{transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(var(--vino-rgb),.55)}
.btn.svetlo:hover{box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}

/* pojavljivanje sa zakašnjenjem po redu */
.pojava{transition-delay:var(--d,0ms)}
.js .pojava.dole{opacity:0;transform:translateY(36px) scale(.985)}
.js .slika-otkrij.dole img{clip-path:inset(0 0 100% 0)}
.slika-otkrij img{clip-path:inset(0 0 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}

/* početna: vrata ka stranama */
.vrata{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.vrata a{position:relative;display:flex;align-items:flex-end;min-height:400px;border-radius:32px;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate}
.vrata a:nth-child(1){grid-row:span 2;min-height:824px}
.vrata img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.vrata a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(25,15,18,0) 40%,rgba(25,15,18,.72) 100%);transition:opacity .5s}
.vrata a:hover img{transform:scale(1.07)}
.vrata .opis{padding:30px;display:grid;gap:6px;width:100%}
.vrata .mala{font-size:.7rem;opacity:.85}
.vrata h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05;display:flex;justify-content:space-between;align-items:center;gap:16px}
.strelica{flex:none;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);display:grid;place-items:center;font-family:var(--tekst);font-size:1.2rem;transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}
.vrata a:hover .strelica{transform:rotate(-45deg);background:#fff;color:var(--vino)}
.vrata .boja{background:var(--vino)}
.vrata .boja::after{display:none}
.traka-ocena{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:40px 48px;border-radius:32px;background:var(--latica)}
.traka-ocena b{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,6vw,4.6rem);line-height:1;color:var(--vino)}
.traka-ocena .uz{display:flex;align-items:center;gap:20px}
.traka-ocena p{color:var(--siva);max-width:32ch}

/* cveće: blagi nagib kartice za mišem */
.cvet figure{transform:perspective(800px) rotateX(var(--ry,0deg)) rotateY(var(--rx2,0deg));transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.cvet:hover figure{box-shadow:0 22px 40px -22px rgba(60,20,30,.45)}
.krug .glava-cveta{animation:iskoci .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes iskoci{from{transform:scale(0) rotate(-40deg)}}
.ukupno b.skok{animation:skok .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes skok{40%{transform:scale(1.08);color:var(--vino)}}
.znacka{animation:iskoci .4s cubic-bezier(.3,1.6,.5,1) both}

/* prilike (o nama) */
.prilike{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--tinta)}
.prilika{padding:26px 22px 28px 0;border-bottom:1px solid var(--linija);transition:padding .4s cubic-bezier(.2,.7,.2,1)}
.prilika:hover{padding-left:12px}
.prilika h3{font-family:var(--serif);font-size:1.5rem;font-weight:300;margin-bottom:6px}
.prilika p{color:var(--siva);font-size:.95rem}

/* forma (kontakt) */
.forma-blok{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.forma{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.forma label{display:grid;gap:6px;font-size:.85rem;font-weight:700}
.forma input,.forma select,.forma textarea{font:400 1rem var(--tekst);color:var(--tinta);background:#fff;border:1.5px solid var(--linija);border-radius:14px;padding:12px 14px;min-height:50px;width:100%;transition:border-color .25s,box-shadow .25s}
.forma input:focus,.forma select:focus,.forma textarea:focus{outline:none;border-color:var(--vino);box-shadow:0 0 0 4px rgba(var(--vino-rgb),.12)}
.forma textarea{min-height:120px;resize:vertical}
.forma .ceo{grid-column:1/-1}
.forma .odgovor{grid-column:1/-1;background:var(--latica);border-radius:14px;padding:14px 16px}
.dalje{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--linija);padding-top:40px}
.dalje p{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:300;line-height:1.1}

@media (max-width:1000px){
  .vrata{grid-template-columns:1fr}
  .vrata a:nth-child(1){grid-row:auto;min-height:480px}
  .prilike{grid-template-columns:repeat(2,1fr)}
  .forma-blok{grid-template-columns:1fr;gap:28px}
  .baner-tekst{padding:130px 28px 36px}
}
@media (max-width:640px){
  .baner{border-radius:28px;min-height:420px}
  .vrata a,.vrata a:nth-child(1){min-height:340px;border-radius:24px}
  .traka-ocena{padding:28px}
  .prilike{grid-template-columns:1fr}
  .forma{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .slovo,.dize,.hero-foto,.mob-meni a{animation:none!important;opacity:1!important;transform:none!important}
  .js .slika-otkrij.dole img{clip-path:none}
}
@keyframes meni-ulaz{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- footer „Hvala“ (po Starburst Thanks Footer) ---------- */
.stf{--stf-bg:var(--footer-bg,#170E11);--stf-ink:var(--footer-ink,#F4ECE8);--stf-accent:var(--footer-akcent,#F49AB0);--stf-display:"Archivo Black","Arial Black",Arial,sans-serif;
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;container-type:inline-size;display:flex;flex-direction:column;min-height:680px;margin:24px 0 16px;border-radius:44px;background:var(--stf-bg);color:var(--stf-ink);touch-action:pan-y}
.stf::before{content:"";position:absolute;inset:-50%;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:180px 180px;opacity:.14;mix-blend-mode:difference;animation:stf-grain .9s steps(1) infinite}
.stf::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 45%,var(--footer-ivica,#070405) 100%)}
.stf button{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.stf a{color:inherit;text-decoration:none}
.stf :focus-visible{outline:2px solid var(--stf-accent);outline-offset:4px}
.stf-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stf-fx{position:absolute;inset:0;z-index:0;pointer-events:none}
.stf-dust{position:absolute;border-radius:50%;background:var(--stf-ink)}
.stf-in{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;padding:clamp(28px,4.5cqw,60px) 16px clamp(28px,4cqw,56px)}
.stf-logo{display:inline-flex;align-items:center;gap:.55em;font-size:clamp(12px,1.45cqw,18px)}
.stf-mark{display:block;flex:none;max-width:none;overflow:visible}
.stf-mark path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;transition:transform .45s cubic-bezier(.2,.9,.3,1.3)}
.stf-logo:hover .stf-mark-l{transform:translateX(-1.6px)}
.stf-logo:hover .stf-mark-r{transform:translateX(1.6px)}
.stf-name{display:flex;flex-direction:column;font-family:var(--stf-display);text-transform:uppercase;line-height:.95;letter-spacing:.02em}
.stf-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(64px,8cqw,120px) 0 clamp(40px,6cqw,90px)}
.stf-stage{position:relative;display:flex;flex-direction:column;align-items:center;font-size:clamp(38px,9cqw,124px)}
.stf-stage:hover{--stf-orot:-2.5deg;--stf-osc:1.03}
.stf-h{position:relative;z-index:2;margin:0;font-family:var(--stf-display);font-weight:400;font-size:1em;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;transform:scaleX(1.12);color:var(--stf-ink)}
.stf-ch{display:inline-block}
.stf:not(.is-in) .stf-ch{opacity:0}
.stf.is-in .stf-ch{animation:stf-drop .7s cubic-bezier(.2,1.5,.35,1) both}
.stf-tag{position:relative;z-index:2;margin:.06em 0 0 -.3em;color:var(--stf-ink)}
.stf-orbit{position:absolute;left:-11%;top:-32%;width:120%;height:154%;z-index:1;overflow:visible;max-width:none;pointer-events:none;color:var(--stf-ink);transform:translate(calc(var(--stf-px,0) * -6px),calc(var(--stf-py,0) * -4px)) rotate(var(--stf-orot,0deg)) scale(var(--stf-osc,1));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.stf-orbit path{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:var(--l,999) var(--l,999);stroke-dashoffset:var(--l,999)}
.stf.is-in .stf-orbit path{animation:stf-write 2.2s .25s cubic-bezier(.5,0,.3,1) forwards}
.stf-star-wrap{position:absolute;z-index:3;right:-.62em;top:-1.2em;width:1.5em;height:1.5em;transform:translate(calc(var(--stf-px,0) * 18px),calc(var(--stf-py,0) * 12px));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.stf-star{position:relative;display:block;width:100%;height:100%;border-radius:50%;color:var(--stf-accent);transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.stf-star:hover{transform:scale(1.08)}
.stf-star:active{transform:scale(.94)}
.stf-star-pop{display:block;width:100%;height:100%}
.stf-star-svg{display:block;width:100%;height:100%;max-width:none;overflow:visible;animation:stf-spin 48s linear infinite;transition:filter .3s}
.stf-star:hover .stf-star-svg{filter:drop-shadow(0 0 .1em var(--stf-accent))}
.stf-star-svg path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:miter}
.stf-sparks{position:absolute;inset:0;pointer-events:none}
.stf-spark{position:absolute;left:50%;top:50%;height:2px;margin-top:-1px;transform-origin:0 50%;transform:rotate(var(--a))}
.stf-spark i{display:block;height:100%;border-radius:2px;background:var(--stf-accent);transform-origin:0 50%;animation:stf-shoot .7s cubic-bezier(.15,.8,.3,1) forwards}
.stf-signoff{position:relative;z-index:2;margin:2.4em 0 0;font-size:clamp(13px,1.15cqw,15px);opacity:.92;text-align:center}
.stf-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(12px,1.4cqw,20px) clamp(8px,1cqw,14px);font-size:clamp(13px,1.3cqw,17px)}
.stf-item{display:flex;flex-direction:column;align-items:center}
.stf-item.has-hand{padding-bottom:1.3em}
.stf-cap{height:1.9em;display:flex;align-items:flex-end;justify-content:center;margin-bottom:.3em}
.stf-cap-copied{color:var(--stf-accent)}
.stf-pillwrap{position:relative}
.stf .stf-pill{display:inline-flex;align-items:center;border:1.5px solid var(--stf-ink);border-radius:999px;padding:.32em .85em;min-height:44px;line-height:1.25;white-space:nowrap;color:var(--stf-ink);transition:background .25s,color .25s,transform .25s cubic-bezier(.2,.9,.3,1.4)}
.stf .stf-pill:hover,.stf .stf-pill:focus-visible{background:var(--stf-ink);color:var(--stf-bg)}
.stf-pill:active{transform:scale(.96)}
.stf-hand{position:absolute;left:54%;top:calc(100% - .75em);z-index:2;width:1.45em;height:1.85em;pointer-events:none;animation:stf-bob 2.4s ease-in-out infinite}
.stf-item:nth-child(4n+3) .stf-hand{animation-delay:-1.2s}
.stf-hand svg{display:block;width:100%;height:100%;max-width:none;overflow:visible;transition:transform .22s cubic-bezier(.2,.9,.3,1.4)}
.stf-palm{fill:var(--stf-ink);stroke:var(--stf-bg);stroke-width:1.5;stroke-linejoin:round}
.stf-knuckle{fill:none;stroke:var(--stf-bg);stroke-width:1.1;stroke-linecap:round}
.stf-click{fill:none;stroke:var(--stf-ink);stroke-width:1.4;stroke-linecap:round;opacity:0;transition:opacity .2s}
.stf-pillwrap:hover .stf-hand svg,.stf-pillwrap:focus-within .stf-hand svg{transform:translateY(-14%) scale(.9)}
.stf-pillwrap:hover .stf-click,.stf-pillwrap:focus-within .stf-click{opacity:1}
.stf-sep{display:block;flex:none;width:.72em;height:.72em;margin-top:2.75em;max-width:none;fill:var(--stf-ink);transition:transform .6s cubic-bezier(.2,.9,.3,1.3)}
.stf-links:hover .stf-sep{transform:rotate(45deg) scale(1.15)}
.stf-phone{margin-top:.75em;font-size:.95em;letter-spacing:.02em;opacity:.92;transition:color .2s;min-height:44px;display:inline-flex;align-items:center}
.stf-phone:hover{color:var(--stf-accent)}
.stf-script{display:block;flex:none;max-width:none;overflow:visible}
.stf .stf-script path{fill:none;stroke:currentColor;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--l,999) var(--l,999);stroke-dashoffset:var(--l,999)}
.stf.is-in .stf-script path{animation:stf-write .45s cubic-bezier(.6,.05,.3,1) forwards}
.stf-dno{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:0 32px 26px;font-size:.78rem;opacity:.6}
@container (max-width: 640px){.stf-links{flex-direction:column;align-items:center}.stf-sep{display:none}.stf-cap{height:1.6em}.stf-dno{justify-content:center;text-align:center}}
@keyframes stf-write{to{stroke-dashoffset:0}}
@keyframes stf-drop{0%{opacity:0;transform:translateY(-.35em) rotate(-8deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes stf-spin{to{transform:rotate(360deg)}}
@keyframes stf-shoot{0%{transform:translateX(40%) scaleX(.15);opacity:1}100%{transform:translateX(110%) scaleX(.55);opacity:0}}
@keyframes stf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes stf-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}}
@media (max-width:640px){.stf{border-radius:28px;min-height:620px;margin-bottom:96px}}
@media (prefers-reduced-motion: reduce){
  .stf::before,.stf-star-svg,.stf-hand{animation:none}
  .stf:not(.is-in) .stf-ch{opacity:1}
  .stf.is-in .stf-ch{animation:none}
  .stf .stf-script path,.stf .stf-orbit path{stroke-dashoffset:0}
  .stf.is-in .stf-script path,.stf.is-in .stf-orbit path{animation:none}
  .stf-sparks{display:none}
  .stf-star-wrap,.stf-orbit{transform:none;transition:none}
}

/* ---------- uvodni ekran i pojavljivanje teksta ---------- */
.uvod{display:none}
.sa-uvodom .uvod{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(900px 600px at 50% 40%,#3A1526,#140810 70%);color:#F3E9E2;border-radius:0 0 0 0;animation:uvod-gore 1s cubic-bezier(.76,0,.24,1) 1.75s forwards;pointer-events:none}
.uvod-in{display:grid;justify-items:center;gap:14px;text-align:center}
.uvod-mala{font:400 .72rem/1 "Newsreader",serif;letter-spacing:.42em;text-transform:uppercase;color:#D4B07A;opacity:0;animation:uvod-pojava .8s ease .15s forwards}
.uvod-rec{font:200 clamp(2.6rem,9vw,5.5rem)/1 "Jost",sans-serif;text-transform:uppercase;letter-spacing:.5em;margin-right:-.5em;opacity:0;filter:blur(8px);animation:uvod-rec 1.3s cubic-bezier(.2,.7,.2,1) .25s forwards}
.uvod-linija{display:block;width:min(240px,50vw);height:1px;background:linear-gradient(90deg,transparent,#D4B07A,transparent);transform:scaleX(0);animation:uvod-linija 1.2s cubic-bezier(.65,0,.35,1) .45s forwards}
@keyframes uvod-pojava{to{opacity:1}}
@keyframes uvod-rec{to{opacity:1;filter:none;letter-spacing:.22em;margin-right:-.22em}}
@keyframes uvod-linija{to{transform:scaleX(1)}}
@keyframes uvod-gore{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
.sa-uvodom .dize{animation-delay:calc(var(--k,.5s) + 1.95s)}
.sa-uvodom .slovo{animation-delay:calc(var(--i) * 55ms + 2.05s)}
.sa-uvodom .hero-foto{animation-delay:1.75s}

.js .tekst{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .9s ease var(--td,0ms),transform 1s cubic-bezier(.2,.7,.2,1) var(--td,0ms),filter .9s ease var(--td,0ms)}
.js .tekst.vidi{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.sa-uvodom .uvod{display:none}.js .tekst{opacity:1;transform:none;filter:none}}

/* ---------- paleta: Šljiva i zlato ---------- */
:root{
  --papir:#F6F1EC;--latica:#EFE4DF;--vino:#5B1A33;--vino-tamno:#43121F;--vino-rgb:91,26,51;
  --tinta:#2A1620;--siva:#6B5560;--linija:#E3D6CF;--zlato:#8E6B3B;--zlato-svetlo:#B08D57;--sampanjac:#EBD3A6;
  --footer-bg:#1F0E16;--footer-ink:#F3E9E2;--footer-akcent:#D4B07A;--footer-ivica:#0B0508;
}
.glava .mala,.mala[style*="--vino"],.vrata .mala,.put .kada,.izbor .mala{color:var(--zlato)!important}
.napredak{background:linear-gradient(90deg,var(--vino),var(--zlato-svetlo))}
.cinjenice b,.ocena b,.traka-ocena b,.ukupno b{color:var(--vino)}
.cinjenice{border-top-color:var(--zlato-svetlo)}
.prilike{border-top-color:var(--zlato-svetlo)}
.put::after{background:linear-gradient(var(--vino),var(--zlato-svetlo))}
.put li::before{border-color:var(--zlato-svetlo)}
.meni{background:rgba(246,241,236,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(176,141,87,.35)}
.znak{color:var(--vino)}
.vas-buket,.traka-ocena,.ocena{background:var(--latica);box-shadow:inset 0 0 0 1px rgba(176,141,87,.28)}
.znacka{background:var(--zlato-svetlo);color:#1F0E16}
.cvet.izabran figure{box-shadow:0 0 0 2px var(--zlato-svetlo)}
.pakovanje input:checked+span{background:var(--vino);border-color:var(--vino)}
.btn.svetlo{border-color:rgba(235,211,166,.8)}
.btn.svetlo:hover{background:var(--sampanjac);border-color:var(--sampanjac);color:var(--tinta)}
.strelica{border-color:rgba(235,211,166,.75)}
.vrata a:hover .strelica{background:var(--sampanjac);color:var(--tinta)}
.baner-tekst .mala,.hero-tekst .mala{color:var(--sampanjac)}
.dalje{border-top-color:var(--zlato-svetlo)}

/* ---------- pozadina: Noćna šljiva ---------- */
:root{
  --papir:#1A0B12;--latica:#26121C;--tinta:#F3E9E2;--siva:#BBA6AF;--linija:#3B2430;
  --vino:#D4B07A;--vino-tamno:#B8925A;--vino-rgb:212,176,122;
  --zlato:#C9A46A;--zlato-svetlo:#D4B07A;--sampanjac:#EBD3A6;
  --footer-bg:#120609;--footer-ink:#F3E9E2;--footer-akcent:#D4B07A;--footer-ivica:#050203;
}
body{background:radial-gradient(1200px 700px at 85% -10%,rgba(91,26,51,.55),transparent 60%),radial-gradient(900px 600px at -10% 40%,rgba(91,26,51,.35),transparent 60%),var(--papir);background-attachment:fixed}
.btn{color:#1A0B12}
.btn.prazno:hover,.pakovanje input:checked+span{color:#1A0B12}
.btn.svetlo{color:#fff}
.znacka{background:var(--zlato-svetlo);color:#1A0B12}
.meni{background:rgba(26,11,18,.78);color:var(--tinta)}
.meni nav a{color:var(--tinta)}
.mob-meni{background:var(--papir)}
.mob-meni a{color:var(--tinta)}
.krug{background:radial-gradient(circle at 50% 45%,rgba(235,211,166,.18) 0,rgba(235,211,166,.08) 35%,rgba(235,211,166,0) 70%)}
.forma input,.forma select,.forma textarea{background:#22101A;color:var(--tinta);border-color:var(--linija)}
.forma input::placeholder,.forma textarea::placeholder{color:#8E7A84}
.kol button{background:transparent}
.vas-buket,.traka-ocena,.ocena{background:linear-gradient(160deg,#2A1420,#1F0E16);box-shadow:inset 0 0 0 1px rgba(212,176,122,.25)}
.stf{box-shadow:0 0 0 1px rgba(212,176,122,.22)}
.traka{background:rgba(26,11,18,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vrata .boja{background:#5B1A33}
@media (max-width:640px){.traka{background:rgba(26,11,18,.92)}}
.ruka{background:linear-gradient(135deg,#E9D3C9,#C9A88E);border-radius:28px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(212,176,122,.3)}.ruka img{mix-blend-mode:multiply;display:block}
.hero-foto{background-color:#2A1220;background-image:url("img/hero-mirno.webp")}
.baner .hero-foto{background-image:var(--slika)}
.hero::after{background:linear-gradient(180deg,rgba(26,11,18,.35) 0%,rgba(26,11,18,.12) 40%,rgba(26,11,18,.6) 100%)}
@media (max-width:640px){.hero .hero-foto{background-position:72% center}}