/* =========================================================
   APARTMAN TORNIK — ZLATIBOR
   Tokens
   ========================================================= */

:root{
  --forest-deep:#1E2B20;
  --forest:#3C5940;
  --wood:#7C4A25;
  --wood-light:#A6714A;
  --cream:#F3ECDD;
  --amber:#C97D3E;
  --charcoal:#221D18;
  --mist:#DCE3D3;

  --display:'Fraunces', serif;
  --body:'Work Sans', sans-serif;
  --mono:'DM Mono', monospace;

  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--body);
  color:var(--charcoal);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

ul,
li{
  list-style:none;
}

img{
  max-width:100%;
  display:block;
}


/* =========================================================
   ROOM PHOTOS
   ========================================================= */

.room-bg--entry{
  background-image:url('ulaz.jpg');
}

.room-bg--living{
  background-image:url('dnevna.jpg');
}

.room-bg--terrace{
  background-image:url('terasa.jpg');
}

.room-bg--kitchen{
  background-image:url('kuhinja.jpg');
}

.room-bg--bedroom{
  background-image:url('soba.jpg');
}

.room-bg--bathroom{
  background-image:url('kupatilo.jpg');
}

.room{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.walk__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.walk__btn {
  background: #222;
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.walk__btn:hover {
  background: #25d366;
  transform: scale(1.05);
}

.whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 16px;
    padding: 12px 18px;

    background: #25D366;
    color: #ffffff !important;

    border-radius: 6px;

    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.whatsapp-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

.whatsapp-button:hover {
    background: #1ebe5d;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.25);
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:16px clamp(20px,4vw,56px);

  color:var(--cream);

  background-color:rgba(30,43,32,.92);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  border-bottom:1px solid rgba(243,236,221,.1);

  box-shadow:0 4px 20px rgba(0,0,0,.25);
}


.topbar__mark{
  font-family:var(--display);
  font-size:1.15rem;
  font-weight:500;
  letter-spacing:.02em;
}

.topbar__mark img {
    height: 52px;
    width: auto;
    display: block;
}


.topbar__right{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,24px);
}


.topbar__nav{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,32px);
  font-size:.9rem;
}


.topbar__nav a{
  opacity:.85;
  transition:opacity .2s var(--ease);
}

.topbar__nav a:hover{
  opacity:1;
}


/* =========================================================
   TOPBAR ACTIONS
   REZERVIŠI + JEZIK
   OVO OSTAJE VAN HAMBURGERA
   ========================================================= */

.topbar__actions{
  display:flex;
  align-items:center;
  gap:8px;
}


.topbar__cta{
  border:1px solid var(--amber);

  padding:8px 16px;

  border-radius:999px;

  background-color:var(--amber);

  color:var(--forest-deep);

  font-weight:500;

  white-space:nowrap;

  transition:
    background-color .2s var(--ease),
    border-color .2s var(--ease),
    transform .2s var(--ease);
}


.topbar__cta:hover{
  background-color:#dda05c;
  border-color:#dda05c;
}


/* =========================================================
   LANGUAGE BUTTON
   ========================================================= */

.language-toggle{
  border:1px solid rgba(243,236,221,.6);

  background:transparent;

  color:var(--cream);

  padding:8px 13px;

  border-radius:999px;

  font-family:var(--mono);

  font-size:.75rem;

  cursor:pointer;

  min-width:45px;

  transition:
    background-color .2s var(--ease),
    color .2s var(--ease),
    border-color .2s var(--ease),
    transform .2s var(--ease);
}


.language-toggle:hover{
  background:var(--cream);
  color:var(--forest-deep);
  border-color:var(--cream);
}


.language-toggle:active{
  transform:scale(.95);
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.menu-toggle{
  display:none;

  width:42px;
  height:42px;

  padding:9px;

  border:1px solid rgba(243,236,221,.35);

  border-radius:50%;

  background:transparent;

  cursor:pointer;

  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:5px;
}


.menu-toggle span{
  width:18px;
  height:1px;

  background:var(--cream);

  transition:
    transform .25s var(--ease),
    opacity .2s var(--ease);
}


.menu-toggle.is-active span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2){
  opacity:0;
}

.menu-toggle.is-active span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}


/* =========================================================
   HERO CAROUSEL — HORIZONTALNI SLIDER
   ========================================================= */

.walk{
  position:relative;
  min-height:100vh;
  padding:
    clamp(120px,12vh,150px)
    clamp(20px,5vw,64px)
    clamp(50px,7vw,90px);
  overflow:hidden;
  background:var(--cream);
}

.walk__intro{
  position:relative;
  z-index:5;
  width:min(1180px,100%);
  margin:0 auto clamp(28px,4vw,44px);
}

.walk__eyebrow{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wood);
  margin-bottom:14px;
}

.walk__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.5rem,6vw,5.6rem);
  line-height:.98;
  letter-spacing:-.035em;
  max-width:850px;
  color:var(--forest-deep);
}

.walk__sub{
  margin-top:18px;
  max-width:48ch;
  color:#5C5145;
  font-size:clamp(.92rem,1.3vw,1.05rem);
  line-height:1.6;
}

.walk__stage{
  position:relative;
  width:min(1180px,100%);
  margin:0 auto;
}

.walk__frame{
  position:relative;
  width:100%;
  height:clamp(520px,68vh,760px);
  min-height:460px;
  overflow:hidden;
  border-radius:22px;
  background:var(--forest-deep);
  box-shadow:0 24px 70px rgba(30,43,32,.18);
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  outline:none;
}

.walk__track{
  display:flex;
  width:100%;
  height:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
  transition:transform .75s var(--ease);
}

.room{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:1;
  transform:scale(1);
  transition:transform .75s var(--ease);
}

.room::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(20,27,22,.08) 0%,
      rgba(20,27,22,.02) 42%,
      rgba(12,17,13,.72) 100%
    );
  pointer-events:none;
}

.room__content{
  position:absolute;
  left:clamp(22px,4vw,56px);
  right:clamp(22px,4vw,56px);
  bottom:clamp(92px,10vw,130px);
  z-index:2;
  color:var(--cream);
}

.room__number{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--amber);
  margin-bottom:10px;
}

.room__tag{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2rem,4vw,3.8rem);
  line-height:1;
  letter-spacing:-.025em;
  color:var(--cream);
}

.room__note{
  margin-top:12px;
  max-width:46ch;
  color:rgba(243,236,221,.82);
  font-size:clamp(.88rem,1.3vw,1rem);
  line-height:1.55;
}

.walk__arrow{
  position:absolute;
  top:50%;
  z-index:8;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(243,236,221,.38);
  border-radius:50%;
  background:rgba(30,43,32,.48);
  color:var(--cream);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  font-size:25px;
  line-height:1;
  transition:
    background .25s var(--ease),
    border-color .25s var(--ease),
    transform .25s var(--ease);
}

.walk__arrow:hover{
  background:var(--amber);
  border-color:var(--amber);
  color:var(--forest-deep);
  transform:translateY(-50%) scale(1.08);
}

.walk__arrow:active{
  transform:translateY(-50%) scale(.96);
}

.walk__arrow--prev{
  left:clamp(14px,2vw,28px);
}

.walk__arrow--next{
  right:clamp(14px,2vw,28px);
}

.walk__hud{
  position:absolute;
  left:clamp(18px,3vw,40px);
  right:clamp(18px,3vw,40px);
  bottom:clamp(18px,3vw,30px);
  z-index:7;
  display:flex;
  align-items:center;
  gap:18px;
  padding:10px 14px;
  border:1px solid rgba(243,236,221,.16);
  border-radius:999px;
  background:rgba(20,27,22,.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--cream);
}

.walk__count{
  display:flex;
  align-items:baseline;
  gap:4px;
  min-width:48px;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.04em;
  opacity:.9;
}

.walk__count em{
  font-style:normal;
  color:var(--amber);
  font-size:1rem;
}

.walk__trail{
  display:flex;
  align-items:center;
  gap:9px;
}

.walk__dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  padding:0;
  border:1px solid rgba(243,236,221,.58);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:
    width .3s var(--ease),
    background .3s var(--ease),
    border-color .3s var(--ease),
    transform .3s var(--ease);
}

.walk__dot:hover{
  border-color:var(--cream);
  transform:scale(1.25);
}

.walk__dot.is-active{
  width:24px;
  border-radius:999px;
  background:var(--amber);
  border-color:var(--amber);
}

.walk__hint{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(243,236,221,.65);
}

@media (max-width:720px){
  .walk{
    min-height:auto;
    padding-top:105px;
  }

  .walk__title{
    font-size:clamp(2.25rem,12vw,3.7rem);
  }

  .walk__sub{
    margin-top:14px;
  }

  .walk__frame{
    height:68vh;
    min-height:470px;
    border-radius:16px;
  }

  .room__content{
    bottom:100px;
  }

  .room__tag{
    font-size:clamp(1.9rem,9vw,2.8rem);
  }

  .walk__arrow{
    width:44px;
    height:44px;
    font-size:20px;
  }

  .walk__hud{
    left:12px;
    right:12px;
    bottom:12px;
    gap:12px;
    padding:9px 11px;
  }

  .walk__hint{
    display:none;
  }

  .walk__trail{
    flex:1;
    justify-content:center;
  }
}

@media (max-width:480px){
  .walk{
    padding-left:14px;
    padding-right:14px;
  }

  .walk__frame{
    height:70vh;
    min-height:450px;
  }

  .walk__arrow{
    width:40px;
    height:40px;
  }

  .walk__arrow--prev{
    left:10px;
  }

  .walk__arrow--next{
    right:10px;
  }

  .walk__dot{
    width:7px;
    height:7px;
    flex-basis:7px;
  }

  .walk__dot.is-active{
    width:20px;
  }

  .room__content{
    left:20px;
    right:20px;
    bottom:92px;
  }
}

@media (prefers-reduced-motion:reduce){
  .walk__track,
  .room,
  .walk__arrow,
  .walk__dot{
    transition:none !important;
  }
}

/* =========================================================
   SECTION SHARED
   ========================================================= */

.section__eyebrow{
  font-family:var(--mono);

  font-size:.78rem;

  letter-spacing:.08em;

  text-transform:uppercase;

  color:var(--wood);

  margin-bottom:14px;
}


.section__eyebrow--light{
  color:var(--amber);
}


.section__title{
  font-family:var(--display);

  font-weight:500;

  font-size:clamp(1.8rem,3.4vw,2.6rem);

  line-height:1.12;

  letter-spacing:-.01em;

  max-width:18ch;
}


.section__title--light{
  color:var(--cream);
}


/* =========================================================
   ABOUT
   ========================================================= */

.about{
  padding:clamp(80px,12vw,140px)
          clamp(20px,6vw,64px);

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:64px;

  max-width:1280px;

  margin:0 auto;
}


.about__text{
  margin-top:22px;

  line-height:1.7;

  color:#4A4038;

  max-width:52ch;
}


.amenities{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:28px 32px;
}


.amenities li{
  display:flex;

  gap:14px;
}


.amenities__ico{
  color:var(--amber);

  font-size:.8rem;

  margin-top:6px;
}


.amenities strong{
  font-family:var(--display);

  font-weight:500;

  font-size:1.05rem;
}


.amenities p{
  margin-top:4px;

  font-size:.92rem;

  color:#5C5145;

  line-height:1.55;
}


/* =========================================================
   GALLERY
   ========================================================= */

.gallery{
  padding:
    clamp(60px,10vw,120px)
    clamp(20px,6vw,64px)
    clamp(80px,10vw,120px);

  background:var(--mist);
}


.gallery__grid{
  margin-top:40px;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:16px;
}


.gallery__item{
  aspect-ratio:4/3;

  border-radius:var(--radius);

  display:flex;

  align-items:flex-end;

  padding:18px;

  position:relative;

  overflow:hidden;

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;
}


.gallery__item::after{
  content:'';

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.45),
      transparent 55%
    );
}


.gallery__item span{
  position:relative;

  z-index:1;

  color:var(--cream);

  font-family:var(--display);

  font-size:1.05rem;
}


.gallery__note{
  margin-top:22px;

  font-size:.82rem;

  color:#5C5145;

  font-style:italic;
}


/* =========================================================
   LOCATION
   ========================================================= */

.location{
  display:grid;

  grid-template-columns:1fr 1fr;

  min-height:70vh;
}


.location__map{
  position:relative;

  width:100%;

  min-height:400px;
}


.location__map iframe{
  width:100%;

  height:100%;

  border:0;

  display:block;
}


.location__info{
  padding:
    clamp(60px,8vw,100px)
    clamp(20px,6vw,64px);

  display:flex;

  flex-direction:column;

  justify-content:center;
}


.location__list{
  margin-top:30px;

  display:flex;

  flex-direction:column;

  gap:0;
}


.location__list li{
  display:flex;

  justify-content:space-between;

  align-items:baseline;

  padding:14px 0;

  border-bottom:1px solid rgba(34,29,24,.12);

  font-family:var(--display);

  font-size:1.05rem;
}


.location__list em{
  font-style:normal;

  font-family:var(--mono);

  font-size:.8rem;

  color:var(--wood);
}


/* =========================================================
   PRICING
   ========================================================= */

.pricing{
  padding:
    clamp(80px,10vw,120px)
    clamp(20px,6vw,64px);

  max-width:920px;

  margin:0 auto;
}


.pricing__table{
  margin-top:40px;

  border-top:1px solid rgba(34,29,24,.15);
}


.pricing__row{
  display:grid;

  grid-template-columns:2fr 1fr 1fr;

  padding:18px 0;

  border-bottom:1px solid rgba(34,29,24,.12);

  align-items:baseline;
}


.pricing__row--head{
  font-family:var(--mono);

  font-size:.75rem;

  text-transform:uppercase;

  letter-spacing:.06em;

  color:var(--wood);

  border-bottom:1px solid var(--charcoal);
}


.pricing__row span:first-child{
  font-family:var(--display);

  font-size:1.05rem;
}


.pricing__row em{
  font-style:normal;

  color:#5C5145;

  font-size:.85rem;
}


.pricing__row span:nth-child(2){
  font-family:var(--mono);

  color:var(--amber);
}


/* =========================================================
   BOOKING
   ========================================================= */

.booking{
  background:var(--forest-deep);

  color:var(--cream);

  display:grid;

  grid-template-columns:1fr 1fr;

  padding:
    clamp(70px,10vw,110px)
    clamp(20px,6vw,64px);

  gap:56px;
}


.booking__text{
  margin-top:20px;

  color:var(--mist);

  line-height:1.7;

  max-width:44ch;
}


.booking__contact{
  margin-top:32px;

  display:flex;

  flex-direction:column;

  gap:10px;
}


.booking__contact a{
  font-family:var(--mono);

  font-size:.95rem;

  border-bottom:1px solid rgba(243,236,221,.3);

  width:fit-content;

  padding-bottom:2px;
}


.booking__form{
  display:flex;

  flex-direction:column;

  gap:18px;
}


.field label{
  display:block;

  font-family:var(--mono);

  font-size:.75rem;

  text-transform:uppercase;

  letter-spacing:.06em;

  color:var(--mist);

  margin-bottom:8px;
}


.field label span{
  opacity:.6;

  text-transform:none;
}


.field input,
.field textarea{
  width:100%;

  background:rgba(243,236,221,.06);

  border:1px solid rgba(243,236,221,.25);

  border-radius:8px;

  padding:12px 14px;

  color:var(--cream);

  font-family:var(--body);

  font-size:.95rem;

  transition:
    border-color .2s var(--ease),
    background .2s var(--ease);
}


.field input:focus,
.field textarea:focus{
  outline:none;

  border-color:var(--amber);

  background:rgba(243,236,221,.1);
}


.field--split{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:16px;
}


.booking__submit{
  margin-top:6px;

  padding:14px 22px;

  border:none;

  border-radius:8px;

  background:var(--amber);

  color:var(--forest-deep);

  font-family:var(--body);

  font-weight:600;

  font-size:.95rem;

  cursor:pointer;

  transition:
    transform .2s var(--ease),
    background .2s var(--ease);
}


.booking__submit:hover{
  background:#DDA05C;
}


.booking__submit:active{
  transform:scale(.98);
}


.booking__confirm{
  font-size:.88rem;

  color:var(--amber);

  min-height:1.2em;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  background:var(--forest-deep);

  color:var(--mist);

  border-top:1px solid rgba(243,236,221,.12);

  padding:22px clamp(20px,6vw,64px);

  display:flex;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:8px;

  font-size:.82rem;
}


.footer__link{
  color:var(--amber);

  text-decoration:underline;

  text-underline-offset:3px;

  transition:opacity .2s var(--ease);
}


.footer__link:hover{
  opacity:.8;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible{
  outline:2px solid var(--amber);

  outline-offset:2px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:860px){

  .about{
    grid-template-columns:1fr;
  }

  .amenities{
    grid-template-columns:1fr;
  }

  .location{
    grid-template-columns:1fr;
  }

  .location__map{
    min-height:350px;
  }

  .booking{
    grid-template-columns:1fr;
  }

  .field--split{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width:720px){

  .topbar{
    padding:12px 16px;
  }


  .topbar__mark{
    font-size:1rem;
  }


  .topbar__right{
    gap:8px;
  }


  /* Hamburger se prikazuje */

  .menu-toggle{
    display:flex;

    order:1;
  }


  /* Akcije ostaju uvijek vidljive */

  .topbar__actions{
    order:2;
  }


  /*
     Navigacija je sakrivena dok se ne otvori
     hamburger.
  */

  .topbar__nav{
    position:absolute;

    top:100%;

    left:12px;
    right:12px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    padding:8px;

    background:rgba(30,43,32,.98);

    border:1px solid rgba(243,236,221,.12);

    border-radius:12px;

    box-shadow:0 12px 30px rgba(0,0,0,.3);

    opacity:0;

    visibility:hidden;

    transform:translateY(-8px);

    transition:
      opacity .25s var(--ease),
      visibility .25s var(--ease),
      transform .25s var(--ease);
  }


  .topbar__nav.is-open{
    opacity:1;

    visibility:visible;

    transform:translateY(0);
  }


  .topbar__nav a{
    padding:14px 12px;

    border-radius:8px;

    opacity:.9;
  }


  .topbar__nav a:hover{
    background:rgba(243,236,221,.08);

    opacity:1;
  }


  /* Rezerviši + jezik ostaju van menija */

  .topbar__actions .topbar__cta{
    padding:8px 12px;

    font-size:.78rem;
  }


  .language-toggle{
    padding:8px 11px;

    min-width:42px;

    font-size:.7rem;
  }


  .walk__hud{
    flex-direction:row-reverse;

    bottom:20px;

    right:20px;
  }


  .walk__trail{
    flex-direction:row;
  }


  .gallery__grid{
    grid-template-columns:1fr 1fr;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

  .topbar__mark{
    font-size:.9rem;
  }


  .topbar__right{
    gap:6px;
  }


  .menu-toggle{
    width:38px;
    height:38px;
  }


  .topbar__actions{
    gap:5px;
  }


  .topbar__actions .topbar__cta{
    padding:7px 10px;

    font-size:.7rem;
  }


  .language-toggle{
    min-width:40px;

    padding:7px 9px;

    font-size:.65rem;
  }


  .gallery__grid{
    grid-template-columns:1fr;
  }


  .pricing__row{
    grid-template-columns:1.6fr 1fr 1fr;

    font-size:.92rem;
  }

}