@import '../src/styles/tokens.css';
/* ══════════════════════════════════════════════
   RESET / BASE
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════════
   BACKGROUND CANVAS
══════════════════════════════════════════════ */
.bg-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 100%);
}

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  animation: drift 12s ease-in-out infinite alternate;
}
.bg-glow--1 { width:600px; height:600px; top:-200px; left:-100px;  background:radial-gradient(circle,#c9a84c,transparent 70%); animation-delay:0s; }
.bg-glow--2 { width:500px; height:500px; top:10%; right:-150px;    background:radial-gradient(circle,#60c8f0,transparent 70%); animation-delay:-4s; opacity:0.08; }
.bg-glow--3 { width:400px; height:400px; bottom:10%; left:40%;     background:radial-gradient(circle,#a064ff,transparent 70%); animation-delay:-8s; opacity:0.07; }

@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,20px) scale(1.05); }
}

/* ══════════════════════════════════════════════
   DASHBOARD WRAPPER
══════════════════════════════════════════════ */
.dashboard {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

/* ══════════════════════════════════════════════
   HERO — yatay kart düzeni
   [eyebrow + title] | [dikey çizgi] | [açıklama]
══════════════════════════════════════════════ */
.hero {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  padding: 28px 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.6s cubic-bezier(0.4,0,0.2,1) both;
}

/* Sol altın çizgi aksanı */
.hero::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  background: linear-gradient(to bottom, transparent, #c9a84c 40%, #c9a84c 60%, transparent);
  border-radius: 999px;
}

/* Sağ köşe parıltı */
.hero::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.07), transparent 70%);
  pointer-events: none;
}

/* Sol blok */
.hero__left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* Eyebrow */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
}

.eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
  animation: pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.35; transform:scale(0.65); }
}

/* Başlık */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text-primary);
  white-space: nowrap;
}

.hero__title--accent {
  background: linear-gradient(135deg, #c9a84c 0%, #f0d080 45%, #c9a84c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: shimmer 4s ease-in-out infinite;
  display: block;
}

@keyframes shimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Dikey ayırıcı çizgi */
.hero__sep {
  width: 1px;
  height: 56px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

/* Açıklama metni */
.hero__sub {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
  max-width: 340px;
}

/* ══════════════════════════════════════════════
   STATS STRIP
══════════════════════════════════════════════ */
.stats-strip {
  display: flex;
  align-items: center;
  margin-bottom: 48px;
  padding: 16px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  width: fit-content;
  animation: fadeUp 0.7s 0.1s cubic-bezier(0.4,0,0.2,1) both;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 24px;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-divider {
  width: 1px;
  height: 32px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   CARDS GRID
══════════════════════════════════════════════ */
.action-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* ── Base Card ── */
.action-card {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  text-align: left;
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 22px 20px 18px;
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition);
  animation: fadeUp 0.6s cubic-bezier(0.4,0,0.2,1) both;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-card:nth-child(1) { animation-delay: 0.12s; }
.action-card:nth-child(2) { animation-delay: 0.17s; }
.action-card:nth-child(3) { animation-delay: 0.22s; }
.action-card:nth-child(4) { animation-delay: 0.27s; }
.action-card:nth-child(5) { animation-delay: 0.32s; }
.action-card:nth-child(6) { animation-delay: 0.37s; }
.action-card:nth-child(7) { animation-delay: 0.42s; }
.action-card:nth-child(8) { animation-delay: 0.47s; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.card-glow {
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  top: -60px; right: -60px;
  filter: blur(60px);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.action-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}
.action-card:hover .card-glow { opacity: 0.25; }
.action-card:active { transform: scale(0.97); transition: transform 0.1s; }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2px;
}

.card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: var(--transition);
  flex-shrink: 0;
}
.action-card:hover .card-icon {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.card-arrow {
  color: var(--text-muted);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: var(--transition);
  flex-shrink: 0;
}
.action-card:hover .card-arrow {
  opacity: 1;
  transform: translate(0,0);
}

.card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.2;
}

.card-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  flex: 1;
}

.card-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  width: fit-content;
  margin-top: 2px;
  transition: var(--transition);
}

/* ══════════════════════════════════════════════
   CARD VARIANTS
══════════════════════════════════════════════ */
.action-card--primary .card-glow    { background: var(--gold); }
.action-card--primary:hover         { border-color:rgba(201,168,76,0.35); box-shadow:0 20px 40px -10px rgba(201,168,76,0.15); }
.action-card--primary:hover .card-icon { color:var(--gold); border-color:rgba(201,168,76,0.3); }
.action-card--primary:hover .card-tag  { color:var(--gold); border-color:rgba(201,168,76,0.3); }

.action-card--gecmis .card-glow     { background: var(--rose); }
.action-card--gecmis:hover          { border-color:rgba(240,112,104,0.3); box-shadow:0 20px 40px -10px rgba(240,112,104,0.12); }
.action-card--gecmis:hover .card-icon  { color:var(--rose); border-color:rgba(240,112,104,0.25); }
.action-card--gecmis:hover .card-tag   { color:var(--rose); border-color:rgba(240,112,104,0.25); }

.action-card--kelimeler .card-glow  { background: var(--green); }
.action-card--kelimeler:hover       { border-color:rgba(79,214,156,0.3); box-shadow:0 20px 40px -10px rgba(79,214,156,0.12); }
.action-card--kelimeler:hover .card-icon { color:var(--green); border-color:rgba(79,214,156,0.25); }
.action-card--kelimeler:hover .card-tag  { color:var(--green); border-color:rgba(79,214,156,0.25); }

.action-card--ekle .card-glow       { background: var(--blue); }
.action-card--ekle:hover            { border-color:rgba(96,200,240,0.3); box-shadow:0 20px 40px -10px rgba(96,200,240,0.12); }
.action-card--ekle:hover .card-icon { color:var(--blue); border-color:rgba(96,200,240,0.25); }
.action-card--ekle:hover .card-tag  { color:var(--blue); border-color:rgba(96,200,240,0.25); }

.action-card--artikel .card-glow    { background: var(--amber); }
.action-card--artikel:hover         { border-color:rgba(255,210,80,0.3); box-shadow:0 20px 40px -10px rgba(255,210,80,0.12); }
.action-card--artikel:hover .card-icon { color:var(--amber); border-color:rgba(255,210,80,0.25); }
.action-card--artikel:hover .card-tag  { color:var(--amber); border-color:rgba(255,210,80,0.25); }

.action-card--cumle .card-glow      { background: var(--blue); }
.action-card--cumle:hover           { border-color:rgba(96,200,240,0.3); box-shadow:0 20px 40px -10px rgba(96,200,240,0.12); }
.action-card--cumle:hover .card-icon { color:var(--blue); border-color:rgba(96,200,240,0.25); }
.action-card--cumle:hover .card-tag  { color:var(--blue); border-color:rgba(96,200,240,0.25); }

.action-card--quiz .card-glow       { background: var(--violet); }
.action-card--quiz:hover            { border-color:rgba(160,100,255,0.3); box-shadow:0 20px 40px -10px rgba(160,100,255,0.12); }
.action-card--quiz:hover .card-icon { color:var(--violet); border-color:rgba(160,100,255,0.25); }
.action-card--quiz:hover .card-tag  { color:var(--violet); border-color:rgba(160,100,255,0.25); }

.action-card--sponsor .card-glow    { background: var(--amber); }
.action-card--sponsor:hover         { border-color:rgba(255,210,80,0.3); box-shadow:0 20px 40px -10px rgba(255,210,80,0.12); }
.action-card--sponsor:hover .card-icon { color:var(--amber); border-color:rgba(255,210,80,0.25); }
.action-card--sponsor:hover .card-tag  { color:var(--amber); border-color:rgba(255,210,80,0.25); }

.action-card--ceviri .card-glow    { background: #38bdf8; }
.action-card--ceviri:hover         { border-color:rgba(56,189,248,0.3); box-shadow:0 20px 40px -10px rgba(56,189,248,0.12); }
.action-card--ceviri:hover .card-icon { color:#38bdf8; border-color:rgba(56,189,248,0.25); }
.action-card--ceviri:hover .card-tag  { color:#38bdf8; border-color:rgba(56,189,248,0.25); }

.action-card--ai .card-glow     { background: #a064ff; }
.action-card--ai:hover          { border-color:rgba(160,100,255,0.3); box-shadow:0 20px 40px -10px rgba(160,100,255,0.12); }
.action-card--ai:hover .card-icon { color:#a064ff; border-color:rgba(160,100,255,0.25); }
.action-card--ai:hover .card-tag  { color:#a064ff; border-color:rgba(160,100,255,0.25); }

/* ══════════════════════════════════════════════
   DERSLER — BOŞALT DURUMU
══════════════════════════════════════════════ */
.dersler-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px 100px;
  animation: fadeUp 0.5s cubic-bezier(0.4,0,0.2,1) both;
}

.dersler-empty__icon {
  font-size: 56px;
  margin-bottom: 20px;
  opacity: 0.5;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.dersler-empty__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.dersler-empty__desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 420px;
  margin: 0 0 36px;
}

.dersler-empty__levels {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.dersler-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  transition: var(--transition);
  animation: fadeUp 0.5s cubic-bezier(0.4,0,0.2,1) both;
}

.dersler-level:nth-child(1) { animation-delay: 0.1s; }
.dersler-level:nth-child(2) { animation-delay: 0.16s; }
.dersler-level:nth-child(3) { animation-delay: 0.22s; }
.dersler-level:nth-child(4) { animation-delay: 0.28s; }
.dersler-level:nth-child(5) { animation-delay: 0.34s; }

.dersler-level--a1 { color: #22c55e; border-color: rgba(34,197,94,0.2);  background: rgba(34,197,94,0.06); }
.dersler-level--a2 { color: #86efac; border-color: rgba(134,239,172,0.2); background: rgba(134,239,172,0.05); }
.dersler-level--b1 { color: var(--blue); border-color: rgba(96,200,240,0.2); background: rgba(96,200,240,0.05); }
.dersler-level--b2 { color: #818cf8;  border-color: rgba(129,140,248,0.2); background: rgba(129,140,248,0.05); }
.dersler-level--c1 { color: var(--gold); border-color: rgba(201,168,76,0.25); background: rgba(201,168,76,0.07); }


/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1060px) {
  .action-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet: hero dikey düzene geçer */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
  }
  .hero__left { gap: 6px; }
  .hero__sep { display: none; }
  .hero__title { white-space: normal; font-size: clamp(22px, 5vw, 34px); }
  .hero__sub { max-width: 100%; font-size: 13px; }
}

@media (max-width: 768px) {
  .dashboard { padding: 72px 16px 60px; }
  .hero { margin-bottom: 20px; border-radius: 16px; }
  .stats-strip { width: 100%; margin-bottom: 24px; padding: 14px 0; justify-content: space-around; }
  .stat-item { padding: 0 12px; flex: 1; }
  .stat-num { font-size: 22px; }
  .action-cards { gap: 10px; }
  .action-card { padding: 18px 16px 14px; }
  .card-title { font-size: 15px; }
  .card-desc { font-size: 12.5px; }
  .dersler-empty { padding: 60px 16px 80px; }
}

@media (max-width: 480px) {
  .dashboard { padding: 64px 12px 48px; }
  .hero { padding: 18px 18px; margin-bottom: 16px; gap: 12px; }
  .hero__eyebrow { font-size: 9px; }
  .hero__title { font-size: clamp(20px, 7vw, 28px); }
  .hero__sub { font-size: 12.5px; line-height: 1.65; }
  .stats-strip { padding: 12px 0; margin-bottom: 18px; }
  .stat-num { font-size: 20px; }
  .stat-label { font-size: 10px; }
  .stat-divider { height: 28px; }
  .action-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .action-card { padding: 16px 14px 12px; gap: 6px; min-height: 44px; }
  .card-icon { width: 36px; height: 36px; }
  .card-icon svg { width: 18px; height: 18px; }
  .card-title { font-size: 14px; }
  .card-desc { display: none; }
  .card-tag { font-size: 9px; padding: 2px 7px; }
  .card-arrow { opacity: 0.4; transform: translate(0,0); }
  .dersler-level { width: 44px; height: 44px; font-size: 13px; border-radius: 11px; }
}

@media (max-width: 360px) {
  .dashboard { padding: 60px 10px 40px; }
  .action-cards { gap: 6px; }
  .action-card { padding: 14px 12px 10px; }
}
.action-card--notlar .card-glow  { background: #c9a84c; }
.action-card--notlar:hover       { border-color:rgba(201,168,76,0.35); box-shadow:0 20px 40px -10px rgba(201,168,76,0.15); }
.action-card--notlar:hover .card-icon { color:#c9a84c; border-color:rgba(201,168,76,0.3); }
.action-card--notlar:hover .card-tag  { color:#c9a84c; border-color:rgba(201,168,76,0.3); }