* {
    box-sizing: border-box;
}

/* v61: erisilebilirlik turu ------------------------------------------------
   1) Klavye kullanicilari icin genel focus-visible halkasi: fare tıklamasinda
      degil sadece klavye ile girilen odakta gorunur. Sinif bazli ozel
      kurallar (.btn, .close-modal vb.) specificity geregi buna onceliklidir. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(52, 152, 219, 0.55);
    outline-offset: 2px;
}

/* 2) "Icerige atla" baglantisi: ilk Tab'da gorunur olur */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 10000;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
}
.skip-link:focus {
    left: 8px;
}

/* 3) Kontrast duzeltmeleri (WCAG AA, acik mod): soluk griler koyulasti */

:root {
    --primary-color: #3498db;
    --primary-dark: #2980b9;
    --secondary-color: #9b59b6;
    --danger-color: #e74c3c;
    --success-color: #2ecc71;
    --warning-color: #f1c40f;
    --info-color: #1abc9c;
    
    --sidebar-bg: #1e272e;
    --sidebar-text: #d2dae2;
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-active: #3498db;
    
    --light-bg: #f5f7fa;
    --sidebar-width: 260px;
    --font-ui: 'Plus Jakarta Sans', sans-serif;

    /* ===== v18 Faz2: Tasarim tokenlari ===== */
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --text-muted: #64748b;
    --border-color: #e4e9ee;
    --border-strong: #dfe6e9;
    --surface: #ffffff;
    --surface-2: #f8f9fa;
    --surface-3: #f1f3f5;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
    --focus-ring: 0 0 0 3px rgba(52, 152, 219, 0.16);
    --tint-primary: rgba(52, 152, 219, 0.08);
    
    --cv-accent-color: #2c3e50;
    --font-cv: 'PT Serif', serif;
    
    --cv-font-size: 11pt;
    --cv-line-height: 1.4;
    --cv-padding: 20mm;
    --cv-section-gap: 15px;
    /* Faz 2.2 (v33) - kenar cubugu sablonlari
       v44: 33% yerine sabit px. Yuzde padding #cv-root'un containing
       block'una (mobilde olceklenmis #cv-scale-container, 360px) cozumlenir;
       header.exec-header genisligi ise #cv-root'un kendi 794px'ine gore.
       Mobil onizlemede ikisi farkli cikiyor, ana icerik cubugun altina
       biniyordu. 262px = 794px A4'un %33'u — print ciktisi (A4=794px)
       bit uyumlu, degisiklik yok. */
    --cv-exec-bar-width: 262px;
    --cv-tt-bar-width: 10mm;
    --cv-accent-dark: var(--cv-accent-color);
    --cv-accent-dark: color-mix(in srgb, var(--cv-accent-color), #000 32%);
}

body {
    background-color: var(--light-bg);
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    color: #2d3436;
    overflow-x: hidden;
}

#toast {
    visibility: hidden;
    min-width: 200px;
    background-color: var(--success-color);
    color: white;
    text-align: center;
    border-radius: 8px;
    padding: 12px;
    position: fixed;
    z-index: 3000;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-weight: 700;
}

/* Move toast lower on mobile to avoid blocking edit/preview tabs */
@media screen and (max-width: 1024px) {
    #toast {
        top: 80px;
    }
}

#toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 20px; opacity: 1;}
}

@media screen and (max-width: 1024px) {
    @keyframes fadein {
      from {top: 60px; opacity: 0;}
      to {top: 80px; opacity: 1;}
    }
}

@keyframes fadeout {
  from {top: 20px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@media screen and (max-width: 1024px) {
    @keyframes fadeout {
      from {top: 80px; opacity: 1;}
      to {top: 60px; opacity: 0;}
    }
}

#landing-view {
    flex-direction: column;
    background: white;
    position: relative;
}

/* Hero arka plan dekorasyonu: yumusak renkli blob'lar */
.landing-hero {
    position: relative;
    isolation: isolate;
}
.landing-hero::before {
    content: "";
    position: absolute;
    top: -220px;
    left: -180px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.14) 0%, transparent 65%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}
.landing-hero::after {
    content: "";
    position: absolute;
    bottom: -180px;
    right: -120px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(155, 89, 182, 0.10) 0%, transparent 65%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 40px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* v29: iOS tarzi tema ac/kapa anahtari */
.theme-switch {
    width: 54px;
    height: 30px;
    border-radius: 999px;
    background: #dfe6e9;
    border: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
.theme-switch:hover .theme-switch-knob { transform: translateX(2px); }
.theme-switch.on:hover .theme-switch-knob { transform: translateX(22px); }
.theme-switch .theme-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
.theme-switch .theme-switch-knob::after { content: "🌙"; }
.theme-switch.on { background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); }
.theme-switch.on .theme-switch-knob { transform: translateX(24px); }
.theme-switch.on .theme-switch-knob::after { content: "☀️"; }
body.dark-mode .theme-switch:not(.on) { background: #34424f; }
.btn-text {
    background: none;
    border: none;
    font-weight: 600;
    color: #2d3436;
    cursor: pointer;
    font-size: 15px;
}
.btn-text:hover { color: var(--primary-color); }

.btn-primary-small {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.btn-primary-small:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(52, 152, 219, 0.4); }

.landing-hero {
    display: flex;
    flex-wrap: wrap;
    padding: 90px 40px 70px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    gap: 40px;
}
.hero-content {
    flex: 1;
    min-width: 300px;
}

/* Rozet (H1 ustundeki kucuk pill) */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(52, 152, 219, 0.10);
    border: 1px solid rgba(52, 152, 219, 0.25);
    color: var(--primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
    animation: pill-pulse 2s infinite;
}
@keyframes pill-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.08); }
}

.hero-content h1 {
    font-size: 3rem;
    line-height: 1.15;
    margin-bottom: 24px;
    color: #1a1d20;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.highlight-text {
    color: var(--primary-color);
    padding: 0 4px;
    background: linear-gradient(120deg, rgba(52, 152, 219, 0.14) 0%, rgba(52, 152, 219, 0.04) 100%);
    border-radius: 6px;
}
.hero-subtitle {
    font-size: 1.12rem;
    color: #636e72;
    margin-bottom: 36px;
    line-height: 1.7;
    max-width: 560px;
}
.hero-buttons {
    display: flex;
    gap: 15px;
}
.btn-hero-primary {
    padding: 15px 32px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(52, 152, 219, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(52, 152, 219, 0.45); }
.btn-hero-secondary {
    padding: 15px 32px;
    background: white;
    color: #2d3436;
    border: 1.5px solid #dfe6e9;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-hero-secondary:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(52, 152, 219, 0.04); }

/* Istatistik seridi (butonlarin altinda) */
.hero-stats {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid #ecf0f1;
}
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat-num {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #3498db, #2980b9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
.stat-label { font-size: 12.5px; color: #64748b; font-weight: 600; }
.stat-sep { width: 1px; height: 36px; background: #ecf0f1; }

.hero-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    perspective: 1200px;
}

/* Gercek CV PNG iceren tarayici penceresi mockup'i */
.mockup-card {
    width: 340px;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 30px 60px -15px rgba(45, 52, 54, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: rotate(-2deg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: mockup-float 6s ease-in-out infinite;
}
.mockup-card:hover { transform: rotate(0deg) scale(1.02); }
@keyframes mockup-float {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-10px); }
}

.mockup-header {
    height: 34px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 6px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.red { background: #ff7675; }
.yellow { background: #ffeaa7; }
.green { background: #55efc4; }
.mockup-url {
    flex: 1;
    margin-left: 10px;
    background: #ecf0f1;
    border-radius: 6px;
    font-size: 10.5px;
    color: #95a5a6;
    padding: 3px 12px;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mockup-body { position: relative; background: white; }
.mockup-body img {
    display: block;
    width: 100%;
    height: auto;
}
.mock-badge {
    position: absolute;
    bottom: 28px;
    right: -18px;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
    padding: 9px 20px;
    font-weight: 800;
    font-size: 13.5px;
    border-radius: 8px;
    transform: rotate(-4deg);
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.4);
}

.features-section {
    background: #f8f9fb !important;
}
.feature-card {
    background: white !important;
}

.features-section {
    padding: 80px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.feature-card {
    background: white;
    padding: 36px 30px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid #eef1f4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #9b59b6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(45, 52, 54, 0.10); }
.feature-card:hover::before { transform: scaleX(1); }
.f-icon {
    font-size: 26px;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.12), rgba(155, 89, 182, 0.10));
}
.feature-card h2 {
    margin: 0 0 12px 0;
    color: #1a1d20;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.feature-card p {
    margin: 0;
    color: #636e72;
    font-size: 0.95rem;
    line-height: 1.65;
}

.landing-footer {
    padding: 50px 20px 40px;
    text-align: center;
    background: white;
    border-top: 1px solid #eef1f4;
}
.landing-footer p { color: #64748b; font-size: 13px; margin-bottom: 10px; }
.footer-links a { color: #636e72; text-decoration: none; margin: 0 10px; font-size: 13px; font-weight: 600; }
.footer-links a:hover { color: var(--primary-color); }

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 30px 20px;
    background: white;
    border: 1px solid #eef1f4;
    border-radius: 18px;
    max-width: 900px;
    margin: 0 auto 30px auto;
}
.badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.badge-icon {
    font-size: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(46, 204, 113, 0.10);
    color: #27ae60;
    font-weight: 800;
}
.badge-text {
    display: flex;
    flex-direction: column;
}
.badge-text strong {
    font-size: 14px;
    color: #1a1d20;
    font-weight: 700;
    margin-bottom: 2px;
}
.badge-text span {
    font-size: 12px;
    color: #636e72;
}

@media screen and (max-width: 768px) {
    .trust-badges {
        flex-direction: column;
        gap: 20px;
        padding: 25px 15px;
    }
    .badge-item {
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
    .badge-text {
        align-items: center;
    }
}

@media screen and (max-width: 768px) {
    .landing-hero { padding: 40px 20px; text-align: center; flex-direction: column-reverse; gap: 30px; }
    .hero-content h1 { font-size: 2.2rem; line-height: 1.2; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 25px; }
    .hero-buttons { justify-content: center; flex-direction: column; width: 100%; gap: 12px; }
    .btn-hero-primary, .btn-hero-secondary { width: 100%; padding: 16px; }
    .hero-stats { justify-content: center; gap: 18px; margin-top: 30px; padding-top: 22px; }
    .stat-num { font-size: 1.2rem; }
    .stat-label { font-size: 11.5px; }
    .stat-sep { height: 28px; }
    .landing-header { padding: 15px 15px; }
    .landing-header .brand-text { display: none; }
    .header-actions { gap: 8px; }
    .mockup-card { width: min(300px, 90%); margin: 0 auto; animation: none; }
    .mock-badge { right: -8px; }
}

#auth-view { 
    align-items: center; 
    justify-content: center; 
    background: #f5f7fa; 
    flex-direction: column;
}

.back-to-home {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0,0,0,0.05);
    border: none;
    color: #2d3436;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;
}
.back-to-home:active { transform: translateX(-5px); background: rgba(0,0,0,0.1); }

@media screen and (max-width: 500px) {
    .back-to-home { top: 15px; left: 15px; }
}

.auth-card.professional { 
    background: white; 
    padding: 50px; 
    border-radius: 24px; 
    width: 450px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.1); 
    border: 1px solid #f0f0f0;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.auth-card.professional::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

@media screen and (max-width: 500px) {
    .auth-card.professional {
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
        padding: 80px 24px 40px 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .auth-header h2 { font-size: 22px; }
    .auth-btn { padding: 16px; font-size: 16px; }
}

.auth-header { text-align: center; margin-bottom: 30px; }
.brand-logo.small { 
    width: 50px; height: 50px; margin: 0 auto 20px auto; 
    font-size: 24px; 
    border-radius: 12px;
}
.auth-header h2 { font-size: 28px; font-weight: 800; margin: 0 0 10px 0; color: #2d3436; letter-spacing: -0.5px; }
.auth-header p { margin: 0; color: #636e72; font-size: 15px; }

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #2d3436;
    margin-bottom: 8px;
    margin-top: 15px;
}

.divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}
.divider::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: #eee;
}
.divider span {
    background: white;
    padding: 0 10px;
    position: relative;
    color: #b2bec3;
    font-size: 11px;
    font-weight: 700;
}

.auth-input {
    padding: 14px;
    border: 1.5px solid #eee;
    border-radius: 12px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s;
    background: #fcfcfc;
}
.auth-input:focus {
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.35);
    outline: none;
}
.auth-btn {
    width: 100%;
    padding: 14px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3);
}
.google-btn {
    background: white;
    color: #2d3436;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}
.google-btn svg {
    flex-shrink: 0;
}

.auth-toggle {
    text-align: center;
    margin-top: 25px;
    font-size: 13px;
    color: #636e72;
}
.link-text {
    color: var(--primary-color);
    font-weight: 700;
    cursor: pointer;
}

.terms-check {
    margin-bottom: 20px;
    font-size: 12px;
}
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.checkbox-container input { display: none; }
.checkmark {
    width: 16px;
    height: 16px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
    position: relative;
}
.checkbox-container input:checked ~ .checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.checkbox-container input:checked ~ .checkmark::after {
    content: "✓";
    color: white;
    font-size: 12px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.terms-text { color: #636e72; line-height: 1.4; }
.terms-text a { color: var(--primary-color); text-decoration: none; }


.view-section { 
    display: none; 
    min-height: 100vh; 
    width: 100%; 
}
.view-section.active { 
    display: flex; 
}

.lang-switcher-sidebar {
    margin-left: auto;
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    padding: 2px;
    border-radius: 12px;
}
.lang-switcher-sidebar .lang-btn-mini {
    color: #64748b;
    padding: 2px 6px;
    font-size: 10px;
}
.lang-switcher-sidebar .lang-btn-mini.active {
    background: var(--primary-dark);
    color: white;
}
.lang-btn-mini {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 800;
    color: #52606d;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 15px;
    transition: 0.2s;
}
.lang-btn-mini.active {
    background: white;
    /* v61: #3498db beyaz uzerinde 3.15:1 — kucuk metin icin AA (4.5) altinda */
    color: #1c6fa0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.lang-selector-fab {
    padding: 5px !important;
    gap: 5px !important;
    justify-content: center;
}
.lang-btn-fab {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 800;
    color: #747d8c;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 20px;
    transition: 0.2s;
}
.lang-btn-fab.active {
    background: var(--primary-color);
    color: white;
}

.lang-switcher-minimal {
    display: flex;
    gap: 4px;
    background: #f1f2f6;
    padding: 3px;
    border-radius: 20px;
}

.template-header {
    width: 100%;
    max-width: 1240px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.auth-header-mobile {
    display: none;
    width: 100%;
    padding: 15px 20px;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

.back-to-home-minimal {
    background: #f1f2f6;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #2d3436;
    cursor: pointer;
}

@media screen and (max-width: 1024px) {
    .auth-header-mobile { display: flex; }
    .template-header h1 { font-size: 1.5rem; }
    .back-to-home { display: none !important; }
}

@media screen and (max-width: 480px) {
    /* lang-switcher-minimal is now visible on mobile */
}

#template-view { 
    flex-direction: column; 
    align-items: center; 
    padding: 40px 20px 60px; 
}

/* v65: secim ekrani kart izgarasindan "sablon atolyesi"ne cevrildi (kullanici
   istegi: baska bir tasarim). Solda 9 satirlik liste (kucuk A4 thumb + ad +
   tek satir aciklama + "Kullan"), sagda SECILI sablonun TAM A4 onizlemesi ve
   tek "Bu Sablonla Basla" CTA'si. v46 okunabilirlik hedefi guclenerek suruyor:
   onizleme artik ~560px genislikte TAM sayfa (kirpma/zoom yok; eski kart
   hover pan'i kalkti). Satira tik = onizleme; cift tik / Enter / CTA = basla. */
.template-picker {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
    max-width: 1240px;
    margin-top: 24px;
}
.template-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 330px;
    flex-shrink: 0;
    max-height: 760px;
    overflow-y: auto;
    padding: 2px 6px 2px 2px;
}
.template-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
}
.template-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 14px;
    background: white;
    border: 1px solid #e6e9ed;
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, transform .2s;
}
.template-card:hover {
    border-color: var(--primary-color);
    transform: translateX(3px);
}
.template-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.template-card[aria-selected="true"] {
    border: 2px solid var(--primary-color);
    padding: 9px 11px;
    background: #f6f9fc;
}
.template-thumb {
    width: 58px;
    height: 82px;
    overflow: hidden;
    border: 1px solid #e6e9ed;
    border-radius: 8px;
    background: #fff;
}
.template-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.template-info {
    padding: 0;
    text-align: left;
    border-top: none;
    min-width: 0;
}
.template-info h3 {
    margin: 0 0 2px 0;
    font-size: 15px;
    color: #2d3436;
}
.template-info p {
    margin: 0;
    font-size: 12px;
    color: #636e72;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tpl-use-mini {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.tpl-use-mini:hover {
    background: var(--primary-color);
    color: #fff;
}
.template-stage {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    position: sticky;
    top: 20px;
}
.template-preview {
    width: 100%;
    max-width: 560px;
    min-width: 480px;
    background: #eee;
    border: 1px solid #e6e9ed;
    border-radius: 10px;
    overflow: hidden;
}
.template-preview img {
    width: 100%;
    height: auto;
    display: block;
}
.template-stage-side {
    width: 300px;
    flex-shrink: 0;
}
.template-stage-side h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    color: #2d3436;
}
#tpl-stage-desc {
    margin: 0 0 18px 0;
    font-size: 14px;
    color: #636e72;
    line-height: 1.5;
}
.tpl-use-btn {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s;
}
.tpl-use-btn:hover {
    filter: brightness(1.12);
}
.tpl-hint {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #7f8c8d;
    line-height: 1.45;
}

/* v66: mobil atolye gezinmesi — onizleme uzerinde yuzen ok butonlari, isim
   rozeti ve "2 / 9" sayaci (kullanici istegi: mobilde asagi kaydirmaya gerek
   kalmadan sablon degistirme). Yalnizca <=1024px'te gorunur; masaustunde v65
   atolyesi aynen kalir. 44px dokunma hedefi; swipe icin touch-action: pan-y
   (dikey sayfa kaydirmasi tarayicida kalir, yatay hareket bize gelir). */
.tpl-stage-badge,
.tpl-stage-count,
.tpl-nav-btn {
    display: none;
    position: absolute;
    z-index: 3;
}
.tpl-stage-count,
.tpl-nav-btn {
    align-items: center;
    justify-content: center;
}
.tpl-stage-badge {
    top: 10px;
    left: 10px;
    max-width: 60%;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(20, 28, 38, .78);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpl-stage-count {
    top: 12px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #e6e9ed;
    color: #2d3436;
    font-size: 12.5px;
    font-weight: 700;
}
.tpl-nav-btn {
    top: 50%;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    transform: translateY(-50%);
    border: 1px solid #e6e9ed;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #2d3436;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.tpl-nav-prev { left: 8px; }
.tpl-nav-next { right: 8px; }
.tpl-nav-btn:active { transform: translateY(-50%) scale(.92); }
.tpl-nav-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.template-preview {
    position: relative;
    touch-action: pan-y;
}
body.dark-mode .tpl-nav-btn {
    background: rgba(30, 40, 52, .94);
    border-color: #2a3440;
    color: #dfe6e9;
}
body.dark-mode .tpl-stage-count {
    background: rgba(30, 40, 52, .94);
    border-color: #2a3440;
    color: #dfe6e9;
}

@media screen and (max-width: 1024px) {
    .tpl-stage-badge,
    .tpl-stage-count,
    .tpl-nav-btn {
        display: flex;
    }
}
@media screen and (min-width: 1025px) {
    .tpl-stage-badge,
    .tpl-stage-count,
    .tpl-nav-btn {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) {
    /* Sayfa acilisindaki dekoratif tarayici mockup'i v46'ta buyutulmustu. */
    .mockup-card {
        width: 400px;
    }
}

@media screen and (max-width: 1180px) {
    .template-stage {
        flex-direction: column;
    }
    .template-preview {
        min-width: 0;
        max-width: 480px;
    }
    .template-stage-side {
        width: 100%;
        max-width: 480px;
    }
}

@media screen and (max-width: 1024px) {
    .template-picker {
        flex-direction: column;
        gap: 18px;
    }
    .template-stage {
        order: -1;
        width: 100%;
        position: static;
    }
    .template-preview {
        max-width: 340px;
        margin: 0 auto;
    }
    .template-stage-side {
        max-width: 340px;
        margin: 0 auto;
    }
    .template-list {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 2px 2px 10px;
    }
    .template-item {
        width: 240px;
        flex-shrink: 0;
    }
    .template-card {
        width: auto;
    }
}


.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 15px rgba(0,0,0,0.05);
}

@media screen and (min-width: 1025px) {
    .sidebar { 
        position: fixed; 
        left: 0; 
        top: 0; 
        bottom: 0; 
        width: var(--sidebar-width); 
    }
}

@media screen and (max-width: 1024px) {
    .sidebar { display: none !important; }
}

.brand-container {
    padding: 30px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.brand-logo {
    min-width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3498db, #8e44ad);
    color: white;
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 4px;
}
.brand-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: white;
}
#sync-status { 
    font-size: 12px; 
    padding: 12px 24px; 
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: #a4b0be;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #57606f; }
.status-online { background: var(--success-color); box-shadow: 0 0 8px rgba(46, 204, 113, 0.4); }
.status-syncing { background: var(--warning-color); animation: pulse 1s infinite; }

.nav-menu {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 0;
}
.nav-group {
    margin-bottom: 24px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
}
.nav-label {
    font-size: 10px;
    font-weight: 700;
    color: #747d8c;
    margin-bottom: 8px;
    padding-left: 12px;
    letter-spacing: 1px;
}
.nav-item {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--sidebar-text);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}
.nav-item .icon {
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}
.nav-item:hover {
    background: var(--sidebar-hover);
    color: white;
    transform: translateX(2px);
}
.nav-item.danger { color: #ff7675; }
.nav-item.danger:hover { background: rgba(231, 76, 60, 0.1); }
.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.nav-item.logout { color: #747d8c; }
.nav-item.logout:hover { color: white; background: rgba(255,255,255,0.05); }

.badge-new {
    background: var(--danger-color);
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.mobile-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: #f1f2f6;
    color: #747d8c;
    border-radius: 12px;
    cursor: pointer;
    font-size: 18px;
    margin-right: 5px;
}

.mobile-back-btn:active {
    background: #e1e2e6;
    transform: scale(0.95);
}

.mobile-editor-tabs {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    z-index: 2000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 10px;
    box-sizing: border-box;
    gap: 10px;
    align-items: center;
}

.lang-switcher-mobile-tabs {
    display: flex;
    gap: 4px;
    background: #f1f2f6;
    padding: 4px;
    border-radius: 12px;
}
.lang-switcher-mobile-tabs .lang-btn-mini {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 8px;
}
.lang-switcher-mobile-tabs .lang-btn-mini.active {
    background: white;
    color: #1c6fa0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.mobile-tab-btn {
    flex: 1;
    border: none;
    background: #f1f2f6;
    color: #747d8c;
    font-weight: 700;
    font-size: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
}

.mobile-tab-btn.active {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #eee;
}

.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    /* v45: iOS cizrili cihazlarda home indicator alt barin uzerine binmesin */
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    z-index: 2000;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    gap: 8px;
    border-top: 1px solid #eee;
}

.mobile-action-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 6px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: 0.2s;
}

/* Dar ekranlarda yazilari biraz daha kucult */
@media screen and (max-width: 430px) {
    .mobile-action-btn { font-size: 12px; padding: 12px 4px; }
}

.mobile-action-btn.primary {
    background: #0082e6;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 130, 230, 0.3);
}

.mobile-action-btn.secondary {
    background: white;
    color: #2d3436;
    border: 1px solid #dfe6e9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mobile-action-btn:active {
    transform: scale(0.96);
}

.date-end-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.present-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #0984e3;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.present-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

@media screen and (max-width: 1024px) {
    .mobile-editor-tabs { display: flex; }
    
    .mobile-bottom-bar { display: none !important; }
    #editor-view.active .mobile-bottom-bar { display: flex !important; }
    
    .editor-layout {
        flex-direction: column;
        padding-left: 0;
        padding-top: 60px;
        padding-bottom: 80px;
        height: auto;
        min-height: calc(100vh - 140px);
    }

    #editor-view.show-preview .editor-panel-form { display: none !important; }
    #editor-view.show-edit .editor-panel-preview { display: none !important; }
    
    .editor-panel-form, .editor-panel-preview { width: 100%; }
}

.editor-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    padding-left: var(--sidebar-width);
    box-sizing: border-box;
}

.mobile-view-toggle { display: none; }


@media screen and (max-width: 1024px) {
    .editor-layout {
        flex-direction: column;
        padding-left: 0;
        padding-bottom: 0; 
        height: auto;
        overflow-y: visible;
    }
    
    .editor-panel-form { display: block; width: 100%; }
    .editor-panel-preview { display: block; width: 100%; }
}

.flatpickr-calendar {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border: none !important;
}
.flatpickr-monthSelect-month {
    border-radius: 8px !important;
}
.flatpickr-monthSelect-month.selected {
    background: var(--primary-color) !important;
}

.editor-panel-form {
    width: 40%;
    min-width: 350px;
    background: #fff;
    border-right: 1px solid #eee;
    overflow-y: auto;
    padding: 30px;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    .editor-panel-form {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px; 
    }
}

.form-header-mini { 
    margin-bottom: 20px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form-header-mini h2 { font-size: 20px; margin: 0; color: #2d3436; }

.btn-import-cv {
    background: #f0f7ff;
    color: #0984e3;
    border: 1px solid #d1e9ff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-import-cv:hover {
    background: #e1f0ff;
    border-color: #74b9ff;
    transform: translateY(-1px);
}

.btn-import-cv:active {
    transform: translateY(0);
}

/* v44: bu mobil gecersiz kildi — ayni ozgunlukteki temel .editor-panel-preview
   kurali (asagida, dosyada daha SONRA geldigi icin) cascade'de kazaniyordu.
   Gecerli mobil kurallar temel kuralin ardina tasinmistir. */
@media screen and (max-width: 1024px) {
    .form-header-mini {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .btn-import-cv {
        width: 100%;
        justify-content: center;
    }
}


.form-block {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f1f2f6;
}
.form-block:last-child { border-bottom: none; }

/* v38: Bolum siralama (drag & drop tutamaci + yukari/asagi butonlari).
   Tutamac suruklenir; butonlar dokunmatik ve klavye icin alternatif yol. */
.section-drag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px 0;
}
.section-drag-row h3 { margin: 0; flex: 1; min-width: 0; }
.drag-handle {
    background: none;
    border: none;
    color: #b2bec3;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -2px;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: grab;
    touch-action: none;
    flex: 0 0 auto;
}
.drag-handle:hover, .drag-handle:focus-visible {
    color: var(--primary-color);
    background: #f1f2f6;
    outline: none;
}
.drag-handle:active { cursor: grabbing; }
.section-move-group { display: flex; gap: 4px; flex: 0 0 auto; }
.section-move-btn {
    background: #fff;
    border: 1px solid var(--border-strong);
    color: #636e72;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.section-move-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.section-move-btn:disabled { opacity: 0.3; cursor: not-allowed; }
/* Suruklenen blok ve uzerine gelinen hedef blok gorsel geri bildirimi */
.form-block.dragging { opacity: 0.45; }
.form-block.drag-over { box-shadow: inset 0 2px 0 var(--primary-color); }
/* Sertifika/Referans baslik satirinda tutamac + butonlar input'u sikmasin */
.section-title-edit .section-header-input { flex: 1; width: auto; min-width: 0; }
.section-title-edit .drag-handle, .section-title-edit .section-move-group { flex: 0 0 auto; }
.form-block h3, .section-title-edit {
    font-size: 14px;
    color: var(--primary-color);
    margin: 0 0 15px 0;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header-input {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    padding: 0;
    margin: 0;
    cursor: text;
    width: 100%;
    text-transform: uppercase;
    font-family: inherit;
}

.section-header-input:focus {
    outline: none;
    border-bottom: 1px solid var(--primary-color);
}
/* v61: klavye ile girilen odakta belirgin halka (fare tıklamasında değil) */
.section-header-input:focus-visible {
    outline: 3px solid rgba(52, 152, 219, 0.55);
    outline-offset: 2px;
}

/* v53: bolum gizle/goster butonu (tum 8 bolum basliginda) */
.section-toggle-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 5px;
    border-radius: 6px;
    transition: color .15s ease, transform .15s ease;
}

.section-toggle-btn:hover {
    color: #2563eb;
    transform: scale(1.15);
}

/* v53: gizli bolum - baslik satiri yerinde kalir (geri getirme icin),
   yalnizca icerik kapanir ve baslik soluklasir. */
.form-block.section-hidden > .section-drag-row,
.form-block.section-hidden > .section-title-edit {
    opacity: 0.55;
}

.form-block.section-hidden > :not(.section-drag-row):not(.section-title-edit) {
    display: none;
}


.label-with-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.label-with-info label {
    margin: 0 !important;
}
.info-tooltip-container {
    position: relative;
    display: flex;
    align-items: center;
}
.info-icon {
    width: 16px;
    height: 16px;
    background: #dfe6e9;
    color: #636e72;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    transition: 0.2s;
}
.info-icon:hover {
    background: var(--primary-color);
    color: white;
}
.tooltip-box {
    visibility: hidden;
    width: 200px;
    background-color: rgba(45, 52, 54, 0.95);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1001;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tooltip-box::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(45, 52, 54, 0.95) transparent transparent transparent;
}
.info-tooltip-container:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
}

.label-with-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.label-with-info label {
    margin: 0 !important;
}
.info-tooltip-container {
    position: relative;
    display: flex;
    align-items: center;
}
.info-icon {
    width: 16px;
    height: 16px;
    background: #dfe6e9;
    color: #636e72;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    transition: 0.2s;
}
.info-icon:hover {
    background: var(--primary-color);
    color: white;
}
.tooltip-box {
    visibility: hidden;
    width: 200px;
    background-color: rgba(45, 52, 54, 0.95);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1001;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tooltip-box::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(45, 52, 54, 0.95) transparent transparent transparent;
}
.info-tooltip-container:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
}

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

.date-picker-month {
    min-width: 0 !important;
    width: 100% !important;
    flex-shrink: 1 !important;
}

.date-end-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 768px) {
    .input-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .date-picker-month {
        max-width: 100% !important;
    }
    
    .flatpickr-calendar {
        max-width: 90vw !important;
    }
}
.input-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.input-group.full-width { grid-column: 1 / -1; }
.input-group label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.form-input {
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 16px;
    background: var(--surface);
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.form-input:hover:not(:focus) {
    border-color: #b2bec3;
}

@media screen and (min-width: 1025px) {
    .form-input {
        padding: 10px;
        font-size: 13px;
    }
}
.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--surface);
    box-shadow: var(--focus-ring);
}
.form-input::placeholder { color: var(--text-muted); }
textarea.form-input { resize: vertical; }

.dynamic-item {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dynamic-item:hover {
    border-color: #c8d3dc;
    box-shadow: var(--shadow-sm);
}
.dynamic-item:focus-within {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}
.dynamic-item-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    align-items: center;
}
.move-dynamic-btn {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.move-dynamic-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.move-dynamic-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.remove-dynamic-btn {
    background: none;
    border: none;
    color: #ff7675;
    cursor: pointer;
    font-size: 18px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.dynamic-item > .remove-dynamic-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    width: auto;
    height: auto;
}
.btn-secondary-dashed {
    width: 100%;
    padding: 10px;
    border: 1px dashed #bdc3c7;
    background: var(--surface);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-secondary-dashed:hover {
    border-color: var(--primary-color);
    background: var(--tint-primary);
    color: var(--primary-color);
}

.chip-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
}

.chip-list:empty {
    display: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 8px 6px 12px;
    background: var(--surface-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.2;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.chip:hover {
    border-color: #c8d3dc;
    background: #e9edf1;
}

.chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-remove {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.chip-remove:hover {
    background: rgba(231, 76, 60, 0.12);
    color: var(--danger-color);
}

.chip-input {
    margin: 0;
}

.chip-lang-row {
    display: grid;
    grid-template-columns: 1fr minmax(120px, 160px) auto;
    gap: 8px;
    align-items: center;
}

.chip-level-select {
    margin: 0;
    min-width: 0;
}

.btn-chip-add {
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-chip-add:hover {
    border-color: var(--primary-color);
    background: var(--tint-primary);
    color: var(--primary-color);
}

@media (max-width: 640px) {
    .chip-lang-row {
        grid-template-columns: 1fr;
    }
    .btn-chip-add {
        width: 100%;
    }
}

.mobile-zoom-btn {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 10;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    cursor: pointer;
}

@media screen and (max-width: 1024px) {
    .mobile-zoom-btn { display: flex; }
    
    .editor-panel-preview {
        background: #f8f9fd;
        position: relative;
        padding-top: 20px !important;
    }
}

.modal-overlay {
    display: none !important;
    position: fixed;
    top: 0; left: 0;
    right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: rgba(15, 23, 32, 0.55);
    z-index: 5000;
}
.modal-overlay.active { 
    display: flex !important; 
    align-items: center; 
    justify-content: center; 
}
.modal-overlay.active { padding: 20px; }
@media screen and (max-width: 1024px) {
    .modal-overlay.active {
        align-items: flex-end;
    }
}

.modal-overlay .modal-content {
    background: white;
    width: 320px; 
    position: relative;
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.05);
    overflow-y: auto;
    max-height: 85dvh;
    animation: fadeInScale 0.2s ease-out;
}

@media screen and (max-width: 1024px) {
    .modal-overlay.active { padding: 0; }
    .modal-overlay .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0;
        transform: none !important;
        animation: slideUp 0.3s ease-out;
        max-height: 85dvh;
        overflow-y: auto;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
        background: rgba(255, 255, 255, 0.98);
    }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes fadeInScale { 
    from { opacity: 0; transform: scale(0.95); } 
    to { opacity: 1; transform: scale(1); } 
}

.modal-header {
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    user-select: none;
}
.modal-overlay.active { animation: overlayFade 0.2s ease-out; }
@keyframes overlayFade { from { background: rgba(15, 23, 32, 0); } to { background: rgba(15, 23, 32, 0.55); } }
@media screen and (max-width: 1024px) {
    .modal-header { 
        background: rgba(248, 249, 250, 0.95);
    }
}

.modal-header h3 { margin: 0; font-size: 16px; color: #2d3436; font-weight: 700; letter-spacing: -0.01em; }
/* v56: modal kapat butonu. Onceden cercevesiz/duz gri bir "x" karakteriydi
   ve kullanici geri bildirimine gore "Windows 7 vibe'i" veriyordu. Artik
   yuvarlak, yumusak zeminli bir ikon butonu; X sekli platformdan bagimsiz
   olsun diye CSS ile (::before/::after) cizilir, metin gizlenir. Hover'da
   kirmizi ton + 90° donus, klavye odaginda gorunur halka. */
.close-modal {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0;              /* "x" karakteri gizlenir; sekil asagida cizilir */
    line-height: 0;
    color: #7c8a97;
    background: #eef1f4;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.close-modal::before,
.close-modal::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.18s ease;
}
.close-modal::before { transform: rotate(45deg); }
.close-modal::after { transform: rotate(-45deg); }
.close-modal:hover { color: #fff; background: var(--danger-color); transform: rotate(90deg); }
.close-modal:active { transform: rotate(90deg) scale(0.94); }
.close-modal:focus-visible { outline: 3px solid rgba(52, 152, 219, 0.45); outline-offset: 2px; }
body.dark-mode .close-modal { background: #2b3540; color: #9aa7b4; }
body.dark-mode .close-modal:hover { color: #fff; background: var(--danger-color); }
@media screen and (max-width: 1024px) {
    /* Dokunmatik hedef biraz buyutulur (36px -> 40px) */
    .close-modal { width: 40px; height: 40px; }
}
.modal-body { padding: 15px; }
.modal-body hr {
    border: 0;
    border-top: 1px solid #f1f2f6;
    margin: 20px 0;
}

/* v55: "Gorunum ve Duzen" modali iki sekmeye bolundu (Stil / Duzen).
   Sorun: 320px'lik modalda hazir stil paketleri + kaydiricilar alt alta
   sigmiyor, yatay kaydirma cikiyor ve paket adlari "Bo"/"Mo" diye
   kirpiliyordu (kullanici ekran goruntusu). Cozum: sekme seridi (icerik
   kisalir) + masaustunde 560px modal + kirpilmayan preset izgarasi. */
.modal-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 15px 0;
}
.modal-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e4e8eb;
    border-radius: 999px;
    background: #f4f6f8;
    color: #636e72;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.modal-tab:hover { border-color: #cfd6db; }
.modal-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.modal-pane { display: none; }
.modal-pane.active { display: block; animation: paneFade 0.18s ease-out; }
@keyframes paneFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
@media screen and (min-width: 1025px) {
    /* v55: sekme seridi + preset adlari ancak genis modalda rahat sigiyor */
    #layout-modal .modal-content { width: 560px; max-width: 100%; }
}

.modal-section-title {
    font-size: 11px;
    text-transform: uppercase;
    color: #95a5a6;
    margin-bottom: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.setting-group { margin-bottom: 20px; }
/* Sekme icinde son grup alt bosluk birakmasin (modal bodynin kendi padding'i var) */
.modal-pane .setting-group:last-child { margin-bottom: 0; }

.setting-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 13px; color: #555; }
.color-options { display: flex; gap: 8px; flex-wrap: wrap; }
.color-btn {
    position: relative;
    width: 44px; height: 44px; border-radius: 50%; border: 3px solid white;
    box-shadow: 0 0 0 1px #ddd; cursor: pointer; transition: 0.2s;
}
.color-btn:active { transform: scale(0.9); }

/* v55: secili vurgu rengi ve yazi tipi isaretlenir; kullanici modali acar
   acmaz hangi stilin aktif oldugunu gorur (aria-pressed ile birlikte). */
.color-btn.selected {
    box-shadow: 0 0 0 1px #ddd, 0 0 0 3px var(--primary-color);
    transform: scale(1.06);
}
.color-btn.selected::after {
    content: '✓';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; font-weight: 900;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media screen and (min-width: 1025px) {
    .color-btn { width: 32px; height: 32px; }
    .color-btn.selected::after { font-size: 12px; }
}
.font-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.font-btn {
    padding: 12px; border: 1px solid #eee; border-radius: 10px;
    background: white; cursor: pointer; text-align: center;
    transition: 0.2s;
    font-size: 15px;
    color: #2d3436;
}
.font-btn:active { background: #f0faff; border-color: var(--primary-color); }
.font-btn.selected {
    border-color: var(--primary-color);
    background: #f0faff;
    box-shadow: inset 0 0 0 1px var(--primary-color);
    font-weight: 700;
}

@media screen and (min-width: 1025px) {
    .font-btn { padding: 10px; font-size: 13px; }
}

/* v54: hazir stil paketleri (renk + font eslesmeleri) */
/* v55: sabit 4 sutun 320px'lik modalda paket adlarini kirpiyordu; sutun
   sayisi icerige gore otomatik, kutu genisligi 150px'in altina inmez. */
.style-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.style-preset-btn {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 8px 10px; border: 2px solid #eee; border-radius: 10px;
    background: white; cursor: pointer; transition: 0.2s;
    color: #2d3436; font-size: 13px; text-align: left;
}
.style-preset-btn:hover { border-color: var(--primary-color); }
.style-preset-btn:active { transform: scale(0.97); }
.style-preset-btn.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
    background: #f0faff;
}
.preset-chip {
    flex: 0 0 auto;
    width: 20px; height: 20px; border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
}
.preset-sample {
    flex: 0 0 auto;
    font-size: 16px; font-weight: 700; line-height: 1;
}
.preset-name {
    flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* v55: v54'un 4 sutunlu masaustu kurali kaldirildi (adlar kirpiliyordu);
   preset izgarasi artik her genislikte auto-fill + minmax(150px, 1fr). */
body.dark-mode .style-preset-btn {
    background: #2d3436; border-color: #444; color: #dfe6e9;
}
body.dark-mode .style-preset-btn.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
    background: #3a4750;
}
/* v55: sekme seridi ve secili renk/font isaretleri koyu modda da okunur */
body.dark-mode .modal-tab {
    background: #232c36; border-color: #34424f; color: #b2bec3;
}
body.dark-mode .modal-tab.active {
    background: var(--primary-color); border-color: var(--primary-color); color: #fff;
}
body.dark-mode .font-btn { background: #2d3436; border-color: #444; color: #dfe6e9; }
body.dark-mode .font-btn.selected { background: #3a4750; border-color: var(--primary-color); }
body.dark-mode .color-btn.selected { box-shadow: 0 0 0 1px #34424f, 0 0 0 3px var(--primary-color); }
body.dark-mode .color-btn.selected::after { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }

.modal-footer { padding: 15px; border-top: 1px solid #eee; background: #fff; }

/* v56: modal footer butonlari. Tespit: `.btn` ve `.btn-primary` siniflari
   projede CSS'te hic tanimli degildi; "Temizle" / "Kaydet & Kapat" butonlari
   (ve diger modallarin btn btn-primary butonlari) tarayicinin native
   gorunumuyle ciziliyordu — kullanici bunu "Windows 7 vibe'i" olarak bildirdi.
   Artik proje diliyle uyumlu gercek stiller: accent gradyan, radius-md,
   hover kalkmasi, klavye odak halkasi ve mesgul (disabled) durumu. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.18s ease, box-shadow 0.18s ease,
                transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:focus-visible { outline: 3px solid rgba(52, 152, 219, 0.45); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.6; box-shadow: none; transform: none; }
.btn-primary {
    color: #fff;
    background-image: linear-gradient(180deg, var(--primary-color), var(--primary-dark));
    background-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(41, 128, 185, 0.30);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(41, 128, 185, 0.38);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.28);
}
body.dark-mode .btn-primary {
    background-image: linear-gradient(180deg, #3aa0e0, var(--primary-dark));
}
body.dark-mode .btn { border-color: #3a4750; }

/* v56: masaustunde footer butonlari saga hizalanir (mobil 48%/48% kurali
   asagidaki media query'de korunur). */
@media screen and (min-width: 1025px) {
    .modal-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
    }
    .modal-footer .btn-primary { min-width: 150px; }
}

/* v56: indirme surerken PDF butonlari mesgul isaretlenir (ekran zaten
   kaplidir; bu ek katman cift tiklamayi gorsel olarak da belli eder). */
[data-pdf-download][aria-busy="true"] { opacity: 0.55; cursor: progress; }

/* Mobile-only clear button in layout modal */
.modal-footer .btn-clear-mobile {
    display: none;
}

@media screen and (max-width: 1024px) {
    .modal-footer { background: rgba(255, 255, 255, 0.8); }
    
    .modal-footer .btn-clear-mobile {
        display: inline-block;
        width: 48%;
        background: #fff;
        color: #c0392b;
        border: 2px solid #c0392b;
    }
    
    .modal-footer .btn-clear-mobile:active {
        background: #fff5f5;
    }
    
    .modal-footer .btn-primary {
        width: 48% !important;
    }
    
    .modal-footer {
        display: flex;
        gap: 10px;
    }
}

/* ===== ATS Score & Analysis modal ===== */
#ats-modal .modal-content { width: 380px; }

.ats-score-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}
.ats-ring {
    --score: 0;
    --ats-color: #0082e6;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(var(--ats-color) calc(var(--score) * 1%), #eef1f4 0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ats-ring-inner {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ats-score-num { font-size: 30px; font-weight: 800; color: #2d3436; line-height: 1; }
.ats-score-max { font-size: 11px; color: #95a5a6; margin-top: 4px; }
.ats-summary { flex: 1; min-width: 0; }
.ats-grade { font-size: 16px; font-weight: 800; color: #2d3436; }
.ats-short { margin: 6px 0 0; font-size: 13px; color: #636e72; line-height: 1.5; }
.ats-ring.excellent { --ats-color: #27ae60; }
.ats-ring.good { --ats-color: #2ecc71; }
.ats-ring.fair { --ats-color: #f39c12; }
.ats-ring.weak { --ats-color: #e74c3c; }

.ats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ats-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8f9fa;
}
.ats-item-icon { font-size: 15px; line-height: 1.4; }
.ats-item-body { flex: 1; min-width: 0; }
.ats-item-label {
    font-size: 13px;
    font-weight: 700;
    color: #2d3436;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.ats-item-pts { font-size: 11px; color: #27ae60; font-weight: 800; flex-shrink: 0; }
.ats-item.fail .ats-item-pts { color: #b2bec3; }
.ats-item.partial .ats-item-pts { color: #f39c12; }
.ats-tip { margin-top: 4px; font-size: 12px; color: #c0392b; line-height: 1.45; }

/* v40 (ATS Score v2): kategori basliklari + alt skor cubukleri */
.ats-cat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px 8px;
    border-radius: 10px;
    background: #eef2f5;
    margin-top: 4px;
}
.ats-cat:first-child { margin-top: 0; }
.ats-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.ats-cat-title {
    font-size: 11px;
    font-weight: 800;
    color: #636e72;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ats-cat-score { font-size: 11px; font-weight: 800; color: #2d3436; flex-shrink: 0; }
.ats-cat-bar {
    height: 5px;
    border-radius: 3px;
    background: #dfe6e9;
    overflow: hidden;
}
.ats-cat-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    transition: width 0.4s ease;
}
body.dark-mode .ats-cat { background: #232a31; }
body.dark-mode .ats-cat-title { color: #95a5a6; }
body.dark-mode .ats-cat-score { color: #dfe6e9; }
body.dark-mode .ats-cat-bar { background: #2f3a42; }

@media screen and (max-width: 1024px) {
    /* Mobile sheet (.modal-content) already scrolls; let the checklist flow naturally */
    .ats-list { max-height: none; overflow-y: visible; }
    .ats-score-wrap { gap: 14px; }
    .ats-ring { width: 104px; height: 104px; }
    .ats-ring-inner { width: 82px; height: 82px; }
    .ats-score-num { font-size: 26px; }
    .ats-item { padding: 12px; }
    .ats-item-label { font-size: 14px; flex-wrap: wrap; }
    .ats-tip { font-size: 13px; }
}

.range-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.range-header span {
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 700;
}
input[type=range] {
    width: 100%;
    margin: 5px 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}


.editor-panel-preview { 
    flex: 1;
    background: #f1f2f6;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    /* v59: align-items: stretch (varsayilan) masaustunde #cv-scale-container'i
       panel yuksekligine (~780px) geriyordu; #cv-root (A4 yuksekligi) bu
       kutudan tasiyor ama kutu 780px kaliyordu -> absolute konumlu
       #page-break-layer da 780px'e kirpiliyor ve 2. sayfa sinir cizgisi
       masaustunde gorunmuyordu (mobilde resizePreview kapsayiciya acik
       height yazdigi icin sorun yoktu). flex-start kutu yuksekligini
       icerige (A4) birakir. */
    align-items: flex-start;
    padding: 60px 40px;
    scroll-behavior: smooth;
}

/* v44: mobil onizleme kurallari — TEMEL kuralin ARDINDA olmali.
   Onceden dosyanin daha basinda ayni ozgunlukte tanimliydilar; cascade'de
   temel kural (padding: 60px 40px) kazaniyordu. Sonuc: olcekli A4 (360px)
   310px ic alana sigmiyor, panel 25px yatay tasa uretiyor; iOS'ta momentum
   kaydirma overflow-x:hidden panele birkac kez girebiliyor ve icerik sola
   kayip TAKILI kalıyordu. Cozum: kurallari temel kuraldan sonra tanimla
   (padding 0) + overscroll kisitlamasi. */
@media screen and (max-width: 1024px) {
    .editor-panel-preview {
        padding: 40px 0;
        min-height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background: #f8f9fd;
        position: relative;
        overflow-y: visible;
        overflow-x: hidden;
        overscroll-behavior-x: contain;
    }
}

#cv-scale-container {
    width: 210mm;
    min-height: auto;
    transform-origin: top center;
    transition: transform 0.2s;
    margin: 0; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    overflow: visible;
}

@media screen and (min-width: 1025px) {
    #cv-scale-container {
        margin: 0 auto;
        transform-origin: top center;
    }
}
@media screen and (max-width: 1024px) {
    #cv-scale-container {
        display: block;
        /* v45: kisaltilmis "margin" kisa yolu !important ile KULLANILMAZ —
           o zaman resizePreview() in inline marginBottom (alt bar icin bosluk)
           degeri eziliyor, CV'nin son ~65px'i sabit alt navigation barinin
           altinda kaliyordu. Sadece yatay ortalama !important, dikey margin
           inline style'a birakilir. */
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible;
    }
}

/* ============================================================================
   v57: SAYFA SAYACI + KESIKLI SAYFA SINIRI
   Onizleme A4'u tek parca gosterir; 2. sayfaya gecen icerik yazdirma oncesi
   gorunmez. Bu blok (1) kesikli sayfa siniri katmanini, (2) Duzen sekmesindeki
   "Sayfa Sayisi" kartini stiller. Cizgi konumlari script.js'te print
   geometrisiyle hesaplanir (A4 1122.5px - print padding - @page 1cm).
   ============================================================================ */
#cv-scale-container { position: relative; }

/* v59: katman artik KIRPMIYOR (overflow: visible). Kapsayici kutunun
   yuksekligi (mobil olcek hesabi, masaustu panelin esnemesi vb.) CV
   iceriginden kucuk kalirsa cizgi kirpilip gorunmez oluyordu; katman zaten
   left/right: 0 konumlandigi icin yatay tasma uretemez. */
.page-break-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    overflow: visible;
    /* Cizgi yalnizca gosterge: secim/kaydirma/tiklamayi etkilemez */
    pointer-events: none;
    user-select: none;
}

.page-break-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed #aab4be;
    transform: translateY(-1px);
}

/* v59: etiket A4'un SAG kenarina yasliydi; masaustunde onizleme paneli
   (708px) A4'ten (794px) dar oldugu icin sag kenar kirpiliyor ve "Sayfa 2"
   rozeti yalnizca yarim gorunuyordu. A4 panelde ortalandigi icin etiketi
   cizginin ORTASINA almak hem masaustunde hem mobilde tamamen gorunur. */
.page-break-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 9px;
    border-radius: 10px;
    background: #2d3436;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* --- Duzen sekmesi karti --- */
.page-count-card {
    padding: 12px 14px;
    border: 1px solid #e6e9f0;
    border-radius: var(--radius-md);
    background: #f8f9fd;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.page-count-card label { margin-bottom: 0; }
.page-count-badge {
    padding: 2px 10px;
    border-radius: 999px;
    background: #e8f6ee;
    color: #1e8449;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.page-count-hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #636e72;
}
/* v59: ".page-fit-btn" kurallari kaldirildi ("tek sayfaya sigdir" ozelligi
   tamamen kaldirildi - kart yalnizca bilgilendirir). */

/* Birden fazla sayfa: kart "dikkat" tonuna doner */
.page-count-card.is-over { background: #fff8ef; border-color: #f3d9b7; }
.page-count-card.is-over .page-count-badge { background: #fdf0dc; color: #b9770e; }

body.dark-mode .page-count-card { background: #232a31; border-color: #2f3a42; }
body.dark-mode .page-count-card label { color: #dfe6e9; }
body.dark-mode .page-count-hint { color: #95a5a6; }
body.dark-mode .page-count-badge { background: #1e3a2b; color: #7bdba0; }
body.dark-mode .page-count-card.is-over { background: #2b2620; border-color: #4a3d29; }
body.dark-mode .page-count-card.is-over .page-count-badge { background: #40341c; color: #f0b862; }

/* Gosterge yazdirma ciktisina ASLA sizmaz (PDF/tarayici baskisi temiz kalir) */
@media print {
    #page-break-layer {
        display: none !important;
    }
}

/* Screen preview: A4 dimensions in pixels for consistency */
.page { 
    width: 794px;
    padding: var(--cv-padding); 
    position: relative; 
    margin: 0;
    background: white;
    overflow: visible;
}

@media print {
    .page {
        overflow: hidden !important;
    }
}

.cv-content { 
    font-family: var(--font-cv); 
    color: #2d3436; 
    line-height: var(--cv-line-height);
    font-size: var(--cv-font-size);
    user-select: text !important;
    -webkit-user-select: text !important;
}

.cv-content p, 
.cv-content h1, 
.cv-content h2, 
.cv-content h3, 
.cv-content span, 
.cv-content div {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

body.tpl-classic #cv-root {
    padding: var(--cv-padding);
}

#cv-root header { 
    text-align: center; 
    padding-top: 5mm !important;
    margin-bottom: calc(var(--cv-section-gap) * 1.5); 
    padding-bottom: var(--cv-section-gap);
    border-bottom: 1px solid #ddd;
}

.cv-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 4px solid var(--cv-accent-color);
}

.cv-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

h1 { 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    font-size: 2.2em; 
    font-weight: 700; 
    margin: 0; 
    color: var(--cv-accent-color);
}
.subtitle {
    font-size: 1.1em;
}

.contact-info { margin-top: 10px; font-size: 0.9em; }
.address-line, .contact-row, .compact-separator, .personal-details { display: none; }

.section {
    position: relative; 
    border: 1px solid transparent;
    padding: 4px;
    margin-bottom: var(--cv-section-gap);
}
.section-header { 
    margin-bottom: calc(var(--cv-section-gap) / 1.5); 
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}
.section-title { 
    font-size: 1.05em; 
    text-transform: uppercase; 
    font-weight: 700; 
    font-family: var(--font-cv);
    color: var(--cv-accent-color);
    letter-spacing: 1.5px;
}
.entry { display: flex; margin-bottom: 18px; }
.left-col { width: 170px; flex-shrink: 0; font-size: 0.9em; font-weight: 600; color: #636e72; padding-right: 15px; }
.right-col { width: 100%; word-break: break-word; }
.entry h3 { margin: 0 0 6px 0; font-size: 1.05em; font-weight: 700; line-height: 1.3; }
.entry p { margin: 0; font-size: 0.95em; color: #444; line-height: 1.6; }

body.tpl-compact .contact-info { display: none; }
body.tpl-compact .address-line,
body.tpl-compact .contact-row,
body.tpl-compact .compact-separator,
body.tpl-compact .personal-details { display: block; }
body.tpl-compact .contact-row,
body.tpl-compact .personal-details { display: flex; }
body.tpl-compact .page { 
    padding: 10mm var(--cv-padding) var(--cv-padding) var(--cv-padding);
}
body.tpl-compact #cv-root header { border-bottom: none; margin-bottom: var(--cv-section-gap); padding-bottom: 0; padding-top: 0 !important; text-align: center; }
body.tpl-compact h1 { font-size: 2.0em; letter-spacing: 2px; margin-bottom: 8px; }
body.tpl-compact .subtitle { font-size: 1.0em; font-weight: 700; color: #222; margin-bottom: 8px; }
body.tpl-compact .address-line { font-size: 1em; color: #222; margin-bottom: 20px; }
body.tpl-compact .contact-row { justify-content: space-between; font-weight: 700; font-size: 1em; color: var(--cv-accent-color); margin-bottom: 5px; }
body.tpl-compact .compact-separator { height: 4px; margin-bottom: 15px; }
body.tpl-compact .personal-details { flex-wrap: wrap; gap: 5px; margin-bottom: 25px; justify-content: space-between; }
body.tpl-compact .detail-item { display: flex; align-items: baseline; width: 45%; font-size: 1em; font-style: italic; color: #222; }
body.tpl-compact .detail-item .lbl { flex-shrink: 0; color: #555; font-style: normal; }
body.tpl-compact .detail-item .val { flex-shrink: 0; font-weight: 700; font-style: italic; }
body.tpl-compact .detail-item .dots { flex-grow: 1; margin: 0 5px; position: relative; top: -4px; }
body.tpl-compact .section-header { 
    border-bottom: none; display: flex; align-items: center; justify-content: center; 
    margin: 4px 0 10px 0; text-align: center; background: #f4f4f4; 
    border-top: none; padding: 6px 0;
}
body.tpl-compact .section-title { font-size: 1.0em; font-weight: 700; letter-spacing: 2px; color: var(--cv-accent-color); }
body.tpl-compact .entry { display: block; position: relative; margin-bottom: 15px; }
body.tpl-compact .entry .left-col { position: absolute; top: 0; right: 0; width: auto; text-align: right; font-weight: 600; font-size: 0.9em; color: var(--cv-accent-color); }
body.tpl-compact .entry .right-col { padding-right: 180px; }

.elegant-license {
    margin-top: 8px;
    font-size: 0.9em;
    color: #636e72;
    font-style: italic;
}
.elegant-license strong {
    color: var(--cv-accent-color);
    font-weight: 700;
}

body.tpl-elegant #cv-root {
    padding: var(--cv-padding);
    border-top: 20px solid var(--cv-accent-color);
}

/* v32: ENHANCV TARZI TAM GENISLIK RENKLI HEADER BLOGU.
   Header, negatif margin ile #cv-root padding'ini iptal edip sayfa
   kenarlarina kadar uzanir (full-bleed); isim/unvan/iletisim beyaz metinle
   renkli zemin uzerinde durur. Sunucu PDF'inde printBackground:true oldugu
   icin renk garantidir; tarayici baski fallback'inde 'Arka plan grafikleri'
   kapaliysa zemin beyaz kalir (.section-title etiketleriyle ayni risk
   profili; print-color-adjust: exact zaten global). color-mix desteklemeyen
   eski tarayicilarda duz accent renge duser.
   Gradyan DIKEY (180deg): ust kenar her x'te tam accent rengi kalir, boylece
   yukaridaki 20px'lik border seridiyle piksel duzeyinde kesintisiz birlesir.
   Diyagonal (135deg) denendi: ust kenar sagda koyulasip seritle arasinda
   gorunur bir renk basamagi olusturuyordu (olculdu: sag kenarda 26,82,118 ->
   19,62,89). */
body.tpl-elegant #cv-root header {
    background: var(--cv-accent-color);
    background: linear-gradient(180deg, var(--cv-accent-color) 0%, color-mix(in srgb, var(--cv-accent-color), #000 32%) 100%);
    color: #fff;
    margin: calc(-1 * var(--cv-padding)) calc(-1 * var(--cv-padding)) 35px;
    padding: 36px var(--cv-padding) 30px !important;
    border-bottom: 4px solid rgba(255, 255, 255, 0.35);
}
body.tpl-elegant #cv-root header h1 { color: #fff; }
body.tpl-elegant #cv-root header .subtitle { color: rgba(255, 255, 255, 0.92); font-weight: 600; letter-spacing: 1px; }
body.tpl-elegant #cv-root header .contact-info { color: rgba(255, 255, 255, 0.95); margin-top: 12px; }
body.tpl-elegant #cv-root header .elegant-license { color: rgba(255, 255, 255, 0.95); }
body.tpl-elegant #cv-root header .elegant-license strong { color: #fff; }
body.tpl-elegant #cv-root header .cv-photo { border-color: #fff; margin-bottom: 16px; }

/* v34: iletişim ikonları (cvIcon, script.js) — sunucu PDF Chrome'unun emoji
   fontu minimumdur; emoji yerine inline SVG kullanılır. Renk, bulunduğu
   şablona göre metin renginden miras alınır (Elegant/Two-tone header'da beyaz). */
.cv-ico {
    width: 12px;
    height: 12px;
    fill: currentColor;
    vertical-align: -0.15em;
    margin-right: 3px;
}

body.tpl-elegant .section-title {
    background: var(--cv-accent-color);
    color: white;
    padding: 5px 15px;
    display: inline-block;
}

body.tpl-elegant .section-header {
    border-bottom: 1px solid #ddd;
}

/* ============================================
   MODERN TEMPLATE STYLES
   ============================================ */

body.tpl-modern #cv-root {
    padding: var(--cv-padding);
    font-family: var(--font-cv);
    color: #333;
    font-size: var(--cv-font-size);
    line-height: var(--cv-line-height);
}

body.tpl-modern .modern-header {
    text-align: center;
    margin-bottom: calc(var(--cv-section-gap) * 1.5);
}

body.tpl-modern .modern-photo {
    margin-bottom: 15px;
}

body.tpl-modern .modern-photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eee;
}

body.tpl-modern h1 {
    font-size: 2.0em;
    font-weight: 700;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
}

body.tpl-modern .modern-subtitle {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--cv-accent-color);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

body.tpl-modern .modern-contact {
    font-size: 0.8em;
    color: #666;
    line-height: 1.6;
}

body.tpl-modern .modern-linkedin-row {
    margin-top: 5px;
}

body.tpl-modern .modern-linkedin {
    font-weight: 600;
    color: #333;
}

body.tpl-modern .modern-section {
    margin-bottom: var(--cv-section-gap);
}

body.tpl-modern .modern-section-header {
    border-bottom: 1px solid #333;
    padding-bottom: 3px;
    margin-bottom: calc(var(--cv-section-gap) / 1.5);
    text-align: left;
}

body.tpl-modern .modern-section-header span {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

body.tpl-modern .modern-entry {
    display: flex;
    margin-bottom: 10px;
}

body.tpl-modern .modern-entry-date {
    width: 28%;
    font-size: 0.75em;
    color: #555;
    font-weight: 600;
    padding-right: 20px;
    text-align: left;
}

body.tpl-modern .modern-entry-content {
    width: 72%;
}

body.tpl-modern .modern-entry-content.full-width {
    width: 100%;
}

body.tpl-modern .modern-job-title {
    font-size: 0.95em;
    font-weight: 700;
    color: #000;
    margin-bottom: 2px;
}

body.tpl-modern .modern-company {
    font-size: 0.85em;
    font-style: italic;
    color: #555;
    margin-bottom: 5px;
}

body.tpl-modern .modern-desc {
    font-size: 0.8em;
    line-height: var(--cv-line-height);
    color: #444;
}

body.tpl-modern .modern-desc ul {
    margin: 3px 0 0 18px;
    padding: 0;
}

body.tpl-modern .modern-desc li {
    margin-bottom: 3px;
}

body.tpl-modern .modern-summary-text {
    font-size: 0.85em;
    line-height: var(--cv-line-height);
    color: #444;
}

body.tpl-modern .modern-grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Responsive adjustments for editor preview */
@media screen and (max-width: 1024px) {
    body.tpl-modern #cv-root {
        padding: 30px 40px;
    }
    body.tpl-modern .modern-grid-two-col {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ============================================
   PRINT STYLES - A4 OUTPUT
   ============================================ 
   CRITICAL ARCHITECTURAL RULES:
   1. Print output is 100% CSS-driven, no JavaScript
   2. Exact A4 dimensions: 794px × 1123px (210mm × 297mm)
   3. All transforms and scales are reset
   4. Browser-agnostic, deterministic layout
   ============================================ */

@media print {
    /* Define A4 page margins */
    @page {
        size: A4;
        margin: 1cm 0 0 0;  /* İkinci ve sonraki sayfalar için üstten 1cm boşluk */
    }
    
    /* İlk sayfa - margin yok */
    @page :first {
        size: A4;
        margin: 0;
    }

    /* Hide all UI elements */
    body > *:not(#editor-view),
    #landing-view,
    #template-view,
    #auth-view,
    .sidebar,
    .editor-panel-form,
    .fab-container,
    .mobile-editor-tabs,
    .mobile-bottom-bar,
    .mobile-fab-container,
    .mobile-zoom-btn,
    .modal-overlay,
    .modal-content,
    #toast,
    button,
    input,
    textarea,
    select {
        display: none !important;
        visibility: hidden !important;
    }

    /* Reset body to A4 dimensions */
    html, body {
        width: 794px !important;        /* A4 width = 210mm */
        min-width: 794px !important;
        max-width: 794px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        -webkit-text-size-adjust: 100%;
    }

    /* Reset all container wrappers */
    #editor-view, 
    .view-section, 
    .editor-layout, 
    .editor-panel-preview {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: white !important;
        box-shadow: none !important;
        transform: none !important;
        scale: none !important;
    }

    /* CV Scale Container - remove all transforms */
    #cv-scale-container {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        width: 794px !important;         /* A4 width */
        min-width: 794px !important;
        max-width: 794px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        transform-origin: initial !important;
        background: white !important;
        overflow: visible !important;
        box-shadow: none !important;
        scale: none !important;
    }

    /* CV Root - the actual content container */
    #cv-root {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        width: 794px !important;
        min-width: 794px !important;
        max-width: 794px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
        transform: none !important;
        transform-origin: initial !important;
        scale: none !important;
        box-sizing: border-box !important;
    }

    /* Page wrapper - let content determine height naturally */
    .page {
        width: 794px !important;
        height: auto !important;
        background: white !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        break-after: auto !important;
    }
    
    /* Only force page break between actual multiple pages */
    .page:not(:last-child) {
        break-after: page !important;    /* iOS Safari safe: only non-last pages */
    }

    /* Template padding - Industry standard 15-20mm margins */
    #cv-root {
        padding: 60px 75px !important;
        box-sizing: border-box !important;
    }
    
    /* Elegant template border-top on all pages (v32: 20px; 1. sayfada
       renkli header blogu negatif margin ile border'a kesintisiz birlesir) */
    body.tpl-elegant #cv-root {
        padding: 40px 50px !important;
        border-top: 20px solid var(--cv-accent-color) !important;
    }
    body.tpl-elegant #cv-root header {
        margin: -40px -50px 30px !important;
        padding: 36px 50px 30px !important;
    }

    /* Preserve colors in print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Sayfa bolunmesi onleme (v27): bir bolum (Sertifikalar, Deneyim vb.)
       sayfa sonuna tasarsa TAMAMI sonraki sayfaya atilir - yarim kalan
       bolum goruntusu olusmaz. Bolum tek sayfadan buyukse tarayici yine
       boler; o durumda en azindan her .entry kendi icinde bolunmez. */
    .section,
    .modern-section {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .section-header,
    .modern-section-header {
        break-after: avoid !important;        /* Baslik tek basina sayfa sonunda kalmasin */
        page-break-after: avoid !important;
    }
    .entry,
    .modern-entry {
        break-inside: avoid !important;       /* Keep entries together */
        page-break-inside: avoid !important;
    }

    /* v60: Is Deneyimi bolumu yukaridaki v27 "bolunmez" kuralindan muaf
       tutuldu. Uzun bir bolum sayfa sonuna tasarsa TAMAMI sonraki sayfaya
       atiliyor ve 1. sayfada koca bir bosluk kaliyordu (uzun ozet + uzun
       deneyim listesinde 1. sayfada yalnizca ozet gorunuyordu). Deneyim
       bolumu artik sayfa sinirinda akar; her .entry yine butun kalir ve
       baslik da tek basina sayfa sonunda kalmaz. Sinif script.js'te yalnizca
       deneyim sarmalayicisina eklenir (modern + klasik dallar). */
    .section.section-flow,
    .modern-section.modern-section-flow {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }
    p {
        orphans: 3;                           /* Paragraf satirlari yetim kalmasin */
        widows: 3;
    }
}

.account-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-item {
    background: white;
    border: 1px solid #f1f2f6;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
}

.account-item:active {
    background: #f8f9fa;
    transform: scale(0.98);
}

.account-item .icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    background: #f1f2f6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.account-item.danger .icon {
    background: #fff5f5;
    color: #ff7675;
}

.account-item-text {
    display: flex;
    flex-direction: column;
}

.account-item-text .title {
    font-weight: 700;
    font-size: 15px;
    color: #2d3436;
}

.account-item-text .desc {
    font-size: 12px;
    color: #636e72;
}

.fab-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2799;
    animation: fadeIn 0.3s ease;
}
.fab-overlay.active { display: block; }

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

.mobile-fab-container {
    display: none;
    position: fixed;
    bottom: 30px;
    left: 20px;
    z-index: 2800;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 15px;
}

/* FAB removed from mobile to avoid conflict with bottom navigation bar */
@media screen and (max-width: 1024px) {
    .mobile-fab-container { display: none !important; }
}

.fab-main-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    z-index: 2802;
}
.fab-main-btn.active {
    transform: rotate(45deg);
    background: #e74c3c;
}

    .fab-menu-items {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.3s ease;
    align-items: flex-start;
}
.fab-menu-items.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.fab-item {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 12px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 16px;
    color: #2d3436;
    font-weight: 700;
    transition: 0.2s;
    min-height: 48px;
}
.fab-item:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.85);
}
.fab-label {
    margin-right: 5px;
}
.fab-item.danger {
    color: #c0392b;
    background: rgba(255, 230, 230, 0.7);
    border-color: rgba(255, 0, 0, 0.1);
}

/* ===== İş İlanına Göre Analiz modalı ===== */
.job-analyze-btn {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}
.job-analyze-btn:hover:not(:disabled) { background: var(--primary-dark); }
.job-analyze-btn:disabled { opacity: 0.6; cursor: wait; }
#job-analysis-result { margin-top: 16px; text-align: left; }
#job-modal .modal-content { width: 480px; max-width: 100%; }

/* ===== v51: AI Kapak Mektubu ===== */
.letter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
}
.letter-controls label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.letter-controls select { flex: 1; margin: 0; padding: 9px 10px; }
#cover-letter-result { margin-top: 16px; text-align: left; }

/* Modal icindeki duzenlenebilir mektup belgesi: A4 tonunda, CV fontuyla.
   Ust cizgi aktif sablonun vurgu rengini kullanir (PDF ile ayni). */
.letter-doc {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--cv-accent-color);
    border-radius: 10px;
    padding: 18px 20px;
    font-family: var(--font-cv);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-primary);
    max-height: 320px;
    overflow-y: auto;
}
.letter-doc:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.letter-block + .letter-block { margin-top: 0; }
.letter-doc-subject { font-weight: 700; margin-bottom: 10px; }
.letter-doc-greeting { margin-bottom: 8px; }
.letter-doc .letter-block:not([class*="letter-doc-"]) { margin-bottom: 9px; }
.letter-doc-closing { margin-top: 12px; font-weight: 600; }
.letter-doc-signature { font-weight: 700; }
.letter-doc-contact { font-size: 12px; color: var(--text-secondary); }

.letter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.letter-action-btn {
    flex: 1 1 140px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.letter-action-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.letter-action-btn.primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.letter-action-btn.primary:hover { background: var(--primary-dark); color: #fff; }

body.dark-mode .letter-doc { background: #232a31; border-color: #34424f; color: #e6eaee; }
body.dark-mode .letter-action-btn { background: #1b2128; border-color: #34424f; color: #dfe6e9; }
body.dark-mode .letter-action-btn.primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* --- Ciktilar: A4 mektup sayfasi (sunucu PDF'i + yazdirma yedegi) --- */
#letter-print-root { display: none; }
.letter-page {
    width: 794px;                 /* A4 genisligi (210mm) */
    min-height: 1123px;
    box-sizing: border-box;
    padding: 20mm;
    background: #ffffff;
    color: #2d3436;
    font-family: var(--font-cv);
    font-size: 11pt;
    line-height: 1.5;
    border-top: 6px solid var(--cv-accent-color);
}
.letter-page h1 { font-size: 15pt; margin: 0 0 2px; }
.letter-page .letter-page-contact { font-size: 9.5pt; color: #636e72; margin-bottom: 16px; }
.letter-page .letter-page-subject { font-weight: 700; margin-bottom: 12px; }
.letter-page p { margin: 0 0 10px; }
.letter-page .letter-page-closing { margin-top: 14px; font-weight: 600; }
.letter-page .letter-page-signature { font-weight: 700; }
.letter-page .letter-page-contact-line { font-size: 9.5pt; color: #636e72; }

@media print {
    /* Yazdirma yedeginde yalnizca mektup sayfasi basilir: modal, sidebar ve
       editor gorunmez (mevcut "body > *:not(#editor-view)" kuralini ezer). */
    body.printing-letter > *:not(#letter-print-root) {
        display: none !important;
        visibility: hidden !important;
    }
    body.printing-letter #letter-print-root {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 794px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ===== Analiz yukleme efekti (ATS + is ilani) ===== */
.ats-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 36px 10px;
}
.ats-loading-ring {
    width: 52px; height: 52px;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(var(--primary-color) 0%, transparent 32%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
    animation: atsSpin 0.9s linear infinite;
}
.ats-loading-ring::after {
    content: "";
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    position: absolute;
    transform: translate(19px, 19px);
    animation: atsPulse 1.2s ease-in-out infinite;
}
.ats-loading-status {
    font-size: 14px;
    font-weight: 600;
    color: #636e72;
    text-align: center;
    animation: atsFadeStep 0.6s ease-out;
}
#ats-results.reveal { animation: fadeInScale 0.25s ease-out; }
@keyframes atsSpin { to { transform: rotate(360deg); } }
@keyframes atsPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes atsFadeStep { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body.dark-mode .ats-loading-status { color: #b2bec3 !important; }

/* ===== v56: PDF hazirlik / tamamlama ekrani =====
   Sunucu PDF uretimi (Puppeteer) 1-3 sn suruyor; bu arada sadece bir toast
   gorunuyordu ve kullanici "indi mi?" ikileminde kaliyordu. Ekran tiklamayla
   ayni anda acilir; ATS puan ekraniyla ayni dil (donen halka + adim metni)
   + ilerleme cubugu kullanir, is bitince yesil onay isaretine doner. */
.pdf-progress {
    position: fixed;
    inset: 0;
    z-index: 6000;                 /* modallardan (5000) ve toast'tan (3000) ustte */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 32, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.pdf-progress.active { display: flex; animation: overlayFade 0.18s ease-out; }
.pdf-progress.is-leaving { opacity: 0; transition: opacity 0.26s ease; }
.pdf-progress-card {
    width: 340px;
    max-width: 100%;
    padding: 26px 22px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 60px rgba(16, 24, 40, 0.28);
    animation: fadeInScale 0.22s ease-out;
}
.pdf-progress-card:focus { outline: none; }
/* v61: klavye odağı görünür kalsın (indirme kartı odaklanabilir) */
.pdf-progress-card:focus-visible { outline: 3px solid rgba(52, 152, 219, 0.55); outline-offset: 4px; }
.pdf-progress-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin-bottom: 14px;
}
.pdf-progress-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #2d3436;
}
.pdf-progress-status {
    margin: 0 0 16px;
    min-height: 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #636e72;
}
.pdf-progress-status.is-step { animation: atsFadeStep 0.35s ease-out; }
.pdf-progress-bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: #eef1f4;
    overflow: hidden;
}
.pdf-progress-bar-fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    border-radius: 999px;
    background-image: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    animation: pdfBarSweep 1.25s ease-in-out infinite;
}
.pdf-progress-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #95a5a6;
}
/* Tamamlanma / yedek durumu */
.pdf-progress.is-done .pdf-progress-title { color: #1e8e4e; }
.pdf-progress.is-done .pdf-progress-bar-fill {
    width: 100%;
    animation: none;
    background-image: none;
    background-color: var(--success-color);
    transition: width 0.3s ease;
}
.pdf-progress.is-fallback .pdf-progress-title { color: #b9770e; }
.pdf-progress.is-fallback .pdf-progress-bar-fill {
    width: 100%;
    animation: none;
    background-image: none;
    background-color: #f0b429;
}
.pdf-progress-check {
    width: 56px; height: 56px;
    position: relative;
    border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.35);
    animation: pdfPop 0.3s ease-out;
}
.pdf-progress-check::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 22px;
    border-right: 3.5px solid #fff;
    border-bottom: 3.5px solid #fff;
    border-radius: 2px;
    transform: translate(-50%, -58%) rotate(45deg);
}
.pdf-progress-warn {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0b429;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(240, 180, 41, 0.35);
    animation: pdfPop 0.3s ease-out;
}
@keyframes pdfBarSweep { from { left: -40%; } to { left: 100%; } }
@keyframes pdfPop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
body.dark-mode .pdf-progress-card { background: #232c36; border-color: #34424f; }
body.dark-mode .pdf-progress-title { color: #dfe6e9 !important; }
body.dark-mode .pdf-progress-status { color: #b2bec3 !important; }
body.dark-mode .pdf-progress-bar { background: #2f3a45; }
@media screen and (max-width: 1024px) {
    .pdf-progress-card { width: 100%; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
    .pdf-progress.active,
    .pdf-progress-card,
    .pdf-progress-check,
    .pdf-progress-warn { animation: none; }
    .pdf-progress-bar-fill { animation: none; left: 0; width: 100%; }
}
@media print {
    /* Indirme ekrani acikken Ctrl+P'ye basilsa bile ciktiya girmemeli */
    .pdf-progress { display: none !important; }
}
.job-note { font-size: 13px; color: #95a5a6; margin: 6px 0; line-height: 1.5; }
.job-result-title { font-size: 13px; font-weight: 700; color: var(--primary-color); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.02em; }
.job-score-line { font-size: 20px; font-weight: 800; color: #2d3436; margin-top: 6px; }
.job-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.job-keyword-chip {
    background: #fff;
    border: 1px dashed var(--primary-color);
    color: var(--primary-color);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.job-keyword-chip:hover:not(:disabled) { background: var(--primary-color); color: #fff; }
.job-keyword-chip.added { background: #2ecc71; border: 1px solid #2ecc71; color: #fff; cursor: default; }
.job-keyword-static { background: #f1f2f6; color: #636e72; border-radius: 16px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.job-suggestions-box {
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}
.job-suggestion {
    background: #f8f9fa;
    border-left: 3px solid var(--primary-color);
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 13px;
    color: #636e72;
    line-height: 1.5;
    border-radius: 0 6px 6px 0;
}

/* ===== Karanlik Mod (koyu tema) — CV onizleme/yazdirma etkilenmez ===== */
body.dark-mode {
    --light-bg: #12171d;
    background-color: #12171d;
    color: #dfe6e9;
}

body.dark-mode .landing-view,
body.dark-mode .landing-hero,
body.dark-mode #landing-view { background-color: #12171d !important; }
body.dark-mode .landing-header { background-color: #12171d !important; }
body.dark-mode .brand-text { color: #dfe6e9 !important; }

body.dark-mode .auth-container,
body.dark-mode .auth-box,
body.dark-mode .auth-card,
body.dark-mode .modal-content,
body.dark-mode .form-block,
body.dark-mode .editor-panel-form,
body.dark-mode .editor-panel-preview,
body.dark-mode .card,
body.dark-mode .template-card {
    background-color: #1c232b !important;
    color: #dfe6e9 !important;
}
/* v65: sablon atolyesi karanlik mod */
body.dark-mode .template-card {
    border-color: #2a3440;
}
body.dark-mode .template-card[aria-selected="true"] {
    background-color: #232c36 !important;
    border-color: var(--primary-color);
}
body.dark-mode .template-item .tpl-use-mini {
    border-color: #6fb9e8;
    color: #6fb9e8;
}
body.dark-mode .template-item .tpl-use-mini:hover {
    background-color: #6fb9e8;
    color: #161c23;
}
body.dark-mode .template-stage-side h2 {
    color: #dfe6e9;
}
body.dark-mode #tpl-stage-desc {
    color: #95a5a6;
}
body.dark-mode .tpl-hint {
    color: #7f8c8d;
}
/* v35: sablon karti metinleri — .template-info h3/p'nin kendi koyu renkleri
   dark-mode'da koyu zemin uzerinde okunmaz kaliyordu (getComputedStyle ile
   olculdu: kart bg rgb(28,35,43), h3 rgb(45,52,54)). */
body.dark-mode .template-info {
    border-top-color: #2a3440 !important;
}
body.dark-mode .template-info h3 {
    color: #dfe6e9 !important;
}
body.dark-mode .template-info p {
    color: #95a5a6 !important;
}

body.dark-mode .form-input,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #232c36 !important;
    color: #dfe6e9 !important;
    border-color: #34424f !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #7f8c8d !important; }

body.dark-mode .modal-header h3,
body.dark-mode .form-block h3,
body.dark-mode .auth-container h1,
body.dark-mode .auth-container h2,
body.dark-mode .auth-box h1,
body.dark-mode .auth-box h2,
body.dark-mode .landing-hero h1,
body.dark-mode .landing-hero h2,
body.dark-mode .modal-body strong { color: #dfe6e9 !important; }

body.dark-mode .mobile-editor-tabs,
body.dark-mode .mobile-bottom-bar { background-color: #1c232b !important; }
body.dark-mode .mobile-bottom-bar .mobile-action-btn { color: #dfe6e9 !important; background-color: transparent !important; }

body.dark-mode .btn-text { color: #b2bec3 !important; }
body.dark-mode .btn-secondary-dashed { color: #b2bec3 !important; border-color: #34424f !important; }

body.dark-mode .ats-list .ats-item { background-color: #232c36 !important; color: #dfe6e9 !important; }
body.dark-mode .modal-content .close-modal { color: #b2bec3 !important; }
body.dark-mode hr { border-top-color: #34424f !important; }
body.dark-mode .input-hint, body.dark-mode small { color: #95a5a6 !important; }

/* Editor dinamik bolum kartlari (is deneyimi, egitim, sertifika, referans vb.) */
body.dark-mode .dynamic-item { background-color: #232c36 !important; border-color: #34424f !important; }
body.dark-mode .dynamic-item .form-input,
body.dark-mode .dynamic-item input,
body.dark-mode .dynamic-item textarea { background-color: #1c232b !important; }
body.dark-mode .move-dynamic-btn { background-color: #1c232b !important; border-color: #34424f !important; color: #b2bec3 !important; }
/* v38: bolum siralama kontrolleri karanlik modda */
body.dark-mode .section-move-btn { background-color: #1c232b !important; border-color: #34424f !important; color: #b2bec3 !important; }
body.dark-mode .drag-handle { color: #7f8c8d; }
body.dark-mode .drag-handle:hover, body.dark-mode .drag-handle:focus-visible { color: #dfe6e9; background: #1c232b; }
body.dark-mode .form-block { border-bottom-color: #2a3440 !important; }

/* v18 Faz2: yeni hover/odak durumlarinin karanlik mod uyumu */
body.dark-mode .form-input:hover:not(:focus) { border-color: #4a5a6a !important; }
body.dark-mode .form-input:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25) !important; }
body.dark-mode .dynamic-item:hover { border-color: #46586a !important; box-shadow: none !important; }
body.dark-mode .dynamic-item:focus-within { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25) !important; }
body.dark-mode .chip { background-color: #232c36 !important; border-color: #34424f !important; color: #dfe6e9 !important; }
body.dark-mode .chip:hover { border-color: #46586a !important; background-color: #2a3644 !important; }
body.dark-mode .chip-remove { color: #b2bec3 !important; }
body.dark-mode .chip-remove:hover { background-color: rgba(231, 76, 60, 0.2) !important; color: #ff7675 !important; }
body.dark-mode .btn-chip-add { background-color: #1c232b !important; color: #dfe6e9 !important; }
body.dark-mode .btn-chip-add:hover { background-color: rgba(52, 152, 219, 0.15) !important; }
body.dark-mode .btn-secondary-dashed { background-color: #1c232b !important; }
body.dark-mode .btn-secondary-dashed:hover { background-color: rgba(52, 152, 219, 0.15) !important; }

/* Landing sayfasinin alt bolumleri (ozellikler, footer) */
body.dark-mode .features-section,
body.dark-mode .trust-badges { background: #161c23 !important; }
body.dark-mode .feature-card { background: #1c232b !important; border-color: #2a3440 !important; }
body.dark-mode .feature-card h2 { color: #dfe6e9 !important; }
body.dark-mode .feature-card p { color: #95a5a6 !important; }
body.dark-mode .features-section .section-title { color: #dfe6e9 !important; }
body.dark-mode .landing-footer { background: #12171d !important; border-top-color: #2a3440 !important; }
body.dark-mode .landing-footer p { color: #7f8c8d !important; }
body.dark-mode .footer-links a { color: #95a5a6 !important; }

/* v28: yenilenen landing tasariminin karanlik mod uyumu */
body.dark-mode .landing-header { background: rgba(18, 23, 29, 0.85) !important; }
body.dark-mode .hero-pill { background: rgba(52, 152, 219, 0.15) !important; border-color: rgba(52, 152, 219, 0.35) !important; color: #6fb9e8 !important; }
body.dark-mode .hero-subtitle { color: #95a5a6 !important; }
body.dark-mode .hero-stats { border-top-color: #2a3440 !important; }
body.dark-mode .stat-label { color: #7f8c8d !important; }
body.dark-mode .stat-sep { background: #2a3440 !important; }
body.dark-mode .btn-hero-secondary { background: #1c232b !important; color: #dfe6e9 !important; border-color: #34424f !important; }
body.dark-mode .btn-hero-secondary:hover { border-color: var(--primary-color) !important; color: #6fb9e8 !important; }
body.dark-mode .mockup-card { background: #1c232b !important; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6), 0 0 0 1px #2a3440 !important; }
body.dark-mode .mockup-header { background: #232c36 !important; border-bottom-color: #2a3440 !important; }
body.dark-mode .mockup-url { background: #1c232b !important; color: #7f8c8d !important; }
body.dark-mode .mockup-body { background: #f5f5f5 !important; } /* CV PNG beyaz kalsin */
body.dark-mode .trust-badges { background: #1c232b !important; border-color: #2a3440 !important; }
body.dark-mode .badge-icon { background: rgba(46, 204, 113, 0.15) !important; }
body.dark-mode .badge-text strong { color: #dfe6e9 !important; }
body.dark-mode .badge-text span { color: #95a5a6 !important; }

/* İş ilanı analiz modalı */
body.dark-mode .job-analyze-btn { background-color: var(--primary-color) !important; color: #fff !important; }
body.dark-mode .job-score-line { color: #dfe6e9 !important; }
body.dark-mode .job-note { color: #95a5a6 !important; }
body.dark-mode .job-keyword-chip { background-color: #232c36 !important; }
body.dark-mode .job-keyword-static { background-color: #232c36 !important; color: #95a5a6 !important; }
body.dark-mode .job-suggestion { background-color: #232c36 !important; color: #b2bec3 !important; }

/* CV onizlemesi ve yazdirma her zaman acik renkte kalir */
body.dark-mode .editor-panel-preview { filter: none; }
@media print {
    body.dark-mode { background-color: #fff !important; color: #2d3436 !important; }
}

/* ============================================
   FAZ 3 - YENI SABLONLAR (v21)
   ============================================ */

/* ENHANCV TARZI - ELEGANT (v24): border-top her sayfada klonlanir;
   sayfa gecislerinde accent renkli ust serit beyaz kalmaz.
   @page marji JS ile 0 yapilir (syncPrintPageStyle).
   v32: 1. sayfada tam genislik renkli header blogu (print'te negatif
   margin ile full-bleed), 2+ sayfalarda 20px klonlanan serit. */
@media print {
    body.tpl-elegant #cv-root {
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
}

/* ---------- MINIMAL sablonu ---------- */
body.tpl-minimal #cv-root { padding: calc(var(--cv-padding) * 1.15); font-family: var(--font-cv); }
body.tpl-minimal #cv-root header {
    text-align: center;
    border-bottom: none;
    margin-bottom: calc(var(--cv-section-gap) * 1.2);
    padding-bottom: 0;
}
body.tpl-minimal h1 {
    font-size: 1.9em;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
body.tpl-minimal .subtitle {
    font-size: 0.95em;
    font-weight: 400;
    letter-spacing: 2px;
    color: #555;
}
body.tpl-minimal .contact-info { display: none; }
body.tpl-minimal .address-line { display: block !important; font-size: 0.85em; color: #555; margin: 8px 0 4px; }
body.tpl-minimal .contact-row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    font-size: 0.82em;
    color: #555;
    margin-bottom: 0;
}
body.tpl-minimal .section { margin-bottom: calc(var(--cv-section-gap) * 1.1); }
body.tpl-minimal .section-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #999 !important;
    padding: 0 0 4px !important;
    margin-bottom: 10px;
}
body.tpl-minimal .section-title {
    font-size: 0.8em !important;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #222 !important;
}
body.tpl-minimal .entry { margin-bottom: 12px; }
body.tpl-minimal .entry h3 { font-weight: 600; }
body.tpl-minimal .entry p { color: #555; }



/* ============================================
   FAZ 2.2 - EXECUTIVE + TWO-TONE SABLONLARI (v33)
   ============================================
   Iki sablon da "renkli kenar cubugu" (edge bar) tasarimidir. Bar'in tum
   sayfalarda tam yukseklik boyanmasi v26'daki blocker'di; cozum OLCULEREK
   kanitlandi (yerel headless Chrome, content-stream olcumu,
   .tmp-fixed-probe/probe.js):
     - position:fixed + top:0/bottom:0 -> 3/3 sayfada y=0.42pt,
       yukseklik A4'un %100.0'u, genislik 18.00mm (hedef 18mm)
     - negatif kontrol (position:absolute) -> son sayfada y=34.9pt,
       h=%95.9 (bar icerikle kayiyor, iz birakiyor)
     - overflow:hidden atasi print'te bar'i KIRPMIYOR (olculdu)
     - @page marji 1cm ise 2+ sayfada bar yuksekligi %96.6'da bitiyor
       (Chrome @page marjini arkaplanla boyamaz) -> full-bleed sart
   Bu yuzden: her iki sablon full-bleed'dir; @page marji syncPrintPageStyle()
   (istemci) ve functions/index.js pageCss (sunucu) tarafindan 0 yapilir.
   Ekranda bar absolute'dir: >1024px'te resizePreview() #cv-root transform'unu
   'none' yapar, fixed olsaydi bar tarayici penceresine yapisirdi. */
.exec-edge-bar,
.tt-edge-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}
.exec-edge-bar {
    width: var(--cv-exec-bar-width);
    background: var(--cv-accent-color);
}
.tt-edge-bar {
    width: var(--cv-tt-bar-width);
    background: var(--cv-accent-dark);
}

/* ---------- EXECUTIVE ----------
   Sol kenar cubugu accent renk; isim + iletisim bilgileri renkli zemin
   uzerinde beyaz metin. ATS notu: bar metin tasimaz, DOM sirasi
   isim -> iletisim -> OZET/DENEYIM/Egitim olarak tek kolonlu kalir. */
body.tpl-executive #cv-root {
    padding: 0 0 0 var(--cv-exec-bar-width);
    overflow: visible;
    font-family: var(--font-cv);
}
body.tpl-executive #cv-root header.exec-header {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--cv-exec-bar-width);
    margin: 0;
    padding: calc(var(--cv-padding) * 0.7) calc(var(--cv-padding) * 0.45) var(--cv-section-gap) !important;
    border-bottom: none;
    text-align: center;
    color: #fff;
    z-index: 1;      /* bar'in (z-index:0) uzerinde kalsin */
}
body.tpl-executive #cv-root header.exec-header h1 {
    color: #fff;
    font-size: 1.7em;
    letter-spacing: 2px;
    margin: 0 0 6px 0;
}
body.tpl-executive #cv-root header.exec-header .subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.5px;
}
body.tpl-executive #cv-root header.exec-header .cv-photo {
    width: 104px;
    height: 104px;
    border-color: rgba(255, 255, 255, 0.6);
    margin: 0 auto 14px auto;
}
.exec-contact {
    margin-top: 16px;
    font-size: 0.82em;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.96);
    text-align: left;
}
.exec-contact div { margin-bottom: 5px; word-break: break-word; }
.exec-meta {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.78em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
}
/* v36: kenar cubugunda beceri/dil listesi (kullanici istegi) */
.exec-side-title {
    margin: 14px 0 8px 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
}
.exec-side-list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    font-size: 0.8em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.96);
}
.exec-side-list li {
    margin-bottom: 4px;
    padding-left: 10px;
    position: relative;
    word-break: break-word;
}
.exec-side-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
}
body.tpl-executive .exec-main {
    padding: calc(var(--cv-padding) * 0.75) var(--cv-padding) var(--cv-padding);
}
body.tpl-executive .section-header { border-bottom: 1px solid #ddd; }
body.tpl-executive .section-title { color: var(--cv-accent-color); letter-spacing: 2px; }
body.tpl-executive .entry .left-col { color: var(--cv-accent-color); }

/* ---------- TWO-TONE ----------
   Ustte tam genislik accent bant (v32 Elegant deseni: negatif margin ile
   full-bleed) + solda ince ikinci ton (accent-dark) kenar cubugu. Bant ve
   bar'in kesisimi kasitli bir renk siniri olusturur (bar z-index:0 ile
   bantin uzerine biner) -> gradyan/dikis artifakti olusmaz. */
body.tpl-twotone #cv-root {
    padding: 0 0 0 var(--cv-tt-bar-width);
    overflow: visible;
    font-family: var(--font-cv);
}
body.tpl-twotone #cv-root header.tt-header {
    margin: 0 0 30px calc(-1 * var(--cv-tt-bar-width));
    padding: 34px var(--cv-padding) 28px calc(var(--cv-tt-bar-width) + var(--cv-padding)) !important;
    background: var(--cv-accent-color);
    background: linear-gradient(180deg, var(--cv-accent-color) 0%, color-mix(in srgb, var(--cv-accent-color), #000 32%) 100%);
    border-bottom: none;
    color: #fff;
    text-align: left;
}
body.tpl-twotone #cv-root header.tt-header h1 {
    color: #fff;
    font-size: 2.0em;
    letter-spacing: 2px;
    margin: 0 0 4px 0;
}
body.tpl-twotone #cv-root header.tt-header .subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 1px;
}
body.tpl-twotone #cv-root header.tt-header .contact-info {
    color: rgba(255, 255, 255, 0.95);
    margin-top: 12px;
}
body.tpl-twotone #cv-root header.tt-header .cv-photo {
    width: 96px;
    height: 96px;
    border-color: rgba(255, 255, 255, 0.55);
    margin: 0 0 14px 0;
}
.tt-license {
    margin-top: 10px;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.95);
    font-style: italic;
}
body.tpl-twotone .tt-main {
    padding: 0 var(--cv-padding) var(--cv-padding);
}
body.tpl-twotone .section-header { border-bottom: 1px solid #e6e9ed; }
body.tpl-twotone .section-title { color: var(--cv-accent-color); letter-spacing: 2px; }
body.tpl-twotone .section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 0.85em;
    background: var(--cv-accent-color);
    margin-right: 10px;
    vertical-align: -0.06em;
}
body.tpl-twotone .entry .left-col { color: var(--cv-accent-color); }

/* ============================================
   v64: OXFORD / CAMBRIDGE — klasik akademik sablonlar
   ============================================
   Geri bildirim: beyaz yaka alimi renkli/fotografli CV'lerden klasik,
   tipografi odakli (Oxford tarzi) CV'lere yoneliyor. Iki sablon da:
   - fotograf basmaz (foto yuklu olsa bile),
   - dolgu/golge/sidebar kullanmaz: murekkep dostu, ATS metni duz kalir,
   - kullanici yazi tipini elle secerse onun secimi kazanir
     (.font-picked varsayilani kapatir),
   - bolum/entry print kurallarini (break-inside / section-flow) devralir.

   v65: Oxford, bizzat Oxford Careers Service'in yayinladigi "Traditional CV
   example" ornekleriyle (2 PDF, Word/Calibri; piksel piksel olculdu) yeniden
   kuruldu — v64'teki "serif + cift kural + sol italik tarih" yorumu GERCEK
   ornege benzemiyordu. Gercek ornegin olcumleri:
   - Calibri tabanli SANS, 11pt govde / 14pt bolum basligi / 18pt isim,
   - isim ortalanmis DUZ bold (harf araligi yok, altinda kural YOK),
   - bolum basligi altinda ince tam genislik kural (1px),
   - tarihler sagda ve DUZ (italik degil),
   - aciklama satirlari "•" madde imli (p.desc-line),
   - saf siyah; renk/foto yok.
   Cambridge v64'teki gibi kalir: klasik serif + tek lacivert vurgu + sagda
   tarihler. */
body.tpl-oxford,
body.tpl-cambridge {
    --cv-accent-color: #111;
}
body.tpl-cambridge {
    --cv-accent-color: #002147;
}

/* Varsayilan aileler: Oxford sans (Calibri olcusu), Cambridge klasik serif.
   Kullanici yazi tipini elle secmediyse uygulanir. */
body.tpl-oxford:not(.font-picked) #cv-root {
    --font-cv: Calibri, Carlito, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
body.tpl-cambridge:not(.font-picked) #cv-root {
    --font-cv: Georgia, 'Times New Roman', 'PT Serif', serif;
}

/* Fotograf bu iki sablonda hic basilmaz */
body.tpl-oxford .cv-photo,
body.tpl-cambridge .cv-photo {
    display: none;
}

/* --- OXFORD: gercek "Traditional CV example" duzeni --- */
body.tpl-oxford #cv-root {
    padding: var(--cv-padding);
}
body.tpl-oxford #cv-root header {
    text-align: center;
    border-bottom: none;
    padding-bottom: 2px;
}
body.tpl-oxford h1 {
    text-transform: none;
    font-size: 1.64em;
    font-weight: 700;
    letter-spacing: 0;
    color: #000;
}
body.tpl-oxford .subtitle {
    font-size: 1em;
    font-style: normal;
    letter-spacing: 0;
    color: #222;
    margin-top: 2px;
}
body.tpl-oxford .contact-info {
    font-size: 1em;
    color: #000;
    margin-top: 4px;
}
/* Klasik gorunum: iletisim ikonlari yerine duz metin */
body.tpl-oxford .cv-ico {
    display: none;
}
/* Bolum basligi: 14pt bold + hemen altinda ince kural; cumle bicimi
   NOT: ::first-letter yalnizca block kutulara uygulanir; .section-title bir
   <span> oldugu icin display: block gerekli (yoksa kural sessizce yok sayilir,
   basliklar tamamen kucuk kalir). */
body.tpl-oxford .section-header {
    border-bottom: 1px solid #000;
    padding-bottom: 1px;
}
body.tpl-oxford .section-title {
    display: block;
    font-size: 1.27em;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: lowercase;
    color: #000;
}
body.tpl-oxford .section-title::first-letter {
    text-transform: uppercase;
}
/* Tarihler sagda ve duz (hanging dates). Tarihsiz bolumlerde tek .right-col
   bulundugu icin genislik degismez. */
body.tpl-oxford .entry {
    flex-direction: row-reverse;
}
body.tpl-oxford .entry .left-col {
    width: 96px;
    text-align: right;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    color: #000;
    padding-right: 0;
    padding-left: 14px;
}
body.tpl-oxford .entry h3 {
    font-size: 1em;
    font-weight: 700;
    color: #000;
}
body.tpl-oxford .entry p {
    font-size: 1em;
    color: #000;
    line-height: 1.35;
}
/* Detay satirlari "•" madde imli (ornek CV'lerdeki gibi) */
body.tpl-oxford .entry p.desc-line {
    display: list-item;
    list-style: disc outside;
    margin-left: 22px;
    padding-left: 2px;
}

/* --- CAMBRIDGE: sola yasli baslik, sagda tarihler, lacivert ince vurgu --- */
body.tpl-cambridge #cv-root {
    padding: var(--cv-padding);
}
body.tpl-cambridge #cv-root header {
    text-align: left;
    border-bottom: 1px solid #002147;
    padding-bottom: 12px;
}
body.tpl-cambridge h1 {
    font-size: 1.95em;
    font-weight: 600;
    letter-spacing: 2.6px;
    color: #002147;
}
body.tpl-cambridge .subtitle {
    font-size: 1em;
    font-style: italic;
    color: #333;
    margin-top: 4px;
}
body.tpl-cambridge .contact-info {
    font-size: .88em;
    color: #333;
    margin-top: 7px;
}
body.tpl-cambridge .section-header {
    border-bottom: 1px solid #c6d0de;
    padding-bottom: 6px;
}
body.tpl-cambridge .section-title {
    font-size: .95em;
    font-weight: 700;
    letter-spacing: 2px;
    color: #002147;
}
/* Tarihler sagda (hanging dates): entry ters cevrilir. Tarihsiz bolumlerde
   tek .right-col bulunur ve width:100% oldugu icin genislik degismez. */
body.tpl-cambridge .entry {
    flex-direction: row-reverse;
}
body.tpl-cambridge .entry .left-col {
    width: 172px;
    text-align: right;
    font-size: .88em;
    font-style: italic;
    font-weight: 400;
    color: #333;
    padding-right: 0;
    padding-left: 16px;
}
body.tpl-cambridge .entry h3 {
    font-size: 1.02em;
    font-weight: 700;
    color: #111;
}
body.tpl-cambridge .entry p {
    font-size: .94em;
    color: #222;
}

/* Print: bar HER sayfada tam yukseklik olmali -> position:fixed (kanit yukarida)
   ve full-bleed padding (genel #cv-root print kurali padding: 60px 75px
   !important yazar; bu yuzden !important gerekir). Kagida tam dayanma icin
   @page marji syncPrintPageStyle() ile 0 yapilir. */
@media print {
    .exec-edge-bar,
    .tt-edge-bar {
        position: fixed;
    }
    body.tpl-executive #cv-root {
        padding: 0 0 0 var(--cv-exec-bar-width) !important;
    }
    body.tpl-twotone #cv-root {
        padding: 0 0 0 var(--cv-tt-bar-width) !important;
    }
    /* Bar'in onundeki/arkasindaki tasma kirpilmasin (fixed + overflow
       etkilesimi print'te olculdu: kirpma yok; yine de guvenli taraf) */
    body.tpl-executive #cv-root,
    body.tpl-twotone #cv-root {
        overflow: visible !important;
    }
    /* v35: 2+ sayfalarda ust bosluk. @page marji 0 (full-bleed bar sartiydi)
       oldugu icin sayfa kirilimlarinda icerik A4 ust kenarina yapiyordu
       (olculdu: 2. sayfa ilk metin baseline'i ust kenara 5.5mm, gorsel ust
       ~3mm). Elegant deseninin (bkz. box-decoration-break: clone) print
       uygulamasi: klonanan 20px border her sayfa fragment'inin ustune beyaz
       serit ekler -> 2+ sayfalarda ~1cm ust bosluk garanti. Ekran gorunumu
       degismez (yalnizca print). Beyaz serit main icerik alani uzerindedir;
       sol kenar cubugu (fixed, renkli) etkilenmez. */
    body.tpl-executive .exec-main,
    body.tpl-twotone .tt-main {
        border-top: 20px solid #fff !important;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
}