/*
 * ============================================================
 * CVEĆARA IVONA — Styles.css
 * ============================================================
 * Paleta boja:
 *   --boja-primarna:     #1C1410  (duboka tamna čokolada)
 *   --boja-sekundarna:   #6B2737  (bordo/tamna ruža)
 *   --boja-akcent:       #C9A96E  (toplo zlato)
 *   --boja-svetla:       #FAF6F1  (krem/topla bela)
 *   --boja-tamna:        #0E0B09  (skoro crna)
 *   --boja-tekst:        #2A1F1A  (tamna topla)
 *   --boja-tekst-svetli: #8C7B72  (siva bež)
 * ============================================================
 */

:root {
  --boja-primarna:     #1C1410;
  --boja-sekundarna:   #6B2737;
  --boja-akcent:       #C9A96E;
  --boja-svetla:       #FAF6F1;
  --boja-tamna:        #0E0B09;
  --boja-tekst:        #2A1F1A;
  --boja-tekst-svetli: #8C7B72;

  --font-naslov: 'Playfair Display', Georgia, serif;
  --font-telo:   'DM Sans', system-ui, sans-serif;

  --razmak-xs:  8px;
  --razmak-sm:  16px;
  --razmak-md:  32px;
  --razmak-lg:  64px;
  --razmak-xl:  128px;

  --prelaz-brz: 0.2s ease;
  --prelaz-spor: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --radijus-sm:  4px;
  --radijus-md:  12px;
  --radijus-lg:  24px;
  --radijus-krug: 9999px;

  --kontejner-max: 1440px;
  --nav-visina:    80px;
}

/* ============================================================
   RESET I OSNOVE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-telo);
  color: var(--boja-tekst);
  background-color: var(--boja-svetla);
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
}

body.loader-aktivan {
  overflow: hidden;
}

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

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

ul {
  list-style: none;
}

address {
  font-style: normal;
}

/* ============================================================
   PRISTUPAČNOST
   ============================================================ */

.preskok-na-sadrzaj {
  position: absolute;
  top: -100px;
  left: var(--razmak-sm);
  background: var(--boja-primarna);
  color: var(--boja-svetla);
  padding: var(--razmak-xs) var(--razmak-sm);
  z-index: 9999;
  border-radius: var(--radijus-sm);
  font-size: 14px;
  transition: top var(--prelaz-brz);
}

.preskok-na-sadrzaj:focus {
  top: var(--razmak-sm);
}

:focus-visible {
  outline: 2px solid var(--boja-akcent);
  outline-offset: 3px;
  border-radius: var(--radijus-sm);
}

/* ============================================================
   LOADER
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  background: var(--boja-primarna);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader.skriven {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-sadrzaj {
  text-align: center;
}

.loader-naziv {
  display: block;
  font-family: var(--font-naslov);
  font-size: 48px;
  font-weight: 300;
  color: var(--boja-svetla);
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  font-style: italic;
}

.loader-linija {
  width: 200px;
  height: 1px;
  background: rgba(250,246,241,0.2);
  margin: 0 auto;
  overflow: hidden;
}

.loader-progres {
  height: 100%;
  background: var(--boja-akcent);
  width: 0%;
  transition: width 1.2s ease;
}

/* ============================================================
   CUSTOM KURSOR
   ============================================================ */

.kursor {
  position: fixed;
  pointer-events: none;
  z-index: 8000;
  top: 0;
  left: 0;
}

.kursor-tacka {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--boja-sekundarna);
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
}

.kursor-krug {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--boja-akcent);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
  opacity: 0.7;
}

.kursor.na-linku .kursor-krug {
  width: 56px;
  height: 56px;
  border-color: var(--boja-sekundarna);
  opacity: 1;
}

.kursor.na-dugmetu .kursor-krug {
  width: 70px;
  height: 70px;
  background: rgba(201,169,110,0.1);
}

/* ============================================================
   KONTEJNER
   ============================================================ */

.kontejner {
  max-width: var(--kontejner-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5%, 80px);
}

/* ============================================================
   NAVIGACIJA
   ============================================================ */

.zaglavlje {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background var(--prelaz-spor), box-shadow var(--prelaz-spor), padding var(--prelaz-spor);
}

.navigacija {
  padding: 0;
}

.nav-kontejner {
  max-width: var(--kontejner-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5%, 80px);
  height: var(--nav-visina);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--razmak-md);
  transition: height var(--prelaz-spor);
}

.zaglavlje.skrolovano {
  background: rgba(250, 246, 241, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(28, 20, 16, 0.08);
}

.zaglavlje.skrolovano .nav-kontejner {
  height: 64px;
}

/* Logo */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  transition: opacity var(--prelaz-brz);
}

.logo:hover {
  opacity: 0.75;
}

.logo-naziv {
  font-family: var(--font-naslov);
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  color: var(--boja-primarna);
  letter-spacing: 0.02em;
  transition: color var(--prelaz-brz);
}

.logo-podnaziv {
  font-family: var(--font-telo);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--boja-tekst-svetli);
}

.logo--svetla .logo-naziv {
  color: var(--boja-svetla);
}

.logo--svetla .logo-podnaziv {
  color: rgba(250,246,241,0.6);
}

/* Hero logo — belo na tamnoj pozadini */
.hero ~ .zaglavlje .logo-naziv,
.nav-meni--otvoren ~ .logo-naziv {
  color: var(--boja-svetla);
}

/* Nav meni */
.nav-meni {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.nav-veza {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boja-primarna);
  padding: 4px 0;
  position: relative;
  transition: color var(--prelaz-brz);
}

.nav-veza::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--boja-akcent);
  transition: width var(--prelaz-spor);
}

.nav-veza:hover::after,
.nav-veza:focus-visible::after {
  width: 100%;
}

.nav-veza--akcija {
  background: var(--boja-sekundarna);
  color: var(--boja-svetla) !important;
  padding: 10px 22px;
  border-radius: var(--radijus-krug);
  letter-spacing: 0.1em;
  transition: background var(--prelaz-brz), transform var(--prelaz-brz);
}

.nav-veza--akcija::after {
  display: none;
}

.nav-veza--akcija:hover {
  background: var(--boja-primarna);
  transform: translateY(-1px);
}

/* Navigacija je uvek na svetloj pozadini — split hero je krem */
.zaglavlje:not(.skrolovano) .logo-naziv {
  color: var(--boja-primarna);
}

.zaglavlje:not(.skrolovano) .logo-podnaziv {
  color: var(--boja-tekst-svetli);
}

.zaglavlje:not(.skrolovano) .nav-veza {
  color: var(--boja-primarna);
}

.zaglavlje:not(.skrolovano) .nav-veza--akcija {
  background: var(--boja-sekundarna);
  border: 1px solid var(--boja-sekundarna);
  color: var(--boja-svetla) !important;
}

.zaglavlje:not(.skrolovano) .nav-veza--akcija:hover {
  background: var(--boja-primarna);
  border-color: var(--boja-primarna);
}

.zaglavlje:not(.skrolovano) .nav-telefon {
  color: var(--boja-primarna);
}

/* Skrolovana navigacija */

.nav-telefon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--boja-primarna);
  letter-spacing: 0.05em;
  transition: color var(--prelaz-brz);
  white-space: nowrap;
}

.nav-telefon:hover {
  color: var(--boja-sekundarna);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  z-index: 100;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--boja-primarna);
  transition: transform var(--prelaz-brz), opacity var(--prelaz-brz);
}

.zaglavlje:not(.skrolovano) .hamburger span {
  background: var(--boja-svetla);
}

/* ============================================================
   HERO — SPLIT SCREEN (levo krem + desno foto)
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

/* Grid: levo 52% krem, desno 48% foto — više prostora za tekst */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  min-height: 100svh;
}

/* ---- LEVA STRANA ---- */
.hero-levo {
  background: var(--boja-svetla);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-visina) + 56px) 48px 48px 60px;
  overflow: hidden;
  z-index: 2;
  /* min-width:0 sprečava flex item da se širi van grid kolone */
  min-width: 0;
  box-sizing: border-box;
}

/* Suptilna tekstura — točkaste mrežice */
.hero-levo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(107,39,55,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Zlatna vertikalna linija desne ivice leve strane */
.hero-levo::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--boja-akcent) 30%, var(--boja-akcent) 70%, transparent);
  z-index: 3;
}

.hero-sadrzaj {
  position: relative;
  z-index: 2;
  /* Split hero: sadržaj ostaje dovoljno širok, bez sabijanja teksta */
  width: 100%;
  max-width: 560px;
  min-width: 0;
  box-sizing: border-box;
}

/* Etiketa */
.hero-etiketa {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--boja-tekst-svetli);
  margin-bottom: clamp(24px, 3vh, 48px);
}

.hero-etiketa-linija {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--boja-akcent);
  flex-shrink: 0;
}

/* Naslov — čitljivi celi redovi */
.hero-naslov {
  font-family: var(--font-naslov);
  font-size: clamp(40px, 4.5vw, 80px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--boja-primarna);
  margin-bottom: clamp(16px, 2.5vh, 32px);
  width: 100%;
  min-width: 0;
}

.hero-naslov-red {
  display: block;
  /* overflow:hidden uklonjeno — nije potrebno i kvari širinu potomaka */
}

.hero-naslov-red--kurziv {
  font-style: italic;
  font-weight: 400;
  color: var(--boja-sekundarna);
  padding-left: 0.15em;
}

.hero-podnaslov {
  font-size: 16px;
  font-weight: 300;
  display: block;
  width: min(100%, 420px);
  max-width: 420px;
  min-width: 0;
  box-sizing: border-box;
  line-height: 1.75;
  color: var(--boja-tekst-svetli);
  margin-bottom: clamp(28px, 4vh, 48px);
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
}

/* Dugmad na tamnoj pozadini leve strane */
.hero-dugmad {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dugme--tamno {
  background: var(--boja-primarna);
  color: var(--boja-svetla);
  border-color: var(--boja-primarna);
}

.dugme--tamno:hover {
  background: var(--boja-sekundarna);
  border-color: var(--boja-sekundarna);
  transform: translateY(-2px);
}

.dugme--obris-tamno {
  background: transparent;
  color: var(--boja-primarna);
  border-color: rgba(28,20,16,0.3);
}

.dugme--obris-tamno:hover {
  background: var(--boja-primarna);
  color: var(--boja-svetla);
  border-color: var(--boja-primarna);
}

/* Statistike dno leve strane */
.hero-statistike {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding-top: 32px;
  border-top: 1px solid rgba(28,20,16,0.08);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;          /* jednaki prostor za sva tri */
  min-width: 0;
}

.hero-stat-broj {
  font-family: var(--font-naslov);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
  line-height: 1;
  color: var(--boja-primarna);
  font-style: italic;
  white-space: nowrap;
}

.hero-stat-jedinica {
  font-size: 13px;
  color: var(--boja-akcent);
  font-weight: 500;
  white-space: nowrap;
}

/* Broj + jedinica u istom redu */
.hero-stat-vrednost {
  display: flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
}

.hero-stat-opis {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boja-tekst-svetli);
  font-weight: 400;
  margin-top: 4px;
  white-space: nowrap;
}

.hero-stat-delilac {
  width: 1px;
  height: 32px;
  background: rgba(28,20,16,0.12);
  align-self: flex-end;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* ---- DESNA STRANA — foto ---- */
.hero-desno {
  position: relative;
  overflow: hidden;
}

.hero-foto-omot {
  position: absolute;
  inset: 0;
}

.hero-slika {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.18);
  transition: none;
  will-change: transform;
}

/* Gradijent koji se stapa s levom stranom */
.hero-foto-prelaz {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--boja-svetla) 0%,
    rgba(250,246,241,0.12) 18%,
    transparent 35%
  );
  pointer-events: none;
}

/* Plutajuća oznaka */
.hero-foto-natpis {
  position: absolute;
  bottom: 56px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(250,246,241,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(250,246,241,0.6);
  border-radius: var(--radijus-krug);
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--boja-primarna);
  z-index: 3;
  box-shadow: 0 8px 32px rgba(28,20,16,0.12);
}

.hero-foto-natpis-ikona {
  color: var(--boja-akcent);
  font-size: 10px;
}

/* Scroll strelica */
.hero-strelica {
  position: absolute;
  bottom: 56px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(250,246,241,0.5);
  border-radius: 50%;
  color: var(--boja-svetla);
  z-index: 3;
  transition: border-color var(--prelaz-brz), background var(--prelaz-brz);
}

.hero-strelica:hover {
  background: rgba(250,246,241,0.15);
  border-color: var(--boja-akcent);
}

/* Stara hero-pozadina i hero-overlay vise ne postoje */
.hero-pozadina,
.hero-overlay {
  display: none;
}

/* ============================================================
   DUGMAD
   ============================================================ */

.dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-telo);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--radijus-krug);
  transition: all var(--prelaz-brz);
  cursor: pointer;
  border: 1px solid transparent;
}

.dugme--puno {
  background: var(--boja-sekundarna);
  color: var(--boja-svetla);
  border-color: var(--boja-sekundarna);
}

.dugme--puno:hover {
  background: var(--boja-primarna);
  border-color: var(--boja-primarna);
  transform: translateY(-2px);
}

.dugme--obris {
  background: transparent;
  color: var(--boja-svetla);
  border-color: rgba(250,246,241,0.5);
}

.dugme--obris:hover {
  background: rgba(250,246,241,0.1);
  border-color: var(--boja-svetla);
}

.dugme--puno-width {
  width: 100%;
  justify-content: center;
}

/* Tamni obris za svetlu pozadinu */
.o-nama .dugme--obris,
.lokacije .dugme--obris {
  color: var(--boja-primarna);
  border-color: rgba(28,20,16,0.35);
}

.o-nama .dugme--obris:hover,
.lokacije .dugme--obris:hover {
  background: var(--boja-primarna);
  color: var(--boja-svetla);
  border-color: var(--boja-primarna);
}

/* ============================================================
   SEKCIJA ZAJEDNIČKI STILOVI
   ============================================================ */

.sekcija-etiketa {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--boja-tekst-svetli);
  margin-bottom: var(--razmak-sm);
  display: block;
}

.sekcija-etiketa--svetla {
  color: rgba(201,169,110,0.8);
}

.sekcija-naslov {
  font-family: var(--font-naslov);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--boja-primarna);
}

.sekcija-naslov em {
  font-style: italic;
  color: var(--boja-sekundarna);
}

.sekcija-zaglavlje {
  text-align: center;
  margin-bottom: var(--razmak-lg);
}

.sekcija-podnaslov {
  margin-top: var(--razmak-sm);
  font-size: 18px;
  font-weight: 300;
  color: var(--boja-tekst-svetli);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   O NAMA
   ============================================================ */

.o-nama {
  padding: var(--razmak-xl) 0;
  background: var(--boja-svetla);
  overflow: hidden;
}

.o-nama-mreža {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--razmak-xl);
  align-items: start;
}

.o-nama-naslov {
  font-family: var(--font-naslov);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--boja-primarna);
  margin-bottom: var(--razmak-md);
}

.o-nama-naslov em {
  font-style: italic;
  color: var(--boja-sekundarna);
}

.o-nama-sadrzaj p {
  font-size: 17px;
  font-weight: 300;
  color: var(--boja-tekst);
  line-height: 1.8;
  margin-bottom: var(--razmak-sm);
}

.o-nama-sadrzaj {
  margin-bottom: var(--razmak-md);
}

.o-nama-slika-blok {
  position: relative;
  padding-top: 40px;
}

.o-nama-slika-glavni {
  position: relative;
  z-index: 2;
  border-radius: var(--radijus-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(28,20,16,0.15);
}

.o-nama-slika-glavni img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.o-nama-slika-glavni:hover img {
  transform: scale(1.04);
}

.o-nama-slika-mali {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 220px;
  border-radius: var(--radijus-md);
  overflow: hidden;
  border: 6px solid var(--boja-svetla);
  box-shadow: 0 20px 40px rgba(28,20,16,0.15);
  z-index: 3;
}

.o-nama-slika-mali img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.o-nama-godina-marka {
  position: absolute;
  top: 0;
  right: -20px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

.o-nama-godina-marka span:first-child {
  font-family: var(--font-naslov);
  font-size: 80px;
  font-weight: 300;
  color: rgba(107,39,55,0.08);
  letter-spacing: 0.05em;
  line-height: 1;
}

.o-nama-godina-marka span:last-child {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--boja-tekst-svetli);
}

/* ============================================================
   KOLEKCIJA
   ============================================================ */

.kolekcija {
  padding: var(--razmak-xl) 0;
  background: #F2EDE7;
}

.kolekcija-mreža {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 3px;
  background: rgba(28,20,16,0.12);
  border-radius: var(--radijus-lg);
  overflow: hidden;
}

/* Četvrta kartica zauzima celu širinu u drugom redu */
.proizvod-kartica--sira {
  grid-column: 1 / -1;
  min-height: 340px !important;
}

/* Horizontalni layout za široku karticu */
.proizvod-kartica--sira .kartica-sadrzaj {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: var(--razmak-lg);
}

.proizvod-kartica--sira .kartica-naziv {
  font-size: clamp(28px, 3.5vw, 44px);
}

.proizvod-kartica--sira .kartica-opis {
  max-width: 480px;
  opacity: 1;
  transform: none;
}

.proizvod-kartica--sira:hover .kartica-opis {
  opacity: 1;
  transform: none;
}

.proizvod-kartica--sira .kartica-veza {
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 4px;
}

.proizvod-kartica {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  cursor: pointer;
}

.kartica-slika-pozadina {
  position: absolute;
  inset: 0;
  background-image: var(--kartica-slika);
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: brightness(0.65);
}

.proizvod-kartica::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,11,9,0.85) 0%, rgba(14,11,9,0.1) 60%, transparent 100%);
  z-index: 1;
  transition: opacity var(--prelaz-spor);
}

.proizvod-kartica:hover .kartica-slika-pozadina {
  transform: scale(1);
  filter: brightness(0.5);
}

.kartica-sadrzaj {
  position: relative;
  z-index: 2;
  padding: var(--razmak-md);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--boja-svetla);
}

.kartica-kategorija {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--boja-akcent);
  margin-bottom: 8px;
  display: block;
}

.kartica-naziv {
  font-family: var(--font-naslov);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 10px;
}

.kartica-opis {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(250,246,241,0.75);
  margin-bottom: var(--razmak-sm);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--prelaz-spor), transform var(--prelaz-spor);
}

.proizvod-kartica:hover .kartica-opis {
  opacity: 1;
  transform: translateY(0);
}

.kartica-veza {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--boja-akcent);
  border-bottom: 1px solid rgba(201,169,110,0.4);
  padding-bottom: 3px;
  width: fit-content;
  transition: gap var(--prelaz-brz), border-color var(--prelaz-brz);
}

.kartica-veza:hover {
  gap: 10px;
  border-color: var(--boja-akcent);
}

/* ============================================================
   USLUGE
   ============================================================ */

.usluge {
  padding: var(--razmak-xl) 0;
  background: var(--boja-primarna);
  color: var(--boja-svetla);
}

.usluge-mreža {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--razmak-xl);
  align-items: start;
}

.usluge-naslov {
  font-family: var(--font-naslov);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--boja-svetla);
  margin-bottom: var(--razmak-sm);
}

.usluge-naslov em {
  font-style: italic;
  color: var(--boja-akcent);
}

.usluge-podnaslov {
  font-size: 16px;
  font-weight: 300;
  color: rgba(250,246,241,0.6);
  line-height: 1.7;
}

.usluge-desno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(250,246,241,0.08);
  border: 1px solid rgba(250,246,241,0.08);
  border-radius: var(--radijus-lg);
  overflow: hidden;
}

.usluga-stavka {
  padding: var(--razmak-md);
  display: flex;
  gap: var(--razmak-sm);
  align-items: flex-start;
  background: var(--boja-primarna);
  transition: background var(--prelaz-brz);
}

.usluga-stavka:hover {
  background: rgba(201,169,110,0.06);
}

.usluga-ikona {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201,169,110,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--boja-akcent);
  margin-top: 2px;
}

.usluga-naziv {
  font-family: var(--font-naslov);
  font-size: 18px;
  font-weight: 400;
  color: var(--boja-svetla);
  margin-bottom: 6px;
}

.usluga-opis {
  font-size: 14px;
  font-weight: 300;
  color: rgba(250,246,241,0.55);
  line-height: 1.6;
}

/* ============================================================
   CITAT BANNER
   ============================================================ */

.citat-banner {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--boja-sekundarna);
}

.citat-sadrzaj {
  position: relative;
  z-index: 2;
  padding: var(--razmak-xl) clamp(20px, 8%, 120px);
  flex: 1;
}

.citat-tekst {
  font-family: var(--font-naslov);
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
  color: var(--boja-svetla);
  margin-bottom: var(--razmak-md);
  max-width: 700px;
}

.citat-tekst p {
  display: inline;
}

.citat-potpisnik {
  display: flex;
  align-items: center;
  gap: var(--razmak-sm);
}

.citat-potpisnik::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--boja-akcent);
}

.citat-potpisnik cite {
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boja-akcent);
}

.citat-slika {
  position: absolute;
  right: 0;
  top: 0;
  width: 48%;
  height: 100%;
  overflow: hidden;
}

.citat-slika::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--boja-sekundarna) 0%, rgba(107,39,55,0.3) 25%, transparent 55%);
  z-index: 1;
  pointer-events: none;
}

.citat-slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 1;
  mix-blend-mode: normal;
  filter: brightness(0.82) saturate(0.85);
}

/* ============================================================
   LOKACIJE
   ============================================================ */

.lokacije {
  padding: var(--razmak-xl) 0;
  background: var(--boja-svetla);
}

.lokacije-mreža {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--razmak-xl);
  align-items: start;
}

.lokacije-lista {
  display: flex;
  flex-direction: column;
  gap: var(--razmak-md);
}

.lokacija-stavka {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--razmak-md);
  align-items: start;
  padding: var(--razmak-md);
  background: #fff;
  border-radius: var(--radijus-lg);
  border: 1px solid rgba(28,20,16,0.06);
  transition: box-shadow var(--prelaz-spor), transform var(--prelaz-spor);
}

.lokacija-stavka:hover {
  box-shadow: 0 12px 40px rgba(28,20,16,0.1);
  transform: translateY(-3px);
}

.lokacija-slika {
  border-radius: var(--radijus-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.lokacija-slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.lokacija-stavka:hover .lokacija-slika img {
  transform: scale(1.06);
}

.lokacija-naziv {
  font-family: var(--font-naslov);
  font-size: 22px;
  font-weight: 400;
  color: var(--boja-primarna);
  margin-bottom: 10px;
}

.lokacija-adresa p {
  font-size: 14px;
  font-weight: 300;
  color: var(--boja-tekst-svetli);
  line-height: 1.8;
}

.lokacija-adresa a {
  color: var(--boja-sekundarna);
  font-weight: 400;
}

.lokaciones-napomena {
  align-self: start;
}

.lokacije-napomena {
  padding: var(--razmak-lg) var(--razmak-md);
  background: var(--boja-primarna);
  border-radius: var(--radijus-lg);
  color: var(--boja-svetla);
  position: sticky;
  top: 100px;
}

.lokacije-napomena p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: var(--razmak-md);
  color: rgba(250,246,241,0.8);
}

.lokacije-napomena strong {
  color: var(--boja-akcent);
  font-weight: 500;
}

.lokacije-napomena .dugme--obris {
  color: var(--boja-svetla);
  border-color: rgba(250,246,241,0.3);
}

.lokacije-napomena .dugme--obris:hover {
  background: rgba(250,246,241,0.1);
  border-color: var(--boja-svetla);
}

/* ============================================================
   SVEDOČANSTVA
   ============================================================ */

.svedocanstva {
  padding: var(--razmak-xl) 0;
  background: #F2EDE7;
}

.svedocanstva-mreža {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--razmak-md);
}

.svedocanstvo-kartica {
  padding: var(--razmak-lg) var(--razmak-md);
  background: var(--boja-svetla);
  border-radius: var(--radijus-lg);
  border: 1px solid rgba(28,20,16,0.06);
  transition: transform var(--prelaz-spor), box-shadow var(--prelaz-spor);
}

.svedocanstvo-kartica:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(28,20,16,0.1);
}

.svedocanstvo-zvezdice {
  color: var(--boja-akcent);
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: var(--razmak-sm);
}

.svedocanstvo-tekst {
  font-family: var(--font-naslov);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: var(--boja-tekst);
  margin-bottom: var(--razmak-md);
}

.svedocanstvo-autor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--razmak-sm);
  border-top: 1px solid rgba(28,20,16,0.08);
}

.svedocanstvo-autor strong {
  font-size: 15px;
  font-weight: 500;
  color: var(--boja-primarna);
}

.svedocanstvo-autor span {
  font-size: 12px;
  color: var(--boja-tekst-svetli);
  letter-spacing: 0.05em;
}

/* ============================================================
   KONTAKT
   ============================================================ */

.kontakt {
  padding: var(--razmak-xl) 0;
  background: var(--boja-primarna);
  color: var(--boja-svetla);
}

.kontakt-mreža {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--razmak-xl);
  align-items: start;
}

.kontakt-naslov {
  font-family: var(--font-naslov);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--boja-svetla);
  margin-bottom: var(--razmak-sm);
}

.kontakt-podnaslov {
  font-size: 16px;
  font-weight: 300;
  color: rgba(250,246,241,0.6);
  line-height: 1.7;
  margin-bottom: var(--razmak-lg);
}

.kontakt-podaci {
  display: flex;
  flex-direction: column;
  gap: var(--razmak-md);
}

.kontakt-stavka {
  display: flex;
  align-items: flex-start;
  gap: var(--razmak-sm);
  color: rgba(250,246,241,0.7);
}

.kontakt-stavka svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--boja-akcent);
}

.kontakt-stavka div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kontakt-stavka strong {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--boja-akcent);
}

.kontakt-stavka a,
.kontakt-stavka span {
  font-size: 16px;
  font-weight: 300;
  color: rgba(250,246,241,0.85);
  transition: color var(--prelaz-brz);
}

.kontakt-stavka a:hover {
  color: var(--boja-akcent);
}

/* Forma */
.kontakt-forma-blok {
  background: rgba(250,246,241,0.04);
  border: 1px solid rgba(250,246,241,0.1);
  border-radius: var(--radijus-lg);
  padding: var(--razmak-lg);
}

.forma-red {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--razmak-sm);
}

.forma-polje {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--razmak-sm);
}

.forma-etiketa {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250,246,241,0.55);
}

.forma-etiketa span {
  color: var(--boja-akcent);
}

.forma-unos {
  background: rgba(250,246,241,0.06);
  border: 1px solid rgba(250,246,241,0.12);
  border-radius: var(--radijus-md);
  color: var(--boja-svetla);
  font-family: var(--font-telo);
  font-size: 15px;
  font-weight: 300;
  padding: 12px 16px;
  transition: border-color var(--prelaz-brz), background var(--prelaz-brz);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.forma-unos::placeholder {
  color: rgba(250,246,241,0.25);
}

.forma-unos:focus {
  outline: none;
  border-color: rgba(201,169,110,0.6);
  background: rgba(250,246,241,0.09);
}

.forma-unos.greska {
  border-color: rgba(255,100,100,0.5);
}

.forma-unos--select {
  color: var(--boja-svetla);
  cursor: pointer;
}

.forma-unos--select option {
  background: var(--boja-primarna);
  color: var(--boja-svetla);
}

.forma-unos--textarea {
  resize: vertical;
  min-height: 120px;
}

.forma-greska {
  font-size: 12px;
  color: #FF9999;
  min-height: 16px;
}

.forma-polje--checkbox {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.forma-checkbox-etiketa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(250,246,241,0.55);
  cursor: pointer;
}

.forma-checkbox-etiketa input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--boja-akcent);
  cursor: pointer;
}

.forma-checkbox-etiketa a {
  color: var(--boja-akcent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.submit-tekst {
  font-family: var(--font-telo);
}

.submit-strelica {
  transition: transform var(--prelaz-brz);
}

.dugme--puno:hover .submit-strelica {
  transform: translateX(4px) translateY(-4px);
}

.forma-uspeh {
  display: flex;
  align-items: center;
  gap: var(--razmak-sm);
  padding: var(--razmak-md);
  background: rgba(100,200,100,0.1);
  border: 1px solid rgba(100,200,100,0.2);
  border-radius: var(--radijus-md);
  color: rgba(250,246,241,0.9);
  margin-top: var(--razmak-sm);
}

.forma-uspeh[hidden] {
  display: none;
}

.forma-uspeh svg {
  color: #7dc67d;
  flex-shrink: 0;
}

/* ============================================================
   PODNOŽJE
   ============================================================ */

.podnozje {
  background: var(--boja-tamna);
  color: var(--boja-svetla);
  padding: var(--razmak-xl) 0 0;
}

.podnozje-mreža {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--razmak-lg);
  padding-bottom: var(--razmak-xl);
  border-bottom: 1px solid rgba(250,246,241,0.08);
}

.podnozje-opis {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(250,246,241,0.5);
  margin-top: var(--razmak-sm);
  margin-bottom: var(--razmak-md);
}

.podnozje-mreze {
  display: flex;
  gap: var(--razmak-sm);
}

.podnozje-mreze a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(250,246,241,0.15);
  border-radius: 50%;
  color: rgba(250,246,241,0.6);
  transition: all var(--prelaz-brz);
}

.podnozje-mreze a:hover {
  border-color: var(--boja-akcent);
  color: var(--boja-akcent);
}

.podnozje-naslov {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--boja-akcent);
  margin-bottom: var(--razmak-md);
}

.podnozje-nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.podnozje-nav a {
  font-size: 14px;
  font-weight: 300;
  color: rgba(250,246,241,0.55);
  transition: color var(--prelaz-brz);
}

.podnozje-nav a:hover {
  color: var(--boja-svetla);
}

.podnozje-kontakt address p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(250,246,241,0.55);
  margin-bottom: 8px;
  line-height: 1.6;
}

.podnozje-kontakt a {
  color: rgba(250,246,241,0.55);
  transition: color var(--prelaz-brz);
}

.podnozje-kontakt a:hover {
  color: var(--boja-akcent);
}

.radno-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radno-stavka {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radno-stavka dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,246,241,0.35);
}

.radno-stavka dd {
  font-size: 14px;
  font-weight: 300;
  color: rgba(250,246,241,0.65);
}

.podnozje-dno {
  padding: var(--razmak-md) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.podnozje-autorska {
  font-size: 12px;
  color: rgba(250,246,241,0.3);
}

.podnozje-autorska a {
  color: rgba(250,246,241,0.45);
  transition: color var(--prelaz-brz);
}

.podnozje-autorska a:hover {
  color: var(--boja-akcent);
}

.podnozje-potpisnik {
  font-size: 11px;
  color: rgba(250,246,241,0.2);
  letter-spacing: 0.05em;
}

/* ============================================================
   TAGOVI — O NAMA
   ============================================================ */

.o-nama-tagovi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--razmak-md);
}

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boja-sekundarna);
  border: 1px solid rgba(107,39,55,0.2);
  border-radius: var(--radijus-krug);
  padding: 6px 14px;
  background: rgba(107,39,55,0.04);
  transition: background var(--prelaz-brz), border-color var(--prelaz-brz);
}

.tag:hover {
  background: rgba(107,39,55,0.08);
  border-color: rgba(107,39,55,0.35);
}

/* ============================================================
   SVG CVET DEKOR — "O NAMA"
   ============================================================ */

.o-nama-cvet-dekor {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 180px;
  height: 180px;
  z-index: 4;
  pointer-events: none;
}

/* ============================================================
   USLUGE — SLIKA DODATA
   ============================================================ */

.usluge-slika {
  margin-top: var(--razmak-md);
  border-radius: var(--radijus-lg);
  overflow: hidden;
  max-height: 300px;
}

.usluge-slika img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.8s ease;
  filter: brightness(0.85) saturate(0.9);
}

.usluge-slika:hover img {
  transform: scale(1.04);
}

/* ============================================================
   CITAT BANNER — DUGME
   ============================================================ */

.dugme--zlatno {
  background: var(--boja-akcent);
  color: var(--boja-primarna);
  border-color: var(--boja-akcent);
  font-weight: 500;
  margin-top: var(--razmak-md);
  display: inline-flex;
}

.dugme--zlatno:hover {
  background: #dfc080;
  border-color: #dfc080;
  color: var(--boja-primarna);
  transform: translateY(-2px);
}

/* ============================================================
   KONTAKT — podnaslov ispravka
   ============================================================ */

.kontakt-podnasnoj {
  font-size: 16px;
  font-weight: 300;
  color: rgba(250,246,241,0.6);
  line-height: 1.7;
  margin-bottom: var(--razmak-lg);
}