/*
 * Ortak ikon sistemi — animasyonlar ve stil kutusu.
 *
 * Kaynak: storefront/lib/icon-ref.php (çizim) + storefront/lib/about-icons.php
 * (animasyonlu set). Vitrinde layout.php bağlar; panel aynı dosyayı içe aktarır
 * (admin-theme/src/lib/iconRef.ts), yani önizleme ile site birebir aynıdır.
 *
 *   .ai          animasyonlu setin <svg>'si. İçindeki `ab-a-*` / `adv-a-*` parçaları
 *                kendi hareketini yapar. İLKE: siluet her an okunur, hareket vurgudur.
 *   .irfx-*      herhangi bir ikona (1848'lik kütüphane dahil) uygulanan GENEL efekt.
 *   .ir          stil kutusu: arka plan, şekil, gölge. Boyut ve renk CSS değişkeniyle.
 *   .ai-still    animasyonlu ikonun kendi hareketini kapatır ("Hareket: yok").
 *   .ir-hover    hareket yalnız fare üzerine gelince (ikonun kendisi ya da kartı).
 */

/* ------------------------------------------------------------ stil kutusu */
.ir {
  display: inline-grid; place-items: center; flex: none; line-height: 0;
  box-sizing: content-box;
  padding: var(--ir-p, 0);
  background: var(--ir-bg, transparent);
  border-radius: var(--ir-r, 0);
  color: var(--ir-c, currentColor);
  border: var(--ir-bw, 0) solid var(--ir-bc, transparent);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.ir > svg { display: block; overflow: visible; }
.ir--shadow { box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .45); }
.ir--hover-lift:hover, :hover > .ir--hover-lift { transform: translateY(-3px); }

/* ------------------------------------------------------------ animasyonlu set */
.ai [class*="ab-a-"], .ai [class*="adv-a-"] { transform-box: fill-box; transform-origin: center; }
/* Dönme merkezi gereken parçalar: fill-box her parçayı KENDİ ortasından döndürür. */
.ai .ab-a-hh, .ai .ab-a-mh { transform-box: view-box; transform-origin: 24px 24px; }
.ai .ab-a-sweep { transform-box: view-box; transform-origin: 24px 27px; }
.ai .ab-a-ribbon, .ai .ab-a-swing { transform-origin: 50% 0; }
.ai .ab-a-hammer { transform-origin: 0 100%; }
.ai .ab-a-grow { transform-origin: 50% 100%; }
.ai .ab-a-orbit { transform-box: view-box; transform-origin: 24px 24px; }

@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-a-ring { animation: ab-pulse 3.4s ease-out infinite; }
@keyframes ab-pulse { 0% { transform: scale(.72); opacity: 0; } 30% { opacity: .75; } 100% { transform: scale(1.12); opacity: 0; } }
.ab-a-tick { stroke-dasharray: 22; stroke-dashoffset: 0; animation: ab-tick 4.2s ease-in-out infinite; }
@keyframes ab-tick { 0%, 6% { stroke-dashoffset: 22; } 22%, 100% { stroke-dashoffset: 0; } }
.ab-a-glint { animation: ab-glint 3.8s ease-in-out infinite; }
@keyframes ab-glint { 0%, 62%, 100% { opacity: .55; transform: scale(1); } 74% { opacity: 1; transform: scale(1.1); } }
.ab-a-hh { animation: ab-spin 12s linear infinite; }
.ab-a-mh { animation: ab-spin 3s linear infinite; }
.ab-a-sweep { animation: ab-spin 3s linear infinite; }
.ab-a-orbit { animation: ab-spin 6s linear infinite; }
.ab-a-ribbon { animation: ab-sway 4.6s ease-in-out infinite; }
@keyframes ab-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.ab-a-w1 { animation: ab-wave 3.2s ease-out infinite; }
.ab-a-w2 { animation: ab-wave 3.2s ease-out infinite 1.6s; }
@keyframes ab-wave { 0% { transform: scale(.35); opacity: 0; } 25% { opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.ab-a-ekg { stroke-dasharray: 14 30; animation: ab-ekg 2.4s linear infinite; }
@keyframes ab-ekg { to { stroke-dashoffset: -44; } }
.ab-a-arc { animation: ab-breathe 3.6s ease-in-out infinite; }
@keyframes ab-breathe { 0%, 100% { opacity: .45; transform: translateY(.6px); } 50% { opacity: 1; transform: translateY(-.6px); } }
.ab-a-bob { animation: ab-bob 2.8s ease-in-out infinite; }
@keyframes ab-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.ab-a-drive { animation: ab-drive 1.3s ease-in-out infinite; }
@keyframes ab-drive { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(.5px, -.5px); } 70% { transform: translate(-.4px, 0); } }
.ab-a-road { stroke-dasharray: 3 3; animation: ab-road .8s linear infinite; }
@keyframes ab-road { to { stroke-dashoffset: 6; } }
.ab-a-flow { stroke-dasharray: 2 3; animation: ab-flow 1.2s linear infinite; }
@keyframes ab-flow { to { stroke-dashoffset: -10; } }
.ab-a-spin { animation: ab-spin 9s linear infinite; }
.ab-a-spinr { animation: ab-spin 9s linear infinite reverse; }
.ab-a-turn { animation: ab-turn 4.5s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes ab-turn { 0%, 55% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.ab-a-wiggle { animation: ab-wiggle 3.4s ease-in-out infinite; }
@keyframes ab-wiggle { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(-9deg); } 78% { transform: rotate(7deg); } 88% { transform: rotate(-3deg); } }
.ab-a-swing { animation: ab-swing 3s ease-in-out infinite; }
@keyframes ab-swing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.ab-a-pop { animation: ab-pop 2.8s ease-in-out infinite; }
@keyframes ab-pop { 0%, 55%, 100% { transform: scale(1); } 65% { transform: scale(1.14); } 75% { transform: scale(.97); } 85% { transform: scale(1.04); } }
.ab-a-blink { animation: ab-blink 2.4s ease-in-out infinite; }
@keyframes ab-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ab-a-d1, .ab-a-d2, .ab-a-d3 { animation: ab-blink 1.5s ease-in-out infinite; }
.ab-a-d2 { animation-delay: .25s; }
.ab-a-d3 { animation-delay: .5s; }
.ab-a-rise { animation: ab-rise 2.6s ease-out infinite; }
.ab-dl1 { animation-delay: .45s; }
.ab-dl2 { animation-delay: .9s; }
@keyframes ab-rise { 0% { transform: translateY(1.5px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-2.5px); opacity: 0; } }
.ab-a-fall { animation: ab-fall 2.2s ease-in infinite; }
@keyframes ab-fall { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(2.5px); opacity: 0; } }
.ab-a-flicker { animation: ab-flicker 1.1s ease-in-out infinite; }
@keyframes ab-flicker { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.85); opacity: .7; } }
.ab-a-flash { animation: ab-flash 2.8s ease-in-out infinite; }
@keyframes ab-flash { 0%, 70%, 100% { opacity: 1; transform: scale(1); } 76% { opacity: .35; } 82% { opacity: 1; transform: scale(1.1); } 88% { opacity: .5; } }
.ab-a-check { stroke-dasharray: 10; animation: ab-check 4.2s ease-in-out infinite; }
@keyframes ab-check { 0%, 6% { stroke-dashoffset: 10; } 22%, 100% { stroke-dashoffset: 0; } }
.ab-a-draw { stroke-dasharray: 40; animation: ab-draw 4s ease-in-out infinite; }
@keyframes ab-draw { 0%, 8% { stroke-dashoffset: 40; } 35%, 100% { stroke-dashoffset: 0; } }
.ab-a-meridian { animation: ab-meridian 4s ease-in-out infinite; }
@keyframes ab-meridian { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.2); } }
.ab-a-swim { animation: ab-swim 2.4s ease-in-out infinite; }
@keyframes ab-swim { 0%, 100% { transform: translateX(-1px) rotate(-2deg); } 50% { transform: translateX(1px) rotate(2deg); } }
.ab-a-hammer { animation: ab-hammer 1.8s ease-in infinite; }
@keyframes ab-hammer { 0%, 40%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } }
.ab-a-grow { animation: ab-grow 3.4s ease-in-out infinite; }
@keyframes ab-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.ab-a-slide { animation: ab-slide 2.6s ease-in-out infinite; }
@keyframes ab-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
.ab-a-shake { animation: ab-shake 2.6s ease-in-out infinite; }
@keyframes ab-shake { 0%, 70%, 100% { transform: translateX(0); } 74%, 82%, 90% { transform: translateX(-.8px); } 78%, 86%, 94% { transform: translateX(.8px); } }
.ab-a-fill { animation: ab-fill 3.6s ease-in-out infinite; }
@keyframes ab-fill { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.ai .ab-a-fill { transform-origin: 50% 100%; }

/* Dolgulu avantaj setinin dört özel çizimi. */
.adv-a-gear { animation: ab-spin 5s linear infinite; }
.adv-a-cog { animation: ab-spin 18s linear infinite; }
.adv-a-shine { animation: ab-glint 3.6s ease-in-out infinite; }
.adv-a-arrowL { animation: adv-sqL 2.8s ease-in-out infinite; }
.adv-a-arrowR { animation: adv-sqR 2.8s ease-in-out infinite; }
@keyframes adv-sqL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes adv-sqR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
.adv-a-climb { stroke-dasharray: 5 11; animation: adv-climb 2.8s linear infinite; }
@keyframes adv-climb { to { stroke-dashoffset: -32; } }

/* "Hareket: yok" — animasyonlu ikon son karesinde durur. */
.ai-still [class*="ab-a-"], .ai-still [class*="adv-a-"] { animation: none !important; }

/* ------------------------------------------------------------ genel efektler */
/* Bütün ikona uygulanır; kütüphanedeki 1848 ikonun her biri animasyonlu olabilir. */
.irfx { transform-origin: 50% 50%; }
.irfx-pulse  { animation: irfx-pulse 2.4s ease-in-out infinite; }
@keyframes irfx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.irfx-beat   { animation: irfx-beat 1.6s ease-in-out infinite; }
@keyframes irfx-beat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.16); } 20% { transform: scale(1); } 30% { transform: scale(1.1); } }
.irfx-bounce { animation: irfx-bounce 1.8s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes irfx-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-18%); } 45% { transform: translateY(0); } 52% { transform: translateY(-5%); } }
.irfx-float  { animation: irfx-float 3.4s ease-in-out infinite; }
@keyframes irfx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9%); } }
.irfx-spin   { animation: ab-spin 4s linear infinite; }
.irfx-turn   { animation: ab-turn 4.5s cubic-bezier(.6,0,.3,1) infinite; }
.irfx-wiggle { animation: irfx-wiggle 3s ease-in-out infinite; }
@keyframes irfx-wiggle { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(-12deg); } 78% { transform: rotate(10deg); } 88% { transform: rotate(-4deg); } }
.irfx-swing  { animation: irfx-swing 2.6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes irfx-swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.irfx-shake  { animation: irfx-shake 2.4s ease-in-out infinite; }
@keyframes irfx-shake { 0%, 70%, 100% { transform: translateX(0); } 74%, 82%, 90% { transform: translateX(-6%); } 78%, 86%, 94% { transform: translateX(6%); } }
.irfx-flip   { animation: irfx-flip 3.6s ease-in-out infinite; }
@keyframes irfx-flip { 0%, 50% { transform: perspective(200px) rotateY(0); } 100% { transform: perspective(200px) rotateY(360deg); } }
.irfx-tada   { animation: irfx-tada 2.8s ease-in-out infinite; }
@keyframes irfx-tada { 0%, 55%, 100% { transform: scale(1) rotate(0); } 60%, 65% { transform: scale(.9) rotate(-6deg); } 70%, 80%, 90% { transform: scale(1.1) rotate(6deg); } 75%, 85% { transform: scale(1.1) rotate(-6deg); } }
.irfx-blink  { animation: ab-blink 2s ease-in-out infinite; }
.irfx-glow   { animation: irfx-glow 2.6s ease-in-out infinite; }
@keyframes irfx-glow { 0%, 100% { filter: drop-shadow(0 0 0 currentColor); } 50% { filter: drop-shadow(0 0 5px currentColor); } }
/* Çizilme: çizgiler kendini baştan çizer, sonra tam görünür bekler. */
.irfx-draw :is(path, line, polyline, polygon, circle, rect, ellipse) {
  stroke-dasharray: 80; animation: irfx-draw 4s ease-in-out infinite;
}
@keyframes irfx-draw { 0%, 5% { stroke-dashoffset: 80; } 45%, 100% { stroke-dashoffset: 0; } }

/* Yalnız fare üzerine gelince: ikon, kutusu ya da iki kat yukarıdaki kart. */
.ir-hover, .ir-hover *, .ir-hover.irfx { animation-play-state: paused !important; }
.ir-hover:hover, .ir-hover:hover *,
:hover > .ir-hover, :hover > .ir-hover *,
:hover > * > .ir-hover, :hover > * > .ir-hover * { animation-play-state: running !important; }

@media (prefers-reduced-motion: reduce) {
  .ai [class*="ab-a-"], .ai [class*="adv-a-"], [class*="irfx-"], [class*="irfx-"] * { animation: none !important; }
  .ai .ab-a-tick, .ai .ab-a-check, .ai .ab-a-draw, .irfx-draw * { stroke-dashoffset: 0 !important; }
  .ai .ab-a-rise, .ai .ab-a-fall { opacity: 1; }
  .ai .ab-a-ring, .ai .ab-a-w1, .ai .ab-a-w2 { opacity: .45; }
  .ai .adv-a-climb { stroke-dasharray: none; }
}