/* =====================================================================
   anim-site.css — SECILEN ANIMASYONLAR SITEDE (2026-10-14, /lab-animasyon'dan)
   ---------------------------------------------------------------------
   1) Acilir menuler: Value (siralama), Filters, Share — dugmenin kosesinden
      yaylanarak acilir, satirlar sirayla duser, KAPANIRKEN de animasyonlu
      (eskiden display:none ile aninda kayboluyordu).
   2) Nadirlik kutusu: secince dolar + tik cizilir, Filters rozeti ziplar.
   3) Bildirimler (mm2Notify): mm2.money'de HIC stili yoktu. Sag alttan yay,
      sure cubugu, kapaninca digerleri boslugu kayarak kapatir (anim-site.js).
   4) Hesap degistirme: avatar halkasi (kayan cizgi kaldirildi, kullanici istemedi).
   Izgara gecisleri (arama/filtre suzgeci, hesap) assets/js/anim-site.js'te.
   ===================================================================== */

/* ---------------------------------------------------------- 1) MENULER */
@keyframes asSatir { from { opacity:0; transform:translateY(-5px); } }
/* Value (siralama) menusu — her genislikte acilir menu */
.sira:not(.sh-filtre) .menu-ac,
.sira.sh-filtre .menu-ac {
  display:block; visibility:hidden; opacity:0; pointer-events:none; animation:none;
  transform:translateY(-6px) scale(.94); transform-origin:calc(100% - 24px) -8px;
  transition:opacity .15s ease, transform .24s cubic-bezier(.3,1.25,.5,1), visibility 0s linear .24s; }
.sira:not(.sh-filtre).acik .menu-ac,
.sira.sh-filtre.acik .menu-ac {
  visibility:visible; opacity:1; pointer-events:auto; transform:none; animation:none; transition-delay:0s; }
.sira.acik .menu-ac > button,
.sira.sh-filtre.acik .sh-filtre-pen > :not(.sh-filtre-mob) { animation:asSatir .26s cubic-bezier(.2,.8,.2,1) both; }
.sira.acik .menu-ac > :nth-child(2) { animation-delay:.025s; }
.sira.acik .menu-ac > :nth-child(3) { animation-delay:.05s; }
.sira.acik .menu-ac > :nth-child(4) { animation-delay:.075s; }
.sira.acik .menu-ac > :nth-child(5) { animation-delay:.1s; }
.sira.acik .menu-ac > :nth-child(6) { animation-delay:.12s; }
.sira.acik .menu-ac > :nth-child(n+7) { animation-delay:.14s; }
.sira .dugme .ok { transition:transform .3s cubic-bezier(.3,1.3,.5,1); }
/* telefon: Filters tam ekran — asagidan kayarak gelir (kapanis app.js'te aninda, dokunulmadi) */
@media (max-width:560px) {
  .sira.sh-filtre .menu-ac { transform:none; transition:none; }
  .sira.sh-filtre:not(.acik) .menu-ac { display:none; }
  @keyframes asTamEkran { from { transform:translateY(24px); opacity:0; } }
  [data-ana-filtre].acik .sh-filtre-pen { animation:asTamEkran .3s cubic-bezier(.2,.9,.3,1) both; }
}
/* Share */
.shp-pen { display:block; visibility:hidden; opacity:0; pointer-events:none; animation:none;
  transform:translateY(-6px) scale(.95); transform-origin:calc(100% - 34px) -8px;
  transition:opacity .15s ease, transform .24s cubic-bezier(.3,1.25,.5,1), visibility 0s linear .24s; }
.shp-pen.acik { visibility:visible; opacity:1; pointer-events:auto; transform:none; animation:none; transition-delay:0s; }
.shp-pen.acik > * { animation:asSatir .26s cubic-bezier(.2,.8,.2,1) both; }
.shp-pen.acik > :nth-child(2) { animation-delay:.04s; }
.shp-pen.acik > :nth-child(n+3) { animation-delay:.08s; }

/* ---------------------------------------------------------- 2) NADIRLIK KUTUSU + ROZET */
.sh-nr-kutu path { stroke-dasharray:24; stroke-dashoffset:0; }
@keyframes asKutu { 0% { transform:scale(.6); } 60% { transform:scale(1.18); } 100% { transform:none; } }
@keyframes asKutuBos { 0% { transform:scale(.85); } 100% { transform:none; } }
@keyframes asTikCiz { from { stroke-dashoffset:24; } }
.sh-nr.as-tik[aria-pressed="true"] .sh-nr-kutu { animation:asKutu .34s cubic-bezier(.3,1.5,.5,1); }
.sh-nr.as-tik[aria-pressed="true"] .sh-nr-kutu path { animation:asTikCiz .28s .05s cubic-bezier(.65,0,.35,1) both; }
.sh-nr.as-tik[aria-pressed="false"] .sh-nr-kutu { animation:asKutuBos .22s ease-out; }
@keyframes asZipla { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:scale(1); } }
.as-zipla { animation:asZipla .32s cubic-bezier(.3,1.5,.5,1); }

/* ---------------------------------------------------------- 3) BILDIRIMLER (assets/js/notify.js) */
#mm2-notify { position:fixed; right:16px; bottom:16px; z-index:3000; display:flex; flex-direction:column; gap:8px;
  width:min(360px, calc(100vw - 32px)); pointer-events:none; }
.mm2-n { --renk:#2563EB; position:relative; display:flex; gap:10px; align-items:flex-start; padding:12px 10px 14px 12px; border-radius:16px;
  background:var(--inci, #fff); color:var(--ink, #0F2A56); font:400 13px/1.4 var(--yazi, system-ui, sans-serif); overflow:hidden; pointer-events:auto;
  box-shadow:0 16px 34px -14px rgba(15,42,86,.5), 0 0 0 1px var(--cizgi, rgba(15,42,86,.1));
  transform:translateX(calc(100% + 28px)) scale(.97); opacity:0;
  transition:transform .46s cubic-bezier(.3,1.25,.5,1), opacity .22s ease; cursor:grab; touch-action:pan-y; }
html[data-tema="koyu"] .mm2-n { box-shadow:0 16px 34px -14px rgba(0,0,0,.85), 0 0 0 1px var(--cizgi-2); }
.mm2-n.is-in { transform:none; opacity:1; }
.mm2-n.is-out { transform:translateX(calc(100% + 28px)); opacity:0; transition:transform .24s cubic-bezier(.5,0,.75,0), opacity .2s ease; }
.mm2-n.is-drag, .mm2-n.as-surukle { transition:none; cursor:grabbing; }
.mm2-n--success { --renk:#10B981; } .mm2-n--error { --renk:#EF4444; } .mm2-n--warn { --renk:#F59E0B; } .mm2-n--info { --renk:#2563EB; }
.mm2-n-ic { width:34px; height:34px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:16px; color:var(--renk);
  background:color-mix(in srgb, var(--renk) 14%, transparent); }
@keyframes asIkon { 0% { transform:scale(.4) rotate(-20deg); } 70% { transform:scale(1.12) rotate(4deg); } 100% { transform:none; } }
.mm2-n.is-in .mm2-n-ic { animation:asIkon .5s .12s cubic-bezier(.3,1.4,.5,1) both; }
.mm2-n-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding-top:1px; }
.mm2-n-title { font-weight:700; font-size:14px; letter-spacing:-.01em; overflow-wrap:anywhere; }
.mm2-n-sub { color:var(--ink-2, #5A7196); font-size:12.5px; overflow-wrap:anywhere; }
.mm2-n-act { align-self:flex-start; margin-top:7px; height:30px; padding:0 12px; border:0; border-radius:9px; background:var(--buz, #E7EFFB);
  color:var(--ink); font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; transition:background .15s, color .15s; }
.mm2-n-act:hover { background:var(--renk); color:#fff; }
.mm2-n-x { width:26px; height:26px; flex:none; border:0; border-radius:8px; background:none; display:grid; place-items:center; color:var(--ink-3, #8EA2C0); cursor:pointer; font-size:13px; }
.mm2-n-x:hover { background:var(--buz, #E7EFFB); color:var(--ink); }
.mm2-n-bar { position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--renk); opacity:.85; transform-origin:0 50%; transform:scaleX(1); }
@media (max-width:560px) {
  #mm2-notify { top:calc(10px + env(safe-area-inset-top)); bottom:auto; left:12px; right:12px; width:auto; flex-direction:column-reverse; }
  .mm2-n { transform:translateY(calc(-100% - 20px)); }
  .mm2-n.is-out { transform:translateY(calc(-100% - 20px)); }
}

/* ---------------------------------------------------------- 4) HESAP DEGISTIRME */
.hesap img { transition:box-shadow .3s ease; }
.hesap.on img { box-shadow:0 0 0 2px var(--inci), 0 0 0 3.5px var(--mavi); }
@keyframes asAvatar { 0% { transform:scale(.85); } 55% { transform:scale(1.12); } 100% { transform:none; } }
.hesap.as-pop img { animation:asAvatar .42s cubic-bezier(.3,1.5,.5,1); }

/* izgara gecisinde cikan kartin yerinde kalan hayaleti (anim-site.js) */
.as-hayalet { position:fixed !important; margin:0 !important; z-index:30; pointer-events:none; content-visibility:visible !important; }

@media (prefers-reduced-motion:reduce) {
  .sira .menu-ac, .shp-pen, .mm2-n { transition-duration:1ms !important; }
  .sira.acik .menu-ac > *, .shp-pen.acik > *, .sh-nr.as-tik .sh-nr-kutu, .sh-nr.as-tik path, .as-zipla, .mm2-n-ic, .hesap.as-pop img { animation:none !important; }
}