/* ============================================================
   VocaLuma — main.css
   Design System: Variables, Reset, Layout, Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg:         #000000;
  --s1:         #0A0A0A;
  --s2:         #111111;
  --s3:         #1A1A1A;
  --b1:         #222222;
  --b2:         #2E2E2E;

  --accent:     #7B6EF6;
  --adim:       rgba(123,110,246,0.14);
  --aglow:      rgba(123,110,246,0.28);
  --teal:       #4ECDC4;
  --tdim:       rgba(78,205,196,0.13);
  --coral:      #FF6B6B;
  --cdim:       rgba(255,107,107,0.13);
  --amber:      #FFD93D;
  --adim2:      rgba(255,217,61,0.13);
  --green:      #6BCB77;
  --gdim:       rgba(107,203,119,0.13);

  --tx:         #F2F2F2;
  --tx2:        #888888;
  --tx3:        #555555;

  --nav-h:      56px;
  --sb-w:       260px;
  --serif:      'Bricolage Grotesque', system-ui, sans-serif;
  --sans:       'Bricolage Grotesque', system-ui, sans-serif;
  --r1: 6px; --r2: 10px; --r3: 16px; --r4: 22px;
}

/* ── Light Mode — media query ──────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:   #F8F7FF; --s1: #FFFFFF; --s2: #F0EEF9; --s3: #E8E5F5;
    --b1:   #DDD9F0; --b2: #C8C3E8;
    --tx:   #1A1730; --tx2: #5A5580; --tx3: #9490B0;
    --adim: rgba(123,110,246,0.10); --aglow: rgba(123,110,246,0.20);
    --tdim: rgba(78,205,196,0.12);  --cdim:  rgba(255,107,107,0.12);
    --adim2:rgba(255,217,61,0.12);  --gdim:  rgba(107,203,119,0.12);
  }
}

/* ── Light Mode — manual override ─────────────────────── */
[data-theme="light"] {
  --bg:   #F8F7FF; --s1: #FFFFFF; --s2: #F0EEF9; --s3: #E8E5F5;
  --b1:   #DDD9F0; --b2: #C8C3E8;
  --tx:   #1A1730; --tx2: #5A5580; --tx3: #9490B0;
  --adim: rgba(123,110,246,0.10); --aglow: rgba(123,110,246,0.20);
  --tdim: rgba(78,205,196,0.12);  --cdim:  rgba(255,107,107,0.12);
  --adim2:rgba(255,217,61,0.12);  --gdim:  rgba(107,203,119,0.12);
}

/* ── Dark Mode — manual override ──────────────────────── */
[data-theme="dark"] {
  --bg:   #000000; --s1: #0A0A0A; --s2: #111111; --s3: #1A1A1A;
  --b1:   #222222; --b2: #2E2E2E;
  --tx:   #F2F2F2; --tx2: #888888; --tx3: #555555;
  --adim: rgba(123,110,246,0.14); --aglow: rgba(123,110,246,0.28);
  --tdim: rgba(78,205,196,0.13);  --cdim:  rgba(255,107,107,0.13);
  --adim2:rgba(255,217,61,0.13);  --gdim:  rgba(107,203,119,0.13);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--bg); color:var(--tx); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--sans); cursor:pointer; }
input, textarea, select { font-family:var(--sans); }
ul, ol { list-style:none; }

/* ── Layout ────────────────────────────────────────────── */
.wrap    { max-width:1180px; margin:0 auto; padding:0 2rem; }
.wrap-sm { max-width:820px;  margin:0 auto; padding:0 2rem; }
.pg      { padding-top:2.5rem; padding-bottom:4rem; }

/* Sidebar layout — desktop: body shift */
body.has-sidebar #app { margin-left:var(--sb-w); }
@media(max-width:900px) {
  body.has-sidebar #app { margin-left:0; padding-top:52px; }
}

/* ── Sidebar ────────────────────────────────────────────── */
#sidebar {
  position:fixed; left:0; top:0;
  width:var(--sb-w); height:100vh;
  overflow-y:auto; overflow-x:hidden;
  background:var(--s1); border-right:1px solid var(--b1);
  z-index:900; display:flex; flex-direction:column;
  transition:transform 0.28s ease;
}
.sb-header { padding:1.4rem 1.25rem 0.8rem; flex-shrink:0; }
.sb-logo { font-family:var(--serif); font-size:1.4rem; letter-spacing:-0.03em; display:block; }
.sb-logo span { color:var(--accent); }
.sb-section-label {
  font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--tx3); padding:0.7rem 1.25rem 0.2rem;
}
.sb-nav { display:flex; flex-direction:column; gap:0.08rem; padding:0 0.6rem; }
.sb-link {
  display:flex; align-items:center; gap:0.65rem;
  width:100%; padding:0.58rem 0.65rem; border-radius:var(--r2);
  background:none; border:none; color:var(--tx2);
  font-size:0.875rem; font-weight:400; cursor:pointer; text-align:left;
  transition:background 0.15s, color 0.15s; font-family:var(--sans);
}
.sb-link:hover { background:var(--s2); color:var(--tx); }
.sb-link.on    { background:var(--adim); color:var(--accent); font-weight:500; }
.sb-link.cta   { color:var(--accent); }
.sb-link.cta:hover { background:var(--adim); }
.sb-icon { font-size:1rem; flex-shrink:0; }
.sb-divider { height:1px; background:var(--b1); margin:0.45rem 1.25rem; }
.sb-footer {
  margin-top:auto; padding:0.5rem 0.6rem;
  border-top:1px solid var(--b1); display:flex; flex-direction:column; gap:0.08rem;
}
.sb-stats { display:flex; gap:0.75rem; padding:0.45rem 0.65rem; }
.sb-stat  { font-size:0.8rem; color:var(--tx2); }
.sb-link.sb-logout { color:var(--coral) !important; }
.sb-link.sb-logout:hover { background:var(--cdim) !important; }

/* Mobile toggle button */
#sidebarToggle {
  display:none; position:fixed; top:0.75rem; left:0.75rem;
  z-index:1001; background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r1); padding:0.42rem 0.65rem;
  color:var(--tx); font-size:1.1rem; line-height:1;
  cursor:pointer; transition:background 0.18s; font-family:var(--sans);
}
#sidebarToggle:hover { background:var(--s2); }

/* Mobile overlay */
#sidebarOverlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.5); z-index:899;
}
#sidebarOverlay.open { display:block; }

/* ══════════════════════════════════════════════════════════
   NAVBAR — gizlendi, yerini sidebar aldı
   ══════════════════════════════════════════════════════════ */
#navbar { display:none !important; }

/* ══════════════════════════════════════════════════════════
   NAVBAR — İki Bölüm: Sol (logo+ana) · Orta (araçlar) · Sağ
   ══════════════════════════════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  background:rgba(8,8,14,0.88);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--b1);
  z-index:1000;
  display:flex; align-items:center;
  transition:background 0.3s, box-shadow 0.3s, height 0.2s;
}
#navbar.scrolled {
  background:rgba(8,8,14,0.97);
  box-shadow:0 4px 32px rgba(0,0,0,0.38);
  border-bottom-color:var(--b2);
  height:48px;
}
#navbar.scrolled .nl,
#navbar.scrolled .nav-tools-btn { font-size:0.82rem; }
#navbar.scrolled .nav-logo      { font-size:1.2rem; }
#navbar.scrolled .nav-pill      { font-size:0.73rem; padding:0.2rem 0.55rem; }
#navbar.scrolled .nav-av        { width:29px; height:29px; font-size:0.72rem; }
#navbar .wrap {
  display:flex; align-items:center;
  justify-content:space-between; width:100%; gap:0.5rem;
}

/* ── Logo ─────────────────────────────────────────────── */
.nav-logo {
  font-family:var(--serif); font-size:1.35rem; letter-spacing:-0.03em;
  flex-shrink:0; transition:opacity 0.2s;
}
.nav-logo:hover { opacity:0.8; }
.nav-logo span  { color:var(--accent); }

/* ── Sol — ana linkler ────────────────────────────────── */
.nav-left { display:flex; align-items:center; gap:0.4rem; }
.nav-main  { display:flex; align-items:center; gap:0.05rem; }

/* Ortak link stili */
.nl {
  background:none; border:1px solid transparent;
  padding:0.38rem 0.75rem; border-radius:var(--r1);
  color:rgba(255,255,255,0.85); font-size:0.855rem; font-weight:400;
  transition:color 0.18s, background 0.18s, border-color 0.18s;
  position:relative; white-space:nowrap;
}
.nl::after {
  content:''; position:absolute; bottom:-2px; left:50%; right:50%;
  height:2px; background:var(--accent); border-radius:2px;
  transition:left 0.2s ease, right 0.2s ease; opacity:0;
}
.nl:hover          { color:#ffffff; background:rgba(255,255,255,0.07); }
.nl:hover::after   { left:20%; right:20%; opacity:0.55; }
.nl.on             { color:var(--accent); font-weight:500; }
.nl.on::after      { left:10%; right:10%; opacity:1; }
/* AI Asistan CTA */
.nl.cta {
  background:var(--accent); color:#fff;
  border-color:var(--accent); margin-left:0.25rem;
  font-weight:500;
}
.nl.cta:hover  { opacity:0.88; transform:translateY(-1px); }
.nl.cta::after { display:none; }
.nl.cta.on     { background:var(--accent); color:#fff; }
.nl.cta.on::after { display:none; }

/* ── Orta — Araçlar Dropdown ─────────────────────────── */
.nav-tools { position:relative; }

.nav-tools-btn {
  display:flex; align-items:center; gap:0.35rem;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  padding:0.3rem 0.8rem; border-radius:8px;
  color:rgba(255,255,255,0.85); font-size:0.855rem; font-weight:400;
  transition:background 200ms ease, border-color 200ms ease, color 200ms ease;
  cursor:pointer; white-space:nowrap; font-family:var(--sans);
}
.nav-tools-btn:hover         { color:#ffffff; background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.3); }
.nav-tools-btn.open          { color:#ffffff; background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.3); }
.nav-tools-btn.tools-active  { color:var(--accent); border-color:var(--accent); background:var(--adim); }
.nav-arr { display:inline-block; transition:transform 0.2s; font-size:0.65rem; opacity:0.7; }
.nav-tools-btn.open .nav-arr { transform:rotate(180deg); }

.nav-tools-panel {
  display:none; position:absolute; top:calc(100% + 10px); left:0;
  background:var(--s1); border:1px solid var(--b2);
  border-radius:var(--r3); padding:0.5rem;
  box-shadow:0 16px 48px rgba(0,0,0,0.5);
  min-width:300px; z-index:1001;
}
.nav-tools-panel.open {
  display:grid; grid-template-columns:1fr 1fr; gap:0.25rem;
  animation:fdin 0.15s ease;
}
.nav-tool-item {
  display:flex; align-items:center; gap:0.55rem;
  padding:0.55rem 0.85rem; border-radius:var(--r2);
  background:none; border:none; color:var(--tx2);
  font-size:0.85rem; cursor:pointer; text-align:left;
  transition:background 0.15s, color 0.15s; white-space:nowrap;
  font-family:var(--sans);
}
.nav-tool-item:hover { background:var(--s2); color:var(--tx); }
.nav-tool-item.on    { background:var(--adim); color:var(--accent); font-weight:500; }
.nav-tool-icon { font-size:1rem; }

/* Overlay — dropdown açıkken arka planı karart */
.nav-overlay {
  display:none; position:fixed; inset:0; z-index:998;
  background:rgba(0,0,0,0.25);
}
.nav-overlay.open { display:block; }

/* ── Sağ — pill badge'ler + avatar ───────────────────── */
.nav-right { display:flex; align-items:center; gap:0.55rem; flex-shrink:0; }

.nav-pill {
  display:inline-flex; align-items:center; gap:0.28rem;
  padding:0.26rem 0.65rem; border-radius:20px;
  background:var(--s2); border:1px solid var(--b1);
  font-size:0.77rem; font-weight:500; white-space:nowrap;
  transition:border-color 0.18s, color 0.18s;
}
.nav-pill.nav-streak { color:var(--amber); }
.nav-pill.nav-xp     { color:var(--tx2); }
.nav-pill.nav-xp:hover { color:var(--accent); border-color:var(--accent); }

/* Tier badges */
.tier-badge {
  display:inline-flex; align-items:center;
  font-size:0.62rem; font-weight:700;
  padding:0.2rem 0.5rem; border-radius:6px;
  letter-spacing:0.07em; text-transform:uppercase;
  flex-shrink:0;
}
.tier-badge.free  { background:var(--s3); color:var(--tx3); }
.tier-badge.basic { background:var(--teal); color:#071F1D; }
.tier-badge.pro   { background:var(--accent); color:#fff; animation:glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%,100%{box-shadow:0 0 0 0 var(--aglow)} 50%{box-shadow:0 0 8px 2px var(--aglow)} }

/* Avatar + dropdown */
.nav-av-wrap { position:relative; }
.nav-av {
  width:32px; height:32px; border-radius:50%;
  background:var(--adim); border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:0.78rem; color:var(--accent); font-weight:600;
  transition:box-shadow 0.2s, transform 0.2s; cursor:pointer;
  flex-shrink:0;
}
.nav-av:hover         { box-shadow:0 0 0 3px var(--aglow); transform:scale(1.08); }
.nav-av-dropdown {
  display:none; position:absolute; top:calc(100% + 10px); right:0;
  background:var(--s1); border:1px solid var(--b2);
  border-radius:var(--r3); padding:0.4rem;
  box-shadow:0 16px 48px rgba(0,0,0,0.5);
  min-width:165px; z-index:1002;
}
.nav-av-dropdown.open { display:block; animation:fdin 0.15s ease; }
.nav-av-item {
  display:flex; align-items:center; gap:0.6rem;
  width:100%; padding:0.55rem 0.85rem; border-radius:var(--r2);
  background:none; border:none; color:var(--tx2);
  font-size:0.875rem; cursor:pointer; text-align:left;
  transition:background 0.15s, color 0.15s; font-family:var(--sans);
}
.nav-av-item:hover       { background:var(--s2); color:var(--tx); }
.nav-av-item.av-logout   { color:var(--coral); }
.nav-av-item.av-logout:hover { background:var(--cdim); color:var(--coral); }
.nav-av-sep { height:1px; background:var(--b1); margin:0.3rem 0; }

/* Premium CTA butonu */
.nav-premium-cta {
  display:inline-flex; align-items:center; gap:0.3rem;
  background:linear-gradient(135deg, var(--accent), var(--teal));
  color:#ffffff; border:none; border-radius:20px;
  padding:0.3rem 1rem; font-size:0.8rem; font-weight:600;
  cursor:pointer; white-space:nowrap; font-family:var(--sans);
  box-shadow:0 2px 8px rgba(123,110,246,0.4);
  transition:transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
  flex-shrink:0;
}
.nav-premium-cta:hover {
  transform:scale(1.05);
  box-shadow:0 4px 16px rgba(123,110,246,0.55);
  opacity:0.95;
}

/* Hamburger — mobilde görünür */
.nav-burger {
  display:none; background:none; border:1px solid var(--b1);
  border-radius:var(--r1); padding:0.42rem 0.65rem;
  color:var(--tx); font-size:1.1rem; line-height:1;
  transition:background 0.18s, border-color 0.18s;
}
.nav-burger:hover { background:var(--s2); border-color:var(--b2); }

/* Mobil tam menü paneli */
#navMobileMenu {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0;
  background:rgba(8,8,14,0.98); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--b1);
  padding:1rem 1.2rem 1.4rem; z-index:999;
  flex-direction:column; gap:0.2rem;
  max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
#navMobileMenu.open { display:flex; animation:fdin 0.18s ease; }
#navMobileMenu .nl  { text-align:left; width:100%; padding:0.65rem 0.9rem; font-size:0.9rem; }
#navMobileMenu .nl.cta { margin-left:0; }
.mob-section-title {
  font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--tx3); padding:0.5rem 0.9rem 0.2rem; margin-top:0.4rem;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.65rem 1.5rem; border-radius:var(--r2);
  font-size:0.9rem; font-weight:500; border:none;
  transition:all 0.18s; cursor:pointer; white-space:nowrap;
  font-family:var(--sans);
}
.btn-p { background:var(--accent); color:#fff; }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 8px 24px var(--aglow); opacity:0.92; }
.btn-s { background:var(--s2); color:var(--tx); border:1px solid var(--b1); }
.btn-s:hover { background:var(--s3); border-color:var(--b2); }
.btn-g { background:none; color:var(--tx2); border:1px solid var(--b1); }
.btn-g:hover { color:var(--tx); border-color:var(--b2); }
.btn-t { background:var(--teal); color:#071F1D; }
.btn-t:hover { opacity:0.88; transform:translateY(-2px); }
.btn-sm { padding:0.38rem 0.85rem; font-size:0.8rem; border-radius:var(--r1); }
.btn-lg { padding:0.9rem 2.2rem; font-size:1rem; }
.btn-full { width:100%; justify-content:center; }
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none !important; }

/* ── Cards ─────────────────────────────────────────────── */
.card { background:var(--s1); border:1px solid var(--b1); border-radius:var(--r3); padding:1.5rem; }
.card-h:hover { border-color:var(--b2); transform:translateY(-3px); cursor:pointer; transition:all 0.22s; }

/* ── Badges ─────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:0.25rem; padding:0.2rem 0.65rem; border-radius:20px; font-size:0.7rem; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; }
.b-ac  { background:var(--adim);  color:var(--accent); }
.b-tl  { background:var(--tdim);  color:var(--teal); }
.b-co  { background:var(--cdim);  color:var(--coral); }
.b-am  { background:var(--adim2); color:var(--amber); }
.b-gr  { background:var(--gdim);  color:var(--green); }
.b-gy  { background:var(--s3);    color:var(--tx2); }

/* ── Progress Bar ───────────────────────────────────────── */
.ptrack { height:5px; background:var(--s3); border-radius:3px; overflow:hidden; }
.pfill  { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--teal)); transition:width 0.8s ease; }
.pfill.coral { background:linear-gradient(90deg,var(--coral),var(--amber)); }
.pfill.green { background:linear-gradient(90deg,var(--green),var(--teal)); }

/* ── Spinner ────────────────────────────────────────────── */
.spin { display:inline-flex; gap:5px; align-items:center; }
.spin span { width:7px; height:7px; background:var(--accent); border-radius:50%; animation:bnc 1.2s ease-in-out infinite; }
.spin span:nth-child(2){ animation-delay:0.2s; }
.spin span:nth-child(3){ animation-delay:0.4s; }
@keyframes bnc { 0%,60%,100%{transform:translateY(0);opacity:0.5} 30%{transform:translateY(-7px);opacity:1} }

/* ── Toast ──────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:2rem; right:2rem; z-index:9999; display:flex; flex-direction:column; gap:0.5rem; }
.toast { background:var(--s2); border:1px solid var(--b2); border-radius:var(--r2); padding:0.72rem 1.1rem; font-size:0.85rem; color:var(--tx); box-shadow:0 8px 32px rgba(0,0,0,0.45); animation:tin 0.28s ease; display:flex; align-items:center; gap:0.55rem; min-width:250px; }
.toast.ok  { border-color:var(--teal); }
.toast.err { border-color:var(--coral); }
@keyframes tin { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

/* ── Feedback (About sayfası formu) ─────────────────────── */
.fb-type { transition:all 0.15s; }

/* ── Animations ─────────────────────────────────────────── */
.fade { animation:fdin 0.32s ease both; }
@keyframes fdin { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--b2); border-radius:3px; }

/* ── Utils ──────────────────────────────────────────────── */
.hidden { display:none !important; }
.muted  { color:var(--tx2); }
.small  { font-size:0.83rem; }
.center { text-align:center; }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:900px){
  .wrap,.wrap-sm { padding:0 1.2rem; }
  .nav-main, .nav-tools { display:none; }
  .nav-pill { display:none; }
  .nav-burger { display:flex; }
  /* Sidebar — mobilde gizli, açıkken görünür */
  #sidebar { transform:translateX(-100%); }
  #sidebar.open { transform:translateX(0); }
  #sidebarToggle { display:flex; align-items:center; }
}

@media(max-width:600px){
  .pg { padding-top:1.5rem; padding-bottom:3rem; }
  .wrap,.wrap-sm { padding:0 1rem; }

  /* Buttons */
  .btn { padding:0.6rem 1.2rem; font-size:0.86rem; }
  .btn-lg { padding:0.8rem 1.6rem; font-size:0.95rem; }

  /* Cards */
  .card { padding:1.1rem; }

  /* Toast */
  #toast-container { bottom:1rem; right:1rem; left:1rem; }
  .toast { min-width:unset; width:100%; }

  /* Badges */
  .badge { font-size:0.65rem; }
}