:root {
         --color-dark: #232323;
         --color-light: #f6f6f6;
         --color-green: #01CD8C;
     }



     * {
         font-family: "DM Sans", sans-serif;
         font-optical-sizing: auto;
         font-style: normal;
     }

     .rounded-4 {
         border-radius: 1.7rem !important
     }



     @media (min-width: 992px) {
         .custom-center-navbar {
             position: absolute;
             left: 50%;
             transform: translateX(-50%);
         }

         .navbar .container.position-relative {
             position: relative;
         }
     }


     .navbar-brand img {
         height: 40px;
     }

     /* Navbar öğelerini tam ortalama */
     .navbar-collapse {
         position: relative;
     }

     .navbar-nav {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
     }

     /* Randevu butonu için boşluk */
     .navbar-randevu {
         margin-left: auto;
     }

     /* Navbar linkleri için özel stiller */
     .navbar-nav .nav-link {
         border: 1px solid rgba(0, 0, 0, 0.1);
         /* Silik border */
         border-radius: 50rem !important;
         /* rounded-pill */
         padding: 0.4rem 1rem !important;
         margin: 0 0.2rem !important;
         transition: all 0.3s ease;
     }

     /* Hover efekti */
     .navbar-nav .nav-link:hover {
         border-color: rgba(0, 0, 0, 0.3);
         background-color: rgba(0, 0, 0, 0.03);
     }

     /* Active link efekti */
     .navbar-nav .nav-item .nav-link.active {
         border-color: rgba(0, 0, 0, 0.5);
         background-color: rgba(0, 0, 0, 0.05);
         font-weight: 500;
     }

     /* Randevu butonu stil */
     .navbar-randevu .btn {
         border-radius: 50rem !important;
         padding-left: 1.2rem;
         padding-right: 1.2rem;
     }

     /* Mobilde ortalamayı kaldırma */
     @media (max-width: 991.98px) {
         .navbar-nav {
             position: static;
             left: auto;
             transform: none;
             text-align: center;
         }

         .navbar-nav .nav-link {
             margin: 0.2rem auto !important;
             display: inline-block;
         }

         .navbar-randevu {
             margin: 10px auto 0;
             display: block;
             width: fit-content;
         }
     }

     .bg-custom-light {
         background-color: var(--color-light);
     }

     .btn-custom-dark {
         background-color: var(--color-dark);
     }

     .text-green {
         color: var(--color-green);
     }

     .display-8 {
         font-size: 8rem;
         font-weight: 400;
     }


     /* Mobile responsive adjustments */
     @media (max-width: 767.98px) {
         .display-8 {
             font-size: 4rem !important;
             /* Smaller font size for mobile */
             font-weight: 500;
         }
     }



     .icon-hover-move {
         transition: transform 0.3s ease;
     }

     .card-hover:hover .icon-hover-move {
         transform: translate(6px, -6px);
     }

     #bg-second {
         background-image: url('../img/photogallery/dis_tedavisi_dental_clinic_3.jpg');
         background-size: cover;
         background-position: center;
         flex: 1;
         /* Kalan alanı tamamen doldurur */
         min-height: 300px;
         /* Mobil için minimum yükseklik (opsiyonel) */
     }



     .hover-dark {
         transition: color 0.3s ease;
     }

     .hover-dark:hover {
         color: #212529 !important;
         /* Bootstrap'in dark rengi */
     }

     /* Diş Hekimi Kart Stilleri */
     .doctor-card {
         height: 300px;
         transition: all 0.4s ease;
         background-color: #f8f9fa;
     }

     .doctor-card:hover {
         height: 350px;
     }

     .grayscale {
         filter: grayscale(100%);
         transition: filter 0.4s ease;
         height: 100%;
         object-fit: cover;
     }

     .doctor-card:hover .grayscale {
         filter: grayscale(0%);
     }

     .doctor-info {
         position: absolute;
         bottom: -100px;
         left: 0;
         right: 0;
         background: rgba(255, 255, 255, 0.9);
         transition: all 0.4s ease;
     }

     .doctor-card:hover .doctor-info {
         bottom: 0;
     }

     .doctor-name {
         color: #212529;
         font-size: 1.25rem;
         margin-bottom: 0.5rem;
     }

     .doctor-specialty {
         color: #6c757d;
         font-size: 0.9rem;
     }

     .contact-item {
         padding: 1.5rem;
         margin-bottom: 1rem;
         border-left: 4px solid var(--color-green);
         background-color: #f8f9fa;
     }

     .contact-icon {
         font-size: 1.5rem;
         margin-right: 1rem;
         color: var(--color-green);
     }

     .color-inherit {
         color: inherit;
     }

     /* Temel Harita Stili */
     .map-responsive {
         position: relative;
         height: 100%;
     }

     .map-responsive::before {
         content: "";
         display: block;
         padding-top: 56.25%;
         /* 16:9 Aspect Ratio */
     }

     .map-responsive iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100% !important;
         height: 100% !important;
     }

     /* Mobil Uyumluluk */
     @media (max-width: 768px) {
         .map-responsive {
             margin-top: 1.5rem;
             min-height: 300px;
         }

         .map-responsive::before {
             padding-top: 75%;
             /* Mobilde daha dik aspect ratio */
         }
     }

     /* Koyu Tema Desteği */
     @media (prefers-color-scheme: dark) {
         .map-responsive iframe {
             filter: brightness(1.0) contrast(1.1) grayscale(30%);
         }
     }

     .marquee-container {
         background-color: var(--color-dark);
         color: var(--color-light);
         padding: 1.5rem 0;
         overflow: hidden;
         position: relative;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
     }

     .marquee {
         display: flex;
         white-space: nowrap;
         animation: scroll 25s linear infinite;
     }

     .marquee-item {
         display: flex;
         align-items: center;
         margin: 0 2rem;
         font-size: 1.2rem;
     }

     .marquee-icon {
         color: var(--color-green);
         font-size: 1.5rem;
         margin-right: 1rem;
     }

     .marquee:hover .marquee-item {
         animation-play-state: paused;
     }

     @keyframes scroll {
         0% {
             transform: translateX(0);
         }

         100% {
             transform: translateX(-50%);
         }
     }

     /* Responsive ayarlar */
     @media (max-width: 768px) {
         .marquee-item {
             font-size: 1rem;
             margin: 0 1rem;
         }

         .marquee-icon {
             font-size: 1.2rem;
         }
     }

     .text-shadow-light {
         text-shadow: 1px 1px 2px white;
     }

     .hero-photo {
         border-radius: 1.25rem;
         object-fit: cover;
         width: 100%;
         height: clamp(280px, 42vw, 480px);
     }

     .glass {
         background: rgba(255, 255, 255, .65);
         backdrop-filter: blur(6px);
         -webkit-backdrop-filter: blur(6px);
         border-radius: 1rem;
         border: 1px solid rgba(0, 0, 0, .1);
     }

     .dentist-card {
         transition: transform 0.3s, box-shadow 0.3s;
         margin-bottom: 2rem;
         overflow: hidden;
         border-radius: 10px;
         border: none;
     }

     .dentist-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
     }

     .dentist-img {
         object-fit: contain;
         transition: transform 0.5s;
     }

     .dentist-card:hover .dentist-img {
         transform: scale(1.05);
     }

     .card-title {
         font-weight: 700;
         border-bottom: 2px solid var(--color-green);
         padding-bottom: 10px;
         margin-bottom: 15px;
     }

     .card-text {
         color: #555;
         line-height: 1.6;
     }

     .text-end .card-title {
         border-bottom: 2px solid var(--color-green);
         padding-bottom: 10px;
         margin-bottom: 15px;
         display: inline-block;
     }

     .clinic-info {
         background-color: white;
         border-radius: 10px;
         padding: 2rem;
         margin-top: 2rem;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     }

     /* Masaüstü görünüm için sabit yükseklik */
     @media (min-width: 768px) {
         .dentist-card {
             height: 400px;
         }

         .dentist-img-container {
             height: 100%;
         }

         .dentist-img {
             height: 100%;
         }
     }

     /* Mobil görünüm için esnek yükseklik */
     @media (max-width: 767.98px) {
         .dentist-card {
             height: auto !important;
         }

         .dentist-img-container {
             height: 300px;
         }

         .dentist-img {
             height: 100%;
             width: 100%;
         }

         .header h1 {
             font-size: 2rem;
         }

         .text-end {
             text-align: left !important;
         }
     }

     .article-header {
         background-color: #fff;
         padding: 4rem 0 2rem;
     }

     .article-title {
         font-weight: 700;
         color: #1a1a1a;
         margin-bottom: 1rem;
     }

     .article-meta {
         color: #6c757d;
         font-size: 0.9rem;
         margin-bottom: 1.5rem;
     }

     .article-content {
         font-size: 1.1rem;
         color: #444;
     }

     .article-content h2,
     .article-content h3,
     .article-content h4 {
         margin-top: 2.5rem;
         margin-bottom: 1rem;
         font-weight: 600;
     }

     .article-content p {
         margin-bottom: 1.5rem;
     }

     .article-content blockquote {
         border-left: 4px solid #20c997;
         padding-left: 1.5rem;
         margin-left: 0;
         font-style: italic;
         color: #555;
     }

     .article-img {
         border-radius: 8px;
         margin: 2rem 0;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }

     .author-card {
         background-color: #f8f9fa;
         border-radius: 10px;
         padding: 2rem;
         margin: 3rem 0;
     }

     .back-to-blog {
         color: #20c997;
         text-decoration: none;
         font-weight: 500;
         display: inline-flex;
         align-items: center;
     }

     .back-to-blog:hover {
         color: #159b7d;
     }

     /* Mobilde container padding'ini kaldır */
     @media (max-width: 767.98px) {
         .row-p-0 {
             padding-left: 0 !important;
             padding-right: 0 !important;
         }
     }



     /*Lang Switcher*/
     /* wrapper */
     .lang-toggle-wrapper {
         display: inline-flex;
         align-items: center;
         margin-left: 1rem;
     }

     /* görünmeyen checkbox */
     .lang-switch input {
         display: none;
     }

     /* slider pill */
     .lang-slider {
         width: 66px;
         height: 32px;
         background: #e9f1fb;
         /* site mavi tonuna uy */
         border-radius: 20px;
         position: relative;
         display: flex;
         align-items: center;
         padding: 0 6px;
         box-sizing: border-box;
         cursor: pointer;
         font-weight: 700;
         font-size: 12px;
         color: #0b5fa5;
     }

     /* top */
     .lang-slider::before {
         content: "";
         position: absolute;
         left: 4px;
         top: 4px;
         width: 24px;
         height: 24px;
         background: #fff;
         border-radius: 50%;
         box-shadow: 0 2px 6px rgba(10, 10, 10, 0.12);
         transition: transform .25s cubic-bezier(.2, .9, .3, 1);
     }

     /* pozisyon: checked -> sağa kaydır */
     .lang-switch input:checked + .lang-slider::before {
         transform: translateX(34px);
     }

     /* metin renkleri (aktif/pasif) */
     .lang-left {
         margin-right: 5px;
         margin-left: 4px;
     }

     .lang-right {
         margin-left: 9px;
     }

     /* optional: mobilde biraz daha küçük */
     @media (max-width: 576px) {

         /*  .lang-slider { width: 56px; height: 28px; font-size: 11px; }
  .lang-slider::before { width: 20px; height: 20px; left: 4px; top: 4px; }
  .lang-switch input:checked + .lang-slider::before { transform: translateX(30px); }*/
         .lang-toggle-wrapper {
             display: flex;
             justify-content: center;
             margin-left: 0;
             margin-top: 10px;
         }
     }

     .lang-toggle select {
         appearance: none;
         background: #f5f5f7;
         border-radius: 12px;
         padding: 6px 12px;
         border: 1px solid #d2d2d7;
         font-size: 14px;
         font-weight: 500;
         cursor: pointer;
         transition: 0.2s;
     }

     .lang-toggle select:hover {
         background: #e9e9ec;
     }