/* ============================================================
   Tercüme Otomasyon Sistemi - Modern Tasarım
   Renk Paleti: Lacivert (#0d2137) + Altın Aksanı (#b8912a)
   ============================================================ */

:root {
  --renk-lacivert:     #0d2137;
  --renk-lacivert-ac:  #152e4d;
  --renk-altin:        #b8912a;
  --renk-altin-ac:     #d4a83a;
  --renk-gri-kenar:    #e2e8f0;
  --renk-gri-zemin:    #f1f5f9;
  --renk-beyaz:        #ffffff;
  --renk-metin:        #1a2332;
  --renk-metin-ac:     #4b5e72;
  --yaricap:           10px;
  --yaricap-sm:        6px;
  --yaricap-lg:        14px;
  --golge:             0 1px 3px rgba(13,33,55,.06), 0 4px 16px rgba(13,33,55,.07);
  --golge-buyuk:       0 8px 30px rgba(13,33,55,.13);
  --golge-kart:        0 2px 8px rgba(13,33,55,.07), 0 1px 2px rgba(13,33,55,.05);
  --gecis:             all .18s ease;
}

/* ─── Temel ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  color: var(--renk-metin);
  background: var(--renk-gri-zemin);
  font-size: 14px;
  line-height: 1.6;
}

/* ─── Form Elemanları ──────────────────────────────────────── */
.form-input {
  display: block;
  width: 100%;
  padding: 9px 13px;
  border: 1.5px solid #d0d8e4;
  border-radius: var(--yaricap);
  font-size: 14px;
  color: var(--renk-metin);
  background: #fff;
  transition: var(--gecis);
  outline: none;
}
.form-input:focus {
  border-color: var(--renk-lacivert);
  box-shadow: 0 0 0 3px rgba(13,33,55,.1);
}
.form-input:disabled, .form-input[readonly] {
  background: #f0f3f6;
  color: #8a9bb0;
}
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234b5e72' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--renk-metin);
  margin-bottom: 6px;
  letter-spacing: .01em;
}

/* ─── Butonlar ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--renk-lacivert);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--yaricap);
  cursor: pointer;
  text-decoration: none;
  transition: var(--gecis);
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(13,33,55,.2);
}
.btn-primary:hover  { background: #1e3a58; box-shadow: 0 4px 14px rgba(13,33,55,.28); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(13,33,55,.2); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  background: #fff;
  color: var(--renk-lacivert);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid #c5cdd8;
  border-radius: var(--yaricap);
  cursor: pointer;
  text-decoration: none;
  transition: var(--gecis);
}
.btn-secondary:hover { background: #f4f7fb; border-color: var(--renk-lacivert); box-shadow: 0 2px 8px rgba(13,33,55,.1); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px;
  background: #dc2626; color: #fff;
  font-size: 13px; font-weight: 600;
  border: none; border-radius: var(--yaricap);
  cursor: pointer; text-decoration: none;
  transition: var(--gecis);
  box-shadow: 0 2px 8px rgba(192,57,43,.25);
}
.btn-danger:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(192,57,43,.35); }

.btn-success {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px;
  background: #16a34a; color: #fff;
  font-size: 13px; font-weight: 600;
  border: none; border-radius: var(--yaricap);
  cursor: pointer; text-decoration: none;
  transition: var(--gecis);
  box-shadow: 0 2px 8px rgba(22,163,74,.25);
}
.btn-success:hover { background: #15803d; transform: translateY(-1px); }

.btn-altin {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 26px;
  background: var(--renk-altin); color: #fff;
  font-size: 14px; font-weight: 700;
  border: none; border-radius: var(--yaricap);
  cursor: pointer; text-decoration: none;
  transition: var(--gecis);
  letter-spacing: .03em;
  box-shadow: 0 2px 10px rgba(184,145,42,.3);
}
.btn-altin:hover { background: var(--renk-altin-ac); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(184,145,42,.4); }

/* ─── Kart ─────────────────────────────────────────────────── */
.kart {
  background: #fff;
  border: 1px solid var(--renk-gri-kenar);
  border-radius: var(--yaricap-lg);
  padding: 24px;
  box-shadow: var(--golge-kart);
}

/* ─── Panel Kart (başlıklı) ────────────────────────────────── */
.panel-kart {
  background: #fff;
  border: 1px solid var(--renk-gri-kenar);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-kart);
  overflow: hidden;
  margin-bottom: 16px;
}
.panel-kart-bas {
  padding: 13px 20px;
  background: #f8fafc;
  border-bottom: 1px solid var(--renk-gri-kenar);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--renk-lacivert);
}
.panel-kart-bas.koyu {
  background: var(--renk-lacivert);
  border-bottom-color: #1e3a55;
  color: #fff;
}
.panel-kart-ici {
  padding: 18px 20px;
}

/* ─── Tablo ────────────────────────────────────────────────── */
.tablo {
  width: 100%;
  border-collapse: collapse;
}
.tablo thead tr {
  background: #f8fafc;
  border-bottom: 2px solid var(--renk-gri-kenar);
}
.tablo th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.tablo td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--renk-metin);
  border-bottom: 1px solid #f1f5f9;
}
.tablo tbody tr:hover td { background: #f8fafc; }
.tablo tbody tr:last-child td { border-bottom: none; }

/* ─── Rozet / Etiket ───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ─── Stat Kart ─────────────────────────────────────────────── */
.stat-kart {
  background: #fff;
  border: 1px solid var(--renk-gri-kenar);
  border-top: 3px solid var(--renk-lacivert);
  border-radius: var(--yaricap-lg);
  padding: 18px 20px;
  box-shadow: var(--golge-kart);
  transition: var(--gecis);
}
.stat-kart:hover { box-shadow: var(--golge-buyuk); transform: translateY(-2px); }

/* ─── Upload ───────────────────────────────────────────────── */
.upload-area {
  border: 2px dashed #c8d3df;
  border-radius: var(--yaricap-lg);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--gecis);
  background: #fafbfc;
}
.upload-area:hover, .upload-area.dragover {
  border-color: var(--renk-lacivert);
  background: #f0f4f8;
}

/* ─── Animasyon ────────────────────────────────────────────── */
.fade-in { animation: fadeIn .25s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Spinner ──────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Flash Mesaj ──────────────────────────────────────────── */
.flash-bilgi   { background:#eff6ff; border-left:4px solid #3b82f6; color:#1e40af; border-radius: var(--yaricap); }
.flash-basari  { background:#f0fdf4; border-left:4px solid #22c55e; color:#15803d; border-radius: var(--yaricap); }
.flash-hata    { background:#fef2f2; border-left:4px solid #ef4444; color:#991b1b; border-radius: var(--yaricap); }
.flash-uyari   { background:#fffbeb; border-left:4px solid #f59e0b; color:#92400e; border-radius: var(--yaricap); }

/* ─── Sayfalama ────────────────────────────────────────────── */
.sayfalama { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 28px; }
.sayfalama a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--yaricap);
  font-size: 13px; color: var(--renk-metin);
  text-decoration: none; background: #fff;
  transition: var(--gecis);
  font-weight: 500;
}
.sayfalama a:hover   { background: #f1f5f9; border-color: #94a3b8; }
.sayfalama a.aktif   { background: var(--renk-lacivert); border-color: var(--renk-lacivert); color: #fff; box-shadow: 0 2px 8px rgba(13,33,55,.25); }

/* ─── Responsive Tablo ─────────────────────────────────────── */
@media (max-width: 640px) {
  .tablo-mobil thead { display: none; }
  .tablo-mobil tr { display: block; margin-bottom: 12px; border: 1px solid #e2e8f0; border-radius: var(--yaricap); }
  .tablo-mobil td { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; }
  .tablo-mobil td::before { content: attr(data-label); font-weight: 600; color: #64748b; }
}

/* ─── Kurumsal Bölüm Başlığı ───────────────────────────────── */
.bolum-baslik {
  font-size: 22px;
  font-weight: 700;
  color: var(--renk-lacivert);
  letter-spacing: -.01em;
  border-left: 4px solid var(--renk-altin);
  padding-left: 14px;
  margin-bottom: 6px;
  border-radius: 0 0 0 0;
}
.bolum-alt {
  font-size: 13px;
  color: var(--renk-metin-ac);
  padding-left: 18px;
}

/* ─── Durum Renkleri (pill badge) ──────────────────────────── */
.durum-beklemede         { background:#f1f5f9; color:#475569; border:1.5px solid #cbd5e1; }
.durum-odeme_bekleniyor  { background:#fffbeb; color:#92400e; border:1.5px solid #fcd34d; }
.durum-odeme_onaylandi   { background:#eff6ff; color:#1e40af; border:1.5px solid #93c5fd; }
.durum-isleme_alindi     { background:#eef2ff; color:#3730a3; border:1.5px solid #a5b4fc; }
.durum-tercume_yapiliyor { background:#faf5ff; color:#6d28d9; border:1.5px solid #c4b5fd; }
.durum-tamamlandi        { background:#f0fdf4; color:#15803d; border:1.5px solid #86efac; }
.durum-iptal             { background:#fef2f2; color:#991b1b; border:1.5px solid #fca5a5; }
.durum-aktif             { background:#f0fdf4; color:#15803d; border:1.5px solid #86efac; }
.durum-pasif             { background:#f1f5f9; color:#475569; border:1.5px solid #cbd5e1; }
.durum-engelli           { background:#fef2f2; color:#991b1b; border:1.5px solid #fca5a5; }

/* ─── Global Border Radius Override ───────────────────────── */
/* Tüm sayfalardan gelen inline border-radius:2px değerlerini geçersiz kılar */
a.btn-primary, a.btn-secondary, a.btn-danger, a.btn-success, a.btn-altin,
button.btn-primary, button.btn-secondary, button.btn-danger, button.btn-success {
  border-radius: var(--yaricap) !important;
}

/* Admin ve kullanıcı sayfalarındaki inline stil butonlar */
button[style*="border-radius:2px"] { border-radius: var(--yaricap) !important; }
a[style*="border-radius:2px"]      { border-radius: var(--yaricap) !important; }
input[style*="border-radius:2px"]  { border-radius: var(--yaricap) !important; }
select[style*="border-radius:2px"] { border-radius: var(--yaricap) !important; }

/* Kart wrapper divleri */
div.panel-kart,
div[style*="border-radius:2px"][style*="background:#fff"],
div[style*="border-radius:2px"][style*="background:white"] {
  border-radius: var(--yaricap-lg) !important;
}

/* ─── İkon Buton ───────────────────────────────────────────── */
.ikon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--yaricap);
  border: 1.5px solid var(--renk-gri-kenar);
  background: #fff;
  color: var(--renk-lacivert);
  text-decoration: none;
  transition: var(--gecis);
  cursor: pointer;
  font-size: 12px;
}
.ikon-btn:hover { background: var(--renk-lacivert); color: #fff; border-color: var(--renk-lacivert); transform: translateY(-1px); }
.ikon-btn.tehlikeli { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }
.ikon-btn.tehlikeli:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ─── Bilgi Satırı ─────────────────────────────────────────── */
.bilgi-satir {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1.5px solid var(--renk-gri-kenar);
  border-radius: var(--yaricap);
}
.bilgi-satir .etiket { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.bilgi-satir .deger  { font-size: 14px; font-weight: 700; color: var(--renk-lacivert); }

/* ─── Uyarı Kutuları ───────────────────────────────────────── */
.uyari-altin {
  background: #fffbeb;
  border: 1.5px solid #fcd34d;
  border-left: 4px solid var(--renk-altin);
  border-radius: var(--yaricap);
  padding: 12px 16px;
}
.uyari-kirmizi {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: var(--yaricap);
  padding: 12px 16px;
}
.uyari-yesil {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-left: 4px solid #22c55e;
  border-radius: var(--yaricap);
  padding: 12px 16px;
}