/**
 * SOSYALVADI HESAP FORMLARI 2026
 * Giriş, Kayıt, Profil Düzenle, Şifre Değiştir — renk/yazı token uyumlu
 * Light + Dark mod otomatik uyum
 * @version 2026.2.22
 */

/* Ortak layout */
.sv-auth-section,
.giris-section,
.profil-duzenle-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-h, 64px) + 2rem) var(--space-4, 16px) var(--space-8, 48px);
}

.sv-auth-card,
.giris-card,
.profil-duzenle-card {
    max-width: 420px;
    width: 100%;
    padding: var(--space-6, 24px);
    animation: svAuthCardReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes svAuthCardReveal {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .sv-auth-card, .giris-card, .profil-duzenle-card { animation: none; }
}

.profil-duzenle-section {
    align-items: flex-start;
}

.profil-duzenle-card {
    max-width: 560px;
    border-left: 4px solid rgba(66, 133, 244, 0.5);
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%);
    box-shadow: 0 4px 24px rgba(66, 133, 244, 0.08), 0 2px 12px rgba(0,0,0,0.04);
}
.profil-duzenle-card:hover {
    border-left-color: rgba(66, 133, 244, 0.7);
    box-shadow: 0 8px 32px rgba(66, 133, 244, 0.12);
}
.profil-avatar-upload-wrap {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.06), rgba(139, 92, 246, 0.04));
    border: 1px solid rgba(66, 133, 244, 0.2);
    border-radius: var(--radius-2, 12px);
    padding: var(--space-4, 16px);
}
.profil-avatar-upload-btn {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #4285f4, #34a853) !important;
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.profil-avatar-upload-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.35);
}
.profil-duzenle-btn {
    background: linear-gradient(135deg, #4285f4, #34a853) !important;
    color: #fff !important;
    border: none;
    font-weight: 600;
}
.profil-avatar-preview-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(66, 133, 244, 0.06));
    border: 2px dashed rgba(66, 133, 244, 0.3);
    border-radius: 14px;
    padding: var(--space-3, 12px);
}
.profil-duzenle-cancel, .profil-duzenle-sifre {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(52, 168, 83, 0.06)) !important;
    border: 1px solid rgba(66, 133, 244, 0.3) !important;
    color: #1565c0 !important;
}
.profil-duzenle-cancel:hover, .profil-duzenle-sifre:hover {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.18), rgba(52, 168, 83, 0.1)) !important;
    border-color: rgba(66, 133, 244, 0.5) !important;
}
[data-theme="dark"] .profil-duzenle-card {
    background: linear-gradient(135deg, rgba(30,36,48,0.95) 0%, rgba(51,65,85,0.9) 100%);
    border-left-color: rgba(66, 133, 244, 0.6);
}
[data-theme="dark"] .profil-avatar-upload-wrap {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.12), rgba(139, 92, 246, 0.08));
    border-color: rgba(66, 133, 244, 0.3);
}

/* Başlık — token typography */
.sv-auth-title,
.giris-title,
.profil-duzenle-title {
    font-size: var(--fs-xl, 1.5rem);
    font-weight: var(--fw-bold, 700);
    color: var(--text);
    margin: 0 0 var(--space-5, 20px);
    letter-spacing: -0.02em;
}

.giris-title,
.sv-auth-title {
    text-align: center;
}

/* Başarı mesajı — token color-success */
.sv-auth-success,
.giris-success,
.profil-duzenle-success {
    background: rgba(5, 150, 105, 0.12);
    color: var(--color-success);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-1, 8px);
    margin-bottom: var(--space-4, 16px);
    font-size: var(--fs-sm, 0.9rem);
}

.sv-auth-success a,
.giris-success a,
.profil-duzenle-success a {
    color: var(--color-success);
    font-weight: var(--fw-semibold, 600);
    text-decoration: none;
}

.sv-auth-success a:hover,
.giris-success a:hover,
.profil-duzenle-success a:hover {
    text-decoration: underline;
}

/* Hata mesajı — token color-error */
.sv-auth-error,
.giris-error,
.profil-duzenle-error {
    background: rgba(220, 38, 38, 0.12);
    color: var(--color-error);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-1, 8px);
    margin-bottom: var(--space-4, 16px);
    font-size: var(--fs-sm, 0.9rem);
    border-left: 4px solid var(--color-error);
    animation: svErrorShake 0.4s ease;
}
@keyframes svErrorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* Form alanları — token border, text */
.sv-auth-field,
.giris-field,
.profil-duzenle-field {
    margin-bottom: var(--space-4, 16px);
}

.sv-auth-field label,
.giris-field-hint {
    margin: 6px 0 0;
    font-size: 0.85rem;
}
.giris-field-hint a {
    color: var(--primary);
    text-decoration: none;
}
.giris-field-hint a:hover {
    text-decoration: underline;
}
.giris-field label,
.profil-duzenle-field label {
    display: block;
    font-weight: var(--fw-semibold, 600);
    font-size: var(--fs-sm, 0.9rem);
    color: var(--text);
    margin-bottom: var(--space-1, 4px);
}

.profil-duzenle-field .required {
    color: var(--color-error);
}

.sv-auth-field input,
.sv-auth-field textarea,
.giris-field input,
.profil-duzenle-field input,
.profil-duzenle-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--glass-border-edge, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-1, 8px);
    font-size: var(--fs-md, 1rem);
    background: var(--surface, rgba(255, 255, 255, 0.95));
    color: var(--text);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sv-auth-field input::placeholder,
.profil-duzenle-field textarea::placeholder {
    color: var(--muted);
}

.sv-auth-field input:focus,
.sv-auth-field textarea:focus,
.giris-field input:focus,
.profil-duzenle-field input:focus,
.profil-duzenle-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus, 0 0 0 3px rgba(37, 99, 235, 0.25)), 0 0 24px rgba(37, 99, 235, 0.08);
}

.profil-duzenle-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* Sosyal medya alanları */
.profil-duzenle-social-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2, 8px);
}
.profil-duzenle-social-group > label,
.profil-duzenle-hint {
    grid-column: 1 / -1;
}
.profil-duzenle-hint {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
}
@media (min-width: 480px) {
    .profil-duzenle-social-group {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}
.profil-duzenle-social-group input {
    margin: 0;
}

/* Avatar preview */
.profil-duzenle-avatar-preview {
    margin-top: var(--space-2, 8px);
}

.profil-duzenle-avatar-preview img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
}

/* Buton — token primary */
.sv-auth-btn,
.giris-btn,
.profil-duzenle-btn {
    padding: 14px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-1, 8px);
    font-size: var(--fs-md, 1rem);
    font-weight: var(--fw-semibold, 600);
    cursor: pointer;
    width: 100%;
    transition: opacity 0.2s ease;
}

.sv-auth-actions .sv-auth-btn {
    width: auto;
}

.sv-auth-btn:hover,
.giris-btn:hover,
.profil-duzenle-btn:hover {
    opacity: 0.92;
}

/* İptal / footer — token muted */
.sv-auth-cancel,
.profil-duzenle-cancel,
.giris-footer {
    color: var(--muted);
    font-size: var(--fs-sm, 0.95rem);
    text-decoration: none;
    font-weight: var(--fw-medium, 500);
}

.sv-auth-cancel:hover,
.profil-duzenle-cancel:hover {
    color: var(--primary);
}

.giris-footer {
    text-align: center;
    margin-top: var(--space-5, 20px);
}

/* İletişim formu honeypot (spam koruması) */
.sv-form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

.giris-footer a {
    color: var(--primary);
    text-decoration: none;
}

.giris-footer a:hover {
    text-decoration: underline;
}

/* Profil düzenle aksiyonlar */
.profil-duzenle-actions,
.sv-auth-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    margin-top: var(--space-6, 24px);
}

/* Dark mode — form arka planları ve mesaj tonları */
[data-theme="dark"] .sv-auth-field input,
[data-theme="dark"] .sv-auth-field textarea,
[data-theme="dark"] .giris-field input,
[data-theme="dark"] .profil-duzenle-field input,
[data-theme="dark"] .profil-duzenle-field textarea {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text);
}

[data-theme="dark"] .sv-auth-success,
[data-theme="dark"] .giris-success,
[data-theme="dark"] .profil-duzenle-success {
    background: rgba(52, 211, 153, 0.15);
}

[data-theme="dark"] .sv-auth-error,
[data-theme="dark"] .giris-error,
[data-theme="dark"] .profil-duzenle-error {
    background: rgba(248, 113, 113, 0.15);
}

/* Profil ayarları — modern renkli kutu */
.profil-ayarlari-card {
    max-width: 560px;
    border-left: 4px solid rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%);
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.08);
}
[data-theme="dark"] .profil-ayarlari-card {
    background: linear-gradient(135deg, rgba(30,36,48,0.95) 0%, rgba(51,65,85,0.9) 100%);
    border-left-color: rgba(139, 92, 246, 0.6);
}
.profil-ayarlari-fieldset {
    border: 1px solid var(--glass-border-edge, rgba(0,0,0,0.1));
    border-radius: var(--radius-2, 10px);
    padding: var(--space-5, 20px);
    margin-bottom: var(--space-5, 20px);
}
.profil-ayarlari-fieldset legend {
    font-weight: var(--fw-semibold, 600);
    color: var(--text);
    padding: 0 var(--space-2, 8px);
}
.profil-duzenle-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--glass-border-edge, rgba(0,0,0,0.1));
    border-radius: var(--radius-1, 8px);
    font-size: var(--fs-md, 1rem);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.profil-ayarlari-hint {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 6px 0 0;
}
.profil-ayarlari-toggles {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}
.profil-ayarlari-toggle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3, 12px);
    border-radius: var(--radius-1, 8px);
    background: rgba(0,0,0,0.02);
    cursor: pointer;
}
[data-theme="dark"] .profil-ayarlari-toggle {
    background: rgba(255,255,255,0.04);
}
.profil-ayarlari-toggle input[type="checkbox"] {
    margin-right: 10px;
    vertical-align: middle;
}
.profil-ayarlari-toggle span {
    font-weight: var(--fw-medium, 500);
    color: var(--text);
}
.profil-ayarlari-toggle small {
    font-size: 0.8rem;
    color: var(--muted);
    margin-left: 26px;
}
.profil-ayarlari-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-6, 24px) 0;
}
.profil-ayarlari-danger-text {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
}
.profil-ayarlari-danger-link {
    color: var(--color-error, #dc2626);
    text-decoration: none;
}
.profil-ayarlari-danger-link:hover {
    text-decoration: underline;
}

/* Avatar upload */
.profil-avatar-upload-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 16px);
    align-items: flex-start;
}
.profil-avatar-preview-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface);
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.profil-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profil-avatar-actions {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
}
.profil-avatar-upload-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-1, 8px);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
.profil-avatar-upload-btn:hover {
    opacity: 0.9;
}
.profil-avatar-divider {
    font-size: 0.85rem;
    color: var(--muted);
}
.profil-avatar-actions input[type="url"] {
    flex: 1;
    min-width: 160px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-1, 8px);
    font-size: 0.9rem;
}