/* ===================================================
   assets/css/style.css
   Tailwind temel sinifları yetersiz kaldigi yerler icin
   ek stiller. Acik tema varsayilan, .dark sinifi ile
   karanlik temaya gecilir.
   =================================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}
.dark * {
  scrollbar-color: #334155 #0f172a;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Genel animasyonlar --- */
a, button {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}
button:active, a:active {
  transform: scale(0.97);
}

/* --- Durum etiketleri (badge) --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.badge-indigo  { background: rgba(99,102,241,.10);  color: #4f46e5; border-color: rgba(99,102,241,.20); }
.badge-amber   { background: rgba(251,191,36,.12);  color: #b45309; border-color: rgba(251,191,36,.25); }
.badge-emerald { background: rgba(16,185,129,.10);  color: #047857; border-color: rgba(16,185,129,.20); }
.badge-slate   { background: rgba(100,116,139,.10); color: #475569; border-color: rgba(100,116,139,.20); }
.badge-rose    { background: rgba(244,63,94,.10);   color: #be123c; border-color: rgba(244,63,94,.20); }

.dark .badge-indigo  { background: rgba(99,102,241,.10);  color: #a5b4fc; border-color: rgba(99,102,241,.2); }
.dark .badge-amber   { background: rgba(251,191,36,.10);  color: #fcd34d; border-color: rgba(251,191,36,.2); }
.dark .badge-emerald { background: rgba(16,185,129,.10);  color: #6ee7b7; border-color: rgba(16,185,129,.2); }
.dark .badge-slate   { background: rgba(100,116,139,.15); color: #94a3b8; border-color: rgba(100,116,139,.25); }
.dark .badge-rose    { background: rgba(244,63,94,.10);   color: #fda4af; border-color: rgba(244,63,94,.2); }

/* --- Ilerleme cubugu --- */
.progress-track {
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.dark .progress-track {
  background: #1e293b;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #818cf8, #6366f1);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* --- Gizli kimlik bilgisi (VDS) blur efekti --- */
.cred-value {
  filter: blur(5px);
  transition: filter .2s ease;
  user-select: none;
  font-family: var(--font-mono, monospace);
}
.cred-value.revealed {
  filter: none;
  user-select: text;
}
.cred-toggle {
  cursor: pointer;
  color: #94a3b8;
  transition: color .15s ease, transform .15s ease;
}
.cred-toggle:hover {
  color: #475569;
  transform: scale(1.1);
}
.dark .cred-toggle:hover {
  color: #cbd5e1;
}
.cred-toggle.active {
  color: #6366f1;
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  animation: fadeIn .2s ease-out both;
}
.dark .modal-overlay {
  background: rgba(2,6,23,.7);
}
.modal-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  animation: popIn .25s cubic-bezier(.34,1.56,.64,1) both;
}
.dark .modal-box {
  background: #0f172a;
  border-color: #1e293b;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* --- Form elemanlari --- */
input, select, textarea {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #1e293b;
  width: 100%;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
.dark input, .dark select, .dark textarea {
  background: #0f172a;
  border-color: #1e293b;
  color: #e2e8f0;
}
input:focus, select:focus, textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
input::placeholder, textarea::placeholder {
  color: #94a3b8;
}
.dark input::placeholder, .dark textarea::placeholder {
  color: #475569;
}
label {
  font-size: 13px;
  color: #64748b;
  display: block;
  margin-bottom: 4px;
}
.dark label {
  color: #94a3b8;
}
input[type="file"] {
  padding: 6px 10px;
  cursor: pointer;
}
input[type="checkbox"] {
  cursor: pointer;
}

/* --- Genel tablo --- */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.data-table th {
  text-align: left;
  color: #94a3b8;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 10px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.dark table.data-table th {
  color: #64748b;
  border-bottom-color: #1e293b;
}
table.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(226,232,240,.8);
  vertical-align: middle;
}
.dark table.data-table td {
  border-bottom-color: rgba(30,41,59,.6);
}
table.data-table tr:last-child td {
  border-bottom: none;
}
table.data-table tbody tr {
  transition: background-color .15s ease;
}
table.data-table tbody tr:hover {
  background: rgba(99,102,241,.05);
}
.dark table.data-table tbody tr:hover {
  background: rgba(30,41,59,.35);
}

/* --- Kart hover efekti --- */
.card-hover {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(99,102,241,.25);
}