:root {
      --primary-color: #0c7ff2;
      --secondary-color: rgb(202, 15, 72);
      --background-color: #f9f9f9;
      --text-primary: #111418;
      --text-secondary: #637488;
      --accent-color: #e0e7ff;
      --navbar-background: rgb(3, 55, 117);
    }

    body {
      font-family: 'Nunito', sans-serif;
      background-color: var(--background-color);
      color: var(--text-primary);
    }

    .button_primary {
      background-color: var(--primary-color);
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
    }

    .button_primary:hover {
      background-color: #0b69c5;
    }

    .button_secondary {
      background-color: var(--secondary-color);
      color: var(--text-primary);
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
    }

    .button_secondary:hover {
      background-color: #e2e6ea;
    }
    
    .input {
      background-color: white;
      border: 1px solid #d1d5db;
      border-radius: 0.375rem;
      padding: 0.5rem 0.75rem;
    }

    .typography_h1 {
      font-size: 2.25rem;
      line-height: 2.5rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 1rem;
    }

    .typography_h2 {
      font-size: 1.875rem;
      line-height: 2.25rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.75rem;
    }

    .typography_body {
      font-size: 1rem;
      line-height: 1.5rem;
      color: var(--text-secondary);
    }

    .navbar {
      background-color: var(--navbar-background);
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      padding: 1rem 0;
    }

    .navbar_logo {
      font-size: 1.5rem;
      line-height: 2rem;
      font-weight: 700;
      color: #ffffff;
      text-decoration: none;
    }

    .navbar_link {
      color: #d1d5db;
      text-decoration: none;
      transition: color 0.15s ease-in-out;
    }

    .navbar_link:hover {
      color: white;
    }

    .navbar_link.active {
      color: white;
      font-weight: 700;
      border-bottom: 3px solid var(--secondary-color);
    }

    .card {
      background-color: white;
      border-radius: 0.5rem;
      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }

    .footer {
      background-color: rgb(3, 55, 117);
      padding-top: 3rem;
      padding-bottom: 2rem;
      margin-top: 3rem;
    }

    .footer a {
      color: #f8fafc;
      text-decoration: none;
    }

    .footer a:hover {
      color: #d1d5db;
    }

    .top-bar {
      background-color: var(--secondary-color);
      padding: 0.5rem 0;
      font-size: 0.875rem;
      color: white;
    }

    .top-bar a {
      color: white;
      text-decoration: none;
    }

    .top-bar a:hover {
      color: #f0f2f4;
    }

    .navbar .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .footer .navbar_logo {
      color: #ffffff;
    }

    .navbar_icon {
      color: #ffffff;
    }
    
    .owl-carousel .item {
      position: relative;
      height: 600px;
    }

    #testimonials .owl-carousel .item {
      height: 250px;
    }

    .owl-carousel .item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .owl-carousel .item .carousel-caption {
      position: absolute;
      top: 53%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      padding: 0 15px;
      color: white;
    }

    .owl-theme .owl-dots .owl-dot.active span,
    .owl-theme .owl-dots .owl-dot:hover span {
      background: var(--primary-color);
    }

    .owl-theme .owl-nav {
      position: absolute;
      top: 47%;
      width: 100%;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-between;
      padding: 0 1rem;
    }

    .owl-theme .owl-nav [class*=owl-] {
      font-size: 2rem !important;
      color: white !important;
      background: rgba(0, 0, 0, 0.5) !important;
      border-radius: 50% !important;
      width: 40px;
      height: 40px;
      line-height: 40px !important;
      text-align: center;
    }

    body {
      padding-top: 108px;
    }

    .footer h5 {
      color: white;
    }

    .footer .typography_body,
    .footer p {
      color: #e2e8f0;
    }

    .footer i {
      color: #e2e8f0;
    }

    .service-card {
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .service-card .service-image {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .service-card .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(202, 15, 72, 0.7);
      color: white;
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1.5rem;
    }

    .service-card:hover .overlay {
      opacity: 1;
    }

    .service-card:hover .service-image {
      transform: scale(1.1);
    }

    .service-card-content {
      padding: 1.5rem;
    }

    .card-body {
      padding: 0;
    }

    .accordion-button:not(.collapsed) {
      color: white;
      background-color: var(--primary-color);
    }

    .accordion-button:focus {
      box-shadow: 0 0 0 0.25rem var(--accent-color);
    }

    .accordion-item {
      border: 1px solid #dee2e6;
      border-radius: 0.375rem;
      margin-bottom: 1rem;
    }

    .accordion-header {
      border-bottom: 0;
    }

    .accordion-button {
      border-radius: 0.375rem !important;
    }

    .gallery-item {
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.1);
    }

    .gallery-item .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .gallery-item:hover .overlay {
      opacity: 1;
    }

    .glightbox-clean .gslide-description {
      background: rgba(0, 0, 0, .75);
    }

    .team-member .card-img-top {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border: 4px solid var(--secondary-color);
      margin-top: -75px;
    }

    .team-member .card {
      border: none;
      overflow: visible;
    }

    .team-member .social-links a {
      color: var(--text-secondary);
      font-size: 1.25rem;
      transition: color 0.2s ease-in-out;
    }

    .team-member .social-links a:hover {
      color: var(--primary-color);
    }

    .testimonials-carousel .owl-dots {
      margin-top: 20px;
    }

    .testimonials-carousel .owl-nav {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      gap: 15px;
    }

    .testimonials-carousel .owl-nav button {
      background-color: var(--primary-color) !important;
      color: white !important;
      width: 40px;
      height: 40px;
      border-radius: 50% !important;
      font-size: 1.25rem !important;
      line-height: 1 !important;
    }

    .testimonials-carousel .owl-nav button:hover {
      background-color: #0b69c5 !important;
    }

    .scroll-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--primary-color);
      color: white;
      text-align: center;
      line-height: 50px;
      font-size: 24px;
      z-index: 1000;
      transition: opacity 0.3s, visibility 0.3s;
    }

    .scroll-to-top:hover {
      background-color: #0b69c5;
      color: white;
    }

    .top-bar {
      transition: transform 0.3s ease, height 0.3s ease, opacity 0.3s ease;
      will-change: transform, height, opacity;
    }

    .top-bar.hidden {
      transform: translateY(-100%);
      height: 0;
      opacity: 0;
      overflow: hidden;
      display: none;
    }

    section {
      scroll-margin-top: 120px;
    }

    /* GLightbox oklarını mobilde de göster */
    .glightbox-button {
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      z-index: 9999;
    }

    .glightbox-button svg {
      width: 20px;
      height: 20px;
      fill: white;
    }

    .gprev,
    .gnext {
      display: flex !important;
      /* Mobilde görünür yap */
      opacity: 1 !important;
    }

    .gprev {
      left: 150px !important;
    }

    .gnext {
      right: 150px !important;
    }