/* =========================================
   SESMATE — HERO (light / elite)
   Bu dosya yalnızca hero section stillerini içerir.
   ========================================= */

/* ---- Tokens (fallback'lı) ---- */
:root{
    --line: rgba(18,22,32,.08);
    --accent: #7c3aed;
    --accent-2: #5b21b6;
    --text: #0c1020;
    --muted: #647089;
    --surface: #f8f9fc;
    --shadow-1: 0 6px 18px rgba(12,16,32,.06);
    --shadow-2: 0 16px 48px rgba(12,16,32,.08);
    --r-lg: 18px;
    --r-xl: 24px;
  }
  
  /* ---- Hero spacing (üst padding azaltıldı) ---- */
  .hero-lite{
    position: relative;
    background:
      radial-gradient(900px 460px at 6% -10%, rgba(124,58,237,.12), transparent 60%),
      radial-gradient(800px 460px at 96% 0%, rgba(124,58,237,.08), transparent 60%),
      var(--surface);
    border-bottom: 1px solid var(--line);
    padding: clamp(36px, 5.5vw, 64px) 0 clamp(28px, 4.5vw, 56px); /* daha yakın */
  }
  
  .container-narrow.hero-wrap{ position: relative; }
  
  /* ---- Eyebrow / Headings ---- */
  .eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.42rem .8rem; border-radius:999px;
    background: rgba(124,58,237,.12);
    border:1px solid rgba(124,58,237,.32);
    color:#3b2a77; font-weight:800; letter-spacing:.3px; font-size:.8rem;
  }
  
  .h1-elite{
    font-size: clamp(36px, 5.6vw, 64px);
    line-height: 1.05; letter-spacing:-.4px; font-weight:900;
    margin: 10px 0 10px;
  }
  
  .lead-elite{
    font-size: clamp(16px, 2.1vw, 20px);
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 14px;
  }
  
  /* ---- Powered by list (tick + logo placeholders) ---- */
  .powered-by{
    margin: 14px 0 18px;
    display: grid; gap: 8px;
    padding-left: 0; list-style: none;
  }
  .powered-by li{
    position: relative;
    padding-left: 1.55rem;
    color: #2c3550; font-weight: 800;
  }
  .powered-by li::before{
    content: "✔";
    position: absolute; left: 0; top: 1px;
    color: var(--accent);
    font-weight: 900;
  }
  .pb-logo{
    width:22px; height:22px; border-radius:6px; flex:0 0 22px;
    background:#f1f3f8; border:1px solid var(--line);
    display:inline-block; vertical-align:middle; margin-right:.4rem;
    background-size: contain; background-position: center; background-repeat: no-repeat;
  }
  .pb-whisper{ background-image: none; }
  .pb-deepl{ background-image: none; }
  .pb-gcloud{ background-image: none; }
  /* Not: Gerçek SVG/PNG logoların varsa yukarıdaki background-image'ları set et. */
  
  /* ---- CTA group ---- */
  .hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top: 8px; }
  
  /* ---- Visual: “SesMate TV” çerçevesi + YouTube ---- */
  .hero-visual{ display:flex; flex-direction:column; align-items:center; gap:12px; z-index:1; }
  .frame-tv{
    width:min(560px, 100%);
    background:#fff; border:1px solid var(--line);
    border-radius:20px; box-shadow: var(--shadow-2);
    overflow:hidden; position:relative;
  }
  .tv-top{
    height:34px; background: linear-gradient(180deg,#f6f7fb,#eff1f7);
    border-bottom:1px solid var(--line);
    position: relative;
  }
  .tv-top > span{
    position:absolute; top:10px; left:12px;
    width:10px; height:10px; border-radius:999px; background:#ff5f56;
    box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f;
  }
  .tv-screen{
    display:block; width:100%; aspect-ratio:16/9; border:0;
  }
  .tv-caption{
    padding:10px 14px; border-top:1px solid var(--line);
    font-size:.92rem; color: var(--muted);
  }
  
  /* ---- Mascot: hero kutusu içinde sağ-alt, daha büyük ---- */
  .mascot-hero{
    position: absolute;
    right: clamp(8px, 2vw, 18px);
    bottom: clamp(0px, 1.2vw, 8px);
    width: clamp(140px, 22vw, 200px);
    height: auto; opacity: .98;
    filter: saturate(1.05) contrast(1.05);
    z-index: 0; /* TV'nin altında gölge etkisi bozulmasın */
  }
  
  /* ---- Responsive ayarlar ---- */
  @media (max-width: 991.98px){
    .hero-lite{ padding: 32px 0 28px; }
    .mascot-hero{
      position: static; width: clamp(110px, 28vw, 160px);
      margin: 8px auto 0; display:block;
    }
    .hero-visual{ align-items: flex-start; }
  }
  @media (max-width: 575.98px){
    .tv-caption{ font-size:.88rem; }
    .powered-by{ gap:6px; }
  }


  /* ===========================
   HERO — mascot safe area fix
   =========================== */

/* 1) Hero kapsayıcı zaten relative olmalı (bende vardı),
   yoksa aç: */
.container-narrow.hero-wrap{ position: relative; }

/* 2) Maskot: kutu içinde sağ-alt, padding'siz */
.mascot-hero{
  position: absolute;
  right: clamp(10px, 2vw, 22px);
  bottom: 0;                 /* padding olmadan en alta oturur */
  width: clamp(140px, 22vw, 200px);
  height: auto;
  opacity: .98;
  filter: saturate(1.05) contrast(1.05);
  pointer-events: none;      /* tıklamayı engellemez */
  z-index: 2;                /* çerçeveyle aynı seviyede */
}

/* 3) Büyük ekranlarda videoya "güvenli alan":
   hero-visual sağında maskot kadar yer bırakır.
   Böylece video çerçevesi maskotun altına giremez. */
@media (min-width: 1200px){
  .hero-visual{
    position: relative;
    padding-right: clamp(150px, 18vw, 240px); /* maskot kadar boşluk */
  }
}

/* Orta-büyük ekranlarda biraz daha küçük güvenli alan */
@media (min-width: 992px) and (max-width: 1199.98px){
  .hero-visual{
    position: relative;
    padding-right: clamp(120px, 14vw, 180px);
  }
}

/* Mobil/tablet: maskot satıra iner, güvenli alan kapalı kalsın */
@media (max-width: 991.98px){
  .mascot-hero{
    position: static;
    display: block;
    margin: 8px auto 0;
    width: clamp(110px, 28vw, 160px);
  }
  .hero-visual{ padding-right: 0; }
}