/* ═══════════════════════════════════════════════════════════
   TEKERLEMELER — Harfe Göre Tekerleme Galerisi
   ═══════════════════════════════════════════════════════════ */

/* ─── Alfabe Grid ────────────────────────────────────── */
.tkr-alphabet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-2xl);
}

.tkr-letter {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  position: relative;
  box-shadow: var(--shadow-xs);
}

.tkr-letter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.tkr-letter--active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: scale(1.08);
}

.tkr-letter--active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-white);
}

.tkr-letter__count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--fw-bold);
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.tkr-letter--active .tkr-letter__count {
  background: var(--color-white);
  color: var(--color-primary);
}

/* ─── Filter Bar ─────────────────────────────────────── */
.tkr-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  gap: var(--space-md);
  flex-wrap: wrap;
}

.tkr-filter-bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.tkr-active-letter {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tkr-active-letter__char {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
}

.tkr-active-letter__label {
  font-size: var(--fs-small);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-weight: var(--fw-semibold);
}

.tkr-active-letter__count {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

/* ─── Difficulty Pills ───────────────────────────────── */
.tkr-diff-pills {
  display: flex;
  gap: var(--space-sm);
}

.tkr-diff-pill {
  padding: 8px 16px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tkr-diff-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tkr-diff-pill--active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.tkr-diff-pill--kolay.tkr-diff-pill--active {
  background: #2E7D32;
  border-color: #2E7D32;
}

.tkr-diff-pill--orta.tkr-diff-pill--active {
  background: #E65100;
  border-color: #E65100;
}

.tkr-diff-pill--zor.tkr-diff-pill--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ─── Tekerleme Cards ────────────────────────────────── */
.tkr-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  min-height: 200px;
}

.tkr-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-normal);
  animation: tkrCardIn 0.35s ease;
  position: relative;
  overflow: hidden;
}

.tkr-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.tkr-card--kolay::before { background: #2E7D32; }
.tkr-card--orta::before  { background: #E65100; }
.tkr-card--zor::before   { background: var(--color-primary); }

.tkr-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

@keyframes tkrCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tkr-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  gap: var(--space-sm);
}

.tkr-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  flex-shrink: 0;
}

.tkr-card__badge--kolay {
  background: #E8F5E9;
  color: #2E7D32;
}

.tkr-card__badge--orta {
  background: #FFF3E0;
  color: #E65100;
}

.tkr-card__badge--zor {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.tkr-card__number {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-text-tertiary);
}

.tkr-card__text {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  line-height: var(--lh-relaxed);
  cursor: text;
}

.tkr-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.tkr-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-tertiary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tkr-action-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.tkr-action-btn--copied {
  color: #2E7D32;
  border-color: #2E7D32;
  background: #E8F5E9;
}

/* ─── Empty State ────────────────────────────────────── */
.tkr-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--color-text-tertiary);
}

.tkr-empty__icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.tkr-empty__text {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
}

/* ─── Stats Bar ──────────────────────────────────────── */
.tkr-stats-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-3xl);
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.tkr-stat {
  text-align: center;
}

.tkr-stat__value {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
}

.tkr-stat__label {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-weight: var(--fw-semibold);
  margin-top: 4px;
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .tkr-letter {
    width: 42px;
    height: 42px;
    font-size: var(--fs-body);
  }

  .tkr-alphabet {
    gap: 6px;
  }

  .tkr-filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .tkr-stats-bar {
    flex-wrap: wrap;
    gap: var(--space-xl);
  }

  .tkr-diff-pills {
    flex-wrap: wrap;
  }

  .tkr-active-letter__char {
    font-size: var(--fs-h1);
  }
}