/* === HERO WRAPPER (keeps page background clean) === */
.hero-section{
  background: transparent;
  padding: 0; /* outer spacing handled by hero-box if needed */
}

/* === BLUE ROUNDED HERO BOX === */
.hero-box{
  background: linear-gradient(90deg, #315da8 0%, #36bdee 100%);
  height: 840px;              /* fixed height as requested */
  max-width: 1860px;          /* total width of the blue area */
  margin: 0 auto;             /* center on page */
  border-radius: 56px;        /* big rounded corners */
  overflow: hidden;           /* keep children inside radius */
  display: flex;
  flex-direction: column;     /* navbar top, content below */
  color: #fff;
  padding: 0 32px;            /* inner side gutters for content */
}

/* Navbar look over blue bg */
.hero-box .navbar .navbar-brand,
.hero-box .navbar .nav-link{
  color:#fff;
}
.hero-box .navbar .nav-link.active{
  font-weight:700;
}

/* White support button on blue bg */
.btn-destek{
  background:#fff;
  color:#212529;
  border:0;
}

/* Content vertical centering */
.hero-box .content{
  flex:1;
  display:flex;
  align-items:center;
}

/* Right-side visual placeholder */
.visual{
  min-height:420px;
  border-radius:12px;
}

/* Responsive tweaks */
@media (max-width: 1400px){
  .hero-box{ border-radius:40px; }
}
@media (max-width: 991.98px){
  .hero-box{
    height:auto;             /* allow growth on mobile */
    max-width:100%;
    margin: 0 16px;          /* small outer gutters on mobile */
    padding:16px;
    border-radius:28px;
  }
  .visual{ min-height:280px; margin-top:24px; }
}