/* ==========================================================================
   PIATAKIA — Grčka muzička taverna
   Dizajn sistem izveden iz logotipa: egejsko plavo #0C4DA2, bela,
   žuta #FFDE00 i crvena #D4322C kao mrvice akcenta (krugovi iz znaka).
   ========================================================================== */

/* ------------------------------------------------------- fontovi (local) --
   Fraunces (display) + Inter Tight (body). Self-hostovano — sajt radi i bez
   interneta i ne zavisi od Google Fonts servera.                            */

/* Fraunces — latin */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin-full-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fraunces — latin-ext (č ć ž š đ) */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin-ext-full-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin-full-italic.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin-ext-full-italic.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Inter Tight — latin */
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Inter Tight — latin-ext */
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Inter Tight — grčki alfabet (imena jela) */
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-tight-greek-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
  font-family:"Inter Tight"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-tight-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* --- boje --- */
  --blue:        #0C4DA2;   /* logo plava — primarna */
  --blue-deep:   #062A55;   /* tamna navy — tekst, tamne sekcije */
  --blue-lift:   #1663C4;   /* hover */
  --sky:         #C9DEF5;   /* razblažena egejska */
  --sky-soft:    #E8F1FA;
  --wash:        #F6F4EF;   /* okrečeni zid */
  --wash-warm:   #EFEAE0;
  --white:       #FFFFFF;
  --ink:         #14202E;
  --ink-soft:    #4A5A6B;
  --sun:         #FFDE00;   /* žuta iz logoa */
  --terra:       #D4322C;   /* crvena iz logoa */
  --olive:       #1F8A4C;   /* zelena iz logoa */

  /* --- tipografija --- */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* fluidna skala */
  --fs-hero:  clamp(2.75rem, 9.5vw, 7.5rem);
  --fs-h2:    clamp(2rem, 5.2vw, 4rem);
  --fs-h3:    clamp(1.375rem, 2.4vw, 1.875rem);
  --fs-h4:    clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-lead:  clamp(1.0625rem, 1.7vw, 1.3125rem);
  --fs-body:  clamp(1rem, 1.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* --- prostor --- */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(4.5rem, 11vh, 9rem);
  --maxw: 1440px;

  --radius: 2px;
  --ring: 0 0 0 3px rgba(12,77,162,.28);
  --t-fast: .22s cubic-bezier(.4,0,.2,1);
  --t: .45s cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- reset --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--wash);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
img,video{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure,blockquote{ margin:0; }
::selection{ background:var(--sun); color:var(--blue-deep); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}
.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--blue); color:#fff; padding:.75rem 1.25rem; font-weight:600;
  transition:top var(--t-fast);
}
.skip-link:focus{ top:1rem; }

/* ------------------------------------------------------------- helpers --- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide{ max-width:1720px; }
.section{ padding-block:var(--section-y); position:relative; }
.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;
}

.display{ font-family:var(--display); font-weight:600; line-height:.98; letter-spacing:-.022em;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 100; }
.eyebrow{
  font-family:var(--body); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.5rem;
}
.eyebrow--light{ color:var(--sky); }
.eyebrow::before{
  content:""; width:.9rem; height:.9rem; flex:none; border-radius:50%;
  border:2.5px solid currentColor; box-shadow:inset 0 0 0 2.5px transparent;
  position:relative;
}
.eyebrow > span{ display:block; }

h2.display{ font-size:var(--fs-h2); }
h3.display{ font-size:var(--fs-h3); }
.lead{ font-size:var(--fs-lead); line-height:1.6; color:var(--ink-soft); max-width:52ch; }
.on-dark .lead{ color:rgba(255,255,255,.78); }
.greek{ font-family:var(--body); font-weight:500; letter-spacing:.02em; }

/* -------------------------------------------------------------- dugmad --- */
.btn{
  --btn-bg:var(--blue); --btn-fg:#fff; --btn-bd:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.85rem 1.6rem;
  background:var(--btn-bg); color:var(--btn-fg); border:2px solid var(--btn-bd);
  font-weight:600; font-size:.9375rem; letter-spacing:.02em;
  cursor:pointer; transition:background var(--t-fast), color var(--t-fast),
    border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover{ background:var(--blue-lift); border-color:var(--blue-lift); transform:translateY(-2px); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--blue); }
.btn--ghost:hover{ background:var(--blue); color:#fff; }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--blue); --btn-bd:#fff; }
.btn--light:hover{ background:var(--sun); border-color:var(--sun); color:var(--blue-deep); }
.btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.55); }
.btn--outline-light:hover{ background:#fff; color:var(--blue); border-color:#fff; }
.btn--sun{ --btn-bg:var(--sun); --btn-fg:var(--blue-deep); --btn-bd:var(--sun); }
.btn--sun:hover{ background:#fff; border-color:#fff; color:var(--blue); }

.link-under{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  color:var(--blue); padding-block:.35rem;
  box-shadow:inset 0 -2px 0 var(--sky); transition:box-shadow var(--t-fast), color var(--t-fast);
}
.link-under:hover{ box-shadow:inset 0 -2px 0 var(--blue); }
.on-dark .link-under{ color:#fff; box-shadow:inset 0 -2px 0 rgba(255,255,255,.4); }
.on-dark .link-under:hover{ box-shadow:inset 0 -2px 0 var(--sun); }

/* ================================================================ HEADER = */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background var(--t), box-shadow var(--t), padding var(--t);
  padding-block:1.15rem;
}
.hdr__in{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  width:100%; max-width:1720px; margin-inline:auto; padding-inline:var(--gutter);
}
.hdr__logo{ flex:none; display:block; }
.hdr__logo img{ width:clamp(132px,15vw,186px); transition:width var(--t); }
.hdr__logo .l-white{ display:block; }
.hdr__logo .l-color{ display:none; }

.hdr.is-stuck{ background:rgba(255,255,255,.96); box-shadow:0 1px 0 rgba(6,42,85,.1); padding-block:.6rem;
  backdrop-filter:saturate(1.2); }
.hdr.is-stuck .hdr__logo .l-white{ display:none; }
.hdr.is-stuck .hdr__logo .l-color{ display:block; }
.hdr.is-stuck .nav a{ color:var(--ink); }
.hdr.is-stuck .lang button{ color:var(--ink-soft); }
.hdr.is-stuck .lang button[aria-pressed="true"]{ color:var(--blue); }
.hdr.is-stuck .burger{ color:var(--ink); border-color:rgba(6,42,85,.2); }

.nav{ margin-left:auto; }
.nav ul{ display:flex; align-items:center; gap:clamp(.9rem,1.9vw,1.9rem); }
.nav a{
  color:#fff; font-weight:500; font-size:.9375rem; letter-spacing:.01em;
  padding:.4rem 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--sun); transition:right var(--t-fast);
}
.nav a:hover::after, .nav a.is-active::after{ right:0; }
.nav a.is-active{ color:#fff; }
.hdr.is-stuck .nav a.is-active{ color:var(--blue); }

.hdr__aside{ display:flex; align-items:center; gap:.9rem; flex:none; }
.lang{ display:flex; align-items:center; gap:.2rem; }
.lang button{
  background:none; border:0; cursor:pointer; padding:.4rem .5rem; min-height:44px;
  font-size:.8125rem; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.7);
  transition:color var(--t-fast);
}
.lang button[aria-pressed="true"]{ color:var(--sun); }
.hdr.is-stuck .lang button[aria-pressed="true"]{ color:var(--blue); }
.lang span{ opacity:.4; font-size:.75rem; }
.hdr .btn{ min-height:44px; padding:.55rem 1.15rem; font-size:.875rem; }

.burger{
  display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:none; border:2px solid rgba(255,255,255,.4); color:#fff; cursor:pointer;
}
.burger svg{ width:20px; height:20px; }

/* off-canvas */
.drawer{
  position:fixed; inset:0; z-index:120; visibility:hidden;
}
.drawer__scrim{
  position:absolute; inset:0; background:rgba(6,42,85,.55); opacity:0;
  transition:opacity var(--t);
}
.drawer__panel{
  position:absolute; inset:0 0 0 auto; width:min(420px,92vw);
  background:var(--blue); color:#fff; padding:1.25rem var(--gutter) 2rem;
  display:flex; flex-direction:column; gap:2rem; overflow-y:auto;
  transform:translateX(100%); transition:transform var(--t);
}
.drawer.is-open{ visibility:visible; }
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; }
.drawer__top img{ width:150px; }
.drawer__close{
  width:46px; height:46px; display:grid; place-items:center;
  background:none; border:2px solid rgba(255,255,255,.4); color:#fff; cursor:pointer;
}
.drawer nav ul{ display:grid; gap:.15rem; }
.drawer nav a{
  font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,6vw,2rem);
  letter-spacing:-.02em; padding:.55rem 0; display:block;
  font-variation-settings:"SOFT" 45,"WONK" 1;
}
.drawer nav a:hover{ color:var(--sun); }
.drawer__meta{ margin-top:auto; font-size:var(--fs-small); color:rgba(255,255,255,.8); display:grid; gap:.65rem; }
.drawer__meta a{ box-shadow:inset 0 -1px 0 rgba(255,255,255,.35); }

/* ================================================================== HERO = */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-block:clamp(7rem,16vh,10rem) clamp(6rem,10vh,6.5rem);
  color:#fff; overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,42,85,.88) 0%, rgba(6,42,85,.7) 38%, rgba(6,42,85,.24) 72%, rgba(6,42,85,.1) 100%),
    linear-gradient(to top, rgba(6,42,85,.9) 0%, rgba(6,42,85,.42) 45%, rgba(6,42,85,.34) 100%);
}
.hero__in{
  width:100%; max-width:1720px; margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(2rem,5vw,4rem);
  align-items:end;
}
.hero h1{
  font-family:var(--display); font-weight:700; font-size:var(--fs-hero);
  line-height:.92; letter-spacing:-.035em; max-width:16ch;
  font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 144;
  text-wrap:balance;
}
.hero h1 em{ font-style:italic; color:var(--sun); font-variation-settings:"SOFT" 60,"WONK" 1; }
.hero__lead{ font-size:var(--fs-lead); color:rgba(255,255,255,.86); max-width:44ch; margin-top:1.5rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:2.75rem;
  padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.22);
  font-size:var(--fs-small); color:rgba(255,255,255,.75);
}
.hero__meta b{ color:#fff; font-weight:600; }

/* potpisni element: kolona tanjirića (motiv iz logoa) */
.plates{ display:grid; gap:.85rem; justify-items:center; padding-bottom:.5rem; }
.plates svg{ width:clamp(44px,4.4vw,64px); height:auto; opacity:.9; }
.plates .p-spin{ animation:slowspin 34s linear infinite; }
@keyframes slowspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .plates .p-spin{ animation:none; } }

.scrollcue{
  position:absolute; right:var(--gutter); bottom:1.25rem; z-index:2;
  display:flex; align-items:center; gap:.6rem;
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.scrollcue i{ display:block; width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),transparent); }

/* ============================================================== MARQUEE = */
.marquee{
  background:var(--blue); color:#fff; overflow:hidden; padding-block:.9rem;
  border-block:1px solid rgba(255,255,255,.14);
}
.marquee__track{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.marquee ul{ display:flex; align-items:center; gap:2.5rem; padding-right:2.5rem; }
.marquee li{
  font-size:.8125rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  white-space:nowrap; display:flex; align-items:center; gap:2.5rem;
}
.marquee li::after{
  content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--sun); flex:none;
}
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* =============================================================== TAVERNA = */
.taverna{ background:var(--wash); }
.taverna__grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:start;
}
.taverna__copy p + p{ margin-top:1.1rem; }
.taverna h2{ margin-bottom:1.75rem; }
.taverna h2 .greek{ color:var(--blue); font-family:var(--body); font-weight:600; letter-spacing:-.01em; }

.tenets{ margin-top:2.5rem; display:grid; gap:1.25rem; }
.tenets li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.tenets svg{ width:34px; height:34px; flex:none; margin-top:.15rem; }
.tenets b{ display:block; font-weight:600; }
.tenets span{ color:var(--ink-soft); font-size:.9375rem; }

.collage{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.75rem,1.4vw,1.15rem); }
.collage figure{ position:relative; overflow:hidden; background:var(--wash-warm); }
.collage img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--t); }
.collage figure:hover img{ transform:scale(1.045); }
.c-a{ grid-column:1/5; aspect-ratio:4/3; }
.c-b{ grid-column:5/7; aspect-ratio:3/4; align-self:end; }
.c-c{ grid-column:1/3; aspect-ratio:1; }
.c-d{ grid-column:3/7; aspect-ratio:16/10; }
.collage figcaption{
  position:absolute; left:0; bottom:0; background:var(--blue); color:#fff;
  font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:.45rem .8rem;
}

/* ================================================================== MENI = */
.meni{ background:var(--white); }
.meni__head{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem;
  align-items:end; margin-bottom:2.75rem;
}
.tabs{
  display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid rgba(6,42,85,.12); margin-bottom:2.5rem;
  padding-bottom:0;
}
.tabs::-webkit-scrollbar{ display:none; }
.tabs button{
  background:none; border:0; cursor:pointer; white-space:nowrap;
  padding:.85rem 1.05rem; font-weight:600; font-size:.9375rem; color:var(--ink-soft);
  border-bottom:3px solid transparent; margin-bottom:-1px;
  transition:color var(--t-fast), border-color var(--t-fast);
  min-height:48px;
}
.tabs button:hover{ color:var(--blue); }
.tabs button[aria-selected="true"]{ color:var(--blue); border-bottom-color:var(--blue); }
.tabs button small{ display:block; font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.6; font-weight:600; }

.dishes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,1.75rem); }
.dishes[hidden]{ display:none; }
.dish{ display:grid; gap:.9rem; }
.dish__img{ position:relative; overflow:hidden; aspect-ratio:1; background:var(--wash-warm); }
.dish__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--t); }
.dish:hover .dish__img img{ transform:scale(1.06); }
.dish__tag{
  position:absolute; top:.65rem; left:.65rem; background:var(--sun); color:var(--blue-deep);
  font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .55rem;
}
.dish h4{ font-family:var(--display); font-weight:600; font-size:var(--fs-h4); line-height:1.15;
  letter-spacing:-.015em; font-variation-settings:"SOFT" 45,"WONK" 1; }
.dish .gr{ display:block; font-family:var(--body); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:.35rem; }
.dish p{ font-size:.9375rem; color:var(--ink-soft); line-height:1.5; }

.dish--wide{ grid-column:span 2; }
.dish--wide .dish__img{ aspect-ratio:16/10; }

.meni__foot{
  margin-top:3rem; padding-top:1.75rem; border-top:1px solid rgba(6,42,85,.12);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem;
}
.meni__foot p{ font-size:.9375rem; color:var(--ink-soft); max-width:46ch; }

/* ================================================================ PROVOD = */
.provod{ background:var(--blue-deep); color:#fff; overflow:hidden; }
.provod::before{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
}
.provod__grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.provod h2{ margin-bottom:1.5rem; }
.provod h2 em{ font-style:italic; color:var(--sun); }

.vidwrap{ position:relative; background:#03192f; overflow:hidden; }
.vidwrap video{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.vidwrap__badge{
  position:absolute; top:1rem; left:1rem; display:flex; align-items:center; gap:.5rem;
  background:rgba(6,42,85,.72); backdrop-filter:blur(2px);
  padding:.4rem .75rem; font-size:.6875rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.vidwrap__badge i{ width:.5rem; height:.5rem; border-radius:50%; background:var(--terra);
  animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.25; transform:scale(.75); } }
@media (prefers-reduced-motion: reduce){ .vidwrap__badge i{ animation:none; } }
.vidwrap__sound{
  position:absolute; right:1rem; bottom:1rem;
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  padding:.5rem 1rem; background:rgba(255,255,255,.92); color:var(--blue);
  border:0; cursor:pointer; font-size:.8125rem; font-weight:600;
}
.vidwrap__sound:hover{ background:var(--sun); color:var(--blue-deep); }

.program{ display:grid; gap:0; }
.program li{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:baseline;
  padding-block:1.15rem; border-bottom:1px solid rgba(255,255,255,.16);
}
.program li:first-child{ border-top:1px solid rgba(255,255,255,.16); }
.program .day{
  font-family:var(--display); font-weight:600; font-size:1.0625rem;
  color:var(--sun); min-width:6.5rem; font-variation-settings:"SOFT" 45,"WONK" 1;
}
.program .what{ font-size:.9375rem; color:rgba(255,255,255,.82); }
.program .what b{ color:#fff; font-weight:600; display:block; }

.smash{
  margin-top:2rem; padding:1.5rem; border:1px solid rgba(255,255,255,.2);
  display:grid; grid-template-columns:auto 1fr; gap:1.15rem; align-items:start;
}
.smash svg{ width:40px; height:40px; flex:none; }
.smash p{ font-size:.9375rem; color:rgba(255,255,255,.82); }
.smash b{ color:var(--sun); }

.provod__strip{ margin-top:clamp(2.5rem,5vw,4rem); display:grid;
  grid-template-columns:repeat(4,1fr); gap:clamp(.75rem,1.4vw,1.15rem); }
.provod__strip figure{ overflow:hidden; aspect-ratio:3/2; }
.provod__strip img{ width:100%; height:100%; object-fit:cover; opacity:.92;
  transition:opacity var(--t), transform 1.1s var(--t); }
.provod__strip figure:hover img{ opacity:1; transform:scale(1.05); }

/* ============================================================== GALERIJA = */
.galerija{ background:var(--wash); }
.gal{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.6rem,1.2vw,1rem);
  grid-auto-flow:dense;
}
.gal a{ position:relative; overflow:hidden; background:var(--wash-warm); display:block; aspect-ratio:1; }
.gal a img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--t); }
.gal a:hover img{ transform:scale(1.06); }
.gal a::after{
  content:""; position:absolute; inset:0; background:var(--blue); opacity:0;
  transition:opacity var(--t-fast); mix-blend-mode:multiply;
}
.gal a:hover::after{ opacity:.18; }
.gal .tall{ grid-row:span 2; aspect-ratio:1/2; }
.gal .wide{ grid-column:span 2; aspect-ratio:2/1; }
.gal .big{ grid-column:span 2; grid-row:span 2; aspect-ratio:1; }

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:160; display:none;
  background:rgba(6,42,85,.94); place-items:center; padding:clamp(1rem,4vw,3rem);
}
.lb.is-open{ display:grid; }
.lb img{ max-width:100%; max-height:82vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.lb__cap{ color:rgba(255,255,255,.8); font-size:var(--fs-small); text-align:center; margin-top:1rem; }
.lb__x, .lb__nav{
  position:absolute; background:rgba(255,255,255,.12); border:0; color:#fff; cursor:pointer;
  width:52px; height:52px; display:grid; place-items:center; transition:background var(--t-fast);
}
.lb__x:hover, .lb__nav:hover{ background:var(--sun); color:var(--blue-deep); }
.lb__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lb__prev{ left:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }
.lb__next{ right:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }
.lb svg{ width:22px; height:22px; }

/* ============================================================== LOKACIJE = */
.lokacije{ background:var(--white); }
.locs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.25rem,2.4vw,2rem); }
.loc{
  border:1px solid rgba(6,42,85,.14); display:flex; flex-direction:column;
  transition:border-color var(--t-fast), transform var(--t-fast);
}
.loc:hover{ border-color:var(--blue); transform:translateY(-3px); }
.loc__img{ aspect-ratio:16/10; overflow:hidden; }
.loc__img img{ width:100%; height:100%; object-fit:cover; }
.loc__body{ padding:clamp(1.25rem,2vw,1.75rem); display:flex; flex-direction:column; gap:1rem; flex:1; }
.loc h3{ font-family:var(--display); font-size:var(--fs-h3); font-weight:600; letter-spacing:-.02em;
  font-variation-settings:"SOFT" 45,"WONK" 1; }
.loc h3 small{ display:block; font-family:var(--body); font-size:.6875rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:.5rem; }
.loc dl{ margin:0; display:grid; gap:.6rem; font-size:.9375rem; }
.loc dl > div{ display:grid; grid-template-columns:22px 1fr; gap:.7rem; align-items:start; }
.loc dt{ color:var(--blue); }
.loc dt svg{ width:18px; height:18px; margin-top:.22rem; }
.loc dd{ margin:0; color:var(--ink-soft); }
.loc dd a{ color:var(--ink); box-shadow:inset 0 -1px 0 var(--sky); }
.loc dd a:hover{ box-shadow:inset 0 -1px 0 var(--blue); color:var(--blue); }
.loc__act{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.5rem; padding-top:.5rem; }
.loc__act .btn{ min-height:46px; padding:.6rem 1.1rem; font-size:.875rem; flex:1 1 auto; }

/* ============================================================ REZERVACIJA = */
.rez{ background:var(--blue); color:#fff; }
.rez__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.rez h2{ margin-bottom:1.25rem; }
.form{ margin-top:2.25rem; display:grid; gap:1.1rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.78); }
.field input, .field select, .field textarea{
  font:inherit; font-size:1rem; color:#fff; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.3); padding:.85rem 1rem; min-height:52px;
  border-radius:0; transition:border-color var(--t-fast), background var(--t-fast);
  width:100%;
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(255,255,255,.6); }
.field input:focus, .field select:focus, .field textarea:focus{
  background:rgba(255,255,255,.14); border-color:#fff; outline:2px solid var(--sun); outline-offset:1px;
}
.field select{ appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.75rem; }
.field select option{ color:var(--ink); background:#fff; }
.field input[type="date"], .field input[type="time"]{ color-scheme:dark; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.5); }
.form__note{ font-size:var(--fs-small); color:rgba(255,255,255,.7); }
.form__err{ font-size:var(--fs-small); color:var(--sun); font-weight:600; min-height:1.2em; }
.form__ok{
  display:none; background:rgba(255,255,255,.12); border-left:3px solid var(--sun);
  padding:1rem 1.25rem; font-size:.9375rem;
}
.form__ok.is-on{ display:block; }

.rez__side{ display:grid; gap:1.75rem; }
.rez__side figure{ overflow:hidden; }
.rez__side img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.rez__quick{ display:grid; gap:.75rem; }
.rez__quick a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.15rem; border:1px solid rgba(255,255,255,.28); min-height:56px;
  font-weight:600; transition:background var(--t-fast), border-color var(--t-fast);
}
.rez__quick a:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.rez__quick small{ display:block; font-weight:600; font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.82); }
.rez__quick svg{ width:18px; height:18px; flex:none; }

/* ================================================================ FOOTER = */
.ftr{ background:var(--blue-deep); color:rgba(255,255,255,.78); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.ftr__grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem); }
.ftr img{ width:190px; margin-bottom:1.25rem; }
.ftr h5{ font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; margin-bottom:1rem; }
.ftr li + li{ margin-top:.6rem; }
.ftr a:hover{ color:#fff; }
.ftr p{ font-size:.9375rem; max-width:36ch; }
.socials{ display:flex; gap:.55rem; margin-top:1.5rem; }
.socials a{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); transition:background var(--t-fast), border-color var(--t-fast);
}
.socials a:hover{ background:var(--sun); border-color:var(--sun); color:var(--blue-deep); }
.socials svg{ width:18px; height:18px; }
.ftr__bar{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  font-size:.8125rem; color:rgba(255,255,255,.55);
}
.ftr__bar .greek-mark{ letter-spacing:.3em; text-transform:uppercase; }

/* ========================================================== MUSIC TOGGLE = */
.music{
  position:fixed; left:clamp(1rem,2.5vw,1.75rem); bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:110; display:flex; align-items:center; gap:.65rem;
  background:rgba(255,255,255,.5); backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid rgba(6,42,85,.1);
  box-shadow:0 8px 24px rgba(6,42,85,.1);
  padding:.5rem .95rem .5rem .5rem; cursor:pointer;
  color:var(--blue-deep); font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  min-height:52px; transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.music:hover{ background:rgba(255,255,255,.8); transform:translateY(-2px); box-shadow:0 12px 34px rgba(6,42,85,.22); }
.music__disc{ width:38px; height:38px; flex:none; position:relative; }
.music__disc svg{ width:100%; height:100%; }
.music.is-playing .music__disc svg{ animation:slowspin 6s linear infinite; }
@media (prefers-reduced-motion: reduce){ .music.is-playing .music__disc svg{ animation:none; } }
.music__eq{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.music__eq i{ width:2px; background:var(--blue); height:4px; }
.music.is-playing .music__eq i{ animation:eq .9s ease-in-out infinite; }
.music.is-playing .music__eq i:nth-child(2){ animation-delay:.15s; }
.music.is-playing .music__eq i:nth-child(3){ animation-delay:.3s; }
.music.is-playing .music__eq i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:14px; } }
@media (prefers-reduced-motion: reduce){ .music.is-playing .music__eq i{ animation:none; height:9px; } }
.music__label b{ display:block; }
.music:not(.is-playing) .music__eq i{ height:9px; opacity:.3; }
.music.needs-tap{ animation:nudge 2.6s ease-in-out 3; }
@keyframes nudge{ 0%,100%{ box-shadow:0 8px 28px rgba(6,42,85,.16); }
  50%{ box-shadow:0 8px 28px rgba(6,42,85,.16), 0 0 0 8px rgba(255,222,0,.35); } }
@media (prefers-reduced-motion: reduce){ .music.needs-tap{ animation:none; } }

/* ========================================================== BACK TO TOP = */
.totop{
  position:fixed; right:clamp(1rem,2.5vw,1.75rem); bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:110; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.5); backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid rgba(6,42,85,.1);
  box-shadow:0 8px 24px rgba(6,42,85,.1); color:var(--blue-deep); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), visibility 0s linear var(--t-fast);
}
.totop svg{ width:20px; height:20px; }
.totop.is-visible{ opacity:1; visibility:visible; transform:none; transition:opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.totop:hover{ background:rgba(255,255,255,.8); transform:translateY(-2px); box-shadow:0 12px 34px rgba(6,42,85,.22); }
.totop:not(.is-visible){ pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .totop{ transition:opacity var(--t-fast), visibility 0s linear var(--t-fast); } }
@media (max-width:520px){ .totop{ right:auto; left:clamp(1rem,2.5vw,1.75rem); } }

/* ================================================================ REVEAL = */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; } .rv-d2{ transition-delay:.16s; } .rv-d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
}

/* =========================================================== RESPONSIVE = */
@media (max-width:1180px){
  .nav{ display:none; }
  .hdr__aside{ margin-left:auto; }
  .burger{ display:inline-flex; }
  .dishes{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ftr__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1024px){
  .taverna__grid, .provod__grid, .rez__grid{ grid-template-columns:1fr; }
  .locs{ grid-template-columns:1fr 1fr; }
  .rez__side{ grid-template-columns:1fr 1fr; align-items:start; }
  .rez__side figure{ order:2; }
  .hero__in{ grid-template-columns:1fr; }
  .plates{ display:flex; gap:.75rem; justify-content:flex-start; padding-top:.5rem; }
  .plates svg{ width:38px; }
  .gal{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
  .hdr .btn--rez{ display:none; }
  .meni__head{ grid-template-columns:1fr; }
  .dishes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dish--wide{ grid-column:span 2; }
  .provod__strip{ grid-template-columns:1fr 1fr; }
  .locs{ grid-template-columns:1fr; }
  .rez__side{ grid-template-columns:1fr; }
  .collage{ grid-template-columns:repeat(4,1fr); }
  .c-a{ grid-column:1/4; } .c-b{ grid-column:4/5; } .c-c{ grid-column:1/2; } .c-d{ grid-column:2/5; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal .big{ grid-column:span 2; grid-row:span 1; aspect-ratio:3/2; }
  .gal .tall{ grid-row:span 1; aspect-ratio:1; }
  .hero{ min-height:92svh; }
  /* na malim ekranima tekst ide preko celog kadra — jači scrim */
  .hero__bg::after{
    background:linear-gradient(to top,
      rgba(6,42,85,.94) 0%, rgba(6,42,85,.84) 42%, rgba(6,42,85,.7) 74%, rgba(6,42,85,.5) 100%);
  }
  .hero__bg img{ object-position:60% 60%; }
}
@media (max-width:520px){
  .hero h1{ letter-spacing:-.03em; }
  .hero__meta{ gap:.35rem 1rem; }
  .form__row{ grid-template-columns:1fr; }
  .ftr__grid{ grid-template-columns:1fr; }
  .dishes{ grid-template-columns:1fr; gap:1.5rem; }
  .dish--wide{ grid-column:span 1; }
  .music__label{ display:none; }
  /* na telefonu ide u desni ugao — tekst u herou je levo poravnat */
  .music{ padding:.5rem; left:auto; right:clamp(1rem,2.5vw,1.75rem); }
  .gal .wide{ grid-column:span 2; }
  .scrollcue{ display:none; }
  .loc__act .btn{ flex:1 1 100%; }
  .program li{ grid-template-columns:1fr; gap:.35rem; }
  .program .day{ min-width:0; }
}
/* najuži telefoni — motiv tanjirića ustupa mesto sadržaju */
@media (max-width:360px){
  .plates{ display:none; }
  .hero{ padding-bottom:7rem; }
  .hdr__logo img{ width:118px; }
}
@media print{
  .hdr,.music,.drawer,.lb,.marquee,.scrollcue{ display:none !important; }
  body{ background:#fff; }
}