/* Kumanda arayüzü: uzay teması, mor tonlar, cam yüzeyler.
   Renkler değişkendir; vurgu için --vurgu, --vurgu2 ve --gecis yeter.
   Yerleşim kuralı: içerik, yazma alanı ve alt çubuk ayrı satırlardadır; hiçbiri diğerinin üstüne binmez.
   Ekran klavyesi açılınca bütün düzen görünür alana (--vvh) sığar. */
:root {
  --bg: #06041a; --bg2: #140a33;
  --yazi: #f5f2ff; --soluk: rgba(228, 221, 255, .66); --silik: rgba(228, 221, 255, .42);
  --cam: rgba(255, 255, 255, .055); --cam2: rgba(255, 255, 255, .12); --cam-koyu: rgba(20, 11, 52, .62);
  --yuzey: rgba(255, 255, 255, .07); --yuzey2: rgba(255, 255, 255, .1);
  --cizgi: rgba(255, 255, 255, .14); --parlak: rgba(255, 255, 255, .3);
  --vurgu: #c4adff; --vurgu2: #f3a8ff; --vurgu-yazi: #ffffff; --vurgu-soluk: rgba(168, 131, 255, .2);
  --gecis: linear-gradient(135deg, #6d28d9 0%, #a855f7 48%, #e056f5 100%);
  --gezegen: radial-gradient(circle at 32% 26%, #f6d9ff 0%, #c79bff 22%, #8b47f0 55%, #4a14a8 82%, #2a0a6b 100%);
  --isik: rgba(168, 85, 247, .45);
  --yesil: #5ee6a8; --sari: #ffc861; --kirmizi: #ff7d95; --gri: rgba(228, 221, 255, .38);
  --golge: 0 14px 40px rgba(3, 1, 18, .45);
  --cam-golge: inset 0 1px 0 var(--parlak), inset 0 -1px 0 rgba(255, 255, 255, .05), var(--golge);
  --bulanik: blur(26px) saturate(1.7);
  --r: 24px; --cubuk: 68px;
  --alt: env(safe-area-inset-bottom, 0px); --ust: env(safe-area-inset-top, 0px);
  --egri: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
/* Açık tema: lavanta gökyüzü, beyaz cam */
:root[data-tema="acik"] {
  --bg: #ece6ff; --bg2: #dcd0ff;
  --yazi: #1c1040; --soluk: rgba(44, 26, 92, .68); --silik: rgba(44, 26, 92, .44);
  --cam: rgba(255, 255, 255, .5); --cam2: rgba(255, 255, 255, .8); --cam-koyu: rgba(246, 242, 255, .8);
  --yuzey: rgba(255, 255, 255, .58); --yuzey2: rgba(109, 40, 217, .09);
  --cizgi: rgba(109, 40, 217, .17); --parlak: rgba(255, 255, 255, .95);
  --vurgu: #6d28d9; --vurgu2: #c026d3; --vurgu-soluk: rgba(124, 58, 237, .13);
  --isik: rgba(124, 58, 237, .28);
  --yesil: #0f9f6a; --sari: #b86e00; --kirmizi: #e11d48; --gri: rgba(44, 26, 92, .32);
  --golge: 0 14px 36px rgba(76, 40, 160, .16);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --bg: #ece6ff; --bg2: #dcd0ff;
    --yazi: #1c1040; --soluk: rgba(44, 26, 92, .68); --silik: rgba(44, 26, 92, .44);
    --cam: rgba(255, 255, 255, .5); --cam2: rgba(255, 255, 255, .8); --cam-koyu: rgba(246, 242, 255, .8);
    --yuzey: rgba(255, 255, 255, .58); --yuzey2: rgba(109, 40, 217, .09);
    --cizgi: rgba(109, 40, 217, .17); --parlak: rgba(255, 255, 255, .95);
    --vurgu: #6d28d9; --vurgu2: #c026d3; --vurgu-soluk: rgba(124, 58, 237, .13);
    --isik: rgba(124, 58, 237, .28);
    --yesil: #0f9f6a; --sari: #b86e00; --kirmizi: #e11d48; --gri: rgba(44, 26, 92, .32);
    --golge: 0 14px 36px rgba(76, 40, 160, .16);
    color-scheme: light;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--bg); color: var(--yazi);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; opacity: .45; }
h1, h2, h3, p { margin: 0; }
svg { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; border-radius: 10px; }
::placeholder { color: var(--silik); }
::selection { background: rgba(168, 85, 247, .45); }
[hidden] { display: none !important; }

/* ---------- uzay: bulutsu ve yıldızlar ---------- */
#uzay { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, var(--bg2) 0%, var(--bg) 62%); }
#uzay::before, #uzay::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
#uzay::before { width: 78vmax; height: 62vmax; left: -28vmax; top: -22vmax; opacity: .75;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .62), rgba(124, 58, 237, .22) 55%, transparent);
  animation: suzul 46s ease-in-out infinite alternate; }
#uzay::after { width: 70vmax; height: 60vmax; right: -30vmax; bottom: -26vmax; opacity: .7;
  background: radial-gradient(closest-side, rgba(217, 70, 239, .5), rgba(99, 60, 255, .2) 55%, transparent);
  animation: suzul 58s ease-in-out infinite alternate-reverse; }
@keyframes suzul { to { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); } }
.yildiz { position: absolute; inset: 0; width: 100%; height: 100%; }
.yildiz.y0 { animation: goz 5.5s ease-in-out infinite alternate; }
.yildiz.y1 { animation: goz 7.5s ease-in-out infinite alternate-reverse; }
@keyframes goz { from { opacity: .35; } to { opacity: 1; } }
:root[data-tema="acik"] .yildiz { display: none; }
:root[data-tema="acik"] #uzay::before, :root[data-tema="acik"] #uzay::after { opacity: .45; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) .yildiz { display: none; }
  :root:not([data-tema]) #uzay::before, :root:not([data-tema]) #uzay::after { opacity: .45; }
}

/* ---------- iskelet: içerik / durum şeridi / alt çubuk, üst üste binmeden ---------- */
/* Sütun minmax(0, 1fr): içerideki uzun, tek satırlık bir yazı sütunu ekrandan geniş yapamaz (dar ve katlanır ekranlar). */
#uyg { position: relative; z-index: 1; height: var(--vvh, 100dvh); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
main { min-height: 0; min-width: 0; position: relative; }
.gorunum { height: 100%; min-width: 0; display: flex; flex-direction: column; animation: gir .3s var(--egri); }
.kayan { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--cizgi) transparent; }
.ic { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }
@keyframes gir { from { opacity: 0; transform: translateY(8px) scale(.995); } }

.bas { padding: calc(var(--ust) + 18px) 2px 12px; }
.bas h1 { font-size: 34px; line-height: 1.12; letter-spacing: -.025em; font-weight: 760; padding-bottom: 2px;
  background: linear-gradient(120deg, var(--yazi) 30%, var(--vurgu2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bas .alt { color: var(--soluk); font-size: 14.5px; margin-top: 4px; min-height: 20px; }

/* Cam yüzeyler: yarı saydam dolgu, üstte ışık çizgisi, yumuşak gölge */
.kart, .balon.o, .mk-cip, .dugme, .alan, .yanit-d, .arac, .ust-cubuk, .cubuk, .yaz .satir, .tost, .bag-serit, .cek-yenile, .oneri, .komut code {
  background: linear-gradient(150deg, var(--cam2) 0%, var(--cam) 46%, var(--cam) 100%);
  border: 1px solid var(--cizgi);
  box-shadow: var(--cam-golge);
}
.ust-cubuk, .cubuk, .yaz .satir, .tost, .bag-serit, .cek-yenile, .oneri { backdrop-filter: var(--bulanik); -webkit-backdrop-filter: var(--bulanik); }

.ust-cubuk { display: flex; align-items: center; gap: 4px; margin: calc(var(--ust) + 8px) 12px 6px; padding: 6px; border-radius: 24px; z-index: 2; flex: none; }
.ust-cubuk .orta { flex: 1; min-width: 0; text-align: center; }
.ust-cubuk .orta b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust-cubuk .orta span { display: block; font-size: 12.5px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simge-dugme { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 16px; color: var(--vurgu); flex: none; transition: background .15s, transform .12s; }
.simge-dugme:active { background: var(--yuzey2); transform: scale(.94); }
.simge-dugme.soluk { color: var(--soluk); }

/* ---------- alt çubuk (kendi satırında durur) ve mikrofon ---------- */
.cubuk {
  position: relative; z-index: 5; height: var(--cubuk); margin: 4px 12px calc(var(--alt) + 8px);
  display: grid; grid-template-columns: 1fr 1fr 78px 1fr 1fr; align-items: center; padding: 0 6px; border-radius: 34px;
  background: linear-gradient(150deg, var(--cam2), var(--cam-koyu) 60%);
}
.cubuk .marka { display: none; }
.sekme { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px; min-width: 0; color: var(--soluk); font-size: clamp(9.5px, 2.7vw, 10.5px); font-weight: 650; border-radius: 27px; position: relative; transition: color .2s, transform .15s, background .25s; }
.sekme svg { width: 23px; height: 23px; }
.sekme span:not(.rozet) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.sekme[aria-current="page"] { color: var(--yazi); background: var(--yuzey2); box-shadow: inset 0 1px 0 var(--parlak); }
.sekme[aria-current="page"] svg { color: var(--vurgu); filter: drop-shadow(0 0 8px var(--isik)); }
.sekme:active { transform: scale(.93); }
.rozet { position: absolute; top: 3px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--kirmizi); color: #fff; font-size: 11px; font-weight: 750; display: grid; place-items: center; box-shadow: 0 0 12px rgba(255, 80, 120, .7); animation: zipla .3s var(--egri); }
@keyframes zipla { from { transform: scale(0); } }
.mik-yuva { display: grid; place-items: center; }
/* Mikrofon: halkalı gezegen. Çubuğun içinde kalır, içeriğin üstüne taşmaz. */
.mik {
  position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--gezegen);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -7px 14px rgba(30, 6, 90, .55), 0 0 0 4px rgba(120, 70, 255, .16), 0 6px 22px rgba(150, 70, 255, .6);
  transition: transform .2s var(--egri), box-shadow .2s; touch-action: none; user-select: none; -webkit-user-select: none;
  animation: gezegen 5s ease-in-out infinite;
}
.mik::before { content: ""; position: absolute; left: -11px; right: -11px; top: 50%; height: 20px; margin-top: -10px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); border-top-color: transparent; transform: rotate(-18deg); pointer-events: none; filter: drop-shadow(0 0 5px rgba(230, 170, 255, .8)); }
.mik svg { width: 25px; height: 25px; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(40, 0, 90, .6)); }
.mik:active, .mik.basili { transform: scale(.9); animation: none; }
@keyframes gezegen { 50% { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -7px 14px rgba(30, 6, 90, .55), 0 0 0 7px rgba(120, 70, 255, .1), 0 6px 30px rgba(170, 80, 255, .85); } }
html.kb-acik .cubuk { display: none; }

@media (min-width: 900px) {
  #uyg { grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  main { grid-column: 2; grid-row: 1; }
  .cubuk { grid-column: 1; grid-row: 1 / -1; height: auto; margin: 14px 0 14px 14px; grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: start; gap: 6px; padding: 18px 12px; border-radius: 30px; }
  .cubuk .marka { display: flex; align-items: center; gap: 12px; font-weight: 760; font-size: 19px; padding: 4px 10px 18px; letter-spacing: -.015em; }
  .cubuk .marka i { width: 34px; height: 34px; border-radius: 50%; display: block; background: var(--gezegen); box-shadow: 0 0 22px var(--isik), inset 0 1px 1px rgba(255, 255, 255, .7); }
  .sekme { flex-direction: row; gap: 13px; height: 48px; padding: 0 14px; font-size: 15px; justify-content: flex-start; border-radius: 18px; }
  .rozet { position: static; margin-left: auto; }
  .mik-yuva { order: 9; margin-top: 22px; }
  .mik { width: 100%; height: 54px; border-radius: 20px; display: flex; gap: 10px; justify-content: center; font-weight: 680; background: var(--gecis); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px var(--isik); animation: none; }
  .mik::before { display: none; }
  .mik::after { content: "Konuş"; }
  .bag-serit { grid-column: 2; }
  .kayan { padding-bottom: 28px; }
  .bas { padding-top: 38px; }
}

/* ---------- ortak parçalar ---------- */
.kart { border-radius: var(--r); }
.nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--gri); flex: none; }
.nokta.acik { background: var(--yesil); box-shadow: 0 0 10px var(--yesil); }
.nokta.calisiyor { background: var(--vurgu); box-shadow: 0 0 10px var(--vurgu); animation: nabiz 1.4s ease-in-out infinite; }
.nokta.onay { background: var(--sari); box-shadow: 0 0 10px var(--sari); animation: nabiz 1.4s ease-in-out infinite; }
.nokta.hata { background: var(--kirmizi); box-shadow: 0 0 10px var(--kirmizi); }
@keyframes nabiz { 50% { opacity: .45; transform: scale(.82); } }
.cip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--yuzey2); color: var(--soluk); white-space: nowrap; border: 1px solid var(--cizgi); }
.cip.calisiyor { background: var(--vurgu-soluk); color: var(--vurgu); border-color: color-mix(in srgb, var(--vurgu) 35%, transparent); }
.cip.onay { background: color-mix(in srgb, var(--sari) 16%, transparent); color: var(--sari); border-color: color-mix(in srgb, var(--sari) 35%, transparent); }
.cip.hata { background: color-mix(in srgb, var(--kirmizi) 16%, transparent); color: var(--kirmizi); border-color: color-mix(in srgb, var(--kirmizi) 35%, transparent); }
.cip.sirada { color: var(--yazi); }
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 20px; border-radius: 18px; font-weight: 650; text-decoration: none; text-align: center; color: var(--yazi); transition: transform .14s var(--egri), filter .14s, background .2s; }
.dugme:active { transform: scale(.96); filter: brightness(1.15); }
.dugme.ana { background: var(--gecis); border-color: rgba(255, 255, 255, .28); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 28px var(--isik); }
.dugme.tehlike { background: color-mix(in srgb, var(--kirmizi) 16%, transparent); border-color: color-mix(in srgb, var(--kirmizi) 40%, transparent); color: var(--kirmizi); }
.dugme.kucuk { min-height: 40px; padding: 6px 15px; border-radius: 14px; font-size: 14.5px; flex: none; }
.dugme.tam { width: 100%; }
.dugme.bekliyor { pointer-events: none; opacity: .65; }
.alan { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 18px; font-size: 16px; outline: none; color: var(--yazi); transition: border-color .15s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.alan:focus { border-color: var(--vurgu); box-shadow: var(--cam-golge), 0 0 0 4px var(--vurgu-soluk); }
.etiket { display: block; font-size: 13.5px; font-weight: 650; color: var(--soluk); margin: 0 0 7px 6px; }
.bos { text-align: center; padding: 40px 22px; color: var(--soluk); }
.bos .buyuk { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; color: #fff; display: grid; place-items: center; background: var(--gezegen); box-shadow: 0 0 44px var(--isik), inset 0 1px 1px rgba(255, 255, 255, .7); }
.bos .buyuk svg { width: 32px; height: 32px; }
.bos b { display: block; color: var(--yazi); font-size: 19px; margin-bottom: 6px; letter-spacing: -.01em; }
.bos .dugme { margin-top: 20px; }
.iskelet { border-radius: var(--r); height: 88px; margin-bottom: 14px; border: 1px solid var(--cizgi); background: linear-gradient(100deg, var(--cam) 30%, var(--cam2) 50%, var(--cam) 70%); background-size: 300% 100%; animation: parla 1.4s linear infinite; }
@keyframes parla { to { background-position: -150% 0; } }

/* ---------- akış (konuşma) ---------- */
.akis { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 8px; min-width: 0; }
.balon { max-width: min(86%, 620px); padding: 11px 15px; border-radius: 22px; overflow-wrap: anywhere; animation: belir .3s var(--egri); }
@keyframes belir { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.balon.ben { align-self: flex-end; background: var(--gecis); color: #fff; border: 1px solid rgba(255, 255, 255, .26); border-bottom-right-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 26px var(--isik); }
.balon.o { align-self: flex-start; border-bottom-left-radius: 8px; }
.balon .kaynak { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 680; opacity: .88; margin-bottom: 2px; }
.balon .kaynak svg { width: 13px; height: 13px; }
.balon p + p, .balon p + ul, .balon ul + p, .balon p + pre, .balon pre + p, .balon ol + p, .balon p + ol { margin-top: 8px; }
.balon ul, .balon ol { margin: 0; padding-left: 20px; }
.balon pre { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); overflow-x: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.balon code { font: .92em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--yuzey2); padding: 1px 6px; border-radius: 6px; }
.balon pre code { background: none; padding: 0; }
.balon.ben code { background: rgba(255, 255, 255, .22); }
.balon a { color: inherit; text-decoration: underline; }
:root[data-tema="acik"] .balon pre { background: rgba(76, 40, 160, .08); }
.arac { align-self: flex-start; display: flex; align-items: center; gap: 7px; max-width: 92%; padding: 5px 12px; border-radius: 999px; color: var(--soluk); font-size: 12.5px; box-shadow: none; animation: belir .2s var(--egri); }
.arac b { color: var(--yazi); font-weight: 650; flex: none; }
.arac span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.not { align-self: center; font-size: 12.5px; color: var(--soluk); padding: 2px 10px; text-align: center; }
.not.hata { color: var(--kirmizi); }
.saat { font-size: 12px; color: var(--soluk); }
.eylem { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 16px; background: var(--vurgu-soluk); border: 1px solid color-mix(in srgb, var(--vurgu) 30%, transparent); color: var(--vurgu); font-size: 13.5px; font-weight: 620; max-width: 92%; text-align: left; animation: belir .25s var(--egri); }
.eylem span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yaziyor { align-self: flex-start; display: flex; gap: 5px; padding: 15px 17px; }
.yaziyor i { width: 7px; height: 7px; border-radius: 50%; background: var(--vurgu); animation: zip 1s infinite; }
.yaziyor i:nth-child(2) { animation-delay: .15s; } .yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes zip { 40% { transform: translateY(-5px); opacity: .5; } }

/* ---------- kim konuşuyor, yanıtla, etiketle ---------- */
.satir-m { align-self: flex-start; display: flex; align-items: flex-end; gap: 7px; max-width: 100%; touch-action: pan-y; animation: belir .3s var(--egri); }
.satir-m .balon { max-width: min(calc(100vw - 98px), 600px); animation: none; }
.satir-m:not(.cekiliyor) { transition: transform .25s var(--egri); }
.kim-et { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; font-size: 12.5px; font-weight: 720; margin-bottom: 3px; color: var(--kim, var(--vurgu)); }
.kim-et button { color: inherit; font-weight: inherit; text-align: left; }
.kim-et i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; flex: none; }
.kim-et .saat { margin-left: auto; padding-left: 12px; font-weight: 500; }
.kim-et .cip { font-size: 11px; padding: 1px 8px; }
:root[data-tema="acik"] .kim-et { color: color-mix(in srgb, var(--kim, var(--vurgu)) 62%, #1c1040); }
@media (prefers-color-scheme: light) { :root:not([data-tema]) .kim-et { color: color-mix(in srgb, var(--kim, var(--vurgu)) 62%, #1c1040); } }
.balon.onayli { border-color: color-mix(in srgb, var(--sari) 55%, transparent); box-shadow: var(--cam-golge), 0 0 22px color-mix(in srgb, var(--sari) 22%, transparent); }
.balon.hatali { border-color: color-mix(in srgb, var(--kirmizi) 55%, transparent); box-shadow: var(--cam-golge), 0 0 22px color-mix(in srgb, var(--kirmizi) 22%, transparent); }
.yanit-d { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--soluk); flex: none; box-shadow: inset 0 1px 0 var(--parlak); transition: transform .14s var(--egri), background .15s, color .15s; }
.yanit-d svg { width: 17px; height: 17px; }
.yanit-d:active, .satir-m.hazir .yanit-d { background: var(--gecis); color: #fff; transform: scale(1.14); }
.hedefler { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 8px; }
.hedef-cip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 13px; border-radius: 999px; background: var(--gecis); color: #fff; font-size: 13.5px; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 18px var(--isik); animation: belir .2s var(--egri); }
.hedef-cip button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: rgba(255, 255, 255, .2); }
.hedef-cip button svg { width: 13px; height: 13px; }
.alinti { font-size: 13px; color: var(--soluk); border-left: 3px solid var(--vurgu); padding: 1px 9px; margin: 0 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Etiket önerileri yazma alanının üstünde kendi yerini açar; konuşmanın üstüne binmez. */
.oneri { max-height: 216px; overflow-y: auto; margin: 0 0 8px; padding: 5px; border-radius: 22px; background: linear-gradient(150deg, var(--cam2), var(--cam-koyu) 60%); animation: belir .18s var(--egri); }
.oneri button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 9px 13px; border-radius: 16px; text-align: left; font-weight: 620; }
.oneri button small { color: var(--soluk); font-weight: 500; margin-left: auto; }
.oneri button[aria-selected="true"], .oneri button:active { background: var(--vurgu-soluk); color: var(--vurgu); }

/* ---------- yazma alanı: cam kapsül, kendi satırında ---------- */
.yaz { flex: none; padding: 6px 0 4px; }
html.kb-acik .yaz { padding-bottom: 8px; }
.yaz .ic { padding: 0 12px; }
.yaz .satir { display: flex; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 8px; border-radius: 28px; background: linear-gradient(150deg, var(--cam2), var(--cam-koyu) 60%); transition: border-color .2s, box-shadow .2s; }
.yaz .satir:focus-within { border-color: color-mix(in srgb, var(--vurgu) 70%, transparent); box-shadow: var(--cam-golge), 0 0 0 4px var(--vurgu-soluk); }
.yaz textarea { flex: 1; min-width: 0; resize: none; max-height: 132px; min-height: 44px; padding: 11px 8px; border: 0; background: none; font-size: 16px; line-height: 1.4; outline: none; color: var(--yazi); }
.gonder { width: 44px; height: 44px; border-radius: 50%; background: var(--gecis); color: #fff; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px var(--isik); transition: transform .14s var(--egri), opacity .2s, filter .2s; }
.gonder:active { transform: scale(.9); }
.gonder:disabled { opacity: .4; filter: saturate(.5); box-shadow: none; }
.gonder.dur { background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 18px rgba(251, 113, 133, .45); }
.yaz .bilgi { font-size: 12.5px; color: var(--soluk); padding: 0 10px 7px; }
@media (min-width: 900px) { .yaz { padding-bottom: 18px; } .yaz .ic { padding: 0 16px; } }

/* ---------- asistan ana ekranı ---------- */
.serit { display: grid; gap: 8px; padding: 6px 0 12px; }
/* Canlı pano satırı: nokta + ad, altında o anki durum ve ayrıntısı (metin kesilmez, alt satıra iner) */
.an-satir { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; align-items: center; width: 100%; min-height: 52px; text-align: left; padding: 11px 15px; border-radius: 20px;
  background: linear-gradient(150deg, var(--cam2) 0%, var(--cam) 46%, var(--cam) 100%); border: 1px solid var(--cizgi); box-shadow: inset 0 1px 0 var(--parlak); transition: transform .14s var(--egri); }
.an-satir:active { transform: scale(.98); }
.an-satir .kim { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.an-satir .ne { grid-column: 2; font-size: 13.5px; font-weight: 650; color: var(--vurgu); overflow-wrap: anywhere; }
.an-satir .ayr { grid-column: 2; font-size: 13px; color: var(--soluk); overflow-wrap: anywhere; }
.an-satir.onay .ne, .an-satir.soru .ne, .an-onay, .an-soru { color: var(--sari); }
.an-satir.takildi .ne, .an-satir.hata .ne, .an-takildi, .an-hata { color: var(--kirmizi); }
.an-satir.son .ne, .an-satir.yok .ne, .an-satir.cevrimdisi .ne { color: var(--soluk); }
.an-satir.takildi { border-color: color-mix(in srgb, var(--kirmizi) 45%, transparent); }
.an-satir.onay, .an-satir.soru { border-color: color-mix(in srgb, var(--sari) 45%, transparent); }
.an-calisiyor { color: var(--vurgu); }
.mk-cip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 620; box-shadow: inset 0 1px 0 var(--parlak); transition: transform .14s var(--egri); }
.mk-cip:active { transform: scale(.95); }
.mk-cip small { color: var(--soluk); font-weight: 500; }
.uyari { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; margin: 0 0 12px; border-radius: 20px; background: color-mix(in srgb, var(--sari) 13%, transparent); border: 1px solid color-mix(in srgb, var(--sari) 32%, transparent); font-size: 14px; }
.uyari svg { color: var(--sari); margin-top: 1px; }

/* ---------- onay kartı ---------- */
.onaylar { display: grid; gap: 10px; padding-bottom: 10px; }
.onaylar:empty { display: none; }
.onay-kart { padding: 15px; border-color: color-mix(in srgb, var(--sari) 50%, transparent); box-shadow: var(--cam-golge), 0 0 34px color-mix(in srgb, var(--sari) 18%, transparent); animation: belir .3s var(--egri); }
.onay-kart.agir { border-color: var(--kirmizi); box-shadow: var(--cam-golge), 0 0 34px color-mix(in srgb, var(--kirmizi) 28%, transparent); }
.onay-kart .ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--soluk); }
.onay-kart .ozet { margin: 9px 0 4px; font-weight: 620; overflow-wrap: anywhere; }
.onay-kart details { font-size: 13px; color: var(--soluk); margin-top: 6px; }
.onay-kart summary { cursor: pointer; }
.onay-kart pre { margin: 6px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .28); white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.5 ui-monospace, Menlo, monospace; color: var(--yazi); max-height: 180px; overflow: auto; }
:root[data-tema="acik"] .onay-kart pre { background: rgba(76, 40, 160, .08); }
.onay-kart .dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.onay-kart .hep { grid-column: 1 / -1; min-height: 44px; font-size: 14px; color: var(--vurgu); font-weight: 620; }
.soru { margin-top: 10px; }
.soru .secenekler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.soru .sec { min-height: 44px; padding: 9px 13px; border-radius: 16px; border: 1px solid var(--cizgi); background: var(--yuzey); font-size: 14.5px; text-align: left; }
.soru .sec[aria-pressed="true"] { border-color: var(--vurgu); background: var(--vurgu-soluk); color: var(--vurgu); font-weight: 650; }
.soru .sec small { display: block; color: var(--soluk); font-weight: 400; }

/* ---------- bilgisayarlar ---------- */
.liste { display: grid; gap: 14px; padding: 4px 0 12px; }
.liste > * { animation: belir .4s var(--egri) backwards; }
.liste > :nth-child(2) { animation-delay: .05s; } .liste > :nth-child(3) { animation-delay: .1s; } .liste > :nth-child(4) { animation-delay: .15s; } .liste > :nth-child(n+5) { animation-delay: .2s; }
.liste > .kart { overflow: hidden; }
.mk-bas { display: flex; align-items: center; gap: 11px; padding: 15px 8px 12px 17px; }
.mk-bas .ad { flex: 1; min-width: 0; }
.mk-bas .ad b { display: flex; align-items: center; gap: 8px; font-size: 17.5px; letter-spacing: -.01em; }
.mk-bas .ad b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-bas .ad small { color: var(--soluk); font-size: 13px; display: block; overflow-wrap: anywhere; }
.mk-bas .ad small[class^="an-"] { font-weight: 650; }
.mk-bas .ad small.surer { color: var(--vurgu); opacity: .85; }
.mk-bas .ad small.an-calisiyor { color: var(--vurgu); }
.mk-bas .ad small.an-onay, .mk-bas .ad small.an-soru { color: var(--sari); }
.mk-bas .ad small.an-takildi, .mk-bas .ad small.an-hata { color: var(--kirmizi); }
.mk-bas { align-items: flex-start; }
.mk-bas > .nokta { margin-top: 9px; }
.ana-rozet { font-size: 10.5px; font-weight: 760; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--gecis); color: #fff; flex: none; box-shadow: 0 0 14px var(--isik); }
.satir-dugme { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%; min-height: 52px; text-align: left; padding: 12px 17px; border-top: 1px solid var(--cizgi); transition: background .15s; }
.satir-dugme:active { background: var(--yuzey2); }
.satir-dugme .isim { font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satir-dugme .son { grid-column: 1 / -1; font-size: 13.5px; color: var(--soluk); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.satir-dugme.ekle { color: var(--vurgu); font-weight: 650; display: flex; gap: 8px; align-items: center; }

/* ---------- paylaşım ---------- */
.dosya { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%; min-height: 56px; text-align: left; padding: 10px 16px; border-top: 1px solid var(--cizgi); transition: background .15s; }
.dosya:first-child { border-top: 0; }
.dosya:active { background: var(--yuzey2); }
.dosya .im { grid-row: span 2; width: 38px; height: 38px; border-radius: 13px; background: var(--yuzey2); display: grid; place-items: center; color: var(--soluk); }
.dosya.klasor .im { background: var(--vurgu-soluk); color: var(--vurgu); }
.dosya .ad { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dosya .alt { grid-column: 2; font-size: 12.5px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yol { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px; color: var(--soluk); padding: 0 4px 10px; }
.yol button { color: var(--vurgu); font-weight: 620; padding: 4px 2px; }

/* ---------- ayarlar ---------- */
.bolum { margin: 0 0 24px; }
.bolum > h2 { font-size: 12.5px; font-weight: 720; text-transform: uppercase; letter-spacing: .07em; color: var(--soluk); margin: 0 0 9px 8px; }
.ayar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 13px 17px; border-top: 1px solid var(--cizgi); min-height: 56px; }
.ayar:first-child { border-top: 0; }
.ayar .ad { flex: 1 1 150px; min-width: 0; }
.ayar .ad small { display: block; color: var(--soluk); font-size: 13px; }
.ayar input.alan, .ayar select.alan { flex: 1 1 180px; max-width: 240px; min-height: 44px; padding: 8px 13px; border-radius: 14px; box-shadow: inset 0 1px 0 var(--parlak); }
.ayar input[type="range"] { accent-color: #a855f7; flex: 0 1 160px; min-width: 110px; height: 44px; }
.anahtar { position: relative; width: 54px; height: 32px; flex: none; }
.anahtar input { position: absolute; inset: -6px; opacity: 0; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; cursor: pointer; }
.anahtar i { position: absolute; inset: 0; border-radius: 16px; background: var(--yuzey2); border: 1px solid var(--cizgi); transition: background .25s, box-shadow .25s; pointer-events: none; }
.anahtar i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(160deg, #fff, #e9dcff); box-shadow: 0 2px 6px rgba(10, 0, 40, .45); transition: transform .28s var(--egri); }
.anahtar input:checked + i { background: var(--gecis); box-shadow: 0 0 18px var(--isik); }
.anahtar input:checked + i::after { transform: translateX(22px); }
.bolmeli { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 16px; background: var(--yuzey2); border: 1px solid var(--cizgi); flex: 1 1 220px; max-width: 320px; }
.bolmeli button { position: relative; z-index: 1; min-height: 36px; padding: 6px 8px; font-size: 14px; font-weight: 650; border-radius: 12px; color: var(--soluk); transition: color .2s; }
.bolmeli button[aria-pressed="true"] { color: #fff; }
.bolmeli .kizak { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 12px; background: var(--gecis); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 14px var(--isik); transition: transform .3s var(--egri); }
.sifre-alan { position: relative; }
.sifre-alan .alan { padding-right: 52px; }
.sifre-alan button { position: absolute; right: 4px; top: 3px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--soluk); }

/* ---------- giriş ---------- */
.giris { height: 100%; overflow-y: auto; display: grid; place-items: center; padding: calc(var(--ust) + 24px) 24px 24px; }
.giris form { width: 100%; max-width: 380px; display: grid; gap: 15px; text-align: center; animation: gir .5s var(--egri); }
.giris .logo { position: relative; width: 96px; height: 96px; margin: 10px auto 12px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--gezegen);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .7), inset 0 -12px 22px rgba(30, 6, 90, .55), 0 0 0 8px rgba(120, 70, 255, .12), 0 20px 60px rgba(150, 70, 255, .6), 0 0 110px rgba(217, 70, 239, .4); }
.giris .logo::before { content: ""; position: absolute; left: -24px; right: -24px; top: 50%; height: 38px; margin-top: -19px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: transparent; transform: rotate(-18deg); filter: drop-shadow(0 0 8px rgba(230, 170, 255, .8)); }
.giris .logo svg { width: 38px; height: 38px; }
.giris h1 { font-size: 34px; letter-spacing: -.025em; font-weight: 760; padding-bottom: 2px; background: linear-gradient(120deg, var(--yazi) 30%, var(--vurgu2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.giris p { color: var(--soluk); }
.giris .hata { color: var(--kirmizi); font-size: 14px; min-height: 20px; }

/* ---------- katmanlar: sayfa, bildirim. Klavye açıkken görünür alana sığarlar. ---------- */
.perde { position: fixed; left: 0; right: 0; top: 0; height: var(--vvh, 100dvh); z-index: 30; background: rgba(4, 2, 16, .55); display: flex; align-items: flex-end; justify-content: center; animation: sol .25s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes sol { from { opacity: 0; } }
.sayfa { width: 100%; max-width: 540px; max-height: calc(var(--vvh, 100dvh) - var(--ust) - 28px); overflow-y: auto; overscroll-behavior: contain; border-radius: 34px 34px 0 0; padding: 10px 20px calc(22px + var(--alt));
  background: linear-gradient(165deg, color-mix(in srgb, var(--bg2) 80%, #a855f7 20%), color-mix(in srgb, var(--bg) 90%, #7c3aed 10%)); border: 1px solid var(--cizgi); border-bottom: 0;
  box-shadow: inset 0 1px 0 var(--parlak), 0 -20px 60px rgba(3, 1, 18, .5); animation: kay .38s var(--egri); }
html.kb-acik .sayfa { padding-bottom: 16px; }
:root[data-tema="acik"] .sayfa { background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(240, 232, 255, .97)); }
@media (prefers-color-scheme: light) { :root:not([data-tema]) .sayfa { background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(240, 232, 255, .97)); } }
@keyframes kay { from { transform: translateY(100%); } }
.sayfa::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--parlak); margin: 0 auto 14px; }
.sayfa h2 { font-size: 22px; letter-spacing: -.015em; margin-bottom: 5px; overflow-wrap: anywhere; }
.sayfa .acik { color: var(--soluk); font-size: 14.5px; margin-bottom: 15px; }
.sayfa .dizi { display: grid; gap: 12px; }
.sayfa .secenek { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 54px; padding: 12px 8px; border-top: 1px solid var(--cizgi); font-weight: 620; text-align: left; }
.sayfa .secenek svg { color: var(--vurgu); }
.sayfa .secenek:first-of-type { border-top: 0; }
.sayfa .secenek.tehlike, .sayfa .secenek.tehlike svg { color: var(--kirmizi); }
.perde.kapaniyor { animation: sol .2s reverse forwards; }
.perde.kapaniyor .sayfa { animation: kay .22s ease-in reverse forwards; }
@media (min-width: 900px) {
  .perde { align-items: center; }
  .sayfa { border-radius: 32px; border-bottom: 1px solid var(--cizgi); padding-bottom: 22px; animation-name: buyu; }
  .sayfa::before { display: none; }
  @keyframes buyu { from { opacity: 0; transform: scale(.95); } }
}
.komut { display: grid; gap: 8px; }
.komut code { min-width: 0; padding: 13px 14px; border-radius: 16px; font: 13px/1.5 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; box-shadow: inset 0 1px 0 var(--parlak); }
.adimlar { counter-reset: a; display: grid; gap: 11px; margin: 6px 0 4px; padding: 0; list-style: none; font-size: 14.5px; }
.adimlar li { counter-increment: a; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; }
.adimlar li::before { content: counter(a); width: 28px; height: 28px; border-radius: 50%; background: var(--gecis); color: #fff; font-weight: 720; font-size: 13px; display: grid; place-items: center; box-shadow: 0 0 14px var(--isik); }
.bekliyor-satir { display: flex; align-items: center; gap: 10px; color: var(--soluk); font-size: 14.5px; padding: 6px 2px; }
.doner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--cizgi); border-top-color: var(--vurgu); animation: don .8s linear infinite; flex: none; }
@keyframes don { to { transform: rotate(360deg); } }

#tostlar { position: fixed; left: 0; right: 0; top: calc(var(--ust) + 10px); z-index: 60; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.tost { pointer-events: auto; max-width: 520px; padding: 12px 18px; border-radius: 22px; color: var(--yazi); font-size: 14.5px; font-weight: 560; background: linear-gradient(150deg, var(--cam2), var(--cam-koyu) 60%); animation: in .35s var(--egri); text-align: left; overflow-wrap: anywhere; }
.tost.hata { border-color: color-mix(in srgb, var(--kirmizi) 60%, transparent); box-shadow: var(--cam-golge), 0 0 26px color-mix(in srgb, var(--kirmizi) 30%, transparent); }
.tost.cikiyor { animation: in .2s reverse forwards; }
@keyframes in { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
/* Bağlantı şeridi: içerikle alt çubuk arasında kendi satırında durur. */
.bag-serit { justify-self: center; display: flex; align-items: center; gap: 9px; margin: 4px 12px 2px; padding: 9px 16px; border-radius: 999px; color: var(--yazi); font-size: 13.5px; font-weight: 620; background: linear-gradient(150deg, var(--cam2), var(--cam-koyu) 60%); animation: belir .3s var(--egri); }

/* ---------- aşağı çekince yenile ---------- */
.cek-yenile { position: fixed; left: 50%; top: calc(var(--ust) + 6px); z-index: 25; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transform: translate(-50%, -66px); pointer-events: none; background: linear-gradient(150deg, var(--cam2), var(--cam-koyu) 60%); }
.cek-yenile:not(.cekiliyor) { transition: transform .25s var(--egri), opacity .2s; }
.cek-yenile .doner { animation: none; border-top-color: var(--gri); transition: border-color .15s; }
.cek-yenile.hazir .doner { border-top-color: var(--vurgu2); }
.cek-yenile.yukleniyor .doner { animation: don .8s linear infinite; border-top-color: var(--vurgu2); }

/* ---------- ses katmanı: gezegen ---------- */
.ses { position: fixed; left: 0; right: 0; top: 0; height: var(--vvh, 100dvh); z-index: 40; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; padding: calc(var(--ust) + 24px) 20px calc(var(--alt) + 28px); overflow: hidden;
  background: radial-gradient(90% 60% at 50% 38%, rgba(139, 92, 246, .34), transparent 70%), color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); animation: sol .3s; }
.ses .orta { display: grid; justify-items: center; align-content: center; gap: 16px; text-align: center; width: 100%; max-width: 560px; min-height: 0; }
.ses .kime { max-width: 100%; font-size: 13.5px; font-weight: 700; color: var(--soluk); display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.ses .hal { font-size: 26px; font-weight: 740; letter-spacing: -.02em; }
.ses .soz { min-height: 48px; font-size: 17px; color: var(--soluk); overflow-wrap: anywhere; max-height: 28vh; overflow-y: auto; }
.ses .soz.cevap { color: var(--yazi); }
.kure { --sev: 0; position: relative; width: min(168px, 42vw, 26vh); aspect-ratio: 1; display: grid; place-items: center; margin: 4vh 44px; border-radius: 50%; }
.kure i { position: absolute; inset: 0; border-radius: 50%; }
.kure .cek { background: radial-gradient(circle at 32% 26%, #fbe9ff 0%, #d5b1ff 18%, #9a5bf5 46%, #5a1cc0 76%, #2a0a6b 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .7), inset 0 -22px 40px rgba(30, 6, 90, .6), 0 0 60px rgba(168, 85, 247, .7), 0 0 150px rgba(217, 70, 239, .45);
  transform: scale(calc(.84 + var(--sev) * .3)); transition: transform .09s linear; }
.kure::before { content: ""; position: absolute; left: -22%; right: -22%; top: 50%; height: 36%; margin-top: -18%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); border-top-color: transparent; transform: rotate(-18deg); filter: drop-shadow(0 0 10px rgba(230, 170, 255, .9)); z-index: 1; pointer-events: none; }
.kure .hale { border: 1.5px solid color-mix(in srgb, var(--vurgu2) 70%, transparent); opacity: 0; }
.ses.dinliyor .kure .hale { animation: hale 2s ease-out infinite; }
.ses.dinliyor .kure .hale + .hale { animation-delay: 1s; }
@keyframes hale { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.6); opacity: 0; } }
.ses.dusunuyor .kure .cek { animation: solu 1.3s ease-in-out infinite; }
@keyframes solu { 50% { transform: scale(.76); filter: saturate(.75) brightness(.9); } }
.ses.dusunuyor .kure::before { animation: yorunge 2.2s linear infinite; }
@keyframes yorunge { to { transform: rotate(342deg); } }
.ses.konusuyor .kure .cek { animation: konus .7s ease-in-out infinite alternate; }
@keyframes konus { from { transform: scale(.86); } to { transform: scale(1.04); } }
.ses .alt-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ses .ipucu { font-size: 13.5px; color: var(--soluk); margin-top: 12px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --cam: rgba(40, 26, 88, .92); --cam2: rgba(56, 38, 116, .95); --cam-koyu: rgba(24, 14, 60, .96); --bulanik: none; }
  .ses { background: var(--bg); }
}