/* ATS-uyumlu CV Editörü: sihirbaz navigasyonu, statik ipuçları, kategori kutuları,
   tek sütunlu/tablosuz önizleme + print (Faz 7). */

/* align-items:flex-start: editör panelini önizlemenin (çok sayfalı → uzun) boyuna GERMEZ.
   Aksi halde kısa bir adımda (ör. İletişim) editör önizleme kadar uzayıp alt eylem çubuğunu
   çok aşağıya itiyor, ortada kocaman boşluk kalıyordu. Artık editör içeriği kadar, önizleme
   kendi tam boyunda. */
.cv-builder-container { display: flex; gap: 20px; height: 100%; align-items: flex-start; }
.cv-editor { flex: 1; max-height: 100%; background: var(--bg-panel); padding: 25px; border-radius: var(--radius-md); overflow-y: auto; display: flex; flex-direction: column; }
/* Editör dikey bir flex sütun + overflow-y:auto. İçerik viewport'u aşınca esnek çocukların
   BÜZÜLMEMESİ, editörün KAYMASI gerekir — yoksa flex-shrink ipucu panelini (tek büzülebilir
   öğe) 34px'e ezip içeriğini gizliyordu. flex-shrink:0 doğal boyu korur, overflow-y kaydırır. */
.cv-editor > * { flex-shrink: 0; }
/* Kaydırma .cv-preview-viewport'ta: sayfa yığını orada kayar, araç çubuğu sabit kalır.
   height:100%: container artık align-items:flex-start olduğundan germe yok — önizleme kendi
   tam yüksekliğini (viewport) açıkça alır ki içeride kaysın, tüm sayfaları dikey uzamasın. */
.cv-preview-pane { flex: 1; height: 100%; min-height: 0; background: var(--cv-preview-bg); padding: 20px; border-radius: var(--radius-md); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-light); }

.cv-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
/* Araç çubuğu: butonlar tek satır kalır (yoksa "CV Yükle (Yeni Versiyon)" gibi uzun etiketler
   iki satıra sarıp yükseklikleri eşitsizleştiriyor, satır karmakarışık görünüyordu). flex:0 0 auto
   ile doğal genişlikte kalır (components.css'teki flex:1/2 büyümesini geçersiz kılar), align-items
   stretch ile hepsi aynı yükseklikte hizalanır. */
.cv-editor-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.cv-editor-toolbar > .form-select,
.cv-editor-toolbar > button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 14px;
    font-size: 0.85rem;
    border-radius: 10px;
}
.cv-editor-toolbar > .form-select { min-width: 130px; }
/* İkon-yalnız sürüm butonları (yeniden adlandır/ekle/kopyala/sil) kare ve dengeli dursun */
.cv-editor-toolbar > button[title="Yeniden adlandır"],
.cv-editor-toolbar > button[title="Yeni CV versiyonu"],
.cv-editor-toolbar > button[title="Bu versiyonu kopyala"],
.cv-editor-toolbar > button[title="Bu versiyonu sil"] { padding: 9px 12px; }

/* CV versiyonunun sunucuyla senkron durumu (Faz 8.2): "Kaydet" eyleminin doğrudan geri
   bildirimi - vurgusuz, tek satır, renk kodlu nokta. */
.cv-save-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.cv-save-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cv-save-status-success { background: var(--color-success, #10b981); }
.cv-save-status-warning { background: var(--color-warning, #f59e0b); }
.cv-save-status-muted { background: var(--text-secondary, #94a3b8); }

/* Sihirbaz adım sekmeleri */
.cv-wizard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    background: var(--bg-main, rgba(0,0,0,0.03));
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}
.cv-step-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary, inherit);
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition-fast);
    white-space: nowrap;
}
.cv-step-tab:hover { background: rgba(99, 102, 241, 0.1); }
.cv-step-tab.active { background: var(--color-primary); color: #fff; }

/* flex:1 YOK bilerek: eylem çubuğunu (Geri/İleri) panelin en dibine itmesin — form alanlarının
   hemen ardından gelsin. Editör artık içeriği kadar yüksek olduğu için buna gerek de kalmadı. */
.cv-step-panels { flex: 0 0 auto; }
.cv-step { display: none; }
.cv-step.active { display: block; animation: cvStepFade 0.15s ease; }
@keyframes cvStepFade { from { opacity: 0; } to { opacity: 1; } }

.cv-wizard-controls {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

/* Dinamik "ustalık sınıfı" ipucu paneli: odaklanılan input'a / adıma göre içerik değiştirir
   (js/data/cvHints.js). Her değişimde ikon+başlık+gövde+formül+tavsiye+örnekler kademeli
   (staggered) olarak beliriyor. */
.cv-hint-panel {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.02));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 18px;
    max-height: 420px;
    overflow-y: auto;
}

.cv-hint-panel::-webkit-scrollbar {
    width: 6px;
}
.cv-hint-panel::-webkit-scrollbar-track {
    background: transparent;
}
.cv-hint-panel::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 4px;
}

.cv-hint-panel-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #8b5cf6));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
    position: sticky;
    top: 0;
}

.cv-hint-panel-body { flex: 1; min-width: 0; }

.cv-hint-panel-headrow {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.cv-hint-panel-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cv-hint-panel-tagline {
    font-size: 0.78rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-muted);
    position: relative;
    padding-left: 10px;
}
.cv-hint-panel-tagline::before { content: '—'; position: absolute; left: 0; opacity: 0.6; }

.cv-hint-panel-text {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-main);
}

.cv-hint-formula,
.cv-hint-advice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1.55;
}
.cv-hint-formula {
    background: rgba(99, 102, 241, 0.1);
    color: var(--text-main);
}
.cv-hint-formula i { color: var(--color-primary); margin-top: 2px; }
.cv-hint-advice {
    background: rgba(245, 158, 11, 0.1);
    color: var(--text-main);
    border-left: 2px solid var(--color-warning, #f59e0b);
}
.cv-hint-advice i { color: var(--color-warning, #f59e0b); margin-top: 2px; }

/* .hidden ile aynı özgüllükte display:flex tanımlayan kutular - kaynak sırası kazanmasın diye bileşik seçici */
.cv-hint-formula.hidden,
.cv-hint-advice.hidden,
.cv-hint-panel-examples.hidden { display: none; }

.cv-hint-panel-examples {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cv-hint-example {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    line-height: 1.55;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: var(--bg-body);
    opacity: 0;
    transform: translateX(-8px);
    animation: cvHintExampleIn 0.35s ease forwards;
}
.cv-hint-example i { margin-top: 2px; flex-shrink: 0; }
.cv-hint-example-weak { color: var(--color-danger); }
.cv-hint-example-weak i { color: var(--color-danger); }
.cv-hint-example-strong { color: var(--color-success, #10b981); }
.cv-hint-example-strong i { color: var(--color-success, #10b981); }
.cv-hint-example-template {
    color: var(--text-main);
    background: rgba(245, 158, 11, 0.08);
    border: 1px dashed rgba(245, 158, 11, 0.4);
}
.cv-hint-example-template i { color: #d97706; }

@keyframes cvHintExampleIn {
    to { opacity: 1; transform: translateX(0); }
}

/* İpucu değişince ikon nabız atar + döner, gövde ve formül/tavsiye kademeli kayarak belirir */
@keyframes cvHintPulse {
    0% { box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4), 0 0 0 0 rgba(99, 102, 241, 0.45); transform: scale(1) rotate(0deg); }
    35% { transform: scale(1.15) rotate(-8deg); }
    70% { box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4), 0 0 0 10px rgba(99, 102, 241, 0); transform: scale(1.05) rotate(4deg); }
    100% { box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4), 0 0 0 0 rgba(99, 102, 241, 0); transform: scale(1) rotate(0deg); }
}
@keyframes cvHintSlideFade {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.cv-hint-panel-pulse .cv-hint-panel-icon { animation: cvHintPulse 0.55s ease-out; }
.cv-hint-panel-pulse .cv-hint-panel-headrow,
.cv-hint-panel-pulse .cv-hint-panel-text { animation: cvHintSlideFade 0.3s ease both; }
.cv-hint-panel-pulse .cv-hint-formula { animation: cvHintSlideFade 0.3s ease both 0.05s; }
.cv-hint-panel-pulse .cv-hint-advice { animation: cvHintSlideFade 0.3s ease both 0.1s; }

.cv-field-grid, .cv-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}
.cv-item-grid-3 { grid-template-columns: repeat(3, 1fr); }

.cv-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cv-list-empty { color: var(--text-secondary, #94a3b8); font-size: 0.9rem; font-style: italic; }

.cv-list-item {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 12px;
    position: relative;
}
.cv-list-item .cv-item-remove {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: 0.9rem;
}
.cv-list-item input, .cv-list-item textarea { margin-bottom: 0; }

/* Yetkinlik kategori kutuları */
.cv-skill-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

/* Tasarım paneli */
.cv-customization { background: var(--bg-panel); border-radius: var(--radius-md); border: 1px solid var(--border-light); padding: 20px; }
.customization-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 15px; }
.cv-color-options { display: flex; gap: 10px; }
.color-option { width: 40px; height: 40px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: var(--transition-fast); }
.color-option:hover { transform: scale(1.1); }
.color-option.active { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.cv-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }

/* Önizleme başlığı */
.cv-preview-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.cv-preview-actions { display: flex; gap: 10px; }

/* --- ATS-güvenli CV kağıdı: tek sütun, tablosuz, sans-serif, sade hiyerarşi ---
   Önizleme gerçek A4 sayfalarına bölünür: .cv-page yüksekliği SABİTTİR, içerik sığmazsa
   js/views/cvBuilder.js:renderCvPreviewPages ölçüm yaparak yeni bir sayfa açar. Bu yüzden
   sayfa kutusunun geometrisini (width/height/padding) değiştirirsen sayfalama da değişir —
   ölçüm tamamen bu değerlerden okunur, JS'te sabit yok. */
.cv-preview-viewport {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.cv-pages {
    --cv-preview-scale: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    width: 21cm;
    flex: 0 0 auto;
    /* Dar panelde A4 (21cm ≈ 794px) sığmaz: görsel küçültme transform ile yapılır, zoom ile
       DEĞİL — zoom ölçüm birimlerini de değiştirip sayfalamayı bozar. transform DÜZEN KUTUSUNU
       küçültmediği için (ölçekli sayfa hâlâ 794px yer kaplar → panelde yatay/dikey kaydırma
       çubuğu) fitCvPreviewScale() her iki eksende negatif margin ile kutuyu görsel boyuta
       indirger; origin sol-üst ki telafi tek yönlü (sağ+alt) kalsın. Kutu görsel boyuta inince
       parent'ın justify-content:center'ı sayfayı doğru ortalar. */
    transform: scale(var(--cv-preview-scale));
    transform-origin: top left;
}
.cv-page {
    position: relative;
    flex: 0 0 auto;
    width: 21cm;
    height: 29.7cm;
    padding: 15mm;
    background: white;
    box-shadow: var(--cv-page-shadow);
    color: #1a1a1a;
    /* Kağıt kenarını korur: aşırı uzun/boşluksuz bir kelime (yapıştırılan URL vb.) kağıdın
       dışına taşıp gri alana sızmasın. Metin sarma .cv-doc'ta zaten var, bu son güvenlik ağı. */
    overflow: hidden;
}
/* Sayfa numarası kağıdın DIŞINDA: görüntüleyici süsü, CV içeriği değil (baskıda gizlenir) */
.cv-page::after {
    content: 'Sayfa ' attr(data-page-number);
    position: absolute;
    right: 2px;
    bottom: -22px;
    font-size: 0.7rem;
    color: var(--cv-preview-label);
}
.cv-page-count { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
/* flow-root: margin collapse'i engeller — aksi halde son bölümün alt boşluğu kutunun dışına
   taşar ve scrollHeight ölçümü sayfa doluluğunu olduğundan az gösterir. */
/* overflow-wrap/word-break: boşluksuz uzun kelimeler (URL, kullanıcının yapıştırdığı slug'lar)
   satır sonunda kırılıp kağıt genişliğinde kalsın — aksi halde yatayda taşıp önizlemeyi bozar. */
.cv-doc { font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.cv-page > .cv-doc { display: flow-root; }
/* Bir bölüm sayfaya sığmayıp devam ettiğinde başlığa eklenen not */
.cv-doc-cont { font-weight: 400; font-size: 0.85em; color: #888; letter-spacing: 0; }
.cv-doc-header { border-bottom: 2px solid; padding-bottom: 10px; margin-bottom: 20px; }
.cv-doc-header h1 { margin: 0 0 4px; font-size: 1.6em; }
.cv-doc-title { margin: 0 0 4px; color: #555; }
.cv-doc-contact { margin: 0; font-size: 0.85em; color: #666; }
.cv-doc section { margin-bottom: 20px; }
.cv-doc h2 { font-size: 1.05em; letter-spacing: 0.03em; margin: 0 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
.cv-doc p { margin: 0 0 8px; }
.cv-doc ul { margin: 6px 0 0; padding-left: 20px; }
.cv-doc li { margin-bottom: 4px; }
.cv-preview-entry { margin-bottom: 14px; }
.cv-preview-entry-inline { margin-bottom: 6px; }
.cv-preview-period { display: block; font-size: 0.85em; color: #777; }
.cv-skill-line { margin-bottom: 6px !important; }

/* Print: yalnız CV kağıdı görünür, metin seçilebilir kalır (resim değil). Ekrandaki sayfa
   bölümlemesi baskıya birebir taşınır — her .cv-page bir A4 yaprağı.
   Sayfalar body'nin DOĞRUDAN altındaki #cvPrintRoot'a klonlanır (cvBuilder.js:beforeprint):
   eski "body * {visibility:hidden} + #cvPreview{position:absolute}" yöntemi Chromium'da
   absolute konumlanmış içeriği sayfalara BÖLMEDİĞİ için uzun CV'yi tek sayfaya basıyordu. */
#cvPrintRoot { display: none; }
@media print {
    body.cv-printing > *:not(#cvPrintRoot) { display: none !important; }
    #cvPrintRoot { display: block; }
    #cvPrintRoot .cv-page {
        box-shadow: none;
        break-after: page;
        page-break-after: always;
    }
    #cvPrintRoot .cv-page:last-child { break-after: auto; page-break-after: auto; }
    #cvPrintRoot .cv-page::after { content: none; }
    @page { size: A4; margin: 0; }
}