/* ==========================================================================
   Hesap: giriş, şirket oluşturma, takım sayfaları + uygulama üst bandındaki hesap alanı.
   Token'lar src/marka.css'ten (sayfalar) ya da src/stil.css'ten (üst bant) gelir; yalnız ortak adlar kullanılır.
   Kurallar (docs/marka/marka-tokenlari.md): sayfa başına TEK sarı vurgu (birincil eylem), sayılar şablon yazı,
   geri alınamaz eylem dur rengi çerçeve + satır içi onay (confirm() yok), gölge yok.
   ========================================================================== */

/* ---------- üst banttaki hesap alanı (index.html) ---------- */
.hs-hesap { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.2 "Barlow Condensed", sans-serif; }
.hs-hesap[hidden] { display: none; }
.hs-hesap a { color: var(--murekkep); text-decoration: none; border-bottom: 1px solid var(--cizgi); padding: 2px 0; }
.hs-hesap a:hover { border-bottom-color: var(--murekkep); }
.hs-hesap .hs-sirket { font-weight: 600; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-hesap button {
  border: 1px solid var(--cizgi); background: transparent; border-radius: 4px; padding: 4px 10px; min-height: 32px;
  font: 600 14px/1 "Barlow Condensed", sans-serif; color: var(--soluk); cursor: pointer;
}
.hs-hesap button:hover { color: var(--murekkep); border-color: var(--murekkep); }
@media print { .hs-hesap { display: none !important; } }

/* ---------- hesap sayfaları ---------- */
body.hs-sayfa {
  margin: 0; min-height: 100vh; background: var(--beton); color: var(--murekkep);
  font: 16px/1.5 var(--yazi-govde); font-variant-numeric: tabular-nums;
}
.hs-sayfa *, .hs-sayfa *::before, .hs-sayfa *::after { box-sizing: border-box; }
.hs-sayfa [hidden] { display: none !important; }
.hs-sayfa :focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
.hs-serit { height: 8px; background: var(--serit); }
.hs-ust {
  display: flex; align-items: center; gap: var(--bosluk-4); padding: var(--bosluk-3) var(--bosluk-5);
  background: var(--etiket); border-bottom: 1px solid var(--cizgi);
}
.hs-ust .hs-marka { color: var(--murekkep); display: inline-flex; }
.hs-ust .hs-marka svg { height: 30px; width: auto; display: block; }
.hs-ust nav { margin-left: auto; display: flex; gap: var(--bosluk-4); font: 600 16px/1 var(--yazi-tabela); }
.hs-ust nav a { color: var(--murekkep-2); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.hs-ust nav a[aria-current="page"] { color: var(--murekkep); border-bottom-color: var(--murekkep); }
/* dil seçici (TR / EN) — uygulama üst bandındaki ile aynı biçim */
.hs-dil { display: inline-flex; border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); overflow: hidden; flex: none; }
.hs-dil button {
  border: 0; background: transparent; color: var(--murekkep-2); cursor: pointer; min-height: 32px; padding: 0 10px;
  font: 600 14px/1 var(--yazi-tabela); letter-spacing: .04em;
}
.hs-dil button + button { border-left: 1px solid var(--cizgi); }
.hs-dil button[aria-pressed="true"] { background: var(--murekkep); color: var(--etiket); }

.hs-ana { max-width: 960px; margin: 0 auto; padding: var(--bosluk-6) var(--bosluk-4) var(--bosluk-7); }
.hs-ana.dar { max-width: 460px; }
.hs-kart {
  background: var(--etiket); border: 1px solid var(--cizgi); border-radius: var(--r-kart);
  padding: var(--bosluk-5); margin-bottom: var(--bosluk-5);
}
.hs-kart.vurgu { border: var(--cerceve-vurgu); }
.hs-etiket { font: 700 12px/1 var(--yazi-tabela); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); margin: 0 0 var(--bosluk-2); }
.hs-kart h1 { font: 700 34px/1.1 var(--yazi-tabela); margin: 0 0 var(--bosluk-3); }
.hs-kart h2 { font: 600 20px/1.2 var(--yazi-tabela); margin: 0 0 var(--bosluk-3); display: flex; align-items: baseline; gap: var(--bosluk-2); }
.hs-kart p { margin: 0 0 var(--bosluk-3); }
.hs-aciklama { color: var(--soluk); font-size: 14px; }
.hs-sayi { font: 700 26px/1 var(--yazi-sablon); }

.hs-form { display: grid; gap: var(--bosluk-3); }
.hs-form label { display: grid; gap: var(--bosluk-1); font: 600 14px/1.2 var(--yazi-tabela); color: var(--murekkep-2); }
.hs-form input, .hs-form select, .hs-tablo select {
  font: 16px/1.3 var(--yazi-govde); color: var(--murekkep); background: var(--beton);
  border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); padding: 10px 12px; min-height: 44px; min-width: 0;
}
.hs-form input:focus, .hs-form select:focus { border-color: var(--murekkep); }
.hs-satir { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: var(--bosluk-3); align-items: end; }

.hs-dugme {
  font: 600 16px/1 var(--yazi-tabela); border-radius: var(--r-dugme); min-height: 44px; padding: 10px 18px;
  border: 2px solid var(--murekkep); background: transparent; color: var(--murekkep); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-2);
}
.hs-dugme.ana { background: var(--sari); border-color: var(--sari); color: var(--sari-yazi); }
.hs-dugme.dur { border-color: var(--dur); color: var(--dur); }
.hs-dugme.kucuk { min-height: 34px; padding: 5px 12px; font-size: 15px; }
.hs-dugme:disabled { opacity: .45; cursor: default; }
.hs-dugmeler { display: flex; flex-wrap: wrap; gap: var(--bosluk-3); align-items: center; }
.hs-ayrac { display: flex; align-items: center; gap: var(--bosluk-3); color: var(--soluk); font-size: 13px; margin: var(--bosluk-2) 0; }
.hs-ayrac::before, .hs-ayrac::after { content: ""; flex: 1; border-top: 1px solid var(--cizgi); }

.hs-mesaj { padding: 10px 12px; border-left: 4px solid var(--cizgi); border-radius: 2px; margin: 0 0 var(--bosluk-3); font-size: 15px; }
.hs-mesaj.hata { background: var(--dur-zemin); border-color: var(--dur); }
.hs-mesaj.uyari { background: var(--dikkat-zemin); border-color: var(--dikkat); }
.hs-mesaj.onay { border-color: var(--onay); }
.hs-gelistirme {
  border: 1px dashed var(--murekkep-2); border-radius: var(--r-kucuk); padding: var(--bosluk-3); font-size: 14px;
  background: var(--etiket-2); overflow-wrap: anywhere;
}
.hs-gelistirme b { font: 700 12px/1 var(--yazi-tabela); letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: var(--bosluk-1); }
.hs-gelistirme a { color: var(--murekkep); font-family: var(--yazi-mono); font-size: 13px; }

.hs-tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.hs-tablo th { text-align: left; font: 700 12px/1 var(--yazi-tabela); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); padding: 8px; border-bottom: 1px solid var(--cizgi); background: var(--etiket-2); }
.hs-tablo td { padding: 10px 8px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.hs-tablo td.sag { text-align: right; white-space: nowrap; }
.hs-tablo select { min-height: 36px; padding: 5px 8px; }
.hs-rozet { display: inline-block; font: 600 13px/1 var(--yazi-tabela); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); padding: 4px 7px; color: var(--murekkep-2); }
.hs-onay-satir { display: inline-flex; gap: var(--bosluk-2); align-items: center; font-size: 14px; }
.hs-bos { color: var(--soluk); font-size: 14px; padding: var(--bosluk-2) 0; }

@media (max-width: 640px) {
  .hs-ust { padding: var(--bosluk-3) var(--bosluk-4); flex-wrap: wrap; }
  .hs-ana { padding: var(--bosluk-5) var(--bosluk-4) var(--bosluk-7); }
  .hs-satir { grid-template-columns: 1fr; }
  .hs-tablo thead { display: none; }
  .hs-tablo tr { display: grid; grid-template-columns: 1fr auto; gap: var(--bosluk-1) var(--bosluk-3); padding: var(--bosluk-3) 0; border-bottom: 1px solid var(--cizgi); }
  .hs-tablo td { border: 0; padding: 0; }
  .hs-tablo td.sag { grid-column: 1 / -1; text-align: left; }
}