/* =========================================================
   office.css — Belge Araçları editörleri (Word / Excel / Sunum)
   Yalnızca word-duzenle / excel-duzenle / sunum-duzenle sayfalarında yüklenir.
   ========================================================= */

/* editör kabı normal genişlik sınırını aşsın (sayfa .tool.wide = 860px) */
section.tool.of-shell,
.of-shell { max-width: min(1360px, 95vw); margin: 12px auto 0; padding: 0 16px; }

/* --- yükleme alanı --- */
.of-drop {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 46px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.of-drop:hover, .of-drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.of-drop .of-drop-ic { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--accent); }
.of-drop h3 { font-size: 1.1rem; font-weight: 700; }
.of-drop p { color: var(--text-soft); font-size: .92rem; margin-top: 4px; }
.of-drop-alt { margin-top: 16px; font-size: .9rem; color: var(--text-mute); }
.of-drop-alt button {
  background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}

/* --- durum / uyarı --- */
.of-status {
  display: none; align-items: center; gap: 9px;
  margin: 16px 0; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--text); font-size: .9rem;
}
.of-status.show { display: flex; }
.of-status.err { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.of-status .of-spin {
  width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: of-spin .7s linear infinite; flex: none;
}
@keyframes of-spin { to { transform: rotate(360deg); } }

/* --- editör kabuğu --- */
.of-editor { display: none; }
.of-editor.show { display: block; }

.of-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px; margin-bottom: 14px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); position: sticky; top: 8px; z-index: 20;
}
.of-bar .of-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
.of-bar .of-spacer { flex: 1; }
.of-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 32px; height: 32px; padding: 0 8px;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--text-soft); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.of-b:hover { background: var(--bg); color: var(--text); }
.of-b.on { background: var(--accent-soft); color: var(--accent); }
.of-b svg { width: 16px; height: 16px; }
.of-b.primary {
  background: var(--accent); color: #fff; border-color: var(--accent); padding: 0 14px;
}
.of-b.primary:hover { background: var(--accent-hover); color: #fff; }
.of-b:disabled { opacity: .45; cursor: not-allowed; }
.of-b select, .of-b-select {
  height: 32px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-soft); color: var(--text); font: inherit; font-size: .85rem; padding: 0 6px;
  flex: 0 0 auto; width: auto; min-width: 130px; max-width: 220px;
}
.of-b-select[data-fontsize] { min-width: 72px; }

.of-b.of-color {
  gap: 4px; padding: 0 6px; cursor: pointer;
}
.of-b.of-color > span { font-weight: 700; font-size: .9rem; line-height: 1; }
.of-b.of-color-hl > span { color: var(--text-mute); }
.of-b.of-color input[type="color"] {
  width: 22px; height: 16px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: 3px; background: none; cursor: pointer;
}
.of-b.of-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.of-b.of-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }

/* --- Word: sayfa --- */
.of-page-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; overflow: auto; }
.of-doc {
  background: #fff; color: #1c1e33;
  max-width: 820px; margin: 0 auto; min-height: 500px;
  padding: 56px 64px; border-radius: 4px;
  box-shadow: var(--shadow-md);
  outline: none; line-height: 1.7; font-size: 15px;
}
.of-doc.wide { max-width: 100%; padding: 40px clamp(24px, 5vw, 72px); }
.of-doc:focus { box-shadow: var(--shadow-md), 0 0 0 2px var(--accent-soft); }
.of-doc h1 { font-size: 1.9em; font-weight: 800; margin: .6em 0 .3em; }
.of-doc h2 { font-size: 1.45em; font-weight: 700; margin: .6em 0 .3em; }
.of-doc h3 { font-size: 1.2em; font-weight: 700; margin: .6em 0 .3em; }
.of-doc p { margin: 0 0 .7em; }
.of-doc ul, .of-doc ol { margin: 0 0 .7em; padding-left: 1.6em; }
.of-doc img { max-width: 100%; height: auto; }
.of-doc table { border-collapse: collapse; margin: 0 0 .7em; }
.of-doc td, .of-doc th { border: 1px solid #c9ccdd; padding: 5px 9px; }
.of-doc a { color: #2b50d6; }

/* --- Excel: tablo --- */
.of-tabs { display: flex; gap: 3px; margin-bottom: -1px; overflow-x: auto; }
.of-tab {
  padding: 7px 14px; font-size: .85rem; font-weight: 600; white-space: nowrap;
  background: var(--bg); color: var(--text-soft); cursor: pointer;
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.of-tab.on { background: var(--bg-soft); color: var(--text); }
.of-tab-add { padding: 7px 11px; font-weight: 700; }
.of-gridwrap {
  border: 1px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  background: var(--bg-soft); overflow: auto; max-height: 68vh;
}
table.of-grid { border-collapse: collapse; font-size: .86rem; }
table.of-grid th, table.of-grid td {
  border: 1px solid var(--border); padding: 0; min-width: 92px; height: 30px;
}
table.of-grid thead th, table.of-grid tbody th {
  background: var(--bg); color: var(--text-mute); font-weight: 600;
  text-align: center; position: sticky; user-select: none; cursor: pointer;
}
table.of-grid thead th { top: 0; z-index: 3; }
table.of-grid tbody th { left: 0; z-index: 2; min-width: 46px; }
table.of-grid thead th.corner { left: 0; z-index: 4; }
table.of-grid td > div {
  padding: 4px 8px; outline: none; min-height: 30px; white-space: pre;
  overflow: hidden; text-overflow: ellipsis;
}
table.of-grid td.rng > div { box-shadow: inset 0 0 0 9999px rgba(91, 75, 255, .09); }
table.of-grid td.sel > div { box-shadow: inset 0 0 0 2px var(--accent); }
table.of-grid th.sel { background: var(--accent-soft); color: var(--accent); }
.of-b[data-fmt-b] b, .of-b[data-fmt-i] i, .of-b[data-fmt-u] u,
.of-b[data-fmt] b, .of-b[data-fmt] i, .of-b[data-fmt] u { font-size: .95rem; }
.of-b[data-fmt-al] span { font-size: 1rem; line-height: 1; }
.of-sep[hidden] { display: none !important; }
.of-fmt-note {
  font-size: .72rem; color: var(--text-mute); line-height: 1.2;
  max-width: 150px; align-self: center;
}
.of-fmt-note[hidden] { display: none !important; }

/* --- Sunum: görsel slayt editörü --- */
.pv-wrap { display: flex; gap: 14px; align-items: flex-start; }
.pv-strip {
  width: 176px; flex: none; max-height: 72vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding-right: 2px;
}
.pv-thumb {
  position: relative; border: 2px solid var(--border); border-radius: 6px;
  overflow: hidden; cursor: pointer; background: #fff; line-height: 0;
}
.pv-thumb.on { border-color: var(--accent); }
.pv-thumb-n {
  position: absolute; left: 3px; top: 3px; z-index: 2; line-height: 1.3;
  font-size: 10px; font-weight: 700; background: rgba(0,0,0,.55); color: #fff;
  padding: 0 5px; border-radius: 3px;
}
.pv-stage {
  flex: 1; min-width: 0; background: #e9e9ef; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; overflow: auto;
  display: flex; justify-content: center; align-items: flex-start;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pv-stage { background: #33343e; } }
:root[data-theme="dark"] .pv-stage { background: #33343e; }
.pv-slide-outer { position: relative; box-shadow: var(--shadow-md); flex: none; }
.pv-slide { position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; }
.pv-shape { position: absolute; box-sizing: border-box; overflow: hidden; cursor: default; }
.pv-shape.pv-selected { overflow: visible; outline: 2px solid var(--accent); outline-offset: 0; z-index: 50; cursor: move; }
.pv-shape.pv-editing { overflow: visible; outline: 2px solid var(--accent); z-index: 60; cursor: text; }
.pv-shape.pv-editing .pv-text { cursor: text; }

.pv-handles { position: absolute; inset: 0; pointer-events: none; }
.pv-h {
  position: absolute; width: var(--h, 10px); height: var(--h, 10px);
  background: #fff; border: 2px solid var(--accent); border-radius: 2px;
  pointer-events: auto; box-sizing: border-box;
}
.pv-h-nw { left: calc(var(--h) / -2); top: calc(var(--h) / -2); cursor: nwse-resize; }
.pv-h-n  { left: calc(50% - var(--h) / 2); top: calc(var(--h) / -2); cursor: ns-resize; }
.pv-h-ne { right: calc(var(--h) / -2); top: calc(var(--h) / -2); cursor: nesw-resize; }
.pv-h-e  { right: calc(var(--h) / -2); top: calc(50% - var(--h) / 2); cursor: ew-resize; }
.pv-h-se { right: calc(var(--h) / -2); bottom: calc(var(--h) / -2); cursor: nwse-resize; }
.pv-h-s  { left: calc(50% - var(--h) / 2); bottom: calc(var(--h) / -2); cursor: ns-resize; }
.pv-h-sw { left: calc(var(--h) / -2); bottom: calc(var(--h) / -2); cursor: nesw-resize; }
.pv-h-w  { left: calc(var(--h) / -2); top: calc(50% - var(--h) / 2); cursor: ew-resize; }

.of-b[hidden] { display: none !important; }
.of-b span { font-size: .84rem; }

.pv-thumb { transition: border-color .12s; }
.pv-thumb.pv-drag { opacity: .4; }
.pv-thumb.pv-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pv-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 3px 5px; box-sizing: border-box;
}
.pv-text-in { width: 100%; }
.pv-p { margin: 0; line-height: 1.15; }
.pv-text[contenteditable]:hover { outline: 1px dashed var(--accent); outline-offset: -1px; }
.pv-text[contenteditable]:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
  background: rgba(91,75,255,.06); cursor: text;
}
.pv-ph {
  background: repeating-linear-gradient(45deg, rgba(139,143,176,.12) 0 8px, rgba(139,143,176,.04) 8px 16px);
  border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: 12px;
}
.pv-table { width: 100%; height: 100%; border-collapse: collapse; }
.pv-table td { border: 1px solid #b9bccc; padding: 2px 4px; vertical-align: top; }
.pv-table td .pv-text { position: static; inset: auto; height: auto; padding: 0; }

.of-editor.of-full .pv-strip,
.of-editor:fullscreen .pv-strip { max-height: calc(100vh - 118px); }
.of-editor.of-full .pv-stage,
.of-editor:fullscreen .pv-stage { max-height: calc(100vh - 118px); }

@media (max-width: 820px) {
  .pv-wrap { flex-direction: column; }
  .pv-strip {
    width: auto; flex-direction: row; max-height: none;
    overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
  }
  .pv-thumb { width: 132px; flex: none; }
}

.of-hint { color: var(--text-mute); font-size: .84rem; margin: 10px 0 0; }
.of-count { color: var(--text-mute); font-size: .84rem; }

/* --- Tam ekran (Fullscreen API) ve genişletilmiş (.of-full yedeği) --- */
.of-editor:fullscreen,
.of-editor:-webkit-full-screen,
.of-editor.of-full {
  background: var(--bg);
  padding: 14px clamp(14px, 3vw, 40px) 28px;
  overflow: auto;
}
.of-editor.of-full {
  position: fixed; inset: 0; z-index: 9999; margin: 0;
}
.of-editor:fullscreen .of-bar,
.of-editor:-webkit-full-screen .of-bar,
.of-editor.of-full .of-bar { top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.of-editor:fullscreen .of-page-wrap,
.of-editor:-webkit-full-screen .of-page-wrap,
.of-editor.of-full .of-page-wrap { min-height: calc(100vh - 96px); }
.of-editor:fullscreen .of-doc,
.of-editor:-webkit-full-screen .of-doc,
.of-editor.of-full .of-doc { min-height: calc(100vh - 150px); }

.of-editor:fullscreen .of-gridwrap,
.of-editor:-webkit-full-screen .of-gridwrap,
.of-editor.of-full .of-gridwrap { max-height: calc(100vh - 128px); }

.of-editor:fullscreen .of-slides,
.of-editor:-webkit-full-screen .of-slides,
.of-editor.of-full .of-slides { max-width: 1100px; margin: 0 auto; }

/* --- PDF Düzenle: sayfa üstü ekleme öğeleri --- */
/* Noto Sans: önizleme metni ile dışa aktarılan PDF yazı tipi birebir eşleşsin
   diye (sarma/genişlik hesapları tutarlı olur). */
@font-face {
  font-family: "OCNoto"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/NotoSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "OCNoto"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/NotoSans-Bold.ttf") format("truetype");
}
.pv-shape.pv-text-box { cursor: default; }
.pv-shape.pv-text-box.pv-editing { overflow: visible; outline: 2px solid var(--accent); z-index: 60; }
.pv-shape.pv-text-box.pv-editing .pdf-ta { cursor: text; }
.pdf-ta::placeholder { color: var(--text-mute); opacity: .6; }
.pv-shape.pv-rect { box-sizing: border-box; }
.pv-shape.pv-pic { background: repeating-linear-gradient(45deg, rgba(139,143,176,.08) 0 8px, rgba(139,143,176,.02) 8px 16px); }
/* Var olan (orijinal) metin — tıklanabilir ama normalde görünmez; üstüne
   gelince "buraya tıklayıp düzenleyebilirsin" ipucu için hafif vurgu.
   Tıklanınca GERÇEK bir metin kutusuna dönüşür (.pv-text-box) — o andan
   itibaren eklenen metin kutularıyla birebir aynı görünüm/araç çubuğunu
   kullanır, burada ayrı bir "düzenleniyor" görünümü YOKTUR. */
.pv-shape.pv-srctext { cursor: text; }
.pv-shape.pv-srctext:hover { background: rgba(91,75,255,.16); outline: 1px dashed rgba(91,75,255,.5); outline-offset: 1px; }
.of-b.of-opacity { gap: 6px; padding: 0 8px; cursor: default; }
.of-b.of-opacity > span { font-weight: 600; font-size: .78rem; color: var(--text-mute); }
.of-b.of-opacity input[type="range"] { width: 84px; accent-color: var(--accent); cursor: pointer; }