/* ============================================================================
   ROŠTILJIJADA — Design System v2
   Tema: kamen, vino, maslina — etno konak na putu ka Skadarskom jezeru.
   ============================================================================ */

:root{
  /* --- Boje --- */
  --stone:         #F1EADA;   /* topao kamen/lan — osnovna pozadina */
  --stone-dark:    #E4D9BF;   /* tamnija varijanta kamena */
  --linen:         #FBF7EE;   /* najsvjetlija, za kartice */
  --wine:          #6B1E23;   /* bordo — primarna akcentna boja */
  --wine-deep:     #4A1418;   /* dublji bordo za tamne površine */
  --wine-light:    #8C2A30;   /* hover stanja */
  --olive:         #5C6B47;   /* maslinasto zelena */
  --olive-deep:    #3F4A31;
  --walnut:        #3A2C22;   /* tamno drvo — tekst */
  --brass:         #A8823C;   /* mesing — linije, ornamenti */
  --brass-light:   #C9A25E;
  --taupe:         #8A7D68;   /* sekundarni tekst */

  /* --- Tipografija --- */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Mulish', sans-serif;
  --font-accent: 'Cormorant Garamond', serif; /* italic, za cijene i akcente */

  --radius: 2px;
  --shadow-lg: 0 30px 60px -24px rgba(58,44,34,.45);
  --shadow-sm: 0 10px 24px -12px rgba(58,44,34,.3);
  --shadow-glow: 0 8px 30px -6px rgba(107,30,35,.35);
  --ease: cubic-bezier(.19,1,.22,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --container: 1200px;
}

/* ============================================================================
   RESET
   ============================================================================ */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--walnut);
  background:var(--stone);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  animation:pageEnter .6s var(--ease-soft) both;
}
@keyframes pageEnter{
  from{ opacity:0; }
  to{ opacity:1; }
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--walnut); font-weight:600; }
p{ margin:0; line-height:1.75; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }

:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--wine); color:var(--linen); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.container{ max-width:var(--container); margin:0 auto; padding:0 1.6rem; }

/* ============================================================================
   EYEBROW / LABELS — sitan ornament umjesto linije
   ============================================================================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wine);
  margin-bottom:1rem;
}
.eyebrow::before{
  content:'◆';
  font-size:.55rem;
  color:var(--brass);
}
.eyebrow.center{ justify-content:center; }
.eyebrow.on-dark{ color:var(--brass-light); }

.section-head{ max-width:640px; margin-bottom:2.8rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem, 3.6vw, 2.9rem); line-height:1.15; font-weight:600; }
.section-head p{ margin-top:1rem; color:var(--taupe); font-size:1.05rem; }

/* ============================================================================
   FOLK DIVIDER — signature element
   Niz sitnih rombova, inspirisan tradicionalnim tkanjem.
   ============================================================================ */
.ember-divider{
  position:relative;
  height:14px;
  margin:0 auto;
  max-width:var(--container);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.ember-divider::before, .ember-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--brass);
  opacity:.5;
  max-width:420px;
}
.ember-divider span{
  width:9px; height:9px;
  background:var(--brass);
  transform:rotate(45deg);
  flex-shrink:0;
  animation:diamondPulse 3.2s ease-in-out infinite;
}
@keyframes diamondPulse{
  0%, 100%{ opacity:.7; transform:rotate(45deg) scale(1); }
  50%{ opacity:1; transform:rotate(45deg) scale(1.35); box-shadow:0 0 12px 2px rgba(168,130,60,.4); }
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.8rem;
  border-radius:var(--radius);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease-soft), border-color .3s var(--ease-soft), color .3s var(--ease-soft);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.28) 42%, rgba(255,255,255,.28) 46%, transparent 65%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
  z-index:-1;
  pointer-events:none;
}
.btn:hover::before{ transform:translateX(120%); }
.btn:active{ transform:scale(.96); }

.btn-ember{
  background:var(--wine);
  color:var(--linen);
}
.btn-ember:hover{ background:var(--wine-light); transform:translateY(-3px); box-shadow:var(--shadow-glow); }
.btn-ember:active{ transform:translateY(-1px) scale(.96); }

.btn-outline-dark{
  border-color:rgba(58,44,34,.35);
  color:var(--walnut);
}
.btn-outline-dark:hover{ border-color:var(--walnut); background:var(--walnut); color:var(--linen); transform:translateY(-3px); box-shadow:var(--shadow-sm); }

.btn-outline-light{
  border-color:rgba(251,247,238,.4);
  color:var(--linen);
}
.btn-outline-light:hover{ border-color:var(--linen); background:rgba(251,247,238,.12); transform:translateY(-3px); }

.btn-block{ width:100%; justify-content:center; }

/* ============================================================================
   HEADER / NAV
   ============================================================================ */
.top-strip{
  background:var(--wine-deep);
  color:var(--brass-light);
  font-family:var(--font-body);
  font-size:.74rem;
  letter-spacing:.02em;
}
.top-strip .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.55rem; padding-bottom:.55rem;
  gap:1rem; flex-wrap:wrap;
}
.top-strip .rating{ display:flex; align-items:center; gap:.5rem; color:var(--linen); }
.top-strip .rating .stars{ color:var(--brass-light); letter-spacing:1px; }
.top-strip .contacts{ display:flex; gap:1.4rem; align-items:center; }
.top-strip .contacts a:hover{ color:var(--brass-light); }

.lang-switch{ display:flex; align-items:center; gap:.4rem; font-weight:700; }
.lang-switch span{ opacity:.4; }
.lang-switch a{ opacity:.6; transition:opacity .25s var(--ease-soft), color .25s var(--ease-soft); letter-spacing:.04em; }
.lang-switch a:hover{ opacity:1; }
.lang-switch a.active{ opacity:1; color:var(--brass-light); text-decoration:underline; text-underline-offset:3px; }
.lang-switch-desktop{ padding-right:.9rem; margin-right:.2rem; border-right:1px solid rgba(58,44,34,.18); }
.lang-switch-desktop a{ color:var(--walnut); }
.lang-switch-desktop a.active{ color:var(--wine); }
.lang-switch-mobile{ margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid rgba(197,162,94,.18); font-size:1rem; }
.lang-switch-mobile a{ color:rgba(251,247,238,.7); }
.lang-switch-mobile a.active{ color:var(--brass-light); }

@media (max-width:960px){
  .lang-switch-desktop{ display:none; }
}

.navbar{
  position:sticky; top:0; z-index:100;
  background:var(--linen);
  border-bottom:3px double var(--brass);
  transition:background .4s var(--ease-soft), box-shadow .4s var(--ease-soft), padding .3s var(--ease-soft), border-color .4s var(--ease-soft);
}
.navbar.scrolled{
  background:rgba(251,247,238,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 12px 30px -18px rgba(58,44,34,.35);
  border-bottom-color:rgba(168,130,60,.6);
}
.navbar.scrolled .container{ padding-top:.75rem; padding-bottom:.75rem; }
.navbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1.1rem; padding-bottom:1.1rem;
  transition:padding .3s var(--ease-soft);
}
.brand{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:700;
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand .word{ letter-spacing:.01em; }
.brand .word em{ color:var(--wine); font-style:italic; }
.brand small{
  font-family:var(--font-body);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--taupe);
  margin-top:.3rem;
}
.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{
  font-size:.86rem; font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  position:relative;
  padding:.3rem 0;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:-3px;
  height:2px; background:var(--wine);
  transition:right .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color:var(--wine); }
.nav-cta{ display:flex; align-items:center; gap:.9rem; }
.brand{ transition:opacity .25s var(--ease-soft); }
.brand:hover{ opacity:.82; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; padding:.4rem;
  width:32px; height:32px;
  position:relative;
  z-index:101;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--walnut);
  transition:transform .3s var(--ease), opacity .2s var(--ease-soft), background .3s var(--ease-soft);
  transform-origin:center;
}
.nav-toggle.is-open span{ background:var(--linen); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none;
  position:fixed; inset:0; z-index:99;
  background:var(--wine-deep);
  padding:10rem 2rem 2.5rem;
  transform:translateY(-100%);
  transition:transform .35s var(--ease);
  overflow-y:auto;
}
.mobile-menu.open{ display:flex; flex-direction:column; transform:translateY(0); }
.mobile-menu a{
  color:var(--linen);
  font-family:var(--font-display);
  font-size:1.55rem;
  padding:1rem .2rem;
  border-bottom:1px solid rgba(197,162,94,.18);
  opacity:0;
  transform:translateX(-16px);
  transition:transform .25s var(--ease-soft), color .25s var(--ease-soft), padding-left .25s var(--ease-soft);
  display:flex;
  align-items:center;
  gap:.9rem;
}
.mobile-menu a i{ color:var(--brass-light); font-size:1rem; width:22px; text-align:center; flex-shrink:0; }
.mobile-menu.open a{ animation:mobileLinkIn .5s var(--ease) forwards; }
.mobile-menu.open a:nth-of-type(1){ animation-delay:.05s; }
.mobile-menu.open a:nth-of-type(2){ animation-delay:.1s; }
.mobile-menu.open a:nth-of-type(3){ animation-delay:.15s; }
.mobile-menu.open a:nth-of-type(4){ animation-delay:.2s; }
.mobile-menu.open a:nth-of-type(5){ animation-delay:.25s; }
.mobile-menu.open a:nth-of-type(6){ animation-delay:.3s; }
@keyframes mobileLinkIn{ to{ opacity:1; transform:none; } }
.mobile-menu a:hover{ color:var(--brass-light); padding-left:.6rem; }

.mobile-menu-close{
  position:absolute; top:1.5rem; right:1.5rem;
  width:40px; height:40px;
  border:1px solid rgba(197,162,94,.4);
  border-radius:50%;
  background:transparent;
  color:var(--linen);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  transition:background .25s var(--ease-soft), transform .25s var(--ease);
}
.mobile-menu-close:hover{ background:rgba(197,162,94,.15); transform:rotate(90deg); }

.mobile-menu .btn-ember{
  margin-top:1.6rem;
  border:1px solid var(--brass-light);
}
.mobile-menu-spacer{ flex:1; min-height:1.5rem; }

@media (max-width:960px){
  .nav-links, .nav-cta .btn-outline-dark{ display:none; }
  .nav-toggle{ display:flex; }
  .top-strip .contacts{ display:none; }
}

/* ============================================================================
   HERO
   ============================================================================ */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:flex-end;
  color:var(--linen);
  background:var(--wine-deep);
  overflow:hidden;
}
.hero::before, .hero::after{
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  z-index:1;
  pointer-events:none;
  opacity:.55;
  animation:driftGlow 16s ease-in-out infinite alternate;
}
.hero::before{
  width:420px; height:420px;
  background:radial-gradient(circle, rgba(201,162,94,.35), transparent 70%);
  top:-10%; right:-6%;
}
.hero::after{
  width:360px; height:360px;
  background:radial-gradient(circle, rgba(140,42,48,.4), transparent 70%);
  bottom:-14%; left:-8%;
  animation-delay:-8s;
}
@keyframes driftGlow{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(-30px,24px) scale(1.12); }
}
.hero-media{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:saturate(.85);
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(26,16,13,.92) 0%, rgba(26,16,13,.5) 48%, rgba(74,20,24,.25) 80%),
    linear-gradient(100deg, rgba(26,16,13,.6), transparent 60%);
}
.hero-content{ position:relative; z-index:2; padding-bottom:5.5rem; max-width:760px; }
.hero-content .eyebrow{ color:var(--brass-light); }
.hero-content .eyebrow::before{ color:var(--brass-light); }
.hero-content > *{ opacity:0; transform:translateY(22px); animation:heroIn .9s var(--ease) forwards; }
.hero-content .eyebrow{ animation-delay:.15s; }
.hero-content h1{ animation-delay:.3s; }
.hero-content .lead{ animation-delay:.48s; }
.hero-content .hero-actions{ animation-delay:.64s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }
.hero-content h1{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:clamp(3.2rem, 8vw, 6.4rem);
  line-height:.98;
  color:var(--linen);
}
.hero-content h1 span{ color:var(--brass-light); }
.hero-content .lead{
  margin-top:1.5rem;
  font-size:1.15rem;
  max-width:46ch;
  color:rgba(251,247,238,.82);
  font-family:var(--font-body);
}
.hero-actions{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }

.hero-info-bar{
  position:relative; z-index:2;
  background:rgba(26,16,13,.6);
  backdrop-filter:blur(6px);
  border-top:1px solid rgba(197,162,94,.35);
  margin-top:3rem;
}
.hero-info-bar .container{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.hero-info-item{
  padding:1.1rem 1.6rem;
  border-right:1px solid rgba(197,162,94,.2);
  display:flex; align-items:center; gap:.8rem;
  transition:background .3s var(--ease-soft);
}
.hero-info-item:hover{ background:rgba(255,255,255,.04); }
.hero-info-item:last-child{ border-right:none; }
.hero-info-item i{ color:var(--brass-light); font-size:1.05rem; transition:transform .3s var(--ease); }
.hero-info-item:hover i{ transform:scale(1.2); }
.hero-info-item .lbl{ font-family:var(--font-body); font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,247,238,.55); }
.hero-info-item .val{ font-size:.92rem; font-weight:700; }
.hero-info-item .val.open{ color:#B7CDA0; }
.hero-info-item .val.closed{ color:#E29A7D; }

@media (max-width:900px){
  .hero-info-bar .container{ grid-template-columns:repeat(2,1fr); }
  .hero-info-item{ border-right:none; border-bottom:1px solid rgba(197,162,94,.2); }
}

/* ============================================================================
   PAGE HERO (interne stranice)
   ============================================================================ */
.page-hero{
  background:var(--wine-deep);
  color:var(--linen);
  padding:9.5rem 0 3.5rem;
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:'';
  position:absolute;
  width:380px; height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,94,.28), transparent 70%);
  top:-20%; right:-8%;
  filter:blur(50px);
  animation:driftGlow 16s ease-in-out infinite alternate;
  pointer-events:none;
}
.breadcrumb, .page-hero h1, .page-hero p{ position:relative; z-index:1; opacity:0; transform:translateY(18px); animation:heroIn .8s var(--ease) forwards; }
.breadcrumb{ animation-delay:.1s; }
.page-hero h1{ animation-delay:.22s; }
.page-hero p{ animation-delay:.38s; }
.breadcrumb{ font-family:var(--font-body); font-size:.76rem; font-weight:600; color:rgba(251,247,238,.55); margin-bottom:1.3rem; display:flex; gap:.5rem; text-transform:uppercase; letter-spacing:.04em; }
.breadcrumb a{ transition:color .25s var(--ease-soft); }
.breadcrumb a:hover{ color:var(--brass-light); }
.page-hero h1{ font-size:clamp(2.6rem,5vw,3.8rem); color:var(--linen); font-style:italic; }
.page-hero p{ margin-top:1.1rem; max-width:56ch; color:rgba(251,247,238,.75); font-size:1.05rem; }

/* ============================================================================
   SECTIONS
   ============================================================================ */
.section{ padding:6.5rem 0; }
.section.tight{ padding:4rem 0; }
.band-parchment2{ background:var(--stone-dark); }
.band-dark{ background:var(--wine-deep); color:var(--linen); }
.band-dark .eyebrow{ color:var(--brass-light); }
.band-dark .eyebrow::before{ color:var(--brass-light); }
.band-dark h2{ color:var(--linen); }
.band-forest{ background:var(--olive-deep); color:var(--linen); }

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4.5rem;
  align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media .frame-main{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:8px solid var(--linen);
  outline:1px solid var(--brass);
  transition:box-shadow .4s var(--ease-soft);
}
.split-media .frame-main:hover{ box-shadow:0 40px 70px -20px rgba(58,44,34,.5); }
.split-media .frame-main img{ height:460px; object-fit:cover; width:100%; display:block; transition:transform .8s var(--ease); }
.split-media .frame-main:hover img{ transform:scale(1.06); }
.split-media .frame-float{
  position:absolute; bottom:-2.2rem; left:-2.6rem;
  width:46%;
  border:8px solid var(--linen);
  outline:1px solid var(--brass);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  animation:gentleFloat 5s ease-in-out infinite;
}
@keyframes gentleFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.split-media .frame-float img{ height:200px; object-fit:cover; }
.split-badge{
  position:absolute; top:1.6rem; right:-1.2rem;
  background:var(--wine);
  color:var(--linen);
  width:98px; height:98px;
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transform:rotate(6deg);
  border:2px solid var(--brass-light);
  transition:transform .4s var(--ease);
}
.split-badge:hover{ transform:rotate(0deg) scale(1.08); }
.split-badge .n{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; line-height:1; font-style:italic; }
.split-badge .t{ font-family:var(--font-body); font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; margin-top:.25rem; font-weight:700; }

.split-text h2{ font-size:clamp(2rem,3.4vw,2.7rem); margin-bottom:1.4rem; line-height:1.15; font-style:italic; }
.split-text p{ color:var(--taupe); margin-bottom:1.05rem; }
.split-text p:last-of-type{ margin-bottom:1.7rem; }
.split-text strong{ color:var(--walnut); }

@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:3.5rem; }
  .split.reverse .split-media{ order:0; }
  .split-media .frame-float{ display:none; }
}

/* ============================================================================
   FEATURE CARDS — sa ornamentalnim uglom
   ============================================================================ */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
.feature-card{
  background:var(--linen);
  border:1px solid rgba(58,44,34,.12);
  border-radius:var(--radius);
  padding:2.1rem 1.7rem;
  text-align:left;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease-soft);
  position:relative;
}
.feature-card::before{
  content:'';
  position:absolute; top:10px; left:10px; right:10px; bottom:10px;
  border:1px solid rgba(168,130,60,.35);
  pointer-events:none;
  transition:border-color .35s var(--ease-soft);
}
.feature-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.feature-card:hover::before{ border-color:rgba(168,130,60,.6); }
.feature-card .icon{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--olive);
  color:var(--linen);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  margin-bottom:1.3rem;
  transition:transform .45s var(--ease), background .35s var(--ease-soft);
}
.feature-card:hover .icon{ transform:scale(1.14) rotate(-6deg); background:var(--wine); }
.feature-card h3{ font-size:1.15rem; margin-bottom:.6rem; font-style:italic; }
.feature-card p{ color:var(--taupe); font-size:.92rem; }

@media (max-width:960px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }

/* ============================================================================
   MENU — stil pisanog jelovnika na papiru
   ============================================================================ */
.menu-tabs{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-bottom:3.2rem;
}
.menu-tab{
  padding:.6rem 1.4rem;
  border-radius:999px;
  border:1px solid rgba(58,44,34,.25);
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  background:transparent;
  color:var(--walnut);
  transition:border-color .3s var(--ease-soft), background .35s var(--ease-soft), color .35s var(--ease-soft), transform .25s var(--ease-soft);
}
.menu-tab:hover{ border-color:var(--wine); transform:translateY(-2px); }
.menu-tab:active{ transform:scale(.95); }
.menu-tab.active{ background:var(--wine); border-color:var(--wine); color:var(--linen); }

.menu-category{ margin-bottom:4.2rem; }
.menu-category-head{
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom:1.9rem;
  padding-bottom:1.1rem;
  border-bottom:3px double var(--brass);
}
.menu-category-head h3{ font-size:1.7rem; font-style:italic; }
.menu-category-head .count{ font-family:var(--font-body); font-size:.74rem; color:var(--taupe); text-transform:uppercase; letter-spacing:.04em; }

.menu-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 3.5rem; }
.menu-item{
  display:flex; align-items:baseline; gap:.6rem;
  padding:1.1rem .6rem;
  margin:0 -.6rem;
  border-bottom:1px dotted rgba(58,44,34,.3);
  border-radius:3px;
  transition:background .3s var(--ease-soft), padding-left .3s var(--ease-soft);
}
.menu-item:hover{ background:rgba(168,130,60,.08); padding-left:1rem; }
.menu-item .name{ font-weight:700; font-size:1.02rem; white-space:nowrap; }
.menu-item .name .tag{
  font-family:var(--font-body); font-size:.6rem; color:var(--wine); font-weight:700;
  border:1px solid var(--wine); border-radius:3px; padding:.05rem .4rem;
  margin-left:.5rem; vertical-align:middle; text-transform:uppercase;
}
.menu-item .leader{ flex:1; border-bottom:1px dotted rgba(58,44,34,.35); position:relative; top:-4px; }
.menu-item .price{ font-family:var(--font-accent); font-style:italic; font-weight:700; color:var(--wine); white-space:nowrap; font-size:1.15rem; transition:transform .3s var(--ease-soft); display:inline-block; }
.menu-item:hover .price{ transform:scale(1.12); }
.menu-item .desc{
  flex-basis:100%;
  font-size:.85rem; color:var(--taupe); margin-top:.2rem;
}

@media (max-width:760px){ .menu-list{ grid-template-columns:1fr; } }

.menu-note{
  margin-top:2rem;
  padding:1.5rem 1.7rem;
  background:var(--linen);
  border-left:3px solid var(--wine);
  font-size:.9rem;
  color:var(--walnut);
}

/* ============================================================================
   STATS STRIP
   ============================================================================ */
.stats-strip{ background:var(--olive-deep); color:var(--linen); padding:3.4rem 0; }
.stats-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); text-align:center; gap:1.5rem; }
.stats-strip .container > div{ transition:transform .35s var(--ease); }
.stats-strip .container > div:hover{ transform:translateY(-4px); }
.stat-num{ font-family:var(--font-display); font-style:italic; font-size:2.8rem; color:var(--brass-light); transition:text-shadow .35s var(--ease-soft); }
.stats-strip .container > div:hover .stat-num{ text-shadow:0 0 24px rgba(201,162,94,.6); }
.stat-lbl{ font-family:var(--font-body); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(251,247,238,.72); margin-top:.4rem; }
@media (max-width:760px){ .stats-strip .container{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================================
   GALLERY GRID
   ============================================================================ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:165px;
  gap:1rem;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(58,44,34,.12);
  transition:box-shadow .4s var(--ease-soft), border-color .4s var(--ease-soft);
}
.gallery-item:hover{ box-shadow:var(--shadow-lg); border-color:var(--brass); z-index:1; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s ease; filter:saturate(.9); }
.gallery-item:hover img{ transform:scale(1.1); filter:saturate(1.15); }
.gallery-item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(26,16,13,.55), transparent 45%);
  opacity:0;
  transition:opacity .35s var(--ease-soft);
  pointer-events:none;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-item .tag{
  position:absolute; left:.8rem; bottom:.8rem;
  font-family:var(--font-body); font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--linen);
  background:rgba(74,20,24,.75);
  padding:.35rem .65rem;
  border-radius:3px;
  opacity:0; transform:translateY(6px);
  transition:.35s var(--ease-soft);
  z-index:1;
}
.gallery-item:hover .tag{ opacity:1; transform:translateY(0); }
.gallery-item.big{ grid-column:span 2; grid-row:span 2; }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }

@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-item.big{ grid-column:span 2; grid-row:span 1; }
  .gallery-item.wide{ grid-column:span 2; }
}

/* ============================================================================
   TESTIMONIALS
   ============================================================================ */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.7rem; }
.testi-card{
  background:var(--linen);
  border-radius:var(--radius);
  padding:2.1rem;
  border:1px solid rgba(58,44,34,.12);
  position:relative;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.testi-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.testi-card::after{
  content:'"';
  position:absolute; top:.6rem; right:1.2rem;
  font-family:var(--font-display); font-size:3.5rem; font-style:italic;
  color:rgba(168,130,60,.25);
  line-height:1;
  transition:color .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.testi-card:hover::after{ color:rgba(107,30,35,.3); transform:scale(1.15); }
.testi-stars{ color:var(--brass); letter-spacing:2px; margin-bottom:1.1rem; font-size:.9rem; }
.testi-card .quote{ font-family:var(--font-display); font-style:italic; font-size:1.15rem; line-height:1.5; color:var(--walnut); }
.testi-person{ margin-top:1.4rem; display:flex; align-items:center; gap:.8rem; }
.testi-person .avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--olive); color:var(--linen);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-style:italic;
  transition:transform .4s var(--ease);
}
.testi-card:hover .avatar{ transform:scale(1.1) rotate(-8deg); }
.testi-person .name{ font-weight:700; font-size:.9rem; }
.testi-person .role{ font-size:.78rem; color:var(--taupe); }

@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }

/* --- Forma za slanje utiska --- */
.review-form-wrap{ text-align:center; margin-top:2.4rem; }
.review-form-box{
  max-width:520px; margin:1.6rem auto 0;
  background:var(--linen);
  border:1px solid rgba(58,44,34,.12);
  border-radius:var(--radius);
  padding:2rem;
  text-align:left;
  animation:heroIn .4s var(--ease);
}
.review-form-box h4{ font-family:var(--font-display); font-style:italic; font-size:1.3rem; margin-bottom:1.2rem; }
.review-form-box .form-field{ margin-bottom:1rem; }
.review-form-box .form-field label{ display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--taupe); margin-bottom:.4rem; }
.review-form-box .form-field input, .review-form-box .form-field textarea{
  width:100%; padding:.7rem .9rem; border:1px solid rgba(58,44,34,.22); border-radius:var(--radius);
  font-size:.9rem; background:var(--stone); color:var(--walnut); font-family:var(--font-body);
  transition:border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.review-form-box .form-field input:focus, .review-form-box .form-field textarea:focus{ outline:none; border-color:var(--wine); background:#fff; }
.star-picker{ display:flex; gap:.4rem; font-size:1.6rem; margin-bottom:.2rem; }
.star-picker i{ color:var(--brass); cursor:pointer; transition:transform .2s var(--ease); }
.star-picker i:hover{ transform:scale(1.15); }
.star-picker i.fa-solid{ color:var(--wine); }

/* ============================================================================
   LOCATION / HOURS
   ============================================================================ */
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table tr{ border-bottom:1px dotted rgba(58,44,34,.25); }
.hours-table tr:last-child{ border-bottom:none; }
.hours-table td{ padding:.9rem .2rem; font-size:.95rem; }
.hours-table td:first-child{ font-weight:700; }
.hours-table td:last-child{ text-align:right; font-family:var(--font-accent); font-style:italic; color:var(--taupe); font-size:1.05rem; }
.hours-table tr.today td{ color:var(--wine); }
.hours-table tr.today td:last-child{ color:var(--wine); font-weight:700; }

.contact-info-list{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-info-row{ display:flex; gap:1rem; align-items:flex-start; }
.contact-info-row .icon{
  width:46px; height:46px; flex-shrink:0;
  border-radius:50%; background:var(--olive); color:var(--linen);
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease), background .3s var(--ease-soft);
}
.contact-info-row:hover .icon{ transform:scale(1.1); background:var(--wine); }
.contact-info-row h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-body); color:var(--taupe); margin-bottom:.35rem; font-weight:700; }
.contact-info-row a, .contact-info-row p{ font-size:1.02rem; font-weight:600; color:var(--walnut); transition:color .25s var(--ease-soft); }
.contact-info-row a:hover{ color:var(--wine); }

.map-frame{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:8px solid var(--linen);
  outline:1px solid var(--brass);
  height:100%; min-height:340px;
  transition:box-shadow .4s var(--ease-soft);
}
.map-frame:hover{ box-shadow:var(--shadow-lg); }
.map-frame iframe{ width:100%; height:100%; border:0; min-height:340px; }

/* ============================================================================
   FORME
   ============================================================================ */
.form-card{
  background:var(--linen);
  border:1px solid rgba(58,44,34,.12);
  border-radius:var(--radius);
  padding:2.5rem;
  box-shadow:var(--shadow-sm);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-field{ margin-bottom:1.2rem; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ display:block; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; color:var(--taupe); }
.form-field input, .form-field select, .form-field textarea{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid rgba(58,44,34,.22);
  border-radius:var(--radius);
  font-size:.95rem;
  background:var(--stone);
  color:var(--walnut);
  transition:border-color .3s var(--ease-soft), background .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--wine); background:var(--linen);
  box-shadow:0 0 0 4px rgba(107,30,35,.12);
}
.form-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236B1E23' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.6rem;
  cursor:pointer;
}

/* --- Polje za datum sa prilagođenom ikonicom --- */
.date-field{ position:relative; }
.date-field input[type="date"]{ padding-right:2.8rem; cursor:pointer; }
.date-field input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; opacity:0; cursor:pointer;
}
.date-field i{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  color:var(--wine); font-size:1rem; pointer-events:none;
  transition:transform .3s var(--ease-soft);
}
.date-field:hover i, .date-field input:focus ~ i{ transform:translateY(-50%) scale(1.12); }
.form-field textarea{ min-height:120px; resize:vertical; }
.form-msg{ margin-top:1rem; font-size:.9rem; min-height:1.2rem; }
.form-msg.success{ color:var(--olive-deep); }
.form-msg.error{ color:var(--wine); }

@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

/* ============================================================================
   CTA BAND
   ============================================================================ */
.cta-band{
  background:var(--wine-deep);
  color:var(--linen);
  border-radius:4px;
  padding:3.6rem 3.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
  border:1px solid var(--brass);
  transition:box-shadow .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.cta-band:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.cta-band::before{
  content:'';
  position:absolute; right:-60px; top:-60px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(197,162,94,.2), transparent 70%);
  animation:driftGlow 14s ease-in-out infinite alternate;
}
.cta-band::after{
  content:'';
  position:absolute; left:-40px; bottom:-70px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(140,42,48,.3), transparent 70%);
  animation:driftGlow 14s ease-in-out infinite alternate-reverse;
}
.cta-band h3{ font-size:1.8rem; font-style:italic; color:var(--linen); max-width:26ch; position:relative; }
.cta-band-actions{ display:flex; gap:1rem; position:relative; flex-wrap:wrap; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer{ background:var(--wine-deep); color:rgba(251,247,238,.7); padding:5rem 0 0; }
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .75fr .85fr 1fr 1.25fr;
  gap:2rem;
  padding-bottom:3.5rem;
  border-bottom:1px solid rgba(197,162,94,.25);
}
.footer-brand .brand{ color:var(--linen); }
.footer-brand .brand small{ color:rgba(251,247,238,.5); }
.footer-brand p{ margin-top:1.2rem; font-size:.9rem; max-width:32ch; }
.footer-social{ display:flex; gap:.8rem; margin-top:1.4rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(197,162,94,.4);
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease), background .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.footer-social a:hover{ background:var(--brass); border-color:var(--brass); color:var(--wine-deep); transform:translateY(-4px) rotate(-8deg); }
.footer-col h4{ font-family:var(--font-body); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--brass-light); margin-bottom:1.4rem; font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:.85rem; }
.footer-col a{ font-size:.9rem; }
.footer-col a:hover{ color:var(--brass-light); }

.footer-newsletter p{ font-size:.85rem; line-height:1.55; color:rgba(251,247,238,.6); margin:0 0 1.1rem; }
.newsletter-input-group{
  display:flex;
  border:1px solid rgba(197,162,94,.4);
  border-radius:3px;
  overflow:hidden;
  transition:border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.newsletter-input-group:focus-within{ border-color:var(--brass-light); box-shadow:0 0 0 3px rgba(197,162,94,.15); }
.newsletter-input-group input{
  flex:1; min-width:0;
  background:rgba(251,247,238,.06);
  border:none;
  padding:.75rem .9rem;
  color:var(--linen);
  font-size:.88rem;
  font-family:var(--font-body);
}
.newsletter-input-group input::placeholder{ color:rgba(251,247,238,.4); }
.newsletter-input-group input:focus{ outline:none; background:rgba(251,247,238,.1); }
.newsletter-input-group button{
  flex-shrink:0;
  width:44px;
  background:var(--wine);
  color:var(--linen);
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease-soft);
}
.newsletter-input-group button:hover{ background:var(--brass); color:var(--wine-deep); }
.newsletter-msg{ margin-top:.6rem; min-height:1.2em; }
.newsletter-msg.success{ color:#8FBF8F; }
.newsletter-msg.error{ color:#E8A0A0; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.7rem 0; font-size:.78rem; color:rgba(251,247,238,.45); flex-wrap:wrap; gap:.6rem;
}

@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-newsletter{ grid-column:1 / -1; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============================================================================
   SCROLL REVEAL
   ============================================================================ */
.reveal{
  opacity:0;
  transform:translateY(18px) scale(.99);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:transform, opacity;
}
.reveal.is-visible{ opacity:1; transform:none; will-change:auto; }

/* Varijante — opciono, po potrebi */
.reveal-left{ opacity:0; transform:translateX(-32px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-left.is-visible{ opacity:1; transform:none; }
.reveal-right{ opacity:0; transform:translateX(32px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-right.is-visible{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform:scale(.9); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale.is-visible{ opacity:1; transform:none; }

/* ============================================================================
   BACK TO TOP
   ============================================================================ */
.back-to-top{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:80;
  width:46px; height:46px; border-radius:50%;
  background:var(--wine); color:var(--linen);
  border:2px solid var(--brass-light);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease-soft), visibility .3s, transform .35s var(--ease), box-shadow .35s var(--ease-soft);
  box-shadow:var(--shadow-sm);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ transform:translateY(-5px) scale(1.08); box-shadow:0 12px 28px -8px rgba(107,30,35,.55); }
.back-to-top:active{ transform:scale(.94); }

/* ============================================================================
   RESPONSIVE — opšte
   ============================================================================ */
@media (max-width:760px){
  .section{ padding:4.2rem 0; }
  .cta-band{ padding:2.6rem 1.8rem; flex-direction:column; align-items:flex-start; }
}

/* ============================================================================
   DUBINA — suptilna vinjeta na tamnim/akcentnim sekcijama (premium osjećaj)
   ============================================================================ */
.band-dark, .stats-strip, .page-hero, .hero{
  box-shadow: inset 0 0 120px 0 rgba(0,0,0,.18);
}

/* ============================================================================
   MOBILNI RASPORED — profinjenje na malim ekranima
   ============================================================================ */
@media (max-width:640px){
  .hero{ min-height:88vh; }
  .hero-content{ padding-bottom:3.5rem; }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; }
  .cta-band-actions .btn{ flex:1 1 auto; justify-content:center; }
  .split-badge{ display:none; }
  .testi-card::after{ font-size:2.6rem; }
  .page-hero{ padding:8rem 0 2.8rem; }
  .menu-category-head{ flex-wrap:wrap; gap:.4rem; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.4rem; }
}

@media (hover:none){
  /* Na dodirnim ekranima izbjegavamo hover-zavisne mikroanimacije koje se "zaglave" */
  .gallery-item .tag{ opacity:1; transform:none; }
  .split-media .frame-float{ animation:none; }
}