# Paylaş Kutusu Parametre Seti Sistemi — Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Paylaş kutusuna hibrit (kod + DB) parametre seti grupları ekleyerek, Windows Start tile benzeri UI ile kullanıcıların içerik sayfalarına parametre şablonları seçmesini ve rol bazlı kısıtlama yapılmasını sağlamak.

**Architecture:** Yeni `IParametreSeti.interface.ts` interface dosyası, `parametre-seti-secici` standalone component (tile grid + navigasyon), ve `ikart-kutusu` entegrasyonu (input binding, sayfaSetMap signal, icerikEkle guard, taslak persist). Mevcut `ParametrelerComponent` ve `IParametre` altyapısı aynen kullanılır.

**Tech Stack:** Angular 20, Ng-Zorro, TypeScript signals/computed, mevcut `ParametrelerComponent`, `FikoYTKokBilesenComponent`

**Spec:** `docs/superpowers/specs/2026-03-14-paylas-kutusu-parametre-seti-design.md`

---

## File Structure

| Action | File | Responsibility |
|--------|------|----------------|
| Create | `src/service/fikoyt-ui/interfaces/IParametreSeti.interface.ts` | Interface tanımları: `IParametreSetiGrubu`, `IParametreSeti`, `ISayfaKurallari`, `ISetYetkiler` |
| Create | `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/parametre-seti-secici/parametre-seti-secici.component.ts` | Ana tile grid + alt grup navigasyonu + parametre render |
| Create | `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/parametre-seti-secici/parametre-seti-secici.component.html` | Template: tile grid, breadcrumb, parametre alanı |
| Create | `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/parametre-seti-secici/parametre-seti-secici.component.scss` | Tile kartları, animasyonlar, yetki stilleri |
| Modify | `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/ikart-kutusu.component.ts` | `parametreSetleri` input, `sayfaSetMap` signal, `icerikEkle` guard, taslak entegrasyonu, submission pipeline |
| Modify | `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/ikart-kutusu.component.html` | ⚙️ buton, parametre-seti-secici yerleşimi |
| Modify | `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/paylas-kutusu.component.ts` | `parametreSetleri` input pass-through |
| Modify | `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/paylas-kutusu.component.html` | Input binding to IKartComponent |

---

## Chunk 1: Interface Tanımları

### Task 1: IParametreSeti Interface Dosyası

**Files:**
- Create: `src/service/fikoyt-ui/interfaces/IParametreSeti.interface.ts`

- [ ] **Step 1: Interface dosyasını oluştur**

```typescript
// src/service/fikoyt-ui/interfaces/IParametreSeti.interface.ts
import { IParametre } from './IParametre/IParametre';

export interface ISetYetkiler {
  gorebilir?: string[];
  kullanabilir?: string[];
}

export interface ISayfaKurallari {
  yeniSayfaEngelle?: boolean;
  maxSayfa?: number;
}

/**
 * Yaprak parametre seti — seçildiğinde parametreleri gösterilir.
 */
export interface IParametreSeti {
  id: string;
  baslik: string;
  simge: string;
  aciklama?: string;
  parametreler: IParametre[];
  yetkiler?: ISetYetkiler;
  sayfaKurallari?: ISayfaKurallari;
  sira?: number;
}

/**
 * Üst grup — altGruplar varsa navigasyon grubu, yoksa yaprak set gibi davranır.
 * altGruplar varsa parametreler ignore edilir.
 */
export interface IParametreSetiGrubu {
  id: string;
  baslik: string;
  simge: string;
  renk?: string;
  aciklama?: string;
  altGruplar?: IParametreSeti[];
  parametreler?: IParametre[];
  yetkiler?: ISetYetkiler;
  kaynak: 'kod' | 'db';
  sira?: number;
}
```

- [ ] **Step 2: Derleme kontrolü**

Run: `cd D:/__sistem__/Masaustu/FikoYT.Yeni.Cag/fikoyt-sistem && npx tsc --noEmit src/service/fikoyt-ui/interfaces/IParametreSeti.interface.ts 2>&1 | head -20`
Expected: Hatasız veya sadece path alias uyarıları (proje seviyesinde normal)

- [ ] **Step 3: Commit**

```bash
git add src/service/fikoyt-ui/interfaces/IParametreSeti.interface.ts
git commit -m "feat(paylas-kutusu): IParametreSeti interface tanımları"
```

---

## Chunk 2: Parametre Seti Seçici Component

### Task 2: Component Oluştur — TypeScript

**Files:**
- Create: `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/parametre-seti-secici/parametre-seti-secici.component.ts`

- [ ] **Step 1: Component class'ını yaz**

```typescript
// parametre-seti-secici.component.ts
import { Component, ChangeDetectionStrategy, EventEmitter, Input, Output, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ParametrelerComponent } from '../../../../parametreler/parametreler.component';
import { IParametreSetiGrubu, IParametreSeti } from '@/src/service/fikoyt-ui/interfaces/IParametreSeti.interface';
import { IParametre } from '@/src/service/fikoyt-ui/interfaces/IParametre/IParametre';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

@Component({
  selector: 'parametre-seti-secici',
  standalone: true,
  imports: [CommonModule, ParametrelerComponent, NzToolTipModule],
  templateUrl: './parametre-seti-secici.component.html',
  styleUrls: ['./parametre-seti-secici.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ParametreSetiSeciciComponent {
  /** Tüm set grupları (kod + DB birleşik) */
  @Input() setler: IParametreSetiGrubu[] = [];

  /** Aktif sayfanın mevcut seçili set id'si */
  @Input() seciliSetId: string | null = null;

  /** Kullanıcının yetkileri — _uyeYetkiler listesi */
  @Input() kullaniciYetkileri: string[] = [];

  /** Set seçildiğinde emit eder: { setId, parametreler, sayfaKurallari } */
  @Output() setSecildi = new EventEmitter<{
    setId: string;
    parametreler: IParametre[];
    sayfaKurallari?: IParametreSeti['sayfaKurallari'];
  }>();

  /** Seçim kaldırıldığında emit eder */
  @Output() setKaldirildi = new EventEmitter<void>();

  /** Parametre değerleri değiştiğinde emit eder */
  @Output() parametrelerDegisti = new EventEmitter<IParametre[]>();

  // ── Navigasyon State ──
  readonly navigasyonYolu = signal<IParametreSetiGrubu[]>([]);
  readonly aktifAltGruplar = signal<IParametreSeti[] | null>(null);
  readonly seciliSet = signal<IParametreSeti | null>(null);

  // ── Animasyon ──
  animSinifi = '';

  // ── Computed ──
  readonly breadcrumb = computed(() =>
    this.navigasyonYolu().map(g => g.baslik)
  );

  readonly gosterilecekGruplar = computed(() => {
    if (this.aktifAltGruplar()) return null; // alt gruplardayız
    return this.setler.filter(g => this.gorunurMu(g.yetkiler));
  });

  // ═══ Yetki Kontrolleri ═══

  gorunurMu(yetkiler?: { gorebilir?: string[]; kullanabilir?: string[] }): boolean {
    if (!yetkiler?.gorebilir?.length) return true;
    return yetkiler.gorebilir.some(y => this.kullaniciYetkileri.includes(y));
  }

  kullanilabilirMi(yetkiler?: { gorebilir?: string[]; kullanabilir?: string[] }): boolean {
    if (!yetkiler?.kullanabilir?.length) return true;
    return yetkiler.kullanabilir.some(y => this.kullaniciYetkileri.includes(y));
  }

  // ═══ Navigasyon ═══

  grupTiklandi(grup: IParametreSetiGrubu) {
    if (!this.kullanilabilirMi(grup.yetkiler)) return;

    if (grup.altGruplar?.length) {
      // Alt gruplara in
      this.animSinifi = 'sayfa-cikis-sol';
      setTimeout(() => {
        this.navigasyonYolu.update(y => [...y, grup]);
        this.aktifAltGruplar.set(grup.altGruplar!.filter(s => this.gorunurMu(s.yetkiler)));
        this.animSinifi = 'sayfa-giris-sag';
        setTimeout(() => this.animSinifi = '', 300);
      }, 180);
    } else if (grup.parametreler?.length) {
      // Yaprak grup — direkt seçim
      this.setSecimYap({
        id: grup.id,
        baslik: grup.baslik,
        simge: grup.simge,
        parametreler: grup.parametreler,
        yetkiler: grup.yetkiler,
      });
    }
  }

  altSetTiklandi(set: IParametreSeti) {
    if (!this.kullanilabilirMi(set.yetkiler)) return;
    this.setSecimYap(set);
  }

  geriGit() {
    this.animSinifi = 'sayfa-cikis-sag';
    setTimeout(() => {
      this.navigasyonYolu.update(y => y.slice(0, -1));
      const ust = this.navigasyonYolu();
      if (ust.length > 0) {
        const sonGrup = ust[ust.length - 1];
        this.aktifAltGruplar.set(sonGrup.altGruplar?.filter(s => this.gorunurMu(s.yetkiler)) ?? null);
      } else {
        this.aktifAltGruplar.set(null);
      }
      this.animSinifi = 'sayfa-giris-sol';
      setTimeout(() => this.animSinifi = '', 300);
    }, 180);
  }

  // ═══ Set Seçimi ═══

  private setSecimYap(set: IParametreSeti) {
    // Deep clone parametreleri (değerleri sıfırlı)
    const parametreler: IParametre[] = JSON.parse(JSON.stringify(set.parametreler)).map((p: IParametre) => ({
      ...p,
      degeri: p.degeri ?? null,
    }));
    this.seciliSet.set(set);
    this.setSecildi.emit({
      setId: set.id,
      parametreler,
      sayfaKurallari: set.sayfaKurallari,
    });
  }

  secimKaldir() {
    this.seciliSet.set(null);
    this.setKaldirildi.emit();
  }

  onParametrelerDegisti(parametreler: IParametre[]) {
    this.parametrelerDegisti.emit(parametreler);
  }
}
```

- [ ] **Step 2: Commit**

```bash
git add src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/parametre-seti-secici/parametre-seti-secici.component.ts
git commit -m "feat(paylas-kutusu): parametre-seti-secici component class"
```

### Task 3: Component Template

**Files:**
- Create: `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/parametre-seti-secici/parametre-seti-secici.component.html`

- [ ] **Step 1: HTML template yaz**

```html
<div class="pss-wrapper">

  <!-- Breadcrumb -->
  @if (navigasyonYolu().length > 0) {
    <div class="pss-breadcrumb">
      <button class="pss-geri-btn" (click)="geriGit()">
        <i class="angle left icon"></i> Geri
      </button>
      <span class="pss-yol">
        @for (parca of breadcrumb(); track $index) {
          @if ($index > 0) { <span class="pss-yol-ayrac">/</span> }
          <span class="pss-yol-parca">{{ parca }}</span>
        }
      </span>
    </div>
  }

  <!-- Seçili set badge -->
  @if (seciliSet()) {
    <div class="pss-secili-badge">
      <span class="pss-secili-simge">{{ seciliSet()!.simge }}</span>
      <span class="pss-secili-baslik">{{ seciliSet()!.baslik }}</span>
      <button class="pss-secili-kaldir" (click)="secimKaldir()" title="Seçimi Kaldır">
        <i class="close icon"></i>
      </button>
    </div>
  }

  <!-- Tile Grid: Üst Gruplar -->
  @if (!aktifAltGruplar() && !seciliSet()) {
    <div class="pss-baslik">Parametre Seti Seçin</div>
    <div class="pss-tile-grid" [ngClass]="animSinifi">
      @for (grup of gosterilecekGruplar(); track grup.id; let i = $index) {
        <button class="pss-tile"
                [class.disabled]="!kullanilabilirMi(grup.yetkiler)"
                [class.secili]="seciliSetId === grup.id"
                [style.--tile-renk]="grup.renk || 'linear-gradient(135deg, #1e3a5f, #1677ff)'"
                [style.animation-delay.ms]="i * 60"
                [nz-tooltip]="kullanilabilirMi(grup.yetkiler) ? grup.aciklama : 'Yetkiniz yok'"
                (click)="grupTiklandi(grup)">
          <div class="pss-tile-ust">
            <span class="pss-tile-simge">{{ grup.simge }}</span>
          </div>
          <div class="pss-tile-alt">
            <span class="pss-tile-baslik">{{ grup.baslik }}</span>
            @if (grup.altGruplar?.length) {
              <span class="pss-tile-ok">→</span>
            }
          </div>
          @if (seciliSetId === grup.id) {
            <span class="pss-tile-secili-badge">✓</span>
          }
        </button>
      }
    </div>
  }

  <!-- Tile Grid: Alt Setler -->
  @if (aktifAltGruplar() && !seciliSet()) {
    <div class="pss-tile-grid" [ngClass]="animSinifi">
      @for (set of aktifAltGruplar(); track set.id; let i = $index) {
        <button class="pss-tile"
                [class.disabled]="!kullanilabilirMi(set.yetkiler)"
                [class.secili]="seciliSetId === set.id"
                [style.animation-delay.ms]="i * 60"
                [nz-tooltip]="kullanilabilirMi(set.yetkiler) ? set.aciklama : 'Yetkiniz yok'"
                (click)="altSetTiklandi(set)">
          <div class="pss-tile-ust">
            <span class="pss-tile-simge">{{ set.simge }}</span>
          </div>
          <div class="pss-tile-alt">
            <span class="pss-tile-baslik">{{ set.baslik }}</span>
          </div>
          @if (seciliSetId === set.id) {
            <span class="pss-tile-secili-badge">✓</span>
          }
        </button>
      }
    </div>
  }

  <!-- Seçili Setin Parametreleri -->
  @if (seciliSet()) {
    <div class="pss-parametreler anim-kaydir-asagi">
      <fikoyt-parametreler
        [(parametreler)]="seciliSet()!.parametreler"
        (parametrelerChange)="onParametrelerDegisti($event)">
      </fikoyt-parametreler>
    </div>
  }

</div>
```

- [ ] **Step 2: Commit**

```bash
git add src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/parametre-seti-secici/parametre-seti-secici.component.html
git commit -m "feat(paylas-kutusu): parametre-seti-secici template"
```

### Task 4: Component Styles

**Files:**
- Create: `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/parametre-seti-secici/parametre-seti-secici.component.scss`

- [ ] **Step 1: SCSS stilleri yaz**

```scss
.pss-wrapper {
  padding: 8px;
}

// ── Breadcrumb ──
.pss-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--py-metin-ikincil, #666);
}

.pss-geri-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--py-kenarlik, #d9d9d9);
  border-radius: 6px;
  background: var(--py-arkaplan, #fff);
  color: var(--py-metin, #333);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;

  &:hover {
    border-color: #1677ff;
    color: #1677ff;
  }
}

.pss-yol-ayrac {
  margin: 0 2px;
  opacity: 0.4;
}

.pss-yol-parca {
  font-weight: 500;
}

// ── Başlık ──
.pss-baslik {
  font-size: 13px;
  font-weight: 600;
  color: var(--py-metin, #333);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;

  &::before {
    content: '⚙️';
  }
}

// ── Seçili Badge ──
.pss-secili-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #e6f4ff, #bae0ff);
  border: 1px solid #91caff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #0958d9;
  margin-bottom: 10px;
  animation: pss-pulse 2s infinite;
}

.pss-secili-simge {
  font-size: 14px;
}

.pss-secili-kaldir {
  background: none;
  border: none;
  cursor: pointer;
  color: #0958d9;
  opacity: 0.6;
  padding: 0 2px;
  font-size: 10px;

  &:hover { opacity: 1; }
}

// ── Tile Grid ──
.pss-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pss-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 1px solid var(--py-kenarlik, #e8e8e8);
  border-radius: 10px;
  background: var(--py-arkaplan, #fff);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  animation: pss-tile-giris 0.35s ease-out both;

  &:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border-color: #1677ff;
  }

  &:active:not(.disabled) {
    transform: scale(0.96);
  }

  &.disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  &.secili {
    border-color: #1677ff;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
  }
}

.pss-tile-ust {
  width: 100%;
  padding: 14px 8px 8px;
  background: var(--tile-renk, linear-gradient(135deg, #1e3a5f, #1677ff));
  display: flex;
  justify-content: center;
}

.pss-tile-simge {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.pss-tile-alt {
  padding: 8px 6px;
  text-align: center;
  width: 100%;
}

.pss-tile-baslik {
  font-size: 12px;
  font-weight: 600;
  color: var(--py-metin, #333);
  line-height: 1.3;
}

.pss-tile-ok {
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.5;
}

.pss-tile-secili-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: #1677ff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  animation: pss-pulse 2s infinite;
}

// ── Parametreler ──
.pss-parametreler {
  padding-top: 8px;
  border-top: 1px solid var(--py-kenarlik, #e8e8e8);
}

// ── Animasyonlar ──
@keyframes pss-tile-giris {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pss-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(22, 119, 255, 0); }
}

// Sayfa geçiş animasyonları (mevcut paylaş kutusu ile uyumlu)
.sayfa-cikis-sol {
  animation: pss-cikis-sol 0.18s ease-in forwards;
}
.sayfa-giris-sag {
  animation: pss-giris-sag 0.3s ease-out forwards;
}
.sayfa-cikis-sag {
  animation: pss-cikis-sag 0.18s ease-in forwards;
}
.sayfa-giris-sol {
  animation: pss-giris-sol 0.3s ease-out forwards;
}

@keyframes pss-cikis-sol {
  to { opacity: 0; transform: translateX(-30px); }
}
@keyframes pss-giris-sag {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pss-cikis-sag {
  to { opacity: 0; transform: translateX(30px); }
}
@keyframes pss-giris-sol {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

// ── Karanlık Mod ──
:host-context(.tema-karanlik), :host-context(.hmi-karanlik) {
  .pss-tile {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .pss-tile-baslik { color: #e0e0e0; }
  .pss-baslik { color: #e0e0e0; }
  .pss-geri-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ccc;
  }
  .pss-secili-badge {
    background: linear-gradient(135deg, rgba(22, 119, 255, 0.15), rgba(22, 119, 255, 0.25));
    border-color: rgba(22, 119, 255, 0.4);
  }
}
```

- [ ] **Step 2: Commit**

```bash
git add src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/parametre-seti-secici/parametre-seti-secici.component.scss
git commit -m "feat(paylas-kutusu): parametre-seti-secici styles"
```

---

## Chunk 3: IKart Kutusu Entegrasyonu

### Task 5: ikart-kutusu.component.ts — State ve Logic

**Files:**
- Modify: `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/ikart-kutusu.component.ts`

- [ ] **Step 1: Import ekle**

Dosyanın başına ekle:

```typescript
import { ParametreSetiSeciciComponent } from './parametre-seti-secici/parametre-seti-secici.component';
import { IParametreSetiGrubu, IParametreSeti } from '@/src/service/fikoyt-ui/interfaces/IParametreSeti.interface';
import { IParametre } from '@/src/service/fikoyt-ui/interfaces/IParametre/IParametre';
import { signal, computed } from '@angular/core';
```

`imports` array'ine `ParametreSetiSeciciComponent` ekle.

- [ ] **Step 2: Yeni Input/State ekle**

Class'a ekle (mevcut `@Input() kart` altına):

```typescript
/** Hibrit parametre seti grupları (kod tarafı) */
@Input() parametreSetleri: IParametreSetiGrubu[] = [];

/** Her sayfanın seçili set id'si: sayfaIndex → setId */
readonly sayfaSetMap = signal<Map<number, string>>(new Map());

/** Her sayfanın seçili parametreleri: sayfaIndex → IParametre[] */
readonly sayfaParametreMap = signal<Map<number, IParametre[]>>(new Map());

/** Parametre seti seçici paneli açık mı */
parametreSetiPaneliAcik = false;

/** Aktif sayfanın set kuralları */
get aktifSayfaKurallari(): IParametreSeti['sayfaKurallari'] | null {
  const setId = this.sayfaSetMap().get(this.aktifIcerikNo);
  if (!setId) return null;
  // Tüm setlerde ara (düz + nested)
  for (const grup of this.parametreSetleri) {
    if (grup.id === setId) return null; // grup seviyesinde kural yok
    for (const alt of (grup.altGruplar ?? [])) {
      if (alt.id === setId) return alt.sayfaKurallari ?? null;
    }
  }
  return null;
}

/** Aktif sayfanın seçili set id'si */
get aktifSayfaSetId(): string | null {
  return this.sayfaSetMap().get(this.aktifIcerikNo) ?? null;
}
```

- [ ] **Step 3: icerikEkle() guard ekle**

Mevcut `icerikEkle` metodunu güncelle:

```typescript
icerikEkle(ek: any = null) {
  // Sayfa kuralları kontrolü
  const kurallar = this.aktifSayfaKurallari;
  if (kurallar?.yeniSayfaEngelle) return;
  if (kurallar?.maxSayfa && (this.kart?.veri?.icerikler?.length ?? 0) >= kurallar.maxSayfa) return;

  this.kart?.veri?.icerikler?.push({ _id: this.FikoYT.fikoIdUret(), aciklama: '', html: '', ek: ek, sifre: null }) ?? 1 - 1;
  this.taslakKaydet();
}
```

- [ ] **Step 4: Set seçim handler ekle**

Class'a ekle:

```typescript
onSetSecildi(olay: { setId: string; parametreler: IParametre[]; sayfaKurallari?: any }) {
  this.sayfaSetMap.update(m => {
    const yeni = new Map(m);
    yeni.set(this.aktifIcerikNo, olay.setId);
    return yeni;
  });
  this.sayfaParametreMap.update(m => {
    const yeni = new Map(m);
    yeni.set(this.aktifIcerikNo, olay.parametreler);
    return yeni;
  });
  // Kartın parametrelerine yaz
  if (!this.kart.parametreler) this.kart.parametreler = [];
  this.kart.parametreler = olay.parametreler;
  this.parametreleriGoster = true;
  this.taslakKaydet();
  this.CD.detectChanges();
}

onSetKaldirildi() {
  this.sayfaSetMap.update(m => {
    const yeni = new Map(m);
    yeni.delete(this.aktifIcerikNo);
    return yeni;
  });
  this.sayfaParametreMap.update(m => {
    const yeni = new Map(m);
    yeni.delete(this.aktifIcerikNo);
    return yeni;
  });
  this.kart.parametreler = [];
  this.taslakKaydet();
  this.CD.detectChanges();
}

onSetParametrelerDegisti(parametreler: IParametre[]) {
  this.sayfaParametreMap.update(m => {
    const yeni = new Map(m);
    yeni.set(this.aktifIcerikNo, parametreler);
    return yeni;
  });
  this.kart.parametreler = parametreler;
  this.taslakKaydet();
}
```

- [ ] **Step 5: Taslak sistemi güncelle**

`taslakKaydet()` içindeki `taslakVeri`'ye ekle:

```typescript
const taslakVeri = {
  veri: this.kart.veri,
  gizlilik: this.kart.gizlilik,
  etiketler: this.kart.etiketler,
  kisiler: this.kart.kisiler,
  parametreler: this.kart.parametreler,
  tarih: new Date().toISOString(),
  // Parametre seti seçimleri
  _sayfaSetMap: Object.fromEntries(this.sayfaSetMap()),
  _sayfaParametreMap: Object.fromEntries(
    Array.from(this.sayfaParametreMap().entries()).map(([k, v]) => [k, JSON.parse(JSON.stringify(v))])
  ),
};
```

`taslakYukle()` içine ekle (mevcut `this.taslakMevcut = false;` satırından önce):

```typescript
if (taslak._sayfaSetMap) {
  this.sayfaSetMap.set(new Map(Object.entries(taslak._sayfaSetMap).map(([k, v]) => [Number(k), v as string])));
}
if (taslak._sayfaParametreMap) {
  this.sayfaParametreMap.set(new Map(
    Object.entries(taslak._sayfaParametreMap).map(([k, v]) => [Number(k), v as IParametre[]])
  ));
}
```

- [ ] **Step 6: Submission pipeline güncelle**

`paylasTiklandi()` içinde, `formData.append("req_body", ...)` satırından önce:

```typescript
// Parametre seti seçimlerini karta ekle
if (this.sayfaSetMap().size > 0) {
  kart.veri._parametreSetleri = Object.fromEntries(this.sayfaSetMap());
}
```

- [ ] **Step 7: Commit**

```bash
git add src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/ikart-kutusu.component.ts
git commit -m "feat(paylas-kutusu): ikart-kutusu parametre seti state, guard, taslak entegrasyonu"
```

### Task 6: ikart-kutusu.component.html — UI

**Files:**
- Modify: `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/ikart-kutusu.component.html`

- [ ] **Step 1: ⚙️ buton ekle — meta butonlarının yanına**

Mevcut `<button class="circular ui basic icon tiny button anim-buton" (click)="tiklandiMenu()"` butonunun **önüne** ekle:

```html
@if (parametreSetleri?.length) {
  <button class="circular ui basic icon tiny button anim-buton"
          [class.active]="parametreSetiPaneliAcik"
          (click)="parametreSetiPaneliAcik = !parametreSetiPaneliAcik; CD.detectChanges();"
          title="Parametre Setleri"
          style="margin-left: 4px;padding: 3px;">
    <i class="blue cog icon"></i>
  </button>
}
```

- [ ] **Step 2: Parametre seti seçici paneli ekle — sayfa-gecis-alani'ndan ÖNCE**

Mevcut `<div class="sayfa-gecis-alani"` satırından hemen **önce** ekle:

```html
<!-- Parametre Seti Seçici -->
@if (parametreSetiPaneliAcik && parametreSetleri?.length) {
  <div class="anim-kaydir-asagi" style="margin-bottom: 8px;">
    <parametre-seti-secici
      [setler]="parametreSetleri"
      [seciliSetId]="aktifSayfaSetId"
      [kullaniciYetkileri]="FikoYT.kimlik.aktifKullaniciJson()?._uyeYetkiler ?? []"
      (setSecildi)="onSetSecildi($event)"
      (setKaldirildi)="onSetKaldirildi()"
      (parametrelerDegisti)="onSetParametrelerDegisti($event)">
    </parametre-seti-secici>
  </div>
}
```

- [ ] **Step 3: Sayfa ekle butonuna guard ekle**

Mevcut sayfa ekle butonunu güncelle — `(click)="icerikEkle();..."` olan butona ekstra kontrol:

```html
<div class="circular ui icon blue mini button anim-buton sayfa-ekle-btn"
     nz-wave
     title="Sayfa Ekle"
     [class.disabled]="aktifSayfaKurallari?.yeniSayfaEngelle || (aktifSayfaKurallari?.maxSayfa && kart?.veri?.icerikler?.length >= aktifSayfaKurallari?.maxSayfa)"
     (click)="icerikEkle();aktifIcerikNo=kart?.veri.icerikler.length;CD.detectChanges();">
    <i class="plus icon"></i>
</div>
```

- [ ] **Step 4: Commit**

```bash
git add src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/IKart/ikart-kutusu.component.html
git commit -m "feat(paylas-kutusu): ikart-kutusu template - set secici panel ve guard UI"
```

### Task 7: Wrapper Component Pass-Through

**Files:**
- Modify: `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/paylas-kutusu.component.ts`
- Modify: `src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/paylas-kutusu.component.html`

- [ ] **Step 1: paylas-kutusu.component.ts'e input ekle**

```typescript
import { IParametreSetiGrubu } from '@/src/service/fikoyt-ui/interfaces/IParametreSeti.interface';

// Class'a ekle:
@Input() parametreSetleri: IParametreSetiGrubu[] = [];
```

- [ ] **Step 2: paylas-kutusu.component.html'de binding ekle**

IKartComponent kullanılan yerde `[parametreSetleri]="parametreSetleri"` binding'i ekle.

- [ ] **Step 3: Derleme kontrolü**

Run: `cd D:/__sistem__/Masaustu/FikoYT.Yeni.Cag/fikoyt-sistem && npx ng build --configuration development 2>&1 | tail -30`
Expected: Build başarılı veya sadece mevcut hint'ler

- [ ] **Step 4: Commit**

```bash
git add src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/paylas-kutusu.component.ts
git add src/service/fikoyt-ui/src/lib/paylasim-sistemi/paylas-kutusu/paylas-kutusu.component.html
git commit -m "feat(paylas-kutusu): wrapper component parametreSetleri pass-through"
```

---

## Chunk 4: Entegrasyon Testi — Projeler Sayfası

### Task 8: Projeler Servisinde Örnek Parametre Seti Tanımla

**Files:**
- Modify: `src/app/uygulamalar/uyar-dokum/projeler/projeler.service.ts`

- [ ] **Step 1: Örnek parametre seti ekle**

Servis class'ına ekle:

```typescript
import { IParametreSetiGrubu } from '@/src/service/fikoyt-ui/interfaces/IParametreSeti.interface';

readonly parametreSetleri: IParametreSetiGrubu[] = [
  {
    id: 'uyar.proje',
    baslik: 'Projeler',
    simge: '📁',
    renk: 'linear-gradient(135deg, #7c2d12, #fa8c16)',
    kaynak: 'kod',
    altGruplar: [
      {
        id: 'uyar.proje.kategori',
        baslik: 'Kategori',
        simge: '📂',
        parametreler: [
          { turu: 'Yazı', ismi: 'kategoriAdi', baslik: 'Kategori Adı', ayarlar: { zorunlu: true } },
          { turu: 'Renk', ismi: 'renk', baslik: 'Renk' },
          { turu: 'Açılır Kutu', ismi: 'oncelik', baslik: 'Öncelik', ayarlar: { secenekler: ['Düşük', 'Normal', 'Yüksek', 'Kritik'] } },
        ],
      },
      {
        id: 'uyar.proje.ekle',
        baslik: 'Ekle',
        simge: '➕',
        parametreler: [
          { turu: 'Yazı', ismi: 'projeAdi', baslik: 'Proje Adı', ayarlar: { zorunlu: true } },
          { turu: 'Yazı Alanı', ismi: 'aciklama', baslik: 'Açıklama' },
          { turu: 'Tarih', ismi: 'baslangic', baslik: 'Başlangıç Tarihi' },
          { turu: 'Tarih', ismi: 'bitis', baslik: 'Bitiş Tarihi' },
        ],
        sayfaKurallari: { yeniSayfaEngelle: true },
      },
    ],
  },
  {
    id: 'uyar.basit-not',
    baslik: 'Basit Not',
    simge: '📋',
    renk: 'linear-gradient(135deg, #064e3b, #52c41a)',
    kaynak: 'kod',
    parametreler: [
      { turu: 'Yazı', ismi: 'baslik', baslik: 'Not Başlığı' },
      { turu: 'Açılır Kutu', ismi: 'kategori', baslik: 'Kategori', ayarlar: { secenekler: ['Genel', 'Acil', 'Bilgi', 'Hatırlatma'] } },
    ],
  },
];
```

- [ ] **Step 2: Projeler template'inde binding ekle**

Projeler sayfasında `<fikoyt-paylas-kutusu>` kullanılan yerde:

```html
<fikoyt-paylas-kutusu
  [kart]="servisProjeler.kart"
  [parametreSetleri]="servisProjeler.parametreSetleri"
  (paylasimYapildi)="listeIstek.isteSync();"
  style="max-width: 520px;width: 100%;">
</fikoyt-paylas-kutusu>
```

- [ ] **Step 3: Derleme ve görsel test**

Run: `cd D:/__sistem__/Masaustu/FikoYT.Yeni.Cag/fikoyt-sistem && npx ng build --configuration development 2>&1 | tail -20`

Manuel test:
1. Projeler sayfasına git
2. Paylaş kutusunda ⚙️ butonunu gör
3. Tıkla → tile grid göster
4. "Projeler" tıkla → alt setler (Kategori, Ekle)
5. "Kategori" seç → parametreler göster
6. Geri git → üst gruplara dön
7. "Basit Not" tıkla → direkt parametreler
8. "Ekle" seçiliyken sayfa ekleme butonu disabled olmalı

- [ ] **Step 4: Commit**

```bash
git add src/app/uygulamalar/uyar-dokum/projeler/projeler.service.ts
git commit -m "feat(projeler): örnek parametre seti tanımları ile entegrasyon testi"
```