/* --- SİMOTAKSİ EMERALD & YELLOW GLASSMORPHISM --- */
/* Crisp White Background + Emerald Header + Yellow Glassmorphism Cards */

:root {
    --primary-yellow: #facc15;
    --primary-emerald: #10b981; 
    --primary-red: #ef4444;    
    
    --bg-light: #ffffff; /* PURE WHITE */
    --bg-alt: #f8fafc;
    
    /* Yellow Glassmorphism (Sarı Gropshirm) */
    --card-bg: rgba(250, 204, 21, 0.15); /* Yellow frosted */
    --card-border: rgba(250, 204, 21, 0.4);
    --card-shadow: 0 15px 40px rgba(250, 204, 21, 0.1);
    
    --text-main: #0f172a;
    --text-muted: #334155;
    
    --primary-gold: var(--primary-yellow);
    --gold-glow: rgba(250, 204, 21, 0.2);
    --primary: var(--primary-yellow);
    --red: var(--primary-red);
    --green: var(--primary-emerald);
    --dark: var(--bg-light);
    --bg: var(--bg-light);
    --bg-dark: var(--bg-light);
    --bg2: var(--bg-alt);
    --card: var(--card-bg);
    --border: var(--card-border);
    --border2: var(--card-border);
    --text: var(--text-main);
    --dim: var(--text-muted);
}

body, html {
    background-color: var(--bg-light) !important;
    background: var(--bg-light) !important;
    color: var(--text-main) !important;
}

/* Emerald Green Header (Zümrüt Yeşili) */
header {
    background: rgba(16, 185, 129, 0.95) !important; /* Zümrüt Yeşili */
    backdrop-filter: blur(20px) !important;
    border-bottom: 2px solid #059669 !important;
}
/* Header Texts & Links */
header .logo { color: #ffffff !important; font-weight: 900 !important; }
header .logo span.gold { color: #facc15 !important; }
header .nav-links a { color: #ffffff !important; font-weight: 700 !important; text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; }
header .nav-links a:hover { color: #facc15 !important; }

.top-bar {
    background: #064e3b !important;
    color: #ffffff !important;
    border-bottom: 1px solid #047857 !important;
}
.top-bar span { color: #ffffff !important; }

/* Yellow Glassmorphism Cards (Sarı Gropshirm) */
.card, .auth-card, .form-card, .sb-wrap, .modal-content, .feature-card, .val-card, .faq-item {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    color: var(--text-main) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
}

/* Hide ambient orbs entirely to keep the page BRIGHT and CLEAN */
.orb, .bg-orb, .orb-1, .orb-2, .orb-3 {
    display: none !important;
    opacity: 0 !important;
}

/* Fix heading colors inside cards */
.feature-card h3, .val-card .val-num, .faq-header h4, .form-title, .section-title, h1, h2, h3 {
    color: #0f172a !important;
}
.val-card .val-num {
    color: #b45309 !important; /* Darker yellow/orange for readability */
}
h1 .txt-gold {
    color: #d97706 !important;
}

/* Inputs & Form Elements */
.form-control, input, select, textarea {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(250, 204, 21, 0.5) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important; /* "Yazılar da belirgin" */
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.3) !important;
    background-color: #ffffff !important;
    outline: none !important;
}
select option {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
}

/* Form Labels & Small Text */
.form-group label, .form-subtitle, .val-lbl, .faq-content p, .footer-col p, .c-lbl {
    color: #334155 !important;
    font-weight: 700 !important; /* "Yazılar da belirgin" */
}

/* Beautiful Gradient Borders */
.gradient-border-top {
    position: relative;
    border-top: none !important;
}
.gradient-border-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--primary-emerald), var(--primary-yellow)) !important;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* Buttons */
.btn-submit, .auth-btn, .btn-gold, .btn-gray, .btn-login-nav, .sb-bal-btn, button.btn-togg-nav, .btn-primary {
    background: linear-gradient(135deg, var(--primary-emerald), #059669) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    border-radius: 10px !important;
    padding: 12px 24px !important;
}
.btn-submit:hover, .auth-btn:hover, .btn-gold:hover, .btn-gray:hover, .btn-login-nav:hover, .sb-bal-btn:hover, button.btn-togg-nav:hover, .btn-primary:hover {
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #facc15, #d97706) !important;
}

/* Gradients for Text */
.text-gradient {
    background: linear-gradient(90deg, #b45309, #047857) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

/* Active UI Elements */
.step.active .step-dot, .role-pill.active {
    background: var(--primary-yellow) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.4) !important;
    border-color: #d97706 !important;
    font-weight: 800 !important;
}
.role-pill {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid rgba(250, 204, 21, 0.3) !important;
    font-weight: 600 !important;
}

/* Links */
a {
    color: #b45309;
}
a:hover {
    color: #d97706;
}
.nav-links a, .footer-links a {
    font-weight: 700 !important;
}
footer {
    background: #ffffff !important;
    border-top: 2px solid rgba(250, 204, 21, 0.2) !important;
    color: var(--text-main) !important;
}

/* Modal */
#countryModal, .modal-overlay {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(15px) !important;
}

/* Fix footer link colors */
.footer-links a {
    color: #475569 !important;
}
.footer-links a:hover {
    color: #047857 !important;
}

/* Premium Icons */
.f-icon, .faq-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(250, 204, 21, 0.15)) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 12px !important;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1) !important;
    font-size: 24px !important;
    margin-bottom: 16px !important;
}

/* Beautiful hover for feature cards */
.feature-card:hover .f-icon {
    transform: scale(1.1) rotate(5deg) !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(250, 204, 21, 0.25)) !important;
    border-color: #059669 !important;
    transition: all 0.3s ease !important;
}
.f-icon, .feature-card {
    transition: all 0.3s ease !important;
}

/* Clean up borders on mobile */
@media (max-width: 600px) {
    .container {
        padding: 30px 15px 50px !important;
    }
}

/* Fix active tabs */
.role-tab.active {
    background: var(--primary-yellow) !important;
    color: #0f172a !important; /* Dark text for readability */
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.4) !important;
}

/* Fix Chrome Autofill turning black in light mode */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
}