/* ============================================================
   DİJİTAL ÖĞRETMEN ASİSTANI — Görsel Zenginleştirme Katmanı
   ----------------------------------------------------------
   enhance.css — mevcut tasarımı BOZMADAN üzerine modernlik katar.
   design-system.css + layout.css + components.css'ten SONRA yüklenir.
   Hiçbir JS sınıfı/ID değişmez — yalnızca görsel iyileştirme.
   ============================================================ */

/* ── Sayfa arka planı: canlı, derin gradyan + hafif doku ── */
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--accent-glow), transparent 55%),
    radial-gradient(1000px 500px at 110% 10%, var(--blue-glow), transparent 50%),
    var(--bg0) !important;
  background-attachment: fixed;
  min-height: 100vh;
}

/* ── Topbar: derinlik + parlak alt çizgi ── */
.topbar {
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 32px rgba(0,0,0,.25);
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--blue), transparent);
  opacity: .5;
}

/* ── Logo ikonu: hafif nabız ── */
.logo-icon {
  animation: doa-pulse 3.2s ease-in-out infinite;
}
@keyframes doa-pulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(20,184,166,.6)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 20px rgba(20,184,166,.9)); transform: scale(1.06); }
}

/* ── Kartlar: gelişmiş hover, üst parlak kenar ── */
.card {
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  opacity: 0;
  transition: opacity .3s;
}
.card:hover::before { opacity: 1; }
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px var(--border2);
}

/* ── Bölüm başlığı: yanında parlak şerit ── */
.section-title {
  position: relative;
  padding-left: 16px;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 70%;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--blue));
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ── Butonlar: tıklama dalga efekti (ripple hissi) ── */
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary, .btn-success, .btn-danger {
  background-size: 150% 150%;
  animation: doa-shimmer 6s ease infinite;
}
@keyframes doa-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Input: odakta yumuşak büyüme ── */
.inp:focus {
  box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 12px rgba(0,0,0,.15);
}

/* ── Modül kartları (hub): premium his ── */
.hub-module-card {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s !important;
}
.hub-module-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%),
              var(--accent-glow), transparent 40%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.hub-module-card:hover::after { opacity: 1; }
.hub-module-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

/* ── Sayfa giriş animasyonu — modüller "akarak" gelir ── */
.module-container,
.card,
.hub-module-card {
  animation: doa-enter .45s cubic-bezier(.22,1,.36,1) backwards;
}
.card:nth-child(2)  { animation-delay: .05s; }
.card:nth-child(3)  { animation-delay: .10s; }
.card:nth-child(4)  { animation-delay: .15s; }
.hub-module-card:nth-child(2) { animation-delay: .04s; }
.hub-module-card:nth-child(3) { animation-delay: .08s; }
.hub-module-card:nth-child(4) { animation-delay: .12s; }
.hub-module-card:nth-child(5) { animation-delay: .16s; }
.hub-module-card:nth-child(6) { animation-delay: .20s; }
.hub-module-card:nth-child(7) { animation-delay: .24s; }
.hub-module-card:nth-child(8) { animation-delay: .28s; }
@keyframes doa-enter {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Geri butonu: yuvarlak, dolgulu hover ── */
.back-btn {
  transition: all .25s cubic-bezier(.34,1.56,.64,1) !important;
}
.back-btn:hover {
  background: var(--accent) !important;
  color: #fff !important;
  transform: translateX(-3px);
  box-shadow: 0 4px 14px var(--accent-glow);
}

/* ── Scrollbar: ince, markalı ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--blue));
  border-radius: 6px;
  border: 2px solid var(--bg0);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent2); }

/* ── Boş durumlar: cansız değil, davetkâr ── */
.empty, .perf-empty, .empty-state {
  position: relative;
  border-radius: var(--r2);
  background: var(--glass);
  border: 1px dashed var(--border2);
}

/* ── Toast bildirimleri: yumuşak giriş ── */
.toast, #perf-toast-box > div {
  animation: doa-toast-in .35s cubic-bezier(.22,1,.36,1);
}
@keyframes doa-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Tablo satırları: hover vurgu ── */
table tr { transition: background .15s; }
table tbody tr:hover { background: var(--accent-glow); }

/* ── Erişilebilirlik: hareket azaltma tercihi ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Odak görünürlüğü (klavye erişimi) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}