/* Ortak bileşenler. Renk ve ölçüler tokens.css'ten gelir. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, p { margin: 0; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) ease; }
a:hover { color: var(--color-primary-hover); }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); white-space: nowrap; flex: none; letter-spacing: -.01em; }
a.mono { color: var(--color-primary); }
.input.mono, textarea.mono { font-size: 13px; color: var(--color-text); white-space: normal; flex: initial; }
.muted { color: var(--color-text-muted); }
.nowrap { white-space: nowrap; }
.spacer { flex: 1 1 0; }
.strong { font-weight: 600; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
summary { cursor: pointer; }
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }

/* Kabuk */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.sidenav { flex: 1 0 248px; background: var(--color-nav-bg); padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; position: relative; isolation: isolate; }
.sidenav::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--color-nav-indicator) 14%, transparent), transparent 70%); }
.sidenav-brand { display: flex; align-items: center; gap: 10px; padding: 4px 12px 22px; color: #fff; font-weight: 600; font-size: 17px; letter-spacing: -.02em; text-decoration: none; }
.sidenav-brand:hover { color: #fff; }
.sidenav-brand .logo { width: 32px; height: 32px; }
.brand-logo { max-height: 30px; max-width: 132px; border-radius: 6px; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--color-ink); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sidenav-badge { padding: 0 12px 18px; margin-top: -16px; font-size: 11px; letter-spacing: .1em; color: var(--color-nav-indicator); font-weight: 600; }
.sidenav-heading { padding: 18px 12px 6px; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--color-nav-heading); }
.sidenav a.nav-item { position: relative; padding: 10px 12px; border-radius: var(--radius-control); color: var(--color-nav-text); text-decoration: none; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.sidenav a.nav-item:hover { background: var(--color-nav-active-bg); color: var(--color-nav-active-text); }
.sidenav a.nav-item.is-active { background: var(--color-nav-active-bg); color: var(--color-nav-active-text); font-weight: 500; }
.sidenav a.nav-item.is-active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--color-nav-indicator); box-shadow: 0 0 12px var(--color-nav-indicator); }
.shell-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 25; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 32px; background: color-mix(in srgb, var(--color-surface) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--color-border); }
.topbar .search { flex: 1 1 240px; max-width: 460px; background-color: var(--color-bg); padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359625C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 16px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary-hover); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; text-decoration: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-border); }
a.avatar:hover { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-primary); }
.avatar-sm { width: 26px; height: 26px; font-size: 12px; box-shadow: none; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.theme-backoffice .topbar .avatar { background: var(--color-nav-bg); color: #fff; }
.page { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.page-narrow { width: 100%; max-width: 720px; margin-inline: auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.page-head > .titles { flex: 1 1 320px; min-width: 0; }
.page-head h1 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.page-head .sub { margin-top: 6px; color: var(--color-text-muted); }
.page-head .actions, .page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs { color: var(--color-text-muted); font-size: 13px; margin-bottom: 4px; }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-primary); }
.row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.row > .grow-2 { flex: 2 1 520px; min-width: 0; }
.row > .grow-1 { flex: 1 1 320px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Düğmeler */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-height); padding: 0 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-xs); transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease; }
.btn:hover { background: var(--color-bg); border-color: var(--color-text-muted); color: var(--color-text); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { border-color: transparent; background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(11, 23, 18, .2), 0 4px 12px -4px color-mix(in srgb, var(--color-primary) 60%, transparent); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: transparent; color: var(--color-on-primary); }
.btn[aria-pressed="true"], .btn[aria-current="page"] { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-primary-hover); font-weight: 600; }
:root[data-theme="dark"] .btn:not(.btn-primary)[aria-pressed="true"], :root[data-theme="dark"] .btn:not(.btn-primary)[aria-current="page"] { color: var(--color-primary); }
.btn-primary[aria-pressed="true"], .btn-primary[aria-current="page"] { background: var(--color-primary); border-color: transparent; color: var(--color-on-primary); }
.btn-danger { color: var(--tone-danger-fg); }
.btn-danger:hover { background: var(--tone-danger-bg); border-color: var(--tone-danger-fg); color: var(--tone-danger-fg); }
.btn-sm { height: var(--control-height-sm); padding: 0 12px; font-size: 13px; gap: 6px; border-radius: 8px; }
.btn-sm::after { content: ""; position: absolute; inset: -5px 0; }
.btn-link { border: 0; background: none; color: var(--color-primary); padding: 0; height: var(--control-height); font: inherit; font-weight: 500; cursor: pointer; }
.btn-link:hover { color: var(--color-primary-hover); background: none; text-decoration: underline; text-underline-offset: 3px; }
.btn-block { width: 100%; }

/* Form */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-weight: 500; }
legend.label, fieldset > legend { font-weight: 500; margin-bottom: 6px; }
.input, select.input, textarea.input { height: var(--control-height); padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; width: 100%; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease; }
.input:hover { border-color: var(--color-text-muted); }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
.input::placeholder { color: var(--color-text-muted); opacity: .8; }
.input[readonly] { background: var(--color-surface-sunken); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359625C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
select.input[multiple] { height: auto; padding: 6px; background-image: none; }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
input[type=file].input { height: auto; padding: 9px 12px; }
input[type=file].input::file-selector-button { margin-right: 12px; padding: 4px 12px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface-sunken); color: var(--color-text); font: inherit; font-weight: 500; cursor: pointer; }
.input.is-invalid { border-color: var(--tone-danger-fg); }
.input-sm { height: var(--control-height-sm); font-size: 13px; }
.input-auto { width: auto; }
.input-num { width: 96px; }
.field-error { color: var(--tone-danger-fg); font-size: 13px; }
.field-hint { color: var(--color-text-muted); font-size: 13px; }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--control-height); }
input[type=checkbox], input[type=radio] { accent-color: var(--color-primary); }
.check input, .table input[type=checkbox] { width: 18px; height: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.form-inline, .cluster.align-end { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-inline > .field { flex: 1 1 180px; }
.check-group { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Kart, tablo, liste */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); min-width: 0; box-shadow: var(--shadow-sm); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.card-head h2, .card-head h1 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; flex: 1 1 auto; margin: 0; }
.card-head > span.muted { font-size: 13px; }
.card-body { padding: 20px; }
.card-foot, .card-section { padding: 16px 20px; border-top: 1px solid var(--color-divider); }
.card-foot { background: color-mix(in srgb, var(--color-surface-sunken) 45%, var(--color-surface)); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.card-narrow { max-width: 720px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; color: var(--color-text-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 12px; white-space: nowrap; }
.table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--color-text); white-space: normal; }
.table td { padding: 12px; border-top: 1px solid var(--color-divider); vertical-align: middle; }
.table tbody tr { transition: background var(--dur-fast) ease; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-primary-tint) 35%, transparent); }
.table tfoot td, .table tfoot th { border-top: 2px solid var(--color-border); font-weight: 600; background: var(--color-bg); }
.table th:first-child, .table td:first-child { padding-left: 20px; }
.table th:last-child, .table td:last-child { padding-right: 20px; }
.table .actions { text-align: right; white-space: nowrap; }
.num, .table .num { text-align: right; font-variant-numeric: tabular-nums; }
.center, .table .center { text-align: center; }
.empty { padding: 48px 20px; text-align: center; color: var(--color-text-muted); }
.empty::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 14px; background: var(--color-primary-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6E52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h10M4 17h6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.empty h3 { color: var(--color-text); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.empty .btn { margin-top: 16px; }

/* Gösterge kutuları */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kpi { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.kpi::before { content: ""; position: absolute; left: 20px; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }
.kpi .kpi-label { color: var(--color-text-muted); font-weight: 500; font-size: 13px; }
.kpi .kpi-value { margin-top: 6px; font-size: clamp(22px, 2.3vw, 32px); text-wrap: balance; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .kpi-note { color: var(--color-text-muted); font-size: 13px; margin-top: 2px; }

/* Durum etiketi: renk her zaman metinle birlikte */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-plain::before { display: none; }
.pill-info { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.pill-warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.pill-success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.pill-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.tag { font-size: 12px; color: var(--color-text-subtle); border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 0 6px; }

/* İlerleme çubuğu */
.meter { height: 6px; border-radius: 3px; background: var(--color-surface-sunken); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, var(--color-accent))); max-width: 100%; }
.meter-row { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.meter-row > .meter { flex: 1 1 0; }

/* Bildirim bandı */
.flash, .alert, .notice { position: relative; padding: 12px 16px 12px 40px; border-radius: var(--radius-control); font-weight: 500; }
.flash::before, .alert::before, .notice::before { content: ""; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.flash { background: var(--tone-success-bg); color: var(--tone-success-fg); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.6-10.6-1.2-1-3.6 4.3-1.9-1.8-1.1 1.1 3.1 3 4.7-5.6Z'/%3E%3C/svg%3E"); }
.alert { background: var(--tone-danger-bg); color: var(--tone-danger-fg); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM7.1 3.5h1.8v5.5H7.1V3.5Zm0 7h1.8v1.8H7.1v-1.8Z'/%3E%3C/svg%3E"); }
.notice { background: var(--tone-warning-bg); color: var(--tone-warning-fg); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm.9-12.5H7.1v1.8h1.8V3.5Zm0 3H7.1v6h1.8v-6Z'/%3E%3C/svg%3E"); }
.notice.cluster { padding-left: 40px; }

/* Sekmeler */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--color-border); }
.tabs a { position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 12px; color: var(--color-text-muted); text-decoration: none; font-weight: 500; transition: color var(--dur-fast) ease; }
.tabs a:hover { color: var(--color-text); }
.tabs a.is-active { color: var(--color-text); font-weight: 600; }
.tabs a.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--color-primary); }

/* Tanım listesi (alan paneli) */
.fields { margin: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.fields dt { color: var(--color-text-muted); }
.fields dd { margin: 0; font-weight: 500; }

.sidenav-top { display: flex; align-items: flex-start; }
.sidenav-top .sidenav-brand { flex: 1 1 auto; }
.nav-items { display: flex; flex-direction: column; gap: 2px; }
.nav-toggle { display: none; height: var(--control-height); padding: 0 14px; border: 1px solid color-mix(in srgb, var(--color-nav-text) 40%, transparent); border-radius: var(--radius-control); background: none; color: var(--color-nav-active-text); font: inherit; font-weight: 500; cursor: pointer; }
.topbar-search { flex: 1 1 240px; max-width: 460px; }

/* Geniş ekranda menü sabit kalır ve kendi içinde kayar. */
@media (min-width: 761px) {
  .sidenav { position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-grow: 0; flex-basis: 248px; }
  .sidenav { scrollbar-color: color-mix(in srgb, var(--color-nav-text) 30%, transparent) transparent; }
}

/* Dar ekran: menü kapalı gelir ve "Menü" düğmesiyle açılır; üst çubuk iki satıra bölünür. */
@media (max-width: 760px) {
  .topbar, .page { padding-left: 16px; padding-right: 16px; }
  .topbar { position: static; }
  .sidenav { padding: 12px 16px; }
  .sidenav-brand { padding: 8px 0; }
  .sidenav-badge { margin-top: 0; padding: 0 0 8px; }
  .sidenav a.nav-item.is-active::before { left: -16px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-items { display: none; padding-top: 8px; }
  .sidenav.is-open .nav-items { display: flex; }
  .topbar-search { flex: 1 1 100%; max-width: none; }
  .topbar .spacer { display: none; }
  .page-head h1 { font-size: 23px; }
}


/* Kanban board */
.board-wrap { overflow-x: auto; }
/* Kolonlar satır boyunca uzar: kısa (boş) kolonun altındaki boşluğa bırakılan kart da o kolona düşer. */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; align-items: stretch; }
.board-col { background: color-mix(in srgb, var(--color-surface-sunken) 70%, var(--color-bg)); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.board-col.is-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.board-col.is-forbidden { opacity: .45; }
.board-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.board-col-head h2 { flex: 1 1 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-subtle); }
.board-col-head .count { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; background: var(--color-surface); color: var(--color-text-subtle); }
.board-cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.board-card { display: flex; flex-direction: column; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; color: var(--color-text); text-decoration: none; box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast) ease; }
.board-card:hover { border-color: var(--color-border-strong); color: var(--color-text); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.board-card[draggable="true"] { cursor: grab; }
.board-card.is-dragging { opacity: .4; transform: rotate(1.5deg); }
.board-card .card-row { display: flex; align-items: center; gap: 8px; }
.board-card .card-title { font-weight: 500; }
.text-danger { color: var(--tone-danger-fg); font-weight: 600; }
.toast { position: fixed; right: 24px; bottom: 24px; max-width: 380px; padding: 12px 16px 12px 18px; border-radius: 12px; background: var(--color-ink); color: #fff; font-weight: 500; z-index: 50; box-shadow: var(--shadow-lg), inset 4px 0 0 var(--color-accent); animation: toast-in var(--dur) var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.toast.is-error { box-shadow: var(--shadow-lg), inset 4px 0 0 #FF8A75; }

/* Liste satırı (aktivite özetleri) */
.list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.list-row:hover { background: color-mix(in srgb, var(--color-primary-tint) 40%, transparent); color: var(--color-text); }
.list-row .key { width: 76px; flex: none; }
.list-row .title { flex: 1 1 240px; font-weight: 500; min-width: 0; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Zorunlu alan: etiketin sonuna yıldız. Etiket kendi "(zorunlu)" notunu taşıyorsa yinelenmez. */
.field:has(> :is(input, select, textarea)[required]) > label:not(:has(.muted))::after,
label:has(+ :is(input, select, textarea)[required]):not(:has(.muted))::after { content: " *"; color: var(--tone-danger-fg); font-weight: 600; }
/* Boşluksuz uzun metin (bağlantı, anahtar, yapıştırılmış veri) sayfayı yana taşırmaz, satır içinde kırılır. */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, p, dd, li, label, legend, .title, .sub, .muted, .notice, .flash, .alert, .list-row, .card-head > span, .pill, .tag { overflow-wrap: anywhere; }
/* Tablo hücrelerinde "anywhere" sütunu tek harfe kadar daraltır; break-word sütunu en uzun kelimeye göre boyutlar, taşma .table-wrap'te kayar. */
td, th, td :is(.muted, .title, .pill, .tag, p), th :is(.muted, .title) { overflow-wrap: break-word; }
.page-head .titles, .card-head > *, .list-row > * { min-width: 0; }
.comment { display: flex; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--color-divider); }
.comment .body { flex: 1 1 0; min-width: 0; }

/* Backlog ve sprint listeleri */
.backlog-list.is-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.backlog-items { min-height: 44px; }
.backlog-item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; background: var(--color-surface); }
.backlog-item:hover { background: color-mix(in srgb, var(--color-primary-tint) 40%, var(--color-surface)); color: var(--color-text); }
.backlog-item[draggable="true"] { cursor: grab; }
.backlog-item.is-dragging { opacity: .4; }
.backlog-item .title { flex: 1 1 240px; font-weight: 500; min-width: 0; }
.backlog-empty { padding: 12px 20px; color: var(--color-text-muted); border-top: 1px solid var(--color-divider); }

/* Gantt */
.gantt { min-width: 1000px; }
.gantt-head, .gantt-row { display: flex; border-bottom: 1px solid var(--color-divider); }
.gantt-head { color: var(--color-text-muted); font-size: 12px; font-weight: 500; border-bottom-color: var(--color-border); }
.gantt-name { flex: 0 0 340px; padding: 0 20px; display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; }
.gantt-name a { color: var(--color-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-name a:hover { color: var(--color-primary); }
.gantt-toggle { flex: none; position: relative; width: 20px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--color-text-muted); font: inherit; line-height: 1; }
button.gantt-toggle { cursor: pointer; }
.gantt-row[hidden] { display: none; }
button.gantt-toggle:hover { background: var(--color-surface-sunken); color: var(--color-text); }
button.gantt-toggle[aria-expanded="false"] { transform: rotate(-90deg); }
.gantt-track { flex: 1 1 0; position: relative; min-height: 44px; }
.gantt-weeks { flex: 1 1 0; display: flex; }
.gantt-weeks > div { padding: 12px 8px; border-left: 1px solid var(--color-divider); white-space: nowrap; overflow: hidden; }
.gantt-grid { position: absolute; inset: 0; display: flex; }
.gantt-grid > div { border-left: 1px solid var(--color-divider); }
.gantt-bar { position: absolute; top: 13px; height: 18px; border-radius: 6px; background: var(--color-primary-tint); box-shadow: inset 0 0 0 1px var(--color-gantt-bar); overflow: hidden; min-width: 6px; }
.gantt-bar > span { display: block; height: 100%; background: var(--color-gantt-bar); }
.gantt-bar.is-summary { top: 19px; height: 6px; border-radius: 3px; background: var(--color-text); box-shadow: none; }
.gantt-bar.is-overdue { box-shadow: inset 0 0 0 1px var(--tone-danger-fg); background: var(--tone-danger-bg); }
.gantt-bar.is-overdue > span { background: var(--tone-danger-fg); }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--tone-danger-fg); }
.legend { display: flex; flex-wrap: wrap; gap: 20px; color: var(--color-text-subtle); font-size: 13px; }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; }

/* Takvim */
.calendar { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); min-width: 860px; }
.calendar .dow { padding: 10px 12px; color: var(--color-text-muted); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--color-border); }
.calendar .day { min-height: 112px; padding: 8px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 4px; }
.calendar .day:nth-child(7n) { border-right: 0; }
.calendar .day.is-out { background: color-mix(in srgb, var(--color-bg) 70%, var(--color-surface)); color: var(--color-text-muted); }
.calendar .day-num { font-weight: 500; font-size: 13px; }
.calendar .day.is-today .day-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 0 0 4px var(--color-primary-tint); }
.calendar .event { display: block; padding: 3px 8px; border-radius: 6px; font-weight: 500; font-size: 12px; text-decoration: none; background: var(--tone-info-bg); color: var(--tone-info-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar .event.is-done { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.calendar .event.is-overdue { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }

.gantt-bar[data-id] { cursor: grab; touch-action: none; }
.gantt-bar[data-id]::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; }

.gantt-body { position: relative; }
.gantt-offs { position: absolute; top: 0; bottom: 0; left: 340px; right: 0; }
.gantt-off { position: absolute; top: 0; bottom: 0; background: var(--color-bg); }
.gantt-row { position: relative; }
.gantt-name { background: var(--color-surface); }
.calendar .holiday { font-size: 12px; color: var(--tone-warning-fg); font-weight: 500; }

/* Biçimlendirilmiş metin (açıklama ve yorumlar) */
.rich { white-space: normal; }
.rich p { margin: 0 0 6px; }
.rich h3 { margin: 10px 0 6px; font-size: 15px; font-weight: 600; }
.rich ul { margin: 0 0 6px; padding-left: 20px; }
.rich code { font-family: var(--font-mono); font-size: 13px; background: var(--color-surface-sunken); padding: 1px 5px; border-radius: 4px; }

/* Düz liste ve risk matrisi */
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.risk-matrix { border-collapse: separate; border-spacing: 4px; }
.risk-matrix th { font-weight: 500; color: var(--color-text-muted); font-size: 13px; padding: 4px 8px; }
.risk-matrix td { padding: 0; }
.risk-cell { display: grid; place-items: center; width: 64px; height: 48px; border-radius: var(--radius-control); font-weight: 600; text-decoration: none; }
.risk-cell.is-selected { outline: 2px solid var(--color-text); outline-offset: 1px; }
.risk-cell.tone-success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.risk-cell.tone-warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.risk-cell.tone-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }

/* Komut paleti */
.palette { width: min(560px, calc(100vw - 32px)); margin-top: 12vh; padding: 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-card); background: var(--color-surface, #fff); color: var(--color-text); box-shadow: var(--shadow-lg); }
.palette::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.palette .input { width: 100%; }
.palette-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow: auto; }
.palette-list li { padding: 10px 12px; border-radius: var(--radius-control); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.palette-list li[aria-selected="true"], .palette-list li:hover { background: var(--color-primary-tint); color: var(--color-text); box-shadow: inset 3px 0 0 var(--color-primary); }
.palette-hint { margin: 8px 4px 0; font-size: 13px; color: var(--color-text-muted); }

/* Gantt: baseline çubuğu ve kritik yol */
.gantt-baseline { position: absolute; top: 33px; height: 4px; border-radius: 2px; background: var(--color-text-muted); opacity: 0.55; min-width: 4px; }
.gantt-bar.is-critical { box-shadow: inset 0 0 0 2px var(--tone-danger-fg); }

/* Board şeritleri */
.lane-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 15px; font-weight: 600; }
.lane-title .count { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 10px; background: var(--color-surface-sunken); color: var(--color-text-subtle); }
.board-wrap > .board + .lane-title { margin-top: 24px; }

/* Yazdırma: menü ve düğmeler gizlenir, içerik tam genişlikte ve renkleriyle basılır. */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .sidenav, .topbar, .btn, .btn-link, form, .toast, .flash, .tabs { display: none !important; }
  .shell { display: block; }
  .shell-main, .page { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .card { box-shadow: none !important; break-inside: avoid; }
  .table-wrap, .board-wrap, .gantt-wrap { overflow: visible !important; }
  .gantt { min-width: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Takvimde bugünün numarası: bağlantı rengi yerine dolgu üzerindeki metin rengi kullanılır. */
.calendar .day.is-today a.day-num, .calendar .day.is-today a.day-num:hover { color: var(--color-on-primary); text-decoration: none; }
.calendar a.day-num { color: inherit; text-decoration: none; }
.calendar .day.is-today a.day-num { color: var(--color-on-primary); }

/* Kümülatif akış: her durum için ortak ölçekli günlük çubuk dizisi (küçük çoklu grafik) */
.flow { padding: 16px 20px; display: grid; gap: 14px; }
.flow-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 96px; gap: 16px; align-items: end; }
.flow-name { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.flow-bars { display: flex; align-items: flex-end; gap: 2px; height: 56px; border-bottom: 1px solid var(--color-border); }
.flow-bars > span { flex: 1 1 0; min-width: 2px; min-height: 1px; border-radius: 2px 2px 0 0; background: var(--color-gantt-bar); }
.flow-bars > span:hover { background: var(--color-primary-hover); }
.flow-value { display: flex; gap: 8px; align-items: baseline; justify-content: flex-end; }
.flow-axis { align-items: start; }
.flow-dates { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-muted); }
@media (max-width: 720px) { .flow-row { grid-template-columns: 1fr; gap: 6px; } .flow-value { justify-content: flex-start; } }

/* Hızlı düzenleme penceresi ve kart düğmesi */
.quick-dialog { width: min(640px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--color-divider); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.quick-dialog::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.quick-dialog .card { border: 0; margin: 0; box-shadow: none; }
.card-quick { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--color-text-muted); cursor: pointer; }
.card-quick:hover, .card-quick:focus-visible { background: var(--color-surface-sunken, rgba(127, 127, 127, 0.15)); color: var(--color-text); }
@media print { .card-quick, [data-quick] { display: none !important; } }

/* Kapasite: yeniden planlama bırakma hedefi */
td[data-drop-user].is-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -3px; }
tr[data-move-key].is-dragging { opacity: .45; }

/* Üst çubuk: şirket değiştirme menüsü */
.switcher { position: relative; }
.switcher > summary { list-style: none; cursor: pointer; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 2px; }
.switcher-item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--color-text); font: inherit; text-align: left; }
button.switcher-item { cursor: pointer; }
button.switcher-item:hover, button.switcher-item:focus-visible { background: var(--color-surface-sunken, rgba(127, 127, 127, 0.15)); }
.switcher-item.is-current { font-weight: 600; }
@media print { .switcher { display: none; } }

/* Takvim: sürükleyerek tarih değiştirme */
.calendar .day.is-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -3px; }
.calendar .event[draggable="true"] { cursor: grab; }
.calendar .event.is-dragging { opacity: .45; }

/* Onay ve kısayol pencereleri */
.confirm-dialog { width: min(460px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--color-divider); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.confirm-dialog::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.confirm-dialog h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.confirm-dialog p { margin: 0 0 16px; }
.confirm-dialog .form-actions { justify-content: flex-end; }
.confirm-dialog .fields { margin: 0 0 16px; }

/* Organizasyon şeması: iç içe liste, sol kenarda bağlantı çizgisi */
.org-chart { list-style: none; margin: 0; padding: 0; }
.org-chart .org-chart { margin-left: 18px; padding-left: 22px; border-left: 2px solid var(--color-divider); }
.org-chart li { position: relative; padding: 6px 0; }
.org-chart .org-chart > li::before { content: ""; position: absolute; left: -22px; top: 30px; width: 18px; border-top: 2px solid var(--color-divider); }
.org-box { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); min-width: 220px; }

/* Dosya bırakma alanı */
form[data-dropzone].is-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -4px; border-radius: 8px; }

/* "@" bahsetme önerileri */
.mention-list { position: absolute; z-index: 40; margin: 2px 0 0; padding: 4px; list-style: none; min-width: 220px; max-height: 220px; overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: var(--shadow-md); }
.mention-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.mention-list li[aria-selected="true"] { background: var(--color-primary); color: var(--color-on-primary); }

/* Takvim katmanları: kapatılan katmanın öğeleri gizlenir */
.calendar.hide-activity [data-layer="activity"], .calendar.hide-meeting [data-layer="meeting"], .calendar.hide-milestone [data-layer="milestone"],
.calendar.hide-absence [data-layer="absence"], .calendar.hide-holiday [data-layer="holiday"] { display: none; }

/* Takvim: gün, hafta ve yıl görünümleri */
.calendar.is-day { grid-template-columns: 1fr; min-width: 0; }
.calendar.is-day .day { min-height: 240px; border-right: 0; }
.calendar.is-day .event { white-space: normal; font-size: 14px; padding: 6px 10px; }
.calendar.is-week .day { min-height: 320px; }
.calendar.is-week .event { white-space: normal; }
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.year-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.year-month th { font-size: 11px; font-weight: 500; color: var(--color-text-muted); padding: 2px 0; text-align: center; }
.year-month td { padding: 1px; text-align: center; }
.year-month td a { display: block; padding: 4px 0; border-radius: 4px; font-size: 12px; color: var(--color-text); text-decoration: none; }
.year-month td a:hover { background: var(--color-surface-sunken); }
.year-month td a.is-holiday { color: var(--tone-warning-fg); }
.year-month td a.has-items { background: var(--color-primary-tint); color: var(--color-text); font-weight: 600; }
.year-month td a.is-today { box-shadow: inset 0 0 0 2px var(--color-primary); }

/* Bağlantı önizleme kartı */
.peek-card { position: fixed; z-index: 60; width: min(340px, calc(100vw - 16px)); padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 8px; font-size: 13px; pointer-events: none; }
.peek-card[hidden] { display: none; }
@media print { .peek-card { display: none !important; } }

/* Sorgu kutusu önerileri */
.suggest-wrap { position: relative; }
.suggest-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow: auto; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-md); }
.suggest-list[hidden] { display: none; }
.suggest-list li { padding: 6px 10px; border-radius: 4px; cursor: pointer; font-family: var(--font-mono); font-size: 13px; }
.suggest-list li:hover, .suggest-list li[aria-selected="true"] { background: var(--color-primary-tint); }

.list-row.is-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -3px; background: var(--color-primary-tint); }

.calendar.hide-custom [data-layer="custom"] { display: none; }

/* Gantt bağımlılık çizgileri */
.gantt-links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 1; }
.gantt-links path { fill: none; stroke: var(--color-text-muted); stroke-width: 1.5; }
.gantt-links .gantt-link-head { fill: var(--color-text-muted); stroke: none; }

/* Gantt tarih aralığı: aralık dışına taşan çubuklar izlekte kırpılır. */
.gantt.is-ranged .gantt-track { overflow: hidden; }

tr[data-org-id] { cursor: grab; }
tr[data-org-id].is-dragging { opacity: .45; }
tr.is-drop-target > td, [data-org-root].is-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -3px; background: var(--color-primary-tint); }

.avatar { overflow: hidden; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dashboard ızgarası: yarım genişlikteki widget'lar geniş ekranda yan yana durur. */
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dash-cell { grid-column: span 2; min-width: 0; }
@media (min-width: 1000px) { .dash-cell.dash-half { grid-column: span 1; } }
[data-sort-row] { cursor: grab; }
[data-sort-row].is-dragging { opacity: .45; }
[data-sort-row].is-drop-target { box-shadow: inset 0 2px 0 var(--color-primary); }

/* Grafikler: kategorik seri renkleri (açık ve koyu yüzey için ayrı ayrı doğrulanmış adımlar). Renk sırası sabittir. */
:root { --series-1: #0E8A66; --series-2: #E0702B; --series-3: #2B7FA8; --series-4: #C99A06; --series-5: #C2508A; --series-6: #6B8E23; --series-7: #7461C9; --series-8: #D9453B; }
:root[data-theme="dark"] { --series-1: #9BD62A; --series-2: #F08A3C; --series-3: #4FA9D6; --series-4: #E5B930; --series-5: #E07BB0; --series-6: #4CC08F; --series-7: #9C8CF0; --series-8: #F0706A; }
.viz-s1 { fill: var(--series-1); background: var(--series-1); } .viz-s2 { fill: var(--series-2); background: var(--series-2); }
.viz-s3 { fill: var(--series-3); background: var(--series-3); } .viz-s4 { fill: var(--series-4); background: var(--series-4); }
.viz-s5 { fill: var(--series-5); background: var(--series-5); } .viz-s6 { fill: var(--series-6); background: var(--series-6); }
.viz-s7 { fill: var(--series-7); background: var(--series-7); } .viz-s8 { fill: var(--series-8); background: var(--series-8); }
.viz-slice { stroke: var(--color-surface); stroke-width: 2; }
.viz-slice:hover { opacity: .85; }
.viz-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.viz-legend { border-collapse: collapse; font-size: 13px; }
.viz-legend th { text-align: left; font-weight: 400; padding: 2px 16px 2px 0; white-space: nowrap; color: var(--color-text); }
.viz-legend td { padding: 2px 0 2px 12px; }
.viz-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; }
.viz-axis { stroke: var(--color-border); stroke-width: 1; }
.viz-grid { stroke: var(--color-divider); stroke-width: 1; stroke-dasharray: 3 3; }
.viz-stroke { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-dot { fill: var(--series-1); stroke: var(--color-surface); stroke-width: 2; }
.viz-tick { fill: var(--color-text-muted); font-size: 9px; }
.viz-value { fill: var(--color-text); font-size: 11px; font-weight: 600; }

/* Menü grupları: sıra şirket ayarından gelir (order). Grup içi öğeler olağan aralıkla dizilir. */
.nav-group { display: flex; flex-direction: column; gap: 2px; }

/* Dar/geniş ekrana özel öğeler ve telefonda aktivite sayfasının altındaki hızlı işlem çubuğu. */
.only-narrow { display: none !important; }
@media (max-width: 760px) {
  .only-wide { display: none !important; }
  .only-narrow { display: inline-flex !important; }
  .mobile-actions.only-narrow { display: flex !important; position: sticky; bottom: 0; z-index: 20; gap: 8px; margin: 16px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 12px rgba(11, 23, 18, .08); }
  .mobile-actions > *, .mobile-actions form { flex: 1 1 0; display: flex; }
  .mobile-actions .btn { flex: 1 1 0; justify-content: center; padding: 0 8px; }
}
@media print { .mobile-actions { display: none !important; } }

/* Klavye kullanıcıları için: ilk Tab ile görünür, menüyü atlayıp sayfa içeriğine götürür. */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 16px; border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
main:focus { outline: none; }

/* Alan paneli: sırası ayarlanabilen çiftler bir kapsayıcıda durur; ızgara düzeni bozulmasın diye kapsayıcı kutu üretmez. */
.fields > div[data-field] { display: contents; }
.layout-table select.input { min-width: 120px; }

/* Workflow şeması: durumlar sürüklenebilir, oklar tıklanabilir. */
.wf-node { cursor: grab; touch-action: none; }
.wf-node:focus-visible { outline: none; }
.wf-node:focus-visible rect { stroke: var(--color-primary) !important; stroke-width: 3 !important; }
.wf-node.is-dragging { cursor: grabbing; opacity: .75; }
.wf-node.is-drop-target rect { stroke: var(--color-primary) !important; stroke-width: 3 !important; stroke-dasharray: 4 3; }
.wf-edge:hover .wf-edge-line, .wf-edge:focus-visible .wf-edge-line { stroke: var(--color-primary) !important; stroke-width: 2.5 !important; }
.wf-edge:focus-visible { outline: none; }

/* Küçük görünen denetimlerin dokunma alanı en az 44 px olur. */
button.gantt-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* Logo: taban çizgisinin üstünde "T". Beyaz T işi, lime taban ilerlemeyi, nokta bir sonraki adımı anlatır. */
.logo { display: block; flex: none; width: 30px; height: 30px; overflow: visible; }
.logo .logo-tile { fill: var(--color-ink); }
.logo .logo-bar { fill: #fff; }
.logo .logo-base, .logo .logo-spark { fill: var(--color-accent); }
.sidenav .logo .logo-tile { fill: color-mix(in srgb, #fff 8%, var(--color-nav-bg)); }
.wordmark { font-weight: 600; letter-spacing: -.035em; }

/* Giriş ekranları: koyu, hareketli sahne ve cam kart. Sahnenin içinde koyu tema belirteçleri geçerlidir. */
.auth {
  --color-bg: #070C09; --color-surface: #101813; --color-surface-sunken: #16201A; --color-border: #26332B; --color-border-strong: #3A4A40;
  --color-divider: #1E2922; --color-text: #EEF3EF; --color-text-muted: #A3B2A9; --color-text-subtle: #BAC6BE;
  --color-primary: #C6F432; --color-primary-hover: #D8FB72; --color-primary-tint: #1E2A12; --color-on-primary: #0B1712;
  --tone-success-bg: #1C3312; --tone-success-fg: #A6DE7E; --tone-danger-bg: #44190F; --tone-danger-fg: #FF9C8C;
  --tone-warning-bg: #3A2A0C; --tone-warning-fg: #F0C46A; --ring: 0 0 0 4px rgba(198, 244, 50, .18);
  --glow: 198, 244, 50; --glow-2: 14, 138, 102; --card-top: rgba(22, 32, 26, .78); --card-bottom: rgba(12, 18, 14, .82);
  color-scheme: dark;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); align-items: center;
  gap: 4vw; padding: 32px max(32px, 6vw); background: var(--color-bg); color: var(--color-text);
}
.auth.theme-backoffice { --color-primary: #F08A3C; --color-primary-hover: #F6A465; --color-primary-tint: #3A2410; --ring: 0 0 0 4px rgba(240, 138, 60, .2); --glow: 240, 138, 60; --glow-2: 168, 62, 28; --card-top: rgba(34, 26, 20, .8); --card-bottom: rgba(18, 13, 10, .85); --color-bg: #0C0907; --color-surface: #17120E; --color-border: #33291F; --color-border-strong: #4A3D30; }

.auth-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; --px: 0; --py: 0; }
.auth-aurora { position: absolute; inset: -20%; filter: blur(90px) saturate(1.2); opacity: .85; transform: translate(calc(var(--px) * -24px), calc(var(--py) * -24px)); transition: transform .6s var(--ease-out); }
.auth-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.auth-aurora i:nth-child(1) { width: 46vmax; height: 46vmax; left: 4%; top: 6%; background: radial-gradient(circle, rgba(var(--glow), .55), transparent 65%); animation: aurora-a 22s ease-in-out infinite alternate; }
.auth-aurora i:nth-child(2) { width: 52vmax; height: 52vmax; left: 38%; top: 30%; background: radial-gradient(circle, rgba(var(--glow-2), .55), transparent 65%); animation: aurora-b 28s ease-in-out infinite alternate; }
.auth-aurora i:nth-child(3) { width: 38vmax; height: 38vmax; left: -6%; top: 52%; background: radial-gradient(circle, rgba(43, 127, 168, .4), transparent 65%); animation: aurora-c 25s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate(18vw, 10vh) scale(1.2); } }
@keyframes aurora-b { to { transform: translate(-22vw, -16vh) scale(.85); } }
@keyframes aurora-c { to { transform: translate(14vw, -24vh) scale(1.15); } }

.auth-grid { position: absolute; left: -50%; right: -50%; bottom: -2%; height: 58%; transform-origin: 50% 100%; transform: perspective(520px) rotateX(64deg);
  background-image: linear-gradient(rgba(var(--glow), .16) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--glow), .16) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%); mask-image: linear-gradient(to top, #000 0%, transparent 85%); animation: grid-run 2.6s linear infinite; }
@keyframes grid-run { to { background-position: 0 64px, 0 0; } }

/* İş akışı şeritleri: Gantt çubukları gibi soldan sağa akar. */
.auth-lanes { position: absolute; inset: 0; transform: translate(calc(var(--px) * 14px), calc(var(--py) * 10px)); transition: transform .6s var(--ease-out); }
.auth-lanes > div { position: absolute; left: 0; right: 0; height: 10px; }
.auth-lanes > div:nth-child(1) { top: 14%; } .auth-lanes > div:nth-child(2) { top: 24%; } .auth-lanes > div:nth-child(3) { top: 71%; }
.auth-lanes > div:nth-child(4) { top: 79%; } .auth-lanes > div:nth-child(5) { top: 87%; } .auth-lanes > div:nth-child(6) { top: 93%; }
.auth-lanes i { position: absolute; top: 0; left: 0; height: 100%; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .14)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); animation: lane-run var(--d, 14s) linear var(--delay, 0s) infinite; transform: translateX(-30vw); }
.auth-lanes i.is-hot { background: linear-gradient(90deg, rgba(var(--glow), 0), rgba(var(--glow), .9)); box-shadow: 0 0 18px rgba(var(--glow), .55); }
.auth-lanes i.is-done { background: linear-gradient(90deg, rgba(var(--glow-2), 0), rgba(var(--glow-2), .7)); }
@keyframes lane-run { to { transform: translateX(130vw); } }

/* Kahraman alanı: büyük logo kendini kurar, kelime işareti soldan açılır. */
.auth-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; transform: translate(calc(var(--px) * 10px), calc(var(--py) * 8px)); transition: transform .6s var(--ease-out); }
.auth-hero .badge { display: inline-flex; padding: 4px 12px; border: 1px solid rgba(var(--glow), .4); border-radius: var(--radius-pill); color: var(--color-primary); font-size: 12px; font-weight: 600; letter-spacing: .14em; animation: rise .6s 1.2s var(--ease-out) both; }
.auth-mark { position: relative; width: clamp(96px, 11vw, 148px); aspect-ratio: 1; }
.auth-mark::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(var(--glow), .75) 78%, transparent 92%); -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 100%); mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 100%); animation: halo-spin 6s linear infinite, fade-in 1s 1.1s both; }
.auth-mark::after { content: ""; position: absolute; inset: 8%; border-radius: 30%; background: rgba(var(--glow), .35); filter: blur(36px); z-index: -1; animation: breathe 4s ease-in-out 1.4s infinite; }
.auth-mark .logo { width: 100%; height: 100%; }
.auth-mark .logo .logo-tile { fill: #0E1A14; stroke: rgba(255, 255, 255, .1); stroke-width: .6; transform-box: fill-box; transform-origin: center; animation: tile-in .9s var(--ease-spring) both; }
.auth.theme-backoffice .auth-mark .logo .logo-tile { fill: #1A140F; }
.auth-mark .logo rect.logo-bar, .auth-mark .logo .logo-base, .auth-mark .logo .logo-spark { transform-box: fill-box; }
.auth-mark .logo .l-b1 { transform-origin: 0 50%; animation: grow-x .45s .35s var(--ease-out) both; }
.auth-mark .logo .l-spine { transform-origin: 50% 0; animation: grow-y .5s .58s var(--ease-out) both; }
.auth-mark .logo .logo-base { transform-origin: 0 50%; animation: grow-x .7s .84s var(--ease-spring) both; }
.auth-mark .logo .logo-spark { transform-origin: center; animation: spark-pop .55s 1.15s var(--ease-spring) both, spark-pulse 2.8s 1.8s ease-in-out infinite; }
.auth-word { font-size: clamp(44px, 6.4vw, 92px); font-weight: 600; letter-spacing: -.055em; line-height: .95; color: #fff; clip-path: inset(0 100% 0 0); animation: word-reveal 1s 1s var(--ease-out) forwards; }
.auth-word span { color: var(--color-primary); }
.auth-pulse { width: min(420px, 80%); height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; animation: fade-in .6s 1.5s both; }
.auth-pulse::after { content: ""; display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); animation: pulse-run 2.4s 1.6s ease-in-out infinite; transform: translateX(-100%); }
@keyframes tile-in { from { transform: scale(.4) rotate(-14deg); opacity: 0; } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes spark-pop { from { transform: scale(0); } 60% { transform: scale(1.5); } }
@keyframes spark-pulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(var(--glow), 0)); } 50% { filter: drop-shadow(0 0 3px rgba(var(--glow), .95)); } }
@keyframes halo-spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes word-reveal { to { clip-path: inset(0 -10% 0 0); } }
@keyframes pulse-run { to { transform: translateX(260%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* Kart */
.auth-card { --mx: 50%; --my: 0%; position: relative; width: 100%; padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px;
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); animation: card-in .9s .45s var(--ease-out) both; }
.auth-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(var(--glow), .7), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.auth-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--glow), .07), transparent 55%); }
.auth-card > :not(.sr-only) { position: relative; z-index: 1; animation: rise .6s var(--ease-out) both; }
.auth-card > :nth-child(1) { animation-delay: .6s; } .auth-card > :nth-child(2) { animation-delay: .66s; } .auth-card > :nth-child(3) { animation-delay: .72s; }
.auth-card > :nth-child(4) { animation-delay: .78s; } .auth-card > :nth-child(5) { animation-delay: .84s; } .auth-card > :nth-child(6) { animation-delay: .9s; }
.auth-card > :nth-child(n+7) { animation-delay: .96s; }
@keyframes card-in { from { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(8px); } }
.auth-brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; }
.auth-brand img { max-height: 44px; max-width: 200px; }
.auth-title { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.auth-sub { color: var(--color-text-muted); margin-top: 4px; }
.auth-card .flash, .auth-card .alert, .auth-card .notice { font-size: 13px; }

/* Yüzen etiketli alan */
.auth-field { position: relative; }
.auth-field .input { height: 58px; padding: 24px 16px 8px; border-radius: 14px; background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .1); font-size: 15px; }
.auth-field .input:hover { border-color: rgba(255, 255, 255, .22); }
.auth-field .input:focus { background: rgba(255, 255, 255, .055); border-color: var(--color-primary); }
.auth-field > label { position: absolute; left: 17px; top: 19px; color: var(--color-text-muted); pointer-events: none; transform-origin: 0 0; transition: transform var(--dur) var(--ease-out), color var(--dur) ease; }
.auth-field .input:focus + label, .auth-field .input:not(:placeholder-shown) + label, .auth-field .input:-webkit-autofill + label { transform: translateY(-11px) scale(.78); color: var(--color-primary); }
.auth-field .input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #141E18 inset; -webkit-text-fill-color: var(--color-text); caret-color: var(--color-text); }
.auth-field .input.has-toggle { padding-right: 56px; }
.auth-reveal { position: absolute; right: 6px; top: 7px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--color-text-muted); cursor: pointer; display: grid; place-items: center; }
.auth-reveal:hover { color: var(--color-text); background: rgba(255, 255, 255, .06); }
.auth-reveal svg { width: 20px; height: 20px; }
.auth-reveal[aria-pressed="true"] .eye-open, .auth-reveal:not([aria-pressed="true"]) .eye-off { display: none; }
.auth-otp { text-align: center; font-family: var(--font-mono); font-size: 22px !important; letter-spacing: .3em; }
.auth-row { display: flex; justify-content: flex-end; margin-top: -6px; }
.auth-row a, .auth-foot a, .auth-foot .btn-link { color: var(--color-text-muted); font-size: 13px; text-decoration: none; height: auto; }
.auth-row a:hover, .auth-foot a:hover, .auth-foot .btn-link:hover { color: var(--color-primary); text-decoration: none; }
.auth-foot { display: flex; justify-content: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--color-text-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1 1 0; height: 1px; background: rgba(255, 255, 255, .1); }
.auth-card .btn { height: 52px; border-radius: 14px; font-size: 15px; }
.auth-card .btn:not(.btn-primary) { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: var(--color-text); box-shadow: none; }
.auth-card .btn:not(.btn-primary):hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); }
.auth-card .btn-primary { overflow: hidden; box-shadow: 0 10px 30px -10px rgba(var(--glow), .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.auth-card .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); }
.auth-card .btn-primary:hover::after { transition: transform .8s var(--ease-out); transform: translateX(120%); }
.auth-card .btn-primary.is-loading { color: transparent; pointer-events: none; }
.auth-card .btn-primary.is-loading::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(11, 23, 18, .25); border-top-color: var(--color-on-primary); animation: halo-spin .7s linear infinite; }
.auth-code { font-size: 64px; font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--color-primary); }
.auth .mono { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 28px; padding: 32px 16px; }
  .auth-hero { align-items: center; gap: 16px; }
  .auth-mark { width: 84px; }
  .auth-word { font-size: 44px; }
  .auth-pulse { display: none; }
  .auth-card { max-width: 440px; padding: 28px 22px 24px; }
}
@media (max-height: 640px) and (max-width: 900px) { .auth-hero .auth-word, .auth-hero .badge { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .auth *, .auth *::before, .auth *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .auth-lanes, .auth-grid { display: none; }
  .auth-word { clip-path: none; }
}

/* Yardımcılar */
.text-sm, .meta { font-size: 13px; }
.text-xs { font-size: 12px; }
.meta { display: block; color: var(--color-text-muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.text-danger { color: var(--tone-danger-fg); font-weight: 600; }
.reading { max-width: 72ch; font-size: 15px; line-height: 1.7; }
.pill-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
.is-selected, .list-row.is-selected { background: var(--color-primary-tint); box-shadow: inset 3px 0 0 var(--color-primary); }

/* Görünüm seçici: yan yana düğmeler tek parça görünür; seçili olan aria-pressed/aria-current ile işaretlenir. */
.segmented, [role="group"].segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); }
.segmented > .btn { height: 36px; border: 0; background: transparent; box-shadow: none; border-radius: 9px; padding: 0 12px; font-size: 13px; color: var(--color-text-muted); }
.segmented > .btn:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-surface) 60%, transparent); }
.segmented > .btn[aria-pressed="true"], .segmented > .btn[aria-current="page"], .segmented > .btn.btn-primary { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-sm); }
.segmented > .btn::after { inset: -4px 0; }

/* Araç çubuğu ve süzgeç satırı */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.toolbar .field { flex: 0 1 200px; }

/* Çip: kayıtlı filtre, şablon, etiket önerisi */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font-size: 13px; font-weight: 500; text-decoration: none; }
.chip:hover { border-color: var(--color-primary); color: var(--color-text); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--color-primary-tint); border-color: var(--color-primary); }

/* Açılır yardım ve ayrıntı */
details.disclosure > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--color-primary); font-weight: 500; list-style: none; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur) var(--ease-out); }
details.disclosure[open] > summary::before { transform: rotate(45deg); }

/* Kod bloğu */
.code-block { margin: 0; padding: 14px 16px; border-radius: var(--radius-control); background: var(--color-ink); color: #DCE8E0; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; max-height: 360px; }

/* Tehlikeli işlemler */
.danger-zone { border-color: color-mix(in srgb, var(--tone-danger-fg) 35%, var(--color-border)); }
.danger-zone > .card-head { background: color-mix(in srgb, var(--tone-danger-bg) 55%, var(--color-surface)); border-radius: var(--radius-card) var(--radius-card) 0 0; }

/* Matris tabloları (rol yetkileri, durum geçişleri, bildirim şeması) */
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child, .matrix th[scope="row"] { text-align: left; position: sticky; left: 0; background: var(--color-surface); z-index: 1; }
.matrix-group > * { background: var(--color-bg) !important; font-weight: 600; }

/* Kilometre taşı elması ve Gantt yardımcıları */
.ms-diamond { display: inline-block; width: 12px; height: 12px; flex: none; background: var(--color-text); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.gantt-nodate { position: absolute; left: 8px; top: 12px; font-size: 12px; }

/* Okunmamış bildirim */
.list-row.is-unread .title { font-weight: 600; }
.list-row.is-unread::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex: none; box-shadow: 0 0 0 3px var(--color-primary-tint); }

/* Diyaloglar açılırken yumuşak giriş */
dialog[open].palette, dialog[open].quick-dialog, dialog[open].confirm-dialog { animation: dialog-in var(--dur) var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Sayfa içeriği yumuşakça belirir. */
.page > * { animation: page-in .35s var(--ease-out) both; }
.page > :nth-child(2) { animation-delay: 30ms; } .page > :nth-child(3) { animation-delay: 60ms; } .page > :nth-child(4) { animation-delay: 90ms; } .page > :nth-child(n+5) { animation-delay: 120ms; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; } }
@media print { .page > * { animation: none !important; } }

/* Müşteri portalı üst çubuğu */
.portal-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); font-weight: 600; font-size: 16px; letter-spacing: -.02em; text-decoration: none; }
.portal-brand:hover { color: var(--color-text); }

/* Gantt ad sütunu: başlık kısalır, yüzde ve rozetler tek satırda kalır. */
.gantt-name > .muted, .gantt-name > .pill { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gantt-name > a { min-width: 0; }

/* Sayfa ajanlarının raporladığı küçük ortak ihtiyaçlar */
figure { margin: 0; }
.stat-big { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.form-inline > .field-hint, .form-inline > .full { flex-basis: 100%; }
.card-head + .list-row, .card-head + .comment, .card-head + .card-section, .card-head + .backlog-item { border-top: 0; }
.table .actions .cluster, .table .actions .form-inline { justify-content: flex-end; flex-wrap: nowrap; }
.card > .alert, .card > .notice, .card > .flash { margin: 16px 20px 0; }
.mono.wrap { white-space: normal; overflow-wrap: anywhere; }
.title.plain { font-weight: 400; }
.cluster.tight { flex-wrap: nowrap; gap: 6px; }
.divider-top { border-top: 1px solid var(--color-divider); }
.legend i.ms-diamond { width: 12px; height: 12px; border-radius: 0; }
.year-grid h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.thumb { flex: none; line-height: 0; }
.thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }
.preview-box { background: var(--color-bg); }
.matrix tbody tr:hover > :first-child { background: color-mix(in srgb, var(--color-primary-tint) 35%, var(--color-surface)); }

/* v2 · menü ikonları: her menü öğesi adresine göre bir CSS maskesi alır (HTML değişmez). */
:root {--i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v4h-7zM13 10h7v10h-7zM4 13h7v7H4z'/%3E%3C/svg%3E"); --i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E"); --i-board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h4.5v16H4zM10 4h4.5v10H10zM16 4h4v13h-4z'/%3E%3C/svg%3E"); --i-backlog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 10.5h16M4 15h10M4 19.5h6'/%3E%3C/svg%3E"); --i-approvals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3C/svg%3E"); --i-projects: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5V19h18V9.5h-9l-2-2.5H3z'/%3E%3C/svg%3E"); --i-gantt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M7.5 12h11M11 18h8'/%3E%3C/svg%3E"); --i-timeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M7 8v8M12 5.5v13M17 9v6'/%3E%3C/svg%3E"); --i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E"); --i-risks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19zM12 10v4.5M12 17.2h.01'/%3E%3C/svg%3E"); --i-capacity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M10.5 20V4M16 20v-7M2.5 20h19'/%3E%3C/svg%3E"); --i-absences: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E"); --i-skills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9z'/%3E%3C/svg%3E"); --i-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 19v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1M9.5 10a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM21 19v-1a4 4 0 0 0-3-3.9M16 3.1a3.5 3.5 0 0 1 0 6.8'/%3E%3C/svg%3E"); --i-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a8 8 0 0 1 16 0M4 14v4.5h4V13H4zM20 14v4.5h-4V13h4z'/%3E%3C/svg%3E"); --i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3zM5 17a3 3 0 0 1 3-3h11'/%3E%3C/svg%3E"); --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z'/%3E%3C/svg%3E"); --i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6zM14 3v4h4'/%3E%3C/svg%3E"); --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.5V12l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E"); --i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7.5 16V10M12 16V5.5M16.5 16v-4'/%3E%3C/svg%3E"); --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10z'/%3E%3C/svg%3E"); --i-org: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v5H9zM12 8v4M6 15.5V12h12v3.5M3.5 15.5h5v5h-5zM15.5 15.5h5v5h-5z'/%3E%3C/svg%3E"); --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E"); --i-branch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9c0 6-12 3-12 9'/%3E%3C/svg%3E"); --i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4 14h7l-1 7.5 9-11.5h-7z'/%3E%3C/svg%3E"); --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8.5h11.5V20H8.5zM4 15.5V4h11.5'/%3E%3C/svg%3E"); --i-timer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13.5l3-3M12 21a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM9.5 2.5h5'/%3E%3C/svg%3E"); --i-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.5a6 6 0 1 1 12 0c0 6.5 3 8.5 3 8.5H3s3-2 3-8.5M10 21h4'/%3E%3C/svg%3E"); --i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); --i-audit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18H6zM9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E"); --i-coins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19M16.5 6H10a3.25 3.25 0 0 0 0 6.5h4a3.25 3.25 0 0 1 0 6.5H6.5'/%3E%3C/svg%3E"); --i-plug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5v5M15 2.5v5M6 7.5h12V11a6 6 0 0 1-12 0zM12 17v4.5'/%3E%3C/svg%3E"); --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5h18v13H3zM3.5 6.5l8.5 6 8.5-6'/%3E%3C/svg%3E"); --i-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7.5h13l-3.5-3.5M17 16.5H4l3.5 3.5'/%3E%3C/svg%3E"); --i-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h9M17 6.5h3M4 12h3M11 12h9M4 17.5h11M19 17.5h1M15 4.5v4M9 10v4M17 15.5v4'/%3E%3C/svg%3E"); --i-checklist: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6.5h10M10 12h10M10 17.5h10M3.5 6.5l1.3 1.3 2.2-2.6M3.5 12l1.3 1.3 2.2-2.6M3.5 17.5l1.3 1.3 2.2-2.6'/%3E%3C/svg%3E"); --i-form: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h16v6H4zM4 14.5h10v5H4z'/%3E%3C/svg%3E"); --i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5V4h7.5L21 14.5 13.5 22zM7.5 8h.01'/%3E%3C/svg%3E"); --i-flow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5h6v6h-6zM14.5 14.5h6v6h-6zM6.5 9.5v4a3.5 3.5 0 0 0 3.5 3.5h4.5'/%3E%3C/svg%3E"); --i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V3.5h10V21M14 9h6v12M2.5 21h19M7.5 7.5h3M7.5 11.5h3M7.5 15.5h3'/%3E%3C/svg%3E"); --i-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3M14 3.5h4.5a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H14'/%3E%3C/svg%3E"); --i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 8l9.5 5 9.5-5zM2.5 16l9.5 5 9.5-5M2.5 12l9.5 5 9.5-5'/%3E%3C/svg%3E"); --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5M12 16h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E");}
.sidenav a.nav-item[href="/"] { --icon: var(--i-home); }
.sidenav a.nav-item[href="/activities"] { --icon: var(--i-list); }
.sidenav a.nav-item[href="/board"] { --icon: var(--i-board); }
.sidenav a.nav-item[href="/backlog"] { --icon: var(--i-backlog); }
.sidenav a.nav-item[href="/approvals"] { --icon: var(--i-approvals); }
.sidenav a.nav-item[href="/projects"] { --icon: var(--i-projects); }
.sidenav a.nav-item[href="/gantt"] { --icon: var(--i-gantt); }
.sidenav a.nav-item[href="/timeline"] { --icon: var(--i-timeline); }
.sidenav a.nav-item[href="/calendar"], .sidenav a.nav-item[href="/admin/calendar"] { --icon: var(--i-calendar); }
.sidenav a.nav-item[href="/risks"] { --icon: var(--i-risks); }
.sidenav a.nav-item[href="/capacity"] { --icon: var(--i-capacity); }
.sidenav a.nav-item[href="/absences"] { --icon: var(--i-absences); }
.sidenav a.nav-item[href="/skills"] { --icon: var(--i-skills); }
.sidenav a.nav-item[href="/customers"], .sidenav a.nav-item[href="/admin/groups"] { --icon: var(--i-people); }
.sidenav a.nav-item[href="/tickets"] { --icon: var(--i-headset); }
.sidenav a.nav-item[href="/kb"] { --icon: var(--i-book); }
.sidenav a.nav-item[href="/meetings"] { --icon: var(--i-chat); }
.sidenav a.nav-item[href="/documents"] { --icon: var(--i-file); }
.sidenav a.nav-item[href="/timesheet"] { --icon: var(--i-clock); }
.sidenav a.nav-item[href="/reports"], .sidenav a.nav-item[href="/reports/time"] { --icon: var(--i-chart); }
.sidenav a.nav-item[href="/admin/users"], .sidenav a.nav-item[href="/backoffice/account"] { --icon: var(--i-user); }
.sidenav a.nav-item[href="/admin/org"] { --icon: var(--i-org); }
.sidenav a.nav-item[href="/admin/roles"] { --icon: var(--i-shield); }
.sidenav a.nav-item[href="/admin/approvals"] { --icon: var(--i-branch); }
.sidenav a.nav-item[href="/admin/automation"] { --icon: var(--i-bolt); }
.sidenav a.nav-item[href="/admin/templates"] { --icon: var(--i-copy); }
.sidenav a.nav-item[href="/admin/sla"] { --icon: var(--i-timer); }
.sidenav a.nav-item[href="/admin/notifications"] { --icon: var(--i-bell); }
.sidenav a.nav-item[href="/admin/trash"] { --icon: var(--i-trash); }
.sidenav a.nav-item[href="/admin/audit"], .sidenav a.nav-item[href="/backoffice/audit"] { --icon: var(--i-audit); }
.sidenav a.nav-item[href="/admin/costs"] { --icon: var(--i-coins); }
.sidenav a.nav-item[href="/admin/integrations"] { --icon: var(--i-plug); }
.sidenav a.nav-item[href="/admin/mailbox"], .sidenav a.nav-item[href="/backoffice/settings/mail"] { --icon: var(--i-mail); }
.sidenav a.nav-item[href="/admin/config-transfer"] { --icon: var(--i-swap); }
.sidenav a.nav-item[href="/admin/settings"] { --icon: var(--i-sliders); }
.sidenav a.nav-item[href="/admin/lookups"] { --icon: var(--i-checklist); }
.sidenav a.nav-item[href="/admin/custom-fields"] { --icon: var(--i-form); }
.sidenav a.nav-item[href="/admin/activity-types"] { --icon: var(--i-tag); }
.sidenav a.nav-item[href="/admin/statuses"] { --icon: var(--i-flow); }
.sidenav a.nav-item[href="/backoffice/companies"] { --icon: var(--i-building); }
.sidenav a.nav-item[href="/backoffice/logins"] { --icon: var(--i-login); }
.sidenav a.nav-item[href="/backoffice/jobs"] { --icon: var(--i-layers); }
.sidenav a.nav-item[href="/backoffice/errors"] { --icon: var(--i-alert); }

/* ============================================================================================
   v2 · modern katman. Palet aynı; derinlik, ritim ve yüzey dili yenilenir:
   yüzen menü + yükseltilmiş içerik paneli, hap kontroller, dolgulu alanlar, yuvarlak satırlar.
   ============================================================================================ */
:root {
  --v2-canvas: #E9E9E2;
  --v2-panel: #F7F7F3;
  --v2-subtle: #FAFAF7;
  --v2-line: rgba(17, 26, 21, .07);
  --v2-line-strong: rgba(17, 26, 21, .12);
  --v2-field: #F1F1EB;
  --v2-hover: rgba(14, 110, 82, .06);
  --v2-tint: rgba(17, 26, 21, .045);
  --v2-glow: rgba(198, 244, 50, .14);
  --v2-key: #6C766F;
  --v2-bo-kpi: #FDFBF8;
  --radius-card: 18px;
  --radius-control: 12px;
  --shadow-sm: 0 1px 2px rgba(17, 26, 21, .04), 0 6px 20px -12px rgba(17, 26, 21, .18);
  --shadow-md: 0 2px 4px rgba(17, 26, 21, .04), 0 16px 36px -16px rgba(17, 26, 21, .28);
}
:root[data-theme="dark"] {
  --v2-canvas: #050806;
  --v2-panel: #0C120F;
  --v2-subtle: #141B17;
  --v2-line: rgba(255, 255, 255, .07);
  --v2-line-strong: rgba(255, 255, 255, .13);
  --v2-field: #18211C;
  --v2-hover: rgba(198, 244, 50, .06);
  --v2-tint: rgba(255, 255, 255, .06);
  --v2-glow: rgba(198, 244, 50, .08);
  --v2-key: #8E9B93;
  --v2-bo-kpi: var(--color-surface);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -12px rgba(0, 0, 0, .6);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 36px -16px rgba(0, 0, 0, .7);
}
body { background: var(--v2-canvas); }

/* Kabuk: menü yüzer, içerik yuvarlak bir panelde durur */
.shell { padding: 12px; gap: 12px; flex-wrap: nowrap; background: var(--v2-canvas); }
.sidenav {
  flex: 0 0 256px; border-radius: 22px; padding: 18px 12px 20px;
  background: radial-gradient(140% 60% at 0% 0%, rgba(198, 244, 50, .10), transparent 55%), linear-gradient(180deg, #0F1E17 0%, #0B1712 40%, #08110D 100%);
  box-shadow: 0 30px 60px -30px rgba(11, 23, 18, .7), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.sidenav::before { display: none; }
@media (min-width: 761px) { .sidenav { top: 12px; height: calc(100vh - 24px); flex: 0 0 256px; } }
.sidenav-brand { padding: 4px 10px 18px; font-size: 18px; }
.sidenav-brand .logo { width: 34px; height: 34px; }
.sidenav-heading { padding: 18px 12px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: #6F8278; }
.sidenav a.nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; font-size: 13.5px; border-radius: 11px; color: #A9BAB0; }
.sidenav a.nav-item::after { content: ""; order: -1; flex: none; width: 18px; height: 18px; background: currentColor; opacity: .85; -webkit-mask: var(--icon, var(--i-list)) center / contain no-repeat; mask: var(--icon, var(--i-list)) center / contain no-repeat; }
.sidenav a.nav-item:hover { background: rgba(255, 255, 255, .05); color: #FFFFFF; }
.sidenav a.nav-item.is-active { background: linear-gradient(90deg, rgba(198, 244, 50, .16), rgba(198, 244, 50, .04)); color: #FFFFFF; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(198, 244, 50, .18); }
.sidenav a.nav-item.is-active::after { background: var(--color-nav-indicator); opacity: 1; }
.sidenav a.nav-item.is-active::before { display: none; }
.sidenav-badge { margin: -10px 10px 14px; padding: 4px 10px; align-self: flex-start; border-radius: 999px; background: rgba(240, 138, 60, .14); color: #F6A465; font-size: 10.5px; letter-spacing: .14em; }

.shell-main { flex: 1 1 auto; min-width: 0; background: var(--v2-panel); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--v2-line); overflow: clip; position: relative; }
.shell-main::before { content: ""; position: absolute; inset: 0 0 auto; height: 280px; pointer-events: none; background: radial-gradient(60% 100% at 100% 0%, var(--v2-glow), transparent 70%), radial-gradient(50% 90% at 0% 0%, rgba(14, 110, 82, .07), transparent 70%); }
.shell-main > :not(.topbar) { position: relative; }
.shell-main > .topbar { z-index: 25; }

/* Üst çubuk: şeffaf, hap kontroller */
.topbar { padding: 14px 28px; gap: 10px; background: color-mix(in srgb, var(--v2-panel) 78%, transparent); border-bottom: 1px solid var(--v2-line); }
.topbar .search { height: 42px; border-radius: 999px; border-color: var(--v2-line-strong); background-color: var(--color-surface); box-shadow: 0 1px 2px rgba(17, 26, 21, .04); }
.topbar .btn { height: 40px; border-radius: 999px; padding: 0 16px; }
.topbar .btn-link { height: 40px; padding: 0 12px; border-radius: 999px; color: var(--color-text-subtle); font-weight: 500; font-size: 13px; }
.topbar .btn-link:hover { background: var(--v2-tint); text-decoration: none; color: var(--color-text); }
.topbar .muted { font-size: 13px; font-weight: 500; padding: 0 4px; }
.avatar { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px rgba(14, 110, 82, .35); }

/* Sayfa */
.page { padding: 26px 28px 56px; gap: 22px; }
.page-head { gap: 18px; }
.page-head h1 { font-size: 30px; letter-spacing: -.035em; }
.page-head .sub { font-size: 14px; }
.crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--v2-tint); font-size: 12px; font-weight: 500; }
.page-head .btn:not(.btn-primary) { height: 38px; padding: 0 14px; background: color-mix(in srgb, var(--color-surface) 70%, transparent); }
.page-head .btn-primary { height: 40px; }

/* Düğmeler */
.btn { border-radius: var(--radius-control); border-color: var(--v2-line-strong); box-shadow: 0 1px 2px rgba(17, 26, 21, .05); font-weight: 500; }
.btn:hover { border-color: color-mix(in srgb, var(--color-text) 22%, transparent); background: var(--color-surface); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(17, 26, 21, .3); }
.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 88%, #FFFFFF) 0%, var(--color-primary) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(11, 23, 18, .2), 0 8px 18px -8px color-mix(in srgb, var(--color-primary) 70%, transparent); }
.btn-primary:hover { background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-primary:hover { background: var(--color-primary); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--color-primary-hover); }
.btn-sm { border-radius: 10px; }
.btn-danger:hover { background: var(--tone-danger-bg); border-color: color-mix(in srgb, var(--tone-danger-fg) 35%, transparent); }
.auth .btn-primary, .auth .btn-primary:hover { background: var(--color-primary); color: var(--color-on-primary); }
.auth .btn-primary:hover { background: var(--color-primary-hover); }
.auth .btn:hover { transform: none; }

/* Görünüm seçici */
.segmented { border-radius: 14px; background: var(--v2-tint); border-color: transparent; padding: 4px; }
.segmented > .btn { border-radius: 10px; }
.segmented > .btn:hover { transform: none; box-shadow: none; }

/* Formlar: dolgulu alanlar */
.input, select.input, textarea.input { border-radius: var(--radius-control); background-color: var(--v2-field); border-color: transparent; box-shadow: inset 0 0 0 1px var(--v2-line); }
.input:hover { border-color: transparent; box-shadow: inset 0 0 0 1px var(--v2-line-strong); }
.input:focus { background-color: var(--color-surface); border-color: var(--color-primary); box-shadow: var(--ring); }
.field > label, .label { font-size: 13px; font-weight: 600; color: var(--color-text-subtle); }
.field-hint { font-size: 12.5px; }

/* Kartlar */
.card { border-radius: var(--radius-card); border-color: var(--v2-line); box-shadow: var(--shadow-sm); background: var(--color-surface); }
.card-head { padding: 18px 22px 14px; border-bottom-color: var(--v2-line); }
.card-head h2, .card-head h1 { font-size: 15.5px; }
.card-body { padding: 20px 22px; }
.card-section, .card-foot { padding: 16px 22px; border-top-color: var(--v2-line); }
.card-foot { background: var(--v2-subtle); }
.card-head + .list-row { margin-top: 6px; }

/* Liste satırları: kart içinde yuvarlak, yüzen satırlar */
.card > .list-row, .card > a.list-row { margin: 2px 8px; padding: 12px 14px; border-top: 0; border-radius: 12px; }
.card > .list-row:last-child { margin-bottom: 8px; }
.list-row:hover, .backlog-item:hover { background: var(--v2-hover); }
.comment { border-top-color: var(--v2-line); gap: 12px; }

/* Tablolar */
.table th { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--color-text-muted); background: var(--v2-subtle); border-bottom: 1px solid var(--v2-line); padding: 11px 12px; }
.table td { border-top-color: var(--v2-line); padding: 13px 12px; }
.table tbody tr:hover { background: var(--v2-hover); }
.table th:first-child, .table td:first-child { padding-left: 22px; }
.table th:last-child, .table td:last-child { padding-right: 22px; }
.card > .table-wrap:first-child .table th:first-child, .card > .table:first-child th:first-child { border-top-left-radius: var(--radius-card); }
.card > .table-wrap:first-child .table th:last-child, .card > .table:first-child th:last-child { border-top-right-radius: var(--radius-card); }
.matrix thead th:first-child { background: var(--v2-subtle); }

/* Göstergeler */
.kpis { gap: 14px; }
.kpi { border-radius: var(--radius-card); border-color: var(--v2-line); padding: 18px 20px 20px; box-shadow: var(--shadow-sm); background: linear-gradient(180deg, var(--color-surface), var(--v2-subtle)); }
.kpi::before { left: 20px; width: 28px; height: 28px; top: 17px; border-radius: 9px; background: var(--color-primary-tint); }
.kpi::after { content: ""; position: absolute; left: 26px; top: 23px; width: 16px; height: 16px; background: var(--color-primary); -webkit-mask: var(--i-chart) center / contain no-repeat; mask: var(--i-chart) center / contain no-repeat; }
.kpi .kpi-label { padding-left: 38px; min-height: 26px; display: flex; align-items: center; font-size: 13px; }
.kpi .kpi-value { margin-top: 12px; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.04em; }
.kpis > .kpi:nth-child(2)::after { -webkit-mask-image: var(--i-list); mask-image: var(--i-list); }
.kpis > .kpi:nth-child(3)::after { -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); background: var(--tone-warning-fg); }
.kpis > .kpi:nth-child(3)::before { background: var(--tone-warning-bg); }
.kpis > .kpi:nth-child(4)::after { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); background: var(--tone-info-fg); }
.kpis > .kpi:nth-child(4)::before { background: var(--tone-info-bg); }

/* Etiketler */
.pill { border-radius: 8px; padding: 3px 9px; font-weight: 600; font-size: 11.5px; }
.tag { border-radius: 7px; border-color: var(--v2-line-strong); background: var(--color-surface); }
.meter { height: 8px; border-radius: 999px; background: var(--v2-tint); }
.meter > span { border-radius: 999px; }

/* Sekmeler: hap */
.tabs { gap: 4px; padding: 8px 10px; border-bottom-color: var(--v2-line); }
.tabs a { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.tabs a:hover { background: var(--v2-tint); }
.tabs a.is-active { background: var(--color-primary-tint); color: var(--color-primary-hover); }
:root[data-theme="dark"] .tabs a.is-active { color: var(--color-primary); }
.tabs a.is-active::after { display: none; }

/* Bant, boş durum */
.flash, .alert, .notice { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(17, 26, 21, .04); }
.empty { padding: 52px 20px; }
.empty::before { width: 56px; height: 56px; border-radius: 18px; background-color: var(--color-primary-tint); background-size: 24px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary-tint) 50%, transparent); margin-bottom: 18px; }

/* Board, takvim, Gantt */
.board { gap: 14px; }
.board-col { background: var(--v2-tint); border-color: transparent; border-radius: 18px; padding: 12px; }
.board-col-head h2 { font-size: 11.5px; letter-spacing: .1em; }
.board-card { border-radius: 14px; border-color: var(--v2-line); box-shadow: 0 1px 2px rgba(17, 26, 21, .05); padding: 14px; }
.board-card:hover { box-shadow: var(--shadow-md); }
.board-card[style*="border-left"] { border-left-width: 3px !important; }
.calendar .day { border-color: var(--v2-line); }
.calendar .event { border-radius: 7px; }
.gantt-bar { border-radius: 999px; }
.gantt-bar > span { border-radius: 999px; }
.quick-dialog, .confirm-dialog, .palette { border-radius: 20px; }

/* Bağlantılar: alt çizgi yalnızca üzerine gelince */
.page a:not(.btn):not(.chip):not(.board-card):not(.list-row):not(.backlog-item):not(.nav-item), .topbar a:not(.btn):not(.avatar), .card-head a { text-decoration: none; font-weight: 500; }
.page a:not(.btn):not(.chip):not(.board-card):not(.list-row):not(.backlog-item):hover, .topbar a:not(.btn):not(.avatar):hover { text-decoration: underline; text-underline-offset: 3px; }

/* Backoffice: kor turuncusu */
.theme-backoffice .sidenav { background: radial-gradient(140% 60% at 0% 0%, rgba(240, 138, 60, .14), transparent 55%), linear-gradient(180deg, #1D1712 0%, #17130F 45%, #110E0B 100%); }
.theme-backoffice .sidenav a.nav-item.is-active { background: linear-gradient(90deg, rgba(240, 138, 60, .2), rgba(240, 138, 60, .05)); box-shadow: inset 0 0 0 1px rgba(240, 138, 60, .22); }
.theme-backoffice .shell-main::before { background: radial-gradient(60% 100% at 100% 0%, rgba(240, 138, 60, .12), transparent 70%); }
.theme-backoffice .avatar { background: #2A231C; color: #F6A465; }
.theme-backoffice .kpi::before { background: rgba(240, 138, 60, .14); }
.theme-backoffice .kpi::after { background: #B4510F; }
.shell.theme-backoffice { background: color-mix(in srgb, var(--v2-canvas) 92%, #F08A3C); }

/* Dar ekran: yüzen kabuk kapanır */
@media (max-width: 760px) {
  .shell { padding: 0; gap: 0; flex-wrap: wrap; }
  .sidenav { flex: 1 1 100%; border-radius: 0 0 20px 20px; }
  .shell-main { border-radius: 0; box-shadow: none; }
  .topbar { padding: 12px 16px; }
  .page { padding: 20px 16px 40px; }
}
@media print {
  .shell { padding: 0; background: none; }
  .shell-main { border-radius: 0; box-shadow: none; background: none; }
  .shell-main::before { display: none; }
}

/* Müşteri kartı: portal erişimi */
.cp-portal-note { margin: 16px 20px 4px; background: var(--tone-info-bg); color: var(--tone-info-fg); font-weight: 400; font-size: 13px; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm.9-12.5H7.1v1.8h1.8V3.5Zm0 3H7.1v6h1.8v-6Z'/%3E%3C/svg%3E"); }
.cp-portal-note strong { font-weight: 600; }
.cp-user { display: flex; align-items: center; gap: 10px; }
.cp-acts { justify-content: flex-end; }

/* v2 · tuvaldeki üç ayrıntı: anahtar kodları kısık gri, tablo başlık bağlantıları metin renginde, arka ofis KPI'ları sıcak zeminli. */
.list-row .key, .backlog-item .mono { color: var(--v2-key); }
.table td a.strong, .table td .strong a { color: var(--color-text); }
.theme-backoffice .kpi { background: linear-gradient(180deg, var(--color-surface), var(--v2-bo-kpi)); }

/* Şirket ayarları: kategoriler açılır kapanır bölümlerdir (tuvaldeki Admin-Settings). */
.settings-group { border-bottom: 1px solid var(--color-divider); }
.settings-group > summary { list-style: none; padding: 16px 20px; cursor: pointer; }
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary:hover { background: var(--v2-hover); }
.settings-group > summary h3 { margin: 0; font-size: 15px; font-weight: 600; }
.settings-chev { flex: none; color: var(--color-text-muted); transform: rotate(-90deg); transition: transform .15s ease; }
.settings-group[open] .settings-chev { transform: none; }
.settings-fields { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); padding: 0 20px 20px 48px; }
@media (max-width: 640px) { .settings-fields { padding-left: 20px; } }

/* Menü grupları açılır kapanır (details/summary): başlık tıklanır bir satır, ok açıkken aşağı bakar.
   Etkin sayfanın grubu sunucuda açık gelir; kullanıcının açıp kapattıkları tarayıcıda hatırlanır (app.js). */
.sidenav details.nav-group > summary.sidenav-heading { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 10px 7px 12px; border-radius: 10px; cursor: pointer; list-style: none; user-select: none; transition: color .15s ease, background-color .15s ease; }
.sidenav details.nav-group > summary.sidenav-heading::-webkit-details-marker { display: none; }
.sidenav details.nav-group > summary.sidenav-heading > span { flex: 1 1 auto; min-width: 0; }
.sidenav details.nav-group > summary.sidenav-heading:hover { color: #C9D5CD; background: rgba(255, 255, 255, .04); }
.sidenav details.nav-group > summary.sidenav-heading:focus-visible { outline: 2px solid var(--color-nav-indicator); outline-offset: -2px; }
.sidenav .nav-chev { flex: none; opacity: .7; transform: rotate(-90deg); transition: transform .18s ease; }
.sidenav details.nav-group[open] > summary .nav-chev { transform: none; }
/* Kapalı grupta etkin sayfa varsa başlıkta küçük bir nokta görünür. */
.sidenav details.nav-group:not([open]):has(a.nav-item.is-active) > summary::before { content: ""; order: 2; width: 6px; height: 6px; border-radius: 50%; background: var(--color-nav-indicator); }
.sidenav details.nav-group[open] > a.nav-item { animation: nav-reveal .18s ease both; }
@keyframes nav-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sidenav .nav-chev { transition: none; } .sidenav details.nav-group[open] > a.nav-item { animation: none; } }
.sidenav details.nav-group { display: block; }
.sidenav details.nav-group > a.nav-item { margin-top: 2px; }
/* Üst çubuktaki çalışan sayaç göstergesi */
.timer-slot:empty { display: none; }
.timer-badge { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px 2px 10px; border: 1px solid var(--color-divider); border-radius: 999px; white-space: nowrap; font-size: 13px; }
.timer-badge a { color: inherit; text-decoration: none; }
/* "Durdur" formu rozetin altında açılır; dar ekranda ekran genişliğine yayılır. */
.timer-stop { position: relative; }
.timer-stop > summary { list-style: none; cursor: pointer; }
.timer-stop > summary::-webkit-details-marker { display: none; }
.timer-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 280px; padding: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-md); white-space: normal; text-align: left; }
.timer-note { display: inline-flex; align-items: center; gap: 8px; max-width: 420px; padding: 4px 10px; border: 1px solid var(--color-divider); border-radius: 10px; font-size: 13px; white-space: normal; }
@media (max-width: 760px) {
  .timer-pop { position: fixed; left: 12px; right: 12px; top: auto; width: auto; margin-top: 8px; }
  .timer-note { max-width: 100%; }
}
.entry-edit[open] { margin-bottom: 8px; }

/* Board: kolon WIP limiti etiketi, onay bekleyen kart rozeti ve kolon altındaki hızlı ekleme bağlantısı. */
.board-col-head .wip-limit { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-subtle); white-space: nowrap; }
.board-col-head .wip-limit.pill-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.board-card .card-pending .pill { font-size: 12px; }
.board-add { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; }
/* Gantt: öncülünden önceye çekilmiş işin bağımlılık çizgisi kırmızı çizilir. */
.gantt-links path.is-violated { stroke: var(--tone-danger-fg); stroke-width: 2; }
.gantt-links .gantt-link-head.is-violated { fill: var(--tone-danger-fg); stroke: none; }

/* Zengin metinde alt başlık (bilgi bankası makaleleri "## " ile yazar). */
.rich h4 { margin: 10px 0 4px; font-size: 14px; font-weight: 600; }
/* Katlanır kart (ör. ticket'ta "Ticket bilgilerini düzenle"): başlık satırı tıklanır. */
details.card > summary.card-head { cursor: pointer; list-style: none; }
details.card > summary.card-head::-webkit-details-marker { display: none; }
details.card > summary.card-head::after { content: "▾"; margin-left: auto; color: var(--color-text-muted); }
details.card[open] > summary.card-head::after { content: "▴"; }

/* Menü öğesindeki sayı rozeti (ör. Onaylarım'da bekleyen karar sayısı). */
.nav-item .nav-count { margin-left: 8px; padding: 0 7px; min-width: 20px; display: inline-block; text-align: center; border-radius: 999px; background: var(--color-nav-indicator); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; }

/* Bildirim tercihleri: geniş ekranda en az 480px; telefonda tablo ekrana sığar (olay metni satır kırar, iki kanal
   sütunu dar ve ortalı kalır), yana kaydırma gerekmez. */
.prefs-table { min-width: 480px; }
@media (max-width: 760px) {
  .prefs-table { min-width: 0; width: 100%; table-layout: fixed; }
  .prefs-table th, .prefs-table td { white-space: normal; overflow-wrap: anywhere; padding-left: 8px; padding-right: 8px; }
  .prefs-table th:first-child, .prefs-table td:first-child { position: static; padding-left: 16px; }
  .prefs-table th:not(:first-child), .prefs-table td:not(:first-child) { width: 76px; }
  .prefs-table th:last-child, .prefs-table td:last-child { padding-right: 12px; }
}

/* Risk listesi: masaüstünde dört sütunlu tablo. Telefonda satır karta döner: risk adı tam genişlikte, puan ve durum
   rozetleri ile işlem düğmeleri onun altında yan yana durur; yatay kaydırma gerekmez. Matris hücreleri de küçülür. */
.risk-table { min-width: 520px; }
@media (max-width: 640px) {
  .risk-table { min-width: 0; }
  .risk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .risk-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 16px; border-top: 1px solid var(--color-divider); }
  .risk-table tbody tr:first-child { border-top: 0; }
  .risk-table tbody td, .risk-table tbody td:first-child, .risk-table tbody td:last-child { display: block; padding: 0; border: 0; }
  .risk-table tbody td:first-child { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .risk-table tbody td.actions { margin-left: auto; }
  .risk-table tbody td.actions .stack { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .risk-matrix { border-spacing: 3px; }
  .risk-matrix th { padding: 2px 4px; }
  .risk-cell { width: 44px; height: 40px; }
}

/* Akış düzeltmeleri (dar ekran): süre kaydı düzenleme formu satırdan taşmasın; zaman çizelgesinde aktivite sütunu sabit kalsın. */
.wrap-any { overflow-wrap: anywhere; }
.table.sticky-first th:first-child, .table.sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface); box-shadow: 1px 0 0 var(--color-border); }
@media (max-width: 760px) {
  .table.sticky-first th:first-child, .table.sticky-first td:first-child { max-width: 46vw; overflow-wrap: anywhere; }
  details.entry-edit[open] > form { position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 30; min-width: 0 !important; max-height: 70vh; overflow-y: auto; margin: 0 !important; padding: 16px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
}
.table td.note, .table td.wrap-any { overflow-wrap: anywhere; }

/* Telefon genişliği (tur 2). "only-narrow-collapse": geniş ekranda başlığı gizli, içeriği hep açık bir <details>;
   dar ekranda app.js kapalı getirir ve başlığı aç/kapa satırı olur (aktivite listesinde süzgeç ve toplu işlem). */
details.only-narrow-collapse > summary { display: none; }
@media (max-width: 760px) {
  details.only-narrow-collapse > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-top: 1px solid var(--color-divider); color: var(--color-primary); font-weight: 500; cursor: pointer; list-style: none; }
  details.only-narrow-collapse > summary::-webkit-details-marker { display: none; }
  details.only-narrow-collapse > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
  details.only-narrow-collapse[open] > summary::before { transform: rotate(45deg); }
  /* Aktivite sayfası: durum/atanan özet kartı başlığın hemen altına gelir; öbür kartlar sırasını korur. */
  .row:has(> aside > #sure) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
  .row:has(> aside > #sure) > .grow-2.stack, .row:has(> aside > #sure) > aside.stack { display: contents; }
  .row:has(> aside > #sure) > * > * { min-width: 0; }
  .row:has(> aside > #sure) > aside > .card:first-child { order: -1; }
}

/* Onay kutusu etiketi, aynı alandaki zorunlu girdinin yıldızını almaz. */
.field:has(> :is(input, select, textarea)[required]) > label.check:not(:has(.muted))::after { content: none; }

/* Yorumdaki "@Ad Soyad" bahsetmesi */
.mention { font-weight: 600; color: var(--color-primary); background: var(--color-primary-tint); border-radius: 4px; padding: 0 3px; }

/* Gantt: iş adı sütunu yatay kaydırmada solda sabit kalır (çubuğun hangi işe ait olduğu hep görünür); dar ekranda sütun daralır. */
.gantt-name { position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 0 var(--color-border); }
@media (max-width: 760px) { .gantt-name { flex-basis: 150px; padding: 0 10px; } }

/* Backlog sprint yönetim satırı: "Sil" bağlantısı "Düzenle"/"Sprint'i başlat" özetleriyle aynı yükseklikte (32px) hizalanır. */
.sprint-manage .btn-link { height: 32px; }

/* Seçime bağlı alanlar (data-show-select): gizliyken .field/.stack düzeni öğeyi yeniden göstermesin. */
[data-show-select][hidden] { display: none; }

/* Sorgu dili yardımındaki örnekler dar ekranda satır kırar (kesilip görünmez kalmasın). */
@media (max-width: 760px) { details.disclosure p .mono, details.disclosure dl.fields .mono { white-space: normal; overflow-wrap: anywhere; } }
/* Dar ekranda Gantt / zaman çizelgesi ad sütunu: anahtar, yüzde ve sapma rozetleri gizlenir, ad en az 110px kalır
   (390px'te ad 13px'e sıkışıp "R." diye kesiliyordu). Çalışılmayan gün katmanı sütunun yeni genişliğinden başlar. */
@media (max-width: 760px) {
  .gantt-name { flex-basis: 170px; overflow: hidden; gap: 6px; }
  .gantt-row .gantt-name > .mono, .gantt-row .gantt-name > .pill, .gantt-row .gantt-name > .spacer ~ .muted:not(.nowrap) { display: none; }
  .gantt-row .gantt-name > a, .gantt-row .gantt-name > .truncate { flex: 1 0 110px; min-width: 110px; }
  .gantt-offs { left: 170px; }
}