/* Toplo do prstiju – razglednice, marke i žigovi */
:root{
  --tirkiz:#2c9696;
  --tirkiz-tamna:#1c5f5f;
  --ruza:#c0598c;
  --ruza-tamna:#9a3a6b;
  --crvena:#c32222;
  --papir:#f5fafa;
  --plocha:#e2f3f3;
  --tinta:#1b2d2d;
  --karton:#fffdf8;
  --naslov:"Play", "Trebuchet MS", sans-serif;
  --tekst:"Fira Mono", "Courier New", monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--tekst);
  font-size:17.5px;
  line-height:1.72;
  color:var(--tinta);
  background-color:var(--papir);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  padding-bottom:96px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--tirkiz-tamna)}
:focus-visible{outline:3px solid var(--ruza);outline-offset:3px}
h1,h2,h3{font-family:var(--naslov);line-height:1.15;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(2.3rem,5.2vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.85rem,3.6vw,2.75rem);font-weight:700}
h3{font-size:1.38rem;font-weight:700}
p{margin:0 0 1em}
.okvir{width:min(1160px,100% - 40px);margin-inline:auto}
.uzak{max-width:68ch}

/* ---------- zaglavlje ---------- */
.zaglavlje{padding:16px 0;border-bottom:2px dashed rgba(28,95,95,.35);background:rgba(245,250,250,.92)}
.zaglavlje .okvir{display:flex;align-items:center;justify-content:space-between;gap:16px}
.znak{display:flex;align-items:center;gap:10px;font-family:var(--naslov);font-weight:700;font-size:1.6rem;color:var(--tirkiz-tamna);text-decoration:none}
.znak svg{width:38px;height:46px;flex:0 0 auto}
.dugme{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--naslov);font-weight:700;text-decoration:none;color:#fff;background:var(--crvena);
  border:0;cursor:pointer;
  --zub:9px;
  -webkit-mask:radial-gradient(circle var(--zub) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--zub) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--zub) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--zub) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  transition:background-color .2s;
}
.dugme:hover{background:#a01b1b}
.dugme-zag{min-height:54px;padding:10px 28px;font-size:18px}
.dugme-glavno{min-height:86px;min-width:320px;padding:18px 44px;font-size:23px;line-height:1.25}

/* ---------- hero razglednica ---------- */
.uvod{padding:30px 0 70px}
.razglednica{
  position:relative;display:grid;grid-template-columns:1.08fr 1fr;
  background:var(--karton);
  box-shadow:0 2px 0 rgba(27,45,45,.08),0 22px 40px -22px rgba(28,95,95,.45);
  transform:rotate(-1.1deg);
}
.razglednica-lice{padding:18px;position:relative;display:flex;flex-direction:column;margin:0}
.razglednica-lice img{width:100%;flex:1 1 auto;height:0;min-height:380px;object-fit:cover;object-position:52% 60%;border:12px solid #fff;box-shadow:0 0 0 1px rgba(27,45,45,.12)}
.razglednica-lice figcaption{font-size:14.5px;line-height:1.5;margin-top:10px;color:#3b5555}
.traka{position:absolute;width:118px;height:30px;background:rgba(192,89,140,.42);z-index:2}
.traka-1{top:4px;left:28px;transform:rotate(-7deg)}
.traka-2{bottom:46px;right:-14px;transform:rotate(38deg)}
.razglednica-ledja{
  position:relative;padding:38px 40px 34px 44px;
  border-left:2px solid rgba(28,95,95,.25);
  display:flex;flex-direction:column;gap:6px;
}
.razglednica-ledja h1{color:var(--tirkiz-tamna);font-size:clamp(2.3rem,4.2vw,3.5rem);margin-right:130px}
.perex{font-size:18px}
.adresa{list-style:none;margin:22px 0 0;padding:0;font-size:17px}
.adresa li{border-bottom:1.5px solid rgba(28,95,95,.35);padding:6px 0 3px}
.ugao{position:absolute;top:26px;right:26px;width:112px}
.ugao .marka-mala{transform:rotate(4deg)}
.zig{position:absolute;pointer-events:none;color:var(--ruza);opacity:.85}
.ugao .zig{width:110px;height:72px;top:46px;left:-58px;transform:rotate(-14deg)}

/* poštanska marka – perforacija maskom */
.marka-mala{
  --r:5px;width:100px;height:120px;padding:calc(var(--r)*2);
  background:var(--tirkiz);
  -webkit-mask:radial-gradient(var(--r) at var(--r) var(--r),#0000 97%,#000) calc(var(--r)*-1) calc(var(--r)*-1)/calc(var(--r)*3) calc(var(--r)*3) round,linear-gradient(#000 0 0) content-box;
          mask:radial-gradient(var(--r) at var(--r) var(--r),#0000 97%,#000) calc(var(--r)*-1) calc(var(--r)*-1)/calc(var(--r)*3) calc(var(--r)*3) round,linear-gradient(#000 0 0) content-box;
}
.marka-mala svg{width:100%;height:100%;display:block}
.marka-ruza{background:var(--ruza)}
.marka-tamna{background:var(--tirkiz-tamna)}

/* ---------- situacije: tri razglednice ---------- */
.scene{padding:80px 0 96px;background:var(--plocha)}
.scene-uvod{max-width:62ch;margin-bottom:44px}
.scene-mreza{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "c c";gap:44px 48px}
.karta{position:relative;background:var(--karton);padding:34px 34px 30px;box-shadow:0 18px 30px -24px rgba(28,95,95,.6)}
.karta-a{grid-area:a;transform:rotate(-1.6deg)}
.karta-b{grid-area:b;transform:rotate(1.2deg);margin-top:34px}
.karta-c{grid-area:c;display:grid;grid-template-columns:1.1fr 1fr;gap:34px;padding:22px;transform:rotate(-.5deg)}
.karta-c .karta-tekst{padding:18px 18px 10px 0;border-left:2px solid rgba(28,95,95,.22);padding-left:30px}
.karta h3{color:var(--tirkiz-tamna);padding-right:84px}
.mesto{font-family:var(--naslov);font-size:15px;color:var(--ruza-tamna);margin-bottom:10px;display:block}
.karta .marka-mala{position:absolute;top:-16px;right:22px;width:72px;height:88px;--r:4px}
.karta-c .marka-mala{right:30px}
.karta-c figure{margin:0}
.karta-c img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:60% 70%;border:10px solid #fff;box-shadow:0 0 0 1px rgba(27,45,45,.12)}
.karta-c figcaption{font-size:14.5px;line-height:1.5;margin-top:8px;color:#3b5555}
.karta .traka{width:90px;height:26px}
.karta-a .traka{top:-12px;left:30px;transform:rotate(-4deg)}
.karta-b .traka{bottom:-10px;left:42%;transform:rotate(3deg);background:rgba(44,150,150,.38)}
.karta-c .traka{top:-10px;left:-18px;transform:rotate(-30deg)}

/* ---------- výklad: tamni pojas s pocepanim ivicama ---------- */
.pocepano{
  --s:22px;
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--s) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--s) 51% repeat-x;
          mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--s) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--s) 51% repeat-x;
}
.put{background:var(--tirkiz-tamna);color:#eef8f8;padding:104px 0 112px}
.put h2{color:#fff;max-width:22ch}
.put .uzak a{color:#fff}
.put-slika{margin:40px auto 52px;max-width:640px;background:var(--karton);padding:16px 16px 14px;color:var(--tinta);transform:rotate(.8deg);position:relative}
.put-slika img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 50%}
.put-slika figcaption{font-size:15px;line-height:1.5;margin-top:10px}
.put-slika .traka{top:-14px;right:40px;transform:rotate(6deg)}
.uzroci{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 30px;margin-bottom:40px}
.cedulja{background:var(--karton);color:var(--tinta);padding:26px 28px 22px;position:relative;border-top:6px solid var(--tirkiz)}
.cedulja:nth-child(1){transform:rotate(-.8deg)}
.cedulja:nth-child(2){transform:rotate(.7deg);border-top-color:var(--ruza)}
.cedulja:nth-child(3){transform:rotate(.4deg);border-top-color:var(--ruza)}
.cedulja:nth-child(4){transform:rotate(-.6deg)}
.cedulja h3{font-size:1.25rem;color:var(--tirkiz-tamna)}
.cedulja p{margin:0}
.izvor{display:block;font-size:14.5px;color:#486666;margin-top:8px}
.put .izvor-svetlo{color:#cfe9e9}
.znaci{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start;border:2px dashed rgba(255,255,255,.45);padding:32px 34px}
.znaci h3{color:#fff}
.znaci ul{margin:0;padding-left:1.2em}
.znaci li{margin-bottom:.35em}
.lekar{background:rgba(255,255,255,.1);padding:22px 24px;border-left:5px solid var(--ruza)}
.lekar p{margin:0}

/* ---------- marke sa činjenicama ---------- */
.marke{padding:92px 0 96px}
.marke-mreza{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:40px;align-items:start}
.marka-velika{
  --r:7px;padding:calc(var(--r)*2);background:var(--tirkiz);
  -webkit-mask:radial-gradient(var(--r) at var(--r) var(--r),#0000 97%,#000) calc(var(--r)*-1) calc(var(--r)*-1)/calc(var(--r)*3) calc(var(--r)*3) round,linear-gradient(#000 0 0) content-box;
          mask:radial-gradient(var(--r) at var(--r) var(--r),#0000 97%,#000) calc(var(--r)*-1) calc(var(--r)*-1)/calc(var(--r)*3) calc(var(--r)*3) round,linear-gradient(#000 0 0) content-box;
}
.marka-velika:nth-child(2){background:var(--ruza);margin-top:40px}
.marka-velika:nth-child(3){background:var(--tirkiz-tamna);margin-top:14px}
.marka-polje{background:var(--karton);padding:26px 24px 22px;height:100%;position:relative}
.marka-polje h3{font-size:1.22rem;color:var(--tirkiz-tamna)}
.broj{font-family:var(--naslov);font-weight:700;font-size:3rem;line-height:1;color:var(--ruza);display:block;margin-bottom:10px}
.marka-polje .zig{width:96px;height:62px;right:4px;top:62px;transform:rotate(-10deg);opacity:.55}

/* ---------- ponuda: avionska koverta ---------- */
.ponuda{background:var(--tirkiz);padding:96px 0 100px}
.koverta{
  max-width:900px;margin-inline:auto;padding:16px;
  background:repeating-linear-gradient(-45deg,var(--crvena) 0 22px,#fff 22px 34px,var(--tirkiz-tamna) 34px 56px,#fff 56px 68px);
  transform:rotate(-.7deg);
}
.koverta-unutra{background:var(--karton);padding:46px 52px 48px;display:grid;grid-template-columns:1fr 150px;gap:30px}
.koverta-unutra h2{color:var(--tirkiz-tamna)}
.koverta .marka-mala{width:120px;height:146px;transform:rotate(-3deg)}
.koverta-strana{position:relative}
.koverta-strana .zig{width:118px;height:76px;top:110px;left:-40px;transform:rotate(12deg)}

/* ---------- recenzije ---------- */
.poruke{padding:92px 0 80px}
.poruke-mreza{display:flex;flex-wrap:wrap;gap:36px 40px;margin-top:36px;align-items:flex-start}
.poruke figure{margin:0;flex:1 1 280px;background:#fff;padding:28px 28px 22px;position:relative;border-bottom:3px solid var(--plocha)}
.poruke figure:nth-child(1){transform:rotate(-2deg)}
.poruke figure:nth-child(2){transform:rotate(1.4deg);margin-top:28px}
.poruke figure:nth-child(3){transform:rotate(-.6deg);margin-top:8px}
.poruke blockquote{margin:0 0 14px;font-family:var(--naslov);font-size:1.3rem;line-height:1.4}
.poruke cite{font-style:normal;font-size:15.5px;color:var(--ruza-tamna)}
.poruke .traka{width:80px;height:24px;top:-12px;left:50%;margin-left:-40px;transform:rotate(-3deg);background:rgba(44,150,150,.35)}

/* ---------- pitanja ---------- */
.pitanja{padding:30px 0 96px}
.pitanja-lista{max-width:860px;margin-top:30px}
.pitanja details{background:var(--karton);border:1.5px solid rgba(28,95,95,.3);margin-bottom:14px;position:relative}
.pitanja summary{cursor:pointer;padding:20px 64px 20px 24px;font-family:var(--naslov);font-weight:700;font-size:1.18rem;list-style:none}
.pitanja summary::-webkit-details-marker{display:none}
.pitanja summary::after{content:"+";position:absolute;right:22px;top:14px;font-size:1.8rem;color:var(--ruza)}
.pitanja details[open] summary::after{content:"–"}
.pitanja details p{padding:0 24px 20px;margin:0}

/* ---------- zaključak ---------- */
.kraj{background:var(--tirkiz-tamna);color:#fff;padding:100px 0 110px}
.kraj-razglednica{display:grid;grid-template-columns:1fr 1fr;background:var(--karton);color:var(--tinta);transform:rotate(1deg);max-width:1060px;margin-inline:auto}
.kraj-razglednica figure{margin:0;padding:16px;display:flex;flex-direction:column}
.kraj-razglednica img{width:100%;flex:1 1 auto;height:0;min-height:340px;object-fit:cover;object-position:40% 60%;border:10px solid #fff;box-shadow:0 0 0 1px rgba(27,45,45,.12)}
.kraj-razglednica figcaption{font-size:14.5px;line-height:1.5;margin-top:8px;color:#3b5555}
.kraj-tekst{padding:44px 44px 40px;border-left:2px solid rgba(28,95,95,.25);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.kraj-tekst h2{color:var(--tirkiz-tamna)}

/* ---------- podnožje ---------- */
.podnozje{padding:34px 0 30px;font-size:15px;border-top:2px dashed rgba(28,95,95,.35)}
.podnozje .okvir{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.podnozje nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.podnozje p{margin:0}

/* ---------- podstranice ---------- */
body.kratka{min-height:100vh;display:flex;flex-direction:column}
body.kratka main{flex:1}
.stranica{padding:60px 0 80px}
.list{background:var(--karton);padding:46px 52px;max-width:760px;margin-inline:auto;box-shadow:0 18px 30px -26px rgba(28,95,95,.6);position:relative}
.list h1{font-size:clamp(2rem,4vw,2.9rem);color:var(--tirkiz-tamna)}
.list h2{font-size:1.45rem;margin-top:1.6em;color:var(--tirkiz-tamna)}
.list .marka-mala{position:absolute;top:-18px;right:34px;width:76px;height:92px;--r:4px;transform:rotate(5deg)}
.list ul{padding-left:1.2em}
.obrazac{display:grid;gap:18px;margin-top:20px;max-width:560px}
.obrazac label{display:grid;gap:6px;font-family:var(--naslov);font-weight:700}
.obrazac input,.obrazac textarea{font:inherit;font-family:var(--tekst);font-weight:400;font-size:17px;padding:12px 14px;border:1.5px solid rgba(28,95,95,.45);background:#fff;color:var(--tinta)}
.obrazac button{justify-self:start;min-height:60px;padding:12px 38px;font-size:19px}
#kontaktDakujeme{margin-top:20px;padding:22px 26px;background:var(--plocha);border-left:5px solid var(--tirkiz);font-size:18px}

/* ---------- popup i traka (engine) ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(10,32,32,.82);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.modal-overlay.show{display:flex}
.modal{position:relative;width:min(660px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--karton);padding:46px 42px 40px;text-align:center;border:10px solid #fff;outline:3px dashed var(--ruza);outline-offset:-20px}
.modal .close{position:absolute;top:10px;right:12px;width:48px;height:48px;border:0;background:var(--tirkiz-tamna);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.modal .badge{display:inline-block;background:var(--ruza-tamna);color:#fff;font-family:var(--naslov);font-weight:700;font-size:17px;padding:6px 16px;margin-bottom:14px;transform:rotate(-2deg)}
.modal h3{font-size:46px;color:var(--crvena);margin:6px 0 8px}
.modal p{font-size:19px;margin:0 0 10px}
.modal .offer{background:var(--plocha);padding:16px 18px;margin:16px 0 22px}
.modal .offer p{margin:4px 0;font-size:17.5px}
.modal .btn{white-space:normal}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:var(--crvena);color:#fff;text-decoration:none;font-family:var(--naslov);font-weight:700;border:0}
.btn-cta:hover{background:#a01b1b}
.btn-cta-xl{width:100%;min-height:88px;font-size:23px;padding:16px 22px;line-height:1.25}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:center;justify-content:center;gap:20px;padding:12px 20px;background:var(--tirkiz-tamna);color:#fff;border-top:4px solid var(--ruza)}
.sticky-cta > span{font-size:17px}
.sticky-cta .btn{flex:0 0 auto;min-height:62px;padding:10px 28px;font-size:19px}

/* ---------- mobil ---------- */
@media (max-width:860px){
  .razglednica,.karta-c,.kraj-razglednica,.znaci,.koverta-unutra{grid-template-columns:1fr}
  .razglednica{transform:none}
  .razglednica-ledja{order:-1;border-left:0;border-bottom:2px solid rgba(28,95,95,.25);padding:28px 22px 26px}
  .razglednica-ledja h1{margin-right:76px}
  .ugao{top:16px;right:12px;width:70px}
  .ugao .marka-mala{width:66px;height:80px;--r:4px}
  .ugao .zig{width:80px;height:52px;top:52px;left:-30px}
  .razglednica-lice{padding:12px}
  .razglednica-lice img{flex:none;height:auto;min-height:0;aspect-ratio:4/3}
  .scene-mreza{grid-template-columns:1fr;grid-template-areas:"a" "b" "c"}
  .karta-b{margin-top:0}
  .karta-c .karta-tekst{border-left:0;padding:0 8px 8px}
  .uzroci,.marke-mreza{grid-template-columns:1fr}
  .marka-velika:nth-child(n){margin-top:0}
  .koverta-unutra{padding:30px 24px}
  .koverta-strana{display:none}
  .kraj-razglednica img{flex:none;height:auto;min-height:0;aspect-ratio:4/3}
  .kraj-tekst{border-left:0;padding:26px 22px 30px}
  .dugme-glavno{min-width:0;width:100%;align-self:stretch;padding:16px 20px;font-size:21px}
  .list{padding:34px 22px}
  .put-slika{transform:none}
}
@media (max-width:560px){
  .okvir{width:calc(100% - 28px)}
  .uvod{padding:16px 0 50px}
  .adresa{display:none}
  .razglednica-ledja h1{font-size:2.15rem}
  .perex{font-size:17px;line-height:1.62}
  .dugme-zag{padding:8px 16px;font-size:16px;min-height:48px}
  .znak{font-size:1.25rem}
  .znak svg{width:30px;height:36px}
  .karta{padding:30px 20px 24px}
  .karta h3{padding-right:62px}
  .karta .marka-mala{width:58px;height:70px}
  .karta-c{padding:12px}
  .znaci{padding:24px 18px}
  .sticky-cta{flex-direction:column;gap:8px;padding:10px 14px;text-align:center}
  .sticky-cta .btn{width:100%;min-height:60px}
  body{padding-bottom:150px}
  .modal{padding:44px 20px 26px}
  .modal h3{font-size:38px}
  .btn-cta-xl{font-size:20px}
  .pitanja summary{padding-right:52px}
}
.razglednica-ledja .dugme-glavno{align-self:flex-start;margin-top:6px}