/* Kilya Clinic hero slider
   Bagimsiz calisir: Elementor / Slider Revolution / jQuery gerektirmez.
   Tum secicilerde kc-hero oneki var, tema CSS'i ile cakismaz. */

.kc-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
  background-color: #0F306B; /* gorsel yuklenene kadar */
}

/* --- slaytlar: ust uste, capraz solma --- */

.kc-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.kc-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease, visibility 0s;
}

/* Secici bilerek .kc-hero ile baslatildi: Elementor'un
   ".elementor img { height: auto }" kurali ayni spesifiklikte (0,1,1)
   ve kaynak sirasinda sonra geldigi icin kazaniyordu. Hero hala bir
   .elementor sarmalayicisinin icinde oldugundan kural esliyor ve
   gorsel dogal en-boy oranina donup bolumu doldurmuyordu. */
.kc-hero .kc-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

/* Soldan saga karartma: metin okunur kalsin, gorselin sagi acik kalsin.
   Duraklar bu fotografa gore kalibre edildi - metin blogunun bittigi
   ~%60 noktasina kadar beyaz yazi AA esigini (4.5:1) gecmeli. */
.kc-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.75) 35%,
    rgba(0, 0, 0, 0.5) 60%,
    rgba(0, 0, 0, 0.15) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* --- ACIK ISLEM (kc-hero--light) --- SADECE MASAUSTU

   Kucuk ekranda gorsel cok kirpiliyor: ozne kareyi dolduruyor ve
   soldaki bos alan kalmiyor, beyaz tul metnin altinda is gormuyor.
   Bu yuzden acik islem yalnizca masaustunde acik; 1200px ve altinda
   koyu islem (A) devreye giriyor. Esik, temanin masaustu menuden
   mobil header'a gectigi nokta ile ayni. */

@media (min-width: 1201px) {
  .kc-hero--light .kc-hero__scrim {
    background:
      /* Ust bant: header seffaf oldugu icin menunun sag yarisi fotografin
         koyu sac bolgesine biniyordu. Bu bant header yuksekligi boyunca
         (top bar 49px + menu 80px) zemini acik tutar, sonra soner. */
      linear-gradient(
        to bottom,
        rgba(255, 253, 249, 0.92) 0px,
        rgba(255, 253, 249, 0.86) 95px,
        rgba(255, 253, 249, 0.55) 150px,
        rgba(255, 253, 249, 0) 230px
      ),
      linear-gradient(
        to right,
        rgba(255, 253, 249, 0.95) 0%,
        rgba(255, 253, 249, 0.88) 46%,
        rgba(255, 253, 249, 0.6) 54%,
        rgba(255, 253, 249, 0.15) 64%,
        rgba(255, 253, 249, 0) 78%
      );
  }

  .kc-hero--light .kc-hero__title {
    color: #16489F;
  }

  .kc-hero--light .kc-hero__text {
    color: #16489F;
    opacity: 0.88;
    max-width: 520px; /* sacin koyu alanina girmesin */
  }

  .kc-hero--light .kc-hero__btn--primary {
    box-shadow: 0 18px 30px -10px rgba(22, 72, 159, 0.45);
  }

  /* Yari saydam beyaz buton acik zeminde kaybolurdu. */
  .kc-hero--light .kc-hero__btn--ghost {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(22, 72, 159, 0.35);
    color: #16489F;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .kc-hero--light .kc-hero__btn--ghost:hover,
  .kc-hero--light .kc-hero__btn--ghost:focus-visible {
    background: #fff;
    border-color: rgba(22, 72, 159, 0.6);
    color: #16489F;
  }

  .kc-hero--light .kc-hero__btn:focus-visible {
    outline-color: #16489F;
  }

  .kc-hero--light .kc-hero__dot span {
    background: rgba(22, 72, 159, 0.35);
  }

  .kc-hero--light .kc-hero__dot:hover span {
    background: rgba(22, 72, 159, 0.6);
  }

  /* Acik hero'da header seffaf kalip acik zeminin uzerine biniyor;
     tema beyaz metin veriyor (qodef-skin--light) ve yazi okunmuyor.
     Temanin skin sinifini degistirmek logoyu da degistiriyor ve
     qodef--dark logosu DentaMedi'nin kendi logosu - marka bozulurdu.
     Bu yuzden skin'e dokunmadan yalnizca metin renkleri eziliyor.
     Kural body'deki kc-page--light-hero sinifina bagli, yani sadece
     acik hero'lu sayfalarda calisiyor. */

  /* Not: top bar artik kendi koyu zeminini tasiyor (kc-topbar.css),
     bu yuzden burada rengi ezilmiyor - sadece menu. */

  .kc-page--light-hero #qodef-page-header nav > ul > li > a {
    color: #16489F !important; /* tema kurali da !important kullaniyor */
  }

  /* Aktif ve hover icin acik mavi (#1E9CD7) denendi ama beyaza yakin
     header zemininde 3.04:1 veriyor - AA alti. Koyu laciverte cekildi
     (12.7:1); aktif ogeyi zaten temanin alt cizgisi isaretliyor. */
  .kc-page--light-hero #qodef-page-header nav > ul > li > a:hover,
  .kc-page--light-hero #qodef-page-header nav > ul > li.current-menu-item > a {
    color: #0F306B !important;
  }

  /* mobil hamburger ikonu */
  .kc-page--light-hero .qodef-opener-icon.qodef-source--svg-path:not(.qodef--opened) {
    color: #16489F !important;
  }
}

/* --- icerik --- */

.kc-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 1140px; /* sitenin diger bolumleriyle ayni grid genisligi */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.kc-hero__content {
  width: 100%;
  max-width: 672px;
  min-width: 0; /* flex ogesinin dar ekranda kuculebilmesi icin sart */
  opacity: 0;
  transform: translateY(24px);
}

.kc-hero__slide.is-active .kc-hero__content {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.kc-hero__title {
  margin: 0 0 24px;
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
}

.kc-hero__text {
  margin: 0 0 40px;
  max-width: 576px;
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.625;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

/* --- butonlar --- */

.kc-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

@media (min-width: 640px) {
  .kc-hero__actions {
    flex-direction: row;
    align-items: center;
  }
}

.kc-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 32px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.kc-hero__btn svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.kc-hero__btn--primary {
  background: linear-gradient(135deg, #16489F 0%, #1E9CD7 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.kc-hero__btn--primary:hover,
.kc-hero__btn--primary:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 24px 30px -6px rgba(30, 156, 215, 0.4);
}

.kc-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.kc-hero__btn--ghost:hover,
.kc-hero__btn--ghost:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.kc-hero__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --- navigasyon noktalari --- */

.kc-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
}

@media (min-width: 640px) {
  .kc-hero__dots {
    bottom: 32px;
    gap: 12px;
  }
}

.kc-hero__dots[hidden] {
  display: none;
}

.kc-hero__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; /* mobilde dokunma hedefi */
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .kc-hero__dot {
    min-width: 0;
    min-height: 0;
    padding: 6px;
  }
}

.kc-hero__dot span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.6);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.kc-hero__dot:hover span {
  background: rgba(255, 255, 255, 0.9);
}

.kc-hero__dot[aria-selected="true"] span {
  width: 28px;
  background: #1E9CD7;
}

.kc-hero__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 9999px;
}

/* --- ekran okuyucuya ozel baslik --- */

.kc-hero-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- hareket azaltma tercihi --- */

@media (prefers-reduced-motion: reduce) {
  .kc-hero__slide,
  .kc-hero__slide.is-active .kc-hero__content,
  .kc-hero__btn,
  .kc-hero__dot span {
    transition-duration: 0.01ms !important;
  }

  .kc-hero__content {
    opacity: 1;
    transform: none;
  }

  .kc-hero__btn:hover {
    transform: none;
  }
}

/* --- kucuk ekranlar --- */

/* Koyu islem (A) 1200px ve altinda calisiyor. Ustteki soldan saga
   karartma eski koyu fotografa gore ayarliydi; yeni krem fotografta
   basligi 2.68:1, paragrafi 1.92:1'de birakiyordu. Dar ekranda metin
   tum genislige yayildigi icin yatay gradyan zaten iyi bir arac
   degil - dikey ve belirgin daha guclu bir karartmaya gecildi. */
@media (max-width: 1200px) {
  .kc-hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.54) 0%,
      rgba(0, 0, 0, 0.62) 40%,
      rgba(0, 0, 0, 0.66) 100%
    );
  }

  /* Oznesi karenin sag yarisinda olan slaytlar (2 ve 3; ikisinde de
     ozne x=880'den sonra basliyor). Dar ekranda cover yataydan cok
     kirpiyor: 390px'te gorunen alan kaynakta 598-1122'ye dusuyor ve
     ozne kadrajin disinda kaliyor. Konum saga cekilince gorunen alan
     854-1378 oluyor ve ozne kareye giriyor. */
  .kc-hero .kc-hero__img--ozne-sagda {
    object-position: 100% 50%;
  }
}

@media (max-width: 767px) {
  .kc-hero {
    min-height: 560px;
  }

  .kc-hero__text {
    margin-bottom: 32px;
  }

  .kc-hero__actions {
    width: 100%;
  }

  /* Dar ekranda uzun buton metni tasmasin: sabit yukseklik ve nowrap
     yerine esnek yukseklik + satir kaydirma. */
  .kc-hero__btn {
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 14px 20px;
    font-size: 15px;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
  }
}