/* NovAi ofis kiosku — dikey totem (1080×1920) öncelikli; yatay ekranda iki sütun */
:root {
  --lacivert: #0b1b33;
  --mavi: #2fb4f0;
  --mavi-koyu: #1592d0;
  --led: #7fdcff;
  --zemin: #ffffff;
  --yuzey: #f3f7fb;
  --cizgi: #dfe8f1;
  --metin: #0b1b33;
  --soluk: #5b6b80;
  --yesil: #15935b;
  --kirmizi: #c8412f;
  --u: min(1vh, 1vw); /* temel ölçü birimi: ekran büyüdükçe her şey orantılı büyür (1080×1920 totemde ≈ 10,8 px) */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--zemin);
  color: var(--metin);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  display: grid;
  grid-template-rows: auto 1fr auto;
  user-select: none;
  -webkit-user-select: none;
}

/* ── üst şerit ── */
.ust { display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 2) calc(var(--u) * 3.5); }
.ust-logo { width: calc(var(--u) * 5.5); height: auto; }
.ust-ad { display: flex; flex-direction: column; line-height: 1.15; }
.ust-ad strong { font-size: calc(var(--u) * 3); font-weight: 800; letter-spacing: -0.01em; }
.ust-ad span { font-size: calc(var(--u) * 1.6); color: var(--soluk); font-weight: 600; }
.ust-durum {
  margin-left: auto; font-size: calc(var(--u) * 1.8); font-weight: 700; color: var(--mavi-koyu);
  background: #e9f6fd; border-radius: 999px; padding: calc(var(--u) * 0.9) calc(var(--u) * 2.2);
  opacity: 0; transition: opacity .25s;
}
.ust-durum.var { opacity: 1; }

/* ── sahne ── */
.sahne { display: flex; flex-direction: column; min-height: 0; padding: 0 calc(var(--u) * 3.5); }
.avatar { position: relative; flex: 0 0 auto; height: 40vh; display: flex; justify-content: center; transition: height .5s cubic-bezier(.3,.7,.3,1); }
.sohbette .avatar { height: 30vh; }
.avatar svg { height: 100%; width: auto; overflow: visible;
  /* kaynak görsel belden kesik: alt kenar yumuşakça kaybolsun */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); }
#govde { transform-origin: 896px 2000px; animation: nefes 4.2s ease-in-out infinite; }
@keyframes nefes { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.006); } }
.durum-konusuyor #govde { animation-duration: 2.6s; }

#yuz { fill: var(--led); stroke: var(--led); }
.goz { transition: transform .35s cubic-bezier(.3,.7,.3,1); }
.goz-acik { stroke: none; transform-box: fill-box; transform-origin: center; transition: transform .09s ease-in; }
.goz.kirp .goz-acik { transform: scaleY(0.08); }
.goz-mutlu { fill: none; stroke-width: 26; stroke-linecap: round; opacity: 0; }
.mutlu .goz-acik { opacity: 0; }
.mutlu .goz-mutlu { opacity: 1; }
#agiz { stroke: none; transition: opacity .2s; }
#dusunce { opacity: 0; stroke: none; }
#dusunce circle { animation: nokta 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
#dusunce circle:nth-child(2) { animation-delay: .18s; }
#dusunce circle:nth-child(3) { animation-delay: .36s; }
@keyframes nokta { 0%, 80%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
.durum-dusunuyor #dusunce { opacity: 1; }
.durum-dusunuyor #agiz { opacity: 0; }

.dinleme-halka {
  position: absolute; left: 50%; top: 31%; width: 34vh; height: 34vh; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.9); border: calc(var(--u) * .6) solid var(--mavi);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .08s linear;
}
.durum-dinliyor .dinleme-halka { opacity: .55; }

/* ── konuşma ── */
.konusma {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1) 0 calc(var(--u) * 2);
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--u) * 2), #000 calc(100% - var(--u) * 2), transparent 100%);
  scrollbar-width: none;
}
.konusma::-webkit-scrollbar, .kartlar::-webkit-scrollbar { display: none; }
.kartlar { scrollbar-width: none; }
.soru {
  align-self: flex-end; max-width: 85%; margin: 0;
  background: var(--yuzey); border: 1px solid var(--cizgi); color: var(--soluk);
  border-radius: calc(var(--u) * 2.4) calc(var(--u) * 2.4) calc(var(--u) * .6) calc(var(--u) * 2.4);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2); font-size: calc(var(--u) * 2.3); font-weight: 600;
}
.cevap { font-size: calc(var(--u) * 3); line-height: 1.42; font-weight: 600; white-space: pre-line; text-wrap: pretty; }
.cevap .kelime { opacity: .18; transition: opacity .25s; }
.cevap .kelime.okundu { opacity: 1; }
.cevap.hata { color: var(--kirmizi); }

.kartlar { flex: 0 0 auto; display: flex; gap: calc(var(--u) * 1.6); overflow-x: auto; padding: 0 0 calc(var(--u) * 1.6); }
.kartlar:empty { display: none; }
.kart {
  flex: 0 0 auto; width: min(100%, calc(var(--u) * 52)); display: grid; grid-template-columns: calc(var(--u) * 15) 1fr auto;
  gap: calc(var(--u) * 1.6); align-items: center; padding: calc(var(--u) * 1.4);
  border: 1px solid var(--cizgi); border-radius: calc(var(--u) * 2.2); background: #fff;
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2.4) rgba(11, 27, 51, .07);
  animation: kartGel .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes kartGel { from { opacity: 0; transform: translateY(calc(var(--u) * 2)); } }
.kart img.urun { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: calc(var(--u) * 1.2); background: #fff; }
.kart-ad { font-size: calc(var(--u) * 2); font-weight: 700; line-height: 1.25; margin: 0 0 calc(var(--u) * .8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kart-kod { font-size: calc(var(--u) * 1.5); color: var(--soluk); font-weight: 700; }
.kart-fiyat { font-size: calc(var(--u) * 2.8); font-weight: 800; color: var(--lacivert); margin-top: calc(var(--u) * .6); }
.kart-fiyat del { font-size: .55em; color: var(--soluk); font-weight: 600; margin-left: .4em; }
.kart-stok { font-size: calc(var(--u) * 1.6); font-weight: 700; color: var(--yesil); }
.kart-stok.yok { color: var(--kirmizi); }
.kart-qr { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); font-size: calc(var(--u) * 1.3); color: var(--soluk); font-weight: 600; text-align: center; }
.kart-qr .qr { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.kart-qr .qr img, .kart-qr .qr canvas { width: 100% !important; height: 100% !important; }

/* ── hazır sorular ── */
.hazir { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1) 0 calc(var(--u) * 1.6); }
.hazir button {
  font: inherit; font-size: calc(var(--u) * 2); font-weight: 700; color: var(--lacivert);
  background: #fff; border: 2px solid var(--cizgi); border-radius: 999px;
  padding: calc(var(--u) * 1.3) calc(var(--u) * 2.4); cursor: pointer;
}
.hazir button:active { border-color: var(--mavi); background: #eef8fe; }
.sohbette .hazir { display: none; }

/* ── alt şerit: yazı + mikrofon ── */
.alt {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 2) calc(var(--u) * 3.5) calc(var(--u) * 3); border-top: 1px solid var(--cizgi); background: #fff;
}
.yazi { display: flex; align-items: center; background: var(--yuzey); border: 2px solid var(--cizgi); border-radius: 999px; padding-left: calc(var(--u) * 2.6); }
.yazi:focus-within { border-color: var(--mavi); }
.yazi input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit;
  font-size: calc(var(--u) * 2.3); font-weight: 600; color: var(--metin); padding: calc(var(--u) * 2) 0;
  user-select: text; -webkit-user-select: text;
}
.yazi input::placeholder { color: #8b9aad; }
.gonder { border: 0; background: transparent; padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2); cursor: pointer; }
.gonder svg { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); fill: var(--mavi-koyu); }

.mikrofon {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .4);
  width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: 50%; border: 0; cursor: pointer;
  background: var(--mavi); color: #fff; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(47, 180, 240, .45);
  transition: background .2s, transform .1s;
}
.mikrofon:active { transform: scale(.96); }
.mikrofon svg { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); fill: #fff; position: relative; }
.mikrofon-yazi { position: relative; font-size: calc(var(--u) * 1.35); font-weight: 800; line-height: 1.1; max-width: 88%; text-align: center; }
.mikrofon-seviye { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.25); transform: scale(0); transition: transform .06s linear; }
.durum-dinliyor .mikrofon { background: var(--kirmizi); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(200, 65, 47, .4); }
.durum-dusunuyor .mikrofon, .durum-konusuyor .mikrofon { background: var(--lacivert); box-shadow: none; }

/* ── çekme ekranı (kimse yokken) ── */
.cekme {
  position: fixed; inset: auto 0 0 0; height: 46vh; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 calc(var(--u) * 4) calc(var(--u) * 6);
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 28%);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.durum-bekleme .cekme { opacity: 1; pointer-events: auto; }
.cekme-kutu { text-align: center; }
.cekme-baslik { font-size: calc(var(--u) * 5.2); font-weight: 800; margin: 0 0 calc(var(--u) * 1.2); letter-spacing: -0.02em; }
.cekme-alt { font-size: calc(var(--u) * 2.6); color: var(--soluk); font-weight: 600; margin: 0 0 calc(var(--u) * 4); line-height: 1.35; }
.cekme-dokun {
  display: inline-block; font-size: calc(var(--u) * 2.4); font-weight: 800; color: #fff; background: var(--mavi);
  border-radius: 999px; padding: calc(var(--u) * 2) calc(var(--u) * 4.5); animation: dokun 2.2s ease-in-out infinite;
}
@keyframes dokun { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,180,240,.5); } 50% { transform: scale(1.04); box-shadow: 0 0 0 calc(var(--u) * 2.5) rgba(47,180,240,0); } }

.uyari {
  position: fixed; left: 50%; top: calc(var(--u) * 10); transform: translateX(-50%);
  background: var(--lacivert); color: #fff; font-weight: 700; font-size: calc(var(--u) * 2);
  border-radius: 999px; padding: calc(var(--u) * 1.4) calc(var(--u) * 3); z-index: 10;
}

/* Yatay ekran: avatar solda, konuşma sağda */
@media (orientation: landscape) {
  :root { --u: min(1.25vh, 0.7vw); }
  .sahne { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr) auto auto; column-gap: calc(var(--u) * 4); }
  .avatar, .sohbette .avatar { grid-row: 1 / 4; height: auto; min-height: 0; align-items: center; }
  .avatar svg { height: auto; width: 100%; max-height: 100%; }
  .dinleme-halka { top: 38%; width: 30vw; height: 30vw; max-width: 60vh; max-height: 60vh; }
  .cekme { left: 45%; height: 60vh; }
}