@if (!icerik?.sifre && icerik?.sifre!=''){
<button class="mb-1"
        nz-button
        nzType="text"
        nzBlock
        [class.fiko-kilit]="!lisans('icerik_sifre')"
        (click)="sifreKilitle()">🔒 İçeriği
    Kilitle</button>
} @else {
<nz-input-wrapper nzPrefix="🔒"
                class="flex-1 w-full mb-1"
                nzSize="small">
    <input  placeholder="İçerik Şifresi" nz-input nzSize="small" type="password" [(ngModel)]="icerik.sifre" autocomplete="new-password" aria-autocomplete="none" />
    <button nz-button
            nzType="text"
            nzShape="circle"
            nzSize="small"
            (click)="icerik.sifre=null;CD.detectChanges();">❌</button>
</nz-input-wrapper>

}

@if (dinamikBilesenId) {
  <div style="display:flex;align-items:center;gap:6px;margin:6px 0 4px;">
    <button type="button" class="ui basic mini button" style="font-size:11px;padding:4px 10px;"
            (click)="icerik.ek = null; dinamikBilesenId = null; CD.detectChanges();">
      <i class="angle left icon" style="margin:0 4px 0 0;"></i> Geri
    </button>
  </div>
  <dinamik-bilesen
    [bilesenId]="dinamikBilesenId"
    [gorunum]="'paylas_kutusu'"
    [(parametreler)]="dinamikParametreler"
  />
}

@if (!icerik?.ek && !saltOkunur && !sayfaKurallari?.icerikEngelle){
<div style="border: 1px gray dashed;text-align: center;margin-bottom: 0.5rem;"
     class="border-round-xs">
    @if (!sayfaKurallari?.dosyaEngelle) {
    <button type="button"
            class="ui circular blue mini icon button"
            title="Dosya Ekle"
            (click)="fikoEkInput.value='';CD.detectChanges();fikoEkInput.click();"
            style="margin: 5px;">
        <i class="plus icon" style="margin: unset;"></i>
    </button>
    }

    @if (!sayfaKurallari?.mikrofonEngelle) {
    <button type="button"
            class="ui circular mini icon button mikrofon-btn"
            [class.kayit-aktif]="mikrofonKayitAktif"
            [class.red]="mikrofonKayitAktif"
            [class.blue]="!mikrofonKayitAktif"
            [class.fiko-kilit]="!lisans('ses_kayit')"
            (click)="mikrofonTiklandi()"
            [title]="mikrofonKayitAktif ? 'Kaydı durdur' : 'Ses Kaydet'"
            style="margin: 5px;">
        @if (mikrofonKayitAktif) {
            <i class="stop icon" style="margin: unset;"></i>
        } @else {
            <i class="microphone icon" style="margin: unset;"></i>
        }
    </button>
    }

    @if (!sayfaKurallari?.uyarDokumEngelle) {
    <button type="button"
            (click)="icerik.ek = uyarEkle();CD.detectChanges();"
            class="ui circular blue mini icon button"
            title="Firmaya Özel Custom Kart"
            [class.fiko-kilit]="!lisans('firma_custom_kart')"
            style="margin: 5px;">
        <i class="windows icon" style="margin: unset;"></i>
    </button>
    }

    @if (parametreSetleri?.length > 0) {
    <button type="button"
            class="ui circular blue mini icon button"
            title="Uygulama İçeriği"
            [class.fiko-kilit]="!lisans('parametreli')"
            (click)="uygulamaIcerikEkle()"
            style="margin: 5px;">
        <i class="th icon" style="margin: unset;"></i>
    </button>
    }

    @if (!sayfaKurallari?.youtubeEngelle) {
    <button type="button"
            class="ui circular blue mini icon button"
            title="YouTube Video"
            [class.fiko-kilit]="!lisans('youtube')"
            (click)="icerik.ek = youtubeEkle();CD.detectChanges();"
            style="margin: 5px;">
        <i class="youtube icon" style="margin: unset;"></i>
    </button>
    }

    @if (!sayfaKurallari?.konumEngelle) {
    <button type="button"
            class="ui circular blue mini icon button"
            title="Konum Paylaş"
            [class.fiko-kilit]="!lisans('konum')"
            (click)="konumEkle()"
            style="margin: 5px;">
        <i class="map marker alternate icon" style="margin: unset;"></i>
    </button>
    }

</div>

<!-- Mikrofon kayıt göstergesi -->
@if (mikrofonKayitAktif) {
<div class="mikrofon-kayit-bar">
    <span class="kayit-nokta"></span>
    <span class="kayit-sure">{{ mikrofonSureFormat() }}</span>
    <span class="kayit-bilgi">Kaydediliyor...</span>
    <button type="button" class="ui mini red icon button" style="padding:4px 8px;" (click)="mikrofonIptal()">
        <i class="trash icon" style="margin:0;"></i>
    </button>
</div>
}

<!-- Mikrofon kayıt sonrası seçenekler -->
@if (mikrofonMenuGoster) {
<div class="mikrofon-menu-bar">
    <div class="mikrofon-oynatici">
        <button type="button" class="oynat-btn" (click)="onizlemeOynatDurdur()">
            @if (onizlemeOynuyor) {
                <i class="pause icon" style="margin:0;"></i>
            } @else {
                <i class="play icon" style="margin:0;"></i>
            }
        </button>
        <div class="oynatici-cubuk" (click)="onizlemeCubukTiklandi($event)">
            <div class="oynatici-ilerleme" [style.width.%]="onizlemeIlerleme"></div>
        </div>
        <span class="oynatici-sure">{{ mikrofonSureFormat() }}</span>
    </div>
    <div class="mikrofon-butonlar">
        <button type="button" class="ui mini green icon button" title="Ses Olarak Ekle" (click)="mikrofonSesEkle()">
            <i class="file audio outline icon" style="margin:0;"></i>
        </button>
        <button type="button" class="ui mini blue icon button" title="Yazıya Çevir"
                [class.loading]="whisperYukleniyor" [disabled]="whisperYukleniyor"
                [class.fiko-kilit]="!lisans('whisper')"
                (click)="mikrofonYaziyaCevir()">
            <i class="closed captioning outline icon" style="margin:0;"></i>
        </button>
        <button type="button" class="ui mini teal icon button" title="Ses Ekle + Yazıya Çevir"
                [class.loading]="whisperYukleniyor" [disabled]="whisperYukleniyor"
                [class.fiko-kilit]="!lisans('whisper')"
                (click)="mikrofonIkisiBirden()">
            <i class="magic icon" style="margin:0;"></i>
        </button>
        <button type="button" class="ui mini red icon button" title="İptal" (click)="mikrofonIptal()">
            <i class="trash icon" style="margin:0;"></i>
        </button>
    </div>
</div>
}

}
<!-- NOT: İçerikler Burada Yer Alıcak -->
<input #fikoEkInput type='file' (change)="secildiDosya($event)" style="display: none;">

<div class="medya p-shadow-6"
     #medyaIcerik
     [style.height]="(icerik?.ek?.dosya || icerik?.ek?.dosyaObjectUrl || icerik?.ek?.turu === 'EKREFERANS' || icerik?.ek?.turu === 'KONUM') ? '25rem':'unset'">


    <!-- NOT:  İçerik Resim -->
    @if(icerik?.ek?.turu === 'RESIM'){
    <div class="icerik-resim" [class.yuz-etiket-modu]="yuzEtiketModuAktif">

        <img #Deneme
             [src]="icerik?.ek?.dosyaObjectUrl"
             (load)="resimYuklendi($event)"
             (click)="tiklandiSiniflandir($event)" />

        <!-- Yüz etiket katmanı: gerçek resim alanı üzerine konumlanır -->
        @if (resimAlani && (icerik?.ek?.yuzEtiketGosterim !== 'kapali' || yuzEtiketModuAktif) && (icerik?.ek?.yuzEtiketleri?.length || bekleyenEtiket || yuzEtiketModuAktif || duzenlenenEtiketId)) {
        <div class="yuz-etiket-katman"
             [class.etiket-modu-aktif]="yuzEtiketModuAktif"
             [style.left.%]="resimAlani.left" [style.top.%]="resimAlani.top"
             [style.width.%]="resimAlani.width" [style.height.%]="resimAlani.height"
             (click)="katmanTiklandi($event)">

            @if (icerik?.ek?.yuzEtiketleri?.length) {
            <div class="yuz-etiketleri-kaplama" [class.gosterim-hover]="(icerik.ek.yuzEtiketGosterim || 'hover') === 'hover'" [class.gosterim-surekli]="icerik.ek.yuzEtiketGosterim === 'surekli'">
                @for (etiket of icerik.ek.yuzEtiketleri; track etiket.id + '-' + $index) {
                <div class="yuz-etiketi-cerceve" [class.etiket-aktif]="acikBalonEtiketId === etiket.id || duzenlenenEtiketId === etiket.id" [style.left.%]="etiket.x" [style.top.%]="etiket.y" [style.width.%]="etiket.w" [style.height.%]="etiket.h">
                    @if (!saltOkunur) {
                    <div class="cerceve-tasima-alani" (mousedown)="cerceveTasimaBasla($event, etiket.id)"></div>
                    }
                    <span class="cerceve-etiket" style="cursor:pointer;"
                          nz-popover [nzPopoverContent]="(duzenlenenEtiketId === etiket.id) ? duzenlemeTpl : balonTpl"
                          nzPopoverTrigger="click" nzPopoverPlacement="top" [nzPopoverBackdrop]="true"
                          [nzPopoverVisible]="!lightboxAcik && (acikBalonEtiketId === etiket.id || duzenlenenEtiketId === etiket.id)"
                          (nzPopoverVisibleChange)="popoverGorunurlukDegisti($event, etiket)"
                          [nzPopoverOverlayClassName]="(duzenlenenEtiketId === etiket.id) ? '' : 'yuz-balon-popover'"
                          (click)="etiketTiklandi(etiket);$event.stopPropagation();">{{ etiket.kisiIsmi }}</span>
                    @if (!saltOkunur) {
                    <div class="cerceve-sil-btn" (click)="yuzEtiketSil(etiket.id);$event.stopPropagation();" title="Etiketi Sil"><i class="close icon" style="margin:0;font-size:0.6em;"></i></div>
                    <div class="cerceve-tutamac nw" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'nw')"></div>
                    <div class="cerceve-tutamac ne" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'ne')"></div>
                    <div class="cerceve-tutamac sw" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'sw')"></div>
                    <div class="cerceve-tutamac se" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'se')"></div>
                    }
                </div>
                }
            </div>
            }

            @if (bekleyenEtiket && !lightboxAcik) {
            <div class="yuz-etiketi-cerceve bekleyen"
                 nz-popover [nzPopoverContent]="aramaTpl" [nzPopoverTrigger]="null"
                 [nzPopoverVisible]="true" nzPopoverPlacement="bottom"
                 [style.left.%]="bekleyenEtiket.x" [style.top.%]="bekleyenEtiket.y" [style.width.%]="bekleyenEtiket.w" [style.height.%]="bekleyenEtiket.h">
                <div class="cerceve-tasima-alani" (mousedown)="bekleyenCerceveTasimaBasla($event)"></div>
                <div class="cerceve-tutamac nw" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'nw')"></div>
                <div class="cerceve-tutamac ne" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'ne')"></div>
                <div class="cerceve-tutamac sw" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'sw')"></div>
                <div class="cerceve-tutamac se" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'se')"></div>
            </div>
            }

        </div>
        }

        <!-- Otomatik Yüz Tespiti Katmanı (AI) - Editör -->
        @if (resimAlani && (editorOtomatikYuzler?.length || editorYuzTespitYukleniyor)) {
        <div class="yuz-etiket-katman otomatik-yuz-katman"
             [style.left.%]="resimAlani.left" [style.top.%]="resimAlani.top"
             [style.width.%]="resimAlani.width" [style.height.%]="resimAlani.height">

            @if (editorYuzTespitYukleniyor) {
            <div class="otomatik-yuz-yukleniyor">
                <i class="spinner loading icon"></i> Yüzler tespit ediliyor...
            </div>
            }

            @for (yuz of editorOtomatikYuzler; track yuz.id; let i = $index) {
            <div class="otomatik-yuz-cerceve"
                 [class.aktif]="editorOtomatikYuzAktifIdx === i"
                 [style.left.%]="yuz.x" [style.top.%]="yuz.y" [style.width.%]="yuz.w" [style.height.%]="yuz.h">
                <span class="otomatik-yuz-etiket"
                      nz-popover [nzPopoverContent]="editorOtomatikAramaTpl" nzPopoverTrigger="click" nzPopoverPlacement="bottom"
                      [nzPopoverVisible]="editorOtomatikYuzAktifIdx === i"
                      (nzPopoverVisibleChange)="!$event && editorOtomatikYuzAktifIdx === i ? editorOtomatikYuzAktifIdx = null : null; CD.detectChanges();"
                      (click)="editorOtomatikYuzAktifIdx = (editorOtomatikYuzAktifIdx === i ? null : i);CD.detectChanges();$event.stopPropagation();">
                    @if (yuz.enYakinEslesme) { {{ yuz.enYakinEslesme.ad }} <small>{{ (1 - yuz.enYakinEslesme.mesafe) * 100 | number:'1.0-0' }}%</small> }
                    @if (!yuz.enYakinEslesme) { ? }
                </span>
                <div class="otomatik-yuz-butonlar">
                    @if (yuz.enYakinEslesme) {
                    <button class="otomatik-btn onayla" title="Onayla"
                            (click)="editorOtomatikYuzHizliOnayla(i);$event.stopPropagation();">✓</button>
                    }
                    <button class="otomatik-btn reddet" title="Reddet"
                            (click)="editorOtomatikYuzReddet(i);$event.stopPropagation();">✕</button>
                </div>
                <ng-template #editorOtomatikAramaTpl>
                    <div (click)="$event.stopPropagation();" (mousedown)="$event.stopPropagation();">
                        <input class="yuz-etiket-input" placeholder="Kişi adı..." [ngModel]="editorOtomatikYuzAramaMetni"
                               (ngModelChange)="editorOtomatikYuzAra($event);"
                               (keydown.enter)="editorOtomatikYuzOnayla(i, {ismi: editorOtomatikYuzAramaMetni})" autofocus />
                        @if (yuz.eslesmeler?.length || editorOtomatikYuzAramaSonuclari.length) {
                        <div class="yuz-etiket-sonuclar">
                            @for (eslesme of yuz.eslesmeler; track eslesme.kisi_id) {
                            <div class="yuz-etiket-sonuc" (click)="editorOtomatikYuzOnayla(i, {ismi: eslesme.ad, _id: eslesme.kisi_id});">
                                <i class="user icon" style="color:#1890ff;margin:0;"></i>
                                <span>{{ eslesme.ad }}</span>
                                <small style="color:#52c41a;margin-left:auto;font-size:0.65em;font-weight:600;">{{ (1 - eslesme.mesafe) * 100 | number:'1.0-0' }}%</small>
                            </div>
                            }
                            @for (sonuc of editorOtomatikYuzAramaSonuclari; track sonuc._id) {
                            <div class="yuz-etiket-sonuc" (click)="editorOtomatikYuzOnayla(i, {ismi: sonuc.ismi, _id: sonuc._id, kaynak: sonuc.kaynak, soyagaciKisiId: sonuc.soyagaciKisiId});">
                                @if (sonuc.kaynak === 'soyagaci' && sonuc.resimUrl) { <img [src]="sonuc.resimUrl" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" /> }
                                @if (sonuc.kaynak === 'soyagaci' && !sonuc.resimUrl) { <i class="sitemap icon" style="color:#52c41a;margin:0;"></i> }
                                @if (sonuc.kaynak !== 'soyagaci') { <img [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + sonuc._id + '.profilResmi?boyut=40x?'" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" /> }
                                <span>{{ sonuc.ismi }}</span>
                                @if (sonuc.kaynak === 'soyagaci') { <small style="color:#52c41a;margin-left:auto;font-size:0.7em;">Aile</small> }
                            </div>
                            }
                        </div>
                        }
                        <div style="display:flex;gap:4px;margin-top:4px;">
                            <button class="ui mini green button" style="padding:4px 8px;" (click)="editorOtomatikYuzOnayla(i, {ismi: editorOtomatikYuzAramaMetni || yuz.enYakinEslesme?.ad || 'Bilinmeyen'});">Kaydet</button>
                            <button class="ui mini button" style="padding:4px 8px;" (click)="editorOtomatikYuzReddet(i);">Iptal</button>
                        </div>
                    </div>
                </ng-template>
            </div>
            }
        </div>
        }

        @if( !saltOkunur){
        <!-- Yüz etiketleme toggle -->
        <button type="button"
                class="circular ui icon button yuz-etiket-toggle-btn"
                [class.active]="yuzEtiketModuAktif"
                [class.yellow]="yuzEtiketModuAktif"
                [class.basic]="!yuzEtiketModuAktif"
                [class.fiko-kilit]="!yuzEtiketModuAktif && !lisans('yuz_etiket')"
                title="Yüz Etiketle"
                (click)="yuzEtiketModuToggle();$event.stopPropagation();">
            <i class="user icon" style="margin:0;"></i>
        </button>
        <!-- Gösterim modu toggle -->
        @if (icerik?.ek?.yuzEtiketleri?.length) {
        <button type="button"
                class="circular ui icon button yuz-gosterim-toggle-btn"
                [title]="'Gösterim: ' + (icerik.ek.yuzEtiketGosterim || 'hover')"
                (click)="yuzEtiketGosterimDegistir();$event.stopPropagation();">
            <i class="eye icon" style="margin:0;"></i>
        </button>
        }
        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>
        }
        <button type="button"
                title="Tam Ekran"
                class="circular ui icon blue button tam-ekran-buton"
                (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button>

        <span class="dosya-boyutu">
            @if (icerik?.ek?.orijinalBoyut) {
                {{okunabilirBoyut(icerik?.ek?.orijinalBoyut)}} → {{okunabilirBoyut(icerik?.ek?.boyut)}}
            } @else {
                {{okunabilirBoyut(icerik?.ek?.boyut)}}
            }
        </span>

        <span class="dosya-turu">
            <i class="camera icon ekreferans-ikon-pulse"></i> Resim
        </span>

        @if (!saltOkunur) {
        <button type="button"
                class="circular ui icon button ek-konum-buton"
                [class.green]="icerik?.ek?.konum"
                [class.basic]="!icerik?.ek?.konum"
                [title]="icerik?.ek?.konum?.yerIsmi || 'Konum Ekle'"
                (click)="ekKonumSec()">
            <i class="map marker alternate icon"></i>
        </button>
        }
        @if (icerik?.ek?.konum?.yerIsmi) {
        <span class="ek-konum-etiket">
            <i class="map marker alternate icon"></i> {{ icerik.ek.konum.yerIsmi }}
            @if (!saltOkunur) {
            <i class="close icon ek-konum-sil"
               nz-popconfirm nzPopconfirmTitle="Konum silinsin mi?" nzOkText="Evet" nzCancelText="İptal" nzOkDanger
               (nzOnConfirm)="icerik.ek.konum=null;CD.detectChanges();"></i>
            }
        </span>
        }

        <!-- Liste modu: etiketli kişiler -->
        @if (icerik?.ek?.yuzEtiketGosterim === 'liste' && icerik?.ek?.yuzEtiketleri?.length) {
        <div class="yuz-etiket-liste">
            @for (etiket of icerik.ek.yuzEtiketleri; track etiket.id + '-' + $index) {
            <span class="yuz-etiket-liste-item">
                @if (etiket.kisiId) {
                <img [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + etiket.kisiId + '.profilResmi?boyut=40x?'" class="yuz-etiket-profil" />
                }
                {{ etiket.kisiIsmi }}
            </span>
            }
        </div>
        }
    </div>
    }
    <!-- NOT:  İçerik Video -->
    @if(icerik?.ek?.turu === 'VIDEO'){
    <div class="icerik-video">

        <video controls
               [src]="icerik?.ek?.dosyaObjectUrl"></video>

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <button type="button"
                title="Tam Ekran"
                class="circular ui icon blue button tam-ekran-buton"
                (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button>

        <span class="dosya-boyutu">{{okunabilirBoyut(icerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="film icon ekreferans-ikon-spin"></i> Video
        </span>

        @if (!saltOkunur) {
        <button type="button"
                class="circular ui icon button ek-konum-buton"
                [class.green]="icerik?.ek?.konum"
                [class.basic]="!icerik?.ek?.konum"
                [title]="icerik?.ek?.konum?.yerIsmi || 'Konum Ekle'"
                (click)="ekKonumSec()">
            <i class="map marker alternate icon"></i>
        </button>
        }
        @if (icerik?.ek?.konum?.yerIsmi) {
        <span class="ek-konum-etiket">
            <i class="map marker alternate icon"></i> {{ icerik.ek.konum.yerIsmi }}
            @if (!saltOkunur) {
            <i class="close icon ek-konum-sil"
               nz-popconfirm nzPopconfirmTitle="Konum silinsin mi?" nzOkText="Evet" nzCancelText="İptal" nzOkDanger
               (nzOnConfirm)="icerik.ek.konum=null;CD.detectChanges();"></i>
            }
        </span>
        }
    </div>
    }
    <!-- NOT:  İçerik Ses -->
    @if(icerik?.ek?.turu === 'SES'){
    <div class="icerik-ses">

        <fikoyt-fiko-ses-oynatici [duraklatildi]="aktifMedya!=icerik?.ek?.id"
                                  (duraklatildiChange)="!$event ? aktifMedya=icerik?.ek?.id:aktifMedya=null;FikoYT.degisti.emit();"
                                  [url]="icerik?.ek?.dosyaObjectUrl">
        </fikoyt-fiko-ses-oynatici>
        <!-- <video *ngIf="icerik?.ek?.dosyaObjectUrl"
               controls
               [src]="icerik?.ek?.dosyaObjectUrl"></video> -->

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <button type="button"
                title="Tam Ekran"
                class="circular ui icon blue button tam-ekran-buton"
                (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button>


        <span class="dosya-boyutu">{{okunabilirBoyut(icerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="music icon ekreferans-ikon-bounce"></i> Ses
        </span>

        @if (!saltOkunur && !icerik?.ek?.transkript) {
        <button type="button"
                title="Yazıya Çevir (Whisper)"
                class="circular ui icon blue button"
                style="position:absolute;right:0;top:50%;transform:translateY(-50%);"
                [class.loading]="whisperYukleniyor"
                [disabled]="whisperYukleniyor"
                (click)="sesEkiTranskript()">
            <i class="closed captioning outline icon"></i>
        </button>
        }
    </div>
    @if (icerik?.ek?.transkript) {
    <div class="ses-transkript">
        <i class="closed captioning outline icon"></i>
        <span>{{ icerik.ek.transkript }}</span>
    </div>
    }
    }
    <!-- NOT:  İçerik Dosya -->
    @if(icerik?.ek?.turu === 'DOSYA'){
    <div class="icerik-dosya">

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <div class="ui right green labeled animated fade icon button mini dosya-buton"
             style="vertical-align: top;">
            <div class="visible content">
                {{ icerik?.ek?.ismi }}
            </div>
            <div class="hidden content">
                {{okunabilirBoyut(icerik?.ek?.boyut)}}
            </div>
            <i class="download icon"></i>
        </div>

        <span class="dosya-boyutu">{{okunabilirBoyut(icerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="file icon ekreferans-ikon-pulse"></i> Dosya
        </span>

        <!-- 🪶 3D (STP/WRL) dosya: gömülü önizleme kartı + kalıcı çekilmiş görüntü -->
        @if (icerik?.ek?.ismi?.endsWith('.stp') || icerik?.ek?.ismi?.endsWith('.step') || icerik?.ek?.ismi?.endsWith('.wrl') || icerik?.ek?.ismi?.endsWith('.FikoWrl')) {
        <div class="icerik-stp-alan">
                    <fikoyt-stp-onizleme-karti
                [dosyaId]="icerik?.ek?._id"
                [resimUrl]="icerik?.ek?.resimid ? (FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.' + icerik.ek.resimid + '.resim?boyut=400x?&t=0') : null"
                [fotoCekebilir]="!saltOkunur"
                [yukseklik]="220"
                (fotografYuklendi)="stpFotografYuklendi($event, icerik)">
            </fikoyt-stp-onizleme-karti>
        </div>
        }

        @if (!saltOkunur) {
        <button type="button"
                class="circular ui icon button ek-konum-buton"
                [class.green]="icerik?.ek?.konum"
                [class.basic]="!icerik?.ek?.konum"
                [title]="icerik?.ek?.konum?.yerIsmi || 'Konum Ekle'"
                (click)="ekKonumSec()">
            <i class="map marker alternate icon"></i>
        </button>
        }
        @if (icerik?.ek?.konum?.yerIsmi) {
        <span class="ek-konum-etiket">
            <i class="map marker alternate icon"></i> {{ icerik.ek.konum.yerIsmi }}
            @if (!saltOkunur) {
            <i class="close icon ek-konum-sil"
               nz-popconfirm nzPopconfirmTitle="Konum silinsin mi?" nzOkText="Evet" nzCancelText="İptal" nzOkDanger
               (nzOnConfirm)="icerik.ek.konum=null;CD.detectChanges();"></i>
            }
        </span>
        }
    </div>
    }
    <!-- NOT:  Youtube -->
    @if(icerik?.ek?.turu === 'YOUTUBE'){
    <div class="icerik-youtube">

        @if (icerik?.ek?.yid) {
        <div class="youtubevid ui embed"
             data-source="youtube"
             [attr.data-id]="icerik?.ek?.yid"
             data-icon="video"
             [attr.data-placeholder]="'https://img.youtube.com/vi/' + icerik?.ek?.yid  +'/0.jpg'"></div>
        }

        @if (!icerik?.ek?.yid) {
        <div class="ui input">
            <input type="text" #inputyid (keydown.enter)="icerik.ek = youtubeEkle(inputyid.value);CD.detectChanges();"
                placeholder="Youtube Video Kimliği">
        </div>
        }

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <button type="button"
                title="Tam Ekran"
                class="circular ui icon blue button tam-ekran-buton"
                (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button>
    </div>
    }

    <!-- NOT:  FikoGL 3d -->
    @if(icerik?.ek?.turu=='FIKOGL' || icerik?.ek?.turu=='FIKOGLS' || icerik?.ek?.turu=='FIKOOPGL'||
    icerik?.ek?.turu=='FIKOOPGLv1'){
    <div class="icerik-fikogl">

        <img [src]="icerik.ek.resimObjectUrl ? icerik.ek.resimObjectUrl:'./resimler/3d-printer.png'" />

        @if (!saltOkunur){
        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>
        }
        <button type="button"
                title="Resim Çek"
                class="circular ui icon blue button"
                style="position: absolute;right: 50%;bottom: 0;color: white;transform: translateX(50%);"
                (click)="tiklandiFikoGL(icerik.ek.dosya, true)">
            <i class="camera retro icon"></i>
        </button>

        <button class="circular ui icon blue mini button  tam-ekran-buton"
                title="FikoGL İle Aç"
                (click)="tiklandiFikoGL(icerik.ek.dosya)"
                style="padding: 5px !important;">
            <img src="./simgeler/3d.png"
                 style="width: 22px !important; height: 22px; object-fit: contain;">
        </button>

        <span class="dosya-boyutu">{{okunabilirBoyut(icerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="cube icon ekreferans-ikon-spin"></i> 3D
        </span>

    </div>
    }

    <!-- NOT:  Referans -->
    @if(icerik?.ek?.turu === 'REFERANS'){
    <div class="icerik-referans">

        @if (icerik?.ek?.rid) {
            @if (referansKartYukleniyor) {
                <div style="padding: 10px; text-align: center; color: var(--py-metin-ucuncul);">
                    <i class="spinner loading icon"></i> Referans kart yükleniyor...
                </div>
            }
            <!-- Dinamik FikoYTKartKokComponent buraya yüklenir -->
            <ng-container #referansKonteynir></ng-container>
        }

        @if (!icerik?.ek?.rid) {
        <div class="ui input">
            <input type="text" #inputrid (keydown.enter)="icerik.ek = referansEkle(inputrid.value);CD.detectChanges();"
                placeholder="Kart Referans Kimliği">
        </div>
        }

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <!-- <button type="button" title="Tam Ekran" class="circular ui icon primary button tam-ekran-buton"
            (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button> -->
    </div>
    }

    <!-- NOT:  UYAR DOKUM -->
    @if(icerik?.ek?.turu === 'UYARDOKUM'){
    <div class="icerik-uyar mb-3">

        <paylas-uyar-kutusu class="pb-3" #PaylasUyarKutusu [(kart)]="kart"
                            [(icerik)]="icerik"
                            [(rota)]="icerik.ek.rota" ></paylas-uyar-kutusu>

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <!-- <button type="button" title="Tam Ekran" class="circular ui icon primary button tam-ekran-buton"
            (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button> -->
    </div>
    }

    <!-- NOT:  Ek Referans (sunucudan gelen medya referansı) -->
    @if(icerik?.ek?.turu === 'EKREFERANS'){
    <div class="icerik-ekreferans">

        <!-- Resim referansı -->
        @if (icerik?.ek?.bilgiler?.orijinalTuru === 'RESIM') {
        <div class="icerik-resim" [class.yuz-etiket-modu]="yuzEtiketModuAktif">
            <img [src]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.' + icerik.ek._id + '.resim?boyut=760x?&t=0'"
                 (load)="resimYuklendi($event)"
                 (click)="tiklandiSiniflandir($event)" />

            <!-- Yüz etiket katmanı: gerçek resim alanı üzerine konumlanır (EKREFERANS) -->
            @if (resimAlani && (icerik?.ek?.yuzEtiketGosterim !== 'kapali' || yuzEtiketModuAktif) && (icerik?.ek?.yuzEtiketleri?.length || bekleyenEtiket || yuzEtiketModuAktif || duzenlenenEtiketId)) {
            <div class="yuz-etiket-katman"
                 [class.etiket-modu-aktif]="yuzEtiketModuAktif"
                 [style.left.%]="resimAlani.left" [style.top.%]="resimAlani.top"
                 [style.width.%]="resimAlani.width" [style.height.%]="resimAlani.height"
                 (click)="katmanTiklandi($event)">

                @if (icerik?.ek?.yuzEtiketleri?.length) {
                <div class="yuz-etiketleri-kaplama" [class.gosterim-hover]="(icerik.ek.yuzEtiketGosterim || 'hover') === 'hover'" [class.gosterim-surekli]="icerik.ek.yuzEtiketGosterim === 'surekli'">
                    @for (etiket of icerik.ek.yuzEtiketleri; track etiket.id + '-' + $index) {
                    <div class="yuz-etiketi-cerceve" [class.etiket-aktif]="acikBalonEtiketId === etiket.id || duzenlenenEtiketId === etiket.id" [style.left.%]="etiket.x" [style.top.%]="etiket.y" [style.width.%]="etiket.w" [style.height.%]="etiket.h"
                         [style.cursor]="!saltOkunur ? 'move' : 'default'" (mousedown)="!saltOkunur ? cerceveTasimaBasla($event, etiket.id) : null">
                        <span class="cerceve-etiket" style="cursor:pointer;"
                              nz-popover [nzPopoverContent]="(duzenlenenEtiketId === etiket.id) ? duzenlemeTpl : balonTpl"
                              nzPopoverTrigger="click" nzPopoverPlacement="top" [nzPopoverBackdrop]="true"
                              [nzPopoverVisible]="!lightboxAcik && (acikBalonEtiketId === etiket.id || duzenlenenEtiketId === etiket.id)"
                              (nzPopoverVisibleChange)="popoverGorunurlukDegisti($event, etiket)"
                              [nzPopoverOverlayClassName]="(duzenlenenEtiketId === etiket.id) ? '' : 'yuz-balon-popover'"
                              (click)="etiketTiklandi(etiket);$event.stopPropagation();">{{ etiket.kisiIsmi }}</span>
                        @if (!saltOkunur) {
                        <div class="cerceve-sil-btn" (click)="yuzEtiketSil(etiket.id);$event.stopPropagation();" title="Etiketi Sil"><i class="close icon" style="margin:0;font-size:0.6em;"></i></div>
                        <div class="cerceve-tutamac nw" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'nw')"></div>
                        <div class="cerceve-tutamac ne" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'ne')"></div>
                        <div class="cerceve-tutamac sw" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'sw')"></div>
                        <div class="cerceve-tutamac se" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'se')"></div>
                        }
                    </div>
                    }
                </div>
                }

                @if (bekleyenEtiket && !lightboxAcik) {
                <div class="yuz-etiketi-cerceve bekleyen"
                     nz-popover [nzPopoverContent]="aramaTpl" [nzPopoverTrigger]="null"
                     [nzPopoverVisible]="true" nzPopoverPlacement="bottom"
                     [style.left.%]="bekleyenEtiket.x" [style.top.%]="bekleyenEtiket.y" [style.width.%]="bekleyenEtiket.w" [style.height.%]="bekleyenEtiket.h">
                    <div class="cerceve-tutamac nw" (mousedown)="bekleyenCerceveBoyutlandirBasla($event, 'nw')"></div>
                    <div class="cerceve-tutamac ne" (mousedown)="bekleyenCerceveBoyutlandirBasla($event, 'ne')"></div>
                    <div class="cerceve-tutamac sw" (mousedown)="bekleyenCerceveBoyutlandirBasla($event, 'sw')"></div>
                    <div class="cerceve-tutamac se" (mousedown)="bekleyenCerceveBoyutlandirBasla($event, 'se')"></div>
                </div>
                }

            </div>
            }

            <!-- Otomatik Yüz Tespiti Katmanı (AI) - EKREFERANS -->
            @if (resimAlani && (editorOtomatikYuzler?.length || editorYuzTespitYukleniyor)) {
            <div class="yuz-etiket-katman otomatik-yuz-katman"
                 [style.left.%]="resimAlani.left" [style.top.%]="resimAlani.top"
                 [style.width.%]="resimAlani.width" [style.height.%]="resimAlani.height">

                @if (editorYuzTespitYukleniyor) {
                <div class="otomatik-yuz-yukleniyor">
                    <i class="spinner loading icon"></i> Yüzler tespit ediliyor...
                </div>
                }

                @for (yuz of editorOtomatikYuzler; track yuz.id; let i = $index) {
                <div class="otomatik-yuz-cerceve"
                     [class.aktif]="editorOtomatikYuzAktifIdx === i"
                     [style.left.%]="yuz.x" [style.top.%]="yuz.y" [style.width.%]="yuz.w" [style.height.%]="yuz.h">
                    <span class="otomatik-yuz-etiket"
                          nz-popover [nzPopoverContent]="editorOtomatikAramaTplRef" nzPopoverTrigger="click" nzPopoverPlacement="bottom"
                          [nzPopoverVisible]="editorOtomatikYuzAktifIdx === i"
                          (nzPopoverVisibleChange)="!$event && editorOtomatikYuzAktifIdx === i ? editorOtomatikYuzAktifIdx = null : null; CD.detectChanges();"
                          (click)="editorOtomatikYuzAktifIdx = (editorOtomatikYuzAktifIdx === i ? null : i);CD.detectChanges();$event.stopPropagation();">
                        @if (yuz.enYakinEslesme) { {{ yuz.enYakinEslesme.ad }} <small>{{ (1 - yuz.enYakinEslesme.mesafe) * 100 | number:'1.0-0' }}%</small> }
                        @if (!yuz.enYakinEslesme) { ? }
                    </span>
                    <div class="otomatik-yuz-butonlar">
                        @if (yuz.enYakinEslesme) {
                        <button class="otomatik-btn onayla" title="Onayla"
                                (click)="editorOtomatikYuzHizliOnayla(i);$event.stopPropagation();">✓</button>
                        }
                        <button class="otomatik-btn reddet" title="Reddet"
                                (click)="editorOtomatikYuzReddet(i);$event.stopPropagation();">✕</button>
                    </div>
                    <ng-template #editorOtomatikAramaTplRef>
                        <div (click)="$event.stopPropagation();" (mousedown)="$event.stopPropagation();">
                            <input class="yuz-etiket-input" placeholder="Kişi adı..." [ngModel]="editorOtomatikYuzAramaMetni"
                                   (ngModelChange)="editorOtomatikYuzAra($event);"
                                   (keydown.enter)="editorOtomatikYuzOnayla(i, {ismi: editorOtomatikYuzAramaMetni})" autofocus />
                            @if (yuz.eslesmeler?.length || editorOtomatikYuzAramaSonuclari.length) {
                            <div class="yuz-etiket-sonuclar">
                                @for (eslesme of yuz.eslesmeler; track eslesme.kisi_id) {
                                <div class="yuz-etiket-sonuc" (click)="editorOtomatikYuzOnayla(i, {ismi: eslesme.ad, _id: eslesme.kisi_id});">
                                    <i class="user icon" style="color:#1890ff;margin:0;"></i>
                                    <span>{{ eslesme.ad }}</span>
                                    <small style="color:#52c41a;margin-left:auto;font-size:0.65em;font-weight:600;">{{ (1 - eslesme.mesafe) * 100 | number:'1.0-0' }}%</small>
                                </div>
                                }
                                @for (sonuc of editorOtomatikYuzAramaSonuclari; track sonuc._id) {
                                <div class="yuz-etiket-sonuc" (click)="editorOtomatikYuzOnayla(i, {ismi: sonuc.ismi, _id: sonuc._id, kaynak: sonuc.kaynak, soyagaciKisiId: sonuc.soyagaciKisiId});">
                                    @if (sonuc.kaynak === 'soyagaci' && sonuc.resimUrl) { <img [src]="sonuc.resimUrl" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" /> }
                                    @if (sonuc.kaynak === 'soyagaci' && !sonuc.resimUrl) { <i class="sitemap icon" style="color:#52c41a;margin:0;"></i> }
                                    @if (sonuc.kaynak !== 'soyagaci') { <img [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + sonuc._id + '.profilResmi?boyut=40x?'" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" /> }
                                    <span>{{ sonuc.ismi }}</span>
                                    @if (sonuc.kaynak === 'soyagaci') { <small style="color:#52c41a;margin-left:auto;font-size:0.7em;">Aile</small> }
                                </div>
                                }
                            </div>
                            }
                            <div style="display:flex;gap:4px;margin-top:4px;">
                                <button class="ui mini green button" style="padding:4px 8px;" (click)="editorOtomatikYuzOnayla(i, {ismi: editorOtomatikYuzAramaMetni || yuz.enYakinEslesme?.ad || 'Bilinmeyen'});">Kaydet</button>
                                <button class="ui mini button" style="padding:4px 8px;" (click)="editorOtomatikYuzReddet(i);">Iptal</button>
                            </div>
                        </div>
                    </ng-template>
                </div>
                }
            </div>
            }
        </div>
        }

        <!-- Video referansı -->
        @if (icerik?.ek?.bilgiler?.orijinalTuru === 'VIDEO') {
        <div class="icerik-video">
            <video controls
                   [src]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.' + icerik.ek._id + '.dosya'"></video>
        </div>
        }

        <!-- Ses referansı -->
        @if (icerik?.ek?.bilgiler?.orijinalTuru === 'SES') {
        <div class="icerik-ses">
            <fikoyt-fiko-ses-oynatici [duraklatildi]="aktifMedya!=icerik?.ek?.id"
                                      (duraklatildiChange)="!$event ? aktifMedya=icerik?.ek?.id:aktifMedya=null;FikoYT.degisti.emit();"
                                      [url]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.' + icerik.ek._id + '.dosya'">
            </fikoyt-fiko-ses-oynatici>
        </div>
        }

        <!-- Dosya referansı -->
        @if (icerik?.ek?.bilgiler?.orijinalTuru === 'DOSYA') {
        <div class="icerik-dosya">
            <div class="ui right green labeled animated fade icon button mini dosya-buton"
                 style="vertical-align: top;">
                <div class="visible content">{{ icerik?.ek?.ismi }}</div>
                <div class="hidden content">{{okunabilirBoyut(icerik?.ek?.boyut)}}</div>
                <i class="download icon"></i>
            </div>
        </div>
        }

        <!-- FikoGL referansı -->
        @if (icerik?.ek?.bilgiler?.orijinalTuru === 'FIKOGL' || icerik?.ek?.bilgiler?.orijinalTuru === 'FIKOGLS'
          || icerik?.ek?.bilgiler?.orijinalTuru === 'FIKOOPGL' || icerik?.ek?.bilgiler?.orijinalTuru === 'FIKOOPGLv1') {
        <div class="icerik-fikogl">
            <img [src]="icerik.ek.resimid
                ? FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.' + icerik.ek.resimid + '.dosyaResim?boyut=240x?'
                : './resimler/3d-printer.png'" />
        </div>
        }

        @if (!saltOkunur) {
        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>
        }

        <button type="button"
                title="Tam Ekran"
                class="circular ui icon blue button tam-ekran-buton"
                (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button>

        <!-- Gerçek referans ise: orijinal kartı görüntüle -->
        @if (gercekReferansMi && icerik?.ek?.bilgiler?.kartId) {
        <a [routerLink]="['/🧩','🕸', icerik.ek.bilgiler.kartId]"
           target="_blank"
           title="Orijinal kartı görüntüle"
           class="circular ui icon button orijinal-kart-buton"
           style="background-color: rgba(255,255,255,0.15);">
            <i class="external alternate icon" style="color: white;"></i>
        </a>
        }

        <span class="dosya-boyutu">{{okunabilirBoyut(icerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            @switch (icerik?.ek?.bilgiler?.orijinalTuru) {
                @case ('RESIM') { <i class="camera icon ekreferans-ikon-pulse"></i> }
                @case ('VIDEO') { <i class="film icon ekreferans-ikon-spin"></i> }
                @case ('SES')   { <i class="music icon ekreferans-ikon-bounce"></i> }
                @case ('DOSYA') { <i class="file icon ekreferans-ikon-pulse"></i> }
                @default        { <i class="cube icon ekreferans-ikon-spin"></i> }
            }
            @if (gercekReferansMi) {
                Referans
                @if (icerik?.ek?.bilgiler?.referansSayisi > 1) {
                <span class="referans-sayac">{{ icerik.ek.bilgiler.referansSayisi }}</span>
                }
            } @else {
                {{ {RESIM:'Resim',VIDEO:'Video',SES:'Ses',DOSYA:'Dosya'}[icerik?.ek?.bilgiler?.orijinalTuru] || icerik?.ek?.bilgiler?.orijinalTuru }}
            }
        </span>

        <!-- Gerçek referans ise: orijinal sahip bilgisi -->
        @if (gercekReferansMi && icerik?.ek?.bilgiler?.sahip) {
        <div class="ekreferans-sahip"
             nz-tooltip
             [nzTooltipTitle]="icerik?.ek?.bilgiler?.sahipIsim || 'Kullanıcı'"
             nzTooltipPlacement="top">
            <img [src]="FikoYT.env.adres.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + icerik.ek.bilgiler.sahip + '.profilResmi?boyut=60x?&quality=40'"
                 class="ekreferans-sahip-resim" />
            @if (icerik?.ek?.bilgiler?.sahipIsim) {
            <span class="ekreferans-sahip-isim">{{ icerik.ek.bilgiler.sahipIsim }}</span>
            }
            @if (icerik?.ek?.bilgiler?.orijinalTarih) {
            <span class="ekreferans-tarih">{{ icerik.ek.bilgiler.orijinalTarih | date:'dd MMM yyyy HH:mm' }}</span>
            }
        </div>
        }
    </div>
    }

    <!-- NOT:  Konum -->
    @if(icerik?.ek?.turu === 'KONUM'){
    <div class="icerik-konum">
        <div class="konum-harita" #konumEditorHarita></div>
        <div class="konum-bilgi-bar">
            <i class="map marker alternate icon"></i>
            <span>{{ icerik.ek.bilgiler?.yerIsmi }}</span>
        </div>

        @if (!saltOkunur){
        <button type="button"
                title="Konumu Değiştir"
                class="circular ui icon blue button tam-ekran-buton"
                (click)="konumDegistir()">
            <i class="edit icon"></i>
        </button>
        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="Konum Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>
        }

        <span class="dosya-turu">
            <i class="map marker alternate icon"></i> Konum
        </span>
    </div>
    }

    <!-- NOT:  Yapay Zeka -->
    @if(icerik?.ek?.turu === 'YAPAYZEKA'){
    <div class="icerik-yz fadein animation-duration-500">

        <img src="./simgeler/ai.jpg"
             (click)="tiklandiSiniflandir($event.target)"
             class="arka-plan" />


        <fiko-yapay-zeka [(ek)]="icerik.ek"></fiko-yapay-zeka>
        <!-- @switch (icerik?.ek?.yz) {
        @default {
        <div class="komut-liste">
            <button nz-button nzGhost nzBlock class="mb-2"
                (click)="icerik.ek.yz='YazıdanResme';CD.detectChanges();">Yazı'dan Resim'e</button>
            <button nz-button nzGhost nzBlock class="mb-2">Resim'den Yazı'ya</button>
            <button nz-button nzGhost nzBlock class="mb-2">Yüz Değiştir</button>
            <button nz-button nzGhost nzBlock class="mb-2">Yapay Sohbet</button>
        </div>
        }
        @case ("YazıdanResme") {
        <div class="komut-liste">
            <div>
                <img nz-image width="10em" height="10em" style="width: 13em;height: 13em;" class="mb-1"
                    nzSrc="/simgeler/besgen-vektor.png" alt="" />
            </div>
            <nz-tag nzColor="success">Resmi Anlatın</nz-tag>
            <textarea rows="2" nz-input nzSize="small" style=" resize: none;"></textarea>
            <div style="text-align: right;">
                <button nz-button nzType="primary" nzSize="small" nzLoading="false">Üret</button>
            </div>
        </div>
        }

        } -->



        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <span class="dosya-boyutu"
              (click)="icerik.ek.yz=null;CD.detectChanges();">Yapay Zeka</span>

        <span class="dosya-turu">
            <i class="brain icon"></i>
        </span>
    </div>
    }
</div>

<!-- <div class="ui divider" style="margin-top: 0.25rem;margin-bottom: 0.25rem;"></div> -->

<!-- Uygulama İçeriği Eki (dinamik bileşen aktifken gizle) -->
@if (icerik?.ek?.turu === 'UYGULAMAICERIK' && !dinamikBilesenId) {
<div style="margin-bottom: 0.5rem;">
    <!-- İçeriği kaldır butonu (zorunlu değilse) -->
    @if (!parametreSetiVar) {
    <div style="display:flex;justify-content:flex-end;margin-bottom:4px;">
        <button type="button"
                class="ui basic mini icon button"
                title="İçeriği Kaldır"
                (click)="icerik.ek = null; CD.detectChanges();"
                style="padding:4px 8px;font-size:11px;">
            <i class="close icon" style="margin:0 3px 0 0;"></i> Kaldır
        </button>
    </div>
    }
    <parametre-seti-secici
        [style.display]="(seciliSetId && icerik?.ek?._secilenSetId) ? 'none' : null"
        [setler]="parametreSetleri"
        [seciliSetId]="seciliSetId"
        [kullaniciYetkileri]="kullaniciYetkileri"
        (setSecildi)="onUygulamaSecildi($event)"
        (setKaldirildi)="onUygulamaKaldirildi()"
        (panelKapat)="parametreSetiTiklandi.emit()"
        (parametrelerDegisti)="parametrelerDegisti.emit($event)">
    </parametre-seti-secici>

    @if (icerik?.ek?.parametreler?.length > 0) {
    <div style="display:flex;align-items:center;gap:6px;margin:6px 0 4px;">
        <button type="button"
                class="ui basic mini button"
                (click)="onUygulamaKaldirildi()"
                style="font-size:11px;padding:4px 10px;">
            <i class="angle left icon" style="margin:0 4px 0 0;"></i> Geri
        </button>
        <button type="button"
                class="ui basic mini button"
                [class.active]="onizlemeModu"
                (click)="onizlemeModu = !onizlemeModu; tasarimModu = false; CD.detectChanges();"
                style="font-size:11px;padding:4px 10px;">
            <i class="eye icon" style="margin:0 4px 0 0;"></i>
            {{ onizlemeModu ? 'Düzenle' : 'Önizle' }}
        </button>
        <button type="button"
                class="ui basic mini button"
                [class.active]="tasarimModu"
                [class.fiko-kilit]="!lisans('tasarim_editor')"
                (click)="tasarimModuAc()"
                style="font-size:11px;padding:4px 10px;">
            <i class="paint brush icon" style="margin:0 4px 0 0;"></i>
            Tasarım
        </button>
    </div>

    @if (tasarimModu) {
    <fiko-tasarim-editoru #sablonEditoruRef
        [sablon]="aktifSablon()"
        [parametreler]="icerik?.ek?.parametreler ?? []"
        (sablonChange)="sablonGuncelle($event)">
    </fiko-tasarim-editoru>
    }

    <fikoyt-parametreler
        [(parametreler)]="icerik.ek.parametreler"
        [yetkiModu]="'tum'"
        [formModu]="true"
        [gosterimModu]="onizlemeModu"
        [hizliEkleKaynakSetleri]="parametreSetleri"
        (parametrelerChange)="icerikChange.emit(icerik); CD.detectChanges();">
    </fikoyt-parametreler>
    }
</div>
}

<!-- NOT:  Açıklama Bölümü -->
@if (icerik && !sayfaKurallari?.metinEngelle) {
<fikoyt-paylas-text-editor [(html)]="icerik.html"
                           (htmlChange)="icerik.html=$event;CD.detectChanges();"
                           [saltOkunur]="saltOkunur"
                           (paste)="tetiklendiYapistir($event)"
                           (drop)="tetiklendiDrop($event)">
</fikoyt-paylas-text-editor>
}
<!-- BİLGİ: İçerik Editör /Son -->

<!-- <pre>
{{ sonuc | json }}
</pre> -->

<!-- ═══ nz-popover Templates ═══ -->
<ng-template #aramaTpl>
    <div (click)="$event.stopPropagation();" (mousedown)="$event.stopPropagation();">
        <input class="yuz-etiket-input" placeholder="Kisi adi..." [ngModel]="yuzEtiketAramaMetni" (ngModelChange)="yuzEtiketAra($event)" (keydown.enter)="yuzEtiketEkle({ ismi: yuzEtiketAramaMetni })" autofocus />
        @if (yuzEtiketAramaSonuclari.length) {
        <div class="yuz-etiket-sonuclar">
            @for (kisi of yuzEtiketAramaSonuclari; track kisi._id || kisi.ismi) {
            <div class="yuz-etiket-sonuc" (click)="yuzEtiketEkle(kisi);">
                @if (kisi.kaynak === 'soyagaci' && kisi.resimUrl) { <img [src]="kisi.resimUrl" class="yuz-etiket-profil" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" /> }
                @if (kisi.kaynak === 'soyagaci' && !kisi.resimUrl) { <i class="sitemap icon" style="color:#52c41a;margin-right:4px;"></i> }
                @if (kisi.kaynak !== 'soyagaci') { <img [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + kisi._id + '.profilResmi?boyut=40x?'" class="yuz-etiket-profil" /> }
                <span>{{ kisi.ismi }}</span>
                @if (kisi.kaynak === 'soyagaci') { <small style="color:#52c41a;margin-left:auto;font-size:0.7em;">Aile</small> }
            </div>
            }
        </div>
        }
        <div style="display:flex;gap:4px;margin-top:4px;">
            <button class="ui mini green button" style="padding:4px 8px;" (click)="yuzEtiketEkle({ ismi: yuzEtiketAramaMetni });">Ekle</button>
            <button class="ui mini button" style="padding:4px 8px;" (click)="bekleyenEtiketIptal();">Iptal</button>
        </div>
    </div>
</ng-template>

<ng-template #duzenlemeTpl>
    <div (click)="$event.stopPropagation();" (mousedown)="$event.stopPropagation();">
        <input class="yuz-etiket-input" placeholder="Yeni isim..." [(ngModel)]="duzenlenenEtiketIsmi" (ngModelChange)="yuzEtiketAra($event)" (keydown.enter)="yuzEtiketDuzenleKaydet({ ismi: duzenlenenEtiketIsmi })" autofocus />
        @if (yuzEtiketAramaSonuclari.length) {
        <div class="yuz-etiket-sonuclar">
            @for (kisi of yuzEtiketAramaSonuclari; track kisi._id || kisi.ismi) {
            <div class="yuz-etiket-sonuc" (click)="yuzEtiketDuzenleKaydet(kisi);">
                @if (kisi.kaynak === 'soyagaci' && kisi.resimUrl) { <img [src]="kisi.resimUrl" class="yuz-etiket-profil" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" /> }
                @if (kisi.kaynak === 'soyagaci' && !kisi.resimUrl) { <i class="sitemap icon" style="color:#52c41a;margin-right:4px;"></i> }
                @if (kisi.kaynak !== 'soyagaci') { <img [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + kisi._id + '.profilResmi?boyut=40x?'" class="yuz-etiket-profil" /> }
                <span>{{ kisi.ismi }}</span>
            </div>
            }
        </div>
        }
        <div style="display:flex;gap:4px;margin-top:4px;">
            <button class="ui mini green button" style="padding:4px 8px;" (click)="yuzEtiketDuzenleKaydet({ ismi: duzenlenenEtiketIsmi });">Kaydet</button>
            <button class="ui mini button" style="padding:4px 8px;" (click)="yuzEtiketDuzenleIptal();">Iptal</button>
        </div>
    </div>
</ng-template>

<ng-template #balonTpl>
    @if (acikBalonEtiket) {
    <kisi-balon-v2
        [kisi]="{id: acikBalonEtiket.id, kisiId: acikBalonEtiket.kisiId, soyagaciKisiId: acikBalonEtiket.soyagaciKisiId, kisiIsmi: acikBalonEtiket.kisiIsmi, resimUrl: acikBalonEtiket.resimUrl}"
        [silinebilir]="!saltOkunur"
        [fapiUrl]="FikoYT.fapiUrl"
        (kapat)="acikBalonEtiketId=null;CD.detectChanges();"
        (etiketSil)="yuzEtiketSil($event);acikBalonEtiketId=null;CD.detectChanges();">
    </kisi-balon-v2>
    }
</ng-template>

<!-- ═══════════ LIGHTBOX (Gerçek Tam Ekran) ═══════════ -->
<div class="lightbox-overlay" #lightboxOverlay
     [style.display]="lightboxAcik ? 'flex' : 'none'"
     (wheel)="lightboxWheel($event)">
    <!-- Üst Toolbar -->
    <div class="lb-toolbar">
        <div class="lb-toolbar-sol">
            <span class="lb-zoom-gosterge">{{ (lightboxZoom * 100) | number:'1.0-0' }}%</span>
        </div>
        <div class="lb-toolbar-merkez">
            <button class="lb-btn" (click)="lightboxZoomDegistir(-0.25)" title="Uzaklaştır">
                <i class="minus icon"></i>
            </button>
            <button class="lb-btn" (click)="lightboxZoom=1;lightboxPanX=0;lightboxPanY=0;CD.detectChanges();" title="Sıfırla">
                <i class="undo icon"></i>
            </button>
            <button class="lb-btn" (click)="lightboxZoomDegistir(0.25)" title="Yakınlaştır">
                <i class="plus icon"></i>
            </button>
            <span class="lb-ayirici"></span>
            @if (!saltOkunur) {
            <button class="lb-btn" [class.lb-btn-aktif]="yuzEtiketModuAktif"
                    [class.fiko-kilit]="!yuzEtiketModuAktif && !lisans('yuz_etiket')"
                    (click)="yuzEtiketModuToggle()" title="Etiketle (F)">
                <i class="user icon"></i> Etiketle
            </button>
            }
            @if (icerik?.ek?.yuzEtiketleri?.length) {
            <button class="lb-btn" (click)="yuzEtiketGosterimDegistir();CD.detectChanges();" title="Gösterim Modu">
                <i class="eye icon"></i>
                {{ icerik.ek.yuzEtiketGosterim === 'surekli' ? 'Sürekli' : icerik.ek.yuzEtiketGosterim === 'kapali' ? 'Kapalı' : icerik.ek.yuzEtiketGosterim === 'liste' ? 'Liste' : 'Hover' }}
            </button>
            }
        </div>
        <div class="lb-toolbar-sag">
            <button class="lb-btn lb-btn-kapat" (click)="lightboxKapat()" title="Kapat (ESC)">
                <i class="close icon"></i>
            </button>
        </div>
    </div>

    <!-- Resim Alanı -->
    <div class="lb-resim-container"
         [style.cursor]="yuzEtiketModuAktif ? 'crosshair' : (lightboxZoom > 1 ? 'grab' : 'default')"
         (mousedown)="lightboxPanBasla($event)"
         (dblclick)="lightboxCiftTiklandi()">
        <div class="lb-resim-wrapper"
             [style.transform]="'scale(' + lightboxZoom + ') translate(' + (lightboxPanX / lightboxZoom) + 'px, ' + (lightboxPanY / lightboxZoom) + 'px)'"
             style="transition: transform 0.1s ease-out;">
            <img [src]="lightboxResimUrl"
                 (load)="lightboxResimYuklendi($event)"
                 style="max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; pointer-events: none;" />

            <!-- Yüz Etiket Katmanı (Lightbox) -->
            @if (lightboxResimAlani && (icerik?.ek?.yuzEtiketGosterim !== 'kapali' || yuzEtiketModuAktif) && (icerik?.ek?.yuzEtiketleri?.length || bekleyenEtiket || yuzEtiketModuAktif || duzenlenenEtiketId)) {
            <div class="yuz-etiket-katman lb-etiket-katman"
                 [class.etiket-modu-aktif]="yuzEtiketModuAktif"
                 [style.left.%]="lightboxResimAlani.left" [style.top.%]="lightboxResimAlani.top"
                 [style.width.%]="lightboxResimAlani.width" [style.height.%]="lightboxResimAlani.height"
                 (click)="lightboxKatmanTiklandi($event)">

                @if (icerik?.ek?.yuzEtiketleri?.length) {
                <div class="yuz-etiketleri-kaplama" [class.gosterim-hover]="(icerik.ek.yuzEtiketGosterim || 'hover') === 'hover'" [class.gosterim-surekli]="icerik.ek.yuzEtiketGosterim === 'surekli'">
                    @for (etiket of icerik.ek.yuzEtiketleri; track etiket.id + '-' + $index) {
                    <div class="yuz-etiketi-cerceve" [class.etiket-aktif]="acikBalonEtiketId === etiket.id || duzenlenenEtiketId === etiket.id"
                         [style.left.%]="etiket.x" [style.top.%]="etiket.y" [style.width.%]="etiket.w" [style.height.%]="etiket.h">
                        @if (!saltOkunur) {
                        <div class="cerceve-tasima-alani" (mousedown)="cerceveTasimaBasla($event, etiket.id)"></div>
                        }
                        <span class="cerceve-etiket" style="cursor:pointer;opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;font-size:11px;text-shadow:0 1px 3px rgba(0,0,0,0.8);"
                              nz-popover [nzPopoverContent]="(duzenlenenEtiketId === etiket.id) ? duzenlemeTpl : balonTpl"
                              nzPopoverTrigger="click" nzPopoverPlacement="top" [nzPopoverBackdrop]="true"
                              [nzPopoverVisible]="lightboxAcik && (acikBalonEtiketId === etiket.id || duzenlenenEtiketId === etiket.id)"
                              (nzPopoverVisibleChange)="popoverGorunurlukDegisti($event, etiket)"
                              [nzPopoverOverlayClassName]="(duzenlenenEtiketId === etiket.id) ? '' : 'yuz-balon-popover'"
                              (click)="etiketTiklandi(etiket);$event.stopPropagation();">{{ etiket.kisiIsmi }}</span>
                        @if (!saltOkunur) {
                        <div class="cerceve-sil-btn" (click)="yuzEtiketSil(etiket.id);$event.stopPropagation();" title="Etiketi Sil"><i class="close icon" style="margin:0;font-size:0.6em;"></i></div>
                        <div class="cerceve-tutamac nw" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'nw')"></div>
                        <div class="cerceve-tutamac ne" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'ne')"></div>
                        <div class="cerceve-tutamac sw" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'sw')"></div>
                        <div class="cerceve-tutamac se" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'se')"></div>
                        }
                    </div>
                    }
                </div>
                }

                @if (bekleyenEtiket && lightboxAcik) {
                <div class="yuz-etiketi-cerceve bekleyen"
                     nz-popover [nzPopoverContent]="aramaTpl" [nzPopoverTrigger]="null"
                     [nzPopoverVisible]="true" nzPopoverPlacement="bottom"
                     [style.left.%]="bekleyenEtiket.x" [style.top.%]="bekleyenEtiket.y" [style.width.%]="bekleyenEtiket.w" [style.height.%]="bekleyenEtiket.h">
                    <div class="cerceve-tasima-alani" (mousedown)="bekleyenCerceveTasimaBasla($event)"></div>
                    <div class="cerceve-tutamac nw" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'nw')"></div>
                    <div class="cerceve-tutamac ne" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'ne')"></div>
                    <div class="cerceve-tutamac sw" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'sw')"></div>
                    <div class="cerceve-tutamac se" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'se')"></div>
                </div>
                }

            </div>
            }

            <!-- Otomatik Yüz Tespiti Katmanı (Lightbox) -->
            @if (lightboxResimAlani && (editorOtomatikYuzler?.length || editorYuzTespitYukleniyor)) {
            <div class="yuz-etiket-katman otomatik-yuz-katman lb-etiket-katman"
                 [style.left.%]="lightboxResimAlani.left" [style.top.%]="lightboxResimAlani.top"
                 [style.width.%]="lightboxResimAlani.width" [style.height.%]="lightboxResimAlani.height">
                @if (editorYuzTespitYukleniyor) {
                <div class="otomatik-yuz-yukleniyor">
                    <i class="spinner loading icon"></i> Yüzler tespit ediliyor...
                </div>
                }
                @for (yuz of editorOtomatikYuzler; track yuz.id; let i = $index) {
                <div class="otomatik-yuz-cerceve"
                     [class.aktif]="editorOtomatikYuzAktifIdx === i"
                     [style.left.%]="yuz.x" [style.top.%]="yuz.y" [style.width.%]="yuz.w" [style.height.%]="yuz.h">
                    <span class="otomatik-yuz-etiket" style="opacity:1;transform:translateX(-50%) translateY(0);"
                          nz-popover [nzPopoverContent]="editorOtomatikAramaTpl" nzPopoverTrigger="click" nzPopoverPlacement="bottom"
                          [nzPopoverVisible]="editorOtomatikYuzAktifIdx === i"
                          (nzPopoverVisibleChange)="!$event && editorOtomatikYuzAktifIdx === i ? editorOtomatikYuzAktifIdx = null : null; CD.detectChanges();"
                          (click)="editorOtomatikYuzAktifIdx = (editorOtomatikYuzAktifIdx === i ? null : i);CD.detectChanges();$event.stopPropagation();">
                        @if (yuz.enYakinEslesme) { {{ yuz.enYakinEslesme.ad }} <small>{{ (1 - yuz.enYakinEslesme.mesafe) * 100 | number:'1.0-0' }}%</small> }
                        @if (!yuz.enYakinEslesme) { ? }
                    </span>
                    <div class="otomatik-yuz-butonlar" style="opacity:1;">
                        @if (yuz.enYakinEslesme) {
                        <button class="otomatik-btn onayla" title="Onayla"
                                (click)="editorOtomatikYuzHizliOnayla(i);$event.stopPropagation();">✓</button>
                        }
                        <button class="otomatik-btn reddet" title="Reddet"
                                (click)="editorOtomatikYuzReddet(i);$event.stopPropagation();">✕</button>
                    </div>
                    <ng-template #editorOtomatikAramaTpl>
                        <div (click)="$event.stopPropagation();" (mousedown)="$event.stopPropagation();">
                            <input class="yuz-etiket-input" placeholder="Kişi adı..." [ngModel]="editorOtomatikYuzAramaMetni"
                                   (ngModelChange)="editorOtomatikYuzAra($event);"
                                   (keydown.enter)="editorOtomatikYuzOnayla(i, {ismi: editorOtomatikYuzAramaMetni})" autofocus />
                            @if (yuz.eslesmeler?.length || editorOtomatikYuzAramaSonuclari.length) {
                            <div class="yuz-etiket-sonuclar">
                                @for (eslesme of yuz.eslesmeler; track eslesme.kisi_id) {
                                <div class="yuz-etiket-sonuc" (click)="editorOtomatikYuzOnayla(i, {ismi: eslesme.ad, _id: eslesme.kisi_id});">
                                    <i class="user icon" style="color:#1890ff;margin:0;"></i>
                                    <span>{{ eslesme.ad }}</span>
                                    <small style="color:#52c41a;margin-left:auto;font-size:0.65em;font-weight:600;">{{ (1 - eslesme.mesafe) * 100 | number:'1.0-0' }}%</small>
                                </div>
                                }
                                @for (sonuc of editorOtomatikYuzAramaSonuclari; track sonuc._id) {
                                <div class="yuz-etiket-sonuc" (click)="editorOtomatikYuzOnayla(i, {ismi: sonuc.ismi, _id: sonuc._id, kaynak: sonuc.kaynak, soyagaciKisiId: sonuc.soyagaciKisiId});">
                                    @if (sonuc.kaynak === 'soyagaci' && sonuc.resimUrl) { <img [src]="sonuc.resimUrl" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" /> }
                                    @if (sonuc.kaynak === 'soyagaci' && !sonuc.resimUrl) { <i class="sitemap icon" style="color:#52c41a;margin:0;"></i> }
                                    @if (sonuc.kaynak !== 'soyagaci') { <img [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + sonuc._id + '.profilResmi?boyut=40x?'" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" /> }
                                    <span>{{ sonuc.ismi }}</span>
                                    @if (sonuc.kaynak === 'soyagaci') { <small style="color:#52c41a;margin-left:auto;font-size:0.7em;">Aile</small> }
                                </div>
                                }
                            </div>
                            }
                            <div style="display:flex;gap:4px;margin-top:4px;">
                                <button class="ui mini green button" style="padding:4px 8px;" (click)="editorOtomatikYuzOnayla(i, {ismi: editorOtomatikYuzAramaMetni || yuz.enYakinEslesme?.ad || 'Bilinmeyen'});">Kaydet</button>
                                <button class="ui mini button" style="padding:4px 8px;" (click)="editorOtomatikYuzReddet(i);">Iptal</button>
                            </div>
                        </div>
                    </ng-template>
                </div>
                }
            </div>
            }
        </div>
    </div>

    <!-- Alt Bilgi Barı -->
    @if (icerik?.ek?.yuzEtiketleri?.length) {
    <div class="lb-alt-bar">
        <div class="lb-etiket-listesi">
            @for (etiket of icerik.ek.yuzEtiketleri; track etiket.id) {
            <span class="lb-etiket-chip">
                @if (etiket.kisiId) {
                <img [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + etiket.kisiId + '.profilResmi?boyut=40x?'" class="lb-etiket-avatar" />
                } @else {
                <span class="lb-etiket-harf">{{ (etiket.kisiIsmi || '?')[0] }}</span>
                }
                {{ etiket.kisiIsmi }}
            </span>
            }
        </div>
        @if (icerik?.ek?.boyut) {
        <span class="lb-dosya-bilgi">{{ okunabilirBoyut(icerik.ek.boyut) }}</span>
        }
    </div>
    }
</div>