/**
 * BQR App - Custom Styles
 *
 * Ana stil dosyası. Komponent-bazlı stil tanımlamaları burada yapılır.
 * Variables.css'den gelen değişkenler kullanılır.
 */

/* ===== Utility Classes ===== */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--color-text-muted);
}

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* ===== Layout ===== */
body {
  padding: var(--spacing-xl) 0;
  background: var(--gradient-mesh-cool);
  min-height: 100vh;
  position: relative;
}

/* Animated gradient background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-radial-primary);
  opacity: 0.3;
  z-index: -1;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1.1);
  }
}

main.container {
  max-width: 1200px;
  position: relative;
  z-index: 1;
}

/* ===== Cards ===== */
.card {
  background: var(--gradient-card-default);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.card-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
  background: var(--gradient-card-subtle);
  padding: var(--spacing-lg);
  margin: calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl)) var(--spacing-lg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 2px solid var(--color-border);
}

.card-header h1,
.card-header h2,
.card-header h3 {
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}

/* ===== Buttons ===== */
.btn-group {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* Primary button (default Pico button) */
button:not(.secondary):not(.contrast):not(.outline):not(.success):not(.warning):not(.error),
[type="submit"]:not(.secondary):not(.contrast):not(.outline):not(.success):not(.warning):not(.error),
[type="button"]:not(.secondary):not(.contrast):not(.outline):not(.success):not(.warning):not(.error),
[role="button"]:not(.secondary):not(.contrast):not(.outline):not(.success):not(.warning):not(.error) {
  background: var(--gradient-button-primary);
  border: none;
  transition: all 0.3s ease;
}

button:not(.secondary):not(.contrast):not(.outline):not(.success):not(.warning):not(.error):hover,
[type="submit"]:not(.secondary):not(.contrast):not(.outline):not(.success):not(.warning):not(.error):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Secondary button */
button.secondary,
[type="button"].secondary,
[role="button"].secondary {
  background: var(--gradient-button-secondary);
  border: none;
  transition: all 0.3s ease;
}

button.secondary:hover,
[type="button"].secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* Contrast button */
button.contrast,
[type="button"].contrast,
[role="button"].contrast {
  background: var(--gradient-button-contrast);
  border: none;
  transition: all 0.3s ease;
}

button.contrast:hover,
[type="button"].contrast:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(51, 65, 85, 0.3);
}

/* Success button */
button.success,
[type="submit"].success,
[type="button"].success,
[role="button"].success {
  background: var(--gradient-button-success);
  border: none;
  transition: all 0.3s ease;
}

button.success:hover,
[type="submit"].success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Warning button */
button.warning,
[type="button"].warning {
  background: var(--gradient-button-warning);
  border: none;
  transition: all 0.3s ease;
}

button.warning:hover,
[type="button"].warning:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Error button */
button.error,
[type="button"].error {
  background: var(--gradient-button-error);
  border: none;
  transition: all 0.3s ease;
}

button.error:hover,
[type="button"].error:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Outline buttons - hafif gradient border */
button.outline,
[type="button"].outline,
[role="button"].outline {
  background: transparent;
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}

button.outline::before,
[type="button"].outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-button-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== QR Code Container ===== */
.qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xl);
  background: var(--gradient-neutral);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
  overflow: hidden;
  min-height: 250px;
}

.qr-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--gradient-radial-accent);
  opacity: 0.1;
  animation: qrGlow 10s ease infinite;
}

@keyframes qrGlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(10%, 10%) scale(1.1);
  }
}

.qr-placeholder {
  color: var(--color-text-muted);
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* QR code canvas/svg responsive */
.qr-container canvas,
.qr-container svg {
  max-width: 100%;
  height: auto !important;
  position: relative;
  z-index: 1;
}

/* ===== Alerts/Messages ===== */
.alert {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid;
  position: relative;
  overflow: hidden;
}

.alert::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
}

.alert-success {
  background: var(--gradient-alert-success);
  border-color: var(--color-success);
  color: var(--color-success-hover);
}

.alert-success::before {
  background: radial-gradient(circle at right, var(--color-success), transparent);
}

.alert-warning {
  background: var(--gradient-alert-warning);
  border-color: var(--color-warning);
  color: var(--color-warning-hover);
}

.alert-warning::before {
  background: radial-gradient(circle at right, var(--color-warning), transparent);
}

.alert-error {
  background: var(--gradient-alert-error);
  border-color: var(--color-error);
  color: var(--color-error-hover);
}

.alert-error::before {
  background: radial-gradient(circle at right, var(--color-error), transparent);
}

.alert-info {
  background: var(--gradient-alert-info);
  border-color: var(--color-info);
  color: var(--color-info-hover);
}

.alert-info::before {
  background: radial-gradient(circle at right, var(--color-info), transparent);
}

/* ===== Theme Toggle ===== */
/* Eski fixed pozisyon kaldırıldı - artık header içinde */

/* ===== Forms ===== */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-hint {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

/* Input focus gradient glow */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-focus),
              0 4px 12px rgba(37, 99, 235, 0.15);
}

/* ===== Footer ===== */
footer {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-secondary);
}

footer a {
  color: var(--brand-primary);
  text-decoration: none;
  display: inline-block;
}

footer a:hover {
  color: var(--brand-primary-hover);
  text-decoration: underline;
}

footer a img {
  display: block;
}

footer a:hover img {
  opacity: 1 !important;
  transform: translateY(-2px);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  body {
    padding: var(--spacing-md) 0;
  }

  .card {
    padding: var(--spacing-lg);
  }

  .btn-group {
    flex-direction: column;
  }

  .btn-group button {
    width: 100%;
  }

  /* QR container mobilde daha az padding */
  .qr-container {
    padding: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .qr-container {
    padding: var(--spacing-sm);
    min-height: 200px;
  }

  /* Mobilde card header'ı küçült */
  .card-header {
    padding: var(--spacing-md);
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-md);
  }
}