/* ============================================
   ShiftCV — Production CSS
   Modern SaaS, mobile-first, dark+light
   ============================================ */

/* ── CSS Değişkenleri ─────────────────────── */
:root {
  --pr:        #2563eb;
  --pr-dk:     #1d4ed8;
  --pr-lt:     #eff6ff;
  --pr-glow:   rgba(37,99,235,.25);
  --acc:       #60a5fa;
  --bg:        #f1f5f9;
  --card:      #ffffff;
  --text:      #0f172a;
  --text-2:    #475569;
  --muted:     #64748b;
  --border:    #e2e8f0;
  --success:   #16a34a;
  --warning:   #d97706;
  --danger:    #dc2626;
  --sh:        0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.07);
  --sh-lg:     0 8px 32px rgba(37,99,235,.18);
  --sh-card:   0 2px 8px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);
  --r:         16px;
  --r-sm:      10px;
  --r-xs:      6px;
  --hero-bg:   linear-gradient(140deg,#0b1120 0%,#111827 50%,#162044 100%);
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { scroll-behavior: smooth; font-size: 16px; }
body   {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.rtl { text-align: right; direction: rtl; }
body.rtl .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

/* ── Loading Spinner ──────────────────────── */
.spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Skeleton Loading ─────────────────────── */
.skeleton-line {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  display: block;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Animations ────────────────────────────── */
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: .7; }
}
@keyframes fadeIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

.fade-in  { animation: fadeIn .3s ease; }
.slide-in { animation: slideIn .3s ease; }

/* ══════════════════════════════════════════
   DILL SEÇİM OVERLAY
   ══════════════════════════════════════════ */
#lang-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; padding: 2rem;
  background: var(--hero-bg);
}
#lang-overlay::before, #lang-overlay::after {
  content: ''; position: absolute; border-radius: 50%;
  pointer-events: none; animation: pulse 4s ease-in-out infinite;
}
#lang-overlay::before {
  top: -120px; right: -120px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,.18) 0%, transparent 65%);
}
#lang-overlay::after {
  bottom: -80px; left: -80px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(124,58,237,.12) 0%, transparent 65%);
  animation-delay: 2s;
}
.ov-logo {
  font-size: 2.4rem; font-weight: 800; color: #fff;
  margin-bottom: .35rem; letter-spacing: -1.5px;
  position: relative; z-index: 1;
}
.ov-logo span {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ov-sub {
  color: rgba(255,255,255,.4); margin-bottom: 2.5rem;
  font-size: .88rem; text-align: center; position: relative; z-index: 1;
}
#lang-overlay-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: .7rem; max-width: 520px; width: 100%;
  position: relative; z-index: 1;
}
.lang-btn {
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1);
  color: #fff; border-radius: 12px; padding: .8rem .4rem;
  cursor: pointer; transition: all .25s cubic-bezier(.4,0,.2,1);
  text-align: center; font-size: .83rem; font-family: inherit;
}
.lang-btn:hover {
  background: rgba(255,255,255,.14); border-color: #60a5fa;
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(96,165,250,.2);
}
.lang-btn .flag { font-size: 1.6rem; display: block; margin-bottom: .35rem; }

/* ══════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════ */
.navbar {
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226,232,240,.8);
  padding: .65rem 0; position: sticky; top: 0; z-index: 200;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 12px rgba(0,0,0,.04);
}
.navbar-brand {
  font-weight: 800; font-size: 1.3rem;
  color: var(--text) !important; letter-spacing: -.6px;
  text-decoration: none;
}
.navbar-brand span {
  background: linear-gradient(135deg, var(--pr), #7c3aed);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-link {
  color: var(--muted) !important; font-weight: 500; font-size: .875rem;
  padding: .35rem .8rem !important; border-radius: var(--r-sm);
  transition: .2s; text-decoration: none;
}
.nav-link:hover, .nav-link.active { color: var(--pr) !important; background: var(--pr-lt); }

/* ── Butonlar ────────────────────────────── */
.btn-pr {
  background: linear-gradient(135deg, var(--pr), #1d4ed8);
  color: #fff; border: none; border-radius: 50px;
  padding: .48rem 1.3rem; font-weight: 600; font-size: .875rem;
  cursor: pointer; transition: .25s; font-family: inherit;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
}
.btn-pr:hover { transform: translateY(-1px); box-shadow: var(--sh-lg); color: #fff; }
.btn-pr:active { transform: none; }
.btn-pr:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-out {
  border: 1.5px solid var(--pr); color: var(--pr); background: transparent;
  border-radius: 50px; padding: .4rem 1.1rem; font-weight: 600;
  font-size: .875rem; cursor: pointer; transition: .2s; font-family: inherit;
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
}
.btn-out:hover { background: var(--pr); color: #fff; }

.btn-sm { padding: .28rem .75rem; font-size: .82rem; }
.btn-lg { padding: .7rem 2rem; font-size: 1rem; }

/* ── Dil Seçici ──────────────────────────── */
.lang-sel {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 50px; padding: .3rem .9rem;
  font-size: .82rem; font-weight: 500; cursor: pointer;
  color: var(--text); outline: none; font-family: inherit; transition: .2s;
}
.lang-sel:focus { border-color: var(--pr); }

/* ── Kullanıcı Menüsü ─────────────────────── */
#user-menu { display: flex; align-items: center; gap: .75rem; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pr), #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer;
}
.plan-badge {
  font-size: .72rem; font-weight: 600; padding: .15rem .55rem;
  border-radius: 50px;
}
.plan-badge.free    { background: #f1f5f9; color: #64748b; }
.plan-badge.premium { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
.hero {
  background: var(--hero-bg); padding: 72px 0 80px;
  overflow: hidden; position: relative;
}
.hero::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.2) 0%, transparent 65%);
  pointer-events: none;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.28);
  color: #93c5fd; border-radius: 50px;
  padding: .38rem 1rem; font-size: .78rem; font-weight: 600; margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; color: #fff;
  line-height: 1.1; margin-bottom: 1rem; letter-spacing: -.6px;
}
.hero h1 span {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p  { color: rgba(255,255,255,.6); font-size: 1.05rem; margin-bottom: 2rem; max-width: 520px; line-height: 1.7; }
.hero-stats {
  display: flex; gap: 2rem; margin-top: 2.5rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-num  { font-size: 1.5rem; font-weight: 800; color: #fff; display: block; }
.stat-lbl  { font-size: .75rem; color: rgba(255,255,255,.45); }

/* ── AI Quick Generator ─────────────────── */
.ai-quick-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r); padding: 2rem; backdrop-filter: blur(8px);
}
.ai-quick-card .form-label { color: rgba(255,255,255,.7); font-size: .82rem; font-weight: 500; }
.ai-quick-card .form-control {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15);
  color: #fff; border-radius: var(--r-sm);
}
.ai-quick-card .form-control::placeholder { color: rgba(255,255,255,.3); }
.ai-quick-card .form-control:focus {
  background: rgba(255,255,255,.12); border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(96,165,250,.2); color: #fff;
}

/* ══════════════════════════════════════════
   MAIN LAYOUT
   ══════════════════════════════════════════ */
.main-app { padding: 2rem 0 4rem; }
.app-card {
  background: var(--card); border-radius: var(--r);
  box-shadow: var(--sh-card); border: 1px solid var(--border);
}

/* ── Tab Navigasyon ──────────────────────── */
.tab-nav {
  display: flex; gap: .25rem; padding: .5rem;
  background: var(--bg); border-radius: var(--r);
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
[data-tab] {
  flex: 1; padding: .55rem 1rem; border: none; cursor: pointer;
  border-radius: var(--r-sm); font-size: .875rem; font-weight: 500;
  color: var(--muted); background: transparent; transition: .2s;
  font-family: inherit; text-align: center;
}
[data-tab]:hover   { color: var(--pr); background: rgba(37,99,235,.06); }
[data-tab].active  { background: var(--card); color: var(--pr); box-shadow: var(--sh); }

.tab-pane          { display: none; }
.tab-pane.active   { display: block; animation: fadeIn .3s ease; }

/* ── Step Indicator ──────────────────────── */
.step-pills {
  display: flex; gap: 0; margin-bottom: 2rem; overflow: hidden;
  border-radius: var(--r-sm); border: 1px solid var(--border);
}
.step-pill {
  flex: 1; padding: .65rem .5rem; text-align: center; font-size: .8rem;
  font-weight: 600; color: var(--muted); background: var(--card);
  cursor: pointer; transition: .2s; border-right: 1px solid var(--border);
  position: relative;
}
.step-pill:last-child { border-right: none; }
.step-pill.active     { background: var(--pr); color: #fff; }
.step-pill.done       { background: #dcfce7; color: #16a34a; }
.step-pill.done::after {
  content: ' ✓'; font-size: .75rem;
}

.step-pane { display: none; }
.step-pane.active-step { display: block; animation: fadeIn .3s ease; }

/* ══════════════════════════════════════════
   FORM STİLLERİ
   ══════════════════════════════════════════ */
.form-label      { font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: .35rem; display: block; }
.form-control    {
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: .55rem .85rem; font-size: .875rem; color: var(--text);
  transition: .2s; background: #fff; width: 100%; font-family: inherit;
}
.form-control:focus {
  outline: none; border-color: var(--pr);
  box-shadow: 0 0 0 3px var(--pr-glow);
}
.form-control.is-invalid { border-color: var(--danger); }
textarea.form-control { resize: vertical; min-height: 80px; }
select.form-control { cursor: pointer; }

/* ── Deneyim / Eğitim Kartı ────────────── */
.exp-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 1.25rem;
  margin-bottom: 1rem; position: relative;
  transition: .2s; animation: fadeIn .3s ease;
}
.exp-card:hover { border-color: rgba(37,99,235,.3); box-shadow: var(--sh); }
.del-btn {
  position: absolute; top: .75rem; right: .75rem;
  background: none; border: none; color: #94a3b8; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: .2s; font-size: .8rem;
}
.del-btn:hover { background: #fee2e2; color: var(--danger); }

/* ── Beceri Etiketleri ─────────────────── */
.skills-tags-wrap { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.skill-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--pr-lt); color: var(--pr); border-radius: 50px;
  padding: .3rem .85rem; font-size: .82rem; font-weight: 500;
  border: 1px solid rgba(37,99,235,.15);
}
.skill-level { font-size: .72rem; opacity: .7; }
.skill-del   { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0 0 .2rem; opacity: .6; }
.skill-del:hover { opacity: 1; }

/* ── Fotoğraf Yükleme ─────────────────── */
.photo-upload {
  width: 100%; aspect-ratio: 1; max-width: 130px;
  border: 2px dashed var(--border); border-radius: var(--r-sm);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem;
  color: var(--muted); font-size: .78rem; text-align: center;
  transition: .2s; overflow: hidden; position: relative;
}
.photo-upload:hover { border-color: var(--pr); color: var(--pr); background: var(--pr-lt); }
.photo-upload img   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════
   CV ÖNİZLEME — Paper Viewer
   ══════════════════════════════════════════ */
.preview-wrap {
  position: sticky; top: 80px; max-height: calc(100vh - 100px);
  border-radius: var(--r); box-shadow: var(--sh-card);
  overflow: hidden; display: flex; flex-direction: column;
}
.preview-wrap-header {
  background: var(--card); padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
}
.preview-wrap-header .preview-title {
  font-size: .8rem; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: .4rem;
}
.cv-paper-viewport {
  background: #dde1e7;
  padding: 16px 12px 20px;
  min-height: 500px;
  overflow-y: auto; flex: 1;
}
#cv-preview {
  /* padding controlled by cv-paper-viewport */
}
.cv-paper-wrap {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 8px 32px rgba(0,0,0,.1);
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.cv-paper-wrap:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.16), 0 12px 40px rgba(0,0,0,.14);
}
.preview-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 400px;
  color: var(--muted); text-align: center; padding: 2rem;
}
.preview-empty-icon {
  width: 72px; height: 72px; margin: 0 auto 1.2rem;
  background: var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.cv-doc {
  background: #fff;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: .875rem; line-height: 1.6; color: #0f172a;
  min-height: 500px;
}
.cv-section       { margin-bottom: 1.4rem; }
.cv-section-title {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: .75rem;
}

/* ── Şablon Seçici — Horizontal Scroll ─── */
.tmpl-grid {
  display: flex; flex-wrap: nowrap; gap: .6rem;
  overflow-x: auto; padding-bottom: .4rem;
  margin-bottom: 1rem;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  -webkit-overflow-scrolling: touch;
}
.tmpl-grid::-webkit-scrollbar       { height: 3px; }
.tmpl-grid::-webkit-scrollbar-track { background: transparent; }
.tmpl-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.tmpl-card {
  flex: 0 0 88px; border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; padding: .45rem .4rem .5rem;
  text-align: center; transition: all .18s ease;
  position: relative; overflow: hidden; background: var(--card);
  user-select: none;
}
.tmpl-card:hover {
  border-color: var(--pr); transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37,99,235,.18);
}
.tmpl-card.selected {
  border-color: var(--pr); background: var(--pr-lt);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.tmpl-card.selected::after {
  content: '✓'; position: absolute; bottom: -1px; right: -1px;
  width: 18px; height: 18px; background: var(--pr); color: #fff;
  font-size: .65rem; font-weight: 700; border-radius: 4px 0 0 0;
  display: flex; align-items: center; justify-content: center;
}
.tmpl-thumb { display: block; border-radius: 3px; overflow: hidden; }
.tmpl-name  {
  font-size: .68rem; font-weight: 600; margin-top: .3rem;
  color: var(--text-2); line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.badge-premium {
  position: absolute; top: 3px; left: 3px; font-size: .52rem;
  background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff;
  padding: .08rem .32rem; border-radius: 50px; font-weight: 700;
  letter-spacing: .3px;
}

/* ── Renk Seçici ──────────────────────── */
.color-swatches    { display: flex; gap: .5rem; flex-wrap: wrap; }
.color-dot {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  transition: .2s; border: 2px solid transparent;
}
.color-dot.selected, .color-dot:hover {
  transform: scale(1.2); border-color: rgba(255,255,255,.8);
  box-shadow: 0 0 0 2px var(--pr);
}
/* Pro renkleri: küçük kilit rozeti */
.color-lock {
  position: absolute; top: -5px; right: -5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #0f172a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .5rem; line-height: 1; pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* ══════════════════════════════════════════
   CV SKOR
   ══════════════════════════════════════════ */
.score-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--pr), #7c3aed);
  color: #fff; border-radius: 50px; padding: .35rem 1rem;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: .2s;
}
.score-badge:hover { transform: scale(1.05); box-shadow: var(--sh-lg); }
.score-circle {
  width: 100px; height: 100px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; margin: 0 auto 1.5rem;
  font-size: 2rem; font-weight: 800; color: #fff;
}
.sc-ex { background: linear-gradient(135deg,#16a34a,#15803d); }
.sc-gd { background: linear-gradient(135deg,#2563eb,#1d4ed8); }
.sc-ok { background: linear-gradient(135deg,#d97706,#b45309); }
.sc-bd { background: linear-gradient(135deg,#dc2626,#b91c1c); }

/* ══════════════════════════════════════════
   ATS ANALİZİ
   ══════════════════════════════════════════ */
#ats-result { display: none; }
.ats-score-circle {
  text-align: center; margin-bottom: 1.5rem; padding: 1.5rem;
  background: linear-gradient(135deg,var(--score-color,var(--pr)),rgba(0,0,0,.1));
  border-radius: var(--r); color: #fff;
}
.score-num { font-size: 3rem; font-weight: 800; }
.score-lbl { font-size: .85rem; opacity: .8; }
.kw-tags  { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.kw-tag   { padding: .25rem .65rem; border-radius: 50px; font-size: .78rem; font-weight: 500; }
.kw-match { background: #dcfce7; color: #15803d; }
.kw-miss  { background: #fee2e2; color: #b91c1c; }
.suggestion-item {
  padding: .6rem .85rem; border-radius: var(--r-sm);
  margin-bottom: .5rem; display: flex; align-items: flex-start; gap: .75rem;
  font-size: .85rem; line-height: 1.5;
}
.priority-high   { background: #fef2f2; border-left: 3px solid var(--danger); }
.priority-medium { background: #fffbeb; border-left: 3px solid var(--warning); }
.priority-low    { background: #f0fdf4; border-left: 3px solid var(--success); }
.priority-badge  {
  font-size: .7rem; font-weight: 700; padding: .1rem .4rem;
  border-radius: 4px; background: currentColor; color: #fff;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   FİYATLANDIRMA
   ══════════════════════════════════════════ */
.pricing-card {
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--r); padding: 2rem; position: relative;
  transition: .3s; overflow: hidden;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.pricing-card.popular {
  border-color: var(--pr);
  background: linear-gradient(135deg,#f8faff,#f0f4ff);
}
.pricing-card.popular::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,var(--pr),#7c3aed);
}
.price-num   { font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; }
.price-period { font-size: .85rem; color: var(--muted); font-weight: 400; }
.feature-list { list-style: none; }
.feature-list li {
  padding: .45rem 0; font-size: .875rem; display: flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid var(--bg);
}
.feature-list li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; }
.pricing-toggle {
  display: flex; align-items: center; gap: 1rem;
  justify-content: center; margin-bottom: 2rem;
}
.toggle-track {
  width: 48px; height: 26px; background: var(--border); border-radius: 50px;
  position: relative; cursor: pointer; transition: .3s;
}
.toggle-track.on  { background: var(--pr); }
.toggle-thumb {
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  position: absolute; top: 3px; left: 3px; transition: .3s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.toggle-track.on .toggle-thumb { left: 25px; }
.save-badge {
  background: #dcfce7; color: #15803d; font-size: .72rem;
  font-weight: 700; padding: .2rem .55rem; border-radius: 50px;
}

/* ══════════════════════════════════════════
   KAPAK MEKTUBU
   ══════════════════════════════════════════ */
#letter-doc {
  background: #fffef5; border: 1px solid #fde68a;
  border-radius: var(--r-sm); padding: 1.5rem;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: .9rem; line-height: 1.8; white-space: pre-wrap;
  min-height: 200px; color: var(--text);
}
#letter-edit {
  width: 100%; min-height: 300px; padding: 1.5rem;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: .9rem; line-height: 1.8;
  border: 1.5px solid var(--pr); border-radius: var(--r-sm);
  resize: vertical; display: none;
}
.lang-toggle { display: flex; gap: .4rem; }
.lang-toggle button {
  padding: .3rem .75rem; border-radius: 50px; font-size: .8rem; font-weight: 600;
  border: 1.5px solid var(--border); background: transparent; cursor: pointer;
  color: var(--muted); transition: .2s; font-family: inherit;
}
.lang-toggle button.active {
  border-color: var(--pr); background: var(--pr); color: #fff;
}

/* ══════════════════════════════════════════
   JOB MATCHING
   ══════════════════════════════════════════ */
.match-score {
  text-align: center; padding: 2rem;
  background: linear-gradient(135deg,#f8faff,#f0f4ff);
  border-radius: var(--r); margin-bottom: 1.5rem;
}
.match-verdict { font-style: italic; color: var(--muted); margin-bottom: 1.5rem; text-align: center; }
.match-details ul { padding-left: 1.25rem; }
.match-details li { margin-bottom: .35rem; font-size: .875rem; }

/* ══════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════ */
.modal-content { border: none; border-radius: var(--r); overflow: hidden; }
.modal-header  { border-bottom: 1px solid var(--bg); padding: 1.25rem 1.5rem; }
.modal-body    { padding: 1.5rem; }
.modal-footer  { border-top: 1px solid var(--bg); padding: 1.25rem 1.5rem; }

/* ── Auth Modal ─────────────────────────── */
.auth-provider-btn {
  width: 100%; padding: .65rem; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); background: var(--card); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  font-size: .875rem; font-weight: 500; transition: .2s; font-family: inherit;
}
.auth-provider-btn:hover { border-color: var(--pr); background: var(--pr-lt); }
.auth-divider { text-align: center; color: var(--muted); font-size: .8rem; margin: 1rem 0; position: relative; }
.auth-divider::before, .auth-divider::after {
  content: ''; position: absolute; top: 50%; width: calc(50% - 1.5rem);
  height: 1px; background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.footer {
  background: #0f172a; color: rgba(255,255,255,.5);
  padding: 3rem 0 2rem; font-size: .875rem;
}
.footer a    { color: rgba(255,255,255,.5); text-decoration: none; transition: .2s; }
.footer a:hover { color: #fff; }
.footer-brand {
  font-weight: 800; font-size: 1.2rem; color: #fff;
  margin-bottom: .5rem; letter-spacing: -.5px;
}
.footer-brand span {
  background: linear-gradient(135deg,#60a5fa,#a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 992px) {
  .preview-wrap { position: static; max-height: none; margin-top: 1.5rem; }
  .cv-paper-viewport { padding: 12px 8px; }
  .hero h1 { font-size: 2rem; }
}
@media (max-width: 768px) {
  #lang-overlay-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 48px 0 56px; }
  .hero-stats { gap: 1rem; }
  .tab-nav { flex-wrap: wrap; }
  [data-tab] { flex: unset; width: calc(50% - .125rem); }
  .pricing-card { margin-bottom: 1rem; }
  .step-pills { flex-wrap: wrap; }
  .step-pill { min-width: calc(50% - 1px); font-size: .75rem; }
  .tmpl-grid { gap: .45rem; }
  .tmpl-card { flex: 0 0 76px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.7rem; }
  .lang-btn { font-size: .75rem; padding: .6rem .3rem; }
  .lang-btn .flag { font-size: 1.3rem; }
  .step-pill { font-size: .7rem; padding: .5rem .25rem; }
}

/* ══════════════════════════════════════════
   RTL DÜZELTMELER
   ══════════════════════════════════════════ */
[dir="rtl"] .del-btn         { right: auto; left: .75rem; }
[dir="rtl"] .step-pill       { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .step-pill:last-child { border-left: none; }
[dir="rtl"] .suggestion-item { border-left: none; border-right: 3px solid; }
[dir="rtl"] .navbar-brand    { letter-spacing: 0; }

/* ══════════════════════════════════════════
   YARDIMCI SINIFLAR
   ══════════════════════════════════════════ */
.text-primary  { color: var(--pr) !important; }
.text-muted    { color: var(--muted) !important; }
.text-success  { color: var(--success) !important; }
.text-danger   { color: var(--danger) !important; }
.fw-500        { font-weight: 500; }
.fw-600        { font-weight: 600; }
.fw-700        { font-weight: 700; }
.section-title { font-size: 1.6rem; font-weight: 800; margin-bottom: .5rem; letter-spacing: -.4px; }
.section-sub   { color: var(--muted); margin-bottom: 2.5rem; }

/* ── Print Modu ─────────────────────────── */
@media print {
  .navbar, #lang-overlay, .tab-nav, .step-pills,
  .btn-pr, .btn-out, .preview-wrap > :not(#cv-preview),
  footer, .modal { display: none !important; }
  .cv-doc { box-shadow: none; border: none; padding: 0; }
  @page  { size: A4; margin: 10mm; }
}

/* ══════════════════════════════════════════
   ALMANYA CV — Özel Stiller
   ══════════════════════════════════════════ */

/* Step 1 bölüm ayırıcı (Deutschlandstandard başlıkları) */
.german-cv-divider {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--pr);
  background: var(--pr-lt);
  border-left: 3px solid var(--pr);
  padding: .35rem .75rem;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  margin-bottom: .25rem;
}

/* Şablon thumbnail özel renk overlay */
.tmpl-card .tmpl-thumb svg { display: block; }

/* Zertifikat kartı — aynı exp-card stilini kullanır */
.exp-card + .exp-card { margin-top: .75rem; }

/* CV Önizleme — A4 oranı için ölçek */
#cv-preview .cv-doc {
  transform-origin: top left;
  font-size: 13px;
}

/* 2-Sütunlu şablonlar için minimum yükseklik */
.cv-professionell,
.cv-california,
.cv-kreativ {
  min-height: 500px;
}

/* Sidebar şablonlarda sidebar tam yükseklik */
.cv-professionell > div:first-child,
.cv-california   > div:first-child,
.cv-kreativ      > div:first-child {
  min-height: 100%;
}

/* Unterschrift bloğu tipografisi */
.cv-doc .unterschrift-block {
  font-family: inherit;
  font-size: .82rem;
}

/* ══════════════════════════════════════════
   TASARIM İYİLEŞTİRMELERİ — v2
   ══════════════════════════════════════════ */

/* Arka plan — daha sıcak, daha temiz */
body { background: #f8fafc; }

/* ── Şablon Seçici — Daha büyük, daha şık ─── */
.tmpl-card {
  flex: 0 0 100px;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: .5rem .45rem .55rem;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.tmpl-card:hover {
  border-color: var(--pr);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 20px rgba(37,99,235,.22);
}
.tmpl-card.selected {
  border-color: var(--pr);
  background: var(--pr-lt);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 4px 14px rgba(37,99,235,.18);
}
.tmpl-card.selected::after {
  width: 20px; height: 20px;
  font-size: .7rem;
  border-radius: 6px 0 0 0;
}
.tmpl-name {
  font-size: .72rem;
  font-weight: 600;
  margin-top: .35rem;
}

/* ── Renk Seçici — Büyük, belirgin ──────── */
.color-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.color-dot.selected, .color-dot:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px var(--pr), 0 3px 10px rgba(0,0,0,.2);
}

/* ── Preview Wrap — daha canlı ───────────── */
.preview-wrap {
  border: none;
  box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
}
.preview-wrap-header {
  background: linear-gradient(135deg,#f8faff 0%,#f0f5ff 100%);
  border-bottom: 1px solid #dde8ff;
  padding: .7rem 1.1rem;
}
.preview-wrap-header .preview-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--pr);
}
.cv-paper-viewport {
  background: #dde1e7;
  padding: 16px 14px;
}

/* ── Step Pills — daha belirgin ──────────── */
.step-pill {
  transition: all .18s ease;
  font-weight: 500;
}
.step-pill.active {
  box-shadow: 0 2px 10px rgba(37,99,235,.3);
  transform: translateY(-1px);
}

/* ── App Card — daha derin gölge ─────────── */
.app-card {
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.08);
  border: 1px solid rgba(226,232,240,.8);
  transition: box-shadow .2s ease;
}

/* ── Buton animasyonları ──────────────────── */
.btn-pr {
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
}
.btn-pr:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.4);
}
.btn-pr:active { transform: translateY(0); }

/* ── Badge Premium — daha dikkat çekici ──── */
.badge-premium {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: .12rem .38rem;
  border-radius: 4px;
  letter-spacing: .5px;
  box-shadow: 0 1px 4px rgba(239,68,68,.35);
}

/* ══════════════════════════════════════════
   DARK THEME — Landing ile tek tasarım
   (Pazarlama sayfasıyla aynı mor/cyan palet.
    CV belgesi/önizleme her zaman BEYAZ kalır.)
   ══════════════════════════════════════════ */
:root {
  --pr:      #7c3aed;                  /* mor — landing --primary */
  --pr-dk:   #6d28d9;
  --pr-lt:   rgba(124,58,237,.16);     /* yarı saydam mor vurgu zemini */
  --pr-glow: rgba(124,58,237,.30);
  --acc:     #06b6d4;                  /* cyan — landing --accent */
  --bg:      #1a2030;                  /* uygulama iç yüzeyleri (yumuşak slate) */
  --card:    #1e2533;                  /* paneller */
  --text:    #f1f5f9;
  --text-2:  #cbd5e1;
  --muted:   #94a3b8;
  --border:  rgba(148,163,184,.16);
  --sh:      0 1px 3px rgba(0,0,0,.3), 0 4px 20px rgba(0,0,0,.3);
  --sh-lg:   0 8px 32px rgba(124,58,237,.30);
  --sh-card: 0 2px 8px rgba(0,0,0,.25), 0 8px 28px rgba(0,0,0,.35);
  --hero-bg: linear-gradient(140deg,#161c28 0%,#1a2130 55%,#241f3c 100%);
}

/* Doğal, sade koyu slate arka plan (saf siyah değil) */
body { background: #161b26; color: var(--text); }

/* — Navbar: koyu cam efekti — */
.navbar {
  background: rgba(22,27,38,.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
}
.navbar-brand { color: #fff !important; display: inline-flex; align-items: center; gap: .55rem; }

/* — Profesyonel logo — */
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo svg { display: block; filter: drop-shadow(0 2px 6px rgba(124,58,237,.35)); }
.navbar-brand .brand-text { font-weight: 800; letter-spacing: -.6px; color: #fff; -webkit-text-fill-color: #fff; background: none; font-size: 1.25rem; }
.navbar-brand .brand-text span {
  background: linear-gradient(135deg,#a78bfa,#22d3ee);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Hamburger menü ikonu — KOYU temada (varsayılan) açık renkli çizgiler.
   (Bootstrap varsayılanı koyu çizgi → gece modunda görünmüyordu.) */
.navbar-toggler {
  border-color: var(--border);
  padding: .35rem .55rem;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--pr-glow); outline: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(241,245,249,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* — Dil seçici açılır menüsü (beyaz-üstü-beyaz sorunu giderildi) — */
.lang-sel option { background: #1e2533; color: #f1f5f9; }

/* — Birincil buton: mor→cyan gradyan — */
.btn-pr { background: linear-gradient(135deg,#7c3aed,#06b6d4); box-shadow: 0 2px 12px rgba(124,58,237,.35); }
.btn-pr:hover { box-shadow: 0 6px 20px rgba(124,58,237,.5); }

/* — Paneller / kartlar — */
.app-card { background: var(--card); border: 1px solid var(--border); box-shadow: var(--sh-card); }
.tab-nav  { background: rgba(255,255,255,.04); }
[data-tab].active { background: var(--card); color: #fff; }

/* — Adım göstergesi — */
.step-pill { background: var(--card); color: var(--muted); border-color: var(--border); }
.step-pill.active { background: var(--pr); color: #fff; }
.step-pill.done   { background: rgba(34,197,94,.16); color: #4ade80; }

/* — Form elemanları — */
.form-control {
  background: rgba(255,255,255,.05); color: var(--text);
  border-color: var(--border);
}
.form-control::placeholder { color: rgba(255,255,255,.32); }
.form-control:focus { background: rgba(255,255,255,.08); border-color: var(--pr); }
.lang-sel { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--border); }

/* — Deneyim/eğitim kartları — */
.exp-card { background: rgba(255,255,255,.03); border-color: var(--border); }
.del-btn:hover { background: rgba(220,38,38,.18); color: #fca5a5; }

/* — Beceri etiketleri & bölüm ayırıcı — */
.skill-tag { color: #c4b5fd; border-color: rgba(124,58,237,.25); }
.german-cv-divider { color: #c4b5fd; }

/* — CV önizleme tezgahı (kağıt beyaz kalır, arka plan koyu) — */
.cv-paper-viewport { background: #11151e; }
.preview-wrap-header {
  background: linear-gradient(135deg,#222a3a,#1b2230);
  border-bottom: 1px solid var(--border);
}
.preview-wrap-header .preview-title { color: #c4b5fd; }

/* — Şablon kartları — */
.tmpl-card { background: var(--card); }
.tmpl-card.selected { background: var(--pr-lt); }

/* — Fiyatlandırma — */
.pricing-card { background: var(--card); border-color: var(--border); }
.pricing-card.popular { background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(6,182,212,.06)); }
.feature-list li { border-bottom-color: var(--border); }

/* — Job matching — */
.match-score { background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(6,182,212,.06)); }

/* — ATS keyword & öneri rozetleri — */
.kw-match { background: rgba(34,197,94,.18); color: #86efac; }
.kw-miss  { background: rgba(220,38,38,.18); color: #fca5a5; }
.priority-high   { background: rgba(220,38,38,.12); }
.priority-medium { background: rgba(217,119,6,.12); }
.priority-low    { background: rgba(34,197,94,.12); }

/* — Kapak mektubu: belge kremi korunur, metin koyu — */
#letter-doc { background: #fffef5; color: #1a1a1a; border-color: #e7d9a6; }
#letter-edit { background: rgba(255,255,255,.05); color: var(--text); }

/* — Modal & auth — */
.modal-content { background: var(--card); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--border); }
.auth-provider-btn { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--border); }
.auth-provider-btn:hover { background: rgba(124,58,237,.12); border-color: var(--pr); }
.plan-badge.free { background: rgba(255,255,255,.08); color: var(--muted); }

/* — CV belgesi DAİMA beyaz (yazdırma/PDF) — */
.cv-paper-wrap, .cv-doc, #cv-preview .cv-doc { background: #fff; color: #0f172a; }

/* ══════════════════════════════════════════
   ARBEITSZEUGNIS ÇÖZÜCÜ
   ══════════════════════════════════════════ */
.zeugnis-grade {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--r);
  background: rgba(124,58,237,.08); border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.zg-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--g); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; flex-shrink: 0;
}
.zg-label { font-weight: 800; font-size: 1.1rem; color: var(--g); }
.zg-text  { font-size: .85rem; color: var(--muted); }
.zg-summary {
  font-size: .9rem; color: var(--text-2); line-height: 1.6;
  background: rgba(255,255,255,.03); border-radius: var(--r-sm);
  padding: .85rem 1rem; margin-bottom: .5rem;
}
.zg-finding {
  display: flex; gap: .75rem; padding: .7rem .9rem;
  border-left: 3px solid var(--c); background: rgba(255,255,255,.03);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: .5rem;
}
.zg-sev { color: var(--c); font-weight: 800; flex-shrink: 0; }
.zg-phrase { font-style: italic; font-size: .85rem; color: var(--text); margin-bottom: .15rem; }
.zg-meaning { font-size: .85rem; color: var(--text-2); line-height: 1.5; }
.zg-cat {
  display: inline-block; font-size: .68rem; font-weight: 600; color: var(--muted);
  background: rgba(255,255,255,.06); padding: .05rem .5rem; border-radius: 50px; margin-top: .35rem;
}
.zg-list { padding-left: 1.1rem; margin: 0; }
.zg-list li { font-size: .85rem; color: var(--text-2); line-height: 1.5; margin-bottom: .3rem; }
[dir="rtl"] .zg-finding { border-left: none; border-right: 3px solid var(--c); border-radius: var(--r-sm) 0 0 var(--r-sm); }

/* ══════════════════════════════════════════
   MÜLAKAT HAZIRLIĞI
   ══════════════════════════════════════════ */
.iv-count { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .75rem; }
.iv-q {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .85rem 1rem; margin-bottom: .6rem;
}
.iv-q-head { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.iv-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--pr), var(--acc)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
}
.iv-question { font-weight: 600; font-size: .9rem; color: var(--text); flex: 1 1 60%; }
.iv-cat {
  font-size: .66rem; font-weight: 700; color: var(--c);
  border: 1px solid var(--c); border-radius: 50px; padding: .1rem .5rem;
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.iv-tip {
  font-size: .83rem; color: var(--text-2); line-height: 1.55;
  margin-top: .5rem; padding-left: 1.85rem;
}
.iv-tip i { color: #fbbf24; margin-right: .3rem; }

/* CV Zayıflık Denetçisi (skor modalı) */
.wk-item {
  display: flex; gap: .5rem; font-size: .82rem; color: var(--text-2); line-height: 1.45;
  padding: .35rem .6rem; border-left: 2px solid var(--c); margin-bottom: .3rem;
  background: rgba(255,255,255,.03); border-radius: 0 6px 6px 0;
}
.wk-item span { color: var(--c); font-weight: 700; flex-shrink: 0; }
[dir="rtl"] .wk-item { border-left: none; border-right: 2px solid var(--c); border-radius: 6px 0 0 6px; }

/* ===== PWA install button (navbar) ===== */
.pwa-install-wrap {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px 2px 2px 4px;
}
.pwa-install-wrap[hidden] { display: none !important; }
.pwa-install-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; color: var(--text);
  font-size: .82rem; font-weight: 600; line-height: 1;
  padding: 5px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.pwa-install-btn i { color: var(--pr); }
.pwa-install-btn:hover { background: rgba(255,255,255,.06); }
.pwa-install-dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: transparent; border: none;
  color: var(--muted, #94a3b8); border-radius: 6px; cursor: pointer; font-size: .75rem;
}
.pwa-install-dismiss:hover { background: rgba(255,255,255,.06); color: var(--text); }
@media (max-width: 575.98px) { .pwa-install-btn .pwa-install-label { display: none; } }

/* ══════════════════════════════════════════
   LIGHT THEME — html.theme-light override
   Varsayılan tema DARK. Kullanıcı navbar toggle ile açar.
   CV belgesi (.cv-doc/.cv-paper-wrap) ve #letter-doc BEYAZ/krem kalır.
   ══════════════════════════════════════════ */
html.theme-light {
  --pr:      #2563eb;
  --pr-dk:   #1d4ed8;
  --pr-lt:   rgba(37,99,235,.10);
  --pr-glow: rgba(37,99,235,.22);
  --acc:     #0891b2;
  --bg:      #f1f5f9;
  --card:    #ffffff;
  --text:    #0f172a;
  --text-2:  #334155;
  --muted:   #64748b;
  --border:  #e2e8f0;
  --sh:      0 1px 3px rgba(15,23,42,.06), 0 4px 18px rgba(15,23,42,.06);
  --sh-lg:   0 8px 32px rgba(37,99,235,.18);
  --sh-card: 0 1px 3px rgba(15,23,42,.06), 0 6px 24px rgba(15,23,42,.07);
  --hero-bg: linear-gradient(140deg,#eef2ff 0%,#f1f5f9 55%,#e0e7ff 100%);
}
html.theme-light body { background: #f1f5f9; color: var(--text); }
html.theme-light .navbar {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 1px 12px rgba(15,23,42,.04);
}
html.theme-light .navbar-brand,
html.theme-light .navbar-brand .brand-text { color: #0f172a !important; -webkit-text-fill-color: #0f172a; }
html.theme-light .navbar-brand .brand-text span {
  background: linear-gradient(135deg,#7c3aed,#0891b2);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.theme-light .nav-link { color: #475569; }
html.theme-light .nav-link:hover { color: #0f172a; }
html.theme-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text-2);
  font-size: .95rem; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--pr); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--pr); outline-offset: 2px; }
.theme-toggle .fa-sun { color: #f59e0b; }
html.theme-light .theme-toggle { background: #f1f5f9; border-color: var(--border); color: #475569; }
html.theme-light .theme-toggle:hover { background: #e2e8f0; color: #0f172a; }
html.theme-light .lang-sel { background: #fff; color: var(--text); border-color: var(--border); }
html.theme-light .lang-sel option { background: #fff; color: #0f172a; }
html.theme-light .btn-pr { background: linear-gradient(135deg,#2563eb,#0891b2); box-shadow: 0 2px 12px rgba(37,99,235,.30); }
html.theme-light .btn-pr:hover { box-shadow: 0 6px 20px rgba(37,99,235,.42); }
html.theme-light .btn-out { color: var(--text); border-color: var(--border); background: #fff; }
html.theme-light .btn-out:hover { background: #f1f5f9; border-color: var(--pr); color: var(--pr); }
html.theme-light .app-card { background: #fff; border: 1px solid var(--border); box-shadow: var(--sh-card); }
html.theme-light .tab-nav  { background: #fff; border: 1px solid var(--border); }
html.theme-light [data-tab]        { color: var(--muted); }
html.theme-light [data-tab].active { background: var(--pr); color: #fff; }
html.theme-light .step-pill { background: #fff; color: var(--muted); border-color: var(--border); }
html.theme-light .step-pill.active { background: var(--pr); color: #fff; border-color: var(--pr); }
html.theme-light .step-pill.done   { background: rgba(34,197,94,.12); color: #16a34a; }
html.theme-light .form-control { background: #fff; color: var(--text); border-color: #cbd5e1; }
html.theme-light .form-control::placeholder { color: #94a3b8; }
html.theme-light .form-control:focus { background: #fff; border-color: var(--pr); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
html.theme-light .exp-card { background: #f8fafc; border-color: var(--border); }
html.theme-light .del-btn:hover { background: rgba(220,38,38,.10); color: #dc2626; }
html.theme-light .skill-tag { color: #1d4ed8; border-color: rgba(37,99,235,.30); background: rgba(37,99,235,.06); }
html.theme-light .german-cv-divider { color: #1d4ed8; }
html.theme-light .cv-paper-viewport { background: #e2e8f0; }
html.theme-light .preview-wrap-header { background: linear-gradient(135deg,#f8fafc,#eef2ff); border-bottom: 1px solid var(--border); }
html.theme-light .preview-wrap-header .preview-title { color: #1d4ed8; }
html.theme-light #preview-scale-badge { background: #e2e8f0; color: #475569; }
html.theme-light .tmpl-card { background: #fff; border-color: var(--border); }
html.theme-light .tmpl-card.selected { background: var(--pr-lt); border-color: var(--pr); }
html.theme-light .pricing-card { background: #fff; border-color: var(--border); }
html.theme-light .pricing-card.popular { background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(8,145,178,.04)); border-color: rgba(37,99,235,.35); }
html.theme-light .feature-list li { border-bottom-color: var(--border); color: var(--text-2); }
html.theme-light .match-score { background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(8,145,178,.05)); }
html.theme-light .kw-match { background: rgba(34,197,94,.14); color: #15803d; }
html.theme-light .kw-miss  { background: rgba(220,38,38,.12); color: #b91c1c; }
html.theme-light .priority-high   { background: rgba(220,38,38,.08); }
html.theme-light .priority-medium { background: rgba(217,119,6,.10); }
html.theme-light .priority-low    { background: rgba(34,197,94,.10); }
html.theme-light #letter-edit { background: #fff; color: var(--text); border-color: #cbd5e1; }
html.theme-light .modal-content { background: #fff; color: var(--text); }
html.theme-light .modal-header, html.theme-light .modal-footer { border-color: var(--border); }
html.theme-light .auth-provider-btn { background: #fff; color: var(--text); border-color: #cbd5e1; }
html.theme-light .auth-provider-btn:hover { background: rgba(37,99,235,.06); border-color: var(--pr); }
html.theme-light .plan-badge.free { background: #f1f5f9; color: var(--muted); }
html.theme-light .zeugnis-grade { background: rgba(37,99,235,.05); border-color: var(--border); }
html.theme-light .zg-summary,
html.theme-light .zg-finding,
html.theme-light .iv-q,
html.theme-light .wk-item { background: #f8fafc; }
html.theme-light .zg-cat { background: #e2e8f0; color: var(--muted); }
html.theme-light .score-badge { background: #fff; border-color: var(--border); color: var(--text-2); }
html.theme-light .lang-toggle { background: #f1f5f9; border: 1px solid var(--border); }
html.theme-light .lang-toggle button { color: var(--muted); }
html.theme-light .lang-toggle button.active { background: var(--pr); color: #fff; }
html.theme-light .photo-upload { background: #f8fafc; border-color: #cbd5e1; color: var(--muted); }
html.theme-light .photo-upload:hover { border-color: var(--pr); color: var(--pr); }
html.theme-light .pwa-install-btn:hover,
html.theme-light .pwa-install-dismiss:hover { background: #f1f5f9; }
html.theme-light .cv-paper-wrap,
html.theme-light .cv-doc,
html.theme-light #cv-preview .cv-doc { background: #fff; color: #0f172a; }
html.theme-light #letter-doc { background: #fffef5; color: #1a1a1a; border-color: #e7d9a6; }
/* #landing-sections light */
html.theme-light #landing-sections {
  --lp-bg1: #ffffff; --lp-border: #e2e8f0; --lp-border2: #cbd5e1;
  --lp-primary: #2563eb; --lp-primary-l: #7c3aed; --lp-accent: #0891b2;
  --lp-text: #0f172a; --lp-text2: #475569; --lp-text3: #64748b;
  background: #f8fafc; color: #0f172a;
}
html.theme-light #landing-sections section { background: transparent; }
html.theme-light #landing-sections .lp-card,
html.theme-light #landing-sections .lp-step,
html.theme-light #landing-sections .lp-testi-card,
html.theme-light #landing-sections .lp-tmpl-card {
  background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 6px 24px rgba(15,23,42,.06);
}
html.theme-light #landing-sections .lp-title,
html.theme-light #landing-sections .lp-card h3,
html.theme-light #landing-sections .lp-step h3 { color: #0f172a; }
html.theme-light #landing-sections .lp-sub,
html.theme-light #landing-sections .lp-card p,
html.theme-light #landing-sections .lp-step p { color: #475569; }
html.theme-light #landing-sections .lp-divider { background: #e2e8f0; }
html.theme-light #landing-sections .lp-lbl { color: #2563eb; }

/* ── LIGHT THEME: HERO ──────────────────────────────────────────
   Hero koyu-tema için beyaz yazılarla tasarlandı; açık temada zemin
   açıldığında yazılar görünmez oluyordu. Burada hepsi koyulaştırılır. */
html.theme-light .hero-badge {
  background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.22); color: #1d4ed8;
}
html.theme-light .hero h1 { color: #0f172a; }
html.theme-light .hero h1 span {
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.theme-light .hero p { color: #475569; }
html.theme-light .hero-stats { border-top-color: #e2e8f0; }
html.theme-light .stat-num { color: #0f172a; }
html.theme-light .stat-lbl { color: #64748b; }

/* AI hızlı oluşturucu kartı → açık temada beyaz kart + koyu yazılar */
html.theme-light .ai-quick-card {
  background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 28px rgba(15,23,42,.08);
}
html.theme-light .ai-quick-card .text-white { color: #0f172a !important; }
html.theme-light .ai-quick-card p[data-i18n="hero.aiSub"] { color: #64748b !important; }
html.theme-light .ai-quick-card .form-label { color: #334155; }
html.theme-light .ai-quick-card .form-control {
  background: #fff; color: #0f172a; border-color: #cbd5e1;
}
html.theme-light .ai-quick-card .form-control::placeholder { color: #94a3b8; }
html.theme-light .ai-quick-card .form-control:focus {
  background: #fff; color: #0f172a; border-color: var(--pr); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ═══════════════════════════════════════════
   GEHALTS-CHECK
   ═══════════════════════════════════════════ */
#gehalt-result .gh-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
#gehalt-result .gh-tag {
  font-size: .8rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px;
  background: var(--bg); color: var(--text-2); border: 1px solid var(--border);
}
#gehalt-result .gh-main { margin-bottom: 1rem; }
#gehalt-result .gh-label {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700; margin-bottom: .35rem;
}
#gehalt-result .gh-range {
  font-size: 1.9rem; font-weight: 800; line-height: 1.1;
  background: linear-gradient(90deg, var(--pr), var(--acc));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--pr);
}
#gehalt-result .gh-bar {
  position: relative; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pr), var(--acc));
  margin: .75rem 0 .5rem; opacity: .85;
}
#gehalt-result .gh-bar-mid {
  position: absolute; top: 50%; width: 16px; height: 16px;
  border-radius: 50%; background: var(--card); border: 3px solid var(--text);
  transform: translate(-50%, -50%);
}
#gehalt-result .gh-median { font-size: .95rem; color: var(--text-2); margin-bottom: 1.1rem; }
#gehalt-result .gh-median strong { color: var(--text); }
#gehalt-result .gh-yearly {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--border); margin-bottom: 1.1rem;
}
#gehalt-result .gh-yearly-val { font-weight: 800; color: var(--text); }
#gehalt-result .gh-disclaimer {
  font-size: .78rem; color: var(--muted); line-height: 1.5;
  margin: 0; padding-top: .5rem; border-top: 1px dashed var(--border);
}

/* ═══════════ ANERKENNUNG-GUIDE ═══════════ */
#anerkennung-result .ak-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .75rem; }
#anerkennung-result .ak-head h5 { margin: 0; }
.ak-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; padding: .25rem .7rem; border-radius: 50px; line-height: 1; }
.ak-badge.ak-reg { background: rgba(124,58,237,.15); color: var(--pr); border: 1px solid rgba(124,58,237,.35); }
.ak-badge.ak-notreg { background: rgba(6,182,212,.13); color: var(--acc); border: 1px solid rgba(6,182,212,.35); }
.ak-hinweis { font-size: .9rem; line-height: 1.55; color: var(--text-2); margin-bottom: 1.1rem; }
.ak-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .85rem 1rem; margin-bottom: .85rem; }
.ak-block-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .86rem; color: var(--text); margin-bottom: .5rem; }
.ak-block-title i { color: var(--pr); }
.ak-block-body { font-size: .88rem; line-height: 1.5; color: var(--text-2); margin: 0; }
.ak-steps { margin: 0; padding-left: 1.2rem; }
.ak-steps li { font-size: .88rem; line-height: 1.5; color: var(--text-2); margin-bottom: .4rem; }
.ak-steps li:last-child { margin-bottom: 0; }
.ak-links { list-style: none; margin: 0; padding: 0; }
.ak-links li { margin-bottom: .45rem; }
.ak-links li:last-child { margin-bottom: 0; }
.ak-links a { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--acc); text-decoration: none; font-weight: 500; }
.ak-links a:hover { text-decoration: underline; }
.ak-links a i { font-size: .72rem; opacity: .7; }
.ak-funding { display: flex; align-items: flex-start; gap: .5rem; font-size: .84rem; line-height: 1.5; color: var(--text-2); background: rgba(6,182,212,.08); border: 1px dashed rgba(6,182,212,.4); border-radius: var(--r-sm); padding: .7rem .9rem; margin-top: .25rem; }
.ak-funding i { color: var(--acc); margin-top: .15rem; }

/* ── Branchen-Schnellstart (sector quick-start chips) ── */
.sector-quickstart { margin: 0 0 .75rem; }
.sector-quickstart-label { display: block; font-size: .78rem; font-weight: 700; color: var(--text-2); margin-bottom: .4rem; letter-spacing: .02em; }
.sector-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sector-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; font-size: .82rem; font-weight: 600; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: all .15s ease; line-height: 1.2; }
.sector-chip i { color: var(--pr); font-size: .85rem; transition: color .15s ease; }
.sector-chip:hover { border-color: var(--pr); background: color-mix(in srgb, var(--pr) 12%, var(--card)); color: var(--text); }
.sector-chip:hover i { color: var(--acc); }
.sector-chip:active { transform: translateY(1px); }

/* ════════════════════════════════════════════════════════════
   BATCH 4 — Tools mega-menu · Gamification ring · Share modal
   ════════════════════════════════════════════════════════════ */

/* ─────────── Tools mega-menu ─────────── */
.tools-dd { position: relative; }
.tools-dd-toggle {
  background: transparent !important; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 500; font-size: .875rem; font-family: inherit;
  color: var(--muted) !important; padding: .35rem .8rem !important;
  border-radius: var(--r-sm); transition: .2s;
}
.tools-dd-toggle:hover, .tools-dd-toggle.active,
.tools-dd-toggle[aria-expanded="true"] { color: var(--pr) !important; background: var(--pr-lt); }
.tools-dd-spark { font-size: .8rem; opacity: .85;
  background: linear-gradient(135deg, var(--pr), var(--acc));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.tools-dd-caret { font-size: .62rem; opacity: .7; transition: transform .25s ease; }
.tools-dd-toggle[aria-expanded="true"] .tools-dd-caret { transform: rotate(180deg); }

.tools-menu.dropdown-menu {
  position: absolute; left: 0; top: 100%; margin-top: .55rem; min-width: 372px;
  transform-origin: top left;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: .6rem; box-shadow: 0 22px 60px -14px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.16);
}
/* Bootstrap toggles display:none/block via .show; the keyframe is decorative only
   (no fill-mode) so the menu stays fully visible even if animations don't advance. */
.tools-menu.dropdown-menu.show { animation: toolsMenuIn .2s cubic-bezier(.34,1.32,.5,1); }
@keyframes toolsMenuIn {
  from { transform: translateY(9px) scale(.97); }
  to   { transform: none; }
}
.tools-menu-head {
  display: flex; align-items: center; gap: .45rem; padding: .25rem .55rem .55rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.tools-menu-head i { color: var(--acc); }
.tools-menu-grid { display: grid; gap: .15rem; }
.tool-item {
  display: flex; align-items: center; gap: .8rem; padding: .6rem .6rem;
  border-radius: 13px; text-decoration: none; position: relative;
  border: 1px solid transparent; transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.tool-item:hover { background: color-mix(in srgb, var(--ti, var(--pr)) 12%, var(--card));
  border-color: color-mix(in srgb, var(--ti, var(--pr)) 35%, transparent); transform: translateX(2px); }
.tool-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--ti, var(--pr)), color-mix(in srgb, var(--ti, var(--pr)) 55%, #000));
  box-shadow: 0 5px 14px -4px color-mix(in srgb, var(--ti, var(--pr)) 70%, transparent);
  transition: transform .18s ease;
}
.tool-item:hover .tool-ic { transform: scale(1.07) rotate(-3deg); }
.tool-tx { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.tool-ti { font-weight: 700; font-size: .9rem; color: var(--text); line-height: 1.15; }
.tool-ds { font-size: .76rem; color: var(--muted); line-height: 1.3; }
.tool-item:hover .tool-ti { color: var(--ti, var(--pr)); }
[dir="rtl"] .tools-menu.dropdown-menu { left: auto; right: 0; transform-origin: top right; }
[dir="rtl"] .tool-item:hover { transform: translateX(-2px); }

@media (max-width: 991.98px) {
  .tools-menu.dropdown-menu { position: static; min-width: 0; width: 100%;
    box-shadow: none; margin-top: .35rem; }
}

/* ─────────── Gamification — Profil-Fortschritt ─────────── */
.progress-card {
  display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.15rem;
  margin-bottom: 1rem; border-radius: var(--r-md, 14px);
}
.pc-ring-wrap { position: relative; flex: 0 0 auto; width: 80px; height: 80px; }
.pc-ring { transform: rotate(-90deg); display: block; }
.pc-ring-bg { fill: none; stroke: var(--border); stroke-width: 7; }
.pc-ring-fg {
  fill: none; stroke: url(#pcGrad); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 213.63; stroke-dashoffset: 213.63;
  transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1);
}
.pc-ring-pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 1.25rem; color: var(--text); line-height: 1;
}
.pc-ring-pct i { font-style: normal; font-size: .7rem; color: var(--muted); margin-left: 1px; align-self: flex-start; margin-top: .35rem; }
.pc-body { flex: 1 1 auto; min-width: 0; }
.pc-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-weight: 700; font-size: .92rem; color: var(--text); margin-bottom: .55rem; }
.pc-done-tag { display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 800; padding: .15rem .5rem; border-radius: 50px;
  color: #fff; background: linear-gradient(135deg, #f59e0b, #f97316);
  box-shadow: 0 3px 10px -3px rgba(245,158,11,.7); animation: pcPop .4s ease; }
.pc-done-tag[hidden] { display: none !important; }   /* author rule must re-assert [hidden] over UA stylesheet */
@keyframes pcPop { 0%{transform:scale(.5);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
.pc-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.pc-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .73rem; font-weight: 600; padding: .26rem .6rem; border-radius: 50px;
  border: 1px solid var(--border); color: var(--muted); background: var(--bg);
  transition: all .2s ease; line-height: 1.1;
}
.pc-badge i { font-size: .72rem; }
.pc-badge.earned {
  color: var(--text); border-color: color-mix(in srgb, var(--ok, #16a34a) 45%, transparent);
  background: color-mix(in srgb, var(--ok, #16a34a) 14%, var(--card));
}
.pc-badge.earned i { color: var(--ok, #16a34a); }
.pc-badge.locked { opacity: .6; border-style: dashed; }
.pc-badge.locked i { opacity: .8; }
@media (max-width: 575.98px) { .progress-card { gap: .85rem; padding: .85rem; } .pc-ring-wrap { width: 66px; height: 66px; } }

/* ─────────── Share + QR modal ─────────── */
.share-modal { border-radius: 20px; }
.share-desc { font-size: .9rem; color: var(--text-2); margin-bottom: 1rem; }
.share-qr-box { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-bottom: 1.1rem; }
.share-qr {
  width: 188px; height: 188px; border-radius: 16px; background: #fff;
  display: grid; place-items: center; padding: 12px;
  box-shadow: 0 8px 26px -8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.06);
}
.share-qr img, .share-qr canvas { display: block; width: 100% !important; height: 100% !important; border-radius: 6px; }
.share-qr-spin { color: #94a3b8; font-size: 1.4rem; }
.share-qr-hint { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); font-weight: 500; }
.share-qr-hint i { color: var(--acc); }
.share-link-row { display: flex; gap: .5rem; margin-bottom: .7rem; }
.share-link-row .form-control {
  flex: 1 1 auto; font-size: .82rem; background: var(--bg); border: 1px solid var(--border);
  color: var(--text-2); border-radius: var(--r-sm); padding: .5rem .8rem; min-width: 0;
  text-overflow: ellipsis;
}
.share-copy-btn { flex: 0 0 auto; white-space: nowrap; border-radius: var(--r-sm); }
.share-copy-btn.copied { background: linear-gradient(135deg, #16a34a, #15803d) !important; box-shadow: 0 2px 8px rgba(22,163,74,.4) !important; }
.share-open { display: inline-flex; align-items: center; font-size: .84rem; font-weight: 600; color: var(--acc); text-decoration: none; }
.share-open:hover { text-decoration: underline; color: var(--acc); }
.share-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem;
  font-size: .78rem; line-height: 1.5; color: var(--muted);
  background: color-mix(in srgb, var(--acc) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--acc) 40%, transparent);
  border-radius: var(--r-sm); padding: .6rem .8rem; }
.share-note i { color: var(--acc); margin-top: .15rem; flex: 0 0 auto; }

/* ════════ BATCH 5 — Germanize + Job-URL ════════ */
.germanize-btn { gap: .4rem; }
.germanize-flag { font-size: .95rem; line-height: 1; }
.btn-out.germanize-btn:hover {
  border-color: var(--acc); color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
}
.joburl-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.joburl-row .form-control { flex: 1 1 auto; min-width: 0; }
.joburl-btn { flex: 0 0 auto; white-space: nowrap; }

/* ════════ BATCH 6 — Bewerbungs-Check (Red-Flag auditor) ════════ */
.check-points { list-style: none; margin: 0 0 .5rem; padding: 0; }
.check-points li { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--text-2); margin-bottom: .5rem; }
.check-points li i { color: var(--ok, #16a34a); font-size: .85rem; }

.ck-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.2rem; }
.ck-score {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; line-height: 1; color: #fff;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.45);
}
.ck-score span { font-size: 1.7rem; font-weight: 800; }
.ck-score small { font-size: .65rem; font-weight: 600; opacity: .85; margin-top: .1rem; }
.ck-score.ck-good { background: linear-gradient(135deg, #16a34a, #15803d); }
.ck-score.ck-ok   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ck-score.ck-bad  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.ck-verdict { flex: 1 1 auto; min-width: 0; }
.ck-score-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.ck-verdict p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--text); font-weight: 500; }

.ck-block-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .82rem; color: var(--text); margin: 1.1rem 0 .65rem; }
.ck-block-title i { color: var(--pr); }

.ck-flags { display: flex; flex-direction: column; gap: .65rem; }
.ck-flag {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r-sm);
  padding: .7rem .9rem; background: var(--bg);
}
.ck-flag.ck-high   { border-left-color: #ef4444; }
.ck-flag.ck-medium { border-left-color: #f59e0b; }
.ck-flag.ck-low    { border-left-color: #3b82f6; }
.ck-flag-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; flex-wrap: wrap; }
.ck-flag-head i { font-size: .85rem; }
.ck-high   .ck-flag-head i { color: #ef4444; }
.ck-medium .ck-flag-head i { color: #f59e0b; }
.ck-low    .ck-flag-head i { color: #3b82f6; }
.ck-sev { font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.ck-high   .ck-sev { color: #ef4444; }
.ck-medium .ck-sev { color: #f59e0b; }
.ck-low    .ck-sev { color: #3b82f6; }
.ck-cat { font-size: .68rem; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 50px; padding: .1rem .55rem; }
.ck-issue { font-size: .9rem; line-height: 1.5; color: var(--text); margin-bottom: .4rem; }
.ck-fix { display: flex; align-items: flex-start; gap: .45rem; font-size: .85rem; line-height: 1.5; color: var(--text-2);
  background: color-mix(in srgb, var(--ok, #16a34a) 9%, transparent);
  border-radius: var(--r-sm); padding: .5rem .7rem; }
.ck-fix i { color: var(--ok, #16a34a); margin-top: .15rem; font-size: .78rem; flex: 0 0 auto; }

.ck-clean { display: flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 600; color: var(--ok, #16a34a);
  background: color-mix(in srgb, var(--ok, #16a34a) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok, #16a34a) 35%, transparent);
  border-radius: var(--r-sm); padding: .85rem 1rem; }

.ck-strengths { margin-top: .4rem; }
.ck-strengths ul { margin: 0; padding-left: 1.2rem; }
.ck-strengths li { font-size: .87rem; line-height: 1.5; color: var(--text-2); margin-bottom: .3rem; }

/* ════════ BATCH 7 — Bewerbungstracker (Kanban) ════════ */
.trk-total-badge { font-size: .8rem; font-weight: 700; color: var(--text-2);
  background: var(--bg); border: 1px solid var(--border); border-radius: 50px; padding: .3rem .85rem; }
.trk-total-badge #trk-total { color: var(--pr); font-weight: 800; }

.trk-add { display: flex; gap: .5rem; flex-wrap: wrap; }
.trk-add .form-control { flex: 1 1 160px; min-width: 0; }
.trk-status-sel {
  flex: 0 1 220px; border-radius: var(--r-sm); padding: .5rem .8rem; font-size: .9rem; cursor: pointer;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); font-family: inherit;
}
.trk-status-sel:focus { border-color: var(--pr); outline: none; }
.trk-add-btn { flex: 0 0 auto; white-space: nowrap; }

.trk-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; align-items: start; }
.trk-col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: .7rem; }
.trk-col-head {
  display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .82rem; color: var(--text);
  padding: .15rem .25rem .65rem; border-bottom: 2px solid var(--cc, var(--pr)); margin-bottom: .7rem;
}
.trk-col-head i { color: var(--cc, var(--pr)); }
.trk-col-head .trk-count { margin-left: auto; font-size: .72rem; font-weight: 800; color: #fff;
  background: var(--cc, var(--pr)); border-radius: 50px; min-width: 20px; text-align: center; padding: .05rem .4rem; }
.trk-cards { display: flex; flex-direction: column; gap: .55rem; min-height: 24px; }

.trk-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .6rem .7rem; box-shadow: 0 2px 8px -4px rgba(0,0,0,.25); transition: transform .12s ease, box-shadow .12s ease; }
.trk-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
.trk-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.trk-company { font-weight: 700; font-size: .88rem; color: var(--text); line-height: 1.25; word-break: break-word; }
.trk-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: .1rem .25rem; font-size: .78rem;
  border-radius: 6px; transition: color .15s ease, background .15s ease; flex: 0 0 auto; }
.trk-del:hover { color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); }
.trk-position { font-size: .8rem; color: var(--text-2); margin-top: .15rem; line-height: 1.35; word-break: break-word; }
.trk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .55rem; }
.trk-date { font-size: .72rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
.trk-date i { font-size: .68rem; }
.trk-moves { display: inline-flex; gap: .25rem; }
.trk-mv { width: 26px; height: 24px; display: grid; place-items: center; cursor: pointer; font-size: .7rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text-2); transition: all .15s ease; }
.trk-mv:hover:not([disabled]) { border-color: var(--pr); color: var(--pr); }
.trk-mv[disabled] { opacity: .35; cursor: not-allowed; }
.trk-empty { font-size: .78rem; color: var(--muted); text-align: center; padding: 1rem .5rem; opacity: .7; }

@media (max-width: 991px) { .trk-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) {
  .trk-board { grid-template-columns: 1fr; }
  .trk-add .form-control, .trk-status-sel, .trk-add-btn { flex: 1 1 100%; }
}

/* ════════ BATCH 8 — Profesyonel cila (mobil tab-bar, a11y, odak) ════════ */

/* Mobilde 12 sekme: yatay kaydırılabilir tek satır (taşma/üst üste yerine) */
@media (max-width: 767.98px) {
  .tab-nav {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav > button {
    flex: 0 0 auto; width: auto; white-space: nowrap; scroll-snap-align: start;
  }
}

/* Daha okunur placeholder (WCAG kontrast) */
.form-control::placeholder { color: rgba(148,163,184,.72); opacity: 1; }
html.theme-light .form-control::placeholder { color: #94a3b8; opacity: 1; }

/* Görünür odak halkaları — klavye erişilebilirliği */
.form-control:focus, .form-select:focus, .lang-sel:focus, .trk-status-sel:focus, #nav-lang:focus {
  outline: none; border-color: var(--pr);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr) 26%, transparent);
}
.btn-out:focus-visible, .btn-pr:focus-visible,
.theme-toggle:focus-visible, .tools-dd-toggle:focus-visible,
[data-tab]:focus-visible, .tool-item:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}

/* Footer: dar ekranlarda taşmayı önle */
@media (max-width: 575.98px) {
  footer .row > [class*="col"] { margin-bottom: 1.1rem; }
  footer .d-flex { flex-wrap: wrap; }
}

/* ════════ BATCH 9 — Mobil düzeltmeler + input görünürlük + upgrade CTA ════════ */

/* (3) Input metni HER ZAMAN okunur + Chrome autofill koyu-tema düzeltmesi
   (yazarken koyu/görünmez yazı ve "bitince beyaz fon" sorununu giderir) */
.form-control { -webkit-text-fill-color: var(--text); caret-color: var(--pr); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important;
  caret-color: var(--text);
  transition: background-color 99999s ease-out 0s;
}
html.theme-light input:-webkit-autofill {
  -webkit-text-fill-color: #0f172a !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}

/* (4) "Pro'ya geç" CTA pill */
.upgrade-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .76rem; font-weight: 800; text-decoration: none; white-space: nowrap;
  color: #fff; background: linear-gradient(135deg, #f59e0b, #f97316);
  padding: .3rem .8rem; border-radius: 50px; cursor: pointer;
  box-shadow: 0 3px 10px -3px rgba(245,158,11,.6); transition: transform .15s ease;
}
.upgrade-pill:hover { color: #fff; transform: translateY(-1px); }

/* (1) Mobilde kenarlıklar/çizgiler daha belirgin */
@media (max-width: 991.98px) {
  .app-card, .preview-wrap, .progress-card, .trk-col {
    border-color: rgba(148,163,184,.30);
  }
  html.theme-light .app-card, html.theme-light .preview-wrap { border-color: #e2e8f0; }
}

/* (4) Mobil menü daha sade ve düzenli */
@media (max-width: 991.98px) {
  #navbarMain { padding-top: .35rem; }
  #navbarMain > .d-flex { flex-wrap: wrap; gap: .55rem !important; row-gap: .55rem; }
  #navbarMain .navbar-nav { margin-bottom: .35rem; gap: .1rem; }
  #navbarMain .nav-link, #navbarMain .tools-dd-toggle { padding: .6rem .5rem !important; }
  #user-menu {
    width: 100%; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-top: .35rem; padding-top: .65rem; border-top: 1px solid var(--border);
  }
  #user-menu #user-name { font-size: .92rem; }
  #btn-login, #btn-signup { flex: 1 1 auto; text-align: center; }
}

/* (2) CV-builder adım sekmeleri (step pills): mobilde sade tek-satır kaydırma */
@media (max-width: 575.98px) {
  .step-pills {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    gap: .4rem; padding-bottom: .15rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .step-pills::-webkit-scrollbar { display: none; }
  .step-pill {
    min-width: auto !important; width: auto !important; flex: 0 0 auto;
    white-space: nowrap; font-size: .78rem; scroll-snap-align: start;
  }
  /* şablon küçük resimleri biraz daha derli toplu */
  .tmpl-card { flex: 0 0 72px; }
}

/* ══════════════════════════════════════════
   PAYWALL — Upgrade-Modal + Pro-Kilit rozetleri
   ══════════════════════════════════════════ */
.upgrade-modal { border: 1px solid var(--border); }
.upgrade-modal .modal-header { padding-bottom: .25rem; }
.upgrade-reason { color: var(--text-2); font-size: .92rem; line-height: 1.5; margin: 0 0 .25rem; }
.upgrade-benefits.feature-list li { padding: .4rem 0; }
.upgrade-price { text-align: center; margin: .75rem 0 .25rem; }
.upgrade-price .price-num { font-size: 2rem; font-weight: 800; }
.upgrade-toggle.pricing-toggle { margin: .25rem 0; }
.upgrade-later {
  display: block; width: 100%; margin-top: .55rem; background: none; border: 0;
  color: var(--muted); font-size: .85rem; font-family: inherit; cursor: pointer; padding: .4rem;
}
.upgrade-later:hover { color: var(--text-2); text-decoration: underline; }

/* Tools-menüsünde Pro rozeti sağa yaslı */
.tool-item .tool-pro { margin-left: auto; align-self: center; flex: 0 0 auto; }
[dir="rtl"] .tool-item .tool-pro { margin-left: 0; margin-right: auto; }
/* Sekme düğmesindeki Pro rozeti hizalı */
[data-tab] .badge-premium { vertical-align: middle; }

/* Tek seferlik ödeme / ömür boyu rozetleri */
.onetime-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(124,58,237,.14); color: #c4b5fd;
  border: 1px solid rgba(124,58,237,.28);
  padding: .4rem 1rem; border-radius: 50px; font-size: .82rem; font-weight: 700;
  margin-top: .25rem;
}
html.theme-light .onetime-badge { background: rgba(37,99,235,.08); color: #1d4ed8; border-color: rgba(37,99,235,.22); }
.lifetime-note { font-size: .8rem; color: var(--muted); margin: .15rem 0 .5rem; font-weight: 600; }

/* ══════════════════════════════════════════
   v3 — Şablon/Renk seçici sadeleştirme (kompakt, tek satır)
   Sorun: 14 renk 32px + flex-wrap → koca blok ("renkler her yeri kapladı").
   Çözüm: tek satır yatay kaydırılır şerit + sabit küçük noktalar.
   ══════════════════════════════════════════ */
.cv-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin: .1rem 0 .9rem; min-width: 0;
}
.cv-colors-wrap {
  display: flex; align-items: center; gap: .55rem;
  flex: 1 1 auto; min-width: 0;            /* küçülebilsin ki şerit kaydırılsın */
}
.cv-ctrl-lbl {
  font-size: .78rem; color: var(--muted); font-weight: 600;
  flex: 0 0 auto; white-space: nowrap;
}
/* Renkler artık TEK SATIR — yatay kaydırma (her yeri kaplamasın) */
.color-swatches {
  display: flex; flex-wrap: nowrap; gap: .45rem;
  overflow-x: auto; padding: 7px 4px 8px;
  min-width: 0; flex: 1 1 auto;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  -webkit-overflow-scrolling: touch;
}
.color-swatches::-webkit-scrollbar { height: 3px; }
.color-swatches::-webkit-scrollbar-track { background: transparent; }
.color-swatches::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* Noktalar: sabit küçük boyut, ezilmesin (v2 32px override edilir) */
.color-swatches .color-dot {
  width: 24px; height: 24px; flex: 0 0 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.color-swatches .color-dot.selected,
.color-swatches .color-dot:hover { transform: scale(1.18); }
.color-swatches .color-lock {
  width: 12px; height: 12px; top: -4px; right: -4px; font-size: .42rem;
}
.cv-controls .lang-toggle { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .color-swatches .color-dot { width: 22px; height: 22px; flex: 0 0 22px; }
  .cv-ctrl-lbl { font-size: .72rem; }
}