/* ===================================================================
   Smintheion Dünyaları v2.0 — ortak renkler ve kanıt rozetleri
   index.html (launcher) ve kaynaklar.html birlikte kullanır.
   =================================================================== */
:root {
  --mermer: #f1ece2;
  --murekkep: #26221c;
  --soluk: #6a6256;
  --ikindi: #c9923a;
  --magara: #1c1b18;
  --magara-2: #2a2824;
  --magara-3: #3b3832;
  --cizgi: #5c574e;
  --metin-acik: #d9d1c1;

  --baslik: "Cinzel", "Times New Roman", serif;
  --metin: "Cormorant Garamond", Georgia, serif;
  --arayuz: "Nunito", "Segoe UI", sans-serif;

  /* Kanıt düzeyleri: koyu zeminde. Renk tek başına anlam taşımaz:
     her rozette simge + kelime var; "biliyoruz" düz çerçeve, "tahmin" kesikli çerçeve. */
  --k1: #9fb56a;
  --k2: #c4c877;
  --k3: #d7c58a;
  --k4: #e7ae5e;
  --k5: #f08f4f;
}
[data-tema="acik"] {
  --k1: #4b5a28;
  --k2: #666d22;
  --k3: #7a6a2a;
  --k4: #8f5a12;
  --k5: #a4461a;
}

/* ---------- Rozet ---------- */
.rozet {
  --r: var(--k1);
  display: inline-flex; align-items: center; gap: .32em;
  vertical-align: .08em;
  padding: .12em .5em .12em .34em;
  border: 2px solid var(--r); border-radius: 3px;
  color: var(--r); background: transparent;
  font-family: var(--arayuz); font-weight: 800;
  font-size: .6em; line-height: 1.15; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.rozet svg { width: 1.35em; height: 1.35em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rozet[data-duzey="K1"] { --r: var(--k1); }
.rozet[data-duzey="K2"] { --r: var(--k2); }
.rozet[data-duzey="K3"] { --r: var(--k3); }
.rozet[data-duzey="K4"] { --r: var(--k4); border-style: dashed; }
.rozet[data-duzey="K5"] { --r: var(--k5); border-style: dashed; }
button.rozet { cursor: pointer; min-height: 0; }
.rozet.parla { background: var(--r); color: var(--magara); transition: background-color .2s, color .2s; }
button.rozet:hover, button.rozet[aria-expanded="true"] { background: var(--r); color: var(--magara); }
[data-tema="acik"] button.rozet:hover, [data-tema="acik"] button.rozet[aria-expanded="true"] { color: #fff; }

/* Rozet açıklaması (lejant) */
.lejant { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.4em; }
.lejant-grup { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; }
.lejant-grup > b {
  font-family: var(--baslik); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .7em; margin-right: .2em;
}