/* Mylia Veteriner Kliniği — Türkçe içerik için düzeltmeler.
   Üretilen dosyalar yeniden export edilince silinir; düzeltmeler burada durur. */

/* Framer'ın fiyat kutusu "$49" genişliğine göre sabitlenmiş ve metni
   kelime ortasından kırabiliyor. Türk Lirası tutarları daha uzun olduğu için
   rakam ikiye bölünüyordu; tek satırda kalmasını sağlar.
   NOT: fiyatın iki kez görünmesi bundan değil — 3B küpün yüzleri export'ta
   üst üste binmiyor, bu ayrı ve export kaynaklı bir kusur (İngilizce çıktıda da var). */
.framer-XfGuy .framer-1w7zn3y,
.framer-XfGuy .framer-lb7gar,
.framer-XfGuy .framer-1mbfjzp,
.framer-XfGuy .framer-uvvrx8 {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* Marka: gönderilen kare Mylia amblemi navbar'da kendi oranını korur. */
.framer-zNXeU .framer-5hpgc5 {
  aspect-ratio: 1 !important;
  width: 54px !important;
  height: 54px !important;
}

.framer-zNXeU .framer-5hpgc5 img,
.framer-rXOnT .framer-1pjle57 img {
  object-fit: contain !important;
}

.framer-zNXeU.framer-1uhujb {
  padding-bottom: 0 !important;
}

/* Hizmet kartları template yapısını koruyarak 2 + 2 + 2 sıralanır. */
#services-section .framer-1fvpdhk {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

#services-section .framer-be8ip,
#services-section .framer-gjd2x6 {
  display: contents !important;
}

@media (max-width: 809.98px) {
  #services-section .framer-1fvpdhk {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Dönen hizmet adı kutusu İngilizce kısa metne göre 70px export edilmiş.
   Türkçe hizmet adlarını kısaltmadan küpü genişletir; kart hover'ı ve
   alttan gelen Randevu Al butonu orijinal davranışını korur. */
#services-section .framer-XfGuy {
  --mylia-service-cube-size: 190px;
}

#services-section .framer-XfGuy .framer-1jjndn6,
#services-section .framer-XfGuy .framer-1w7zn3y,
#services-section .framer-XfGuy .framer-lb7gar,
#services-section .framer-XfGuy .framer-1mbfjzp,
#services-section .framer-XfGuy .framer-uvvrx8 {
  width: var(--mylia-service-cube-size) !important;
}

#services-section .framer-XfGuy .framer-gkseh7 {
  transform: translateZ(calc(var(--mylia-service-cube-size) / 2)) !important;
}

#services-section .framer-XfGuy .framer-e9537a {
  transform: translateZ(calc(var(--mylia-service-cube-size) / -2)) rotateY(180deg) !important;
}

#services-section .framer-XfGuy .framer-1w5t896 {
  left: calc(var(--mylia-service-cube-size) / 2) !important;
}

#services-section .framer-XfGuy .framer-1jxeqtn {
  left: calc(var(--mylia-service-cube-size) / -2) !important;
}

@media (max-width: 1199.98px) {
  #services-section .framer-XfGuy {
    --mylia-service-cube-size: 140px;
  }
}

/* Telefonda hizmet kartı: capture yalnızca 1440 / 1024 / 768 genişliklerinden
   alındı, telefon için ayrı bir kırılma noktası yok. Bu yüzden 375px'te kart
   hâlâ masaüstünün yan yana düzenini koruyordu: 335px'lik kartın içinde metin
   sütununa 160px kalıyor, üç cümlelik açıklama altı satıra bölünüyor ve 140px
   genişliğindeki dönen küp sütunu neredeyse tamamen dolduruyordu.

   Ölçüm (375px, "Aşılama" kartı):
     önce  metin sütunu 160px · paragraf 6 satır (144px) · görsel 115x262
     sonra metin sütunu 287px · paragraf 3 satır  (72px) · görsel 287x190

   600px sınırı bilerek: 600-810px arası (tablet) kart ~560px genişliğe
   ulaşıyor, orada yan yana düzen zaten rahat duruyor ve tam genişlik bir
   görsel şeridi orantısız görünürdü. */
@media (max-width: 599.98px) {
  #services-section .framer-1l0lrc9 {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    gap: 20px !important;
  }

  #services-section .framer-1l0lrc9 > .framer-1web74r {
    width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    gap: 20px !important;
  }

  /* Görsel metnin altına tam genişlikte bir şerit olarak iner. */
  #services-section .framer-1l0lrc9 > figure {
    order: 1 !important;
    width: 100% !important;
    height: 190px !important;
    flex: 0 0 auto !important;
  }
}

/* Kurucu veteriner: mevcut beyaz bölüm yapısı, tipografi ve GSAP giriş
   ritmiyle uyumlu, sade iki kolonlu düzen. */
.mylia-doctor {
  background: #fff;
  color: #161616;
  padding: 120px 0;
}

.mylia-doctor,
.mylia-doctor * {
  box-sizing: border-box;
}

.mylia-doctor__container {
  align-items: center;
  display: grid;
  gap: clamp(64px, 8vw, 120px);
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  margin: 0 auto;
  max-width: 1200px;
  width: calc(100% - 80px);
}

.mylia-doctor__media {
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.mylia-doctor__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  width: 100%;
}

.mylia-doctor__content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  max-width: 570px;
}

.mylia-doctor__label {
  display: flex;
  height: min-content;
  width: min-content;
}

.mylia-doctor__content h2 {
  font-family: "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.98;
  margin: 28px 0 16px;
}

.mylia-doctor__content h2 span {
  display: inline-block;
}

.mylia-doctor__role {
  color: #d13600;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.mylia-doctor__intro {
  color: #6f6f6f;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 17px;
  letter-spacing: -0.03em;
  line-height: 1.7;
  margin: 30px 0 0;
  max-width: 540px;
}

.mylia-doctor__details {
  border-bottom: 1px solid #e3e3e3;
  border-top: 1px solid #e3e3e3;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 34px 0;
  padding: 24px 0;
  width: 100%;
}

.mylia-doctor__details div {
  min-width: 0;
}

.mylia-doctor__details dt {
  color: #9b9b9b;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.mylia-doctor__details dd {
  color: #161616;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.mylia-doctor__cta {
  align-items: center;
  color: #d13600;
  display: inline-flex;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 15px;
  font-weight: 650;
  gap: 12px;
  text-decoration: none;
}

.mylia-doctor__cta span {
  align-items: center;
  background: #d13600;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  transition: transform 250ms ease;
  width: 34px;
}

.mylia-doctor__cta:hover span {
  transform: rotate(45deg);
}

@media (max-width: 809.98px) {
  #services-section .framer-HKwfG {
    -webkit-tap-highlight-color: transparent;
  }

  .mylia-doctor {
    padding: 88px 0;
  }

  .mylia-doctor__container {
    gap: 54px;
    grid-template-columns: 1fr;
    width: calc(100% - 48px);
  }

  .mylia-doctor__media {
    aspect-ratio: 5 / 6;
    max-height: 720px;
    width: 100%;
  }

  .mylia-doctor__content {
    max-width: 650px;
  }
}

@media (max-width: 599.98px) {
  .mylia-doctor {
    padding: 72px 0;
  }

  .mylia-doctor__container {
    gap: 40px;
    width: calc(100% - 32px);
  }

  .mylia-doctor__media {
    border-radius: 22px;
  }

  .mylia-doctor__content h2 {
    font-size: 46px;
    margin-top: 24px;
  }

  .mylia-doctor__intro {
    font-size: 16px;
    margin-top: 24px;
  }

  .mylia-doctor__details {
    gap: 20px;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mylia-doctor__cta span {
    transition: none;
  }
}


/* ---------------------------------------------------------------------------
   Altbilgideki sosyal hesap simgeleri.

   Şablon üç simgeyle geliyordu ve üçü de href="/" idi; ikincisi X logosuydu.
   Kliniğin hesapları Instagram, YouTube ve Google Haritalar olduğu için
   maskeler burada değiştiriliyor. Kural derlenmiş main.css'ten SONRA
   yükleniyor, tek sınıf yerine iki sınıfla yazıldığı için özgüllüğü de
   yüksek — şablonun kendi kuralı ezilemeden kalmıyor.

   Renk main.css'ten geliyor (background-color: var(--1df8v9o)); maske yalnız
   şekli belirliyor, o yüzden hover/renk davranışı olduğu gibi korunuyor.
--------------------------------------------------------------------------- */

.mylia-social.mylia-social--instagram {
  -webkit-mask: url('data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 3)"><rect x="0" y="0" width="18" height="18" rx="5" ry="5" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2" stroke-linejoin="round"/><circle cx="9" cy="9" r="4" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2"/><circle cx="13.9" cy="4.1" r="1.2" fill="rgb(0,0,0)"/></g></svg>') alpha no-repeat center/auto var(--framer-icon-mask-mode, add), var(--framer-icon-mask, none);
  mask: url('data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 3)"><rect x="0" y="0" width="18" height="18" rx="5" ry="5" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2" stroke-linejoin="round"/><circle cx="9" cy="9" r="4" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2"/><circle cx="13.9" cy="4.1" r="1.2" fill="rgb(0,0,0)"/></g></svg>') alpha no-repeat center/auto var(--framer-icon-mask-mode, add), var(--framer-icon-mask, none);
}

.mylia-social.mylia-social--youtube {
  -webkit-mask: url('data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 3)"><rect x="0" y="2.5" width="18" height="13" rx="4" ry="4" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2" stroke-linejoin="round"/><path d="M 7.2 6.2 L 12.4 9 L 7.2 11.8 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1.4" stroke-linejoin="round"/></g></svg>') alpha no-repeat center/auto var(--framer-icon-mask-mode, add), var(--framer-icon-mask, none);
  mask: url('data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 3)"><rect x="0" y="2.5" width="18" height="13" rx="4" ry="4" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2" stroke-linejoin="round"/><path d="M 7.2 6.2 L 12.4 9 L 7.2 11.8 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1.4" stroke-linejoin="round"/></g></svg>') alpha no-repeat center/auto var(--framer-icon-mask-mode, add), var(--framer-icon-mask, none);
}

.mylia-social.mylia-social--maps {
  -webkit-mask: url('data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 3)"><path d="M 9 17.5 C 9 17.5 15.5 11.6 15.5 7 A 6.5 6.5 0 1 0 2.5 7 C 2.5 11.6 9 17.5 9 17.5 Z" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2" stroke-linejoin="round"/><circle cx="9" cy="7" r="2.4" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2"/></g></svg>') alpha no-repeat center/auto var(--framer-icon-mask-mode, add), var(--framer-icon-mask, none);
  mask: url('data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 3)"><path d="M 9 17.5 C 9 17.5 15.5 11.6 15.5 7 A 6.5 6.5 0 1 0 2.5 7 C 2.5 11.6 9 17.5 9 17.5 Z" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2" stroke-linejoin="round"/><circle cx="9" cy="7" r="2.4" fill="transparent" stroke="rgb(0,0,0)" stroke-width="2"/></g></svg>') alpha no-repeat center/auto var(--framer-icon-mask-mode, add), var(--framer-icon-mask, none);
}

/* ---------------------------------------------------------------------------
   Erişilebilir marka renkleri.

   Derlenmiş main.css bu iki değeri `body` üstünde tanımlıyor; burası ondan
   sonra yüklendiği için aynı özgüllükle eziyor. Değişikliğin main.css'e değil
   buraya yazılmasının sebebi: o dosya her `php-export` tazelemesinde yeniden
   üretiliyor, oraya yazılan düzeltme bir sonraki export'ta kaybolurdu.

   #ff4305 → #d13600: aynı ton, daha koyu. Beyaz metin altında 3.47 olan
   kontrast 4.54'e çıkıyor — "Randevu Al", "Gönder", blog rozetleri ve
   yazar kartındaki düğme hep bu tek satırdan besleniyor.
   #787878 → #767676: beyaz üstünde 4.42 olan gövde grisi 4.54 oluyor.
--------------------------------------------------------------------------- */
body {
  --token-afd8097e-ccfd-4230-8e47-8694718fc321: #d13600;
  --token-edf44817-cbc2-4ed0-8cd4-dfeaab465156: #767676;
}

/* ---------------------------------------------------------------------------
   Footer ajans imzası.

   Kaynak logonun yalnız amblemi kullanılıyor; metin HTML kaldığı için küçük
   boyutta da net ve erişilebilir. Hover'da gri aslan Hiera mavisine geçip
   yumuşak bir parıltı kazanıyor.
--------------------------------------------------------------------------- */
.mylia-agency-credit {
  align-items: center;
  color: #767676 !important;
  display: inline-flex;
  gap: 5px;
  justify-content: flex-end;
  line-height: 1.2;
  position: relative;
  text-decoration: none !important;
  transition: color 220ms ease;
  white-space: nowrap;
}

.mylia-agency-credit__label,
.mylia-agency-credit__separator {
  opacity: 0.72;
}

.mylia-agency-credit__mark {
  background-color: #767676;
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 0 rgba(58, 99, 237, 0));
  height: 17px;
  -webkit-mask: url("/assets/images/brand/hiera-digital-mark.svg") center / contain no-repeat;
  mask: url("/assets/images/brand/hiera-digital-mark.svg") center / contain no-repeat;
  opacity: 0.82;
  transition: background-color 260ms ease, filter 320ms ease, opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 14px;
}

.mylia-agency-credit__name {
  font-weight: 600;
  letter-spacing: 0.015em;
}

.mylia-agency-credit:hover {
  color: #626262 !important;
}

.mylia-agency-credit:hover .mylia-agency-credit__mark {
  background-color: #3a63ed;
  filter: drop-shadow(0 0 4px rgba(58, 99, 237, 0.62)) drop-shadow(0 0 9px rgba(58, 99, 237, 0.28));
  opacity: 1;
  transform: scale(1.06);
}

.mylia-agency-credit:focus-visible {
  border-radius: 3px;
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mylia-agency-credit,
  .mylia-agency-credit__mark {
    transition: none;
  }
}