/* Profil listesi, üst yükleme çubuğu ve alt sekme çubuğu */

/* ---------- profil: iOS ayarlar tarzı gruplu liste ---------- */

/* kimlik başlığı — kart değil, sayfanın kendi başlığı gibi */
.profil-kimlik {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.4rem 0.3rem 1.4rem;
  animation: cardIn var(--duration-normal) var(--ease) backwards;
}
.avatar {
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: linear-gradient(180deg, #f8c45c, var(--accent)); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 4px 14px var(--accent-soft);
}
.profil-kimlik-ad h2 { font-size: 1.25rem; letter-spacing: -0.015em; }
.profil-kimlik-ad p { color: var(--text-dim); font-size: 0.82rem; margin-top: 0.15rem; }

/* grup başlığı — iOS'taki küçük, seyrek harfli üst yazı */
.grup-baslik {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 0.9rem 0.45rem;
  animation: cardIn var(--duration-normal) var(--ease) backwards;
}
.grup {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 1.5rem;
  animation: cardIn var(--duration-normal) var(--ease) backwards;
}
.grup-satir {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem; font-size: 0.92rem;
  min-height: 3rem;
}
/* ayırıcı çizgi soldan içeride başlar — iOS'taki gibi, satırlar tek blok okunur */
.grup-satir + .grup-satir {
  background-image: linear-gradient(var(--line), var(--line));
  background-size: calc(100% - 1.1rem) 1px;
  background-position: 1.1rem 0;
  background-repeat: no-repeat;
}
.grup-satir span { color: var(--text-dim); font-size: 0.85rem; flex: none; }
.grup-satir b { text-align: right; word-break: break-word; font-weight: 600; }
.grup-satir.dikey { display: block; padding: 0.9rem 1rem; }
/* bildirim ve konum düğmesi grup içinde tek başına: tam genişlik */
.grup-satir.dikey > #bildirimBtn,
.grup-satir.dikey > #konumBtn { width: 100%; padding: 0.75rem; font-size: 0.88rem; }

/* tema seçici */
.tema-secici { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.tema-btn {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 0.6rem 0.4rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease-spring);
}
.tema-btn:active { transform: scale(0.94); }
.tema-btn.secili { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }

/* Çıkış artık bir form içinde <button>; görünüm eskisiyle aynı kalsın diye
   düğmenin tarayıcı varsayılanları da sıfırlanıyor. */
.cikis-form { width: 100%; }
.cikis-btn {
  display: flex; width: 100%; align-items: center; justify-content: center;
  font-family: inherit; cursor: pointer;
  background: var(--surface); color: var(--red);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; font-size: 0.95rem; font-weight: 700; text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.cikis-btn:active { transform: scale(0.98); }

/* ---------- üst yükleme çubuğu ----------
   Sekme/tarih değişiminde ve ağ isteklerinde çalışır. İskelet ekranın yerini
   almaz; onun görünmediği sessiz yenilemelerde de "bir şey oluyor" hissi verir. */
.ilerleme {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 2.5px; overflow: hidden;
  background: transparent;
  pointer-events: none;
}
.ilerleme span {
  display: block; width: 35%; height: 100%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-text));
  animation: ilerlemeKay 0.95s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ilerlemeKay {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .ilerleme span { animation-duration: 2s; }
}

/* ---------- alt sekme çubuğu ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--header-solid);
  border-top: 1px solid var(--line);
}
/* Çentikli cihaz dolgusu koşulsuz uygulanır.
   Önceden @media (display-mode: standalone) ile sınırlıydı; bu sorgu iOS'ta bazı
   açılışlarda eşleşmediği için dolgu hiç uygulanmıyor ve bar dibe yapışmıyordu.
   Tarayıcıda env() zaten 0 döner, yani koşulsuz olması hiçbir şeyi bozmaz. */
.tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar-inner {
  max-width: 40rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); height: var(--tabbar-h);
}
.tab-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.28rem;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text-dim); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em;
  transition: color var(--duration-fast) var(--ease);
}
.tab-btn .tab-ikon {
  font-size: 1.35rem; line-height: 1;
  padding: 0.22rem 0.9rem; border-radius: 999px;
  background: transparent;
  transition: transform var(--duration-fast) var(--ease-spring),
              background var(--duration-normal) var(--ease);
}
.tab-btn.aktif { color: var(--accent-text); font-weight: 700; }
.tab-btn.aktif .tab-ikon { background: var(--accent-soft); transform: translateY(-1px); }
.tab-btn:active .tab-ikon { transform: scale(0.88); }

/* alt bar durum filtreleri — 2 mavi, 3 yeşil */
.tab-btn.aktif[data-filtre="2"] { color: var(--blue-text); }
.tab-btn.aktif[data-filtre="2"] .tab-ikon { background: var(--blue-soft); }
.tab-btn.aktif[data-filtre="3"] { color: var(--green-text); }
.tab-btn.aktif[data-filtre="3"] .tab-ikon { background: var(--green-soft); }