* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  color: #f7f7ff;

  background:
    radial-gradient(
      circle at 72% 22%,
      rgba(104,72,255,.23),
      transparent 32%
    ),
    radial-gradient(
      circle at 12% 80%,
      rgba(73,49,202,.16),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #060812,
      #0a0c18 48%,
      #101225
    );

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* BACKGROUND */

.ambient {
  position: fixed;

  pointer-events: none;

  border-radius: 50%;

  filter: blur(120px);

  opacity: .3;

  z-index: 0;
}

.ambient-one {
  width: 480px;
  height: 480px;

  top: -240px;
  right: 7%;

  background: #7356ff;
}

.ambient-two {
  width: 390px;
  height: 390px;

  left: -220px;
  bottom: -120px;

  background: #4533b4;
}


/* NAVBAR */

.navbar {
  width: min(1440px, calc(100% - 64px));

  height: 94px;

  margin: 0 auto;

  position: relative;
  z-index: 20;

  display: grid;

  grid-template-columns:
    250px
    1fr
    220px;

  align-items: center;
}

.brand {
  display: flex;

  align-items: center;

  text-decoration: none;
}

.brand img {
  width: 205px;

  height: auto;

  display: block;
}

.nav-links {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 36px;
}

.nav-links a {
  color: rgba(255,255,255,.68);

  text-decoration: none;

  font-size: 14px;
  font-weight: 700;

  transition:
    color .2s ease,
    transform .2s ease;
}

.nav-links a:hover {
  color: #fff;

  transform: translateY(-2px);
}

.open-app {
  justify-self: end;

  min-height: 44px;

  padding: 0 19px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius: 14px;

  color: #fff;

  background:
    rgba(255,255,255,.07);

  backdrop-filter:
    blur(20px);

  text-decoration: none;

  font-size: 13px;
  font-weight: 800;

  transition:
    transform .2s ease,
    background .2s ease;
}

.open-app:hover {
  transform: translateY(-2px);

  background:
    rgba(255,255,255,.12);
}


/* HERO */

.hero {
  width: min(1440px, calc(100% - 64px));

  min-height:
    calc(100vh - 94px);

  margin: 0 auto;

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(410px,.9fr)
    minmax(610px,1.35fr);

  align-items: center;

  gap: 46px;

  padding:
    20px
    0
    95px;
}

.hero-copy {
  position: relative;

  z-index: 8;
}

.eyebrow {
  width: max-content;

  margin-bottom: 25px;

  padding:
    8px
    13px;

  display: flex;

  align-items: center;

  gap: 9px;

  border:
    1px solid
    rgba(140,110,255,.22);

  border-radius: 999px;

  color: #c9c0ff;

  background:
    rgba(112,76,255,.08);

  font-size: 11px;
  font-weight: 850;

  letter-spacing: .08em;
}

.eyebrow span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #8569ff;

  box-shadow:
    0 0 15px
    rgba(133,105,255,.9);
}

.hero h1 {
  margin: 0;

  font-size:
    clamp(64px,6.5vw,110px);

  line-height: .87;

  letter-spacing: -.075em;

  font-weight: 950;
}

.hero h1 strong {
  color: #947bff;

  text-shadow:
    0 0 50px
    rgba(126,89,255,.35);
}

.hero-description {
  max-width: 570px;

  margin:
    31px
    0
    0;

  color:
    rgba(236,237,255,.63);

  font-size: 18px;

  line-height: 1.65;
}

.hero-buttons {
  margin-top: 35px;

  display: flex;

  align-items: center;

  gap: 13px;
}

.btn {
  min-height: 55px;

  padding:
    0
    22px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  border-radius: 16px;

  text-decoration: none;

  font-size: 14px;
  font-weight: 850;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #7055ff,
      #9479ff
    );

  box-shadow:
    0 16px 42px
    rgba(105,74,255,.28);
}

.btn-primary:hover {
  box-shadow:
    0 21px 52px
    rgba(105,74,255,.4);
}

.btn-secondary {
  color: #fff;

  border:
    1px solid
    rgba(255,255,255,.13);

  background:
    rgba(255,255,255,.05);
}

.btn-secondary:hover {
  background:
    rgba(255,255,255,.09);
}

.windows-icon {
  font-size: 20px;
}

.platform-list {
  margin-top: 19px;

  display: flex;

  align-items: center;

  gap: 10px;

  color:
    rgba(255,255,255,.32);

  font-size: 10px;
  font-weight: 750;

  letter-spacing: .09em;
}

.platform-list i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.25);
}


/* VISUAL */

.hero-visual {
  height: 670px;

  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;
}

.orbit {
  position: absolute;

  border:
    1px solid
    rgba(125,98,255,.09);

  border-radius: 50%;

  pointer-events: none;
}

.orbit-one {
  width: 620px;
  height: 620px;
}

.orbit-two {
  width: 790px;
  height: 790px;
}


/* DESKTOP */

.desktop {
  width: 760px;
  height: 490px;

  position: absolute;

  right: -28px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius: 26px;

  background: #11131d;

  box-shadow:
    0 50px 130px
    rgba(0,0,0,.55),
    0 0 100px
    rgba(100,65,255,.13);

  transform:
    perspective(1200px)
    rotateY(-6deg)
    rotateX(2deg);

  transition:
    transform .15s ease-out;
}

.window-bar {
  height: 38px;

  padding:
    0
    14px;

  display: grid;

  grid-template-columns:
    100px
    1fr
    100px;

  align-items: center;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);

  background: #090b12;
}

.window-dots {
  display: flex;

  gap: 6px;
}

.window-dots span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.17);
}

.window-name {
  justify-self: center;

  color:
    rgba(255,255,255,.42);

  font-size: 9px;
  font-weight: 750;
}

.desktop-app {
  height:
    calc(100% - 38px);

  display: grid;

  grid-template-columns:
    60px
    160px
    1fr
    135px;
}

.server-rail {
  padding:
    14px
    10px;

  display: flex;

  flex-direction: column;
  align-items: center;

  gap: 10px;

  background: #080a11;
}

.server-logo,
.server-circle {
  width: 38px;
  height: 38px;

  border-radius: 13px;
}

.server-logo {
  display: grid;

  place-items: center;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #674cff,
      #977dff
    );

  font-size: 13px;
  font-weight: 900;
}

.server-circle {
  background: #1b1e29;
}

.channels {
  padding:
    16px
    10px;

  border-right:
    1px solid
    rgba(255,255,255,.04);

  background: #0c0e17;
}

.community-name {
  display: block;

  margin-bottom: 22px;

  font-size: 12px;
}

.channels small,
.members small {
  color:
    rgba(255,255,255,.28);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .06em;
}

.voice-title {
  display: block;

  margin-top: 20px;
}

.channel {
  margin-top: 5px;

  padding:
    7px
    8px;

  border-radius: 7px;

  color:
    rgba(255,255,255,.39);

  font-size: 10px;
}

.channel.active {
  color: #fff;

  background:
    rgba(255,255,255,.06);
}

.chat {
  min-width: 0;

  display: flex;

  flex-direction: column;

  background: #11141e;
}

.chat-top {
  height: 46px;

  padding:
    0
    14px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);

  color:
    rgba(255,255,255,.68);

  font-size: 10px;
}

.chat-actions {
  color:
    rgba(255,255,255,.3);
}

.chat-body {
  flex: 1;

  padding:
    50px
    20px
    12px;

  overflow: hidden;
}

.welcome-circle {
  width: 39px;
  height: 39px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #292c38;

  font-size: 18px;
  font-weight: 900;
}

.chat-body h3 {
  margin:
    10px
    0
    4px;

  font-size: 15px;
}

.welcome-text {
  margin:
    0
    0
    20px;

  color:
    rgba(255,255,255,.34);

  font-size: 9px;
}

.message {
  margin-top: 15px;

  display: flex;

  align-items: flex-start;

  gap: 10px;
}

.avatar {
  width: 30px;
  height: 30px;

  flex:
    0
    0
    30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  font-size: 10px;
  font-weight: 900;
}

.avatar-one {
  background: #203850;
}

.avatar-two {
  background: #6550c8;
}

.message-content b {
  font-size: 9px;
}

.message-content small {
  margin-left: 6px;

  color:
    rgba(255,255,255,.22);

  font-size: 7px;
}

.message-content p {
  margin:
    4px
    0
    0;

  color:
    rgba(255,255,255,.58);

  font-size: 9px;
}

.fake-input {
  height: 36px;

  margin:
    0
    14px
    14px;

  padding:
    0
    12px;

  display: flex;

  align-items: center;

  border-radius: 9px;

  color:
    rgba(255,255,255,.23);

  background: #1c1f2a;

  font-size: 8px;
}

.members {
  padding:
    18px
    10px;

  background: #0c0e17;
}

.member {
  margin-top: 12px;

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(255,255,255,.43);

  font-size: 9px;
}

.member span {
  width: 23px;
  height: 23px;

  position: relative;

  border-radius: 50%;

  background: #252937;
}

.member span::after {
  content: "";

  width: 6px;
  height: 6px;

  position: absolute;

  right: 0;
  bottom: 0;

  border:
    2px solid
    #0c0e17;

  border-radius: 50%;

  background: #4bd783;
}


/* PHONE */

.phone {
  width: 184px;
  height: 374px;

  padding: 7px;

  position: absolute;

  right: -54px;
  bottom: 12px;

  z-index: 8;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius: 31px;

  background: #070910;

  box-shadow:
    0 35px 80px
    rgba(0,0,0,.58);

  transform:
    rotate(5deg);
}

.phone-notch {
  width: 72px;
  height: 17px;

  position: absolute;

  top: 8px;
  left: 50%;

  z-index: 3;

  transform:
    translateX(-50%);

  border-radius: 12px;

  background: #070910;
}

.phone-screen {
  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 25px;

  background:
    linear-gradient(
      180deg,
      #131622,
      #090b13
    );
}

.phone-header {
  height: 58px;

  padding:
    18px
    12px
    0;

  display: grid;

  grid-template-columns:
    24px
    1fr
    18px;

  align-items: center;

  gap: 7px;

  font-size: 9px;
}

.phone-header img {
  width: 22px;
  height: 22px;

  border-radius: 7px;
}

.mobile-profile {
  padding:
    33px
    14px
    14px;
}

.mobile-avatar {
  width: 41px;
  height: 41px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #634aff,
      #9b7aff
    );

  font-size: 12px;
  font-weight: 900;
}

.mobile-profile h3 {
  margin:
    10px
    0
    3px;

  font-size: 12px;
}

.mobile-profile p {
  margin: 0;

  color:
    rgba(255,255,255,.32);

  font-size: 8px;
}

.mobile-card {
  margin:
    8px
    10px;

  padding:
    11px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius: 11px;

  background:
    rgba(255,255,255,.035);

  font-size: 9px;
}

.mobile-card div {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.mobile-card small {
  color:
    rgba(255,255,255,.3);

  font-size: 7px;
}


/* FLOAT ICONS */

.float-icon {
  width: 48px;
  height: 48px;

  position: absolute;

  z-index: 10;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius: 16px;

  background:
    rgba(17,19,32,.8);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.35);

  backdrop-filter:
    blur(16px);

  font-size: 20px;

  animation:
    floatBadge
    5s
    ease-in-out
    infinite;
}

.float-chat {
  top: 65px;
  left: 55px;
}

.float-game {
  top: 115px;
  right: -2px;

  animation-delay: -1.5s;
}

.float-headset {
  left: 12px;
  bottom: 80px;

  animation-delay: -3s;
}

@keyframes floatBadge {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-2deg);
  }

  50% {
    transform:
      translateY(-13px)
      rotate(3deg);
  }

}


/* FEATURE STRIP */

.feature-strip {
  width: min(1200px, calc(100% - 64px));

  margin:
    -45px
    auto
    65px;

  position: relative;

  z-index: 5;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 22px;

  background:
    rgba(255,255,255,.025);

  backdrop-filter:
    blur(20px);
}

.feature-strip article {
  min-height: 92px;

  padding:
    21px
    26px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 5px;
}

.feature-strip article + article {
  border-left:
    1px solid
    rgba(255,255,255,.06);
}

.feature-strip strong {
  font-size: 14px;
}

.feature-strip span {
  color:
    rgba(255,255,255,.34);

  font-size: 11px;
}


/* TABLET */

@media (max-width: 1150px) {

  .navbar {
    grid-template-columns:
      200px
      1fr
      180px;
  }

  .brand img {
    width: 180px;
  }

  .nav-links {
    gap: 20px;
  }

  .hero {
    grid-template-columns:
      .85fr
      1.15fr;
  }

  .desktop {
    width: 650px;
    height: 435px;

    right: -130px;
  }

}


/* MOBILE */

@media (max-width: 900px) {

  .navbar {
    width:
      calc(100% - 30px);

    height: 78px;

    grid-template-columns:
      1fr
      auto;
  }

  .brand img {
    width: 170px;
  }

  .nav-links {
    display: none;
  }

  .open-app {
    min-height: 40px;

    padding:
      0
      13px;

    font-size: 11px;
  }

  .hero {
    width:
      calc(100% - 32px);

    min-height: auto;

    grid-template-columns: 1fr;

    gap: 10px;

    padding:
      50px
      0
      75px;

    text-align: center;
  }

  .hero-copy {
    display: flex;

    flex-direction: column;

    align-items: center;
  }

  .hero h1 {
    font-size:
      clamp(58px,17vw,87px);
  }

  .hero-description {
    max-width: 520px;

    font-size: 16px;
  }

  .hero-buttons {
    width: 100%;

    flex-direction: column;
  }

  .btn {
    width:
      min(100%,350px);
  }

  .platform-list {
    justify-content: center;

    flex-wrap: wrap;
  }

  .hero-visual {
    height: 520px;

    margin-top: 25px;
  }

  .desktop {
    width:
      min(680px,115vw);

    height: 410px;

    right: auto;

    left: 50%;

    transform:
      translateX(-50%)
      perspective(1200px)
      rotateX(2deg);
  }

  .members {
    display: none;
  }

  .desktop-app {
    grid-template-columns:
      55px
      145px
      1fr;
  }

  .phone {
    width: 154px;
    height: 315px;

    right: -14px;
    bottom: -5px;
  }

  .float-icon,
  .orbit {
    display: none;
  }

  .feature-strip {
    width:
      calc(100% - 32px);

    margin-top: -10px;

    grid-template-columns:
      1fr;
  }

  .feature-strip article + article {
    border-left: 0;

    border-top:
      1px solid
      rgba(255,255,255,.06);
  }

}


/* SMALL MOBILE */

@media (max-width: 560px) {

  .navbar {
    width:
      calc(100% - 24px);
  }

  .brand img {
    width: 145px;
  }

  .open-app {
    padding:
      0
      10px;

    font-size: 10px;
  }

  .hero {
    width:
      calc(100% - 26px);

    padding-top: 42px;
  }

  .hero-description {
    font-size: 14px;
  }

  .hero-visual {
    height: 410px;
  }

  .desktop {
    width: 560px;
    height: 355px;

    left: 45%;
  }

  .channels {
    display: none;
  }

  .desktop-app {
    grid-template-columns:
      52px
      1fr;
  }

  .phone {
    width: 130px;
    height: 270px;

    right: -4px;
  }

}

/* =========================================
   REAL CHATTER HALL PREVIEW V2
========================================= */

.real-preview {
  position: relative !important;

  height: 670px !important;

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

  overflow: visible !important;
}

.main-app-preview {
  width: min(920px, 58vw) !important;
  height: auto !important;

  display: block !important;

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

  border-radius: 24px !important;

  border:
    1px solid
    rgba(255,255,255,.12) !important;

  box-shadow:
    0 50px 120px rgba(0,0,0,.55),
    0 0 100px rgba(105,72,255,.18) !important;

  transform:
    perspective(1400px)
    rotateY(-5deg)
    rotateX(1deg) !important;

  transition:
    transform .25s ease,
    filter .25s ease !important;
}

.main-app-preview:hover {
  transform:
    perspective(1400px)
    rotateY(-2deg)
    rotateX(0deg)
    translateY(-4px) !important;
}

.preview-glow {
  width: 650px !important;
  height: 650px !important;

  position: absolute !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(119,82,255,.26),
      rgba(79,49,185,.08) 45%,
      transparent 70%
    ) !important;

  filter: blur(35px) !important;

  pointer-events: none !important;
}


/* TABLET */

@media (max-width: 1150px) {

  .main-app-preview {
    width: 720px !important;
  }

}


/* MOBILE */

@media (max-width: 900px) {

  .real-preview {
    height: 460px !important;
  }

  .main-app-preview {
    width: 105vw !important;

    max-width: none !important;

    transform:
      perspective(1200px)
      rotateY(0deg)
      rotateX(1deg) !important;
  }

}


/* SMALL MOBILE */

@media (max-width: 560px) {

  .real-preview {
    height: 340px !important;
  }

  .main-app-preview {
    width: 125vw !important;
  }

}

/* =========================================
   CHATTER HALL DUAL REAL PREVIEW V1
========================================= */

.dual-real-preview{
  position:relative !important;
  min-height:700px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

.preview-glow{
  position:absolute !important;
  width:760px !important;
  height:760px !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      circle,
      rgba(116,84,255,.25) 0%,
      rgba(116,84,255,.12) 38%,
      rgba(116,84,255,.05) 56%,
      transparent 74%
    ) !important;
  filter:blur(30px) !important;
  z-index:1 !important;
  pointer-events:none !important;
}

.preview-orbit{
  position:absolute !important;
  border-radius:50% !important;
  border:1px solid rgba(130,110,255,.10) !important;
  pointer-events:none !important;
  z-index:1 !important;
}

.preview-orbit-a{
  width:820px !important;
  height:820px !important;
}

.preview-orbit-b{
  width:620px !important;
  height:620px !important;
}

.desktop-preview-wrap{
  position:relative !important;
  z-index:3 !important;
  width:min(980px, 60vw) !important;
}

.desktop-preview-image{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border-radius:26px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 45px 100px rgba(0,0,0,.55),
    0 0 70px rgba(101,77,255,.16) !important;
  transform:
    perspective(1600px)
    rotateY(-6deg)
    rotateX(2deg) !important;
}

.mobile-preview-wrap{
  position:absolute !important;
  right:-10px !important;
  bottom:20px !important;
  z-index:5 !important;
}

.mobile-preview-frame{
  width:255px !important;
  padding:10px !important;
  border-radius:34px !important;
  background:
    linear-gradient(
      180deg,
      rgba(18,22,38,.98),
      rgba(8,10,18,.98)
    ) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 0 45px rgba(112,86,255,.22) !important;
  transform:
    rotate(6deg)
    translateY(0) !important;
}

.mobile-preview-frame::before{
  content:"" !important;
  display:block !important;
  width:86px !important;
  height:10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  margin:0 auto 10px auto !important;
}

.mobile-preview-image{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border-radius:26px !important;
}

/* LAPTOP */
@media (max-width: 1280px){
  .dual-real-preview{
    min-height:620px !important;
  }

  .desktop-preview-wrap{
    width:min(860px, 58vw) !important;
  }

  .mobile-preview-frame{
    width:220px !important;
  }
}

/* TABLET */
@media (max-width: 980px){
  .dual-real-preview{
    min-height:560px !important;
  }

  .desktop-preview-wrap{
    width:min(760px, 84vw) !important;
  }

  .desktop-preview-image{
    transform:
      perspective(1400px)
      rotateY(-3deg)
      rotateX(1deg) !important;
  }

  .mobile-preview-wrap{
    right:-6px !important;
    bottom:-6px !important;
  }

  .mobile-preview-frame{
    width:190px !important;
  }
}

/* MOBILE */
@media (max-width: 760px){
  .dual-real-preview{
    min-height:auto !important;
    padding-top:14px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  .preview-orbit,
  .preview-glow{
    display:none !important;
  }

  .desktop-preview-wrap{
    width:100% !important;
    max-width:100% !important;
  }

  .desktop-preview-image{
    width:100% !important;
    border-radius:18px !important;
    transform:none !important;
  }

  .mobile-preview-wrap{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin-top:-34px !important;
    align-self:flex-end !important;
    margin-right:8px !important;
  }

  .mobile-preview-frame{
    width:150px !important;
    padding:7px !important;
    border-radius:24px !important;
    transform:rotate(4deg) !important;
  }

  .mobile-preview-frame::before{
    width:58px !important;
    height:7px !important;
    margin-bottom:7px !important;
  }

  .mobile-preview-image{
    border-radius:18px !important;
  }
}

/* SMALL MOBILE */
@media (max-width: 480px){
  .mobile-preview-wrap{
    margin-top:-24px !important;
    margin-right:4px !important;
  }

  .mobile-preview-frame{
    width:132px !important;
  }
}

/* =========================================
   CLEAN PREVIEW FRAME V4
   Sahte cihaz çerçevelerini kaldır
========================================= */

.desktop-preview-wrap {
  padding: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;

  background: transparent !important;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  box-shadow:
    0 35px 90px rgba(0,0,0,.50),
    0 0 45px rgba(100,75,255,.10) !important;
}

.desktop-preview-wrap::before,
.desktop-preview-wrap::after {
  display: none !important;
}

.desktop-preview-image {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  border: 0 !important;
  border-radius: 22px !important;

  box-shadow: none !important;

  transform: none !important;

  filter: none !important;
}


/* TELEFON - SAHTE KASA YOK */

.mobile-preview-frame {
  width: 225px !important;

  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 24px !important;

  background: transparent !important;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  box-shadow:
    0 28px 65px rgba(0,0,0,.55),
    0 0 35px rgba(105,80,255,.12) !important;

  transform:
    rotate(3deg) !important;
}

.mobile-preview-frame::before,
.mobile-preview-frame::after {
  display: none !important;
}

.mobile-preview-image {
  width: 100% !important;
  height: auto !important;

  display: block !important;

  border-radius: 24px !important;

  filter: none !important;
}


/* Biraz daha doğal konum */

.mobile-preview-wrap {
  right: -12px !important;
  bottom: 8px !important;
}


/* MOBILE */

@media (max-width: 760px) {

  .desktop-preview-wrap {
    border-radius: 15px !important;
  }

  .desktop-preview-image {
    border-radius: 15px !important;
  }

  .mobile-preview-frame {
    width: 145px !important;
    border-radius: 18px !important;
  }

  .mobile-preview-image {
    border-radius: 18px !important;
  }

}

/* =========================================================
   CHATTER HALL HERO PRODUCT SHOT V5
========================================================= */

.hero-product-shot {
  position: relative !important;

  min-height: 680px !important;

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

  overflow: visible !important;
}


.hero-product-glow {
  position: absolute !important;

  width: 780px !important;
  height: 570px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(104, 75, 255, .23) 0%,
      rgba(85, 58, 203, .11) 42%,
      transparent 72%
    ) !important;

  filter: blur(60px) !important;

  pointer-events: none !important;
}


.hero-product-image {
  position: relative !important;
  z-index: 3 !important;

  display: block !important;

  width: min(1050px, 64vw) !important;
  height: auto !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 35px 45px rgba(0,0,0,.42)
    ) !important;

  transform:
    translateX(20px) !important;
}


/* DESKTOP */

@media (min-width: 901px) {

  .hero {
    grid-template-columns:
      minmax(430px, .80fr)
      minmax(720px, 1.50fr) !important;

    gap: 20px !important;
  }

}


/* LAPTOP */

@media (max-width: 1280px) {

  .hero-product-image {
    width: min(900px, 63vw) !important;
  }

}


/* TABLET */

@media (max-width: 980px) {

  .hero-product-shot {
    min-height: 520px !important;
  }

  .hero-product-image {
    width: 90vw !important;

    transform: none !important;
  }

}


/* MOBILE */

@media (max-width: 760px) {

  .hero-product-shot {
    min-height: auto !important;

    padding:
      18px
      0
      35px !important;
  }

  .hero-product-glow {
    display: none !important;
  }

  .hero-product-image {
    width: 110vw !important;
    max-width: none !important;

    transform:
      translateX(2%) !important;
  }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

  .hero-product-image {
    width: 120vw !important;
  }

}

/* =========================================================
   CHATTER HALL DEVICE ONLY HERO V6
========================================================= */

.device-only-hero {
  position: relative !important;

  min-height: 690px !important;

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

  overflow: visible !important;
}


.device-glow {
  position: absolute !important;

  width: 820px !important;
  height: 560px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(112, 78, 255, .26) 0%,
      rgba(79, 53, 194, .12) 43%,
      transparent 72%
    ) !important;

  filter: blur(65px) !important;

  opacity: .9 !important;

  pointer-events: none !important;
}


.device-hero-image {
  position: relative !important;
  z-index: 3 !important;

  display: block !important;

  width: min(1120px, 68vw) !important;
  height: auto !important;

  max-width: none !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 35px 50px rgba(0,0,0,.50)
    ) !important;

  transform:
    translateX(30px)
    translateY(10px) !important;
}


/* DESKTOP */

@media (min-width: 901px) {

  .hero {
    grid-template-columns:
      minmax(430px, .78fr)
      minmax(760px, 1.55fr) !important;

    gap: 8px !important;
  }

}


/* LAPTOP */

@media (max-width: 1360px) {

  .device-hero-image {
    width: min(980px, 66vw) !important;

    transform:
      translateX(20px)
      translateY(10px) !important;
  }

}


/* TABLET */

@media (max-width: 980px) {

  .device-only-hero {
    min-height: 520px !important;
  }

  .device-hero-image {
    width: 92vw !important;

    transform: none !important;
  }

}


/* MOBILE */

@media (max-width: 760px) {

  .device-only-hero {
    min-height: auto !important;

    padding:
      15px
      0
      35px !important;
  }

  .device-glow {
    display: none !important;
  }

  .device-hero-image {
    width: 118vw !important;

    max-width: none !important;

    transform:
      translateX(4%) !important;
  }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

  .device-hero-image {
    width: 128vw !important;
  }

}

/* =========================================================
   CHATTER HALL PREMIUM BACKGROUND V7
========================================================= */

body {
  position: relative !important;

  background:
    radial-gradient(
      ellipse at 73% 42%,
      rgba(105, 75, 255, .20) 0%,
      rgba(77, 52, 184, .10) 27%,
      transparent 56%
    ),
    radial-gradient(
      ellipse at 15% 85%,
      rgba(78, 55, 210, .12) 0%,
      transparent 48%
    ),
    linear-gradient(
      120deg,
      #070912 0%,
      #0a0c18 46%,
      #101126 100%
    ) !important;
}


/* hafif grid */

body::before {
  content: "" !important;

  position: fixed !important;
  inset: 0 !important;

  pointer-events: none !important;

  z-index: 0 !important;

  background-image:
    linear-gradient(
      rgba(124, 103, 255, .025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(124, 103, 255, .025) 1px,
      transparent 1px
    ) !important;

  background-size:
    64px 64px !important;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      transparent 78%
    ) !important;

  opacity: .75 !important;
}


/* vignette + hafif parıltı */

body::after {
  content: "" !important;

  position: fixed !important;
  inset: 0 !important;

  pointer-events: none !important;

  z-index: 0 !important;

  background:
    radial-gradient(
      ellipse at center,
      transparent 45%,
      rgba(0,0,0,.20) 78%,
      rgba(0,0,0,.52) 100%
    ) !important;
}


/* HERO üstünde kalsın */

.navbar,
.hero,
.feature-strip {
  position: relative !important;
  z-index: 2 !important;
}


/* laptop arkasında premium glow */

.device-only-hero::before {
  content: "" !important;

  position: absolute !important;

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

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

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

  border-radius: 50% !important;

  background:
    radial-gradient(
      ellipse,
      rgba(130, 92, 255, .22) 0%,
      rgba(91, 62, 219, .10) 40%,
      transparent 72%
    ) !important;

  filter: blur(36px) !important;

  pointer-events: none !important;
}


/* laptop altında zemin ışığı */

.device-only-hero::after {
  content: "" !important;

  position: absolute !important;

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

  left: 56% !important;
  bottom: 55px !important;

  transform:
    translateX(-50%) !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      ellipse,
      rgba(116, 79, 255, .20),
      rgba(88, 58, 210, .08) 45%,
      transparent 72%
    ) !important;

  filter: blur(25px) !important;

  pointer-events: none !important;
}


/* Mobilde sade tut */

@media (max-width: 760px) {

  body::before {
    opacity: .35 !important;
  }

  .device-only-hero::before {
    width: 90vw !important;
    height: 300px !important;
  }

  .device-only-hero::after {
    width: 80vw !important;
    bottom: 10px !important;
  }

}


/* =========================================================
   CHATTER HALL AI VOICE PULSE V8
========================================================= */

.device-only-hero {
  position: relative !important;
  isolation: isolate !important;
}


/* AI ses alanı */

.ai-voice-bg {
  position: absolute !important;

  left: 54% !important;
  top: 49% !important;

  width: 610px !important;
  height: 610px !important;

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

  pointer-events: none !important;

  z-index: 1 !important;

  opacity: .92 !important;
}


/* arka mor aura */

.ai-voice-bg::before {
  content: "" !important;

  position: absolute !important;

  inset: 15% !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(170, 125, 255, .22) 0%,
      rgba(123, 78, 255, .16) 28%,
      rgba(88, 49, 205, .08) 52%,
      transparent 74%
    ) !important;

  filter:
    blur(38px) !important;

  animation:
    chAuraBreath 4.6s
    ease-in-out
    infinite !important;
}


/* merkez çekirdek */

.ai-voice-core {
  position: absolute !important;

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

  width: 72px !important;
  height: 72px !important;

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

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 42% 38%,
      rgba(255,255,255,.95) 0%,
      rgba(214,190,255,.95) 8%,
      rgba(162,118,255,.90) 24%,
      rgba(116,70,255,.68) 46%,
      rgba(86,44,210,.25) 67%,
      transparent 78%
    ) !important;

  box-shadow:
    0 0 20px rgba(190,145,255,.70),
    0 0 55px rgba(135,84,255,.38),
    0 0 110px rgba(99,55,220,.25) !important;

  animation:
    chVoiceCore
    3.2s
    ease-in-out
    infinite !important;
}


/* ses halkaları */

.ai-voice-ring {
  position: absolute !important;

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

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

  border-radius: 50% !important;

  border:
    2px solid
    rgba(161,115,255,.52) !important;

  box-shadow:
    0 0 24px rgba(134,82,255,.18),
    inset 0 0 25px rgba(139,91,255,.08) !important;

  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(.38);

  animation:
    chVoiceWave
    5.2s
    cubic-bezier(.2,.55,.25,1)
    infinite !important;
}


.ai-voice-ring::after {
  content: "" !important;

  position: absolute !important;

  inset: -12px !important;

  border-radius: 50% !important;

  border:
    1px solid
    rgba(137,94,255,.15) !important;

  filter:
    blur(3px) !important;
}


.ring-one {
  animation-delay: 0s !important;
}

.ring-two {
  animation-delay: 1.3s !important;
}

.ring-three {
  animation-delay: 2.6s !important;
}

.ring-four {
  animation-delay: 3.9s !important;
}


/* dönen küçük ışık noktaları */

.ai-orbit-dot {
  position: absolute !important;

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

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

  border-radius: 50% !important;

  background:
    #c5a8ff !important;

  box-shadow:
    0 0 10px #a978ff,
    0 0 20px rgba(151,99,255,.65) !important;

  transform-origin:
    0 0 !important;
}


.dot-one {
  animation:
    chOrbitOne
    10s linear
    infinite !important;
}

.dot-two {
  width: 4px !important;
  height: 4px !important;

  opacity: .65 !important;

  animation:
    chOrbitTwo
    14s linear
    infinite reverse !important;
}


/* Animasyonlar */

@keyframes chVoiceWave {

  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(.35);
  }

  8% {
    opacity: .75;
  }

  42% {
    opacity: .35;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(3.2);
  }

}


@keyframes chVoiceCore {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(.92);

    opacity: .72;
  }

  30% {
    transform:
      translate(-50%, -50%)
      scale(1.07);

    opacity: 1;
  }

  55% {
    transform:
      translate(-50%, -50%)
      scale(.98);

    opacity: .82;
  }

  72% {
    transform:
      translate(-50%, -50%)
      scale(1.12);

    opacity: 1;
  }

}


@keyframes chAuraBreath {

  0%,
  100% {
    transform: scale(.92);
    opacity: .65;
  }

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

}


@keyframes chOrbitOne {

  from {
    transform:
      rotate(0deg)
      translateX(205px);
  }

  to {
    transform:
      rotate(360deg)
      translateX(205px);
  }

}


@keyframes chOrbitTwo {

  from {
    transform:
      rotate(0deg)
      translateX(270px);
  }

  to {
    transform:
      rotate(360deg)
      translateX(270px);
  }

}


/* Cihaz her zaman önde */

.device-hero-image {
  position: relative !important;
  z-index: 5 !important;
}


/* TABLET */

@media (max-width: 980px) {

  .ai-voice-bg {
    width: 470px !important;
    height: 470px !important;

    left: 52% !important;

    opacity: .78 !important;
  }

}


/* MOBILE */

@media (max-width: 760px) {

  .ai-voice-bg {
    width: 340px !important;
    height: 340px !important;

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

    opacity: .58 !important;
  }

  .ai-voice-core {
    width: 48px !important;
    height: 48px !important;
  }

  .ai-voice-ring {
    width: 100px !important;
    height: 100px !important;
  }

  .dot-one {
    display: none !important;
  }

  .dot-two {
    display: none !important;
  }

}


/* Hareket azaltma seçeneği */

@media (prefers-reduced-motion: reduce) {

  .ai-voice-bg *,
  .ai-voice-bg::before {
    animation: none !important;
  }

}

/* =========================================================
   CHATTER HALL AI VOICE RING V9
   Cihazin arkasinda belirgin mor ses halkasi
========================================================= */

.device-only-hero {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* eski glow varsa kapat */
.device-glow,
.ai-voice-bg {
  display: none !important;
}


/* ANA HALKA */

.device-only-hero::before {
  content: "" !important;

  position: absolute !important;

  left: 57% !important;
  top: 49% !important;

  width: 560px !important;
  height: 560px !important;

  transform:
    translate(-50%, -50%)
    scale(.82);

  border-radius: 50% !important;

  z-index: 1 !important;

  pointer-events: none !important;

  background:
    radial-gradient(
      circle,
      rgba(168,120,255,.22) 0%,
      rgba(139,91,255,.13) 18%,
      transparent 36%
    ),
    radial-gradient(
      circle,
      transparent 0%,
      transparent 42%,
      rgba(155,107,255,.55) 43%,
      rgba(155,107,255,.28) 44%,
      transparent 46%,
      transparent 58%,
      rgba(117,79,255,.28) 59%,
      transparent 61%,
      transparent 72%,
      rgba(108,74,240,.14) 73%,
      transparent 75%
    ) !important;

  filter:
    drop-shadow(0 0 18px rgba(137,90,255,.50))
    drop-shadow(0 0 45px rgba(99,63,220,.24)) !important;

  opacity: .86 !important;

  animation:
    chatterVoicePulseA
    3.4s
    ease-in-out
    infinite !important;
}


/* DISA YAYILAN HALKA */

.device-only-hero::after {
  content: "" !important;

  position: absolute !important;

  left: 57% !important;
  top: 49% !important;

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

  transform:
    translate(-50%, -50%)
    scale(.55);

  border-radius: 50% !important;

  border:
    2px solid
    rgba(165,112,255,.52) !important;

  box-shadow:
    0 0 25px rgba(148,95,255,.34),
    inset 0 0 35px rgba(121,73,255,.10) !important;

  z-index: 1 !important;

  pointer-events: none !important;

  opacity: 0;

  animation:
    chatterVoicePulseB
    3.4s
    ease-out
    infinite !important;
}


/* cihaz mutlaka halkalarin ustunde */

.device-hero-image {
  position: relative !important;
  z-index: 5 !important;
}


/* ana halka nefes */

@keyframes chatterVoicePulseA {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(.82);

    opacity: .56;
  }

  45% {
    transform:
      translate(-50%, -50%)
      scale(1.02);

    opacity: 1;
  }

  70% {
    transform:
      translate(-50%, -50%)
      scale(.94);

    opacity: .72;
  }

}


/* ses dalgasi gibi disari yayil */

@keyframes chatterVoicePulseB {

  0% {
    transform:
      translate(-50%, -50%)
      scale(.58);

    opacity: 0;
  }

  12% {
    opacity: .78;
  }

  65% {
    opacity: .30;
  }

  100% {
    transform:
      translate(-50%, -50%)
      scale(1.65);

    opacity: 0;
  }

}


/* MOBILE */

@media (max-width: 760px) {

  .device-only-hero::before {
    left: 50% !important;

    width: 340px !important;
    height: 340px !important;

    opacity: .65 !important;
  }

  .device-only-hero::after {
    left: 50% !important;

    width: 270px !important;
    height: 270px !important;
  }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

  .device-only-hero::before,
  .device-only-hero::after {
    animation: none !important;
  }

}

/* =========================================================
   CHATTER HALL HERO CENTER WAVE V1
   Ortada duran arka plan mor AI/ses halkasi
========================================================= */

/* once eski cihaz arkasi efekti kapat */
.device-only-hero::before,
.device-only-hero::after {
  display: none !important;
}

/* hero ana alan */
.hero,
.hero-section,
.landing-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* hero icindeki tum gercek icerik ustte kalsin */
.hero > *,
.hero-section > *,
.landing-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ORTADAKI yumusak glow */
.hero::before,
.hero-section::before,
.landing-hero::before {
  content: "" !important;
  position: absolute !important;
  left: 58% !important;
  top: 52% !important;
  width: 900px !important;
  height: 900px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .95 !important;

  background:
    radial-gradient(
      circle,
      rgba(149, 95, 255, .18) 0%,
      rgba(129, 82, 255, .11) 22%,
      rgba(96, 60, 225, .07) 38%,
      rgba(70, 40, 170, .03) 52%,
      transparent 72%
    ) !important;

  filter:
    blur(6px)
    drop-shadow(0 0 60px rgba(124,82,255,.26)) !important;
}

/* Ses dalgasi halkalari */
.hero::after,
.hero-section::after,
.landing-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 58% !important;
  top: 52% !important;
  width: 760px !important;
  height: 760px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .95 !important;

  background:
    radial-gradient(circle, transparent 0 34%, rgba(162,108,255,.20) 34.4%, transparent 35.2%),
    radial-gradient(circle, transparent 0 46%, rgba(144,97,255,.14) 46.5%, transparent 47.2%),
    radial-gradient(circle, transparent 0 58%, rgba(126,84,246,.12) 58.5%, transparent 59.2%),
    radial-gradient(circle, transparent 0 70%, rgba(112,72,235,.10) 70.5%, transparent 71.2%) !important;

  filter:
    blur(.3px)
    drop-shadow(0 0 16px rgba(150,96,255,.25)) !important;

  animation: chatterHeroWavePulse 4.8s ease-in-out infinite !important;
}

@keyframes chatterHeroWavePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(.96);
    opacity: .72;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: .84;
  }
}

/* cihazlar bunun ustunde dursun */
.device-only-hero,
.device-hero-image,
.hero-visual,
.hero-media {
  position: relative !important;
  z-index: 3 !important;
}

/* mobilde ortalama */
@media (max-width: 900px) {
  .hero::before,
  .hero-section::before,
  .landing-hero::before {
    left: 50% !important;
    top: 44% !important;
    width: 520px !important;
    height: 520px !important;
    opacity: .70 !important;
  }

  .hero::after,
  .hero-section::after,
  .landing-hero::after {
    left: 50% !important;
    top: 44% !important;
    width: 420px !important;
    height: 420px !important;
    opacity: .72 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .hero-section::after,
  .landing-hero::after {
    animation: none !important;
  }
}



/* =========================================================
   CHATTER HALL AI CENTER WAVE V10
========================================================= */


/* Önce eski halka sistemlerini tamamen kapat */

.hero::before,
.hero::after,
.hero-section::before,
.hero-section::after,
.landing-hero::before,
.landing-hero::after,
.device-only-hero::before,
.device-only-hero::after,
.ai-voice-bg,
.device-glow {
  display: none !important;
}


/* HERO clipping yapmasın */

.hero {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}


/* AI DALGA ALANI */

.ai-center-wave-v10 {
  position: absolute !important;

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

  width: 760px !important;
  height: 760px !important;

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

  z-index: 0 !important;

  pointer-events: none !important;

  overflow: visible !important;
}


/* merkez aura */

.ai-center-wave-v10::before {
  content: "" !important;

  position: absolute !important;

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

  width: 360px !important;
  height: 360px !important;

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

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(175, 122, 255, .18) 0%,
      rgba(137, 87, 255, .12) 30%,
      rgba(100, 61, 220, .06) 52%,
      transparent 75%
    ) !important;

  filter: blur(35px) !important;

  animation:
    aiAuraBreathV10
    3.2s
    ease-in-out
    infinite !important;
}


/* PARLAK MERKEZ */

.ai-wave-core {
  position: absolute !important;

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

  width: 24px !important;
  height: 24px !important;

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

  border-radius: 50% !important;

  background:
    rgba(190, 145, 255, .65) !important;

  box-shadow:
    0 0 16px rgba(190,145,255,.55),
    0 0 38px rgba(140,88,255,.45),
    0 0 85px rgba(105,65,230,.28) !important;

  animation:
    aiCorePulseV10
    2.6s
    ease-in-out
    infinite !important;
}


/* DALGA HALKALARI */

.ai-wave-ring {
  position: absolute !important;

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

  width: 250px !important;
  height: 250px !important;

  margin-left: -125px !important;
  margin-top: -125px !important;

  border-radius: 50% !important;

  border:
    2px solid
    rgba(147, 95, 255, .42) !important;

  box-shadow:
    0 0 18px rgba(129, 76, 255, .18),
    inset 0 0 18px rgba(129, 76, 255, .08) !important;

  opacity: 0;

  transform: scale(.35);

  animation:
    aiWaveExpandV10
    5s
    cubic-bezier(.16,.58,.25,1)
    infinite !important;

  will-change:
    transform,
    opacity !important;
}


.wave-1 {
  animation-delay: 0s !important;
}

.wave-2 {
  animation-delay: 1s !important;
}

.wave-3 {
  animation-delay: 2s !important;
}

.wave-4 {
  animation-delay: 3s !important;
}

.wave-5 {
  animation-delay: 4s !important;
}


/* Gerçek büyüyüp yayılan halka */

@keyframes aiWaveExpandV10 {

  0% {
    transform: scale(.32);
    opacity: 0;
  }

  8% {
    opacity: .72;
  }

  28% {
    opacity: .48;
  }

  60% {
    opacity: .20;
  }

  100% {
    transform: scale(3.25);
    opacity: 0;
  }

}


/* merkez konuşuyormuş gibi */

@keyframes aiCorePulseV10 {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(.75);

    opacity: .45;
  }

  18% {
    transform:
      translate(-50%, -50%)
      scale(1.25);

    opacity: 1;
  }

  38% {
    transform:
      translate(-50%, -50%)
      scale(.88);

    opacity: .65;
  }

  58% {
    transform:
      translate(-50%, -50%)
      scale(1.45);

    opacity: 1;
  }

  76% {
    transform:
      translate(-50%, -50%)
      scale(.92);

    opacity: .70;
  }

}


/* arkadaki mor ışık da nefes alsın */

@keyframes aiAuraBreathV10 {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(.82);

    opacity: .55;
  }

  50% {
    transform:
      translate(-50%, -50%)
      scale(1.18);

    opacity: 1;
  }

}


/* İçerikler dalganın üstünde */

.hero-copy,
.device-only-hero {
  position: relative !important;
  z-index: 3 !important;
}


/* =========================================================
   CIHAZ GORSELI SAGDAN KESILMESIN
========================================================= */

.device-only-hero {
  overflow: visible !important;

  transform:
    translateX(-55px) !important;
}


.device-hero-image {
  width:
    min(1030px, 63vw) !important;

  max-width: none !important;

  position: relative !important;

  z-index: 5 !important;

  transform:
    translateX(0)
    translateY(10px) !important;

  object-fit: contain !important;
}


/* Büyük ekran */

@media (min-width: 1500px) {

  .device-hero-image {
    width:
      min(1080px, 62vw) !important;
  }

}


/* Laptop ekran */

@media (max-width: 1360px) {

  .device-only-hero {
    transform:
      translateX(-35px) !important;
  }

  .device-hero-image {
    width:
      min(930px, 62vw) !important;
  }

}


/* TABLET */

@media (max-width: 980px) {

  .ai-center-wave-v10 {
    left: 50% !important;
    top: 55% !important;

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

  .device-only-hero {
    transform: none !important;
  }

  .device-hero-image {
    width: 90vw !important;
  }

}


/* MOBILE */

@media (max-width: 760px) {

  .ai-center-wave-v10 {
    width: 360px !important;
    height: 360px !important;

    opacity: .65 !important;
  }

  .ai-wave-ring {
    width: 150px !important;
    height: 150px !important;

    margin-left: -75px !important;
    margin-top: -75px !important;
  }

  .device-hero-image {
    width: 112vw !important;
  }

}


/* =========================================================
   CHATTER HALL LANDING ONE SCREEN V11
========================================================= */

/* alttaki 3 bilgi kutusunu kaldır */
.feature-strip,
.mini-features {
  display: none !important;
}


/* hero biraz yukarı ve daha sıkı */
@media (min-width: 901px) {

  .hero {
    min-height:
      calc(100vh - 94px) !important;

    padding:
      0
      0
      18px !important;

    align-items:
      center !important;
  }


  .hero-copy {
    transform:
      translateY(-12px) !important;
  }


  .device-only-hero {
    min-height:
      610px !important;

    transform:
      translateX(-55px)
      translateY(-12px) !important;
  }


  .ai-center-wave-v10 {
    top:
      49% !important;
  }

}


/* küçük laptop ekranlarında taşma olmasın */
@media (min-width: 901px) and (max-height: 800px) {

  .hero h1 {
    font-size:
      clamp(58px, 5.8vw, 90px) !important;
  }

  .hero-description {
    margin-top:
      22px !important;
  }

  .hero-buttons {
    margin-top:
      25px !important;
  }

  .device-only-hero {
    min-height:
      540px !important;
  }

  .device-hero-image {
    width:
      min(930px, 60vw) !important;
  }

}


/* mobilde normal scroll devam etsin */
@media (max-width: 900px) {

  .hero-copy {
    transform:
      none !important;
  }

  .device-only-hero {
    transform:
      none !important;
  }

}

/* =========================================================
   CHATTER HALL ORGANIC AUDIO WAVE V12
========================================================= */

.hero-visual,
.hero-right,
.device-showcase,
.device-only-hero {
  position: relative !important;
  z-index: 2 !important;
}

.hero-audio-bg{
  position:absolute !important;
  left:64% !important;
  top:52% !important;
  width:min(760px, 54vw) !important;
  height:min(760px, 54vw) !important;
  transform:translate(-50%, -50%) !important;
  pointer-events:none !important;
  z-index:1 !important;
  filter: blur(.2px);
}

.audio-core{
  position:absolute;
  left:50%;
  top:50%;
  width:180px;
  height:180px;
  transform:translate(-50%, -50%);
  border-radius:46% 54% 58% 42% / 44% 56% 40% 60%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(145,102,255,.16) 0%,
      rgba(123,73,255,.11) 36%,
      rgba(96,49,255,.06) 58%,
      rgba(40,14,82,0) 100%
    );
  box-shadow:
    0 0 80px rgba(129,78,255,.16),
    0 0 140px rgba(111,58,255,.12);
  animation:
    audioCorePulse 1.25s ease-in-out infinite,
    audioMorph 4.5s ease-in-out infinite alternate;
}

.audio-wave{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform:translate(-50%, -50%) scale(.72);
  border-radius:47% 53% 58% 42% / 41% 59% 43% 57%;
  border:2px solid rgba(146,101,255,.13);
  box-shadow:
    0 0 20px rgba(131,85,255,.10),
    inset 0 0 24px rgba(138,87,255,.04);
  opacity:0;
  mix-blend-mode:screen;
  animation-name: audioWavePulse, audioMorph;
  animation-timing-function: cubic-bezier(.2,.6,.2,1), ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.wave-1{
  animation-duration: 1.55s, 4.8s;
  animation-delay: 0s, 0s;
}
.wave-2{
  animation-duration: 1.55s, 5.4s;
  animation-delay: .26s, .3s;
}
.wave-3{
  animation-duration: 1.55s, 4.9s;
  animation-delay: .52s, .6s;
}
.wave-4{
  animation-duration: 1.55s, 5.2s;
  animation-delay: .78s, .9s;
}
.wave-5{
  animation-duration: 1.55s, 5.8s;
  animation-delay: 1.04s, 1.2s;
}

@keyframes audioWavePulse{
  0%{
    transform:translate(-50%, -50%) scale(.52) rotate(0deg);
    opacity:0;
    border-color:rgba(164,110,255,.22);
    box-shadow:
      0 0 18px rgba(140,92,255,.10),
      inset 0 0 18px rgba(146,101,255,.03);
  }
  12%{
    opacity:.50;
  }
  35%{
    opacity:.34;
  }
  65%{
    opacity:.16;
  }
  100%{
    transform:translate(-50%, -50%) scale(1.13) rotate(10deg);
    opacity:0;
    border-color:rgba(151,99,255,.03);
    box-shadow:
      0 0 46px rgba(128,82,255,.04),
      inset 0 0 26px rgba(128,82,255,.02);
  }
}

@keyframes audioCorePulse{
  0%,100%{
    transform:translate(-50%, -50%) scale(.96);
    opacity:.82;
  }
  50%{
    transform:translate(-50%, -50%) scale(1.06);
    opacity:1;
  }
}

@keyframes audioMorph{
  0%{
    border-radius:47% 53% 58% 42% / 41% 59% 43% 57%;
  }
  20%{
    border-radius:58% 42% 49% 51% / 54% 46% 58% 42%;
  }
  40%{
    border-radius:44% 56% 39% 61% / 47% 53% 45% 55%;
  }
  60%{
    border-radius:55% 45% 60% 40% / 38% 62% 48% 52%;
  }
  80%{
    border-radius:42% 58% 52% 48% / 57% 43% 61% 39%;
  }
  100%{
    border-radius:51% 49% 43% 57% / 46% 54% 40% 60%;
  }
}


/* cihazlar bu katmanın üstünde kalsın */
.device-hero-image,
.device-hero-phone,
.device-stack,
.hero-device-wrap,
.hero-devices{
  position:relative !important;
  z-index:3 !important;
}


/* masaüstü konum */
@media (min-width: 901px){
  .hero-audio-bg{
    left:66% !important;
    top:54% !important;
    width:min(820px, 58vw) !important;
    height:min(820px, 58vw) !important;
    opacity:.95 !important;
  }
}


/* daha küçük laptoplarda biraz küçült */
@media (min-width: 901px) and (max-width: 1360px){
  .hero-audio-bg{
    left:65% !important;
    width:min(680px, 54vw) !important;
    height:min(680px, 54vw) !important;
  }
}


/* mobilde çok baskın olmasın */
@media (max-width: 900px){
  .hero-audio-bg{
    left:50% !important;
    top:48% !important;
    width:92vw !important;
    height:92vw !important;
    opacity:.42 !important;
  }

  .audio-wave{
    border-width:1.5px;
  }

  .audio-core{
    width:120px;
    height:120px;
  }
}

/* =========================================================
   CHATTER HALL ORGANIC AUDIO WAVE V12 END
========================================================= */



/* =========================================================
   CHATTER HALL VOICE ORB V14
========================================================= */

.hero,
.hero-inner,
.hero-content,
.hero-right,
.hero-visual,
.hero-devices,
.device-only-hero,
.device-showcase {
  position: relative;
}

/* Orb artik ekranin daha ortasinda */
.hero-voice-orb{
  position: absolute;
  left: 52%;
  top: 54%;
  width: min(720px, 44vw);
  height: min(720px, 44vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  opacity: .95;
}

.hero-voice-orb canvas{
  width: 100%;
  height: 100%;
  display: block;
}

/* cihazlar orb'un onunde kalsin ama orb ortaya gelsin */
.hero-right,
.hero-visual,
.hero-devices,
.device-only-hero,
.device-showcase,
.hero-laptop,
.hero-phone,
.device-frame,
.device-laptop,
.device-phone {
  position: relative;
  z-index: 3;
}

/* tasma olmasin */
.hero,
.hero-inner,
.hero-content,
.hero-right,
.hero-visual {
  overflow: visible !important;
}

@media (max-width: 1400px){
  .hero-voice-orb{
    left: 52%;
    top: 54%;
    width: min(650px, 42vw);
    height: min(650px, 42vw);
  }
}

@media (max-width: 1100px){
  .hero-voice-orb{
    left: 56%;
    top: 53%;
    width: min(560px, 48vw);
    height: min(560px, 48vw);
    opacity: .88;
  }
}

@media (max-width: 900px){
  .hero-voice-orb{
    left: 50%;
    top: 46%;
    width: 88vw;
    height: 88vw;
    opacity: .72;
  }
}

/* =========================================================
   CHATTER HALL VOICE ORB V14 END
========================================================= */

/* =========================================================
   CHATTER HALL ORB CLEAN FINAL V15
========================================================= */


/* ---------------------------------------------------------
   ESKI BUTUN HALKA / ORB SISTEMLERINI OLDUR
--------------------------------------------------------- */

.ai-voice-bg,
.ai-center-wave-v10,
.hero-audio-bg,
.hero-voice-orb,
.device-glow,
.preview-orbit,
.preview-glow {
  display: none !important;
}


/* Eski pseudo-element halkalar da tamamen kapalı */

.hero::before,
.hero::after,
.hero-section::before,
.hero-section::after,
.landing-hero::before,
.landing-hero::after,
.device-only-hero::before,
.device-only-hero::after {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   HERO LAYER SISTEMI
--------------------------------------------------------- */

.hero {
  position: relative !important;

  isolation: isolate !important;

  overflow: visible !important;
}


/* TEK yeni orb */

.hero-voice-orb-clean-v15 {
  position: absolute !important;

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

  width: 720px !important;
  height: 720px !important;

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

  pointer-events: none !important;

  overflow: visible !important;

  z-index: 0 !important;

  opacity: .93 !important;
}


.hero-voice-orb-clean-v15 canvas {
  width: 100% !important;
  height: 100% !important;

  display: block !important;
}


/* ---------------------------------------------------------
   YAZI VE CIHAZLAR ORB'UN USTUNDE
--------------------------------------------------------- */

.hero-copy {
  position: relative !important;
  z-index: 2 !important;
}


.device-only-hero {
  position: relative !important;
  z-index: 2 !important;

  overflow: visible !important;
}


.device-hero-image {
  position: relative !important;
  z-index: 3 !important;
}


/* ---------------------------------------------------------
   DESKTOP
--------------------------------------------------------- */

@media (min-width: 1400px) {

  .hero-voice-orb-clean-v15 {
    width: 760px !important;
    height: 760px !important;

    left: 50% !important;
  }

}


/* ---------------------------------------------------------
   LAPTOP
--------------------------------------------------------- */

@media (max-width: 1360px) {

  .hero-voice-orb-clean-v15 {
    width: 640px !important;
    height: 640px !important;

    left: 50% !important;
  }

}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 980px) {

  .hero-voice-orb-clean-v15 {
    left: 50% !important;
    top: 52% !important;

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

    opacity: .72 !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

  .hero-voice-orb-clean-v15 {
    width: 90vw !important;
    height: 90vw !important;

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

    opacity: .48 !important;
  }

}


/* =========================================================
   CHATTER HALL ORB CLEAN FINAL V15 END
========================================================= */

/* =========================================================
   CHATTER HALL LANDING HOME NAV ACTIVE
========================================================= */

.landing-nav-active {
  position: relative !important;
  color: #ffffff !important;
}

.landing-nav-active::after {
  content: "" !important;

  position: absolute !important;

  left: 50% !important;
  bottom: -9px !important;

  width: 22px !important;
  height: 2px !important;

  transform: translateX(-50%) !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      #7758ff,
      #b28aff
    ) !important;

  box-shadow:
    0 0 10px
    rgba(140, 96, 255, .55) !important;
}

/* =========================================================
   CHATTER HALL LANDING HOME NAV ACTIVE END
========================================================= */

/* =========================================================
   CHATTER_HALL_LANDING_MOBILE_V1
========================================================= */

.mobile-play-download {
  display: none !important;
}

@media (max-width: 760px) {

  .navbar {
    width: calc(100% - 28px) !important;
    height: 76px !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    gap: 12px !important;
  }

  .brand img {
    width: 138px !important;
    max-width: 100% !important;
  }

  .nav-links {
    display: none !important;
  }

  .open-app {
    min-height: 40px !important;

    padding:
      0
      13px !important;

    border-radius: 12px !important;

    font-size: 11px !important;
    white-space: nowrap !important;
  }


  .hero {
    width: calc(100% - 32px) !important;

    min-height: auto !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 22px !important;

    padding:
      26px
      0
      24px !important;

    overflow: hidden !important;
  }

  .hero-copy {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;
  }

  .eyebrow {
    margin:
      0
      auto
      22px !important;

    font-size: 10px !important;
  }

  .hero h1 {
    width: 100% !important;

    font-size:
      clamp(
        52px,
        15vw,
        68px
      ) !important;

    line-height: .89 !important;

    letter-spacing:
      -.065em !important;
  }

  .hero-description {
    width: 100% !important;
    max-width: 100% !important;

    margin:
      25px
      auto
      0 !important;

    padding:
      0
      4px !important;

    font-size: 15px !important;
    line-height: 1.55 !important;

    text-align: center !important;

    overflow-wrap: break-word !important;
  }


  .hero-buttons {
    width: 100% !important;

    margin-top: 28px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 12px !important;
  }

  .hero-buttons .btn {
    width: 100% !important;
    max-width: 360px !important;

    min-height: 54px !important;

    margin: 0 auto !important;
  }

  .desktop-download {
    display: none !important;
  }

  .mobile-play-download {
    display: inline-flex !important;
  }

  .google-play-icon {
    font-size: 17px !important;
  }


  .platform-list {
    width: 100% !important;

    margin-top: 18px !important;

    justify-content: center !important;
    flex-wrap: wrap !important;

    gap: 9px !important;

    font-size: 10px !important;
  }


  .device-only-hero {
    width: 100% !important;

    min-height: auto !important;

    padding:
      28px
      0
      4px !important;

    overflow: hidden !important;
  }

  .device-only-hero::before,
  .device-only-hero::after,
  .device-glow {
    display: none !important;
  }

  .device-hero-image {
    width: 100% !important;
    max-width: 430px !important;

    height: auto !important;

    margin: 0 auto !important;

    transform: none !important;
  }

}


/* SMALL MOBILE */

@media (max-width: 420px) {

  .hero {
    width: calc(100% - 24px) !important;
  }

  .hero h1 {
    font-size:
      clamp(
        48px,
        14.5vw,
        60px
      ) !important;
  }

  .hero-description {
    font-size: 14px !important;
  }

}

/* CHATTER_HALL_LANDING_MOBILE_V1 END */