# ADR-002: TailwindCSS Yerine Vanilla CSS ve Glassmorphism ## Bağlam Bu portföyün estetik hedefi, "Apple/Linear/Vercel" düzeyinde birinci sınıf bir tasarıma ulaşmaktır. Bu, mikro-etkileşimlerin, karmaşık renk geçişlerinin, arka plan bulanıklık efektlerinin (glassmorphism) ve hassas tipografinin yoğun bir şekilde kullanılmasını gerektirir. ## Karar TailwindCSS yerine, sağlam bir CSS Değişkeni (Özel Özellikler) sistemine sahip **Vanilla CSS** (saf CSS) kullanmaya karar verdik. ### Nedenleri: 1. **DOM Temizliği:** TailwindCSS aşırı HTML sınıf karmaşasına yol açar (örn. `flex items-center justify-center bg-black/50 backdrop-blur-md border border-white/10...`). İşe alım uzmanlarının ve mühendislerin kaynak kodunu inceleyebileceği bir portföy için temiz, anlamsal bir DOM (Belge Nesne Modeli) tercih edilir. 2. **Karmaşık Animasyonlar:** GSAP ve özel CSS animasyon kareleri (keyframes) yoğun olarak kullanılıyor. Bunları Tailwind'in yardımcı sınıflarıyla entegre etmek, belirli yumuşatma fonksiyonları veya karmaşık iç içe seçiciler gerektiğinde genellikle sürtüşme yaratır. 3. **Özel İşçilik:** Vanilla CSS yazmak, tarayıcı işleme motoru, basamaklı kurallar ve modern CSS özellikleri (CSS Grid, Subgrid, `color-mix` vb.) hakkında temel bir ustalık gösterir. ## Sonuçlar ### Olumlu - Anlamsal HTML (`class="w-64 bg-gray-900..."` yerine `<div class="engineering-console">`). - Karmaşık zaman çizelgesi animasyonları için GSAP ile daha kolay entegrasyon. - Farklı tarayıcılardaki `backdrop-filter` oluşturma nüansları üzerinde daha ayrıntılı kontrol. ### Olumsuz - Yerleşik tasarım sistemi kısıtlamaları yoktur (renkler, boşluklar CSS değişkenleri aracılığıyla sıkı bir şekilde yönetilmelidir). - Ayıklanmış (purged) bir Tailwind stil dosyasına kıyasla biraz daha büyük CSS dosya boyutu (ancak bu proje boyutu için önemsizdir).