/* Ritmi Tanı oyunu + skor kartı paneli (P4b). Spec §4.3, §6.4, §6.5.
   Temel bileşenler (.kart, .monitor, .secenek, .dugme, .dev-sayi, .magaza-grup) temel.css'te;
   burada yalnız oyunun kendi düzeni ve durumları var. Yalnız transform/opacity animasyonu. */

/* ─────────────────────────── kart ─────────────────────────── */
.ritmi-tani {
  --rt-ic: clamp(20px, 4vw, 32px);           /* .kart dolgusu; monitör mobilde kenara taşar */
  scroll-margin-top: calc(var(--ust-yukseklik) + 12px);
}
.ritmi-tani > * + * { margin-top: var(--b-3); }
.ritmi-tani > [data-rt-basla] { margin-top: var(--b-5); }
.ritmi-tani--oyunda > [data-rt-sahne] { margin-top: var(--b-4); }
.ritmi-tani [hidden] { display: none !important; }

/* Her yeni ekran (şerit ya da sonuç) yumuşak girer. */
[data-rt-sahne] > * { animation: rtGir var(--s-uzun) var(--e-cikis) both; }
[data-rt-sahne] > *:nth-child(2) { animation-delay: 40ms; }
[data-rt-sahne] > *:nth-child(n+3) { animation-delay: 80ms; }
@keyframes rtGir { from { opacity: 0; transform: translateY(10px); } }

/* ─────────────────────────── üst satır ─────────────────────────── */
.rt-ust {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-4);
  margin-bottom: var(--b-3);
}
.rt-sayac {
  margin: 0; color: var(--yazi-3);
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .14em; font-variant-numeric: tabular-nums;
}
.rt-sayac b { color: var(--yazi); font-weight: 700; }

.rt-ust .rt-ilerleme { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.rt-ilerleme__adim {
  position: relative; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid var(--cizgi); background: rgba(255,255,255,.02);
  color: var(--yazi-3);
  transition: border-color var(--s-kisa) var(--e-standart), background-color var(--s-kisa) var(--e-standart);
}
.rt-ilerleme__adim .ikon { width: 12px; height: 12px; }
.rt-ilerleme__adim--simdi { border-color: rgba(255,255,255,.42); }
.rt-ilerleme__adim--simdi::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yazi);
}
.rt-ilerleme__adim--dogru { border-color: rgba(0,230,118,.55); background: rgba(0,230,118,.10); color: var(--monitor); }
.rt-ilerleme__adim--yanlis { border-color: rgba(255,107,107,.55); background: rgba(255,107,107,.08); color: var(--yanlis); }

/* ─────────────────────────── monitör ─────────────────────────── */
.monitor--oyun { height: 200px; }
@media (max-width: 767.98px) {
  /* Mobilde şerit kart kenarından kenarına: kareler büyür, sayması kolaylaşır. */
  .ritmi-tani .monitor--oyun {
    margin-inline: calc(-1 * var(--rt-ic));
    border-radius: 0; border-inline: 0;
  }
}
@media (min-width: 1024px) { .monitor--oyun { height: 260px; } }

.monitor--oyun .monitor__hud {
  text-transform: none;   /* birimler küçük harf: mm/sn, mm/mV */
  gap: 2px 8px; font-size: var(--t-mono-hud); font-weight: 700;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.monitor--oyun .rt-ayrac { opacity: .45; }
.rt-hr { margin-left: auto; white-space: nowrap; }
.rt-hr__deger {
  display: inline-block; min-width: 1ch; font-weight: 700; color: var(--monitor);
}
.rt-hr--acik .rt-hr__deger {
  color: #CFFFE4;
  animation: rtHr var(--s-orta) var(--e-cikis) both;
}
@keyframes rtHr { from { opacity: 0; transform: translateY(6px); } }
.monitor--hata { display: grid; place-items: center; }
.monitor--hata::before {
  content: "Şerit çizilemedi"; position: relative; z-index: 2;
  font: 500 var(--t-mono)/1.4 var(--font-mono); letter-spacing: .14em; color: var(--yazi-3);
}

.rt-dipnot {
  margin: var(--b-2) 0 0; color: var(--yazi-3);
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .1em;
}

/* ─────────────────────────── soru ve şıklar ─────────────────────────── */
.rt-soru {
  margin: var(--b-5) 0 var(--b-3);
  font: 700 clamp(1.125rem, 3.4vw, 1.375rem)/1.25 var(--font-govde); font-stretch: 100%;
  letter-spacing: -.01em; color: var(--yazi);
}
.rt-secenekler .secenekler { display: grid; gap: 10px; }
@media (min-width: 1024px) {
  .rt-secenekler .secenekler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt-secenekler .secenek { height: 100%; }
}

/* ─────────────────────────── geri bildirim ───────────────────────────
   Yükseklik yerine 0fr → 1fr (§2.6 akordeon kuralı). */
.rt-geri {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--s-orta) var(--e-cikis), opacity var(--s-orta) var(--e-standart);
}
.rt-geri--acik { grid-template-rows: 1fr; opacity: 1; }
.rt-geri__ic { min-height: 0; overflow: hidden; }
.rt-geri__ic > :first-child { margin-top: var(--b-5); }

.rt-geri__baslik {
  display: flex; align-items: flex-start; gap: 12px; margin: 0;
  font-size: 1.0625rem; line-height: 1.45; color: var(--yazi);
}
.rt-geri__baslik strong { font-weight: 700; }
.rt-geri__ad { color: var(--yazi); }
.rt-geri--dogru .rt-geri__baslik > span:last-child > span.rt-geri__ad { color: var(--yazi-2); }
.rt-geri__simge {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; margin-top: -2px; border-radius: 50%;
}
.rt-geri__simge .ikon { width: 16px; height: 16px; }
.rt-geri--dogru .rt-geri__simge { color: var(--monitor); background: rgba(0,230,118,.12); box-shadow: inset 0 0 0 1px rgba(0,230,118,.45); }
.rt-geri--yanlis .rt-geri__simge { color: var(--yanlis); background: rgba(255,107,107,.10); box-shadow: inset 0 0 0 1px rgba(255,107,107,.45); }

.rt-geri .rt-geri__liste {
  list-style: none; margin: var(--b-3) 0 0; padding: 0 0 0 40px;
  display: grid; gap: 6px;
  color: var(--yazi-2); font-size: .9688rem; line-height: 1.55;
  max-width: var(--olcu);
}
.rt-geri__liste li { position: relative; }
.rt-geri__liste li::before {
  content: ""; position: absolute; left: -16px; top: .78em;
  width: 7px; height: 1px; background: var(--yazi-3);
}
.rt-nabizsiz {
  display: flex; width: max-content; max-width: calc(100% - 40px); align-items: center; gap: 8px;
  margin: var(--b-3) 0 0 40px; padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-hap);
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: .06em; text-transform: none; color: var(--yazi);  /* "SpO₂" küçük p ile kalmalı */
}
.rt-sonraki { display: flex; width: max-content; margin-top: var(--b-5); }
@media (max-width: 767.98px) { .rt-sonraki { width: min(100%, 360px); } }
.rt-sonraki .ikon { width: 18px; height: 18px; transition: transform var(--s-kisa) var(--e-standart); }
@media (hover: hover) { .rt-sonraki:hover .ikon { transform: translateX(3px); } }
@media (min-width: 768px) { .rt-sonraki { margin-left: 40px; } }

/* ─────────────────────────── sonuç ─────────────────────────── */
.rt-sonuc { display: grid; gap: var(--b-5); }
.rt-sonuc__bas { display: grid; justify-items: start; gap: var(--b-2); }
.rt-sonuc__etiket {
  margin: 0; color: var(--yazi-3);
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .14em;
}
.rt-sonuc__skor { margin: 0; color: var(--yazi); font-variant-numeric: tabular-nums; outline: none; }
.rt-sonuc__toplam { color: var(--yazi-3); }
.rt-sonuc__rekor {
  margin: var(--b-2) 0 0; padding: 6px 12px; border-radius: var(--r-hap);
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 700; letter-spacing: .14em;
  color: var(--yazi-2); border: 1px solid var(--cizgi);
}
.rt-sonuc__rekor--yeni { color: var(--yazi); border-color: rgba(255,23,68,.45); background: rgba(255,23,68,.08); }

.rt-sonuc .rt-ozet { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi-yumusak); }
.rt-ozet__satir {
  display: grid; grid-template-columns: 2ch 26px 1fr; align-items: start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--cizgi-yumusak);
}
.rt-ozet__no {
  padding-top: 3px; color: var(--yazi-3);
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .06em;
}
.rt-ozet__simge {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
}
.rt-ozet__simge .ikon { width: 14px; height: 14px; }
.rt-ozet__satir--dogru .rt-ozet__simge { color: var(--monitor); background: rgba(0,230,118,.10); box-shadow: inset 0 0 0 1px rgba(0,230,118,.4); }
.rt-ozet__satir--yanlis .rt-ozet__simge { color: var(--yanlis); background: rgba(255,107,107,.08); box-shadow: inset 0 0 0 1px rgba(255,107,107,.4); }
.rt-ozet__metin { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.rt-ozet__ad { font-weight: 600; color: var(--yazi); line-height: 1.35; }
.rt-ozet__senin { font-size: .875rem; color: var(--yazi-2); line-height: 1.4; }

.rt-sonuc__metin { margin: 0; font-size: var(--t-giris); line-height: 1.5; color: var(--yazi); max-width: var(--olcu); }
.rt-sonuc__ai {
  margin: 0; padding-left: 14px; border-left: 2px solid var(--cizgi);
  font-size: .875rem; line-height: 1.55; color: var(--yazi-2); max-width: var(--olcu);
}
.rt-sonuc__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.rt-paylas[aria-busy="true"] { opacity: .7; }
.rt-sonuc__cta { padding-top: var(--b-5); border-top: 1px solid var(--cizgi-yumusak); }

@media (min-width: 1024px) {
  .rt-sonuc {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--b-8); row-gap: var(--b-5);
    align-items: start;
  }
  .rt-sonuc__bas { grid-row: 1 / span 5; position: sticky; top: calc(var(--ust-yukseklik) + 24px); }
  .rt-sonuc__skor { font-size: clamp(9rem, 16vw, 15rem); }
  .rt-sonuc > :not(.rt-sonuc__bas) { grid-column: 2; }
}

/* ─────────────────────────── azalt modu ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-rt-sahne] > *, .rt-hr--acik .rt-hr__deger { animation: none; }
  .rt-geri { transition: opacity 150ms linear; }
}
html.hareket-azalt [data-rt-sahne] > *,
html.hareket-azalt .rt-hr--acik .rt-hr__deger { animation: none; }
html.hareket-azalt .rt-geri { transition: opacity 150ms linear; }

/* ───────────────── skor kartı paneli (skor-karti.js, iki oyun da kullanır) ─────────────────
   share() yoksa ya da webview'daysa: görsel tam ekran + "basılı tut → Kaydet". */
html.skor-panel-acik { overflow: hidden; }
.skor-panel {
  position: fixed; inset: 0; z-index: calc(var(--z-imlec) - 5);
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.skor-panel__perde {
  position: absolute; inset: 0; background: rgba(3,4,6,.94);
  opacity: 0; transition: opacity var(--s-orta) var(--e-standart);
}
.skor-panel--acik .skor-panel__perde { opacity: 1; }
.skor-panel__kutu {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(100%, 420px); max-height: 100%;
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity var(--s-orta) var(--e-standart), transform var(--s-uzun) var(--e-cikis);
}
.skor-panel--acik .skor-panel__kutu { opacity: 1; transform: none; }
.skor-panel__ust { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.skor-panel__baslik {
  margin: 0; color: var(--yazi-2);
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .14em;
}
.skor-panel__kapat {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18); color: var(--yazi);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--s-bas) var(--e-standart), background-color var(--s-kisa) var(--e-standart);
}
.skor-panel__kapat .ikon { width: 18px; height: 18px; }
.skor-panel__kapat:active { transform: scale(.94); }
@media (hover: hover) { .skor-panel__kapat:hover { background: rgba(255,255,255,.09); } }
.skor-panel__gorsel { margin: 0; min-height: 0; display: flex; justify-content: center; }
.skor-panel__gorsel img {
  display: block; height: min(64svh, 720px); width: auto; max-width: 100%;
  aspect-ratio: 9 / 16; object-fit: contain; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -30px rgba(0,0,0,.95);
  -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; pointer-events: auto;
}
.skor-panel__not {
  margin: 0; text-align: center; font-size: .9375rem; line-height: 1.45; color: var(--yazi);
}
.skor-panel__not span { display: block; margin-top: 2px; font-size: .8125rem; color: var(--yazi-2); }
@media (prefers-reduced-motion: reduce) {
  .skor-panel__kutu { transform: none; transition: opacity 150ms linear; }
}
html.hareket-azalt .skor-panel__kutu { transform: none; transition: opacity 150ms linear; }