@if (duzenlemeModunda && duzenlemeKart) {
<paylas-ikart-kutusu [kart]="duzenlemeKart"
                     [duzenlemeModunda]="true"
                     [parametreSetleri]="kartParametreSetleri()"
                     (paylasimYapildi)="kartDuzenlemeBasarili($event)"
                     (duzenlemeIptalEdildi)="kartDuzenlemeIptal()">
</paylas-ikart-kutusu>
} @else {
<div class="ui cards m-0">
    <div class="card m-0 mt-2 border-noround">
        <div class="content">

            <!-- NOT: Sayfa Bilgi Badge (kişi sayfasından gelen bağlam bilgisi) -->
            @if (kart()?.ayarlar?._sayfaBilgi; as sb) {
            <div class="kart-sayfa-bilgi-ic"
                 [ngClass]="'kart-sb--' + sb.tur">
                @if (sb.hedefAvatar) {
                <img class="kart-sb-avatar"
                     [src]="sb.hedefAvatar"
                     onerror="this.style.display='none'"
                     style="cursor:pointer;"
                     (click)="sayfaBalonToggle($event)" />
                }
                <span>{{ sb.simge }} <strong>{{ sb.kpiIsim }}</strong> {{ sb.mesaj }}
                    @if (sb.hedefIsim) {
                    <a class="kart-sb-link"
                       nz-popover
                       [nzPopoverContent]="sayfaBalonTpl"
                       nzPopoverTrigger="click"
                       [nzPopoverBackdrop]="true"
                       nzPopoverPlacement="bottom"
                       [nzPopoverVisible]="sayfaBalonAcik"
                       (nzPopoverVisibleChange)="sayfaBalonGorunurlukDegisti($event)"
                       nzPopoverOverlayClassName="yuz-balon-popover"
                       (click)="sayfaBalonToggle($event)">{{ sb.hedefIsim }}</a>{{ sb.son || '' }}
                    }
                </span>
            </div>
            }

            <!-- NOT: Üst Merkez Bölmesi Orta Kısım -->
            <img class="left floated mini ui image buyut hover:buyut-2 active:buyut-2 mr-2"
                 style="width: 35px;height: 35px;border-radius: 3px;"
                 [src]="FikoYT.env.adres.fapiUrl+'/fikoyt.com.FikoYT.sistem.aktif-kullanici.profilResmi?boyut=60x?&t='+FikoYT.parametreler['t']+'&quality=40'">
            <div class="header"
                 style="display: flex;align-items: center">
                @if (kart()?.sabitlendi) {
                <i class="pin icon"
                   style="color: #faad14; margin-right: 4px; font-size: 11px;"
                   title="Sabitlenmiş"></i>
                }
                {{ FikoYT.kimlik.aktifKullaniciJson()?.isim+ ' '+ FikoYT.kimlik.aktifKullaniciJson()?.soyIsim }}
                <sup style="color: cadetblue;margin-left: auto;">{{
                    kart()?.tarih |
                    date:"dd.MM.yyyy HH:mm:ss EEE 'Hf.':w" }}</sup>
                @if (kart()?.duzenlenmeTarihi) {
                <sup style="color: var(--py-metin-ucuncul); margin-left: 4px; font-size: 10px;"
                     title="Düzenlendi: {{ kart()?.duzenlenmeTarihi | date:'dd.MM.yyyy HH:mm' }}">
                    (düzenlendi)
                </sup>
                }
                <button class="circular ui basic icon tiny button"
                        (click)="tiklandiMenu()"
                        aria-label="Kart menüsü"
                        style="margin-left: 5px;padding: 3px;">
                    <i class="blue ellipsis horizontal icon"></i>
                </button>
            </div>
            <div class="meta">
                <!--  NOT: Dialog Gizlilik -->
                <button class="ui primary basic tiny button"
                        style="padding: 5px;border-radius: 50vh;box-shadow: none;"
                        (click)="tiklandiDialogGizlilik()">
                    <i class="{{ gizlilikSimgeSinif }} icon"></i>
                    {{ kart()?.gizlilik ? kart()?.gizlilik:'bilinmiyor' }}
                    @if ((kart()?.gizlilik=="Listedekilerle" || kart()?.gizlilik=="Listedekiler Hariç") &&
                    kart()?.gizlilikListe?.length>0) {
                    ({{ kart()?.gizlilikListe?.length }})
                    }
                </button>
                <!-- NOT: kisiler Dialog -->

                <button class="ui primary basic mini button"
                        style="padding: 5px;border-radius: 50vh;box-shadow: none;"
                        (click)="tiklandiDialogKisiSecici()">
                    <i class="icon user tag"></i>
                    Etiketlenenler ({{ kart()?.kisiler?.length ?? 0}})
                </button>

                <!-- NOT:  Etiketler Dialog -->
                <button class="ui primary basic mini button"
                        style="padding: 5px;border-radius: 50vh;box-shadow: none;"
                        (click)="tiklandiDialogEtiketler()">
                    <i class="icon tags"></i>
                    Etiketler ({{ kart()?.etiketler?.length ?? 0}})
                </button>

                <!-- NOT:  Konum -->
                @if (kart()?.konum?.yerIsmi) {
                <span class="ui green basic mini label"
                      style="border-radius: 50vh;"
                      [style.cursor]="miSahip ? 'pointer' : 'default'"
                      [title]="kart()?.konum?.koordinat ? (kart().konum.koordinat.lat + ', ' + kart().konum.koordinat.lng) : ''"
                      (click)="miSahip && tiklandiKonumDuzenle()">
                    <i class="map marker alternate icon"></i>
                    {{ kart().konum.yerIsmi }}
                    @if (miSahip) {
                    <i class="close icon"
                       style="margin-left:2px;font-size:0.7em;opacity:0.7;cursor:pointer;"
                       nz-popconfirm
                       nzPopconfirmTitle="Konum silinsin mi?"
                       nzOkText="Evet"
                       nzCancelText="İptal"
                       nzOkDanger
                       (click)="$event.stopPropagation();"
                       (nzOnConfirm)="kart().konum=null;kartGuncellePublic({konum:null});CD.detectChanges();"></i>
                    }
                </span>
                } @else if (miSahip) {
                <span class="ui basic mini label"
                      style="border-radius: 50vh; cursor: pointer;"
                      (click)="tiklandiKonumDuzenle()">
                    <i class="map marker alternate icon"></i>
                    Konum
                </span>
                }
            </div>
            <div class="description"
                 style="display: flex;">
                <!-- NOT: Orta Sol Bölme Bayrak Kurdela Bölgesi -->
                <div style="width: 35px;margin-right: 5px;">
                    <div class="buyut hover:buyut-1 active:buyut-1"
                         [title]="kart()?.veri?.solSimge?.aciklama ?? ''"
                         [style.background]="kart()?.veri?.solSimge?.renkArka ?? 'blue'"
                         [style.color]="kart()?.veri?.solSimge?.renkYazi ?? 'white'"
                         style="display: flex;align-items: center;justify-content: center;width: 35px;height: 35px;background: blue;color:white;overflow: hidden;text-align: center;border-radius: 3px;cursor: pointer;"
                         (click)="tiklandiBayrakDuzenle()">
                        {{kart()?.veri?.solSimge?.baslik}}
                    </div>
                </div>
                <!-- NOT:  Orta Sağ Bölme Text Editor vs. -->
                <div style="flex: 1;">

                    @switch (kart()?.turu) {
                    @case ("KART") {
                    <div class="description"
                         style="display: flex;">
                        <!-- NOT:  Orta Sağ Bölme Text Editor vs. -->
                        <div style="flex: 1;">

                            <fikoyt-icerikler [icerikler]="kart()?.veri?.icerikler"
                                              [kart]="kart()"
                                              [duzenlemeModunda]="duzenlemeModunda"
                                              (duzenlemeBaslatildi)="kartDuzenlemeModu(kart())"></fikoyt-icerikler>

                        </div>

                    </div>
                    }
                    @case ("UYAR_DOKUM") {

                    }
                    }

                    <!-- <progress
                              [value]="100"
                              max="100"
                              style="width: 100%;"></progress> -->

                    <!-- <div class="ui divider"></div> -->

                    <!-- NOT:  İçerik Sayfalama -->
                    <div style="display: flex;">

                        <!-- 
                        <span style="margin-right: auto;">
                            <div class="circular ui icon red mini button"
                                 title="Sayfa Sil"
                                 [style.visibility]="kart()?.veri.icerikler.length<=1 ? 'hidden':'visible'"
                                 nz-wave
                                 nz-popconfirm
                                 nzPopconfirmTitle="İçerik Silinecek Eminmisiniz?"
                                 nzOkText="Evet"
                                 nzCancelText="İptal"
                                 nzOkDanger
                                 (nzOnConfirm)="tiklandiIcerikSil($event)">
                                <i class="icon trash"></i>
                            </div>

                            <div class="circular ui icon red mini button"
                                 title="Tüm Sayfaları Sil"
                                 [style.visibility]="kart()?.veri.icerikler.length>3 ? 'visible':'hidden'"
                                 nz-wave
                                 nz-popconfirm
                                 nzPopconfirmTitle="Tüm İçerikler Silinecek Eminmisiniz?"
                                 nzOkText="Evet"
                                 nzCancelText="İptal"
                                 nzOkDanger
                                 (nzOnConfirm)="tiklandiTumIcerikleriSil($event)">
                                <i class="calendar times outline icon"></i>
                            </div>

                        </span>

                        <span [style.visibility]="kart()?.veri.icerikler.length<=1 ? 'hidden':'visible'">

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


                            <div class="circular ui icon blue mini button"
                                 nz-wave
                                 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)+' / '+ (kart()?.veri?.icerikler.length ?? "0") }}
                            </a>

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

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

                        </span> -->

                        <span style="margin-left: auto;">


                        </span>

                    </div>

                </div>

            </div>
        </div>
        <!-- NOT:  Alt Bölme -->
        <div class="extra content p-0">

            <!-- Etkileşim Özet Satırı -->
            @if (toplamIfadeSayisi > 0 || kart()?.yorumSayisi > 0 || kart()?.yeFikolaSayisi > 0) {
            <div class="ifade-ozet">
                @for (turu of [IIfadeTuru.BEGENDI, IIfadeTuru.KALP, IIfadeTuru.GULDU, IIfadeTuru.SASKIN,
                IIfadeTuru.UZGUN, IIfadeTuru.KIZGIN]; track turu) {
                @if (ifadeSayisi(turu) > 0) {
                <span class="ifade-ozet-item"
                      [title]="IfadeBilgi[turu].isim + ' ' + ifadeSayisi(turu)"
                      (click)="tiklandiBegenenler($event)">
                    {{ IfadeBilgi[turu].simge }}<small>{{ ifadeSayisi(turu) }}</small>
                </span>
                }
                }
                @if (toplamIfadeSayisi > 0) {
                <span class="ifade-ozet-toplam"
                      (click)="tiklandiBegenenler($event)"
                      style="cursor:pointer;">{{ toplamIfadeSayisi }} kişi</span>
                }
                @if (kart()?.yorumSayisi > 0) {
                <span class="ifade-ozet-item etkilesim-sayac"
                      title="Yorumlar"
                      (click)="tiklandiAltKartlar()">
                    💬<small>{{ kart().yorumSayisi }}</small>
                </span>
                }
                @if (kart()?.yeFikolaSayisi > 0) {
                <span class="ifade-ozet-item etkilesim-sayac"
                      title="YeFikola">
                    🔄<small>{{ kart().yeFikolaSayisi }}</small>
                </span>
                }
            </div>
            }

            @if (kart()?.parametreler?.length > 0) {
            <button nz-button
                    nzType="link"
                    nzSize="small"
                    (click)="parametreleriGoster[0] = !parametreleriGoster[0];CD.detectChanges();">Parametreler</button>

            @let parametreleriGoster = [false];
            @if (parametreleriGoster[0]) {
            <nz-divider></nz-divider>
            <div class="p-3">
                <fikoyt-parametreler [(parametreler)]="kart().parametreler"></fikoyt-parametreler>
            </div>
            }
            }

            <nz-divider></nz-divider>

            <!-- Düzenleme Modu Butonları -->
            @if (duzenlemeModunda) {
            <div
                 style="display: flex; gap: 8px; justify-content: flex-end; padding: 8px 0; border-top: 1px solid var(--py-bolucu);">
                <button nz-button
                        nzSize="small"
                        nzType="default"
                        [disabled]="duzenlemeMesgul"
                        aria-label="Düzenlemeyi iptal et"
                        (click)="kartDuzenlemeIptal()">
                    <i class="close icon"></i> İptal
                </button>
                <button nz-button
                        nzSize="small"
                        nzType="primary"
                        [nzLoading]="duzenlemeMesgul"
                        [disabled]="duzenlemeMesgul"
                        aria-label="Değişiklikleri kaydet"
                        (click)="kartDuzenlemeKaydet()">
                    @if (!duzenlemeMesgul) {
                    <i class="save icon"></i>
                    }
                    Kaydet
                </button>
            </div>
            }

            <!-- Aksiyon Butonları -->
            <div class="kart-aksiyonlar"
                 style="position: relative;"
                 role="toolbar"
                 aria-label="Kart etkileşimleri">

                <!-- İfade Seçim Popup (butonun üstünde) -->
                @if (ifadeSecimAcik) {
                <div class="ifade-popup"
                     role="listbox"
                     aria-label="İfade seçimi">
                    @for (turu of [IIfadeTuru.BEGENDI, IIfadeTuru.KALP, IIfadeTuru.GULDU, IIfadeTuru.SASKIN,
                    IIfadeTuru.UZGUN, IIfadeTuru.KIZGIN]; track turu) {
                    <button class="ifade-item"
                            (click)="tiklandiIfade(turu)"
                            [class.aktif]="aktifIfadem === turu"
                            [class.ifade-burst]="ifadeBurstTuru === turu"
                            [title]="IfadeBilgi[turu].isim"
                            [attr.aria-label]="IfadeBilgi[turu].isim"
                            [attr.aria-selected]="aktifIfadem === turu"
                            role="option">
                        <span class="ifade-emoji">{{ IfadeBilgi[turu].simge }}</span>
                    </button>
                    }
                </div>
                }

                <button nz-button
                        nz-wave
                        nzType="text"
                        nzBlock
                        nzSize="small"
                        class="aksiyon-btn"
                        aria-label="İfade seç"
                        [attr.aria-expanded]="ifadeSecimAcik"
                        (click)="tiklandiIfadeMenu()">
                    @if (aktifIfadem) {
                    <span class="ifade-aktif-simge">{{ IfadeBilgi[aktifIfadem].simge }}</span>
                    <span [style.color]="IfadeBilgi[aktifIfadem].renk">{{ IfadeBilgi[aktifIfadem].isim }}</span>
                    } @else {
                    <i class="thumbs up outline icon"></i> İfade
                    }
                </button>

                <button nz-button
                        nz-wave
                        nzType="text"
                        nzBlock
                        nzSize="small"
                        class="aksiyon-btn"
                        aria-label="YeFikola - Paylaş"
                        (click)="tiklandiYeFikola()">
                    <i class="retweet icon"></i> YeFikola
                    @if (kart()?.yeFikolaSayisi > 0) {
                    <span class="aksiyon-sayac">({{ kart().yeFikolaSayisi }})</span>
                    }
                </button>

                @if (gosterAltKartlarButon() ?? true){
                <button nz-button
                        nz-wave
                        nzType="text"
                        nzBlock
                        nzSize="small"
                        class="aksiyon-btn"
                        aria-label="Yorumlar"
                        [attr.aria-expanded]="altKartlarAcik"
                        (click)="tiklandiAltKartlar()"
                        [routerLink]="['/🧩','🕸', kart()?._id]">
                    <i class="comment outline icon"></i>
                    Alt Kartlar
                    @if (kart()?.yorumSayisi > 0 || altKartlar.length > 0) {
                    <span class="aksiyon-sayac">({{ kart()?.yorumSayisi ?? altKartlar.length }})</span>
                    }

                </button>
                }

            </div>

            <!-- Alt Kartlar Bölümü -->
            @if (altKartlarAcik) {
            <div class="alt-kartlar-bolumu py-soluk-arka"
                 style="padding: 8px 12px; border-top-width: 1px; border-top-style: solid;">
                <div style="display: flex; align-items: center; margin-bottom: 8px;">
                    <span style="font-size: 12px; font-weight: 600; color: var(--py-metin-ikincil);">Alt Kartlar</span>
                    <a style="margin-left: auto; font-size: 11px; color: #1890ff; cursor: pointer;"
                       [routerLink]="['/🧩','🕸', kart()?._id]">
                        Tümünü Gör
                    </a>
                </div>

                <!-- Hızlı Alt Kart Ekleme -->
                @if (!altKartGenisMod) {
                <div style="display: flex; gap: 6px; margin-bottom: 10px;">
                    <input nz-input
                           nzSize="small"
                           placeholder="Alt kart ekle..."
                           aria-label="Alt kart metni"
                           [(ngModel)]="yeniAltKartMetni"
                           (keydown.enter)="altKartEkle()"
                           (keydown.escape)="altKartlarAcik = false; CD.detectChanges();"
                           [disabled]="altKartGonderiliyor"
                           style="flex: 1; font-size: 12px; border-radius: 16px;" />
                    <button nz-button
                            nzSize="small"
                            nzType="primary"
                            nzShape="circle"
                            [disabled]="!yeniAltKartMetni?.trim() || altKartGonderiliyor"
                            [nzLoading]="altKartGonderiliyor"
                            aria-label="Alt kart gönder"
                            (click)="altKartEkle()">
                        @if (!altKartGonderiliyor) {
                        <i class="paper plane icon"
                           style="margin: 0;"></i>
                        }
                    </button>
                    @if (altKartSablonlari.length > 0) {
                    <button nz-button
                            nzSize="small"
                            nzType="dashed"
                            nzShape="circle"
                            title="Şablonlu alt kart ekle"
                            (click)="altKartGenisMod = true; CD.detectChanges();">
                        <i class="windows icon"
                           style="margin: 0;"></i>
                    </button>
                    }
                </div>
                } @else {
                <!-- Genişletilmiş Alt Kart: Paylaş Kutusu -->
                <div style="margin-bottom: 10px;">
                    <div style="display: flex; align-items: center; margin-bottom: 6px;">
                        <span style="font-size: 11px; color: var(--py-metin-ikincil);">Şablonlu alt kart ekle</span>
                        <button nz-button
                                nzSize="small"
                                nzType="text"
                                style="margin-left: auto;"
                                (click)="altKartGenisMod = false; CD.detectChanges();">
                            <i class="close icon"
                               style="margin: 0;"></i> Basit mod
                        </button>
                    </div>
                    <fikoyt-paylas-kutusu [kart]="altKartPaylasKart"
                                          [parametreSetleri]="altKartSablonlari"
                                          [parametreSetiZorunlu]="true"
                                          [taslakDevreDisi]="true"
                                          (paylasimYapildi)="altKartlariYukle(); altKartGenisMod = false; altKartHesaplamaSifirla(); CD.detectChanges();">
                    </fikoyt-paylas-kutusu>
                </div>
                }

                <!-- Yükleniyor -->
                @if (altKartlarYukleniyor) {
                <div style="text-align: center; padding: 12px; color: var(--py-metin-ucuncul); font-size: 12px;">
                    <i class="spinner loading icon"></i> Yükleniyor...
                </div>
                }

                <!-- Alt Kart Listesi -->
                @for (altKart of altKartlar; track altKart._id) {
                <div
                     style="margin-left: 8px; border-left: 2px solid var(--py-bolucu); padding-left: 8px; margin-bottom: 6px;">
                    <fikoyt-kart-kok [kart]="altKart"
                                     (kartGuncellendi)="altKartlar[$index] = $event; CD.detectChanges()"></fikoyt-kart-kok>
                </div>
                }

                @if (!altKartlarYukleniyor && altKartlar.length === 0) {
                <div style="text-align: center; padding: 8px; color: var(--py-metin-devre-disi); font-size: 12px;">
                    Henüz alt kart yok
                </div>
                }
            </div>
            }

        </div>



    </div>
</div>
}

<!-- Sayfa Bilgi Balon Template (aynı yüz etiket balonu) -->
<ng-template #sayfaBalonTpl>
    <kisi-balon-v2 *ngIf="sayfaBalonKisi"
                   [kisi]="sayfaBalonKisi"
                   [fapiUrl]="FikoYT.fapiUrl"
                   (kapat)="sayfaBalonAcik=false;CD.detectChanges();">
    </kisi-balon-v2>
</ng-template>