/* Ortak geçişler (G2; başvuru taslağı "Geçişler", kullanıcı 2026-10-13: "geçişler yumuşak olsun").
   Süreler ölçülü: 150 ms (renk, kenar) ve 220 ms (giriş, çıkış, kayma); vurgu ve parıltı yalnız bir kez (600–1200 ms).
   Sınıfları ee-motion.js ekler: EE.swap yeni [data-anim] anahtarını data-at türüyle (ee-a-fade|rise|pop|tint|glow) canlandırır,
   EE.goto hedefte ee-a-flash çizer, EE.busy düğmeye ee-spin koyar. prefers-reduced-motion açıksa geçişler kapanır; yalnız
   yükleniyor simgesi yavaş döner. Renk yok — vurgu rengi ana renkten türer (ee-tokens.css). */
:root {
    --ee-dur-1: 150ms;
    --ee-dur-2: 220ms;
    --ee-ease: cubic-bezier(.2, .8, .2, 1);
    --ee-flash: color-mix(in srgb, var(--ee-primary) 45%, transparent);
}

@keyframes ee-fade { from { opacity: 0; } }
@keyframes ee-rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes ee-pop { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
@keyframes ee-glow { 0% { box-shadow: 0 0 0 0 var(--ee-flash); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes ee-flash { 0%, 35% { box-shadow: inset 0 0 0 2px var(--ee-flash); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
@keyframes ee-tint { from { background-color: var(--ee-primary-soft); } }
@keyframes ee-spin { to { transform: rotate(360deg); } }

.ee-a-fade { animation: ee-fade var(--ee-dur-2) var(--ee-ease); }
.ee-a-rise { animation: ee-rise var(--ee-dur-2) var(--ee-ease); }
.ee-a-pop { animation: ee-pop var(--ee-dur-2) var(--ee-ease); }
.ee-a-glow { animation: ee-glow 600ms var(--ee-ease); }
.ee-a-tint { animation: ee-tint 700ms var(--ee-ease); }
.ee-a-flash { animation: ee-flash 1200ms var(--ee-ease); }

/* Yükleniyor (EE.busy): genişlik betikle sabitlenir, metnin önünde döner simge. */
.ee-spin { display: inline-block; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ee-spin .7s linear infinite; vertical-align: -2px; }
[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] { opacity: .85; }

/* Renk ve kenar değişimleri yumuşak (kutu, rozet, satır; düğmelerin geçişi temada). */
.ee-input, .ee-status, .ee-arow, .ee-arow-i, .ee-adoc, .ee-prow, .ee-apply-choices > li {
    transition: background-color var(--ee-dur-1) var(--ee-ease), border-color var(--ee-dur-1) var(--ee-ease),
        box-shadow var(--ee-dur-1) var(--ee-ease), color var(--ee-dur-1) var(--ee-ease);
}

/* Açılır kutu (<details>) içeriği destekleyen tarayıcıda yükseklik + opaklıkla açılır; desteklemeyen anında açar. */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { height: 0; opacity: 0; overflow: clip; transition: height var(--ee-dur-2) var(--ee-ease), opacity var(--ee-dur-2) var(--ee-ease), content-visibility var(--ee-dur-2) allow-discrete; }
    details[open]::details-content { height: auto; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
    .ee-spin { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}