/* Ortak tasarım sistemi — açık tema. Yönetici ve personel panelleri bu dosyayı kullanır. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
:root{
  --bg:#F6F7FB;--card:#FFFFFF;--line:#E4E7EC;--ink:#101828;--mut:#667085;
  --acc:#2F5BEA;--acc-d:#2447C4;--acc-soft:#EAF0FF;
  --ok:#12805C;--ok-soft:#E6F6EF;--warn:#B45309;--warn-soft:#FEF3E2;--bad:#C92A2A;--bad-soft:#FDECEC;
  --r:14px;--sh:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);--sh2:0 12px 32px rgba(16,24,40,.14);
  --nav-h:64px;color-scheme:light;
}
*{box-sizing:border-box;min-width:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em}
a{color:var(--acc)}
.hide{display:none!important}
.mut{color:var(--mut)}.small{font-size:13px}.b{font-weight:600}
.err{color:var(--bad);font-size:14px}

/* üst çubuk + gezinme */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#2F5BEA,#6D8BFF);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:none}
.grow{flex:1}
/* Analiz | Üretim geçişi (analiz paneliyle aynı kalıp) */
.switch{display:inline-flex;background:#EEF0F4;border-radius:999px;padding:3px;flex:none}
.switch a,.switch b{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;color:var(--mut)}
.switch b{background:#fff;color:var(--acc);box-shadow:var(--sh)}.switch a:hover{color:var(--ink)}
@media (max-width:520px){.topbar .brand .bt{display:none}}
.pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);white-space:nowrap}
.pill.live{color:var(--ok);background:var(--ok-soft);border-color:transparent}.pill.demo{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.tabs{display:none;gap:4px}
.tabs button{border:0;background:transparent;padding:8px 14px;border-radius:10px;font-weight:600;color:var(--mut);cursor:pointer}
.tabs button:hover{background:var(--bg)}.tabs button.on{background:var(--acc-soft);color:var(--acc)}
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bottomnav button{border:0;background:transparent;display:grid;justify-items:center;gap:2px;padding:8px 2px 7px;min-height:var(--nav-h);color:var(--mut);font-size:11.5px;font-weight:600;cursor:pointer}
.bottomnav button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bottomnav button.on{color:var(--acc)}
.page{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px)}
.wrap{max-width:920px;margin:0 auto;padding:18px 16px}
@media (min-width:900px){.tabs{display:flex}.bottomnav{display:none}.page{padding-bottom:24px}.wrap{padding:28px 24px}}

/* kartlar, düğmeler, formlar */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.stack{display:grid;gap:12px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row>.grow{flex:1 1 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600;cursor:pointer;text-decoration:none;box-shadow:var(--sh);transition:transform .05s,background .15s}
.btn:hover{background:#FAFBFC}.btn:active{transform:scale(.98)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}.btn.primary:hover{background:var(--acc-d)}
.btn.soft{background:var(--acc-soft);border-color:transparent;color:var(--acc)}
.btn.danger{color:var(--bad);border-color:#F2B8B8;background:#fff}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.block{width:100%}.btn.sm{min-height:36px;padding:6px 12px;font-size:14px;border-radius:10px}
.btn:disabled{opacity:.5;cursor:default}
.field{display:grid;gap:6px}.field>span{font-size:13px;font-weight:600;color:var(--mut)}
input,select,textarea{width:100%;min-height:46px;padding:11px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:12px;font-size:16px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
textarea{min-height:96px;resize:vertical}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--acc-soft);color:var(--acc);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.bad{background:var(--bad-soft);color:var(--bad)}.chip.idle{background:#F2F4F7;color:var(--mut)}
.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px;color:var(--mut);cursor:pointer;min-height:38px}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1 1 0;min-width:84px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 10px;font-weight:600;cursor:pointer;min-height:42px}
.seg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.bar{height:8px;border-radius:99px;background:#EEF0F4;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#2F5BEA,#6D8BFF);transition:width .4s}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media (min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.kpi b{display:block;font-size:26px;letter-spacing:-.02em;line-height:1.1}.kpi span{font-size:13px;color:var(--mut)}
.h2{font-size:22px;font-weight:800;margin:2px 0 14px;letter-spacing:-.02em}
.section-title{font-size:13px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin:20px 0 8px}

/* liste öğeleri */
.item{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;box-shadow:var(--sh);margin-bottom:8px;font-weight:400}
.item.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset;background:var(--acc-soft)}
.item .th{width:48px;height:48px;border-radius:12px;background:#EEF0F4 center/cover;flex:none;display:grid;place-items:center;font-size:20px}
.item .tx{flex:1;min-width:0}.item .tx b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item .tx small{color:var(--mut)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;font-weight:800;flex:none}
.empty{text-align:center;padding:36px 16px;color:var(--mut)}.empty svg{width:72px;height:72px;stroke:#C5CBD6;fill:none;stroke-width:1.4;margin-bottom:8px}

/* alt sayfa / pencere */
dialog.sheet{padding:0;border:0;background:var(--bg);color:var(--ink);width:min(1100px,100vw);height:min(92vh,100dvh);max-width:100vw;max-height:100dvh;border-radius:20px;box-shadow:var(--sh2);overflow:hidden}
dialog.sheet.narrow{width:min(520px,100vw);height:auto;max-height:min(92vh,100dvh)}
@media (max-width:700px){dialog.sheet,dialog.sheet.narrow{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}}
dialog.sheet[open]{display:grid;grid-template-rows:auto 1fr auto}
dialog.sheet::backdrop{background:rgba(16,24,40,.45)}
.sh{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--line)}
.sh h3{flex:1;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb{overflow:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:14px;min-height:0}
.sf{padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.sf:empty{display:none}.sf>*{flex:1 1 140px}
dialog.sheet:has(.sf:empty){grid-template-rows:auto 1fr}

/* önizleme */
.viewer{flex:1;min-height:max(420px,calc(100dvh - 360px));display:flex;justify-content:center;background:repeating-conic-gradient(#EEF0F4 0 25%,#F7F8FA 0 50%) 0 0/20px 20px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.viewer iframe{border:0;background:#fff;height:100%;width:100%;transition:width .2s}
.viewer.phone iframe{width:390px;max-width:100%}
.wait{margin:auto;color:var(--mut);text-align:center;padding:20px}
.md h1,.md h2,.md h3{margin:18px 0 8px}.md h1{font-size:21px}.md h2{font-size:18px}.md h3{font-size:16px}
.md p{margin:6px 0}.md ul{margin:6px 0;padding-left:22px}.md table{border-collapse:collapse;display:block;overflow-x:auto;margin:10px 0}
.md th,.md td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top;font-size:14px}.md th{background:var(--acc-soft)}
.note{font-size:13px;color:var(--mut)}.note.bad{color:var(--warn)}
details{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff}summary{cursor:pointer;font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 16px;border-radius:12px;z-index:80;font-size:14px;max-width:90vw;box-shadow:var(--sh2)}
@media (min-width:900px){.toast{bottom:24px}}

/* giriş */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 500px at 50% -10%,#E1E9FF,transparent),var(--bg)}
.gate .card{width:min(400px,100%);padding:28px;display:grid;gap:14px;box-shadow:var(--sh2)}
.gate h1{font-size:24px;font-weight:800}
.photos{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.photos img{height:120px;width:auto;border-radius:12px;scroll-snap-align:start;flex:none;object-fit:cover}
.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:520px){.actions{grid-template-columns:repeat(4,1fr)}}
.actions .btn{flex-direction:column;gap:2px;min-height:58px;font-size:13px}
.statusgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.statusgrid button{min-height:46px;border:1px solid var(--line);background:#fff;border-radius:12px;font-weight:600;cursor:pointer;padding:8px}
.statusgrid button.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}

.chat{height:280px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.msg{max-width:82%;padding:8px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);word-break:break-word}.msg small{display:block;opacity:.65;font-size:11px;margin-top:2px}
.msg.me{align-self:flex-end;background:var(--acc);color:#fff;border-color:transparent}