/* ==========================================================================
   Vetportal Veteriner Kliniği — global.css
   Tüm yeni / override stiller (vanilla CSS). Tailwind kullanılmaz.
   Template CSS'i @layer içinde olduğundan buradaki katmansız kurallar önceliklidir.
   ========================================================================== */

/* 1. Marka paleti
   -------------------------------------------------------------------------- */
   :root,
   :host {
     --vp-green-50: #f3f8ee;
     --vp-green-100: #e3f1d4;
     --vp-green-200: #c6e3a9;
     --vp-green-300: #9fcb74;
     --vp-green-400: #7fb64c;
     --vp-green-500: #64a132;
     --vp-green-600: #52862a;
     --vp-green-700: #3d6b1f;
     --vp-green-800: #2f5418;
     --vp-green-900: #24401a;
     --vp-green-950: #172a0e;
     --vp-blue: #408ade;
     --vp-ink: #1c2a14;
   
     --color-primary: var(--vp-green-500);
     --color-secondary: var(--vp-green-700);
     --color-first: var(--vp-ink);
   }
   
   /* İkon fontu yüklenene kadar ikonlar bozuk karakter yerine boş görünür
      (template'teki tanım font-display: swap; aynı aile sonra tanımlandığı için bu geçerli olur) */
   @font-face {
     font-family: icon;
     src: url(../fonts/icon-CYwbbwts.woff) format("woff"), url(../fonts/icon-Ym6ESXxa.ttf) format("truetype");
     font-weight: 400;
     font-style: normal;
     font-display: block;
   }
   
   /* Alpine hazır olana kadar x-cloak taşıyan popup ve pencereler görünmez */
   [x-cloak] {
     display: none !important;
   }

   /* Yatay taşmayı kes — sticky'yi bozmayan clip (hidden scroll container oluşturur) */
    html {
      overflow-x: clip;
    }
   
   /* Satır kırılırken birlikte kalması gereken kelimeler */
   .vp-nowrap {
     white-space: nowrap;
   }
   
   /* 2. Template'in sabit turkuaz / petrol tonları → Vetportal yeşil tonları
      -------------------------------------------------------------------------- */
   .field-textarea { border: 1px solid #3d6b1f33 }
   .phone-field { border: 1px solid #3d6b1f33 }
   /* Telefon alanı — sabit +90 öneki (öneki ve gizli phone alanını global.js 8. bölüm kuruyor) */
   .vp-phone { position: relative; width: 100% }
   .vp-phone-prefix { position: absolute; top: 50%; left: 19px; z-index: 1; transform: translateY(-50%); color: #000; font-size: 16px; line-height: 24px; pointer-events: none }
   .vp-phone .phone-field { padding-left: 53px }
   .transparent-phone .vp-phone-prefix { color: #fff }
   .prose table thead tr { color: #000; background-color: #f3f8ee }
   .prose table thead th { color: #000 }
   .prose table tbody tr { color: #000 }
   .border-primary\/10 { border-color: #64a1321a }
   .border-secondary\/20 { border-color: #3d6b1f33 }
   .bg-\[\#024A62\] { background-color: #2f5418 }
   .bg-\[\#113E68\] { background-color: #24401a }
   .bg-\[\#00183D\] { background-color: #172a0e }
   .bg-\[\#EEFAFB\] { background-color: var(--vp-green-50) }
   .bg-\[\#EFFBFC\] { background-color: var(--vp-green-50) }
   .bg-\[\#E3EBEE\] { background-color: #e8efe2 }
   .bg-secondary\/10 { background-color: #3d6b1f1a }
   .text-primary\/70 { color: #64a132b3 }
   .text-secondary\/60 { color: #3d6b1f99 }
   .\[box-shadow\:0_10px_45px_rgba\(30\,202\,211\,0\.08\)\] { box-shadow: 0 10px 45px #64a13214 }
   .\[background\:linear-gradient\(0deg\,\#1ECAD3_0\%\,\#1ECAD3_100\%\)\,linear-gradient\(0deg\,\#005F7F_0\%\,\#005F7F_100\%\)\,\#E6EFF2\] { background: linear-gradient(#64a132 0% 100%), linear-gradient(#3d6b1f 0% 100%), #ebf3e3 }
   .\[background\:linear-gradient\(90deg\,\#005F7F_0\.01\%\,\#077FC3_70\.98\%\,\#1ECAD3_134\.21\%\)\,linear-gradient\(0deg\,\#005F7F_0\%\,\#005F7F_100\%\)\,\#E6EFF2\] { background: linear-gradient(90deg, #3d6b1f .01%, #4f8a28 70.98%, #64a132 134.21%), linear-gradient(#3d6b1f 0% 100%), #ebf3e3 }
   .\[background\:linear-gradient\(90deg\,\#005F7F_0\.01\%\,\#077FC3_70\.98\%\,\#1ECAD3_134\.21\%\)\] { background: linear-gradient(90deg, #3d6b1f .01%, #4f8a28 70.98%, #64a132 134.21%) }
   .\[background\:linear-gradient\(180deg\,rgba\(0\,95\,127\,0\)_28\%\,rgba\(0\,95\,127\,0\.5\)_64\%\,rgba\(0\,95\,127\,0\.92\)_100\%\)\] { background: linear-gradient(#3d6b1f00 28%, #3d6b1f80, #3d6b1feb) }
   .\[background\:radial-gradient\(152\.16\%_109\.69\%_at_96\.06\%_103\.29\%\,rgba\(30\,202\,211\,0\.15\)_0\%\,\#113E68_100\%\)\] { background: radial-gradient(152.16% 109.69% at 96.06% 103.29%, #64a13226, #24401a) }
   @media(hover:hover) {
     .group-hover\/t\:\[background\:linear-gradient\(180deg\,rgba\(30\,125\,177\,0\.25\)_0\%\,rgba\(0\,95\,127\,0\.65\)_55\%\,rgba\(0\,95\,127\,0\.95\)_100\%\)\]:is(:where(.group\/t):hover *) { background: linear-gradient(#1e7db140, #3d6b1fa6 55%, #3d6b1ff2) }
   }
   .before\:\[background\:linear-gradient\(180deg\,\#FFF_0\%\,rgba\(255\,255\,255\,0\.00\)_100\%\)\,linear-gradient\(253deg\,\#E6E1FA_3\.94\%\,\#FEEBD7_27\.62\%\,\#A4D5D9_98\.67\%\)\,linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.00\)_0\%\,rgba\(255\,255\,255\,0\.51\)_28\.2\%\,rgba\(255\,255\,255\,0\.73\)_40\.87\%\,rgba\(255\,255\,255\,0\.83\)_54\.31\%\,\#F1FAFE_100\%\)\]:before { background: linear-gradient(#fff, #fff0), linear-gradient(253deg, #e6e1fa 3.94%, #feebd7 27.62%, #c3dfa6 98.67%), linear-gradient(#fff0, #ffffff82 28.2%, #ffffffba 40.87%, #ffffffd4 54.31%, #f5faf0) }
   .before\:\[background\:linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.00\)_0\.13\%\,\#077FC3_113\.99\%\)\]:before { background: linear-gradient(#fff0 .13%, #4f8a28 113.99%) }
   .before\:\[background\:linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.00\)_1\.13\%\,\#077FC3_113\.99\%\)\]:before { background: linear-gradient(#fff0 1.13%, #4f8a28 113.99%) }
   .before\:\[background\:linear-gradient\(180deg_\#FFF_0\%\,rgba\(255\,255\,255\,0\.00\)_100\%\)\,linear-gradient\(253deg\,\#E6E1FA_3\.94\%\,\#FEEBD7_27\.62\%\,\#A4D5D9_98\.67\%\)\,linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.00\)_0\%\,rgba\(255\,255\,255\,0\.51\)_28\.2\%\,rgba\(255\,255\,255\,0\.73\)_40\.87\%\,rgba\(255\,255\,255\,0\.83\)_54\.31\%\,\#F1FAFE_100\%\)\]:before { background: linear-gradient(180deg #fff 0%, #fff0), linear-gradient(253deg, #e6e1fa 3.94%, #feebd7 27.62%, #c3dfa6 98.67%), linear-gradient(180deg, #fff0, #ffffff82 28.2%, #ffffffba 40.87%, #ffffffd4 54.31%, #f5faf0) }
   .before\:\[background\:linear-gradient\(272deg\,rgba\(0\,95\,127\,0\.00\)_-30\.4\%\,\#005F7F_58\.63\%\)\]:before { background: linear-gradient(272deg, #3d6b1f00 -30.4%, #3d6b1f 58.63%) }
   .\[\&_strong\]\:via-\[\#077FC3\] strong { --tw-gradient-via: #4f8a28 }
   
   @layer components {
     .white-field { border: 1px solid #3d6b1f33 !important }
   }
   
   /* 3. Header
      -------------------------------------------------------------------------- */

      /*
  Mobil menü (body-lock → body.overflow-hidden) sticky header'ı bozar:
  kaydırılmış sayfada menü açılınca header belgedeki konumuna (ekran dışına)
  gider, menü de onunla birlikte kaybolur. Menü açıkken header'ı fixed tutuyoruz;
  tablette scroll-down translate'ini de sıfırlıyoruz ki hamburger + menü görünsün.
    */
    @media (max-width: 1023.98px) {
      body.overflow-hidden .field-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        translate: none;
      }
    }

   @media (min-width: 1280px) {
     .vp-services-menu {
       grid-template-columns: minmax(0, 1fr);
     }
   
     .vp-services-menu .item {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
   
   /* Başlık solda, "Tümünü Gör" sağda; buton kart ızgarasının sağ kenarıyla hizalı */
   .vp-services-menu-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     padding-right: clamp(10px, calc(10px + 10 * (100vw - 375px) / 1545), 20px);
   }
   
   /* Başlık büyütülür, buton kompaktlaştırılır; ikisi aynı görsel ağırlıkta durur */
   .vp-services-menu-head > div:first-child {
     font-size: 24px;
     line-height: 1.2;
   }
   
   .vp-services-menu-head > a {
     flex-shrink: 0;
     height: 46px;
     min-width: 150px;
     max-width: 160px;
     padding-left: 18px;
     padding-right: 8px;
   }
   
   .vp-services-menu-head > a > div {
     right: 4px;
     width: 34px;
     height: 34px;
   }
   
   .vp-services-menu-head > a > span {
     font-size: 14px;
   }
   
   .vp-services-menu-head > a > i {
     padding-top: 0;
     padding-bottom: 0;
     font-size: 18px;
   }
   
   @media (hover: hover) {
     .vp-services-menu-head > a:hover > div {
       right: 0;
       width: 100%;
       height: 100%;
     }
   }
   
   /* Hizmet kartları — hover'da kenarda dönen yeşil ışık.
      Halka, kartın kendisinin üstüne maske ile sadece kenar kalınlığı kadar çizilir;
      açıyı animasyonla döndürebilmek için --vp-border-angle @property ile tanımlı olmalı. */
   @property --vp-border-angle {
     syntax: '<angle>';
     inherits: false;
     initial-value: 0deg;
   }
   
   @keyframes vp-border-spin {
     to { --vp-border-angle: 360deg; }
   }
   
   .vp-services-menu .item > a {
     position: relative;
     isolation: isolate;
     transition: box-shadow 0.5s ease;
   }
   
   .vp-services-menu .item > a::after {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 2;
     padding: 2px;
     border-radius: inherit;
     background:
       conic-gradient(
         from var(--vp-border-angle),
         transparent 0deg 40deg,
         var(--vp-green-300) 90deg,
         var(--vp-green-500) 130deg,
         transparent 180deg 220deg,
         var(--vp-green-300) 270deg,
         var(--vp-green-500) 310deg,
         transparent 360deg
       ),
       linear-gradient(rgb(100 161 50 / 0.14), rgb(100 161 50 / 0.14));
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.5s ease;
     animation: vp-border-spin 4s linear infinite paused;
   }
   
   .vp-services-menu .item > a:focus-visible {
     outline: none;
   }
   
   .vp-services-menu .item > a:focus-visible::after {
     opacity: 1;
     animation-play-state: running;
   }
   
   @media (hover: hover) {
     .vp-services-menu .item > a:hover {
       box-shadow: 0 14px 30px -20px rgb(79 138 40 / 0.18);
     }
   
     .vp-services-menu .item > a:hover > div::before {
       opacity: 0.09;
     }
   
     .vp-services-menu .item > a:hover::after {
       opacity: 1;
       animation-play-state: running;
     }
   }
   
   @media (prefers-reduced-motion: reduce) {
     .vp-services-menu .item > a,
     .vp-services-menu .item > a::after {
       transition-duration: 0.01ms;
       animation: none;
     }
   }
   
   /* Kurumsal kompakt dropdown */
   .vp-dropdown {
     display: none;
   }
   
   @media (min-width: 1280px) {
     .vp-dropdown-item {
       position: relative;
     }
   
     .vp-dropdown {
       display: block;
       position: absolute;
       top: 100%;
       left: 0;
       z-index: 40;
       min-width: 270px;
       padding: 14px;
       border-radius: 0 0 22px 22px;
       background-color: #fff;
       box-shadow: 0 24px 50px rgba(28, 42, 20, 0.12);
       opacity: 0;
       pointer-events: none;
       transform: translateY(10px);
       transition: opacity 0.35s ease, transform 0.35s ease;
     }
   
     .vp-dropdown.toggle {
       opacity: 1;
       pointer-events: auto;
       transform: translateY(0);
     }
   }
   
   .vp-dropdown__list {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   
   .vp-dropdown__link {
     display: block;
     padding: 11px 22px;
     border-radius: 999px;
     color: var(--vp-ink);
     font-size: 16px;
     font-weight: 500;
     line-height: 1.3;
     white-space: nowrap;
     transition: background-color 0.3s, color 0.3s;
   }
   
   .vp-dropdown__link:hover,
   .vp-dropdown__link:focus-visible {
     background-color: var(--vp-green-500);
     color: #fff;
   }
   
   /* Hizmetlerimiz mega menü scroll çubuğu */
   .vp-services-menu::-webkit-scrollbar {
     width: 16px;
   }
   
   .vp-services-menu::-webkit-scrollbar-button {
     display: none;
     width: 0;
     height: 0;
   }
   
   .vp-services-menu::-webkit-scrollbar-track {
     margin-block: 30px;
     border: 5px solid transparent;
     border-radius: 999px;
     background-color: var(--vp-green-50);
     background-clip: padding-box;
   }
   
   .vp-services-menu::-webkit-scrollbar-thumb {
     border: 5px solid transparent;
     border-radius: 999px;
     background-color: var(--vp-green-300);
     background-clip: padding-box;
     transition: background-color 0.3s;
   }
   
   .vp-services-menu::-webkit-scrollbar-thumb:hover {
     background-color: var(--vp-green-500);
   }
   
   @supports not selector(::-webkit-scrollbar) {
     .vp-services-menu {
       scrollbar-width: thin;
       scrollbar-color: var(--vp-green-300) var(--vp-green-50);
     }
   }
   
   /* Mobil menü — alt menüler ana menü metnine göre girintili */
   [data-click-group="mobile-accordion-mobile-root"] > div > ul {
     margin-left: 30px;
     padding-left: 0;
   }
   
   [data-click-group="mobile-accordion-mobile-root"] > div > ul > li > a {
     padding-left: 20px;
   }
   
   /* Mobil dil seçici — tek dil seçeneği tam genişlikte ve ortalı */
   .flag .flagItem {
     grid-template-columns: minmax(0, 1fr);
   }
   
   /* 4. Sağ alttaki sabit butonlar
      -------------------------------------------------------------------------- */
   .vp-float-contact { bottom: 40px }
   .vp-float-whatsapp { bottom: 120px }
   
   .vp-float-contact-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 30px;
   }
   
   @media (max-width: 1279.98px) {
     .vp-float-contact { bottom: 80px }
     .vp-float-whatsapp { bottom: 140px }
     .vp-float-contact-icon { font-size: 24px }
   }
   
   /* Sayfa başına dön — global.js ekler. WhatsApp butonunun üstünde, onunla aynı dikey eksende;
      1024px altında yüzen butonlar gizli olduğundan alttaki 50px'lik iletişim çubuğunun üstünde durur.
      Halka sayfanın ne kadarının okunduğunu gösterir (--vp-to-top-progress: 0–1). */
   .vp-to-top {
     --vp-to-top-size: 52px;
     position: fixed;
     right: calc(20px + (74px - var(--vp-to-top-size)) / 2);
     bottom: 210px;
     z-index: 90;
     display: flex;
     align-items: center;
     justify-content: center;
     width: var(--vp-to-top-size);
     height: var(--vp-to-top-size);
     padding: 0;
     border: 0;
     border-radius: 50%;
     background-color: #fff;
     color: var(--vp-green-600);
     box-shadow: 0 8px 24px rgb(23 42 14 / 0.14);
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transform: translateY(16px) scale(0.9);
     transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s, background-color 0.3s ease, color 0.3s ease;
   }
   
   .vp-to-top.is-visible {
     opacity: 1;
     visibility: visible;
     transform: none;
     transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s, background-color 0.3s ease, color 0.3s ease;
   }
   
   .vp-to-top-ring {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     transform: rotate(-90deg);
     pointer-events: none;
   }
   
   .vp-to-top-ring circle {
     fill: none;
     stroke-width: 2.5;
   }
   
   .vp-to-top-track {
     stroke: var(--vp-green-50);
   }
   
   .vp-to-top-bar {
     stroke: var(--vp-green-500);
     stroke-linecap: round;
     stroke-dasharray: 100;
     stroke-dashoffset: calc(100 - 100 * var(--vp-to-top-progress, 0));
     transition: stroke 0.3s ease;
   }
   
   .vp-to-top-arrow {
     position: relative;
     width: 20px;
     height: 20px;
     transition: transform 0.3s ease;
   }
   
   .vp-to-top:focus-visible {
     outline: 2px solid var(--vp-green-500);
     outline-offset: 3px;
   }
   
   @media (hover: hover) {
     .vp-to-top:hover {
       background-color: var(--vp-green-500);
       color: #fff;
     }
   
     .vp-to-top:hover .vp-to-top-track { stroke: rgb(255 255 255 / 0.25); }
     .vp-to-top:hover .vp-to-top-bar { stroke: #fff; }
     .vp-to-top:hover .vp-to-top-arrow { transform: translateY(-2px); }
   }
   
   @media (max-width: 1279.98px) {
     .vp-to-top {
       --vp-to-top-size: 44px;
       right: calc(10px + (55px - var(--vp-to-top-size)) / 2);
       bottom: 205px;
     }
   
     .vp-to-top-arrow { width: 18px; height: 18px; }
   }
   
   @media (max-width: 1023.98px) {
     .vp-to-top {
       right: 15px;
       bottom: calc(50px + 15px + env(safe-area-inset-bottom, 0px));
     }
   }
   
   @media (prefers-reduced-motion: reduce) {
     .vp-to-top,
     .vp-to-top.is-visible,
     .vp-to-top-bar,
     .vp-to-top-arrow {
       transition-duration: 0.01ms;
     }
   
     .vp-to-top { transform: none; }
   }
   
   @media print {
     .vp-to-top { display: none; }
   }
   
   /* 5. Modallar
      -------------------------------------------------------------------------- */
   .vp-modal-close {
     position: sticky;
     top: clamp(15px, calc(15px + 15 * (100vw - 1024px) / 876), 30px);
     z-index: 20;
     pointer-events: none;
   }
   
   .vp-modal-close > * {
     pointer-events: auto;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
   }

      /* Randevu / iletişim modal kapatma katmanı: left:-100vw + width:200vw,
      dikey scrollbar varken (100vw > %100) sağa ~15px taşıp yatay scroll üretiyor.
      Ebeveyn zaten fixed + tam ekran; katmanı ebeveyn sınırına çekiyoruz. */
    .meeting,
    .form {
      overflow: hidden;
    }

    .meeting > div[class*="200vw"],
    .form > div[class*="200vw"] {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    /* Menü karartma: w-screen (=100vw) scrollbar genişliği kadar taşar → %100 */
    .fixed.left-0.top-0.w-screen {
      width: 100%;
      height: 100%;
    }
   
   /* 6. Marka ikonu — template'in diş ikonu (icon-dental) yerine Vetportal ikonu
      Kaynak: assets/images/vetportal-img/icons/vetportal-icon.svg (data URI, file:// altında da çalışır)
      -------------------------------------------------------------------------- */
   .icon-dental::before {
     content: "";
     display: inline-block;
     width: 1.3em;
     height: 1em;
     vertical-align: middle;
     background-color: currentColor;
     -webkit-mask: var(--vp-brand-icon) center / contain no-repeat;
     mask: var(--vp-brand-icon) center / contain no-repeat;
   }
   
   :root {
     --vp-brand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14.8' fill='%23000'%3E%3Cpath d='M18.22,5.42c-.18.04-.3.21-.26.4.04.17.2.29.37.27.02,0,.06.03.07.05.04.15.17.25.32.25.02,0,.04,0,.07,0,.18-.04.3-.21.26-.4-.07-.35-.49-.64-.83-.57Z'/%3E%3Cpath d='M10.52,6.01c.18,0,.34-.15.34-.33,0-.19-.15-.34-.33-.34-.28,0-.61-.3-.62-.42,0-.19-.15-.34-.33-.34h0c-.19,0-.34.15-.34.33,0,.56.73,1.09,1.29,1.09t0,0Z'/%3E%3Cpath d='M21.15,10.79c-1.07-.34-2.02.23-3.03.84-.45.27-.91.55-1.43.79-1.1.5-2.35.74-3.72.72.47-.42.79-.78.79-1.27,0-.57-.42-1.02-.95-1.02-.3,0-.53.14-.7.34-.17-.2-.41-.34-.7-.34-.53,0-.95.45-.95,1.02s.45.98,1.08,1.52c-1.66.94-3.67,1.01-5.33.16-2.29-1.17-2.85-3.51-2.94-3.96,0-.01,0-.02-.01-.03,1.14-.24,1.85-1.21,2.1-1.55,1.23-1.68,1.25-3.55,1.27-4.91.01-1.12.04-1.82.48-2.04.6-.31,1.75.23,2.42.91.58.59.73,1.28.87,1.94.15.7.31,1.42,1.04,1.74.25.11.5.14.84.18.34.04.82.1,1.53.28.12.03.34.08.44.25.03.06.05.13.06.2-.07-.04-.14-.09-.23-.12-.19-.07-.39-.08-.57-.04-.33.08-.53.3-.61.42-.09.13-.07.29.03.4.02.04.06.07.1.1.21.14.45.22.68.24-.23.57-.69,1.38-1.59,1.88-1.41.78-3.29.49-4.66-.75-.14-.12-.35-.11-.47.03-.12.14-.11.35.03.47.99.89,2.22,1.35,3.4,1.35.71,0,1.41-.17,2.04-.52,1.29-.72,1.82-1.95,2.02-2.58.16-.08.29-.19.38-.34.19-.31.19-.76-.02-1.1-.24-.4-.67-.51-.86-.55-.75-.18-1.25-.25-1.61-.29-.31-.04-.49-.06-.65-.13-.4-.17-.5-.57-.65-1.27-.15-.69-.33-1.54-1.04-2.27-.73-.74-2.2-1.56-3.21-1.04-.82.42-.83,1.45-.85,2.63-.02,1.34-.03,3.02-1.14,4.53-.22.31-.91,1.24-1.91,1.32-.7.06-1.46-.27-1.85-.79-.35-.47-.47-1.16-.33-2.01.26-1.65,1.39-3.42,2.8-4.42.76-.54,1.65-.89,2.64-1.03.18-.03.31-.2.28-.38-.03-.18-.2-.31-.38-.28-1.09.16-2.08.55-2.93,1.15C1.59,2.24.35,4.2.06,6.01c-.16,1.03,0,1.9.46,2.52.47.62,1.28,1.02,2.1,1.06,0,.04,0,.07,0,.11.1.51.72,3.12,3.29,4.43.88.45,1.83.67,2.8.67,1.21,0,2.43-.35,3.49-1.03,1.77.14,3.38-.11,4.77-.74.55-.25,1.06-.55,1.5-.82.95-.57,1.7-1.02,2.48-.77.35.11.62.32.76.58.4.72-.28,1.7-.28,1.71-.11.15-.07.36.08.47.15.11.36.07.47-.08.04-.05.91-1.33.32-2.42-.22-.42-.63-.73-1.15-.9ZM11.13,11.86c0-.2.12-.34.28-.34.15,0,.26.19.29.3.05.19.21.31.41.31h0c.19,0,.36-.12.41-.31.02-.08.12-.3.29-.3s.28.14.28.34c0,.29-.35.59-.88,1.04-.03.03-.06.06-.1.08-.03-.03-.07-.06-.1-.08-.53-.45-.88-.75-.88-1.04Z'/%3E%3Cpath d='M23.86,5.02c-.49-2.09-2.2-3.53-2.97-3.81-.08-.03-.31-.11-.5.03-.25.19-.2.51-.01,1.49,0,.04.02.13-.02.2-.03.04-.1.07-.16.08-.25-.06-.51-.09-.76-.08-1.54.07-2.48,1.58-2.65,1.88-.01.02-.02.04-.03.06l-.11.33c-.06.17-.2.3-.38.33l-.17.03c-.59.12-.99.66-.93,1.26l.05.53c.1,1.03.96,1.8,1.99,1.8h.19s.57-.04.89.36c.18.23.2.5.2.64,0,.19.14.34.32.35h.01c.18,0,.33-.14.34-.32,0-.23-.03-.67-.34-1.07-.53-.67-1.38-.62-1.44-.62h-.16c-.69,0-1.26-.52-1.33-1.2l-.05-.53c-.03-.26.15-.49.4-.54l.17-.03c.41-.08.75-.38.88-.78l.1-.3c.18-.3.93-1.46,2.08-1.51.2,0,.4.01.61.07.04.01.07.02.11.01.14,0,.49-.06.71-.36.02-.02.04-.05.06-.09.15-.27.1-.54.08-.63,0-.01,0-.03,0-.04.04.08.08.17.11.26.08.23.11.47.1.72,0,.19.13.34.32.35h.02c.18,0,.33-.14.34-.32.01-.3-.02-.6-.11-.88.56.58,1.16,1.43,1.41,2.48.29,1.24,0,2.35-.29,3.07-.07.17.01.37.18.44.17.07.37-.01.44-.18.33-.8.65-2.05.32-3.47Z'/%3E%3C/svg%3E");
   }
   
   /* İç sayfa banner'ı — soldan gelen lacivert gradient yerine Vetportal mavisi */
   .before\:\[background\:linear-gradient\(271deg\,rgba\(14\,17\,51\,0\.00\)_39\.58\%\,rgba\(0\,0\,31\,0\.80\)_93\.77\%\)\]::before {
     background: linear-gradient(271deg, rgb(64 138 222 / 0) 39.58%, rgb(64 138 222 / 0.8) 93.77%);
   }
   
   /* İç sayfa banner'ı — görselin üstündeki siyah katman (template: masaüstü %40, mobil %65) */
   .fx-image-scale-onload.after\:bg-black\/40::after {
     background-color: rgb(0 0 0 / 0.25);
   }
   
   @media (max-width: 1023.98px) {
     .fx-image-scale-onload.after\:bg-black\/40::after {
       background-color: rgb(0 0 0 / 0.45);
     }
   }
   
   /* Breadcrumb — diş ikonlu ayraç SVG'leri yerine nokta (tüm iç sayfalar) */
   .wrapper-location > svg {
     flex-shrink: 0;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: var(--vp-green-500);
   }
   
   .wrapper-location > svg > * {
     display: none;
   }
   
   /* 7. Anasayfa
      -------------------------------------------------------------------------- */


      /* "Neden biz" arka plan kutusu: right:-35px + width:100% kapsayıcıyı 35px aşıyordu */
    .strategy-steps-section .gradient-box {
      right: 0;
    }

   /* Hero slider: masaüstü / mobil görsel <picture> ile seçiliyor; böylece cihaz yalnızca kendi görselini indirir.
      picture kutusu yok sayılır, img eskisi gibi .image kapsayıcısını doldurur. */
   .swiperHeroImage .swiper-slide picture {
     display: contents;
   }
   
   /* Hero ilk slide'ı: template slide'ı Swiper aktif sınıfını verene kadar gizliyor (opacity-0 + 0.4s gecikme).
      Swiper kurulana kadar ilk görsel ve metin doğrudan görünür; kurulumda aynı karede aktif sınıfı
      geldiği için görünüm değişmez, sonraki geçişler template'deki gibi çalışır. */
   .swiperHeroImage:not(.swiper-initialized) .swiper-slide:first-child .image,
   .swiperHeroText:not(.swiper-initialized) .swiper-slide:first-child > div {
     opacity: 1;
     translate: none;
     pointer-events: auto;
     transition: none;
   }
   
   /* Hero okları (mobil/tablet) — fotoğrafın üstünde de seçilebilsin diye beyaz zemin, bulanıklık ve gölge */
   @media (max-width: 1023.98px) {
     :is(.swiperHeroImage-prev, .swiperHeroImage-next) svg {
       border-color: rgba(255, 255, 255, 0.6);
       background-color: rgba(255, 255, 255, 0.85);
       box-shadow: 0 8px 24px rgba(23, 42, 14, 0.18);
       -webkit-backdrop-filter: blur(8px);
       backdrop-filter: blur(8px);
     }
   
     :is(.swiperHeroImage-prev, .swiperHeroImage-next) .outer {
       stroke: var(--vp-green-600);
     }
   
     :is(.swiperHeroImage-prev, .swiperHeroImage-next) .icon {
       color: var(--vp-green-700);
     }
   }
   
   /* Hero metni mobilde dikeyde ortalanmaz, header'a yakın başlar; slaytlardaki boş üst blok gizlenir */
   @media (max-width: 1023.98px) {
     .hero-section .wrapper {
       align-content: start;
     }
   
     .hero-section [hero-left] {
       align-self: start;
     }
   
     .swiperHeroText .swiper-slide > div:first-child:not(:has(*)) {
       display: none;
     }
   }
   
   .strategy-steps-section .step-icon.is-active .image-field {
     background-color: var(--vp-green-500);
   }
   
   .strategy-steps-section .step-icon.is-active .icon-image {
     filter: brightness(0) invert(1);
   }
   
   .strategy-steps-section .step-icon.is-active .ripple {
     background-color: var(--vp-green-300);
   }
   
   .strategy-steps-section .step-icon .content::before {
     background-color: rgb(159 203 116 / 0.18);
   }
   
   .vp-step-title {
     font-size: clamp(24px, round(nearest, calc(24px + 8 * (100vw - 1024px) / 876), 1px), 32px);
     font-weight: 600;
     line-height: 1.25;
   }
   
   .vp-services-heading {
     padding-block-end: clamp(30px, calc(30px + 30 * (100vw - 1024px) / 876), 60px);
   }
   
   /* Randevu formu yanındaki görsel: masaüstünde form yüksekliğini doldurur */
   .vp-appointment-image {
     position: relative;
     width: 100%;
     min-height: 100%;
     overflow: hidden;
     border-radius: clamp(15px, calc(15px + 15 * (100vw - 1024px) / 876), 30px);
     background-color: var(--vp-green-50);
   }
   
   .vp-appointment-image img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   @media (max-width: 1023.98px) {
     .vp-appointment-image {
       min-height: 0;
       aspect-ratio: 16 / 10;
     }
   }
   
   /* Müşteri yorumları: slider yüksekliği en uzun yoruma göre belirlendiği için içerik dikeyde ortalanır */
   .swiperHeroCommit .swiper-slide {
     display: flex;
     align-items: center;
     height: auto;
   }
   
   .swiperHeroCommit .swiper-slide > div {
     width: 100%;
   }
   
   .vp-review-name {
     font-size: clamp(18px, calc(18px + 6 * (100vw - 1024px) / 876), 24px);
     letter-spacing: -0.3px;
   }
   
   .vp-review-stars {
     display: flex;
     align-items: center;
     gap: 3px;
     padding-block: 2px;
   }
   
   .vp-review-stars svg {
     width: clamp(16px, calc(16px + 4 * (100vw - 1024px) / 876), 20px);
     height: auto;
     fill: #f6b40e;
   }
   
   /* Sıkça sorulan sorular */
   .vp-faq-title {
     color: #000;
   }
   
   .vp-faq-text {
     font-size: 17px;
     font-weight: 500;
     line-height: 1.6;
   }
   
   /* Cevaplar panelde rich text: paragraf aralığı ve linkler */
   .vp-faq-text p + p,
   .vp-faq-text ul,
   .vp-faq-text ol {
     margin-top: 0.75em;
   }
   
   .vp-faq-text ul {
     list-style: disc;
     padding-left: 1.25em;
   }
   
   .vp-faq-text ol {
     list-style: decimal;
     padding-left: 1.25em;
   }
   
   .vp-faq-text a {
     color: var(--color-primary);
     text-decoration: underline;
     text-underline-offset: 3px;
   }
   
   /* SSS sayfası — kategori sütunu kaldırıldı, soru listesi ortalı ve daraltılmış */
   .vp-faq-list {
     grid-template-columns: minmax(0, 1fr);
     max-width: 1040px;
     margin-inline: auto;
   }
   
   /* Hekimlerimiz — iki hekim kartı yan yana */
   .vp-doctor-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 10px;
   }
   
   @media (min-width: 768px) {
     .vp-doctor-grid { gap: 15px; }
   }
   
   @media (min-width: 1280px) {
     .vp-doctor-grid { gap: 20px; }
   }
   
   /* Mobilde kartlar alt alta; tek sütunda kart genişlediği için yazılar büyür, butonlar küçülüp yan yana eşit genişlikte durur
      (çok dar ekranda sığmazlarsa alt satıra geçer) */
   @media (max-width: 639.98px) {
     .vp-doctor-grid {
       grid-template-columns: minmax(0, 1fr);
       gap: 15px;
     }
   
     .vp-doctor-card-text { gap: 8px; }
     .vp-doctor-card-role { font-size: 16px; }
     .vp-doctor-card-name { padding-bottom: 4px; font-size: 24px; line-height: 1.2; }
     .vp-doctor-card-branch { font-size: 14px; }
   
     .vp-doctor-grid .vp-doctor-actions { gap: 8px; }
   
     .vp-doctor-grid .vp-doctor-actions > a {
       flex: 1 1 110px;
       min-width: 0;
       height: 42px;
       gap: 6px;
       padding-left: 3px;
       padding-right: 8px;
     }
   
     .vp-doctor-grid .vp-doctor-actions > a > div {
       left: 3px;
       width: 32px;
       height: 32px;
     }
   
     .vp-doctor-grid .vp-doctor-actions > a > i {
       width: 32px;
       padding: 0;
       font-size: 16px;
     }
   
     .vp-doctor-grid .vp-doctor-actions > a > span {
       font-size: 12px;
       white-space: nowrap;
     }
   }
   
   /* Hekimlerimiz sayfası — iki kart anasayfadaki oranlarında kalsın diye liste daraltılır */
   .vp-team-doctors {
     max-width: 1040px;
     margin-inline: auto;
   }
   
   /* Kartın tamamı detay sayfasına gider; butonlar bu katmanın üstünde kalır */
   .vp-doctor-card-link {
     position: absolute;
     inset: 0;
     z-index: 25;
   }
   
   .vp-doctor-actions {
     position: relative;
     z-index: 30;
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
   }
   
   .vp-doctor-actions > a {
     display: flex;
     opacity: 1;
   }
   
   .vp-doctor-btn-blue {
     border-color: var(--vp-blue);
     background-color: var(--vp-blue);
   }
   
   .vp-doctor-btn-blue > div {
     background-color: #2f6fb8;
   }
   
   @media (max-width: 1023.98px) {
     .vp-doctor-actions {
       padding: 0 15px 5px;
     }
   }
   
   /* Hekim görselleri yataya yakın (yaklaşık 1365x1444); kart genişliğini daha iyi doldurması için büyütülür */
   @media (min-width: 1024px) {
     .vp-doctor-image { height: 76%; }
   }
   
   @media (min-width: 1280px) {
     .vp-doctor-image { height: 80%; }
   }
   
   /* Hekim penceresi (tüm sayfalar) — açıklamadaki alt başlıklar */
   .vp-doctor-heading {
     padding-top: 10px;
     color: #000;
     font-size: 16px;
   }
   
   /* Hekim fotoğrafı yokken görsel alanı boş kalır */
   [x-data="doctor"] img[src=""] {
     visibility: hidden;
   }
   
   /* Hekim detay sayfası — üstte fotoğraf kutusu ve ad, altında tam genişlikte hakkında metni */
   .vp-doctor-profile {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 25px;
     align-items: center;
   }
   
   .vp-doctor-profile > .vp-doctor-text {
     display: contents;
   }
   
    .vp-doctor-profile > .vp-doctor-photo {
        position: relative;
        width: 100%;
        max-width: 340px;
        height: auto;
        max-height: none;
        aspect-ratio: 1;
        padding: 20px 15px 0;
        overflow: hidden;
        border: 1px solid rgb(0 0 0 / 0.06);
        border-radius: 20px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        box-shadow: 0 20px 50px rgb(36 64 26 / 0.12);
    }
   
   .vp-doctor-photo img {
     object-position: center bottom;
   }
   
   .vp-doctor-head > div:first-child {
     flex-wrap: wrap;
   }
   
   .vp-doctor-head .vp-doctor-actions {
     padding: 0;
   }
   
   .vp-doctor-name {
     font-size: clamp(32px, calc(32px + 32 * (100vw - 375px) / 1545), 64px);
   }
   
   .vp-doctor-body {
     padding-top: 25px;
     border-top: 1px solid rgb(0 0 0 / 0.08);
   }
   
   .vp-doctor-about {
     max-width: none;
     padding: 0;
   }
   
   .vp-doctor-about > :first-child {
     color: #000;
     font-size: clamp(22px, calc(22px + 8 * (100vw - 375px) / 1545), 30px);
   }
   
   .vp-doctor-about .scroll-box {
     max-height: none;
     overflow: visible;
   }
   
   .vp-doctor-about .gradient-top,
   .vp-doctor-about .gradient-bottom {
     display: none;
   }
   
   .vp-doctor-about .title {
     border-bottom: 0;
   }
   
   .vp-doctor-about .title > * {
     color: #222;
     font-size: 17px;
     font-weight: 500;
     line-height: 1.6;
     letter-spacing: -0.2px;
   }
   
   .vp-doctor-about .title > .vp-doctor-heading {
     padding-top: 16px;
     color: #000;
     font-size: 20px;
     font-weight: 600;
   }
   
   .vp-doctor-about .title > .vp-doctor-list-item {
     position: relative;
     padding-left: 24px;
   }
   
   .vp-doctor-list-marker {
     position: absolute;
     left: 0;
     top: 0;
     font-weight: 700;
   }
   
   @media (min-width: 768px) {
     .vp-doctor-profile {
       grid-template-columns: 240px minmax(0, 1fr);
       gap: 35px;
     }
   
     .vp-doctor-profile > .vp-doctor-photo {
       grid-column: 1;
       grid-row: 1;
       max-width: none;
     }
   
     .vp-doctor-head {
       grid-column: 2;
       grid-row: 1;
     }
   
     .vp-doctor-body {
       grid-column: 1 / -1;
       grid-row: 2;
     }
   }
   
   @media (min-width: 1024px) {
     .vp-doctor-profile {
       grid-template-columns: 300px minmax(0, 1fr);
       gap: 45px 50px;
     }
   
     .vp-doctor-about .title > * {
       font-size: 18px;
     }
   
     .vp-doctor-about .title > .vp-doctor-heading {
       font-size: 23px;
     }
   }
   
   /* 8. Hakkımızda
      -------------------------------------------------------------------------- */
   .vp-about-hero {
     margin-bottom: 0;
   }
   
   .vp-about-hero::before {
     background: #fff;
   }
   
   section.vp-about-intro {
     background-color: #fff;
   }
   
   .vp-about-slider {
     padding-top: 0;
   }
   
   @media (max-width: 1023.98px) {
     .vp-about-slider .swiperAboutImage .image {
       aspect-ratio: 4 / 3;
     }
   
     .vp-about-slider-controls {
       display: flex;
       align-items: stretch;
       gap: 12px;
       right: 12px;
       bottom: 12px;
       left: 12px;
     }
   
     .vp-about-slider-controls > :first-child {
       flex-shrink: 0;
     }
   
     .vp-about-slider-thumbs {
       flex: 1 1 auto;
       min-width: 0;
     }
   }
   
   .vp-about-content {
     align-self: center;
     gap: clamp(15px, calc(15px + 15 * (100vw - 1024px) / 876), 30px);
   }
   
   .vp-about-lead :is(h4, p) {
     color: #000;
   }
   
   .vp-about-text p  , .vp-about-text p span{
     color: rgb(0 0 0 / 0.6);
   }
   
   .vp-about-lead-title {
     font-size: clamp(24px, round(nearest, calc(24px + 8 * (100vw - 1024px) / 876), 1px), 32px);
     font-weight: 600;
     line-height: 1.25;
   }
   
   .vp-about-text .vp-about-text-title {
     color: #000;
     font-size: clamp(20px, round(nearest, calc(20px + 8 * (100vw - 1024px) / 876), 1px), 28px);
     font-weight: 600;
     line-height: 1.3;
   }
   
   /* 9. İletişim
      -------------------------------------------------------------------------- */
   /* Şube sekmesi yerine gelen klinik adı — tıklanabilir değil */
   .vp-contact-branch {
     cursor: default;
   }
   
   /* Sayfa üstü zemin — template'in lila / şeftali / turkuaz gradient'i yerine açık mavi ve yeşil tonlar */
   .vp-contact-gradient {
     background:
       linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 0) 100%),
       linear-gradient(251deg, rgb(64 138 222 / 0.14) 50.25%, rgb(243 248 238 / 0.7) 62.35%, rgb(198 227 169 / 0.7) 98.64%),
       linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.51) 28.2%, rgb(255 255 255 / 0.73) 40.87%, rgb(255 255 255 / 0.83) 54.31%, var(--vp-green-50) 100%);
   }
   
   /* 10. Kariyer
      -------------------------------------------------------------------------- */
   /* Adres ve pozisyon, cinsiyetle aynı satırda 3'lü dizilir */
   @media (min-width: 1024px) {
     .vp-career-third {
       grid-column: span 2 / span 2;
     }
   }
   
   /* CV yükleme ikonu — turkuaz görsel maske olarak kullanılır, rengi metinle aynı */
   .vp-upload-icon {
     display: block;
     flex-shrink: 0;
     width: 20px;
     height: 20px;
     background-color: var(--color-secondary);
     -webkit-mask: url("data:image/webp;base64,UklGRuIBAABXRUJQVlA4WAoAAAAQAAAAJwAAJwAAQUxQSMsAAAABgFXbTubsSoiESEACEkYCDooDkFAH1EHrAAlIiAQk5GFmEvh+XyNiAvCPjbnWetAuKlOvG285plrLhqLOQase6u6LWBdmX8w1vVdMcnDX5dXGouvF1nQnWVi31mCIrvY2qUpcJcCwqZYrckwGeDq0nKg7EgBkjx4Ai9obLl8eITS1C12ROPSI6mTcBs+nOSqM2SHDNmDuNm8PzHQiZh47zumU1D3kq3yeXyXFLyJA/xoRYPkKFQBYts2MS35t6ox7TtUYTqHeJ8I/EwBWUDgg8AAAALAFAJ0BKigAKAA+nUidSywuFFVarABYCcS2AF2Z+4Kb2biz0geoDbNeY/HAN40ANg0HyBnfkAD+2w//3xv/9z4f/724ZpGA2Omcy0ai/6oyp1ngv3wiABUCTpAzy2QLeWw49+AaNSQE8fL4dBM37q3///g66DYMJvo7cQV9pPg337H316p4z0f8lzbUN7/hHi9lQ719Y5tY5YN/7A6Fg9HF8VWqb/Sh7f6OTEoihCkDZzrBp4vkNeH7IBPNzKfet8ZDH/A1Tc+bz7V2j+/v/6wFrMovbKSEdvfVj8U2R3f3Mo+C1HeeZHtwv1t3AAAAAA==") center / contain no-repeat;
     mask: url("data:image/webp;base64,UklGRuIBAABXRUJQVlA4WAoAAAAQAAAAJwAAJwAAQUxQSMsAAAABgFXbTubsSoiESEACEkYCDooDkFAH1EHrAAlIiAQk5GFmEvh+XyNiAvCPjbnWetAuKlOvG285plrLhqLOQase6u6LWBdmX8w1vVdMcnDX5dXGouvF1nQnWVi31mCIrvY2qUpcJcCwqZYrckwGeDq0nKg7EgBkjx4Ai9obLl8eITS1C12ROPSI6mTcBs+nOSqM2SHDNmDuNm8PzHQiZh47zumU1D3kq3yeXyXFLyJA/xoRYPkKFQBYts2MS35t6ox7TtUYTqHeJ8I/EwBWUDgg8AAAALAFAJ0BKigAKAA+nUidSywuFFVarABYCcS2AF2Z+4Kb2biz0geoDbNeY/HAN40ANg0HyBnfkAD+2w//3xv/9z4f/724ZpGA2Omcy0ai/6oyp1ngv3wiABUCTpAzy2QLeWw49+AaNSQE8fL4dBM37q3///g66DYMJvo7cQV9pPg337H316p4z0f8lzbUN7/hHi9lQ719Y5tY5YN/7A6Fg9HF8VWqb/Sh7f6OTEoihCkDZzrBp4vkNeH7IBPNzKfet8ZDH/A1Tc+bz7V2j+/v/6wFrMovbKSEdvfVj8U2R3f3Mo+C1HeeZHtwv1t3AAAAAA==") center / contain no-repeat;
   }
   
   /* 11. Hizmet detay sayfaları
      -------------------------------------------------------------------------- */
   @media (min-width: 1024px) {
     .vp-service-layout {
       grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
     }
   
     .vp-related {
       top: 130px;
     }
   }
   
   /* Mobilde önce içerik, ardından diğer hizmetler */
   @media (max-width: 1023.98px) {
     .vp-related {
       order: 2;
     }
   }
   
   .vp-related-box {
     padding: clamp(20px, calc(20px + 5 * (100vw - 1024px) / 876), 25px);
     border: 1px solid rgb(0 0 0 / 0.08);
     border-radius: 20px;
     background-color: #fff;
   }
   
   .vp-related-title {
     padding-bottom: 12px;
     border-bottom: 1px solid rgb(0 0 0 / 0.08);
     color: #000;
     font-size: clamp(18px, round(nearest, calc(18px + 2 * (100vw - 1024px) / 876), 1px), 20px);
     font-weight: 600;
     letter-spacing: -0.4px;
     line-height: 1.2;
   }
   
   .vp-related-item {
     display: flex;
     align-items: center;
     gap: 14px;
     padding-block: 14px;
   }
   
   .vp-related-list li + li .vp-related-item {
     border-top: 1px solid rgb(0 0 0 / 0.08);
   }
   
   .vp-related-list li:last-child .vp-related-item {
     padding-bottom: 0;
   }
   
   .vp-related-thumb {
     flex: none;
     width: 80px;
     height: 64px;
     border-radius: 10px;
     object-fit: cover;
   }
   
   .vp-related-text {
     display: flex;
     flex-direction: column;
     gap: 4px;
     min-width: 0;
   }
   
   .vp-related-date {
     color: rgb(0 0 0 / 0.45);
     font-size: 14px;
     line-height: 1.3;
   }
   
   .vp-related-name {
     color: #000;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: -0.3px;
     line-height: 1.3;
     transition: color 0.3s;
   }
   
   @media (hover: hover) {
     .vp-related-item:hover .vp-related-name {
       color: var(--color-primary);
     }
   }
   
   /* Hizmet içeriği — güncelleme / yayınlanma tarihleri */
   .vp-service-meta {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 15px 30px;
     margin-bottom: clamp(20px, calc(20px + 10 * (100vw - 1024px) / 876), 30px);
     padding-bottom: clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     border-bottom: 1px solid rgb(0 0 0 / 0.08);
   }
   
   .vp-service-meta-item {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .vp-service-meta-icon {
     display: flex;
     flex: none;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background-color: var(--vp-green-50);
     color: var(--color-primary);
   }
   
   .vp-service-meta-icon svg {
     width: 22px;
     height: 22px;
   }
   
   .vp-service-meta-text {
     display: flex;
     flex-direction: column;
     gap: 2px;
     line-height: 1.3;
   }
   
   .vp-service-meta-label {
     color: #000;
     font-size: 15px;
     font-weight: 600;
   }
   
   .vp-service-meta-text time {
     color: rgb(0 0 0 / 0.5);
     font-size: 14px;
   }
   
   /* Hizmet içeriği — içindekiler */
   .vp-toc {
     margin-bottom: clamp(25px, calc(25px + 10 * (100vw - 1024px) / 876), 35px);
     border: 1px solid rgb(0 0 0 / 0.08);
     border-radius: 20px;
     background-color: #fff;
   }
   
   .vp-toc-toggle {
     display: flex;
     align-items: center;
     gap: 12px;
     width: 100%;
     padding: clamp(12px, calc(12px + 4 * (100vw - 1024px) / 876), 16px) clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     cursor: pointer;
     text-align: left;
   }
   
   .vp-toc-icon {
     display: flex;
     flex: none;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background-color: var(--vp-green-50);
     color: var(--color-primary);
   }
   
   .vp-toc-icon svg {
     width: 22px;
     height: 22px;
   }
   
   .vp-toc-title {
     flex: 1 1 auto;
     color: #000;
     font-size: clamp(17px, round(nearest, calc(17px + 3 * (100vw - 1024px) / 876), 1px), 20px);
     font-weight: 600;
     letter-spacing: -0.4px;
   }
   
   .vp-toc-chevron {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background-color: var(--vp-green-50);
     color: #000;
     font-size: 12px;
     transition: transform 0.4s, background-color 0.3s, color 0.3s;
   }
   
   .vp-toc-chevron.is-open {
     transform: rotate(180deg);
   }
   
   @media (hover: hover) {
     .vp-toc-toggle:hover .vp-toc-chevron {
       background-color: var(--color-primary);
       color: #fff;
     }
   }
   
   .vp-toc-list {
     margin: 0 clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     padding: 15px 0 clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     border-top: 1px solid rgb(0 0 0 / 0.08);
     list-style: decimal inside;
     counter-reset: none;
   }
   
   .vp-toc-list > li {
     color: #000;
     font-size: 15px;
     font-weight: 600;
     line-height: 1.4;
   }
   
   .vp-toc-list > li + li {
     margin-top: 10px;
   }
   
   .vp-toc-list ul {
     margin: 8px 0 0 6px;
     padding-left: 16px;
     border-left: 1px solid rgb(0 0 0 / 0.08);
   }
   
   .vp-toc-list ul li {
     font-size: 14px;
     font-weight: 400;
   }
   
   .vp-toc-list ul li + li {
     margin-top: 6px;
   }
   
   .vp-toc-list a {
     color: rgb(0 0 0 / 0.75);
     transition: color 0.3s;
   }
   
   .vp-toc-list ul a {
     color: rgb(0 0 0 / 0.6);
   }
   
   @media (hover: hover) {
     .vp-toc-list a:hover {
       color: var(--color-primary);
     }
   }
   
   /* Geniş ekranda içindekiler içerik sütununun yarısı kadar, sola hizalı */
   @media (min-width: 768px) {
     .vp-toc {
       max-width: max(50%, 360px);
     }
   }
   
   /* İçindekilerden gidilen başlıklar sabit menünün altında kalmasın */
   .vp-service-content :is(h2, h3)[id],
   #sikca-sorulan-sorular {
     scroll-margin-top: 120px;
   }
   
   /* Hizmet içeriği — prose başlıkları bölüm başlığı ölçüsüne indirilir */
   .vp-service-content h2 {
     font-size: clamp(22px, round(nearest, calc(22px + 10 * (100vw - 1024px) / 876), 1px), 32px);
     line-height: 1.25;
     letter-spacing: -0.5px;
   }
   
   .vp-service-content > h2:not(:first-child) {
     margin-top: clamp(30px, calc(30px + 20 * (100vw - 1024px) / 876), 50px);
   }
   
   .vp-service-content h3 {
     font-size: clamp(18px, round(nearest, calc(18px + 4 * (100vw - 1024px) / 876), 1px), 22px);
     line-height: 1.3;
     letter-spacing: -0.3px;
   }
   
   .vp-service-content h4 {
     font-size: clamp(17px, round(nearest, calc(17px + 2 * (100vw - 1024px) / 876), 1px), 19px);
     line-height: 1.35;
     letter-spacing: -0.2px;
   }
   
   .vp-service-content h5 {
     font-size: clamp(16px, round(nearest, calc(16px + 1 * (100vw - 1024px) / 876), 1px), 17px);
     line-height: 1.4;
   }
   
   .vp-service-content h6 {
     font-size: 15px;
     line-height: 1.4;
   }
   
   .vp-service-content > :is(h3, h4, h5, h6) {
     margin-top: clamp(20px, calc(20px + 8 * (100vw - 1024px) / 876), 28px);
   }
   
   .vp-service-content > :is(h2, h3, h4, h5, h6) + :is(h3, h4, h5, h6) {
     margin-top: 12px;
   }
   
   .vp-service-content > :is(h3, h4, h5, h6) + :not(h3, h4, h5, h6) {
     margin-top: 10px;
   }
   
   .vp-service-content strong,
   .vp-service-content li::marker {
     color: #000;
   }
   
   /* Umbraco RTE liste maddelerini <li><p>…</p></li> olarak kaydeder; .prose listeleri
      list-style-position: inside olduğundan blok <p> işaretin altına düşer */
   .prose li > p {
     display: inline;
     margin: 0;
     color: inherit;
     font-size: inherit;
     line-height: inherit;
   }
   
   .prose li > p + p {
     display: block;
     margin-top: 0.5em;
   }
   
   /* İçerik bağlantıları: kalın, yeşil alt çizgili; template'in hover'da açılan alt çizgisi kapatılır */
   .vp-service-content a {
     color: #000;
     font-weight: 600;
     background-image: none;
     text-decoration-line: underline;
     text-decoration-color: var(--color-primary);
     text-decoration-thickness: 2px;
     text-underline-offset: 4px;
     transition: color 0.3s, text-decoration-color 0.3s;
   }
   
   @media (hover: hover) {
     .vp-service-content a:hover {
       color: var(--color-primary);
       text-decoration-color: currentColor;
     }
   }
   
   /* İçerik tabloları (mobil) — template tabloyu 500px'e sabitleyip yatay kaydırıyor.
      Mobilde tablo ekran genişliğine sığar: üç sütun yan yana, iç boşluk ve yazı küçülür,
      ilk sütun (satır başlığı) daha dar, diğer iki sütun eşit genişlikte. */
   @media (max-width: 767.98px) {
     .vp-service-content .table-wrapper {
       overflow: visible;
     }
   
     .vp-service-content .table-wrapper table {
       width: 100%;
       min-width: 0;
       table-layout: fixed;
     }
   
     .vp-service-content .table-wrapper :is(th, td) {
       padding: 8px 6px;
       white-space: normal;
       overflow-wrap: break-word;
       hyphens: auto;
       vertical-align: top;
     }
   
     .vp-service-content .table-wrapper :is(th, td):first-child {
       width: 28%;
     }
   
     .vp-service-content .table-wrapper thead th {
       border-width: 2px;
       border-radius: 10px;
       font-size: 14px;
       font-weight: 600;
       line-height: 1.3;
     }
   
     .vp-service-content .table-wrapper tbody tr {
       font-size: 13px;
       line-height: 1.45;
     }
   
     .vp-service-content .table-wrapper tbody td:first-child {
       font-weight: 600;
     }
   }
   
   /* Hizmet içeriği — sıkça sorulan sorular (içerik sütununda, içeriğin ardından) */
   .vp-service-faq {
     margin-top: clamp(30px, calc(30px + 20 * (100vw - 1024px) / 876), 50px);
   }
   
   .vp-service-faq-title {
     margin-bottom: clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     color: #000;
     font-size: clamp(22px, round(nearest, calc(22px + 10 * (100vw - 1024px) / 876), 1px), 32px);
     font-weight: 600;
     letter-spacing: -0.5px;
     line-height: 1.25;
   }
   
   .vp-faq-items {
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   
   .vp-faq-item {
     border: 1px solid rgb(0 0 0 / 0.08);
     border-radius: 16px;
     background-color: #fff;
     transition: background-color 0.3s, border-color 0.3s;
   }
   
   .vp-faq-item.is-open {
     border-color: transparent;
     background-color: var(--vp-green-50);
   }
   
   .vp-faq-question button {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
     width: 100%;
     padding: clamp(14px, calc(14px + 4 * (100vw - 1024px) / 876), 18px) clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     color: #000;
     font-size: clamp(16px, round(nearest, calc(16px + 2 * (100vw - 1024px) / 876), 1px), 18px);
     font-weight: 600;
     letter-spacing: -0.3px;
     line-height: 1.35;
     text-align: left;
     cursor: pointer;
   }
   
   /* Artı işareti; açıkken dikey çizgi dönerek eksiye dönüşür */
   .vp-faq-icon {
     position: relative;
     flex: none;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background-color: var(--vp-green-50);
     transition: background-color 0.3s;
   }
   
   .vp-faq-icon::before,
   .vp-faq-icon::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 14px;
     height: 2px;
     border-radius: 2px;
     background-color: #000;
     transform: translate(-50%, -50%);
     transition: transform 0.4s, background-color 0.3s;
   }
   
   .vp-faq-icon::after {
     transform: translate(-50%, -50%) rotate(90deg);
   }
   
   .vp-faq-item.is-open .vp-faq-icon {
     background-color: #fff;
   }
   
   .vp-faq-item.is-open .vp-faq-icon::after {
     transform: translate(-50%, -50%) rotate(0deg);
   }
   
   @media (hover: hover) {
     .vp-faq-question button:hover .vp-faq-icon {
       background-color: var(--color-primary);
     }
   
     .vp-faq-question button:hover .vp-faq-icon::before,
     .vp-faq-question button:hover .vp-faq-icon::after {
       background-color: #fff;
     }
   }
   
   .vp-faq-answer {
     padding: 0 clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px) clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     color: rgb(0 0 0 / 0.65);
     font-size: 15px;
     line-height: 1.7;
   }
   
   .vp-faq-answer p + p, .vp-faq-answer ul, .vp-faq-answer ol { margin-top: 0.75em; }
   .vp-faq-answer ul { list-style: disc; padding-left: 1.25em; }
   .vp-faq-answer ol { list-style: decimal; padding-left: 1.25em; }
   .vp-faq-answer a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
   
   /* Genel buton — template'in "Hakkımızda" butonuyla aynı görünüm:
      koyu yeşil hap, sağdaki yeşil daire hover'da tüm butonu kaplar */
   .vp-btn {
     position: relative;
     isolation: isolate;
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     gap: clamp(12px, calc(12px + 8 * (100vw - 1024px) / 876), 20px);
     min-width: 160px;
     height: clamp(50px, calc(50px + 6 * (100vw - 1024px) / 876), 56px);
     padding: 0 10px 0 20px;
     overflow: hidden;
     border: 2px solid var(--color-secondary);
     border-radius: 999px;
     background-color: var(--color-secondary);
     color: #fff;
   }
   
   .vp-btn::before {
     content: "";
     position: absolute;
     top: 50%;
     right: 4px;
     z-index: -1;
     width: 40px;
     height: 40px;
     border-radius: 999px;
     background-color: var(--color-primary);
     transform: translateY(-50%);
     transition: right 0.5s, width 0.5s, height 0.5s, border-radius 0.5s;
   }
   
   .vp-btn-text {
     font-size: 15px;
     font-weight: 700;
   }
   
   .vp-btn-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     font-size: 20px;
   }
   
   @media (hover: hover) {
     .vp-btn:hover::before {
       right: 0;
       width: 100%;
       height: 100%;
       border-radius: 0;
     }
   }
   
   /* Hizmet içeriği sonu — onay notu, hekim kartı, önceki / sonraki hizmet */
   .vp-article-footer {
     display: flex;
     flex-direction: column;
     gap: clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     margin-top: clamp(30px, calc(30px + 20 * (100vw - 1024px) / 876), 50px);
   }
   
   .vp-review-note {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     border-radius: 20px;
     background-color: var(--vp-green-50);
     color: rgb(0 0 0 / 0.7);
     font-size: 15px;
     line-height: 1.6;
   }
   
   .vp-review-note strong {
     color: #000;
     font-weight: 600;
   }
   
   .vp-review-note-icon {
     display: flex;
     flex: none;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background-color: #fff;
     color: var(--color-primary);
   }
   
   .vp-review-note-icon svg {
     width: 22px;
     height: 22px;
   }
   
   .vp-author {
     display: flex;
     align-items: flex-start;
     gap: clamp(15px, calc(15px + 10 * (100vw - 1024px) / 876), 25px);
     padding: clamp(20px, calc(20px + 5 * (100vw - 1024px) / 876), 25px);
     border: 1px solid rgb(0 0 0 / 0.08);
     border-radius: 20px;
     background-color: #fff;
   }
   
   .vp-author-photo {
     flex: none;
     width: clamp(96px, calc(96px + 34 * (100vw - 1024px) / 876), 130px);
     aspect-ratio: 1;
     overflow: hidden;
     border-radius: 16px;
     background-color: var(--vp-green-50);
   }
   
   .vp-author-photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top center;
   }
   
   .vp-author-body {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     align-items: flex-start;
     min-width: 0;
   }
   
   .vp-author-role {
     color: var(--color-primary);
     font-size: 14px;
     font-weight: 600;
   }
   
   .vp-author-name {
     margin-top: 2px;
     color: #000;
     font-size: clamp(18px, round(nearest, calc(18px + 4 * (100vw - 1024px) / 876), 1px), 22px);
     font-weight: 600;
     letter-spacing: -0.4px;
     line-height: 1.3;
   }
   
   .vp-author-bio {
     margin-top: 10px;
     color: rgb(0 0 0 / 0.6);
     font-size: 15px;
     line-height: 1.7;
   }
   
   .vp-author .vp-btn {
     margin-top: clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
   }
   
   @media (max-width: 639.98px) {
     .vp-author {
       flex-direction: column;
     }
   }
   
   .vp-post-nav {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: clamp(10px, calc(10px + 10 * (100vw - 1024px) / 876), 20px);
   }
   
   .vp-post-nav-item {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 6px;
     padding: clamp(15px, calc(15px + 7 * (100vw - 1024px) / 876), 22px) clamp(15px, calc(15px + 5 * (100vw - 1024px) / 876), 20px);
     border: 1px solid rgb(0 0 0 / 0.08);
     border-radius: 20px;
     background-color: #fff;
     transition: border-color 0.3s, background-color 0.3s;
   }
   
   .vp-post-nav-next {
     align-items: flex-end;
     text-align: right;
   }
   
   .vp-post-nav-label {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: var(--color-primary);
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.6px;
     text-transform: uppercase;
   }
   
   .vp-post-nav-label svg {
     width: 16px;
     height: 16px;
     transition: transform 0.3s;
   }
   
   .vp-post-nav-title {
     color: #000;
     font-size: clamp(16px, round(nearest, calc(16px + 2 * (100vw - 1024px) / 876), 1px), 18px);
     font-weight: 600;
     letter-spacing: -0.3px;
     line-height: 1.3;
   }
   
   @media (hover: hover) {
     .vp-post-nav-item:hover {
       border-color: var(--vp-green-200);
       background-color: var(--vp-green-50);
     }
   
     .vp-post-nav-item:hover .vp-post-nav-label svg {
       transform: translateX(-3px);
     }
   
     .vp-post-nav-next:hover .vp-post-nav-label svg {
       transform: translateX(3px);
     }
   }
   
   @media (max-width: 479.98px) {
     .vp-post-nav {
       grid-template-columns: minmax(0, 1fr);
     }
   }
   
   /* 12. Hizmetlerimiz
      -------------------------------------------------------------------------- */
   .vp-services-grid > a {
     height: 200px;
   }
   
   @media (min-width: 1024px) {
     .vp-services-grid > a {
       height: 370px;
     }
   }
   
   .vp-service-card-body {
     flex-wrap: wrap;
     row-gap: 12px;
   }
   
   .vp-service-card-date {
     display: flex;
     flex-basis: 100%;
   }
   
   .vp-service-card-icon {
     width: clamp(22px, 1rem + 0.9vw, 32px);
     height: clamp(22px, 1rem + 0.9vw, 32px);
   }
   
   .vp-service-card-title {
     font-size: clamp(17px, 0.9rem + 0.6vw, 24px);
   }
   
   /* 13. Sayfalama — [data-vp-pagination]
      Script çalışana kadar varsayılan ilk sayfa (9 kayıt) gösterilir; kartlar bir an
      hepsi görünüp sonra kaybolmasın diye. */
   [data-vp-list]:not(.is-ready) > :nth-child(n + 10),
   [data-vp-list] > [hidden],
   .vp-pagination [hidden] {
     display: none !important;
   }
   
   .vp-pagination > div > div,
   .vp-pagination nav {
     justify-content: center;
   }
   
   /* 14. Footer — marka sütunu + Hizmetlerimiz / Hızlı Erişim / Blog / Çalışma Saatleri */
   .vp-footer-grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 30px;
   }
   
   .vp-footer-brand {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: clamp(18px, calc(18px + 12 * (100vw - 1024px) / 876), 30px);
   }
   
   .vp-footer-brand a[href*="google.com/maps"] {
     max-width: 21.5em;
   }
   
   .vp-footer-social {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .vp-footer-title {
     margin-bottom: clamp(14px, calc(14px + 6 * (100vw - 1024px) / 876), 20px);
     color: #000;
     font-size: clamp(17px, calc(17px + 3 * (100vw - 1024px) / 876), 20px);
     font-weight: 600;
     letter-spacing: -0.3px;
     line-height: 1.3;
   }
   
   .vp-footer-links,
   .vp-footer-hours {
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   
   .vp-footer-links a {
     color: rgb(0 0 0 / 0.7);
     font-size: 15px;
     font-weight: 500;
     line-height: 1.4;
     transition: color 0.3s;
   }
   
   @media (hover: hover) {
     .vp-footer-links a:hover {
       color: var(--color-primary);
     }
   }
   
   .vp-footer-hours li {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
   
   .vp-footer-hours span {
     color: #666;
     font-size: 14px;
   }
   
   .vp-footer-hours strong {
     color: #000;
     font-size: 15px;
     font-weight: 500;
   }
   
   .vp-footer-agency {
     display: inline-flex;
     opacity: 0.85;
     transition: opacity 0.3s;
   }
   
   .vp-footer-agency img {
     width: auto;
     height: 22px;
   }
   
   @media (hover: hover) {
     .vp-footer-agency:hover {
       opacity: 1;
     }
   }
   
   /* Mobildeki sabit WhatsApp / telefon çubuğu (50px) copyright satırını örtmesin.
      Detay sayfalarındaki "Sizi Arayalım" şeridi (body.fixed-smile) 1024px altında gizli
      olduğu için şablonun ona ayırdığı footer margin'i burada sıfırlanır. */
   @media (max-width: 1023.98px) {
     #footer {
       padding-bottom: 50px;
     }
   
     body.fixed-smile #footer {
       margin-bottom: 0;
     }
   }
   
   @media (min-width: 360px) {
     .vp-footer-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 30px 20px;
     }
   
     .vp-footer-brand {
       grid-column: 1 / -1;
     }
   }
   
   @media (min-width: 640px) {
     .vp-footer-grid {
       gap: 35px 30px;
     }
   }
   
   @media (min-width: 1024px) {
     .vp-footer-grid {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
   
   @media (min-width: 1280px) {
     .vp-footer-grid {
       grid-template-columns: 1.4fr 1fr 1fr 1.25fr 0.9fr;
       gap: 40px;
     }
   
     .vp-footer-brand {
       grid-column: auto;
     }
   }
   
   /* 15. 404 sayfası
      -------------------------------------------------------------------------- */
   .vp-404 {
     padding-top: clamp(40px, calc(40px + 60 * (100vw - 375px) / 1545), 100px);
     padding-bottom: clamp(50px, calc(50px + 70 * (100vw - 375px) / 1545), 120px);
   }
   
   .vp-404-inner {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   }
   
   .vp-404-title {
     color: var(--color-first);
     font-size: clamp(40px, calc(40px + 32 * (100vw - 375px) / 1545), 72px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -1px;
   }
   
   .vp-404-image {
     width: 100%;
     max-width: 731px;
     height: auto;
     margin-top: clamp(15px, calc(15px + 25 * (100vw - 375px) / 1545), 40px);
   }
   
   .vp-404-heading {
     margin-top: clamp(20px, calc(20px + 20 * (100vw - 375px) / 1545), 40px);
     color: var(--color-first);
     font-size: clamp(18px, calc(18px + 8 * (100vw - 375px) / 1545), 26px);
     font-weight: 600;
     letter-spacing: 0.3px;
     text-transform: uppercase;
   }
   
   .vp-404-text {
     margin-top: 8px;
     color: #556163;
     font-size: clamp(14px, calc(14px + 2 * (100vw - 375px) / 1545), 16px);
   }
   
   .vp-404-inner > a {
     margin-top: clamp(20px, calc(20px + 10 * (100vw - 375px) / 1545), 30px);
   }

   /* HİZMET VE BLOG CSSLERİ */

   /* Hizmet detay sayfası - vanilla CSS. Yalnızca .vp-service-detail kapsamında. */
.vp-service-detail {
    background: #fff;
    color: #171717;
}

.vp-service-detail .vp-service-header {
    padding: 34px 0 0;
    background: #fff;
}

.vp-service-detail .vp-service-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 23px;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

.vp-service-detail .vp-service-breadcrumb a {
    color: #626262;
    text-decoration: none;
    transition: color .2s ease;
}

.vp-service-detail .vp-service-breadcrumb a:hover {
    color: #5d9d30;
}

.vp-service-detail .vp-service-breadcrumb [aria-current="page"] {
    color: #171717;
    font-weight: 600;
}

.vp-service-detail .vp-service-breadcrumb-separator {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #65a333;
}

.vp-service-detail .vp-service-heading {
    margin: 0;
    color: #171717;
    font-size: clamp(30px, 4.2vw, 64px);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.vp-service-detail .vp-service-main {
    min-width: 0;
}

.vp-service-detail .vp-service-featured-image {
    width: 100%;
    margin: 0 0 30px;
    overflow: hidden;
    border-radius: 18px;
    background: #f0f2ee;
    aspect-ratio: 771 / 390;
}

.vp-service-detail .vp-service-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* Eski yardımcı sınıflar ve zengin metin stillerinden gelebilen açık renkleri düzelt. */
.vp-service-detail .vp-service-content {
    color: #252525;
}

.vp-service-detail .vp-service-content :is(h1, h2, h3, h4, h5, h6) {
    color: #171717;
}

.vp-service-detail .vp-service-content :is(p, li, blockquote, strong, em) {
    color: #303030;
}

.vp-service-detail .vp-service-content a {
    color: #4f8e27;
}

@media (max-width: 1024px) {
    .vp-service-detail .vp-service-header {
        padding: 28px 0 0;
    }

    .vp-service-detail .vp-service-featured-image {
        margin-bottom: 24px;
        border-radius: 14px;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    .vp-service-detail .vp-service-header {
        padding: 22px 0 0;
    }

    .vp-service-detail .vp-service-breadcrumb {
        margin-bottom: 16px;
        gap: 6px 8px;
        font-size: 13px;
    }

    .vp-service-detail .vp-service-heading {
        font-size: clamp(27px, 7vw, 38px);
        line-height: 1.18;
        letter-spacing: -.025em;
    }

    .vp-service-detail .vp-service-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .vp-service-detail .vp-service-main {
        order: -1;
    }

    .vp-service-detail .vp-service-featured-image {
        border-radius: 12px;
        height: 200px;
        aspect-ratio: auto;
        margin-bottom: 20px;
    }
}


/* Hizmet detay - Numaralı liste numaralarını kalınlaştır */
.vp-service-detail .vp-service-content ol li::marker {
    font-weight: 700;
    color: #171717;
}

/* HEADER - HİZMET KARTI GÖRSELLERİ */

.vp-header-service-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 771 / 390;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f4f5f2;
}

.vp-header-service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

/* Hover efekti */
@media (hover: hover) and (pointer: fine) {
    a:hover .vp-header-service-image img {
        transform: scale(1.04);
    }
}

.grecaptcha-badge {
  display: none !important;
}

.vp-service-content img {
  width: 100%;
}

.blog-card-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}