trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/* ============================================
   Tasarım tokenları — TeamHub (23 Eylül 2026)
   Kaynak: docs/references/teamhub/index.html (son override'lar esas).
   Kurumun kayıtlı `primary_color`ı arayüzü BOYAMAZ (devir §4.1): panel eski
   renge dönmesin. Kolon ve ayar yerinde durur (PWA manifestosu okur).
   Eski adlar (`--primary`, `--border`, `--bg` …) yeni paletin takma adıdır —
   mevcut ekranlar aynı değişkenleri okumaya devam eder.
   ============================================ */
:root {
  /* TeamHub 07 — hafta kartının boyu; her kart satır içi stille kendi
     değerini verir (`calendar_placement_style`). Varsayılan en kısa kart
     (30 dk = 24 px). */
  --wk-h:         24px;
  /* Ekran ölçeği (shell.css `html { zoom }`): büyük ekranlarda arayüz Mac
     Air'deki (~1470 px) oranla büyütülür. `zoom` ekran birimlerini (vh/vw)
     de büyüttüğü için yükseklik/genişlik hesapları bu iki birimi kullanır:
     büyütme ne olursa olsun `100 * var(--vh)` tam ekran yüksekliğidir. */
  --ui-zoom:      1;
  --vh:           calc(1dvh / var(--ui-zoom));
  --vw:           calc(1vw / var(--ui-zoom));
  --mint:         #38c3a6;
  --mint-dark:    #0f5a4d;
  --mint-soft:    #dff6ef;
  --lime:         #e8f5d6;
  /* Marka tonları (Ayarlar → Görünüm → Tema rengi). Varsayılanlar tasarımın
     kendi değerleridir; kurum bir renk seçerse `BrandPalette` hepsini o
     renkten türetip `<style id="brand-theme">` ile ezer. */
  --hero-from:    #0f5a4d;
  --hero-to:      #238f7a;
  --hero-deep:    #0e594d;
  --hero-mid:     #147564;
  --hero-bright:  #2dc1a4;
  --mark-from:    #36c8aa;
  --mark-to:      #0b7562;
  --mint-text:    #0c6d5b;
  --mint-text-alt: #08705d;
  /* Markanın en açık tonları: yumuşak zeminler, üst bardaki düğmeler,
     vurgulu satırlar. Kurum rengi seçilince bunlar ve `--canvas` /
     `--workspace` de o rengin açık tonlarından türer. */
  --tint-50:      #f6fbf9;
  --tint-100:     #f3faf7;
  --tint-150:     #f2faf7;
  --tint-200:     #f0f8f5;
  --tint-250:     #edf8f4;
  --tint-300:     #e3f4f1;
  /* Tasarımın yeşil tonlu nötrleri (zemin, çizgi, gölge, bant yazısı).
     Ad = varsayılan değer; tema rengi seçilince `BrandPalette` her birini
     aynı açıklık ve göreli doygunlukla o rengin tonuna çevirir. */
  --hue-0c312a: #0c312a;
  --hue-0f2822: #0f2822;
  --hue-0f5a4d: #0f5a4d;
  --hue-14463c: #14463c;
  --hue-18362f: #18362f;
  --hue-9fe3cf: #9fe3cf;
  --hue-b8f1e4: #b8f1e4;
  --hue-c5f2e8: #c5f2e8;
  --hue-cbd7d3: #cbd7d3;
  --hue-d6e0dc: #d6e0dc;
  --hue-dfe8e4: #dfe8e4;
  --hue-e2e9e6: #e2e9e6;
  --hue-e3ebe7: #e3ebe7;
  --hue-e8eeeb: #e8eeeb;
  --hue-edf1ef: #edf1ef;
  --hue-edf2ef: #edf2ef;
  --hue-edf3f0: #edf3f0;
  --hue-eef3f1: #eef3f1;
  --hue-f0f3f1: #f0f3f1;
  --hue-f1f4f2: #f1f4f2;
  --hue-f1f5f3: #f1f5f3;
  --hue-f3f6f4: #f3f6f4;
  --hue-f5faf8: #f5faf8;
  --hue-f6f8f7: #f6f8f7;
  --hue-f6f9f7: #f6f9f7;
  --hue-f7f9f8: #f7f9f8;
  --hue-f8fbfa: #f8fbfa;
  --hue-fafcfb: #fafcfb;
  --hue-fbfdfc: #fbfdfc;
  --hue-fbfefd: #fbfefd;
  --yellow:       #ffd45f;
  --ink:          #18362f;
  --text:         #23332f;
  --muted:        #7c8985;
  --line:         #e8eeeb;
  --canvas:       #dcebea;
  --workspace:    #f7f9f8;
  --radius-lg:    22px;
  --radius-md:    16px;
  --shell-shadow: 0 20px 50px rgba(25, 76, 65, .08);

  /* Eski adlar → yeni palet. */
  --primary:      var(--mint-dark);
  --primary-soft: var(--mint-soft);
  --accent:       #e0a526;
  --danger:       #ef6b67;
  --success:      #2fae8a;
  --info:         #3b6fb0;
  --bg:           var(--workspace);
  --border:       var(--line);
  --shadow:       0 2px 0 rgba(15, 90, 77, .01);
  --shadow-soft:  0 8px 24px rgba(15, 90, 77, .055);
  --surface-soft: #f6f9f7;
  /* Görev 043: `.avatar--lead` halkası bunu okur — kartın zemini beyaz. */
  --surface:      #ffffff;
}

/* ============================================ Base body ============================================ */
body.themed {
  background: var(--bg);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
/* Tailwind preflight `button, input` yazı tipini sistemden alıyor. */
body.themed button, body.themed input, body.themed textarea, body.themed select { font-family: inherit; }

/* ============================================ Buttons ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Etiket asla bölünmez: dar sütunda ("Takip et", "Engel koy") iki satıra
     düşüp kutuyu deforme ediyordu. Daralması gereken metin değil, yanındaki
     esnek kutudur. */
  white-space: nowrap;
  border: 0;
  border-radius: 11px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  background: var(--mint);
  color: white;
  font-family: inherit;
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; filter: brightness(.97); }
.btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .icon { width: 15px; height: 15px; }
.btn.btn-sm { padding: 7px 10px; font-size: 11.5px; border-radius: 9px; }
.btn.btn-lg { padding: 12px 17px; font-size: 13.5px; border-radius: 12px; }

.btn-primary   { background: var(--mint); color: white; }
.btn-secondary { background: var(--primary-fill); color: white; }
.btn-light     { background: light-dark(var(--hue-f1f4f2), var(--dk-surface-soft)); color: light-dark(#52625c, var(--dk-text-soft)); }
.btn-light:hover { color: var(--mint-dark); }
.btn-ghost     { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { background: light-dark(var(--tint-100), var(--dk-surface-mint)); color: var(--mint-dark); }
.btn-danger    { background: light-dark(#ffebe9, var(--dk-danger-soft)); color: light-dark(#b25450, var(--dk-danger-text)); }
.btn-danger:hover { background: var(--danger); color: white; }
.btn-success   { background: var(--primary-fill); color: white; }
.btn-warning   { background: light-dark(#fff3ca, var(--dk-warning-soft)); color: light-dark(#8b6711, var(--dk-warning-text)); }
.btn-info      { background: light-dark(#e6effa, var(--dk-info-soft)); color: var(--info); }

/* Modifier utilities (Aşama 17) */
.btn-block { width: 100%; display: flex; }   /* flex korunur (icon+text gap) */
.btn-end   { margin-left: auto; }            /* flex container'da sağa iter */

/* ============================================ Form inputs ============================================ */
.input-base, .form-input {
  width: 100%;
  border: 1px solid light-dark(var(--hue-e2e9e6), var(--dk-line));
  border-radius: 11px;
  padding: 11px 13px;
  font-size: 13px;
  outline: none;
  background: light-dark(#fbfcfb, var(--dk-surface));
  font-family: inherit;
  color: var(--text);
}
.input-base:focus, .form-input:focus {
  border-color: var(--mint);
  background: light-dark(white, var(--dk-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 11%, transparent);
}

/* ============================================ Panel / Card ============================================ */
/* TeamHub kartı: 22px köşe, 20px iç boşluk, ağır gölge YOK (devir §4.1). */
.panel {
  background: light-dark(white, var(--dk-surface));
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
}
.panel-tight { padding: 14px; }

/* Sidebar, ana alan ve üst bar TeamHub kabuğuyla `shell.css`e taşındı. */

/* ============================================ Flash ============================================ */
.flash-notice, .flash-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
}
.flash-notice { color: var(--mint-dark); background: var(--mint-soft); }
.flash-alert  { color: light-dark(#a44945, var(--dk-danger-text)); background: light-dark(#ffebe9, var(--dk-danger-soft)); }

/* ========== Modal (Aşama 18 — quick actions · TeamHub ölçüleri) ==========
   Tek `turbo-frame#modal`; genişlik türe göre (devir §7): görev/not 560,
   toplantı 580, toplantı notu 640, özet 520, sohbet oluşturma 500. Hepsi
   ekrana sığar (`100vw - 32px`) ve içte kayar. */
.modal-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--hue-0c312a) 35%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  /* Yapışkan üst bar (z-index 60) ve çekmece menü modalın ÜSTÜNE çıkmasın. */
  padding: 16px; z-index: 200;
}
.modal-backdrop.active { display: flex; }

.modal {
  width: min(640px, calc(calc(100 * var(--vw)) - 32px));
  max-height: calc(calc(100 * var(--vh)) - 40px); overflow: auto;
  background: light-dark(white, var(--dk-surface)); border-radius: 22px;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--hue-0f5a4d) 24%, transparent);
  padding: 24px; border: 0;
}
.modal.summary      { width: min(520px, calc(calc(100 * var(--vw)) - 32px)); }
.modal.compact      { width: min(500px, calc(calc(100 * var(--vw)) - 32px)); }
.modal.task, .modal.note { width: min(560px, calc(calc(100 * var(--vw)) - 32px)); }
.modal.meeting      { width: min(580px, calc(calc(100 * var(--vw)) - 32px)); }
.modal.meeting-note { width: min(640px, calc(calc(100 * var(--vw)) - 32px)); }
.modal.wide  { width: min(900px, calc(calc(100 * var(--vw)) - 32px)); }
.modal.xwide { width: min(1000px, calc(calc(100 * var(--vw)) - 32px)); }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.modal-header h3 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.modal-header p { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; }
.modal-close {
  flex: none;
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 9px;
  color: var(--muted); background: light-dark(var(--hue-f3f6f4), var(--dk-surface-soft));
  font-size: 20px; line-height: 1; cursor: pointer;
}
.modal-close:hover { color: var(--mint-dark); background: var(--mint-soft); }
.modal .form-input { background: light-dark(#fbfcfb, var(--dk-surface)); min-width: 0; }
/* Dar modalda (560–640px) Tailwind ızgara hücreleri içerik genişliğine
   açılmasın — tarih girdisi ve uzun yer tutucular taşıyordu. */
.modal .grid > * { min-width: 0; }
.modal .panel { padding: 0; box-shadow: none; }
.modal label { color: light-dark(#50605a, var(--dk-text-soft)); }

/* ========== Trix / Action Text editor (Aşama 18) ========== */
trix-editor {
  min-height: 240px;
  max-height: 480px;
  overflow-y: auto;
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.65;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: light-dark(white, var(--dk-surface));
}
trix-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}
trix-toolbar .trix-button-row {
  background: light-dark(#f9fafb, var(--dk-surface));
  border-radius: 10px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

/* Görev 109 — liste işaretleri. Tailwind preflight `ol, ul { list-style: none }`
   basıyor, Trix'in kendi CSS'i yalnız `li { margin-left: 1em }` yazıyor —
   yani girinti vardı, nokta/numara yoktu. `.trix-content` hem editörü
   (`trix-editor` bu sınıfı taşır) hem görüntüyü
   (`layouts/action_text/contents/_content`) kapsar: tek yer, her Trix yüzeyi
   (toplantı notu, not, yorum, değerlendirme notu). `!important` yok — özgüllük
   (0,1,1) ve yükleme sırası yetiyor. */
.trix-content ul { list-style: disc;    padding-left: 1.4em; margin: 0.4em 0; }
.trix-content ol { list-style: decimal; padding-left: 1.6em; margin: 0.4em 0; }
.trix-content ul ul { list-style: circle; }
.trix-content ul ul ul { list-style: square; }
.trix-content li { margin-left: 0; }
.trix-content li + li { margin-top: 0.15em; }
.trix-content h1 { font-size: 1.15em; font-weight: 700; margin: 0.8em 0 0.3em; }
.trix-content blockquote { color: var(--muted); }
.trix-content a { color: var(--primary); text-decoration: underline; }

/* Görev 109 — maddeye karar: maddenin altındaki özet ve kararın çipi. */
.action-item-decisions { list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 4px; }
.action-item-decisions__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: inherit; font-size: 12px; text-decoration: none; }
.action-item-decisions__link:hover .action-item-decisions__body { color: var(--primary); text-decoration: underline; }
.action-item-decisions__date { color: var(--muted); white-space: nowrap; }
.action-item-decisions__body { font-weight: 600; min-width: 0; }
.action-item-decisions__owner { color: var(--muted); }
.decision-item-chip { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ========== Badges (Aşama 19 — workflow states · TeamHub durum hapları) ==========
   Referansın `.status-pill` tonları: nane (işlemde/tamam), sarı (bekleyen),
   kırmızı (gecikme/red), mor (paylaşılan/talep), gri (kapalı). */
.badge {
  display: inline-block; padding: 4px 8px; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; line-height: 1.35;
  white-space: nowrap; vertical-align: middle;
}
.badge-gray   { background: light-dark(var(--hue-edf1ef), var(--dk-surface-soft)); color: light-dark(#6c7a76, var(--dk-muted)); }
.badge-blue   { background: var(--mint-soft); color: light-dark(var(--mint-text-alt), var(--dk-mint-dark)); }
.badge-cyan   { background: light-dark(var(--tint-300), var(--dk-surface-mint)); color: light-dark(var(--mint-text), var(--dk-mint-dark)); }
.badge-amber  { background: light-dark(#fff3ca, var(--dk-warning-soft)); color: light-dark(#996d10, var(--dk-warning-text)); }
.badge-green  { background: var(--lime); color: light-dark(#3f5a1f, var(--dk-lime-text)); }
.badge-red    { background: light-dark(#ffebe9, var(--dk-danger-soft)); color: light-dark(#b25450, var(--dk-danger-text)); }
/* Görev 010: "Havuzda" durumu — taslaktan (gri) ayrışsın diye ayrı renk. */
.badge-purple { background: light-dark(#ecebf8, var(--dk-info-soft)); color: light-dark(#4b4488, var(--dk-info-text)); }
/* Görev 016: "Talep" durumu — henüz kabul edilmemiş, başka departmandan gelen iş. */
.badge-indigo { background: light-dark(#e6effa, var(--dk-info-soft)); color: light-dark(#3b6fb0, var(--dk-info-text)); }

/* ========== Bildirimler (görev 011 — ADR 0020) ==========
   Zil, arama kutusu ve menü rozeti TeamHub üst barıyla `shell.css`te. */

/* ── Avatar (görev 036 §3) ─────────────────────────────────────────────────
   Baş harfler (`User#initials`) + kurumun tema renginin saydamlığı. Fotoğraf
   YOK; ton kişiye göre değişir ama palet tektir (`--primary`) — ısı haritası
   ve proje sağlığındaki kuralın aynısı (görev 028/029). */
.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--md { width: 32px; height: 32px; font-size: 12px; }
.avatar--lg { width: 40px; height: 40px; font-size: 14px; }

/* Bildirim listesi satırı — button_to formu; tıklama okundu işaretler.
   TeamHub (devir §7): "Bana Gelenler" satırı — ikon · metin · zaman · Aç. */
.notification-row-form { display: block; margin: 0; }
.notification-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 4px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background .15s ease;
}
.notification-row-form:last-child .notification-row { border-bottom: 0; }
.notification-row:hover { background: light-dark(var(--hue-f8fbfa), var(--dk-surface-soft)); }
.notification-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notification-row-title { font-size: 12.5px; font-weight: 600; color: light-dark(#52625c, var(--dk-text-soft)); overflow-wrap: anywhere; }
.notification-row.unread .notification-row-title { font-weight: 700; color: var(--ink); }
.notification-row-body { font-size: 11px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.notification-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.notification-row-time { font-size: 10.5px; color: var(--muted); }

/* ───── Görev zaman çizelgesi (görev 013 / ADR 0022) ─────
   Tek akış: sistem olayları kısa satır, yorumlar kart. */
.timeline { display: flex; flex-direction: column; gap: 10px; }

.timeline-event {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  padding-left: 2px;
}
.timeline-event-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--border);
}
.timeline-event-text { flex: 1; }
.timeline-event-time { flex: none; font-size: 12px; white-space: nowrap; }

.comment-card {
  background: light-dark(white, var(--dk-surface));
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  padding: 12px 14px;
}
.comment-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.comment-card-meta { font-size: 12px; color: var(--muted); }
.comment-card-actions { display: inline-flex; align-items: center; gap: 4px; }
.comment-card-actions .inline { display: inline; }
.comment-card-body { font-size: 14px; color: var(--text); line-height: 1.6; }
.comment-card-body p { margin: 0 0 6px; }
.comment-card-edit { margin-top: 10px; }

/* Bahsedilen kişi — yorum gövdesinde vurgulanır. */
.mention {
  background: rgba(37, 99, 235, 0.10);
  color: var(--primary);
  border-radius: 6px;
  padding: 0 4px;
  font-weight: 600;
}

/* `@` yazınca açılan kişi seçici. */
.comment-form { position: relative; }
.mention-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: light-dark(white, var(--dk-surface));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.mention-menu-item {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.mention-menu-item:hover,
.mention-menu-item.active { background: rgba(37, 99, 235, 0.08); color: var(--primary); }

/* ───── Ek dosyalar (görev 014 / ADR 0022 §5.4) ─────
   Görev panelinde ve yorum kartında aynı satır biçimi. */
.attachment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attachment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: light-dark(white, var(--dk-surface));
}
.attachment-name { color: var(--primary); font-weight: 600; text-decoration: none; }
.attachment-name:hover { text-decoration: underline; }
.attachment-meta { flex: 1; color: var(--muted); font-size: 12px; }
.attachment-row .inline { display: inline; }
/* Kaynağı yazan satır (görev Dosyalar modalı): ad + künye + kaynak etiketi alt alta. */
.attachment-row--sourced { align-items: center; }
.attachment-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.attachment-row__main .attachment-name { overflow-wrap: anywhere; }
.attachment-row__main .attachment-meta { flex: none; }
/* Dosyanın kaynağı etiketi (`shared/_attachment_origin`) — marka tonları, sabit renk yok. */
.file-source { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); white-space: nowrap; }
.file-source--comment, .file-source--chat { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.file-source--field { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border: 1px solid var(--line); }
.file-source--revision { color: var(--ink); background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.file-source__step { color: var(--ink); font-size: 12.5px; }

/* ───── Görev puanları (görev 014 / ADR 0021) ───── */
.score-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.score-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.score-value {
  flex: none;
  font-weight: 700;
  color: var(--primary);
  min-width: 34px;
}
.score-scorer { flex: none; color: var(--text); }
.score-note { flex: 1; color: var(--muted); }
.score-time { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ───── Takipçiler (görev 018 / ADR 0022) ─────
   Avatar = baş harfler; renk tek kaynaktan (--primary) gelir ki tema
   değişince liste de değişsin. */
.watcher-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.watcher-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: light-dark(white, var(--dk-surface));
  font-size: 13px;
}
/* Avatar görev 036'da ortaklaştı (`.avatar`) — `.watcher-avatar` kalktı. */
.watcher-name { color: var(--text); }
.watcher-source { color: var(--muted); font-size: 11px; }

/* TeamHub 06 · ADR 0030 — katılım paneli: düğmeler dar ekranda satıra sarar,
   özet sayıları yan yana akar. */
.rsvp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rsvp-actions form { margin: 0; }
.rsvp-summary { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.rsvp-summary strong { color: var(--ink); }

/* ───── Kontrol listesi (görev 018 / ADR 0022) ───── */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: light-dark(white, var(--dk-surface));
}
.checklist-row .inline { display: inline; }
.checklist-title { flex: 1; color: var(--text); }
.checklist-row.is-done .checklist-title { color: var(--muted); text-decoration: line-through; }
.checklist-meta { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }
.checklist-mark { flex: none; font-size: 14px; line-height: 1; color: var(--muted); }

/* İnce ilerleme çubuğu — görev kartında ve görev detayında aynı biçim. */
.checklist-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
.checklist-bar-track {
  flex: 1;
  min-width: 60px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.checklist-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); }

/* ============================================ Veri tablosu (liste ekranları) ============================================
   Görev listeleri kart yığınıydı: kayıt başına ~88px, 900px'lik ekranda 4-5
   satır görünüyordu. Tablo düzeninde satır ~42px — aynı ekranda üç katı kayıt.
   Dar ekranda (<=820px) tablo bloklara açılır; sütun başlığını `data-label`
   verir, bu yüzden hücreye `data-label` yazmak ZORUNLU (başlıksız kalmasın).

   `.data-panel`'e `overflow: hidden` VERİLMEZ — sticky başlığı kırar
   (overflow bir kaydırma bağlamı yaratır, th viewport'a değil panele yapışır).
   Alt köşeleri son satırın hücreleri yuvarlar. */
.data-panel {
  background: light-dark(white, var(--dk-surface));
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: light-dark(var(--hue-f6f8f7), var(--dk-surface-soft));
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s ease; }
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.data-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }
.data-table tbody tr:hover { background: light-dark(var(--hue-f8fbfa), var(--dk-surface-soft)); }
.data-table td { padding: 14px; color: light-dark(#465650, var(--dk-text-soft)); vertical-align: middle; }
.data-table .checklist-bar { min-width: 92px; }

.cell-title { min-width: 220px; }
.cell-title a { font-weight: 700; font-size: 13px; color: light-dark(#263b34, var(--dk-text)); text-decoration: none; }
.cell-title a:hover { text-decoration: underline; }
.cell-sub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.cell-muted { color: var(--muted); }
/* Görev 036 §3: hücrede avatar + ad. */
.cell-person { display: inline-flex; align-items: center; gap: 7px; }
.cell-danger { color: var(--danger); font-weight: 600; }
.cell-nowrap { white-space: nowrap; }
/* Görev 027 — rapor hücreleri: rakamlar sabit genişlikli, sağa hizalı; sütun
   aşağı doğru okunabilsin. Renk kodu YOK (kırmızı-yeşil karne yapılmaz). */
.data-table th.cell-num,
.data-table td.cell-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.data-table td.cell-num { color: var(--text); }
.data-table td.cell-num.is-blank { color: var(--muted); }
.cell-actions { text-align: right; white-space: nowrap; }
.cell-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Durumun yanındaki ek rozetler (revize · engelli · talep reddi): satır içinde
   boşluk bırakır; `.cell-badges` gibi aralığı kendisi veren kutuda kenar boşluğu
   SIFIRDIR — yoksa alt satıra düşen rozet içeriden başlayıp kayık görünüyordu. */
.badge--follow { margin-left: 6px; }
.cell-badges > .badge--follow { margin-left: 0; }

.data-empty { padding: 52px 20px; text-align: center; color: var(--muted); font-size: 14px; }

/* Sekme şeridi — eskiden her görünümde tekrarlanan Tailwind zinciriydi. */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--border); }
.tab-item {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  white-space: nowrap;
}
.tab-item:hover { color: var(--text); }
.tab-item.active { color: var(--ink); border-bottom-color: var(--mint-dark); font-weight: 700; }

/* Süzgeç şeridi: sekmelerle aynı panelde, tek satır. */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.list-toolbar select,
.list-toolbar .form-input {
  width: auto;
  min-width: 148px;
  height: 34px;
  padding: 4px 10px;
  font-size: 13px;
}
.toolbar-spacer { flex: 1 1 auto; }
.toolbar-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.toolbar-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.toolbar-note { padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }

@media (max-width: 820px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tbody tr { padding: 12px 14px; }
  .data-table td { padding: 2px 0; }
  .data-table td:empty { display: none; }
  .data-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 11px; }
  .data-table td.cell-title::before { content: none; }
  .data-table .cell-actions { text-align: left; margin-top: 8px; }
}

/* ============================================ İki sütunlu detay düzeni ============================================
   Görev detayı tek sütunda (max-w-3xl) uzayıp gidiyordu: en çok kullanılan
   işlem düğmeleri sayfanın ortasında kalıyor, geniş ekranda iki yan boş
   duruyordu. Solda işin kendisi, sağda künye + işlemler (yapışkan). */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}
/* Başlık şeridi: solda ad + künye satırı, sağda yönetim düğmeleri. */
.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.detail-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.detail-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
@media (max-width: 1100px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { position: static; }
}

/* Sağ paneldeki künye: Durum / Öncelik / Termin / Atanan */
.meta-list { display: flex; flex-direction: column; gap: 9px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.meta-value { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; }
.panel-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 10px; }

/* ============================================ Kayıt ekranı tasarım dili ============================================
   Kaynak: kalisan_purchase'ın talep/sipariş detay ekranları (Emre'nin referansı).
   Oradaki Bootstrap sınıfları DEĞİL, yapısı alındı: üstte gradyanlı hero
   şeridi, her bölümün başında ikon karesi + başlık + açıklayıcı alt satır,
   bilgiler sıkışık liste yerine ızgarada kartçıklar.

   Gradyan `--primary` üzerine saydam katmanlarla kurulur (sabit renk YOK) —
   kurum tema rengini değiştirince hero da kendiliğinden değişir. */

/* TeamHub (devir §7): kayıt hero'su da sayfa hero'sunun dilindedir — koyu
   yeşil gradyan + köşede halka; ağır gölge yok. */
.record-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 0;
  padding: 22px 24px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(120deg, var(--hero-from), var(--hero-to));
  box-shadow: none;
}
.record-hero::after {
  content: ""; position: absolute; width: 200px; height: 200px; right: -60px; top: -90px;
  border: 26px solid rgba(255, 255, 255, .07); border-radius: 50%; pointer-events: none;
}
.record-hero > * { position: relative; z-index: 1; }
.record-hero__icon {
  flex: 0 0 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.record-hero__body { min-width: 0; flex: 1 1 auto; }
.record-hero__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hue-b8f1e4);
}
.record-hero__titles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.record-hero h1 {
  margin: 0;
  font-size: clamp(19px, calc(1.8 * var(--vw)), 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: anywhere;
}
.record-hero__sub { margin: 7px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.76); }
.record-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  white-space: nowrap;
}
.record-hero__pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.record-hero__aside {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: column;
  min-width: 132px;
}
.record-hero__aside span { font-size: 11px; color: rgba(255, 255, 255, 0.68); }
.record-hero__aside strong { margin-top: 3px; font-size: 15px; font-weight: 700; }
.record-hero__aside small { font-size: 11px; color: rgba(255, 255, 255, 0.68); }
.record-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

@media (max-width: 720px) {
  .record-hero { flex-wrap: wrap; gap: 12px; padding: 18px; }
  .record-hero__aside { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* Bölüm başlığı: ikon karesi + başlık + ne işe yaradığını söyleyen alt satır. */
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-head__icon {
  flex: 0 0 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
}
.section-head h2, .section-head h3 { margin: 0; font-size: 15px; font-weight: 750; color: var(--text); }
.section-head p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.section-head__aside { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Zaten justify-between bir satırın İÇİNDE duran başlık (sağda düğme/rozet var). */
.section-head--inline { margin-bottom: 0; }

/* Künye ızgarası: tek sütuna sıkışmış etiket/değer satırları yerine kartçıklar. */
.meta-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.meta-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid light-dark(#edf0f5, var(--dk-line));
}
.meta-card__icon {
  flex: 0 0 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: light-dark(#fff, var(--dk-surface));
  border: 1px solid var(--border);
  color: var(--muted);
}
.meta-card__body { min-width: 0; }
.meta-card__body span { display: block; font-size: 11px; color: var(--muted); }
.meta-card__body strong { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }

/* Liste ekranlarındaki durum sayaçları. */
.stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.stat-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 14px;
  background: light-dark(white, var(--dk-surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.stat-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.stat-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset, var(--shadow-soft); }
.stat-card__icon {
  flex: 0 0 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
}
.stat-card small { display: block; font-size: 11.5px; color: var(--muted); }
.stat-card strong { display: block; font-size: 20px; font-weight: 750; color: var(--text); line-height: 1.15; }

/* Sekmedeki sayı rozeti. */
.tab-item { display: inline-flex; align-items: center; gap: 7px; }
.tab-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.tab-item.active .tab-count { background: var(--primary-soft); color: var(--primary); }

/* hidden utility (Stimulus toggle) */
.hidden { display: none !important; }


/* ============================================ "İşleme Al" uyarısı ============================================
   Görev atandı ama kullanıcı henüz işleme almadı: iş sessizce beklemesin diye
   detay sayfasının en üstünde uyarı şeridi, listede satır vurgusu. Renk
   `--accent` (uyarı) — hata değil, bir adım eksik. */
.task-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  border-left: 4px solid var(--accent);
  background: light-dark(#fffbeb, var(--dk-warning-soft));
}
.task-callout__body { flex: 1 1 260px; min-width: 0; }
.task-callout__body strong { display: block; font-size: 14px; color: light-dark(#92400e, var(--dk-warning-text)); }
.task-callout__body p { margin: 5px 0 0; font-size: 13px; color: light-dark(#a16207, var(--dk-warning-text)); line-height: 1.55; }
.task-callout__action { flex: none; }
/* TeamHub 04: kişisel işte iki düğme yan yana ("Tamamla" + ikincil "İşleme Al");
   dar ekranda satıra sığmazsa alt satıra iner. */
div.task-callout__action { display: flex; flex-wrap: wrap; gap: 8px; }

/* Listede işleme alınmayı bekleyen satır. */
.data-table tr.row-attention { background: light-dark(#fffbeb, var(--dk-warning-soft)); }
.data-table tr.row-attention td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ============================================ Panel (görev 028) ============================================
   Panel role göre üç ayrı düzenle açılır ama YENİ bir kart/rozet/tipografi
   sistemi getirmez: KPI şeridi `.stat-card`, tablolar `.data-table`, kutular
   `.panel` + `.section-head`, künye `.meta-grid` (görev dosyası §4). Buradaki
   sınıflar yalnız panele özgü üç şey için: ızgara, kısa liste ve ısı hücresi. */
.dash-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

/* Panel kutularındaki kısa liste (talep, engel, todo, toplantı). Liste
   ekranının yerini almaz — panel bir giriş kapısıdır, en fazla 5 satır. */
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.dash-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-list a { font-size: 13.5px; font-weight: 650; color: var(--text); text-decoration: none; }
.dash-list a:hover { text-decoration: underline; }
.dash-list small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.dash-empty { padding: 22px 4px; margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.dash-more { font-size: 12px; color: var(--primary); text-decoration: none; white-space: nowrap; }
.dash-more:hover { text-decoration: underline; }

/* Departman dağılımı çubukları — ilerleme çubuğu kontrol listesininkiyle aynı
   (`.checklist-bar-track` / `-fill`), burada yalnız başlık satırı var. */
.dash-bars { display: flex; flex-direction: column; gap: 12px; }
.dash-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--muted);
}
.dash-bar-head strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Kişi kartları (sorumlu paneli). Avatar takipçi rozetiyle aynı biçim. */
.people-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.person-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: light-dark(white, var(--dk-surface));
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.person-card:hover { border-color: var(--primary); transform: translateY(-1px); text-decoration: none; }
/* Avatar görev 036'da ortaklaştı (`.avatar`) — `.person-card__avatar` kalktı. */
.person-card__name { display: block; font-size: 13px; font-weight: 650; color: var(--text); }
.person-card__counts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.person-card__counts b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Isı haritası hücresi: yoğunluk NÖTRdür — kurumun tema rengi saydamlaşarak
   koyulaşır. Kırmızı alarm estetiği yok, satırlar metriğe göre sıralanmaz
   (rapor gibi: takip aracı, lider tablosu değil). */
.heat-table td { padding: 9px 18px; }
.heat-cell {
  display: inline-block;
  min-width: 40px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ── Projeler (görev 029 / Faz 6) ──────────────────────────────────────────
   Proje kartı yeni bir kart sistemi DEĞİL: `.panel` üzerine oturur, ilerleme
   çubuğu kontrol listesininkiyle aynıdır (`.checklist-bar-track`). Sağlık
   rozeti nötrdür — koyuluğu kurumun tema renginin saydamlığıdır
   (`ProjectsHelper::HEALTH_ALPHA`), kırmızı-yeşil karne yoktur. */
.project-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.project-sort-hint { color: var(--muted); font-size: 12px; }
.project-people { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.project-people__label { color: var(--muted); font-size: 12px; font-weight: 600; }
.person-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.person-trigger:hover { border-color: var(--mint); }
.person-trigger__name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-clear { font-size: 12px; color: var(--muted); }
.person-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 74px; width: 300px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .14); }
.person-search { padding: 6px 4px; }
.person-list { max-height: 260px; overflow-y: auto; }
.person-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink); font-size: 13px; text-decoration: none; }
.person-option:hover { background: var(--surface-soft); text-decoration: none; }
.person-option.active { background: var(--mint-soft); color: var(--mint-dark); font-weight: 700; }
.person-option .count { min-width: 20px; padding: 1px 6px; border-radius: 6px; background: var(--surface-soft); font-size: 11px; text-align: center; color: var(--muted); }
.person-empty { margin: 0; padding: 10px; color: var(--muted); font-size: 12px; }
.project-chat { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.project-chat__head { display: flex; align-items: center; gap: 12px; }
.project-chat__head h2 { margin: 0; font-size: 16px; }
.project-chat__head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.project-chat__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.people-picker { position: relative; }
.people-picker__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.people-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--mint-soft); color: var(--mint-dark); font-size: 12px; font-weight: 600; }
.people-chip__remove { width: 18px; height: 18px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.people-chip__remove:hover { background: color-mix(in srgb, var(--mint-dark) 14%, transparent); }
.people-picker__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.people-picker__department { flex: 1 1 180px; min-width: 0; }
.people-picker__search { position: relative; flex: 2 1 220px; min-width: 0; }
.people-picker__results { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 28px rgba(0, 0, 0, .14); }
.people-picker__results button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.people-picker__results button:hover { background: var(--surface-soft); }
.people-picker__results small { color: var(--muted); font-size: 11px; }
.project-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.project-card { display: flex; flex-direction: column; gap: 12px; }
.project-card__head { display: flex; align-items: flex-start; gap: 10px; }
.project-card__dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 999px; }
.project-card__titles { min-width: 0; flex: 1; }
.project-card__name { font-size: 14.5px; font-weight: 700; color: var(--text); text-decoration: none; }
.project-card__name:hover { text-decoration: underline; }
.project-card__sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.project-card__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--muted); }
.project-health { color: var(--text); border: 1px solid var(--border); }
.project-group { padding: 10px 0; border-bottom: 1px solid var(--border); }
.project-group:last-child { border-bottom: 0; padding-bottom: 0; }
.project-badge {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Görev 042 / Faz 9: proje ÇİPİ — tek partial (`shared/_project_chip`).
   `.project-card__dot` kuralının kardeşi: renk yalnız NOKTADADIR, metne
   uygulanmaz (rastgele renk üstüne metin basılmaz — erişilebilirlik).
   Çip her listede aynıdır; ikinci bir proje rozeti çizilmez. */
.project-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 180px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: light-dark(white, var(--dk-surface));
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
  text-decoration: none;
  vertical-align: bottom;
}
.project-chip:hover { border-color: var(--muted); }
.project-chip__dot { flex: none; width: 8px; height: 8px; border-radius: 999px; }
.project-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Görev 042: "Projeye göre grupla" başlığı (`/tasks?group=project`).
   Liste tasarımı değişmez — yalnız araya bir başlık satırı girer. */
.table-group th {
  padding: 8px 14px;
  background: var(--surface-soft);
  font-size: 11.5px;
  font-weight: 650;
  color: var(--muted);
  text-align: left;
}

/* ── Takvim (görev 033 / Faz 7) ────────────────────────────────────────────
   Ay ızgarası yeni bir kart sistemi DEĞİL: `.data-panel` üzerine oturur.
   Öğe rengi NÖTRdür — "benim işim" kurumun tema rengiyle belirginleşir,
   kapsamdaki diğerleri soluk kalır; geciken iş kendi gününde durur ve yalnız
   bir rozet taşır (kırmızı alarm estetiği yok, panel/rapor deseni). */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  padding: 0 0 1px;
  background: var(--border);
}
.cal-head {
  padding: 10px;
  background: light-dark(var(--hue-f6f9f7), var(--dk-surface-soft));
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cal-cell {
  min-height: 112px;
  padding: 10px;
  background: light-dark(white, var(--dk-surface));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* TeamHub (referansın `.calendar-cell`): bugün NUMARASI nane kutu, seçili gün
   açık zemin; ay dışı günler soluk. */
.cal-cell.is-outside { background: light-dark(var(--hue-fafcfb), var(--dk-surface)); }
.cal-cell.is-outside .cal-cell__day { opacity: .35; }
.cal-cell.is-today .cal-cell__day { color: #fff; background: var(--mint); }
.cal-cell.is-selected { background: light-dark(var(--tint-50), var(--dk-surface-mint)); }
.cal-cell__day {
  align-self: flex-start;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: light-dark(#64736e, var(--dk-muted));
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.cal-cell__day:hover { background: var(--mint-soft); color: var(--mint-dark); text-decoration: none; }
.cal-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 7px;
  border: 0;
  background: light-dark(var(--hue-f1f5f3), var(--dk-surface-soft));
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}
.cal-item:hover { box-shadow: inset 0 0 0 1px var(--mint); text-decoration: none; }
/* "Benim işim" belirgin, kapsamdaki diğerleri soluk (görev dosyası §1).
   TeamHub tonları: görev nane, toplantı lime, proje sarı. */
.cal-item.is-mine { color: var(--mint-dark); background: var(--mint-soft); }
.cal-item--meeting.is-mine { color: light-dark(#3f5a1f, var(--dk-lime-text)); background: var(--lime); }
/* Görev 073 / Y3: odanın teslim günü hücrede çip + "Termin" etiketidir; çip
   kendi bağlantısını taşıdığı için satır bir `div`dir (iç içe `a` yok). */
.cal-item--project { background: light-dark(#fff3c7, var(--dk-warning-soft)); color: light-dark(#8b6711, var(--dk-warning-text)); }
/* Kilometre taşı satırın İŞARETİDİR — ayrı bir liste ya da renk karnesi değil. */
.cal-item__milestone { flex: none; display: inline-flex; color: var(--primary); }
.cal-item.is-milestone { box-shadow: inset 3px 0 0 var(--mint-dark); }
/* TeamHub 06: reddedilen davet soluk ve üstü çizili — "Katılmıyorum" etiketi
   anlamı metinle de taşır. */
.cal-item.is-declined { background: transparent; color: var(--muted); }
.cal-item.is-declined .cal-item__text { text-decoration: line-through; }
.cal-item__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Görev 066: saatli toplantının hücredeki saati ("09:30 Başlık"). */
.cal-item__time { flex: none; font-weight: 700; color: var(--text); }
.cal-day__time { color: var(--text); }
.cal-item__flag {
  flex: none;
  padding: 0 4px;
  border-radius: 5px;
  background: light-dark(#ffebe9, var(--dk-danger-soft));
  color: light-dark(#b25450, var(--dk-danger-text));
  font-size: 10px;
  font-weight: 700;
}
.cal-more { font-size: 11px; color: var(--muted); text-decoration: none; }
.cal-more:hover { color: var(--primary); }
.cal-feed-note { margin: 0; padding: 0 18px 16px; font-size: 12px; color: var(--muted); }

/* ─── TeamHub 07 — takvim araç çubuğu ve hafta görünümü ───────────────────
   Referansın `.wk` saat ızgarası (saatte 48 px — `CalendarHelper::
   CALENDAR_HOUR_PX` ile aynı). Kart konumu satır içi stilden gelir
   (`calendar_placement_style`); çakışan kartlar kolon payına göre yan yana.
   Dar ekranda (≤ 768 px) yedi okunmaz sütun yerine gün seçici + ajanda. */
.cal-toolbar__nav { display: inline-flex; align-items: center; gap: 6px; }
.cal-toolbar__label { min-width: 150px; color: var(--ink); font-size: 13px; text-align: center; }
.cal-toolbar .seg a { padding: 6px 12px; font-size: 11px; }

.wk-view { padding: 0 12px 12px; }
.wk-view > .data-empty { margin: 10px 0 0; }
.wk { margin-top: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: light-dark(#fff, var(--dk-surface)); }
.wk-head, .wk-allday, .wk-body { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.wk-head { border-bottom: 1px solid var(--border); background: light-dark(var(--hue-f6f9f7), var(--dk-surface-soft)); }
.wk-head__day { padding: 9px 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; }
.wk-head__day b { display: block; margin-top: 2px; color: var(--ink); font-size: 18px; }
.wk-head__day:hover { color: var(--mint-dark); text-decoration: none; }
.wk-head__day.today { background: var(--mint-soft); }
.wk-head__day.today b { color: var(--mint-dark); }
.wk-head__day.selected { box-shadow: inset 0 -3px 0 var(--mint); }
.wk-allday { border-bottom: 1px solid var(--border); }
.wk-allday__label { padding: 8px 6px 0 0; color: var(--muted); font-size: 10px; font-weight: 700; text-align: right; }
.wk-allday__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 34px; padding: 5px 4px; border-left: 1px solid var(--border); }
.wk-allday__cell.today { background: light-dark(var(--hue-fbfefd), var(--dk-surface)); }
.wk-allday__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-allday__item .project-chip { max-width: 100%; }
.wk-body { max-height: 620px; overflow: auto; }
.wk-hours > div { height: 48px; padding: 3px 8px 0 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; text-align: right; box-sizing: border-box; }
.wk-col { position: relative; border-left: 1px solid var(--border); background: repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent 48px); }
.wk-col.today { background-color: light-dark(var(--hue-fbfefd), var(--dk-surface)); }
.wk-ev {
  position: absolute; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
  height: var(--wk-h);
  padding: 2px 5px; border-radius: 7px;
  color: var(--muted); background: light-dark(var(--hue-f1f5f3), var(--dk-surface-soft)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
  font-size: 10px; font-weight: 700; line-height: 1.3;
}
/* Okunurluk: üzerine gelince ya da klavye odağı içerideyken kart gün
   sütununu kaplar ve içeriği kadar uzar (en az kendi boyu) — kısa kartta da
   tam başlık, saat, katılım ve tıklanabilir proje çipi okunur. Yerleşim
   hesabı (konum/boy) değişmez; bu yalnız geçici bir görünüm. */
.wk-ev:hover, .wk-ev:focus-within {
  z-index: 3; overflow: visible;
  left: 2px !important; width: calc(100% - 4px) !important;
  height: auto; min-height: var(--wk-h);
  box-shadow: inset 0 0 0 1px var(--mint), 0 6px 16px color-mix(in srgb, var(--hue-0f5a4d) 16%, transparent);
}
.wk-ev:hover .wk-ev__title, .wk-ev:focus-within .wk-ev__title,
.wk-ev:hover small, .wk-ev:focus-within small { white-space: normal; overflow-wrap: anywhere; }
.wk-ev__link { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: inherit; text-decoration: none; }
.wk-ev__link:hover { color: inherit; text-decoration: none; }
.wk-ev__link:focus-visible { outline: 2px solid var(--mint-dark); outline-offset: 1px; border-radius: 4px; }
.wk-ev .project-chip { align-self: flex-start; flex: none; max-width: 100%; padding: 0 5px; font-size: 9px; line-height: 13px; }
.wk-ev .project-chip__dot { width: 6px; height: 6px; }
.wk-ev.is-mine { color: light-dark(#3f5a1f, var(--dk-lime-text)); background: var(--lime); }
.wk-ev.is-declined { color: var(--muted); background: light-dark(var(--hue-f7f9f8), var(--dk-surface-soft)); }
.wk-ev.is-declined .wk-ev__title { text-decoration: line-through; }
.wk-ev__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ev small { overflow: hidden; font-weight: 500; line-height: 1.2; opacity: .85; text-overflow: ellipsis; white-space: nowrap; }
.wk-ev__flag { color: light-dark(#b25450, var(--dk-danger-text)); }
.wk-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger, #d9534f); pointer-events: none; }

.wk-picker, .wk-agenda { display: none; }
.wk-picker { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.wk-pick {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0; border-radius: 12px; color: var(--muted);
  font-size: 11px; font-weight: 700; text-decoration: none;
}
.wk-pick strong { color: var(--ink); font-size: 16px; }
.wk-pick.today strong { color: var(--mint-dark); }
.wk-pick.selected { color: #fff; background: var(--mint); }
.wk-pick.selected strong { color: #fff; }
.wk-pick i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.wk-pick:focus-visible { outline: 2px solid var(--mint-dark); outline-offset: 2px; }
.wk-agenda h2 { margin: 14px 0 8px; color: var(--ink); font-size: 14px; }
.wk-agenda ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wk-agenda li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 12px; background: light-dark(var(--hue-f6f9f7), var(--dk-surface-soft)); }
.wk-agenda time { color: var(--text); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.wk-agenda li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.wk-agenda li small { color: var(--muted); font-size: 11px; }
.wk-agenda__link { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.wk-agenda__link.is-declined { color: var(--muted); text-decoration: line-through; }

@media (max-width: 768px) {
  .wk { display: none; }
  .wk-picker { display: grid; }
  .wk-agenda { display: block; }
  .cal-toolbar__label { min-width: 0; }
}

@media (max-width: 900px) {
  .cal-cell { min-height: 78px; }
  .cal-item__text { max-width: 100%; }
}

/* ── Kanban panosu (görev 036 / Faz 8) ─────────────────────────────────────
   Pano yeni bir kart sistemi DEĞİL: sütun `.data-panel`in içinde durur, kart
   `.panel`in küçük kardeşidir, rozetler ve ilerleme çubuğu listedekilerin
   aynısı (`.badge`, `.checklist-bar`). Sürükle-bırak yoktur (durum değişimi
   `Tasks::Transition` kapısından geçer), bu yüzden "bırakma alanı" görseli de
   yoktur — sütun yalnız bir başlık ve bir kart yığınıdır. */
.board {
  display: grid;
  grid-auto-flow: column;
  /* Altı açık durum yan yana durur; dar ekranda pano yatay kayar (kanban'ın
     doğası). Sütun bundan daha dar olursa kart başlığı iki satıra düşüyor. */
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  padding: 14px 18px 18px;
  overflow-x: auto;
  align-items: start;
}
/* TeamHub (devir §7 · referansın `.kanban-column` / `.work-card`): sütun açık
   yeşil-gri zemin, kart beyaz ve hafif gölgeli; etiketler üstte, kişi ve
   eylemler altta. Kişisel "Görevlerim", yönetim panosu ve proje odası aynı
   kartı çizer (`admin/tasks/_task_card`). */
.board-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 390px;
  padding: 14px;
  border-radius: 17px;
  background: light-dark(var(--hue-edf3f0), var(--dk-surface-soft));
  border: 0;
}
.board-column__head { display: flex; align-items: center; gap: 8px; }
.board-column__count, .count-badge {
  margin-left: auto;
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 7px;
  background: var(--mint-soft);
  color: var(--mint-dark);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.board-column__body { display: flex; flex-direction: column; gap: 10px; }
.board-empty { margin: 0; padding: 16px 4px; text-align: center; color: var(--muted); font-size: 12px; }
.board-more { font-size: 12px; color: var(--mint-dark); font-weight: 700; text-decoration: none; }
.board-more:hover { text-decoration: underline; }

.board-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 13px;
  background: light-dark(white, var(--dk-surface));
  border: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--hue-14463c) 4%, transparent);
}
.work-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.work-card__tags:empty { display: none; }
.work-card__tags .badge { margin-left: 0 !important; }
.work-card__title { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; }
.board-card__title { font-size: 12.5px; font-weight: 700; color: light-dark(#30413b, var(--dk-text)); text-decoration: none; overflow-wrap: anywhere; }
.board-card__title:hover { color: var(--mint-dark); text-decoration: underline; text-underline-offset: 3px; }
.board-card__sub { font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }
.board-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.work-card__meta { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; }
.board-card .checklist-bar { font-size: 10.5px; color: var(--muted); }
.board-card .checklist-bar-fill { background: var(--mint); }
.board-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.board-card__person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.board-card__person > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-card__meta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.board-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.board-card__actions .inline, .board-card__actions form { display: inline; margin: 0; }
.th-tag.muted { color: light-dark(#667570, var(--dk-muted)); background: light-dark(var(--hue-f1f4f2), var(--dk-surface-soft)); }

/* Kişisel "Görevlerim" panosu: referansın iki sütunu. */
.th-kanban { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 22px 22px; align-items: start; }
.kanban-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 390px; padding: 14px; border-radius: 17px; background: light-dark(var(--hue-edf3f0), var(--dk-surface-soft)); }
.kanban-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; color: var(--ink); font-size: 12.5px; font-weight: 700; }
.kanban-title .count-badge { margin-left: 0; }
@media (max-width: 980px) {
  .th-kanban { grid-template-columns: minmax(0, 1fr); padding: 0 14px 16px; }
  .kanban-column { min-height: 0; }
}

/* Liste / Pano anahtarı — sekme şeridiyle aynı dilde, ama bir süzgeç değil
   bir GÖRÜNÜM seçicisi olduğu için ayrı durur. */
.view-switch { display: flex; gap: 4px; padding: 10px 18px 0; }
.view-switch__item {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: light-dark(white, var(--dk-surface));
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.view-switch__item:hover { color: var(--text); text-decoration: none; }
.view-switch__item.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

/* ── Proje ekibi (görev 039 / ADR 0023) ─────────────────────────────────────
   Avatar dizisi: künyedeki "Ekip" şeridi. Sorumlu (lead) tema renginde bir
   halka taşır — renk yine `--primary`, ayrı bir palet yok. */
.avatar-stack { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.avatar--lead { box-shadow: 0 0 0 2px var(--surface, light-dark(#fff, var(--dk-surface))), 0 0 0 4px var(--primary); }
.avatar-stack .avatar-more {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: var(--muted);
  background: var(--primary-soft);
}
.project-tabs { margin: 0 0 16px; }
.member-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: 0; }
.member-row__name { font-weight: 600; font-size: 14px; }
.member-row__meta { font-size: 12px; color: var(--muted); }
.member-row__actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.member-row__actions form { display: inline-flex; gap: 6px; align-items: center; }

/* Working area: existing palette, compact sections and contextual forms. */
.workspace-page { max-width: 1320px; margin-inline: auto; }
.workspace-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.workspace-main, .workspace-aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.workspace-main > *, .workspace-aside > * { min-width: 0; }
.workspace-section { display: block; scroll-margin-top: 24px; }
.workspace-toolbar, .workspace-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.workspace-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.workspace-section-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.workspace-section-head .hint { margin-top: 4px; }
.workspace-section-head > .btn { flex-shrink: 0; }
.workspace-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.workspace-nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.workspace-nav a:hover, .workspace-nav a:focus-visible { color: var(--primary); background: var(--surface-soft); }
.workspace-context { padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.workspace-form-actions { padding-top: 16px; border-top: 1px solid var(--border); }
.workspace-prose { overflow-wrap: anywhere; }
.workspace-disclosure { margin-top: 12px; }
.workspace-disclosure > summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 600; }
.workspace-disclosure[open] > summary { margin-bottom: 12px; }
.workspace-more { position: relative; margin-top: 0; margin-left: auto; }
.workspace-more > summary { font-size: 13px; }
.workspace-more__actions { position: absolute; right: 0; top: 100%; z-index: 10; display: flex; flex-direction: column; gap: 8px; min-width: 200px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px var(--border); }
.workspace-more__actions .btn, .workspace-more__actions form { width: 100%; }
.workspace-aside .watcher-list { flex-direction: column; align-items: flex-start; }
.workspace-aside .panel > .flex { flex-wrap: wrap; }
.workspace-aside .panel { margin-top: 0 !important; }
.modal .modal-header { position: sticky; top: -22px; z-index: 2; background: var(--surface); padding-block: 12px; border-bottom: 1px solid var(--border); }
.modal .workspace-form-actions { position: sticky; bottom: -22px; background: var(--surface); padding-block: 16px; z-index: 1; }
@media (max-width: 1100px) {
  .workspace-layout { grid-template-columns: minmax(0, 1fr); }
  .workspace-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .workspace-aside { display: flex; }
  .workspace-section-head { flex-wrap: wrap; gap: 10px; }
  .workspace-nav a { padding: 8px; }
  .workspace-more { margin-left: 0; }
  .workspace-more__actions { left: 0; right: auto; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(calc(100 * var(--vh)) - 20px); padding: 16px; border-radius: 16px; }
  .modal .modal-header { top: -16px; }
  .modal .workspace-form-actions { bottom: -16px; }
}
.workspace-page .hint, .modal .hint { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.workspace-context strong { font-size: 14px; }
.workspace-page h1, .workspace-context { overflow-wrap: anywhere; }
/* A narrow device can have a wider document because of the existing app shell.
   Dialogs must follow the device viewport, independently of that document. */
.modal-backdrop { width: calc(100 * var(--vw)); height: calc(100 * var(--vh)); }

/* Project workspace: one content hierarchy across the room's tabs. */
.project-workspace { min-width: 0; }  /* diğer sayfalar gibi kenar çubuğuna hizalı (ortalanmaz) */
.project-workspace .record-hero__body { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.project-workspace .record-hero__titles { margin: 0; }
.project-workspace .record-hero__sub { margin: 0; }
.project-workspace .record-hero { padding: 20px; gap: 16px; }
.project-workspace .record-hero__actions { flex-wrap: wrap; }
.project-workspace .topbar { margin-block: 20px; }
.project-workspace .topbar h2 { margin: 0; font-size: 19px; font-weight: 700; }
.project-workspace .hint { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.project-workspace .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-workspace .detail-side { position: static; }
.project-workspace .project-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.project-workspace .project-tabs .tab-item { flex-shrink: 0; }
.project-more { position: relative; margin: 0; }
.project-more .workspace-more__actions { text-align: left; }
.project-filter-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.project-filter-field { flex: 1 1 155px; min-width: 0; }
.project-filter-search { flex-grow: 2; }
.project-filter-field .form-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.project-description { margin-top: 12px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.project-section-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.project-composer { margin-block: 20px; }
.project-composer-form { display: grid; grid-template-columns: minmax(160px, 2fr) repeat(2, minmax(135px, 1fr)) auto; gap: 14px; align-items: end; }
.project-composer-form > * { min-width: 0; }
.project-composer-wide { grid-column: 1 / -1; }
.project-composer-form > .btn { width: auto; }
.project-member-composer { grid-template-columns: minmax(200px, 2fr) minmax(140px, 1fr) auto; }
.project-member-role { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.project-member-role .form-input { width: auto; min-width: 150px; height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.project-pool > summary { cursor: pointer; margin: 0; }
.project-pool[open] > summary { margin-bottom: 12px; }
.project-file-row { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(180px, 1fr); gap: 8px 24px; align-items: start; }
.project-file-name { overflow-wrap: anywhere; }
.project-file-source { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--muted); }
/* Kaynak etiketinin kendisi (`.file-source*`) ortak stilde — görev Dosyalar modalıyla aynı. */
.file-source__target { color: var(--ink); font-weight: 500; }
.file-source__target:hover { color: var(--primary); text-decoration: underline; }
.file-source__sep { color: var(--muted); }
.file-source__step { color: var(--ink); }
.project-discussion-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.project-table-scroll { overflow-x: auto; max-width: 100%; }
.project-note-form > h2 { display: none; }
@media (max-width: 1100px) {
  .project-composer-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-composer-title { grid-column: 1 / -1; }
  .project-member-composer { grid-template-columns: minmax(160px, 2fr) minmax(120px, 1fr) auto; }
}
@media (max-width: 640px) {
  .project-composer-form, .project-member-composer, .project-file-row { grid-template-columns: minmax(0, 1fr); }
  .project-workspace .member-row { flex-wrap: wrap; }
  .project-workspace .member-row__actions { margin-left: 0; flex-wrap: wrap; }
  .project-workspace .record-hero__titles h1 { overflow-wrap: anywhere; }
}

@media (min-width: 1200px) {
  .project-workspace .meta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.project-workspace .board-card__foot { flex-wrap: wrap; gap: 8px; }
.project-workspace .board-card__person { overflow-wrap: anywhere; max-width: 100%; }
.project-workspace .board-card__meta { margin-left: auto; }

.project-workspace .project-card__head { display: grid; grid-template-columns: 10px minmax(0, 1fr); }
.project-workspace .project-card__head > .cell-badges { grid-column: 2; flex-wrap: wrap; }
.project-workspace .project-card__name { overflow-wrap: anywhere; }
.project-filter-field .form-input { width: 100%; max-width: none; }

/* Personal todo collections: restrained color accents, shared application theme. */
:root {
  --tone-accent: var(--primary);
  --tone-soft: var(--surface);
  /* Görev 115 — not kartının kağıt rengi (`.note-card` altında tonla
     yeniden hesaplanır; kökteki değer yalnız varsayılandır). */
  --tone-paper: var(--surface);
  --todo-blue: #4b79b9;
  --todo-blue-soft: #edf4ff;
  --todo-green: #448267;
  --todo-green-soft: #edf7f1;
  --todo-amber: #ac822c;
  --todo-amber-soft: #fff8e6;
  --todo-rose: #b56b83;
  --todo-rose-soft: #fff0f4;
  --todo-violet: #8565b3;
  --todo-violet-soft: #f4effb;
  /* Görev 115 — palet 6 → 10 (Keep'in sage / peach / blossom / chalk
     karşılıkları). Mevcut altı rengin değeri DEĞİŞMEDİ. */
  --todo-teal: #2f8a8a;
  --todo-teal-soft: #eaf7f6;
  --todo-orange: #c4702e;
  --todo-orange-soft: #fff1e6;
  --todo-pink: #c2408f;
  --todo-pink-soft: #fdeef7;
  --todo-slate: #5f6b7a;
  --todo-slate-soft: #eef1f4;
}
.todo-workspace { max-width: 1320px; margin-inline: auto; min-width: 0; }
.todo-workspace .hint, .todo-list-workspace .hint, .todo-files .hint { font-size: 12px; line-height: 1.6; color: var(--muted); }
.todo-workspace h2 { font-size: 17px; font-weight: 700; }
/* Görev 103 — kart tonu TEK kaynaktan: todo listesi de sticky not da aynı
   sınıfı okur (`CardColor#color_tone_class`). Eski `.tone--*` adı
   BIRAKILMADI: iki ad iki kaynak demektir. */
.tone--default { --tone-accent: var(--primary);
  --tone-soft: var(--surface); }
.tone--blue { --tone-accent: var(--todo-blue);
  --tone-soft: var(--todo-blue-soft); }
.tone--green { --tone-accent: var(--todo-green);
  --tone-soft: var(--todo-green-soft); }
.tone--amber { --tone-accent: var(--todo-amber);
  --tone-soft: var(--todo-amber-soft); }
.tone--rose { --tone-accent: var(--todo-rose);
  --tone-soft: var(--todo-rose-soft); }
.tone--violet { --tone-accent: var(--todo-violet);
  --tone-soft: var(--todo-violet-soft); }
.tone--teal { --tone-accent: var(--todo-teal);
  --tone-soft: var(--todo-teal-soft); }
.tone--orange { --tone-accent: var(--todo-orange);
  --tone-soft: var(--todo-orange-soft); }
.tone--pink { --tone-accent: var(--todo-pink);
  --tone-soft: var(--todo-pink-soft); }
.tone--slate { --tone-accent: var(--todo-slate);
  --tone-soft: var(--todo-slate-soft); }
.todo-category-bar, .todo-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.todo-category-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.todo-toolbar { justify-content: space-between; }
.todo-toolbar-filters { display: flex; flex-wrap: wrap; flex: 1; gap: 8px; min-width: 0; }
.todo-toolbar-filters .form-input { flex: 1 1 140px; width: auto; min-width: 0; }
/* Görev 102 — Keep düzeni: solda ray, sağda MASONRY kart duvarı.
   Izgara değil `columns`: Keep'in görüntüsü "sabit genişlik, içeriğe göre
   yükseklik"tir ve `grid` bunu satır satır hizalayıp boşluk bırakıyordu. */
.todo-keep { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.todo-keep__main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* TeamHub (devir §7): ray beyaz bir panel (Bana Gelenler'in süzgeç paneli
   dili); seçili satır nane. */
.todo-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 18px; padding: 16px; border-radius: 18px; background: light-dark(#fff, var(--dk-surface)); }
.todo-rail__section { min-width: 0; }
/* Ray başlığı `.sidebar-section-title`i ÖDÜNÇ ALMAZ: o sınıf koyu sidebar
   için yazılmış (açık renk metin) ve beyaz sayfada görünmüyordu. */
.todo-rail__title { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding-left: 10px; }
.todo-rail__items { list-style: none; margin: 4px 0 0; padding: 0; }
.todo-rail__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 10px; color: light-dark(#667570, var(--dk-muted)); font-size: 12.5px; text-decoration: none; }
.todo-rail__item:hover { background: light-dark(var(--tint-100), var(--dk-surface-mint)); color: var(--mint-dark); text-decoration: none; }
.todo-rail__item.active { background: var(--mint-soft); color: var(--mint-dark); font-weight: 700; }
.todo-rail__label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.todo-rail__categories { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.todo-rail__categories:not(:has(li)) { display: none; }
.todo-rail__add { display: inline-block; margin: 6px 0 0 10px; font-size: 12px; color: var(--primary); text-decoration: none; }
.todo-rail__add:hover { text-decoration: underline; }
.todo-wall__title { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }

/* Keep'in giriş kutusu. */
.keep-composer { padding: 10px 14px; }
.keep-composer__bar { display: flex; align-items: center; gap: 8px; }
.keep-composer__trigger { flex: 1; min-width: 0; padding: 8px 4px; border: 0; background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: text; }
.keep-composer__links { display: flex; gap: 4px; flex: none; }
.keep-composer__form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 6px; }
/* Alanlar formun İÇİNDE: aralık formun kendisinde (yoksa inputlar yapışık durur). */
.keep-composer__form > form { display: flex; flex-direction: column; gap: 12px; }
.todo-item-rows { display: flex; flex-direction: column; gap: 6px; }
.todo-item-row { display: flex; align-items: center; gap: 10px; }
.todo-item-row .form-input { flex: 1 1 auto; }
.todo-item-row__box { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 4px; opacity: .6; }
.todo-item-rows__hint { margin: 4px 0 0 26px; font-size: 12px; }
.keep-composer__form .todo-item-rows__hint { margin-top: -6px; }
.keep-composer__title { font-weight: 600; }
.keep-composer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.keep-composer__row .form-input { flex: 0 1 200px; }
.keep-composer__actions { display: flex; justify-content: flex-end; gap: 8px; }

.todo-card-grid { columns: 260px; column-gap: 16px; }
.todo-card-grid > * { break-inside: avoid; margin-bottom: 16px; }
/* Görev 096 — kartın TAMAMI seçilen renge boyanır (Emre'nin referansı):
   gövde yumuşak ton, çerçeve aynı tonun bir koyusu. Eski hali yalnız üstte
   5px bir çizgiydi, gövde beyazdı — renk seçimi görünmüyordu.
   `tone--default`de `--tone-soft` zaten `--surface`tır, yani renksiz
   kart eskisi gibi beyaz kalır. */
.todo-list-card { background: var(--tone-soft); border: 1px solid color-mix(in srgb, var(--tone-accent) 32%, var(--surface)); border-radius: 16px; padding: 18px; min-width: 0; box-shadow: 0 5px 18px var(--border); }
.tone--default.todo-list-card { border-color: var(--border); }
/* Kart boyanınca içerideki ayraçlar da tona uymalı, yoksa gri çizgi sırıtır. */
.todo-list-card .todo-card-footer { border-top-color: color-mix(in srgb, var(--tone-accent) 22%, transparent); }
.todo-card-eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; color: var(--muted); }
.todo-list-card h2 { font-size: 18px; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.todo-list-card h2 a { color: var(--text); text-decoration: none; }
.todo-card-description { font-size: 12px; color: var(--muted); margin-top: 8px; overflow-wrap: anywhere; }
.todo-card-preview { display: flex; flex-direction: column; gap: 12px; padding-block: 16px; margin: 0; list-style: none; }
.todo-card-preview li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; }
.todo-card-preview li a { overflow-wrap: anywhere; min-width: 0; }
.todo-check { display: flex; flex: none; align-items: center; justify-content: center; width: 19px; height: 19px; border: 1.5px solid var(--muted); border-radius: 5px; background: var(--surface); cursor: pointer; color: var(--surface); }
.todo-check.is-done { background: var(--primary-fill); border-color: var(--primary-fill); }
.todo-check:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.todo-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; font-size: 11px; color: var(--muted); }
/* Görev 102 — kart altı eylem şeridi: hover ya da klavye odağında görünür,
   yeri her zaman ayrılmıştır (kart hover'da zıplamasın). */
.todo-card-actions { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.12s ease; }
.todo-list-card:hover .todo-card-actions, .todo-list-card:focus-within .todo-card-actions { opacity: 1; }
.todo-card-swatches { display: flex; gap: 4px; }
.todo-card-swatches .todo-color-option { width: 16px; height: 16px; padding: 0; }
.todo-card-swatches .todo-color-option.active { border-color: var(--text); border-width: 2px; }
.todo-card-action { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.todo-card-action:hover, .todo-card-action.active { color: var(--primary); }
.todo-card-completed { font-size: 12px; }
.todo-card-completed > summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.todo-card-completed .todo-card-preview { padding-block: 6px 0; }
.todo-card-count { flex: none; }
/* ─── Görev 110 — Keep kartı: kapak, raptiye, şerit, hatırlatıcı çipi ───── */
.todo-list-card { position: relative; }
.todo-list-card--cover { padding-top: 0; overflow: hidden; }
.todo-card-cover { display: block; margin: 0 -18px 14px; line-height: 0; }
.todo-card-cover img { width: 100%; max-height: 220px; object-fit: cover; }
.todo-card-cover--workspace { margin: 0 0 14px; border-radius: 12px; overflow: hidden; }
.todo-card-pin-form { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; }
.todo-card-pin { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.todo-card-pin:hover, .todo-card-pin:focus-visible { color: var(--text); opacity: 1; outline: none; }
.todo-card-pin.active { color: var(--text); opacity: 1; }
.todo-list-card:hover .todo-card-pin, .todo-list-card:focus-within .todo-card-pin { opacity: 1; }
.todo-list-card:not(.todo-list-card--cover) .todo-card-eyebrow { padding-right: 30px; }
.todo-card-reminder { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 10px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tone-accent) 14%, var(--surface)); font-size: 11.5px; color: var(--text); }
.todo-card-reminder.is-past { opacity: .55; text-decoration: line-through; }
.todo-card-actions .chat-menu { position: relative; }
.todo-card-actions .todo-card-swatches { display: flex; gap: 6px; min-width: 0; padding: 8px; }
.todo-card-actions .todo-card-swatches.hidden { display: none; }
.todo-card-actions .todo-card-swatches .todo-color-option { width: 20px; height: 20px; }
.todo-card-remind { min-width: 220px; padding: 10px; }
.todo-card-remind form { display: flex; flex-direction: column; gap: 6px; }
.todo-card-remind__actions { display: flex; justify-content: flex-end; }
.todo-card-cover-limit { position: absolute; left: 12px; right: 12px; bottom: 44px; }
.todo-card-action { width: 28px; height: 28px; border-radius: 999px; }
.todo-card-action:hover, .todo-card-action:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); outline: none; }
.todo-card-count { opacity: .75; }
/* Dokunmatikte hover yok: şerit ve raptiye daima görünür. */
@media (hover: none) {
  .todo-card-actions, .todo-card-pin { opacity: 1; }
}
.keep-composer__icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 999px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.keep-composer__icon:hover, .keep-composer__icon:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); outline: none; }
.todo-rail__archive { display: flex; align-items: center; gap: 6px; justify-content: flex-start; margin-top: 6px; }

/* ─── Görev 111 / ADR 0026 — paylaşılan kart ve paylaşım modalı ─────────── */
.todo-card-people { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 10px; font-size: 11.5px; color: var(--muted); }
/* TeamHub 08 — departman paylaşımı etiketi (üyeler tek tek listelenmez). */
.todo-card-dept { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--text); font-size: 10.5px; font-weight: 700; }
.todo-card-dept span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-card-shared-by { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-card-avatars { margin-left: auto; gap: 0; }
.todo-card-avatars .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--tone-soft, var(--surface)); }
.todo-card-avatars .avatar:first-child { margin-left: 0; }
.todo-share { display: flex; flex-direction: column; gap: 12px; }
.todo-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.todo-share__row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.todo-share__name { flex: 1; min-width: 0; font-size: 13.5px; }
.todo-share__add { display: flex; gap: 8px; align-items: center; }
.todo-share__add .form-input { flex: 1; min-width: 0; }
.todo-share__title { margin: 14px 0 4px; color: var(--ink); font-size: 13px; }
.todo-share__source { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--mint-soft); color: var(--text); font-size: 12.5px; }
.todo-share__icon { display: inline-flex; width: 28px; justify-content: center; color: var(--muted); }

/* Görev 102: "Dosyalanmamış" kartı duvarın TAMAMINI kaplar — içinde tam
   todo satırları var (proje çipi, rozetler, termin) ve tek sütuna
   sığdırılsa okunmaz olurdu. */
/* Tam genişlik kart: sütunların SON kartlarının alt boşluğu (`margin-bottom`)
   sütun sınırında kesilir — uzun kart bu karta yapışıyordu. Boşluğu kart
   kendi üstünde taşır. */
.todo-list-card--unfiled { column-span: all; margin-top: 16px; }

/* ─── Görev 103 — sticky note duvarı ─────────────────────────────────────
   Todo kartıyla AYNI tonu okur (`.tone--*` → `--tone-soft` / `--tone-accent`);
   ikinci bir palet yok. Duvar yine masonry (`columns`). */
.note-wall { columns: 280px; column-gap: 16px; }
.note-wall > * { break-inside: avoid; margin-bottom: 16px; }
.note-card { background: var(--tone-soft); border: 1px solid color-mix(in srgb, var(--tone-accent) 32%, var(--surface)); border-radius: 16px; padding: 16px; min-width: 0; box-shadow: 0 5px 18px var(--border); }
.tone--default.note-card { border-color: var(--border); }
.note-card__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; color: var(--muted); }
.note-card h2 { font-size: 16px; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.note-card h2 a { color: var(--text); text-decoration: none; }
.note-card h2 a:hover { text-decoration: underline; }
.note-card__excerpt { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.note-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.note-card__tag { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tone-accent) 14%, transparent); color: var(--muted); font-size: 11px; text-decoration: none; }
.note-card__tag:hover { color: var(--primary); }
.note-card__chip { margin-top: 8px; }
.note-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--tone-accent) 22%, transparent); font-size: 11px; color: var(--muted); }
.note-card__actions { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.12s ease; }
.note-card:hover .note-card__actions, .note-card:focus-within .note-card__actions { opacity: 1; }
.note-card__meta { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.todo-workspace-empty { text-align: center; padding: 30px 20px; color: var(--muted); font-size: 13px; }
.todo-workspace-empty p { margin-block: 12px 20px; }
.todo-inbox > h2 { margin-bottom: 4px; }
.todo-inbox > .hint { margin-bottom: 14px; }
/* Görev 097 — renk seçici yuvarlak noktalar (Emre'nin referansı). Etiket
   metni `sr-only`dir: ekran okuyucu ve `title` okur, ekranda renk konuşur. */
.todo-colors { display: block; }
.todo-colors legend { margin-bottom: 8px; }
.todo-colors__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.todo-color-option { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: var(--tone-soft); border: 1.5px solid color-mix(in srgb, var(--tone-accent) 55%, var(--surface)); cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; }
.todo-color-option:hover { transform: scale(1.1); }
/* Seçili nokta koyu bir halka alır — referanstaki işaret. */
.todo-color-option:has(input:checked) { border-color: var(--text); border-width: 2.5px; }
.todo-color-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.todo-check-label { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.todo-list-context { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--tone-soft); border-left: 4px solid var(--tone-accent); padding: 12px; border-radius: 8px; margin-bottom: 20px; }
.todo-list-context p { font-size: 13px; margin-top: 8px; white-space: pre-line; overflow-wrap: anywhere; }
.todo-list-context > a { flex-shrink: 0; }
.todo-inline-add { display: flex; flex-direction: column; gap: 8px; margin-block: 16px 24px; }
.todo-inline-add__row { display: flex; align-items: center; gap: 10px; }
.todo-inline-add__row > .form-input:first-child { flex: 1 1 auto; min-width: 0; }
.todo-inline-add__section { flex: 0 0 220px; width: 220px; }
.todo-inline-add__extras { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; }
.todo-attach-toggle summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 8px; border-radius: 999px; }
.todo-attach-toggle summary::-webkit-details-marker { display: none; }
.todo-attach-toggle summary:hover, .todo-attach-toggle[open] summary { color: var(--text); background: var(--tone-soft); }
.todo-attach-toggle[open] { flex: 1 1 260px; }
.todo-attach-toggle .form-input { margin-top: 6px; width: 100%; }
.todo-files > .hint { margin: 4px 0 10px; }
.todo-inline-add .form-label { display: block; margin-bottom: 5px; font-size: 12px; }
.todo-list-sections { display: flex; flex-direction: column; gap: 20px; }
.todo-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.todo-section-head h3, .todo-files h3 { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.todo-section-head details { margin: 0; }
.todo-section-edit { display: flex; gap: 8px; margin-top: 10px; }
.todo-section-edit .form-input { min-width: 0; }
.todo-list-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.todo-list-item > div { flex: 1; min-width: 0; }
.todo-item-title { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.todo-done { text-decoration: line-through; color: var(--muted); }
.todo-completed { margin-top: 20px; }
.todo-files { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.todo-files .attachment-name { overflow-wrap: anywhere; min-width: 0; }
.todo-files .attachment-row { flex-wrap: wrap; }
@media (max-width: 760px) {
  .todo-toolbar-filters { flex-basis: 100%; }
  /* Görev 102: dar ekranda ray duvarın ÜSTÜNE iner ve yatay kayar. */
  .todo-keep { grid-template-columns: minmax(0, 1fr); }
  .todo-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .todo-rail__items { display: flex; flex-wrap: wrap; gap: 4px; }
  .todo-inline-add__row { flex-wrap: wrap; }
  .todo-inline-add__row > .form-input:first-child { flex-basis: 100%; }
  .todo-inline-add__section { flex: 1 1 auto; width: auto; }
  .todo-section-head { flex-wrap: wrap; }
  .todo-list-context { flex-wrap: wrap; }
}

.todo-card-add { display: flex; gap: 6px; margin-bottom: 14px; }
.todo-card-add .form-input { min-width: 0; font-size: 12px; }

/* Task workspace: one navigation row, progressive filters, readable work. */
.task-workspace { width: 100%; min-width: 0; max-width: 1680px; margin: 0 auto; }
.task-workspace .hint { font-size: 12px; line-height: 1.6; color: var(--muted); }
/* TeamHub (devir §7): başlık bir SAYFA HERO'sudur — koyu yeşil gradyan,
   eylemler sağda, sayfa içi gezinme (Görevlerim · Ekibin · Engelli ·
   Şablonlar) hero'nun altında. */
.task-workspace-header {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 20px;
  margin: 0 0 20px; padding: 22px 24px;
  border-radius: var(--radius-lg); color: #fff;
  background: linear-gradient(120deg, var(--hero-from), var(--hero-to));
}
.task-workspace-header::after { content: ""; position: absolute; width: 200px; height: 200px; right: -60px; top: -90px; border: 26px solid rgba(255,255,255,.07); border-radius: 50%; pointer-events: none; }
.task-workspace-copy { position: relative; z-index: 1; min-width: 0; }
.task-workspace-header h1 { margin: 0 0 5px; font-size: 21px; font-weight: 700; letter-spacing: -.5px; color: #fff; }
.task-workspace-header p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.5; }
.task-workspace-eyebrow { display: block; margin-bottom: 5px; font-size: 11.5px; font-weight: 600; color: var(--hue-b8f1e4); }
.task-workspace-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.task-workspace-actions .btn-primary { color: var(--mint-dark); background: light-dark(#fff, var(--dk-surface)); }
.task-workspace-actions .btn-light { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); }

.task-workspace-panel { min-width: 0; overflow: hidden; }
.task-status-tabs { display: flex; gap: 18px; padding: 0 22px; overflow-x: auto; border-bottom: 1px solid light-dark(var(--hue-dfe8e4), var(--dk-line)); }
.task-status-tab { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 16px 2px 13px; border-bottom: 2.5px solid transparent; text-decoration: none; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.task-status-tab:hover { color: var(--ink); text-decoration: none; }
.task-status-tab.active { color: var(--ink); border-color: var(--mint-dark); }
.task-status-tab.active .tab-count { background: var(--primary-soft); color: var(--primary); }
.task-filter-form.list-toolbar { display: block; padding: 20px 22px 0; border: 0; background: var(--surface); }
.task-filter-form .form-input { width: 100%; min-width: 0; max-width: none; }
.task-search-row { display: flex; align-items: center; gap: 8px; }
.task-search-field { flex: 1; min-width: 140px; }
.task-view-switch { padding: 3px; margin-left: 12px; border-radius: 10px; background: var(--surface-soft); border: 1px solid var(--border); }
.task-view-switch .view-switch__item { padding: 8px 13px; }
.task-advanced-filters { margin-top: 14px; }
.task-advanced-filters summary { display: flex; align-items: center; gap: 7px; width: fit-content; cursor: pointer; font-weight: 650; font-size: 12px; color: var(--text); padding: 4px 0; }
.task-advanced-filters summary::after { content: '⌄'; margin-left: 6px; }
.task-advanced-filters[open] summary::after { content: '⌃'; }
.task-advanced-filters summary .hint { font-weight: 400; margin-left: 6px; }
.task-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 12px 0 4px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.task-filter-grid .form-label { display: block; font-size: 11px; margin-bottom: 5px; }
.task-filter-grid > .btn { justify-self: end; }
.task-filter-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; align-self: center; font-size: 12px; }
.task-filter-flags label { display: inline-flex; gap: 6px; align-items: center; }
.task-filter-flags input { accent-color: var(--primary); }
.task-focus-row, .task-applied-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 22px; }
.task-focus-label { color: var(--muted); font-size: 11px; margin-right: 3px; }
.task-focus-chip { padding: 8px 12px; border: 0; border-radius: 9px; font-size: 11px; font-weight: 700; color: light-dark(#71807b, var(--dk-muted)); text-decoration: none; background: light-dark(var(--hue-f1f5f3), var(--dk-surface-soft)); }
.task-focus-chip:hover, .task-focus-chip.active { color: var(--mint-dark); background: var(--mint-soft); text-decoration: none; }
.task-applied-filters { padding-top: 0; }
.task-filter-chip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; overflow-wrap: anywhere; padding: 5px 9px; color: var(--primary); font-size: 11px; background: var(--primary-soft); border-radius: 7px; text-decoration: none; }
.task-filter-chip span { font-size: 15px; }
.task-results-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border); padding: 17px 22px; }
.task-results-heading > div { display: flex; align-items: baseline; gap: 10px; }
.task-results-heading h2 { font-weight: 700; font-size: 14px; margin: 0; }
.task-workspace .data-table { table-layout: fixed; font-size: 12px; }
.task-workspace .data-table th, .task-workspace .data-table td { padding-left: 14px; padding-right: 14px; }
.task-workspace .data-table th:first-child { width: 30%; }
.task-workspace .data-table th:last-child { width: 200px; }
.task-workspace .data-table .cell-title > a { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.task-workspace .cell-sub { font-size: 11px; overflow-wrap: anywhere; }
.task-workspace .cell-person { align-items: flex-start; overflow-wrap: anywhere; white-space: normal; }
.task-workspace .cell-person .avatar { flex-shrink: 0; }
.task-workspace .cell-badges { gap: 5px; }
.task-workspace .cell-actions .btn { margin: 3px 0; }
.task-workspace .toolbar-note { margin: 0; padding: 0 22px 14px; background: var(--surface); font-size: 12px; }
.task-workspace .board { padding: 0 18px 20px; grid-auto-columns: minmax(280px, 1fr); gap: 14px; }
.task-workspace .board-column { padding: 12px; border-color: var(--border); }
.task-workspace .board-column__head { padding-bottom: 8px; }
.task-workspace .board-card { padding: 14px; gap: 10px; box-shadow: none; }
.task-workspace .board-card:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); }
.task-workspace .board-card__title { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.task-workspace .board-card__foot { flex-wrap: wrap; }
.task-workspace .board-card__person { overflow-wrap: anywhere; max-width: 100%; }
.task-workspace .board-card__meta { margin-left: auto; }
.task-workspace .board-card > .task-preview-button { align-self: flex-start; }
.task-board-note { padding: 0 22px 14px; color: var(--muted); font-size: 11px; margin: 0; }
.task-workspace-footer { padding: 14px 22px; border-top: 1px solid var(--border); font-size: 12px; color: var(--primary); }
.task-preview { display: flex; flex-direction: column; gap: 22px; }
.task-preview-context { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-preview-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px; background: var(--surface-soft); border-radius: 12px; }
.task-preview-facts dt { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.task-preview-facts dd { font-size: 13px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.task-preview h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.task-preview-description { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.task-preview-block { padding: 14px; border-left: 3px solid var(--accent); background: var(--surface-soft); font-size: 13px; }
.task-preview-checklist { list-style: none; padding: 0; margin: 10px 0 0; }
.task-preview-checklist li { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--border); padding: 9px 0; font-size: 13px; }
.task-preview-check { color: var(--muted); }
.task-preview-check.is-done { color: var(--success); }
.task-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
@media (max-width: 1200px) {
  .task-workspace-header { align-items: flex-start; }
  .task-workspace .data-table { table-layout: auto; }
  .task-workspace .data-table th:first-child { width: auto; }
  .task-workspace .data-table th, .task-workspace .data-table td { padding: 12px 8px; }
}
@media (max-width: 1000px) {
  .task-workspace-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .task-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .task-filter-form.list-toolbar { padding: 16px 14px 0; }
  .task-status-tabs { padding: 0 10px; }
  .task-search-row { flex-wrap: wrap; }
  .task-view-switch { margin-left: 0; }
  .task-advanced-filters summary .hint { display: none; }
  .task-filter-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .task-workspace .data-table td { padding: 3px 0; }
  .task-focus-row, .task-applied-filters, .task-results-heading { padding-left: 14px; padding-right: 14px; }
  .task-preview-facts { grid-template-columns: minmax(0, 1fr); }
  .task-preview-footer { flex-direction: column; align-items: stretch; gap: 10px; }
}

.task-workspace .data-table td.cell-danger { color: var(--danger); }
@media (max-width: 1100px) {
  .task-workspace .data-table thead { display: none; }
  .task-workspace .data-table, .task-workspace .data-table tbody, .task-workspace .data-table tr, .task-workspace .data-table td { display: block; width: 100%; }
  .task-workspace .data-table tbody tr { padding: 14px 18px; }
  .task-workspace .data-table td { padding: 3px 0; }
  .task-workspace .data-table td:empty { display: none; }
  .task-workspace .data-table td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); font-size: 11px; }
  .task-workspace .data-table .cell-actions { text-align: left; margin-top: 8px; }
  .task-workspace .data-table td.cell-title { margin-bottom: 8px; }
  .task-workspace .data-table .cell-person { display: inline-flex; vertical-align: middle; align-items: center; }
  .task-workspace .data-table .table-group th { display: block; padding: 4px 0; }
}

.task-board-controls { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 18px; padding-bottom: 12px; }
.task-board-controls .task-board-note { padding-bottom: 0; }

/* Dashboard: actionable work first, scoped to the existing role layouts. */
.dashboard-workspace { max-width: 1520px; min-width: 0; margin: 0 auto; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin: 8px 0 22px; }
.dashboard-header h1 { margin: 8px 0 6px; font-size: 28px; letter-spacing: -.5px; font-weight: 750; }
.dashboard-header p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; }
.dashboard-context { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); }
.dashboard-context > span { background: var(--primary-soft); color: var(--primary); border-radius: 6px; padding: 4px 7px; font-weight: 650; }
.dashboard-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.dashboard-jump-links { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 22px; border-bottom: 1px solid var(--border); padding: 0 0 12px; }
.dashboard-jump-links a { color: var(--muted); font-size: 12px; text-decoration: none; font-weight: 600; }
.dashboard-jump-links a:hover { color: var(--primary); }
.dashboard-workspace .stat-row { gap: 12px; margin-bottom: 24px; }
.dashboard-workspace .stat-card { position: relative; min-width: 0; padding: 19px 16px; align-items: flex-start; gap: 12px; box-shadow: none; }
.dashboard-workspace .stat-card__icon { flex: 0 0 30px; height: 30px; border-radius: 9px; }
.dashboard-workspace .stat-card__icon svg { width: 16px; height: 16px; }
.dashboard-workspace .stat-card strong { font-size: 29px; letter-spacing: -.6px; margin-top: 8px; }
.dashboard-workspace .stat-card small { font-size: 11px; line-height: 1.4; }
.dashboard-workspace .panel { min-width: 0; padding: 20px; box-shadow: var(--shadow-soft); }
.dashboard-section { margin-bottom: 26px; scroll-margin-top: 20px; }
.dashboard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.dashboard-section-heading h2 { font-size: 15px; font-weight: 700; margin: 0; }
.dashboard-section-heading p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 4px 0 0; }
.dashboard-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dashboard-team-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dashboard-workspace .section-head { margin-bottom: 16px; gap: 10px; }
.dashboard-workspace .section-head__icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; }
.dashboard-workspace .section-head h3 { font-size: 13px; line-height: 1.4; }
.dashboard-workspace .section-head p { font-size: 11px; line-height: 1.6; margin-top: 3px; }
.dashboard-workspace .section-head__aside { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dashboard-workspace .dash-empty { padding: 24px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-soft); font-size: 12px; line-height: 1.7; }
.dashboard-queue-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dashboard-queue-title > a:first-child { min-width: 0; overflow-wrap: anywhere; }
.dashboard-workspace .dash-list a.btn { font-size: 10px; color: var(--primary); flex-shrink: 0; padding: 6px 8px; }
.dashboard-workspace .dash-list a.btn:hover { text-decoration: none; }
.dashboard-workspace .dash-list li { padding: 13px 0; }
.dashboard-workspace .dash-list li:first-child { padding-top: 0; }
.dashboard-workspace .dash-list li:last-child { padding-bottom: 0; }
.dashboard-workspace .dash-list small { margin-top: 7px; font-size: 11px; line-height: 1.7; }
.dashboard-block-reason { font-size: 12px; color: var(--muted); margin: 5px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.dashboard-workspace .heat-table { font-size: 12px; }
.dashboard-workspace .heat-table td, .dashboard-workspace .heat-table th { padding: 10px 7px; }
.dashboard-workspace .heat-table td:first-child { overflow-wrap: anywhere; }
.dashboard-workspace .heat-table .cell-num { width: 64px; }
.dashboard-workspace .heat-cell { min-width: 30px; }
.dashboard-chart { position: relative; height: 270px; }
.dashboard-status-list { display: flex; flex-direction: column; gap: 13px; padding-top: 6px; }
.dashboard-status-row { display: grid; grid-template-columns: minmax(110px, 1fr) 1.5fr 30px; gap: 14px; align-items: center; color: var(--text); font-size: 12px; text-decoration: none; }
.dashboard-status-row:hover { color: var(--primary); }
.dashboard-status-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.dashboard-status-track { height: 6px; border-radius: 99px; overflow: hidden; background: var(--surface-soft); }
.dashboard-status-track > span { display: block; height: 100%; background: var(--primary); border-radius: inherit; opacity: .65; }
.dashboard-secondary-counts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -6px 0 24px; }
.dashboard-secondary-counts a { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 12px; text-decoration: none; }
.dashboard-secondary-counts strong { color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 1px 7px; border-radius: 6px; }
.dashboard-panel-heading { padding: 18px 20px; margin-bottom: 0; }
.dashboard-task-panel .data-table { font-size: 12px; }
.dashboard-task-panel .data-table td, .dashboard-task-panel .data-table th { padding: 12px; }
.dashboard-task-panel .cell-title { max-width: 330px; }
.dashboard-task-panel .cell-title a { overflow-wrap: anywhere; font-size: 13px; }
.dashboard-task-panel .cell-actions { width: 130px; }
.dashboard-task-panel .cell-actions .btn { display: inline-flex; margin: 3px 0; }
.dashboard-task-panel .cell-badges { gap: 5px; }
.dashboard-task-panel .cell-danger { color: var(--danger); }
.dashboard-workspace .people-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dashboard-workspace .person-card { box-shadow: none; }
.dashboard-workspace .person-card > span:last-child { min-width: 0; }
.dashboard-workspace .person-card__name { overflow-wrap: anywhere; }
.dashboard-workspace .person-card__counts { font-size: 10.5px; gap: 7px; }
.dashboard-workspace #dashboard-performance { display: block; min-width: 0; }
.dashboard-workspace #dashboard-performance .section-head { flex-wrap: wrap; }
.dashboard-workspace #dashboard-performance .section-head__aside { margin-left: 42px; }
.dashboard-workspace #dashboard-performance .meta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dashboard-workspace #dashboard-performance .meta-card { display: block; padding: 10px; }
.dashboard-workspace #dashboard-performance .meta-card__icon { display: none; }
.dashboard-workspace #dashboard-performance .meta-card__body strong { font-size: 20px; }
@media (max-width: 1150px) {
  .dashboard-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .dashboard-split, .dashboard-team-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-workspace .stat-row { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
  .dashboard-workspace #dashboard-performance .section-head__aside { margin-left: auto; }
}
@media (max-width: 1000px) {
  .dashboard-task-panel .data-table thead { display: none; }
  .dashboard-task-panel .data-table, .dashboard-task-panel .data-table tbody, .dashboard-task-panel .data-table tr, .dashboard-task-panel .data-table td { display: block; width: 100%; }
  .dashboard-task-panel .data-table tbody tr { padding: 14px 18px; }
  .dashboard-task-panel .data-table td { padding: 3px 0; }
  .dashboard-task-panel .data-table td:empty { display: none; }
  .dashboard-task-panel .cell-title { max-width: none; }
  .dashboard-task-panel .data-table td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); font-size: 11px; }
  .dashboard-task-panel .data-table .cell-actions { text-align: left; margin-top: 6px; }
}
@media (max-width: 768px) {
  .dashboard-section-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-header-actions { flex-wrap: wrap; }
  .dashboard-workspace .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-workspace .stat-card { flex-direction: column; padding: 14px; gap: 8px; }
  .dashboard-workspace .panel { padding: 16px; }
  .dashboard-queue-title { flex-wrap: wrap; }
  .dashboard-status-row { grid-template-columns: minmax(0, 1fr) 1fr 24px; gap: 8px; }
}

/* ─── Sohbet (görev 088) ─────────────────────────────────────────────────
   Solda kanal listesi, sağda akış. Renk sistemi değişmez: seçili kanal
   `--primary`nin saydamlığıyla işaretlenir (ısı haritası/proje sağlığı
   kuralının aynısı), yeni bir palet açılmaz. */
/* TeamHub (devir §7 · referansın `.gc`): TEK kart — 270px sohbet listesi +
   konuşma, aralarında ince çizgi; liste zemini açık, seçili sohbet nane. */
.channel-workspace { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 0; align-items: stretch; min-height: calc(calc(100 * var(--vh)) - 190px); overflow: hidden; border-radius: var(--radius-lg); background: light-dark(#fff, var(--dk-surface)); }
.channel-workspace > .panel { border-radius: 0; box-shadow: none; }
.channel-workspace > .channel-list { background: light-dark(var(--hue-fbfdfc), var(--dk-surface)); border-right: 1px solid var(--line); }
.channel-list { padding: 16px; }
.channel-list__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.channel-list__head h2 { font-size: 16px; margin: 0; }
.channel-list__group { margin-bottom: 10px; }

/* Görev 100 — Google Chat düzeni: liste içi arama + iki bölüm ("Sohbetler",
   "Alanlar"). Bölüm başlığındaki "yeni" bağlantısı gruptan DIŞARIDA durur,
   yani arama onu gizlemez. */
.channel-list__search { margin-bottom: 12px; }
.channel-list__section { margin-bottom: 16px; }
.channel-list__section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.channel-list__new { font-size: 12px; color: var(--primary); text-decoration: none; white-space: nowrap; }
.channel-list__new:hover { text-decoration: underline; }
.channel-list__group-title { color: var(--muted); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; margin: 6px 0 2px 10px; }
.channel-list__item--unread .channel-list__name { font-weight: 700; }
.channel-list__items { list-style: none; margin: 0; padding: 0; }
.channel-list__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px 7px 8px; border-radius: 999px; color: light-dark(#3d4d47, var(--dk-text-soft)); font-size: 13px; text-decoration: none; }
.channel-list__item:hover { background: light-dark(var(--hue-eef3f1), var(--dk-surface-soft)); text-decoration: none; }
.channel-list__item.active { background: var(--mint-soft); color: var(--mint-dark); font-weight: 700; }
.channel-list__name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Görev 089 — birebir yazışma: grup başlığının altındaki "Yeni yazışma" seçicisi. */
.channel-list__direct-new { margin: 0 0 8px; }
.channel-list__direct-new > summary { cursor: pointer; padding: 5px 10px; border-radius: 10px; font-size: 13px; color: var(--primary); list-style: none; }
.channel-list__direct-new > summary::-webkit-details-marker { display: none; }
.channel-list__direct-new > summary:hover { background: rgba(0, 0, 0, 0.04); }
.channel-list__direct-form { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 10px; }
/* Görev 113 — raylardaki kompakt `+` / kalem düğmesi (sohbet ve TODO ortak). */
.rail-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--primary); cursor: pointer; text-decoration: none; list-style: none; flex: none; }
.rail-add::-webkit-details-marker { display: none; }
.rail-add:hover, .rail-add:focus-visible { background: var(--primary-soft); outline: none; }
.rail-actions { display: inline-flex; align-items: center; gap: 2px; }
.channel-list__section-head .channel-list__direct-new { position: relative; margin: 0; }
.channel-list__section-head .channel-list__direct-new > summary { padding: 0; }
.channel-list__section-head .channel-list__direct-form { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: 240px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-soft); }
.todo-rail__title--actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.channel-room__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.channel-room__icon-btn:hover, .channel-room__icon-btn:focus-visible { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); outline: none; }
.channel-room { display: flex; flex-direction: column; min-height: 420px; position: relative; }
/* Sürükle-bırak: dosya odanın üstüne gelince kesik çerçeveli karartı (`chat-drop`). */
.chat-drop-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--primary);
  border-radius: inherit; background: color-mix(in srgb, var(--primary) 8%, color-mix(in srgb, var(--surface) 88%, transparent)); pointer-events: none; }
.chat-drop-overlay[hidden] { display: none; }
.chat-drop-overlay__box { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--surface);
  color: var(--primary); font-weight: 600; box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 14%, transparent); }
.channel-room__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.channel-room__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.channel-room__meta { color: var(--muted); font-size: 11px; margin: 2px 0 0; }
.channel-room__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Görev 100 — kebap menü: hem mesaj satırında hem oda başlığında aynı kutu.
   Renk sistemi değişmez (`--surface` / `--border` / `--primary`). */
.chat-menu { position: relative; display: inline-flex; }
.chat-menu__panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 180px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-soft); }
.chat-menu--end .chat-menu__panel { left: auto; right: 0; }
.chat-message--mine .chat-menu__panel { left: auto; right: 0; }
.chat-menu__panel.hidden { display: none; }
.chat-menu__form { margin: 0; }
.chat-menu__item { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.chat-menu__item:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.chat-menu__item--danger { color: var(--danger); }
.chat-menu__item--danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.channel-empty { min-height: 260px; }
@media (max-width: 1000px) {
  .channel-workspace { grid-template-columns: minmax(0, 1fr); }
  .channel-room__head { flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────────
   Bürünme şeridi (görev 087)

   Bürünme boyunca her sayfanın üstünde durur. Yazma izni modunda renk
   uyarıcıdır: o modda yapılan her işlem hedef kullanıcı yapmış gibi
   kaydedilir ve dışarıya bildirim/e-posta çıkar.
   ───────────────────────────────────────────────────────────── */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid light-dark(#c7d2fe, var(--dk-line));
  background: light-dark(#eef2ff, var(--dk-info-soft));
  color: light-dark(#3730a3, var(--dk-info-text));
  font-size: 13px;
}

.impersonation-banner--write {
  border-color: #fcd34d;
  background: light-dark(#fffbeb, var(--dk-warning-soft));
  color: light-dark(#92400e, var(--dk-warning-text));
}

.impersonation-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.impersonation-banner-meta { font-size: 12px; opacity: 0.85; }
.impersonation-banner-warning { font-size: 12px; font-weight: 600; }
.impersonation-banner-form { flex: none; }

/* ─── Sohbet akışı ve yazma kutusu (görev 093) ───────────────────────────
   Sohbet bir NOT DEĞİLDİR: kart yok, avatar yok, satırlar sıkışık, eylemler
   hover'da. Renk sistemi değişmez (`--primary` ve gri tonları). */
.chat-stream { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 320px; max-height: calc(calc(100 * var(--vh)) - 320px); overflow-y: auto; padding: 26px 2px 12px; } /* üst boşluk: ilk mesajın yüzen eylem şeridi kesilmesin */
.chat-day { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--muted); font-size: 12px; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: rgba(0, 0, 0, 0.08); }
/* Görev 100 — Google Chat yerleşimi: satır bir FLEX satırıdır, mesaj bir
   BALONdur. Kendi mesajım `--mine` sınıfıyla sağa geçer (`row-reverse`) ve o
   sınıf iki yerden gelebilir: sunucu (`viewer` varsa) ya da `chat-message`
   controller'ının `connect()`i (Turbo Stream yayını `viewer` taşımaz). Bu
   yüzden avatar ve ad SUNUCUDA değil BURADA gizlenir — yayın kopyası da
   doğru görünsün. */
.chat-message { display: flex; align-items: flex-start; gap: 8px; padding: 2px 4px; line-height: 1.45; }
.chat-message--mine { flex-direction: row-reverse; }
.chat-message__avatar { flex: none; width: 24px; }
.chat-message--mine .chat-message__avatar { display: none; }
.chat-message__col { display: flex; flex-direction: column; min-width: 0; max-width: min(74%, 680px); }
.chat-message--mine .chat-message__col { align-items: flex-end; }
.chat-message--grouped .chat-message__col { margin-top: 0; }
.chat-message__head { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.chat-message__author { font-weight: 600; }
/* Kendi mesajımda ad basılmaz (saat kalır) — Google Chat'in kuralı. */
.chat-message--mine .chat-message__author { display: none; }
.chat-message__time, .chat-message__edited { color: var(--muted); font-size: 12px; }
.chat-message__bubble { padding: 9px 13px; border: 1px solid transparent; border-radius: 13px 13px 13px 3px; background: light-dark(#fff, var(--dk-surface)); box-shadow: 0 3px 12px color-mix(in srgb, var(--hue-0f5a4d) 5%, transparent); font-size: 13px; }
/* Renk karnesi YOK: kendi balonum kurumun renginin saydam tonu (ısı
   haritası / proje sağlığı kuralının aynısı), sabit mavi/yeşil değil. */
/* Kendi balonum: temanın YUMUŞAK (pastel) tonu, koyu metin — dolgu rengi
   (özellikle koyu bir tema renginde) uzun yazışmada göz yoruyordu.
   `--mint-soft` tema rengine ve karanlık temaya kendiliğinden uyar. */
.chat-message--mine .chat-message__bubble {
  background: var(--mint-soft);
  border-color: color-mix(in srgb, var(--mint) 22%, transparent);
  color: var(--ink);
  border-radius: 13px 13px 3px 13px;
}
.chat-message--mine .chat-message__bubble a { color: var(--mint-dark); text-decoration: underline; text-underline-offset: 2px; }
.chat-message__body { white-space: pre-wrap; word-break: break-word; }
.chat-message__body p { margin: 0; }
.chat-message__files { margin-top: 4px; }
/* Eylem şeridi — Google Chat kalıbı: balonun ÜSTÜNDE yüzen iki grup
   (hızlı tepkiler | tepki ekle · yanıtla · ⋮). Sütuna göre konumlanır: başkasının
   mesajında balonun başından, kendi mesajımda sonundan hizalanır; akışı itmez.
   Açık bir menü varken fare çıksa da şerit kaybolmaz (menü onun içinde). */
.chat-message__col { position: relative; }
.chat-message__actions { display: none; position: absolute; top: -20px; left: 4px; z-index: 6; gap: 6px; }
.chat-message--mine .chat-message__actions { left: auto; right: 4px; }
.chat-message:hover .chat-message__actions,
.chat-message:focus-within .chat-message__actions,
.chat-message__actions:has(.chat-menu__panel:not(.hidden)) { display: flex; }
.chat-actions__group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 14%, transparent); }
.chat-reaction-grid { display: grid; grid-template-columns: repeat(4, 34px); gap: 2px; min-width: 0; padding: 6px; }
.chat-reaction-grid__item { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
.chat-reaction-grid__item:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.chat-reaction-grid .inline { display: contents; }
.chat-message__edit { margin-top: 6px; width: 100%; }

/* Görev 108 — Google Chat kalıbı: `+` · hap · gönder oku. Renkler
   değişkenlerden (0009); hap tek satırda tam yuvarlak, çok satırda 20px. */
.chat-composer { margin-top: 12px; }
.chat-composer__row { display: flex; align-items: flex-end; gap: 8px; }
.chat-composer__plus-wrap { flex: none; }
.chat-composer__plus { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--primary-soft); color: var(--primary); cursor: pointer; }
.chat-composer__plus:hover, .chat-composer__plus:focus-visible { background: color-mix(in srgb, var(--primary) 20%, light-dark(white, var(--dk-surface))); outline: none; }
.chat-menu__panel--up { top: auto; bottom: calc(100% + 6px); }
.chat-menu__panel .chat-menu__item { display: flex; align-items: center; gap: 8px; }
.chat-composer__pill { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 4px; padding: 2px 6px 2px 16px; border-radius: 20px; background: light-dark(var(--hue-eef3f1), var(--dk-surface-soft)); border: 1px solid transparent; transition: border-color .15s, box-shadow .15s; }
.chat-composer__pill:focus-within { background: light-dark(#fff, var(--dk-surface)); border-color: transparent; box-shadow: 0 0 0 2px var(--mint); }
.chat-composer__input { flex: 1; min-width: 0; min-height: 38px; max-height: 160px; padding: 9px 0; border: 0; background: transparent; font: inherit; line-height: 1.4; resize: none; overflow-y: auto; }
.chat-composer__input:focus { outline: none; box-shadow: none; }
.chat-composer__tools { display: flex; align-items: center; gap: 2px; padding-bottom: 3px; flex: none; }
.chat-composer__tool { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.chat-composer__tool:hover, .chat-composer__tool:focus-visible { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); outline: none; }
.chat-composer__send { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--primary-fill); color: white; cursor: pointer; transition: opacity .15s; }
.chat-composer__send:disabled { background: transparent; color: var(--muted); opacity: .55; cursor: default; }
.chat-composer__hint { margin: 4px 0 0 60px; color: var(--muted); font-size: 11px; opacity: .8; }
.chat-composer__files { margin: 0 0 6px 48px; color: var(--muted); font-size: 12px; }
.chat-composer .mention-menu { margin-left: 48px; }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; min-width: 0; right: 0; left: auto; }
.chat-emoji-grid.hidden { display: none; }
.chat-emoji-grid__item { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
.chat-emoji-grid__item:hover, .chat-emoji-grid__item:focus-visible { background: color-mix(in srgb, var(--primary) 10%, transparent); outline: none; }

/* Görev 108 — kanal listesinin okunmamış rozeti. `sidebar-nav-count` yeşil
   sidebar içindir (yarı saydam beyaz); beyaz panelde görünmüyordu. */
.chat-badge { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--primary-fill); color: white; font-size: 11px; font-weight: 700; text-align: center; flex: none; }
.chat-badge.hidden { display: none; }
/* Bölüm başlığı da `.sidebar-section-title`i ödünç ALMAZ (aynı hata: koyu
   sidebar için açık renk metin — beyaz panelde görünmüyordu; 102'nin rayı). */
.channel-list__section-title { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding-left: 10px; }
.channel-avatar { flex: none; color: var(--text); font-weight: 700; }
.channel-room__side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.channel-room__team { text-decoration: none; color: inherit; }
.channel-room__team .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface, light-dark(#fff, var(--dk-surface))); }
.channel-room__team .avatar:first-child { margin-left: 0; }
.chat-day--new { color: var(--danger); font-weight: 600; }
.chat-day--new::before, .chat-day--new::after { background: color-mix(in srgb, var(--danger) 45%, transparent); }
@media (max-width: 1000px) {
  .chat-stream { max-height: none; }
}

/* ───────── Görev 096 — dosya sınırı, görsel önizleme, sohbet uyarısı ───── */

/* Yükleme öncesi reddedilen seçimin sebebi (form + sohbet kutusu). */
.form-error { color: var(--danger); font-size: 12px; margin-top: 6px; }
.chat-composer__error { color: var(--danger); font-size: 12px; margin-bottom: 6px; }

/* Görsel ekin küçük resmi. Sohbette satırın altında, ek listesinde satır
   başında durur; ikisi de aynı partial'ı render eder. */
.attachment-thumb { display: inline-block; flex: none; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); line-height: 0; }
.attachment-thumb img { display: block; max-width: 220px; max-height: 220px; width: auto; height: auto; }
.attachment-thumb:hover { border-color: var(--primary); }
.attachment-thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.attachment-row .attachment-thumb img { max-width: 44px; max-height: 44px; }
.chat-message__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* Büyütme katmanı — sayfa başına tek örnek (layout). */
.lightbox { position: fixed; inset: 0; z-index: 260; /* modalın (200) üstünde: modaldaki küçük resim de büyür */ display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.82); }
.lightbox.hidden { display: none; }
/* `align-items: center` olmazsa sütun flex görseli çapraz eksende ESNETİR:
   küçük bir ekran görüntüsü büyütülüp bulanıklaşıyordu (görsel kontrolde
   yakalandı). Varyant zaten büyütmüyor, kutu da büyütmemeli. */
.lightbox__frame { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: min(100%, 1200px); max-height: 100%; }
.lightbox__frame img { max-width: 100%; max-height: calc(calc(100 * var(--vh)) - 140px); object-fit: contain; border-radius: 12px; background: var(--surface); }
.lightbox__bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; color: #fff; font-size: 13px; }
.lightbox__name { overflow-wrap: anywhere; min-width: 0; }
.lightbox__actions { display: flex; gap: 8px; flex: none; }
.lightbox__actions .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
body.lightbox-open { overflow: hidden; }

/* ─── Sohbet: tepki, sabitleme, yanıt (görev 090) ─────────────────────────
   Hover şeridi ikonludur ve satırın sağında durur; tepki çipleri metnin
   altında. Renk sistemi değişmez — kendi tepkin `--primary`nin saydamlığıyla
   işaretlenir. */
.chat-message__actions { align-items: center; }
.chat-action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.chat-action:hover, .chat-action[aria-expanded="true"] { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.chat-action.active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.chat-message__reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-message--mine .chat-message__reactions, .chat-message--mine .chat-message__links { justify-content: flex-end; }

/* Görev 091 — mesajdan doğan işlerin rozeti ("→ Görev #123"). */
.chat-message__links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-link-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-size: 12px; line-height: 1.6; text-decoration: none; }
.chat-link-chip:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.chat-reaction { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid light-dark(#e5e7eb, var(--dk-line)); border-radius: 999px; background: light-dark(#fff, var(--dk-surface)); font-size: 12px; line-height: 1.6; cursor: pointer; }
.chat-reaction:hover { border-color: var(--primary); }
.chat-reaction.mine { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.chat-reaction__count { color: var(--muted); }
.chat-message__quote { display: flex; gap: 6px; margin-bottom: 2px; padding-left: 8px; border-left: 2px solid light-dark(#e5e7eb, var(--dk-line)); color: var(--muted); font-size: 12px; text-decoration: none; }
.chat-message__quote:hover { border-left-color: var(--primary); }
.chat-message__quote-author { font-weight: 600; }
.chat-message__quote-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.chat-message__pin { color: var(--primary); }
/* Görev 100: sabitleme artık satırın değil BALONUN işareti — satır artık bir
   zemin değil, bir hizalama ızgarası. */
.chat-message--pinned .chat-message__bubble { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.chat-pinned { margin-bottom: 8px; padding: 8px 12px; border: 1px solid light-dark(#e5e7eb, var(--dk-line)); border-radius: 10px; background: light-dark(#fff, var(--dk-surface)); font-size: 13px; }
.chat-pinned__title { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.chat-pinned ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-pinned a { display: flex; gap: 6px; color: inherit; text-decoration: none; }
.chat-pinned a:hover { color: var(--primary); }
.chat-pinned__author { font-weight: 600; }
.chat-pinned__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer__reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px 46px; padding: 4px 10px; border-left: 2px solid var(--primary); background: rgba(0, 0, 0, 0.03); border-radius: 6px; color: var(--muted); font-size: 12px; }

/* ═════════════════════ Görev 114 — mobil kabuk ve dar ekran ═════════════════════
   Kırılma noktaları (TEK liste; `@media` CSS değişkeni okumaz, sayı her yerde
   aynı yazılır):
     * 768px  — kabuk: sidebar çekmeceye iner, mobil üst şerit görünür, içerik
                tam genişlik; sohbet ve TODO tek sütun.
     * 1024px — iki sütunlu çalışma alanları (sohbet rayı + oda) iki SAYFA olur.
     * 640px  — form ızgaraları tek sütun.
   Masaüstü DEĞİŞMEZ: aşağıdaki her kural bir `@media (max-width: …)` içindedir;
   yalnız mobil şerit ve perde masaüstünde `display: none` alır. */
/* Kabuğun çekmecesi ve üst barı TeamHub geçişiyle `shell.css`e taşındı
   (çekmece artık ≤ 980 px — devir §4.2). Burada yalnız ortak parçalar. */
@media (max-width: 768px) {
  /* Bürünme şeridi sarar; çıkış düğmesi daima görünür (087). */
  .impersonation-banner { flex-wrap: wrap; gap: 8px; }

  /* ── Ortak parçalar ── */
  .modal-backdrop { padding: 0; }
  .modal, .modal.wide, .modal.xwide {
    width: 100%; max-width: 100%; height: calc(100 * var(--vh)); max-height: calc(100 * var(--vh));
    border-radius: 0; border: 0;
  }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .form-input, input.form-input, select.form-input, textarea.form-input { font-size: 16px; }
  .btn-sm { min-height: 36px; }
  .workspace-form-actions { flex-wrap: wrap; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  img, video { max-width: 100%; height: auto; }
}
@media (max-width: 640px) {
  .main-content .grid-cols-2, .main-content .md\:grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Görev 114 · Sohbet: dar ekranda iki sayfa ──
   `/channels` yalnız rayı, `/channels/:id` yalnız odayı gösterir; odada
   "← Sohbetler" geri bağlantısı. Controller, rota ve okundu damgası
   DEĞİŞMEDİ — yalnız CSS + bir bağlantı. */
.chat-back { display: none; }
@media (max-width: 1024px) {
  .channel-workspace { grid-template-columns: minmax(0, 1fr); }
  .channel-workspace--room > .channel-list { display: none; }
  .chat-back {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    color: var(--primary); font-size: 13px; font-weight: 600; text-decoration: none;
    padding: 4px 8px 4px 2px; border-radius: 8px;
  }
  .chat-back:hover, .chat-back:focus-visible { background: var(--primary-soft); outline: none; }
}
@media (max-width: 768px) {
  .channel-room { min-height: calc(calc(100 * var(--vh)) - 140px); }
  .channel-room__head { flex-direction: column; gap: 8px; }
  .chat-stream { max-height: none; }
  /* Yazma kutusu altta sabit: klavye açılınca da görünür kalsın. */
  .channel-room .chat-composer {
    position: sticky; bottom: 0; z-index: 5;
    margin: 12px -18px -18px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .chat-composer__hint { display: none; }
  .chat-composer__files, .chat-composer .mention-menu, .chat-composer__reply { margin-left: 0; }
  .chat-emoji-grid { grid-template-columns: repeat(6, 32px); }
}
/* Dokunmatikte hover yok: mesajın eylem şeridi (hızlı tepki · yanıt · ⋮)
   daima görünür — uzun basma değil; hiçbir eylem dokunmatikte kaybolmaz. */
@media (hover: none) {
  .chat-message__actions { display: flex; position: static; order: 99; margin-top: 4px; }
  .chat-message--mine .chat-message__actions { align-self: flex-end; }
}

/* ── Görev 114 · TODO: telefonda tek sütun + yatay çip rayı ──
   102'nin dar ekran kuralı rayı duvarın üstüne indiriyordu ama satırlar
   sarıyordu (ray ekranın yarısını kaplıyordu); burada YATAY KAYAN tek şerit. */
@media (max-width: 768px) {
  .todo-rail {
    flex-direction: row; flex-wrap: nowrap; gap: 12px; align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 4px;
  }
  .todo-rail::-webkit-scrollbar { display: none; }
  .todo-rail__section { display: flex; align-items: center; gap: 6px; flex: none; }
  .todo-rail__title { padding-left: 0; white-space: nowrap; }
  .todo-rail__items { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
  .todo-rail__item { white-space: nowrap; flex: none; background: var(--surface); border: 1px solid var(--border); }
  .todo-rail__archive { margin-top: 0; }
  .todo-card-grid { columns: 1; column-count: 1; }
  .keep-composer { width: 100%; }
  .todo-card-actions, .todo-card-pin { opacity: 1; }
}

/* ── Görev 114 · Görevler: pano sütunları yatay kaydırılır ── */
@media (max-width: 768px) {
  .board { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .board > .board-column { flex: 0 0 85%; min-width: 0; scroll-snap-align: start; }
}

/* ── Görev 114 · Toplantı / görev detayı: tek sütun, sarmalı Trix çubuğu ── */
@media (max-width: 768px) {
  trix-toolbar .trix-button-row { flex-wrap: wrap; overflow-x: visible; }
  trix-toolbar .trix-button-group { margin-bottom: 4px; }
  .workspace-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .workspace-nav a { white-space: nowrap; }
}

/* ═════════════════ Görev 115 — notlar: sticky note v2 (Keep / Apple Notes) ═════════════════
   Kağıt rengi YALNIZ not kartı ve not modalında: `--tone-paper` tonun doygun
   bir karışımıdır (Keep'in yoğunluğu, Sticky Notes'un "kağıt" hissi); tek
   formül, on renk; `default` beyaz kalır. Todo kartları `--tone-soft`u okumaya
   devam eder — etkilenmez. */
.note-card, .modal.note-modal { --tone-paper: color-mix(in srgb, var(--tone-accent) 24%, var(--surface)); }
.note-card.tone--default, .modal.note-modal.tone--default { --tone-paper: var(--surface); }

.note-wall { columns: 240px; column-gap: 14px; }
.note-wall > * { margin-bottom: 14px; }
.note-card {
  position: relative;
  background: var(--tone-paper);
  border: 1px solid color-mix(in srgb, var(--tone-accent) 30%, transparent);
  border-radius: 12px; padding: 14px 14px 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.note-card.tone--default { border-color: var(--border); }
.note-card:hover, .note-card:focus-within { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16); }
.note-card__open { display: block; color: inherit; text-decoration: none; padding-right: 26px; }
.note-card__open h2 { font-size: 15.5px; font-weight: 700; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.note-card__open:hover h2 { text-decoration: none; }
.note-card .note-card__excerpt {
  margin-top: 6px; font-size: 13px; line-height: 1.55; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.note-card__tag { background: color-mix(in srgb, var(--tone-accent) 18%, light-dark(white, var(--dk-surface))); color: var(--text); }
.note-card__footer { border-top: 0; padding-top: 4px; margin-top: 8px; }
.note-card .note-card__actions { gap: 2px; }
.note-card__meta { color: color-mix(in srgb, var(--text) 65%, transparent); }
.note-card .todo-card-swatches, .todo-list-card .todo-card-actions .todo-card-swatches { flex-wrap: wrap; max-width: 150px; }
.note-card .todo-card-pin { background: transparent; }
.note-card:hover .todo-card-pin, .note-card:focus-within .todo-card-pin { opacity: 1; }

/* Not modalı kartın renginde. */
.modal.note-modal { background: var(--tone-paper); border-color: color-mix(in srgb, var(--tone-accent) 30%, transparent); }
.modal.note-modal .modal-header { background: var(--tone-paper); }
.modal.note-modal .workspace-form-actions { background: var(--tone-paper); }

.note-modal__comments { border-top: 1px solid color-mix(in srgb, var(--tone-accent) 25%, transparent); padding-top: 10px; }
.note-modal__comments h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.note-modal__comment { margin: 4px 0; font-size: 13px; overflow-wrap: anywhere; }

/* Başlık satırı: ad · arama · görünüm anahtarı (ikon). */
.notes-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.notes-topbar h1 { font-size: 22px; margin: 0; }
.notes-topbar__search { flex: 1 1 220px; min-width: 0; max-width: 520px; }
.notes-topbar__search .form-input { width: 100%; }
.notes-topbar__views { display: inline-flex; gap: 2px; margin-left: auto; }
.rail-add.active { background: var(--primary-soft); }

/* Keep kutusu: Trix araç çubuğu daraltılmış (kalın · italik · madde · numara). */
.note-composer__body trix-editor { min-height: 90px; max-height: 320px; border: 0; padding: 6px 2px; box-shadow: none; }
.note-composer__body trix-toolbar .trix-button-group--file-tools,
.note-composer__body trix-toolbar .trix-button-group--history-tools,
.note-composer__body trix-toolbar .trix-button--icon-strike,
.note-composer__body trix-toolbar .trix-button--icon-link,
.note-composer__body trix-toolbar .trix-button--icon-heading-1,
.note-composer__body trix-toolbar .trix-button--icon-quote,
.note-composer__body trix-toolbar .trix-button--icon-code,
.note-composer__body trix-toolbar .trix-button--icon-decrease-nesting-level,
.note-composer__body trix-toolbar .trix-button--icon-increase-nesting-level { display: none; }
.note-composer__body trix-toolbar .trix-button-row { background: transparent; padding: 0; margin-bottom: 4px; }
.note-composer .todo-colors__swatches { flex-wrap: wrap; }

@media (max-width: 768px) {
  .notes-topbar h1 { font-size: 20px; }
  .notes-topbar__views { margin-left: 0; }
  .note-wall { columns: 1; column-count: 1; }
  .note-card .note-card__actions { opacity: 1; }
}

/* ═════════════════ Görev 116 — duvarda sürükle-bırak ═════════════════
   Tutamak kartın sol üst köşesinde; hover / odak / dokunmatikte görünür.
   Masonry (`columns`) sürükleme sırasında görsel olarak yeniden akar — Keep'in
   davranışı; sıra doğrusaldır. */
.card-grip {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%) rotate(90deg);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  color: color-mix(in srgb, var(--text) 45%, transparent); cursor: grab;
  opacity: 0; transition: opacity 0.12s ease; z-index: 2; touch-action: none;
}
.card-grip:hover, .card-grip:focus-visible { opacity: 1; background: color-mix(in srgb, var(--text) 8%, transparent); outline: none; }
.todo-list-card:hover .card-grip, .todo-list-card:focus-within .card-grip,
.note-card:hover .card-grip, .note-card:focus-within .card-grip { opacity: 1; }
.card-grip:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.35; }
.todo-list-card.is-dragging, .note-card.is-dragging { box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22); }
.reorder-error { margin-bottom: 10px; }
@media (hover: none) { .card-grip { opacity: 1; } }

/* ───── Proje oluşturma sihirbazı ───── */
.wizard-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.wizard-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.wizard-step__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mint-soft); color: var(--mint-dark); font-size: 12px; }
.wizard-step.active { border-color: var(--primary); color: var(--ink); }
.wizard-step.active .wizard-step__num { background: var(--primary); color: #fff; }
.wizard-step.done .wizard-step__num { background: var(--mint-dark); color: #fff; }
.wizard-form { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.wizard-panel { display: flex; flex-direction: column; gap: 14px; }
.wizard-panel[hidden] { display: none; }
.wizard-panel h2 { font-size: 17px; margin: 0; }
.wizard-subtitle { margin-top: 12px !important; padding-top: 16px; border-top: 1px solid var(--line); }
.blueprint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.blueprint-card { position: relative; display: block; cursor: pointer; }
.blueprint-card input { position: absolute; opacity: 0; inset: 0; }
.blueprint-card__body { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.blueprint-card__body small { color: var(--muted); }
.blueprint-card__body em { font-size: 12px; font-style: normal; color: var(--muted); }
.blueprint-card input:checked + .blueprint-card__body { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.blueprint-card input:focus-visible + .blueprint-card__body { outline: 2px solid var(--primary); outline-offset: 2px; }
.wizard-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wizard-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.wizard-row__main { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wizard-row__main > .form-input { flex: 1 1 180px; min-width: 0; }
.wizard-row__main > .wizard-kind { flex: 0 1 150px; }
.wizard-row__sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.wizard-row__sub label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.wizard-row__sub .wizard-check { flex-direction: row; align-items: center; }
.wizard-row__tools { display: inline-flex; gap: 2px; margin-left: auto; }
.wizard-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wizard-value { grid-column: 1 / -1; }
.wizard-value [hidden] { display: none; }
.wizard-add-field { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wizard-add-field .form-input { flex: 0 1 280px; }
.wizard-list__table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.wizard-list__table td, .wizard-list__table th { padding: 3px 4px; font-size: 12px; text-align: left; }
.wizard-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.review-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.review-box h3 { font-size: 13px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.review-list { margin: 0; padding-left: 18px; list-style: disc; }
.review-warnings { border: 1px solid var(--line); border-left: 4px solid #d97706; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface); }

/* ───── Proje özeti, aşamalar, alanlar ───── */
.draft-banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--line); border-left: 4px solid #d97706; border-radius: 12px; background: var(--surface); }
.draft-banner p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.project-purpose { margin: 0 0 10px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.summary-line { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 12px; }
.summary-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.stage-bar { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.stage-chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 110px; }
.stage-chip small { font-size: 11px; color: var(--muted); }
.stage-chip--done { background: var(--mint-soft); border-color: transparent; }
.stage-chip--active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.stage-chip--awaiting_approval { border-color: #d97706; }
.stage-chip--locked { opacity: .65; border-style: dashed; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.summary-block h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; }
.summary-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.summary-fields dt { font-size: 12px; color: var(--muted); }
.summary-fields dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.stage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stage-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.stage-row--done { background: var(--mint-soft); border-color: transparent; }
.stage-row--locked { opacity: .75; }
.stage-row__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stage-row__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 4px; }
.stage-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; min-width: 260px; }
.stage-add { display: flex; gap: 8px; margin-top: 12px; }
.stage-add .form-input { flex: 1 1 auto; }
.field-list { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.field-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.field-item dt { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.field-item dd { margin: 0; overflow-wrap: anywhere; }
.field-edit { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.field-list-row { display: flex; gap: 6px; }
.project-wizard--modal .wizard-form { max-width: none; padding: 0; box-shadow: none; border: 0; background: transparent; }
.project-wizard--modal .wizard-steps { margin-bottom: 12px; }
.wizard-more > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.wizard-more[open] > summary { margin-bottom: 8px; }
.project-card { position: relative; }
.project-card__corner { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 6px; }
.project-workspace .project-card__head { padding-right: 96px; }
.project-card__due { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.project-card__due strong { font-size: 15px; color: var(--ink); }

/* ───── Sihirbaz: aşamalar ve proje bilgileri (adım 3) ───── */
.wizard-subtabs { align-self: flex-start; }
.wizard-subtabs button.active { color: var(--mint-dark); background: light-dark(#fff, var(--dk-surface)); box-shadow: 0 2px 6px color-mix(in srgb, var(--hue-0f5a4d) 8%, transparent); }
.wizard-callout { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--mint-soft); color: var(--mint-dark); font-size: 13px; line-height: 1.5; }
.wizard-callout span { opacity: .85; }
.wizard-empty { padding: 18px; margin-bottom: 12px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; color: var(--muted); font-size: 13px; }
.wizard-empty[hidden] { display: none; }
.wizard-add { width: 100%; padding: 12px; border: 1px dashed var(--primary); border-radius: 12px; background: transparent; color: var(--primary); font-weight: 600; font-size: 13px; cursor: pointer; }
.wizard-add:hover { background: var(--mint-soft); }
.wizard-rows--stages { counter-reset: stage; margin-bottom: 12px; }
.wizard-stage { counter-increment: stage; }
.wizard-stage__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint-soft); color: var(--mint-dark); font-size: 12px; font-weight: 700; }
.wizard-stage__num::before { content: counter(stage); }
.wizard-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; cursor: pointer; white-space: nowrap; color: var(--muted); }
.wizard-toggle input { accent-color: var(--primary); }
.wizard-toggle:has(input:checked) { border-color: var(--primary); background: var(--mint-soft); color: var(--mint-dark); font-weight: 600; }
.wizard-field { background: light-dark(#fff, var(--dk-surface)); }
.wizard-field__body { display: flex; flex-direction: column; gap: 8px; }
.wizard-field__body label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.wizard-field__preset { flex-direction: row !important; align-items: center; font-size: 12px !important; }
.wizard-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.wizard-kinds__label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wizard-kind-pill { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 12.5px; cursor: pointer; color: var(--text); }
.wizard-kind-pill:hover { border-color: var(--primary); background: var(--mint-soft); color: var(--mint-dark); }
.wizard-preset { flex: 0 1 220px; }

/* ───── Sihirbaz: premium form görünümü, ekip ve görev kartları ───── */
.project-wizard .form-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.project-wizard textarea.form-input { padding: 10px 14px; }
.project-wizard .form-input:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.project-wizard .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.project-wizard label.block { margin-bottom: 6px !important; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.wizard-card { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.wizard-card + .wizard-card { margin-top: 16px; }
.wizard-card__head { margin-bottom: 14px; }
.wizard-card__head h2 { margin: 0; font-size: 16px; }
.wizard-card__head p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.wizard-pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.wizard-pickers .people-picker .hint { margin-top: 6px; font-size: 12px; }
.wizard-board { display: flex; flex-direction: column; gap: 14px; }
.wizard-stage-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--mint-soft) 35%, var(--surface)); }
.wizard-stage-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.wizard-tasks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wizard-tasks:empty { display: none; }
.wizard-task { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.wizard-task__main { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) minmax(140px, 170px) auto; gap: 8px; align-items: center; }
.wizard-warn { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: light-dark(#fff7e6, var(--dk-warning-soft)); border: 1px solid light-dark(#f3d38a, var(--dk-line)); color: light-dark(#8a5a00, var(--dk-warning-text)); font-size: 12.5px; line-height: 1.5; }
.wizard-warn[hidden] { display: none; }
.wizard-add--sm { padding: 9px; font-size: 12.5px; }
.wizard-chat { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.wizard-chat input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.wizard-chat span { display: flex; flex-direction: column; gap: 2px; }
.wizard-chat small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.wizard-chat:has(input:checked) { border-color: var(--primary); background: var(--mint-soft); }
@media (max-width: 720px) { .wizard-task__main { grid-template-columns: 1fr; } }
.wizard-stage-card .wizard-stage__num::before { content: none; }

/* ───── Kişi seçici: seçilenler altta, departman satırı ───── */
.wizard-pickers .people-picker__row { flex-direction: column; align-items: stretch; gap: 10px; }
.wizard-pickers .people-picker__search { flex: none; width: 100%; }
.people-picker__dept { display: flex; gap: 8px; align-items: stretch; }
.people-picker__dept .people-picker__department { flex: 1 1 auto; min-width: 0; }
.people-picker__add { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--primary); border-radius: 12px; background: var(--mint-soft); color: var(--mint-dark); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.people-picker__add::before { content: "+ "; }
.people-picker__add:hover:not(:disabled) { background: var(--primary); color: #fff; }
.people-picker__add:disabled { border-color: var(--line); background: transparent; color: var(--muted); cursor: not-allowed; }
.people-picker__selected { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--mint-soft) 40%, var(--surface)); }
.people-picker__selected[hidden] { display: none; }
.people-picker__selected-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.people-picker__selected-title .count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; text-align: center; }
.people-picker__selected .people-picker__chips { margin: 0; gap: 8px; }
.people-picker__selected .people-chip { gap: 8px; padding: 5px 6px 5px 5px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.people-chip__avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 700; }
.people-picker__selected .people-chip__remove { width: 22px; height: 22px; border-radius: 50%; line-height: 1; }
.wizard-stage-card__name { max-width: 320px; min-height: 38px; font-weight: 600; }
.wizard-task__main { grid-template-columns: minmax(170px, 1.4fr) minmax(140px, 1fr) minmax(130px, .8fr) minmax(130px, 1fr) auto; }

/* ───── Seçilen kişiler: arama kutusunun altında, sade ve belirgin ───── */
.people-picker__selected { margin-top: 10px; padding: 0; border: 0; background: none; }
.people-picker__selected-title { display: none; }
.people-picker__selected .people-picker__chips { gap: 8px; }
.people-picker__selected .people-chip { padding: 4px 8px 4px 4px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); background: var(--mint-soft); color: var(--mint-dark); box-shadow: none; }
.people-picker__selected .people-chip__remove:hover { background: var(--primary); color: #fff; }

/* ───── Önce aşama ekle, kart oluşur ───── */
.wizard-stage-add { display: flex; gap: 8px; align-items: stretch; }
.wizard-stage-add .form-input { flex: 1 1 auto; }
.wizard-stage-add .btn { flex: none; min-height: 44px; border-radius: 12px; }
.wizard-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; }
.wizard-suggest[hidden] { display: none; }
.wizard-suggest__label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wizard-suggest__all { padding: 6px 10px; border: 0; background: none; color: var(--primary); font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.wizard-stage-card__head { justify-content: flex-start; }
.wizard-stage-card__remove { margin-left: auto; }
.wizard-board { margin-top: 14px; }

/* ───── Sihirbaz: başlık hiyerarşisi (Ekip / Görevler net ayrışsın) ───── */
.wizard-card { padding: 22px; }
.wizard-card + .wizard-card { margin-top: 22px; }
/* Kartlar modalın beyaz zemininden HAFİF bir tonla ayrılır (marka renginin çok
   saydam karışımı — sabit renk yok, karanlık temaya kendiliğinden uyar). Kartın
   içindeki alanlar ve aşama kartları beyaz kalır, yani iki katman okunur. */
.wizard-card { background: color-mix(in srgb, var(--primary) 2.2%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 10%, var(--line)); }
/* Başlık bandı beyaz kalır, alanlar tonlu gövdede: başlık ile alanlar ayrı okunur. */
.wizard-card > .wizard-card__head { margin: -22px -22px 20px; padding: 20px 22px 18px; background: var(--surface); border-radius: 16px 16px 0 0;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line)); }
/* Görevler kartında başlık bandının hemen altında aşama çubuğu başlar (arada şerit kalmaz). */
.wizard-card > .wizard-card__head + .wizard-stage-bar { margin-top: -20px; border-top: 0; }
.wizard-card__head { display: flex; align-items: center; gap: 14px; margin: -2px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.wizard-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mint-soft); color: var(--mint-dark); }
.wizard-card__head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); }
.wizard-card__head p { margin: 3px 0 0; }
.wizard-sub { margin: 4px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wizard-suggest { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.wizard-board { margin-top: 0; gap: 18px; }
.wizard-stage-card { padding: 0; overflow: hidden; border-radius: 16px; background: var(--surface); }
.wizard-stage-card__head { margin: 0; padding: 12px 16px; background: color-mix(in srgb, var(--mint-soft) 60%, var(--surface)); border-bottom: 1px solid var(--line); font-size: 15px; }
.wizard-stage-card .wizard-tasks, .wizard-stage-card > .wizard-add { margin-left: 14px; margin-right: 14px; }
.wizard-stage-card .wizard-tasks { margin-top: 14px; }
.wizard-stage-card > .wizard-add { width: calc(100% - 28px); margin-bottom: 14px; }
.wizard-task { background: color-mix(in srgb, var(--mint-soft) 18%, var(--surface)); }
.wizard-task__main { grid-template-columns: minmax(180px, 1.5fr) minmax(150px, 1fr) minmax(140px, .8fr) auto; }
.wizard-pickers { gap: 28px; }
.wizard-pickers .people-picker + .people-picker { padding-left: 28px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .wizard-pickers .people-picker + .people-picker { padding-left: 0; border-left: 0; } }

/* ───── Sihirbaz: daha net renk ayrımı (adım 3) ───── */
.wizard-sub { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12.5px; }
.wizard-stage-card { border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); box-shadow: 0 1px 3px rgba(20, 30, 60, .06); }
.wizard-stage-card__head { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border-left: 5px solid var(--primary); border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line)); }
.wizard-stage-card__head strong { font-size: 15.5px; color: var(--ink); }
.wizard-stage-card .wizard-stage__num { background: var(--primary); color: #fff; }
.wizard-task { background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--line)); box-shadow: 0 1px 2px rgba(20, 30, 60, .05); }
.wizard-add--sm { border-style: solid; border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.wizard-add--sm:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.wizard-card__icon { background: var(--primary); color: #fff; }

/* ───── Sihirbaz: gözden geçir (tek sade sayfa) ───── */
.review-sheet { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.review-section { padding: 18px 22px; }
.review-section + .review-section { border-top: 1px solid var(--line); }
.review-section__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-section__head h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.review-section__head .review-edit { margin-left: auto; }
.review-count { padding: 2px 10px; border-radius: 999px; background: var(--mint-soft); color: var(--mint-dark); font-size: 12px; font-weight: 600; }
.review-section--project .review-section__head { margin-bottom: 6px; }
.review-section--project h3.review-project__name { font-size: 24px; font-weight: 800; letter-spacing: -.4px; text-transform: none; color: var(--ink); }
.review-project__purpose { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.review-meta { margin: 0; font-size: 13px; color: var(--muted); }
.review-edit { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; }
.review-edit:hover { border-color: var(--primary); color: var(--primary); }
.review-row { display: flex; align-items: flex-start; gap: 16px; padding: 6px 0; }
.review-row__label { flex: none; width: 100px; padding-top: 4px; font-size: 13px; color: var(--muted); }
.review-row__value { display: flex; flex-wrap: wrap; gap: 14px; }
.review-person { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.review-person__avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mint-soft); color: var(--mint-dark); font-size: 10.5px; font-weight: 700; }
.review-muted { color: var(--muted); font-size: 13px; }
.review-stage { margin-top: 14px; }
.review-stage__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 8px; font-size: 15px; color: var(--ink); }
.review-stage__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; }
.review-tag { padding: 2px 10px; border-radius: 999px; background: var(--mint-soft); color: var(--mint-dark); font-size: 11.5px; font-weight: 600; }
.review-stage__empty { margin: 0; padding: 6px 0 2px; }
.review-task { display: grid; grid-template-columns: minmax(180px, 1.6fr) minmax(130px, 1fr) minmax(130px, .9fr) 30px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.review-task--head { padding: 4px 0; border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.review-task__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-task__title strong { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.review-task__title small { color: var(--muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.review-task__date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.review-flag { padding: 2px 9px; border-radius: 999px; background: light-dark(#fff4d6, var(--dk-warning-soft)); border: 1px solid light-dark(#f0cd7a, var(--dk-line)); color: light-dark(#8a5a00, var(--dk-warning-text)); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.review-warnings { margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; background: light-dark(#fff8e6, var(--dk-warning-soft)); border: 1px solid light-dark(#f0cd7a, var(--dk-line)); color: light-dark(#6b4600, var(--dk-warning-text)); font-size: 13px; }
.review-warnings .review-list { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
@media (max-width: 720px) { .review-task { grid-template-columns: 1fr; } .review-task--head { display: none; } }

/* ───── Görev satırı: sütun başlıkları + açıklama ───── */
.wizard-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wizard-col > span { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted); }
.wizard-col--wide { margin-top: 10px; }
.wizard-task__main { display: grid; grid-template-columns: minmax(180px, 1.6fr) minmax(150px, 1fr) minmax(140px, .8fr) auto; gap: 10px; align-items: end; }
.wizard-task__remove { align-self: end; min-height: 44px; }
.wizard-task textarea.form-input { min-height: 64px; resize: vertical; }
@media (max-width: 720px) { .wizard-task__main { grid-template-columns: 1fr; } }

/* ───── Gözden geçir: bölümler ayrı kartlar, renkli başlık bantları ───── */
.review-sheet { padding: 16px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--primary) 7%, var(--surface-soft, var(--line))); display: flex; flex-direction: column; gap: 16px; overflow: visible; }
.review-section { padding: 0; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)); border-radius: 16px; background: var(--surface); box-shadow: 0 2px 8px rgba(20, 30, 60, .07); overflow: hidden; }
.review-section + .review-section { border-top: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)); }
.review-section__head { margin: 0 !important; padding: 12px 18px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line)); }
.review-section__head h3 { color: var(--ink); }
.review-section > :not(.review-section__head) { margin-left: 18px; margin-right: 18px; }
.review-section > :last-child { margin-bottom: 18px; }
.review-section > .review-section__head + * { margin-top: 16px; }
.review-section--project { border-top: 6px solid var(--primary); }
.review-section--project .review-section__head { padding: 16px 18px 10px; background: transparent; border-bottom: 0; }
.review-section--project .review-section__head + * { margin-top: 0; }
.review-meta { padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); color: var(--ink); font-weight: 600; }
.review-row + .review-row { border-top: 1px solid var(--line); }
.review-row { padding: 10px 0; align-items: center; }
.review-stage { margin-top: 16px; margin-left: 18px; margin-right: 18px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)); border-radius: 14px; overflow: hidden; background: var(--surface); }
.review-stage__head { padding: 12px 16px; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); border-left: 5px solid var(--primary); border-bottom: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); }
.review-stage > .review-task, .review-stage > .review-stage__empty { margin: 0; padding-left: 16px; padding-right: 16px; }
.review-task--head { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.review-task + .review-task:not(.review-task--head) { border-top: 1px solid var(--line); }
.review-stage__empty { padding-top: 12px; padding-bottom: 12px; }
.review-section > .review-stage:last-child { margin-bottom: 18px; }
.review-chat-gap { height: 0; }

/* ───── Aşama çubuğu yapışık; çakışma kutusu ayrıntılı; uyarı grupları ───── */
/* Aşama ekleme çubuğu: kaydırırken üstte yapışık bir BÖLÜM. Altındaki ayrım net bir
   çizgidir (eski yumuşak gölge "garip bir gölge" gibi duruyordu); çubuk kendi zeminiyle
   kartlardan ayrılır. */
.wizard-stage-bar { position: sticky; top: 0; z-index: 5; margin: 0 -22px 16px; padding: 14px 22px 14px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border-top: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line)); border-bottom: 2px solid color-mix(in srgb, var(--primary) 22%, var(--line)); }
.wizard-stage-bar .wizard-suggest { margin: 10px 0 0; padding-bottom: 12px; border-bottom: 0; }
.wizard-stage-bar .wizard-stage-add { margin-bottom: 0; }
.wizard-stage-bar .wizard-sub { margin-top: 0; }
.wizard-warn strong { display: block; margin-bottom: 4px; }
.wizard-warn ul { margin: 0; padding-left: 18px; list-style: disc; }
.wizard-warn li { margin: 2px 0; }
.review-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.review-warnings__title { display: block; font-size: 14px; }
.review-warnings__group { margin-top: 12px; }
.review-warnings__group h4 { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: light-dark(#8a5a00, var(--dk-warning-text)); }
.review-warnings__item { font-weight: 600; }
.review-warnings__detail { display: block; margin-top: 1px; font-size: 12.5px; opacity: .85; }

/* ───── Proje detayı (genel bakış): kart kart, tek sütun ───── */
.pd-stack { display: flex; flex-direction: column; gap: 18px; }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.pd-card { padding: 20px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 1px 3px rgba(20, 30, 60, .05); min-width: 0; }
.pd-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pd-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.pd-card__title { flex: 1; min-width: 0; }
.pd-card__title h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.2px; color: var(--ink); }
.pd-card__title p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.pd-card__aside { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Proje duyuruları (termin uzadı) — "Duyurular" sekmesi, `projects/_announcements`. */
.pd-announce-list { display: flex; flex-direction: column; gap: 10px; }
.pd-announce { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pd-announce.is-recent { border-color: light-dark(#f0cd7a, var(--dk-line)); background: light-dark(#fffbf0, var(--surface)); }
.pd-announce[hidden] { display: none; }
.pd-announce .pd-announce__icon { width: 36px; height: 36px; border-radius: 10px; background: light-dark(#fff0cf, var(--dk-surface-soft)); color: light-dark(#8a5a00, #f0cd7a); }
.pd-announce__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-announce__head { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink); }
.pd-announce__lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.pd-announce__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.pd-announce__close:hover { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--ink); }
.tab-count.tab-count--alert, .tab-item.active .tab-count--alert { background: light-dark(#fff0cf, var(--dk-surface-soft)); color: light-dark(#8a5a00, #f0cd7a); }
.pd-card__aside strong { color: var(--ink); }
.pd-badge { margin-left: auto; padding: 5px 14px; border-radius: 999px; background: var(--mint-soft); color: var(--mint-dark); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pd-badge--info { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.pd-badge--warn { background: light-dark(#fff1d6, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.pd-badge--ok { background: #dff5e6; color: #1f6b3a; }
.pd-link { color: var(--primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.pd-link:hover { text-decoration: underline; }
.pd-muted { margin: 0; color: var(--muted); font-size: 13.5px; }
.pd-sub { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pd-text p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.pd-more > summary { cursor: pointer; color: var(--primary); font-size: 13px; font-weight: 600; list-style: none; }
.pd-more > summary::-webkit-details-marker { display: none; }
.pd-more[open] > summary { display: none; }
.pd-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pd-fact { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.pd-fact svg { color: var(--primary); }
.pd-fact strong { color: var(--ink); }
.pd-keyfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 20px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pd-keyfields dt { font-size: 12px; color: var(--muted); }
.pd-keyfields dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pd-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; }
.pd-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pd-person > div strong { display: block; font-size: 15px; color: var(--ink); }
.pd-person > div span { display: block; font-size: 12.5px; color: var(--muted); }
.pd-person .avatar { flex: none; width: 46px; height: 46px; font-size: 14px; }
.pd-inline-link { color: var(--primary); text-decoration: none; }
.pd-inline-link:hover { text-decoration: underline; }
.pd-person--more { text-decoration: none; }
.pd-person--more > div strong { color: var(--primary); }
.pd-person--more:hover > div strong { text-decoration: underline; }
/* "+9": diğer avatarlarla aynı boyutta yuvarlak, nötr zemin. */
.pd-person__more-count { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--line)); }
.pd-steps { list-style: none; display: flex; margin: 8px 0 14px; padding: 0; }
.pd-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 6px; text-align: center; min-width: 0; }
.pd-step::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.pd-step:first-child::before { display: none; }
.pd-step--done::before, .pd-step--active::before { background: var(--primary); }
.pd-step__node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--muted); }
.pd-step--done .pd-step__node { background: var(--primary); border-color: var(--primary); color: #fff; }
.pd-step--active .pd-step__node { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }
.pd-step__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }
.pd-step--awaiting_approval .pd-step__node { border-color: #d97706; color: #d97706; }
.pd-step--locked .pd-step__node { border-style: dashed; }
.pd-step strong { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.pd-step small { font-size: 11.5px; color: var(--muted); }
.pd-step--locked strong { color: var(--muted); }
.pd-stage-note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.pd-manage { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pd-manage > summary { cursor: pointer; color: var(--primary); font-size: 13px; font-weight: 600; }
.pd-embedded { margin-top: 12px; }
.pd-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pd-table__row { display: grid; grid-template-columns: 1.4fr 1.3fr 1fr .8fr; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.pd-table__row--head { border-top: 0; background: color-mix(in srgb, var(--ink) 5%, var(--surface)); font-size: 12px; font-weight: 700; color: var(--muted); }
.pd-table__row strong { display: block; color: var(--ink); }
.pd-table__row small { display: block; color: var(--muted); font-size: 12px; }
.pd-cell-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pd-notes { list-style: none; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, var(--surface)); font-size: 13px; color: var(--text); }
.pd-notes li { display: flex; align-items: center; gap: 8px; }
.pd-counters { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 16px 0 4px; }
.pd-counter { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--muted); font-size: 12.5px; }
.pd-counter strong { font-size: 22px; color: var(--ink); }
.pd-counter:hover { border-color: var(--primary); }
.pd-counter--late strong { color: #b45309; }
.pd-counter--blocked strong { color: light-dark(#b91c1c, var(--dk-danger-text)); }
.pd-counters__all { align-self: center; margin-left: auto; }
.pd-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 28px; }
.pd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pd-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.pd-list li:first-child { border-top: 0; }
.pd-list small { color: var(--muted); font-size: 12px; }
.pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
@media (max-width: 720px) {
  .pd-card { padding: 16px; }
  .pd-steps { flex-direction: column; gap: 14px; align-items: stretch; }
  .pd-step { flex-direction: row; text-align: left; padding: 0; gap: 10px; }
  .pd-step::before { display: none; }
  .pd-table__row { grid-template-columns: 1fr; gap: 6px; }
  .pd-table__row--head { display: none; }
}

/* ───── Aşama akışı: daha belirgin; ayrıntı oku ───── */
.pd-steps { margin: 18px 0 18px; }
.pd-step::before { top: 19px; height: 3px; }
.pd-step__node { width: 40px; height: 40px; border-width: 3px; }
.pd-step--active .pd-step__node { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent); }
.pd-step__dot { width: 14px; height: 14px; }
.pd-step strong { font-size: 14.5px; }
.pd-step--active strong { color: var(--primary); font-weight: 800; }
.pd-step--done strong { color: var(--ink); }
.pd-step--upcoming strong { color: var(--muted); }
.pd-stage-note { padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.pd-manage--arrow > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.pd-manage--arrow > summary::-webkit-details-marker { display: none; }
.pd-manage__chevron { transition: transform .15s; }
.pd-manage--arrow[open] .pd-manage__chevron { transform: rotate(180deg); }
/* "Aşama ayrıntıları" — kartın içinde açılan son hareketler. */
.pd-stage-details__body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pd-stage-details__body .pd-step-activity__title { margin: 0; }
.review-dep { color: light-dark(#8a5a00, var(--dk-warning-text)) !important; font-weight: 600; }

/* ───── Sürükle-bırak dosya alanı ve proje ekleri ───── */
.dropzone__area { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed color-mix(in srgb, var(--primary) 40%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--primary) 4%, var(--surface)); color: var(--primary); text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.dropzone__area strong { color: var(--ink); font-size: 14px; }
.dropzone__area small { color: var(--muted); font-size: 12.5px; }
.dropzone__area:hover, .dropzone__area.is-over, .dropzone__area:focus-visible { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); outline: none; }
.dropzone__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dropzone__list:empty { display: none; }
.dropzone__item { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.dropzone__name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--ink); }
.dropzone__item small { color: var(--muted); }
.pd-attachments { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-attachment { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.pd-attachment svg { color: var(--primary); }
.pd-attachment small { color: var(--muted); font-weight: 400; }
.pd-attachment:hover { border-color: var(--primary); }

/* ───── Görevler sekmesi: aşama aşama ───── */
.pt-counters { margin: 0 0 16px; }
.pt-stages { display: flex; flex-direction: column; gap: 18px; }
.pt-stage { border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line)); border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: 0 1px 3px rgba(20, 30, 60, .05); }
.pt-stage__head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border-left: 5px solid var(--primary); border-bottom: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); }
.pt-stage__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.pt-stage__title { flex: 1; min-width: 0; }
.pt-stage__title h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.pt-stage__title small { color: var(--muted); font-size: 12.5px; }
.pt-stage__count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pt-stage__empty { padding: 14px 18px; }
.pt-tasks { display: flex; flex-direction: column; }
.pt-task { border-top: 1px solid var(--line); }
.pt-task:first-child { border-top: 0; }
.pt-task__row { display: grid; grid-template-columns: 110px minmax(160px, 1fr) minmax(130px, 220px) 100px 20px; gap: 12px; align-items: center; padding: 12px 18px; cursor: pointer; list-style: none; }
.pt-task__row::-webkit-details-marker { display: none; }
.pt-task__row:hover { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.pt-task__title { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.pt-task__who { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); min-width: 0; }
.pt-task__due { font-size: 13px; font-weight: 600; color: var(--text); }
.pt-task__status { padding: 3px 10px; border-radius: 999px; background: var(--mint-soft); color: var(--mint-dark); font-size: 11.5px; font-weight: 600; text-align: center; white-space: nowrap; }
.pt-task__status--completed { background: #dff5e6; color: #1f6b3a; }
.pt-task__status--pending_approval { background: light-dark(#fff1d6, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.pt-task__chevron { color: var(--muted); transition: transform .15s; }
.pt-task[open] .pt-task__chevron { transform: rotate(180deg); }
.pt-task__body { padding: 4px 18px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.pt-task__wait { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 10px; background: light-dark(#fff8e6, var(--dk-warning-soft)); border: 1px solid light-dark(#f0cd7a, var(--dk-line)); color: light-dark(#6b4600, var(--dk-warning-text)); font-size: 13px; }
.pt-task__desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.pt-task__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; margin: 0; }
.pt-task__meta dt { font-size: 11.5px; color: var(--muted); }
.pt-task__meta dd { margin: 0; font-weight: 600; color: var(--ink); }
@media (max-width: 720px) { .pt-task__row { grid-template-columns: 1fr auto; } .pt-task__status, .pt-task__who, .pt-task__due { grid-column: 1; } }

.project-workspace .record-hero__sub { display: flex; align-items: center; gap: 6px; }
.project-workspace .record-hero__sub svg { flex: none; }

/* Aşama akışı: örnekteki gibi sade — ince çizgi, orta boy düğüm, düz açıklama satırı */
.pd-steps { margin: 14px 0 12px; }
.pd-step::before { top: 16px; height: 2px; }
.pd-step__node { width: 34px; height: 34px; border-width: 2px; }
.pd-step--active .pd-step__node { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.pd-step__dot { width: 12px; height: 12px; }
.pd-step strong { font-size: 13.5px; }
.pd-step small { font-size: 11.5px; }
.pd-steps--few .pd-step { flex: 0 1 230px; }
.pd-steps--few .pd-step:first-child:last-child { align-items: flex-start; text-align: left; padding-left: 0; }
.pd-stage-note { padding: 0; background: none; border-radius: 0; color: var(--muted); font-size: 13.5px; }

/* ───── Görevler sekmesi: sade süzgeç, sütun başlıkları ───── */
.pt-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.pt-pill:hover { border-color: var(--primary); }
.pt-pill.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pt-pill__count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); font-size: 11.5px; text-align: center; color: var(--ink); }
.pt-pill.is-active .pt-pill__count { background: rgba(255, 255, 255, .25); color: #fff; }
.pt-pill--late:not(.is-active) .pt-pill__count { background: light-dark(#fff1d6, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.pt-pill--blocked:not(.is-active) .pt-pill__count { background: light-dark(#fde2e2, var(--dk-danger-soft)); color: light-dark(#b91c1c, var(--dk-danger-text)); }
.pt-filter__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-filter__form .form-input { min-height: 38px; max-width: 220px; }
.pt-task__row--head { cursor: default; padding-top: 8px; padding-bottom: 8px; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pt-task__row--head:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.pt-task__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-task__snippet { color: var(--muted); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.pt-task__desc { padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.pt-task__desc small { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pt-task__desc p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.pt-task__actions { display: flex; justify-content: flex-end; }
@media (max-width: 720px) { .pt-task__row--head { display: none; } }

.pd-step--end .pd-step__node { border-style: dashed; color: var(--muted); }
.pd-step--end.pd-step--done .pd-step__node { border-style: solid; color: #fff; }
.pd-step--end strong { color: var(--muted); }
.pd-step--end.pd-step--done strong { color: var(--ink); }
.pd-step--prev-done::before { background: var(--primary); }
.pd-stage-total { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }

/* Proje başlığı: "Diğer işlemler" açılır menüsü KESİLMESİN — taşma görünür, süs halkası
   başlığın içinde bir degrade olarak çizilir (dışarı taşmaz). */
.project-workspace .record-hero { overflow: visible; z-index: 5; }
.project-workspace .record-hero::after {
  inset: 0; width: auto; height: auto; border: 0; border-radius: var(--radius-lg);
  background: radial-gradient(circle at calc(100% - 30px) 0, transparent 92px, rgba(255, 255, 255, .07) 94px, rgba(255, 255, 255, .07) 126px, transparent 128px);
}
.project-workspace .workspace-more__actions { z-index: 30; color: var(--ink); }

/* Proje kartı: durum + üç nokta menüsü */
.project-workspace .project-card__head { padding-right: 150px; }
.card-menu { position: relative; }
.card-menu__btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.card-menu__btn:hover, .card-menu__btn[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink); }
.card-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; display: flex; flex-direction: column; min-width: 170px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 28px rgba(20, 30, 60, .16); }
.card-menu__list.hidden { display: none; }
.card-menu__item { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.card-menu__item:hover { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.card-menu__item--danger { color: light-dark(#b91c1c, var(--dk-danger-text)); }
.card-menu__item--danger:hover { background: light-dark(#fde8e8, var(--dk-danger-soft)); }

.hero-menu .card-menu__list { right: 0; }
.hero-menu .card-menu__item { color: var(--ink); }
.hero-menu .card-menu__item--danger { color: light-dark(#b91c1c, var(--dk-danger-text)); }

/* Proje başlığındaki tarihler: ikon + "Başlangıç: 29 Eyl 2026 | Termin: 09 Eki 2026" */
.record-hero__dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.record-hero__dates span { display: inline-flex; align-items: center; gap: 7px; }
.record-hero__dates strong { color: #fff; font-weight: 700; }
/* Termin "Revize Et" bağlantısı (koyu başlık bandında açık renk) ve revize sayısı. */
.record-hero__revise { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; background: rgba(255, 255, 255, .14); }
.record-hero__revise:hover { background: rgba(255, 255, 255, .24); }
.record-hero__revise--muted { background: transparent; color: rgba(255, 255, 255, .78); text-decoration: underline; text-underline-offset: 2px; }
/* Termin revize modalı + geçmişi. */
.due-revise__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.due-history { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.due-history h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.due-history__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.due-history__row { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.due-history__row small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.due-history__row p { margin: 4px 0 0; color: var(--ink); white-space: pre-wrap; }
.record-hero__dates-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .3); }
.pt-actions { justify-content: flex-end; margin-block: 14px; }

/* ───── Görevler sekmesi: süzgeç çubuğu ───── */
.pt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 1px 3px rgba(20, 30, 60, .05); }
.pt-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.pt-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.pt-pill:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); color: var(--ink); }
.pt-pill.is-active { background: var(--primary); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 35%, transparent); }
.pt-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.pt-pill--late .pt-pill__dot { background: #d97706; }
.pt-pill--blocked .pt-pill__dot { background: #dc2626; }
.pt-pill--pool .pt-pill__dot { background: #6b7280; }
.pt-pill--completed .pt-pill__dot { background: #16a34a; }
.pt-pill.is-active .pt-pill__dot { background: #fff; }
.pt-pill__count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, var(--surface)); font-size: 11.5px; text-align: center; color: var(--ink); }
.pt-pill.is-active .pt-pill__count { background: rgba(255, 255, 255, .25); color: #fff; }
.pt-bar__form { display: flex; align-items: center; gap: 8px; margin: 0; }
.pt-field { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, var(--surface)); color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.pt-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); background: var(--surface); }
.pt-field input, .pt-field select { border: 0; outline: 0; background: transparent; font-size: 13.5px; color: var(--ink); min-width: 0; }
.pt-field--search input { width: 120px; }
.pt-field--select select { max-width: 120px; padding-right: 6px; }
.pt-clear { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.pt-clear:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink); }
.pt-view { flex: none; }
.pt-manage { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pt-manage > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink); list-style: none; }
.pt-manage > summary::-webkit-details-marker { display: none; }
.pt-manage[open] .pd-manage__chevron { transform: rotate(180deg); }
.pd-link--arrow { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .pt-bar__form, .pt-field--search, .pt-field--search input { width: 100%; } .pt-pills { margin-right: 0; } }
.pt-actions { display: flex; justify-content: flex-end; }

.project-card__dates { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.project-card__dates > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.project-card__dates strong { font-size: 14.5px; color: var(--ink); }
.project-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--muted); }
.project-sort select { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; }
.pt-actions .topbar-actions, .pt-bar__add { margin-left: auto; }
.pt-bar__add { flex: none; }
/* Büyük sihirbaz penceresi: başlık ve × her zaman görünür, yalnız içerik kayar */
.modal.xwide:has(> .project-wizard--modal) { display: flex; flex-direction: column; overflow: hidden; }
.modal.xwide:has(> .project-wizard--modal) > .modal-header { flex: none; }
/* Kaydırma kutusu kenardaki alanların odak halkasını KESMESİN: soldan da 6px nefes
   (aynı kadar negatif kenar boşluğuyla — hizalama değişmez). */
.modal.xwide > .project-wizard--modal { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 18px 0 6px; margin: -4px -18px 0 -6px; scrollbar-gutter: stable; }
.project-wizard--modal .wizard-actions { position: sticky; bottom: 0; z-index: 8; background: var(--surface); padding-bottom: 6px; }

/* Görev satırında birden çok kişi */
.wizard-col--people { gap: 6px; }
.wizard-people-more { display: flex; flex-direction: column; gap: 6px; }
.wizard-people-more:empty { display: none; }
.wizard-person { display: flex; gap: 6px; align-items: center; }
.wizard-person select { flex: 1; min-width: 0; }
.wizard-add-person { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--primary); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wizard-add-person:hover { text-decoration: underline; }
.wizard-task__main { align-items: start; }

/* Proje listesi: sekmeler + sıralama + süzgeç TEK kartta; gri sekme zemini sıralamaya kadar uzar */
.project-list-card { margin-bottom: 20px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 1px 3px rgba(20, 30, 60, .05); }
.project-list-card .project-toolbar { flex-wrap: nowrap; margin-bottom: 0; padding: 4px; border-radius: 14px; background: light-dark(var(--hue-f1f5f3), var(--dk-surface-soft)); }
.project-list-card .project-toolbar .seg { background: transparent; padding: 0; flex: 1 1 auto; }
.project-list-card .project-sort { margin-left: 0; padding-right: 6px; flex: none; }
.project-list-card .project-filter-bar { margin: 14px 0 0; padding: 14px 4px 2px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.project-list-card .project-filter-bar .btn { height: 40px; padding-inline: 18px; font-weight: 700; }
@media (max-width: 720px) { .project-list-card .project-toolbar { flex-wrap: wrap; } }

/* Görev satırında kişiler: seçiciler aynı genişlikte, sağdaki boşlukta "+" / "×" */
.wizard-task .wizard-person-first select.form-input, .wizard-task .wizard-people-more select.form-input { width: calc(100% - 44px); max-width: none; }
.wizard-person { display: block; position: relative; }
.wizard-person > .btn, .wizard-person-add { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; }
.wizard-person-first { position: relative; }
.wizard-person-add { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--primary); font-size: 18px; font-weight: 700; cursor: pointer; }
.wizard-person-add:hover { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.wizard-task__main { align-items: start; }
.wizard-task__remove { align-self: start; margin-top: 22px; }
/* İkinci satır: önkoşul (geniş) + öncelik (dar). Tarihin altında proje termini ipucu. */
.wizard-task__meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 170px); gap: 10px; margin-top: 10px; }
@media (max-width: 720px) { .wizard-task__meta { grid-template-columns: 1fr; } }
.wizard-due-hint { font-size: 11.5px; color: var(--muted); }
.wizard-due-hint.is-late { color: var(--danger); font-weight: 600; }
.wizard-project-due { margin-left: auto; align-self: center; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
/* Yapılacak maddeleri: görev satırının içinde, açıklamanın altında. */
.wizard-checklist { margin-top: 10px; }

/* ───── Görev detayı (td-*): sade kartlar, adımlar ana kart ───── */
.td-main { gap: 16px; }
.td-card { padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 1px 3px rgba(20, 30, 60, .05); }
.td-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.td-card__head > div:not(.checklist-bar):not([class*="progress"]) { flex: 1; min-width: 0; }
.td-card__head h2, .td-summary h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.td-card__head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.td-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.td-text { margin: 0; font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; color: var(--ink); }
.td-empty { margin: 0; font-size: 13px; color: var(--muted); }

/* Bağlam şeridi: nereden geldi · neyi bekliyor · geri bildirim */
.td-context { display: flex; flex-direction: column; gap: 10px; }
.td-context:empty { display: none; }
.td-source, .td-wait { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.td-source--project { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 25%, var(--line)); }
.td-source__icon, .td-wait__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.td-source small, .td-wait small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted); }
.td-source strong, .td-wait strong { font-size: 14px; color: var(--ink); }
.td-source__stage { margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.td-wait { background: light-dark(#fff8e6, var(--dk-warning-soft)); border-color: light-dark(#f0cd7a, var(--dk-line)); }
.td-wait__icon { background: light-dark(#ffe9ad, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.td-wait p { margin: 2px 0 0; font-size: 13px; color: light-dark(#6b4600, var(--dk-warning-text)); }
.td-wait ul { margin: 4px 0 0; padding-left: 16px; list-style: disc; font-size: 13px; }
.td-wait--others { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border-color: var(--line); }
.td-wait--others .td-wait__icon { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }

/* Geri bildirim kartları (revize / ret) */
.td-feedback { margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid light-dark(#f0cd7a, var(--dk-line)); border-left: 4px solid #e0a100; background: light-dark(#fff8e6, var(--dk-warning-soft)); }
.td-feedback--rejected { border-color: light-dark(#f1b3b3, var(--dk-line)); border-left-color: var(--danger); background: light-dark(#fdf0f0, var(--dk-danger-soft)); }
.td-feedback strong { font-size: 13px; color: var(--ink); }
.td-feedback small { margin-left: 8px; color: var(--muted); font-size: 12px; }
.td-feedback p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; white-space: pre-line; color: var(--ink); }
.td-context > .td-feedback { margin-top: 0; }

/* Adımlar */
.td-lock { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: light-dark(#fff8e6, var(--dk-warning-soft)); border: 1px solid light-dark(#f0cd7a, var(--dk-line)); color: light-dark(#6b4600, var(--dk-warning-text)); font-size: 13px; }
.td-lock--done { background: light-dark(#e6f4ea, var(--dk-surface-soft)); border-color: light-dark(#a8d5b5, var(--dk-line)); color: light-dark(#176b3a, #7ccf9a); }
.td-steps__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.td-step { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--ink) 2%, var(--surface)); }
.td-step.is-done { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.td-step.is-approved { border-color: color-mix(in srgb, #1f9d55 40%, var(--line)); }
.td-step.is-revision, .td-step.is-rejected { border-color: light-dark(#f0cd7a, var(--dk-line)); }
.td-step__row { display: flex; align-items: center; gap: 12px; }
.td-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-step__title { font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.td-step.is-done .td-step__title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); color: var(--muted); }
.td-step__body small { font-size: 12px; color: var(--muted); }
.td-check-form { margin: 0; display: inline-flex; }
.td-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; padding: 0; border: 2px solid color-mix(in srgb, var(--ink) 30%, var(--surface)); border-radius: 8px; background: var(--surface); color: #fff; cursor: pointer; transition: background .12s, border-color .12s; }
.td-check:hover:not(:disabled):not(.is-static) { border-color: var(--primary); }
.td-check.is-on { background: var(--primary); border-color: var(--primary); }
.td-check.is-static { cursor: default; }
.td-check:disabled { opacity: .55; cursor: not-allowed; }
.td-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--muted); }
.td-badge--submitted { background: light-dark(#e4efff, var(--dk-info-soft)); color: light-dark(#1f4fa8, var(--dk-info-text)); }
.td-badge--approved { background: #dff5e7; color: light-dark(#176b3a, var(--dk-lime-text)); }
.td-badge--revision { background: light-dark(#ffe9ad, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.td-badge--rejected { background: light-dark(#fbdcdc, var(--dk-danger-soft)); color: light-dark(#a12626, var(--dk-danger-text)); }
.td-badge--info { margin-left: 8px; background: light-dark(#e4efff, var(--dk-info-soft)); color: light-dark(#1f4fa8, var(--dk-info-text)); }
.td-step__tools { display: inline-flex; gap: 2px; margin-left: 4px; }
.td-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 5px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.td-tool:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink); }
.td-step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-left: 38px; }
.td-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px dashed color-mix(in srgb, var(--primary) 50%, var(--line)); border-radius: 10px; color: var(--primary); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.td-link-btn:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.td-files { margin: 10px 0 0 38px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.td-files li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.td-files small { color: var(--muted); }
.td-step > .td-feedback { margin-left: 38px; }
.td-review { margin-top: 10px; padding: 10px 12px 12px 14px; margin-left: 38px; border-radius: 12px;
  background: light-dark(#e4efff, color-mix(in srgb, #5b8def 16%, var(--surface)));
  border: 1px solid light-dark(#b8d0f5, color-mix(in srgb, #5b8def 40%, var(--surface))); }
.td-review__hint { margin: 0; font-size: 13px; color: light-dark(#1f4fa8, #a9c4f5); font-weight: 600; }
.td-review .td-step__actions { padding-left: 0; }
.td-review__form { margin-top: 10px; }
.td-review__form label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.td-add { display: flex; gap: 8px; margin-top: 14px; }
.td-add .form-input { flex: 1; }

/* Künye (sağ sütun) */
.td-summary { padding: 16px 18px; }
.td-summary h3 { margin-bottom: 10px; }
.td-summary dl { margin: 0; display: flex; flex-direction: column; }
.td-summary dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.td-summary dl > div:first-child { border-top: 0; }
.td-summary dt { color: var(--muted); flex: none; }
.td-summary dd { margin: 0; font-weight: 600; text-align: right; color: var(--ink); overflow-wrap: anywhere; }
.td-summary dd.is-late { color: var(--danger); }
.td-summary dd small { margin-left: 4px; font-weight: 500; }
.td-wait li small { display: inline; margin-left: 2px; }
.td-wait--others li { margin: 2px 0; }

/* ───── Görev detayı: tek sütun düzeni ───── */
.td-page { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.td-page > .record-hero { margin-bottom: 0; position: relative; }
.td-hero .record-hero__aside small.is-late { color: #ffd37a; }
.td-menu { margin-left: 8px; align-self: flex-start; }
.td-menu__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.td-menu__btn:hover, .td-menu__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .26); }
.td-menu .card-menu__list { min-width: 220px; }
.td-menu__cancel > summary { list-style: none; cursor: pointer; }
.td-menu__cancel > summary::-webkit-details-marker { display: none; }
.td-menu__cancel form { padding: 8px 10px 10px; }
.td-menu__cancel label { display: block; margin: 6px 0 4px; font-size: 12px; font-weight: 700; }
.td-menu__cancel .hint { font-size: 12px; }
.td-menu__cancel .btn { margin-top: 8px; }

/* Künye şeridi */
.td-strip { display: flex; flex-wrap: wrap; gap: 8px 0; padding: 14px 8px; }
.td-strip__item { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; padding: 4px 18px; border-left: 1px solid var(--line); min-width: 0; }
.td-strip__item:first-child { border-left: 0; }
.td-strip__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.td-strip__icon--warn { background: light-dark(#fde7e7, var(--dk-danger-soft)); color: var(--danger); }
.td-strip small { display: block; font-size: 12px; color: var(--muted); }
.td-strip strong { display: block; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.td-strip strong.is-late { color: var(--danger); }

/* İşlemler kartları: tek sütunda geniş olmasın, düğmeler satırda dursun */
.td-actions { display: flex; flex-direction: column; gap: 12px; }
.td-actions:empty { display: none; }
.td-actions .panel { margin: 0; }
.td-actions .btn-block { width: auto; display: inline-flex; }
.td-actions form { display: inline-block; margin-right: 8px; }
.td-actions form.hidden { display: none; }
.td-actions [data-toggle-target="panel"] { margin-top: 10px; }

.td-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.td-bottom > * { min-width: 0; margin: 0; }
@media (max-width: 860px) { .td-bottom { grid-template-columns: 1fr; } }
.td-page > .td-hero { overflow: visible; z-index: 5; }
.td-hero::after { inset: 0; width: auto; height: auto; border: 0; border-radius: var(--radius-lg); pointer-events: none;
  background: radial-gradient(circle at calc(100% - 30px) 0, transparent 92px, rgba(255, 255, 255, .07) 94px, rgba(255, 255, 255, .07) 126px, transparent 128px); }
.td-menu .card-menu__list { color: var(--ink); }

.td-shared { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.td-shared li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.td-shared li:first-child { border-top: 0; }
.td-shared small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.td-shared__file { display: inline-flex; align-items: center; gap: 5px; margin: 6px 14px 0 0; font-size: 13px; }

/* ───── Görev detayı: referans tasarım (sayfaya yayılan tek sütun) ───── */
.td-page { max-width: none; width: 100%; margin: 0; }
.td-actions .section-head { display: none; }
.td-actions .panel { padding: 16px 20px; }
.td-hero__link { color: #fff; text-decoration: underline; }

/* Yapılacaklar kartı */
.td-steps { padding: 24px 28px; }
.td-steps__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.td-steps__head h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.td-steps__progress { font-size: 14px; color: var(--muted); }
.td-outline-btn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 10px 18px; border: 1.5px solid var(--primary); border-radius: 12px; background: var(--surface); color: var(--primary); font-size: 14px; font-weight: 700; cursor: pointer; }
.td-outline-btn:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.td-outline-btn--sm { margin-left: 0; padding: 6px 16px; font-size: 13px; border-radius: 10px; }
.td-steps .td-add { margin: 0 0 14px; }
.td-rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.td-row { border-top: 1px solid var(--line); background: var(--surface); }
.td-row:first-child { border-top: 0; }
.td-row__main { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.td-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.td-row__title { font-size: 15.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.td-row.is-done .td-row__title { color: var(--ink); }
.td-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13.5px; color: var(--muted); }
.td-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.td-meta-item a { color: var(--muted); text-decoration: none; }
.td-meta-item a:hover { color: var(--primary); }
.td-meta-link { color: var(--muted); cursor: pointer; }
.td-meta-link:hover { color: var(--primary); }
.td-meta-ok { color: #1f9d55; font-weight: 600; }
.td-meta-sep { width: 1px; height: 18px; background: var(--line); }
.td-row .td-check { width: 28px; height: 28px; border-radius: 8px; }
.td-row .td-check.is-on { background: #1f9d55; border-color: #1f9d55; }
.td-row .td-badge { padding: 6px 16px; font-size: 13px; }
.td-badge--working { background: light-dark(#e4efff, var(--dk-info-soft)); color: light-dark(#1f4fa8, var(--dk-info-text)); }
.td-badge--done { background: light-dark(#e6f4ea, var(--dk-surface-mint)); color: light-dark(#176b3a, var(--dk-lime-text)); }
.td-badge--submitted { background: light-dark(#fff0cf, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.td-chevron { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: transform .15s; }
.td-chevron:hover { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--ink); }
.td-row__more { padding: 0 18px 16px 62px; }
.td-row__more:not(.hidden) ~ * { }
.td-row__more > * + * { margin-top: 10px; }
.td-row__more .td-feedback { margin: 0; }
.td-row__more .td-review { margin-left: 0; }
.td-row__tools { display: flex; gap: 6px; }
.td-tool--danger { color: var(--danger); font-size: 12.5px; font-weight: 700; }
.td-row.is-revision, .td-row.is-rejected { background: color-mix(in srgb, light-dark(#f0cd7a, var(--dk-line)) 12%, var(--surface)); }

/* "İş takıldı mı?" sade satırı */
.td-slim { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; box-shadow: 0 1px 3px rgba(20, 30, 60, .05); }
.td-slim:hover { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.td-slim__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--muted); }
.td-slim__chevron { margin-left: auto; color: var(--muted); }

/* Yorumlar ve geçmiş */
.td-link { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--primary); font-size: 14px; font-weight: 600; cursor: pointer; }
.td-history .timeline { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.td-compose .comment-form { display: flex; align-items: center; gap: 10px; position: relative; flex-wrap: wrap; }
.td-compose .comment-form > trix-toolbar { display: none; }
.td-compose .comment-form > trix-editor, .td-compose .comment-form > .trix-content { flex: 1 1 260px; min-height: 48px; max-height: 120px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 14.5px; }
.td-compose__bar { display: inline-flex; align-items: center; gap: 8px; }
.td-compose__attach { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: var(--muted); cursor: pointer; }
.td-compose__attach:hover { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--ink); }
.td-compose__send { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 14px; background: var(--primary); color: #fff; cursor: pointer; }
.td-compose__send:hover { filter: brightness(1.08); }
/* Gönderim sürerken (Turbo `aria-busy` + düğme `disabled`): dosyalı yorum zaman alır, kutu beklediğini söylesin. */
.comment-form[aria-busy="true"] .td-compose__send,
.td-compose__send:disabled { opacity: .55; cursor: progress; }
.comment-form[aria-busy="true"] .td-compose__send svg { animation: td-send-pulse 1s ease-in-out infinite; }
@keyframes td-send-pulse { 50% { transform: translateX(3px); } }
.td-compose .mention-menu { position: absolute; bottom: 100%; left: 0; z-index: 30; }

/* Sayfa altı: kapalı satırlar */
.td-folds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 6px 12px; }
.td-fold { border-top: 1px solid var(--line); }
.td-fold:nth-child(-n+2) { border-top: 0; }
.td-fold__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.td-fold strong { font-size: 15.5px; }
.td-count { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, var(--surface)); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.td-fold__chevron { margin-left: auto; color: var(--muted); transition: transform .15s; }
/* Satır modal açar (Dosyalar · Bağlı notlar): içerik sayfada açılmaz. */
.td-fold--link { display: block; text-decoration: none; border-radius: 14px; }
.td-fold__head { display: flex; align-items: center; gap: 14px; padding: 16px 8px; color: var(--ink); }
.td-fold--link:hover .td-fold__head { color: var(--primary); }
.td-fold--link:hover .td-fold__chevron { color: var(--primary); transform: translateX(2px); }
.td-fold--link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.attachments-modal .attachment-list { margin-top: 12px; }
.attachments-modal .project-file-source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
@media (max-width: 860px) { .td-folds { grid-template-columns: 1fr; } .td-fold:nth-child(2) { border-top: 1px solid var(--line); } .td-row__more { padding-left: 18px; } }
.td-page > turbo-cable-stream-source { display: none; }
.td-check:disabled.is-on { opacity: 1; cursor: default; }
.td-actions .panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.td-actions .panel > .hint { margin: 0; flex: 1 1 320px; }
.td-actions .panel .btn { margin: 0; }
/* İçeriksiz kalan işlem / bağlam kutuları boş beyaz şerit olarak görünmesin */
.td-actions .panel:not(:has(button, form, a, p, input, select)) { display: none; }
.td-context:not(:has(*)) { display: none; }

/* ───── Görev detayı: bütün görünüm (tek "sayfa" kartı, çizgiyle ayrılmış bölümler) ───── */
.td-page { gap: 12px; }
turbo-frame#task-checklist { display: block; }
.td-card__head h2 { font-size: 16px; }
.td-steps__head h2 { font-size: 16px; }
.td-steps__head .td-card__icon { width: 38px; height: 38px; }
.td-steps__progress { font-size: 13px; }
.td-outline-btn { padding: 8px 16px; font-size: 13.5px; }
.td-alert { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: light-dark(#fdf0f0, var(--dk-danger-soft)); border: 1px solid light-dark(#f1b3b3, var(--dk-line)); color: light-dark(#a12626, var(--dk-danger-text)); font-size: 13.5px; }
.td-wait__body p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.td-waiters { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.td-waiters li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.td-waiters b { color: var(--ink); }
.td-waiters span { color: var(--muted); }
.td-waiters a { color: var(--primary); font-weight: 600; }
.td-wait--others .td-wait { }

/* ───── Görev detayı: bölümler birbirine karışmasın (tonlu bölüm başlığı + beyaz gövde) ───── */
.td-strip__icon--wait { background: light-dark(#fff0cf, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.td-strip__sub { display: block; margin: 1px 0 0; font-size: 12.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
.td-strip__more { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--muted); }

.td-stack > .td-card[data-test="task-description"], .td-stack .td-steps { padding: 0; }
.td-stack .td-card__head, .td-stack .td-steps__head { margin: 0; padding: 14px 28px; background: color-mix(in srgb, var(--ink) 3.5%, var(--surface)); border-bottom: 1px solid var(--line); }
.td-stack .td-card__head .td-card__icon, .td-stack .td-steps__head .td-card__icon { width: 34px; height: 34px; border-radius: 10px; }
.td-stack .td-text, .td-stack .td-empty:not(.td-steps .td-empty) { padding: 18px 28px 22px; }
.td-stack [data-test="task-description"] .td-text, .td-stack [data-test="task-description"] .td-empty { margin: 0; }
.td-stack .td-steps > .td-rows, .td-stack .td-steps > .td-add, .td-stack .td-steps > .td-lock, .td-stack .td-steps > .td-alert { margin-left: 28px; margin-right: 28px; }
.td-stack .td-steps > .td-rows { margin-top: 18px; margin-bottom: 22px; }
.td-stack .td-steps > .td-add { margin-top: 18px; }
.td-stack .td-steps > .td-lock, .td-stack .td-steps > .td-alert { margin-top: 18px; }
/* Yapılacaklar v2: "işleme alınmadı" bandı ve değişiklik geçmişi de içerik hizasında. */
.td-stack .td-steps > .td-wait, .td-stack .td-steps > .td-step-log { margin-left: 28px; margin-right: 28px; }
.td-stack .td-steps > .td-wait { margin-top: 18px; margin-bottom: 0; }
.td-stack .td-steps > .td-step-log { margin-top: -6px; margin-bottom: 22px; }
.td-stack .td-steps > .td-empty { padding: 18px 28px 22px; margin: 0; }
.td-stack .td-steps__head .td-outline-btn { padding: 6px 14px; }

/* Görev detayı: bölümler ayrı kartlar */
.td-stack { display: flex; flex-direction: column; gap: 12px; }
.td-stack > .td-card, .td-stack > turbo-frame > .td-card { overflow: hidden; }
.td-stack > .td-strip { padding: 18px 12px; }
.td-stack > .td-context { gap: 12px; }
.td-stack > .td-context > .td-wait, .td-stack > .td-context > .td-feedback { border-radius: 14px; }
.td-stack .td-slim { padding: 16px 22px; }
.td-stack .td-actions { gap: 12px; }

/* Yorumlar ve geçmiş: diğer kartlarla aynı gri başlık bandı */
.td-stack ~ .td-history, .td-page > .td-history { padding: 0; overflow: hidden; }
.td-history > .td-card__head { margin: 0; padding: 14px 28px; background: color-mix(in srgb, var(--ink) 3.5%, var(--surface)); border-bottom: 1px solid var(--line); }
.td-history > .td-card__head .td-card__icon { width: 34px; height: 34px; border-radius: 10px; }
.td-history > .timeline { margin: 0; padding: 18px 28px 6px; }
.td-history > .td-compose { padding: 4px 28px 22px; }

/* ───── Görev listesi: sade çubuk (kısa arama · Filtreler açılır kutusu) ───── */
.task-search-row { flex-wrap: wrap; gap: 10px; }
.task-search-row .task-search-field { flex: 0 1 300px; min-width: 180px; }
.task-project-field { flex: 0 1 200px; min-width: 150px; }
.task-toolbar-spacer { flex: 1 1 0; }
/* Kişi süzgeci: arama kutulu çoklu seçim (`people-filter`) */
.people-filter { position: relative; flex: 0 1 190px; min-width: 150px; }
.people-filter__button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.people-filter__button span { overflow: hidden; text-overflow: ellipsis; }
.people-filter__button svg { flex: none; color: var(--muted); }
.people-filter__button.is-active { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.people-filter__button.is-active svg { color: var(--primary); }
.people-filter__panel { position: absolute; z-index: 45; top: calc(100% + 8px); left: 0; width: 280px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 16px 36px rgba(20, 30, 60, .18); }
.people-filter__panel[hidden] { display: none; }
.people-filter__list { max-height: 280px; margin: 10px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.people-filter__list li[hidden] { display: none; }
.people-filter__option { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.people-filter__option:hover { background: var(--tint-100); }
.people-filter__option input { flex: none; margin: 0; }
.people-filter__option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-filter__empty { margin: 10px 4px 0; }
.people-filter__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .people-filter__panel { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; } }
/* Filtre penceresi DÜĞMEYE değil arama satırının tamamına hizalanır: düğme satırın
   ortasında durduğu için hangi kenarına hizalansa bir ekran boyutunda sayfanın
   kenarından taşıyıp kesiliyordu. Satırın sağına yaslı, satırdan geniş olmaz. */
.task-search-row { position: relative; }
.task-filter-dd { position: static; }
.task-filter-btn { display: inline-flex; align-items: center; gap: 8px; }
.task-filter-btn .count { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.task-filter-pop { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; left: auto; width: min(620px, 100%); padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 16px 36px rgba(20, 30, 60, .18); }
.task-filter-pop.hidden { display: none; }
.task-filter-pop .task-focus-row { padding: 0 0 14px; }
.task-filter-pop .task-filter-grid { margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
@media (max-width: 720px) { .task-filter-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 70vh; overflow-y: auto; } }

/* Kart ve Liste aynı yerleşim: arama satırı sayfayı doldurur, tablo beyaz kartta */
.task-search-row .task-search-field { flex: 1 1 260px; max-width: none; }
.task-table-card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 1px 3px rgba(20, 30, 60, .05); overflow: hidden; }
.task-workspace-panel.is-board .toolbar-note { padding-left: 0; padding-right: 0; }
.task-workspace-panel.is-board .task-table-card .data-table { margin: 0; }
.task-workspace-panel.is-board .toolbar-note { background: transparent; border: 0; margin: 0 0 12px; }
.task-search-row { flex-wrap: nowrap; }
@media (max-width: 860px) { .task-search-row { flex-wrap: wrap; } }
.task-search-row .task-search-field { flex: 1 1 0; min-width: 160px; }
.th-kanban--single { grid-template-columns: minmax(0, 1fr); }
.th-kanban--single .kanban-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.th-kanban--single .kanban-column > .kanban-title, .th-kanban--single .kanban-column > .th-empty { grid-column: 1 / -1; }
@media (max-width: 860px) { .th-kanban--single .kanban-column { grid-template-columns: minmax(0, 1fr); } }

.task-workspace-lead { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; min-width: 0; }
.task-workspace-lead .record-hero__icon { flex: 0 0 48px; }
/* Havuz / tek sütunlu kart panosunda sütun gereksiz yere uzamasın */
.th-kanban--single .kanban-column { align-content: start; min-height: 0; }
/* Yapılacaklar sayfası kenar boşluksuz, sayfayı doldurur */
.todo-workspace { max-width: none; }

/* Görev adımları — Yapılacaklar duvarında kart */
.todo-step-card { display: flex; flex-direction: column; gap: 6px; }
.todo-step-card h2 { margin: 0; font-size: 16px; }
.todo-step-card h2 a { color: var(--ink); text-decoration: none; }
.todo-step-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.todo-step-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.todo-step-list li .td-check { width: 22px; height: 22px; border-radius: 7px; }
.todo-step-list li span.grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.todo-step-list li .td-badge { padding: 2px 9px; font-size: 11.5px; }
.todo-step-list li.is-done .grow { color: var(--muted); text-decoration: line-through; }
.todo-step-card .todo-card-footer { margin-top: 10px; }
.todo-step-list .td-outline-btn--sm { padding: 3px 10px; font-size: 12px; white-space: nowrap; flex: none; }

/* ───── Revizeli işler ───── */
.record-hero__pill--rework { background: rgba(255, 196, 77, .25); border-color: rgba(255, 214, 128, .6); color: #fff1c9; }
.th-tag.rework { background: light-dark(#ffe9ad, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.badge-amber { background: light-dark(#ffe9ad, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.th-card--rework { border-left: 4px solid #e0a100; }
.td-rework-banner { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 12px 16px; border: 1px solid light-dark(#f0cd7a, var(--dk-line)); border-radius: 14px; background: light-dark(#fff8e6, var(--dk-warning-soft)); color: light-dark(#6b4600, var(--dk-warning-text)); font-weight: 600; text-decoration: none; }
.td-rework-banner span { flex: 1; }
.todo-step-card.is-rework { border-left: 4px solid #e0a100; }
.todo-step-card__tag { align-self: flex-start; }
.td-tool-note { font-size: 12px; color: var(--muted); }

/* Onay kartı: ipucu solda, form + Reddet sağda, düzenli */
.td-actions .panel > .hint { align-self: center; }
.td-actions [data-controller="toggle"] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; flex: 2 1 420px; }
.td-actions [data-controller="toggle"] > form { flex: 1 1 300px; margin: 0; }
.td-actions [data-controller="toggle"] > [data-toggle-target="panel"] { flex: 1 1 100%; margin: 0; }

/* Onay kartı (puansız): ipucu solda; [Onayla] [Revize iste] sağda yan yana; revize notu altta */
.td-actions [data-controller="toggle"] { flex: 0 1 auto; align-items: center; justify-content: flex-end; }
.td-actions [data-controller="toggle"] > form { flex: 0 0 auto; }
.td-actions [data-controller="toggle"] > .btn { flex: 0 0 auto; margin: 0; }
.td-actions [data-controller="toggle"] > [data-toggle-target="panel"] { flex: 1 1 100%; }
.td-actions [data-controller="toggle"] > [data-toggle-target="panel"] textarea { width: 100%; }
.td-actions [data-controller="toggle"] { flex: 1 1 420px; }

/* Proje açıklaması: tek paragraf, kapalıyken 3 satır */
.pd-clamp__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pd-clamp.is-long:not(.is-expanded) .pd-clamp__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd-more-btn { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--primary); font-size: 14px; font-weight: 700; cursor: pointer; }
.pd-more-btn:hover { text-decoration: underline; }

/* Proje görevleri çubuğu: arama · ekip · görünüm · "Görev ekle" yan yana, sağda */
.pt-bar { gap: 12px 10px; }
.pt-bar__add { margin-left: 0; }
.pt-bar__form { gap: 10px; }

/* Proje sekmelerinde (toplantı · not · dosya) kartlar iç içe girmesin */
.project-workspace > section.panel { margin: 0 0 16px; }

/* Yapılacaklar adım kartı: uzun başlık harf harf kırılmasın — başlık satırın tamamını alır,
   etiket ve düğme gerekirse alt satıra iner */
.todo-step-list li { flex-wrap: wrap; row-gap: 6px; }
.todo-step-list li span.grow { flex: 1 1 140px; min-width: 120px; word-break: normal; overflow-wrap: anywhere; }
.todo-step-list li .td-check { flex: none; }

/* Proje "Neredeyiz?" kartı */
.pd-progress { display: flex; flex-direction: column; gap: 8px; }
.pd-progress .checklist-bar-track { display: block; width: 100%; height: 10px; border-radius: 999px; }
.pd-progress__stats { margin: 0; font-size: 13.5px; color: var(--muted); }
.pd-progress__stats strong { color: var(--ink); }
.pd-progress__tasks { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pd-progress__tasks li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pd-progress__tasks li:last-child { border-bottom: 0; }
.pd-progress__title a { font-weight: 600; color: var(--ink); text-decoration: none; }
.pd-progress__title small { color: var(--muted); margin-left: 4px; }
.pd-progress__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pd-progress .checklist-bar-track { background: color-mix(in srgb, var(--ink) 9%, var(--surface)); overflow: hidden; }
.pd-progress .checklist-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.pd-progress .checklist-bar-track { flex: none; }

/* Görev adım kartları enine geniş: iki-üç sütunlu ızgara (masonry değil) */
.todo-card-grid.todo-step-grid { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 16px; align-items: start; }
.todo-step-grid > * { margin-bottom: 0; }
@media (max-width: 560px) { .todo-card-grid.todo-step-grid { grid-template-columns: minmax(0, 1fr); } }

/* "Hangi aşamadayız?" kartında yapılacak adımların durumu. */
.pd-step-activity { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.pd-step-activity__stats { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.pd-step-activity__stats strong { color: var(--ink); }
.pd-step-activity__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pd-step-activity__list li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; font-size: 13.5px; line-height: 1.5; }
.pd-step-activity__text { min-width: 0; overflow-wrap: anywhere; }
.pd-step-activity__list small { white-space: nowrap; }

/* Onaya gelen işin karar kartı (uyarının altında) */
/* Görevin karar kartı (yönetici: Onayla / Revize iste). Adım içindeki küçük onay
   kutusu `.td-review`dur — kök sınıf ayrı, yoksa ikisi birbirinin kenar boşluğunu
   ve düzenini alıyordu. Gövde başlık metnine hizalı: ikon (40) + boşluk (14). */
.td-decision { padding: 18px 22px 20px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.td-decision__head { display: flex; align-items: flex-start; gap: 14px; }
.td-decision__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.td-decision__text { min-width: 0; padding-top: 1px; }
.td-decision__text strong { display: block; font-size: 15px; color: var(--ink); }
.td-decision__text p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.td-decision__body { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 0 54px; }
.td-decision__round { font-size: 13px; line-height: 1.5; color: var(--ink); }
.td-decision__round p { margin: 4px 0 0; color: var(--muted); }
.td-decision__chip { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); font-size: 12px; font-weight: 700; }
.td-decision__steps { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; line-height: 1.5; }
.td-decision__steps strong { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13.5px; }
.td-decision__steps strong svg { color: var(--muted); }
.td-decision__steps p { margin: 4px 0 0; color: var(--muted); }
.td-decision__steps ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.td-decision__steps li { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); color: var(--ink); }
.td-decision__steps li small { margin-left: auto; flex: none; color: var(--muted); font-size: 12px; }
.td-decision__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.td-decision__actions form { margin: 0; }
.td-decision__panel { padding-top: 14px; border-top: 1px solid var(--line); }
.td-decision__panel.hidden { display: none; }
@media (max-width: 640px) { .td-decision__body { margin-left: 0; } }
.td-review__label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.td-review__label:first-child { margin-top: 0; }
.td-review__drop { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.td-review__file { flex: 1; min-width: 0; font-size: 13px; }
.td-review__buttons { display: flex; gap: 10px; margin-top: 14px; }
.td-feedback__files { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.td-feedback__files li { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* Revize: neyle ilgili (adım / görev) ve aşama kartında "en son" işareti */
.td-chip { display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--ink); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.td-chip--task { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.td-feedback__about { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.td-feedback__about > span:first-child { font-size: 12.5px; color: var(--muted); }
.td-review__steps { margin: 12px 0 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.td-review__steps legend { padding: 0; margin: 0 0 6px; }
.td-review__step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13.5px; cursor: pointer; }
.td-review__step small { margin-left: auto; color: var(--muted); }
.pd-step-activity__title { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.pd-step-activity__title small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.pd-step-activity__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; }
.pd-step-activity__when { display: inline-flex; align-items: center; gap: 8px; }
.pd-latest { padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; }
.pd-step-activity__list li.is-latest { padding: 8px 10px; margin: 0 -10px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }

/* Künye şeridinde proje adı tam görünür (çip gibi kırpılmaz). */
.td-strip__item--project { min-width: 0; }
.td-strip__project { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.td-strip__project:hover { text-decoration: underline; }
.td-strip__none { color: var(--muted); font-weight: 600; }

/* ───── Görev detayı: sol içerik + sağ işlem sütunu (canlıdaki düzen) ───── */
.td-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.td-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.td-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.td-side > * { margin: 0; }
.td-side .td-actions { gap: 12px; }
.td-side .td-actions .section-head { display: flex; }
.td-side .td-actions .panel { display: block; padding: 18px 20px; }
.td-side .td-actions .panel > .hint { margin: 0 0 12px; }
.td-side .td-actions form { display: block; margin: 0 0 8px; }
.td-side .td-actions .btn, .td-side .td-actions .btn-block { width: 100%; justify-content: center; }
.td-side .td-actions .btn:last-child, .td-side .td-actions form:last-child { margin-bottom: 0; }
.td-side .panel { border-radius: 18px; }
.td-side .td-slim { width: 100%; }
@media (max-width: 1100px) {
  .td-layout { grid-template-columns: 1fr; }
  .td-side { order: -1; }
}
.td-page > .td-strip { padding: 18px 12px; }

/* Sağ sütun: Görev Zaman Geçmişi — dikey çizgi, simgeli satırlar, en yeni üstte */
.td-side-history .section-head p { margin: 2px 0 0; }
.th-rail { position: relative; margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.th-rail::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.th-rail__item { position: relative; display: flex; gap: 12px; align-items: flex-start; }
.th-rail__dot { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--surface); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.th-rail__item--ok .th-rail__dot { background: #dff3e6; color: #1e7a45; }
.th-rail__item--bad .th-rail__dot { background: light-dark(#fde7e7, var(--dk-danger-soft)); color: light-dark(#b25450, var(--dk-danger-text)); }
.th-rail__item--warn .th-rail__dot { background: light-dark(#fff1d6, var(--dk-warning-soft)); color: light-dark(#9a6a00, var(--dk-warning-text)); }
.th-rail__body { min-width: 0; padding-top: 2px; }
.th-rail__body p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.th-rail__body time { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.th-rail-scroll { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; margin-top: 16px; }
.th-rail-scroll .th-rail { margin-top: 0; }
/* Onay kartında "kaçıncı onay" bilgisi */
.td-review__history { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #e0a100 12%, var(--surface)); font-size: 13px; line-height: 1.5; color: var(--ink); }
.td-review__history strong { margin-right: 6px; }
.td-review__history p { margin: 4px 0 0; color: var(--muted); }

/* Onay kartında çalışanın notu / dosyaları */
.td-decision__submission { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; }
.td-decision__submission strong { display: block; font-size: 13px; color: var(--ink); }
.td-decision__submission p { margin: 6px 0 0; white-space: pre-line; color: var(--ink); }
.td-decision__submission ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.td-decision__submission li { display: flex; align-items: center; gap: 8px; }

/* Boşluklar: önceki gönderim kutusu ile düğme; yapılacaklar başlığı ile ilk satır */
.td-review__history--spaced { margin: 0 0 16px; }
.td-stack .td-steps > .td-rows { margin-top: 24px; }
.td-stack .td-steps > .td-add { margin-top: 24px; }
.comment-card-actions[hidden] { display: none; }

/* Zemin / kart ayrımı: kartlar arka plandan biraz daha belirgin (ince çerçeve + hafif gölge) */
.td-card, .td-side .panel, .td-decision, .td-strip { border-color: color-mix(in srgb, var(--ink) 16%, var(--surface)); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 9%, transparent), 0 8px 20px color-mix(in srgb, var(--ink) 6%, transparent); }
.timeline:has(.comment-card) > #timeline-empty { display: none; }

/* Onay Geçmişi: sade liste — tur başlığı + durum, kim/ne zaman, not / karar */
.td-rounds__list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
.td-round { padding: 12px 0; border-top: 1px solid var(--line); }
.td-round:first-child { border-top: 0; padding-top: 4px; }
.td-round__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.td-round__head strong { font-size: 14px; color: var(--ink); }
.td-round__head .td-badge { font-size: 11.5px; padding: 2px 9px; }
.td-round__who { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.td-round__note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); white-space: pre-line; }
.td-round__note b { color: var(--muted); font-weight: 600; }
.td-round__files { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.td-round__files li { display: inline-flex; align-items: center; gap: 6px; }
.td-round__decision { margin-top: 10px; padding: 8px 0 2px 12px; border-left: 2px solid color-mix(in srgb, var(--danger) 55%, var(--surface)); }
.td-round--ok .td-round__decision { border-left-color: #1e7a45; }
.td-round__decision .td-round__who { margin-top: 0; }
.td-round__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.td-row.is-revision-item .td-row__title { color: var(--ink); }
.td-row.is-frozen { opacity: .96; }
.td-row__origin { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* Yapılacaklar v2 — satırın solundaki işaret TIKLANMAZ (sıra numarası / sonuç); tamamlama
   sağdaki "Tamamla" düğmesiyle, onay penceresinden. Eski teslim (revize kararı almış
   sürüm) gri ve salt okunur; ara onay ve kilit satırları amber / soluk. */
.td-row .td-step-num { color: var(--muted); font-size: 12.5px; font-weight: 700; border-width: 1.5px; }
.td-row .td-step-num.is-on { color: #fff; }
.td-row.is-history { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.td-row.is-history .td-row__title { color: var(--muted); }
.td-row.is-locked .td-row__title { color: var(--muted); }
.td-badge--history { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--muted); }
.td-badge--locked { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--muted); }
.td-row__action { flex: none; white-space: nowrap; text-decoration: none; }
.td-gate { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; line-height: 1.45; color: color-mix(in srgb, #b07800 85%, var(--ink)); }
.td-gate svg { flex: none; margin-top: 2px; }
.td-gate--wait { color: var(--muted); }
.td-icon-btn { padding: 0; border: 0; background: none; font: inherit; }
.td-steps__notice { margin: 0 0 14px; }
.td-step-history { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.td-step-history small { margin-left: 6px; opacity: .8; }
.td-step-history li.is-deleted { color: color-mix(in srgb, var(--danger) 70%, var(--muted)); }
.td-step-log { margin-top: 14px; }
.td-step-log__deleted { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: color-mix(in srgb, var(--danger) 80%, var(--ink)); font-size: 12px; font-weight: 700; }
.td-row__edited { display: inline-flex; align-items: center; gap: 4px; }
/* Satırın sağındaki ikon işlemler (ara onay · düzenle · sil) — ok düğmesiyle aynı dil. */
.td-row__icons { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.td-row__icons form { margin: 0; display: inline-flex; }
.td-icon-action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; }
.td-icon-action:hover { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--primary); }
.td-icon-action--danger:hover { color: var(--danger); }
.td-row__form { margin: 0 18px 14px 62px; }
/* Yazılı küçük işlem düğmesi (ara onay) — ok/ikon düğmeleriyle aynı yükseklik. */
.td-text-action { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.td-text-action:hover { border-color: var(--primary); color: var(--primary); }
.td-text-action svg { color: var(--primary); }
.td-row__icons { gap: 6px; }
/* Düzenle / sil de "Ara onay" düğmesiyle aynı çerçevede (kare, aynı yükseklik). */
.td-row__icons .td-icon-action { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface); }
.td-row__icons .td-icon-action:hover { border-color: var(--primary); background: var(--surface); }
.td-row__icons .td-icon-action--danger:hover { border-color: var(--danger); }
/* Revize sürümü: bağlı olduğu teslimin altına girintili, ↳ bağlantısıyla. */
.td-row.is-child .td-row__main { padding-left: 46px; }
.td-row__branch { display: inline-flex; flex: none; margin: 0 -8px 0 -26px; color: color-mix(in srgb, var(--ink) 35%, var(--surface)); }
.td-row.is-child .td-row__more, .td-row.is-child .td-row__form { margin-left: 90px; }
.td-row.is-child .td-row__more { padding-left: 0; }
@media (max-width: 860px) {
  .td-row.is-child .td-row__main { padding-left: 34px; }
  .td-row.is-child .td-row__more, .td-row.is-child .td-row__form { margin-left: 34px; }
}
@media (max-width: 860px) { .td-row__form { margin-left: 18px; } }
.td-step-delete { margin-top: 10px; }
.td-step-delete .td-step__actions { padding-left: 0; margin-top: 8px; }
.td-step-log > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.td-step-log > summary::-webkit-details-marker { display: none; }
.td-step-log > summary:hover { color: var(--ink); }
.td-step-log .td-step-history { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.td-notes + .td-notes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.td-notes__list { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.td-notes__list li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.td-notes__list small { display: block; font-size: 12px; color: var(--muted); }
.td-notes__list p { margin: 4px 0 0; white-space: pre-line; font-size: 13.5px; color: var(--ink); }
.td-notes__files { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.td-notes__files li { display: flex; align-items: center; gap: 8px; }
.td-notes__files small { color: var(--muted); }
/* Yapılacaklar duvarı — göreve bağlı maddeler salt okunur: kutu yok, durum işareti. */
.todo-step-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; color: #1f9d55; }
.todo-step-mark:not(.is-on)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 28%, var(--surface)); }
/* Dar ekran: durum etiketi ve "Tamamla" başlığın altındaki satıra iner (başlık sıkışmasın);
   etiket başlık hizasında (işaret 28 + boşluk 16). */
@media (max-width: 640px) {
  .td-row__main { flex-wrap: wrap; row-gap: 10px; }
  .td-row__body { flex: 1 1 calc(100% - 92px); }
  .td-row__main > .td-badge { margin-left: 44px; }
  .td-row__main > .td-row__action, .td-row__main > .td-badge + .td-row__icons,
  .td-row__main > .td-badge + .td-chevron { margin-left: auto; }
}

/* Yorumlar: düz ve sade liste — kutu yok, ince ayraç; avatar + ad + zaman tek satırda,
   metin ad hizasında; Düzenle / Sil küçük metin bağlantısı, her zaman görünür. */
.td-history > .timeline { padding: 6px 28px 0; gap: 0; margin-bottom: 8px; }
.td-history .comment-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 14px 0; box-shadow: none; }
.td-history .comment-card:first-child { border-top: 0; }
.td-history .comment-card-head { justify-content: flex-start; gap: 10px; margin: 0 0 2px; }
.td-history .comment-card-head .avatar { width: 28px; height: 28px; font-size: 11px; }
.td-history .comment-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; }
.td-history .comment-card-author { font-size: 14px; font-weight: 700; color: var(--ink); }
.td-history .comment-card-time, .td-history .comment-card-edited { font-size: 12px; color: var(--muted); font-style: normal; }
.td-history .comment-card-actions { margin-left: auto; gap: 14px; }
.td-history .comment-card-actions .btn { border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 0; height: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.td-history .comment-card-actions .btn:hover { color: var(--ink); text-decoration: underline; }
.td-history .comment-card-body, .td-history .comment-card-body .trix-content { margin: 0 0 0 38px; padding: 0; min-height: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.td-history .comment-card-body .trix-content { margin: 0; }
.td-history .comment-card-body p, .td-history .comment-card-body div { margin: 0; }
.td-history .comment-card .attachment-list, .td-history .comment-card-edit { margin-left: 38px; }
/* Trix gövdenin sonuna boş satır (<br>) bırakır: yorum kartında fazladan boşluk olmasın. */
.comment-card-body br:last-child, .comment-card-body br:has(+ br:last-child) { display: none; }

/* Yorum kutusunda seçilen dosyaların önizlemesi */
.td-compose__files { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.td-compose__files[hidden] { display: none; }
.td-compose__file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 6px 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--ink); }
.td-compose__file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.td-compose__file small { color: var(--muted); white-space: nowrap; }
.td-compose__file-remove { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; }
.td-compose__file-remove:hover { background: color-mix(in srgb, var(--danger) 25%, var(--surface)); }

/* ───── Görev açılırken yapılacak maddeleri (`shared/_checklist_builder`) ─────
   Proje sihirbazı, projenin "Görev ekle" modalı ve yönetim görev formu ortak. */
.cl-builder__items { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cl-builder__items:empty { display: none; }
.cl-item__row { display: flex; align-items: center; gap: 8px; }
.cl-item__box { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 4px; }
.cl-item__title { flex: 1; min-width: 0; }
.cl-item__person { flex: none; width: 150px; }
.cl-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface); cursor: pointer; white-space: nowrap; }
.cl-toggle input { margin: 0; accent-color: var(--primary); }
.cl-toggle:has(input:checked) { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.cl-item__remove { flex: none; }
.cl-item__lock { display: flex; align-items: center; gap: 6px; margin: 4px 0 0 24px; font-size: 12.5px; color: var(--muted); }
.cl-item__lock[hidden] { display: none; }
.cl-item__lock input { accent-color: var(--primary); }
.cl-builder__add { border: 0; background: transparent; padding: 4px 0; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.cl-builder__add:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .cl-item__row { flex-wrap: wrap; }
  .cl-item__title { flex-basis: calc(100% - 32px); }
}
/* Görev formları: kilometre taşı kutusu satırın dibine hizalı; çakışma uyarısı alanın altında. */
.task-form__check { display: inline-flex; align-items: center; gap: 6px; align-self: end; padding-bottom: 10px; }
.due-conflict ul { margin: 4px 0 0; padding-left: 18px; }
/* Yönetim görev formu: "+ Kişi ekle" ile açılan ek kişi seçicileri. */
.task-people-extra { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.task-people-extra:empty { display: none; }
.task-people-extra__row { display: flex; align-items: center; gap: 6px; }
.task-people-extra__row .form-input { flex: 1; min-width: 0; }
/* Satırın kendi departmanı + kişisi: iki seçici yan yana, sil düğmesi sonda. */


/* Açıklama balonu (`tooltip` controller'ı — body'ye eklenir, kırpılmaz) */
.app-tooltip { position: fixed; z-index: 300; max-width: 280px; padding: 8px 11px; border-radius: 10px; background: light-dark(#1d2433, var(--dk-surface-soft)); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.45; box-shadow: 0 10px 24px rgba(20, 30, 60, .22); pointer-events: none; }

/* Küçük resim yüklenemezse (`thumb-fallback`): kırık görsel + taşan ad yerine
   44 px'lik sade bir görsel simgesi. */
.attachment-thumb__fallback { display: none; }
.attachment-thumb.is-broken img { display: none; }
.attachment-thumb.is-broken .attachment-thumb__fallback { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--muted); background: light-dark(var(--hue-edf1ef), var(--dk-surface-soft)); }
.todo-card-description strong { color: var(--ink); font-weight: 600; }
/* Yapılacaklar: liste termini çipi, madde hatırlatıcı işareti, giriş kutusunun tarih satırı */
.todo-card-due { display: inline-flex; align-items: center; gap: 5px; margin: 8px 8px 0 0; font-size: 12px; color: var(--muted); }
.todo-card-due.is-late { color: light-dark(#b25450, var(--dk-danger-text)); font-weight: 600; }
.todo-item-remind { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11.5px; color: var(--muted); vertical-align: middle; }
/* Giriş kutusunun seçenek satırı: renk · kategori · termin · hatırlatıcı ·
   sabitle (en sonda). Etiket üstte, satır alttan hizalı. Satırın genel
   `.form-input { flex: 0 1 200px }` kuralı sütun yönlü etikette alanı
   200 px YÜKSEKLİĞE çekiyordu — burada esneme kapalı. */
.keep-composer__options { align-items: flex-end; gap: 12px 16px; }
.keep-composer__field { flex: 1 1 140px; min-width: 140px; max-width: 220px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.keep-composer__field .form-input { flex: none; width: 100%; height: auto; }
.keep-composer__pin { flex: none; padding-bottom: 10px; white-space: nowrap; }
.keep-composer__options .todo-colors__swatches { gap: 6px; }
/* Madde satırının hatırlatıcısı: 🔔 düğmesi + (açılınca) yalnız o maddenin saati */
.todo-item-row__bell { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.todo-item-row__bell:hover, .todo-item-row__bell.is-active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.todo-item-row .todo-item-row__remind { flex: 0 0 210px; }
.todo-item-row .todo-item-row__remind[hidden] { display: none; }

/* Projeler: Kanban (durum sütunları) ve liste */
.project-view-switch { margin-left: 0; flex: none; }
.project-board { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.project-board__column { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px; border-radius: 18px; background: light-dark(var(--hue-f1f5f3), var(--dk-surface-soft)); }
.project-board__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.project-board__head .count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; text-align: center; }
.project-board__cards { display: flex; flex-direction: column; gap: 12px; }
.project-board__empty { margin: 0; padding: 18px 6px; color: var(--muted); font-size: 12.5px; text-align: center; }
.project-board--single { grid-template-columns: minmax(0, 1fr); }
.project-board--single .project-board__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.project-list-table__name { display: flex; align-items: flex-start; gap: 10px; min-width: 240px; }
.project-list-table__name .project-card__dot { margin-top: 6px; flex: none; }
.project-list-table__link { color: var(--ink); font-weight: 600; text-decoration: none; }
.project-list-table__link:hover { text-decoration: underline; }
.project-list-table__progress { min-width: 150px; }
.project-list-table__progress .checklist-bar-track { display: inline-block; width: 90px; vertical-align: middle; margin-right: 8px; }
/* "Aşamalar" sekmesinin hareket akışı — `projects/_activity_timeline`. Güne göre
   gruplu; her satırda tür simgesi (yeşil biten/onay · sarı bekleyen/termin ·
   kırmızı revize), kim + ne, hangi görev / adım, saat. */
.pd-tl { display: flex; flex-direction: column; gap: 6px; }
.pd-tl__day { margin: 10px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pd-tl__day:first-child { margin-top: 0; }
.pd-tl__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pd-tl__row { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; padding: 12px 4px 12px 0; }
.pd-tl__row + .pd-tl__row { border-top: 1px solid var(--line); }
.pd-tl__row::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--line); z-index: 0; }
.pd-tl__list .pd-tl__row:first-child::before { top: 22px; }
.pd-tl__list .pd-tl__row:last-child::before { bottom: calc(100% - 22px); }
.pd-tl__list .pd-tl__row:only-child::before { display: none; }
.pd-tl__dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); }
.pd-tl__row--ok .pd-tl__dot { background: light-dark(#e6f4ea, var(--dk-surface-soft)); color: light-dark(#1f9d55, #7ccf9a); }
.pd-tl__row--warn .pd-tl__dot { background: light-dark(#fff0cf, var(--dk-surface-soft)); color: light-dark(#8a5a00, #f0cd7a); }
.pd-tl__row--bad .pd-tl__dot { background: light-dark(#fdecec, var(--dk-surface-soft)); color: light-dark(#c0392b, #f28b82); }
.pd-tl__row--info .pd-tl__dot { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.pd-tl__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pd-tl__line { margin: 0; font-size: 14.5px; color: var(--ink); }
.pd-tl__subject { margin: 0; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.pd-tl__subject a { font-weight: 600; color: var(--primary); text-decoration: none; }
.pd-tl__subject a:hover { text-decoration: underline; }
.pd-tl__subject em { font-style: normal; }
.pd-tl__label { color: var(--muted); font-size: 12.5px; margin-right: 2px; }
.pd-tl__label + a, .pd-tl__label + em { margin-right: 8px; }
.pd-tl__chips { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pd-tl__note { margin: 2px 0 0; padding: 6px 10px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--ink) 3%, transparent); font-size: 13px; color: var(--muted); }
.pd-tl__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 3px 10px; border-radius: 999px; background: light-dark(#fff0cf, var(--dk-surface-soft)); color: light-dark(#6b4600, #f0cd7a); font-size: 12.5px; font-weight: 600; }
.pd-tl__time { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; padding-top: 6px; align-self: start; }
@media (max-width: 640px) {
  .pd-tl__row { grid-template-columns: 28px 1fr; }
  .pd-tl__time { grid-column: 2; padding-top: 0; }
}
.todo-item-row { flex-wrap: wrap; }
.todo-item-row > input[name="items[]"] { flex: 1 1 0; min-width: 120px; }
.todo-item-row .todo-item-row__link { flex: 1 1 100%; margin-left: 26px; }
.todo-item-row .todo-item-row__link[hidden] { display: none; }
.todo-item-row__file { position: relative; }
.todo-item-row__file-count { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }
.todo-item-row__file-count[hidden] { display: none; }
.todo-attach-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.todo-attach-fields__input { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.todo-attach-fields__input .form-input { flex: 1; min-width: 0; }
/* Maddenin bağlantısı ve dosyaları — `todos/_item_attachments`. */
.todo-item-attachments { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.todo-item-attachments__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.todo-item-link, .todo-item-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: border-color .15s, background .15s; }
.todo-item-link span, .todo-item-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-item-link svg:first-child { color: var(--primary); flex: none; }
.todo-item-link svg:last-child { color: var(--muted); flex: none; }
.todo-item-file svg { color: var(--muted); flex: none; }
.todo-item-link:hover, .todo-item-file:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); text-decoration: none; }
.todo-item-attachments__thumbs { display: flex; gap: 6px; }
.todo-item-thumb { position: relative; display: inline-flex; }
.todo-item-thumb .attachment-thumb { border-radius: 10px; border-color: var(--line); box-shadow: 0 1px 2px rgba(20, 30, 60, .06); }
.todo-item-thumb .attachment-thumb img { width: 52px; height: 52px; max-width: none; object-fit: cover; }
.todo-item-thumb__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(15, 23, 42, .55); color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; }
.todo-card-preview__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }

/* Yapılacak düzenleme penceresi: bağlantı kartı ve görsel ızgarası. */
.todo-link-card { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.todo-link-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
.todo-link-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-link-card__body strong { font-size: 14px; color: var(--ink); }
.todo-link-card__body small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-link-card .btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.todo-files__gallery { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.todo-files__tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.todo-files__tile .attachment-thumb { display: block; border-radius: 12px; border-color: var(--line); }
.todo-files__tile .attachment-thumb img { width: 100%; height: 112px; max-width: none; max-height: none; object-fit: cover; }
.todo-files__tile-name { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-files__tile form { position: absolute; top: 6px; right: 6px; }
.todo-files__tile-remove { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 999px; background: rgba(15, 23, 42, .6); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s; }
.todo-files__tile:hover .todo-files__tile-remove, .todo-files__tile-remove:focus-visible { opacity: 1; }
.todo-files__file-icon { display: inline-flex; color: var(--muted); }

/* Engelli iş: görev başlığının altında, tam genişlikte kırmızı kenarlı kutu. */
.td-blocked { display: flex; align-items: flex-start; gap: 14px; margin: 12px 0; padding: 16px 18px; border: 1px solid light-dark(#f1c4c1, var(--dk-line)); border-left: 4px solid var(--danger); border-radius: 14px; background: light-dark(#fdf3f2, var(--dk-danger-soft)); }
.td-blocked__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: light-dark(#fde2e0, color-mix(in srgb, var(--danger) 22%, transparent)); color: var(--danger); }
.td-blocked__body { flex: 1; min-width: 0; }
.td-blocked__body h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.td-blocked__reason { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-line; }
.td-blocked__meta { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
/* Engelin takıldığı madde: satırda kırmızı not + rozet; engel kutusunda bağlantı. */
.td-gate--blocked { background: light-dark(#fdf3f2, var(--dk-danger-soft)); border-color: light-dark(#f1c4c1, var(--dk-line)); color: light-dark(#a12626, var(--dk-danger-text)); }
.td-badge--blocked { background: light-dark(#fbdcdc, var(--dk-danger-soft)); color: light-dark(#a12626, var(--dk-danger-text)); }
.td-row.is-blocked { box-shadow: inset 3px 0 0 var(--danger); }
.td-blocked-step { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.td-blocked-step a { color: var(--danger); font-weight: 600; }
/* "Takıldığı madde" bağlantısı satıra inince üst barın altında kalmasın. */
.td-row { scroll-margin-top: 96px; }
/* Arama sayfası: kartlar alt alta, aralarında boşlukla (birbirine girmesin). */
.search-page { display: flex; flex-direction: column; gap: 16px; }
.search-page > .record-hero,
.search-page > .panel { margin: 0; }
.search-page__count { margin: 0 4px; }
/* Sürükle-bırak kapsayıcısı konumlu: sortable'ın ekran okuyucu durum satırı
   (`sr-only`, absolute) kabuğun dışına, belgenin dibine taşıp sayfaya ikinci
   bir kaydırma çubuğu açmasın. */
[data-controller~="sortable"] { position: relative; }

/* Liste penceresi: maddeler tek kutuda (başlık · maddeler · en altta yeni madde),
   künyeden (kategori · açıklama) ayrı dursun. */
.todo-items-box { border: 1px solid var(--border); border-radius: 14px; padding: 4px 16px 14px; background: var(--surface); }
.todo-items-box__head { display: flex; align-items: center; gap: 8px; padding: 12px 0 10px; border-bottom: 1px solid var(--border); }
.todo-items-box__head h3 { font-size: 14px; font-weight: 700; margin: 0; }
.todo-items-box .todo-list-sections { gap: 14px; }
.todo-items-box .todo-section-head { padding-top: 12px; }
.todo-items-box .todo-list-item:last-child { border-bottom: 0; }
.todo-items-box .todo-workspace-empty { padding: 18px 8px 6px; }
.todo-items-box__add { margin: 10px 0 0; padding-top: 12px; border-top: 1px dashed var(--border); }
.todo-list-workspace > .todo-completed { margin-top: 14px; }
/* Proje sihirbazı — aşama ve görev planı (`projects/new`, `.wz-plan` kapsamında).
   Numaralı aşama başlığı + altında girintili, çizgiyle bağlı kısa görev satırları;
   satır içi aşama/görev düzenleyicileri. Renk yalnız tema değişkenlerinden. */
.project-wizard--modal .wizard-steps { position: sticky; top: 0; z-index: 8; padding: 6px 0 10px; background: var(--surface); box-shadow: 0 -12px 0 var(--surface), 0 6px 8px -8px rgba(20, 30, 60, .18); }
.wz-plan .wizard-card__head { flex-wrap: wrap; }
.wz-plan .wizard-card__head > div { flex: 1 1 260px; min-width: 0; }
.wz-plan__add { flex: none; }
.wz-draft-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.wz-draft-note svg { flex: none; }
.wz-plan .wizard-suggest { margin: 0 0 14px; padding-bottom: 14px; }
.wz-board { display: flex; flex-direction: column; gap: 12px; margin: 0; }

.wz-plan .wz-stage { padding: 0; overflow: visible; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: none; }
.wz-plan .wz-stage__head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid transparent; background: transparent; font-size: 14px; }
.wz-plan .wz-stage:has(.wz-stage__body:not([hidden])) .wz-stage__head { border-bottom-color: var(--line); }
.wz-plan .wz-stage__num { flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wz-stage__titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wz-stage__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wz-stage__name { font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.wz-stage__count { flex: none; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, var(--surface)); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.wz-icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.wz-icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--ink); }
.wz-plan .wizard-stage-card__remove { margin-left: 0; }
.wz-stage__toggle svg { transition: transform .15s; }
.wz-stage__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.wz-stage__body { padding: 10px 14px 12px; }
.wz-stage__body[hidden] { display: none; }

/* Görevler aşamaya ince dikey + yatay çizgiyle bağlanır (ilişki yalnız renkle anlatılmaz). */
.wz-plan .wz-tasks { position: relative; margin: 0 0 0 16px; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.wz-plan .wz-tasks::before { content: ""; position: absolute; left: 0; top: 0; bottom: 18px; width: 1.5px; background: var(--line); }
.wz-plan .wz-tasks:empty { display: none; }
.wz-plan .wz-task { position: relative; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; }
.wz-plan .wz-task::before { content: ""; position: absolute; left: -18px; top: 20px; width: 12px; height: 1.5px; background: var(--line); }
.wz-task__summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, auto) auto; gap: 4px 14px; align-items: center; width: 100%; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.wz-task__summary:hover, .wz-task__summary:focus-visible { border-color: var(--line); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.wz-task__title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.wz-task__who, .wz-task__due { font-size: 13px; color: var(--ink); white-space: nowrap; }
.wz-task__due { font-variant-numeric: tabular-nums; color: var(--muted); }
.wz-task__title.is-empty, .wz-task__who.is-empty, .wz-task__due.is-empty { color: var(--muted); font-style: italic; font-weight: 400; }
.wz-task__due.is-late { color: var(--danger, #c0392b); font-weight: 600; }
.wz-task__more { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); font-size: 11.5px; font-weight: 700; }
.wz-task__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.wz-task__meta[hidden] { display: none; }
.wz-chip { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, var(--surface)); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.wz-chip--high { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.wz-chip--warn { background: light-dark(#fff3ca, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); }
.wz-add-task { margin: 6px 0 0 16px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.wz-add-task:hover { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.wz-stage__empty { margin: 2px 0 0 16px; font-size: 13px; color: var(--muted); }
.wz-stage__empty[hidden] { display: none; }

/* Satır içi düzenleyici (görev ilgili aşamanın İÇİNDE açılır). */
.wz-editor { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 10px rgba(20, 30, 60, .06); }
.wz-editor[hidden] { display: none; }
.wz-editor__head { margin: 0; font-size: 13.5px; color: var(--ink); }
.wz-editor__head span { color: var(--muted); }
.wz-plan .wz-editor .wizard-task__main { grid-template-columns: minmax(180px, 1.5fr) minmax(170px, 1fr) minmax(150px, .8fr); }
.wz-more { border-top: 1px solid var(--line); padding-top: 10px; }
.wz-more > summary { cursor: pointer; width: fit-content; color: var(--primary); font-size: 13px; font-weight: 600; }
.wz-more[open] > summary { margin-bottom: 10px; }
.wz-more .wizard-task__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.wz-more .wizard-col--wide { margin-bottom: 10px; }
.wz-editor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wz-editor__delete { margin-left: auto; color: var(--danger, #c0392b); }
.wz-editor__msg, .wz-error { margin: 0; padding: 8px 12px; border-radius: 10px; background: light-dark(#fdecec, var(--dk-surface-soft)); color: light-dark(#a3271b, #f28b82); font-size: 13px; font-weight: 600; }
.wz-editor__msg[hidden], .wz-error[hidden] { display: none; }

/* Aşama ekleme ve ad düzenleme (satır içi). */
.wz-stage-add { margin-top: 12px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--line)); border-radius: 14px; display: flex; flex-direction: column; gap: 8px; }
.wz-stage-add[hidden] { display: none; }
.wz-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.wz-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wz-inline .form-input { flex: 1 1 240px; min-width: 0; }
.wz-rename { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.wz-add-stage { width: 100%; margin-top: 12px; padding: 11px; border: 1px dashed var(--line); border-radius: 12px; background: transparent; color: var(--primary); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.wz-add-stage:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.wz-add-stage[hidden] { display: none; }

@media (max-width: 720px) {
  .wz-plan .wz-editor .wizard-task__main { grid-template-columns: 1fr; }
  .wz-task__summary { grid-template-columns: minmax(0, 1fr) auto; }
  .wz-task__who { grid-column: 1; }
  .wz-plan .wz-tasks { margin-left: 8px; padding-left: 14px; }
  .wz-plan .wz-task::before { left: -14px; width: 9px; }
  .wz-plan .wz-stage__head { flex-wrap: wrap; gap: 6px 8px; padding: 10px; }
  .wz-stage__titles { flex-basis: calc(100% - 50px); }
  .wz-stage__count { margin-left: 42px; margin-right: auto; }
  /* Telefonda adım göstergesi iki satır tutar: yapışık değil, içerikle kayar. */
  .project-wizard--modal .wizard-steps { position: static; }
}

/* Sihirbaz adım göstergesi (yeni proje + proje düzenle): numaralı daireler ince
   çizgiyle bağlı. Biten adım ✓ yumuşak dairede, sıradaki adım dolu tema rengi
   ve hafif halka, gelecek adımlar boş daire + soluk metin. */
.wizard-steps { flex-wrap: nowrap; align-items: center; gap: 0; margin: 0 0 18px; }
.wizard-steps > li { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.wizard-steps > li:last-child { flex: 0 0 auto; }
.wizard-steps > li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1.5px; margin: 0 16px; background: var(--line); }
.wizard-step { flex: none; gap: 12px; padding: 4px 2px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 14.5px; font-weight: 500; }
.wizard-step:hover { color: var(--ink); }
.wizard-step__num { position: relative; width: 34px; height: 34px; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13.5px; font-weight: 600; }
.wizard-step__check { display: none; }
.wizard-step.active { color: var(--primary); font-weight: 700; }
.wizard-step.active .wizard-step__num { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 14%, transparent); }
.wizard-step.done { color: var(--muted); }
.wizard-step.done .wizard-step__num { border-color: transparent; background: light-dark(#e6f4ea, var(--dk-surface-soft)); color: light-dark(#1f7a45, #7ccf9a); }
.wizard-step.done .wizard-step__n { display: none; }
.wizard-step.done .wizard-step__check { display: inline-flex; }
.wizard-step:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 720px) {
  .wizard-steps > li:not(:last-child)::after { margin: 0 6px; }
  .wizard-step { gap: 0; }
  .wizard-step__label { display: none; }
  .wizard-step.active .wizard-step__label { display: inline; margin-left: 8px; font-size: 13px; }
}
/* Şablon seçimi aşama adımının başında: kartlar daha sıkı. */
.wz-blueprint { margin-bottom: 16px; }
.wz-blueprint .wizard-card__head { margin-bottom: 14px; }
.wizard-steps, .project-wizard--modal .wizard-steps { padding-left: 8px; padding-right: 2px; }
.wz-blueprint__grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.wz-blueprint .blueprint-card__body { padding: 10px 12px; gap: 2px; }
.wz-blueprint .blueprint-card__body small { display: none; }
.wz-blueprint .blueprint-card__body em { font-size: 11.5px; }

/* Aşama kartı v2 (referans tasarım): kart belirgin, başlık renkli bantta. */
.wz-plan .wz-stage { border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line)); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(20, 30, 60, .05); }
.wz-plan .wz-stage__head { gap: 14px; padding: 16px 20px; border-bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, var(--surface)) 0%, color-mix(in srgb, var(--primary) 3%, var(--surface)) 55%, var(--surface) 100%); }
.wz-plan .wz-stage:has(.wz-stage__body:not([hidden])) .wz-stage__head { border-bottom: 0; }
.wz-plan .wz-stage__num { width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line)); border-radius: 12px; background: var(--surface); color: var(--primary); font-size: 16px; font-weight: 800; box-shadow: 0 1px 2px rgba(20, 30, 60, .06); }
.wz-plan .wz-stage__eyebrow { font-size: 11px; letter-spacing: .14em; }
.wz-plan .wz-stage__name { font-size: 17px; }
.wz-plan .wz-stage__count { padding: 4px 12px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 500; }
.wz-plan .wz-icon-btn { width: 34px; height: 34px; }
.wz-plan .wz-icon-btn[hidden] { display: none; }
.wz-plan .wz-stage__toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.wz-plan .wz-stage__body { padding: 6px 20px 14px 20px; }

/* Görevler: soldaki dikey çizgiye yatay kollarla bağlı satırlar, satırlar arası ince çizgi. */
.wz-plan .wz-tasks { margin: 0 0 0 22px; padding: 0 0 0 34px; gap: 0; }
.wz-plan .wz-tasks::before { left: 0; top: 0; bottom: 0; background: var(--line); }
.wz-plan .wz-task { border-bottom: 1px solid var(--line); border-radius: 0; }
.wz-plan .wz-task::before { left: -34px; top: 32px; width: 22px; }
.wz-plan .wz-task.is-editing { border-bottom-color: transparent; padding: 10px 0; }
.wz-plan .wz-task.is-editing::before { top: 40px; }
.wz-task__summary { grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto) 96px auto; gap: 14px; padding: 14px 8px; border: 0; border-radius: 10px; }
.wz-task__summary:hover, .wz-task__summary:focus-visible { border: 0; background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.wz-task__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); }
.wz-task__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wz-task__title { font-size: 15px; font-weight: 600; }
.wz-task__meta { grid-column: auto; gap: 12px; }
.wz-chip { display: inline-flex; align-items: center; gap: 5px; padding: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; }
.wz-chip--high { background: transparent; color: light-dark(#a36a00, #f0cd7a); }
.wz-chip--warn { background: transparent; color: light-dark(#a36a00, #f0cd7a); }
.wz-task__who { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.wz-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.wz-avatar--empty { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); color: var(--muted); }
.wz-task__name { overflow: hidden; text-overflow: ellipsis; }
.wz-task__due { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.wz-task__due svg { color: var(--muted); flex: none; }
.wz-task__edit { display: inline-flex; color: var(--muted); padding: 0 4px; }
.wz-task__summary:hover .wz-task__edit { color: var(--primary); }
.wz-plan .wz-stage__empty { margin: 10px 0 4px 56px; font-size: 14px; }
.wz-plan .wz-add-task { display: inline-flex; align-items: center; gap: 10px; margin: 8px 0 0 56px; padding: 8px 10px; font-size: 14px; font-weight: 700; }

/* Yeni aşama: tema tonunda belirgin kutu. */
.wz-plan .wz-stage-add { margin-top: 16px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.wz-plan .wz-stage-add .wz-label { font-size: 14px; font-weight: 700; }
.wz-plan .wz-stage-add .form-input { height: 48px; }
.wz-plan .wz-stage-add .btn { height: 48px; padding-inline: 22px; }

@media (max-width: 720px) {
  .wz-task__summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; }
  .wz-task__who { grid-column: 2; }
  .wz-task__due { grid-column: 2; }
  .wz-task__edit { grid-row: 1; grid-column: 3; }
  .wz-plan .wz-tasks { margin-left: 10px; padding-left: 18px; }
  .wz-plan .wz-task::before { left: -18px; width: 12px; }
  .wz-plan .wz-stage__body { padding: 6px 12px 12px; }
  .wz-plan .wz-stage__empty, .wz-plan .wz-add-task { margin-left: 28px; }
  .wz-plan .wz-stage__head { padding: 12px; }
}
/* Beş adım dar pencereye de sığsın. */
.wizard-steps > li:not(:last-child)::after { margin: 0 12px; min-width: 12px; }
.wizard-step { gap: 10px; white-space: nowrap; }

/* Yeni proje TAM SAYFA (modal değil): adım göstergesi üstte, eylemler altta yapışık;
   içerik arada kayar. */
.project-wizard:not(.project-wizard--modal) .wizard-steps { position: sticky; top: 0; z-index: 8; margin-bottom: 14px; padding-top: 10px; padding-bottom: 12px; background: var(--workspace, var(--canvas, var(--surface))); }
.project-wizard:not(.project-wizard--modal) .wizard-actions { position: sticky; bottom: 0; z-index: 8; margin-top: 8px; padding: 12px 0 14px; background: var(--surface); }
@media (max-width: 720px) {
  .project-wizard:not(.project-wizard--modal) .wizard-steps { position: static; }
}
/* Adım adları dar alanda çakışmasın: sihirbaz kendi genişliğine göre sıkışır —
   dar olduğunda yalnız o anki adımın adı yazar. */
.project-wizard { container-type: inline-size; container-name: wizard; }
@container wizard (max-width: 900px) {
  .wizard-step__label { display: none; }
  .wizard-step.active .wizard-step__label { display: inline; }
}
.project-wizard:not(.project-wizard--modal) .wizard-actions { border-top: 1px solid var(--line); box-shadow: 0 -8px 12px -10px rgba(20, 30, 60, .2); }
/* Yeni proje sayfası tam genişlik; 1. adım iki sütun. */
.project-wizard:not(.project-wizard--modal) .wizard-form { max-width: none; }
.wz-basics { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; align-items: stretch; }
.wz-basics__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wz-basics__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wz-basics__files { display: flex; flex-direction: column; min-width: 0; }
.wz-basics__files .dropzone__area { flex: 1 1 auto; justify-content: center; min-height: 160px; }
@container wizard (max-width: 900px) {
  .wz-basics { grid-template-columns: 1fr; }
  .wz-basics__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .wz-basics__row { grid-template-columns: 1fr; } }

/* Şablon adımı: kartlar örnek + numaralı aşama listesiyle; seçili kart belirgin. */
.wz-blueprint__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: stretch; }
.wz-bp { height: 100%; }
.wz-blueprint .wz-bp__body { height: 100%; padding: 18px; gap: 10px; border-radius: 16px; transition: border-color .15s, box-shadow .15s, background .15s; }
.wz-bp:hover .wz-bp__body { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.wz-bp input:checked + .wz-bp__body { border: 1.5px solid var(--primary); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.wz-bp input:focus-visible + .wz-bp__body { outline: 2px solid var(--primary); outline-offset: 2px; }
.wz-bp__head { display: flex; align-items: center; gap: 10px; }
.wz-bp__head strong { flex: 1; font-size: 15.5px; color: var(--ink); }
.wz-bp__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
.wz-bp__picked { display: none; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 700; }
.wz-bp input:checked + .wz-bp__body .wz-bp__picked { display: inline-flex; }
.wz-blueprint .wz-bp__body small.wz-bp__example { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; }
.wz-bp__count { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wz-bp__stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wz-bp__stages li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 3%, var(--surface)); font-size: 13.5px; color: var(--ink); }
.wz-bp__num { flex: none; font-size: 12px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.wz-bp__name { flex: 1; min-width: 0; }
.wz-bp__tag { flex: none; padding: 1px 8px; border-radius: 999px; background: light-dark(#fff3ca, var(--dk-warning-soft)); color: light-dark(#8a5a00, var(--dk-warning-text)); font-size: 11px; font-weight: 700; }
.wz-bp__blank { margin-top: auto; padding: 14px; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Tam sayfada form kalan alanı TAM doldurur (sabit yükseklik hesabı yok — kısa
   adımda sayfa kaymaz): eylem çubuğu ekranın altına oturur; uzun adım (gözden
   geçir) doğal olarak kayar. */
.main-content:has(> .project-wizard:not(.project-wizard--modal)) { display: flex; flex-direction: column; }
.main-content > .project-wizard:not(.project-wizard--modal) { flex: 1 0 auto; display: flex; flex-direction: column; }
.project-wizard:not(.project-wizard--modal) .wizard-form { flex: 1 0 auto; }
.project-wizard:not(.project-wizard--modal) .wizard-actions { margin-top: auto; }
/* Yapışık eylem çubuğu ekranın ALT kenarına kadar uzanır ve panelin iki kenarına
   yayılır: altından içerik görünmez (sayfanın alt boşluğu 20px). */
.main-content:has(> .project-wizard:not(.project-wizard--modal)) { padding-bottom: 0; }
.project-wizard:not(.project-wizard--modal) .wizard-actions { bottom: 0; margin-inline: -20px; padding: 14px 20px 20px; border-radius: 0; }
.project-wizard:not(.project-wizard--modal) .wizard-form { padding-bottom: 0; }
/* Şablon kartında aşamalar sarılan küçük çipler: kart kısa kalır, adım tek ekrana sığar. */
.wz-bp__stages { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.wz-bp__stages li { gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 12.5px; }
.wz-bp__stages .wz-bp__name { flex: none; }
.wz-bp__num { font-size: 11px; }
.wz-blueprint .wz-bp__body { padding: 16px; }
.wz-bp__blank { padding: 10px 12px; }
/* ═══════════════════ TeamHub kabuğu (devir §4–§5) ═══════════════════
   Dış çerçeve · sol menü · üst bar · zil paneli · profil menüsü.
   Ölçüler referansın SON override'larından alındı (index.html "Son
   rötuşlar"): menü satırı 43px / 11px köşe / 4px aralık, üst kapsül 14px
   köşe, avatar 36px, zil düğmesi 38px.
   Yalnız oturum açmış kabukta (`body.th-app`) geçerlidir — giriş ve e-posta
   görünümleri bu dosyadan etkilenmez. */

/* ─── Ekran ölçeği ────────────────────────────────────────────────────────
   Hedef: sayfa her masaüstü ekranında ~1640 px'lik bir tasarım genişliğinde
   çizilsin — çerçeve ekranı doldurur, kenarlarında "pencere" boşluğu kalır,
   yazı ve kartlar ferah ama sıkışık değil (Beste'nin Mac Air'de Chrome
   %67 yakınlaştırmayla beğendiği görünüm ≈ 0.9 ölçek). Dar dizüstünde
   (1200–1599 px) sayfa biraz KÜÇÜLÜR, geniş ekranda büyür; büyütme kısa
   ekranda (yükseklik) daha az uygulanır ki dikeyde sığsın. < 1200 px
   (tablet, telefon) ölçek 1 — oralar kendi kırılımlarıyla çizilir.
   `zoom` ekran birimlerini de büyütür: yeni CSS'te vh/vw değil
   `var(--vh)` / `var(--vw)` (components.css `--ui-zoom`la böler). */
@media (min-width: 1200px) { :root { zoom: 0.84; --ui-zoom: 0.84; } }
@media (min-width: 1366px) { :root { zoom: 0.88; --ui-zoom: 0.88; } }
@media (min-width: 1440px) { :root { zoom: 0.9;  --ui-zoom: 0.9;  } }
@media (min-width: 1600px) { :root { zoom: 0.98; --ui-zoom: 0.98; } }
@media (min-width: 1720px) and (min-height: 760px) { :root { zoom: 1.04; --ui-zoom: 1.04; } }
@media (min-width: 1840px) and (min-height: 820px) { :root { zoom: 1.12; --ui-zoom: 1.12; } }
@media (min-width: 2000px) and (min-height: 900px) { :root { zoom: 1.22; --ui-zoom: 1.22; } }
@media (min-width: 2300px) and (min-height: 1000px) { :root { zoom: 1.36; --ui-zoom: 1.36; } }

/* Dokunmatik yüzeyde sayfayı aşağı/yukarı çekince lastik gibi esnemesin
   (macOS elastik kaydırma): `contain` yalnız zincirlemeyi keser, esnemeyi
   `none` kapatır. */
html, body.th-app { overscroll-behavior: none; }

body.th-app { background: var(--canvas); min-height: calc(100 * var(--vh)); }

.app-shell {
  --sidebar-w: 250px;
  /* Dashboard'un sağ sütunu ve sütun aralığı — üst bar da bu ölçülere
     oturur (kapsül = sağ sütun, arama kutusunun sağ kenarı = ana sütunun
     sağ kenarı). Tek kaynak burası; dashboard.css de bunları okur. */
  --side-col: 300px;
  --col-gap: 22px;
  width: min(1780px, calc(100% - 56px));
  min-height: calc(calc(100 * var(--vh)) - 56px);
  margin: 28px auto;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  background: var(--workspace);
  border: 10px solid rgba(255, 255, 255, .42);
  border-radius: 28px;
  box-shadow: var(--shell-shadow);
  overflow: hidden;
}

/* ─── Sol menü ─────────────────────────────────────────────────────────── */
.sidebar {
  background: light-dark(#fff, var(--dk-surface));
  border-right: 1px solid light-dark(var(--hue-f0f3f1), var(--dk-line));
  padding: 30px 18px 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 5;
  color: var(--text);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 28px;
  color: var(--mint-dark);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.6px;
  text-decoration: none;
  min-width: 0;
}
.sidebar-brand:hover { text-decoration: none; color: var(--mint-dark); }
.sidebar-brand-mark {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, var(--mark-from), var(--mark-to));
  font-size: 15px;
  letter-spacing: 0;
}
.sidebar-brand-logo { flex: none; max-height: 34px; max-width: 120px; object-fit: contain; }
.sidebar-brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Logolu kimlik: logo menü genişliğine göre ölçeklenir ve ortalanır, ad
   (açıksa) altında ortalı durur. */
.sidebar-brand--logo {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 4px 26px;
  text-align: center;
}
.sidebar-brand--logo {
  /* Ayarlar → Logo boyutu (`logo_size`): logonun yüksekliği. Genişlik menüye
     sığar; yatay logo genişliğe, kare logo yüksekliğe dayanır. */
  --brand-logo-h: 64px;
}
.sidebar-brand--size-small { --brand-logo-h: 48px; }
.sidebar-brand--size-large { --brand-logo-h: 96px; }
.sidebar-brand--size-xlarge { --brand-logo-h: 128px; }
.sidebar-brand--logo .sidebar-brand-logo {
  display: block;
  width: 100%;
  max-width: 190px;
  height: var(--brand-logo-h);
  /* Logosuz düzenin küçük rozet sınırı (`max-height: 34px`) burada GEÇMEZ —
     o sınır logoyu seçilen boyuttan bağımsız olarak 34 px'e eziyordu. */
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
}
.sidebar-brand--logo .sidebar-brand-name { max-width: 100%; font-size: 17px; }
/* Beyaz zemin (`logo_backdrop`): koyu logo karanlık temada kaybolmasın. Zemin
   iki temada da beyazdır; aydınlıkta ince bir çizgiyle ayrışır. */
.sidebar-brand--backdrop .sidebar-brand-logo {
  box-sizing: border-box;
  height: calc(var(--brand-logo-h) + 12px);
  padding: 8px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue-0f5a4d) 8%, transparent), 0 6px 16px color-mix(in srgb, var(--hue-0f5a4d) 8%, transparent);
}

.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 6px;
  scrollbar-width: thin;
}

.nav { display: grid; gap: 4px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 43px;
  padding: 0 15px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: light-dark(#6c7a76, var(--dk-muted));
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-item .icon { flex: none; width: 20px; height: 20px; }
.nav-item > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: light-dark(var(--tint-100), var(--dk-surface-mint)); color: var(--mint-dark); transform: translateX(2px); text-decoration: none; }
.nav-item.active {
  color: #fff;
  background: var(--mint);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--mint) 20%, transparent);
}
.nav-item:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* Menü rozeti. `.sidebar-nav-count` adı canlı yayının hedefi olan sohbet
   rozetinde (`shared/_chat_unread`) kullanılıyor — iki ad aynı görünür. */
.nav-badge, .sidebar-nav-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--primary-fill);
  font-size: 10px;
  font-weight: 700;
}
.nav-item.active .nav-badge, .nav-item.active .sidebar-nav-count { color: var(--mint-dark); background: light-dark(#fff, var(--dk-surface)); }
.sidebar-nav-count.hidden { display: none; }

.sidebar-bottom { margin-top: auto; padding-top: 16px; display: grid; gap: 4px; }

/* ─── Sürüm etiketi (sidebar altı, Ayar'ın üstü) ─────────────────────────── */
.sidebar-version {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 2px 6px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-soft);
  color: var(--muted); font-size: 11.5px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.sidebar-version strong { color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .2px; }
.sidebar-version:hover, .sidebar-version.active { border-color: var(--mint); color: var(--mint-dark); text-decoration: none; }

/* Ayar menüsü alt bölgede, yukarı açılır. */
.sidebar-settings { position: relative; }
.sidebar-settings .nav-item { cursor: pointer; }
.sidebar-settings .chevron { margin-left: auto; width: 16px; height: 16px; transition: transform .2s ease; }
.sidebar-settings.is-open .chevron { transform: rotate(180deg); }
.settings-menu {
  position: absolute;
  left: 0; right: 0; bottom: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 2px;
  max-height: min(calc(70 * var(--vh)), 520px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  background: light-dark(#fff, var(--dk-surface));
  box-shadow: 0 20px 50px color-mix(in srgb, var(--hue-0f5a4d) 18%, transparent);
  border: 1px solid var(--line);
}
.settings-menu__title {
  padding: 6px 10px 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: light-dark(#3d4d47, var(--dk-text-soft));
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item .icon { flex: none; width: 17px; height: 17px; color: light-dark(#6c7a76, var(--dk-muted)); }
.menu-item:hover { background: light-dark(var(--tint-100), var(--dk-surface-mint)); color: var(--mint-dark); text-decoration: none; }
.menu-item.active { background: var(--mint-soft); color: var(--mint-dark); font-weight: 700; }
.menu-item--danger:hover { background: light-dark(#ffebe9, var(--dk-danger-soft)); color: light-dark(#b25450, var(--dk-danger-text)); }
.menu-item--danger:hover .icon { color: light-dark(#b25450, var(--dk-danger-text)); }
.menu-form { display: block; margin: 0; }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* ─── Çalışma alanı ────────────────────────────────────────────────────── */
.main-content {
  --pad-y: 26px;
  --pad-x: 28px;
  min-width: 0;
  padding: var(--pad-y) var(--pad-x) 20px;
  /* Yana kayma YOK: içerik alanı yalnız dikey kayar (geniş tablo kendi kabında kayar). */
  overflow-x: clip;
}

.th-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 25px;
}
.th-topbar__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.th-page-title { min-width: 0; }
.th-page-title__row { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.th-back-link { flex: none; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.th-back-link:hover { color: var(--mint-dark); text-decoration: underline; }
.th-page-title__name {
  margin: 0;
  color: var(--ink);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-breadcrumb { margin-top: 4px; color: var(--mint); font-size: 12px; font-weight: 600; }
.th-breadcrumb span { color: var(--muted); font-weight: 400; }
.th-top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* Masaüstünde üst bar içeriğin ızgarasına hizalı: kapsül sağ sütun kadar
   geniş, arama kutusu ile kapsül arasında sütun aralığı, ikisi aynı yükseklikte. */
@media (min-width: 981px) {
  .th-top-actions { gap: var(--col-gap); }
  .th-top-actions .search-box { height: 48px; }
  .top-cluster { box-sizing: border-box; width: var(--side-col); height: 48px; }
  .top-cluster .profile-wrap { flex: 1 1 auto; min-width: 0; }
  .top-cluster .profile { width: 100%; min-width: 0; max-width: none; gap: 8px; padding-right: 6px; }
  /* Sabit genişlikte ada yer kalsın: kapsül içi düğmeler biraz daha sıkı. */
  .top-cluster { gap: 3px; }
  .top-cluster .th-icon-btn { width: 33px; height: 33px; }
  /* Ayırıcı yerine düğmeler ile profil arasında boşluk: ok simgesi (menünün
     açıldığını gösterir) ve ad sabit genişliğe birlikte sığsın. */
  .top-cluster .top-divider { display: none; }
  .top-cluster .profile-wrap { margin-left: 4px; }
  .top-cluster .profile .chevron { flex: none; width: 15px; height: 15px; }
  .top-cluster .profile-avatar { width: 32px; height: 32px; font-size: 11.5px; }
}

.th-icon-btn {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 13px;
  color: var(--mint-dark);
  background: var(--lime);
  cursor: pointer;
  text-decoration: none;
}
.th-icon-btn .icon { width: 20px; height: 20px; }
.th-icon-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.th-menu-toggle { display: none; background: light-dark(#fff, var(--dk-surface)); }

/* Arama: kompakt alan (devir §5) — geniş ekranda 220px, odakta 300px;
   ≤ 1100px'te yalnız ikon (odakta açılır). `/` kısayolu ve arama sayfası
   açık tutar. Girdi daraldığında da odaklanabilir kalır. */
.search-box {
  position: relative;
  width: 220px;
  height: 47px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: light-dark(#fff, var(--dk-surface));
  border-radius: 13px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--hue-0f5a4d) 4%, transparent);
  transition: width .2s ease;
  overflow: hidden;
}
.search-box__icon { flex: none; display: grid; color: light-dark(#64726e, var(--dk-muted)); cursor: pointer; }
.search-box__icon .icon { width: 19px; height: 19px; }
.search-box__input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 13px;
}
.search-box__input::placeholder { color: light-dark(#8b9693, var(--dk-muted)); }
.search-box kbd {
  flex: none;
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--muted);
  background: light-dark(var(--hue-f1f5f3), var(--dk-surface-soft));
  font: 600 10px/1.6 inherit;
}
.search-box:focus-within, .search-box.is-open { width: min(300px, calc(40 * var(--vw))); box-shadow: 0 0 0 2px var(--mint); }
@media (max-width: 1100px) {
  .search-box { width: 47px; }
  .search-box kbd { display: none; }
}
.search-box.is-open:not(:focus-within) { box-shadow: 0 2px 10px color-mix(in srgb, var(--hue-0f5a4d) 4%, transparent); }

/* Üst kapsül: zil + ayraç + profil. */
.top-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: light-dark(#fff, var(--dk-surface));
  border: 1px solid color-mix(in srgb, var(--hue-0f5a4d) 7%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--hue-0f5a4d) 5.5%, transparent);
}
.top-cluster .th-icon-btn { width: 38px; height: 38px; border-radius: 10px; background: light-dark(var(--tint-200), var(--dk-surface-mint)); }
.top-cluster .th-icon-btn .icon { width: 17px; height: 17px; }
.top-divider { width: 1px; height: 24px; margin: 0 5px; background: var(--line); }

/* Zil: `#notification-bell` Turbo Stream ile YERİNE KONUR (görev 011) —
   düğme ve sayı onun içinde; açılır panel dışarıda (yayın paneli silmesin). */
.notif-wrap { position: relative; }

/* Renk paleti (üst kapsülde, tema anahtarının solunda; yalnız sistem admini). */
.profile-mode-badge {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--primary-fill); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 1.5;
  box-shadow: 0 0 0 2px var(--surface);
}
.profile { position: relative; }
.super-admin-toggle { justify-content: flex-start; }
.super-admin-toggle__track {
  position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px;
  background: var(--line); transition: background .15s;
}
.super-admin-toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s;
}
.super-admin-toggle__track.is-on { background: var(--mint); }
.super-admin-toggle__track.is-on::after { transform: translateX(12px); }
.super-admin-toggle__state {
  margin-left: auto; padding: 2px 8px; border-radius: 7px;
  background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700;
}
.super-admin-toggle__state.is-on { background: var(--primary-fill); color: #fff; }

.theme-palette { position: relative; }
.theme-palette__menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
  width: 280px; max-width: calc(calc(100 * var(--vw)) - 32px); padding: 14px;
  border-radius: 18px; background: var(--surface);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--hue-0f5a4d) 18%, transparent), var(--shadow);
}
.theme-palette__title { margin: 0 0 2px; color: var(--ink); font-size: 13px; font-weight: 700; }
.theme-palette__hint { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.theme-palette__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.theme-palette__form { margin: 0; }
.theme-palette__swatch {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%;
  padding: 8px 4px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--text); font-size: 11px; cursor: pointer;
}
.theme-palette__swatch:hover { background: var(--surface-soft); }
.theme-palette__swatch.active { border-color: var(--mint); background: var(--mint-soft); font-weight: 700; }
.theme-palette__swatch:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.theme-palette__dot { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.theme-palette__custom { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.theme-palette__custom-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.theme-palette__custom-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.theme-palette__custom-row input[type="color"] { width: 38px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.theme-palette__custom-row .form-input { height: 36px; padding: 6px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
#notification-bell { display: block; }
.notification-bell-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid light-dark(#fff, var(--dk-surface));
  border-radius: 999px;
  color: #fff;
  background: var(--primary-fill);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  width: 340px;
  max-width: calc(calc(100 * var(--vw)) - 32px);
  padding: 12px;
  border-radius: 18px;
  background: light-dark(#fff, var(--dk-surface));
  box-shadow: 0 20px 50px color-mix(in srgb, var(--hue-0f5a4d) 18%, transparent);
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 10px;
  color: var(--ink);
  font-size: 13px;
}
.notif-list { display: grid; gap: 2px; max-height: min(calc(60 * var(--vh)), 420px); overflow-y: auto; }
.notif-item-form { display: block; margin: 0; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.notif-item:hover { background: light-dark(var(--hue-f5faf8), var(--dk-surface-soft)); }
.notif-item__icon {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--mint-dark);
  background: var(--mint-soft);
}
.notif-item__icon .icon { width: 15px; height: 15px; }
.notif-item .grow { flex: 1; min-width: 0; }
.notif-item strong { display: block; color: light-dark(#52625c, var(--dk-text-soft)); font-size: 12px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.notif-item.unread strong { color: var(--ink); font-weight: 700; }
.notif-item small { color: var(--muted); font-size: 10px; }
.notif-item.unread::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--mint);
}
.notif-foot { display: flex; justify-content: center; padding: 8px 4px 2px; border-top: 1px solid var(--line); margin-top: 6px; }
.notif-empty { padding: 18px 10px; color: var(--muted); font-size: 12px; text-align: center; }

.text-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mint-dark);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.text-btn:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--mint-dark); }

/* Profil kapsülü + menü. */
.profile-wrap { position: relative; }
.profile {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 178px;
  max-width: 240px;
  padding: 2px 10px 2px 2px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.profile:hover { background: light-dark(var(--hue-f5faf8), var(--dk-surface-soft)); }
.profile-avatar {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--mark-from), var(--mark-to));
  box-shadow: 0 0 0 3px light-dark(var(--tint-250), var(--dk-surface-mint));
  font-size: 12px;
  font-weight: 700;
}
.profile-info { min-width: 0; }
.profile-info strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-info small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile .chevron { flex: none; margin-left: auto; width: 15px; height: 15px; color: var(--muted); }
.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  width: 260px;
  max-width: calc(calc(100 * var(--vw)) - 32px);
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background: light-dark(#fff, var(--dk-surface));
  box-shadow: 0 20px 50px color-mix(in srgb, var(--hue-0f5a4d) 18%, transparent);
}
.profile-menu__who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.profile-menu__who strong { display: block; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.profile-menu__who span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }

/* Bürünme şeridi ve flash kabuğun içinde, üst barın altında. */
.impersonation-banner { border-radius: 16px; }

/* ─── Kırılımlar (devir §4.2) ──────────────────────────────────────────── */
@media (min-width: 981px) {
  /* Uzun sayfada menü içerikle birlikte kalsın: sticky + kendi kaydırması. */
  .app-shell {
    overflow: clip;
    background: linear-gradient(90deg, light-dark(#fff, var(--dk-surface)) 0 calc(var(--sidebar-w) - 1px), light-dark(var(--hue-f0f3f1), var(--dk-surface-soft)) calc(var(--sidebar-w) - 1px) var(--sidebar-w), var(--workspace) var(--sidebar-w));
  }
  .sidebar {
    position: sticky;
    top: 38px;
    align-self: start;
    height: calc(calc(100 * var(--vh)) - 76px);
    overflow: hidden;
  }
  .sidebar-backdrop { display: none; }
}

/* Kısa ekranda menünün tamamı görünsün: satır yüksekliği, satır arası ve
   logo ETKİN ekran yüksekliğine (`--vh`, ölçek dahil) göre sınırlar içinde
   küçülür; yüksek ekranda bugünkü ölçüler (43 px satır, 4 px aralık). */
@media (min-width: 981px) {
  .sidebar .nav { gap: clamp(1px, calc(0.3 * var(--vh)), 4px); }
  .sidebar .nav-item { min-height: clamp(34px, calc(4.6 * var(--vh)), 43px); }
  .sidebar { padding-top: clamp(18px, calc(3.4 * var(--vh)), 30px); }
  .sidebar-brand { padding-bottom: clamp(14px, calc(3 * var(--vh)), 28px); }
  .sidebar-brand--logo .sidebar-brand-logo { height: min(var(--brand-logo-h), calc(8 * var(--vh))); }
  .sidebar-brand--backdrop .sidebar-brand-logo { height: min(calc(var(--brand-logo-h) + 12px), calc(8 * var(--vh) + 12px)); }
}

/* Masaüstünde çerçeve ekran yüksekliğine sabittir ve SAYFA DEĞİL içerik
   alanı kayar. Eskiden pencere kayıyordu, menü ise `sticky` duruyordu:
   çerçevenin yuvarlak üst kenarı ekrandan çıkınca menünün üstündeki boşluk
   beyaz sütunla doluyor, menü aşağı indikçe "uzuyor" görünüyordu. Şimdi
   çerçeve, menü ve üst kenar yerinde kalır; kaydırma çubuğu içerik
   alanındadır. Yukarıdaki blok (sticky menü) bilerek yerinde bırakıldı,
   burada geçersiz kılınır. (≤ 980 px düzeni — çekmece menü, pencere
   kaydırması — değişmedi.) */
@media (min-width: 981px) {
  /* `flow-root`: çerçevenin dış boşluğu gövdeden taşmasın (taşarsa belge
     28 px uzar ve pencere yine kayar). */
  body.th-app { display: flow-root; }
  .app-shell {
    height: calc(calc(100 * var(--vh)) - 56px);
    height: calc(calc(100 * var(--vh)) - 56px);
    min-height: 0;
  }
  .sidebar {
    position: static;
    align-self: stretch;
    height: auto;
    min-height: 0;
  }
  .main-content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    scrollbar-width: thin;
  }
  /* Üst bar (arama · palet · tema · zil · profil) kaydırırken ekranın üstünde SABİT kalır:
     içerik alanının dolgusunu kendi içine alır (negatif kenar boşluğu), zemini çalışma
     alanı rengidir; sayfa başlık bandı altında normal kayar. */
  .th-topbar {
    position: sticky;
    top: calc(-1 * var(--pad-y)); /* sabitleme eşiği dolgunun İÇİNDEN başlar */
    z-index: 60;
    margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) 6px;
    padding: var(--pad-y) var(--pad-x) 12px;
    background: var(--workspace);
  }
}

@media (max-width: 1280px) {
  .app-shell { --sidebar-w: 210px; --side-col: 270px; --col-gap: 16px; }
  .main-content { --pad-y: 22px; --pad-x: 22px; padding: 22px; }
  .sidebar { padding: 26px 12px 20px; }
  .nav-item { padding: 0 12px; gap: 11px; }
}

@media (max-width: 980px) {
  .app-shell {
    width: calc(100% - 24px);
    margin: 12px auto;
    min-height: calc(calc(100 * var(--vh)) - 24px);
    grid-template-columns: minmax(0, 1fr);
    border-width: 6px;
    overflow: visible;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    max-width: calc(86 * var(--vw));
    z-index: 60;
    transform: translateX(-105%);
    transition: transform .28s ease;
    box-shadow: 20px 0 50px color-mix(in srgb, var(--hue-0f5a4d) 18%, transparent);
    overflow: hidden;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: color-mix(in srgb, var(--hue-0c312a) 35%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  body.sidebar-open { overflow: hidden; }
  .th-menu-toggle { display: grid; }
  .profile-info, .profile .chevron { display: none; }
  .profile { min-width: 0; padding: 2px; }
}

@media (max-width: 700px) {
  .main-content { padding: 16px; }
  .th-topbar { align-items: flex-start; gap: 10px; margin-bottom: 18px; }
  .th-top-actions { gap: 7px; }
  .th-page-title__name { font-size: 19px; }
  .search-box { width: 42px; height: 42px; padding: 0 11px; }
  .search-box:focus-within, .search-box.is-open { position: absolute; right: 16px; left: 16px; width: auto; z-index: 45; }
  .th-icon-btn { width: 42px; height: 42px; }
}

@media (max-width: 420px) {
  .app-shell { width: 100%; margin: 0; border-width: 0; border-radius: 0; min-height: calc(100 * var(--vh)); }
  .th-breadcrumb { display: none; }
}

/* ─── Oturumsuz ekranlar: kart ekranın tam ortasında ──────────────────────
   Yükseklik `--vh`ten (Tailwind `min-h-screen` = 100vh; geniş ekran ölçeği
   `zoom` ile 100vh görünür alandan uzun düşüyor ve kart aşağı kayıyordu). */
.auth-page {
  min-height: calc(100 * var(--vh));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.auth-flash {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(448px, calc(100% - 32px));
  display: grid;
  gap: 8px;
  z-index: 10;
}
.auth-flash .flash-notice, .auth-flash .flash-alert { margin: 0; }

/* ─── Oturumsuz ekranların kurum logosu (giriş · şifre · davet) ─────────── */
.auth-brand {
  display: flex;
  justify-content: center;
  margin: -4px 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.auth-brand__logo {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 64px;
  object-fit: contain;
}

/* ───── Üst bar HER sayfada: arama kutusu sağdaki kontrollere (palet · tema · zil · profil)
   kadar uzar; sayfa başlığı / iz yok (sayfanın kendi başlık bandı altında). Geri bağlantısı
   olan sayfada o bağlantı aramanın solunda kalır. Telefonda eski düzen (hamburger + ikon). ───── */
@media (min-width: 981px) {
  .th-topbar { gap: 0; margin-bottom: 0; padding-bottom: 18px; }
  .th-topbar--back .th-topbar__left { margin-right: 20px; }
  .th-topbar__left .th-page-title__name, .th-topbar__left .th-breadcrumb {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .th-topbar .th-top-actions { flex: 1 1 auto; min-width: 0; }
  .th-topbar .th-top-actions .search-box,
  .th-topbar .th-top-actions .search-box:focus-within,
  .th-topbar .th-top-actions .search-box.is-open { flex: 1 1 auto; width: auto; min-width: 0; }
  .th-topbar .th-top-actions .search-box kbd { display: inline-block; }
  .th-topbar .th-top-actions .search-box__input { font-size: 14px; }
  .top-cluster { flex: none; width: var(--side-col, 320px); }
}
/* ═══════════════════ TeamHub dashboard'u (devir §6) ═══════════════════
   Yerleşim: `minmax(0,1fr) 300px`, 22px aralık; sütun içi 20px. Kart 22px
   köşe / 20px iç boşluk, ağır gölge YOK. Özet kartları 4 sütun, görev–hafta
   çifti `1.25fr .95fr`, notlar 3 sütun, hızlı işlem 2×2.
   Sınıflar `th-` önekli — eski panelin (`.dashboard-workspace`, ayrıntılı
   görünümde yaşıyor) seçicileriyle çakışmasın. */

.th-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-col);
  gap: var(--col-gap);
  align-items: start;
}
.th-dash__main { min-width: 0; display: grid; gap: 20px; container-type: inline-size; }

/* Ana sütun darsa (1024px'te 270px'lik sağ sütunla ~400px) tarih paneli
   başlığın altına iner — başlık harf harf kırılmasın. Seçiciler bilerek
   `.th-dash__main` ile başlar: bu blok dosyada `.th-welcome`in temel
   tanımından ÖNCE durduğu için eşit güçte bir seçici o tanıma eziliyor ve
   kural hiç uygulanmıyordu. */
@container (max-width: 620px) {
  .th-dash__main .th-welcome { grid-template-columns: minmax(0, 1fr); }
  .th-dash__main .th-today { justify-self: start; flex-wrap: wrap; }
}
.th-dash__side { min-width: 0; display: grid; align-content: start; gap: 20px; }

.th-card {
  min-width: 0;
  background: light-dark(#fff, var(--dk-surface));
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--hue-0f5a4d) 1%, transparent);
}
.th-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 17px;
}
.th-card__head h2 { margin: 0; color: light-dark(#263630, var(--dk-text)); font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.th-card__head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.th-card__tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }

.th-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed light-dark(var(--hue-d6e0dc), var(--dk-line));
  border-radius: 12px;
  color: var(--muted);
  font-size: 11.5px;
  text-align: center;
}

/* Birincil düğme (referansın `.primary-btn`) ve beyaz varyantı. */
.th-btn, .th-btn-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border: 0;
  border-radius: 11px;
  background: var(--mint);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.th-btn:hover, .th-btn-light:hover { text-decoration: none; filter: brightness(.97); }
.th-btn:hover { color: #fff; }
.th-btn-light { color: var(--mint-dark); background: light-dark(#fff, var(--dk-surface)); }
.th-btn-light:hover { color: var(--mint-dark); }

.th-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  color: light-dark(#52625c, var(--dk-text-soft));
  background: light-dark(var(--hue-eef3f1), var(--dk-surface-soft));
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.th-mini-btn:hover { color: var(--mint-dark); text-decoration: none; }
.th-mini-btn.primary { color: #fff; background: var(--primary-fill); }
.th-mini-btn.primary:hover { color: #fff; filter: brightness(1.08); }
.th-inline-form { display: inline; margin: 0; }

.link-strong { color: var(--ink); font-weight: 700; text-decoration: none; }
.link-strong:hover { color: var(--mint-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ─── 1. Karşılama ─────────────────────────────────────────────────────── */
.th-welcome {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  color: #fff;
  background: linear-gradient(115deg, var(--hero-deep) 0%, var(--hero-mid) 62%, var(--hero-bright) 100%);
}
.th-welcome::after {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  right: -45px; top: -85px;
  border: 30px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  pointer-events: none;
}
.th-welcome__copy { position: relative; z-index: 1; min-width: 0; }
.th-welcome__eyebrow { margin-bottom: 8px; color: var(--hue-b8f1e4); font-size: 12px; font-weight: 600; }
.th-welcome h2 { margin: 0; max-width: 520px; font-size: 26px; font-weight: 700; letter-spacing: -.8px; overflow-wrap: break-word; }
.th-welcome .th-btn-light { margin-top: 14px; }

.th-today {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.th-today__seg { display: flex; align-items: center; gap: 12px; padding: 13px 18px; }
.th-today__seg + .th-today__seg { border-left: 1px solid rgba(255, 255, 255, .2); }
.th-today__seg small { display: block; color: var(--hue-c5f2e8); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.th-today__seg strong { display: block; margin-top: 2px; font-size: 14px; line-height: 1.1; }
.th-today__seg .sub { display: block; margin-top: 3px; color: rgba(255, 255, 255, .75); font-size: 11px; }
.th-today__day { font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -1.2px; }
.th-today__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .16); }

/* ─── 2. Özet kartları ─────────────────────────────────────────────────── */
.th-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.th-stat {
  display: block;
  min-width: 0;
  padding: 17px;
  border-radius: 17px;
  background: light-dark(#fff, var(--dk-surface));
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.th-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--hue-0f5a4d) 8%, transparent); text-decoration: none; color: inherit; }
.th-stat:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.th-stat__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 13px; }
.th-stat__top small { color: var(--muted); font-size: 11px; text-align: right; }
.th-stat__icon { flex: none; width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: var(--mint-soft); color: var(--mint-dark); }
.th-stat__icon.yellow { background: light-dark(#fff5cf, var(--dk-warning-soft)); color: light-dark(#ba8412, var(--dk-warning-text)); }
.th-stat__icon.lime { background: var(--lime); color: light-dark(#59852a, var(--dk-lime-text)); }
.th-stat__icon.red { background: light-dark(#ffebe9, var(--dk-danger-soft)); color: var(--danger); }
.th-stat small { color: var(--muted); font-size: 11px; }
.th-stat strong { display: block; margin-top: 3px; color: var(--ink); font-size: 22px; font-weight: 700; }
.th-stat__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--mint-dark); font-size: 10px; font-weight: 700; }

/* ─── 3. Ekip iş yükü ──────────────────────────────────────────────────── */
.th-load-list { display: grid; gap: 4px; }
.th-load-row {
  display: grid;
  /* Sayı sütunu SABİT genişlikte: "3 açık · 1 gecikmiş" gibi uzun etiket
     çubuğu kısaltıp satırlar arasında kaydırmasın — çubuklar hizalı kalır. */
  grid-template-columns: 40px minmax(120px, 1.2fr) minmax(80px, 1.4fr) 9.5rem auto;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
}
.th-load-row:last-child { border-bottom: 0; }
.th-load-who { display: grid; min-width: 0; }
.th-load-who a { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-load-who span { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-load-bar { height: 7px; overflow: hidden; border-radius: 7px; background: light-dark(var(--hue-e8eeeb), var(--dk-surface-soft)); }
.th-load-bar__fill { display: flex; justify-content: flex-end; height: 100%; min-width: 2px; overflow: hidden; border-radius: inherit; background: var(--mint); }
/* Gecikmiş iş: açık işin içinde, oranı kadar düz kırmızı parça (sonda). */
.th-load-bar__late { display: block; height: 100%; min-width: 3px; background: var(--danger); }
.th-load-num { color: light-dark(#52625c, var(--dk-text-soft)); font-size: 11px; white-space: nowrap; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.th-load-num b { color: light-dark(#b25450, var(--dk-danger-text)); }

/* ─── 4. Sabitlenen alanlarım ──────────────────────────────────────────── */
.th-widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.th-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 180px;
  padding: 18px 18px 14px 20px;
  overflow: hidden;
  border: 1px solid light-dark(var(--hue-e3ebe7), var(--dk-line));
  border-radius: 18px;
  background: light-dark(var(--hue-fbfdfc), var(--dk-surface));
}
.th-widget::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tone-accent, var(--mint));
}
.th-widget.tone--default::before { background: var(--mint); }
.th-widget__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.th-widget__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.th-widget__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--mint-dark); background: var(--mint-soft); }
.th-widget__title h3 { margin: 0; font-size: 14.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-widget__title h3 a { color: var(--ink); text-decoration: none; }
.th-widget__title h3 a:hover { color: var(--mint-dark); text-decoration: underline; text-underline-offset: 3px; }
.th-widget__title small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.th-widget__counter { flex: none; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 6px; border-radius: 50%; color: var(--mint-dark); background: var(--mint-soft); font-size: 10px; font-weight: 800; }
.th-widget__items { display: grid; gap: 7px; }
.th-widget__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid light-dark(var(--hue-edf2ef), var(--dk-line));
  border-radius: 11px;
  background: light-dark(#fff, var(--dk-surface));
}
.th-widget__text { min-width: 0; }
.th-widget__text strong { display: block; color: light-dark(#33443e, var(--dk-text)); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.th-widget__text span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.th-widget__text span.is-late { color: light-dark(#b25450, var(--dk-danger-text)); }
.th-widget__dot { width: 8px; height: 8px; margin: 0 6px; border-radius: 50%; background: var(--tone-accent, var(--mint)); }
.th-widget__empty { margin: 0; padding: 10px 2px; color: var(--muted); font-size: 11px; }
.th-check-form { display: inline; margin: 0; }
.th-check {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  padding: 0;
  border: 2px solid light-dark(var(--hue-cbd7d3), var(--dk-line));
  border-radius: 6px;
  background: light-dark(#fff, var(--dk-surface));
  cursor: pointer;
}
.th-check:hover { border-color: var(--mint); background: var(--mint-soft); }
.th-check:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.th-widget__add { display: flex; gap: 6px; margin-top: 10px; }
.th-widget__add input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid light-dark(var(--hue-e2e9e6), var(--dk-line));
  border-radius: 10px;
  outline: 0;
  background: light-dark(#fff, var(--dk-surface));
  font-size: 12px;
}
.th-widget__add input[type="text"]:focus { border-color: var(--mint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 11%, transparent); }
.th-widget__more { margin-top: 10px; align-self: flex-start; font-size: 11px; }

.th-widgets-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 18px;
  border: 1px dashed light-dark(var(--hue-d6e0dc), var(--dk-line));
  border-radius: 16px;
  text-align: center;
}
.th-widgets-empty__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--mint-dark); background: var(--mint-soft); }
.th-widgets-empty h3 { margin: 4px 0 0; color: var(--ink); font-size: 13px; }
.th-widgets-empty p { max-width: 420px; margin: 0 0 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }

/* ─── 5. Görev listesi + Bu hafta ──────────────────────────────────────── */
.th-pair { display: grid; grid-template-columns: 1.25fr .95fr; gap: 20px; align-items: start; }
.th-pair--single { grid-template-columns: minmax(0, 1fr); }

.th-task-list { display: grid; gap: 4px; }
.th-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 3px;
  border-bottom: 1px solid var(--line);
}
.th-task:last-child { border-bottom: 0; }
.th-task__status { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--mint-dark); background: var(--mint-soft); }
.th-task__status.is-late { color: light-dark(#b25450, var(--dk-danger-text)); background: light-dark(#ffebe9, var(--dk-danger-soft)); }
.th-task__body { min-width: 0; }
.th-task__title { display: block; color: light-dark(#2f403a, var(--dk-text)); font-size: 12.5px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.th-task__title:hover { color: var(--mint-dark); text-decoration: underline; text-underline-offset: 3px; }
.th-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 5px; color: var(--muted); font-size: 10px; }
.th-task__who { color: light-dark(#52625c, var(--dk-text-soft)); }
.th-tag { padding: 4px 7px; border-radius: 7px; color: light-dark(var(--mint-text), var(--dk-mint-dark)); background: var(--mint-soft); font-size: 9.5px; font-weight: 700; }
.th-tag.urgent { color: light-dark(#b25450, var(--dk-danger-text)); background: light-dark(#ffebe9, var(--dk-danger-soft)); }
.th-due { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 8px; color: light-dark(#52625c, var(--dk-text-soft)); background: light-dark(var(--hue-f1f4f2), var(--dk-surface-soft)); font-size: 10px; font-weight: 700; white-space: nowrap; }
.th-due.y { color: light-dark(#8b6711, var(--dk-warning-text)); background: light-dark(#fff3ca, var(--dk-warning-soft)); }
.th-due.r { color: light-dark(#b25450, var(--dk-danger-text)); background: light-dark(#ffebe9, var(--dk-danger-soft)); }

.th-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
.th-day {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 10px 3px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 9.5px;
  text-decoration: none;
}
.th-day strong { color: light-dark(#42514c, var(--dk-text-soft)); font-size: 12px; }
.th-day:hover { background: light-dark(var(--tint-100), var(--dk-surface-mint)); text-decoration: none; color: var(--muted); }
.th-day.today strong { color: var(--mint-dark); }
.th-day.active { color: #fff; background: var(--mint); box-shadow: 0 7px 15px color-mix(in srgb, var(--mint) 20%, transparent); }
.th-day.active strong { color: #fff; }
.th-day__dots { display: flex; gap: 3px; height: 5px; }
.th-day__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.th-day.active .th-day__dots i { background: light-dark(#fff, var(--dk-surface)); }

.th-agenda { display: grid; gap: 10px; }
.th-event {
  display: grid;
  grid-template-columns: 50px 4px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.th-event:hover { text-decoration: none; color: inherit; }
.th-event:hover strong { color: var(--mint-dark); }
.th-event time { color: var(--ink); font-size: 10px; font-weight: 700; }
.th-event__bar { height: 38px; border-radius: 4px; background: var(--mint); }
.th-event--task .th-event__bar { background: #b9d98f; }
.th-event--project .th-event__bar { background: var(--yellow); }
.th-event__body { min-width: 0; }
.th-event__body strong { display: block; color: light-dark(#35443f, var(--dk-text)); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-event__body span { display: block; color: var(--muted); font-size: 9.5px; }

/* ─── 6. Son notlarım ──────────────────────────────────────────────────── */
.th-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.th-note {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 112px;
  padding: 15px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--tone-accent) 16%, light-dark(white, var(--dk-surface)));
  color: inherit;
  text-decoration: none;
}
.th-note.tone--default { background: light-dark(var(--tint-150), var(--dk-surface-mint)); }
.th-note:hover { text-decoration: none; color: inherit; box-shadow: 0 8px 20px color-mix(in srgb, var(--hue-0f5a4d) 7%, transparent); }
.th-note__top { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9.5px; }
.th-note strong { margin: 14px 0 6px; color: var(--ink); font-size: 12.5px; overflow-wrap: anywhere; }
.th-note__text { color: light-dark(#6f7d79, var(--dk-muted)); font-size: 10.5px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.th-note__clip { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; color: var(--mint-dark); font-size: 10px; font-weight: 700; }

/* ─── Sağ sütun ────────────────────────────────────────────────────────── */
.th-mini-cal__nav { display: flex; gap: 4px; }
.th-mini-cal__arrow { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--mint-dark); text-decoration: none; }
.th-mini-cal__arrow:hover { background: var(--mint-soft); }
.th-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; text-align: center; }
.th-month__weekday { color: light-dark(#9ba5a2, var(--dk-muted-soft)); font-size: 9px; font-weight: 600; }
.th-date {
  display: grid;
  place-items: center;
  min-height: 29px;
  border-radius: 8px;
  color: light-dark(#4b5b56, var(--dk-text-soft));
  font-size: 10px;
  text-decoration: none;
}
.th-date:hover { outline: 1px solid var(--mint); text-decoration: none; color: light-dark(#4b5b56, var(--dk-text-soft)); }
.th-date.muted { color: light-dark(#c5cdca, var(--dk-muted-soft)); }
.th-date.has-event { color: var(--mint-dark); background: var(--lime); font-weight: 700; }
.th-date.selected { outline: 2px solid var(--mint); outline-offset: -2px; }
.th-date.current, .th-date.current.has-event { color: #fff; background: var(--mint); font-weight: 700; }

.th-meetings { display: grid; gap: 12px; }
.th-meeting {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.th-meeting:last-child { border-bottom: 0; padding-bottom: 0; }
.th-meeting:hover { text-decoration: none; color: inherit; }
.th-meeting:hover strong { color: var(--mint-dark); }
.th-meeting__time { padding: 8px 4px; border-radius: 10px; text-align: center; color: var(--mint-dark); background: var(--mint-soft); font-size: 9.5px; font-weight: 700; }
.th-meeting__body { min-width: 0; }
.th-meeting__body strong { display: block; color: light-dark(#31403b, var(--dk-text)); font-size: 11.5px; overflow-wrap: anywhere; }
.th-meeting__body span { display: block; margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.th-meeting__people .avatar { border: 2px solid light-dark(#fff, var(--dk-surface)); margin-left: -6px; }
.th-meeting__people .avatar:first-child { margin-left: 0; }

.th-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.th-quick__action {
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border-radius: 13px;
  color: var(--mint-dark);
  background: light-dark(var(--tint-150), var(--dk-surface-mint));
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.th-quick__action:hover { background: var(--mint-soft); transform: translateY(-1px); text-decoration: none; color: var(--mint-dark); }

/* ─── Özet modalı (520px) ──────────────────────────────────────────────── */
.th-summary { display: grid; }
.th-sum-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.th-sum-row:last-of-type { border-bottom: 0; }
.th-sum-row:hover { text-decoration: none; color: inherit; }
.th-sum-row:hover strong { color: var(--mint-dark); }
.th-sum-row .grow { flex: 1; min-width: 0; }
.th-sum-row strong { display: block; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.th-sum-row .meta { display: block; color: var(--muted); font-size: 11px; }
.th-sum-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--mint-dark); background: var(--mint-soft); }
.th-sum-more { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; }
.th-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }

/* ─── Kırılımlar (devir §4.2) ──────────────────────────────────────────── */
@media (min-width: 981px) and (min-height: 860px) {
  /* İçerik alanı kendi kaydırıcısıdır: yapışma onun üst kenarına göre. */
  .th-dash__side { position: sticky; top: 0; }
}

@media (max-width: 1280px) {
  .th-dash { grid-template-columns: minmax(0, 1fr) var(--side-col); gap: var(--col-gap); }
  .th-pair { grid-template-columns: minmax(0, 1fr); }
  .th-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-load-row { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
  .th-load-bar { display: none; }
}

@media (max-width: 980px) {
  .th-dash { grid-template-columns: minmax(0, 1fr); }
  .th-dash__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .th-welcome { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .th-welcome h2 { font-size: 22px; }
  .th-today { flex-wrap: wrap; }
  .th-today__seg { padding: 10px 12px; }
  .th-stats, .th-dash__side, .th-notes, .th-widgets { grid-template-columns: minmax(0, 1fr); }
  .th-stat { display: flex; align-items: center; gap: 12px; }
  .th-stat__top { margin: 0; }
  .th-stat__top small { display: none; }
  .th-card { padding: 17px; }
  .th-card__head { flex-wrap: wrap; }
  .th-week { gap: 2px; }
  .th-day { padding: 8px 1px; }
  .th-load-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .th-load-row .th-mini-btn { grid-column: 2 / -1; justify-self: start; }
  .th-task { grid-template-columns: auto minmax(0, 1fr); }
  .th-task > form, .th-task > .th-mini-btn { grid-column: 2; justify-self: start; }
}

/* ─── Mini takvim: gün tooltip'i ──────────────────────────────────────────
   Öğesi olan günün özeti; yalnız CSS (hover + klavye odağı). Kenar
   sütunlarda balon içeri yaslanır ki kartın dışına taşmasın. Zemin
   `--ink` DEĞİL (karanlıkta açık renge döner): tema renginin koyu bandı
   (`--hero-from`) koyulaştırılarak kullanılır — balon iki temada da koyu
   kalır, rengi seçilen temaya uyar. */
.th-date-cell { position: relative; display: grid; }
.th-day-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 40;
  width: max-content;
  min-width: 190px;
  max-width: 250px;
  padding: 13px 15px;
  border-radius: 14px;
  /* Temanın koyu tonu (seçilen renge uyar; varsayılanda ≈ #103932). */
  --tip-bg: color-mix(in srgb, var(--hero-from) 55%, #111);
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--tip-bg);
  color: #fff;
  text-align: left;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--hue-0f2822) 22%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.th-day-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: var(--tip-bg);
}
.th-date-cell--col0 .th-day-tip,
.th-date-cell--col1 .th-day-tip { left: 0; transform: translate(0, 4px); }
.th-date-cell--col0 .th-day-tip::after,
.th-date-cell--col1 .th-day-tip::after { left: 18px; margin-left: -7px; }
.th-date-cell--col5 .th-day-tip,
.th-date-cell--col6 .th-day-tip { left: auto; right: 0; transform: translate(0, 4px); }
.th-date-cell--col5 .th-day-tip::after,
.th-date-cell--col6 .th-day-tip::after { left: auto; right: 11px; margin-left: 0; }
@media (hover: hover) {
  .th-date-cell:hover .th-day-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .th-date-cell--col0:hover .th-day-tip, .th-date-cell--col1:hover .th-day-tip,
  .th-date-cell--col5:hover .th-day-tip, .th-date-cell--col6:hover .th-day-tip { transform: translate(0, 0); }
}
.th-date-cell:focus-within .th-day-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.th-date-cell--col0:focus-within .th-day-tip, .th-date-cell--col1:focus-within .th-day-tip,
.th-date-cell--col5:focus-within .th-day-tip, .th-date-cell--col6:focus-within .th-day-tip { transform: translate(0, 0); }
.th-day-tip__title { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; }
.th-day-tip__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.th-day-tip__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; font-size: 11px; line-height: 1.4; }
.th-day-tip__row time { color: var(--hue-9fe3cf); font-weight: 700; white-space: nowrap; }
.th-day-tip__row span { overflow-wrap: anywhere; }
.th-day-tip__row em { color: rgba(255, 255, 255, .6); font-style: normal; }
.th-day-tip__more { margin: 8px 0 0; color: rgba(255, 255, 255, .6); font-size: 10.5px; }
/* ═══════════════════ TeamHub — modül ekranları (devir §7) ═══════════════════
   Sayfa hero'su, sekme/filtre hapları, beyaz panel ve tablo dili. Görev,
   not, proje, toplantı, mesaj, takvim, Bana Gelenler, Ekibim ve yönetim
   ekranları bu ortak parçaları paylaşır; ekrana özel kurallar dosyanın
   sonunda, ekran adıyla ayrılmış bölümlerde. */

/* ─── Sayfa hero'su (`shared/_admin_topbar`) ───────────────────────────── */
.page-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  color: #fff;
  background: linear-gradient(120deg, var(--hero-from), var(--hero-to));
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  right: -60px; top: -90px;
  border: 26px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero__icon {
  position: relative; z-index: 1;
  flex: none;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
}
.page-hero__copy { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; }
.page-hero__eyebrow { display: block; margin-bottom: 5px; color: var(--hue-b8f1e4); font-size: 11.5px; font-weight: 600; }
.page-hero h1, .page-hero h2 { margin: 0 0 5px; color: #fff; font-size: 21px; font-weight: 700; letter-spacing: -.5px; overflow-wrap: anywhere; }
.page-hero p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 12px; line-height: 1.5; }
.page-hero__actions {
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.page-hero__actions form { margin: 0; }
/* Hero üzerindeki düğmeler (sayfa, kayıt ve görev hero'su): birincil
   beyaz, diğerleri yarı saydam. */
.page-hero .btn, .record-hero .btn { box-shadow: none; }
.page-hero .btn-primary, .page-hero .btn-success,
.record-hero .btn-primary, .record-hero .btn-success { color: var(--mint-dark); background: light-dark(#fff, var(--dk-surface)); }
.page-hero :is(.btn-light, .btn-ghost, .btn-secondary, .btn-info, .btn-warning),
.record-hero :is(.btn-light, .btn-ghost, .btn-secondary, .btn-info, .btn-warning) {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
}
.page-hero :is(.btn-light, .btn-ghost, .btn-secondary, .btn-info, .btn-warning):hover,
.record-hero :is(.btn-light, .btn-ghost, .btn-secondary, .btn-info, .btn-warning):hover { color: #fff; background: rgba(255, 255, 255, .24); }

@media (max-width: 700px) {
  .page-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .page-hero__actions { margin-left: 0; justify-content: flex-start; }
}

/* ─── Basit sayfa başlığı (`.topbar` — form ve alt sayfalar) ───────────── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.topbar h1, .topbar h2 { margin: 0; color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -.5px; }
.topbar .topbar-subtitle, .topbar p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.topbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.topbar-actions form { margin: 0; }

/* ─── Ortak parçalar: sekme, araç çubuğu, haplar ───────────────────────── */
.th-tabs { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; border-bottom: 1px solid light-dark(var(--hue-dfe8e4), var(--dk-line)); }
.th-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 2px;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  color: var(--muted);
  font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.th-tab:hover { color: var(--ink); text-decoration: none; }
.th-tab.active { color: var(--ink); border-bottom-color: var(--mint-dark); }

/* ─── Ayarlar → Sürüm notları ───────────────────────────────────────────── */
.release-current { display: grid; justify-items: end; gap: 6px; text-align: right; }
.release-current__badge {
  display: inline-flex; align-items: center;
  padding: 7px 13px; border-radius: 10px;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 13px; font-weight: 700;
}
.release-current small { color: rgba(255, 255, 255, .78); font-size: 12px; }
.release-list { display: grid; gap: 16px; }
.release-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.release-card__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.release-card__version {
  padding: 4px 10px; border-radius: 8px;
  background: var(--muted); color: #fff;
  font-size: 13px; font-weight: 700;
}
.release-card__version.is-current { background: var(--mint-dark); }
.release-card__date { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; }
.release-card__title { flex: 1 1 260px; margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 700; }
.release-card__current {
  padding: 3px 9px; border-radius: 999px;
  background: var(--mint-soft); color: var(--mint-dark);
  font-size: 11.5px; font-weight: 700;
}
.release-card__copy { margin-left: auto; }
.release-card__items { display: grid; gap: 12px; margin: 0; padding: 18px 20px 20px; list-style: none; }
.release-card__items li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--text); font-size: 13.5px; line-height: 1.6; }
.release-kind {
  justify-self: start;
  padding: 2px 9px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; line-height: 1.7;
}
.release-kind--new { background: var(--mint-soft); color: var(--mint-dark); }
.release-kind--improvement { background: var(--lime); color: light-dark(#3f5a1f, #bddc93); }
.release-kind--fix { background: light-dark(#ffebe9, #3b2221); color: light-dark(#b25450, #f3a29d); }
@media (max-width: 640px) {
  .release-card__items li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .release-current { justify-items: start; text-align: left; }
}

.th-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.th-toolbar .grow { flex: 1; }
.th-search-inline { flex: 0 1 320px; min-width: 200px; }
.th-search-inline .form-input { background: light-dark(#fff, var(--dk-surface)); }

.filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 0; border-radius: 9px;
  background: light-dark(#fff, var(--dk-surface)); color: light-dark(#71807b, var(--dk-muted));
  font-family: inherit; font-size: 11px; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.filter-pill:hover { color: var(--mint-dark); text-decoration: none; }
.filter-pill.active { color: var(--mint-dark); background: var(--mint-soft); }
.filter-pill .count { min-width: 18px; padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--hue-0f5a4d) 8%, transparent); font-size: 10px; text-align: center; }

/* ─── Bana Gelenler (hub) ──────────────────────────────────────────────── */
.hub-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.hub-filters, .hub-panel { padding: 16px; border-radius: 18px; background: light-dark(#fff, var(--dk-surface)); }
.hub-filters { display: grid; gap: 2px; }
.hub-filter {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px;
  border-radius: 10px;
  color: light-dark(#667570, var(--dk-muted)); font-size: 12.5px;
  text-decoration: none;
}
.hub-filter:hover { background: light-dark(var(--tint-100), var(--dk-surface-mint)); color: var(--mint-dark); text-decoration: none; }
.hub-filter.active { color: var(--mint-dark); background: var(--mint-soft); font-weight: 700; }
.hub-filter .nav-badge { margin-left: auto; }
.hub-note { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
/* TeamHub 02 — "Benden beklenenler" satırı: bildirim satırının iskeleti, ama
   tıklama kaydı açar (okundu işareti yok); tür etiketi + beklenen işlem. */
.decision-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.decision-row:last-of-type { border-bottom: 0; }
.decision-row .inbox-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.decision-row .notification-row-title { color: var(--ink); font-weight: 700; text-decoration: none; }
.decision-row .notification-row-title:hover { color: var(--mint-dark); text-decoration: underline; }
.decision-row__kind { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--mint-dark); text-transform: uppercase; }
.decision-row__action { font-size: 11px; color: var(--text); }
.decision-row__form { display: inline; margin: 0; }
.decision-row .notification-row-meta { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
@media (max-width: 700px) {
  .decision-row { flex-wrap: wrap; }
  .decision-row .inbox-main { flex-basis: calc(100% - 50px); }
  .decision-row .notification-row-meta { flex-basis: 100%; padding-left: 46px; flex-wrap: wrap; }
}
.sum-ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; color: var(--mint-dark); background: var(--mint-soft); }
@media (max-width: 800px) {
  .hub-layout { grid-template-columns: minmax(0, 1fr); }
  .hub-filters { display: flex; overflow-x: auto; padding: 8px; }
  .hub-filter { width: auto; white-space: nowrap; }
}

/* ─── Ekibim ───────────────────────────────────────────────────────────── */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tm-card { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: light-dark(#fff, var(--dk-surface)); min-width: 0; }
.tm-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-avatar { width: 54px; height: 54px; font-size: 16px; }
.tm-who { min-width: 0; }
.tm-who h3 { margin: 0 0 2px; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.tm-who p { margin: 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.employee-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding-top: 13px; border-top: 1px solid var(--line); text-align: center; }
.employee-stats strong { display: block; color: var(--ink); font-size: 14px; }
.employee-stats strong.is-late { color: light-dark(#b25450, var(--dk-danger-text)); }
.employee-stats span { color: var(--muted); font-size: 9.5px; }
.tm-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Segment anahtarı (referansın `.seg`) — hero içinde saydam varyant. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: light-dark(var(--hue-f1f5f3), var(--dk-surface-soft)); }
.seg a, .seg button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 0; border-radius: 9px;
  color: light-dark(#5f6f69, var(--dk-muted)); background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.seg a:hover { color: var(--mint-dark); text-decoration: none; }
.seg a.active { color: var(--mint-dark); background: light-dark(#fff, var(--dk-surface)); box-shadow: 0 2px 6px color-mix(in srgb, var(--hue-0f5a4d) 8%, transparent); }
.seg .count { min-width: 18px; padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--hue-0f5a4d) 10%, transparent); font-size: 10px; text-align: center; }
.seg--hero { background: rgba(255, 255, 255, .12); width: fit-content; }
.seg--hero a { color: rgba(255, 255, 255, .82); }
.seg--hero a:hover { color: #fff; }
.seg--hero a.active { color: var(--mint-dark); background: light-dark(#fff, var(--dk-surface)); }
.seg--hero a.active .count { background: var(--mint-soft); }
/* Bölüm gezinmesi hero'nun kendi satırında (kap tam genişlik, anahtar içerik kadar). */
.hero-nav { position: relative; z-index: 1; flex-basis: 100%; }
.page-hero:has(.hero-nav) { flex-wrap: wrap; }

/* Tablo kendi kabında kayar (devir §4.2: sayfa yatay taşmaz). */
.table-wrap { overflow-x: auto; max-width: 100%; }
.meeting-table td { vertical-align: top; }
.meeting-table .cell-title { min-width: 240px; }

/* Dar ekranda tarih aralığı satırı taşmasın (390px'te ikinci tarih
   görünüm alanını aşıyordu). */
@media (max-width: 700px) {
  .list-toolbar input[type="date"] { min-width: 0; width: auto; flex: 1 1 120px; }
  .list-toolbar label, .list-toolbar .toolbar-check { flex-wrap: wrap; min-width: 0; white-space: normal; max-width: 100%; }
}
@media (max-width: 700px) {
  /* Bana Gelenler: künye (rozet · zaman · Aç) satırın altına iner. */
  .notification-row { flex-wrap: wrap; }
  .notification-row-main { flex-basis: calc(100% - 50px); }
  .notification-row-meta { flex-basis: 100%; padding-left: 46px; }
}

/* Kişisel "Görev merkezi" (kart görünümü): referanstaki gibi sekme, haplar ve
   pano doğrudan zeminde — beyaz panel ve kenar boşlukları yok; kartta
   departman satırı gizli (hepsi benim işim, adres detayda). */
.task-workspace-panel.is-board { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.task-workspace-panel.is-board .task-status-tabs { padding: 0; }
.task-workspace-panel.is-board .task-filter-form.list-toolbar { padding: 16px 0 0; background: transparent; }
.task-workspace-panel.is-board .task-focus-row,
.task-workspace-panel.is-board .task-applied-filters,
.task-workspace-panel.is-board .task-results-heading { padding-left: 0; padding-right: 0; border-top: 0; }
.task-workspace-panel.is-board .th-kanban,
.task-workspace-panel.is-board .board { padding-left: 0; padding-right: 0; }
.task-workspace-panel.is-board .task-board-controls { padding-right: 0; }
.task-workspace-panel.is-board .task-board-note { padding-left: 0; }
.task-workspace-panel.is-board .task-workspace-footer { padding-left: 0; border-top: 0; }
.task-workspace-panel.is-board .filter-pill:not(.active) { background: light-dark(#fff, var(--dk-surface)); }
.task-workspace-panel.is-board .th-kanban .board-card__sub { display: none; }
.task-workspace-panel.is-board .form-input { background: light-dark(#fff, var(--dk-surface)); }

/* TeamHub 09 — "Dosyalar": sade dosya satırları (ad · tür · boyut · tarih ·
   kaynak · Aç / İndir). Dar ekranda eylemler alt satıra iner. */
.files-toolbar { flex-wrap: wrap; }
.files-toolbar__search { flex: 1 1 220px; min-width: 0; }
.files-list { list-style: none; margin: 0; padding: 0; }
.files-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--line);
}
.files-row:last-child { border-bottom: 0; }
.files-row__thumb {
  width: 44px; height: 44px; border-radius: 10px; background: var(--surface-soft); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.files-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.files-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.files-row__name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.files-row__meta { font-size: 12.5px; color: var(--muted); }
.files-row__source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); min-width: 0; }
.files-row__source-title { overflow-wrap: anywhere; }
.files-row__via { color: var(--muted); }
.files-row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 768px) {
  .files-row { grid-template-columns: 40px minmax(0, 1fr); }
  .files-row__thumb { width: 40px; height: 40px; }
  .files-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ─── Ayarlar → Uygulama ──────────────────────────────────────────────────
   Solda sekmeli form kartları, sağda yapışkan önizleme; dar ekranda tek
   sütun (önizleme formun altına iner). */
.settings-tabs { margin-bottom: 0; }
.settings-tabs .th-tab { border-top: 0; border-left: 0; border-right: 0; background: transparent; cursor: pointer; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 22px; align-items: start; }
.settings-main, .settings-form, .settings-panel { display: grid; gap: 18px; min-width: 0; }
.settings-panel[hidden] { display: none; }
.settings-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 0; }
.settings-card__head {
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: 14px; font-weight: 700;
}
.settings-card__head .icon { color: var(--mint-dark); }
.settings-card__body { display: grid; gap: 18px; padding: 20px; }
.settings-label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 13px; font-weight: 600; }
.settings-hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.settings-hint--top { margin: 0 0 4px; }
.settings-status { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); color: var(--text); font-size: 12px; }
.settings-status--warn { background: light-dark(#fff3ca, #382e14); color: light-dark(#8b6711, #f0cc6c); }
.settings-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.settings-grid--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.settings-logo-current { display: flex; align-items: center; gap: 14px; }
.settings-logo-current__img {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 170px; height: 76px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
/* Önizleme kutuya SIĞAR: görsel kutunun kendisi kadar, oranı korunur (tam
   boy yüklenen görsel eskiden kutudan taşıp alt satırlara biniyordu). */
.settings-logo-current__img { overflow: hidden; }
.settings-logo-current__img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.settings-logo-current strong { display: block; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.settings-logo-current small { color: var(--muted); font-size: 12px; }

/* Anahtar (checkbox'un görünüşü; gerçek girdi erişilebilir kalır). */
.settings-switch { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.settings-switch input { position: absolute; opacity: 0; width: 38px; height: 22px; margin: 0; cursor: pointer; }
.settings-switch__track {
  flex: none; position: relative;
  width: 38px; height: 22px; margin-top: 1px;
  border-radius: 999px; background: var(--line);
  transition: background .15s;
}
.settings-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .15s;
}
.settings-switch input:checked + .settings-switch__track { background: var(--mint); }
.settings-switch input:checked + .settings-switch__track::after { transform: translateX(16px); }
.settings-switch input:focus-visible + .settings-switch__track { outline: 2px solid var(--mint); outline-offset: 2px; }
.settings-switch strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600; }
.settings-switch small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Seçenek şeridi (logo boyutu). */
.settings-segment { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.settings-segment legend { width: 100%; }
.settings-segment__item { position: relative; cursor: pointer; }
.settings-segment__item input { position: absolute; opacity: 0; pointer-events: none; }
.settings-segment__item span {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 12.5px;
}
.settings-segment__item input:checked + span { border-color: var(--mint); background: var(--mint-soft); color: var(--mint-dark); font-weight: 700; }
.settings-segment__item input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 2px; }

.settings-danger-check { display: inline-flex; align-items: center; gap: 8px; color: var(--danger); font-size: 13px; cursor: pointer; }

.settings-suffix { display: flex; max-width: 220px; }
.settings-suffix .form-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.settings-suffix span {
  display: grid; place-items: center; padding: 0 14px;
  border: 1px solid var(--line); border-left: 0; border-radius: 0 12px 12px 0;
  background: var(--surface-soft); color: var(--muted); font-size: 13px;
}
/* Tema rengi örnekleri: radyo erişilebilir kalır, görünüş noktadadır. */
.settings-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.settings-swatches legend { width: 100%; }
.settings-swatch {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 12.5px; cursor: pointer;
}
.settings-swatch input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.settings-swatch__dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.settings-swatch:has(input:checked) { border-color: var(--mint); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint) 25%, transparent); font-weight: 700; }
.settings-swatch:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 2px; }
.settings-swatch__dot--custom { background: conic-gradient(#e5484d, #e8772e, #d4a017, #38c3a6, #2f80ed, #7c5cd6, #d6408f, #e5484d); }
.settings-custom-color { display: none; flex-wrap: wrap; align-items: center; gap: 10px; }
.settings-swatches:has([data-test="theme-custom"]:checked) ~ .settings-custom-color { display: flex; }
.settings-custom-color input[type="color"] { width: 44px; height: 42px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.settings-custom-color__code { width: 140px; }
.settings-custom-color__code .form-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: lowercase; }
.settings-custom-color .settings-hint { margin: 0; }

.settings-tests { gap: 12px; }
.settings-test { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface-soft); }
.settings-test strong { display: block; color: var(--ink); font-size: 13px; }
.settings-test small { display: block; color: var(--muted); font-size: 12px; }
.settings-test form { margin: 0; flex: none; }

.settings-savebar { display: flex; justify-content: flex-end; padding-top: 4px; }

.settings-preview { position: sticky; top: 20px; }
.settings-preview__label { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.settings-preview__sidebar {
  padding: 22px 18px 0;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface);
}
.settings-preview__sidebar .sidebar-brand { padding-bottom: 22px; }
.settings-preview__login {
  display: grid; place-items: center; padding: 22px;
  border-radius: 16px; background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
}
.settings-preview__login-card {
  display: grid; justify-items: center; gap: 4px;
  width: min(100%, 230px); padding: 16px 18px;
  border-radius: 14px; background: #fff; text-align: center;
}
.settings-preview__login-logo { width: 100%; max-width: 170px; height: 48px; object-fit: contain; margin-bottom: 6px; }
.settings-preview__login-card strong { color: var(--hue-18362f); font-size: 14px; }
.settings-preview__login-card small { color: #7c8985; font-size: 11px; }

@media (max-width: 1100px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-preview { position: static; }
}
@media (max-width: 640px) {
  .settings-grid, .settings-grid--half { grid-template-columns: minmax(0, 1fr); }
  .settings-test { flex-direction: column; align-items: flex-start; }
}

/* Sekme ikonu kartı ve önizlemedeki tarayıcı sekmesi. */
.settings-favicon-current { display: flex; align-items: center; gap: 14px; }
.settings-favicon-current__img {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none;
  width: 64px; height: 64px; padding: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.settings-favicon-current__img { overflow: hidden; }
.settings-favicon-current__img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.settings-favicon-current strong { display: block; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.settings-favicon-current small { display: block; color: var(--muted); font-size: 12px; }
.settings-preview__tabbar { padding: 10px 12px; border-radius: 14px; background: #2b3431; }
.settings-preview__tab {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 8px 14px; border-radius: 10px;
  background: #3b4643; color: #e8efec; font-size: 12px;
}
.settings-preview__tab img { flex: none; width: 16px; height: 16px; border-radius: 3px; object-fit: contain; }
.settings-preview__tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Hesabım ───────────────────────────────────────────────────────────── */
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.account-readonly { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--text); font-size: 13px; }
@media (max-width: 1100px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }

/* ───── Seçim kutularının oku (her yerde aynı) ─────
   Tarayıcının kendi oku kutunun sağ kenarına yapışıyordu. Ok artık bizim: kenardan
   14 px içeride, 16 px, tema renginden bağımsız orta gri (aydınlık ve karanlıkta
   okunur). Bazı bileşenler arka planı kısa yazımla (`background:`) yeniden kurduğu
   için ok özellikleri `!important` — yoksa o kutularda ok silinirdi.
   İstisna: proje görevlerindeki çerçevesiz, dar süzgeç kutusu (`.pt-field`). */
select:not([multiple]):not([size]):not(.pt-field select) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b94a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  padding-right: 40px !important;
}

/* ───── Yönetim → E-posta geçmişi ───── */
.mail-log-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.mail-log-filters > div { flex: 1 1 150px; min-width: 0; }
.mail-log-filters > .mail-log-filters__search { flex: 2 1 260px; }
.mail-log-filters > .mail-log-filters__clear { flex: 0 0 auto; }
.mail-log-filters .form-label { display: block; margin-bottom: 6px; }
.mail-log-filters__search-row { display: flex; gap: 6px; }
.mail-log-filters__search-row .form-input { flex: 1 1 auto; min-width: 0; }
.mail-log-table td { vertical-align: middle; }
.mail-log-table__time strong { display: block; font-weight: 600; white-space: nowrap; }
.mail-log-table__method, .mail-log-table__error, .mail-log-table__time .hint { display: block; margin-top: 3px; font-size: 11.5px; }
.mail-log-table__error { color: light-dark(#b25450, var(--dk-danger-text)); }
.mail-log-table__subject a, .mail-log-table__record { color: var(--primary); font-weight: 600; text-decoration: none; }
.mail-log-table__subject a:hover, .mail-log-table__record:hover { text-decoration: underline; }
.mail-log-table__recipients span { display: block; white-space: nowrap; }
.mail-log-table__subject { min-width: 220px; }
.mail-log-table td:nth-child(5) { min-width: 170px; }
.mail-log-table__open { text-align: right; width: 1%; }
.mail-log-detail { display: flex; flex-direction: column; gap: 16px; }
.mail-log-detail__meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; }
.mail-log-detail__meta dt { color: var(--muted); font-weight: 600; }
.mail-log-detail__meta dd { margin: 0; overflow-wrap: anywhere; }
.mail-log-detail__error { color: light-dark(#b25450, var(--dk-danger-text)); }
.mail-log-detail__frame { width: 100%; height: min(calc(60 * var(--vh)), 640px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mail-log-detail__text { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; white-space: pre-wrap; font-size: 13px; max-height: calc(60 * var(--vh)); overflow: auto; }

/* Görev listesinin açıklama şeridi kartın İÇİNDE: kart kenarına yapışmasın,
   tablodan bir çizgiyle ayrılsın (pano düzenindeki "padding: 0" kuralını ezer). */
.task-workspace-panel .task-table-card > .toolbar-note { margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--line); background: transparent; line-height: 1.5; }
/* Engelli İşler süzgeç satırı: dar ekranda alta kayar (kişi kutusu taşmasın). */
.task-search-row.task-search-row--wrap { flex-wrap: wrap; }
.task-search-row--wrap .task-search-field { flex: 1 1 240px; }
/* Tek başına duran süzgeç çubuğu (Engelli İşler): görev listesindeki gibi bir
   kartın üst parçası değil, kendi kartı — alt boşluk, çerçeve ve yuvarlak köşe. */
.list-toolbar.task-filter-form--card { padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 3px rgba(20, 30, 60, .05); }
/* Sekmeler + süzgeç tek satırda (Görev şablonları): süzgeç sağda, sekme
   çizgisi satırın tamamında. Dar ekranda süzgeç alta iner. */
.tabs-with-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border-bottom: 1px solid var(--border); padding-right: 16px; }
.tabs-with-filter > .tabs { border-bottom: 0; flex: 1 1 auto; }
.tabs-filter { flex: 0 1 260px; margin: 0; padding: 8px 0; }
.tabs-filter .form-input { width: 100%; }
@media (max-width: 640px) { .tabs-with-filter { padding: 0 12px 8px; } .tabs-filter { flex-basis: 100%; } }
/* Proje kartı: başlık ve köşe (durum · arşiv · menü) aynı satırda, akış içinde.
   Eski düzende köşe `absolute`tu ve başlığa sabit sağ boşluk ayrılıyordu —
   iki rozet + menü o boşluğa sığmayınca uzun başlığın üstüne biniyordu. */
.project-card__top { display: flex; align-items: flex-start; gap: 10px; }
.project-workspace .project-card__top .project-card__head { flex: 1 1 auto; min-width: 0; padding-right: 0; }
.project-card__top .project-card__corner { position: static; flex: 0 0 auto; flex-wrap: nowrap; }
.project-card__top .project-card__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* Görevi düzenle (tam sayfa): başlık + sayfayı kaplayan form kartı */
.task-edit-page { display: flex; flex-direction: column; gap: 16px; }
.task-edit-hero__eyebrow { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.task-edit-hero .record-hero__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task-form--page { padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 1px 3px rgba(20, 30, 60, .05); }
/* Etiketin yanındaki açıklama: "(…)" — küçük, soluk, kalın değil */
.field-hint { font-size: 12px; font-weight: 400; color: var(--muted); }
/* Termin satırı ile çakışma uyarısı arasındaki alan (ör. termin gerekçesi) */
.due-conflict-above { margin-top: 14px; }
.due-conflict-above + .due-conflict:not([hidden]) { margin-top: 12px; }
/* Ek termin talebi: sağ sütundaki kart, sayfa üstü kilit uyarısı, termin değişti notu */
.due-ext-card { border-left: 3px solid light-dark(#d97706, var(--dk-warning-text)); }
.due-ext-card__icon { background: light-dark(#fff3ca, var(--dk-warning-soft)); color: light-dark(#996d10, var(--dk-warning-text)); }
.due-ext-banner { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 12px 16px; border: 1px solid light-dark(#f2d48a, var(--dk-line)); border-radius: 14px; background: light-dark(#fff8e6, var(--dk-warning-soft)); color: light-dark(#7a560c, var(--dk-warning-text)); font-weight: 600; font-size: 13.5px; }
.due-change-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: light-dark(var(--hue-f1f5f3), var(--dk-surface-soft)); color: var(--ink); font-size: 13px; }
.due-change-note svg { flex: none; margin-top: 2px; color: var(--muted); }
.due-change-note__why { color: var(--muted); }
.due-ext-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.due-ext-dates__item { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.due-ext-dates__item small { font-size: 11px; font-weight: 600; color: var(--muted); }
.due-ext-dates__item strong { font-size: 15px; color: var(--ink); }
.due-ext-dates__item--new { border-color: light-dark(#f2d48a, var(--dk-line)); background: light-dark(#fff8e6, var(--dk-warning-soft)); }
.due-ext-dates__arrow { display: inline-flex; color: var(--muted); }
.due-ext-dates--compact { margin: 12px 0; gap: 8px; }
.due-ext-dates--compact .due-ext-dates__item { padding: 6px 10px; }
.due-ext-dates--compact .due-ext-dates__item strong { font-size: 13.5px; }
.due-ext-quote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--line); border-radius: 0 10px 10px 0; background: light-dark(var(--hue-f1f5f3), var(--dk-surface-soft)); }
.due-ext-quote small { font-size: 11.5px; color: var(--muted); }
.due-ext-quote p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink); white-space: pre-line; }
.due-ext-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.due-ext-actions .btn { flex: 1 1 0; justify-content: center; }
/* ============================================
   Tema: aydınlık / karanlık
   ============================================
   Seçim `<html data-theme="light|dark">`dır (`theme` controller'ı; tercih
   cihazdadır — `localStorage`, ses anahtarının deseni). Varsayılan aydınlık.

   İki katman:
   1. Anlamsal tokenlar (`--surface`, `--text`, `--line` …) karanlıkta
      yeniden tanımlanır — onları okuyan her şey kendiliğinden döner.
   2. Stil dosyalarındaki sabit renkler `light-dark(<aydınlık>, <karanlık palet tokenı>)`
      ile yazılır: aydınlık değer BİREBİR korunur, karanlık değer bu dosyanın
      paletinden gelir. `light-dark()` elemanın `color-scheme`ine bakar; onu
      aşağıdaki iki kök kuralı belirler.

   Yeni stil yazarken: yüzey/yazı/çizgi için token kullan; sabit renk
   gerekiyorsa `light-dark(...)` ile yaz. Doygun vurgu renkleri (mint düğme,
   tehlike kırmızısı) iki temada da aynıdır.

   Birincil renk iki iş görür: YAZI vurgusu (`--mint-dark` / `--primary`,
   karanlıkta açık mint) ve beyaz yazılı DOLGU (`--primary-fill`, karanlıkta
   koyu kalır ki beyaz yazı okunsun).
   ============================================ */

:root {
  color-scheme: light;
  --primary-fill: var(--mint-dark);

  /* Karanlık palet — `light-dark()`in ikinci değeri bunları okur.
     Zeminler NÖTR GRAFİTtir (çok hafif soğuk); renk yalnız vurgulardadır
     (düğme, seçili menü, bağlantı, bant). Katmanlar: çerçeve dışı < sayfa <
     kart < yumuşak kutu < çizgi — her basamak gözle ayrışacak kadar açılır. */
  --dk-canvas:        #0a0c0e;
  --dk-workspace:     #111417;
  --dk-surface:       #191d21;
  --dk-surface-soft:  #20252a;
  --dk-surface-mint:  #16302a;
  --dk-line:          #2b3137;
  --dk-ink:           #eef1f3;
  --dk-text:          #d5dadd;
  --dk-text-soft:     #b2babf;
  --dk-muted:         #8d969c;
  --dk-muted-soft:    #5d666c;
  --dk-mint-dark:     #6fdcc3;
  --dk-lime-text:     #bddc93;
  --dk-danger-soft:   #3b2221;
  --dk-danger-text:   #f3a29d;
  --dk-warning-soft:  #382e14;
  --dk-warning-text:  #f0cc6c;
  --dk-info-soft:     #1b2739;
  --dk-info-text:     #97b9ec;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --mint-dark:    var(--dk-mint-dark);
  --mint-soft:    color-mix(in srgb, var(--mint) 16%, var(--dk-surface));
  --lime:         color-mix(in srgb, var(--mint) 11%, var(--dk-surface));
  --ink:          var(--dk-ink);
  --text:         var(--dk-text);
  --muted:        var(--dk-muted);
  --line:         var(--dk-line);
  --canvas:       var(--dk-canvas);
  --workspace:    var(--dk-workspace);
  --surface:      var(--dk-surface);
  --surface-soft: var(--dk-surface-soft);
  --shell-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  /* Karanlıkta gölge görünmez: kartları ince açık bir halka ayırır. */
  --shadow:       0 0 0 1px rgba(255, 255, 255, .055);
  --shadow-soft:  0 0 0 1px rgba(255, 255, 255, .06), 0 12px 30px rgba(0, 0, 0, .45);
  /* Başlık bantları: aydınlıktaki gradyanın KOYU hali (parlak bir blok gibi
     durmasın). Kaynak `--mint-text` — tema rengi seçildiyse onun koyu tonu. */
  --hero-from:    color-mix(in srgb, var(--mint-text) 50%, #0a0c0e);
  --hero-to:      color-mix(in srgb, var(--mint-text) 82%, #0a0c0e);
  --hero-deep:    color-mix(in srgb, var(--mint-text) 45%, #0a0c0e);
  --hero-mid:     color-mix(in srgb, var(--mint-text) 70%, #0a0c0e);
  --hero-bright:  color-mix(in srgb, var(--mint) 42%, #0a0c0e);
  --primary-fill: #1c8a72;
  --info:         var(--dk-info-text);

  /* Todo / not paleti: vurgu aynı, yumuşak zemin koyu yüzeyin tonu. */
  --todo-blue-soft:   color-mix(in srgb, var(--todo-blue) 22%, var(--dk-surface));
  --todo-green-soft:  color-mix(in srgb, var(--todo-green) 22%, var(--dk-surface));
  --todo-amber-soft:  color-mix(in srgb, var(--todo-amber) 22%, var(--dk-surface));
  --todo-rose-soft:   color-mix(in srgb, var(--todo-rose) 22%, var(--dk-surface));
  --todo-violet-soft: color-mix(in srgb, var(--todo-violet) 22%, var(--dk-surface));
  --todo-teal-soft:   color-mix(in srgb, var(--todo-teal) 22%, var(--dk-surface));
  --todo-orange-soft: color-mix(in srgb, var(--todo-orange) 22%, var(--dk-surface));
  --todo-pink-soft:   color-mix(in srgb, var(--todo-pink) 22%, var(--dk-surface));
  --todo-slate-soft:  color-mix(in srgb, var(--todo-slate) 22%, var(--dk-surface));
}

/* ─── Tailwind yardımcıları ───────────────────────────────────────────────
   Eski ekranlar (ayarlar, yönetim formları, giriş) Tailwind renk sınıfları
   taşır; karanlıkta aynı sınıflar paletin karşılığına döner. */
:root[data-theme="dark"] .bg-white { background-color: var(--surface); }
:root[data-theme="dark"] .bg-gray-50,
:root[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--dk-surface-soft); }
:root[data-theme="dark"] .bg-gray-100,
:root[data-theme="dark"] .bg-gray-200 { background-color: var(--dk-line); }
:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800 { color: var(--dk-ink); }
:root[data-theme="dark"] .text-gray-700,
:root[data-theme="dark"] .text-gray-600 { color: var(--dk-text-soft); }
:root[data-theme="dark"] .text-gray-500,
:root[data-theme="dark"] .text-gray-400 { color: var(--dk-muted); }
:root[data-theme="dark"] .text-gray-300 { color: var(--dk-muted-soft); }
:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-300 { border-color: var(--dk-line); }
:root[data-theme="dark"] .divide-gray-100 > * { border-color: var(--dk-line); }

:root[data-theme="dark"] .bg-red-50 { background-color: var(--dk-danger-soft); }
:root[data-theme="dark"] .border-red-200 { border-color: color-mix(in srgb, var(--dk-danger-text) 30%, transparent); }
:root[data-theme="dark"] .text-red-800,
:root[data-theme="dark"] .text-red-700,
:root[data-theme="dark"] .text-red-600 { color: var(--dk-danger-text); }

:root[data-theme="dark"] .bg-amber-50 { background-color: var(--dk-warning-soft); }
:root[data-theme="dark"] .border-amber-200,
:root[data-theme="dark"] .border-amber-300 { border-color: color-mix(in srgb, var(--dk-warning-text) 30%, transparent); }
:root[data-theme="dark"] .text-amber-900,
:root[data-theme="dark"] .text-amber-800,
:root[data-theme="dark"] .text-amber-700 { color: var(--dk-warning-text); }

:root[data-theme="dark"] .bg-green-50 { background-color: var(--dk-surface-mint); }
:root[data-theme="dark"] .border-green-200 { border-color: color-mix(in srgb, var(--dk-mint-dark) 30%, transparent); }
:root[data-theme="dark"] .text-green-800,
:root[data-theme="dark"] .text-green-700 { color: var(--dk-mint-dark); }

:root[data-theme="dark"] .bg-blue-50 { background-color: var(--dk-info-soft); }
:root[data-theme="dark"] .text-blue-700,
:root[data-theme="dark"] .text-blue-600,
:root[data-theme="dark"] .text-blue-500 { color: var(--dk-info-text); }
/* Rozet renkleri (rol kapsamı, kişi etiketi …): açık zemin → vurgunun koyu
   tonu, koyu yazı → aynı rengin açığı. */
:root[data-theme="dark"] .bg-purple-50,
:root[data-theme="dark"] .bg-purple-100 { background-color: color-mix(in srgb, #8565b3 25%, var(--dk-surface)); }
:root[data-theme="dark"] .text-purple-700 { color: #c7b1ea; }
:root[data-theme="dark"] .bg-indigo-50 { background-color: color-mix(in srgb, #6366f1 22%, var(--dk-surface)); }
:root[data-theme="dark"] .text-indigo-700 { color: #b4b8fb; }
:root[data-theme="dark"] .bg-teal-50 { background-color: color-mix(in srgb, #14b8a6 20%, var(--dk-surface)); }
:root[data-theme="dark"] .text-teal-700 { color: #7ee0d2; }
:root[data-theme="dark"] .bg-rose-50 { background-color: color-mix(in srgb, #f43f5e 20%, var(--dk-surface)); }
:root[data-theme="dark"] .text-rose-700 { color: #f9a8b8; }
:root[data-theme="dark"] .bg-slate-50 { background-color: var(--dk-surface-soft); }
:root[data-theme="dark"] .text-slate-700 { color: var(--dk-text-soft); }
:root[data-theme="dark"] .bg-amber-100,
:root[data-theme="dark"] .bg-amber-200 { background-color: color-mix(in srgb, #f59e0b 25%, var(--dk-surface)); }
:root[data-theme="dark"] .bg-gray-900 { background-color: var(--dk-surface-soft); }

/* ─── Karanlıkta ayrıca ele alınanlar ─────────────────────────────────── */
/* Trix düzenleyicisi ve araç çubuğu (Action Text'in kendi temeli). */
:root[data-theme="dark"] trix-editor { background: var(--dk-surface-soft); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] trix-toolbar .trix-button-group { background: var(--dk-surface-soft); border-color: var(--line); }
:root[data-theme="dark"] trix-toolbar .trix-button { border-color: var(--line); }
:root[data-theme="dark"] trix-toolbar .trix-button--icon::before { filter: invert(1) opacity(.75); }
:root[data-theme="dark"] trix-toolbar .trix-button.trix-active { background: var(--mint-soft); }

/* Kurum logosu çoğunlukla koyu yazılıdır; karanlık zeminde okunur kalsın. */
:root[data-theme="dark"] .sidebar-brand-logo { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }

/* ─── Tema anahtarı (üst bar) ─────────────────────────────────────────── */
/* Aydınlıkta ay (karanlığa geç), karanlıkta güneş (aydınlığa dön). */
.theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }

/* Kartlar: gölgeyi `--shadow` tokenından almayanlar da aynı halkayı alsın. */
:root[data-theme="dark"] :is(.th-card, .tm-card, .todo-rail, .channel-workspace, .kanban-column) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .055);
}
/* Bantların içindeki kutular/sekmeler koyu bantta hafif belirgin kalsın. */
:root[data-theme="dark"] :is(.page-hero, .task-workspace-header, .record-hero, .th-welcome) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
/* Beyaz zeminli logolar koyu menüde köşeli beyaz blok gibi durmasın. */
:root[data-theme="dark"] .sidebar-brand--logo .sidebar-brand-logo { border-radius: 10px; }

/* Seçili menü satırı: karanlıkta parlak dolgu yerine vurgunun yumuşak zemini
   + açık vurgu yazısı + ince halka (göz yormasın, yine belirgin kalsın). */
:root[data-theme="dark"] .nav-item.active {
  color: var(--mint-dark);
  background: color-mix(in srgb, var(--mint) 18%, var(--dk-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 35%, transparent);
}
:root[data-theme="dark"] .nav-item.active .nav-badge,
:root[data-theme="dark"] .nav-item.active .sidebar-nav-count { color: var(--dk-surface); background: var(--mint-dark); }

/* Kabuğun dış çerçevesi aydınlıkta yarı saydam beyaz; karanlıkta sönük. */
:root[data-theme="dark"] .app-shell { border-color: rgba(255, 255, 255, .05); }
/*
 * Stil manifestosu — yükleme sırası AÇIKTIR (TeamHub tasarım geçişi).
 *
 * Eskiden `require_tree .` vardı ve layout `components`i AYRICA bağlıyordu:
 * aynı dosya iki kez yükleniyordu, sıra da dosya adının alfabesine kalmıştı.
 * Şimdi tek bağlantı (`application`) ve sabit sıra:
 *
 *   1. actiontext  — Trix'in kendi temeli
 *   2. components  — tasarım tokenları + ortak bileşenler (.btn, .panel, …)
 *   3. shell       — uygulama kabuğu: dış çerçeve, sol menü, üst bar
 *   4. dashboard   — TeamHub paneli (yalnız `.th-dash` altında)
 *   5. pages       — modül ekranlarının TeamHub yüzü (görev, not, proje …)
 *   6. theme       — aydınlık / karanlık tema (tokenların karanlık karşılığı)
 *
 * Yeni stil dosyası eklenirse buraya da yazılmalı; `require_tree` geri
 * getirilmez (sıra yeniden alfabeye kalır).
 *







 */