/*
  CABINDESIGN 4 — osnovni sistem (general.css)

  Pravac: priroda i digitalizacija. Fotografija planina se preliva u
  pozadinu strane (kao na Maglici), preko nje stakleni digitalni sloj.
  Sve ostalo na mirnoj podlozi boje magle. Inter za tekst, Hanken Grotesk
  samo za natpis u logu (iz dizajna logoa). BEZ kurziva (pravilo za svaki
  sajt), dugmad u obliku pilule, boja teme = zelena iz logoa.

  Mobile-first: osnovni stil je telefon 390×844 (oko 90% poseta). Upiti
  su u style.css uz samu komponentu: 48em tablet, 64em desktop, 80em.

  TOKENI PO ULOZI
  Zamka iz ranijih projekata: varijabla koja je boja naslova bila je i
  podloga, pa su u tamnoj temi ispala bela slova na svetloj podlozi.
  Komponente koriste SAMO tokene uloga; tamno.css menja samo njih.
  Paletne vrednosti (--p-*) su sirovina i ne pišu se u komponentu.

  RAZMACI (rem, 1rem = 10px): .4 / .8 / 1.2 / 1.6 / 2.4 / 3.2 / 4.8 / 6.4 / 8 / 9.6
*/

/* ////////////////////////////////////////////////////////////////////
   TOKENI
   //////////////////////////////////////////////////////////////////// */

:root {
  /* PALETA — sirovina (zelena i papir su iz dizajna logoa) */
  --p-magla: #e9ece6;
  --p-magla-2: #dfe4dc;
  --p-kadulja: #c7d1c0;
  --p-bor: #2a5a3b;
  --p-bor-svetli: #8cc79b;
  --p-noc: #0f1411;
  --p-tinta: #1c2620;
  --p-papir: #f2eee4;
  --p-tekst: #161c18;
  --p-tekst-tiho: #515a53;
  --p-zar: #e6993f;
  --p-zlato: #f2b84b;
  /* žar kao TEKST: #e6993f na magli ima kontrast ~2:1 → tamnija nijansa */
  --p-zar-tekst: #8a4715;

  /* ULOGE — površine */
  --pozadina: var(--p-magla);
  --pozadina-2: var(--p-magla-2);
  --povrsina: #f8f9f6;
  --povrsina-2: #eef1eb;
  --kartica: #f8f9f6;
  --kartica-ivica: rgb(255 255 255 / 0.9);
  --kartica-senka: 0 0.1rem 0.2rem rgb(29 52 40 / 0.04), 0 1.8rem 4rem -2rem rgb(29 52 40 / 0.22);

  /* ULOGE — tekst */
  --tekst: var(--p-tekst);
  --tekst-tiho: var(--p-tekst-tiho);
  --tekst-ugaseno: #8a928b;
  --naslov: var(--p-noc);
  --ivica: rgb(15 20 17 / 0.08);
  --ivica-jaka: rgb(15 20 17 / 0.16);

  /* ULOGE — boja teme (zelena iz logoa). Tekst i crte — NIKAD podloga sa
     tekstom preko (za to postoji --dugme-bor) */
  --tema: var(--p-bor);
  --tema-blago: rgb(42 90 59 / 0.1);

  /* ULOGE — žar (akcenat). Štedljivo: tačke, oznake. */
  --akcenat: var(--p-zar);
  --akcenat-tekst: var(--p-zar-tekst);
  --akcenat-blago: rgb(230 153 63 / 0.16);

  --kvacica: var(--p-bor);

  /* ULOGE — LOGO: tinta za krov i kvadrate, tema za „upaljen" kvadrat */
  --logo-tinta: var(--p-tinta);
  --logo-akcenat: var(--p-bor);
  --logo-rs: var(--p-bor);

  /* ULOGE — dugmad */
  --dugme-puno-pozadina: var(--p-noc);
  --dugme-puno-tekst: #f5f6f1;
  --dugme-puno-senka: 0 0.6rem 1.8rem -0.4rem rgb(15 20 17 / 0.35);
  --tiho-dugme: rgb(15 20 17 / 0.06);
  --tiho-dugme-hover: rgb(15 20 17 / 0.1);

  /* TAMNA KARTICA (istaknut model saradnje) — tamna i u svetloj temi */
  --traka-pozadina: #111a15;
  --traka-tekst: #eef1ea;
  --traka-tiho: #a7b3a9;
  --traka-ivica: rgb(238 241 234 / 0.09);
  --traka-akcenat: #f3c893;

  /* ULOGE — staklo (samo slojevi koji PLUTAJU: zaglavlje, traka, hero) */
  --staklo-pozadina: rgb(248 249 245 / 0.66);
  --staklo-gusto: rgb(248 249 245 / 0.86);
  --staklo-cvrsto: rgb(248 249 245 / 0.97);
  --staklo-ivica: rgb(255 255 255 / 0.6);
  --staklo-odsjaj: rgb(255 255 255 / 0.85);
  --tab-tekst: #3f4640;
  --tab-socivo: rgb(15 20 17 / 0.075);
  --nav-aktivan: rgb(15 20 17 / 0.065);

  /* pločice u kontakt listi — prigušeni tonovi aplikacija, bela ikona */
  --kontakt-telefon: var(--p-bor);
  --kontakt-viber: #665b98;
  --kontakt-whatsapp: #2f7a55;
  --kontakt-mejl: #4a5963;

  /* ULOGE — senke. Meke, dugačke, u tonu bora (nikad čisto crne). */
  --senka-1: 0 0.1rem 0.2rem rgb(29 52 40 / 0.05), 0 0.8rem 2.4rem -0.8rem rgb(29 52 40 / 0.16);
  --senka-2: 0 0.2rem 0.6rem rgb(29 52 40 / 0.06), 0 1.6rem 4rem -1.2rem rgb(29 52 40 / 0.26);
  --senka-3: 0 0.4rem 1.2rem rgb(15 20 17 / 0.08), 0 3.2rem 8rem -1.6rem rgb(15 20 17 / 0.4);
  --senka-karton: 0 0.2rem 0.4rem rgb(15 20 17 / 0.06), 0 3rem 7rem -3rem rgb(15 20 17 / 0.45);

  --fokus: var(--p-bor);

  /* HERO — boja strane kao RGB trojka: veo se preliva u nju, pa
     fotografija nestaje u pozadini bez ivice (kao na Maglici) */
  --veo-rgb: 233 236 230;
  --magla-sloj: rgb(255 255 255 / 0.5);
  --zar-sjaj: rgb(236 158 70 / 0.42);
  --hero-uvod: #2d332e;
  --naslov-akcenat: var(--p-bor);

  /* HERO — mali kalendar i panel na staklu */
  --dan-zauzet-tekst: #9ba19a;
  --dan-srafura: rgb(15 20 17 / 0.13);
  --dan-raspon-tekst: #1d3428;
  --dan-izabran-pozadina: var(--p-noc);
  --dan-izabran-tekst: #f5f6f1;
  --hk-raspon: rgb(42 90 59 / 0.16);
  --hk-plocica: rgb(255 255 255 / 0.55);
  --graf-stubac: #4f8a67;
  --graf-istaknuto: #e59a3a;

  /* UVERITE SE — podloge ispod prikaza sajta i aplikacije */
  --proba-sajt-pozadina: linear-gradient(160deg, #dde6d8 0%, #bfceb9 100%);
  --proba-aplikacija-pozadina: linear-gradient(160deg, #f3e7d3 0%, #e3c9a1 100%);
  --pregledac-traka: #f4f5f1;
  --pregledac-adresa: #e6e9e3;

  /* ŠTA DOBIJATE — podloge tri glavne kartice */
  --korist-sajt: linear-gradient(160deg, #e3eadf 0%, #cfdcca 100%);
  --korist-kalendar: linear-gradient(160deg, #f5ead8 0%, #ead3b0 100%);
  --korist-aplikacija: linear-gradient(160deg, #e2e9e8 0%, #cbd8d6 100%);
  --korist-broj: rgb(15 20 17 / 0.12);
  --korist-ikona-pozadina: rgb(255 255 255 / 0.7);

  /* čipovi u projektima */
  --lista-pozadina: rgb(255 255 255 / 0.7);

  /* OBLICI */
  --r-pilula: 100rem;
  --r-karton: 3.2rem;
  --r-kartica: 2.8rem;
  --r-mala: 2rem;

  /* KRETANJE — iOS krive */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-izlaz: cubic-bezier(0.22, 1, 0.36, 1);
  --opruga: var(--ease-ios);

  /* TIPOGRAFIJA */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-logo: "Hanken Grotesk", var(--font);
  --fs-h2: clamp(3.4rem, 8.4vw, 6rem);
  --fs-telo: 1.65rem;

  --visina-zaglavlja: 5.6rem;
}

/* Opruge — linear() gde postoji (Safari 17.2+, Chrome 113+) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --opruga: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.5%, 1.061 22.6%, 1.074 25.7%, 1.067 29.4%, 1.026 38.4%, 1.006 44.4%, 0.996 53.3%, 1);
  }
}

@media (min-width: 64em) {
  :root {
    --r-karton: 4rem;
  }
}

/* ////////////////////////////////////////////////////////////////////
   OSNOVA
   //////////////////////////////////////////////////////////////////// */

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

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--pozadina);
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

/* VELIKI EKRANI (2K, 4K) — sve je u rem, pa se cela strana srazmerno
   uveća iznad 1920 px širine: 10 px pri 1920, do 20 px pri 3840. Bez
   ovoga je na 4K monitoru sadržaj bio trećina ekrana, a ostalo prazno.
   Upiti u em se ne menjaju (računaju se od podrazumevanih 16 px). */
@media (min-width: 120em) {
  html {
    font-size: min(0.5208vw, 20px);
  }
}

/* Lenis sam vodi skrol — native smooth bi mu se otimao */
html.lenis,
html.lenis body {
  height: auto;
  scroll-behavior: auto;
}

body {
  font-family: var(--font);
  font-size: var(--fs-telo);
  font-optical-sizing: auto;
  line-height: 1.55;
  color: var(--tekst);
  background-color: var(--pozadina);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* iOS ne poštuje overflow:hidden na body-ju — telo se fiksira, a
   skrol se vraća u script.js (zakljucajSkrol) */
body.skrol-zakljucan {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

/* NIKAD kurziv — pravilo za svaki sajt */
em,
i,
cite,
address {
  font-style: normal;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: default;
}

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

ul,
ol {
  list-style: none;
}

strong {
  font-weight: 600;
}

/* bez ovoga `hidden` ne radi na elementima koji su flex/grid */
[hidden] {
  display: none !important;
}

:focus {
  outline: none;
}

/* prsten samo pri kretanju tastaturom (Studenac: *:focus je ostavljao
   okvir posle klika mišem) */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 0.6rem;
}

::selection {
  background: var(--akcenat-blago);
  color: var(--naslov);
}

/* SVG sprite NE sme biti display:none — <use> tada prestane da radi */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ikona {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* reči sa crticom se lome na kraju reda („Booking-" / „a") */
.bez-loma {
  white-space: nowrap;
}

.preskoci {
  position: fixed;
  z-index: 100;
  top: 1.2rem;
  left: 1.2rem;
  padding: 1.2rem 2rem;
  border-radius: var(--r-pilula);
  background: var(--dugme-puno-pozadina);
  color: var(--dugme-puno-tekst);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 300ms var(--ease-ios);
}

.preskoci:focus-visible {
  transform: none;
}

/* ////////////////////////////////////////////////////////////////////
   RASPORED
   //////////////////////////////////////////////////////////////////// */

.omot {
  width: 100%;
  max-width: 124rem;
  margin-inline: auto;
  padding-inline: 2rem;
}

.sekcija {
  padding-block: 8rem;
}

.sekcija-glava {
  max-width: 68rem;
  margin-bottom: 4rem;
}

.sekcija-glava--sredina {
  margin-inline: auto;
  text-align: center;
}

.nadnaslov {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-tiho);
}

.nadnaslov::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--akcenat);
  box-shadow: 0 0 0 0.4rem var(--akcenat-blago);
}

.naslov-sekcije {
  margin-top: 1.4rem;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--naslov);
  text-wrap: balance;
}

.uvod-sekcije {
  margin-top: 1.8rem;
  font-size: 1.75rem;
  line-height: 1.55;
  color: var(--tekst-tiho);
  max-width: 58rem;
  text-wrap: pretty;
}

.sekcija-glava--sredina .uvod-sekcije {
  margin-inline: auto;
}

@media (min-width: 48em) {
  .omot {
    padding-inline: 3.2rem;
  }
}

@media (min-width: 64em) {
  .sekcija {
    padding-block: 12rem;
  }

  .sekcija-glava {
    margin-bottom: 5.6rem;
  }

  .omot {
    padding-inline: 4.8rem;
  }
}

/* ////////////////////////////////////////////////////////////////////
   DUGMAD
   `:link` / `:visited` NE važe za <button> — zato se svaka varijanta
   piše kao obična klasa (zamka iz CLAUDE.md, desila se dvaput).
   //////////////////////////////////////////////////////////////////// */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 5rem;
  padding: 0 2.4rem;
  border-radius: var(--r-pilula);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 450ms var(--opruga), background-color 250ms ease, color 250ms ease,
    box-shadow 300ms ease, opacity 250ms ease;
}

.btn .ikona {
  width: 1.9rem;
  height: 1.9rem;
}

.btn:active:not(:disabled) {
  transform: scale(0.96);
}

.btn--puno {
  background-color: var(--dugme-puno-pozadina);
  color: var(--dugme-puno-tekst);
  box-shadow: var(--dugme-puno-senka);
}

/* belo dugme stoji na tamnoj kartici — isto u obe teme */
.btn--belo {
  background-color: #ffffff;
  color: #0f1411;
  box-shadow: 0 0.8rem 2.4rem -0.8rem rgb(0 0 0 / 0.45);
}

/* stakleno dugme na svetloj fotografiji (hero) */
.btn--staklo {
  color: var(--naslov);
  background-color: var(--staklo-pozadina);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--staklo-odsjaj), inset 0 0 0 1px var(--staklo-ivica), var(--senka-1);
}

.btn--tiho {
  background-color: var(--tiho-dugme);
  color: var(--tekst);
}

.btn--malo {
  min-height: 4.2rem;
  padding: 0 1.8rem;
  font-size: 1.5rem;
}

@media (hover: hover) {
  .btn--puno:hover {
    box-shadow: 0 1.2rem 2.8rem -0.6rem rgb(15 20 17 / 0.42);
    transform: translateY(-1px);
  }

  .btn--belo:hover {
    background-color: #f1f3ee;
  }

  .btn--staklo:hover {
    background-color: var(--staklo-gusto);
  }

  .btn--tiho:hover {
    background-color: var(--tiho-dugme-hover);
  }
}

/* okruglo dugme sa ikonom (tema u zaglavlju) */
.krug-dugme {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background-color 250ms ease, transform 450ms var(--opruga);
}

.krug-dugme:active {
  transform: scale(0.92);
}

/* ////////////////////////////////////////////////////////////////////
   STAKLO — samo za slojeve koji PLUTAJU (zaglavlje, traka, hero)

   - U backdrop-filter se pišu DOSLOVNE vrednosti, ne var(): Safari je
     imao grešku sa promenljivama u ovom svojstvu.
   - Uvek i -webkit-backdrop-filter (Safari).
   - Roditelj staklenog sloja ne sme da dobije opacity < 1, filter ili
     masku: to pravi novi „backdrop root", pa staklo zamućuje samo ono
     što je unutar roditelja (tj. ništa).
   //////////////////////////////////////////////////////////////////// */

.staklo {
  background-color: var(--staklo-pozadina);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--staklo-odsjaj), inset 0 0 0 0.5px var(--staklo-ivica), var(--senka-2);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .staklo {
    background-color: var(--staklo-cvrsto);
  }
}

/* kvačice — spisak sa ikonom. Stavka NIJE flex/grid: tekst sa
   <span class="bez-loma"> bi se raspao na zasebne kolone. Ikona stoji
   apsolutno, tekst teče normalno. */
.kvacice {
  display: grid;
  gap: 1rem;
}

.kvacice li {
  position: relative;
  padding-left: 2.8rem;
  font-size: 1.55rem;
  line-height: 1.45;
}

.kvacice .ikona {
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--kvacica);
  stroke-width: 2.2;
}

.kvacice-napomena {
  color: var(--tekst-tiho);
}

.kvacice .kvacice-napomena .ikona {
  color: var(--tekst-ugaseno);
  stroke-width: 1.7;
}

/* čipovi — male pilule sa činjenicama (projekti) */
.cip {
  display: inline-flex;
  align-items: center;
  min-height: 3.2rem;
  padding: 0 1.2rem;
  border-radius: var(--r-pilula);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--tekst);
  background: var(--lista-pozadina);
  box-shadow: inset 0 0 0 1px var(--ivica);
  white-space: nowrap;
}

/* živa tačka — žar koji „diše" */
.tacka-ziva {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--akcenat);
}

.tacka-ziva::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--akcenat);
  animation: ping 2.4s var(--ease-izlaz) infinite;
}

@keyframes ping {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

/* ////////////////////////////////////////////////////////////////////
   OTKRIVANJE PRI SKROLU — važi samo pod html.js (skripta u <head>-u je
   skida ako script.js ne proradi). Posle ulaska script.js skida
   atribut, da transform ne blokira hover (konvencija iz Studenca).
   //////////////////////////////////////////////////////////////////// */

.js [data-otkrij],
.js [data-otkrij-grupa] > * {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 900ms var(--ease-izlaz) var(--kasnjenje, 0s),
    transform 1100ms var(--ease-izlaz) var(--kasnjenje, 0s);
}

.js [data-otkrij].je-vidljiv,
.js [data-otkrij-grupa] > .je-vidljiv {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }

  .js [data-otkrij],
  .js [data-otkrij-grupa] > * {
    transform: none;
  }
}