/**
 * Ambient — hafif atmosfer (açık tema uyumlu)
 * Koyu override YOK; light-premium.css ile birlikte çalışır.
 */

@media (prefers-reduced-motion: no-preference) {
    @keyframes ambient-drift {
        0%, 100% { opacity: 0.7; transform: translate(0, 0); }
        50% { opacity: 1; transform: translate(1%, -0.5%); }
    }
}

.app-layout::before,
body:has(.home-header)::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 35% at 10% 0%, rgba(201, 162, 39, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 90% 5%, rgba(191, 90, 242, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 35% 25% at 70% 100%, rgba(255, 159, 10, 0.04) 0%, transparent 45%);
}

@media (prefers-reduced-motion: no-preference) {
    .app-layout::before,
    body:has(.home-header)::before {
        animation: ambient-drift 24s ease-in-out infinite;
    }
}

.app-main { position: relative; z-index: 1; }

/* Header — iOS frosted glass */
.app-header,
.home-header {
    background: var(--glass) !important;
    backdrop-filter: blur(var(--glass-blur, 20px)) saturate(1.8);
    -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(1.8);
    border-bottom: 1px solid var(--separator) !important;
    box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.04);
}

.app-logo span,
.home-logo span {
    background: linear-gradient(135deg, var(--accent-light), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.app-nav a.active,
.app-nav-link.active {
    color: var(--gold-700, #7a6118) !important;
    background: var(--primary-soft) !important;
    box-shadow: none !important;
}

.nav-profile-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.nav-profile-btn:hover,
.nav-profile-btn[aria-expanded="true"] {
    background: var(--surface-2);
    border-color: rgba(201, 162, 39, 0.25);
    box-shadow: var(--shadow-sm);
}

.nav-profile-avatar {
    border: 1.5px solid var(--separator);
    box-shadow: none;
}

.nav-profile-menu {
    background: var(--glass-heavy, rgba(255, 255, 255, 0.92)) !important;
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid var(--separator) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-lg, 16px);
}

.nav-profile-menu-head {
    border-bottom-color: var(--separator) !important;
}

.nav-profile-role-badge {
    color: var(--gold-700, #7a6118);
    background: var(--primary-soft);
    border: 1px solid rgba(201, 162, 39, 0.2);
    box-shadow: none;
}
.nav-profile-role-badge.musician {
    color: #9b4dca;
    background: var(--musician-soft);
    border-color: rgba(191, 90, 242, 0.22);
}

.nav-profile-menu a:hover {
    background: var(--fill-tertiary, #f2f2f7) !important;
    color: var(--text) !important;
}

.nav-profile-logout {
    color: var(--error) !important;
    border-top-color: var(--separator) !important;
    text-shadow: none;
}
.nav-profile-logout:hover {
    background: var(--error-soft) !important;
    box-shadow: none !important;
}

/* Kartlar — live.css artık koyu yapmaz */
.job-id-card {
    background: var(--surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
}
.job-id-card:hover {
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.06) !important;
}

.auth-card {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dashboard-page .dash-hero {
    background: linear-gradient(145deg, var(--primary-soft) 0%, var(--surface) 60%);
    border-color: var(--border);
    box-shadow: var(--shadow-card);
}
.dashboard-page .dash-stat {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
.dashboard-page .dash-stat-value {
    color: var(--primary);
    text-shadow: none;
}

.btn-primary:hover {
    box-shadow: 0 4px 14px var(--primary-glow) !important;
}