*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#07110d;
  color:#edf8f1;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%}

.topbar{
  max-width:1240px;
  margin:auto;
  min-height:82px;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:30px;
}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{
  width:52px;height:52px;object-fit:contain;
  border-radius:14px;
}
.brand strong{display:block;font-size:18px;letter-spacing:.5px}
.brand span{display:block;font-size:12px;color:#8da99a}
.topbar nav{display:flex;gap:25px;color:#b5c9bd;font-size:14px}
.topbar nav a:hover{color:#fff}

.top-cta,.primary,.final-cta>a{
  background:#d6ff3f;
  color:#07110d;
  padding:12px 20px;
  border-radius:12px;
  font-weight:800;
}

main{max-width:1240px;margin:auto;padding:0 24px}

.hero{
  min-height:570px;
  border:1px solid #183729;
  border-radius:30px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  position:relative;
  padding:55px;
  background:
    radial-gradient(circle at 80% 50%,rgba(98,255,151,.15),transparent 36%),
    linear-gradient(135deg,#0c1b14,#07110d);
}
.hero-copy{position:relative;z-index:2}
.eyebrow,.section-title>span,.guide-strip>div>span{
  color:#bde75a;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
}
.hero h1{
  max-width:680px;
  font-size:clamp(42px,6vw,76px);
  line-height:.98;
  letter-spacing:-3px;
  margin:17px 0 24px;
}
.hero-copy>p{
  max-width:600px;
  color:#a9beb1;
  font-size:17px;
}
.hero-actions{display:flex;gap:12px;margin-top:30px}
.primary,.secondary{padding:15px 23px;border-radius:13px;font-weight:800}
.secondary{border:1px solid #315442;background:#10251a}
.hero-points{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;color:#91ad9b;font-size:13px}

.panda-stage{
  min-height:460px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.panda-stage img{
  width:min(100%,480px);
  position:relative;
  z-index:2;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
}
.glow{
  width:330px;height:330px;
  position:absolute;
  border-radius:50%;
  background:#8dff78;
  opacity:.12;
  filter:blur(50px);
}

.status-card{
  margin:20px 0 80px;
  border:1px solid #1c3a2b;
  border-radius:18px;
  padding:20px 24px;
  background:#0b1912;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.status-card>div{display:flex;align-items:center;gap:15px}
.status-card small{display:block;color:#6e907c;font-weight:700}
.status-card strong{display:block}
.status-card>a{color:#d6ff3f;font-weight:800}
.pulse{
  width:12px;height:12px;border-radius:50%;
  background:#70ff8d;
  box-shadow:0 0 20px #70ff8d;
}

.section{margin:100px 0}
.section-title{max-width:700px;margin-bottom:35px}
.section-title h2,.text h2,.guide-strip h2,.final-cta h2{
  font-size:clamp(30px,4vw,48px);
  line-height:1.05;
  margin:10px 0 15px;
}
.section-title p,.text p{color:#94ad9e}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.cards article,.security-grid article{
  background:#0c1b14;
  border:1px solid #173629;
  padding:28px;
  border-radius:20px;
}
.cards article:hover,.security-grid article:hover{
  transform:translateY(-3px);
  border-color:#3c664e;
}
.number{
  color:#d6ff3f;
  font-weight:900;
  font-size:13px;
  margin-bottom:35px;
}
.cards h3{font-size:21px}
.cards p,.security-grid p{color:#8fa798;font-size:14px}

.split{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  align-items:center;
}
.visual-card{
  min-height:440px;
  border-radius:30px;
  background:radial-gradient(circle,#1b4931,#0b1912 65%);
  border:1px solid #1d422f;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:35px;
}
.visual-card img{max-height:390px;object-fit:contain}
.text ul{padding-left:20px;color:#b3c7bb}
.text li{margin:10px 0}
.text>a{display:inline-block;margin-top:15px;color:#d6ff3f;font-weight:800}

.security-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.security-grid b{font-size:18px}

.guide-strip{
  border-top:1px solid #19382a;
  border-bottom:1px solid #19382a;
  padding:60px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}
.guide-links{display:grid;gap:10px}
.guide-links a{
  padding:17px 5px;
  border-bottom:1px solid #183629;
  display:flex;
  justify-content:space-between;
}
.guide-links a:hover{color:#d6ff3f}

.final-cta{
  margin:100px 0 50px;
  padding:45px;
  border-radius:28px;
  background:linear-gradient(120deg,#12291d,#193b29);
  border:1px solid #2d5940;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.final-cta p{color:#9db2a5;max-width:650px}

footer{
  max-width:1240px;
  margin:auto;
  padding:35px 24px 45px;
  border-top:1px solid #183428;
  display:flex;
  justify-content:space-between;
  color:#708c7b;
  font-size:13px;
}
footer strong{color:#dcebe2}

@media(max-width:850px){
  .topbar nav{display:none}
  .hero{
    grid-template-columns:1fr;
    padding:35px 25px 10px;
  }
  .hero h1{font-size:48px;letter-spacing:-2px}
  .panda-stage{min-height:350px}
  .panda-stage img{max-height:340px}
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:30px}
  .security-grid{grid-template-columns:1fr}
  .guide-strip{grid-template-columns:1fr}
}

@media(max-width:560px){
  .topbar{padding:10px 15px}
  .brand span{display:none}
  .brand img{width:42px;height:42px}
  .top-cta{padding:10px 13px;font-size:13px}
  main{padding:0 14px}
  .hero{border-radius:20px;padding:30px 20px 5px}
  .hero h1{font-size:39px}
  .hero-copy>p{font-size:15px}
  .hero-actions{flex-direction:column}
  .hero-actions a{text-align:center}
  .hero-points{gap:10px}
  .panda-stage{min-height:300px}
  .status-card{align-items:flex-start;flex-direction:column;margin-bottom:60px}
  .section{margin:70px 0}
  .visual-card{min-height:320px}
  .final-cta{padding:28px;flex-direction:column;align-items:flex-start}
  footer{flex-direction:column}
}

/* === ZBAHIS BRAND COLORS === */
:root{
  --zb-bg:#071923;
  --zb-bg-dark:#041219;
  --zb-panel:#0a202b;
  --zb-panel-2:#0d2834;
  --zb-border:#164454;
  --zb-cyan:#35c9e6;
  --zb-red:#f34d3d;
  --zb-orange:#ff6545;
  --zb-text:#f3f7f8;
  --zb-muted:#91aab3;
}

body{
  background:var(--zb-bg-dark);
  color:var(--zb-text);
}

.topbar{
  background:transparent;
}

.brand span,
.hero-copy>p,
.section-title p,
.text p,
.cards p,
.security-grid p{
  color:var(--zb-muted);
}

.topbar nav{
  color:#aec2c9;
}

.topbar nav a:hover{
  color:var(--zb-cyan);
}

/* Ana CTA */
.top-cta,
.primary,
.final-cta>a{
  background:linear-gradient(135deg,var(--zb-red),var(--zb-orange));
  color:#fff;
  box-shadow:0 8px 28px rgba(243,77,61,.20);
}

.top-cta:hover,
.primary:hover,
.final-cta>a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(243,77,61,.32);
}

/* HERO */
.hero{
  border-color:var(--zb-border);
  background:
    radial-gradient(circle at 82% 45%,rgba(53,201,230,.16),transparent 34%),
    radial-gradient(circle at 68% 80%,rgba(243,77,61,.08),transparent 32%),
    linear-gradient(135deg,#071d27,#04151d);
}

.eyebrow,
.section-title>span,
.guide-strip>div>span{
  color:var(--zb-cyan);
}

.secondary{
  border-color:#205063;
  background:#0a2530;
}

.secondary:hover{
  border-color:var(--zb-cyan);
}

.hero-points{
  color:#9db6be;
}

.glow{
  background:var(--zb-cyan);
  opacity:.15;
}

/* DURUM */
.status-card{
  border-color:var(--zb-border);
  background:var(--zb-panel);
}

.status-card small{
  color:#7399a7;
}

.status-card>a,
.text>a,
.guide-links a:hover{
  color:var(--zb-cyan);
}

.pulse{
  background:var(--zb-cyan);
  box-shadow:0 0 20px var(--zb-cyan);
}

/* KARTLAR */
.cards article,
.security-grid article{
  background:var(--zb-panel);
  border-color:var(--zb-border);
}

.cards article:hover,
.security-grid article:hover{
  border-color:var(--zb-cyan);
}

.number{
  color:var(--zb-red);
}

.visual-card{
  background:
    radial-gradient(circle,rgba(53,201,230,.16),transparent 58%),
    var(--zb-panel);
  border-color:var(--zb-border);
}

.guide-strip,
.guide-links a,
footer{
  border-color:var(--zb-border);
}

.final-cta{
  background:
    radial-gradient(circle at 90% 20%,rgba(53,201,230,.12),transparent 35%),
    linear-gradient(120deg,#09232e,#0c2b37);
  border-color:#205568;
}

/* Küçük marka detayı */
.hero h1::first-line{
  color:#fff;
}

::selection{
  background:var(--zb-red);
  color:#fff;
}