<?php
/**
 * ofis.php - aahaber.com Hepsi Bir Arada Ofis Programı (Univer Ekosistemi)
 * 
 * 6 Temel Modül:
 * 1. 🟢 Univer Sheets (Excel & E-Tablo)
 * 2. 🔵 Univer Docs (Word & Doküman)
 * 3. 🔴 Univer Slides (PowerPoint & Sunum)
 * 4. 🟣 Univer Boards (Beyaz Tahta - Miro / FigJam)
 * 5. 🟢 Univer Bases (Veritabanı - Notion / Airtable / Kanban)
 * 6. 🔴 Univer PDFs (PDF Okuyucu & Düzenleyici)
 */

$page_title = "Ofis Programı — Univer Hepsi Bir Arada Ofis Ekosistemi | aahaber.com";
$page_desc = "Tarayıcı içi tam donanımlı ofis paketi: Excel uyumlu formüllü e-tablolar, zengin metin belgeleri, slayt sunumları, sonsuz beyaz tahta, Kanban veritabanı ve PDF araçları tek sayfada.";
$page_keywords = "ofis programı, univer ofis, excel online, e-tablo, word online, powerpoint sunum, beyaz tahta, kanban pano, pdf düzenleyici, aahaber ofis";
$page_active = "ofis";

$extra_css = [
    'https://unpkg.com/@univerjs/umd/lib/univer.css',
    'ofis.css?v=2.2'
];
$extra_js = [
    'https://unpkg.com/@univerjs/umd/lib/univer.full.umd.js',
    'https://unpkg.com/@univerjs/umd/lib/locale/en-US.js',
    'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js',
    'https://cdn.jsdelivr.net/npm/mammoth@1.13.0/mammoth.browser.min.js',
    'ofis.js?v=2.2'
];

require_once __DIR__ . '/ust.php';
?>

<div class="office-app-wrapper">

  <!-- ======================================================================
       1. ÜST OFİS BAŞLIK & ARAÇ ÇUBUĞU (OFFICE HEADER BAR)
       ====================================================================== -->
  <header class="office-header-bar">
    <div class="office-header-left">
      
      <!-- Birebir Görseldeki Açılır Modül Seçici (Header Dropdown) -->
      <div class="office-module-selector-wrap" id="officeModuleSelectorWrap">
        <button type="button" class="btn-module-selector" id="btnModuleSelectorToggle" title="Ofis Modülünü Değiştir">
          <span class="module-badge-icon" id="currentModuleBadge">🟢</span>
          <div class="module-meta-text">
            <span class="module-current-name" id="currentModuleName">Univer Sheets</span>
            <span class="module-sub-desc" id="currentModuleDesc">Excel &amp; E-Tablo</span>
          </div>
          <svg class="module-chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"></polyline></svg>
        </button>

        <!-- Açılır 6 Modül Listesi -->
        <div class="office-modules-dropdown" id="officeModulesDropdown">
          <div class="dropdown-section-title">Ofis Uygulamaları (Univer All-in-One)</div>

          <a href="#sheets" class="office-module-option active" data-module="sheets">
            <span class="module-opt-icon" style="background: rgba(16, 185, 129, 0.15); color: #10b981;">🟢</span>
            <div class="module-opt-texts">
              <div class="module-opt-title">
                <span>Univer Sheets</span>
                <span class="module-opt-tag">Excel</span>
              </div>
              <span class="module-opt-desc">Formüller (=TOPLA), tablolar, grafikler ve .xlsx</span>
            </div>
          </a>

          <a href="#docs" class="office-module-option" data-module="docs">
            <span class="module-opt-icon" style="background: rgba(37, 99, 235, 0.15); color: #2563eb;">🔵</span>
            <div class="module-opt-texts">
              <div class="module-opt-title">
                <span>Univer Docs</span>
                <span class="module-opt-tag">Word</span>
              </div>
              <span class="module-opt-desc">Zengin metin düzenleyici, A4 sayfa düzeni &amp; PDF</span>
            </div>
          </a>

          <a href="#slides" class="office-module-option" data-module="slides">
            <span class="module-opt-icon" style="background: rgba(239, 68, 68, 0.15); color: #ef4444;">🔴</span>
            <div class="module-opt-texts">
              <div class="module-opt-title">
                <span>Univer Slides</span>
                <span class="module-opt-tag">PowerPoint</span>
              </div>
              <span class="module-opt-desc">Görsel slayt hazırlama &amp; tam ekran canlı sunum</span>
            </div>
          </a>

          <a href="#boards" class="office-module-option" data-module="boards">
            <span class="module-opt-icon" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">🟣</span>
            <div class="module-opt-texts">
              <div class="module-opt-title">
                <span>Univer Boards</span>
                <span class="module-opt-tag">Miro / FigJam</span>
              </div>
              <span class="module-opt-desc">Sonsuz tuval, yapışkan notlar &amp; serbest çizim</span>
            </div>
          </a>

          <a href="#bases" class="office-module-option" data-module="bases">
            <span class="module-opt-icon" style="background: rgba(5, 150, 105, 0.15); color: #059669;">🟢</span>
            <div class="module-opt-texts">
              <div class="module-opt-title">
                <span>Univer Bases</span>
                <span class="module-opt-tag">Notion / Airtable</span>
              </div>
              <span class="module-opt-desc">Dinamik veritabanı, etiketli görevler &amp; Kanban</span>
            </div>
          </a>

          <a href="#pdfs" class="office-module-option" data-module="pdfs">
            <span class="module-opt-icon" style="background: rgba(220, 38, 38, 0.15); color: #dc2626;">🔴</span>
            <div class="module-opt-texts">
              <div class="module-opt-title">
                <span>Univer PDFs</span>
                <span class="module-opt-tag">Acrobat</span>
              </div>
              <span class="module-opt-desc">PDF açma, not alma, sayfa gezintisi &amp; dijital imza</span>
            </div>
          </a>
        </div>
      </div>

      <!-- Doküman Adı & Otomatik Kayıt -->
      <div class="office-doc-meta">
        <input type="text" id="officeDocTitleInput" class="office-doc-title-input" value="Bütçe ve Finans Tablosu" title="Doküman Başlığını Değiştir">
        <div class="autosave-pill" id="autosavePill">
          <span class="autosave-dot"></span>
          <span id="autosaveTimeText">Otomatik Kaydedildi</span>
        </div>
      </div>

    </div>

    <!-- Sağ Aksiyonlar: Dosya Aç, Dışa Aktarma, Tam Ekran -->
    <div class="office-header-right">

      <!-- Şablonlar Menüsü (Templates) -->
      <div class="template-dropdown-wrap" id="officeTemplateDropdownWrap">
        <button type="button" class="btn-office-action" id="btnTemplateToggle" title="Hazır Profesyonel Ofis Şablonları">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
          <span>Şablonlar</span>
          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
        </button>

        <div class="template-menu-card" id="templateMenuCard">
          <div class="dropdown-section-title">E-Tablo Şablonları (Sheets)</div>
          <button type="button" class="template-item-btn" onclick="window.aahaberLoadTemplate('monthly_budget')">
            <span>📊 Aylık Bütçe Raporu</span>
            <span class="ext-badge">Vertex42</span>
          </button>
          <button type="button" class="template-item-btn" onclick="window.aahaberLoadTemplate('business_dashboard')">
            <span>💼 Şirket Gelir-Gider Tablosu</span>
            <span class="ext-badge">Finans</span>
          </button>
          <button type="button" class="template-item-btn" onclick="window.aahaberLoadTemplate('project_schedule')">
            <span>📅 Proje Zaman Çizelgesi</span>
            <span class="ext-badge">Gantt</span>
          </button>
          <button type="button" class="template-item-btn" onclick="window.aahaberLoadTemplate('invoice')">
            <span>🧾 Kurumsal Satış Faturası</span>
            <span class="ext-badge">Fatura</span>
          </button>
        </div>
      </div>

      <!-- Dosya Açma Menüsü (Open File & Import) -->
      <div class="open-file-dropdown-wrap" id="officeOpenDropdownWrap">
        <button type="button" class="btn-office-action" id="btnOpenFileToggle" title="Bilgisayardan Dosya Aç veya İçe Aktar">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><polyline points="12 11 12 17"></polyline><line x1="9" y1="14" x2="15" y2="14"></line></svg>
          <span>Dosya Aç</span>
          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
        </button>

        <div class="open-menu-card" id="openMenuCard">
          <label class="open-item-btn" style="cursor: pointer;" title="Tüm desteklenen dosya türlerini otomatik algılar">
            <input type="file" id="universalFileInput" style="display: none;" accept=".xlsx,.xls,.csv,.docx,.doc,.txt,.html,.htm,.md,.pdf,.json">
            <span>⚡ Hızlı Aç (Otomatik Algıla)</span>
            <span class="ext-badge">TÜMÜ</span>
          </label>
          <div style="height: 1px; background: var(--border-subtle); margin: 3px 0;"></div>
          <label class="open-item-btn" style="cursor: pointer;" title="Excel ve CSV tablolarını Univer Sheets'e yükler">
            <input type="file" id="excelHeaderFileInput" style="display: none;" accept=".xlsx,.xls,.csv">
            <span>📊 Excel / E-Tablo Aç</span>
            <span class="ext-badge">.XLSX, .CSV</span>
          </label>
          <label class="open-item-btn" style="cursor: pointer;" title="Word ve metin belgelerini Univer Docs'a yükler">
            <input type="file" id="wordHeaderFileInput" style="display: none;" accept=".docx,.doc,.txt,.html,.md">
            <span>📝 Word / Metin Belgesi Aç</span>
            <span class="ext-badge">.DOCX, .TXT</span>
          </label>
          <label class="open-item-btn" style="cursor: pointer;" title="PDF dokümanlarını Univer PDFs'e yükler">
            <input type="file" id="pdfHeaderFileInput" style="display: none;" accept=".pdf">
            <span>📄 PDF Dokümanı Aç</span>
            <span class="ext-badge">.PDF</span>
          </label>
          <label class="open-item-btn" style="cursor: pointer;" title="JSON ve CSV veritabanlarını yükler">
            <input type="file" id="databaseHeaderFileInput" style="display: none;" accept=".json,.csv">
            <span>🗃️ Veritabanı / Kanban Aç</span>
            <span class="ext-badge">.JSON</span>
          </label>
        </div>
      </div>

      <!-- Dışa Aktarma Menüsü (Export) -->
      <div class="export-dropdown-wrap" id="officeExportDropdownWrap">
        <button type="button" class="btn-office-action" id="btnExportToggle" title="Dokümanı İndir veya Dışa Aktar">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
          <span>Dışa Aktar</span>
          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
        </button>

        <div class="export-menu-card" id="exportMenuCard">
          <button type="button" class="export-item-btn" id="btnExportExcel">
            <span>📊 Excel Tablosu İndir</span>
            <span class="ext-badge">.XLSX</span>
          </button>
          <button type="button" class="export-item-btn" id="btnExportWord">
            <span>📝 Word Dokümanı İndir</span>
            <span class="ext-badge">.DOCX</span>
          </button>
          <button type="button" class="export-item-btn" id="btnExportPdf">
            <span>📄 PDF Olarak Yazdır / Kaydet</span>
            <span class="ext-badge">.PDF</span>
          </button>
        </div>
      </div>

      <!-- Tam Ekran Geçiş Butonu -->
      <button type="button" class="btn-office-action" id="btnOfficeFullscreen" title="Dikkat Dağıtmayan Tam Ekran Çalışma Alanı">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
        <span>Tam Ekran</span>
      </button>

    </div>
  </header>

  <!-- ======================================================================
       2. ÇALIŞMA ALANI KONTEYNIRI (6 MODÜL PANELLERİ)
       ====================================================================== -->
  <main class="office-workspace-card" id="officeWorkspaceCard">

    <!-- Sürükle Bırak (Drag & Drop) Kaplaması -->
    <div class="office-drag-overlay" id="officeDragOverlay">
      <div class="drag-overlay-icon">📂</div>
      <div class="drag-overlay-title">Dosyayı Buraya Bırakın</div>
      <div class="drag-overlay-desc">Excel (.xlsx, .csv), Word (.docx, .txt), PDF veya Veritabanı dosyanız otomatik olarak açılacaktır.</div>
    </div>

    <!-- ==================================================================
         MODÜL 1: 🟢 UNIVER SHEETS (EXCEL & E-TABLO — GERÇEK UNIVER ENGINE & ŞERİT)
         ================================================================== -->
    <div class="office-module-pane active" id="pane-sheets">
      
      <!-- Excel / Univer Şerit Menüsü (Ribbon Bar) -->
      <div class="univer-ribbon-bar" id="univerRibbonBar">
        <!-- Şerit Sekmeleri -->
        <div class="ribbon-tabs-nav" id="ribbonTabsNav">
          <button type="button" class="ribbon-tab-btn active" data-tab="start">Başlangıç</button>
          <button type="button" class="ribbon-tab-btn" data-tab="insert">Ekle</button>
          <button type="button" class="ribbon-tab-btn" data-tab="formulas">Formüller</button>
          <button type="button" class="ribbon-tab-btn" data-tab="data">Veri</button>
          <button type="button" class="ribbon-tab-btn" data-tab="view">Görünüm</button>
        </div>

        <!-- Şerit İçerik Panelleri -->
        <div class="ribbon-panels-container">
          <!-- 1. BAŞLANGIÇ (START) -->
          <div class="ribbon-tab-content active" id="ribbon-content-start">
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('undo')" title="Geri Al (Ctrl+Z)">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 7v6h6"></path><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path></svg>
                </button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('redo')" title="Yinele (Ctrl+Y)">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 7v6h-6"></path><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"></path></svg>
                </button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('formatPainter')" title="Biçim Boyacısı">🖌️</button>
              </div>
              <span class="ribbon-group-label">Pano</span>
            </div>

            <div class="ribbon-divider"></div>

            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <select class="ribbon-select" id="ribbonFontFamily" onchange="window.aahaberSheetSetFont(this.value)" title="Yazı Tipi">
                  <option value="Arial" selected>Arial</option>
                  <option value="Plus Jakarta Sans">Plus Jakarta Sans</option>
                  <option value="Outfit">Outfit</option>
                  <option value="Calibri">Calibri</option>
                  <option value="Times New Roman">Times New Roman</option>
                </select>
                <select class="ribbon-select-sm" id="ribbonFontSize" onchange="window.aahaberSheetSetSize(this.value)" title="Yazı Boyutu">
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="14">14</option>
                  <option value="16">16</option>
                  <option value="18" selected>18</option>
                  <option value="20">20</option>
                  <option value="24">24</option>
                </select>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetChangeFontSize(1)" title="Yazı Tipini Büyüt (A+)">A<sup>+</sup></button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetChangeFontSize(-1)" title="Yazı Tipini Küçült (A-)">A<sup>-</sup></button>
              </div>
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-icon bold-btn" onclick="window.aahaberSheetCmd('bold')" title="Kalın (Ctrl+B)"><strong>B</strong></button>
                <button type="button" class="btn-ribbon-icon italic-btn" onclick="window.aahaberSheetCmd('italic')" title="İtalik (Ctrl+I)"><em>I</em></button>
                <button type="button" class="btn-ribbon-icon underline-btn" onclick="window.aahaberSheetCmd('underline')" title="Altı Çizili (Ctrl+U)"><u>U</u></button>
                <button type="button" class="btn-ribbon-icon strike-btn" onclick="window.aahaberSheetCmd('strikethrough')" title="Üstü Çizili"><s>S</s></button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('borders')" title="Kenarlıklar">▦</button>
                <label class="btn-ribbon-color-wrap" title="Dolgu Rengi">
                  <span class="color-badge-ico">🪣</span>
                  <input type="color" id="ribbonFillColor" value="#1e3a8a" onchange="window.aahaberSheetSetBg(this.value)">
                </label>
                <label class="btn-ribbon-color-wrap" title="Metin Rengi">
                  <span class="color-badge-ico" style="font-weight: 800; border-bottom: 2px solid red;">A</span>
                  <input type="color" id="ribbonTextColor" value="#000000" onchange="window.aahaberSheetSetColor(this.value)">
                </label>
              </div>
              <span class="ribbon-group-label">Yazı Tipi</span>
            </div>

            <div class="ribbon-divider"></div>

            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('alignTop')" title="Üste Hizala">⤊</button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('alignMiddle')" title="Ortaya Hizala">⇕</button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('alignBottom')" title="Alta Hizala">⤋</button>
                <button type="button" class="btn-ribbon-text-btn" onclick="window.aahaberSheetCmd('wrapText')" title="Metni Kaydır">Metni Kaydır</button>
              </div>
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('alignLeft')" title="Sola Hizala">⇠</button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('alignCenter')" title="Ortala">≡</button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('alignRight')" title="Sağa Hizala">⇢</button>
                <button type="button" class="btn-ribbon-text-btn" onclick="window.aahaberSheetCmd('mergeCells')" title="Birleştir ve Ortala">Birleştir &amp; Ortala</button>
              </div>
              <span class="ribbon-group-label">Hizalama</span>
            </div>

            <div class="ribbon-divider"></div>

            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <select class="ribbon-select" id="ribbonNumFmtSelect" onchange="window.aahaberSheetSetNumFmt(this.value)" title="Sayı Biçimi">
                  <option value="general" selected>Genel</option>
                  <option value="currency">Para Birimi (₺)</option>
                  <option value="percent">Yüzde (%)</option>
                  <option value="number">Sayı (1.000,00)</option>
                  <option value="date">Tarih</option>
                </select>
              </div>
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetSetNumFmt('currency')" title="Para Birimi (₺)">₺</button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetSetNumFmt('percent')" title="Yüzde (%)">%</button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetSetNumFmt('comma')" title="Binlik Ayırıcı">,</button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('decInc')" title="Ondalık Artır">.00</button>
                <button type="button" class="btn-ribbon-icon" onclick="window.aahaberSheetCmd('decDec')" title="Ondalık Azalt">.0</button>
              </div>
              <span class="ribbon-group-label">Sayı</span>
            </div>

            <div class="ribbon-divider"></div>

            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('autoSum')" title="Otomatik Topla (=TOPLA)">
                  <span>Σ Otomatik Topla</span>
                </button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('protect')" title="Sayfayı Koru">
                  <span>🔒 Sayfa Koru</span>
                </button>
              </div>
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('sortFilter')" title="Sırala ve Filtrele">
                  <span>⇕ Sırala &amp; Filtre</span>
                </button>
                <button type="button" class="btn-ribbon-action" onclick="window.print()" title="Yazdır">
                  <span>🖨️ Yazdır</span>
                </button>
              </div>
              <span class="ribbon-group-label">Araçlar &amp; Çıktı</span>
            </div>
          </div>

          <!-- 2. EKLE (INSERT) -->
          <div class="ribbon-tab-content" id="ribbon-content-insert">
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetInsertRow('above')">+ Üste Satır Ekle</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetInsertRow('below')">+ Alta Satır Ekle</button>
              </div>
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetInsertCol('left')">+ Sola Sütun Ekle</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetInsertCol('right')">+ Sağa Sütun Ekle</button>
              </div>
              <span class="ribbon-group-label">Satırlar &amp; Sütunlar</span>
            </div>
            <div class="ribbon-divider"></div>
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetInsertChart('bar')">📊 Sütun Grafiği</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetInsertChart('pie')">🥧 Pasta Grafik</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetInsertChart('line')">📈 Çizgi Grafik</button>
              </div>
              <span class="ribbon-group-label">Grafik Görselleştirme</span>
            </div>
            <div class="ribbon-divider"></div>
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('addComment')">💬 Not / Yorum Ekle</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('addLink')">🔗 Bağlantı Ekle</button>
              </div>
              <span class="ribbon-group-label">Açıklama &amp; Bağlantı</span>
            </div>
          </div>

          <!-- 3. FORMÜLLER (FORMULAS) -->
          <div class="ribbon-tab-content" id="ribbon-content-formulas">
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberInsertFormula('=TOPLA(')"><strong>Σ TOPLA</strong> (=SUM)</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberInsertFormula('=ORTALAMA(')"><strong>x̄ ORTALAMA</strong></button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberInsertFormula('=BAĞ_DEĞ_SAY(')"><strong># SAY</strong> (=COUNT)</button>
              </div>
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberInsertFormula('=MAK(')"><strong>▲ MAK</strong> (=MAX)</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberInsertFormula('=MİN(')"><strong>▼ MİN</strong> (=MIN)</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberInsertFormula('=EĞER(')"><strong>? EĞER</strong> (=IF)</button>
              </div>
              <span class="ribbon-group-label">Sık Kullanılan İşlevler</span>
            </div>
            <div class="ribbon-divider"></div>
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberInsertFormula('=DÜŞEYARA(')">🔍 DÜŞEYARA (=VLOOKUP)</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberInsertFormula('=BİRLEŞTİR(')">Aa BİRLEŞTİR</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberInsertFormula('=BUGÜN()')">📅 BUGÜN()</button>
              </div>
              <span class="ribbon-group-label">Arama, Metin &amp; Tarih</span>
            </div>
            <div class="ribbon-divider"></div>
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberRecalculateFormulas()">⚡ Formülleri Şimdi Hesapla (F9)</button>
              </div>
              <span class="ribbon-group-label">Hesaplama Seçenekleri</span>
            </div>
          </div>

          <!-- 4. VERİ (DATA) -->
          <div class="ribbon-tab-content" id="ribbon-content-data">
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetSort('asc')">A→Z Küçükten Büyüğe Sırala</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetSort('desc')">Z→A Büyükten Küçüğe Sırala</button>
              </div>
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('filter')">🔽 Otomatik Filtre Uygula</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('removeDuplicates')">🚫 Yinelenenleri Kaldır</button>
              </div>
              <span class="ribbon-group-label">Sırala ve Filtrele</span>
            </div>
            <div class="ribbon-divider"></div>
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('dataValidation')">✅ Veri Doğrulama Listesi</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('textToColumns')">✂️ Metni Sütunlara Dönüştür</button>
              </div>
              <span class="ribbon-group-label">Veri Doğrulama &amp; Araçlar</span>
            </div>
          </div>

          <!-- 5. GÖRÜNÜM (VIEW) -->
          <div class="ribbon-tab-content" id="ribbon-content-view">
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetToggleGridlines()">▦ Kılavuz Çizgileri</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('freezeTopRow')">❄️ Üst Satırı Dondur</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetCmd('freezeFirstCol')">❄️ İlk Sütunu Dondur</button>
              </div>
              <span class="ribbon-group-label">Sayfa Görünümü</span>
            </div>
            <div class="ribbon-divider"></div>
            <div class="ribbon-group">
              <div class="ribbon-group-row">
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetSetZoom(0.75)">🔍 %75</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetSetZoom(1.0)">🔍 %100</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetSetZoom(1.25)">🔍 %125</button>
                <button type="button" class="btn-ribbon-action" onclick="window.aahaberSheetSetZoom(1.5)">🔍 %150</button>
              </div>
              <span class="ribbon-group-label">Yakınlaştırma Sürgüsü</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 2. GERÇEK UNIVER CANVAS & FORMÜL MOTORU HOST ALANI -->
      <div id="univer-sheets-app" class="univer-sheets-host"></div>
    </div>

    <!-- ==================================================================
         MODÜL 2: 🔵 UNIVER DOCS (WORD & DOKÜMAN)
         ================================================================== -->
    <div class="office-module-pane" id="pane-docs">
      
      <!-- Word Biçimlendirme Araç Çubuğu -->
      <div class="docs-toolbar">
        <div class="docs-tool-group">
          <select class="docs-select" id="docHeadingSelect">
            <option value="p">Normal Metin</option>
            <option value="h1">Başlık 1 (H1)</option>
            <option value="h2">Başlık 2 (H2)</option>
            <option value="h3">Başlık 3 (H3)</option>
            <option value="blockquote">Alıntı Kutusu</option>
          </select>
        </div>

        <div class="docs-tool-group">
          <button type="button" class="btn-doc-tool" data-cmd="bold" title="Kalın"><strong>B</strong></button>
          <button type="button" class="btn-doc-tool" data-cmd="italic" title="İtalik"><em>I</em></button>
          <button type="button" class="btn-doc-tool" data-cmd="underline" title="Altı Çizili"><u>U</u></button>
          <button type="button" class="btn-doc-tool" data-cmd="strikeThrough" title="Üstü Çizili"><s>S</s></button>
        </div>

        <div class="docs-tool-group">
          <button type="button" class="btn-doc-tool" data-cmd="justifyLeft" title="Sola Hizala">⇠</button>
          <button type="button" class="btn-doc-tool" data-cmd="justifyCenter" title="Ortala">≡</button>
          <button type="button" class="btn-doc-tool" data-cmd="justifyRight" title="Sağa Hizala">⇢</button>
          <button type="button" class="btn-doc-tool" data-cmd="justifyFull" title="İki Yana Yasla">⇥⇤</button>
        </div>

        <div class="docs-tool-group">
          <button type="button" class="btn-doc-tool" data-cmd="insertUnorderedList" title="Madde İşaretleri">•≡</button>
          <button type="button" class="btn-doc-tool" data-cmd="insertOrderedList" title="Numaralı Liste">1≡</button>
        </div>

        <div class="docs-tool-group">
          <button type="button" class="btn-doc-tool" onclick="document.execCommand('insertHorizontalRule')" title="Ayırıcı Çizgi">—</button>
          <label class="btn-doc-tool" style="width: auto; padding: 0 8px; gap: 4px; font-size: 11.5px; cursor: pointer;" title="Word (.docx) veya Metin Belgesi Aç">
            📂 Aç
            <input type="file" id="docsQuickUploadInput" accept=".docx,.doc,.txt,.html,.md" style="display: none;">
          </label>
          <button type="button" class="btn-doc-tool" onclick="window.print()" title="Yazdır / PDF">🖨️</button>
        </div>
      </div>

      <!-- A4 Sayfa Düzeni Çalışma Alanı -->
      <div class="docs-page-viewport">
        <div class="docs-a4-sheet" id="docsA4Sheet" contenteditable="true" spellcheck="false">
          <h1>AAHaber 2026 Dijital Medya &amp; Strateji Raporu</h1>
          <p><strong>Yayınlayan:</strong> Editoryal Araştırma Masası &bull; <strong>Tarih:</strong> 25 Ekim 2026</p>
          <hr style="border: none; border-top: 1px solid #cbd5e1; margin: 18px 0;">
          
          <h2>1. Yönetici Özeti</h2>
          <p>Yeni nesil dijital haber platformlarında okuyucu etkileşimi, sadece haber metinlerini tüketmekle sınırlı kalmamaktadır. Ziyaretçilerin ihtiyaç duyduğu <strong>canlı borsa verileri, harita entegrasyonları, anında çoklu çeviri</strong> ve doğrudan tarayıcı üzerinden erişilebilen <strong>ofis ekosistemi (Univer)</strong> gibi katma değerli araçlar, sayfa sadakatini en üst noktaya taşımaktadır.</p>

          <h2>2. Univer Hepsi Bir Arada (All-in-One) Modül Avantajları</h2>
          <table>
            <thead>
              <tr style="background: #f1f5f9;">
                <th>Modül Adı</th>
                <th>Karşılık Gelen Araç</th>
                <th>Temel İşlevsellik</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><strong>Univer Sheets</strong></td>
                <td>Microsoft Excel</td>
                <td>Matematiksel formüller, sütun bazlı finansal analiz ve .xlsx aktarımı</td>
              </tr>
              <tr>
                <td><strong>Univer Docs</strong></td>
                <td>Microsoft Word</td>
                <td>Zengin metin işleme, A4 formatında raporlama ve anında PDF baskısı</td>
              </tr>
              <tr>
                <td><strong>Univer Slides</strong></td>
                <td>PowerPoint</td>
                <td>Geniş ekran (16:9) slayt tasarımı ve F5 ile canlı tam ekran sunum</td>
              </tr>
              <tr>
                <td><strong>Univer Boards</strong></td>
                <td>Miro / FigJam</td>
                <td>Sonsuz tuvalde serbest çizim, zihin haritaları ve yapışkan notlar</td>
              </tr>
            </tbody>
          </table>

          <h2>3. Sonuç ve Eylem Planı</h2>
          <p>Platformumuza entegre ettiğimiz Univer ofis modülü; yerel hafıza (LocalStorage) güvencesiyle kullanıcının yazdıklarını anında saklamakta, tarayıcı kapansa dahi verileri korumaktadır.</p>
        </div>
      </div>

      <!-- Alt Doküman Sayaç Çubuğu -->
      <footer class="docs-status-bar">
        <div style="display: flex; gap: 16px;">
          <span id="docsWordCount">142 kelime</span>
          <span id="docsCharCount">1.040 karakter</span>
          <span id="docsReadTime">~1 dk okuma</span>
        </div>
        <div><span>A4 Sayfa Düzeni &bull; %100 Görünüm</span></div>
      </footer>
    </div>

    <!-- ==================================================================
         MODÜL 3: 🔴 UNIVER SLIDES (POWERPOINT & SUNUM — FULL DONANIMLI)
         ================================================================== -->
    <div class="office-module-pane" id="pane-slides">
      
      <!-- Slayt Üst Araç Çubuğu -->
      <div class="slides-top-toolbar">
        <div class="slides-tool-group">
          <button type="button" class="btn-office-action" id="btnNewSlide" title="Yeni Slayt Ekle">
            <span>+ Yeni Slayt</span>
          </button>
          <button type="button" class="btn-office-action" id="btnDuplicateSlide" title="Seçili Slaytı Çoğalt">
            <span>📋 Çoğalt</span>
          </button>
          <button type="button" class="btn-office-action" id="btnDeleteSlide" title="Seçili Slaytı Sil">
            <span>🗑️ Sil</span>
          </button>
        </div>

        <div class="slides-tool-group">
          <label style="font-size: 11.5px; font-weight: 600; color: var(--text-muted);">Tema:</label>
          <select class="slides-select" id="slideThemeSelect" title="Slayt Renk Teması">
            <option value="corporate-blue">Kurumsal Lacivert</option>
            <option value="emerald-green">Zümrüt Yeşili</option>
            <option value="dark-slate">Gece Siyahı</option>
            <option value="minimal-light">Açık Minimal</option>
          </select>
        </div>

        <div class="slides-tool-group">
          <label style="font-size: 11.5px; font-weight: 600; color: var(--text-muted);">Düzen:</label>
          <select class="slides-select" id="slideLayoutSelect" title="Slayt Şablon Düzeni">
            <option value="title-slide">Başlık Slaytı</option>
            <option value="title-content" selected>Başlık ve İçerik</option>
            <option value="two-column">İki Sütunlu Karşılaştırma</option>
            <option value="blank">Boş Tuval</option>
          </select>
        </div>

        <div class="slides-tool-group">
          <button type="button" class="btn-office-action" onclick="window.aahaberSlideAddShape('rect')" title="Kutu / Kart Şekli Ekle">🔲 Kutu</button>
          <button type="button" class="btn-office-action" onclick="window.aahaberSlideAddShape('circle')" title="Daire Ekle">⭕ Daire</button>
          <button type="button" class="btn-office-action" onclick="window.aahaberSlideAddShape('arrow')" title="Yön Oku Ekle">➔ Ok</button>
          <button type="button" class="btn-office-action" onclick="window.aahaberSlideAddTextBox()" title="Yeni Metin Kutusu Ekle">📝 + Metin</button>
        </div>

        <div style="margin-left: auto;">
          <button type="button" class="btn-office-action btn-office-primary" id="btnStartPresentation" title="Tam Ekran Slayt Gösterisi (F5)">
            <span>▶ Canlı Sunumu Başlat (F5)</span>
          </button>
        </div>
      </div>

      <!-- Slayt Çalışma Alanı (Sol Küçük Resimler & Orta Tuval) -->
      <div class="slides-workspace-body">
        <!-- Sol Slayt Önizleme Listesi -->
        <aside class="slides-left-sidebar" id="slidesThumbList">
          <!-- JS Tarafından Slayt Minyatürleri Basılır -->
        </aside>

        <!-- Orta 16:9 Slayt Tuvali -->
        <div class="slides-main-canvas-area">
          <div class="slide-widescreen-frame" id="slideWidescreenFrame">
            <h1 class="slide-title-editable" id="slideTitleEditable" contenteditable="true" spellcheck="false">AAHaber 2026 Dijital Medya &amp; Ofis Vizyonu</h1>
            <div class="slide-content-editable" id="slideContentEditable" contenteditable="true" spellcheck="false">
              Yapay zeka destekli habercilik, anında çoklu çeviri motorları ve tarayıcı içi bağımsız ofis ekosistemi (Univer) ile yeni nesil haber ve üretkenlik deneyimi.
            </div>
            <div class="slide-shapes-container" id="slideShapesContainer"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- ==================================================================
         MODÜL 4: 🟣 UNIVER BOARDS (BEYAZ TAHTA - MIRO & FIGJAM — FULL DONANIMLI)
         ================================================================== -->
    <div class="office-module-pane" id="pane-boards">
      
      <!-- Sonsuz Tuval & Yapışkan Notlar -->
      <div class="boards-canvas-container" id="boardsCanvasContainer">
        
        <!-- Üst Yüzen Araç Çubuğu (Floating Toolbar) -->
        <div class="boards-floating-toolbar">
          <button type="button" class="btn-board-tool active" id="btnBoardToolSelect" title="Seçim ve Taşıma Modu (Hand / Pan)">✋ Taşı</button>
          
          <div class="board-tool-divider"></div>
          
          <!-- Not Ekleme ve Renk Seçimi -->
          <div style="display: flex; align-items: center; gap: 3px;">
            <button type="button" class="btn-board-tool" id="btnAddStickyNote" title="Sarı Yapışkan Not Ekle">📝 + Not</button>
            <button type="button" class="btn-board-color-dot dot-yellow active" onclick="window.aahaberSetStickyColor('yellow')" title="Sarı"></button>
            <button type="button" class="btn-board-color-dot dot-green" onclick="window.aahaberSetStickyColor('green')" title="Yeşil"></button>
            <button type="button" class="btn-board-color-dot dot-blue" onclick="window.aahaberSetStickyColor('blue')" title="Mavi"></button>
            <button type="button" class="btn-board-color-dot dot-pink" onclick="window.aahaberSetStickyColor('pink')" title="Pembe"></button>
            <button type="button" class="btn-board-color-dot dot-orange" onclick="window.aahaberSetStickyColor('orange')" title="Turuncu"></button>
          </div>

          <div class="board-tool-divider"></div>

          <!-- Akış Şeması Şekilleri -->
          <button type="button" class="btn-board-tool" onclick="window.aahaberBoardAddShape('process')" title="Süreç Kutusu (Dikdörtgen)">🔲 Süreç</button>
          <button type="button" class="btn-board-tool" onclick="window.aahaberBoardAddShape('decision')" title="Karar Düğümü (Baklava)">🔷 Karar</button>
          <button type="button" class="btn-board-tool" onclick="window.aahaberBoardAddShape('terminal')" title="Başlangıç / Bitiş">⭕ Başlat</button>
          <button type="button" class="btn-board-tool" onclick="window.aahaberBoardAddConnector()" title="Bağlantı Oku">➔ Ok</button>

          <div class="board-tool-divider"></div>

          <!-- Çizim Kalemi & Silgi -->
          <button type="button" class="btn-board-tool" id="btnBoardPen" onclick="window.aahaberBoardTogglePen()" title="Serbest Çizim Kalemi">✏️ Kalem</button>
          <button type="button" class="btn-board-tool" id="btnClearBoard" title="Tuvali Temizle">🗑️ Temizle</button>
          
          <div class="board-tool-divider"></div>

          <!-- Yakınlaştırma & Dışa Aktarma -->
          <button type="button" class="btn-board-tool" onclick="window.aahaberBoardZoom(-0.2)" title="Uzaklaştır">🔍 -</button>
          <span id="boardZoomLabel" style="font-size: 11.5px; font-weight: 700; min-width: 42px; text-align: center;">%100</span>
          <button type="button" class="btn-board-tool" onclick="window.aahaberBoardZoom(0.2)" title="Yakınlaştır">🔍 +</button>
          <button type="button" class="btn-board-tool" onclick="window.aahaberBoardExportPng()" title="Tuvali Resim (PNG) Olarak İndir">💾 İndir</button>
        </div>

        <!-- Serbest Çizim SVG Tuvali -->
        <svg class="boards-drawing-svg" id="boardsDrawingSvg"></svg>

        <!-- JS Tarafından Yapışkan Notlar ve Şekiller Buraya Basılır -->
      </div>
    </div>

    <!-- ==================================================================
         MODÜL 5: 🟢 UNIVER BASES (VERİTABANI & KANBAN — FULL DONANIMLI)
         ================================================================== -->
    <div class="office-module-pane" id="pane-bases">
      
      <!-- Üst Araç Çubuğu: Görünümler, Arama ve Filtre -->
      <div class="bases-toolbar">
        <div class="bases-view-selector" id="basesViewSelector">
          <button type="button" class="btn-base-view active" data-view="kanban">📌 Kanban Pano</button>
          <button type="button" class="btn-base-view" data-view="table">▦ Tablo / Grid Görünümü</button>
          <button type="button" class="btn-base-view" data-view="calendar">📅 Takvim Görünümü</button>
        </div>

        <div style="display: flex; align-items: center; gap: 8px; margin-left: auto;">
          <div class="bases-search-wrap">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
            <input type="text" id="basesSearchInput" placeholder="Kayıtlarda ara..." title="Görev veya kayıt ara">
          </div>
          <button type="button" class="btn-office-action" id="btnExportBasesData" onclick="window.aahaberExportBasesJson()" title="Veritabanını JSON olarak indir">
            <span>📥 Dışa Aktar</span>
          </button>
          <button type="button" class="btn-office-action btn-office-primary" id="btnAddKanbanCard">
            <span>+ Yeni Görev Ekle</span>
          </button>
        </div>
      </div>

      <!-- 1. GÖRÜNÜM: KANBAN PANO -->
      <div class="bases-view-container active" id="bases-view-kanban">
        <div class="bases-kanban-board">
          <!-- 1. Fikirler -->
          <div class="kanban-col">
            <div class="kanban-col-header">
              <span>💡 Fikirler &amp; Taslak</span>
              <span class="kanban-count" id="count-ideas">1</span>
            </div>
            <div class="kanban-cards-wrapper" id="kanban-col-ideas"></div>
          </div>

          <!-- 2. Yapılacak -->
          <div class="kanban-col">
            <div class="kanban-col-header">
              <span>📋 Yapılacaklar</span>
              <span class="kanban-count" id="count-todo">2</span>
            </div>
            <div class="kanban-cards-wrapper" id="kanban-col-todo"></div>
          </div>

          <!-- 3. Devam Ediyor -->
          <div class="kanban-col">
            <div class="kanban-col-header">
              <span>⚡ Devam Edenler</span>
              <span class="kanban-count" id="count-progress">2</span>
            </div>
            <div class="kanban-cards-wrapper" id="kanban-col-progress"></div>
          </div>

          <!-- 4. Tamamlandı -->
          <div class="kanban-col">
            <div class="kanban-col-header">
              <span>✅ Tamamlananlar</span>
              <span class="kanban-count" id="count-done">2</span>
            </div>
            <div class="kanban-cards-wrapper" id="kanban-col-done"></div>
          </div>
        </div>
      </div>

      <!-- 2. GÖRÜNÜM: AIRTABLE TARZI İLİŞKİSEL TABLO (GRID VIEW) -->
      <div class="bases-view-container" id="bases-view-table">
        <div class="bases-grid-table-wrap">
          <table class="bases-grid-table" id="basesGridTable">
            <thead>
              <tr>
                <th style="width: 40px;">#</th>
                <th style="width: 240px;">Görev / Kayıt Başlığı</th>
                <th style="width: 140px;">Aşama (Durum)</th>
                <th style="width: 130px;">Kategori</th>
                <th style="width: 120px;">Öncelik</th>
                <th style="width: 140px;">Sorumlu</th>
                <th style="width: 120px;">Son Tarih</th>
                <th style="width: 80px;">İşlem</th>
              </tr>
            </thead>
            <tbody id="basesGridTableBody">
              <!-- JS Doldurur -->
            </tbody>
          </table>
          <div style="padding: 12px; background: var(--bg-card-subtle); border-top: 1px solid var(--border-subtle);">
            <button type="button" class="btn-office-action" onclick="window.aahaberBasesAddRow()">+ Yeni Satır Ekle</button>
          </div>
        </div>
      </div>

      <!-- 3. GÖRÜNÜM: TAKVİM GÖRÜNÜMÜ (CALENDAR VIEW) -->
      <div class="bases-view-container" id="bases-view-calendar">
        <div class="bases-calendar-wrap" id="basesCalendarWrap">
          <!-- JS Doldurur -->
        </div>
      </div>

    </div>

    <!-- ==================================================================
         MODÜL 6: 🔴 UNIVER PDFS (PDF OKUYUCU & DÜZENLEYİCİ — FULL DONANIMLI)
         ================================================================== -->
    <div class="office-module-pane" id="pane-pdfs">
      
      <!-- PDF Üst Araç Çubuğu -->
      <div class="pdf-toolbar">
        <div style="display: flex; align-items: center; gap: 8px;">
          <label class="btn-office-action" style="cursor: pointer;" title="Bilgisayarınızdan Kendi PDF Belgenizi Yükleyin">
            <span>📁 PDF Dosyası Yükle</span>
            <input type="file" id="pdfUploadInput" accept="application/pdf" style="display: none;">
          </label>
          <button type="button" class="btn-office-action" onclick="window.aahaberPdfZoom(-0.15)" title="Uzaklaştır">🔍 -</button>
          <span id="pdfZoomText" style="font-size: 12px; font-weight: 700; min-width: 45px; text-align: center;">%100</span>
          <button type="button" class="btn-office-action" onclick="window.aahaberPdfZoom(0.15)" title="Yakınlaştır">🔍 +</button>
          <button type="button" class="btn-office-action" onclick="window.aahaberPdfRotate()" title="Sayfayı 90 Derece Döndür">🔄 Döndür</button>
        </div>

        <div style="display: flex; align-items: center; gap: 8px; margin-left: auto;">
          <button type="button" class="btn-office-action" id="btnPdfHighlight" onclick="window.aahaberPdfToggleHighlight()" title="Metin Vurgulayıcı">🖍️ Metin Vurgula</button>
          <button type="button" class="btn-office-action btn-office-primary" id="btnAddPdfSignature" title="Belgeye Resmi Dijital İmza Ekle">✍️ Dijital İmza Ekle</button>
          <button type="button" class="btn-office-action" onclick="window.print()" title="Yazdır veya PDF Olarak Kaydet">🖨️ Yazdır / Kaydet</button>
        </div>
      </div>

      <!-- PDF İki Sütunlu Çalışma Alanı: Sol Küçük Resimler & Sağ Sayfalar -->
      <div class="pdf-viewer-split-layout">
        
        <!-- Sol Sayfa Önizleme Kenar Çubuğu (Thumbnails) -->
        <aside class="pdf-thumbnails-sidebar">
          <div class="pdf-thumb-card active" onclick="window.aahaberPdfScrollToPage(1)">
            <span class="pdf-thumb-label">Sayfa 1</span>
            <div class="pdf-thumb-preview">
              <div style="font-size: 8px; font-weight: 800; text-align: center; margin-bottom: 4px;">DİJİTAL BASIN PROTOKOLÜ</div>
              <div style="font-size: 6px; line-height: 1.4; color: #64748b;">Madde 1: Taraflar ve Kapsam. Univer ofis ekosistemi veri güvenliği protokolü...</div>
            </div>
          </div>

          <div class="pdf-thumb-card" onclick="window.aahaberPdfScrollToPage(2)">
            <span class="pdf-thumb-label">Sayfa 2</span>
            <div class="pdf-thumb-preview">
              <div style="font-size: 8px; font-weight: 800; text-align: center; margin-bottom: 4px;">VERİ GÜVENLİĞİ</div>
              <div style="font-size: 6px; line-height: 1.4; color: #64748b;">Madde 2: İstemci tarafı yerel saklama ve uçtan uca şifreleme ilkeleri...</div>
            </div>
          </div>

          <div class="pdf-thumb-card" onclick="window.aahaberPdfScrollToPage(3)">
            <span class="pdf-thumb-label">Sayfa 3</span>
            <div class="pdf-thumb-preview">
              <div style="font-size: 8px; font-weight: 800; text-align: center; margin-bottom: 4px;">İMZA VE YÜRÜRLÜK</div>
              <div style="font-size: 6px; line-height: 1.4; color: #64748b;">Madde 3: Dijital onay damgası ve tarafların kurumsal imza onayları...</div>
            </div>
          </div>
        </aside>

        <!-- Sağ Ana PDF Sayfaları -->
        <div class="pdf-viewer-viewport" id="pdfViewerViewport">
          
          <!-- SAYFA 1 -->
          <div class="pdf-document-page" id="pdfPage1">
            <div style="text-align: center; border-bottom: 2px solid #0f172a; padding-bottom: 16px; margin-bottom: 24px;">
              <h1 style="font-size: 21px; font-weight: 900; margin: 0 0 6px;">T.C. DİJİTAL MEDYA VE YAYINCILIK SÖZLEŞMESİ</h1>
              <span style="font-size: 12px; color: #64748b;">Protokol No: AAH-2026-0981 &bull; Güvenlik Seviyesi: Onaylı Dijital Nüsha &bull; Sayfa 1 / 3</span>
            </div>

            <h3 style="font-size: 15px; font-weight: 700; margin-bottom: 8px; color: #1e3a8a;">MADDE 1: TARAFLAR VE SÖZLEŞMENİN KAPSAMI</h3>
            <p style="font-size: 13.5px; line-height: 1.8; color: #334155; margin-bottom: 16px;">İşbu protokol; <strong>aahaber.com Dijital Medya Grubu</strong> ile kurum bünyesinde Univer Ofis Programı (Sheets, Docs, Slides, Boards, Bases ve PDFs) ekosistemini kullanan kullanıcılar ve editörler arasındaki yasal kullanım, telif ve içerik yönetim ilkelerini belirler.</p>

            <h3 style="font-size: 15px; font-weight: 700; margin-bottom: 8px; color: #1e3a8a;">MADDE 2: OFİS PROGRAMLARI ENTEGRASYON STANDARTLARI</h3>
            <p style="font-size: 13.5px; line-height: 1.8; color: #334155; margin-bottom: 16px;">Sistemde oluşturulan tüm Excel tabloları, Word dökümanları ve interaktif sunumlar, uluslararası açık kaynak ve ISO/IEC 29500 (OpenXML) formatlarıyla %100 uyumlu olarak işlenmektedir.</p>
          </div>

          <!-- SAYFA 2 -->
          <div class="pdf-document-page" id="pdfPage2">
            <div style="text-align: center; border-bottom: 2px solid #0f172a; padding-bottom: 16px; margin-bottom: 24px;">
              <h2 style="font-size: 18px; font-weight: 800; margin: 0 0 6px;">VERİ GİZLİLİĞİ VE YEREL ŞİFRELEME ESASLARI</h2>
              <span style="font-size: 12px; color: #64748b;">Protokol No: AAH-2026-0981 &bull; Sayfa 2 / 3</span>
            </div>

            <h3 style="font-size: 15px; font-weight: 700; margin-bottom: 8px; color: #1e3a8a;">MADDE 3: VERİ GİZLİLİĞİ VE İSTEMCİ GÜVENLİĞİ</h3>
            <p style="font-size: 13.5px; line-height: 1.8; color: #334155; margin-bottom: 16px;">Kullanıcıların tarayıcı üzerinden oluşturduğu e-tablolar, dokümanlar, sunumlar ve çizimler istemci tarafında (Client-Side) ve tarayıcı hafızasında şifrelenerek muhafaza edilir. Harici sunuculara izinsiz veri sızdırılmaz.</p>

            <h3 style="font-size: 15px; font-weight: 700; margin-bottom: 8px; color: #1e3a8a;">MADDE 4: ÇOKLU CİHAZ VE OTOMATİK YEDEKLEME</h3>
            <p style="font-size: 13.5px; line-height: 1.8; color: #334155; margin-bottom: 16px;">Sistem her 5 saniyede bir otomatik anlık durum yedeklemesi gerçekleştirir. Tarayıcı veya sekme kapansa dahi en son yapılan değişiklikler korunur.</p>
          </div>

          <!-- SAYFA 3 -->
          <div class="pdf-document-page" id="pdfPage3">
            <div style="text-align: center; border-bottom: 2px solid #0f172a; padding-bottom: 16px; margin-bottom: 24px;">
              <h2 style="font-size: 18px; font-weight: 800; margin: 0 0 6px;">YÜRÜRLÜK VE DİJİTAL İMZA ONAY ALANI</h2>
              <span style="font-size: 12px; color: #64748b;">Protokol No: AAH-2026-0981 &bull; Sayfa 3 / 3</span>
            </div>

            <p style="font-size: 13.5px; line-height: 1.8; color: #334155; margin-bottom: 30px;">İşbu protokol taraflarca okunmuş, tüm koşulları eksiksiz kabul edilmiş ve aşağıda yer alan resmi dijital imza ve zaman damgasıyla yürürlüğe girmiştir.</p>

            <!-- İmza Bölgesi -->
            <div class="pdf-signature-block" id="pdfSignatureBlock">
              <div style="flex: 1;">
                <div style="font-weight: 700; font-size: 13px;">Kurumsal Temsilci</div>
                <div style="font-size: 12px; color: #64748b; margin-top: 4px;">aahaber Medya Teknolojileri A.Ş.</div>
                <div style="margin-top: 20px; font-family: 'Brush Script MT', cursive, sans-serif; font-size: 26px; color: #1e3a8a;">AAHaber Editoryal</div>
              </div>
              <div style="flex: 1; text-align: right;" id="pdfUserSigArea">
                <div style="font-weight: 700; font-size: 13px;">Dijital Doğrulama &amp; Kullanıcı Onayı</div>
                <div style="font-size: 12px; color: #64748b; margin-top: 4px;">Univer PDFs Güvenli İmza</div>
                <div id="pdfUserSigStamp" style="margin-top: 14px; display: inline-block; padding: 10px 18px; border: 2px dashed #059669; border-radius: 8px; background: rgba(5,150,105,0.06); color: #059669; font-weight: 800; font-size: 13px;">
                  ✓ AAHABER ONAYLI DİJİTAL İMZA
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>

  </main>
</div>

<!-- ======================================================================
     3. CANLI SUNUM MODU (FULLSCREEN PRESENTATION MODAL)
     ====================================================================== -->
<div class="presentation-fullscreen-modal" id="presentationFullscreenModal">
  <div class="presentation-slide-view" id="presSlideView">
    <!-- JS Tarafından Slayt Basılır -->
  </div>

  <div class="presentation-controls-bar">
    <button type="button" class="btn-pres-nav" onclick="document.dispatchEvent(new KeyboardEvent('keydown', {'key':'ArrowLeft'}))">◀ Önceki</button>
    <span id="presSlideCounter" style="font-weight: 700; font-size: 14px;">1 / 3</span>
    <button type="button" class="btn-pres-nav" onclick="document.dispatchEvent(new KeyboardEvent('keydown', {'key':'ArrowRight'}))">Sonraki ▶</button>
    <button type="button" class="btn-pres-nav" id="btnClosePresentation" style="margin-left: 14px; background: rgba(239,68,68,0.3); border: none; padding: 4px 10px; border-radius: 6px; color: #fff; cursor: pointer;">✕ Sunumdan Çık (Esc)</button>
  </div>
</div>

<!-- Toast Bildirim -->
<div class="office-toast" id="officeToast">
  <span id="officeToastIcon">✓</span>
  <span id="officeToastMsg">İşlem tamamlandı</span>
</div>

<?php
require_once __DIR__ . '/alt.php';
