/* FM LOGO EFEKTİ — bulutlar arkada; sis hem arkada hem önden ince bantlar halinde; bulut içi şimşek */

/* Sayfa yana taşmasın: efekt katmanları ekran dışına uzasa bile yatay kaydırma çubuğu oluşmaz */
html, body{ overflow-x:clip; }
@supports not (overflow:clip){ body{ overflow-x:hidden; } }

.fm-logo-fx{ position:relative !important; z-index:2; isolation:isolate; overflow:visible !important; }
.fm-logo-fx > a, .fm-logo-fx img{ position:relative; z-index:3; }
.fm-logo-fx img{ filter:drop-shadow(0 3px 6px rgba(20,60,5,.22)); }

/* Arka bölge: bulutlar + arka sis + şimşek ışığı (kenarlar yumuşak maskeyle erir) */
.fm-logo-sis{ position:absolute; z-index:1; pointer-events:none; left:-55%; right:-55%; top:-70%; bottom:-80%;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 55%, #000 45%, rgba(0,0,0,.6) 68%, transparent 92%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 55%, #000 45%, rgba(0,0,0,.6) 68%, transparent 92%); }
.fm-logo-bulut{ position:absolute; left:0; top:0; height:100%; width:200%; background-repeat:repeat-x; background-size:50% 100%;
  will-change:transform; animation:fmlAk 60s linear infinite; }
.fm-logo-bulut.b1{ top:8%; filter:blur(1.2px); }
.fm-logo-bulut.b2{ top:-14%; height:110%; filter:blur(4px); background-position:30% 0; }
.fm-logo-bulut.b3{ top:26%; height:80%; filter:blur(.6px); background-position:65% 0; }
@keyframes fmlAk{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* Gerçekçi sis tülleri (fraktal doku) */
.fm-logo-tul{ position:absolute; pointer-events:none; width:200%; background-repeat:repeat-x; background-size:50% 100%; will-change:transform;
  animation:fmlAk 55s linear infinite; }
.fm-logo-tul.arka{ left:0; top:30%; height:55%; filter:blur(2px); }
.fm-logo-fx > .fm-logo-tul.on{ z-index:4; left:-40%; width:180%; background-size:55.6% 100%; filter:blur(1.5px); opacity:.45;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.fm-logo-fx > .fm-logo-tul.on.alt{ top:52%; height:75%; }
.fm-logo-fx > .fm-logo-tul.on.ust{ top:-38%; height:58%; animation-direction:reverse; filter:blur(2.5px); }
.fm-logo-fx > .fm-logo-tul.on{ animation-name:fmlAkOn; }
@keyframes fmlAkOn{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-27.8%,0,0); } }

/* Bulutların ARKASINDAN yanan şimşek ışığı */
.fm-logo-simsek{ position:absolute; left:50%; top:45%; width:70%; height:120%; transform:translate(-50%,-50%); opacity:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(240,245,255,1) 0%, rgba(200,220,255,.75) 22%, rgba(170,195,255,.25) 48%, transparent 70%);
  mix-blend-mode:screen; filter:blur(6px); z-index:0; }
.fm-logo-simsek ~ .fm-logo-bulut{ z-index:1; }
.fm-logo-simsek-cizgi{ position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; z-index:0; mix-blend-mode:screen; }

/* Ortadaki dönen ışık (huzme) — yumuşak, geniş, bulanık ışınlar; gücü/hızı ayarlardan */
.fm-logo-huzme{ position:absolute; z-index:0; pointer-events:none; left:50%; top:50%; width:150%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,255,240,0) 0deg, rgba(255,255,235,.26) 7deg, rgba(255,255,240,0) 15deg, rgba(255,255,240,0) 30deg);
  -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 22%, rgba(0,0,0,.12) 42%, transparent 58%);
          mask-image:radial-gradient(circle, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 22%, rgba(0,0,0,.12) 42%, transparent 58%);
  filter:blur(3.5px); mix-blend-mode:screen; opacity:.3; animation:fmlDon 140s linear infinite; }
@keyframes fmlDon{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* Yıldız ışıltıları (isteğe bağlı) */
.fm-logo-yildiz{ position:absolute; z-index:6; width:var(--s,12px); height:var(--s,12px); margin:calc(var(--s,12px) / -2) 0 0 calc(var(--s,12px) / -2); pointer-events:none; opacity:0;
  animation:fmlYildiz 1.3s ease-out forwards; }
.fm-logo-yildiz::before, .fm-logo-yildiz::after{ content:''; position:absolute; left:50%; top:50%; width:100%; height:2px; margin:-1px 0 0 -50%; border-radius:2px;
  background:linear-gradient(90deg, transparent, #fff, transparent); box-shadow:0 0 8px #fff, 0 0 14px rgba(255,255,200,.8); }
.fm-logo-yildiz::after{ transform:rotate(90deg); }
@keyframes fmlYildiz{ 0%{ opacity:0; transform:scale(.2) rotate(0); } 35%{ opacity:1; transform:scale(1.3) rotate(45deg); } 100%{ opacity:0; transform:scale(.3) rotate(100deg); } }

/* Açılış: logo sisin içinden netleşerek belirir */
.fm-logo-giris img{ animation:fmlGiris 2.4s cubic-bezier(.2,.7,.2,1) both; }
.fm-logo-giris .fm-logo-sis{ animation:fmlSisGiris 3.2s ease-out both; }
@keyframes fmlGiris{ 0%{ opacity:0; filter:blur(14px) brightness(1.6); transform:scale(1.05); } 60%{ opacity:1; } 100%{ opacity:1; filter:drop-shadow(0 4px 14px rgba(20,60,5,.25)) blur(0) brightness(1); transform:none; } }
@keyframes fmlSisGiris{ 0%{ transform:scale(1.25); } 100%{ transform:none; } }

/* Telefon: efekt logonun çevresinde toplu kalsın, başlığın altına sarkmasın */
@media (max-width:767px){
  .fm-logo-sis{ left:-22%; right:-22%; top:-38%; bottom:-34%;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgba(0,0,0,.5) 66%, transparent 86%);
            mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgba(0,0,0,.5) 66%, transparent 86%); }
  .fm-logo-fx > .fm-logo-tul.on{ left:-15%; width:130%; background-size:76.9% 100%; }
  .fm-logo-fx > .fm-logo-tul.on.alt{ top:50%; height:48%; }
  .fm-logo-fx > .fm-logo-tul.on.ust{ top:-18%; height:42%; }
  .fm-logo-huzme{ width:85%; }
  .fm-logo-simsek{ height:90%; }
}
@media (prefers-reduced-motion:reduce){ .fm-logo-bulut, .fm-logo-tul, .fm-logo-huzme, .fm-logo-giris img{ animation:none !important; } }

/* Logo daha keskin: önden geçen sis logonun üstünü/altını kapatmasın, yalnızca ince kenar bantları kalsın */
.fm-logo-fx > .fm-logo-tul.on.alt{ top:68%; height:55%; }
.fm-logo-fx > .fm-logo-tul.on.ust{ top:-48%; height:48%; }
