:root {
    --primary: #8b5cf6;
    --primary-hover: #7c3aed;

    --card-bg-rgb: 25, 27, 40;
    --card-bg-inner-rgb: 40, 44, 60;
    --main-bg: #0b0d14;

    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.08);
    --shadow: 0 8px 32px rgba(0,0,0,0.3);

    --node-red: #ef4444;
    --node-yellow: #f59e0b;
    --node-green: #10b981;
    --node-blue: #3b82f6;
}

[data-theme="light"] {
    --card-bg-rgb: 255, 255, 255;
    --card-bg-inner-rgb: 240, 244, 248;
    --main-bg: #f4f6fa;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: rgba(0, 0, 0, 0.08);
    --shadow: 0 8px 32px rgba(0,0,0,0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background: var(--main-bg); color: var(--text-main); transition: 0.4s; overflow-x: hidden; }
main { margin-top: 100px; padding-bottom: 80px; position: relative; z-index: 10;}
.page { display: none; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page.active { display: block; animation: fadeIn 0.4s ease forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.highlight { color: var(--primary); }
.mt-20 { margin-top: 20px; }
.mt-15 { margin-top: 15px; }

/* GLOBAL BACKGROUND ORBS */
.global-bg-elements { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(130px); opacity: 0.25; animation: floatOrb 20s infinite alternate ease-in-out; }
.orb-1 { background: var(--primary); width: 45vw; height: 45vw; top: -10%; left: -10%; }
.orb-2 { background: var(--node-blue); width: 40vw; height: 40vw; bottom: -10%; right: -10%; animation-delay: -5s; }
.orb-3 { background: var(--node-green); width: 35vw; height: 35vw; top: 30%; left: 30%; animation-delay: -10s; }
[data-theme="light"] .orb { opacity: 0.15; }

@keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 80px) scale(1.1); } }

/* GLASSMORPHISM CARDS */
.glass-card {
    background: rgba(var(--card-bg-rgb), 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 20px;
}
.glass-card-inner {
    background: rgba(var(--card-bg-inner-rgb), 0.5);
    border: 1px solid var(--border);
    border-radius: 15px;
}
.glass-input {
    background: rgba(var(--card-bg-inner-rgb), 0.6);
    border: 1px solid var(--border);
    color: var(--text-main);
}
.glass-input:focus { border-color: var(--primary); background: rgba(var(--card-bg-inner-rgb), 0.8); }

.glass-btn {
    background: rgba(var(--card-bg-inner-rgb), 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
}

/* NAVBAR & CAPSULE NAV */
.navbar-wrapper {
    background: rgba(var(--card-bg-rgb), 0.75);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid var(--border);
    position: fixed; width: 100%; top: 0; z-index: 1000; transition: 0.4s;
}
.navbar-container { max-width: 1400px; margin: 0 auto; padding: 10px 40px; display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; font-weight: 700; font-size: 1.4rem; color: var(--primary); }
.nav-links { display: flex; list-style: none; gap: 10px; }

.capsule-nav a {
    text-decoration: none;
    background: rgba(var(--card-bg-inner-rgb), 0.4);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 20px;
    border-radius: 50px;
    display: block;
    backdrop-filter: blur(10px);
}
.capsule-nav a:hover {
    background: rgba(var(--card-bg-inner-rgb), 0.8);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-main);
    transform: translateY(-2px);
}
.capsule-nav a.active {
    background: rgba(139, 92, 246, 0.25);
    border-color: var(--primary);
    color: var(--text-main);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.navbar-actions { display: flex; align-items: center; gap: 20px; }
.theme-switch-wrapper { height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(var(--card-bg-inner-rgb), 0.6); border-radius: 30px; padding: 4px; border: 1px solid var(--border); }
.theme-switch { height: 26px; position: relative; width: 50px; display: inline-block; }
.theme-switch input { display: none; }
.slider { background-color: transparent; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 34px; }
.slider:before { background-color: white; bottom: 3px; content: ""; height: 20px; left: 4px; position: absolute; transition: .4s; width: 20px; border-radius: 50%; }
input:checked + .slider:before { transform: translateX(22px); }
.slider i { font-size: 11px; position: absolute; top: 7px; z-index: 1; }
.fa-sun { left: 7px; color: #f59e0b; } .fa-moon { right: 7px; color: #f1f5f9; }
.user-info { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.guest-mode { color: var(--text-muted); }

/* BUTTONS */
.btn-primary { background: var(--primary); color: white; border: none; padding: 12px 28px; border-radius: 30px; font-weight: 600; transition: 0.3s; cursor: pointer; font-size: 1rem; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);}
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-main); border-radius: 30px; font-weight: 500; transition: 0.3s; cursor: pointer; height: 34px; padding: 0 15px; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-capsule { background: transparent; border: 2px solid var(--primary); color: var(--text-main); padding: 12px 35px; border-radius: 50px; font-weight: 600; cursor: pointer; transition: 0.3s; display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; }
.btn-capsule:hover { background: var(--primary); color: white; box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); transform: translateY(-2px); }

/* PDF Butonu */
.btn-pdf {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 2px solid rgba(239, 68, 68, 0.5);
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    backdrop-filter: blur(10px);
}
.btn-pdf:hover {
    background: #ef4444;
    color: white;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}
.w-100 { width: 100%; }

/* HERO BÖLÜMÜ */
.hero-section { display: flex; align-items: center; margin-bottom: 30px; }
.hero-text { flex: 1.2; padding: 60px 50px; text-align: left; }
.hero-text h1 { font-size: 3.5rem; margin-bottom: 20px; color: var(--text-main); font-weight: 700; }
.hero-buttons { display: flex; gap: 15px; }
.hero-image { flex: 0.8; padding: 30px; display: grid; place-items: center; }
.main-img-placeholder { width: 100%; max-width: 450px; border-radius: 15px; box-shadow: var(--shadow); object-fit: cover; }
.section-header { margin-bottom: 40px; text-align: left; }
.section-header h2 { font-size: 2.2rem; color: var(--text-main); margin-bottom: 10px; }
.section-header p { color: var(--text-muted); font-size: 1.1rem; }

/* GİRİŞ EKRANI */
.auth-card-container { display: flex; justify-content: center; align-items: center; min-height: 60vh; }
.auth-card { padding: 50px; width: 100%; max-width: 450px; text-align: center; }
.auth-form { text-align: left; }
.auth-form label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; }

/* GİRİŞ KUTULARI İÇİN EKSİK OLAN CSS KODLARI EKLENDİ */
.input-field { width: 100%; padding: 14px 15px; margin-bottom: 20px; border-radius: 12px; font-size: 1rem; outline: none; transition: 0.3s; }
.auth-form select.input-field { cursor: pointer; color: var(--text-main); background-color: rgba(var(--card-bg-inner-rgb), 0.9); appearance: auto; }
.auth-form select.input-field option { background-color: var(--main-bg); color: var(--text-main); }

.auth-options { display: flex; gap: 15px; margin-top: 15px; }
.btn-guest { padding: 12px; border-radius: 30px; flex: 1; cursor: pointer; transition: 0.3s; font-weight: 500; color: var(--text-main);}
.btn-guest:hover { border-color: var(--primary); }

/* DASHBOARD & ÇALIŞMA MANTIĞI */
.modern-dashboard-card { border: 1px solid rgba(139, 92, 246, 0.4); padding: 30px; margin-top: 20px; }
.dash-header { border-bottom: 1px solid var(--border); padding-bottom: 15px; margin-bottom: 20px; }
.dash-body { display: flex; gap: 20px; align-items: stretch; }
.dash-stat { padding: 25px; border-left: 4px solid #ef4444; flex: 1; display:flex; flex-direction:column; justify-content:center; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.dash-trend { display: block; font-size: 3rem; font-weight: 800; color: #ef4444; margin-top: 10px; text-shadow: 0 0 15px rgba(239,68,68,0.3);}
.dash-tools { padding: 25px; flex: 2; display:flex; flex-direction:column; justify-content:center; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.dash-stat:hover, .dash-tools:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2); border-color: var(--primary); background: rgba(var(--card-bg-inner-rgb), 0.8);}

.logic-box-v2 { padding: 30px; margin-top: 40px; border: 1px dashed rgba(139, 92, 246, 0.3); }
.logic-box-v2 h3 { text-align: center; color: var(--text-main); margin-bottom: 20px; font-size: 1.3rem; }
.logic-steps-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-v2 { padding: 20px; text-align: center; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: default; }
.step-v2:hover { transform: translateY(-10px) scale(1.05); border-color: var(--primary); box-shadow: 0 15px 30px rgba(139, 92, 246, 0.25); background: rgba(var(--card-bg-inner-rgb), 0.9); }
.step-v2 span { transition: all 0.4s ease; font-size: 2.5rem; font-weight: 800; color: var(--primary); opacity: 0.5; display: block; margin-bottom: 10px; }
.step-v2:hover span { opacity: 1; color: var(--text-main); text-shadow: 0 0 20px var(--primary); transform: scale(1.1); }
.step-v2 p { color: var(--text-main); font-size: 1rem; font-weight: 500;}

/* ANALİZ MOTORU */
.full-width-page { max-width: 1400px !important; padding: 0 40px !important; }
.analysis-hero { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.search-container-centered { display: flex; justify-content: center; width: 100%; }

.modern-search-bar-v2 {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 50px;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}
.modern-search-bar-v2:focus-within { border-color: var(--primary); box-shadow: 0 0 30px rgba(139,92,246,0.4); transform: scale(1.02); }
.modern-search-bar-v2 input { flex: 1; background: transparent; border: none; color: var(--text-main); padding: 12px 15px; font-size: 1.1rem; outline: none; }
.btn-analyze-v2 { background: var(--primary); color: white; border: none; padding: 12px 30px; border-radius: 40px; font-weight: 600; cursor: pointer; transition: 0.3s; }

.analysis-result-v2 { padding: 40px; border: 1px solid rgba(139, 92, 246, 0.4); }
.analysis-glow-bg { position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: var(--primary); border-radius: 50%; filter: blur(100px); opacity: 0.1; pointer-events: none; z-index: 1;}
.result-grid-v2 { display: grid; grid-template-columns: 380px 1fr !important; gap: 40px !important; align-items: stretch; }

.risk-display-v2 { text-align: center; padding: 30px; border: 1px solid rgba(239, 68, 68, 0.3); display:flex; flex-direction: column; justify-content: center; align-items: center; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.risk-display-v2:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.6);}
.huge-risk-text { font-size: 5.5rem; font-weight: 800; color: #ef4444; margin: 0; line-height: 1; text-shadow: 0 0 20px rgba(239,68,68,0.4); }
.global-rank-badge { margin-top: 15px; color: var(--text-main); font-size: 0.95rem; font-weight: 600; background: rgba(var(--card-bg-inner-rgb), 0.8); padding: 8px 15px; border-radius: 10px; border: 1px solid var(--border);}
.job-name-badge { display: inline-block; margin-top: 15px; padding: 6px 20px; background: var(--primary); color: white; border-radius: 50px; font-weight: 600; text-transform: uppercase; box-shadow: 0 0 15px rgba(139,92,246,0.4);}
.details-display-v2 { display: flex; flex-direction: column; justify-content: center;}

.info-card-v2 { padding: 20px; border-left: 5px solid transparent; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.info-card-v2:hover { transform: translateX(10px); }
.info-card-v2.warning:hover { box-shadow: -10px 10px 25px rgba(245, 158, 11, 0.15); background: rgba(245, 158, 11, 0.1); border-left-width: 8px;}
.info-card-v2.success:hover { box-shadow: -10px 10px 25px rgba(16, 185, 129, 0.15); background: rgba(16, 185, 129, 0.1); border-left-width: 8px;}
.info-card-v2.primary:hover { box-shadow: -10px 10px 25px rgba(139, 92, 246, 0.15); background: rgba(139, 92, 246, 0.1); border-left-width: 8px;}
.info-card-v2 h4 { margin-bottom: 10px; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.full-width { width: 100%; }

/* ARAMA ÖNERİLERİ KUTUSU */
.autocomplete-container { position: relative; width: 100%; display: flex; justify-content: center; }
.autocomplete-items {
    position: absolute;
    border: 1px solid rgba(139,92,246,0.5);
    border-radius: 15px;
    background: rgba(var(--card-bg-rgb), 0.95);
    backdrop-filter: blur(20px);
    z-index: 999;
    top: calc(100% + 15px);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 15px 40px rgba(139,92,246,0.3);
}
.autocomplete-items div { padding: 15px 20px; cursor: pointer; color: var(--text-main); border-bottom: 1px solid var(--border); font-size: 1rem; text-transform: capitalize; transition: 0.2s;}
.autocomplete-items div:last-child { border-bottom: none; }
.autocomplete-items div:hover { background-color: rgba(var(--card-bg-inner-rgb), 0.8); color: var(--primary); padding-left: 25px;}
.autocomplete-active { background-color: var(--primary) !important; color: white !important; }

/* TEST EKRANI - WIZARD */
.test-wizard-container { padding: 40px; position: relative; overflow: hidden; margin-top: 20px;}
.test-wizard-header { margin-bottom: 30px; }
.step-badge { background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.4); color: var(--text-main); padding: 8px 25px; border-radius: 50px; font-weight: 600; font-size: 1.1rem; display: inline-block; }
.test-progress-bar-bg { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; }
.test-progress-bar-fill { height: 100%; background: var(--primary); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 10px var(--primary);}
.test-questions-wrapper { position: relative; min-height: 380px; }
.test-step { display: none; animation: slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.test-step.active { display: block; }
.test-q-text { font-size: 1.4rem; font-weight: 600; color: var(--text-main); margin-bottom: 25px; line-height: 1.5; text-shadow: 0 0 10px rgba(255,255,255,0.1); }
.test-options-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.test-option-card { background: rgba(var(--card-bg-inner-rgb), 0.5); border: 2px solid var(--border); border-radius: 15px; padding: 20px 25px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; color: var(--text-muted); font-size: 1.1rem; font-weight: 500;}
.test-radio { display: none; }
.test-option-card:hover { border-color: rgba(139, 92, 246, 0.5); background: rgba(139, 92, 246, 0.1); transform: translateX(5px); color: var(--text-main); }
.test-radio:checked + .test-option-card { border-color: var(--primary); background: rgba(139, 92, 246, 0.25); color: white; box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3); transform: scale(1.02); z-index: 10;}
.test-wizard-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--border); }
.test-result-card { margin-top: 30px; padding: 40px; margin: 30px auto 0; text-align: center;}
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } }

/* ====================================================
 * BECERİ HARİTASI VE LMS SİSTEMİ (SOLA KAYMA ÇÖZÜLDÜ)
 * ==================================================== */
.universe-section.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100vh - 80px); /* Masaüstü için yükseklik limiti */
    overflow: hidden !important;
    position: relative;
    padding: 0 20px !important;
    margin: 0 auto !important; /* SOLA KAYMAYI DÜZELTEN ANAHTAR KOD BURASI !important; yerine 0 auto !important; */
    width: 100%;
}

.universe-top-bar { width: 100%; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; padding: 20px 40px; text-align: center;}
.universe-titles h2 { color: var(--text-main); font-size: 2.2rem; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; gap: 15px; text-shadow: 0 0 20px rgba(139,92,246,0.3);}
.universe-titles p { color: var(--text-muted); font-size: 1.1rem; }

.glass-nav { width: 100%; position: relative; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; padding: 10px 20px; margin-bottom: 20px;}
.cluster-btn { background: rgba(var(--card-bg-inner-rgb), 0.4); border: 1px solid var(--border); color: var(--text-muted); padding: 12px 25px; border-radius: 50px; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; backdrop-filter: blur(10px); display: flex; align-items: center; gap: 8px;}
.cluster-btn:hover { background: rgba(var(--card-bg-inner-rgb), 0.8); border-color: rgba(255,255,255,0.2); color: var(--text-main); transform: translateY(-2px); }
.cluster-btn.active { background: rgba(139, 92, 246, 0.25); border-color: var(--primary); color: var(--text-main); box-shadow: 0 0 25px rgba(139, 92, 246, 0.4); }

.skill-tree-wrapper { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 5; padding: 40px; overflow-x: auto;}
.skill-path { display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; max-width: 1200px; padding-right: 40px; }

.node-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10; gap: 20px; opacity: 0; transform: translateY(30px); }
.skill-node { width: 90px; height: 90px; border-radius: 50%; background: rgba(var(--card-bg-rgb), 0.9); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; backdrop-filter: blur(10px);}
.skill-node::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; z-index: -1; transition: 0.4s; opacity: 0; }
.node-label { text-align: center; width: 140px; }
.label-title { display: block; font-weight: 700; color: var(--text-main); font-size: 1.05rem; margin-bottom: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);}
.label-sub { display: block; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

.skill-node:hover { transform: scale(1.15); border-color: transparent; }
.skill-node:hover::before { opacity: 1; }
.skill-node.active { transform: scale(1.2); border-color: transparent; }
.skill-node.active::before { opacity: 1; animation: pulseGlow 2s infinite; }

.node-red { color: var(--node-red); }
.node-red:hover::before, .node-red.active::before { background: var(--node-red); filter: blur(15px); }
.node-red.active { background: var(--node-red); color: white; box-shadow: inset 0 0 15px rgba(0,0,0,0.5); }
.node-yellow { color: var(--node-yellow); }
.node-yellow:hover::before, .node-yellow.active::before { background: var(--node-yellow); filter: blur(15px); }
.node-yellow.active { background: var(--node-yellow); color: white; box-shadow: inset 0 0 15px rgba(0,0,0,0.5); }
.node-green { color: var(--node-green); }
.node-green:hover::before, .node-green.active::before { background: var(--node-green); filter: blur(15px); }
.node-green.active { background: var(--node-green); color: white; box-shadow: inset 0 0 15px rgba(0,0,0,0.5); }
.node-blue { color: var(--node-blue); }
.node-blue:hover::before, .node-blue.active::before { background: var(--node-blue); filter: blur(15px); }
.node-blue.active { background: var(--node-blue); color: white; box-shadow: inset 0 0 15px rgba(0,0,0,0.5); }

.path-line { height: 4px; flex: 1; min-width: 40px; max-width: 150px; opacity: 0; position: relative; z-index: 5; border-radius: 4px; margin-top: -55px; }
.path-line::after { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background: inherit; filter: blur(5px); opacity: 0.6; }

.gradient-red-to-yellow { background: linear-gradient(to right, var(--node-red), var(--node-yellow)); }
.gradient-yellow-to-green { background: linear-gradient(to right, var(--node-yellow), var(--node-green)); }
.gradient-green-to-blue { background: linear-gradient(to right, var(--node-green), var(--node-blue)); }

.completed-badge {
    position: absolute; bottom: -5px; right: -5px; background: #10b981; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; border: 2px solid var(--main-bg); z-index: 20; box-shadow: 0 0 10px rgba(16,185,129,0.5); animation: popIn 0.4s ease forwards;
}

/* INTERACTIVE MISSION LEARNING (LMS) */
.lms-wrapper {
    width: 95%;
    max-width: 1300px;
    margin: 0 auto 20px auto;
    flex: 1;
    min-height: 0;
    padding: 25px;
    position: relative;
    z-index: 20;
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    background: rgba(var(--card-bg-rgb), 0.6);
    backdrop-filter: blur(20px);
}
.lms-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.btn-close-learning {
    background: rgba(var(--card-bg-inner-rgb), 0.5);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 15px;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.btn-close-learning:hover { color: var(--text-main); background: rgba(var(--card-bg-inner-rgb), 0.9); border-color: var(--primary); }

.lms-container {
    display: grid;
    grid-template-columns: 260px 1fr 340px;
    gap: 20px;
    flex: 1;
    min-height: 0;
    height: 100%;
}

.lms-left-panel, .lms-center-panel, .lms-right-panel {
    background: rgba(var(--card-bg-inner-rgb), 0.3);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.lms-panel-title { font-size: 1.1rem; color: var(--text-main); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.lms-path-list { list-style: none; padding: 0; margin: 0; flex: 1; overflow-y: auto; padding-right: 5px;}
.lms-path-list::-webkit-scrollbar { width: 5px; }
.lms-path-list::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 10px; }
.lms-path-item { padding: 12px 15px; border-radius: 10px; margin-bottom: 10px; color: var(--text-muted); font-size: 0.95rem; font-weight: 500; transition: 0.3s; display: flex; align-items: center; gap: 10px; border: 1px solid transparent;}
.lms-path-item i { font-size: 1rem; width: 20px; text-align: center; }
.lms-path-item.active { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.4); color: var(--primary); }
.lms-path-item.completed { color: #10b981; }

.lms-mission-header { margin-bottom: 20px; flex-shrink: 0; }
.lms-badge { background: var(--primary); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; display: inline-block; margin-bottom: 10px;}
.lms-mission-header h2 { font-size: 1.6rem; color: var(--text-main); }

.lms-mission-content { flex: 1; font-size: 1.05rem; line-height: 1.7; color: var(--text-muted); padding-right: 15px; overflow-y: auto; min-height: 0; padding-bottom: 15px;}
.lms-mission-content::-webkit-scrollbar { width: 6px; }
.lms-mission-content::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 10px; }
.lms-action-area { display: flex; gap: 15px; flex-shrink: 0; padding-top: 15px;}

.mission-scenario-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.02));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.scenario-icon { font-size: 1.8rem; color: var(--primary); margin-top: 5px; }
.scenario-text h5 { color: var(--primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.scenario-text p { color: var(--text-main); font-size: 1.05rem; line-height: 1.6; margin: 0; }

.mission-hint-card {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}
.hint-icon { color: var(--node-yellow); font-size: 1.4rem; }
.hint-text p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

.mission-textarea { width: 100%; height: 120px; background: rgba(0,0,0,0.2); border: 1px dashed rgba(139,92,246,0.5); border-radius: 10px; padding: 15px; color: var(--text-main); font-size: 0.95rem; outline: none; resize: none; transition: 0.3s; }
.mission-textarea:focus { background: rgba(0,0,0,0.4); border-color: var(--primary); box-shadow: inset 0 0 10px rgba(139,92,246,0.2), 0 0 15px rgba(139,92,246,0.4); }

.mentor-chat-area { flex: 1; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; min-height: 0; padding-right: 10px; }
.mentor-chat-area::-webkit-scrollbar { width: 6px; }
.mentor-chat-area::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 10px; }
.mentor-message { display: flex; gap: 12px; animation: popIn 0.4s ease forwards; }

.mentor-avatar { width: 35px; height: 35px; background: rgba(139, 92, 246, 0.2); color: var(--primary); border: 1px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; animation: floatAvatar 3s ease-in-out infinite;}
@keyframes floatAvatar { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } }

.mentor-text { background: rgba(var(--card-bg-rgb), 0.6); padding: 12px 15px; border-radius: 0 15px 15px 15px; border: 1px solid var(--border); font-size: 0.9rem; color: var(--text-main); line-height: 1.5; }
.mentor-text.typing { font-style: italic; color: var(--text-muted); opacity: 0.7;}

/* CYBERPUNK "LIVING CERTIFICATE" */
.living-cert-container { background: rgba(11, 13, 20, 0.8); border: 1px solid rgba(255,255,255,0.05); border-radius: 20px; padding: 40px; box-shadow: 0 0 50px rgba(0,0,0,0.5); animation: popIn 0.6s ease forwards; overflow-y: auto; max-height: calc(100vh - 250px); }
.living-cert-container::-webkit-scrollbar { width: 8px; }
.living-cert-container::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
.cert-theme-red { border-top: 4px solid var(--node-red); box-shadow: inset 0 20px 50px rgba(239, 68, 68, 0.05); }
.cert-theme-yellow { border-top: 4px solid var(--node-yellow); box-shadow: inset 0 20px 50px rgba(245, 158, 11, 0.05); }
.cert-theme-green { border-top: 4px solid var(--node-green); box-shadow: inset 0 20px 50px rgba(16, 185, 129, 0.05); }
.cert-theme-blue { border-top: 4px solid var(--node-blue); box-shadow: inset 0 20px 50px rgba(59, 130, 246, 0.05); }

.cert-top-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 25px; margin-bottom: 30px; }
.cert-profile-info { display: flex; align-items: center; gap: 20px; }
.cert-avatar { width: 70px; height: 70px; background: rgba(255,255,255,0.05); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--primary); }
.cert-username { font-size: 1.8rem; font-weight: 700; color: white; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; }
.cert-role-title { font-size: 1rem; color: var(--primary); font-weight: 600; background: rgba(139, 92, 246, 0.15); padding: 5px 15px; border-radius: 50px; display: inline-block; }

.cert-readiness { text-align: center; }
.readiness-circle { width: 90px; height: 90px; border-radius: 50%; border: 4px solid #10b981; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: #10b981; margin: 0 auto 10px; box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), inset 0 0 15px rgba(16, 185, 129, 0.2); }
.readiness-label { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }

.cert-section-title { font-size: 1.2rem; color: white; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.cert-evolution-box { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 15px; padding: 25px; margin-bottom: 30px; }
.evolution-flex { display: flex; align-items: center; justify-content: space-between; text-align: center; gap: 20px;}
.evo-from { flex: 1; padding: 15px; background: rgba(239, 68, 68, 0.1); border: 1px dashed rgba(239, 68, 68, 0.3); border-radius: 10px; color: #fca5a5; font-weight: 600; }
.evo-arrow { font-size: 2rem; color: var(--text-muted); animation: pulseGlow 2s infinite; }
.evo-to { flex: 1; padding: 15px; background: rgba(16, 185, 129, 0.15); border: 1px solid #10b981; border-radius: 10px; color: #6ee7b7; font-weight: 700; box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); }

.badges-grid { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px; }
.micro-badge { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2)); border: 1px solid rgba(139, 92, 246, 0.5); padding: 10px 20px; border-radius: 50px; color: white; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; transition: 0.3s; cursor: default; }
.micro-badge:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4); }

.cert-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 20px; }
.cert-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.cert-score-item { background: rgba(var(--card-bg-inner-rgb), 0.4); border: 1px solid var(--border); padding: 20px; border-radius: 15px; text-align: center; }
.cert-score-label { display: block; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 5px; }
.cert-score-val { display: block; font-size: 1.8rem; color: white; font-weight: 800; }

.portfolio-evidence { background: rgba(0,0,0,0.3); border-left: 4px solid var(--primary); padding: 20px; border-radius: 0 15px 15px 0; }
.port-label { display: inline-block; background: rgba(139, 92, 246, 0.2); color: #c4b5fd; padding: 4px 10px; border-radius: 5px; font-size: 0.8rem; font-weight: 600; margin-bottom: 10px; }
.port-desc { color: var(--text-muted); font-style: italic; font-size: 0.95rem; line-height: 1.6; }

/* Animasyonlar */
.animate-node-in { animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.animate-line-in { animation: stretchIn 0.6s ease-out forwards; }
.animate-up { opacity: 0; transform: translateY(40px) scale(0.95); animation: fadeInUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.delay-1 { animation-delay: 0.15s; } .delay-2 { animation-delay: 0.3s; } .delay-3 { animation-delay: 0.45s; } .delay-4 { animation-delay: 0.60s; }

@keyframes popIn { 0% { opacity: 0; transform: translateY(40px) scale(0.8); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes stretchIn { 0% { opacity: 0; transform: scaleX(0); transform-origin: left; } 100% { opacity: 0.6; transform: scaleX(1); transform-origin: left; } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(40px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* ANASAYFA GLOBAL KARTLAR */
.global-stats-container { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--border); }
.global-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.global-card { background: rgba(var(--card-bg-rgb), 0.6); backdrop-filter: blur(20px); border: 1px solid var(--border); padding: 30px 20px; border-radius: 20px; text-align: center; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-shadow: var(--shadow); cursor: default;}
.global-card:hover { border-color: var(--primary); transform: translateY(-15px) scale(1.05); background: rgba(var(--card-bg-inner-rgb), 0.9); box-shadow: 0 20px 40px rgba(139,92,246,0.3); }
.global-card:hover .card-icon { animation: pulseGlow 2s infinite; }
.card-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; opacity: 0.9; }
.global-card h3 { margin-bottom: 15px; font-size: 1.15rem; color: var(--text-main); font-weight: 600; }
.global-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }

/* HAKKIMIZDA EKRANI */
.team-group-photo { text-align: center; margin-bottom: 60px; width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 20px;}
.team-group-photo img { width: 100%; max-width: 900px; border-radius: 20px; border: 3px solid var(--primary); box-shadow: 0 15px 40px rgba(139, 92, 246, 0.2); object-fit: cover; aspect-ratio: 21/9; transition: transform 0.4s; z-index: 1;}
.team-group-photo img:hover { transform: scale(1.01); }

.vision-box { padding: 25px 50px; margin-top: -30px; position: relative; z-index: 10; border-top: 4px solid var(--primary); max-width: 700px; }
.vision-box h3 { color: var(--text-main); font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; }
.vision-box p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto; }
.team-card { padding: 50px 30px; text-align: center; transition: 0.4s ease; }
.team-card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: 0 15px 30px rgba(139,92,246,0.2);}

.profile-img-container { width: 180px; height: 180px; background: rgba(var(--card-bg-inner-rgb), 0.5); border-radius: 50%; margin: 0 auto 25px; position: relative; overflow: hidden; border: 4px solid var(--primary); display: grid; place-items: center; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.profile-img-container img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 2; }
.initials { font-size: 3rem; font-weight: bold; color: var(--text-muted); z-index: 1; }
.role-badge { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; color: white; margin-bottom: 15px; font-weight: 600; }
.leader { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; border: 1px solid #8b5cf6; }
.dev { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border: 1px solid #10b981; }
.analyst { background: rgba(245, 158, 11, 0.2); color: #fcd34d; border: 1px solid #f59e0b; }

/* İLETİŞİM EKRANI */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 20px; }
.contact-card { padding: 40px 30px; text-align: center; transition: 0.3s; }
.contact-card:hover { transform: translateY(-10px); border-color: var(--primary); }
.contact-info { display: flex; flex-direction: column; gap: 15px; margin-top: 20px;}
.contact-info a { text-decoration: none; color: var(--text-muted); padding: 12px; background: rgba(var(--card-bg-inner-rgb), 0.5); border: 1px solid var(--border); border-radius: 12px; font-weight: 500; transition: 0.3s;}
.contact-info a:hover { color: var(--text-main); background: rgba(139, 92, 246, 0.2); border-color: var(--primary); transform: scale(1.02); }

/* MOBİL TASARIM OPTİMİZASYONLARI (GÜNCELLENDİ) */
@media (max-width: 1000px) {
    .global-grid { grid-template-columns: repeat(2, 1fr); }
    .lms-container { grid-template-columns: 1fr; height: auto;}
}

@media (max-width: 768px) {
    body { overflow-x: hidden; }

    /* MOBİL PERFORMANS OPTİMİZASYONLARI (KASMA SORUNUNU ÇÖZER) */
    .orb { animation: none !important; filter: blur(40px) !important; opacity: 0.1 !important; }
    .glass-card, .navbar-wrapper, .lms-wrapper, .glass-nav, .autocomplete-items {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    .skill-node::before, .mentor-avatar, .evo-arrow, .completed-badge, .skill-node.active::before {
        animation: none !important;
    }
    .glass-card:hover, .team-card:hover, .contact-card:hover, .step-v2:hover, .global-card:hover {
        transform: none !important;
    }

    main { margin-top: 170px; padding-bottom: 40px; }
    .full-width-page { padding: 0 15px !important; }

    .navbar-container { display: flex; flex-direction: column; padding: 10px 15px; gap: 12px;}
    .logo { font-size: 1.4rem; text-align: center; width: 100%; justify-content: center;}

    .main-nav { width: 100%; overflow: hidden; }
    .nav-links { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 5px; gap: 10px; justify-content: flex-start; margin-bottom: 0;}
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links a { white-space: nowrap; font-size: 0.95rem; padding: 8px 18px; }

    .navbar-actions { width: 100%; justify-content: center; flex-wrap: wrap; gap: 15px;}
    .theme-switch-wrapper { margin-left: 0; }

    .hero-section { flex-direction: column; text-align: center; margin-top: 10px;}
    .hero-text { text-align: center; padding: 30px 20px; }
    .hero-text h1 { font-size: 2rem; margin-bottom: 15px; } /* Mobilde boyut ufalıyor */
    .hero-buttons { justify-content: center; flex-wrap: wrap; }
    .main-img-placeholder { max-width: 100%; margin-top: 20px; }

    .team-grid, .contact-grid, .auth-options, .global-grid, .logic-steps-v2 { grid-template-columns: 1fr !important; }
    .result-grid-v2 { grid-template-columns: 1fr !important; gap: 20px !important; }
    .cert-score-grid { grid-template-columns: 1fr; }

    /* Mobilde analiz sonuç kutusu iç boşluğu daraltıldı */
    .analysis-result-v2 { padding: 20px !important; }

    .modern-search-bar-v2 { flex-direction: column; border-radius: 20px; padding: 15px; gap: 10px;}
    .btn-analyze-v2 { width: 100%; }
    .autocomplete-items { right: 0; width: 100%; }

    .dash-body { flex-direction: column; }
    .dash-stat, .dash-tools { width: 100%; }

    .full-width-test { padding: 15px !important; }
    .q-item { padding: 25px 20px; margin-bottom: 20px; }
    .q-text { font-size: 1.1rem; }

    /* MOBİLDE BECERİ HARİTASI İÇİN ALAN KİLİDİ AÇILDI */
    .universe-section.active {
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 40px !important;
    }

    .universe-top-bar { flex-direction: column; padding: 20px; gap: 15px; text-align: center; }
    .universe-titles h2 { justify-content: center; font-size: 1.6rem; }
    .skill-tree-wrapper { padding: 20px 10px; align-items: flex-start; overflow-x: hidden; overflow-y: auto;}
    .skill-path { flex-direction: column; gap: 0; padding-bottom: 50px; padding-right: 0;}

    .path-line { width: 4px; height: 60px; min-width: auto; max-width: auto; margin-top: 0; margin-bottom: 0; }
    .path-line::after { display: none; }
    @keyframes stretchIn { 0% { opacity: 0; transform: scaleY(0); transform-origin: top; } 100% { opacity: 0.6; transform: scaleY(1); transform-origin: top; } }

    .node-wrapper { margin: 10px 0; }
    .node-label { margin-top: 10px; }

    .lms-wrapper { padding: 20px 15px; margin: 10px auto; height: auto; min-height: auto;}
    .lms-action-area { flex-direction: column; }
    .lms-action-area button { width: 100%; }
    .lms-path-list { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 10px;}
    .lms-path-item { white-space: nowrap; margin-bottom: 0;}

    .lms-container { display: flex; flex-direction: column; }
    .mentor-chat-area { max-height: 350px; }

    /* SERTİFİKA EKRANI MOBİL DÜZENLEMESİ */
    .cert-two-cols {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    .cert-top-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .cert-profile-info {
        flex-direction: column;
        text-align: center;
    }
    .evolution-flex {
        flex-direction: column;
    }
    .evo-arrow {
        transform: rotate(90deg); /* Oku mobilde aşağı bakar konuma getir */
    }
}


/* GELİŞTİRİLMİŞ ANALİZ ANLATIMI & AI MENTOR */
.btn-analyze-v2:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.35);
}
.btn-analyze-v2:disabled {
    opacity: 0.8;
    cursor: progress;
}

.analysis-hint-card {
    width: 100%;
    padding: 16px 20px;
    border-radius: 16px;
    font-size: 0.98rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 4px solid var(--primary);
}
.analysis-hint-card i { margin-right: 8px; }
.analysis-hint-card.tone-success { border-left-color: var(--node-green); background: rgba(16, 185, 129, 0.08); }
.analysis-hint-card.tone-warn { border-left-color: var(--node-yellow); background: rgba(245, 158, 11, 0.08); }
.analysis-hint-card.tone-danger { border-left-color: var(--node-red); background: rgba(239, 68, 68, 0.08); }
.analysis-hint-card.tone-loading { border-left-color: var(--node-blue); background: rgba(59, 130, 246, 0.08); }

.suggestion-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.suggestion-row span {
    color: var(--text-muted);
    font-weight: 600;
}
.suggestion-pill {
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.12);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: 0.25s;
    font-weight: 600;
}
.suggestion-pill:hover {
    transform: translateY(-2px);
    background: rgba(139, 92, 246, 0.25);
    border-color: var(--primary);
}

.impact-storyboard {
    padding: 24px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.storyboard-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}
.storyboard-header h4 {
    font-size: 1.2rem;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.storyboard-header p {
    color: var(--text-muted);
    line-height: 1.65;
}
.match-pill {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.4);
    animation: softPulse 2.8s ease-in-out infinite;
}
.match-pill.approx-match {
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.42);
}
@keyframes softPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
    50% { transform: scale(1.02); box-shadow: 0 12px 30px rgba(139, 92, 246, 0.18); }
}

.impact-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.impact-kpi-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 118px;
    transition: 0.3s;
}
.impact-kpi-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139, 92, 246, 0.45);
}
.impact-kpi-card span {
    color: var(--text-muted);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.impact-kpi-card strong {
    font-size: 1.04rem;
    line-height: 1.55;
    color: var(--text-main);
}

.impact-viz-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 18px;
}
.risk-meter-card, .journey-board {
    padding: 20px;
}
.risk-meter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}
.risk-meter-card p {
    color: var(--text-muted);
    line-height: 1.65;
    font-size: 0.95rem;
}
.risk-ring {
    --ring-accent: var(--node-red);
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(var(--card-bg-inner-rgb), 0.98) 0 58px, transparent 59px),
        conic-gradient(var(--ring-accent) calc(var(--risk) * 1%), rgba(255,255,255,0.08) 0);
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: inset 0 0 22px rgba(255,255,255,0.04), 0 18px 45px rgba(0,0,0,0.28);
    transition: background 0.8s ease;
}
.risk-ring[data-tone="critical"],
.risk-ring[data-tone="high"] { --ring-accent: var(--node-red); }
.risk-ring[data-tone="medium"] { --ring-accent: var(--node-yellow); }
.risk-ring[data-tone="balanced"] { --ring-accent: var(--node-green); }
.risk-ring-center {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
}
.risk-ring-center span {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
}
.risk-ring-center small {
    color: var(--text-muted);
    font-size: 0.82rem;
    max-width: 90px;
    line-height: 1.35;
}

.journey-board h5 {
    font-size: 1rem;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    color: var(--text-main);
}
.journey-track {
    display: grid;
    gap: 12px;
}
.journey-step {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(var(--card-bg-rgb), 0.38);
    transition: 0.3s;
}
.journey-step:hover {
    transform: translateX(5px);
    border-color: rgba(139, 92, 246, 0.4);
}
.journey-index {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    color: var(--primary);
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
}
.journey-step strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 5px;
}
.journey-step p, .journey-empty {
    color: var(--text-muted);
    line-height: 1.55;
    font-size: 0.94rem;
}

.analysis-insight-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
}
.ai-brief-panel p {
    color: var(--text-main);
    line-height: 1.75;
    margin-bottom: 16px;
}
.next-actions-list {
    list-style: none;
    display: grid;
    gap: 12px;
}
.next-actions-list li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start;
    color: var(--text-main);
    line-height: 1.55;
}
.next-actions-list li span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: rgba(139, 92, 246, 0.14);
    color: var(--primary);
    border: 1px solid rgba(139, 92, 246, 0.35);
    font-weight: 800;
}
.course-chip-list, .tool-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.resource-chip, .soft-empty-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.12);
    color: var(--text-main);
    font-size: 0.92rem;
    line-height: 1.4;
}
.tool-chip-list .resource-chip {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.12);
}
.soft-empty-chip {
    border-color: var(--border);
    background: rgba(var(--card-bg-rgb), 0.35);
    color: var(--text-muted);
}
.mini-title {
    font-size: 0.98rem;
    margin-top: 18px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
}

.mentor-user-message {
    flex-direction: row-reverse;
}
.mentor-user-bubble {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.55);
    max-width: min(100%, 470px);
    white-space: pre-wrap;
}
.mentor-evaluation-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mentor-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.mentor-score-row strong {
    font-size: 1rem;
}
.mentor-score-badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.42);
    color: #6ee7b7;
    font-weight: 800;
}
.mentor-score-badge.warning-score {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.42);
    color: #fcd34d;
}
.mentor-evaluation-card p {
    color: var(--text-main);
    line-height: 1.65;
}
.mentor-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mentor-skill-tags span {
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
    font-size: 0.82rem;
    font-weight: 700;
}
.mentor-subpanel {
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--border);
}
.mentor-subpanel strong {
    display: block;
    margin-bottom: 8px;
}
.mentor-subpanel ul {
    margin-left: 18px;
    display: grid;
    gap: 6px;
    line-height: 1.55;
}
.success-panel {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}
.warning-panel {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}
.mentor-next-move {
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.55;
}
.mentor-next-move i {
    margin-right: 8px;
    color: var(--primary);
}

@media (max-width: 1000px) {
    .impact-kpi-grid,
    .impact-viz-grid,
    .analysis-insight-grid {
        grid-template-columns: 1fr;
    }
    .storyboard-header {
        flex-direction: column;
    }
    .match-pill {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .impact-storyboard {
        padding: 18px;
    }
    .journey-step {
        grid-template-columns: 1fr;
    }
    .journey-index {
        width: 46px;
        height: 46px;
    }
    .next-actions-list li {
        grid-template-columns: 1fr;
    }
    .next-actions-list li span {
        width: 38px;
        height: 38px;
    }
    .mentor-score-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   OYUNLAŞTIRILMIŞ TEST ARENASI
   ========================================================= */
.quiz-page {
    width: 100%;
}

.quiz-arena-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
    width: min(1400px, calc(100% - 40px));
    margin: 24px auto 0;
}

.quiz-side-panel,
.quiz-center-panel {
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.quiz-panel-block + .quiz-panel-block {
    margin-top: 24px;
}

.quiz-panel-block h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.quiz-panel-desc {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

.difficulty-stack {
    display: grid;
    gap: 12px;
}

.difficulty-btn {
    width: 100%;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.55);
    color: var(--text-main);
    border-radius: 18px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.28s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.difficulty-btn span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.difficulty-btn small {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.difficulty-btn:hover,
.difficulty-btn.active {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.75);
    background: rgba(139, 92, 246, 0.17);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
}

.joker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.joker-btn {
    min-height: 86px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.55);
    color: var(--text-main);
    padding: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.joker-btn strong {
    font-size: 0.95rem;
}

.joker-btn span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.joker-btn.wide {
    grid-column: 1 / -1;
}

.joker-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.65);
    background: rgba(16, 185, 129, 0.12);
}

.joker-btn:disabled,
.joker-btn.used {
    opacity: 0.52;
    cursor: not-allowed;
    filter: grayscale(0.15);
}

.quiz-mini-note {
    margin-top: 24px;
    padding: 16px;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    background: rgba(var(--card-bg-inner-rgb), 0.48);
    border: 1px solid var(--border);
}

.quiz-mini-note i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: rgba(139, 92, 246, 0.12);
}

.quiz-mini-note p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
    font-size: 0.92rem;
}

.quiz-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.quiz-level-badge,
.quiz-counter,
.quiz-timer,
#quiz-topic-chip,
#quiz-question-score-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 0.92rem;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.55);
    color: var(--text-main);
}

.quiz-level-badge.easy { border-color: rgba(16, 185, 129, 0.55); color: #10b981; }
.quiz-level-badge.medium { border-color: rgba(245, 158, 11, 0.55); color: #f59e0b; }
.quiz-level-badge.hard { border-color: rgba(239, 68, 68, 0.55); color: #ef4444; }

.quiz-progress-track,
.mini-progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}

.quiz-progress-fill,
.mini-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.95), rgba(16, 185, 129, 0.95));
    transition: width 0.35s ease;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.3);
}

.quiz-intro-card {
    min-height: 440px;
    display: grid;
    place-items: center;
    text-align: center;
    align-content: center;
    gap: 18px;
    padding: 30px;
    border-radius: 26px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.14), transparent 38%),
        radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.1), transparent 32%),
        rgba(var(--card-bg-inner-rgb), 0.35);
}

.quiz-intro-icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    font-size: 2.1rem;
    color: var(--primary);
    background: rgba(139, 92, 246, 0.13);
    border: 1px solid rgba(139, 92, 246, 0.28);
}

.quiz-intro-card h3 {
    color: var(--text-main);
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    line-height: 1.25;
}

.quiz-intro-card p {
    max-width: 680px;
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 1.02rem;
}

.quiz-start-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.quiz-question-card {
    padding: 26px;
    border-radius: 26px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 30%),
        rgba(var(--card-bg-inner-rgb), 0.42);
    animation: quizCardEnter 0.35s ease both;
}

.quiz-question-kicker {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.quiz-question-text {
    color: var(--text-main);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.5;
    margin: 0 0 24px;
}

.quiz-options-grid {
    display: grid;
    gap: 14px;
}

.quiz-option-btn {
    width: 100%;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.58);
    color: var(--text-main);
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
}

.quiz-option-btn:hover:not(:disabled) {
    transform: translateX(4px);
    border-color: rgba(139, 92, 246, 0.65);
    background: rgba(139, 92, 246, 0.12);
}

.quiz-option-btn:disabled {
    cursor: not-allowed;
}

.quiz-option-letter {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(139, 92, 246, 0.12);
    color: var(--primary);
    font-weight: 800;
}

.quiz-option-btn.correct {
    border-color: rgba(16, 185, 129, 0.72);
    background: rgba(16, 185, 129, 0.15);
}

.quiz-option-btn.correct .quiz-option-letter {
    color: #10b981;
    background: rgba(16, 185, 129, 0.14);
}

.quiz-option-btn.wrong {
    border-color: rgba(239, 68, 68, 0.7);
    background: rgba(239, 68, 68, 0.13);
}

.quiz-option-btn.wrong .quiz-option-letter {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.13);
}

.quiz-option-btn.eliminated {
    opacity: 0.28;
    pointer-events: none;
    filter: grayscale(0.45);
    transform: scale(0.985);
}

.quiz-hint-box,
.quiz-feedback {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    line-height: 1.6;
    border: 1px solid var(--border);
}

.quiz-hint-box {
    color: var(--text-main);
    background: rgba(59, 130, 246, 0.11);
    border-color: rgba(59, 130, 246, 0.25);
}

.quiz-feedback {
    display: none;
}

.quiz-feedback.show {
    display: block;
}

.quiz-feedback.success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
}

.quiz-feedback.error {
    background: rgba(239, 68, 68, 0.11);
    border-color: rgba(239, 68, 68, 0.28);
}

.quiz-feedback.notice {
    background: rgba(245, 158, 11, 0.11);
    border-color: rgba(245, 158, 11, 0.28);
}

.quiz-feedback strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text-main);
}

.quiz-action-row {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
}

.score-hero {
    border-radius: 24px;
    padding: 20px 18px;
    text-align: center;
    background:
        radial-gradient(circle at top, rgba(139, 92, 246, 0.18), transparent 48%),
        rgba(var(--card-bg-inner-rgb), 0.52);
    border: 1px solid var(--border);
}

.score-hero strong {
    display: block;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--text-main);
    margin-bottom: 6px;
}

.score-hero span {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.score-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.score-stat {
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.52);
    padding: 14px;
}

.score-stat span,
.score-stat strong {
    display: block;
}

.score-stat span {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 5px;
}

.score-stat strong {
    color: var(--text-main);
    font-size: 1.35rem;
}

.motivation-card {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 36%),
        rgba(var(--card-bg-inner-rgb), 0.48);
}

.motivation-badge {
    display: inline-flex;
    border-radius: 999px;
    padding: 7px 12px;
    margin-bottom: 12px;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.28);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 700;
}

.motivation-card strong {
    display: block;
    color: var(--text-main);
    line-height: 1.45;
    margin-bottom: 10px;
}

.motivation-card p {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    font-size: 0.92rem;
}

.mini-progress-meta {
    display: grid;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.quiz-result-card {
    margin-top: 4px;
    border-radius: 28px;
    padding: 30px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.17), transparent 38%),
        radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.12), transparent 34%),
        rgba(var(--card-bg-inner-rgb), 0.46);
}

.quiz-result-top {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.quiz-result-top h3 {
    color: var(--text-main);
    font-size: clamp(1.55rem, 2.4vw, 2.2rem);
}

.quiz-result-top p {
    color: var(--text-muted);
    line-height: 1.7;
}

.quiz-result-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 22px 0;
}

.quiz-result-metric {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.5);
}

.quiz-result-metric span,
.quiz-result-metric strong {
    display: block;
}

.quiz-result-metric span {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.quiz-result-metric strong {
    color: var(--text-main);
    font-size: 1.35rem;
}

.quiz-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

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

@media (max-width: 1180px) {
    .quiz-arena-layout {
        grid-template-columns: 1fr;
        width: min(100%, calc(100% - 28px));
    }

    .quiz-score-panel {
        order: 3;
    }

    .quiz-center-panel {
        order: 2;
    }

    .quiz-side-panel:first-child {
        order: 1;
    }
}

@media (max-width: 720px) {
    .quiz-side-panel,
    .quiz-center-panel,
    .quiz-question-card,
    .quiz-result-card {
        padding: 18px;
    }

    .joker-grid,
    .score-stat-grid,
    .quiz-result-metrics {
        grid-template-columns: 1fr;
    }

    .quiz-option-btn {
        grid-template-columns: 38px 1fr;
        min-height: 66px;
    }

    .quiz-option-letter {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .quiz-action-row {
        justify-content: stretch;
    }

    .quiz-action-row .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   KAPSAMLI KÜRESEL SORUN & ÇÖZÜM GÜNCELLEMESİ
   ========================================================= */
.compact-header {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.evidence-tag {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid rgba(139, 92, 246, 0.26);
    background: rgba(139, 92, 246, 0.12);
}

.problem-map-section,
.solution-blueprint-section,
.evidence-board-section {
    margin-top: 72px;
}

.problem-map-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.problem-card {
    position: relative;
    min-height: 280px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.problem-card::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    right: -55px;
    bottom: -55px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.12);
    filter: blur(2px);
}

.problem-index,
.blueprint-step {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    font-weight: 800;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(139, 92, 246, 0.28);
    position: relative;
    z-index: 1;
}

.problem-card h3,
.blueprint-card h3,
.evidence-board-card h3 {
    color: var(--text-main);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.08rem;
}

.problem-card p,
.blueprint-card p,
.evidence-board-card p {
    position: relative;
    z-index: 1;
    color: var(--text-muted);
    line-height: 1.72;
    font-size: 0.95rem;
}

.solution-blueprint-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.blueprint-card {
    min-height: 240px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.09), transparent 32%),
        rgba(var(--card-bg-rgb), 0.62);
}

.evidence-board-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.evidence-board-card {
    padding: 26px;
    min-height: 210px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 34%),
        rgba(var(--card-bg-rgb), 0.62);
}

.analysis-context-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: min(1100px, 100%);
    margin: 0 auto;
}

.analysis-context-card {
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.52);
}

.analysis-context-card h4,
.score-explain-head h4,
.skills-impact-card h4 {
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.analysis-context-card p,
.score-explain-head p,
.skills-impact-card p,
.score-note-card {
    color: var(--text-muted);
    line-height: 1.68;
    font-size: 0.94rem;
}

.score-explain-board {
    padding: 26px;
    border-radius: 26px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.1), transparent 30%),
        rgba(var(--card-bg-inner-rgb), 0.48);
}

.score-explain-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.score-explain-pill {
    border-radius: 999px;
    padding: 9px 14px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.12);
    color: var(--text-main);
    font-size: 0.84rem;
    font-weight: 700;
}

.analysis-factor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.analysis-factor-card {
    min-height: 188px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.52);
}

.analysis-factor-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    color: var(--primary);
    background: rgba(139, 92, 246, 0.13);
    border: 1px solid rgba(139, 92, 246, 0.24);
}

.analysis-factor-card strong {
    display: block;
    color: var(--text-main);
    margin-bottom: 8px;
    line-height: 1.4;
}

.analysis-factor-card p {
    color: var(--text-muted);
    line-height: 1.62;
    font-size: 0.9rem;
}

.score-note-card {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.11);
}

.logic-source-note {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(59, 130, 246, 0.22);
    background: rgba(59, 130, 246, 0.09);
}

.logic-source-note i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--primary);
    background: rgba(139, 92, 246, 0.14);
}

.logic-source-note p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.68;
    font-size: 0.94rem;
}

.skills-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.skills-impact-card {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.52);
}

@media (max-width: 1200px) {
    .problem-map-grid,
    .solution-blueprint-grid,
    .analysis-factor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evidence-board-grid,
    .analysis-context-board,
    .skills-impact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .problem-map-grid,
    .solution-blueprint-grid,
    .analysis-factor-grid {
        grid-template-columns: 1fr;
    }

    .problem-card,
    .blueprint-card,
    .evidence-board-card {
        min-height: auto;
        padding: 20px;
    }

    .score-explain-board {
        padding: 18px;
    }

    .logic-source-note {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   HATA DÜZELTME & MOBİL PERFORMANS OPTİMİZASYONU
   - Beceri haritası masaüstü hizalama / kırpılma düzeltmesi
   - Skill node hover: yalnızca ikon parlaması
   - Karanlık tema toggle beyaz nokta görünümü düzeltmesi
   - Yeni ana sayfa kartlarına hover animasyonu
   - Mobil taşma ve performans iyileştirmeleri
   ========================================================= */

/* --- 1) Beceri Haritası: daha doğal yükseklik, taşmasız yol düzeni --- */
.universe-section.active {
    min-height: calc(100vh - 110px);
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 56px !important;
}

.skill-tree-wrapper {
    flex: 0 0 auto !important;
    min-height: 250px;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 24px 20px 34px !important;
    overflow: visible !important;
}

.skill-path {
    width: min(100%, 1260px) !important;
    max-width: 1260px !important;
    padding: 0 12px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
}

.node-wrapper {
    flex: 0 0 168px;
    width: 168px;
    gap: 16px;
}

.node-label {
    width: 168px;
}

.path-line {
    flex: 1 1 90px;
    min-width: 74px;
    max-width: 170px;
    margin-top: 43px !important;
    opacity: 0.92;
}

/* --- 2) Beceri düğmeleri: gövde renklenmesin, ikon parlasın --- */
.skill-node {
    isolation: isolate;
}

.skill-node i {
    transition:
        color 0.28s ease,
        text-shadow 0.28s ease,
        filter 0.28s ease,
        transform 0.28s ease;
}

.skill-node:hover {
    background: rgba(var(--card-bg-rgb), 0.94) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

[data-theme="light"] .skill-node:hover {
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.skill-node:hover::before {
    opacity: 0 !important;
    animation: none !important;
}

.node-red:not(.active):hover i {
    color: var(--node-red);
    text-shadow: 0 0 18px rgba(239, 68, 68, 0.9);
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.55));
    transform: scale(1.08);
}

.node-yellow:not(.active):hover i {
    color: var(--node-yellow);
    text-shadow: 0 0 18px rgba(245, 158, 11, 0.9);
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.55));
    transform: scale(1.08);
}

.node-green:not(.active):hover i {
    color: var(--node-green);
    text-shadow: 0 0 18px rgba(16, 185, 129, 0.9);
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.55));
    transform: scale(1.08);
}

.node-blue:not(.active):hover i {
    color: var(--node-blue);
    text-shadow: 0 0 18px rgba(59, 130, 246, 0.9);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.55));
    transform: scale(1.08);
}

/* Aktif node görünümünü koruyoruz; hover override sadece pasif düğmelerde hissedilir. */
.skill-node.active:hover {
    transform: translateY(-4px) scale(1.14) !important;
}

.node-red.active:hover {
    background: var(--node-red) !important;
}

.node-yellow.active:hover {
    background: var(--node-yellow) !important;
}

.node-green.active:hover {
    background: var(--node-green) !important;
}

.node-blue.active:hover {
    background: var(--node-blue) !important;
}

/* --- 3) Tema switch: karanlık temadaki saf beyaz nokta yerine dengeli topuz --- */
.slider:before {
    box-sizing: border-box;
    z-index: 2;
}

[data-theme="dark"] .slider:before {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(139, 92, 246, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.38);
}

[data-theme="light"] .slider:before {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}

[data-theme="dark"] .fa-moon {
    color: #e2e8f0;
}

[data-theme="light"] .fa-moon {
    color: #64748b;
}

/* --- 4) Yeni ana sayfa kartlarına canlı ama tasarımı bozmayan hover animasyonları --- */
.problem-card,
.blueprint-card,
.evidence-board-card,
.analysis-context-card,
.analysis-factor-card,
.skills-impact-card {
    transition:
        transform 0.34s ease,
        border-color 0.34s ease,
        box-shadow 0.34s ease,
        background 0.34s ease;
}

.problem-index,
.blueprint-step,
.analysis-factor-icon {
    transition:
        transform 0.34s ease,
        box-shadow 0.34s ease,
        background 0.34s ease;
}

.problem-card:hover,
.blueprint-card:hover,
.evidence-board-card:hover,
.analysis-context-card:hover,
.analysis-factor-card:hover,
.skills-impact-card:hover {
    transform: translateY(-8px);
    border-color: rgba(139, 92, 246, 0.42);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(139, 92, 246, 0.08);
}

[data-theme="light"] .problem-card:hover,
[data-theme="light"] .blueprint-card:hover,
[data-theme="light"] .evidence-board-card:hover,
[data-theme="light"] .analysis-context-card:hover,
[data-theme="light"] .analysis-factor-card:hover,
[data-theme="light"] .skills-impact-card:hover {
    box-shadow:
        0 18px 34px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(139, 92, 246, 0.06);
}

.problem-card:hover::after {
    transform: scale(1.08);
    opacity: 0.95;
}

.problem-card::after {
    transition: transform 0.34s ease, opacity 0.34s ease;
}

.problem-card:hover .problem-index,
.blueprint-card:hover .blueprint-step,
.analysis-factor-card:hover .analysis-factor-icon {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 12px 24px rgba(139, 92, 246, 0.18);
}

/* --- 5) Mobil taşma / performans modu --- */
html,
body {
    width: 100%;
    max-width: 100%;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

@media (hover: none) and (pointer: coarse) {
    .problem-card:hover,
    .blueprint-card:hover,
    .evidence-board-card:hover,
    .analysis-context-card:hover,
    .analysis-factor-card:hover,
    .skills-impact-card:hover,
    .skill-node:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .problem-card:hover .problem-index,
    .blueprint-card:hover .blueprint-step,
    .analysis-factor-card:hover .analysis-factor-icon,
    .node-red:hover i,
    .node-yellow:hover i,
    .node-green:hover i,
    .node-blue:not(.active):hover i {
        transform: none !important;
        filter: none !important;
    }
}

@media (max-width: 980px) {
    .skill-path {
        width: 100% !important;
    }

    .node-wrapper,
    .node-label {
        width: 150px;
        flex-basis: 150px;
    }

    .path-line {
        min-width: 42px;
        max-width: 110px;
    }
}

@media (max-width: 768px) {
    html,
    body,
    main,
    .page,
    .full-width-page {
        max-width: 100% !important;
        width: 100% !important;
    }

    body {
        overflow-x: hidden !important;
    }

    main {
        margin-top: 164px !important;
        padding-bottom: 42px !important;
    }

    .page,
    .full-width-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mobile-performance-mode .global-bg-elements,
    .mobile-performance-mode .orb {
        display: none !important;
    }

    .mobile-performance-mode .glass-card,
    .mobile-performance-mode .navbar-wrapper,
    .mobile-performance-mode .lms-wrapper,
    .mobile-performance-mode .glass-nav,
    .mobile-performance-mode .autocomplete-items,
    .mobile-performance-mode .glass-btn,
    .mobile-performance-mode .theme-switch-wrapper,
    .mobile-performance-mode .skill-node {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mobile-performance-mode .glass-card,
    .mobile-performance-mode .glass-card-inner,
    .mobile-performance-mode .quiz-side-panel,
    .mobile-performance-mode .quiz-center-panel,
    .mobile-performance-mode .problem-card,
    .mobile-performance-mode .blueprint-card,
    .mobile-performance-mode .evidence-board-card {
        box-shadow: none !important;
    }

    .mobile-performance-mode *,
    .mobile-performance-mode *::before,
    .mobile-performance-mode *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.18s !important;
        scroll-behavior: auto !important;
    }

    .mobile-performance-mode .page.active,
    .mobile-performance-mode .animate-up,
    .mobile-performance-mode .animate-node-in,
    .mobile-performance-mode .animate-line-in,
    .mobile-performance-mode .mentor-message,
    .mobile-performance-mode .living-cert-container {
        animation: none !important;
    }

    .hero-text,
    .hero-image,
    .analysis-result-v2,
    .impact-storyboard,
    .score-explain-board,
    .logic-box-v2,
    .test-wizard-container,
    .quiz-side-panel,
    .quiz-center-panel,
    .quiz-question-card,
    .quiz-result-card {
        max-width: 100% !important;
    }

    .hero-text {
        padding: 24px 16px !important;
    }

    .hero-image {
        padding: 16px 8px !important;
    }

    .main-img-placeholder {
        width: 100% !important;
        height: auto !important;
    }

    .section-header h2,
    .universe-titles h2 {
        font-size: clamp(1.45rem, 6vw, 1.85rem) !important;
        line-height: 1.25;
    }

    .hero-text h1 {
        font-size: clamp(1.9rem, 8vw, 2.45rem) !important;
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    .section-header p,
    .universe-titles p,
    .problem-card p,
    .blueprint-card p,
    .evidence-board-card p,
    .analysis-context-card p,
    .analysis-factor-card p,
    .skills-impact-card p,
    .logic-source-note p,
    .score-explain-head p {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .navbar-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .nav-links {
        gap: 8px !important;
        scroll-snap-type: x proximity;
    }

    .nav-links li {
        scroll-snap-align: start;
    }

    .capsule-nav a {
        padding: 8px 14px !important;
        font-size: 0.88rem !important;
    }

    .theme-switch-wrapper {
        height: 32px !important;
        padding: 3px !important;
    }

    .problem-map-section,
    .solution-blueprint-section,
    .evidence-board-section {
        margin-top: 42px !important;
    }

    .problem-map-grid,
    .solution-blueprint-grid,
    .evidence-board-grid,
    .analysis-context-board,
    .analysis-factor-grid,
    .skills-impact-grid,
    .quiz-arena-layout,
    .score-stat-grid,
    .quiz-result-metrics {
        width: 100% !important;
        max-width: 100% !important;
    }

    .analysis-result-v2 {
        padding: 18px !important;
        overflow: hidden;
    }

    .result-grid-v2,
    .impact-kpi-grid,
    .impact-viz-grid,
    .analysis-insight-grid,
    .analysis-context-board,
    .evidence-board-grid,
    .skills-impact-grid {
        grid-template-columns: 1fr !important;
    }

    .risk-display-v2 {
        padding: 20px 14px !important;
    }

    .huge-risk-text {
        font-size: clamp(3.4rem, 18vw, 4.4rem) !important;
    }

    .logic-source-note {
        padding: 14px !important;
    }

    .quiz-arena-layout {
        width: 100% !important;
        gap: 14px !important;
        margin-top: 16px !important;
    }

    .quiz-side-panel,
    .quiz-center-panel {
        width: 100% !important;
    }

    .quiz-topline {
        align-items: stretch !important;
    }

    .quiz-level-badge,
    .quiz-counter,
    .quiz-timer,
    #quiz-topic-chip,
    #quiz-question-score-chip {
        justify-content: center;
        width: 100%;
    }

    .quiz-question-text {
        font-size: clamp(1.1rem, 5vw, 1.35rem) !important;
    }

    .quiz-option-btn {
        padding: 12px !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .quiz-option-btn span:last-child,
    .quiz-feedback,
    .quiz-hint-box,
    .motivation-card p {
        overflow-wrap: anywhere;
    }

    .score-hero strong {
        font-size: 2.35rem !important;
    }

    .universe-section.active {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 34px !important;
    }

    .skill-tree-wrapper {
        min-height: 0 !important;
        padding: 14px 4px 24px !important;
        overflow: visible !important;
    }

    .skill-path {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .node-wrapper,
    .node-label {
        width: 100% !important;
        max-width: 250px !important;
        flex-basis: auto !important;
    }

    .skill-node {
        width: 82px !important;
        height: 82px !important;
        font-size: 2rem !important;
    }

    .path-line {
        width: 4px !important;
        height: 46px !important;
        min-width: 4px !important;
        max-width: 4px !important;
        margin: 0 !important;
    }

    .lms-wrapper {
        width: 100% !important;
        padding: 16px 12px !important;
    }

    .lms-header-bar {
        gap: 12px !important;
    }

    .lms-header-bar h3 {
        font-size: 1.05rem !important;
        text-align: center;
    }

    .lms-left-panel,
    .lms-center-panel,
    .lms-right-panel {
        min-width: 0 !important;
        width: 100% !important;
        padding: 16px !important;
    }

    .lms-mission-header h2 {
        font-size: 1.35rem !important;
        overflow-wrap: anywhere;
    }

    .lms-mission-content,
    .mentor-text {
        padding-right: 0 !important;
        overflow-wrap: anywhere;
    }

    .mentor-chat-area {
        max-height: 280px !important;
    }

    .living-cert-container {
        max-height: none !important;
        padding: 18px !important;
        overflow: visible !important;
    }

    .cert-username {
        font-size: 1.3rem !important;
        overflow-wrap: anywhere;
    }

    .cert-avatar {
        width: 58px !important;
        height: 58px !important;
        font-size: 2rem !important;
    }
}

@media (max-width: 420px) {
    main {
        margin-top: 174px !important;
    }

    .navbar-actions {
        gap: 10px !important;
    }

    .logo {
        font-size: 1.2rem !important;
    }

    .btn-primary,
    .btn-capsule,
    .btn-pdf {
        width: 100%;
        justify-content: center;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
    }

    .problem-card,
    .blueprint-card,
    .evidence-board-card,
    .analysis-context-card,
    .analysis-factor-card,
    .skills-impact-card {
        padding: 16px !important;
    }
}


/* =========================================================
   MOBİLDE MASAÜSTÜ HİSSİ + NAV KAPSÜL DÜZELTMELERİ
   17.05.2026 - Üst menü, hero ve kart yoğunluğu optimize edildi.
   ========================================================= */
.capsule-nav a,
.capsule-nav a:hover,
.capsule-nav a:active,
.capsule-nav a:focus,
.capsule-nav a:focus-visible,
.capsule-nav a.active {
    border-radius: 999px !important;
    -webkit-tap-highlight-color: transparent;
}

.capsule-nav a:focus,
.capsule-nav a:active {
    outline: none !important;
}

.capsule-nav a:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 2px rgba(139, 92, 246, 0.22),
        0 0 0 4px rgba(139, 92, 246, 0.12),
        0 0 18px rgba(139, 92, 246, 0.28) !important;
}

@media (max-width: 900px) {
    main {
        margin-top: 104px !important;
        padding-bottom: 48px !important;
    }

    .navbar-wrapper {
        min-height: 92px;
    }

    .navbar-container {
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr) auto;
        align-items: center !important;
        gap: 10px !important;
        min-height: 92px;
        padding: 10px 14px !important;
    }

    .logo {
        width: 84px !important;
        min-width: 84px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        line-height: 1.28;
        font-size: 1rem !important;
    }

    .logo-text {
        display: block;
        width: 84px;
        max-width: 84px;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.32;
        font-size: 0.98rem;
    }

    .main-nav {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .nav-links {
        width: 100%;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 4px 1px 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .capsule-nav a {
        min-height: 34px;
        padding: 7px 14px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-size: 0.79rem !important;
        line-height: 1;
        transform: none !important;
    }

    .capsule-nav a:hover {
        transform: none !important;
    }

    .navbar-actions {
        width: auto !important;
        min-width: max-content;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .theme-switch-wrapper {
        width: 44px;
        height: 30px !important;
        padding: 3px !important;
        flex: 0 0 auto;
    }

    .theme-switch {
        width: 38px;
        height: 24px;
    }

    .slider:before {
        width: 18px;
        height: 18px;
        bottom: 3px;
        left: 3px;
    }

    input:checked + .slider:before {
        transform: translateX(14px);
    }

    .slider i {
        top: 6px;
        font-size: 9px;
    }

    .fa-sun {
        left: 5px;
    }

    .fa-moon {
        right: 5px;
    }

    .user-info {
        width: 72px;
        max-width: 72px;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        text-align: center;
        line-height: 1.14;
        font-size: 0.71rem;
    }

    #username-display {
        width: 72px;
        max-width: 72px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .login-btn,
    .logout-btn {
        display: none !important;
    }

    .hero-section {
        min-height: 292px;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        gap: 14px;
        text-align: left !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .hero-text {
        flex: 1.08;
        min-width: 0;
        text-align: left !important;
        padding: 28px 18px 28px 36px !important;
    }

    .hero-text h1 {
        font-size: clamp(2rem, 5.8vw, 3rem) !important;
        line-height: 1.18 !important;
        margin-bottom: 16px !important;
    }

    .hero-text p {
        max-width: 400px;
        margin-bottom: 22px !important;
        font-size: clamp(0.9rem, 2.1vw, 1rem) !important;
        line-height: 1.55 !important;
    }

    .hero-buttons {
        width: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-capsule {
        width: auto !important;
        min-height: 40px;
        padding: 10px 20px !important;
        font-size: 0.88rem !important;
    }

    .hero-image {
        flex: 0.92;
        min-width: 0;
        padding: 18px 22px 18px 0 !important;
    }

    .main-img-placeholder {
        width: 100% !important;
        max-width: 280px !important;
        min-height: 220px;
        max-height: 240px;
        margin: 0 auto !important;
        object-fit: cover !important;
        display: block;
    }

    .global-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .global-card {
        min-height: 194px;
        padding: 18px 16px !important;
    }

    .global-card .card-icon {
        margin-bottom: 12px !important;
    }

    .global-card h3 {
        font-size: 0.95rem !important;
        margin-bottom: 10px !important;
    }

    .global-card p,
    .evidence-tag {
        font-size: 0.78rem !important;
        line-height: 1.55 !important;
    }

    .problem-map-grid,
    .solution-blueprint-grid,
    .analysis-factor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .problem-card,
    .blueprint-card,
    .analysis-factor-card {
        min-height: auto !important;
        padding: 18px 16px !important;
    }

    .problem-card h3,
    .blueprint-card h3,
    .analysis-factor-card h4 {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    .problem-card p,
    .blueprint-card p,
    .analysis-factor-card p {
        font-size: 0.8rem !important;
        line-height: 1.62 !important;
    }

    .problem-index,
    .blueprint-step {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.78rem !important;
    }

    .section-header,
    .compact-header {
        margin-bottom: 24px !important;
    }

    .section-header h2,
    .universe-titles h2 {
        font-size: clamp(1.42rem, 4vw, 1.82rem) !important;
    }

    .section-header p,
    .universe-titles p {
        font-size: 0.88rem !important;
        line-height: 1.62 !important;
    }
}

@media (max-width: 620px) {
    main {
        margin-top: 146px !important;
    }

    .navbar-wrapper {
        min-height: 132px;
    }

    .navbar-container {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "logo actions"
            "nav nav";
        gap: 8px !important;
        min-height: 132px;
        padding: 10px 12px !important;
    }

    .logo {
        grid-area: logo;
        width: auto !important;
        min-width: 0 !important;
    }

    .logo-text {
        width: auto !important;
        max-width: 180px !important;
        font-size: 1rem;
    }

    .main-nav {
        grid-area: nav;
    }

    .navbar-actions {
        grid-area: actions;
    }

    .hero-section {
        min-height: 0;
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px;
    }

    .hero-text {
        width: 100%;
        text-align: center !important;
        padding: 24px 18px 12px !important;
    }

    .hero-text p {
        max-width: none;
    }

    .hero-buttons {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-capsule {
        width: 100% !important;
        justify-content: center !important;
    }

    .hero-image {
        width: 100%;
        padding: 10px 18px 22px !important;
    }

    .main-img-placeholder {
        max-width: 100% !important;
        min-height: 210px;
        max-height: 260px;
    }

    .global-grid,
    .problem-map-grid,
    .solution-blueprint-grid,
    .analysis-factor-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   ÖN TEST - SON TEST - ROZET - SERTİFİKA MERKEZİ
   ========================================================= */
.journey-control-center,
.achievement-card,
.journey-certificate-panel {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto 24px;
    padding: 26px;
    position: relative;
    overflow: hidden;
}

.journey-control-center::before,
.achievement-card::before,
.journey-certificate-panel::before {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.13), transparent 38%),
        radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.10), transparent 34%);
    opacity: 0.95;
}

.journey-control-center > *,
.achievement-card > *,
.journey-certificate-panel > * {
    position: relative;
    z-index: 1;
}

.journey-control-top,
.certificate-panel-head,
.achievement-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.journey-control-top h3,
.achievement-card-head h3,
.certificate-panel-head h3 {
    color: var(--text-main);
    font-size: clamp(1.3rem, 2vw, 1.85rem);
    line-height: 1.35;
    margin: 10px 0 8px;
}

.journey-control-top p {
    color: var(--text-muted);
    max-width: 840px;
    line-height: 1.72;
    margin: 0;
}

.journey-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 13px;
    border: 1px solid rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.12);
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.84rem;
}

.journey-certificate-orb {
    width: 150px;
    min-width: 150px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(139, 92, 246, 0.34);
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 24%),
        conic-gradient(from 180deg, rgba(139, 92, 246, 0.95), rgba(16, 185, 129, 0.88), rgba(59, 130, 246, 0.92), rgba(139, 92, 246, 0.95));
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.journey-certificate-orb strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
}

.journey-certificate-orb span {
    display: block;
    font-size: 0.78rem;
    margin-top: 6px;
    max-width: 90px;
}

.journey-step-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.journey-step-card {
    min-height: 120px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.50);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.journey-step-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.62);
    background: rgba(139, 92, 246, 0.12);
}

.journey-step-card.is-complete {
    border-color: rgba(16, 185, 129, 0.48);
    background: rgba(16, 185, 129, 0.12);
}

.journey-step-card.is-active {
    border-color: rgba(245, 158, 11, 0.52);
    background: rgba(245, 158, 11, 0.10);
}

.journey-step-card.is-locked {
    opacity: 0.72;
}

.journey-step-index {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: rgba(139, 92, 246, 0.17);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: var(--text-main);
}

.journey-step-card strong,
.journey-step-card small {
    display: block;
}

.journey-step-card strong {
    color: var(--text-main);
    font-size: 0.98rem;
}

.journey-step-card small {
    color: var(--text-muted);
    line-height: 1.45;
}

.journey-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.journey-metric-card {
    padding: 18px;
    border-radius: 20px;
    display: grid;
    gap: 7px;
}

.journey-metric-card span,
.journey-metric-card small {
    color: var(--text-muted);
}

.journey-metric-card strong {
    color: var(--text-main);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.journey-action-row,
.certificate-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.journey-action-row button:disabled,
.certificate-panel-actions button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none !important;
}

.achievement-hub-grid {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: 1.45fr 0.95fr;
    gap: 22px;
}

.achievement-card {
    width: 100%;
    margin: 0;
}

.achievement-count {
    border-radius: 999px;
    padding: 10px 14px;
    color: var(--text-main);
    border: 1px solid rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.12);
    font-weight: 800;
    white-space: nowrap;
}

.badge-center-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.badge-card {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: center;
    min-height: 110px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.50);
    padding: 16px;
    transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.badge-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.65);
    background: rgba(139, 92, 246, 0.12);
}

.badge-card.earned {
    border-color: rgba(16, 185, 129, 0.48);
    background: rgba(16, 185, 129, 0.10);
}

.badge-card.locked {
    opacity: 0.72;
}

.badge-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 1.25rem;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.24);
}

.badge-card.earned .badge-icon {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.28);
}

.badge-copy strong {
    color: var(--text-main);
    display: block;
    margin-bottom: 6px;
}

.badge-copy p {
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    font-size: 0.88rem;
}

.badge-state {
    display: inline-flex;
    margin-top: 9px;
    border-radius: 999px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--text-main);
}

.badge-card.earned .badge-state {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.12);
}

.certificate-checklist {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.certificate-check-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.48);
}

.certificate-check-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-muted);
}

.certificate-check-item.complete {
    border-color: rgba(16, 185, 129, 0.32);
    background: rgba(16, 185, 129, 0.09);
}

.certificate-check-item.complete .certificate-check-icon {
    color: #10b981;
    background: rgba(16, 185, 129, 0.14);
}

.certificate-check-item strong {
    display: block;
    color: var(--text-main);
    margin-bottom: 4px;
}

.certificate-check-item p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
    font-size: 0.9rem;
}

.certificate-verdict {
    border-radius: 22px;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.10);
    color: var(--text-main);
    line-height: 1.65;
}

.certificate-verdict.ready {
    border-color: rgba(16, 185, 129, 0.32);
    background: rgba(16, 185, 129, 0.12);
}

.certificate-verdict strong {
    display: block;
    margin-bottom: 6px;
}

.journey-certificate-panel {
    margin-top: 28px;
}

.journey-certificate-preview {
    padding: 0;
}

.certificate-sheet {
    border-radius: 28px;
    border: 1px solid rgba(139, 92, 246, 0.30);
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.14), transparent 32%),
        rgba(11, 13, 20, 0.84);
    padding: 34px;
    color: #f8fafc;
    overflow: hidden;
}

[data-theme="light"] .certificate-sheet {
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.16), transparent 34%),
        radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.10), transparent 32%),
        rgba(255,255,255,0.96);
    color: #0f172a;
}

.certificate-sheet-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px dashed rgba(255,255,255,0.14);
}

[data-theme="light"] .certificate-sheet-top {
    border-bottom-color: rgba(15,23,42,0.12);
}

.certificate-brand {
    display: grid;
    gap: 8px;
}

.certificate-brand strong {
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.certificate-brand span,
.certificate-id {
    color: #cbd5e1;
}

[data-theme="light"] .certificate-brand span,
[data-theme="light"] .certificate-id {
    color: #475569;
}

.certificate-id {
    text-align: right;
    line-height: 1.6;
    font-size: 0.9rem;
}

.certificate-main-title {
    text-align: center;
    margin: 28px 0 18px;
}

.certificate-main-title span {
    display: inline-flex;
    border-radius: 999px;
    padding: 8px 14px;
    border: 1px solid rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.12);
    font-weight: 800;
    margin-bottom: 14px;
}

.certificate-main-title h4 {
    font-size: clamp(1.5rem, 2.4vw, 2.35rem);
    margin: 0 0 10px;
}

.certificate-main-title p {
    max-width: 940px;
    margin: 0 auto;
    color: #cbd5e1;
    line-height: 1.75;
}

[data-theme="light"] .certificate-main-title p {
    color: #475569;
}

.certificate-recipient {
    margin: 28px auto;
    max-width: 920px;
    text-align: center;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
}

[data-theme="light"] .certificate-recipient {
    border-color: rgba(15,23,42,0.10);
    background: rgba(15,23,42,0.04);
}

.certificate-recipient small {
    display: block;
    color: #94a3b8;
    margin-bottom: 8px;
}

.certificate-recipient strong {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.certificate-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 24px 0;
}

.certificate-stat-item {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
}

[data-theme="light"] .certificate-stat-item {
    border-color: rgba(15,23,42,0.10);
    background: rgba(15,23,42,0.04);
}

.certificate-stat-item span,
.certificate-stat-item strong {
    display: block;
}

.certificate-stat-item span {
    color: #94a3b8;
    font-size: 0.84rem;
    margin-bottom: 7px;
}

.certificate-stat-item strong {
    font-size: 1.35rem;
}

.certificate-achievement-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 24px;
}

.certificate-summary-card {
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
}

[data-theme="light"] .certificate-summary-card {
    border-color: rgba(15,23,42,0.10);
    background: rgba(15,23,42,0.04);
}

.certificate-summary-card h5 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.certificate-summary-card p,
.certificate-summary-card li {
    color: #cbd5e1;
    line-height: 1.7;
}

[data-theme="light"] .certificate-summary-card p,
[data-theme="light"] .certificate-summary-card li {
    color: #475569;
}

.certificate-summary-card ul {
    margin: 0;
    padding-left: 18px;
}

.certificate-footer-row {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255,255,255,0.14);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    color: #cbd5e1;
}

[data-theme="light"] .certificate-footer-row {
    border-top-color: rgba(15,23,42,0.12);
    color: #475569;
}

.certificate-lock-note {
    padding: 24px;
    border-radius: 24px;
    border: 1px dashed rgba(245, 158, 11, 0.36);
    background: rgba(245, 158, 11, 0.10);
    color: var(--text-main);
    line-height: 1.7;
}

.assessment-mode-label {
    display: inline-flex;
    margin-left: 8px;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.25);
    font-size: 0.78rem;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .journey-step-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .journey-step-card:last-child {
        grid-column: 1 / -1;
    }
    .journey-metrics-grid,
    .certificate-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .achievement-hub-grid,
    .certificate-achievement-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .journey-control-center,
    .achievement-card,
    .journey-certificate-panel,
    .achievement-hub-grid {
        width: min(100%, calc(100% - 28px));
    }
    .journey-control-center,
    .achievement-card,
    .journey-certificate-panel,
    .certificate-sheet {
        padding: 18px;
    }
    .journey-control-top,
    .certificate-panel-head,
    .achievement-card-head,
    .certificate-sheet-top {
        flex-direction: column;
    }
    .journey-certificate-orb {
        width: 120px;
        min-width: 120px;
    }
    .journey-step-strip,
    .journey-metrics-grid,
    .badge-center-grid,
    .certificate-stat-grid {
        grid-template-columns: 1fr;
    }
    .journey-step-card:last-child {
        grid-column: auto;
    }
    .journey-action-row,
    .certificate-panel-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .journey-action-row button,
    .certificate-panel-actions button {
        width: 100%;
        justify-content: center;
    }
    .badge-card {
        grid-template-columns: 48px 1fr;
    }
    .badge-icon {
        width: 48px;
        height: 48px;
    }
    .certificate-id {
        text-align: left;
    }
}

/* Mobil performans modunda animasyonu kapatılan içerikler görünür kalsın */
.mobile-performance-mode .animate-up {
    opacity: 1 !important;
    transform: none !important;
}

/* =========================================================
   SERTİFİKA YOLCULUĞU / PRATİK ARENA AYRIMI
   ========================================================= */
.arena-page .section-header {
    margin-bottom: 20px;
}

.arena-guidance-strip {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto 22px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.arena-guidance-strip h3 {
    color: var(--text-main);
    margin: 10px 0 6px;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.arena-guidance-strip p {
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 760px;
}

.arena-guidance-strip .btn-outline {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .arena-guidance-strip {
        width: min(100%, calc(100% - 28px));
        padding: 18px;
        flex-direction: column;
        align-items: flex-start;
    }

    .arena-guidance-strip .btn-outline {
        width: 100%;
        justify-content: center;
    }
}



/* =========================================================
   ÜST BANNER + TEST SEKME DÜZELTMESİ
   - Masaüstünde kapsül metinleri tek satır kalır.
   - Navbar sağa/sola daha geniş nefes alanı kullanır.
   - Giriş butonu taşmaz.
   - Tüm kapsüller aynı düşey hizada görünür.
   ========================================================= */
@media (min-width: 901px) {
    .navbar-container {
        width: min(1840px, calc(100% - 56px));
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        gap: 22px;
    }

    .logo {
        flex: 0 0 258px;
        min-width: 258px;
        line-height: 1.24;
    }

    .logo-text {
        white-space: normal;
    }

    .main-nav {
        flex: 1 1 auto;
        min-width: 0;
    }

    .nav-links {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 12px;
        min-width: 0;
    }

    .nav-links li {
        flex: 0 0 auto;
    }

    .capsule-nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 0 24px;
        white-space: nowrap;
        line-height: 1;
        box-sizing: border-box;
    }

    .navbar-actions {
        flex: 0 0 auto;
        min-width: 318px;
        justify-content: flex-end;
        gap: 18px;
    }

    .user-info {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    #username-display {
        white-space: nowrap;
    }

    .login-btn,
    .logout-btn {
        height: 52px;
        min-width: 128px;
        padding: 0 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        line-height: 1;
        box-sizing: border-box;
        flex: 0 0 auto;
    }
}

/* Orta genişlikte menü yine tek satır kalsın; yalnızca kapsüller biraz sıkışsın. */
@media (min-width: 901px) and (max-width: 1480px) {
    .navbar-container {
        width: calc(100% - 32px);
        gap: 14px;
    }

    .logo {
        flex-basis: 212px;
        min-width: 212px;
        font-size: 1.24rem;
    }

    .nav-links {
        gap: 8px;
    }

    .capsule-nav a {
        min-height: 48px;
        padding: 0 18px;
        font-size: 0.9rem;
    }

    .navbar-actions {
        min-width: 286px;
        gap: 12px;
    }

    .login-btn,
    .logout-btn {
        height: 48px;
        min-width: 116px;
        padding: 0 18px;
    }
}


/* =========================================================
   ÜST BANNER MERKEZLEME İNCE AYARI
   - Önceki düzeltmedeki fazla sağ/sol açılmayı dengeler.
   - Menü, logo ve giriş alanı merkeze daha yakın durur.
   ========================================================= */
@media (min-width: 901px) {
    .navbar-container {
        width: min(1660px, calc(100% - 110px));
        gap: 18px;
    }

    .logo {
        flex-basis: 244px;
        min-width: 244px;
    }

    .navbar-actions {
        min-width: 304px;
    }
}

@media (min-width: 901px) and (max-width: 1480px) {
    .navbar-container {
        width: calc(100% - 56px);
        gap: 14px;
    }

    .logo {
        flex-basis: 214px;
        min-width: 214px;
    }

    .navbar-actions {
        min-width: 278px;
    }
}

/* =========================================================
   ÜST BANNER KAPSÜLLERİNİ TEKRAR MİNİMAL HALE GETİRME
   - Önceki düzeltmelerin işlevi korunur.
   - Menü kapsülleri eski daha ince/şık oranına döner.
   - Giriş/çıkış butonu da banner ile uyumlu biçimde incelir.
   ========================================================= */
@media (min-width: 901px) {
    .capsule-nav a {
        min-height: unset !important;
        height: auto !important;
        padding: 8px 20px !important;
        font-size: 0.95rem;
        line-height: 1.2 !important;
    }

    .login-btn,
    .logout-btn {
        min-height: unset !important;
        height: 38px !important;
        min-width: 112px !important;
        padding: 0 18px !important;
        font-size: 0.84rem;
        line-height: 1 !important;
    }
}

@media (min-width: 901px) and (max-width: 1480px) {
    .capsule-nav a {
        padding: 8px 18px !important;
        font-size: 0.9rem;
    }

    .login-btn,
    .logout-btn {
        height: 36px !important;
        min-width: 108px !important;
        padding: 0 16px !important;
    }
}

/* =========================================================
   2026-05-19 HATA DÜZELTME + GÜVENLİK ODAKLI UI İYİLEŞTİRMELERİ
   ========================================================= */
.auth-save-note {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(139, 92, 246, 0.24);
    background: rgba(139, 92, 246, 0.08);
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.auth-save-note i {
    color: var(--primary);
    margin-top: 3px;
}

/* Ana sayfadaki "Yapay Zekânın İş Ortamına Etkileri" kartlarına
   üstteki veri kartları kadar görünür hover geri bildirimi ekler. */
.problem-card {
    transition: transform 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-color 0.32s ease,
                box-shadow 0.32s ease,
                background 0.32s ease;
}
.problem-card:hover {
    transform: translateY(-14px) scale(1.035);
    border-color: rgba(139, 92, 246, 0.72);
    background: rgba(var(--card-bg-inner-rgb), 0.92);
    box-shadow: 0 24px 44px rgba(139, 92, 246, 0.26);
}
.problem-card:hover h3 i {
    animation: pulseGlow 1.8s infinite;
}
.problem-card:hover .problem-index {
    transform: translateY(-2px) scale(1.06);
}

/* Beceri simülasyonunda içerik uzadığında panel yüksekliğini sabit tutar;
   metinler panel içinde kayar, gönderme/ilerleme alanı aşağı kaçmaz. */
@media (min-width: 981px) {
    .lms-wrapper {
        height: min(82vh, 920px);
        min-height: 690px;
        overflow: hidden;
    }

    .lms-container {
        height: 100%;
        min-height: 0;
        align-items: stretch;
    }

    .lms-left-panel,
    .lms-center-panel,
    .lms-right-panel {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .lms-right-panel {
        position: sticky;
        top: 92px;
        align-self: start;
    }

    .mentor-chat-area {
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 8px;
    }

    .lms-mission-content {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .lms-action-area {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin-top: auto;
        padding: 16px 0 2px;
        background: linear-gradient(180deg, rgba(var(--card-bg-inner-rgb), 0), rgba(var(--card-bg-inner-rgb), 0.96) 34%);
        backdrop-filter: blur(12px);
    }
}

#btn-skip-task {
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Dar ekranda sabit paneller yerine doğal akış tercih edilir. */
@media (max-width: 980px) {
    .lms-wrapper {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    .lms-right-panel {
        position: static !important;
        top: auto !important;
        max-height: none !important;
    }
    .lms-action-area {
        position: static !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }
}

/* Ctrl+P / tarayıcı yazdırma çıktılarında dekoratif görselleri saklar.
   Özel analiz PDF'i kendi ayrı şablonuyla çalışmaya devam eder. */
@media print {
    .navbar-wrapper,
    .global-bg-elements,
    .hero-image,
    .main-img-placeholder,
    img.main-img-placeholder {
        display: none !important;
    }
}

/* =========================================================
   AI MENTOR SAĞ PANEL KIZAKLI YAPI DÜZELTMESİ
   Sağ paneldeki mesajlar büyüdükçe LMS grid yüksekliğinin aşağı
   doğru uzamasını engeller; mesajlar panel içinde kayar.
   ========================================================= */
@media (min-width: 981px) {
    .lms-wrapper {
        height: min(82vh, 920px) !important;
        max-height: min(82vh, 920px) !important;
        min-height: 690px !important;
        overflow: hidden !important;
    }

    .lms-container {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-rows: minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .lms-left-panel,
    .lms-center-panel,
    .lms-right-panel {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .lms-right-panel {
        position: relative !important;
        top: auto !important;
        align-self: stretch !important;
    }

    .mentor-chat-area {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        padding-right: 10px;
    }

    .lms-mission-content {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .lms-action-area {
        flex: 0 0 auto !important;
    }
}


/* =========================================================
   SSS, SADE İLETİŞİM, DİL SEÇİCİ VE AKTİF TEMA VURGUSU
   ========================================================= */
.language-switch-wrapper {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(var(--card-bg-inner-rgb), 0.64);
    flex: 0 0 auto;
}
.language-btn {
    min-width: 32px;
    height: 24px;
    padding: 0 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.22s ease, color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.language-btn:hover,
.language-btn.active {
    color: var(--text-main);
    background: rgba(139, 92, 246, 0.24);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.32);
}
.language-btn:hover { transform: translateY(-1px); }

/* Temada aktif ikon mor kapsül etkisiyle öne çıkar */
.theme-switch-wrapper {
    position: relative;
    background: rgba(var(--card-bg-inner-rgb), 0.64) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.slider:before {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.3), rgba(139,92,246,0.52) 45%, rgba(139,92,246,0.28) 100%) !important;
    border: 1px solid rgba(167, 139, 250, 0.8);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.48), inset 0 0 10px rgba(255,255,255,0.12);
}
.slider i {
    transition: color 0.24s ease, opacity 0.24s ease, filter 0.24s ease, transform 0.24s ease;
}
body[data-theme="dark"] .slider .fa-moon,
body[data-theme="light"] .slider .fa-sun {
    opacity: 1;
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.95));
}
body[data-theme="dark"] .slider .fa-moon { color: #f8fafc; }
body[data-theme="light"] .slider .fa-sun { color: #fbbf24; }
body[data-theme="dark"] .slider .fa-sun,
body[data-theme="light"] .slider .fa-moon {
    opacity: 0.42;
    filter: none;
    transform: scale(0.94);
}

.faq-layout {
    width: min(1180px, calc(100% - 40px));
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: minmax(290px, 0.86fr) minmax(0, 1.34fr);
    gap: 24px;
    align-items: start;
}
.faq-highlight {
    padding: 30px;
    position: sticky;
    top: 104px;
    overflow: hidden;
}
.faq-highlight::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -58px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.24), transparent 72%);
    pointer-events: none;
}
.faq-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 13px;
    margin-bottom: 16px;
    color: var(--text-main);
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.18);
    font-size: 0.82rem;
    font-weight: 700;
}
.faq-highlight h3 {
    color: var(--text-main);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.3;
    margin-bottom: 14px;
}
.faq-highlight p {
    color: var(--text-muted);
    line-height: 1.78;
    margin-bottom: 22px;
}
.faq-accordion { display: grid; gap: 14px; }
.faq-item {
    padding: 0;
    overflow: hidden;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.faq-item:hover {
    transform: translateY(-3px);
    border-color: rgba(139, 92, 246, 0.52);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16), 0 0 20px rgba(139, 92, 246, 0.12);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    color: var(--text-main);
    font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    color: var(--primary);
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.25);
    transition: transform 0.25s ease;
    flex: 0 0 auto;
}
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item p {
    margin: 0;
    padding: 0 24px 24px;
    color: var(--text-muted);
    line-height: 1.75;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.contact-single-layout {
    width: min(1040px, calc(100% - 40px));
    margin: 24px auto 0;
}
.contact-focus-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 34px;
    position: relative;
    overflow: hidden;
}
.contact-focus-card::before {
    content: "";
    position: absolute;
    inset: auto -80px -110px auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,0.18), rgba(139,92,246,0.12) 48%, transparent 74%);
    pointer-events: none;
}
.contact-mail-icon {
    width: 74px;
    height: 74px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    color: var(--primary);
    border: 1px solid rgba(139, 92, 246, 0.34);
    background: rgba(139, 92, 246, 0.16);
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.18);
}
.contact-focus-copy span {
    display: inline-flex;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 7px;
}
.contact-focus-copy h3 {
    color: var(--text-main);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.35;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}
.contact-focus-copy p {
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}
.contact-mail-btn {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

@media (max-width: 1120px) {
    .navbar-actions { gap: 10px !important; }
    .language-btn { min-width: 30px; padding: 0 8px; }
}
@media (max-width: 980px) {
    .faq-layout {
        grid-template-columns: 1fr;
        width: min(100%, calc(100% - 28px));
    }
    .faq-highlight { position: static; }
    .contact-single-layout { width: min(100%, calc(100% - 28px)); }
    .contact-focus-card {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    .contact-focus-copy p { max-width: 680px; }
}
@media (max-width: 760px) {
    .language-switch-wrapper {
        min-height: 28px;
        padding: 2px;
    }
    .language-btn {
        min-width: 28px;
        height: 22px;
        padding: 0 7px;
        font-size: 0.68rem;
    }
    .faq-item summary { padding: 18px; font-size: 0.96rem; }
    .faq-item p { padding: 0 18px 18px; }
    .contact-focus-card { padding: 22px; }
    .contact-mail-icon { width: 62px; height: 62px; border-radius: 20px; font-size: 1.55rem; }
    .contact-mail-btn { width: 100%; }
}


/* =========================================================
   DİL DEĞİŞİMİNDE SABİT ÜST BANNER
   - İngilizce logonun iki satıra düşmesini engeller.
   - TR/EN geçişinde header yüksekliği, hizası ve kapsül düzeni sabit kalır.
   ========================================================= */
@media (min-width: 901px) {
    .navbar-wrapper {
        min-height: 70px;
    }
    .navbar-container {
        min-height: 70px;
        align-items: center !important;
    }
    .logo {
        flex: 0 0 278px !important;
        min-width: 278px !important;
        max-width: 278px !important;
        min-height: 42px;
        align-items: center !important;
        overflow: visible;
    }
    .logo-text {
        white-space: nowrap !important;
        line-height: 1 !important;
        display: inline-block;
    }
    html[lang="tr"] .logo-text {
        font-size: 1.4rem !important;
        letter-spacing: -0.01em;
    }
    html[lang="en"] .logo-text {
        font-size: 1.08rem !important;
        letter-spacing: -0.02em;
    }
    .main-nav,
    .navbar-actions,
    .nav-links {
        align-items: center !important;
    }
}

@media (min-width: 901px) and (max-width: 1480px) {
    .logo {
        flex-basis: 252px !important;
        min-width: 252px !important;
        max-width: 252px !important;
    }
    html[lang="en"] .logo-text {
        font-size: 0.98rem !important;
    }
}


/* =========================================================
   19.05.2026 - TR/EN SEÇİCİSİ MASAÜSTÜ YERLEŞİM DÜZELTMESİ
   - İletişim kapsülü, dil seçicisine taşmaz.
   - Header, dil değişiminde aynı ölçüde kalır.
   - Menü alanı ve sağ aksiyon alanı birbirinin üstüne binmez.
   ========================================================= */
@media (min-width: 901px) {
    .navbar-container {
        width: min(1660px, calc(100% - 72px)) !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: 244px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .logo {
        width: 244px !important;
        min-width: 244px !important;
        max-width: 244px !important;
        flex: none !important;
    }

    .main-nav {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .nav-links {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(6px, 0.65vw, 10px) !important;
        overflow: visible !important;
    }

    .nav-links li {
        flex: 0 0 auto !important;
    }

    .capsule-nav a {
        padding-left: clamp(13px, 0.95vw, 20px) !important;
        padding-right: clamp(13px, 0.95vw, 20px) !important;
        font-size: clamp(0.86rem, 0.84vw, 0.95rem) !important;
    }

    .navbar-actions {
        width: auto !important;
        min-width: 0 !important;
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        white-space: nowrap !important;
    }

    .language-switch-wrapper,
    .theme-switch-wrapper,
    .user-info {
        flex: 0 0 auto !important;
    }

    .language-switch-wrapper {
        position: relative !important;
        z-index: 2 !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 901px) and (max-width: 1480px) {
    .navbar-container {
        width: calc(100% - 42px) !important;
        grid-template-columns: 214px minmax(0, 1fr) auto !important;
        gap: 12px !important;
    }

    .logo {
        width: 214px !important;
        min-width: 214px !important;
        max-width: 214px !important;
    }

    .nav-links {
        gap: 6px !important;
    }

    .capsule-nav a {
        padding-left: 13px !important;
        padding-right: 13px !important;
        font-size: 0.86rem !important;
    }

    .navbar-actions {
        gap: 8px !important;
    }
}


/* =========================================================
   19.05.2026 - HEADER HOVER, MOBİL HAMBURGER VE SKILL MAP DÜZELTMELERİ
   ========================================================= */
/* Menü kapsülü hover'da yukarı zıplamaz; yalnızca renk/ışıma değişir. */
.capsule-nav a:hover {
    transform: none !important;
}

.mobile-menu-toggle,
.mobile-menu-auth {
    display: none;
}

/* Masaüstünde üst banner grupları birbirine biraz daha yakın tutulur. */
@media (min-width: 901px) {
    .navbar-container {
        width: min(1520px, calc(100% - 56px)) !important;
        grid-template-columns: 238px minmax(0, 1fr) auto !important;
        gap: 10px !important;
    }

    .logo {
        width: 238px !important;
        min-width: 238px !important;
        max-width: 238px !important;
    }

    .nav-links {
        gap: clamp(6px, 0.55vw, 9px) !important;
    }

    .navbar-actions {
        gap: 9px !important;
    }
}

@media (min-width: 901px) and (max-width: 1480px) {
    .navbar-container {
        width: min(1380px, calc(100% - 34px)) !important;
        grid-template-columns: 210px minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }

    .logo {
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
    }

    html[lang="tr"] .logo-text {
        font-size: 1.24rem !important;
    }

    html[lang="en"] .logo-text {
        font-size: 0.92rem !important;
    }
}

/* Mobil üst banner: sol hamburger, ortada marka, sağda dil + tema. */
@media (max-width: 900px) {
    .navbar-wrapper {
        min-height: 74px !important;
        overflow: visible !important;
    }

    .navbar-container {
        width: 100% !important;
        max-width: none !important;
        min-height: 74px !important;
        padding: 10px 12px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        grid-template-rows: 54px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .mobile-menu-toggle {
        display: inline-grid !important;
        grid-column: 1;
        grid-row: 1;
        width: 40px;
        height: 40px;
        place-items: center;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: rgba(var(--card-bg-inner-rgb), 0.62);
        color: var(--text-main);
        font-size: 1.05rem;
        cursor: pointer;
        box-shadow: 0 0 0 rgba(139, 92, 246, 0);
        transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
        z-index: 1002;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle[aria-expanded="true"] {
        border-color: rgba(139, 92, 246, 0.68);
        background: rgba(139, 92, 246, 0.18);
        box-shadow: 0 0 16px rgba(139, 92, 246, 0.22);
    }

    .logo {
        grid-column: 2;
        grid-row: 1;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
        font-size: 1.1rem !important;
    }

    .logo-text {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
    }

    html[lang="tr"] .logo-text {
        font-size: clamp(0.94rem, 4vw, 1.08rem) !important;
    }

    html[lang="en"] .logo-text {
        font-size: clamp(0.82rem, 3.6vw, 1rem) !important;
    }

    .navbar-actions {
        grid-column: 3;
        grid-row: 1;
        width: auto !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .navbar-actions .user-info {
        display: none !important;
    }

    .language-switch-wrapper {
        min-height: 28px !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    .language-btn {
        min-width: 26px !important;
        height: 22px !important;
        padding: 0 6px !important;
        font-size: 0.64rem !important;
    }

    .theme-switch-wrapper {
        height: 30px !important;
        padding: 3px !important;
    }

    .theme-switch {
        width: 46px !important;
        height: 24px !important;
    }

    .slider:before {
        height: 18px !important;
        width: 18px !important;
        bottom: 3px !important;
    }

    input:checked + .slider:before {
        transform: translateX(20px) !important;
    }

    .slider i {
        top: 6px !important;
        font-size: 10px !important;
    }

    .fa-sun { left: 6px !important; }
    .fa-moon { right: 6px !important; }

    .main-nav {
        position: fixed !important;
        z-index: 1001 !important;
        top: 74px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 90px) !important;
        padding: 12px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(139, 92, 246, 0.28) !important;
        background: rgba(var(--card-bg-rgb), 0.98) !important;
        box-shadow: 0 24px 68px rgba(0, 0, 0, 0.36), 0 0 22px rgba(139, 92, 246, 0.12) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-10px) scale(0.985) !important;
        transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease !important;
    }

    .main-nav.mobile-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    .nav-links {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .nav-links li {
        width: 100% !important;
    }

    .capsule-nav a {
        width: 100% !important;
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 14px !important;
        font-size: 0.95rem !important;
        white-space: normal !important;
    }

    .mobile-menu-auth {
        display: grid !important;
        gap: 10px !important;
        margin-top: 12px !important;
        padding: 12px !important;
        border-radius: 18px !important;
        border: 1px solid var(--border) !important;
        background: rgba(var(--card-bg-inner-rgb), 0.54) !important;
    }

    .mobile-menu-auth #mobile-username-display {
        display: block !important;
        color: var(--text-muted) !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    .mobile-menu-auth .btn-outline {
        width: 100% !important;
        min-height: 42px !important;
        height: auto !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        font-weight: 700 !important;
    }

    body.mobile-menu-open {
        overflow: hidden !important;
    }

    main {
        margin-top: 92px !important;
    }
}

/* Mobil beceri haritası: animasyon kapansa bile düğümler görünür kalır. */
@media (max-width: 900px) {
    .mobile-performance-mode .animate-node-in,
    .mobile-performance-mode .animate-line-in,
    .mobile-performance-mode .node-wrapper,
    .mobile-performance-mode .path-line {
        opacity: 1 !important;
        transform: none !important;
    }

    .skill-tree-wrapper {
        width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .skill-path {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    .node-wrapper {
        width: min(100%, 290px) !important;
        max-width: 290px !important;
        margin: 8px auto !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .node-label {
        width: min(100%, 290px) !important;
        max-width: 290px !important;
    }

    .skill-node {
        width: 78px !important;
        height: 78px !important;
        font-size: 1.9rem !important;
    }

    .path-line {
        width: 4px !important;
        height: 40px !important;
        min-width: 4px !important;
        max-width: 4px !important;
        opacity: 0.92 !important;
        margin: 0 auto !important;
    }
}