/* =========================================================
   v2 — açık tema + asimetrik düzen
   Sophos renk paleti korunur; düzen ve hiyerarşi farklılaşır.
   ========================================================= */

.v2 {
  --ink:    #0a143a;   /* başlık */
  --muted:  #5b6780;   /* gövde metni */
  --line:   #dfe6f2;   /* ince ayraç */
  --accent: #2006f7;   /* Sophos mavisi */
  --teal:   #00f2b3;
  --soft:   #f7f9fc;   /* açık zemin */
}

/* Not: aşağıdaki zemin kuralları .v2 section ile aynı ya da daha yüksek
   özgüllükte olmalı, aksi hâlde beyaz zemin hepsini eziyor. */
.v2 section { background: #fff; }
.v2 section.v2-soft { background: var(--soft); }

/* bölüm başlığı sarmalayıcısı (numaralı etiketler kaldırıldı) */
.v2-head { display: block; }

/* sola hizalı, sıkı başlık */
.v2-h2 {
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.06;
  font-size: clamp(30px, 4vw, 46px);
}
.v2-lead { color: var(--muted); font-size: 17px; line-height: 1.65; }

/* solda dikey vurgu çizgisi */
.v2-bar { border-left: 2px solid var(--line); padding-left: 26px; }
.v2-bar--on { border-left-color: var(--accent); }

/* kart: köşesiz-yumuşak, gölge yerine ince çerçeve */
.v2-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.v2-card:hover {
  border-color: rgba(32,6,247,.35);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(10,20,58,.45);
}

/* kademeli (staggered) ızgara — v1'in hizalı ızgarasından ayrışır */
@media (min-width: 1024px) {
  .v2-stagger > *:nth-child(even) { transform: translateY(28px); }
  .v2-stagger > *:nth-child(even):hover { transform: translateY(25px); }
}

/* butonlar */
.v2-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 30px; border-radius: 8px;   /* v1 tamamen yuvarlak; burada köşeli */
  font-size: 15px; font-weight: 700;
  background: var(--accent); color: #fff;
  transition: background .2s ease;
}
.v2-btn:hover { background: #1804c4; }
.v2-btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.v2-btn--ghost:hover { background: #fff; border-color: var(--ink); }

/* koyu bant — sayfada tek noktada ritim için */
.v2 section.v2-dark { background: var(--ink); }
.v2-dark { color: #fff; }
.v2-dark .v2-h2 { color: #fff; }
.v2-dark .v2-lead { color: rgba(255,255,255,.7); }
.v2-dark .v2-label { color: var(--teal); }
.v2-dark .v2-label::before { background: var(--teal); color: var(--ink); }
.v2-dark .v2-bar { border-left-color: rgba(255,255,255,.18); }

/* --- hero: tam genişlik arka plan videosu, ışıklı (açık) perde --- */
.v2 section.v2-hero {
  position: relative;
  background: var(--soft);
  overflow: hidden;
}
.v2-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Asimetrik perde: metnin olduğu solda beyaz yoğun, sağa doğru video netleşir.
   v1'deki koyu perdenin tam tersi — açık tema böyle korunuyor. */
.v2-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.93) 32%,
      rgba(247,249,252,.72) 58%,
      rgba(247,249,252,.42) 100%),
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 30%);
}
.v2-hero > .v2-hero-inner { position: relative; z-index: 2; }

@media (max-width: 1023px) {
  /* dar ekranda metin videonun üstüne biner — perdeyi tam örtücü yap */
  .v2-hero-scrim { background: rgba(255,255,255,.93); }
}

/* içerik bölümlerindeki kaydırılmış vurgu bloğu */
.v2 section:has(.v2-hero-media) { overflow: hidden; }
.v2-hero-media { position: relative; }
.v2-hero-media::before {
  content: ""; position: absolute;
  inset: 26px -26px -26px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(32,6,247,.14), rgba(0,242,179,.16));
  z-index: 0;
}
.v2-hero-media > * { position: relative; z-index: 1; }
.v2-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0a143a; }

/* istatistik şeridi */
.v2-stat b { display: block; font-size: clamp(28px, 3.4vw, 40px); font-weight: 300; color: var(--ink); letter-spacing: -.02em; }
.v2-dark .v2-stat b { color: #fff; }
.v2-stat span { font-size: 13px; color: var(--muted); }
.v2-dark .v2-stat span { color: rgba(255,255,255,.6); }