:root {
  --bg: #ffffff;
  --ink: #2b2b2b;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
}
html {
  scroll-behavior: smooth;
}
/* ========== Header ========== */
.site-header{
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* ========== Nav base ========== */
.nav{
  position: relative;               /* zbog absolutnog menija na mobu */
  max-width:1200px; margin:0 auto;
  padding:12px 20px;
  display:flex; justify-content:space-between; align-items:center;
}

.nav__logo img{ height:60px; width:auto; display:block; }

/* Lista (desktop default) */
.nav__list{
  list-style:none; display:flex; align-items:center; gap:24px;
}
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

.menu-toggle .bar {
  height: 4px;
  width: 100%;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-toggle.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.open .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}
@media (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    gap: 10px;
  }

  .nav-left,
  .nav-right {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
    gap: 10px;
  }

  .nav-left.active,
  .nav-right.active {
    display: flex;
  }

  .menu-toggle {
    display: flex;
    position: absolute;
    right: 20px;
  }

  .nav-logo {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    order: -1;
  }

  .nav-logo img {
    height: 40px;
  }
}


.nav__list a{
  text-decoration:none;
  color: var(--ink, #111);
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
  transition: background .2s ease, color .2s ease;
}
.nav__list a:hover{ background: rgba(0,0,0,.06); }

/* Hamburger */
.nav__toggle{
  display:none;                      /* desktop default */
  background:transparent; border:none; cursor:pointer;
  padding:8px; margin-left:8px;
  position:relative; z-index:1100;   /* iznad menija */
}
.nav__bar{
  display:block; width:26px; height:3px; margin:5px 0;
  border-radius:2px; background: var(--ink, #111);
  transition: transform .25s ease, opacity .2s ease;
}

/* X animacija */
.nav.nav--open .nav__bar:nth-child(2){ opacity:0; }
.nav.nav--open .nav__bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav.nav--open .nav__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ========== Mobile styles ========== */
@media (max-width: 768px){
  .nav__toggle{ display:block; }

  /* Panel meni – kompaktan, lijep */
  .nav__list{
    position:absolute; top:100%; right:12px; /* poravnaj na desni rub hamburgera */
    display:none;                              /* zatvoren default */
    flex-direction:column; align-items:stretch;
    gap:8px;
    padding:14px;
    min-width: 220px; max-width: 90vw;
    background: rgba(20,20,20,.92);
    color:#fff;
    border-radius:12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index:1000;

    /* animacija pojavljenja */
    opacity:0; transform: translateY(-8px) scale(.98);
    transition: opacity .25s ease, transform .25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .nav.nav--open .nav__list{
    display:flex;
    opacity:1; transform: translateY(0) scale(1);
  }

  .nav__list a{
    color:#fff;
    padding:10px 12px;
    border-radius:10px;
  }
  .nav__list a:hover{
    background: rgba(255,145,0,.18); /* narančasti highlight */
    color:#ff9100;
  }
}

/* ========== Desktop osiguranje ========== */
@media (min-width: 769px){
  .nav__list{ display:flex !important; position:static; opacity:1; transform:none; box-shadow:none; background:transparent; padding:0; gap:24px; }
}

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
}

/* Pozadina */
.hero-bg {
  position: absolute; inset: 0;
  background: url('pics/heroslika.jpg') center/cover no-repeat;
  transform: scale(1.12);
  opacity: 1;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.38);
}

/* Krivudava linija */
.hero-line {
  position: absolute;
  left: 5vw;
  top: 12vh;
  height: 70%;
  width: auto;
  z-index: 1;
}
.hero-line path {
  stroke: #f4b183;
  stroke-width: 4;
  fill: none;
  opacity: .9;
}

/* Sidebar info */
.hero-side {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  display: flex;
  gap: 48px;
  z-index: 2;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: .9rem;
}
.hero-side .side-link {
  color: #fff;
  text-decoration: none;
}
.hero-side .side-link:hover {
  text-decoration: underline;
}

/* Tekst */
.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 760px;
  padding: 0 24px;
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.05;
  margin-bottom: 20px;
}
.hero p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 30px;
}
.hero-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-primary, .btn-secondary {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
}
.btn-primary {
  background: #f36f45;
  color: #1f1f1f;
}
.btn-secondary {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

/* Animacije */
@keyframes heroZoom { to { transform: scale(1); } }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-animate] { opacity: 0; transform: translateY(10px); }
.hero.is-ready .hero-bg { animation: heroZoom 1.2s ease-out forwards; }
.hero.is-ready [data-animate] {
  animation: fadeUp .7s ease-out forwards;
  animation-delay: var(--delay,.5s);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero-side, .hero-line { display: none; }
}


/* Sekcija - tamna tema *//* ===== O NAMA (tamna sekcija) — ČISTO I RESPONSIVE ===== */
.about-dark{
  --bg:#0e0f12; --card:#121318; --muted:#b8bcc7; --accent:#f36f45;
  --title:#fff; --text:#e9eaee; --radius:18px;
  --ff-head:"Poppins", ui-sans-serif, system-ui, sans-serif;
  --ff-body:"Inter", ui-sans-serif, system-ui, sans-serif;

  width:100%;
  padding:90px 20px;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 0%, #1a1b20 0%, transparent 60%),
    radial-gradient(1000px 500px at 90% 100%, #1a1b20 0%, transparent 60%),
    var(--bg);
}
.about-dark .about-header{
  text-align:center; max-width:900px; margin:0 auto 54px;
}
.about-dark .about-header h2{
  font-family:var(--ff-head); color:var(--title);
  font-size:clamp(2rem,1.2rem + 2.2vw,3rem); margin:0 0 10px;
}
.about-dark .about-header p{ color:var(--muted); }

/* ===== Centralni timeline (grid 1fr | os | 1fr) ===== */
.timeline-center{
  max-width:1250px; margin:0 auto; position:relative;
  display:grid; gap:56px;
}
.timeline-center::before{
  content:""; position:absolute; inset:0;
  width:3px; margin:0 auto;
  background:linear-gradient(#2a2c33,#444);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}

/* Item: 3 kolone desktop (kartica | godina | kartica) */
.tl-item{
  display:grid; grid-template-columns:1fr 80px 1fr; align-items:center;
  position:relative;
}

/* Godina */
.tl-year{
  grid-column:2; justify-self:center;
  background:var(--bg); color:#fff; border:2px solid var(--accent);
  width:70px; height:70px; display:grid; place-items:center;
  border-radius:50%; font-weight:900; letter-spacing:.3px;
  box-shadow:0 10px 28px rgba(243,111,69,.25);
  z-index:1;
}

/* Kartica */
.tl-card{
  background:linear-gradient( to bottom right, rgba(255,255,255,.06), rgba(255,255,255,.02) );
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  padding:22px; max-width:560px;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position:relative;
}
.tl-card:hover{ transform:translateY(-6px); box-shadow:0 28px 60px rgba(0,0,0,.45); border-color:rgba(255,255,255,.16); }
.tl-card h3{ margin:0 0 10px; font-family:var(--ff-head); color:#fff; font-size:1.28rem; }
.tl-card p{ margin:0 0 14px; color:var(--muted); font-family:var(--ff-body); line-height:1.6; }

/* Slike: responzivno, stabilan omjer */
.tl-card img{
  width:100%; aspect-ratio: 16 / 9; height:auto;
  object-fit:cover; border-radius:14px;
}

/* Poravnanje strane */
.tl-left{  grid-column:1; justify-self:end;   text-align:left; }
.tl-right{ grid-column:3; justify-self:start; text-align:left; }

/* Suptilni naglasak rubova kartice */
.tl-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, rgba(243,111,69,.35), transparent 40%, rgba(243,111,69,.25));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding:1px;
  border-radius:inherit;
}

/* Dekor i glow */
.about-dark.decor{ position:relative; overflow:clip; }
.about-dark.decor .bg-glow{ position:absolute; inset:0; pointer-events:none; }
.about-dark.decor .bg-glow::before,
.about-dark.decor .bg-glow::after{
  content:""; position:absolute; width:720px; height:720px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(243,111,69,.10), transparent 70%);
  filter: blur(4px);
}
.about-dark.decor .bg-glow::before{ left:-260px; top:160px; }
.about-dark.decor .bg-glow::after{ right:-260px; bottom:120px; }

/* JS reveal fallback */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(16px) scale(.98); }
.js .reveal.is-visible{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

/* ===== Responsive ===== */
/* Tablet */
@media (max-width: 900px){
  .tl-item{ grid-template-columns: 1fr 70px 1fr; gap:18px; }
  .tl-card{ max-width:520px; }
  .tl-year{ width:62px; height:62px; font-size:.95rem; }
}

/* Mobitel: 2 kolone (godina | kartica) — sve ide u 1 stupac sadržaja */
@media (max-width: 720px){
  .timeline-center{ gap:36px; padding-inline: 6px; }
  .timeline-center::before{ left:20px; right:auto; margin:0; } /* os lijevo */
  .tl-item{ grid-template-columns: 70px 1fr; gap:14px; }
  .tl-year{ grid-column:1; justify-self:start; width:56px; height:56px; font-size:.9rem; }
  .tl-left,.tl-right{ grid-column:2; justify-self:stretch; }
  .tl-card{ max-width:unset; padding:18px; }
  .tl-card img{ aspect-ratio: 4 / 3; } /* mrvu viši kadring na mobu */
}

/* Sitni mobiteli */
@media (max-width: 480px){
  .about-dark{ padding:70px 16px; }
  .about-dark .about-header{ margin-bottom:38px; }
  .tl-item{ grid-template-columns: 56px 1fr; gap:12px; }
  .tl-year{ width:50px; height:50px; font-size:.85rem; }
  .tl-card{ padding:16px; border-radius:14px; }
  .tl-card h3{ font-size:1.1rem; }
  .tl-card img{ aspect-ratio: 1.6 / 1; border-radius:12px; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal,.tl-card{ transition:none !important; transform:none !important; }
}
/* === O NAMA: anti-overflow patch (drop-in) === */
#o-nama, #o-nama * { box-sizing: border-box; }

/* Grid i djeca smiju se stisnuti (bez min-content širenja) */
#o-nama .timeline-center,
#o-nama .tl-item,
#o-nama .tl-item > *,
#o-nama .tl-card { min-width: 0; }

/* Dugačke riječi/dupli razmaci neće gurati layout */
#o-nama .tl-card h3,
#o-nama .tl-card p { overflow-wrap: anywhere; hyphens: auto; }

/* Slike neka nikad ne “pobjegnu” */
#o-nama .tl-card img { display:block; max-width:100%; height:auto; }

/* Glow dekor ponekad izazove scroll na starijim Safari-ima → sakrij X overflow */
#o-nama.about-dark.decor { overflow-x: hidden; }
@supports (overflow: clip) {
  #o-nama.about-dark.decor { overflow: clip; } /* koristi clip gdje je podržano */
}

/* Os (vertikalna linija) – sigurnije pozicioniranje na mobitelu */
@media (max-width: 720px){
  #o-nama .timeline-center { padding-inline: 0; }
  #o-nama .timeline-center::before { left: 12px; right: auto; margin: 0; width: 3px; }
  #o-nama .tl-item { grid-template-columns: 56px 1fr; gap: 12px; }
  #o-nama .tl-year { width: 52px; height: 52px; font-size: .85rem; }
  #o-nama .tl-card { padding: 16px; border-radius: 14px; }
}

/* Sitni uređaji: još mrvu kompaktnije */
@media (max-width: 480px){
  #o-nama { padding: 70px 14px; }
  #o-nama .about-header { margin-bottom: 36px; }
  #o-nama .tl-card h3 { font-size: 1.06rem; }
}


/* ========== Naša ponuda ========== */
/* Boje: pozadina #0f0f10, tekst #ddd, naglasak #f36f45 */

.values-section{
  background:#101113;
  color:#e8e8e8;
  padding:80px 20px;
  position:relative;
}

.values-section .section-header{
  max-width:900px; margin:0 auto 40px; text-align:center;
}
.values-section h2{
  font-size:clamp(2rem,1.6rem + 1.6vw,2.7rem);
  margin-bottom:.4rem;
}
.values-section .section-lead{
  color:#bdbdbd; max-width:60ch; margin:0 auto;
}

/* GRID */
.values-icons{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:40px 30px;
  text-align:center;
}

/* Feature blok */
.v-feature{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.v-feature h3{
  margin:10px 0 4px;
  font-size:1.2rem;
  color:#fff;
}
.v-feature p{
  margin:0 0 8px;
  color:#cfcfcf;
  line-height:1.5;
}
.v-feature ul{
  margin:0; padding-left:18px;
  color:#bfbfbf;
  text-align:left;
}
.v-feature li{ margin:.3rem 0; }

/* Krug / broj */
.v-circle{
  width:70px; height:70px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,rgba(255,128,79,.25),rgba(255,128,79,.12));
  border:2px solid rgba(255,128,79,.6);
  box-shadow:0 0 20px rgba(255,128,79,.2);
  font-weight:700;
  color:#ff804f;
  font-size:1.2rem;
  transition:.3s ease;
}
.v-feature:hover .v-circle{
  background:linear-gradient(145deg,rgba(255,128,79,.35),rgba(255,128,79,.18));
  transform:scale(1.05);
  box-shadow:0 0 30px rgba(255,128,79,.4);
}

/* Responsive */
@media (max-width:600px){
  .values-icons{ gap:30px 20px; }
  .v-circle{ width:60px; height:60px; font-size:1rem; }
}



/* ========== Istaknuto danas ========== */
.today-strip{
  background:#0f0f10; color:#eaeaea; padding:60px 20px; border-top:1px solid rgba(255,255,255,.06);
}
.today-head{ max-width:1200px; margin:0 auto 14px; display:flex; gap:16px; align-items:end; justify-content:space-between; flex-wrap:wrap; }
.today-head h2{ font-size:clamp(1.8rem,1.3rem + 1.6vw,2.4rem); margin:0; }
.today-head .muted{ color:#bdbdbd; margin:0; }
.today-timer{ display:flex; align-items:center; gap:8px; font-weight:700; }
.today-timer .dot{ width:8px; height:8px; border-radius:999px; background:#f36f45; display:inline-block; box-shadow:0 0 18px rgba(243,111,69,.7); }
.today-timer .label{ color:#dcdcdc; opacity:.9; }
.today-timer .time{ color:#fff; letter-spacing:.5px; }

.today-grid{
  max-width:1200px; margin:14px auto 0;
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.today-card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.today-card:hover{ transform:translateY(-4px); box-shadow:0 12px 36px rgba(243,111,69,.18); border-color:rgba(243,111,69,.28); }
.today-card img{ width:100%; aspect-ratio: 5 / 3; object-fit:cover; display:block; }
.tc-body{ padding:12px 14px 8px; }
.tc-body h3{ margin:0 0 6px; color:#fff; font-size:1.05rem; }
.tc-body p{ margin:0; color:#bdbdbd; }
.tc-meta{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px 14px; }
.badge{ font-size:.78rem; font-weight:800; padding:6px 10px; border-radius:999px; background:rgba(243,111,69,.9); color:#0f0f10; }
.badge.alt{ background:rgba(255,255,255,.86); color:#111; }
.price{ color:#fff; font-weight:800; letter-spacing:.2px; }

/* ========== Proces pečenja (sticky) ========== */
.process-section{ background:#101113; color:#e8e8e8; padding:80px 20px; }
.process-wrap{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.process-sticky{ position:sticky; top:80px; height:70vh; border-radius:18px; overflow:hidden; background:#0f0f10; border:1px solid rgba(255,255,255,.08); }
.process-sticky .ps-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02);
  transition:opacity .5s ease, transform .6s ease;
}
.process-sticky .ps-img.active{ opacity:1; transform:scale(1.0); }

.process-steps{ display:flex; flex-direction:column; gap:48px; }
.p-step{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px 18px 16px; }
.p-kicker{ font-weight:900; font-size:.85rem; letter-spacing:.6px; color:#f36f45; }
.p-step h3{ margin:.25rem 0 .35rem; color:#fff; }
.p-step p{ margin:0 0 .5rem; color:#cfcfcf; }
.p-step ul{ margin:0; padding-left:18px; color:#bdbdbd; }
.p-step li{ margin:.28rem 0; }

@media (max-width: 900px){
  .process-wrap{ grid-template-columns: 1fr; }
  .process-sticky{ order:2; height:50vh; top:64px; }
  .process-steps{ order:1; }
}

/* ========== Lokacija & radno vrijeme ========== */
.loc-section{ background:#0f0f10; color:#eaeaea; padding:80px 20px; }
.loc-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns: .8fr 1.2fr; gap:24px; align-items:start; }
.loc-map iframe{ width:100%; height:420px; border:0; border-radius:16px; }
.loc-info h2{ font-size:clamp(1.8rem,1.3rem + 1.6vw,2.4rem); margin:0 0 .4rem; }
.loc-info .muted{ color:#bdbdbd; margin:0 0 1rem; }
.hours{ display:grid; gap:8px; margin:14px 0 16px; }
.h-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:12px; background:linear-gradient(90deg, rgba(243,111,69,.12), rgba(255,255,255,.02)); border:1px solid rgba(243,111,69,.22); }
.h-day{ font-weight:700; color:#fff; }
.h-time{ color:#eaeaea; }
.loc-contacts{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.chip{ display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14); color:#ddd; text-decoration:none; }
.chip:hover{ border-color:rgba(255,255,255,.28); }
.btn-outline{ display:inline-block; padding:10px 16px; border-radius:999px; border:1px solid rgba(243,111,69,.55); color:#fff; text-decoration:none; }
.btn-outline:hover{ background:rgba(243,111,69,.18); }

@media (max-width: 900px){
  .loc-grid{ grid-template-columns: 1fr; }
  .loc-map iframe{ height:340px; }
}

/* sitne util klase */
.muted{ color:#bdbdbd; }


/* ========== Pozdrav od tima ========== */
.hello-section{
  background:#0f0f10; color:#eaeaea; padding:72px 20px; border-top:1px solid rgba(255,255,255,.06);
}
.hello-wrap{
  max-width:980px; margin:0 auto; display:flex; gap:18px; align-items:center; justify-content:center;
  text-align:center; flex-wrap:wrap;
}
.hello-avatar .bubble{
  width:68px; height:68px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(243,111,69,.9), rgba(243,111,69,.25));
  box-shadow:0 10px 30px rgba(243,111,69,.25), inset 0 0 30px rgba(243,111,69,.25);
  border:1px solid rgba(243,111,69,.5);
  margin:0 auto 8px;
}
.hello-copy h2{ margin:.2rem 0 .4rem; font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem); color:#fff; }
.hello-copy p{ margin:0 0 .35rem; color:#cfcfcf; }
.hello-copy .sign{ color:#f2f2f2; font-weight:700; }

/* ========== Footer ========== */
.site-footer{
  background:#0e0f10; color:#cfcfcf; padding:48px 20px 18px; border-top:1px solid rgba(255,255,255,.06);
}
.footer-grid{
  max-width:1200px; margin:0 auto 18px;
  display:grid; gap:22px;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
}
.logo{
  font-weight:900; font-size:1.2rem; color:#fff; text-decoration:none;
}
.tagline{ margin:.25rem 0 1rem; color:#bdbdbd; }
.socials{ display:flex; gap:8px; }
.sbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); color:#eaeaea; text-decoration:none;
}
.sbtn:hover{ border-color:rgba(243,111,69,.55); }

.f-nav h3, .f-hours h3, .f-contact h3{ color:#fff; margin:0 0 .4rem; font-size:1rem; }
.f-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.f-nav a{ color:#cfcfcf; text-decoration:none; }
.f-nav a:hover{ color:#fff; }

.hours-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.hours-list li{ display:flex; justify-content:space-between; gap:12px; }
.f-contact a{ color:#eaeaea; text-decoration:none; }
.f-contact a:hover{ text-decoration:underline; }

.btn-outline.small{ padding:8px 12px; font-size:.9rem; border-radius:999px; border:1px solid rgba(243,111,69,.55); color:#fff; text-decoration:none; display:inline-block; margin-top:.4rem; }
.btn-outline.small:hover{ background:rgba(243,111,69,.18); }

.footer-bottom{
  max-width:1200px; margin:0 auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.footer-bottom p{ margin:0; color:#a9a9a9; font-size:.95rem; }
.to-top{ color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.18); border-radius:999px; width:32px; height:32px; display:grid; place-items:center; }
.to-top:hover{ border-color:rgba(243,111,69,.55); }

@media (max-width: 520px){
  /* sakrij Navigaciju i Radno vrijeme */
  .f-nav,
  .f-hours {
    display: none !important;
  }

  /* centriraj ostatak footera */
  .footer-grid{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .f-brand,
  .f-contact {
    text-align: center;
  }
  .socials{
    justify-content: center;
  }

  .f-contact a{
    display: block;
  }

  /* donji dio isto centriraj */
  .footer-bottom{
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap:6px;
  }
}

.footer-bottom{
  max-width:1200px; margin:0 auto; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}

.footer-right{
  display:flex; align-items:center; gap:10px;
}

.madeby{
  font-size:.9rem; color:#aaa;
}
.madeby a{
  color:#f36f45; font-weight:700; text-decoration:none;
  transition:color .2s;
}
.madeby a:hover{
  color:#fff;
}



/* ========== Kontakt sekcija (bez “Nađite nas”) ========== */
.contact-section{
  background:#0f0f10; color:#eaeaea; padding:80px 20px;
}
.contact-grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:32px;
}

/* Forma */
.contact-form h2{ margin:0 0 .4rem; font-size:1.9rem; color:#fff; }
.contact-form .lead{ color:#bdbdbd; margin:0 0 1rem; }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.form-group{ display:flex; flex-direction:column; margin-bottom:14px; }
.form-group label{ font-weight:600; margin-bottom:6px; }
.form-group input,
.form-group select,
.form-group textarea{
  padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background:#18191b; color:#fff; font-size:1rem;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none; border-color:#f36f45; box-shadow:0 0 0 2px rgba(243,111,69,.3);
}
.form-check{ display:flex; gap:8px; align-items:flex-start; margin:8px 0 16px; font-size:.95rem; color:#ccc; }
.form-check input{ margin-top:3px; }

.btn-full{
  display:inline-block; width:100%; text-align:center;
  padding:12px 16px; border-radius:10px;
  background:#f36f45; color:#111; font-weight:700; border:none; cursor:pointer;
  transition:filter .2s ease, transform .2s ease;
}
.btn-full:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.form-note{ color:#bdbdbd; font-size:.9rem; margin:.6rem 0 0; }

/* Aside / korisne info */
.contact-aside{ display:flex; flex-direction:column; gap:16px; }
.aside-block{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:16px;
}
.aside-block h3{ margin:.1rem 0 .5rem; color:#fff; font-size:1.1rem; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(243,111,69,.4); color:#fff; text-decoration:none;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.chip:hover{ background:rgba(243,111,69,.18); transform:translateY(-1px); box-shadow:0 10px 26px rgba(243,111,69,.2); }
.muted{ color:#bdbdbd; margin:.4rem 0 0; }

.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.checklist li{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:linear-gradient(90deg, rgba(243,111,69,.10), rgba(255,255,255,.02));
  border:1px solid rgba(243,111,69,.22);
  color:#dcdcdc;
}
.checklist li span{ font-size:1rem; }

.kpi{
  display:flex; gap:12px; flex-wrap:wrap;
}
.kpi-badge{
  flex:1 1 160px;
  background:radial-gradient(300px 100px at 100% 0%, rgba(243,111,69,.12), transparent 50%),
             linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06); border-radius:14px;
  padding:14px; text-align:center;
}
.kpi-value{ font-size:1.4rem; font-weight:900; color:#fff; line-height:1; }
.kpi-label{ color:#bdbdbd; font-size:.9rem; margin-top:6px; }

.aside-block.note p{ color:#cfcfcf; margin:0; }

/* Responsive */
@media (max-width: 980px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}
/* === CONTACT: mobile overflow fix (drop-in) === */

/* 1) Koristi border-box unutar sekcije da 100% uključuje padding/border */
#kontakt, #kontakt * { box-sizing: border-box; }

/* 2) Grid itemi smiju stisnuti sadržaj (sprječava horizontalni scroll) */
#kontakt .contact-grid > * { min-width: 0; }

/* 3) Form kontrole zauzimaju kolonu bez probijanja */
#kontakt .form-group input,
#kontakt .form-group select,
#kontakt .form-group textarea {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* iOS/Safari ponekad širi file input zbog naziva datoteke */
#kontakt input[type="file"] { max-width: 100%; }

/* Gumb 100% bez preljeva */
#kontakt .btn-full { width: 100%; }

/* Dugačke riječi/napomene neće gurati layout */
#kontakt .lead,
#kontakt .form-note,
#kontakt label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) Tjuniranje razmaka na manjim širinama */
@media (max-width: 980px){
  #kontakt.contact-section { padding: 56px 16px; }         /* manji bočni padding */
  #kontakt .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  #kontakt .form-row { grid-template-columns: 1fr; gap: 12px; }
}

/* Dodatni micro-tune za veoma uske ekrane */
@media (max-width: 420px){
  #kontakt .contact-form h2 { font-size: 1.6rem; }
  #kontakt .kpi { gap: 8px; }
  #kontakt .kpi-badge { flex: 1 1 130px; padding: 12px; }
}

/* Ako je browser podržava, izreži X-scroll bez da sakriješ Y */
@supports (overflow: clip){
  #kontakt { overflow-x: clip; }
}



/* ========== Stats Banner ========== */
.stats-banner{
  background:linear-gradient(90deg, #f36f45, #ff9c5a);
  color:#111;
  padding:60px 20px;
}
.stats-grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap:20px; text-align:center;
}
.stat-value{
  font-size:2.4rem; font-weight:900;
  line-height:1.1; margin-bottom:6px;
}
.stat-label{
  font-size:1.05rem; font-weight:600;
  opacity:.85;
}



.process-sticky { position: sticky; top: 80px; overflow: hidden; }
.process-sticky .ps-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.02);
  transition: opacity .8s ease, transform .8s ease;
}
.process-sticky .ps-img.active{
  opacity:1; transform:scale(1);
}




/* Tema (mapiraj na postojeće varijable ako ih imaš) */
:root {
  --bg: #0f0f11;
  --card: #17171a;
  --text: #ececec;
  --muted: #b6b6b6;
  --accent: #ff7a29;     /* narančasta */
  --accent-2: #ffa45f;   /* svjetlija narančasta */
  --stroke: #26262b;
  --chip: #1f1f24;
}

/* Sekcija */
.offer-section {
  position: relative;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(255,122,41,.12), transparent 60%),
    radial-gradient(900px 400px at 100% 10%, rgba(255,164,95,.10), transparent 60%),
    var(--bg);
  padding: clamp(64px, 8vw, 100px) 20px;
  color: var(--text);
  overflow: hidden;
}

.offer-section::after {
  content: "";
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 140px;
  background: linear-gradient(90deg, transparent, rgba(255,122,41,.18), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.section-header {
  max-width: 900px;
  margin: 0 auto 36px;
  text-align: center;
}
.section-header h2 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
  letter-spacing: .5px;
}
.section-lead {
  color: var(--muted);
  margin-top: 10px;
}

/* GRID 2x2 responsivni */
.offer-grid.categories {
  --min: 280px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* fiksno 2 kolone */
  gap: clamp(18px, 2.2vw, 28px);
  max-width: 1150px;
  margin: 36px auto 0;
}

/* Kartica */
.offer-cat {
  position: relative;
  background: linear-gradient(180deg, #1a1a1f 0%, #141418 100%);
  border-radius: 18px;
  padding: 22px 22px 18px;
  isolation: isolate;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.03) inset,
    0 10px 30px rgba(0,0,0,.35);
  border: 1px solid var(--stroke);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}

/* “Glow” obrub */
.offer-cat::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,122,41,.55), rgba(255,164,95,.2) 40%, rgba(255,255,255,.06) 70%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .25;
  transition: opacity .3s;
  pointer-events: none;
}
.offer-cat:hover::before { opacity: .6; }
.offer-cat:hover { transform: translateY(-4px); }

/* Header unutar kartice */
.cat-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.cat-icon {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,122,41,.18), rgba(255,164,95,.10));
  color: var(--accent-2);
  border: 1px solid rgba(255,122,41,.25);
}
.offer-cat h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .3px;
}
.cat-badge {
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,122,41,.12);
  color: var(--accent);
  border: 1px solid rgba(255,122,41,.3);
}
.cat-badge.alt {
  background: rgba(255,164,95,.12);
  color: var(--accent-2);
  border-color: rgba(255,164,95,.3);
}

.cat-lead {
  color: var(--muted);
  margin: 6px 0 14px;
  line-height: 1.5;
}

/* Chips (umjesto liste) */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.cat-chips li {
  font-size: .92rem;
  padding: 8px 12px;
  background: var(--chip);
  color: #ddd;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  transition: border-color .25s, transform .25s;
  will-change: transform;
}
.cat-chips li:hover {
  border-color: rgba(255,122,41,.45);
  transform: translateY(-1px);
}

/* Footer CTA */
.cat-foot {
  display: flex;
  justify-content: flex-start;
}
.cat-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,122,41,.35);
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,122,41,.22), rgba(255,122,41,.12));
  transition: background .25s, transform .25s, border-color .25s;
}
.cat-cta::after {
  content: "→";
  font-weight: 700;
  transform: translateX(0);
  transition: transform .25s;
}
.cat-cta:hover {
  background: linear-gradient(180deg, rgba(255,122,41,.30), rgba(255,122,41,.18));
  border-color: rgba(255,122,41,.55);
}
.cat-cta:hover::after { transform: translateX(3px); }

/* Napomena ispod grida */
.offer-note {
  max-width: 980px;
  margin: 16px auto 0;
  color: var(--muted);
  text-align: center;
  opacity: .9;
  font-size: .9rem;
}

/* Sitne prilagodbe za manje ekrane */
@media (max-width: 420px) {
  .cat-head { grid-template-columns: auto 1fr; }
  .cat-badge { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
}
@media (max-width: 768px) {
  .offer-grid.categories {
    grid-template-columns: 1fr; /* jedan ispod drugog */
  }
}


/* ========== KB Catering – Feature Tiles ========== */
:root{
  --kb-bg:#0f1011;
  --kb-panel:#151619;
  --kb-panel-2:#121316;
  --kb-text:#ececec;
  --kb-sub:#b8b8b8;
  --kb-border:rgba(255,255,255,.08);
  --kb-accent:#ff804f;         /* narančasta */
  --kb-accent-ink:#111;
}

/* lokalni reset */
.kb-cat-section, .kb-cat-section *{ box-sizing:border-box; }

.kb-cat-section{
  background:var(--kb-bg);
  color:var(--kb-text);
  padding:80px 20px;
}

.kb-cat-header{
  max-width:920px; margin:0 auto 26px; text-align:center;
}
.kb-cat-title{
  margin:0 0 .4rem;
  font-size:clamp(2rem,1.4rem + 2vw,2.8rem);
}
.kb-cat-lead{ color:var(--kb-sub); max-width:62ch; margin:0 auto; }

/* GRID: čvrsto 2×2 (1 na <900px) */
.kb-cat-grid{
  max-width:1200px;
  margin:28px auto 8px;
  display:grid;
  gap:26px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

/* 1 kolona na jako uskim ekranima */
@media (max-width: 700px){
  .kb-cat-grid{
    grid-template-columns: 1fr;
  }
}

/* 2 kolone na srednjim ekranima */
@media (min-width: 701px) and (max-width: 1199px){
  .kb-cat-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 kolone na širokim ekranima */
@media (min-width: 1200px){
  .kb-cat-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== TILE kartica ===== */
.kb-cat-card{
  background:linear-gradient(180deg, var(--kb-panel), var(--kb-panel-2));
  border:1px solid var(--kb-border);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
.kb-cat-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(255,128,79,.12);
  border-color:rgba(255,128,79,.28);
}

/* tile layout */
.kb-cat-card--tile{
  display:grid;
  grid-template-rows:auto 1fr auto;   /* head / body / footer */
  padding:22px 22px 18px;
  row-gap:12px;
  position:relative;
}

/* ikona – kružić, u kutu */
.kb-cat-icon{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--kb-accent); color:var(--kb-accent-ink);
  box-shadow:0 8px 26px rgba(255,128,79,.25);
}
.kb-cat-card--tile .kb-cat-icon{ position:absolute; top:18px; left:18px; }
.kb-cat-svg{ fill:currentColor; }

/* content blok – pomaknut da ne ide pod ikonu */
.kb-cat-content{
  display:grid; gap:10px;
  margin-top:8px;
  padding-left:76px;          /* prostor za ikonu */
  min-width:0;
}
.kb-cat-h3{ margin:0; font-size:1.22rem; line-height:1.25; }
.kb-cat-p{ margin:0; color:var(--kb-sub); }

/* points – kompaktnije, jasnije */
.kb-cat-points{
  margin:0; padding-left:18px; color:#d6d6d6;
}
.kb-cat-points li{ margin:.22rem 0; }

/* CTA – manji, ne puni širinu */
.kb-cat-btn{
  justify-self:start;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:10px;
  background:var(--kb-accent);
  color:var(--kb-accent-ink);
  font-weight:800; text-decoration:none;
  transition:filter .18s ease, transform .18s ease;
}
.kb-cat-btn::after{ content:"→"; font-weight:700; transform:translateX(0); transition:transform .18s; }
.kb-cat-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.kb-cat-btn:hover::after{ transform:translateX(2px); }

/* mobilno – content ispod ikone bez lijevog paddinga */
@media (max-width:560px){
  .kb-cat-card--tile .kb-cat-icon{ position:relative; top:auto; left:auto; margin-bottom:8px; }
  .kb-cat-content{ padding-left:0; }
}
/* === GLOBAL BASE RESET (fix bijelih rubova) === */
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

/* Boja pozadine stranice (da rubovi nisu bijeli ni u flashu) */
body { background: #0f0f10; color: #eaeaea; }

/* Nikad ne probij slike/medije */
img, svg, video, iframe { display:block; max-width:100%; height:auto; }

/* Ukloni default ul margin/padding (npr. u navu/foot.) */
ul { margin: 0; padding-left: 0; }
.nav__list, .footer-grid ul, .hours-list { list-style: none; }

/* Sigurnosno: spriječi horizontalni scroll od dekoracija/100vw */
body { overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }

/* Map iframe širina 100% i na mobitelu visina manja */
.loc-section iframe { width: 100% !important; max-width: 100%; height: 340px; }

/* Hero/sekcije koje su možda rađene s 100vw → koristi 100% */
.hero, .site-header, .site-footer,
.about-dark, .offer-section, .today-strip,
.values-section, .stats-banner, .kb-cat-section,
.process-section, .loc-section, .hello-section, .contact-section {
  width: 100%;
}

/* Gridovi: dozvoli stiskanje sadržaja (min-width bug) */
.timeline-center, .tl-item, .tl-card,
.contact-grid > *, .offer-grid > *, .today-grid > *,
.values-icons > *, .kb-cat-grid > * {
  min-width: 0;
}