:root {
  --ivory:#FAF9F5; --warm:#F0EDE4; --card:#FFFFFF; --border:#DED9CC;
  --ink:#141413; --elev:#292622; --muted:#6B665C;
  --clay:#D97757; --clay-d:#A65F3D; --clay-l:#FBEDE6;
  --sage:#788C5D; --sage-l:#F1F6E8; --sage-d:#566841;
  --blue:#6A9BCC; --blue-l:#EAF2FA; --copper:#C08457; --red:#B91C1C; --red-l:#FCEDEC;
  --f-ui:'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, Consolas, monospace;
  --f-ar:'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  color-scheme: light;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; }
body { background:var(--warm); color:var(--ink); font-family:var(--f-ui); font-size:15px; line-height:1.45; }
button { font-family:inherit; font-size:inherit; cursor:pointer; color:inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--clay); outline-offset:2px; }
button:disabled { opacity:.45; cursor:default; }
input, textarea, select { font-family:inherit; font-size:15px; border:1px solid var(--border); border-radius:10px; padding:9px 11px; background:#fff; color:var(--ink); width:100%; }
.mono { font-family:var(--f-mono); }
.brand { font-weight:700; letter-spacing:1px; font-size:18px; }
.brand i { color:var(--clay); font-style:normal; }
.muted { color:var(--muted); }
.kart { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; min-width:0; }
.baslik3 { margin:0 0 10px; font-size:12.5px; font-family:var(--f-mono); font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.btn { border:1px solid var(--border); background:var(--card); border-radius:10px; padding:9px 14px; font-weight:500; }
.btn.ana { background:var(--clay); border-color:var(--clay); color:#fff; }
.btn.koyu { background:var(--ink); border-color:var(--ink); color:var(--ivory); }
.btn.sage { background:var(--sage-d); border-color:var(--sage-d); color:#fff; }
.btn.kucuk { padding:5px 10px; font-size:13.5px; border-radius:8px; }
.btn.buyuk { padding:14px 18px; font-size:17px; border-radius:12px; width:100%; }
.pill { display:inline-block; font-size:12px; border-radius:999px; padding:2px 9px; border:1px solid var(--border); background:var(--ivory); white-space:nowrap; font-weight:500; }
.pill.acik { background:var(--clay-l); border-color:#EDC7B4; color:var(--clay-d); }
.pill.tamam { background:var(--sage-l); border-color:#CFDDB9; color:var(--sage-d); }
.pill.risk { background:var(--red-l); border-color:#F0C4C0; color:var(--red); }
.pill.bilgi { background:var(--blue-l); border-color:#C9DCEF; color:#3F6E9E; }
.kim { font-size:12px; font-weight:600; border-radius:6px; padding:2px 6px; text-align:center; white-space:nowrap; }
.kim.hbys { background:var(--warm); color:var(--elev); }
.kim.chief { background:var(--sage-l); color:var(--sage-d); }
.kim.insan { background:var(--clay-l); color:var(--clay-d); }
.kim.hasta { background:var(--blue-l); color:#3F6E9E; }
.kim.risk, .kim.hata { background:var(--red-l); color:var(--red); }
.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--ink); color:var(--ivory); padding:10px 16px; border-radius:10px; font-size:14px; z-index:50; max-width:min(92vw, 520px); }
.toast.hata { background:var(--red); }
/* sohbet balonları (hasta ve pano aynası) */
.sohbet { display:flex; flex-direction:column; gap:8px; }
.bal { max-width:88%; background:#fff; border-radius:12px 12px 12px 4px; padding:8px 10px 5px; font-size:14px; box-shadow:0 1px 0 rgba(0,0,0,.06); overflow-wrap:anywhere; white-space:normal; }
.bal.giden { align-self:flex-start; }
.bal.gelen { align-self:flex-end; background:#DCEBCB; border-radius:12px 12px 4px 12px; }
.bal .z { display:block; text-align:right; font-size:11.5px; color:var(--muted); font-family:var(--f-mono); margin-top:3px; }
.bal[dir="rtl"] { font-family:var(--f-ar); text-align:right; }
@keyframes don { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }