/* css/ritim.css — #ritim bölümü (P2): sahne monitörü, "RİTİM" harfleri, metin.
   .monitor çerçevesi, canvas yerleşimi ve HUD tipografisi temel.css'te (P1b);
   Ritmi Tanı kartının iç görünümü ritmi-tani.css'te (P4b). Burada yalnız bu bölüme özgü olanlar var. */

.bolum--ritim { padding-block: 0 var(--bolum-dikey); }

/* ---------- Pin'lenen blok ---------- */
.ritim__sabit {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--ust-yukseklik) + clamp(12px, 3vh, 32px)) clamp(20px, 4vh, 48px);
}
.ritim__sabit > .kapsayici:first-child .bolum-etiket { margin-bottom: 0; }

/* ---------- Sahne: monitör + harfler ---------- */
.ritim__sahne {
  position: relative;
  /* Harfler monitörün üst kenarından taşar; üstteki etikete çarpmasın diye pay. */
  margin-top: clamp(20px, 7vw, 108px);
}

.monitor--sahne {
  width: 100%;
  height: 38vh; height: 38svh;
  min-height: 250px;
  border-radius: 0; border-inline: 0;
}
@media (min-width: 768px) {
  .ritim__sahne { width: min(100% - 2 * var(--kenar), var(--genislik)); margin-inline: auto; }
  .monitor--sahne {
    height: 44vh; min-height: 300px; max-height: 480px;
    border-radius: var(--r-2); border-inline: 1px solid var(--monitor-cerceve);
  }
}

/* HUD sahnede ALTTA: harfler üst yarıda durduğu için.
   Mobil: üst satırda derivasyon · kâğıt hızı · kazanç (küçük), alt satırda ritim adı ve HR.
   Masaüstü: tek satır; sol etiketler, sağda ritim adı + HR. */
.monitor--sahne .monitor__hud {
  top: auto; bottom: 10px; left: 14px; right: 14px;
  display: grid; gap: 2px 12px; align-items: baseline;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "d h k k" "ad ad ad hiz";
}
.monitor--sahne .monitor__hud > span { white-space: nowrap; }
/* Birimler küçük harf kalır (mm/sn, mm/mV, /dk); .mono'nun büyük harfi yalnız ritim adında. */
.monitor--sahne .monitor__hud { text-transform: none; }
.monitor--sahne .monitor__ritim { text-transform: uppercase; }
.monitor--sahne .monitor__hud > span:nth-child(1) { grid-area: d; }
.monitor--sahne .monitor__hud > span:nth-child(2) { grid-area: h; }
.monitor--sahne .monitor__hud > span:nth-child(3) { grid-area: k; }
.monitor--sahne .monitor__hud > span:not(.monitor__ritim):not(.monitor__hiz) { opacity: .62; font-weight: 500; }
.monitor--sahne .monitor__ritim {
  grid-area: ad; color: var(--yazi); opacity: .92; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis;
}
.monitor--sahne .monitor__hiz { grid-area: hiz; display: inline-flex; align-items: baseline; gap: 6px; justify-self: end; }
.monitor--sahne .monitor__hiz b {
  font-size: 1.5rem; line-height: 1; letter-spacing: 0; color: var(--monitor);
  min-width: 2.2ch; text-align: right;
}
.monitor--sahne .monitor__hiz .ikon {
  width: 14px; height: 14px; align-self: center; color: var(--monitor);
  transform-origin: 50% 60%;
}
@media (min-width: 768px) {
  .monitor--sahne .monitor__hud {
    bottom: 12px; left: 18px; right: 18px; gap: 0 16px;
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-areas: "d h k ad hiz";
  }
  .monitor--sahne .monitor__ritim { text-align: right; }
  .monitor--sahne .monitor__hiz b { font-size: 1.75rem; }
}
/* HUD metni değişirken 200 ms opaklık (100 çıkış + 100 giriş; JS yönetir) */
.monitor--sahne [data-ritim-ad], .monitor--sahne [data-hiz] { transition: opacity 100ms linear; }

/* Harfler: dar kesim 900, izin üstüne biner. top değerini JS taban çizgisine göre verir. */
.ritim__kelime {
  position: absolute; left: 0; right: 0; top: 12%;
  z-index: 3; margin: 0;
  font-size: min(var(--t-dev-sayi), 35vh);
  line-height: 1;
  text-align: center; white-space: nowrap;
  color: var(--yazi);
  pointer-events: none;
  mix-blend-mode: normal;
  letter-spacing: -.01em;   /* .dev-sayi'nin −.03em'i dönen harfleri birbirine değdiriyordu */
}
.ritim__harf {
  display: inline-block;
  transform-origin: 50% 100%;
  /* Izgaradan ayrışsın diye 1px statik koyu kenar (animasyonsuz). */
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.ritim__taban-isaret { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* ---------- Metin ---------- */
.ritim__metin { margin-top: clamp(20px, 3.2vh, 36px); }
.bolum--ritim .dipnot {
  margin-top: var(--b-3);
  color: var(--yazi-3);
  display: flex; align-items: center; gap: 10px;
}
.bolum--ritim .dipnot::before {
  content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%;
  border: 1px solid var(--yazi-3);
}

/* Ritmi Tanı kartı: pin bloğunun altında, nefes payıyla */
.bolum--ritim > .kapsayici { margin-top: clamp(24px, 6vw, 72px); }
.bolum--ritim .ritmi-tani { max-width: 880px; margin-inline: auto; }

/* ---------- Kısa ekranlar (yatay telefon, küçük dizüstü) ---------- */
@media (max-height: 560px) {
  .monitor--sahne { height: 46vh; min-height: 190px; }
  .ritim__metin { font-size: 1rem; }
}

/* ---------- Azalt ---------- */
html.hareket-azalt .ritim__harf { will-change: auto !important; }
html.hareket-azalt .monitor--sahne [data-ritim-ad],
html.hareket-azalt .monitor--sahne [data-hiz] { transition: none; }