/* =========================================================
   Duracell – custom.css (final v2)
   Tražene izmjene:
   - Nagrade: pozadina slika 'pozadina-bakreno.jpg' + pozicioniranje glowa
   - Claim: "SVAKI TJEDAN, FURBY JEDAN!" veće; "FURBY GALAXY..." manje
   - "FURBY JEDAN" bakrena boja
   - Forma: čista crna + "sjena" od gore prema dolje (obrnuto od hero)
   - Zeko: znatno veći, apsolutno pozicioniran (ne gura layout)
   ========================================================= */

@font-face {
    font-family: 'One Night Sans Condensed';
    src: url('fonts/OneNightSans-Condensed.eot');
    src: url('fonts/OneNightSans-Condensed.eot?#iefix') format('embedded-opentype'),
        url('fonts/OneNightSans-Condensed.woff2') format('woff2'),
        url('fonts/OneNightSans-Condensed.woff') format('woff'),
        url('fonts/OneNightSans-Condensed.ttf') format('truetype'),
        url('fonts/OneNightSans-Condensed.svg#OneNightSans-Condensed') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'One Night Sans Extended';
    src: url('fonts/OneNightSans-Extended.eot');
    src: url('fonts/OneNightSans-Extended.eot?#iefix') format('embedded-opentype'),
        url('fonts/OneNightSans-Extended.woff2') format('woff2'),
        url('fonts/OneNightSans-Extended.woff') format('woff'),
        url('fonts/OneNightSans-Extended.ttf') format('truetype'),
        url('fonts/OneNightSans-Extended.svg#OneNightSans-Extended') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'One Night Sans Condensed';
    src: url('fonts/OneNightSans-CondensedBlack.eot');
    src: url('fonts/OneNightSans-CondensedBlack.eot?#iefix') format('embedded-opentype'),
        url('fonts/OneNightSans-CondensedBlack.woff2') format('woff2'),
        url('fonts/OneNightSans-CondensedBlack.woff') format('woff'),
        url('fonts/OneNightSans-CondensedBlack.ttf') format('truetype'),
        url('fonts/OneNightSans-CondensedBlack.svg#OneNightSans-CondensedBlack') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('fonts/Barlow-Regular.eot');
    src: url('fonts/Barlow-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Barlow-Regular.woff2') format('woff2'),
        url('fonts/Barlow-Regular.woff') format('woff'),
        url('fonts/Barlow-Regular.ttf') format('truetype'),
        url('fonts/Barlow-Regular.svg#Barlow-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'One Night Sans';
    src: url('fonts/OneNightSans-Black.eot');
    src: url('fonts/OneNightSans-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/OneNightSans-Black.woff2') format('woff2'),
        url('fonts/OneNightSans-Black.woff') format('woff'),
        url('fonts/OneNightSans-Black.ttf') format('truetype'),
        url('fonts/OneNightSans-Black.svg#OneNightSans-Black') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   Durex – custom.css (v1)
   Layout: hero split (photo left / gradient right), nagrade cards
   Fonts already included by you: One Night Sans Condensed/Extended/Barlow.
   ========================================================= */

/* ---------- Varijable ---------- */
:root{
  --dx-black:#0b0b0f;
  --dx-white:#fff;
  --dx-pink:#ff2aa6;
  --dx-fuchsia:#d600ff;
  --dx-purple:#6f5cff;
  --dx-lilac:#b48cff;
  --dx-text:#1a1a1a;
}

html{
  scroll-behavior: smooth;
}

/* ---------- Osnovno ---------- */
html,body{height:100%}
body{
  font-family: 'Barlow', system-ui, -apple-system, Arial, sans-serif;
  color: var(--dx-text);
  font-size: 1.05rem;
  margin:0;
  background:#fff;
}
a, .btn, button, img{ transition: all .25s ease; }
img{ max-width:100%; height:auto; }

/* =========================================================
   NAVBAR
   ========================================================= */
.dx-topbar{
  background: rgba(10,10,16,.92);
  backdrop-filter: blur(8px);
}
.dx-logo{ height:28px; width:auto; }
.navbar-dark .navbar-nav .nav-link{
  color: var(--dx-white);
  font-family: 'One Night Sans Condensed', 'Barlow', sans-serif;
  font-weight: bold;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.navbar-dark .navbar-nav .nav-link:hover{ text-decoration: underline; }

/* =========================================================
   HERO
   ========================================================= */
.dx-hero{
  position: relative;
  overflow:hidden;
  min-height: 520px;
  background: #111;
  color: var(--dx-white);
}

/* 2-column split with a diagonal divider */
.dx-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 85% 20%, rgba(255,42,166,.55), rgba(214,0,255,.25) 45%, rgba(111,92,255,.25) 70%, rgba(10,10,16,1) 100%),
    linear-gradient(135deg, rgba(10,10,16,.0) 0%, rgba(10,10,16,.0) 47%, rgba(10,10,16,.9) 47.2%, rgba(10,10,16,1) 100%);
  z-index: 1;
}

/* left photo as background layer */
.dx-hero__photo{
  position:absolute; inset:0;
  background: url("../img/durex-hero-image.jpg") left center/cover no-repeat;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05);
}

/* subtle dark overlay to keep text readable on small screens */
.dx-hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(10,10,16,.15) 0%, rgba(10,10,16,.30) 40%, rgba(10,10,16,.85) 68%, rgba(10,10,16,1) 100%);
  z-index: 1;
}

/* content container */
.dx-hero .container{
  position: relative;
  z-index: 2;
}

/* top-left label like key visual */
.dx-kicker{
  margin-top: 1rem;
  max-width: 520px;
}
.dx-kicker .title{
  font-family:'One Night Sans', 'One Night Sans Condensed', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: clamp(2rem, 2.2vw + 1.4rem, 3.2rem);
  line-height: 1.02;
  margin: 0;
}
.dx-kicker .date{
  font-family:'One Night Sans Extended', 'Barlow', sans-serif;
  font-weight: normal;
  font-size: clamp(1.3rem, 1vw + 1rem, 2rem);
  letter-spacing: .6px;
  opacity: .95;
  margin: .35rem 0 0 0;
}

/* right column block */
.dx-right{
  padding: 1.25rem 0 2.2rem 0;
}
.dx-brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.9rem;
  margin: .75rem 0 1.25rem 0;
}
.dx-brand img{
  height: 54px;
  width: auto;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.35));
}
.dx-claim{
  margin: 0 0 1.2rem 0;
}
.dx-claim .small{
  font-family:'One Night Sans Extended', 'Barlow', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .8px;
  opacity: .9;
  font-size: clamp(1rem, .6vw + .9rem, 1.2rem);
}
.dx-claim .big{
  font-family:'One Night Sans', 'One Night Sans Condensed', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-size: clamp(1.9rem, 2vw + 1.2rem, 3rem);
  line-height: 1.06;
}
.dx-lead{
  font-size: 1.05rem;
  opacity: .92;
  margin: 1.2rem 0 1.6rem 0;
  max-width: 560px;
}
.dx-btn{
  background: linear-gradient(90deg, var(--dx-pink), var(--dx-fuchsia));
  border: 0;
  color: #fff;
  font-family:'One Night Sans Condensed', 'Barlow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: .85rem 1.25rem;
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(255,42,166,.22);
}
.dx-btn:hover{ transform: translateY(-1px); color:#fff; }

/* responsive hero: stack, and add stronger scrim so label is readable */
@media (max-width: 991.98px){
  .dx-hero{ min-height: 640px; }
  .dx-hero::before{ background:
    radial-gradient(900px 700px at 50% 20%, rgba(255,42,166,.45), rgba(214,0,255,.20) 45%, rgba(111,92,255,.18) 70%, rgba(10,10,16,1) 100%);
  }
  .dx-hero__scrim{
    background: linear-gradient(180deg, rgba(10,10,16,.20) 0%, rgba(10,10,16,.40) 45%, rgba(10,10,16,.92) 78%, rgba(10,10,16,1) 100%);
  }
  .dx-kicker{ margin-top: 0; padding-top: 1.2rem; }
  .dx-brand img{ height: 46px; }
}

/* =========================================================
   NAGRADE
   ========================================================= */
.dx-section{
  position: relative;
  background: #fff;
}
.dx-section--soft{
  /* Gradijent kao na key visualu: roza -> plava */
  background: linear-gradient(135deg, #ff2aa6 0%, #b48cff 40%, #5aa8ff 100%);
}
.dx-h2{
  font-family:'One Night Sans', 'One Night Sans Condensed', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-size: clamp(1.6rem, 1vw + 1.4rem, 2.2rem);
  margin: 0 0 .35rem 0;
}
.dx-sub{
  font-family:'One Night Sans Extended', 'Barlow', sans-serif;
  font-weight: normal;
  margin: 0;
  opacity:.9;
}

/* Kako sudjelovati – bijeli tekst */
.dx-section--soft,
.dx-section--soft p,
.dx-section--soft h2,
.dx-section--soft .dx-how-text,
.dx-section--soft .dx-sub{
  color: #fff;
}

/* Link u bijelo */
.dx-section--soft a{
  color: #fff;
  text-decoration: underline;
}

.dx-section--soft a:hover{
  color: #fff;
  text-decoration: none;
}


.dx-prizes{
  margin-top: 1.75rem;
}

/* =========================================================
   PRIJAVA (iframe) – dark section
   ========================================================= */
.dx-form{
  position: relative;
  background: linear-gradient(180deg, rgba(10,10,16,1) 0%, rgba(10,10,16,1) 60%, rgba(10,10,16,.98) 100%);
  color: #fff;
  overflow:hidden;
}
.dx-form::before{
  content:"";
  position:absolute; inset: -120px -120px auto -120px;
  height: 320px;
  background: radial-gradient(closest-side at 50% 50%, rgba(255,42,166,.35), rgba(255,42,166,0) 70%);
  pointer-events:none;
}
.dx-form-banner{
  display:inline-block;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-family:'One Night Sans Condensed', 'Barlow', sans-serif;
  font-weight: bold;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.dx-form-wrap{ max-width: 980px; margin: 0 auto; position: relative; z-index: 1; }
.dx-form-frame{
  width: 100%;
  height: 900px;       /* samo fallback dok ne stigne postMessage */
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.dx-form a{ color:#fff; text-decoration: underline; }
.dx-form a:hover{ text-decoration: none; }

/* =========================================================
   FOOTER
   ========================================================= */
.dx-footer{
  background: rgba(10,10,16,1);
  color: rgba(255,255,255,.78);
}
.dx-links{
  list-style:none; padding:0; margin:0;
  display:flex; gap:1.25rem; flex-wrap:wrap;
}
.dx-links a{ color: rgba(255,255,255,.78); text-decoration:none; }
.dx-links a:hover{ text-decoration: underline; }
.dx-logo-small{ height:18px; width:auto; opacity:.9; }

/* Small helpers */
.dx-text-pink{ color: var(--dx-pink); }


/* Nagrade – samo slike (bez kartica) */
.dx-prize-img{
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.25));
}
.dx-prize-img:hover{ transform: translateY(-2px) scale(1.01); }

/* Inline brand logos u tekstu */
.dx-inline-logo{
  height: 1em;          /* fino sjeda u liniju teksta */
  width: auto;
  vertical-align: 0em;  /* optičko poravnanje s baselineom */
  margin: 0 .25em;
}

/* =========================================================
   SUBPAGES (Pravila / Dobitnici / GDPR)
   ========================================================= */

.dx-page-hero{
  position:relative;
  overflow:hidden;
  background:#0b0b0f;
  color:#fff;
}
.dx-page-hero::before{
  content:"";
  position:absolute;
  inset:-160px -120px auto -120px;
  height:340px;
  background: radial-gradient(closest-side at 50% 50%, rgba(255,42,166,.35), rgba(255,42,166,0) 70%);
  pointer-events:none;
}

/* varijacije po stranici */
.dx-page-hero--purple::before{
  background: radial-gradient(closest-side at 50% 50%, rgba(111,92,255,.35), rgba(111,92,255,0) 70%);
}
.dx-page-hero--blue::before{
  background: radial-gradient(closest-side at 50% 50%, rgba(90,168,255,.35), rgba(90,168,255,0) 70%);
}

.dx-page-title{
  font-family:'One Night Sans','One Night Sans Condensed',sans-serif;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size: clamp(1.8rem, 1.4vw + 1.4rem, 2.6rem);
  margin: 0;
}

.dx-page-sub{
  opacity:.85;
  margin:.35rem 0 0 0;
}

.dx-back{
  color:#fff;
  text-decoration:underline;
  opacity:.9;
}
.dx-back:hover{
  opacity:1;
  text-decoration:none;
}

.dx-page-card{
  background:#fff;
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 18px 42px rgba(0,0,0,.10);
  border:1px solid rgba(10,10,16,.06);
}

.dx-page-card h3{
  font-family:'One Night Sans Extended','Barlow',sans-serif;
  font-weight:normal;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:1.05rem;
  margin:0 0 .75rem 0;
  opacity:.9;
}

.dx-page-card p,
.dx-page-card li{
  font-size:1.03rem;
}

.dx-page-card a{
  color:#000;
  text-decoration:underline;
}
.dx-page-card a:hover{
  text-decoration:none;
}

.dx-table{
  width:100%;
  border-collapse:collapse;
}
.dx-table th,
.dx-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.dx-table th{
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:.9rem;
}

.dx-note{ opacity:.8; }
.dx-small{ opacity:.85; }