/* ==========================================================
   Villa Natali - index.css
   Verzija bez Swiper slidera
   Jedna hero slika + uredan responsive layout za index stranice.
   ========================================================== */

:root{
  --blue:#3498db;
  --blue-dark:#1f6fa8;
  --navy:#10233f;
  --text:#1f2933;
  --muted:#5f6f7c;
  --light:#f4f8fb;
  --card:#ffffff;
  --yellow:#f1c40f;
  --teal:#0f766e;
  --shadow:0 12px 32px rgba(15,35,63,.10);
  --shadow-soft:0 8px 22px rgba(15,35,63,.08);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.65;
}
a{color:inherit}
img{max-width:100%;height:auto}

/* HEADER */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  box-shadow:0 3px 18px rgba(0,0,0,.06);
}
.nav-container{
  max-width:1200px;
  margin:0 auto;
  padding:12px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#fff;
}
.logo img{
  display:block;
  width:180px;
  height:auto;
}
.nav-group{
  display:flex;
  align-items:center;
  gap:14px;
}
.desktop-menu{
  display:flex;
  align-items:center;
  gap:20px;
}
.desktop-menu a{
  text-decoration:none;
  font-weight:600;
  color:var(--navy);
  font-size:.96rem;
  transition:color .2s ease, background .2s ease;
}
.desktop-menu a:hover{color:var(--blue)}

.language-dropdown{position:relative}
.lang-btn{
  border:0;
  background:var(--blue);
  color:#fff;
  border-radius:999px;
  padding:10px 13px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}
.lang-options{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:110px;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:1200;
}
.language-dropdown.active .lang-options{display:block}
.lang-options a{
  display:block;
  padding:11px 16px;
  text-decoration:none;
  font-weight:700;
  color:var(--navy);
}
.lang-options a:hover{background:#eef6ff;color:var(--blue-dark)}

.hamburger{
  display:none;
  border:0;
  background:#fff;
  color:var(--navy);
  font-size:24px;
  cursor:pointer;
  padding:8px;
}

/* HERO SLIKA - BEZ SWIPERA */
.fast-hero{
  width:100%;
  background:#eef5f8;
  overflow:hidden;
}
.fast-hero img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

.hero-copy{
  max-width:980px;
  margin:0 auto;
  padding:42px 22px 34px;
  text-align:center;
}
.hero-copy h1{
  margin:0 0 18px;
  color:var(--navy);
  font-size:clamp(2rem,4.8vw,3.8rem);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.02em;
}
.hero-copy p{
  max-width:850px;
  margin:0 auto 14px;
  font-size:1.05rem;
  color:#273849;
}
.trust-line{
  margin-top:16px!important;
  font-weight:800;
  color:var(--teal)!important;
}
.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:24px;
}
.cta-button,.cta-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 24px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cta-button{background:var(--yellow);color:#16202a}
.cta-secondary{background:var(--teal);color:#fff}
.cta-button:hover,.cta-secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.17);
}

/* OPĆE SEKCIJE */
.benefits,
.apartments,
.apartments-preview,
.reviews-section,
.location-section,
.blog-section,
.faq-section,
.mapa,
.map-section{
  max-width:1200px;
  margin:0 auto;
  padding:58px 22px;
}
.benefits h2,
.apartments h2,
.apartments-preview h2,
.reviews-section h2,
.location-section h2,
.blog-section h2,
.faq-section h2,
.mapa h2,
.map-section h2,
.content-section h2{
  text-align:center;
  color:var(--navy);
  font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.2;
  margin:0 0 30px;
}

/* BENEFITS */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.benefit-card{
  background:#fff;
  border-radius:var(--radius);
  padding:28px 22px;
  text-align:center;
  box-shadow:var(--shadow);
  border:1px solid #eef2f6;
}
.benefit-card i{
  font-size:34px;
  color:var(--blue);
  margin-bottom:12px;
}
.benefit-card h3{
  color:var(--navy);
  margin:8px 0 10px;
  font-size:1.18rem;
}
.benefit-card p{margin:0;color:var(--muted)}

/* CONTENT */
.content-section{
  background:var(--light);
  max-width:none;
  margin:0;
  padding:58px 22px;
}
.content-section > h2{
  max-width:1050px;
  margin-left:auto;
  margin-right:auto;
}
.content-box,
.location-box{
  max-width:1050px;
  margin:0 auto;
  background:#fff;
  border-radius:var(--radius);
  padding:36px;
  box-shadow:var(--shadow);
}
.content-box h2{
  text-align:left;
  margin-bottom:18px;
}
.content-box h3,
.location-box h3{
  color:var(--navy);
  margin:26px 0 10px;
  font-size:1.35rem;
}
.content-box p,
.location-box p{
  margin:0 0 15px;
  color:#334155;
}
.content-box ul{
  margin:12px 0 18px;
  padding-left:22px;
}
.content-box li{margin-bottom:7px}

/* APARTMANI */
.apartment-grid,
.apartments-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.apartment-card,
.card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid #eef2f6;
  display:flex;
  flex-direction:column;
}
.apartment-card img,
.card img{
  width:100%;
  display:block;
  aspect-ratio:4/3;
  object-fit:cover;
}
.apartment-card h3,
.card h3{
  margin:0;
  padding:22px 22px 8px;
  color:var(--navy);
}
.apartment-card p,
.card p{
  color:var(--muted);
  margin:0;
  padding:0 22px 14px;
}
.apartment-card a,
.card a,
.more-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin:4px 22px 22px;
  padding:10px 18px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

/* REVIEWS */
.reviews-section{
  background:#fff;
}
.score-line{
  text-align:center;
  color:var(--teal);
  font-weight:800;
  margin:-12px auto 26px;
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.review-card{
  background:#fff;
  border:1px solid #eef2f6;
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow-soft);
}
.review-card h3{
  margin:0 0 10px;
  color:#f5b301;
}
.review-card p{color:#334155;margin:0 0 12px}
.review-card strong{color:var(--navy)}

/* BLOG */
.blog-section{
  background:#fff;
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.blog-card{
  background:#fff;
  border:1px solid #eef2f6;
  border-radius:var(--radius);
  padding:26px 24px;
  box-shadow:var(--shadow-soft);
}
.blog-card h3{
  margin:0 0 10px;
  color:var(--navy);
  line-height:1.25;
}
.blog-card p{
  margin:0 0 16px;
  color:var(--muted);
}
.blog-card a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.section-center{
  text-align:center;
  margin-top:28px;
}

/* FAQ */
.faq-section{
  background:var(--light);
  max-width:none;
}
.faq-section > h2,
.faq-section > .faq-item,
.faq-section > .section-center{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.faq-item,
.faq-box{
  background:#fff;
  border-radius:16px;
  padding:22px 24px;
  margin-bottom:14px;
  box-shadow:var(--shadow-soft);
}
.faq-item h3,
.faq-box h3{
  margin:0 0 8px;
  color:var(--navy);
}
.faq-item p,
.faq-box p{
  margin:0;
  color:#334155;
}

/* OGLASI */
.borea-banner{
  max-width:1200px;
  margin:0 auto;
  padding:34px 22px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.borea-banner a{
  display:block;
  text-decoration:none;
}
.borea-banner img{
  display:block;
  max-width:360px;
  width:100%;
  height:auto;
  border-radius:14px;
}

/* MAPA */
.mapa,
.map-section{
  background:#fff;
}
.mapa iframe,
.map-section iframe{
  width:100%;
  min-height:380px;
  border:0;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* FOOTER */
footer{
  background:#10233f;
  color:#fff;
  padding:48px 22px 22px;
}
.footer-content,
.footer-container{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:34px;
}
.footer-column h3{
  margin:0 0 14px;
  color:#fff;
}
.footer-column p,
.footer-column a{
  color:#dce7f3;
}
.footer-column p{margin:0 0 9px}
.footer-column a{
  display:block;
  text-decoration:none;
  margin-bottom:8px;
}
.footer-column a:hover{color:#fff}
.social-icons{
  display:flex;
  gap:12px;
}
.social-icons a{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}
.copyright{
  max-width:1200px;
  margin:28px auto 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
  text-align:center;
  color:#dce7f3;
}

.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:86px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:28px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  z-index:1300;
}
.cta-mobile{
  display:none;
  position:fixed;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:1290;
  background:var(--yellow);
  color:#17202a;
  text-align:center;
  padding:13px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

/* TABLET */
@media(max-width:992px){
  .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apartment-grid,.apartments-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews-grid,.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-content,.footer-container{grid-template-columns:1fr 1fr}
}

/* MOBITEL */
@media(max-width:768px){
  body{background:#e9eef6}
  header{
    position:relative;
    box-shadow:none;
    background:transparent;
  }
  .nav-container{
    width:min(100%,430px);
    margin:18px auto 0;
    padding:12px 18px;
    box-shadow:none;
  }
  .logo img{width:150px}
  .hamburger{display:block}
  .desktop-menu{
    display:none;
    position:absolute;
    left:50%;
    top:78px;
    transform:translateX(-50%);
    width:min(calc(100% - 36px),394px);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:#fff;
    border-radius:16px;
    padding:12px;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    z-index:1400;
  }
  .desktop-menu.active{display:flex}
  .desktop-menu a{
    width:100%;
    padding:12px 10px;
    border-radius:10px;
  }
  .desktop-menu a:hover{background:#eef6ff}
  .lang-btn{padding:9px 12px}

  .fast-hero{
    width:min(100%,430px);
    margin:0 auto;
    background:#fff;
    overflow:visible;
  }
  .fast-hero img{
    width:100%;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
  }
  .hero-copy{
    width:min(100%,430px);
    background:#f6f9fd;
    padding:42px 22px 32px;
  }
  .hero-copy h1{
    font-size:1.75rem;
    line-height:1.15;
  }
  .hero-copy p{font-size:.96rem}

  .hero-actions{gap:10px}
  .cta-button,.cta-secondary{
    width:100%;
    max-width:300px;
  }

  .benefits,
  .apartments,
  .apartments-preview,
  .reviews-section,
  .location-section,
  .blog-section,
  .faq-section,
  .mapa,
  .map-section,
  .content-section{
    padding:44px 18px;
  }
  .benefits-grid,
  .apartment-grid,
  .apartments-grid,
  .reviews-grid,
  .blog-grid{
    grid-template-columns:1fr;
  }
  .content-box,
  .location-box{
    padding:26px 20px;
  }
  .content-box h2{text-align:center}
  .borea-banner{
    padding:30px 18px;
    gap:18px;
  }
  .mapa iframe,
  .map-section iframe{
    min-height:320px;
  }
  .footer-content,
  .footer-container{
    grid-template-columns:1fr;
    text-align:center;
  }
  .social-icons{justify-content:center}
  .cta-mobile{display:block}
  .whatsapp-float{
    bottom:78px;
    right:16px;
    width:52px;
    height:52px;
  }
}

/* MALI MOBITEL */
@media(max-width:420px){
  .nav-container,
  .fast-hero,
  .hero-copy{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
  .nav-container{margin-top:0}
  .logo img{width:138px}
  .hero-copy h1{font-size:1.62rem}
  .benefits h2,
  .apartments h2,
  .reviews-section h2,
  .location-section h2,
  .blog-section h2,
  .faq-section h2,
  .mapa h2,
  .map-section h2,
  .content-section h2{
    font-size:1.55rem;
  }
}