*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{--bg:#0e0f12;--elev:#15171c;--soft:#1a1d22;--text:#e9eaef;--muted:#b9beca;--acc:#f5f7fa;--border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.15);--shadow:0 24px 70px rgba(0,0,0,.45);--header-h:64px}
html{scroll-padding-top:calc(var(--header-h) + 18px)}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.7;color:var(--text);background:linear-gradient(180deg,#0e0f12,#0d1014) fixed}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.fade-start{opacity:0}
.fade-in{opacity:1;transition:opacity .45s ease}

/* === BLUR STRANICE (bez zatamnjenja) === */
body.blur-on > *:not(#transition){
  filter: blur(10px) saturate(1.05);
  transition: filter .25s ease;
}

/* === OVERLAY samo za spinner (bez zamračivanja) === */
.transition{
  position:fixed; inset:0; z-index:99999;
  display:grid; place-items:center;
  pointer-events:none;
  opacity:0; transition:opacity .24s ease;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.transition.show{ opacity:1; }

/* Spinner KIX */
.spinner{
  position:relative; width:92px; height:92px; border-radius:9999px;
  border:2px solid rgba(255,255,255,.22);
  background:radial-gradient(160px 120px at 120% -20%, rgba(255,255,255,.16), rgba(255,255,255,0));
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 26px rgba(255,255,255,.06);
  opacity:0; transform:scale(.94);
  transition:opacity .22s ease, transform .28s ease;
}
.transition.show .spinner{ opacity:1; transform:scale(1); }

.spinner .kix{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:900; letter-spacing:.1em; font-size:16px;
  color:#0e0f12; background:#fff; width:60px; height:60px; border-radius:9999px;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.spinner .ring{
  position:absolute; inset:-4px; border-radius:9999px;
  border-top:3px solid #fff; border-right:3px solid transparent;
  border-bottom:3px solid transparent; border-left:3px solid transparent;
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(20,23,28,.7);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:transform .3s ease}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;min-height:var(--header-h)} /* +h-padding */
.site-header.hide{transform:translateY(-110%)}
.brand{font-weight:900;letter-spacing:.5px;padding-left:8px} /* nikad na rubu */
.brand .kix{padding:6px 10px;border-radius:999px;background:#fff;color:#0e0f12;margin-right:6px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.brand .thin{opacity:.88}

/* Desktop nav */
.main-nav{display:none;gap:12px;position:relative}
@media (min-width:701px){.main-nav{display:flex}}
.main-nav a{padding:8px 10px;border-radius:10px}
.main-nav a:hover{background:rgba(255,255,255,.08)}
.has-sub{position:relative}.has-sub .parent{display:inline-block}
.submenu{position:absolute;top:100%;left:0;margin-top:6px;background:rgba(21,23,28,.98);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);display:none;min-width:220px;padding:6px;z-index:80}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px}
.submenu a{display:block;padding:10px;border-radius:8px}.submenu a:hover{background:rgba(255,255,255,.06)}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block}

/* FAB (menu) */
.fab{position:fixed;top:10px;right:10px;width:40px;height:40px;border-radius:9999px;border:1px solid var(--border);background:radial-gradient(120px 120px at 120% -20%,rgba(255,255,255,.2),rgba(255,255,255,0)) , #15171c;box-shadow:var(--shadow);z-index:100;cursor:pointer;opacity:1;display:inline-grid;place-items:center}
.fab::before{content:"";width:18px;height:2px;background:#fff;border-radius:2px;opacity:.92;box-shadow:0 -6px 0 #fff,0 6px 0 #fff}
@supports (top: env(safe-area-inset-top)){
  .fab{right:calc(env(safe-area-inset-right) + 10px);top:calc(env(safe-area-inset-top) + 10px)}
}

/* Drawer */
.drawer{position:fixed;top:0;right:0;width:min(360px,92vw);height:100dvh;background:rgba(21,23,28,.96);backdrop-filter:blur(12px);box-shadow:var(--shadow);transform:translateX(100%);transition:transform .35s ease;display:flex;flex-direction:column;z-index:65;border-left:1px solid var(--border)}
.drawer.open{transform:translateX(0)}.drawer-nav{padding:20px 14px 12px;display:flex;flex-direction:column}
.drawer-nav a{padding:12px 14px;border-radius:12px;font-weight:700}.drawer-nav a:hover{background:rgba(255,255,255,.06)}
.drawer-subhead{margin:6px 0 2px 4px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.drawer-nav a.sub{padding-left:22px;font-weight:600}
.drawer-foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:64;opacity:0;transition:opacity .35s ease}.overlay.show{opacity:1}

/* Drawer hard lock (mobile/browser bar) */
html.nav-open, body.nav-open{overflow:hidden;height:100%;overscroll-behavior:none}
body.nav-open{position:fixed;left:0;right:0;width:100%}
.drawer{overscroll-behavior:none;touch-action:none}

/* Sections */
.section{padding:34px 0;margin:30px auto 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border-strong);padding-bottom:10px;margin-bottom:14px}
.section-head h2{margin:0}.section-head p{margin:0;color:var(--muted)}

/* Hero */
/* Hero */
.hero.fullbleed{
  position: relative;
  min-height: 100svh;   /* mobile safe viewport */
  height: 100vh;        /* fallback */
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--border-strong);
}

/* Background image */
.hero.fullbleed .hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  z-index: 0;

  /* Ken Burns (optional) */
  transform: scale(1.04);
  animation: hero-kenburns 18s ease-in-out infinite alternate;

  /* ako ti “zrnasto” smeta, ovo smanji ili makni */
  filter: contrast(1.04) saturate(1.03);
}

@keyframes hero-kenburns{
  from{ transform: scale(1.03); }
  to  { transform: scale(1.10); }
}

/* Overlay */
.hero.fullbleed .hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,12,15,.30),
    rgba(10,12,15,.68)
  );
  z-index: 1;
}

/* Text layer */
.hero.fullbleed .hero-text{
  position: relative; /* ne absolute, da nema čudnih efekata */
  z-index: 2;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(16px, 4vw, 40px);
}

.hero.fullbleed .hero-group{
  max-width: min(900px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10,12,15,.22), rgba(10,12,15,.34));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero.fullbleed .hero-text h1{
  font-size: clamp(28px, 6.2vw, 42px);
  line-height: 1.06;
  margin: 0;
}

.hero.fullbleed .hero-sub{
  margin: 0;
  color: #f0f5f6;
  opacity: .95;
  font-size: clamp(13px, 4vw, 17px);
}

.hero.fullbleed .hero-cta{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons (global) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  background:#f5f7fa;
  color:#111;
  font-weight:800;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.30);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}

.btn:active{
  transform: translateY(0);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

.btn:focus-visible{
  outline: 2px solid rgba(245,247,250,.85);
  outline-offset: 3px;
}

/* Ghost button */
.btn.ghost{
  background: rgba(10,12,15,.25);
  color: #f5f7fa;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

.btn.ghost:hover{
  background: rgba(10,12,15,.35);
  transform: translateY(-1px);
}
/* Ghost gumb (npr. "Angebot anfragen") – bijela slova + bijeli rub */

/* Reveal */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none} 

/* Category grid (desktop) */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat-grid--title-above .cat-card{display:flex;flex-direction:column;gap:8px;background:var(--elev);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.cat-grid--title-above .cat-title{margin:10px 12px 0 12px;font-size:1.05rem}
.cat-grid--title-above img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(1.02);transition:transform .3s ease,filter .3s ease}
.cat-grid--title-above .cat-card:hover img{transform:scale(1.02)}
.cat-grid--title-above .cat-desc{margin:0 12px 12px 12px;color:var(--muted)}

/* Services classic (desktop) */
.services-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.services-grid--classic .service-card{background:var(--elev);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.services-grid--classic .svc-title{margin:12px 12px 0 12px}
.services-grid--classic .svc-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.services-grid--classic .svc-desc{margin:12px;color:var(--muted)}

/* Portfolio summary */
.card-wide{background:var(--elev);border:1px solid var(--border);border-radius:16px;padding:18px;text-align:center}
.card-wide p{color:var(--muted)}

/* About layouts */
/* About (desktop) */
.about-stack{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: center;
}

.about-stack .about-text{ max-width: 68ch; }

/* kontroliraj veličinu preko wrappera, ne preko img max-width */
.about-stack .about-media{
  width: 100%;
  max-width: 380px;
  justify-self: end;
}

.about-stack .about-media img{
  width: 100%;
  aspect-ratio: 3 / 4;     /* portret */
  object-fit: cover;        /* crop umjesto rastezanja */
  object-position: center;
  border-radius: 16px;
  border: 1px solid var(--border);
  display: block;
}

/* MOBILE: 1 stupac + veća slika */
@media (max-width: 820px){
  .about-stack{
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  /* slika gore i centrirana */
  .about-stack .about-media{
    justify-self: center;
    max-width: 420px; /* povećaj na mobu */
    grid-row: 1;
  }

  .about-stack .about-text{
    grid-row: 2;
    max-width: 100%;
  }
}

/* baš uski mob: da slika ne bude previsoka */
@media (max-width: 420px){
  .about-stack .about-media{
    max-width: 100%;
  }
  .about-stack .about-media img{
    aspect-ratio: 4 / 3;
  }
}

/* Reviews */
.slider{position:relative;max-width:900px;margin:0 auto;overflow:hidden}
.slide{min-height:140px;padding:12px 14px;display:none}
.slide blockquote{font-size:1.1rem;line-height:1.6;margin:0}
.slide figcaption{margin-top:8px;color:var(--muted);font-style:italic}
.dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.dots button{width:8px;height:8px;border-radius:9999px;background:rgba(255,255,255,.35);border:0;cursor:pointer}
.dots button.active{background:#fff}

/* Interior hero */
.page-hero{padding:calc(var(--header-h) + 26px) 0 26px;border-bottom:1px solid var(--border-strong);background:linear-gradient(180deg,#14171c,#13161a)}

/* Masonry & lightbox */
.masonry{columns:4 280px;column-gap:14px;padding:20px 0;max-width:1180px;margin:0 auto}
.m-item{display:inline-block;margin:0 0 14px 0;break-inside:avoid;position:relative}
.m-item img{width:100%;border-radius:12px;border:1px solid var(--border)}
.m-item .hovercap{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);padding:6px 10px;border-radius:999px;font-size:12px;opacity:0;transition:opacity .2s ease}
.m-item:hover .hovercap{opacity:1}
/* Lightbox */
.lightbox figure{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: #000;          /* potpuno crno (nema “probijanja”) */
  z-index: 200;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;

  height: 100dvh;            /* <-- pokriva i kad address bar nestaje */
  min-height: 100vh;         /* fallback */
}

.lightbox figure img{
  max-width: 92vw;
  max-height: 92dvh;         /* <-- isto dynamic */
  border-radius: 10px;
}

@supports not (height: 100dvh){
  .lightbox figure{ height: 100vh; }
  .lightbox figure img{ max-height: 92vh; }
}

.lightbox figure:target{ display: grid; }
.lightbox .close{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:9999px;background:rgba(255,255,255,.9);z-index:210}
.lightbox .close:after{content:"×";display:grid;place-items:center;font-size:28px;line-height:38px;color:#111}

/* Contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
@media (max-width:700px){.contact{grid-template-columns:1fr}}
.contact-form{background:linear-gradient(180deg,#14171c,#13161a);border:1px solid var(--border);border-radius:16px;padding:14px;display:grid;gap:12px}
.contact-form label{display:grid;gap:6px;font-weight:600}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--border);background:#0f1216;color:#var(--text);border-radius:10px;padding:10px;font:inherit}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid rgba(255,255,255,.2);outline-offset:1px}
.form-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.muted{color:var(--muted)}.form-status{margin:4px 0 0 0;min-height:1.2em;color:#var(--muted)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.price-card{background:var(--elev);border:1px solid var(--border);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;position:relative}
.price-card.rec{outline:2px solid rgba(255,255,255,.14)}.price-card h3{margin:0;display:flex;align-items:baseline;gap:8px}
.price-card h3 span{font-weight:600;color:var(--muted);font-size:.95rem}
.price-card .price{font-size:1.9rem;font-weight:900;margin-top:2px}
.price-card .feat{list-style:none;margin:0;padding:0;display:grid;gap:6px;color:var(--muted)}
.price-card .meta{margin-top:auto;color:var(--muted);font-size:.95rem}
.notes{color:var(--muted)}

/* Footer */
.site-footer{margin-top:48px;border-top:1px solid var(--border);background:linear-gradient(180deg,#14171c,#13161a)}
.site-footer .foot-cols{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:16px;padding:18px 0}
.contact-list{list-style:none;padding:0;margin:0}.map iframe{width:100%;min-height:180px;border:0}
.site-footer .foot-bottom{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--border);color:#c5cad6}

/* Watermark */
.wm{position:relative}
.wm::after{content:"KIX  PHOTOGRAPHY";position:absolute;right:10px;bottom:10px;font-size:10.5px;letter-spacing:.18em;background:rgba(10,12,15,.55);color:#f1f1f1;padding:6px 10px;border-radius:999px;text-shadow:0 1px 0 rgba(0,0,0,.3);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.08)}

/* Desktop default: sakrij mobilne carousele (fix “ogromne slike/odlazak lijevo”) */
.mc-carousel{display:none}

.contact-card{
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

.wa-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10,12,15,.35);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  z-index: 9999;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease;
}
.wa-fab:hover{
  transform: translateY(-1px);
  background: rgba(10,12,15,.5);
}
.wa-fab:focus-visible{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}

html, body{
  height: 100%;
  margin: 0;
  background: var(--bg, #0a0c0f); /* stavi boju .......*/
}

body{
  overflow-x: hidden; /* da ne bljesne zbog horizontalnog overflowa */
}

/* Responsive grids */
@media (max-width:1200px){.services-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cat-grid{grid-template-columns:1fr}.services-grid{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}}

/* Mobile tweaks incl. carousels & footer map */
@media (max-width:700px){
  .site-header .header-inner{justify-content:space-between}
  .brand{margin-left:0;margin-right:auto;text-align:left;padding-left:10px} /* malo veći padding na mobu */
  .container{padding:0 16px}
  .section-head{padding-left:16px;padding-right:16px}
  .page-hero .container{padding-left:16px;padding-right:16px}
  .hero-text{padding:16px 10px 22px}

  /* Na mobu: prikaz samo carousela, desktop gridovi se sakrivaju */
  .cat-grid, .services-grid{display:none}
  .mc-carousel{display:block; position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--border); background:var(--elev)}
  .mc-track{display:flex; width:100%; transition:transform .35s ease}
  .mc-slide{min-width:100%; padding:8px}
  .mc-card{display:block; background:transparent; border-radius:12px}
  .mc-card img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:12px; border:1px solid var(--border); margin:0 8px 8px}
  .mc-card h3{margin:6px 6px 0 6px}
  .mc-card p{margin:6px; color:#b9beca; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.6em*4)}

  .mc-arrow{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:9999px; border:1px solid var(--border); background:rgba(0,0,0,.5); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:6}
  .mc-prev{left:8px} .mc-next{right:8px}

  .site-footer .foot-cols{grid-template-columns:1fr}
  .site-footer .map iframe{min-height:140px}
}

/* Lightbox → sakrij FAB */
body.lb-open .fab{opacity:0;pointer-events:none}

/* Lock pozadine kad je lightbox otvoren */
html.lb-open, body.lb-open{ overflow:hidden; height:100%; }
body.lb-open{ position:fixed; left:0; right:0; width:100%; }

/* ostavi tvoje */
body.lb-open .fab{opacity:0;pointer-events:none}
/* MOB: bez rezanja glave (prikaži cijelu sliku) */
@media (max-width: 520px){
  .about-stack .about-media img{
    object-fit: contain;        /* umjesto cover */
    background: #0f1216;        /* da ne bude “prazno” transparent */
    aspect-ratio: auto;         /* makni forsirani omjer */
    height: auto;
  }
}

/* Ukloni plavi tap-highlight na mobu (Android/Chrome) */
a, button, .m-item, .m-item img{
  -webkit-tap-highlight-color: transparent;
}

/* Ukloni default focus outline koji zna bljesnut */
.m-item:focus{
  outline: none;
}

/* (opcionalno) zadrži lijep fokus za tipkovnicu */
.m-item:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 4px;
}

.hero.fullbleed .hero-group{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
}