/* ==========================================================
   APPOINTMENT MODULE (servis sayfasıyla bire bir)
   Kullanım: <appointment-section ...></appointment-section>
   Bu CSS, custom element'in içindeki DOM'u stillendirir.
   ----------------------------------------------------------
   Not: overshoot-lines.css ve btn-overshoot.css zaten projede.
   Bu modül sadece yerleşim ve kart görünümünü verir.
   ========================================================== */

/* Host custom element: blok davranışı ve genişlik değişkeni */
appointment-section{
  /* Varsayılan genişlik bandı: servis sayfasıyla aynı */
  --appt-width: clamp(960px, 88vw, 1100px);
  display: block;
}

/* Ana bölüm: servislerdeki .appointment ile aynı */
appointment-section .appointment{
  width: var(--appt-width);
  margin: 0 auto 30px;            /* yatay ortala + altta 30px */
  position: relative;
}

/* Kısa sayfada dibe yapıştırmak istersen: <appointment-section bottom>
   (Parent container'ının flex-column olması gerekir) */
appointment-section[bottom] .appointment{
  margin-top: auto;               /* parent flex ise dibe iner */
}

/* Üstte nefes (serviste 50px) */
appointment-section .appointment::before{
  content:"";
  display:block;
  height:50px;
}

/* Kart gövdesi (servislerle bire bir) */
appointment-section .appt-inner{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0;
  padding: clamp(24px, 5vw, 40px);
  text-align: center;

  display: grid;
  gap: 10px;
  place-items: center;
}

/* Başlık/metin tipografisi (servislerle bire bir) */
appointment-section .appt-inner h3{
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: .2px;
}
appointment-section .appt-inner p{
  margin: 0 0 6px;
  color: #cfd1d6;
  line-height: 1.6;
}

/* CTA: servislerdeki butonun aynısı (çizgi animasyonu) */
appointment-section .appt-cta.btn-overshoot{
  /* overshoot-lines değişkenleri (gerekirse burada oynat) */
  --line-color: rgba(255,255,255,.55);
  --thick: 1px;
  --inset-x: 10px;
  --inset-y: 10px;
  --shrink-h: 20px;
  --shrink-v: 20px;

  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  padding: 18px 26px;
  font-weight: 700;
  color: #e8e9ec;
  text-decoration: none;

  display: inline-block;
  margin: 6px auto 0;           /* ortala */
}