/* =========================================================================
   Akıllandırma Stüdyosu — mavi / mor, göz yormayan aydınlık & karanlık tema
   ========================================================================= */
:root {
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace;
  --r-sm: 9px; --r: 13px; --r-lg: 18px;
  --sidebar: 276px;
  --sidebar-mini: 80px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --grad: linear-gradient(135deg, #4f6df0 0%, #6d5ef2 50%, #8b5cf6 100%);
  --grad-soft: linear-gradient(135deg, rgba(79,109,240,.12), rgba(139,92,246,.14));
  --side-bg: linear-gradient(180deg, #1b1c4f 0%, #262673 52%, #35298c 100%);
  --side-text: #e8e7ff;
  --side-muted: #a9a8dc;
}

:root[data-theme="light"] {
  --bg: #f3f4fb;
  --bg-2: #eceefa;
  --surface: #ffffff;
  --surface-2: #f8f8fe;
  --surface-3: #eef0fa;
  --border: #e2e4f2;
  --border-2: #d0d4ea;
  --text: #1d2140;
  --text-2: #41476a;
  --muted: #747a9a;
  --primary: #5a5ce0;
  --primary-2: #4a4cce;
  --primary-soft: #ecebfe;
  --primary-ink: #3d3fb4;
  --teal: #0f8f8a; --teal-soft: #e0f5f3;
  --green: #239366; --green-soft: #e2f5ec;
  --amber: #b5730b; --amber-soft: #fdf1dc;
  --red: #cc4161; --red-soft: #fce8ee;
  --violet: #7c56dc; --violet-soft: #f1ebfe;
  --sky: #2f7fd6; --sky-soft: #e5f0fc;
  --rose: #c2557f; --rose-soft: #fbe9f1;
  --slate: #5f6886; --slate-soft: #eef0f6;
  --shadow: 0 1px 2px rgba(30,30,80,.05), 0 6px 22px rgba(40,40,110,.07);
  --shadow-lg: 0 16px 48px rgba(30,30,90,.18);
  --canvas: #e6e8f4;
  --code-bg: #f6f6fd;
  --scroll: #cdd0e6;
}

:root[data-theme="dark"] {
  --bg: #0f1120;
  --bg-2: #13162a;
  --surface: #171a2e;
  --surface-2: #1c2037;
  --surface-3: #242944;
  --border: #2a2f4f;
  --border-2: #363c62;
  --text: #e7e8f6;
  --text-2: #c3c6de;
  --muted: #9096ba;
  --primary: #9b9df8;
  --primary-2: #b1b3fa;
  --primary-soft: #272a57;
  --primary-ink: #c5c6fc;
  --teal: #46c8bd; --teal-soft: #15332f;
  --green: #5ccb98; --green-soft: #173427;
  --amber: #ecb456; --amber-soft: #392c15;
  --red: #f1849a; --red-soft: #3b1d28;
  --violet: #b59cf6; --violet-soft: #2c2448;
  --sky: #78b9f0; --sky-soft: #172c42;
  --rose: #ee93b6; --rose-soft: #3b1f2e;
  --slate: #a8b0c8; --slate-soft: #262b3f;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
  --canvas: #0c0e1a;
  --code-bg: #141729;
  --scroll: #3a4066;
  --side-bg: linear-gradient(180deg, #121331 0%, #1a1946 55%, #241c5a 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; transition: background .25s var(--ease), color .25s var(--ease);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
::selection { background: var(--primary-soft); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.hidden { display: none !important; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------- iskelet */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; height: 100vh; overflow: hidden; transition: grid-template-columns .28s var(--ease); }
.shell.collapsed { grid-template-columns: var(--sidebar-mini) 1fr; }
.sidebar {
  background: var(--side-bg); color: var(--side-text); display: flex; flex-direction: column;
  padding: 20px 16px 16px; gap: 20px; min-width: 0; position: relative; overflow: hidden;
}
.sidebar:before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; right: -160px; top: -140px; background: radial-gradient(circle, rgba(139,92,246,.45), transparent 65%); pointer-events: none; }
.sidebar:after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; left: -150px; bottom: 60px; background: radial-gradient(circle, rgba(79,109,240,.35), transparent 65%); pointer-events: none; }
.sidebar > * { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 13px; color: #fff; padding: 4px 6px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 44px;
  background: var(--grad); box-shadow: 0 6px 18px rgba(109,94,242,.55), inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand-mark svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.brand-text b { font-size: 18px; letter-spacing: -.01em; }
.brand-text small { color: var(--side-muted); font-size: 13px; }
.nav { display: flex; flex-direction: column; gap: 5px; }
.nav-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--side-muted); padding: 8px 14px 4px; white-space: nowrap; }
.nav a {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 12px; color: var(--side-text);
  font-weight: 550; font-size: 15.5px; transition: background .18s, transform .18s; position: relative; white-space: nowrap;
}
.nav a svg { width: 21px; height: 21px; flex: 0 0 21px; opacity: .9; }
.nav a:hover { background: rgba(255,255,255,.08); transform: translateX(2px); }
.nav a.active { background: rgba(255,255,255,.15); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.nav a.active:before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #8fb0ff, #c4a5ff); }
.nav .count { margin-left: auto; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,.16); padding: 1px 9px; border-radius: 99px; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.user-card { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.avatar { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 40px; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; background: var(--grad); }
.avatar.lg { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; flex-basis: 56px; }
.user-card .who { min-width: 0; flex: 1; line-height: 1.25; }
.user-card .who b { display: block; font-size: 14.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card .who span { font-size: 12.5px; color: var(--side-muted); }
.side-btn { width: 38px; height: 38px; border-radius: 11px; border: none; background: rgba(255,255,255,.1); color: var(--side-text); display: grid; place-items: center; cursor: pointer; flex: 0 0 38px; transition: background .15s; }
.side-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.side-btn svg { width: 19px; height: 19px; }
.side-row { display: flex; gap: 8px; align-items: center; }
.side-row .side-btn.wide { flex: 1; width: auto; gap: 8px; display: flex; justify-content: center; font-size: 14px; font-weight: 600; }
.mode-pill { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; font-size: 13px; background: rgba(255,255,255,.07); color: var(--side-text); }
.mode-pill .dot { width: 9px; height: 9px; }
.shell.collapsed .brand-text, .shell.collapsed .nav a span, .shell.collapsed .nav .count, .shell.collapsed .nav-label,
.shell.collapsed .user-card .who, .shell.collapsed .mode-pill .lbl, .shell.collapsed .side-row .lbl { display: none; }
.shell.collapsed .sidebar { padding: 20px 12px 16px; }
.shell.collapsed .nav a { justify-content: center; padding: 12px; }
.shell.collapsed .nav a.active:before { left: -12px; }
.shell.collapsed .user-card { justify-content: center; padding: 8px; background: transparent; box-shadow: none; }
.shell.collapsed .side-row { flex-direction: column; }
.shell.collapsed .mode-pill { justify-content: center; }

.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.topbar {
  height: 68px; flex: 0 0 68px; display: flex; align-items: center; gap: 14px; padding: 0 26px;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
}
.crumbs { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 15.5px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { color: var(--border-2); }
.crumbs b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
.view { flex: 1; overflow: auto; min-height: 0; }
.view > * { animation: viewin .35s var(--ease); }
@keyframes viewin { from { opacity: 0; transform: translateY(6px); } }
.page-pad { padding: 30px 36px 48px; max-width: 1480px; margin: 0 auto; }

/* --------------------------------------------------------------- temel bileşenler */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 17px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; transition: all .18s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn:hover { border-color: var(--border-2); background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(98,92,238,.35); background-size: 140% 140%; }
.btn.primary:hover { background-position: 100% 50%; box-shadow: 0 8px 24px rgba(98,92,238,.45); }
.btn.success { background: linear-gradient(135deg, #22a06b, #2bb38f); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(34,160,107,.28); }
.btn.success:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-3); box-shadow: none; }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: var(--red-soft); border-color: transparent; }
.btn.sm { height: 36px; padding: 0 13px; font-size: 14px; border-radius: 10px; }
.btn.xs { height: 31px; padding: 0 10px; font-size: 13.5px; border-radius: 9px; gap: 6px; }
.btn.xs svg { width: 16px; height: 16px; }
.btn.icon { width: 40px; padding: 0; }
.btn.sm.icon { width: 36px; }
.btn.xs.icon { width: 31px; }
.btn.lg { height: 50px; padding: 0 24px; font-size: 16px; border-radius: 14px; }
.btn.block { width: 100%; }
.btn-group { display: inline-flex; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 3px; gap: 3px; }
.btn-group .btn { border: none; height: 34px; border-radius: 9px; background: transparent; box-shadow: none; transform: none; }
.btn-group .btn.on { background: var(--primary-soft); color: var(--primary-ink); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.card-h { display: flex; align-items: center; gap: 11px; padding: 18px 20px 0; }
.card-h h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.005em; }
.card-h > svg { color: var(--primary); width: 19px; height: 19px; }
.card-h .spacer { flex: 1; }
.card-b { padding: 14px 20px 20px; }
.section-title { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 9px; display: flex; align-items: center; gap: 8px; }
.section-title .spacer { flex: 1; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px;
  font-size: 13.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2); white-space: nowrap;
}
.chip svg { width: 15px; height: 15px; }
.chip.blue, .chip.primary { background: var(--primary-soft); color: var(--primary-ink); }
.chip.teal { background: var(--teal-soft); color: var(--teal); }
.chip.green { background: var(--green-soft); color: var(--green); }
.chip.amber { background: var(--amber-soft); color: var(--amber); }
.chip.red { background: var(--red-soft); color: var(--red); }
.chip.violet { background: var(--violet-soft); color: var(--violet); }
.chip.sky { background: var(--sky-soft); color: var(--sky); }
.chip.rose { background: var(--rose-soft); color: var(--rose); }
.chip.slate { background: var(--slate-soft); color: var(--slate); }
.chip.outline { background: transparent; border: 1px solid var(--border-2); }
.chip.sm { height: 24px; font-size: 12.5px; padding: 0 9px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.dot.green { background: var(--green); } .dot.amber { background: var(--amber); } .dot.red { background: var(--red); }
.dot.blue { background: var(--primary); } .dot.slate { background: var(--muted); } .dot.violet { background: var(--violet); } .dot.teal { background: var(--teal); }

.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s; font-size: 15px;
}
.textarea { height: auto; min-height: 84px; padding: 11px 14px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.input.sm, .select.sm { height: 38px; font-size: 14.5px; padding: 0 11px; border-radius: 10px; }
.input.changed { border-color: var(--amber); background: color-mix(in srgb, var(--amber-soft) 55%, var(--surface)); }
.label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.field { margin-bottom: 18px; }
.hint { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track { width: 44px; height: 26px; border-radius: 99px; background: var(--border-2); position: relative; transition: background .2s; flex: 0 0 44px; }
.switch .track:after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .22s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track:after { transform: translateX(18px); }

.empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty .ill { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center; background: var(--grad-soft); color: var(--primary); }
.empty .ill svg { width: 34px; height: 34px; }
.empty h3 { color: var(--text); margin: 0 0 8px; font-size: 19px; }
.empty p { margin: 0 auto 18px; max-width: 520px; font-size: 15.5px; }

.kbd { font-family: var(--mono); font-size: 12.5px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--surface-2); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 12px; }
@keyframes sk { to { background-position: -200% 0; } }

/* --------------------------------------------------------------- toast, modal, iş paneli */
.toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 90; }
.toast {
  min-width: 300px; max-width: 460px; padding: 14px 17px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); display: flex; gap: 11px; align-items: flex-start; animation: tin .3s var(--ease); font-size: 15px;
}
.toast svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.toast.ok svg { color: var(--green); } .toast.err svg { color: var(--red); } .toast.info svg { color: var(--primary); }
@keyframes tin { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-back { position: fixed; inset: 0; background: rgba(14,15,40,.5); backdrop-filter: blur(4px); z-index: 80; display: grid; place-items: center; animation: fin .2s; padding: 20px; }
@keyframes fin { from { opacity: 0; } }
.modal { width: min(600px, 100%); max-height: 90vh; overflow: auto; background: var(--surface); border-radius: 22px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: tin .3s var(--ease); }
.modal.wide { width: min(900px, 100%); }
.modal-h { padding: 22px 26px 8px; display: flex; align-items: center; gap: 10px; }
.modal-h h2 { margin: 0; font-size: 20px; }
.modal-b { padding: 12px 26px 8px; }
.modal-f { padding: 16px 26px 22px; display: flex; justify-content: flex-end; gap: 10px; }

.job-panel {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; width: min(460px, 92vw); z-index: 85; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: jin .3s var(--ease);
}
@keyframes jin { from { opacity: 0; transform: translate(-50%, 12px); } }
.job-h { padding: 14px 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border); background: var(--grad-soft); }
.job-h b { font-size: 15px; }
.job-h .spacer { flex: 1; }
.job-steps { padding: 12px 16px 16px; max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.job-step { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.job-step .ic { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; margin-top: 1px; }
.job-step .ic svg { width: 17px; height: 17px; }
.job-step.tamam .ic { color: var(--green); }
.job-step.calisiyor { color: var(--text); font-weight: 600; }
.job-step.calisiyor .ic { color: var(--primary); }
.job-step.hata .ic, .job-step.uyari .ic { color: var(--amber); }
.job-step .t { margin-left: auto; color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.job-err { margin: 0 16px 16px; padding: 11px 13px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--grad); border-radius: 99px; transition: width .5s var(--ease); }

/* --------------------------------------------------------------- giriş sayfası */
.auth { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); background: var(--bg); z-index: 50; }
.auth-hero { position: relative; overflow: hidden; background: var(--side-bg); color: #fff; padding: 56px 64px; display: flex; flex-direction: column; }
.auth-hero .blob { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .7; animation: float 14s ease-in-out infinite; }
.auth-hero .b1 { width: 460px; height: 460px; right: -140px; top: -120px; background: radial-gradient(circle, rgba(139,92,246,.7), transparent 65%); }
.auth-hero .b2 { width: 420px; height: 420px; left: -160px; bottom: -120px; background: radial-gradient(circle, rgba(79,109,240,.65), transparent 65%); animation-delay: -6s; }
.auth-hero .b3 { width: 240px; height: 240px; right: 18%; bottom: 14%; background: radial-gradient(circle, rgba(96,165,250,.45), transparent 65%); animation-delay: -3s; }
@keyframes float { 50% { transform: translate(18px, -22px) scale(1.05); } }
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero .brand-text b { font-size: 20px; }
.auth-hero h1 { font-size: 44px; line-height: 1.12; letter-spacing: -.02em; margin: auto 0 18px; max-width: 620px; }
.auth-hero h1 span { background: linear-gradient(90deg, #a5b8ff, #d6b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero p.lead { font-size: 18px; line-height: 1.6; color: #d2d1f5; max-width: 560px; margin: 0 0 34px; }
.feat { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 18px; max-width: 540px; }
.feat .fi { width: 46px; height: 46px; border-radius: 14px; flex: 0 0 46px; display: grid; place-items: center; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.feat .fi svg { width: 22px; height: 22px; }
.feat b { display: block; font-size: 16px; margin-bottom: 2px; }
.feat span { color: #c9c8ef; font-size: 14.5px; }
.auth-hero .foot { margin-top: auto; padding-top: 30px; color: #a9a8dc; font-size: 13.5px; }
.doc-art { position: absolute; right: 7%; top: 21%; width: 210px; height: 270px; border-radius: 16px; background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transform: rotate(6deg); backdrop-filter: blur(3px); padding: 22px; z-index: 0; animation: float 12s ease-in-out infinite; }
.doc-art i { display: block; height: 9px; border-radius: 6px; background: rgba(255,255,255,.22); margin-bottom: 11px; }
.doc-art i.s { width: 60%; } .doc-art i.x { background: rgba(165,184,255,.65); width: 75%; } .doc-art i.st { position: relative; }
.doc-art i.st:after { content: ""; position: absolute; left: -4px; right: -4px; top: 4px; height: 2px; background: #ff8fb0; }
.doc-art .dbox { margin-top: 16px; border: 2px dashed #c4a5ff; border-radius: 9px; height: 54px; }
.auth-side { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: min(440px, 100%); }
.auth-card h2 { font-size: 30px; margin: 0 0 8px; letter-spacing: -.015em; }
.auth-card .sub { color: var(--muted); margin: 0 0 30px; font-size: 16px; }
.auth-card .input { height: 50px; font-size: 16px; border-radius: 13px; }
.pw-wrap { position: relative; }
.pw-wrap button { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border: none; background: transparent; color: var(--muted); border-radius: 9px; cursor: pointer; display: grid; place-items: center; }
.pw-wrap button:hover { background: var(--surface-3); color: var(--text); }
.auth-err { display: flex; gap: 9px; align-items: center; padding: 11px 13px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 14.5px; margin-bottom: 16px; animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.auth-theme { position: absolute; top: 22px; right: 22px; }

/* --------------------------------------------------------------- dosyalar görünümü */
.welcome { position: relative; overflow: hidden; border-radius: 24px; padding: 30px 34px; margin-bottom: 26px; color: #fff; background: var(--grad); box-shadow: 0 14px 40px rgba(98,92,238,.3); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.welcome:before { content: ""; position: absolute; right: -80px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.25), transparent 65%); }
.welcome:after { content: ""; position: absolute; right: 22%; bottom: -150px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%); }
.welcome > * { position: relative; z-index: 1; }
.welcome h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.02em; }
.welcome p { margin: 0; color: rgba(255,255,255,.88); font-size: 16.5px; max-width: 680px; }
.welcome .spacer { flex: 1; }
.welcome .btn { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.welcome .btn:hover { background: rgba(255,255,255,.26); }
.welcome .btn.light { background: #fff; color: var(--primary-2); border-color: #fff; }
:root[data-theme="dark"] .welcome .btn.light { color: #3d3fb4; }
.hero { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.hero h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.02em; }
.hero p { margin: 0; color: var(--muted); max-width: 720px; font-size: 16px; }
.hero .spacer { flex: 1; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat { padding: 18px 20px; transition: transform .2s var(--ease), box-shadow .2s; position: relative; overflow: hidden; }
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat .k { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; gap: 9px; align-items: center; }
.stat .k .ib { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.stat .k svg { width: 18px; height: 18px; }
.stat .v { font-size: 32px; font-weight: 750; letter-spacing: -.02em; margin-top: 8px; }
.stat .s { font-size: 13.5px; color: var(--muted); }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.search { position: relative; flex: 1; min-width: 240px; max-width: 460px; }
.search svg { position: absolute; left: 14px; top: 13px; width: 19px; height: 19px; color: var(--muted); }
.search .input { padding-left: 44px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.dcard { padding: 20px; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.dcard:before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--grad); opacity: 0; transition: opacity .2s; }
.dcard:hover { transform: translateY(-4px); border-color: var(--border-2); box-shadow: var(--shadow-lg); }
.dcard:hover:before { opacity: 1; }
.dcard h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.dcard .meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.thumbs { display: flex; gap: 8px; height: 100px; overflow: hidden; }
.thumbs img { height: 100px; width: 76px; object-fit: cover; object-position: top; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); transition: transform .2s; }
.dcard:hover .thumbs img { transform: translateY(-2px); }
.thumbs .more { width: 76px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font-weight: 650; }
.warn-line { display: flex; gap: 8px; align-items: center; color: var(--red); font-size: 14px; font-weight: 600; }
.warn-line svg { width: 17px; height: 17px; }
.drop {
  border: 2px dashed var(--border-2); border-radius: 16px; padding: 30px; text-align: center; color: var(--muted); cursor: pointer;
  transition: all .18s; background: var(--surface-2);
}
.drop:hover, .drop.over { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.drop svg { width: 34px; height: 34px; margin-bottom: 8px; }
.file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }

/* --------------------------------------------------------------- stüdyo */
.studio { display: grid; grid-template-columns: 286px minmax(0, 1fr) 540px; height: 100%; min-height: 0; }
.studio.panel-wide { grid-template-columns: 286px minmax(0, 1fr) 700px; }
.s-left { border-right: 1px solid var(--border); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; }
.s-left-h { padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
.s-left-h h4 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.checklist { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.ck { display: flex; gap: 9px; align-items: center; font-size: 14.5px; }
.ck .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 22px; }
.ck .ic svg { width: 14px; height: 14px; }
.ck.ok .ic { background: var(--green-soft); color: var(--green); }
.ck.miss .ic { background: var(--red-soft); color: var(--red); }
.ck.op .ic { background: var(--surface-3); color: var(--muted); }
.ck small { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pages { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.pg {
  display: grid; grid-template-columns: 66px 1fr; gap: 12px; padding: 10px; border-radius: 14px; cursor: pointer; border: 1.5px solid transparent;
  transition: background .18s, border-color .18s, transform .18s;
}
.pg:hover { background: var(--surface); transform: translateX(2px); }
.pg.active { background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.pg img { width: 66px; height: 86px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
.pg .t { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.pg .s { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-left-f { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.s-left-f .btn { flex: 1; }

.s-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--canvas); }
.vbar { height: 58px; flex: 0 0 58px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.vbar .spacer { flex: 1; }
.vbar .zoom { font-family: var(--mono); font-size: 13.5px; width: 54px; text-align: center; color: var(--text-2); }
.viewer { flex: 1; overflow: auto; position: relative; min-height: 0; }
.viewer.draw { cursor: crosshair; }
.viewer.pan { cursor: grab; }
.viewer.panning { cursor: grabbing; }
.stage { position: relative; margin: 26px auto; box-shadow: 0 10px 36px rgba(20,20,60,.22); background: #fff; transform-origin: top left; border-radius: 4px; }
.stage img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
:root[data-theme="dark"] .stage img.dim { filter: brightness(.92) contrast(1.02); }
.stage svg.ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ov rect { fill: transparent; vector-effect: non-scaling-stroke; stroke-width: 2; transition: stroke-width .12s; }
.ov rect.teacher { stroke: #4f6df0; stroke-dasharray: 5 3; }
.ov rect.expert { stroke: #e0459b; }
.ov rect.region { stroke: #13a38f; stroke-dasharray: 2 3; }
.ov rect.hl { stroke-width: 3.5; stroke-dasharray: none; filter: drop-shadow(0 0 5px rgba(79,109,240,.6)); }
.ov rect.drawing { stroke: #ff2d2d; stroke-dasharray: 4 3; }
.ov text { font-family: var(--font); font-size: 12px; font-weight: 700; paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 3px; }
.ov text.teacher { fill: #3150d8; } .ov text.expert { fill: #c22b80; } .ov text.region { fill: #0c7d6e; }
.legend { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; font-size: 13px; box-shadow: var(--shadow); backdrop-filter: blur(4px); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 0; border-top: 2px dashed; display: inline-block; }
.draw-hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: #1f2140; color: #fff; padding: 9px 14px; border-radius: 12px; font-size: 14px; box-shadow: var(--shadow-lg); z-index: 3; display: flex; gap: 9px; align-items: center; }
.draw-hint b { color: #ffc9e6; }

.s-right { border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tabs { display: flex; gap: 2px; padding: 10px 12px 0; border-bottom: 1px solid var(--border); flex: 0 0 auto; overflow-x: auto; }
.tab {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px 12px; border: none; background: none; cursor: pointer; color: var(--muted);
  font-weight: 650; font-size: 15px; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .15s;
}
.tab svg { width: 17px; height: 17px; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--primary-ink); border-bottom-color: var(--primary); }
.tab .badge { font-size: 12px; padding: 0 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.panel { flex: 1; overflow: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.panel-f { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 14px 18px; display: flex; gap: 9px; align-items: center; background: var(--surface-2); flex-wrap: wrap; }
.panel-f .spacer { flex: 1; }

.box { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); transition: box-shadow .2s; }
.box:hover { box-shadow: var(--shadow); }
.box-h { padding: 13px 16px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--border); }
.box-h > svg { color: var(--primary); width: 18px; height: 18px; }
.box-h h4 { margin: 0; font-size: 15px; font-weight: 700; }
.box-h .spacer { flex: 1; }
.box-b { padding: 14px 16px; }
.box.soft { background: var(--surface-2); }
.ozet { font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.cta {
  border: 1.5px dashed var(--border-2); border-radius: 20px; padding: 28px; text-align: center; background: var(--grad-soft);
}
.cta .ill { width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(98,92,238,.35); }
.cta .ill svg { width: 30px; height: 30px; }
.cta h3 { margin: 0 0 8px; font-size: 18px; }
.cta p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }

.fld { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.fld:last-child { border-bottom: none; }
.fld .nm { font-size: 14px; font-weight: 650; color: var(--text-2); line-height: 1.25; }
.fld .nm small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.fld .acts { display: flex; gap: 2px; align-items: center; }
.fld .was { grid-column: 2 / 4; font-size: 12.5px; color: var(--amber); margin-top: -3px; }
.conf { width: 32px; font-size: 12px; font-family: var(--mono); text-align: right; }
.icon-btn { width: 32px; height: 32px; border-radius: 9px; border: none; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--muted); transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--surface-3); color: var(--primary); }
.icon-btn.on { background: #fde6f2; color: #c22b80; }
:root[data-theme="dark"] .icon-btn.on { background: #3a1f30; color: #f08cc4; }
.icon-btn svg { width: 17px; height: 17px; }

.evidence { display: grid; grid-template-columns: 1fr repeat(3, 84px); gap: 0; font-size: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.evidence > div { padding: 9px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.evidence > div.h { background: var(--surface-2); font-weight: 700; font-size: 10.5px; word-break: break-word; hyphens: auto; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); justify-content: center; text-align: center; line-height: 1.2; }
.evidence > div.h.l { justify-content: flex-start; }
.evidence > div.c { justify-content: center; }
.evidence .yes { color: var(--green); } .evidence .no { color: var(--border-2); }
.evidence svg { width: 18px; height: 18px; }
.meter { display: flex; gap: 4px; }
.meter i { width: 24px; height: 7px; border-radius: 99px; background: var(--surface-3); }
.meter i.on { background: var(--green); }
.meter.warn i.on { background: var(--amber); }

.rowcard { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; position: relative; background: var(--surface); }
.rowcard + .rowcard { margin-top: 10px; }
.rowcard.eski { background: repeating-linear-gradient(-45deg, var(--surface), var(--surface) 8px, var(--surface-2) 8px, var(--surface-2) 16px); }
.rowcard .rh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rowcard .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rowcard .grid .w2 { grid-column: span 2; } .rowcard .grid .w4 { grid-column: span 4; }
.rowcard .grid label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: block; margin-bottom: 3px; }
.rowcard .strike { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }

.q { border: 1px solid color-mix(in srgb, var(--amber) 25%, var(--border)); border-radius: 14px; padding: 12px 14px; background: var(--amber-soft); }
:root[data-theme="dark"] .q { background: color-mix(in srgb, var(--amber-soft) 70%, var(--surface)); }
.q + .q { margin-top: 10px; }
.q .qt { font-size: 15px; font-weight: 600; display: flex; gap: 9px; }
.q .qt svg { width: 18px; height: 18px; color: var(--amber); flex: 0 0 18px; margin-top: 2px; }
.q .opts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.opt { height: 34px; padding: 0 13px; border-radius: 99px; border: 1.5px solid var(--border-2); background: var(--surface); cursor: pointer; font-size: 14px; transition: all .15s; }
.opt:hover { border-color: var(--primary); color: var(--primary-ink); }
.opt.on { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(98,92,238,.3); }
.notes li { font-size: 14.5px; color: var(--text-2); margin: 4px 0; }
.notes { margin: 0; padding-left: 20px; }

.tsel { display: flex; flex-wrap: wrap; gap: 7px; }
.tsel .opt { height: 32px; font-size: 13.5px; }

.md { font-size: 15px; line-height: 1.65; color: var(--text-2); }
.md h1 { font-size: 19px; margin: 0 0 10px; color: var(--text); }
.md h2 { font-size: 14px; margin: 16px 0 7px; color: var(--text); text-transform: uppercase; letter-spacing: .05em; }
.md h3 { font-size: 15px; margin: 12px 0 5px; color: var(--text); }
.md ul { padding-left: 20px; margin: 5px 0; }
.md li { margin: 3px 0; }
.md code { font-family: var(--mono); font-size: 13px; background: var(--code-bg); border: 1px solid var(--border); padding: 0 6px; border-radius: 6px; }
.md hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.md p { margin: 7px 0; }
pre.code {
  margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; background: var(--code-bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; overflow: auto; white-space: pre; color: var(--text-2); max-height: 600px;
}
pre.code .k { color: var(--primary-ink); } pre.code .s { color: var(--teal); } pre.code .n { color: var(--amber); } pre.code .b { color: var(--rose); }
textarea.code { font-family: var(--mono); font-size: 13px; line-height: 1.6; min-height: 420px; background: var(--code-bg); white-space: pre; }
.diff { font-family: var(--mono); font-size: 13px; line-height: 1.6; border: 1px solid var(--border); border-radius: 14px; overflow: auto; background: var(--code-bg); max-height: 540px; }
.diff div { padding: 0 14px; white-space: pre-wrap; word-break: break-word; }
.diff .add { background: var(--green-soft); color: var(--green); }
.diff .del { background: var(--red-soft); color: var(--red); }
.diff .hunk { color: var(--violet); background: var(--violet-soft); }
.region-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.region-card + .region-card { margin-top: 12px; }
.region-card .rh { display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.region-card img { display: block; width: 100%; max-height: 240px; object-fit: contain; background: #fff; border-bottom: 1px solid var(--border); }
.region-card .rb { padding: 10px 14px; font-size: 14px; }
.region-card .rb .mp { color: var(--text-2); margin-bottom: 7px; }

.gauge { display: flex; align-items: center; gap: 18px; }
.ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 92px;
  background: conic-gradient(var(--ring-c, var(--green)) calc(var(--p) * 1%), var(--surface-3) 0); transition: --p .6s; }
.ring > div { width: 72px; height: 72px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 750; font-size: 19px; }
.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 24px 1fr; gap: 11px; position: relative; padding-bottom: 14px; }
.tl:before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border); }
.tl:last-child:before { display: none; }
.tl .b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); z-index: 1; }
.tl .b svg { width: 14px; height: 14px; }
.tl.kart .b { background: var(--primary-soft); color: var(--primary); }
.tl.ok .b { background: var(--green-soft); color: var(--green); }
.tl.bad .b { background: var(--amber-soft); color: var(--amber); }
.tl .c { font-size: 14px; }
.tl .c b { font-size: 14.5px; }
.tl .c pre { margin: 4px 0 0; white-space: pre-wrap; font-family: var(--font); font-size: 13.5px; color: var(--muted); }
.rule { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.rule:last-child { border-bottom: none; }
.rule .ic svg { width: 19px; height: 19px; }
.rule.yesil .ic { color: var(--green); } .rule.kirmizi .ic { color: var(--red); } .rule.sari .ic { color: var(--amber); }
.rule .e { font-family: var(--mono); font-size: 12.5px; color: var(--muted); word-break: break-word; }
.rule .a { font-size: 14.5px; font-weight: 600; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; }
.cmp td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-word; }
.cmp tr.farkli td, .cmp tr.eksik td { background: color-mix(in srgb, var(--red-soft) 60%, transparent); }
.cmp tr.yakin td { background: color-mix(in srgb, var(--amber-soft) 60%, transparent); }
.table-wrap { border: 1px solid var(--border); border-radius: 14px; overflow: auto; max-height: 440px; }

.ekform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ekform .full { grid-column: 1 / 3; }
.ekf label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ekf .val { min-height: 50px; border: 1.5px solid var(--border-2); border-radius: 12px; padding: 11px 14px; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); }
.ekf .val.bos { color: var(--muted); font-style: italic; border-style: dashed; font-size: 14.5px; }
.ekf .val.celiski { border-color: var(--red); background: var(--red-soft); }
.ekf .src { font-size: 13px; color: var(--muted); margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ekf .src svg { width: 14px; height: 14px; }
.check-banner { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: 14px; font-size: 14.5px; border: 1px solid; }
.check-banner svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.check-banner b { display: block; font-size: 15px; margin-bottom: 2px; }
.check-banner.ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); }
.check-banner.bad { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.check-banner.info { background: var(--sky-soft); border-color: color-mix(in srgb, var(--sky) 30%, transparent); color: var(--sky); }
.check-banner span { color: var(--text-2); }

.cards-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 20px; align-items: start; }
.tree { padding: 10px; }
.tree .grp { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 7px; }
.titem { display: flex; gap: 11px; align-items: center; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.titem:hover { background: var(--surface-2); }
.titem.on { background: var(--primary-soft); }
.titem .lv { font-family: var(--mono); font-size: 12px; font-weight: 700; width: 30px; height: 25px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: 0 0 30px; }
.titem .nm { font-size: 15px; font-weight: 650; line-height: 1.25; }
.titem .sb { font-size: 13px; color: var(--muted); }
.lv.L0 { background: #4b5563; } .lv.L1 { background: var(--primary); } .lv.L2 { background: var(--violet); } .lv.L3 { background: var(--teal); }
.versions { display: flex; flex-direction: column; gap: 8px; }
.ver { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-size: 14px; align-items: start; transition: border-color .15s; }
.ver:hover { border-color: var(--border-2); }
.ver.on { border-color: var(--primary); background: var(--primary-soft); }
.ver .vn { font-family: var(--mono); font-weight: 700; }
.ver pre { margin: 3px 0 0; white-space: pre-wrap; font-family: var(--font); font-size: 13px; color: var(--muted); }
/* Belge kartları: ana model, arşiv seçimi, tüm belge türleri, yorumlar (yalnızca yönetici) */
.tree-sec { padding: 4px 8px 8px; }
.tree-sec .select, .tree-sec .input { width: 100%; }
.titem.yok .nm { color: var(--muted); font-weight: 550; }
.titem.yok .lv { opacity: .45; }
.lv.M { background: var(--rose); }
.lv.M svg { width: 15px; height: 15px; }
.yrm-rozet { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.yrm-rozet svg { width: 13px; height: 13px; }
.kart-yok { display: flex; gap: 12px; align-items: flex-start; }
.kart-yok > svg { width: 20px; height: 20px; color: var(--primary); flex: 0 0 20px; margin-top: 2px; }
.talimat-metin { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 13px; line-height: 1.6; background: var(--code-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 0; max-height: 620px; overflow: auto; }
.ornek-ust { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.ornek-adim { border: 1px solid var(--border); border-radius: 12px; margin: 8px 0; background: var(--surface); }
.ornek-adim > summary { cursor: pointer; padding: 11px 14px; display: flex; gap: 9px; align-items: center; list-style: none; }
.ornek-adim > summary::-webkit-details-marker { display: none; }
.ornek-adim > summary .no { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); font-size: 12.5px; font-weight: 700; flex: 0 0 24px; }
.ornek-adim[open] > summary { border-bottom: 1px solid var(--border); }
.ornek-adim .ic { padding: 12px 14px; min-width: 0; }
.ornek-adim .ic ul { margin: 0; padding-left: 20px; }
.ornek-adim.tam > summary svg { color: var(--muted); }
.ornek-kart + .ornek-kart { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.yorum-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.yorum-form .textarea { width: 100%; resize: vertical; min-height: 76px; }
.yorum-form-alt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.yorumlar { display: flex; flex-direction: column; gap: 10px; }
.yorum { border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 12px; padding: 11px 14px; background: var(--surface); }
.yorum.eklendi { border-left-color: var(--green); }
.yorum.eklenmedi { border-left-color: var(--border-2); opacity: .85; }
.yorum-ust { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.yorum-metin { white-space: pre-wrap; margin: 7px 0 9px; line-height: 1.55; }
.yorum-alt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* belge türü açılır seçici + sekme açıklama kutuları */
.ksec { max-width: none; width: 100%; flex: none; }
.ksec-btn { height: auto; min-height: 46px; padding: 8px 10px; }
.ksec-btn .bs-ad { white-space: normal; }
.ksec-btn .bs-ad b { display: block; font-size: 14.5px; line-height: 1.25; }
.ksec-btn > svg:first-child { transform: none; }
.ksec-btn .lv { font-family: var(--mono); font-size: 11.5px; font-weight: 700; width: 28px; height: 23px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: 0 0 28px; }
.lv.soluk { opacity: .45; }
.ksec-alt { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }
.ksec-pano { left: 0; right: auto; width: max(100%, min(460px, 92vw)); }
.ksec-o { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.ksec-o .ksec-ad { font-weight: 600; }
.ksec-o.yok .ksec-ad { color: var(--muted); font-weight: 500; }
.ksec-o.sec .ksec-ad { color: var(--accent); }
.sekme-aciklama { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 12px; padding: 11px 14px; margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.sekme-aciklama > svg { width: 17px; height: 17px; color: var(--primary); flex: 0 0 17px; margin-top: 2px; }
.sekme-aciklama b { color: var(--text); }
.sekme-aciklama .ornek { margin-top: 5px; font-style: italic; }
.sekme-aciklama .ornek span { font-style: normal; font-weight: 600; color: var(--text); }
.yorum-ipucu .sekme-aciklama { margin: 0; background: var(--surface-2); border-color: var(--border); }
.yorum-ipucu .sekme-aciklama > svg { color: var(--muted); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kv > div { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow); }
.kv .k { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); }
.kv .v { font-size: 22px; font-weight: 750; margin-top: 3px; }

.dtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.dtable th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.dtable td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dtable tr { transition: background .15s; }
.dtable tbody tr:hover td { background: var(--surface-2); }
.dtable tr:last-child td { border-bottom: none; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.tier { padding: 18px 20px; border-top: 4px solid; }
.tier.s { border-top-color: var(--slate); } .tier.g { border-top-color: var(--amber); } .tier.t { border-top-color: var(--green); }

.settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.stabs { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.stab { display: flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 650; font-size: 15px; color: var(--text-2); transition: all .18s; }
.stab svg { width: 18px; height: 18px; }
.stab:hover { border-color: var(--border-2); color: var(--text); transform: translateY(-1px); }
.stab.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(98,92,238,.3); }
.check-res { margin-top: 10px; font-size: 14px; padding: 11px 13px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.range { width: 100%; accent-color: var(--primary); }
.role-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; font-size: 13px; font-weight: 650; }
.role-badge.admin { background: var(--grad); color: #fff; }
.role-badge.memur { background: var(--sky-soft); color: var(--sky); }
.urow-name { display: flex; align-items: center; gap: 12px; }
.urow-name .avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: 14px; border-radius: 11px; }
.pill-off { opacity: .55; }

@media (max-width: 1500px) {
  .doc-art { display: none; }
  .studio { grid-template-columns: 240px minmax(0, 1fr) 470px; }
  .studio.panel-wide { grid-template-columns: 240px minmax(0, 1fr) 600px; }
  .pg { grid-template-columns: 56px 1fr; }
  .pg img { width: 56px; height: 74px; }
}
@media (max-width: 1100px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .settings, .cards-layout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- puan tablosu */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; margin: 6px 0 26px; max-width: 980px; margin-left: auto; margin-right: auto; }
.pod { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 26px 18px 0; text-align: center; box-shadow: var(--shadow); cursor: default; transition: transform .2s var(--ease), box-shadow .2s; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pod:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pod .avatar.lg { width: 70px; height: 70px; border-radius: 22px; font-size: 24px; box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--medal); }
.pod.gold { --medal: #f2b33d; padding-top: 34px; }
.pod.silver { --medal: #a9b6cf; }
.pod.bronze { --medal: #d38d5b; }
.pod.me { border-color: var(--primary); }
.pod .crown { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); color: #f2b33d; }
.pod .crown svg { width: 26px; height: 26px; fill: #f7c95e; }
.pod-name { font-weight: 700; font-size: 17px; margin-top: 8px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pod-pts { font-size: 34px; font-weight: 800; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pod-pts small { font-size: 14px; color: var(--muted); -webkit-text-fill-color: var(--muted); font-weight: 600; }
.pod-meta { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.pod-base { width: calc(100% + 36px); margin-top: auto; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 24px; background: linear-gradient(180deg, var(--medal), color-mix(in srgb, var(--medal) 70%, #000)); }
.pod.gold .pod-base { height: 74px; } .pod.silver .pod-base { height: 52px; } .pod.bronze .pod-base { height: 38px; }
.lb-list { overflow: hidden; }
.lb-row { display: grid; grid-template-columns: 64px minmax(220px, 2.4fr) 90px 80px 80px 90px 80px 130px; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--border); transition: background .15s; font-size: 15px; }
.lb-row:last-child { border-bottom: none; }
.lb-row:not(.lb-head):hover { background: var(--surface-2); }
.lb-row.me { background: color-mix(in srgb, var(--primary-soft) 60%, transparent); }
.lb-head { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); padding-top: 13px; padding-bottom: 13px; }
.rank { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; background: var(--surface-3); color: var(--text-2); }
.rank.gold { background: linear-gradient(135deg, #f7c95e, #e29d26); color: #fff; }
.rank.silver { background: linear-gradient(135deg, #cbd3e3, #9aa7c1); color: #fff; }
.rank.bronze { background: linear-gradient(135deg, #e6a97e, #c1773f); color: #fff; }
.lb-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-name { font-weight: 650; display: flex; gap: 7px; align-items: center; white-space: nowrap; overflow: hidden; }
.lb-bar { height: 7px; border-radius: 99px; background: var(--surface-3); margin-top: 7px; overflow: hidden; max-width: 320px; }
.lb-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); animation: grow .8s var(--ease); }
@keyframes grow { from { width: 0 !important; } }
.lb-pts { font-weight: 800; font-size: 18px; color: var(--primary-ink); }
.today { display: inline-flex; align-items: center; gap: 4px; color: var(--rose); font-weight: 700; }
.today svg { width: 16px; height: 16px; }
.lb-rules { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; color: var(--muted); font-size: 14px; }
.lb-rules > svg { width: 18px; height: 18px; color: var(--primary); }
.lb-tip { position: fixed; z-index: 95; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 14px 16px; pointer-events: none; animation: tin .18s var(--ease); min-width: 260px; }
.lb-tip-h { display: flex; gap: 11px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.lb-tip-h b { font-size: 15.5px; }
.lb-tip-b { display: flex; gap: 16px; align-items: center; }
.lb-legend { display: flex; flex-direction: column; gap: 7px; min-width: 170px; }
.lb-legend .lg { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; font-size: 14px; }
.lb-legend .lg i { width: 12px; height: 12px; border-radius: 4px; }
.dn-v { font: 800 22px var(--font); fill: var(--text); }
.dn-l { font: 600 11px var(--font); fill: var(--muted); }
@keyframes donut { from { stroke-dasharray: 0 400; } }
@media (max-width: 1250px) { .lb-row { grid-template-columns: 54px minmax(180px, 2fr) 80px 70px 70px 80px 70px; } .lb-row > :last-child { display: none; } }

/* --------------------------------------------------------------- kullanım kılavuzu */
.g-hero { margin-bottom: 18px; }
.g-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.g-q { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 15px; }
.g-qi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); color: #fff; }
.g-qi svg { width: 18px; height: 18px; }
.g-arrow { color: var(--border-2); display: flex; } .g-arrow svg { width: 20px; height: 20px; }
.g-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 26px; align-items: start; }
.g-toc { position: sticky; top: 16px; padding: 16px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 120px); overflow: auto; }
.g-toc a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text-2); font-size: 14.5px; font-weight: 550; transition: background .15s; }
.g-toc a:hover { background: var(--primary-soft); color: var(--primary-ink); }
.g-toc .n { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px; display: grid; place-items: center; font-size: 13px; font-weight: 750; background: var(--surface-3); color: var(--primary-ink); }
.g-toc .n svg { width: 15px; height: 15px; }
.g-steps { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.g-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; scroll-margin-top: 16px; }
.g-num { display: flex; flex-direction: column; align-items: center; }
.g-num span { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 19px; font-weight: 800; color: #fff; background: var(--grad); box-shadow: 0 6px 16px rgba(98,92,238,.35); flex: 0 0 46px; }
.g-num i { flex: 1; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--primary-soft), transparent); margin: 6px 0; min-height: 20px; }
.g-step:last-of-type .g-num i { display: none; }
.g-card { padding: 20px 22px; margin-bottom: 20px; transition: transform .2s var(--ease), box-shadow .2s; }
.g-card:hover { transform: translateX(3px); box-shadow: var(--shadow-lg); }
.g-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.g-head h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.g-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: 0 0 38px; }
.g-ic svg { width: 20px; height: 20px; }
.g-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.g-list li { font-size: 15.5px; line-height: 1.75; color: var(--text-2); padding-left: 4px; }
.g-list li::marker { color: var(--primary); font-weight: 700; }
.g-btn { pointer-events: none; vertical-align: middle; margin: 0 2px; transform: none !important; }
.g-ico { display: inline-grid; vertical-align: middle; background: var(--surface-3); color: var(--primary); pointer-events: none; margin: 0 2px; }
.g-box { display: inline-block; padding: 0 8px; border-radius: 5px; font-weight: 600; }
.g-box.blue { border: 2px dashed #4f6df0; color: #3f5bd8; }
.g-box.pink { border: 2px solid #e0459b; color: #c22b80; }
.g-tip { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: var(--grad-soft); color: var(--text-2); font-size: 14.5px; flex-wrap: wrap; }
.g-tip > svg { width: 18px; height: 18px; color: var(--primary); flex: 0 0 18px; }
.g-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.g-layout > div { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.5; }
.g-layout b { color: var(--primary-ink); }
.g-sec { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 18px 0 16px 70px; }
.g-sec svg { width: 22px; height: 22px; color: var(--violet); }
.g-faq { padding: 20px 22px; margin-left: 70px; scroll-margin-top: 16px; }
.g-faq details { border-top: 1px solid var(--border); padding: 12px 2px; }
.g-faq summary { cursor: pointer; font-weight: 650; font-size: 15.5px; list-style: none; display: flex; align-items: center; gap: 8px; }
.g-faq summary::before { content: "+"; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; }
.g-faq details[open] summary::before { content: "–"; }
.g-faq p { margin: 8px 0 0 32px; color: var(--text-2); line-height: 1.7; }
@media (max-width: 1250px) { .g-wrap { grid-template-columns: 1fr; } .g-toc { display: none; } }

.card-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1500px) { .card-detail-grid { grid-template-columns: minmax(0, 1fr); } }
.btn-group { flex-wrap: wrap; }

/* ---- İşlem dosyaları: binlerce dosya için sayfalı liste ---- */
.list-bar { position: sticky; top: 0; z-index: 5; background: var(--bg); margin: 0 -6px 14px; padding: 12px 6px 4px; }
.list-bar .toolbar { margin-bottom: 10px; }
.list-bar .toolbar.sub { gap: 10px; }
.list-bar .toolbar .select { width: auto; min-width: 180px; flex: none; }
.list-bar .search { max-width: none; min-width: 280px; }
.list-info { font-size: 14px; white-space: nowrap; }
.btn-group.seg .btn .cnt { margin-left: 7px; font-size: 12px; font-weight: 700; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-variant-numeric: tabular-nums; }
.btn-group.seg .btn.on .cnt { background: var(--primary); color: #fff; }
.btn.icon-only { width: 36px; padding: 0; justify-content: center; }
.results { transition: opacity .15s; }
.results.loading { opacity: .45; pointer-events: none; }
.dcard { color: inherit; text-decoration: none; }
.dcard h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(17px * 1.35 * 2); }
.warn-line.ghost { visibility: hidden; }
.dlist { padding: 4px 0; overflow: hidden; }
.dl-row { display: grid; grid-template-columns: 52px minmax(0, 3fr) minmax(140px, 1fr) 56px minmax(120px, .8fr) 165px 110px; gap: 14px; align-items: center; padding: 10px 18px; color: inherit; text-decoration: none; border-top: 1px solid var(--border); transition: background .15s; }
.dl-row:first-child { border-top: none; }
a.dl-row:hover { background: var(--surface-2); }
.dl-head { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 12px; padding-bottom: 12px; }
.dl-thumb { width: 44px; height: 54px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.dl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dl-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-name b { font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.dl-row .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.dl-prog { display: flex; align-items: center; gap: 10px; }
.dl-prog .progress { flex: 1; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 22px 0 8px; min-height: 42px; }
.pg-nums { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pgb { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s; }
.pgb:hover:not(:disabled) { border-color: var(--primary); }
.pgb.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--shadow); }
.pgb:disabled { opacity: .4; cursor: default; }
.pgb svg { width: 17px; height: 17px; }
.pg-gap { color: var(--muted); padding: 0 4px; }
.pg-size { display: flex; align-items: center; gap: 9px; }
.pg-size .select { width: auto; }
.pg-jump { width: 86px; height: 38px; }
.empty.sm { padding: 36px 20px; }
@media (max-width: 1250px) {
  .dl-row { grid-template-columns: 52px minmax(0, 2fr) minmax(130px, 1fr) 60px minmax(110px, .8fr) 150px; }
  .dl-row > :nth-child(7) { display: none; }
}

/* ---- Açıklama ipuçları (kavramlar) ---- */
.info-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; color: var(--muted); cursor: help; vertical-align: middle; flex: none; }
.info-dot svg { width: 15px; height: 15px; }
.info-dot:hover, .info-dot:focus { color: var(--primary); outline: none; }
.chip.has-tip { cursor: help; }
.tipbox { position: fixed; z-index: 9999; max-width: 320px; padding: 10px 13px; border-radius: 11px; background: #1d2040; color: #eef0ff; font-size: 13.5px; line-height: 1.5; font-weight: 450; box-shadow: 0 12px 32px rgba(10, 12, 40, .35); pointer-events: none; animation: tipIn .12s ease-out; }
:root[data-theme="dark"] .tipbox { background: #2b2f5c; border: 1px solid rgba(255,255,255,.08); }
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.stat .k { align-items: center; }
.mode-pill { align-items: flex-start; }
.mode-pill .dot { margin-top: 5px; flex: none; }
.mode-pill .lbl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mode-pill .lbl b { font-weight: 650; }
.mode-pill .lbl small { font-size: 11.5px; line-height: 1.4; opacity: .72; }
.shell.collapsed .mode-pill .dot { margin-top: 0; }
.g-dict { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 0; margin: 0; }
.g-dict dt, .g-dict dd { padding: 11px 0; border-top: 1px solid var(--border); margin: 0; }
.g-dict dt { font-weight: 650; padding-right: 16px; }
.g-dict dd { color: var(--text-2, var(--muted)); line-height: 1.55; }
.g-dict dt:first-of-type, .g-dict dt:first-of-type + dd { border-top: none; }
.stat .k .info-dot svg { width: 15px; height: 15px; }
.stat .k .info-dot { margin-left: -3px; }
.dl-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.dl-who span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }

/* =========================================================================
   EKAD Document Studio arayüzü
   Sakin, açık zemin · ince ikon menüsü · turuncu vurgu · Inter. Bileşenler aynı
   değişken adlarını kullandığı için tüm ekranlar bu tokenlarla yeniden boyanır.
   ========================================================================= */
:root {
  --sidebar: 64px; --sidebar-mini: 64px;
  --r-sm: 7px; --r: 10px; --r-lg: 12px;
  --accent: #fa520f; --accent-2: #e04608;
  --viewer: #2b2b2b; --viewer-bar: #333333;
}
:root[data-theme="light"] {
  --bg: #fafaf8; --bg-2: #f5f4f1;
  --surface: #ffffff; --surface-2: #f2f1ed; --surface-3: #ebe9e4;
  --border: #e7e5e0; --border-2: #d6d3cc;
  --text: #1c1b19; --text-2: #3f3d39; --muted: #6f6d68;
  --primary: #fa520f; --primary-2: #e04608; --primary-soft: #fff1ea; --primary-ink: #c2410c;
  --sky: #2c5fd6; --sky-soft: #e8effc;
  --green: #2fae6b; --green-soft: #e7f6ee;
  --amber: #c98a04; --amber-soft: #fdf5e1;
  --red: #d93d3d; --red-soft: #fdecec;
  --grad: linear-gradient(135deg, #fa520f, #fa520f);
  --grad-soft: linear-gradient(135deg, #fff1ea, #fff6f1);
  --side-bg: #fafaf8; --side-text: #1c1b19; --side-muted: #a3a19b;
  --shadow: 0 1px 2px rgba(28,27,25,.05); --shadow-lg: 0 18px 50px rgba(28,27,25,.16);
  --canvas: #f2f1ed; --code-bg: #f6f5f2; --scroll: #d6d3cc;
}
:root[data-theme="dark"] {
  --bg: #161615; --bg-2: #1a1a19;
  --surface: #1e1e1c; --surface-2: #262624; --surface-3: #2f2f2c;
  --border: #33322f; --border-2: #45443f;
  --text: #ecebe7; --text-2: #cfcdc7; --muted: #a3a19b;
  --primary: #ff7a3d; --primary-2: #ff925f; --primary-soft: #3a2216; --primary-ink: #ffb08a;
  --sky: #7da2f0; --sky-soft: #1d2a45;
  --grad: linear-gradient(135deg, #f0601e, #f0601e);
  --grad-soft: linear-gradient(135deg, #2b1d15, #2b1d15);
  --side-bg: #161615; --side-text: #ecebe7; --side-muted: #85837d;
  --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
  --canvas: #121211; --code-bg: #1a1a18; --scroll: #45443f;
}
body { font-size: 14.5px; }
.btn { border-radius: 8px; box-shadow: none !important; transform: none !important; height: 38px; font-weight: 550; }
.btn:hover { background: var(--surface-2); }
.btn.primary, .btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover, .btn.accent:hover { background: var(--accent-2); border-color: var(--accent-2); filter: none; }
.btn.success { background: var(--green); border-color: var(--green); color: #fff; }
.btn.success:hover { filter: brightness(.95); }
.btn.light { background: #fff; color: var(--text); }
.btn.sm { height: 32px; border-radius: 7px; }
.btn.xs { height: 28px; border-radius: 6px; }
.btn.xs.on { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary-soft); }
.btn-group { border-radius: 9px; background: var(--surface-2); border-color: transparent; }
.btn-group .btn { height: 30px; border-radius: 7px; }
.btn-group .btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; }
.card { border-radius: 12px; box-shadow: none; }
.input, .select, .textarea { border-radius: 8px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-soft); }
.avatar { background: var(--accent); border-radius: 10px; }

/* ---- ince ikon menüsü (EKAD Document Studio gibi) ---- */
.shell, .shell.collapsed { grid-template-columns: 64px 1fr; }
.sidebar { background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--border); padding: 12px 0; gap: 6px; align-items: center; }
.sidebar:before, .sidebar:after { display: none; }
.brand { padding: 0; margin-bottom: 10px; }
.brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 10px; background: var(--accent); box-shadow: none; }
.brand-mark svg { width: 22px; height: 22px; }
.brand-text, .nav-label { display: none; }
.nav { align-items: center; gap: 4px; }
.nav a { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 10px; color: var(--side-muted); font-size: 0; gap: 0; transform: none !important; }
.nav a > span { display: none; }
.nav a svg { width: 19px; height: 19px; flex-basis: 19px; opacity: 1; }
.nav a:hover { background: var(--surface-2); color: var(--side-text); }
.nav a.active { background: var(--surface-2); color: var(--side-text); box-shadow: none; }
.nav a.active:before { display: none; }
.nav-label + a { margin-top: 0; }
.nav a:nth-of-type(1) { margin-top: 0; }
.sidebar-foot { align-items: center; gap: 8px; width: 100%; }
.mode-pill { width: 40px; height: 28px; padding: 0; justify-content: center; background: var(--surface-2); border-radius: 8px; }
.mode-pill .lbl { display: none; }
.mode-pill .dot { margin: 0; }
.user-card { padding: 0; background: none; box-shadow: none; justify-content: center; }
.user-card .who { display: none; }
.user-card .avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: 13px; border-radius: 50%; }
.side-row { flex-direction: column; gap: 4px; }
.side-btn, .side-row .side-btn.wide { width: 40px; height: 36px; flex: 0 0 36px; background: transparent; color: var(--side-muted); border-radius: 9px; }
.side-btn:hover { background: var(--surface-2); color: var(--side-text); }
.side-row .side-btn.wide .lbl { display: none; }
.topbar { height: 52px; min-height: 52px; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 20px; box-shadow: none; backdrop-filter: none; }
.crumbs { font-size: 14px; }
.crumbs a { color: var(--side-muted); }
.crumbs b { font-weight: 550; }

/* ---- sayfa başlığı (karşılama bandı yerine sade başlık) ---- */
.pagehead { margin: 4px 0 22px; }
.pagehead h1 { font-size: 24px; letter-spacing: -.01em; margin: 0 0 6px; font-weight: 650; }
.pagehead p { margin: 0; color: var(--muted); }
.hero h1 { font-size: 24px; font-weight: 650; }
.page-pad { padding: 28px 36px 48px; }
.list-bar { background: var(--bg); }

/* ---- çalışma alanı ---- */
.view.ws-host { overflow: hidden; }
.ws { display: grid; grid-template-columns: 236px minmax(0, 1fr) minmax(400px, 34%); height: 100%; min-height: 0; position: relative; }
.ws.drop:after { content: "Dosyaları bırakın"; position: absolute; inset: 10px; border: 2px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--primary-soft) 80%, transparent); display: grid; place-items: center; font-size: 20px; font-weight: 650; color: var(--primary-ink); z-index: 20; }
.ws-rail { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.ws-rail-h { display: flex; justify-content: space-between; padding: 14px 14px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.ws-rail-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.ws-doc { display: flex; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: none; background: transparent; border-radius: 9px; cursor: pointer; text-align: left; }
.ws-doc:hover { background: var(--surface-2); }
.ws-doc.on { background: var(--surface-3); }
.ws-doc img { width: 34px; height: 44px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--border); background: #fff; flex: none; }
.ws-doc-t { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ws-doc-t b { font-size: 13.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-doc-t span { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
i.st { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--slate); flex: none; }
i.st.green { background: var(--green); } i.st.amber { background: var(--amber); } i.st.slate { background: var(--border-2); }
.ws-rail-f { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ws-prog { height: 5px; border-radius: 9px; background: var(--surface-3); overflow: hidden; }
.ws-prog i { display: block; height: 100%; background: var(--green); border-radius: 9px; transition: width .3s; }
.ws-warn { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--red); line-height: 1.35; }
.ws-warn svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

.ws-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--viewer); }
.ws-vbar { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px; background: var(--viewer-bar); color: #e9e8e4; border-bottom: 1px solid #222; flex: none; }
.ws-file { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; color: #cfcdc7; }
.ws-file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-file svg { width: 15px; height: 15px; color: #ff7a3d; flex: none; }
.ws-ib { height: 30px; min-width: 30px; border: none; border-radius: 7px; background: transparent; color: #e9e8e4; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 0 6px; font-size: 13px; font-weight: 550; }
.ws-ib:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.ws-ib:disabled { opacity: .35; cursor: default; }
.ws-ib svg { width: 16px; height: 16px; }
.ws-ib.txt { padding: 0 10px; background: rgba(255,255,255,.06); }
.ws-ib.on { background: rgba(255,255,255,.18); }
.ws-ib.sm { height: 26px; min-width: 26px; color: var(--muted); }
.ws-ib.sm:hover { background: var(--surface-3); color: var(--red); }
.ws-pg { font-size: 13px; color: #b8b6b0; padding: 0 4px; font-variant-numeric: tabular-nums; }
.ws-pg b { color: #fff; background: #fff1; padding: 2px 8px; border-radius: 6px; }
.ws-zoom-l { font-size: 12.5px; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; background: #fff; color: #1c1b19; border-radius: 6px; padding: 3px 0; font-weight: 600; }
.ws-sep { width: 1px; height: 20px; background: #4a4a4a; margin: 0 4px; }
.ws-scroll { flex: 1; overflow: auto; padding: 24px; min-height: 0; }
.ws-stage { position: relative; margin: 0 auto; box-shadow: 0 6px 30px rgba(0,0,0,.45); background: #fff; }
.ws-stage img { display: block; width: 100%; user-select: none; }
.ws-box { position: absolute; border: 1.5px solid rgba(44,95,214,.85); background: rgba(44,95,214,.06); border-radius: 2px; cursor: pointer; transition: background .12s; }
.ws-box span { position: absolute; left: -1.5px; top: -18px; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 3px 3px 3px 0; background: rgba(44,95,214,.92); color: #fff; white-space: nowrap; font-weight: 600; opacity: 0; transition: opacity .12s; pointer-events: none; }
.ws-box:hover span, .ws-box.hl span { opacity: 1; }
.ws-box.row { border-color: rgba(47,174,107,.9); background: rgba(47,174,107,.07); }
.ws-box.row span { background: #2fae6b; }
.ws-box.struck { border-color: rgba(217,61,61,.9); background: rgba(217,61,61,.07); }
.ws-box.struck span { background: #d93d3d; }
.ws-box.op { border-color: rgba(250,82,15,.95); background: rgba(250,82,15,.08); }
.ws-box.op span { background: #fa520f; }
.ws-box.low { border-color: rgba(201,138,4,.95); border-style: dashed; background: rgba(201,138,4,.08); }
.ws-box.low span { background: #c98a04; }
.ws-box.hl { background: rgba(250,82,15,.18); border-color: #fa520f; border-width: 2px; z-index: 2; }

.ws-upload { margin: auto; text-align: center; color: #e9e8e4; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px; }
.ws-up-art { position: relative; width: 110px; height: 76px; margin-bottom: 14px; }
.ws-up-art span { position: absolute; width: 44px; height: 56px; border-radius: 7px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.ws-up-art span svg { width: 22px; height: 22px; }
.ws-up-art .f1 { left: 4px; top: 16px; background: #2c5fd6; transform: rotate(-10deg); }
.ws-up-art .f2 { left: 33px; top: 0; background: #e5383b; z-index: 1; }
.ws-up-art .f3 { left: 62px; top: 16px; background: #19b4d0; transform: rotate(10deg); }
.ws-upload h2 { margin: 0; font-size: 22px; font-weight: 650; color: #fff; }
.ws-upload .muted { color: #a3a19b; }
.ws-up-btns { margin: 12px 0 2px; }

.ws-panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--bg); }
.ws-ph { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ws-ph-t { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 150px; }
.ws-ph .select { width: auto; max-width: 260px; }
.ws-pbody { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ws-done { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 16px 0; padding: 9px 12px; border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: 13.5px; }
.ws-done svg { width: 16px; height: 16px; }
.ws-done .muted { color: var(--muted); width: 100%; padding-left: 24px; margin-top: -4px; }
.ws-seg { display: inline-flex; margin: 12px 16px 0; background: var(--surface-2); padding: 3px; border-radius: 9px; align-self: flex-start; }
.ws-seg button { border: none; background: transparent; padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--muted); cursor: pointer; }
.ws-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ws-tabs { display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ws-tabs button { border: none; background: transparent; padding: 8px 10px 9px; font-size: 13.5px; font-weight: 550; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ws-tabs button:hover { color: var(--text); }
.ws-tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.ws-pscroll { flex: 1; overflow-y: auto; min-height: 0; }
.ws-tab-b { padding: 16px; }
.ws-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.ws-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
.ws-f { padding: 8px 10px 10px; border-radius: 10px; border: 1px solid transparent; transition: background .12s, border-color .12s; min-width: 0; }
.ws-f:hover, .ws-f.hl { background: var(--surface-2); border-color: var(--border); }
.ws-f .input { height: 36px; width: 100%; }
.ws-f textarea.input { height: auto; min-height: 60px; padding-top: 7px; resize: vertical; }
.ws-f.edited .input { border-color: var(--sky); background: var(--sky-soft); }
.ws-f.low .input { border-color: var(--amber); }
.ws-low { font-size: 11px; font-weight: 650; color: var(--amber); background: var(--amber-soft); padding: 1px 6px; border-radius: 5px; }
.ws-note { display: flex; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.ws-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ws-ops { margin-bottom: 16px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.ws-ops.hl { border-color: var(--accent); }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: 4px 11px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); }
.ws-chip:hover { border-color: var(--border-2); }
.ws-chip.on { background: var(--primary-soft); border-color: var(--accent); color: var(--primary-ink); font-weight: 600; }
.ws-chip svg { width: 13px; height: 13px; }
.ws-qs { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.ws-q { border: 1px solid var(--sky-soft); background: var(--sky-soft); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.ws-q > div:first-child { display: flex; gap: 7px; align-items: flex-start; }
.ws-q svg { width: 15px; height: 15px; color: var(--sky); flex: none; margin-top: 2px; }
.ws-q b { font-weight: 550; }
.ws-q-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-left: 22px; }
.ws-table { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ws-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ws-table th { text-align: left; font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 7px 8px; white-space: nowrap; font-size: 12px; }
.ws-table td { border-top: 1px solid var(--border); padding: 3px 4px; vertical-align: middle; }
.ws-table td.n { padding: 0 8px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-table td.c { text-align: center; }
.ws-table tr.hl td { background: var(--primary-soft); }
.ws-table tr.struck input.cell { text-decoration: line-through; text-decoration-color: rgba(217,61,61,.6); }
.ws-table input.cell { width: 100%; min-width: 74px; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 5px 6px; font: inherit; }
.ws-table input.cell:hover { border-color: var(--border); }
.ws-table input.cell:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.ws-tag { margin-left: 6px; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
.ws-tag.old { background: var(--red-soft); color: var(--red); }
.ws-tag.new { background: var(--green-soft); color: var(--green); }
.ws-sum { font-size: 14.5px; line-height: 1.6; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.ws-ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.ws-pre { font-family: var(--mono); font-size: 12px; background: var(--code-bg); padding: 12px; border-radius: 8px; overflow: auto; margin: 0; }
.ws-empty-p { margin: auto; padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ws-empty-p > svg { width: 30px; height: 30px; color: var(--accent); }
.ws-empty-p h3 { margin: 4px 0 0; font-size: 17px; }
.ws-empty-p p { margin: 0 0 8px; max-width: 320px; }
.ws-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg); }
.ws-foot .spacer { flex: 1; }
.ws-dirty { display: flex; align-items: center; gap: 6px; }
@media (max-width: 1250px) {
  .ws { grid-template-columns: 190px minmax(0, 1fr) 380px; }
  .ws-fields { grid-template-columns: 1fr; }
}

/* ---- model testi ---- */
.mt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mt-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.mt-card.best { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.mt-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mt-big { font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mt-big.ok { color: var(--green); } .mt-big.bad { color: var(--amber); }
.mt-bar { position: relative; height: 8px; border-radius: 9px; background: var(--surface-3); }
.mt-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; background: var(--accent); }
.mt-bar b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 2px; }
.mt-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.mt-stats b { color: var(--text); }
.mt-types { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.mt-types div { display: flex; justify-content: space-between; }
.mt-rec { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin-top: 14px; }
.mt-rec svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.mt-cell { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 650; font-variant-numeric: tabular-nums; font-size: 13px; cursor: help; }
.mt-cell.ok { background: var(--green-soft); color: var(--green); }
.mt-cell.bad { background: var(--amber-soft); color: var(--amber); }
.tipbox { white-space: pre-line; }
.sw-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.sw-row input { margin-top: 4px; accent-color: var(--accent); }
.ws-ops-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ws-vbar > * { flex-shrink: 0; }
.ws-vbar .ws-file { flex-shrink: 1; min-width: 60px; }
.ws-pg { white-space: nowrap; }
.ws.bare { grid-template-columns: 1fr; }
.ws.bare .ws-rail, .ws.bare .ws-panel { display: none; }
.ws.bare .ws-center { background: var(--bg); }
.ws.bare .ws-upload, .ws.bare .ws-upload h2 { color: var(--text); }
.ws.bare .ws-upload .muted { color: var(--muted); }
.stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---- çalışma alanı: açılıp kapanan sayfa listesi ve daha büyük yazılar ---- */
body { font-size: 15.5px; }
.ws { grid-template-columns: 264px minmax(0, 1fr) minmax(440px, 36%); }
.ws.rail-kapali { grid-template-columns: 56px minmax(0, 1fr) minmax(440px, 36%); }
.ws-rail-h { align-items: center; font-size: 12.5px; padding: 12px 10px 8px 16px; }
.ws-rail-tog { width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.ws-rail-tog:hover { background: var(--surface-2); color: var(--text); }
.ws-rail-tog svg { width: 18px; height: 18px; }
.ws.rail-kapali .ws-rail { align-items: center; padding-top: 10px; gap: 8px; }
.ws-rail-mini { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; }
.ws-mini { width: 38px; height: 38px; border: 1px solid var(--border); background: var(--surface); border-radius: 9px; cursor: pointer; font-weight: 650; font-size: 14px; position: relative; color: var(--text-2); }
.ws-mini.on { border-color: var(--accent); color: var(--primary-ink); background: var(--primary-soft); }
.ws-mini i.st { position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; }
.ws-mini-f { font-size: 12px; color: var(--muted); padding: 10px 0; font-variant-numeric: tabular-nums; }
.ws-doc { padding: 8px 9px; }
.ws-doc img { width: 40px; height: 52px; }
.ws-doc-t b { font-size: 15px; }
.ws-doc-t span { font-size: 13px; }
.ws-ph-t b { font-size: 16.5px; }
.ws-tabs button { font-size: 15px; padding: 9px 12px 10px; }
.ws-l { font-size: 14px; }
.ws-f .input { height: 42px; font-size: 16px; }
.ws-f textarea.input { font-size: 15.5px; }
.ws-note, .ws-done { font-size: 14px; }
.ws-chip { font-size: 14.5px; padding: 5px 13px; }
.ws-q { font-size: 15px; }
.ws-table table { font-size: 14.5px; }
.ws-table th { font-size: 13px; }
.ws-sum, .ws-ul { font-size: 15.5px; }
.ws-file { font-size: 14px; }
.ws-ib { font-size: 14px; }
.ws-foot .btn.success { height: 44px; padding: 0 22px; font-size: 16px; }
.ws-seg button { font-size: 14px; }
.crumbs { font-size: 15px; }
/* giriş ekranı sol paneli: açık temada da koyu zemin (EKAD Document Studio tonları) */
.auth-hero { background: linear-gradient(160deg, #1c1b19 0%, #2a2623 55%, #3a2a20 100%); }
.auth-hero .b1 { background: radial-gradient(circle, rgba(250,82,15,.55), transparent 65%); }
.auth-hero .b2 { background: radial-gradient(circle, rgba(250,140,60,.35), transparent 65%); }
.auth-hero .b3 { background: radial-gradient(circle, rgba(255,190,120,.25), transparent 65%); }
.auth-hero h1 span { background: linear-gradient(90deg, #ff8a4c, #ffc59e); -webkit-background-clip: text; background-clip: text; }
.auth-hero p.lead { color: #d8d4cd; }
.auth-hero .foot { color: #a39d94; }

/* ---- sol ana menü: daha büyük simgeler ---- */
.shell, .shell.collapsed { grid-template-columns: 76px 1fr; }
.brand-mark { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
.brand-mark svg { width: 25px; height: 25px; }
.nav { gap: 6px; }
.nav a { width: 50px; height: 50px; border-radius: 12px; }
.nav a svg { width: 25px; height: 25px; flex-basis: 25px; }
.side-btn, .side-row .side-btn.wide { width: 48px; height: 44px; flex: 0 0 44px; border-radius: 11px; }
.side-btn svg { width: 23px; height: 23px; }
.user-card .avatar { width: 42px; height: 42px; flex-basis: 42px; font-size: 15px; }
.mode-pill { width: 48px; height: 32px; }

/* ---- sol ana menü: daralt / genişlet ---- */
.menu-tog { width: 48px; height: 38px; border: none; background: transparent; color: var(--side-muted); border-radius: 9px;
  cursor: pointer; display: grid; place-items: center; margin: -4px 0 6px; flex: 0 0 auto; }
.menu-tog:hover { background: var(--surface-2); color: var(--side-text); }
.menu-tog svg { width: 22px; height: 22px; }
.shell.menu-acik, .shell.menu-acik.collapsed { grid-template-columns: 250px 1fr; }
.shell.menu-acik .sidebar { align-items: stretch; padding: 12px 12px; }
.shell.menu-acik .brand { display: flex; align-items: center; gap: 10px; padding: 0 4px; margin-bottom: 4px; }
.shell.menu-acik .brand-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.shell.menu-acik .brand-text b { color: var(--side-text); font-size: 16px; }
.shell.menu-acik .brand-text small { color: var(--side-muted); font-size: 12px; }
.shell.menu-acik .menu-tog { align-self: stretch; width: auto; height: 38px; display: flex; align-items: center; gap: 14px;
  padding: 0 14px; margin: 2px 0 2px; font: inherit; font-size: 14px; color: var(--side-muted); }
.shell.menu-acik .menu-tog svg { width: 20px; height: 20px; }
.shell.menu-acik .nav { align-items: stretch; }
.shell.menu-acik .nav-label { display: block; padding: 12px 10px 4px; font-size: 11.5px; color: var(--side-muted); }
.shell.menu-acik .nav a { width: auto; height: 48px; padding: 0 14px; justify-content: flex-start; gap: 14px; font-size: 16px; font-weight: 550; }
.shell.menu-acik .nav a > span { display: inline; white-space: nowrap; }
.shell.menu-acik .nav a { color: var(--text-2); }
.shell.menu-acik .nav a.active, .shell.menu-acik .nav a:hover { color: var(--side-text); }
.shell.menu-acik .nav a .count { margin-left: auto; font-size: 12.5px; font-weight: 650; min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 11px; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.shell.menu-acik .nav a.active .count { background: var(--accent); color: #fff; }
.shell.menu-acik .sidebar-foot { align-items: stretch; }
.shell.menu-acik .mode-pill { width: auto; height: auto; padding: 8px 10px; justify-content: flex-start; }
.shell.menu-acik .mode-pill .lbl { display: flex; flex-direction: column; font-size: 12.5px; }
.shell.menu-acik .mode-pill .lbl small { display: none; }
.shell.menu-acik .user-card { justify-content: flex-start; gap: 10px; padding: 4px 6px; }
.shell.menu-acik .user-card .who { display: flex; flex-direction: column; min-width: 0; }
.shell.menu-acik .user-card .who b { font-size: 14px; color: var(--side-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell.menu-acik .user-card .who span { font-size: 12.5px; color: var(--side-muted); }
.shell.menu-acik .side-row { flex-direction: row; gap: 4px; }
.shell.menu-acik .side-row .side-btn.wide { flex: 1; width: auto; }
.shell.menu-acik .side-row .side-btn.wide .lbl { display: inline; font-size: 14px; }

/* ---- yönetici: sayfanın 4 çıktısı ---- */
.modal.wide:has(.ck) { width: min(1180px, 96vw); }
.modal-b:has(.ck) { display: block; max-height: calc(100vh - 190px); overflow-y: auto; }
.ck { display: flex; flex-direction: column; width: 100%; text-align: left; }
.ck-meta { margin: -4px 0 12px; }
.ck-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.ck-tab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.ck-tab .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: 13px; flex: 0 0 26px; }
.ck-tab b { display: block; font-size: 14.5px; } .ck-tab small { color: var(--muted); font-size: 12px; }
.ck-tab.on { border-color: var(--accent); background: var(--primary-soft); } .ck-tab.on .n { background: var(--accent); color: #fff; }
.ck-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ck-bar p { margin: 0; color: var(--text-2); font-size: 14px; }
.ck-pre { margin: 0; max-height: 46vh; overflow: auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.ck-pre.md { font-family: inherit; font-size: 14px; }
.ck-bbox { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ck-img { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #222; max-height: 46vh; overflow-y: auto; }
.ck-in { position: relative; } .ck-img img { display: block; width: 100%; }
.ck-box { position: absolute; border: 2px solid var(--accent); background: rgba(250, 82, 15, .08); border-radius: 2px; }
.ck-box span { position: absolute; left: -2px; top: -16px; opacity: .92; background: var(--accent); color: #fff; font-size: 10px; padding: 0 4px; border-radius: 3px; white-space: nowrap; display: none; }
.ck-box:hover { background: rgba(250, 82, 15, .2); z-index: 2; } .ck-box:hover span { display: block; }
.ck-tests { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }

/* ---- çalışma alanı: işlem türleri listesi, uzman kutusu, kısayollar ---- */
.ws-oplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 10px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.ws-op { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text-2); }
.ws-op:hover { background: var(--surface-2); }
.ws-op.on { background: var(--primary-soft); color: var(--text); font-weight: 600; }
.ws-op input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.ws-ops { margin: 16px 0 0; }
.ws-f.aktif { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
tr.aktif td { background: var(--primary-soft) !important; }
.ws-box.expert { border: 2px dashed #16a34a; background: rgba(22, 163, 74, .10); }
.ws-box.expert span { background: #16a34a; }
.ws-box.drawing { pointer-events: none; }
.ws-scroll.cizim .ws-stage { cursor: crosshair; }
.ws-scroll.cizim .ws-box { pointer-events: none; }
.ws-scroll { position: relative; }
.ws-center { position: relative; }
.ws-cizim-ipucu { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 8px; background: #16a34a; color: #fff; padding: 8px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 550; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 5; }
.ws-cizim-ipucu svg { width: 16px; height: 16px; }
.ws-kutu-v { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: #16a34a; }
.ws-kutu-v svg, .ws-kutu-i svg { width: 14px; height: 14px; }
.ws-kutu-i { color: #16a34a; margin-left: 4px; display: inline-flex; vertical-align: middle; }
.linkbtn { border: none; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
button.ws-tag { border: none; cursor: pointer; }
.ks-list { display: flex; flex-direction: column; gap: 2px; min-width: 420px; }
.ks-row { display: flex; justify-content: space-between; gap: 24px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.ks-row:last-child { border-bottom: none; }
kbd { display: inline-block; min-width: 22px; padding: 2px 7px; border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2);
  font: 600 12.5px/1.4 'JetBrains Mono', ui-monospace, monospace; text-align: center; color: var(--text); }

/* ---- kullanıcı ana sayfası: belge yükle ---- */
.up-page { min-height: calc(100vh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px 48px; gap: 18px; }
.up-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-align: center; }
.up-card { width: min(720px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 18px; box-shadow: 0 10px 40px rgba(20, 20, 10, .07); }
.up-zone { border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 16px; padding: 46px 24px 40px; text-align: center; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); transition: border-color .15s, background .15s, transform .15s; outline: none; }
.up-zone:hover, .up-zone:focus-visible, .up-zone.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.up-zone.over { transform: scale(1.01); }
.up-zone.busy { pointer-events: none; opacity: .6; }
.up-ic { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.up-ic svg { width: 34px; height: 34px; }
.up-zone h2 { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
.up-zone p { margin: 0 0 20px; color: var(--muted); font-size: 15.5px; }
.up-zone .btn.lg { padding: 12px 22px; font-size: 16px; border-radius: 12px; pointer-events: none; }
.up-fmt { margin-top: 14px; font-size: 13px; color: var(--muted); }
.up-foot { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 4px 2px; }
.up-foot label { font-size: 14px; color: var(--muted); font-weight: 550; }
.up-sel { width: auto; min-width: 240px; }
.up-durum { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-2); font-size: 14.5px; min-height: 0; }
.up-durum:not(:empty) { padding: 12px 0 2px; }
.up-durum .spin { width: 16px; height: 16px; border: 2px solid var(--border-2); border-top-color: var(--accent); border-radius: 50%; animation: upspin .8s linear infinite; }
@keyframes upspin { to { transform: rotate(360deg); } }
.up-devam { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14.5px; text-decoration: none; padding: 8px 14px; border-radius: 10px; }
.up-devam:hover { background: var(--surface-2); color: var(--text); }
.up-devam svg { width: 16px; height: 16px; color: var(--accent); }

/* ---- puan tablosu: benim etiketlerim ---- */
.my-card { padding: 20px 22px; margin-bottom: 22px; }
.my-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.my-h h2 { margin: 0; font-size: 19px; }
.my-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.my-num { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.my-num b { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.my-num span { color: var(--muted); font-size: 13.5px; }
.my-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.my-grid h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.my-bars { display: flex; flex-direction: column; gap: 8px; }
.my-bar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.my-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-t { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.my-t i { display: block; height: 100%; border-radius: 99px; }
.my-bar b { min-width: 28px; text-align: right; }
@media (max-width: 1000px) { .my-grid { grid-template-columns: 1fr; } .my-nums { grid-template-columns: repeat(2, 1fr); } }

/* ---- ayarlar: kullanılan modeller (bilgi) ---- */
.mdl-list { display: flex; flex-direction: column; gap: 8px; }
.mdl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.mdl > div { display: flex; flex-direction: column; gap: 2px; }
.mdl code { font-size: 13px; color: var(--text-2); }
.mdl.pasif { opacity: .55; }

.g-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; margin: 6px 0; }
.g-keys > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 14.5px; }

.ws-vbar { flex-wrap: wrap; row-gap: 6px; }
.ws-vbar .ws-file { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.ws-vbar .ws-file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- bilgi yok / atla ---- */
.ws-ph-t { flex-wrap: wrap; }
.ws-skip { margin-left: 4px; color: var(--muted); }
.ws-skip:hover { color: var(--text); }
.ws-skip svg { width: 14px; height: 14px; }
i.st.gray { background: #a8a29e; }

/* belge türü / arşiv türü uyarı kutusu (Diğer seçimi, tür değişikliği) */
.ws-not { flex-basis: 100%; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4;
  background: color-mix(in srgb, #f5b84d 14%, transparent); border: 1px solid color-mix(in srgb, #f5b84d 45%, transparent); color: var(--text); }
.ws-not svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #c98a12; }
[data-theme="dark"] .ws-not svg { color: #f5b84d; }
.ws-ph .select { max-width: 320px; }
/* yönetici: 4 çıktı ekranı */
.ck-denetim { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin: 4px 0 8px; font-size: 13px; }
.ck-denetim ul { margin: 4px 0 0 18px; padding: 0; }
.co-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.co-kpi { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.co-kpi b { display: block; font-size: 26px; font-weight: 600; line-height: 1.1; }
.co-kpi span { color: var(--text-2); font-size: 13px; }
.co-kpi.ok b { color: var(--green); } .co-kpi.bad b { color: var(--red); } .co-kpi.warn b { color: #c98a12; }
.co-akis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.co-akis > div { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; line-height: 1.45; }
.co-akis .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; margin-right: 6px; }
.co-akis code, .co-yol code { font-size: 12px; word-break: break-all; }
.co-sorun li { margin: 2px 0; }
.co-yol { display: grid; gap: 4px; font-size: 13px; }
.crumbs a { white-space: nowrap; flex: none; }

/* aranabilir belge türü seçici */
.bs { position: relative; min-width: 220px; max-width: 340px; flex: 1 1 240px; }
.bs-btn { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; background-image: none; padding-right: 10px; }
.bs-btn .bs-ad { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-btn svg { width: 15px; height: 15px; flex: none; transform: rotate(90deg); color: var(--muted); }
.bs.dis .bs-btn { cursor: not-allowed; opacity: .75; }
.bs-pano { position: absolute; z-index: 60; top: calc(100% + 4px); right: 0; width: min(420px, 92vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; }
.bs-ara-k { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.bs-ara-k svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.bs-ara { border: 0 !important; box-shadow: none !important; padding: 4px 2px !important; background: transparent !important; width: 100%; }
.bs-list { max-height: min(420px, 60vh); overflow-y: auto; padding: 4px 0; }
.bs-g { padding: 8px 12px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bs-o { padding: 7px 12px; font-size: 14px; cursor: pointer; line-height: 1.3; }
.bs-o:hover, .bs-o.akt { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bs-o.sec { font-weight: 600; color: var(--accent); }
.bs-bos { padding: 12px; font-size: 13.5px; }

/* etiketçi işlem çubuğu: Önceki / Sonraki / Kaydet / Kutu çiz / Tablo çiz / Atla */
.ws-abar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 12px; background: #2a2a28; border-bottom: 1px solid #1b1b1a; flex: none; }
.ws-ab { height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.07); color: #f1f0ec;
  display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ws-ab svg { width: 16px; height: 16px; flex: none; }
.ws-ab:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.ws-ab:disabled { opacity: .35; cursor: default; }
.ws-ab.on { background: #fa520f; border-color: #fa520f; color: #fff; }
.ws-ab.vurgu { border-color: #f5b84d; box-shadow: 0 0 0 1px #f5b84d inset; }
.ws-kbd { font: 600 11px/1 Inter, system-ui, sans-serif; padding: 3px 5px; border-radius: 4px; background: rgba(255,255,255,.14); color: #d9d7d1; border: none; }
.ws-ab.on .ws-kbd { background: rgba(255,255,255,.28); color: #fff; }
.ws-abar .ws-pg { color: #d9d7d1; }
.ws-scroll { cursor: grab; }
.ws-scroll.suruk { cursor: grabbing; user-select: none; }
.ws-scroll.cizim { cursor: default; }
.ws-stage img { height: 100%; }
/* kaydedilmiş taslak notu (sağ panel) */
.ws-taslak { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 16px 0; padding: 8px 12px; border-radius: 8px; font-size: 13.5px;
  background: color-mix(in srgb, #4f7cf0 10%, transparent); border: 1px solid color-mix(in srgb, #4f7cf0 35%, transparent); }
.ws-taslak svg { width: 15px; height: 15px; color: #4f7cf0; }
.ws-taslak .muted { flex-basis: 100%; }

/* seçili kutu: kenar ve köşe tutamaçları (büyüt / küçült), içinden taşı */
.ws-box.sec { z-index: 5; cursor: move; border-width: 2px; border-color: #fa520f; background: rgba(250,82,15,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.ws-box.sec span { opacity: 1; background: #fa520f; }
.ws-tut { position: absolute; width: 11px; height: 11px; background: #fff; border: 2px solid #fa520f; border-radius: 3px; z-index: 6; }
.ws-tut.nw { left: -6px; top: -6px; cursor: nwse-resize; } .ws-tut.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.ws-tut.ne { right: -6px; top: -6px; cursor: nesw-resize; } .ws-tut.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.ws-tut.n { left: calc(50% - 6px); top: -6px; cursor: ns-resize; } .ws-tut.s { left: calc(50% - 6px); bottom: -6px; cursor: ns-resize; }
.ws-tut.w { top: calc(50% - 6px); left: -6px; cursor: ew-resize; } .ws-tut.e { top: calc(50% - 6px); right: -6px; cursor: ew-resize; }
.ws-scroll.cizim .ws-tut { display: none; }

/* renkli işlem düğmeleri */
.ws-ab { --c: #8d8a84; border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 22%, transparent); }
.ws-ab:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 38%, transparent); }
.ws-ab svg { color: color-mix(in srgb, var(--c) 45%, #fff); }
.ws-ab.gezin { --c: #6f86b8; }
.ws-ab.kaydet { --c: #3b82f6; }
.ws-ab.kutu { --c: #a855f7; }
.ws-ab.tablo { --c: #14b8a6; }
.ws-ab.atla { --c: #f59e0b; }
.ws-ab.cirak { --c: #d946ef; }
.ws-ab.on { background: var(--c); border-color: var(--c); color: #fff; }
.ws-ab.on svg { color: #fff; }
.ws-ab.kaydet.vurgu { background: #3b82f6; border-color: #3b82f6; color: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,.35); }
.ws-ab.kaydet.vurgu svg { color: #fff; }
/* tablo yokken yönlendirme */
.ws-bos-tablo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px 12px; border: 1.5px dashed var(--border); border-radius: 12px; }
.ws-bos-tablo > svg { width: 28px; height: 28px; color: #14b8a6; }
.ws-bos-tablo p { margin: 0 0 6px; max-width: 420px; font-size: 13.5px; }
/* dosya formunda tıklanabilir bilgi → belgede düzelt / işaretle */
.ekf.tikla { cursor: pointer; border-radius: 10px; transition: background .12s; }
.ekf.tikla:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ekf.tikla:hover .val { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Çırağın buldukları: çırağın belgeden okuduğu her şey — açılır/kapanır pencere (görüntüleyicinin sağında) */
.ws-stage.cirak .ws-box span { opacity: 1; }
.ws-stage.cirak .ws-box { border-width: 2px; }
.ws-cirak { position: absolute; top: 104px; right: 14px; bottom: 14px; width: min(350px, 56%); z-index: 6;
  display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.35); overflow: hidden; }
.ws-cirak .ck-h { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, #7c3aed 8%, var(--surface)); }
.ws-cirak .ck-h > svg { width: 18px; height: 18px; color: #7c3aed; flex: none; margin-top: 2px; }
.ws-cirak .ck-h > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ws-cirak .ck-h b { font-size: 14.5px; }
.ws-cirak .ck-h span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.ws-cirak .ck-h .ws-ib { color: var(--muted); }
.ws-cirak .ck-h .ws-ib:hover { background: var(--surface-2, rgba(0,0,0,.06)); color: var(--text); }
.ws-cirak .ck-g { overflow: auto; padding: 4px 14px 16px; }
.ws-cirak .ck-b { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.ws-cirak .ck-b:last-child { border-bottom: none; }
.ws-cirak h5 { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.ws-cirak p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.ws-cirak ul { margin: 0; padding-left: 18px; font-size: 13.2px; line-height: 1.45; }
.ws-cirak li + li { margin-top: 4px; }
.ws-cirak .ck-liste { display: flex; flex-direction: column; gap: 2px; }
.ws-cirak .ck-s { display: grid; grid-template-columns: 112px 1fr auto; gap: 2px 10px; align-items: baseline; text-align: left;
  border: none; background: transparent; color: inherit; font: inherit; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; }
.ws-cirak .ck-s:hover, .ws-cirak .ck-s.hl { background: color-mix(in srgb, #7c3aed 9%, transparent); }
.ws-cirak .ck-s.satir { grid-template-columns: 1fr; }
.ws-cirak .ck-ad { font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.ws-cirak .ck-v { font-size: 13.5px; font-weight: 600; word-break: break-word; }
.ws-cirak .ck-s.satir .ck-v { font-weight: 500; font-size: 13px; }
.ws-cirak .ck-s.bos .ck-v { font-weight: 400; color: var(--muted); font-style: italic; }
.ws-cirak .ck-i { display: inline-flex; gap: 6px; align-items: center; }
.ws-cirak .ck-i svg { width: 13px; height: 13px; color: #7c3aed; }
.ws-cirak .ck-not { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }
.ws-cirak em { font-style: normal; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 99px; line-height: 17px; }
.ws-cirak .ck-emin { background: rgba(201,138,4,.16); color: #a46f00; }
.ws-cirak .ck-duz { background: rgba(22,163,74,.14); color: #15803d; }
.ws-cirak .ck-ciz, .ws-cirak .ck-eski { background: rgba(217,61,61,.13); color: #c53030; }
.ws-cirak .ck-yeni { background: rgba(47,174,107,.14); color: #1f8a52; }
.ws-cirak .ck-tur { padding: 4px 0; }
.ws-cirak .ck-tur > b { font-size: 14px; margin-right: 6px; }
.ws-cirak .ck-kanit { font-size: 13px; margin-top: 3px; }
.ws-cirak .ck-kanit > span { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ws-cirak .ck-emin { color: #e0b44a; } :root:not([data-theme="light"]) .ws-cirak .ck-duz { color: #4ade80; } :root:not([data-theme="light"]) .ws-cirak .ck-ciz, :root:not([data-theme="light"]) .ws-cirak .ck-eski { color: #f87171; } :root:not([data-theme="light"]) .ws-cirak .ck-yeni { color: #4ade80; } }
:root[data-theme="dark"] .ws-cirak .ck-emin { color: #e0b44a; }
:root[data-theme="dark"] .ws-cirak .ck-duz, :root[data-theme="dark"] .ws-cirak .ck-yeni { color: #4ade80; }
:root[data-theme="dark"] .ws-cirak .ck-ciz, :root[data-theme="dark"] .ws-cirak .ck-eski { color: #f87171; }

/* Araç şeridi beyaz (Kasım 2026): düğmeler belgenin üstünde açık bir şeritte; koyu zemin yalnızca belgenin çevresinde */
.ws-center { background: var(--surface); }
.ws-scroll { background: var(--viewer); }
.ws-vbar { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); }
.ws-abar { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.06); position: relative; z-index: 1; }
.ws-file { color: var(--text-2); }
.ws-ib { color: var(--text); }
.ws-ib:hover:not(:disabled) { background: var(--surface-3); }
.ws-ib.txt { background: var(--surface-2); border: 1px solid var(--border); }
.ws-ib.on { background: var(--surface-3); border-color: var(--border-2); }
.ws-zoom-l { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.ws-sep { background: var(--border-2); }
.ws-pg, .ws-abar .ws-pg { color: var(--muted); }
.ws-pg b { color: var(--text); background: var(--surface-3); }
.ws-ab { color: var(--text); border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.ws-ab:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 20%, var(--surface)); }
.ws-ab svg { color: var(--c); }
.ws-kbd { background: var(--surface-3); color: var(--muted); }
.ws-ab.on, .ws-ab.kaydet.vurgu { color: #fff; }
.ws-ab.on .ws-kbd, .ws-ab.kaydet.vurgu .ws-kbd { background: rgba(255,255,255,.28); color: #fff; }

/* Çırağın buldukları penceresi: büyük, açılır pencere; sağ üstteki çarpıyla kapanır */
.ws-cirak { width: min(580px, calc(100% - 28px)); min-width: 320px; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45);
  animation: ck-ac .16s ease-out; }
@keyframes ck-ac { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
.ws-cirak .ck-h { padding: 16px 14px 14px 18px; align-items: center; }
.ws-cirak .ck-h > svg { width: 22px; height: 22px; margin-top: 0; }
.ws-cirak .ck-h b { font-size: 17px; }
.ws-cirak .ck-h span { font-size: 13.5px; }
.ws-cirak .ck-kapat { width: 38px; height: 38px; flex: none; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  color: var(--text); display: grid; place-items: center; cursor: pointer; }
.ws-cirak .ck-kapat:hover { background: #ef4444; border-color: #ef4444; color: #fff; }
.ws-cirak .ck-kapat svg { width: 20px; height: 20px; }
.ws-cirak .ck-g { padding: 6px 18px 20px; }
.ws-cirak .ck-b { padding: 14px 0; }
.ws-cirak h5 { font-size: 12.5px; margin-bottom: 8px; }
.ws-cirak p { font-size: 15px; line-height: 1.55; }
.ws-cirak ul { font-size: 14.5px; line-height: 1.55; }
.ws-cirak .ck-s { grid-template-columns: 150px 1fr auto; padding: 8px 10px; }
.ws-cirak .ck-ad { font-size: 14px; }
.ws-cirak .ck-v { font-size: 15px; }
.ws-cirak .ck-s.satir .ck-v { font-size: 14.5px; }
.ws-cirak .ck-not { font-size: 13px; }
.ws-cirak em { font-size: 12px; line-height: 19px; }
.ws-cirak .ck-tur > b { font-size: 15.5px; }
.ws-cirak .ck-kanit { font-size: 14.5px; }

/* Çırağın buldukları açıkken belgede: tek değerli bilgilerin etiketi hep görünür; satır ve hücre kutularının etiketi
   yalnızca üzerine gelince (etiketler tablonun yazısını kapatmasın) */
.ws-box.cell { border: 1px solid rgba(13,148,136,.85); background: rgba(13,148,136,.06); }
.ws-box.cell span { background: #0d9488; }
.ws-stage.cirak .ws-box.row span, .ws-stage.cirak .ws-box.struck span, .ws-stage.cirak .ws-box.cell span { opacity: 0; }
.ws-stage.cirak .ws-box.row:hover span, .ws-stage.cirak .ws-box.struck:hover span, .ws-stage.cirak .ws-box.cell:hover span,
.ws-stage.cirak .ws-box.hl span { opacity: 1; z-index: 4; }
.ws-stage.cirak .ws-box.row, .ws-stage.cirak .ws-box.struck { border-width: 1.5px; background: transparent; }
.ws-stage.cirak .ws-box.cell { border-width: 1px; }
.ws-stage.cirak .ws-box.cell:hover { z-index: 3; background: rgba(13,148,136,.16); }
.ws-stage.cirak .ws-box span { font-size: 10px; line-height: 14px; top: -15px; }

/* Tek sıra araç şeridi: gezinme · işlem düğmeleri · Çırağın buldukları · (sağda) görünüm düğmeleri; dar ekranda alta kayar */
.ws-abar { padding: 8px 12px; gap: 6px; row-gap: 8px; }
.ws-abar > .spacer { flex: 1 1 0; min-width: 0; }
.ws-gorunum { display: flex; align-items: center; gap: 4px; flex: none; }
.ws-gorunum .ws-ib { height: 34px; min-width: 34px; }
.ws-ab { height: 36px; }
/* kısayol harfleri düğmenin üstünde değil ipucunda (düğmeler tek sıraya sığsın) */
.ws-abar .ws-kbd { display: none; }
.ws-ab { padding: 0 11px; gap: 6px; }
.ws-cirak-ac { position: absolute; right: 18px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid #d946ef; border-radius: 10px; background: var(--surface); color: var(--text); font: 600 14px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); cursor: pointer; }
.ws-cirak-ac svg { width: 17px; height: 17px; color: #d946ef; }
.ws-cirak-ac:hover { background: color-mix(in srgb, #d946ef 12%, var(--surface)); }

/* Çalışma alanı: belge türü onayı, kısayol yazıları, kutu sağ tık menüsü */
.ws-tur { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.ws-tur .bs { flex: 1 1 200px; min-width: 0; }
.ws-tur-onay, .ws-tur-ok { flex: none; white-space: nowrap; }
.ws-tur .bs.onaysiz .bs-btn { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.ws-tur-onay { background: var(--green); border-color: var(--green); color: #fff; font-weight: 650; }
.ws-tur-onay:hover { filter: brightness(1.08); }
.ws-tur-onay svg { width: 15px; height: 15px; }
.ws-tur-ok { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 650; }
.ws-tur-ok svg { width: 14px; height: 14px; }
.titret { animation: ws-titret .45s ease-in-out 2; }
@keyframes ws-titret { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ws-kisa { font-size: 12px; font-weight: 500; opacity: .62; margin-left: 1px; }
.ws-ab.on .ws-kisa { opacity: .9; }
.ws-kutu-v.sil { color: var(--muted); }
.ws-menu { position: fixed; z-index: 200; min-width: 190px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 4px; }
.ws-menu-b { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 10px 5px; text-transform: uppercase; letter-spacing: .04em; }
.ws-menu-o { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; text-align: left; font-size: 14px; color: var(--text); }
.ws-menu-o:hover { background: var(--surface-2); }
.ws-menu-o svg { width: 15px; height: 15px; color: var(--muted); }
.ws-menu-o.sil { color: var(--red); }
.ws-menu-o.sil svg { color: var(--red); }
/* Tablo sekmesi: sayfadaki ayrı tablolar */
.ws-tablo-g + .ws-tablo-g { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border-2); }
.ws-tablo-ad { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.ws-tablo-ad > svg { width: 16px; height: 16px; color: var(--teal); flex: none; }
.ws-tablo-ad-i { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 4px 6px; font-weight: 650; font-size: 14.5px; color: var(--text); }
.ws-tablo-ad-i:hover, .ws-tablo-ad-i:focus { border-color: var(--border-2); background: var(--surface); outline: none; }