/* ============================================================
   Profil Popup — header profil menüsünden açılan kompakt kart.
   UserCard popup standardının (assets/css/UserCard/popup.css) kardeşi.
   Mevcut Genel/Ayarlar partial'ları forma DOKUNULMADAN gövdede host edilir.
   Renkler var(--logi-theme-*) → light + dark otomatik uyumlu.
   ============================================================ */

/* ---------- Overlay ---------- */
.profilepopup-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000000000;
    padding: 24px;
    background-color: var(--logi-theme-overlay);
}
.profilepopup-overlay.is-active {
    display: flex;
    animation: profilepop-fade 0.18s ease;
}
@keyframes profilepop-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Kart ---------- */
.profilepopup {
    width: 620px;
    height: 600px;          /* SABİT boyut — içeriğe göre büyüyüp küçülmez */
    max-width: 96vw;
    max-height: 90vh;       /* küçük ekranda taşmasın */
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--logi-theme-bg-card);
    box-shadow: 0 24px 70px var(--logi-theme-shadow-color-strong);
    animation: profilepop-rise 0.2s ease;
}
@keyframes profilepop-rise { from { transform: translateY(12px) scale(0.99); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Başlık ---------- */
.profilepopup-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--logi-theme-border);
    background-color: var(--logi-theme-bg-card);
}
.profilepopup-head-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: radial-gradient(120% 120% at 30% 25%, rgba(129, 140, 248, 0.30), rgba(99, 102, 241, 0.16) 60%, rgba(79, 70, 229, 0.10));
    box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.28), inset 0 -3px 10px rgba(49, 46, 129, 0.14), 0 4px 12px rgba(121, 123, 242, 0.18);
}
.profilepopup-head-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profilepopup-head-avatar .profilepopup-initials {
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--logi-theme-primary);
}
.profilepopup-head-text { flex: 1; min-width: 0; }
.profilepopup-head-text h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--logi-theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profilepopup-head-sub {
    font-size: 12px;
    line-height: 1.2;
    color: var(--logi-theme-text-muted);
}
.profilepopup-close {
    border: none;
    background: transparent;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--logi-theme-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.profilepopup-close:hover { background-color: var(--logi-theme-bg-hover); color: var(--logi-theme-text-primary); }

/* ---------- Sekme çubuğu ---------- */
.profilepopup-tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--logi-theme-border);
}
.profilepopup-tab {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 9px 13px;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    color: var(--logi-theme-text-secondary);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.profilepopup-tab i { font-size: 12px; }
.profilepopup-tab:hover { color: var(--logi-theme-text-primary); }
.profilepopup-tab.active { color: var(--logi-theme-primary); border-bottom-color: var(--logi-theme-primary); font-weight: 600; }

/* ---------- Gövde ---------- */
.profilepopup-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    background-color: var(--logi-theme-bg-body);
}
.profilepopup-body::-webkit-scrollbar { width: 9px; }
.profilepopup-body::-webkit-scrollbar-thumb { border-radius: 6px; background-color: var(--logi-theme-scrollbar-thumb); }

.profilepopup-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 44px 0;
    color: var(--logi-theme-text-muted);
    font-size: 13px;
}

/* ============================================================
   GÖVDEDEKI FORM — popup bağlamında kompakt (forma dokunulmaz).
   Not: Aşağıdaki override'lar global form CSS'ini (logitera-form-theme /
   new-form-extended) ezmek zorunda; kaynak specificity'yi kontrol
   edemediğimiz için !important + .profilepopup-body scope kullanılır.
   ============================================================ */

/* Partial kendi başlık kartını taşıyor → popup başlığı zaten var, gizle */
.profilepopup-body .new-form-header { display: none !important; }

/* Konteyner iç boşluğunu sıfırla (popup gövdesi zaten padding veriyor) */
.profilepopup-body .new-form-container { padding: 0 !important; margin: 0 !important; }

/* Bölüm kartları arası kompakt */
.profilepopup-body .new-form-section { margin: 0 0 12px 0 !important; }

/* Footer'ı gövde dibine sabitle → "Kaydet" her zaman görünür */
.profilepopup-body .new-form-footer {
    position: sticky;
    bottom: -16px;
    margin: 12px -16px -16px -16px;
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    background-color: var(--logi-theme-bg-card);
    border-top: 1px solid var(--logi-theme-border);
    z-index: 3;
}

/* ============================================================
   HEADER PROFİL DROPDOWN — kompakt (4.png)
   Not: customize.css bu menüyü !important ile tanımlıyor ve FROZEN.
   Head.cshtml'de bu dosya customize'dan SONRA yüklendiği için eşdeğer
   specificity + !important ile kompaktlaştırıyoruz.
   ============================================================ */
.profile-dropdown .dropdown-menu .dropdown-content {
    min-width: 236px !important;
    border-radius: 14px !important;
}
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-head {
    padding: 12px 14px !important;
    gap: 10px;
}
.profile-dropdown .dropdown-menu .dropdown-content a.dropdown-item,
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-item {
    padding: 8px 14px !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-item svg,
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-item i {
    margin-right: 9px !important;
}
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-item .meta span:first-child { font-size: 13px; }
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-item .meta span:nth-child(2) { font-size: 11px; opacity: 0.8; }
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-item.is-button { padding: 10px 12px !important; }
.profile-dropdown .dropdown-menu .dropdown-content .logout-button {
    margin-top: 6px !important;
    padding-top: 10px !important;
}

/* Dropdown başlık avatarı — tam yuvarlak + kompakt (squircle/köşe kalıntısını kaldır) */
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-head .h-avatar,
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-head .h-avatar.is-large {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    /* Soft dolgu: padding'li logo/şeffaf görsel temiz bir daire içinde otursun */
    background: radial-gradient(120% 120% at 30% 25%, rgba(129, 140, 248, 0.28), rgba(99, 102, 241, 0.14) 60%, rgba(79, 70, 229, 0.10)) !important;
    box-shadow: inset 0 0 0 1px rgba(121, 123, 242, 0.18) !important;
}
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-head .h-avatar img,
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-head img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-head .profile-initials-avatar--large {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
}

/* ---- LIGHT tema varyantları ----
   logitera-form-theme.css'teki body:not(.is-dark) kuralları 5 class ile daha
   yüksek specificity'de; eşit/üstün specificity için biz de body:not(.is-dark)
   ile yazıyoruz (bu dosya en son yüklendiği için eşitlikte kazanır). */
body:not(.is-dark) .profile-dropdown .dropdown-menu .dropdown-content .dropdown-head {
    padding: 12px 14px !important;
    gap: 10px;
}
body:not(.is-dark) .profile-dropdown .dropdown-menu .dropdown-content .dropdown-head .h-avatar,
body:not(.is-dark) .profile-dropdown .dropdown-menu .dropdown-content .dropdown-head .h-avatar.is-large {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: radial-gradient(120% 120% at 30% 25%, rgba(129, 140, 248, 0.26), rgba(99, 102, 241, 0.12) 60%, rgba(79, 70, 229, 0.08)) !important;
    box-shadow: inset 0 0 0 1px rgba(121, 123, 242, 0.16) !important;
}
/* Avatar görseli — kesin daire, cover, sert gri çerçeve yerine yumuşak halka */
body:not(.is-dark) .profile-dropdown .dropdown-menu .dropdown-content .dropdown-head .h-avatar img,
body:not(.is-dark) .profile-dropdown .dropdown-menu .dropdown-content .dropdown-head img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: none !important;
    box-shadow: 0 0 0 1px var(--logi-theme-border), 0 2px 6px rgba(79, 70, 229, 0.14) !important;
}

/* ============================================================
   AVATAR PLACEHOLDER — resim yokken YUMUŞAK/flu, TAM yuvarlak, estetik.
   Sert köşe / "mavi zarf" görünümü yerine soft radial gradient + hafif
   iç ışıma (frosted his). Pill + dropdown baş harf daireleri.
   ============================================================ */
.profile-initials-avatar {
    background: radial-gradient(120% 120% at 30% 25%, #818cf8 0%, #6366f1 45%, #4f46e5 100%) !important;
    color: #fff !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.30),
                inset 0 -3px 8px rgba(49, 46, 129, 0.35),
                0 2px 8px rgba(79, 70, 229, 0.22) !important;
}

/* ============================================================
   PILL AVATAR (layout üst bar) — kesin daire + yumuşak halka.
   customize.css'teki sert gri ring yerine tema token'lı soft ring.
   ============================================================ */
.layout-left-menu.right .profile-pill-avatar-wrap > img {
    border: 2px solid var(--logi-theme-bg-card) !important;
    box-shadow: 0 0 0 1px var(--logi-theme-border), 0 2px 6px rgba(79, 70, 229, 0.16) !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}
.layout-left-menu.right .profile-pill:hover .profile-pill-avatar-wrap > img {
    box-shadow: 0 0 0 1px #797bf2, 0 2px 8px rgba(121, 123, 242, 0.28) !important;
}

/* ============================================================
   HEADER AVATAR = HER ZAMAN BAŞ-HARF DAİRESİ
   Neden: user.photo dolu ama dosya eksik/logo olduğunda API bir placeholder
   (kare "zarf"/no-image) görseli döndürüyor; onerror tetiklenmiyor, kutu kalıyor.
   Logo-vs-yüz ayrımı CSS/JS ile güvenilir yapılamadığı için küçük header/dropdown
   ve popup başlığında görseli gizleyip yumuşak yuvarlak baş-harf dairesini gösteriyoruz.
   (Gerçek fotoğraf profil formundaki yükleyicide görünür/yönetilir.)
   Geri almak için: bu bloğu sil.
   ============================================================ */
.layout-left-menu.right .profile-pill-avatar-wrap > img,
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-head .h-avatar img,
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-head img,
.profilepopup-head-avatar img {
    display: none !important;
}
.layout-left-menu.right .profile-pill-avatar-wrap .profile-initials-avatar,
.profile-dropdown .dropdown-menu .dropdown-content .dropdown-head .profile-initials-avatar,
.profilepopup-head-avatar .profilepopup-initials {
    display: flex !important;
}