/* ================================================================
   buttons.css — TilbeHome Pro
   ================================================================
   TABLE OF CONTENTS:
   1. Button Base (.th-btn)
   2. Primary & Accent Variants
   3. Focus & Loading States
   4. Input States (.th-input, .th-select, .th-textarea)
   5. Card States (Fav, Add to Cart)
   6. Link States
   7. Platform Neutralization (.btn-primary)
   8. Tab / Accordion States
   ================================================================ */

/* === kaynak: components.css 2106-2213 (BOLUM 4: state controls — buttons, inputs, tabs) - Z-2 sprint === */

/* ═══════════════════════════════════════════════════════════════════
   BOLUM 4: STATE CONTROLS
   ═══════════════════════════════════════════════════════════════════ */

/* ── 4A: Button States ── */
.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--th-space-2);
  position: relative;
  box-sizing: border-box;
  padding: var(--th-space-3) var(--th-space-5);
  margin: 0;
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-semibold);
  line-height: 1;
  color: var(--th-color-text);
  background: transparent;
  border: none;
  border-radius: var(--th-btn-radius);
  cursor: pointer;
  transition: var(--th-transition-fast);
  text-decoration: none;
}

/* Primary */
.th-btn-primary { background: var(--th-btn-primary-bg); color: var(--th-btn-primary-text); }
.th-btn-primary:hover { background: var(--th-btn-primary-bg-hover); }
.th-btn-primary:active { transform: scale(0.97); }
.th-btn-primary:focus-visible { outline: 2px solid var(--th-btn-primary-bg); outline-offset: 2px; }
.th-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Accent */
.th-btn-accent { background: var(--th-btn-accent-bg); color: var(--th-btn-accent-text); }
.th-btn-accent:hover { background: var(--th-btn-accent-bg-hover); }
.th-btn-accent:active { transform: scale(0.97); }
.th-btn-accent:focus-visible { outline: 2px solid var(--th-btn-accent-bg); outline-offset: 2px; }
.th-btn-accent:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Base focus — platform nötralizasyon: .btn:focus { box-shadow: none !important } */
.th-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--th-color-primary-ring);
  outline: none;
}

/* Loading state (all buttons) */
.th-btn.loading { pointer-events: none; opacity: 0.7; }
.th-btn.loading::after {
  content: '';
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--th-radius-circle);
  animation: th-spin 0.6s linear infinite;
  margin-left: var(--th-space-2);
}

/* ── 4B: Input States ── */
.th-input,
.th-select,
.th-textarea {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--th-space-3);
  font-size: var(--th-text-base);
  font-weight: normal;
  line-height: var(--th-leading-normal);
  color: var(--th-color-text);
  background: var(--th-color-bg);
  border: 1px solid var(--th-color-border);
  border-radius: var(--th-radius-lg);
  cursor: text;
  transition: var(--th-transition-fast);
}
.th-input:hover, .th-select:hover, .th-textarea:hover { border-color: var(--th-neutral-400); }
.th-input:focus, .th-select:focus, .th-textarea:focus { border-color: var(--th-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-color-primary) 10%, transparent); outline: none; }
.th-input.error, .th-select.error, .th-textarea.error { border-color: var(--th-color-danger); }
.th-input.success, .th-select.success, .th-textarea.success { border-color: var(--th-color-success); }
.th-input:disabled, .th-select:disabled, .th-textarea:disabled { background: var(--th-color-bg-tertiary); opacity: 0.6; cursor: not-allowed; }
.th-input:read-only { background: var(--th-color-bg-tertiary); }

/* ── 4C: Card States ── */
/* Card Fav Button */
.th-card__fav { transition: var(--th-transition-fast); }
.th-card__fav:hover { transform: scale(1.15); }
.th-card__fav.active { color: var(--th-color-danger); }

/* Card Add to Cart */
.th-card__addcart.loading { pointer-events: none; }
.th-card__addcart.loading i { display: none; }
.th-card__addcart.loading::after {
  content: ''; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: var(--th-radius-circle); animation: th-spin 0.6s linear infinite;
}
.th-card__addcart.success { background: var(--th-color-success); color: var(--th-neutral-0); }

/* ── 4D: Link States ── */
a:active { opacity: 0.8; }
a:focus-visible { outline: 2px solid var(--th-color-primary); outline-offset: 2px; border-radius: var(--th-radius-xs); }

/* ── Platform Nötralizasyon: .btn-primary ── */
.btn-primary,
.btn.btn-primary {
  background-color: var(--th-color-primary) !important;
  border-color: var(--th-color-primary) !important;
  color: var(--th-neutral-0) !important;
  border-radius: var(--th-radius-md);
  font-weight: var(--th-font-semibold);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--th-color-primary-dark, var(--th-green-900)) !important;
  border-color: var(--th-color-primary-dark, var(--th-green-900)) !important;
}

/* Platform .btn-success kontrast düzeltmesi — WCAG AA */
.btn-success,
.btn.btn-success,
.btn-success:focus {
  background-color: var(--th-color-success-dark, var(--th-green-700)) !important;
  border-color: var(--th-color-success-dark, var(--th-green-700)) !important;
  color: var(--th-neutral-0) !important;
  border-radius: var(--th-radius-md);
  font-weight: var(--th-font-semibold);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-success:hover,
.btn.btn-success:hover {
  background-color: var(--th-color-success-hover, var(--th-green-800)) !important;
  border-color: var(--th-color-success-hover, var(--th-green-800)) !important;
}

/* ── 4E: Tab/Accordion States ── */
.th-tab { padding: var(--th-space-3) var(--th-space-4); border: none; background: transparent; cursor: pointer; font-weight: var(--th-font-medium); color: var(--th-color-text-muted); border-bottom: 2px solid transparent; transition: var(--th-transition-fast); }
.th-tab:hover { color: var(--th-color-text); }
.th-tab.active { color: var(--th-color-primary); border-bottom-color: var(--th-color-primary); font-weight: var(--th-font-semibold); }
.th-tab:focus-visible { outline: 2px solid var(--th-color-primary); outline-offset: -2px; }

/* ═══════════════════════════════════════════════════════════════════
   FAZ 5.1 — SEPETE EKLEME MİCRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Add to Cart: pulse on click ── */
@keyframes th-addcart-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.th-card__addcart.th-pulse,
.th-pdp__addcart.th-pulse,
.addCart.th-pulse {
  animation: th-addcart-pulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Button States: default → loading → success → default ── */
.th-card__addcart,
.th-pdp__addcart {
  position: relative;
  overflow: hidden;
  transition: background var(--th-transition-fast), color var(--th-transition-fast), transform 0.1s ease;
}

/* Loading state — spinner */
.th-card__addcart.is-loading,
.th-pdp__addcart.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.th-card__addcart.is-loading i,
.th-pdp__addcart.is-loading i {
  display: none;
}
.th-card__addcart.is-loading::after,
.th-pdp__addcart.is-loading::after {
  content: '';
  display: inline-block;
  width: var(--th-space-4);
  height: var(--th-space-4);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--th-radius-circle);
  animation: th-spin 0.6s linear infinite;
  vertical-align: middle;
}

/* Success state — checkmark */
.th-card__addcart.is-success,
.th-pdp__addcart.is-success {
  background: var(--th-color-success) !important;
  color: var(--th-neutral-0) !important;
  pointer-events: none;
}
.th-card__addcart.is-success i::before,
.th-pdp__addcart.is-success i::before {
  content: "\f00c"; /* fa-check */
}

/* ── Header Cart Badge Bounce ── */
@keyframes th-cart-badge-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  50% { transform: scale(0.9); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.th-header__cart-badge.th-bounce {
  animation: th-cart-badge-bounce 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Toast Notification: sepete eklendi ── */
.th-addcart-toast {
  position: fixed;
  bottom: var(--th-space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--th-toast-z);
  display: flex;
  align-items: center;
  gap: var(--th-space-3);
  padding: var(--th-toast-padding);
  background: var(--th-toast-bg);
  color: var(--th-toast-text);
  border-radius: var(--th-toast-radius);
  box-shadow: var(--th-toast-shadow);
  max-width: var(--th-toast-max-width);
  width: calc(100% - var(--th-space-8));
  animation: th-toast-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.th-addcart-toast.hiding {
  animation: th-toast-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.th-addcart-toast__icon {
  flex-shrink: 0;
  width: var(--th-toast-icon-size);
  height: var(--th-toast-icon-size);
  color: var(--th-color-success);
  font-size: var(--th-text-lg);
}
.th-addcart-toast__text {
  flex: 1;
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-medium);
  line-height: var(--th-leading-snug);
}
.th-addcart-toast__text strong {
  display: block;
  font-weight: var(--th-font-semibold);
  color: var(--th-neutral-0);
  margin-bottom: var(--th-space-0-5);
}
.th-addcart-toast__action {
  flex-shrink: 0;
  padding: var(--th-space-1-5) var(--th-space-3);
  background: var(--th-toast-action-color);
  color: var(--th-neutral-0);
  font-size: var(--th-toast-action-font);
  font-weight: var(--th-toast-action-weight);
  border-radius: var(--th-radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--th-transition-fast);
}
.th-addcart-toast__action:hover {
  opacity: 0.9;
  color: var(--th-neutral-0);
}

/* ── Toast progress bar ── */
.th-addcart-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--th-toast-progress-height);
  background: var(--th-toast-progress-bg);
  border-radius: 0 0 var(--th-toast-radius) var(--th-toast-radius);
  animation: th-toast-progress 3s linear forwards;
}
@keyframes th-toast-progress {
  from { width: 100%; }
  to { width: 0%; }
}

/* ── Mobile toast: bottom safe area ── */
@media (max-width: 768px) {
  .th-addcart-toast {
    bottom: calc(var(--th-space-16) + env(safe-area-inset-bottom, 0px));
    left: var(--th-space-3);
    right: var(--th-space-3);
    transform: none;
    width: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════