/* ------------------------------------------------------------------------------------------
   Word düzenleyici (wordui.js / wordedit.js) — belge yüzeyi, araç çubuğu, açılır paneller.
   Kabuk token'ları (--bar --fg --line --panel --accent --muted --btn --fs --safe-bottom) app.css'tendir.
   Sayfa beyazdır (tema ne olursa olsun belge kâğıttır); araç çubuğu temayı izler.
   Görünür her düğme en az 40×40 px (dokunma hedefi).
   ------------------------------------------------------------------------------------------ */

/* ---- yerleşim: telefonda araç çubuğu altta, klavyenin hemen üstünde ------------------------ */
body.wd-edit #docView { padding-bottom: max(var(--wd-kb, 0px), var(--safe-bottom, 0px)); }
.doc-tools.wd-tools { padding: 0; gap: 0; flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  body.wd-edit #docView .doc-tools.wd-tools { order: 3; border-bottom: 0; border-top: 1px solid var(--line); flex-direction: column-reverse; }
  body.wd-edit #docView .doc-body { order: 2; }
}
.doc-body.wd-govdekap { background: #d5d9df; padding: 12px 8px 48px; touch-action: auto; }
body:not(.light):not([data-theme="light"]):not([data-theme="sepia"]):not([data-theme="hicontrast"]) .doc-body.wd-govdekap { background: #3a3f47; }

/* ---- sayfa ve yüzeyler ----------------------------------------------------------------------- */
.wd-sayfa { position: relative; margin: 0 auto; max-width: calc(var(--wd-icw, 600px) + 2 * var(--wd-kenar, 48px)); background: #fff; color: #111;
  box-shadow: 0 2px 10px rgba(0,0,0,.28); border-radius: 3px; padding: 18px var(--wd-kenar, 48px) 28px; min-height: 60vh; }
@media (max-width: 760px) { .wd-sayfa { padding: 14px 14px 24px; max-width: none; border-radius: 2px; } }
.wd-doc { cursor: text; outline: none; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: #111; line-height: 1.2; caret-color: #1a73e8; -webkit-user-modify: read-write; }
.wd-y-govde { min-height: 40vh; }
.wd-doc :is(p, h1, h2, h3, h4, h5, h6) { margin: 0; font-size: inherit; font-weight: inherit; font-style: inherit; color: inherit; font-family: inherit; line-height: inherit; }
.wd-doc a { color: inherit; text-decoration: none; }
.wd-doc a[href]:hover { cursor: text; }
.wd-doc img { max-width: 100%; height: auto; vertical-align: bottom; }
.wd-doc img.wd-float { float: none; }
.wd-doc img.wd-rsec { outline: 2px solid #1a73e8; outline-offset: 1px; }
.wd-doc span.tab { display: inline-block; width: 36pt; min-width: 12pt; }
.wd-doc sup, .wd-doc sub { line-height: 0; }
.wd-doc .wd-vanish { text-decoration: underline dotted #999; color: #777; }
.wd-doc .wd-pbb { border-top: 1px dashed #b8bcc4; padding-top: 4pt; }
.wd-doc .wd-sect { border-bottom: 3px double #c3c7ce; padding-bottom: 2pt; }
.wd-doc .pagebreak { display: block; height: 0; border-top: 1px dashed #a4a9b2; margin: 14pt 0; position: relative; user-select: none; }
.wd-doc .pagebreak::after { content: "⤓"; position: absolute; right: 0; top: -9px; font: 11px system-ui, sans-serif; color: #a4a9b2; background: #fff; padding: 0 4px; }
.wd-doc hr { border: 0; border-top: 1px solid #555; margin: 6pt 0; }

/* korunan öğeler (alan, yer imi, şekil, dipnot başvurusu …): düzenlenemez, silinebilir */
.wd-doc .wd-keep { user-select: all; }
.wd-doc .wd-keep.wd-gizli { display: none; }
.wd-doc span.wd-keep:not(.wd-gizli) { border-radius: 3px; background: rgba(26,115,232,.08); }
.wd-doc span.wd-keep[data-k="note"], .wd-doc span.wd-keep[data-k="cmt"] { background: transparent; color: #1a73e8; cursor: pointer; }
.wd-doc span.wd-keep[data-k="cmt"] { font-size: .8em; vertical-align: super; line-height: 0; }
.wd-doc div.wd-keep:not(.wd-gizli) { display: block; margin: 4pt 0; padding: 4pt 6pt; border: 1px dashed #b8c4d6; border-radius: 4px; color: #50607a; background: #f6f8fb; font-size: .92em; }
.wd-doc .wd-kutu { display: inline-block; max-width: 100%; border: 1px solid #9aa6b8; padding: 2px 6px; margin: 0 2px; background: #fff; white-space: normal; vertical-align: middle; font-size: .9em; }
.wd-doc .wd-yt { color: #6b778a; font-size: .9em; }
.wd-doc .wd-mat { font-family: "Cambria Math", "Times New Roman", serif; font-style: italic; }
.wd-doc span.wd-keep img { max-height: 12em; vertical-align: middle; }
.wd-doc span.wd-keep[data-k="del"] del { color: #b3261e; }
.wd-doc ins.wd-ins { text-decoration: underline; text-decoration-color: #1e8e3e; }
.wd-doc .wd-fld { background: #e8eaed; border-radius: 3px; padding: 0 2px; }
.wd-doc .wd-cmt { background: rgba(251,188,4,.32); border-bottom: 2px solid #f9ab00; cursor: pointer; }
.wd-doc .wd-sdt, .wd-doc .wd-sdtb { outline: 1px dotted rgba(26,115,232,.35); outline-offset: 1px; }

/* listeler: düz model (Word gibi) — etiket ::before ile, metin değil */
/* numara düzeyinin girintisi stilin girintisini ezer (Word önceliği: doğrudan > numara > stil); satır içi (doğrudan) girinti yine kazanır */
.wd-doc [data-num]:not([data-num="0"])[data-lbl], .wd-doc [data-chk]:not([data-wd-yok]) { padding-left: var(--li, 36pt); text-indent: calc(-1 * var(--hg, 18pt)); margin-left: 0; }
/* etiket asılı girintiden uzunsa (1.1.1.) metne yapışmasın: Word'deki sekme gibi küçük boşluk (kısa etikette hizayı bozmaz) */
.wd-doc [data-num]:not([data-num="0"])[data-lbl]::before { content: attr(data-lbl); display: inline-block; box-sizing: border-box; min-width: var(--hg, 18pt); padding-inline-end: 0.4em; text-indent: 0; white-space: pre; font-style: normal; font-weight: normal; text-decoration: none; }
.wd-doc [data-chk]::before { content: ""; display: inline-block; box-sizing: border-box; width: 1.05em; height: 1.05em; margin-right: calc(var(--hg, 18pt) - 1.05em); vertical-align: -0.15em;
  border: 1.6px solid #5f6368; border-radius: 3px; text-indent: 0; cursor: pointer; background: #fff; }
.wd-doc [data-chk="1"]::before { background: #1a73e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z'/%3E%3C/svg%3E") center / 90% no-repeat; border-color: #1a73e8; }
.wd-doc [data-chk="1"] { color: #6b7280; text-decoration: line-through; }

/* tablolar */
.wd-doc table.wd-tbl { border-collapse: collapse; margin: 4pt 0; table-layout: fixed; max-width: 100%; }
.wd-doc table.wd-tbl td { border: var(--wd-tb, 1px solid #7a7a7a); padding: 2pt 5pt; vertical-align: top; min-width: 18px; overflow-wrap: anywhere; }
.wd-doc table.wd-tbl[style*="--wd-tb:none"] td, .wd-doc table.wd-tbl[style*="--wd-tb: none"] td { outline: 1px dashed #d0d4da; outline-offset: -1px; }
.wd-doc table.wd-tbl.wd-dis { border: 1px solid #000; }
.wd-doc table.wd-tbl.wd-dis td { border: 0; outline: 1px dashed #d0d4da; outline-offset: -1px; }
.wd-doc table.wd-tbl td.wd-bos { border: 0; background: transparent; }
.wd-doc table.wd-tbl td :is(p, h1, h2, h3, h4, h5, h6) { margin-bottom: 0; }
@media (max-width: 760px) { .wd-doc table.wd-tbl { table-layout: auto; } }

/* içindekiler */
.wd-doc .wd-toc { display: block; margin: 6pt 0 10pt; padding: 6pt 8pt; border: 1px solid #dadce0; border-radius: 6px; background: #fafbfc; user-select: none; }
.wd-doc .wd-toc-bas { font-weight: 700; font-size: 1.15em; margin-bottom: 4pt; }
.wd-doc .wd-toc-e { padding: 2pt 0; color: #1a73e8; cursor: pointer; }
.wd-doc .wd-toc-e[data-sv="2"] { padding-left: 14pt; } .wd-doc .wd-toc-e[data-sv="3"] { padding-left: 28pt; }
.wd-doc .wd-toc-yok { color: #80868b; font-style: italic; }
.wd-doc .wd-toc-btn { margin-top: 4pt; min-height: 32px; border: 1px solid #dadce0; border-radius: 16px; background: #fff; color: #1a73e8; padding: 0 12px; font: 13px system-ui, sans-serif; cursor: pointer; }

/* üst / alt bilgi */
.wd-hf { position: relative; margin: 0 0 12px; padding: 18px 6px 6px; border: 1px dashed #c6cbd3; border-radius: 4px; }
.wd-hf-alt { margin: 14px 0 0; }
.wd-hf-ad { position: absolute; top: 2px; left: 6px; font: 11px system-ui, sans-serif; color: #80868b; pointer-events: none; }
.wd-hfy { min-height: 1.4em; }

/* resim boyutlandırma tutamağı */
.wd-rtut { position: absolute; pointer-events: none; border: 1px solid #1a73e8; z-index: 3; }
.wd-rkol { position: absolute; right: -14px; bottom: -14px; width: 28px; height: 28px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  pointer-events: auto; touch-action: none; cursor: nwse-resize; }

/* şablon şeridi (yeni belge) */
.wd-sablonlar { margin: -4px 0 12px; padding: 8px; border: 1px solid #dadce0; border-radius: 8px; background: #f8f9fa; font-family: system-ui, sans-serif; }
.wd-sab-bas { display: flex; align-items: center; justify-content: space-between; color: #3c4043; font-size: 14px; }
.wd-sab-bas .wd-b { color: #5f6368; }
.wd-sab-liste { display: flex; gap: 8px; overflow-x: auto; padding-top: 6px; }
.wd-sab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 112px; min-height: 96px; border: 1px solid #dadce0;
  border-radius: 8px; background: #fff; color: #202124; font: 13px system-ui, sans-serif; cursor: pointer; }
.wd-sab svg.ic { width: 30px; height: 30px; color: #1a73e8; }
.wd-sab:active { background: #e8f0fe; }

/* bul-değiştir vurgusu (CSS Custom Highlight API) */
::highlight(wd-bul) { background-color: #fce8b2; color: inherit; }
::highlight(wd-bul-akt) { background-color: #f9ab00; color: #000; }

/* ---- araç çubuğu ----------------------------------------------------------------------------- */
.wd-bar { display: flex; align-items: center; gap: 4px; padding: 3px 4px; width: 100%; min-height: 50px; background: var(--bar); }
.wd-kay { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.wd-kay::-webkit-scrollbar { display: none; }
/* fareli ekranda (masaüstü) taşan düğmeler için ince kaydırma çubuğu görünür (dikey tekerlek de çubuğu kaydırır, wordui.js cubukTekerlek); dokunmatikte gizli kalır */
@media (pointer: fine) {
  .wd-kay { scrollbar-width: thin; }
  .wd-kay::-webkit-scrollbar { display: block; height: 8px; }
  .wd-kay::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
}
.wd-grp { display: flex; align-items: center; gap: 1px; flex: 0 0 auto; padding: 0 3px; }
.wd-grp + .wd-grp { border-left: 1px solid var(--line); }
.wd-sabit { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; padding-left: 4px; border-left: 1px solid var(--line); }
.wd-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 40px; height: 40px; padding: 0 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--fg); cursor: pointer; flex: 0 0 auto; font: calc(13px * var(--fs)) system-ui, sans-serif; }
.wd-b svg.ic { width: 21px; height: 21px; }
.wd-b:hover { background: var(--btn); }
.wd-b:active { background: var(--btn-on); }
.wd-b.on { background: var(--btn-on); background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--accent); }
.wd-b:disabled { opacity: .38; cursor: default; background: transparent; }
/* klavye odağı (F6 / ok tuşları): #docView içinde uygulamanın genel odak halkası yoktur (app.css :where … :not(#docView *)) */
.wd-b:focus-visible, .wd-boy:focus-visible, .wd-renk:focus-visible, .wd-karb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wd-b[aria-expanded="true"] { background: var(--btn-on); }
.wd-dd .wd-ok { width: 14px; height: 14px; opacity: .7; margin-left: -1px; }
.wd-dd .wd-ddl { max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-stilb .wd-ddl { min-width: 72px; text-align: left; }
.wd-fontb .wd-ddl { min-width: 64px; max-width: 92px; text-align: left; }
.wd-boy { width: 46px; height: 36px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--fg); text-align: center; font: calc(14px * var(--fs)) system-ui, sans-serif; padding: 0 2px; }
.wd-renkb { flex-direction: column; gap: 0; padding-top: 2px; }
.wd-renkb svg.ic { width: 19px; height: 19px; }
.wd-renkb .wd-cizgi { display: block; width: 20px; height: 4px; border-radius: 2px; margin-top: 1px; background: #000; box-shadow: 0 0 0 1px rgba(128,128,128,.45); }
.wd-kaydet { background: var(--accent); color: var(--accent-fg); font-weight: 600; padding: 0 10px; }
.wd-kaydet:hover { background: var(--accent); filter: brightness(1.08); }
.wd-kaydet .wd-kl { margin-left: 3px; }
@media (max-width: 480px) { .wd-kaydet .wd-kl { display: none; } }
.wd-yazili { padding: 0 10px; font-weight: 500; }
/* kaydırılabilir çubukta görünmeyen düğme varsa kenar solar (kaydırma ipucu) */
.wd-kay.wd-sagda { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.wd-kay.wd-solda { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.wd-kay.wd-solda.wd-sagda { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
/* fareyle kullanılan geniş ekranda (masaüstü) daha sıkı düğmeler: çubuk tek satıra sığar; dokunmatikte 40 px kalır */
@media (pointer: fine) and (min-width: 900px) {
  .wd-bar { min-height: 44px; }
  .wd-b { min-width: 34px; height: 36px; padding: 0 5px; }
  .wd-b svg.ic { width: 20px; height: 20px; }
  .wd-boy { height: 32px; width: 42px; }
}

/* bul-değiştir çubuğu */
.wd-bulc { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px 6px; border-top: 1px solid var(--line); background: var(--bar); }
.wd-bsat { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.wd-bq, .wd-br { flex: 1 1 auto; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); padding: 0 10px; font: calc(14px * var(--fs)) system-ui, sans-serif; }
.wd-bsay { min-width: 44px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; font-size: calc(12px * var(--fs)); }
.wd-bbs { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 6px; color: var(--fg); font-size: calc(13px * var(--fs)); white-space: nowrap; }

/* ---- açılır paneller ------------------------------------------------------------------------- */
.wd-pop { position: fixed; z-index: 40; min-width: 180px; max-height: min(62vh, 520px); overflow: auto; padding: 6px; background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); font: calc(14px * var(--fs)) system-ui, sans-serif; overscroll-behavior: contain; }
.wd-pop[data-tur="menu"] { display: flex; flex-wrap: wrap; gap: 4px; width: min(94vw, 760px); max-width: none !important; }
.wd-menu-kol { flex: 1 1 220px; min-width: 0; }
.wd-pop-bas { padding: 6px 8px 4px; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--muted); text-transform: none; }
.wd-panel-bas { font-size: calc(14px * var(--fs)); color: var(--fg); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.wd-pop-oge { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
.wd-pop-oge:hover, .wd-pop-oge:focus-visible { background: var(--btn); }
.wd-pop-oge.on { background: var(--btn-on); }
.wd-pop-oge svg.ic { width: 20px; height: 20px; flex: 0 0 auto; }
.wd-bosic { display: inline-block; width: 20px; flex: 0 0 auto; }
.wd-pop-ara { height: 1px; background: var(--line); margin: 4px 2px; }
.wd-pop-bilgi { padding: 10px; }
.wd-satir { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 4px; }
.wd-pal { display: grid; gap: 4px; padding: 4px 6px; }
.wd-renk { width: 100%; aspect-ratio: 1; min-width: 24px; min-height: 24px; border: 1px solid rgba(0,0,0,.18); border-radius: 50%; padding: 0; cursor: pointer; }
.wd-renk.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.wd-ozel { position: relative; }
.wd-ozel input[type=color] { margin-left: auto; width: 40px; height: 32px; border: 0; padding: 0; background: transparent; }
.wd-stil-oge { min-height: 44px; }
.wd-onz { cursor: inherit; display: block; background: #fff; color: #111; padding: 2px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; line-height: 1.25 !important; margin: 0 !important; }
.wd-onz, .wd-onz * { font-size: min(1em, 20px) !important; }
.wd-tp-bas { padding: 4px 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wd-tp { border-collapse: separate; border-spacing: 3px; margin: 0 2px 4px; touch-action: none; }
.wd-tp td { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); cursor: pointer; padding: 0; }
.wd-tp td.on { background: var(--bg); background: color-mix(in srgb, var(--accent) 45%, var(--bg)); border-color: var(--accent); }
.wd-kar { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; padding: 2px 4px 6px; }
.wd-karb { min-width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--fg); font: 18px "Segoe UI Symbol", "Noto Sans Symbols", system-ui, sans-serif; cursor: pointer; }
.wd-karb:active { background: var(--btn-on); }
.wd-form { display: flex; flex-direction: column; gap: 8px; padding: 6px; min-width: min(80vw, 320px); }
.wd-form label { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--fs)); color: var(--muted); }
.wd-form input { height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); padding: 0 10px; font: calc(14px * var(--fs)) system-ui, sans-serif; }
.wd-yorum { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.wd-yorum-m { white-space: pre-wrap; }
.wd-yorum-y { color: var(--muted); font-size: calc(12px * var(--fs)); margin-top: 4px; }
.wd-ana { min-height: 40px; }
.wd-sayim { border-collapse: collapse; margin: 4px; }
.wd-sayim th, .wd-sayim td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wd-sayim td { text-align: right; }
.wd-sayim thead th { color: var(--muted); font-weight: 600; }
html[dir="rtl"] .wd-pop-oge { text-align: right; }
html[dir="rtl"] .wd-grp + .wd-grp { border-left: 0; border-right: 1px solid var(--line); }
html[dir="rtl"] .wd-kay.wd-sagda { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
html[dir="rtl"] .wd-kay.wd-solda { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }