/* =====================================================================
   BIG HOUSE HOTEL — stilovi
   ===================================================================== */

:root{
  --zelena-tamna:#12302a;
  --zelena:#1d4a3d;
  --zelena-svijetla:#2c6252;
  --krem:#f8f5ef;
  --krem-tamni:#efe9df;
  --zlatna:#c2a06a;
  --zlatna-svijetla:#e0c894;
  --tekst:#2b2f2c;
  --tekst-prig:#6d746e;
  --bijela:#ffffff;
  --sjena:0 18px 50px rgba(18,48,42,.12);
  --radijus:4px;
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  color:var(--tekst);
  background:var(--krem);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
h1{font-size:clamp(2.8rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:1.5rem}
h4{font-size:1.15rem}
p{margin:0 0 1.1em}

.omotac{width:100%;max-width:var(--max);margin:0 auto;padding:0 28px}
.usko{max-width:760px}
.sredina{text-align:center}
.prigušeno{color:var(--tekst-prig)}
.vodeci{font-size:1.09rem;color:var(--tekst-prig)}

.nadnaslov{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:500;
  color:var(--zlatna);
  margin:0 0 .9em;
}
.nadnaslov.svijetli{color:var(--zlatna-svijetla)}

.preskoci{position:absolute;left:-9999px}

/* ---------- Gumbi ---------- */
.gumb{
  display:inline-block;
  padding:15px 34px;
  background:var(--zelena);
  color:var(--bijela);
  text-decoration:none;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid var(--zelena);
  border-radius:var(--radijus);
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .2s;
}
.gumb:hover{background:var(--zelena-tamna);border-color:var(--zelena-tamna);transform:translateY(-2px)}
.gumb-prazan{background:transparent;color:var(--bijela);border-color:rgba(255,255,255,.6)}
.gumb-prazan:hover{background:var(--bijela);color:var(--zelena-tamna);border-color:var(--bijela)}
.gumb-prazan.tamni-tekst{color:var(--zelena);border-color:var(--zelena)}
.gumb-prazan.tamni-tekst:hover{background:var(--zelena);color:var(--bijela)}
.gumb-mali{padding:10px 20px;font-size:.72rem}

/* ---------- Zaglavlje ---------- */
.zaglavlje{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 0;
  transition:background .3s,padding .3s,box-shadow .3s;
}
.zaglavlje.spusteno{
  background:rgba(248,245,239,.97);
  padding:10px 0;
  box-shadow:0 2px 24px rgba(18,48,42,.10);
  backdrop-filter:blur(8px);
}
.zaglavlje-red{display:flex;align-items:center;justify-content:space-between;gap:20px}

.logo{text-decoration:none;color:var(--bijela);line-height:1.1;display:block}
.zaglavlje.spusteno .logo{color:var(--zelena-tamna)}
.logo-ime{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;font-weight:600;letter-spacing:.04em;display:block;
}
.logo-pod{
  display:block;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.28em;opacity:.8;font-weight:400;
}

.nav{display:flex;align-items:center;gap:26px}
.nav>a{
  color:var(--bijela);text-decoration:none;font-size:.82rem;
  letter-spacing:.06em;font-weight:400;position:relative;padding:4px 0;
}
.zaglavlje.spusteno .nav>a{color:var(--tekst)}
.nav>a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--zlatna);transition:width .28s;
}
.nav>a:hover::after{width:100%}
.nav .gumb{color:var(--bijela)}

.jezici{display:flex;gap:2px;align-items:center}
.jezici a{
  text-decoration:none;font-size:.7rem;letter-spacing:.1em;
  padding:4px 7px;color:var(--bijela);opacity:.65;border-radius:3px;
}
.zaglavlje.spusteno .jezici a{color:var(--tekst)}
.jezici a:hover{opacity:1}
.jezici a.aktivan{opacity:1;color:var(--zlatna);font-weight:600}
.zaglavlje.spusteno .jezici a.aktivan{color:var(--zelena)}

.hamburger{
  display:none;background:none;border:0;cursor:pointer;
  width:38px;height:32px;padding:6px;flex-direction:column;justify-content:space-between;
}
.hamburger span{display:block;height:2px;background:var(--bijela);transition:.3s;border-radius:2px}
.zaglavlje.spusteno .hamburger span{background:var(--zelena-tamna)}
.hamburger.otvoren span{background:var(--zelena-tamna)}
.hamburger.otvoren span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger.otvoren span:nth-child(2){opacity:0}
.hamburger.otvoren span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex;align-items:center;
  background:var(--zelena-tamna) center/cover no-repeat;
  color:var(--bijela);
  position:relative;
  text-align:center;
  padding:120px 0 100px;
}
.hero-sadrzaj{max-width:840px}
.hero h1{margin-bottom:.35em}
.hero-pod{
  display:block;font-family:'Inter',sans-serif;font-weight:300;
  font-size:clamp(.8rem,1.6vw,1rem);letter-spacing:.42em;
  text-transform:uppercase;margin-top:1.4em;opacity:.85;
}
.hero-tekst{font-size:1.15rem;font-weight:300;opacity:.92;max-width:620px;margin:0 auto 2.4em}
.hero-gumbi{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-strelica{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  width:22px;height:38px;border:1px solid rgba(255,255,255,.45);border-radius:12px;
}
.hero-strelica::after{
  content:'';position:absolute;left:50%;top:8px;width:3px;height:7px;
  background:rgba(255,255,255,.8);border-radius:2px;margin-left:-1.5px;
  animation:spusti 1.8s infinite;
}
@keyframes spusti{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- Odsjeci ---------- */
.odsjek{padding:110px 0}
.odsjek.tamni{background:var(--zelena-tamna);color:rgba(255,255,255,.9)}
.odsjek.tamni h2,.odsjek.tamni h3,.odsjek.tamni h4{color:var(--bijela)}
.odsjek.tamni .vodeci{color:rgba(255,255,255,.72)}
.odsjek.tamni .nadnaslov{color:var(--zlatna-svijetla)}

/* Značajke */
.mreza-znacajke{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:34px 22px;margin-top:70px;
}
@media (min-width:1040px){ .mreza-znacajke{grid-template-columns:repeat(5,1fr)} }
@media (min-width:620px) and (max-width:1039px){ .mreza-znacajke{grid-template-columns:repeat(3,1fr)} }
.znacajka{text-align:center;padding:14px 4px}
.znacajka h3{font-size:1.25rem;margin-bottom:.4em}
.znacajka p{font-size:.94rem;color:var(--tekst-prig);margin:0}
.znacajka-ikona{
  display:block;width:46px;height:46px;margin:0 auto 22px;
  border:1px solid var(--zlatna);border-radius:50%;position:relative;
}
.znacajka-ikona::after{
  content:'';position:absolute;inset:0;margin:auto;width:16px;height:16px;
  background:var(--zlatna);
}
.ikona-0::after{clip-path:polygon(50% 0,100% 100%,0 100%)}
.ikona-1::after{clip-path:polygon(0 18%,25% 0,50% 18%,75% 0,100% 18%,100% 44%,75% 26%,50% 44%,25% 26%,0 44%,0 74%,25% 56%,50% 74%,75% 56%,100% 74%,100% 100%,75% 82%,50% 100%,25% 82%,0 100%)}
.ikona-2::after{clip-path:circle(50%)}
.ikona-3::after{clip-path:polygon(0 30%,100% 30%,100% 70%,0 70%)}
.ikona-4::after{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* Dva stupca */
.dvostupac{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
}
.dvostupac.obrnuto .stupac-slika{order:2}
.stupac-slika img{
  width:100%;height:100%;max-height:560px;object-fit:cover;
  border-radius:var(--radijus);box-shadow:var(--sjena);
}
.slika-prazna{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:rgba(127,127,127,.12);border:1px dashed rgba(127,127,127,.35);
  border-radius:var(--radijus);color:var(--tekst-prig);font-size:.85rem;
}
.stupac-tekst .gumb{margin-top:14px}

.kvacice{list-style:none;padding:0;margin:0 0 1.6em}
.kvacice li{position:relative;padding-left:28px;margin-bottom:11px;font-size:.97rem}
.kvacice li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:11px;height:6px;border-left:1.5px solid var(--zlatna);
  border-bottom:1.5px solid var(--zlatna);transform:rotate(-45deg);
}

/* Bikers welcome */
.bikers{
  background:var(--zelena);
  color:rgba(255,255,255,.88);
  text-align:center;
  padding:86px 0;
  position:relative;
}
.bikers::before,.bikers::after{
  content:'';position:absolute;left:0;right:0;height:1px;background:rgba(224,200,148,.35);
}
.bikers::before{top:0}.bikers::after{bottom:0}
.bikers-sadrzaj{max-width:820px;margin:0 auto}
.bikers h2{color:var(--bijela);font-size:clamp(1.7rem,3.2vw,2.5rem)}
.bikers .nadnaslov{color:var(--zlatna-svijetla)}
.bikers .vodeci{color:rgba(255,255,255,.78)}
.bikers-ikona{width:96px;height:auto;color:var(--zlatna-svijetla);margin:0 auto 26px;display:block;opacity:.9}
.bikers-lista{
  list-style:none;padding:0;margin:34px 0 34px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px;
}
.bikers-lista li{
  border:1px solid rgba(224,200,148,.4);border-radius:999px;
  padding:8px 18px;font-size:.85rem;color:rgba(255,255,255,.88);
}


/* ---------- Filteri galerije ---------- */
.filteri{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:52px 0 8px;
}
.filter{
  font-family:inherit;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 20px;border-radius:999px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.24);
  transition:background .25s,color .25s,border-color .25s;
}
.filter:hover{color:#fff;border-color:rgba(224,200,148,.6)}
.filter.aktivan{background:var(--zlatna);border-color:var(--zlatna);color:var(--zelena-tamna);font-weight:600}
.galerija-stavka[hidden]{display:none}

/* ---------- Video ---------- */
.video-red{margin-top:76px}
.video-naslov{
  text-align:center;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.8em;
}
.video-okvir{
  position:relative;aspect-ratio:16/9;border-radius:var(--radijus);
  overflow:hidden;background:#0b1a16;box-shadow:var(--sjena);
  max-width:1000px;margin:0 auto;
}
.video-okvir iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-facade{cursor:pointer}
.video-facade img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease,filter .4s ease;
}
.video-facade::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(11,26,22,.28),rgba(11,26,22,.52));
  transition:background .3s;pointer-events:none;
}
.video-facade:hover img{transform:scale(1.04)}
.video-facade:hover::after{background:linear-gradient(rgba(11,26,22,.05),rgba(11,26,22,.35))}
.video-facade.ucitan::after{display:none}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;cursor:pointer;z-index:3;
  background:rgba(255,255,255,.96);border:0;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  transition:transform .28s ease,background .28s;
}
.video-play::before{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);
  animation:pulsiraj 2.2s ease-out infinite;
}
@keyframes pulsiraj{
  0%{transform:scale(.9);opacity:.9}
  70%{transform:scale(1.25);opacity:0}
  100%{opacity:0}
}
.video-play::after{
  content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:14px 0 14px 23px;
  border-color:transparent transparent transparent var(--zelena-tamna);
}
.video-facade:hover .video-play{transform:translate(-50%,-50%) scale(1.09);background:var(--zlatna-svijetla)}
.video-cta{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  color:var(--zelena-tamna);background:rgba(255,255,255,.94);
  padding:9px 22px;border-radius:999px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  pointer-events:none;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.video-facade.ucitan .video-play,.video-facade.ucitan .video-cta{display:none}

@media (max-width:560px){
  .video-red{margin-top:52px}
  .video-play{width:62px;height:62px}
  .video-play::after{border-width:11px 0 11px 18px}
  .filter{padding:8px 15px;font-size:.72rem}
  .filteri{margin-top:36px}
}

/* Galerija */
.mreza-galerija{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px;margin-top:60px;
}
.galerija-stavka{
  padding:0;border:0;background:none;cursor:pointer;overflow:hidden;
  border-radius:var(--radijus);aspect-ratio:4/3;display:block;
}
.galerija-stavka img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s ease,filter .4s;
}
.galerija-stavka:hover img{transform:scale(1.06);filter:brightness(1.06)}

.avion-blok{margin-top:80px;padding-top:70px;border-top:1px solid rgba(29,74,61,.16)}
.avion-blok .avion-naslov{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.5em}
.avion-slika{padding:0;border:0;background:none;cursor:zoom-in;display:block;width:100%;border-radius:var(--radijus);overflow:hidden}
.avion-slika img{width:100%;height:100%;max-height:460px;object-fit:cover;box-shadow:var(--sjena);transition:transform .5s}
.avion-slika:hover img{transform:scale(1.03)}


/* Lokacija */
.lokacija-mreza{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;margin-top:60px;align-items:stretch}
.karta-okvir{position:relative;min-height:420px;border-radius:var(--radijus);overflow:hidden;box-shadow:var(--sjena)}
.karta-okvir iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.25)}
.lokacija-info{background:var(--krem-tamni);padding:42px 36px;border-radius:var(--radijus)}
.lokacija-info h3{margin-bottom:.8em}
.adresa-blok{font-size:.95rem;color:var(--tekst-prig);margin-bottom:1.4em}

/* Kontakt */
.kontakt-mreza{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;margin-top:60px}
.kontakt-red{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.kontakt-red .oznaka{
  display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--zlatna-svijetla);margin-bottom:6px;
}
.kontakt-red a{color:var(--bijela);text-decoration:none;font-size:1.05rem}
.kontakt-red a:hover{color:var(--zlatna-svijetla)}
.kontakt-gumbi{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

.forma{display:grid;gap:18px}
.forma label{display:block}
.forma label span{
  display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.65);margin-bottom:8px;
}
.forma input,.forma textarea{
  width:100%;padding:14px 16px;font-family:inherit;font-size:.97rem;font-weight:300;
  background:rgba(255,255,255,.07);color:var(--bijela);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--radijus);
  transition:border-color .25s,background .25s;
}
.forma input:focus,.forma textarea:focus{
  outline:none;border-color:var(--zlatna);background:rgba(255,255,255,.12);
}
.forma textarea{resize:vertical}
.forma .gumb{justify-self:start;background:var(--zlatna);border-color:var(--zlatna);color:var(--zelena-tamna);font-weight:600}
.forma .gumb:hover{background:var(--zlatna-svijetla);border-color:var(--zlatna-svijetla)}
.med{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.poruka{padding:14px 18px;border-radius:var(--radijus);font-size:.92rem;margin:0}
.poruka.uspjeh{background:rgba(120,190,150,.18);border:1px solid rgba(120,190,150,.5);color:#d6f0e0}
.poruka.greska{background:rgba(220,120,110,.16);border:1px solid rgba(220,120,110,.45);color:#f6d9d5}

/* Podnožje */
.podnozje{background:#0d241f;color:rgba(255,255,255,.62);padding:70px 0 0;font-size:.9rem}
.podnozje-mreza{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:48px;padding-bottom:50px}
.podnozje .logo-ime{color:var(--bijela);margin-bottom:.5em}
.podnozje h4{color:var(--bijela);margin-bottom:1em;font-size:1.05rem}
.podnozje a{display:block;color:rgba(255,255,255,.62);text-decoration:none;margin-bottom:9px}
.podnozje a:hover{color:var(--zlatna-svijetla)}
.drustvene{display:flex;gap:18px;margin-top:14px}
.drustvene a{margin:0}
.podnozje-dno{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;padding-bottom:22px;font-size:.8rem}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(9,22,19,.95);
  display:flex;align-items:center;justify-content:center;padding:56px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92%;max-height:88vh;object-fit:contain;border-radius:3px}
.lightbox button{
  background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer;
  font-size:2.6rem;line-height:1;padding:14px;transition:color .2s;
}
.lightbox button:hover{color:var(--zlatna-svijetla)}
.lb-zatvori{position:absolute;top:14px;right:22px;font-size:2.4rem}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);font-size:3.4rem}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-brojac{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:.85rem;letter-spacing:.1em}

/* Mobilni gumb za poziv */
.mob-poziv{
  display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  background:var(--zlatna);color:var(--zelena-tamna);text-align:center;
  padding:15px;border-radius:var(--radijus);text-decoration:none;
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
}

/* ---------- Responzivno ---------- */
@media (max-width:1000px){
  .lokacija-mreza,.kontakt-mreza{grid-template-columns:1fr}
  .podnozje-mreza{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:860px){
  html{scroll-padding-top:70px}
  .odsjek{padding:76px 0}
  .dvostupac{grid-template-columns:1fr;gap:36px}
  .dvostupac.obrnuto .stupac-slika{order:0}
  .hamburger{display:flex}
  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);
    background:var(--krem);flex-direction:column;align-items:flex-start;
    justify-content:center;gap:20px;padding:40px 34px;
    transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow:-12px 0 40px rgba(0,0,0,.18);
  }
  .nav.otvoren{transform:translateX(0)}
  .nav>a,.zaglavlje.spusteno .nav>a{color:var(--zelena-tamna);font-size:1.15rem}
  .jezici a,.zaglavlje.spusteno .jezici a{color:var(--zelena-tamna);font-size:.85rem;padding:6px 10px;border:1px solid rgba(29,74,61,.2)}
  .jezici a.aktivan{background:var(--zelena);color:#fff !important;border-color:var(--zelena)}
  .nav-tel{display:none}
  .mob-poziv{display:block}
  .podnozje{padding-bottom:74px}
  .lightbox{padding:20px}
  .lb-prev,.lb-next{font-size:2.4rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .omotac{padding:0 20px}
  .odsjek{padding:60px 0}
  .hero{padding:110px 0 130px}
  .hero-gumbi .gumb{width:100%}
  .lokacija-info{padding:30px 24px}
  .podnozje-mreza{grid-template-columns:1fr}
  .karta-okvir{min-height:320px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}