/* ===== Kuponi.hr — "kupon za otkinuti" ===== */
:root{
  --bg:#f3f5f9; --surface:#ffffff; --ink:#151a33; --muted:#5b6178; --line:#e1e4ee;
  --brand:#0b7a55; --brand-dark:#075e41; --brand-soft:#e5f4ee; --brand-ink:#ffffff;
  --stub:#151a33; --stamp:#ffcf3f; --stamp-ink:#3d2c00;
  --ok:#0b7a55; --ok-soft:#e5f4ee; --warn:#8a5300; --warn-soft:#fff3d6; --bad:#a61b1b; --bad-soft:#fde8e8;
  --radius:16px; --shadow:0 1px 2px rgba(21,26,51,.06),0 8px 24px rgba(21,26,51,.06);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #b45309;outline-offset:2px;border-radius:6px}
.btn-primary:focus-visible{outline-color:var(--ink)}
.wrap{max-width:900px;margin:0 auto;padding-inline:16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Header ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;margin:0}
.logo-mark{color:var(--brand);display:inline-flex;--logo-cut:var(--surface)}
.logo-word{font:800 1.45rem/1 var(--display);letter-spacing:-.02em}
.logo-tld{color:var(--brand)}
.main-nav{display:flex;align-items:center;gap:6px;font-size:.95rem}
.main-nav a{color:var(--muted);text-decoration:none;padding:12px 8px;border-radius:10px}
.main-nav a:hover{color:var(--ink);background:var(--bg)}
.main-nav .nav-cta{background:var(--stamp);color:var(--stamp-ink);font-weight:800;padding:10px 14px;animation:pulse-yellow 2.6s ease-out infinite}
.main-nav .nav-cta:hover{background:#ffd95e;color:var(--stamp-ink)}
@media(max-width:640px){.nav-extra{display:none}.header-inner{min-height:58px}.logo-word{font-size:1.25rem}.main-nav .nav-cta{font-size:.88rem;padding:9px 12px}}

/* ---------- Typography ---------- */
main{padding-block:18px 48px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(1.85rem,5vw,2.6rem);line-height:1.1;font-weight:800;margin:.35em 0 .3em}
h2{font-size:clamp(1.35rem,3.4vw,1.7rem);line-height:1.2;font-weight:800;margin:2em 0 .6em}
h3{font-size:1.12rem;line-height:1.3;font-weight:600;margin:1.2em 0 .3em}
p,ul,ol{margin:0 0 1em}
main p,main li{max-width:68ch}
.lead{font-size:1.1rem;color:var(--muted)}
.updated{font-size:.88rem;color:var(--muted);margin:0 0 1em}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{color:var(--muted);display:inline-block;padding:8px 0}
.disclosure{font-size:.82rem;line-height:1.5;color:var(--muted);border-left:3px solid var(--line);padding:2px 0 2px 12px;margin:0 0 16px}
mark.todo{background:#fde68a;color:#78350f;padding:0 4px;border-radius:4px}

/* ---------- Hero ticket ---------- */
.hero-ticket{display:grid;grid-template-columns:1fr;background:var(--surface);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;margin:6px 0 16px;position:relative}
.hero-stub{background:var(--stub);color:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:2px;position:relative}
.hero-eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:#b9bfdc;font-weight:700}
.hero-value{font:800 clamp(3rem,13vw,3.6rem)/1 var(--display);color:var(--stamp);letter-spacing:-.03em;white-space:nowrap}
.hero-plus{font:600 1.05rem/1.2 var(--display);color:#fff}
.hero-body{padding:18px 20px 20px;display:grid;gap:10px;position:relative}
.hero-body::before{content:"";position:absolute;left:14px;right:14px;top:0;border-top:2px dashed var(--line)}
.hero-text{margin:0;font-size:1rem}
.hero-note{margin:0;font-size:.82rem;color:var(--muted)}
.hero-video{margin:0;font-weight:600}
.hero-ticket::before,.hero-ticket::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:var(--bg);z-index:2}
@media(max-width:699px){.hero-ticket::before,.hero-ticket::after{display:none}}
@media(min-width:700px){
  .hero-ticket{grid-template-columns:230px 1fr}
  .hero-stub{justify-content:center;padding:24px}
  .hero-body{padding:24px 26px}
  .hero-body::before{left:0;right:auto;top:14px;bottom:14px;border-top:0;border-left:2px dashed var(--line)}
  .hero-ticket::before{top:-11px;left:219px}.hero-ticket::after{bottom:-11px;top:auto;left:219px}
  .hero-body .code-box,.hero-body .btn{max-width:440px}
}

/* ---------- Trust strip & store box ---------- */
.trust{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;color:var(--muted)}
.trust li{max-width:none}
.trust span{color:var(--brand);font-weight:800;margin-right:2px}
.store-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:0 0 18px}
.store-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.store-chip{font:800 1.2rem/1 var(--display);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.store-sub{color:var(--muted);font-size:.9rem}
.store-stats{display:flex;gap:18px;margin:0;flex-wrap:wrap}
.store-stats div{display:flex;flex-direction:column}
.store-stats dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.store-stats dd{margin:0;font:800 1.1rem/1.3 var(--display);font-variant-numeric:tabular-nums}

/* ---------- Ticket cards ---------- */
.code-list{display:grid;gap:16px}
.ticket{display:grid;grid-template-columns:1fr;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}
.ticket-stub{background:var(--stub);color:#fff;display:flex;align-items:baseline;gap:10px;padding:14px 18px;min-height:64px;border-bottom:2px dashed rgba(255,255,255,.3)}
.ticket::before,.ticket::after{content:"";position:absolute;top:54px;width:20px;height:20px;border-radius:50%;background:var(--bg)}
.ticket::before{left:-10px}.ticket::after{right:-10px}
.stub-value{font:800 1.9rem/1 var(--display);color:var(--stamp);letter-spacing:-.02em;white-space:nowrap}
.stub-label{font-size:.74rem;line-height:1.25;color:#c9cde6;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.ticket-body{padding:16px 18px 12px;display:grid;gap:10px;min-width:0}
.ticket-title{margin:0;font-size:1.08rem}
.ticket-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.ticket-action{display:grid;gap:8px}
@media(min-width:720px){
  .ticket{grid-template-columns:160px 1fr}
  .ticket-stub{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 10px;border-bottom:0;border-right:2px dashed rgba(255,255,255,.3)}
  .ticket::before,.ticket::after{left:150px;right:auto}
  .ticket::before{top:-10px}.ticket::after{top:auto;bottom:-10px}
  .stub-value{font-size:2.2rem}
  .ticket-action{grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
}
.pill,.badge{display:inline-block;font-size:.76rem;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--bg);color:var(--muted);line-height:1.3}
.pill{background:#eef0fb;color:#343b6b}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-src{background:var(--bg);color:var(--muted)}
.badge-expired{background:var(--bad-soft);color:var(--bad)}
.terms{font-size:.9rem;color:var(--muted)}
.terms summary{cursor:pointer;font-weight:700;color:var(--ink);padding:6px 0;width:max-content}
.terms p{margin:.2em 0 .4em}
.is-expired .ticket-stub{background:#8a8fa5}.is-expired .stub-value{color:#fff}.is-expired .ticket-title{color:var(--muted)}

/* Code box & buttons */
.code-box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;cursor:copy;border:2px dashed var(--brand);border-radius:12px;padding:9px 12px;background:var(--brand-soft);color:var(--ink);font:700 1.3rem/1.15 var(--mono);letter-spacing:.08em}
.code-box:hover{background:#d8efe6}
.code-hint{display:block;font:600 .7rem/1.3 var(--font);color:var(--brand-dark);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.code-box-expired{border-color:var(--line);background:var(--bg);color:var(--muted);cursor:default}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 20px;border-radius:12px;font-weight:800;text-decoration:none;text-align:center;border:0;cursor:pointer;font-size:1rem;line-height:1.2;transition:transform .1s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:var(--brand-ink);box-shadow:0 2px 0 var(--brand-dark)}
.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-ghost{background:var(--surface);color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-small{min-height:40px;padding:8px 12px;font-size:.9rem;background:#fff;color:var(--brand-dark)}

/* Screenshots */
.shot{margin:0}
.shot img{border:1px solid var(--line);border-radius:12px;max-width:260px}
.shot figcaption{font-size:.8rem;color:var(--muted);margin-top:4px}
.shot-toggle summary{cursor:pointer;color:var(--brand-dark);font-weight:700;font-size:.9rem;padding:4px 0}
details.expired{margin-top:18px}
details.expired summary{cursor:pointer;color:var(--muted);font-weight:700}
.proof{margin:0 0 18px}
.proof-h{font:800 1rem/1.3 var(--display);margin:0 0 8px}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px}
.proof figure{margin:0}
.proof img{aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:1px solid var(--line);width:100%}
.proof figcaption{font-size:.8rem;color:var(--muted)}

/* Steps */
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:10px}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 14px 60px;position:relative;max-width:none}
.steps li::before{content:counter(s);position:absolute;left:14px;top:13px;width:32px;height:32px;border-radius:9px;background:var(--stub);color:var(--stamp);display:grid;place-items:center;font:800 1rem/1 var(--display)}
.steps li strong{display:block;font-family:var(--display)}

/* Tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
tr:last-child td{border-bottom:0}
th{background:#eef0f6;font-weight:700}

/* Callouts */
.note,.tip{border-radius:12px;padding:12px 14px;margin:1em 0;max-width:68ch}
.note{background:var(--warn-soft);color:#4d3000}
.tip{background:var(--brand-soft);color:#08432f}

/* FAQ */
.faq{display:grid;gap:8px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 16px}
.faq-item summary{cursor:pointer;font-weight:700;padding:14px 28px 14px 0;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:10px;color:var(--brand);font-size:1.4rem;font-weight:800}
.faq-item[open] summary::after{content:"–"}
.faq-a{padding:0 0 12px}

/* Author, changelog, related, cards */
.author{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:28px 0}
.author-mark{color:var(--brand);flex:none;--logo-cut:var(--surface)}
.author p{margin:0 0 .3em;font-size:.95rem}
.author-name{font:800 1.05rem/1.3 var(--display)}
.author-role{color:var(--muted)}
.changelog{font-size:.92rem}
.changelog h2{font-size:1.1rem}
.changelog time{font-weight:700;margin-right:6px}
.related ul{padding-left:1.1em}
.footer-grid ul a,.related a{display:inline-block;padding:10px 0}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-decoration:none;color:var(--muted);font-size:.95rem;transition:border-color .15s ease,transform .15s ease}
.card strong{display:block;color:var(--ink);font:800 1.05rem/1.3 var(--display);margin-bottom:4px}
.card:hover{border-color:var(--ink);transform:translateY(-2px)}

/* Calculator */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:10px;max-width:520px}
.calc label{font-weight:700}
.calc input{font-size:1.1rem;padding:10px 12px;border:2px solid var(--line);border-radius:10px;width:100%;max-width:200px}
.calc output{font:800 1.4rem/1 var(--display);color:var(--brand-dark)}

/* Video */
.video-wrap{margin:12px 0 20px}
.video-wrap figcaption{font-size:.9rem;color:var(--muted);margin-top:6px}
.yt{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:var(--radius);overflow:hidden;background:#000}
.yt img,.yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.yt-play{all:unset;cursor:pointer;display:block;width:100%;height:100%}
.yt-play::after{content:"";position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);border-radius:12px;background:#e00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/28px no-repeat}

/* Footer */
.site-footer{background:var(--stub);color:#c9cde6;margin-top:40px;padding-block:32px 16px;font-size:.93rem}
.site-footer a{color:#fff}
.site-footer .logo{color:#fff}
.site-footer .logo-mark{color:var(--stamp);--logo-cut:var(--stub)}
.site-footer .logo-tld{color:var(--stamp)}
.footer-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.footer-h{font:800 1rem/1.3 var(--display);color:#fff;margin-bottom:6px}
.footer-legal{border-top:1px solid #2c3358;margin-top:24px;padding-top:16px;font-size:.8rem;color:#9aa0c2}

/* Toast & return bar */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;z-index:50}
.return-bar{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--stub);color:#fff;border-radius:14px;padding:10px 42px 10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:640px;margin:0 auto}
.return-bar[hidden]{display:none}
.return-bar p{margin:0;font-size:.95rem;flex:1 1 220px}
.return-bar strong{color:var(--stamp);font-family:var(--mono)}
.return-close{position:absolute;right:6px;top:6px;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;width:32px;height:32px}


/* ---------- Sadržaj stranice (čipovi) ---------- */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:0 0 8px}
.toc-h{font:800 .75rem/1.3 var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px}
.toc-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.toc-list li{max-width:none;margin:0}
.toc-list a{display:inline-block;padding:7px 12px;border-radius:999px;background:#eef0fb;color:#262d52;font-weight:700;font-size:.9rem;text-decoration:none;transition:background .15s ease,transform .15s ease}
.toc-list a:hover{background:var(--stamp);color:var(--stamp-ink);transform:translateY(-1px)}
h2[id]{scroll-margin-top:80px}
.steps .shot{margin-top:10px}

/* ---------- Fotografije ---------- */
.photo{margin:0 0 16px}
.photo img{width:100%;max-width:100%;border-radius:var(--radius);aspect-ratio:16/7;object-fit:cover;box-shadow:var(--shadow)}
.photo figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}
.photo-band{position:relative;border-radius:20px;overflow:hidden;margin:6px 0 20px;box-shadow:var(--shadow);max-width:100%}
.photo-band img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:center 30%}
.photo-band-text{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(to top,rgba(21,26,51,.96) 0%,rgba(21,26,51,.8) 55%,rgba(21,26,51,0) 100%);color:#fff;padding-top:70px}
.photo-band-text p{margin:0;max-width:52ch}
.photo-band-title{font:800 clamp(1.3rem,4vw,1.8rem)/1.15 var(--display);color:var(--stamp)!important;margin-bottom:4px!important}
@media(max-width:560px){.photo-band img{aspect-ratio:4/3}}

/* ---------- Više boja ---------- */
h2::after{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--stamp);margin-top:8px}
.code-list .ticket:nth-child(3n+2) .ticket-stub{background:#0b7a55}
.code-list .ticket:nth-child(3n+2) .stub-value{color:#fff}
.code-list .ticket:nth-child(3n+3) .ticket-stub{background:#b4235a}
.code-list .ticket:nth-child(3n+3) .stub-value{color:#ffe28a}
body{background:linear-gradient(180deg,#eaf6f1 0,var(--bg) 420px) no-repeat,var(--bg)}

/* ---------- Animacije (suptilne) ---------- */
@keyframes pulse-green{0%{box-shadow:0 2px 0 var(--brand-dark),0 0 0 0 rgba(11,122,85,.55)}70%{box-shadow:0 2px 0 var(--brand-dark),0 0 0 14px rgba(11,122,85,0)}100%{box-shadow:0 2px 0 var(--brand-dark),0 0 0 0 rgba(11,122,85,0)}}
@keyframes pulse-yellow{0%{box-shadow:0 0 0 0 rgba(255,207,63,.8)}70%{box-shadow:0 0 0 12px rgba(255,207,63,0)}100%{box-shadow:0 0 0 0 rgba(255,207,63,0)}}
@keyframes pop{0%{transform:scale(.86) rotate(-3deg)}60%{transform:scale(1.06) rotate(1deg)}100%{transform:scale(1) rotate(0)}}
@keyframes shine{0%{left:-60%}100%{left:130%}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.hero-body .btn-primary,.ticket:first-child .btn-primary{animation:pulse-green 2.4s ease-out infinite}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.btn-primary:hover::after{animation:shine .7s ease}
.hero-value{display:inline-block;animation:pop .7s cubic-bezier(.2,.9,.3,1.3) .15s both;transform-origin:left center}
.ticket{transition:transform .18s ease,box-shadow .18s ease}
.ticket:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(21,26,51,.06),0 14px 32px rgba(21,26,51,.12)}
.ticket:hover .stub-value{animation:wiggle .5s ease}
.code-box{transition:transform .15s ease,background .15s ease}
.code-box:hover{transform:scale(1.02)}
.code-box.is-copied{background:var(--stamp);border-color:var(--stub)}
.photo img,.photo-band img{transition:transform .5s ease}
.photo:hover img,.photo-band:hover img{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.main-nav .nav-cta,.hero-body .btn-primary,.ticket:first-child .btn-primary,.hero-value{animation:none!important}.ticket:hover,.code-box:hover,.photo:hover img,.photo-band:hover img{transform:none}}