/* Kilya Clinic - hizmet sayfalari (menudeki Hizmetlerimiz altindaki 6 sayfa)

   Alti sayfa da ayni iskeleti kullaniyor:

   1) Koyu lacivert acilis bandi - solda baslik/ozet/buton, sagda gorsel.
      Bant, sayfanin ne hakkinda oldugunu tek bakista veriyor ve ust
      taraftaki acik gri breadcrumb seridinden net ayriliyor.
   2) Beyaz govde - solda aciklama metni, sagda "Kapsam" karti.
      Kapsam listeleri ana sayfadaki hizmet kartlariyla birebir ayni.
   3) Acik tonlu "One cikan uygulamalar" bandi - yalnizca bu icerige
      sahip sayfalarda (implant, estetik, ortodonti). Digerlerinde
      bolum hic basilmiyor; uydurma icerikle doldurulmadi.

   Onceki tasarimdaki dolasan ikon rozetleri ve gorselin uzerine binen
   daireler kaldirildi: bilgi tasimiyorlardi ve fotografi kapatiyorlardi. */

.kc-hz,
.kc-hz-govde,
.kc-hz-one {
  --kc-brand: #16489F;
  --kc-derin: #0F306B;
  --kc-vurgu: #1E9CD7;
  /* Koyu zeminde kullanilan acik mavi: #1E9CD7 lacivert uzerinde
     4.09:1'de kalip AA'yi gecmiyor, bu ton 7.38:1 veriyor. */
  --kc-vurgu-acik: #7FD0F5;
  --kc-ton: #f1f7fc;
  --kc-cizgi: rgba(22, 72, 159, 0.14);
}

/* ============ 1) ACILIS BANDI ============ */

.kc-hz {
  padding: 74px 0 78px;
  background: var(--kc-derin);
  color: #fff;
}

.kc-hz__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 60px;
  align-items: center;
  max-width: 1140px; /* 20px dolgu ile net 1100px - sitenin izgarasi */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.kc-hz__etiket {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-vurgu-acik); /* 7.38:1 */
}

.kc-hz__baslik {
  margin: 0 0 18px;
  font-size: clamp(31px, 3.6vw, 50px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff; /* 12.65:1 */
}

.kc-hz__lead {
  margin: 0 0 30px;
  max-width: 52ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.58;
  color: #fff;
  opacity: 0.92;
}

/* Koyu zeminde site geneli gradyan buton (lacivert -> mavi) yeterince
   ayrismiyor; duz beyaz zemin + lacivert yazi hem en yuksek kontrast
   hem de bandin tek parlak noktasi. */
.kc-hz__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 30px;
  border-radius: 6px;
  background: #fff;
  color: var(--kc-derin);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.kc-hz__cta:hover,
.kc-hz__cta:focus-visible {
  background: var(--kc-vurgu-acik);
  color: var(--kc-derin);
  transform: translateY(-2px);
}

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

.kc-hz__gorsel {
  margin: 0;
}

/* Secici bilerek .kc-hz ile baslatildi: Elementor'un
   ".elementor img { height: auto }" kurali ayni spesifiklikte (0,1,1)
   ve kaynak sirasinda sonra geldigi icin en-boy oranini eziyor. */
.kc-hz .kc-hz__foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

/* ============ 2) GOVDE ============ */

.kc-hz-govde {
  padding: 76px 0 84px;
}

.kc-hz-govde__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
  gap: 60px;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.kc-hz-govde__yazi p {
  margin: 0 0 20px;
  max-width: 64ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.75;
  color: var(--kc-brand);
  opacity: 0.88;
}

.kc-hz-govde__yazi p:last-child {
  margin-bottom: 0;
}

/* Iki sayfada (agiz ve dis tedavileri, dis sikma ve uyku) henuz
   aciklama metni yok - yalnizca kapsam listesi var. Orada yan sutun
   yerine tek sutun kullaniliyor; bos bir metin sutunu birakmak
   sayfayi yarim gosteriyordu. */
.kc-hz-govde--tek .kc-hz-govde__inner {
  grid-template-columns: minmax(0, 1fr);
}

.kc-hz-govde--tek .kc-hz-kapsam {
  max-width: 720px;
}

.kc-hz-kapsam {
  padding: 30px 30px 28px;
  border-radius: 12px;
  background: var(--kc-ton);
}

.kc-hz-kapsam__baslik {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-brand); /* acik ton uzerinde 8.00:1 */
}

.kc-hz-kapsam__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-hz-kapsam__liste li {
  padding: 15px 0;
  border-bottom: 1px solid var(--kc-cizgi);
  font-size: 17px;
  line-height: 1.45;
  color: var(--kc-brand);
}

.kc-hz-kapsam__not {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kc-brand);
  opacity: 0.8;
}

/* ============ 3) ONE CIKAN UYGULAMALAR ============ */

.kc-hz-one {
  padding: 76px 0 84px;
  background: var(--kc-ton);
}

.kc-hz-one__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.kc-hz-one__baslik {
  margin: 0 0 34px;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--kc-brand);
}

.kc-hz-one__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-hz-one__item {
  min-width: 0;
}

.kc-hz-one .kc-hz-one__foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 18px;
  background: #fff;
}

.kc-hz-one__ad {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--kc-brand);
}

.kc-hz-one__desc {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--kc-brand);
  opacity: 0.85;
}

/* ============ dar ekran ============ */

@media (max-width: 1024px) {
  .kc-hz__inner,
  .kc-hz-govde__inner {
    gap: 40px;
  }
}

@media (max-width: 899px) {
  .kc-hz {
    padding: 46px 0 52px;
  }

  /* Gorsel metnin altina geciyor: dar ekranda once ne oldugu okunsun. */
  .kc-hz__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .kc-hz__lead {
    margin-bottom: 24px;
    max-width: none;
  }

  .kc-hz__cta {
    width: 100%;
    height: auto;
    min-height: 54px;
    padding: 14px 20px;
    white-space: normal;
    text-align: center;
  }

  .kc-hz-govde {
    padding: 48px 0 54px;
  }

  .kc-hz-govde__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .kc-hz-govde__yazi p {
    max-width: none;
  }

  .kc-hz-kapsam {
    padding: 24px 22px 22px;
  }

  .kc-hz-one {
    padding: 48px 0 56px;
  }

  .kc-hz-one__baslik {
    margin-bottom: 24px;
  }

  .kc-hz-one__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .kc-hz-one__desc {
    max-width: none;
  }
}