/* ==========================================================================
   Konciv Login Page Styles
   Modern centered card with gradient background.
   ========================================================================== */

.k-login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e8f6f8 50%, #f1f5f9 100%);
  padding: var(--space-4);
}

.k-login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
  padding: var(--space-10) var(--space-8);
  animation: k-fade-in 0.4s ease;
}

.k-login-logo {
  margin-bottom: var(--space-8);
}

.k-login-logo img {
  width: 140px;
  height: auto;
}

.k-login-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  text-align: center;
}

.k-login-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  text-align: center;
}

.k-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semi);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  min-height: 48px;
}

.k-login-btn:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: #fff;
  text-decoration: none;
}

.k-login-btn:active {
  transform: translateY(0);
}

.k-login-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.k-login-footer {
  margin-top: var(--space-6);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  text-align: center;
}

@media (max-width: 768px) {
  .k-login-card {
    padding: var(--space-8) var(--space-6);
    max-width: 360px;
  }

  .k-login-title {
    font-size: var(--font-size-xl);
  }

  .k-login-subtitle {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
  }

  .k-login-btn {
    font-size: var(--font-size-base);
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
  }
}

@media (max-width: 480px) {
  .k-login-card {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-xl);
  }

  .k-login-logo img {
    width: 100px;
  }

  .k-login-logo {
    margin-bottom: var(--space-6);
  }
}