@layer base, components, utilities;

@layer components {
  /* 1. Temel Card Yapısı */
  .card {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--surface);
    color: var(--on-surface);
    border-radius: var(--radius-lg);
    border: var(--border-thin) solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: var(--transition);
  }

  /* 2. Kart Bölümleri */
  .card-header {
    padding:var(--spacing-4) var(--spacing-5);
    border-bottom: var(--border-thin) solid rgba(0, 0, 0, 0.05);
    font-weight: var(--font-weight-bold);
  }

  .card-body {
    flex: 1 1 auto;
    padding: var(--spacing-2) var(--spacing-5);
  }

  .card-footer {
    padding: var(--spacing-4) var(--spacing-5);
    background-color: rgba(0, 0, 0, 0.02);
    border-top: var(--border-thin) solid rgba(0, 0, 0, 0.05);
  }

  /* 3. Kart Görseli (Image) */
  .card-img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* 4. Varyasyonlar ve Efektler */
  
  /* Gölgeli Kart (Shadow) */
  .card-shadow {
    box-shadow: var(--shadow-light);
  }
  
  .card-shadow:hover {
    box-shadow: var(--shadow-normal);
    transform: translateY(-4px);
  }

  /* Kenarlıksız / Sade Kart */
  .card-flush {
    border: none;
    box-shadow: none;
  }

  .card-primary { border-top: var(--border-thick) solid var(--primary); }
  .card-success { border-top: var(--border-thick) solid var(--success); }
  .card-danger  { border-top: var(--border-thick) solid var(--danger); }
  .card-warning { border-top: var(--border-thick) solid var(--warning); }
  .card-info    { border-top: var(--border-thick) solid var(--info); }


  [data-theme="dark"] .card {
    background-color: var(--surface); 
    color: var(--on-surface);
  }

  [data-theme="dark"] .card-primary { border-top-color: var(--primary); }
  [data-theme="dark"] .card-success { border-top-color: var(--success); }
  [data-theme="dark"] .card-danger  { border-top-color: var(--danger); }
  [data-theme="dark"] .card-warning { border-top-color: var(--warning); }
  [data-theme="dark"] .card-info    { border-top-color: var(--info); }
}