/* ==========================================================================
   CV Motoru — ortak temel stiller (4 ana sayfa tasarımı paylaşır)
   Renk / yazı sistemi: CLAUDE.md (Porto mavi + Revija turuncu), açık tema
   ========================================================================== */

:root {
  --primary: #0088cc;
  --primary-100: #0077b3;
  --primary--100: #0099e6;
  --primary-rgba-20: rgba(0, 136, 204, 0.2);
  --primary-rgba-50: rgba(0, 136, 204, 0.5);
  --secondary: #0169fe;
  --accent: #ff680d;
  --accent-hover: #e05500;
  --success: #10b981;
  --warning: #f59e0b;

  --dark: #212529;
  --dark-text: #1b1b1b;
  --heading: #0f172a;
  --text: #6a6a6a;
  --text-body: #475569;
  --text-muted: #999;

  --border: #e9e9e9;
  --border-light: #efefef;

  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-soft: #f1f5f9;
  --bg-tint: #eef7fc;

  --border-radius: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, 0.18);

  --transition: all 0.3s ease;
  --font-primary: 'Poppins', sans-serif;
  --font-body: 'Open Sans', 'Lato', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-primary); color: var(--heading); }
a { color: var(--primary); transition: var(--transition); }
img { max-width: 100%; }

/* --- Özel kaydırma çubuğu (5px, vurgu rengi) --- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }
* { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-soft); }

/* --- Önyükleyici (Revija bounce loader) --- */
.loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-white);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease, visibility .4s ease;
}
body:not(.loading-overlay-showing) .loading-overlay { opacity: 0; visibility: hidden; }
.bounce-loader { display: flex; gap: 8px; }
.bounce-loader span {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary);
  animation: bounce-loader 1.2s infinite ease-in-out both;
}
.bounce-loader span:nth-child(2) { background: var(--accent); animation-delay: .15s; }
.bounce-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce-loader { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* --- Kaydırınca beliren animasyonlar --- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--delay-1 { transition-delay: .1s; }
.reveal--delay-2 { transition-delay: .2s; }
.reveal--delay-3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --- Ortak kaldırma (hover lift) --- */
.hover-lift { transition: var(--transition); }
.hover-lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* --- Butonlar --- */
.btn-cv {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-primary); font-weight: 600; font-size: 15px;
  padding: 13px 28px; border-radius: 50px; border: 2px solid transparent;
  text-decoration: none; transition: var(--transition); cursor: pointer;
}
.btn-cv--primary { background: var(--primary); color: #fff; }
.btn-cv--primary:hover { background: var(--primary-100); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -8px var(--primary-rgba-50); }
.btn-cv--accent { background: var(--accent); color: #fff; }
.btn-cv--accent:hover { background: var(--accent-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(255, 104, 13, .5); }
.btn-cv--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-cv--outline:hover { background: var(--primary); color: #fff; }
.btn-cv--ghost { background: rgba(255, 255, 255, .85); color: var(--heading); border-color: rgba(15, 23, 42, .08); }
.btn-cv--ghost:hover { background: #fff; color: var(--primary); }
.btn-cv--block { width: 100%; }

/* --- Fiyat etiketi --- */
.price-old { text-decoration: line-through; color: var(--text-muted); font-weight: 500; }
.price-new { font-family: var(--font-primary); font-weight: 800; color: var(--heading); line-height: 1; }
.price-badge {
  display: inline-block; background: var(--accent); color: #fff; font-weight: 700;
  font-size: 12px; padding: 4px 10px; border-radius: 50px; letter-spacing: .3px;
}

/* --- Veri güvenliği notu --- */
.privacy-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
  border-radius: var(--border-radius-md); padding: 14px 16px; font-size: 14px;
}
.privacy-note i { font-size: 20px; margin-top: 2px; }

/* ==========================================================================
   A4 CV kâğıdı (örnek CV önizlemesi) — tüm tasarımlarda aynı
   ========================================================================== */
.cv-sheet {
  background: #fff; color: #1e293b;
  font-family: Arial, Helvetica, sans-serif; font-size: 10.5px; line-height: 1.5;
  padding: 28px 30px; border-radius: 4px; box-shadow: var(--shadow-lg);
  text-align: left;
}
.cv-sheet__head { display: flex; gap: 16px; align-items: center; border-bottom: 2px solid #0f172a; padding-bottom: 12px; margin-bottom: 12px; }
.cv-sheet__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cv-sheet__name { font-family: Arial, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: .5px; margin: 0; color: #0f172a; }
.cv-sheet__title { color: var(--primary); font-weight: 700; font-size: 11.5px; margin: 2px 0 4px; }
.cv-sheet__contact { font-size: 9.5px; color: #475569; }
.cv-sheet__section { margin-bottom: 10px; }
.cv-sheet__section h4 {
  font-family: Arial, sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  color: #0f172a; border-bottom: 1px solid #cbd5e1; padding-bottom: 2px; margin: 0 0 5px;
}
.cv-sheet__row { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; color: #0f172a; }
.cv-sheet__row span:last-child { font-weight: 600; color: #475569; white-space: nowrap; }
.cv-sheet__sub { color: #64748b; font-size: 9.5px; margin-bottom: 2px; }
.cv-sheet ul { margin: 2px 0 6px; padding-left: 14px; }
.cv-sheet li { margin-bottom: 1px; }
.cv-sheet mark { background: #fef3c7; color: inherit; padding: 0 1px; border-radius: 2px; }

/* --- Demo sekmeleri (CV / Ön Yazı / E-posta) --- */
.demo-letter {
  background: #fff; border-radius: 4px; box-shadow: var(--shadow-lg);
  padding: 26px 28px; font-size: 13px; line-height: 1.7; color: #1e293b; white-space: pre-line;
  font-family: Arial, Helvetica, sans-serif;
}
.demo-note { font-size: 12px; color: var(--text-muted); }

/* --- Değerlendirme (ATS uygunluk) yardımcıları --- */
.score-ring {
  --val: 96; --size: 120px;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(var(--success) calc(var(--val) * 1%), var(--bg-soft) 0);
  display: grid; place-items: center; position: relative;
}
.score-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.score-ring__value { position: relative; text-align: center; font-family: var(--font-primary); }
.score-ring__value strong { display: block; font-size: 28px; font-weight: 800; color: var(--heading); line-height: 1; }
.score-ring__value small { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.kw-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 50px; margin: 0 4px 6px 0; }
.kw-chip--ok { background: #dcfce7; color: #166534; }
.kw-chip--partial { background: #fef3c7; color: #92400e; }
.kw-chip--miss { background: #fee2e2; color: #991b1b; }
.crit-list { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.crit-list li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.crit-list li:last-child { border-bottom: 0; }
.crit-list .fa-circle-check { color: var(--success); margin-top: 3px; }
.crit-list .fa-circle-exclamation { color: var(--warning); margin-top: 3px; }

/* --- SSS akordeon (Reviver: max-height geçişi) --- */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item__q {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 0; font-family: var(--font-primary); font-weight: 600; font-size: 16px; color: var(--heading);
}
.faq-item__q i { transition: var(--transition); color: var(--primary); }
.faq-item.is-open .faq-item__q i { transform: rotate(45deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item__a p { padding: 0 0 18px; margin: 0; }

/* --- Tasarım seçici şeridi (yalnızca tasarım karşılaştırma aşamasında) --- */
.design-switcher {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1500;
  display: flex; gap: 6px; align-items: center; padding: 6px 8px;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 50px; box-shadow: var(--shadow-lg);
  font-family: var(--font-primary); font-size: 13px;
}
.design-switcher span { padding: 0 8px; color: var(--text-muted); font-weight: 600; }
.design-switcher a { text-decoration: none; padding: 6px 14px; border-radius: 50px; color: var(--heading); font-weight: 600; }
.design-switcher a.is-active { background: var(--primary); color: #fff; }
@media (max-width: 575px) { .design-switcher span { display: none; } .design-switcher a { padding: 6px 10px; } }

/* --- Ücretsiz CV kontrolü bandı (ikincil teklif) --- */
.free-check {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px dashed var(--primary); border-radius: var(--border-radius-lg);
  padding: 22px 26px; box-shadow: var(--shadow-sm);
}
.free-check__icon { width: 54px; height: 54px; border-radius: 14px; background: var(--bg-tint); color: var(--primary); display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.free-check__body { flex: 1; min-width: 240px; }
.free-check__title { font-family: var(--font-primary); font-size: 18px; color: var(--heading); }
.free-check__text { margin: 4px 0 8px; font-size: 14.5px; }
.free-check__items { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; font-weight: 600; color: var(--heading); }
.free-check__items i { color: var(--success); margin-right: 6px; }
.free-check__btn { flex-shrink: 0; }

/* --- Örnek CV seçenekleri (Fotoğrafı / Telefonu kaldır) --- */
.cv-options { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--heading); margin-bottom: 14px; }
.cv-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cv-options input { width: 16px; height: 16px; accent-color: var(--primary); }
.cv-options__formats { margin-left: auto; color: var(--text-muted); font-weight: 600; }
.cv-sheet.hide-photo .cv-sheet__photo { display: none; }
.cv-sheet.hide-phone .cv-sheet__phone { display: none; }

/* --- Paket notu ve CV başına fiyat --- */
.price-note { font-size: 13px; font-weight: 600; color: var(--primary); }