/* ────────────────────────────────────────────────────────────────
   EFSANE DESTEK — HACKER ERROR SAYFASI
   Terminal + matrix rain + glitch chromatic aberration.
   Tone: body[data-tone="danger|warn"] override eder; yoksa brand (teal).
   ──────────────────────────────────────────────────────────────── */

.err-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(47,179,173,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-2, #0C151A), var(--bg, #080E11));
  color: var(--ink, #E9F1F3);
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(18px, 5vw, 56px);
  overflow: hidden;
  position: relative;
}
body[data-tone="warn"]   .err-body,
body[data-tone="warn"].err-body   { background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,194,74,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-2, #0C151A), var(--bg, #080E11)); }
body[data-tone="danger"] .err-body,
body[data-tone="danger"].err-body { background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,122,133,0.09), transparent 60%),
    linear-gradient(180deg, var(--bg-2, #0C151A), var(--bg, #080E11)); }

/* ── Katmanlar ─────────────────────────────────────────────────── */
.err-rain { position: fixed; inset: 0; z-index: 0; opacity: 0.32; pointer-events: none; }
.err-scan {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px,
              rgba(47,179,173,0.03) 3px, rgba(47,179,173,0.03) 4px);
  mix-blend-mode: screen;
}
.err-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}
.err-shell {
  position: relative; z-index: 2;
  width: min(720px, 100%);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 3vw, 26px);
}

/* ── Büyük glitchy dijital kod ─────────────────────────────────── */
.err-big { display: flex; justify-content: center; gap: clamp(4px, 1vw, 12px); line-height: 1; }
.err-big__digit {
  position: relative;
  font: 600 clamp(90px, 19vw, 186px)/1 var(--font-mono, monospace);
  color: var(--brand, #2FB3AD);
  padding: 0 6px;
  text-shadow: 0 0 8px rgba(47,179,173,0.55), 0 0 32px rgba(47,179,173,0.3);
}
.err-big__digit::before, .err-big__digit::after {
  content: attr(data-c);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.7; pointer-events: none; mix-blend-mode: screen;
}
.err-big__digit::before { color: #FF6D8C; animation: glitchA 3.4s infinite steps(1); }
.err-big__digit::after  { color: #4ECDE0; animation: glitchB 3.4s infinite steps(1) .15s; }

body[data-tone="danger"] .err-big__digit {
  color: #FF7A85; text-shadow: 0 0 8px rgba(255,122,133,0.55), 0 0 32px rgba(255,122,133,0.3);
}
body[data-tone="warn"] .err-big__digit {
  color: #FFC24A; text-shadow: 0 0 8px rgba(255,194,74,0.55), 0 0 32px rgba(255,194,74,0.3);
}

@keyframes glitchA {
  0%,90%,100% { transform: translate(-3px,0); clip-path: inset(0 0 0 0); }
  91% { transform: translate(-7px,2px); clip-path: inset(20% 0 30% 0); }
  93% { transform: translate( 2px,-3px); clip-path: inset(60% 0 10% 0); }
  95% { transform: translate(-5px, 4px); clip-path: inset(40% 0 40% 0); }
}
@keyframes glitchB {
  0%,88%,100% { transform: translate(3px,0); clip-path: inset(0 0 0 0); }
  89% { transform: translate( 6px,-2px); clip-path: inset(10% 0 60% 0); }
  92% { transform: translate(-3px, 3px); clip-path: inset(50% 0 30% 0); }
  94% { transform: translate( 4px,-4px); clip-path: inset(30% 0 40% 0); }
}

/* ── Terminal penceresi ────────────────────────────────────────── */
.err-window {
  width: 100%;
  background: linear-gradient(180deg, rgba(11,22,24,0.94), rgba(4,10,12,0.98));
  border: 1px solid rgba(47,179,173,0.32);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 34px 90px -30px rgba(0,0,0,0.95), inset 0 1px 0 rgba(47,179,173,0.08);
  position: relative;
}
body[data-tone="danger"] .err-window { border-color: rgba(255,122,133,0.30); }
body[data-tone="warn"]   .err-window { border-color: rgba(255,194,74,0.30); }
.err-window::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,179,173,0.85), transparent);
}
body[data-tone="danger"] .err-window::before { background: linear-gradient(90deg, transparent, rgba(255,122,133,0.85), transparent); }
body[data-tone="warn"]   .err-window::before { background: linear-gradient(90deg, transparent, rgba(255,194,74,0.85), transparent); }

.err-window__head {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: rgba(6,14,16,0.92);
  border-bottom: 1px solid rgba(47,179,173,0.16);
}
.err-dots { display: inline-flex; gap: 7px; }
.err-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); }
.err-dot--r { background: #FF7A85; box-shadow: 0 0 8px rgba(255,122,133,0.5); }
.err-dot--y { background: #FFC24A; box-shadow: 0 0 8px rgba(255,194,74,0.5); }
.err-dot--g { background: #5EF0C7; box-shadow: 0 0 8px rgba(94,240,199,0.5); }
.err-window__title {
  font-family: var(--font-mono, monospace); font-size: 12px;
  color: var(--ink-2, #93A9B3); letter-spacing: 0.04em;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.err-window__badge {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand, #2FB3AD);
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(47,179,173,0.4);
  background: rgba(47,179,173,0.08);
  text-shadow: 0 0 12px rgba(47,179,173,0.55);
  white-space: nowrap;
}
body[data-tone="danger"] .err-window__badge { color:#FF7A85; border-color:rgba(255,122,133,.45); background:rgba(255,122,133,.1); text-shadow:0 0 12px rgba(255,122,133,.55); }
body[data-tone="warn"]   .err-window__badge { color:#FFC24A; border-color:rgba(255,194,74,.45); background:rgba(255,194,74,.1); text-shadow:0 0 12px rgba(255,194,74,.55); }

.err-window__body { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 18px; }

/* ── Terminal log ──────────────────────────────────────────────── */
.err-log {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 12.5px; line-height: 1.7;
  color: #B5DFDB;
  white-space: pre-wrap; word-break: break-word;
  min-height: 8em;
}
.err-log__line { display: block; opacity: 0; animation: logIn 0.4s ease forwards; }
.err-log__k    { color: rgba(197,245,240,0.5); }
.err-log__ok   { color: #5EF0C7; text-shadow: 0 0 6px rgba(94,240,199,0.45); }
.err-log__warn { color: #FFC24A; text-shadow: 0 0 6px rgba(255,194,74,0.45); }
.err-log__err  { color: #FF7A85; text-shadow: 0 0 6px rgba(255,122,133,0.55); }
.err-log__b    { color: var(--brand, #2FB3AD); text-shadow: 0 0 6px rgba(47,179,173,0.5); }
@keyframes logIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

/* ── Suggest hint ──────────────────────────────────────────────── */
.err-hint {
  display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(47,179,173,0.28); border-radius: 8px;
  background: rgba(6,14,16,0.68);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2, #93A9B3);
}
body[data-tone="danger"] .err-hint { border-color: rgba(255,122,133,0.26); }
body[data-tone="warn"]   .err-hint { border-color: rgba(255,194,74,0.26); }
.err-hint__label {
  font-family: var(--font-mono, monospace); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--brand, #2FB3AD); padding-top: 2px; white-space: nowrap;
}
body[data-tone="danger"] .err-hint__label { color: #FF7A85; }
body[data-tone="warn"]   .err-hint__label { color: #FFC24A; }
.err-hint p { margin: 0; }

/* ── Aksiyon butonları ─────────────────────────────────────────── */
.err-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.err-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px;
  border: 1px solid rgba(47,179,173,0.22);
  color: var(--ink-2, #93A9B3); text-decoration: none; background: transparent;
  font-family: var(--font-mono, monospace); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.err-btn:hover {
  color: var(--brand, #2FB3AD); border-color: rgba(47,179,173,0.55);
  background: rgba(47,179,173,0.06); transform: translateY(-1px);
  box-shadow: 0 0 22px -6px rgba(47,179,173,0.55);
}
.err-btn:focus-visible { outline: 2px solid var(--brand, #2FB3AD); outline-offset: 2px; }
.err-btn--primary {
  color: #041012; background: linear-gradient(90deg, var(--brand, #2FB3AD), var(--brand-2, #3ECEC7));
  border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(47,179,173,0.9), 0 0 22px -8px rgba(47,179,173,0.55);
}
.err-btn--primary:hover { color: #041012; }
.err-btn--ghost { color: var(--ink-3, #5E747F); border-style: dashed; border-color: rgba(47,179,173,0.16); }

/* ── Komut satırı ──────────────────────────────────────────────── */
.err-cmd { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--ink-2, #93A9B3); flex-wrap: wrap; }
.err-cmd__pfx { color: var(--brand, #2FB3AD); }
body[data-tone="danger"] .err-cmd__pfx, body[data-tone="danger"] .err-cmd__blink { color: #FF7A85; }
body[data-tone="warn"]   .err-cmd__pfx, body[data-tone="warn"]   .err-cmd__blink { color: #FFC24A; }
.err-cmd__blink { color: var(--brand, #2FB3AD); animation: cmdBlink 1s steps(1) infinite; }
@keyframes cmdBlink { 50% { opacity: 0; } }

/* ── Meta bar ──────────────────────────────────────────────────── */
.err-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-family: var(--font-mono, monospace); font-size: 11px; color: var(--ink-3, #5E747F);
  letter-spacing: 0.06em;
}
.err-meta__k { color: rgba(94,116,127,0.7); }
.err-meta__v { color: var(--ink-2, #93A9B3); }
.err-meta__sep { color: rgba(94,116,127,0.5); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .err-window__body { padding: 18px 15px 16px; }
  .err-window__title { font-size: 11px; }
  .err-log { font-size: 11.5px; }
  .err-actions { flex-direction: column; align-items: stretch; }
  .err-btn { justify-content: center; }
}

/* ── Hareket azaltma ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .err-big__digit::before, .err-big__digit::after,
  .err-log__line, .err-cmd__blink { animation: none !important; }
  .err-log__line { opacity: 1 !important; }
  .err-big__digit::before, .err-big__digit::after { opacity: 0; }
}