First

app/globals.css

@@ -3,6 +3,14 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  
+  /* Gülermak Metro Renk Paleti */
+  --vanilla-doe: #d0bea8;
+  --pale-oyster: #9a8c70;
+  --pagoda: #117695;
+  --caraway-brown: #6d573b;
+  --teal-dark-blue: #0d4b5c;
+  --black-stallion: #0f1a1a;
 }
 
 @theme inline {
@@ -10,6 +18,14 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  
+  /* Custom Color Palette */
+  --color-vanilla-doe: var(--vanilla-doe);
+  --color-pale-oyster: var(--pale-oyster);
+  --color-pagoda: var(--pagoda);
+  --color-caraway-brown: var(--caraway-brown);
+  --color-teal-dark-blue: var(--teal-dark-blue);
+  --color-black-stallion: var(--black-stallion);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -24,3 +40,18 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.5s ease-in-out;
+}