/* ==========================================================================
   HIZIRBEY DESIGN SYSTEM - TEXT EDITOR

   Proje: HIZIRBEY Portal
   Paket: HIZIRBEY Design System
   Bileşen: TextEditor
   Dosya: themes/default/assets/css/hds/components/text-editor/base.css
   Açıklama: TextEditor görünümü: kompakt ikonlu toolbar (HDS Button),
   grup ayrımları, heading menüsü ve link paneli (HDS Dropdown), editable
   alan, placeholder, focus / hover / active / disabled durumları ve
   semantik blok aralıkları. Değerler HDS form kontrolleriyle
   (form/controls.css) aynı görsel dili izler ve --hds-text-editor-*
   değişkenleriyle override edilir. İçerik alanı ayrıca .hds-content
   taşır (hds/content/base.css). Gerekli: button/base.css,
   dropdown/base.css, form/controls.css (link paneli input'u).
   Yazar: Mehmet Kalli
   Oluşturuldu: 06.10.2026
   Güncellendi: 07.10.2026 -- Paket 4: editable alan, durumlar, blok aralıkları.
   Güncellendi: 07.10.2026 -- Paket 5A: ikonlu toolbar, menü/panel, placeholder.
   Güncellendi: 07.10.2026 -- Paket 5B: emoji seçici paneli.
   Güncellendi: 07.10.2026 -- Paket 5C: görsel paneli ve görsel bloğu.
   Güncellendi: 26.10.2026 -- inline varyantı (yerinde düzenleme; toolbar odakta yüzer).
   Sürüm: 1.5.0

   Contract:
   Root:     .hds-text-editor(.is-variant-*, .is-preset-*, .is-ready, .is-empty)
   Parts:    __toolbar, __group, __tool(.is-active, [aria-pressed], --menu, --link, --panel),
             __emoji-dropdown, __emoji-panel, __emoji-group, __emoji-label, __emoji-grid, __emoji,
             __image-dropdown, __image-panel(.is-uploading), __image-current, __image-alt,
             __image-status, __image-error, __image-actions, __image(.is-selected),
             __menu, __link-dropdown, __link-panel, __link-label, __link-input,
             __link-error, __link-actions, __callout-dropdown, __callout-panel, __content, __opaque
========================================================================== */

.hds-text-editor {
  --hds-text-editor-border: #bfcbd2;
  --hds-text-editor-divider: #dce4ea;
  --hds-text-editor-focus: #83b8c7;
  --hds-text-editor-focus-ring: rgb(131 184 199 / 18%);
  --hds-text-editor-surface: #fff;
  --hds-text-editor-toolbar-surface: #f8fafc;
  --hds-text-editor-ink: #263b4a;
  --hds-text-editor-muted: #87949d;
  --hds-text-editor-hover: #eef3f6;
  --hds-text-editor-active: #e3eff3;
  --hds-text-editor-active-ink: var(--button-primary-background, #073343);
  --hds-text-editor-danger: var(--button-danger-background, #dc3545);
  --hds-text-editor-radius: 4px;
  --hds-text-editor-tool-size: 1.875rem;
  --hds-text-editor-min-height: 8rem;

  display: grid;
  max-width: 100%;
  border: 1px solid var(--hds-text-editor-border);
  border-radius: var(--hds-text-editor-radius);
  background: var(--hds-text-editor-surface);
  color: var(--hds-text-editor-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hds-text-editor:focus-within {
  border-color: var(--hds-text-editor-focus);
  box-shadow: 0 0 0 3px var(--hds-text-editor-focus-ring);
}

/* Compact varyant: kısa alanlar (cevap seçeneği vb.). Yalnız token ve
   aralık küçülür; toolbar/panel davranışı varsayılanla aynıdır. */
.hds-text-editor.is-variant-compact {
  --hds-text-editor-tool-size: 1.625rem;
  --hds-text-editor-min-height: 2.5rem;
}

.hds-text-editor.is-variant-compact .hds-text-editor__toolbar {
  gap: 0.125rem;
  padding: 0.125rem 0.25rem;
}

.hds-text-editor.is-variant-compact .hds-text-editor__group + .hds-text-editor__group {
  margin-left: 0.0625rem;
  padding-left: 0.25rem;
}

.hds-text-editor.is-variant-compact .hds-text-editor__tool svg {
  width: 0.875rem;
  height: 0.875rem;
}

.hds-text-editor.is-variant-compact .hds-text-editor__content {
  padding: 0.5rem 0.625rem;
}

.hds-text-editor.is-variant-compact .hds-text-editor__content > :first-child {
  margin-top: 0;
}

.hds-text-editor.is-variant-compact .hds-text-editor__content > :last-child {
  margin-bottom: 0;
}

/* Inline varyant (26.10.2026): yerinde düzenleme. Çerçeve ve zemin yok; yazı biçimi
   (boyut, kalınlık, renk, hiza) bulunduğu yerden gelir; araç çubuğu yalnız odakta
   alanın üstünde yüzer. Kanca: --hds-text-editor-inline-outline (üzerine gelince). */
.hds-text-editor.is-variant-inline {
  --hds-text-editor-min-height: 1.5em;
  --hds-text-editor-tool-size: 1.625rem;

  position: relative;
  border: 1px dashed transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
}

.hds-text-editor.is-variant-inline:hover {
  border-color: var(--hds-text-editor-inline-outline, rgb(127 140 150 / 45%));
}

.hds-text-editor.is-variant-inline .hds-text-editor__toolbar {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 20;
  display: none;
  gap: 0.125rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid var(--hds-text-editor-border);
  border-radius: var(--hds-text-editor-radius);
  box-shadow: 0 6px 18px rgb(15 23 42 / 18%);
  color: var(--hds-text-editor-ink);
  text-align: left;
}

.hds-text-editor.is-variant-inline:focus-within .hds-text-editor__toolbar {
  display: flex;
}

.hds-text-editor.is-variant-inline .hds-text-editor__tool svg {
  width: 0.875rem;
  height: 0.875rem;
}

.hds-text-editor.is-variant-inline .hds-text-editor__content {
  padding: 0.125em 0.25em;
  line-height: inherit;
}

.hds-text-editor.is-variant-inline .hds-text-editor__content > :first-child { margin-top: 0; }
.hds-text-editor.is-variant-inline .hds-text-editor__content > :last-child { margin-bottom: 0; }

.hds-text-editor.is-variant-inline.is-empty .hds-text-editor__content::before {
  top: 0.125em;
  right: 0.25em;
  left: 0.25em;
  color: inherit;
  opacity: 0.5;
}

/* --- Toolbar ------------------------------------------------------------- */

.hds-text-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.375rem;
  border-bottom: 1px solid var(--hds-text-editor-divider);
  border-radius: var(--hds-text-editor-radius) var(--hds-text-editor-radius) 0 0;
  background: var(--hds-text-editor-toolbar-surface);
}

.hds-text-editor__toolbar:empty {
  display: none;
}

.hds-text-editor__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
}

.hds-text-editor__group + .hds-text-editor__group {
  margin-left: 0.125rem;
  padding-left: 0.375rem;
  border-left: 1px solid var(--hds-text-editor-divider);
}

/* HDS Button üzerine kompakt toolbar ölçüsü. */
.hds-text-editor .hds-text-editor__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: var(--hds-text-editor-tool-size);
  height: var(--hds-text-editor-tool-size);
  min-height: 0;
  padding: 0 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--hds-text-editor-radius);
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hds-text-editor .hds-text-editor__tool .hds-button__icon {
  display: inline-flex;
}

.hds-text-editor .hds-text-editor__tool svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hds-text-editor .hds-text-editor__tool:hover:not(:disabled) {
  background: var(--hds-text-editor-hover);
  border-color: var(--hds-text-editor-divider);
}

.hds-text-editor .hds-text-editor__tool:focus-visible {
  outline: 2px solid var(--hds-text-editor-focus);
  outline-offset: 1px;
}

.hds-text-editor .hds-text-editor__tool.is-active,
.hds-text-editor .hds-text-editor__tool[aria-pressed="true"] {
  border-color: var(--hds-text-editor-focus);
  background: var(--hds-text-editor-active);
  color: var(--hds-text-editor-active-ink);
}

.hds-text-editor .hds-text-editor__tool:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--hds-text-editor-muted);
  cursor: default;
  opacity: 0.55;
}

/* Heading tetikleyicisi: ikon + aktif seviye etiketi (+ Dropdown oku). */
.hds-text-editor .hds-text-editor__tool--menu {
  min-width: 7.25rem;
  justify-content: flex-start;
}

.hds-text-editor .hds-text-editor__tool--menu .hds-button__text {
  flex: 1 1 auto;
  text-align: left;
}

.hds-text-editor .hds-text-editor__tool--menu::after {
  margin-inline-start: 0.25rem;
}

/* Panel tetikleyicileri (link, emoji) menü oku taşımaz. */
.hds-text-editor .hds-text-editor__tool--panel::after {
  display: none;
}

.hds-text-editor__menu .hds-dropdown__item.is-active {
  color: var(--hds-text-editor-active-ink);
  font-weight: 600;
}

/* --- Paneller: [hidden] HDS Button'ın display kuralını ezer --------------- */

.hds-text-editor__link-panel [hidden],
.hds-text-editor__callout-panel [hidden],
.hds-text-editor__image-panel [hidden] {
  display: none !important;
}

/* --- Link paneli ----------------------------------------------------------- */

.hds-text-editor__link-dropdown,
.hds-text-editor__callout-dropdown {
  width: min(20rem, calc(100vw - 2rem));
}

.hds-text-editor__link-panel,
.hds-text-editor__callout-panel {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
}

.hds-text-editor__link-label,
.hds-text-editor__callout-label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.hds-text-editor__link-input[aria-invalid="true"],
.hds-text-editor__callout-input[aria-invalid="true"] {
  border-color: var(--hds-text-editor-danger);
}

.hds-text-editor__link-error,
.hds-text-editor__callout-error {
  margin: 0;
  color: var(--hds-text-editor-danger);
  font-size: 0.75rem;
  line-height: 1.4;
}

.hds-text-editor__link-actions,
.hds-text-editor__callout-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

/* --- Emoji paneli ---------------------------------------------------------- */

.hds-text-editor__emoji-dropdown {
  width: max-content;
  max-width: calc(100vw - 2rem);
}

.hds-text-editor__emoji-panel {
  --hds-text-editor-emoji-columns: 8;

  display: grid;
  gap: 0.5rem;
  max-height: 16rem;
  padding: 0.5rem;
  overflow-y: auto;
}

.hds-text-editor__emoji-label {
  margin: 0 0 0.25rem 0.125rem;
  color: var(--hds-text-editor-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hds-text-editor__emoji-grid {
  display: grid;
  grid-template-columns: repeat(var(--hds-text-editor-emoji-columns), 2rem);
  gap: 0.125rem;
}

.hds-text-editor__emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--hds-text-editor-radius);
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.hds-text-editor__emoji:hover {
  background: var(--hds-text-editor-hover);
  border-color: var(--hds-text-editor-divider);
}

.hds-text-editor__emoji:focus-visible {
  outline: 2px solid var(--hds-text-editor-focus);
  outline-offset: 0;
}

/* --- Görsel paneli ---------------------------------------------------------- */

.hds-text-editor__image-dropdown {
  width: min(22rem, calc(100vw - 2rem));
}

.hds-text-editor__image-panel {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
}

.hds-text-editor__image-panel.is-uploading .hds-text-editor__image-manager {
  opacity: 0.6;
  pointer-events: none;
}

.hds-text-editor__image-current {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--hds-text-editor-muted);
}

.hds-text-editor__image-current[hidden] {
  display: none;
}

.hds-text-editor__image-current-preview {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  border: 1px solid var(--hds-text-editor-divider);
  border-radius: var(--hds-text-editor-radius);
  background: var(--hds-text-editor-toolbar-surface);
}

.hds-text-editor__image-label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.hds-text-editor__image-status,
.hds-text-editor__image-error {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
}

.hds-text-editor__image-status {
  color: var(--hds-text-editor-muted);
}

.hds-text-editor__image-error {
  color: var(--hds-text-editor-danger);
}

.hds-text-editor__image-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

/* --- Content ------------------------------------------------------------- */

.hds-text-editor__content {
  position: relative;
  min-height: var(--hds-text-editor-min-height);
  padding: 0.75rem;
  line-height: 1.5;
  outline: 0;
  cursor: text;
}

/* Placeholder: yalnız görsel (pseudo-element); DOM'a/Document'a girmez. */
.hds-text-editor.is-empty .hds-text-editor__content::before {
  content: attr(data-hds-text-editor-placeholder);
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: 0.75rem;
  color: var(--hds-text-editor-muted);
  pointer-events: none;
  user-select: none;
}

.hds-text-editor__content > * + *,
.hds-text-editor__content blockquote > * + *,
.hds-text-editor__content aside > * + * {
  margin-top: 0.75em;
}

.hds-text-editor__content p,
.hds-text-editor__content h1,
.hds-text-editor__content h2,
.hds-text-editor__content h3,
.hds-text-editor__content h4,
.hds-text-editor__content h5,
.hds-text-editor__content h6,
.hds-text-editor__content ul,
.hds-text-editor__content ol,
.hds-text-editor__content blockquote,
.hds-text-editor__content aside,
.hds-text-editor__content pre {
  margin-bottom: 0;
}

.hds-text-editor__content ul,
.hds-text-editor__content ol {
  padding-left: 1.5em;
}

.hds-text-editor__content blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.75em;
  border-left: 3px solid var(--hds-text-editor-border);
}

/* Vurgu kutusu: görünüm Content CSS'indedir (hds-content-callout); burada yalnız
   kaynak satırı (data-source, salt-okunur) çizilir. */
.hds-text-editor__content aside[data-hds-text-editor-callout][data-source]::after {
  content: "— " attr(data-source);
  display: block;
  margin-top: 0.5em;
  font-size: 0.875em;
  color: var(--hds-text-editor-muted);
  user-select: none;
}

.hds-text-editor:not(.is-ready) .hds-text-editor__content {
  cursor: default;
}

/* --- Görsel (canonical image node; blok) ---------------------------------- */

.hds-text-editor__content .hds-text-editor__image {
  width: fit-content;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--hds-text-editor-radius);
  cursor: default;
}

.hds-text-editor__content .hds-text-editor__image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--hds-text-editor-radius);
}

.hds-text-editor__content .hds-text-editor__image.is-selected {
  outline: 2px solid var(--hds-text-editor-focus);
  outline-offset: 2px;
}

/* --- Opaque (editörde düzenlenemeyen, kayıpsız korunan içerik) ------------ */

.hds-text-editor__opaque {
  padding: 0.25rem 0.5rem;
  border: 1px dashed var(--hds-text-editor-border);
  border-radius: var(--hds-text-editor-radius);
  color: var(--hds-text-editor-muted);
  cursor: default;
  user-select: none;
}

.hds-text-editor__opaque > :first-child {
  margin-top: 0;
}

.hds-text-editor__opaque > :last-child {
  margin-bottom: 0;
}

/* --- Görsel araçları (Paket 6G; 6I: içeriğin altında, sticky) ------------
   Seçili görsel varken içeriğin ALTINDA görünür: seçim anında içerik
   kaymaz (önceden toolbar altında açılıp içeriği itiyordu; tıklama başka
   öğeye düşebiliyordu). sticky bottom: uzun içerikte ekranın / kaydırılan
   panelin altında kalır. Değerler HDS Content görsel sunumu (align / size /
   layout). Compact varyantta da aynı şerit sarılır. */

.hds-text-editor__image-tools {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.375rem 0.5rem;
  border-top: 1px solid var(--hds-text-editor-divider);
  border-radius: 0 0 var(--hds-text-editor-radius) var(--hds-text-editor-radius);
  background: var(--hds-text-editor-toolbar-surface);
}

.hds-text-editor__image-tools[hidden] {
  display: none;
}

.hds-text-editor__image-tools-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
}

.hds-text-editor__image-tools-label {
  margin-right: 0.25rem;
  color: var(--hds-text-editor-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.hds-text-editor .hds-text-editor__image-tool {
  min-height: 0;
  height: var(--hds-text-editor-tool-size);
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--hds-text-editor-radius);
  background: transparent;
  box-shadow: none;
  color: var(--hds-text-editor-ink);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.hds-text-editor .hds-text-editor__image-tool:hover:not(:disabled) {
  background: var(--hds-text-editor-hover);
}

.hds-text-editor .hds-text-editor__image-tool[aria-pressed="true"] {
  border-color: var(--hds-text-editor-focus);
  background: var(--hds-text-editor-active);
  color: var(--hds-text-editor-active-ink);
  font-weight: 700;
}

.hds-text-editor .hds-text-editor__image-tool:focus-visible {
  outline: 2px solid var(--hds-text-editor-focus);
  outline-offset: 1px;
}

.hds-text-editor.is-variant-compact .hds-text-editor__image-tools {
  gap: 0.125rem 0.5rem;
  padding: 0.25rem;
}