/* ----------------------------------------------------------------------------------------------------------

    Output device: screen, projection

    Author:     Nuvio (www.nuvio.cz)
    Update:     2008-07-29, 18:30 GMT+1
    Version:    2.2.6 (2008-07-13, 14:28 GMT+1)

    Structure:
        display; position; z-index; float; clear; width; height; overflow; margin; padding; border; background; align; font;

    Content:

        1) HTML tags
        2) HTML styles
        3) Layout
        4-1) Page: Homepage
        5) Others

---------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------
1) HTML tags
---------------------------------------------------------------------------------------------------------- */

body {background-color:#fff; color:#404040}

a {color:#404040;}
a:hover {color:#000;}

/* ----------------------------------------------------------------------------------------------------------
2) Yukarı gitme butonu
---------------------------------------------------------------------------------------------------------- */
.scroll-button {
    position: fixed;
    display: none; /* Varsayılan olarak görünmez */
    z-index: 100; /* Diğer elemanların üzerinde olsun */
    background-color: #029e3e; /* Buton arkaplan rengi */
    color: #ffffff; /* İkon rengi */
    border: 2px solid #0a3f00; /* Çerçeve ekleme */
    border-radius: 50%; /* Butonları daire şekline getirme */
    width: 40px; /* Buton genişliği */
    height: 40px;
    display: flex; /* Flexbox kullanarak ikonları ortala */
    align-items: center; /* Dikeyde ortalama */
    justify-content: center; /* Yatayda ortalama */
}

.scroll-button.up {
    left: 10px; /* Sol kısımda konumlandırma */
    bottom: 70px; /* Yukarı buton alt kısımda konumlandırma */
    cursor: pointer;
}
.scroll-button:hover {
background-color: #0fd64b;  /* Açık yeşil renk */
/* ----------------------------------------------------------------------------------------------------------
3) Layout
---------------------------------------------------------------------------------------------------------- */

    #nav span {color:#DDD;}
    #nav #nav-active {color:#DD1600;}

    #tray {background-color:#BFBFBF;}
    #tray li a {color:#404040;}
    #tray li#tray-active a {background-color:#DD1600; color:#FFF;}
    #tray li a:hover {background-color:#9F9F9F; color:#FFF;}

        #search #search-input {background-color:#FFF;}
        #search #search-input input {color:#b3b3b3;}

    #footer, #footer a {color:#9f9f9f;}
    #footer a:hover {color:#404040;}

/* ----------------------------------------------------------------------------------------------------------
4-1) Page: Homepage
---------------------------------------------------------------------------------------------------------- */

#col-top, #col-bottom, #col {background-color:#E9FAFF;}

#cols3 .col h3 {background-color:#F5F5F5; color:#DD1600;}
#cols3 .col h3 a {color:#DD1600;}
#cols3 .col h3 a:hover {color:#000;}
#cols3 .col-more {background:#F5F5F5;}

#cols2 #col-left .title h4, #cols2 #col-right h4 {color:#DD1600;}
#cols2 #col-left .title h4, #cols2 #col-left .title span {background-color:#FFF;}
#cols2 #col-left .article {color:#DD1600;}
#cols2 #col-left a:hover.article {color:#000;}

#cols2 #col-right {background-color:#F5F5F5;}
#cols2 #col-right h4 span {background-color:#F5F5F5;}

/* ----------------------------------------------------------------------------------------------------------
5) Others
---------------------------------------------------------------------------------------------------------- */
/*----------------------------------------------------------------------------------------------------------
6) Footer & Social Icons
-----------------------------------------------------------------------------------------------------------*/
        /* Footer CSS */
        footer {
            background: #1a1a1a;
            color: #fff;
            padding: 40px 20px;
        }

        .footer-content {
            max-width: 1200px;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .footer-top {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;
            flex-wrap: wrap;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .footer-logo img {
            height: 40px;
            margin-right: 10px;
        }

        nav.footer-nav {
            display: flex;
            gap: 25px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .footer-link {
            color: #ccc;
            text-decoration: none;
            position: relative;
            font-size: 1rem;
            padding-bottom: 4px;
            transition: color 0.3s ease;
        }

        .footer-link::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
            background: #00bcd4;
            width: 0;
            transition: width 0.3s ease;
        }

        .footer-link:hover {
            color: #fff;
        }

        .footer-link:hover::after {
            width: 100%;
        }

        .social-icon {
            position: relative;
            font-size: 26px;
            color: #fff;
            margin: 0 10px;
            text-decoration: none;
            transition: transform 0.3s ease;
            
          }

          .social-icon::after {
            content: "";
            position: absolute;
            width: 0%;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #fff;
            transition: width 0.3s ease;
          }
          
          .social-icon:hover {
            transform: rotate(10deg) scale(1.2);
            color: #f09433; /* Instagram rengine benzer */
          }
          
          .social-icon:hover::after {
            width: 100%;
          }
}
.high {color:#777}
.scroll-button {
    position: fixed;
    z-index: 100;
    background-color: #029e3e;
    color: #ffffff;
    border: 2px solid #0a3f00;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    cursor: pointer;
}

.scroll-button.up {
    left: 10px;
    bottom: 70px;
}

.scroll-button:hover {
    background-color: #0fd64b;
}
@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.container {
    animation: fadeSlideIn 1s ease-out;
}
	/* Yükleniyor animasyonu */
    #loader-wrapper {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .loader {
      text-align: center;
	  color: white;
    }

    .dot {
      display: inline-block;
      width: 16px; height: 16px;
      margin: 0 6px;
      border-radius: 50%;
      background-color: #00f0ff;
      animation: bounce 1.5s infinite ease-in-out;
    }

    .dot1 { animation-delay: 0s; }
    .dot2 { animation-delay: 0.2s; }
    .dot3 { animation-delay: 0.4s; }

    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.9); opacity: 0.6; }
      40% { transform: scale(1.4); opacity: 1; }
    }

    .loading-text {
      margin-top: 16px;
      font-size: 18px;
      font-family: 'Segoe UI', sans-serif;
      letter-spacing: 2px;
      animation: fadeText 2s infinite;
    }

    @keyframes fadeText {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }

    /* Sayfa stilleri */
    body {
      font-family: Arial, sans-serif;
      background: #f0f0f0;
      margin: 0;
      padding: 0;
    }

    .contact-container {
      max-width: 600px;
      margin: 100px auto;
      padding: 20px;
      background: #ffffff;
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
      border-radius: 12px;
    }

    .contact-container h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #302b63;
    }

    .contact-container input,
    .contact-container textarea {
      width: 100%;
      padding: 12px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 16px;
    }

    .contact-container button {
      width: 100%;
      background-color: #302b63;
      color: white;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }

    .contact-container button:hover {
      background-color: #4e4ab7;
    }

    @media (max-width: 600px) {
      .contact-container {
        margin: 60px 20px;
      }
    }
    /* Sayfa stilleri */
    body {
      font-family: Arial, sans-serif;
      background: #f0f0f0;
      margin: 0;
      padding: 0;
    }

    .contact-container {
      max-width: 600px;
      margin: 100px auto;
      padding: 20px;
      background: #ffffff;
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
      border-radius: 12px;
    }

    .contact-container h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #302b63;
    }

    .contact-container input,
    .contact-container textarea {
      width: 100%;
      padding: 12px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 16px;
    }

    .contact-container button {
      width: 100%;
      background-color: #302b63;
      color: white;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }

    .contact-container button:hover {
      background-color: #4e4ab7;
    }

    @media (max-width: 600px) {
      .contact-container {
        margin: 60px 20px;
      }
    }