/* =====================================================================
   Bileşenler: kart, buton, rozet, uyarı, tablo, form, ilerleme (§8.3)
   Açık tema
   ===================================================================== */

/* Kart — beyaz, ince kenarlık + yumuşak gölge */
.kart {
  background: var(--zemin-1);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--golge-kucuk);
}

/* Butonlar — ana eylem dolu, ikincil kenarlıklı, yıkıcı kenarlıklı (§8.3) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-family: var(--f-baslik); font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; }

.btn-birincil { background: var(--vurgu); color: var(--vurgu-metin); box-shadow: 0 2px 8px rgba(10,158,123,.28); }
.btn-birincil:hover { background: var(--vurgu-koyu); }

.btn-ikincil { background: var(--zemin-1); color: var(--metin); border-color: var(--cizgi-parlak); }
.btn-ikincil:hover { border-color: var(--vurgu); color: var(--vurgu-koyu); }

.btn-yikici { background: transparent; color: var(--acil); border-color: var(--acil); }
.btn-yikici:hover { background: rgba(222, 59, 78, .08); }

.btn-kucuk { padding: 5px 12px; font-size: .8rem; }
.btn-blok { width: 100%; }
.btn:disabled { background: var(--notr); color: #fff; cursor: not-allowed; box-shadow: none; }

/* Durum rozeti — kenarlık + %10 opak dolgu + nokta (§8.3) */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
}
.rozet::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.rozet-tamamlandi { color: var(--vurgu-koyu);  background: rgba(10, 158, 123, .10); }
.rozet-devam      { color: var(--bilgi);  background: rgba(14, 143, 208, .10); }
.rozet-yapilmadi  { color: var(--metin-silik);   background: rgba(133, 147, 171, .12); }
.rozet-acil       { color: var(--acil);   background: rgba(222, 59, 78, .09); }
.rozet-uyari      { color: var(--uyari);  background: rgba(217, 119, 6, .10); }
.rozet-bilgi      { color: var(--bilgi);  background: rgba(14, 143, 208, .10); }
.rozet-muaf {
  color: var(--metin-silik);
  background: repeating-linear-gradient(45deg, transparent, transparent 4px,
              rgba(133, 147, 171, .14) 4px, rgba(133, 147, 171, .14) 8px);
}

/* Uyarı kutuları */
.uyari {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  margin-bottom: 16px;
}
.uyari-hata   { background: rgba(222, 59, 78, .07);   border: 1px solid rgba(222, 59, 78, .4);   color: var(--metin); }
.uyari-basari { background: rgba(10, 158, 123, .07);  border: 1px solid rgba(10, 158, 123, .4);  color: var(--metin); }
.uyari-bilgi  { background: rgba(14, 143, 208, .06);  border: 1px solid rgba(14, 143, 208, .35); color: var(--metin); }

/* İlerleme çubuğu — 6px, sağ uçta parlak vurgu (§8.3) */
.ilerleme {
  height: 6px; border-radius: 3px;
  background: var(--zemin-2);
  overflow: hidden;
}
.ilerleme-dolgu {
  height: 100%; border-radius: 3px;
  background: var(--vurgu);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .6);
  transition: width .6s ease;
}

/* Tablo — zebra yok, satır ayracı, hover (§8.3) */
.tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tablo th {
  text-align: left; padding: 11px 12px;
  color: var(--metin-silik); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--cizgi-parlak);
}
.tablo td { padding: 11px 12px; border-bottom: 1px solid var(--cizgi); }
.tablo tbody tr:hover { background: var(--zemin-2); }

/* Form elemanları */
.form-alan { margin-bottom: 14px; }
.form-alan label {
  display: block; font-size: .85rem; color: var(--metin-soluk); font-weight: 600;
  margin-bottom: 5px;
}
.form-alan input, .form-alan select, .form-alan textarea {
  width: 100%; padding: 10px 12px;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--r-sm); color: var(--metin);
  font-family: var(--f-govde); font-size: .95rem;
  transition: border-color .12s ease, background .12s ease;
}
.form-alan input:focus, .form-alan select:focus, .form-alan textarea:focus {
  background: var(--zemin-1); border-color: var(--vurgu);
}
.form-alan .yardim { color: var(--metin-silik); font-size: .78rem; margin-top: 4px; }

/* Veri (mono) metni: kod, tutanak no, yüzde */
.veri { font-family: var(--f-veri); }

/* Boş durum — süs yok, tek mesaj + tek eylem (§8.3) */
.bos-durum {
  text-align: center; padding: 48px 24px;
  color: var(--metin-soluk);
}
.bos-durum .btn { margin-top: 16px; }