/* =====================================================================
   ROZETLER — MASAÜSTÜ DÜZENİ (29 Eyl 2026)
   =====================================================================
   Ölçüldü (canlı, 1440): 83 rozet 9 ailede tek sütunda — sayfa 5400px.
   Solda yapışkan aile listesi (kazanılan/toplam, kaydırırken aktif aile),
   üstte durum süzgeci (Hepsi · Kazanılan · Yolda · Kilitli), kart ızgarası
   3 sütun. Rozet dolabı vitrini tam genişlikte, dokunulmadı.
   Rozet id'leri ve açılma koşulları DOKUNULMADI (ROZETLER kuralı).
   Gradyan muafiyeti `rz-` önekiyle sınırlı — burada yeni gradyan YOK.
   İşaretleme telefonla ortak; nav ve süzgeç telefonda gizli.
   ===================================================================== */
.rz-nav, .rz-suzgec { display: none; }

@media (min-width: 941px) {
  .rz-duzen { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-5); align-items: start; margin-top: 0; }
  .rz-kok { gap: var(--sp-5); }   /* vitrin ile liste arası 44px'ti */
  .rz-icerik { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
  .rz-suzgec { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: calc(-1 * var(--sp-2)); }

  /* sol aile listesi — Dilbilgisi'nin bölüm listesiyle AYNI bileşen */
  .rz-nav {
    position: sticky; top: calc(var(--ctrl-h-lg) + 2 * var(--sp-4) + 1px + var(--sp-4));
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--sp-2); border: 1px solid var(--line-kart); border-radius: var(--r-lg); background: var(--card);
  }
  .rz-nav-oge .ic { color: var(--rz-aile-renk, var(--muted)); }
  .rz-nav-oge > i { display: none; }

  /* kart ızgarası sabit 3 sütun (içerik 1180'de sınırlı; 4 sütun kartı ~220px'e sıkıştırıyordu) */
  .rz-icerik .rz-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* dar kartta rozet adı kesilmez, sarar */
  .rz-icerik .rz-kart-ad, .rz-icerik .rz-kart-ad b { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; }
}
@media (min-width: 941px) and (max-width: 1279px) {
  .rz-icerik .rz-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   ROZETLER — TELEFON VE TABLET (30 Eyl 2026)
   =====================================================================
   Olculdu: 390'da 14,6 ekran (320'de 22) — 83 rozetin hepsi alt alta,
   kart ~120px (kademe ayri satir, sayi cubugun altinda ayri satir).
   "Rozetlerin tamami gorunur" karari KORUNUR; kart sikilasir (kademe adin
   yaninda, sayi cubugun yaninda) ve masaustundeki durum suzgeci telefona
   da gelir (varsayilan "Hepsi"). Haplar Kelimeler'in `.kl-hap`i. */
@media (max-width: 940px) {
  .rz-suzgec {
    display: flex; flex-wrap: nowrap; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--m-yan, var(--sp-4))) var(--sp-4); padding: 0 var(--m-yan, var(--sp-4));
  }
  .rz-suzgec::-webkit-scrollbar { display: none; }
  .rz-icerik > .rz-aile + .rz-aile { margin-top: var(--sp-6); }

  .rz-izgara { gap: var(--sp-2); }
  .rz-kart { gap: var(--sp-3); padding: var(--sp-3); align-items: flex-start; }
  .rz-kart-govde { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-2); row-gap: 2px; align-items: baseline; }
  .rz-kart-ad { grid-column: 1; grid-row: 1; }
  .rz-kart-ad b { white-space: normal; overflow: visible; }
  .rz-kart-kademe { grid-column: 2; grid-row: 1; justify-self: end; }
  .rz-kart-not { grid-column: 1 / -1; font-size: var(--fs-xs); margin: 0; }
  .rz-kart-tarih { grid-column: 1 / -1; margin-top: var(--sp-1); }
  .rz-kart-ilerleme { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
  .rz-kart-ilerleme > .rz-kart-bar { flex: 1 1 auto; }
  .rz-kart-ilerleme > em { flex: none; }
}
/* tablet dikey: iki sutun */
@media (min-width: 601px) and (max-width: 940px) {
  .rz-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}