/* ============================================================
   hero.css — Ana dashboard HERO bölümü
   Kuyruklu yıldız + lens flare açılış, multi-tenant marka bloğu,
   canlı tarih/saat. heroIntro.js ile birlikte çalışır.
   ============================================================ */

.hero-intro{
  position:relative;
  width:100%;
  min-height:clamp(360px, 46vh, 560px);
  overflow:hidden;
  border-radius:20px;                 /* dashboard kartı görünümü */
  background:radial-gradient(130% 120% at 85% 25%, #16365e 0%, #0a1726 40%, #060b14 78%);
  --accent-from:#7ef0c8;
  --accent-to:#4aa8ff;
  font-family:'Space Grotesk', sans-serif;
  color:#eef3f8;
}

.hero-intro canvas{position:absolute;inset:0;z-index:1;display:block}

/* arka fonda sürekli yukarı süzülen ışık kürecikleri */
.hero-intro .hi-bokeh{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-intro .hi-bokeh i{position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(178,216,255,.85),rgba(160,205,248,.28) 55%,transparent 78%);
  box-shadow:0 0 14px rgba(160,205,248,.35);
  animation:hi-float linear infinite}
@keyframes hi-float{from{transform:translateY(20px)}to{transform:translateY(-130vh)}}

/* sağ üst: CANLI + saat + tarih */
.hero-intro .hi-live{position:absolute;z-index:5;top:clamp(14px,3vh,24px);right:clamp(16px,4vw,30px);text-align:right;line-height:1}
.hero-intro .hi-live .lbl{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.22em;color:var(--accent-from);animation:hi-blink 1.4s ease-in-out infinite}
.hero-intro .hi-live .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-from);
  box-shadow:0 0 10px var(--accent-from)}
.hero-intro .hi-live .clock{margin-top:9px;font-weight:500;font-size:clamp(20px,2.4vw,28px);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hero-intro .hi-live .date{margin-top:3px;font-size:clamp(11px,1.2vw,13px);color:#8fa3b8;letter-spacing:.04em}
@keyframes hi-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* marka bloğu (ortalı) */
.hero-intro .hi-brand{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;opacity:0;transform:scale(.9)}
.hero-intro.play .hi-brand{animation:hi-brandIn 1.1s 1.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hi-brandIn{0%{opacity:0;transform:scale(.86)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}

.hero-intro .hi-badge{width:clamp(78px,9vw,96px);height:clamp(78px,9vw,96px);border-radius:22px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:20px;
  background:linear-gradient(160deg,#0e2236,#0a1626);
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent-from) 45%, transparent), 0 16px 44px rgba(20,120,200,.28)}
.hero-intro .hi-badge img{width:100%;height:100%;object-fit:contain;padding:14px}
.hero-intro .hi-badge svg{width:56px;height:56px}

/* soldan sağa akan canlı nabız (badge varsayılan sembolü) */
.hero-intro .hi-pulse{animation:hi-pulse-scroll 2.4s linear infinite;will-change:transform}
@keyframes hi-pulse-scroll{from{transform:translateX(0)}to{transform:translateX(100px)}}

/* Düz marka rengi — her tarayıcıda çalışır. NOT: background-clip:text + şeffaf
   metin, animasyonlu (.hi-brand transform/opacity) üst eleman içinde Chrome'da
   beyaz kutuya dönüşüyordu (Safari'de sorunsuz). O yüzden gradyan-kırpma yok. */
.hero-intro .hi-name{font-weight:600;letter-spacing:-.01em;line-height:1.02;max-width:92%;
  color:var(--accent-from);-webkit-text-fill-color:var(--accent-from);
  text-shadow:0 2px 26px color-mix(in srgb, var(--accent-from) 30%, transparent)}
.hero-intro .hi-greet{margin-top:16px;opacity:0}
.hero-intro.play .hi-greet{animation:hi-fadeUp .9s 2.5s ease forwards}
.hero-intro .hi-greet .hi-hi{font-weight:300;font-size:clamp(15px,1.9vw,21px);color:#dfe9f5}
.hero-intro .hi-greet .hi-hi b{font-weight:600}
.hero-intro .hi-greet .hi-tag{margin-top:8px;color:#8fa3b8;font-size:clamp(12px,1.3vw,14px)}
@keyframes hi-fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* erişilebilirlik: hareket azaltma tercihinde animasyonsuz, son hâli göster */
@media (prefers-reduced-motion: reduce){
  .hero-intro .hi-brand{animation:none!important;opacity:1;transform:none}
  .hero-intro .hi-greet{animation:none!important;opacity:1}
  .hero-intro .hi-live .lbl{animation:none}
  .hero-intro .hi-pulse{animation:none}
  .hero-intro .hi-bokeh i{animation:none}
}