/* ===== Model 3 Top Hero (mobil-first) ===== */
:root{
  --ink:#0b0b0c;
  --ink-weak:#2b2b2f;
  --white:#fff;
  --shadow:0 10px 30px rgba(0,0,0,.18);
  --radius:14px;
}

.m3{background:#fff; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Arial,sans-serif;}

/* Hero alanı: header sabitse alttan ayarla (gerekirse topladığın site header yüksekliğini değiştir) */
.m3-hero{
  position:relative;
  height:100svh;              /* iOS güvenli viewport */
  min-height:560px;
  overflow:hidden;
  background:#000;            /* resim yüklenmeden önce */
  display:grid;
  grid-template-rows: 1fr auto; /* başlık üstte, alt bar altta */
}

/* Görsel */
.m3-hero__media{
  position:absolute; inset:0;
}
.m3-hero__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  filter:brightness(1.02);
}

/* Başlık */
.m3-hero__titlewrap{
  position:relative;
  z-index:2;
  display:grid; place-items:start center;
  padding-top:clamp(52px, 8vh, 96px);
}
.m3-hero__title{
  color:#111;
  text-shadow:0 2px 18px rgba(255,255,255,.85), 0 6px 40px rgba(255,255,255,.75);
  font-weight:600; line-height:1.1;
  font-size:clamp(28px, 5.4vw, 40px); /* mobil üstte Tesla gibi küçük, masaüstünde orta */
}

/* Alt istatistik bar + CTA */
.m3-hero__bottom{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:20px; width:min(1100px, 94vw);
  z-index:3;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.m3-hero__stats{
  margin:0; padding:10px 12px;
  list-style:none;
  display:flex; gap:12px; align-items:stretch;
  backdrop-filter:blur(8px) saturate(140%);
  background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.45));
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.m3-hero__stats li{
  color:var(--white);
  text-shadow:0 2px 14px rgba(0,0,0,.55);
  display:flex; flex-direction:column; align-items:center;
  padding:6px 10px; min-width:96px;
}
.m3-hero__stats .k{ font-weight:800; font-size:14px; letter-spacing:.02em; }
.m3-hero__stats .s{ font-size:12px; opacity:.95; text-align:center; }
.m3-hero__stats .muted{ opacity:.8; }

/* CTA düğmesi */
.m3-hero__cta{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 14px; border-radius:10px;
  background:#3a67ff; color:#fff; font-weight:700; font-size:13px;
  box-shadow:0 6px 20px rgba(58,103,255,.45);
}
.m3-hero__cta:hover{ filter:brightness(.96); }

/* Alt karartma */
.m3-hero__vignette{
  position:absolute; inset:auto 0 0 0; height:28%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.7) 100%);
  z-index:1;
}

/* ===== Responsive ===== */
@media (min-width: 640px){
  .m3-hero__stats{ gap:16px; padding:12px 16px; }
  .m3-hero__stats .k{ font-size:15px; }
  .m3-hero__stats .s{ font-size:12.5px; }
  .m3-hero__cta{ height:40px; padding:0 16px; }
}

@media (min-width: 960px){
  .m3-hero__title{ font-size:40px; }
  .m3-hero__bottom{
    flex-direction:row; justify-content:space-between; gap:16px;
  }
}

/* ==== GAP KILL + DARK CANVAS (Section 3-4 arası beyaz şerit fix) ==== */
.m3{ background:#000 !important; color:#fff; }

/* Tüm bölümler: boşluk yok */
.m3 section{ margin:0 !important; padding:0 !important; }

/* 3. bölüm alt yazı bloklarının dış boşluklarını kapat */
.m3 .m3dv-cap{ margin:0 auto 0 !important; padding:16px 16px 18px !important; }

/* 3. bölüm çerçevesi */
.m3 .m3dv-wrap{ padding:0 16px 0 !important; }
.m3 .m3dv-frame{ margin:0 auto 0 !important; }

/* 4. bölüm full-bleed zaten, garanti olsun */
.m3 .m3-cabin{ margin:0 !important; padding:0 !important; background:#000 !important; }
.m3 .m3c-wrap{ max-width:none !important; padding:0 !important; }
.m3 .m3c-frame{ border-radius:0 !important; box-shadow:none !important; }

/* Başlık/altbaşlık default üst-alt marjlarını sıfırla */
.m3 h2, .m3 h3, .m3 p{ margin-top:0 !important; margin-bottom:0 !important; }


/* === HEADER ICON & Z-INDEX FIX === */
/* .m3’nin global color:#fff etkisini header’dan uzaklaştır */
.m3 .site-header,
.m3 .site-header * {
  color:#000 !important;     /* metin ve currentColor tabanlı ikonlar siyah olsun */
  fill:#000 !important;      /* SVG ikonlar siyah */
  stroke:#000 !important;
}
/* Her ihtimale karşı header üstte kalsın */
.site-header { position:fixed; z-index:99999; }

/* === X-EKREN TAŞMASI / SAĞDA BEYAZ ŞERİT FIX === */
html, body, .m3 { overflow-x:hidden; }

/* Mutlak konumlu alt bar ve görsel katmanlar taşmasın */
.m3-hero,
.m3-hero__media,
.m3-hero__bottom { max-width:100%; }

/* Bazı tarayıcılarda 100svh + grid + absolute kombinasyonu taşma yapabiliyor; 
   taşmayı kök seviyede kapatalım */
.m3-hero { contain:layout paint; }

/* Eğer hala milimetrik taşma olursa 94vw yerine % kullan */
@media (min-width: 0px){
  .m3-hero__bottom { width:min(1100px, 94vw); } /* mevcut */
  /* Gerekirse şu alternatifi dener, üstteki satırı yoruma alırsın:
  .m3-hero__bottom { width:min(1100px, 100%); }
  */
}