@if (FikoYT.kimlik.aktifKullaniciJson()) {
<div class="km">

  <!-- Profile Header (her zaman görünür) -->
  <div class="km-header">
    <div class="km-header-bg"></div>
    <div class="km-profile">
      <div class="km-avatar-ring">
        <img class="km-avatar"
             [src]="FikoYT.env.adres.fapiUrl+'/fikoyt.com.FikoYT.sistem.aktif-kullanici.profilResmi?boyut=128x?&t='+FikoYT.parametreler['t']+'&quality=40'"
             alt="avatar"
             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'" />
        <span class="km-avatar-fb" style="display:none">
          {{ (FikoYT.kimlik.aktifKullaniciJson().isim?.[0] || '') + (FikoYT.kimlik.aktifKullaniciJson().soyIsim?.[0] || '') }}
        </span>
      </div>
      <div class="km-identity">
        <span class="km-name">{{ FikoYT.kimlik.aktifKullaniciJson().isim }} {{ FikoYT.kimlik.aktifKullaniciJson().soyIsim }}</span>
        <span class="km-email">{{ FikoYT.kimlik.aktifKullaniciJson()?.ePosta }}</span>
      </div>
    </div>
  </div>

  <!-- Tabs -->
  <div class="km-tabs">
    <button class="km-tab" [class.km-tab--active]="aktifSekme === 'profil'" (click)="aktifSekme = 'profil'">
      <span>👤</span> Profil
    </button>
    <button class="km-tab" [class.km-tab--active]="aktifSekme === 'bildirimler'" (click)="aktifSekme = 'bildirimler'; bildirimSvc.bildirimleriYukle()">
      <span>🔔</span> Bildirimler
      @if (bildirimSvc.okunmamisSayisi() > 0) {
        <span class="km-badge">{{ bildirimSvc.okunmamisSayisi() > 99 ? '99+' : bildirimSvc.okunmamisSayisi() }}</span>
      }
    </button>
    <button class="km-tab" [class.km-tab--active]="aktifSekme === 'ayarlar'" (click)="aktifSekme = 'ayarlar'">
      <span>⚙️</span> Ayarlar
    </button>
  </div>

  <!-- Tab İçerikleri -->
  <div class="km-tab-content">

    <!-- ═══ Profil Sekmesi ═══ -->
    @if (aktifSekme === 'profil') {

    <!-- Status Pills -->
    <div class="km-status-row">
      <span class="km-pill" [class.km-pill--ok]="true" [class.km-pill--err]="false">
        <span class="km-pill-dot"></span> Internet
      </span>
      <span class="km-pill" [class.km-pill--ok]="FikoYT.io.bagli()" [class.km-pill--err]="!FikoYT.io.bagli()">
        <span class="km-pill-dot"></span> Sunucu
      </span>
    </div>

    <!-- Device Stats -->
    <div class="km-devices">
      <div class="km-device">
        <span class="km-device-icon">🖥️</span>
        <span class="km-device-val">{{ FikoYT.kimlik.cihazlar().desktop }}</span>
        <span class="km-device-lbl">Masaüstü</span>
      </div>
      <div class="km-device">
        <span class="km-device-icon">📱</span>
        <span class="km-device-val">{{ FikoYT.kimlik.cihazlar().mobile }}</span>
        <span class="km-device-lbl">Mobil</span>
      </div>
      <div class="km-device">
        <span class="km-device-icon">📟</span>
        <span class="km-device-val">{{ FikoYT.kimlik.cihazlar().tablet }}</span>
        <span class="km-device-lbl">Tablet</span>
      </div>
      <div class="km-device">
        <span class="km-device-icon">⚙️</span>
        <span class="km-device-val">{{ FikoYT.kimlik.cihazlar().machine }}</span>
        <span class="km-device-lbl">Makine</span>
      </div>
    </div>

    @if (FikoYT.kimlik.aktifKullaniciJson()?.sonGiris) {
      <div class="km-oturum-bilgi">
        <span class="km-oturum-ikon">🕓</span>
        <span class="km-oturum-metin">Son giriş: {{ zamanOnce(FikoYT.kimlik.aktifKullaniciJson().sonGiris) }}</span>
      </div>
    }
    <div class="km-oturum-bilgi">
      <span class="km-oturum-ikon">📍</span>
      <span class="km-oturum-metin">Toplam {{ toplamOturum }} aktif oturum</span>
    </div>

    <div class="km-sep"></div>

    <!-- Navigation -->
    <nav class="km-nav">
      <a class="km-nav-item" routerLink="/🏠/🏛" routerLinkActive="km-nav-active" [routerLinkActiveOptions]="{exact: true}">
        <span class="km-nav-icon">🏠</span>
        <span class="km-nav-text">Ana Sayfa</span>
      </a>
      <a class="km-nav-item" routerLink="/🏠/👨/👪" routerLinkActive="km-nav-active" [routerLinkActiveOptions]="{exact: false}">
        <span class="km-nav-icon">👥</span>
        <span class="km-nav-text">Arkadaşlar</span>
      </a>
      <a class="km-nav-item" routerLink="/🧍/💬" routerLinkActive="km-nav-active">
        <span class="km-nav-icon">💬</span>
        <span class="km-nav-text">Mesajlarım</span>
      </a>
      @if (superYoneticiMi) {
      <a class="km-nav-item km-nav-admin" routerLink="/🧩/👑" routerLinkActive="km-nav-active">
        <span class="km-nav-icon">👑</span>
        <span class="km-nav-text">Admin Panel</span>
        <span class="km-admin-badge">Admin</span>
      </a>
      }
    </nav>

    <div class="km-sep"></div>

    <button class="km-logout" (click)="tiklandiCikisYap()">
      <span class="km-logout-icon">🚪</span>
      Oturumu Kapat
    </button>

    }

    <!-- ═══ Bildirimler Sekmesi ═══ -->
    @if (aktifSekme === 'bildirimler') {

    <div class="km-bildirim-list">
      @if (bildirimSvc.bildirimler().length === 0) {
      <div class="km-empty">
        <span class="km-empty-icon">🔕</span>
        <span class="km-empty-text">Bildirim yok</span>
      </div>
      } @else {
        @for (b of bildirimSvc.bildirimler().slice(0, 5); track b._id || $index) {
        <div class="km-bildirim-item" [class.km-bildirim--okunmadi]="!b.okudu"
             (click)="bildirimTiklandi(b)">
          <span class="km-bildirim-avatar" [style.background]="bildirimSvc.olayTipBilgi(b.olay).renk + '18'" [style.color]="bildirimSvc.olayTipBilgi(b.olay).renk">
            {{ bildirimSvc.gondericBasHarfleri(b.gondericIsim) }}
          </span>
          <div class="km-bildirim-body">
            @if (b.gondericIsim) {
              <span class="km-bildirim-gonderici">{{ b.gondericIsim }}</span>
            }
            <span class="km-bildirim-msg">{{ b.mesaj }}</span>
            <span class="km-bildirim-zaman">{{ zamanOnce(b.tarih) }}</span>
          </div>
          <div class="km-bildirim-aksiyonlar">
            @if (!b.okudu) {
              <span class="km-bildirim-dot"></span>
            }
            <button class="km-bildirim-goz" (click)="$event.stopPropagation(); b.okudu ? bildirimSvc.okunmadiIsaretle(b._id!) : bildirimSvc.okunduIsaretle(b._id!)"
                    [title]="b.okudu ? 'Okunmadı yap' : 'Okundu yap'">
              {{ b.okudu ? '👁‍🗨' : '👁' }}
            </button>
          </div>
        </div>
        }
      }
    </div>

    <div class="km-sep"></div>

    <a class="km-nav-item km-nav-all" routerLink="/🏠/👨/🚨">
      <span class="km-nav-text">Tüm Bildirimleri Gör</span>
      <span class="km-nav-icon">→</span>
    </a>

    }

    <!-- ═══ Ayarlar Sekmesi ═══ -->
    @if (aktifSekme === 'ayarlar') {

    <div class="km-ayarlar">
      <!-- Tema Seçici -->
      <div class="km-ayar-grup">
        <span class="km-ayar-baslik">Tema</span>
        <div class="km-tema-grid">
          @for (tema of temaSvc.temalar; track tema.id) {
            <button class="km-tema-kart" [class.km-tema-kart--aktif]="temaSvc.aktifTema() === tema.id"
                    (click)="temaSvc.temaDegistir(tema.id)">
              <div class="km-tema-onizleme">
                <div class="km-tema-renk" [style.background]="tema.onizlemeRenkler[0]"></div>
                <div class="km-tema-renk" [style.background]="tema.onizlemeRenkler[1]"></div>
                <div class="km-tema-renk" [style.background]="tema.onizlemeRenkler[2]"></div>
              </div>
              <span class="km-tema-isim">{{ tema.baslik }}</span>
            </button>
          }
        </div>
        <div class="km-ayar-row">
          <span class="km-ayar-label">🌙 Karanlık Mod</span>
          <label class="km-toggle">
            <input type="checkbox" [ngModel]="temaSvc.karanlikMod()" [ngModelOptions]="{standalone: true}"
                   (ngModelChange)="temaSvc.karanlikToggle()" />
            <span class="km-toggle-slider"></span>
          </label>
        </div>
        <div class="km-ayar-row">
          <span class="km-ayar-label">🕐 Otomatik Koyu/Açık</span>
          <label class="km-toggle">
            <input type="checkbox" [ngModel]="temaSvc.temaZamanlama().acik" [ngModelOptions]="{standalone: true}"
                   (ngModelChange)="temaSvc.zamanlamaKaydet({acik: $event})" />
            <span class="km-toggle-slider"></span>
          </label>
        </div>
        @if (temaSvc.temaZamanlama().acik) {
          <div class="km-ayar-row km-tema-zamanlama-bilgi">
            <span class="km-zamanlama-metin">☀️ {{ temaSvc.temaZamanlama().gunduzSaat }}:00 — 🌙 {{ temaSvc.temaZamanlama().geceSaat }}:00</span>
          </div>
        }
      </div>

      <!-- Yazı Boyutu -->
      <div class="km-ayar-grup">
        <span class="km-ayar-baslik">Yazı Boyutu</span>
        <div class="km-boyut-slider">
          <span class="km-boyut-kucuk">A</span>
          <input type="range" min="12" max="20" step="1"
                 [ngModel]="temaSvc.yaziBoyutu()" [ngModelOptions]="{standalone: true}"
                 (ngModelChange)="temaSvc.yaziBoyutuDegistir($event)"
                 class="km-range" />
          <span class="km-boyut-buyuk">A</span>
          <span class="km-boyut-deger">{{ temaSvc.yaziBoyutu() }}px</span>
        </div>
      </div>

      <!-- Görünüm -->
      <div class="km-ayar-grup">
        <span class="km-ayar-baslik">Görünüm</span>
        <div class="km-ayar-row">
          <span class="km-ayar-label">🔤 Kompakt Yazı</span>
          <label class="km-toggle">
            <input type="checkbox" [(ngModel)]="ayarlar.kompaktYazi" [ngModelOptions]="{standalone: true}" />
            <span class="km-toggle-slider"></span>
          </label>
        </div>
      </div>

      <!-- Bildirimler -->
      <div class="km-ayar-grup">
        <span class="km-ayar-baslik">Bildirimler</span>
        <div class="km-ayar-row">
          <span class="km-ayar-label">🔊 Bildirim sesi</span>
          <label class="km-toggle">
            <input type="checkbox" [ngModel]="tercihSvc.tercihler().sesAcik" [ngModelOptions]="{standalone: true}"
                   (ngModelChange)="tercihSvc.kaydet({sesAcik: $event})" />
            <span class="km-toggle-slider"></span>
          </label>
        </div>
        <div class="km-ayar-row">
          <span class="km-ayar-label">🔔 Masaüstü bildirimi</span>
          <label class="km-toggle">
            <input type="checkbox" [ngModel]="tercihSvc.tercihler().masaustuAcik" [ngModelOptions]="{standalone: true}"
                   (ngModelChange)="tercihSvc.kaydet({masaustuAcik: $event})" />
            <span class="km-toggle-slider"></span>
          </label>
        </div>
        <div class="km-ayar-row">
          <span class="km-ayar-label">🔢 Tab sayacı</span>
          <label class="km-toggle">
            <input type="checkbox" [ngModel]="tercihSvc.tercihler().tabSayaciAcik" [ngModelOptions]="{standalone: true}"
                   (ngModelChange)="tercihSvc.kaydet({tabSayaciAcik: $event})" />
            <span class="km-toggle-slider"></span>
          </label>
        </div>
        <div class="km-ayar-row">
          <span class="km-ayar-label">🌙 Sessiz Saatler</span>
          <label class="km-toggle">
            <input type="checkbox" [ngModel]="tercihSvc.tercihler().sessizSaatAcik" [ngModelOptions]="{standalone: true}"
                   (ngModelChange)="tercihSvc.kaydet({sessizSaatAcik: $event})" />
            <span class="km-toggle-slider"></span>
          </label>
        </div>
        @if (tercihSvc.tercihler().sessizSaatAcik) {
          <div class="km-ayar-row km-sessiz-saat-row">
            <input type="time" class="km-time-input" [ngModel]="tercihSvc.tercihler().sessizBaslangic" [ngModelOptions]="{standalone: true}"
                   (ngModelChange)="tercihSvc.kaydet({sessizBaslangic: $event})" />
            <span class="km-sessiz-tire">—</span>
            <input type="time" class="km-time-input" [ngModel]="tercihSvc.tercihler().sessizBitis" [ngModelOptions]="{standalone: true}"
                   (ngModelChange)="tercihSvc.kaydet({sessizBitis: $event})" />
          </div>
        }
      </div>

      <!-- Olay Bildirimleri -->
      <div class="km-ayar-grup">
        <span class="km-ayar-baslik">Olay Bildirimleri</span>
        @for (tip of olayTipleri; track tip.olay) {
          <div class="km-ayar-row">
            <span class="km-ayar-label">{{ tip.etiket }}</span>
            <label class="km-toggle">
              <input type="checkbox" [ngModel]="tercihSvc.tercihler().olayTercihleri[tip.olay]" [ngModelOptions]="{standalone: true}"
                     (ngModelChange)="olayTercihDegistir(tip.olay, $event)" />
              <span class="km-toggle-slider"></span>
            </label>
          </div>
        }
      </div>

      <!-- Gizlilik -->
      <div class="km-ayar-grup">
        <span class="km-ayar-baslik">Gizlilik</span>
        <div class="km-ayar-row">
          <span class="km-ayar-label">🟢 Çevrimiçi Durumu</span>
          <label class="km-toggle">
            <input type="checkbox" [(ngModel)]="ayarlar.cevrimichiDurum" [ngModelOptions]="{standalone: true}" />
            <span class="km-toggle-slider"></span>
          </label>
        </div>
        <div class="km-ayar-row">
          <span class="km-ayar-label">👁️ Profili Herkese Aç</span>
          <label class="km-toggle">
            <input type="checkbox" [(ngModel)]="ayarlar.profilHerkesGorsun" [ngModelOptions]="{standalone: true}" />
            <span class="km-toggle-slider"></span>
          </label>
        </div>
      </div>
    </div>

    <div class="km-sep"></div>

    <a class="km-nav-item km-nav-all" routerLink="/🧍/🔨">
      <span class="km-nav-text">Tüm Ayarlar</span>
      <span class="km-nav-icon">→</span>
    </a>

    }

  </div>
</div>

} @else {

<div class="km km-login">
  <div class="km-login-header">
    <img class="km-login-logo"
         src="./simgeler/users.webp"
         alt="logo" width="64" height="64" />
    <span class="km-login-title">FikoYT'ye Giriş Yap</span>
    <span class="km-login-sub">Hesabınıza erişmek için giriş yapın</span>
  </div>

  <form class="km-login-form">
    <div class="km-field">
      <label class="km-field-label">Kullanıcı Adı</label>
      <div class="km-field-input">
        <span class="km-field-pre">👤</span>
        <input type="text" autocomplete="username" placeholder="Kullanıcı adınız"
               [(ngModel)]="form.kullaniciAdi" [ngModelOptions]="{standalone: true}" />
      </div>
    </div>
    <div class="km-field">
      <label class="km-field-label">Parola</label>
      <div class="km-field-input">
        <span class="km-field-pre">🔑</span>
        <input type="password" autocomplete="current-password" placeholder="Parolanız"
               [(ngModel)]="form.parola" [ngModelOptions]="{standalone: true}" />
      </div>
    </div>
    <button class="km-login-btn" type="button" (click)="this.FikoYT.kimlik.girisYap(this.form);">
      Giriş Yap
    </button>
  </form>

  <div class="km-login-footer">
    <a routerLink="/sifre-sifirla">Şifremi Unuttum</a>
    <a routerLink="/kayit">Hesap Oluştur</a>
  </div>
</div>

}