/* WiPals v2 (24 Eyl 2026) — style.css'in ÜSTÜNE yüklenir.
   Hero iki sütun (solda söz, sağda canlı sahne), üst çubukta sabit "Haber al / İndir" düğmesi,
   dil önerisi şeridi, alt bilgi dil + sosyal bağlantıları. Hareket azaltılmışsa sahne durağandır. */

:root { --ease: cubic-bezier(.2,.8,.2,1); }

/* ---------- Üst çubuk ---------- */
.topbar nav { gap: 16px; }
.top-get.btn { min-height: 38px; padding: 8px 16px; font-size: 14px; border-radius: 12px; white-space: nowrap; }
.topbar nav a.top-get { color: #04120A; }
.topbar nav a.top-get:hover { color: #04120A; }
.topbar.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* ---------- Hero: iki sütun ---------- */
.hero { padding: 44px 0 64px; }
.hero::before {
  background:
    radial-gradient(ellipse 560px 380px at 78% 22%, rgba(57,255,136,.13), transparent 70%),
    radial-gradient(ellipse 480px 320px at 10% 58%, rgba(190,180,255,.09), transparent 70%);
  inset: -120px 0 auto 0; height: 1100px;
}
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 24px; align-items: center; max-width: 1200px;
}
.hero-text { max-width: 580px; margin: 0; text-align: left; animation: rise .9s var(--ease) both; }
.hero-text .meaning { margin: 0 0 18px; text-align: left; max-width: 46ch; }
.hero-text h1 { font-size: clamp(38px, 4.4vw, 58px); margin-top: 10px; }
.hero-text .lede { margin-left: 0; margin-right: 0; }
.hero-text .waitlist { justify-content: flex-start; }
.hero-text .wl-msg, .hero-text .wl-note { text-align: left; margin-left: 0; }
.hero-text .cta-row { justify-content: flex-start; margin-top: 18px; }
.hero-text .small { margin-top: 14px; }
.waitlist.flash input[type="email"] { border-color: var(--live); box-shadow: 0 0 0 4px rgba(57,255,136,.18); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Sahne ---------- */
.stage { position: relative; height: 640px; perspective: 1400px; }
.stage .glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.stage .g1 { width: 380px; height: 380px; left: 36%; top: 6%; background: radial-gradient(circle, rgba(57,255,136,.35), transparent 65%); }
.stage .g2 { width: 420px; height: 420px; left: 2%; top: 42%; background: radial-gradient(circle, rgba(255,161,224,.26), transparent 65%); }
.ly { position: absolute; inset: 0; pointer-events: none; will-change: transform; perspective: 1400px; }

.phone {
  position: absolute; left: 50%; top: 50%; width: 250px; aspect-ratio: 640 / 1391;
  border-radius: 42px; padding: 8px;
  background: linear-gradient(160deg, #262a35, #0b0c11);
  box-shadow: 0 0 0 1px rgba(255,255,255,.13) inset, 0 40px 90px rgba(0,0,0,.65);
}
.phone img { display: block; width: 100%; height: 100% !important; object-fit: cover; border-radius: 34px; }
.phone.back {
  margin: -262px 0 0 -8px; transform: rotateY(-14deg) rotateZ(7deg) scale(.92);
  animation: phoneBack 1.3s .05s var(--ease) both; filter: brightness(.82);
}
.phone.front {
  margin: -276px 0 0 -212px; transform: rotateY(12deg) rotateX(4deg) rotateZ(-5deg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 44px 100px rgba(0,0,0,.7), 0 0 90px rgba(57,255,136,.14);
  animation: phoneFront 1.3s .15s var(--ease) both;
}
@keyframes phoneBack {
  from { opacity: 0; filter: blur(14px) brightness(.82); transform: rotateY(-30deg) rotateZ(14deg) translateY(50px) scale(.84); }
  to { opacity: 1; filter: brightness(.82); transform: rotateY(-14deg) rotateZ(7deg) scale(.92); }
}
@keyframes phoneFront {
  from { opacity: 0; filter: blur(14px); transform: rotateY(28deg) rotateX(14deg) rotateZ(-12deg) translateY(50px) scale(.9); }
  to { opacity: 1; filter: none; transform: rotateY(12deg) rotateX(4deg) rotateZ(-5deg); }
}

/* Canlı bildirim: kilit ekranına düşen cümle */
.notif {
  position: absolute; left: -30px; right: -22px; top: 30%;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border-radius: 20px;
  background: rgba(22,24,32,.78); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
  animation: cardIn .9s 1.2s var(--ease) both;
}
.notif .av {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #05060A; font-weight: 800; font-size: 15px;
  box-shadow: 0 0 0 2px rgba(5,6,10,.9), 0 0 0 3.5px var(--live);
}
.notif .nt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif .who { font-size: 12px; color: var(--text-2); line-height: 1.2; }
.notif .who b { color: var(--text); font-weight: 800; }
.notif .line { font-family: Lora, Georgia, serif; font-weight: 600; font-size: 15.5px; line-height: 1.32; color: var(--text); }
.notif.swap { animation: notifSwap .7s var(--ease) both; }
@keyframes notifSwap {
  0% { opacity: 0; transform: translateY(-16px) scale(.96); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Yüzen widget kartları */
/* Kartlar uygulamadaki gerçek kartlar: kendi çerçeveleri ve yuvarlak köşeleri görselde (saydam köşe) */
.wcard {
  position: absolute; margin: 0;
  animation: cardIn .9s var(--ease) both, float var(--fd, 7s) ease-in-out var(--fdl, 0s) infinite alternate;
}
.wcard img { display: block; width: 100%; height: auto !important; filter: drop-shadow(0 20px 34px rgba(0,0,0,.6)); }
.c1 { width: 232px; right: -3%; top: 2%; rotate: 6deg; animation-delay: .45s, 0s; --fd: 6.6s; }
.c2 { width: 226px; left: -3%; bottom: 5%; rotate: -6deg; animation-delay: .65s, 0s; --fd: 8s; --fdl: -2s; }
@keyframes cardIn { from { opacity: 0; filter: blur(12px); scale: .7; } to { opacity: 1; filter: none; scale: 1; } }
@keyframes float { from { translate: 0 -7px; } to { translate: 0 9px; } }

/* Çıkartmalar: arka planda çalışan üç şey */
.stk {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 800; color: var(--text); line-height: 1;
  background: rgba(20,22,30,.78); border: 1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: cardIn .8s var(--ease) both, float 8s ease-in-out infinite alternate;
}
.stk .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.live { background: var(--live); box-shadow: 0 0 10px var(--live); animation: pulse 1.8s ease-in-out infinite; }
.dot.calm { background: var(--calm); box-shadow: 0 0 10px var(--calm); }
.dot.music { background: var(--music); box-shadow: 0 0 10px var(--music); }
@keyframes pulse { 50% { opacity: .45; } }
.s1 { left: 2%; top: 11%; rotate: -4deg; animation-delay: 1s, -1s; }
.s2 { right: -1%; top: 56%; rotate: 4deg; animation-delay: 1.15s, -4s; }
.s3 { left: -2%; top: 63%; rotate: -3deg; animation-delay: 1.3s, -6s; }

/* Emoji tepkileri */
.emo {
  position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  font-size: 25px; line-height: 1;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  animation: cardIn .8s var(--ease) both, float var(--fd, 7s) ease-in-out var(--fdl, 0s) infinite alternate;
}
.e1 { left: 40%; top: 0; animation-delay: 1.45s, 0s; --fd: 6s; }
.e2 { left: 1%; top: 47%; width: 44px; height: 44px; font-size: 22px; animation-delay: 1.55s, 0s; --fd: 7.4s; --fdl: -2s; }
.e3 { right: 1%; top: 40%; animation-delay: 1.65s, 0s; --fd: 8.2s; --fdl: -3s; }
.e4 { left: 60%; bottom: 1%; width: 44px; height: 44px; font-size: 22px; animation-delay: 1.75s, 0s; --fd: 6.8s; --fdl: -1s; }

/* Bildirim düşünce kalkan tepki */
.pop { position: absolute; left: 38%; top: 30%; font-size: 30px; opacity: 0; pointer-events: none; }
.pop.go { animation: popUp 1.6s var(--ease) both; }
@keyframes popUp {
  0% { opacity: 0; transform: translateY(10px) scale(.4); }
  20% { opacity: 1; transform: translateY(-8px) scale(1.15); }
  70% { opacity: 1; transform: translateY(-46px) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(.9); }
}

/* Parıltılar: marka renkleri */
.spark {
  position: absolute; width: 11px; height: 11px;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sparkle 3.2s ease-in-out infinite;
}
.k1 { left: 22%; top: 18%; background: var(--live); }
.k2 { right: 24%; top: 70%; background: var(--music); animation-delay: -1s; }
.k3 { left: 12%; top: 46%; background: var(--calm); width: 8px; height: 8px; animation-delay: -2s; }
.k4 { right: 6%; top: 60%; background: var(--live); width: 8px; height: 8px; animation-delay: -.5s; }
@keyframes sparkle { 0%, 100% { opacity: .2; scale: .6; } 50% { opacity: 1; scale: 1.1; } }

.stage.paused *, .stage.paused { animation-play-state: paused !important; }

/* ---------- Dil önerisi ---------- */
.suggest {
  position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; width: min(520px, calc(100% - 24px));
  padding: 10px 10px 10px 16px; border-radius: 16px;
  background: rgba(17,19,26,.94); border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.5); font-size: 14px; color: var(--text-2);
  animation: rise .5s var(--ease) both;
}
.suggest[hidden] { display: none; }
.suggest .s-text { flex: 1; min-width: 0; }
.suggest .s-go { font-weight: 800; color: #04120A; background: var(--live); padding: 9px 14px; border-radius: 10px; white-space: nowrap; }
.suggest .s-go:hover { text-decoration: none; filter: brightness(1.06); }
.suggest .s-x { background: none; border: 0; color: var(--text-3); font-size: 22px; width: 36px; height: 36px; cursor: pointer; border-radius: 10px; }

/* ---------- Alt bilgi ---------- */
footer .f-social, footer .f-langs { display: flex; flex-wrap: wrap; gap: 8px 16px; width: 100%; }
footer .f-social { margin-top: 4px; }
footer .f-langs a { font-size: 13px; }
footer .f-langs a[aria-current="page"] { color: var(--live); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1080px) {
  .tagline-top { display: none; }
}
@media (max-width: 980px) {
  .hero { padding: 8px 0 56px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .stage { order: -1; height: 520px; margin: 0 -24px; }
  .hero-text { max-width: 640px; margin: 0 auto; text-align: center; padding-top: 18px; }
  .hero-text .meaning, .hero-text .lede { margin-left: auto; margin-right: auto; text-align: center; }
  .hero-text .waitlist, .hero-text .cta-row { justify-content: center; }
  .hero-text .wl-msg, .hero-text .wl-note { text-align: center; margin-left: auto; margin-right: auto; }
  .phone { width: 216px; border-radius: 36px; padding: 7px; }
  .phone img { border-radius: 29px; }
  .phone.back { margin: -226px 0 0 -6px; }
  .phone.front { margin: -238px 0 0 -184px; }
  .c1 { width: 196px; right: 2%; }
  .c2 { width: 190px; left: 2%; }
}
@media (max-width: 640px) {
  .topbar .wrap { gap: 10px; }
  .topbar nav { gap: 8px; }
  .langpick { padding: 0 8px 0 9px; }
  .langpick select { font-size: 12.5px; max-width: 92px; padding-right: 14px; }
  .langpick::after { right: 9px; }
  .top-get.btn { padding: 8px 12px; font-size: 13px; min-height: 36px; }
  .stage { height: 440px; margin: 0 -24px; }
  .phone { width: 176px; border-radius: 30px; padding: 6px; }
  .phone img { border-radius: 24px; }
  .phone.back { margin: -186px 0 0 -2px; }
  .phone.front { margin: -196px 0 0 -150px; }
  .notif { left: -26px; right: -44px; top: 28%; padding: 9px 11px; gap: 9px; border-radius: 16px; }
  .notif .av { width: 28px; height: 28px; font-size: 13px; }
  .notif .who { font-size: 11px; }
  .notif .line { font-size: 13.5px; }
  .c1 { width: 150px; right: 1%; top: 3%; }
  .c2 { width: 148px; left: 1%; bottom: 4%; }
  .stk { font-size: 11.5px; padding: 7px 10px; gap: 6px; }
  .s1 { left: 2%; top: 13%; }
  .s2 { right: 1%; top: 58%; }
  .s3 { display: none; }
  .emo { width: 40px; height: 40px; font-size: 20px; }
  .e2, .e4 { width: 36px; height: 36px; font-size: 18px; }
  .e1 { left: 42%; top: 0; }
  .e2 { left: 3%; top: 64%; }
  .e3 { right: 2%; top: 40%; }
  .e4 { left: 62%; bottom: 2%; }
  .suggest { bottom: 12px; font-size: 13.5px; }
}
@media (max-width: 380px) {
  .topbar .logo .wm { font-size: 22px; }
  .langpick svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage *, .hero-text, .suggest { animation: none !important; }
  .ly { transform: none !important; }
}

/* Katman sırası: parıltılar en altta, tepki en üstte */
.stage .ly { z-index: 1; }
.stage .spark { z-index: 0; }
.stage .pop { z-index: 5; }