/* ═══ TEMEL DEĞİŞKENLER ══════════════════════════════════════ */
:root {
  --bg:        #f0f0ed;
  --surface:   #ffffff;
  --surface2:  #f7f7f5;
  --border:    #e4e4e0;
  --border2:   #d0d0cc;
  --text:      #1c1c1a;
  --text2:     #5a5a56;
  --text3:     #9a9a96;
  --accent:    #4f46e5;
  --accent2:   #06b6d4;
  --success:   #16a34a;
  --warn:      #d97706;
  --danger:    #dc2626;
  --radius:    12px;
  --radius-lg: 18px;
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --shadow-md: 0 4px 24px rgba(0,0,0,.1);
  --font: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', monospace;
}
[data-theme="dark"] {
  --bg:       #0f0f0e;
  --surface:  #1a1a18;
  --surface2: #242422;
  --border:   #2e2e2c;
  --border2:  #3e3e3a;
  --text:     #f0f0ec;
  --text2:    #a0a09c;
  --text3:    #606060;
  --accent:   #818cf8;
  --accent2:  #22d3ee;
  --success:  #4ade80;
  --warn:     #fbbf24;
  --danger:   #f87171;
  --shadow:    0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
}

/* ═══ RESET ══════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
  transition: background .25s, color .25s;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
button { font-family:var(--font); cursor:pointer; border:none; transition:all .15s }
button:active { transform:scale(.97) }
input,select,textarea {
  font-family:var(--font); font-size:14px;
  border:1.5px solid var(--border); border-radius:10px;
  padding:9px 13px; background:var(--surface2); color:var(--text);
  width:100%; outline:none; transition:border-color .2s;
}
input:focus,select:focus,textarea:focus { border-color:var(--accent); background:var(--surface) }
textarea { resize:vertical; min-height:70px; line-height:1.5 }
select { cursor:pointer }

/* ═══ LOADING ════════════════════════════════════════════════ */
#loading-screen {
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;z-index:99999;
}
.spinner {
  width:36px;height:36px;border:2.5px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ═══ AUTH EKRANI ════════════════════════════════════════════ */
#auth-screen {
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;
}
.auth-card {
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-lg);padding:40px 36px;
  width:100%;max-width:420px;box-shadow:var(--shadow-md);
}
.auth-logo {
  font-size:28px;font-weight:700;color:var(--accent);
  letter-spacing:-0.5px;margin-bottom:4px;
}
.auth-sub { font-size:13px;color:var(--text3);margin-bottom:28px }
.auth-tabs { display:flex;gap:6px;margin-bottom:24px }
.auth-tab {
  flex:1;padding:8px;border:1.5px solid var(--border);
  background:transparent;color:var(--text2);border-radius:10px;
  font-size:13px;font-weight:500;
}
.auth-tab.active { background:var(--accent);color:#fff;border-color:var(--accent) }
.form-group { margin-bottom:14px }
.form-group label {
  display:block;font-size:11px;font-weight:600;
  color:var(--text3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.6px;
}
.btn-primary {
  width:100%;background:var(--accent);color:#fff;
  padding:11px;font-size:14px;font-weight:600;border-radius:10px;margin-top:6px;
}
.btn-primary:hover { opacity:.9 }
.btn-google {
  width:100%;background:var(--surface2);color:var(--text);
  border:1.5px solid var(--border);padding:10px;font-size:13px;
  font-weight:500;border-radius:10px;margin-top:8px;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-google:hover { background:var(--surface);border-color:var(--border2) }
.auth-divider {
  text-align:center;color:var(--text3);font-size:12px;margin:14px 0;
  position:relative;
}
.auth-divider::before,.auth-divider::after {
  content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--border);
}
.auth-divider::before { left:0 }
.auth-divider::after  { right:0 }
.auth-error {
  background:#fff0f0;border:1px solid #fecaca;border-radius:8px;
  padding:10px 14px;font-size:13px;color:#991b1b;margin-top:12px;display:none;
}
[data-theme="dark"] .auth-error { background:#3f1111;border-color:#7f1d1d;color:#fca5a5 }

/* ═══ TOPBAR ══════════════════════════════════════════════════ */
.topbar {
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 12px;height:54px;min-height:54px;max-height:54px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:200;
  backdrop-filter:blur(8px);
  flex-wrap:nowrap;
  overflow:hidden;
}
.topbar-left {
  display:flex;align-items:center;gap:8px;
  min-width:0;flex:1;overflow:hidden;
}
.logo {
  font-weight:700;font-size:17px;color:var(--accent);letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:150px;
}
.topbar-right { display:flex;align-items:center;gap:8px }

@media(max-width:600px) {
  .logo { font-size:13px; max-width:100px; }
  .topbar-right { gap:4px; flex-shrink:0; }
  .user-name-short { display:none; }
  .user-badge { padding:4px 6px; }
  .ctx-switch-btn span:last-child { display:none; }
  .dark-toggle-btn { width:30px;height:30px;font-size:14px; }
}

/* Karanlık mod toggle — topbar'da */
.dark-toggle-btn {
  width:36px;height:36px;border-radius:10px;
  background:var(--surface2);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;transition:all .2s;
}
.dark-toggle-btn:hover { background:var(--border);border-color:var(--border2) }

/* Kullanıcı rozeti — tıklanabilir */
.user-badge {
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border-radius:20px;padding:4px 12px 4px 4px;
  border:1.5px solid var(--border);cursor:pointer;transition:all .2s;
  position:relative;
}
.user-badge:hover { border-color:var(--border2);background:var(--surface) }
.user-avatar {
  width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;overflow:hidden;flex-shrink:0;
}
.user-avatar img { width:100%;height:100%;object-fit:cover }
.user-name-short { font-size:12px;font-weight:500;color:var(--text2);max-width:120px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap }

/* ═══ HESAP PANELI (slide-in) ══════════════════════════════ */
.account-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,0);z-index:500;
  pointer-events:none;transition:background .25s;
}
.account-overlay.open { background:rgba(0,0,0,.35);pointer-events:all }
.account-panel {
  position:fixed;top:0;right:-380px;width:340px;max-width:90vw;
  height:100vh;background:var(--surface);border-left:1px solid var(--border);
  z-index:501;transition:right .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:0 0 32px;box-shadow:var(--shadow-md);
}
.account-panel.open { right:0 }
.panel-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.panel-header h3 { font-size:15px;font-weight:600;color:var(--text) }
.close-btn {
  width:30px;height:30px;border-radius:8px;background:var(--surface2);
  border:1px solid var(--border);font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.close-btn:hover { background:var(--border) }
.panel-section { padding:16px 20px;border-bottom:1px solid var(--border) }
.panel-section-title {
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.6px;color:var(--text3);margin-bottom:12px;
}

/* Avatar upload alanı */
.avatar-upload-area {
  display:flex;align-items:center;gap:14px;margin-bottom:12px;
}
.avatar-large {
  width:64px;height:64px;border-radius:50%;background:var(--accent);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;flex-shrink:0;overflow:hidden;cursor:pointer;
  border:3px solid var(--border);transition:border-color .2s;
}
.avatar-large:hover { border-color:var(--accent) }
.avatar-large img { width:100%;height:100%;object-fit:cover }
.avatar-upload-label {
  font-size:12px;color:var(--text2);line-height:1.5;
}
.avatar-upload-label strong { display:block;font-size:13px;color:var(--text);margin-bottom:2px }

/* Accent renk seçici */
.color-row { display:flex;gap:8px;flex-wrap:wrap;margin-top:8px }
.color-dot {
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;transition:transform .15s,border-color .15s;
}
.color-dot:hover { transform:scale(1.15) }
.color-dot.selected { border-color:var(--text) }
.custom-color-input {
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:3px solid var(--border);padding:0;overflow:hidden;
}

/* ═══ XP ŞERİDİ ════════════════════════════════════════════ */
.xp-bar-container {
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:8px 20px;display:flex;align-items:center;gap:14px;
}
.rank-badge { display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap }
.rank-symbol { font-size:18px }
.xp-track { flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden }
.xp-fill { height:100%;background:var(--accent);border-radius:4px;transition:width .7s ease }
.xp-numbers { font-size:11px;color:var(--text3);white-space:nowrap }

/* ═══ SEKMELER ══════════════════════════════════════════════ */
.tabs {
  display:flex;gap:2px;padding:10px 16px 0;
  background:var(--surface);border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;white-space:nowrap;
}
.tabs::-webkit-scrollbar { display:none }
.tab {
  padding:7px 14px;background:transparent;color:var(--text2);
  border:none;border-bottom:2px solid transparent;border-radius:0;
  font-size:13px;font-weight:500;white-space:nowrap;flex-shrink:0;
}
.tab.active { color:var(--accent);border-bottom-color:var(--accent) }
.tab:hover:not(.active) { color:var(--text);background:var(--surface2) }

/* ═══ İÇERİK ════════════════════════════════════════════════ */
.content { padding:20px;max-width:920px;margin:0 auto;width:100% }
.panel { display:none }
.panel.active { display:block }

/* ═══ KART ══════════════════════════════════════════════════ */
.card {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;
  transition:border-color .2s;
}
.card-header { display:flex;justify-content:space-between;align-items:flex-start;gap:8px }
.card-title { font-weight:600;font-size:14px;line-height:1.4 }
.card-sub { font-size:12px;color:var(--text2);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center }
.card-desc { font-size:13px;color:var(--text2);margin-top:8px;padding-top:8px;
  border-top:1px solid var(--border);line-height:1.6 }

/* Rozetler */
.badge {
  font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap;
}
.badge-high     { background:#fff3e0;color:#c2410c }
.badge-medium   { background:#ecfdf5;color:#166534 }
.badge-low      { background:#f3f4f6;color:var(--text2) }
.badge-critical { background:#fee2e2;color:#991b1b }
[data-theme="dark"] .badge-high     { background:#431407;color:#fb923c }
[data-theme="dark"] .badge-medium   { background:#052e16;color:#4ade80 }
[data-theme="dark"] .badge-low      { background:#1f2937;color:#9ca3af }
[data-theme="dark"] .badge-critical { background:#450a0a;color:#fca5a5 }

/* ═══ ANA SAYFA — Dashboard ══════════════════════════════════ */
.dashboard-top {
  display:grid;grid-template-columns:200px 1fr;gap:16px;margin-bottom:16px;
}
@media(max-width:640px) { .dashboard-top { grid-template-columns:1fr } }

.donut-card {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
}
.donut-wrap { position:relative;width:140px;height:140px }
.donut-center {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
}
.donut-pct { font-size:26px;font-weight:700;color:var(--text) }
.donut-label { font-size:11px;color:var(--text3);margin-top:2px }
.donut-legend { margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center }
.legend-item { display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text2) }
.legend-dot { width:9px;height:9px;border-radius:50%;flex-shrink:0 }

.stat-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.stat-box {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;
}
.stat-value { font-size:24px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums }
.stat-label { font-size:11px;color:var(--text3);margin-top:3px }

/* ═══ GÖREV FORMU ══════════════════════════════════════════ */
.form-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:12px }
@media(max-width:500px) { .form-grid-2 { grid-template-columns:1fr } }
.form-grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px }
@media(max-width:600px) { .form-grid-3 { grid-template-columns:1fr 1fr } }

.desc-toggle {
  font-size:12px;color:var(--accent);cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;margin-bottom:8px;
  background:none;border:none;padding:0;font-family:var(--font);
}
.desc-area { display:none;margin-bottom:8px }
.desc-area.open { display:block }

.xp-preview {
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(79,70,229,.1);color:var(--accent);
  border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600;
}
[data-theme="dark"] .xp-preview { background:rgba(129,140,248,.15) }

.form-actions {
  display:flex;align-items:center;justify-content:space-between;
  margin-top:12px;gap:8px;flex-wrap:wrap;
}
.btn-add {
  background:var(--accent);color:#fff;
  padding:9px 20px;font-size:13px;font-weight:600;border-radius:10px;
}
.btn-add:hover { opacity:.9 }

/* ═══ GÖREV KARTI ═══════════════════════════════════════════ */
.task-card {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:8px;overflow:hidden;
  transition:border-color .2s,opacity .2s;
}
.task-card:hover { border-color:var(--border2) }
.task-card.done { opacity:.55 }
.task-card-body { padding:12px 16px }
.task-actions { display:flex;gap:6px;flex-shrink:0 }
.btn-complete {
  background:var(--success);color:#fff;
  padding:5px 12px;font-size:12px;font-weight:500;border-radius:8px;
}
.btn-complete:hover { opacity:.85 }
.btn-danger {
  background:transparent;color:var(--danger);border:1px solid var(--danger);
  padding:5px 10px;font-size:12px;border-radius:8px;
}
.btn-danger:hover { background:var(--danger);color:#fff }
.btn-sm {
  padding:5px 10px;font-size:12px;font-weight:500;border-radius:8px;
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
}
.btn-sm:hover { background:var(--border) }

/* Tarih göstergesi (görev) */
.task-dates { display:flex;gap:8px;flex-wrap:wrap;margin-top:3px }
.date-chip {
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;color:var(--text3);
  background:var(--surface2);border-radius:6px;padding:2px 7px;
}

/* ═══ TAKVİM ════════════════════════════════════════════════ */
.calendar-wrapper { display:grid;grid-template-columns:1fr 280px;gap:16px }
@media(max-width:700px) {
  .calendar-wrapper {
    grid-template-columns:1fr;
    overflow:hidden;
  }
}

.cal-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.cal-month { font-size:16px;font-weight:600;color:var(--text) }
.cal-nav {
  width:32px;height:32px;border-radius:9px;background:var(--surface2);
  border:1px solid var(--border);font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.cal-nav:hover { background:var(--border) }
.cal-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
  width:100%;
  max-width:100%;
}
.cal-day-name {
  text-align:center;font-size:11px;font-weight:600;
  color:var(--text3);padding:4px 0;text-transform:uppercase;letter-spacing:.4px;
}
.cal-day {
  aspect-ratio:1;border-radius:9px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:13px;font-weight:500;
  cursor:pointer;position:relative;transition:all .15s;color:var(--text);
  gap:2px;
}
.cal-day:hover { background:var(--surface2) }
.cal-day.empty { cursor:default;color:var(--text3) }
.cal-day.today {
  background:var(--accent);color:#fff;font-weight:700;
}
.cal-day.today:hover { background:var(--accent);opacity:.9 }
.cal-day.selected:not(.today) { background:var(--surface2);border:1.5px solid var(--accent) }
.cal-day.has-event::after {
  content:'';width:5px;height:5px;border-radius:50%;background:var(--accent2);
  position:absolute;bottom:4px;
}
.cal-day.today.has-event::after { background:#fff }
.cal-day.has-streak { background:rgba(22,163,74,.12) }
.cal-day.today.has-streak { background:var(--accent) }
/* v7.5.8 — aktif (tamamlanmamış) görev olan günler: sarı sol kenar */
.cal-day.has-task { box-shadow: inset 3px 0 0 var(--warn) }
.cal-day.today.has-task { box-shadow: none }

/* Sağ panel — günlük detay */
.day-detail-panel { position:sticky;top:80px }
.day-detail-panel .card { min-height:200px }
.day-detail-header { font-weight:600;font-size:14px;margin-bottom:12px;color:var(--text) }

/* v7.5.8 — gün detay sekme çubuğu */
.day-detail-tabs {
  display:flex;gap:4px;padding:3px;background:var(--surface2);
  border-radius:9px;margin-bottom:10px;
}
.day-tab {
  flex:1;padding:7px 10px;font-size:12px;font-weight:600;
  background:transparent;color:var(--text2);border-radius:6px;
  border:none;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.day-tab.active { background:var(--surface);color:var(--accent);box-shadow:var(--shadow) }
.day-tab-count {
  font-size:10px;background:var(--border);color:var(--text2);
  padding:1px 6px;border-radius:10px;font-weight:700;
}
.day-tab.active .day-tab-count { background:rgba(79,70,229,.15);color:var(--accent) }
.day-detail-body { display:flex;flex-direction:column }

.day-item {
  display:flex;align-items:flex-start;gap:8px;padding:7px 0;
  border-top:1px solid var(--border);font-size:13px;
}
.day-item-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px }
.day-item-text { flex:1;line-height:1.4 }
.day-item-time { font-size:11px;color:var(--text3);font-family:var(--mono);flex-shrink:0 }

/* ═══ ETKİNLİK ══════════════════════════════════════════════ */
.event-card {
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent2);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:8px;
}
.event-time-badge {
  font-size:11px;font-family:var(--mono);font-weight:500;
  background:var(--surface2);border-radius:6px;padding:2px 8px;
  color:var(--text2);
}
.reminder-badge {
  font-size:11px;background:rgba(217,119,6,.1);color:var(--warn);
  border-radius:6px;padding:2px 8px;font-weight:500;
}
[data-theme="dark"] .reminder-badge { background:rgba(251,191,36,.1) }

/* Hatırlatıcı izin banner */
.notif-banner {
  background:rgba(79,70,229,.08);border:1px solid rgba(79,70,229,.2);
  border-radius:var(--radius);padding:10px 14px;font-size:13px;
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.notif-banner.granted { background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.2) }
.notif-banner.denied  { background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.2) }

/* ═══ ÖZET / STATS ══════════════════════════════════════════ */
.stats-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:20px }
.stat-card {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;text-align:center;
}

/* ═══ RÜTBELER / TEMA ═══════════════════════════════════════ */
.theme-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px }
.theme-card {
  border:1.5px solid var(--border);border-radius:var(--radius);
  padding:16px;text-align:center;cursor:pointer;transition:all .2s;
}
.theme-card:hover { transform:translateY(-2px);border-color:var(--border2) }
.theme-card.selected { border-color:var(--accent);background:rgba(79,70,229,.06) }
[data-theme="dark"] .theme-card.selected { background:rgba(129,140,248,.1) }
.theme-icon { font-size:28px;margin-bottom:8px }
.theme-name { font-size:13px;font-weight:600 }
.theme-levels { font-size:11px;color:var(--text3);margin-top:3px }



/* ── Auth adım sistemi ─────────────────────────────────────── */
.auth-step { display:none }
.auth-step.active { display:block }
.auth-back-btn {
  background:none;border:none;color:var(--text2);font-size:12px;
  font-family:var(--font);cursor:pointer;padding:0 0 14px;
  display:inline-flex;align-items:center;gap:4px;
}
.auth-back-btn:hover { color:var(--text) }
.acct-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px }
.acct-grid-1 { display:flex;flex-direction:column;gap:10px;margin-bottom:14px }
.acct-card {
  border:1.5px solid var(--border);border-radius:var(--radius);
  padding:18px 14px;text-align:center;cursor:pointer;
  transition:all .18s;background:var(--surface2);
}
.acct-card:hover { border-color:var(--accent);background:var(--surface) }
.acct-card.selected { border-color:var(--accent);background:rgba(79,70,229,.07) }
.acct-card-icon { font-size:26px;margin-bottom:6px }
.acct-card-name { font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px }
.acct-card-desc { font-size:11px;color:var(--text3) }
.auth-step-badge {
  display:inline-block;font-size:11px;padding:2px 9px;border-radius:20px;
  background:rgba(79,70,229,.1);color:var(--accent);font-weight:500;
}

/* ── Onboarding ─────────────────────────────────────────────── */
.onboarding-overlay {
  position:fixed;inset:0;background:var(--bg);z-index:1002;
  display:none;overflow-y:auto;
}
.onboarding-overlay.show { display:block }
.onboarding-wrap { max-width:640px;margin:0 auto;padding:3rem 1.5rem 4rem }
.onboarding-logo { font-size:26px;font-weight:700;color:var(--accent);
  letter-spacing:-.3px;text-align:center;margin-bottom:6px }
.onboarding-title { font-size:21px;font-weight:600;color:var(--text);
  text-align:center;margin-bottom:8px }
.onboarding-sub { font-size:13px;color:var(--text2);text-align:center;margin-bottom:2.5rem;line-height:1.6 }
.usecase-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:14px;margin-bottom:2rem }
.usecase-card {
  border:1.5px solid var(--border);border-radius:var(--radius-lg);
  padding:22px 14px;text-align:center;cursor:pointer;
  transition:all .2s;background:var(--surface);
}
.usecase-card:hover { border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md) }
.usecase-card.selected { border-color:var(--accent);background:rgba(79,70,229,.06) }
[data-theme="dark"] .usecase-card.selected { background:rgba(129,140,248,.1) }
.usecase-icon { font-size:32px;margin-bottom:10px }
.usecase-name { font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px }
.usecase-desc { font-size:11px;color:var(--text2);line-height:1.45 }
.onboarding-btn {
  display:block;width:100%;max-width:280px;margin:0 auto;
  padding:12px;background:var(--accent);color:#fff;
  border:none;border-radius:var(--radius);font-size:15px;font-weight:600;
  cursor:pointer;font-family:var(--font);transition:opacity .15s;
}
.onboarding-btn:hover { opacity:.9 }
.onboarding-btn:disabled { opacity:.35;cursor:not-allowed }

/* ── Onboarding profil adımı ──────────────────────────────────────── */
.ob-steps { display:flex;justify-content:center;gap:8px;margin-bottom:2rem }
.ob-step-dot {
  width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .25s;
}
.ob-step-dot.active { background:var(--accent);transform:scale(1.3) }
.ob-step-dot.done   { background:var(--success) }
.profile-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:1.5rem }
@media(max-width:480px){ .profile-form-grid { grid-template-columns:1fr } }
.profile-form-group label {
  display:block;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:var(--text3);margin-bottom:6px;
}
.profile-form-group input, .profile-form-group select {
  width:100%;padding:10px 13px;font-size:14px;
  border:1.5px solid var(--border);border-radius:var(--radius);
  background:var(--surface2);color:var(--text);outline:none;
  font-family:var(--font);transition:border-color .2s;
}
.profile-form-group input:focus,.profile-form-group select:focus {
  border-color:var(--accent);background:var(--surface);
}
.gender-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px }
.gender-card {
  border:1.5px solid var(--border);border-radius:var(--radius);
  padding:12px 8px;text-align:center;cursor:pointer;
  transition:all .15s;background:var(--surface2);
}
.gender-card:hover { border-color:var(--accent) }
.gender-card.selected { border-color:var(--accent);background:rgba(79,70,229,.07) }
[data-theme="dark"] .gender-card.selected { background:rgba(129,140,248,.1) }
.gender-card-icon { font-size:22px;margin-bottom:4px }
.gender-card-name { font-size:12px;font-weight:600;color:var(--text) }
.ob-skip-btn {
  background:none;border:none;color:var(--text3);font-size:12px;
  cursor:pointer;font-family:var(--font);margin-top:12px;
  display:block;text-align:center;width:100%;
}
.ob-skip-btn:hover { color:var(--text2) }

/* ── Kurumsal kurulum ───────────────────────────────────────── */
.org-setup-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;z-index:1003;
}
.org-setup-overlay.show { display:flex }
.org-setup-card {
  background:var(--surface);border-radius:var(--radius-lg);
  padding:2rem;width:100%;max-width:400px;margin:1rem;
}


/* ── Rütbe bilgi modalı ─────────────────────────────────────── */
.ranks-modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;z-index:800;
  padding:1rem;
}
.ranks-modal-overlay.show { display:flex }
.ranks-modal {
  background:var(--surface);border-radius:var(--radius-lg);
  width:100%;max-width:520px;max-height:85vh;overflow-y:auto;
  box-shadow:var(--shadow-md);
}
.ranks-modal-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.ranks-modal-header h3 { font-size:15px;font-weight:600;color:var(--text) }
.ranks-modal-body { padding:16px 20px }
.ranks-info-btn {
  width:22px;height:22px;border-radius:50%;
  background:var(--surface2);border:1px solid var(--border2);
  font-size:12px;font-weight:700;color:var(--text2);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;flex-shrink:0;
}
.ranks-info-btn:hover { background:var(--accent);color:#fff;border-color:var(--accent) }
.rank-schema {
  display:flex;flex-direction:column;gap:6px;margin-bottom:16px;
}
.rank-schema-item {
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:var(--radius);background:var(--surface2);
  border:1px solid var(--border);transition:background .15s;
}
.rank-schema-item.current-rank {
  border-color:var(--accent);background:rgba(79,70,229,.06);
}
[data-theme="dark"] .rank-schema-item.current-rank { background:rgba(129,140,248,.1) }
.rank-schema-symbol { font-size:24px;width:32px;text-align:center;flex-shrink:0 }
.rank-schema-info { flex:1 }
.rank-schema-name { font-size:13px;font-weight:600;color:var(--text) }
.rank-schema-xp   { font-size:11px;color:var(--text3);font-family:var(--mono) }
.rank-schema-badge {
  font-size:10px;padding:2px 8px;border-radius:20px;font-weight:600;
  background:rgba(22,163,74,.1);color:var(--success);
}
.rank-theme-tabs {
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;
}
.rank-theme-tab {
  padding:5px 12px;font-size:12px;font-weight:500;border-radius:20px;
  border:1.5px solid var(--border);background:var(--surface2);
  color:var(--text2);cursor:pointer;transition:all .15s;
}
.rank-theme-tab.active {
  border-color:var(--accent);background:rgba(79,70,229,.08);color:var(--accent);
}

/* ── Emoji / sembol picker (görev formu) ────────────────────── */
.symbol-picker-btn {
  width:38px;height:38px;border-radius:var(--radius);
  border:1.5px solid var(--border);background:var(--surface2);
  font-size:18px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:border-color .15s;flex-shrink:0;
}
.symbol-picker-btn:hover { border-color:var(--accent) }
.emoji-picker-popover {
  position:absolute;z-index:300;background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--radius-lg);
  padding:12px;box-shadow:var(--shadow-md);
  display:none;flex-wrap:wrap;gap:4px;width:260px;
}
.emoji-picker-popover.show { display:flex }
.emoji-opt {
  width:32px;height:32px;font-size:18px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .1s;
}
.emoji-opt:hover { background:var(--surface2) }
.emoji-picker-wrap { position:relative }

/* ── Kişiselleştirilmiş başlık ─────────────────────────────── */
.app-title-personal {
  font-size:16px;font-weight:600;color:var(--text);letter-spacing:-.2px;
}
/* ═══ ÖZET PDF / PRINT ════════════════════════════════════ */
.summary-print-btn {
  display:flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  border:none;border-radius:var(--radius);
  padding:9px 18px;font-size:13px;font-weight:600;
  cursor:pointer;margin-bottom:16px;font-family:var(--font);
  transition:opacity .2s;
}
.summary-print-btn:hover { opacity:.88 }
.summary-section-title {
  font-size:14px;font-weight:600;color:var(--text);
  margin:16px 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.summary-prog-row {
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.summary-prog-label { font-size:12px;color:var(--text2);min-width:100px }
.summary-prog-bar { flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden }
.summary-prog-fill { height:7px;border-radius:4px }
.summary-prog-val { font-size:12px;color:var(--text3);min-width:28px;text-align:right;font-family:var(--mono) }
.summary-streak-item {
  display:flex;align-items:center;gap:10px;padding:7px 0;
  border-top:1px solid var(--border);font-size:13px;
}
.summary-task-item {
  display:flex;align-items:center;gap:8px;padding:5px 0;
  border-top:1px solid var(--border);font-size:12px;color:var(--text2);
}
.summary-empty { font-size:12px;color:var(--text3);text-align:center;padding:12px }

/* ── PRINT MODUNDA sadece özet görünür ── */
@media print {
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  body > *:not(#app-screen) { display:none !important; }
  .topbar, .xp-bar-container, .tabs, .print-hide,
  .xp-toast, .levelup-overlay, .account-overlay, .account-panel { display:none !important; }
  .content { padding:0 !important }
  .panel { display:none !important }
  #panel-summary { display:block !important }
  .summary-print-btn { display:none !important }
  #app-screen { display:block !important; min-height:unset !important }
  #print-header { display:block !important }
  body { background:white !important; }
  .stat-box { border:1px solid #ddd !important; break-inside:avoid }
  .card { break-inside:avoid; border:1px solid #ddd !important }
}

/* Print header (sadece print'te görünür) */
#print-header {
  display:none;
  padding:0 0 16px;margin-bottom:16px;
  border-bottom:2px solid #4f46e5;
}
#print-header h2 { font-size:18px;font-weight:700;color:#4f46e5;margin-bottom:4px }
#print-header p  { font-size:12px;color:#666 }

/* ═══ XP TOAST ══════════════════════════════════════════════ */
.xp-toast {
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:var(--accent);color:#fff;border-radius:12px;
  padding:12px 20px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-md);
  transform:translateY(80px);opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;
  pointer-events:none;
}
.xp-toast.show { transform:translateY(0);opacity:1 }

/* ═══ RÜTBE YÜKSELME MODAL ══════════════════════════════════ */
.levelup-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;
  z-index:10000;opacity:0;pointer-events:none;transition:opacity .3s;
}
.levelup-overlay.show { opacity:1;pointer-events:all }
.levelup-card {
  background:var(--surface);border-radius:var(--radius-lg);
  padding:40px 32px;text-align:center;max-width:340px;width:90%;
  animation:pop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { 0%{transform:scale(.6)} 100%{transform:scale(1)} }
.levelup-symbol { font-size:64px;margin-bottom:12px }
.levelup-title  { font-size:22px;font-weight:700;margin-bottom:6px }
.levelup-sub    { color:var(--text2);font-size:14px;margin-bottom:24px }

/* ═══ BOŞ DURUM ═════════════════════════════════════════════ */
.empty {
  text-align:center;padding:40px;color:var(--text3);
  border:1.5px dashed var(--border);border-radius:var(--radius);
}
.empty-icon { font-size:36px;margin-bottom:10px }

/* ═══ YARDIMCI ══════════════════════════════════════════════ */
.section-header {
  font-size:15px;font-weight:600;margin-bottom:14px;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;
}
.text-muted { color:var(--text2) }
.text-sm { font-size:12px }
.flex { display:flex;align-items:center }
.gap-8 { gap:8px }
.mt-12 { margin-top:12px }
/* ═══ v7.5.6: TRACK KARTLARI (Rütbe Takipçileri) ════════════ */
.track-list { display:flex; flex-direction:column; gap:8px }
.track-card {
  padding:10px 12px; border:1.5px solid var(--border); border-radius:10px;
  background:var(--surface2); cursor:pointer; transition:all .15s;
}
.track-card:hover { border-color:var(--border2) }
.track-card.active {
  border-color:var(--accent);
  background:linear-gradient(0deg, rgba(79,70,229,.05), rgba(79,70,229,.02));
  box-shadow:0 0 0 3px rgba(79,70,229,.08);
}
.track-head { display:flex; align-items:center; gap:8px; margin-bottom:6px }
.track-emoji { font-size:18px }
.track-title { font-weight:600; font-size:13px; color:var(--text); flex:1 }
.track-xp { font-size:11px; font-weight:700; color:var(--accent); white-space:nowrap }
.track-rank { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text2); margin-bottom:4px }

/* ═══ v7.5.7: DENETLEYİCİ PANELİ ════════════════════════════ */
.sup-subtabs {
  display:flex; gap:4px; padding:4px; background:var(--surface2);
  border-radius:10px; margin-bottom:14px;
}
.sup-subtab {
  flex:1; padding:8px 12px; font-size:12px; font-weight:600;
  background:transparent; color:var(--text2); border-radius:7px;
  border:none; cursor:pointer; transition:all .15s;
}
.sup-subtab.active { background:var(--surface); color:var(--accent); box-shadow:var(--shadow) }
.sup-section { margin-bottom:20px }
.sup-card {
  padding:12px 14px; background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; margin-bottom:8px;
}
.sup-card-title { font-weight:600; font-size:13px; color:var(--text); margin-bottom:4px }
.sup-card-meta  { font-size:11px; color:var(--text3) }
.sup-progress-bar {
  height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:6px;
}
.sup-progress-fill {
  height:6px; background:var(--success); border-radius:3px; transition:width .4s;
}
.member-pick {
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid var(--border); border-radius:8px; margin-bottom:4px; cursor:pointer;
  transition:all .15s; font-size:12px;
}
.member-pick:hover { border-color:var(--border2) }
.member-pick.selected { background:rgba(79,70,229,.08); border-color:var(--accent) }
.member-pick input[type="checkbox"] { width:auto; margin:0 }
.invite-code-box {
  padding:16px; background:linear-gradient(135deg, rgba(79,70,229,.08), rgba(6,182,212,.08));
  border:1.5px dashed var(--accent); border-radius:12px; text-align:center;
}
.invite-code-val {
  font-family:var(--mono); font-size:22px; font-weight:700; letter-spacing:3px;
  color:var(--accent); margin:6px 0; user-select:all;
}
.assigned-badge {
  display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700;
  background:rgba(79,70,229,.12); color:var(--accent);
  padding:2px 7px; border-radius:6px; margin-left:4px;
}
.completion-row {
  display:flex; gap:10px; padding:8px 10px; border-bottom:1px solid var(--border);
  font-size:12px;
}
.completion-row:last-child { border-bottom:none }
.completion-user { font-weight:600; color:var(--text); min-width:100px }
.completion-note { flex:1; color:var(--text2); font-style:italic }
.completion-date { color:var(--text3); font-size:11px; white-space:nowrap }

/* ═══ v7.5.7: TAMAMLAMA NOTU MODALı ═════════════════════════ */
#complete-note-overlay,
#rank-rename-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
#complete-note-overlay.show,
#rank-rename-overlay.show { display:flex }
.complete-note-card {
  background:var(--surface); border-radius:14px; padding:20px;
  max-width:440px; width:100%; box-shadow:var(--shadow-md);
}
.complete-note-card h3 { font-size:14px; font-weight:600; margin-bottom:4px }
.complete-note-card .subtitle {
  font-size:12px; color:var(--text3); margin-bottom:12px;
}
.complete-note-card textarea {
  width:100%; min-height:90px; resize:vertical;
}
.complete-note-actions {
  display:flex; gap:8px; justify-content:flex-end; margin-top:12px;
}
.complete-note-actions button {
  padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600;
}
/* ═══ v7.5.9: Öncelik/Zorluk görsel ayrımı ══════════════════ */
/* Öncelik = kırmızı tonları (aciliyet) */
.select-priority {
  border-color: rgba(220,38,38,.3);
  background: linear-gradient(0deg, rgba(220,38,38,.03), rgba(220,38,38,.01)) var(--surface2);
}
.select-priority:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220,38,38,.1) }
[data-theme="dark"] .select-priority { border-color: rgba(248,113,113,.3) }

/* Zorluk = mor tonları (efor) */
.select-difficulty {
  border-color: rgba(124,58,237,.3);
  background: linear-gradient(0deg, rgba(124,58,237,.03), rgba(124,58,237,.01)) var(--surface2);
}
.select-difficulty:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.1) }
[data-theme="dark"] .select-difficulty { border-color: rgba(167,139,250,.3) }

.prio-field label { color: var(--danger) !important }
.diff-field label { color: #7c3aed !important }
[data-theme="dark"] .prio-field label { color: #f87171 !important }
[data-theme="dark"] .diff-field label { color: #a78bfa !important }

/* ═══ v7.5.9: Dil seçici ══════════════════════════════════ */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px; font-size: 11px;
}
.lang-toggle button {
  padding: 4px 9px; border-radius: 6px; background: transparent;
  color: var(--text3); font-weight: 600; border: none; cursor: pointer;
  transition: all .15s; font-family: var(--mono);
}
.lang-toggle button.active {
  background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.lang-toggle button:hover:not(.active) { color: var(--text) }

/* ═══ v7.6: ROZET SİSTEMİ ══════════════════════════════════ */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  transition: all .2s;
  cursor: default;
  position: relative;
  gap: 4px;
}
.badge-item.earned {
  border-color: var(--accent);
  background: linear-gradient(135deg,
    rgba(79,70,229,.07) 0%,
    rgba(79,70,229,.03) 100%
  );
  box-shadow: 0 0 0 3px rgba(79,70,229,.08);
}
.badge-item.locked {
  opacity: .45;
  filter: grayscale(1);
}
.badge-icon {
  font-size: 26px;
  line-height: 1;
  transition: transform .2s;
}
.badge-item.earned:hover .badge-icon { transform: scale(1.15) }
.badge-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  font-family: var(--mono);
  letter-spacing: .3px;
}
.badge-desc {
  font-size: 9.5px;
  color: var(--text3);
  line-height: 1.3;
}
.badge-earned-mark {
  position: absolute;
  top: 5px; right: 6px;
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
}
.badge-date {
  font-size: 9px;
  color: var(--text3);
  font-family: var(--mono);
}

/* Rozet kazanma popup */
.badge-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 10001;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.badge-popup-overlay.show { opacity: 1; pointer-events: all }
.badge-popup-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  max-width: 320px;
  width: 90%;
  box-shadow: var(--shadow-md);
  animation: badgePop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop {
  0%   { transform: scale(.5) rotate(-8deg); opacity: 0 }
  100% { transform: scale(1)  rotate(0deg);  opacity: 1 }
}
.badge-popup-icon {
  font-size: 72px;
  margin-bottom: 8px;
  display: block;
  animation: badgeShine 1.2s ease forwards .3s;
}
@keyframes badgeShine {
  0%   { filter: brightness(1) }
  50%  { filter: brightness(1.5) drop-shadow(0 0 16px gold) }
  100% { filter: brightness(1) }
}
.badge-popup-label {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent);
  font-family: var(--mono); margin-bottom: 8px;
}
.badge-popup-title  { font-size: 20px; font-weight: 700; margin-bottom: 6px }
.badge-popup-desc   { font-size: 13px; color: var(--text2); margin-bottom: 24px }

/* ═══ v7.7: CONTEXT SWITCH (Bireysel ↔ Kurumsal) ═══════════════ */

/* Topbar context butonu */
.ctx-switch-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--mono);
  letter-spacing: .3px;
  white-space: nowrap;
}
.ctx-switch-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
}
.ctx-switch-btn .ctx-icon { font-size: 14px; }

/* Kurumsal mod — body'e data-context="corporate" gelince */
body[data-context="corporate"] {
  --accent: #2563EB;
  --accent-light: rgba(37,99,235,.12);
}
body[data-context="corporate"] .topbar {
  border-bottom: 2px solid #2563EB22;
  background: var(--surface);
}
body[data-context="corporate"] #app-logo-title::after {
  content: " — Kurumsal";
  font-size: 11px;
  color: #2563EB;
  font-weight: 500;
  margin-left: 4px;
  font-family: var(--mono);
}
body[data-context="corporate"][lang="en"] #app-logo-title::after {
  content: " — Corporate";
}

/* Kurumsal modda bireysel-only elementleri gizle */
body[data-context="corporate"] .individual-only { display: none !important; }
/* Bireysel modda kurumsal-only elementleri gizle */
body[data-context="individual"] .corporate-only { display: none !important; }

/* Context badge — hesap panelinde */
.ctx-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .5px;
  margin-top: 4px;
}
.ctx-badge.individual { background: rgba(79,70,229,.1);  color: var(--accent); }
.ctx-badge.corporate  { background: rgba(37,99,235,.12); color: #2563EB; }

/* Kurumsal modda XP şeridi mavi */
body[data-context="corporate"] .xp-fill {
  background: linear-gradient(90deg, #2563EB, #3B82F6);
}
/* ═══ v7.7.4 — ONAY/UYARI MODALI ═══════════════════════════ */
/* Pattern: levelup-overlay/badge-popup ile aynı (fade-in + pop)
   z-index: 10002 (en üstte; level-up 10000, badge 10001)        */

.confirm-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:10002;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease;
  padding:1rem;
}
.confirm-overlay.show { opacity:1; pointer-events:all }

.confirm-card {
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:28px 24px 20px;
  width:100%; max-width:420px;
  box-shadow:var(--shadow-md);
  text-align:center;
  animation:confirmPop .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes confirmPop {
  0%   { transform:scale(.85); opacity:0 }
  100% { transform:scale(1);   opacity:1 }
}

.confirm-icon    { font-size:42px; margin-bottom:8px; line-height:1 }
.confirm-title   { font-size:17px; font-weight:700; color:var(--text); margin-bottom:6px }
.confirm-message {
  font-size:14px; color:var(--text2); line-height:1.5;
  margin-bottom:20px; white-space:pre-wrap;   /* "\n" karakterleri çalışsın */
}

.confirm-actions {
  display:flex; gap:8px; justify-content:flex-end;
}
.confirm-btn {
  flex:1;
  padding:10px 16px;
  border:none; border-radius:var(--radius-sm, 8px);
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:filter .15s, transform .05s;
}
.confirm-btn:hover  { filter:brightness(1.08) }
.confirm-btn:active { transform:translateY(1px) }
.confirm-btn:focus  { outline:2px solid var(--accent); outline-offset:2px }

.confirm-btn-cancel {
  background:var(--surface2);
  color:var(--text2);
  border:1px solid var(--border);
}
.confirm-btn-ok {
  background:var(--accent);
  color:#fff;
}

/* Tone'a göre OK butonu rengi */
.confirm-overlay[data-tone="danger"]  .confirm-btn-ok { background:var(--danger,  #dc2626) }
.confirm-overlay[data-tone="success"] .confirm-btn-ok { background:var(--success, #16a34a) }
/* info → varsayılan accent */

/* Alert modunda iptal butonu gizlenir (tek-buton modal) */
.confirm-overlay[data-mode="alert"] .confirm-btn-cancel { display:none }
.confirm-overlay[data-mode="alert"] .confirm-btn-ok    { flex:0 1 140px; margin:0 auto }

/* Mobil */
@media (max-width:480px) {
  .confirm-card    { padding:22px 18px 16px }
  .confirm-icon    { font-size:36px }
  .confirm-title   { font-size:16px }
  .confirm-message { font-size:13px }
  .confirm-btn     { padding:11px 12px; font-size:13px }
}

/* ═══ v7.8.2 — PROMPT MODALI (showPrompt) ═══════════════════ */
/* Confirm modal pattern'inin metin girişli kardeşi.
   z-index: 10003 (confirm 10002'nin üstünde — confirm açıkken
   prompt da açılırsa görünür kalsın)                          */

.prompt-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:10003;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease;
  padding:1rem;
}
.prompt-overlay.show { opacity:1; pointer-events:all }

.prompt-card {
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:28px 24px 20px;
  width:100%; max-width:420px;
  box-shadow:var(--shadow-md);
  text-align:center;
  animation:promptPop .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes promptPop {
  0%   { transform:scale(.85); opacity:0 }
  100% { transform:scale(1);   opacity:1 }
}

.prompt-icon    { font-size:42px; margin-bottom:8px; line-height:1 }
.prompt-title   { font-size:17px; font-weight:700; color:var(--text); margin-bottom:6px }
.prompt-message {
  font-size:14px; color:var(--text2); line-height:1.5;
  margin-bottom:14px; white-space:pre-wrap;
}

/* Input + textarea ortak gövdesi */
.prompt-field {
  width:100%;
  background:var(--surface2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 8px);
  padding:10px 12px;
  font-size:14px; font-family:inherit;
  margin-bottom:18px;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
.prompt-field:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.prompt-textarea {
  resize:vertical;
  min-height:80px;
  max-height:240px;
  line-height:1.45;
}

.prompt-actions {
  display:flex; gap:8px; justify-content:flex-end;
}
.prompt-btn {
  flex:1;
  padding:10px 16px;
  border:none; border-radius:var(--radius-sm, 8px);
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:filter .15s, transform .05s;
}
.prompt-btn:hover  { filter:brightness(1.08) }
.prompt-btn:active { transform:translateY(1px) }
.prompt-btn:focus  { outline:2px solid var(--accent); outline-offset:2px }

.prompt-btn-cancel {
  background:var(--surface2);
  color:var(--text2);
  border:1px solid var(--border);
}
.prompt-btn-ok {
  background:var(--accent);
  color:#fff;
}

/* Tone'a göre OK butonu rengi */
.prompt-overlay[data-tone="danger"]  .prompt-btn-ok { background:var(--danger,  #dc2626) }
.prompt-overlay[data-tone="success"] .prompt-btn-ok { background:var(--success, #16a34a) }

/* Mobil */
@media (max-width:480px) {
  .prompt-card    { padding:22px 18px 16px }
  .prompt-icon    { font-size:36px }
  .prompt-title   { font-size:16px }
  .prompt-message { font-size:13px }
  .prompt-field   { font-size:13px; padding:9px 11px }
  .prompt-btn     { padding:11px 12px; font-size:13px }
}

/* ══════════════════════════════════════════════════════════
   WIZARD — N-04 | Görev Ekleme Wizard (v7.8.3)
   z-index: 10003 (confirm/prompt'un üstünde)
   ══════════════════════════════════════════════════════════ */
.wizard-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center;
  z-index:10003;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
  padding:1rem;
}
.wizard-overlay.show { opacity:1; pointer-events:all }

.wizard-modal {
  background:var(--surface);
  border-radius:var(--radius-lg,14px);
  width:100%; max-width:460px;
  box-shadow:0 12px 48px rgba(0,0,0,.22);
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* Progress bar */
.wiz-progress {
  height:4px; background:var(--border);
}
.wiz-progress-fill {
  height:100%; background:var(--accent);
  transition:width .3s ease;
}

/* Header */
.wiz-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 0;
}
.wiz-step-label {
  font-size:12px; font-weight:600;
  color:var(--text2); letter-spacing:.5px;
}
.wiz-close-btn {
  background:none; border:none; cursor:pointer;
  font-size:18px; color:var(--text3); line-height:1;
  padding:2px 4px; border-radius:4px;
}
.wiz-close-btn:hover { color:var(--text1); background:var(--border) }

/* Content */
.wizard-content {
  padding:20px 22px 16px;
  min-height:260px;
  display:flex; flex-direction:column; justify-content:center;
}

.wiz-heading {
  font-size:1.15rem; font-weight:700;
  color:var(--text1); margin-bottom:16px; line-height:1.3;
}
.wiz-sub {
  font-size:12px; color:var(--text3);
}
.wiz-label {
  font-size:12px; font-weight:600;
  color:var(--text2); display:block; margin-bottom:4px;
}

/* Title step */
.wiz-text-input {
  width:100%; padding:12px 14px;
  border:2px solid var(--border); border-radius:var(--radius,8px);
  background:var(--surface2,var(--bg2));
  font-size:15px; color:var(--text1);
  transition:border-color .15s;
}
.wiz-text-input:focus { outline:none; border-color:var(--accent) }

/* Date step */
.wiz-date-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.wiz-date-input {
  width:100%; padding:10px 12px;
  border:2px solid var(--border); border-radius:var(--radius,8px);
  background:var(--surface2,var(--bg2));
  font-size:13px; color:var(--text1);
}
.wiz-date-input:focus { outline:none; border-color:var(--accent) }

/* Option steps (priority / category / difficulty) */
.wiz-options {
  display:flex; flex-direction:column; gap:8px;
}
.wiz-option {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:var(--surface2,var(--bg2));
  border:2px solid var(--border);
  border-radius:var(--radius,8px);
  cursor:pointer; text-align:left; width:100%;
  transition:border-color .12s, background .12s;
}
.wiz-option:hover { border-color:var(--accent); background:var(--bg2) }
.wiz-option.selected {
  border-color:var(--accent);
  background:rgba(var(--accent-rgb,200,65,10),.08);
}
.wiz-opt-emoji { font-size:1.3rem; line-height:1; flex-shrink:0 }
.wiz-opt-label { flex:1; font-size:13px; font-weight:600; color:var(--text1) }
.wiz-opt-xp    { font-size:11px; color:var(--text3); white-space:nowrap }

/* Summary step */
.wiz-summary { display:flex; flex-direction:column; gap:12px }
.wiz-summary-title {
  font-size:1.1rem; font-weight:700; color:var(--text1);
  padding-bottom:10px; border-bottom:1px solid var(--border);
}
.wiz-summary-rows { display:flex; flex-direction:column; gap:6px }
.wiz-summary-row {
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--text2);
}
.wiz-summary-row span:first-child { font-size:1rem; width:22px; text-align:center }
.wiz-summary-row.xp-row span:last-child { font-size:14px }

.wiz-advanced-toggle {
  background:none; border:none; cursor:pointer;
  font-size:12px; font-weight:600;
  color:var(--accent); padding:6px 0; text-align:left;
  display:flex; align-items:center; gap:4px;
}
.wiz-advanced-toggle:hover { opacity:.8 }
.wiz-advanced-content { display:flex; flex-direction:column; gap:10px; margin-top:4px }
.wiz-textarea {
  width:100%; padding:10px 12px;
  border:2px solid var(--border); border-radius:var(--radius,8px);
  background:var(--surface2,var(--bg2));
  font-size:13px; color:var(--text1); resize:vertical;
}
.wiz-textarea:focus { outline:none; border-color:var(--accent) }

/* Nav */
.wizard-nav {
  display:flex; align-items:center; gap:8px;
  padding:12px 18px 16px;
  border-top:1px solid var(--border);
}
.wiz-btn {
  padding:10px 18px; border-radius:var(--radius,8px);
  font-size:13px; font-weight:600; cursor:pointer;
  border:2px solid transparent; transition:opacity .12s;
}
.wiz-btn:hover { opacity:.85 }
.wiz-btn-back {
  background:var(--surface2,var(--bg2));
  border-color:var(--border); color:var(--text2);
}
.wiz-btn-skip { background:none; border:none; color:var(--text3); padding:10px 6px }
.wiz-btn-next { background:var(--accent); color:#fff; margin-left:auto }
.wiz-btn-save { background:var(--accent); color:#fff; margin-left:auto }
.wiz-btn-save:disabled { opacity:.6; cursor:default }

/* Trigger card */
.wizard-trigger-card {
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  transition:border-color .15s;
}
.wizard-trigger-card:hover { border-color:var(--accent) }
.wiz-trigger-left { display:flex; align-items:center; gap:12px }
.wiz-trigger-icon {
  width:36px; height:36px;
  background:var(--accent); color:#fff;
  border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.4rem; font-weight:300;
  flex-shrink:0; line-height:1;
}
.wiz-trigger-text { font-weight:600; font-size:14px }
.wiz-trigger-sub  { font-size:11px; color:var(--text3); margin-top:1px }

@media (max-width:480px) {
  .wiz-date-grid { grid-template-columns:1fr }
  .wizard-content { padding:16px 16px 12px; min-height:220px }
  .wizard-nav     { padding:10px 14px 14px }
  .wiz-heading    { font-size:1rem }
}

/* ── N-03: Bildirimler ─────────────────────────────────────── */

/* Topbar zil butonu */
.notif-bell-btn {
  position: relative;
  background: transparent;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 8px;
  line-height: 1;
  transition: background .15s;
}
.notif-bell-btn:hover { background: var(--surface2) }

/* Okunmamış sayacı rozeti */
.notif-bell-badge {
  position: absolute;
  top: 1px; right: 1px;
  min-width: 16px; height: 16px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: 9px; font-weight: 700;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}

/* Panel içi "Tümünü oku" butonu */
.notif-mark-btn {
  font-size: 11px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  font-weight: 600;
  transition: background .12s;
}
.notif-mark-btn:hover { background: var(--surface2) }

/* Bildirim listesi öğesi */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  transition: background .12s;
}
.notif-item.unread {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.notif-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}
.notif-body { flex: 1; min-width: 0 }
.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 2px;
}
.notif-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
  margin-bottom: 4px;
}
.notif-date {
  font-size: 10px;
  color: var(--text3);
}
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
}

/* Boş durum */
.notif-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text3);
  font-size: 13px;
}
.notif-empty-icon { font-size: 2.5rem; margin-bottom: 10px }


/* ═══════════════════════════════════════════════════════════
   N-02 — İstirahat / DND Modu
   ═══════════════════════════════════════════════════════════ */

.dnd-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,.13) 0%, rgba(139,92,246,.07) 100%);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.dnd-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dnd-banner-icon {
  font-size: 1.8rem;
  line-height: 1;
}
.dnd-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.dnd-banner-sub {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}
.dnd-banner-end {
  flex-shrink: 0;
  background: rgba(220,38,38,.12);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.dnd-banner-end:hover { background: rgba(220,38,38,.22) }

.panel-section-desc {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 8px;
  line-height: 1.5;
}
.dnd-toggle-btn {
  background: rgba(124,58,237,.1);
  color: var(--accent);
  border: 1px solid var(--accent);
  width: 100%;
  text-align: left;
}
.dnd-toggle-btn.dnd-btn-active {
  background: rgba(220,38,38,.1);
  color: var(--danger);
  border-color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════
   MOBİL RESPONSIVE — @media (max-width: 600px)
   ═══════════════════════════════════════════════════════════════ */

/* DÜZELTME 2 — Topbar mobilde küçült */
@media (max-width: 600px) {
  .topbar {
    padding: 6px 10px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .app-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
  }
  .ctx-switch-btn, #ctx-switch-btn {
    font-size: 10px;
    padding: 3px 7px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-right {
    gap: 4px;
    flex-shrink: 0;
  }
  .xp-section {
    padding: 4px 10px;
  }
  .xp-rank-name {
    font-size: 12px;
  }
  .xp-numbers {
    font-size: 11px;
  }
}

/* DÜZELTME 3 — Tab çubuğu mobilde */
@media (max-width: 600px) {
  .tab {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* DÜZELTME 4 — Hesap paneli mobilde tam genişlik */
@media (max-width: 600px) {
  .account-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0;
  }
}

/* DÜZELTME 5 — Modallar mobilde sığsın */
@media (max-width: 600px) {
  .modal-content, .rank-modal, .ranks-modal {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 85vh;
    overflow-y: auto;
    margin: 0 auto;
  }
  .modal-overlay, .ranks-overlay, .ranks-modal-overlay {
    padding: 10px;
    align-items: flex-end;
  }
}

/* DÜZELTME 6 — Takvim grid mobilde tam sığsın */
@media (max-width: 600px) {
  .cal-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .cal-day {
    padding: 6px 2px;
    font-size: 12px;
    min-height: 36px;
  }
  .cal-day-name {
    font-size: 10px;
    padding: 4px 2px;
  }
  #cal-month-label {
    font-size: 14px;
  }
}

/* DÜZELTME 7 — Genel kart ve panel overflow */
@media (max-width: 600px) {
  .content, .panel {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .card {
    max-width: 100%;
  }
  .dashboard-top {
    flex-direction: column;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══ MOBİL RESPONSIVE (forte v7.8.3) ══════════════════════ */
@media (max-width: 600px) {

  /* ── Topbar ── */
  .topbar {
    padding: 0 12px;
    height: 50px;
    gap: 6px;
  }
  .topbar-left {
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .logo {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 130px;
  }
  .topbar-right {
    gap: 4px;
    flex-shrink: 0;
  }
  .ctx-switch-btn {
    font-size: 11px;
    padding: 4px 8px;
    max-width: 80px;
    overflow: hidden;
  }
  .ctx-switch-btn span#ctx-label {
    display: none;
  }
  .user-name-short {
    display: none;
  }
  .user-badge {
    padding: 4px 6px;
    gap: 4px;
  }
  .dark-toggle-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .notif-bell-btn {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  /* ── XP Barı ── */
  .xp-bar-container {
    padding: 6px 12px;
    gap: 8px;
  }
  .rank-badge {
    font-size: 11px;
    gap: 4px;
    min-width: 0;
    flex-shrink: 1;
  }
  .rank-symbol {
    font-size: 14px;
  }
  #rank-name {
    font-size: 11px;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #theme-name-display {
    display: none;
  }
  .xp-numbers {
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Tab çubuğu ── */
  .tabs {
    padding: 8px 10px 0;
    gap: 0;
  }
  .tab {
    padding: 7px 10px;
    font-size: 12px;
  }

  /* ── İçerik alanı ── */
  .content {
    padding: 12px;
  }

  /* ── Dashboard donut + stat ── */
  .dashboard-top {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .donut-card {
    flex-direction: row;
    gap: 16px;
    padding: 12px 16px;
    align-items: center;
  }
  .donut-wrap {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
  }
  .donut-pct {
    font-size: 20px;
  }
  .donut-legend {
    margin-top: 4px;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  /* ── Rütbe & diğer modallar ── */
  .ranks-modal,
  .modal-box,
  .wizard-modal,
  [id$="-overlay"] > div:not(.account-panel):not(.account-overlay) {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 auto;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    max-height: 85vh;
    overflow-y: auto;
  }

  /* ── Hesap paneli ── */
  .account-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ── Takvim ── */
  .cal-day {
    font-size: 12px;
    border-radius: 6px;
  }
  .cal-day-name {
    font-size: 9px;
    padding: 2px 0;
  }
  #cal-month-label {
    font-size: 14px;
  }

  /* ── Bildirim modalı ── */
  #notif-modal {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}