/* Panelin üst şeridi (panel/panel.js seritYaz): solda "Gün 1369" (serif büyük sayı), sağda
   mevsim ve çağ; altında ince gün çubuğu; en altta yaşayan diyar ve harabe sayısı ile hız.
   Her bilginin önünde tek renkli küçük simgesi (simge/simge.js) var; kutu, hap ve büyük harfli
   etiket yok. Mevsim simgesinin rengi veri rengidir (mevsim paleti). */

.serit { padding: var(--bosluk-2) 0 0; }
.serit p { margin: 0; }
.serit .simge { flex: none; color: var(--yazi-3); }
.serit-ust { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bosluk-4); }
.serit-gun { color: var(--yazi-3); font-size: var(--boy-3); white-space: nowrap; }
.serit-gun b { margin-left: var(--bosluk-1); color: var(--yazi-1);
  font: 600 var(--boy-7)/1 var(--aile-serif); font-variant-numeric: tabular-nums lining-nums; }
.serit-zaman { display: flex; align-items: center; gap: var(--bosluk-5); min-width: 0;
  color: var(--yazi-2); font-size: var(--boy-3); white-space: nowrap; }
.serit-zaman > span, .serit-alt > span { display: inline-flex; align-items: center;
  gap: var(--bosluk-3); min-width: 0; }
.serit-mevsim .simge { color: var(--mevsim, var(--yazi-3)); }
.mevsim-spring { --mevsim: #9bb86a; }
.mevsim-summer { --mevsim: #d6b65a; }
.mevsim-autumn { --mevsim: #c98a4a; }
.mevsim-winter { --mevsim: #a9bfcf; }
.serit-cag { color: var(--yazi-1); overflow: hidden; text-overflow: ellipsis; }

.ilerleme { height: 3px; margin-top: var(--bosluk-4); border-radius: 2px;
  background: var(--zemin-2); overflow: hidden; }
.ilerleme i { display: block; height: 100%; width: 0; background: var(--vurgu-koyu);
  transition: width .3s linear; }

.serit-alt { display: flex; align-items: center; justify-content: space-between;
  gap: var(--bosluk-4); margin-top: var(--bosluk-3); color: var(--yazi-2);
  font-size: var(--boy-2); }
.serit-alt b { color: var(--yazi-1); font-weight: 600; }
.serit-soluk { color: var(--yazi-3); }
.serit-hiz { color: var(--yazi-2); white-space: nowrap; }