/* Kilya Clinic motto bandi

   Tam genislikte gorsel bandi; metin her genislikte gorselin uzerinde.

   Tipografi: kompozisyonu yazinin kendisi tasiyor - birinci satir
   ince (300) ve hafif soluk, ikinci satir dolgun (500) ve bir tik
   buyuk. Vurgu cumlenin iddia tasiyan yarisinda. Ustte aksan cizgisi
   yok; her sitede gorulen bir kalip oldugu icin kaldirildi.

   Yerlesim iki farkli calisiyor:
   - Genis ekranda ozne solda, sag taraf acik ve bos -> metin saga.
   - Dar ekranda fotograf yatayda kirpildigi icin sagdaki bos alan
     kalmiyor. Metin alta aliniyor ve altindan yukselen acik bir tul
     kontrasti garantiliyor (olculen deger asagida). */

.kc-motto {
  --kc-brand: #16489F;

  position: relative;
  width: 100%;
  overflow: hidden;
  background: #F2EFEA; /* gorsel yuklenene kadar fotografin ortalama tonu */
}

/* Secici bilerek .kc-motto ile baslatildi: Elementor'un
   ".elementor img { height: auto }" kurali ayni spesifiklikte (0,1,1)
   ve kaynak sirasinda sonra geldigi icin kazaniyor; yukseklik
   uygulanmayinca bant 1440px'te 802px'e cikiyordu. */
.kc-motto .kc-motto__img {
  display: block;
  width: 100%;
  /* Gorsel 2.37:1 - bant orani olarak zaten uygun. Yukseklik dogal
     orana yakin tutuluyor ki kirpma en aza insin: 1440px'te gosterilen
     yukseklik 560px, dogal yukseklik 608px -> yalnizca %8 kirpma. */
  height: clamp(260px, 39vw, 560px);
  object-fit: cover;
  /* Dikeyde %34: kirpma sirasinda oznenin yuzu karede kalsin. */
  object-position: center 34%;
}

.kc-motto__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 1140px; /* 20px dolgu ile net 1100px - sitenin izgarasi */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

.kc-motto__text {
  max-width: 640px;
  margin: 0;
  font-size: clamp(30px, 4.3vw, 62px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--kc-brand);
}

.kc-motto__l1,
.kc-motto__l2 {
  display: block;
}

.kc-motto__l1 {
  font-weight: 300;
  opacity: 0.8;
}

.kc-motto__l2 {
  font-weight: 500;
  font-size: 1.06em; /* iddiayi tasiyan satir bir tik one ciksin */
}

/* --- dar ekran: metin yine gorselin uzerinde, altta --- */

@media (max-width: 899px) {
  .kc-motto .kc-motto__img {
    /* Metin altta duracagi icin bant biraz yuksek: hem ozne hem
       metin icin yer kalsin. */
    height: clamp(340px, 82vw, 460px);
    /* Ozne ustte kalsin, alt bolge metne birakilsin. */
    object-position: 32% 22%;
  }

  /* Alttan yukselen acik tul - metnin kontrastini garantiler. */
  .kc-motto::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 66%;
    background: linear-gradient(
      to top,
      rgba(255, 253, 249, 0.98) 0%,
      rgba(255, 253, 249, 0.95) 42%,
      rgba(255, 253, 249, 0.7) 70%,
      rgba(255, 253, 249, 0) 100%
    );
    pointer-events: none;
  }

  .kc-motto__inner {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 20px 30px;
  }

  .kc-motto__text {
    max-width: none;
    font-size: clamp(26px, 6.4vw, 38px);
    line-height: 1.2;
  }
}

@media (max-width: 400px) {
  .kc-motto .kc-motto__img {
    height: clamp(320px, 88vw, 380px);
  }

  .kc-motto__inner {
    padding: 0 18px 26px;
  }
}