/* ============================================================
   Cloud UI Kit — Animasyonlu Mobil Menü İkonları
   menu-icon.js, Flatsome hamburger linkinin içine .cui-burger
   enjekte eder ve [data-design] + .cui-open sınıfını yönetir.

   ÖNEMLİ TASARIM KURALI:
   Bir öğe konumunu transform ile alıyorsa (rotate/translate), aynı
   öğeye transform animasyonu UYGULANMAZ (animasyon konumu ezer).
   Bu yüzden:
     • Dekor noktaları transform ile yörüngeye oturur; nabız/scale
       animasyonu görünür nokta olan i::before üzerinde çalışır.
     • Yatay dizilen noktalar `left` ile konumlanır, transform serbest kalır.
     • Genişlik animasyonları (wave/elastic) transform yerine `width` kullanır.

   --cui-speed : tüm animasyon sürelerini ölçekler (büyük = yavaş).
   ============================================================ */

.cui-burger {
  --cui-size:   28px;
  --cui-color:  var(--fs-color-primary, #1e73be);
  --cui-accent: var(--cui-color);
  --cui-speed:  1;                              /* hız çarpanı (admin) */
  --cui-gap:    calc(var(--cui-size) * 0.26);
  --cui-bar:    max(2px, calc(var(--cui-size) * 0.085));
  --cui-r:      calc(var(--cui-size) * 0.42);
  --cui-ringw:  max(1px, calc(var(--cui-size) * 0.055));

  position: relative;
  display: inline-block;
  width:  var(--cui-size);
  height: var(--cui-size);
  vertical-align: middle;
  color: var(--cui-color);
  line-height: 0;
  cursor: pointer;
}

a[data-open] i.icon-menu.cui-hidden { display: none !important; }

.cui-burger__box  { position: absolute; inset: 0; }
.cui-burger__ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-sizing: border-box; }
.cui-burger__deco { position: absolute; inset: 0; pointer-events: none; }

/* ----- Hamburger çizgileri (ortak) ----- */
.cui-burger__lines { position: absolute; left: 18%; right: 18%; top: 50%; height: 0; }
.cui-burger__lines i {
  position: absolute; left: 0; right: 0;
  height: var(--cui-bar);
  margin-top: calc(var(--cui-bar) / -2);
  border-radius: 99px;
  background: currentColor;
  transition:
    transform .38s cubic-bezier(.6,.05,.3,1.35),
    opacity   .2s  ease,
    width     .38s ease;
}
.cui-burger__lines i:nth-child(1) { transform: translateY(calc(-1 * var(--cui-gap))); }
.cui-burger__lines i:nth-child(2) { transform: translateY(0); }
.cui-burger__lines i:nth-child(3) { transform: translateY(var(--cui-gap)); }

/* ----- Ortak açık (X) morph ----- */
.cui-burger.cui-open .cui-burger__lines i:nth-child(1) { transform: translateY(0) rotate(45deg); }
.cui-burger.cui-open .cui-burger__lines i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.cui-burger.cui-open .cui-burger__lines i:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ----- Dekor noktaları: i = yörünge konumlayıcı, i::before = görünür nokta ----- */
.cui-burger__deco i {
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--cui-size) * 0.14);
  height: calc(var(--cui-size) * 0.14);
  margin: calc(var(--cui-size) * -0.07) 0 0 calc(var(--cui-size) * -0.07);
}
.cui-burger__deco i::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--cui-accent);
}
.cui-burger__deco i:nth-child(1) { transform: rotate(0deg)   translateX(var(--cui-r)); }
.cui-burger__deco i:nth-child(2) { transform: rotate(90deg)  translateX(var(--cui-r)); }
.cui-burger__deco i:nth-child(3) { transform: rotate(180deg) translateX(var(--cui-r)); }
.cui-burger__deco i:nth-child(4) { transform: rotate(270deg) translateX(var(--cui-r)); }

/* ============================================================
   KEYFRAMES  (transform animasyonları yalnız statik-transform'suz öğelerde)
   ============================================================ */
@keyframes cui-spin      { to { transform: rotate(360deg); } }
@keyframes cui-spin-rev  { to { transform: rotate(-360deg); } }
/* ::before üzerinde — konumu i tutar, burası sadece ölçek/opaklık */
@keyframes cui-pulse     { 0%,100% { transform: scale(.65); opacity: .5; }
                           50%     { transform: scale(1.25); opacity: 1; } }
@keyframes cui-ring-pulse{ 0%   { transform: scale(.55); opacity: .9; }
                           100% { transform: scale(1.25); opacity: 0; } }
/* yatay nokta `left` ile konumlandığı için translateY serbest */
@keyframes cui-bounce    { 0%,100% { transform: translateY(0); }
                           40%     { transform: translateY(calc(var(--cui-size) * -0.22)); } }
/* scaleX animasyonu — bu çubuklar dikey konumu `top` ile aldığından transform serbest */
@keyframes cui-wave      { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.3); } }
@keyframes cui-elastic   { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.5); } }
@keyframes cui-draw      { 0%   { clip-path: inset(0 100% 0 0); }
                           45%  { clip-path: inset(0 0 0 0); }
                           55%  { clip-path: inset(0 0 0 0); }
                           100% { clip-path: inset(0 0 0 100%); } }

/* ============================================================
   1) SPIN-RING — iki halka farklı yön/hızda + yörüngede pulslayan noktalar.
   ============================================================ */
.cui-burger[data-design="spin-ring"] { --cui-gap: calc(var(--cui-size) * 0.16); }
.cui-burger[data-design="spin-ring"] .cui-burger__ring {
  border: var(--cui-ringw) solid transparent;
  border-top-color: var(--cui-accent);
  border-right-color: var(--cui-accent);
  animation: cui-spin calc(2.6s * var(--cui-speed)) linear infinite;
}
.cui-burger[data-design="spin-ring"] .cui-burger__box::before {
  content: ""; position: absolute; inset: 17%;
  border-radius: 50%;
  border: var(--cui-ringw) solid transparent;
  border-bottom-color: var(--cui-accent);
  border-left-color: var(--cui-accent);
  opacity: .8;
  animation: cui-spin-rev calc(1.5s * var(--cui-speed)) linear infinite;
}
.cui-burger[data-design="spin-ring"] .cui-burger__deco {
  animation: cui-spin calc(6s * var(--cui-speed)) linear infinite;
}
.cui-burger[data-design="spin-ring"] .cui-burger__deco i { width: calc(var(--cui-size)*0.1); height: calc(var(--cui-size)*0.1); margin: calc(var(--cui-size)*-0.05) 0 0 calc(var(--cui-size)*-0.05); }
.cui-burger[data-design="spin-ring"] .cui-burger__deco i::before { animation: cui-pulse calc(1.8s * var(--cui-speed)) ease-in-out infinite; }
.cui-burger[data-design="spin-ring"] .cui-burger__deco i:nth-child(1)::before { animation-delay: 0s; }
.cui-burger[data-design="spin-ring"] .cui-burger__deco i:nth-child(2)::before { animation-delay: calc(.45s * var(--cui-speed)); }
.cui-burger[data-design="spin-ring"] .cui-burger__deco i:nth-child(3)::before { animation-delay: calc(.9s  * var(--cui-speed)); }
.cui-burger[data-design="spin-ring"] .cui-burger__deco i:nth-child(4)::before { animation-delay: calc(1.35s* var(--cui-speed)); }
.cui-burger[data-design="spin-ring"] .cui-burger__lines { left: 32%; right: 32%; }

/* ============================================================
   2) MORPH-BARS — sade hamburger, açıkta X. (Boşta animasyon yok.)
   ============================================================ */
.cui-burger[data-design="morph-bars"] .cui-burger__deco,
.cui-burger[data-design="morph-bars"] .cui-burger__ring { display: none; }

/* ============================================================
   3) BOUNCE-DOTS — 3 nokta `left` ile dizilir, transform ile zıplar.
   ============================================================ */
.cui-burger[data-design="bounce-dots"] .cui-burger__ring,
.cui-burger[data-design="bounce-dots"] .cui-burger__deco { display: none; }
.cui-burger[data-design="bounce-dots"] { --cui-gap: calc(var(--cui-size) * 0.28); }
.cui-burger[data-design="bounce-dots"] .cui-burger__lines i {
  border-radius: 50%; right: auto;
  width:  calc(var(--cui-size) * 0.16);
  height: calc(var(--cui-size) * 0.16);
  margin-top:  calc(var(--cui-size) * -0.08);
  margin-left: calc(var(--cui-size) * -0.08);
}
.cui-burger[data-design="bounce-dots"] .cui-burger__lines i:nth-child(1) { left: calc(50% - var(--cui-gap)); transform: none; animation: cui-bounce calc(1s * var(--cui-speed)) ease-in-out infinite; }
.cui-burger[data-design="bounce-dots"] .cui-burger__lines i:nth-child(2) { left: 50%;                       transform: none; animation: cui-bounce calc(1s * var(--cui-speed)) ease-in-out calc(.15s * var(--cui-speed)) infinite; }
.cui-burger[data-design="bounce-dots"] .cui-burger__lines i:nth-child(3) { left: calc(50% + var(--cui-gap)); transform: none; animation: cui-bounce calc(1s * var(--cui-speed)) ease-in-out calc(.3s  * var(--cui-speed)) infinite; }
/* Açık → X çizgilerine dön. */
.cui-burger[data-design="bounce-dots"].cui-open .cui-burger__lines i {
  animation: none; border-radius: 99px; right: 18%; left: 18%; margin-left: 0;
  width: auto; height: var(--cui-bar); margin-top: calc(var(--cui-bar) / -2);
}
.cui-burger[data-design="bounce-dots"].cui-open .cui-burger__lines i:nth-child(1) { transform: rotate(45deg); }
.cui-burger[data-design="bounce-dots"].cui-open .cui-burger__lines i:nth-child(2) { opacity: 0; }
.cui-burger[data-design="bounce-dots"].cui-open .cui-burger__lines i:nth-child(3) { transform: rotate(-45deg); }

/* ============================================================
   4) ROTATING-ARC — dönen tek yay + hamburger.
   ============================================================ */
.cui-burger[data-design="rotating-arc"] .cui-burger__deco { display: none; }
.cui-burger[data-design="rotating-arc"] { --cui-gap: calc(var(--cui-size) * 0.17); }
.cui-burger[data-design="rotating-arc"] .cui-burger__ring {
  border: var(--cui-ringw) solid transparent;
  border-top-color: var(--cui-accent);
  animation: cui-spin calc(1.3s * var(--cui-speed)) cubic-bezier(.6,0,.4,1) infinite;
}
.cui-burger[data-design="rotating-arc"] .cui-burger__lines { left: 30%; right: 30%; }

/* ============================================================
   5) PULSE-RING — iki halka nabız (hız admin'den --cui-speed ile).
   ============================================================ */
.cui-burger[data-design="pulse-ring"] .cui-burger__deco { display: none; }
.cui-burger[data-design="pulse-ring"] { --cui-gap: calc(var(--cui-size) * 0.17); }
.cui-burger[data-design="pulse-ring"] .cui-burger__ring {
  border: var(--cui-ringw) solid var(--cui-accent);
  animation: cui-ring-pulse calc(1.6s * var(--cui-speed)) ease-out infinite;
}
.cui-burger[data-design="pulse-ring"] .cui-burger__box::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: var(--cui-ringw) solid var(--cui-accent);
  animation: cui-ring-pulse calc(1.6s * var(--cui-speed)) ease-out calc(.8s * var(--cui-speed)) infinite;
}
.cui-burger[data-design="pulse-ring"] .cui-burger__lines { left: 30%; right: 30%; }

/* ============================================================
   6) ORBIT-DOTS — noktalar yörüngede sürekli döner (container rotate),
      her nokta ::before üzerinde pulslar (konum bozulmaz).
   ============================================================ */
.cui-burger[data-design="orbit-dots"] .cui-burger__ring { display: none; }
.cui-burger[data-design="orbit-dots"] { --cui-gap: calc(var(--cui-size) * 0.16); }
.cui-burger[data-design="orbit-dots"] .cui-burger__deco { animation: cui-spin calc(3s * var(--cui-speed)) linear infinite; }
.cui-burger[data-design="orbit-dots"] .cui-burger__deco i:nth-child(1)::before,
.cui-burger[data-design="orbit-dots"] .cui-burger__deco i:nth-child(3)::before { animation: cui-pulse calc(1.4s * var(--cui-speed)) ease-in-out infinite; }
.cui-burger[data-design="orbit-dots"] .cui-burger__deco i:nth-child(2)::before,
.cui-burger[data-design="orbit-dots"] .cui-burger__deco i:nth-child(4)::before { animation: cui-pulse calc(1.4s * var(--cui-speed)) ease-in-out calc(.7s * var(--cui-speed)) infinite; }
.cui-burger[data-design="orbit-dots"] .cui-burger__lines { left: 30%; right: 30%; }
.cui-burger[data-design="orbit-dots"].cui-open .cui-burger__deco { animation-duration: calc(.8s * var(--cui-speed)); }

/* ============================================================
   7) DRAW-LINES — çizgiler çizilip silinir (clip-path, transform serbest).
   ============================================================ */
.cui-burger[data-design="draw-lines"] .cui-burger__ring,
.cui-burger[data-design="draw-lines"] .cui-burger__deco { display: none; }
.cui-burger[data-design="draw-lines"] .cui-burger__lines i { animation: cui-draw calc(2.4s * var(--cui-speed)) ease-in-out infinite; }
.cui-burger[data-design="draw-lines"] .cui-burger__lines i:nth-child(2) { animation-delay: calc(.3s * var(--cui-speed)); }
.cui-burger[data-design="draw-lines"] .cui-burger__lines i:nth-child(3) { animation-delay: calc(.6s * var(--cui-speed)); }
.cui-burger[data-design="draw-lines"].cui-open .cui-burger__lines i { animation: none; clip-path: none; }

/* ============================================================
   8) ELASTIC-BARS — boşta genişlik nabzı (width), açıkta X.
   ============================================================ */
.cui-burger[data-design="elastic-bars"] .cui-burger__ring,
.cui-burger[data-design="elastic-bars"] .cui-burger__deco { display: none; }
/* Dikey konum `top` ile → transform scaleX için serbest. */
.cui-burger[data-design="elastic-bars"] .cui-burger__lines i {
  transform: none; transform-origin: left center;
}
.cui-burger[data-design="elastic-bars"] .cui-burger__lines i:nth-child(1) { top: calc(-1 * var(--cui-gap)); animation: cui-elastic calc(1.4s * var(--cui-speed)) cubic-bezier(.68,-.4,.32,1.4) infinite; }
.cui-burger[data-design="elastic-bars"] .cui-burger__lines i:nth-child(2) { top: 0;                        animation: cui-elastic calc(1.4s * var(--cui-speed)) cubic-bezier(.68,-.4,.32,1.4) calc(.2s * var(--cui-speed)) infinite; }
.cui-burger[data-design="elastic-bars"] .cui-burger__lines i:nth-child(3) { top: var(--cui-gap);           animation: cui-elastic calc(1.4s * var(--cui-speed)) cubic-bezier(.68,-.4,.32,1.4) calc(.4s * var(--cui-speed)) infinite; }
.cui-burger[data-design="elastic-bars"].cui-open .cui-burger__lines i { animation: none; top: 0; transform-origin: center; }

/* ============================================================
   9) DUAL-RING — iç + dış halka ters yönde döner (hız --cui-speed).
   ============================================================ */
.cui-burger[data-design="dual-ring"] .cui-burger__deco,
.cui-burger[data-design="dual-ring"] .cui-burger__lines { display: none; }
.cui-burger[data-design="dual-ring"] .cui-burger__ring {
  border: var(--cui-ringw) solid transparent;
  border-top-color: var(--cui-accent);
  border-bottom-color: var(--cui-accent);
  animation: cui-spin calc(1.8s * var(--cui-speed)) linear infinite;
}
.cui-burger[data-design="dual-ring"] .cui-burger__box::after {
  content: ""; position: absolute; inset: 24%; border-radius: 50%;
  border: var(--cui-ringw) solid transparent;
  border-left-color: var(--cui-accent);
  border-right-color: var(--cui-accent);
  animation: cui-spin-rev calc(1.2s * var(--cui-speed)) linear infinite;
}

/* ============================================================
   10) GRADIENT-SPIN — conic-gradient dönen halka.
   ============================================================ */
.cui-burger[data-design="gradient-spin"] .cui-burger__deco { display: none; }
.cui-burger[data-design="gradient-spin"] { --cui-gap: calc(var(--cui-size) * 0.16); }
.cui-burger[data-design="gradient-spin"] .cui-burger__ring {
  background: conic-gradient(from 0deg, transparent 0deg, var(--cui-accent) 300deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--cui-ringw)), #000 calc(100% - var(--cui-ringw)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--cui-ringw)), #000 calc(100% - var(--cui-ringw)));
  animation: cui-spin calc(1.4s * var(--cui-speed)) linear infinite;
}
.cui-burger[data-design="gradient-spin"] .cui-burger__lines { left: 32%; right: 32%; }

/* ============================================================
   11) WAVE-BARS — çizgiler sırayla daralır (width, transform serbest).
   ============================================================ */
.cui-burger[data-design="wave-bars"] .cui-burger__ring,
.cui-burger[data-design="wave-bars"] .cui-burger__deco { display: none; }
/* Dikey konum `top` ile → transform scaleX için serbest. */
.cui-burger[data-design="wave-bars"] .cui-burger__lines i { transform: none; transform-origin: left center; }
.cui-burger[data-design="wave-bars"] .cui-burger__lines i:nth-child(1) { top: calc(-1 * var(--cui-gap)); animation: cui-wave calc(1.2s * var(--cui-speed)) ease-in-out infinite; }
.cui-burger[data-design="wave-bars"] .cui-burger__lines i:nth-child(2) { top: 0;                        animation: cui-wave calc(1.2s * var(--cui-speed)) ease-in-out calc(.18s * var(--cui-speed)) infinite; }
.cui-burger[data-design="wave-bars"] .cui-burger__lines i:nth-child(3) { top: var(--cui-gap);           animation: cui-wave calc(1.2s * var(--cui-speed)) ease-in-out calc(.36s * var(--cui-speed)) infinite; }
.cui-burger[data-design="wave-bars"].cui-open .cui-burger__lines i { animation: none; top: 0; transform-origin: center; }

/* ============================================================
   ERİŞİLEBİLİRLİK
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cui-burger *,
  .cui-burger *::before,
  .cui-burger *::after { animation: none !important; }
}