/* ════════════════════════════════════════════════════════════════
   global-redesign.css — Anasayfa (index.html) tasarımını
   tüm sayfalara yansıtır. Tüm HTML'ler bu dosyayı yükler.
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg-base:        #fafaf9;
  --bg-elev:        #ffffff;
  --bg-subtle:      #f5f5f5;
  --text-primary:   #0a0a0a;
  --text-secondary: #404040;
  --text-tertiary:  #737373;
  --text-muted:     #a3a3a3;
  --border-base:    #e5e5e5;
  --border-subtle:  #f5f5f5;
  --accent:         #059669;
  --bg-gradient-1:  rgba(16,185,129,0.04);
  --bg-gradient-2:  rgba(99,102,241,0.03);
}
html.dark {
  --bg-base:        #0a0a0a;
  --bg-elev:        #111111;
  --bg-subtle:      #1a1a1a;
  --text-primary:   #fafafa;
  --text-secondary: #d4d4d4;
  --text-tertiary:  #a3a3a3;
  --text-muted:     #737373;
  --border-base:    #262626;
  --border-subtle:  #1f1f1f;
  --bg-gradient-1:  rgba(16,185,129,0.08);
  --bg-gradient-2:  rgba(99,102,241,0.05);
}

/* ── Tipografi ─────────────────────────────────────────────────── */
html, body, button, input, textarea, select, h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.011em;
}
h1, h2, h3 { letter-spacing: -0.02em; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Body / arkaplan ───────────────────────────────────────────── */
body {
  background-color: var(--bg-base) !important;
  background-image:
    radial-gradient(at 0% 0%,   var(--bg-gradient-1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, var(--bg-gradient-2) 0px, transparent 50%) !important;
  color: var(--text-primary) !important;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ── Slate → Ink renk uyumlaması ────────────────────────────────
   :where() ile specificity'i 0,0,0'a düşürüyoruz — peer-checked,
   hover, focus gibi VARIANT class'ları her zaman bizim override'ı
   geçer. !important KALDIRILDI — Tailwind variant'ları kazanır. */
:where(body .bg-white)         { background-color: var(--bg-elev); }
:where(body .bg-slate-50),
:where(body .bg-slate-100\/50) { background-color: var(--bg-subtle); }
:where(body .bg-slate-100)     { background-color: #ededed; }
:where(body .bg-slate-900\/40),
:where(body .bg-slate-900\/50) { background-color: rgba(10,10,10,0.4); }

:where(body .text-slate-900)   { color: var(--text-primary); }
:where(body .text-slate-800)   { color: var(--text-primary); }
:where(body .text-slate-700)   { color: var(--text-secondary); }
:where(body .text-slate-600)   { color: var(--text-secondary); }
:where(body .text-slate-500)   { color: var(--text-tertiary); }
:where(body .text-slate-400)   { color: var(--text-muted); }
:where(body .text-slate-300)   { color: #d4d4d4; }

:where(body .border-slate-100) { border-color: var(--border-subtle); }
:where(body .border-slate-200) { border-color: var(--border-base); }
:where(body .border-slate-300) { border-color: #d4d4d4; }

:where(body .hover\:bg-slate-50:hover)  { background-color: var(--bg-subtle); }
:where(body .hover\:bg-slate-100:hover) { background-color: #e5e5e5; }

/* ── Yuvarlak köşeleri sıkılaştır (2rem → 12px gibi) ───────────── */
body .rounded-3xl,
body .rounded-\[2rem\],
body .rounded-\[1\.5rem\],
body .rounded-\[1\.25rem\] { border-radius: 12px !important; }

body .rounded-2xl       { border-radius: 10px !important; }
body .rounded-xl        { border-radius: 8px  !important; }

/* ── Gölgeleri yumuşat ─────────────────────────────────────────── */
body .smooth-shadow,
body .shadow-xl,
body .shadow-2xl,
body .shadow-lg {
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 12px -4px rgba(0,0,0,0.06) !important;
}
body .shadow-md, body .shadow-sm {
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
}

/* ── Üst nav (glass) — anasayfa stili ──────────────────────────── */
body .top-nav,
body .glass-nav,
body header[class*="fixed"][class*="top-0"] {
  background: color-mix(in srgb, var(--bg-base) 80%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
          backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--border-base) !important;
}

/* ── Butonlar — sharp & minimal ────────────────────────────────── */
body button, body .btn { letter-spacing: -0.005em; }

/* NOT: Renk class'ları (bg-blue-*, text-blue-*, bg-emerald-*, vs.) ARTIK
   override edilmiyor. Çünkü Tailwind'in `peer-checked:bg-blue-50` gibi
   seçim state'lerini kırıyordu (radio buton görsel feedback'i kayboluyordu).
   Accent renkler olduğu gibi kalır — sadece slate→ink mapping yapıyoruz. */

/* ── Input ortak görünüm ───────────────────────────────────────── */
body input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="file"]),
body textarea,
body select {
  border-radius: 8px !important;
  background-color: var(--bg-elev) !important;
  border: 1px solid var(--border-base) !important;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s !important;
  color: var(--text-primary) !important;
}
body input:focus:not([type="radio"]):not([type="checkbox"]),
body textarea:focus,
body select:focus {
  outline: none !important;
  border-color: #0a0a0a !important;
  box-shadow: 0 0 0 3px rgba(10,10,10,0.06) !important;
  background-color: var(--bg-elev) !important;
}

/* ── Tablo / liste kartları ────────────────────────────────────── */
body .panel-card,
body .job-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-base);
  border-radius: 10px;
  transition: all 0.18s ease;
}
body .job-card:hover {
  border-color: var(--text-muted);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.02);
  transform: translateY(-1px);
}

/* ── Dark mode için ek uyum (layout.js da yapıyor, biz de güçlendirelim) ── */
html.dark body {
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
}
html.dark body .bg-white,
html.dark body .bg-slate-50,
html.dark body .bg-slate-100\/50 {
  background-color: var(--bg-elev) !important;
}
html.dark body .border-slate-100,
html.dark body .border-slate-200 {
  border-color: var(--border-base) !important;
}
/* Dark mode'da accent renkler korunur — peer-checked state'leri çalışsın */

/* ── Index'in özel componentlerini dışa açma ───────────────────── */
.chip {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip-accent { background: #ecfdf5; color: #047857; }
.chip-warn   { background: #fef3c7; color: #a16207; }
html.dark .chip-accent { background: rgba(16,185,129,0.15); color: #34d399; }
html.dark .chip-warn   { background: rgba(251,191,36,0.15); color: #fcd34d; }

/* ── Scrollbar — slim ─────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-base); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Genel form labelları daha temiz ──────────────────────────── */
body label {
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Renk uyumu bozulmasın diye accent renklerini KORU ────────── */
/* Emerald (yeşil), amber (sarı), rose (kırmızı), violet (mor) Tailwind class'ları olduğu gibi kalır */