/* ==========================================================================
   Animasyonlu logo – panelden seçilir (Ayarlar → Genel → Logo animasyonu)
   fx-shine | fx-glow | fx-float | fx-fire | fx-aura | fx-sparks | fx-legend | fx-none
   ========================================================================== */
.logo-fx {
  --d: 3.6s;
  position: relative; display: inline-flex; align-items: center; isolation: isolate; line-height: 0;
}
.logo-fx.speed-slow { --d: 6s; }
.logo-fx.speed-fast { --d: 2s; }
.logo-fx img {
  display: block; height: var(--logo-h, 46px); width: auto; max-height: none; max-width: 100%;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .75));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1.4), filter .35s;
}
/* Efekt katmanları varsayılan olarak gizli */
.lfx-shine, .lfx-sparks { position: absolute; inset: 0; pointer-events: none; display: none; }

/* --- Altın parıltı: ışık harflerin üstünden süzülür (logo şekliyle maskelenir) --- */
.lfx-shine {
  -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 225, .95) 48%, rgba(255, 220, 140, .6) 52%, transparent 62%);
  background-size: 260% 100%; background-position: 160% 0; mix-blend-mode: screen;
  animation: fx-shine var(--d) ease-in-out infinite;
}
.logo-fx.fx-shine .lfx-shine, .logo-fx.fx-legend .lfx-shine { display: block; }
@keyframes fx-shine { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

/* --- Nabız gibi parlayan ışık --- */
.logo-fx.fx-glow img, .logo-fx.fx-legend img { animation: fx-glow var(--d) ease-in-out infinite; }
@keyframes fx-glow {
  0%, 100% { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .75)) drop-shadow(0 0 3px rgba(255, 190, 80, .35)); }
  50% { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(255, 175, 60, .95)) drop-shadow(0 0 22px rgba(255, 140, 40, .45)); }
}

/* --- Süzülme --- */
.logo-fx.fx-float { animation: fx-float var(--d) ease-in-out infinite; }
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* --- Alev titreşimi --- */
.logo-fx.fx-fire img { animation: fx-fire calc(var(--d) / 2.4) steps(1, end) infinite; }
@keyframes fx-fire {
  0%   { filter: drop-shadow(0 2px 1px #000) drop-shadow(0 -2px 6px rgba(255, 120, 20, .85)) drop-shadow(0 -4px 9px rgba(255, 60, 0, .35)); }
  20%  { filter: drop-shadow(0 2px 1px #000) drop-shadow(0 -3px 9px rgba(255, 150, 30, .95)) drop-shadow(0 -6px 12px rgba(255, 70, 0, .42)) brightness(1.08); }
  40%  { filter: drop-shadow(0 2px 1px #000) drop-shadow(0 -1px 5px rgba(255, 110, 20, .75)) drop-shadow(0 -3px 8px rgba(230, 50, 0, .32)); }
  60%  { filter: drop-shadow(0 2px 1px #000) drop-shadow(0 -3px 10px rgba(255, 170, 40, 1)) drop-shadow(0 -6px 13px rgba(255, 80, 0, .45)) brightness(1.12); }
  80%  { filter: drop-shadow(0 2px 1px #000) drop-shadow(0 -2px 7px rgba(255, 130, 25, .85)) drop-shadow(0 -5px 10px rgba(255, 60, 0, .38)); }
}

/* --- Metin taşı aurası (mor) --- */
.logo-fx.fx-aura img { animation: fx-aura var(--d) ease-in-out infinite; }
.logo-fx.fx-aura::before {
  content: ""; position: absolute; inset: -30% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 90, 255, .45), rgba(80, 140, 255, .15) 60%, transparent);
  animation: fx-aura-bg var(--d) ease-in-out infinite;
}
@keyframes fx-aura {
  0%, 100% { filter: drop-shadow(0 2px 1px #000) drop-shadow(0 0 4px rgba(160, 100, 255, .5)); }
  50% { filter: drop-shadow(0 2px 1px #000) drop-shadow(0 0 12px rgba(170, 110, 255, 1)) drop-shadow(0 0 24px rgba(90, 150, 255, .5)); }
}
@keyframes fx-aura-bg { 0%, 100% { opacity: .5; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.05); } }

/* --- Yükselen kıvılcımlar --- */
.logo-fx.fx-sparks .lfx-sparks, .logo-fx.fx-legend .lfx-sparks { display: block; inset: 10% 4% 0; }
.lfx-sparks i {
  position: absolute; bottom: 12%; left: calc(5% + var(--i) * 11%); width: 4px; height: 4px; border-radius: 50%;
  background: #ffd27a; box-shadow: 0 0 8px 2px rgba(255, 170, 60, .95); opacity: 0;
  animation: fx-spark calc(var(--d) * .8) ease-out infinite; animation-delay: calc(var(--i) * var(--d) * -.13);
}
.lfx-sparks i:nth-child(odd) { width: 3px; height: 3px; background: #fff0c8; }
.lfx-sparks i:nth-child(3n) { left: calc(9% + var(--i) * 10%); }
@keyframes fx-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc((var(--i) - 4) * 3px), calc(var(--logo-h, 46px) * -1.25)) scale(.3); }
}

/* --- Üzerine gelince --- */
.logo-fx.fx-hover { transition: filter .35s; }
a:hover > .logo-fx.fx-hover img, .logo-fx.fx-hover:hover img { transform: scale(1.06) translateY(-1px); }
a:hover > .logo-fx.fx-hover, .logo-fx.fx-hover:hover { filter: brightness(1.14) drop-shadow(0 0 10px rgba(255, 190, 80, .75)); }
a:hover > .logo-fx.fx-hover .lfx-shine, .logo-fx.fx-hover:hover .lfx-shine { animation-duration: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .logo-fx, .logo-fx *, .logo-fx::before { animation: none !important; }
  .lfx-sparks { display: none !important; }
}

/* Telefonda logo menü düğmesini sıkıştırmasın */
@media (max-width: 640px) {
  .topbar .logo-fx img { height: min(var(--logo-h, 46px), 38px); }
}

/* Panel önizlemesi */
.logo-preview {
  display: grid; place-items: center; min-height: 140px; padding: 28px 20px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 18, 10, .97), rgba(14, 10, 7, .95)), url(../img/m2/hero.webp) center / cover;
  border: 1px solid #4a3418; box-shadow: inset 0 -1px 0 rgba(240, 181, 74, .4);
}
.logo-preview-empty { color: #806f57; font-size: 13px; text-align: center; }