/* =============================================================================
   DUVAN MED — Hizmet kartları ve hastalara yönelik bilgilendirme bölümü
   ============================================================================= */

/* ---------- Görselli hizmet kartı ---------- */
.hizmet-karti {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--duvan-cizgi);
  border-radius: 18px; overflow: hidden; transition: box-shadow .25s, transform .25s;
}
.hizmet-karti:hover { box-shadow: var(--duvan-golge); transform: translateY(-4px); }
.hizmet-karti-gorsel { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f8fb; }
.hizmet-karti-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hizmet-karti:hover .hizmet-karti-gorsel img { transform: scale(1.05); }
.hizmet-karti-ikon {
  position: relative; z-index: 1; margin: 22px 0 0 22px;
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-color); color: #fff; font-size: 24px; box-shadow: 0 8px 20px rgba(10, 116, 201, .35);
}
.hizmet-karti-gorsel + .hizmet-karti-ikon { margin-top: -26px; }
.hizmet-karti-govde { padding: 12px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.hizmet-karti-govde h3 { font-size: 20px; font-weight: 700; margin: 10px 0 8px; }
.hizmet-karti-govde h3 a { color: var(--heading-color); }
.hizmet-karti-govde h3 a:hover { color: var(--accent-color); }
.hizmet-karti-govde p { font-size: 15px; color: #5e6b76; flex: 1; }

/* ---------- Hastalar için ---------- */
.hasta-bolum { background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%); }
.hasta-bolum .lead-metin { font-size: 17px; line-height: 1.7; }
.hasta-artilar { list-style: none; padding: 0; margin: 20px 0 26px; }
.hasta-artilar li { display: flex; gap: 12px; padding: 7px 0; align-items: flex-start; }
.hasta-artilar i {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: #e1eefa; color: var(--accent-color); font-size: 17px;
}
.hasta-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.hasta-gorseller { position: relative; padding: 0 0 70px 0; }
.hasta-gorsel-ana { width: 88%; border-radius: 20px; box-shadow: 0 20px 50px rgba(11, 47, 79, .18); display: block; height: auto; }
.hasta-gorsel-kucuk {
  position: absolute; right: 0; bottom: 0; width: 50%; border-radius: 16px; border: 6px solid #fff;
  box-shadow: 0 16px 40px rgba(11, 47, 79, .22); height: auto;
}
.hasta-rozet {
  position: absolute; left: 20px; bottom: 26px; background: #fff; border-radius: 50px; padding: 10px 18px;
  font-weight: 600; color: var(--duvan-lacivert); box-shadow: 0 10px 26px rgba(11, 47, 79, .15); font-size: 14px;
}
.hasta-rozet i { color: #1f9d55; margin-right: 4px; }

.hasta-alt-baslik { font-size: 24px; font-weight: 700; margin: 50px 0 20px; text-align: center; }
.lens-turu {
  background: #fff; border: 1px solid var(--duvan-cizgi); border-radius: 16px; padding: 22px 20px; transition: .25s;
}
.lens-turu:hover { border-color: var(--accent-color); box-shadow: var(--duvan-golge); }
.lens-turu-ikon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0a74c9, #36a9f5); color: #fff; font-size: 21px; margin-bottom: 12px;
}
.lens-turu h4 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.lens-turu p { font-size: 14px; color: #5e6b76; margin: 0; }

.hasta-adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: adim; }
.hasta-adim {
  position: relative; background: #fff; border: 1px solid var(--duvan-cizgi); border-radius: 16px; padding: 26px 20px 20px; text-align: center;
}
.hasta-adim .no {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%;
  background: var(--duvan-lacivert); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.hasta-adim > i { font-size: 30px; color: var(--accent-color); }
.hasta-adim h4 { font-size: 16px; font-weight: 700; margin: 10px 0 6px; }
.hasta-adim p { font-size: 14px; color: #5e6b76; margin: 0; }

.hasta-sss { max-width: 860px; margin: 0 auto; }
.hasta-sss .accordion-item { border-color: var(--duvan-cizgi); }
.hasta-sss .accordion-button { font-weight: 600; color: var(--duvan-lacivert); }
.hasta-sss .accordion-button:not(.collapsed) { background: #eef5fb; color: var(--accent-color); box-shadow: none; }
.hasta-sss .accordion-button:focus { box-shadow: 0 0 0 3px rgba(10, 116, 201, .2); }

.hasta-not { font-size: 13px; color: #7a8894; text-align: center; margin: 30px auto 0; max-width: 760px; }

@media (max-width: 991px) {
  .hasta-adimlar { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .hasta-gorsel-ana { width: 100%; }
}
@media (max-width: 575px) {
  .hasta-adimlar { grid-template-columns: 1fr; }
  .hasta-cta > a { flex: 1 1 100%; }
}

/* İletişim: şu an açık / kapalı rozeti */
.acik-rozet { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 2px 10px; margin-left: 6px; vertical-align: middle; }
.acik-rozet.acik { background: #e3f6ea; color: #1e7b45; }
.acik-rozet.kapali { background: #f1f3f5; color: #6c7883; }