/* Spam Mesajı Yakala — Canlı Yarışma ortak stilleri (harici kaynak yok, internetsiz çalışır) */
:root {
  --bg: #0F172A;
  --card: #1E293B;
  --card-2: #273449;
  --line: #334155;
  --red: #EF4444;
  --green: #22C55E;
  --yellow: #FACC15;
  --blue: #3B82F6;
  --text: #F8FAFC;
  --muted: #94A3B8;
  --mono: "Cascadia Code", "Consolas", "Menlo", monospace;
  --shadow: 0 8px 32px rgba(0,0,0,0.3);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image: radial-gradient(circle at 20% 0%, rgba(59,130,246,0.12), transparent 45%),
                    radial-gradient(circle at 90% 100%, rgba(239,68,68,0.10), transparent 40%);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
[hidden] { display: none !important; }

.screen { display: none; flex-direction: column; align-items: center; min-height: 100vh; padding: 20px 16px 32px; width: 100%; }
.screen.active { display: flex; animation: fadeIn 300ms ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes pulse { to { transform: scale(1.08); } }

/* ---------- Butonlar & formlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 12px; border: 3px solid transparent;
  font-size: 1rem; font-weight: 700; color: var(--text); background: var(--card-2);
  transition: transform 120ms ease, filter 120ms ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; transform: none; }
.btn-safe { background: var(--green); color: #052E16; border-color: #16A34A; }
.btn-spam { background: var(--red); color: #fff; border-color: #B91C1C; }
.btn-yellow { background: var(--yellow); color: #422006; border-color: #CA8A04; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.btn-sm { min-height: 38px; padding: 6px 14px; font-size: 0.9rem; }
.btn-xl { min-height: 64px; font-size: 1.3rem; padding: 14px 32px; }

.field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.field label { font-weight: 700; color: var(--muted); font-size: 0.95rem; }
.input, .select {
  min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 3px solid var(--line);
  background: var(--card); color: var(--text); font-size: 1.1rem; font-family: inherit; width: 100%;
}
.input:focus, .select:focus { border-color: var(--yellow); outline: none; }
.input::placeholder { color: #64748B; }
.error { color: #FCA5A5; font-weight: 700; min-height: 1.5em; text-align: center; }

.panel { background: var(--card); border: 3px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- Başlık ---------- */
.logo { text-align: center; }
.logo .badge { font-size: 3.2rem; line-height: 1; display: inline-block; animation: bob 2.6s ease-in-out infinite; }
.logo h1 { font-size: 2.2rem; margin-top: 6px; color: var(--yellow); text-shadow: 3px 3px 0 #B91C1C, 6px 6px 0 rgba(0,0,0,0.35); }
.logo .tagline { color: var(--muted); font-style: italic; margin-top: 6px; }

/* ---------- Mesaj kartları ---------- */
.msg-card { width: 100%; background: var(--card); border: 3px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; transition: border-color 200ms, background 200ms; }
.msg-card.enter { animation: slideUp 380ms cubic-bezier(.2,.9,.3,1.2); }
.msg-card.is-spam { border-color: var(--red); }
.msg-card.is-safe { border-color: var(--green); }
.card-kind { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--muted); border-bottom: 2px solid var(--line); }
.sms-head { padding: 10px 14px 0; font-size: 0.9rem; color: var(--muted); }
.sms-head b { color: var(--text); font-family: var(--mono); }
.sms-body { padding: 14px; display: flex; }
.bubble { background: var(--blue); color: #fff; border-radius: 18px 18px 18px 4px; padding: 12px 16px; max-width: 92%; font-family: var(--mono); white-space: pre-wrap; word-break: break-word; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.mail-head { margin: 0; padding: 10px 14px; font-size: 0.9rem; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; border-bottom: 2px solid var(--line); background: rgba(15,23,42,0.35); }
.mail-head dt { color: var(--muted); font-weight: 700; }
.mail-head dd { margin: 0; font-family: var(--mono); word-break: break-all; }
.mail-head dd.subj { font-family: inherit; font-weight: 700; word-break: normal; }
.mail-body { padding: 16px 14px; font-family: var(--mono); white-space: pre-wrap; word-break: break-word; }
.attach { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; padding: 6px 10px; border: 2px dashed var(--muted); border-radius: 8px; font-size: 0.85rem; color: var(--muted); }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #0B1222; border-bottom: 2px solid var(--line); }
.dots { display: flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: #EF4444; } .dots i:nth-child(2) { background: #FACC15; } .dots i:nth-child(3) { background: #22C55E; }
.addr { flex: 1; min-width: 0; background: var(--card-2); border-radius: 999px; padding: 4px 12px; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup-body { padding: 20px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.popup-title { font-size: 1.2rem; font-weight: 700; }
.popup-text { font-family: var(--mono); white-space: pre-wrap; word-break: break-word; }
.popup-ctas { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.popup-cta { display: inline-block; padding: 8px 18px; border-radius: 8px; font-weight: 700; background: #F97316; color: #fff; }
.popup-cta.neutral { background: var(--card-2); color: var(--text); border: 2px solid var(--line); }
.card-big { font-size: 1.35rem; }
.card-big .mail-head, .card-big .sms-head, .card-big .addr { font-size: 1.05rem; }

/* ---------- Rozetler & çubuklar ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 0.88rem; background: var(--card-2); border: 2px solid var(--line); }
.chip.red { background: rgba(239,68,68,0.15); border-color: var(--red); color: #FECACA; }
.chip.green { background: rgba(34,197,94,0.15); border-color: var(--green); color: #BBF7D0; }
.bar { height: 14px; background: var(--card-2); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--yellow); transition: width 400ms ease; }
.bar.red > i { background: var(--red); } .bar.green > i { background: var(--green); } .bar.gray > i { background: #64748B; }

/* Süre çubuğu */
.timebar { width: 100%; height: 12px; background: var(--card-2); border-radius: 999px; overflow: hidden; }
.timebar > i { display: block; height: 100%; width: 100%; background: var(--yellow); transform-origin: left; }
.timebar.low > i { background: var(--red); }

/* Konfeti (kütüphanesiz) */
.cf-piece { position: fixed; top: -12px; width: 10px; height: 14px; z-index: 100; pointer-events: none; animation: cfFall linear forwards; }
@keyframes cfFall { to { transform: translateY(105vh) rotate(720deg); opacity: 0.6; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
#code::placeholder { text-transform: none; letter-spacing: normal; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }