/* ═══════════════════════════════════════════════════════════════════════
   obiuzman — SAYFA BAŞLIK BÖLÜMÜ (hero) · TEK KAYNAK · 21 Ekim 2026
   ═══════════════════════════════════════════════════════════════════════
   Bütün obiuzman.com sayfaları (ana sayfa, kurumsal, paketler, blog …) başlık
   bölümünü YALNIZ bu dosyadan çizer. Sayfada kendi hero stili yazılmaz;
   HERO_TEKLIGI bekçisi bunu ölçer.

   Kullanım:
     <section class="obi-hero">
       <div class="obi-hero-ic">
         <h1>Başlık</h1>
         <p>Alt yazı</p>          ← başlıktan hemen sonraki paragraf alt yazıdır
         … (düğme, açıklama kutusu vb. sayfaya özgü içerik)
       </div>
     </section>

   Zemin süsleri (yüzen daireler, kâğıt uçak, ızgara) sayfaya HTML olarak
   yazılmaz; burada çizilir. Ölçüler ana sayfanın 24 Ağu 2026 başlığından
   alındı (başlık 54px'e kadar, alt yazı 20px).
   ═══════════════════════════════════════════════════════════════════════ */

.obi-hero {
  position: relative;
  overflow: hidden;
  padding-top: 90px;
  font-family: 'Lexend', sans-serif;
  color: #fff;
  text-align: center;
  background:
    /* orta daire, sağ */
    radial-gradient(circle closest-side, rgba(255,255,255,0.06) 99.5%, transparent 100%) right -80px top 50px / 350px 350px no-repeat,
    /* küçük daire, alt */
    radial-gradient(circle closest-side, rgba(255,255,255,0.04) 99.5%, transparent 100%) 30% calc(100% + 60px) / 200px 200px no-repeat,
    /* ince ızgara */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M60 0H0V60' fill='none' stroke='white' stroke-opacity='0.04'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #00479A 0%, #005ec5 45%, #2E7BD1 100%);
}
/* büyük daire, sol üst */
.obi-hero::before {
  content: "";
  position: absolute;
  top: -120px; left: -120px;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  animation: obiHeroYuz1 8s ease-in-out infinite;
  pointer-events: none;
}
/* kâğıt uçak */
.obi-hero::after {
  content: "";
  position: absolute;
  right: 5%; top: 50%;
  width: 420px; height: 420px;
  transform: translateY(-50%);
  opacity: 0.10;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='5,50 90,15 75,50 90,85' fill='white'/%3E%3Cpolygon points='75,50 90,85 60,62' fill='white' opacity='0.6'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: obiHeroYuz2 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes obiHeroYuz1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 20px) scale(1.05); }
}
@keyframes obiHeroYuz2 {
  0%, 100% { transform: translateY(-50%) translate(0, 0); }
  50% { transform: translateY(-50%) translate(-20px, 15px); }
}
@media (prefers-reduced-motion: reduce) {
  .obi-hero::before, .obi-hero::after { animation: none; }
}

.obi-hero-ic {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 40px;
}
.obi-hero h1 {
  font-family: 'Lexend', sans-serif;
  color: #fff;
  font-size: clamp(2.05rem, 4.4vw, 3.375rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
/* Başlıktaki vurgu (ana sayfa: "finans asistanı."). Renk değil alt çizgi
   taşır: #2E7BD1 degradenin sağ ucunda zeminle aynı renge geliyordu. */
.obi-hero h1 .obi-hero-vurgu {
  display: inline-block;
  font-weight: 400;
  line-height: 1.05;
  border-bottom: 5px solid #BFDBFE;
  padding-bottom: 6px;
}
.obi-hero h1 + p {
  font-family: 'Lexend', sans-serif;
  color: rgba(255,255,255,0.88);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 36px;
}
.obi-hero-ic > :last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .obi-hero { padding-top: 30px; }
}