/* Spojleri .com ulazna strana - tokeni i top bar/header kopirani iz dist/css/spojleri.css (DESIGN.md v1.1) */
:root{
  --red:#FE0033; --red-dark:#D3143B;
  --h:'Barlow Condensed',Impact,sans-serif;
  --b:'Barlow',system-ui,sans-serif;
  --wrap:1280px; --head-h:74px; --top-h:38px;
  --bg:#FFFFFF; --bg-2:#F2F4F6;
  --fg:#0A0A0A; --fg-2:#4A5057; --steel:#767C84; --line:#DFE3E7;
  --shadow:0 2px 4px rgba(10,10,10,.04),0 12px 32px rgba(10,10,10,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--b);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
::selection{background:var(--red);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1{margin:0;font-family:var(--h);font-weight:800;font-style:italic;text-transform:uppercase;line-height:.9;letter-spacing:-.015em}

/* TOP BAR */
.topbar{background:#0A0A0A;color:#fff;font-size:.8rem;height:var(--top-h);display:flex;align-items:center}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.tb-l,.tb-r{display:flex;align-items:center;gap:22px}
.tb-i{display:inline-flex;align-items:center;gap:8px;color:#EAECEF;white-space:nowrap;transition:color .2s}
.tb-i svg{width:15px;height:15px;flex:none;stroke:#fff;fill:none;stroke-width:1.7}
.tb-r a.tb-i:hover{color:#fff}
.tb-r a.tb-i:hover svg{stroke:var(--red)}
.tb-i b{color:#fff;font-weight:700}
.tb-flag{width:21px;height:14px;object-fit:cover;flex:none;border:1px solid rgba(255,255,255,.35)}

/* HERO TRAKA (ista foto + crveni rezovi kao traka pretrage na glavnom vebsajtu) */
.hero-strip{position:relative;overflow-x:clip;height:clamp(110px,16vw,190px);background:linear-gradient(rgba(158,158,158,.35),rgba(158,158,158,.35)),url(https://spojleri.rs/content/themes/themosis/dist/img/hero-porsche.webp) center 68%/cover #9e9e9e}
.hero-strip::before{content:"";position:absolute;left:-4%;bottom:-7px;width:44%;height:8px;background:var(--red);clip-path:polygon(0 0,100% 40%,100% 60%,0 100%);transform:skewX(-14deg) rotate(-.6deg);z-index:3}
.hero-strip::after{content:"";position:absolute;right:-4%;top:-15px;width:44%;height:22px;background:var(--red);clip-path:polygon(0 78%,100% 0,100% 46%,0 91%);transform:skewX(14deg) rotate(.6deg);z-index:3}

/* HEADER */
.site-head{background:#fff;height:var(--head-h);display:flex;align-items:center;border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:26px;width:100%}
.brand{flex:0 0 auto;display:flex;align-items:center}
.brand img{height:46px;width:auto}
.actions{margin-left:auto;display:flex;align-items:center}
.iconbtn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg);transition:color .2s}
.iconbtn:hover{color:var(--red)}
.iconbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}

/* IZBOR PRODAVNICE */
main{flex:1}
main.wrap{padding-top:clamp(36px,6vw,80px);padding-bottom:clamp(40px,6vw,72px)}
.intro{text-align:center;max-width:720px;margin:0 auto clamp(28px,4vw,48px)}
.intro h1{font-size:clamp(2.3rem,7vw,4.4rem)}
.intro h1 em{color:var(--red);font-style:italic}
.intro p{margin:18px auto 0;max-width:64ch;color:var(--fg-2);font-size:1.05rem}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:880px;margin:0 auto}
.choice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:32px 24px 28px;background:var(--bg-2);border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s}
.choice:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--fg)}
.flag{height:58px;width:auto;border:1px solid var(--line);background:#fff}
.clogo{height:50px;width:auto}
.name{font-family:var(--h);font-weight:700;font-size:clamp(1.45rem,3.4vw,2.15rem);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.note{color:var(--fg-2);font-size:.95rem}
.go{margin-top:6px;display:inline-block;background:var(--fg);color:#fff;padding:12px 26px;transform:skewX(-14deg);font-family:var(--h);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.06em;transition:background .2s,transform .2s,box-shadow .2s}
.go span{display:inline-block;transform:skewX(14deg)}
.choice:hover .go{background:var(--red-dark);transform:skewX(-14deg) translateY(-3px);box-shadow:var(--shadow)}

/* FOOTER */
.foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin:clamp(32px,5vw,56px) auto 0;text-align:center}
.ig{font-family:var(--h);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.95rem;color:var(--fg);border-bottom:2px solid var(--red);padding-bottom:2px}
.ig:hover{color:var(--red)}
.foot small{color:var(--steel);font-size:.85rem}

@media(max-width:640px){
  :root{--head-h:64px}
  .wrap{padding:0 16px}
  .tb-l{display:none}
  .topbar .wrap{justify-content:center}
  .tb-r{gap:16px}
  .site-head .wrap{gap:12px}
  .brand img{height:31px}
  .hero-strip::before{left:-3%;bottom:-5px;width:64%;height:6px}
  .hero-strip::after{right:-3%;top:-8px;width:64%;height:12px}
  .actions{margin-right:-9px}
  .choices{grid-template-columns:1fr;gap:16px}
  .choice{padding:24px 16px 22px}
  .flag{height:48px}
}