/* Yaren Özkök Tema · Hizmet detay · v0.1.0 */

.yhd {
  margin: 0 24px;
  padding: 100px 32px;
}
.yhd-ic { max-width: 1313px; margin: 0 auto; }

/* ── ÜST ── */
.yhd-ust {
  display: grid;
  grid-template-columns: minmax(0, 685fr) minmax(0, 564fr);
  gap: 64px;
  align-items: center;
}

.yhd-etiket {
  display: block;
  margin-bottom: 24px;
  color: #355E54;
  font-family: var(--yz-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.yhd-baslik {
  margin: 0 0 24px;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: clamp(28px, 2.9vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.033em;
  text-wrap: balance;
}

.yhd-giris {
  max-width: 560px;
  margin: 0 0 16px;
  color: #333;
  font-family: var(--yz-font);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.yhd-butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 32px;
}

.yhd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid #2F6F5E;
  border-radius: 8px;
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.yhd-btn svg { flex-shrink: 0; }
.yhd-btn--dolu { background: #2F6F5E; color: #fff; }
.yhd-btn--dolu:hover { background: #1E4D40; border-color: #1E4D40; color: #fff; }
.yhd-btn--cizgi { background: transparent; color: #1E4D40; }
.yhd-btn--cizgi:hover { background: #E6F1EC; color: #1E4D40; }
.yhd-btn--beyaz { background: #fff; border-color: #fff; color: #1E4D40; }
.yhd-btn--beyaz:hover { background: #E6F1EC; border-color: #E6F1EC; color: #1E4D40; }
.yhd-btn:focus-visible { outline: 2px solid #1E4D40; outline-offset: 3px; }

.yhd-gorsel {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #E6F1EC;
}
.yhd-gorsel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 532 / 400;
  object-fit: cover;
  border-radius: 12px;
}

/* ── GÖVDE ── */
.yhd-govde {
  display: grid;
  grid-template-columns: minmax(0, 961fr) minmax(260px, 288fr);
  gap: 64px;
  align-items: start;
  margin-top: 64px;
}

.yhd-bolum + .yhd-bolum,
.yhd-bolum + .yhd-cta { margin-top: 48px; }

.yhd-h2 {
  margin: 0 0 20px;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: clamp(21px, 1.8vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.yhd-p {
  max-width: 72ch;
  margin: 0 0 16px;
  color: #333;
  font-family: var(--yz-font);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.yhd-p:last-child { margin-bottom: 0; }

.yhd-liste {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.yhd-liste:last-child { margin-bottom: 0; }
.yhd-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #333;
  font-family: var(--yz-font);
  font-size: 16px;
  line-height: 1.5;
}
.yhd-liste svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
  background: #E6F1EC;
  color: #2F6F5E;
  stroke-width: 2.4;
}

/* ── SÜREÇ ── */
.yhd-adimlar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.yhd-adim {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 20px 18px;
  border-radius: 12px;
  background: #F1F7F4;
}
.yhd-adim-no {
  color: #2F6F5E;
  font-family: var(--yz-font);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.yhd-adim-baslik {
  margin: 28px 0 10px;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}
.yhd-adim-metin {
  margin: 0;
  color: #333;
  font-family: var(--yz-font);
  font-size: 15px;
  line-height: 1.55;
}

/* ── ÇAĞRI ── */
.yhd-cta {
  padding: 36px 40px;
  border-radius: 12px;
  background: #1E4D40;
}
.yhd-cta-baslik {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--yz-font);
  font-size: clamp(21px, 1.8vw, 24px);
  font-weight: 600;
  line-height: 1.25;
}
.yhd-cta-metin {
  max-width: 62ch;
  margin: 0;
  color: #E6F1EC;
  font-family: var(--yz-font);
  font-size: 16px;
  line-height: 1.6;
}
.yhd-cta .yhd-butonlar { margin-top: 24px; }
.yhd-cta .yhd-btn--dolu { background: #fff; border-color: #fff; color: #1E4D40; }
.yhd-cta .yhd-btn--dolu:hover { background: #E6F1EC; border-color: #E6F1EC; }
.yhd-cta .yhd-btn--beyaz { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.yhd-cta .yhd-btn--beyaz:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.yhd-cta .yhd-btn:focus-visible { outline-color: #fff; }

/* ── KENAR ── */
.yhd-yan {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 24px;
}

/* ── DUYARLI ── */
@media (max-width: 1180px) {
  .yhd-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yhd-adim { min-height: 0; }
}

@media (max-width: 1000px) {
  .yhd-ust { grid-template-columns: 1fr; gap: 40px; }
  .yhd-gorsel { width: 100%; max-width: 640px; }
  .yhd-govde { grid-template-columns: 1fr; gap: 48px; }
  .yhd-yan { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}

@media (max-width: 900px) {
  .yhd { margin: 0 16px; padding: 56px 20px; }
  .yhd-govde { margin-top: 48px; }
}

@media (max-width: 560px) {
  .yhd { padding: 44px 4px; }
  .yhd-adimlar { grid-template-columns: 1fr; }
  .yhd-adim-baslik { margin-top: 16px; }
  .yhd-cta { padding: 28px 22px; }
  .yhd-butonlar .yhd-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .yhd-btn, .ykn-linkler a, .ykn-linkler a svg, .ykn-sosyal a { transition: none; }
}