:root {
  color-scheme: dark;
  --ege: #062a33;
  --derin: #021a21;
  --tabaka: #0b3a45;
  --kum: #f3e6cd;
  --soluk: #9dbdbd;
  --kehribar: #ffb347;
  --mercan: #ff7a66;
  --gunluk: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --anlatim: ui-serif, "New York", Georgia, serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--derin); color: var(--kum); font: 17px/1.45 var(--gunluk); -webkit-tap-highlight-color: transparent; }
#iris { position: fixed; inset: 0; width: 100%; height: 100%; }
main { position: relative; height: 100dvh; max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 8px) 24px calc(env(safe-area-inset-bottom) + 20px); display: flex; flex-direction: column; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--kehribar); outline-offset: 3px; }
button.sade { color: var(--soluk); padding: 10px 4px; min-height: 44px; font-size: 15px; }
button.sade:hover { color: var(--kum); }
button.ana { background: var(--kum); color: var(--derin); font-weight: 600; border-radius: 999px; padding: 11px 20px; min-height: 44px; }
input { min-width: 0; font: inherit; color: var(--kum); background: rgba(2, 26, 33, .6); border: 1px solid var(--tabaka); border-radius: 12px; padding: 11px 14px; }
input::placeholder { color: var(--soluk); }

#uygulama > header { position: fixed; z-index: 2; top: calc(env(safe-area-inset-top) + 8px); right: 20px; }
#gecmisAc { position: relative; }
#nokta { position: absolute; top: 10px; right: -8px; width: 7px; height: 7px; border-radius: 50%; background: var(--kehribar); }
.sahne { flex: 1 1 0; min-height: 180px; display: grid; place-items: center; }
.goz { display: block; width: min(76vw, 52dvh, 440px); aspect-ratio: 1; border-radius: 50%; touch-action: manipulation; }
.sahne .goz { max-height: 100%; }

#altyazi { flex: 0 1 auto; max-height: 38dvh; overflow-y: auto; text-align: center; }
body:has(#gecmis:not([hidden])) #altyazi { visibility: hidden; }
#soruYazi { margin: 0 0 6px; color: var(--soluk); font-size: 15px; }
#cevapYazi { margin: 0; font: 400 clamp(21px, 3.4vh, 27px)/1.38 var(--anlatim); text-wrap: pretty; }
#soruYazi:empty, #cevapYazi:empty { display: none; }
#durum { margin: 14px 0 0; text-align: center; color: var(--soluk); font-size: 15px; min-height: 1.45em; }

#giris { justify-content: center; align-items: center; gap: 28px; }
#giris .goz { width: min(52vw, 34dvh, 280px); }
#girisForm { width: min(100%, 320px); display: flex; flex-direction: column; gap: 10px; }
#girisForm label { color: var(--soluk); font-size: 15px; }
#girisHata { color: var(--mercan); min-height: 1.45em; margin: 0; font-size: 15px; }

#gecmis { position: fixed; z-index: 3; inset: 0 0 0 auto; width: min(100%, 440px); display: flex; flex-direction: column; gap: 12px; padding: calc(env(safe-area-inset-top) + 8px) 20px calc(env(safe-area-inset-bottom) + 10px); background: var(--ege); border-left: 1px solid var(--tabaka); animation: gir .22s ease-out; }
@keyframes gir { from { transform: translateX(32px); opacity: 0; } }
#gecmis header { display: flex; justify-content: space-between; align-items: center; }
#gecmis h2 { font: 400 24px var(--anlatim); margin: 0; }
#akis { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
#akis:empty::after { content: "Sorduğun sorular ve uyarılar burada görünür."; color: var(--soluk); }
.satir { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.satir.ben { color: var(--soluk); text-align: right; font-size: 15px; padding-left: 15%; }
.satir.jarvis { font-family: var(--anlatim); font-size: 18px; }
.satir.uyari { border-left: 2px solid var(--kehribar); padding-left: 12px; }
.satir time { display: block; color: var(--soluk); font: 13px var(--gunluk); margin-bottom: 2px; }
.satir button { display: block; }
#yaziForm { display: flex; gap: 8px; }
#yaziForm input { flex: 1; }
#gecmis footer { display: flex; flex-wrap: wrap; gap: 18px; }

@media (prefers-reduced-motion: reduce) { #gecmis { animation: none; } }