/*
Theme Name: Kafeni Kutak
Theme URI: https://kafenikutak.com
Author: Teodor
Description: Editorial coffee journal — specialty kafa Crne Gore. Parchment canvas, Fraunces headlines, navy + yellow accents.
Version: 0.5.0
License: GPL v2 or later
Text Domain: kafenikutak
*/

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
ul,ol{list-style:none}
img,picture,svg,video{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ============ TOKENS ============ */
:root{
  --parchment:#F3EBD8;
  --cream:#EAE0C8;
  --cream-light:#F8F2E6;
  --white:#FDFAF4;
  --paper:#FBF5E8;

  --ink:#1A0F07;
  --roast:#2C1A0C;
  --mocha:#5B3A1F;
  --muted:#897463;
  --muted-2:#B5A48F;

  --navy:#1B5C6B;
  --navy-deep:#0E3842;
  --navy-soft:#2A7A88;

  --yellow:#E8B014;
  --yellow-soft:#F5C518;

  --olive:#5A7832;
  --olive-light:#7A9E4A;
  --sienna:#A8150C;
  --sienna-bright:#B8190F;
  --red:#E63946;

  --line:rgba(44,26,12,.1);
  --line-2:rgba(44,26,12,.18);

  --serif:'Fraunces',Georgia,serif;
  --sans:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'Martian Mono','JetBrains Mono','Consolas','Courier New',monospace;

  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:3rem; --sp-6:5rem; --sp-7:7rem;

  --shadow-sm:0 1px 2px rgba(44,26,12,.06);
  --shadow-md:0 4px 18px rgba(44,26,12,.08);
  --shadow-lg:0 14px 44px rgba(44,26,12,.14);

  --ease:cubic-bezier(.16,1,.3,1);                /* premijum smooth out — Apple-style; default za hovers */
  --ease-out:cubic-bezier(.16,1,.3,1);             /* alias za --ease */
  --ease-in:cubic-bezier(.7,0,.84,0);              /* sharp in — za zatvaranja */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);      /* mali bounce overshoot — za interakcije */
  --ease-fast:cubic-bezier(.22,.61,.36,1);         /* brz iz mjesta */
}

/* Globalni override — svaki transition na sajtu koristi smooth --ease curve.
   Ovo popravlja default CSS 'ease' (sporo, mehanički) na premium feel svuda. */
*, *::before, *::after {
  transition-timing-function: var(--ease);
}
:root {
  --nav-h:92px;
  --container:1180px;
}

/* ============ BASE ============ */
html,body{background:var(--parchment);color:var(--ink)}
html{font-size:16.5px}
@media(min-width:1400px){html{font-size:17px}}
@media(max-width:640px){html{font-size:15.5px}}
body{
  font-family:var(--sans);
  font-size:1rem; line-height:1.6;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
strong,b{font-weight:700}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  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 baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .1 0 0 0 0 .05 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.35;mix-blend-mode:multiply;
}

::selection{background:var(--yellow-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}

/* ============ TYPOGRAPHY ============ */
.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:.72rem; letter-spacing:.22em;
  color:var(--ink); font-weight:700;
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:"";width:32px;height:3px;background:var(--yellow-soft);border:1px solid var(--ink);border-radius:2px}
.eyebrow--plain::before{display:none}
.eyebrow--light{color:var(--yellow-soft)}
.eyebrow--light::before{background:var(--yellow-soft);border-color:var(--yellow-soft)}
.eyebrow--red{color:var(--sienna-bright)}
.eyebrow--red::before{background:var(--sienna-bright);border-color:var(--sienna-bright)}
.sec--dark .eyebrow::before,.hero .eyebrow::before{border-color:var(--yellow-soft)}

.h-display{
  font-family:var(--serif);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.02;
  color:var(--ink);
}
.h-display em{font-style:italic;font-weight:700;color:var(--sienna)}
.h-display .amp{font-style:italic;font-weight:600;color:var(--mocha)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:800;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
h2{font-size:clamp(1.8rem,4.5vw,2.8rem)}
h3{font-size:clamp(1.2rem,2.5vw,1.5rem);font-weight:800}
h4{font-size:1.05rem;font-weight:800}

p{color:var(--mocha)}
a.link-u{background-image:linear-gradient(transparent 62%,var(--yellow-soft) 62%);background-size:100% 100%;padding:0 .1em;transition:background-size .3s var(--ease)}
a.link-u:hover{background-size:100% 200%}

/* ============ LAYOUT ============ */
.container{width:80%;max-width:1600px;margin:0 auto;padding:0 1rem;position:relative;z-index:2}
@media(max-width:900px){.container{width:auto;padding:0 1.25rem}}
@media(max-width:480px){.container{padding:0 1rem}}
.sec{padding:var(--sp-5) 0;position:relative;z-index:2}
.sec--sm{padding:var(--sp-4) 0}
.sec--lg{padding:var(--sp-6) 0}
@media(min-width:900px){
  .sec{padding:var(--sp-6) 0}
  .sec--sm{padding:var(--sp-5) 0}
  .sec--lg{padding:var(--sp-7) 0}
}
.sec--dark{
  background:
    radial-gradient(ellipse at 85% 20%, rgba(245,197,24,.15), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(168,21,12,.2), transparent 55%),
    var(--navy-deep);
  color:var(--parchment);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  overflow:hidden;
}
.sec--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,transparent 0 20px,rgba(245,197,24,.04) 20px 21px);
}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--parchment)}
.sec--dark .eyebrow{color:var(--yellow-soft)}
.sec--dark p{color:rgba(243,235,216,.85);font-weight:500}
.sec--dark .sec-head h2::after{background:var(--yellow-soft)}
.sec--cream{
  background:
    repeating-linear-gradient(45deg,transparent 0 40px,rgba(27,92,107,.04) 40px 41px),
    linear-gradient(180deg,var(--paper),var(--cream-light));
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  position:relative;
}
.sec--cream::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--yellow-soft) 0 24px,var(--sienna-bright) 24px 48px,var(--olive) 48px 72px,var(--navy) 72px 96px);
  opacity:.85;
}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.25rem;margin-bottom:2rem;flex-wrap:wrap;position:relative}
@media(min-width:720px){.sec-head{gap:2rem;margin-bottom:var(--sp-4)}}
.sec-head h2{max-width:680px;margin-top:.6rem}
.sec-head h2::after{content:"";display:block;width:64px;height:5px;background:var(--yellow-soft);border-radius:4px;margin-top:1rem;border:1.5px solid var(--ink)}
@media(min-width:720px){.sec-head h2::after{width:72px;height:6px;margin-top:1.1rem}}
.sec--dark .sec-head h2::after{background:var(--yellow-soft);border-color:var(--yellow-soft)}
.sec-head .btn{padding:.7rem 1.2rem;font-size:.68rem;box-shadow:3px 3px 0 var(--ink)}
.sec-head .btn:hover{box-shadow:5px 5px 0 var(--ink)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 1.7rem;font-family:var(--mono);
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  border-radius:var(--r-pill);white-space:nowrap;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  position:relative;
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover{transform:translate(-2px,-3px)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0);box-shadow:2px 2px 0 var(--ink);transition:all .1s var(--ease)}

.btn--yellow{background:var(--yellow-soft);color:var(--ink)}
.btn--yellow:hover{background:var(--ink);color:var(--yellow-soft);box-shadow:6px 8px 0 var(--yellow-soft)}
.btn--ink{background:var(--ink);color:var(--parchment)}
.btn--ink:hover{background:var(--yellow-soft);color:var(--ink);box-shadow:6px 8px 0 var(--ink)}
.btn--navy{background:var(--navy);color:var(--parchment)}
.btn--navy:hover{background:var(--yellow-soft);color:var(--ink);box-shadow:6px 8px 0 var(--ink)}
.btn--ghost{background:var(--white);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--yellow-soft);box-shadow:6px 8px 0 var(--yellow-soft);border-color:var(--ink)}
.btn--outline-light{background:transparent;color:var(--parchment);border-color:var(--parchment);box-shadow:4px 4px 0 var(--yellow-soft)}
.btn--outline-light:hover{background:var(--yellow-soft);color:var(--ink);border-color:var(--ink);box-shadow:6px 8px 0 var(--parchment)}
.btn:active{transform:translate(0,0)!important;box-shadow:2px 2px 0 currentColor!important}

/* ============ TOPBAR ============ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--navy-deep);
  color:var(--parchment);
  box-shadow:0 2px 0 var(--yellow-soft),0 6px 24px rgba(14,56,66,.15);
}
.topbar__inner{
  width:80%;max-width:1600px;margin:0 auto;padding:0 1rem;
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
@media(max-width:900px){.topbar__inner{width:auto;padding:0 1.25rem}}
@media(max-width:480px){.topbar__inner{padding:0 1rem}}
.brand{display:flex;align-items:center;gap:1rem;font-family:var(--serif);font-weight:800;font-size:1.5rem;color:var(--parchment);line-height:1.05}
.brand__logo{width:72px;height:72px;border-radius:50%;flex:0 0 72px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.brand__sub{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;color:var(--yellow-soft);opacity:1;font-weight:700;margin-top:.15rem}
@media(max-width:600px){.brand__logo{width:56px;height:56px;flex:0 0 56px}.brand{font-size:1.2rem}}

.topbar-nav{display:none;gap:2rem;align-items:center;font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.topbar-nav a{color:var(--parchment);transition:color .3s var(--ease);position:relative;padding:.3rem 0}
.topbar-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--yellow-soft);border-radius:2px;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.topbar-nav a:hover::after,.topbar-nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.topbar-nav a:hover,.topbar-nav a.is-active{color:var(--yellow-soft)}

.topbar__right{display:flex;align-items:center;gap:.75rem}
.hidden-mobile{display:none}
@media(min-width:900px){.hidden-mobile{display:inline-flex}}

.nav-toggle{
  width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(243,235,216,.3);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  transition:all .3s var(--ease);
}
.nav-toggle:hover{background:var(--yellow-soft);border-color:var(--yellow-soft);transform:scale(1.06)}
.nav-toggle:hover span{background:var(--ink)}
.nav-toggle:active{transform:scale(.94)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--parchment);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(min-width:900px){.topbar-nav{display:flex}}

/* ============ DRAWER ============ */
.mobile-drawer{
  position:fixed;top:var(--nav-h);right:0;bottom:0;
  width:min(320px,82vw);
  background:var(--navy-deep);
  padding:4rem 1.75rem 2rem;
  transform:translateX(105%);transition:transform .45s var(--ease);
  z-index:49;overflow-y:auto;
  box-shadow:-12px 0 44px rgba(0,0,0,.25);
  display:flex;flex-direction:column;gap:.15rem;
}
.mobile-drawer.is-open{transform:translateX(0)}
.mobile-drawer a{
  font-family:var(--serif);font-size:1.35rem;font-weight:600;
  color:var(--parchment);padding:.95rem 0;
  border-bottom:1px solid rgba(243,235,216,.08);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  transition:color .2s,padding .2s var(--ease);
}
.mobile-drawer a:hover{color:var(--yellow-soft);padding-left:.4rem}
.mobile-drawer a::after{content:"→";margin-left:auto;opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease);color:var(--yellow-soft);font-size:.85rem}
.mobile-drawer a:hover::after{opacity:1;transform:translateX(0)}
.mobile-drawer a em{font-family:var(--mono);font-size:.65rem;font-style:normal;letter-spacing:.2em;color:var(--yellow-soft);opacity:.7}
.drawer-cta{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(243,235,216,.12);display:flex;flex-direction:column;gap:.65rem}
.drawer-cta .btn{
  width:100%;justify-content:center;
  font-size:.78rem;padding:.65rem 1rem;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
  border-width:2px;
}
.drawer-cta .btn--yellow{color:var(--ink)}
.drawer-cta .btn--yellow:hover{background:var(--parchment);color:var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.3);transform:translateY(-2px)}
.drawer-cta .btn--outline-light{color:var(--parchment);border-color:var(--yellow-soft);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.drawer-cta .btn--outline-light:hover{background:var(--yellow-soft);color:var(--ink);border-color:var(--yellow-soft);box-shadow:0 6px 0 rgba(0,0,0,.3);transform:translateY(-2px)}
.drawer-cta .btn::after{display:none}
.mobile-drawer .drawer-cta a::after{display:none}

.drawer-overlay{position:fixed;inset:0;background:rgba(14,56,66,.75);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:48}
.drawer-overlay.is-open{opacity:1;pointer-events:auto}

/* ============ HERO ============ */
.hero{
  background:linear-gradient(155deg,var(--navy-deep) 0%,var(--navy) 55%,#1F6B7B 100%);
  color:var(--parchment);
  padding:var(--sp-4) 0 var(--sp-4);
  position:relative;overflow:hidden;
}
@media(min-width:720px){.hero{padding:var(--sp-6) 0 calc(var(--sp-7) + 1rem)}}
/* hero deco (rotirajuće sunce + blur krugovi) uklonjeni radi performansi */
.hero-deco{display:none}

.hero-inner{max-width:820px;position:relative;z-index:2}
@media(min-width:900px){
  .hero-inner{max-width:900px;margin:0 auto;text-align:center}
  .hero-inner .eyebrow,
  .hero-inner .hero-chips{justify-content:center}
  .hero-inner .hero-sub{margin-left:auto;margin-right:auto}
  .hero-inner .hero-search{max-width:720px;margin-left:auto;margin-right:auto}
}
.hero .eyebrow{color:var(--yellow-soft)}
.hero .eyebrow::before{background:var(--yellow-soft);opacity:.8}

.hero-title{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(2.2rem,6vw,4rem);
  line-height:1.02;letter-spacing:-.025em;
  color:var(--parchment);
  margin:1rem 0 1rem;
}
.hero-title em{font-style:italic;font-weight:700;color:var(--yellow-soft)}
.hero-title .amp{font-style:italic;font-weight:500;color:rgba(243,235,216,.7);font-size:.8em;vertical-align:.05em}

.hero-sub{font-size:1.05rem;color:rgba(243,235,216,.92);max-width:580px;margin-bottom:1.5rem;font-weight:500}

.hero-search{
  display:flex;align-items:stretch;gap:.5rem;
  background:var(--parchment);border-radius:var(--r-pill);
  padding:.4rem;box-shadow:var(--shadow-lg);
  max-width:640px;
}
.hero-search input{
  flex:1;background:transparent;border:0;padding:.85rem 1.25rem;
  font-size:.95rem;color:var(--ink);outline:0;min-width:0;
}
.hero-search input::placeholder{color:var(--muted)}
.loc-btn{
  display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;
  border-radius:var(--r-pill);background:var(--cream);color:var(--ink);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  transition:all .3s var(--ease);border:2px solid transparent;
}
.loc-btn:hover{background:var(--sienna-bright);color:var(--parchment);transform:translateY(-2px);box-shadow:0 4px 12px rgba(168,21,12,.35)}
.hero-search button[type="submit"]{
  padding:.85rem 1.5rem;border-radius:var(--r-pill);
  background:var(--yellow-soft);color:var(--ink);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  display:flex;align-items:center;gap:.5rem;
  transition:all .3s var(--ease);border:2px solid transparent;
}
.hero-search button[type="submit"]:hover{background:var(--ink);color:var(--yellow-soft);transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,15,7,.35)}
.hero-search button[type="submit"] svg{transition:transform .3s var(--ease)}
.hero-search button[type="submit"]:hover svg{transform:rotate(15deg) scale(1.1)}

/* === LIVE SEARCH DROPDOWN === */
.hero-search-wrap{position:relative;max-width:640px;width:100%}
.hero-chips{position:relative;z-index:1}
@media(min-width:900px){.hero-inner .hero-search-wrap{margin-left:auto;margin-right:auto;max-width:720px}}
.kk-search-results{
  position:fixed;top:0;left:0;width:0;z-index:9999;
  background:var(--white);border:2px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:6px 8px 0 var(--ink), 0 16px 40px rgba(14,56,66,.18);
  max-height:min(60vh,440px);overflow-y:auto;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.kk-search-results.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.kk-search-result{
  display:flex;align-items:center;gap:.85rem;
  padding:.75rem 1rem;text-decoration:none;color:var(--ink);
  border-bottom:1.5px dashed var(--line-2);
  transition:background .2s var(--ease);
}
.kk-search-result:last-child{border-bottom:0}
.kk-search-result:hover,.kk-search-result.is-active{background:var(--cream)}
.kk-search-result__thumb{
  width:48px;height:48px;flex-shrink:0;border-radius:10px;
  background:var(--cream) center/cover;
  border:1.5px solid var(--ink);
}
.kk-search-result__thumb--placeholder{
  display:flex;align-items:center;justify-content:center;
  background:var(--yellow-soft);
}
.kk-search-result__thumb--placeholder svg{width:22px;height:22px;color:var(--ink);stroke-width:2.2}
.kk-search-result__body{flex:1;min-width:0}
.kk-search-result__type{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sienna-bright);font-weight:800;
  display:block;margin-bottom:.15rem;
}
.kk-search-result__title{
  font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--ink);
  line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kk-search-result__grad{
  font-size:.78rem;color:var(--mocha);font-weight:500;
  display:block;
}
.kk-search-result__arrow{flex-shrink:0;color:var(--mocha);opacity:.4;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.kk-search-result:hover .kk-search-result__arrow,
.kk-search-result.is-active .kk-search-result__arrow{transform:translateX(3px);opacity:1;color:var(--sienna-bright)}
.kk-search-empty,.kk-search-loading{
  padding:1.25rem 1rem;text-align:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mocha);font-weight:700;
}

.hero-chips{
  display:flex;gap:.6rem;margin-top:2rem;
  flex-wrap:wrap;
}
.hero-chip{
  padding:.65rem 1.1rem;border-radius:var(--r-pill);
  background:rgba(243,235,216,.1);
  border:1.5px solid rgba(245,197,24,.3);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--parchment);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .35s var(--ease),box-shadow .4s var(--ease);
  font-weight:700;
  backdrop-filter:blur(6px);
}
.hero-chip:hover{background:var(--yellow-soft);color:var(--ink);border-color:var(--yellow-soft);transform:translateY(-3px);box-shadow:0 10px 24px rgba(245,197,24,.35)}

.hero-stats{display:flex;gap:2.5rem;margin-top:2.5rem;flex-wrap:wrap;padding-top:2rem;border-top:1px solid rgba(243,235,216,.12)}
.hero-stat strong{display:block;font-family:var(--serif);font-size:2rem;font-weight:500;color:var(--yellow-soft)}
.hero-stat span{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,235,216,.6)}

/* ============ INTENT TABS ============ */
.intent{
  margin-top:1.5rem;position:relative;z-index:5;
  padding-bottom:var(--sp-4);
}
@media(min-width:720px){
  .intent{margin-top:-2.5rem;padding-bottom:var(--sp-5)}
}
.intent-grid{
  display:grid;gap:.6rem;
  grid-template-columns:repeat(6,1fr);
}
.intent-grid .intent-card:nth-child(1),
.intent-grid .intent-card:nth-child(2),
.intent-grid .intent-card:nth-child(3){grid-column:span 2}
.intent-grid .intent-card:nth-child(4){grid-column:2/span 2}
.intent-grid .intent-card:nth-child(5){grid-column:4/span 2}

@media(min-width:720px){
  .intent-grid{grid-template-columns:repeat(5,1fr);gap:1rem}
  .intent-grid .intent-card:nth-child(1),
  .intent-grid .intent-card:nth-child(2),
  .intent-grid .intent-card:nth-child(3),
  .intent-grid .intent-card:nth-child(4),
  .intent-grid .intent-card:nth-child(5){grid-column:auto}
}

.intent-card{
  background:var(--white);border-radius:var(--r-lg);
  padding:.95rem .8rem .85rem;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:.4rem;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
  border:2px solid var(--ink);
  position:relative;
  box-shadow:4px 4px 0 var(--ink);
  overflow:hidden;
  min-width:0;
}
@media(min-width:720px){.intent-card{padding:1.75rem 1.3rem 1.5rem;gap:.7rem;box-shadow:5px 5px 0 var(--ink)}}
.intent-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 55%,var(--accent-color,transparent) 130%);
  opacity:.08;transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;
  transform:translate(20%,20%);
}
.intent-card:hover{transform:translateY(-6px);box-shadow:7px 10px 0 var(--accent-color,var(--ink))}
.intent-card:hover::before{opacity:.22;transform:translate(0,0)}
.intent-card:hover .intent-ico{transform:rotate(-8deg) scale(1.1);background:var(--accent-color);color:var(--white);box-shadow:0 6px 0 var(--ink)}
.intent-card:hover h3{color:var(--accent-color)}
.intent-card h3{transition:color .3s var(--ease)}

.intent-card:nth-child(1){--accent-color:var(--navy)}
.intent-card:nth-child(2){--accent-color:var(--sienna-bright)}
.intent-card:nth-child(3){--accent-color:var(--olive)}
.intent-card:nth-child(4){--accent-color:var(--yellow-soft)}
.intent-card:nth-child(5){--accent-color:var(--navy-soft)}

.intent-card.is-active{background:var(--yellow-soft);color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.intent-card.is-active:hover{box-shadow:7px 10px 0 var(--ink);transform:translateY(-6px)}
.intent-card.is-active::before{opacity:.18}
.intent-card.is-active h3{color:var(--ink)}
.intent-card.is-active:hover h3{color:var(--sienna-bright)}
.intent-card.is-active .intent-num{color:var(--sienna-bright)}
.intent-card.is-active .intent-ico{background:var(--ink);color:var(--yellow-soft)}
.intent-card.is-active p{color:var(--ink);font-weight:700}

.intent-ico{
  width:38px;height:38px;border-radius:10px;
  background:var(--accent-color,var(--cream));color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:all .35s var(--ease);
  box-shadow:0 3px 0 var(--ink);
}
.intent-ico svg{width:20px;height:20px;stroke-width:2.2}
.intent-num{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:var(--accent-color,var(--roast));position:absolute;top:.65rem;right:.8rem;font-weight:800}
.intent-card h3{font-size:.92rem;font-weight:900;font-family:var(--serif);margin-top:.1rem;line-height:1.15}
.intent-card p{display:none}
.intent-card.is-active p{color:rgba(243,235,216,.8)}

@media(min-width:720px){
  .intent-ico{width:52px;height:52px;border-radius:14px;box-shadow:0 4px 0 var(--ink)}
  .intent-ico svg{width:26px;height:26px}
  .intent-num{font-size:.72rem;letter-spacing:.22em;top:1rem;right:1.2rem}
  .intent-card h3{font-size:1.3rem;margin-top:.2rem;line-height:1.1}
  .intent-card p{display:block;font-size:.85rem;color:var(--roast);line-height:1.45;font-weight:600}
}

/* ============ FILTER PANEL ============ */
.filter-panel{
  margin-top:1.75rem;display:none;
}
@media(min-width:720px){.filter-panel{margin-top:2.25rem}}
.filter-panel.is-active{display:block;animation:slideIn .4s var(--ease)}

.filter-row{
  display:flex;gap:.45rem;align-items:center;
  overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:.35rem 0 .5rem;
  margin:0 -1.25rem;padding-left:1.25rem;padding-right:1.25rem;
}
.filter-row::-webkit-scrollbar{display:none}
@media(min-width:720px){
  .filter-row{flex-wrap:wrap;overflow:visible;margin:0;padding:0 0 .25rem;gap:.5rem;row-gap:.6rem}
}
.filter-row + .filter-row{margin-top:.5rem}
@media(min-width:720px){.filter-row + .filter-row{margin-top:.85rem}}
.filter-row .chip{flex:0 0 auto;scroll-snap-align:start}

.filter-label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mocha);font-weight:800;
  flex:0 0 auto;padding-right:.35rem;
  position:sticky;left:0;
  background:linear-gradient(90deg,var(--parchment) 60%,transparent);
}
@media(min-width:720px){.filter-label{position:static;background:none;padding-right:.5rem}}

.chip{
  padding:.55rem .95rem;border-radius:var(--r-pill);
  background:var(--white);color:var(--navy-deep);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
  border:1.5px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  line-height:1;white-space:nowrap;
  cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  text-decoration:none;
}
label.chip{user-select:none}
label.chip input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
@media(min-width:720px){.chip{font-size:.7rem;letter-spacing:.16em;font-weight:800;border-width:2px}}
.chip:hover{background:var(--yellow-soft);transform:translateY(-2px);box-shadow:3px 5px 0 var(--ink)}
.chip.is-active{background:var(--ink);color:var(--yellow-soft);box-shadow:2px 2px 0 var(--yellow-soft)}

.chip--near{background:var(--sienna-bright);color:var(--parchment);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.chip--near:hover{background:var(--ink);color:var(--yellow-soft);box-shadow:3px 5px 0 var(--sienna-bright)}
.chip--near svg{color:var(--yellow-soft)}

.filter-row:nth-of-type(2) .chip{background:var(--cream);color:var(--navy-deep)}
.filter-row:nth-of-type(2) .chip:hover{background:var(--olive-light);color:var(--ink);box-shadow:3px 5px 0 var(--olive)}

/* ============ CARDS — PLACES ============ */
.cards-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.cards-grid{gap:1.5rem;grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cards-grid{grid-template-columns:repeat(3,1fr)}}

.place{
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  border:2px solid var(--ink);
  transition:transform .45s cubic-bezier(.65,.05,.35,1), box-shadow .45s cubic-bezier(.65,.05,.35,1);
  display:flex;flex-direction:column;position:relative;
  box-shadow:4px 4px 0 var(--ink);
}
.place:hover{transform:translateY(-8px);box-shadow:6px 12px 0 var(--yellow-soft)}
.place:nth-child(3n+2):hover{box-shadow:6px 12px 0 var(--sienna-bright)}
.place:nth-child(3n):hover{box-shadow:6px 12px 0 var(--olive)}
.place:hover .place__title{color:var(--navy)}
.place__title{transition:color .35s cubic-bezier(.65,.05,.35,1)}
.place__thumb{height:190px;background:var(--cream) center/cover no-repeat;position:relative;overflow:hidden;border-bottom:2px solid var(--ink)}
.place:nth-child(3n) .place__thumb:not([style]){background:linear-gradient(135deg,var(--navy),var(--navy-soft))}
.place:nth-child(3n+1) .place__thumb:not([style]){background:linear-gradient(135deg,var(--sienna-bright),#D63631)}
.place:nth-child(3n+2) .place__thumb:not([style]){background:linear-gradient(135deg,var(--olive),var(--olive-light))}
.place__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.place:hover .place__thumb img{transform:scale(1.05)}

.featured-badge{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--yellow-soft);border-radius:50%;
  border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.featured-badge svg{width:24px;height:24px;color:var(--ink)}

.place__body{padding:1.25rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.place__meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--roast);font-weight:700}
.place__meta .rating{color:var(--ink);display:flex;align-items:center;gap:.25rem;font-weight:800}
.place__meta .rating svg{width:13px;height:13px;color:var(--yellow)}
.place__title{font-family:var(--serif);font-size:1.35rem;font-weight:800;line-height:1.2}
.place__desc{font-size:.9rem;color:var(--roast);line-height:1.5;font-weight:500}
.place__tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:auto;padding-top:.5rem}
.place__tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:.3rem .65rem;background:var(--cream);border-radius:var(--r-pill);font-weight:800;border:1.5px solid var(--ink)}
.place__tag:nth-child(2){background:var(--yellow-soft)}
.place__tag:nth-child(3){background:var(--olive-light)}

.place__features{display:flex;gap:.4rem;margin-bottom:.5rem;flex-wrap:wrap}
.place__feature{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;
  background:var(--cream);color:var(--ink);
  border:1px solid var(--ink);
  cursor:help;
}
.place__feature svg{width:14px;height:14px;stroke-width:2.2}
.award-badge{
  position:absolute;top:.7rem;left:.7rem;z-index:3;
  background:var(--yellow-soft);color:var(--ink);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  font-weight:800;text-transform:uppercase;
  padding:.3rem .55rem;border-radius:999px;
  border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  max-width:60%;
}

/* ============ PAID / FEATURED LISTING — vizuelno isticanje ============ */
.place.is-paid{
  position:relative;
  border:2.5px solid var(--yellow-soft);
  box-shadow:0 0 0 1px var(--ink), 6px 8px 0 var(--yellow-soft), 0 12px 30px rgba(245,197,24,.18);
  background:linear-gradient(180deg, #FFF8E1 0%, var(--white) 35%);
}
.place.is-paid:hover{
  transform:translateY(-6px);
  box-shadow:0 0 0 1px var(--ink), 8px 12px 0 var(--yellow-soft), 0 18px 40px rgba(245,197,24,.28);
}
.place.is-paid .place__thumb{
  border-bottom:2.5px solid var(--yellow-soft);
}
.place.is-paid .place__title{color:var(--ink)}

.place.is-featured-tier{
  border-color:var(--sienna-bright);
  box-shadow:0 0 0 1px var(--ink), 6px 8px 0 var(--sienna-bright), 0 12px 30px rgba(168,21,12,.18);
}
.place.is-featured-tier:hover{
  box-shadow:0 0 0 1px var(--ink), 8px 12px 0 var(--sienna-bright), 0 18px 40px rgba(168,21,12,.28);
}
.place.is-featured-tier .place__thumb{border-bottom-color:var(--sienna-bright)}

.paid-ribbon{
  position:absolute;top:0;right:1.25rem;z-index:5;
  background:var(--yellow-soft);color:var(--ink);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  padding:.5rem .85rem .4rem;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.place.is-featured-tier .paid-ribbon{background:var(--sienna-bright);color:var(--parchment)}

/* Free tag — diskretan badge u gornjem desnom uglu free kartica */
.free-tag{
  position:absolute;top:.85rem;right:.85rem;z-index:5;
  background:rgba(243,235,216,.95);color:var(--mocha);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  padding:.35rem .65rem;border-radius:var(--r-pill);
  border:1.5px solid var(--mocha);
}

/* ============ EVENT — paid pojačan (diagonal corner ribbon) ============ */
.event.is-featured{
  position:relative;overflow:hidden;
  border:2px solid var(--ink)!important;
  background:linear-gradient(180deg, #FFFCEF 0%, var(--white) 50%)!important;
  box-shadow:5px 5px 0 var(--yellow-soft), 0 10px 24px rgba(245,197,24,.18)!important;
}
.event.is-featured::before{
  content:"★ Istaknuto";
  position:absolute;top:.85rem;right:.85rem;z-index:3;
  background:var(--yellow-soft);color:var(--ink);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;font-weight:800;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:999px;
  border:1.5px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  pointer-events:none;
  white-space:nowrap;
}
.event.is-featured::after{
  content:"";position:absolute;top:-20px;right:-20px;
  width:120px;height:120px;
  background:radial-gradient(circle at 100% 0%, rgba(245,197,24,.4), transparent 65%);
  pointer-events:none;z-index:1;
}
.event.is-featured:hover{
  transform:translateY(-4px);
  box-shadow:7px 9px 0 var(--yellow-soft), 0 14px 30px rgba(245,197,24,.28)!important;
}
.event.is-featured .event__date{
  background:var(--yellow-soft);color:var(--ink);
}
.event.is-featured .event__title{color:var(--ink);font-weight:900}
/* Sakri stari "Plaćeni" flag jer sad imamo PROMO ribbon */
.event.is-featured .event__flag--paid{display:none}

/* ============ MAP BANNER ============ */
.map-banner{
  background:
    radial-gradient(circle at 90% 10%, rgba(245,197,24,.2), transparent 50%),
    linear-gradient(135deg,var(--navy-deep),var(--navy) 60%,var(--navy-soft));
  color:var(--parchment);
  border-radius:var(--r-lg);padding:1.5rem;
  display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;
  margin-top:2.5rem;
  border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  position:relative;overflow:hidden;
}
@media(min-width:720px){.map-banner{border-radius:var(--r-xl);padding:2rem;gap:1.5rem;align-items:center;flex-wrap:nowrap;box-shadow:8px 8px 0 var(--ink)}}
.map-banner::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border:2px dashed rgba(245,197,24,.25);border-radius:50%;pointer-events:none}
.map-banner__ico{
  width:64px;height:64px;flex:0 0 64px;border-radius:50%;
  background:var(--yellow-soft);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 0 var(--ink);
  position:relative;z-index:2;
}
.map-banner__ico svg{width:30px;height:30px;stroke-width:2.2}
.map-banner__txt{flex:1;position:relative;z-index:2}
.map-banner__txt h3{color:var(--parchment);font-size:1.4rem;font-weight:800}
.map-banner__txt p{color:rgba(243,235,216,.85);font-size:.95rem;margin-top:.3rem;font-weight:500}
.map-banner .btn{flex:0 0 auto;position:relative;z-index:2}

/* ============ EVENTS ============ */
.events-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:720px){.events-grid{gap:1.25rem;grid-template-columns:repeat(2,1fr)}}

/* Tier filter chips */
.kk-tier-chips{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  margin-bottom:1.5rem;
}
.kk-tier-chips__label{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mocha);font-weight:800;padding-right:.4rem;
}
@media(max-width:520px){
  .kk-tier-chips{gap:.4rem;margin-bottom:1.25rem}
  .kk-tier-chips__label{width:100%;padding-right:0;margin-bottom:.25rem}
}

.event{
  display:flex;gap:1.1rem;background:var(--white);
  border-radius:var(--r-lg);padding:1.25rem;border:2px solid var(--ink);
  border-left:5px solid var(--ink);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-left-width .3s var(--ease);
  position:relative;
  box-shadow:4px 4px 0 var(--ink);
  align-items:center;
}
.event:hover{transform:translateY(-3px);box-shadow:5px 7px 0 var(--yellow-soft);border-left-width:8px}
.event.is-featured{border-left-color:var(--yellow-soft);background:linear-gradient(90deg,rgba(245,197,24,.12),var(--white) 40%)}
.event.is-featured:hover{box-shadow:5px 7px 0 var(--sienna-bright)}
.event.is-recurring{border-left-color:var(--olive)}
.event.is-recurring:hover{box-shadow:5px 7px 0 var(--olive)}
.event:hover .event__date{transform:rotate(-3deg)}
.event__date{transition:transform .4s var(--ease)}

.event__date{
  flex:0 0 64px;text-align:center;padding:.55rem .35rem;
  background:var(--yellow-soft);border-radius:var(--r-sm);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
}
@media(min-width:720px){.event__date{flex:0 0 72px;padding:.6rem .4rem}}
.event__date strong{display:block;font-family:var(--serif);font-size:1.55rem;font-weight:900;color:var(--ink);line-height:1}
.event__date span{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-top:.3rem;font-weight:800}
.event.is-featured .event__date{background:var(--sienna-bright)}
.event.is-featured .event__date strong,.event.is-featured .event__date span{color:var(--parchment)}
.event.is-recurring .event__date{background:var(--olive)}
.event.is-recurring .event__date strong{color:var(--parchment);font-size:1.15rem;font-family:var(--mono);font-weight:800}
.event.is-recurring .event__date span{color:var(--parchment)}

.event__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem}
.event__flags{display:flex;gap:.35rem;flex-wrap:wrap}
.event__flag{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;padding:.22rem .55rem;border-radius:var(--r-pill);font-weight:800;border:1.5px solid var(--ink)}
.event__flag--paid{background:var(--yellow-soft);color:var(--ink)}
.event__flag--recurring{background:var(--olive);color:var(--parchment)}
.event__title{
  font-family:var(--serif);font-size:1.15rem;font-weight:800;
  margin:0;line-height:1.2;letter-spacing:-.01em;color:var(--ink);
}
@media(min-width:720px){.event__title{font-size:1.25rem}}
.event__meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--roast);font-weight:700;line-height:1.4}
@media(min-width:720px){.event__meta{font-size:.68rem}}
.event__meta span + span::before{content:"·";margin:0 .4rem;opacity:.5}

/* ============ KUTKA / BLOG ============ */
.kutka-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.kutka-grid{gap:1.5rem;grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.kutka-grid{grid-template-columns:repeat(3,1fr)}}

.kutka{
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  border:2px solid var(--ink);
  transition:transform .45s cubic-bezier(.65,.05,.35,1), box-shadow .45s cubic-bezier(.65,.05,.35,1);
  display:flex;flex-direction:column;
  box-shadow:4px 4px 0 var(--ink);
}
.kutka:hover{transform:translateY(-8px);box-shadow:6px 12px 0 var(--sienna-bright)}
.kutka:nth-child(2):hover{box-shadow:6px 12px 0 var(--olive)}
.kutka:nth-child(3):hover{box-shadow:6px 12px 0 var(--yellow-soft)}
.kutka:hover .kutka__cat{transform:rotate(-4deg) scale(1.05)}
.kutka__cat{transition:transform .4s var(--ease)}
.kutka:hover .kutka__title{color:var(--sienna-bright)}
.kutka:nth-child(2):hover .kutka__title{color:var(--olive)}
.kutka:nth-child(3):hover .kutka__title{color:var(--navy)}
.kutka__title{transition:color .3s var(--ease)}
.kutka__thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy),var(--navy-soft)) center/cover;position:relative;border-bottom:2px solid var(--ink)}
.kutka:nth-child(2) .kutka__thumb{background:linear-gradient(135deg,var(--sienna-bright),#D63631) center/cover}
.kutka:nth-child(3) .kutka__thumb{background:linear-gradient(135deg,var(--olive),var(--olive-light)) center/cover}
.kutka__thumb img{width:100%;height:100%;object-fit:cover}
.kutka__cat{position:absolute;top:.75rem;left:.75rem;padding:.4rem .85rem;background:var(--yellow-soft);color:var(--ink);font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;border-radius:var(--r-pill);font-weight:800;border:1.5px solid var(--ink)}
.kutka__body{padding:1.25rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.kutka__title{font-family:var(--serif);font-size:1.3rem;font-weight:800;line-height:1.25}
.kutka__excerpt{font-size:.9rem;color:var(--roast);line-height:1.5;font-weight:500}
.kutka__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--roast);margin-top:auto;padding-top:.5rem;font-weight:700}

/* ============ INSTAGRAM STRIP ============ */
.ig-strip{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.ig-strip{gap:1rem;grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ig-tile{aspect-ratio:4/5}}
.ig-tile{
  aspect-ratio:9/16;background:var(--cream) center/cover;
  border-radius:var(--r-md);position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),filter .4s var(--ease);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  filter:saturate(.92);
}
.ig-tile video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
}
.ig-tile--video::before{
  content:"";position:absolute;top:.6rem;right:.6rem;z-index:3;
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:55% center;background-size:14px;
}
.ig-tile:hover{transform:translateY(-5px) rotate(-1.5deg);box-shadow:4px 9px 0 var(--yellow-soft);filter:saturate(1.15)}
.ig-tile:nth-child(2n):hover{transform:translateY(-5px) rotate(1.5deg);box-shadow:4px 9px 0 var(--sienna-bright)}
.ig-tile:nth-child(3n):hover{box-shadow:4px 9px 0 var(--olive)}
.ig-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(14,56,66,.65));
  opacity:.35;transition:opacity .25s;
  pointer-events:none;
}
.ig-tile:hover::after{opacity:.85}
.ig-tile__overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  color:var(--parchment);
  opacity:0;transform:scale(.7);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  pointer-events:none;
}
.ig-tile__overlay svg{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
  stroke-width:2.2;
}
.ig-tile:hover .ig-tile__overlay{opacity:1;transform:scale(1)}

/* ============ EDUKACIJA / QUIZ BANNER ============ */
.quiz-banner{
  background:
    radial-gradient(circle at 80% 20%, rgba(245,197,24,.3), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(168,21,12,.25), transparent 50%),
    linear-gradient(135deg,var(--navy-deep),var(--navy));
  color:var(--parchment);border-radius:var(--r-lg);
  padding:2rem 1.4rem;
  position:relative;overflow:hidden;
  border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
}
@media(min-width:720px){.quiz-banner{border-radius:var(--r-xl);padding:var(--sp-5) var(--sp-4);border-width:2.5px;box-shadow:10px 10px 0 var(--ink)}}
@media(min-width:1000px){.quiz-banner{padding:var(--sp-6)}}
.quiz-banner::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--yellow-soft);filter:blur(110px);opacity:.22;top:-180px;right:-180px;pointer-events:none}
.quiz-banner::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:var(--sienna-bright);filter:blur(120px);opacity:.18;bottom:-160px;left:-120px;pointer-events:none}

.quiz-banner__head{
  position:relative;z-index:2;text-align:center;
  max-width:680px;margin:0 auto 2rem;
}
.quiz-banner__head .eyebrow{justify-content:center}
.quiz-banner__head h2{color:var(--parchment);font-size:clamp(1.8rem,4vw,2.8rem);margin:.75rem 0 1rem;line-height:1.05}
.quiz-banner__head h2 em{color:var(--yellow-soft);font-style:italic;font-weight:300}
.quiz-banner__head p{color:rgba(243,235,216,.78);margin:0 auto 1.5rem;max-width:520px;font-size:1rem;line-height:1.55}

.methods-grid{
  display:grid;gap:.85rem;
  grid-template-columns:repeat(2,1fr);
  position:relative;z-index:2;
}
@media(min-width:720px){.methods-grid{grid-template-columns:repeat(3,1fr);gap:1.1rem}}

.method-card{
  position:relative;display:flex;flex-direction:column;gap:.85rem;
  padding:1.1rem;
  background:rgba(243,235,216,.05);
  border:1.5px solid rgba(243,235,216,.18);
  border-radius:var(--r-md);
  color:var(--parchment);
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);
}
@media(min-width:720px){.method-card{padding:1.3rem}}
.method-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%, var(--method-accent, transparent) 0%, transparent 60%);
  opacity:.18;pointer-events:none;transition:opacity .35s var(--ease);
}
.method-card:hover{
  transform:translateY(-5px);
  background:rgba(243,235,216,.1);
  border-color:var(--method-accent);
  box-shadow:0 10px 0 -2px var(--ink),0 14px 28px rgba(0,0,0,.25);
}
.method-card:hover::before{opacity:.45}

.method-card--yellow{--method-accent:var(--yellow-soft)}
.method-card--sienna{--method-accent:var(--sienna-bright)}
.method-card--olive{--method-accent:var(--olive-light,#7A9E4A)}
.method-card--parchment{--method-accent:var(--parchment)}

.method-card__top{
  display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:2;
}
.method-card__num{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.22em;font-weight:800;
  color:var(--method-accent);
}
.method-card__time{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;font-weight:700;
  color:rgba(243,235,216,.55);
  padding:.22rem .5rem;border:1px solid rgba(243,235,216,.2);border-radius:999px;
}
.method-card__ico{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  background:var(--method-accent);color:var(--ink);
  border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:transform .35s var(--ease);
}
.method-card:hover .method-card__ico{transform:rotate(-8deg) scale(1.08)}
.method-card--sienna .method-card__ico{color:var(--parchment)}

.method-card__body{position:relative;z-index:2;margin-top:.25rem}
.method-card__body h4{
  font-family:var(--serif);font-size:1.3rem;font-weight:900;
  color:var(--parchment);line-height:1.1;margin-bottom:.2rem;
}
.method-card__meta{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:rgba(243,235,216,.6);
}
.method-card__arrow{
  position:absolute;bottom:1.1rem;right:1.1rem;
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--method-accent);
  border:1.5px solid rgba(243,235,216,.18);
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  z-index:2;
}
.method-card:hover .method-card__arrow{
  background:var(--method-accent);color:var(--ink);
  border-color:var(--method-accent);
  transform:translate(2px,-2px);
}
.method-card--sienna:hover .method-card__arrow{color:var(--parchment)}

/* ============ PAGE HERO (sekcijske stranice) ============ */
.page-hero{
  background:
    radial-gradient(ellipse at 85% 20%, rgba(245,197,24,.18), transparent 55%),
    radial-gradient(ellipse at 10% 85%, rgba(168,21,12,.22), transparent 55%),
    linear-gradient(155deg,var(--navy-deep) 0%,var(--navy) 60%,#1F6B7B 100%);
  color:var(--parchment);
  padding:var(--sp-4) 0 var(--sp-4);
  position:relative;overflow:hidden;
  border-bottom:3px solid var(--ink);
}
@media(min-width:720px){.page-hero{padding:var(--sp-5) 0 calc(var(--sp-6) + 1rem)}}
.page-hero + .intent{margin-top:1.5rem}
@media(min-width:720px){.page-hero + .intent{margin-top:-2.5rem}}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(45deg,transparent 0 20px,rgba(245,197,24,.04) 20px 21px)}
.page-hero__inner{max-width:820px;position:relative;z-index:2}
@media(min-width:900px){
  .page-hero__inner{max-width:900px;margin:0 auto;text-align:center}
  .page-hero__inner .eyebrow,
  .page-hero__inner .breadcrumbs{justify-content:center}
  .page-hero__inner p{margin-left:auto;margin-right:auto}
}
.page-hero h1{
  font-family:var(--serif);font-weight:900;color:var(--parchment);
  font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.02em;
  margin:1rem 0 1.25rem;
}
.page-hero h1 em{font-style:italic;font-weight:700;color:var(--yellow-soft)}
.page-hero p{font-size:1.1rem;color:rgba(243,235,216,.9);max-width:620px;font-weight:500}
.breadcrumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,235,216,.65);font-weight:700;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.breadcrumbs a{color:var(--yellow-soft)}
.breadcrumbs a:hover{color:var(--parchment)}
.breadcrumbs span{opacity:.5}

/* ============ FILTER BAR + SHEET ============ */
.filter-bar{
  display:flex;gap:.75rem;justify-content:space-between;align-items:center;
  flex-wrap:wrap;margin-bottom:1.75rem;padding:0 0 1rem;
  border-bottom:2px dashed var(--line-2);
}
.filter-bar__left{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.filter-bar__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:800}
.filter-bar__count strong{color:var(--sienna-bright);font-size:1rem;font-weight:900}
.filter-bar__clear{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--mocha);padding:.3rem .65rem;border-radius:var(--r-pill);
  background:var(--cream);border:1.5px solid var(--line-2);
  transition:all .3s var(--ease);
}
.filter-bar__clear:hover{background:var(--sienna-bright);color:var(--parchment);border-color:var(--ink)}
.filter-bar__clear svg{transform:rotate(45deg)}

.filter-bar__actions{display:flex;gap:.5rem;flex-wrap:wrap}
.filter-bar__btn--mobile{display:inline-flex}
.filter-bar__btn{
  display:inline-flex;align-items:center;gap:.4rem;position:relative;
  padding:.65rem 1.05rem;border-radius:var(--r-pill);
  background:var(--white);color:var(--ink);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  transition:all .35s var(--ease);line-height:1;
}
.filter-bar__btn svg{transition:transform .3s var(--ease)}
.filter-bar__btn:hover{background:var(--ink);color:var(--yellow-soft);transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--yellow-soft)}
.filter-bar__btn:hover svg{transform:rotate(12deg)}
.filter-bar__btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink)}
.filter-bar__btn--geo{background:var(--sienna-bright);color:var(--parchment);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.filter-bar__btn--geo:hover{background:var(--ink);color:var(--yellow-soft);box-shadow:5px 6px 0 var(--sienna-bright)}
.filter-bar__btn--geo:hover svg{transform:rotate(180deg)}
.filter-bar__badge{
  background:var(--sienna-bright);color:var(--parchment);
  font-size:.6rem;padding:.15rem .4rem;border-radius:var(--r-pill);
  border:1.5px solid var(--ink);min-width:1.1rem;display:inline-flex;align-items:center;justify-content:center;
}

/* Sheet */
.filter-sheet{position:fixed;inset:0;z-index:9000;display:none;background:rgba(14,56,66,.7);backdrop-filter:blur(4px)}
.filter-sheet.is-open{display:block;animation:fadeIn .15s var(--ease)}
.filter-sheet__overlay{position:absolute;inset:0;cursor:pointer}
.filter-sheet__panel{z-index:2}
.filter-sheet__panel{
  position:absolute;left:0;right:0;bottom:0;max-height:85vh;
  background:var(--parchment);
  border-top:3px solid var(--ink);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  display:flex;flex-direction:column;
  animation:slideUpSheet .35s var(--ease);
  box-shadow:0 -10px 40px rgba(14,56,66,.25);
}
@media(min-width:720px){
  .filter-sheet__panel{
    left:auto;bottom:0;top:0;right:0;transform:none;
    width:min(440px,90vw);max-height:none;height:100vh;
    border-radius:0;border:0;border-left:3px solid var(--ink);
    box-shadow:-10px 0 40px rgba(14,56,66,.25);
    animation:slideInRight .3s var(--ease);
  }
}
@keyframes slideUpSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.filter-sheet__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.25rem 1.5rem;border-bottom:2px solid var(--ink);
  background:var(--yellow-soft);
  position:relative;
}
.filter-sheet__head::before{
  content:"";position:absolute;top:.6rem;left:50%;transform:translateX(-50%);
  width:48px;height:4px;background:var(--ink);border-radius:2px;opacity:.3;
}
@media(min-width:720px){.filter-sheet__head::before{display:none}}
.filter-sheet__head h3{font-size:1.25rem;font-weight:900;margin:0;color:var(--ink)}
.filter-sheet__close{
  width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:var(--yellow-soft);
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);
  transition:transform .35s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.filter-sheet__close:hover{transform:rotate(90deg) scale(1.08);background:var(--sienna-bright);box-shadow:0 4px 12px rgba(168,21,12,.4)}
.filter-sheet__close:active{transform:rotate(90deg) scale(.95)}
.filter-sheet__body{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.75rem}
.filter-sheet__foot{
  display:flex;gap:.75rem;padding:1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
  border-top:2px solid var(--line-2);background:var(--cream-light);
}

/* Inline filters — sklonjeni, sve filtere kroz "Filtriraj" sheet (drawer) */
.filter-inline{display:none}
.filter-inline__row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.filter-inline__row + .filter-inline__row{padding-top:1rem;border-top:1.5px dashed var(--line-2)}
.filter-inline__label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);font-weight:800;flex:0 0 auto;
  padding:.4rem .75rem;background:var(--yellow-soft);border-radius:6px;
  border:1.5px solid var(--ink);margin-right:.35rem;
}
.filter-inline__chips{display:flex;gap:.45rem;flex-wrap:wrap}

.filter-group{display:flex;flex-direction:column;gap:.75rem}
.filter-group__label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);font-weight:800;
  display:inline-flex;align-items:center;gap:.5rem;
}
.filter-group__label::after{content:"";flex:1;height:1px;background:var(--line-2)}
.filter-group__chips{display:flex;gap:.5rem;flex-wrap:wrap}

/* ============ ARCHIVE / GRID BASE ============ */
.archive-toolbar{
  background:transparent;border:0;border-radius:0;
  box-shadow:none;padding:0 0 1rem;margin-bottom:1.5rem;
  display:flex;gap:.5rem;align-items:center;flex-wrap:nowrap;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  border-bottom:2px dashed var(--line-2);
}
.archive-toolbar::-webkit-scrollbar{display:none}
.archive-toolbar > *{flex:0 0 auto}
.archive-toolbar .archive-toolbar__count{margin-right:auto}
@media(min-width:720px){
  .archive-toolbar{
    background:var(--white);border:2px solid var(--ink);border-radius:var(--r-lg);
    box-shadow:4px 4px 0 var(--ink);padding:1.25rem 1.5rem;gap:1rem;
    margin-bottom:2.5rem;flex-wrap:wrap;overflow:visible;border-bottom:2px solid var(--ink);
  }
}
.archive-toolbar__count{font-family:var(--mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:800}
.archive-toolbar__count strong{color:var(--sienna-bright);font-size:1rem}
.archive-toolbar .chip{box-shadow:2px 2px 0 var(--ink)}

/* ============ PAGINATION ============ */
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:3rem;flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .75rem;border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);
  font-family:var(--mono);font-size:.78rem;font-weight:800;
  border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  transition:all .35s var(--ease);
}
.pagination a:hover{background:var(--yellow-soft);transform:translateY(-2px);box-shadow:3px 4px 0 var(--ink)}
.pagination .current{background:var(--ink);color:var(--yellow-soft);box-shadow:2px 2px 0 var(--yellow-soft)}

/* ============ FORMS ============ */
.kk-form{
  background:var(--white);border:2px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:6px 6px 0 var(--ink);
  padding:2rem;display:grid;gap:1.25rem;
  max-width:720px;margin:0 auto;
}
.kk-form__row{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.kk-form__row--2{grid-template-columns:1fr 1fr}}
.kk-form label{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:800;display:block;margin-bottom:.4rem}
.kk-form input[type="text"],.kk-form input[type="email"],.kk-form input[type="tel"],.kk-form input[type="url"],.kk-form input[type="number"],.kk-form select,.kk-form textarea{
  width:100%;padding:.85rem 1rem;
  background:var(--cream-light);border:2px solid var(--ink);
  border-radius:var(--r-sm);
  font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--ink);
  transition:all .3s var(--ease);
}
.kk-form input:focus,.kk-form select:focus,.kk-form textarea:focus{
  outline:none;background:var(--yellow-soft);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px);
}
.kk-form textarea{min-height:140px;resize:vertical}
.kk-form__check{display:flex;align-items:center;gap:.65rem;font-weight:600;color:var(--ink);cursor:pointer}
.kk-form__check input{width:20px;height:20px;accent-color:var(--sienna-bright)}
.kk-form__hint{font-size:.85rem;color:var(--mocha);font-weight:500}
.kk-form__submit{justify-self:start;margin-top:.5rem}
.kk-form__notice{
  padding:1rem 1.25rem;border-radius:var(--r-sm);
  background:var(--olive-light);color:var(--ink);font-weight:700;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
}
.kk-form__notice--err{background:var(--sienna-bright);color:var(--parchment)}

/* ============ SINGLE POST ============ */
.single-wrap{max-width:820px;margin:0 auto;padding:var(--sp-5) 0}
.single-wrap__hero{
  aspect-ratio:16/9;background:var(--cream) center/cover;
  border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--ink);margin-bottom:2.5rem;
  position:relative;overflow:hidden;
}
.single-wrap h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);font-weight:900;letter-spacing:-.02em;line-height:1.05;margin-bottom:1rem}
.single-wrap__meta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:2rem;padding:.75rem 1rem;background:var(--cream);border:1.5px solid var(--ink);border-radius:var(--r-pill);font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.single-wrap__meta strong{color:var(--sienna-bright)}
.single-wrap__content{font-size:1.08rem;line-height:1.75;color:var(--roast);font-weight:500}
.single-wrap__content p{margin-bottom:1.25rem}
.single-wrap__content h2,.single-wrap__content h3{margin:2rem 0 1rem}
.single-wrap__content a{color:var(--sienna-bright);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.single-wrap__content a.btn,
.single-wrap__content a.sl-action,
.single-wrap__content a.chip{text-decoration:none;color:inherit}
.single-wrap__content a.btn--navy{color:var(--parchment)}
.single-wrap__content a.btn--yellow{color:var(--ink)}
.single-wrap__content a.btn--ink{color:var(--parchment)}
.single-wrap__content ul,.single-wrap__content ol{padding-left:1.5rem;margin-bottom:1.25rem}
.single-wrap__content li{margin-bottom:.5rem}
.single-wrap__content blockquote{border-left:6px solid var(--yellow-soft);padding:.5rem 0 .5rem 1.5rem;margin:1.5rem 0;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink);font-weight:600}

/* ============ INFO GRID (single-lokal detalji) ============ */
.info-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:2rem 0;padding:1.5rem;background:var(--cream);border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:4px 4px 0 var(--ink)}
.info-grid__item{display:flex;flex-direction:column;gap:.3rem}
.info-grid__label{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mocha);font-weight:800}
.info-grid__value{font-family:var(--serif);font-size:1.1rem;color:var(--ink);font-weight:700}

/* ============ RECEPT / METHOD CARD ============ */
.recept-card{
  background:var(--white);border:2px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:6px 6px 0 var(--ink);padding:2rem;margin:2rem 0;
}
.recept-card__header{display:flex;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:2px dashed var(--ink)}
.recept-card__stat{display:flex;flex-direction:column;gap:.25rem}
.recept-card__stat strong{font-family:var(--serif);font-size:1.6rem;font-weight:900;color:var(--ink);line-height:1}
.recept-card__stat span{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mocha);font-weight:700}

/* ============ 404 ============ */
.err-wrap{text-align:center;padding:var(--sp-7) 0;max-width:560px;margin:0 auto}
.err-wrap h1{font-family:var(--serif);font-size:clamp(4rem,14vw,9rem);font-weight:900;color:var(--sienna-bright);line-height:1;letter-spacing:-.05em}
.err-wrap p{margin:1rem 0 2rem;font-size:1.1rem;color:var(--roast)}

/* ============ SITEWIDE EVENT BANNER (kk_above_footer) ============ */
.kk-event-banner{
  background:
    radial-gradient(circle at 90% 20%, rgba(245,197,24,.25), transparent 55%),
    linear-gradient(135deg,var(--navy-deep),var(--navy) 60%,var(--navy-soft));
  color:var(--parchment);
  border-top:3px solid var(--ink);
  padding:1.75rem 0;position:relative;overflow:hidden;
  margin-top:var(--sp-6);
}
.kk-event-banner + .footer{margin-top:0}
.kk-event-banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,transparent 0 20px,rgba(245,197,24,.05) 20px 21px);
}
.kk-event-banner__inner{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  position:relative;z-index:2;
}
.kk-event-banner__txt{flex:1;min-width:220px;display:flex;flex-direction:column;gap:.35rem}
.kk-event-banner__txt strong{font-family:var(--serif);font-size:1.3rem;font-weight:800;color:var(--parchment);letter-spacing:-.01em;line-height:1.1}
.kk-event-banner__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow-soft);font-weight:700}
@media(min-width:720px){
  .kk-event-banner{padding:2rem 0}
  .kk-event-banner__txt strong{font-size:1.5rem}
}

/* Inline varijanta — ide unutar sekcije Događaji kao istaknuta kartica */
.kk-event-banner--inline{
  border-radius:var(--r-lg);
  border:2.5px solid var(--ink);
  border-top:2.5px solid var(--ink);
  box-shadow:6px 6px 0 var(--yellow-soft);
  padding:1.5rem 1.75rem;
  margin:1.5rem 0 2rem;
}
@media(min-width:720px){
  .kk-event-banner--inline{padding:1.75rem 2.25rem;border-radius:var(--r-xl);box-shadow:8px 8px 0 var(--yellow-soft)}
}
.kk-event-banner--inline .kk-event-banner__inner{
  padding:0;
}
.kk-event-banner--inline::after{
  content:"★";position:absolute;top:1rem;right:1.25rem;
  color:var(--yellow-soft);font-size:1.4rem;font-weight:900;
  text-shadow:0 0 12px rgba(245,197,24,.5);
  z-index:1;pointer-events:none;
}

/* Lista ostalih istaknutih događaja ispod glavnog banner-a */
.kk-event-banner__list{
  list-style:none;margin:1.25rem 0 0;padding:1rem 0 0;
  border-top:1px dashed rgba(243,235,216,.25);
  display:grid;gap:.5rem;position:relative;z-index:2;
}
.kk-event-banner__list-item a{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.55rem .75rem;border-radius:var(--r-sm);
  text-decoration:none;color:var(--parchment);
  transition:background .15s var(--ease);
}
.kk-event-banner__list-item a:hover{background:rgba(245,197,24,.08)}
.kk-event-banner__list-title{
  font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--parchment);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kk-event-banner__list-meta{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow-soft);font-weight:700;flex-shrink:0;
}
@media(max-width:719px){
  .kk-event-banner__list-item a{flex-direction:column;align-items:flex-start;gap:.2rem}
  .kk-event-banner__list-title{white-space:normal}
}

/* ============ BROJKE / STATS STRIP ============ */
.stats-strip{
  background:linear-gradient(180deg,var(--parchment),var(--paper));
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:var(--sp-4) 0;position:relative;overflow:hidden;
}
.stats-strip::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--yellow-soft) 0 32px,var(--sienna-bright) 32px 64px,var(--olive) 64px 96px,var(--navy) 96px 128px);
}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1rem;position:relative;z-index:2}
@media(min-width:720px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.stat{display:flex;flex-direction:column;gap:.3rem;text-align:center;position:relative;padding:1rem .5rem}
.stat::after{content:"";position:absolute;top:1rem;bottom:1rem;right:0;width:1px;background:var(--line-2);opacity:.5}
.stat:last-child::after{display:none}
@media(max-width:720px){.stat:nth-child(2n)::after{display:none}}
.stat__num{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(2.8rem,7vw,4.5rem);line-height:.95;letter-spacing:-.03em;
  color:var(--ink);
}
.stat__num em{font-style:italic;font-weight:400;color:var(--sienna-bright);margin-left:.1em}
.stat__label{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--mocha);font-weight:800;margin-top:.4rem;
}

/* ============ GRADOVI GRID ============ */
.cities-grid{
  display:grid;gap:.75rem;
  grid-template-columns:repeat(2,1fr);
  margin-top:2rem;
}
@media(min-width:640px){.cities-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.cities-grid{grid-template-columns:repeat(4,1fr)}}
.city-pill{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:var(--white);border:2px solid var(--ink);border-radius:var(--r-md);
  padding:1rem 1.2rem;box-shadow:3px 3px 0 var(--ink);
  transition:all .4s var(--ease);
}
.city-pill:hover{transform:translateY(-3px);box-shadow:4px 6px 0 var(--yellow-soft);background:var(--yellow-soft)}
.city-pill__name{font-family:var(--serif);font-weight:800;font-size:1.1rem;color:var(--ink)}
.city-pill__count{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sienna-bright);font-weight:800;
  padding:.25rem .55rem;background:var(--cream);border-radius:var(--r-pill);
  border:1.5px solid var(--ink);
}
.city-pill:hover .city-pill__count{background:var(--ink);color:var(--yellow-soft)}

/* ============ MANIFEST / PULL QUOTE ============ */
.manifest{
  background:var(--cream);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:var(--sp-5) 0;position:relative;overflow:hidden;
}
.manifest::before{
  content:"\201C";position:absolute;top:-3rem;left:2rem;
  font-family:var(--serif);font-size:18rem;font-weight:900;
  color:var(--yellow-soft);opacity:.25;line-height:1;pointer-events:none;
}
.manifest::after{
  content:"";position:absolute;right:-4rem;bottom:-2rem;
  width:200px;height:200px;border-radius:50%;
  border:2px dashed rgba(168,21,12,.25);
  animation:spinSlow 45s linear infinite;pointer-events:none;
}
.manifest__inner{
  max-width:820px;margin:0 auto;text-align:center;position:relative;z-index:2;
}
.manifest__quote{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(1.5rem,3.5vw,2.4rem);line-height:1.3;letter-spacing:-.015em;
  color:var(--ink);
}
.manifest__quote em{font-style:normal;color:var(--sienna-bright);font-weight:800}
.manifest__attr{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--mocha);font-weight:800;margin-top:2rem;
  display:inline-flex;align-items:center;gap:.75rem;
}
.manifest__attr::before,.manifest__attr::after{content:"";width:32px;height:2px;background:var(--ink)}

/* ============ NEWSLETTER ============ */
.newsletter{
  background:
    radial-gradient(circle at 15% 30%, rgba(245,197,24,.12), transparent 55%),
    linear-gradient(135deg,var(--navy-deep),var(--navy));
  color:var(--parchment);
  padding:var(--sp-5) 0;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  position:relative;overflow:hidden;
}
.newsletter::before{
  content:"";position:absolute;top:-60px;right:-60px;width:260px;height:260px;
  border-radius:50%;border:2px dashed rgba(245,197,24,.25);
  animation:spinSlow 55s linear infinite;pointer-events:none;
}
.newsletter__inner{
  display:grid;grid-template-columns:1fr;gap:2rem;
  align-items:center;position:relative;z-index:2;
}
@media(min-width:820px){.newsletter__inner{grid-template-columns:1.3fr 1fr;gap:3rem}}
@media(min-width:1100px){.newsletter__inner{gap:4rem}}
.newsletter h2{
  color:var(--parchment);font-family:var(--serif);font-weight:900;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;letter-spacing:-.02em;
}
.newsletter h2 em{color:var(--yellow-soft);font-style:italic;font-weight:700}
.newsletter p{color:rgba(243,235,216,.85);margin-top:.75rem;font-weight:500}
.newsletter__form{
  display:flex;gap:.5rem;padding:.4rem;background:var(--parchment);
  border-radius:var(--r-pill);box-shadow:6px 6px 0 var(--ink);
  border:2px solid var(--ink);
  flex-wrap:wrap;
}
.newsletter__form input{
  flex:1;min-width:0;background:transparent;border:0;padding:.85rem 1.25rem;
  font-size:.95rem;color:var(--ink);outline:0;font-weight:500;
}
.newsletter__form input::placeholder{color:var(--muted)}
.newsletter__form button{
  padding:.85rem 1.4rem;border-radius:var(--r-pill);
  background:var(--ink);color:var(--yellow-soft);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  display:flex;align-items:center;gap:.5rem;
  transition:all .3s var(--ease);border:2px solid var(--ink);
}
.newsletter__form button:hover{background:var(--yellow-soft);color:var(--ink);transform:translateY(-2px)}
.newsletter__col{display:flex;flex-direction:column;gap:.85rem}
.newsletter__note{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,235,216,.65);font-weight:700;padding-left:1.4rem;
}

/* ============ STEAM + CUP DECORATION ============ */
.steam-deco{
  position:absolute;pointer-events:none;z-index:1;
  top:2rem;right:2rem;
  width:72px;height:108px;
  color:var(--yellow-soft);
  opacity:.55;
}
@media(max-width:719px){.steam-deco{display:none}}
.steam-deco svg{width:100%;height:100%;overflow:visible;display:block}
.steam-deco .steam path{
  animation:steamUp 3s ease-in-out infinite;
  transform-origin:center bottom;
}
.steam-deco .steam path:nth-child(2){animation-delay:.4s}
.steam-deco .steam path:nth-child(3){animation-delay:.8s}
@keyframes steamUp{
  0%{transform:translateY(2px);opacity:0}
  30%{opacity:1}
  100%{transform:translateY(-3px);opacity:0}
}

/* ============ BIZNIS CTA ============ */
.biznis-cta{position:relative;padding:var(--sp-7) 0}
.biznis-cta__inner{
  display:grid;gap:2.5rem;
  grid-template-columns:1fr;align-items:center;
  position:relative;z-index:3;
}
@media(min-width:900px){.biznis-cta__inner{grid-template-columns:1.5fr auto}}
.biznis-cta .h-display{color:var(--parchment);font-size:clamp(2rem,5vw,3.4rem)}
.biznis-cta p{max-width:560px;margin-top:1rem;font-size:1.05rem;color:rgba(243,235,216,.9)}

.biznis-cta__stats{display:flex;gap:1.25rem;margin-top:1.5rem;flex-wrap:wrap}
@media(min-width:720px){.biznis-cta__stats{gap:2rem;margin-top:2rem}}
.biznis-cta__stats > div{padding:.4rem 0;border-left:4px solid var(--yellow-soft);padding-left:1rem;min-width:90px}
.biznis-cta__stats strong{display:block;font-family:var(--serif);font-size:2.2rem;font-weight:900;color:var(--yellow-soft);line-height:1}
.biznis-cta__bean-badge{display:inline-flex!important;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;color:var(--yellow-soft)}
.biznis-cta__bean-badge svg{width:2.4rem;height:2.4rem}
.biznis-cta__stats span{font-family:var(--mono);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,235,216,.7);font-weight:700}

.biznis-cta__buttons{display:flex;flex-direction:column;gap:1rem}
.biznis-cta__buttons .btn{justify-content:center}

.biznis-cta__bean{
  position:absolute;pointer-events:none;z-index:1;border-radius:50%;
}
.biznis-cta__bean--1{
  width:260px;height:260px;top:-80px;right:-60px;
  border:3px solid rgba(245,197,24,.25);
  animation:spinSlow 50s linear infinite;
}
.biznis-cta__bean--1::after{content:"";position:absolute;inset:22px;border:2px dashed rgba(245,197,24,.2);border-radius:50%}
.biznis-cta__bean--2{
  width:180px;height:180px;bottom:-40px;left:-40px;
  border:3px solid rgba(168,21,12,.4);
  animation:spinSlow 35s linear infinite reverse;
}
@media(max-width:900px){.biznis-cta__bean{display:none}}

/* ============ FOOTER ============ */
.footer{background:var(--ink);color:var(--parchment);padding:var(--sp-5) 0 var(--sp-4);margin-top:var(--sp-6);position:relative;z-index:2}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-bottom:2rem}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

.footer-col{
  background:rgba(243,235,216,.04);
  border:1px solid rgba(243,235,216,.14);
  border-radius:var(--r-lg);
  padding:1.5rem 1.3rem;
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
@media(min-width:720px){.footer-col{padding:1.75rem 1.5rem}}
.footer-col:hover{background:rgba(245,197,24,.06);border-color:var(--yellow-soft);transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.footer-col--brand{background:linear-gradient(135deg,rgba(27,92,107,.35),rgba(14,56,66,.35));border-color:rgba(245,197,24,.25)}

.footer h4{color:var(--yellow-soft);font-family:var(--mono);font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;margin-bottom:1.1rem;padding-bottom:.75rem;border-bottom:2px solid rgba(245,197,24,.25)}
.footer a{color:var(--parchment);padding:.35rem 0;display:block;transition:color .3s var(--ease),padding-left .35s var(--ease),letter-spacing .35s var(--ease);font-size:.98rem;font-weight:600;position:relative}
.footer a:hover{color:var(--yellow-soft);padding-left:1rem;letter-spacing:.02em}
.footer-col > a{position:relative}
.footer-col > a::before{content:"→";position:absolute;left:0;opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease);color:var(--yellow-soft)}
.footer-col > a:hover::before{opacity:1;transform:translateX(0)}
.footer__brand{font-family:var(--serif);font-size:1.65rem;font-weight:800;color:var(--parchment);margin-bottom:.6rem;letter-spacing:-.01em}
.footer__about{font-size:.92rem;line-height:1.6;color:rgba(243,235,216,.8);font-weight:500}
.footer__socials{display:flex;gap:.75rem;margin-top:1.25rem}
.footer__socials a{width:42px;height:42px;padding:0;border:1.5px solid rgba(243,235,216,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(243,235,216,.06)}
.footer__socials a:hover{padding-left:0;background:var(--yellow-soft);color:var(--ink);border-color:var(--yellow-soft);transform:translateY(-2px)}
.footer__bottom{border-top:1px solid rgba(243,235,216,.12);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,235,216,.6);font-weight:600}
@media(max-width:720px){
  .footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:.75rem}
  .footer__bottom > span{margin-left:0!important;text-align:center!important}
}

/* ============ BOTTOM NAV (MOBILE) ============ */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  background:var(--white);border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:.35rem 0 env(safe-area-inset-bottom);
}
.bottom-nav a{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:.55rem .25rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  position:relative;font-weight:700;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.bottom-nav a svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.bottom-nav a:hover,.bottom-nav a:focus{color:var(--ink)}
.bottom-nav a:hover svg{transform:translateY(-2px) scale(1.1)}
.bottom-nav a.is-active{color:var(--ink)}
.bottom-nav a.is-active svg{color:var(--sienna-bright)}
.bottom-nav a.is-active::before{content:"";position:absolute;top:-1px;left:18%;right:18%;height:3px;background:var(--yellow-soft);border-radius:2px}
.bottom-nav a:active{transform:scale(.94)}
@media(min-width:900px){.bottom-nav{display:none}}
@media(max-width:899px){body{padding-bottom:72px}}

/* ============ BIZNIS (pricing tiers) ============ */
.tiers{display:grid;gap:1.5rem;grid-template-columns:1fr;margin-top:3rem}
@media(min-width:720px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.tiers{grid-template-columns:repeat(4,1fr)}}
.tier{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:2rem;display:flex;flex-direction:column;gap:1rem;
  position:relative;transition:all .3s var(--ease);
}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tier.is-featured{background:var(--navy-deep);color:var(--parchment);border-color:var(--navy-deep)}
.tier.is-featured h3,.tier.is-featured .tier__price{color:var(--parchment)}
.tier.is-featured .tier__price em{color:var(--yellow-soft)}
.tier.is-featured ul li{color:rgba(243,235,216,.8);border-color:rgba(243,235,216,.12)}
.tier.is-featured::before{content:"Preporučeno";position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--yellow-soft);color:var(--ink);padding:.4rem 1rem;border-radius:var(--r-pill);font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase}
.tier__name{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.tier.is-featured .tier__name{color:var(--yellow-soft)}
.tier__price{font-family:var(--serif);font-size:2.4rem;font-weight:500;line-height:1}
.tier__price em{font-family:var(--mono);font-size:.7rem;font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-left:.4rem}
.tier ul{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.tier ul li{padding:.5rem 0;border-bottom:1px dashed var(--line);font-size:.9rem;display:flex;gap:.6rem;align-items:flex-start}
.tier ul li::before{content:"✓";color:var(--olive);font-weight:700;flex:0 0 auto}
.tier.is-featured ul li::before{color:var(--yellow-soft)}
.tier .btn{margin-top:auto;justify-content:center}

/* ============ QUIZ MODAL ============ */
.quiz-overlay{position:fixed;inset:0;background:rgba(14,56,66,.85);backdrop-filter:blur(6px);z-index:60;display:none;align-items:center;justify-content:center;padding:1rem}
.quiz-overlay.is-open{display:flex;animation:fadeIn .3s var(--ease)}
.quiz-modal{
  background:var(--parchment);border-radius:var(--r-xl);
  max-width:620px;width:100%;max-height:90vh;overflow-y:auto;
  padding:2rem;position:relative;animation:slideUp .4s var(--ease);
}
.quiz-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);transition:all .35s var(--ease)}
.quiz-close:hover{background:var(--sienna-bright);color:var(--parchment);transform:rotate(90deg) scale(1.08)}
.quiz-close:active{transform:rotate(90deg) scale(.95)}
.quiz-progress{display:flex;gap:.35rem;margin-bottom:1.5rem}
.quiz-progress span{flex:1;height:4px;background:var(--cream);border-radius:2px;transition:background .3s}
.quiz-progress span.is-done{background:var(--yellow-soft)}
.quiz-question{font-family:var(--serif);font-size:1.5rem;font-weight:500;line-height:1.2;margin-bottom:1.5rem}
.quiz-options{display:flex;flex-direction:column;gap:.5rem}
.quiz-option{
  text-align:left;padding:1rem 1.25rem;background:var(--white);
  border:2px solid var(--ink);border-radius:var(--r-md);
  transition:all .3s var(--ease);font-size:.95rem;font-weight:600;
  box-shadow:3px 3px 0 var(--ink);
  position:relative;
}
.quiz-option:hover{background:var(--yellow-soft);color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.quiz-option:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink)}

.quiz-result{text-align:center}
.quiz-result__ico{width:72px;height:72px;margin:0 auto 1rem;border-radius:50%;background:var(--yellow-soft);color:var(--ink);display:flex;align-items:center;justify-content:center}
.quiz-result__ico svg{width:36px;height:36px}
.quiz-result h3{font-size:2rem;margin-bottom:.5rem}
.quiz-result__sub{color:var(--mocha);font-style:italic;margin-bottom:1.5rem}
.quiz-recipe{background:var(--white);border:1px dashed var(--line-2);border-radius:var(--r-md);padding:1.25rem;text-align:left;margin-bottom:1.25rem}
.quiz-recipe h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.quiz-recipe ul{font-size:.9rem;display:flex;flex-direction:column;gap:.35rem}
.quiz-recipe ul li{padding-left:1rem;position:relative}
.quiz-recipe ul li::before{content:"·";position:absolute;left:.25rem;color:var(--yellow)}

/* ============ ANIMATIONS ============ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideIn{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 4px 14px rgba(232,176,20,.35)}50%{box-shadow:0 6px 22px rgba(232,176,20,.6)}}

.reveal{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.kk-has-io .reveal{opacity:0;transform:translateY(28px)}
html.kk-has-io .reveal.is-visible{opacity:1;transform:none}

/* Sekcijski naslovi klize s leva */
html.kk-has-io .sec-head.reveal{transform:translateX(-16px)}
html.kk-has-io .sec-head.reveal.is-visible{transform:none}

/* IG tiles scale-in */
html.kk-has-io .ig-tile.reveal{transform:scale(.85);opacity:0}
html.kk-has-io .ig-tile.reveal.is-visible{transform:scale(1);opacity:1}

/* Intent cards spring-up */
html.kk-has-io .intent-card.reveal{transform:translateY(20px) scale(.92)}
html.kk-has-io .intent-card.reveal.is-visible{transform:none}

/* Micro-animacije stalne */
.featured-badge{animation:pulseGlow 3s ease-in-out infinite}
.intent-card:hover .intent-ico{animation:wiggle .55s var(--ease)}
.place:hover .featured-badge{animation:wiggle .5s var(--ease)}
.brand:hover .brand__logo{animation:bob 1.2s ease-in-out infinite}

/* Click feedback */
.chip:active{transform:translateY(0) scale(.96)}
.btn:active{transform:translateY(-1px) scale(.98)}

/* Page body fade in */
body{animation:fadeIn .4s var(--ease)}

/* Eyebrow accent širi se na hover */
.sec-head:hover .eyebrow::before{width:48px}
.eyebrow::before{transition:width .45s var(--ease)}

@media (prefers-reduced-motion: reduce){
  html.kk-has-io .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.hero-inner > *{opacity:0;animation:slideUp .7s var(--ease) forwards}
.hero-inner > *:nth-child(1){animation-delay:.05s}
.hero-inner > *:nth-child(2){animation-delay:.15s}
.hero-inner > *:nth-child(3){animation-delay:.25s}
.hero-inner > *:nth-child(4){animation-delay:.35s}
.hero-inner > *:nth-child(5){animation-delay:.45s}
.hero-inner > *:nth-child(6){animation-delay:.55s}

/* ============ INTERAKTIVNA MAPA ============ */
.kk-map-wrap{
  margin-top:2.5rem;
  background:var(--parchment);
  border:2px solid var(--ink);
  border-radius:var(--r-xl,18px);
  box-shadow:6px 6px 0 var(--ink);
  overflow:hidden;
  position:relative;
}
.kk-map-wrap::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:5;
  background:linear-gradient(90deg, var(--yellow-soft) 0%, var(--sienna-bright) 33%, var(--olive) 66%, var(--yellow-soft) 100%);
}
@media(min-width:720px){.kk-map-wrap{box-shadow:10px 10px 0 var(--ink);margin-top:3rem}}
.kk-map-head{
  display:flex;flex-direction:column;gap:1.25rem;
  padding:1.5rem 1.25rem 1.25rem;
  border-bottom:2px solid var(--ink);
  background:linear-gradient(180deg, var(--cream) 0%, var(--parchment) 100%);
}
@media(min-width:720px){.kk-map-head{flex-direction:row;justify-content:space-between;align-items:flex-end;padding:1.75rem 1.75rem 1.5rem}}
.kk-map-head > div:first-child{display:flex;flex-direction:column;gap:.35rem}
.kk-map-head h3{font-family:var(--serif);font-size:1.5rem;font-weight:900;color:var(--ink);margin:0;letter-spacing:-.01em;line-height:1.1}
@media(min-width:720px){.kk-map-head h3{font-size:1.9rem}}
.kk-map-filters{display:flex;gap:.4rem;flex-wrap:wrap}
.kk-map-filter{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--mocha);
  padding:.6rem 1rem;border-radius:999px;
  background:transparent;border:1.5px solid var(--mocha);cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);
}
.kk-map-filter:hover{background:var(--ink);color:var(--yellow-soft);border-color:var(--ink);transform:translateY(-1px)}
.kk-map-filter.is-active{background:var(--ink);color:var(--yellow-soft);border-color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.kk-map-filter--country{
  background:transparent;border-color:var(--sienna-bright);color:var(--sienna-bright);
  font-size:.6rem;
}
.kk-map-filter--country:hover{background:var(--sienna-bright);color:var(--parchment)}
.kk-map-filter--country.is-active{background:var(--sienna-bright);color:var(--parchment);box-shadow:2px 2px 0 var(--ink)}
.kk-map-divider{
  display:inline-block;width:1.5px;height:24px;
  background:var(--ink);opacity:.25;margin:0 .25rem;align-self:center;
}
.kk-map{
  width:100%;height:380px;background:#dfe7e8;
  position:relative;z-index:1;
}
@media(min-width:720px){.kk-map{height:520px}}
.kk-map-foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.1rem 1.25rem;
  border-top:2px solid var(--ink);
  background:linear-gradient(180deg, var(--cream) 0%, rgba(247,239,216,.6) 100%);
}
@media(min-width:720px){.kk-map-foot{padding:1.25rem 1.75rem}}
.kk-map-count{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--ink);
  background:var(--yellow-soft);padding:.45rem .9rem;border-radius:999px;border:1.5px solid var(--ink);
  display:inline-flex;align-items:center;
}
@media(max-width:719px){.kk-map-foot .kk-map-legend{order:-1;width:100%;padding-bottom:.4rem;border-bottom:1px dashed var(--mocha);margin-bottom:.4rem}}

/* Pin */
.kk-pin{position:relative;cursor:pointer}
.kk-pin__dot{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink);
  opacity:.78;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .2s var(--ease);
}
.kk-pin__dot svg{width:11px;height:11px}
.kk-pin:hover .kk-pin__dot{transform:scale(1.25) translateY(-2px);box-shadow:0 5px 0 var(--ink);opacity:1;z-index:1000}
.kk-pin:active .kk-pin__dot{transform:scale(1.05)}
/* Plaćeni pinovi: veći, puna boja, debelji border, pulsiraju */
.kk-pin--paid .kk-pin__dot{
  width:38px;height:38px;border-width:2.5px;box-shadow:0 4px 0 var(--ink);opacity:1;
}
.kk-pin--paid .kk-pin__dot svg{width:16px;height:16px}
.kk-pin__ring{
  position:absolute;inset:-6px;border-radius:50%;
  border:2.5px solid var(--yellow-soft);
  animation:kkPinPulse 2s ease-out infinite;pointer-events:none;
}
@keyframes kkPinPulse{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(1.7);opacity:0}
}

/* Legenda mape */
.kk-map-legend{
  display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:800;color:var(--mocha);
}
.kk-map-legend__item{display:inline-flex;align-items:center;gap:.5rem;transition:color .2s var(--ease)}
.kk-map-legend__item:hover{color:var(--ink)}
.kk-map-legend__dot{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.2);
}
.kk-map-legend__dot--lokal{background:var(--yellow)}
.kk-map-legend__dot--przionica{background:var(--sienna-bright)}
.kk-map-legend__dot--oprema{background:var(--olive)}
/* Istaknuto — samo pulsing prsten, bez fill-a (da se ne miješa sa kafeterije žuta) */
.kk-map-legend__dot--paid{
  background:transparent;border-color:var(--ink);
  position:relative;box-shadow:none;
}
.kk-map-legend__dot--paid::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--ink);animation:kkPinPulse 2s ease-out infinite;
}

/* Fullscreen mode — wrap je portaliran direktno u <body> da izbjegne reveal transform */
.kk-map-wrap.is-fullscreen{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100vw!important;height:100vh!important;height:100dvh!important;
  max-width:none!important;margin:0!important;
  z-index:99999!important;
  border-radius:0!important;border:0!important;box-shadow:none!important;
  background:var(--parchment);
  display:flex;flex-direction:column;
  transform:none!important;opacity:1!important;
}
.kk-map-wrap.is-fullscreen .kk-map-head{flex-shrink:0}
.kk-map-wrap.is-fullscreen .kk-map{flex:1 1 auto;height:auto!important;min-height:0;width:100%}
.kk-map-wrap.is-fullscreen .kk-map-foot{flex-shrink:0}
body.kk-map-fs-open{overflow:hidden}
body.kk-map-fs-open .topbar{z-index:1}
.kk-map-fs-toggle{cursor:pointer;border:0;background:none;font:inherit;color:inherit}

/* Popup */
.leaflet-popup-content-wrapper.kk-popup,
.leaflet-popup-content-wrapper{
  border-radius:var(--r-md);border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);padding:0;background:var(--parchment);
}
.leaflet-popup-content{margin:0;width:260px!important}
.leaflet-popup-tip{border:1.5px solid var(--ink)}
.kk-pop__thumb{
  width:100%;height:120px;background:var(--navy) center/cover no-repeat;
  border-bottom:2px solid var(--ink);
}
.kk-pop__body{padding:.9rem 1rem 1rem}
.kk-pop__type{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--sienna-bright);margin-bottom:.25rem;
}
.kk-pop__title{
  font-family:var(--serif);font-size:1.05rem;font-weight:900;color:var(--ink);
  line-height:1.2;margin-bottom:.4rem;
}
.kk-pop__grad{
  display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  font-weight:700;color:var(--roast);text-transform:uppercase;margin-bottom:.5rem;
}
.kk-pop__adresa{font-size:.78rem;color:var(--roast);line-height:1.4;margin-bottom:.65rem}
.kk-pop__cta{
  display:inline-block;font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:800;color:var(--ink);
  border-bottom:2px solid var(--yellow-soft);padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.kk-pop__cta:hover{color:var(--sienna-bright);border-color:var(--sienna-bright)}

/* ============ MOBILE CLEANUP ============ */
@media(max-width:720px){
  /* Tighter section paddings on mobile */
  .sec{padding:2.5rem 0}
  .sec--sm{padding:2rem 0}
  .sec--lg{padding:3rem 0}
  .sec--dark{padding:2.75rem 0}

  /* Hero — kompaktan i CENTRIRAN na mobilnom */
  .hero{padding:2rem 0 2.5rem}
  .hero-inner{text-align:center;max-width:100%}
  .hero-inner .eyebrow,
  .hero-inner .hero-chips{justify-content:center}
  .hero-inner .hero-search{margin-left:auto;margin-right:auto}
  .hero-title{
    font-size:clamp(2.2rem,8.5vw,3rem);
    margin:.85rem auto 1.1rem;
    line-height:1.05;
  }
  .hero-title br{display:none}  /* da naslov flow-uje prirodno */
  .hero-sub{font-size:.95rem;margin:0 auto 1.25rem}

  /* Search bar — optimizovan za telefon */
  .hero-search{
    flex-wrap:nowrap;
    padding:.35rem;
    gap:.3rem;
  }
  .hero-search input{
    font-size:1rem;  /* iOS ne zoom-uje pri 16px+ */
    padding:.75rem .85rem;
    min-width:0;
  }
  .loc-btn{
    padding:.75rem .65rem;flex-shrink:0;
  }
  .loc-btn span{display:none}  /* sakrij "Blizu mene" tekst, ostane samo ikonica */
  .hero-search button[type="submit"]{
    padding:.75rem .9rem;flex-shrink:0;
  }
  .hero-search button[type="submit"] span{display:none}  /* sakrij "Traži" tekst */
  .hero-search button[type="submit"] svg{width:18px;height:18px}
  .loc-btn svg{width:18px;height:18px}

  /* Chips — manji + centrirani */
  .hero-chips{gap:.4rem;margin-top:1.5rem;justify-content:center}
  .hero-chip{font-size:.6rem;padding:.45rem .8rem;letter-spacing:.14em}

  /* Intent grid — 3 u prvom redu, 2 centrirana u drugom (originalni 3+2 layout) */
  .intent-grid{grid-template-columns:repeat(6,1fr);gap:.55rem}
  .intent-card{padding:.95rem .55rem .85rem;text-align:center;align-items:center;gap:.45rem}
  .intent-card h3{font-size:.85rem}
  .intent-card p{font-size:.65rem;line-height:1.35}
  .intent-num{align-self:center;font-size:.55rem}
  .intent-ico{margin:0 auto}

  /* Section heads compact */
  .sec-head{flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:1.25rem}
  .sec-head .btn{align-self:flex-start}
  .h-display{font-size:clamp(1.6rem,6vw,2rem)}

  /* Manifest mobile */
  .manifest{padding:3rem 0}
  .manifest::before{font-size:14rem;top:-1rem}
  .manifest__quote{font-size:1.05rem;line-height:1.5;margin-bottom:1.25rem}
  .manifest__author{font-size:.62rem;letter-spacing:.18em}

  /* Akademija mobile */
  .akademija{padding:3rem 0}
  .akademija__head{gap:1.5rem;margin-bottom:2rem}
  .akademija__copy h2{font-size:1.85rem;margin-bottom:.85rem}
  .akademija__copy p{font-size:.95rem;margin-bottom:1.25rem}
  .akademija__topics{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .akademija__topic{padding:.95rem .85rem 1.1rem;gap:.4rem}
  .akademija__topic h4{font-size:.95rem}
  .akademija__topic > span:not(.akademija__topic-ico){font-size:.55rem;letter-spacing:.16em}
  .akademija__topic-ico{width:36px;height:36px;border-radius:9px}
  .akademija__topic-ico svg{width:18px;height:18px}
  .akademija__latest{grid-template-columns:1fr;gap:1rem}
  .akademija-card__title{font-size:1rem}

  /* Edukacija landing mobile */
  .edu-stats{margin:-2rem auto 2rem;gap:.75rem}
  .edu-stat{padding:1.1rem 1rem}
  .edu-stat__num{font-size:1.9rem}
  .edu-stat__label{font-size:.55rem}
  .edu-topics{grid-template-columns:1fr;gap:.85rem}
  .edu-topic{padding:1.25rem 1.1rem;gap:.6rem}
  .edu-topic__ico{width:44px;height:44px}
  .edu-topic__ico svg{width:22px;height:22px}
  .edu-topic__title{font-size:1.1rem}
  .edu-topic__desc{font-size:.88rem;line-height:1.45}
  .edu-path{gap:1.75rem}
  .edu-step{padding:1.5rem 1.25rem}
  .edu-step__title{font-size:1.2rem}
  .edu-step__desc{font-size:.88rem}

  /* Cards grid mobile single column */
  .cards-grid{gap:1rem}
  .kutka-grid{gap:1rem}

  /* Featured badge na karticama manje */
  .place__title{font-size:1.15rem}
  .place__desc{font-size:.85rem}
  .award-badge{font-size:.5rem;padding:.25rem .5rem;letter-spacing:.1em}
  .paid-ribbon{font-size:.5rem;padding:.4rem .65rem .35rem}

  /* Steam-deco i hero-deco manje invazivni na mobilnom */
  .steam-deco{width:48px;height:72px;top:1rem;right:1rem}
}

/* Leaflet controls — uskladiti sa brendom */
.leaflet-control-zoom a{
  background:var(--parchment)!important;color:var(--ink)!important;
  border:1.5px solid var(--ink)!important;font-weight:900!important;
}
.leaflet-control-zoom a:hover{background:var(--yellow-soft)!important}
.leaflet-control-attribution{font-size:.55rem!important;background:rgba(247,239,216,.85)!important}

/* Reset zoom dugme */
.kk-map-reset{
  position:absolute;top:12px;left:50%;transform:translate(-50%,-12px);
  z-index:1000;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--ink);background:var(--yellow-soft);
  padding:.55rem .9rem;border-radius:999px;
  border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.kk-map-reset.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.kk-map-reset:hover{background:var(--ink);color:var(--yellow-soft)}
.kk-map-reset svg{transition:transform .35s var(--ease)}
.kk-map-reset:hover svg{transform:rotate(-180deg)}

/* ============ SINGLE LOKAL / PRZIONICA — REDESIGN ============ */

/* === IMAGE HERO === */
.sl-hero{
  position:relative;
  min-height:600px;
  margin-bottom:0;
  overflow:hidden;
  background:var(--navy-deep);
}
.sl-hero__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:saturate(1.05);
  transform:scale(1.04);
  animation:slHeroZoom 18s ease-out infinite alternate;
}
@keyframes slHeroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.sl-hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(14,56,66,.45) 0%,rgba(14,56,66,.5) 50%,rgba(14,56,66,.92) 100%),
    repeating-linear-gradient(45deg,transparent 0 22px,rgba(245,197,24,.04) 22px 23px);
}
.sl-hero__inner{
  position:relative;z-index:2;
  padding-top:1.75rem;padding-bottom:3.5rem;
  min-height:600px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:var(--parchment);
}
.sl-hero__top{display:flex;flex-direction:column;gap:1rem}
.sl-hero__bottom{display:flex;flex-direction:column;gap:1.25rem;max-width:780px}
.sl-hero .breadcrumbs a,
.sl-hero .breadcrumbs span{color:var(--parchment);opacity:.85}
.sl-hero .breadcrumbs span:last-child{opacity:1;color:var(--yellow-soft);font-weight:800}

.sl-hero__badges{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.sl-hero__partner{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .9rem;
  background:rgba(245,197,24,.15);
  border:1.5px solid var(--yellow-soft);
  border-radius:999px;
  color:var(--yellow-soft);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
}
.sl-hero__award{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--yellow-soft);color:var(--ink);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  padding:.5rem 1rem;border-radius:999px;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
}

.sl-hero__title{
  font-family:var(--serif);
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:900;letter-spacing:-.02em;line-height:.98;
  color:var(--parchment);
  margin:0;
  text-shadow:0 4px 18px rgba(0,0,0,.35);
}
.sl-hero__title em{color:var(--yellow-soft);font-style:italic}
.sl-hero__excerpt{
  font-size:1.15rem;line-height:1.55;
  max-width:640px;margin:0;
  color:var(--parchment);opacity:.95;
  font-weight:500;
}

.sl-hero__info{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.sl-hero__cta-wrap{margin-top:.5rem}
.sl-hero__cta{font-size:.9rem;padding:.85rem 1.5rem;box-shadow:0 4px 0 var(--ink)}
.sl-hero__cta:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.sl-hero__pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem .95rem;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:999px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--parchment);
}
.sl-hero__pill svg{width:13px;height:13px}
.sl-hero__pill--rating{background:var(--yellow-soft);color:var(--ink);border-color:var(--ink);font-weight:800}
.sl-hero__pill--rating svg{color:var(--ink)}
.sl-hero__pill--open{background:rgba(122,158,74,.28);border-color:rgba(154,200,90,.55);color:#D9F0B5}
.sl-hero__pill--closed{background:rgba(184,25,15,.22);border-color:rgba(220,80,70,.5);color:#FFC2BC}

@media(max-width:720px){
  .sl-hero{min-height:0}
  .sl-hero__inner{min-height:0;padding-top:1.5rem;padding-bottom:2.5rem;gap:2rem;justify-content:flex-start}
  .sl-hero__bottom{gap:1rem}
  .sl-hero__title{font-size:clamp(2.25rem,9vw,3rem);line-height:1}
  .sl-hero__excerpt{font-size:1rem;line-height:1.45}
  .sl-hero__info{gap:.4rem}
  .sl-hero__pill{font-size:.6rem;padding:.45rem .75rem;letter-spacing:.12em}
  .sl-hero__pill svg{width:11px;height:11px}
  .sl-hero__badges{gap:.4rem}
  .sl-hero__partner,.sl-hero__award{font-size:.55rem;padding:.35rem .7rem;letter-spacing:.18em}
}

/* === GRID === */
.sl-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.sl-grid{grid-template-columns:minmax(0,1fr) 360px}}
/* Kad nema glavnog sadržaja — jedna centrirana kolona, aside ne lebdi prazan desno */
@media(min-width:960px){
  .sl-grid--single{grid-template-columns:minmax(0,560px);justify-content:center}
  .sl-grid--single .single-wrap__content:empty{display:none}
}

/* === GALLERY (hero + thumbs layout, ispod toolbar-a) === */
.sl-gallery{
  display:grid;gap:1rem;margin:2rem 0;
  grid-template-columns:repeat(4,1fr);
}
.sl-gallery__item{
  background:var(--cream) center/cover no-repeat;
  border:2px solid var(--ink);border-radius:var(--r-md);
  box-shadow:3px 3px 0 var(--ink);
  aspect-ratio:1/1;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.sl-gallery__item:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--ink)}
@media(max-width:720px){.sl-gallery{grid-template-columns:repeat(2,1fr)}}

/* Hero gallery — cinematic primary + horizontal thumb strip */
.sl-gallery--hero{
  display:flex;flex-direction:column;gap:.75rem;margin:2.5rem 0 3rem;
}
@media(min-width:720px){.sl-gallery--hero{gap:1rem}}
.sl-gallery__primary,
.sl-gallery__thumb{
  position:relative;overflow:hidden;cursor:pointer;
  border:2px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:4px 4px 0 var(--ink);
  background:var(--cream) center/cover no-repeat;
  padding:0;font:inherit;color:inherit;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),filter .4s var(--ease);
}
.sl-gallery__primary{aspect-ratio:21/9;width:100%}
@media(max-width:720px){.sl-gallery__primary{aspect-ratio:16/10}}
.sl-gallery__thumb{aspect-ratio:1/1}
@media(min-width:720px){
  .sl-gallery__primary,.sl-gallery__thumb{box-shadow:6px 6px 0 var(--ink)}
}
/* Image zoom efekt — koristim ::before kao image layer da bi transform radio */
.sl-gallery__primary::before,
.sl-gallery__thumb::before{
  content:"";position:absolute;inset:0;
  background:inherit;
  transition:transform .55s var(--ease-out, var(--ease));
}
.sl-gallery__primary:hover,
.sl-gallery__thumb:hover{
  transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--ink);
}
.sl-gallery__primary:hover::before,
.sl-gallery__thumb:hover::before{transform:scale(1.06)}
/* Subtilan inner glow */
.sl-gallery__primary::after,
.sl-gallery__thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:opacity .3s var(--ease);
}
.sl-gallery__primary-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:1.25rem;z-index:2;
  background:linear-gradient(180deg,transparent 55%,rgba(14,56,66,.65) 100%);
  pointer-events:none;
}
.sl-gallery__count{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(14,56,66,.92);color:var(--yellow-soft);
  padding:.55rem .95rem;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  border:1.5px solid var(--yellow-soft);
  backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sl-gallery__thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;
}
@media(min-width:720px){.sl-gallery__thumbs{gap:1rem}}
@media(max-width:520px){.sl-gallery__thumbs{grid-template-columns:repeat(2,1fr)}}
.sl-gallery__thumb--more::before{
  filter:brightness(.45);
}
.sl-gallery__thumb--more::after{
  background:linear-gradient(135deg, rgba(14,56,66,.55) 0%, rgba(14,56,66,.78) 100%);
  box-shadow:none;
}
.sl-gallery__more{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  font-family:var(--serif);font-style:italic;font-size:2.5rem;font-weight:900;
  color:var(--yellow-soft);
  z-index:3;letter-spacing:-.04em;line-height:.9;
  text-shadow:0 4px 12px rgba(0,0,0,.5);
}
.sl-gallery__more::after{
  content:"još fotki";display:block;
  font-family:var(--mono);font-style:normal;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  color:rgba(243,235,216,.85);text-shadow:none;margin-top:.4rem;
}

/* Lightbox modal */
.kk-lightbox{
  position:fixed;inset:0;z-index:9500;display:none;
  background:rgba(14,56,66,.96);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:1rem;
}
.kk-lightbox.is-open{display:flex;animation:fadeIn .2s var(--ease)}
.kk-lightbox__img{
  max-width:min(1100px,94vw);max-height:84vh;
  width:auto;height:auto;object-fit:contain;
  border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--ink);
  background:var(--cream);
}
.kk-lightbox__close{
  position:absolute;top:1.25rem;right:1.25rem;
  width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--yellow-soft);
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--yellow-soft);cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease);
  z-index:2;
}
.kk-lightbox__close:hover{transform:rotate(90deg);background:var(--sienna-bright)}
.kk-lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:var(--yellow-soft);
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--yellow-soft);cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease);
  z-index:2;
}
.kk-lightbox__nav:hover{background:var(--sienna-bright)}
.kk-lightbox__nav--prev{left:1.25rem}
.kk-lightbox__nav--next{right:1.25rem}
.kk-lightbox__nav--prev:hover{transform:translateY(-50%) translateX(-3px)}
.kk-lightbox__nav--next:hover{transform:translateY(-50%) translateX(3px)}
.kk-lightbox__counter{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow-soft);font-weight:800;
  background:var(--ink);padding:.55rem 1rem;border-radius:var(--r-pill);
  border:1.5px solid var(--yellow-soft);
}
@media(max-width:720px){
  .kk-lightbox__nav{width:40px;height:40px}
  .kk-lightbox__nav--prev{left:.6rem}
  .kk-lightbox__nav--next{right:.6rem}
  .kk-lightbox__close{top:.75rem;right:.75rem;width:38px;height:38px}
}
body.kk-lightbox-open{overflow:hidden}

/* === ACTION TOOLBAR — bridge između hero i content === */
.sl-actions-wrap{
  position:relative;z-index:5;
  margin-top:-2.5rem;margin-bottom:2.5rem;
}
.sl-actions{
  display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;
  padding:1.05rem 1.5rem;
  background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 10px 0 var(--ink);
}
.sl-action{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.05rem;
  background:var(--cream);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--r-pill);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  text-decoration:none;
  transition:all .25s var(--ease);
}
.sl-action:hover{background:var(--ink);color:var(--yellow-soft);transform:translateY(-2px)}
.sl-action--primary{background:var(--yellow-soft);box-shadow:3px 3px 0 var(--ink)}
.sl-action--primary:hover{background:var(--ink);color:var(--yellow-soft);box-shadow:4px 5px 0 var(--yellow-soft)}
.sl-action svg{width:14px;height:14px}

/* Šta nudi grid */
.sl-feats,
.single-wrap__content .sl-feats{
  display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin:1.25rem 0 2.5rem;list-style:none;padding:0;
  align-items:stretch;
}
.sl-feat{
  display:flex;align-items:center;gap:.9rem;
  padding:0 1.05rem;height:72px;width:100%;box-sizing:border-box;
  background:var(--white);border:2px solid var(--ink);border-radius:14px;
  box-shadow:4px 4px 0 var(--ink);
  font-weight:800;font-size:.9rem;line-height:1.2;color:var(--ink);
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.sl-feat::before{
  content:"";position:absolute;
  top:-30%;right:-15%;width:80px;height:80px;
  background:radial-gradient(circle,var(--yellow-soft) 0%,transparent 65%);
  opacity:.22;pointer-events:none;
  transition:opacity .3s var(--ease),transform .4s var(--ease);
}
.sl-feat > span:last-child{flex:1;min-width:0;position:relative;z-index:1;display:flex;align-items:center;height:100%}
.sl-feat:hover{
  transform:translate(-2px,-3px);
  box-shadow:6px 7px 0 var(--ink);
  background:var(--yellow-soft);
}
.sl-feat:hover::before{opacity:0;transform:scale(1.4)}
.sl-feat__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;
  background:var(--yellow-soft);color:var(--ink);
  border-radius:10px;border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  position:relative;z-index:1;
  transition:transform .35s var(--ease),background .3s var(--ease);
}
.sl-feat__ico svg{width:18px;height:18px;stroke-width:2.4}
.sl-feat:hover .sl-feat__ico{background:var(--white);transform:rotate(-6deg)}

/* Sidebar */
.sl-aside{
  background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--r-lg);
  padding:1.6rem;box-shadow:6px 6px 0 var(--ink);
  position:sticky;top:calc(var(--nav-h) + 1rem);
  display:flex;flex-direction:column;gap:1.1rem;
}
.sl-aside__row{display:flex;flex-direction:column;gap:.4rem;padding-bottom:1rem;border-bottom:1.5px dashed var(--line-2)}
.sl-aside__row:last-of-type{border-bottom:0;padding-bottom:0}
.sl-aside__label{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mocha);font-weight:800}
.sl-aside__label svg{width:12px;height:12px;color:var(--sienna-bright);stroke-width:2.4}
.sl-aside__value{font-size:1rem;color:var(--ink);font-weight:600;line-height:1.4}
.sl-aside__value a{color:var(--sienna-bright);font-weight:700;text-decoration:none}
.sl-aside__value a:hover{text-decoration:underline}

/* Radno vreme grid */
.sl-hours{display:grid;grid-template-columns:auto 1fr;gap:.45rem .9rem;font-size:.92rem}
.sl-hours dt{font-weight:700;color:var(--ink);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.sl-hours dd{margin:0;color:var(--roast)}
.sl-hours dt.is-today,.sl-hours dd.is-today{color:var(--sienna-bright);font-weight:800}

/* Map */
.sl-map{
  height:420px;border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:6px 6px 0 var(--ink);overflow:hidden;
  position:relative;
  background:var(--cream);
}
.sl-map-cta{margin-top:1.25rem;display:flex;gap:.75rem;flex-wrap:wrap}

/* Section headings inside single */
/* Globalni inline alignment za sve kk_icon SVG-ove */
.kk-icon{display:inline-block;vertical-align:-.18em;flex-shrink:0}

.sl-h{
  font-family:var(--serif);font-size:1.65rem;font-weight:800;
  margin:4rem 0 1.5rem;color:var(--ink);letter-spacing:-.01em;
  position:relative;display:inline-flex;align-items:center;gap:.55rem;padding-bottom:.6rem;
}
@media(min-width:720px){.sl-h{margin:5rem 0 1.75rem}}
.sl-h .kk-icon{vertical-align:baseline}
.sl-h::after{
  content:"";position:absolute;left:0;bottom:0;
  width:48px;height:5px;
  background:var(--yellow-soft);
  border-radius:3px;
  box-shadow:2px 2px 0 var(--ink);
}
.sl-h:first-child{margin-top:0}

/* Award pill in hero */
.sl-award{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--yellow-soft);color:var(--ink);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  padding:.55rem 1rem;border-radius:999px;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  margin-bottom:1rem;
}

/* === ORIGIN/PROCESS info kartice (przionica) === */
.sl-info-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:1.25rem 0 2.5rem}
.sl-info-card{
  padding:1.1rem 1.25rem;
  background:var(--white);border:2px solid var(--ink);border-radius:14px;
  box-shadow:4px 4px 0 var(--ink);
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.sl-info-card:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--ink)}
.sl-info-card__label{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mocha);font-weight:800;
  margin-bottom:.55rem;
}
.sl-info-card__label svg{width:13px;height:13px;color:var(--sienna-bright);stroke-width:2.4}
.sl-info-card__value{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.3}

/* === DATE/PRICE BIG PILLS (event/obuka) === */
.sl-stat-row{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin:1.5rem 0 2.5rem;
}
.sl-stat{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.25rem;
  background:var(--white);border:2px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);
}
.sl-stat__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex-shrink:0;
  background:var(--yellow-soft);color:var(--ink);
  border:2px solid var(--ink);border-radius:12px;
  box-shadow:2px 2px 0 var(--ink);
}
.sl-stat__ico svg{width:22px;height:22px;stroke-width:2.4}
.sl-stat__text{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.sl-stat__label{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mocha);font-weight:800}
.sl-stat__value{font-family:var(--serif);font-size:1.25rem;font-weight:800;color:var(--ink);line-height:1.1}
.sl-stat--price{background:var(--yellow-soft)}
.sl-stat--price .sl-stat__ico{background:var(--ink);color:var(--yellow-soft)}
.sl-stat--free{background:var(--olive-light)}
.sl-stat--free .sl-stat__ico{background:var(--ink);color:var(--olive-light)}

/* === BIG PRIJAVA CTA (event/obuka) === */
.sl-cta-prijava{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin:2.5rem 0;padding:2rem 2.25rem;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy));
  color:var(--parchment);
  border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--yellow-soft);
}
.sl-cta-prijava h3{font-family:var(--serif);font-size:1.6rem;font-weight:800;color:var(--parchment);margin:0 0 .35rem}
.sl-cta-prijava p{font-size:1rem;color:var(--parchment);opacity:.85;margin:0;max-width:480px}
.sl-cta-prijava .btn{flex-shrink:0}

/* === EVENT/OBUKA HERO BADGES === */
.sl-hero__date{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.1rem;
  background:var(--yellow-soft);color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
}
.sl-hero__date svg{width:14px;height:14px}

/* === FIX: place / akademija kartice u sec--dark zadržavaju svoje boje === */
.sec--dark .place,
.sec--dark .akademija-card,
.sec--dark .kutka{color:var(--ink)}
.sec--dark .place__title,
.sec--dark .akademija-card__title,
.sec--dark .kutka__title{color:var(--ink)}
.sec--dark .place__desc,
.sec--dark .place p,
.sec--dark .akademija-card p,
.sec--dark .kutka__excerpt,
.sec--dark .kutka p{color:var(--roast);font-weight:500;opacity:1}
.sec--dark .place__meta,
.sec--dark .akademija-card__meta,
.sec--dark .kutka__meta{color:var(--mocha)}

/* Featured badge — zamjenjujem bean SVG sa coffee ikonom (čišće) */
.featured-badge{width:42px;height:42px}
.featured-badge svg{width:20px;height:20px;color:var(--ink);stroke-width:2.4}

/* === HOME — MANIFEST CITAT === */
.manifest{
  position:relative;overflow:hidden;
  padding:var(--sp-6) 0;
  background:linear-gradient(180deg,var(--cream) 0%,var(--parchment) 100%);
}
.manifest::before{
  content:"\201C";
  position:absolute;
  top:-2rem;left:50%;transform:translateX(-50%);
  font-family:var(--serif);
  font-size:clamp(14rem,28vw,22rem);
  line-height:1;font-weight:900;font-style:italic;
  color:var(--yellow-soft);
  opacity:.18;
  pointer-events:none;z-index:1;
}
.manifest::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent 0 24px,rgba(184,25,15,.03) 24px 25px);
}
.manifest__inner{
  position:relative;z-index:2;
  max-width:880px;margin:0 auto;
  text-align:center;
  padding:0 1.5rem;
}
.manifest__quote{
  font-family:var(--serif);
  font-size:clamp(1.4rem,3.2vw,2.2rem);
  font-style:italic;
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 2rem;
  letter-spacing:-.005em;
}
.manifest__quote em,
.manifest__quote strong{
  font-style:italic;font-weight:700;
  color:var(--sienna-bright);
  background:linear-gradient(180deg,transparent 60%,rgba(245,197,24,.35) 60%);
}
.manifest__divider{
  display:block;width:60px;height:3px;
  background:var(--ink);
  margin:0 auto 1.25rem;
  border-radius:2px;
}
.manifest__author{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.78rem;
  letter-spacing:.24em;text-transform:uppercase;
  font-weight:800;color:var(--mocha);
}
.manifest__author span{color:var(--sienna-bright)}

/* === HOME — AKADEMIJA SEKCIJA === */
.akademija{
  position:relative;overflow:hidden;
  padding:var(--sp-6) 0;
  background:linear-gradient(180deg,var(--navy-deep) 0%,var(--navy) 100%);
  color:var(--parchment);
}
.akademija::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent 0 24px,rgba(245,197,24,.04) 24px 25px);
}
.akademija__head{
  display:grid;gap:2.5rem;
  grid-template-columns:1fr;align-items:center;
  margin-bottom:3rem;
}
@media(min-width:880px){.akademija__head{grid-template-columns:1fr 1fr}}
.akademija__copy h2{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.4rem);font-weight:900;line-height:1;color:var(--parchment);margin-bottom:1.25rem;letter-spacing:-.02em}
.akademija__copy h2 em{color:var(--yellow-soft);font-style:italic}
.akademija__copy p{font-size:1.1rem;color:rgba(243,235,216,.85);margin-bottom:1.75rem;max-width:520px;font-weight:500;line-height:1.6}
.akademija__cta{display:flex;gap:.75rem;flex-wrap:wrap}

.akademija__topics{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.akademija__topic{
  display:flex;flex-direction:column;gap:.55rem;
  padding:1.25rem 1.25rem 1.4rem;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:14px;
  text-decoration:none;color:var(--parchment);
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.akademija__topic:hover{
  transform:translate(-2px,-3px);
  background:var(--yellow-soft);color:var(--ink);
  border-color:var(--ink);
}
.akademija__topic-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:var(--yellow-soft);color:#1A0F07;
  border:2px solid var(--ink);border-radius:11px;
  box-shadow:2px 2px 0 var(--ink);
  transition:background .3s var(--ease)}
.akademija__topic:hover .akademija__topic-ico{background:var(--white)}
.akademija__topic-ico svg{
  width:22px;height:22px;
  stroke:#1A0F07 !important;
  stroke-width:2.4 !important;
  fill:none !important;
  color:#1A0F07 !important;
  display:block;
}
.akademija__topic h4{font-family:var(--serif);font-size:1.15rem;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:inherit}
.akademija__topic > span:not(.akademija__topic-ico){font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--yellow-soft);transition:color .3s var(--ease)}
.akademija__topic:hover > span:not(.akademija__topic-ico){color:var(--ink)}

.akademija__latest{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  position:relative;z-index:2;
}
.akademija__latest-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin-bottom:1.5rem;position:relative;z-index:2;
}
.akademija__latest-head h3{font-family:var(--serif);font-size:1.5rem;font-weight:800;color:var(--parchment);letter-spacing:-.01em}
.akademija__latest-head a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--yellow-soft);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
}
.akademija__latest-head a:hover{color:var(--parchment)}

.akademija-card{
  display:flex;flex-direction:column;
  background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:5px 5px 0 var(--yellow-soft);
  text-decoration:none;color:var(--ink);
  overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.akademija-card:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--yellow-soft)}
.akademija-card__thumb{
  aspect-ratio:16/10;background:var(--cream) center/cover;
  border-bottom:2.5px solid var(--ink);position:relative;
}
.akademija-card__cat{
  position:absolute;top:.75rem;left:.75rem;
  background:var(--yellow-soft);color:var(--ink);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  padding:.3rem .6rem;border-radius:999px;border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
}
.akademija-card__body{padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.akademija-card__title{font-family:var(--serif);font-size:1.15rem;font-weight:800;line-height:1.25;color:var(--ink)}
.akademija-card__meta{
  margin-top:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--mocha);display:flex;align-items:center;gap:.55rem;
}
.akademija-card__meta svg{width:11px;height:11px}

/* === EDUKACIJA LANDING === */
.edu-stats{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin:-3.5rem auto 3rem;max-width:1100px;
  position:relative;z-index:5;
  padding:0 1rem;
}
.edu-stat{
  padding:1.5rem 1.5rem;
  background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:6px 6px 0 var(--ink);
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.edu-stat:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--ink)}
.edu-stat__num{font-family:var(--serif);font-size:2.6rem;font-weight:900;color:var(--ink);line-height:1;letter-spacing:-.02em}
.edu-stat__label{font-family:var(--mono);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mocha);font-weight:800}
.edu-stat:nth-child(2){background:var(--yellow-soft)}
.edu-stat:nth-child(3){background:var(--olive-light)}

/* "Šta ćeš naučiti" 4 kategorije */
.edu-topics{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:1.5rem 0 0;
}
.edu-topic{
  display:flex;flex-direction:column;gap:1rem;
  padding:1.75rem 1.5rem;
  background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:6px 6px 0 var(--ink);
  text-decoration:none;color:var(--ink);
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.edu-topic:hover{transform:translate(-2px,-4px);box-shadow:8px 10px 0 var(--ink);background:var(--yellow-soft)}
.edu-topic__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;flex-shrink:0;
  background:var(--yellow-soft);color:var(--ink);
  border:2px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.edu-topic:hover .edu-topic__ico{background:var(--white);transform:rotate(-6deg)}
.edu-topic__ico svg{width:26px;height:26px;stroke-width:2.4}
.edu-topic__title{font-family:var(--serif);font-size:1.3rem;font-weight:800;line-height:1.15;color:var(--ink)}
.edu-topic__desc{font-size:.95rem;color:var(--roast);line-height:1.5;font-weight:500;margin:0}
.edu-topic__count{
  margin-top:.5rem;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--sienna-bright);display:flex;align-items:center;gap:.4rem;
}
.edu-topic:hover .edu-topic__count{color:var(--ink)}

/* "Sledeći koraci" — 3 nivoa */
.edu-path{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:1.5rem 0 0;
  position:relative;
}
.edu-step{
  padding:2rem 1.75rem;
  background:linear-gradient(180deg,var(--white) 0%,var(--cream) 100%);
  border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:6px 6px 0 var(--ink);
  position:relative;
  display:flex;flex-direction:column;gap:.85rem;
}
.edu-step__num{
  position:absolute;top:-22px;left:1.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  background:var(--yellow-soft);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:50%;
  box-shadow:3px 3px 0 var(--ink);
  font-family:var(--serif);font-size:1.6rem;font-weight:900;
}
.edu-step__title{font-family:var(--serif);font-size:1.4rem;font-weight:800;color:var(--ink);margin-top:1rem;line-height:1.2}
.edu-step__desc{font-size:.95rem;color:var(--roast);line-height:1.55;font-weight:500;margin:0}
.edu-step__list{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.45rem}
.edu-step__list li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink);font-weight:600}
.edu-step__list li::before{content:"→";color:var(--sienna-bright);font-weight:900}
.edu-step__cta{
  margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--sienna-bright);text-decoration:none;
}
.edu-step--featured{background:linear-gradient(180deg,var(--yellow-soft) 0%,#FFE685 100%)}
.edu-step--featured .edu-step__num{background:var(--ink);color:var(--yellow-soft)}

/* Mentor cards */
.edu-mentors{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:1.5rem 0 0}
.edu-mentor{
  padding:1.5rem;text-align:center;
  background:var(--cream);border:2px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:5px 5px 0 var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.edu-mentor:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--ink)}
.edu-mentor__avatar{
  width:88px;height:88px;border-radius:50%;
  background:var(--yellow-soft) center/cover;
  border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:2rem;color:var(--ink);
}
.edu-mentor__name{font-family:var(--serif);font-size:1.15rem;font-weight:800;color:var(--ink);line-height:1.2}
.edu-mentor__role{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--mocha)}
.edu-mentor__bio{font-size:.85rem;color:var(--roast);line-height:1.5;font-weight:500;margin:0}

/* === RECIPE / ARTICLE READING === */
.sl-article{
  max-width:none;margin:0;
  font-size:1.12rem;line-height:1.8;color:var(--roast);font-weight:500;
}
.sl-article > p:first-of-type{
  font-size:1.3rem;line-height:1.55;color:var(--ink);font-weight:600;
  margin-bottom:1.5rem;
}
.sl-article p{margin-bottom:1.25rem}
.sl-article h2,.sl-article h3{font-family:var(--serif);color:var(--ink);font-weight:800;margin:2.5rem 0 1rem}
.sl-article h2{font-size:1.85rem}
.sl-article h3{font-size:1.4rem}
.sl-article ul,.sl-article ol{padding-left:1.5rem;margin-bottom:1.5rem}
.sl-article ul li,.sl-article ol li{margin-bottom:.65rem}
.sl-article blockquote{
  border-left:6px solid var(--yellow-soft);
  padding:.75rem 0 .75rem 1.5rem;margin:2rem 0;
  font-family:var(--serif);font-style:italic;font-size:1.3rem;
  color:var(--ink);font-weight:600;line-height:1.5;
}
.sl-article a{color:var(--sienna-bright);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.sl-article img{max-width:100%;height:auto;border:2.5px solid var(--ink);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--ink);margin:1.5rem 0}

/* ===== EDUKACIJA članak — bogatija tipografija ===== */
/* Sekcijski heading (◆ POTREBNA OPREMA, ◆ STANDARDNI RECEPT) */
.sl-article .kk-edu-h3{
  font-family:var(--serif);font-size:1.45rem;font-weight:900;color:var(--ink);
  margin:3rem 0 1.25rem;padding-bottom:.6rem;
  display:inline-flex;align-items:center;gap:.6rem;position:relative;
  letter-spacing:-.01em;
}
.sl-article .kk-edu-h3::before{
  content:"◆";color:var(--yellow-soft);font-size:.85rem;
  -webkit-text-stroke:1px var(--ink);
}
.sl-article .kk-edu-h3::after{
  content:"";position:absolute;left:0;bottom:0;width:42px;height:4px;
  background:var(--yellow-soft);border-radius:3px;
}

/* Mali label heading (RATIO, DOZA, MLEVENJE, TEMPERATURA, POSTUPAK) */
.sl-article .kk-edu-h4{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:800;color:var(--sienna-bright);
  margin:1.75rem 0 .35rem;
}

/* Lista opreme — sa zrno bullet markerima, 2 kolone na desktop */
.sl-article ul.kk-edu-list{
  list-style:none;padding:0;margin:1.25rem 0 1.5rem;
  display:grid;grid-template-columns:1fr;gap:.6rem;
}
@media(min-width:600px){.sl-article ul.kk-edu-list{grid-template-columns:1fr 1fr;gap:.6rem 1.5rem}}
.sl-article ul.kk-edu-list li{
  position:relative;margin:0;padding:.65rem .9rem .65rem 2.4rem;
  background:var(--cream);border:1.5px solid var(--ink);border-radius:var(--r-md);
  font-size:.95rem;color:var(--ink);font-weight:600;line-height:1.4;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.sl-article ul.kk-edu-list li:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.sl-article ul.kk-edu-list li::before{
  content:"";position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50% 50% 50% 0;
  background:var(--yellow-soft);border:1.5px solid var(--ink);
  rotate:45deg;
}

/* Timeline koraci (0:00 – 4:00 ...) — suptilna kartica, vrijeme u pill, opis normalan */
.sl-article .kk-edu-time{
  margin:1rem 0;padding:1rem 1.25rem;
  background:linear-gradient(90deg, rgba(245,197,24,.12), rgba(245,197,24,.03) 60%);
  border-left:4px solid var(--yellow-soft);
  border-radius:0 var(--r-md) var(--r-md) 0;
  position:relative;line-height:1.65;
}
.sl-article .kk-edu-time__badge{
  display:inline-block;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;font-weight:800;
  color:var(--ink);background:var(--yellow-soft);
  padding:.2rem .65rem;border-radius:999px;border:1.5px solid var(--ink);
  margin-right:.5rem;white-space:nowrap;
}
.sl-article .kk-edu-time__desc{
  color:var(--ink);font-weight:500;
}
/* Fallback ako još uvijek ima <strong> iz starog importa */
.sl-article .kk-edu-time strong{font-weight:600;color:var(--ink)}

/* Opis lokala — paid only, ispod galerije (editorial intro stil) */
.sl-desc-block{
  margin:4rem 0 4rem;
  max-width:760px;
  position:relative;
  padding:1rem 0 1rem 1.75rem;
}
@media(min-width:720px){.sl-desc-block{margin:5.5rem 0 5rem;padding-left:2.25rem}}
.sl-desc-block::before{
  content:"";position:absolute;top:.5rem;bottom:.5rem;left:0;width:3px;
  background:var(--yellow-soft);border-radius:2px;
}
.sl-desc-block__text{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.8vw,1.45rem);
  font-weight:400;font-style:italic;
  line-height:1.55;color:var(--mocha);
  margin:0;letter-spacing:-.01em;
}

/* Demo banner — na demo istaknutom listingu */
.kk-demo-banner{
  background:repeating-linear-gradient(45deg, var(--ink) 0 12px, #14323a 12px 24px);
  color:var(--parchment);text-align:center;
  padding:.7rem 1rem;font-size:.85rem;
  border-bottom:3px solid var(--yellow-soft);
}
.kk-demo-banner__inner{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}
.kk-demo-banner strong{color:var(--yellow-soft);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.kk-demo-banner em{font-style:italic;color:var(--parchment)}
.kk-demo-banner a{
  color:var(--ink);background:var(--yellow-soft);
  padding:.3rem .8rem;border-radius:999px;text-decoration:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  display:inline-flex;align-items:center;gap:.35rem;margin-left:.4rem;
}
.kk-demo-banner a:hover{background:var(--parchment)}

/* Proizvodi grid — single oprema, paid only (editorial e-commerce stil) */
.sl-products{
  margin:5rem 0 0;padding-top:3.5rem;
  border-top:1px solid var(--line-2);
  position:relative;
}
.sl-products::before{
  content:"";position:absolute;top:-1px;left:0;width:60px;height:3px;background:var(--yellow-soft);
}
@media(min-width:720px){.sl-products{margin-top:6rem;padding-top:4rem}}
.sl-products__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;
  margin-bottom:2.5rem;
}
.sl-products__head-text{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.sl-products__grid{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:520px){.sl-products__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.sl-products__grid{gap:1.5rem;grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.sl-products__grid{grid-template-columns:repeat(5,1fr)}}

.sl-product{
  position:relative;display:flex;flex-direction:column;
  background:transparent;overflow:hidden;
  transition:transform .35s var(--ease);
  text-decoration:none;color:inherit;
}
.sl-product:hover{transform:translateY(-4px)}

.sl-product__thumb{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;
  background:var(--cream) center/cover no-repeat;
  border-radius:var(--r-lg);
  margin-bottom:.85rem;
  transition:box-shadow .35s var(--ease);
}
.sl-product__thumb::before{
  content:"";position:absolute;inset:0;
  background:inherit;
  transition:transform .55s var(--ease);
}
.sl-product:hover .sl-product__thumb{box-shadow:0 12px 32px -8px rgba(14,56,66,.35)}
.sl-product:hover .sl-product__thumb::before{transform:scale(1.07)}

/* Floating "view" button on hover */
.sl-product__thumb::after{
  content:"+";
  position:absolute;bottom:.85rem;right:.85rem;
  width:38px;height:38px;border-radius:50%;
  background:var(--ink);color:var(--yellow-soft);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.5rem;font-weight:300;line-height:1;
  transform:scale(0) rotate(-90deg);transition:transform .35s var(--ease-bounce, var(--ease));
  box-shadow:0 4px 12px rgba(14,56,66,.4);
  z-index:2;
}
.sl-product:hover .sl-product__thumb::after{transform:scale(1) rotate(0)}

.sl-product__cat{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  background:rgba(247,239,216,.92);color:var(--ink);
  padding:.35rem .7rem;border-radius:999px;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  backdrop-filter:blur(6px);
  border:none;box-shadow:0 2px 8px rgba(14,56,66,.15);
  transition:transform .25s var(--ease);
}
.sl-product:hover .sl-product__cat{transform:translateY(-2px)}

.sl-product__body{
  display:flex;flex-direction:column;gap:.35rem;padding:0 .15rem;
}
.sl-product__name{
  font-family:var(--serif);font-size:1rem;font-weight:700;
  margin:0;line-height:1.25;color:var(--ink);letter-spacing:-.01em;
}
@media(min-width:720px){.sl-product__name{font-size:1.1rem}}
.sl-product__price{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;font-weight:800;
  color:var(--mocha);
}
.sl-products__note{
  margin:2rem 0 0;font-size:.75rem;color:var(--mocha);font-style:italic;
  text-align:center;padding-top:1.5rem;border-top:1px dashed var(--line-2);
}

/* Related cards strip */
.sl-related{margin-top:4rem;padding-top:3rem;border-top:2px dashed var(--line-2)}

/* CTA banner pri dnu */
.sl-upgrade{
  margin-top:3rem;padding:2rem;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy));
  color:var(--parchment);
  border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--yellow-soft);
  display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.sl-upgrade h3{font-family:var(--serif);font-size:1.5rem;font-weight:800;color:var(--parchment);margin-bottom:.25rem}
.sl-upgrade p{font-size:.95rem;color:var(--parchment);opacity:.85;margin:0;max-width:480px}

/* ============ UTILITIES ============ */
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.mt-4{margin-top:2rem}
.mt-5{margin-top:3rem}