/* Herta — CANLI ÖĞELER
   ────────────────────────────────────────────────────────────
   Yalnızca üç öğe:
     A · .live        — footer künyesinin altında İstanbul saati
                        + stüdyo durumu ("BURSA 14:32 · ŞU AN AÇIK")
     B · .dock__progress — dock'un alt kenarında okuma ilerlemesi
     C · .footer__wordmark b — dev harflerin çok hafif parallaksı

   Kurallar:
     · style.css'in hiçbir kuralı EZİLMEZ. Wordmark parallaksı
       `transform` yerine bağımsız `translate` özelliğiyle çalışır:
       giriş animasyonunun transform'u olduğu gibi kalır, parallaks
       onun ÜSTÜNE ayrı bir katman olarak biner.
     · JS kapalıyken .live hiç görünmez (display:none) — düzen bozulmaz.
       Kabuk ilk boyamayı yapınca .is-on gelir.
     · .live'da giriş animasyonu YOK: kabuk betikleri </body> öncesinde
       çalıştığı için satır ilk boyamada zaten dolu gelir. Duran bir
       animasyon (arka plan sekmesi, azaltılmış hareket) satırı
       opacity:0'da bırakabilirdi.
     · prefers-reduced-motion: ilerleme çizgisi ve parallaks kapanır,
       saat satırı olduğu gibi kalır (bilgi, hareket değil).
   ──────────────────────────────────────────────────────────── */

/* ══════════ A · Footer canlı satırı ══════════ */

/* JS yoksa hiç yer kaplamasın: kabuk .is-on eklemeden görünmez */
.live { display: none; }

.live.is-on {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ══════════ KÜPÜRÜN DURUM ŞERİDİ ══════════
   Canlı saat artık kimlik sütununun altında değil, dev HERTA
   küpürünün ÜSTÜNDE ve TAM ONUN GENİŞLİĞİNDE duruyor.

   Neden: kimlik sütununda telefonun dibinde sıradan bir satırdı.
   Küpürün üstünde ise ona bir künye çizgisi oluyor — solda şehir,
   sağda saat ve durum, arada ince bir tel. Küpürle aynı kenarlara
   hizalandığı için ikisi tek bir blok gibi okunuyor.

   Konum küpürün kendi kutusundan türüyor (left: 31.2%), yani
   küpür kayarsa şerit de kayar; iki ayrı değer tutulmuyor. */
.footer__bottom .live.is-on {
  position: absolute;
  left: 31.2%;
  right: 0;
  /* Küpür penceresinin üstü + KENDİ NEFESİ. Önce ince bir telle
     küpüre yapıştırılmıştı; küpürün alt başlığı gibi okunuyordu.
     Oysa bu satır başka bir şey söylüyor — yapının değil BÜRONUN
     o anki hâli. O yüzden kendi yüzeyi ve kendi boşluğu var.
     Yükseklik ifadesi style.css'teki küpür penceresiyle birebir
     aynı; biri değişince öteki sessizce kaymasın. */
  bottom: calc(clamp(76px, 11.6vw, 186px) + clamp(26px, 2.6vw, 46px));
  margin: 0;
  /* Kendi yüzeyi: sitenin kart zemininin bir tık altı
     (.gcard 0.05). Çerçeve yok — marka dili gölgesiz ve yalın. */
  padding: clamp(11px, 1vw, 16px) clamp(13px, 1.2vw, 20px);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.62);
  justify-content: flex-start;
}
/* Saat bu blokta asıl bilgi: bir tık parlak ve tabular. */
.footer__bottom .live.is-on .live__time { color: rgba(255, 255, 255, 0.92); }
/* Şehir sola yaslanır, saat ve durum sağ uca gider: şerit küpürün
   iki kenarına da dokunur. */
.footer__bottom .live.is-on .live__city { margin-right: auto; }

@media (max-width: 860px) {
  /* Dar ekranda küpür akışa giriyor (position: static), şerit de
     onunla birlikte akışa dönmeli. */
  .footer__bottom .live.is-on {
    position: static;
    margin-top: 26px;
  }
}

/* 5px'lik durum işareti — marka dili kare köşe / gölgesiz olduğu için
   yuvarlak değil kare, halka da gölgeyle değil 1px çizgiyle.
   Açık: dolu · Kapalı: içi boş. (box-sizing:border-box → dış ölçü 5px) */
.live__dot {
  flex: none;
  width: 5px;
  height: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.live.is-open .live__dot {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.75);
}

.live__state::before {
  content: "\00B7";
  margin-right: 0.6em;
  color: rgba(255, 255, 255, 0.28);
}

/* Açık zeminli kapanış bölümü (hakkinda.html) için mürekkep sürümü */
.live--ink.is-on { color: rgba(0, 0, 0, 0.55); }
.live--ink .live__dot { border-color: rgba(0, 0, 0, 0.35); }
.live--ink.is-open .live__dot { background: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7); }
.live--ink .live__state::before { color: rgba(0, 0, 0, 0.25); }

/* bağlam hizaları — iç markup 8 sayfada birebir aynı kalsın diye
   yaslama sayfanın kendi kabından geliyor */
.ab-close__aside .live.is-on { justify-content: flex-end; margin-top: 10px; }
.nf-foot .live.is-on { justify-content: center; margin-top: 10px; }
.legal-footer .live.is-on { margin-top: 0; }

/* ══════════ B · Dock okuma ilerlemesi ══════════ */

.dock__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.dock__progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s linear;
  will-change: transform;
}

/* ══════════ C · Footer wordmark parallaksı ══════════
   `translate` bağımsız özelliği `transform`dan ÖNCE uygulanır ve
   onu ezmez: style.css'teki translateY(18%) scaleY(1.3) girişi ve
   .is-inview geçişi olduğu gibi çalışmayı sürdürür. */
.footer__wordmark b {
  translate: 0 calc(var(--wm-p, 0) * var(--wm-k, 0) * -14px);
}
.footer__wordmark b:nth-child(1) { --wm-k: 0; }
.footer__wordmark b:nth-child(2) { --wm-k: 0.25; }
.footer__wordmark b:nth-child(3) { --wm-k: 0.5; }
.footer__wordmark b:nth-child(4) { --wm-k: 0.75; }
.footer__wordmark b:nth-child(5) { --wm-k: 1; }

/* ══════════ Hareket azaltma ══════════ */
@media (prefers-reduced-motion: reduce) {
  .dock__progress { display: none; }
  .dock__progress i { transition: none; }
  .footer__wordmark b { translate: none; }
}