/* =====================================================
   Sinaps — Tuş & UI Renk Şekilleri
   Sonsuz Aşk 💙 Temasına Uygun & Yumuşak Geçişli
   ===================================================== */

/* 1. Renk değişkenleri için @property tanımları (Yumuşak geçiş için) */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #48cae4; }
@property --accent-2 { syntax: '<color>'; inherits: true; initial-value: #004e92; }
@property --accent-glow { syntax: '<color>'; inherits: true; initial-value: rgba(72, 202, 228, 0.2); }
@property --border-accent { syntax: '<color>'; inherits: true; initial-value: rgba(72, 202, 228, 0.3); }
@property --shadow-color { syntax: '<color>'; inherits: true; initial-value: rgba(0, 78, 146, 0.5); }

/* Temalar arası geçişin UI elemanlarına uygulanması */
html {
  transition: 
    --accent 1.2s ease, 
    --accent-2 1.2s ease, 
    --accent-glow 1.2s ease, 
    --border-accent 1.2s ease, 
    --shadow-color 1.2s ease;
}

/* ─────────────────────────────────────────
   VARSAYILAN (Sonsuz Aşk - Cyan & Dark Blue)
───────────────────────────────────────── */
html:not([data-color]) {
  --accent:        #48cae4;
  --accent-2:      #004e92;
  --accent-glow:   rgba(72, 202, 228, 0.20);
  --border-accent: rgba(72, 202, 228, 0.30);
  --shadow-color:  rgba(0, 78, 146, 0.50);
}

/* ─────────────────────────────────────────
   MOR
───────────────────────────────────────── */
html[data-color="mor"] {
  --accent:        #a855f7;
  --accent-2:      #7c3aed;
  --accent-glow:   rgba(168, 85, 247, 0.20);
  --border-accent: rgba(168, 85, 247, 0.30);
  --shadow-color:  rgba(124, 58, 237, 0.40);
}

/* ─────────────────────────────────────────
   MAVİ
───────────────────────────────────────── */
html[data-color="mavi"] {
  --accent:        #3B82F6;
  --accent-2:      #6366f1;
  --accent-glow:   rgba(59, 130, 246, 0.20);
  --border-accent: rgba(59, 130, 246, 0.30);
  --shadow-color:  rgba(99, 102, 241, 0.40);
}

/* ─────────────────────────────────────────
   YEŞİL
───────────────────────────────────────── */
html[data-color="yesil"] {
  --accent:        #22c55e;
  --accent-2:      #16a34a;
  --accent-glow:   rgba(34, 197, 94, 0.20);
  --border-accent: rgba(34, 197, 94, 0.30);
  --shadow-color:  rgba(22, 163, 74, 0.40);
}

/* ─────────────────────────────────────────
   SARI
───────────────────────────────────────── */
html[data-color="sari"] {
  --accent:        #eab308;
  --accent-2:      #ca8a04;
  --accent-glow:   rgba(234, 179, 8, 0.20);
  --border-accent: rgba(234, 179, 8, 0.30);
  --shadow-color:  rgba(202, 138, 4, 0.40);
}

/* ─────────────────────────────────────────
   TURUNCU
───────────────────────────────────────── */
html[data-color="turuncu"] {
  --accent:        #f97316;
  --accent-2:      #ea580c;
  --accent-glow:   rgba(249, 115, 22, 0.20);
  --border-accent: rgba(249, 115, 22, 0.30);
  --shadow-color:  rgba(234, 88, 12, 0.40);
}

/* ─────────────────────────────────────────
   KIRMIZI
───────────────────────────────────────── */
html[data-color="kirmizi"] {
  --accent:        #ef4444;
  --accent-2:      #dc2626;
  --accent-glow:   rgba(239, 68, 68, 0.20);
  --border-accent: rgba(239, 68, 68, 0.30);
  --shadow-color:  rgba(220, 38, 38, 0.40);
}

/* ─────────────────────────────────────────
   ÖĞRETMEN
───────────────────────────────────────── */
html[data-color="ogretmen"] {
  --accent:        #ef4444;
  --accent-2:      #3B82F6;
  --accent-glow:   rgba(239, 68, 68, 0.15);
  --border-accent: rgba(239, 68, 68, 0.28);
  --shadow-color:  rgba(59, 130, 246, 0.35);
}

/* ─────────────────────────────────────────
   ANASAYFA / LANDING
───────────────────────────────────────── */
html[data-color="anasayfa"] {
  --accent:        #3B82F6;
  --accent-2:      #ef4444;
  --accent-glow:   rgba(59, 130, 246, 0.15);
  --border-accent: rgba(59, 130, 246, 0.28);
  --shadow-color:  rgba(239, 68, 68, 0.35);
}

/* ─────────────────────────────────────────
   UI ELEMANLARI & TUŞ TAKIMI
───────────────────────────────────────── */

/* Buton primary — Gönderdiğin tarza uygun gradient ve gölge */
.btn-primary {
  background: linear-gradient(45deg, var(--accent-2), var(--accent));
  box-shadow: 0 5px 15px var(--shadow-color);
  border: none;
  color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px; /* Giriş sayfasındaki yumuşak köşeler */
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-color);
}

/* Buton secondary hover */
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Input / Select focus — Camgöbeği aydınlatma efekti */
.input:focus, .select:focus, textarea:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* Nav aktif item */
.nav-item.active {
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid var(--border-accent);
}

/* Nav badge */
.nav-badge {
  background: var(--accent);
}

/* Sidebar toggle hover */
.sidebar-toggle-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Tab aktif */
.tab-btn.active {
  color: var(--accent);
  border-color: var(--accent);
}

/* Progress bar */
.progress-fill {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* Theme toggle aktif */
.theme-opt.active {
  background: var(--accent);
  color: #fff;
}

/* User avatar */
.user-avatar {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}

/* Bottom nav aktif */
.bottom-nav-item.active {
  color: var(--accent);
}
.bottom-nav-item.active::before {
  background: var(--accent);
}

/* Chat mesaj kendi baloncuğu */
.chat-msg.self .msg-bubble {
  background: var(--accent-glow);
  border-color: var(--border-accent);
}

/* AI chat kullanıcı baloncuğu */
.ai-msg.user .ai-bubble {
  background: var(--accent-glow);
  border-color: var(--border-accent);
}

/* Loader fill rengi */
.loader-fill {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* Program Oluştur butonu */
.btn-create-program {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 5px 20px var(--shadow-color);
}
.btn-create-program:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-color);
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: var(--border-accent);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Loader nöronlar */
.sinaps-neuron-left {
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
}
.sinaps-neuron-right {
  background: var(--accent-2);
}
.sinaps-axon {
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.4), var(--accent-2));
}