:root {
  --green: #35d94a;
  --green-deep: #1f9e33;
  --ink: #1c2620;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #f4f8f5 55%, #eef4f0 100%);
  min-height: 100%;
  overflow: hidden;
}

/* ---- arka plan dokusu ---- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg .blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.5;
}
.bg .b1 { width: 44vw; height: 44vw; left: -10vw; top: 8vh;
  background: radial-gradient(circle, rgba(53,217,74,0.16), transparent 68%); }
.bg .b2 { width: 40vw; height: 40vw; right: -8vw; bottom: -6vh;
  background: radial-gradient(circle, rgba(53,217,74,0.13), transparent 68%); }
.bg .wave { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- üst bar (logo) ---- */
.topbar { position: fixed; top: 24px; left: 30px; z-index: 3; }
.topbar .logo { height: 74px; width: auto; user-select: none; -webkit-user-drag: none; }

/* ---- ana içerik ---- */
.app {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.6vh, 26px);
  padding: clamp(84px, 12vh, 110px) 16px clamp(16px, 3vh, 36px);
}

/* ---- Sahne: robot + yüz + parıltı + wiggle ---- */
.stage {
  position: relative;
  height: clamp(230px, 42vh, 440px);
  width: auto; max-width: 90vw;
  aspect-ratio: 616 / 669;
  --ring: 0;
  animation: floatWiggle 5.5s ease-in-out infinite;
  transform-origin: 50% 62%;
}
@keyframes floatWiggle {
  0%   { transform: translateY(0)    rotate(0deg)    scale(1);     }
  20%  { transform: translateY(-8px) rotate(-1deg)   scale(1.01);  }
  50%  { transform: translateY(2px)  rotate(0.3deg)  scale(1);     }
  70%  { transform: translateY(6px)  rotate(1deg)    scale(0.994); }
  100% { transform: translateY(0)    rotate(0deg)    scale(1);     }
}
.stage .body {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  /* drop-shadow filtresi KULLANILMIYOR: iOS Safari transform'lu ogede
     seffaf PNG'nin golgesini dikdortgen kutu olarak ciziyordu. Golge ayri katmanda. */
}
/* Dairesel yumuşak derinlik gölgesi (dikdörtgen kutu bug'ı yok) */
.stage .shadow {
  position: absolute; left: 14%; right: 14%; bottom: 3%; height: 24%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(22,52,32,0.28) 0%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}
.stage .face {
  position: absolute;
  left: 19.81%; top: 29.15%;
  width: 60.06%; height: 38.57%;
  pointer-events: none;
}
.stage .glow {
  position: absolute; inset: -16%;
  background: radial-gradient(46% 44% at 50% 50%,
              rgba(53,217,74,0.30) 0%, rgba(53,217,74,0.12) 46%, transparent 70%);
  opacity: calc(0.14 + var(--ring) * 0.45);                /* yumuşak ambiyans dolgu */
  filter: blur(16px);
  transition: opacity 70ms linear;
  pointer-events: none;
}
/* 360° eşit yeşil hale — robotun etrafını tam çember sarar, sesle nabız atar */
.stage .halo {
  position: absolute;
  left: 4%; right: 4%; top: 9%; bottom: 5%;
  border-radius: 50%;
  box-shadow: 0 0 calc(12px + var(--ring) * 55px) calc(var(--ring) * 12px)
              rgba(53,217,74, calc(0.12 + var(--ring) * 0.62));
  transition: box-shadow 70ms linear;
  pointer-events: none;
}

/* ---- Mic butonu (merkez) ---- */
.mic-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
/* GPT tarzı: beyaz daire + yeşil ikon + ince eş-merkezli halka */
.micbtn {
  position: relative;
  width: 84px; height: 84px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; color: var(--green);
  box-shadow: 0 16px 36px -12px rgba(31,158,51,0.30), 0 2px 6px rgba(0,0,0,0.05);
  transition: transform .1s ease, color .2s ease, box-shadow .2s ease;
}
.micbtn::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid rgba(53,217,74,0.22);
  transition: border-color .2s ease;
}
.micbtn:hover { color: var(--green-deep); box-shadow: 0 18px 40px -12px rgba(31,158,51,0.40); }
.micbtn:hover::before { border-color: rgba(53,217,74,0.4); }
.micbtn:active { transform: scale(0.95); }
/* AKTİF/dinleme: buton yeşile döner + beyaz ikon + nabız → net "kayıtta" hissi */
.micbtn.active {
  background: var(--green); color: #ffffff;
  box-shadow: 0 16px 38px -10px rgba(53,217,74,0.65);
}
.micbtn.active::before { border-color: rgba(53,217,74,0.5); }
.micbtn.active::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(53,217,74,0.55);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ---- İfade çipleri (emoji) ---- */
.emotions { display: flex; gap: 12px; }
.chip {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(53,217,74,0.32);
  background: rgba(255,255,255,0.9); cursor: pointer;
  font-size: 23px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.18);
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
}
.chip:hover { background: #f1faf3; border-color: var(--green); }
.chip:active { transform: scale(0.9); }

/* ---- Klavye çubuğu ---- */
.textbar {
  display: flex; align-items: center; gap: 8px;
  width: min(90vw, 440px);
  background: #fff; border: 1px solid #e3ece6;
  border-radius: 999px; padding: 6px 6px 6px 18px;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.25);
}
.textbar input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--ink); padding: 8px 0;
}
.sendbtn {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sendbtn:hover { background: var(--green-deep); }

/* ---- Alt dock (klavye / ses / bitir) ---- */
.dock {
  display: flex; gap: 10px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: 1px solid #e6efe9;
  border-radius: 999px; padding: 8px;
  box-shadow: 0 12px 34px -18px rgba(0,0,0,0.22);
}
.dockbtn {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #f2f5f3; color: #46584e;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.dockbtn:hover { background: #e6efe9; }
.dockbtn:active { transform: scale(0.92); }
.dockbtn.active { background: rgba(53,217,74,0.15); color: var(--green-deep); }
.dockbtn.danger { background: #fdecec; color: #e0483f; }
.dockbtn.danger:hover { background: #fbdede; }
.dockbtn[data-on="0"] .wv { display: none; }
.dockbtn[data-on="0"] { color: #9aa8a1; }

/* ---- ince footer ---- */
.powered {
  margin-top: 6px;
  text-align: center;
  font-size: 11px; letter-spacing: 0.4px;
  color: #a7b4ad; font-weight: 400;
}
.powered a {
  color: #6b7a72; font-weight: 700; letter-spacing: 0.8px;
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.powered a:hover { color: var(--green-deep); border-bottom-color: rgba(31,158,51,0.4); }

/* ---- küçük ekran (telefon) uyarlaması ---- */
@media (max-height: 750px), (max-width: 480px) {
  .bg .b1 { left: -24vw; top: 2vh; }
  .bg .b2 { right: -22vw; bottom: -2vh; }
  .topbar { top: 16px; left: 18px; }
  .topbar .logo { height: 56px; }
  .app { gap: clamp(10px, 2vh, 20px); padding-top: clamp(72px, 11vh, 96px); }
  .micbtn { width: 72px; height: 72px; }
  .chip { width: 46px; height: 46px; font-size: 21px; }
  .emotions { gap: 9px; }
  .dockbtn { width: 44px; height: 44px; }
}