/* Sense Proje Takip · giriş, kurulum, şifre belirleme (ortalı tek kart, kabuksuz) + hesabım ve ekip (kabuk içinde tam ekran pano)
   Yalnızca jeton kullanır; sabit renk yok. Sınıf öneki: h- */

a { color: inherit; }

/* ================================================================ Giriş, kurulum, şifre belirleme: ortalı tek kart */
.h-giris { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--a-5) var(--a-4); }
.h-giris-kart {
  width: 100%; max-width: 26rem; display: grid; gap: var(--a-5);
  padding: var(--a-6) var(--a-5); background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--kose-kart);
}
.h-giris-bas { display: grid; gap: var(--a-3); }
.h-giris-bas h1 { font-size: var(--yazi-buyuk); }
.h-giris-bas p { margin: 0; color: var(--metin-2); font-size: var(--yazi-govde); }
.h-form { display: grid; gap: var(--a-4); margin: 0; }
.h-form .b-dugme { width: 100%; min-height: 44px; }
.h-giris-ileti { display: grid; gap: var(--a-3); }
.h-giris-ileti:empty { display: none; }
.h-giris-ileti .b-serit { margin: 0; }
.h-gelistirme { font-size: var(--yazi-kucuk); color: var(--metin-2); overflow-wrap: anywhere; }
.h-gelistirme a { color: var(--metin); font-weight: var(--agirlik-orta); }
.h-yeniden { justify-self: start; }
.h-alt-not { margin: 0; font-size: var(--yazi-kucuk); color: var(--metin-2); text-align: center; }
.h-sola { text-align: left; }
.h-yardim { margin: 0; padding-top: var(--a-4); border-top: 1px solid var(--cizgi); font-size: var(--yazi-kucuk); color: var(--metin-2); text-align: center; }
.h-giris-govde { display: grid; gap: var(--a-4); min-width: 0; }
.h-giris-govde > .b-serit { margin: 0; }
.h-tam { width: 100%; min-height: 44px; }
.h-hesap-kim { display: grid; gap: 2px; padding: var(--a-3) var(--a-4); border-radius: var(--kose-kontrol); background: var(--yuzey-2); min-width: 0; }
.h-hesap-kim-etiket { font-size: var(--yazi-kucuk); color: var(--metin-2); }
.h-hesap-kim-deger { font-weight: var(--agirlik-orta); overflow-wrap: anywhere; }
@media (max-width: 480px) { .h-giris-kart { padding: var(--a-5) var(--a-4); } }

/* -- Şifre alanı: göster/gizle + güç göstergesi (giris.js window.Sifre). Güç renksiz: dolu çubuk sayısı + yazı -- */
.h-sifre { position: relative; min-width: 0; }
.h-sifre .b-girdi { padding-right: 5.5rem; }
.h-sifre-goster {
  position: absolute; top: 50%; right: var(--a-1); transform: translateY(-50%);
  min-height: 36px; min-width: 4.5rem; padding: 0 var(--a-3); border: 0; border-radius: var(--kose-kontrol);
  background: transparent; color: var(--metin-2); font: inherit; font-size: var(--yazi-kucuk); font-weight: var(--agirlik-orta); cursor: pointer;
}
.h-sifre-goster:hover { background: var(--yuzey-2); color: var(--metin); }
.h-sifre-goster:focus-visible { outline-offset: 0; }
.h-guc { display: flex; align-items: center; gap: var(--a-2); margin: 0; font-size: var(--yazi-kucuk); color: var(--metin-2); }
.h-guc b { color: var(--metin); font-weight: var(--agirlik-orta); }
.h-guc-cubuk { display: inline-grid; grid-template-columns: repeat(3, 1.75rem); gap: 3px; flex: none; }
.h-guc-cubuk i { height: 2px; background: var(--cizgi-2); }
.h-guc[data-seviye="1"] .h-guc-cubuk i:nth-child(-n+1),
.h-guc[data-seviye="2"] .h-guc-cubuk i:nth-child(-n+2),
.h-guc[data-seviye="3"] .h-guc-cubuk i { background: var(--metin); }

/* ================================================================ Hesabım ve Ekip: kabuk içinde tam ekran pano
   ekip: üstte "Kişi ekle" (içerik boyu), altta tam genişlik ekip tablosu (panel içinde kayar); hesap: Kimlik | Şifre; tek: tek panel */
.h-pano[data-duzen="ekip"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.h-pano[data-duzen="hesap"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: minmax(0, 1fr); }
/* Tercihler varsa (zorunlu şifre değişiminde yok): sol sütunda Kimlik (içerik boyu) üstte, Tercihler altta; Şifre sağda tam boy */
.h-pano[data-duzen="hesap"]:has(> #tercihler) { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "kimlik sifre" "tercih sifre"; }
.h-pano[data-duzen="tek"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.h-pano .k-panel-govde { padding-top: var(--a-2); }
.h-pano .b-bos { height: 100%; }
.h-pano .h-form { max-width: 28rem; }
.h-pano .h-form .b-dugme[type="submit"] { width: auto; justify-self: start; padding-inline: var(--a-5); }
#durum:empty { display: none; }
#durum .b-serit { margin: 0 0 var(--a-4); max-width: 28rem; }

/* Kimlik */
.h-profil { display: grid; gap: var(--a-3); margin: 0 0 var(--a-4); }
.h-profil div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--a-3); align-items: baseline; }
.h-profil dt { font-size: var(--yazi-kucuk); color: var(--metin-2); }
.h-profil dd { margin: 0; font-weight: var(--agirlik-orta); overflow-wrap: anywhere; }
/* Güncellemeler ve geri bildirim bağlantısı (çalışan Ayarlar'ı görmez; buradan ulaşır) */
.h-guncelleme { margin-top: var(--a-3); }

/* Tercihler: iki seçim parçası (Bilesen.secim) + kayıt iletisi; seçince kaydedilir */
.h-tercih { display: grid; align-content: start; gap: var(--a-4); margin: 0; max-width: 28rem; }
.h-tercih .b-alan-hata:empty { display: none; }
.h-tercih-ileti { margin: 0; min-height: 1lh; font-size: var(--yazi-kucuk); color: var(--metin-2); }
.h-tercih-ileti[data-hata] { color: var(--kirmizi); }

/* Ekip: kişi ekle formu tek satır */
.h-ekle { margin: 0; }
.h-ekle-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.8fr) auto; gap: var(--a-4); align-items: end; }
.h-ekle-izgara .b-dugme { min-height: 44px; }
.h-sec { cursor: pointer; }
.h-form-ileti { margin: 0; font-size: var(--yazi-kucuk); font-weight: var(--agirlik-orta); color: var(--metin); }
.h-form-ileti:empty { display: none; }
.h-ekle + .h-form-ileti { margin-top: var(--a-3); }

/* Ekip tablosu: tam genişlik, başlık satırı panel içinde sabit */
.h-tablo { width: 100%; border-collapse: collapse; font-size: var(--yazi-kucuk); }
.h-tablo th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: var(--agirlik-orta); color: var(--metin-2);
  padding: var(--a-2) var(--a-3); border-bottom: 1px solid var(--cizgi); background: var(--yuzey);
}
.h-tablo td { padding: var(--a-3); border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.h-tablo tr:last-child td { border-bottom: 0; }
.h-tablo th:first-child, .h-tablo td:first-child { padding-left: 0; }
.h-tablo th:last-child, .h-tablo td:last-child { padding-right: 0; }
.h-tablo tr[data-aktif="0"] .h-ad, .h-tablo tr[data-aktif="0"] .h-eposta { color: var(--metin-2); }
.h-ad { font-weight: var(--agirlik-orta); font-size: var(--yazi-govde); overflow-wrap: anywhere; }
/* E-posta tek satır; sığmazsa üç nokta, tam adres title'da */
.h-hucre-eposta { width: 30%; }
.h-eposta { display: block; max-width: 28rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-sen { margin-left: var(--a-2); }
.h-tablo .b-girdi { min-height: 36px; font-size: var(--yazi-kucuk); max-width: 14rem; }
.h-durum { display: flex; align-items: center; gap: var(--a-2); flex-wrap: wrap; }
.h-satir-hata { margin: var(--a-1) 0 0; font-size: var(--yazi-kucuk); font-weight: var(--agirlik-orta); color: var(--hata); }
.h-satir-hata:empty { display: none; }
.h-oturum { font-size: var(--yazi-kucuk); color: var(--metin-2); white-space: nowrap; }

/* Şifre menüsü (açılır liste); panelin altına taşacaksa yukarı açılır (data-yukari) */
.h-menu { position: relative; }
.h-menu-ok { color: var(--metin-2); }
.h-menu-liste {
  position: absolute; z-index: 5; top: calc(100% + var(--a-1)); right: 0; min-width: 15rem; max-width: calc(100vw - 2 * var(--a-4));
  margin: 0; padding: var(--a-1); list-style: none;
  background: var(--yuzey); border: 1px solid var(--cizgi-guclu); border-radius: var(--kose-kontrol);
}
.h-menu-liste[data-yukari] { top: auto; bottom: calc(100% + var(--a-1)); }
.h-menu-liste[hidden] { display: none; }
.h-menu-oge {
  display: block; width: 100%; padding: var(--a-2) var(--a-3); min-height: 40px; border: 0; border-radius: var(--kose-kontrol);
  background: transparent; color: var(--metin); font: inherit; font-size: var(--yazi-kucuk); text-align: left; text-decoration: none; cursor: pointer;
}
.h-menu-oge:hover:not([disabled]) { background: var(--yuzey-2); }
.h-menu-oge[disabled] { color: var(--metin-2); cursor: default; }
.h-link-kutu { display: flex; gap: var(--a-2); min-width: 0; }
.h-link-kutu .b-girdi { flex: 1 1 auto; font-size: var(--yazi-kucuk); }
.h-link-kutu .b-dugme { flex: none; min-height: 44px; }
.h-kopya-durum { margin: 0; font-size: var(--yazi-kucuk); font-weight: var(--agirlik-orta); color: var(--metin); }
.h-kopya-durum:empty { display: none; }

/* Hesabım sekmeleri (her biri ayrı adres): Hesap ve şifre · Bağlantılar; seçili alt çizgi metin renginde */
.h-sekmeler { flex: none; display: flex; gap: var(--a-1); border-bottom: 1px solid var(--cizgi); }
.h-sekme {
  display: inline-flex; align-items: center; gap: var(--a-2); min-height: 44px; padding: 0 var(--a-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--metin-2); font-size: var(--yazi-govde); font-weight: var(--agirlik-orta); text-decoration: none; white-space: nowrap;
  transition: color var(--gecis) var(--gecis-egri), border-color var(--gecis) var(--gecis-egri);
}
.h-sekme:hover { color: var(--metin); }
.h-sekme[aria-current="page"] { color: var(--metin); border-bottom-color: var(--metin); }
.h-sekme:focus-visible { outline-offset: -2px; border-radius: var(--kose-kontrol); }

/* Bağlantılar (/hesap/baglantilar): Notion | Slack; kart = durum › adımlar › anahtar alanı (göster/gizle) › eylemler › sonuç */
.h-pano[data-duzen="baglantilar"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.h-pano[data-duzen="baglantilar"] .k-panel-govde { display: grid; align-content: start; gap: var(--a-4); }
.h-bg-durum { display: flex; align-items: center; gap: var(--a-2) var(--a-3); flex-wrap: wrap; margin: 0; }
.h-bg-ayrinti { font-size: var(--yazi-kucuk); color: var(--metin-2); overflow-wrap: anywhere; }
.h-bg-son4 { letter-spacing: 0.04em; }
/* Numaralı adımlar: tarayıcı imi yerine sayaç (sınıflı listede madde işareti yok) */
.h-bg-adimlar { display: grid; gap: var(--a-2); margin: 0; padding: 0; list-style: none; counter-reset: h-bg-adim; font-size: var(--yazi-kucuk); color: var(--metin-2); max-width: 60ch; }
.h-bg-adimlar > li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); counter-increment: h-bg-adim; }
.h-bg-adimlar > li::before { content: counter(h-bg-adim) "."; color: var(--metin-2); }
.h-bg-form { display: grid; gap: var(--a-3); margin: 0; min-width: 0; max-width: 32rem; }
.h-bg-eylem { display: flex; align-items: center; gap: var(--a-2); flex-wrap: wrap; }
.h-bg-ileti { margin: 0; font-size: var(--yazi-kucuk); color: var(--metin-2); }
.h-bg-ileti:empty, .h-bg-sonuc:empty { display: none; }
.h-bg-sonuc { max-width: 32rem; }
.h-bg-sonuc .b-serit { margin: 0; }

@media (max-width: 899px) {
  .h-pano .b-bos { height: auto; }
}
@media (max-width: 599px) {
  .h-sekmeler { overflow-x: auto; scrollbar-width: none; }
  .h-sekme { flex: none; padding: 0 var(--a-2); }
  .h-bg-eylem .b-dugme { flex: 1 1 auto; min-height: 44px; }
  .h-bg-eylem .b-dugme[type="submit"] { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .h-ekle-izgara { grid-template-columns: minmax(0, 1fr); }
  .h-ekle-izgara .b-dugme { width: 100%; }
  .h-pano .h-form .b-dugme[type="submit"] { width: 100%; }
  #ekle .k-panel-sag { display: none; }
  .h-profil div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .h-menu-liste { right: auto; left: 0; }
  .h-hucre-eposta { width: auto; }
  .h-eposta { max-width: none; }
  .h-tablo, .h-tablo tbody, .h-tablo tr, .h-tablo td { display: block; width: 100%; }
  .h-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .h-tablo tr { border: 1px solid var(--cizgi); border-radius: var(--kose-kart); padding: var(--a-4); margin-bottom: var(--a-3); display: grid; gap: var(--a-3); }
  .h-tablo td, .h-tablo td:first-child, .h-tablo td:last-child { padding: 0; border: 0; }
  .h-tablo td[data-baslik]::before { content: attr(data-baslik); display: block; margin-bottom: var(--a-1); font-size: var(--yazi-kucuk); color: var(--metin-2); }
  .h-tablo td.h-hucre-ad::before { display: none; }
  .h-tablo .b-girdi { max-width: none; }
}
@media (max-width: 480px) { .h-link-kutu { flex-wrap: wrap; } .h-link-kutu .b-dugme { width: 100%; } }

/* Dokunma hedefi: şifre "Göster" düğmesi dokunmatikte ve <600 px'te alan boyunda (--dokunma) */
@media (pointer: coarse), (max-width: 599px) { .h-sifre-goster, .h-tablo .b-girdi { min-height: var(--dokunma); } }