/*
Theme Name: PhotoTuba
Author: Lana
Version: 1.0
*/

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

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#0b0c10;
  color:#e9ecf1;
}

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

/* CONTAINER */

.container{
  width:min(1100px, calc(100% - 32px));
  margin:auto;
}

.section{
  padding:64px 0;
}

/* HEADER */

.site-header{
  background:#0b0c10;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.nav{
  display:flex;
  align-items:center;
  gap:20px;
  padding:16px 0;
}

.logo{
  font-weight:700;
  font-size:1.2rem;
}

.logo span{
  color:#ffb86b;
}

.nav-links{
  margin-left:auto;
  display:flex;
  gap:14px;
  list-style:none;
}

.nav-links a{
  padding:10px 14px;
  border-radius:10px;
}

.nav-links a:hover{
  background:rgba(255,255,255,.06);
}

/* FILTERS */

.filters{
  display:flex;
  gap:10px;
  margin:20px 0 30px;
}

.chip{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  color:#b2b8c6;
}

.chip.active{
  background:#ffb86b;
  color:#111;
}

/* GALERIJA */

.masonry{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}

.shot{
  border-radius:18px;
  overflow:hidden;
  background:#12141c;
  border:1px solid rgba(255,255,255,.08);
}

.shot img{
  width:100%;
  height:620px;
  object-fit:cover;
  transition:transform .4s;
}

.shot:hover img{
  transform:scale(1.06);
}

.shot figcaption{
  padding:14px;
  color:#b2b8c6;
}

/* FOOTER */

.site-footer{
  margin-top:60px;
  padding:40px 0;
  border-top:1px solid rgba(255,255,255,.1);
}

.footer-links{
  list-style:none;
  padding:0;
  margin-top:10px;
}

.footer-links li{
  margin-bottom:6px;
}

* { box-sizing: border-box; } 
html, body { margin: 0; padding: 0; } 
img { max-width: 100%; display: block; } 
a { color: inherit; text-decoration: none; } 

/* da cijeli dizajn bude dosljedan */
:root{
  --bg: #0b0c10; /* glavna pozadina */
  --panel: #12141c; /* panel/pozadina kartica */
  --text: #e9ecf1; /* primarni tekst */
  --muted: #b2b8c6; /* sekundarni tekst */
  --accent: #ffb86b; /* naglasna boja */
  --line: rgba(255,255,255,.12); /* boja tankih bordera */
  --shadow: 0 14px 40px rgba(0,0,0,.35); /* standardna sjena */
  --radius: 16px; /* zaobljenje rubova */
  --max: 1100px; /* maksimalna širina container-a */
}

/* STILOVI (body, tipografija, pozadina) */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* moderna sistemska tipografija */
  background: radial-gradient(900px 600px at 20% 0%, rgba(255,184,107,.12), transparent 55%),
              radial-gradient(800px 500px at 80% 20%, rgba(255,255,255,.06), transparent 60%),
              var(--bg); /* dekorativna pozadina + fallback boja */
  color: var(--text); /* boja teksta */
  line-height: 1.6; /* čitljivost */
}

/* container = centriranje i kontrola širine sadržaja */
.container{
  width: min(var(--max), calc(100% - 32px)); /* max širina + padding sa strane na manjim ekranima */
  margin: 0 auto; /* centriranje */
}

/* osnovne sekcije */
.section{ padding: 64px 0; } /* vertikalni razmak između sekcija */
.section.alt{ background: rgba(255,255,255,.03); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* “alternativna” sekcija */

/* heading stilovi */
h1, h2, h3, h4{ line-height: 1.2; margin: 0 0 12px; } /* konzistentan razmak */
h1{ font-size: clamp(2rem, 4vw, 3rem); } /* responsive veličina naslova */
h2{ font-size: clamp(1.4rem, 2.6vw, 2rem); } /* responsive podnaslov */
.lead{ font-size: 1.1rem; color: var(--text); opacity: .95; } /* uvodni tekst */
.muted{ color: var(--muted); } /* sekundarni tekst */
.small{ font-size: .9rem; } /* manji tekst */

.accent{ color: var(--accent); } /* naglasna boja na dijelu teksta */

/* ACCESSIBILITY: SKIP LINK
   - pomaže tipkovnici/screen readeru da preskoči navigaciju */
.skip-link{
  position: absolute; left: -999px; top: 10px; /* sakriveno dok nije fokusirano */
  background: var(--panel); padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line);
}
.skip-link:focus{ left: 10px; z-index: 9999; } /* pojavi se kad se fokusira */

/* HEADER + NAVIGACIJA (desktop) */
.site-header{
  position: sticky; top: 0; z-index: 50; /* header ostaje na vrhu pri scrollu */
  background: rgba(11,12,16,.72);
  backdrop-filter: blur(10px); /* blur efekt */
  border-bottom: 1px solid var(--line);
}

/* nav layout (flex) */
.nav{
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
}

/* logo */
.logo{
  font-weight: 800; letter-spacing: .3px;
  font-size: 1.15rem;
}
.logo span{ color: var(--accent); } /* isticanje dijela loga */

/* linkovi u navigaciji */
.nav-links{
  list-style: none; display: flex; gap: 14px;
  margin: 0; padding: 0;
  margin-left: auto; /* gura linkove udesno */
}

/* tranzicije + hover (animacija 1: hover efekt) */
.nav-links a{
  width:100%;
  padding:14px 0;
  border-radius:0;
  background:none;
}

.nav-links a:hover{
  color:var(--accent);
}

/* aktivni link (trenutna stranica) */
.nav-links a{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

/* MOBILE NAV (burger)
   - checkbox hack: input + label kontroliraju prikaz menija */
.nav-toggle{ display:none; } /* sakriven checkbox */
.nav-burger{
  display:none; margin-left:auto; cursor:pointer;
  padding:10px; border-radius:12px; border:1px solid var(--line);
}
.nav-burger span{
  display:block; width:22px; height:2px; background: var(--text);
  margin:4px 0; opacity:.9;
}

/* BUTTONS (primarni + ghost) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:#fff;
  font-weight:600;
}

.btn:hover{ transform: translateY(-1px); } /* hover animacija/tranzicija */

.btn-primary{
  background: linear-gradient(135deg, rgba(255,184,107,.95), rgba(255,120,90,.9));
  border-color: rgba(255,184,107,.35);
  color: #141414;
  font-weight: 700;
}

/* HERO SEKCIJA (GRID + slika)
   - ovdje pokazuješ "grid" za bodove */
.hero{ position: relative; padding: 54px 0 64px; overflow: hidden; }

/* GRID layout: tekst + slika u 2 stupca */
.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr; /* lijevo šire (tekst), desno uže (slika) */
  gap: 28px;
  align-items: center;
}

/* badge */
.badge{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--muted);
}

.hero-cta{ display: flex; gap: 10px; margin: 18px 0 14px; flex-wrap: wrap; } /* CTA gumbi */
.hero-highlights{ margin: 14px 0 0; padding-left: 18px; color: var(--muted); } /* lista benefita */

/* okvir za hero sliku */
.hero-media{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden; /* da slika ostane u okviru s radiusom */
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}

.hero-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:12px;
}

.hero-images img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:12px;
}

/* ANIMACIJA 2: KEYFRAMES (pulse dot)
   - ovo je druga animacija za bodove */
.pulse-dot{
  position: absolute;
  right: 14px; bottom: 14px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255,184,107,.6);
  animation: pulse 1.8s infinite; /* keyframes animacija */
}

/* keyframes definicija */
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,184,107,.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 16px rgba(255,184,107,0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(255,184,107,0); transform: scale(1); }
}

/* dekorativni “val” ispod hero sekcije */
.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; height: 26px;
  background: linear-gradient(to right, rgba(255,184,107,.20), rgba(255,255,255,.05));
  mask-image: radial-gradient(24px 24px at 24px 24px, #000 98%, transparent 102%);
  opacity: .35;
}

/* CARDS (sekcije) */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* 3 kartice u redu */
  gap: 14px;
  margin-top: 18px;
}

.card{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease; /* tranzicija */
}
.card:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.06);
}

.link{ color: var(--accent); font-weight: 700; } /* naglašeni link */

/* TABLICA (ako koristiš cjenik/pakete) */
.table-wrap{
  margin-top: 18px;
  overflow: auto; /* tablica se može scrollati na mobu */
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

table{
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,.03);
}

caption{
  text-align: left;
  padding: 14px 14px 0;
  color: var(--muted);
}

th, td{
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

thead th{
  text-align: left;
  background: rgba(255,255,255,.05);
}

tbody tr:hover{ background: rgba(255,255,255,.04); } /* hover redak */
.center{ display:flex; justify-content:center; margin-top: 18px; } /* centriranje CTA */

/* SPLIT LAYOUT (About/Contact)
   - 2 stupca: sadržaj + bočni info card */
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:start;
}

/* CONTACT PAGE LAYOUT */
.contact-list{
  list-style: none;
  padding: 0;
  margin: 14px 0 28px;
}

.contact-list li{
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}

.contact-list strong{
  color:var(--text);
  margin-right:6px;
}

.contact-list li:last-child{
  border-bottom:none;
}

.contact-list a{
  color: var(--accent);
  font-weight: 500;
}

.contact-list a:hover{
  text-decoration: underline;
}

.split h2{
  margin-top: 26px;
}

.steps{
  margin-top: 10px;
  padding-left: 18px;
  color: var(--muted);
}

.steps li{
  margin-bottom: 8px;
}

.info-card{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );
  border:1px solid rgba(255,255,255,.12);
  padding:28px;
}

.cta-stack{
  margin: 14px 0;
}

.callout{
  margin-top: 16px;
  font-size: .95rem;
  line-height: 1.5;
}

/* info card (sticky na desktopu) */
.info-card{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  position: sticky; /* drži se na ekranu dok scrollaš */
  top: 84px;
}

/* lista u info cardu */
.mini{ list-style:none; padding:0; margin: 12px 0 0; }
.mini li{ padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.10); }
.mini li:last-child{ border-bottom: 0; }
.mini span{ color: var(--muted); display:inline-block; width: 90px; }

.callout{
  margin: 14px 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,184,107,.10);
  border: 1px solid rgba(255,184,107,.22);
}

/* liste na about stranici */
.steps{ padding-left: 18px; }
.checklist{ padding-left: 18px; color: var(--muted); }

/* GALERIJA (GRID + hover zoom) */
.filters{ display:flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; } /* filter gumbi */

.chip{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  transition: transform .2s ease, background .2s ease; /* tranzicija */
}
.chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.chip.active{ color: var(--text); border-color: rgba(255,184,107,.35); background: rgba(255,184,107,.10); }

/* grid galerije */
.masonry{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  align-items:start;
}

/* kartica slike */
.shot{
  margin: 0;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* hover zoom na slici (tranzicija/animacija) */
.shot img{
  width:100%;
  height:520px;
  object-fit:cover;
  transform:scale(1);
  transition:transform .35s ease, filter .35s ease;
}

.shot:hover img{
  transform:scale(1.06);
  filter:contrast(1.05);
}

.shot figcaption{
  padding: 10px 12px;
  color: var(--muted);
  font-size: .92rem;
}

/* FORMA (ako je ikad koristiš – ali možeš i ignorirati) */
.form{ margin-top: 18px; }
.field{ display:flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
label{ color: var(--muted); }

input, select, textarea{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(255,184,107,.45);
  box-shadow: 0 0 0 3px rgba(255,184,107,.10);
}

/* FOOTER */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 34px 0;
  background: rgba(0,0,0,.18);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:50px;
  align-items:start;
}

.footer-links{ list-style:none; padding:0; margin: 8px 0 0; }
.footer-links li{ padding: 6px 0; color: var(--muted); }
.footer-links a:hover{ color: var(--text); }

copyright,
.copyright{
  text-align: center;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

/* RESPONSIVE (MEDIA QUERIES)
   - ovo je dio za bodove “responzivnost” */

/* Tablet i manji laptop */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; } /* hero ide u 1 stupac */
  .hero-media img{ height: 320px; } /* manja visina slike */
  .cards{ grid-template-columns: 1fr; } /* kartice jedna ispod druge */
  .split{ grid-template-columns: 1fr; } /* split layout postaje 1 stupac */
  .info-card{ position: static; } /* sticky se gasi na mobu/tabletu */
  .masonry{ grid-template-columns: repeat(2, 1fr); } /* galerija 2 stupca */
  .footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}
	.footer-grid > div:first-child{
  max-width:420px;
}
}

/* Mobitel */
/* ================= PREMIUM MOBILE DESIGN ================= */

@media (max-width: 680px){

	p{
  line-height:1.7;
  margin-bottom:16px;
}

h1{
  font-size:1.8rem;
}

h2{
  margin-top:26px;
}

.container{
  width:calc(100% - 40px);
}
	
  body{
    font-size: 15px;
  }

  .container{
    width: calc(100% - 26px);
  }

  /* sekcije */
  .section{
    padding: 56px 0;
  }

  /* HERO */

 .hero{
  padding: 28px 0 32px;
}

  .hero h1{
    font-size: 1.9rem;
  }

  .lead{
    font-size: 1rem;
  }

  .hero-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-images{
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }

  .hero-images img{
    height:160px;
    border-radius:10px;
  }

  /* CTA gumbi */
  .hero-cta{
    flex-direction: column;
    gap:12px;
  }
	
.hero-cta .btn{
  width:100%;
  padding:13px;
  font-size:.95rem;
  border-radius:999px;
}
  /* NAVIGACIJA */

  .nav{
    padding:12px 0;
  }

  .logo{
    font-size:1.05rem;
  }

  .nav-burger{
    display:inline-block;
    border-radius:10px;
  }

  .nav-links{
    position:absolute;
    top:58px;
    left:0;
    right:0;

    background:rgba(11,12,16,.98);
    backdrop-filter: blur(10px);

    padding:18px;

    display:grid;
    gap:10px;

    border-bottom:1px solid var(--line);

    transform: translateY(-10px);
    opacity:0;
    pointer-events:none;

    transition:.25s;
  }

.nav-links a{
  width:100%;
  padding:14px 0;
  border-radius:0;
  background:none;
}

  .nav-links a:hover{
    background:rgba(255,255,255,.08);
  }

  .nav-toggle:checked ~ .nav-links{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }


  /* KARTICE */

  .cards{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:20px;
  }

  .card{
    padding:18px;
    border-radius:14px;
  }

  /* GALERIJA */
  background:linear-gradient(
    to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,0)
  );

  color: #ffff;
  font-size: 9rem;

  opacity:0;
  transform:translateY(10px);
  transition: 3s;
}

.shot:hover figcaption{
  opacity:1;
  transform:translateY(0);
}
  
  .shot:hover figcaption{
  opacity:1;
  transform:translateY(0);
}

.shot:hover img{
  transform:scale(1.08);
}

  background:linear-gradient(
    to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.0)
  );

  color:#fff;
  font-size:.9rem;

  opacity:0;
  transform:translateY(10px);
  transition:.3s;
}
.masonry{
  grid-template-columns:repeat(2,1fr) !important;
  gap:20px;
}

.shot img{
  width:100%;
  height:450px;
  object-fit:cover;
  object-position:top;
}

  /* ABOUT / CONTACT */

  .split{
    grid-template-columns:1fr;
    gap:28px;
  }

  .info-card{
    position:static;
    padding:20px;
  }

  /* CONTACT LIST */

  .contact-list li{
    padding:14px 0;
    font-size:.95rem;
  }

  /* FOOTER */

  .footer-grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  .site-footer{
    padding:28px 0;
  }

}

.split{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items:start;
}

/* ABOUT PHOTO */
.about-top{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:40px;
  align-items:center;
}

.about-photo{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}

.about-photo img{
  width:100%;
  height:420px;
  object-fit:cover;
}

.facts-section{
  margin-top:60px;
  width:100%;
  display:flex;
  justify-content:center;
}

.facts-section .info-card{
  width:100%;
  max-width:1100px;
  margin:auto;
}


/* MOBILE */
@media (max-width:680px){

  .about-photo{
    max-width:100%;
    margin-bottom:18px;
  }

  .about-photo img{
    height:300px;
    border-radius:12px;
  }

  .about-top{
    grid-template-columns:1fr;
    gap:24px;
  }

  .about-photo img{
    height:300px;
  }

  /* KONTAKT MOBILE */

  .contact-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  
  .split{
    display:flex;
    flex-direction:column;
    gap:30px;
  }

  .nav-links a:hover{
    background:none;
    color:var(--accent);
  }

  .info-card .btn{
    display:inline-flex;
    width:100%;
    justify-content:center;
    margin-top:14px;
  }

  .info-card{
    overflow:visible;
  }

  .masonry{
    grid-template-columns:1fr;
    gap:20px;
  }

  .shot img{
    width:100%;
    height:450px;
    object-fit:cover;
  }
	
}