@if((!aktifIcerik?.sifre!=null) && ( girilenSifre == aktifIcerik?.sifre)){


<!-- @if (miSahip){
@if(girilenSifre != aktifIcerik?.sifre || (aktifIcerik?.sifre==null)){
@if(sifreKutusuGoster){
<nz-input-wrapper nzPrefix="🔒"
                class="flex-1 w-full mb-1"
                nzSize="small">
    <input  placeholder="İçerik Şifresi" #sifreDegistir nz-input nzSize="small" type="password" autocomplete="new-password" aria-autocomplete="none" (keydown.enter)="tiklandiSifreDegistir(sifreDegistir.value);"/>
    <button nz-button
            nzType="text"
            nzShape="circle"
            nzSize="small"
            (click)="sifreKutusuGoster=false;CD.detectChanges();">❌</button>
</nz-input-wrapper>
}@else{
<button class="mb-1"
        nz-button
        nzType="text"
        nzBlock
        (click)="sifreKutusuGoster=true;CD.detectChanges();">
    🔒 İçeriği Kilitle
</button>
}
} @else {
<nz-flex>
    <button class="mb-1"
            nz-button
            nzType="text"
            nzBlock
            (click)="girilenSifre=null;CD.detectChanges();">👁️
        Gizle</button>
    <button class="mb-1"
            nz-button
            nzType="text"
            nzBlock
            nz-popconfirm
            nzPopconfirmTitle="İçerik Şifresi Kaldırılacak. Bu İçeriği Kartı Görebilen Herkes Görebilecek. Eminmisiniz?"
            nzOkText="Kaldır"
            (nzOnConfirm)="tiklandiSifreKaldir(null);CD.detectChanges();">
        ❌Kilidi Kaldır
    </button>
</nz-flex>

}
} -->


<!-- Ek Ekleme Butonları (edit modunda, ek yoksa) -->
@if (editMode && miSahip && !aktifIcerik?.ek) {
<input #ekDosyaInput type="file" (change)="ekDosyaSecildi($event)" style="display:none;">
<div class="ek-ekle-bar">
    <button type="button" class="ui circular blue mini icon button"
            title="Dosya Ekle (Resim, Video, Ses, Dosya)"
            (click)="ekDosyaInput.value='';ekDosyaInput.click();">
        <i class="plus icon" style="margin:0;"></i>
    </button>
    <span class="ek-ekle-yazi">Resim, video veya dosya ekleyin</span>
</div>
}

<div class="medya p-shadow-6 icerik-gecis"
     #medyaIcerik
     [style.height]="aktifIcerik?.ek?.bilesen ? 'unset' : ((aktifIcerik?.ek?._id && aktifIcerik?.ek?.turu !='YOUTUBE' && aktifIcerik?.ek?.turu !='REFERANS' && aktifIcerik?.ek?.turu !='UYARDOKUM') || aktifIcerik?.ek?.turu =='KONUM' ? '20rem':'unset')"
     [style.overflow]="aktifIcerik?.ek?.bilesen ? 'visible' : null">

    <div class="mesgul"
         *ngIf="aktifIcerik?.ek?.isleniyor?.evet">
        <div class="ui blue fast indeterminate progress">
            <div class="bar">
                <div class="progress"> Kart İçeriği İşleniyor </div>
            </div>
        </div>
        <div style="text-align: center;">İçerik %{{ aktifIcerik?.ek?.isleniyor?.yuzde }} İşlendi</div>
        <progress max="100"
                  [value]="aktifIcerik?.ek?.isleniyor?.yuzde ?? 0"
                  class="w-full"></progress>
        <!-- <mat-progress-bar mode="determinate" [value]="aktifIcerik?.ek?.isleniyor?.yuzde">
        </mat-progress-bar> -->
    </div>

    @if (aktifIcerik?.ek?.bilesen) {
      <dinamik-bilesen
        [bilesenId]="aktifIcerik.ek.bilesen"
        [gorunum]="'paylasilmis_kart_sade'"
        [parametreler]="{kart: kart, icerik: aktifIcerik, ek: aktifIcerik.ek}"
      />
    } @else {

    <!-- NOT:  İçerik Resim -->
    <div *ngIf="aktifIcerik?.ek?.turu == 'RESIM' && !aktifIcerik?.ek?.isleniyor?.evet"
         class="icerik-resim"
         [class.yuz-etiket-modu]="yuzEtiketModuAktif">

        <img loading="lazy"
             [src]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik?.ek?._id+'.resim?boyut=760x?&t=0'"
             (load)="resimYuklendi($event)"
             (click)="resimTapHandler($event);tiklandiResimEtiketle($event)" />

        <!-- Yüz etiket katmanı: gerçek resim alanı üzerine konumlanır -->
        <div *ngIf="resimAlani && (yuzGosterimModu !== 'kapali' || yuzEtiketModuAktif) && (benzersizYuzEtiketleri.length || bekleyenEtiket || yuzEtiketModuAktif || duzenlenenEtiketId)" 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)">

            <div *ngIf="benzersizYuzEtiketleri.length && yuzGosterimModu !== 'temiz'" class="yuz-etiketleri-kaplama"
                 [class.gosterim-etiket]="yuzGosterimModu === 'etiket'"
                 [class.gosterim-liste]="yuzGosterimModu === 'liste'"
                 [class.etiketler-gorunur]="yuzEtiketlerGorunur"
                 [class.gosterim-duzenleme]="yuzEtiketModuAktif">
                <div *ngFor="let etiket of benzersizYuzEtiketleri; trackBy: trackByEtiketId" 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">
                    <div *ngIf="miSahip && yuzEtiketModuAktif" class="cerceve-tasima-alani" (mousedown)="cerceveTasimaBasla($event, etiket.id)" (touchstart)="cerceveTasimaBasla($event, etiket.id)"></div>
                    <span class="cerceve-etiket" style="cursor:pointer;"
                          nz-popover [nzPopoverContent]="(yuzEtiketModuAktif && miSahip) ? duzenleAramaTpl : balonTpl"
                          nzPopoverTrigger="click" nzPopoverPlacement="top"
                          [nzPopoverVisible]="!lightboxAcik && (acikBalonEtiketId === etiket.id || duzenlenenEtiketId === etiket.id)"
                          (nzPopoverVisibleChange)="popoverGorunurlukDegisti($event, etiket)"
                          nzPopoverOverlayClassName="yuz-balon-popover"
                          (click)="$event.stopPropagation();">{{ etiket.kisiIsmi }}</span>
                    <ng-container *ngIf="miSahip && yuzEtiketModuAktif">
                        <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')" (touchstart)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'nw')"></div>
                        <div class="cerceve-tutamac ne" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'ne')" (touchstart)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'ne')"></div>
                        <div class="cerceve-tutamac sw" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'sw')" (touchstart)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'sw')"></div>
                        <div class="cerceve-tutamac se" (mousedown)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'se')" (touchstart)="$event.stopPropagation();cerceveBoyutlandirBasla($event, etiket.id, 'se')"></div>
                    </ng-container>
                </div>
            </div>

            <div *ngIf="bekleyenEtiket && !lightboxAcik" 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)" (touchstart)="bekleyenCerceveTasimaBasla($event)"></div>
                <div class="cerceve-tutamac nw" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'nw')" (touchstart)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'nw')"></div>
                <div class="cerceve-tutamac ne" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'ne')" (touchstart)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'ne')"></div>
                <div class="cerceve-tutamac sw" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'sw')" (touchstart)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'sw')"></div>
                <div class="cerceve-tutamac se" (mousedown)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'se')" (touchstart)="$event.stopPropagation();bekleyenCerceveBoyutlandirBasla($event, 'se')"></div>
            </div>
        </div>

        <!-- Otomatik Yüz Tespiti Katmanı (AI) -->
        <div *ngIf="resimAlani && otomatikYuzler?.length && !lightboxAcik" class="yuz-etiket-katman otomatik-yuz-katman"
             [style.left.%]="resimAlani.left" [style.top.%]="resimAlani.top"
             [style.width.%]="resimAlani.width" [style.height.%]="resimAlani.height">
            <div *ngFor="let yuz of otomatikYuzler; let i = index; trackBy: trackByIndex" class="otomatik-yuz-cerceve"
                 [class.aktif]="otomatikYuzAktifIdx === i"
                 [class.etiket-modu-aktif]="yuzEtiketModuAktif"
                 [style.left.%]="yuz.x" [style.top.%]="yuz.y" [style.width.%]="yuz.w" [style.height.%]="yuz.h">
                <span class="otomatik-yuz-etiket"
                      nz-popover [nzPopoverContent]="otomatikAramaTpl" nzPopoverTrigger="click" nzPopoverPlacement="bottom"
                      [nzPopoverVisible]="otomatikYuzAktifIdx === i"
                      (nzPopoverVisibleChange)="!$event && otomatikYuzAktifIdx === i ? otomatikYuzAktifIdx = null : null; CD.detectChanges();"
                      (click)="otomatikYuzAktifIdx = (otomatikYuzAktifIdx === i ? null : i);CD.detectChanges();$event.stopPropagation();">
                    <ng-container *ngIf="yuz.enYakinEslesme">
                        <img *ngIf="yuz.enYakinEslesme.resim_url" [src]="yuz.enYakinEslesme.resim_url" class="oy-mini-avatar" (error)="$any($event.target).style.display='none'" />
                        <img *ngIf="!yuz.enYakinEslesme.resim_url && yuz.enYakinEslesme.kisi_id" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + yuz.enYakinEslesme.kisi_id + '.profilResmi?boyut=40x?'" class="oy-mini-avatar" (error)="$any($event.target).style.display='none'" />
                        <span *ngIf="!yuz.enYakinEslesme.resim_url && !yuz.enYakinEslesme.kisi_id" class="oy-mini-harf">{{ yuz.enYakinEslesme.ad?.charAt(0) || '?' }}</span>
                        {{ yuz.enYakinEslesme.ad }}
                        <small>{{ (1 - yuz.enYakinEslesme.mesafe) * 100 | number:'1.0-0' }}%</small>
                    </ng-container>
                    <ng-container *ngIf="!yuz.enYakinEslesme">
                        <span class="oy-mini-harf">?</span> Bilinmeyen
                    </ng-container>
                </span>
                <div class="otomatik-yuz-butonlar">
                    <button *ngIf="yuz.enYakinEslesme" class="otomatik-btn onayla" title="Onayla"
                            (click)="otomatikYuzHizliOnayla(i);$event.stopPropagation();">✓</button>
                    <button class="otomatik-btn reddet" title="Reddet"
                            (click)="otomatikYuzReddet(i);$event.stopPropagation();">✕</button>
                </div>
                <ng-template #otomatikAramaTpl>
                    <div class="oy-popover-icerik" (click)="$event.stopPropagation();" (mousedown)="$event.stopPropagation();">
                        <div class="oy-popover-baslik">
                            <yuz-crop *ngIf="yuzKirpResimUrl" [resimUrl]="yuzKirpResimUrl" [bbox]="{x:yuz.x,y:yuz.y,w:yuz.w,h:yuz.h}" [boyut]="38" class="oy-yuz-onizleme"></yuz-crop>
                            <div class="oy-baslik-bilgi">
                                <span class="oy-baslik-isim" *ngIf="yuz.enYakinEslesme">{{ yuz.enYakinEslesme.ad }}</span>
                                <span class="oy-baslik-isim" *ngIf="!yuz.enYakinEslesme">Bilinmeyen Kisi</span>
                                <span class="oy-baslik-alt" *ngIf="yuz.eslesmeler?.length">{{ yuz.eslesmeler.length }} olasi eslesme</span>
                                <span class="oy-baslik-alt" *ngIf="!yuz.eslesmeler?.length">Eslesme bulunamadi</span>
                            </div>
                        </div>
                        <input class="yuz-etiket-input" placeholder="Kisi adi..." [ngModel]="otomatikYuzAramaMetni"
                               (ngModelChange)="otomatikYuzAra($event);"
                               (keydown.enter)="otomatikYuzOnayla(i, {ismi: otomatikYuzAramaMetni})" autofocus />
                        <div *ngIf="yuz.eslesmeler?.length || otomatikYuzAramaSonuclari.length" class="yuz-etiket-sonuclar">
                            <div *ngFor="let eslesme of yuz.eslesmeler; trackBy: trackByKisiId" class="yuz-etiket-sonuc" (click)="otomatikYuzOnayla(i, {ismi: eslesme.ad, _id: eslesme.kisi_id, resimUrl: eslesme.resim_url});">
                                <img *ngIf="eslesme.resim_url" [src]="eslesme.resim_url" class="oy-sonuc-avatar" (error)="$any($event.target).style.display='none'" />
                                <img *ngIf="!eslesme.resim_url && eslesme.kisi_id" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + eslesme.kisi_id + '.profilResmi?boyut=40x?'" class="oy-sonuc-avatar" (error)="$any($event.target).style.display='none'" />
                                <span *ngIf="!eslesme.resim_url && !eslesme.kisi_id" class="oy-sonuc-harf">{{ eslesme.ad?.charAt(0) || '?' }}</span>
                                <span class="oy-sonuc-isim">{{ eslesme.ad }}</span>
                                <span class="oy-sonuc-yuzde">{{ (1 - eslesme.mesafe) * 100 | number:'1.0-0' }}%</span>
                            </div>
                            <div *ngFor="let sonuc of otomatikYuzAramaSonuclari; trackBy: trackByKisiId" class="yuz-etiket-sonuc" (click)="otomatikYuzOnayla(i, {ismi: sonuc.ismi, _id: sonuc._id, kaynak: sonuc.kaynak, soyagaciKisiId: sonuc.soyagaciKisiId});">
                                <img *ngIf="sonuc.kaynak === 'soyagaci' && sonuc.resimUrl" [src]="sonuc.resimUrl" class="oy-sonuc-avatar" />
                                <i *ngIf="sonuc.kaynak === 'soyagaci' && !sonuc.resimUrl" class="sitemap icon" style="color:#52c41a;margin:0;"></i>
                                <img *ngIf="sonuc.kaynak !== 'soyagaci'" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + sonuc._id + '.profilResmi?boyut=40x?'" class="oy-sonuc-avatar" />
                                <span class="oy-sonuc-isim">{{ sonuc.ismi }}</span>
                                <small *ngIf="sonuc.kaynak === 'soyagaci'" style="color:#52c41a;margin-left:auto;font-size:0.7em;">Aile</small>
                            </div>
                        </div>
                        <div class="oy-aksiyon-bar">
                            <button class="oy-aksiyon-btn oy-kaydet" (click)="otomatikYuzOnayla(i, {ismi: otomatikYuzAramaMetni || yuz.enYakinEslesme?.ad || 'Bilinmeyen'});">Onayla</button>
                            <button class="oy-aksiyon-btn oy-iptal" (click)="otomatikYuzReddet(i);">Atla</button>
                        </div>
                    </div>
                </ng-template>
            </div>
        </div>

        <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 (aktifIcerik?.ek?.orijinalBoyut) {
                {{okunabilirBoyut(aktifIcerik?.ek?.orijinalBoyut)}} → {{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}
            } @else {
                {{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}
            }
        </span>

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

        <span *ngIf="aktifIcerik?.ek?.konum?.yerIsmi" class="ek-konum-etiket"
              [style.cursor]="miSahip ? 'pointer' : 'default'"
              (click)="miSahip && ekKonumDuzenle()">
            <i class="map marker alternate icon"></i> {{ aktifIcerik.ek.konum.yerIsmi }}
            <i *ngIf="miSahip" class="close icon ek-konum-sil"
               nz-popconfirm nzPopconfirmTitle="Konum silinsin mi?" nzOkText="Evet" nzCancelText="İptal" nzOkDanger
               (click)="$event.stopPropagation();"
               (nzOnConfirm)="aktifIcerik.ek.konum=null;icerikGuncelle();CD.detectChanges();"></i>
        </span>
        <span *ngIf="miSahip && !aktifIcerik?.ek?.konum?.yerIsmi" class="ek-konum-ekle-btn"
              (click)="ekKonumDuzenle()">
            <i class="map marker alternate icon"></i>
        </span>

    </div>

    <!-- NOT:  icerikçerik Video -->

    <div *ngIf="aktifIcerik?.ek?.turu == 'VIDEO' && !aktifIcerik?.ek?.isleniyor?.evet"
         class="icerik-video">

        <img loading="lazy"
             alt="İçerik Resmi"
             style="height: 100%;width:100%;object-fit: contain;"
             *ngIf="aktifMedya!=aktifIcerik?.ek?._id"
             (click)="aktifMedya=aktifIcerik?.ek?._id;FikoYT.degisti.emit();"
             loading="lazy"
             [src]="FikoYT.fapiUrl+'/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik?.ek?._id+'.dosyaThumb'">

        <img loading="lazy"
             class="play tuşu"
             src="./resimler/play.svg"
             width="128"
             height="128"
             *ngIf="aktifMedya!=aktifIcerik?.ek?._id"
             (click)="aktifMedya=aktifIcerik?.ek?._id;FikoYT.degisti.emit();"
             style="width: 32px;height:32px;position: absolute;margin-left: auto;margin-right: auto;left: 50%;transform: translate(-50%, -50%);top: 50%;">


        <video controls
               *ngIf="aktifMedya==aktifIcerik?.ek?._id"
               autoplay
               [src]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik?.ek?._id+'.dosya'"></video>

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

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

        <span *ngIf="aktifIcerik?.ek?.konum?.yerIsmi" class="ek-konum-etiket"
              [style.cursor]="miSahip ? 'pointer' : 'default'"
              (click)="miSahip && ekKonumDuzenle()">
            <i class="map marker alternate icon"></i> {{ aktifIcerik.ek.konum.yerIsmi }}
            <i *ngIf="miSahip" class="close icon ek-konum-sil"
               nz-popconfirm nzPopconfirmTitle="Konum silinsin mi?" nzOkText="Evet" nzCancelText="İptal" nzOkDanger
               (click)="$event.stopPropagation();"
               (nzOnConfirm)="aktifIcerik.ek.konum=null;icerikGuncelle();CD.detectChanges();"></i>
        </span>
        <span *ngIf="miSahip && !aktifIcerik?.ek?.konum?.yerIsmi" class="ek-konum-ekle-btn"
              (click)="ekKonumDuzenle()">
            <i class="map marker alternate icon"></i>
        </span>

    </div>

    <!-- NOT:  İçerik Ses -->
    <div *ngIf="aktifIcerik?.ek?.turu == 'SES' && !aktifIcerik?.ek?.isleniyor?.evet"
         class="icerik-ses">

        <fikoyt-fiko-ses-oynatici [duraklatildi]="aktifMedya!=aktifIcerik?.ek?.id"
                                  (duraklatildiChange)="!$event ? aktifMedya=aktifIcerik?.ek?.id:aktifMedya=null;FikoYT.degisti.emit();"
                                  [url]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik?.ek?._id+'.dosya'"
                                  [mevcutTranskript]="aktifIcerik?.ek?.transkript || ''"
                                  [mevcutSegmentler]="aktifIcerik?.ek?.transkriptSegmentleri || []"
                                  (transkriptHazir)="transkriptHazirEvent($event)">
        </fikoyt-fiko-ses-oynatici>

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

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

    <!-- NOT:  İçerik Dosya -->
    <div *ngIf="aktifIcerik?.ek?.turu == 'DOSYA'"
         class="icerik-dosya">

        <span *ngIf="aktifIcerik?.ek?.konum?.yerIsmi" class="ek-konum-etiket"
              [style.cursor]="miSahip ? 'pointer' : 'default'"
              (click)="miSahip && ekKonumDuzenle()">
            <i class="map marker alternate icon"></i> {{ aktifIcerik.ek.konum.yerIsmi }}
            <i *ngIf="miSahip" class="close icon ek-konum-sil"
               nz-popconfirm nzPopconfirmTitle="Konum silinsin mi?" nzOkText="Evet" nzCancelText="İptal" nzOkDanger
               (click)="$event.stopPropagation();"
               (nzOnConfirm)="aktifIcerik.ek.konum=null;icerikGuncelle();CD.detectChanges();"></i>
        </span>
        <span *ngIf="miSahip && !aktifIcerik?.ek?.konum?.yerIsmi" class="ek-konum-ekle-btn"
              (click)="ekKonumDuzenle()">
            <i class="map marker alternate icon"></i>
        </span>

        <a [href]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik?.ek?._id+'.dosya'"
           target="_blank"
           download="{{ aktifIcerik?.ek?.ismi }}">
            <div class="ui right green labeled animated fade icon button mini dosya-buton"
                 style="vertical-align: top;">
                <div class="visible content">
                    {{ aktifIcerik?.ek?.ismi }}
                </div>
                <div class="hidden content">
                    {{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}
                </div>
                <i class="download icon"></i>
            </div>
        </a>
        @if (aktifIcerik?.ek?.ismi.endsWith('.FikoWrl') ||
        aktifIcerik?.ek?.ismi.endsWith('.wrl') ){
        <a [routerLink]="['/🧩','🌌']"
           [queryParams]="{dosya_id: aktifIcerik?.ek?._id}"
           target="_blank">
            <button type="button"
                    class="ui circular mini icon button"
                    style="margin: 5px;">
                <img src="/simgeler/3d.png"
                     style="width: 14px !important; height: 14px; object-fit: contain;">
            </button>
        </a> 
        }

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

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



    <!-- NOT:  Youtube -->
    <div *ngIf="aktifIcerik?.ek?.turu =='YOUTUBE'"
         class="icerik-youtube">

        <img loading="lazy"
             alt="İçerik Resmi"
             style="width: 100%;height: 15rem;object-fit: cover;background: black;"
             *ngIf="aktifMedya!=aktifIcerik?.ek?.id"
             (click)="aktifMedya=aktifIcerik?.ek?.id;FikoYT.degisti.emit();"
             loading="lazy"
             [src]="'https://img.youtube.com/vi/' + aktifIcerik?.ek?.yid  +'/0.jpg'">

        <img loading="lazy"
             class="play tuşu"
             src="/resimler/play.svg"
             width="128"
             height="128"
             *ngIf="aktifMedya!=aktifIcerik?.ek?.id"
             (click)="aktifMedya=aktifIcerik?.ek?.id;FikoYT.degisti.emit();"
             style="width: 32px;height:32px;position: absolute;margin-left: auto;margin-right: auto;left: 50%;transform: translate(-50%, -50%);top: 50%;">

        <div class="youtubevid ui embed"
             data-source="youtube"
             [attr.data-id]="aktifIcerik?.ek?.yid"
             *ngIf="aktifMedya==aktifIcerik?.ek?.id">
            <!-- [attr.data-placeholder]="'https://img.youtube.com/vi/' + aktifIcerik?.ek?.yid  +'/0.jpg'"  data-icon="video" -->
        </div>

    </div>
    <!-- NOT:  UYAR_DOKUM -->
    <div *ngIf="aktifIcerik?.ek?.turu =='UYARDOKUM'"
         class="icerik-uyar-dokum">

        @let parametreler = parametreProxy(aktifIcerik.ek.parametreler ?? []);
        <!-- <pre>{{ (kart()?.veri?.icerikler ?? [])[0].ek.parametreler | json }}</pre> -->

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


    </div>

    <!-- NOT:  UYGULAMA İÇERİK (Parametre Seti Gösterim) -->
    <div *ngIf="aktifIcerik?.ek?.turu =='UYGULAMAICERIK'"
         class="icerik-uygulama-icerik">
        @if (aktifIcerik?.ek?.sablonOverride || aktifIcerik?.ek?.sablon) {
            <sablon-renderer
                [sablon]="aktifIcerik.ek.sablonOverride || aktifIcerik.ek.sablon"
                [parametreDegerleri]="parametreDegerleriHesapla(aktifIcerik)"
                [duzenlenebilir]="duzenleyebilirMi()"
                (parametreTiklandi)="sablonParametreDuzenle($event, aktifIcerik)"
                (resimDegisti)="sablonResimDegisti($event, aktifIcerik)">
            </sablon-renderer>
            @if (aktifIcerik?.ek?.parametreler?.length > 0) {
                <div style="text-align:center;padding:4px 0 0;">
                    <button type="button" class="ui basic mini button"
                            style="font-size:10px;padding:3px 10px;opacity:0.6;"
                            (click)="aktifIcerik._parametrelerGorunur = !aktifIcerik._parametrelerGorunur; CD.detectChanges();">
                        <i class="list icon" style="margin:0 4px 0 0;"></i>
                        {{ aktifIcerik._parametrelerGorunur ? 'Detayları Gizle' : 'Detayları Göster' }}
                    </button>
                </div>
                @if (aktifIcerik._parametrelerGorunur) {
                <fikoyt-parametreler
                    [(parametreler)]="aktifIcerik.ek.parametreler"
                    [gosterimModu]="true"
                    [yetkiModu]="'rollerineGore'"
                    [kullaniciRolleri]="kullaniciRolleri"
                    [formModu]="true"
                    (degisti)="onUygulamaParametreDegisti()">
                </fikoyt-parametreler>
                }
            }
        } @else if (aktifIcerik?.ek?.parametreler?.length > 0) {
            <div class="prm-mini-kart-grid">
                @for (prm of aktifIcerik.ek.parametreler; track prm.ismi) {
                    @if (prm.turu !== 'Grup' && prm.turu !== 'Simgeli Başlık' && prm.turu !== '2liSatır' && prm.turu !== '3lüSatır') {
                    <div class="prm-mini-kart">
                        <span class="prm-mini-etiket">{{ prm.baslik || prm.ismi }}</span>
                        <span class="prm-mini-deger">
                            @switch (prm.turu) {
                                @case ('Onay') {
                                    <span class="prm-mini-bool-dot" [class.evet]="prm.degeri" [class.hayir]="!prm.degeri"></span>
                                    {{ prm.degeri ? 'Evet' : 'Hayır' }}
                                }
                                @case ('Anahtar') {
                                    <span class="prm-mini-bool-dot" [class.evet]="prm.degeri" [class.hayir]="!prm.degeri"></span>
                                    {{ prm.degeri ? 'Açık' : 'Kapalı' }}
                                }
                                @case ('Tarih') {
                                    {{ prm.degeri ? (prm.degeri | date:'dd MMM yyyy') : '—' }}
                                }
                                @case ('Tarih Saat') {
                                    {{ prm.degeri ? (prm.degeri | date:'dd MMM HH:mm') : '—' }}
                                }
                                @case ('Para') {
                                    {{ prm.degeri != null ? (prm.degeri | number:'1.2-2') : '—' }}{{ prm.ayarlar?.paraBirimi || ' ₺' }}
                                }
                                @case ('İlerleme Çubuğu') {
                                    %{{ prm.degeri ?? 0 }}
                                }
                                @default {
                                    {{ prm.degeri ?? '—' }}
                                }
                            }
                        </span>
                    </div>
                    }
                }
            </div>
            @if (duzenleyebilirMi()) {
            <div style="padding:4px 0;">
                <fikoyt-parametreler
                    [(parametreler)]="aktifIcerik.ek.parametreler"
                    [gosterimModu]="true"
                    [yetkiModu]="'rollerineGore'"
                    [kullaniciRolleri]="kullaniciRolleri"
                    [formModu]="true"
                    (degisti)="onUygulamaParametreDegisti()">
                </fikoyt-parametreler>
            </div>
            }
        } @else {
            <div style="padding:12px;color:#8c8c8c;font-size:12px;text-align:center;">
                Parametre bilgisi yok
            </div>
        }
    </div>

    <!-- Parametre düzenleme modalı -->
    <nz-modal
        [nzVisible]="!!_sablonDuzenleParametre"
        nzTitle="Parametreleri Düzenle"
        [nzWidth]="420"
        (nzOnCancel)="sablonDuzenleIptal()"
        [nzFooter]="sablonDuzenleFooter">
        <ng-container *nzModalContent>
            @if (_sablonDuzenleParametre) {
                <fikoyt-parametreler
                    [(parametreler)]="_sablonDuzenleParametre"
                    [gosterimModu]="false"
                    [yetkiModu]="'hepsi'"
                    [formModu]="true">
                </fikoyt-parametreler>
            }
        </ng-container>
        <ng-template #sablonDuzenleFooter>
            <button nz-button nzType="default" (click)="sablonDuzenleIptal()">İptal</button>
            <button nz-button nzType="primary" (click)="sablonDuzenleKaydet()">Kaydet</button>
        </ng-template>
    </nz-modal>

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

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

            <!-- Yüz etiket katmanı (EKREFERANS) -->
            <div *ngIf="resimAlani && (yuzGosterimModu !== 'kapali' || yuzEtiketModuAktif) && (benzersizYuzEtiketleri.length || bekleyenEtiket || yuzEtiketModuAktif || duzenlenenEtiketId)" 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)">

                <div *ngIf="benzersizYuzEtiketleri.length && yuzGosterimModu !== 'temiz'" class="yuz-etiketleri-kaplama"
                     [class.gosterim-etiket]="yuzGosterimModu === 'etiket'"
                     [class.gosterim-liste]="yuzGosterimModu === 'liste'"
                     [class.etiketler-gorunur]="yuzEtiketlerGorunur"
                     [class.gosterim-duzenleme]="yuzEtiketModuAktif">
                    <div *ngFor="let etiket of benzersizYuzEtiketleri; trackBy: trackByEtiketId" 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">
                        <div *ngIf="miSahip && yuzEtiketModuAktif" class="cerceve-tasima-alani" (mousedown)="cerceveTasimaBasla($event, etiket.id)" (touchstart)="cerceveTasimaBasla($event, etiket.id)"></div>
                        <span class="cerceve-etiket" style="cursor:pointer;"
                              nz-popover [nzPopoverContent]="balonTpl"
                              nzPopoverTrigger="click" nzPopoverPlacement="top"
                              [nzPopoverVisible]="!lightboxAcik && (acikBalonEtiketId === etiket.id || duzenlenenEtiketId === etiket.id)"
                              (nzPopoverVisibleChange)="popoverGorunurlukDegisti($event, etiket)"
                              nzPopoverOverlayClassName="yuz-balon-popover"
                              (click)="$event.stopPropagation();">{{ etiket.kisiIsmi }}</span>
                        <ng-container *ngIf="miSahip && yuzEtiketModuAktif">
                            <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>
                        </ng-container>
                    </div>
                </div>

                <div *ngIf="bekleyenEtiket && !lightboxAcik" 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 - EKREFERANS) -->
            <div *ngIf="resimAlani && otomatikYuzler?.length && !lightboxAcik" class="yuz-etiket-katman otomatik-yuz-katman"
                 [style.left.%]="resimAlani.left" [style.top.%]="resimAlani.top"
                 [style.width.%]="resimAlani.width" [style.height.%]="resimAlani.height">
                <div *ngFor="let yuz of otomatikYuzler; let i = index; trackBy: trackByIndex" class="otomatik-yuz-cerceve"
                     [class.aktif]="otomatikYuzAktifIdx === i"
                     [class.etiket-modu-aktif]="yuzEtiketModuAktif"
                     [style.left.%]="yuz.x" [style.top.%]="yuz.y" [style.width.%]="yuz.w" [style.height.%]="yuz.h">
                    <span class="otomatik-yuz-etiket"
                          nz-popover [nzPopoverContent]="otomatikAramaTplEk" nzPopoverTrigger="click" nzPopoverPlacement="bottom"
                          [nzPopoverVisible]="otomatikYuzAktifIdx === i"
                          (nzPopoverVisibleChange)="!$event && otomatikYuzAktifIdx === i ? otomatikYuzAktifIdx = null : null; CD.detectChanges();"
                          (click)="otomatikYuzAktifIdx = (otomatikYuzAktifIdx === i ? null : i);CD.detectChanges();$event.stopPropagation();">
                        <ng-container *ngIf="yuz.enYakinEslesme">
                            <img *ngIf="yuz.enYakinEslesme.resim_url" [src]="yuz.enYakinEslesme.resim_url" class="oy-mini-avatar" (error)="$any($event.target).style.display='none'" />
                            <img *ngIf="!yuz.enYakinEslesme.resim_url && yuz.enYakinEslesme.kisi_id" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + yuz.enYakinEslesme.kisi_id + '.profilResmi?boyut=40x?'" class="oy-mini-avatar" (error)="$any($event.target).style.display='none'" />
                            <span *ngIf="!yuz.enYakinEslesme.resim_url && !yuz.enYakinEslesme.kisi_id" class="oy-mini-harf">{{ yuz.enYakinEslesme.ad?.charAt(0) || '?' }}</span>
                            {{ yuz.enYakinEslesme.ad }}
                            <small>{{ (1 - yuz.enYakinEslesme.mesafe) * 100 | number:'1.0-0' }}%</small>
                        </ng-container>
                        <ng-container *ngIf="!yuz.enYakinEslesme">
                            <span class="oy-mini-harf">?</span> Bilinmeyen
                        </ng-container>
                    </span>
                    <div class="otomatik-yuz-butonlar">
                        <button *ngIf="yuz.enYakinEslesme" class="otomatik-btn onayla" title="Onayla"
                                (click)="otomatikYuzHizliOnayla(i);$event.stopPropagation();">✓</button>
                        <button class="otomatik-btn reddet" title="Reddet"
                                (click)="otomatikYuzReddet(i);$event.stopPropagation();">✕</button>
                    </div>
                    <ng-template #otomatikAramaTplEk>
                        <div class="oy-popover-icerik" (click)="$event.stopPropagation();" (mousedown)="$event.stopPropagation();">
                            <div class="oy-popover-baslik">
                                <yuz-crop *ngIf="yuzKirpResimUrl" [resimUrl]="yuzKirpResimUrl" [bbox]="{x:yuz.x,y:yuz.y,w:yuz.w,h:yuz.h}" [boyut]="38" class="oy-yuz-onizleme"></yuz-crop>
                                <div class="oy-baslik-bilgi">
                                    <span class="oy-baslik-isim" *ngIf="yuz.enYakinEslesme">{{ yuz.enYakinEslesme.ad }}</span>
                                    <span class="oy-baslik-isim" *ngIf="!yuz.enYakinEslesme">Bilinmeyen Kisi</span>
                                    <span class="oy-baslik-alt" *ngIf="yuz.eslesmeler?.length">{{ yuz.eslesmeler.length }} olasi eslesme</span>
                                    <span class="oy-baslik-alt" *ngIf="!yuz.eslesmeler?.length">Eslesme bulunamadi</span>
                                </div>
                            </div>
                            <input class="yuz-etiket-input" placeholder="Kisi adi..." [ngModel]="otomatikYuzAramaMetni"
                                   (ngModelChange)="otomatikYuzAra($event);"
                                   (keydown.enter)="otomatikYuzOnayla(i, {ismi: otomatikYuzAramaMetni})" autofocus />
                            <div *ngIf="yuz.eslesmeler?.length || otomatikYuzAramaSonuclari.length" class="yuz-etiket-sonuclar">
                                <div *ngFor="let eslesme of yuz.eslesmeler; trackBy: trackByKisiId" class="yuz-etiket-sonuc" (click)="otomatikYuzOnayla(i, {ismi: eslesme.ad, _id: eslesme.kisi_id, resimUrl: eslesme.resim_url});">
                                    <img *ngIf="eslesme.resim_url" [src]="eslesme.resim_url" class="oy-sonuc-avatar" (error)="$any($event.target).style.display='none'" />
                                    <img *ngIf="!eslesme.resim_url && eslesme.kisi_id" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + eslesme.kisi_id + '.profilResmi?boyut=40x?'" class="oy-sonuc-avatar" (error)="$any($event.target).style.display='none'" />
                                    <span *ngIf="!eslesme.resim_url && !eslesme.kisi_id" class="oy-sonuc-harf">{{ eslesme.ad?.charAt(0) || '?' }}</span>
                                    <span class="oy-sonuc-isim">{{ eslesme.ad }}</span>
                                    <span class="oy-sonuc-yuzde">{{ (1 - eslesme.mesafe) * 100 | number:'1.0-0' }}%</span>
                                </div>
                                <div *ngFor="let sonuc of otomatikYuzAramaSonuclari; trackBy: trackByKisiId" class="yuz-etiket-sonuc" (click)="otomatikYuzOnayla(i, {ismi: sonuc.ismi, _id: sonuc._id, kaynak: sonuc.kaynak, soyagaciKisiId: sonuc.soyagaciKisiId});">
                                    <img *ngIf="sonuc.kaynak === 'soyagaci' && sonuc.resimUrl" [src]="sonuc.resimUrl" class="oy-sonuc-avatar" />
                                    <i *ngIf="sonuc.kaynak === 'soyagaci' && !sonuc.resimUrl" class="sitemap icon" style="color:#52c41a;margin:0;"></i>
                                    <img *ngIf="sonuc.kaynak !== 'soyagaci'" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + sonuc._id + '.profilResmi?boyut=40x?'" class="oy-sonuc-avatar" />
                                    <span class="oy-sonuc-isim">{{ sonuc.ismi }}</span>
                                    <small *ngIf="sonuc.kaynak === 'soyagaci'" style="color:#52c41a;margin-left:auto;font-size:0.7em;">Aile</small>
                                </div>
                            </div>
                            <div class="oy-aksiyon-bar">
                                <button class="oy-aksiyon-btn oy-kaydet" (click)="otomatikYuzOnayla(i, {ismi: otomatikYuzAramaMetni || yuz.enYakinEslesme?.ad || 'Bilinmeyen'});">Onayla</button>
                                <button class="oy-aksiyon-btn oy-iptal" (click)="otomatikYuzReddet(i);">Atla</button>
                            </div>
                        </div>
                    </ng-template>
                </div>
            </div>
        </div>

        <!-- Video referansı -->
        <div *ngIf="aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'VIDEO'"
             class="icerik-video">
            <img loading="lazy"
                 alt="Video Önizleme"
                 style="height: 100%;width:100%;object-fit: contain;"
                 *ngIf="aktifMedya!=aktifIcerik?.ek?._id"
                 (click)="aktifMedya=aktifIcerik?.ek?._id;FikoYT.degisti.emit();"
                 [src]="FikoYT.fapiUrl+'/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik.ek._id+'.dosyaThumb'">
            <img loading="lazy"
                 class="play tuşu"
                 src="./resimler/play.svg"
                 width="128" height="128"
                 *ngIf="aktifMedya!=aktifIcerik?.ek?._id"
                 (click)="aktifMedya=aktifIcerik?.ek?._id;FikoYT.degisti.emit();"
                 style="width: 32px;height:32px;position: absolute;margin-left: auto;margin-right: auto;left: 50%;transform: translate(-50%, -50%);top: 50%;">
            <video controls
                   *ngIf="aktifMedya==aktifIcerik?.ek?._id"
                   autoplay
                   [src]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.' + aktifIcerik.ek._id + '.dosya'"></video>
        </div>

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

        <!-- Dosya referansı -->
        <div *ngIf="aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'DOSYA'"
             class="icerik-dosya">
            <a [href]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.' + aktifIcerik.ek._id + '.dosya'"
               target="_blank"
               download="{{ aktifIcerik?.ek?.ismi }}">
                <div class="ui right green labeled animated fade icon button mini dosya-buton"
                     style="vertical-align: top;">
                    <div class="visible content">{{ aktifIcerik?.ek?.ismi }}</div>
                    <div class="hidden content">{{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}</div>
                    <i class="download icon"></i>
                </div>
            </a>
        </div>

        <!-- FikoGL referansı -->
        <div *ngIf="aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'FIKOGL' || aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'FIKOGLS'
              || aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'FIKOOPGL' || aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'FIKOOPGLv1'"
             class="icerik-resim">
            <img loading="lazy"
                 [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.' + aktifIcerik.ek.resimid + '.dosyaResim?boyut=240x?'" />
        </div>

        <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 linki -->
        <a *ngIf="gercekReferansMi && aktifIcerik?.ek?.bilgiler?.kartId"
           [routerLink]="['/🧩','🕸', aktifIcerik.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>

        <!-- Gerçek referans ise: referans detayları butonu -->
        <button *ngIf="gercekReferansMi && aktifIcerik?.ek?.bilgiler"
                class="circular ui icon button referans-detay-buton"
                title="Referans Detayları"
                style="background-color: rgba(255,255,255,0.15); position: absolute; right: 4px; bottom: 30px; z-index: 2;"
                (click)="tiklandiReferansDetay(aktifIcerik)">
            <i class="info circle icon" style="color: white;"></i>
        </button>

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

        <span class="dosya-turu">
            <i *ngIf="aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'RESIM'" class="camera icon ekreferans-ikon-pulse"></i>
            <i *ngIf="aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'VIDEO'" class="film icon ekreferans-ikon-spin"></i>
            <i *ngIf="aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'SES'" class="music icon ekreferans-ikon-bounce"></i>
            <i *ngIf="aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'DOSYA'" class="file icon ekreferans-ikon-pulse"></i>
            <i *ngIf="aktifIcerik?.ek?.bilgiler?.orijinalTuru !== 'RESIM' && aktifIcerik?.ek?.bilgiler?.orijinalTuru !== 'VIDEO' && aktifIcerik?.ek?.bilgiler?.orijinalTuru !== 'SES' && aktifIcerik?.ek?.bilgiler?.orijinalTuru !== 'DOSYA'" class="cube icon ekreferans-ikon-spin"></i>
            <ng-container *ngIf="gercekReferansMi; else kendiTuruTpl">Referans</ng-container>
            <ng-template #kendiTuruTpl>{{ {RESIM:'Resim',VIDEO:'Video',SES:'Ses',DOSYA:'Dosya'}[aktifIcerik?.ek?.bilgiler?.orijinalTuru] || aktifIcerik?.ek?.bilgiler?.orijinalTuru }}</ng-template>
            <span *ngIf="gercekReferansMi && aktifIcerik?.ek?.bilgiler?.referansSayisi > 1"
                  class="referans-sayac">{{ aktifIcerik.ek.bilgiler.referansSayisi }}</span>
        </span>

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

    <!-- NOT:  Referans  -->
    <template #referansKonteynir></template>
    <!-- <div *ngIf="aktifIcerik?.ek?.turu =='REFERANS'" class="icerik-referans">

    </div> -->


    <!-- NOT:  Konum -->
    <div *ngIf="aktifIcerik?.ek?.turu == 'KONUM'"
         class="icerik-konum">
        <div class="konum-harita" #konumHaritaDiv
             [attr.data-lat]="aktifIcerik?.ek?.bilgiler?.koordinat?.lat"
             [attr.data-lng]="aktifIcerik?.ek?.bilgiler?.koordinat?.lng">
        </div>
        <div class="konum-bilgi-bar">
            <i class="map marker alternate icon"></i>
            <span>{{ aktifIcerik?.ek?.bilgiler?.yerIsmi || aktifIcerik?.ek?.ismi }}</span>
        </div>
        <button *ngIf="miSahip" class="tam-ekran-buton"
                title="Konumu Değiştir"
                (click)="konumIcerikDuzenle()">
            <i class="edit icon" style="margin:0;"></i>
        </button>
    </div>

    <!-- NOT:  İçerik FikoGL -->
    <div *ngIf="aktifIcerik?.ek?.turu == 'FIKOGL' || aktifIcerik?.ek?.turu == 'FIKOOPGL'|| aktifIcerik?.ek?.turu == 'FIKOOPGLv1'|| aktifIcerik?.ek?.turu == 'FIKOGLS'"
         class="icerik-resim">

        <img loading="lazy"
             [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+aktifIcerik?.ek?.resimid+'.dosyaResim?boyut=240x?'" />

        <img loading="lazy"
             class="play tuşu"
             src="/simgeler/3d.png"
             width="128"
             height="128"
             (click)="aktifMedya=aktifIcerik?.ek?.id;FikoYT.degisti.emit();tiklandiFikoGL(aktifIcerik)"
             style="width: 32px;height:32px;position: absolute;margin-left: auto;margin-right: auto;left: 50%;transform: translate(-50%, -50%);top: 50%;cursor:pointer;">


        <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(aktifIcerik?.ek?.boyut)}}</span>

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

    </div>

    }

</div>

<!-- Yüz kontrol barı: medya dışında, taşma yok -->
<div *ngIf="(aktifIcerik?.ek?.turu == 'RESIM' || (aktifIcerik?.ek?.turu == 'EKREFERANS' && aktifIcerik?.ek?.bilgiler?.orijinalTuru === 'RESIM')) && !aktifIcerik?.ek?.isleniyor?.evet && (miSahip || benzersizYuzEtiketleri.length)" class="yuz-kontroller">
    <div class="yuz-kontrol-bar">
        <span *ngIf="miSahip" class="yuz-kontrol-btn"
              [class.aktif]="yuzEtiketModuAktif"
              (click)="yuzEtiketModuAktif=!yuzEtiketModuAktif;bekleyenEtiket=null;CD.detectChanges();$event.stopPropagation();">
            <i class="user icon"></i> {{ yuzEtiketModuAktif ? 'Etiketleniyor' : 'Etiketle' }}
        </span>
        <!-- Kişi listesi (Google/Apple modunda) -->
        <ng-container *ngIf="yuzGosterimModu === 'liste' || yuzGosterimModu === 'temiz'">
            <span *ngFor="let etiket of benzersizYuzEtiketleri; trackBy: trackByEtiketId" class="yuz-etiket-liste-item"
                  style="cursor:pointer;"
                  (click)="etiketTiklandi(etiket);$event.stopPropagation();">
                <span class="yuz-etiket-avatar">
                    <span class="yuz-etiket-harf">{{ etiket.kisiIsmi?.charAt(0) || '?' }}</span>
                    <img *ngIf="etiket.resimUrl" [src]="etiket.resimUrl" class="yuz-etiket-profil"
                         (error)="$any($event.target).style.display='none'" />
                    <img *ngIf="etiket.kisiId" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + etiket.kisiId + '.profilResmi?boyut=40x?'" class="yuz-etiket-profil"
                         (error)="$any($event.target).style.display='none'" />
                    <yuz-crop *ngIf="yuzKirpResimUrl" [resimUrl]="yuzKirpResimUrl" [bbox]="{x:etiket.x,y:etiket.y,w:etiket.w,h:etiket.h}" [boyut]="24" class="yuz-etiket-kirp"></yuz-crop>
                </span>
                <span class="yuz-etiket-liste-isim">{{ etiket.kisiIsmi }}</span>
            </span>
        </ng-container>
        <span class="yuz-kontrol-spacer"></span>
        <span *ngIf="benzersizYuzEtiketleri.length" class="yuz-kontrol-btn yuz-mod-btn"
              (click)="yuzEtiketGosterimDegistir();$event.stopPropagation();">
            <i class="eye icon"></i> {{ $any(this).constructor.GOSTERIM_MOD_ETIKETLERI[yuzGosterimModu] || yuzGosterimModu }}
        </span>
    </div>
</div>

<!-- NOT:  İçerik Yapay Zeka -->
<!-- <div *ngIf="aktifIcerik?.ek?.turu == 'YAPAYZEKA'" class="icerik-Yz">

        <a [href]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+aktifIcerik?.ek?.id+'.dosya'"
            target="_blank" download="{{ aktifIcerik?.ek?.ismi }}">
            <div class="ui right green labeled animated fade icon button mini dosya-buton" style="vertical-align: top;">
                <div class="visible content">
                    {{ aktifIcerik?.ek?.ismi }}
                </div>
                <div class="hidden content">
                    {{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}
                </div>
                <i class="download icon"></i>
            </div>
        </a>

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

        <span class="dosya-turu">
            <i class="file outline icon"></i>
        </span>
    </div> -->


@if(aktifIcerik?.html=='' && !aktifIcerik?.ek){
<div class="ui icon center aligned message"
     *ngIf="">
    <i class="exclamation triangle icon"></i>
    <div class="content">
        <div class="header">
            İçerik Hatalı
        </div>
        <p>Bu İçeriğe Ulaşılamıyor</p>
    </div>
</div>
}
<!-- <div #textEditor text-editable [innerHTML]="aktifIcerik?.html" class="aciklama-div"></div> -->

<!-- NOT:  Açıklama Bölümü -->
<fikoyt-paylas-text-editor [html]="aktifIcerik ? aktifIcerik.html:''"
                           [kaydetTusu]="true"
                           (htmlChange)="aktifIcerik && typeof aktifIcerik === 'object' ? aktifIcerik.html=$event:null;CD.detectChanges();"
                           [saltOkunur]="!editMode"
                           (tiklandiKaydet)="kaydetTiklandi($event);"
                           (click)="ciftTiklandiAciklama();">
</fikoyt-paylas-text-editor>
} @else {
<div class="ui icon center aligned message">
    <!-- <i class="lock triangle icon"></i> -->
    <div class="content">
        <div class="header">
            İçerik Şifreli
        </div>
        <p>
            <nz-input-wrapper nzPrefix="🔒"
                            class="flex-1 w-full mb-1"
                            nzSize="small">
                <input  placeholder="İçerik Şifresi" nz-input nzSize="small" type="password" [(ngModel)]="girilenSifre" autocomplete="new-password" aria-autocomplete="none" (keydown.enter)="CD.detectChanges();"/>
                <button nz-button
                        nzType="text"
                        nzShape="circle"
                        nzSize="small"
                        (click)="girilenSifre=null;CD.detectChanges();">❌</button>
            </nz-input-wrapper>
        </p>
    </div>
</div>
}

<div style="display: flex;justify-content: center;align-content: center; /*border-bottom: 1px solid silver;*/padding:3px;"
     [style.display]="(icerikler.length<=1 && !editMode) ? 'none':'flex'">

    @if (editMode && miSahip) {
    <div class="circular ui icon red mini button"
         title="Bu Sayfayı Sil"
         [class.disabled]="icerikler.length <= 1"
         nz-popconfirm
         nzPopconfirmTitle="Bu sayfa silinecek, emin misiniz?"
         nzOkText="Sil"
         nzCancelText="İptal"
         nzOkDanger
         (nzOnConfirm)="sayfaSil()"
         style="margin-right: 4px;">
        <i class="trash icon"></i>
    </div>
    }

    <div class="circular ui icon blue mini button"
         title="ilk Sayfa"
         [style.visibility]="icerikler.length>3 ? 'visible':'hidden'"
         [class.disabled]="aktifIcerikNo < 1"
         (click)="aktifIcerikNo=0;"
         style="margin-right: auto;">
        <i class="angle double left icon"></i>
    </div>


    <div class="circular ui icon blue mini button"
         title="Önceki Sayfa"
         [class.disabled]="aktifIcerikNo < 1"
         (click)="aktifIcerikNo=aktifIcerikNo-1;">
        <i class="angle left icon"></i>
    </div>


    <a class="ui medium orange label">
        {{ (aktifIcerikNo+1)+' / '+ icerikler.length}}
    </a>

    <div class="circular ui icon blue mini button"
         title="Sonraki Sayfa"
         [class.disabled]="aktifIcerikNo + 1 > icerikler.length-1"
         (click)="aktifIcerikNo=aktifIcerikNo+1;">
        <i class="angle right icon"></i>
    </div>

    <div class="circular ui icon blue mini button"
         title="Son Sayfa"
         [style.visibility]="icerikler.length>3 ? 'visible':'hidden'"
         style="margin-left: auto;"
         [class.disabled]="aktifIcerikNo + 1 > icerikler.length-1"
         (click)="aktifIcerikNo=icerikler.length-1;">
        <i class="angle double right icon"></i>
    </div>

    @if (editMode && miSahip) {
    <div class="circular ui icon green mini button"
         title="Sayfa Ekle"
         (click)="sayfaEkle()"
         style="margin-left: 4px;">
        <i class="plus icon"></i>
    </div>
    }

</div>

<!-- Referans Detay Modal -->
<nz-modal
    [nzVisible]="referansDrawerAcik"
    [nzWidth]="380"
    nzTitle="Referans Detayları"
    [nzFooter]="null"
    (nzOnCancel)="referansDrawerKapat()">

    <ng-container *nzModalContent>
        <div *ngIf="referansDrawerVeri" class="referans-drawer-icerik">
            <!-- Orijinal Medya Önizleme -->
            <div class="referans-drawer-onizleme" style="margin-bottom: 16px;">
                <img [src]="referansDrawerVeri.thumbnailUrl"
                     style="width: 100%; border-radius: 8px; object-fit: cover; max-height: 200px;"
                     (error)="$event.target.style.display='none'" />
            </div>

            <!-- Bilgi Kartları -->
            <div style="display: flex; flex-direction: column; gap: 12px;">

                <!-- Medya Türü -->
                <div class="referans-bilgi-satir">
                    <span class="referans-bilgi-etiket">Medya Türü</span>
                    <span class="referans-bilgi-deger">{{ referansDrawerVeri.orijinalTuru }}</span>
                </div>

                <!-- Referans Zinciri -->
                <div class="referans-bilgi-satir">
                    <span class="referans-bilgi-etiket">Referans Sayısı</span>
                    <span class="referans-bilgi-deger referans-badge">
                        🔗 {{ referansDrawerVeri.referansSayisi }} kez referans alınmış
                    </span>
                </div>

                <!-- Orijinal Sahip -->
                <div class="referans-bilgi-satir" *ngIf="referansDrawerVeri.sahipIsim">
                    <span class="referans-bilgi-etiket">Orijinal Paylaşan</span>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <img [src]="referansDrawerVeri.sahipResimUrl"
                             style="width: 28px; height: 28px; border-radius: 50%; object-fit: cover;"
                             (error)="$event.target.style.display='none'" />
                        <span class="referans-bilgi-deger">{{ referansDrawerVeri.sahipIsim }}</span>
                    </div>
                </div>

                <!-- Orijinal Tarih -->
                <div class="referans-bilgi-satir" *ngIf="referansDrawerVeri.orijinalTarih">
                    <span class="referans-bilgi-etiket">Paylaşım Tarihi</span>
                    <span class="referans-bilgi-deger">{{ referansDrawerVeri.orijinalTarih | date:'dd MMM yyyy HH:mm' }}</span>
                </div>

                <!-- Orijinal Karta Git -->
                <a *ngIf="referansDrawerVeri.kartId"
                   [routerLink]="['/🧩','🕸', referansDrawerVeri.kartId]"
                   target="_blank"
                   class="referans-drawer-link"
                   (click)="referansDrawerKapat()">
                    <i class="external alternate icon"></i> Orijinal Kartı Görüntüle
                </a>

                <!-- Referans Zinciri Timeline -->
                <div *ngIf="referansZinciri.length > 0 || zincirYukleniyor" class="referans-zincir-bolum">
                    <div class="referans-bilgi-etiket" style="margin-bottom: 8px;">
                        <i class="sitemap icon"></i> Referans Zinciri
                    </div>

                    <div *ngIf="zincirYukleniyor" style="text-align:center;padding:12px;">
                        <i class="spinner loading icon"></i> Zincir yükleniyor...
                    </div>

                    <nz-timeline *ngIf="referansZinciri.length > 0">
                        <nz-timeline-item *ngFor="let adim of referansZinciri; let i = index; trackBy: trackByIndex"
                                          [nzColor]="i === 0 ? 'blue' : 'gray'">
                            <div class="zincir-adim">
                                <div style="display:flex;align-items:center;gap:6px;">
                                    <img [src]="adim.sahipResimUrl"
                                         style="width:22px;height:22px;border-radius:50%;object-fit:cover;"
                                         (error)="$event.target.style.display='none'" />
                                    <strong style="font-size:12px;">{{ adim.sahipIsim }}</strong>
                                </div>
                                <small style="color:var(--py-metin-ucuncul);">{{ adim.tarih | date:'dd MMM yyyy HH:mm' }}</small>
                                <div style="margin-top:2px;">
                                    <a [routerLink]="['/🧩','🕸', adim.kartId]"
                                       target="_blank"
                                       style="font-size:11px;color:#1890ff;"
                                       (click)="referansDrawerKapat()">
                                        <i class="external alternate icon"></i> Kartı Aç
                                    </a>
                                    <small style="color:var(--py-metin-devre-disi);margin-left:8px;">{{ adim.icerikSayisi }} icerik</small>
                                </div>
                            </div>
                        </nz-timeline-item>
                    </nz-timeline>
                </div>
            </div>
        </div>
    </ng-container>
</nz-modal>

<!-- ═══ 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 />
        <div *ngIf="yuzEtiketAramaSonuclari.length" class="yuz-etiket-sonuclar">
            <div *ngFor="let kisi of yuzEtiketAramaSonuclari; trackBy: trackByKisiId" class="yuz-etiket-sonuc" (click)="yuzEtiketEkle(kisi);">
                <img *ngIf="kisi.kaynak === 'soyagaci' && kisi.resimUrl" [src]="kisi.resimUrl" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" />
                <i *ngIf="kisi.kaynak === 'soyagaci' && !kisi.resimUrl" class="sitemap icon" style="color:#52c41a;margin-right:4px;"></i>
                <img *ngIf="kisi.kaynak !== 'soyagaci'" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + kisi._id + '.profilResmi?boyut=40x?'" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" />
                <span>{{ kisi.ismi }}</span>
                <small *ngIf="kisi.kaynak === 'soyagaci'" 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 #duzenleAramaTpl>
    <div style="padding:12px;" (click)="$event.stopPropagation();" (mousedown)="$event.stopPropagation();">
        <input class="yuz-etiket-input" placeholder="Kisi adi..." [ngModel]="yuzEtiketAramaMetni" (ngModelChange)="yuzEtiketAra($event)" (keydown.enter)="yuzEtiketDuzenleKaydet({ ismi: yuzEtiketAramaMetni })" autofocus />
        <div *ngIf="yuzEtiketAramaSonuclari.length" class="yuz-etiket-sonuclar">
            <div *ngFor="let kisi of yuzEtiketAramaSonuclari; trackBy: trackByKisiId" class="yuz-etiket-sonuc" (click)="yuzEtiketDuzenleKaydet(kisi);">
                <img *ngIf="kisi.kaynak === 'soyagaci' && kisi.resimUrl" [src]="kisi.resimUrl" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" />
                <i *ngIf="kisi.kaynak === 'soyagaci' && !kisi.resimUrl" class="sitemap icon" style="color:#52c41a;margin-right:4px;"></i>
                <img *ngIf="kisi.kaynak !== 'soyagaci'" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + kisi._id + '.profilResmi?boyut=40x?'" style="width:22px;height:22px;object-fit:cover;border-radius:50%;" />
                <span>{{ kisi.ismi }}</span>
                <small *ngIf="kisi.kaynak === 'soyagaci'" 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)="yuzEtiketDuzenleKaydet({ ismi: yuzEtiketAramaMetni });">Kaydet</button>
            <button class="ui mini button" style="padding:4px 8px;" (click)="yuzEtiketDuzenleIptal();">Iptal</button>
        </div>
    </div>
</ng-template>

<ng-template #balonTpl>
    <kisi-balon-v2 *ngIf="acikBalonEtiket"
        [kisi]="{id: acikBalonEtiket.id, kisiId: acikBalonEtiket.kisiId, soyagaciKisiId: acikBalonEtiket.soyagaciKisiId, kisiIsmi: acikBalonEtiket.kisiIsmi, resimUrl: acikBalonEtiket.resimUrl}"
        [silinebilir]="miSahip"
        [duzenlenebilir]="miSahip"
        [duzenleModu]="duzenlenenEtiketId === acikBalonEtiket?.id"
        [resimUrl]="yuzKirpResimUrl"
        [fapiUrl]="FikoYT.fapiUrl"
        [kisiDetayCekFn]="balonKisiDetayCekFn"
        [kisiyeGitFn]="balonKisiyeGitFn"
        (kapat)="acikBalonEtiketId=null;duzenlenenEtiketId=null;CD.detectChanges();"
        (etiketSil)="yuzEtiketSil($event);acikBalonEtiketId=null;CD.detectChanges();"
        (duzenleKaydet)="balonDuzenleKaydet($event)"
        (duzenleIptal)="duzenlenenEtiketId=null;CD.detectChanges();">
    </kisi-balon-v2>
</ng-template>

<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- LIGHTBOX OVERLAY                                               -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<div class="lightbox-overlay" #lightboxOverlay
     [style.display]="lightboxAcik ? 'flex' : 'none'"
     (wheel)="lightboxWheel($event)">

    <!-- Üst Toolbar -->
    <div class="lightbox-toolbar">
        <div class="lightbox-toolbar-sol">
            @if (icerikler.length > 1) {
                <span class="lb-sayfa-bilgi">{{ (aktifIcerikNo + 1) + ' / ' + icerikler.length }}</span>
            }
            <span class="lb-zoom-bilgi">{{ lightboxZoom * 100 | number:'1.0-0' }}%</span>
        </div>

        <div class="lightbox-toolbar-orta">
            <button class="lb-btn" (click)="lightboxZoomDegistir(-0.25)" title="Uzaklaştır (-)">
                <i class="minus icon"></i>
            </button>
            <button class="lb-btn" (click)="lightboxSifirla()" title="Sıfırla (0)">
                <i class="expand 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-ayrac"></span>
            @if (miSahip) {
            <button class="lb-btn" [class.aktif]="yuzEtiketModuAktif"
                    (click)="yuzEtiketModuAktif=!yuzEtiketModuAktif;bekleyenEtiket=null;CD.detectChanges();"
                    title="Yüz Etiketleme (F)">
                <i class="user icon"></i>
                {{ yuzEtiketModuAktif ? 'Etiketleniyor' : 'Etiketle' }}
            </button>
            }
            <button class="lb-btn" (click)="yuzEtiketGosterimDegistir()" title="Görünüm Modu">
                <i class="eye icon"></i>
                {{ $any(this).constructor.GOSTERIM_MOD_ETIKETLERI[yuzGosterimModu] || yuzGosterimModu }}
            </button>
        </div>

        <div class="lightbox-toolbar-sag">
            <button class="lb-btn" (click)="lightboxIndir()" title="Orijinali Aç">
                <i class="download icon"></i>
            </button>
            <button class="lb-btn lb-kapat" (click)="lightboxKapat()" title="Kapat (ESC)">
                <i class="close icon"></i>
            </button>
        </div>
    </div>

    <!-- Sol/Sağ Navigasyon Okları -->
    @if (icerikler.length > 1) {
        @if (aktifIcerikNo > 0) {
        <button class="lb-nav lb-nav-sol" (click)="lightboxSonrakiResim(-1);$event.stopPropagation();">
            <i class="angle left icon"></i>
        </button>
        }
        @if (aktifIcerikNo < icerikler.length - 1) {
        <button class="lb-nav lb-nav-sag" (click)="lightboxSonrakiResim(1);$event.stopPropagation();">
            <i class="angle right icon"></i>
        </button>
        }
    }

    <!-- Resim + Etiketler -->
    <div class="lightbox-resim-konteynir"
         [style.transform]="'scale(' + lightboxZoom + ') translate(' + lightboxPanX + 'px,' + lightboxPanY + 'px)'"
         [style.cursor]="yuzEtiketModuAktif ? 'crosshair' : (lightboxZoom > 1 ? 'grab' : 'default')"
         (mousedown)="lightboxPanBasla($event)"
         (dblclick)="lightboxCiftTiklandi($event)">

        <img [src]="lightboxResimUrl"
             class="lightbox-resim"
             (load)="lightboxResimYuklendi($event)"
             draggable="false" />

        <!-- Yüz Etiket Katmanı -->
        @if (lightboxResimAlani && (yuzGosterimModu !== 'kapali' || yuzEtiketModuAktif) && (benzersizYuzEtiketleri.length || bekleyenEtiket || yuzEtiketModuAktif)) {
        <div class="yuz-etiket-katman lightbox-etiket-katman"
             [class.etiket-modu-aktif]="yuzEtiketModuAktif"
             [style.left.%]="lightboxResimAlani.left" [style.top.%]="lightboxResimAlani.top"
             [style.width.%]="lightboxResimAlani.width" [style.height.%]="lightboxResimAlani.height"
             (click)="lightboxResimEtiketle($event);$event.stopPropagation();">

            <!-- Mevcut Etiketler -->
            @if (benzersizYuzEtiketleri.length && yuzGosterimModu !== 'temiz') {
            <div class="yuz-etiketleri-kaplama"
                 [class.gosterim-etiket]="yuzGosterimModu === 'etiket'"
                 [class.gosterim-liste]="yuzGosterimModu === 'liste'"
                 [class.etiketler-gorunur]="true"
                 [class.gosterim-duzenleme]="yuzEtiketModuAktif">
                <div *ngFor="let etiket of benzersizYuzEtiketleri; trackBy: trackByEtiketId" 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">
                    <div *ngIf="miSahip && yuzEtiketModuAktif" class="cerceve-tasima-alani" (mousedown)="cerceveTasimaBasla($event, etiket.id)" (touchstart)="cerceveTasimaBasla($event, etiket.id)"></div>
                    <span class="cerceve-etiket" style="cursor:pointer;"
                          nz-popover [nzPopoverContent]="(yuzEtiketModuAktif && miSahip) ? duzenleAramaTpl : balonTpl"
                          nzPopoverTrigger="click" nzPopoverPlacement="top"
                          [nzPopoverVisible]="lightboxAcik && (acikBalonEtiketId === etiket.id || duzenlenenEtiketId === etiket.id)"
                          (nzPopoverVisibleChange)="popoverGorunurlukDegisti($event, etiket)"
                          nzPopoverOverlayClassName="yuz-balon-popover"
                          (click)="$event.stopPropagation();">{{ etiket.kisiIsmi }}</span>
                    <ng-container *ngIf="miSahip && yuzEtiketModuAktif">
                        <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>
                    </ng-container>
                </div>
            </div>
            }

            <!-- Bekleyen Yeni Etiket (sadece lightbox açıkken) -->
            @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 (AI) -->
        @if (lightboxResimAlani && otomatikYuzler?.length) {
        <div class="yuz-etiket-katman otomatik-yuz-katman lightbox-etiket-katman"
             [style.left.%]="lightboxResimAlani.left" [style.top.%]="lightboxResimAlani.top"
             [style.width.%]="lightboxResimAlani.width" [style.height.%]="lightboxResimAlani.height">
            <div *ngFor="let yuz of otomatikYuzler; let i = index; trackBy: trackByIndex" class="otomatik-yuz-cerceve"
                 [class.aktif]="otomatikYuzAktifIdx === i"
                 [class.etiket-modu-aktif]="yuzEtiketModuAktif"
                 [style.left.%]="yuz.x" [style.top.%]="yuz.y" [style.width.%]="yuz.w" [style.height.%]="yuz.h">
                <span class="otomatik-yuz-etiket"
                      nz-popover [nzPopoverContent]="otomatikAramaTpl" nzPopoverTrigger="click" nzPopoverPlacement="bottom"
                      [nzPopoverVisible]="lightboxAcik && otomatikYuzAktifIdx === i"
                      (nzPopoverVisibleChange)="!$event && otomatikYuzAktifIdx === i ? otomatikYuzAktifIdx = null : null; CD.detectChanges();"
                      (click)="otomatikYuzAktifIdx = (otomatikYuzAktifIdx === i ? null : i);CD.detectChanges();$event.stopPropagation();">
                    <ng-container *ngIf="yuz.enYakinEslesme">
                        <span class="oy-mini-harf">{{ yuz.enYakinEslesme.ad?.charAt(0) || '?' }}</span>
                        {{ yuz.enYakinEslesme.ad }}
                        <small>{{ (1 - yuz.enYakinEslesme.mesafe) * 100 | number:'1.0-0' }}%</small>
                    </ng-container>
                    <ng-container *ngIf="!yuz.enYakinEslesme">
                        <span class="oy-mini-harf">?</span> Bilinmeyen
                    </ng-container>
                </span>
                <div class="otomatik-yuz-butonlar">
                    <button *ngIf="yuz.enYakinEslesme" class="otomatik-btn onayla" title="Onayla"
                            (click)="otomatikYuzHizliOnayla(i);$event.stopPropagation();">&#10003;</button>
                    <button class="otomatik-btn reddet" title="Reddet"
                            (click)="otomatikYuzReddet(i);$event.stopPropagation();">&#10005;</button>
                </div>
                <ng-template #otomatikAramaTpl>
                    <div class="oy-popover-icerik" (click)="$event.stopPropagation();" (mousedown)="$event.stopPropagation();">
                        <input class="yuz-etiket-input" placeholder="Kisi adi..." [ngModel]="otomatikYuzAramaMetni"
                               (ngModelChange)="otomatikYuzAra($event);"
                               (keydown.enter)="otomatikYuzOnayla(i, {ismi: otomatikYuzAramaMetni})" autofocus />
                        <div *ngIf="yuz.eslesmeler?.length || otomatikYuzAramaSonuclari.length" class="yuz-etiket-sonuclar">
                            <div *ngFor="let eslesme of yuz.eslesmeler; trackBy: trackByKisiId" class="yuz-etiket-sonuc" (click)="otomatikYuzOnayla(i, {ismi: eslesme.ad, _id: eslesme.kisi_id, resimUrl: eslesme.resim_url});">
                                <span class="oy-sonuc-harf">{{ eslesme.ad?.charAt(0) || '?' }}</span>
                                <span class="oy-sonuc-isim">{{ eslesme.ad }}</span>
                                <span class="oy-sonuc-yuzde">{{ (1 - eslesme.mesafe) * 100 | number:'1.0-0' }}%</span>
                            </div>
                            <div *ngFor="let sonuc of otomatikYuzAramaSonuclari; trackBy: trackByKisiId" class="yuz-etiket-sonuc" (click)="otomatikYuzOnayla(i, {ismi: sonuc.ismi, _id: sonuc._id, kaynak: sonuc.kaynak, soyagaciKisiId: sonuc.soyagaciKisiId});">
                                <span class="oy-sonuc-isim">{{ sonuc.ismi }}</span>
                                <small *ngIf="sonuc.kaynak === 'soyagaci'" style="color:#52c41a;margin-left:auto;font-size:0.7em;">Aile</small>
                            </div>
                        </div>
                        <div class="oy-aksiyon-bar">
                            <button class="oy-aksiyon-btn oy-kaydet" (click)="otomatikYuzOnayla(i, {ismi: otomatikYuzAramaMetni || yuz.enYakinEslesme?.ad || 'Bilinmeyen'});">Onayla</button>
                            <button class="oy-aksiyon-btn oy-iptal" (click)="otomatikYuzReddet(i);">Atla</button>
                        </div>
                    </div>
                </ng-template>
            </div>
        </div>
        }
    </div>

    <!-- Alt Bilgi Barı -->
    <div class="lightbox-alt-bar">
        <!-- Kişi Listesi -->
        @if (benzersizYuzEtiketleri.length) {
        <div class="lb-kisiler">
            @for (etiket of benzersizYuzEtiketleri; track etiket.id + '-' + $index) {
            <span class="lb-kisi-chip" (click)="etiketTiklandi(etiket);$event.stopPropagation();">
                <span class="yuz-etiket-avatar">
                    <span class="yuz-etiket-harf">{{ etiket.kisiIsmi?.charAt(0) || '?' }}</span>
                    <img *ngIf="etiket.resimUrl" [src]="etiket.resimUrl" class="yuz-etiket-profil" (error)="$any($event.target).style.display='none'" />
                    <img *ngIf="etiket.kisiId && !etiket.resimUrl" [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.kullanici.' + etiket.kisiId + '.profilResmi?boyut=40x?'" class="yuz-etiket-profil" (error)="$any($event.target).style.display='none'" />
                    <yuz-crop *ngIf="lightboxResimUrl" [resimUrl]="lightboxResimUrl" [bbox]="{x:etiket.x,y:etiket.y,w:etiket.w,h:etiket.h}" [boyut]="28" class="yuz-etiket-kirp"></yuz-crop>
                </span>
                <span class="lb-kisi-isim">{{ etiket.kisiIsmi }}</span>
            </span>
            }
        </div>
        }
        @if (aktifIcerik?.ek?.boyut) {
        <span class="lb-dosya-bilgi">{{ okunabilirBoyut(aktifIcerik?.ek?.orijinalBoyut || aktifIcerik?.ek?.boyut) }}</span>
        }
    </div>

</div>