/* Bilesen: Hero
   Pattern: alien-road/hero-home. Lacivert degrade + sag ustte isik halesi. */

.ar-hero {
  position: relative;
  overflow: hidden;

  /* Kenardan kenara (full-bleed).
     Hero, sayfa sablonundaki 1280px'lik kapsayicinin icinde yer alsa bile
     lacivert zemin ekranin iki kenarina kadar uzanmali. Icerik, grubun kendi
     "constrained" yerlesimi sayesinde yine 1280px'te ortalanir.
     Govdedeki overflow-x: clip (base.css) yan kaydirmayi engeller. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(135deg, var(--ar-navy) 0%, var(--ar-midnight) 100%);
  color: #fff;
  padding: var(--ar-space-2xl) var(--ar-space-md);
}

.ar-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(183, 224, 234, 0.18), transparent 55%);
  pointer-events: none;
}

.ar-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.ar-hero p {
  color: var(--ar-sky);
  font-size: 1.15rem;
  max-width: 640px;
}

/* Kisitli (constrained) yerlesim cocuklari otomatik ortalar; hero metni
   basligi ile ayni hizada, sola dayali kalmali. */
.ar-hero > p {
  margin-left: 0;
  margin-right: auto;
}

/* Hero altindaki rakam seridi. */
.ar-hero-stat-strip {
  margin-top: 36px;
  gap: var(--ar-space-lg);
  padding-top: var(--ar-space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.ar-hero-stat-strip p {
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 767px) {
  /* Dikey bosluk azalir; yatay kenar boslugu KORUNUR (metin ekran kenarina
     yapismasin). Kisayol "56px 0" yazilirsa yatay dolgu sifirlanir. */
  .ar-hero { padding: 56px var(--ar-space-md); }
}