/* =====================================================================
   anim2.css — KULLANICININ SECTIGI ANIMASYONLAR (2026-10-15, /lab-animasyon4'ten: 7 8 11 14 15 25 44 51 59 60 69 73 88 89 95)
   Davranis: assets/js/anim2.js (+ sepet 14/15 app.js, oylama 89 destek.js). Mevcut tasarim DEGISMEZ, yalniz hareket eklenir.
   Kurallar: hover yok, secili = ice basik, iptal/hata kirmizi degil. Hareket azaltmada hepsi kapali.
   ===================================================================== */

/* 7 · takasta kilitlenen kart: kayan capraz seritler + kilit etiketi yukaridan duser */
.izgara .kart.kilitli::after { content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(15,42,86,.07) 0 8px, transparent 8px 16px); background-size:22.63px 22.63px; animation:a2Serit 1.3s linear infinite; }
html[data-tema="koyu"] .izgara .kart.kilitli::after { background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px); }
@keyframes a2Serit { to { background-position:45.25px 0; } }
/* etiket (kullanici /?it= demosundan 9, 2026-10-15): fiyat + R$ gizli, adin altinda "kilit In trade" — ortadaki kutu YOK */
.izgara .kart.kilitli .fiyat { visibility:hidden; }
.izgara .kart.kilitli .rbx { display:none; }   /* yer kaplamasin: ad tum genisligi kullansin (2026-10-15) */
.izgara .kart.kilitli .kilit { left:11px; top:auto; bottom:11px; transform:none; height:22px; padding:0; gap:6px; border-radius:0;
  font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--mavi-koyu); background:none; box-shadow:none;
  animation:a2KilitGel .4s ease both; }
.izgara .kart.kilitli .kilit svg { width:14px; height:14px; }
@keyframes a2KilitGel { from { opacity:0; transform:translateY(8px); } }

/* 8 · iskeletten karta: yerinde hafif buyuyerek */
@keyframes iskGel { from { opacity:0; transform:translateY(6px) scale(.97); } }

/* 11 · "Not buying" damgasi basilir gibi iner */
.kart .kapali-et { animation:a2Damga .45s cubic-bezier(.5,0,.6,1) both; }
@keyframes a2Damga { from { opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scale(2.1); } 70% { opacity:1; transform:translate(-50%,-50%) rotate(-2deg) scale(.94); }
  to { transform:translate(-50%,-50%); } }   /* son hal = mevcut tasarim (duz) */

/* 14/15 · sepet: animasyonlar app.js'te (WAAPI). Hayalet kartin kabi */
#secilenler { position:relative; }

/* 25 · kopyala -> tik (anim2.js, simge + yazi animasyonu) */
.a2-kopya-ik { display:inline-block; }

/* 44 · zil: yeni bildirimde halka nabzi (bildirim.js'in sallanma + rozet zipiamasina ek) */
.zil.a2-nabiz::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:a2Nabiz .9s ease-out 2; }
@keyframes a2Nabiz { from { box-shadow:0 0 0 0 rgba(37,99,235,.45); } to { box-shadow:0 0 0 10px rgba(37,99,235,0); } }

/* 51 · baglanti koptu seridi */
.a2-ag { position:fixed; left:50%; top:10px; z-index:2147483000; display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:11px;
  font:800 12.5px/1 var(--yazi, "InterVariable", Inter, system-ui, sans-serif); color:var(--ink-2, #5A7196); background:var(--inci, #fff);
  box-shadow:0 0 0 1px var(--cizgi, rgba(15,42,86,.1)), 0 14px 30px -12px rgba(15,42,86,.45); transform:translate(-50%, -70px); transition:transform .42s cubic-bezier(.3,1.3,.5,1), background .3s, color .3s; }
html[data-tema="koyu"] .a2-ag { background:#1A1A1A; box-shadow:inset 0 0 0 1px #2A2A2A, 0 14px 30px -12px rgba(0,0,0,.8); }
.a2-ag.acik { transform:translate(-50%, 0); }
.a2-ag svg { width:16px; height:16px; flex:none; }
.a2-ag:not(.ok) svg { animation:a2Sonuk 1.1s ease-in-out infinite; }
.a2-ag.ok { color:#059669; } html[data-tema="koyu"] .a2-ag.ok { color:#34D399; }
@keyframes a2Sonuk { 50% { opacity:.3; } }

/* 59 · "NEW" kurdelesi (Settings rozetleri, yeni acilan) */
.ay2-rk .a2-yeni { position:absolute; top:-5px; right:12px; z-index:2; padding:7px 5px 10px; font-size:9px; font-weight:900; letter-spacing:.06em; line-height:1; color:#fff;
  background:var(--mavi, #2563EB); clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transform-origin:50% 0;
  animation:a2Kurdele .5s cubic-bezier(.2,.8,.2,1) .3s both, a2Salla .9s ease-in-out .85s; }
@keyframes a2Kurdele { from { transform:scaleY(0); } 70% { transform:scaleY(1.1); } }
@keyframes a2Salla { 30% { transform:rotate(5deg); } 60% { transform:rotate(-4deg); } }

/* 60 · dogrulanmis rozeti parıltısı (Settings: Verified / Email verified) */
.ay-cip.ok { position:relative; overflow:hidden; }
.ay-cip.ok::after { content:""; position:absolute; top:-2px; bottom:-2px; left:-14px; width:9px; pointer-events:none; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation:a2Parilti 4.8s ease-in-out 1.2s infinite; }
html[data-tema="koyu"] .ay-cip.ok::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
@keyframes a2Parilti { 0%, 70% { left:-14px; } 85%, 100% { left:calc(100% + 8px); } }

/* 69 · Help sayfa yolu: yeni parca sagdan kayar (anim2.js) */
.yd-yol .a2-yol-gel { animation:a2YolGel .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes a2YolGel { from { opacity:0; transform:translateX(14px); } }

/* 73 · capraz parıltılı iskelet: tum kartin uzerinden gecen isik */
.izgara .iskelet { overflow:hidden; }
.izgara .iskelet::after { content:""; position:absolute; top:-10%; bottom:-10%; left:-60%; width:45%; pointer-events:none; transform:skewX(-16deg);
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation:a2Isik 1.6s ease-in-out infinite; animation-delay:calc(var(--i, 0) * 60ms); }
html[data-tema="koyu"] .izgara .iskelet::after { background:linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes a2Isik { to { left:130%; } }

/* 88 · surukle-birak alani: yuruyen kesikli kenar + hafif buyume (mm-ek.js .mmek-birak) */
.mmek-birak::after { box-shadow:none !important; border-radius:14px;
  background:
    linear-gradient(90deg, rgba(37,99,235,.7) 50%, transparent 0) top / 16px 2px repeat-x,
    linear-gradient(90deg, rgba(37,99,235,.7) 50%, transparent 0) bottom / 16px 2px repeat-x,
    linear-gradient(0deg, rgba(37,99,235,.7) 50%, transparent 0) left / 2px 16px repeat-y,
    linear-gradient(0deg, rgba(37,99,235,.7) 50%, transparent 0) right / 2px 16px repeat-y,
    rgba(37,99,235,.08) !important;
  animation:a2Karinca .6s linear infinite, a2BirakGel .25s cubic-bezier(.3,1.3,.5,1); }
@keyframes a2Karinca { to { background-position:16px 0, -16px 100%, 0 -16px, 100% 16px, 0 0; } }
@keyframes a2BirakGel { from { opacity:0; transform:scale(.97); } }

/* 89 · destek memnuniyet oylamasi (destek.js .dsk-oy) */
.dsk-oy { display:grid; justify-items:center; gap:8px; margin:6px 0 2px; padding:14px; border-radius:14px; background:var(--buz-2, rgba(15,42,86,.05)); text-align:center; }
html[data-tema="koyu"] .dsk-oy { background:rgba(255,255,255,.04); }
.dsk-oy b { font-size:13.5px; font-weight:800; color:var(--ink); }
.dsk-oy-y { display:flex; gap:6px; }
.dsk-oy-y button { width:36px; height:36px; display:grid; place-items:center; border:0; padding:0; background:none; cursor:pointer; color:rgba(15,42,86,.16); -webkit-tap-highlight-color:transparent; }
html[data-tema="koyu"] .dsk-oy-y button { color:rgba(255,255,255,.14); }
.dsk-oy-y button svg { width:30px; height:30px; }
.dsk-oy-y button.on { color:#F59E0B; }
.dsk-oy-y button.zip { animation:a2Yildiz .4s ease-out both; animation-delay:calc(var(--i) * 60ms); }
@keyframes a2Yildiz { from { transform:scale(.6) rotate(-20deg); } 60% { transform:scale(1.2) rotate(8deg); } }
.dsk-oy small { font-size:12px; font-weight:600; color:var(--ink-3); min-height:16px; }
.dsk-oy small.gel { animation:a2YolGel .3s ease both; }
.dsk-oy[aria-busy="true"] { opacity:.6; pointer-events:none; }

/* 95 · daireyle acilan tema (anim2.js, View Transitions) */
html.a2-tema-vt::view-transition-old(root), html.a2-tema-vt::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
html.a2-tema-vt::view-transition-new(root) { z-index:2; }

@media (prefers-reduced-motion: reduce) {
  .izgara .kart.kilitli::after, .izgara .kart .kilit, .kart .kapali-et, .zil.a2-nabiz::after, .ay2-rk .a2-yeni, .ay-cip.ok::after, .yd-yol .a2-yol-gel,
  .izgara .iskelet::after, .mmek-birak::after, .dsk-oy-y button.zip, .a2-ag svg { animation:none !important; }
}

/* ================================================================ /lab-animasyon5'ten 20 · bos sepette sallanan simge */
#secilenler .pyok::before { content:""; display:block; width:34px; height:34px; margin:0 auto 6px; background:currentColor; opacity:.55; transform-origin:50% 0;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2"/><circle cx="10" cy="20" r="1.3"/><circle cx="17" cy="20" r="1.3"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2"/><circle cx="10" cy="20" r="1.3"/><circle cx="17" cy="20" r="1.3"/></svg>') center/contain no-repeat;
  animation:a2Sepet 2.4s ease-in-out infinite; }
@keyframes a2Sepet { 0%, 100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { #secilenler .pyok::before { animation:none; } }