@charset "UTF-8";

/* ==========================================
   CV MAKER - MODERN, EYE-FRIENDLY DESIGN SYSTEM
   ========================================== */

:root {
  /* Color Palette - Eye-Friendly Soft Neutrals & Professional Modern Teal Accent */
  --background: #F8FAFC;
  --foreground: #0F172A;
  --foreground-muted: #64748B;
  --surface: #FFFFFF;
  --surface-alt: #F1F5F9;
  --surface-hover: #E2E8F0;
  --border: #E2E8F0;
  --border-subtle: #EDF2F7;
  
  --primary: #0D9488;
  --primary-hover: #0F766E;
  --primary-dark: #115E59;
  --primary-foreground: #FFFFFF;
  --primary-soft: #F0FDFA;
  --primary-border: #CCFBF1;
  
  --secondary: #F1F5F9;
  --secondary-foreground: #1E293B;
  --secondary-hover: #E2E8F0;

  --accent: #D97706;
  --accent-soft: #FEF3C7;
  --error: #E11D48;
  --error-soft: #FFE4E6;
  --warning: #D97706;
  --success: #10B981;
  --success-soft: #D1FAE5;

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-md: 0 6px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 36px -4px rgba(15, 23, 42, 0.08), 0 6px 14px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 50px -12px rgba(15, 23, 42, 0.18);

  /* Layout & Spacing */
  --container: 1240px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* Fonts */
  --font-inter: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-display: "Instrument Serif", Georgia, serif;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Global Resets ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-inter);
  color: var(--foreground);
  background-color: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--primary-hover); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ===== Font Declarations ===== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-normal.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-italic.ttf") format("truetype");
  font-style: italic; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-normal.ttf") format("truetype");
  font-style: normal; font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-normal.ttf") format("truetype");
  font-style: normal; font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif/instrument-serif-normal.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif/source-serif-normal.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif/source-serif-italic.ttf") format("truetype");
  font-style: italic; font-weight: 400; font-display: swap;
}
/* CV preview mPDF font_data key'leri ("source_serif", "instrument_serif")
   CSS inline style & class kurallarında kullanılıyor; CSS identifier match
   multi-word ("Source Serif 4") ile underscore ("source_serif") token'larını
   ayırt ettiği için aynı dosyaya ayrı @font-face alias'ları gerekiyor —
   aksi halde browser Source Serif ve Instrument Serif için default serif'e
   fallback yapıyor. Bold yok: ağırlık browser tarafından synthesize ediliyor
   (zaten Source Serif 4 deklarasyonlarında da yoktu). */
@font-face {
  font-family: "source_serif";
  src: url("../fonts/source-serif/source-serif-normal.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "source_serif";
  src: url("../fonts/source-serif/source-serif-italic.ttf") format("truetype");
  font-style: italic; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "instrument_serif";
  src: url("../fonts/instrument-serif/instrument-serif-normal.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "instrument_serif";
  src: url("../fonts/instrument-serif/instrument-serif-italic.ttf") format("truetype");
  font-style: italic; font-weight: 400; font-display: swap;
}

.font-inter { font-family: var(--font-inter); }
.font-instrument_serif { font-family: var(--font-display); }
.font-source_serif { font-family: var(--font-serif); }

/* ===== Containers & Surface Utilities ===== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }

.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ===== Typography Helpers ===== */
h1, h2, h3, h4, h5, h6 { color: var(--foreground); font-weight: 700; line-height: 1.25; margin-top: 0; }
.hero-title { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: var(--space-4); }
.hero-title-small { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; margin-bottom: var(--space-3); }
.section-head { margin-bottom: var(--space-7); }
.section-head.center { text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.section-head p { color: var(--foreground-muted); font-size: 1.05rem; margin: 0; max-width: 60ch; }
.section-head.center p { margin: 0 auto; }
.muted-sm { color: var(--foreground-muted); font-size: 13.5px; margin: 0; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-5);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-weight: 600; font-size: 14.5px; cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none !important;
  user-select: none;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }

.btn-sm { height: 36px; padding: 0 var(--space-3); font-size: 13.5px; border-radius: var(--radius-sm); }
.btn-lg { height: 50px; padding: 0 var(--space-6); font-size: 15.5px; border-radius: var(--radius-md); }

.btn-primary {
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25);
}
.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
  color: #fff;
}

.btn-secondary {
  background: var(--secondary); color: var(--secondary-foreground);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--secondary-hover);
}

.btn-outline {
  background: var(--surface); color: var(--foreground);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
  background: var(--surface-alt);
  border-color: #CBD5E1;
  color: var(--foreground);
}

.btn-ghost {
  background: transparent; color: var(--foreground-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--surface-alt);
  color: var(--foreground);
}

/* Görsel disabled — JS zaten server-side gate'le korunuyor; bu sadece
   kullanıcıya "şu an tıklayamazsın" mesajı verir. pointer-events:none
   bağlantı için de tıklamayı durdurur; aria-disabled + tabindex ile
   erişilebilirlik ipucu. */
.btn.is-disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-danger, .btn-error {
  background: var(--error); color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.2);
}
.btn-danger:hover, .btn-error:hover {
  background: #BE123C;
  color: #FFFFFF;
}

.btn-block { width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--foreground-muted); cursor: pointer;
  transition: all var(--transition-fast);
}
.icon-btn:hover { background: var(--surface-alt); color: var(--foreground); border-color: #CBD5E1; }

/* ===== Forms ===== */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label, label { display: block; font-size: 13.5px; font-weight: 600; color: var(--foreground); }

.form-input, .form-select, .form-textarea, input[type="text"], input[type="email"], input[type="password"], input[type="month"], input[type="date"], input[type="url"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--foreground);
  font-size: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  outline: none;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2064748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

textarea, .form-textarea { height: auto; padding: var(--space-3) var(--space-4); resize: vertical; min-height: 105px; line-height: 1.5; }
.form-select-sm { height: 36px; padding: 0 32px 0 12px; font-size: 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); background-color: var(--surface); }

.form-input:focus, .form-select:focus, .form-textarea:focus, .form-select-sm:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="month"]:focus, input[type="date"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
  background: var(--surface);
}

.form-row, .grid-2 { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
/* Tek satırda tam genişlik isteyen alanlar (örn. e-posta + doğrulama butonu)
   için .field.full-row yardımcı sınıfı. */
.form-row .full-row,
.grid-2 .full-row { grid-column: 1 / -1; }
.form-row-3, .grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }

.form-help { font-size: 12.5px; color: var(--foreground-muted); margin-top: 2px; }
.text-error, .form-error { font-size: 12.5px; color: var(--error); font-weight: 500; margin-top: 2px; }
.field-error .form-input, .field-error .form-select, .field-error .form-textarea {
  border-color: var(--error); box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
}

.form-check { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 14px; user-select: none; }
.form-check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); border-radius: 4px; cursor: pointer; }
/* "Şu an çalışıyorum / öğrenim görüyorum" checkbox satırı:
   üst boşluk az, alt boşluk biraz daha fazla olsun (deneyim/eğitim kartları). */
.currently-row { margin-top: 6px; margin-bottom: 18px; }

/* ===== Profile Snapshot Items ===== */
/* Profil snapshot bölümlerindeki (deneyim, eğitim, yetenek, proje, sertifika)
   öğeleri kart olarak görselliyoruz; alt alta net bir şekilde dizilir. */
.snapshot-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.snapshot-item {
  background: var(--surface-alt, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.snapshot-item > .grid-2 { gap: var(--space-3); }

/* Yetenek satırı gibi tek satırlık öğeler: alanlar yatay dizilir (isim + seviye + sil). */
.snapshot-item--inline {
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}
.snapshot-item--inline > .field { flex: 1; }
.snapshot-item--inline > .field label { margin-bottom: 4px; }

/* ===== Alerts ===== */
.alert {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  display: flex; align-items: flex-start; gap: var(--space-3); font-size: 14px; font-weight: 500;
  border: 1px solid transparent; margin-bottom: var(--space-4);
}
.alert.success, .alert-success { background: var(--success-soft); color: #065F46; border-color: #A7F3D0; }
.alert.error, .alert-error { background: var(--error-soft); color: #9F1239; border-color: #FECDD3; }
.alert.info, .alert-warning { background: var(--accent-soft); color: #92400E; border-color: #FDE68A; }
.alert-info { background: #E0F2FE; color: #075985; border-color: #BAE6FD; }

/* Password card — başlık + "Şifreyi değiştir" butonu yan yana;
   form body gizli, butona basınca açılır/kapanır (data-password-toggle).
   Hata ile dönen POST sonrası server-side `is-open` sınıfı veriyor.
   Daraltılmış hâlde divider + alt margin YOK; sadece açıkken görünür. */
.password-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.password-card-title { font-size: 1.3rem; margin: 0; font-weight: 800; letter-spacing: -0.01em; }
.password-card-body { display: none; }
.password-card-body.is-open {
  display: block;
  animation: password-card-reveal 0.2s ease-out;
}
.password-card:has(.password-card-body.is-open) .password-card-head {
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-3);
}
@keyframes password-card-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .password-card-body.is-open { animation: none; }
}

/* Verify banner — mobilde text + button alt alta, masaüstünde yan yana.
   Yardımcı metin içindeki "aşağıdaki" / "yandaki" konum kelimesi de
   viewport'a göre değişir (CSS content swap). */
.verify-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.verify-banner .verify-banner-body { flex: 1; min-width: 0; }
.verify-banner > form { margin: 0; padding: 0; align-self: flex-start; }
.verify-banner .hint-pos::before { content: 'aşağıdaki'; }
@media (min-width: 768px) {
  .verify-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .verify-banner > form { align-self: center; flex-shrink: 0; }
  .verify-banner .hint-pos::before { content: 'yandaki'; }
}

/* ===== Header & Sticky Navigation ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: all var(--transition-normal);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--space-5); min-height: 80px; height: auto; gap: var(--space-5);
}

.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.25rem; color: var(--foreground);
  text-decoration: none !important; letter-spacing: -0.02em;
}
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.2);
  flex: 0 0 auto;
}
.brand-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); }

.nav-links { display: flex; align-items: center; gap: var(--space-1); }
.nav-links a {
  color: var(--foreground-muted); font-weight: 600; font-size: 14px;
  padding: 8px 16px; border-radius: var(--radius-full);
  text-decoration: none !important; transition: all var(--transition-fast);
}
.nav-links a:hover { color: var(--primary); background: var(--primary-soft); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Language Switcher */
.lang-switch, .lang-switcher {
  display: inline-flex; border-radius: var(--radius-full); padding: 3px;
  background: var(--surface-alt); border: 1px solid var(--border);
}
.lang-switch a, .lang-chip, .lang-switcher a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 12px; font-size: 12px; font-weight: 700; border-radius: var(--radius-full);
  color: var(--foreground-muted); text-decoration: none !important; transition: all var(--transition-fast);
}
.lang-switch a.active, .lang-chip.active, .lang-switcher a.active {
  background: var(--surface); color: var(--primary);
  box-shadow: var(--shadow-xs);
}

/* User Menu Pill */
.user-menu {
  display: flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-full);
  padding: 4px 4px 4px 14px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Hero Section (Landing) ===== */
.hero-section, .hero {
  position: relative; overflow: hidden;
  padding: var(--space-9) 0 var(--space-8);
  background: radial-gradient(circle at 50% -10%, rgba(13, 148, 136, 0.07), transparent 60%);
}

.hero-inner {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-8); align-items: center;
}

.eyebrow, .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-full);
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--primary-border);
  font-size: 13px; font-weight: 600; margin-bottom: var(--space-4);
}

.hero-title { font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 var(--space-4); font-weight: 800; color: var(--foreground); }
.hero-subtitle, .hero .lead { font-size: 1.125rem; color: var(--foreground-muted); margin: 0 0 var(--space-6); max-width: 54ch; line-height: 1.6; }

.hero-cta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hero-cta .icon { transition: transform var(--transition-fast); }
.hero-cta .btn-primary:hover .icon { transform: translateX(3px); }

/* Visual Mock Cards in Hero */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 480px; }
.hero-card {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 210 / 297;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: #FFFFFF;
  box-shadow: var(--shadow-xl); padding: 14mm; overflow: hidden;
  transform: rotate(-2deg) translateY(6px);
  transition: transform var(--transition-normal);
}
.hero-card:hover { transform: rotate(-1deg) translateY(0); }
.hero-card + .hero-card {
  position: absolute; inset: auto 4% 0 auto; width: 75%;
  transform: rotate(4deg) translate(6%, 10%);
  opacity: 0.95; filter: saturate(0.95);
}

.hc-avatar { width: 20mm; height: 20mm; border-radius: 12px; background: var(--primary-soft); flex: 0 0 auto; border: 1px solid var(--primary-border); }
.hc-head-text { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hc-line { height: 12px; border-radius: 4px; background: var(--foreground); opacity: 0.85; width: 85%; }
.hc-line.sm { height: 9px; background: var(--foreground-muted); width: 60%; }
.hc-divider { height: 2px; background: var(--primary); margin: var(--space-3) 0; border-radius: 2px; opacity: 0.7; }
.hc-section-title { height: 13px; width: 40%; background: var(--primary); border-radius: 3px; margin: 12px 0 8px; opacity: 0.9; }
.hc-row { display: flex; gap: var(--space-3); align-items: center; margin: 8px 0; }
.hc-row .l { flex: 1; height: 9px; background: var(--foreground-muted); opacity: 0.7; border-radius: 3px; }
.hc-row .r { width: 30%; height: 9px; background: var(--foreground-muted); opacity: 0.5; border-radius: 3px; }

/* Dividers */
.divider { height: 1px; background: var(--border); margin: var(--space-8) auto; border: 0; }

/* ===== Features Section ===== */
.feature-section { padding: var(--space-6) 0; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.feature-card {
  border-radius: var(--radius-md); padding: 14px 18px;
  background: var(--background); border: 1px solid var(--border-subtle);
  transition: all var(--transition-normal);
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-border);
  background: var(--surface);
}
.feature-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 8px; }
.feature-card-head h3, .feature-card h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--foreground); }
.feature-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-border);
  flex-shrink: 0;
}
.feature-card p { margin: 0; color: var(--foreground-muted); font-size: 13.5px; line-height: 1.5; }

/* ===== Templates Showcase ===== */
.templates-section, .templates-page { padding: var(--space-7) 0; }
.templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); gap: var(--space-4); }
.template-card {
  display: flex; flex-direction: column; text-decoration: none !important;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); overflow: hidden;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-xs);
  max-width: 200px;
}
.template-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-hover);
}
.thumb-wrap {
  position: relative; aspect-ratio: 210 / 297;
  background: #FFFFFF; border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.template-card:hover .thumb-wrap img { transform: scale(1.04); }

.template-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: var(--surface); gap: 6px;
}
.template-meta h4, .template-meta h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); }
.tag, .template-meta .tag {
  display: inline-flex; padding: 2px 7px; border-radius: var(--radius-full);
  background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-border);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  flex-shrink: 0;
}

/* ===== Auth Section ===== */
.auth-section { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: var(--space-8) 0; }
.auth-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.auth-card {
  padding: var(--space-7); width: 100%;
  border-radius: var(--radius-xl); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--space-5); }
.auth-title { font-size: 1.75rem; font-weight: 800; text-align: center; letter-spacing: -0.025em; margin: 0 0 6px; }
.auth-sub { text-align: center; color: var(--foreground-muted); font-size: 14px; margin: 0 0 var(--space-6); }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 48px; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: var(--radius-sm); border: 0;
  background: transparent; color: var(--foreground-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.password-toggle:hover { background: var(--surface-alt); color: var(--foreground); }

.divider-text {
  display: flex; align-items: center; text-align: center; margin: var(--space-4) 0;
  color: var(--foreground-muted); font-size: 13px;
}
.divider-text::before, .divider-text::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); }
.divider-text span { padding: 0 12px; }
.auth-foot { text-align: center; margin-top: var(--space-5); font-size: 14px; color: var(--foreground-muted); }
.link-primary { color: var(--primary); font-weight: 600; }
.link-sm { font-size: 12.5px; color: var(--primary); font-weight: 600; }

/* Sifre gereksinimleri listesi — kart'in tam genisligini kaplar, her madde
   X (eksik) / Check (tamam) ikonu gosterir. .ok class'i JS tarafindan eklenir. */
.pwd-rules {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--foreground-muted);
  width: 100%;
}
.pwd-rules li {
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
  transition: color var(--transition-fast);
}
.pwd-rules li::before {
  content: "\2715"; /* X — eksik */
  position: absolute;
  left: 0; top: 1px;
  font-size: 13px;
  font-weight: 700;
  color: var(--error, #dc2626);
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
}
.pwd-rules li.ok { color: var(--foreground); }
.pwd-rules li.ok::before {
  content: "\2713"; /* Check — tamam */
  color: var(--success, #16a34a);
}

/* Tarih aralığı hatası: bitis tarihi baslangictan eski olamaz. JS tarafli
   dogrulama yanlis degerler icin .is-invalid sinifi ekler. */
.form-input.is-invalid,
input[type="month"].is-invalid {
  border-color: var(--error, #dc2626);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error, #dc2626) 18%, transparent);
}

/* ===== Profile Page ===== */
.profile-page { padding: var(--space-7) 0 var(--space-9); }
.profile-wrap { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-6); }
/* Grid item'lar varsayılan `min-width: auto` ile gelir — bu da içerideki
   tablar / uzun e-posta inputları yüzünden track'in taşmasına yol açar.
   Mobilde yatay scroll'u engellemek için her iki sütunun da shrink'e
   izin vermesi gerekir. */
.profile-wrap > * { min-width: 0; }
.profile-sidebar-inner {
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  height: min-content;
  align-self: start;
}
.avatar-row { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.avatar-lg {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  background-position: center; background-size: cover; border: 2px solid var(--primary-border);
  flex-shrink: 0;
}
.welcome { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--primary); margin: 0 0 2px; }
.avatar-row h3 { margin: 0; font-size: 1.1rem; font-weight: 700; word-break: break-word; overflow-wrap: anywhere; }
/* Sidebar'daki avatar-row içindeki text kapsayıcısı — uzun e-posta
   adresleri sidebar genişliğini taşırmasın, kırılarak alt satıra geçsin. */
.avatar-row .muted-sm { word-break: break-all; overflow-wrap: anywhere; line-height: 1.35; }

.profile-nav { display: flex; flex-direction: column; gap: 4px; }
.profile-nav a {
  padding: 10px 14px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600;
  color: var(--foreground-muted); text-decoration: none !important; transition: all var(--transition-fast);
}
.profile-nav a:hover { background: var(--surface-alt); color: var(--foreground); }
.profile-nav a.active { background: var(--primary-soft); color: var(--primary); }

.profile-main { display: flex; flex-direction: column; gap: var(--space-6); }
.panel { padding: var(--space-6); }
.panel-head { margin-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-3); }
.panel-head h2 { font-size: 1.3rem; margin: 0; font-weight: 800; letter-spacing: -0.01em; }

/* Profile horizontal tab bar — kişisel bilgiler / deneyim / ... */
.profile-tabbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
}
.profile-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 6px);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground-muted, #4b5563);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  flex: 1 1 0;
  text-align: center;
}
.profile-tab:hover { background: var(--surface-alt, #f8fafc); color: var(--foreground, #17161a); }
.profile-tab.active { background: var(--primary-soft, #e7f1ee); color: var(--primary, #1F5F4E); }
.profile-tab:focus-visible {
  outline: 2px solid var(--primary, #1F5F4E);
  outline-offset: 2px;
}

/* Tab panel: hidden attribute'i JS tarafından kaldırılır */
.profile-tab-panel[hidden] { display: none; }

/* Profile CV list (my-cvs sekmesi içeriği) */
.profile-cvs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.profile-cv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 14px 16px;
  background: var(--surface-alt, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  flex-wrap: wrap;
}
.profile-cv-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.profile-cv-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground, #17161a);
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-cv-title:hover { color: var(--primary, #1F5F4E); }
.profile-cv-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-cv-actions .btn { height: 30px; padding: 0 10px; font-size: 12px; }

/* Table View in Profile */
.cv-table { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #FFF; }
.cv-table .row { display: grid; grid-template-columns: 2fr 2fr 1.5fr 1.5fr; padding: 14px 16px; align-items: center; border-bottom: 1px solid var(--border); font-size: 14px; }
.cv-table .row.head { background: var(--surface-alt); font-weight: 700; color: var(--foreground-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.cv-table .row:last-child { border-bottom: 0; }
.cv-table .col.actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ===== CV BUILDER WORKSPACE ===== */
.builder-section { padding: var(--space-3) 0 var(--space-5); min-height: calc(100vh - 72px); }
.builder-app {
  display: grid; grid-template-columns: 200px 1fr 460px;
  gap: var(--space-4); align-items: stretch;
  height: calc(100vh - 72px - 32px); max-height: 1200px; min-height: 640px;
}
/* Grid item'ların içeriğe (form, buton, önizleme) göre şişip
   satırı/genişliği zorlamasını engeller. Bu olmadan preview kartı
   794px (A4) veya uzun buton listesi grid track'ı esnetir. */
.builder-app > * { min-width: 0; }

/* Sidebar Steps */
.builder-steps {
  display: flex; flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 14px 10px;
}
.steps-header {
  padding: 0 4px 12px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}
.back-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center;
  color: var(--foreground-muted); border: 1px solid var(--border); background: transparent;
  text-decoration: none; transition: all var(--transition-fast);
}
.back-btn:hover { background: var(--surface-alt); color: var(--foreground); }

.step-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
}
.step-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--radius-md); cursor: pointer; user-select: none;
  color: var(--foreground-muted); font-weight: 600; font-size: 13px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.step-item:hover { background: var(--surface-alt); color: var(--foreground); }
.step-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.step-item .num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-alt); color: var(--foreground-muted);
  font-size: 11px; font-weight: 700;
  border: 1.5px solid var(--border);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.step-item.active .num { background: var(--primary); color: #fff; border-color: var(--primary); }
.step-item .step-icon { font-size: 14px; flex-shrink: 0; line-height: 1; }
.step-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.steps-foot {
  flex-shrink: 0; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 8px;
}
.steps-progress-badge {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 12px; font-weight: 600; color: var(--foreground-muted);
}
.mobile-select { display: none; }

/* Center Editor Panel */
.builder-editor { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
.editor-toolbar {
  padding: 12px 18px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.breadcrumb { font-size: 13.5px; color: var(--foreground-muted); font-weight: 700; }
.editor-actions { display: flex; align-items: center; gap: var(--space-3); }
.save-status { font-size: 12.5px; font-weight: 600; color: var(--foreground-muted); }
.save-status.saving { color: var(--warning); }
.save-status.ok { color: var(--success); }

/* Dropdown containers (Save dropdown for logged-in users + legacy
   Download dropdown for guest users) — aynı görsel davranış. */
.download-dropdown,
.save-dropdown { position: relative; display: inline-flex; }
.download-dropdown .dropdown-caret,
.save-dropdown .dropdown-caret {
  margin-left: 2px;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.download-dropdown #downloadToggleBtn[aria-expanded="true"] .dropdown-caret,
.save-dropdown #saveBtn[aria-expanded="true"] .dropdown-caret {
  transform: rotate(180deg);
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
  padding: 6px;
  z-index: 200;
  flex-direction: column;
  gap: 2px;
}
.dropdown-menu.open { display: flex; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease;
}
.dropdown-item:hover { background: var(--surface-hover, rgba(0,0,0,.06)); }
.dropdown-item--primary { color: var(--primary, #1F5F4E); }
.dropdown-item--primary:hover { background: color-mix(in srgb, var(--primary, #1F5F4E) 10%, transparent); }

.editor-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--space-6);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-xs);
}
.editor-body h2 { margin: 0 0 4px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.editor-body .editor-desc { color: var(--foreground-muted); margin: 0 0 var(--space-5); font-size: 14px; }

/* CV yazı tipi değişkenleri — font seçimine göre .font-* class'ı tarafından override edilir */
.font-inter {
  --font-cv-name: var(--font-inter);
  --font-cv-body: var(--font-inter);
  --font-cv-section: var(--font-inter);
}
.font-source_serif {
  --font-cv-name: var(--font-serif);
  --font-cv-body: var(--font-serif);
  --font-cv-section: var(--font-serif);
}
.font-instrument_serif {
  --font-cv-name: var(--font-display);
  --font-cv-body: var(--font-display);
  --font-cv-section: var(--font-display);
}

/* Dynamic List Items & Accordion Cards */
.list-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.item-card {
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  display: flex; flex-direction: column; gap: var(--space-3); position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.item-card:hover { border-color: #CBD5E1; }
.item-card.open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12); }
.item-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  cursor: pointer; user-select: none;
}
.item-title-inline { flex: 1; height: 38px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 14px; }

/* Yeni: statik başlık görünümü (collapsible kartlar) */
.item-title-display {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.item-title-main {
  font-weight: 700; font-size: 15px; color: var(--foreground);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-title-main.placeholder { color: var(--foreground-muted); font-weight: 600; font-style: italic; }
.item-title-sub {
  font-size: 12.5px; color: var(--foreground-muted); font-weight: 500;
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Collapsed durumda gövde gizli */
.item-card.collapsed .item-card-body { display: none; }
.item-card.collapsed { padding: 12px var(--space-4); }

/* Yeni: Skill kartları — 60 / 30 / 10 satır layout (taşma yok) */
.skill-card { padding: 10px var(--space-4); }
.skill-row {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 0;
}
.skill-row .skill-name { flex: 0 0 60%; min-width: 0; }
.skill-row .skill-level { flex: 0 0 calc(30% - 4px); min-width: 0; }
.skill-row .skill-remove { flex: 0 1 10%; min-width: 38px; display: flex; justify-content: flex-end; }
.skill-row .form-input,
.skill-row .form-select { height: 38px; min-width: 0; width: 100%; }

/* Bölüm Sırası (Section Order) — drag/drop */
.order-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.order-hint { color: var(--foreground-muted); font-size: 13.5px; margin: 0; }
.order-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.order-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px var(--space-4);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: grab;
  user-select: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform 0.12s ease, box-shadow var(--transition-fast);
}
.order-item:hover { border-color: var(--primary-border, var(--primary)); background: var(--primary-soft); }
.order-item:active { cursor: grabbing; }
.order-item.dragging { opacity: 0.4; transform: scale(0.98); }
.order-item.drag-over { border-color: var(--primary); border-style: dashed; background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12); }
.order-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--foreground-muted);
  cursor: grab; flex-shrink: 0;
}
.order-item .order-name {
  flex: 1; font-weight: 600; font-size: 14.5px; color: var(--foreground);
  text-transform: capitalize;
}
.sect-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 24px; padding: 0 10px;
  background: var(--primary-soft); color: var(--primary);
  border-radius: 999px; font-size: 12.5px; font-weight: 700;
}

/* Özelleştirme — dikey nefes alanı */
.customize-stack {
  display: flex; flex-direction: column; gap: var(--space-5);
}

/* Fotoğraf Çerçevesi — Builder tarafı (önizleme + canlı önizleme) */
.cvlystpreview-photo-wrap.photo-square { border-radius: 0; }
.cvlystpreview-photo-wrap.photo-circle { border-radius: 50%; }
.cvlystpreview-photo-wrap.photo-rounded { border-radius: 6px; }
/* Star — browser-only (PDF daireye düşer) */
.cvlystpreview-photo-wrap.photo-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.avatar-preview.photo-square { border-radius: 0; }
.avatar-preview.photo-circle { border-radius: 50%; }
.avatar-preview.photo-rounded { border-radius: 10px; }
.avatar-preview.photo-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Fotoğraf Çerçevesi — Swatch önizleme (küçük gösterge) */
.frame-swatch .frame-icon {
  display: inline-block;
  width: 22px; height: 22px;
  background: var(--primary-soft);
  border: 2px solid currentColor;
  vertical-align: middle;
}
.frame-swatch .frame-icon.square { border-radius: 0; }
.frame-swatch .frame-icon.circle { border-radius: 50%; }
.frame-swatch .frame-icon.rounded { border-radius: 6px; }
.frame-swatch .frame-icon.star {
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.add-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; height: 48px; border: 1.5px dashed var(--border); border-radius: var(--radius-md);
  background: transparent; color: var(--primary); font-weight: 700; font-size: 14px; cursor: pointer;
  margin-top: var(--space-3);
  transition: all var(--transition-fast);
}
.add-btn:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-hover); }

/* Avatar Uploader Component */
.avatar-uploader {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4);
  border: 1.5px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-alt);
}
.avatar-preview {
  width: 80px; height: 80px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid #FFFFFF;
  font-weight: 800; font-size: 24px; background-position: center; background-size: cover; flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
/* Profil ekranı uploader genişletmesi — soluk önizleme + sağda meta ve
   aksiyonlar (dosya seç / kaldır). */
.avatar-uploader-body {
  display: flex; flex-direction: column; gap: var(--space-2);
  flex: 1; min-width: 0;
}
.avatar-uploader-meta {
  display: flex; flex-direction: column; gap: 2px;
}
.avatar-uploader-meta strong { font-size: 14px; color: var(--text); }
.avatar-uploader-actions {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
/* Native file input gizle — özel tetikleyici (label.btn) kullanılıyor.
   A11y: ekran okuyucu için görünür kalır (display: none değil). */
.avatar-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.avatar-file-name { word-break: break-all; }
.avatar-remove-btn { color: var(--text-muted, #64748b); }
/* Profil ekranında daha büyük önizleme — uploader burada hero gibi duruyor. */
.profile-wrap .avatar-uploader .avatar-preview { width: 96px; height: 96px; font-size: 32px; }
@media (max-width: 640px) {
  .avatar-uploader { flex-direction: column; align-items: flex-start; }
  .profile-wrap .avatar-uploader .avatar-preview { width: 80px; height: 80px; font-size: 28px; }
}

/* Swatches & Color Selectors */
.color-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.color-swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px var(--border);
  cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.active { box-shadow: 0 0 0 3px var(--primary); transform: scale(1.05); }

/* Slider (custom range) — dolu/boş, hover, focus */
.range-row { display: flex; align-items: center; gap: var(--space-3); }
.custom-range {
  --thumb-size: 22px;
  --track-h: 6px;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--thumb-size);
  background: transparent; cursor: pointer; margin: 0;
  --val: 50; --min: 20; --max: 40;
  --pct: calc((var(--val) - var(--min)) / (var(--max) - var(--min)) * 100);
}
.custom-range::-webkit-slider-runnable-track {
  height: var(--track-h);
  border-radius: var(--track-h);
  background:
    linear-gradient(to right,
      var(--primary) 0%,
      var(--primary) calc(var(--pct) * 1%),
      var(--surface-alt) calc(var(--pct) * 1%),
      var(--surface-alt) 100%);
  border: 1px solid var(--border);
}
.custom-range::-moz-range-track {
  height: var(--track-h);
  border-radius: var(--track-h);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.custom-range::-moz-range-progress {
  height: var(--track-h);
  border-radius: var(--track-h);
  background: var(--primary);
}
.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb-size); height: var(--thumb-size);
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  margin-top: calc((var(--track-h) - var(--thumb-size)) / 2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: grab;
}
.custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}
.custom-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.custom-range::-moz-range-thumb {
  width: var(--thumb-size); height: var(--thumb-size);
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: grab;
}
.custom-range::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}
.custom-range:focus-visible {
  outline: none;
}
.custom-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent);
}
.custom-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Frame Style Swatches */
.frame-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.frame-swatch {
  padding: 10px 16px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: var(--space-2);
  transition: all var(--transition-fast);
}
.frame-swatch.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* Editor Footer Nav */
.editor-nav {
  padding: 12px 18px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.step-progress { display: flex; gap: 6px; align-items: center; }
.step-progress span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: all var(--transition-fast); }
.step-progress span.done { background: var(--primary-hover); }
.step-progress span.current { background: var(--primary); width: 20px; border-radius: 4px; }

/* Right Live Preview Panel */
.builder-preview { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
.preview-toolbar {
  padding: 12px 18px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.preview-title { font-size: 13px; font-weight: 700; color: var(--foreground-muted); text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 8px; }
.preview-locale { font-size: 12px; color: var(--foreground-muted); font-weight: 700; letter-spacing: 0.06em; }
.preview-zoom { display: flex; align-items: center; gap: var(--space-2); }
.zoom-level { font-size: 13px; color: var(--foreground-muted); font-weight: 700; min-width: 48px; text-align: center; }

.preview-viewport {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: #1E293B; /* Deep dark slate ambient frame background for eye relief & document focus */
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}
.preview-scaler {
  position: relative;
  margin: 0 auto;
  transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
}
#cvMount {
  position: relative; top: 0; left: 0;
  transform-origin: top left;
  transition: transform 0.2s ease;
}

/* Printable A4 Document Frame — builder içi preview tarafı.
   Browser preview'da `.cvlystpreview-page` div'i bir A4 karton olarak
   görünür: beyaz arka plan, 14mm/13mm iç boşluk, karton hissi için
   box-shadow + border-radius. PDF tarafında bu selector uygulanmaz
   (style.css PDF render akışına hiç gitmiyor); PDF'te padding
   `helpers.php → mpdf_instance()` üzerinden mPDF page margin'leri ile
   sağlanıyor, böylece çoklu sayfalarda her sayfada tutarlı iç boşluk.
   Eski kodda `.cv-page` ve `.astra-page` selector'ları vardı; yeni
   yapıda gerçek sayfa sınıfı `.cvlystpreview-page`. */
.astra-page, .cvlystpreview-page {
  width: 210mm;
  min-height: 297mm;
  padding: 14mm 13mm;
  box-sizing: border-box;
  margin: 0 auto 8mm;
  background: #FFFFFF;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}
/* Çoklu sayfa kartlarında ilk ve son kart dış margin'lerini sıfırla
   (gap zaten spacing sağlıyor). */
.builder-preview .cvlystpreview-page:first-child,
.builder-preview .cvlystpreview-page:last-child {
  margin-top: 0;
  margin-bottom: 0;
}
.builder-preview .cvlystpreview-pages {
  display: flex;
  flex-direction: column;
  gap: 8mm;
  padding: 0;
}
/* Çoklu sayfa kartlarında ilk ve son kart dış margin'lerini sıfırla
   (gap zaten spacing sağlıyor). */
.builder-preview .cvlystpreview-page:first-child,
.builder-preview .cvlystpreview-page:last-child {
  margin-top: 0;
  margin-bottom: 0;
}
/* CV template-specific kurallar (typography, color tokens, layout) artık
   iki ayrı dosyada: cv-base.css (tüm template'ler için ortak) ve
   templates/<name>.css (örn. astra layout). Bu sayede her template kendi
   layout kararlarını kendi dosyasında tutar; burada (style.css) sadece
   builder UI kuralları kalır. */

/* My CVs Grid Card on Home */
.my-cvs-section { padding: var(--space-8) 0; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.cv-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
  transition: all var(--transition-normal); box-shadow: var(--shadow-xs);
}
.cv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.cv-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.cv-card-head h4 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.chip { display: inline-flex; padding: 3px 10px; border-radius: var(--radius-full); background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 600; border: 1px solid var(--primary-border); }
.cv-card-actions { display: flex; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }

/* ===== Footer ===== */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: auto; flex-shrink: 0; }
.footer-inner {
  max-width: var(--container); margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-6);
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: flex-start;
}
.footer-inner .brand-name { font-size: 1.25rem; font-weight: 800; margin: 0 0 var(--space-2); color: var(--foreground); }
.small-muted { color: var(--foreground-muted); font-size: 13.5px; margin: 0; }
.footer-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-links a { color: var(--foreground-muted); font-weight: 600; font-size: 14.5px; text-decoration: none !important; }
.footer-links a:hover { color: var(--primary); }

/* Empty States */
.empty-state {
  padding: var(--space-7); text-align: center; color: var(--foreground-muted);
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface-alt);
}
.empty-state strong { display: block; color: var(--foreground); font-size: 1.1rem; margin-bottom: 6px; }

/* ===== Responsive Breakpoints ===== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-subtitle, .hero-cta { margin-left: auto; margin-right: auto; justify-content: center; }
  .hero-visual { order: -1; min-height: 380px; }
  .profile-wrap { grid-template-columns: 1fr; }
  /* Sidebar'ı mobilde yatay "drawer" yerine normal akışta üstte tut,
     ama içindeki nav'ı yatay scroll'a al: 7 sekme tek satıra sığmaz. */
  .profile-sidebar-inner { max-width: 100%; }
  .profile-nav { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; gap: 6px; padding-bottom: 4px; }
  .profile-nav a { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 13px; }
  /* Ana içerik bölümleri için mobil tabbar: snap point ile yatay scroll. */
  .profile-tabbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; /* yatay scrollbar nefes alsın */
  }
  .profile-tabbar::-webkit-scrollbar { height: 4px; }
  .profile-tabbar::-webkit-scrollbar-thumb { background: var(--border, #e2e8f0); border-radius: 2px; }
  .profile-tab { flex: 0 0 auto; min-height: 44px; scroll-snap-align: start; }
}

@media (max-width: 1100px) {
  /* 3 sütun (200+1fr+460+32 gaps = 692 + 1fr) 1100'ün altında editor'ü
     sıkıştırıyor; preview'ı editor'ün altına ayrı bir satıra al ki
     kullanıcı tüm içeriği görebilsin. Yatay taşma yok, scroll yok. */
  .builder-app {
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .builder-preview {
    grid-column: 1 / -1;
    min-height: 560px;
  }
  .preview-viewport { min-height: 420px; }
}

@media (max-width: 780px) {
  .nav-links { display: none; }
  .hero-title { font-size: 2.2rem; }
  .hero-section { padding: var(--space-7) 0; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-links { justify-content: center; }
  .cv-table, .cv-table .row { display: block; }
  .cv-table .row.head { display: none; }
  .cv-table .row { padding: 14px; }
  .cv-table .col.actions { justify-content: flex-start; margin-top: 10px; }
  .form-row, .grid-2, .form-row-3, .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .builder-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 0;
  }
  /* Mobilde 3 paneli dikey yığ. Steps yatay "tab bar"a dönüşür,
     editor ortada kalır, preview en altta kendi yüksekliğinde. */
  .builder-steps {
    height: auto; flex-direction: row; align-items: center;
    overflow-x: auto; padding: 10px 14px; gap: 10px;
  }
  .builder-steps .steps-header,
  .builder-steps .step-list { display: none; }
  .builder-steps .steps-foot {
    margin: 0; flex: 1; padding: 0; border-top: 0;
    flex-direction: row; align-items: center; gap: 8px;
  }
  .builder-steps .steps-progress-badge { flex-shrink: 0; }
  .builder-steps .steps-foot .mobile-select {
    display: flex; flex: 1 1 auto; gap: 8px; align-items: center;
    /* width:100% kaldırıldı — select flex:1 ile esner, buton yanında sabit
       kalır; intrinsic min-width ezberine karşı ikisine de min-width:0. */
  }
  .mobile-select select#stepSelect {
    flex: 1 1 auto; min-width: 0; max-width: 100%;
  }
  .mobile-select #togglePreviewBtn { flex: 0 0 auto; }

  /* Preview kolonu kendi satırında — içindeki viewport scale-fit
     çalışabilsin diye grid satırına sabit yükseklik lazım (parent
     height:auto olduğu için 1fr boşalıyor). */
  .builder-preview { min-height: 70vh; }
  .preview-viewport { min-height: 60vh; padding: var(--space-2); }
  .preview-toolbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  .preview-toolbar > * { min-width: 0; }
  .zoom-level { min-width: 36px; }

  /* Editor toolbar: breadcrumb + actions tek satıra sığmıyorsa alt
     satıra wrap etsin. Butonlar tam genişlikte actions satırına dizilir. */
  .editor-toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .editor-actions { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .editor-body { padding: var(--space-4); }
  .editor-nav { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .editor-nav > * { min-width: 0; }
  .step-progress { flex: 1 1 100%; order: 3; justify-content: center; }
  #prevBtn, #nextBtn { min-width: 44px; }

  /* ─── togglePreviewBtn — mobilde "sadece önizleme" modu ─────────
     preview-only class'ı .builder-app üzerinde: editor gizli,
     preview tüm viewport'a yayılır. Steps bar GÖSTERİLİR — toggle
     butonu onun içinde, dolayısıyla kullanıcı her zaman mod
     değiştirebilir. aria-pressed="false" olunca aşağıdaki kural
     tetiklenir ve preview gizlenip sadece editör görünür. */
  .builder-app.preview-only {
    grid-template-rows: auto 1fr;
  }
  .builder-app.preview-only .builder-editor { display: none; }
  .builder-app.preview-only .builder-preview {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: calc(100vh - 72px);
  }
  .builder-app.preview-only .preview-toolbar { display: flex; }
  .builder-app.preview-only .preview-viewport {
    min-height: calc(100vh - 72px - 56px);
    padding: var(--space-3);
  }
  /* "Editör modu": steps görünür (adım seçimi için), preview gizli.
     Varsayılan mobil düzenden farkı: preview satırı tamamen kapatılır
     ki ekranda 70vh boş alan kalmasın. */
  .builder-app:not(.preview-only) .builder-preview { display: none; }
  /* Buton aktifken göz ikonu primary rengine boyansın (currentColor),
     ayrıca ince bir primary halo ile görsel olarak net sınıflandırılsın.
     İnaktifken .btn-ghost'un default muted stili geçerli olur. */
  #togglePreviewBtn[aria-pressed="true"] {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
  }
  #togglePreviewBtn[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--primary) 30%, transparent);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
  }

  /* ─── Telefon düzenlemeleri (≤640px) ─────────────────────────────
     Padding'leri sıkıştır, container'ın taşmasını engelle. */
  .container { padding-left: 14px; padding-right: 14px; }

  /* Site header: brand + lang + Çıkış Yap tek satıra sığmıyor,
     actions alt satıra kayar ve tam genişlikte dizilir. */
  .header-inner { flex-wrap: wrap; gap: 10px 16px; padding: 12px 14px; min-height: 0; }
  .header-actions { justify-content: flex-end; gap: 10px; }
  .header-actions .btn { padding: 6px 12px; font-size: 13px; }

  .profile-page { padding: var(--space-5) 0 var(--space-7); }
  .panel { padding: 16px; }
  .panel-head h2 { font-size: 1.15rem; }
  .profile-sidebar-inner { padding: 16px; gap: 14px; }
  .avatar-row { flex-wrap: wrap; }
  .avatar-row h3 { font-size: 1rem; word-break: break-word; }
  .welcome { font-size: 11px; }
  .profile-nav { padding: 4px; }
  .profile-nav a { padding: 7px 10px; font-size: 12px; }

  /* CV listesi: meta + aksiyon alt alta, aksiyonlar tam genişlik. */
  .profile-cv-item { flex-direction: column; align-items: stretch; gap: 12px; }
  .profile-cv-meta { flex: 1 1 auto; }
  .profile-cv-actions { width: 100%; gap: 8px; }
  .profile-cv-actions .btn { flex: 1 1 auto; min-width: 0; }

  /* Snapshot inline satır (skill ad + seviye + sil) → dikey yığın. */
  .snapshot-item--inline { flex-direction: column; align-items: stretch; gap: 10px; }
  .snapshot-item--inline > .form-group,
  .snapshot-item--inline > button { width: 100%; }
  .item-card-head { padding: 12px; flex-wrap: wrap; }
  .item-card-actions { margin-left: auto; }
}

/* ===== Print Styles ===== */
@media print {
  body { background: #FFFFFF !important; color: #000000 !important; }
  .site-header, .site-footer, .builder-steps, .builder-editor, .preview-toolbar, .builder-section { display: none !important; }
  .cv-page, .astra-page, .cvlystpreview-page {
    box-shadow: none !important; margin: 0 !important;
    border-radius: 0 !important;
  }
  @page { size: A4; margin: 0; }
}

/* ==========================================
   ADMIN PANEL — sidebar + topbar layout
   ========================================== */

/* Shell: sidebar + content */
.admin-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  background: var(--background);
}

/* Sidebar */
.admin-sidebar {
  background: #0F172A;
  color: #E2E8F0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none !important;
  color: #fff;
  flex-shrink: 0;
}
.admin-brand .brand-dot {
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.25);
}
.admin-brand .brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.admin-brand .brand-name small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #94A3B8;
  text-transform: uppercase;
  margin-top: 3px;
}

.admin-nav {
  flex: 1 1 auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
}
.admin-nav-group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748B;
  padding: 14px 12px 6px;
  display: block;
}
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: #CBD5E1;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.admin-nav a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.admin-nav a.active {
  background: rgba(13, 148, 136, 0.18);
  color: #5EEAD4;
}
.admin-nav a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.admin-nav a .nav-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}
.admin-nav a .nav-icon svg { width: 16px; height: 16px; }

/* ============= SPA Soft Geçişler ============= */
/* View Transitions API desteği varsa (Chrome/Edge/Safari 18+) native fade,
   yoksa class-based opacity fallback kullanılır. */
@supports (view-transition-name: a) {
  ::view-transition-old(admin-content),
  ::view-transition-new(admin-content) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  ::view-transition-old(admin-sidebar) {
    animation: none;
  }
  ::view-transition-new(admin-sidebar) {
    animation: none;
  }
  .admin-content { view-transition-name: admin-content; }
  .admin-sidebar { view-transition-name: admin-sidebar; }
}

/* Fallback: opacity-based transition */
@supports not (view-transition-name: a) {
  .admin-content {
    transition: opacity 0.16s ease, transform 0.16s ease;
  }
  .admin-content.is-leaving {
    opacity: 0;
    transform: translateY(4px);
  }
  .admin-content.is-entering {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* Loading sırasında content hafif dim olsun, arka planda fetch çalışıyor */
.admin-content.is-loading { opacity: 0.6; pointer-events: none; }

/* Sidebar nav linkleri için yumuşak active geçişi */
.admin-nav a {
  transition: background var(--transition-fast), color var(--transition-fast), padding 0.18s ease;
}
.admin-nav a::before {
  transition: top 0.18s ease, bottom 0.18s ease, opacity 0.18s ease;
  opacity: 0;
}
.admin-nav a.active::before { opacity: 1; }
.admin-nav a:hover { transform: translateX(2px); }

/* Page head, topbar, footer yumuşak güncellensin */
.admin-topbar, .admin-footer {
  transition: background var(--transition-normal);
}

/* Form submit loading state */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  top: 50%; left: 50%;
  margin-top: -8px; margin-left: -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: admin-spin 0.6s linear infinite;
  color: #fff;
}
@keyframes admin-spin { to { transform: rotate(360deg); } }

/* Quick-tile hover transition iyileştirmesi */
.quick-tile, .stat-card, .engine-card, .admin-panel, .profile-card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* Toast mesajı daha yumuşak gelsin (zaten var ama refine) */
.admin-toast {
  transform: translateY(8px) scale(0.98);
}
.admin-toast.show {
  transform: translateY(0) scale(1);
}

/* Sayfa içi tablo hover geçişi */
.admin-table tbody tr {
  transition: background var(--transition-fast);
}

.admin-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.admin-foot-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.admin-foot-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0D9488, #115E59);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.admin-foot-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.admin-foot-name b {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.admin-foot-name span {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-foot .icon-btn {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
}
.admin-foot .icon-btn:hover {
  background: rgba(225, 29, 72, 0.15);
  color: #FCA5A5;
  border-color: rgba(225, 29, 72, 0.3);
}

/* Topbar + main */
.admin-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-topbar {
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 30;
  gap: 16px;
}
.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.admin-topbar-left h1 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-topbar-left .crumbs {
  font-size: 12.5px;
  color: var(--foreground-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-topbar-left .crumbs a {
  color: var(--foreground-muted);
  text-decoration: none !important;
}
.admin-topbar-left .crumbs a:hover { color: var(--primary); }
.admin-topbar-left .crumbs .sep { color: #CBD5E1; }

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.admin-topbar-right .btn { height: 38px; }

.admin-content {
  flex: 1 1 auto;
  padding: 28px 28px 48px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* Page header (used in every admin view) */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-head-text { min-width: 0; }
.page-head h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--foreground);
}
.page-head p {
  font-size: 14px;
  color: var(--foreground-muted);
  margin: 0;
  max-width: 64ch;
  line-height: 1.55;
}
.page-head .page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Admin stat cards */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.stat-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.stat-card .stat-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stat-card .stat-icon svg { width: 18px; height: 18px; }
.stat-card.accent .stat-icon { background: var(--accent-soft); color: var(--accent); }
.stat-card.neutral .stat-icon { background: var(--surface-alt); color: var(--foreground-muted); }
.stat-card .stat-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--foreground-muted);
  margin: 0;
}
.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: -0.025em;
  line-height: 1;
  font-feature-settings: "tnum";
  margin: 0;
}
.stat-card .stat-foot {
  font-size: 12.5px;
  color: var(--foreground-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Quick-access tiles */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.quick-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none !important;
  color: var(--foreground);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}
.quick-tile:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.quick-tile .quick-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-tile .quick-icon svg { width: 18px; height: 18px; }
.quick-tile .quick-text { min-width: 0; }
.quick-tile .quick-text b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 2px;
}
.quick-tile .quick-text span {
  display: block;
  font-size: 12.5px;
  color: var(--foreground-muted);
  font-weight: 500;
}
.quick-tile .quick-arrow {
  margin-left: auto;
  color: var(--foreground-muted);
  font-size: 18px;
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.quick-tile:hover .quick-arrow {
  color: var(--primary);
  transform: translateX(3px);
}

/* Filter pills (used on CV list) */
.filter-pills {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 2px;
  margin-bottom: 18px;
}
.filter-pills a {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground-muted);
  text-decoration: none !important;
  transition: all var(--transition-fast);
}
.filter-pills a:hover { color: var(--foreground); background: var(--surface-alt); }
.filter-pills a.active {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-xs);
}

/* Search bar */
.admin-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.admin-search .form-input {
  flex: 1 1 320px;
  max-width: 420px;
  height: 40px;
  background: var(--surface);
}
.admin-search .btn { height: 40px; }

/* Admin data table */
.admin-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table thead th {
  background: var(--surface-alt);
  text-align: left;
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--foreground-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--foreground);
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--surface-alt); }
.admin-table td.actions {
  text-align: right;
  white-space: nowrap;
}
.admin-table td.actions .btn { margin-left: 4px; }
.admin-table .cell-mono {
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--foreground-muted);
}
.admin-table .cell-id { color: var(--foreground-muted); font-weight: 600; }
.admin-table .cell-main b { color: var(--foreground); font-weight: 600; }
.admin-table .cell-main span { color: var(--foreground-muted); font-size: 12.5px; display: block; margin-top: 2px; }
.admin-table .cell-muted { color: var(--foreground-muted); font-size: 12.5px; }

/* Status / role badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.badge.admin { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.badge.user { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-border); }
.badge.ok { background: var(--success-soft); color: #047857; border-color: #A7F3D0; }
.badge.error { background: var(--error-soft); color: #B91C1C; border-color: #FECACA; }
.badge.neutral { background: var(--surface-alt); color: var(--foreground-muted); border-color: var(--border); }

/* Empty state inside table */
.admin-table .empty-row td {
  text-align: center;
  padding: 48px 24px;
  color: var(--foreground-muted);
  font-size: 14px;
}
.admin-table .empty-row .empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  color: var(--foreground-muted);
}
.admin-table .empty-row .empty-icon svg { width: 20px; height: 20px; }

/* Panel (used in user detail) */
.admin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
  overflow: hidden;
}
.admin-panel-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-panel-head h2 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-panel-head h2 .panel-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.admin-panel-head h2 .panel-icon svg { width: 14px; height: 14px; }
.admin-panel-body { padding: 20px; }
.admin-panel-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Profile card (user detail page) */
.profile-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: 22px;
}
.profile-card .pc-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0D9488, #115E59);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
  flex-shrink: 0;
}
.profile-card .pc-info { flex: 1; min-width: 0; }
.profile-card .pc-info h1 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 2px;
  letter-spacing: -0.015em;
}
.profile-card .pc-info p {
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--foreground-muted);
  margin: 0;
}
.profile-card .pc-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Stat strip (user detail small stats) */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.stat-strip .ss-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
}
.stat-strip .ss-item .ss-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--foreground-muted);
  margin: 0 0 6px;
}
.stat-strip .ss-item .ss-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
}

/* Inline form row (used in role update) */
.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.inline-form .field { min-width: 180px; }
.inline-form .field label { margin-bottom: 6px; }

/* Danger panel — red-tinted border + header */
.admin-panel.danger { border-color: #FECACA; }
.admin-panel.danger .admin-panel-head { background: #FEF2F2; }
.admin-panel.danger .admin-panel-head h2 { color: #B91C1C; }
.admin-panel.danger .admin-panel-head h2 .panel-icon { background: #FECACA; color: #B91C1C; }

/* Engine card */
.engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.engine-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--transition-fast);
}
.engine-card:hover { box-shadow: var(--shadow-sm); }
.engine-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.engine-card-head h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--foreground);
}
.engine-card-key {
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--foreground-muted);
  background: var(--surface-alt);
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
}
.engine-card-metrics {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.engine-card-metrics .metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.engine-card-metrics .metric .k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground-muted);
}
.engine-card-metrics .metric .v {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--foreground);
  font-feature-settings: "tnum";
}
.engine-card-error {
  font-size: 12.5px;
  color: #B91C1C;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  word-break: break-word;
}

/* Admin footer */
.admin-footer {
  border-top: 1px solid var(--border);
  padding: 18px 28px;
  font-size: 12.5px;
  color: var(--foreground-muted);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-footer b { color: var(--foreground); font-weight: 600; }

/* ============= Field table (preset editor) ============= */
.field-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  background: var(--surface);
}
.field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1100px;
}
.field-table thead th {
  background: var(--surface-alt);
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--foreground-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.field-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.field-table tbody tr:last-child td { border-bottom: 0; }
.field-table tbody tr:hover { background: var(--surface-alt); }
.field-table .field-drag {
  color: var(--foreground-muted);
  cursor: grab;
  text-align: center;
  user-select: none;
  font-weight: 800;
  font-size: 14px;
}
.field-table .field-drag:active { cursor: grabbing; }
.field-table input.form-input,
.field-table select.form-select {
  height: 34px;
  padding: 0 8px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  width: 100%;
  min-width: 0;
}
.field-table input.form-input[type=number] { text-align: right; }
.field-table input.f-color {
  width: 38px; height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  background: var(--surface);
  cursor: pointer;
}
.field-table .icon-btn { width: 30px; height: 30px; }
.field-table tbody tr.f-removing { opacity: 0.4; transition: opacity 0.18s ease; }

/* ============= PDF fields (absolute positioned) ============= */
.cv-field {
  position: absolute;
  white-space: pre-wrap;
  line-height: 1.2;
  margin: 0;
  word-break: break-word;
}
.cv-field.font-inter   { font-family: var(--font-inter); }
.cv-field.font-serif   { font-family: var(--font-serif); }
.cv-field.font-display { font-family: var(--font-display); font-weight: 400; }
.cv-field.font-mono    { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }
.cv-field.cv-field-link { text-decoration: none; }
.cv-field.cv-field-link:hover { text-decoration: underline; }

/* Fields render modunda mevcut hard-coded header'ı gizle */
.cv-page.cv-fields-mode .cvlystpreview-header,
.cv-page.cv-fields-mode .cvlystpreview-divider,
.cv-page.cv-fields-mode .cvlystpreview-summary {
  display: none !important;
}

/* ============= Engine default selector & config forms ============= */
.engine-radio-list { display: flex; flex-direction: column; gap: 6px; }
.engine-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.engine-radio:hover { border-color: var(--primary-border); background: var(--primary-soft); }
.engine-radio input[type=radio] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--primary);
  flex-shrink: 0;
  cursor: pointer;
}
.engine-radio.is-selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.engine-radio-body { flex: 1; min-width: 0; }
.engine-radio-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.engine-radio-current {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.engine-radio-desc {
  font-size: 12.5px;
  color: var(--foreground-muted);
  margin-top: 2px;
  line-height: 1.4;
}

#defaultEngineSaveBtn:disabled { opacity: 0.45; cursor: not-allowed; }
#defaultEngineSaveBtn:not(:disabled):hover { transform: translateY(-1px); }

.engine-config-form {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.engine-config-form .field { display: flex; flex-direction: column; gap: 4px; }
.engine-config-form label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--foreground-muted);
}
.engine-config-form .form-help { font-size: 11.5px; color: var(--foreground-muted); }

/* Mobile sidebar toggle (hidden on desktop) */
.admin-sidebar-toggle {
  display: none;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.admin-sidebar-toggle:hover { background: var(--surface-alt); }
.admin-sidebar-toggle svg { width: 18px; height: 18px; }

/* Responsive: collapse sidebar on small screens */
@media (max-width: 960px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 60;
  }
  .admin-shell.sidebar-open .admin-sidebar { transform: translateX(0); }
  .admin-shell.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 55;
  }
  .admin-sidebar-toggle { display: inline-flex; }
  .admin-topbar { padding: 0 16px; }
  .admin-content { padding: 20px 16px 40px; }
  .admin-topbar-left h1 { font-size: 0.95rem; }
}
@media (max-width: 640px) {
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr {
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 0;
  }
  .admin-table tbody td {
    padding: 6px 16px;
    border: 0;
  }
  .admin-table td.actions { text-align: left; padding-top: 8px; }
  .admin-table .cell-main { display: flex; flex-direction: column; gap: 2px; }
  .admin-table .cell-main::before, .admin-table .cell-id::before, .admin-table .cell-mono::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
  }
  .filter-pills { width: 100%; overflow-x: auto; }
  .page-head { gap: 12px; }
  .page-head h1 { font-size: 1.3rem; }
  /* Field table mobile'da yatay scroll */
  .field-table-wrap { margin: 0 -16px; border-radius: 0; }
}