/* =============================================
   Forum TipTap Editor Styles
   Hem editörde (.ProseMirror) hem konu görünümünde (.tt-render) geçerli
   ============================================= */

/* ---- Editor wrapper ---- */
.tt-wrap {
  border: 1.5px solid var(--color-border2);
  border-radius: var(--radius-base);
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  position: relative;
  min-width: 0;
}

/* ---- Toolbar rows ---- */
.tt-toolbar-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 5px 8px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  border-radius: var(--radius-base) var(--radius-base) 0 0;
}
.tt-toolbar-inline {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Slim single-row toolbar (reply, signature, PM) */
.tt-toolbar-slim {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  border-radius: var(--radius-base) var(--radius-base) 0 0;
}
.tt-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.tt-sep {
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, transparent, var(--color-border2), transparent);
  margin: 0 5px;
  flex-shrink: 0;
}

/* ---- Toolbar Buttons ---- */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 7px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  transition: background .12s, color .12s;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.tt-btn:hover:not(:disabled) {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
}
.tt-btn.is-active {
  background: var(--orange-light);
  color: var(--orange);
}
.tt-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.tt-btn svg {
  width: 17px;
  height: 17px;
  pointer-events: none;
  flex-shrink: 0;
}

/* ---- Inline selects ---- */
.tt-sel-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tt-sel-wrap svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.tt-sel {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0 22px 0 7px;
  height: 26px;
  font-size: 11.5px;
  background-color: var(--color-bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 72px;
}
.tt-sel:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background-color: var(--color-bg-secondary);
}

/* ---- Editor content area ---- */
.tt-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: none;
  background: var(--color-bg-card);
  border-radius: 0 0 var(--radius-base) var(--radius-base);
  border-top: 1px solid rgba(0,0,0,0.02);
}
.tt-content.is-scrollable {
  overflow-y: auto;
}
.tt-editor-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   İÇERİK STİLLERİ: :where() ile hem .ProseMirror hem .tt-render
   (:where sıfır özgüllük → diğer kurallar kolayca override edebilir)
   ============================================================ */

/* Editor: min-height, padding, outline (sadece editörde) */
.ProseMirror {
  min-height: 220px;
  padding: 18px 20px 20px;
  outline: none;
  caret-color: var(--orange);
  width: 100%;
  box-sizing: border-box;
}
/* Render: padding yok */
.tt-render { padding: 0; }

/* ORTAK: tipografi */
:where(.ProseMirror, .tt-render) {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-primary);
  word-break: break-word;
}
:where(.ProseMirror, .tt-render) > * + * { margin-top: 6px; }
:where(.ProseMirror, .tt-render) p  { margin: 0; }
:where(.ProseMirror, .tt-render) h1 { font-size: 1.75em; font-weight: 800; margin: 12px 0 6px; }
:where(.ProseMirror, .tt-render) h2 { font-size: 1.4em;  font-weight: 700; margin: 10px 0 6px; }
:where(.ProseMirror, .tt-render) h3 { font-size: 1.2em;  font-weight: 700; margin: 8px 0 4px; }
:where(.ProseMirror, .tt-render) ul,
:where(.ProseMirror, .tt-render) ol { padding-left: 22px; }
:where(.ProseMirror, .tt-render) li > p { margin: 0; }

/* Alıntı */
:where(.ProseMirror, .tt-render) blockquote {
  border-left: 3px solid var(--orange);
  padding: 6px 12px;
  color: var(--color-text-secondary);
  margin: 8px 0;
  background: var(--color-bg-secondary);
  border-radius: 0 4px 4px 0;
}

/* Kod bloğu */
:where(.ProseMirror, .tt-render) pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 6px;
  padding: 12px 16px;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 13px;
  overflow-x: auto;
  margin: 8px 0;
}
:where(.ProseMirror, .tt-render) code {
  background: rgba(0,0,0,.12);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 13px;
}
:where(.ProseMirror, .tt-render) pre code { background: none; padding: 0; }

/* Linkler */
:where(.ProseMirror, .tt-render) a {
  color: var(--orange);
  text-decoration: underline;
}
:where(.ProseMirror, .tt-render) a:hover { opacity: .8; }

/* Görseller */
:where(.ProseMirror, .tt-render) img {
  max-width: 100%;
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
  height: auto;
}

.tt-media-node {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border-radius: 8px;
}
.tt-media-node[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
}
.tt-media-node[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
}
.tt-media-node[data-align="left"] {
  margin-left: 0;
  margin-right: auto;
}
.tt-image-node {
  width: fit-content;
  display: inline-flex;
  vertical-align: top;
  max-width: 100%;
}
.tt-image-link {
  display: inline-block;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  vertical-align: top;
}

.tt-image-node .tt-image-link {
  display: block;
}
.tt-image-node .tt-image-el {
  display: block;
  max-width: min(100%, 100vw - 96px);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.tt-youtube-node {
  width: min(100%, 560px);
  margin: 12px 0;
}
.tt-youtube-node iframe {
  display: block;
  width: min(100%, 560px);
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  background: #000;
}
.tt-media-node::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border-color .14s ease, box-shadow .14s ease;
  pointer-events: none;
}
.tt-media-node.is-selected::after,
.tt-media-node.is-range-selected::after,
.ProseMirror.tt-selection-all .tt-media-node::after,
.tt-wrap.tt-selection-all .tt-media-node::after {
  border-color: rgba(232, 102, 10, .9);
  box-shadow: 0 0 0 4px rgba(232, 102, 10, .14);
}
.tt-image-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--orange);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
.tt-image-node.is-selected .tt-image-resize-handle,
.ProseMirror.tt-selection-all .tt-image-node .tt-image-resize-handle,
.tt-wrap.tt-selection-all .tt-image-node .tt-image-resize-handle {
  opacity: 1;
  pointer-events: auto;
}
.tt-image-resize-handle.nw,
.tt-image-resize-handle.sw {
  left: -6px;
}
.tt-image-resize-handle.ne,
.tt-image-resize-handle.se {
  right: -6px;
}
.tt-image-resize-handle.nw,
.tt-image-resize-handle.ne {
  top: -6px;
}
.tt-image-resize-handle.sw,
.tt-image-resize-handle.se {
  bottom: -6px;
}
.tt-image-resize-handle.nw,
.tt-image-resize-handle.se {
  cursor: nwse-resize;
}
.tt-image-resize-handle.ne,
.tt-image-resize-handle.sw {
  cursor: nesw-resize;
}

:where(.ProseMirror, .tt-render) img[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
}
:where(.ProseMirror, .tt-render) img[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
}
:where(.ProseMirror, .tt-render) img[data-align="left"] {
  margin-left: 0;
  margin-right: auto;
}

.tt-render::after {
  content: '';
  display: block;
  clear: both;
}

.ProseMirror::after {
  content: '';
  display: block;
  clear: both;
}

.ProseMirror .tt-media-node[data-align="left"] {
  float: left;
  margin: 4px 14px 10px 0;
}

.ProseMirror .tt-media-node[data-align="right"] {
  float: right;
  margin: 4px 0 10px 14px;
}

.ProseMirror .tt-media-node[data-align="center"] {
  float: none;
  display: table;
  margin: 8px auto;
}

.ProseMirror .tt-image-node:not([data-align]) {
  float: none;
  display: inline-flex;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

.tt-render .tt-media-node[data-align="left"] {
  float: left;
  margin: 4px 14px 10px 0;
}

.tt-render .tt-media-node[data-align="right"] {
  float: right;
  margin: 4px 0 10px 14px;
}

.tt-render img[data-align="left"] {
  float: left;
  margin: 4px 14px 10px 0;
}

.tt-render img[data-align="right"] {
  float: right;
  margin: 4px 0 10px 14px;
}

.tt-render img:not([data-align]) {
  margin: 0;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .ProseMirror .tt-media-node[data-align="left"],
  .ProseMirror .tt-media-node[data-align="right"],
  .ProseMirror .tt-media-node[data-align="center"],
  .tt-render .tt-media-node[data-align="left"],
  .tt-render .tt-media-node[data-align="right"],
  .tt-render img[data-align="left"],
  .tt-render img[data-align="right"] {
    float: none;
    display: block;
    margin: 8px 0;
  }

  .ProseMirror .tt-image-node:not([data-align]),
  .tt-render img:not([data-align]) {
    display: inline-flex;
    margin: 0 6px 0 0;
  }
}
/* HR */
:where(.ProseMirror, .tt-render) hr {
  border: none;
  border-top: 1.5px solid var(--color-border);
  margin: 12px 0;
}

/* Spoiler — <details class="tt-spoiler"> */
:where(.ProseMirror, .tt-render) details.tt-spoiler {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--orange);
  border-radius: 0 6px 6px 0;
  padding: 0;
  margin: 8px 0;
  overflow: hidden;
}
:where(.ProseMirror, .tt-render) details.tt-spoiler > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--orange);
  user-select: none;
  list-style: none;
  -webkit-details-marker: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(232, 102, 10, .06);
}
:where(.ProseMirror, .tt-render) details.tt-spoiler > summary::-webkit-details-marker {
  display: none;
}
:where(.ProseMirror, .tt-render) details.tt-spoiler > summary::marker {
  content: '';
}
:where(.ProseMirror, .tt-render) details.tt-spoiler > summary::before {
  content: '▶';
  font-size: 10px;
  transition: transform .15s ease;
}
:where(.ProseMirror, .tt-render) details.tt-spoiler[open] > summary::before {
  transform: rotate(90deg);
}
:where(.ProseMirror, .tt-render) details.tt-spoiler > div,
:where(.ProseMirror, .tt-render) details.tt-spoiler > p {
  margin-top: 0;
  padding: 10px 14px 14px;
}
:where(.ProseMirror, .tt-render) details.tt-spoiler:not([open]) > :not(summary) {
  display: none;
}

/* Tablo */
:where(.ProseMirror, .tt-render) .tableWrapper { overflow-x: auto; }
:where(.ProseMirror, .tt-render) table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 8px 0;
  overflow: hidden;
}
:where(.ProseMirror, .tt-render) th,
:where(.ProseMirror, .tt-render) td {
  border: 1px solid var(--color-border);
  padding: 7px 10px;
  vertical-align: top;
  min-width: 60px;
  position: relative;
  box-sizing: border-box;
}
:where(.ProseMirror, .tt-render) th {
  background: var(--color-bg-secondary);
  font-weight: 700;
  text-align: left;
}
.ProseMirror .selectedCell::after {
  z-index: 2;
  position: absolute;
  content: '';
  inset: 0;
  background: rgba(232,102,10,.1);
  pointer-events: none;
}

/* YouTube */
:where(.ProseMirror, .tt-render) div[data-youtube-video] { margin: 8px 0; }
:where(.ProseMirror, .tt-render) div[data-youtube-video] iframe {
  border-radius: 6px;
  display: block;
  max-width: 100%;
  width: min(100%, 560px);
  aspect-ratio: 16 / 9;
}
:where(.ProseMirror, .tt-render) div[data-youtube-video][data-align="center"] {
  text-align: center;
}
:where(.ProseMirror, .tt-render) div[data-youtube-video][data-align="center"] iframe {
  margin-left: auto;
  margin-right: auto;
}
:where(.ProseMirror, .tt-render) div[data-youtube-video][data-align="right"] {
  text-align: right;
}
:where(.ProseMirror, .tt-render) div[data-youtube-video][data-align="right"] iframe {
  margin-left: auto;
  margin-right: 0;
}
:where(.ProseMirror, .tt-render) div[data-youtube-video][data-align="left"] {
  text-align: left;
}
:where(.ProseMirror, .tt-render) div[data-youtube-video][data-align="left"] iframe {
  margin-left: 0;
  margin-right: auto;
}

/* Placeholder */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  pointer-events: none;
  float: left;
  height: 0;
}

/* ---- Link popup ---- */
.tt-link-popup {
  position: absolute;
  z-index: 600;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border2);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  width: 300px;
  display: none;
}
.tt-link-popup.show { display: block; }
.tt-link-popup .tt-link-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.tt-link-popup input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 13px;
  outline: none;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  box-sizing: border-box;
}
.tt-link-popup input:focus { border-color: var(--orange); }
.tt-link-popup .tt-link-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tt-link-popup .tt-link-actions button {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  transition: background .12s;
}
.tt-link-popup .tt-link-actions button:hover { background: var(--color-bg-card); }
.tt-link-popup .tt-link-actions button.tt-link-ok {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* ---- Color picker ---- */
.tt-cpicker {
  position: absolute;
  z-index: 600;
  width: 220px;
  padding: 10px;
  background: color-mix(in srgb, var(--color-bg-card) 92%, #ffffff 8%);
  border: 1px solid color-mix(in srgb, var(--color-border2) 70%, var(--orange) 30%);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
}
.tt-cpicker-title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tt-cpicker-body {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tt-cpicker-native {
  flex: 1;
  height: 42px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.tt-cpicker-native::-webkit-color-swatch-wrapper { padding: 4px; }
.tt-cpicker-native::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}
.tt-cpicker-native::-moz-color-swatch {
  border: none;
  border-radius: 8px;
}
.tt-cpicker-sample {
  width: 36px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.tt-cpicker-reset {
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.tt-cpicker-reset:hover {
  transform: translateY(-1px);
}
.tt-cpicker-reset {
  width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
}

/* ---- Mention popup ---- */
.tt-mention-popup {
  position: absolute;
  z-index: 650;
  min-width: 240px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.tt-mention-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.tt-mention-item + .tt-mention-item {
  border-top: 1px solid var(--color-border);
}
.tt-mention-item:hover,
.tt-mention-item.is-active {
  background: var(--orange-light);
}
.tt-mention-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
}
.tt-mention-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-mention-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tt-mention-meta strong {
  font-size: 13px;
  color: var(--color-text-primary);
}
.tt-mention-empty {
  padding: 11px 12px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.tt-mention-empty.is-error {
  color: var(--color-danger);
}
.tt-link-popup .tt-link-actions button.tt-link-ok:hover { opacity: .9; }

/* ---- Color picker ---- */
.tt-cpicker {
  position: absolute;
  z-index: 600;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border2);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 170px;
}