veya etiketine class="fade-in" ekleyeceğiz) */ .fade-in { animation: fadeIn 0.6s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* --- Özel Navigasyon Hover Efekti --- */ /* Geri dönüş linkleri ve sol menüdeki yazılar için şık bir alt çizgi animasyonu */ .nav-link-hover { position: relative; text-decoration: none; display: inline-block; } .nav-link-hover::after { content: ''; position: absolute; width: 0; height: 2px; display: block; margin-top: 4px; right: 0; background: currentColor; transition: width 0.3s ease; } .nav-link-hover:hover::after { width: 100%; left: 0; background: currentColor; } /* --- Özelleştirilmiş Scrollbar (Kaydırma Çubuğu) --- */ /* 3. seviye sayfalardaki sol menü için modern ve ince bir kaydırma çubuğu görünümü */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; /* Tailwind slate-300 rengiyle uyumlu */ border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; /* Üzerine gelindiğinde koyulaşır */ }