/* =========================================================
   ===============   TEMA / BOJE / BAZA   ==================
   ========================================================= */
:root{
  --bg:#0b0b0c;
  --fg:#e9e6df;
  --muted:#b8b4ab;

  --gold:#d9b05f;     
  --gold-2:#a8843f;
  --border:rgba(220,180,101,.28);

  --radius:24px;
  --shadow:0 22px 48px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; 
  color:var(--fg); 
  background:var(--bg);
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height:1.6; 
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
.container{ width:min(1120px, 92vw); margin-inline:auto; }

/* =========================================================
   ====================   POZADINA   ========================
   ========================================================= */
.bg{
  position:fixed; inset:0; z-index:-2;
  background:url("IMG/pozadina.png") center/cover no-repeat;
}
.bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(950px 620px at 26% 16%, rgba(218,179,98,.22), transparent 60%),
    radial-gradient(1200px 700px at 52% 46%, rgba(218,179,98,.10), transparent 60%);
  mix-blend-mode:screen; opacity:.35;
}

/* =========================================================
   ====================   NAVIGACIJA   ======================
   ========================================================= */
.site-header{
  position:fixed; top:22px; right:22px; z-index:10;
}

.nav-wrap{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.nav{
  list-style:none; margin:0; padding:12px 16px;
  display:flex; gap:24px;
  background:rgba(17,17,18,.66);
  border:1px solid var(--border);
  border-radius:999px;
  backdrop-filter:blur(6px) saturate(140%);
}
.nav a{
  color:var(--fg);
  text-decoration:none;
  font-weight:500;
  letter-spacing:.2px;
}
.nav a:hover{ color:var(--gold); }

/* Hamburger dugme */
.nav-toggle{
  display:none;
  position:absolute;
  left:-56px;
  top:50%; transform:translateY(-50%);
  width:42px; height:42px;
  border-radius:12px;
  background:rgba(20,20,21,.7);
  border:1px solid var(--border);
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:#fff;
  margin:5px auto;
}

/* =========================================================
   ======================   HERO   ==========================
   ========================================================= */
.hero{
  padding: min(10vh, 120px) 0 min(8vh, 86px);
}
.hero-grid{
  display:grid; 
  grid-template-columns: 1.05fr .95fr; 
  gap:min(6vw,64px); 
  align-items:center;
}

/* Logo */
.brand-logo{
  width: clamp(340px, 38vw, 720px);
  filter: drop-shadow(0 14px 34px rgba(218,179,98,.25));
}

/* Dugme */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  transition:.18s ease;
  margin-left:5cm;
}
.btn-outline{
  color:var(--fg);
  background:transparent;
  border:1px solid var(--gold);
  box-shadow:0 10px 20px rgba(217,176,95,.25);
}
.btn-outline:hover{
  background:var(--gold);
  color:#111;
  transform:translateY(-2px);
}

/* =========================================================
   ====================   PROIZVOD   ========================
   ========================================================= */
.product-card{ margin:0; padding:0; }

.product-frame{
  background:#121214;
  border-radius:32px;
  padding:10px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06);
  position:relative;
}
.product-frame::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
}
.product-inner img{
  border-radius:14px;
}

/* =========================================================
   ==================   SEKCIJE / FOOTER   ==================
   ========================================================= */
.section{ padding:80px 0; }
.section-lines::before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(202,161,83,.33), transparent);
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.feature{
  background:rgba(20,20,21,.46);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
}
.feature h3{
  margin:0 0 8px;
  color:var(--gold);
  font-family:"Playfair Display", serif;
}

.site-footer{
  padding:48px 0 72px;
  text-align:center;
  color:var(--muted);
}

/* =========================================================
   ===================   REVEAL ANIMACIJE   =================
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal[data-reveal="left"]{ transform:translateX(-28px); }
.reveal[data-reveal="right"]{ transform:translateX(28px); }
.reveal.in-view{
  opacity:1;
  transform:none;
}

/* =========================================================
   ====================   POPUP REKLAMA   ===================
   ========================================================= */

/* zabrana skrolovanja */
html.no-scroll,
body.no-scroll{
  overflow:hidden;
}

/* tamni overlay */
.promo-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(4px);
  z-index:9999;
}
.promo-overlay.show{
  display:flex;
}

/* popup prozor – Black Friday, luksuzno (VEĆI NA LAPTOPU) */
.promo-modal{
  position:relative;
  width:min(680px, 90vw);          /* šire na većim ekranima */
  background:#050507;
  border-radius:var(--radius);
  padding:26px 26px 30px;
  text-align:center;
  box-shadow:0 26px 70px rgba(0,0,0,.9);
  border:1px solid rgba(217,176,95,.7);
}

/* još širi na baš velikim ekranima */
@media (min-width:1100px){
  .promo-modal{
    width:720px;
  }
}

/* X dugme */
.promo-close{
  position:absolute;
  top:10px; 
  right:10px;
  background:transparent;
  border:none;
  color:var(--fg);
  font-size:20px;
  cursor:pointer;
}
.promo-close:hover{ 
  color:var(--gold); 
}

/* =========================================================
   =============   DVE FOTOGRAFIJE U POPUPU   ===============
   ========================================================= */
.promo-two-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:22px;
}

.promo-two-photos img{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(220,180,101,.35);
  box-shadow:0 14px 28px rgba(0,0,0,.65);
  object-fit:cover;
}

/* =========================================================
   ==============   HAMBURGER / RESPONSIVE   ===============
   ========================================================= */
@media (max-width:1020px){

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

  .hero-right{ order:2; }
  .hero-left{ order:1; }

  .brand-logo{
    width: clamp(260px, 60vw, 560px);
  }

  .nav-toggle{
    display:block;
    z-index:11;
  }

  .nav{
    position:absolute;
    right:0;
    top:50px;
    width:min(86vw, 340px);
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px 12px;
    background:rgba(17,17,18,.66);
    border:1px solid var(--border);
    border-radius:18px;
    backdrop-filter:blur(6px) saturate(140%);
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:.25s;
  }

  .nav.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .nav a{
    width:100%;
    padding:12px 14px 12px 36px;
    text-align:left;
    border-radius:12px;
  }
  .nav a:hover{
    background:rgba(210,180,140,.10);
    color:var(--gold);
  }
}

@media (max-width:560px){

  /* postojeće za hero i dugme */
  .btn{
    width:100%;
    margin-left:0;
  }
  .hero{
    padding:88px 0 60px;
  }

  /* ➜ POPUP prilagođen za telefon (MANJI + SCROLL) */
  .promo-modal{
    width:92vw;
    max-height:88vh;        /* da stane u ekran */
    padding:16px 14px 18px; /* manji padding */
    border-radius:18px;
    box-shadow:0 16px 40px rgba(0,0,0,.8);
    overflow-y:auto;        /* skrol unutar popupa ako treba */
  }

  .promo-two-photos{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:14px;
  }

  .promo-two-photos img{
    border-radius:12px;
    box-shadow:0 10px 22px rgba(0,0,0,.6);
  }

  .promo-btn{
    width:100%;
    padding:10px 20px;
    font-size:13px;
  }
}

/* dugme Naruči / Iskoristi popust – ostaje globalno */
.promo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 30px;
  background:var(--gold);
  color:#111;
  font-weight:600;
  text-decoration:none;
  text-transform:uppercase;
  border-radius:999px;
  letter-spacing:.5px;
  font-size:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.55);
  transition:.18s ease;
}
.promo-btn:hover{
  background:var(--gold-2);
  transform:translateY(-1px);
}

/* A11y */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}