/* ============================================================
   FISILTI - Ortak stil (web uygulaması)
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  background: linear-gradient(135deg, #8E2DE2 0%, #DA22FF 35%, #FF6B6B 70%, #FF8E53 100%);
  background-attachment: fixed;
  color: #fff;
  padding: 20px;
}
.wrap { width: 100%; max-width: 440px; margin: 0 auto; }
.center-screen { min-height: calc(100vh - 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.logo { font-size: 28px; font-weight: 900; letter-spacing: 1px; text-align: center; margin-bottom: 6px; }
.logo small { display:block; font-size: 13px; font-weight: 600; opacity: 0.85; letter-spacing: 0; margin-top: 4px; }

.card {
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px; padding: 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.card h2 { font-size: 20px; font-weight: 800; margin-bottom: 16px; text-align: center; }

label { display:block; font-size: 13px; font-weight: 600; opacity: 0.9; margin: 12px 2px 6px; }
input, textarea {
  width: 100%; border: none; border-radius: 14px; padding: 14px;
  font-size: 16px; font-family: inherit; color: #333; background: #fff; outline: none;
}
textarea { resize: none; min-height: 110px; }
.btn {
  width: 100%; margin-top: 18px; padding: 15px; border: none; border-radius: 14px;
  cursor: pointer; font-size: 16px; font-weight: 800; color: #DA22FF; background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2); transition: transform 0.1s, opacity 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.secondary { background: rgba(255,255,255,0.18); color:#fff; border:1px solid rgba(255,255,255,0.4); box-shadow:none; }
.link { color: #fff; text-decoration: underline; cursor: pointer; font-weight: 700; }
.muted { font-size: 14px; opacity: 0.9; text-align: center; margin-top: 16px; }
.error { background: rgba(255,255,255,0.95); color: #d32f2f; border-radius: 12px; padding: 11px; margin-top: 12px; font-size: 14px; display: none; }
.success-box { background: rgba(255,255,255,0.95); color: #2e7d32; border-radius: 12px; padding: 11px; margin-top: 12px; font-size: 14px; display: none; }

/* Üst bar */
.topbar { display:flex; align-items:center; justify-content: space-between; margin-bottom: 18px; }
.topbar .logo { font-size: 22px; margin: 0; }
.topbar .out { font-size: 13px; opacity: 0.85; cursor: pointer; }

/* Link paylaş kutusu */
.share-box { background: rgba(255,255,255,0.95); color:#333; border-radius:16px; padding:14px; margin-top:14px; word-break: break-all; font-weight:700; font-size:15px; text-align:center; }
.share-actions { display:flex; gap:10px; margin-top:12px; }
.share-actions .btn { margin-top:0; flex:1; font-size:14px; padding:13px; }

/* Mesaj kartları */
.msg-card {
  background: rgba(255,255,255,0.95); color:#222; border-radius:18px; padding:16px; margin-bottom:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.msg-card .q { font-size:16px; line-height:1.5; }
.msg-card .meta { font-size:12px; color:#999; margin-top:8px; display:flex; justify-content:space-between; align-items:center; }
.msg-card .reply { margin-top:10px; padding:10px 12px; background:#f3e9ff; border-radius:12px; font-size:14px; color:#6a1b9a; }
.msg-actions { display:flex; gap:8px; margin-top:10px; }
.chip { font-size:12px; font-weight:700; padding:7px 12px; border-radius:20px; border:none; cursor:pointer; background:#f0f0f0; color:#555; }
.chip.danger { background:#ffebee; color:#c62828; }
.chip.primary { background:#DA22FF; color:#fff; }
.empty { text-align:center; opacity:0.9; padding:40px 10px; font-size:15px; }
.badge-new { background:#FF6B6B; color:#fff; font-size:10px; font-weight:800; padding:2px 7px; border-radius:10px; margin-left:6px; }
.loading-screen { text-align:center; padding:60px 0; font-size:15px; opacity:0.9; }