/* =========================================================================
   ORTAK: Modallar (giriş, kredi satın alma, sözleşme, kırpma vb.)
   Modallar .hidden kaldırılarak açılır; display değiştiği anda animasyon
   kendiliğinden yeniden oynar, JS gerekmez.
   ========================================================================= */

[id$="Modal"].fixed:not(.hidden) {
  animation: modalBackdropIn var(--dur-base) ease both;
}

[id$="Modal"].fixed:not(.hidden) > div {
  animation: modalPanelIn 0.34s var(--ease-out) backwards;
  box-shadow: var(--shadow-lg);
}

/* Telefonda modal panelleri ekranı aşmasın, kendi içinde kaydırılsın */
@media (max-width: 639.98px) {
  [id$="Modal"].fixed > div {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@keyframes modalBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}