/* ========================================
   RATESELF - HOLOGRAPHIC THEME
   Futuristic • Premium • Modern
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
    --bg-dark: #0f0f1a;
    --bg-darker: #1a1025;
    --glass-bg: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
    --glass-hover: rgba(255,255,255,0.06);
    --holo-pink: #ff0080;
    --holo-cyan: #00ffff;
    --holo-purple: #7928ca;
    --neon-cyan: #00ffff;
    --neon-purple: #ff0080;
    --neon-gradient: linear-gradient(135deg, #ff0080 0%, #7928ca 100%);
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.7);
    --text-muted: rgba(255,255,255,0.4);
    --success: #22c55e;
    --warning: #fbbf24;
    --error: #ef4444;
    --bad: #ef4444;
    --good: #22c55e;
    --warn: #fbbf24;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
}

/* HOLOGRAPHIC ANIMATIONS */
@keyframes holoShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes holoRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes holoRise {
    0% { bottom: -10px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { bottom: 100vh; opacity: 0; }
}
@keyframes holoGlow {
    0%, 100% { box-shadow: 0 0 5px #ff0080, 0 0 10px #ff0080; }
    50% { box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; }
}

/* HOLOGRAPHIC BACKGROUND */
.holo-bg {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background: conic-gradient(from 0deg, rgba(255,0,128,0.12), rgba(0,255,255,0.12), rgba(255,255,0,0.12), rgba(255,0,128,0.12));
    filter: blur(100px);
    animation: holoRotate 15s linear infinite;
    z-index: 0;
    pointer-events: none;
}
.holo-particles {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.holo-particle {
    position: absolute;
    width: 4px; height: 4px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    animation: holoRise 10s linear infinite;
}
.holo-particle:nth-child(1) { left: 10%; animation-duration: 8s; }
.holo-particle:nth-child(2) { left: 20%; animation-duration: 12s; animation-delay: -2s; }
.holo-particle:nth-child(3) { left: 30%; animation-duration: 9s; animation-delay: -4s; }
.holo-particle:nth-child(4) { left: 40%; animation-duration: 11s; animation-delay: -1s; }
.holo-particle:nth-child(5) { left: 50%; animation-duration: 10s; animation-delay: -3s; }
.holo-particle:nth-child(6) { left: 60%; animation-duration: 13s; animation-delay: -5s; }
.holo-particle:nth-child(7) { left: 70%; animation-duration: 8s; animation-delay: -2s; }
.holo-particle:nth-child(8) { left: 80%; animation-duration: 11s; animation-delay: -4s; }
.holo-particle:nth-child(9) { left: 90%; animation-duration: 9s; animation-delay: -1s; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1025 50%, #0f0f1a 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

body::before {
    display: none;
}

.hidden { display: none !important; }
.hidden-form { display: none !important; }

/* ========================================
   NAVBAR
   ======================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 40px;
    background: rgba(15,15,26,0.6);
        border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(90deg, #ff0080, #00ffff, #ff0080);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holoShimmer 3s linear infinite;
    cursor: pointer;
    transition: 0.2s;
}

.logo:hover {
    letter-spacing: 5px;
    filter: drop-shadow(0 0 20px rgba(255,0,128,0.5));
}

.nav-actions {
    display: flex;
    gap: 12px;
}

.btn-profile, #logout-btn {
    padding: 10px 20px;
    border-radius: var(--radius-md);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Inter', sans-serif;
}

.btn-profile {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.btn-profile:hover {
    background: var(--glass-hover);
    border-color: var(--neon-cyan);
}

#logout-btn {
    background: rgba(255,77,77,0.1);
    color: var(--error);
    border: 1px solid rgba(255,77,77,0.3);
}

#logout-btn:hover {
    background: rgba(255,77,77,0.2);
}

#canvas-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* ========================================
   HERO
   ======================================== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 120px 20px 48px;
    position: relative;
    z-index: 1;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
        padding: 12px 28px;
    border-radius: 30px;
    font-size: 12px;
    margin-bottom: 24px;
    font-weight: 500;
    letter-spacing: 2px;
}

.badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #ff0080, #00ffff);
    border-radius: 50%;
    animation: holoGlow 2s ease-in-out infinite;
}

.hero-title {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.1;
}

.gradient-text {
    background: linear-gradient(90deg, #ff0080, #00ffff, #ffff00);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holoShimmer 4s linear infinite;
}

.hero-desc {
    font-size: clamp(16px, 2vw, 20px);
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 1.7;
}

.btn-main, #hero-start-btn {
    padding: 18px 50px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(255,0,128,0.3);
    position: relative;
    overflow: hidden;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 1px;
}

.btn-main::before, #hero-start-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-main:hover::before, #hero-start-btn:hover::before {
    left: 100%;
}

.btn-main:hover, #hero-start-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(255,0,128,0.5);
}

/* ========================================
   MODALS
   ======================================== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
        z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-overlay:not(.hidden) {
    display: flex;
    animation: fadeIn 0.3s;
}

/* @keyframes fadeIn — ÖLÜ TANIM, kaldırıldı 2026-08-23.
   Aynı isim bu dosyada 3 kez tanımlanmıştı; CSS'te son tanım
   kazandığı için sadece en alttaki (translateY'li) sürüm çalışıyordu.
   Bu ikisi hiçbir zaman uygulanmıyordu. Görsel değişiklik yok. */

.glass-modal {
    background: var(--glass-bg);
        border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 40px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    animation: slideUp 0.4s;
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.glass-modal.wide {
    max-width: 900px;
}

.result-modal {
    max-width: 950px;
    padding: 48px;
}

.glass-modal h2, #auth-title {
    font-size: 32px;
    margin-bottom: 32px;
    background: var(--neon-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.close-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-icon:hover {
    background: rgba(255,77,77,0.1);
    border-color: var(--error);
    color: var(--error);
    transform: rotate(90deg);
}

/* ========================================
   FORMS
   ======================================== */
.input-wrap {
    position: relative;
    margin-bottom: 20px;
}

.input-wrap i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
}

.input-wrap input {
    width: 100%;
    padding: 16px 20px 16px 48px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    transition: 0.3s;
}

.input-wrap input::placeholder {
    color: var(--text-muted);
}

.input-wrap input:focus {
    outline: none;
    border-color: var(--neon-cyan);
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 0 3px rgba(0,242,255,0.1);
}

.legal-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

.legal-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.btn-full {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.5px;
}

.btn-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(255,0,128,0.4);
}

.toggle-link {
    margin-top: 20px;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
}

.toggle-link a {
    color: #00ffff;
    cursor: pointer;
    text-decoration: none;
    margin-left: 5px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.toggle-link a:hover {
    color: #ff0080;
}

.error-msg {
    padding: 12px;
    background: rgba(255,77,77,0.1);
    border: 1px solid rgba(255,77,77,0.3);
    border-radius: var(--radius-sm);
    color: var(--error);
    margin-bottom: 16px;
    font-size: 14px;
    display: block !important;
}

.error-msg.hidden {
    display: none !important;
}

.error-msg:empty {
    display: none !important;
}

.success-msg {
    padding: 12px;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: var(--radius-sm);
    color: #22c55e;
    margin-bottom: 16px;
    font-size: 14px;
}

/* Navbar Pricing Button */
.btn-pricing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(0,242,255,0.15), rgba(178,75,243,0.15));
    border: 1px solid rgba(0,242,255,0.3);
    border-radius: 12px;
    color: #00f2ff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-pricing:hover {
    background: linear-gradient(135deg, rgba(0,242,255,0.25), rgba(178,75,243,0.25));
    border-color: rgba(0,242,255,0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,242,255,0.2);
}

.btn-pricing i {
    font-size: 14px;
}

/* Forgot Password Link */
.forgot-password-link {
    text-align: center;
    margin-top: 16px;
}

.forgot-password-link a {
    color: #00f2ff;
    font-size: 13px;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.forgot-password-link a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ========================================
   WIZARD & PLATFORM SELECTION
   ======================================== */
.wizard-header-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
}

.wizard-header-row h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.back-btn {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: 0.3s;
}

.back-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    transform: translateX(-5px);
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.select-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 32px 20px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    position: relative;
}

.select-card:not(.premium-locked):hover {
    border-color: var(--neon-cyan);
    background: rgba(0,242,255,0.05);
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(0,242,255,0.2);
}

.select-card.selected {
    border-color: var(--neon-cyan);
    background: rgba(0,242,255,0.1);
    box-shadow: 0 0 0 2px rgba(0,242,255,0.3);
}

.select-card i {
    font-size: 48px;
    background: var(--neon-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.select-card strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.select-card span {
    font-size: 13px;
    color: var(--text-secondary);
}

.premium-locked {
    opacity: 0.6;
    filter: grayscale(100%);
    cursor: pointer;
    position: relative;
}

.premium-locked::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85);
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 24px;
}

/* ========================================
   UPLOAD AREAS
   ======================================== */
.upload-box, #drop-zone {
    border: 2px dashed var(--glass-border);
    padding: 60px 40px;
    border-radius: var(--radius-lg);
    margin-top: 24px;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    background: rgba(255,255,255,0.01);
}

.upload-box:hover, #drop-zone:hover {
    border-color: var(--neon-cyan);
    background: rgba(0,242,255,0.02);
}

.upload-box.drag-over, #drop-zone.drag-over {
    border-color: var(--neon-cyan);
    background: rgba(0,242,255,0.05);
    border-style: solid;
}

.upload-icon {
    font-size: 64px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

#upload-text {
    font-size: 18px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Dating Grid */
#dating-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
    padding: 4px;
}

.grid-slot {
    background: rgba(255,255,255,0.02);
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    min-height: 100px;
}

.grid-slot:hover {
    border-color: var(--neon-cyan);
    background: rgba(0,242,255,0.05);
    transform: scale(1.02);
}

.grid-slot.dragging {
    opacity: 0.5;
    border-color: var(--neon-purple);
    transform: scale(0.95);
}

.grid-slot.drag-over {
    border-color: var(--neon-cyan);
    border-style: solid;
    background: rgba(0,242,255,0.1);
}

.grid-slot.main-photo {
    /* İlk fotoğraf için özel stil - app'e göre override edilecek */
}

.grid-slot img,
.grid-slot .slot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 10px;
}

.add-icon {
    font-size: 32px;
    color: rgba(255,255,255,0.25);
    transition: 0.3s;
}

.add-icon i {
    font-weight: 300;
}

.grid-slot:hover .add-icon {
    color: var(--neon-cyan);
    transform: scale(1.2);
}

.remove-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(239, 68, 68, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 14px;
    transition: 0.2s;
    opacity: 0;
    z-index: 5;
}

.grid-slot:hover .remove-icon {
    opacity: 1;
}

.remove-icon:hover {
    background: #ef4444;
    transform: scale(1.15);
}

/* Ana Fotoğraf Label */
.main-photo-label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 700;
    color: var(--neon-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.preview-grid, #standard-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.thumb {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Grid Info Text */
.grid-info {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.grid-info i {
    color: var(--neon-cyan);
    font-size: 14px;
}

/* ========================================
   LEGAL MODAL & TERMS
   ======================================== */

.legal-check {
    margin: 16px 0;
}

.legal-check label {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.legal-link {
    color: var(--neon-cyan);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.legal-link:hover {
    text-decoration: underline;
    color: #fff;
}

.legal-modal {
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.legal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 16px;
}

.legal-tab {
    flex: 1;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.legal-tab:hover {
    background: rgba(255,255,255,0.06);
}

.legal-tab.active {
    background: var(--neon-cyan);
    color: #000;
    border-color: var(--neon-cyan);
}

.legal-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
    max-height: 50vh;
}

.legal-content h3 {
    color: var(--text-primary);
    font-size: 16px;
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.legal-content h3:first-child {
    margin-top: 0;
}

.legal-content p {
    margin-bottom: 12px;
}

.legal-content ul {
    margin: 12px 0;
    padding-left: 20px;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content strong {
    color: var(--text-primary);
}

.legal-content .highlight {
    background: rgba(0,242,255,0.1);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--neon-cyan);
    margin: 16px 0;
}

.legal-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.legal-footer .btn-full {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    color: #000;
    font-weight: 700;
}

@media (max-width: 768px) {
    .legal-modal {
        max-height: 90vh;
        margin: 10px;
    }
    
    .legal-tabs {
        flex-direction: column;
    }
    
    .legal-content {
        max-height: 45vh;
        font-size: 12px;
    }
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast i {
    font-size: 18px;
}

.toast-success {
    border-color: #22c55e;
}

.toast-success i {
    color: #22c55e;
}

.toast-error {
    border-color: #ef4444;
}

.toast-error i {
    color: #ef4444;
}

.toast-info {
    border-color: var(--neon-cyan);
}

.toast-info i {
    color: var(--neon-cyan);
}

@media (max-width: 768px) {
    #toast-container {
        top: auto;
        bottom: 20px;
        left: 20px;
        right: 20px;
    }
    
    .toast {
        transform: translateY(120%);
    }
    
    .toast.show {
        transform: translateY(0);
    }
}

/* ========================================
   LOADING SCREEN
   ======================================== */
#loading-quote {
    font-size: 20px;
    color: var(--text-secondary);
    margin-top: 32px;
    font-style: italic;
    max-width: 600px;
    text-align: center;
    line-height: 1.8;
}

.loader {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: var(--neon-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   RESULTS SCREEN
   ======================================== */
.score-ring {
    width: 180px;
    height: 180px;
    margin: 0 auto 32px;
    position: relative;
}

.progress-circle {
    transform: rotate(-90deg);
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    transition: stroke-dashoffset 1.5s ease;
}

.score-val {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: 800;
    background: var(--neon-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.result-title {
    font-size: 28px;
    margin-bottom: 24px;
    font-weight: 700;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.section-header i {
    font-size: 24px;
}

.section-header h3 {
    font-size: 20px;
    font-weight: 700;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.photo-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 16px;
    position: relative;
}

.photo-item img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.photo-score {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
}

.photo-decision {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
}

.photo-decision.keep {
    background: rgba(0,255,157,0.1);
    color: var(--good);
    border: 1px solid var(--good);
}

.photo-decision.delete {
    background: rgba(255,77,77,0.1);
    color: var(--bad);
    border: 1px solid var(--bad);
}

.photo-decision.retake {
    background: rgba(255,204,0,0.1);
    color: var(--warn);
    border: 1px solid var(--warn);
}

.list-group {
    margin: 16px 0;
}

.list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.list-item i {
    font-size: 20px;
    margin-top: 2px;
}

.list-item.bad i { color: var(--bad); }
.list-item.good i { color: var(--good); }

.strategy-box {
    background: rgba(0,242,255,0.03);
    border: 1px solid rgba(0,242,255,0.2);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 20px 0;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Premium Upgrade Panel */
.premium-upgrade-panel {
    background: linear-gradient(135deg, rgba(0,242,255,0.1), rgba(178,75,243,0.1));
    border: 2px solid rgba(0,242,255,0.3);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    margin: 40px 0 20px;
    position: relative;
    overflow: hidden;
}

.premium-upgrade-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.premium-upgrade-panel h3 {
    font-size: 28px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.premium-upgrade-panel p {
    color: var(--text-secondary);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.btn-upgrade {
    background: var(--neon-gradient);
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    z-index: 1;
}

.btn-upgrade:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(0,242,255,0.6);
}

/* Premium Lock Overlay */
.premium-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
        display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--neon-cyan);
    border-radius: var(--radius-md);
}

/* Trial Status Messages */
.trial-status-ok,
.trial-status-warning,
.trial-status-error {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
}

.trial-status-ok {
    background: rgba(0,255,157,0.1);
    border: 1px solid rgba(0,255,157,0.3);
    color: var(--good);
}

.trial-status-warning {
    background: rgba(255,204,0,0.1);
    border: 1px solid rgba(255,204,0,0.3);
    color: var(--warn);
}

.trial-status-error {
    background: rgba(255,77,77,0.1);
    border: 1px solid rgba(255,77,77,0.3);
    color: var(--bad);
}

/* Profile Modal Badges */
.badge-premium {
    background: var(--neon-gradient);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}

.badge-free {
    background: rgba(255,255,255,0.1);
    color: var(--text-secondary);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}

.license-status {
    margin: 20px 0;
}

.profile-info {
    text-align: left;
}

.profile-info p {
    margin: 12px 0;
    color: var(--text-secondary);
}

.profile-info strong {
    color: var(--text-primary);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .navbar {
        padding: 16px 20px;
    }
    
    .logo {
        font-size: 22px;
    }
    
    .glass-modal {
        padding: 32px 24px;
    }
    
    .grid-cards {
        grid-template-columns: 1fr;
    }
    
    #dating-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-slot.main-photo {
        grid-column: span 2;
        grid-row: span 1;
    }
    
    .hero-title {
        font-size: 48px;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan);
}

/* Dating Grid Size Fix */
.dating-grid-wrapper {
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 8px 8px 8px;
    position: relative;
    margin-top: 8px;
}

/* App Grid Badge */
.app-grid-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--bg-darker);
    border: 2px solid var(--glass-border);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
}

.app-grid-badge i {
    font-size: 14px;
}

/* Tinder Badge */
.dating-grid-wrapper.app-tinder .app-grid-badge {
    border-color: #ff4b2b;
    color: #ff4b2b;
}

/* Bumble Badge */
.dating-grid-wrapper.app-bumble .app-grid-badge {
    border-color: #ffc629;
    color: #ffc629;
}

/* Hinge Badge */
.dating-grid-wrapper.app-hinge .app-grid-badge {
    border-color: #6c5ce7;
    color: #6c5ce7;
}

/* Happn Badge */
.dating-grid-wrapper.app-happn .app-grid-badge {
    border-color: #ff6b81;
    color: #ff6b81;
}

/* ========================================
   APP-SPECIFIC GRID LAYOUTS
   ======================================== */

/* TINDER: 3x3 eşit grid (9 fotoğraf) - TÜM SLOTLAR EŞİT */
.dating-grid-wrapper.app-tinder #dating-grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dating-grid-wrapper.app-tinder .grid-slot {
    aspect-ratio: 0.85;
    grid-column: auto !important;
    grid-row: auto !important;
}

.dating-grid-wrapper.app-tinder .grid-slot:first-child {
    grid-column: auto !important;
    grid-row: auto !important;
}

/* ================================================
   🐝 BUMBLE ÖZEL STİLLERİ - YENİ TASARIM
   ================================================ */

/* Bumble Wrapper */
.tinder-interface.dating-app-bumble {
    background: linear-gradient(180deg, rgba(255, 198, 41, 0.08) 0%, transparent 100%);
}

/* Bumble Grid */
.tinder-photo-grid.app-grid-bumble {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) auto !important;
    gap: 10px !important;
    max-width: 420px;
    margin: 0 auto;
}

/* Bumble Slotlar */
.tinder-photo-grid.app-grid-bumble .tinder-photo-slot {
    aspect-ratio: 1;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%) !important;
    border: 2px dashed rgba(255, 198, 41, 0.4) !important;
    transition: all 0.3s ease;
}

.tinder-photo-grid.app-grid-bumble .tinder-photo-slot:hover {
    border-color: #FFC629 !important;
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 198, 41, 0.25);
}

/* Bumble Ana fotoğraf 2x2 */
.tinder-photo-grid.app-grid-bumble .tinder-photo-slot:first-child {
    grid-column: 1 / 3 !important;
    grid-row: 1 / 3 !important;
    aspect-ratio: 1;
    border-radius: 20px !important;
    border-width: 3px !important;
}

.tinder-photo-grid.app-grid-bumble .tinder-photo-slot:first-child:hover {
    box-shadow: 0 12px 35px rgba(255, 198, 41, 0.35);
}

/* Bumble Fotoğraf yüklü slot */
.tinder-photo-grid.app-grid-bumble .tinder-photo-slot.has-photo {
    border: none !important;
    animation: none;
}

/* Bumble Add icon sarı */
.tinder-photo-grid.app-grid-bumble .tinder-photo-slot .slot-add {
    background: linear-gradient(135deg, #FFC629 0%, #E5B000 100%) !important;
    color: #1A1A1A !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(255, 198, 41, 0.4);
}

.tinder-photo-grid.app-grid-bumble .tinder-photo-slot .slot-add i {
    color: #1A1A1A !important;
}

.tinder-photo-grid.app-grid-bumble .tinder-photo-slot:first-child .slot-add {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px;
}

.tinder-photo-grid.app-grid-bumble .tinder-photo-slot:hover .slot-add {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 198, 41, 0.5);
}

/* Bumble Main photo badge sarı */
.tinder-photo-grid.app-grid-bumble .tinder-photo-slot .main-photo-badge {
    background: linear-gradient(135deg, #FFC629 0%, #E5B000 100%) !important;
    color: #1A1A1A !important;
}

.tinder-photo-grid.app-grid-bumble .tinder-photo-slot .main-photo-badge i {
    color: #1A1A1A !important;
}

/* Bumble Drag & Drop */
.tinder-photo-grid.app-grid-bumble .tinder-photo-slot.dragging {
    opacity: 0.5;
    border: 2px solid #FFC629 !important;
}

.tinder-photo-grid.app-grid-bumble .tinder-photo-slot.drag-over {
    border: 2px solid #FFC629 !important;
    background: rgba(255, 198, 41, 0.15) !important;
    box-shadow: 0 0 20px rgba(255, 198, 41, 0.4);
}

/* Bumble Slot numaraları sarı */
.tinder-photo-grid.app-grid-bumble .tinder-photo-slot .slot-number {
    color: #FFC629 !important;
}

/* Bumble Progress bar */
.bumble-photo-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.bumble-photo-progress .progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.bumble-photo-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFC629 0%, #FFD75E 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.bumble-photo-progress .progress-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.bumble-photo-progress .progress-text strong {
    color: #FFC629;
}

/* Bumble Upload tips */
.bumble-upload-tips {
    background: rgba(255, 198, 41, 0.08);
    border: 1px solid rgba(255, 198, 41, 0.2);
    border-radius: 16px;
    padding: 16px;
    margin-top: 16px;
}

.bumble-upload-tips h4 {
    color: #FFC629;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bumble-upload-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bumble-upload-tips li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bumble-upload-tips li i {
    color: #FFC629;
    font-size: 10px;
}

/* ================================================
   🐝 BUMBLE - TAB, READINESS BAR & BUTON STİLLERİ
   ================================================ */

/* Bumble Tab Stilleri */
.tinder-interface.dating-app-bumble .tinder-tab {
    color: rgba(255, 255, 255, 0.6);
}

#tinder-interface.dating-app-bumble .tinder-tab.active,
.tinder-interface.dating-app-bumble .tinder-tab.active {
    color: #FFC629 !important;
}

#tinder-interface.dating-app-bumble .tinder-tab.active::after,
.tinder-interface.dating-app-bumble .tinder-tab.active::after {
    background: linear-gradient(90deg, #FFC629, #FFD75E) !important;
}

/* Bumble Readiness Bar */
#tinder-interface.dating-app-bumble .readiness-bar,
.tinder-interface.dating-app-bumble .readiness-bar {
    background: linear-gradient(90deg, #FFC629 0%, #FFD75E 100%) !important;
}

#tinder-interface.dating-app-bumble .readiness-percent,
.tinder-interface.dating-app-bumble .readiness-percent {
    color: #FFC629 !important;
}

/* Bumble Yaş Dropdown */
#tinder-interface.dating-app-bumble .age-select-wrapper label i,
.tinder-interface.dating-app-bumble .age-select-wrapper label i {
    color: #FFC629 !important;
}

#tinder-interface.dating-app-bumble .age-dropdown,
.tinder-interface.dating-app-bumble .age-dropdown {
    border-color: rgba(255, 198, 41, 0.3) !important;
}

#tinder-interface.dating-app-bumble .age-dropdown:focus,
.tinder-interface.dating-app-bumble .age-dropdown:focus {
    border-color: #FFC629 !important;
    box-shadow: 0 0 0 2px rgba(255, 198, 41, 0.2) !important;
}

/* Bumble Analizi Başlat Butonu */
#tinder-interface.dating-app-bumble ~ .step-actions .analyze-btn,
.tinder-interface.dating-app-bumble ~ .step-actions .analyze-btn,
body.bumble-active .analyze-btn {
    background: linear-gradient(135deg, #FFC629 0%, #E5B000 100%) !important;
    color: #1A1A1A !important;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(255, 198, 41, 0.4);
    border: none;
}

#tinder-interface.dating-app-bumble ~ .step-actions .analyze-btn:hover,
.tinder-interface.dating-app-bumble ~ .step-actions .analyze-btn:hover,
body.bumble-active .analyze-btn:hover {
    background: linear-gradient(135deg, #FFD75E 0%, #FFC629 100%) !important;
    box-shadow: 0 6px 25px rgba(255, 198, 41, 0.5);
    transform: translateY(-2px);
}

#tinder-interface.dating-app-bumble ~ .step-actions .analyze-btn i,
.tinder-interface.dating-app-bumble ~ .step-actions .analyze-btn i,
body.bumble-active .analyze-btn i {
    color: #1A1A1A !important;
}

/* Bumble Fotoğraf İpuçları Kutusu Kaldır */
.tinder-interface.dating-app-bumble .bumble-upload-tips {
    display: none;
}

/* HINGE: 2 sütun, ilk büyük (6 fotoğraf) */
.dating-grid-wrapper.app-hinge #dating-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.dating-grid-wrapper.app-hinge .grid-slot {
    aspect-ratio: 0.9;
    border-radius: 16px;
}

.dating-grid-wrapper.app-hinge .grid-slot:first-child {
    grid-column: 1 / 3;
    aspect-ratio: 1.5;
}

/* HAPPN: Ana fotoğraf vurgulu (5 fotoğraf) - 3 sütun grid */
.dating-grid-wrapper.app-happn #dating-grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dating-grid-wrapper.app-happn .grid-slot {
    aspect-ratio: 1;
}

.dating-grid-wrapper.app-happn .grid-slot:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .glass-modal.wide {
        max-height: 95vh;
        padding: 20px 16px;
    }
    
    .dating-grid-wrapper {
        max-height: none;
        padding-top: 28px;
        overflow-y: visible;
    }
    
    #dating-grid-container {
        gap: 10px;
    }
    
    .grid-slot {
        min-height: 80px;
    }
    
    /* Tinder mobile - TÜM SLOTLAR EŞİT */
    .dating-grid-wrapper.app-tinder #dating-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .dating-grid-wrapper.app-tinder .grid-slot,
    .dating-grid-wrapper.app-tinder .grid-slot:first-child {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    
    /* Bumble mobile */
    .dating-grid-wrapper.app-bumble #dating-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Hinge mobile */
    .dating-grid-wrapper.app-hinge #dating-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Happn mobile */
    .dating-grid-wrapper.app-happn #dating-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .dating-grid-wrapper.app-happn .grid-slot:first-child {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        border-radius: 16px;
    }
}

/* ========================================
   RESULT SCREEN İYİLEŞTİRMELERİ
   ======================================== */

/* Result Modal Genişlik */
.result-modal {
    max-width: 900px !important;
    position: relative;
}

/* Score Ring Daha Büyük */
.score-ring-container {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.score-ring-container svg {
    width: 100%;
    height: 100%;
}

/* Scroll Area */
.scroll-area {
    max-height: 80vh;
    overflow-y: auto;
    padding: 50px 20px 20px 20px; /* Üstte buton için alan */
}

/* Result Header */
.result-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--glass-border);
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 24px 0;
}

.info-col {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.info-col h4 {
    margin-bottom: 16px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-col.bad h4 {
    color: var(--bad);
}

.info-col.good h4 {
    color: var(--good);
}

.info-col ul {
    list-style: none;
    padding: 0;
}

.info-col li {
    padding: 8px 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Advice Panel */
.advice-panel {
    background: rgba(0,242,255,0.03);
    border: 1px solid rgba(0,242,255,0.2);
    border-radius: var(--radius-md);
    padding: 24px;
    margin: 24px 0;
}

.advice-panel h4 {
    color: var(--neon-cyan);
    margin-bottom: 16px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.advice-panel p {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Close Result Button */
.close-result-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
    font-size: 13px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
}

.close-result-btn:hover {
    background: #ef4444;
    transform: scale(1.05);
}

.close-result-btn.hidden {
    display: none !important;
}

.close-result-btn:hover {
    background: rgba(255,77,77,0.1);
    border-color: var(--error);
    color: var(--error);
}

/* Divider */
.divider {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 32px 0;
}

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .result-modal {
        max-width: 100% !important;
    }
}

/* ========================================
   PROFILE MODAL İYİLEŞTİRMELERİ
   ======================================== */

.btn-outline {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.btn-outline:hover {
    background: rgba(255,77,77,0.1);
    border-color: var(--error);
    color: var(--error);
}

.profile-actions {
    width: 100%;
}

.msg-text {
    font-size: 14px;
    margin-top: 12px;
    color: var(--text-secondary);
}

/* ========================================
   LOADING SCREEN TASARIM İYİLEŞTİRMESİ
   ======================================== */

.loading-content {
    text-align: center;
    padding: 60px 40px;
    background: var(--glass-bg);
        border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    max-width: 600px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.scanner {
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
    border: 3px solid rgba(0,242,255,0.2);
    border-top-color: var(--neon-cyan);
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    position: relative;
}

.scanner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 2px solid rgba(178,75,243,0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }
}

#loading-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    background: var(--neon-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

#loading-quote {
    font-size: 16px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.8;
    padding: 0 20px;
    animation: fadeQuote 1s ease-in-out;
}

@keyframes fadeQuote {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-text {
    animation: fadeQuote 0.5s ease-in-out;
}

/* ========================================
   FOTOĞRAF DETAYLARI RESPONSIVE FIX
   ======================================== */

.photo-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0;
    width: 100%;
    overflow: hidden;
}

.photo-card, .ig-summary-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pc-thumb, .ig-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4;
    max-height: 280px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.pc-rating {
    font-size: 18px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    text-align: center;
    display: inline-block;
    width: fit-content;
}

.pc-rating.good {
    background: rgba(0,255,157,0.1);
    color: var(--good);
    border: 1px solid var(--good);
}

.pc-rating.bad {
    background: rgba(255,77,77,0.1);
    color: var(--bad);
    border: 1px solid var(--bad);
}

.pc-rating.medium {
    background: rgba(255,204,0,0.1);
    color: var(--warn);
    border: 1px solid var(--warn);
}

.pc-note {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pc-decision {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pc-decision.keep {
    background: rgba(0,255,157,0.1);
    color: var(--good);
    border: 1px solid var(--good);
}

.pc-decision.delete {
    background: rgba(255,77,77,0.1);
    color: var(--bad);
    border: 1px solid var(--bad);
}

.pc-decision.retake {
    background: rgba(255,204,0,0.1);
    color: var(--warn);
    border: 1px solid var(--warn);
}

/* Section Title */
.section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--neon-cyan);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .photo-analysis-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .pc-thumb, .ig-thumb {
        max-height: 250px;
    }
}

/* Ensure no horizontal overflow */
.scroll-area {
    overflow-x: hidden !important;
    overflow-y: auto;
    max-width: 100%;
}

.result-modal .scroll-area > * {
    max-width: 100%;
    overflow: hidden;
}

/* ========================================
   FOTOĞRAF DETAYLARI GİZLE (GEÇİCİ)
   ======================================== */

#photo-analysis-section {
    display: none !important;
}

/* Score ring container gizle */
.score-ring-container {
    display: none !important;
}

/* Result title'ı merkeze al */
.result-header {
    text-align: center;
    padding: 20px 0;
}

.result-title-box {
    width: 100%;
}

#result-main-title {
    font-size: 32px;
    font-weight: 800;
    text-align: center;
}

/* Ana Fotoğraf Label */
.main-photo-label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,242,255,0.9);
    color: #000;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* Sonuç ekranı - sadece temel bilgiler */
.result-header .result-title-box {
    display: none !important;
}

.divider {
    display: none !important;
}

/* Kapat butonu modal dışında */
.close-result-btn {
    position: fixed !important;
    top: 20px;
    right: 20px;
    z-index: 2001;
    background: rgba(0,0,0,0.8);
        border: 1px solid var(--glass-border);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 700;
    transition: 0.3s;
}

.close-result-btn:hover {
    background: rgba(255,77,77,0.9);
    border-color: var(--error);
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .close-result-btn {
        top: 10px;
        right: 10px;
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Kapat butonunu gizle - ödeme artışı için */
.close-result-btn {
    display: none !important;
}

/* Wizard modal close - ufak çarpı */
.wizard-modal .close-icon {
    width: 30px;
    height: 30px;
    font-size: 18px;
    opacity: 0.5;
}

.wizard-modal .close-icon:hover {
    opacity: 1;
}

/* ========================================
   DAHA FAZLA GÖR BUTONLARI
   ======================================== */

.show-more-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(0,242,255,0.1), rgba(178,75,243,0.1));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--neon-cyan);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.show-more-btn:hover {
    background: linear-gradient(135deg, rgba(0,242,255,0.2), rgba(178,75,243,0.2));
    border-color: var(--neon-cyan);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,242,255,0.2);
}

.show-more-btn i {
    margin-right: 8px;
}

/* Pulse animation for premium panel */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(0,242,255,0.2);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 12px 48px rgba(0,242,255,0.4);
    }
}

/* ========================================
   PREMIUM PANEL İYİLEŞTİRME
   ======================================== */

.premium-upgrade-panel {
    margin-top: 32px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(0,242,255,0.05), rgba(178,75,243,0.05));
    border: 2px solid;
    border-image: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)) 1;
    border-radius: var(--radius-lg);
}

.premium-header h3 {
    font-size: 28px;
    font-weight: 800;
    background: var(--neon-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.premium-subtitle {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 24px;
}

.premium-features {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--glass-bg);
    border-radius: var(--radius-sm);
    font-size: 15px;
}

.feature-item i {
    color: var(--neon-cyan);
    font-size: 18px;
}

.feature-item strong {
    color: var(--neon-cyan);
}

.quota-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0,242,255,0.1);
    border: 1px solid var(--neon-cyan);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
}

.quota-warning i {
    color: var(--neon-cyan);
    font-size: 20px;
}

.quota-warning strong {
    color: var(--neon-cyan);
    font-size: 18px;
}

.btn-upgrade {
    width: 100%;
    padding: 18px 32px;
    background: var(--neon-gradient);
    border: none;
    border-radius: var(--radius-md);
    color: #000;
    font-weight: 800;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,242,255,0.4);
}

.btn-upgrade i {
    margin-right: 8px;
}

/* ========================================
   BLUR OVERLAY AÇIKLAMASI
   ======================================== */

.info-col {
    position: relative;
}

.blur-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to top, rgba(10,14,39,0.98) 60%, transparent);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 24px;
    pointer-events: all;
}

.blur-content {
    text-align: center;
    color: var(--neon-cyan);
    padding: 0 16px;
}

.blur-content i {
    margin-bottom: 12px;
    display: block;
}

.blur-content .blur-count {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #fff;
}

.blur-content .blur-count strong {
    font-size: 22px;
    color: var(--neon-cyan);
}

.blur-content .blur-preview {
    font-size: 13px;
    color: #888;
    font-style: italic;
    margin: 0 0 16px 0;
    max-width: 250px;
}

.btn-unlock-small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #00f2ff, #b24bf3);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-unlock-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,242,255,0.3);
}

.blur-content strong {
    font-size: 20px;
    color: var(--neon-cyan);
}

.blur-content small {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* ========================================
   PROFESYONEL AI TARAMA ANİMASYONU
   ======================================== */

.ai-scanner {
    width: 280px;
    height: 280px;
    margin: 0 auto 40px;
    position: relative;
}

/* 3x3 Grid */
.scan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    height: 100%;
}

.scan-cell {
    background: rgba(0,242,255,0.05);
    border: 2px solid rgba(0,242,255,0.2);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.scan-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0,242,255,0.6), 
        transparent
    );
    animation: scanPulse 2s ease-in-out infinite;
}

.scan-cell:nth-child(1)::before { animation-delay: 0s; }
.scan-cell:nth-child(2)::before { animation-delay: 0.2s; }
.scan-cell:nth-child(3)::before { animation-delay: 0.4s; }
.scan-cell:nth-child(4)::before { animation-delay: 0.6s; }
.scan-cell:nth-child(5)::before { animation-delay: 0.8s; }
.scan-cell:nth-child(6)::before { animation-delay: 1s; }
.scan-cell:nth-child(7)::before { animation-delay: 1.2s; }
.scan-cell:nth-child(8)::before { animation-delay: 1.4s; }
.scan-cell:nth-child(9)::before { animation-delay: 1.6s; }

@keyframes scanPulse {
    0%, 100% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
}

/* Tarama çizgisi */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent,
        var(--neon-cyan),
        transparent
    );
    box-shadow: 0 0 20px var(--neon-cyan);
    animation: scanLine 3s ease-in-out infinite;
}

@keyframes scanLine {
    0%, 100% {
        top: 0;
        opacity: 1;
    }
    50% {
        top: calc(100% - 4px);
        opacity: 0.8;
    }
}

/* Progress bar */
.scan-progress {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0,242,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: var(--neon-gradient);
    box-shadow: 0 0 10px var(--neon-cyan);
    animation: progressFill 20s linear infinite;
}

@keyframes progressFill {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Cell glow effect */
.scan-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(0,242,255,0.3) 0%,
        transparent 70%
    );
    opacity: 0;
    animation: cellGlow 4s ease-in-out infinite;
}

.scan-cell:nth-child(1)::after { animation-delay: 0s; }
.scan-cell:nth-child(2)::after { animation-delay: 0.4s; }
.scan-cell:nth-child(3)::after { animation-delay: 0.8s; }
.scan-cell:nth-child(4)::after { animation-delay: 1.2s; }
.scan-cell:nth-child(5)::after { animation-delay: 1.6s; }
.scan-cell:nth-child(6)::after { animation-delay: 2s; }
.scan-cell:nth-child(7)::after { animation-delay: 2.4s; }
.scan-cell:nth-child(8)::after { animation-delay: 2.8s; }
.scan-cell:nth-child(9)::after { animation-delay: 3.2s; }

@keyframes cellGlow {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* ========================================
   DİL DEĞİŞTİRİCİ (TEST HESABI)
   ======================================== */

.lang-btn {
    flex: 1;
    padding: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.lang-btn:hover {
    background: rgba(0,242,255,0.1);
    border-color: var(--neon-cyan);
}

.lang-btn.lang-active {
    background: var(--neon-gradient);
    color: #000;
    border: none;
}

/* 👑 Tam Erişim Hesabı — premium admin görünümü */
.admin-glass-modal {
    border: 1px solid rgba(255,196,75,0.35) !important;
    box-shadow: 0 0 0 1px rgba(255,196,75,0.08), 0 20px 60px rgba(255,196,75,0.12), 0 20px 60px rgba(0,0,0,0.5) !important;
}

.admin-crown-badge {
    position: absolute;
    top: 18px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ffd76a, #ffa93b);
    color: #241400;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.admin-panel {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid rgba(255,196,75,0.25);
    border-radius: var(--radius-md, 12px);
    background: linear-gradient(135deg, rgba(255,196,75,0.06), rgba(255,196,75,0.01));
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-panel-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #ffc44b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.admin-panel-hint {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.admin-mode-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

/* Açılan liste (native popup) çoğu tarayıcıda beyaz zemine döner — option'lara
   ayrı koyu zemin/renk vermezsek beyaz-üstüne-beyaz yazı görünmez olur. */
.admin-mode-select option {
    background: #14141f;
    color: #f2f2f7;
}

.admin-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-toggle-switch {
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.08);
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.admin-toggle-switch .admin-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.admin-toggle-switch.on {
    background: linear-gradient(135deg, #ffd76a, #ffa93b);
    border-color: transparent;
}

.admin-toggle-switch.on .admin-toggle-knob {
    transform: translateX(20px);
}

/* ========================================
   DATING PHOTO CARDS (FLIP ANIMATION)
   ======================================== */

.photo-analysis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.photo-card {
    perspective: 1000px;
    height: 200px;
    cursor: pointer;
    position: relative;
}

.photo-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.photo-card.flipped .photo-card-inner {
    transform: rotateY(180deg);
}

.photo-card-front,
.photo-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

.photo-card-front {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
}

.photo-card-front img {
    width: 100%;
    height: 130px;
    object-fit: cover;
}

.photo-card-info {
    padding: 10px;
    text-align: center;
}

.photo-score {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 2px;
    transition: color 0.3s;
}

/* Renk kodları: 10=yeşil, 1=kırmızı */
.score-10, .score-9 { color: #22c55e; }
.score-8, .score-7 { color: #84cc16; }
.score-6, .score-5 { color: #eab308; }
.score-4, .score-3 { color: #f97316; }
.score-2, .score-1 { color: #ef4444; }

.photo-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.photo-card-back {
    background: rgba(0,242,255,0.05);
    border: 2px solid var(--neon-cyan);
    transform: rotateY(180deg);
    padding: 16px;
    overflow-y: auto;
}

.photo-card-back h5 {
    color: var(--neon-cyan);
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.photo-card-back p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.photo-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.badge-best {
    background: linear-gradient(135deg, #22c55e, #84cc16);
    color: #000;
}

.badge-worst {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
}

.badge-profile {
    background: linear-gradient(135deg, #00f2ff, #b24bf3);
    color: #000;
}

.badge-good {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-mid {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.badge-low {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Photo badge - üst köşede */
.photo-card .photo-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    margin: 0;
}

/* Decision badge - TUT/SİL/İYİLEŞTİR */
.decision-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 6px;
}

.decision-keep {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.decision-delete {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.decision-improve {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* Premium lock overlay */
.premium-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    z-index: 10;
}

.premium-lock-overlay i {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.7);
}

/* Photo card back - daha okunabilir */
.photo-card-back {
    background: rgba(10, 14, 39, 0.98);
    border: 2px solid var(--neon-cyan);
    transform: rotateY(180deg);
    padding: 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.photo-card-back h5 {
    color: var(--neon-cyan);
    font-size: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.back-score {
    font-size: 24px;
    font-weight: 900;
    color: var(--neon-cyan);
    margin-bottom: 4px;
}

.back-decision {
    font-size: 11px;
    font-weight: 600;
    color: #f97316;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.back-comment {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-primary);
    flex: 1;
    overflow-y: auto;
}

/* MOBİL - photo card iyileştirmeleri */
@media (max-width: 768px) {
    .photo-analysis-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .photo-card {
        height: 220px;
    }
    
    .photo-card-front img {
        height: 120px;
    }
    
    .photo-score {
        font-size: 22px;
    }
    
    .photo-label {
        font-size: 9px;
    }
    
    .photo-badge {
        font-size: 8px;
        padding: 3px 6px;
    }
    
    .decision-badge {
        font-size: 9px;
        padding: 3px 8px;
    }
    
    /* Mobil card back - scroll sorununu çöz */
    .photo-card-back {
        padding: 12px;
    }
    
    .photo-card-back h5 {
        font-size: 11px;
        margin-bottom: 6px;
    }
    
    .back-score {
        font-size: 20px;
    }
    
    .back-decision {
        font-size: 10px;
    }
    
    .back-comment {
        font-size: 10px;
        line-height: 1.4;
    }
}

/* ========================================
   🎯 SONUÇ SAYFASI TAB SİSTEMİ
   ======================================== */

.results-tabs {
    display: flex;
    gap: 8px;
    margin: 24px 0 16px;
    padding: 6px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
}

.results-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.results-tab:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.results-tab.active {
    background: linear-gradient(135deg, rgba(0,242,255,0.2), rgba(178,75,243,0.2));
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,242,255,0.15);
    border: 1px solid rgba(0,242,255,0.3);
}

/* Tab renkleri */
.results-tab[data-tab="errors"] i { color: #ff6b6b; }
.results-tab[data-tab="strengths"] i { color: #22c55e; }
.results-tab[data-tab="roadmap"] i { color: #00f2ff; }

.results-tab.active[data-tab="errors"] {
    background: linear-gradient(135deg, rgba(255,107,107,0.2), rgba(255,107,107,0.1));
    border-color: rgba(255,107,107,0.3);
}

.results-tab.active[data-tab="strengths"] {
    background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(34,197,94,0.1));
    border-color: rgba(34,197,94,0.3);
}

.results-tab.active[data-tab="roadmap"] {
    background: linear-gradient(135deg, rgba(0,242,255,0.2), rgba(178,75,243,0.1));
    border-color: rgba(0,242,255,0.3);
}

.results-tab i {
    font-size: 18px;
}

.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.results-tab[data-tab="errors"] .tab-count {
    background: rgba(255,107,107,0.2);
    color: #ff6b6b;
}

.results-tab[data-tab="strengths"] .tab-count {
    background: rgba(34,197,94,0.2);
    color: #22c55e;
}

.results-tab.active .tab-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.results-tab-content {
    min-height: 200px;
}

.tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-panel.active {
    display: block;
}

/* @keyframes fadeIn — ÖLÜ TANIM, kaldırıldı 2026-08-23.
   Aynı isim bu dosyada 3 kez tanımlanmıştı; CSS'te son tanım
   kazandığı için sadece en alttaki (translateY'li) sürüm çalışıyordu.
   Bu ikisi hiçbir zaman uygulanmıyordu. Görsel değişiklik yok. */

.info-col.full-width {
    width: 100%;
    position: relative;
}

.advice-panel.full-width {
    margin: 0;
    width: 100%;
}

/* Mobil Tab */
@media (max-width: 768px) {
    .results-tabs {
        gap: 4px;
        padding: 4px;
    }
    
    .results-tab {
        padding: 14px 10px;
        font-size: 12px;
        gap: 6px;
    }
    
    .results-tab span:not(.tab-count) {
        display: none;
    }
    
    .results-tab i {
        font-size: 20px;
    }
    
    .tab-count {
        min-width: 20px;
        height: 20px;
        font-size: 11px;
        padding: 0 6px;
    }
}

/* ========================================
   🎯 YENİ: DATING SCORE HERO (1000 PUAN)
   ======================================== */

.dating-score-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(0,242,255,0.08) 0%, rgba(178,75,243,0.08) 100%);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0,242,255,0.2);
    position: relative;
    overflow: hidden;
}

.dating-score-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0,242,255,0.15) 0%, transparent 50%);
    animation: heroGlow 4s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    50% { transform: translate(10%, 10%); opacity: 0.6; }
}

.score-hero-ring {
    position: relative;
    width: 180px;
    height: 180px;
    z-index: 1;
}

.score-hero-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-hero-bg {
    fill: none;
    stroke: rgba(255,255,255,0.1);
    stroke-width: 10;
}

.score-hero-progress {
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 339.292;
    transition: stroke-dashoffset 1.5s ease-out, stroke 0.5s ease;
    filter: drop-shadow(0 0 15px currentColor);
}

.score-hero-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#score-hero-number {
    display: block;
    font-size: 56px;
    font-weight: 900;
    font-family: 'Orbitron', sans-serif;
    color: var(--neon-cyan);
    line-height: 1;
    text-shadow: 0 0 30px currentColor;
}

.score-hero-max {
    display: block;
    font-size: 18px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Score renk sınıfları */
.dating-score-hero.score-excellent #score-hero-number { color: #22c55e; }
.dating-score-hero.score-good #score-hero-number { color: #84cc16; }
.dating-score-hero.score-average #score-hero-number { color: #eab308; }
.dating-score-hero.score-poor #score-hero-number { color: #f97316; }
.dating-score-hero.score-bad #score-hero-number { color: #ef4444; }

.score-hero-info {
    z-index: 1;
    text-align: center;
}

.score-hero-info h2 {
    font-size: 24px;
    margin-bottom: 6px !important;
}

.score-hero-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* Renk varyasyonları */
.dating-score-hero.score-excellent .score-hero-progress { stroke: #22c55e; }
.dating-score-hero.score-good .score-hero-progress { stroke: #84cc16; }
.dating-score-hero.score-average .score-hero-progress { stroke: #eab308; }
.dating-score-hero.score-poor .score-hero-progress { stroke: #f97316; }
.dating-score-hero.score-bad .score-hero-progress { stroke: #ef4444; }

/* ========================================
   🎯 YENİ: FLIP CARDS SECTION
   ======================================== */

.flip-cards-section {
    margin: 20px 0;
}

.section-header-with-tip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.flip-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(0,242,255,0.08);
    border: 1px solid rgba(0,242,255,0.2);
    border-radius: 14px;
    font-size: 10px;
    color: var(--neon-cyan);
    animation: tipPulse 2s ease-in-out infinite;
}

@keyframes tipPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); box-shadow: 0 0 20px rgba(0,242,255,0.3); }
}

.flip-tip i {
    animation: handPoint 1s ease-in-out infinite;
}

@keyframes handPoint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.flip-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 100%;
}

/* Enhanced Flip Card */
.flip-card {
    perspective: 1200px;
    height: 220px;
    cursor: pointer;
    position: relative;
    min-width: 0; /* Grid overflow fix */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner,
.photo-flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden;
}

.flip-card-front {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.flip-card:hover .flip-card-front {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 30px rgba(0,242,255,0.2);
}

.flip-card-front img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.flip-card-info {
    padding: 12px;
    text-align: center;
    position: relative;
}

.flip-card-score {
    font-size: 30px;
    font-weight: 900;
    font-family: 'Orbitron', sans-serif;
    line-height: 1;
    margin-bottom: 4px;
}

.flip-card-score span {
    font-size: 16px;
    opacity: 0.6;
}

.flip-card-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badges */
.flip-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 10;
}

.badge-best-photo {
    background: linear-gradient(135deg, #22c55e, #10b981);
    color: #000;
    box-shadow: 0 4px 15px rgba(34,197,94,0.4);
}

.badge-worst-photo {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 4px 15px rgba(239,68,68,0.4);
}

.badge-mid-photo {
    background: linear-gradient(135deg, #eab308, #f59e0b);
    color: #000;
    box-shadow: 0 4px 15px rgba(234,179,8,0.4);
}

/* Flip Card Back */
.flip-card-back {
    background: linear-gradient(180deg, #1f1f1f 0%, #151515 100%);
    border: 1px solid rgba(255,255,255,0.1);
    transform: rotateY(180deg);
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.flip-card-back-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.flip-card-back-header i {
    font-size: 20px;
    color: var(--neon-cyan);
}

.flip-card-back-header h5 {
    font-size: 14px;
    color: var(--neon-cyan);
    margin: 0;
}

.flip-card-back-content {
    flex: 1;
    overflow-y: auto;
}

.flip-card-back-item {
    margin-bottom: 12px;
}

.flip-card-back-item label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.flip-card-back-item p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
}

.flip-card-back-decision {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.decision-keep { background: rgba(34,197,94,0.2); color: #22c55e; }
.decision-delete { background: rgba(239,68,68,0.2); color: #ef4444; }
.decision-retake { background: rgba(234,179,8,0.2); color: #eab308; }

/* ========================================
   🎯 YENİ: INSTAGRAM PRE-ANALYSIS
   ======================================== */

.instagram-preanalysis {
    margin-top: 32px;
    animation: slideUp 0.5s ease-out;
}

.preanalysis-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 320px;
    margin: 0 auto;
}

.preanalysis-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.preanalysis-header i {
    font-size: 24px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.preanalysis-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.preanalysis-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.preanalysis-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preanalysis-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.preanalysis-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--neon-cyan);
}

.preanalysis-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0,242,255,0.05);
    border-radius: var(--radius-md);
}

.typing-indicator {
    display: flex;
    gap: 4px;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background: var(--neon-cyan);
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

#pre-status-text {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ========================================
   RESPONSIVE: FLIP CARDS
   ======================================== */

@media (max-width: 768px) {
    .dating-score-hero {
        flex-direction: column;
        padding: 20px;
        gap: 16px;
        text-align: center;
    }
    
    .score-hero-ring {
        width: 140px;
        height: 140px;
    }
    
    #score-hero-number {
        font-size: 42px;
    }
    
    .score-hero-max {
        font-size: 14px;
    }
    
    .score-hero-info {
        text-align: center;
    }
    
    .score-hero-info h2 {
        font-size: 18px;
    }
    
    .flip-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .flip-card {
        height: 160px;
    }
    
    .flip-card-front img {
        height: 90px;
    }
    
    .flip-card-score {
        font-size: 20px;
    }
    
    .flip-card-label {
        font-size: 8px;
    }
    
    .flip-card-badge {
        font-size: 7px;
        padding: 2px 5px;
    }
    
    .section-header-with-tip {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .flip-tip {
        font-size: 9px;
        padding: 4px 8px;
    }
}

/* ========================================
   🎯 YENİ: PLATFORM FLIP CARD (Dating Seçimi)
   ======================================== */

.platform-flip-card {
    perspective: 1000px;
    height: 180px;
}

.platform-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.platform-flip-card.flipped .platform-flip-inner {
    transform: rotateY(180deg);
}

.platform-flip-front,
.platform-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
}

.platform-flip-front {
    z-index: 2;
}

.platform-flip-back {
    background: var(--bg-card);
    border: 2px solid var(--neon-cyan);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    gap: 10px;
    z-index: 1;
}

.flip-back-title {
    font-size: 12px;
    color: var(--neon-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    font-weight: 700;
}

.flip-app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 260px;
}

.flip-app-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.flip-app-btn i {
    font-size: 16px;
}

.flip-app-btn span {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flip-app-btn:hover {
    background: rgba(255,255,255,0.08);
    transform: scale(1.05);
}

/* App renkleri */
.flip-app-btn[data-app="tinder"]:hover {
    border-color: #ff4b2b;
    color: #ff4b2b;
    box-shadow: 0 0 15px rgba(255, 75, 43, 0.3);
}

.flip-app-btn[data-app="bumble"]:hover {
    border-color: #ffc629;
    color: #ffc629;
    box-shadow: 0 0 15px rgba(255, 198, 41, 0.3);
}

.flip-app-btn[data-app="hinge"]:hover {
    border-color: #6c5ce7;
    color: #6c5ce7;
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
}

.flip-app-btn[data-app="happn"]:hover {
    border-color: #ff6b81;
    color: #ff6b81;
    box-shadow: 0 0 15px rgba(255, 107, 129, 0.3);
}

/* ========================================
   🎯 YENİ: DATING APP SELECTOR
   ======================================== */

.dating-app-selector {
    margin-top: 24px;
    padding: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.app-selector-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-align: center;
}

.app-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.app-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    background: rgba(255,255,255,0.03);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.app-btn i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.app-btn span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-btn:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
}

.app-btn:hover i {
    transform: scale(1.1);
}

/* Tinder */
.app-btn.app-tinder {
    --app-color: #ff4b2b;
}
.app-btn.app-tinder.selected,
.app-btn.app-tinder:hover {
    border-color: var(--app-color);
    background: rgba(255, 75, 43, 0.1);
}
.app-btn.app-tinder.selected i,
.app-btn.app-tinder:hover i {
    color: var(--app-color);
}

/* Bumble */
.app-btn.app-bumble {
    --app-color: #ffc629;
}
.app-btn.app-bumble.selected,
.app-btn.app-bumble:hover {
    border-color: var(--app-color);
    background: rgba(255, 198, 41, 0.1);
}
.app-btn.app-bumble.selected i,
.app-btn.app-bumble:hover i {
    color: var(--app-color);
}

/* Hinge */
.app-btn.app-hinge {
    --app-color: #6c5ce7;
}
.app-btn.app-hinge.selected,
.app-btn.app-hinge:hover {
    border-color: var(--app-color);
    background: rgba(108, 92, 231, 0.1);
}
.app-btn.app-hinge.selected i,
.app-btn.app-hinge:hover i {
    color: var(--app-color);
}

/* Happn */
.app-btn.app-happn {
    --app-color: #ff6b81;
}
.app-btn.app-happn.selected,
.app-btn.app-happn:hover {
    border-color: var(--app-color);
    background: rgba(255, 107, 129, 0.1);
}
.app-btn.app-happn.selected i,
.app-btn.app-happn:hover i {
    color: var(--app-color);
}

.app-btn.selected {
    color: #fff;
}

.app-btn.selected span {
    color: #fff;
}

@media (max-width: 480px) {
    .app-buttons {
        gap: 8px;
    }
    
    .app-btn {
        padding: 10px 14px;
        min-width: 70px;
    }
    
    .app-btn i {
        font-size: 18px;
    }
    
    .app-btn span {
        font-size: 10px;
    }
}

/* ========================================
   MATCH RATE TAHMİNİ
   ======================================== */

.match-rate-section {
    margin: 24px 0;
    padding: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.match-rate-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.match-rate-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.match-rate-label {
    min-width: 140px;
    font-size: 13px;
    color: var(--text-secondary);
}

.match-rate-bar-wrap {
    flex: 1;
    height: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
}

.match-rate-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 1s ease-out;
}

.match-rate-item.current .match-rate-bar {
    background: linear-gradient(90deg, #ff6b6b, #ff8e53);
}

.match-rate-item.potential .match-rate-bar {
    background: linear-gradient(90deg, #00f2ff, #00ff9d);
}

.match-rate-value {
    min-width: 80px;
    font-weight: 700;
    font-size: 15px;
    text-align: right;
}

.match-rate-item.current .match-rate-value {
    color: #ff8e53;
}

.match-rate-item.potential .match-rate-value {
    color: var(--success);
}

.match-rate-diff {
    font-size: 12px;
    color: var(--success);
    margin-left: 4px;
}

.match-rate-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0, 242, 255, 0.1);
    border: 1px solid rgba(0, 242, 255, 0.3);
    border-radius: 8px;
    margin-top: 8px;
}

.match-rate-tip i {
    color: var(--neon-cyan);
    font-size: 16px;
}

.match-rate-tip span {
    font-size: 13px;
    color: var(--text-primary);
}

/* ========================================
   AI BIO GENERATOR
   ======================================== */

.bio-generator-section {
    margin: 24px 0;
    padding: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.bio-generator-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bio-generator-desc {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.bio-style-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.bio-style-btn {
    padding: 10px 16px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bio-style-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}

.bio-style-btn.active {
    background: var(--neon-gradient);
    border-color: transparent;
    color: white;
}

.bio-output-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#bio-output-text {
    width: 100%;
    min-height: 100px;
    padding: 16px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    font-family: inherit;
}

.bio-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.bio-action-btn {
    padding: 8px 16px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bio-action-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}

.btn-generate-bio {
    padding: 14px 24px;
    background: var(--neon-gradient);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
}

.btn-generate-bio:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 242, 255, 0.3);
}

.btn-generate-bio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.bio-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    color: var(--text-secondary);
}

.bio-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--neon-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .match-rate-item {
        flex-wrap: wrap;
    }
    
    .match-rate-label {
        min-width: 100%;
        margin-bottom: 4px;
    }
    
    .match-rate-bar-wrap {
        flex: 1;
    }
    
    .match-rate-value {
        min-width: auto;
    }
    
    .bio-style-options {
        gap: 6px;
    }
    
    .bio-style-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* ===================================
   QUICK INSIGHT SECTION
   =================================== */
.quick-insight-section {
  margin: 16px 0 24px 0;
  padding: 0 16px;
}

.quick-insight-box {
  background: linear-gradient(135deg, rgba(0, 242, 255, 0.08) 0%, rgba(138, 43, 226, 0.08) 100%);
  border: 1px solid rgba(0, 242, 255, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: fadeInUp 0.5s ease-out;
}

.quick-insight-icon {
  font-size: 24px;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.quick-insight-text {
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  font-style: italic;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Quick insight responsive */
@media (max-width: 480px) {
  .quick-insight-box {
    padding: 12px 14px;
  }
  
  .quick-insight-icon {
    font-size: 20px;
  }
  
  .quick-insight-text {
    font-size: 13px;
  }
}

/* ===================================
   PSYCHOLOGICAL INSIGHT SECTION
   =================================== */
.psych-insight-section {
  margin: 16px 0;
  padding: 0 16px;
}

.psych-insight-box {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 165, 0, 0.1) 100%);
  border: 1px solid rgba(255, 107, 107, 0.4);
  border-radius: 12px;
  padding: 16px 20px;
  animation: fadeInUp 0.5s ease-out;
}

.psych-insight-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #ff6b6b;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.psych-insight-header i {
  font-size: 18px;
}

.psych-insight-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* ===================================
   URGENT ACTION SECTION
   =================================== */
.urgent-action-section {
  margin: 20px 0;
  padding: 0 16px;
}

.urgent-action-box {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 87, 34, 0.15) 100%);
  border: 2px solid rgba(255, 193, 7, 0.5);
  border-radius: 16px;
  padding: 20px;
  animation: fadeInUp 0.5s ease-out, urgentPulse 2s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.3); }
  50% { box-shadow: 0 0 20px 5px rgba(255, 193, 7, 0.2); }
}

.urgent-action-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 700;
  color: #ffc107;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.urgent-action-header i {
  font-size: 22px;
  animation: flash 1.5s ease-in-out infinite;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.urgent-action-text {
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 12px 0;
  font-weight: 500;
}

.urgent-action-why {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 2px solid rgba(255, 193, 7, 0.4);
}

.urgent-action-impact {
  display: inline-block;
  background: rgba(0, 200, 83, 0.2);
  border: 1px solid rgba(0, 200, 83, 0.4);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: #00c853;
  font-weight: 600;
}

/* ===================================
   MATCH BOOST SECTION
   =================================== */
.match-boost-section {
  margin: 24px 0;
  padding: 0 16px;
}

.match-boost-section .section-title {
  margin-bottom: 16px;
}

.match-boost-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.match-boost-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.match-boost-item:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 242, 255, 0.3);
}

.match-boost-item .priority {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #00f2ff, #8a2be2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}

.match-boost-item .action-text {
  flex: 1;
  padding: 0 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.match-boost-item .impact-badge {
  background: rgba(0, 200, 83, 0.15);
  border: 1px solid rgba(0, 200, 83, 0.4);
  border-radius: 15px;
  padding: 4px 10px;
  font-size: 12px;
  color: #00c853;
  font-weight: 600;
  white-space: nowrap;
}

/* ===================================
   USER PROFILE TAGS
   =================================== */
.user-profile-section {
  margin: 12px 0;
  padding: 0 16px;
}

.user-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.user-profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.user-profile-tag.hidden {
  display: none;
}

.tag-style {
  background: rgba(138, 43, 226, 0.2);
  border: 1px solid rgba(138, 43, 226, 0.4);
  color: #a78bfa;
}

.tag-energy {
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #fbbf24;
}

.tag-approach {
  background: rgba(0, 242, 255, 0.2);
  border: 1px solid rgba(0, 242, 255, 0.4);
  color: #00f2ff;
}

@media (max-width: 480px) {
  .user-profile-tag {
    font-size: 11px;
    padding: 5px 10px;
  }
}

/* ============================================
   📤 PAYLAŞ & 🔥 ROAST BUTONLARI
   ============================================ */

.result-action-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 30px 0;
  padding: 0 20px;
}

.result-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-action-btn.share-btn {
  background: linear-gradient(135deg, #00f2ff 0%, #0099ff 100%);
  color: #000;
}

.result-action-btn.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 242, 255, 0.4);
}

.result-action-btn.roast-btn {
  background: linear-gradient(135deg, #ff6b35 0%, #f72585 100%);
  color: #fff;
}

.result-action-btn.roast-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(247, 37, 133, 0.4);
}

/* ============================================
   📤 PAYLAŞ MODAL
   ============================================ */

.share-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.share-modal.hidden {
  display: none;
}

.share-modal-content {
  background: linear-gradient(135deg, rgba(20, 25, 50, 0.98), rgba(30, 35, 60, 0.95));
  border: 1px solid rgba(0, 242, 255, 0.2);
  border-radius: 24px;
  padding: 32px;
  max-width: 500px;
  width: 100%;
  position: relative;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.share-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.share-modal-close:hover {
  background: rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
}

.share-modal-content h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-modal-content h3 i {
  color: #00f2ff;
}

.share-modal-desc {
  color: #888;
  font-size: 14px;
  margin-bottom: 24px;
}

.share-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.share-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.share-option-btn:hover {
  background: rgba(0, 242, 255, 0.1);
  border-color: rgba(0, 242, 255, 0.3);
  transform: translateY(-2px);
}

.share-option-btn i {
  font-size: 24px;
}

.share-option-btn span {
  font-size: 12px;
  font-weight: 500;
}

#share-download i { color: #00f2ff; }
#share-instagram i { color: #e1306c; }
#share-twitter i { color: #fff; }
#share-whatsapp i { color: #25d366; }
#share-copy-link i { color: #b24bf3; }

.share-preview-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 16px;
}

.share-preview-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}

.share-preview {
  background: #0a0e27;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-preview-card {
  text-align: center;
}

.share-preview-score {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, #00f2ff, #b24bf3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.share-preview-label-text {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.share-preview-brand {
  font-size: 14px;
  color: #00f2ff;
  margin-top: 12px;
  font-weight: 600;
}

/* ============================================
   🔥 ROAST MODAL
   ============================================ */

.roast-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.roast-modal.hidden {
  display: none;
}

.roast-modal-content {
  background: linear-gradient(135deg, rgba(30, 15, 15, 0.98), rgba(40, 20, 20, 0.95));
  border: 2px solid rgba(255, 107, 53, 0.4);
  border-radius: 24px;
  padding: 32px;
  max-width: 550px;
  width: 100%;
  position: relative;
  animation: roastSlideIn 0.4s ease-out;
}

@keyframes roastSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.roast-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.roast-modal-close:hover {
  background: rgba(255, 107, 107, 0.3);
}

.roast-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.roast-header h3 {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #ff6b35, #f72585);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.roast-fire {
  font-size: 32px;
  animation: fireFlicker 0.5s ease-in-out infinite alternate;
}

@keyframes fireFlicker {
  from { transform: scale(1) rotate(-5deg); }
  to { transform: scale(1.1) rotate(5deg); }
}

.roast-warning {
  text-align: center;
  font-size: 13px;
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.roast-content {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  padding: 24px;
  min-height: 200px;
  margin-bottom: 20px;
}

.roast-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 150px;
  color: #ff6b35;
}

.roast-loading i {
  font-size: 40px;
}

.roast-text {
  font-size: 16px;
  line-height: 1.8;
  color: #fff;
}

.roast-text p {
  margin-bottom: 16px;
  padding-left: 20px;
  border-left: 3px solid #ff6b35;
}

.roast-score {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 107, 53, 0.3);
}

.roast-score-value {
  font-size: 42px;
  font-weight: 900;
  color: #ff6b35;
}

.roast-score-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.roast-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.roast-actions.hidden {
  display: none;
}

.roast-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 107, 53, 0.2);
  border: 1px solid rgba(255, 107, 53, 0.4);
  border-radius: 10px;
  color: #ff6b35;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.roast-action-btn:hover {
  background: rgba(255, 107, 53, 0.3);
  transform: translateY(-2px);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .result-action-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .result-action-btn {
    justify-content: center;
    width: 100%;
  }
  
  .share-options {
    grid-template-columns: 1fr;
  }
  
  .share-modal-content,
  .roast-modal-content {
    padding: 24px 16px;
    margin: 10px;
  }
  
  .roast-header h3 {
    font-size: 22px;
  }
}

/* ==========================================
   PLATFORM SPESİFİK BÖLÜMLER
   ========================================== */

.platform-specific-section {
  margin: 20px 0;
}

.platform-card {
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.1);
}

.platform-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 16px;
}

.platform-card-header i {
  font-size: 20px;
}

.platform-card-text {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Status & Score Badges */
.status-badge {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.ready {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.status-badge.not-ready {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.status-badge.partial {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.score-badge {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  background: rgba(0, 242, 255, 0.2);
  color: #00f2ff;
}

.score-badge.high {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.score-badge.medium {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.score-badge.low {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* BUMBLE Özel */
.bumble-card {
  border-color: rgba(255, 198, 41, 0.4);
  background: linear-gradient(135deg, rgba(255, 198, 41, 0.08) 0%, rgba(255, 198, 41, 0.02) 100%);
}

.bumble-card .platform-card-header {
  background: linear-gradient(90deg, rgba(255, 198, 41, 0.2) 0%, transparent 100%);
  margin: -20px -20px 16px -20px;
  padding: 16px 20px;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid rgba(255, 198, 41, 0.2);
}

.bumble-card .platform-card-header i {
  color: #ffc629;
  font-size: 24px;
}

.bumble-card .platform-card-header span:first-of-type {
  color: #ffc629;
  font-size: 18px;
  font-weight: 700;
}

.bio-suggestion-box {
  margin-top: 16px;
  padding: 16px;
  background: rgba(255, 198, 41, 0.1);
  border-radius: 12px;
  border-left: 3px solid #ffc629;
}

.bio-suggestion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #ffc629;
}

.bio-suggestion-text {
  color: #fff;
  font-size: 15px;
  font-style: italic;
  margin: 0;
  padding: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
}

/* HINGE Özel */
.hinge-card {
  border-color: rgba(108, 92, 231, 0.4);
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.08) 0%, rgba(108, 92, 231, 0.02) 100%);
}

.hinge-card .platform-card-header {
  background: linear-gradient(90deg, rgba(108, 92, 231, 0.2) 0%, transparent 100%);
  margin: -20px -20px 16px -20px;
  padding: 16px 20px;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid rgba(108, 92, 231, 0.2);
}

.hinge-card .platform-card-header i {
  color: #6c5ce7;
  font-size: 24px;
}

.hinge-card .platform-card-header span:first-of-type {
  color: #6c5ce7;
  font-size: 18px;
  font-weight: 700;
}

.voice-prompt-box {
  margin-top: 16px;
  padding: 14px;
  background: rgba(108, 92, 231, 0.1);
  border-radius: 12px;
}

.voice-prompt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #6c5ce7;
}

.voice-prompt-text {
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  margin: 0;
}

.prompts-analysis-box {
  margin-top: 16px;
}

.prompts-analysis-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
  color: #6c5ce7;
}

.prompts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prompt-item {
  background: rgba(108, 92, 231, 0.1);
  border-radius: 10px;
  padding: 12px;
}

.prompt-question {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}

.prompt-answer {
  font-size: 14px;
  color: #fff;
  margin-bottom: 8px;
}

.prompt-scores {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.prompt-score {
  display: flex;
  align-items: center;
  gap: 4px;
}

.prompt-score-value {
  font-weight: 700;
  color: #6c5ce7;
}

.prompt-suggestion {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

.suggested-prompts-box {
  margin-top: 16px;
  padding: 14px;
  background: rgba(108, 92, 231, 0.05);
  border-radius: 12px;
  border: 1px dashed rgba(108, 92, 231, 0.3);
}

.suggested-prompts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #6c5ce7;
}

.prompts-suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.prompts-suggestions-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}

.prompts-suggestions-list li:last-child {
  border-bottom: none;
}

.prompts-suggestions-list li::before {
  content: "💡 ";
}

/* HAPPN Özel */
.happn-card {
  border-color: rgba(255, 107, 129, 0.4);
  background: linear-gradient(135deg, rgba(255, 107, 129, 0.08) 0%, rgba(255, 107, 129, 0.02) 100%);
}

.happn-card .platform-card-header {
  background: linear-gradient(90deg, rgba(255, 107, 129, 0.2) 0%, transparent 100%);
  margin: -20px -20px 16px -20px;
  padding: 16px 20px;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid rgba(255, 107, 129, 0.2);
}

.happn-card .platform-card-header i {
  color: #ff6b81;
  font-size: 24px;
}

.happn-card .platform-card-header span:first-of-type {
  color: #ff6b81;
  font-size: 18px;
  font-weight: 700;
}

.happn-metric-box {
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 107, 129, 0.1);
  border-radius: 12px;
}

.happn-metric-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #ff6b81;
}

.crushpoints-box {
  margin-top: 16px;
}

.crushpoints-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
  color: #ff6b81;
}

.crushpoints-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crushpoint-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 107, 129, 0.15);
  border-radius: 20px;
  font-size: 13px;
}

.crushpoint-item i {
  color: #ff6b81;
}

/* Responsive */
@media (max-width: 480px) {
  .platform-card {
    padding: 16px;
  }
  
  .platform-card-header {
    font-size: 14px;
    flex-wrap: wrap;
  }
  
  .status-badge, .score-badge {
    margin-left: 0;
    margin-top: 8px;
  }
  
  .prompt-scores {
    flex-direction: column;
    gap: 6px;
  }
}

/* Metric Row - Platform kartları için */
.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.metric-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

.metric-label i {
  font-size: 16px;
  opacity: 0.8;
}

.bumble-metric, .hinge-metric, .happn-metric {
  margin-bottom: 16px;
}

/* ========================================
   NAVBAR FIX - Paketler Butonu + Shimmer + Mobil
   ======================================== */

/* Paketler Butonu - Küçültüldü + Shimmer */
.btn-pricing {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(0,242,255,0.12), rgba(178,75,243,0.12));
    border: 1px solid rgba(0,242,255,0.25);
    border-radius: 10px;
    color: #00f2ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Shimmer Efekti */
.btn-pricing::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.btn-pricing:hover {
    background: linear-gradient(135deg, rgba(0,242,255,0.2), rgba(178,75,243,0.2));
    border-color: rgba(0,242,255,0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0,242,255,0.15);
}

.btn-pricing:hover::before {
    animation: none;
}

.btn-pricing i {
    font-size: 12px;
}

/* 🌈 Paketler butonu — dikkat cekici renk degistiren kenarlik + glow */
.btn-pricing.rs-glow {
    animation: rsPricingGlow 3s linear infinite;
}
@keyframes rsPricingGlow {
    0%   { border-color: #00f2ff; box-shadow: 0 0 14px rgba(0,242,255,0.55); }
    33%  { border-color: #b24bf3; box-shadow: 0 0 16px rgba(178,75,243,0.55); }
    66%  { border-color: #ff4bd8; box-shadow: 0 0 16px rgba(255,75,216,0.55); }
    100% { border-color: #00f2ff; box-shadow: 0 0 14px rgba(0,242,255,0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-pricing.rs-glow { animation: none; border-color: #b24bf3; box-shadow: 0 0 12px rgba(178,75,243,0.4); }
}

/* Mobil Navbar */
@media (max-width: 768px) {
    .navbar {
        padding: 12px 16px;
    }
    
    .logo {
        font-size: 20px;
        letter-spacing: 1px;
    }
    
    .nav-actions {
        gap: 8px;
    }
    
    .btn-pricing {
        padding: 8px 14px;
        font-size: 12px;
        gap: 6px;
    }
    
    .btn-pricing span {
        display: inline;
    }
    
    .btn-pricing i {
        font-size: 14px;
    }
    
    .btn-profile {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .btn-profile span {
        display: none;
    }
}

@media (max-width: 400px) {
    .navbar {
        padding: 10px 12px;
    }
    
    .logo {
        font-size: 18px;
    }
}

/* ========================================
   LOCKED CARDS - Animasyonlu Kilit Efekti
   ======================================== */

/* Maintenance locked - Admin kapatmış */
.select-card.maintenance-locked {
    opacity: 0.5;
    filter: grayscale(60%);
    cursor: not-allowed;
    position: relative;
    transition: all 0.3s ease;
}

.select-card.maintenance-locked:hover {
    animation: shake 0.4s ease-in-out;
    opacity: 0.6;
}

/* Premium locked - Paket gerekli */
.select-card.premium-locked {
    opacity: 0.6;
    filter: grayscale(40%);
    cursor: not-allowed;
    position: relative;
    transition: all 0.3s ease;
}

.select-card.premium-locked:hover {
    animation: shake 0.4s ease-in-out;
    opacity: 0.7;
}

/* Shake animasyonu */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ========================================
   TINDER STYLE INTERFACE
   ======================================== */
#tinder-interface.tinder-interface {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

#tinder-interface .tinder-tabs {
    display: flex;
    background: rgba(255,255,255,0.05) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#tinder-interface .tinder-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.5) !important;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

#tinder-interface .tinder-tab.active {
    color: #ff4458 !important;
}

#tinder-interface .tinder-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: #ff4458;
    border-radius: 2px;
}

#tinder-interface .tinder-panel {
    display: none;
    padding: 12px;
    background: transparent !important;
}

#tinder-interface .tinder-panel.active {
    display: block;
}

/* Tinder Photo Grid - 3x3 */
#tinder-interface .tinder-photo-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
}

#tinder-interface .tinder-photo-slot {
    aspect-ratio: 3/4;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px dashed rgba(255,255,255,0.15) !important;
}

#tinder-interface .tinder-photo-slot:hover {
    transform: scale(1.02);
    border-color: rgba(255,255,255,0.3) !important;
}

#tinder-interface .tinder-photo-slot.has-photo {
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: grab;
}

#tinder-interface .tinder-photo-slot.has-photo:active {
    cursor: grabbing;
}

#tinder-interface .tinder-photo-slot.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

#tinder-interface .tinder-photo-slot.drag-over {
    border: 2px solid #ff4458 !important;
    background: rgba(255,68,88,0.1) !important;
}

#tinder-interface .tinder-photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

#tinder-interface .tinder-photo-slot .slot-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff !important;
    transition: transform 0.2s, background 0.2s;
    z-index: 2;
}

#tinder-interface .tinder-photo-slot .slot-remove:hover {
    transform: scale(1.1);
    background: #ff4458;
}

#tinder-interface .tinder-photo-slot .slot-add {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.25) !important;
    font-size: 20px;
}

/* Main Photo Badge - sadece yıldız */
#tinder-interface .main-photo-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: linear-gradient(135deg, #ff4458, #ff6b6b);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255,68,88,0.5);
    z-index: 2;
}

#tinder-interface .main-photo-badge i {
    font-size: 10px;
}

/* Slot Number */
#tinder-interface .slot-number {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.4);
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Profil Hazırlık - Kompakt */
#tinder-interface .profile-readiness {
    margin-bottom: 12px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 10px;
}

#tinder-interface .readiness-header {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#tinder-interface .readiness-label {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

#tinder-interface .readiness-percent {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

#tinder-interface .readiness-bar-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

#tinder-interface .readiness-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff4458, #ff4458dd);
    border-radius: 2px;
    transition: width 0.4s ease, background 0.4s ease;
}

#tinder-interface .readiness-text {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
}

/* Swipe Animasyonları */
#tinder-interface .tinder-preview-card {
    width: 100%;
    max-width: 340px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    cursor: grab;
    user-select: none;
}

#tinder-interface #preview-main-photo.swipe-left {
    animation: swipeLeft 0.3s ease forwards;
}

#tinder-interface #preview-main-photo.swipe-right {
    animation: swipeRight 0.3s ease forwards;
}

@keyframes swipeLeft {
    0% { transform: translateX(30px); opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes swipeRight {
    0% { transform: translateX(-30px); opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}

/* ========================================
   TINDER STYLE LOADING
   ======================================== */
.tinder-loader {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 30px;
}

.tinder-loader-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #ff4458;
    animation: tinderSpin 1.2s linear infinite;
}

.tinder-loader-ring.inner {
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border-top-color: #ff8fa3;
    animation-duration: 1.8s;
    animation-direction: reverse;
}

.tinder-loader-photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e, #2d2d44);
    box-shadow: 0 8px 32px rgba(255, 68, 88, 0.3);
}

.tinder-loader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tinder-loader-photo img[src=""] {
    display: none;
}

@keyframes tinderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   TINDER RESULTS SECTION - v2 Clean Design
   ======================================== */
.tinder-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Staggered Animation */
.tinder-card > * {
    opacity: 0;
    transform: translateY(20px);
    animation: tinderFadeUp 0.5s ease forwards;
}

.tinder-card > *:nth-child(1) { animation-delay: 0.1s; }
.tinder-card > *:nth-child(2) { animation-delay: 0.2s; }
.tinder-card > *:nth-child(3) { animation-delay: 0.35s; }
.tinder-card > *:nth-child(4) { animation-delay: 0.5s; }
.tinder-card > *:nth-child(5) { animation-delay: 0.65s; }
.tinder-card > *:nth-child(6) { animation-delay: 0.8s; }
.tinder-card > *:nth-child(7) { animation-delay: 0.95s; }
.tinder-card > *:nth-child(8) { animation-delay: 1.1s; }

@keyframes tinderFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Skorlar Yan Yana */
.tinder-scores-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.tinder-score-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}

.tinder-score-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, var(--glow-color, transparent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.tinder-score-box.glow-active::before {
    opacity: 1;
}

.tinder-score-box.glow-green { --glow-color: rgba(76, 217, 100, 0.15); }
.tinder-score-box.glow-yellow { --glow-color: rgba(255, 204, 0, 0.15); }
.tinder-score-box.glow-red { --glow-color: rgba(255, 68, 88, 0.15); }

.tinder-score-box.highlight {
    background: rgba(255,68,88,0.05);
    border-color: rgba(255,68,88,0.15);
}

/* Score Circle */
.score-circle-mini {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 12px;
}

.score-circle-mini svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-circle-mini .score-bg {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 6;
}

.score-circle-mini .score-progress {
    fill: none;
    stroke: url(#scoreGradientGreen);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 214;
    stroke-dashoffset: 214;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 6px var(--score-glow, rgba(76,217,100,0.5)));
}

.score-circle-mini.fire .score-progress {
    stroke: url(#scoreGradientFire);
    --score-glow: rgba(255,68,88,0.5);
}

.score-value-mini {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: baseline;
    color: #fff;
}

.score-value-mini span {
    font-size: 32px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
}

.score-value-mini small {
    font-size: 12px;
    opacity: 0.7;
}

.score-label {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* İstatistik Box */
.tinder-stats-box {
    display: flex;
    align-items: center;
    padding: 16px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 16px;
}

.stats-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background 0.3s ease;
}

.stats-item.highlight {
    background: rgba(76, 217, 100, 0.08);
}

.stats-icon {
    font-size: 24px;
}

.stats-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-value {
    font-size: 18px;
    font-weight: 800;
    color: #4cd964;
}

.stats-item:not(.highlight) .stats-value {
    color: #ff7854;
}

.stats-label {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.stats-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    margin: 0 8px;
}

/* Genel İnceleme Metni */
.tinder-overview {
    padding: 16px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 16px;
}

.tinder-overview p {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin: 0;
}

/* Section Headers */
.tinder-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}

.tinder-section-header i {
    font-size: 14px;
    color: #ff4458;
}

.tinder-section-header .premium-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 8px;
}

/* Photos Analysis Grid */
.tinder-photos-analysis {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}

.tinder-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.tinder-photo-item {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tinder-photo-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    z-index: 10;
}

.tinder-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tinder-photo-item:hover img {
    transform: scale(1.1);
}

.tinder-photo-item .photo-score-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0,0,0,0.75);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 3px;
}

.tinder-photo-item .photo-score-badge.high { color: #4cd964; }
.tinder-photo-item .photo-score-badge.medium { color: #ffcc00; }
.tinder-photo-item .photo-score-badge.low { color: #ff4458; }

.tinder-photo-item .photo-rank {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

/* Photo Tooltip */
.tinder-photo-item .photo-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 100;
}

.tinder-photo-item .photo-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0,0,0,0.9);
}

.tinder-photo-item:hover .photo-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* Artılar / Eksiler 2 Kolon */
.tinder-feedback-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.tinder-feedback-box {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid;
}

.tinder-feedback-box.good {
    background: rgba(76,217,100,0.05);
    border-color: rgba(76,217,100,0.2);
}

.tinder-feedback-box.bad {
    background: rgba(255,68,88,0.05);
    border-color: rgba(255,68,88,0.2);
}

.feedback-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tinder-feedback-box.good .feedback-header {
    color: #4cd964;
}

.tinder-feedback-box.bad .feedback-header {
    color: #ff4458;
}

.feedback-header i {
    font-size: 14px;
}

.feedback-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-list li {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
}

.feedback-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.tinder-feedback-box.good .feedback-list li::before {
    background: #4cd964;
}

.tinder-feedback-box.bad .feedback-list li::before {
    background: #ff4458;
}

.feedback-list li.blurred {
    filter: blur(5px);
    user-select: none;
}

.feedback-blur-teaser {
    margin-top: 10px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.feedback-blur-teaser:hover {
    background: rgba(255,255,255,0.06);
}

.feedback-blur-teaser i {
    color: #ffd700;
    font-size: 10px;
}

/* Locked Sections */
.tinder-locked-section {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}

.tinder-locked-content {
    position: relative;
}

.locked-blur-box {
    position: relative;
    min-height: 60px;
    overflow: hidden;
    border-radius: 8px;
}

.locked-blur-box.tall {
    min-height: 80px;
}

.locked-placeholder {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    filter: blur(6px);
}

.placeholder-item {
    height: 32px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
}

.placeholder-text {
    height: 12px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}

.placeholder-text.short {
    width: 60%;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

.locked-overlay i {
    font-size: 18px;
    color: #ffd700;
}

.locked-overlay span {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

/* Completion CTA */
.tinder-completion-cta {
    padding: 20px;
    background: linear-gradient(135deg, rgba(255,68,88,0.1) 0%, rgba(255,215,0,0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,68,88,0.2);
    text-align: center;
}

.completion-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.completion-header i {
    color: #ff4458;
}

.completion-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.completion-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.completion-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff4458, #ffd700);
    border-radius: 4px;
    transition: width 1s ease-out;
}

.completion-percent {
    font-size: 16px;
    font-weight: 800;
    color: #ffd700;
    min-width: 45px;
}

.completion-message {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin: 0 0 16px 0;
}

.completion-message strong {
    color: #4cd964;
}

.tinder-premium-cta {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #ff4458 0%, #ff7854 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(255,68,88,0.3);
}

.tinder-premium-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,68,88,0.4);
}

.tinder-premium-cta i {
    color: #ffd700;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .tinder-scores-row {
        gap: 8px;
    }
    
    .tinder-score-box {
        padding: 16px 8px;
    }
    
    .score-circle-mini {
        width: 70px;
        height: 70px;
    }
    
    .score-value-mini span {
        font-size: 20px;
    }
    
    .tinder-feedback-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .tinder-photos-grid {
        gap: 6px;
    }
    
    .comparison-label {
        width: 50px;
        font-size: 10px;
    }
}

/* Tinder Preview Panel */
#tinder-interface #tinder-preview-panel {
    display: none;
    padding: 20px;
    background: transparent !important;
}

#tinder-interface #tinder-preview-panel.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

#tinder-interface .preview-photo-container {
    position: relative;
    aspect-ratio: 3/4;
    background: #1a1a2e;
}

#tinder-interface .preview-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#tinder-interface .preview-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    pointer-events: none;
}

#tinder-interface .preview-info {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    color: #fff;
    pointer-events: none;
}

#tinder-interface .preview-bio {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
    line-height: 1.4;
    color: #fff !important;
}

/* Preview Navigation Buttons */
#tinder-interface .preview-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

#tinder-interface .preview-nav-btn:hover {
    background: rgba(0,0,0,0.7);
    transform: translateY(-50%) scale(1.1);
}

#tinder-interface .preview-nav-btn.prev {
    left: 12px;
}

#tinder-interface .preview-nav-btn.next {
    right: 12px;
}

#tinder-interface .preview-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

#tinder-interface .preview-nav-btn:disabled:hover {
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
}

/* Preview Empty State */
#tinder-interface .preview-empty-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.3);
}

#tinder-interface .preview-empty-state i {
    font-size: 48px;
}

#tinder-interface .preview-empty-state span {
    font-size: 14px;
}

#tinder-interface .preview-empty-state.hidden {
    display: none;
}

/* Preview Dots */
#tinder-interface .preview-dots {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

#tinder-interface .preview-dot {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.4);
    border-radius: 2px;
    transition: background 0.2s;
}

#tinder-interface .preview-dot.active {
    background: #fff;
}

/* Mobile responsive */
@media (max-width: 480px) {
    #tinder-interface.tinder-interface {
        border-radius: 16px;
    }
    
    #tinder-interface .tinder-photo-grid {
        gap: 6px;
    }
    
    #tinder-interface .tinder-photo-slot .slot-remove {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    #tinder-interface .preview-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ============================================
   TINDER RESULTS - P0 Spec Ek Stiller
   ============================================ */

/* Fotoğraf Kartları */
.tinder-photos-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tinder-photo-card {
    display: flex;
    gap: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s;
}

.tinder-photo-card.main-photo {
    border-color: rgba(255,215,0,0.4);
    background: rgba(255,215,0,0.05);
}

.tinder-photo-card.has-issues {
    border-color: rgba(255,68,88,0.3);
}

.tinder-photo-card .photo-wrapper {
    position: relative;
    width: 80px;
    min-width: 80px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
}

.tinder-photo-card .photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tinder-photo-card .photo-index {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.tinder-photo-card .main-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #000;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.tinder-photo-card .photo-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tinder-photo-card .photo-decision {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
}

.tinder-photo-card .photo-decision.keep {
    background: rgba(76,217,100,0.15);
    color: #4cd964;
}

.tinder-photo-card .photo-decision.replace {
    background: rgba(255,204,0,0.15);
    color: #ffcc00;
}

.tinder-photo-card .photo-decision.retake {
    background: rgba(255,68,88,0.15);
    color: #ff4458;
}

.tinder-photo-card .kapak-score {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.tinder-photo-card .kapak-score strong {
    color: #fff;
}

.tinder-photo-card .photo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tinder-photo-card .photo-tags .tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.tinder-photo-card .photo-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tinder-photo-card .photo-issues .issue {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    background: rgba(255,68,88,0.15);
    color: #ff4458;
}

.tinder-photo-card .photo-reason {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}

/* Önerilen Sıralama */
.recommended-order {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 0;
}

.order-item {
    position: relative;
    width: 65px;
    min-width: 65px;
    height: 85px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
}

.order-item.first {
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255,215,0,0.3);
}

.order-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-item .order-num {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.order-item .order-crown {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffd700;
    font-size: 12px;
}

.order-reason {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-top: 8px;
    line-height: 1.5;
}

/* AI Coach Content */
.ai-coach-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-tip {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}

.ai-tip .tip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fe3c72;
    margin-bottom: 8px;
}

.ai-tip .tip-content {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
}

.ai-tip.bio-tip .tip-content {
    font-style: italic;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

.copy-bio-btn {
    background: linear-gradient(135deg, #fe3c72, #ff6b6b);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.copy-bio-btn:hover {
    transform: scale(1.02);
}

/* Checklist */
.checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.checklist-item:hover {
    background: rgba(255,255,255,0.05);
}

.checklist-item.done {
    opacity: 0.5;
}

.checklist-item.done .check-box {
    background: #4cd964;
    border-color: #4cd964;
}

.checklist-item.done .check-box i {
    opacity: 1;
}

.checklist-item.done .task-text {
    text-decoration: line-through;
}

.checklist-item .check-box {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checklist-item .check-box i {
    color: #fff;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.2s;
}

.checklist-item .task-text {
    flex: 1;
    font-size: 12px;
    color: #fff;
}

.checklist-item .task-impact {
    font-size: 11px;
    font-weight: 600;
    color: #4cd964;
    background: rgba(76,217,100,0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Verdict Tip */
.ai-tip.verdict-tip {
    background: linear-gradient(135deg, rgba(254,60,114,0.1), rgba(255,107,107,0.05));
    border-color: rgba(254,60,114,0.2);
}


/* ============================================
   AI COACH - SADELEŞTIRILMIŞ TASARIM
   ============================================ */

/* Genel AI Tip Stili */
.ai-tip {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.ai-tip .tip-header {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-tip .tip-header i {
    font-size: 14px;
}

/* Red Flags - Minimal */
.ai-tip.redflag-tip {
    border-color: rgba(255,107,107,0.2);
}

.ai-tip.redflag-tip .tip-header {
    color: #ff6b6b;
}

.redflag-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.redflag-item {
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 12px;
}

.redflag-item .rf-problem {
    font-size: 13px;
    color: #fff;
    margin-bottom: 4px;
}

.redflag-item .rf-impact,
.redflag-item .rf-solution {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

/* Eksik Foto Türleri - Minimal */
.missing-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.missing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
}

.missing-item .missing-type {
    font-size: 13px;
    color: #fff;
}

.missing-item .missing-priority {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.missing-item .missing-priority.zorunlu {
    background: rgba(255,107,107,0.15);
    color: #ff6b6b;
}

.missing-item .missing-priority.onerilen {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}

.missing-item .missing-priority.bonus {
    background: rgba(76,217,100,0.12);
    color: #4cd964;
}

.missing-item .missing-suggestion {
    width: 100%;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 6px;
}

/* Bio Analizi - Temiz */
.bio-score {
    font-size: 14px;
    color: #fff;
    margin-bottom: 12px;
}

.bio-current {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    padding: 10px;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    margin-bottom: 10px;
}

.bio-current.empty {
    color: #ff6b6b;
}

.bio-problems {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 12px;
}

.bio-suggestion {
    background: rgba(76,217,100,0.06);
    border: 1px solid rgba(76,217,100,0.15);
    border-radius: 8px;
    padding: 12px;
}

.bio-suggestion .suggestion-label {
    font-size: 11px;
    color: #4cd964;
    margin-bottom: 6px;
}

.bio-suggestion .suggestion-text {
    font-size: 13px;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 10px;
}

.copy-bio-btn {
    background: #4cd964;
    color: #000;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

/* Verification - Minimal */
.verification-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

.verification-tip-text {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 8px;
}

/* 72 Saat Planı - Temiz */
.action-plan {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.priority-group {
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    overflow: hidden;
}

.priority-group .priority-label {
    font-size: 11px;
    font-weight: 500;
    padding: 8px 12px;
    color: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.priority-group.p0 .priority-label { color: #ff6b6b; }
.priority-group.p1 .priority-label { color: #ffd93d; }
.priority-group.p2 .priority-label { color: #4cd964; }

.task-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.task-item:hover {
    background: rgba(255,255,255,0.02);
}

.task-item.done {
    opacity: 0.35;
}

.task-item.done .task-check {
    background: #4cd964;
    border-color: #4cd964;
}

.task-item.done .task-check i { opacity: 1; }
.task-item.done .task-text { text-decoration: line-through; }

.task-item .task-check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.task-item .task-check i {
    color: #fff;
    font-size: 9px;
    opacity: 0;
}

.task-item .task-info {
    flex: 1;
}

.task-item .task-category {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 2px;
}

.task-item .task-text {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    line-height: 1.4;
}

.task-item .task-desc {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
}

.task-item .task-impact {
    font-size: 10px;
    color: #4cd964;
    white-space: nowrap;
}

/* Sonuç - Minimal */
.ai-tip.verdict-tip .tip-content {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

/* Puan Renkleri */
.tinder-photo-card .kapak-score.good strong { color: #4cd964; }
.tinder-photo-card .kapak-score.medium strong { color: #ffd93d; }
.tinder-photo-card .kapak-score.bad strong { color: #ff6b6b; }

/* ============================================
   FLIP CARD - FOTOĞRAF KARTLARI
   ============================================ */

.photo-flip-card {
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 3/4;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.photo-flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

.flip-card-front {
    background: #1a1a1a;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flip-card-front .photo-index {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.flip-card-front .main-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #000;
}

.flip-card-front .flip-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.flip-badge.keep {
    background: #4cd964;
    color: #000;
}

.flip-badge.replace {
    background: #ff9f0a;
    color: #000;
}

.flip-badge.retake {
    background: #ff6b6b;
    color: #fff;
}

.flip-card-front .flip-hint {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

/* ARKA YÜZ */
.flip-card-back {
    background: linear-gradient(180deg, #1f1f1f 0%, #151515 100%);
    transform: rotateY(180deg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-top-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.back-thumb {
    width: 50px;
    height: 65px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.back-top-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.back-score-small {
    font-size: 20px;
    font-weight: 700;
}

.back-score-small small {
    font-size: 12px;
    opacity: 0.6;
}

.back-score-small.good { color: #4cd964; }
.back-score-small.medium { color: #ffd93d; }
.back-score-small.bad { color: #ff6b6b; }

.back-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}

.back-decision {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.back-decision.keep {
    background: rgba(76,217,100,0.2);
    color: #4cd964;
}

.back-decision.replace {
    background: rgba(255,159,10,0.2);
    color: #ff9f0a;
}

.back-decision.retake {
    background: rgba(255,107,107,0.2);
    color: #ff6b6b;
}

.back-score {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding: 8px 0;
}

.back-score span {
    font-size: 36px;
}

.back-score.good { color: #4cd964; }
.back-score.medium { color: #ffd93d; }
.back-score.bad { color: #ff6b6b; }

.back-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
}

.back-tags span {
    font-size: 9px;
    padding: 3px 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
}

.back-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
}

.back-issues span,
.back-issues .issue-tag {
    font-size: 9px;
    padding: 3px 6px;
    background: rgba(255,107,107,0.15);
    border-radius: 8px;
    color: #ff6b6b;
}

.back-reason {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-align: left;
    line-height: 1.4;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ÖNERİLEN SIRALAMA - Fotoğraf Gridinin Altında */
.photo-order-section {
    grid-column: 1 / -1;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
}

.order-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-label i {
    color: #4cd964;
}

.order-thumbs {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

.order-thumb {
    position: relative;
    width: 80px;
    height: 106px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
}

.order-thumb.first {
    border-color: #ffd700;
}

.order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-thumb .order-num {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.order-thumb.first .order-num {
    background: #ffd700;
    color: #000;
}

.order-reason {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-top: 12px;
}

/* ============================================
   ACCORDION - AI KOÇU BÖLÜMLERİ
   ============================================ */

.ai-tip.accordion {
    padding: 0;
    overflow: hidden;
}

.ai-tip.accordion .tip-header {
    padding: 14px 16px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

.ai-tip.accordion .tip-header:hover {
    background: rgba(255,255,255,0.02);
}

.ai-tip.accordion .tip-header::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    transition: transform 0.3s;
}

.ai-tip.accordion.open .tip-header::after {
    transform: rotate(180deg);
}

.ai-tip.accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 16px;
}

.ai-tip.accordion.open .accordion-content {
    max-height: 1000px;
    padding: 0 16px 16px;
}

/* Accordion badge - kapalıyken özet göster */
.ai-tip.accordion .tip-header .accordion-badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: 12px;
}

.redflag-tip .accordion-badge {
    background: rgba(255,107,107,0.15);
    color: #ff6b6b;
}

.missing-tip .accordion-badge {
    background: rgba(255,217,61,0.15);
    color: #ffd93d;
}

.bio-tip .accordion-badge {
    background: rgba(76,217,100,0.15);
    color: #4cd964;
}

.checklist-tip .accordion-badge {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
}

/* ============================================
   FLIP CARD - FOTOĞRAF KARTLARI
   ============================================ */

.photo-flip-card {
    width: 100%;
    aspect-ratio: 3/4;
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.photo-flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

.flip-card-front {
    background: #1a1a1a;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flip-card-front .photo-index {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.flip-card-front .main-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 12px;
}

.flip-card-front .flip-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.flip-badge.keep {
    background: #4cd964;
    color: #fff;
}

.flip-badge.replace {
    background: #ff9500;
    color: #fff;
}

.flip-badge.retake {
    background: #ff3b30;
    color: #fff;
}

.flip-card-front .flip-hint {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    font-size: 11px;
}

/* ARKA YÜZ */
.flip-card-back {
    background: linear-gradient(180deg, #1e1e1e 0%, #141414 100%);
    transform: rotateY(180deg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.1);
}

.back-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-title {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

.back-decision {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.back-decision.keep {
    background: rgba(76,217,100,0.2);
    color: #4cd964;
}

.back-decision.replace {
    background: rgba(255,149,0,0.2);
    color: #ff9500;
}

.back-decision.retake {
    background: rgba(255,59,48,0.2);
    color: #ff3b30;
}

.back-score {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding: 4px 0;
}

.back-score span {
    font-size: 28px;
}

.back-score.good { color: #4cd964; }
.back-score.medium { color: #ffd93d; }
.back-score.bad { color: #ff6b6b; }

.back-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.back-tags span {
    font-size: 10px;
    padding: 3px 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    color: rgba(255,255,255,0.7);
}

.back-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.back-issues span {
    font-size: 10px;
    padding: 3px 6px;
    background: rgba(255,107,107,0.15);
    border-radius: 4px;
    color: #ff6b6b;
}

.back-reason {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
    margin-top: auto;
}

/* ÖNERİLEN SIRALAMA - Grid altında */
.photo-order-section {
    grid-column: 1 / -1;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
}

.order-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin-bottom: 12px;
}

.order-label i {
    margin-right: 8px;
    color: #4cd964;
}

.order-thumbs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: flex-start;
}

.order-thumb {
    position: relative;
    width: 70px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
}

.order-thumb.first {
    border: 2px solid #4cd964;
    box-shadow: 0 0 10px rgba(76, 217, 100, 0.3);
}

.order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-thumb .order-num {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.order-reason {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
}

/* Grid güncelleme */
#tinder-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 480px) {
    #tinder-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* DEĞİŞTİR badge - turuncu renk */
.photo-decision.replace {
    background: rgba(255,159,10,0.15) !important;
    color: #ff9f0a !important;
}

/* Tinder Photos Grid - Flip Card Uyumu */
#tinder-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    #tinder-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   TINDER V4 - TEMİZ STİLLER
   ============================================ */

/* Fotoğraf üzerinde küçük puan badge */
.puan-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    z-index: 5;
}
.puan-badge.good { background: rgba(76, 217, 100, 0.9); }
.puan-badge.medium { background: rgba(255, 204, 0, 0.9); }
.puan-badge.bad { background: rgba(255, 68, 88, 0.9); }

/* Arka yüz - kompakt ve okunabilir */
.flip-card-back.compact {
    padding: 8px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.back-puan {
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 4px;
}
.back-puan span { font-size: 10px; opacity: 0.5; }
.back-puan.good { color: #4cd964; }
.back-puan.medium { color: #ffcc00; }
.back-puan.bad { color: #ff4458; }

.back-text {
    font-size: 9px;
    color: rgba(255,255,255,0.7);
    margin: 0;
    padding: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

.back-good, .back-bad, .back-tip {
    font-size: 9px;
    margin: 0;
    padding: 3px 5px;
    border-radius: 3px;
}
.back-good { color: #4cd964; background: rgba(76,217,100,0.1); }
.back-bad { color: #ff6b7a; background: rgba(255,68,88,0.1); }
.back-tip { color: #ffcc00; background: rgba(255,204,0,0.1); }

/* Önerilen sıralama */
.photo-order-recommendation {
    grid-column: 1 / -1;
    background: rgba(88,166,255,0.05);
    border: 1px solid rgba(88,166,255,0.15);
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
}

.order-title {
    font-size: 12px;
    font-weight: 600;
    color: #58a6ff;
    margin-bottom: 10px;
}

.order-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.order-thumb {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
}
.order-thumb.first { border-color: #4cd964; }
.order-thumb img { width: 100%; height: 100%; object-fit: cover; }

.order-num {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-first-badge {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 700;
    background: #4cd964;
    color: #000;
    padding: 1px 4px;
    border-radius: 3px;
}

.order-reason {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin-top: 8px;
}

/* Üst boşluk ve gereksiz bölümleri gizle */
.tinder-card { margin-top: 0 !important; }
.tinder-stats-row { display: none !important; }
.tinder-comparison { display: none !important; }

/* ============================================
   YAŞ SEÇİCİ VE ANALİZ BUTONU
   ============================================ */

/* Yaş Label */
.age-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}

.age-label i {
  color: #ff4458;
}

/* Yaş Select Wrapper */
.age-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Yaş Select */
.age-select {
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(145deg, rgba(30,30,40,0.9) 0%, rgba(20,20,30,0.9) 100%);
  border: 1px solid rgba(255,68,88,0.3);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23ff4458" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: all 0.3s ease;
}

.age-select:hover {
  border-color: rgba(255,68,88,0.6);
  box-shadow: 0 0 20px rgba(255,68,88,0.15);
}

.age-select:focus {
  outline: none;
  border-color: #ff4458;
  box-shadow: 0 0 25px rgba(255,68,88,0.25);
}

.age-select option {
  background: #1a1a2e;
  color: #fff;
  padding: 10px;
}

/* Yaş Yardım Metni */
.age-help {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  padding-left: 4px;
}

/* ============================================
   ANALİZ BUTONU - YENİ TASARIM
   ============================================ */

.analyze-btn {
  width: 100%;
  margin-top: 24px;
  padding: 18px 32px;
  background: linear-gradient(135deg, #ff4458 0%, #ff6b7a 50%, #ff4458 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.4s ease;
  box-shadow: 0 8px 30px rgba(255,68,88,0.4);
  text-transform: none;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.analyze-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.analyze-btn:hover::before {
  left: 100%;
}

.analyze-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(255,68,88,0.5);
  background-position: 100% 0;
}

.analyze-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 25px rgba(255,68,88,0.4);
}

.analyze-btn i {
  font-size: 18px;
}

.analyze-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 15px rgba(255,68,88,0.2);
}

.analyze-btn:disabled:hover {
  transform: none;
  box-shadow: 0 4px 15px rgba(255,68,88,0.2);
}

.analyze-btn:disabled::before {
  display: none;
}

/* ============================================
   DRAG & DROP İYİLEŞTİRME
   ============================================ */

/* Sürüklenirken fotoğraf */
#tinder-interface .tinder-photo-slot.dragging {
  opacity: 0.5;
  transform: scale(0.95);
  border: 2px dashed #ff4458 !important;
  cursor: grabbing;
}

/* Üzerine gelindiğinde hedef slot */
#tinder-interface .tinder-photo-slot.drag-over {
  border: 2px solid #ff4458 !important;
  background: rgba(255,68,88,0.15) !important;
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(255,68,88,0.4);
}

/* Fotoğraflı slotlarda cursor */
#tinder-interface .tinder-photo-slot.has-photo {
  cursor: grab;
}

#tinder-interface .tinder-photo-slot.has-photo:active {
  cursor: grabbing;
}

/* Sürüklenebilir ipucu çizgisi */
#tinder-interface .tinder-photo-slot.has-photo .drag-hint {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
}

#tinder-interface .tinder-photo-slot.has-photo:hover .drag-hint {
  opacity: 1;
}

/* ============================================
   LOADING EKRANI - YENİ TASARIM
   ============================================ */

#loading-screen {
  background: rgba(6, 9, 20, 0.98);
  }

.loading-container {
  width: 90%;
  max-width: 420px;
  padding: 40px 30px;
  text-align: center;
}

/* Üst Kısım: İkon ve Başlık */
.loading-header {
  margin-bottom: 32px;
}

.loading-icon-pulse {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #ff4458 0%, #ff6b7a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-glow 2s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(255, 68, 88, 0.4);
}

.loading-icon-pulse i {
  font-size: 28px;
  color: #fff;
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(255, 68, 88, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(255, 68, 88, 0.6); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
}

.loading-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.loading-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

/* Progress Bar */
.loading-progress-container {
  margin-bottom: 28px;
}

.loading-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.loading-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff4458 0%, #ff6b7a 50%, #ff4458 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
  animation: shimmer 2s infinite linear;
}

.loading-progress-glow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progress-shine 2s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.loading-progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
}

.loading-progress-info #loading-percent {
  color: #ff4458;
  font-weight: 600;
}

.loading-progress-info #loading-time {
  color: rgba(255, 255, 255, 0.4);
}

/* Şaşırtıcı İstatistik Kartı */
.loading-fact-card {
  background: rgba(255, 68, 88, 0.08);
  border: 1px solid rgba(255, 68, 88, 0.2);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  margin-bottom: 28px;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fact-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.fact-content {
  flex: 1;
}

.fact-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 6px;
}

.fact-text {
  font-size: 14px;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

/* Analiz Aşamaları */
.loading-steps {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.loading-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.3;
  transition: all 0.4s ease;
}

.loading-step.active {
  opacity: 1;
}

.loading-step.completed {
  opacity: 1;
}

.loading-step.completed .step-icon {
  background: #4cd964;
  border-color: #4cd964;
}

.loading-step.completed .step-icon i {
  color: #fff;
}

.step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 68, 88, 0.1);
  border: 2px solid rgba(255, 68, 88, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.loading-step.active .step-icon {
  background: rgba(255, 68, 88, 0.2);
  border-color: #ff4458;
  box-shadow: 0 0 20px rgba(255, 68, 88, 0.3);
  animation: step-pulse 1.5s infinite;
}

@keyframes step-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.step-icon i {
  font-size: 16px;
  color: #ff4458;
}

.loading-step span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.3;
}

.loading-step.active span {
  color: #fff;
}

/* Mobil Optimizasyon */
@media (max-width: 480px) {
  .loading-container {
    padding: 30px 20px;
  }
  
  .loading-title {
    font-size: 18px;
  }
  
  .loading-icon-pulse {
    width: 60px;
    height: 60px;
  }
  
  .loading-icon-pulse i {
    font-size: 24px;
  }
  
  .loading-steps {
    gap: 4px;
  }
  
  .step-icon {
    width: 38px;
    height: 38px;
  }
  
  .step-icon i {
    font-size: 14px;
  }
  
  .loading-step span {
    font-size: 9px;
  }
  
  .fact-text {
    font-size: 13px;
  }
}

/* Fact card transition */
.loading-fact-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ================================================
   🐝 BUMBLE LOADING SCREEN TEMASI
   ================================================ */

/* Bumble Loading Container */
#loading-screen.loading-bumble {
  background: linear-gradient(180deg, rgba(20, 15, 5, 0.98) 0%, rgba(6, 9, 20, 0.98) 100%);
}

#loading-screen.loading-bumble .loading-container {
  position: relative;
}

/* Bumble'ın sarı arı ikonu */
#loading-screen.loading-bumble .loading-icon-pulse {
  background: linear-gradient(135deg, #FFC629 0%, #E5B000 100%);
  box-shadow: 0 0 40px rgba(255, 198, 41, 0.4);
  animation: bumble-pulse-glow 2s ease-in-out infinite;
}

#loading-screen.loading-bumble .loading-icon-pulse i {
  color: #1A1A1A;
}

@keyframes bumble-pulse-glow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(255, 198, 41, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(255, 198, 41, 0.6); }
}

/* Bumble Progress Bar */
#loading-screen.loading-bumble .loading-progress-fill {
  background: linear-gradient(90deg, #FFC629 0%, #FFD75E 50%, #FFC629 100%);
  background-size: 200% 100%;
}

#loading-screen.loading-bumble .loading-progress-info #loading-percent {
  color: #FFC629;
}

/* Bumble Fact Card */
#loading-screen.loading-bumble .loading-fact-card {
  background: rgba(255, 198, 41, 0.08);
  border: 1px solid rgba(255, 198, 41, 0.25);
}

/* Bumble Step Icons */
#loading-screen.loading-bumble .step-icon {
  background: rgba(255, 198, 41, 0.1);
  border: 2px solid rgba(255, 198, 41, 0.3);
}

#loading-screen.loading-bumble .step-icon i {
  color: #FFC629;
}

#loading-screen.loading-bumble .loading-step.active .step-icon {
  background: rgba(255, 198, 41, 0.2);
  border-color: #FFC629;
  box-shadow: 0 0 20px rgba(255, 198, 41, 0.3);
}

#loading-screen.loading-bumble .loading-step.completed .step-icon {
  background: #FFC629;
  border-color: #FFC629;
}

#loading-screen.loading-bumble .loading-step.completed .step-icon i {
  color: #1A1A1A;
}

/* ============================================
   SONUÇ EKRANI - FULL SCREEN OPTİMİZASYON
   ============================================ */

/* Modal daha büyük ve full */
#result-screen .glass-modal.result-modal {
  width: 98% !important;
  max-width: 1000px !important;
  max-height: 98vh !important;
  margin: 1vh auto !important;
  padding: 0 !important;
  border-radius: 20px !important;
}

/* Scroll area tam genişlik */
#result-screen .scroll-area {
  padding: 20px 24px 24px 24px !important;
  max-height: calc(98vh - 20px) !important;
}

/* İçerikler biraz daha büyük */
#result-screen .tinder-ui-container {
  transform: scale(1.02);
  transform-origin: top center;
}

/* Mobilde tam ekran */
@media (max-width: 768px) {
  #result-screen .glass-modal.result-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  #result-screen .scroll-area {
    padding: 16px 16px 20px 16px !important;
    max-height: 100vh !important;
  }
}

/* Score hero daha kompakt */
.score-hero-container {
  margin-bottom: 20px !important;
}

/* Kart başlıkları düzeltme */
.k1-strengths-title,
.tinder-strengths-title {
  font-size: 15px !important;
}

/* ============================================
   FOTOĞRAF VALİDASYON - KONTROL EDİLİYOR
   ============================================ */

.tinder-photo-slot.validating {
  position: relative !important;
  pointer-events: none;
}

.tinder-photo-slot.validating::after {
  content: 'Kontrol ediliyor...';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.9);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding-top: 32px;
  text-align: center;
  z-index: 10;
}

.tinder-photo-slot.validating::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #ff4458;
  border-radius: 50%;
  animation: validating-spin 0.7s linear infinite;
  z-index: 11;
}

@keyframes validating-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   SÜRÜKLE BIRAK - DRAG DROP
   ============================================ */

.tinder-photo-slot {
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-drag: element;
  user-drag: element;
}

.tinder-photo-slot.has-photo {
  cursor: grab !important;
  -webkit-user-drag: element;
}

.tinder-photo-slot.has-photo:active {
  cursor: grabbing !important;
}

.tinder-photo-slot.has-photo img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.tinder-photo-slot.dragging {
  opacity: 0.4 !important;
  transform: scale(0.9) !important;
  border: 2px dashed #ff4458 !important;
  cursor: grabbing !important;
}

.tinder-photo-slot.drag-over {
  border: 2px solid #ff4458 !important;
  background: rgba(255,68,88,0.2) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 25px rgba(255,68,88,0.5) !important;
}

/* ============================================
   DETAYLI ANALİZ BUTONU - YENİ TASARIM
   ============================================ */

.locked-section-card {
  background: linear-gradient(135deg, rgba(255,68,88,0.05) 0%, rgba(255,68,88,0.02) 100%);
  border: 1px solid rgba(255,68,88,0.2);
  border-radius: 16px;
  padding: 24px;
  margin-top: 20px;
}

.locked-section-card .k1-card-header {
  margin-bottom: 16px;
}

.locked-section-card .k1-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.locked-section-body {
  text-align: center;
}

.locked-section-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  line-height: 1.5;
}

.k1-btn-analyze {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #ff4458 0%, #ff6b7a 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(255,68,88,0.35);
}

.k1-btn-analyze:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(255,68,88,0.45);
}

.k1-btn-analyze:active {
  transform: translateY(0);
}

.k1-btn-analyze i {
  font-size: 16px;
}

/* Loading durumu */
.locked-section-card.loading {
  opacity: 0.8;
  pointer-events: none;
}

.section-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px;
}

.section-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,68,88,0.2);
  border-top-color: #ff4458;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.section-loading p {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

/* ============================================
   FOTOĞRAF MODAL - DETAYLI ANALİZ
   ============================================ */

.foto-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.foto-modal-overlay.active {
  display: flex;
}

.foto-modal {
  background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 1px solid rgba(255, 68, 88, 0.3);
  border-radius: 20px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.foto-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 68, 88, 0.05);
}

.foto-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.foto-modal-title h3 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.foto-modal-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.foto-modal-badge.keep, .foto-modal-badge.koru {
  background: rgba(76, 217, 100, 0.2);
  color: #4cd964;
}

.foto-modal-badge.improve, .foto-modal-badge.iyilestir {
  background: rgba(255, 204, 0, 0.2);
  color: #ffcc00;
}

.foto-modal-badge.replace, .foto-modal-badge.degistir {
  background: rgba(255, 68, 88, 0.2);
  color: #ff4458;
}

.foto-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.foto-modal-close:hover {
  background: rgba(255, 68, 88, 0.3);
  transform: rotate(90deg);
}

.foto-modal-body {
  display: flex;
  padding: 24px;
  gap: 24px;
  max-height: calc(90vh - 80px);
  overflow-y: auto;
}

.foto-modal-left {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.foto-modal-image {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255, 68, 88, 0.3);
}

.foto-modal-puan {
  background: rgba(255, 68, 88, 0.1);
  border: 1px solid rgba(255, 68, 88, 0.2);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.foto-modal-puan-num {
  font-size: 48px;
  font-weight: 800;
  color: #ff4458;
}

.foto-modal-puan-num.high {
  color: #4cd964;
}

.foto-modal-puan-num.mid {
  color: #ffcc00;
}

.foto-modal-puan-num.low {
  color: #ff4458;
}

.foto-modal-puan-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.foto-modal-right {
  flex: 1;
  min-width: 0;
}

/* Modal Lazy Load */
.modal-lazy-load {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  min-height: 300px;
}

.modal-lazy-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.modal-lazy-load h4 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 12px;
}

.modal-lazy-load p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.modal-analyze-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #ff4458 0%, #ff6b7a 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-analyze-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 68, 88, 0.4);
}

/* Modal Loading */
.modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  text-align: center;
}

.modal-loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 68, 88, 0.2);
  border-top-color: #ff4458;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 20px;
}

.modal-loading p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* Modal Section */
.modal-section {
  margin-bottom: 20px;
}

.modal-section-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.modal-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 14px;
}

.modal-item-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.modal-item-value {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* Mobil */
@media (max-width: 768px) {
  .foto-modal-body {
    flex-direction: column;
  }
  
  .foto-modal-left {
    flex: none;
    width: 100%;
  }
  
  .foto-modal-image {
    max-height: 250px;
    aspect-ratio: auto;
  }
  
  .modal-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MODAL İÇİ - TEKNİK VE DATİNG GRİD
   ============================================ */

.teknik-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.teknik-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.teknik-item-icon {
  font-size: 20px;
  margin-bottom: 6px;
}

.teknik-item-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

.teknik-item-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.teknik-item-value.high { color: #4cd964; }
.teknik-item-value.mid { color: #ffcc00; }
.teknik-item-value.low { color: #ff4458; }

/* Dating Grid */
.dating-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dating-item {
  background: rgba(255, 68, 88, 0.08);
  border: 1px solid rgba(255, 68, 88, 0.15);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.dating-item-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}

.dating-item-value {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* Yönler Container */
.yonler-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.yonler-box {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 16px;
}

.yonler-box.guclu {
  border: 1px solid rgba(76, 217, 100, 0.2);
}

.yonler-box.zayif {
  border: 1px solid rgba(255, 68, 88, 0.2);
}

.yonler-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.yonler-box.guclu .yonler-box-title {
  color: #4cd964;
}

.yonler-box.zayif .yonler-box-title {
  color: #ff4458;
}

.yonler-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.yonler-list li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.yonler-list li::before {
  content: '•';
  color: rgba(255, 255, 255, 0.3);
}

.yonler-list li:last-child {
  border-bottom: none;
}

/* Öneriler */
.oneri-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oneri-item {
  background: rgba(255, 204, 0, 0.08);
  border: 1px solid rgba(255, 204, 0, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.oneri-item i {
  color: #ffcc00;
  font-size: 16px;
  margin-top: 2px;
}

.oneri-item-content {
  flex: 1;
}

.oneri-item-text {
  font-size: 14px;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 6px;
}

.oneri-item-bonus {
  font-size: 12px;
  color: #4cd964;
  font-weight: 600;
}

/* Mobil */
@media (max-width: 600px) {
  .teknik-grid,
  .dating-grid,
  .yonler-container {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TEKNİK ITEM BAR STİLLERİ
   ============================================ */

.teknik-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.teknik-item-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.teknik-item-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.teknik-item-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.teknik-item-bar-fill.high {
  background: linear-gradient(90deg, #4cd964, #7aff8c);
}

.teknik-item-bar-fill.mid {
  background: linear-gradient(90deg, #ffcc00, #ffe066);
}

.teknik-item-bar-fill.low {
  background: linear-gradient(90deg, #ff4458, #ff6b7a);
}

.teknik-item-skor {
  font-size: 16px;
  font-weight: 700;
}

.teknik-item-skor.high { color: #4cd964; }
.teknik-item-skor.mid { color: #ffcc00; }
.teknik-item-skor.low { color: #ff4458; }

/* Dating Item Değer Renkleri */
.dating-item-value.pozitif { color: #4cd964; }
.dating-item-value.negatif { color: #ff4458; }
.dating-item-value.notr { color: rgba(255, 255, 255, 0.8); }

/* ============================================
   UPSELL MODAL - PAKET YÜKSELTİM
   ============================================ */

.upsell-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
    display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: upsellFadeIn 0.3s ease;
}

@keyframes upsellFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.upsell-modal-content {
  background: linear-gradient(145deg, rgba(30, 30, 50, 0.98) 0%, rgba(20, 20, 35, 0.98) 100%);
  border: 1px solid rgba(255, 200, 55, 0.3);
  border-radius: 24px;
  padding: 40px 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 200, 55, 0.1);
  animation: upsellSlideUp 0.4s ease;
}

@keyframes upsellSlideUp {
  from { 
    opacity: 0; 
    transform: translateY(30px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.upsell-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upsell-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.upsell-modal-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(255, 200, 55, 0.3);
}

.upsell-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.upsell-modal-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 28px;
}

.upsell-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  color: #000;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(255, 200, 55, 0.3);
}

.upsell-modal-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255, 200, 55, 0.4);
}

.upsell-modal-btn i {
  font-size: 18px;
}

/* Mobil uyum */
@media (max-width: 480px) {
  .upsell-modal-content {
    padding: 32px 24px;
    margin: 16px;
  }
  
  .upsell-modal-title {
    font-size: 20px;
  }
  
  .upsell-modal-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   UPGRADE TEASER - SONUÇ SAYFASI TEŞVİK
   ============================================ */

.upgrade-teaser-section {
  margin-top: 24px;
}

.upgrade-teaser-card {
  background: linear-gradient(145deg, rgba(255, 200, 55, 0.08) 0%, rgba(255, 128, 8, 0.05) 100%);
  border: 1px solid rgba(255, 200, 55, 0.25);
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}

.upgrade-teaser-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffc837, #ff8008, #ffc837);
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.upgrade-teaser-header {
  text-align: center;
  margin-bottom: 20px;
}

.upgrade-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffc837, #ff8008);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.upgrade-teaser-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.upgrade-potential-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.potential-current, .potential-future {
  text-align: center;
}

.potential-label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.potential-score {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
}

.potential-score.glow {
  color: #ffc837;
  text-shadow: 0 0 20px rgba(255, 200, 55, 0.5);
}

.potential-unit {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.potential-arrow {
  font-size: 24px;
  color: #ffc837;
  animation: arrowPulse 1.5s infinite;
}

@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(5px); opacity: 1; }
}

.upgrade-match-estimate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 68, 88, 0.1);
  border: 1px solid rgba(255, 68, 88, 0.3);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.upgrade-match-estimate i {
  color: #ff4458;
  font-size: 18px;
}

.upgrade-match-estimate strong {
  color: #ff4458;
}

.upgrade-features-box {
  margin-bottom: 24px;
}

.upgrade-features-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
}

.upgrade-features-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upgrade-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
}

.upgrade-feature-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}

.upgrade-feature-text {
  flex: 1;
}

.upgrade-feature-text strong {
  display: block;
  font-size: 14px;
  color: #fff;
  margin-bottom: 2px;
}

.upgrade-feature-text span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.upgrade-feature-lock {
  font-size: 16px;
  opacity: 0.5;
}

.upgrade-teaser-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  color: #000;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 24px;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(255, 200, 55, 0.3);
}

.upgrade-teaser-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255, 200, 55, 0.4);
}

.upgrade-trust {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   TRIAL ENDED MODAL - ÜCRETSİZ HAK BİTTİ
   ============================================ */

.trial-ended-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
    display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: trialFadeIn 0.4s ease;
  padding: 20px;
}

@keyframes trialFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.trial-ended-content {
  background: linear-gradient(145deg, rgba(30, 30, 50, 0.98) 0%, rgba(20, 20, 35, 0.98) 100%);
  border: 1px solid rgba(255, 200, 55, 0.2);
  border-radius: 28px;
  padding: 40px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 60px rgba(255, 200, 55, 0.1);
  animation: trialSlideUp 0.5s ease;
}

@keyframes trialSlideUp {
  from { 
    opacity: 0; 
    transform: translateY(40px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.trial-ended-icon {
  margin-bottom: 24px;
}

.trial-ended-icon-inner {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #fff;
  box-shadow: 0 15px 40px rgba(255, 200, 55, 0.35);
  animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 15px 40px rgba(255, 200, 55, 0.35); }
  50% { transform: scale(1.05); box-shadow: 0 20px 50px rgba(255, 200, 55, 0.5); }
}

.trial-ended-title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px 0;
}

.trial-ended-subtitle {
  font-size: 16px;
  color: #ffc837;
  margin: 0 0 16px 0;
  font-weight: 600;
}

.trial-ended-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.trial-ended-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
}

.trial-ended-features li {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trial-ended-features li:last-child {
  border-bottom: none;
}

.trial-ended-discount {
  background: linear-gradient(135deg, rgba(255, 68, 88, 0.15), rgba(255, 68, 88, 0.05));
  border: 1px solid rgba(255, 68, 88, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #ff6b7a;
}

.trial-ended-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  color: #000;
  font-size: 17px;
  font-weight: 700;
  padding: 18px 28px;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(255, 200, 55, 0.35);
  margin-bottom: 12px;
}

.trial-ended-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255, 200, 55, 0.45);
}

.trial-ended-btn-secondary {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  cursor: pointer;
  padding: 10px;
  transition: color 0.2s ease;
}

.trial-ended-btn-secondary:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Mobil uyum */
@media (max-width: 480px) {
  .trial-ended-content {
    padding: 32px 24px;
    border-radius: 24px;
  }
  
  .trial-ended-title {
    font-size: 22px;
  }
  
  .trial-ended-icon-inner {
    width: 80px;
    height: 80px;
    font-size: 36px;
  }
  
  .upgrade-teaser-card {
    padding: 24px 18px;
  }
  
  .potential-score {
    font-size: 28px;
  }
  
  .upgrade-potential-box {
    gap: 12px;
    padding: 16px;
  }
}

/* ============================================
   ZEİGARNİK BLUR EFEKTİ - SONUÇ SAYFASI
   ============================================ */

.zeigarnik-blur-section {
  position: relative;
}

.zeigarnik-blur {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  opacity: 0.7;
  transition: filter 0.3s ease;
}

.zeigarnik-progress-bar {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-bottom: 16px;
  overflow: hidden;
}

.zeigarnik-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #ffc837, #ff8008);
  border-radius: 3px;
  animation: progressPulse 2s infinite;
}

@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.zeigarnik-progress-text {
  position: absolute;
  right: 0;
  top: -22px;
  font-size: 11px;
  color: rgba(255, 200, 55, 0.8);
  font-weight: 600;
}

.zeigarnik-unlock-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 200, 55, 0.3);
  border-radius: 16px;
  padding: 20px 28px;
  min-width: 260px;
}

.zeigarnik-unlock-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}

.zeigarnik-unlock-hint i {
  color: #ffc837;
}

.zeigarnik-unlock-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ffc837, #ff8008);
  color: #000;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(255, 200, 55, 0.3);
}

.zeigarnik-unlock-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 200, 55, 0.4);
}

/* ============================================
   RASTGELE POPUP - MİNİMAL TASARIM
   ============================================ */

.random-popup-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  animation: slideInRight 0.4s ease;
}

@keyframes slideInRight {
  from { 
    opacity: 0; 
    transform: translateX(100px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

.random-popup-content {
  background: linear-gradient(145deg, rgba(30, 30, 50, 0.98), rgba(20, 20, 35, 0.98));
  border: 1px solid rgba(255, 200, 55, 0.25);
  border-radius: 16px;
  padding: 20px 24px;
  width: 280px;
  text-align: center;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
  position: relative;
}

.random-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.random-popup-close:hover {
  color: #fff;
}

.random-popup-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.random-popup-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px 0;
}

.random-popup-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 14px 0;
  line-height: 1.4;
}

.random-popup-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ffc837, #ff8008);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.random-popup-btn:hover {
  transform: scale(1.05);
}

/* Mobil */
@media (max-width: 480px) {
  .random-popup-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  
  .random-popup-content {
    width: auto;
  }
  
  .zeigarnik-unlock-box {
    min-width: 220px;
    padding: 16px 20px;
  }
}

/* Trial Ended Minimal Versiyon */
.trial-ended-minimal {
  max-width: 340px;
  padding: 32px 28px;
}

.trial-ended-icon-mini {
  font-size: 48px;
  margin-bottom: 16px;
}

/* ============================================
   FREE KULLANICI SONUÇ SAYFASI
   Psikolojik etkili tasarım
   ============================================ */

.free-results-container {
  padding: 20px 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* SKOR BÖLÜMÜ */
.free-score-section {
  text-align: center;
  padding: 32px 20px;
  background: linear-gradient(145deg, rgba(30, 30, 50, 0.9) 0%, rgba(20, 20, 35, 0.95) 100%);
  border-radius: 24px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.free-score-badge {
  display: inline-block;
  background: linear-gradient(135deg, #4cd964, #34c759);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.free-score-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.free-score-number {
  font-size: 72px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
}

.free-score-max {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

.free-score-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* PROGRESS BAR - Zeigarnik Effect */
.free-progress-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.free-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
}

.free-progress-header span:first-child {
  color: rgba(255, 255, 255, 0.7);
}

.free-progress-percent {
  color: #ffc837;
  font-weight: 700;
}

.free-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.free-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ffc837, #ff8008);
  border-radius: 10px;
  transition: width 1.5s ease-out;
}

.free-progress-text {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* TEASER KARTLARI */
.free-teaser-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
}

.free-teaser-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.free-teaser-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.free-teaser-lock {
  color: rgba(255, 200, 55, 0.7);
  font-size: 14px;
}

.free-photo-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.free-teaser-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 200, 55, 0.8);
  margin-top: 12px;
}

/* BLUR İÇERİK */
.blurred-content {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  position: relative;
}

.blurred-content::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,200,55,0.05), transparent);
  border-radius: 8px;
}

/* MATCH ORANI */
.free-teaser-content {
  text-align: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.free-match-rate {
  font-size: 48px;
  font-weight: 800;
  color: #ff4458;
}

.free-match-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

/* FOTOĞRAF GRID */
.free-photos-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  margin-bottom: 12px;
}

.free-photo-thumb {
  position: relative;
  width: 70px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.free-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.free-photo-thumb.blurred img {
  filter: blur(5px);
}

.free-photo-score {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.free-photo-score.hidden-score {
  background: rgba(255, 200, 55, 0.3);
  color: #ffc837;
}

.free-photo-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}

.free-best-photo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 200, 55, 0.1);
  border-radius: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.free-best-value {
  font-weight: 700;
  color: #ffc837;
}

/* ÖNERİLEN SIRALAMA */
.free-order-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.free-order-item {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
}

.free-order-arrow {
  color: rgba(255, 255, 255, 0.3);
}

/* INSIGHTS GRID */
.free-insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.free-insight-col {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 14px;
}

.free-insight-col.good {
  border-left: 3px solid #4cd964;
}

.free-insight-col.bad {
  border-left: 3px solid #ff4458;
}

.free-insight-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.free-insight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}

.free-insight-item.visible {
  color: rgba(255, 255, 255, 0.9);
}

.free-insight-col.good .free-insight-item i {
  color: #4cd964;
}

.free-insight-col.bad .free-insight-item i {
  color: #ff4458;
}

.free-insight-more {
  font-size: 11px;
  color: #ffc837;
  text-align: center;
  margin-top: 8px;
}

/* AKSİYON PLANI */
.free-action-preview {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.free-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.free-action-item:last-child {
  border-bottom: none;
}

.free-action-num {
  width: 24px;
  height: 24px;
  background: rgba(255, 200, 55, 0.2);
  color: #ffc837;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* 🔒 KAÇIRILANLAR - LOSS AVERSION */
.free-missing-section {
  background: linear-gradient(145deg, rgba(255, 68, 88, 0.08) 0%, rgba(255, 68, 88, 0.03) 100%);
  border: 1px solid rgba(255, 68, 88, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}

.free-missing-title {
  font-size: 16px;
  font-weight: 700;
  color: #ff6b7a;
  margin: 0 0 16px 0;
  text-align: center;
}

.free-missing-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.free-missing-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 68, 88, 0.1);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.free-missing-list li:last-child {
  border-bottom: none;
}

.free-missing-list li i {
  color: #ff4458;
  font-size: 14px;
}

/* 🎯 ANA CTA BÖLÜMÜ */
.free-cta-section {
  margin: 24px 0;
}

.free-cta-card {
  background: linear-gradient(145deg, rgba(255, 200, 55, 0.12) 0%, rgba(255, 128, 8, 0.08) 100%);
  border: 2px solid rgba(255, 200, 55, 0.3);
  border-radius: 24px;
  padding: 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.free-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffc837, #ff8008, transparent);
  animation: ctaShimmer 3s infinite linear;
}

@keyframes ctaShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.free-cta-header h3 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px 0;
}

.free-cta-header p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px 0;
}

.free-cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  color: #000;
  font-size: 18px;
  font-weight: 800;
  padding: 18px 28px;
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(255, 200, 55, 0.35);
}

.free-cta-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(255, 200, 55, 0.45);
}

.free-urgency {
  margin-top: 16px;
  padding: 10px 16px;
  background: rgba(255, 68, 88, 0.15);
  border: 1px solid rgba(255, 68, 88, 0.3);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #ff6b7a;
}

.free-social-proof {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* FOOTER */
.free-footer {
  text-align: center;
  padding: 20px;
}

.free-footer p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* MOBİL UYUM */
@media (max-width: 480px) {
  .free-results-container {
    padding: 16px 12px;
  }
  
  .free-score-number {
    font-size: 56px;
  }
  
  .free-insights-grid {
    grid-template-columns: 1fr;
  }
  
  .free-cta-header h3 {
    font-size: 20px;
  }
  
  .free-cta-button {
    font-size: 16px;
    padding: 16px 24px;
  }
}

/* ============================================
   GLOBAL Z-INDEX FIX - Tüm modaller en üstte
   ============================================ */

/* Toast / Notification yüksek z-index */
.toast-notification,
.alert-modal,
[class*="modal"],
[class*="overlay"] {
  z-index: 10001 !important;
}

/* Upsell ve Trial modalleri en üstte */
.upsell-modal-overlay,
.trial-ended-overlay {
  z-index: 10002 !important;
}

/* ============================================
   FREE KULLANICI SONUÇ SAYFASI - ETİK VERSİYON
   ============================================ */

/* Ücretsiz'de dahil olanlar */
.free-includes-section {
  background: rgba(76, 217, 100, 0.08);
  border: 1px solid rgba(76, 217, 100, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.free-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px 0;
}

.free-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.free-includes-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.free-includes-list li i {
  color: #4cd964;
}

/* İlk fotoğraf */
.free-first-photo {
  position: relative;
  width: 120px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto 12px;
}

.free-first-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.free-first-photo-score {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffc837, #ff8008);
  color: #000;
  font-size: 14px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 12px;
}

.free-first-photo-comment {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin: 0 0 16px 0;
  padding: 0 12px;
}

/* Diğer fotoğraflar (kilitli) */
.free-other-photos {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.free-other-photo {
  position: relative;
  width: 50px;
  height: 65px;
  border-radius: 8px;
  overflow: hidden;
}

.free-other-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px) brightness(0.6);
}

.free-photo-lock-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 200, 55, 0.8);
  font-size: 14px;
}

.free-other-photos-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 200, 55, 0.7);
  margin: 10px 0 0 0;
}

/* Güçlü/Zayıf tek satır */
.free-insight-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.free-insight-single {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 14px;
}

.free-insight-single.good {
  border-left: 3px solid #4cd964;
}

.free-insight-single.bad {
  border-left: 3px solid #ff4458;
}

.free-insight-header {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}

.free-insight-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.free-insight-single.good .free-insight-content i {
  color: #4cd964;
  margin-top: 2px;
}

.free-insight-single.bad .free-insight-content i {
  color: #ff4458;
  margin-top: 2px;
}

.free-insight-more {
  font-size: 11px;
  color: rgba(255, 200, 55, 0.7);
  margin-top: 10px;
  text-align: center;
}

/* Premium özellikleri listesi */
.free-premium-section {
  background: linear-gradient(145deg, rgba(255, 200, 55, 0.06) 0%, rgba(255, 128, 8, 0.03) 100%);
  border: 1px solid rgba(255, 200, 55, 0.15);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.free-premium-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.free-premium-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.free-premium-list li:last-child {
  border-bottom: none;
}

.free-premium-list li i {
  color: rgba(255, 200, 55, 0.6);
  font-size: 12px;
}

/* Mobil uyum ek */
@media (max-width: 480px) {
  .free-insight-row {
    grid-template-columns: 1fr;
  }
  
  .free-other-photo {
    width: 45px;
    height: 58px;
  }
}

/* ============================================
   PREMIUM UNLOCK BOX - Kilitli Bölümler İçin
   ============================================ */

.premium-unlock-box {
  background: linear-gradient(135deg, rgba(255, 200, 55, 0.08) 0%, rgba(255, 128, 8, 0.04) 100%);
  border: 1px solid rgba(255, 200, 55, 0.2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.premium-unlock-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.premium-unlock-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 200, 55, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffc837;
  font-size: 16px;
  flex-shrink: 0;
}

.premium-unlock-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.premium-unlock-hint {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.premium-unlock-subhint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.premium-unlock-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.premium-unlock-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 15px rgba(255, 200, 55, 0.3);
}

/* ============================================
   PREMIUM CTA SECTION - Sayfa Sonu
   ============================================ */

.premium-cta-section {
  margin-top: 28px;
  padding: 0 4px;
}

.premium-cta-card {
  background: linear-gradient(145deg, rgba(255, 200, 55, 0.1) 0%, rgba(255, 128, 8, 0.05) 100%);
  border: 2px solid rgba(255, 200, 55, 0.25);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.premium-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffc837, #ff8008);
}

.premium-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffc837, #ff8008);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.premium-cta-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px 0;
}

.premium-cta-subtitle {
  font-size: 14px;
  color: rgba(255, 200, 55, 0.9);
  margin: 0 0 20px 0;
  font-weight: 500;
}

.premium-cta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  text-align: left;
}

.premium-cta-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.premium-cta-list li:last-child {
  border-bottom: none;
}

.premium-cta-list li i {
  color: #4cd964;
  font-size: 14px;
  flex-shrink: 0;
}

.premium-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  color: #000;
  font-size: 17px;
  font-weight: 800;
  padding: 16px 28px;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(255, 200, 55, 0.3);
}

.premium-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(255, 200, 55, 0.4);
}

.premium-cta-btn i {
  transition: transform 0.2s ease;
}

.premium-cta-btn:hover i {
  transform: translateX(4px);
}

.premium-cta-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin: 14px 0 0 0;
}

/* Zeigarnik Blur Stilleri */
.zeigarnik-blur-section {
  position: relative;
}

.zeigarnik-blur {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

/* Mobil Uyum */
@media (max-width: 480px) {
  .premium-unlock-box {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  
  .premium-unlock-content {
    flex-direction: column;
  }
  
  .premium-unlock-btn {
    width: 100%;
    justify-content: center;
  }
  
  .premium-cta-card {
    padding: 24px 18px;
  }
  
  .premium-cta-title {
    font-size: 20px;
  }
  
  .premium-cta-btn {
    font-size: 15px;
    padding: 14px 24px;
  }
}

/* ============================================
   FREE KULLANICI - Kısıtlı Görünüm Stilleri
   ============================================ */

/* Fotoğraf altı hint */
.free-photo-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(255, 200, 55, 0.08);
  border: 1px solid rgba(255, 200, 55, 0.15);
  border-radius: 10px;
  font-size: 13px;
  color: rgba(255, 200, 55, 0.9);
}

.free-photo-hint i {
  font-size: 12px;
}

/* Insight count badge */
.insight-count {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 6px;
}

/* Kilitli madde hint'i */
.locked-items-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-top: 8px;
  background: rgba(255, 200, 55, 0.08);
  border: 1px dashed rgba(255, 200, 55, 0.25);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 200, 55, 0.8);
}

.locked-items-hint i {
  font-size: 11px;
}

/* Visible item vurgusu */
.visible-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 8px 10px !important;
}

/* Section badge */
.section-badge {
  background: rgba(255, 200, 55, 0.15);
  color: #ffc837;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  margin-left: auto;
}

/* Blurred actions container */
.blurred-actions {
  position: relative;
}

/* Actions preview */
.actions-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-preview-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.action-preview-item.blurred {
  filter: blur(4px);
  opacity: 0.6;
  user-select: none;
}

.action-priority {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(255, 200, 55, 0.2), rgba(255, 128, 8, 0.1));
  border: 1px solid rgba(255, 200, 55, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffc837;
  flex-shrink: 0;
}

.action-text {
  flex: 1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

/* Partial blur for insights */
.partial-blur .insight-items {
  position: relative;
}

/* Section head flex */
.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.section-head .section-title {
  margin: 0;
  flex: 1;
}

/* ============================================
   BLUR İTEM STİLLERİ - Tüm içerik görünür ama blur
   ============================================ */

/* Blur'lu madde */
.blurred-item {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  opacity: 0.85;
}

/* Actions list */
.actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.action-item .action-priority {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, rgba(255, 200, 55, 0.2), rgba(255, 128, 8, 0.1));
  border: 1px solid rgba(255, 200, 55, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffc837;
  flex-shrink: 0;
}

.action-content {
  flex: 1;
}

.action-task {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

/* Tek satır unlock butonu */
.unlock-full-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  color: #000;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(255, 200, 55, 0.25);
}

.unlock-full-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 200, 55, 0.35);
}

.unlock-full-btn i {
  font-size: 14px;
}

/* ============================================
   ANALİZ RAPORU PROGRESS CARD
   ============================================ */

.analysis-progress-card {
  background: linear-gradient(145deg, rgba(255, 200, 55, 0.08) 0%, rgba(20, 20, 35, 0.95) 100%);
  border: 2px solid rgba(255, 200, 55, 0.2);
  border-radius: 20px;
  padding: 24px 20px;
  margin-bottom: 20px;
}

.progress-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.progress-icon {
  font-size: 22px;
}

.progress-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

/* Progress Bar */
.progress-bar-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.progress-bar-bg {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffc837, #ff8008);
  border-radius: 10px;
  transition: width 1s ease-out;
}

.progress-percent {
  font-size: 16px;
  font-weight: 700;
  color: #ffc837;
  min-width: 45px;
}

/* Progress Lists */
.progress-lists {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.progress-list {
  padding: 14px 16px;
  border-radius: 12px;
}

.progress-list.seen {
  background: rgba(76, 217, 100, 0.08);
  border: 1px solid rgba(76, 217, 100, 0.15);
}

.progress-list.locked {
  background: rgba(255, 68, 88, 0.06);
  border: 1px solid rgba(255, 68, 88, 0.12);
}

.list-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  opacity: 0.7;
}

.progress-list.seen .list-header {
  color: #4cd964;
}

.progress-list.locked .list-header {
  color: #ff6b7a;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.list-item i {
  font-size: 11px;
  width: 16px;
  text-align: center;
}

.progress-list.seen .list-item i {
  color: #4cd964;
}

.progress-list.locked .list-item i {
  color: rgba(255, 200, 55, 0.7);
}

/* Complete Report Button */
.complete-report-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  color: #000;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(255, 200, 55, 0.3);
}

.complete-report-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 200, 55, 0.4);
}

.complete-report-btn i {
  font-size: 15px;
}

.progress-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 12px;
}

/* Bottom Reminder */
.bottom-reminder {
  padding: 16px 0;
}

/* Animation delay for progress card */
.anim.a2-5 {
  animation-delay: 0.35s;
}

/* Mobile */
@media (max-width: 480px) {
  .analysis-progress-card {
    padding: 20px 16px;
  }
  
  .progress-title {
    font-size: 16px;
  }
  
  .list-item {
    font-size: 12px;
  }
  
  .complete-report-btn {
    font-size: 15px;
    padding: 14px 20px;
  }
}

/* ============================================
   TINDER RESULTS V2 - Eklendi 2026-01-07
   ============================================ */
/**
 * ============================================
 * RATESELF - TINDER RESULTS v2.0
 * ============================================
 * Futuristic Cyberpunk Design
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
.tinder-results-v2 {
    --neon-pink: #ff2d95;
    --neon-cyan: #00f0ff;
    --neon-green: #39ff14;
    --dark-bg: #0a0a0f;
    --card-bg: #12121a;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
}

/* ============================================
   CONTAINER
   ============================================ */
.tinder-results-v2 {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 16px 60px;
    position: relative;
    background: var(--dark-bg);
    color: #fff;
}

/* Grid Background */
.tinder-results-v2 .grid-bg {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   HEADER
   ============================================ */
.tinder-results-v2 .tr-header {
    text-align: center;
    padding: 24px 0 32px;
    position: relative;
    z-index: 1;
}

.tinder-results-v2 .tr-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-pink), transparent);
}

.tinder-results-v2 .tr-header-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    position: relative;
}

.tinder-results-v2 .tr-header-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid var(--neon-pink);
    border-radius: 16px;
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.tinder-results-v2 .tr-header-icon-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--neon-pink), #ff6b6b);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 0 30px rgba(255,45,149,0.5);
}

.tinder-results-v2 .tr-header h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
}

.tinder-results-v2 .tr-header h1 span {
    color: var(--neon-pink);
    text-shadow: 0 0 20px rgba(255,45,149,0.5);
}

.tinder-results-v2 .tr-header-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    margin-top: 6px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 🎉 Vitrin Modu banner (sadece tam erişim hesabında görünür) */
.tinder-results-v2 .demo-mode-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(255,215,106,0.14), rgba(255,169,59,0.06));
    border: 1px solid rgba(255,196,75,0.4);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.tinder-results-v2 .demo-mode-banner i {
    font-size: 22px;
    color: #ffc44b;
    flex-shrink: 0;
}

.tinder-results-v2 .demo-mode-title {
    font-weight: 800;
    font-size: 15px;
    color: #ffd76a;
    margin-bottom: 3px;
}

.tinder-results-v2 .demo-mode-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
}

/* ============================================
   SCORE PANEL
   ============================================ */
.tinder-results-v2 .score-panel {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 32px 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tinder-results-v2 .score-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
}

/* Corner Decorations */
.tinder-results-v2 .corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--neon-cyan);
    opacity: 0.3;
}

.tinder-results-v2 .corner-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.tinder-results-v2 .corner-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.tinder-results-v2 .corner-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.tinder-results-v2 .corner-br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.tinder-results-v2 .score-main {
    text-align: center;
    margin-bottom: 28px;
}

.tinder-results-v2 .score-display {
    position: relative;
    display: inline-block;
}

.tinder-results-v2 .score-num {
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.tinder-results-v2 .score-num::after {
    content: attr(data-score);
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--neon-green), #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: blur(20px);
    opacity: 0.5;
}

.tinder-results-v2 .score-max {
    font-size: 18px;
    color: rgba(255,255,255,0.3);
    margin-top: 4px;
    letter-spacing: 2px;
}

.tinder-results-v2 .score-bar-container {
    margin: 24px 0;
    padding: 0 20px;
}

.tinder-results-v2 .score-bar {
    height: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.tinder-results-v2 .score-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
}

.tinder-results-v2 .score-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-green));
    border-radius: 4px;
    position: relative;
    width: 0%;
    transition: width 1.5s ease-out;
}

.tinder-results-v2 .score-bar-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 20px var(--neon-green);
}

.tinder-results-v2 .score-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.3);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--neon-green);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tinder-results-v2 .score-status.below {
    background: rgba(255, 45, 149, 0.1);
    border-color: rgba(255, 45, 149, 0.3);
    color: var(--neon-pink);
}

/* First Impression */
.tinder-results-v2 .first-imp {
    background: rgba(255,204,0,0.05);
    border: 1px solid rgba(255,204,0,0.2);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 14px;
}

.tinder-results-v2 .fi-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,204,0,0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.tinder-results-v2 .fi-text {
    flex: 1;
}

.tinder-results-v2 .fi-text h4 {
    font-size: 11px;
    color: rgba(255,204,0,0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    margin-top: 0;
}

.tinder-results-v2 .fi-text p {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   SECTION
   ============================================ */
.tinder-results-v2 .tr-section {
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.tinder-results-v2 .section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tinder-results-v2 .section-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--neon-cyan);
}

.tinder-results-v2 .section-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* ============================================
   PHOTOS GRID
   ============================================ */
.tinder-results-v2 .photos-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
}

.tinder-results-v2 .photos-row::-webkit-scrollbar {
    display: none;
}

.tinder-results-v2 .photo-hex {
    flex: 0 0 130px;
    height: 180px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.tinder-results-v2 .photo-hex:hover {
    transform: translateY(-8px);
}

.tinder-results-v2 .photo-hex-inner {
    width: 100%;
    height: 100%;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255,255,255,0.05);
}

.tinder-results-v2 .photo-hex:hover .photo-hex-inner {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 30px rgba(0,240,255,0.2);
}

.tinder-results-v2 .photo-hex img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tinder-results-v2 .photo-hex-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.9) 100%);
}

.tinder-results-v2 .photo-hex-content {
    position: absolute;
    inset: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tinder-results-v2 .photo-hex-num {
    width: 26px;
    height: 26px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.tinder-results-v2 .photo-hex-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.tinder-results-v2 .photo-hex-score {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
}

.tinder-results-v2 .photo-hex-score.high {
    background: var(--neon-green);
    color: #000;
    box-shadow: 0 0 15px rgba(57,255,20,0.5);
}

.tinder-results-v2 .photo-hex-score.mid {
    background: #ffcc00;
    color: #000;
}

.tinder-results-v2 .photo-hex-score.low {
    background: var(--neon-pink);
    color: #fff;
    box-shadow: 0 0 15px rgba(255,45,149,0.5);
}

.tinder-results-v2 .photo-hex-decision {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.tinder-results-v2 .photo-hex-decision.keep {
    background: rgba(57,255,20,0.2);
    color: var(--neon-green);
}

.tinder-results-v2 .photo-hex-decision.replace {
    background: rgba(255,204,0,0.2);
    color: #ffcc00;
}

.tinder-results-v2 .photo-hex-decision.retake {
    background: rgba(255,45,149,0.2);
    color: var(--neon-pink);
}

/* ============================================
   ORDER BOX
   ============================================ */
.tinder-results-v2 .order-box {
    background: var(--card-bg);
    border: 1px solid rgba(0,240,255,0.15);
    border-radius: 16px;
    padding: 20px;
    position: relative;
}

.tinder-results-v2 .order-box::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
}

.tinder-results-v2 .order-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tinder-results-v2 .order-item {
    width: 54px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255,255,255,0.1);
}

.tinder-results-v2 .order-item.first {
    border-color: var(--neon-green);
    box-shadow: 0 0 20px rgba(57,255,20,0.3);
}

.tinder-results-v2 .order-item.remove {
    border-color: var(--neon-pink);
    opacity: 0.5;
}

.tinder-results-v2 .order-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tinder-results-v2 .order-item-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: rgba(0,0,0,0.7);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tinder-results-v2 .order-item.first .order-item-badge {
    background: var(--neon-green);
    color: #000;
}

.tinder-results-v2 .order-item.remove::after {
    content: '✕';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--neon-pink);
}

.tinder-results-v2 .order-arrow {
    color: rgba(255,255,255,0.15);
    font-size: 12px;
}

.tinder-results-v2 .order-desc {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   INSIGHTS
   ============================================ */
.tinder-results-v2 .insights-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tinder-results-v2 .insight-panel {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 16px;
}

.tinder-results-v2 .insight-panel.good {
    border-color: rgba(57,255,20,0.2);
    background: linear-gradient(180deg, rgba(57,255,20,0.05), transparent);
}

.tinder-results-v2 .insight-panel.bad {
    border-color: rgba(255,45,149,0.2);
    background: linear-gradient(180deg, rgba(255,45,149,0.05), transparent);
}

.tinder-results-v2 .insight-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.tinder-results-v2 .insight-panel.good .insight-head { color: var(--neon-green); }
.tinder-results-v2 .insight-panel.bad .insight-head { color: var(--neon-pink); }

.tinder-results-v2 .insight-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tinder-results-v2 .insight-item {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    position: relative;
}

/* Madde işareti metnin YANINDA dursun (üstünde değil): ikon küçük nokta, satır içi */
.tinder-results-v2 .insight-item::before { content: none; }
.tinder-results-v2 .insight-item i {
    font-size: 5px;
    margin-top: 6px;
    flex-shrink: 0;
}
.tinder-results-v2 .insight-panel.good .insight-item i { color: var(--neon-green); }
.tinder-results-v2 .insight-panel.bad .insight-item i { color: var(--neon-pink); }

/* ============================================
   ACTIONS
   ============================================ */
.tinder-results-v2 .action-row {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    gap: 14px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.tinder-results-v2 .action-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.tinder-results-v2 .action-row.critical::before { background: var(--neon-pink); }
.tinder-results-v2 .action-row.important::before { background: #ffcc00; }
.tinder-results-v2 .action-row.nice::before { background: var(--neon-green); }

.tinder-results-v2 .action-row:hover {
    border-color: rgba(255,255,255,0.1);
    transform: translateX(4px);
}

.tinder-results-v2 .action-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}

.tinder-results-v2 .action-row.critical .action-badge {
    background: rgba(255,45,149,0.15);
    color: var(--neon-pink);
}

.tinder-results-v2 .action-row.important .action-badge {
    background: rgba(255,204,0,0.15);
    color: #ffcc00;
}

.tinder-results-v2 .action-row.nice .action-badge {
    background: rgba(57,255,20,0.15);
    color: var(--neon-green);
}

.tinder-results-v2 .action-body {
    flex: 1;
}

.tinder-results-v2 .action-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.tinder-results-v2 .action-row.critical .action-type { color: var(--neon-pink); }
.tinder-results-v2 .action-row.important .action-type { color: #ffcc00; }
.tinder-results-v2 .action-row.nice .action-type { color: var(--neon-green); }

.tinder-results-v2 .action-text {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
}

.tinder-results-v2 .action-result {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.tinder-results-v2 .anim {
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
}

.tinder-results-v2 .a1 { animation-delay: 0.1s; }
.tinder-results-v2 .a2 { animation-delay: 0.25s; }
.tinder-results-v2 .a3 { animation-delay: 0.4s; }
.tinder-results-v2 .a4 { animation-delay: 0.55s; }
.tinder-results-v2 .a5 { animation-delay: 0.7s; }
.tinder-results-v2 .a6 { animation-delay: 0.85s; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 380px) {
    .tinder-results-v2 .insights-cols { grid-template-columns: 1fr; }
    .tinder-results-v2 .score-num { font-size: 72px; }
}

/* ============================================
   CLOSE BUTTON OVERRIDE
   ============================================ */
.result-modal .close-result-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 100;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.result-modal .close-result-btn:hover {
    background: var(--neon-pink);
    border-color: var(--neon-pink);
}
/* ============================================
   KATMAN 1: 3 SANİYE TESTİ - CSS
   RateSelf Tinder Analiz Sonuç Ekranı
   ============================================ */

/* ==========================================
   ANA KONTEYNER
   ========================================== */
.uc-saniye-testi {
  background: linear-gradient(135deg, rgba(255,68,88,0.08) 0%, rgba(255,68,88,0.02) 100%);
  border: 1px solid rgba(255,68,88,0.2);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.uc-saniye-testi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff4458, #ff6b7a, #ff4458);
  background-size: 200% 100%;
  animation: gradientMove 3s ease infinite;
}

@keyframes gradientMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ==========================================
   BAŞLIK
   ========================================== */
.ust-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.ust-header-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ff4458 0%, #ff6b7a 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(255,68,88,0.3);
}

.ust-header-text h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
}

.ust-header-text p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.ust-lokasyon-badge {
  margin-left: auto;
  background: rgba(255,255,255,0.1);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ust-lokasyon-badge.tr { border: 1px solid rgba(255,0,0,0.3); }
.ust-lokasyon-badge.global { border: 1px solid rgba(0,150,255,0.3); }

/* ==========================================
   İLK İZLENİM KUTUSU
   ========================================== */
.ilk-izlenim-box {
  background: rgba(0,0,0,0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}

.ilk-izlenim-quote {
  font-size: 20px;
  font-style: italic;
  color: #fff;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
}

.ilk-izlenim-quote::before,
.ilk-izlenim-quote::after {
  content: '"';
  font-size: 32px;
  color: rgba(255,68,88,0.5);
  font-style: normal;
}

.ilk-izlenim-label {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ilk-izlenim-duygu {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.duygu-badge {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.duygu-badge.cok_pozitif { background: rgba(76,217,100,0.2); color: #4cd964; border: 1px solid rgba(76,217,100,0.3); }
.duygu-badge.pozitif { background: rgba(76,217,100,0.15); color: #7ce08a; border: 1px solid rgba(76,217,100,0.2); }
.duygu-badge.notr_pozitif { background: rgba(255,204,0,0.15); color: #ffd633; border: 1px solid rgba(255,204,0,0.2); }
.duygu-badge.notr { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.2); }
.duygu-badge.notr_negatif { background: rgba(255,149,0,0.15); color: #ff9500; border: 1px solid rgba(255,149,0,0.2); }
.duygu-badge.negatif { background: rgba(255,68,88,0.15); color: #ff6b7a; border: 1px solid rgba(255,68,88,0.2); }
.duygu-badge.cok_negatif { background: rgba(255,68,88,0.25); color: #ff4458; border: 1px solid rgba(255,68,88,0.4); }

/* ==========================================
   BİLİŞSEL YÜK ANALİZİ
   ========================================== */
.bilissel-yuk-section {
  background: rgba(147,112,219,0.08);
  border: 1px solid rgba(147,112,219,0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.bilissel-yuk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.bilissel-yuk-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bilissel-yuk-title i {
  font-size: 18px;
  color: #9370db;
}

.bilissel-yuk-title span {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.bilissel-yuk-info {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  cursor: help;
  padding: 4px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
}

.bilissel-toplam-skor {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(0,0,0,0.2);
  border-radius: 12px;
  margin-bottom: 16px;
}

.bilissel-skor-daire {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  position: relative;
}

.bilissel-skor-daire::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  z-index: -1;
}

.bilissel-skor-daire.yuksek { background: conic-gradient(#4cd964 var(--pct), rgba(255,255,255,0.1) 0); }
.bilissel-skor-daire.orta { background: conic-gradient(#ffcc00 var(--pct), rgba(255,255,255,0.1) 0); }
.bilissel-skor-daire.dusuk { background: conic-gradient(#ff4458 var(--pct), rgba(255,255,255,0.1) 0); }

.bilissel-skor-text {
  flex: 1;
}

.bilissel-skor-text h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px 0;
}

.bilissel-skor-text p {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* Alt Metrikler */
.bilissel-metrikler {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bilissel-metrik-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
}

.metrik-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(255,255,255,0.1);
}

.metrik-content {
  flex: 1;
}

.metrik-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}

.metrik-bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.metrik-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s ease;
}

.metrik-bar-fill.yuksek { background: linear-gradient(90deg, #4cd964, #5ee077); }
.metrik-bar-fill.orta { background: linear-gradient(90deg, #ffcc00, #ffd633); }
.metrik-bar-fill.dusuk { background: linear-gradient(90deg, #ff4458, #ff6b7a); }

.metrik-skor {
  font-size: 14px;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

.metrik-skor.yuksek { color: #4cd964; }
.metrik-skor.orta { color: #ffcc00; }
.metrik-skor.dusuk { color: #ff4458; }

/* ==========================================
   SWIPE KARARI
   ========================================== */
.swipe-karar-section {
  background: rgba(0,0,0,0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.swipe-karar-header {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.swipe-karar-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.swipe-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.swipe-icon.saga { 
  background: linear-gradient(135deg, rgba(76,217,100,0.2) 0%, rgba(76,217,100,0.1) 100%);
  border: 2px solid rgba(76,217,100,0.4);
  color: #4cd964;
}

.swipe-icon.sola { 
  background: linear-gradient(135deg, rgba(255,68,88,0.2) 0%, rgba(255,68,88,0.1) 100%);
  border: 2px solid rgba(255,68,88,0.4);
  color: #ff4458;
}

.swipe-icon.kararsiz { 
  background: linear-gradient(135deg, rgba(255,204,0,0.2) 0%, rgba(255,204,0,0.1) 100%);
  border: 2px solid rgba(255,204,0,0.4);
  color: #ffcc00;
}

.swipe-karar-text {
  text-align: left;
}

.swipe-karar-text h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.swipe-karar-text h4.saga { color: #4cd964; }
.swipe-karar-text h4.sola { color: #ff4458; }
.swipe-karar-text h4.kararsiz { color: #ffcc00; }

.swipe-karar-text p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.swipe-ic-ses {
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  padding: 12px 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  border-left: 3px solid rgba(255,68,88,0.5);
}

.swipe-ic-ses::before {
  content: '💭 ';
}

/* Güven Barı */
.swipe-guven-bar {
  margin-top: 16px;
}

.swipe-guven-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}

.swipe-guven-track {
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.swipe-guven-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff4458, #4cd964);
  transition: width 1s ease;
}

/* ==========================================
   DUYGU PALETİ
   ========================================== */
.duygu-paleti-section {
  background: rgba(0,0,0,0.15);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.duygu-paleti-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.duygu-paleti-header i {
  font-size: 18px;
  color: #ff6b7a;
}

.duygu-paleti-header span {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.duygu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.duygu-item {
  text-align: center;
  padding: 12px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
}

.duygu-item-emoji {
  font-size: 20px;
  margin-bottom: 6px;
}

.duygu-item-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.duygu-item-skor {
  font-size: 16px;
  font-weight: 700;
}

.duygu-item-skor.yuksek { color: #4cd964; }
.duygu-item-skor.orta { color: #ffcc00; }
.duygu-item-skor.dusuk { color: #ff6b7a; }

/* Eksik Duygular */
.eksik-duygular {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.eksik-duygular-title {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}

.eksik-duygu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,68,88,0.08);
  border: 1px solid rgba(255,68,88,0.15);
  border-radius: 10px;
  margin-bottom: 8px;
}

.eksik-duygu-item i {
  color: #ff4458;
  margin-top: 2px;
}

.eksik-duygu-content {
  flex: 1;
}

.eksik-duygu-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}

.eksik-duygu-neden {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* ==========================================
   TÜRKİYE ÖZEL FAKTÖRLERİ
   ========================================== */
.turkiye-faktorler-section {
  background: linear-gradient(135deg, rgba(229,9,20,0.1) 0%, rgba(229,9,20,0.03) 100%);
  border: 1px solid rgba(229,9,20,0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.turkiye-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.turkiye-header-flag {
  font-size: 24px;
}

.turkiye-header-text h4 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px 0;
}

.turkiye-header-text p {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

.turkiye-faktorler-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.turkiye-faktor-item {
  padding: 14px;
  background: rgba(0,0,0,0.2);
  border-radius: 12px;
}

.turkiye-faktor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.turkiye-faktor-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.turkiye-faktor-skor {
  font-size: 16px;
  font-weight: 700;
}

.turkiye-faktor-skor.yuksek { color: #4cd964; }
.turkiye-faktor-skor.orta { color: #ffcc00; }
.turkiye-faktor-skor.dusuk { color: #ff4458; }

.turkiye-faktor-aciklama {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

/* ==========================================
   KAÇIRILAN FIRSAT
   ========================================== */
.kacirilan-firsat-section {
  background: linear-gradient(135deg, rgba(255,149,0,0.1) 0%, rgba(255,149,0,0.03) 100%);
  border: 1px solid rgba(255,149,0,0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.kacirilan-firsat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.kacirilan-firsat-header i {
  font-size: 20px;
  color: #ff9500;
}

.kacirilan-firsat-header span {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.kacirilan-ana-sorun {
  font-size: 16px;
  font-weight: 600;
  color: #ff9500;
  margin-bottom: 8px;
}

.kacirilan-detay {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Etki Tahmini */
.etki-tahmini {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(0,0,0,0.2);
  border-radius: 12px;
  margin-bottom: 16px;
}

.etki-mevcut, .etki-potansiyel {
  text-align: center;
  flex: 1;
}

.etki-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}

.etki-deger {
  font-size: 28px;
  font-weight: 700;
}

.etki-mevcut .etki-deger { color: #ff6b7a; }
.etki-potansiyel .etki-deger { color: #4cd964; }

.etki-ok {
  font-size: 24px;
  color: rgba(255,255,255,0.3);
}

.etki-kayip {
  text-align: center;
  flex: 1;
  padding: 10px;
  background: rgba(255,68,88,0.1);
  border-radius: 8px;
}

.etki-kayip-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 2px;
}

.etki-kayip-deger {
  font-size: 18px;
  font-weight: 700;
  color: #ff4458;
}

/* Çözüm Önerileri */
.cozum-onerileri {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cozum-oneri-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(76,217,100,0.08);
  border: 1px solid rgba(76,217,100,0.15);
  border-radius: 12px;
}

.cozum-oneri-item i {
  color: #4cd964;
  margin-top: 2px;
}

.cozum-oneri-content {
  flex: 1;
}

.cozum-oneri-text {
  font-size: 13px;
  color: #fff;
  margin-bottom: 6px;
}

.cozum-oneri-meta {
  display: flex;
  gap: 12px;
}

.cozum-etki {
  font-size: 11px;
  color: #4cd964;
  font-weight: 600;
}

.cozum-zorluk {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
}

/* ==========================================
   ÖZET VERDİCT
   ========================================== */
.ozet-verdict-section {
  background: linear-gradient(135deg, rgba(255,68,88,0.15) 0%, rgba(255,68,88,0.05) 100%);
  border: 2px solid rgba(255,68,88,0.3);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
}

.ozet-emoji {
  font-size: 48px;
  margin-bottom: 12px;
}

.ozet-baslik {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.ozet-cumle {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
  line-height: 1.5;
}

.ozet-puan-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.ozet-puan {
  font-size: 48px;
  font-weight: 700;
}

.ozet-puan.mukemmel, .ozet-puan.cok_iyi { color: #4cd964; }
.ozet-puan.iyi, .ozet-puan.ortalama_ustu { color: #7ce08a; }
.ozet-puan.ortalama { color: #ffcc00; }
.ozet-puan.ortalama_alti { color: #ff9500; }
.ozet-puan.kotu, .ozet-puan.cok_kotu { color: #ff4458; }

.ozet-puan-max {
  font-size: 18px;
  color: rgba(255,255,255,0.4);
}

.ozet-kategori {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.ozet-kategori.mukemmel { background: rgba(76,217,100,0.2); color: #4cd964; }
.ozet-kategori.cok_iyi { background: rgba(76,217,100,0.15); color: #5ee077; }
.ozet-kategori.iyi { background: rgba(124,224,138,0.15); color: #7ce08a; }
.ozet-kategori.ortalama_ustu { background: rgba(255,204,0,0.15); color: #ffd633; }
.ozet-kategori.ortalama { background: rgba(255,204,0,0.1); color: #ffcc00; }
.ozet-kategori.ortalama_alti { background: rgba(255,149,0,0.15); color: #ff9500; }
.ozet-kategori.kotu { background: rgba(255,68,88,0.15); color: #ff6b7a; }
.ozet-kategori.cok_kotu { background: rgba(255,68,88,0.2); color: #ff4458; }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 480px) {
  .uc-saniye-testi {
    padding: 16px;
  }
  
  .ust-header {
    flex-wrap: wrap;
  }
  
  .ust-lokasyon-badge {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }
  
  .ilk-izlenim-quote {
    font-size: 16px;
  }
  
  .duygu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .turkiye-faktorler-grid {
    grid-template-columns: 1fr;
  }
  
  .etki-tahmini {
    flex-wrap: wrap;
  }
  
  .etki-ok {
    display: none;
  }
  
  .ozet-puan {
    font-size: 36px;
  }
}

/* ==========================================
   PREMIUM UPGRADE CTA (Ücretsiz Kullanıcılar İçin)
   ========================================== */
.premium-upgrade-cta {
  background: linear-gradient(135deg, rgba(255,200,55,0.08) 0%, rgba(255,128,8,0.05) 100%);
  border: 2px solid rgba(255,200,55,0.25);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.premium-upgrade-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffc837, #ff8008);
}

.premium-cta-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.premium-cta-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px 0;
}

.premium-cta-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0 0 24px 0;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.premium-cta-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  text-align: left;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.premium-cta-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.premium-cta-features li:last-child {
  border-bottom: none;
}

.premium-cta-features li i {
  color: #ffc837;
  font-size: 12px;
  width: 20px;
  text-align: center;
}

.premium-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #ffc837 0%, #ff8008 100%);
  color: #000;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(255,200,55,0.35);
}

.premium-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255,200,55,0.45);
}

.premium-cta-btn i {
  font-size: 15px;
}

/* Free Photo Hint (Fotoğraf analizlerinin altında) */
.free-photo-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  margin-top: 16px;
  background: rgba(255,200,55,0.08);
  border: 1px dashed rgba(255,200,55,0.3);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(255,200,55,0.9);
}

.free-photo-hint i {
  font-size: 14px;
  color: #ffc837;
}

/* Blurred Item Stili - Ücretsiz Kullanıcılar İçin */
.blurred-item {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}

/* Animation delay for premium CTA */
.anim.a7 {
  animation-delay: 0.9s;
}

/* Responsive */
@media (max-width: 480px) {
  .premium-upgrade-cta {
    padding: 24px 16px;
  }
  
  .premium-cta-title {
    font-size: 18px;
  }
  
  .premium-cta-desc {
    font-size: 13px;
  }
  
  .premium-cta-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* ============================================================

/* ============================================================
   🐝 BUMBLE RESULTS v4 - Değer Odaklı, Veri Destekli
   ============================================================ */

.bumble-results-v4 {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
}

/* ========== HERO ========== */
.br-hero {
  text-align: center;
  padding: 28px 20px;
  margin-bottom: 16px;
}

.br-score-ring {
  width: 130px;
  height: 130px;
  margin: 0 auto 16px;
  position: relative;
}

.br-score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.br-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 8;
}

.br-ring-fill {
  fill: none;
  stroke: var(--color, #FFC629);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: calc(283 - (283 * var(--percent, 0) / 100));
  transition: stroke-dashoffset 1s ease;
}

.br-score-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.br-score-num {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
}

.br-score-comparison {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

.br-summary {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin: 0 0 20px;
}

/* Match Box */
.br-match-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.25);
  padding: 14px 18px;
  border-radius: 12px;
}

.br-match-item {
  text-align: center;
}

.br-match-label {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.br-match-val {
  font-size: 18px;
  font-weight: 700;
}

.br-match-item.current .br-match-val {
  color: rgba(255,255,255,0.5);
}

.br-match-item.potential .br-match-val {
  color: #22c55e;
}

.br-match-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255,255,255,0.3);
}

.br-match-increase {
  font-size: 10px;
  color: #22c55e;
  font-weight: 600;
}

/* ========== FIRST ACTION ========== */
.br-first-action {
  background: linear-gradient(135deg, rgba(255,198,41,0.15), rgba(255,198,41,0.05));
  border: 1px solid rgba(255,198,41,0.3);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.br-first-action-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #FFC629;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.br-first-action-text {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  line-height: 1.4;
}

/* ========== SECTIONS ========== */
.br-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}

.br-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.br-section-head i {
  color: #FFC629;
}

.br-section-head small {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-weight: 400;
  margin-left: auto;
}

/* Best Photo Tip */
.br-best-photo-tip {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.br-best-star {
  font-size: 16px;
}

.br-best-why {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
}

/* ========== PHOTO GRID ========== */
.br-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.br-photo-slot {
  aspect-ratio: 1;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.br-photo-slot:hover {
  transform: scale(1.02);
}

.br-photo-slot.filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.br-photo-slot.filled.ok {
  border: 2px solid rgba(34,197,94,0.4);
}

.br-photo-slot.filled.warning {
  border: 2px solid rgba(249,115,22,0.5);
}

.br-photo-slot.filled.bad {
  border: 2px solid rgba(239,68,68,0.5);
}

.br-photo-slot.filled.best {
  border: 2px solid #22c55e;
  box-shadow: 0 0 12px rgba(34,197,94,0.3);
}

.br-photo-slot.empty {
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.25);
  cursor: default;
}

.br-photo-slot.empty:hover {
  transform: none;
}

.br-photo-slot.empty i {
  font-size: 18px;
}

.br-photo-slot.empty span {
  font-size: 11px;
  margin-top: 4px;
}

.br-photo-score {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0,0,0,0.75);
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.br-photo-best {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #22c55e;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}

.br-photo-alert {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ef4444;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.br-photo-num {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.5);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
}

/* ========== ACTIONS ========== */
.br-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.br-action-card {
  display: flex;
  gap: 12px;
  background: rgba(255,198,41,0.05);
  border: 1px solid rgba(255,198,41,0.1);
  border-radius: 10px;
  padding: 12px 14px;
}

.br-action-num {
  width: 26px;
  height: 26px;
  background: #FFC629;
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.br-action-body {
  flex: 1;
}

.br-action-do {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.4;
}

.br-action-reason {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
  margin-bottom: 6px;
}

.br-action-result {
  font-size: 12px;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ========== MISSING PHOTOS ========== */
.br-missing-section {
  background: rgba(249,115,22,0.05);
  border-color: rgba(249,115,22,0.15);
}

.br-missing-section .br-section-head i {
  color: #f97316;
}

.br-missing-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.br-missing-item {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 12px;
}

.br-missing-type {
  font-size: 13px;
  font-weight: 600;
  color: #f97316;
  margin-bottom: 4px;
}

.br-missing-why {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
  line-height: 1.4;
}

.br-missing-suggestion {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.br-missing-suggestion i {
  color: #FFC629;
  margin-top: 2px;
}

/* ========== MODAL ========== */
.br-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.br-modal.hidden {
  display: none;
}

.br-modal-box {
  background: #1a1a2e;
  border-radius: 16px;
  max-width: 380px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.br-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 10;
}

.br-modal-photo {
  width: 100%;
  aspect-ratio: 1;
  background: #000;
}

.br-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.br-modal-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.br-modal-score {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
}

.br-modal-score span {
  font-size: 16px;
  color: rgba(255,255,255,0.4);
}

.br-modal-verdict {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.br-modal-verdict.ok {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
}

.br-modal-verdict.warning {
  background: rgba(249,115,22,0.15);
  color: #f97316;
}

.br-modal-verdict.bad {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.br-modal-best {
  margin: 0 16px 12px;
  padding: 10px 12px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.br-modal-position {
  margin: 0 16px 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.br-modal-position strong {
  color: #FFC629;
}

/* Problems */
.br-modal-problems {
  margin: 0 16px 16px;
}

.br-problems-title {
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.br-problem-item {
  background: rgba(239,68,68,0.08);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

.br-problem-item:last-child {
  margin-bottom: 0;
}

.br-problem-issue {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.br-problem-data {
  font-size: 12px;
  color: #ef4444;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.br-problem-fix {
  font-size: 12px;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 6px;
}

.br-modal-dominated {
  margin: 0 16px 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 400px) {
  .bumble-results-v4 {
    padding: 12px;
  }
  
  .br-hero {
    padding: 20px 16px;
  }
  
  .br-score-ring {
    width: 110px;
    height: 110px;
  }
  
  .br-score-num {
    font-size: 38px;
  }
  
  .br-photo-grid {
    gap: 6px;
  }
  
  .br-action-card {
    padding: 10px 12px;
  }
}

/* ==========================================
   BUMBLE RESULTS v5 - VERİ DESTEKLİ
   ========================================== */

/* v5 container */
.bumble-results-v5 {
  max-width: 500px;
  margin: 0 auto;
  padding: 16px;
}

/* ==========================================
   CHECKLIST SECTION
   ========================================== */
.br-checklist-section {
  background: linear-gradient(145deg, rgba(255,198,41,0.08), rgba(255,198,41,0.02));
  border: 1px solid rgba(255,198,41,0.2);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}

.br-checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.br-checklist-title {
  font-size: 15px;
  font-weight: 600;
  color: #FFC629;
  display: flex;
  align-items: center;
  gap: 8px;
}

.br-checklist-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.br-checklist-progress span {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.br-checklist-bar {
  width: 60px;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.br-checklist-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFC629, #22c55e);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.br-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.br-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.br-checklist-item.done {
  background: rgba(34,197,94,0.1);
}

.br-checklist-item.missing {
  background: rgba(239,68,68,0.08);
}

.br-checklist-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
}

.br-checklist-item.done .br-checklist-icon {
  background: #22c55e;
  color: #000;
}

.br-checklist-item.missing .br-checklist-icon {
  background: rgba(239,68,68,0.3);
  color: #ef4444;
}

.br-checklist-label {
  flex: 1;
  font-size: 13px;
  color: #fff;
}

.br-checklist-data {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.br-checklist-item.done .br-checklist-data {
  background: rgba(34,197,94,0.2);
  color: #22c55e;
}

.br-checklist-item.missing .br-checklist-data {
  background: rgba(255,198,41,0.15);
  color: #FFC629;
}

/* ==========================================
   FIRST ACTION - v5
   ========================================== */
.br-first-action {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255,198,41,0.15), rgba(255,198,41,0.05));
  border: 1px solid rgba(255,198,41,0.3);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.br-first-action-icon {
  width: 40px;
  height: 40px;
  background: #FFC629;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.br-first-action-icon i {
  font-size: 18px;
  color: #000;
}

.br-first-action-content {
  flex: 1;
}

.br-first-action-label {
  font-size: 11px;
  font-weight: 700;
  color: #FFC629;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.br-first-action-text {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
}

/* ==========================================
   BEST PHOTO TIP - v5
   ========================================== */
.br-best-photo-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

.br-best-star {
  font-size: 20px;
  color: #22c55e;
  line-height: 1;
}

.br-best-content {
  flex: 1;
}

.br-best-action {
  font-size: 13px;
  font-weight: 600;
  color: #22c55e;
  margin-bottom: 2px;
}

.br-best-why {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* ==========================================
   PHOTO VERDICT ICON
   ========================================== */
.br-photo-verdict-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.br-photo-slot.ok .br-photo-verdict-icon {
  background: #22c55e;
  color: #000;
}

.br-photo-slot.warning .br-photo-verdict-icon {
  background: #f97316;
  color: #000;
}

.br-photo-slot.bad .br-photo-verdict-icon {
  background: #ef4444;
  color: #fff;
}

/* ==========================================
   ACTION CARD - v5
   ========================================== */
.br-action-card {
  display: flex;
  gap: 12px;
  background: rgba(255,198,41,0.06);
  border: 1px solid rgba(255,198,41,0.15);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}

.br-action-num {
  width: 28px;
  height: 28px;
  background: #FFC629;
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.br-action-body {
  flex: 1;
}

.br-action-do {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
}

.br-action-reason {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.br-action-reason i {
  color: #FFC629;
  margin-top: 2px;
}

.br-action-result {
  font-size: 12px;
  font-weight: 600;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================
   MISSING PHOTOS - v5
   ========================================== */
.br-missing-item {
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}

.br-missing-item:last-child {
  margin-bottom: 0;
}

.br-missing-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.br-missing-header i {
  color: #f97316;
}

.br-missing-type {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.br-missing-why {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.br-missing-why i {
  color: #f97316;
  margin-top: 2px;
}

.br-missing-suggestion {
  font-size: 12px;
  color: #FFC629;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.br-missing-suggestion i {
  margin-top: 2px;
}

/* ==========================================
   DATA CARD - Bumble Statistics
   ========================================== */
.br-data-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 16px;
  margin-top: 20px;
}

.br-data-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.br-data-title i {
  color: #FFC629;
}

.br-data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.br-data-item {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.br-data-item.highlight {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
}

.br-data-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.br-data-item.highlight .br-data-value {
  color: #22c55e;
}

.br-data-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ==========================================
   BIO SECTION
   ========================================== */
.br-bio-section {
  margin-top: 20px;
}

.br-bio-content {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 14px;
}

.br-bio-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
}

.br-bio-status.has {
  color: #22c55e;
}

.br-bio-status.missing {
  color: #f97316;
}

.br-bio-issue {
  font-size: 12px;
  color: #ef4444;
  background: rgba(239,68,68,0.1);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.br-bio-issue i {
  margin-top: 2px;
}

.br-bio-suggestion {
  font-size: 12px;
  color: #FFC629;
  background: rgba(255,198,41,0.1);
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.br-bio-suggestion i {
  margin-top: 2px;
}

/* ==========================================
   RESPONSIVE - v5
   ========================================== */
@media (max-width: 400px) {
  .bumble-results-v5 {
    padding: 12px;
  }
  
  .br-checklist-section {
    padding: 12px;
  }
  
  .br-checklist-item {
    padding: 8px 10px;
  }
  
  .br-checklist-label {
    font-size: 12px;
  }
  
  .br-checklist-data {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  .br-data-grid {
    gap: 8px;
  }
  
  .br-data-value {
    font-size: 18px;
  }
  
  .br-data-label {
    font-size: 9px;
  }
}

/* ==========================================
   BUMBLE RESULTS v6 - KİŞİSELLEŞTİRİLMİŞ
   ========================================== */

.bumble-results-v6 {
  max-width: 500px;
  margin: 0 auto;
  padding: 16px;
}

/* ==========================================
   YOUR STATS - Kişiselleştirilmiş Karşılaştırma
   ========================================== */
.br-your-stats {
  margin-bottom: 20px;
}

.br-stat-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.br-stat-box {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  text-align: center;
}

.br-stat-box.current {
  background: linear-gradient(145deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05));
  border: 1px solid rgba(239,68,68,0.3);
}

.br-stat-box.potential {
  background: linear-gradient(145deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
  border: 1px solid rgba(34,197,94,0.3);
}

.br-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.br-stat-main {
  margin-bottom: 6px;
}

.br-stat-value {
  font-size: 28px;
  font-weight: 700;
}

.br-stat-box.current .br-stat-value {
  color: #ef4444;
}

.br-stat-box.potential .br-stat-value {
  color: #22c55e;
}

.br-stat-unit {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  display: block;
}

.br-stat-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}

.br-stat-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.br-stat-arrow i {
  font-size: 18px;
  color: #FFC629;
}

.br-stat-arrow span {
  font-size: 12px;
  font-weight: 700;
  color: #FFC629;
  margin-top: 4px;
}

/* ==========================================
   BIO TEMPLATES - Hazır Bio Şablonları
   ========================================== */
.br-bio-templates {
  margin-top: 20px;
}

.br-bio-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.br-bio-template {
  background: linear-gradient(145deg, rgba(255,198,41,0.1), rgba(255,198,41,0.03));
  border: 1px solid rgba(255,198,41,0.25);
  border-radius: 14px;
  padding: 14px;
}

.br-bio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.br-bio-style {
  font-size: 12px;
  font-weight: 600;
  color: #FFC629;
  background: rgba(255,198,41,0.15);
  padding: 4px 10px;
  border-radius: 20px;
}

.br-bio-copy {
  background: #FFC629;
  color: #000;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.br-bio-copy:hover {
  background: #ffd54f;
  transform: scale(1.02);
}

.br-bio-copy.copied {
  background: #22c55e;
  color: #fff;
}

.br-bio-text {
  font-size: 14px;
  color: #fff;
  line-height: 1.5;
  padding: 12px;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  margin-bottom: 10px;
  white-space: pre-line;
}

.br-bio-why {
  font-size: 11px;
  color: rgba(34,197,94,0.9);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.br-bio-why i {
  margin-top: 2px;
}

/* ==========================================
   COMPARISON CARDS - İyi vs Kötü
   ========================================== */
.br-comparison {
  margin-top: 20px;
}

.br-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.br-comparison-card {
  border-radius: 14px;
  padding: 14px;
  overflow: hidden;
}

.br-comparison-card.bad {
  background: linear-gradient(145deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04));
  border: 1px solid rgba(239,68,68,0.25);
}

.br-comparison-card.good {
  background: linear-gradient(145deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04));
  border: 1px solid rgba(34,197,94,0.25);
}

.br-comparison-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.br-comparison-card.bad .br-comparison-header {
  color: #ef4444;
}

.br-comparison-card.good .br-comparison-header {
  color: #22c55e;
}

.br-comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.br-comparison-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.br-comparison-list li:last-child {
  border-bottom: none;
}

.br-comparison-list li i {
  width: 16px;
  text-align: center;
  font-size: 10px;
}

.br-comparison-card.bad .br-comparison-list li i {
  color: #ef4444;
}

.br-comparison-card.good .br-comparison-list li i {
  color: #22c55e;
}

.br-comparison-list li span {
  margin-left: auto;
  font-weight: 600;
  font-size: 10px;
}

.br-comparison-card.bad .br-comparison-list li span {
  color: #ef4444;
}

.br-comparison-card.good .br-comparison-list li span {
  color: #22c55e;
}

/* ==========================================
   RESPONSIVE - v6
   ========================================== */
@media (max-width: 400px) {
  .bumble-results-v6 {
    padding: 12px;
  }
  
  .br-stat-value {
    font-size: 24px;
  }
  
  .br-stat-box {
    padding: 10px;
  }
  
  .br-comparison-grid {
    gap: 8px;
  }
  
  .br-comparison-card {
    padding: 10px;
  }
  
  .br-comparison-list li {
    font-size: 10px;
  }
  
  .br-bio-text {
    font-size: 13px;
    padding: 10px;
  }
}

/* ==========================================
   BUMBLE RESULTS v7 - SADELEŞTİRİLMİŞ
   ========================================== */

.bumble-results-v7 {
  max-width: 500px;
  margin: 0 auto;
  padding: 16px;
}

/* STATS ROW */
.br-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
}

.br-stat {
  text-align: center;
  padding: 12px 16px;
  border-radius: 12px;
  min-width: 100px;
}

.br-stat.current {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
}

.br-stat.potential {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
}

.br-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}

.br-stat-value {
  font-size: 24px;
  font-weight: 700;
}

.br-stat.current .br-stat-value { color: #ef4444; }
.br-stat.potential .br-stat-value { color: #22c55e; }

.br-stat-unit {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}

.br-stat-arrow {
  font-size: 16px;
  color: #FFC629;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.br-stat-arrow span {
  font-size: 12px;
  font-weight: 700;
}

/* INSTANT ACTIONS - Checkbox List */
.br-instant-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.br-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,198,41,0.08);
  border: 1px solid rgba(255,198,41,0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.br-action-item:hover {
  background: rgba(255,198,41,0.12);
}

.br-action-item input[type="checkbox"] {
  display: none;
}

.br-action-check {
  width: 22px;
  height: 22px;
  border: 2px solid #FFC629;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.br-action-item input:checked + .br-action-check {
  background: #22c55e;
  border-color: #22c55e;
}

.br-action-item input:checked + .br-action-check::after {
  content: '✓';
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

.br-action-item input:checked ~ .br-action-text {
  text-decoration: line-through;
  opacity: 0.5;
}

.br-action-text {
  font-size: 14px;
  color: #fff;
  flex: 1;
}

/* COMPARISON GRID - v7 */
.br-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.br-comparison-card {
  border-radius: 12px;
  padding: 12px;
}

.br-comparison-card.bad {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
}

.br-comparison-card.good {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
}

.br-comparison-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.br-comparison-card.bad .br-comparison-header { color: #ef4444; }
.br-comparison-card.good .br-comparison-header { color: #22c55e; }

.br-comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.br-comparison-list li {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.br-comparison-list li:last-child { border-bottom: none; }

.br-comparison-list li span:last-child {
  font-weight: 600;
}

.br-comparison-card.bad .br-comparison-list li span:last-child { color: #ef4444; }
.br-comparison-card.good .br-comparison-list li span:last-child { color: #22c55e; }

/* MODAL v7 */
.br-modal-issue {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  padding: 12px;
  border-radius: 10px;
  margin: 12px 16px;
  font-size: 13px;
  color: #ef4444;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.br-modal-issue i { margin-top: 2px; }

.br-modal-move {
  background: rgba(255,198,41,0.1);
  border: 1px solid rgba(255,198,41,0.2);
  padding: 12px;
  border-radius: 10px;
  margin: 12px 16px;
  font-size: 13px;
  color: #FFC629;
  display: flex;
  align-items: center;
  gap: 8px;
}

.br-modal-best {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  padding: 10px 16px;
  margin: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.br-modal-verdict.best {
  background: #22c55e !important;
  color: #000 !important;
}

/* PHOTO SLOT v7 */
.br-photo-slot.best {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.3);
}

.br-photo-slot.best .br-photo-verdict-icon {
  background: #22c55e;
  color: #000;
}

@media (max-width: 400px) {
  .br-stats-row {
    padding: 12px;
    gap: 8px;
  }
  
  .br-stat {
    padding: 10px 12px;
    min-width: 80px;
  }
  
  .br-stat-value {
    font-size: 20px;
  }
  
  .br-action-item {
    padding: 12px;
  }
  
  .br-action-text {
    font-size: 13px;
  }
}
/* ============================================================
   BUMBLE X - TAB YAPISI + BÜYÜK MODAL
   ============================================================ */

.bumble-x {
  padding: 20px 16px;
  max-width: 500px;
  margin: 0 auto;
}

/* HEADER */
.bx-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.bx-logo {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #FFC629, #FFD75A);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 15px rgba(255,198,41,0.35);
}
.bx-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

/* SKOR KARTI */
.bx-score-card {
  display: flex;
  gap: 20px;
  align-items: center;
  background: rgba(25,25,25,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.bx-score-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.bx-score-card.critical::before { background: linear-gradient(90deg, #ef4444, #dc2626); }
.bx-score-card.weak::before { background: linear-gradient(90deg, #f97316, #ea580c); }
.bx-score-card.medium::before { background: linear-gradient(90deg, #FFC629, #eab308); }
.bx-score-card.good::before { background: linear-gradient(90deg, #22c55e, #16a34a); }
.bx-score-card.excellent::before { background: linear-gradient(90deg, #10b981, #059669); }

.bx-score-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bx-score-circle {
  width: 90px;
  height: 90px;
  position: relative;
}
.bx-score-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.bx-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; }
.bx-fg {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: calc(264 - 264 * var(--p, 0) / 100);
  transition: stroke-dashoffset 1s ease-out;
}
.bx-score-card.critical .bx-fg { stroke: #ef4444; }
.bx-score-card.weak .bx-fg { stroke: #f97316; }
.bx-score-card.medium .bx-fg { stroke: #FFC629; }
.bx-score-card.good .bx-fg { stroke: #22c55e; }
.bx-score-card.excellent .bx-fg { stroke: #10b981; }

.bx-score-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  font-weight: 800;
  color: #fff;
}
.bx-score-max {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

.bx-score-right { flex: 1; }
.bx-level {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}
.bx-score-card.critical .bx-level { color: #ef4444; }
.bx-score-card.weak .bx-level { color: #f97316; }
.bx-score-card.medium .bx-level { color: #FFC629; }
.bx-score-card.good .bx-level { color: #22c55e; }
.bx-score-card.excellent .bx-level { color: #10b981; }

.bx-summary {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

/* KRİTİK SORUNLAR */
.bx-issues {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}
.bx-issue {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  line-height: 1.4;
}
.bx-issue:last-child { border-bottom: none; }

/* SECTION */
.bx-section { margin-bottom: 20px; }
.bx-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.bx-section-head span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.bx-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* PHOTO GRID */
.bx-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bx-photo {
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.bx-photo:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
.bx-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bx-photo-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.bx-photo.keep .bx-photo-badge { background: #22c55e; }
.bx-photo.change .bx-photo-badge { background: #FFC629; color: #000; }
.bx-photo.delete .bx-photo-badge { background: #ef4444; }

.bx-photo-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 10px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.bx-photo-score {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.bx-photo-label {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  text-transform: uppercase;
}
.bx-photo.keep .bx-photo-label { background: #22c55e; }
.bx-photo.change .bx-photo-label { background: #FFC629; color: #000; }
.bx-photo.delete .bx-photo-label { background: #ef4444; }

.bx-photo.empty {
  background: rgba(255,255,255,0.02);
  border: 2px dashed rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-photo.empty span {
  font-size: 28px;
  color: rgba(255,255,255,0.15);
}

/* TABS */
.bx-tabs-container {
  background: rgba(20,20,20,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
}
.bx-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bx-tab {
  flex: 1;
  padding: 16px 12px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.bx-tab:hover {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.03);
}
.bx-tab.active {
  color: #FFC629;
  background: rgba(255,198,41,0.08);
}
.bx-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: #FFC629;
  border-radius: 3px 3px 0 0;
}

.bx-tab-content {
  padding: 20px;
}
.bx-tab-panel {
  display: none;
}
.bx-tab-panel.active {
  display: block;
}

.bx-empty-tab {
  text-align: center;
  padding: 30px;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}

/* BIO TAB */
.bx-bio-box {
  background: rgba(0,0,0,0.2);
  border-left: 4px solid #FFC629;
  border-radius: 0 12px 12px 0;
  padding: 18px;
  margin-bottom: 14px;
}
.bx-bio-text {
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  margin-bottom: 14px;
}
.bx-copy-btn {
  background: linear-gradient(135deg, #FFC629, #FFD75A);
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(255,198,41,0.3);
}
.bx-copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,198,41,0.4);
}
.bx-bio-tip {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.03);
  padding: 12px;
  border-radius: 10px;
  line-height: 1.5;
}

/* PROMPTS TAB */
.bx-prompts-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bx-prompt-card {
  background: rgba(0,0,0,0.2);
  border-radius: 14px;
  padding: 16px;
}
.bx-prompt-q {
  font-size: 12px;
  color: #FFC629;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bx-prompt-a {
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
  margin-bottom: 12px;
}
.bx-prompt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.bx-prompt-tip {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  flex: 1;
}
.bx-copy-mini {
  background: rgba(255,198,41,0.15);
  border: none;
  border-radius: 10px;
  width: 44px;
  height: 44px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.bx-copy-mini:hover {
  background: rgba(255,198,41,0.3);
}

/* ACTIONS TAB */
.bx-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bx-action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.bx-action-item:hover {
  background: rgba(34,197,94,0.1);
}
.bx-action-item input { display: none; }
.bx-checkbox {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(34,197,94,0.4);
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.bx-action-item input:checked + .bx-checkbox {
  background: #22c55e;
  border-color: #22c55e;
}
.bx-action-item input:checked + .bx-checkbox::after {
  content: '✓';
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.bx-action-text {
  flex: 1;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.4;
}
.bx-action-item input:checked ~ .bx-action-text {
  text-decoration: line-through;
  opacity: 0.5;
}
.bx-action-badge {
  font-size: 11px;
  font-weight: 600;
  color: #22c55e;
  background: rgba(34,197,94,0.15);
  padding: 5px 12px;
  border-radius: 10px;
}

/* ============================================================
   MODAL - BÜYÜK VE DETAYLI
   ============================================================ */
.bx-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bx-modal.open { display: flex; }

.bx-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1;
}

.bx-modal-box {
  position: relative;
  z-index: 2;
  background: #1a1a1a;
  border-radius: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,0.6);
}

.bx-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  background: rgba(0,0,0,0.7);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}
.bx-modal-close:hover {
  background: rgba(0,0,0,0.9);
  transform: scale(1.05);
}

.bx-modal-scroll {
  max-height: 92vh;
  overflow-y: auto;
}

.bx-modal-img {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.bx-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bx-modal-body {
  padding: 24px;
}

.bx-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bx-modal-score-box {
  display: flex;
  flex-direction: column;
}
.bx-modal-score {
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.bx-modal-score-label {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}

.bx-modal-verdict {
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bx-modal-verdict.keep { background: rgba(34,197,94,0.2); color: #22c55e; }
.bx-modal-verdict.change { background: rgba(255,198,41,0.2); color: #FFC629; }
.bx-modal-verdict.delete { background: rgba(239,68,68,0.2); color: #ef4444; }

/* TAGS */
.bx-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.bx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 12px;
}
.bx-tag small {
  font-size: 11px;
  opacity: 0.8;
}
.bx-tag.bad {
  background: rgba(239,68,68,0.12);
  color: #f87171;
}
.bx-tag.good {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}

/* SECTIONS */
.bx-modal-section {
  margin-bottom: 24px;
}
.bx-modal-section-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 14px;
}
.bx-modal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bx-modal-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
}
.bx-modal-item.bad {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.1);
}
.bx-modal-item.good {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.1);
}
.bx-item-text {
  flex: 1;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.4;
}
.bx-item-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}
.bx-item-badge.good {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
}

/* FIX BOX */
.bx-modal-fix {
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.05));
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 16px;
  padding: 20px;
}
.bx-fix-title {
  font-size: 14px;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 12px;
}
.bx-fix-text {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
}

/* ============================================================
   OPTİMİZE PROFİL ÖNİZLEME
   ============================================================ */

/* Preview Button */
.bx-preview-section {
  margin-bottom: 20px;
}
.bx-preview-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255,198,41,0.15) 0%, rgba(255,198,41,0.05) 100%);
  border: 2px solid rgba(255,198,41,0.3);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s;
}
.bx-preview-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,198,41,0.5);
  box-shadow: 0 10px 30px rgba(255,198,41,0.2);
}
.bx-preview-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #FFC629, #FFD75A);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(255,198,41,0.4);
}
.bx-preview-text {
  flex: 1;
  text-align: left;
}
.bx-preview-text strong {
  display: block;
  font-size: 16px;
  color: #fff;
  margin-bottom: 4px;
}
.bx-preview-text small {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.bx-preview-arrow {
  font-size: 24px;
  color: #FFC629;
}

/* Profile Modal */
.bx-profile-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bx-profile-modal.open {
  display: flex;
}
.bx-pm-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.95);
}
.bx-pm-box {
  position: relative;
  background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
  border-radius: 28px;
  max-width: 420px;
  width: 100%;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: 0 30px 100px rgba(0,0,0,0.8);
}
.bx-pm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}
.bx-pm-close:hover {
  background: rgba(255,255,255,0.2);
}

/* Loading */
.bx-pm-loading {
  padding: 80px 40px;
  text-align: center;
}
.bx-pm-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255,198,41,0.2);
  border-top-color: #FFC629;
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.bx-pm-loading p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
}

/* Header */
.bx-pm-header {
  padding: 30px 24px 20px;
  text-align: center;
}
.bx-pm-badge {
  display: inline-block;
  background: linear-gradient(135deg, #FFC629, #FFD75A);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bx-pm-header h3 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.bx-pm-header p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* Phone Mockup */
.bx-pm-phone {
  margin: 0 20px 24px;
  background: #000;
  border-radius: 36px;
  padding: 12px;
  border: 3px solid #333;
  position: relative;
}
.bx-pm-phone-notch {
  width: 100px;
  height: 28px;
  background: #000;
  border-radius: 0 0 16px 16px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.bx-pm-phone-screen {
  background: #1a1a1a;
  border-radius: 28px;
  overflow: hidden;
}

/* Bumble Card */
.bx-pm-card {
  position: relative;
}

/* Slider */
.bx-pm-slider {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.bx-pm-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.bx-pm-slide.active {
  opacity: 1;
}
.bx-pm-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bx-pm-slide-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

/* Placeholder */
.bx-pm-slide.placeholder {
  opacity: 0;
  background: linear-gradient(135deg, rgba(255,198,41,0.1), rgba(255,198,41,0.05));
}
.bx-pm-slide.placeholder.active {
  opacity: 1;
}
.bx-pm-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.bx-pm-ph-icon {
  font-size: 48px;
  opacity: 0.5;
}
.bx-pm-ph-text {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}

/* Dots */
.bx-pm-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  z-index: 5;
}
.bx-pm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.2s;
}
.bx-pm-dot.active {
  background: #FFC629;
  transform: scale(1.2);
}
.bx-pm-dot:hover {
  background: rgba(255,255,255,0.5);
}

/* Info Section */
.bx-pm-info {
  padding: 20px;
}
.bx-pm-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.bx-pm-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #3b82f6;
  border-radius: 50%;
  font-size: 12px;
  margin-left: 8px;
  vertical-align: middle;
}
.bx-pm-bio {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Prompts in preview */
.bx-pm-prompt {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}
.bx-pm-prompt:last-child {
  margin-bottom: 0;
}
.bx-pm-prompt-q {
  font-size: 12px;
  color: #FFC629;
  font-weight: 600;
  margin-bottom: 8px;
}
.bx-pm-prompt-a {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.4;
}

/* Stats */
.bx-pm-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 24px 24px;
}
.bx-pm-stat {
  text-align: center;
}
.bx-pm-stat-label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.bx-pm-stat-value {
  font-size: 32px;
  font-weight: 800;
}
.bx-pm-stat-value.old {
  color: #ef4444;
}
.bx-pm-stat-value.new {
  color: #22c55e;
}
.bx-pm-stat-arrow {
  font-size: 28px;
  color: #FFC629;
}

/* Tips */
.bx-pm-tips {
  padding: 0 24px 30px;
}
.bx-pm-tip {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bx-pm-tip:last-child {
  border-bottom: none;
}

/* ============================================================
   PROFILE MODAL FIX - Z-INDEX & VISIBILITY
   ============================================================ */
.bx-profile-modal {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(0,0,0,0.98) !important;
}
.bx-profile-modal.open {
  display: flex !important;
}
.bx-pm-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0,0,0,0.98) !important;
  z-index: 1 !important;
}
.bx-pm-box {
  position: relative !important;
  z-index: 2 !important;
  background: #1a1a1a !important;
  border-radius: 28px !important;
  max-width: 420px !important;
  width: 100% !important;
  max-height: 95vh !important;
  overflow-y: auto !important;
  box-shadow: 0 30px 100px rgba(0,0,0,0.8) !important;
}

/* ============================================================
   GERÇEK BUMBLE PROFİL ÖNİZLEME
   ============================================================ */

/* Container */
.bp-container {
  position: relative;
  z-index: 2;
  max-width: 400px;
  width: 100%;
  max-height: 95vh;
  overflow-y: auto;
  padding-bottom: 20px;
}

.bp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 100;
}

/* Header */
.bp-header-bar {
  text-align: center;
  padding: 20px 20px 16px;
}
.bp-header-badge {
  display: inline-block;
  background: linear-gradient(135deg, #FFC629, #FFD75A);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.bp-header-bar p {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  margin: 0;
}

/* Bumble Card */
.bp-card {
  background: #1a1a1a;
  border-radius: 20px;
  overflow: hidden;
  margin: 0 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* Photo Area */
.bp-photo-area {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.bp-slides {
  width: 100%;
  height: 100%;
  position: relative;
}
.bp-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}
.bp-slide.active {
  opacity: 1;
}
.bp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bp-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}
.bp-placeholder span {
  font-size: 48px;
  margin-bottom: 10px;
}
.bp-placeholder p {
  color: rgba(255,255,255,0.4);
  margin: 0;
}

/* Photo dots (top) */
.bp-dots {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 10;
}
.bp-dot {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s;
}
.bp-dot.active {
  background: #fff;
}

/* Photo count */
.bp-photo-count {
  position: absolute;
  top: 24px;
  right: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  z-index: 10;
}

/* Gradient overlay */
.bp-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  pointer-events: none;
}

/* Info overlay */
.bp-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  z-index: 5;
}
.bp-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.bp-name {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}
.bp-verified {
  width: 24px;
  height: 24px;
  background: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
}
.bp-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 4px;
}
.bp-status-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.bp-distance {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

/* Bio Section */
.bp-bio-section {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bp-bio-text {
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
}

/* Prompts Section */
.bp-prompts-section {
  padding: 16px 20px;
}
.bp-prompt-card {
  background: rgba(255,198,41,0.1);
  border: 1px solid rgba(255,198,41,0.2);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.bp-prompt-card:last-child {
  margin-bottom: 0;
}
.bp-prompt-label {
  font-size: 13px;
  font-weight: 600;
  color: #FFC629;
  margin-bottom: 8px;
}
.bp-prompt-answer {
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
}

/* Action Buttons (Bumble Style) */
.bp-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 24px 20px;
}
.bp-action-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.bp-action-btn:hover {
  transform: scale(1.1);
}
.bp-action-btn.reject {
  background: #fff;
  color: #999;
}
.bp-action-btn.reject:hover {
  color: #ef4444;
}
.bp-action-btn.super {
  background: #fff;
  color: #3b82f6;
  width: 50px;
  height: 50px;
  font-size: 20px;
}
.bp-action-btn.like {
  background: linear-gradient(135deg, #FFC629, #FFD75A);
  color: #fff;
}
.bp-action-btn.like:hover {
  box-shadow: 0 6px 25px rgba(255,198,41,0.5);
}

/* Stats Bar */
.bp-stats-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 20px;
  margin: 0 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  margin-top: 16px;
}
.bp-stat-item {
  text-align: center;
}
.bp-stat-label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bp-stat-value {
  font-size: 32px;
  font-weight: 800;
}
.bp-stat-value.old {
  color: #ef4444;
}
.bp-stat-value.new {
  color: #22c55e;
}
.bp-stat-arrow {
  font-size: 24px;
  color: #FFC629;
}

/* Tips */
.bp-tips-bar {
  padding: 16px;
  margin: 12px 16px 0;
}
.bp-tip {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bp-tip:last-child {
  border-bottom: none;
}
/* ============================================================
   GERÇEK BUMBLE PROFİL GÖRÜNÜMÜ
   ============================================================ */

.brv-container {
  position: relative;
  z-index: 2;
  max-width: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brv-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 100;
}

/* Header */
.brv-header {
  text-align: center;
  margin-bottom: 16px;
  padding: 0 50px;
}
.brv-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.brv-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   PHONE FRAME
   ============================================================ */

.brv-phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  background: #1a1a1a;
  overflow: hidden;
}

.brv-phone.ios {
  border-radius: 40px;
  padding: 10px;
  border: 3px solid #333;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.brv-phone.android {
  border-radius: 28px;
  padding: 8px;
  border: 2px solid #2a2a2a;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.brv-phone.desktop {
  border-radius: 16px;
  padding: 6px;
  border: 2px solid #333;
}

.brv-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 22px;
  background: #1a1a1a;
  border-radius: 12px;
  z-index: 50;
}
.brv-punch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #1a1a1a;
  border-radius: 50%;
  z-index: 50;
}

.brv-home-bar {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  z-index: 50;
}
.brv-nav {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  z-index: 50;
}
.brv-nav span {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}

/* Bumble Header */
.brv-bumble-header {
  background: #FFC629;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 30px 30px 0 0;
}
.brv-phone.ios .brv-bumble-header {
  padding-top: 32px;
}
.brv-phone.android .brv-bumble-header {
  padding-top: 24px;
}
.brv-logo {
  font-size: 18px;
}
.brv-brand {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

/* Scroll Area */
.brv-scroll {
  background: #FFF8E7;
  max-height: 420px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Photo Section */
.brv-photo-section {
  position: relative;
  width: 100%;
}
.brv-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.brv-dots {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 10;
}
.brv-dot {
  flex: 1;
  height: 3px;
  background: rgba(0,0,0,0.2);
  border-radius: 2px;
}
.brv-dot.active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Info Overlay */
.brv-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 16px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.brv-name {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.brv-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #3b82f6;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}
.brv-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
}

/* Bio Section */
.brv-bio-section {
  padding: 16px;
  background: #fff;
}
.brv-bio-section p {
  font-size: 15px;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

/* Prompt Section */
.brv-prompt-section {
  margin: 12px;
  padding: 16px;
  background: #FFF;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.brv-prompt-q {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  margin-bottom: 8px;
  text-transform: lowercase;
}
.brv-prompt-q::first-letter {
  text-transform: uppercase;
}
.brv-prompt-a {
  font-size: 16px;
  color: #222;
  line-height: 1.4;
}

/* Action Buttons */
.brv-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 12px;
  background: #FFF8E7;
  border-radius: 0 0 30px 30px;
}
.brv-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.brv-btn:hover {
  transform: scale(1.1);
}
.brv-btn.reject {
  background: #fff;
  color: #bbb;
  border: 2px solid #eee;
}
.brv-btn.like {
  background: #fff;
  border: 2px solid #FFC629;
}
/* ============================================================
   PAYLAŞIM BÖLÜMÜ
   ============================================================ */

.bx-share-section {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255,198,41,0.1), rgba(255,198,41,0.02));
  border: 1px solid rgba(255,198,41,0.2);
  border-radius: 16px;
}

.bx-share-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 16px;
}

.bx-share-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.bx-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}

.bx-share-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,198,41,0.3);
  transform: translateY(-2px);
}

.bx-share-icon {
  font-size: 24px;
}

.bx-share-btn span:last-child {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

@media (max-width: 360px) {
  .bx-share-btn {
    flex: 1;
    min-width: 70px;
    padding: 12px 14px;
  }
}


/* Bio Label */
.bx-bio-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFC629;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}


/* Content - Hidden by default */
.rf-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.rf-content.open {
  max-height: 2000px;
  margin-top: 12px;
}

/* Items */
.rf-item {
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  border-left: 3px solid;
}

.rf-item:last-child {
  margin-bottom: 0;
}

.rf-item[data-severity="critical"] {
  border-left-color: #ef4444;
}

.rf-item[data-severity="warning"] {
  border-left-color: #f97316;
}

.rf-item[data-severity="minor"] {
  border-left-color: #eab308;
}

.rf-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rf-severity {
  font-size: 14px;
}

.rf-flag {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.rf-explanation {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin-bottom: 10px;
}

.rf-fix {
  font-size: 11px;
  color: #4ade80;
  background: rgba(74,222,128,0.1);
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.4;
}
/* ============================================================
   ✨ BIO GENERATOR - TEMİZ TASARIM
   ============================================================ */

.biogen {
  margin-top: 20px;
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(139,92,246,0.02));
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 16px;
  padding: 20px;
}

.biogen-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.biogen-icon { font-size: 18px; }

.biogen-title {
  font-size: 15px;
  font-weight: 700;
  color: #a78bfa;
  flex: 1;
}

.biogen-credits {
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(139,92,246,0.2);
  padding: 4px 10px;
  border-radius: 10px;
}

.biogen-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0 0 16px 0;
}

.biogen-styles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.biogen-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  background: rgba(0,0,0,0.2);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.biogen-style:hover {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.3);
}

.biogen-style.selected {
  background: rgba(139,92,246,0.15);
  border-color: #a78bfa;
}

.biogen-style-emoji { font-size: 28px; }

.biogen-style-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.biogen-style-desc {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  text-align: center;
}

/* Output */
.biogen-output {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(139,92,246,0.15);
}

.biogen-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}

.biogen-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(139,92,246,0.3);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.biogen-result {}

.biogen-bio {
  font-size: 15px;
  color: #fff;
  line-height: 1.6;
  padding: 16px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  margin-bottom: 8px;
}

.biogen-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-align: right;
  margin-bottom: 12px;
}

.biogen-actions {
  display: flex;
  gap: 10px;
}

.biogen-copy, .biogen-retry {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.biogen-copy {
  background: #a78bfa;
  color: #fff;
}

.biogen-copy:hover { background: #8b5cf6; }

.biogen-retry {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.biogen-retry:hover { background: rgba(255,255,255,0.12); }
.biogen-retry:disabled { opacity: 0.4; cursor: not-allowed; }

.biogen-error {
  color: #ef4444;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 360px) {
  .biogen-styles {
    grid-template-columns: 1fr;
  }
  .biogen-style {
    flex-direction: row;
    justify-content: flex-start;
    padding: 12px 16px;
    gap: 12px;
  }
  .biogen-style-emoji { font-size: 24px; }
  .biogen-style-desc { text-align: left; }
}
/* 🚩 RED FLAG - MİNİMAL */

.rf-box {
  margin-top: 16px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  overflow: hidden;
}

.rf-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.rf-top:hover { background: rgba(255,255,255,0.03); }

.rf-arrow {
  font-size: 12px;
  color: #666;
}

.rf-body {
  display: none;
  border-top: 1px solid #333;
}

.rf-body.open { display: block; }

.rf-row {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #222;
}

.rf-row:last-child { border-bottom: none; }

.rf-dot {
  font-size: 12px;
  margin-top: 2px;
}

.rf-info { flex: 1; }

.rf-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.rf-tip {
  font-size: 12px;
  color: #4ade80;
  line-height: 1.4;
}

/* ============================================================
   📊 PHOTO SCORE - DİNAMİK VİBE
   ============================================================ */

.bx-photo-score {
  font-weight: 800;
  font-size: 28px;
  transition: all 0.3s ease;
}

/* 80+ Mükemmel - Altın ışıltı */
.bx-photo-score.score-excellent {
  color: #FFD700;
  text-shadow: 
    0 0 10px rgba(255, 215, 0, 0.8),
    0 0 20px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.4);
  animation: scoreGlow 2s ease-in-out infinite;
}

@keyframes scoreGlow {
  0%, 100% { 
    text-shadow: 
      0 0 10px rgba(255, 215, 0, 0.8),
      0 0 20px rgba(255, 215, 0, 0.6),
      0 0 30px rgba(255, 215, 0, 0.4);
  }
  50% { 
    text-shadow: 
      0 0 15px rgba(255, 215, 0, 1),
      0 0 30px rgba(255, 215, 0, 0.8),
      0 0 45px rgba(255, 215, 0, 0.6);
  }
}

/* 60-79 İyi - Yeşil parıltı */
.bx-photo-score.score-good {
  color: #4ade80;
  text-shadow: 
    0 0 8px rgba(74, 222, 128, 0.6),
    0 0 16px rgba(74, 222, 128, 0.3);
  animation: scoreGoodPulse 3s ease-in-out infinite;
}

@keyframes scoreGoodPulse {
  0%, 100% { 
    text-shadow: 
      0 0 8px rgba(74, 222, 128, 0.6),
      0 0 16px rgba(74, 222, 128, 0.3);
  }
  50% { 
    text-shadow: 
      0 0 12px rgba(74, 222, 128, 0.8),
      0 0 24px rgba(74, 222, 128, 0.5);
  }
}

/* 40-59 Orta - Sarı/Turuncu */
.bx-photo-score.score-medium {
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

/* 20-39 Zayıf - Turuncu, soluk */
.bx-photo-score.score-low {
  color: #f97316;
  opacity: 0.85;
  text-shadow: none;
}

/* 0-19 Kritik - Kırmızı, titreme */
.bx-photo-score.score-critical {
  color: #ef4444;
  opacity: 0.7;
  animation: scoreShake 0.5s ease-in-out infinite;
}

@keyframes scoreShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Hover efektleri */
.bx-photo:hover .bx-photo-score.score-excellent {
  transform: scale(1.15);
  text-shadow: 
    0 0 20px rgba(255, 215, 0, 1),
    0 0 40px rgba(255, 215, 0, 0.8),
    0 0 60px rgba(255, 215, 0, 0.6);
}

.bx-photo:hover .bx-photo-score.score-good {
  transform: scale(1.1);
}

.bx-photo:hover .bx-photo-score.score-medium {
  transform: scale(1.05);
}

.bx-photo:hover .bx-photo-score.score-low {
  opacity: 1;
}

.bx-photo:hover .bx-photo-score.score-critical {
  animation: none;
  opacity: 0.9;
}
/* ============================================================

/* ============================================================
   🔧 MODAL OVERLAY FIX - ARKAPLAN TAMAMEN KAPATILSIN
   ============================================================ */

.modal-overlay {
  background: rgba(0, 0, 0, 0.95) !important;
}

.modal-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0a0a0f;
  opacity: 0.98;
  z-index: -1;
}

.glass-modal {
  background: linear-gradient(165deg, #1a1a2e 0%, #12121f 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Wizard modal */
#wizard-modal.modal-overlay {
  background: rgba(0, 0, 0, 0.98) !important;
}

#wizard-modal .glass-modal {
  background: linear-gradient(165deg, #1a1a2e 0%, #0f0f1a 100%) !important;
}

/* Auth modal */
#auth-modal.modal-overlay {
  background: rgba(0, 0, 0, 0.98) !important;
}

/* Profile modal */
#profile-modal.modal-overlay {
  background: rgba(0, 0, 0, 0.98) !important;
}

/* Foto modal */
.foto-modal-overlay {
  background: rgba(0, 0, 0, 0.98) !important;
}

/* Upsell modal */
.upsell-modal-overlay {
  background: rgba(0, 0, 0, 0.98) !important;
}

/* BX modal */
#bx-modal {
  background: rgba(0, 0, 0, 0.95) !important;
}

.bx-modal-overlay {
  background: rgba(0, 0, 0, 0.95) !important;
}

/* Pricing modal */
.pricing-modal-overlay {
  background: rgba(0, 0, 0, 0.98) !important;
}

/* =============================================================
   🎨 SONUÇ EKRANI TASARIM REVİZYONU v2.0
   - Mobil odaklı
   - Yüksek kontrast
   - Okunabilir
   ============================================================= */

/* 🎯 "Neden Bu Puan?" Bölümü */
.bx-why-good {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.05) 100%);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
}

.bx-why-good-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.bx-why-good-icon {
  font-size: 20px;
}

.bx-why-good-title {
  font-size: 15px;
  font-weight: 700;
  color: #22c55e;
}

.bx-vibe-badge {
  display: inline-block;
  padding: 8px 14px;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #4ade80;
  margin-bottom: 10px;
}

.bx-why-good-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* 📱 MODAL GENEL TASARIM */
.bx-modal-box {
  width: 95% !important;
  max-width: 420px !important;
  max-height: 90vh !important;
  background: #0d0d14 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  overflow: hidden;
}

.bx-modal-scroll {
  max-height: calc(90vh - 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bx-modal-img {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.bx-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bx-modal-body {
  padding: 20px !important;
}

/* 📊 SKOR VE VERDİKT */
.bx-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bx-modal-score-box {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
}

.bx-modal-score {
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.bx-modal-score-label {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.bx-modal-verdict {
  padding: 10px 20px !important;
  border-radius: 25px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.bx-modal-verdict.keep {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.bx-modal-verdict.change {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.bx-modal-verdict.delete {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* 🏷️ TAG'LER */
.bx-modal-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.bx-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.bx-tag.good {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}

.bx-tag.bad {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* 📋 BÖLÜMLER (Sorunlar / Olumlu) */
.bx-modal-section {
  margin-bottom: 16px !important;
}

.bx-modal-section-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 12px !important;
}

.bx-modal-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.bx-modal-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

.bx-modal-item.bad {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.bx-modal-item.good {
  background: rgba(34, 197, 94, 0.08) !important;
  border: 1px solid rgba(34, 197, 94, 0.15) !important;
}

.bx-item-text {
  flex: 1 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.bx-item-badge {
  padding: 4px 10px !important;
  border-radius: 15px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  margin-left: 10px !important;
}

.bx-modal-item.bad .bx-item-badge {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

.bx-modal-item.good .bx-item-badge {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

/* 💡 ÖNERİ KUTUSU */
.bx-modal-fix {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.05) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-top: 16px !important;
}

.bx-fix-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #818cf8 !important;
  margin-bottom: 8px !important;
}

.bx-fix-text {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 🔘 KAPAT BUTONU */
.bx-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 18px !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bx-modal-close:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* 📱 MOBİL OPTİMİZASYON */
@media (max-width: 480px) {
  .bx-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  .bx-modal-scroll {
    max-height: 100vh;
  }
  
  .bx-modal-body {
    padding: 16px !important;
  }
  
  .bx-modal-score {
    font-size: 36px !important;
  }
  
  .bx-modal-verdict {
    padding: 8px 16px !important;
    font-size: 12px !important;
  }
  
  .bx-modal-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .bx-item-badge {
    margin-left: 0 !important;
  }
}

/* 🎴 FOTOĞRAF KARTLARI TASARIM */
.photo-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.photo-card-front {
  background: #0d0d14 !important;
}

.photo-card-back {
  background: linear-gradient(165deg, #1a1a2e 0%, #0d0d14 100%) !important;
  padding: 16px !important;
}

.photo-card-back h5 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.photo-card-back p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* 📊 GENEL SONUÇ SAYFASI */
.result-modal {
  background: #08080c !important;
}

.results-tabs {
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  gap: 6px !important;
}

.results-tab {
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

.results-tab:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.results-tab.active {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* 📱 SONUÇ SAYFASI MOBİL */
@media (max-width: 480px) {
  .results-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  
  .results-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .results-tab {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  
  .results-tab span:not(.tab-count) {
    display: inline !important;
  }
}

/* 🔤 GLOBAL FONT İYİLEŞTİRMELERİ */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Daha okunabilir metin */
p, span, div {
  letter-spacing: 0.01em;
}

/* Başlıklar için */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}


/* ========================================
   HERO WITH PHONE MOCKUP - NEW DESIGN
   ======================================== */

.hero-dating {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.hero-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    gap: 60px;
}

/* Sol Taraf - Text */
.hero-text-side {
    flex: 1;
    max-width: 580px;
}

.hero-badge-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255,0,128,0.15), rgba(121,40,202,0.15));
    border: 1px solid rgba(255,0,128,0.3);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 24px;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255,0,128,0.2); }
    50% { box-shadow: 0 0 30px rgba(255,0,128,0.4); }
}

.hero-badge-new i { color: #ff0080; }

.hero-title-main {
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}

.hero-title-gradient {
    display: block;
    background: linear-gradient(90deg, #ff0080, #00ffff, #ff0080);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holoShimmer 4s linear infinite;
}

@keyframes holoShimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.hero-subtitle {
    font-size: clamp(15px, 2vw, 18px);
    color: rgba(255,255,255,0.7);
    margin-bottom: 32px;
    line-height: 1.7;
}

.hero-cta-btn {
    padding: 18px 48px;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(255,0,128,0.4);
    position: relative;
    overflow: hidden;
    font-family: 'Space Grotesk', sans-serif;
}

.hero-cta-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.hero-cta-btn:hover::before { left: 100%; }

.hero-cta-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 50px rgba(255,0,128,0.5);
}

.hero-trust-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

.trust-item i { color: #22c55e; font-size: 14px; }

.app-logos {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

.app-logo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    padding: 8px 14px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s ease;
}

.app-logo-item:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-2px);
}

.app-logo-item i { font-size: 16px; }
.app-logo-item.tinder i { color: #fe3c72; }
.app-logo-item.bumble i { color: #ffc629; }
.app-logo-item.hinge i { color: #ec5f84; }

/* Sağ Taraf - Telefon Mockup */
.hero-phone-side {
    flex: 0 0 320px;
    position: relative;
}

.phone-mockup {
    width: 280px;
    height: 560px;
    background: linear-gradient(145deg, #1a1a2e, #16162a);
    border-radius: 40px;
    padding: 12px;
    box-shadow: 
        0 50px 100px rgba(0,0,0,0.5),
        0 0 0 2px rgba(255,255,255,0.1),
        inset 0 0 20px rgba(255,255,255,0.05);
    position: relative;
    animation: phoneFloat 4s ease-in-out infinite;
}

@keyframes phoneFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.phone-notch {
    width: 100px;
    height: 28px;
    background: #0a0a14;
    border-radius: 0 0 20px 20px;
    margin: 0 auto 15px;
    position: relative;
}

.phone-notch::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.phone-screen {
    background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 100%);
    border-radius: 28px;
    height: calc(100% - 43px);
    padding: 20px 16px;
    overflow: hidden;
}

.mock-header {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mock-score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.mock-score-ring {
    width: 100px;
    height: 100px;
    position: relative;
}

.mock-score-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.mock-score-ring circle {
    fill: none;
    stroke-width: 6;
}

.mock-ring-bg {
    stroke: rgba(255,255,255,0.1);
}

.mock-ring-progress {
    stroke: url(#heroScoreGradient);
    stroke: #ff0080;
    stroke-linecap: round;
    stroke-dasharray: 201;
    stroke-dashoffset: 56;
    filter: drop-shadow(0 0 8px rgba(255,0,128,0.5));
}

.mock-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 800;
    color: #fff;
}

.mock-score-label {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mock-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.mock-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}

.mock-stat i {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
}

.mock-stat.good i {
    background: rgba(34,197,94,0.2);
    color: #22c55e;
}

.mock-stat.bad i {
    background: rgba(239,68,68,0.2);
    color: #ef4444;
}

.mock-stat.warn i {
    background: rgba(251,191,36,0.2);
    color: #fbbf24;
}

.mock-cta {
    text-align: center;
    padding: 12px;
    background: linear-gradient(135deg, rgba(255,0,128,0.2), rgba(121,40,202,0.2));
    border: 1px solid rgba(255,0,128,0.3);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #ff0080;
}

/* Floating Elements */
.floating-heart {
    position: absolute;
    font-size: 24px;
    animation: floatAround 6s ease-in-out infinite;
    opacity: 0.6;
}

.float-1 {
    top: 20%;
    right: -30px;
    color: #fe3c72;
    animation-delay: 0s;
}

.float-2 {
    top: 50%;
    right: -40px;
    color: #ffc629;
    animation-delay: 2s;
}

.float-3 {
    bottom: 20%;
    right: -25px;
    color: #ff0080;
    animation-delay: 4s;
}

@keyframes floatAround {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
        opacity: 0.6;
    }
    50% { 
        transform: translateY(-20px) rotate(15deg); 
        opacity: 1;
    }
}

/* ========================================
   HOW IT WORKS SECTION
   ======================================== */
.how-it-works-section {
    padding: 80px 20px;
    position: relative;
    z-index: 1;
}

.section-title-main {
    text-align: center;
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.section-subtitle-main {
    text-align: center;
    font-size: 16px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 60px;
}

.steps-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.step-card {
    flex: 1;
    min-width: 260px;
    max-width: 300px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 40px 28px 32px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.step-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,0,128,0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.step-number {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255,0,128,0.4);
}

.step-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(255,0,128,0.15), rgba(121,40,202,0.15));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 28px;
    color: #ff0080;
    border: 1px solid rgba(255,0,128,0.2);
}

.step-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.step-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 900px) {
    .hero-content-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }
    
    .hero-text-side {
        max-width: 100%;
    }
    
    .hero-trust-row {
        justify-content: center;
    }
    
    .app-logos {
        justify-content: center;
    }
    
    .hero-phone-side {
        flex: none;
    }
    
    .phone-mockup {
        width: 240px;
        height: 480px;
    }
    
    .floating-heart {
        display: none;
    }
}

@media (max-width: 600px) {
    .hero-dating {
        padding: 80px 16px 40px;
    }
    
    .hero-trust-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .app-logos {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .hero-cta-btn {
        padding: 16px 36px;
        font-size: 16px;
    }
    
    .phone-mockup {
        width: 220px;
        height: 440px;
    }
    
    .steps-container {
        flex-direction: column;
        align-items: center;
    }
    
    .step-card {
        max-width: 100%;
    }
}
/* ========================================
   HERO SECTION - NEW DESIGN
   ======================================== */

.hero-dating {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.hero-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    gap: 80px;
}

.hero-text-side {
    flex: 1;
    max-width: 550px;
}

.hero-badge-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255,0,128,0.15), rgba(121,40,202,0.15));
    border: 1px solid rgba(255,0,128,0.3);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 24px;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255,0,128,0.2); }
    50% { box-shadow: 0 0 35px rgba(255,0,128,0.5); }
}

.hero-badge-new i { color: #ff0080; }

.hero-title-main {
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}

.hero-title-gradient {
    display: block;
    background: linear-gradient(90deg, #ff0080, #00ffff, #ff0080);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.hero-subtitle {
    font-size: 17px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 32px;
    line-height: 1.7;
}

.hero-cta-btn {
    padding: 18px 48px;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(255,0,128,0.4);
    position: relative;
    overflow: hidden;
    font-family: 'Space Grotesk', sans-serif;
}

.hero-cta-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 45px rgba(255,0,128,0.5);
}

.hero-trust-row {
    display: flex;
    gap: 20px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

.trust-item i { color: #22c55e; }

.app-logos {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.app-logo-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    padding: 8px 14px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}

.app-logo-item.tinder i { color: #fe3c72; }
.app-logo-item.bumble i { color: #ffc629; }
.app-logo-item.hinge i { color: #ec5f84; }

/* ========================================
   TINDER CARD MOCKUP
   ======================================== */

.hero-visual-side {
    position: relative;
    flex: 0 0 340px;
}

.tinder-card-demo {
    width: 300px;
    height: 420px;
    background: linear-gradient(165deg, #1e1e2e, #151521);
    border-radius: 20px;
    position: relative;
    box-shadow: 
        0 25px 80px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.08);
    overflow: hidden;
    animation: cardFloat 4s ease-in-out infinite;
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-12px) rotate(0deg); }
}

.swipe-indicator {
    position: absolute;
    top: 30px;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 3px;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8);
}

.swipe-indicator.nope {
    left: 20px;
    border: 4px solid #ff4458;
    color: #ff4458;
    transform: rotate(-20deg);
    animation: showNope 4s ease-in-out infinite;
}

.swipe-indicator.like {
    right: 20px;
    border: 4px solid #4cd964;
    color: #4cd964;
    transform: rotate(20deg);
    animation: showLike 4s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes showNope {
    0%, 40%, 100% { opacity: 0; transform: rotate(-20deg) scale(0.8); }
    45%, 55% { opacity: 1; transform: rotate(-20deg) scale(1); }
}

@keyframes showLike {
    0%, 40%, 100% { opacity: 0; transform: rotate(20deg) scale(0.8); }
    45%, 55% { opacity: 1; transform: rotate(20deg) scale(1); }
}

.card-photo {
    height: 100%;
    position: relative;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a28 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,0.3);
}

.photo-placeholder i {
    font-size: 64px;
    opacity: 0.5;
}

.photo-placeholder span {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.card-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
}

.card-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 5;
}

.card-name {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.card-detail {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Analysis Overlay */
.analysis-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    animation: overlayPulse 6s ease-in-out infinite;
}

@keyframes overlayPulse {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 0.85; }
}

.analysis-scanning {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff0080, #00ffff, transparent);
    box-shadow: 0 0 20px #ff0080;
    animation: scanMove 2.5s ease-in-out infinite;
}

@keyframes scanMove {
    0%, 100% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.analysis-results {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    font-size: 14px;
    color: #fff;
    animation: resultSlide 0.5s ease-out forwards;
    opacity: 0;
    transform: translateX(-20px);
}

.result-item:nth-child(1) { animation-delay: 0.5s; }
.result-item:nth-child(2) { animation-delay: 1s; }
.result-item:nth-child(3) { animation-delay: 1.5s; }

@keyframes resultSlide {
    to { opacity: 1; transform: translateX(0); }
}

.result-item i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
}

.result-item.bad i {
    background: rgba(255,68,88,0.2);
    color: #ff4458;
}

.result-item.good i {
    background: rgba(76,217,100,0.2);
    color: #4cd964;
}

.card-score-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    padding: 10px 16px;
    border-radius: 12px;
    z-index: 15;
    display: flex;
    align-items: baseline;
    gap: 2px;
    box-shadow: 0 8px 25px rgba(255,0,128,0.4);
}

.score-num {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
}

.score-max {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
}

/* AI Chat Bubble */
.ai-chat-bubble {
    position: absolute;
    bottom: -30px;
    left: -40px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: bubbleFloat 3s ease-in-out infinite;
}

@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.chat-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 8px 25px rgba(255,0,128,0.3);
}

.chat-content {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 14px 18px;
    border-radius: 18px 18px 18px 4px;
    max-width: 220px;
}

.chat-content p {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.chat-typing {
    display: flex;
    gap: 4px;
}

.chat-typing span {
    width: 6px;
    height: 6px;
    background: #ff0080;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* ========================================
   BEFORE / AFTER SECTION
   ======================================== */

.before-after-section {
    padding: 100px 20px;
    position: relative;
    z-index: 1;
}

.section-title-main {
    text-align: center;
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.section-subtitle-main {
    text-align: center;
    font-size: 16px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 60px;
}

.before-after-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.comparison-card {
    text-align: center;
}

.comparison-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 16px;
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-block;
}

.comparison-card.before .comparison-label {
    background: rgba(255,68,88,0.15);
    color: #ff4458;
}

.comparison-card.after .comparison-label {
    background: rgba(76,217,100,0.15);
    color: #4cd964;
}

.mini-phone {
    width: 180px;
    background: linear-gradient(165deg, #1e1e2e, #151521);
    border-radius: 24px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
}

.mini-phone.glow {
    box-shadow: 0 0 40px rgba(76,217,100,0.2);
    border-color: rgba(76,217,100,0.3);
}

.mini-screen {
    background: rgba(0,0,0,0.3);
    border-radius: 16px;
    padding: 20px 16px;
}

.mini-score {
    font-size: 48px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 16px;
}

.mini-score.bad { color: #ff4458; }
.mini-score.good { color: #4cd964; }

.mini-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}

.mini-stat i { color: #ff0080; font-size: 12px; }
.mini-stat small { color: rgba(255,255,255,0.4); font-size: 10px; }

.mini-issues, .mini-wins {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mini-issues span, .mini-wins span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.mini-issues span { color: rgba(255,68,88,0.9); }
.mini-issues i { color: #ff4458; }

.mini-wins span { color: rgba(76,217,100,0.9); }
.mini-wins i { color: #4cd964; }

.comparison-arrow {
    font-size: 32px;
    color: rgba(255,255,255,0.3);
    animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.3; }
    50% { transform: translateX(10px); opacity: 1; }
}

.boost-stat {
    text-align: center;
    margin-top: 50px;
}

.boost-number {
    font-size: 64px;
    font-weight: 800;
    background: linear-gradient(135deg, #4cd964, #00ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.boost-text {
    font-size: 16px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ========================================
   HOW IT WORKS - TIMELINE
   ======================================== */

.how-it-works-section {
    padding: 100px 20px;
    position: relative;
    z-index: 1;
}

.timeline-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.timeline-line {
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #ff0080, #7928ca, #00ffff);
    opacity: 0.3;
}

.timeline-step {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 50px;
    position: relative;
}

.timeline-step:last-child { margin-bottom: 0; }

.timeline-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(255,0,128,0.2), rgba(121,40,202,0.2));
    border: 2px solid rgba(255,0,128,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ff0080;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background-color: #0f0f1a;
}

.timeline-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}

/* ========================================
   FINAL CTA SECTION
   ======================================== */

.final-cta-section {
    padding: 100px 20px;
    position: relative;
    z-index: 1;
}

.final-cta-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(135deg, rgba(255,0,128,0.1), rgba(121,40,202,0.1));
    border: 1px solid rgba(255,0,128,0.2);
    border-radius: 32px;
    padding: 60px 40px;
}

.final-cta-content h2 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.final-cta-content > p {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 32px;
}

.final-cta-note {
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 900px) {
    .hero-content-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 60px;
    }
    
    .hero-text-side { max-width: 100%; }
    .hero-trust-row, .app-logos { justify-content: center; }
    .hero-visual-side { flex: none; }
    
    .ai-chat-bubble {
        left: 50%;
        transform: translateX(-50%);
        bottom: -50px;
    }
    
    .comparison-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 600px) {
    .hero-dating { padding: 80px 16px 60px; }
    .hero-trust-row { flex-direction: column; gap: 10px; }
    .app-logos { flex-wrap: wrap; justify-content: center; }
    .hero-cta-btn { padding: 16px 32px; font-size: 16px; }
    
    .tinder-card-demo {
        width: 260px;
        height: 360px;
    }
    
    .before-after-container {
        flex-direction: column;
    }
    
    .comparison-arrow {
        transform: rotate(90deg);
    }
    
    .final-cta-content {
        padding: 40px 24px;
    }
    
    .boost-number { font-size: 48px; }
}
/* ========================================
   PROOF SECTION - NOTIFICATION STYLE
   ======================================== */

.proof-section {
    padding: 100px 20px;
    position: relative;
    z-index: 1;
}

.proof-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.proof-phone {
    text-align: center;
}

.proof-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 16px;
    padding: 8px 20px;
    border-radius: 20px;
    display: inline-block;
}

.proof-phone.before .proof-label {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}

.proof-phone.after .proof-label {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}

.phone-frame {
    width: 220px;
    background: linear-gradient(165deg, #1a1a2e, #0f0f1a);
    border-radius: 32px;
    padding: 12px;
    border: 2px solid rgba(255,255,255,0.08);
    position: relative;
}

.phone-frame.glow {
    border-color: rgba(34,197,94,0.4);
    box-shadow: 
        0 0 60px rgba(34,197,94,0.2),
        0 20px 60px rgba(0,0,0,0.4);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(34,197,94,0.2), 0 20px 60px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 60px rgba(34,197,94,0.35), 0 20px 60px rgba(0,0,0,0.4); }
}

.phone-notch-small {
    width: 80px;
    height: 24px;
    background: #0a0a14;
    border-radius: 0 0 16px 16px;
    margin: 0 auto 12px;
}

.phone-content {
    background: linear-gradient(180deg, #0d0d18, #151525);
    border-radius: 20px;
    padding: 20px 14px;
    min-height: 280px;
}

.phone-content.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state {
    text-align: center;
    margin-bottom: 24px;
}

.empty-state i {
    font-size: 48px;
    color: rgba(255,255,255,0.2);
    margin-bottom: 12px;
    display: block;
}

.empty-state span {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
}

.stats-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.stat-box {
    text-align: center;
}

.stat-num {
    font-size: 24px;
    font-weight: 800;
    display: block;
}

.stat-num.zero { color: rgba(255,255,255,0.3); }
.stat-num.good { color: #22c55e; }

.stat-label {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sad-text {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    font-style: italic;
    margin-top: 8px;
}

/* Notifications */
.phone-content.active {
    padding: 16px 10px;
}

.notification {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    animation: slideIn 0.5s ease-out forwards;
    opacity: 0;
    transform: translateX(-20px);
}

.notification.n1 { animation-delay: 0.2s; }
.notification.n2 { animation-delay: 0.5s; }
.notification.n3 { animation-delay: 0.8s; }

@keyframes slideIn {
    to { opacity: 1; transform: translateX(0); }
}

.notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.notif-icon.tinder { background: #fe3c72; color: #fff; }
.notif-icon.bumble { background: #ffc629; color: #000; }
.notif-icon.hinge { background: #ec5f84; color: #fff; }

.notif-text {
    text-align: left;
    line-height: 1.3;
}

.notif-text strong {
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    display: block;
}

.notif-text span {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

/* Floating Hearts */
.floating-hearts {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.floating-hearts i {
    position: absolute;
    color: #ff0080;
    animation: floatUp 3s ease-in-out infinite;
    opacity: 0;
}

.floating-hearts .h1 { left: 20%; font-size: 16px; animation-delay: 0s; }
.floating-hearts .h2 { left: 50%; font-size: 12px; animation-delay: 1s; }
.floating-hearts .h3 { left: 75%; font-size: 14px; animation-delay: 2s; }

@keyframes floatUp {
    0% { bottom: 0; opacity: 0; transform: scale(0.5); }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { bottom: 100%; opacity: 0; transform: scale(1); }
}

.proof-arrow {
    font-size: 28px;
    color: rgba(255,255,255,0.3);
    animation: arrowBounce 1.5s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); opacity: 0.3; }
    50% { transform: translateX(10px); opacity: 0.8; }
}

/* ========================================
   HOW IT WORKS - CENTERED STEPS
   ======================================== */

.steps-centered {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.step-item {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    text-align: center;
    padding: 20px;
}

.step-icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.step-num {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(255,0,128,0.4);
}

.step-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(255,0,128,0.12), rgba(121,40,202,0.12));
    border: 2px solid rgba(255,0,128,0.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #ff0080;
}

.step-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.step-item p {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
}

.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.2);
    font-size: 20px;
    padding-top: 40px;
}

/* ========================================
   RESPONSIVE - PROOF & STEPS
   ======================================== */

@media (max-width: 768px) {
    .proof-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .proof-arrow {
        transform: rotate(90deg);
    }
    
    .steps-centered {
        flex-direction: column;
        align-items: center;
    }
    
    .step-connector {
        transform: rotate(90deg);
        padding: 10px 0;
    }
    
    .step-item {
        max-width: 100%;
    }
}

/* ========================================
   AI CHAT BUBBLE - HIDE
   ======================================== */
.ai-chat-bubble {
    display: none;
}

/* ========================================
   HOW IT WORKS - HORIZONTAL COMPACT
   ======================================== */

.how-it-works-horizontal {
    padding: 40px 20px 60px;
    position: relative;
    z-index: 1;
}

.steps-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.step-compact {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 16px 24px;
    transition: all 0.3s ease;
}

.step-compact:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,0,128,0.3);
    transform: translateY(-2px);
}

.step-icon-small {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(255,0,128,0.15), rgba(121,40,202,0.15));
    border: 1px solid rgba(255,0,128,0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ff0080;
    flex-shrink: 0;
}

.step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.step-num-inline {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
}

.step-text strong {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
}

.step-arrow {
    color: rgba(255,255,255,0.2);
    font-size: 16px;
}

@media (max-width: 768px) {
    .steps-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .step-arrow {
        transform: rotate(90deg);
    }
    
    .step-compact {
        width: 100%;
        max-width: 300px;
        justify-content: flex-start;
    }
}
/* ========================================
   HERO - CLEAN & FOCUSED
   ======================================== */

.hero-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Sol Taraf - İçerik */
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.value-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
    border: 1px solid rgba(34,197,94,0.3);
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #22c55e;
    width: fit-content;
}

.value-badge i {
    font-size: 16px;
}

.hero-headline {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.hero-headline .highlight {
    display: block;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
    max-width: 480px;
}

/* CTA Button */
.cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 36px;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(255,0,128,0.4);
    width: fit-content;
    font-family: 'Space Grotesk', sans-serif;
}

.cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255,0,128,0.5);
}

.cta-primary i {
    font-size: 20px;
}

.cta-subtext {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

/* Desteklenen Uygulamalar */
.supported-apps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.supported-apps > span {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.app-icons {
    display: flex;
    gap: 12px;
}

.app-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.app-icon.tinder i { color: #fe3c72; }
.app-icon.bumble i { color: #ffc629; }
.app-icon.hinge i { color: #ec5f84; }

/* Sağ Taraf - Önizleme */
.hero-preview {
    display: flex;
    justify-content: center;
}

.preview-card {
    width: 320px;
    background: linear-gradient(165deg, rgba(30,30,50,0.9), rgba(20,20,35,0.95));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 20px;
}

.preview-header i {
    color: #fe3c72;
    font-size: 20px;
}

.preview-header span {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.preview-score {
    text-align: center;
    margin-bottom: 24px;
}

.score-circle {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,0,128,0.1), rgba(121,40,202,0.1));
    border: 3px solid;
    border-color: #ff0080;
    margin-bottom: 8px;
}

.score-number {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
}

.score-max {
    font-size: 18px;
    color: rgba(255,255,255,0.4);
}

.score-label {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preview-insights {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.insight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}

.insight i {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
}

.insight.good i {
    background: rgba(34,197,94,0.2);
    color: #22c55e;
}

.insight.bad i {
    background: rgba(239,68,68,0.2);
    color: #ef4444;
}

.preview-boost {
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
}

.preview-boost span {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    display: block;
    margin-bottom: 4px;
}

.preview-boost strong {
    font-size: 18px;
    color: #22c55e;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }
    
    .hero-content {
        align-items: center;
    }
    
    .hero-description {
        max-width: 100%;
    }
    
    .value-badge {
        margin: 0 auto;
    }
    
    .supported-apps {
        align-items: center;
    }
    
    .app-icons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .preview-card {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .hero-main {
        padding: 80px 16px 40px;
    }
    
    .cta-primary {
        width: 100%;
        padding: 16px 24px;
    }
    
    .app-icons {
        gap: 8px;
    }
    
    .app-icon {
        padding: 6px 10px;
        font-size: 12px;
    }
}
/* ========================================
   HERO - V2 CLEAN
   ======================================== */

.hero-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 20px 60px;
    position: relative;
    z-index: 1;
}

.hero-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-headline {
    font-size: clamp(28px, 4.5vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.hero-headline .highlight {
    display: block;
    color: #22c55e;
}

.hero-description {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,0.65);
}

.cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 40px;
    font-size: 17px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(255,0,128,0.35);
    width: fit-content;
    font-family: 'Space Grotesk', sans-serif;
}

.cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255,0,128,0.45);
}

.trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.trust-point {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
}

.trust-point i {
    color: #22c55e;
    font-size: 12px;
}

/* Sağ Taraf - Telefon ve Bildirimler */
.hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.phone-mockup {
    width: 280px;
    height: 500px;
    background: linear-gradient(165deg, #1a1a2e, #0f0f1a);
    border-radius: 36px;
    padding: 10px;
    box-shadow: 
        0 40px 80px rgba(0,0,0,0.5),
        inset 0 0 0 2px rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1e1e2e, #12121c);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    padding: 50px 12px 20px;
}

.phone-screen::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 24px;
    background: #0a0a14;
    border-radius: 12px;
}

.notification-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notif {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 14px;
    animation: slideInNotif 0.5s ease-out forwards;
    opacity: 0;
    transform: translateX(-30px);
}

.notif-1 { animation-delay: 0.2s; }
.notif-2 { animation-delay: 0.5s; }
.notif-3 { animation-delay: 0.8s; }
.notif-4 { animation-delay: 1.1s; }
.notif-5 { animation-delay: 1.4s; }

@keyframes slideInNotif {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.notif-icon.tinder {
    background: linear-gradient(135deg, #fd5068, #e8304a);
    color: #fff;
}

.notif-icon.bumble {
    background: linear-gradient(135deg, #ffc629, #f5b800);
    color: #000;
}

.notif-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.notif-content strong {
    font-size: 13px;
    color: #fff;
}

.notif-content span {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screen-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, rgba(18,18,28,0.95));
    pointer-events: none;
}

.visual-caption {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }
    
    .hero-content {
        align-items: center;
    }
    
    .trust-points {
        justify-content: center;
    }
    
    .phone-mockup {
        width: 260px;
        height: 460px;
    }
}

@media (max-width: 480px) {
    .hero-main {
        padding: 80px 16px 40px;
    }
    
    .cta-primary {
        width: 100%;
    }
    
    .trust-points {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .phone-mockup {
        width: 240px;
        height: 420px;
    }
}

/* =============================================================
   🪄 FOTO MODAL — TASARIM REVİZYONU 2026.06
   Tech/magical feel · kompakt score · mobil-first
   Override-only blok; mevcut kurallar dokunulmadı.
   ============================================================= */

.foto-modal {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 107, 157, 0.18), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(82, 169, 255, 0.10), transparent 50%),
    linear-gradient(145deg, #14141f 0%, #08080f 100%) !important;
  border: 1px solid rgba(255, 107, 157, 0.28) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.85),
    0 0 80px rgba(255, 107, 157, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  border-radius: 22px !important;
}

.foto-modal-header {
  background: linear-gradient(90deg, rgba(255, 107, 157, 0.14), rgba(255, 107, 157, 0.02) 70%, transparent) !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid rgba(255, 107, 157, 0.12) !important;
}

.foto-modal-title h3 {
  font-size: 15px !important;
  letter-spacing: 0.3px;
  font-weight: 600 !important;
}

.foto-modal-badge {
  padding: 5px 12px !important;
  font-size: 10.5px !important;
  letter-spacing: 1px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.foto-modal-body {
  padding: 22px !important;
  gap: 22px !important;
}

/* Sol kolon — score'a overlay zemini */
.foto-modal-left {
  position: relative !important;
  flex: 0 0 320px !important;
}

/* Fotoğraf — TAM SIĞSIN, kırpılma yok */
.foto-modal-image {
  width: 100% !important;
  height: auto !important;
  max-height: 440px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #000 !important;
  border: 1px solid rgba(255, 107, 157, 0.32) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 28px rgba(255, 107, 157, 0.12) !important;
}

/* Puan — koca blok DEĞİL, fotonun sağ-üst köşesinde glow'lu pill */
.foto-modal-puan {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  padding: 8px 14px !important;
  background: rgba(10, 10, 18, 0.78) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  border: 1.5px solid rgba(255, 107, 157, 0.55) !important;
  border-radius: 999px !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(255, 107, 157, 0.30) !important;
  text-align: left !important;
  margin: 0 !important;
  animation: ratSelf_scorePulse 2.6s ease-in-out infinite;
  z-index: 5;
}

@keyframes ratSelf_scorePulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 18px rgba(255,107,157,0.25); }
  50% { box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 32px rgba(255,107,157,0.50); }
}

.foto-modal-puan-num {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 0 12px currentColor;
}

.foto-modal-puan-label {
  font-size: 9.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

/* Modal section başlığı — neon etiket */
.foto-modal-right .modal-section-title {
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  font-size: 10.5px !important;
  color: #FF6B9D !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  opacity: 0.95;
}

.foto-modal-right .modal-section-title i {
  font-size: 11px !important;
  opacity: 0.9;
}

/* Bu Karedeki Kişi — AI "düşünüyor" akan çizgi */
.kisi-okuma-box {
  position: relative !important;
  background:
    linear-gradient(135deg, rgba(255, 107, 157, 0.12), rgba(155, 89, 217, 0.07) 50%, rgba(82, 169, 255, 0.08)) !important;
  border-left: 3px solid #FF6B9D !important;
  padding: 18px 20px !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(255, 107, 157, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.kisi-okuma-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, #FF6B9D, #9B59D9, #52A9FF, transparent);
  animation: ratSelf_scanLine 3.2s linear infinite;
}

@keyframes ratSelf_scanLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Teknik kart — glassmorphism, gradient bar, glow */
.foto-modal-right .teknik-grid {
  gap: 8px !important;
}

.foto-modal-right .teknik-item {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 11px 13px !important;
  border-radius: 10px !important;
  transition: all 0.22s ease;
}

.foto-modal-right .teknik-item:hover {
  background: rgba(255, 107, 157, 0.08) !important;
  border-color: rgba(255, 107, 157, 0.28) !important;
  transform: translateY(-1px);
}

.foto-modal-right .teknik-item-bar {
  height: 5px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 999px !important;
  overflow: hidden;
}

.foto-modal-right .teknik-item-bar-fill {
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  border-radius: 999px !important;
}

.foto-modal-right .teknik-item-bar-fill.high {
  background: linear-gradient(90deg, #2ea44f, #4cd964) !important;
  box-shadow: 0 0 10px rgba(76, 217, 100, 0.55);
}
.foto-modal-right .teknik-item-bar-fill.mid {
  background: linear-gradient(90deg, #f5a623, #ffcc00) !important;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.55);
}
.foto-modal-right .teknik-item-bar-fill.low {
  background: linear-gradient(90deg, #d63848, #ff4458) !important;
  box-shadow: 0 0 10px rgba(255, 68, 88, 0.55);
}

/* Dating chip — minimal */
.foto-modal-right .dating-grid {
  gap: 8px !important;
}

.foto-modal-right .dating-item {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 11px 13px !important;
  border-radius: 10px !important;
  transition: all 0.22s ease;
}

.foto-modal-right .dating-item:hover {
  background: rgba(255, 107, 157, 0.06) !important;
  border-color: rgba(255, 107, 157, 0.22) !important;
}

/* Yönler — renk imzası net */
.foto-modal-right .yonler-container {
  gap: 12px !important;
}

.foto-modal-right .yonler-box {
  padding: 14px !important;
  border-radius: 12px !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.foto-modal-right .yonler-box.guclu {
  background: linear-gradient(135deg, rgba(76, 217, 100, 0.06), rgba(76, 217, 100, 0.02)) !important;
  border: 1px solid rgba(76, 217, 100, 0.22) !important;
}

.foto-modal-right .yonler-box.zayif {
  background: linear-gradient(135deg, rgba(255, 68, 88, 0.06), rgba(255, 68, 88, 0.02)) !important;
  border: 1px solid rgba(255, 68, 88, 0.22) !important;
}

.foto-modal-right .yonler-list li {
  font-size: 13px !important;
  padding: 7px 0 !important;
  line-height: 1.55 !important;
}

/* Öneriler — hover'da kayar, magnetik */
.foto-modal-right .oneri-item {
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.06), rgba(255, 204, 0, 0.02)) !important;
  border: 1px solid rgba(255, 204, 0, 0.22) !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.foto-modal-right .oneri-item:hover {
  transform: translateX(3px);
  box-shadow: -4px 0 0 0 rgba(255, 204, 0, 0.5);
}

/* MOBİL — score yine overlay (yer çalmaz), her şey dar */
@media (max-width: 768px) {
  .foto-modal-overlay {
    padding: 8px !important;
    align-items: flex-start !important;
  }

  .foto-modal {
    border-radius: 18px !important;
    max-height: 96vh !important;
    margin-top: 10px;
  }

  .foto-modal-header {
    padding: 14px 16px !important;
  }

  .foto-modal-title h3 {
    font-size: 14px !important;
  }

  .foto-modal-body {
    padding: 14px !important;
    gap: 16px !important;
  }

  .foto-modal-left {
    flex: none !important;
    width: 100% !important;
  }

  .foto-modal-image {
    max-height: 340px !important;
  }

  .foto-modal-puan {
    top: 10px !important;
    right: 10px !important;
    padding: 6px 12px !important;
  }

  .foto-modal-puan-num {
    font-size: 19px !important;
  }

  .foto-modal-puan-label {
    font-size: 9px !important;
  }

  .foto-modal-right .teknik-grid,
  .foto-modal-right .dating-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .foto-modal-right .yonler-container {
    grid-template-columns: 1fr !important;
  }

  .kisi-okuma-box {
    font-size: 13.5px !important;
    padding: 15px 16px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 420px) {
  .foto-modal-right .teknik-grid,
  .foto-modal-right .dating-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   ✨ VISION PROFILE — 2026.06
   "Profilinin Gelecek Hali" CTA + loading overlay + result screen
   ============================================================= */

/* CTA SECTION (sonuç sayfasının sonuna enjekte edilir) */
.vp-cta-section {
  margin: 28px 16px 32px;
  padding: 0;
}

.vp-cta-card {
  position: relative;
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 107, 157, 0.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(82, 169, 255, 0.14), transparent 50%),
    linear-gradient(145deg, #1a1428 0%, #0a0814 100%);
  border: 1.5px solid rgba(255, 107, 157, 0.3);
  border-radius: 22px;
  padding: 28px 24px 24px;
  text-align: center;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(255, 107, 157, 0.12);
}

.vp-cta-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #FF6B9D, #9B59D9, #52A9FF, transparent);
  animation: vp_scanLine 3s linear infinite;
}

@keyframes vp_scanLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.vp-cta-badge {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: #FF6B9D;
  background: rgba(255, 107, 157, 0.12);
  border: 1px solid rgba(255, 107, 157, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.vp-cta-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.2px;
}
.vp-cta-title i { color: #FF6B9D; font-size: 22px; }

.vp-cta-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.vp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #FF6B9D 0%, #9B59D9 100%);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(255, 107, 157, 0.35);
}
.vp-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 107, 157, 0.5);
}
.vp-cta-btn i { font-size: 14px; }

.vp-cta-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 14px;
  letter-spacing: 0.5px;
}

/* LOADING OVERLAY */
.vp-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 16, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vp-loading-overlay.active { display: flex; }

.vp-loading-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: 40px 28px;
}

.vp-loading-rings {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 28px;
}
.vp-ring {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: #FF6B9D;
  border-radius: 50%;
  animation: vp_spin 1.4s linear infinite;
}
.vp-ring-2 {
  inset: 12px;
  border-top-color: #9B59D9;
  animation-duration: 1.8s;
  animation-direction: reverse;
}
.vp-ring-3 {
  inset: 24px;
  border-top-color: #52A9FF;
  animation-duration: 2.2s;
}
@keyframes vp_spin {
  to { transform: rotate(360deg); }
}

.vp-loading-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.vp-loading-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 24px;
}

.vp-loading-progress {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}

.vp-loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF6B9D, #9B59D9, #52A9FF);
  border-radius: 999px;
  transition: width 0.5s ease;
  box-shadow: 0 0 12px rgba(255, 107, 157, 0.5);
}

.vp-loading-step {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
  min-height: 16px;
}

/* =============================================================
   ✨ VISION PROFILE — TINDER KART (final, demo onaylandı)
   Pure Tinder profile preview — fullbleed, halo arka plan, reveal animasyonu
   ============================================================= */

.vp-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Result kontainer — fullbleed sahne */
.vp-result-screen.vp-result--tinder {
  position: fixed; inset: 0;
  background: #07060A;
  z-index: 99997;
  display: none;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.vp-result-screen.vp-result--tinder.active { display: flex; }

/* SAHNE + HALO */
.vp-result--tinder .vp-stage { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.vp-result--tinder .vp-stage__halo {
  position: absolute; inset: -25%;
  background: conic-gradient(from 0deg, #FF3C72 0%, #B14CFF 33%, #00E5FF 66%, #FF3C72 100%);
  filter: blur(80px); opacity: 0.35;
  transform: scale(1.6);
  animation: vp-halo-rotate 22s linear infinite;
}
@keyframes vp-halo-rotate { to { transform: scale(1.6) rotate(360deg); } }
.vp-result--tinder .vp-stage__noise {
  position: absolute; inset: 0; opacity: 0.04; mix-blend-mode: overlay;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* REVEAL ANIMASYONU */
.vp-result--tinder .vp-reveal { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.vp-result--tinder .vp-reveal[data-state="done"] { display: none; }
.vp-result--tinder .vp-reveal__scan {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #FF3C72, transparent);
  filter: blur(8px); box-shadow: 0 0 30px #FF3C72;
  animation: vp-reveal-scan 800ms ease-out 200ms forwards;
}
@keyframes vp-reveal-scan {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}
.vp-result--tinder .vp-reveal__particles { position: absolute; inset: 0; }
.vp-result--tinder .vp-reveal__particles span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #FF3C72; opacity: 0; box-shadow: 0 0 8px #FF3C72;
  animation: vp-reveal-particle 1.4s ease-out 400ms forwards;
}
@keyframes vp-reveal-particle {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) scale(1.2); }
}

/* TINDER KART — fullbleed mobil, desktop ortali
   Not: opacity: 1 default (gorunur). Reveal sirasinda .is-revealing class'i 0'dan basa.
   Bounce class'i sadece transform'a dokunur, opacity 1 kalir. */
.vp-result--tinder .vp-card {
  position: relative; width: 100vw; height: 100dvh; background: #000;
  overflow: hidden; user-select: none; -webkit-user-select: none;
  z-index: 1;
  opacity: 1;
}
.vp-result--tinder .vp-card.is-revealing {
  opacity: 0;
  animation: vp-card-enter 600ms cubic-bezier(.2,0,0,1) 900ms forwards;
}
@keyframes vp-card-enter {
  from { opacity: 0; transform: scale(.96); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@media (min-width: 768px) {
  .vp-result--tinder .vp-card {
    width: 420px; height: min(92dvh, 750px); aspect-ratio: 9/16;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(255,80,140,.12), 0 0 0 1px rgba(255,255,255,.04);
  }
}

/* Segment bar (Tinder gibi N cizgi) */
.vp-result--tinder .vp-card__segments {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 8px; right: 8px;
  display: flex; gap: 4px; z-index: 5;
}
.vp-result--tinder .vp-card__seg {
  flex: 1 1 0; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.32);
  transition: background-color 180ms;
  cursor: pointer;
}
.vp-result--tinder .vp-card__seg.is-active { background: #fff; }

/* Foto stack — crossfade gecisi */
.vp-result--tinder .vp-card__photos { position: absolute; inset: 0; }
.vp-result--tinder .vp-card__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: 0; transition: opacity 220ms cubic-bezier(.4,0,.2,1);
}
.vp-result--tinder .vp-card__photo.is-active { opacity: 1; }

/* Tap zone (gorunmez) */
.vp-result--tinder .vp-card__tap {
  position: absolute; top: 0; bottom: 30%;
  background: transparent; border: none; cursor: pointer;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.vp-result--tinder .vp-card__tap--prev { left: 0; width: 35%; }
.vp-result--tinder .vp-card__tap--next { right: 0; width: 65%; }

/* Alt overlay — isim, yas, bio (Tinder native) */
.vp-result--tinder .vp-card__overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 22px calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.88) 100%);
  height: 42%;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
  z-index: 3;
}
.vp-result--tinder .vp-card__identity { pointer-events: auto; }
.vp-result--tinder .vp-card__name {
  font-size: clamp(28px, 7.6vw, 34px); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  margin: 0 0 8px;
}
.vp-result--tinder .vp-card__age { font-weight: 400; opacity: 0.92; }
.vp-result--tinder .vp-card__bio {
  font-size: clamp(15px, 4vw, 17px); font-weight: 400;
  line-height: 1.4; color: rgba(255,255,255,.94);
  margin: 8px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* Close chevron (Tinder profil kapama jesti) */
.vp-result--tinder .vp-card__close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 18px); left: 12px;
  width: 36px; height: 36px;
  padding: 6px;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: none; border-radius: 50%; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 6;
  transition: transform .2s, background .2s;
}
.vp-result--tinder .vp-card__close:hover {
  transform: scale(1.08);
  background: rgba(255,60,114,.4);
}

/* Sinirda bounce */
.vp-result--tinder .vp-card.bounce-left  { animation: vp-card-bounce-left  220ms ease; }
.vp-result--tinder .vp-card.bounce-right { animation: vp-card-bounce-right 220ms ease; }
@keyframes vp-card-bounce-left  { 50% { transform: translateX(-6px); } }
@keyframes vp-card-bounce-right { 50% { transform: translateX(6px); } }

/* Empty state */
.vp-result--tinder .vp-empty {
  position: relative; z-index: 1;
  text-align: center; padding: 80px 20px;
  color: rgba(255,255,255,0.6);
  max-width: 360px; margin: 0 auto;
}
.vp-result--tinder .vp-empty p { font-size: 15px; line-height: 1.5; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vp-result--tinder .vp-stage__halo { animation: none; }
  .vp-result--tinder .vp-reveal { display: none; }
  .vp-result--tinder .vp-card { opacity: 1; animation: none; }
}

/* ============================================
   Vision Profile — bas-tut ÖNCE/SONRA karsilastirma
   z-index duzeni: photos(1) < before(2) < overlay(3) < tap(4) < segments/badge(5) < compare/close(6)
   ============================================ */
.vp-result--tinder .vp-card__before {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
  z-index: 2;
}
.vp-result--tinder .vp-card.show-before .vp-card__before { opacity: 1; }

.vp-result--tinder .vp-card__beforebadge {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 26px);
  right: 14px;
  z-index: 5;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  background: rgba(0,0,0,.55); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
.vp-result--tinder .vp-card.show-before .vp-card__beforebadge { opacity: 1; }

.vp-result--tinder .vp-card__compare {
  position: absolute;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(0,0,0,.4); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  touch-action: none; /* bas-tut sirasinda scroll/swipe tetiklenmesin */
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background .15s ease;
}
.vp-result--tinder .vp-card__compare:active { transform: scale(.95); background: rgba(0,0,0,.6); }
.vp-result--tinder .vp-card__compare.is-hidden { display: none; }

/* Degisiklik rozeti — "Isik dengelendi" gibi tek cumle, ustte ortada */
.vp-result--tinder .vp-card__change {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 50%; transform: translateX(-50%);
  z-index: 5;
  max-width: 78%;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.45); color: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 500; line-height: 1.35;
  text-align: center;
  pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .16s ease;
}
.vp-result--tinder .vp-card__change.is-hidden { display: none; }
.vp-result--tinder .vp-card.show-before .vp-card__change { opacity: 0; }

/* (eski result/mockup CSS blokları silindi — yeni vp-result--tinder yapısı yukaridaki blokta) */

/* 🪪 Skor kartı butonu (2026-08-24) — en altta minik */
.tinder-results-v2 .rs-sharecard-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;padding:13px 18px;border-radius:13px;border:1px solid rgba(255,201,168,.4);background:rgba(255,201,168,.08);color:#ffc9a8;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,transform .15s}
.tinder-results-v2 .rs-sharecard-btn:hover{background:rgba(255,201,168,.14)}
.tinder-results-v2 .rs-sharecard-btn:active{transform:scale(.985)}
.tinder-results-v2 .rs-sharecard-btn:disabled{opacity:.7;cursor:default}
.tinder-results-v2 .rs-sharecard-btn small{font-weight:500;opacity:.7;font-size:11px}

/* 🪪 skor kartı mini butonu — sonuçların EN ALTINDA, sade */
.tinder-results-v2 .rs-sharecard-mini{display:block;margin:26px auto 8px;padding:9px 16px;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.55);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:color .2s,border-color .2s}
.tinder-results-v2 .rs-sharecard-mini:hover{color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.3)}
.tinder-results-v2 .rs-sharecard-mini:disabled{opacity:.6;cursor:default}