/* ============================================================
   boran.css — Dr. Abdulcabbar Boran: tek sayfalık tanıtım.
   Yazı solda, portre sağda; portrenin alt kenarı bölüm zemininde
   kesiliyor. Düzen 10.10.2026'da verilen tasarım örneğine göre.
   ============================================================ */

.boran {
  /* Soldan sağa hafifçe ısınan krem zemin — düz renk yerine, portrenin
     kesilen alt kenarı sert bir çizgi gibi durmasın diye. */
  background: linear-gradient(100deg, #F4F1EA 0%, #FAF6EE 55%, #F7F0E3 100%);
  color: var(--metin);
  /* Portre alttan kırpıldığı için taşan kısım burada kesiliyor. */
  overflow: hidden;
  z-index: 3;
}

.boran__kart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 5rem) var(--gutter) 0;
}

/* ---------- sol sütun: yazı ---------- */
.boran__metin {
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
}

/* İsim ve unvanı birlikte işaretleyen ince dikey çizgi */
.boran__kimlik {
  border-left: 3px solid var(--brand-yellow);
  padding-left: clamp(0.9rem, 1.6vw, 1.4rem);
}

.boran__ad {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.85vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--lacivert);
}

.boran__unvan {
  margin-top: 0.45rem;
  font-size: clamp(0.9rem, 1.35vw, 1.15rem);
  font-weight: 500;
  color: var(--unvan);
}
/* Ayraç noktaları markanın altın rengiyle */
.boran__nokta {
  color: var(--brand-yellow);
  margin: 0 0.15em;
}

.boran__ozet {
  margin-top: clamp(1.2rem, 3vh, 2rem);
  max-width: 52ch;
  font-size: clamp(0.9rem, 1.05vw, 1.02rem);
  line-height: 1.68;
  color: var(--metin);
}

/* ---------- bağlantı ---------- */
.boran__link {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
  margin-top: clamp(1.4rem, 3.5vh, 2.4rem);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  font-weight: 500;
  color: var(--link);
  transition: gap 0.3s var(--ease-out), color 0.3s;
}
.boran__ok {
  width: clamp(26px, 2.4vw, 34px);
  height: auto;
  flex: 0 0 auto;
}
.boran__link:hover {
  gap: clamp(1.1rem, 2.2vw, 2rem);
  color: #0057B8;
}

/* ---------- sağ sütun: portre ---------- */
.boran__portre {
  margin: 0;
  justify-self: end;
  /* Sabit yükseklik + üstten hizalı kırpma: alt kenar bölümün dibinde
     kesiliyor, referanstaki gibi zemine karışıyor. */
  height: clamp(235px, 31vw, 455px);
  display: block;
}
.boran__portre img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---------- dar ekranlar ---------- */
@media (max-width: 820px) {
  /* Telefonda portre yazının ALTINA iner ve ortalanır; yan yana
     dizilim bu genişlikte metni fazlasıyla sıkıştırıyordu. */
  .boran__kart {
    grid-template-columns: 1fr;
    gap: clamp(1.2rem, 3vh, 2rem);
    padding-bottom: 0;
  }
  .boran__metin { padding-bottom: 0; }
  .boran__portre {
    justify-self: center;
    height: clamp(210px, 55vw, 300px);
  }
  .boran__ozet { max-width: none; font-size: 0.9rem; }
  .boran__link { font-size: 0.8rem; }
}

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