/* Tailwind via CDN supplies base; only custom rules below. */
.card-flip { perspective: 1000px; }
.card-choice {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.card-choice:hover { transform: translateY(-1px); }
.card-choice.correct {
  background: linear-gradient(135deg,#10b98122,#10b98144);
  border-color: #10b981 !important;
  color: #065f46;
}
/* Awaiting server response — kullanıcı şıkka basti, sonuç henüz dönmedi.
   Önceki kart bilgilerinin yanlış renk flash'ına sebep olmaması için amber tonu. */
.card-choice.pending {
  background: linear-gradient(135deg,#f59e0b22,#f59e0b44);
  border-color: #f59e0b !important;
  color: #78350f;
}
.card-choice.wrong {
  background: linear-gradient(135deg,#ef444422,#ef444444);
  border-color: #ef4444 !important;
  color: #7f1d1d;
}
.card-choice.disabled { pointer-events: none; opacity: 0.7; }

@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }
.pop { animation: pop .25s ease; }

/* ============================================================
 * Flip card — Study ekranında kelime ↔ çeviri 3D flip animasyonu.
 * Sadece kart üst alanı (prompt/image/sentence) flip eder; quiz şıkları,
 * feedback ve self-assessment butonları flip dışında SABIT kalır.
 *
 * Yapı:
 *   .flip-card           — perspective container
 *   .flip-card .flip-inner — 3D döndürülen yüzey
 *   .flip-card.is-flipped .flip-inner — 180° döndürülmüş hali
 *   .flip-front / .flip-back — iki yüz; backface-visibility ile gizlenir
 *
 * Layout zıplamasını önlemek için grid kullanılır: her iki yüz aynı hücreyi
 * paylaşır → tallest dictates height, ön/arka aynı yüksekliği tutar.
 * ============================================================ */
/* Flip-card pattern: opacity-based fade + hafif rotateY perspective
   "wobble" — gerçek 3D flip'in `backface-visibility` davranışı bazı tarayıcılarda
   parent overflow/stacking ile çakışıp her iki yüzü aynı anda gösteriyordu.
   Bu pattern her tarayıcıda güvenilir çalışır: iki yüz absolute overlay, sadece
   biri opacity:1 → hiç mirror taşması yok. Geçişe "flip hissi" katmak için
   hafif rotateY (-8°↔8°) ve scale uygulanır. */
.flip-card { position: relative; }
/* İki yüz aynı grid hücresini paylaşır → EN UZUN yüz yüksekliği belirler.
   (Eski absolute-overlay'de yalnız ön yüz yükseklik veriyordu; arka yüz daha
   uzunsa taşıp alttaki şıkların üstüne biniyordu — "Videoda gör" satırı dahil.) */
.flip-card .flip-inner {
  display: grid;
}
.flip-card .flip-front,
.flip-card .flip-back {
  grid-area: 1 / 1 / 2 / 2;   /* ikisi de tek hücrede üst üste */
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.4, .1, .25, 1);
}
.flip-card .flip-front {
  opacity: 1;
  transform: rotateY(0) scale(1);
}
.flip-card .flip-back {
  opacity: 0;
  transform: rotateY(8deg) scale(0.98);
  pointer-events: none;
}
.flip-card.is-flipped .flip-front {
  opacity: 0;
  transform: rotateY(-8deg) scale(0.98);
  pointer-events: none;
}
.flip-card.is-flipped .flip-back {
  opacity: 1;
  transform: rotateY(0) scale(1);
  pointer-events: auto;
}
/* Reduced motion — geçişi sıfırla, instant swap. */
@media (prefers-reduced-motion: reduce) {
  .flip-card .flip-front,
  .flip-card .flip-back { transition: none; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
 * 🎬 Teacher Command Center — Faz 3C premium motion (kompakt).
 *
 * KURALLAR:
 *  - Tek bir keyframe (tw-enter) section girişi için
 *  - Hover lift sadece interaktif kart için (.tw-card-lift)
 *  - prefers-reduced-motion full respect
 *  - 120-150ms süreler — premium "az ama doğru"
 *  - GPU offload (transform + opacity), layout-recalc yok
 * ───────────────────────────────────────────────────────────────── */

/* Section girişi — body class veya x-data triggered */
@keyframes tw-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tw-enter {
  animation: tw-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Premium hover lift — interaktif kartlar */
.tw-card-lift {
  transition: transform 150ms ease, box-shadow 150ms ease;
  will-change: transform;
}
.tw-card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
}

/* Save tick — auto-save sonrası "az önce" mikrocopy */
@keyframes tw-pop {
  0%   { opacity: 0; transform: scale(0.96); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
.tw-pop {
  animation: tw-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Loading state — aria-busy kombinasyonu */
[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
  pointer-events: none;
}

/* Button feedback */
button:disabled,
.tw-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Reduced motion — tüm animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  .tw-enter,
  .tw-pop {
    animation: none !important;
  }
  .tw-card-lift {
    transition: none !important;
  }
  .tw-card-lift:hover {
    transform: none !important;
  }
}

/* Mobile motion daha düşük — touch device idle float'ı azalt */
@media (max-width: 640px) {
  .illustration-wrapper {
    animation-duration: 8s !important;
  }
}