/* ============================================================
   THLAB.studio — Components v1.0
   Sprint 01 — Foundation
   ------------------------------------------------------------
   Her bileşen yalnızca tokens.css'teki semantik token'lara bakar.
   Primitif renkler (teal-500 vs.) burada asla çağrılmaz.

   ISIMLENDIRME: BEM-lite
     .thl-{component}           blok
     .thl-{component}__{part}   eleman
     .thl-{component}--{variant} varyant

   "thl-" prefix'i mevcut site sınıflarıyla ÇAKIŞMAZ.
   ============================================================ */

@layer components {

  /* ========================================================
     TIP — Base Typography
     ======================================================== */
  .thl-h1 {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tightest);
    line-height: var(--lh-tight);
    color: var(--text-primary);
    text-wrap: balance;
  }
  .thl-h2 {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    color: var(--text-primary);
    text-wrap: balance;
  }
  .thl-h3 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    color: var(--text-primary);
  }
  .thl-h4 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    color: var(--text-primary);
  }
  .thl-body {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    text-wrap: pretty;
  }
  .thl-body-sm {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
  }
  .thl-caption {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--text-tertiary);
  }
  .thl-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--text-tertiary);
  }
  .thl-eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--text-brand);
  }

  /* ========================================================
     LINK
     ======================================================== */
  .thl-link {
    color: var(--text-brand);
    text-decoration: none;
    position: relative;
    transition: color var(--duration-fast) var(--ease-out);
  }
  .thl-link::after {
    content: '';
    position: absolute;
    inset: auto 0 -2px 0;
    height: 1px;
    background: currentColor;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform var(--duration-base) var(--ease-out);
  }
  .thl-link:hover { color: var(--brand-hover); }
  .thl-link:hover::after { transform: scaleX(1); }
  .thl-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

  /* ========================================================
     BUTTON
     ======================================================== */
  .thl-btn {
    --btn-bg: transparent;
    --btn-color: var(--text-primary);
    --btn-border: var(--border-default);
    --btn-pad-y: var(--space-3);
    --btn-pad-x: var(--space-5);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
    white-space: nowrap;
  }
  .thl-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .thl-btn:active { transform: translateY(1px); }

  .thl-btn--primary {
    --btn-bg: var(--brand);
    --btn-color: var(--text-on-brand);
    --btn-border: var(--brand);
  }
  .thl-btn--primary:hover {
    --btn-bg: var(--brand-hover);
    --btn-border: var(--brand-hover);
    box-shadow: var(--glow-brand-md);
    transform: translateY(-1px);
  }

  .thl-btn--ghost:hover {
    --btn-border: var(--border-strong);
    --btn-color: var(--text-primary);
    background: var(--surface-hover);
  }

  .thl-btn--outline {
    --btn-border: var(--border-brand);
    --btn-color: var(--text-brand);
  }
  .thl-btn--outline:hover {
    background: var(--brand-muted);
    box-shadow: var(--glow-brand-sm);
  }

  .thl-btn--sm { --btn-pad-y: var(--space-2); --btn-pad-x: var(--space-4); font-size: var(--fs-2xs); }
  .thl-btn--lg { --btn-pad-y: var(--space-4); --btn-pad-x: var(--space-6); font-size: var(--fs-sm); }

  /* ========================================================
     CARD
     ======================================================== */
  .thl-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition:
      border-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out),
      background var(--duration-base) var(--ease-out);
  }
  .thl-card--interactive {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .thl-card--interactive:hover {
    border-color: var(--border-brand);
    background: var(--surface-active);
    box-shadow: var(--elevation-2), var(--glow-brand-sm);
  }
  .thl-card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  .thl-card__eyebrow { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-tertiary); letter-spacing: var(--tracking-widest); text-transform: uppercase; margin-bottom: var(--space-3); }
  .thl-card__title   { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-primary); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); }
  .thl-card__desc    { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); }

  /* ========================================================
     BADGE / PILL / KBD
     ======================================================== */
  .thl-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 3px var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--surface-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
  }
  .thl-badge--brand   { background: var(--brand-muted); color: var(--text-brand); border-color: var(--border-brand); }
  .thl-badge--danger  { background: color-mix(in oklab, var(--signal-danger) 14%, transparent); color: var(--text-danger); border-color: color-mix(in oklab, var(--signal-danger) 30%, transparent); }
  .thl-badge--warn    { background: color-mix(in oklab, var(--signal-warn) 14%, transparent); color: var(--text-warn); border-color: color-mix(in oklab, var(--signal-warn) 30%, transparent); }
  .thl-badge--success { background: color-mix(in oklab, var(--signal-success) 14%, transparent); color: var(--text-success); border-color: color-mix(in oklab, var(--signal-success) 30%, transparent); }
  .thl-badge--appsec  { background: color-mix(in oklab, var(--product-appsec) 14%, transparent); color: var(--product-appsec); border-color: color-mix(in oklab, var(--product-appsec) 30%, transparent); }
  .thl-badge--datasec { background: color-mix(in oklab, var(--product-datasec) 14%, transparent); color: var(--product-datasec); border-color: color-mix(in oklab, var(--product-datasec) 30%, transparent); }

  .thl-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
  .thl-dot--pulse { animation: thl-pulse 2.5s ease-in-out infinite; }
  @keyframes thl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

  .thl-kbd {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    background: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-bottom-width: 2px;
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.4);
  }

  /* ========================================================
     PANEL — HUD/Glass stil (hero overlay'lar için)
     ======================================================== */
  .thl-panel {
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
  }
  .thl-panel__label {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
  }
  .thl-panel__value {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
  }

  /* ========================================================
     INPUT
     ======================================================== */
  .thl-input {
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .thl-input::placeholder { color: var(--text-quaternary); }
  .thl-input:hover { border-color: var(--border-strong); }
  .thl-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

  /* ========================================================
     DIVIDER
     ======================================================== */
  .thl-divider {
    height: 1px;
    background: var(--border-subtle);
    border: 0;
    margin: var(--space-5) 0;
  }

  /* ========================================================
     UTILITY
     ======================================================== */
  .thl-container    { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--section-x); }
  .thl-container--prose { max-width: var(--container-prose); }
  .thl-stack > * + *    { margin-top: var(--space-4); }
  .thl-stack-sm > * + * { margin-top: var(--space-2); }
  .thl-stack-lg > * + * { margin-top: var(--space-6); }

  .thl-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Erişılebilirlik: focus-visible olmayan focus'ları gizle, AMA
     klavye kullanıcısı için her zaman net ring göster */
  :focus { outline: none; }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

  /* ========================================================
     PAGE ENTRY — tüm sayfalar için ince fade-up giriş
     ======================================================== */
  @keyframes thl-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  body {
    animation: thl-page-in 480ms var(--ease-out);
  }

  @media (prefers-reduced-motion: reduce) {
    body { animation: none; }
  }

  /* ========================================================
     GLOBAL FOCUS-VISIBLE RING — tema-uyumlu, a11y
     ======================================================== */
  :where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--text-brand, #22D3EE);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 6px);
  }
}