/* Konum ve randevu bölümü — bütün müşteri sitelerinde AYNI.
 *
 * Yorumlar bileşeniyle aynı mantık: tasarım şablona uydurulmuyor, sadece
 * üç renk değişkeni bağlanıyor. Yeni siteye eklerken --r-zemin, --r-ink
 * ve --r-vurgu değerlerini o şablonun paletine bağla, gerisine dokunma.
 *
 * ─────────────────────────────────────────────────────────
 * KONUM MESELESİ, kararın gerekçesi
 *
 * Bu bölüm bilerek sokak adresi göstermiyor ve haritaya iğne batırmıyor.
 * Sebebi: demolar kurgusal firmalar. Uydurulan bir adres gerçek dünyada
 * ya var olmayan bir yere ya da başkasının binasına denk geliyor; ikisi
 * de kabul edilemez. Haritaya rastgele iğne batırmak da aynı şey.
 *
 * Yerine ilçe düzeyinde hizmet bölgesi yazıyoruz. İlçe adı kamuya ait
 * coğrafya, kimsenin adresi değil; üstelik ziyaretçinin gerçekten merak
 * ettiği şey de bu: "bana geliyor mu".
 *
 * GERÇEK MÜŞTERİDE: sokak adresi ve harita, ancak işletme sahibi kendi
 * adresini verdikten sonra eklenir. O zaman bölge listesi kalır, altına
 * gerçek adres ve Google İşletme Profili bağlantısı girer.
 * ───────────────────────────────────────────────────────── */

.randevu {
  --r-zemin: #ffffff;
  --r-ink: #1a1714;
  --r-soft: #6e6e73;
  --r-cizgi: rgba(0, 0, 0, 0.14);
  --r-vurgu: #1a1714;

  background: var(--r-zemin);
  color: var(--r-ink);
  padding: 84px 0;
  /* Yazı tipi bileşenin kendi malı; şablondan miras alınırsa her sitede
     başka bir yüzle çıkıyor. Başlık bunun dışında: o firmaya ait içerik,
     şablonun yüzüyle yazılıyor. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.randevu .rw {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.randevu .rbas { max-width: 46ch; margin-bottom: 34px; }
.randevu .rbas h2 {
  margin: 0 0 12px;
  font-family: inherit;
  font-size: clamp(30px, 4vw, 46px);
  /* Türkçe alt işaretleri için 1.16 alt sınır. */
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.randevu .rbas p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--r-soft);
}

/* Harita ile altındaki iki kart arasındaki boşluk, kartların kendi
   aralarındaki boşluktan belirgin şekilde geniş. Eşit olduğunda harita
   da üçüncü bir kart gibi okunuyor ve blok tek parça bir yığın gibi
   duruyordu; oysa harita ayrı bir şey, kartlar ayrı. */
.randevu .rizgara { display: grid; gap: 20px; margin-top: 44px; }
@media (min-width: 900px) {
  /* Form daha geniş: içinde üç alan ve bir düğme var, bölge listesinde
     sadece isimler. Eşit sütun verilince form sıkışıyordu. */
  .randevu .rizgara { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.randevu .rkart {
  border: 1px solid var(--r-cizgi);
  border-radius: 14px;
  padding: 26px 24px;
  background: #fff;
}
.randevu .rkart h3 {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-soft);
}

/* ---- hizmet bölgesi ---- */
.randevu .rbolge ul { list-style: none; margin: 0; padding: 0; }
.randevu .rbolge li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--r-cizgi);
  font-size: 15px;
  line-height: 1.5;
}
.randevu .rbolge li:last-child { border-bottom: 0; }
.randevu .rbolge li span { color: var(--r-soft); font-size: 13.5px; white-space: nowrap; }
.randevu .rnot {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--r-soft);
}

/* ---- randevu formu ---- */
.randevu .ralanlar { display: grid; gap: 14px; }
@media (min-width: 560px) {
  .randevu .ralanlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .randevu .ralan--tam { grid-column: 1 / -1; }
}
.randevu .ralan { display: flex; flex-direction: column; gap: 6px; }
.randevu .ralan > span {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--r-soft);
}
.randevu .ralan input,
.randevu .ralan select {
  font: inherit;
  font-size: 15px;
  color: var(--r-ink);
  background: #fff;
  border: 1px solid var(--r-cizgi);
  border-radius: 9px;
  padding: 11px 12px;
  /* iOS tarih alanını kendi yüksekliğine göre büyütüyor, diğer alanlarla
     hizadan çıkıyordu. */
  min-height: 44px;
  appearance: none;
}
.randevu .ralan input:focus-visible,
.randevu .ralan select:focus-visible {
  outline: 2px solid var(--r-vurgu);
  outline-offset: 2px;
}

.randevu .rgonder {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 18px;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--r-vurgu);
  color: #fff;
  transition: opacity 0.18s linear;
}
.randevu .rgonder:hover { opacity: 0.88; }
.randevu .rgonder:focus-visible { outline: 2px solid var(--r-vurgu); outline-offset: 3px; }

.randevu .rform-not {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--r-soft);
}