/* launcher/arayuz/stil/bilesenler.css'ten (Web AFK). Web'e özgü ekler uygulama.css'te. */
/* Ortak bileşenler: 3B düğme, kart, girdiler, anahtar, rozet, ilerleme çubuğu, sekmeler,
   bildirimler, iletişim kutusu, iskelet ve durum kutuları. */

/* ------------------------------------------------------------------ */
/* 3B düğme (sitedeki btn3d diliyle aynı yapı)                          */
/* Dış kutu: kenar + derinlik rengi + alt dolgu; iç yüz: üstte parlak çizgi.
   Üzerine gelince yüz yükselir (dolgu artar, kutu aynı oranda yukarı kayar, yerleşim oynamaz),
   hafif titrer; basınca iner. */
/* ------------------------------------------------------------------ */
.d3 {
  --bh: 42px; --rim: 3px; --derinlik: 4px; --kalinlik: 3px; --r: 12px; --fs: 15px; --kalk: 3px;
  --d-kenar: var(--altin-kenar); --d-derinlik: var(--altin-derinlik); --d-yuz: var(--altin);
  --d-parlak: var(--altin-parlak); --d-yazi: var(--altin-yazi); --d-golge: 1px 0 0 rgba(255, 255, 255, .7);
  position: relative;
  display: inline-flex;
  vertical-align: top;
  border: var(--kalinlik) solid var(--d-kenar);
  border-radius: var(--r);
  background: var(--d-derinlik);
  padding: 0 0 var(--derinlik);
  box-shadow: 0 7px 14px rgba(0, 0, 0, .4);
  transition: padding .12s ease, margin .12s ease, translate .12s ease, box-shadow .2s ease, filter .15s ease;
}
.d3__yuz {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: var(--bh);
  padding: 0 18px;
  border-radius: calc(var(--r) - var(--kalinlik));
  background: var(--d-yuz);
  box-shadow: inset 0 var(--rim) 0 var(--d-parlak);
  color: var(--d-yazi);
  font-size: var(--fs);
  font-weight: 900;
  letter-spacing: .4px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: var(--d-golge);
}
.d3__yuz .simge { width: 1.2em; height: 1.2em; }
.d3__yuz::after {
  content: "";
  position: absolute; top: 0; left: -130%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events: none;
}
.d3:not(:disabled):not([aria-disabled="true"]):hover {
  padding-bottom: calc(var(--derinlik) + var(--kalk));
  margin-bottom: calc(var(--kalk) * -1);
  translate: 0 calc(var(--kalk) * -1);
  animation: d3-titre .5s cubic-bezier(.36, .07, .19, .97) both;
  box-shadow: 0 14px 24px rgba(0, 0, 0, .5), 0 5px 20px color-mix(in srgb, var(--d-yuz) 40%, transparent);
  filter: brightness(1.05);
  z-index: 2;
}
.d3:not(:disabled):not([aria-disabled="true"]):hover .d3__yuz::after { left: 160%; }
.d3:not(:disabled):not([aria-disabled="true"]):active {
  padding-bottom: calc(var(--derinlik) - 2px);
  margin-bottom: 2px;
  translate: 0 2px;
  filter: brightness(.97);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
}
@keyframes d3-titre {
  0% { rotate: 0deg; scale: 1; }
  22% { rotate: -1.3deg; scale: 1.035; }
  44% { rotate: 1deg; scale: 1.035; }
  66% { rotate: -.6deg; scale: 1.035; }
  84% { rotate: .25deg; scale: 1.035; }
  100% { rotate: 0deg; scale: 1.035; }
}
.d3:disabled, .d3[aria-disabled="true"] { cursor: not-allowed; filter: saturate(.35) brightness(.75); }
.d3.d3--mesgul, .d3.d3--mesgul:disabled { cursor: progress; filter: none; }

.d3--kucuk { --bh: 36px; --rim: 2px; --derinlik: 3px; --kalinlik: 2px; --r: 10px; --fs: 13px; --kalk: 2px; }
.d3--kucuk .d3__yuz { padding: 0 14px; gap: 6px; }
.d3--buyuk { --bh: 52px; --rim: 4px; --derinlik: 5px; --kalinlik: 4px; --r: 15px; --fs: 19px; --kalk: 4px; }
.d3--dev { --bh: 66px; --rim: 5px; --derinlik: 7px; --kalinlik: 4px; --r: 18px; --fs: 27px; --kalk: 4px; }
.d3--dev .d3__yuz { padding: 0 34px; gap: 12px; letter-spacing: 1px; }
.d3--tam { display: flex; width: 100%; }
.d3--simge .d3__yuz { width: calc(var(--bh) + 2px); padding: 0; }

.d3--mavi { --d-kenar: var(--mavi-kenar); --d-derinlik: var(--mavi-derinlik); --d-yuz: var(--mavi); --d-parlak: var(--mavi-parlak); --d-yazi: #04223d; --d-golge: 1px 0 0 rgba(255, 255, 255, .35); }
.d3--dc { --d-kenar: var(--dc-kenar); --d-derinlik: var(--dc-derinlik); --d-yuz: var(--dc); --d-parlak: var(--dc-parlak); --d-yazi: #fff; --d-golge: 0 1px 0 rgba(0, 0, 0, .28); }
.d3--kirmizi { --d-kenar: var(--kirmizi-kenar); --d-derinlik: var(--kirmizi-derinlik); --d-yuz: var(--kirmizi); --d-parlak: var(--kirmizi-parlak); --d-yazi: #3a0306; --d-golge: 1px 0 0 rgba(255, 255, 255, .35); }
.d3--koyu { --d-kenar: #08090c; --d-derinlik: #101217; --d-yuz: #2a2e37; --d-parlak: #3d424e; --d-yazi: #fff; --d-golge: 0 1px 0 rgba(0, 0, 0, .4); }
.d3--yesil { --d-kenar: #0d3b12; --d-derinlik: #2f7a24; --d-yuz: var(--iyi); --d-parlak: #d4ffc4; --d-yazi: #10330a; --d-golge: 1px 0 0 rgba(255, 255, 255, .45); }

/* sessiz düğme: yazı + simge, kart içindeki ikincil eylemler */
.sade {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 12px;
  border-radius: var(--r-kucuk);
  color: var(--soluk);
  font-weight: 700; font-size: var(--y-s);
  transition: background var(--gecis), color var(--gecis);
}
.sade:hover:not(:disabled) { background: var(--yuzey2); color: var(--yazi); }
.sade:disabled { opacity: .55; }
.sade--altin { color: var(--altin); }
.sade--altin:hover:not(:disabled) { color: var(--altin-parlak); }
.sade--kirmizi:hover:not(:disabled) { color: var(--hata); }
.sade--cerceve { border: 1px solid var(--kart-kenar); background: var(--kart); }

/* yazı bağlantısı biçiminde düğme */
.baglanti {
  color: var(--altin);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--altin) 45%, transparent);
  text-underline-offset: 3px;
  border-radius: 4px;
}
.baglanti:hover { color: var(--altin-parlak); text-decoration-color: currentColor; }

/* dönen simge (yenileme, yükleme) */
.donen { animation: don .9s linear infinite; }
@keyframes don { to { rotate: 360deg; } }
.yukleyici {
  width: 18px; height: 18px; flex: none;
  border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: don .8s linear infinite;
}

/* ------------------------------------------------------------------ */
/* kart (sitedeki card3d dili)                                          */
/* ------------------------------------------------------------------ */
.kart {
  position: relative;
  background: var(--kart);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--r-kart);
  box-shadow: var(--golge-kart);
  padding: 18px;
}
.kart__baslik {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-size: var(--y-l); font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.kart__baslik .simge { color: var(--altin); }
.kart__baslik-sag { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kart--tiklanir { cursor: pointer; transition: translate var(--gecis), box-shadow var(--gecis), border-color var(--gecis); }
.kart--tiklanir:hover { translate: 0 -3px; box-shadow: 0 8px 0 var(--kart-derinlik), 0 20px 28px rgba(0, 0, 0, .5); border-color: #3a3f4b; }

/* ------------------------------------------------------------------ */
/* girdiler                                                            */
/* ------------------------------------------------------------------ */
.alan-grup { display: flex; flex-direction: column; gap: 7px; }
.alan-etiket {
  font-size: var(--y-xs); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--soluk);
}
.alan-kutu { position: relative; display: flex; align-items: center; }
.alan {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--yuzey2);
  border: 2px solid var(--kart-kenar);
  border-radius: var(--r-alan);
  color: var(--yazi);
  font-weight: 600;
  font-size: var(--y-l);
  transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.alan::placeholder { color: #8b95a9; font-weight: 500; }
.alan:hover { border-color: #3a3f4b; }
.alan:focus { outline: none; border-color: var(--altin); box-shadow: 0 0 0 3px color-mix(in srgb, var(--altin) 22%, transparent); background: #262a33; }
.alan[aria-invalid="true"] { border-color: var(--hata); }
.alan[aria-invalid="true"]:focus { border-color: var(--hata); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hata) 25%, transparent); }
.alan--simgeli { padding-right: 48px; }
.alan-dugme {
  position: absolute; right: 6px;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  color: var(--soluk);
}
.alan-dugme:hover { color: var(--yazi); background: var(--yuzey3); }
textarea.alan { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; font-size: var(--y-m); }
select.alan { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; font-size: var(--y-m); }
select.alan option { background: var(--yuzey2); color: var(--yazi); }
.alan:disabled { opacity: .55; cursor: not-allowed; }
.alan--mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--y-s); }
.alan-ipucu { font-size: var(--y-s); color: var(--soluk); line-height: 1.45; }
.alan-hata { font-size: var(--y-s); color: var(--hata); font-weight: 600; line-height: 1.45; }

/* anahtar (role="switch") */
.anahtar {
  position: relative;
  display: inline-flex; flex: none;
  width: 46px; height: 26px;
}
.anahtar input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
  z-index: 1;
}
.anahtar__yol {
  width: 100%; height: 100%;
  border-radius: 13px;
  background: #343945;
  border: 2px solid #3f4451;
  transition: background var(--gecis), border-color var(--gecis);
}
.anahtar__yol::after {
  content: "";
  position: absolute; top: 4px; left: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #c3cad8;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  transition: translate .18s var(--yay), background var(--gecis);
}
.anahtar input:checked + .anahtar__yol { background: var(--altin); border-color: var(--altin-derinlik); }
.anahtar input:checked + .anahtar__yol::after { translate: 20px 0; background: #fff; }
.anahtar input:focus-visible + .anahtar__yol { outline: 2px solid var(--altin); outline-offset: 3px; }
.anahtar input:disabled { cursor: not-allowed; }
.anahtar input:disabled + .anahtar__yol { opacity: .5; }

/* ------------------------------------------------------------------ */
/* rozet                                                               */
/* ------------------------------------------------------------------ */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  border-radius: 7px;
  background: var(--yuzey2);
  border: 1px solid var(--kart-kenar);
  color: var(--soluk);
  font-size: var(--y-xs); font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.rozet .simge { width: 13px; height: 13px; }
.rozet--nokta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.rozet--iyi { color: var(--iyi); background: color-mix(in srgb, var(--iyi) 12%, var(--kart)); border-color: color-mix(in srgb, var(--iyi) 30%, transparent); }
.rozet--dikkat { color: var(--dikkat); background: color-mix(in srgb, var(--dikkat) 12%, var(--kart)); border-color: color-mix(in srgb, var(--dikkat) 30%, transparent); }
.rozet--hata { color: var(--hata); background: color-mix(in srgb, var(--hata) 12%, var(--kart)); border-color: color-mix(in srgb, var(--hata) 30%, transparent); }
.rozet--altin { color: var(--altin-yazi); background: var(--altin); border-color: var(--altin-derinlik); text-shadow: 1px 0 0 rgba(255, 255, 255, .6); }
.rozet--cerceve-altin { color: var(--altin); background: color-mix(in srgb, var(--altin) 10%, var(--kart)); border-color: color-mix(in srgb, var(--altin) 35%, transparent); }
.rozet--koyu { color: #e6e9ef; background: rgba(8, 10, 16, .72); border-color: rgba(255, 255, 255, .14); }
.rozet--mavi { color: var(--mavi-parlak); background: color-mix(in srgb, var(--mavi) 12%, var(--kart)); border-color: color-mix(in srgb, var(--mavi) 32%, transparent); }

/* komut çipi: oyuncunun yazacağı komut */
.komut {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 7px;
  background: #0b0c10;
  border: 1px solid var(--kart-kenar);
  color: var(--altin);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--y-s); font-weight: 600;
  user-select: text;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* oyuncu kafası                                                        */
/* ------------------------------------------------------------------ */
.kafa {
  --boy: 48px;
  position: relative;
  width: var(--boy); height: var(--boy); flex: none;
  border-radius: calc(var(--boy) * .2);
  overflow: hidden;
  background: var(--yuzey2);
  border: 2px solid #0b0c10;
  box-shadow: 0 3px 0 #0b0c10;
}
.kafa img { width: 100%; height: 100%; image-rendering: pixelated; }
.kafa--harf {
  display: grid; place-items: center;
  background: var(--altin);
  border-color: var(--altin-kenar);
  box-shadow: inset 0 3px 0 var(--altin-parlak), 0 3px 0 var(--altin-derinlik);
  color: var(--altin-yazi);
  font-weight: 900;
  font-size: calc(var(--boy) * .46);
  line-height: 1;
}

/* ------------------------------------------------------------------ */
/* ilerleme çubuğu                                                     */
/* ------------------------------------------------------------------ */
.cubuk {
  --oran: 0;
  position: relative;
  height: 8px;
  border-radius: 6px;
  background: #0b0c10;
  border: 1px solid var(--kart-kenar);
  overflow: hidden;
}
.cubuk__dolu {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--oran) * 100%);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--altin-parlak) 0 2px, var(--altin) 2px);
  transition: width .25s ease;
}
.cubuk--belirsiz .cubuk__dolu {
  width: 34%;
  animation: belirsiz 1.4s ease-in-out infinite;
}
@keyframes belirsiz { 0% { translate: -110% 0; } 100% { translate: 310% 0; } }
html.hareketsiz .cubuk--belirsiz .cubuk__dolu { width: 100%; opacity: .45; }
@media (prefers-reduced-motion: reduce) { .cubuk--belirsiz .cubuk__dolu { width: 100%; opacity: .45; } }

/* ------------------------------------------------------------------ */
/* sekmeler                                                            */
/* ------------------------------------------------------------------ */
.sekmeler {
  display: flex; gap: 4px;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--kart-kenar);
  border-radius: 14px;
  width: max-content; max-width: 100%;
  overflow-x: auto;
}
.sekme {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border-radius: 10px;
  color: var(--soluk);
  font-weight: 800; font-size: var(--y-s);
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--gecis), color var(--gecis);
}
.sekme:hover { color: var(--yazi); background: var(--yuzey2); }
.sekme[aria-selected="true"] {
  color: var(--altin-yazi);
  background: var(--altin);
  box-shadow: inset 0 2px 0 var(--altin-parlak), 0 3px 0 var(--altin-derinlik);
  text-shadow: 1px 0 0 rgba(255, 255, 255, .6);
}
.sekme .simge { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ */
/* bildirimler (sağ alt)                                               */
/* ------------------------------------------------------------------ */
.bildirimler {
  position: fixed; right: 18px; bottom: 18px;
  z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 36px));
  pointer-events: none;
}
.bildirim {
  --renk: var(--mavi);
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
  padding: 14px 12px 14px 14px;
  background: var(--kart);
  border: 1px solid var(--kart-kenar);
  border-left: 4px solid var(--renk);
  border-radius: 14px;
  box-shadow: var(--golge-yuzen);
  animation: bildirim-gir .32s var(--yay) both;
}
.bildirim.cikiyor { animation: bildirim-cik .2s ease both; }
@keyframes bildirim-gir { from { opacity: 0; translate: 24px 0; scale: .96; } }
@keyframes bildirim-cik { to { opacity: 0; translate: 24px 0; } }
.bildirim--iyi { --renk: var(--iyi); }
.bildirim--uyari { --renk: var(--dikkat); }
.bildirim--hata { --renk: var(--hata); }
.bildirim__simge { color: var(--renk); padding-top: 1px; }
.bildirim__govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bildirim__baslik { font-weight: 800; font-size: var(--y-m); }
.bildirim__metin { color: var(--soluk); font-size: var(--y-s); line-height: 1.45; overflow-wrap: anywhere; }
.bildirim__eylem { margin-top: 8px; align-self: flex-start; }
.bildirim__kapat { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--soluk); margin: -4px -2px 0 0; }
.bildirim__kapat:hover { background: var(--yuzey2); color: var(--yazi); }

/* ------------------------------------------------------------------ */
/* iletişim kutusu (<dialog>)                                           */
/* ------------------------------------------------------------------ */
.iletisim {
  width: min(480px, calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  padding: 0;
  margin: auto;
  border: 1px solid var(--kart-kenar);
  border-radius: 18px;
  background: var(--kart);
  color: var(--yazi);
  box-shadow: var(--golge-yuzen);
  overflow: hidden;
}
.iletisim[open] { display: flex; flex-direction: column; animation: iletisim-gir .26s var(--yay) both; }
.iletisim::backdrop { background: rgba(5, 6, 9, .72); animation: perde-gir .2s ease both; }
@keyframes iletisim-gir { from { opacity: 0; scale: .94; translate: 0 10px; } }
@keyframes perde-gir { from { opacity: 0; } }
.iletisim--genis { width: min(640px, calc(100vw - 48px)); }
.iletisim__ust { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 0; }
.iletisim__simge {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--altin);
  border: 2px solid var(--altin-kenar);
  box-shadow: inset 0 3px 0 var(--altin-parlak), 0 3px 0 var(--altin-derinlik);
  color: var(--altin-yazi);
}
.iletisim__simge--tehlike { background: var(--kirmizi); border-color: var(--kirmizi-kenar); box-shadow: inset 0 3px 0 var(--kirmizi-parlak), 0 3px 0 var(--kirmizi-derinlik); color: #3a0306; }
.iletisim__baslik { font-size: var(--y-xl); font-weight: 900; line-height: 1.25; padding-top: 2px; }
.iletisim__icerik { padding: 14px 22px 4px; overflow-y: auto; color: var(--soluk); font-size: var(--y-m); line-height: 1.55; display: flex; flex-direction: column; gap: 12px; }
.iletisim__icerik strong { color: var(--yazi); }
.iletisim__alt { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 18px 22px 22px; }
/* İletişim içindeki sekmeler (ör. AFK hesabı ekle: var olan / yeni): kaydırma kabı olduğu için sütunda ezilmesin, eşit böl */
.iletisim__icerik > * { flex-shrink: 0; }
.iletisim .sekmeler { width: 100%; }
.iletisim .sekme { flex: 1 1 0; justify-content: center; padding: 0 10px; }
@media (max-width: 480px) {
  .iletisim .sekmeler { overflow: hidden; }
  .iletisim .sekme { padding: 0 6px; gap: 6px; letter-spacing: 0; font-size: 12px; min-width: 0; }
  .iletisim .sekme .simge { display: none; }
}

/* ------------------------------------------------------------------ */
/* iskelet ve durum kutuları                                            */
/* ------------------------------------------------------------------ */
.iskelet {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #22252d 0%, #2b2f38 50%, #22252d 100%);
  background-size: 200% 100%;
  animation: iskelet 1.3s ease-in-out infinite;
}
@keyframes iskelet { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.durum-kutu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 28px 20px;
  text-align: center;
  color: var(--soluk);
}
.durum-kutu__simge {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--yuzey2);
  border: 1px solid var(--kart-kenar);
  color: var(--soluk);
}
.durum-kutu--hata .durum-kutu__simge { color: var(--hata); }
.durum-kutu--cevrimdisi .durum-kutu__simge { color: var(--dikkat); }
.durum-kutu__baslik { color: var(--yazi); font-weight: 800; font-size: var(--y-l); }
.durum-kutu__metin { max-width: 46ch; line-height: 1.5; }
.durum-kutu .d3, .durum-kutu .sade { margin-top: 6px; }

/* bilgi şeridi (kart içinde ya da sayfa üstünde) */
.serit {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mavi) 10%, var(--kart));
  border: 1px solid color-mix(in srgb, var(--mavi) 30%, transparent);
  color: #dbe6f5;
  font-size: var(--y-s);
  line-height: 1.45;
}
.serit .simge { color: var(--mavi-parlak); }
.serit--dikkat { background: color-mix(in srgb, var(--dikkat) 10%, var(--kart)); border-color: color-mix(in srgb, var(--dikkat) 32%, transparent); color: #f6e3cf; }
.serit--dikkat .simge { color: var(--dikkat); }
.serit--hata { background: color-mix(in srgb, var(--hata) 10%, var(--kart)); border-color: color-mix(in srgb, var(--hata) 32%, transparent); color: #f7dada; }
.serit--hata .simge { color: var(--hata); }
.serit--altin { background: color-mix(in srgb, var(--altin) 9%, var(--kart)); border-color: color-mix(in srgb, var(--altin) 30%, transparent); color: #f6eccb; }
.serit--altin .simge { color: var(--altin); }
.serit__metin { flex: 1; min-width: 0; }
.serit__metin strong { color: #fff; }