*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

:root {
  --bg: #000000;
  --sb: rgba(10, 10, 10, .85);
  --sf: rgba(255, 255, 255, .04);
  --sf2: rgba(255, 255, 255, .07);
  --bd: rgba(255, 255, 255, .08);
  --bd2: rgba(255, 255, 255, .12);
  --tx: #ffffff;
  --mu: rgba(255, 255, 255, .55);
  --dm: rgba(255, 255, 255, .25);
  --aa: #ffffff;
  --ab: #888888;
  --red: #e55865;
  --grn: #4ade80;
  --blu: #60a5fa;
  --ora: #fb923c;
  --ease: .2s ease;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: #000;
  color: #fff;
}

/* ── ESKİ KLASİK TEMA ── */
body.theme-klasik {
  --bg: #0c0c0c;
  --sb: #101010;
  --sf: #161616;
  --sf2: #1c1c1c;
  --bd: #222;
  --bd2: #2a2a2a;
  --tx: #e8e8e8;
  --mu: #888;
  --dm: #444;
  --aa: #ff66c4;
  --ab: #ffde59;
}

body.theme-klasik .sb {
  background: linear-gradient(180deg, var(--sb) 0%, color-mix(in srgb, var(--sb) 94%, var(--aa) 6%) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid rgba(255, 255, 255, .05) !important
}

body.theme-klasik .main {
  background: var(--bg) !important;
  backdrop-filter: none !important
}

body.theme-klasik .tb {
  background: color-mix(in srgb, var(--bg) 75%, transparent) !important;
  backdrop-filter: blur(20px) !important
}

body.theme-klasik .ic {
  background: var(--sf) !important;
  border-color: var(--bd2) !important;
  backdrop-filter: none !important
}

body.theme-klasik .msg.user .mb {
  background: var(--sf) !important;
  border-color: var(--bd2) !important;
  backdrop-filter: none !important
}

body.theme-klasik .cw {
  background: #080808 !important;
  border-color: #1e1e1e !important
}

body.theme-klasik .ch {
  background: #0c0c0c !important;
  border-bottom-color: #1e1e1e !important
}

body.theme-klasik .mbox {
  background: var(--sf) !important;
  border-color: var(--bd2) !important;
  backdrop-filter: none !important
}

body.theme-klasik .settings-content {
  background: var(--bg) !important
}

body.theme-klasik .modal {
  backdrop-filter: blur(4px) !important
}

/* ── LIGHT MODE ── */
/* ── TEMALAR ── */
body.theme-antep,
body.theme-vault {
  --bg: #200F07;
  --sb: #2a1508;
  --sf: #341a09;
  --sf2: #3e200c;
  --bd: #4a2a10;
  --bd2: #5a3315;
  --tx: #C5E384;
  --mu: #a0c060;
  --dm: #6b8a3a;
  --aa: #C5E384;
  --ab: #d4f090;
}

body.theme-altin,
body.theme-vault {
  --bg: #111111;
  --sb: #181818;
  --sf: #202020;
  --sf2: #282828;
  --bd: #303030;
  --bd2: #3a3a3a;
  --tx: #e8dcc0;
  --mu: #C8A96E;
  --dm: #907840;
  --aa: #C8A96E;
  --ab: #d8b878;
}

body.theme-vault {
  --bg: #111111;
  --sb: #181818;
  --sf: #202020;
  --sf2: #282828;
  --bd: #303030;
  --bd2: #3a3a3a;
  --tx: #e8dcc0;
  --mu: #C8A96E;
  --dm: #907840;
  --aa: #C8A96E;
  --ab: #d8b878;
}

body.theme-antep {
  --bg: #200F07;
  --sb: #2a1508;
  --sf: #341a09;
  --sf2: #3e200c;
  --bd: #4a2a10;
  --bd2: #5a3315;
  --tx: #C5E384;
  --mu: #a0c060;
  --dm: #6b8a3a;
  --aa: #C5E384;
  --ab: #d4f090;
}

body.theme-kehribar {
  --bg: #F2E0D0;
  --sb: #EDD8C5;
  --sf: #E8D0BB;
  --sf2: #E2C8B2;
  --bd: #D4B89A;
  --bd2: #CAA888;
  --tx: #2a1a0e;
  --mu: #6E88B0;
  --dm: #8fa8c8;
  --aa: #6E88B0;
  --ab: #5577a0;
}

body.theme-parsomen {
  --bg: #FAEFD9;
  --sb: #F5E8CC;
  --sf: #F0E1BE;
  --sf2: #EAD9B0;
  --bd: #DBC48A;
  --bd2: #D0B870;
  --tx: #3a2a0a;
  --mu: #E8A736;
  --dm: #c08820;
  --aa: #E8A736;
  --ab: #f0b840;
}

body.theme-matcha {
  --bg: #C2D8C4;
  --sb: #B8D0BA;
  --sf: #AEC8B0;
  --sf2: #A4C0A6;
  --bd: #8aaa8c;
  --bd2: #7a9a7c;
  --tx: #222222;
  --mu: #3a5a3c;
  --dm: #5a7a5c;
  --aa: #222222;
  --ab: #444444;
}

body.theme-sicak {
  --bg: #F4EDE4;
  --sb: #EDDED2;
  --sf: #E6D0C0;
  --sf2: #DFC2AE;
  --bd: #C8A88C;
  --bd2: #B89070;
  --tx: #111111;
  --mu: #444444;
  --dm: #888888;
  --aa: #111111;
  --ab: #333333;
}

body.theme-krem {
  --bg: #FFF3E0;
  --sb: #FFE8C8;
  --sf: #FFDCB0;
  --sf2: #FFD098;
  --bd: #F0B060;
  --bd2: #E0A040;
  --tx: #3a1a1a;
  --mu: #D62828;
  --dm: #a02020;
  --aa: #D62828;
  --ab: #e83a3a;
}

body.theme-gecemavisi {
  --bg: #1A1A2E;
  --sb: #16213E;
  --sf: #0F3460;
  --sf2: #1a3d6e;
  --bd: #204070;
  --bd2: #2a5080;
  --tx: #e0f4f2;
  --mu: #2EC4B6;
  --dm: #1a9a8e;
  --aa: #2EC4B6;
  --ab: #40ddd4;
}

body.theme-gecekozi,
body.theme-ember {
  --bg: #0D1117;
  --sb: #161b22;
  --sf: #1c2128;
  --sf2: #21262d;
  --bd: #2a3040;
  --bd2: #333c4a;
  --tx: #e6edf3;
  --mu: #FF6B35;
  --dm: #cc5020;
  --aa: #FF6B35;
  --ab: #ff8855;
}

body.theme-karagul,
body.theme-noir {
  --bg: #1A0A0A;
  --sb: #231010;
  --sf: #2e1515;
  --sf2: #381a1a;
  --bd: #4a2020;
  --bd2: #5a2828;
  --tx: #f0d0d8;
  --mu: #E8729A;
  --dm: #b05070;
  --aa: #E8729A;
  --ab: #f090b0;
}

body.theme-altin,
body.theme-vault {
  --bg: #111111;
  --sb: #181818;
  --sf: #202020;
  --sf2: #282828;
  --bd: #303030;
  --bd2: #3a3a3a;
  --tx: #e8dcc0;
  --mu: #C8A96E;
  --dm: #907840;
  --aa: #C8A96E;
  --ab: #d8b878;
}

body.theme-siyahbuz,
body.theme-abyss {
  --bg: #0A0F1E;
  --sb: #0d1428;
  --sf: #101932;
  --sf2: #131e3c;
  --bd: #1a2848;
  --bd2: #203055;
  --tx: #E4F0F6;
  --mu: #8ab8d0;
  --dm: #507090;
  --aa: #E4F0F6;
  --ab: #c0dded;
}

body.theme-toksik,
body.theme-toksikf1 {
  --bg: #000000;
  --sb: #050505;
  --sf: #0a0a0a;
  --sf2: #111111;
  --bd: #1a2a1a;
  --bd2: #203020;
  --tx: #ccffee;
  --mu: #00FF89;
  --dm: #00cc6a;
  --aa: #00FF89;
  --ab: #00dd77;
}

body.theme-suyesili,
body.theme-racinggreen {
  --bg: #010101;
  --sb: #040d0c;
  --sf: #071a18;
  --sf2: #0a2220;
  --bd: #0d3030;
  --bd2: #104040;
  --tx: #c0e8e4;
  --mu: #006F62;
  --dm: #005550;
  --aa: #006F62;
  --ab: #008878;
}

body.theme-audir {
  --bg: #C0C0C0;
  --sb: #b8b8b8;
  --sf: #adadad;
  --sf2: #a0a0a0;
  --bd: #909090;
  --bd2: #808080;
  --tx: #1a0808;
  --mu: #BB0A30;
  --dm: #880020;
  --aa: #BB0A30;
  --ab: #dd1a40;
}

body[class*="theme-"] .sbtn {
  background: var(--aa) !important;
  color: var(--bg) !important
}

body[class*="theme-"] .sbtn:hover {
  opacity: .85;
  transform: scale(1.06)
}

body[class*="theme-"] .abtn {
  background: var(--aa) !important;
  color: var(--bg) !important;
  border-color: var(--aa) !important
}

body[class*="theme-"] .tut-next {
  background: var(--aa) !important;
  color: var(--bg) !important
}

body[class*="theme-"] .sbrand {
  background: linear-gradient(to right, var(--aa), var(--ab));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

body[class*="theme-"] .tog-btn.on {
  background: var(--aa) !important
}

body[class*="theme-"] .mem-chip {
  background: rgba(0, 0, 0, .1);
  border-color: var(--aa);
  color: var(--aa)
}

body[class*="theme-"] .mode-badge {
  border-color: var(--aa) !important;
  color: var(--aa) !important
}

body[class*="theme-"] .pers-card.on {
  border-color: var(--aa);
  background: color-mix(in srgb, var(--aa) 12%, transparent)
}

body[class*="theme-"] .tab.active {
  background: var(--aa);
  color: var(--bg)
}

body[class*="theme-"] .amd code:not([class]) {
  color: var(--aa)
}

body[class*="theme-"] .sh-cmd {
  color: var(--aa)
}

body[class*="theme-"] .macb.tts-on {
  color: var(--aa)
}

body.lm {
  --bg: #F3F3F3;
  --sb: #EFEFEF;
  --sf: rgba(0, 0, 0, .04);
  --sf2: rgba(0, 0, 0, .07);
  --bd: rgba(0, 0, 0, .08);
  --bd2: rgba(0, 0, 0, .12);
  --tx: #171717;
  --mu: #777777;
  --dm: #BBBBBB;
  background: #f3f3f3 !important;
  color: #171717 !important;
}

body.lm #app-dot-canvas,
body.lm .app-gradient-overlay {
  display: none !important
}

body.lm .sb {
  background: rgba(245, 245, 245, .85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right-color: rgba(0, 0, 0, .06) !important
}

body.lm .main {
  background: rgba(243, 243, 243, .6) !important
}

body.lm .tb {
  background: rgba(243, 243, 243, .7) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom-color: rgba(0, 0, 0, .06) !important
}

body.lm .ic {
  background: rgba(255, 255, 255, .7) !important;
  border-color: rgba(0, 0, 0, .1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important
}

body.lm .msg.user .mb {
  background: rgba(0, 0, 0, .04) !important;
  border-color: rgba(0, 0, 0, .08) !important;
  color: #171717 !important;
  backdrop-filter: none !important
}

body.lm .cw {
  background: #f8f8f8 !important;
  border-color: #ddd !important;
  backdrop-filter: none !important
}

body.lm .ch {
  background: #f0f0f0 !important;
  border-color: #ddd !important
}

body.lm .cl2 {
  color: #aaa !important
}

body.lm .cw pre code {
  color: #24292e !important
}

body.lm .mbox {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(0, 0, 0, .1) !important;
  color: #171717 !important
}

body.lm .settings-grid-modal .mbox {
  background: rgba(255, 255, 255, .95) !important
}

body.lm .settings-sidebar {
  background: rgba(240, 240, 240, .9) !important;
  border-right-color: rgba(0, 0, 0, .06) !important
}

body.lm .settings-content {
  background: rgba(248, 248, 248, .9) !important;
  color: #171717 !important
}

body.lm .settings-card {
  background: rgba(0, 0, 0, .03) !important;
  border-color: rgba(0, 0, 0, .06) !important
}

body.lm .modal {
  background: rgba(255, 255, 255, .5) !important
}

/* ── ARKA PLAN RESMİ AKTİFKEN ── */
body.with-bg #app-dot-canvas,
body.with-bg .app-gradient-overlay {
  display: none !important
}

body.with-bg {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important
}

body.with-bg .sb {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important
}

body.with-bg .main {
  background: rgba(0, 0, 0, 0.4) !important
}

body.with-bg .tb {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important
}

body.with-bg .ic {
  background: rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.12) !important
}

body.with-bg .msg.user .mb {
  background: rgba(30, 30, 30, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.12) !important
}

body.with-bg .msg.ai .mb {
  background: rgba(20, 20, 20, 0.7) !important;
  border-radius: 12px;
  padding: 12px 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px)
}

body.with-bg .cw {
  background: rgba(0, 0, 0, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.1) !important
}

body.with-bg .ci:hover {
  background: rgba(255, 255, 255, 0.08) !important
}

body.with-bg .ci.on {
  background: rgba(255, 255, 255, 0.12) !important
}

body.with-bg .sbf {
  border-top-color: rgba(255, 255, 255, 0.08) !important
}

body.with-bg .sbh {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important
}

/* Light + arka plan */
body.lm.with-bg {
  color: #fff !important
}

body.lm.with-bg .sb {
  background: rgba(255, 255, 255, 0.65) !important
}

body.lm.with-bg .main {
  background: rgba(255, 255, 255, 0.5) !important
}

body.lm.with-bg .tb {
  background: rgba(255, 255, 255, 0.6) !important
}

body.lm.with-bg .ic {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.08) !important
}

body.lm.with-bg .msg.user .mb {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.08) !important
}

body.lm.with-bg .msg.ai .mb {
  background: rgba(255, 255, 255, 0.82) !important
}

body.lm.with-bg .cw {
  background: rgba(250, 250, 250, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.06) !important
}

body.lm ::-webkit-scrollbar-thumb {
  background: #ccc
}

body,
body.lm {
  transition: background .35s, color .35s
}

body * {
  transition: background-color .3s, border-color .3s, color .2s
}

body * svg,
body * img,
body * .tc,
body * .ld span {
  transition: none !important
}

.screen {
  position: fixed;
  inset: 0;
  transition: opacity .35s ease
}

.hidden {
  opacity: 0 !important;
  pointer-events: none !important
}

/* ── TUTORIAL (Cinematic) ── */
#tut {
  z-index: 1000;
  background: #050914;
  overflow: visible;
  perspective: 1500px
}

.film-grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 50; opacity: 0.05; mix-blend-mode: overlay;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>')
}

.tut-bg-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  opacity: 0.5
}

/* Hero text (arka plan) */
.tut-hero-text {
  position: absolute; z-index: 10; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; width: 100%; padding: 0 16px;
  pointer-events: none
}

.tut-tagline1 {
  font-size: clamp(2rem, 7vw, 6rem);
  font-weight: 700; letter-spacing: -2px; margin: 0 0 4px;
  color: #fff;
  text-shadow: 0 10px 30px rgba(255,255,255,0.2);
  will-change: transform, opacity; visibility: hidden
}

.tut-tagline2 {
  font-size: clamp(2rem, 7vw, 6rem);
  font-weight: 900; letter-spacing: -3px; margin: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.4) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; transform: translateZ(0);
  filter: drop-shadow(0 10px 20px rgba(255,255,255,0.15));
  will-change: transform, opacity
}

/* CTA Layer */
.tut-cta-layer {
  position: absolute; z-index: 10; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; width: 100%; padding: 0 24px;
  visibility: hidden; opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center
}

.tut-cta-layer.visible {
  visibility: visible;
  pointer-events: auto;
}

.tut-cta-layer.visible { pointer-events: auto }

.tut-cta-heading {
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 700; letter-spacing: -2px; margin: 0 0 16px;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.4) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; transform: translateZ(0)
}

.tut-cta-desc {
  color: rgba(255,255,255,0.45);
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  max-width: 520px; line-height: 1.7; margin: 0 0 40px; font-weight: 300
}

.tut-start-btn {
  padding: 16px 48px;
  border: none; border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #e2e8f0 100%);
  color: #0f172a; font-size: 17px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.1), 0 12px 24px -4px rgba(0,0,0,0.4), inset 0 1px 1px #fff;
  transition: all 0.4s cubic-bezier(0.25,1,0.5,1)
}

.tut-start-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 6px 12px rgba(0,0,0,0.2), 0 20px 32px rgba(0,0,0,0.5), inset 0 1px 1px #fff
}

.tut-start-btn:active { transform: translateY(1px) }

/* Card outer */
.tut-card-outer {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; perspective: 1500px
}

.tut-main-card {
  position: relative; overflow: hidden;
  width: 92vw; height: 92vh;
  border-radius: 32px;
  background: linear-gradient(145deg, #1a1a1a 0%, #050505 100%);
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,0.9),
    0 20px 40px -20px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(255,255,255,0.2),
    inset 0 -2px 4px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  transform: translateY(110vh)
}

@media(min-width:768px) {
  .tut-main-card { width: 85vw; height: 85vh; border-radius: 40px }
}

.tut-card-sheen {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 50;
  background: radial-gradient(800px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(255,255,255,0.06) 0%, transparent 40%);
  mix-blend-mode: screen
}

/* Card inner grid */
.tut-card-grid {
  position: relative; width: 100%; height: 100%;
  max-width: 1280px; margin: 0 auto;
  padding: 24px 16px;
  display: flex; flex-direction: column;
  justify-content: space-evenly; align-items: center; z-index: 10
}

@media(min-width:1024px) {
  .tut-card-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    padding: 0 48px; gap: 32px
  }
}

/* Brand name */
.tut-card-brand {
  order: 1; display: flex; justify-content: center;
  opacity: 0; z-index: 20
}
@media(min-width:1024px) { .tut-card-brand { order: 3; justify-content: flex-end } }

.tut-brand-name {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: -4px;
  background: linear-gradient(180deg, #fff 0%, #a1a1aa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; transform: translateZ(0);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.8))
}


/* Mockup wrapper */
.tut-mockup-wrapper {
  order: 2;
  position: relative; width: 100%; height: 360px;
  display: flex; align-items: center; justify-content: center; z-index: 10;
  opacity: 0
}
@media(min-width:1024px) { .tut-mockup-wrapper { height: 600px; order: 2 } }

.tut-mockup-inner {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.62);
}
@media(min-width:768px) { .tut-mockup-inner { transform: scale(0.85) } }
@media(min-width:1024px) { .tut-mockup-inner { transform: scale(1) } }

/* iPhone */
.tut-iphone {
  position: relative; width: 280px; height: 580px;
  border-radius: 3rem;
  background-color: #111;
  box-shadow:
    inset 0 0 0 2px #52525B,
    inset 0 0 0 7px #000,
    0 40px 80px -15px rgba(0,0,0,0.9),
    0 15px 25px -5px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; will-change: transform
}

.tut-hw-btn {
  position: absolute;
  background: linear-gradient(90deg,#404040 0%,#171717 100%);
  box-shadow: -2px 0 5px rgba(0,0,0,0.8), inset -1px 0 1px rgba(255,255,255,0.15), inset 1px 0 2px rgba(0,0,0,0.8);
  border-left: 1px solid rgba(255,255,255,0.05)
}
.tut-hw-vol1 { top: 120px; left: -3px; width: 3px; height: 25px; border-radius: 3px 0 0 3px }
.tut-hw-vol2 { top: 160px; left: -3px; width: 3px; height: 45px; border-radius: 3px 0 0 3px }
.tut-hw-vol3 { top: 220px; left: -3px; width: 3px; height: 45px; border-radius: 3px 0 0 3px }
.tut-hw-pwr  { top: 170px; right: -3px; width: 3px; height: 70px; border-radius: 0 3px 3px 0; transform: scaleX(-1) }

.tut-screen {
  position: absolute; inset: 7px;
  background: #050914; border-radius: 2.4rem;
  overflow: hidden; color: #fff; z-index: 10;
  box-shadow: inset 0 0 15px rgba(0,0,0,1)
}

.tut-screen-glare {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: linear-gradient(110deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0) 45%)
}

.tut-dynamic-island {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px; background: #000; border-radius: 20px;
  z-index: 50; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px
}

.tut-di-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.8); animation: tutPulse 2s infinite
}

@keyframes tutPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.tut-app-ui {
  position: relative; width: 100%; height: 100%;
  padding: 48px 20px 32px; display: flex; flex-direction: column
}

.tut-app-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px !important
}

.tut-phone-widget { opacity: 0 }

.tut-app-label {
  display: block; font-size: 10px; color: #a3a3a3;
  text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; margin-bottom: 2px
}

.tut-app-title {
  display: block; font-size: 18px; font-weight: 700; color: #fff
}

.tut-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #d4d4d4
}

.tut-ring-wrap {
  position: relative; width: 176px; height: 176px;
  margin: 0 auto 28px; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8))
}

.tut-ring-svg { position: absolute; inset: 0; width: 100%; height: 100% }

.tut-progress-ring {
  transform: rotate(-90deg); transform-origin: center;
  stroke-dasharray: 402; stroke-dashoffset: 402; stroke-linecap: round
}

.tut-ring-inner {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center
}

.tut-counter-val {
  font-size: 36px; font-weight: 900; letter-spacing: -1px; color: #fff
}

.tut-ring-label {
  font-size: 8px; color: rgba(147,197,253,0.5);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-top: 2px
}

.tut-widget-item {
  background: linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 16px; padding: 12px;
  display: flex; align-items: center; margin-bottom: 10px !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.05)
}

.tut-widget-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 12px; flex-shrink: 0
}

.tut-widget-ico-blue { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15) }
.tut-widget-ico-green { background: rgba(16,185,129,0.15); border: 1px solid rgba(52,211,153,0.2) }

.tut-widget-lines { flex: 1 }
.tut-wl { border-radius: 99px; background: #a3a3a3; margin-bottom: 6px }
.tut-wl-a { height: 8px; width: 80px }
.tut-wl-b { height: 6px; width: 48px; background: #404040; margin: 0 }
.tut-wl-c { height: 8px; width: 64px }
.tut-wl-d { height: 6px; width: 96px; background: #404040; margin: 0 }

.tut-home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 4px;
  background: rgba(255,255,255,0.2); border-radius: 99px
}

/* Floating badges */
.tut-badge {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(135deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 25px 50px -12px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.2);
  opacity: 0; z-index: 30
}

.tut-badge-top { top: 24px; left: -15px }
.tut-badge-bot { bottom: 48px; right: -15px }
@media(min-width:1024px) {
  .tut-badge-top { top: 48px; left: -80px }
  .tut-badge-bot { bottom: 80px; right: -80px }
}

.tut-badge-ico {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0
}

.tut-badge-title { color: #fff; font-size: 13px; font-weight: 700; margin: 0 0 2px }
.tut-badge-sub { color: rgba(255,255,255,0.4); font-size: 11px; margin: 0 }

/* Card text panels */
.tut-card-desc {
  order: 3; display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: 0 16px; opacity: 0; z-index: 20
}
@media(min-width:1024px) { .tut-card-desc { order: 1; text-align: left; padding: 0 } }

.tut-card-heading {
  color: #fff; font-size: clamp(1.2rem, 2.5vw, 2rem);
  font-weight: 700; letter-spacing: -0.5px; margin: 0 0 16px
}

.tut-card-text {
  color: rgba(147,197,253,0.7);
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  line-height: 1.7; margin: 0; display: none
}
@media(min-width:768px) { .tut-card-text { display: block } }

/* ── TUTORIAL — Ek süslemeler ── */

/* Arka plan ışık küreleri — GPU dostu (blend yok, sabit blur'lu hafif katman) */
.tut-orb {
  position: absolute; z-index: 1; border-radius: 50%;
  pointer-events: none; opacity: 0.45;
  will-change: transform; transform: translateZ(0)
}
.tut-orb-1 {
  width: 420px; height: 420px; top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(96,165,250,0.4) 0%, rgba(96,165,250,0) 68%);
  animation: tutOrbFloat1 20s ease-in-out infinite
}
.tut-orb-2 {
  width: 360px; height: 360px; bottom: -120px; right: -80px;
  background: radial-gradient(circle, rgba(52,211,153,0.35) 0%, rgba(52,211,153,0) 68%);
  animation: tutOrbFloat2 24s ease-in-out infinite
}
.tut-orb-3 {
  width: 300px; height: 300px; top: 38%; left: 52%;
  background: radial-gradient(circle, rgba(168,85,247,0.32) 0%, rgba(168,85,247,0) 68%);
  animation: tutOrbFloat3 28s ease-in-out infinite
}
@keyframes tutOrbFloat1 { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(70px,45px,0)} }
@keyframes tutOrbFloat2 { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-55px,-35px,0)} }
@keyframes tutOrbFloat3 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-45px,55px,0) scale(1.15)} }

/* Scroll ipucu (animasyonlu mouse) */
.tut-scroll-hint {
  position: absolute; z-index: 11; left: 50%; bottom: 46px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none; visibility: hidden
}
.tut-scroll-mouse {
  width: 26px; height: 42px; border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.45);
  display: flex; justify-content: center; padding-top: 7px;
  box-shadow: 0 0 20px rgba(255,255,255,0.1)
}
.tut-scroll-mouse span {
  width: 4px; height: 8px; border-radius: 4px; background: #fff;
  animation: tutScrollDot 1.6s ease-in-out infinite
}
@keyframes tutScrollDot {
  0%{opacity:0;transform:translateY(-4px)}
  30%{opacity:1}
  60%{opacity:1;transform:translateY(8px)}
  100%{opacity:0;transform:translateY(12px)}
}
.tut-scroll-hint-text {
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); animation: tutHintPulse 2s ease-in-out infinite
}
@keyframes tutHintPulse { 0%,100%{opacity:.35} 50%{opacity:.9} }

/* Üçüncü yüzen badge */
.tut-badge-mid { top: 46%; right: -25px }
@media(min-width:1024px) { .tut-badge-mid { top: 44%; right: -120px } }

/* CTA özellik pill'leri */
.tut-cta-features {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 560px; margin: 0 0 36px
}
.tut-feature-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 99px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), 0 8px 20px rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(16px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.25,1,0.5,1), transform 0.6s cubic-bezier(0.25,1,0.5,1)
}
.tut-feature-pill .tfp-ico { font-size: 15px }
.tut-cta-layer.visible .tut-feature-pill { opacity: 1; transform: translateY(0) scale(1) }
.tut-cta-layer.visible .tut-feature-pill:nth-child(1) { transition-delay: 0.15s }
.tut-cta-layer.visible .tut-feature-pill:nth-child(2) { transition-delay: 0.28s }
.tut-cta-layer.visible .tut-feature-pill:nth-child(3) { transition-delay: 0.41s }
.tut-cta-layer.visible .tut-feature-pill:nth-child(4) { transition-delay: 0.54s }

/* ── TUTORIAL — Özellik tanıtım bölümü ── */
.tut-features {
  position: absolute; inset: 0; z-index: 25;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px; gap: 8px;
  pointer-events: none; visibility: hidden
}
.tut-feat-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(147,197,253,0.7); margin-bottom: 4px
}
.tut-feat-title {
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  font-weight: 800; letter-spacing: -1.5px; margin: 0 0 24px;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.5) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; transform: translateZ(0)
}
.tut-feat-list {
  display: grid; gap: 12px; width: 100%; max-width: 760px;
  grid-template-columns: 1fr
}
@media (min-width: 768px) { .tut-feat-list { grid-template-columns: 1fr 1fr; gap: 14px } }

.tut-fitem {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 12px 28px rgba(0,0,0,0.35);
  opacity: 0; will-change: transform, opacity
}
.tut-fitem-ico {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1)
}
.tut-fitem-txt h3 {
  margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.3px
}
.tut-fitem-txt p {
  margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.5)
}

/* ── TUTORIAL — Olağan dışı efektler ── */

/* Animasyonlu aurora arka plan (yalnızca transform animasyonu — GPU dostu) */
.tut-aurora {
  position: absolute; inset: -35%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 22% 30%, rgba(96,165,250,0.20), transparent 62%),
    radial-gradient(34% 34% at 78% 26%, rgba(168,85,247,0.18), transparent 62%),
    radial-gradient(44% 44% at 50% 82%, rgba(52,211,153,0.16), transparent 62%);
  opacity: 0.85; will-change: transform; transform: translateZ(0);
  animation: tutAurora 26s ease-in-out infinite
}
@keyframes tutAurora {
  0%,100% { transform: rotate(0deg) scale(1) }
  50% { transform: rotate(10deg) scale(1.12) }
}

/* Scroll ilerleme çubuğu */
.tut-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: rgba(255,255,255,0.06); pointer-events: none
}
.tut-progress-fill {
  height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #60a5fa, #a855f7, #34d399);
  box-shadow: 0 0 12px rgba(96,165,250,0.6); will-change: transform
}

/* Sohbet "yazıyor" noktaları */
.tut-dot {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55);
  animation: tutTyping 1.3s ease-in-out infinite
}
.tut-dot:nth-child(2) { animation-delay: 0.18s }
.tut-dot:nth-child(3) { animation-delay: 0.36s }
@keyframes tutTyping {
  0%,60%,100% { transform: translateY(0); opacity: 0.4 }
  30% { transform: translateY(-5px); opacity: 1 }
}

.tut-chat-word { display: inline-block }

/* Yeni efektler için hareket azaltma guard'ı */
@media (prefers-reduced-motion: reduce) {
  .tut-aurora,
  .tut-dot { animation: none !important }
}

/* Mobilde aurora'yı hafiflet */
@media (max-width: 767px) {
  .tut-aurora { opacity: 0.6 }
}

/* ── TUTORIAL — Performans optimizasyonları ── */

/* Mobil: ağır katmanları sadeleştir (3. orb gizli, film-grain ve
   backdrop-filter kapalı — bunlar zayıf GPU'larda en çok kasanlar) */
@media (max-width: 767px) {
  .tut-orb-3 { display: none }
  .tut-orb { opacity: 0.35 }
  #tut .film-grain { display: none }
  .tut-badge { backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(135deg, rgba(28,28,30,0.92) 0%, rgba(18,18,20,0.92) 100%) }
  .tut-feature-pill { backdrop-filter: none; -webkit-backdrop-filter: none }
}

/* Hareket azaltma tercihi: sürekli dönen/atan animasyonları durdur */
@media (prefers-reduced-motion: reduce) {
  .tut-orb,
  .tut-scroll-mouse span,
  .tut-scroll-hint-text,
  .tut-di-dot { animation: none !important }
  .tut-orb-3 { display: none }
}

/* ── LOGIN ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fadeSlideIn {
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0px)
  }
}

@keyframes slideRightIn {
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0px)
  }
}

@keyframes animatedGradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

.aerr {
  display: none;
  margin-top: 8px;
  padding: 7px 12px;
  background: rgba(229, 88, 101, .09);
  border: 1px solid rgba(229, 88, 101, .2);
  border-radius: 7px;
  font-size: 12px;
  color: var(--red)
}

.aerr.show {
  display: block
}

.rme {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--mu);
  cursor: pointer
}

.rme input[type=checkbox] {
  accent-color: var(--aa)
}

/* ── NEW LOGIN PAGE ── */
#ls {
  z-index: 100;
  background: #050505;
  overflow: hidden
}

#dot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0
}

.dot-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000 0%, transparent 60%);
  z-index: 1;
  pointer-events: none
}

.dot-radial-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, .85) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none
}

.dot-top-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 33%;
  background: linear-gradient(to bottom, #000 0%, transparent 100%);
  z-index: 1;
  pointer-events: none
}

/* Floating Navbar */
.ls-navbar {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(12, 12, 12, .82);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  width: calc(100% - 2rem);
  max-width: 620px;
  transition: border-radius .3s
}

.ls-navbar.open {
  border-radius: 16px
}

.ls-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px
}

.ls-nav-logo {
  display: flex;
  align-items: center;
  gap: 8px
}

.ls-nav-logo-img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: contain
}

.ls-nav-brand {
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(to right, var(--aa), var(--ab));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.ls-nav-links {
  display: flex;
  gap: 20px;
  align-items: center
}

.ls-nav-link {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  transition: color .2s
}

.ls-nav-link:hover {
  color: #fff
}

.ls-nav-actions {
  display: flex;
  gap: 8px;
  align-items: center
}

.ls-nav-btn {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .65)
}

.ls-nav-btn:hover {
  border-color: rgba(255, 255, 255, .25);
  color: #fff
}

.ls-nav-signup {
  font-weight: 600;
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(200, 200, 200, .9));
  color: #000;
  border-color: transparent
}

.ls-nav-signup:hover {
  color: #000;
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(200, 200, 200, 1));
}

.ls-nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  padding: 4px
}

.ls-nav-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding-top: 14px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .3s, opacity .3s, padding .3s
}

.ls-nav-mobile.open {
  max-height: 500px;
  opacity: 1;
  padding-top: 14px;
  display: flex
}

.ls-nav-mobile-link {
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  padding: 6px 0;
  transition: color .2s
}

.ls-nav-mobile-link:hover {
  color: #fff
}

@media(max-width: 600px) {

  .ls-nav-links,
  .ls-nav-actions {
    display: none
  }

  .ls-nav-hamburger {
    display: block
  }

  .ls-nav-mobile {
    display: flex
  }
}

/* Content */
.ls-content {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 120px 20px 40px
}

.ls-form-wrap {
  width: 100%;
  max-width: 400px;
  background: linear-gradient(145deg, #1a1a1a 0%, #050505 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.9),
    inset 0 1px 1px rgba(255,255,255,0.08),
    inset 0 -1px 2px rgba(0,0,0,0.8)
}

/* Steps */
.ls-step {
  display: none;
  animation: lsStepIn .45s cubic-bezier(.22, 1, .36, 1)
}

.ls-step.active {
  display: block
}

@keyframes lsStepIn {
  from {
    opacity: 0;
    transform: translateX(40px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes lsStepOut {
  from {
    opacity: 1;
    transform: translateX(0)
  }

  to {
    opacity: 0;
    transform: translateX(-40px)
  }
}

.ls-step-header {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06)
}

.ls-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin: 0
}

.ls-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .45);
  font-weight: 300;
  margin-top: 6px
}

.ls-step-body {
  display: flex;
  flex-direction: column;
  gap: 14px
}

/* Google Button */
.ls-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .25s;
  backdrop-filter: blur(4px)
}

.ls-google-btn:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2)
}

/* Guest Button */
.ls-guest-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, .02);
  border: 1px dashed rgba(255, 255, 255, .15);
  border-radius: 999px;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .25s
}

.ls-guest-btn:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .3);
  color: #fff
}

.ls-guest-note {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, .3);
  margin-top: -6px
}

/* Divider */
.ls-divider {
  display: flex;
  align-items: center;
  gap: 12px
}

.ls-divider::before,
.ls-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .08)
}

.ls-divider span {
  font-size: 12px;
  color: rgba(255, 255, 255, .25)
}

/* Input */
.ls-input {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all .25s;
  backdrop-filter: blur(2px)
}

.ls-input::placeholder {
  color: rgba(255, 255, 255, .25)
}

.ls-input:focus {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06)
}

.ls-input-row {
  position: relative;
  display: flex;
  align-items: center
}

.ls-input-row .ls-input {
  padding-right: 52px
}

.ls-input-submit {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  overflow: hidden
}

.ls-input-submit:hover {
  background: rgba(255, 255, 255, .15)
}

.ls-arrow-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden
}

.ls-arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: transform .3s
}

.ls-arrow-ghost {
  transform: translateX(-100%)
}

.ls-input-submit:hover .ls-arrow:not(.ls-arrow-ghost) {
  transform: translateX(100%)
}

.ls-input-submit:hover .ls-arrow-ghost {
  transform: translateX(0)
}

.ls-pwd-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, .35);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  transition: all .2s
}

.ls-pwd-eye:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1)
}

/* Form groups */
.ls-fg {
  margin-bottom: 0
}

.ls-rme {
  margin-top: 0;
  color: rgba(255, 255, 255, .5);
  font-size: 12px
}

/* Buttons */
.ls-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 4px
}

.ls-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all .25s;
  outline: none;
  flex: 1
}

.ls-btn-back {
  background: #fff;
  color: #000;
  flex: 0 0 30%
}

.ls-btn-back:hover {
  background: rgba(255, 255, 255, .88);
  transform: translateY(-1px)
}

.ls-btn-continue {
  background: #fff;
  color: #000
}

.ls-btn-continue:hover {
  background: rgba(255, 255, 255, .88);
  transform: translateY(-1px)
}

.ls-btn-continue:disabled {
  opacity: .3;
  cursor: not-allowed;
  transform: none
}

.ls-btn-full {
  width: 100%
}

/* Code inputs */
.ls-code-group {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  gap: 4px
}

.ls-code-inp {
  width: 36px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
  font-family: 'DM Mono', monospace;
  caret-color: var(--aa)
}

.ls-code-sep {
  color: rgba(255, 255, 255, .15);
  font-size: 18px;
  user-select: none
}

.ls-resend {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .4)
}

.ls-link-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  font-size: 13px;
  padding: 0;
  transition: color .2s
}

.ls-link-btn:hover {
  color: #fff
}

/* Success */
.ls-success-body {
  align-items: center;
  padding-top: 20px
}

.ls-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, .7));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  animation: lsSuccessPop .5s cubic-bezier(.34, 1.56, .64, 1);
  margin-bottom: 16px
}

@keyframes lsSuccessPop {
  from {
    transform: scale(0);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

/* Legal */
.ls-legal {
  font-size: 11px;
  color: rgba(255, 255, 255, .25);
  text-align: center;
  line-height: 1.6;
  margin-top: 16px
}

.ls-legal a {
  color: rgba(255, 255, 255, .4);
  text-decoration: underline;
  transition: color .2s
}

.ls-legal a:hover {
  color: rgba(255, 255, 255, .6)
}

/* Guest Banner in chat */
.guest-banner {
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.038);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #fff;
  animation: fadeUp .4s ease
}

.guest-banner-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(200, 200, 200, .9));
  color: #000;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 600
}

.guest-banner-btn:hover {
  opacity: .85;
  transform: scale(1.04)
}

.lnote {
  margin-top: 12px;
  font-size: 11px;
  color: var(--dm);
  text-align: center;
  line-height: 1.6
}

/* ── APP ── */
#ap {
  z-index: 1;
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative
}

/* Dot matrix canvas in app */
#app-dot-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none
}

.app-gradient-overlay {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(to top, #000 0%, transparent 55%),
    linear-gradient(to bottom, #000 0%, transparent 40%),
    radial-gradient(ellipse at center, rgba(0,0,0,.75) 0%, rgba(0,0,0,.97) 100%);
  z-index: 0;
  pointer-events: none
}

/* SIDEBAR */
.sb {
  width: 260px;
  min-width: 260px;
  background: rgba(6, 6, 6, .88);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: width .3s cubic-bezier(.4, 0, .2, 1), min-width .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
  z-index: 2
}

.sb::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .04) 80%, transparent 100%);
  background: linear-gradient(180deg, transparent 0%, rgba(255, 102, 196, .15) 40%, rgba(255, 222, 89, .08) 80%, transparent 100%);
  pointer-events: none
}

.sb.off {
  width: 0;
  min-width: 0;
  opacity: 0;
  border-right: none
}

.sbh {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: space-between;
  padding: 14px 12px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.sb-logo {
  display: flex;
  align-items: center;
  gap: 9px
}

.sb-logo img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  border-radius: 7px;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(255, 255, 255, .2), 0 0 0 1px rgba(255, 255, 255, .1)
}

.sbrand {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.3px;
  background: linear-gradient(135deg, #ff66c4, #ffde59);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.ib {
  background: none;
  border: none;
  color: var(--tx);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  position: relative;
  overflow: hidden
}

.ib::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .14), transparent 70%);
  opacity: 0;
  transition: opacity .2s;
  border-radius: 8px
}

.ib:hover {
  background: var(--sf);
  color: var(--mu)
}

.ib:hover::before {
  opacity: 1
}

.ib:active {
  transform: scale(.9)
}

.nc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 9px 3px;
  padding: 10px 13px;
  background: linear-gradient(135deg, var(--sf), var(--sf2));
  border: 1px solid var(--bd);
  border-radius: 11px;
  color: var(--tx);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .22s ease;
  width: calc(100% - 18px);
  position: relative;
  overflow: hidden
}

.nc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  opacity: 0;
  transition: opacity .22s
}

.nc:hover {
  border-color: var(--bd2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3)
}

.nc:hover::before {
  opacity: 1
}

.nc:active {
  transform: translateY(0)
}

.cl {
  flex: 1;
  overflow-y: auto;
  padding: 4px 7px 7px;
  scrollbar-width: thin;
  scrollbar-color: #282828 transparent
}

.clbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--dm);
  text-transform: uppercase;
  letter-spacing: .9px;
  padding: 11px 8px 4px
}

.ci {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .18s ease;
  position: relative
}

.ci::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(to bottom, var(--aa), var(--ab));
  transition: height .22s cubic-bezier(.4, 0, .2, 1)
}

.ci:hover {
  background: var(--sf)
}

.ci:hover::before {
  height: 55%
}

.ci.on {
  background: var(--sf2)
}

.ci.on::before {
  height: 65%
}

.cn {
  flex: 1;
  font-size: 13px;
  color: var(--mu);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s
}

.ci:hover .cn,
.ci.on .cn {
  color: var(--tx)
}

.ci-acts {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .18s
}

.ci:hover .ci-acts {
  opacity: 1
}

.cdel,
.cren {
  background: none;
  border: none;
  color: var(--dm);
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  display: flex;
  transition: all .18s
}

.cdel:hover {
  color: var(--red);
  background: rgba(229, 88, 101, .12)
}

.cren:hover {
  color: var(--mu);
  background: var(--sf2)
}

.sbf {
  border-top: 1px solid rgba(255, 255, 255, .04);
  padding: 9px;
  position: relative
}

.pm {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 7px;
  right: 7px;
  background: rgba(12, 12, 12, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 6px;
  display: none;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06);
  z-index: 2100;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: pmIn .15s ease;
  isolation: isolate;
}

@keyframes pmIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.pm.on {
  display: block
}

.pmi {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--mu);
  cursor: pointer;
  transition: all .18s
}

.pmi:hover {
  background: var(--sf);
  color: var(--tx)
}

.pmi.danger:hover {
  background: rgba(229, 88, 101, .1);
  color: var(--red)
}

.pmi-sep {
  height: 1px;
  background: var(--bd);
  margin: 4px 0
}

.ur {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s
}

.ur:hover {
  background: var(--sf)
}

.av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #0c0c0c;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
  transition: box-shadow .22s
}

.ur:hover .av {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 16px rgba(255, 255, 255, 0.2)
}

.av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.un {
  color: var(--tx);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ue {
  font-size: 11px;
  color: var(--dm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* MAIN */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
  background: rgba(0, 0, 0, .45);
  position: relative;
  z-index: 2
}

:root {
  --ed-bg: #1e1e1e;
  --ed-bg2: #252526;
  --ed-fg: #d4d4d4;
  --ed-fg-dim: #ccc;
  --ed-border: #1a1a1a;
  --ed-linenum: #3a3a3a;
  --ed-caret: #fff;
  --ed-active-line: rgba(255, 255, 255, .05);
  --ed-statusbar: #007acc;
}

.tb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 54px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  flex-shrink: 0;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: sticky;
  top: 0;
  z-index: 10
}

.tb-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #0c0c0c;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
  transition: box-shadow .22s
}
.tb-av:hover {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 16px rgba(255, 255, 255, 0.2)
}
.tb-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.tbt {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mode-wrap {
  position: relative
}

.mode-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--bd2);
  font-size: 11px;
  font-weight: 600;
  color: var(--mu);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  user-select: none;
  background: var(--sf)
}

.mode-badge:hover {
  border-color: var(--aa);
  color: var(--aa);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.18)
}

.mode-badge.fast {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--tx);
}

.mode-badge.normal {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.18);
}

.mode-badge.code {
  border-color: #60a5fa;
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.18);
}

.mode-badge.detail {
  border-color: #fb923c;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.08);
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.18);
}

.mode-badge.creative {
  border-color: #f472b6;
  color: #f472b6;
  background: rgba(244, 114, 182, 0.08);
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.18);
}
/* ── Editör araç çubuğu: "..." menüsü (aşağı açılır) ── */
.pv-tb-more-dd {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(12, 12, 12, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 6px;
  min-width: 190px;
  display: none;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06);
  z-index: 2100;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: pmIn .15s ease;
}
.pv-tb-more-dd.on { display: block }
.pv-tb-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.pv-tb-more-item:hover { background: rgba(255,255,255,.08); color: #fff }
.pv-tb-more-item .material-symbols-outlined { font-size: 15px; flex-shrink: 0 }
.pv-tb-more-item .tog-btn-mini {
  margin-left: auto; width: 26px; height: 15px; border-radius: 8px;
  background: rgba(255,255,255,.12); position: relative; flex-shrink: 0;
}
.pv-tb-more-item .tog-btn-mini::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: #888; transition: all .15s;
}
.pv-tb-more-item .tog-btn-mini.on { background: rgba(76,175,80,.35) }
.pv-tb-more-item .tog-btn-mini.on::after { left: 13px; background: #4caf50 }
.pv-tb-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; padding: 0;
}

.mode-dd {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: rgba(12, 12, 12, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 6px;
  min-width: 230px;
  display: none;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06);
  z-index: 2100;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: pmIn .15s ease;
  isolation: isolate;
}

.mode-dd.on {
  display: block
}

.mdd-item {
  padding: 11px 13px;
  border-radius: 9px;
  cursor: pointer;
  transition: all .18s
}

.mdd-item:hover {
  background: var(--sf)
}

.mdd-item.sel {
  background: var(--sf);
  border: 1px solid var(--bd2)
}

.mdd-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 7px
}

.mdd-desc {
  font-size: 11px;
  color: var(--dm);
  margin-top: 3px;
  line-height: 1.5
}

.mdd-divider {
  height: 1px;
  background: var(--bd);
  margin: 5px 4px
}

.mdd-think-row {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.mdd-think-toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--bd2);
  position: relative;
  transition: background .2s;
  flex-shrink: 0
}

.mdd-think-toggle::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mu);
  transition: all .2s
}

.mdd-think-toggle.on {
  background: var(--sb)
}

.mdd-think-toggle.on::after {
  left: 17px;
  background: #fff
}

.cd-bar {
  height: 2px;
  background: var(--bd);
  position: relative;
  overflow: hidden;
  flex-shrink: 0
}

.cd-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--aa), var(--ab), var(--aa));
  background-size: 200% 100%;
  width: 0%;
  transition: width .1s linear;
  animation: gradSlide 2.5s linear infinite
}

@keyframes gradSlide {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 200% 50%
  }
}

.drag-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 102, 196, .05);
  border: 2px dashed rgba(255, 102, 196, .55);
  z-index: 400;
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--aa);
  font-weight: 600;
  pointer-events: none;
  backdrop-filter: blur(6px);
  animation: dragPulse 1.3s ease infinite
}

@keyframes dragPulse {

  0%,
  100% {
    border-color: rgba(255, 102, 196, .4)
  }

  50% {
    border-color: rgba(255, 102, 196, .95)
  }
}

.drag-overlay.on {
  display: flex
}

.chat-split {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden
}

.ca {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: #282828 transparent
}

::-webkit-scrollbar {
  width: 3px
}

::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 2px
}

.pv-resize-handle {
  width: 0;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  position: relative;
  display: none;
  z-index: 5;
  touch-action: none
}
.pv-resize-handle.visible {
  display: block;
  width: 12px
}
.pv-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 3px;
  height: 36px;
  background: var(--bd2);
  border-radius: 99px;
  opacity: 0;
  transition: opacity .2s
}
.pv-resize-handle:hover::after,
.pv-resize-handle.dragging::after {
  opacity: 1
}
.pv-resize-handle.dragging {
  background: rgba(255,255,255,.03)
}

.preview-panel {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border-left: none;
  background: var(--sf);
  transition: width .35s cubic-bezier(.4, 0, .2, 1), min-width .35s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column
}

.preview-panel.on {
  width: 45%;
  min-width: 320px;
  border-left: 1px solid var(--bd)
}

.pv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0
}

.pv-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--mu)
}

.pv-close {
  background: none;
  border: none;
  color: var(--dm);
  cursor: pointer;
  padding: 5px;
  border-radius: 7px;
  display: flex;
  transition: all .18s
}

.pv-close:hover {
  background: var(--sf2);
  color: var(--tx)
}

.pv-iframe {
  flex: 1;
  border: none;
  background: #fff
}

.pv-tabs {
  display: flex;
  gap: 4px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0
}

/* ── VS Code tarzı dosya gezgini ── */
.pv-explorer {
  width: 190px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--ed-bg2); border-right: 1px solid var(--ed-border); overflow: hidden;
}
.pv-explorer.collapsed { display: none; }
.pv-exp-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 35px; padding: 0 6px 0 12px; flex-shrink: 0;
  border-bottom: 1px solid var(--ed-border);
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; color: var(--ed-fg-dim);
}
.pv-exp-actions { display: flex; gap: 2px; }
.pv-exp-actions button {
  background: none; border: none; color: var(--ed-fg-dim); cursor: pointer;
  font-size: 11px; padding: 3px 5px; border-radius: 4px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.pv-exp-actions button:hover { background: var(--ed-bg); color: var(--ed-fg); }
.pv-exp-tree {
  flex: 1; overflow-y: auto; padding: 4px 0;
  font-family: 'DM Mono', monospace; font-size: 12px; color: var(--ed-fg);
  scrollbar-width: thin;
}

/* Kod editörü textarea'sının scrollbar'ı GİZLİ (kaydırma çalışır) — üstündeki
   syntax-highlight pre katmanıyla aynı genişlikte kalsın, yoksa wrap'te metin kayar */
#pv-code-edit::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pv-exp-row {
  display: flex; align-items: center; gap: 4px; height: 24px;
  padding-right: 4px; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden;
}
.pv-exp-row:hover { background: var(--ed-bg); }
.pv-exp-row.active { background: var(--ed-active-line, rgba(120,120,255,.12)); color: #fff; }
.pv-exp-row.seldir { outline: 1px dashed var(--ed-border); outline-offset: -2px; }
.pv-exp-caret { width: 12px; display: inline-block; text-align: center; color: var(--ed-fg-dim); font-size: 10px; }
.pv-exp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pv-exp-row-actions { display: none; gap: 1px; flex-shrink: 0; }
.pv-exp-row:hover .pv-exp-row-actions { display: flex; }
.pv-exp-row-actions button {
  background: none; border: none; color: var(--ed-fg-dim); cursor: pointer;
  font-size: 10px; padding: 2px 3px; border-radius: 3px; line-height: 1;
}
.pv-exp-row-actions button:hover { background: var(--ed-border); color: #fff; }
.pv-exp-toggle {
  display: none; align-items: center; justify-content: center;
  width: 26px; flex-shrink: 0; background: var(--ed-bg2);
  border: none; border-right: 1px solid var(--ed-border);
  color: var(--ed-fg-dim); cursor: pointer; font-size: 13px;
}
.pv-explorer.collapsed + .pv-exp-toggle { display: flex; }
/* Sürüklenirken */
.pv-exp-row[draggable="true"]:active { opacity: .6; }
/* Sağ-tık menü */
.efs-ctx {
  position: fixed; z-index: 100000; min-width: 168px;
  background: var(--ed-bg2, #252526); border: 1px solid var(--ed-border, #3a3a3a);
  border-radius: 8px; padding: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
}
.efs-ctx button {
  background: none; border: none; text-align: left; cursor: pointer;
  color: var(--ed-fg, #ddd); font-family: 'DM Mono', monospace; font-size: 12px;
  padding: 7px 10px; border-radius: 5px;
}
.efs-ctx button:hover { background: var(--ed-active-line, rgba(120,120,255,.15)); color: #fff; }

.pv-tab {
  padding: 5px 13px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--mu);
  background: none;
  font-family: inherit;
  transition: all .18s
}

.pv-tab.on {
  background: var(--sf2);
  border-color: var(--bd2);
  color: var(--tx)
}

.think-status {
  display: none;
  max-width: 700px;
  margin: 0 auto;
  padding: 4px 22px;
  font-size: 11px;
  color: var(--dm);
  align-items: center;
  gap: 6px;
  animation: fadeUp .2s ease
}

.think-status.on {
  display: flex
}

.think-sec {
  font-variant-numeric: tabular-nums;
  color: var(--mu);
  min-width: 22px
}

.think-view-btn {
  background: none;
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--dm);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all .15s;
  margin-left: 4px
}

.think-view-btn:hover {
  background: var(--sf2);
  color: var(--tx)
}

.think-panel {
  display: none;
  max-width: 700px;
  margin: 0 auto 6px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
  animation: fadeUp .2s ease
}

.think-panel.on {
  display: block
}

.think-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mu);
  border-bottom: 1px solid var(--bd)
}

.think-panel-hd button {
  background: none;
  border: none;
  color: var(--dm);
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  line-height: 1
}

.think-panel-body {
  padding: 12px 14px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: var(--dm);
  line-height: 1.7;
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0
}

/* AI yanıtının ÜZERİNDE gösterilen web kaynağı çubuğu */
.ws-src-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.ws-src-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  font-size: 12px;
  color: var(--mu);
  text-decoration: none;
  transition: all .15s;
  max-width: 220px;
}
.ws-src-chip:hover {
  color: var(--tx);
  border-color: var(--aa);
}
.ws-src-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-src-fav {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
}

.ws-src-more {
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 20px;
  color: var(--mu);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .15s;
}
.ws-src-more:hover {
  color: var(--tx);
  border-color: var(--aa);
}

.ws-src-dd {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 260px;
  max-width: 340px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.ws-src-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--tx);
  transition: background .15s;
}
.ws-src-dd-item:hover {
  background: var(--sf2);
}

.ws-src-dd-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.ws-src-dd-title {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-src-dd-domain {
  font-size: 10px;
  color: var(--mu);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.think-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aa);
  animation: blink .9s ease infinite;
  box-shadow: 0 0 8px var(--aa)
}

/* Mesaj balonunda, logonun yanında dönen düşünme metni */
.think-logo-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  min-height: 24px;
}

.think-logo-txt {
  font-size: 13px;
  font-weight: 500;
  background: linear-gradient(90deg, var(--mu) 0%, var(--tx) 50%, var(--mu) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: thinkShimmer 1.8s linear infinite;
}

.think-logo-txt .material-symbols-outlined {
  vertical-align: -2px;
  -webkit-text-fill-color: var(--aa);
  color: var(--aa);
}

@keyframes thinkShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes blink {

  0%,
  100% {
    opacity: .2;
    transform: scale(.7)
  }

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

/* WELCOME */
.wlc {
  max-width: 600px;
  margin: 0 auto;
  padding: 60px 22px 32px;
  text-align: center;
  position: relative;
}

.wlc-cards {
  display: none;
}

.wlc-orb {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 102, 196, .08) 0%, transparent 70%);
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  animation: orbFloat 7s ease-in-out infinite
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translateX(-50%) scale(1)
  }

  50% {
    transform: translateX(-50%) scale(1.18)
  }
}

.wt {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--tx) 30%, var(--mu));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeUp .4s ease
}

.ws {
  font-size: 13px;
  color: var(--mu);
  margin-bottom: 36px;
  line-height: 1.7;
  animation: fadeUp .45s ease .06s both
}

.sg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.sc {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: all .22s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeUp .4s ease both;
  position: relative;
  overflow: hidden
}

.sc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 102, 196, .07), rgba(255, 222, 89, .05));
  opacity: 0;
  transition: opacity .22s
}

.sc::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--aa), var(--ab));
  transform: scaleX(0);
  transition: transform .22s ease;
  transform-origin: left
}

.sc:nth-child(1) {
  animation-delay: .08s
}

.sc:nth-child(2) {
  animation-delay: .14s
}

.sc:nth-child(3) {
  animation-delay: .2s
}

.sc:nth-child(4) {
  animation-delay: .26s
}

.sc:hover {
  background: var(--sf2);
  border-color: var(--bd2);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25)
}

.sc:hover::before {
  opacity: 1
}

.sc:hover::after {
  transform: scaleX(1)
}

.sc:active {
  transform: translateY(0)
}

.si {
  font-size: 24px
}

.st {
  font-size: 12px;
  color: var(--mu);
  line-height: 1.55
}

.mem-bar {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 22px 16px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap
}

.mem-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 11px;
  color: var(--tx);
  transition: all .18s;
  cursor: default
}

.mem-tag:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05)
}

/* MESSAGES */
.mw {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 22px
}

.msg {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  animation: msgIn .28s cubic-bezier(.22, 1, .36, 1)
}

@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.97)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.msg.user {
  justify-content: flex-end
}

.mav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden
}

.mav.ai {
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(200, 200, 200, .09));
  border: 1px solid rgba(46, 46, 46, 0.2);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.18)
}

.mav.ai img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.mav.u {
  background: var(--sf2);
  border: 1px solid var(--bd2);
  color: var(--mu)
}

.mb {
  max-width: 84%;
  min-width: 0
}

.msg.user .mb {
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.7;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: box-shadow .2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.msg.user .mb:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
  background: rgba(255, 255, 255, .09)
}

.msg.ai .mb {
  font-size: 14px;
  line-height: 1.8;
  color: var(--tx)
}

/* ── Sohbet yazı boyutu (görünüm ayarı) ── */
body.chatfont-small .msg.user .mb { font-size: 12px }
body.chatfont-small .msg.ai .mb { font-size: 12.5px }
body.chatfont-large .msg.user .mb { font-size: 15.5px }
body.chatfont-large .msg.ai .mb { font-size: 16.5px }

.tc {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--aa);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: bl .7s step-end infinite;
  border-radius: 1px;
  box-shadow: 0 0 8px var(--aa)
}

@keyframes bl {
  50% {
    opacity: 0
  }
}

.ld {
  display: flex;
  gap: 5px;
  padding: 10px 2px;
  align-items: center
}

.ld span {
  width: 7px;
  height: 7px;
  background: var(--dm);
  border-radius: 50%;
  animation: lda 1.1s ease infinite
}

.ld span:nth-child(2) {
  animation-delay: .18s
}

.ld span:nth-child(3) {
  animation-delay: .36s
}

@keyframes lda {

  0%,
  60%,
  100% {
    transform: translateY(0) scale(.8);
    opacity: .3
  }

  30% {
    transform: translateY(-8px) scale(1.1);
    opacity: 1
  }
}

.sum-div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  opacity: .45
}

.sum-div::before,
.sum-div::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd)
}

.sum-div span {
  font-size: 11px;
  color: var(--dm);
  white-space: nowrap
}

/* MARKDOWN */
.amd h1,
.amd h2,
.amd h3 {
  margin: 20px 0 8px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tx);
}

.amd h1 {
  font-size: 22px;
  border-bottom: 1px solid var(--bd);
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.amd h2 {
  font-size: 18px;
}

.amd h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.amd p {
  margin: 8px 0
}

.amd p:first-child {
  margin-top: 0
}

.amd p:last-child {
  margin-bottom: 0
}

.amd ul,
.amd ol {
  padding-left: 18px;
  margin: 8px 0
}

.amd li {
  margin: 4px 0;
  line-height: 1.65
}

.amd strong {
  font-weight: 600
}

.amd a {
  color: var(--blu);
  text-decoration: none;
  transition: color .18s
}

.amd a:hover {
  text-decoration: underline;
  color: #93c5fd
}

.amd blockquote {
  border-left: 3px solid var(--aa);
  padding: 10px 14px;
  color: var(--mu);
  margin: 10px 0;
  font-style: italic;
  background: rgba(255, 102, 196, .04);
  border-radius: 0 8px 8px 0
}

.amd table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 12.5px
}

.amd th,
.amd td {
  border: 1px solid var(--bd2);
  padding: 8px 12px;
  text-align: left
}

.amd th {
  background: var(--sf);
  font-weight: 600
}

.amd hr {
  border: none;
  border-top: 1px solid var(--bd);
  margin: 16px 0
}

.amd code:not([class]) {
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 11.5px;
  font-family: 'DM Mono', monospace;
  color: var(--tx)
}

/* CODE BLOCKS */
.cw {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  overflow: hidden;
  margin: 10px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
  transition: box-shadow .2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.cw:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5)
}

.ch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 13px;
  background: rgba(255, 255, 255, .02);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  gap: 6px
}

.cl2 {
  font-size: 10px;
  font-weight: 600;
  color: var(--dm);
  text-transform: uppercase;
  letter-spacing: .8px;
  flex: 1
}

.ch-btns {
  display: flex;
  gap: 4px
}

/* AI kod yazma ilerleme çubuğu — .ch'in ortasında */
.codelen-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 160px;
  margin: 0 10px;
}
.codelen-bar-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  position: relative;
}
.codelen-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--aa);
  transition: width .15s ease;
}
.codelen-bar-fill.codelen-incomplete {
  background: #e0a030;
}
.codelen-bar-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--dm);
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
}
.codelen-incomplete-label {
  color: #e0a030;
}
.codelen-indeterminate {
  position: relative;
}
.codelen-bar-fill-indet {
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 40%;
  border-radius: 2px;
  background: var(--aa);
  animation: codelenIndetAnim 1.2s ease-in-out infinite;
}
@keyframes codelenIndetAnim {
  0% { left: -40%; }
  100% { left: 100%; }
}

.cpb,
.pvb,
.anlb {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 7px;
  color: var(--mu);
  font-size: 11px;
  font-family: inherit;
  padding: 4px 9px;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap
}

.cpb:hover,
.pvb:hover,
.anlb:hover {
  background: var(--sf2);
  color: var(--tx)
}

.cpb.ok {
  color: var(--grn);
  border-color: rgba(74, 222, 128, .25);
  background: rgba(74, 222, 128, .06)
}

.anlb {
  color: var(--blu);
  border-color: rgba(96, 165, 250, .2)
}

.cw pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 480px;
  font-size: 12.5px;
  line-height: 1.7
}

.cw pre code {
  font-family: 'DM Mono', monospace !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: unset !important;
  white-space: pre;
  display: block;
}

/* IMAGE */
.gi {
  margin: 10px 0;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--bd);
  max-width: 400px;
  background: var(--sf);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25)
}

.gi img {
  width: 100%;
  display: block;
  cursor: zoom-in;
  transition: transform .3s ease
}

.gi img:hover {
  transform: scale(1.02)
}

.gi-load {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--mu);
  display: flex;
  align-items: center;
  gap: 8px
}

.gi-warn {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ora);
  background: rgba(251, 146, 60, .07);
  border-top: 1px solid rgba(251, 146, 60, .15)
}

/* FILE CHIP */
.fchip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 7px;
  max-width: 220px
}

.fci {
  font-size: 18px
}

.fcn {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500
}

.fcs {
  font-size: 11px;
  color: var(--dm);
  margin-top: 1px
}

/* MSG ACTIONS */
.mac {
  display: flex;
  gap: 3px;
  margin-top: 7px;
  opacity: 1;
  transition: opacity .18s;
  flex-wrap: wrap
}

.msg:hover .mac {
  opacity: 1
}

.macb {
  background: var(--sf);
  border: none;
  color: var(--dm);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all .18s
}

.macb:hover {
  color: var(--mu)
}

.macb.tts-on {
  color: var(--tx)
}

.msg-acts {
  display: flex;
  gap: 3px;
  margin-top: 5px;
  flex-wrap: wrap;
  opacity: 1;
  transition: opacity .18s
}

.mab {
  background: none;
  color: var(--dm);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all .18s
}

.mab:hover {
  background: var(--sf);
  color: var(--mu);
}

/* SLASH HINT */
.slash-hint {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 12px 12px 0 0;
  padding: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .4)
}

.slash-hint.on {
  display: block;
  animation: pmIn .15s ease
}

.sh-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .18s
}

.sh-item:hover,
.sh-item.sel {
  background: var(--sf)
}

.sh-cmd {
  font-size: 12px;
  font-weight: 600;
  color: var(--aa);
  font-family: 'DM Mono', monospace;
  min-width: 90px
}

.sh-desc {
  font-size: 12px;
  color: var(--mu)
}

/* TOAST */
.q-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 20px;
  padding: 9px 20px;
  font-size: 12px;
  color: var(--tx);
  display: none;
  z-index: 300;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45)
}

.q-toast.on {
  display: block;
  animation: fadeUp .22s ease
}

/* INPUT */
.iz {
  padding: 10px 20px 16px;
  flex-shrink: 0;
  position: relative
}

.ic {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  overflow: visible;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px)
}

.ic:focus-within {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07), 0 8px 32px rgba(0, 0, 0, .25)
}

.atp {
  display: none;
  align-items: flex-start;
  gap: 0;
  padding: 10px 12px 0;
}

.atp.on {
  display: flex
}

/* Dosya chip — paste chip ile aynı stil */
.atp>svg {
  display: none
}

.atp>.atn {
  display: none
}

.atp>.atrm {
  display: none
}

/* Dosya chip kare kart olarak yeniden çizilir .atp-card ile */
.atp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 90px;
  height: 90px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 10px 8px 7px;
  position: relative;
  gap: 4px;
  animation: pasteChipIn .18s ease;
}

.atp-card-icon {
  color: var(--mu);
  display: flex;
  align-items: center;
  justify-content: center;
}

.atp-card-name {
  font-size: 10px;
  color: var(--mu);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-weight: 600;
}

.atp-card-rm {
  position: absolute;
  top: 4px;
  right: 4px;
  background: none;
  border: none;
  color: var(--dm);
  cursor: pointer;
  padding: 2px;
  border-radius: 5px;
  display: flex;
  transition: background .15s, color .15s;
}

.atp-card-rm:hover {
  background: var(--sf2);
  color: var(--tx);
}

.atn {
  font-size: 12px;
  color: var(--mu);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.atip {
  display: none;
  padding: 10px 12px 0;
}

.atip.on {
  display: block
}

.atip img {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  border: 1px solid var(--bd);
  object-fit: cover;
  display: block;
}

.atrm {
  background: none;
  border: none;
  color: var(--dm);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  transition: color .18s
}

.atrm:hover {
  color: var(--red)
}

/* Resim chip kare kart wrapper */
.atip-card {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 90px;
}

.atip-card img {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  border: 1px solid var(--bd);
  object-fit: cover;
  display: block;
}

.atip-card .atp-card-rm {
  position: absolute;
  top: 4px;
  right: 4px;
}


.ir {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 10px 10px 14px
}

#mi {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--tx);
  font-size: 13.5px;
  font-family: inherit;
  resize: none;
  max-height: 200px;
  line-height: 1.65;
  padding: 2px 0;
  margin-left: 10px
}

#mi::placeholder {
  color: var(--dm)
}

#mi:disabled {
  opacity: .5;
  cursor: not-allowed
}

.ia {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0
}

.iib {
  background: none;
  border: none;
  color: var(--dm);
  cursor: pointer;
  padding: 7px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
  position: relative
}

.iib:hover {
  background: var(--sf2);
  color: var(--mu)
}

.iib.ws-on {
  color: var(--blu)
}

.iib.voice-on {
  color: var(--red);
  animation: voicePulse .8s ease infinite
}

@keyframes voicePulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(229, 88, 101, .4)
  }

  50% {
    opacity: .7;
    box-shadow: 0 0 0 6px rgba(229, 88, 101, 0)
  }
}

.sbtn {
  width: 34px;
  height: 34px;
  background: var(--tx);
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s cubic-bezier(.4, 0, .2, 1)
}

.sbtn:hover {
  background: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(255, 255, 255, .15)
}

.sbtn:active {
  transform: scale(.93)
}

.sbtn:disabled {
  background: var(--bd);
  cursor: not-allowed;
  transform: none
}

.sbtn svg,
.sbtn:disabled svg {
  color: var(--bg)
}

.sbtn.cd {
  background: var(--sf2);
  border: 1px solid var(--bd2)
}

.sbtn.cd svg {
  display: none
}

.sbtn.cd::after {
  content: attr(data-cd);
  color: var(--mu);
  font-size: 10px;
  font-weight: 700;
  font-family: 'DM Mono', monospace
}

.ifoot {
  text-align: center;
  font-size: 11px;
  color: var(--dm);
  padding: 0 0 2px
}

/* LIGHTBOX */
.lb {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .95);
  z-index: 999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px)
}

.lb.on {
  display: flex;
  animation: fi .2s ease
}

@keyframes fi {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.lb img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 13px;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .8)
}

.lbc {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tx);
  transition: all .2s
}

.lbc:hover {
  background: var(--sf2);
  transform: scale(1.1)
}

/* MODALS */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  z-index: 500;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px)
}

.modal.on {
  display: flex;
  animation: fi .2s ease
}

.modal.active {
  display: flex;
  animation: fi .2s ease
}

.mbox {
  background: rgba(18, 18, 18, .85);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 24px;
  max-width: 460px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px)
}

.mbox h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--tx)
}

.mbox .mbox-sub {
  font-size: 12px;
  color: var(--mu);
  margin-bottom: 18px
}

.mbox table {
  width: 100%;
  font-size: 12.5px;
  border-collapse: collapse
}

.mbox td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--bd);
  color: var(--mu)
}

.mbox td:first-child {
  color: var(--bg);
  font-family: 'DM Mono', monospace;
  font-weight: 600;
  width: 110px
}

.srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--bd)
}

.srow:last-of-type {
  border-bottom: none
}

.srow-left {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.srow-label {
  font-size: 13px;
  color: var(--tx)
}

.srow-desc {
  font-size: 11px;
  color: var(--dm)
}

.tog-btn {
  width: 38px;
  height: 21px;
  background: var(--bd2);
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  border: none;
  transition: background .22s;
  flex-shrink: 0
}

.tog-btn.on {
  background: var(--bg)
}

.tog-btn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: 50%;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3)
}

.tog-btn.on::after {
  transform: translateX(17px)
}

.mem-section {
  margin-bottom: 14px
}

.mem-section h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 7px
}

.mem-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 11px;
  color: var(--tx);
  transition: all .18s;
  cursor: default
}

.mem-chip:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mem-empty {
  font-size: 12px;
  color: var(--dm);
  font-style: italic;
  padding: 8px 0
}

.danger-btn {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.09);
  border: 1px solid rgba(115, 115, 115, 0.22);
  border-radius: 10px;
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s
}

.danger-btn:hover {
  background: rgba(103, 103, 103, 0.18)
}

.mbox-close {
  width: 100%;
  padding: 10px;
  margin-top: 12px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 10px;
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s
}

.mbox-close:hover {
  background: var(--bd2)
}

.about-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd)
}

.about-row:last-child {
  border-bottom: none
}

.about-key {
  font-size: 12px;
  color: var(--dm);
  min-width: 120px
}

.about-val {
  font-size: 12px;
  color: var(--tx);
  font-weight: 500
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 14px
}

.stat-card {
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  transition: transform .2s, box-shadow .2s
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25)
}

.stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--tx);
  background: linear-gradient(135deg, var(--tx), var(--mu));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.stat-lbl {
  font-size: 11px;
  color: var(--dm);
  margin-top: 3px
}

.sec-div {
  font-size: 11px;
  font-weight: 600;
  color: var(--dm);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin: 16px 0 8px;
  border-top: 1px solid var(--bd);
  padding-top: 14px
}

.dl-btn {
  width: 100%;
  padding: 10px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 10px;
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 6px
}

.dl-btn:hover {
  background: var(--bd2);
  transform: translateY(-1px)
}

.ws-indicator {
  font-size: 11px;
  color: var(--blu);
  padding: 0 0 4px;
  text-align: center;
  display: none
}

.ws-indicator.on {
  display: block
}

.pin-bar {
  background: var(--sf2);
  border-bottom: 1px solid var(--bd);
  padding: 8px 16px;
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mu);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s
}

.pin-bar.on {
  display: flex
}

.pin-bar:hover {
  background: var(--bd)
}

.search-bar {
  padding: 8px 14px;
  border-bottom: 1px solid var(--bd);
  display: none;
  flex-shrink: 0
}

.search-bar.on {
  display: flex
}

.search-bar input {
  flex: 1;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--tx);
  font-size: 12px;
  font-family: inherit;
  outline: none
}

.search-bar input::placeholder {
  color: var(--dm)
}

.search-res {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 0 0 12px 12px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
  display: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4)
}

.search-res.on {
  display: block
}

.sr-item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--mu);
  border-bottom: 1px solid var(--bd);
  transition: background .18s
}

.sr-item:hover {
  background: var(--sf);
  color: var(--tx)
}

.sr-item strong {
  color: var(--aa)
}

.pers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px
}

.pers-card {
  padding: 11px;
  border: 2px solid var(--bd);
  border-radius: 11px;
  cursor: pointer;
  transition: all .2s;
  text-align: center
}

.pers-card:hover {
  border-color: var(--bd2);
  background: var(--sf2);
  transform: translateY(-1px)
}

.pers-card.on {
  border-color: var(--aa);
  background: rgba(255, 102, 196, .07);
  box-shadow: 0 0 14px rgba(255, 102, 196, .12)
}

.pers-card-ico {
  font-size: 20px;
  margin-bottom: 4px
}

.pers-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx)
}

.pers-card-desc {
  font-size: 10px;
  color: var(--dm);
  margin-top: 2px
}

.otp-inp {
  width: 44px;
  height: 52px;
  background: #0c0c0c;
  border: 2px solid #2a2a2a;
  border-radius: 10px;
  color: var(--tx);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  font-family: inherit;
  outline: none;
  transition: border-color .2s
}

.otp-inp:focus {
  border-color: var(--aa)
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px
}

.stat-card {
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 12px;
  text-align: center
}

.stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--tx)
}

.stat-lbl {
  font-size: 11px;
  color: var(--dm);
  margin-top: 2px
}

/* Sec divider */
.sec-div {
  font-size: 11px;
  font-weight: 600;
  color: var(--dm);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin: 16px 0 8px;
  border-top: 1px solid var(--bd);
  padding-top: 14px
}

/* Download btn */
.dl-btn {
  width: 100%;
  padding: 10px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 9px;
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 6px
}

.dl-btn:hover {
  background: var(--bd2)
}

/* Web search indicator */
.ws-indicator {
  font-size: 11px;
  color: var(--blu);
  padding: 0 0 4px;
  text-align: center;
  display: none
}

.ws-indicator.on {
  display: block
}

/* Pinned messages */
.pin-bar {
  background: var(--sf2);
  border-bottom: 1px solid var(--bd);
  padding: 8px 14px;
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mu);
  cursor: pointer;
  flex-shrink: 0
}

.pin-bar.on {
  display: flex
}

.pin-bar:hover {
  background: var(--bd)
}

/* Search bar */
.search-bar {
  padding: 8px 14px;
  border-bottom: 1px solid var(--bd);
  display: none;
  flex-shrink: 0
}

.search-bar.on {
  display: flex
}

.search-bar input {
  flex: 1;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--tx);
  font-size: 12px;
  font-family: inherit;
  outline: none
}

.search-bar input::placeholder {
  color: var(--dm)
}

.search-res {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 0 0 10px 10px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
  display: none
}

.search-res.on {
  display: block
}

.sr-item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--mu);
  border-bottom: 1px solid var(--bd);
  transition: background var(--ease)
}

.sr-item:hover {
  background: var(--sf);
  color: var(--tx)
}

.sr-item strong {
  color: var(--aa)
}

/* Arkaplan seçim kartları — karartılmış görsel önizleme */
.bg-pick-card {
  position: relative;
  height: 64px;
  border-radius: 10px;
  border: 2px solid var(--bd);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  transition: all .2s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bg-pick-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  transition: background .2s;
}
.bg-pick-card:hover {
  border-color: var(--bd2);
  transform: translateY(-1px);
}
.bg-pick-card:hover::before {
  background: rgba(0, 0, 0, .35);
}
.bg-pick-card.on {
  border-color: var(--aa);
}
.bg-pick-card.on::before {
  background: rgba(255, 102, 196, .25);
}
.bg-pick-label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  padding: 6px 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.bg-pick-card.bg-pick-none {
  background: #0c0c0c;
}
.bg-pick-card.bg-pick-none::before { background: rgba(0,0,0,.2); }
.bg-pick-card.bg-pick-upload {
  background: var(--sf);
  border-style: dashed;
}
.bg-pick-card.bg-pick-upload::before { content: none; }
.bg-pick-card.bg-pick-upload .bg-pick-label { color: var(--tx); text-shadow: none; }

/* Personality badges */
.pers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px
}

.pers-card {
  padding: 10px;
  border: 2px solid var(--bd);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  text-align: center
}

.pers-card:hover {
  border-color: var(--bd2);
  background: var(--sf2)
}

.pers-card.on {
  border-color: var(--aa);
  background: rgba(255, 102, 196, .07)
}

.pers-card-ico {
  font-size: 20px;
  margin-bottom: 4px
}

.pers-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx)
}

.pers-card-desc {
  font-size: 10px;
  color: var(--dm);
  margin-top: 2px
}

/* Action buttons on messages */
.msg-acts {
  display: flex;
  gap: 3px;
  margin-top: 5px;
  flex-wrap: wrap;
  opacity: 1;
  transition: opacity var(--ease)
}

.msg:hover .msg-acts {
  opacity: 1
}

.mab {
  background: var(--sf);
  border: transparent;
  color: var(--dm);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}

.mab:hover {
  background: var(--sf2);
  color: var(--mu);
  border-color: var(--bd2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}

.mab:active {
  transform: translateY(0) scale(.97);
}

.otp-inp {
  width: 44px;
  height: 52px;
  background: #0c0c0c;
  border: 2px solid #2a2a2a;
  border-radius: 10px;
  color: var(--tx);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}

.otp-inp:focus {
  border-color: var(--aa)
}

@media(min-width:1024px) and (max-width:1399px) {
  .mw {
    max-width: 760px
  }

  .ic {
    max-width: 760px
  }
}

@media(min-width:1400px) {
  .mw {
    max-width: 880px
  }

  .ic {
    max-width: 880px
  }

  .wlc {
    max-width: 720px
  }

  .sg {
    grid-template-columns: 1fr 1fr 1fr 1fr
  }

  .msg.user .mb {
    font-size: 14.5px
  }

  .msg.ai .mb {
    font-size: 15px
  }

  .sb {
    width: 290px;
    min-width: 290px
  }
}

@media(min-width:1800px) {
  .mw {
    max-width: 1020px
  }

  .ic {
    max-width: 1020px
  }

  .sb {
    width: 320px;
    min-width: 320px
  }

  body {
    font-size: 15px
  }
}

/* TABLET */
@media(min-width:601px) and (max-width:900px) {
  .sb {
    width: 220px;
    min-width: 220px
  }

  .mw {
    padding: 0 16px
  }

  .ic {
    max-width: 100%
  }

  .wt {
    font-size: 24px
  }

  .sg {
    grid-template-columns: 1fr 1fr
  }
}

/* MOBILE */
@media(max-width:600px) {
  .signin-container {
    flex-direction: column
  }

  .signin-left {
    padding: 20px
  }

  .signin-right {
    display: none;
    height: auto
  }

  .lw {
    width: 100%;
    max-width: 100%
  }

  .sb {
    position: fixed;
    z-index: 50;
    height: 100%;
    width: 0;
    min-width: 0;
    opacity: 0;
    transform: translateX(-100%)
  }

  .sb.mob {
    width: 80vw;
    max-width: 300px;
    min-width: 260px;
    opacity: 1;
    transform: translateX(0)
  }

  .sb-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 49;
    backdrop-filter: blur(3px);
    animation: fi .2s ease
  }

  .sb-backdrop.on {
    display: block
  }

  .sg {
    grid-template-columns: 1fr
  }

  .mw {
    padding: 0 12px
  }

  .preview-panel {
    display: none
  }

  .mode-badge span {
    display: none
  }

  .iz {
    padding: 6px 10px 0px
  }

  .iz>.ifoot {
    margin-bottom: 68px
  }

  .ic {
    border-radius: 16px
  }

  .ir {
    padding: 8px 8px 8px 12px;
    gap: 4px
  }

  #mi {
    font-size: 16px;
    padding: 2px 0;
    margin-left: 10px
  }

  .sbtn {
    width: 36px;
    height: 36px;
    border-radius: 10px
  }

  .iib {
    padding: 8px
  }

  .ifoot {
    font-size: 10px;
    padding: 0 0 2px;
    margin-bottom: 0
  }

  .tb {
    padding: 0 12px;
    height: 50px
  }

  .tbt {
    font-size: 13px
  }

  .msg.user .mb {
    font-size: 13px;
    padding: 9px 12px
  }

  .msg.ai .mb {
    font-size: 13.5px
  }

  .mav {
    width: 24px;
    height: 24px
  }

  .wlc {
    padding: 32px 16px 24px
  }

  .wt {
    font-size: 23px
  }

  .ws {
    font-size: 12px;
    margin-bottom: 22px
  }

  .sc {
    padding: 12px
  }

  .mbox {
    padding: 20px;
    border-radius: 16px
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px
  }

  .cw pre {
    padding: 10px 12px;
    font-size: 11.5px
  }

  .ch {
    padding: 7px 10px;
    flex-wrap: wrap;
    gap: 4px
  }

  .ch-btns {
    gap: 3px
  }

  .cpb,
  .anlb {
    padding: 3px 7px;
    font-size: 10px
  }

  .sbf {
    padding: 7px
  }

  .ur {
    padding: 7px
  }

  .q-toast {
    bottom: 80px
  }

  .mob-nav {
    display: flex
  }

  .main {
    padding-bottom: 0px
  }
}

@media(max-width:380px) {
  #mi {
    font-size: 15px
  }

  .iib {
    padding: 6px
  }

  .sbtn {
    width: 33px;
    height: 33px
  }
}

@supports (-webkit-touch-callout: none) {
  .screen {
    height: -webkit-fill-available
  }

  body {
    height: -webkit-fill-available
  }
}

/* MOBILE BOTTOM NAV */
.mob-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 40;
  background: color-mix(in srgb, var(--sb) 90%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, .07);
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
}

.mob-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--dm);
  cursor: pointer;
  padding: 6px 18px;
  border-radius: 12px;
  font-size: 10px;
  font-family: inherit;
  transition: all .2s ease;
  font-weight: 500;
}

.mob-nav-btn:hover,
.mob-nav-btn.on {
  color: var(--aa)
}

.mob-nav-btn.on {
  background: rgba(255, 102, 196, .1)
}

.mob-nav-btn svg {
  transition: transform .2s
}

.mob-nav-btn.on svg {
  transform: scale(1.15)
}

/* YENİ AYARLAR PANELİ */
.settings-grid-modal .mbox {
  display: flex;
  max-width: 750px;
  width: 95vw;
  height: 85vh;
  max-height: 90vh;
  padding: 0;
  background: rgba(12, 12, 12, .9);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.settings-sidebar {
  width: 190px;
  min-width: 190px;
  border-right: 1px solid rgba(255,255,255,.07);
  padding: 16px 10px;
  background: rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .settings-grid-modal .mbox {
    flex-direction: column;
    height: 95vh;
    max-height: 95vh;
    border-radius: 12px;
  }
  .settings-sidebar {
    width: 100%;
    min-width: unset;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 6px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    gap: 4px;
  }
  .settings-sidebar-item {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .settings-content {
    padding: 16px;
  }
}

.settings-sidebar-item {
  padding: 12px 16px;
  margin: 2px 8px;
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

/* Profil başlığı */
.sett-profile-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 14px;
}
.sett-profile-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aa), rgba(255,255,255,.3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
  overflow: hidden;
}
.sett-profile-info {
  min-width: 0;
}
.sett-profile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sett-profile-email {
  font-size: 10px;
  color: var(--mu);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.sett-sidebar-div {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 0 0 8px;
}
.sett-item-lbl {
  font-size: 13px;
}

.settings-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--mu);
  transition: background .15s, color .15s;
  margin-bottom: 2px;
}
.settings-sidebar-item .material-symbols-outlined {
  font-size: 18px;
  flex-shrink: 0;
}

.settings-sidebar-item:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--tx);
}

.settings-sidebar-item.active {
  background: rgba(255, 255, 255, .1);
  color: var(--tx);
  font-weight: 600;
}
.settings-sidebar-item.active .material-symbols-outlined {
  color: var(--aa);
}
.sett-danger-item {
  color: var(--red) !important;
}
.sett-danger-item:hover {
  background: rgba(229,88,101,.1) !important;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-family: 'DM Sans';
}

.settings-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 20px;
}

.settings-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── SPLASH SCREEN ── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

#splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255,102,196,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 70%, rgba(96,165,250,.1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 10%, rgba(255,222,89,.07) 0%, transparent 50%);
  animation: splBgPulse 3s ease-in-out infinite alternate;
}

@keyframes splBgPulse {
  from { opacity: .6; }
  to   { opacity: 1;  }
}

#splash.hide {
  animation: splashOut .65s cubic-bezier(.4,0,1,1) forwards
}

@keyframes splashOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); pointer-events: none; }
}

/* Logo sahnesi — dönen yörünge halkaları + 3D logo + parıltı */
.spl-stage {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Nabız atan aura glow (logonun arkasında) */
.spl-aura {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,102,196,.22) 0%, rgba(96,165,250,.10) 45%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: splAura 2.4s ease-in-out infinite alternate;
}

@keyframes splAura {
  from { transform: scale(.82); opacity: .55; }
  to   { transform: scale(1.12); opacity: 1; }
}

/* Dönen renkli yörünge loader'ı (conic-gradient + mask ile ince halka) */
.spl-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,102,196,0) 30deg, #ff66c4 140deg, #ffde59 220deg, #60a5fa 300deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 6px rgba(255,102,196,.5));
  animation: splSpin 1.6s linear infinite;
}

.spl-orbit2 {
  inset: 15px;
  background: conic-gradient(from 180deg, transparent 0deg, #60a5fa 120deg, #ffde59 240deg, transparent 360deg);
  filter: drop-shadow(0 0 5px rgba(96,165,250,.45));
  opacity: .8;
  animation: splSpinRev 2.3s linear infinite;
}

@keyframes splSpin    { to { transform: rotate(360deg); } }
@keyframes splSpinRev { to { transform: rotate(-360deg); } }

/* Logo kabı (parıltının taşmaması için overflow hidden) */
.spl-logo-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 22px;
  overflow: hidden;
  z-index: 2;
  perspective: 600px;
  filter: drop-shadow(0 0 16px rgba(255,102,196,.45));
}

.spl-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 22px;
  opacity: 0;
  transform-origin: center;
  animation: splLogoIn .85s cubic-bezier(.34,1.56,.64,1) .15s forwards;
}

@keyframes splLogoIn {
  0%   { opacity: 0; transform: rotateY(95deg) scale(.45); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}

/* Logonun üzerinden geçen holografik parıltı */
.spl-shine {
  position: absolute;
  top: 0;
  left: -65%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: splShine 2.6s ease-in-out .9s infinite;
}

@keyframes splShine {
  0%   { left: -65%; }
  35%  { left: 150%; }
  100% { left: 150%; }
}

/* Hareket azaltma: splash animasyonlarını durdur ama içerik görünür kalsın */
@media (prefers-reduced-motion: reduce) {
  .spl-orbit, .spl-aura, .spl-shine, .spl-ring, .spl-particle { animation: none !important; }
  .spl-logo, .spl-name, .spl-tagline, .spl-ver { animation: none !important; opacity: 1 !important; }
  .spl-logo { transform: none !important; }
  .spl-name { clip-path: none !important; }
  .spl-bar-fill { animation: none !important; width: 100% !important; }
}

.spl-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-top: 26px;
  background: linear-gradient(135deg, #ffffff 20%, #ff66c4 60%, #ffde59 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: splNameIn .6s cubic-bezier(.22,1,.36,1) .7s forwards;
  position: relative;
  z-index: 1;
}

@keyframes splNameIn {
  to { opacity: 1; clip-path: inset(0 0% 0 0); }
}

.spl-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0;
  animation: splFadeUp .5s ease 1.35s forwards;
  position: relative;
  z-index: 1;
}

@keyframes splFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.spl-ver {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,.2);
  margin-top: 4px;
  opacity: 0;
  animation: splFadeUp .4s ease 1.55s forwards;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.spl-bar {
  width: 180px;
  height: 2px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  margin-top: 28px;
  overflow: hidden;
  opacity: 0;
  animation: splFadeUp .4s ease 1.2s forwards;
  position: relative;
  z-index: 1;
}

.spl-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff66c4, #ffde59, #60a5fa, #ff66c4);
  background-size: 300% 100%;
  border-radius: 2px;
  animation: splBar 1.3s cubic-bezier(.4,0,.2,1) 1.3s forwards, splBarShimmer 2s linear 1.3s infinite;
}

@keyframes splBar {
  0%   { width: 0%; }
  100% { width: 100%; }
}

@keyframes splBarShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Parçacık efekti */
.spl-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.spl-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  animation: splParticle linear infinite;
}

@keyframes splParticle {
  0%   { transform: translateY(110vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .6; }
  100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}

/* Glow halka */
.spl-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(255,102,196,.12);
  animation: splRing 2.5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.spl-ring:nth-child(2) {
  width: 500px;
  height: 500px;
  border-color: rgba(96,165,250,.07);
  animation-delay: .4s;
  animation-duration: 3s;
}

.spl-ring:nth-child(3) {
  width: 700px;
  height: 700px;
  border-color: rgba(255,222,89,.05);
  animation-delay: .8s;
  animation-duration: 3.5s;
}

@keyframes splRing {
  from { transform: scale(.9); opacity: .4; }
  to   { transform: scale(1.1); opacity: 1; }
}

.material-symbols-outlined {
  line-height: 1;
  display: inline-block;
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased
}

/* Applications section in profile */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 12px;
  transition: transform .2s, box-shadow .2s;
}

.app-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.app-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.app-info {
  width: 100%;
}

.app-name {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--tx);
}

.app-desc {
  font-size: 14px;
  color: var(--mu);
  margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════
   MODERN SIGN-IN PAGE STYLES
   ══════════════════════════════════════════════════════ */

/* Canvas Background */
#dot-matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.signin-overlay {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Navbar Styles */
.signin-navbar {
  padding: 20px 40px;
  background: rgba(12, 12, 12, 0.5);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 20;
}

.navbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.logo-text {
  font-weight: 700;
  color: #fff;
  font-size: 16px;
  letter-spacing: -0.3px;
  background: linear-gradient(to right, #ff66c4, #ffde59);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar-nav {
  display: flex;
  gap: 40px;
  flex: 1;
}

.nav-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #ff66c4, #ffde59);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: #fff;
}

.nav-link:hover::after {
  width: 100%;
}

.navbar-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.nav-btn {
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.signup-nav-btn {
  background: linear-gradient(135deg, rgba(255, 102, 196, 0.2), rgba(255, 222, 89, 0.2));
  border-color: rgba(255, 102, 196, 0.3);
}

.signup-nav-btn:hover {
  background: linear-gradient(135deg, rgba(255, 102, 196, 0.3), rgba(255, 222, 89, 0.3));
  border-color: rgba(255, 102, 196, 0.5);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

/* Content Area */
.signin-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
}

.signin-form-wrapper {
  width: 100%;
  max-width: 500px;
}

/* Steps */
.signin-step {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.signin-step-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Header */
.signin-header {
  text-align: center;
}

.signin-title {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -1px;
}

.signin-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
}

/* Form Groups */
.signin-button-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.google-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.google-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.google-btn span:first-child {
  font-size: 18px;
  font-weight: bold;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Form Field */
.form-field {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 102, 196, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 102, 196, 0.1);
}

.submit-icon-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.submit-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Code Input Group */
.code-input-group {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.code-input {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  outline: none;
  transition: all 0.2s ease;
  font-family: 'DM Mono', monospace;
}

.code-input:focus {
  background: rgba(255, 102, 196, 0.1);
  border-color: rgba(255, 102, 196, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 102, 196, 0.1);
}

.code-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

/* Buttons */
.code-actions {
  display: flex;
  gap: 12px;
}

.btn-back,
.btn-continue,
.btn-primary {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.btn-back {
  background: #fff;
  color: #000;
}

.btn-back:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.btn-back:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-continue {
  background: #fff;
  color: #000;
}

.btn-continue:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.btn-continue:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #ffffff, #aaaaaa);
  color: #000;
  width: 100%;
  margin-top: 16px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15);
}

/* Success Icon */
.success-icon {
  width: 80px;
  height: 80px;
  margin: 20px auto;
  background: linear-gradient(135deg, #ffffff, #aaaaaa);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 40px;
  animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Text Links */
.signin-footer-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  line-height: 1.5;
}

.signin-footer-text a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.signin-footer-text a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.signin-resend {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 16px;
}

.link-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  transition: color 0.2s ease;
}

.link-btn:hover {
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .navbar-inner {
    gap: 20px;
  }

  .navbar-nav {
    display: none;
  }

  .navbar-buttons {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .signin-content {
    padding: 40px 20px;
  }

  .signin-title {
    font-size: 32px;
  }

  .signin-subtitle {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .signin-navbar {
    padding: 16px 20px;
  }

  .logo-text {
    display: none;
  }

  .signin-content {
    padding: 30px 16px;
  }

  .signin-title {
    font-size: 28px;
  }

  .code-input-group {
    gap: 6px;
    padding: 16px;
  }

  .code-input {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

.btn-download {
  display: inline-block;
  padding: 8px 16px;
  background: var(--aa);
  color: var(--bg);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: opacity .2s;
}

.btn-download:hover {
  opacity: 0.85;
}

/* ═══════════════════════════════════════
   PASTE CHIP — büyük yapıştırma önizleme
   ═══════════════════════════════════════ */
#paste-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 0;
}

.paste-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 90px;
  height: 90px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 10px 8px 7px;
  position: relative;
  gap: 5px;
  animation: pasteChipIn .18s ease;
  overflow: hidden;
}

@keyframes pasteChipIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.paste-chip-icon {
  color: var(--mu);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paste-chip-meta {
  font-size: 10px;
  font-weight: 600;
  color: var(--mu);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.paste-chip-preview {
  font-size: 9px;
  color: var(--dm);
  font-family: 'DM Mono', monospace;
  white-space: pre;
  overflow: hidden;
  width: 100%;
  line-height: 1.5;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.paste-chip-rm {
  position: absolute;
  top: 4px;
  right: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dm);
  padding: 2px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.paste-chip-rm:hover {
  background: var(--sf2);
  color: var(--tx);
}
.think-inline {
  margin: 0 16px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.think-inline-body {
  padding: 12px 14px;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'DM Mono', monospace;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
}
/* ── AI Mesaj Formatı ── */
.ai-formatted {
  line-height: 1.85;
  font-size: 14px;
  color: var(--tx);
}
.ai-formatted p {
  margin-bottom: 14px;
}
.ai-formatted h1, .ai-formatted h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0 10px;
  color: var(--tx);
}
.ai-formatted h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--tx);
}
.ai-formatted ul, .ai-formatted ol {
  margin: 10px 0 14px 18px;
  line-height: 2;
}
.ai-formatted li {
  margin-bottom: 4px;
}
.ai-formatted strong {
  font-weight: 700;
  color: var(--tx);
}
.ai-formatted code:not(pre code) {
  background: rgba(255,255,255,.1);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 12px;
  font-family: 'DM Mono', monospace;
}
.ai-formatted blockquote {
  border-left: 3px solid var(--aa);
  padding-left: 12px;
  color: var(--mu);
  margin: 10px 0;
}

/* ── Öneri Butonları ── */
.msg-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
}
.msg-sugg-btn {
  background: var(--sf);
  border: 1px solid var(--bd2);
  color: var(--mu);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.msg-sugg-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%);
  transform: translateX(-150%);
  transition: transform 0s;
}
.msg-sugg-btn:hover {
  background: var(--sf2);
  color: var(--tx);
  border-color: var(--aa);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.msg-sugg-btn:hover::after {
  transform: translateX(150%);
  transition: transform 0.45s ease;
}
.msg-sugg-btn:active {
  transform: translateY(0) scale(.97);
}

/* ── Progress Bar ── */
.msg-progress-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  height: 4px;
  position: relative;
}
.msg-progress-fill {
  height: 4px;
  background: var(--aa);
  border-radius: 2px;
  transition: width .15s ease;
  width: 0%;
  flex: 1;
}
.msg-progress-pct {
  font-size: 10px;
  color: var(--mu);
  min-width: 30px;
  text-align: right;
}
@keyframes mpbAnim {
  0% { width: 15%; opacity: .7; }
  50% { width: 75%; opacity: 1; }
  100% { width: 15%; opacity: .7; }
}

/* ── ChatGPT tarzı görsel oluşturma UI ── */
.imggen {
  position: relative;
  margin-bottom: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--bd);
  background: var(--sf2);
  max-width: 512px;
}
.imggen-skeleton {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--sf2);
  overflow: hidden;
}
.imggen-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.04) 20%,
    rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.04) 60%,
    rgba(255,255,255,0) 100%);
  background-size: 220% 100%;
  animation: imgShimmer 1.6s ease-in-out infinite;
}
@keyframes imgShimmer {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
.imggen-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 20px;
  z-index: 2;
}
.imggen-spark {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aa);
  animation: imgSparkPulse 1.4s ease-in-out infinite;
}
@keyframes imgSparkPulse {
  0%, 100% { transform: scale(1); opacity: .65; }
  50%      { transform: scale(1.18); opacity: 1; }
}
.imggen-status {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  letter-spacing: .2px;
}
.imggen-sub {
  font-size: 11px;
  color: var(--mu);
  max-width: 90%;
  line-height: 1.4;
}
.imggen-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: transparent;
  overflow: hidden;
}
.imggen-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 40%;
  background: var(--aa);
  border-radius: 2px;
  animation: imgBar 1.4s ease-in-out infinite;
}
@keyframes imgBar {
  0%   { left: -40%; }
  100% { left: 100%; }
}
.imggen img {
  display: block;
  width: 100%;
  border-radius: 0;
  cursor: zoom-in;
}
.imggen-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--bd);
}
.imggen-prompt {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--mu);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imggen-dl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  color: var(--tx);
  font-size: 11px;
  font-family: inherit;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.imggen-dl:hover { background: var(--bd); }
.imggen-fade { animation: imgFade .5s ease; }
@keyframes imgFade {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}
.scroll-down-btn {
  position: absolute;
  bottom: 90px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  color: var(--tx);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  transition: all .2s;
}
.scroll-down-btn:hover {
  background: var(--aa);
  color: #000;
  border-color: var(--aa);
}
/* ══════════════════════════════════════
   MODE BADGE POP ANİMASYONU
══════════════════════════════════════ */
@keyframes modeBadgePop {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.12); }
  65% { transform: scale(0.94); }
}
.mode-badge.popping {
  animation: modeBadgePop 0.38s cubic-bezier(.36,1.56,.64,1);
}

/* ══════════════════════════════════════
   MOD BAZLI SOHBET ORTAMI TEMALARı
══════════════════════════════════════ */

/* Normal — Yeşil */
#ap.mode-theme-normal .ic {
  border-color: rgba(74, 222, 128, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.1), 0 8px 32px rgba(0,0,0,.4) !important;
  transition: border-color .5s, box-shadow .5s;
}
#ap.mode-theme-normal .tc {
  background: #4ade80 !important;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.65);
}
#ap.mode-theme-normal .cd-fill {
  background: linear-gradient(90deg, #4ade80, #86efac, #4ade80) !important;
}
#ap.mode-theme-normal .sbtn {
  background: #4ade80 !important;
  color: #000 !important;
}
#ap.mode-theme-normal .sbtn:hover {
  background: #86efac !important;
  box-shadow: 0 4px 14px rgba(74, 222, 128, .3) !important;
}

/* Kod — Mavi */
#ap.mode-theme-code .ic {
  border-color: rgba(96, 165, 250, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.1), 0 8px 32px rgba(0,0,0,.4) !important;
  transition: border-color .5s, box-shadow .5s;
}
#ap.mode-theme-code .tc {
  background: #60a5fa !important;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.65);
}
#ap.mode-theme-code .cd-fill {
  background: linear-gradient(90deg, #60a5fa, #93c5fd, #60a5fa) !important;
}
#ap.mode-theme-code .sbtn {
  background: #60a5fa !important;
  color: #000 !important;
}
#ap.mode-theme-code .sbtn:hover {
  background: #93c5fd !important;
  box-shadow: 0 4px 14px rgba(96, 165, 250, .3) !important;
}

/* Detaylı — Turuncu */
#ap.mode-theme-detail .ic {
  border-color: rgba(251, 146, 60, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.1), 0 8px 32px rgba(0,0,0,.4) !important;
  transition: border-color .5s, box-shadow .5s;
}
#ap.mode-theme-detail .tc {
  background: #fb923c !important;
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.65);
}
#ap.mode-theme-detail .cd-fill {
  background: linear-gradient(90deg, #fb923c, #fdba74, #fb923c) !important;
}
#ap.mode-theme-detail .sbtn {
  background: #fb923c !important;
  color: #000 !important;
}
#ap.mode-theme-detail .sbtn:hover {
  background: #fdba74 !important;
  box-shadow: 0 4px 14px rgba(251, 146, 60, .3) !important;
}

/* Yaratıcı — Pembe */
#ap.mode-theme-creative .ic {
  border-color: rgba(244, 114, 182, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.1), 0 8px 32px rgba(0,0,0,.4) !important;
  transition: border-color .5s, box-shadow .5s;
}
#ap.mode-theme-creative .tc {
  background: #f472b6 !important;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.65);
}
#ap.mode-theme-creative .cd-fill {
  background: linear-gradient(90deg, #f472b6, #f9a8d4, #f472b6) !important;
}
#ap.mode-theme-creative .sbtn {
  background: #f472b6 !important;
  color: #000 !important;
}
#ap.mode-theme-creative .sbtn:hover {
  background: #f9a8d4 !important;
  box-shadow: 0 4px 14px rgba(244, 114, 182, .3) !important;
}

/* Hızlı — Varsayılan */
#ap.mode-theme-fast .sbtn {
  background: var(--tx) !important;
  color: var(--bg) !important;
}
/* ══════════════════════════════════════
   BOŞ SOHBET LAYOUT
══════════════════════════════════════ */
#ap.chat-empty .ca {
  flex: 1;
  overflow: hidden;
}

#ap.chat-empty .iz {
  position: fixed;
  top: 50%;
  left: var(--sb-width, 260px);
  right: 0;
  transform: translateY(-50%);
  padding: 0 24px;
  background: transparent;
  z-index: 20;
  transition: top .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1), left .3s ease;
}

#ap:not(.chat-empty) .iz {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  padding: 10px 20px 16px;
  z-index: auto;
  transition: none;
}

#ap.chat-empty .iz .ic {
  max-width: 720px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 8px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
}

#ap.chat-empty #mi {
  font-size: 16px;
  min-height: 52px;
}

#ap.chat-empty .ifoot {
  display: none;
}

@media (max-width: 600px) {
  #ap.chat-empty .iz {
    left: 0;
    padding: 0 12px;
  }
}

/* ══════════════════════════════════════
   YENİ MESAJ PARLAMA EFEKTİ
══════════════════════════════════════ */
@keyframes msgGlow {
  0%   { box-shadow: none; }
  25%  { box-shadow: 0 0 20px rgba(255,255,255,.12), 0 0 40px rgba(255,255,255,.06); }
  60%  { box-shadow: 0 0 10px rgba(255,255,255,.06); }
  100% { box-shadow: none; }
}

.msg-glow .mb {
  animation: msgGlow 1.6s ease forwards;
  border-radius: 12px;
}
/* ══════════════════════════════════════
   SPOTLIGHT EFEKTİ
══════════════════════════════════════ */
#chat-spotlight {
  position: fixed;
  bottom: 0;
  left: var(--sb-width, 260px);
  right: 0;
  height: 70vh;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse 55% 80% at 50% 100%,
    rgba(255, 200, 60, 0.10) 0%,
    rgba(255, 90, 170, 0.09) 40%,
    transparent 72%);
  opacity: 1;
  transition: left .3s ease;
}
@media (max-width: 600px) {
  #chat-spotlight { left: 0; }
}

/* ══════════════════════════════════════
   KARŞILAMA YAZISI
══════════════════════════════════════ */
#chat-greeting {
  position: fixed;
  top: 50%;
  left: var(--sb-width, 260px);
  right: 0;
  transform: translateY(-110px);
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 10;
  opacity: 1;
  transition: opacity .4s ease, left .3s ease;
}
#chat-greeting.hidden {
  opacity: 0 !important;
  display: none !important;
  pointer-events: none;
}
#chat-greeting-text {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.5px;
  color: rgba(255,255,255);
  font-family: 'DM Sans', sans-serif;
  transition: opacity .35s ease;
}
@media (max-width: 600px) {
  #chat-greeting { left: 0; }
}
.loader-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  font-family: "Inter", sans-serif;
  font-size: 1.2em;
  font-weight: 300;
  color: white;
  border-radius: 50%;
  background-color: transparent;
  user-select: none;
}
.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: transparent;
  animation: loader-rotate 2s linear infinite;
  z-index: 0;
}
@keyframes loader-rotate {
  0% { transform: rotate(90deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #ad5fff inset, 0 60px 60px 0 #471eec inset; }
  50% { transform: rotate(270deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 10px 0 #d60a47 inset, 0 40px 60px 0 #311e80 inset; }
  100% { transform: rotate(450deg); box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #ad5fff inset, 0 60px 60px 0 #471eec inset; }
}
.loader-letter {
  display: inline-block;
  opacity: 0.4;
  transform: translateY(0);
  animation: loader-letter-anim 2s infinite;
  z-index: 1;
  border-radius: 50ch;
  border: none;
}
.loader-letter:nth-child(1)  { animation-delay: 0s; }
.loader-letter:nth-child(2)  { animation-delay: 0.1s; }
.loader-letter:nth-child(3)  { animation-delay: 0.2s; }
.loader-letter:nth-child(4)  { animation-delay: 0.3s; }
.loader-letter:nth-child(5)  { animation-delay: 0.4s; }
.loader-letter:nth-child(6)  { animation-delay: 0.5s; }
.loader-letter:nth-child(7)  { animation-delay: 0.6s; }
.loader-letter:nth-child(8)  { animation-delay: 0.7s; }
.loader-letter:nth-child(9)  { animation-delay: 0.8s; }
.loader-letter:nth-child(10) { animation-delay: 0.9s; }
@keyframes loader-letter-anim {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  20% { opacity: 1; transform: scale(1.15); }
  40% { opacity: 0.7; transform: translateY(0); }
}
.ai-loader-wrap {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

/* ══════════════════════════════════════
   SESLI YAZMA MODALİ
══════════════════════════════════════ */
.voice-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.voice-modal.hidden {
  display: none;
}
.voice-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.voice-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px 24px 0 0;
  padding: 24px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: voiceSlideUp .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes voiceSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.voice-modal-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
.voice-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx);
  flex: 1;
}
.voice-modal-x {
  background: none;
  border: none;
  color: var(--mu);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: color .15s;
}
.voice-modal-x:hover { color: var(--tx); }
.voice-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.voice-timer {
  font-family: 'DM Mono', monospace;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--tx);
  line-height: 1;
}
.voice-status {
  font-size: 12px;
  color: var(--mu);
  text-align: center;
}
/* Visualizer */
.voice-viz {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 60px;
  width: 100%;
  justify-content: center;
}
.voice-viz-bar {
  width: 4px;
  height: 20%;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  transition: height .12s ease, background .2s;
  flex-shrink: 0;
}
.voice-viz-bar.active {
  background: var(--aa);
  box-shadow: 0 0 6px var(--aa);
}
/* Mic button */
.voice-rec-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: var(--tx);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.voice-rec-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  transition: all .3s;
}
.voice-rec-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  transform: scale(1.05);
}
.voice-rec-btn.recording {
  background: rgba(220,38,38,.15);
  border-color: rgba(220,38,38,.5);
  animation: voicePulse 1.5s ease-in-out infinite;
}
.voice-rec-btn.recording::before {
  border-color: rgba(220,38,38,.2);
  animation: voicePulseRing 1.5s ease-in-out infinite;
}
@keyframes voicePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.3); }
  50%      { box-shadow: 0 0 0 12px rgba(220,38,38,.0); }
}
@keyframes voicePulseRing {
  0%   { inset: -8px; opacity: .5; }
  100% { inset: -20px; opacity: 0; }
}
/* Transcript box */
.voice-transcript-box {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.voice-transcript-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--mu);
}
.voice-transcript-text {
  font-size: 14px;
  color: var(--tx);
  line-height: 1.6;
  min-height: 20px;
}
.voice-send-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  padding: 7px 16px;
  background: var(--aa);
  color: #000;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
}
.voice-send-btn:hover { opacity: .85; transform: scale(1.03); }