/* ===========================================================================
   Wall-E · panel biçimlendirmesi
   ---------------------------------------------------------------------------
   Çerçeve yok, derleme yok, harici istek yok. Yazı tipi sistem yığınından
   gelir — cihaz çevrimdışıyken de panel aynı görünmelidir.
   Renk dili docs/panel-tasarimi.html ile birebir aynıdır:
   indigo nötrler + amber vurgu + kalp için pembe.
   ======================================================================== */

/* ── Renk ve ölçü belirteçleri ──────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --bg:        #F1F4FB;
  --surface:   #FFFFFF;
  --surface-2: #E7EBF7;
  --ink:       #131731;
  --ink-soft:  #333A5E;
  --muted:     #5A6288;
  --line:      #D6DCEE;
  --line-soft: #E6EAF5;

  --beacon:    #A96A00;   /* amber vurgu — açık tema */
  --beacon-bg: #FBEFD8;
  --signal:    #B8365F;
  --signal-bg: #FBE4EC;
  --good:      #1F6F55;
  --good-bg:   #DDF0E7;
  --risk:      #A93A32;
  --risk-bg:   #FAE3E1;
  --pink:      #FF7BA8;   /* kalp */
  --pink-koyu: #E0507F;

  /* Toast metni. Açık temada --good/--risk koyu tonlar, üzerine beyaz gider.
     Koyu temada bu iki renk pastelleşiyor; orada koyu metin okunur olan. */
  --toast-ink: #FFFFFF;

  --shadow:    0 1px 2px rgba(19, 23, 49, .06), 0 8px 24px rgba(19, 23, 49, .06);
  --shadow-ust: 0 -2px 14px rgba(19, 23, 49, .07);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --r:    10px;
  --r-lg: 16px;
  --r-sm: 8px;
  --maxw: 680px;
  --sekme-y: 60px;   /* alt sekme çubuğunun yüksekliği */
}

/* Koyu tema — sistem tercihi */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0C0F20;
    --surface:   #151A33;
    --surface-2: #1D2342;
    --ink:       #E7EAF9;
    --ink-soft:  #C3C9E6;
    --muted:     #949CC2;
    --line:      #2A3159;
    --line-soft: #212747;
    --beacon:    #F3BA4E;
    --beacon-bg: #33280E;
    --signal:    #F0799F;
    --signal-bg: #38182A;
    --good:      #55C79C;
    --good-bg:   #10301F;
    --risk:      #F0817A;
    --risk-bg:   #351916;
    --toast-ink: #0C0F20;   /* pastel zemine koyu metin — kontrast ~10:1 */
    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-ust: 0 -2px 14px rgba(0, 0, 0, .38);
  }
}

/* Koyu tema — açık seçim (ileride bir düğme eklenirse hazır) */
:root[data-theme="dark"] {
  --bg:        #0C0F20;
  --surface:   #151A33;
  --surface-2: #1D2342;
  --ink:       #E7EAF9;
  --ink-soft:  #C3C9E6;
  --muted:     #949CC2;
  --line:      #2A3159;
  --line-soft: #212747;
  --beacon:    #F3BA4E;
  --beacon-bg: #33280E;
  --signal:    #F0799F;
  --signal-bg: #38182A;
  --good:      #55C79C;
  --good-bg:   #10301F;
  --risk:      #F0817A;
  --risk-bg:   #351916;
  --toast-ink: #0C0F20;   /* pastel zemine koyu metin — kontrast ~10:1 */
  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-ust: 0 -2px 14px rgba(0, 0, 0, .38);
}


/* ── Temel ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.015em; font-weight: 700; }
p  { margin: 0; }
dl, dd, dt { margin: 0; }

.mono { font-family: var(--mono); font-size: .86em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--beacon);
  outline-offset: 2px;
  border-radius: 6px;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ── Giriş ekranı ───────────────────────────────────────────────────────── */
.giris {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 70% 50% at 30% 12%, color-mix(in srgb, var(--beacon) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 82% 88%, color-mix(in srgb, var(--pink) 12%, transparent), transparent 70%),
    var(--bg);
}

.giris-kutu {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 28px 22px 24px;
  text-align: center;
}

.giris-marka {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--beacon-bg);
  color: var(--beacon);
}

.giris-baslik { font-size: 26px; }
.giris-alt    { color: var(--muted); font-size: 14px; margin-top: 6px; }

.giris .alan { margin-top: 20px; text-align: left; }

.giris-hata {
  margin-top: 12px;
  background: var(--risk-bg);
  color: var(--risk);
  border: 1px solid color-mix(in srgb, var(--risk) 34%, var(--line));
  border-radius: var(--r);
  padding: 9px 12px;
  font-size: 13.5px;
  text-align: left;
}

.giris .dugme { margin-top: 16px; }


/* ── Uygulama kabuğu ────────────────────────────────────────────────────── */
.uygulama {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.ust {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(140deg, #F5B830, #B87708);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.ust-metin { min-width: 0; flex: 1; }
.ust-ad    { font-weight: 600; font-size: 15px; line-height: 1.2;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ust-durum {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}

.nokta {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 20%, transparent);
  transition: background .2s, box-shadow .2s;
}
.nokta[data-durum="acik"]  { background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.nokta[data-durum="kapali"]{ background: var(--risk);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--risk) 22%, transparent); }

.rozet {
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--beacon-bg);
  color: var(--beacon);
  white-space: nowrap;
}
.rozet.canli { background: var(--surface-2); color: var(--muted); }
.rozet.canli[data-acik="true"] { background: var(--good-bg); color: var(--good); }

.ikon-dugme {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.ikon-dugme:hover { background: var(--surface-2); color: var(--ink); }

.ana {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 14px calc(var(--sekme-y) + 26px + env(safe-area-inset-bottom));
}


/* ── Görünümler ─────────────────────────────────────────────────────────── */
.gorunum { display: flex; flex-direction: column; gap: 14px; }

.bolum-baslik {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px;
}
.bolum-baslik.ic { margin-top: 0; margin-bottom: 10px; }
.bolum-baslik h2 { font-size: 19px; }


/* ── Kartlar ────────────────────────────────────────────────────────────── */
.kart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 16px;
}
.kart-baslik { font-size: 14px; font-weight: 600; color: var(--ink); }
.kart .kart-baslik + * { margin-top: 10px; }

.kart.tehlike { border-color: color-mix(in srgb, var(--risk) 32%, var(--line)); }

.ipucu { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.bos   { font-size: 13.5px; color: var(--muted); padding: 14px 2px; text-align: center; }


/* ── Form alanları ──────────────────────────────────────────────────────── */
.alan + .alan { margin-top: 14px; }

.alan > label,
.giris .alan > label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

input[type="text"], input[type="password"], input[type="date"], input[type="time"],
input[type="datetime-local"], select, textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  color: var(--ink);
  font-size: 15px;
  transition: border-color .15s, background .15s;
}
/* :focus DEĞİL :focus-is-not-visible. Niteliksiz `input:focus { outline:none }`
   yukarıdaki genel :focus-visible kuralını özgüllükle yeniyordu ve klavyeyle
   gezen biri checkbox / kaydırıcı / renk seçicide odağın NEREDE olduğunu
   göremiyordu (bu üçünde border-color'ın görünür bir karşılığı yok).
   Odak halkası yalnız klavye odağı olmadığında kaldırılır. */
input:focus, select:focus, textarea:focus {
  border-color: var(--beacon);
  background: var(--surface);
}
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px top 51%, right 9px top 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--beacon);
  background: transparent;
  padding: 0;
  border: 0;
}

input[type="color"] {
  width: 46px; height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
}
.renk-satir { display: flex; align-items: center; gap: 10px; }

.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ikili .alan + .alan { margin-top: 0; }
.onay-alan { display: flex; align-items: flex-end; }

.onay {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--ink-soft);
  cursor: pointer;
  padding: 6px 0;
  margin-top: 10px;
}
.onay input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--beacon);
  flex: none;
  margin: 0;
  cursor: pointer;
}

.sayac-satir {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.sayac.asti { color: var(--risk); font-weight: 600; }

.katlanir {
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.katlanir > summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--beacon);
  list-style: none;
  padding: 2px 0;
}
.katlanir > summary::-webkit-details-marker { display: none; }
.katlanir > summary::before { content: "+ "; font-family: var(--mono); }
.katlanir[open] > summary::before { content: "− "; }
.katlanir > .alan { margin-top: 12px; }
.katlanir > .dugme { margin-top: 12px; }


/* ── Düğmeler ───────────────────────────────────────────────────────────── */
.dugme {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--r);
  padding: 11px 16px;
  font-size: 14.5px;
  font-weight: 600;
  transition: filter .15s, background .15s, opacity .15s;
  min-height: 44px;
}
.dugme.genis  { display: block; width: 100%; margin-top: 14px; }
.dugme.kucuk  { padding: 6px 11px; font-size: 12.5px; min-height: 32px; font-weight: 500; }

.dugme.birincil { background: var(--beacon); border-color: var(--beacon); color: var(--bg); }
.dugme.ikincil  { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.dugme.riskli   { background: var(--risk-bg); color: var(--risk);
                  border-color: color-mix(in srgb, var(--risk) 38%, var(--line)); }

.dugme:hover:not(:disabled) { filter: brightness(1.06); }
.dugme.ikincil:hover:not(:disabled) { background: var(--surface-2); filter: none; }
.dugme:disabled { opacity: .45; cursor: not-allowed; }

.dugme-satir { display: flex; gap: 10px; }
.dugme-satir .dugme { flex: 1; }

.dortlu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dortlu .dugme[aria-pressed="true"] {
  background: var(--beacon-bg); color: var(--beacon);
  border-color: color-mix(in srgb, var(--beacon) 40%, var(--line));
}


/* ── Kalp düğmesi (K-53) ────────────────────────────────────────────────── */
.kalp {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-lg);
  padding: 18px 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--pink-koyu));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--pink) 38%, transparent);
  touch-action: none;               /* basılı tutarken sayfa kaymasın */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s;
}
.kalp:active,
.kalp.basili { transform: scale(.985); }

.kalp-dolgu {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--dolgu, 0%);
  background: rgba(255, 255, 255, .28);
  transition: width .1s linear;
  pointer-events: none;
}
.kalp-ic {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.kalp.basili .kalp-ic svg { animation: atis .5s ease-in-out infinite; }
@keyframes atis { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.28); } }


/* ── Ölçüm listesi (cihaz) ──────────────────────────────────────────────── */
.olcum { display: flex; flex-direction: column; }
.olcum .satir {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.olcum .satir:last-child { border-bottom: 0; }
.olcum dt { font-size: 14px; color: var(--ink-soft); }
.olcum dd { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink);
            text-align: right; }


/* ── Listeler (arşiv, yetenek, dilek, özel gün) ─────────────────────────── */
.liste { display: flex; flex-direction: column; gap: 10px; }
.liste.ince { gap: 8px; margin-top: 12px; }

.mesaj-kart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 12px 13px;
}
.mesaj-kart.planli { opacity: .62; border-style: dashed; }

.mesaj-metin { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }

.rozet-satir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px;
}

.etiket {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.etiket.iyi   { background: var(--good-bg);   color: var(--good); }
.etiket.amber { background: var(--beacon-bg); color: var(--beacon); }
.etiket.pembe { background: var(--signal-bg); color: var(--signal); }
.etiket.kotu  { background: var(--risk-bg);   color: var(--risk); }
.etiket.sade  { background: transparent; color: var(--muted); padding-left: 0; }

.satir-dugme {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: var(--ink-soft);
  min-height: 46px;
}

/* Aç/kapat anahtarı */
.anahtar {
  position: relative;
  width: 40px; height: 23px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex: none;
  transition: background .18s, border-color .18s;
}
.anahtar::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--muted);
  top: 3px; left: 3px;
  transition: left .18s, background .18s;
}
.satir-dugme[aria-pressed="true"] .anahtar { background: var(--beacon); border-color: var(--beacon); }
.satir-dugme[aria-pressed="true"] .anahtar::after { background: #fff; left: 20px; }

/* Sil / iptal düğmesi */
.sil-dugme {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--risk) 30%, var(--line));
  background: transparent;
  color: var(--risk);
  border-radius: var(--r-sm);
  font-size: 16px;
  line-height: 1;
}
.sil-dugme:hover { background: var(--risk-bg); }

.dilek-form { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.dilek-form .alan { flex: 1; margin-top: 0; }
.dilek-form .dugme { margin-bottom: 0; }

.dilek-satir, .ozel-satir {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 9px 11px;
  font-size: 14px;
}
.dilek-satir span, .ozel-satir .ozel-ad { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ozel-satir .ozel-tarih { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.ozel-ekle { margin-top: 16px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.ozel-ekle .ikili { margin-top: 0; }


/* ── Sayfalama ──────────────────────────────────────────────────────────── */
.sayfalama {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px;
}
.sayfalama .dugme { flex: none; }
.sayfa-bilgi { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }


/* ── OTA ilerleme, ekran görüntüsü, log ─────────────────────────────────── */
.ilerleme {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.ilerleme-dolgu {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--beacon);
  transition: width .3s;
}

.ss-resim {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  image-rendering: pixelated;
}

.log-akis {
  margin: 0;
  max-height: 300px;
  overflow: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log-akis .lg-info  { color: var(--ink-soft); }
.log-akis .lg-warn  { color: var(--beacon); }
.log-akis .lg-error { color: var(--risk); font-weight: 600; }
.log-akis .lg-ts    { color: var(--muted); }


/* ── Alt sekme çubuğu (K-36) ────────────────────────────────────────────── */
.sekmeler {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-ust);
  padding-bottom: env(safe-area-inset-bottom);
}

.sekme {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  height: var(--sekme-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  position: relative;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.sekme svg { opacity: .62; transition: opacity .15s, transform .15s; }
.sekme.acik { color: var(--beacon); }
.sekme.acik svg { opacity: 1; transform: translateY(-1px); }
.sekme.acik::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--beacon);
}


/* ── Bildirim (toast) ───────────────────────────────────────────────────── */
.toast-yuva {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--sekme-y) + 14px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  max-width: 420px;
  width: fit-content;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r);
  padding: 10px 15px;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s, transform .22s;
  overflow-wrap: anywhere;
}
.toast.acik { opacity: 1; transform: none; }

/* Metin rengi var(--toast-ink): açık temada beyaz, koyu temada koyu zemin.
   Koyu temada --good (#55C79C) ve --risk (#F0817A) pastelleşiyor; üzerine
   beyaz yazınca kontrast ~2:1'e düşüyordu — 13.5px metin için 4.5:1 eşiğinin
   çok altı. Toast panelin TEK hata geri bildirim kanalı; okunamazsa
   kullanıcı hatayı hiç görmemiş olur. */
.toast.iyi   { background: var(--good); color: var(--toast-ink); }
.toast.kotu  { background: var(--risk); color: var(--toast-ink); }
.toast.pembe { background: var(--pink-koyu); color: #fff; }


/* ── Geniş ekran ────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .ana { padding-left: 20px; padding-right: 20px; }
  .dortlu { grid-template-columns: repeat(4, 1fr); }
  .toast-yuva { bottom: calc(var(--sekme-y) + 20px); }
}