.topbar{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 16px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.05);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .logo{font-size:200px;text-decoration:none}
.nav-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav-links a{padding:8px 10px;border-radius:10px;text-decoration:none;color:#1f2937;border:1px solid transparent}
.nav-links a:hover{background:#f3f4f6}
.btn{border:1px solid rgba(0,0,0,.08);padding:10px 14px;border-radius:12px;text-decoration:none;display:inline-block}
.btn-primary{background:#2563eb;color:#fff;border-color:transparent}
.btn-outline{background:#fff;color:#1f2937}
.btn-ghost{background:transparent}
.hidden{display:none}
:root{--bg:#f7fafc;--ink:#1f2937;--brand:#2563eb;--brand-2:#10b981}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.container{max-width:1000px;margin:0 auto;padding:24px}
.topbar{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 16px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.05);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .logo{font-size:20px}
.nav-actions{display:flex;gap:8px;align-items:center}
.btn{border:1px solid rgba(0,0,0,.08);padding:10px 14px;border-radius:12px;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(0.98)}
.btn-primary{background:var(--brand);color:#fff;border-color:transparent}
.btn-outline{background:#fff;color:var(--ink)}
.btn-ghost{background:transparent}
.hero{background:linear-gradient(135deg,#d1fae5,#bfdbfe);padding:80px 24px;text-align:center;border-radius:20px;margin:24px 0}
.hero h1{font-size:42px;margin:0 0 12px}
.hero p{margin:0 0 22px;font-size:18px}
.layout{display:grid;grid-template-columns:260px 1fr;gap:16px;min-height:calc(100vh - 70px);padding:16px}
.sidebar{background:#fff;border-radius:16px;padding:12px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.sidebar h3{margin:8px 10px}
.sidebar-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.sidebar-list li{background:#f9fafb;padding:10px;border-radius:10px}
.sidebar-btn{display:block;width:100%;text-align:left;background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;padding:10px 12px}
.sidebar-btn a{color:#1f2937;text-decoration:none;display:block}
.main{background:#fff;border-radius:16px;padding:12px;box-shadow:0 2px 12px rgba(0,0,0,.05);position:relative}
#chat-window{min-height:360px;border:1px solid #e5e7eb;border-radius:12px;padding:12px;overflow:auto}
.message{padding:8px 10px;border-radius:10px;margin:8px 0;max-width:80%}
.message.user{background:#eff6ff;margin-left:auto}
.message.bot{background:#f3f4f6}
.composer{display:flex;gap:8px;margin-top:12px}
.composer input{flex:1;padding:12px;border-radius:10px;border:1px solid #d1d5db}
.composer button{padding:12px 16px;border-radius:10px;border:1px solid #cbd5e1;background:var(--brand-2);color:#fff}
.hidden{display:none}
/* Safety: prevent overlays from blocking clicks */
.overlay,.backdrop{pointer-events:none}
.auth{max-width:360px;margin:24px auto;display:flex;flex-direction:column;gap:10px}
.auth input,.auth button{padding:12px;border-radius:10px;border:1px solid #d1d5db}
.auth button{background:#2563eb;color:#fff;border-color:transparent}
.profile-card{max-width:520px;margin:24px auto;background:#fff;padding:16px;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid #e5e7eb;margin-bottom:12px}
/* Genel navbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-logo {
  height: 200px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 12px;
}
.nav-links a {
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  color: #1f2937;
}
.nav-links a:hover {
  background: #f3f4f6;
}

/* Menü butonu (balık ikonu) */
.nav-toggle {
  display: none;
  font-size: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* --- Mobil görünüm --- */
@media (max-width: 900px) {
  .nav-toggle {
    display: block; /* mobilde balık ikonu çıksın */
  }
  .nav-links {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: #fff;
    display: grid;
    gap: 10px;
    padding: 12px 16px;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}