:root{
  --genzera-navy:#0b1f3a;
  --genzera-blue:#1aa6d9; /* logo'daki açık maviye yakın */
  --genzera-eu:#0057B8;
  --text:#0f172a;
  --muted:#64748b;
  --surface:#ffffff;
  --soft:#f5f7fb;
  --border:rgba(15,23,42,.10);
  --shadow:0 12px 34px rgba(2,6,23,.10);
  --radius:18px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--soft);
}
a{color:var(--genzera-eu); text-decoration:none;}
a:hover{text-decoration:underline;}
/* Topbar */
.topbar{background:var(--genzera-navy); color:#fff; font-size:.95rem;}
.topbar a{color:rgba(255,255,255,.92);}
.topbar a:hover{color:#fff;}
/* Navbar */
.navbar-genzera{
  background:linear-gradient(90deg, var(--genzera-eu), var(--genzera-blue));
}
.navbar-genzera .nav-link,.navbar-genzera .navbar-brand{color:#fff;}
.navbar-genzera .nav-link:hover{color:rgba(255,255,255,.92);}
.brand{
  display:flex; align-items:center; gap:.65rem; font-weight:800;
  letter-spacing:.2px;
}
.brand img{width:44px; height:44px; object-fit:contain; border-radius:10px; background:#fff; padding:6px;}
/* Hero */
.hero{
  position:relative;
  min-height:78vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--genzera-navy);
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.02);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,31,58,.92), rgba(11,31,58,.62), rgba(11,31,58,.35));
  z-index:1;
}
.hero .container{position:relative; z-index:2;}
.hero h1{color:#fff; font-weight:900; font-size:clamp(2.1rem,5vw,3.6rem); margin:0 0 .35rem;}
.hero p.lead{color:rgba(255,255,255,.92); max-width:50rem;}
.hero-badges img{max-width:260px; height:auto;}
/* Buttons */
.btn-genzera{
  background:var(--genzera-eu);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:14px;
  padding:.85rem 1.1rem;
  font-weight:800;
}
.btn-genzera:hover{background:#044d9f; color:#fff; text-decoration:none;}
.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius:14px;
  padding:.85rem 1.1rem;
  font-weight:800;
}
.btn-ghost:hover{background:rgba(255,255,255,.10); color:#fff; text-decoration:none;}
/* Cards */
.card-soft{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-soft .card-img-top{height:210px; object-fit:cover;}
.badge-soft{
  background:rgba(0,87,184,.10);
  color:var(--genzera-eu);
  border:1px solid rgba(0,87,184,.14);
  font-weight:800;
}
.section-title{font-weight:900; color:var(--genzera-navy);}
.section-lead{color:var(--muted); max-width:60rem;}
/* Page header */
.page-hero{
  position:relative;
  padding:3.75rem 0;
  overflow:hidden;
  background:var(--genzera-navy);
}
.page-hero .bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.25;}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,31,58,.92), rgba(11,31,58,.55));
}
.page-hero .container{position:relative; z-index:1;}
.page-hero h1{color:#fff; font-weight:900;}
.page-hero p{color:rgba(255,255,255,.92);}
/* Why-us */
.why{
  position:relative;
  background:var(--genzera-navy);
  color:#fff;
  overflow:hidden;
}
.why .bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.20;}
.why .container{position:relative; z-index:1;}
.feature{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:1.1rem;
  height:100%;
}
.feature h3{font-size:1.1rem; margin:0 0 .35rem;}
.feature p{margin:0; color:rgba(255,255,255,.90);}
/* Footer */
footer{
  background:#fff;
  border-top:1px solid var(--border);
}
.footer-link{color:#243b53;}
.footer-link:hover{text-decoration:underline;}
/* Small helpers */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .65rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.92);
  font-size:.9rem;
}


/* --- Hero flags (top-right) --- */
.hero-flags{
  position:absolute;
  top:18px;
  right:22px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-flags img{
  height:36px; /* logo'dan biraz küçük */
  width:auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

/* --- Hero mission (under GENZERA) --- */
.hero-mission{
  color: rgba(255,255,255,.95);
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 56rem;
  margin: .5rem 0 1.25rem;
}

/* --- Navbar click animation (lively) --- */
.navbar .nav-link{
  position: relative;
  border-radius: .75rem;
  transition: transform .12s ease, box-shadow .22s ease, color .22s ease, background-color .22s ease;
}
.navbar .nav-link::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: .85rem;
  background: linear-gradient(90deg, rgba(0,87,184,.0), rgba(0,87,184,.25), rgba(45,167,223,.25), rgba(0,87,184,.0));
  opacity:0;
  transform: scale(.96);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.navbar .nav-link:hover::after{
  opacity:1;
  transform: scale(1);
}
.navbar .nav-link.nav-click{
  transform: translateY(1px) scale(.97);
  box-shadow: 0 10px 22px rgba(0,87,184,.22);
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(0,87,184,.75), rgba(45,167,223,.75));
}