/* ═══════════════════════════════════════════════════════════════════════
   KYRON — ortak görünüm katmanı.

   kyron.js ile eşleşir: JS mimiği ve durumu yönetir, buradaki sınıflar
   o kararların görünen yüzüdür. Ana sayfa ve kronometre AYNI dosyayı
   kullanır — Kyron her ekranda aynı görünsün diye tek kaynak.

   Sınıf haritası:
     .kyron-merkez    gözlerin yaşadığı kap (kadran merkezi)
     .kyron-kure      ritüelde belirip kaybolan altın gövde
     .kyron-iz        duraklat düğmesindeki göz-izi (⏸ yerine)
     .kyron-nefes     kadran ışığının nefes alması (yalnız çalışırken)
     .kyron-parla     ritüel parlaması · .kyron-yesil masa faz haberi
     .kyron-sakin     çalışma anında yüz ışığının durulması
   ═══════════════════════════════════════════════════════════════════════ */

/* ——— merkez: gözlerin taşıyıcısı ——— */
.kyron-merkez {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: transform .8s cubic-bezier(.3, 1.2, .4, 1), opacity .5s ease,
              margin-bottom .8s cubic-bezier(.3, 1.2, .4, 1);
}

/* ritüelde bedenlenen altın gövde — normalde görünmez */
.kyron-merkez .kyron-kure {
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .6s ease;
  background: radial-gradient(circle at 50% 32%, #FBE7A8 0%, #F5D67B 48%, #C9A94F 100%);
  box-shadow: 0 0 30px rgba(245, 214, 123, .65);
}
.kyron-merkez.kyron-bedenli .kyron-kure { opacity: 1; }
/* gövde belirince gözler zemine göre tersine döner (altın üstünde lacivert) */
.kyron-merkez.kyron-bedenli .kyron-g { fill: #0B1220; }
.kyron-merkez.kyron-bedenli .kyron-hilal { stroke: #0B1220; }

/* ——— gözler ——— */
.kyron-gozler {
  display: block;
  filter: drop-shadow(0 0 6px rgba(245, 214, 123, .5));
}
.kyron-g {
  fill: #F5D67B;
  transition: all .3s ease;
  transform-origin: center;
  transform-box: fill-box;
}
.kyron-hilal {
  fill: none;
  stroke: #F5D67B;
  stroke-width: 4.6;
  stroke-linecap: round;
  display: none;
  transform-origin: center;
  transform-box: fill-box;
}

/* kırpma — hızlı (selam) ve yavaş (takdir: "gördüm, helal") */
.kyron-kirpiyor .kyron-g,
.kyron-kirpiyor .kyron-hilal { animation: kyron-kirpma .16s ease; }
.kyron-kirp-yavas .kyron-g,
.kyron-kirp-yavas .kyron-hilal { animation: kyron-kirpma .55s ease; }
@keyframes kyron-kirpma { 50% { transform: scaleY(.08); } }

/* ——— düğmedeki iz: ⏸ glifinin yerine geçer ——— */
.kyron-iz .kyron-gozler { filter: none; }
.kyron-iz .kyron-g { fill: #F5D67B; }
.kyron-iz .kyron-hilal { stroke: #F5D67B; }

/* ——— kadran ışığı: Kyron'un nefesi ——— */
.kyron-nefes .kyron-hale { animation: kyron-nefes 4.5s ease-in-out infinite; }
@keyframes kyron-nefes { 0%, 100% { opacity: .22; } 50% { opacity: .7; } }
.kyron-parla .kyron-hale { animation: kyron-flare 1.6s ease; }
@keyframes kyron-flare { 0% { opacity: .25; } 30% { opacity: 1; } 100% { opacity: .25; } }
/* masa faz haberi: halka bir kez yeşile kırpar — arkadaşların molaya çıktı */
.kyron-yesil .kyron-hale { stroke: rgba(123, 216, 160, .6); }
.kyron-hale { transition: stroke .6s ease, opacity .8s ease; }

/* ——— yüz ışığı: kadranın Kyron'a ait olduğunu söyleyen sıcaklık ——— */
.kyron-yuz-isik {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  transition: opacity .8s ease;
  background: radial-gradient(circle at 50% 40%,
      rgba(245, 214, 123, .16), rgba(245, 214, 123, .05) 55%, transparent 75%);
}
/* çalışırken durulur — süre kahraman olsun diye */
.kyron-sakin .kyron-yuz-isik { opacity: .38; }

/* ——— yıldız tozu: yalnız ritüellerde ——— */
.kyron-toz {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #F5D67B;
  box-shadow: 0 0 6px rgba(245, 214, 123, .9);
  pointer-events: none;
  z-index: 6;
  animation: kyron-sac 1.5s ease forwards;
}
@keyframes kyron-sac {
  to { transform: translate(var(--kx), var(--ky)) scale(.2); opacity: 0; }
}

/* ═══ İMZA — adı söyleyen tek kelime ═══════════════════════════════════
   Açıklama cümlesinin yerini alır: açılışta bir kez öne çıkar (selam),
   sonra arada bir nefes gibi belirip söner. Kadranın akışını bozmasın diye
   yer kaplamaz — mutlak konumda, gözlerin hemen altında durur. */
.kyron-imza-ad {
  /* AKIŞTA durur (absolute DEĞİL) ve kadran içeriğinin en altına eklenir.
     Mutlak konum denendi ve bırakıldı: kadran kabının yüzdesine yaslanınca
     kap sıfır ölçüldüğü durumlarda imza saatin üstüne biniyordu. Akışta
     kalınca flex sırası çakışmayı imkânsız kılar; imza görünmezken de yerini
     koruduğu için düzen titremez. */
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  color: #F5D67B;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease, font-size .5s ease, letter-spacing .5s ease;
}
.kyron-imza-ad.gorun { opacity: .85; }
/* Açılış selamı: saat susarken imza büyür ve sahneyi bir an devralır. */
.kyron-imza-ad.selam {
  font-size: 14px;
  letter-spacing: 8px;
  transition: opacity .7s ease, font-size .7s ease, letter-spacing .7s ease;
}
/* Selam sırasında saat ve yardımcı satır susar — önce Kyron, sonra saat. */
.kyron-sus { opacity: 0 !important; transition: opacity .5s ease; }

/* ——— hareket azaltma tercihi: Kyron susar, ama görünür kalır ——— */
@media (prefers-reduced-motion: reduce) {
  .kyron-imza-ad { transition: none; }
  .kyron-merkez,
  .kyron-merkez .kyron-kure,
  .kyron-g,
  .kyron-hale { transition: none; }
  .kyron-nefes .kyron-hale,
  .kyron-parla .kyron-hale,
  .kyron-kirpiyor .kyron-g,
  .kyron-kirpiyor .kyron-hilal,
  .kyron-kirp-yavas .kyron-g,
  .kyron-kirp-yavas .kyron-hilal,
  .kyron-toz { animation: none; }
}