/* REAL ENGLISH – ortak hareket ve geçiş katmanı (v2.1)
   Sayfalar arası geçiş, bölümlerin yumuşak girişi, dokunma geri bildirimi. */

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* 1) Sayfalar arası geçiş (Chrome, Edge, Safari 18+). Eski sayfa sola kayıp solar, yenisi sağdan gelir. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: re-vt-out .32s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: re-vt-in .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes re-vt-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes re-vt-in { from { opacity: 0; transform: translateX(28px); } }
/* Üst çubuk geçişte sabit kalır */
.re-appbar { view-transition-name: re-appbar; }

/* Geçiş desteklemeyen tarayıcılarda: yalnızca saydamlıkla yumuşak açılış (yazıyı bulanıklaştırmaz) */
@supports not (view-transition-name: none) {
  body { animation: re-fade-in .35s ease both; }
}
@keyframes re-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 2) Bölümlerin kaydırınca sırayla belirmesi (re-app.js ekler) */
.re-rv { opacity: 0; translate: 0 14px; transition: opacity .5s ease, translate .55s cubic-bezier(.2, .7, .2, 1); }
.re-rv.re-in { opacity: 1; translate: 0 0; }

/* 3) Açılır bölüm içeriği (hikâye, gramer konusu) yumuşak açılır */
.re-open-anim { animation: re-open .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes re-open { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* 4) Parmakla kaydırınca içerik yön değiştirerek gelir */
.re-swipe-next { animation: re-swipe-next .34s cubic-bezier(.2, .7, .2, 1) both; }
.re-swipe-prev { animation: re-swipe-prev .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes re-swipe-next { from { opacity: .2; translate: 36px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes re-swipe-prev { from { opacity: .2; translate: -36px 0; } to { opacity: 1; translate: 0 0; } }

/* 5) Dokunma geri bildirimi */
button, .btn, [role="button"], select, input[type="button"], input[type="submit"] {
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
}
button:not(:disabled):active, .btn:active, [role="button"]:active, input[type="button"]:active, input[type="submit"]:active {
  transform: scale(.965);
}
button:not(:disabled):hover, .btn:hover { filter: brightness(1.04); }

:focus-visible { outline: 3px solid #e8bd62; outline-offset: 2px; }
@media (hover: hover) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #c9b98f; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
}
::selection { background: #ffe066; color: #111827; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  body { animation: none; }
  .re-rv { opacity: 1; translate: none; transition: none; }
  .re-open-anim, .re-swipe-next, .re-swipe-prev { animation: none; }
  button, .btn { transition: none; }
}