Admin Paneli ve Responsive

components/Header.tsx

@@ -111,6 +111,7 @@ export default function Header() {
                     {[
                       { icon: 'M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z', url: 'https://twitter.com/Ankara_BB' },
                       { icon: 'M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z', url: 'https://www.facebook.com/ankarabb' },
+                      { icon: 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z', url: 'https://www.instagram.com/ankarabb' },
                       { icon: 'M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z M4 2a2 2 0 100 4 2 2 0 000-4z', url: 'https://www.linkedin.com/company/ankara-bb' },
                     ].map((social, i) => (
                       <a

components/MetroLine.tsx

@@ -53,28 +53,28 @@ export default function MetroLine() {
   const progressPercentage = (currentStation / (totalStations - 1)) * 100;
 
   return (
-    <div className="bg-white rounded-2xl shadow-2xl p-8 lg:p-12">
+    <div className="bg-white rounded-2xl shadow-2xl p-4 md:p-8 lg:p-12">
       {/* Proje Başlığı */}
-      <div className="flex items-center justify-between mb-8">
-        <div className="flex items-center space-x-4">
-          <div className="w-12 h-12 rounded-full bg-[#F59E0B] flex items-center justify-center">
-            <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+      <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 md:mb-8 gap-4">
+        <div className="flex items-center space-x-3 md:space-x-4">
+          <div className="w-10 h-10 md:w-12 md:h-12 rounded-full bg-[#F59E0B] flex items-center justify-center shrink-0">
+            <svg className="w-5 h-5 md:w-6 md:h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
               <path d="M13 3v6h3l-4 5-4-5h3V3m-1 11v7h-1c-1.1 0-2-.9-2-2v-5h3m10 0v5c0 1.1-.9 2-2 2h-1v-7h3z"/>
             </svg>
           </div>
           <div>
-            <h3 className="text-2xl font-bold text-[#004B87]">A2 Metro Hattı İnşaatı</h3>
-            <p className="text-[#6B7280]">Abidin Paşa - Natoyolu</p>
+            <h3 className="text-lg md:text-2xl font-bold text-[#004B87]">A2 Metro Hattı İnşaatı</h3>
+            <p className="text-sm md:text-base text-[#6B7280]">Abidin Paşa - Natoyolu</p>
           </div>
         </div>
-        <div className="text-right">
-          <p className="text-sm text-[#6B7280]">İnşaat Durumu</p>
-          <p className="text-2xl font-bold text-[#F59E0B]">{Math.round(progressPercentage)}%</p>
+        <div className="text-left md:text-right">
+          <p className="text-xs md:text-sm text-[#6B7280]">İnşaat Durumu</p>
+          <p className="text-xl md:text-2xl font-bold text-[#F59E0B]">{Math.round(progressPercentage)}%</p>
         </div>
       </div>
 
-      {/* Metro Hat ve İnşaat Çizgisi */}
-      <div className="relative mb-4">
+      {/* Metro Hat ve İnşaat Çizgisi - Desktop */}
+      <div className="hidden md:block relative mb-4">
         {/* Gri arka plan hattı (tüm hat) */}
         <div className="absolute top-6 left-0 right-0 h-2 bg-gray-300 rounded-full"></div>
         
@@ -83,8 +83,8 @@ export default function MetroLine() {
              style={{width: `${progressPercentage}%`}}>
         </div>
 
-        {/* Duraklar Grid */}
-        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6 relative">
+        {/* Duraklar Grid - Desktop */}
+        <div className="grid grid-cols-4 lg:grid-cols-8 gap-6 relative">
           {stations.map((station, index) => (
             <div key={index} className="flex flex-col items-center">
               <div className={`relative z-10 rounded-full flex items-center justify-center mb-3 transition-all duration-500 ${getStationStyle(index, station.status)}`}>
@@ -123,23 +123,84 @@ export default function MetroLine() {
         </div>
       </div>
 
+      {/* Metro Hat - Mobil (Dikey Liste) */}
+      <div className="md:hidden space-y-3">
+        {stations.map((station, index) => (
+          <div key={index} className={`flex items-center space-x-3 p-3 rounded-lg transition-all duration-500 ${
+            index === currentStation ? 'bg-[#F59E0B]/10 border-2 border-[#F59E0B]' : 
+            station.status === 'completed' ? 'bg-green-50 border border-green-200' : 
+            'bg-gray-50 border border-gray-200'
+          }`}>
+            {/* İkon */}
+            <div className={`rounded-full flex items-center justify-center transition-all duration-500 shrink-0 ${
+              index === currentStation ? 'w-12 h-12 bg-[#F59E0B]' :
+              station.status === 'completed' ? 'w-10 h-10 bg-green-500' :
+              'w-10 h-10 bg-gray-300'
+            }`}>
+              {index === currentStation ? (
+                <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l2-2h4l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V6h5v5zm5.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6h-5V6h5v5z"/>
+                </svg>
+              ) : station.status === 'completed' ? (
+                <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+                </svg>
+              ) : (
+                <svg className="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+                </svg>
+              )}
+            </div>
+
+            {/* Bilgi */}
+            <div className="flex-1">
+              <h4 className={`font-bold text-sm ${
+                index === currentStation ? 'text-[#F59E0B]' :
+                station.status === 'completed' ? 'text-green-700' :
+                'text-gray-600'
+              }`}>
+                {station.name}
+              </h4>
+              <p className={`text-xs ${
+                index === currentStation ? 'text-[#F59E0B]' :
+                station.status === 'completed' ? 'text-green-600' :
+                'text-gray-500'
+              }`}>
+                {index === currentStation ? '🚇 Metro Burada' : 
+                 station.status === 'completed' ? '✓ Tamamlandı' : 
+                 '◯ Planlı'}
+              </p>
+            </div>
+
+            {/* Bağlantı çizgisi (son istasyon hariç) */}
+            {index < stations.length - 1 && (
+              <div className={`absolute left-8 w-0.5 h-8 ${
+                index < currentStation ? 'bg-green-500' :
+                index === currentStation ? 'bg-[#F59E0B]' :
+                'bg-gray-300'
+              }`} style={{ top: '100%', marginLeft: '-1px' }}></div>
+            )}
+          </div>
+        ))}
+      </div>
+
       {/* Alt Bilgi */}
-      <div className="mt-8 pt-6 border-t border-gray-200">
-        <div className="flex flex-wrap gap-6 justify-center text-sm">
+      <div className="mt-6 md:mt-8 pt-4 md:pt-6 border-t border-gray-200">
+        <div className="flex flex-col md:flex-row flex-wrap gap-3 md:gap-6 justify-center text-xs md:text-sm">
           <div className="flex items-center space-x-2">
-            <div className="w-5 h-5 rounded-full bg-green-500 border-2 border-white flex items-center justify-center">
-              <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 24 24">
+            <div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-green-500 border-2 border-white flex items-center justify-center shrink-0">
+              <svg className="w-2 h-2 md:w-3 md:h-3 text-white" fill="currentColor" viewBox="0 0 24 24">
                 <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
               </svg>
             </div>
             <span className="text-[#6B7280]">Tamamlandı</span>
           </div>
           <div className="flex items-center space-x-2">
-            <div className="w-5 h-5 rounded-full bg-[#F59E0B] border-2 border-white"></div>
+            <div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-[#F59E0B] border-2 border-white shrink-0"></div>
             <span className="text-[#6B7280]">İnşaat Halinde (Metro Burada)</span>
           </div>
           <div className="flex items-center space-x-2">
-            <div className="w-5 h-5 rounded-full bg-gray-300 border-2 border-dashed border-gray-400"></div>
+            <div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-gray-300 border-2 border-dashed border-gray-400 shrink-0"></div>
             <span className="text-[#6B7280]">Planlanan</span>
           </div>
         </div>