/* Tema geçişi ve View Transitions */

/* ---------- tema geçişi ---------- */
/* Yalnızca geçiş anında açılır; sürekli açık kalırsa her boyamada renk
   animasyonu tetiklenir ve kaydırma pahalılaşır. */
.tema-gecis body,
.tema-gecis .app-header,
.tema-gecis .tabbar,
.tema-gecis .rez-kart,
.tema-gecis .grup,
.tema-gecis .modal,
.tema-gecis .alt-serit,
.tema-gecis .btn,
.tema-gecis .icon-btn {
  transition: background-color 380ms var(--ease),
              border-color 380ms var(--ease),
              color 380ms var(--ease) !important;
}

/* ---------- View Transitions ---------- */
/* Destekleyen tarayıcıda sekme/detay geçişi tarayıcı tarafından boyanır.
   Desteklemeyende bu blok tamamen yok sayılır ve mevcut CSS animasyonları
   devrede kalır — davranış aynı, yalnızca cila farkı. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 260ms;
    animation-timing-function: var(--ease);
  }
  :root[data-vt-yon="sag"]::view-transition-new(root) {
    animation-name: vtSagdanGir;
  }
  :root[data-vt-yon="sag"]::view-transition-old(root) {
    animation-name: vtSolaCik;
  }
  :root[data-vt-yon="sol"]::view-transition-new(root) {
    animation-name: vtSoldanGir;
  }
  :root[data-vt-yon="sol"]::view-transition-old(root) {
    animation-name: vtSagaCik;
  }
}
@keyframes vtSagdanGir { from { opacity: 0; transform: translateX(26px); } }
@keyframes vtSoldanGir { from { opacity: 0; transform: translateX(-26px); } }
@keyframes vtSolaCik   { to   { opacity: 0; transform: translateX(-26px); } }
@keyframes vtSagaCik   { to   { opacity: 0; transform: translateX(26px); } }

@media (prefers-reduced-motion: reduce) {
  .alt-serit, .empty-cizim { animation: none !important; }
  .tema-gecis body, .tema-gecis .app-header, .tema-gecis .tabbar,
  .tema-gecis .rez-kart, .tema-gecis .grup, .tema-gecis .modal,
  .tema-gecis .alt-serit, .tema-gecis .btn, .tema-gecis .icon-btn {
    transition: none !important;
  }
}