/* TITANIJA apartmani — Dalmacija
   #F7F2E9 krem · #16283A noćno plava · #B5643C terakota · #E7DCCB pesak · #6E7A5A maslinasta */

:root{
  --paper:#F7F2E9; --paper2:#F1EADD; --sand:#E7DCCB;
  --ink:#16283A; --ter:#B5643C; --oliv:#6E7A5A;
  --dim:#7C7468; --line:#DFD4C2;
  --pad:clamp(20px,5vw,80px);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Karla',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ter);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:.005em}
h2{font-size:clamp(30px,4.6vw,54px);line-height:1.08}
h3{font-size:clamp(20px,2.1vw,27px);line-height:1.2;font-weight:400}
em{font-style:italic;color:var(--ter)}
.label{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ter);font-weight:700}
.sub{margin-top:14px;color:var(--dim);max-width:58ch;font-size:16px}
.num{font-variant-numeric:tabular-nums}

/* ── zaglavlje ───────────────────────────────────── */
header{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:10px 28px;
  align-items:center;justify-content:space-between;padding:14px var(--pad);
  background:rgba(247,242,233,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-size:23px;letter-spacing:.3em;text-transform:uppercase;
  display:flex;align-items:center;gap:11px}
.brand .mesec{width:15px;height:15px;flex:0 0 auto}
nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
nav a{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  opacity:.6;padding:8px 12px;transition:opacity .2s,color .2s}
nav a:hover,nav a[aria-current=page]{opacity:1;color:var(--ter)}
.cta{background:var(--ter);color:#fff;padding:10px 20px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;opacity:1;transition:background .2s,transform .2s}
.cta:hover{background:#9C5230;color:#fff;transform:translateY(-1px);opacity:1}

/* ── naslovna slika ──────────────────────────────── */
.hero{position:relative}
.hero img{width:100%;height:clamp(380px,74vh,720px);object-fit:cover}
.hero .preko{position:absolute;left:var(--pad);bottom:clamp(28px,7vh,70px);
  max-width:min(30ch,52%);color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,6.4vw,84px);
  line-height:1.02;color:#fff}
.hero h1 em{color:#F2C7A8;font-style:italic}
.hero .preko p{margin-top:14px;font-size:17px;color:#F4EFE6}
.hero .label{color:#F2C7A8}
@media (max-width:760px){.hero .preko{max-width:none;right:var(--pad)}}

/* ── sekcije ─────────────────────────────────────── */
section{padding:clamp(48px,8vh,104px) var(--pad);border-top:1px solid var(--line)}
section.pesak{background:var(--paper2)}
.head{max-width:60ch;margin-bottom:clamp(26px,4.4vh,48px)}
.mreza{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(22px,3vw,44px)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(24px,3.4vw,64px);align-items:center}
.split p+p{margin-top:14px}
.split p{color:var(--dim)}
.wide img{width:100%}

/* ── apartmani ───────────────────────────────────── */
.ap img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.ap{overflow:hidden}
.ap .okvir{overflow:hidden;background:var(--sand)}
.ap:hover img{transform:scale(1.035)}
.ap h3{margin-top:16px}
.ap .cena{margin-top:5px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ter);font-weight:700}
.ap p{margin-top:9px;color:var(--dim);font-size:15.5px}
.ap .odlike{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;
  font-size:12.5px;color:var(--dim)}
.ap .odlike span::before{content:"·";margin-right:6px;color:var(--ter)}
.ap .odlike span:first-child::before{content:none;margin:0}

/* ── podaci ──────────────────────────────────────── */
.spec{display:grid;grid-template-columns:auto 1fr;gap:10px 26px;font-size:15px;
  border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
.spec dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.spec dd{font-variant-numeric:tabular-nums}

/* ── cenovnik ────────────────────────────────────── */
.tabela{width:100%;border-collapse:collapse;margin-top:8px;font-variant-numeric:tabular-nums}
.tabela th,.tabela td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);font-size:15px}
.tabela th{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:400}
.tabela td:first-child{font-family:var(--serif);font-size:19px}
.tabela tr:hover td{background:rgba(183,100,60,.05)}
.tabela .isticanje td{background:rgba(183,100,60,.08)}

/* ── film ────────────────────────────────────────── */
.film{border:1px solid var(--line);background:#0E1A24;overflow:hidden;max-width:960px;margin:0 auto}
.film video{width:100%;height:auto;display:block}

/* ── galerija ────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(12px,1.6vw,20px)}
.gal figure{margin:0;overflow:hidden;background:var(--sand)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gal img:hover{transform:scale(1.04)}
.gal figcaption{margin-top:8px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ── uvećanje ────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:90;background:rgba(22,40,58,.94);display:none;
  align-items:center;justify-content:center;padding:22px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:min(1200px,94vw);max-height:calc(100vh - 100px);width:auto;object-fit:contain}
.lb .zatvori{position:absolute;top:16px;right:20px;color:var(--paper);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase}

.veza{display:inline-block;margin-top:26px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ter);border-bottom:1px solid var(--line);
  padding-bottom:3px;font-weight:700;transition:border-color .2s,transform .2s}
.veza:hover{border-bottom-color:var(--ter);transform:translateY(-1px)}

footer{padding:36px var(--pad) 52px;border-top:1px solid var(--line);background:var(--paper2)}
footer .redovi{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;
  font-size:13px;color:var(--dim)}
footer .sitno{margin-top:22px;font-size:11.5px;color:#A69C8C}
@media (prefers-reduced-motion:reduce){
  .ap:hover img,.gal img:hover,.cta:hover,.veza:hover{transform:none}
}

/* ── rezervacija ─────────────────────────────────── */
.rez{background:var(--paper);border:1px solid var(--line);padding:clamp(22px,3vw,40px);
  box-shadow:0 18px 50px rgba(22,40,58,.07)}
.rez.podignut{margin-top:clamp(-90px,-7vh,-40px);position:relative;z-index:10}
.polja{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));
  gap:14px 18px;align-items:end}
.polje label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:7px}
.polje input,.polje select{width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);padding:12px 13px;border-radius:0;
  transition:border-color .2s,box-shadow .2s}
.polje input:focus,.polje select:focus{outline:none;border-color:var(--ter);
  box-shadow:0 0 0 3px rgba(183,100,60,.14)}
.rez button[type=submit]{width:100%;font:inherit;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;cursor:pointer;background:var(--ter);color:#fff;
  border:1px solid var(--ter);padding:14px 20px;
  transition:background .2s,transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.rez button[type=submit]:hover{background:#9C5230;transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(183,100,60,.3)}
.rez button[type=submit]:active{transform:translateY(0)}
.rez .napomena{margin-top:12px;font-size:12.5px;color:var(--dim)}

.racun{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.racun[hidden]{display:none!important}
.racun .red{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:15px;
  font-variant-numeric:tabular-nums}
.racun .red span:first-child{color:var(--dim)}
.racun .ukupno{border-top:1px solid var(--line);margin-top:10px;padding-top:14px;
  font-family:var(--serif);font-size:26px;align-items:baseline}
.racun .ukupno span:first-child{color:var(--ink);font-family:var(--sans);font-size:12px;
  letter-spacing:.2em;text-transform:uppercase}
.greska{margin-top:16px;padding:13px 15px;border-left:2px solid var(--ter);
  background:rgba(183,100,60,.08);font-size:14.5px}
.greska[hidden]{display:none!important}
.potvrda{margin-top:18px;padding:18px 20px;border-left:3px solid var(--oliv);
  background:rgba(110,122,90,.09)}
.potvrda[hidden]{display:none!important}
.potvrda h4{font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:8px}
.potvrda .broj{font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--oliv);
  font-weight:700}
.potvrda p{font-size:14.5px;color:#4A4438;margin-top:6px}
.zauzeto{margin-top:14px;font-size:12.5px;color:var(--dim)}
.zauzeto b{color:var(--ink);font-weight:500}

/* ── korak 2: podaci gosta ────────────────────────── */
.gost{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.gost[hidden]{display:none!important}
.gost > .label{margin-bottom:14px}
.gpolja{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.polje textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);padding:11px 12px;border-radius:0;resize:vertical}
.polje textarea:focus{outline:none;border-color:var(--ter);box-shadow:0 0 0 3px rgba(181,100,60,.12)}
.saglasnost{display:flex;align-items:flex-start;gap:10px;margin-top:16px;
  font-size:13.5px;line-height:1.5;color:#4A4438;cursor:pointer}
.saglasnost input{margin-top:3px;accent-color:var(--ter);width:16px;height:16px;flex:0 0 auto}
.gost button{margin-top:18px;font:inherit;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;padding:14px 28px;border:0;background:var(--ter);color:#fff;
  cursor:pointer;transition:background .2s,transform .2s}
.gost button:hover{background:#9C5230;transform:translateY(-2px)}
.gost button:active{transform:translateY(0)}
.sitno2{margin-top:12px;font-size:12.5px;color:var(--dim)}