:root{
  --navy:#020d1c;
  --navy2:#06152a;
  --blue:#0a5fc2;
  --blue2:#1597ff;
  --yellow:#f5c400;
  --yellow2:#ffe66d;
  --red:#ff1717;
  --white:#eaf5ff;
  --muted:#92a8be;
}

*{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#020b18;
  color:var(--white);
}

body{
  min-height:100vh;
  overflow-x:hidden;
}

button{
  font:inherit;
}

.space-bg{
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 50% 42%, rgba(11,60,126,.22), transparent 28%),
    radial-gradient(circle at 10% 80%, rgba(5,75,130,.12), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(6,43,95,.13), transparent 25%),
    linear-gradient(135deg,#020914 0%,#041222 48%,#020a15 100%);
}

.stars{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.32;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1px),
    radial-gradient(circle,rgba(23,145,255,.7) 1px,transparent 1px);
  background-size:75px 75px,130px 130px;
  background-position:10px 20px,60px 80px;
}

.sidebar{
  position:fixed;
  top:0;
  bottom:0;
  width:230px;
  padding:28px 13px;
  z-index:20;
  overflow-y:auto;
  background:
    linear-gradient(180deg,rgba(6,19,35,.94),rgba(5,13,24,.82));
  border-color:rgba(28,111,190,.22);
}

.left-sidebar{
  left:0;
  border-right:1px solid rgba(29,115,196,.25);
}

.right-sidebar{
  right:0;
  border-left:1px solid rgba(29,115,196,.25);
}

.side-card{
  position:relative;
  padding:0 0 17px;
  margin:0 0 14px;
  border-bottom:1px solid rgba(52,104,151,.16);
}

.side-card h3{
  margin:0 0 9px;
  font-size:13px;
  line-height:1.25;
  letter-spacing:.2px;
  color:#e7edf3;
}

.side-content{
  color:#c4ced8;
  font-size:11px;
  line-height:1.5;
}

.command-center{
  min-height:100vh;
  margin:0 230px;
  padding:18px 28px 45px;
  position:relative;
  z-index:1;
}

.top-bar{
  min-height:58px;
  display:grid;
  grid-template-columns:1fr 220px 1fr;
  align-items:start;
  gap:15px;
  position:relative;
  z-index:5;
}

.system-title strong{
  display:block;
  font-size:15px;
  letter-spacing:.4px;
}

.system-title small{
  display:block;
  color:#a7b7c7;
  font-size:10px;
  margin-top:4px;
}

.status-dot{
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:7px;
  border-radius:50%;
  background:#18dd70;
  box-shadow:0 0 14px #18dd70;
}

.clock-area{
  text-align:right;
}

.clock-area div{
  font-size:14px;
  font-weight:bold;
}

.clock-area small{
  color:#aab8c8;
  font-size:10px;
}

.top-kitt-zone{
  display:flex;
  justify-content:center;
  padding-top:0;
}

/* ESKİ YUKARIDAKİ KIRMIZI IŞIK BİLEREK GİZLENDİ */
.top-kitt-hidden{
  display:none;
}

/* ANA MERKEZ */
.hologram-zone{
  width:100%;
  max-width:1380px;
  min-height:620px;
  margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(400px,620px) minmax(180px,1fr);
  align-items:center;
  gap:20px;
}

.orbit-column{
  position:relative;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.orbit-left{
  align-items:flex-end;
}

.orbit-right{
  align-items:flex-start;
}

.orbit-card{
  width:min(100%,245px);
  min-height:90px;
  padding:14px 16px;
  text-align:left;
  cursor:pointer;
  color:#dcecff;
  border:1px solid rgba(26,113,201,.42);
  border-radius:17px;
  background:
    linear-gradient(135deg,rgba(10,39,71,.88),rgba(4,19,38,.9));
  box-shadow:
    inset 0 0 20px rgba(12,85,155,.08),
    0 0 18px rgba(0,66,140,.12);
  transition:.25s ease;
}

.orbit-card:hover,
.orbit-card.active{
  transform:translateY(-3px) scale(1.025);
  border-color:var(--yellow);
  box-shadow:
    0 0 12px rgba(245,196,0,.42),
    0 0 32px rgba(16,111,220,.22),
    inset 0 0 22px rgba(245,196,0,.08);
}

.orbit-card span{
  display:block;
  font-size:14px;
  font-weight:bold;
  letter-spacing:.5px;
}

.orbit-card .card-icon{
  display:inline-block;
  margin-right:7px;
}

.orbit-card small{
  display:block;
  margin-top:7px;
  font-size:10px;
  color:#9eb3c8;
}

/* HOLOGRAM TAM ORTA */
.hologram-stage{
  position:relative;
  z-index:6;
  width:100%;
  min-height:610px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

.spotlight{
  position:absolute;
  top:35px;
  width:180px;
  height:470px;
  z-index:-1;
  opacity:.5;
  filter:blur(2px);
  background:linear-gradient(
    to bottom,
    rgba(245,196,0,.22),
    rgba(13,115,226,.12) 40%,
    transparent 90%
  );
}

.spotlight-left{
  left:18%;
  transform:rotate(20deg);
  transform-origin:top center;
}

.spotlight-right{
  right:18%;
  transform:rotate(-20deg);
  transform-origin:top center;
}

.energy-rings{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:2px solid rgba(18,132,255,.5);
  box-shadow:
    0 0 18px rgba(17,130,255,.45),
    inset 0 0 18px rgba(245,196,0,.14);
  pointer-events:none;
  z-index:-1;
}

.ring-one{
  width:520px;
  height:170px;
  animation:ringFloat 5s linear infinite;
}

.ring-two{
  width:410px;
  height:125px;
  border-color:rgba(245,196,0,.5);
  animation:ringFloatReverse 7s linear infinite;
}

.ring-three{
  width:600px;
  height:210px;
  opacity:.35;
  animation:ringFloat 11s linear infinite;
}

.hologram-beam{
  position:absolute;
  width:390px;
  height:520px;
  top:70px;
  left:50%;
  transform:translateX(-50%);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(14,94,180,.08),
      rgba(20,153,255,.22),
      rgba(245,196,0,.10),
      rgba(20,153,255,.22),
      rgba(14,94,180,.08),
      transparent
    );
  filter:blur(5px);
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);
  z-index:-1;
}

.hologram-core{
  width:370px;
  height:420px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50% 50% 45% 45%;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(18,112,205,.35),rgba(2,8,18,.2) 65%,transparent 80%);
  box-shadow:
    0 0 30px rgba(11,118,225,.3),
    0 0 70px rgba(245,196,0,.14);
}

.hologram-glow{
  position:absolute;
  inset:15%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,217,69,.24),rgba(18,124,255,.18) 45%,transparent 72%);
  filter:blur(18px);
  animation:holoPulse 3.5s ease-in-out infinite;
}

.mutmain-image{
  position:relative;
  z-index:2;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:
    contrast(1.08)
    saturate(1.12)
    drop-shadow(0 0 20px rgba(21,139,255,.45))
    drop-shadow(0 0 12px rgba(245,196,0,.25));
  opacity:0;
  transition:opacity .6s ease;
}

.mutmain-image.loaded{
  opacity:1;
}

.image-fallback{
  position:absolute;
  z-index:1;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle,rgba(18,122,224,.35),rgba(2,11,23,.95) 65%);
}

.fallback-head{
  width:150px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:90px;
  font-weight:bold;
  color:var(--yellow);
  border:3px solid rgba(245,196,0,.55);
  box-shadow:0 0 35px rgba(245,196,0,.35);
}

.fallback-text{
  margin-top:18px;
  letter-spacing:8px;
  font-weight:bold;
  color:#69baff;
}

.hologram-name{
  margin-top:-28px;
  position:relative;
  z-index:8;
  font-size:clamp(38px,5vw,72px);
  font-weight:900;
  font-style:italic;
  letter-spacing:4px;
  color:#0e6fe0;
  text-shadow:
    -4px 0 0 var(--yellow),
    0 0 18px rgba(15,113,224,.7);
}

.hologram-status{
  margin-top:3px;
  font-size:10px;
  letter-spacing:2px;
  color:#d6e6f6;
}

.pulse{
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:7px;
  border-radius:50%;
  background:#21db74;
  box-shadow:0 0 12px #21db74;
  animation:pulse 1.4s infinite;
}

/* KITT: SADECE 1 TANE VE HOLOGRAMIN HEMEN ALTINDA */
.kitt-holder{
  position:relative;
  z-index:20;
  width:280px;
  height:34px;
  margin-top:16px;
  display:flex;
  justify-content:center;
}

.kitt-housing{
  position:relative;
  width:100%;
  height:16px;
  overflow:hidden;
  border-radius:12px;
  background:
    linear-gradient(
      180deg,
      #111 0%,
      #020202 35%,
      #272727 50%,
      #050505 70%,
      #111 100%
    );
  border:1px solid #4d4d4d;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.15),
    inset 0 -3px 6px rgba(0,0,0,.9),
    0 5px 14px rgba(0,0,0,.7);
}

.kitt-housing::before,
.kitt-housing::after{
  content:"";
  position:absolute;
  top:4px;
  width:20px;
  height:7px;
  border-radius:50%;
  background:#080808;
  box-shadow:inset 0 0 4px #000;
}

.kitt-housing::before{
  left:7px;
}

.kitt-housing::after{
  right:7px;
}

.kitt-scanner{
  position:absolute;
  top:2px;
  left:0;
  width:58px;
  height:11px;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at center,
      #fff 0%,
      #ffb0b0 14%,
      #ff1d1d 38%,
      #c50000 62%,
      transparent 75%
    );
  filter:blur(.2px);
  box-shadow:
    0 0 5px #ff3131,
    0 0 12px #f00,
    0 0 25px rgba(255,0,0,.85);
  animation:kittScan 1.55s ease-in-out infinite alternate;
}

.kitt-holder::after{
  content:"";
  position:absolute;
  top:20px;
  width:210px;
  height:12px;
  background:radial-gradient(ellipse at center,rgba(255,0,0,.35),transparent 70%);
  filter:blur(7px);
  z-index:-1;
}

/* BAĞLANTI SVG */
.connection-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
  overflow:visible;
}

.connection-line{
  fill:none;
  stroke:rgba(19,104,199,.36);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:
    stroke .35s ease,
    stroke-width .35s ease,
    filter .35s ease;
}

.connection-line.active{
  stroke:url(#blueYellowGradient);
  stroke-width:4.5;
  filter:url(#glow);
  stroke-dasharray:12 8;
  animation:energyMove .7s linear infinite;
}

/* ALT KARTLAR */
.bottom-grid{
  max-width:1100px;
  margin:0 auto 24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.system-card{
  min-height:90px;
  padding:15px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  cursor:pointer;
  color:#dbe9f8;
  border:1px solid rgba(31,115,200,.38);
  border-radius:16px;
  background:rgba(7,24,45,.78);
  transition:.25s;
}

.system-card:hover,
.system-card.active{
  border-color:var(--yellow);
  box-shadow:
    0 0 18px rgba(245,196,0,.24),
    inset 0 0 20px rgba(15,112,215,.1);
}

.system-icon{
  font-size:26px;
}

.system-card strong{
  display:block;
  font-size:11px;
}

.system-card small{
  display:block;
  margin-top:5px;
  font-size:9px;
  color:#9eb1c5;
}

/* MATRIX */
.matrix-panel{
  width:min(900px,100%);
  margin:0 auto;
  padding:18px 20px 12px;
  border:1px solid rgba(29,112,195,.55);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(11,34,62,.95),rgba(4,18,34,.94));
  box-shadow:0 0 30px rgba(8,78,160,.12);
}

.matrix-title{
  text-align:center;
  margin-bottom:16px;
  color:#ffe16a;
  font-size:16px;
  font-weight:bold;
  letter-spacing:1px;
}

.matrix-content{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  align-items:center;
  gap:22px;
}

.matrix-side h4{
  margin:0 0 10px;
  text-align:center;
  font-size:10px;
  color:#b7c9db;
}

.matrix-side button{
  width:100%;
  margin:5px 0;
  padding:10px;
  color:#dbe9f7;
  cursor:pointer;
  font-size:10px;
  font-weight:bold;
  border:1px solid rgba(31,117,204,.5);
  border-radius:9px;
  background:linear-gradient(90deg,#102b4c,#0a1e37);
  transition:.2s;
}

.matrix-side button:hover{
  border-color:#f5c400;
  box-shadow:0 0 12px rgba(245,196,0,.25);
}

.matrix-lines svg{
  width:100%;
  height:130px;
}

.matrix-lines path{
  fill:none;
  stroke:#e6193c;
  stroke-width:2.5;
  opacity:.9;
  filter:drop-shadow(0 0 5px rgba(255,0,0,.45));
}

.matrix-note{
  margin-top:10px;
  text-align:center;
  font-size:9px;
  color:#91a9bf;
}

/* ANİMASYONLAR */
@keyframes kittScan{
  0%{
    transform:translateX(-20px);
  }
  100%{
    transform:translateX(242px);
  }
}

@keyframes ringFloat{
  0%{
    transform:translate(-50%,-50%) rotate(0deg);
  }
  100%{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}

@keyframes ringFloatReverse{
  0%{
    transform:translate(-50%,-50%) rotate(360deg);
  }
  100%{
    transform:translate(-50%,-50%) rotate(0deg);
  }
}

@keyframes holoPulse{
  0%,100%{
    opacity:.55;
    transform:scale(.95);
  }
  50%{
    opacity:1;
    transform:scale(1.08);
  }
}

@keyframes pulse{
  0%,100%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(.65);
    opacity:.45;
  }
}

@keyframes energyMove{
  to{
    stroke-dashoffset:-40;
  }
}

/* TABLET */
@media(max-width:1200px){

  .sidebar{
    width:190px;
  }

  .command-center{
    margin:0 190px;
    padding-left:18px;
    padding-right:18px;
  }

  .hologram-zone{
    grid-template-columns:180px minmax(350px,1fr) 180px;
  }

  .hologram-core{
    width:330px;
    height:390px;
  }

}

/* TELEFON */
@media(max-width:900px){

  .sidebar{
    display:none;
  }

  .command-center{
    margin:0;
    padding:15px;
  }

  .top-bar{
    grid-template-columns:1fr 1fr;
  }

  .top-kitt-zone{
    display:none;
  }

  .hologram-zone{
    min-height:auto;
    display:flex;
    flex-direction:column;
  }

  .orbit-column{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .orbit-card{
    width:100%;
  }

  .hologram-stage{
    order:-1;
    min-height:580px;
  }

  .bottom-grid{
    grid-template-columns:1fr 1fr;
  }

  .matrix-content{
    grid-template-columns:1fr;
  }

  .matrix-lines{
    display:none;
  }

}

@media(max-width:560px){

  .top-bar{
    display:block;
  }

  .clock-area{
    margin-top:12px;
    text-align:left;
  }

  .hologram-core{
    width:280px;
    height:340px;
  }

  .ring-one{
    width:380px;
  }

  .ring-two{
    width:320px;
  }

  .ring-three{
    width:420px;
  }

  .bottom-grid{
    grid-template-columns:1fr;
  }

}
/* =========================================
   MUTMAIN – HOLOGRAM + SPOT + PREMIUM KARTLAR
   ========================================= */

.hologram-stage{
  position:relative;
  overflow:visible;
  isolation:isolate;
}

/* Merkezin arkasındaki holografik ışık */
.hologram-stage::before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle,
      rgba(20,110,255,.20) 0%,
      rgba(0,90,220,.12) 24%,
      rgba(0,40,120,.05) 48%,
      transparent 72%);
  filter:blur(10px);
  animation:mutmainPulse 4s ease-in-out infinite;
}

/* Üstten gelen spotlar */
.hologram-stage::after{
  content:"";
  position:absolute;
  width:900px;
  height:520px;
  left:50%;
  top:-90px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:-1;
  opacity:.8;
  background:
    linear-gradient(112deg,
      transparent 0%,
      rgba(0,100,255,.03) 23%,
      rgba(60,150,255,.22) 50%,
      transparent 72%),
    linear-gradient(68deg,
      transparent 0%,
      rgba(255,210,30,.03) 24%,
      rgba(255,210,30,.14) 50%,
      transparent 73%);
  clip-path:polygon(36% 0%,47% 100%,53% 100%,64% 0%);
  filter:blur(2px);
  animation:spotMove 6s ease-in-out infinite alternate;
}

/* Hologram ana çekirdek */
.hologram-core{
  position:relative;
  box-shadow:
    0 0 25px rgba(0,120,255,.30),
    0 0 70px rgba(0,80,255,.20),
    inset 0 0 45px rgba(0,130,255,.12);
  animation:coreFloat 5s ease-in-out infinite;
}

/* Hologram tarama çizgileri */
.hologram-core::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(90,180,255,.08) 0px,
      rgba(90,180,255,.08) 1px,
      transparent 2px,
      transparent 7px
    );
  opacity:.45;
  animation:holoScan 4s linear infinite;
}

/* Hologramın altındaki enerji halkası */
.hologram-core::after{
  content:"";
  position:absolute;
  width:125%;
  height:45px;
  left:50%;
  bottom:-24px;
  transform:translateX(-50%);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,130,255,.50) 0%,
      rgba(0,100,255,.24) 30%,
      rgba(0,60,255,.08) 50%,
      transparent 72%
    );
  filter:blur(9px);
  animation:energyRing 3s ease-in-out infinite;
}

/* MUTMAIN yazısına hologram parlaması */
.mutmain-title{
  text-shadow:
    0 0 6px rgba(255,210,0,.9),
    0 0 20px rgba(0,100,255,.8),
    0 0 40px rgba(0,80,255,.45);
}

/* Kartları canlandır */
.card,
.info-card,
.border-card{
  position:relative;
  overflow:hidden;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
  box-shadow:
    0 8px 25px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(130,190,255,.05);
}

/* Kart üstündeki hareketli ışık */
.card::before,
.info-card::before,
.border-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-130%;
  width:75%;
  height:100%;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(100,180,255,.08),
      rgba(255,255,255,.12),
      rgba(100,180,255,.08),
      transparent
    );
  transform:skewX(-20deg);
  transition:left .8s ease;
}

.card:hover,
.info-card:hover,
.border-card:hover{
  transform:translateY(-3px);
  border-color:rgba(60,150,255,.65);
  box-shadow:
    0 12px 35px rgba(0,0,0,.35),
    0 0 22px rgba(0,100,255,.16),
    inset 0 1px 0 rgba(150,210,255,.12);
}

.card:hover::before,
.info-card:hover::before,
.border-card:hover::before{
  left:150%;
}

/* Ana merkezden kartlara enerji hissi */
.hologram-stage .ring-one,
.hologram-stage .ring-two,
.hologram-stage .ring-three{
  filter:
    drop-shadow(0 0 5px rgba(0,120,255,.55))
    drop-shadow(0 0 16px rgba(0,80,255,.20));
}

/* Animasyonlar */
@keyframes mutmainPulse{
  0%,100%{
    opacity:.65;
    transform:translate(-50%,-50%) scale(.94);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08);
  }
}

@keyframes spotMove{
  0%{
    opacity:.45;
    transform:translateX(-50%) scaleX(.92);
  }
  100%{
    opacity:.9;
    transform:translateX(-50%) scaleX(1.08);
  }
}

@keyframes coreFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-8px);
  }
}

@keyframes holoScan{
  from{
    background-position:0 0;
  }
  to{
    background-position:0 45px;
  }
}

@keyframes energyRing{
  0%,100%{
    opacity:.55;
    transform:translateX(-50%) scaleX(.88);
  }
  50%{
    opacity:1;
    transform:translateX(-50%) scaleX(1.08);

/* =========================================================
   MUTMAIN CANLI KART VERİLERİ
   ========================================================= */

.mutmain-live-data{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,196,0,.16);
  display:flex;
  flex-direction:column;
  gap:5px;
}

.live-data-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  line-height:1.2;
  color:rgba(220,235,255,.78);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.live-dot{
  width:5px;
  height:5px;
  min-width:5px;
  border-radius:50%;
  background:#f5c518;
  box-shadow:
    0 0 5px #f5c518,
    0 0 10px rgba(245,197,24,.7);
}

.orb-card:hover .live-dot{
  background:#39ff88;
  box-shadow:
    0 0 6px #39ff88,
    0 0 14px rgba(57,255,136,.8);
}

.orb-card:hover .mutmain-live-data{
  border-top-color:rgba(245,197,24,.5);
}
  }
}

/* =========================================
   MUTMAIN CANLI VERİ MOTORU
========================================= */

.mutmain-live-data {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid rgba(246,197,21,.22);
  font-size: 10px;
  line-height: 1.7;
  color: #bcd5f5;
  overflow: hidden;
}

.mutmain-data-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 17px;
}

.mutmain-data-line span {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #f6c515;
  box-shadow:
    0 0 5px #f6c515,
    0 0 10px rgba(246,197,21,.55);
  animation: mutmainDataPulse 1.8s infinite ease-in-out;
}

@keyframes mutmainDataPulse {
  0%,100% {
    opacity: .35;
    transform: scale(.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
    box-shadow:
      0 0 7px #f6c515,
      0 0 15px rgba(246,197,21,.9);
  }
}

.data-flash {
  animation: dataFlash .9s ease-out;
}

@keyframes dataFlash {
  0% {
    opacity: .15;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.mutmain-data-connected {
  position: relative;
}

.mutmain-data-connected::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #42f5ae;
  box-shadow:
    0 0 6px #42f5ae,
    0 0 14px rgba(66,245,174,.75);
  animation: systemAlive 2s infinite;
}

@keyframes systemAlive {
  0%,100% {
    opacity: .45;
    transform: scale(.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

/* =========================================
   MUTMAIN HOLOGRAM SPOT IŞIKLARI
========================================= */

.hologram-zone {
  position: relative;
  overflow: visible;
}

.hologram-zone::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 260px;
  height: 700px;
  left: 50%;
  top: -300px;
  transform-origin: center bottom;
  transform: translateX(-50%) perspective(500px) rotateX(25deg);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(20,111,255,.02) 20%,
      rgba(20,111,255,.15) 42%,
      rgba(246,197,21,.14) 50%,
      rgba(20,111,255,.15) 58%,
      rgba(20,111,255,.02) 80%,
      transparent 100%
    );
  filter: blur(8px);
  opacity: .8;
  animation: mutmainSpotMove 10s ease-in-out infinite alternate;
  pointer-events: none;
}

.hologram-zone::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 900px;
  height: 500px;
  left: 50%;
  top: -150px;
  transform: translateX(-50%);
  background:
    radial-gradient(
      ellipse at center,
      rgba(246,197,21,.12) 0%,
      rgba(24,115,255,.08) 28%,
      transparent 68%
    );
  filter: blur(25px);
  animation: mutmainAmbient 6s ease-in-out infinite;
  pointer-events: none;
}

.hologram-zone > * {
  position: relative;
  z-index: 2;
}

@keyframes mutmainSpotMove {
  0% {
    transform:
      translateX(-50%)
      perspective(500px)
      rotateX(25deg)
      rotateZ(-8deg);
    opacity: .45;
  }

  50% {
    opacity: .95;
  }

  100% {
    transform:
      translateX(-50%)
      perspective(500px)
      rotateX(25deg)
      rotateZ(8deg);
    opacity: .7;
  }
}

@keyframes mutmainAmbient {
  0%,100% {
    opacity: .45;
    transform: translateX(-50%) scale(.95);
  }

  50% {
    opacity: .95;
    transform: translateX(-50%) scale(1.08);
  }
}

.hologram-core,
.hologram-name,
.hologram-status {
  animation: mutmainHologramBreath 4s ease-in-out infinite;
}

@keyframes mutmainHologramBreath {
  0%,100% {
    filter:
      drop-shadow(0 0 5px rgba(20,111,255,.35));
  }

  50% {
    filter:
      drop-shadow(0 0 14px rgba(20,111,255,.8))
      drop-shadow(0 0 30px rgba(246,197,21,.25));
  }
}

.mutmain-side-live {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.7;
  color: #8fb8df;
  animation: sideDataIn .6s ease-out;
}

@keyframes sideDataIn {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* =========================================================
   MUTMAIN PREMIUM HOLOGRAM — 28.08.2026
   SADECE GÖRSEL KATMAN
   ========================================================= */

/* MERKEZ ALANI */
.hologram-stage{
  min-height:620px !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  isolation:isolate !important;
}

/* MERKEZDEKİ HOLOGRAM */
.hologram-core{
  width:min(430px,32vw) !important;
  height:min(510px,58vh) !important;

  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:50% / 38% !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(10,80,170,.38),
      rgba(2,10,25,.75) 62%,
      transparent 82%
    ) !important;

  border:
    1px solid rgba(35,135,255,.38) !important;

  box-shadow:
    0 0 25px rgba(0,105,255,.55),
    0 0 60px rgba(0,90,255,.35),
    0 0 110px rgba(245,196,0,.18),
    inset 0 0 45px rgba(0,120,255,.22) !important;

  animation:
    mutmainCoreFloat 6s ease-in-out infinite !important;

  z-index:5 !important;
}

/* RESİM */
.mutmain-image{
  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;

  position:relative !important;
  z-index:4 !important;

  opacity:1 !important;

  filter:
    contrast(1.08)
    saturate(1.12)
    brightness(1.04)
    drop-shadow(0 0 14px rgba(0,125,255,.75))
    drop-shadow(0 0 28px rgba(245,196,0,.32)) !important;

  animation:
    mutmainImageGlow 4s ease-in-out infinite !important;
}

/* FALLBACK GİZLİ */
.image-fallback{
  display:none !important;
}

/* YATAY HOLOGRAM TARAMA */
.hologram-core::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;

  border-radius:inherit;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 5px,
      rgba(80,180,255,.09) 6px,
      transparent 8px
    );

  mix-blend-mode:screen;

  animation:
    mutmainScan 3.8s linear infinite;
}

/* ALT ENERJİ PLATFORMU */
.hologram-core::after{
  content:"";
  position:absolute;

  left:50%;
  bottom:-12px;

  width:135%;
  height:70px;

  transform:translateX(-50%);

  border-radius:50%;

  pointer-events:none;
  z-index:7;

  background:
    radial-gradient(
      ellipse,
      rgba(20,145,255,.75) 0%,
      rgba(20,115,255,.30) 34%,
      rgba(245,196,0,.18) 50%,
      transparent 72%
    );

  filter:blur(8px);

  animation:
    mutmainPlatform 3s ease-in-out infinite alternate;
}

/* =========================================================
   SARI + LACİVERT ENERJİ HALKALARI
   ========================================================= */

.energy-rings{
  pointer-events:none !important;
  z-index:1 !important;

  left:50% !important;
  top:53% !important;

  border-radius:50% !important;

  mix-blend-mode:screen !important;
}

.ring-one{
  width:560px !important;
  height:185px !important;

  border:
    2px solid rgba(15,125,255,.75) !important;

  box-shadow:
    0 0 14px rgba(15,125,255,.65),
    0 0 35px rgba(15,125,255,.35) !important;

  animation:
    premiumRingOne 6s linear infinite !important;
}

.ring-two{
  width:470px !important;
  height:145px !important;

  border:
    2px solid rgba(245,196,0,.80) !important;

  box-shadow:
    0 0 14px rgba(245,196,0,.65),
    0 0 35px rgba(245,196,0,.30) !important;

  animation:
    premiumRingTwo 8s linear infinite !important;
}

.ring-three{
  width:650px !important;
  height:220px !important;

  border:
    1px solid rgba(20,120,255,.45) !important;

  box-shadow:
    0 0 28px rgba(20,120,255,.35) !important;

  animation:
    premiumRingThree 12s linear infinite !important;
}

/* =========================================================
   ÜST KÖŞELER — 4 PREMIUM SPOT IŞIĞI
   Mevcut iki spotlight korunur.
   Pseudo-elementlerle iki ek ışık oluşturulur.
   ========================================================= */

.hologram-stage .spotlight{
  position:absolute !important;
  top:-170px !important;

  width:150px !important;
  height:620px !important;

  opacity:.48 !important;

  filter:
    blur(5px)
    drop-shadow(0 0 18px rgba(20,120,255,.30)) !important;

  transform-origin:top center !important;

  pointer-events:none !important;

  z-index:-1 !important;
}

/* SOL SPOT */
.hologram-stage .spotlight-left{
  left:3% !important;

  background:
    linear-gradient(
      180deg,
      rgba(245,196,0,.48),
      rgba(245,196,0,.20) 28%,
      rgba(15,110,230,.12) 60%,
      transparent 90%
    ) !important;

  animation:
    premiumSpotLeft 10s ease-in-out infinite alternate !important;
}

/* SAĞ SPOT */
.hologram-stage .spotlight-right{
  right:3% !important;

  background:
    linear-gradient(
      180deg,
      rgba(15,110,230,.45),
      rgba(15,110,230,.20) 30%,
      rgba(245,196,0,.12) 62%,
      transparent 90%
    ) !important;

  animation:
    premiumSpotRight 11s ease-in-out infinite alternate !important;
}

/* İKİ EK SPOT */
.hologram-stage::after{
  content:"";

  position:absolute;

  top:-170px;
  left:0;

  width:100%;
  height:650px;

  pointer-events:none;

  z-index:-1;

  background:
    linear-gradient(
      112deg,
      transparent 0%,
      rgba(245,196,0,.34) 8%,
      transparent 20%
    ),

    linear-gradient(
      68deg,
      transparent 0%,
      rgba(20,120,255,.34) 8%,
      transparent 20%
    ),

    linear-gradient(
      78deg,
      transparent 72%,
      rgba(245,196,0,.28) 83%,
      transparent 94%
    ),

    linear-gradient(
      102deg,
      transparent 72%,
      rgba(20,120,255,.30) 84%,
      transparent 95%
    );

  filter:blur(7px);

  opacity:.9;

  animation:
    premiumCornerSpots 12s ease-in-out infinite alternate;
}

/* MERKEZİN ARKASINDAKİ IŞIK */
.hologram-stage::before{
  content:"";

  position:absolute;

  width:720px;
  height:720px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  pointer-events:none;

  z-index:-2;

  background:
    radial-gradient(
      circle,
      rgba(15,110,255,.28) 0%,
      rgba(15,110,255,.15) 30%,
      rgba(245,196,0,.08) 48%,
      transparent 72%
    );

  filter:blur(14px);

  animation:
    premiumCenterGlow 5s ease-in-out infinite alternate;
}

/* DIŞARIDAKİ MUTMAIN YAZISI ARTIK YOK */
.hologram-name{
  display:none !important;
}

/* DURUM YAZISI */
.hologram-status{
  position:relative !important;
  z-index:10 !important;

  margin-top:18px !important;

  font-size:10px !important;
  letter-spacing:2px !important;

  text-shadow:
    0 0 8px rgba(80,180,255,.65) !important;
}

/* =========================================================
   ANİMASYONLAR
   ========================================================= */

@keyframes mutmainCoreFloat{
  0%,100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-8px) scale(1.015);
  }
}

@keyframes mutmainImageGlow{
  0%,100%{
    filter:
      contrast(1.08)
      saturate(1.12)
      brightness(1.02)
      drop-shadow(0 0 14px rgba(0,125,255,.70))
      drop-shadow(0 0 24px rgba(245,196,0,.25));
  }

  50%{
    filter:
      contrast(1.10)
      saturate(1.18)
      brightness(1.08)
      drop-shadow(0 0 22px rgba(0,145,255,.95))
      drop-shadow(0 0 35px rgba(245,196,0,.42));
  }
}

@keyframes mutmainScan{
  0%{
    transform:translateY(-8%);
  }
  100%{
    transform:translateY(8%);
  }
}

@keyframes mutmainPlatform{
  0%{
    opacity:.55;
    transform:translateX(-50%) scaleX(.90);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) scaleX(1.08);
  }
}

@keyframes premiumRingOne{
  from{
    transform:translate(-50%,-50%) rotate(0deg);
  }
  to{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}

@keyframes premiumRingTwo{
  from{
    transform:translate(-50%,-50%) rotate(360deg);
  }
  to{
    transform:translate(-50%,-50%) rotate(0deg);
  }
}

@keyframes premiumRingThree{
  from{
    transform:translate(-50%,-50%) rotate(0deg) scale(1);
  }
  to{
    transform:translate(-50%,-50%) rotate(360deg) scale(1.04);
  }
}

@keyframes premiumSpotLeft{
  0%{
    transform:rotate(24deg) translateX(-25px);
    opacity:.30;
  }
  50%{
    transform:rotate(10deg) translateX(80px);
    opacity:.55;
  }
  100%{
    transform:rotate(28deg) translateX(145px);
    opacity:.35;
  }
}

@keyframes premiumSpotRight{
  0%{
    transform:rotate(-25deg) translateX(25px);
    opacity:.30;
  }
  50%{
    transform:rotate(-10deg) translateX(-80px);
    opacity:.55;
  }
  100%{
    transform:rotate(-28deg) translateX(-145px);
    opacity:.35;
  }
}

@keyframes premiumCornerSpots{
  0%{
    transform:translateX(-35px);
    opacity:.55;
  }
  50%{
    transform:translateX(25px);
    opacity:.90;
  }
  100%{
    transform:translateX(45px);
    opacity:.65;
  }
}

@keyframes premiumCenterGlow{
  0%{
    opacity:.55;
    transform:translate(-50%,-50%) scale(.92);
  }
  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08);
  }
}

/* =========================================================
   DAR EKRANLAR
   ========================================================= */

@media(max-width:1100px){

  .hologram-core{
    width:390px !important;
    height:460px !important;
  }

}

@media(max-width:800px){

  .hologram-core{
    width:320px !important;
    height:390px !important;
  }

  .ring-three{
    width:480px !important;
  }

  .ring-one{
    width:430px !important;
  }

}

/* =========================================================
   MUTMAIN — GERÇEK EKRAN MERKEZİ + 4 KÖŞE SPOT
   28.08.2026
   SADECE CSS — KART / APP / SERVER DOKUNULMAZ
   ========================================================= */

/* ---------------------------------------------------------
   HOLOGRAMI SAYFANIN GERÇEK MERKEZİNE AL
   --------------------------------------------------------- */

.hologram-stage{
  position:relative !important;
  overflow:visible !important;
}

/* Hologramın kendisi ekran merkezinde */
.hologram-stage .hologram-core{
  position:fixed !important;

  left:50vw !important;
  top:245px !important;

  transform:translate(-50%,-50%) !important;

  margin:0 !important;

  z-index:50 !important;
}

/* Hologram halkaları da gerçek ekran merkezinde */
.hologram-stage .energy-rings{
  position:fixed !important;

  left:50vw !important;
  top:245px !important;

  z-index:45 !important;
}

/* Merkez arka ışığı */
.hologram-stage::before{
  position:fixed !important;

  left:50vw !important;
  top:245px !important;

  transform:translate(-50%,-50%) !important;

  z-index:40 !important;

  pointer-events:none !important;
}

/* ---------------------------------------------------------
   ÜST KÖŞELERDE 4 AYRI HAREKETLİ SPOT
   SOL ÜST  : 2 adet
   SAĞ ÜST  : 2 adet
   --------------------------------------------------------- */

/* Mevcut stage spotlarını artık köşe projektörü yap */
.hologram-stage .spotlight{
  position:fixed !important;

  top:-25px !important;

  width:110px !important;
  height:600px !important;

  z-index:35 !important;

  pointer-events:none !important;

  filter:blur(4px) !important;
}

/* SOL ÜST — SARI */
.hologram-stage .spotlight-left{
  left:25px !important;
  right:auto !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,210,30,.62) 0%,
      rgba(245,196,0,.30) 25%,
      rgba(245,196,0,.12) 55%,
      transparent 90%
    ) !important;

  transform-origin:top center !important;

  animation:
    mutmainLeftYellow 11s ease-in-out infinite alternate !important;
}

/* SAĞ ÜST — LACİVERT/MAVİ */
.hologram-stage .spotlight-right{
  right:25px !important;
  left:auto !important;

  background:
    linear-gradient(
      180deg,
      rgba(20,125,255,.62) 0%,
      rgba(15,100,220,.30) 25%,
      rgba(10,80,190,.12) 55%,
      transparent 90%
    ) !important;

  transform-origin:top center !important;

  animation:
    mutmainRightBlue 12s ease-in-out infinite alternate !important;
}

/* ---------------------------------------------------------
   2 EK SPOTU PSEUDO ELEMENTLERLE OLUŞTUR
   --------------------------------------------------------- */

body::before{
  content:"";

  position:fixed;

  top:-20px;
  left:-30px;

  width:100vw;
  height:680px;

  pointer-events:none;

  z-index:30;

  background:

    /* SOL ÜST SARI — 2. SPOT */
    linear-gradient(
      112deg,
      rgba(245,196,0,.46) 0%,
      rgba(245,196,0,.20) 7%,
      transparent 19%
    ),

    /* SOL ÜST LACİVERT — 2. SPOT */
    linear-gradient(
      98deg,
      rgba(15,105,230,.40) 0%,
      rgba(15,105,230,.16) 8%,
      transparent 21%
    );

  filter:blur(3px);

  animation:
    mutmainLeftPair 13s ease-in-out infinite alternate;
}

/* SAĞDA 2 SPOT */
body::after{
  content:"";

  position:fixed;

  top:-20px;
  left:0;

  width:100vw;
  height:680px;

  pointer-events:none;

  z-index:30;

  background:

    /* SAĞ ÜST LACİVERT — 2. SPOT */
    linear-gradient(
      248deg,
      rgba(15,105,230,.46) 0%,
      rgba(15,105,230,.20) 7%,
      transparent 19%
    ),

    /* SAĞ ÜST SARI — 2. SPOT */
    linear-gradient(
      262deg,
      rgba(245,196,0,.40) 0%,
      rgba(245,196,0,.16) 8%,
      transparent 21%
    );

  filter:blur(3px);

  animation:
    mutmainRightPair 14s ease-in-out infinite alternate;
}

/* ---------------------------------------------------------
   YAVAŞ PROJEKTÖR HAREKETLERİ
   --------------------------------------------------------- */

@keyframes mutmainLeftYellow{

  0%{
    transform:rotate(24deg) translateX(0);
    opacity:.42;
  }

  50%{
    transform:rotate(10deg) translateX(70px);
    opacity:.72;
  }

  100%{
    transform:rotate(29deg) translateX(125px);
    opacity:.50;
  }

}

@keyframes mutmainRightBlue{

  0%{
    transform:rotate(-24deg) translateX(0);
    opacity:.42;
  }

  50%{
    transform:rotate(-10deg) translateX(-70px);
    opacity:.72;
  }

  100%{
    transform:rotate(-29deg) translateX(-125px);
    opacity:.50;
  }

}

@keyframes mutmainLeftPair{

  0%{
    transform:translateX(-25px);
    opacity:.55;
  }

  50%{
    transform:translateX(35px);
    opacity:.90;
  }

  100%{
    transform:translateX(65px);
    opacity:.62;
  }

}

@keyframes mutmainRightPair{

  0%{
    transform:translateX(25px);
    opacity:.55;
  }

  50%{
    transform:translateX(-35px);
    opacity:.90;
  }

  100%{
    transform:translateX(-65px);
    opacity:.62;
  }

}

/* ---------------------------------------------------------
   HOLOGRAMIN ÜSTÜNE ÇIKMAMALARI İÇİN
   --------------------------------------------------------- */

.hologram-stage .hologram-core,
.hologram-stage .energy-rings{
  pointer-events:none;
}

/* ---------------------------------------------------------
   KÜÇÜK EKRAN
   --------------------------------------------------------- */

@media(max-width:1100px){

  .hologram-stage .hologram-core{
    top:220px !important;
  }

  .hologram-stage .energy-rings{
    top:220px !important;
  }

}


/* =========================================================
   MUTMAIN — HOLOGRAM SON MERKEZ AYARI
   ========================================================= */

.hologram-stage .hologram-core{
  top:365px !important;
}

.hologram-stage .energy-rings{
  top:365px !important;
}

.hologram-stage::before{
  top:365px !important;
}

/* =========================================================
   FENERBAHÇE LOGOSU — 5 YILDIZ
   ========================================================= */

.fb-five-stars{
  position:absolute;
  z-index:20;

  left:74%;
  top:39%;

  transform:translate(-50%,-50%);

  display:flex;
  gap:3px;

  pointer-events:none;

  color:#f6c515;

  font-size:10px;
  line-height:1;

  text-shadow:
    0 0 4px rgba(246,197,21,.95),
    0 0 9px rgba(246,197,21,.65);

  filter:drop-shadow(0 0 3px rgba(0,80,180,.7));
}

.fb-five-stars span{
  display:block;
  animation:fbStarGlow 2.8s ease-in-out infinite;
}

.fb-five-stars span:nth-child(1){
  transform:translateY(3px);
}

.fb-five-stars span:nth-child(2){
  transform:translateY(1px);
}

.fb-five-stars span:nth-child(3){
  transform:translateY(0);
}

.fb-five-stars span:nth-child(4){
  transform:translateY(1px);
}

.fb-five-stars span:nth-child(5){
  transform:translateY(3px);
}

@keyframes fbStarGlow{

  0%,100%{
    opacity:.72;
    transform:scale(.94);
  }

  50%{
    opacity:1;
    transform:scale(1.08);
  }

}

@media(max-width:1100px){

  .hologram-stage .hologram-core,
  .hologram-stage .energy-rings{
    top:335px !important;
  }

  .hologram-stage::before{
    top:335px !important;
  }

}


/* =========================================================
   MUTMAIN SON TASARIM
   HOLOGRAM + KITT + MATRIX HİZASI
   KART MOTORUNA DOKUNULMAZ
   ========================================================= */

/* HOLOGRAM — MATRIX KARTININ TAM ÜST MERKEZİ */
.hologram-stage .hologram-core{
  position:fixed !important;
  left:50vw !important;
  top:245px !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  z-index:50 !important;
  pointer-events:none !important;
}

.hologram-stage .energy-rings{
  position:fixed !important;
  left:50vw !important;
  top:245px !important;
  z-index:45 !important;
  pointer-events:none !important;
}

.hologram-stage::before{
  position:fixed !important;
  left:50vw !important;
  top:245px !important;
  transform:translate(-50%,-50%) !important;
  z-index:40 !important;
  pointer-events:none !important;
}

/* =========================================================
   KITT — HOLOGRAMIN TAM ALTINDA
   ========================================================= */

.hologram-stage .kitt-holder{
  position:fixed !important;

  left:50vw !important;
  top:430px !important;

  transform:translateX(-50%) !important;

  margin:0 !important;

  z-index:55 !important;

  pointer-events:none !important;
}

/* =========================================================
   MATRIX KARTI SERBEST
   ========================================================= */

#matrixCard{
  position:relative !important;
  z-index:100 !important;
  pointer-events:auto !important;
}

/* Matrix içindeki tüm gerçek kontroller */
#matrixCard button,
#matrixCard .in-btn,
#matrixCard .out-btn{
  position:relative;
  z-index:101;
  pointer-events:auto !important;
}

/* =========================================================
   4 KÖŞE PREMIUM SPOT
   ========================================================= */

.hologram-stage .spotlight{
  position:fixed !important;
  top:-15px !important;

  width:90px !important;
  height:620px !important;

  z-index:30 !important;

  pointer-events:none !important;

  filter:blur(4px) !important;
}

/* SOL SARI */
.hologram-stage .spotlight-left{
  left:35px !important;
  right:auto !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,215,40,.95) 0 12px,
      rgba(255,210,30,.45) 13px,
      transparent 42px
    ),
    linear-gradient(
      112deg,
      rgba(255,210,30,.55),
      rgba(245,196,0,.18) 35%,
      transparent 78%
    ) !important;

  transform-origin:top center !important;

  animation:
    mutmainSpotLeftYellow 12s ease-in-out infinite alternate !important;
}

/* SAĞ MAVİ */
.hologram-stage .spotlight-right{
  right:35px !important;
  left:auto !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(35,145,255,.95) 0 12px,
      rgba(20,120,255,.45) 13px,
      transparent 42px
    ),
    linear-gradient(
      248deg,
      rgba(25,130,255,.55),
      rgba(10,90,210,.18) 35%,
      transparent 78%
    ) !important;

  transform-origin:top center !important;

  animation:
    mutmainSpotRightBlue 13s ease-in-out infinite alternate !important;
}

/* İKİNCİ SPOTLAR */
body::before{
  content:"";

  position:fixed;
  inset:0;

  pointer-events:none;

  z-index:29;

  background:
    radial-gradient(
      circle at 7% 2%,
      rgba(255,210,30,.95) 0 9px,
      rgba(255,210,30,.28) 10px,
      transparent 34px
    ),
    linear-gradient(
      105deg,
      rgba(255,210,30,.34),
      transparent 18%
    ),
    radial-gradient(
      circle at 13% 2%,
      rgba(30,130,255,.90) 0 9px,
      rgba(30,130,255,.24) 10px,
      transparent 34px
    ),
    linear-gradient(
      96deg,
      rgba(25,120,255,.26),
      transparent 24%
    );

  background-repeat:no-repeat;

  animation:
    mutmainCornerLeft 14s ease-in-out infinite alternate;
}

/* SAĞ İKİ SPOT */
body::after{
  content:"";

  position:fixed;
  inset:0;

  pointer-events:none;

  z-index:29;

  background:
    radial-gradient(
      circle at 93% 2%,
      rgba(30,130,255,.95) 0 9px,
      rgba(30,130,255,.28) 10px,
      transparent 34px
    ),
    linear-gradient(
      255deg,
      rgba(25,120,255,.34),
      transparent 18%
    ),
    radial-gradient(
      circle at 87% 2%,
      rgba(255,210,30,.90) 0 9px,
      rgba(255,210,30,.24) 10px,
      transparent 34px
    ),
    linear-gradient(
      264deg,
      rgba(255,210,30,.26),
      transparent 24%
    );

  background-repeat:no-repeat;

  animation:
    mutmainCornerRight 15s ease-in-out infinite alternate;
}

/* =========================================================
   SPOT HAREKETLERİ — YAVAŞ
   ========================================================= */

@keyframes mutmainSpotLeftYellow{
  0%{
    transform:rotate(18deg) translateX(0);
    opacity:.55;
  }

  50%{
    transform:rotate(8deg) translateX(80px);
    opacity:.85;
  }

  100%{
    transform:rotate(25deg) translateX(145px);
    opacity:.60;
  }
}

@keyframes mutmainSpotRightBlue{
  0%{
    transform:rotate(-18deg) translateX(0);
    opacity:.55;
  }

  50%{
    transform:rotate(-8deg) translateX(-80px);
    opacity:.85;
  }

  100%{
    transform:rotate(-25deg) translateX(-145px);
    opacity:.60;
  }
}

@keyframes mutmainCornerLeft{
  0%{
    transform:translateX(-15px);
    opacity:.60;
  }

  100%{
    transform:translateX(65px);
    opacity:.90;
  }
}

@keyframes mutmainCornerRight{
  0%{
    transform:translateX(15px);
    opacity:.60;
  }

  100%{
    transform:translateX(-65px);
    opacity:.90;
  }
}

/* =========================================================
   MATRIX KARTI HOLOGRAMIN ALTINDA TEMİZ GÖRÜNSÜN
   ========================================================= */

#matrixCard{
  isolation:isolate;
}

#matrixCard::before,
#matrixCard::after{
  pointer-events:none !important;
}

@media(max-width:1100px){

  .hologram-stage .hologram-core{
    top:225px !important;
  }

  .hologram-stage .energy-rings{
    top:225px !important;
  }

  .hologram-stage::before{
    top:225px !important;
  }

  .hologram-stage .kitt-holder{
    top:400px !important;
  }

}


/* =========================================================
   MUTMAIN FINAL HOLOGRAM SAHNE
   28.08.2026
   MEVCUT CANLI SISTEME EK OVERRIDE
   ========================================================= */

/* ANA SAHNE */
.hologram-stage{
  position:relative !important;
  width:100% !important;
  min-height:560px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  isolation:isolate !important;
}

/* ESKI MUTMAIN YAZISI VE YAPAY ZEKA YAZISI
   RESMIN ICINDE ZATEN VAR */
.hologram-stage > .hologram-name,
.hologram-stage > .hologram-status{
  display:none !important;
}

/* HOLOGRAM */
.hologram-core{
  width:350px !important;
  height:420px !important;
  position:relative !important;
  z-index:10 !important;
  margin:0 auto !important;
  border-radius:50% 50% 47% 47% !important;
  overflow:hidden !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,105,220,.38) 0%,
      rgba(0,45,110,.20) 48%,
      rgba(0,8,20,.05) 78%,
      transparent 100%
    ) !important;

  box-shadow:
    0 0 22px rgba(0,125,255,.75),
    0 0 55px rgba(0,95,255,.45),
    0 0 100px rgba(245,197,21,.20),
    inset 0 0 40px rgba(0,135,255,.25) !important;

  animation:
    mutmainCoreFloat 5s ease-in-out infinite,
    mutmainCoreGlow 3s ease-in-out infinite alternate !important;
}

/* RESIM */
.mutmain-image{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  position:relative !important;
  z-index:20 !important;

  filter:
    contrast(1.10)
    saturate(1.18)
    drop-shadow(0 0 18px rgba(0,130,255,.75))
    drop-shadow(0 0 28px rgba(245,197,21,.35)) !important;
}

/* HOLOGRAM TARAMA */
.hologram-core::before{
  z-index:30 !important;
  opacity:.55 !important;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(90,180,255,.13) 0px,
      rgba(90,180,255,.13) 1px,
      transparent 2px,
      transparent 6px
    ) !important;
  animation:mutmainScan 3s linear infinite !important;
}

/* ALT ENERJI */
.hologram-core::after{
  z-index:5 !important;
  width:135% !important;
  height:55px !important;
  bottom:-22px !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(245,197,21,.65) 0%,
      rgba(0,125,255,.55) 30%,
      rgba(0,75,255,.20) 50%,
      transparent 73%
    ) !important;

  filter:blur(8px) !important;
  animation:mutmainEnergy 2.8s ease-in-out infinite alternate !important;
}

/* =========================================================
   SARİ + LACİVERT DIS HALKALAR
   ========================================================= */

.hologram-stage::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;

  width:470px !important;
  height:470px !important;

  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;

  border:
    4px solid rgba(0,125,255,.80) !important;

  box-shadow:
    0 0 12px rgba(0,130,255,.95),
    0 0 30px rgba(0,100,255,.65),
    0 0 55px rgba(245,197,21,.45),
    inset 0 0 25px rgba(0,120,255,.40) !important;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(245,197,21,.95) 35deg,
      transparent 75deg,
      rgba(0,125,255,.95) 130deg,
      transparent 180deg,
      rgba(245,197,21,.90) 225deg,
      transparent 270deg,
      rgba(0,125,255,.95) 325deg,
      transparent 360deg
    ) !important;

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 91%,
      #000 92% 97%,
      transparent 98%
    ) !important;

  mask:
    radial-gradient(
      circle,
      transparent 0 91%,
      #000 92% 97%,
      transparent 98%
    ) !important;

  pointer-events:none !important;
  z-index:4 !important;

  animation:
    mutmainRingRotate 7s linear infinite !important;
}

/* IKINCI HALKA */
.hologram-stage::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;

  width:520px !important;
  height:300px !important;

  transform:
    translate(-50%,-50%)
    rotate(-14deg) !important;

  border-radius:50% !important;

  border:
    3px solid rgba(245,197,21,.65) !important;

  box-shadow:
    0 0 16px rgba(245,197,21,.70),
    0 0 35px rgba(0,115,255,.55) !important;

  pointer-events:none !important;
  z-index:3 !important;

  animation:
    mutmainRingOrbit 6s ease-in-out infinite alternate !important;
}

/* =========================================================
   ÜST KÖŞE SPOTLARI
   ========================================================= */

.spotlight{
  position:fixed !important;
  top:-20px !important;
  width:145px !important;
  height:500px !important;

  opacity:.78 !important;
  filter:blur(1px) !important;

  pointer-events:none !important;
  z-index:1 !important;

  transform-origin:top center !important;
}

/* SOL SARI */
.spotlight-left{
  left:3% !important;
  transform:rotate(19deg) !important;

  background:
    linear-gradient(
      to bottom,
      rgba(255,215,35,.90),
      rgba(245,197,21,.48) 28%,
      rgba(245,197,21,.16) 62%,
      transparent 100%
    ) !important;

  clip-path:
    polygon(42% 0,58% 0,100% 100%,0 100%) !important;

  animation:
    spotlightLeft 8s ease-in-out infinite alternate !important;
}

/* SAG MAVI */
.spotlight-right{
  right:3% !important;
  transform:rotate(-19deg) !important;

  background:
    linear-gradient(
      to bottom,
      rgba(20,130,255,.95),
      rgba(0,100,255,.50) 28%,
      rgba(0,90,255,.17) 62%,
      transparent 100%
    ) !important;

  clip-path:
    polygon(42% 0,58% 0,100% 100%,0 100%) !important;

  animation:
    spotlightRight 8s ease-in-out infinite alternate !important;
}

/* EK SARI SPOT */
.hologram-stage .spotlight-left::after{
  content:"" !important;
  position:absolute !important;
  width:100% !important;
  height:100% !important;
  left:95px !important;
  top:0 !important;

  background:
    linear-gradient(
      to bottom,
      rgba(255,210,20,.75),
      rgba(255,210,20,.25) 45%,
      transparent
    ) !important;

  clip-path:
    polygon(44% 0,56% 0,100% 100%,0 100%) !important;
}

/* EK MAVI SPOT */
.hologram-stage .spotlight-right::after{
  content:"" !important;
  position:absolute !important;
  width:100% !important;
  height:100% !important;
  right:95px !important;
  top:0 !important;

  background:
    linear-gradient(
      to bottom,
      rgba(20,130,255,.80),
      rgba(0,100,255,.25) 45%,
      transparent
    ) !important;

  clip-path:
    polygon(44% 0,56% 0,100% 100%,0 100%) !important;
}

/* =========================================================
   KITT HOLOGRAMIN TAM ALTINDA
   ========================================================= */

.kitt-holder{
  position:relative !important;
  z-index:50 !important;
  margin-top:-8px !important;
  width:300px !important;
  height:52px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  transform:none !important;
}

.kitt-housing{
  position:relative !important;
  width:280px !important;
  height:24px !important;

  border-radius:18px !important;

  background:
    linear-gradient(
      180deg,
      #202020,
      #050505 50%,
      #171717
    ) !important;

  border:1px solid rgba(130,130,130,.45) !important;

  box-shadow:
    0 4px 10px rgba(0,0,0,.8),
    0 0 20px rgba(255,0,0,.25) !important;
}

/* KITT KIRMIZI TARAYICI */
.kitt-scanner{
  position:absolute !important;
  top:50% !important;
  left:8% !important;

  width:84% !important;
  height:7px !important;

  transform:translateY(-50%) !important;

  border-radius:10px !important;

  background:
    radial-gradient(
      ellipse,
      rgba(255,35,35,1) 0%,
      rgba(255,0,0,.95) 35%,
      rgba(110,0,0,.45) 65%,
      transparent 75%
    ) !important;

  box-shadow:
    0 0 7px rgba(255,0,0,1),
    0 0 18px rgba(255,0,0,.95),
    0 0 32px rgba(255,0,0,.55) !important;

  animation:
    kittSweep 2.2s ease-in-out infinite alternate !important;
}

/* =========================================================
   ANIMASYONLAR
   ========================================================= */

@keyframes mutmainCoreFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-7px);
  }
}

@keyframes mutmainCoreGlow{
  from{
    filter:drop-shadow(0 0 8px rgba(0,120,255,.35));
  }
  to{
    filter:drop-shadow(0 0 24px rgba(0,150,255,.70));
  }
}

@keyframes mutmainScan{
  from{
    transform:translateY(-10%);
  }
  to{
    transform:translateY(10%);
  }
}

@keyframes mutmainEnergy{
  from{
    opacity:.45;
    transform:translateX(-50%) scaleX(.85);
  }
  to{
    opacity:1;
    transform:translateX(-50%) scaleX(1.10);
  }
}

@keyframes mutmainRingRotate{
  from{
    transform:translate(-50%,-50%) rotate(0deg);
  }
  to{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}

@keyframes mutmainRingOrbit{
  from{
    transform:
      translate(-50%,-50%)
      rotate(-14deg)
      scale(.96);
  }
  to{
    transform:
      translate(-50%,-50%)
      rotate(14deg)
      scale(1.04);
  }
}

@keyframes spotlightLeft{
  from{
    transform:rotate(13deg) scaleY(.96);
    opacity:.62;
  }
  to{
    transform:rotate(27deg) scaleY(1.04);
    opacity:.90;
  }
}

@keyframes spotlightRight{
  from{
    transform:rotate(-13deg) scaleY(.96);
    opacity:.62;
  }
  to{
    transform:rotate(-27deg) scaleY(1.04);
    opacity:.90;
  }
}

@keyframes kittSweep{
  from{
    transform:translateX(-35%) translateY(-50%);
  }
  to{
    transform:translateX(35%) translateY(-50%);
  }
}

/* KARTLARIN ÜZERİNE SPOT IŞIĞI GELEBİLSİN */
.card,
.orbit-card,
.matrix-card{
  position:relative;
}

/* =========================================================
   MOBİL / DAR EKRAN
   ========================================================= */

@media(max-width:1100px){
  .hologram-core{
    width:300px !important;
    height:360px !important;
  }

  .hologram-stage::before{
    width:400px !important;
    height:400px !important;
  }

  .hologram-stage::after{
    width:440px !important;
    height:270px !important;
  }

  .spotlight{
    width:110px !important;
    height:400px !important;
  }
}


/* =========================================================
   MUTMAIN — HOLOGRAM LAYOUT FIX
   Hologram görsel olarak merkezde,
   fakat kart yerleşiminden alan çalmaz.
   ========================================================= */

.hologram-stage{
  min-height:0 !important;
  height:0 !important;
  width:100% !important;

  position:absolute !important;
  left:0 !important;
  top:0 !important;

  overflow:visible !important;
  pointer-events:none !important;

  z-index:20 !important;
}

/* Hologramın kendisi görünür kalır */
.hologram-core{
  pointer-events:none !important;
}

/* Enerji halkaları alan kaplamaz */
.hologram-stage::before,
.hologram-stage::after{
  pointer-events:none !important;
}

/* Spotlar sadece görsel ışık */
.spotlight{
  pointer-events:none !important;
}

/* KITT de yerleşimi bozmasın */
.kitt-holder{
  pointer-events:none !important;
}

/* Hologramın içindeki ekstra yazılar zaten gizli */
.hologram-name,
.hologram-status{
  display:none !important;
}


/* =========================================================
   MUTMAIN — SIDEBAR + KART DÜZENLEME SON DÜZELTME
   Mevcut API / kart / Matrix sistemine dokunmaz.
   ========================================================= */

/* Yan paneller gizlendiğinde ana çalışma alanını tamamen aç */
body:has(.left-sidebar[style*="display: none"]) .command-center{
  margin-left:0 !important;
}

body:has(.right-sidebar[style*="display: none"]) .command-center{
  margin-right:0 !important;
}

body:has(.left-sidebar[style*="display: none"])
     :has(.right-sidebar[style*="display: none"])
     .command-center{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Düzenleme modunda kartlar panellerin üstünde olsun */
body.mutmain-widget-editing .orbit-card,
body.mutmain-widget-editing .system-card,
body.mutmain-widget-editing .card{
  z-index:99990 !important;
}

/* Düzenleme sırasında kartın kaybolmasını engelle */
body.mutmain-widget-editing .orbit-card,
body.mutmain-widget-editing .system-card,
body.mutmain-widget-editing .card{
  visibility:visible !important;
  opacity:1 !important;
}

/* Hologram tamamen görsel katman */
.hologram-stage{
  pointer-events:none !important;
}

/* Hologram kartların yerleşim alanını kaplamasın */
.hologram-stage{
  min-height:0 !important;
  height:0 !important;
}

/* Hologram elemanları kartları engellemesin */
.hologram-stage *,
.hologram-stage::before,
.hologram-stage::after{
  pointer-events:none !important;
}


/* =========================================================
   MUTMAIN FINAL SAHNE DÜZENİ
   ========================================================= */

/* YAN PANELLER TAMAMEN KALDIRILDI */
.left-sidebar,
.right-sidebar{
  display:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  pointer-events:none !important;
}

/* ANA ALAN TAM EKRAN */
.command-center{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* HOLOGRAM KARTLARIN YERLEŞİM ALANINI İŞGAL ETMESİN */
.hologram-stage{
  pointer-events:none !important;
}

/* =========================================================
   GÜÇLÜ SARILACİVERT ÜST SPOTLAR
   ========================================================= */

.hologram-stage .spotlight{
  position:fixed !important;
  top:-80px !important;
  width:170px !important;
  height:650px !important;
  z-index:15 !important;
  pointer-events:none !important;
  opacity:1 !important;
  filter:blur(5px) !important;
  transform-origin:top center !important;
  mix-blend-mode:screen !important;
}

.hologram-stage .spotlight-left{
  left:7vw !important;
  right:auto !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,215,35,.72) 0%,
      rgba(255,205,20,.38) 28%,
      rgba(245,196,0,.18) 58%,
      transparent 100%
    ) !important;

  box-shadow:
    0 0 35px rgba(255,210,20,.55),
    0 0 80px rgba(255,200,0,.30) !important;

  animation:
    mutmainSpotLeft 7s ease-in-out infinite alternate !important;
}

.hologram-stage .spotlight-right{
  right:7vw !important;
  left:auto !important;

  background:
    linear-gradient(
      180deg,
      rgba(35,135,255,.72) 0%,
      rgba(15,105,230,.40) 28%,
      rgba(10,80,200,.18) 58%,
      transparent 100%
    ) !important;

  box-shadow:
    0 0 35px rgba(20,125,255,.60),
    0 0 80px rgba(10,100,255,.32) !important;

  animation:
    mutmainSpotRight 7s ease-in-out infinite alternate !important;
}

@keyframes mutmainSpotLeft{
  0%{
    transform:rotate(24deg);
  }
  50%{
    transform:rotate(8deg);
  }
  100%{
    transform:rotate(30deg);
  }
}

@keyframes mutmainSpotRight{
  0%{
    transform:rotate(-24deg);
  }
  50%{
    transform:rotate(-8deg);
  }
  100%{
    transform:rotate(-30deg);
  }
}

/* =========================================================
   KITT — HOLOGRAMIN TAM ALTINDA
   ========================================================= */

.hologram-stage .kitt-holder{
  position:absolute !important;
  left:50% !important;
  top:calc(50% + 225px) !important;
  transform:translateX(-50%) !important;
  width:300px !important;
  height:42px !important;
  z-index:50 !important;
  pointer-events:none !important;
  display:block !important;
}

.hologram-stage .kitt-housing{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  border-radius:8px !important;
  background:
    linear-gradient(
      180deg,
      rgba(8,12,20,.96),
      rgba(2,5,10,.98)
    ) !important;
  border:1px solid rgba(110,130,155,.55) !important;
  box-shadow:
    0 0 14px rgba(0,0,0,.8),
    inset 0 0 12px rgba(255,255,255,.04) !important;
  overflow:hidden !important;
}

.hologram-stage .kitt-scanner{
  position:absolute !important;
  top:50% !important;
  left:8px !important;
  width:65px !important;
  height:8px !important;
  transform:translateY(-50%) !important;
  border-radius:10px !important;
  background:#ff1717 !important;
  box-shadow:
    0 0 8px #ff1717,
    0 0 20px rgba(255,0,0,.95),
    0 0 42px rgba(255,0,0,.65) !important;
  animation:mutmainKittScan 2.2s ease-in-out infinite alternate !important;
}

@keyframes mutmainKittScan{
  0%{
    left:8px;
    opacity:.65;
    box-shadow:
      0 0 8px #ff1717,
      0 0 18px rgba(255,0,0,.8);
  }
  50%{
    opacity:1;
  }
  100%{
    left:calc(100% - 73px);
    opacity:.8;
    box-shadow:
      0 0 12px #ff1717,
      0 0 28px rgba(255,0,0,1),
      0 0 48px rgba(255,0,0,.7);
  }
}

/* EDIT MODU — KARTLAR HER ŞEYİN ÜSTÜNDE */
body.mutmain-widget-editing .orbit-card,
body.mutmain-widget-editing .system-card,
body.mutmain-widget-editing .card{
  z-index:99990 !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* KARTLARIN ESKİ PANEL SINIRLARINA TAKILMAMASI */
body.mutmain-widget-editing .orbit-column{
  overflow:visible !important;
}

/* ARTIK ESKİ KENARLIK GÖSTERGELERİ YOK */
body.mutmain-widget-editing
.orbit-card,
body.mutmain-widget-editing
.system-card,
body.mutmain-widget-editing
.card{
  outline:none !important;
}


/* =========================================================
   MUTMAIN FENERBAHÇE CANLI MAÇ KARTLARI
   ========================================================= */

.fb-dashboard-card{
  width:min(100%,285px);
  min-height:150px !important;
  overflow:hidden;
  border-color:rgba(246,197,21,.52) !important;
  background:
    linear-gradient(145deg,rgba(5,34,75,.96),rgba(3,18,42,.98)) !important;
  box-shadow:
    inset 0 0 26px rgba(20,105,220,.12),
    0 0 20px rgba(246,197,21,.08) !important;
}

.fb-card-content{
  display:block;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(246,197,21,.24);
  color:#edf5ff;
  font-size:10px;
}

.fb-loading,
.fb-no-data{
  padding:12px 4px;
  color:#91a7c2;
  text-align:center;
}

.fb-status-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#f6c515;
  font-weight:900;
  letter-spacing:.8px;
  font-size:10px;
}

.fb-status-line.is-live{
  color:#ff334f;
}

.fb-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#f6c515;
  box-shadow:0 0 12px rgba(246,197,21,.9);
}

.fb-status-line.is-live .fb-live-dot{
  background:#ff2848;
  box-shadow:0 0 15px #ff2848;
  animation:fbLivePulse 1s ease-in-out infinite;
}

.fb-match-teams{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

.fb-match-teams.compact{
  min-width:310px;
  margin:0;
}

.fb-team{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:0;
  text-align:center;
}

.fb-team b{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}

.fb-team-logo{
  object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.2));
}

.fb-team-logo.small{
  width:40px;
  height:40px;
}

.fb-team-logo.tiny{
  width:22px;
  height:22px;
}

.fb-logo-fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.fb-logo-fallback.small{
  width:40px;
  height:40px;
}

.fb-logo-fallback.tiny{
  width:22px;
  height:22px;
}

.fb-score{
  min-width:50px;
  color:#f6c515;
  font-size:18px;
  font-weight:950;
  text-align:center;
  text-shadow:0 0 12px rgba(246,197,21,.5);
}

.fb-score.live{
  color:#ff334f;
  text-shadow:0 0 15px rgba(255,40,72,.75);
}

.fb-match-meta,
.fb-competition,
.fb-venue{
  margin-top:7px;
  text-align:center;
}

.fb-match-meta{
  color:#dfeaff;
  font-weight:800;
}

.fb-competition{
  color:#84a9d4;
  font-size:9px;
}

.fb-open-hint{
  margin-top:8px;
  color:#f6c515;
  text-align:right;
  font-size:9px;
  font-weight:bold;
}

.fb-mini-heading{
  color:#f6c515;
  font-weight:900;
  letter-spacing:.7px;
}

.fb-fixture-next{
  display:grid;
  grid-template-columns:24px 1fr auto;
  align-items:center;
  gap:7px;
  margin-top:7px;
}

.fb-fixture-next span,
.fb-fixture-next b{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
}

.fb-standing-summary{
  display:grid;
  grid-template-columns:1.4fr .7fr 1fr;
  gap:5px;
  margin-top:10px;
}

.fb-standing-summary span{
  padding:6px 4px;
  border:1px solid rgba(45,120,220,.28);
  border-radius:7px;
  background:rgba(5,25,55,.7);
  text-align:center;
  font-size:8px;
}

.fb-standing-summary b{
  color:#f6c515;
}

.fb-mini-match{
  display:grid;
  grid-template-columns:25px 22px minmax(70px,1fr) auto;
  align-items:center;
  gap:6px;
  padding:5px 0;
  border-bottom:1px solid rgba(100,150,220,.13);
}

.fb-mini-match > span{
  color:#f6c515;
  font-weight:900;
}

.fb-mini-match b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
}

.fb-mini-match em{
  color:#b8c9df;
  font-size:8px;
  font-style:normal;
}

#fb-match-modal{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,4,15,.9);
  backdrop-filter:blur(8px);
}

#fb-match-modal.show{
  display:flex;
}

.fb-modal-box{
  position:relative;
  width:min(1100px,95vw);
  max-height:90vh;
  overflow:auto;
  padding:26px;
  border:1px solid #f6c515;
  border-radius:22px;
  background:
    radial-gradient(circle at top,rgba(15,74,150,.32),transparent 42%),
    linear-gradient(145deg,#071a38,#030d20);
  color:#edf5ff;
  box-shadow:
    0 0 55px rgba(0,100,255,.28),
    0 0 25px rgba(246,197,21,.15);
}

.fb-modal-box > h2{
  margin:0 55px 20px 0;
  color:#f6c515;
  font-size:20px;
}

.fb-modal-close{
  position:absolute;
  right:17px;
  top:12px;
  z-index:3;
  border:0;
  background:transparent;
  color:#f6c515;
  font-size:25px;
  cursor:pointer;
}

.fb-modal-match{
  display:grid;
  grid-template-columns:145px minmax(330px,1fr) 100px;
  align-items:center;
  gap:15px;
  padding:12px 8px;
  border-bottom:1px solid rgba(110,160,225,.16);
}

.fb-modal-match.is-live{
  border:1px solid rgba(255,45,75,.5);
  border-radius:12px;
  background:rgba(255,30,65,.07);
}

.fb-modal-date{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.fb-modal-date b{
  color:#f6c515;
}

.fb-modal-date small,
.fb-modal-state{
  color:#8fa8c7;
  font-size:10px;
}

.fb-section-title{
  margin:24px 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(246,197,21,.3);
  color:#f6c515;
}

.fb-table-wrap{
  overflow-x:auto;
}

.fb-standings-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}

.fb-standings-table th,
.fb-standings-table td{
  padding:9px 7px;
  border-bottom:1px solid rgba(105,150,210,.14);
  text-align:center;
}

.fb-standings-table th{
  color:#89a9ce;
}

.fb-table-team{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:160px;
  text-align:left !important;
}

.fb-standings-table .fener-row{
  color:#fff;
  background:linear-gradient(90deg,rgba(246,197,21,.19),rgba(5,70,155,.28));
}

.fb-standings-table .fener-row td{
  border-top:1px solid rgba(246,197,21,.4);
  border-bottom:1px solid rgba(246,197,21,.4);
}

.fb-detail-match{
  margin:15px 0;
  padding:18px;
  border:1px solid rgba(60,125,215,.3);
  border-radius:16px;
  background:rgba(4,22,49,.72);
}

.fb-detail-match.featured{
  max-width:650px;
  margin:20px auto;
  border-color:rgba(246,197,21,.5);
}

.fb-detail-match h3{
  margin:0 0 12px;
  color:#f6c515;
  text-align:center;
}

.fb-modal-footer{
  margin-top:20px;
  color:#7894b5;
  font-size:10px;
  text-align:right;
}

.fb-modal-empty{
  padding:25px;
  color:#91a7c2;
  text-align:center;
}

@keyframes fbLivePulse{
  0%,100%{transform:scale(.78);opacity:.65}
  50%{transform:scale(1.25);opacity:1}
}

@media (max-width:850px){
  .fb-modal-match{
    grid-template-columns:1fr;
    text-align:center;
  }

  .fb-match-teams.compact{
    min-width:0;
  }
}


/* =========================================================
   MUTMAIN FENERBAHÇE HABER KARTI
   ========================================================= */
.fb-news-card{
  min-height:190px !important;
}

.fb-news-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:7px;
}

.fb-news-item{
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  gap:7px;
  align-items:start;
  padding-bottom:6px;
  border-bottom:1px solid rgba(100,150,220,.13);
}

.fb-news-item:last-child{
  border-bottom:0;
}

.fb-news-dot{
  width:6px;
  height:6px;
  margin-top:4px;
  border-radius:50%;
  background:#f6c515;
  box-shadow:0 0 8px rgba(246,197,21,.7);
}

.fb-news-item b{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:#edf5ff;
  font-size:9px;
  line-height:1.25;
  text-align:left;
}

.fb-news-item small{
  display:block;
  margin-top:2px;
  color:#7fa2cc;
  font-size:8px;
  text-align:left;
}

.fb-news-modal-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.fb-news-modal-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:12px 14px;
  border:1px solid rgba(70,130,210,.22);
  border-radius:12px;
  background:rgba(4,22,49,.72);
}

.fb-news-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:1px solid rgba(246,197,21,.55);
  border-radius:9px;
  color:#f6c515;
  font-weight:900;
}

.fb-news-modal-text a,
.fb-news-modal-text b{
  color:#edf5ff;
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  text-decoration:none;
}

.fb-news-modal-text a:hover{
  color:#f6c515;
  text-decoration:underline;
}

.fb-news-modal-text small{
  display:block;
  margin-top:5px;
  color:#82a4cb;
  font-size:10px;
}

/* =========================================================
   MUTMAIN — REFERANS HOLOGRAM / HUD / 6 PROJEKTÖR / KITT
   29.08.2026 — YALNIZ FRONTEND GÖRSEL KATMANI
   ========================================================= */

/* Önceki pseudo projektörler kapalı: ekranda tam 6 bağımsız ışık kalır. */
body::before,
body::after{
  content:none !important;
  display:none !important;
}

/* 6 GERÇEKÇİ PROJEKTÖR */
.mutmain-projectors{
  position:fixed !important;
  inset:0 !important;
  z-index:7 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  isolation:isolate !important;
}

.mutmain-projectors::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(40,132,255,.08),transparent 43%),
    linear-gradient(90deg,rgba(246,197,21,.025),transparent 38% 62%,rgba(30,112,255,.035));
  filter:blur(14px);
  animation:mutmainProjectorHaze 8s ease-in-out infinite alternate;
}

.mutmain-projector{
  --beam-rgb:246,197,21;
  --head-glow:#f6c515;
  position:absolute;
  top:-13px;
  width:64px;
  height:58px;
  transform-origin:32px 19px;
  will-change:transform;
}

.projector-head{
  position:absolute;
  left:4px;
  top:0;
  width:56px;
  height:38px;
  border:1px solid rgba(180,205,235,.42);
  border-radius:10px 10px 17px 17px;
  background:
    linear-gradient(155deg,#263343 0%,#070c13 45%,#172231 72%,#030507 100%);
  box-shadow:
    0 7px 14px rgba(0,0,0,.85),
    inset 0 2px 4px rgba(255,255,255,.16),
    0 0 13px rgba(var(--beam-rgb),.40);
}

.projector-head::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:25px;
  height:13px;
  transform:translateX(-50%);
  border:2px solid rgba(220,236,255,.38);
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 7%,var(--head-glow) 18%,rgba(var(--beam-rgb),.42) 48%,#020407 72%);
  box-shadow:0 0 11px var(--head-glow),0 0 26px rgba(var(--beam-rgb),.72);
}

.projector-head::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:7px;
  height:2px;
  border-radius:2px;
  background:rgba(220,235,255,.24);
}

.projector-beam{
  position:absolute;
  left:50%;
  top:37px;
  width:clamp(180px,17vw,330px);
  height:92vh;
  transform:translateX(-50%);
  transform-origin:50% 0;
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(var(--beam-rgb),.035) 11%,
      rgba(var(--beam-rgb),.14) 36%,
      rgba(255,255,255,.20) 49%,
      rgba(var(--beam-rgb),.17) 59%,
      rgba(var(--beam-rgb),.045) 88%,
      transparent 100%),
    linear-gradient(180deg,rgba(var(--beam-rgb),.60),rgba(var(--beam-rgb),.16) 44%,transparent 96%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 24%,rgba(0,0,0,.55) 70%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 24%,rgba(0,0,0,.55) 70%,transparent 100%);
  filter:blur(4px) drop-shadow(0 0 20px rgba(var(--beam-rgb),.38));
  mix-blend-mode:screen;
  opacity:.73;
}

.projector-l1{left:3vw;animation:mutmainProjectorL1 11.3s cubic-bezier(.45,.05,.55,.95) -2.4s infinite alternate;}
.projector-l2{left:11vw;--beam-rgb:26,118,255;--head-glow:#2387ff;animation:mutmainProjectorL2 13.7s ease-in-out -7.1s infinite alternate;}
.projector-l3{left:20vw;animation:mutmainProjectorL3 16.1s cubic-bezier(.38,0,.62,1) -4.8s infinite alternate;}
.projector-r1{right:3vw;--beam-rgb:25,122,255;--head-glow:#258cff;animation:mutmainProjectorR1 12.7s ease-in-out -5.2s infinite alternate;}
.projector-r2{right:11vw;animation:mutmainProjectorR2 15.4s cubic-bezier(.42,0,.58,1) -9.3s infinite alternate;}
.projector-r3{right:20vw;--beam-rgb:20,105,235;--head-glow:#1e78ef;animation:mutmainProjectorR3 17.2s ease-in-out -3.7s infinite alternate;}

@keyframes mutmainProjectorL1{0%{transform:rotate(12deg) translateX(-7px)}42%{transform:rotate(25deg) translateX(9px)}100%{transform:rotate(37deg) translateX(22px)}}
@keyframes mutmainProjectorL2{0%{transform:rotate(30deg) translateX(16px)}55%{transform:rotate(17deg) translateX(-8px)}100%{transform:rotate(7deg) translateX(-19px)}}
@keyframes mutmainProjectorL3{0%{transform:rotate(5deg) translateX(-11px)}38%{transform:rotate(13deg) translateX(4px)}100%{transform:rotate(27deg) translateX(21px)}}
@keyframes mutmainProjectorR1{0%{transform:rotate(-11deg) translateX(7px)}48%{transform:rotate(-27deg) translateX(-11px)}100%{transform:rotate(-38deg) translateX(-24px)}}
@keyframes mutmainProjectorR2{0%{transform:rotate(-31deg) translateX(-18px)}61%{transform:rotate(-16deg) translateX(8px)}100%{transform:rotate(-6deg) translateX(20px)}}
@keyframes mutmainProjectorR3{0%{transform:rotate(-4deg) translateX(12px)}35%{transform:rotate(-14deg) translateX(-3px)}100%{transform:rotate(-29deg) translateX(-23px)}}
@keyframes mutmainProjectorHaze{from{opacity:.42;transform:scale(.98)}to{opacity:.88;transform:scale(1.04)}}

/* BÜYÜK, ÇOK KATMANLI HUD */
.mutmain-hud{
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  width:620px !important;
  height:620px !important;
  transform:translate(-50%,-50%) !important;
  z-index:2 !important;
  border-radius:50% !important;
  pointer-events:none !important;
  filter:drop-shadow(0 0 14px rgba(15,108,240,.46));
}

.mutmain-hud::before,
.mutmain-hud::after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,rgba(246,197,21,.72) 0 1.4deg,transparent 1.4deg 7deg),
    radial-gradient(circle,transparent 56%,rgba(15,109,240,.24) 56.5% 57.5%,transparent 58%);
  -webkit-mask:radial-gradient(circle,transparent 0 74%,#000 74.5% 77%,transparent 77.5%);
  mask:radial-gradient(circle,transparent 0 74%,#000 74.5% 77%,transparent 77.5%);
  animation:mutmainHudTicks 44s linear infinite;
}

.mutmain-hud::after{
  inset:0;
  transform:scaleX(-1);
  opacity:.58;
  background:repeating-conic-gradient(from 3deg,rgba(25,124,255,.82) 0 1deg,transparent 1deg 5deg);
  -webkit-mask:radial-gradient(circle,transparent 0 88%,#000 88.5% 90.5%,transparent 91%);
  mask:radial-gradient(circle,transparent 0 88%,#000 88.5% 90.5%,transparent 91%);
  animation-duration:58s;
}

.hud-ring{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.hud-ring-a{
  width:92%;height:92%;
  border:2px solid rgba(32,125,255,.54);
  background:conic-gradient(from 225deg,rgba(246,197,21,.58),transparent 24% 51%,rgba(23,116,255,.64) 72%,transparent 89%);
  -webkit-mask:radial-gradient(circle,transparent 0 96%,#000 96.5% 98.5%,transparent 99%);
  mask:radial-gradient(circle,transparent 0 96%,#000 96.5% 98.5%,transparent 99%);
  animation:mutmainHudClockwise 31s linear infinite;
}

.hud-ring-b{
  width:78%;height:78%;
  border:1px dashed rgba(246,197,21,.67);
  box-shadow:0 0 16px rgba(246,197,21,.23),inset 0 0 24px rgba(17,113,250,.17);
  animation:mutmainHudCounter 38s linear infinite;
}

.hud-ring-c{
  width:66%;height:66%;
  border:4px double rgba(27,123,255,.52);
  border-left-color:rgba(246,197,21,.86);
  border-right-color:rgba(4,61,139,.92);
  box-shadow:0 0 28px rgba(22,120,255,.22);
  animation:mutmainHudTilt 12s ease-in-out infinite alternate;
}

.hud-ring-d{
  width:52%;height:52%;
  border:1px solid rgba(113,190,255,.35);
  background:repeating-conic-gradient(from 0deg,rgba(26,127,255,.42) 0 2deg,transparent 2deg 12deg);
  -webkit-mask:radial-gradient(circle,transparent 0 91%,#000 92% 96%,transparent 97%);
  mask:radial-gradient(circle,transparent 0 91%,#000 92% 96%,transparent 97%);
  animation:mutmainHudClockwise 24s linear infinite;
}

.hud-axis{
  position:absolute;
  left:50%;top:50%;
  opacity:.36;
  background:linear-gradient(90deg,transparent,rgba(30,127,255,.72),rgba(246,197,21,.68),transparent);
}
.hud-axis-x{width:96%;height:1px;transform:translate(-50%,-50%);}
.hud-axis-y{width:1px;height:96%;transform:translate(-50%,-50%);background:linear-gradient(180deg,transparent,rgba(246,197,21,.60),rgba(27,124,255,.68),transparent);}

.hud-node{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:#78caff;box-shadow:0 0 8px #2c94ff,0 0 20px rgba(30,127,255,.75);
  animation:mutmainHudNode 2.8s ease-in-out infinite alternate;
}
.hud-node-1{left:10%;top:43%;}
.hud-node-2{right:12%;top:32%;background:#f6c515;box-shadow:0 0 9px #f6c515,0 0 22px rgba(246,197,21,.72);animation-delay:-.8s;}
.hud-node-3{left:25%;bottom:13%;animation-delay:-1.7s;}
.hud-node-4{right:22%;bottom:17%;background:#f6c515;box-shadow:0 0 9px #f6c515,0 0 22px rgba(246,197,21,.72);animation-delay:-2.2s;}

@keyframes mutmainHudTicks{to{transform:rotate(360deg)}}
@keyframes mutmainHudClockwise{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes mutmainHudCounter{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes mutmainHudTilt{from{transform:translate(-50%,-50%) rotateX(62deg) rotateZ(-7deg)}to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(8deg)}}
@keyframes mutmainHudNode{from{opacity:.28;transform:scale(.65)}to{opacity:1;transform:scale(1.35)}}

/* HOLOGRAM IŞIĞI, SCANLINE VE PARÇACIKLAR */
.hologram-beam{
  left:50% !important;
  top:-260px !important;
  width:460px !important;
  height:520px !important;
  transform:translateX(-50%) !important;
  z-index:5 !important;
  opacity:.82 !important;
  clip-path:polygon(43% 0,57% 0,88% 100%,12% 100%) !important;
  background:linear-gradient(90deg,transparent,rgba(16,106,230,.12),rgba(80,186,255,.34),rgba(246,197,21,.12),rgba(66,171,255,.34),rgba(16,106,230,.12),transparent) !important;
  filter:blur(7px) drop-shadow(0 0 22px rgba(47,147,255,.46)) !important;
  animation:mutmainHoloBeam 4.6s ease-in-out infinite alternate !important;
}

.hologram-core{
  isolation:isolate !important;
  border:1px solid rgba(82,180,255,.16) !important;
  animation:mutmainCoreFloat 5s ease-in-out infinite,mutmainProjectorHit 9.7s ease-in-out -3.2s infinite !important;
}

.hologram-core::before{
  background:
    linear-gradient(180deg,transparent 0 42%,rgba(120,214,255,.38) 49%,rgba(36,138,255,.12) 52%,transparent 59%),
    repeating-linear-gradient(0deg,rgba(72,171,255,.13) 0 1px,transparent 1px 5px) !important;
  background-size:100% 210%,100% 100% !important;
  animation:mutmainReferenceScan 4.2s linear infinite !important;
  mix-blend-mode:screen !important;
}

.hologram-glow{
  inset:3% !important;
  background:radial-gradient(ellipse at 50% 60%,rgba(94,202,255,.38),rgba(18,115,255,.20) 43%,rgba(246,197,21,.09) 62%,transparent 78%) !important;
  filter:blur(15px) !important;
  animation:mutmainHologramAura 3.9s ease-in-out infinite alternate !important;
}

.hologram-particles{
  position:absolute;left:50%;top:0;width:410px;height:460px;
  transform:translate(-50%,-50%);z-index:24;pointer-events:none;
}
.hologram-particles i{
  --x:50%;--rise:210px;--delay:0s;--duration:5s;
  position:absolute;left:var(--x);bottom:4%;width:3px;height:3px;border-radius:50%;
  background:#7bd7ff;box-shadow:0 0 7px #42adff,0 0 13px rgba(57,168,255,.9);
  animation:mutmainParticle var(--duration) linear var(--delay) infinite;
}
.hologram-particles i:nth-child(2n){background:#f6c515;box-shadow:0 0 7px #f6c515,0 0 14px rgba(246,197,21,.8);}
.hologram-particles i:nth-child(1){--x:12%;--rise:190px;--delay:-1.3s;--duration:4.8s}
.hologram-particles i:nth-child(2){--x:22%;--rise:310px;--delay:-3.1s;--duration:6.1s}
.hologram-particles i:nth-child(3){--x:31%;--rise:240px;--delay:-.6s;--duration:5.4s}
.hologram-particles i:nth-child(4){--x:41%;--rise:330px;--delay:-4.2s;--duration:6.7s}
.hologram-particles i:nth-child(5){--x:48%;--rise:230px;--delay:-2.5s;--duration:5.1s}
.hologram-particles i:nth-child(6){--x:57%;--rise:290px;--delay:-1.7s;--duration:6.4s}
.hologram-particles i:nth-child(7){--x:66%;--rise:205px;--delay:-3.7s;--duration:5.6s}
.hologram-particles i:nth-child(8){--x:74%;--rise:335px;--delay:-.9s;--duration:7s}
.hologram-particles i:nth-child(9){--x:82%;--rise:260px;--delay:-4.6s;--duration:6s}
.hologram-particles i:nth-child(10){--x:89%;--rise:185px;--delay:-2.1s;--duration:4.9s}
.hologram-particles i:nth-child(11){--x:37%;--rise:360px;--delay:-5.3s;--duration:7.2s}
.hologram-particles i:nth-child(12){--x:63%;--rise:350px;--delay:-3.4s;--duration:6.8s}

@keyframes mutmainHoloBeam{from{opacity:.42;transform:translateX(-50%) scaleX(.84)}to{opacity:.92;transform:translateX(-50%) scaleX(1.08)}}
@keyframes mutmainReferenceScan{to{background-position:0 210%,0 0}}
@keyframes mutmainHologramAura{from{opacity:.48;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}}
@keyframes mutmainProjectorHit{0%,38%,100%{box-shadow:0 0 28px rgba(15,126,255,.58),0 0 72px rgba(12,91,220,.32),inset 0 0 38px rgba(48,159,255,.20)}48%{box-shadow:0 0 42px rgba(123,209,255,.92),0 0 115px rgba(246,197,21,.36),inset 0 0 55px rgba(105,205,255,.36)}68%{box-shadow:0 0 46px rgba(246,197,21,.48),0 0 105px rgba(28,134,255,.56),inset 0 0 50px rgba(30,145,255,.31)}}
@keyframes mutmainParticle{0%{opacity:0;transform:translate(0,20px) scale(.4)}18%{opacity:.9}75%{opacity:.55}100%{opacity:0;transform:translate(18px,calc(-1 * var(--rise))) scale(1.7)}}

/* DERİNLİKLİ TEKNOLOJİK PLATFORM */
.hologram-platform{
  position:absolute !important;
  left:50% !important;
  top:218px !important;
  width:440px !important;
  height:150px !important;
  transform:translateX(-50%) perspective(680px) rotateX(64deg) !important;
  transform-origin:center !important;
  z-index:8 !important;
  pointer-events:none !important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.88));
}

.platform-deck,
.platform-ring,
.platform-core,
.platform-reflection{
  position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);
}
.platform-deck{
  width:100%;height:100%;
  border:2px solid rgba(76,158,255,.52);
  background:radial-gradient(ellipse,#071d38 0 28%,#04101f 29% 46%,#0a2342 47% 54%,#010409 55% 100%);
  box-shadow:inset 0 0 28px rgba(37,132,255,.32),0 0 12px rgba(32,126,255,.64),0 0 36px rgba(246,197,21,.22);
}
.platform-deck::before,
.platform-deck::after{
  content:"";position:absolute;inset:9%;border-radius:50%;border:2px dashed rgba(246,197,21,.62);
  box-shadow:0 0 11px rgba(246,197,21,.38);animation:mutmainPlatformSpin 20s linear infinite;
}
.platform-deck::after{inset:18%;border-color:rgba(38,142,255,.75);animation-direction:reverse;animation-duration:14s;}
.platform-ring-a{width:86%;height:74%;border:6px double rgba(246,197,21,.72);box-shadow:0 0 17px rgba(246,197,21,.46),inset 0 0 22px rgba(246,197,21,.20);animation:mutmainPlatformPulse 3.8s ease-in-out infinite alternate;}
.platform-ring-b{width:67%;height:57%;border:5px solid rgba(31,137,255,.78);box-shadow:0 0 19px rgba(33,139,255,.68),inset 0 0 25px rgba(25,121,255,.34);}
.platform-ring-c{width:46%;height:39%;border:3px dotted rgba(246,197,21,.86);animation:mutmainPlatformSpin 12s linear infinite reverse;}
.platform-core{width:31%;height:27%;background:radial-gradient(ellipse,#dff7ff 0 4%,#5bc9ff 12%,rgba(30,137,255,.92) 25%,rgba(246,197,21,.40) 43%,rgba(6,29,59,.42) 68%,transparent 75%);box-shadow:0 0 18px #4bbdff,0 0 46px rgba(51,159,255,.80),0 0 70px rgba(246,197,21,.34);animation:mutmainPlatformCore 2.7s ease-in-out infinite alternate;}
.platform-reflection{top:84%;width:72%;height:32%;background:radial-gradient(ellipse,rgba(75,180,255,.30),rgba(246,197,21,.10) 38%,transparent 72%);filter:blur(12px);}

@keyframes mutmainPlatformSpin{to{transform:rotate(360deg)}}
@keyframes mutmainPlatformPulse{from{opacity:.54;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes mutmainPlatformCore{from{opacity:.58;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1.18)}}

/* KLASİK ÇOK SEGMENTLİ KITT SCANNER */
.hologram-stage .kitt-holder{
  top:292px !important;
  width:330px !important;
  height:44px !important;
  z-index:30 !important;
}

.hologram-stage .kitt-housing{
  width:330px !important;
  height:34px !important;
  padding:7px 15px !important;
  border-radius:7px 7px 18px 18px !important;
  border:1px solid rgba(111,132,156,.48) !important;
  background:linear-gradient(180deg,#202832 0%,#05080c 26%,#010203 68%,#151b22 100%) !important;
  box-shadow:inset 0 3px 4px rgba(255,255,255,.09),inset 0 -6px 12px #000,0 8px 18px rgba(0,0,0,.88),0 0 30px rgba(255,0,0,.18) !important;
  overflow:visible !important;
}

.hologram-stage .kitt-housing::before,
.hologram-stage .kitt-housing::after{
  content:"" !important;position:absolute !important;top:7px !important;width:18px !important;height:19px !important;border-radius:3px !important;background:#010101 !important;border:1px solid #252525 !important;box-shadow:inset 0 0 5px #000 !important;
}
.hologram-stage .kitt-housing::before{left:7px !important;}
.hologram-stage .kitt-housing::after{right:7px !important;}

.hologram-stage .kitt-scanner{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:20px !important;
  display:grid !important;
  grid-template-columns:repeat(12,1fr) !important;
  gap:3px !important;
  transform:none !important;
  border-radius:4px !important;
  padding:2px !important;
  background:#090202 !important;
  border:1px solid rgba(110,0,0,.58) !important;
  box-shadow:inset 0 0 9px #000,0 0 11px rgba(255,0,0,.26) !important;
  animation:none !important;
  overflow:visible !important;
}

.kitt-scanner i{
  display:block;
  border-radius:2px;
  background:linear-gradient(180deg,#360000,#100000 47%,#260000);
  border:1px solid rgba(100,0,0,.45);
  box-shadow:inset 0 0 4px #000;
  animation:mutmainKittSegment 2.05s ease-in-out calc(var(--i) * .082s) infinite alternate;
}

.kitt-scanner::after{
  content:"";
  position:absolute;
  top:-7px;
  left:-3px;
  width:55px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,38,38,.55),rgba(255,0,0,.20) 44%,transparent 72%);
  filter:blur(5px);
  animation:mutmainKittGlow 2.05s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes mutmainKittSegment{0%,34%{background:linear-gradient(180deg,#340000,#100000 47%,#280000);box-shadow:inset 0 0 5px #000;opacity:.38}52%,72%{background:linear-gradient(180deg,#fff 0%,#ff4545 15%,#ff0000 52%,#760000 100%);box-shadow:0 0 6px #ff1919,0 0 15px #f00,0 0 28px rgba(255,0,0,.84),inset 0 0 4px #fff;opacity:1}100%{background:#220000;box-shadow:inset 0 0 4px #000;opacity:.3}}
@keyframes mutmainKittGlow{from{transform:translateX(0);opacity:.62}to{transform:translateX(246px);opacity:1}}

body.mutmain-state-listening .kitt-scanner i,
body.mutmain-listening .kitt-scanner i{
  animation-duration:.96s !important;
  animation-timing-function:cubic-bezier(.4,0,.2,1) !important;
}
body.mutmain-state-listening .kitt-scanner::after,
body.mutmain-listening .kitt-scanner::after{animation-duration:.96s !important;filter:blur(4px) brightness(1.35);}

body.mutmain-state-speaking .kitt-scanner i,
body.mutmain-speaking .kitt-scanner i{
  animation:mutmainKittSpeak .46s ease-in-out calc(var(--i) * -.045s) infinite alternate !important;
}
body.mutmain-state-speaking .kitt-scanner::after,
body.mutmain-speaking .kitt-scanner::after{animation:mutmainKittSpeakGlow .72s ease-in-out infinite alternate !important;}
@keyframes mutmainKittSpeak{from{opacity:.35;filter:brightness(.65)}to{opacity:1;filter:brightness(1.8);background:#ff1717;box-shadow:0 0 7px #ff2626,0 0 19px #f00}}
@keyframes mutmainKittSpeakGlow{from{left:16%;opacity:.48;transform:scaleX(.75)}to{left:62%;opacity:1;transform:scaleX(1.35)}}

/* Projektörlerin cam kartlarda bıraktığı kısa sarı/mavi yansıma. */
.orbit-card,
.system-card:not([data-target="matrix"]),
.card:not(.matrix-card){
  overflow:hidden;
}

.orbit-card::after,
.system-card:not([data-target="matrix"])::after,
.card:not(.matrix-card)::after{
  content:"";
  position:absolute;
  z-index:4;
  top:-55%;
  bottom:-55%;
  left:-52%;
  width:32%;
  transform:skewX(-19deg);
  background:linear-gradient(90deg,transparent,rgba(246,197,21,.04),rgba(255,245,175,.24),rgba(65,159,255,.17),transparent);
  filter:blur(3px);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:mutmainCardLightPass 14.3s ease-in-out -8s infinite;
}
.orbit-card:nth-child(2n)::after{animation-duration:17.1s;animation-delay:-12.4s;background:linear-gradient(90deg,transparent,rgba(46,143,255,.05),rgba(126,204,255,.25),rgba(246,197,21,.13),transparent);}
.system-card:not([data-target="matrix"]):nth-child(3n)::after{animation-duration:19.6s;animation-delay:-5.2s;}
@keyframes mutmainCardLightPass{0%,42%{left:-52%;opacity:0}48%{opacity:.78}58%{left:128%;opacity:.48}64%,100%{left:128%;opacity:0}}

/* YATAY RESIZE ENGELLERİ KALDIRILDI; MEVCUT MOTOR KORUNDU. */
body.mutmain-widget-editing .orbit-card,
body.mutmain-widget-editing .system-card,
body.mutmain-widget-editing .card,
[data-mutmain-widget="true"][style*="position: fixed"]{
  min-width:220px !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
body.mutmain-widget-editing .orbit-column,
body.mutmain-widget-editing .bottom-grid{
  overflow:visible !important;
}

/* EFHUB ERİŞİMİ — doğrulanmış Türkçe hedef: efhub.com/tr */
.efhub-card{cursor:pointer;}
.efhub-access{
  position:relative;
  z-index:8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:9px;
  padding:6px 11px;
  border:1px solid rgba(246,197,21,.72);
  border-radius:8px;
  color:#ffe056;
  background:linear-gradient(135deg,rgba(246,197,21,.16),rgba(18,105,225,.24));
  box-shadow:inset 0 0 12px rgba(30,127,255,.12),0 0 12px rgba(246,197,21,.13);
  font-size:9px;
  font-weight:900;
  letter-spacing:.55px;
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.efhub-access:hover,
.efhub-access:focus-visible{transform:translateY(-1px);border-color:#67baff;box-shadow:0 0 18px rgba(47,146,255,.42),0 0 12px rgba(246,197,21,.26);outline:none;}

@media(max-width:1100px){
  .mutmain-hud{width:520px !important;height:520px !important;}
  .hologram-platform{width:390px !important;height:132px !important;}
  .mutmain-projector{transform-origin:32px 19px;}
  .projector-beam{width:190px;height:84vh;}
}

@media(max-width:700px){
  .mutmain-hud{width:420px !important;height:420px !important;}
  .hologram-platform{top:195px !important;width:330px !important;height:112px !important;}
  .hologram-stage .kitt-holder{top:260px !important;width:285px !important;}
  .hologram-stage .kitt-housing{width:285px !important;}
  .projector-l3,.projector-r3{opacity:.62;}
  .projector-beam{width:145px;}
}

@media(prefers-reduced-motion:reduce){
  .mutmain-projector,
  .mutmain-hud *,
  .hologram-particles i,
  .hologram-platform *,
  .kitt-scanner i,
  .kitt-scanner::after{animation-duration:18s !important;}
}

/* =========================================================
   MUTMAIN — STADYUM + KITT ÖN YÜZ + GENİŞ SPOT PAN DÜZELTMESİ
   29.08.2026 — YALNIZ 3 GÖRSEL HATA
   ========================================================= */

/* 1 — GERÇEKÇİ GECE STADYUMU: kartların arkasındaki sabit sahne */
.space-bg{
  z-index:-5 !important;
  background:
    linear-gradient(180deg,rgba(1,8,20,.42) 0%,rgba(2,12,29,.50) 40%,rgba(1,8,19,.76) 100%),
    linear-gradient(90deg,rgba(1,13,34,.28),transparent 37% 63%,rgba(1,13,34,.28)),
    url("/mutmain-stadium-night.png") center center / cover no-repeat fixed !important;
  filter:saturate(.92) contrast(1.08) brightness(.86) !important;
}

.space-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 59%,transparent 0 23%,rgba(1,9,23,.16) 48%,rgba(1,7,18,.52) 100%),
    linear-gradient(90deg,rgba(246,197,21,.08),transparent 30% 70%,rgba(25,113,255,.10));
  mix-blend-mode:screen;
  pointer-events:none;
}

.space-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(1,8,20,.14),transparent 34%,rgba(1,8,20,.38) 100%);
  pointer-events:none;
}

.stars{
  z-index:-4 !important;
  opacity:.10 !important;
  mix-blend-mode:screen !important;
}

/* Cam kartlar okunur kalırken stadyum görünmeye devam eder. */
.orbit-card,
.system-card:not([data-target="matrix"]),
.card:not(.matrix-card){
  -webkit-backdrop-filter:blur(7px) saturate(1.08);
  backdrop-filter:blur(7px) saturate(1.08);
}

/* 2 — KITT: platformun ön yüzünde, hiçbir katmanın arkasında kalmaz. */
.hologram-stage,
.hologram-zone,
.command-center{
  overflow:visible !important;
}

.hologram-stage .hologram-platform{
  z-index:18 !important;
}

.hologram-stage .kitt-holder{
  position:absolute !important;
  left:50% !important;
  top:278px !important;
  width:360px !important;
  height:58px !important;
  margin:0 !important;
  transform:translate3d(-50%,0,0) !important;
  z-index:9997 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  isolation:isolate !important;
  filter:drop-shadow(0 9px 14px rgba(0,0,0,.95)) drop-shadow(0 0 13px rgba(255,0,0,.52)) !important;
}

.hologram-stage .kitt-holder::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-15px !important;
  width:390px !important;
  height:72px !important;
  transform:translateX(-50%) perspective(420px) rotateX(-13deg) !important;
  border-radius:9px 9px 42px 42px !important;
  background:linear-gradient(180deg,rgba(25,31,39,.96),#05070a 43%,#010203 76%,rgba(15,20,26,.98)) !important;
  border:1px solid rgba(130,151,176,.38) !important;
  box-shadow:inset 0 3px 5px rgba(255,255,255,.08),inset 0 -10px 18px #000,0 10px 20px rgba(0,0,0,.88),0 0 28px rgba(255,0,0,.22) !important;
  z-index:-1 !important;
}

.hologram-stage .kitt-housing{
  position:relative !important;
  width:338px !important;
  height:38px !important;
  padding:7px 17px !important;
  overflow:visible !important;
  z-index:2 !important;
  visibility:visible !important;
  opacity:1 !important;
  background:linear-gradient(180deg,#1d232b 0%,#05070a 24%,#010101 70%,#151a20 100%) !important;
  border:1px solid rgba(148,160,176,.44) !important;
  border-radius:7px 7px 19px 19px !important;
  box-shadow:inset 0 3px 4px rgba(255,255,255,.09),inset 0 -7px 12px #000,0 7px 17px rgba(0,0,0,.92),0 0 34px rgba(255,0,0,.32) !important;
}

.hologram-stage .kitt-scanner{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:23px !important;
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  gap:3px !important;
  padding:2px !important;
  transform:none !important;
  overflow:visible !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:4 !important;
  background:#080000 !important;
  border:1px solid rgba(145,0,0,.72) !important;
  border-radius:4px !important;
  box-shadow:inset 0 0 9px #000,0 0 12px rgba(255,0,0,.58),0 0 28px rgba(255,0,0,.32) !important;
}

.hologram-stage .kitt-scanner i{
  min-width:0 !important;
  height:17px !important;
  opacity:.48;
  visibility:visible !important;
  background:linear-gradient(180deg,#500000,#190000 50%,#380000) !important;
  border:1px solid rgba(145,0,0,.58) !important;
  box-shadow:inset 0 0 5px #000 !important;
  animation:mutmainKittFrontSegment 1.82s ease-in-out calc(var(--i) * .075s) infinite alternate !important;
}

.hologram-stage .kitt-scanner::after{
  top:-9px !important;
  width:64px !important;
  height:38px !important;
  opacity:1 !important;
  filter:blur(6px) brightness(1.45) !important;
  animation:mutmainKittFrontGlow 1.82s ease-in-out infinite alternate !important;
}

@keyframes mutmainKittFrontSegment{
  0%,30%{opacity:.38;background:linear-gradient(180deg,#490000,#120000 50%,#310000);box-shadow:inset 0 0 5px #000;}
  48%,69%{opacity:1;background:linear-gradient(180deg,#fff 0%,#ff7272 8%,#ff1010 36%,#c40000 72%,#5d0000 100%);box-shadow:0 0 8px #ff2929,0 0 18px #f00,0 0 34px rgba(255,0,0,.92),inset 0 0 5px #fff;}
  100%{opacity:.42;background:linear-gradient(180deg,#490000,#120000 50%,#310000);box-shadow:inset 0 0 5px #000;}
}

@keyframes mutmainKittFrontGlow{
  0%{left:-5px;transform:scaleX(.82);}
  100%{left:calc(100% - 59px);transform:scaleX(1.08);}
}

body.mutmain-state-listening .kitt-scanner i,
body.mutmain-listening .kitt-scanner i{
  animation-duration:.86s !important;
  filter:brightness(1.42) !important;
}
body.mutmain-state-listening .kitt-scanner::after,
body.mutmain-listening .kitt-scanner::after{animation-duration:.86s !important;filter:blur(5px) brightness(1.8) !important;}

body.mutmain-state-speaking .kitt-scanner i,
body.mutmain-speaking .kitt-scanner i{
  animation:mutmainKittSpeak .42s ease-in-out calc(var(--i) * -.04s) infinite alternate !important;
}

/* 3 — 6 MOVING-HEAD SPOT: dış kenardan ekran merkezine geniş PAN. */
.mutmain-projectors{
  z-index:8 !important;
  overflow:visible !important;
}

.mutmain-projector{
  top:-10px !important;
  width:72px !important;
  height:64px !important;
  transform-origin:36px 22px !important;
  will-change:transform,filter !important;
}

.projector-head{
  left:5px !important;
  width:62px !important;
  height:42px !important;
  z-index:4 !important;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.85)) !important;
}

.projector-beam{
  left:50% !important;
  top:40px !important;
  width:clamp(260px,25vw,470px) !important;
  height:112vh !important;
  transform:translateX(-50%) !important;
  transform-origin:50% 0 !important;
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%) !important;
  opacity:.68 !important;
  filter:blur(5px) drop-shadow(0 0 26px rgba(var(--beam-rgb),.52)) !important;
  background:
    linear-gradient(90deg,transparent 0%,rgba(var(--beam-rgb),.04) 9%,rgba(var(--beam-rgb),.18) 34%,rgba(255,255,255,.25) 49%,rgba(var(--beam-rgb),.20) 61%,rgba(var(--beam-rgb),.05) 91%,transparent 100%),
    linear-gradient(180deg,rgba(var(--beam-rgb),.82),rgba(var(--beam-rgb),.28) 42%,rgba(var(--beam-rgb),.09) 74%,transparent 100%) !important;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.96) 32%,rgba(0,0,0,.68) 72%,transparent 100%) !important;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.96) 32%,rgba(0,0,0,.68) 72%,transparent 100%) !important;
}

.projector-l1{left:1vw !important;animation:mutmainWidePanL1 11.8s cubic-bezier(.45,.05,.55,.95) -2.7s infinite !important;}
.projector-l2{left:10vw !important;animation:mutmainWidePanL2 14.6s ease-in-out -8.1s infinite !important;}
.projector-l3{left:20vw !important;animation:mutmainWidePanL3 17.3s cubic-bezier(.42,0,.58,1) -5.4s infinite !important;}
.projector-r1{right:1vw !important;animation:mutmainWidePanR1 12.9s ease-in-out -6.3s infinite !important;}
.projector-r2{right:10vw !important;animation:mutmainWidePanR2 15.8s cubic-bezier(.4,0,.6,1) -10.2s infinite !important;}
.projector-r3{right:20vw !important;animation:mutmainWidePanR3 18.4s ease-in-out -3.9s infinite !important;}

@keyframes mutmainWidePanL1{0%,100%{transform:rotate(-58deg) translateX(-8px)}48%{transform:rotate(36deg) translateX(15px)}54%{transform:rotate(33deg) translateX(11px)}}
@keyframes mutmainWidePanL2{0%,100%{transform:rotate(-52deg) translateX(-3px)}46%{transform:rotate(31deg) translateX(18px)}53%{transform:rotate(34deg) translateX(13px)}}
@keyframes mutmainWidePanL3{0%,100%{transform:rotate(-61deg) translateX(-11px)}49%{transform:rotate(38deg) translateX(20px)}56%{transform:rotate(35deg) translateX(15px)}}
@keyframes mutmainWidePanR1{0%,100%{transform:rotate(58deg) translateX(8px)}47%{transform:rotate(-36deg) translateX(-15px)}54%{transform:rotate(-33deg) translateX(-11px)}}
@keyframes mutmainWidePanR2{0%,100%{transform:rotate(52deg) translateX(3px)}45%{transform:rotate(-31deg) translateX(-18px)}52%{transform:rotate(-34deg) translateX(-13px)}}
@keyframes mutmainWidePanR3{0%,100%{transform:rotate(61deg) translateX(11px)}50%{transform:rotate(-38deg) translateX(-20px)}57%{transform:rotate(-35deg) translateX(-15px)}}

/* Işıklar merkezde kesiştiğinde hologramın gerçekçe parlaması. */
.hologram-core{
  animation:mutmainCoreFloat 5s ease-in-out infinite,mutmainWidePanHologramHit 11.8s ease-in-out -2.7s infinite !important;
}

@keyframes mutmainWidePanHologramHit{
  0%,36%,100%{filter:brightness(1) saturate(1.08);}
  46%{filter:brightness(1.30) saturate(1.34) drop-shadow(0 0 28px rgba(246,197,21,.55));}
  54%{filter:brightness(1.36) saturate(1.38) drop-shadow(0 0 34px rgba(45,150,255,.76));}
  68%{filter:brightness(1.08) saturate(1.15);}
}

@media(max-width:700px){
  .space-bg{background-position:center top !important;background-size:auto 100vh !important;}
  .hologram-stage .kitt-holder{top:250px !important;width:300px !important;}
  .hologram-stage .kitt-holder::before{width:325px !important;}
  .hologram-stage .kitt-housing{width:292px !important;padding-left:14px !important;padding-right:14px !important;}
  .projector-beam{width:210px !important;height:105vh !important;}
}

/* =========================================================
   MUTMAIN — SOSYAL MERKEZ + RESMİ CANLI TV MERKEZİ
   29.08.2026 — YALNIZ İKİ MEVCUT KART
   ========================================================= */

.mutmain-hub-window{
  position:fixed;
  left:50%;
  top:50%;
  z-index:1000005;
  display:none;
  width:min(1120px,94vw);
  height:min(760px,88vh);
  min-width:720px;
  min-height:470px;
  transform:translate(-50%,-50%);
  overflow:hidden;
  color:#edf7ff;
  border:1px solid rgba(246,197,21,.78);
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(3,17,39,.94),rgba(4,29,62,.91) 55%,rgba(3,17,39,.96)),
    radial-gradient(circle at 78% 10%,rgba(20,109,255,.18),transparent 38%);
  -webkit-backdrop-filter:blur(20px) saturate(1.16);
  backdrop-filter:blur(20px) saturate(1.16);
  box-shadow:
    0 28px 90px rgba(0,0,0,.72),
    0 0 54px rgba(20,100,255,.27),
    0 0 24px rgba(246,197,21,.13),
    inset 0 1px 0 rgba(255,255,255,.08);
  isolation:isolate;
}

.mutmain-hub-window.show{
  display:flex;
  flex-direction:column;
  animation:mutmainHubOpen .24s ease-out both;
}

@keyframes mutmainHubOpen{
  from{opacity:0;filter:blur(5px) brightness(.72);}
  to{opacity:1;filter:blur(0) brightness(1);}
}

.mutmain-hub-head{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:18px;
  min-height:82px;
  padding:14px 18px 13px 22px;
  cursor:move;
  touch-action:none;
  user-select:none;
  border-bottom:1px solid rgba(246,197,21,.28);
  background:
    linear-gradient(90deg,rgba(246,197,21,.09),transparent 33%,rgba(26,121,255,.12)),
    rgba(2,14,32,.74);
  box-shadow:0 7px 24px rgba(0,0,0,.24);
}

.mutmain-hub-head::after{
  content:"";
  position:absolute;
  left:22px;
  right:74px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,#f6c515,transparent 38%,#1987ff,transparent);
  box-shadow:0 0 10px rgba(246,197,21,.55);
}

.mutmain-hub-head h2{
  margin:2px 0 0;
  color:#f7d33c;
  font-size:clamp(19px,2vw,28px);
  line-height:1.15;
  letter-spacing:.04em;
  text-shadow:0 0 18px rgba(246,197,21,.25);
}

.mutmain-hub-kicker{
  display:block;
  color:#63b7ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.23em;
}

.mutmain-hub-head-note{
  color:#7395bc;
  font-size:10px;
  letter-spacing:.1em;
}

.mutmain-hub-close{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(246,197,21,.58);
  border-radius:12px;
  background:rgba(2,17,38,.90);
  color:#f6c515;
  font-size:19px;
  cursor:pointer;
  box-shadow:0 0 16px rgba(246,197,21,.13);
}

.mutmain-hub-close:hover{
  color:#fff;
  background:rgba(246,197,21,.17);
  box-shadow:0 0 22px rgba(246,197,21,.31);
}

.mutmain-hub-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:20px;
  scrollbar-color:#1b70c8 rgba(2,15,34,.7);
}

.mutmain-social-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}

.mutmain-social-service{
  position:relative;
  min-height:126px;
  display:grid;
  grid-template-columns:56px 1fr;
  grid-template-rows:auto auto 1fr;
  align-items:center;
  gap:1px 13px;
  padding:16px;
  overflow:hidden;
  color:#eef7ff;
  text-decoration:none;
  border:1px solid rgba(69,141,222,.48);
  border-radius:17px;
  background:
    linear-gradient(135deg,rgba(7,34,68,.92),rgba(3,19,43,.92)),
    radial-gradient(circle at 15% 20%,rgba(246,197,21,.14),transparent 36%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.22);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.mutmain-social-service::after{
  content:"";
  position:absolute;
  left:-65%;
  top:0;
  width:42%;
  height:100%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  transition:left .45s ease;
}

.mutmain-social-service:hover{
  transform:translateY(-3px);
  border-color:#f6c515;
  box-shadow:0 15px 34px rgba(0,0,0,.33),0 0 21px rgba(246,197,21,.13);
}

.mutmain-social-service:hover::after{left:125%;}

.mutmain-social-icon{
  grid-row:1/4;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  font-size:27px;
  background:linear-gradient(145deg,rgba(246,197,21,.18),rgba(20,104,235,.30));
  border:1px solid rgba(246,197,21,.32);
  box-shadow:0 0 22px rgba(21,116,255,.18);
}

.mutmain-social-service strong{
  color:#fff;
  font-size:16px;
}

.mutmain-social-service small{
  color:#83a7ce;
  font-size:10px;
}

.mutmain-social-service b{
  align-self:end;
  color:#f6c515;
  font-size:9px;
  letter-spacing:.09em;
}

.mutmain-phone-bridge{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 190px;
  align-items:center;
  gap:20px;
  margin-top:18px;
  padding:20px;
  border:1px solid rgba(246,197,21,.36);
  border-radius:19px;
  background:
    linear-gradient(90deg,rgba(246,197,21,.07),transparent 38%,rgba(18,110,255,.10)),
    rgba(2,18,40,.76);
}

.mutmain-phone-visual{
  width:90px;
  height:144px;
  display:grid;
  place-items:center;
  margin:auto;
  font-size:48px;
  border:2px solid rgba(87,163,255,.68);
  border-radius:20px;
  background:linear-gradient(160deg,rgba(8,45,88,.82),rgba(1,10,24,.96));
  box-shadow:inset 0 0 24px rgba(16,105,255,.20),0 0 26px rgba(17,105,255,.18);
}

.mutmain-waiting-badge{
  display:inline-flex;
  padding:5px 9px;
  color:#f6c515;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  border:1px solid rgba(246,197,21,.52);
  border-radius:99px;
  background:rgba(246,197,21,.08);
}

.mutmain-phone-copy h3{
  margin:9px 0 5px;
  color:#fff;
  font-size:21px;
}

.mutmain-phone-copy p{
  margin:0;
  color:#91acd0;
  font-size:12px;
  line-height:1.45;
}

.mutmain-phone-slots{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 12px;
  margin:12px 0 10px;
}

.mutmain-phone-slots span{
  padding:7px 9px;
  color:#a8bed8;
  font-size:10px;
  border:1px solid rgba(78,132,194,.22);
  border-radius:8px;
  background:rgba(3,16,34,.55);
}

.mutmain-phone-copy .mutmain-privacy-note{
  color:#647f9f;
  font-size:9px;
}

.mutmain-phone-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mutmain-hub-link,
.mutmain-tv-official{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  color:#f6c515;
  text-decoration:none;
  text-align:center;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  border:1px solid rgba(246,197,21,.70);
  border-radius:10px;
  background:rgba(3,22,49,.90);
  box-shadow:0 0 14px rgba(246,197,21,.10);
}

.mutmain-hub-link:hover,
.mutmain-tv-official:hover{
  color:#fff;
  background:rgba(246,197,21,.16);
  box-shadow:0 0 20px rgba(246,197,21,.24);
}

.mutmain-hub-link.secondary{
  color:#75baff;
  border-color:rgba(74,151,240,.62);
}

.mutmain-tv-layout{
  height:100%;
  min-height:520px;
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:18px;
}

.mutmain-tv-list{
  min-height:0;
  overflow-y:auto;
  padding-right:7px;
}

.mutmain-tv-group + .mutmain-tv-group{margin-top:18px;}

.mutmain-tv-group h3{
  margin:0 0 7px;
  color:#f6c515;
  font-size:9px;
  letter-spacing:.18em;
}

.mutmain-tv-channel{
  width:100%;
  min-height:60px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin-bottom:7px;
  padding:9px 11px;
  text-align:left;
  cursor:pointer;
  color:#e9f5ff;
  border:1px solid rgba(59,123,196,.30);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(7,33,67,.86),rgba(3,18,41,.86));
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}

.mutmain-tv-channel:hover,
.mutmain-tv-channel.active{
  transform:translateX(3px);
  border-color:rgba(246,197,21,.75);
  background:linear-gradient(90deg,rgba(246,197,21,.13),rgba(7,37,75,.91));
  box-shadow:0 0 18px rgba(246,197,21,.09);
}

.mutmain-tv-channel > span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  font-size:18px;
  border-radius:9px;
  background:rgba(18,87,160,.26);
}

.mutmain-tv-channel div{min-width:0;}

.mutmain-tv-channel strong{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mutmain-tv-channel small{
  display:block;
  overflow:hidden;
  margin-top:3px;
  color:#7596bb;
  font-size:8px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mutmain-tv-view{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mutmain-tv-screen{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(81,151,229,.50);
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 42%,rgba(18,86,158,.22),transparent 52%),
    #010713;
  box-shadow:inset 0 0 70px rgba(0,0,0,.72),0 15px 38px rgba(0,0,0,.37);
}

.mutmain-tv-screen iframe{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

.mutmain-tv-welcome,
.mutmain-tv-external,
.mutmain-tv-state{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:28px;
  text-align:center;
  background:radial-gradient(circle at 50% 38%,rgba(17,92,169,.25),rgba(1,7,17,.92) 68%);
}

.mutmain-tv-welcome > span,
.mutmain-tv-external-icon{
  font-size:50px;
  filter:drop-shadow(0 0 15px rgba(246,197,21,.25));
}

.mutmain-tv-welcome h3,
.mutmain-tv-external h3,
.mutmain-tv-state h3{
  margin:0;
  color:#f6c515;
  font-size:23px;
}

.mutmain-tv-welcome p,
.mutmain-tv-external p,
.mutmain-tv-state p{
  max-width:560px;
  margin:0;
  color:#91add0;
  font-size:12px;
  line-height:1.55;
}

.mutmain-tv-state[hidden]{display:none;}

.mutmain-tv-state.error{
  background:radial-gradient(circle at 50% 38%,rgba(129,83,9,.20),rgba(1,7,17,.96) 69%);
}

.mutmain-tv-state.error > span{font-size:34px;}

.mutmain-tv-loader{
  width:36px;
  height:36px;
  border:3px solid rgba(89,157,233,.22);
  border-top-color:#f6c515;
  border-right-color:#1785ff;
  border-radius:50%;
  animation:mutmainTvLoader .8s linear infinite;
}

@keyframes mutmainTvLoader{to{transform:rotate(360deg);}}

.mutmain-tv-drm-note{
  max-width:560px;
  padding:10px 13px;
  color:#d6e5f5 !important;
  border:1px solid rgba(246,197,21,.25);
  border-radius:10px;
  background:rgba(246,197,21,.06);
}

.mutmain-tv-official{
  margin-top:7px;
  min-width:250px;
}

.mutmain-tv-now{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 13px;
  border:1px solid rgba(75,139,211,.28);
  border-radius:12px;
  background:rgba(3,20,43,.72);
}

.mutmain-tv-now > div{min-width:0;}

.mutmain-tv-now strong{
  display:block;
  color:#fff;
  font-size:13px;
}

.mutmain-tv-now span{
  display:block;
  margin-top:3px;
  color:#7598bd;
  font-size:9px;
}

.mutmain-tv-now .mutmain-hub-link{
  flex:0 0 auto;
}

@media(max-width:820px){
  .mutmain-hub-window{
    width:96vw;
    height:92vh;
    min-width:0;
    min-height:0;
    border-radius:16px;
  }

  .mutmain-hub-head{
    grid-template-columns:1fr auto;
    min-height:70px;
    gap:10px;
    padding:11px 12px 10px 15px;
  }

  .mutmain-hub-head-note{display:none;}
  .mutmain-hub-head h2{font-size:17px;}
  .mutmain-hub-body{padding:12px;}

  .mutmain-social-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mutmain-social-service{min-height:104px;padding:12px;grid-template-columns:44px 1fr;}
  .mutmain-social-icon{width:42px;height:42px;font-size:21px;}

  .mutmain-phone-bridge{
    grid-template-columns:72px 1fr;
    gap:13px;
    padding:14px;
  }

  .mutmain-phone-visual{width:62px;height:105px;font-size:34px;}
  .mutmain-phone-links{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;}
  .mutmain-phone-slots{grid-template-columns:1fr;}

  .mutmain-tv-layout{
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:210px minmax(0,1fr);
  }

  .mutmain-tv-list{display:grid;grid-auto-flow:column;grid-auto-columns:230px;gap:10px;overflow:auto;}
  .mutmain-tv-group + .mutmain-tv-group{margin-top:0;}
  .mutmain-tv-channel{min-height:54px;}
  .mutmain-tv-screen{max-height:46vh;}
}

@media(max-width:520px){
  .mutmain-social-grid{grid-template-columns:1fr;}
  .mutmain-social-service{min-height:92px;}
  .mutmain-phone-bridge{grid-template-columns:1fr;text-align:center;}
  .mutmain-phone-copy{display:flex;flex-direction:column;align-items:center;}
  .mutmain-phone-visual{display:none;}
  .mutmain-phone-links{grid-template-columns:1fr;}
  .mutmain-tv-layout{grid-template-rows:180px minmax(0,1fr);}
  .mutmain-tv-list{grid-auto-columns:205px;}
  .mutmain-tv-now{align-items:stretch;flex-direction:column;}
  .mutmain-tv-now .mutmain-hub-link{width:100%;}
}

/* =========================================================
   MUTMAIN — STADYUM KATMANI GÖRÜNÜRLÜK DÜZELTMESİ
   29.08.2026 — YALNIZ ARKA PLAN SIRALAMASI
   ========================================================= */

html{
  background:#020b18 !important;
}

body{
  position:relative !important;
  isolation:isolate !important;
  background:transparent !important;
}

.space-bg{
  z-index:0 !important;
  visibility:visible !important;
  opacity:1 !important;
}

.stars{
  z-index:1 !important;
}

.command-center{
  z-index:2 !important;
}

/* =========================================================
   MUTMAIN CANLI MATRIX 3x3
   ========================================================= */

#matrix-live-panel{
  width:min(1000px,100%);
}

#matrix-live-panel .matrix-title{
  position:relative;
}

.matrix-online{
  display:inline-block;
  margin-left:12px;
  padding:4px 9px;
  border:1px solid rgba(130,150,170,.45);
  border-radius:12px;
  color:#9eb1c5;
  font-size:9px;
}

.matrix-online.online{
  color:#72ff9d;
  border-color:rgba(50,255,120,.55);
  box-shadow:0 0 12px rgba(50,255,120,.18);
}

.matrix-online.offline{
  color:#ff6b6b;
  border-color:rgba(255,70,70,.55);
}

#matrix-live-panel .matrix-content{
  grid-template-columns:1fr 1.65fr 1fr;
  gap:18px;
}

#matrix-live-panel .matrix-lines svg{
  display:block;
  width:100%;
  height:210px;
  overflow:visible;
}

#matrix-live-panel .matrix-route{
  fill:none;
  stroke:#31465b;
  stroke-width:3;
  opacity:.42;
  cursor:pointer;
  pointer-events:stroke;
  transition:.25s;
}

#matrix-live-panel .matrix-route:hover{
  stroke:#ffe16a;
  stroke-width:5;
  opacity:1;
  filter:drop-shadow(0 0 7px rgba(245,196,0,.8));
}

#matrix-live-panel .matrix-route.active{
  stroke:#35ff78;
  stroke-width:5;
  opacity:1;
  stroke-dasharray:12 8;
  filter:
    drop-shadow(0 0 5px rgba(53,255,120,.95))
    drop-shadow(0 0 12px rgba(53,255,120,.65));
  animation:matrixEnergyFlow .65s linear infinite;
}

#matrix-live-panel .matrix-route.pending{
  stroke:#ffe16a;
  stroke-width:5;
  opacity:1;
  stroke-dasharray:8 7;
  animation:matrixEnergyFlow .45s linear infinite;
}

#matrix-live-panel .matrix-side button.matrix-active{
  color:#8dffac;
  border-color:#35ff78;
  box-shadow:0 0 12px rgba(53,255,120,.30);
}

#matrix-live-panel .matrix-status{
  min-height:18px;
  margin-top:10px;
  text-align:center;
  color:#9eb1c5;
  font-size:10px;
}

#matrix-live-panel .matrix-status.ok{
  color:#72ff9d;
}

#matrix-live-panel .matrix-status.error{
  color:#ff7373;
}

@keyframes matrixEnergyFlow{
  to{stroke-dashoffset:-40;}
}

/* MATRIX GENIS TIKLAMA ALANI */
#matrix-live-panel .matrix-route{
  pointer-events:stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#matrix-live-panel .matrix-lines{
  position:relative;
  z-index:20;
  pointer-events:auto;
}

#matrix-live-panel .matrix-lines svg{
  position:relative;
  z-index:21;
  pointer-events:auto;
}

#matrix-live-panel .matrix-route{
  vector-effect:non-scaling-stroke;
  stroke-width:10;
}

#matrix-live-panel .matrix-route.active{
  stroke-width:10;
}

#matrix-live-panel .matrix-route:hover,
#matrix-live-panel .matrix-route.pending{
  stroke-width:12;
}

/* MATRIX SECILI GIRIS */
#matrix-live-panel [data-matrix-input].matrix-selected{
  color:#ffe16a !important;
  border-color:#ffe16a !important;
  box-shadow:
    0 0 8px rgba(255,225,106,.8),
    0 0 18px rgba(255,225,106,.35) !important;
}

/* =========================================================
   MUTMAIN LACIVERT FENERBAHCE SAAT + AYLIK TAKVIM
   ========================================================= */

.mutmain-calendar-card{
  width:min(620px,100%);
  min-height:430px;
  padding:18px !important;
  display:block !important;
  overflow:hidden;
  position:relative;
  color:#f7d84a;
  border:1px solid rgba(244,196,0,.65) !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(20,92,180,.24),transparent 45%),
    linear-gradient(145deg,rgba(2,18,48,.97),rgba(3,35,79,.95) 55%,rgba(1,12,34,.98)) !important;
  box-shadow:
    inset 0 0 30px rgba(20,100,210,.20),
    0 0 22px rgba(244,196,0,.10);
}

.mutmain-calendar-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.035) 45%,transparent 65%);
}

.mutmain-calendar-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(244,196,0,.25);
}

.mutmain-calendar-clock{
  display:flex;
  flex-direction:column;
}

#mutmain-calendar-time{
  font-size:38px;
  line-height:1;
  font-weight:900;
  letter-spacing:4px;
  color:#f7d84a;
  text-shadow:0 0 14px rgba(247,216,74,.42);
  font-variant-numeric:tabular-nums;
}

#mutmain-calendar-date{
  margin-top:7px;
  color:#9fc9ff;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.mutmain-calendar-fb{
  color:#f7d84a;
  border:1px solid rgba(244,196,0,.42);
  background:rgba(244,196,0,.07);
  padding:7px 10px;
  border-radius:10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  white-space:nowrap;
}

.mutmain-calendar-nav{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:8px;
  margin:13px 0 10px;
}

.mutmain-calendar-nav strong{
  text-align:center;
  color:#fff;
  font-size:15px;
  letter-spacing:2px;
}

.mutmain-calendar-nav button{
  width:40px;
  height:34px;
  border-radius:9px;
  border:1px solid rgba(73,145,230,.45);
  background:rgba(7,48,102,.72);
  color:#f7d84a;
  font-size:25px;
  line-height:25px;
  cursor:pointer;
}

.mutmain-calendar-weekdays,
.mutmain-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
}

.mutmain-calendar-weekdays{
  margin-bottom:5px;
}

.mutmain-calendar-weekdays span{
  text-align:center;
  color:#70a9e8;
  font-size:9px;
  font-weight:800;
  letter-spacing:.7px;
}

.mutmain-calendar-day{
  min-height:48px;
  position:relative;
  padding:5px;
  border:1px solid rgba(80,140,205,.16);
  border-radius:8px;
  background:rgba(3,24,55,.55);
  color:#dcecff;
  font-size:11px;
}

.mutmain-calendar-day.empty{
  opacity:.18;
}

.mutmain-calendar-day.today{
  border-color:#f7d84a;
  box-shadow:inset 0 0 14px rgba(247,216,74,.14);
}

.mutmain-calendar-day.today .calendar-day-number{
  color:#f7d84a;
}

.calendar-day-number{
  display:block;
  font-size:11px;
  font-weight:900;
}

.mutmain-calendar-day.has-fb-match{
  cursor:pointer;
  border-color:rgba(247,216,74,.68);
  background:
    linear-gradient(145deg,rgba(6,48,108,.90),rgba(52,48,10,.45));
}

.calendar-fb-match{
  display:block;
  margin-top:3px;
  color:#f7d84a;
  font-size:8px;
  font-weight:900;
  line-height:1.15;
  overflow:hidden;
}

.calendar-fb-time{
  display:block;
  color:#fff;
  font-size:8px;
  margin-top:2px;
}

.mutmain-calendar-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(80,140,205,.18);
  color:#7faee4;
  font-size:8px;
  letter-spacing:.7px;
}

@media(max-width:700px){
  #mutmain-calendar-time{
    font-size:30px;
  }

  .mutmain-calendar-fb{
    display:none;
  }

  .mutmain-calendar-day{
    min-height:42px;
    padding:4px;
  }
}

/* =========================================================
   MUTMAIN VOICE DASHBOARD EFFECTS
========================================================= */
.mutmain-voice-status-text{
  display:inline-block;
  max-width:min(78vw,760px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
}

body.mutmain-state-thinking .hologram-status{
  color:#ffe44d !important;
  text-shadow:0 0 8px rgba(255,228,77,.9),0 0 18px rgba(26,102,255,.85);
}

body.mutmain-state-thinking .kitt-scanner i{
  animation-duration:.62s !important;
  filter:hue-rotate(170deg) brightness(1.65) saturate(1.4) !important;
}

body.mutmain-state-thinking .kitt-scanner::after{
  animation-duration:.62s !important;
  filter:hue-rotate(170deg) blur(5px) brightness(1.8) !important;
}

.mutmain-voice-focus{
  z-index:20 !important;
  animation:mutmainVoiceCardFocus .82s ease-in-out infinite alternate !important;
}

@keyframes mutmainVoiceCardFocus{
  from{
    outline:1px solid rgba(255,226,45,.58);
    box-shadow:0 0 12px rgba(255,220,0,.42),0 0 24px rgba(0,70,255,.28);
  }
  to{
    outline:2px solid rgba(60,126,255,.96);
    box-shadow:0 0 22px rgba(255,220,0,.88),0 0 48px rgba(0,70,255,.72);
  }
}