/* ================================================================
   90matik - Arayuz bilesenleri

   Kart tabanli, koyu temali bilesen kutuphanesi (PRD 68.3).
   Her bilesen tek basina calisir; sayfaya bagimli degildir.
   ================================================================ */

/* ================================================================
   BUTONLAR
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* --- Cesitler --- */
.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
}

.btn--primary:hover {
  background: var(--brand-hover);
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}

.btn--secondary {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border);
}

.btn--secondary:hover {
  background: var(--surface-4);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn--outline:hover {
  background: var(--surface-2);
  border-color: var(--brand-ink);
  color: var(--brand-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
}

.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

.btn--danger {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: transparent;
}

.btn--danger:hover {
  background: var(--danger);
  color: #fff;
}

/* --- Boyutlar --- */
.btn--sm  { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn--lg  { height: 48px; padding: 0 var(--sp-6); font-size: var(--fs-md); border-radius: var(--r-lg); }
.btn--block { width: 100%; }
.btn--pill  { border-radius: var(--r-full); }

/* --- Yalniz ikon --- */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  color: var(--text-muted);
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
  flex-shrink: 0;
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* Dosya secici bir <label> icinde duruyor (gizli <input type=file>);
   etiketin dugme gibi davranmasi icin imleç ve odak halkasi gerekiyor. */
label.icon-btn { cursor: pointer; }
label.icon-btn:focus-within {
  background: var(--surface-2);
  color: var(--text);
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

.icon-btn__dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border: 2px solid var(--bg);
  border-radius: var(--r-full);
}

/* Bekleyen bir hak var: simge markanin rengine geciyor. Nokta
   kirmizi degil sari, cunku bu bir uyari degil davet. */
.icon-btn--live { color: var(--brand-ink); }
.icon-btn--live .icon-btn__dot { background: var(--brand); }


/* ================================================================
   KARTLAR
   ================================================================ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.card--pad     { padding: var(--sp-5); }
.card--pad-sm  { padding: var(--sp-4); }

.card--hover {
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}

.card--hover:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.card--accent {
  border-color: var(--border-brand);
  background: linear-gradient(180deg, var(--brand-dim) 0%, var(--surface-1) 55%);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}

/* Kart basliginin sagindaki birden fazla oge (sayac + dugme) */
.card__head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.card__body { padding: var(--sp-5); }
.card__body--tight { padding: var(--sp-3) var(--sp-4); }

.card__foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}


/* ================================================================
   AVATAR
   ================================================================ */
.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  overflow: hidden;
  user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
.avatar--xl { width: 96px; height: 96px; font-size: var(--fs-2xl); }
.avatar--2xl { width: 128px; height: 128px; font-size: var(--fs-3xl); }

/* Level'e gore renklenen halka: kullanicinin ilerlemesi bir bakista gorunur */
.avatar--ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring-color, var(--surface-4)); }

.avatar[data-level-color="gray"]   { --ring-color: #555; }
.avatar[data-level-color="blue"]   { --ring-color: var(--info); }
.avatar[data-level-color="green"]  { --ring-color: var(--success); }
.avatar[data-level-color="purple"] { --ring-color: var(--tier-legendary); }
.avatar[data-level-color="orange"] { --ring-color: var(--warning); }
.avatar[data-level-color="red"]    { --ring-color: var(--danger); }
.avatar[data-level-color="yellow"] { --ring-color: var(--brand-ink); }

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group .avatar + .avatar {
  margin-left: -10px;
  box-shadow: 0 0 0 2px var(--surface-1);
}


/* ================================================================
   ROZET / ETIKET
   ================================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 var(--sp-2);
  background: var(--surface-3);
  color: var(--text-muted);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  line-height: 1;
}

.chip--brand   { background: var(--brand-dim);   color: var(--brand-ink); }
.chip--success { background: var(--success-dim); color: var(--success); }
.chip--danger  { background: var(--danger-dim);  color: var(--danger); }
.chip--warning { background: var(--warning-dim); color: var(--warning); }
.chip--info    { background: var(--info-dim);    color: var(--info); }
.chip--outline { background: transparent; border: 1px solid var(--border-strong); }

/* Satir ici kullanim: meta satirlarinda normal rozet cok yer kapliyor. */
.chip--sm {
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--fw-medium);
}

/* Canli mac gostergesi */
.chip--live {
  background: rgba(255, 59, 48, 0.15);
  color: var(--live);
}

.chip--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--live);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* Level etiketi */
.level-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: var(--fw-bold);
  background: var(--surface-3);
  color: var(--text-muted);
  line-height: 1;
}

.level-chip[data-color="blue"]   { background: var(--info-dim);    color: var(--info); }
.level-chip[data-color="green"]  { background: var(--success-dim); color: var(--success); }
.level-chip[data-color="purple"] { background: rgba(177,76,255,.14); color: var(--tier-legendary); }
.level-chip[data-color="orange"] { background: var(--warning-dim); color: var(--warning); }
.level-chip[data-color="red"]    { background: var(--danger-dim);  color: var(--danger); }
.level-chip[data-color="yellow"] { background: var(--brand-dim);   color: var(--brand-ink); }

/* Kazanilan rozet gorseli */
.badge-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text-muted);
  flex-shrink: 0;
}

.badge-icon[data-tier="bronze"]    { background: rgba(205,127,50,.15);  color: var(--tier-bronze); }
.badge-icon[data-tier="silver"]    { background: rgba(192,192,192,.15); color: var(--tier-silver); }
.badge-icon[data-tier="gold"]      { background: var(--brand-dim);      color: var(--brand-ink); }
.badge-icon[data-tier="legendary"] { background: rgba(177,76,255,.15);  color: var(--tier-legendary); }


/* ================================================================
   XP ILERLEME CUBUGU
   ================================================================ */
.xpbar {
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
}

.xpbar__fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-active), var(--brand));
  transition: width var(--t-slow);
}

.xpbar--lg { height: 10px; }


/* ================================================================
   KULLANICI SATIRI (liste ogesi)
   ================================================================ */
.user-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  min-width: 0;
}

.user-row__body { min-width: 0; flex: 1; }

.user-row__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--text);
}

.user-row__meta {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.user-row__rank {
  display: grid;
  place-items: center;
  width: 24px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-dim);
  flex-shrink: 0;
}

.user-row__rank[data-rank="1"] { color: var(--brand-ink); }
.user-row__rank[data-rank="2"] { color: var(--tier-silver); }
.user-row__rank[data-rank="3"] { color: var(--tier-bronze); }


/* ================================================================
   FORM
   ================================================================ */
.field { display: block; margin-bottom: var(--sp-4); }

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.field__hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.field__error {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--danger);
}

.input,
.textarea,
.select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.input, .select { height: 42px; padding: 0 var(--sp-4); }
.textarea { padding: var(--sp-3) var(--sp-4); min-height: 96px; line-height: var(--lh-snug); }

.input::placeholder,
.textarea::placeholder { color: var(--text-dim); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  background: var(--surface-1);
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px var(--brand-dim);
}

.input.has-error,
.textarea.has-error { border-color: var(--danger); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AAAAAA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
  cursor: pointer;
}

.select option { background: var(--surface-2); color: var(--text); }

/* Onay kutusu ve secim dugmesi */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.check:hover { background: var(--surface-2); }

.check:has(input:checked) {
  border-color: var(--brand-ink);
  background: var(--brand-dim);
}

.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-ink);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.check__text { font-size: var(--fs-sm); }
.check__title { display: block; font-weight: var(--fw-semibold); }
.check__desc  { display: block; color: var(--text-dim); font-size: var(--fs-xs); margin-top: 2px; }


/* ================================================================
   GUVENLIK SATIRI  (ayarlar: iki adimli dogrulama gibi)
   ================================================================ */
.security-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.security-row__text { flex: 1; min-width: 0; }

.security-row__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 2px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.security-row__desc {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

/* Dar ekranda dugme alta gecsin: yan yana sikismasi yaziyi kirpiyordu */
@media (max-width: 520px) {
  .security-row { flex-direction: column; align-items: stretch; }
  .security-row .btn { align-self: flex-start; }
}


/* ================================================================
   DAVET BAGLANTISI
   ----------------------------------------------------------------
   Adres kutusu okunur ama degistirilemez: uye baglantiyi gormeli
   (nereye goturdugunu bilmeden paylasmiyor) ama yanlislikla
   silememeli.
   ================================================================ */
.davet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.davet__link {
  flex: 1;
  min-width: 220px;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-sm);
}

.davet__karne {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}


/* ================================================================
   PROFIL FOTOGRAFI FORMU  (ayarlar)
   ----------------------------------------------------------------
   Dosya secici gizli, yerine dugme gorunuyor: tarayicilarin kendi
   "Dosya Sec" kutusu her isletim sisteminde baska turlu ciziliyor ve
   sitenin dilinden kopuyor.
   ================================================================ */
.avatar-form {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.avatar-form__preview { flex: 0 0 auto; }

.avatar-form__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.avatar-form__name {
  font-size: var(--fs-sm);
  word-break: break-all;
}


/* ================================================================
   FORUM AYAR BAGLANTILARI  (ayarlar)
   ----------------------------------------------------------------
   Forumda kalan ekranlar tek listede: uye "acaba baska nerede ne
   var" diye forumu dolasmasin.
   ================================================================ */
.forum-links {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.forum-links li + li { border-top: 1px solid var(--border); }

.forum-links__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  transition: background var(--t-fast);
}

.forum-links__item:hover { background: var(--surface-2); }

.forum-links__icon {
  display: flex;
  color: var(--text-muted);
}

.forum-links__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.forum-links__text small { font-size: var(--fs-xs); }


/* ================================================================
   SEKMELER
   ================================================================ */
.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs__item {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: color var(--t-fast);
}

.tabs__item:hover { color: var(--text); }

.tabs__item.is-active { color: var(--brand-ink); }

.tabs__item.is-active::after {
  content: "";
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: var(--r-full) var(--r-full) 0 0;
}


/* Sekme basligindaki sayi */
.tabs__count {
  margin-left: 5px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--text-dim);
}

.tabs__item.is-active .tabs__count { color: var(--brand-ink); }


/* Yonetim panelinin serit i. On bir bolum yan yana sigmiyor; yatay
   kaydirma yerine alt satira sarmasi dogru, cunku gizli kaydirma
   cubugu "devami var" bilgisini vermiyor. */
.tabs--admin {
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  overflow-x: visible;
}

/* Bekleyen is sayisi: yonetim seridinde soluk degil, dikkat cekmeli. */
.tabs--admin .tabs__count {
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-weight: var(--fw-semibold);
}

.tabs--admin .tabs__item.is-active .tabs__count { color: #fff; }


/* ================================================================
   LIG SECIM LISTESI (yonetim > spor verisi)
   ----------------------------------------------------------------
   Kirk kusur lig var. Alt alta uzun bir liste yerine iki kolon:
   yonetici hangi ligin acik oldugunu tek bakista gormeli, sayfayi
   asagi kaydirarak aramamali.
   ================================================================ */
.ligler {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

@media (min-width: 720px) {
  .ligler { grid-template-columns: 1fr 1fr; }
}

.ligsatir {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.ligsatir:hover { background: var(--surface-3); }

.ligsatir__ad {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-weight: var(--fw-medium);
}

/* Ulke adi ve mac sayisi ayni satirin kuyrugunda: dar ekranda
   ulke gizleniyor, mac sayisi kaliyor. Hangi ligin veri aldigini
   gormek, hangi ulkede oldugunu gormekten onemli. */
.ligsatir__yer,
.ligsatir__mac { font-size: var(--fs-xs); white-space: nowrap; }

.ligsatir__yer { grid-column: 2; justify-self: end; }

@media (max-width: 520px) {
  .ligsatir__yer { display: none; }
}


/* ================================================================
   SATIR ICI BILGI KUTUSU
   ----------------------------------------------------------------
   Sayfada kalici duran aciklama; gecici olan toast'tir.
   ================================================================ */
.notice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.notice svg { color: var(--info); }

.notice--warn { border-left-color: var(--warning); }
.notice--warn svg { color: var(--warning); }

/* Geri alinamayan islemler icin: uye silme gibi. */
.notice--danger { border-left-color: var(--danger); }
.notice--danger svg { color: var(--danger); }

/* Uzun aciklamalarda simge yukari hizalanmali; ortalanirsa iki
   satirlik metnin ortasinda asili kaliyor. */
.notice--danger,
.notice--warn { align-items: flex-start; }
.notice--danger svg,
.notice--warn svg { margin-top: 2px; flex-shrink: 0; }


/* ================================================================
   SEGMENT SECICI
   ----------------------------------------------------------------
   Iki-uc secenekli kucuk suzgec. Sekmeden farki: sayfanin tamamini
   degil, yalnizca listenin sirasini degistirir.
   ================================================================ */
.seg {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.seg__item {
  padding: 4px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}

.seg__item:hover { color: var(--text); }

.seg__item.is-active {
  background: var(--surface-4);
  color: var(--brand-ink);
}


/* ================================================================
   BOS DURUM
   ================================================================ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
  color: var(--text-muted);
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r-full);
  color: var(--text-dim);
}

.empty__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.empty__text {
  font-size: var(--fs-sm);
  max-width: 380px;
  margin-bottom: var(--sp-5);
}

.empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

/* Misafire kapali bolum: bos bir kutu degil, "uye olunca burasi
   acilir" diyen bir davet. Kilit simgesi markanin sarisini aliyor
   ki cezalandirici degil, davetkar gorunsun. */
.empty--lock {
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}

.empty--lock .empty__icon {
  background: var(--brand-dim);
  color: var(--brand-ink);
}


/* ================================================================
   BILDIRIM BALONU (flash)
   ================================================================ */
.toasts {
  position: fixed;
  top: calc(var(--header-h) + var(--sp-4));
  right: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(380px, calc(100vw - var(--sp-8)));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--text-dim);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  animation: toast-in var(--t-slow) ease-out;
}

.toast--success { border-left-color: var(--success); }
.toast--error   { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }
.toast--info    { border-left-color: var(--info); }

.toast__close {
  margin-left: auto;
  color: var(--text-dim);
  flex-shrink: 0;
}

.toast__close:hover { color: var(--text); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ================================================================
   YUKLENIYOR ISKELETI
   ================================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand-ink);
  border-radius: var(--r-full);
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ================================================================
   ISTATISTIK KUTUSU
   ================================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--sp-1);
}

.stat {
  text-align: center;
  padding: var(--sp-2);
}

.stat__value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat__label {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}


/* ================================================================
   AYIRICI ETIKET
   ================================================================ */
.divider-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.divider-label::before,
.divider-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}


/* ================================================================
   GUNLUK GOREVLER VE SERI
   ================================================================ */
.tasks__score {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Seri seridi kartin ustunde durur ve sicak bir vurgu tasir:
   gorev listesinden once goze carpmasi kasitli. */
.streak {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: linear-gradient(90deg, var(--warning-dim), transparent);
  border-bottom: 1px solid var(--border);
}

.streak__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--warning-dim);
  color: var(--warning);
  flex-shrink: 0;
}

.streak__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.streak__body strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.streak__hint {
  font-size: 11px;
  color: var(--text-dim);
}

.tasks__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-md);
}

.task__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  flex-shrink: 0;
}

.task__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
}

.task__name {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* Yapilmamis gorev, yapilacagi ekrana baglanti. Baglanti oldugunu
   belli etmesi gerekiyor ama satiri mavi/alti cizili bir baglantiya
   cevirmek listeyi dagitiyor: renk ustune gelince geliyor. */
a.task__body { color: inherit; }
a.task__body:hover .task__name { color: var(--brand-ink); }
.task:has(a.task__body):hover { background: var(--surface-3); }

/* Aciklama yalnizca Aktiviteler sayfasinda gosteriliyor; kenar
   kutusunda yer yok. Baslikla karismasin diye daha soluk. */
.task__desc {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  line-height: var(--lh-normal);
}

/* Cubuk satirin tamamina yayilirsa alt cizgi gibi duruyor; dar tutunca
   ilerleme gostergesi oldugu anlasiliyor. */
.task__bar {
  display: block;
  width: 100%;
  max-width: 140px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}

.task__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--brand);
  transition: width var(--t-slow);
}

.task__xp {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.task.is-done .task__mark {
  background: var(--brand);
  border-color: transparent;
  color: var(--on-brand);
}

.task.is-done .task__name {
  color: var(--text-dim);
  text-decoration: line-through;
}

.task.is-done .task__desc { opacity: 0.55; }

.task.is-done .task__xp { color: var(--brand-ink); }

.tasks__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.tasks__foot strong { color: var(--brand-ink); }
.tasks__foot svg { color: var(--brand-ink); flex-shrink: 0; }

.sidebar-progress__streak {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--warning);
}


/* ================================================================
   KAZANC BALONU (+25 XP)
   ----------------------------------------------------------------
   Islem bildiriminden (toast) ayri bir yerde durur: biri "ne oldu",
   digeri "ne kazandin" anlatir, ust uste binmemeleri gerekir.
   ================================================================ */
.xp-pops {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--mobilenav-h) + var(--sp-4));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  pointer-events: none;
}

@media (min-width: 900px) {
  .xp-pops { bottom: var(--sp-6); }
}

.xp-pop {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--border-brand);
  box-shadow: var(--shadow-lg), var(--shadow-brand);
  font-size: var(--fs-sm);
  white-space: nowrap;
  animation: xp-pop-in var(--t-slow) cubic-bezier(0.2, 1.4, 0.4, 1);
  transition: opacity var(--t-base), transform var(--t-base);
}

.xp-pop__icon {
  display: grid;
  place-items: center;
  color: var(--brand-ink);
}

.xp-pop__value {
  font-weight: var(--fw-black);
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}

.xp-pop__label {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.xp-pop--streak {
  border-color: rgba(255, 167, 38, 0.45);
  box-shadow: var(--shadow-lg), 0 4px 20px rgba(255, 167, 38, 0.18);
}

.xp-pop--streak .xp-pop__icon,
.xp-pop--streak .xp-pop__value { color: var(--warning); }

.xp-pop.is-out {
  opacity: 0;
  transform: translateX(20px);
}

@keyframes xp-pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ================================================================
   ROZET / SEVIYE KUTLAMASI
   ================================================================ */
.reward {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  opacity: 0;
  transition: opacity var(--t-base);
}

.reward.is-open { opacity: 1; }

.reward__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.reward__box {
  position: relative;
  width: min(360px, 100%);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border-brand);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: scale(0.92);
  transition: transform var(--t-slow) cubic-bezier(0.2, 1.3, 0.4, 1);
}

.reward.is-open .reward__box { transform: scale(1); }

/* Ikonun arkasindaki isik: kutlama hissini tasiyan tek suslu parca. */
.reward__burst {
  position: absolute;
  top: -70px;
  left: 50%;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  border-radius: var(--r-full);
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 65%);
  pointer-events: none;
}

.reward__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-muted);
}

.reward__icon[data-tier="bronze"]    { background: rgba(205,127,50,.16);  color: var(--tier-bronze); }
.reward__icon[data-tier="silver"]    { background: rgba(192,192,192,.16); color: var(--tier-silver); }
.reward__icon[data-tier="gold"]      { background: var(--brand-dim);      color: var(--brand-ink); }
.reward__icon[data-tier="legendary"] { background: rgba(177,76,255,.16);  color: var(--tier-legendary); }
.reward__icon[data-tier="level"]     { background: var(--brand-dim);      color: var(--brand-ink); }

.reward__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-ink);
}

.reward__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
}

.reward__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.reward__xp {
  display: inline-block;
  margin-top: var(--sp-4);
  padding: 4px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--brand-dim);
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.reward .btn { margin-top: var(--sp-6); }