/* Geopus — hareket katmanı.
   Kural (zevk profili): sayfa DURURKEN de yaşayan grafik. Kaydırmaya bağlı
   giriş IntersectionObserver ile — ScrollTrigger.batch cristal.tr'de sayfa
   yüksekliği değişince tetiklenmemiş, bölümler opacity 0'da takılı kalmıştı. */

/* ---------- kaydırmayla giriş ---------- */
/* ÖNEMLİ: .gir varsayılan GÖRÜNÜR. Gizleme yalnızca JS çalışıyorsa (html.js)
   uygulanır. Aksi hâlde JS kapalı tarayıcıda ve içerik okuyan botlarda sayfa
   bomboş görünür — bir GEO ürünü için bu ölümcül olurdu (cristal.tr dersi). */
.gir { transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
html.js .gir { opacity: 0; transform: translateY(22px); }
html.js .gir.acik { opacity: 1; transform: none; }
.gir.g1 { transition-delay: .06s } .gir.g2 { transition-delay: .12s }
.gir.g3 { transition-delay: .18s } .gir.g4 { transition-delay: .24s }

/* ---------- hero: nefes alan zemin (sayfa dururken çalışır) ---------- */
.hero::after {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 46% at 20% 26%, rgba(255,10,0,.13), transparent 66%),
    radial-gradient(34% 42% at 80% 18%, rgba(6,12,27,.11), transparent 64%);
  animation: nefes 13s ease-in-out infinite alternate;
}
.hero > .kap { position: relative; z-index: 1; }
@keyframes nefes {
  0%   { transform: translate3d(0,0,0) scale(1);      opacity: .85 }
  50%  { transform: translate3d(2.5%, -1.5%, 0) scale(1.06); opacity: 1 }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.03);  opacity: .9 }
}

/* koyu bölümdeki kırmızı patlama da nabız atıyor */
.koyu-bolum::before { animation: nabiz 9s ease-in-out infinite alternate; }
@keyframes nabiz {
  from { opacity: .72; transform: translate3d(0,0,0) scale(1) }
  to   { opacity: 1;   transform: translate3d(3%, 2%, 0) scale(1.1) }
}

/* ---------- canlı ölçüm paneli ---------- */
.canli {
  margin-top: 46px; border: 1px solid var(--cizgi); border-radius: 20px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(10px);
  padding: 18px; text-align: left; overflow: hidden;
}
.canli-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 6px 14px; border-bottom: 1px solid var(--cizgi);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soluk);
}
.canli-ust .nokta {
  width: 7px; height: 7px; border-radius: 50%; background: var(--kirmizi);
  display: inline-block; margin-right: 8px; animation: yanip 1.8s ease-in-out infinite;
}
@keyframes yanip { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,10,0,.45) } 50% { opacity: .45; box-shadow: 0 0 0 7px rgba(255,10,0,0) } }

.satir {
  display: grid; grid-template-columns: 108px 1fr 62px; gap: 14px;
  align-items: center; padding: 13px 6px; border-bottom: 1px dashed var(--cizgi);
}
.satir:last-child { border-bottom: 0; }
.satir .mad { font-family: var(--baslik); font-weight: 700; font-size: 15px; }
.satir .durum { font-size: 14px; color: var(--soluk); min-height: 21px; }
.satir .sira {
  font-family: var(--baslik); font-weight: 800; font-size: 21px; text-align: right;
  letter-spacing: -.03em; transition: color .3s ease;
}
.satir .sira.yok { color: var(--kirmizi); font-size: 15px; }
.satir[data-durum="olculuyor"] .durum { color: var(--murekkep); }
.satir[data-durum="olculuyor"] .mad::after {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kirmizi); margin-left: 8px; vertical-align: middle;
  animation: yanip 1s ease-in-out infinite;
}
/* yazıyor efekti — imleç */
.imlec::after { content: "▌"; color: var(--kirmizi); animation: imlecYanip .8s steps(2) infinite; }
@keyframes imlecYanip { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* sıra değişince kısa vurgu */
.parla { animation: parlama .8s ease-out; }
@keyframes parlama {
  0% { color: var(--kirmizi); transform: scale(1.22) }
  100% { color: inherit; transform: scale(1) }
}

/* ---------- kart etkileşimleri ---------- */
.motor { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease; }
.motor:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(6,12,27,.09); border-color: #D6D1C8; }
.kutu { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.bento .kutu:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(6,12,27,.07); }
.ickart { transition: transform .2s ease, border-color .2s ease; }
.ickart:hover { transform: translateX(4px); border-color: var(--kirmizi); }
.kanit { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.kanit:hover { transform: translateY(-3px); }

/* sekme geçişi */
.sekme-panel { animation: panelGir .45s cubic-bezier(.16,1,.3,1); }
@keyframes panelGir { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ---------- footer dev wordmark: yavaş kayma ---------- */
.dev-marka { animation: kaydir 26s ease-in-out infinite alternate; }
@keyframes kaydir { from { transform: translateX(-1.6%) } to { transform: translateX(1.6%) } }

/* ---------- hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gir { opacity: 1; transform: none; }
}

/* ölçüm dalgası yavaşça soldan sağa kayar — sayfa dururken de yaşar */
.hero-dalga path { stroke-dasharray: 8 6; animation: dalgaAk 22s linear infinite; }
@keyframes dalgaAk { to { stroke-dashoffset: -280 } }
@media (prefers-reduced-motion: reduce) { .hero-dalga path { animation: none } }