/* =====================================================================
   about.css — Hakkımızda (/hakkimizda/)
   ===================================================================== */

/* 1. hero: centred title, two 640x500 photos --------------------------- */
.about-hero { background: var(--white); padding-top: 210px; padding-bottom: 150px; overflow: hidden; }
.about-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.about-hero__title { text-align: center; max-width: 900px; }
.about-hero__photos { margin-top: 36px; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.about-hero__photo { overflow: hidden; border-radius: var(--radius); }
.about-hero__photo img { width: 100%; aspect-ratio: 640 / 500; object-fit: cover; border-radius: var(--radius); transition: transform .8s var(--ease-out); }
.about-hero__photo:hover img { transform: scale(1.04); }

/* 2. story + clinic card ---------------------------------------------- */
.about-story { padding-top: 150px; padding-bottom: 75px; }
.about-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px 380px; gap: 40px; align-items: center; }
.about-story__photo { border-radius: var(--radius); overflow: hidden; }
.about-story__photo img { width: 100%; height: 524px; object-fit: cover; transition: transform .8s var(--ease-out); }
.about-story__photo:hover img { transform: scale(1.04); }
.about-story__btn { margin-top: 20px; width: max-content; }
.about-clinic { position: relative; z-index: 2; }
.about-story__text { display: grid; gap: 18px; max-width: 760px; }
.about-story__text .text { font-size: 17px; line-height: 28px; }
.about-clinic { padding: 40px; display: grid; gap: 20px; }
.about-clinic .checklist { gap: 12px; }
.about-clinic .checklist li { align-items: flex-start; line-height: 24px; }
.about-clinic .checklist .ico { margin-top: 3px; }

/* 3. principles -------------------------------------------------------- */
.about-principles { padding-block: 75px; }
.about-principles__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.about-principle { position: relative; padding: 40px 40px 40px 110px; display: grid; gap: 14px; min-height: 180px; }
.about-principle__num { position: absolute; left: 40px; top: 40px; width: 46px; height: 46px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--red); }

/* 4. team -------------------------------------------------------------- */
.about-team { padding-block: 75px; }
.about-team .blog__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.about-team .blog__head .section-head { max-width: 760px; }

/* 5. area + strays + fee ------------------------------------------------ */
.about-area { padding-block: 75px; }
.about-area__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.about-area__grid .h6 { margin-bottom: 16px; }
.about-area__grid .text + .text { margin-top: 12px; }
.about-area__sub { margin-top: 40px; }
.about-area__btn { margin-top: 24px; width: max-content; }
.about-area__legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--brown); font-weight: 600; }

/* 6. wide photo ------------------------------------------------------- */
.about-wide { padding: 75px var(--gutter) 150px; }
.about-principles { padding-bottom: 75px; }
.about-wide__photo { overflow: hidden; border-radius: var(--radius); }
.about-wide__photo img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transform: scale(calc(1 + .12 * var(--q, 0))); transition: transform .5s var(--ease-out); }

@media (max-width: 1359px) {
  .about-hero { padding-top: 160px; padding-bottom: 100px; }
  .about-story { padding-top: 100px; }
  .about-story__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .about-story__text { grid-column: 1 / -1; }
  .about-clinic[data-scrub] { transform: none; }
  .about-principle { padding: 30px 30px 30px 96px; min-height: 0; }
  .about-principle__num { left: 30px; top: 30px; }
  .about-area__grid { gap: 40px; }
  .about-wide { padding-bottom: 100px; }
}
@media (max-width: 809px) {
  .about-hero { padding-top: 140px; padding-bottom: 60px; }
  .about-hero__photos { grid-template-columns: 1fr; margin-top: 20px; }
  .about-story { padding-top: 60px; padding-bottom: 40px; }
  .about-story__grid { grid-template-columns: 1fr; }
  .about-story__photo img { height: auto; aspect-ratio: 4 / 3; }
  .about-clinic { padding: 24px; }
  .about-principles, .about-team, .about-area { padding-block: 40px; }
  .about-principles__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .about-principle { padding: 24px 24px 24px 84px; }
  .about-principle__num { left: 24px; top: 24px; }
  .about-team .blog__head { flex-direction: column; align-items: flex-start; gap: 30px; }
  .about-area__grid { grid-template-columns: 1fr; }
  .about-wide { padding: 40px var(--gutter) 80px; }
}