:root {

         --primary-color: #000000;

         --secondary-color: #1a1a1a;

         --accent-color: #e51d1d;

         --text-color: #ffffff;

         --light-text: #b3b3b3;

         --bg-color: #0d0d0d;

         --card-bg: #1a1a1a;product



         /* Gece/Gündüz değişkenleri */

         --theme-toggle-bg: #333;

         --theme-toggle-color: #ffcc00;

     }



     /* Gündüz modu stilleri */

     body.light-mode {

         --primary-color: #f8f9fa;

         --secondary-color: #e9ecef;

         --accent-color: #d90429;

         --text-color: #212529;

         --light-text: #495057;

         --bg-color: #ffffff;

         --card-bg: #f8f9fa;

         --theme-toggle-bg: #f8f9fa;

         --theme-toggle-color: #ff8500;

     }



     body {

         scroll-behavior: smooth;

         font-family: 'Montserrat', sans-serif;

         margin: 0;

         padding-top: 80px;

         color: var(--text-color);

         overflow-x: hidden;

         background-color: var(--bg-color);

         transition: all 0.5s ease;

     }



     h1, h2, h3, .section-title, .nav-link {

         font-family: 'Bebas Neue', sans-serif;

         letter-spacing: 1px;

     }



     /* Navbar */

     .navbar {

         background-color: var(--primary-color);

         padding: 1rem 2rem;

         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

         transition: all 0.3s ease;

         border-bottom: 1px solid rgba(255, 255, 255, 0.1);

     }



         .navbar.scrolled {

             padding: 0.5rem 2rem;

             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

         }



.navbar-toggler {

    

    color: rgb(175 149 149 / 65%);

    

}



     .navbar-brand {

         font-weight: 700;

         font-size: 2rem;

         color: var(--accent-color) !important;

         display: flex;

         align-items: center;

         font-family: 'Bebas Neue', sans-serif;

         letter-spacing: 2px;

     }



         .navbar-brand span {

             color: white;

         }



     .nav-link {

         color: var(--text-color) !important;

         font-weight: 500;

         margin: 0 0.8rem;

         position: relative;

         transition: all 0.3s ease;

         font-size: 1.2rem;

         text-transform: uppercase;

         letter-spacing: 2px;

     }



         .nav-link:hover, .nav-link.active {

             color: var(--accent-color) !important;

         }



         .nav-link::after {

             content: '';

             position: absolute;

             bottom: 0;

             left: 0;

             width: 0;

             height: 2px;

             background-color: var(--accent-color);

             transition: width 0.3s ease;

         }



         .nav-link:hover::after, .nav-link.active::after {

             width: 100%;

         }



     /* Hero Section */

     .hero-section {

         position: relative;

         height: 100vh;

         min-height: 700px;

         display: flex;

         align-items: center;

         overflow: hidden;

         color: white;

     }

 



.hero-video {

    position: absolute;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    transform: translate(-50%, -50%);

    object-fit: cover;

    z-index: 0;

	/* Video karartma efekti */

         filter: brightness(0.4);

}

     /* Izgara efekti için pseudo element */

     .hero-section::after {

         content: '';

         position: absolute;

         top: 0;

         left: 0;

         width: 100%;

         height: 100%;

         background: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.3) 1px, transparent 1px);

         background-size: 40px 40px;

         z-index: 1;

         pointer-events: none;

     }



     .hero-content {

         position: relative;

         z-index: 2;

         max-width: 800px;

         margin: 0 auto;

         text-align: center;

         padding: 0 20px;

     }



     .hero-title {

         font-size: 4rem;

         margin-bottom: 1.5rem;

         line-height: 1.2;

         animation: fadeInDown 1s ease;

         text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);

         font-weight: 700;

         letter-spacing: 3px;

     }



     .hero-subtitle {

         font-size: 1.5rem;

         margin-bottom: 2rem;

         opacity: 0.9;

         animation: fadeInUp 1s ease 0.3s both;

         text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);

         font-weight: 300;

     }



     .btn-primary {

         background-color: var(--accent-color);

         border: none;

         padding: 15px 40px;

         font-weight: 600;

         border-radius: 0;

         transition: all 0.3s ease;

         animation: fadeIn 1s ease 0.6s both;

         position: relative;

         overflow: hidden;

         text-transform: uppercase;

         letter-spacing: 2px;

         font-family: 'Bebas Neue', sans-serif;

         font-size: 1.2rem;

     }



         .btn-primary:hover {

             background-color: #c03300;

             transform: translateY(-3px);

             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

         }



 .about-section,portfolio-section,contact-section{

         padding: 150px 0;

         background-color: var(--secondary-color);

     }



     /* About Section */

     .about-section {

          

         background-color: var(--secondary-color);

     }



     .about-image {

         position: relative;

         border-radius: 0;

         overflow: hidden;

         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

         transform: perspective(1000px) rotateY(-5deg);

         transition: all 0.5s ease;

         border: 1px solid rgba(255, 255, 255, 0.1);

     }



         .about-image:hover {

             transform: perspective(1000px) rotateY(0deg);

         }



         .about-image img {

             width: 100%;

             height: auto;

             transition: transform 0.5s ease;

         }



         .about-image:hover img {

             transform: scale(1.05);

         }



     .section-title {

         font-size: 3rem;

         margin-bottom: 1.5rem;

         position: relative;

         display: inline-block;

         color: var(--text-color);

         letter-spacing: 3px;

     }



         .section-title::after {

             content: '';

             position: absolute;

             bottom: -10px;

             left: 0;

             width: 50px;

             height: 3px;

             background-color: var(--accent-color);

         }



     .section-subtitle {

         font-size: 1.1rem;

         color: var(--light-text);

         margin-bottom: 2rem;

     }



     /* Services Section */

     .services-section {

         padding: 100px 0;

         background-color: var(--primary-color);

     }



     .service-card {

         perspective: 1000px;

         transform-style: preserve-3d;

         transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

         height: 100%;

         margin-bottom: 30px;

     }



     .service-card-inner {

         background-color: var(--card-bg);

         border-radius: 0;

         padding: 30px;

         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

         transition: transform 0.6s;

         transform-style: preserve-3d;

         height: 100%;

         border: 1px solid rgba(255, 255, 255, 0.1);

     }



     .service-card:hover .service-card-inner {

         transform: rotateY(15deg);

     }



     .service-icon {

         width: 70px;

         height: 70px;

         background-color: rgba(255, 77, 0, 0.1);

         border-radius: 0;

         display: flex;

         align-items: center;

         justify-content: center;

         margin-bottom: 20px;

         color: var(--accent-color);

         font-size: 1.8rem;

         transition: all 0.3s ease;

     }



     .service-card:hover .service-icon {

         background-color: var(--accent-color);

         color: white;

     }



     .service-title {

         font-size: 1.8rem;

         font-weight: 600;

         margin-bottom: 15px;

         color: var(--text-color);

         letter-spacing: 2px;

     }



     /* Portfolio Section */

     .portfolio-section {

         padding: 100px 0;

         background-color: var(--secondary-color);

     }



     .portfolio-item {

         position: relative;

         border-radius: 0;

         overflow: hidden;

         margin-bottom: 30px;

         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

         border: 1px solid rgba(255, 255, 255, 0.1);

     }

	 .portfolio-item:hover .portfolio-image {

    transform: scale(1.1);

    filter: brightness(1.1) blur(1px);

}



     .portfolio-image {

         width: 100%;

        /*height: 300px;*/

         object-fit: cover;

         transition: transform 0.5s ease;

     }



     .portfolio-overlay {

         position: absolute;

         top: 0;

         left: 0;

         width: 100%;

         height: 100%;

         background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);

         opacity: 0;

         transition: opacity 0.3s ease;

         display: flex;

         flex-direction: column;

         justify-content: flex-end;

         padding: 20px;

         color: white;

     }



     .portfolio-item:hover .portfolio-overlay {

         opacity: 1;

     }



     .portfolio-item:hover .portfolio-image {

         transform: scale(1.1);

     }



     .portfolio-title {

         font-size: 1.8rem;

         font-weight: 600;

         margin-bottom: 5px;

         transform: translateY(20px);

         transition: transform 0.3s ease;

         letter-spacing: 2px;

     }



     .portfolio-category {

         font-size: 1rem;

         opacity: 0.8;

         transform: translateY(20px);

         transition: transform 0.3s ease 0.1s;

     }



     .portfolio-item:hover .portfolio-title,

     .portfolio-item:hover .portfolio-category {

         transform: translateY(0);

     }



 .carousel-control-prev-icon,

.carousel-control-next-icon {

    background-color: var(--bs-danger);

    border-radius: 50%;

    width: 40px;

    height: 40px;

}



.carousel-control-prev,

.carousel-control-next {

    width: auto;

}





     /* Contact Section */

     .contact-section {

         padding: 100px 0;

         background-color: var(--primary-color);

     }



     .contact-info {

         margin-bottom: 40px;

     }



     .contact-item {

         display: flex;

         align-items: flex-start;

         margin-bottom: 20px;

     }



     .contact-icon {

         width: 50px;

         height: 50px;

         background-color: rgba(255, 77, 0, 0.1);

         border-radius: 0;

         display: flex;

         align-items: center;

         justify-content: center;

         color: var(--accent-color);

         font-size: 1.2rem;

         margin-right: 15px;

         flex-shrink: 0;

     }



     .contact-form {

         background-color: var(--card-bg);

         border-radius: 0;

         padding: 30px;

         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

         border: 1px solid rgba(255, 255, 255, 0.1);

     }



     .form-control {

         height: 50px;

         border-radius: 0;

         border: 1px solid rgba(255, 255, 255, 0.1);

         padding: 10px 15px;

         margin-bottom: 20px;

         transition: all 0.3s ease;

         background-color: var(--secondary-color);

         color: var(--text-color);

     }



         .form-control:focus {

             border-color: var(--accent-color);

             box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.1);

             background-color: var(--secondary-color);

             color: var(--text-color);

         }



     textarea.form-control {

         height: auto;

         min-height: 150px;

     }



     /* Google Maps */

     .map-container {

         height: 400px;

         margin-bottom: 30px;

         border: 1px solid rgba(255, 255, 255, 0.1);

         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

     }



         .map-container iframe {

             width: 100%;

             height: 100%;

             border: none;

         }



     /* Footer */

     .footer {

         background-color: #000000;

         color: white;

         padding: 80px 0 30px;

         border-top: 1px solid rgba(255, 255, 255, 0.1);

     }



     .footer-logo {

         font-size: 2rem;

         font-weight: 700;

         color: var(--accent-color);

         margin-bottom: 20px;

         display: inline-block;

         font-family: 'Bebas Neue', sans-serif;

         letter-spacing: 2px;

     }



         .footer-logo span {

             color: white;

         }



     .footer-about {

         margin-bottom: 30px;

         color: var(--light-text);

     }



     .footer-links h3 {

         font-size: 1.5rem;

         font-weight: 600;

         margin-bottom: 20px;

         position: relative;

         padding-bottom: 10px;

         letter-spacing: 2px;

     }



         .footer-links h3::after {

             content: '';

             position: absolute;

             bottom: 0;

             left: 0;

             width: 40px;

             height: 3px;

             background-color: var(--accent-color);

         }



     .footer-links ul {

         list-style: none;

         padding: 0;

     }



     .footer-links li {

         margin-bottom: 10px;

     }



     .footer-links a {

         color: var(--light-text);

         text-decoration: none;

         transition: all 0.3s ease;

     }



         .footer-links a:hover {

             color: var(--accent-color);

             padding-left: 5px;

         }



     .social-links a {

         display: inline-flex;

         align-items: center;

         justify-content: center;

         width: 40px;

         height: 40px;

         background-color: rgba(255, 255, 255, 0.1);

         border-radius: 0;

         color: white;

         margin-right: 10px;

         transition: all 0.3s ease;

     }



         .social-links a:hover {

             background-color: var(--accent-color);

             transform: translateY(-3px);

         }



     .footer-bottom {

         border-top: 1px solid rgba(255, 255, 255, 0.1);

         padding-top: 30px;

         margin-top: 50px;

         text-align: center;

         color: var(--light-text);

     }



     /* Theme Toggle Button */

     .theme-toggle {

         position: fixed;

         bottom: 30px;

         right: 30px;

         width: 50px;

         height: 50px;

         border-radius: 50%;

         background-color: var(--theme-toggle-bg);

         color: var(--theme-toggle-color);

         display: flex;

         align-items: center;

         justify-content: center;

         cursor: pointer;

         z-index: 999;

         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

         border: none;

         font-size: 1.2rem;

         transition: all 0.3s ease;

     }



         .theme-toggle:hover {

             transform: scale(1.1);

         }



     /* Animations */

     @keyframes fadeIn {

         from {

             opacity: 0;

         }



         to {

             opacity: 1;

         }

     }



     @keyframes fadeInUp {

         from {

             opacity: 0;

             transform: translateY(20px);

         }



         to {

             opacity: 1;

             transform: translateY(0);

         }

     }



     @keyframes fadeInDown {

         from {

             opacity: 0;

             transform: translateY(-20px);

         }



         to {

             opacity: 1;

             transform: translateY(0);

         }

     }



     .animate {

         opacity: 0;

     }



     .fade-in {

         animation: fadeIn 1s ease forwards;

     }



     .fade-in-up {

         animation: fadeInUp 1s ease forwards;

     }



     .fade-in-down {

         animation: fadeInDown 1s ease forwards;

     }



     .delay-1 {

         animation-delay: 0.2s;

     }



     .delay-2 {

         animation-delay: 0.4s;

     }



     .delay-3 {

         animation-delay: 0.6s;

     }



     /* Responsive Adjustments */

     @media (max-width: 992px) {

         .hero-title {

             font-size: 3rem;

         }



         .section-title {

             font-size: 2.5rem;

         }

     }



     @media (max-width: 768px) {

         .navbar {

             padding: 0.8rem 1rem;

         }



         .hero-title {

             font-size: 2.5rem;

         }



         .hero-subtitle {

             font-size: 1.2rem;

         }



         .nav-link {

             font-size: 1rem;

             margin: 0 0.5rem;

         }

     }



     @media (max-width: 576px) {

         .hero-title {

             font-size: 2rem;

         }



         .btn-primary {

             padding: 12px 30px;

         }



         .section-title {

             font-size: 2rem;

         }

     }



     /* Sağa ve sola kayma animasyonları */

     @keyframes slideInLeft {

         from {

             opacity: 0;

             transform: translateX(-100%);

         }



         to {

             opacity: 1;

             transform: translateX(0);

         }

     }



     @keyframes slideInRight {

         from {

             opacity: 0;

             transform: translateX(100%);

         }



         to {

             opacity: 1;

             transform: translateX(0);

         }

     }





     .slide-in-left {

         animation: slideInLeft 0.8s ease;

     }



     .slide-in-right {

         animation: slideInRight 0.8s ease;

     }



     /* Parlama efekti için shine sınıfı */

     .shine {

         position: relative;

         overflow: hidden;

     }



         .shine::before {

             content: '';

             position: absolute;

             top: -50%;

             left: -50%;

             width: 200%;

             height: 200%;

             background: linear-gradient( 120deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 80% );

             transform: rotate(25deg);

             pointer-events: none;

             animation: shineAnimation 1.5s ease-in-out forwards;

         }



     @keyframes shineAnimation {

         0% {

             transform: translate(-100%, -100%) rotate(25deg);

         }



         100% {

             transform: translate(100%, 100%) rotate(25deg);

         }

     }

 

 .top-bar {

  height: 34px;

  font-size: 14px;

  z-index: 1050;

}



.lang-btn {

  background-color: transparent;

  border: 1px solid rgba(255, 255, 255, 0.3);

  color: white;

  padding: 2px 10px;

  font-size: 12px;

  border-radius: 4px;

  margin-left: 10px;

  transition: all 0.3s ease;

}



.lang-btn:hover,

.lang-btn.active {

  background-color: #ff4d00;

  border-color: #ff4d00;

  color: white;

}





.about-image-slider {

    position: relative;

    border-radius: 0;

    overflow: hidden;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.carousel-control-prev,

.carousel-control-next {

    background-color: rgba(0, 0, 0, 0.5);

    width: 50px;

    height: 50px;

    top: 50%;

    transform: translateY(-50%);

    margin-top: -25px;

}



.carousel-control-prev-icon,

.carousel-control-next-icon {

    background-color: --bs-danger;

}



.value-card {

    background-color: #5e5252;

    border-left: 4px solid var(--accent-color);

    transition: transform 0.3s ease;

}



.value-card:hover {

    transform: translateX(10px);

}



.section-title {

    font-family: 'Bebas Neue', sans-serif;

    letter-spacing: 3px;

    color: var(--accent-color);

}



.section-subtitle {

    font-size: 1.2rem;

    color: var(--light-text);

}