/* Speakymobil Logo + Üye Haritası V8
   Kullanıcının gönderdiği video referansına göre hazırlanmıştır. */

/* =========================
   ÜST LOGO / HEADER
   ========================= */
.header>.container-custom{
  max-width:1340px!important;
}
.header-inner{
  padding:9px 14px!important;
}
.header-grid{
  grid-template-columns:minmax(285px,330px) minmax(420px,1fr) auto!important;
  gap:14px!important;
}
.header .logo{
  min-height:68px!important;
  padding:8px 14px!important;
  gap:13px!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,rgba(124,58,237,.09),rgba(236,72,153,.035))!important;
  border:1px solid rgba(124,58,237,.18)!important;
  overflow:hidden!important;
}
.header .logo::after{
  content:'';
  position:absolute;
  width:120px;
  height:120px;
  left:-55px;
  top:-55px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.16),transparent 70%);
  pointer-events:none;
}
.header .sm-brand-mark{
  position:relative!important;
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  max-width:58px!important;
  max-height:58px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  animation:smBrandFloat 4.8s ease-in-out infinite!important;
  filter:drop-shadow(0 0 12px rgba(168,85,247,.28));
}
.sm-brand-orbit{
  position:absolute;
  display:block;
  border-radius:999px;
  border:2px solid transparent;
  pointer-events:none;
}
.sm-brand-orbit-a{
  width:46px;
  height:24px;
  left:4px;
  top:17px;
  transform:rotate(42deg);
  border-top-color:#a855f7;
  border-bottom-color:#ec4899;
  box-shadow:0 0 10px rgba(168,85,247,.30);
}
.sm-brand-orbit-b{
  width:37px;
  height:18px;
  left:13px;
  top:20px;
  transform:rotate(-42deg);
  border-top-color:#7c3aed;
  border-bottom-color:#06b6d4;
}
.sm-brand-mic{
  position:absolute;
  left:18px;
  top:8px;
  width:28px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c084fc;
  font-size:25px;
  transform:rotate(-22deg);
  text-shadow:0 0 12px rgba(192,132,252,.65),0 0 22px rgba(236,72,153,.28);
}
.sm-brand-s{
  position:absolute;
  right:2px;
  bottom:1px;
  font:800 12px/1 Arial,Helvetica,sans-serif;
  color:#f472b6;
  text-shadow:0 0 8px rgba(244,114,182,.75);
}
.header .logo-text h1{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  font-size:1.58rem!important;
  line-height:.95!important;
  font-weight:800!important;
  letter-spacing:-1.15px!important;
}
.header .logo-tag{
  margin-top:6px!important;
  font-size:.53rem!important;
  letter-spacing:1.8px!important;
  font-weight:700!important;
}
.header .founders-wrap{
  min-height:68px!important;
  padding:6px 12px!important;
}
.header .founders{gap:12px!important}
.header .fcard{
  min-width:138px!important;
  padding:6px 12px!important;
}
.header .socials-wrap{
  min-height:68px!important;
  padding:9px 13px!important;
  display:flex!important;
  align-items:center!important;
}
.header .slink{
  width:31px!important;
  height:31px!important;
  flex-basis:31px!important;
}
@keyframes smBrandFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-3px) rotate(-1deg)}
}

/* =========================
   ÜYE HARİTASI
   ========================= */
.sm-focus-map{
  position:relative!important;
  margin:20px 0 28px!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(15,8,35,.99),rgba(6,5,24,1))!important;
  border:1px solid rgba(132,94,194,.22)!important;
  box-shadow:0 22px 64px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.sm-focus-map::before{
  height:3px!important;
  background:linear-gradient(90deg,#ff3d71,#845ec2,#00c9a7,#ff9f43,#ff3d71)!important;
  background-size:220% 100%!important;
  animation:smMapHeaderLine 5s linear infinite!important;
}
.sm-focus-map .umap-header{
  min-height:74px!important;
  padding:16px 20px 14px!important;
  background:linear-gradient(135deg,rgba(132,94,194,.10),rgba(255,61,113,.055))!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
.sm-focus-map .umap-header-icon{
  width:43px!important;
  height:43px!important;
  border-radius:12px!important;
  font-size:18px!important;
  color:#ff9f43!important;
  background:linear-gradient(135deg,rgba(132,94,194,.22),rgba(255,61,113,.16))!important;
  box-shadow:0 5px 18px rgba(132,94,194,.20)!important;
}
.sm-focus-map .umap-header-title{
  font:700 18px/1.15 Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  letter-spacing:-.2px!important;
}
.sm-focus-map .umap-header-sub{
  margin-top:4px!important;
  font:600 8px/1.3 Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  letter-spacing:2px!important;
  color:rgba(168,85,247,.52)!important;
}
.sm-focus-map .umap-header-count{
  padding:6px 14px!important;
  font:700 10px/1 Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  color:#22c55e!important;
  background:rgba(34,197,94,.09)!important;
  border:1px solid rgba(34,197,94,.23)!important;
}
.sm-focus-map .umap-canvas-wrap{
  position:relative!important;
  width:calc(100% - 38px)!important;
  height:440px!important;
  margin:14px 19px 10px!important;
  border-radius:15px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.035)!important;
  background:
    radial-gradient(circle at 52% 48%,rgba(124,58,237,.10),transparent 42%),
    radial-gradient(circle at 18% 76%,rgba(236,72,153,.055),transparent 35%),
    radial-gradient(circle at 85% 22%,rgba(6,182,212,.045),transparent 36%),
    linear-gradient(180deg,rgba(6,4,20,.94),rgba(8,5,27,.98))!important;
}
#smUmapCanvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
  opacity:.95!important;
}
.sm-focus-map .umap-nodes{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  pointer-events:none!important;
}
.sm-focus-map .umap-node{
  position:absolute!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:4px!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  animation:smMapNodeFloat 3.6s ease-in-out infinite!important;
  transition:filter .25s ease!important;
  z-index:4!important;
}
.sm-focus-map .umap-node:nth-child(2n){animation-delay:.45s!important}
.sm-focus-map .umap-node:nth-child(3n){animation-delay:.9s!important}
.sm-focus-map .umap-node:nth-child(4n){animation-delay:1.35s!important}
.sm-focus-map .umap-node:nth-child(5n){animation-delay:1.8s!important}
.sm-focus-map .umap-node:hover{
  transform:translate(-50%,-50%) scale(1.12)!important;
  filter:brightness(1.12)!important;
  z-index:50!important;
}
.sm-focus-map .umap-node-av{
  position:relative!important;
  width:58px!important;
  height:58px!important;
  padding:3px!important;
  border-radius:50%!important;
  overflow:visible!important;
  border:2px solid var(--node-color,#845ec2)!important;
  background:rgba(8,6,28,.98)!important;
  box-shadow:0 0 13px var(--node-color,#845ec2),0 0 28px color-mix(in srgb,var(--node-color,#845ec2) 38%,transparent),0 4px 12px rgba(0,0,0,.65)!important;
  animation:smMapNodeGlow 2.8s ease-in-out infinite!important;
}
.sm-focus-map .umap-node-av::before{
  content:'';
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--node-color,#845ec2) 35%,transparent);
  opacity:.62;
  pointer-events:none;
}
.sm-focus-map .umap-node-av img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  object-fit:cover!important;
  background:#0b1028!important;
}
.sm-focus-map .umap-node-live{
  right:-2px!important;
  bottom:1px!important;
  width:11px!important;
  height:11px!important;
  border:2px solid #09071d!important;
  background:#22c55e!important;
  box-shadow:0 0 8px rgba(34,197,94,.85)!important;
}
.sm-focus-map .umap-crown{
  top:-17px!important;
  font-size:14px!important;
  filter:drop-shadow(0 0 7px rgba(255,159,67,.75))!important;
}
.sm-focus-map .umap-node-name{
  max-width:112px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  color:#fff!important;
  background:rgba(3,3,14,.70)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  font:700 9px/1.15 Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  text-shadow:0 1px 5px rgba(0,0,0,.9)!important;
}
.sm-focus-map .umap-node-city{
  max-width:116px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  padding:2px 7px!important;
  font:600 7px/1.15 Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  letter-spacing:.35px!important;
  color:rgba(255,255,255,.46)!important;
  background:rgba(3,3,14,.54)!important;
  border:1px solid rgba(255,255,255,.045)!important;
}
.sm-focus-map .umap-tooltip{
  bottom:calc(100% + 16px)!important;
  min-width:184px!important;
  padding:12px 14px!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,rgba(24,12,47,.99),rgba(13,9,34,.99))!important;
  border:1px solid rgba(168,85,247,.32)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.72),0 0 28px rgba(124,58,237,.17)!important;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;
  z-index:1000!important;
}
.sm-focus-map .umap-tooltip-name{font:700 12px/1.2 Arial,"Helvetica Neue",Helvetica,sans-serif!important}
.sm-focus-map .umap-tooltip-rank{font:700 8px/1 Arial,"Helvetica Neue",Helvetica,sans-serif!important}
.sm-focus-map .umap-tooltip-detail{font-size:9px!important}
.sm-focus-map .umap-tooltip-status-text{font-size:9px!important}
.sm-focus-map .umap-legend{
  padding:0 19px 15px!important;
  justify-content:flex-end!important;
  gap:13px!important;
  flex-wrap:wrap!important;
}
.sm-focus-map .umap-legend-item{
  font:600 9px/1 Arial,"Helvetica Neue",Helvetica,sans-serif!important;
}
.sm-focus-map .umap-legend-dot{
  width:8px!important;
  height:8px!important;
}
@keyframes smMapHeaderLine{from{background-position:0 0}to{background-position:220% 0}}
@keyframes smMapNodeFloat{0%,100%{margin-top:0}50%{margin-top:-7px}}
@keyframes smMapNodeGlow{
  0%,100%{filter:brightness(.96);box-shadow:0 0 11px var(--node-color,#845ec2),0 0 22px color-mix(in srgb,var(--node-color,#845ec2) 28%,transparent),0 4px 12px rgba(0,0,0,.65)}
  50%{filter:brightness(1.10);box-shadow:0 0 18px var(--node-color,#845ec2),0 0 36px color-mix(in srgb,var(--node-color,#845ec2) 45%,transparent),0 4px 12px rgba(0,0,0,.65)}
}

@media(max-width:1080px){
  .header-grid{grid-template-columns:1fr 1fr!important}
  .header .founders-wrap{grid-column:1/-1!important;order:3!important}
  .header .socials-wrap{justify-content:flex-end!important}
  .sm-focus-map .umap-canvas-wrap{height:390px!important}
}
@media(max-width:768px){
  .header-grid{grid-template-columns:1fr!important}
  .header .logo{justify-content:center!important}
  .header .founders-wrap{grid-column:auto!important;order:2!important}
  .header .socials-wrap{display:none!important}
  .header .sm-brand-mark{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;flex-basis:52px!important}
  .header .logo-text h1{font-size:1.34rem!important}
  .sm-focus-map .umap-header{padding:14px!important}
  .sm-focus-map .umap-canvas-wrap{width:calc(100% - 24px)!important;height:340px!important;margin:12px!important}
  .sm-focus-map .umap-node-av{width:48px!important;height:48px!important}
  .sm-focus-map .umap-node-name{font-size:8px!important;max-width:82px!important}
  .sm-focus-map .umap-node-city{display:none!important}
  .sm-focus-map .umap-node:nth-child(n+13){display:none!important}
  .sm-focus-map .umap-legend{justify-content:center!important;padding:0 12px 13px!important;gap:9px!important}
}
@media(max-width:480px){
  .header .logo{padding:7px 8px!important;gap:9px!important}
  .header .sm-brand-mark{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;flex-basis:46px!important}
  .header .logo-text h1{font-size:1.15rem!important}
  .header .logo-tag{font-size:.46rem!important;letter-spacing:1.2px!important}
  .sm-focus-map .umap-header-title{font-size:16px!important}
  .sm-focus-map .umap-header-count{padding:5px 9px!important;font-size:8px!important}
  .sm-focus-map .umap-canvas-wrap{height:300px!important}
  .sm-focus-map .umap-node-av{width:43px!important;height:43px!important}
  .sm-focus-map .umap-node:nth-child(n+10){display:none!important}
}

/* =========================================================
   V9 — Video referansındaki dönen logo ve oda etkileşimleri
   ========================================================= */

/* Logonun tamamı dönmez; yalnızca mikrofon çevresindeki yörüngeler
   videodaki gibi dönerek belirli aralıklarla daire formuna yaklaşır. */
.header .sm-brand-mark{
  animation:smBrandSoftFloat 4.8s ease-in-out infinite!important;
  isolation:isolate!important;
}
.header .sm-brand-mark::before{
  content:''!important;
  position:absolute!important;
  inset:5px!important;
  border-radius:50%!important;
  border:1px solid rgba(168,85,247,.10)!important;
  box-shadow:inset 0 0 14px rgba(236,72,153,.08),0 0 12px rgba(124,58,237,.10)!important;
  animation:smBrandOuterPulse 3.8s ease-in-out infinite!important;
  pointer-events:none!important;
}
.sm-brand-orbit{
  left:50%!important;
  top:50%!important;
  transform-origin:center center!important;
  will-change:transform,width,height!important;
}
.sm-brand-orbit-a{
  width:46px!important;
  height:22px!important;
  margin-left:-23px!important;
  margin-top:-11px!important;
  border-top-color:#a855f7!important;
  border-bottom-color:#ec4899!important;
  animation:smOrbitMorphA 5.6s linear infinite!important;
}
.sm-brand-orbit-b{
  width:38px!important;
  height:18px!important;
  margin-left:-19px!important;
  margin-top:-9px!important;
  border-top-color:#06b6d4!important;
  border-bottom-color:#7c3aed!important;
  opacity:.92!important;
  animation:smOrbitMorphB 4.8s linear infinite reverse!important;
}
.sm-brand-orbit-c{
  width:29px!important;
  height:29px!important;
  margin-left:-14.5px!important;
  margin-top:-14.5px!important;
  border-width:1px!important;
  border-left-color:rgba(244,114,182,.86)!important;
  border-right-color:rgba(192,132,252,.72)!important;
  opacity:.72!important;
  animation:smOrbitCircle 3.7s linear infinite!important;
}
.sm-brand-mic{
  left:50%!important;
  top:50%!important;
  width:28px!important;
  height:38px!important;
  margin-left:-14px!important;
  margin-top:-19px!important;
  transform:rotate(-42deg)!important;
  color:#d946ef!important;
  font-size:24px!important;
  z-index:4!important;
  animation:smMicBreath 2.8s ease-in-out infinite!important;
}
.sm-brand-signal{
  position:absolute!important;
  right:7px!important;
  bottom:8px!important;
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:#22c55e!important;
  box-shadow:0 0 8px rgba(34,197,94,.9),0 0 16px rgba(34,197,94,.35)!important;
  z-index:6!important;
  animation:smBrandSignal 1.6s ease-in-out infinite!important;
}
@keyframes smBrandSoftFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes smBrandOuterPulse{
  0%,100%{transform:scale(.90);opacity:.28}
  50%{transform:scale(1.04);opacity:.72}
}
@keyframes smOrbitMorphA{
  0%{transform:rotate(34deg);border-radius:50%}
  28%{transform:rotate(150deg);width:46px;height:22px}
  48%,58%{transform:rotate(245deg);width:36px;height:36px}
  80%{transform:rotate(330deg);width:46px;height:22px}
  100%{transform:rotate(394deg);border-radius:50%}
}
@keyframes smOrbitMorphB{
  0%{transform:rotate(-38deg)}
  36%{transform:rotate(118deg);width:38px;height:18px}
  52%,62%{transform:rotate(205deg);width:31px;height:31px}
  100%{transform:rotate(322deg);width:38px;height:18px}
}
@keyframes smOrbitCircle{
  from{transform:rotate(0deg) scale(.88)}
  50%{transform:rotate(180deg) scale(1.08)}
  to{transform:rotate(360deg) scale(.88)}
}
@keyframes smMicBreath{
  0%,100%{filter:brightness(.92);text-shadow:0 0 9px rgba(217,70,239,.55),0 0 18px rgba(236,72,153,.20)}
  50%{filter:brightness(1.20);text-shadow:0 0 15px rgba(217,70,239,.9),0 0 28px rgba(236,72,153,.38)}
}
@keyframes smBrandSignal{
  0%,100%{transform:scale(.75);opacity:.55}
  50%{transform:scale(1.25);opacity:1}
}

/* Kullanıcı düğümünde videodaki hover bilgi kartına ek olarak
   oda bilgisi ve tıklanabilir etkileşim sinyali. */
.sm-focus-map .umap-node:focus{
  outline:none!important;
}
.sm-focus-map .umap-node:focus-visible .umap-node-av{
  box-shadow:0 0 0 3px rgba(255,255,255,.20),0 0 24px var(--node-color,#845ec2),0 0 48px rgba(124,58,237,.22)!important;
}
.sm-focus-map .umap-node.has-room{
  cursor:pointer!important;
}
.sm-focus-map .umap-node-radar{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:100%!important;
  height:100%!important;
  margin-left:-50%!important;
  margin-top:-50%!important;
  border:1px solid var(--node-color,#845ec2)!important;
  border-radius:50%!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:-1!important;
}
.sm-focus-map .umap-node.has-room .umap-node-radar{
  animation:smNodeRadar 2.4s ease-out infinite!important;
}
.sm-focus-map .umap-node.has-room .umap-node-radar.radar-two{
  animation-delay:1.15s!important;
}
.sm-focus-map .umap-interaction-signal{
  position:absolute!important;
  right:-15px!important;
  top:12px!important;
  width:25px!important;
  height:25px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  color:#fff!important;
  background:linear-gradient(135deg,#a855f7,#ec4899)!important;
  border:2px solid rgba(9,7,29,.96)!important;
  box-shadow:0 0 0 0 rgba(236,72,153,.50),0 0 14px rgba(236,72,153,.45)!important;
  font-size:10px!important;
  opacity:0!important;
  transform:translate(-6px,6px) scale(.65)!important;
  pointer-events:none!important;
  z-index:30!important;
  transition:opacity .22s ease,transform .22s ease!important;
}
.sm-focus-map .umap-node.has-room:hover .umap-interaction-signal,
.sm-focus-map .umap-node.has-room:focus .umap-interaction-signal{
  opacity:1!important;
  transform:translate(0,0) scale(1)!important;
  animation:smInteractionPing 1.35s ease-in-out infinite!important;
}
.sm-focus-map .umap-node:hover .umap-tooltip,
.sm-focus-map .umap-node:focus .umap-tooltip{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(-50%) scale(1)!important;
}
.sm-focus-map .umap-tooltip-room{
  margin-top:2px!important;
  padding:6px 8px!important;
  border-radius:8px!important;
  color:rgba(255,255,255,.66)!important;
  background:rgba(168,85,247,.08)!important;
  border:1px solid rgba(168,85,247,.14)!important;
}
.sm-focus-map .umap-tooltip-room i{
  color:#f472b6!important;
}
.sm-focus-map .umap-tooltip-room span{
  max-width:125px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.sm-focus-map .umap-node-city.is-room{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  color:rgba(244,114,182,.78)!important;
  border-color:rgba(236,72,153,.16)!important;
  background:rgba(236,72,153,.065)!important;
  text-transform:none!important;
}
.sm-focus-map .umap-node-city.is-room i{
  color:#f472b6!important;
  font-size:7px!important;
}
@keyframes smNodeRadar{
  0%{transform:scale(.86);opacity:.62}
  75%,100%{transform:scale(1.65);opacity:0}
}
@keyframes smInteractionPing{
  0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,.42),0 0 14px rgba(236,72,153,.42)}
  50%{box-shadow:0 0 0 7px rgba(236,72,153,0),0 0 20px rgba(236,72,153,.72)}
}

@media(max-width:768px){
  .sm-focus-map .umap-interaction-signal{right:-10px!important;top:8px!important;width:22px!important;height:22px!important;font-size:9px!important}
  .sm-focus-map .umap-node-city.is-room{display:flex!important;max-width:90px!important}
  .sm-focus-map .umap-tooltip{min-width:176px!important}
}
@media(prefers-reduced-motion:reduce){
  .sm-brand-orbit,.sm-brand-mic,.sm-brand-signal,.sm-brand-mark::before,.umap-node-radar,.umap-interaction-signal{animation:none!important}
}
/* Radar katmanlarının avatarın arkasında, fakat görünür kalması için katman düzeltmesi. */
.sm-focus-map .umap-node-av{isolation:isolate!important}
.sm-focus-map .umap-node-radar{z-index:0!important}
.sm-focus-map .umap-node-av>img{position:relative!important;z-index:2!important}
.sm-focus-map .umap-node-live{z-index:4!important}